/* ==========================================================================
   Kıtlax — the page
   --------------------------------------------------------------------------
   The film ends on the bags' cream paper; the page is that cream, so the film
   hands over to the page without a seam. Type: Bricolage Grotesque (the logo's
   chunky energy, with restraint) over Figtree. Colour: the bags' own four, the
   logo's red, a warm near-black.
   ========================================================================== */
:root {
  --cream: #f3eadd;          /* the bags' paper, as the film renders it */
  --cream-2: #ebe0d0;
  --ink: #1d140e;
  --ink-soft: #5a4a3e;
  --ink-faint: #6b5c4f;
  --line: rgba(29, 20, 14, 0.12);
  --night: #140d09;
  --ivory: #f7efe4;
  --red: #e3262c;
  --ketcap: #e9393f; --peynir: #eba80f; --sut: #3fb7bc; --tako: #2f9e3a;

  --f-display: "Bricolage Grotesque", "Cairo", "Arial Black", system-ui, sans-serif;     /* Cairo: the Arabic letters */
  --f-body: "Figtree", "Cairo", "Segoe UI", system-ui, sans-serif;
  --t-hero: clamp(2.6rem, 1.4rem + 4.6vw, 5.6rem);
  --t-h2: clamp(2rem, 1.2rem + 3vw, 3.8rem);
  --t-lead: clamp(1.02rem, 0.95rem + 0.35vw, 1.2rem);
  --pad: clamp(1.1rem, 0.5rem + 2.6vw, 3rem);
  --hdr-h: clamp(4rem, 3.4rem + 1.6vw, 5.25rem);
  --e-out: cubic-bezier(0.22, 1, 0.36, 1);
  --e-inout: cubic-bezier(0.65, 0, 0.35, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scrollbar-gutter: stable; }
body {
  margin: 0; background: var(--cream); color: var(--ink);
  font: 400 1rem/1.6 var(--f-body);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
html.is-loading body { overflow: hidden; }
img, svg, canvas { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
p, h1, h2, h3, dl, dd, figure, address { margin: 0; }
address { font-style: normal; }
:focus-visible { outline: 2px solid var(--red); outline-offset: 4px; border-radius: 4px; }
.skip { position: fixed; left: var(--pad); top: -100px; z-index: 60; background: var(--ink); color: var(--ivory); padding: 0.6rem 1rem; border-radius: 999px; }
.skip:focus { top: 1rem; }

.label { font: 600 0.74rem/1 var(--f-body); letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-faint); }
.sec-title { font: 800 var(--t-h2)/1.02 var(--f-display); letter-spacing: -0.03em; text-wrap: balance; }
.sec-title em { font-style: normal; color: var(--red); }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5em; min-height: 3.1rem; padding: 0 1.6rem; border-radius: 999px;
  font: 600 0.98rem/1 var(--f-body); transition: background 200ms var(--e-out), transform 300ms var(--e-out), box-shadow 300ms var(--e-out); }
.btn--solid { background: var(--red); color: #fff; box-shadow: 0 10px 30px -12px rgba(227, 38, 44, 0.6); }
.btn--solid:hover { background: #cc1f25; transform: translateY(-1px); }
.btn:active { transform: translateY(1px); }

/* ---- loader ----------------------------------------------------------------- */
.loader { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; align-content: center; gap: 1.8rem;
  background: var(--night); transition: opacity 700ms var(--e-out), visibility 0s linear 700ms; }
html:not(.is-loading) .loader { opacity: 0; visibility: hidden; }
.loader__logo { width: min(15rem, 56vw); }
.loader__bar { position: relative; width: min(10rem, 40vw); height: 2px; border-radius: 2px; background: rgba(247, 239, 228, 0.16); overflow: hidden; }
.loader__bar i { position: absolute; inset: 0; background: var(--ivory); transform-origin: left; transform: scaleX(var(--p, 0)); transition: transform 300ms var(--e-out); }

/* ---- header: full width, the logo hard left, the rest hard right ------------- */
.hdr { position: fixed; inset: 0 0 auto; z-index: 30; height: var(--hdr-h);
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding: 0 var(--pad);
  color: var(--ink); transition: color 300ms var(--e-out), background 300ms var(--e-out), box-shadow 300ms var(--e-out); }
.hdr.is-stuck { background: rgba(243, 234, 221, 0.86); box-shadow: 0 1px 0 var(--line);
  -webkit-backdrop-filter: blur(14px) saturate(1.1); backdrop-filter: blur(14px) saturate(1.1); }
.hdr__brand img { width: clamp(6.6rem, 5.5rem + 3vw, 8.4rem); filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.18)); }
.hdr__nav { display: flex; align-items: center; gap: clamp(0.9rem, 0.4rem + 1.6vw, 2rem); }
.hdr__link { position: relative; font: 500 0.95rem/1 var(--f-body); color: var(--ink-soft); transition: color 200ms var(--e-out); }
.hdr__link::after { content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 1.5px; border-radius: 2px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform 400ms var(--e-out); }
.hdr__link:hover { color: var(--ink); }
.hdr__link:hover::after { transform: scaleX(1); transform-origin: left; }
.lang { display: flex; gap: 2px; padding: 3px; border-radius: 999px; border: 1px solid var(--line); }
.lang__btn { position: relative; min-width: 2.3rem; height: 1.8rem; border-radius: 999px; font: 600 0.74rem/1 var(--f-body); letter-spacing: 0.08em; color: var(--ink-faint); transition: background 200ms, color 200ms; }
.lang__btn::after { content: ""; position: absolute; inset: -8px -2px; }
.lang__btn[aria-pressed="true"] { background: var(--ink); color: var(--cream); }
.hdr__cta { min-height: 2.6rem; padding: 0 1.15rem; border-radius: 999px; display: inline-flex; align-items: center;
  font: 600 0.9rem/1 var(--f-body); background: var(--red); color: #fff; transition: background 200ms var(--e-out); }
.hdr__cta:hover { background: #cc1f25; }
/* over the dark opening: light type, no bar */
html[data-film="dark"] .hdr { color: var(--ivory); background: transparent; box-shadow: none; }
html[data-film="dark"] .hdr__link { color: rgba(247, 239, 228, 0.78); }
html[data-film="dark"] .hdr__link:hover { color: var(--ivory); }
html[data-film="dark"] .lang { border-color: rgba(247, 239, 228, 0.22); }
html[data-film="dark"] .lang__btn { color: rgba(247, 239, 228, 0.6); }
html[data-film="dark"] .lang__btn[aria-pressed="true"] { background: var(--ivory); color: var(--ink); }
html[data-film="light"] .hdr { background: transparent; box-shadow: none; }
/* the music's switch (js/sound.js): four little bars that move while it plays */
.sound { position: relative; display: inline-flex; align-items: center; gap: 0.5em; padding: 0.4em 0.2em;
  font: 600 0.74rem/1 var(--f-body); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-faint);
  transition: color 200ms var(--e-out); }
.sound::after { content: ""; position: absolute; inset: -10px -6px; }
.sound:hover, .sound[aria-pressed="true"] { color: var(--ink); }
html[data-film="dark"] .sound { color: rgba(247, 239, 228, 0.6); }
html[data-film="dark"] .sound:hover, html[data-film="dark"] .sound[aria-pressed="true"] { color: var(--ivory); }
.sound__bars { display: inline-flex; align-items: flex-end; gap: 2px; height: 11px; }
.sound__bars i { display: block; width: 2px; height: 3px; background: currentColor; border-radius: 1px; transition: height 300ms var(--e-out); }
.sound__bars i:nth-child(1) { height: 5px; }
.sound__bars i:nth-child(2) { height: 8px; }
.sound__bars i:nth-child(3) { height: 11px; }
.sound__bars i:nth-child(4) { height: 6px; }
html.has-sound .sound__bars i { animation: sound-bar 1.1s ease-in-out infinite; }
html.has-sound .sound__bars i:nth-child(2) { animation-delay: -0.35s; }
html.has-sound .sound__bars i:nth-child(3) { animation-delay: -0.7s; }
html.has-sound .sound__bars i:nth-child(4) { animation-delay: -0.2s; }
@keyframes sound-bar { 0%, 100% { height: 3px; } 50% { height: 11px; } }
@media (max-width: 940px) { .sound__txt { display: none; } }
@media (prefers-reduced-motion: reduce) { html.has-sound .sound__bars i { animation: none; height: 8px; } }
@media (max-width: 820px) { .hdr__nav [data-optional] { display: none; } }
@media (max-width: 520px) { .hdr__cta { display: none; } }
/* a phone: the logo, the menu and four language buttons share one row — the buttons and the gaps tighten */
@media (max-width: 520px) { .hdr { gap: 0.9rem; } .hdr__nav { gap: 0.7rem; } .lang__btn { min-width: 1.9rem; letter-spacing: 0.04em; } }

/* ---- the film ------------------------------------------------------------------ */
/* The film's own box takes no pointer: its last screen overlaps the flavours section (below), and that
   empty box sat over the cards — they could be neither hovered nor clicked while the section was at the
   top of the screen (elementFromPoint on a card: section.film). Only its stage answers, and only while seen. */
.film { position: relative; z-index: 2; height: 420vh; pointer-events: none; }
/* the page under the film's last screen: as the film fades out (its hold), what is revealed is
   the flavours section rising, not an empty cream screen */
.film:not(.is-still) + section { margin-top: -100vh; }
.film.is-faded .film__stage { pointer-events: none; }
/* the stage is the LARGE viewport: a phone's toolbar sliding away must uncover more film, not the cream page
   under it (the small one left a cream band at the foot of the screen, client's phone video). What sits
   at the stage's foot is lifted by the toolbar's height while it shows (--bar). */
.film__stage { --bar: 0px; position: sticky; top: 0; height: 100vh; height: 100lvh; overflow: hidden; pointer-events: auto; }
@supports (height: 100dvh) { .film__stage { --bar: calc(100lvh - 100dvh); } }
.film__canvas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 700ms var(--e-out); background: var(--night); }
.film.is-live .film__canvas { opacity: 1; }
.film__stage::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(10, 6, 4, 0.36) 0%, rgba(10, 6, 4, 0.1) 34%, transparent 52%);
  opacity: calc(1 - var(--film-end, 0)); }
@media (orientation: portrait) {
  .film__stage::after { background: linear-gradient(180deg, rgba(10, 6, 4, 0.42) 0%, rgba(10, 6, 4, 0.12) 30%, transparent 46%); }
}
.film__beat { position: absolute; z-index: 2; left: var(--pad); top: 50%; transform: translateY(-50%);
  max-width: min(40rem, 46vw); color: var(--ivory); visibility: hidden; }
.film__beat.is-on { visibility: visible; }
/* over the bright worlds (film.json toneAt / toneTo): ink type, a pale veil instead of a dark one */
.film.is-day .film__beat { color: var(--ink); }
.film.is-day .film__title { text-shadow: 0 1px 24px rgba(255, 250, 240, 0.35); }
.film.is-day .film__title em { color: var(--red); }
.film.is-day .film__stage::after { background: linear-gradient(90deg, rgba(255, 250, 242, 0.42) 0%, rgba(255, 250, 242, 0.14) 32%, transparent 50%); }
@media (orientation: portrait) {
  .film.is-day .film__stage::after { background: linear-gradient(180deg, rgba(255, 250, 242, 0.5) 0%, rgba(255, 250, 242, 0.16) 28%, transparent 44%); }
}
/* over the bright worlds the glass turns light, the type dark */
.film.is-day .film__skip:not(:hover):not(:focus-visible) { background: rgba(247, 239, 228, 0.58); color: var(--ink); box-shadow: inset 0 0 0 1px rgba(29, 20, 14, 0.14), 0 14px 30px -18px rgba(60, 30, 10, 0.5); }
.film.is-day .film__skip:not(:hover):not(:focus-visible) .film__skip-i { background: var(--ink); color: var(--ivory); }
.film.is-day .film__skip-track { stroke: rgba(29, 20, 14, 0.14); }
.film.is-day .film__skip-ring { stroke: var(--red); }
/* the last frame: the four bags across the middle; its line sits centred above them, smaller */
.film__beat--end { top: calc(var(--hdr-h) + 4vh); transform: none; left: 0; right: 0; max-width: none; text-align: center; }
.film__beat--end .film__title { font-size: var(--t-h2); }
.film__beat--end .film__title em { color: var(--red); }
@media (orientation: portrait) {
  .film__beat { top: calc(var(--hdr-h) + clamp(1.2rem, 4vh, 2.6rem)); transform: none; max-width: none; right: var(--pad); }
}
.film__title { font: 800 var(--t-hero)/0.98 var(--f-display); letter-spacing: -0.035em; filter: drop-shadow(0 2px 18px rgba(10, 6, 4, 0.32)); }
.film__title em { font-style: normal; color: #ffd27a; }
.film__line { display: block; overflow: hidden; padding: 0.12em 0 0.1em; margin-top: -0.12em; }
.film__line > span { display: inline-block; text-wrap: balance; transform: translate3d(0, 105%, 0); will-change: transform; }
/* the opening: the brand's own name, its line under it (client, 23.10.2026) */
/* "Skip the film": a pill anyone recognises at a glance (the streaming services' "skip intro"),
   in the page's own glass: its ring is how much of the film is behind you (js/home.js sets
   --skip-p), so the choice to skip is an informed one. It rises in as the curtain lifts and
   breathes once a moment later — enough to be seen, never a blinking button. */
.film__skip { --skip-p: 0; position: absolute; z-index: 4; right: var(--pad); bottom: calc(clamp(1.1rem, 4vh, 2.4rem) + var(--bar) - 0.35rem);
  display: inline-flex; align-items: center; gap: 0.7rem; height: 3rem; padding-block: 0; padding-inline: 1.25rem 0.42rem; border-radius: 999px;
  background: rgba(20, 13, 9, 0.46); color: var(--ivory); box-shadow: inset 0 0 0 1px rgba(247, 239, 228, 0.26), 0 14px 30px -16px rgba(0, 0, 0, 0.7);
  -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2);
  font: 600 0.95rem/1 var(--f-body); letter-spacing: 0.01em; white-space: nowrap;
  opacity: 0; transform: translateY(14px); transition: opacity 700ms var(--e-out), transform 700ms var(--e-out), background 300ms var(--e-out), color 300ms var(--e-out), box-shadow 300ms var(--e-out); }
html:not(.is-loading) .film__skip { opacity: 1; transform: none; transition-delay: 350ms, 350ms, 0s, 0s, 0s; }
.film__skip-i { position: relative; display: grid; place-items: center; width: 2.2rem; height: 2.2rem; border-radius: 50%; background: var(--ivory); color: var(--ink);
  transition: background 300ms var(--e-out), color 300ms var(--e-out); }
.film__skip-i svg { position: absolute; inset: -0.2rem; width: calc(100% + 0.4rem); height: calc(100% + 0.4rem); max-width: none; overflow: visible; }
.film__skip-i path { fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: transform 450ms var(--e-out); }
.film__skip-track, .film__skip-ring { fill: none; stroke-width: 2.2; transform: rotate(-90deg); transform-origin: 50% 50%; }
.film__skip-track { stroke: rgba(247, 239, 228, 0.18); }
.film__skip-ring { stroke: #ffd27a; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--skip-p)); transition: stroke-dashoffset 200ms linear; }
.film__skip:hover, .film__skip:focus-visible { background: var(--ivory); color: var(--ink); box-shadow: inset 0 0 0 1px rgba(247, 239, 228, 0.9), 0 18px 34px -16px rgba(0, 0, 0, 0.75); }
.film__skip:hover .film__skip-i, .film__skip:focus-visible .film__skip-i { background: var(--ink); color: var(--ivory); }
.film__skip:hover path, .film__skip:focus-visible path { transform: translateY(2px); }
.film__skip:focus-visible { outline: 2px solid #ffd27a; outline-offset: 3px; }
.film__skip:active { transform: scale(0.97); transition-duration: 150ms; }
@media (prefers-reduced-motion: no-preference) {
  html:not(.is-loading) .film__skip-i { animation: skip-breathe 1.6s var(--e-inout) 2.4s 1; }
}
@keyframes skip-breathe { 0%, 100% { transform: none; box-shadow: 0 0 0 0 rgba(255, 210, 122, 0); } 45% { transform: scale(1.1); box-shadow: 0 0 0 0.55rem rgba(255, 210, 122, 0.22); } }
/* "Kaydırın" in the middle of the screen (client, 28.10.2026: centred, bigger, arrowheads flowing down; 31.10:
   "hiç belli olmuyor, göze gelsin"): a dark glass capsule — it reads over the brightest wheat — in the film's
   gold (the skip ring's, the rail's), a ring breathing out from it, a light running down its three
   arrowheads (none ever fades out). Gone at the first scroll. */
.film__hint { position: absolute; z-index: 3; left: 50%; top: 50%; translate: -50% -50%; display: grid; justify-items: center; gap: 0.7rem; pointer-events: none;
  padding: 1.05rem 1.5rem 0.95rem 1.8rem; border-radius: 999px; border: 1.5px solid rgba(255, 210, 122, 0.85);
  background: rgba(16, 8, 3, 0.68); -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2);
  font: 800 clamp(1.05rem, 0.85rem + 0.6vw, 1.4rem)/1 var(--f-body); letter-spacing: 0.3em; text-transform: uppercase; white-space: nowrap; color: #ffd27a;
  text-shadow: 0 0 18px rgba(255, 210, 122, 0.45); box-shadow: 0 18px 50px -14px rgba(0, 0, 0, 0.7), 0 0 0 0 rgba(255, 210, 122, 0.5);
  opacity: 0; transition: opacity 600ms; }
html.is-written .film__hint { animation: hint-ring 2.2s var(--e-out) 0.6s infinite; }
@keyframes hint-ring { 0% { box-shadow: 0 18px 50px -14px rgba(0, 0, 0, 0.7), 0 0 0 0 rgba(255, 210, 122, 0.5); }
  75%, 100% { box-shadow: 0 18px 50px -14px rgba(0, 0, 0, 0.7), 0 0 0 18px rgba(255, 210, 122, 0); } }
.film__hint-arrows { display: grid; justify-items: center; margin-right: 0.3em; filter: drop-shadow(0 0 8px rgba(255, 210, 122, 0.6)); }
.film__hint-arrows i { display: block; width: 1.05em; height: 1.05em; margin-top: -0.5em; border-right: 3px solid currentColor; border-bottom: 3px solid currentColor; border-radius: 0 0 3px 0;
  rotate: 45deg; opacity: 0.45; animation: hint-arrow 1.5s var(--e-inout) infinite; }
.film__hint-arrows i:first-child { margin-top: 0; }
.film__hint-arrows i:nth-child(2) { animation-delay: 0.16s; }
.film__hint-arrows i:nth-child(3) { animation-delay: 0.32s; }
@keyframes hint-arrow { 0%, 100% { opacity: 0.45; translate: 0 -0.12em; } 35% { opacity: 1; translate: 0 0.16em; } }
@media (prefers-reduced-motion: reduce) { html.is-written .film__hint { animation: none; } .film__hint-arrows i { animation: none; opacity: 0.9; } }
html.is-written .film__hint { opacity: 1; visibility: visible; transition: opacity 600ms, visibility 0s; }
/* gone, it costs nothing: no glass to blur, no ring, no arrows running */
.film__hint, html.has-scrolled .film__hint { visibility: hidden; transition: opacity 600ms, visibility 0s 600ms; }
html.has-scrolled .film__hint { opacity: 0; animation: none; }
html.has-scrolled .film__hint-arrows i { animation: none; }
.film__poster { display: none; }
.film.is-still .film__poster { display: block; position: absolute; inset: 0; }
.film.is-still .film__poster img { width: 100%; height: 100%; object-fit: cover; }
.film.is-still { height: 100vh; height: 100svh; }
.film.is-still .film__stage { height: 100%; --bar: 0px; }       /* the still poster fills its own box, no more (the large viewport made it overhang the flavours on a phone) */
.film.is-still .film__canvas { display: none; }
.film.is-still .film__line > span { transform: none; }
.film.is-still .film__beat { visibility: hidden; }
.film.is-still .film__beat:first-of-type { visibility: visible; }

/* ---- sections --------------------------------------------------------------------- */
section:not(.film) { position: relative; z-index: 1; padding: clamp(4.5rem, 3rem + 7vw, 9rem) var(--pad); }
.sec-head { display: grid; gap: 1.1rem; margin-bottom: clamp(2.2rem, 1.5rem + 3vw, 4rem); }

/* the four flavours: each bag on its own colour; a card tilts toward the pointer and opens its page.
   Under the pointer a card comes forward and the other three step back (dimmed, a little smaller);
   pressed, it gives; chosen (the flavour last opened, js/flavours.js), a ring in its colour marks it. */
.sec-lead { font-size: var(--t-lead); color: var(--ink-soft); max-width: 34rem; }
.flv-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(0.8rem, 0.4rem + 1.2vw, 1.6rem); perspective: 1200px; }
.flv { --rx: 0deg; --ry: 0deg; --mx: 50%; --my: 30%; position: relative; border-radius: 28px; isolation: isolate;
  transform: rotateX(var(--rx)) rotateY(var(--ry)); transform-style: preserve-3d; transition: transform 700ms var(--e-out); will-change: transform; }
.flv.is-tilting, .rv .flv.is-tilting { transition: transform 120ms linear, translate 1100ms var(--e-out), opacity 900ms var(--e-out); }
.flv__link { position: relative; display: grid; justify-items: center; gap: 1.1rem; height: 100%; border-radius: inherit; overflow: hidden;
  padding: clamp(1.4rem, 1rem + 1.5vw, 2.4rem) clamp(1rem, 0.6rem + 1vw, 1.8rem) 1.4rem;
  background: radial-gradient(120% 90% at 50% 18%, color-mix(in srgb, var(--c) 82%, #fff) 0%, var(--c) 46%, var(--c2) 100%);
  color: #fff; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2) inset, 0 20px 40px -30px color-mix(in srgb, var(--c2) 80%, #000);
  transition: box-shadow 600ms var(--e-out), transform 600ms var(--e-out), opacity 500ms var(--e-out), filter 500ms var(--e-out), outline-color 300ms; }
.flv:hover .flv__link, .flv__link:focus-visible { box-shadow: 0 1px 0 rgba(255, 255, 255, 0.25) inset, 0 46px 80px -34px color-mix(in srgb, var(--c2) 92%, #000); }
.flv__link:focus-visible { outline: 3px solid var(--ink); outline-offset: 4px; }
@media (hover: hover) and (pointer: fine) {
  .flv:hover .flv__link { transform: translateY(-8px) scale(1.035); }
  .flv-list:has(.flv:hover) .flv:not(:hover) .flv__link { opacity: 0.7; filter: saturate(0.7); transform: scale(0.965); }
}
.flv-list:has(.flv__link:focus-visible) .flv:not(:has(.flv__link:focus-visible)) .flv__link { opacity: 0.7; filter: saturate(0.7); }
.flv .flv__link:active { transform: translateY(-2px) scale(0.985); transition-duration: 120ms; }
/* chosen: the flavour opened last (and the one just clicked, before its page arrives) */
.flv.is-chosen .flv__link { outline: 3px solid var(--c2); outline-offset: 5px; }
.flv__chosen { position: absolute; z-index: 1; top: 0.9rem; right: 0.9rem; display: inline-flex; white-space: nowrap; align-items: center; gap: 0.35rem; padding: 0.38rem 0.7rem 0.38rem 0.55rem; border-radius: 999px;
  font: 600 0.7rem/1 var(--f-body); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink); background: rgba(255, 255, 255, 0.92); box-shadow: 0 6px 18px -8px rgba(0, 0, 0, 0.35);
  opacity: 0; transform: translateY(-4px); transition: opacity 400ms var(--e-out), transform 400ms var(--e-out); pointer-events: none; }
.flv__chosen::before { content: ""; width: 0.45rem; height: 0.45rem; border-radius: 50%; background: var(--c); }
.flv.is-chosen .flv__chosen { opacity: 1; transform: none; }
.flv.is-chosen .flv__link:focus-visible { outline-color: var(--ink); outline-offset: 4px; }
/* a soft light that follows the pointer across the card */
.flv__glow { position: absolute; inset: 0; z-index: -1; opacity: 0; transition: opacity 500ms var(--e-out);
  background: radial-gradient(40% 35% at var(--mx) var(--my), rgba(255, 255, 255, 0.34), transparent 70%); }
.flv:hover .flv__glow { opacity: 1; }
.flv__bag { width: min(100%, 15rem); filter: drop-shadow(0 26px 30px rgba(0, 0, 0, 0.32)); transform: translateZ(40px) rotate(-2deg); transition: transform 800ms var(--e-out), filter 800ms var(--e-out); }
.flv:hover .flv__bag { transform: translateZ(60px) rotate(0deg) translateY(-8px) scale(1.04); filter: drop-shadow(0 40px 36px rgba(0, 0, 0, 0.36)); }
.flv__text { display: grid; gap: 0.35rem; text-align: center; transform: translateZ(24px); }
.flv__name { font: 800 clamp(1.3rem, 1rem + 1vw, 1.8rem)/1.05 var(--f-display); letter-spacing: -0.02em; }
.flv__name, .flv__meta { text-shadow: 0 1px 10px color-mix(in srgb, var(--c2) 70%, #000); }
.flv__meta { font-weight: 600; font-size: 0.86rem; }
.flv__more { display: inline-flex; align-items: center; gap: 0.4em; white-space: nowrap; font: 600 0.82rem/1 var(--f-body); letter-spacing: 0.04em; padding: 0.6rem 1rem; border-radius: 999px;
  background: rgba(0, 0, 0, 0.18); border: 1px solid rgba(255, 255, 255, 0.24); color: #fff; transform: translateZ(20px); transition: background 300ms, color 300ms, border-color 300ms, gap 300ms var(--e-out); }
.flv:hover .flv__more, .flv__link:focus-visible .flv__more { background: #fff; color: var(--ink); border-color: #fff; gap: 0.7em; }
@media (max-width: 960px) { .flv-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* a narrow card: the pill becomes a round arrow (the whole card is the link; its name is in the card) */
@media (max-width: 420px) { .flv__chosen { top: 0.6rem; right: 0.6rem; font-size: 0.6rem; letter-spacing: 0.04em; padding: 0.34rem 0.55rem 0.34rem 0.45rem; } }
@media (max-width: 420px) { .flv__more { font-size: 0; gap: 0; width: 2.6rem; height: 2.6rem; padding: 0; justify-content: center; } .flv__more i { font-size: 1rem; } .flv:hover .flv__more { gap: 0; } }
/* the products (client, 28.10.2026): a row per pack — Paket, Bardak, Dökme — its name the only heading, the four
   flavours in each as the same card, in the same order, so a flavour stands under itself. The cup stands in the
   bag's box (bottom-aligned), so its cards are the bag's size. Written by tools/build_flavour_pages.py. */
.prow { display: grid; gap: clamp(0.8rem, 0.6rem + 0.6vw, 1.2rem); scroll-margin-top: calc(var(--hdr-h) + 1rem); }
.prow + .prow { margin-top: clamp(2.4rem, 1.8rem + 2vw, 3.6rem); }
.prow__name { font: 800 clamp(1.35rem, 1.05rem + 0.9vw, 1.9rem)/1 var(--f-display); letter-spacing: -0.02em; }
.flv__bag--cup { height: auto; aspect-ratio: 700 / 944; object-fit: contain; object-position: 50% 100%; }
/* the bulk carton (the client's design, 02.11.2026) is a long low box, about 3:1: in a bag's box it stood small under
   an empty card, so it spans the card instead, and its cards are as tall as it needs — a row of their own. One box
   for all four (the tallest carton's, 1200 × 396; Acı Tako's is lower), standing on its floor: the names line up */
.flv__bag--bulk { width: 100%; height: auto; aspect-ratio: 1200 / 396; object-fit: contain; object-position: 50% 100%; margin-block: clamp(0.4rem, 0.1rem + 1vw, 1.2rem) 0.2rem; }

/* the maker: the figures counted in, the family it belongs to (Beşler, its own logo, small), what the bag certifies */
.maker { display: grid; gap: clamp(2.5rem, 1.5rem + 4vw, 5rem); border-top: 1px solid var(--line); }
/* two halves (client, 26.10.2026: the right one stood empty): Kıtlax's own words with the plant's figures,
   and beside them the maker in its own words */
.maker__top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 1rem + 4vw, 6rem); align-items: start; }
.maker__text { display: grid; gap: 1.3rem; }
.maker__text .figures { margin-top: 0.9rem; max-width: 44rem; }
.group { display: grid; gap: 1.3rem; align-content: start; padding: clamp(1.4rem, 1rem + 2vw, 2.8rem); border-radius: 22px;
  background: radial-gradient(120% 80% at 20% 0%, #fbf5ec 0%, var(--cream-2) 100%); box-shadow: inset 0 0 0 1px rgba(29, 20, 14, 0.06); }
.group__head { display: grid; gap: 0.8rem; }
.group__title { font: 800 clamp(1.45rem, 1.15rem + 1vw, 2.1rem)/1.1 var(--f-display); letter-spacing: -0.02em; }
.group__body { display: grid; gap: 0.95rem; font-size: 0.98rem; line-height: 1.7; color: var(--ink-soft); }
.maker__lead { font-size: var(--t-lead); color: var(--ink-soft); max-width: 44rem; }
/* the client's own words (23.10.2026), its bold in the brand's red */
.maker__body { display: grid; gap: 1rem; max-width: 44rem; font-size: var(--t-lead); color: var(--ink-soft); }
.maker__body strong { font-weight: 700; color: var(--red); }
.maker__punch { white-space: nowrap; }                       /* the punchline stays one piece */
.figures { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 22px; overflow: hidden; }
.figures > div { background: var(--cream); padding: clamp(1.2rem, 1rem + 1vw, 1.8rem); display: grid; gap: 0.5rem; }
.figures dt { font: 600 0.74rem/1 var(--f-body); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-faint); }
.figures dd { font: 600 1rem/1 var(--f-body); color: var(--ink-soft); }
.figures b { font: 800 clamp(2rem, 1.5rem + 1.6vw, 3rem)/1 var(--f-display); letter-spacing: -0.03em; color: var(--ink); font-variant-numeric: tabular-nums; }
.figures sup { font: 800 clamp(1.3rem, 1rem + 1vw, 1.9rem)/1 var(--f-display); color: var(--red); vertical-align: 0.75em; margin-inline: 0.04em 0.12em; }
/* the quality, full width: what is promised, and a way down to the papers */
.maker__grid { display: grid; gap: clamp(1rem, 0.6rem + 1.5vw, 2rem); }
.quality { background: var(--night); color: var(--ivory); border-radius: 22px; padding: clamp(1.4rem, 1rem + 2vw, 3rem); display: grid; }
.quality .label { color: rgba(247, 239, 228, 0.55); }
.quality__main { display: grid; gap: 1.1rem; }
.quality__title { font: 800 clamp(1.45rem, 1.15rem + 1vw, 2.1rem)/1.1 var(--f-display); letter-spacing: -0.02em; text-wrap: balance; }
.quality__title em { font-style: normal; color: #ffb24d; }
.quality__list { list-style: none; margin: 0.4rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: clamp(1.4rem, 1rem + 1.5vw, 2.4rem); }
.quality__list li { display: grid; gap: 0.4rem; align-content: start; padding: 1.1rem 0 1.2rem; border-top: 1px solid rgba(247, 239, 228, 0.12); }
.quality__list b { font: 700 1.08rem/1.25 var(--f-display); }
.quality__list span { color: rgba(247, 239, 228, 0.7); font-size: 0.94rem; line-height: 1.62; }
@media (max-width: 1100px) { .quality__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 720px) { .quality__list { grid-template-columns: 1fr; } }
.quality__more { justify-self: start; display: inline-flex; align-items: center; gap: 0.6rem; margin-top: 0.4rem; padding: 0.75rem 1.1rem 0.75rem 1.25rem;
  border-radius: 999px; background: rgba(247, 239, 228, 0.08); box-shadow: inset 0 0 0 1px rgba(247, 239, 228, 0.16);
  font: 600 0.92rem/1 var(--f-body); color: var(--ivory); transition: background 300ms var(--e-out), box-shadow 300ms var(--e-out); }
.quality__more svg { width: 1.05rem; height: 1.05rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
  transition: transform 450ms var(--e-out); }
.quality__more:hover { background: rgba(247, 239, 228, 0.16); box-shadow: inset 0 0 0 1px rgba(247, 239, 228, 0.3); }
.quality__more:hover svg { transform: translateY(3px); }

/* ---- the papers: the plant's certificates ------------------------------------------
   A wall of sheets, each on its own cream mat, laid down a touch askew. Pointed at, a card
   rises and its sheet straightens toward you; chosen, the sheet lifts off the mat and flies
   into the viewer (js/docs.js). The chips sort the wall; the cards slide to their new places. */
.maker { padding-bottom: clamp(3.5rem, 2.5rem + 4vw, 6rem); }
.docs { padding-top: 0; overflow-anchor: none; }   /* sorting changes the wall's height: the page must not jump to keep a card in place */
.docs__head { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 1.2rem clamp(2rem, 1rem + 4vw, 6rem); align-items: end;
  margin-bottom: clamp(1.2rem, 0.8rem + 1.5vw, 2rem); }
.docs__intro { display: grid; gap: 1.1rem; }
@media (max-width: 900px) { .docs__head { grid-template-columns: 1fr; } }
.docs__bar { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: clamp(1rem, 0.7rem + 1vw, 1.5rem); }
.docs__chip { display: inline-flex; align-items: center; gap: 0.6rem; height: 2.6rem; padding: 0 0.55rem 0 1.1rem; border-radius: 999px;
  background: var(--ivory); box-shadow: inset 0 0 0 1px var(--line); font: 600 0.9rem/1 var(--f-body); color: var(--ink-soft);
  transition: background 320ms var(--e-out), color 320ms var(--e-out), box-shadow 320ms var(--e-out), transform 320ms var(--e-out); }
.docs__chip b { display: grid; place-items: center; min-width: 1.55rem; height: 1.55rem; padding: 0 0.4rem; border-radius: 999px;
  background: var(--cream-2); color: var(--ink); font: 700 0.74rem/1 var(--f-body); font-variant-numeric: tabular-nums;
  transition: background 320ms var(--e-out), color 320ms var(--e-out); }
.docs__chip:hover { color: var(--ink); box-shadow: inset 0 0 0 1px rgba(29, 20, 14, 0.3); }
.docs__chip:active { transform: scale(0.97); }
.docs__chip[aria-pressed="true"] { background: var(--ink); color: var(--ivory); box-shadow: none; }
.docs__chip[aria-pressed="true"] b { background: var(--red); color: #fff; }
/* one shelf: all nine papers in a single row on a wide screen; narrower, the same row scrolls under the
   finger (snapping card by card) instead of stacking into a tall wall. A sorted shelf keeps its card size. */
.docs__grid { --gut: var(--pad); list-style: none; margin: 0; padding: 0; display: grid;
  grid-template-columns: repeat(9, minmax(0, 1fr)); gap: clamp(0.6rem, 0.3rem + 0.6vw, 0.95rem); }
@media (max-width: 1180px) {
  .docs__grid { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 9.6rem; overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory; scroll-padding-inline: var(--gut); margin-inline: calc(-1 * var(--gut)); padding: 0.5rem var(--gut) 1.1rem;
    scrollbar-width: none; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--gut), #000 calc(100% - var(--gut)), transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 var(--gut), #000 calc(100% - var(--gut)), transparent 100%); }
  .docs__grid::-webkit-scrollbar { display: none; }
  .docs__grid > .dcard { scroll-snap-align: start; }
}
@media (max-width: 640px) {
  .docs__grid { grid-auto-columns: 8.4rem; gap: 0.6rem; }
  .docs__bar { flex-wrap: nowrap; overflow-x: auto; margin-inline: calc(-1 * var(--pad)); padding: 0.1rem var(--pad) 0.3rem; scrollbar-width: none; }
  .docs__bar::-webkit-scrollbar { display: none; }
  .docs__chip { flex: none; }
}
.dcard { position: relative; }
.dcard__btn { position: relative; display: grid; align-content: start; width: 100%; height: 100%; padding: 0.4rem; border-radius: 16px; background: var(--ivory);
  text-align: start; box-shadow: inset 0 0 0 1px rgba(29, 20, 14, 0.07), 0 1px 2px rgba(29, 20, 14, 0.04);
  transition: transform 650ms var(--e-out), box-shadow 650ms var(--e-out); -webkit-tap-highlight-color: transparent; }
.dcard__btn:hover { transform: translateY(-5px); box-shadow: inset 0 0 0 1px rgba(29, 20, 14, 0.06), 0 26px 38px -24px rgba(70, 35, 10, 0.5); }
.dcard__btn:active { transform: translateY(-2px) scale(0.985); transition-duration: 160ms; }
.dcard__btn:focus-visible { outline-offset: 3px; border-radius: 16px; }
.dcard__mat { position: relative; display: block; aspect-ratio: 5 / 6; border-radius: 12px; overflow: hidden;
  background: radial-gradient(120% 90% at 50% 32%, #fbf5ec 0%, var(--cream-2) 100%); box-shadow: inset 0 0 0 1px rgba(29, 20, 14, 0.06); }
/* the sheet fits its mat whatever its shape: centred, a percentage of the mat each way */
.dcard__sheet { position: absolute; inset: 0; margin: auto; max-width: 78%; max-height: 80%; width: auto; height: auto; border-radius: 2px; background: #fff;
  transform: rotate(var(--tilt, 0deg)); box-shadow: 0 1px 2px rgba(29, 20, 14, 0.22), 0 12px 20px -12px rgba(29, 20, 14, 0.5);
  transition: transform 700ms var(--e-out), box-shadow 700ms var(--e-out); }
.dcard--wide .dcard__sheet { max-width: 88%; }
.dcard__btn:hover .dcard__sheet, .dcard__btn:focus-visible .dcard__sheet { transform: translateY(-3%) scale(1.06);
  box-shadow: 0 1px 2px rgba(29, 20, 14, 0.18), 0 22px 28px -14px rgba(29, 20, 14, 0.55); }
.dcard.is-out .dcard__sheet { visibility: hidden; }          /* its sheet is in the viewer */
.dcard__open { position: absolute; inset-inline-end: 0.45rem; bottom: 0.45rem; display: grid; place-items: center; width: 1.8rem; height: 1.8rem; border-radius: 50%;
  background: var(--ink); color: var(--ivory); box-shadow: 0 8px 16px -8px rgba(0, 0, 0, 0.6);
  opacity: 0; transform: translateY(6px) scale(0.86); transition: opacity 320ms var(--e-out), transform 500ms var(--e-out); }
.dcard__open svg { width: 0.85rem; height: 0.85rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.dcard__btn:hover .dcard__open, .dcard__btn:focus-visible .dcard__open { opacity: 1; transform: none; }
@media (hover: none) { .dcard__open { opacity: 0.9; transform: none; width: 1.6rem; height: 1.6rem; } }
.dcard__badge { position: absolute; top: 0.7rem; inset-inline-start: 0.7rem; z-index: 1; padding: 0.3rem 0.5rem; border-radius: 999px; background: var(--red); color: #fff;
  font: 700 0.6rem/1 var(--f-body); letter-spacing: 0.02em; white-space: nowrap; box-shadow: 0 8px 16px -10px rgba(227, 38, 44, 0.9); }
.dcard__body { display: grid; gap: 0.2rem; padding: 0.7rem 0.35rem 0.35rem; }
.dcard__code { font: 800 1rem/1.1 var(--f-display); letter-spacing: -0.015em; }
.dcard__name { font-size: 0.76rem; line-height: 1.38; color: var(--ink-soft); }
.dcard__by { display: none; }                                 /* who issued it is in the viewer, with the rest of the facts */

/* ---- the viewer: one paper, whole --------------------------------------------------
   The page dims and blurs; the sheet flies in from its card and straightens; the facts slide
   in beside it, one line after another. The arrows, the keys and a swipe go on to the next
   paper; a click on the sheet shows it at its own size; closing flies it home. */
html.has-modal { overflow: hidden; }
.dv { --dir: 1; width: 100%; max-width: 100%; height: 100%; max-height: 100%; margin: 0; padding: 0; border: 0; background: transparent; color: var(--ivory); overflow: hidden; }
html[dir="rtl"] .dv { --dir: -1; }
.dv[open] { display: grid; grid-template-columns: minmax(0, 1fr) clamp(20rem, 16rem + 9vw, 27rem); }
.dv::backdrop { background: rgba(14, 9, 6, 0.86); -webkit-backdrop-filter: blur(12px) saturate(0.9); backdrop-filter: blur(12px) saturate(0.9); }
.dv__stage { position: relative; display: grid; overflow: hidden; padding: clamp(1rem, 0.4rem + 2.4vw, 3rem) clamp(4.2rem, 3rem + 3vw, 6rem); touch-action: pan-y; }
.dv__stage.is-zoomed { overflow: auto; overscroll-behavior: contain; touch-action: auto; padding: clamp(1rem, 0.4rem + 2.4vw, 3rem); }
.dv__wrap { margin: auto; }
.dv__sheet { display: block; max-width: none; border-radius: 3px; background: #fff; cursor: zoom-in; transform-origin: 50% 50%;
  box-shadow: 0 60px 110px -40px rgba(0, 0, 0, 0.95), 0 2px 8px rgba(0, 0, 0, 0.35); }
.dv__stage.is-zoomed .dv__sheet { cursor: zoom-out; }
.dv__stage.no-zoom .dv__sheet { cursor: default; }
.dv__nav { position: absolute; top: 50%; z-index: 2; display: grid; place-items: center; width: 3.2rem; height: 3.2rem; margin-top: -1.6rem; border-radius: 50%;
  background: rgba(247, 239, 228, 0.1); color: var(--ivory); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  box-shadow: inset 0 0 0 1px rgba(247, 239, 228, 0.12); transition: background 260ms var(--e-out), transform 360ms var(--e-out), opacity 260ms var(--e-out); }
.dv__nav svg { width: 1.3rem; height: 1.3rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.dv__nav:hover { background: rgba(247, 239, 228, 0.22); }
.dv__nav--prev { inset-inline-start: clamp(0.6rem, 0.2rem + 1vw, 1.4rem); }
.dv__nav--prev:hover { transform: translateX(calc(-3px * var(--dir))); }
.dv__nav--next { inset-inline-end: clamp(0.6rem, 0.2rem + 1vw, 1.4rem); }
.dv__nav--next svg { transform: scaleX(-1); }
.dv__nav--next:hover { transform: translateX(calc(3px * var(--dir))); }
html[dir="rtl"] .dv__nav--prev svg { transform: scaleX(-1); }
html[dir="rtl"] .dv__nav--next svg { transform: none; }
.dv__stage.is-zoomed .dv__nav, .dv.is-single .dv__nav { opacity: 0; pointer-events: none; }
.dv__hint { position: absolute; bottom: 1.1rem; left: 50%; z-index: 2; display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.55rem 0.95rem; border-radius: 999px;
  transform: translateX(-50%); background: rgba(20, 13, 9, 0.62); color: rgba(247, 239, 228, 0.82); font: 500 0.8rem/1 var(--f-body); white-space: nowrap;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); pointer-events: none; transition: opacity 400ms var(--e-out); }
.dv__hint svg { width: 0.95rem; height: 0.95rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.dv__hint-out, .dv__stage.is-zoomed .dv__hint-in { display: none; }
.dv__stage.is-zoomed .dv__hint-out { display: inline; }
.dv__stage.no-zoom .dv__hint, .dv__stage.is-zoomed .dv__hint { opacity: 0; }
.dv__panel { position: relative; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; min-height: 0; background: #1a110c;
  box-shadow: inset 1px 0 0 rgba(247, 239, 228, 0.08); }
html[dir="rtl"] .dv__panel { box-shadow: inset -1px 0 0 rgba(247, 239, 228, 0.08); }
.dv__top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.1rem 1.2rem 1.1rem 1.6rem; box-shadow: inset 0 -1px 0 rgba(247, 239, 228, 0.08); }
.dv__count { font: 600 0.8rem/1 var(--f-body); letter-spacing: 0.16em; color: rgba(247, 239, 228, 0.5); font-variant-numeric: tabular-nums; }
.dv__count b { color: var(--ivory); font-weight: 700; }
.dv__close { display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: 50%; background: rgba(247, 239, 228, 0.08); color: var(--ivory);
  transition: background 220ms var(--e-out), transform 360ms var(--e-out); }
.dv__close:hover { background: rgba(247, 239, 228, 0.2); transform: rotate(90deg); }
.dv__close svg { width: 1.15rem; height: 1.15rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.dv__body { display: grid; gap: 0.9rem; align-content: start; padding: 1.8rem 1.6rem; overflow: auto; overscroll-behavior: contain; }
.dv__code { font: 800 clamp(2.1rem, 1.6rem + 1.6vw, 3rem)/1 var(--f-display); letter-spacing: -0.03em; }
.dv__title { margin: 0; font: 600 1.08rem/1.35 var(--f-body); color: rgba(247, 239, 228, 0.88); }
.dv__by { font: 600 0.68rem/1.35 var(--f-body); letter-spacing: 0.12em; text-transform: uppercase; color: rgba(247, 239, 228, 0.5); }
.dv__badge { justify-self: start; padding: 0.42rem 0.72rem; border-radius: 999px; background: var(--red); color: #fff; font: 700 0.72rem/1 var(--f-body); }
.dv__facts { margin-top: 0.5rem; box-shadow: inset 0 1px 0 rgba(247, 239, 228, 0.1); }
.dv__facts > div { display: grid; grid-template-columns: 7.2rem minmax(0, 1fr); gap: 1rem; padding: 0.8rem 0; box-shadow: inset 0 -1px 0 rgba(247, 239, 228, 0.07); }
.dv__facts dt { font: 600 0.68rem/1.6 var(--f-body); letter-spacing: 0.12em; text-transform: uppercase; color: rgba(247, 239, 228, 0.5); }
.dv__facts dd { margin: 0; font-size: 0.93rem; line-height: 1.5; color: var(--ivory); overflow-wrap: anywhere; }
.dv__pages { display: grid; gap: 0.7rem; margin-top: 0.4rem; }
.dv__pages[hidden], .dv__badge[hidden] { display: none; }
.dv__pages .label { color: rgba(247, 239, 228, 0.5); }
.dv__pagebtns { display: flex; gap: 0.5rem; }
.dv__page { position: relative; width: 3.1rem; height: 3.9rem; border-radius: 6px; overflow: hidden; background: #fff; opacity: 0.45;
  box-shadow: 0 0 0 1px rgba(247, 239, 228, 0.15); transition: opacity 260ms var(--e-out), box-shadow 260ms var(--e-out), transform 360ms var(--e-out); }
.dv__page img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.dv__page b { position: absolute; inset-inline-end: 0.2rem; bottom: 0.2rem; display: grid; place-items: center; min-width: 1.1rem; height: 1.1rem; border-radius: 4px;
  background: var(--ink); color: var(--ivory); font: 700 0.62rem/1 var(--f-body); }
.dv__page:hover { opacity: 0.8; transform: translateY(-2px); }
.dv__page[aria-current="true"] { opacity: 1; box-shadow: 0 0 0 2px var(--red); }
.dv--wide .dv__page { width: 4.4rem; height: 3.4rem; }
.dv__foot { padding: 1rem 1.6rem 1.3rem; box-shadow: inset 0 1px 0 rgba(247, 239, 228, 0.08); }
.dv__open { display: inline-flex; align-items: center; gap: 0.55rem; font: 600 0.88rem/1 var(--f-body); color: rgba(247, 239, 228, 0.8); transition: color 220ms var(--e-out); }
.dv__open svg { width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.dv__open:hover { color: var(--ivory); }
.dv__live { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
/* phones and narrow windows: the sheet above, the facts in a sheet of their own below */
@media (max-width: 860px) {
  .dv[open] { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; }
  .dv__stage { padding: 0.9rem 0.9rem 4.2rem; }               /* the arrows and the hint under the sheet, not on it */
  .dv__nav { top: auto; bottom: 0.7rem; margin-top: 0; width: 2.8rem; height: 2.8rem; }
  .dv__hint { bottom: 1.05rem; font-size: 0.74rem; }
  .dv__panel { max-height: 46svh; border-radius: 20px 20px 0 0; box-shadow: 0 -1px 0 rgba(247, 239, 228, 0.08); }
  .dv__top { padding: 0.8rem 0.9rem 0.8rem 1.2rem; }
  .dv__body { padding: 1.1rem 1.2rem 1.2rem; gap: 0.7rem; }
  .dv__code { font-size: 1.9rem; }
  .dv__facts > div { grid-template-columns: 6.2rem minmax(0, 1fr); padding: 0.65rem 0; }
  .dv__foot { padding: 0.8rem 1.2rem calc(0.9rem + env(safe-area-inset-bottom)); }
}
/* the entrances: the backdrop, then the panel, then its lines one after another */
@media (prefers-reduced-motion: no-preference) {
  .dv[open]::backdrop { animation: dv-fade 480ms var(--e-out); }
  .dv.is-entering .dv__panel { animation: dv-panel 760ms var(--e-out) 90ms both; }
  .dv.is-entering .dv__nav, .dv.is-entering .dv__hint { animation: dv-fade 600ms var(--e-out) 420ms both; }
  .dv__body > .is-rising { animation: dv-rise 640ms var(--e-out) both; animation-delay: calc(var(--i, 0) * 55ms + var(--d, 0ms)); }
  .dv.is-leaving::backdrop { animation: dv-fade-out 420ms var(--e-inout) forwards; }
  .dv.is-leaving .dv__panel { animation: dv-panel-out 340ms var(--e-inout) forwards; }
  .dv.is-leaving .dv__nav, .dv.is-leaving .dv__hint { animation: dv-fade-out 200ms ease-in forwards; }
}
@media (prefers-reduced-motion: no-preference) and (max-width: 860px) {
  .dv.is-entering .dv__panel { animation-name: dv-panel-up; }
  .dv.is-leaving .dv__panel { animation-name: dv-panel-down; }
}
@keyframes dv-fade { from { opacity: 0; } }
@keyframes dv-fade-out { to { opacity: 0; } }
@keyframes dv-panel { from { opacity: 0; transform: translateX(calc(48px * var(--dir))); } }
@keyframes dv-panel-out { to { opacity: 0; transform: translateX(calc(32px * var(--dir))); } }
@keyframes dv-panel-up { from { opacity: 0; transform: translateY(40px); } }
@keyframes dv-panel-down { to { opacity: 0; transform: translateY(32px); } }
@keyframes dv-rise { from { opacity: 0; transform: translateY(14px); } }
@media (max-width: 960px) { .maker__top { grid-template-columns: 1fr; } }

/* the koala: the brand's own mascot (the packaging's artwork, tools/links_assets.py), one pose per flavour,
   each holding its flavour's crisp, its overalls in the flavour's colour. The poses share one body, in
   register, so a change is a crossfade and nothing moves: the chosen one comes in on top while the last
   one holds a moment under it, then fades — never a gap between them, never two bodies (23.10.2026: a
   pose that rose in as the last one sank and faded read as a jump; 25.10.2026: ~1 s → ~0.7 s, a touch quicker;
   26.10.2026: the last one still faded on ~0.3 s after the new one had settled, its shadow doubling the new
   one's — the picture changed twice. Now both start and end together, ~0.36 s, and the shadow is cast once,
   by the poses together) */
.koala { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr); gap: clamp(1.5rem, 1rem + 4vw, 5rem); align-items: center; background: var(--cream-2); }
.koala__stage { position: relative; width: min(100%, 26rem); justify-self: center; transform: translate3d(var(--kx, 0px), var(--ky, 0px), 0); transition: transform 900ms var(--e-out); }
/* standing on the floor, not floating: a soft contact shadow under the feet, and only a light shadow
   of the figure on the wall behind (a wide drop shadow alone read as a cut-out with a halo) */
.koala__stage::before { content: ""; position: absolute; z-index: -1; left: 22%; right: 20%; top: 95.4%; height: 6.6%; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(60, 30, 10, 0.5), rgba(60, 30, 10, 0.2) 50%, transparent); filter: blur(2px); }
.koala__poses { position: relative; filter: drop-shadow(14px 22px 26px rgba(60, 30, 10, 0.13)); }
.koala__img { position: relative; display: block; width: 100%; height: auto; opacity: 0; will-change: opacity;
  transition: opacity 360ms cubic-bezier(0.45, 0, 0.55, 1); }
.koala__img + .koala__img { position: absolute; inset: 0; }
.koala__img.is-on { z-index: 1; opacity: 1; transition: opacity 360ms cubic-bezier(0.2, 0.6, 0.3, 1); }
.koala__text { display: grid; gap: 1.2rem; max-width: 32rem; }
.koala__text > p:not(.label) { font-size: var(--t-lead); color: var(--ink-soft); }
.koala__dress { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.4rem; }
.koala__dress button { display: inline-flex; align-items: center; gap: 0.55rem; min-height: 2.75rem; padding: 0 1rem 0 0.55rem; border-radius: 999px; border: 1px solid var(--line);
  font: 600 0.88rem/1 var(--f-body); color: var(--ink-soft); background: var(--cream); transition: border-color 250ms, color 250ms, box-shadow 250ms; }
.koala__dress i { width: 1.5rem; height: 1.5rem; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 2px var(--cream) inset; }
.koala__dress button[aria-pressed="true"] { border-color: var(--c); color: var(--ink); box-shadow: 0 0 0 1px var(--c) inset; }
.koala__dress button:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
@media (max-width: 760px) { .koala { grid-template-columns: 1fr; } .koala__stage { width: min(70%, 18rem); } }
/* a phone: the four flavours stay on one row (31.10.2026: they fell to a second) — four tiles, the colour above the name */
@media (max-width: 560px) {
  .koala__dress { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.4rem; }
  .koala__dress button { flex-direction: column; justify-content: center; gap: 0.4rem; min-height: 4.4rem; padding: 0.65rem 0.2rem; border-radius: 18px;
    font-size: clamp(0.72rem, 0.6rem + 0.6vw, 0.82rem); line-height: 1.15; text-align: center; }
  .koala__dress i { width: 1.35rem; height: 1.35rem; flex: none; }
}

/* distributors */
.trade { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(2rem, 1rem + 4vw, 6rem); background: var(--night); color: var(--ivory); }
.trade .label { color: rgba(247, 239, 228, 0.55); }
.trade .sec-title em { color: #ffb24d; }
.trade__text { display: grid; gap: 1.3rem; align-content: start; max-width: 32rem; }
.trade__text p:not(.label) { font-size: var(--t-lead); color: rgba(247, 239, 228, 0.78); }
.trade__note { font-size: 0.92rem !important; color: rgba(247, 239, 228, 0.55) !important; }
.form { display: grid; gap: 1rem; }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.field { display: grid; gap: 0.45rem; border: 0; margin: 0; padding: 0; min-width: 0; }
.field > span, .field legend { font: 600 0.78rem/1.2 var(--f-body); letter-spacing: 0.06em; color: rgba(247, 239, 228, 0.66); padding: 0; }
.field input, .field textarea { width: 100%; font: 500 1rem/1.4 var(--f-body); color: var(--ivory); background: rgba(247, 239, 228, 0.06);
  border: 1px solid rgba(247, 239, 228, 0.16); border-radius: 14px; padding: 0.85rem 1rem; transition: border-color 200ms, background 200ms; }
.field textarea { resize: vertical; min-height: 7rem; }
.field input:focus, .field textarea:focus { outline: none; border-color: #ffb24d; background: rgba(247, 239, 228, 0.09); }
.field input[aria-invalid="true"] { border-color: #ff7a6b; }
.trade__how { list-style: none; margin: 0.4rem 0 0; padding: 0; display: grid; gap: 0.7rem; }
.trade__how li { display: grid; grid-template-columns: 2rem 1fr; gap: 0.8rem; align-items: center; color: rgba(247, 239, 228, 0.78); }
.trade__how b { width: 2rem; height: 2rem; border-radius: 50%; display: grid; place-items: center; font: 700 0.85rem/1 var(--f-body); background: rgba(247, 239, 228, 0.1); color: #ffb24d; }
.calc { gap: 0.8rem; }
.calc legend { margin-bottom: 0.45rem; }
.calc__rows { display: grid; gap: 0.5rem; }
.calc__row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.55rem 0.6rem 0.55rem 1rem; border-radius: 14px; background: rgba(247, 239, 228, 0.05); border: 1px solid rgba(247, 239, 228, 0.1); }
.calc__name { display: inline-flex; align-items: center; gap: 0.7rem; font: 600 0.98rem/1.2 var(--f-body); }
.calc__name i { width: 0.8rem; height: 0.8rem; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 30%, transparent); }
.calc__step { display: flex; align-items: center; gap: 0.3rem; }
.calc__step button { width: 2.75rem; height: 2.75rem; border-radius: 50%; font: 600 1.2rem/1 var(--f-body); color: var(--ivory); background: rgba(247, 239, 228, 0.08); transition: background 200ms; }
.calc__step button:hover { background: rgba(247, 239, 228, 0.18); }
.calc__step button:focus-visible { outline: 2px solid #ffb24d; outline-offset: 2px; }
.calc__step input { width: 4.2rem; text-align: center; font: 700 1.05rem/1 var(--f-body); color: var(--ivory); background: transparent; border: 1px solid rgba(247, 239, 228, 0.16); border-radius: 10px; padding: 0.55rem 0.3rem; -moz-appearance: textfield; }
.calc__step input::-webkit-outer-spin-button, .calc__step input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.calc__step input:focus { outline: none; border-color: #ffb24d; }
.calc__sum { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; margin-top: 0.4rem; border-radius: 14px; overflow: hidden; background: rgba(247, 239, 228, 0.1); }
.calc__sum div { display: grid; gap: 0.35rem; padding: 0.9rem 1rem; background: #1b130e; }
.calc__sum span { font: 600 0.72rem/1 var(--f-body); letter-spacing: 0.12em; text-transform: uppercase; color: rgba(247, 239, 228, 0.55); }
.calc__sum b { font: 800 1.5rem/1 var(--f-display); color: var(--ivory); font-variant-numeric: tabular-nums; }
.calc__note { font-size: 0.85rem; color: rgba(247, 239, 228, 0.5); }
.btn--ghost { background: transparent; color: var(--ivory); border: 1px solid rgba(247, 239, 228, 0.26); }
.btn--ghost:hover { border-color: var(--ivory); }
.picks { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.2rem; }
.pick { position: relative; }
.pick input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.pick span { display: inline-flex; align-items: center; min-height: 2.6rem; padding: 0 1.1rem; border-radius: 999px; border: 1px solid rgba(247, 239, 228, 0.2); font: 600 0.9rem/1 var(--f-body); color: rgba(247, 239, 228, 0.8); transition: background 200ms, color 200ms, border-color 200ms; }
.pick input:checked + span { background: var(--ivory); color: var(--ink); border-color: var(--ivory); }
.pick input:focus-visible + span { outline: 2px solid #ffb24d; outline-offset: 2px; }
.form__send { display: grid; justify-items: center; gap: 0.8rem; margin-top: 0.6rem; text-align: center; }   /* one button, in the middle */
.form__hint { font-size: 0.92rem; color: rgba(247, 239, 228, 0.7); }
@media (max-width: 900px) { .trade { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .form__row { grid-template-columns: 1fr; } .calc__sum b { font-size: 1.2rem; } .calc__sum div { padding: 0.8rem 0.7rem; } }
@media (max-width: 380px) { .calc__sum b { font-size: 1.02rem; } .calc__sum div { padding: 0.75rem 0.55rem; } .calc__row { padding-left: 0.75rem; } .calc__name { font-size: 0.9rem; }
  .figures b { font-size: 1.9rem; } .figures > div { padding: 1rem 0.9rem; } }

/* footer */
.foot { position: relative; z-index: 1; background: var(--night); color: rgba(247, 239, 228, 0.78); padding: clamp(3rem, 2rem + 4vw, 5rem) var(--pad) 2rem; border-top: 1px solid rgba(247, 239, 228, 0.1); }
/* the footer reads from its middle: four equal columns in one centred block, each column's content on its own axis */
.foot__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2.6rem clamp(1.5rem, 1rem + 2vw, 3rem); max-width: 78rem; margin-inline: auto; justify-items: center; text-align: center; }
.foot__brand { display: grid; gap: 1rem; align-content: start; justify-items: center; }
.foot__logos { display: flex; align-items: center; justify-content: center; gap: clamp(0.9rem, 0.6rem + 1vw, 1.4rem); }
.foot__logos img { width: 10rem; }
.foot__sep { align-self: stretch; width: 1px; margin: 0.3rem 0; background: rgba(247, 239, 228, 0.16); }
.foot__logos .foot__besler { width: auto; height: 3.9rem; }
.foot__legal { font-size: 0.85rem; color: rgba(247, 239, 228, 0.5); }
.foot .label { color: rgba(247, 239, 228, 0.5); margin-bottom: 0.9rem; }
.foot__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.foot__k { font-size: 0.8rem; letter-spacing: 0.06em; color: rgba(247, 239, 228, 0.5); margin-inline-end: 0.3em; }
.foot a:hover { color: var(--ivory); }
.foot__base { display: flex; justify-content: center; align-items: baseline; gap: 0.5rem 2.2rem; text-align: center; flex-wrap: wrap; margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid rgba(247, 239, 228, 0.1); font-size: 0.85rem; color: rgba(247, 239, 228, 0.5); }
.foot__rights, .foot__credit { display: inline-flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 0 0.35em; }
.foot__rights > span + span::before { content: "·"; margin-inline-end: 0.35em; }
.foot__credit a { color: rgba(247, 239, 228, 0.82); font-weight: 600; text-decoration: none; transition: color 0.2s ease; }
.foot__credit a:hover, .foot__credit a:focus-visible { color: var(--ivory); }
/* the brand's pages elsewhere: each network's own glyph in a quiet ivory ring; under the pointer the ring fills
   ivory and the glyph takes the network's real colours (Instagram's gradient, Facebook blue, YouTube red).
   The shop sits apart as Trendyol's own lowercase name, turning Trendyol orange. 44 px: a thumb's target. */
.foot__follow { display: grid; align-content: start; justify-items: center; }
.foot__social + .label { margin-top: 1.6rem; }
.foot__social { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 0.65rem; }
.foot__social a, .foot__shop { height: 2.75rem; border: 1px solid rgba(247, 239, 228, 0.2); color: rgba(247, 239, 228, 0.88); text-decoration: none;
  transition: background-color 0.35s ease, border-color 0.35s ease, color 0.35s ease, box-shadow 0.35s ease, transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1); }
.foot__social a { display: grid; place-items: center; width: 2.75rem; border-radius: 50%; }
.foot__social svg { width: 1.2rem; height: 1.2rem; fill: currentColor; }
.foot__social a:hover, .foot__social a:focus-visible { background: var(--ivory); border-color: var(--ivory); color: var(--night); transform: translateY(-2px); box-shadow: 0 0.9rem 1.6rem -0.9rem rgba(0, 0, 0, 0.7); }
.foot__social .is-ig:hover path, .foot__social .is-ig:focus-visible path { fill: url(#ig-tone); }
.foot__social .is-fb:hover, .foot__social .is-fb:focus-visible { color: #0866ff; }
.foot__social .is-yt:hover, .foot__social .is-yt:focus-visible { color: #ff0000; }
.foot__social .is-wa:hover, .foot__social .is-wa:focus-visible { color: #25d366; }
.foot__shop { display: inline-flex; align-items: center; justify-self: center; gap: 0.4rem; padding: 0 1rem 0 1.2rem; border-radius: 999px;
  font: 800 1.1rem/1 "Bricolage Grotesque", system-ui, sans-serif; letter-spacing: -0.03em; }
.foot__shop svg { width: 0.95rem; height: 0.95rem; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1); }
.foot__shop:hover, .foot__shop:focus-visible { background: #f27a1a; border-color: #f27a1a; color: #fff; transform: translateY(-2px); box-shadow: 0 0.9rem 1.6rem -0.9rem rgba(242, 122, 26, 0.8); }
.foot__shop:hover svg, .foot__shop:focus-visible svg { transform: translate(2px, -2px); }
.foot__social a:focus-visible, .foot__shop:focus-visible { outline: 2px solid var(--ivory); outline-offset: 3px; }
[dir="rtl"] .foot__shop svg { transform: scaleX(-1); }
[dir="rtl"] .foot__shop:hover svg, [dir="rtl"] .foot__shop:focus-visible svg { transform: scaleX(-1) translate(2px, -2px); }
@media (prefers-reduced-motion: reduce) { .foot__social a, .foot__shop, .foot__shop svg { transition: none; } .foot__social a:hover, .foot__social a:focus-visible, .foot__shop:hover, .foot__shop:focus-visible { transform: none; } }
@media (max-width: 1080px) { .foot__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 760px) { .foot__grid { grid-template-columns: 1fr; } }

/* ---- words arrive once, part after part (js/home.js adds html.rv) ---------------- */
/* the `translate` property, not `transform`: a card that tilts (transform) and rises in (translate) does both */
.rv .rv__p { opacity: 0; translate: 0 22px; transition: opacity 900ms var(--e-out), translate 1100ms var(--e-out), transform 700ms var(--e-out); transition-delay: calc(var(--i, 0) * 90ms), calc(var(--i, 0) * 90ms), 0ms; }
.rv .is-in .rv__p, .rv .rv__p.is-in { opacity: 1; translate: none; }

@media (prefers-reduced-motion: reduce) {
  .rv .rv__p { opacity: 1; translate: none; transition: none; }
  .flv, .flv__bag, .flv__link, .btn { transition: none; }
  .koala__img, .koala__img.is-on { transition: opacity 300ms linear; }
}

/* ---- the film's chapters: a rail along its foot (js/film.js fills each one as it plays) ---- */
.film__chapters { position: absolute; z-index: 3; left: var(--pad); right: calc(var(--pad) + 13.5rem); bottom: calc(clamp(1.1rem, 4vh, 2.4rem) + var(--bar));
  display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 0.5rem; transition: opacity 500ms var(--e-out); }
.film__chapters::before { content: ""; position: absolute; z-index: -1; left: calc(-1 * var(--pad)); right: -40vw; bottom: calc(-1 * (clamp(1.1rem, 4vh, 2.4rem) + var(--bar))); height: calc(9rem + var(--bar)); pointer-events: none;
  background: linear-gradient(0deg, rgba(10, 6, 4, 0.5), transparent); }
.film__chapters.is-gone { opacity: 0; pointer-events: none; }
.film__chapters[hidden] { display: none; }
.film__chapters button { --p: 0; display: grid; gap: 0.55rem; align-content: end; min-height: 2.75rem; text-align: left; padding: 0.5rem 0 0; color: rgba(247, 239, 228, 0.78); text-shadow: 0 1px 8px rgba(10, 6, 4, 0.7); font: 600 0.7rem/1 var(--f-body); letter-spacing: 0.14em; text-transform: uppercase; transition: color 300ms; }
.film__chapters i { position: relative; display: block; height: 2px; border-radius: 2px; background: rgba(247, 239, 228, 0.18); overflow: hidden; }
.film__chapters i::after { content: ""; position: absolute; inset: 0; background: #ffd27a; transform-origin: left; transform: scaleX(var(--p)); }
.film__chapters button:hover, .film__chapters button[aria-current] { color: var(--ivory); }
.film__chapters button:focus-visible { outline: 2px solid #ffd27a; outline-offset: 4px; border-radius: 4px; }
html.has-scrolled .film__hint { opacity: 0; }
/* a phone: the skip pill over the rail, the rail along the very foot of the film (client, 26.10.2026: the other way
   round, the pill sat under the rail) */
@media (max-width: 760px) {
  .film__chapters { right: var(--pad); bottom: calc(clamp(0.5rem, 2vh, 1.2rem) + var(--bar)); gap: 0.3rem; }
  .film__skip { height: 2.85rem; font-size: 0.92rem; bottom: calc(clamp(0.5rem, 2vh, 1.2rem) + 3.4rem + var(--bar)); }
  /* the scrim reaches the stage's foot (a scrim that stopped short drew a hard line across the film) */
  .film__chapters::before { bottom: calc(-1 * (clamp(0.5rem, 2vh, 1.2rem) + var(--bar))); height: calc(12.9rem + var(--bar)); }
  .film__chapters span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .film__chapters button { padding: 0.6rem 0; }
}

/* ---- a phone's bar: the two things a visitor came for, once the film is behind them ---- */
.mbar { display: none; }
@media (max-width: 760px) {
  .mbar { position: fixed; z-index: 40; left: 0.75rem; right: 0.75rem; bottom: calc(0.75rem + env(safe-area-inset-bottom)); display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem;
    padding: 0.45rem; border-radius: 999px; background: rgba(29, 20, 14, 0.82); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
    transform: translate3d(0, 160%, 0); visibility: hidden; transition: transform 600ms var(--e-out), visibility 0s linear 600ms; }
  .mbar.is-on { transform: none; visibility: visible; transition: transform 600ms var(--e-out), visibility 0s; }
  .mbar a { display: grid; place-items: center; min-height: 2.9rem; border-radius: 999px; font: 600 0.92rem/1 var(--f-body); color: var(--ivory); }
  .mbar__cta { background: var(--red); }
  .foot { padding-bottom: calc(2rem + 4.6rem + env(safe-area-inset-bottom)); }   /* the bar never covers the last lines */
}

/* ---- into a flavour's page: the bag flies to its place (cross-document view transitions) ---- */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 520ms; animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1); }
::view-transition-group(*) { animation-duration: 760ms; animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1); }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
  .flv, .koala__stage { transition: none; }
}

/* ---- the veil a long jump passes through (js/scroll.js): the film's own night, for a breath ---- */
.veil { position: fixed; inset: 0; z-index: 60; background: var(--night); opacity: 0; pointer-events: none; transition: opacity 260ms var(--e-inout); }
.veil.is-on { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .veil { transition: none; } }

/* ---- Arabic: right to left (js/i18n.js sets html dir="rtl" lang="ar") ------------------------- */
/* Arabic letters join: tracking pulls them apart; its tall letters need room the Latin lines did not */
html:lang(ar) *:not(:lang(en)) { letter-spacing: 0 !important; }
html:lang(ar) .film__title, html:lang(ar) .sec-title, html:lang(ar) .quality__title,
html:lang(ar) .flv__name, html:lang(ar) .dcard__code, html:lang(ar) .dv__code { line-height: 1.32; }
html:lang(ar) .film__line { padding: 0.24em 0 0.2em; margin-top: -0.24em; }
html:lang(ar) .film__title { font-size: calc(var(--t-hero) * 0.84); }   /* Cairo's letters stand taller than Bricolage's */
html:lang(ar) .film__beat--end .film__title { font-size: calc(var(--t-h2) * 0.9); }
html:lang(ar) .label { font-size: 0.86rem; }
/* what sits on a side moves to the other one */
[dir="rtl"] .skip { left: auto; right: var(--pad); }
[dir="rtl"] .loader__bar i { transform-origin: right; }
[dir="rtl"] .hdr__link::after { transform-origin: left; }
[dir="rtl"] .hdr__link:hover::after { transform-origin: right; }
[dir="rtl"] .film__beat { left: auto; right: var(--pad); }
[dir="rtl"] .film__beat--end { left: 0; right: 0; }
@media (orientation: landscape) {
  [dir="rtl"] .film__stage::after { background: linear-gradient(270deg, rgba(10, 6, 4, 0.36) 0%, rgba(10, 6, 4, 0.1) 34%, transparent 52%); }
  [dir="rtl"] .film.is-day .film__stage::after { background: linear-gradient(270deg, rgba(255, 250, 242, 0.42) 0%, rgba(255, 250, 242, 0.14) 32%, transparent 50%); }
}
@media (orientation: portrait) { [dir="rtl"] .film__beat:not(.film__beat--end) { left: var(--pad); } }
[dir="rtl"] .film__skip { right: auto; left: var(--pad); }
[dir="rtl"] .film__chapters { left: calc(var(--pad) + 13.5rem); right: var(--pad); }
[dir="rtl"] .film__chapters::before { left: -40vw; right: calc(-1 * var(--pad)); }
[dir="rtl"] .film__chapters button { text-align: right; }
[dir="rtl"] .film__chapters i::after { transform-origin: right; }
@media (max-width: 760px) { [dir="rtl"] .film__chapters { left: var(--pad); } }
[dir="rtl"] .flv__chosen { right: auto; left: 0.9rem; padding: 0.38rem 0.55rem 0.38rem 0.7rem; }
@media (max-width: 420px) { [dir="rtl"] .flv__chosen { left: 0.6rem; padding: 0.34rem 0.45rem 0.34rem 0.55rem; } }
[dir="rtl"] .calc__row { padding: 0.55rem 1rem 0.55rem 0.6rem; }
@media (max-width: 380px) { [dir="rtl"] .calc__row { padding-right: 0.75rem; } }
/* arrows point the way the line reads */
[dir="rtl"] .flv__more i, [dir="rtl"] .ahero__back i { display: inline-block; transform: scaleX(-1); }

/* words for search engines and screen readers only */
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }