/* ==========================================================================
   A flavour's page (aroma/<slug>.html, built by tools/build_flavour_pages.py)
   --------------------------------------------------------------------------
   The page opens in the flavour's own world — its bag colour, deepened — with
   the bag large and tilting toward the pointer (it flies here from the home
   page's card: view-transition-name bag-<slug>). Then the product row by row
   (what is asked for, not invented, is the technical sheet), its case of 48,
   the other three. The same page for the cup (aroma/<slug>-bardak.html) and the
   bulk carton (<slug>-dokme.html): its picture in the bag's place, the flavour's
   three packs one tap apart (.apack), the other three in the same pack. --c, --c2, --c3: the flavour's colour,
   a deeper one, the deepest (set inline by the page).
   ========================================================================== */
.pg-aroma body { background: var(--cream); }
.ahero :focus-visible, .pg-aroma .hdr:not(.is-stuck) :focus-visible { outline-color: #fff; }
.pg-aroma .hdr { color: var(--ivory); }
.pg-aroma .hdr .hdr__link { color: #fff; text-shadow: 0 1px 10px rgba(0, 0, 0, 0.25); }
.pg-aroma .hdr .hdr__link:hover { color: #fff; }
.pg-aroma .hdr .lang { border-color: rgba(255, 255, 255, 0.28); }
.pg-aroma .hdr .lang__btn { color: rgba(255, 255, 255, 0.7); }
.pg-aroma .hdr .lang__btn[aria-pressed="true"] { background: #fff; color: var(--ink); }
.pg-aroma .hdr .sound { color: rgba(255, 255, 255, 0.75); }
.pg-aroma .hdr .sound[aria-pressed="true"] { color: #fff; }
.pg-aroma .hdr.is-stuck { color: var(--ink); }
.pg-aroma .hdr.is-stuck .hdr__link, .pg-aroma .hdr.is-stuck .sound { color: var(--ink-soft); text-shadow: none; }
.pg-aroma .hdr.is-stuck .lang { border-color: var(--line); }
.pg-aroma .hdr.is-stuck .lang__btn { color: var(--ink-faint); }
.pg-aroma .hdr.is-stuck .lang__btn[aria-pressed="true"] { background: var(--ink); color: var(--cream); }

/* ---- the opening: the flavour's world ---- */
.ahero { position: relative; z-index: 1; min-height: 100vh; min-height: 100svh; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center;
  gap: clamp(1.5rem, 1rem + 3vw, 4rem); padding: calc(var(--hdr-h) + 3vh) var(--pad) clamp(2.5rem, 2rem + 3vh, 4rem); color: #fff; overflow: hidden;
  background: radial-gradient(70% 80% at 72% 45%, color-mix(in srgb, var(--c) 92%, #fff) 0%, var(--c) 34%, var(--c2) 68%, var(--c3) 100%); }
/* under the words: the deepest colour, so white reads on every flavour (the light turquoise most of all) */
.ahero::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: linear-gradient(90deg, color-mix(in srgb, var(--c3) 78%, transparent) 0%, color-mix(in srgb, var(--c3) 40%, transparent) 38%, transparent 58%); }
.ahero::after { content: ""; position: absolute; inset: auto 0 0; height: 18vh; pointer-events: none; background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.12)); }
.ahero__text { position: relative; z-index: 2; display: grid; gap: 1.2rem; max-width: 34rem; }
.ahero__back { display: inline-flex; align-items: center; gap: 0.5rem; justify-self: start; min-height: 2.75rem; font: 600 0.88rem/1 var(--f-body); color: #fff; padding: 0; transition: gap 300ms var(--e-out), color 200ms; }
.ahero__back:hover { color: #fff; gap: 0.8rem; }
.ahero .label { color: rgba(255, 255, 255, 0.88); }
.ahero__title { font: 800 clamp(3rem, 1.8rem + 6vw, 7rem)/0.92 var(--f-display); letter-spacing: -0.04em; text-shadow: 0 2px 40px rgba(0, 0, 0, 0.18); }
.ahero__lead { font-size: var(--t-lead); line-height: 1.55; color: #fff; }
.ahero__cta { display: flex; flex-wrap: wrap; gap: 0.7rem; margin-top: 0.4rem; }
.btn--light { background: #fff; color: var(--ink); box-shadow: 0 14px 34px -16px rgba(0, 0, 0, 0.45); }
.btn--light:hover { transform: translateY(-1px); }
.btn--line { color: #fff; border: 1px solid rgba(255, 255, 255, 0.6); background: rgba(0, 0, 0, 0.16); }
.btn--line:hover { border-color: #fff; }
.ahero__copied { min-height: 1.2em; font-size: 0.9rem; color: rgba(255, 255, 255, 0.85); }
/* two equal halves, wider when a value is longer (the cup's "Koli · 48 × 40 g" keeps to one line) */
.ahero__facts { display: grid; grid-template-columns: repeat(2, minmax(max-content, 1fr)); gap: 1px; margin-top: 0.6rem; border-radius: 22px; overflow: hidden; background: rgba(255, 255, 255, 0.18); width: fit-content; min-width: min(18rem, 100%); }
.ahero__facts div { display: grid; gap: 0.4rem; padding: 0.9rem 1rem; background: color-mix(in srgb, var(--c3) 62%, transparent); }
.ahero__facts dt { font: 600 0.7rem/1 var(--f-body); letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255, 255, 255, 0.88); }
.ahero__facts dd { font: 800 1.15rem/1 var(--f-display); }
/* the flavour's three packs, the open one lit: a tap opens the pack's page and its picture flies into place */
.apack { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.5rem; max-width: 22rem; }
.apack__opt { display: grid; justify-items: center; gap: 0.3rem; padding: 0.75rem 0.4rem 0.7rem; border-radius: 18px; color: #fff;
  background: color-mix(in srgb, var(--c3) 55%, transparent); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16);
  transition: background 300ms, color 300ms, transform 400ms var(--e-out), box-shadow 300ms; }
.apack__opt img { height: 3.3rem; width: auto; max-width: 100%; object-fit: contain; filter: drop-shadow(0 6px 8px rgba(0, 0, 0, 0.3)); margin-bottom: 0.15rem; }
.apack__name { font: 800 0.92rem/1 var(--f-display); letter-spacing: -0.01em; }
.apack__w { font: 500 0.74rem/1 var(--f-body); color: inherit; opacity: 0.85; font-variant-numeric: tabular-nums; }
.apack__opt[aria-current="page"] { background: #fff; color: var(--ink); box-shadow: 0 14px 30px -16px rgba(0, 0, 0, 0.45); }
.apack__opt:not([aria-current]):hover { background: color-mix(in srgb, var(--c3) 78%, transparent); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.4); transform: translateY(-2px); }
.apack__opt:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
/* the bag (or the cup, the carton), tilting toward the pointer */
.ahero__stage { --rx: 0deg; --ry: 0deg; --bh: min(50%, 12.5rem); position: relative; z-index: 1; display: grid; place-items: center; perspective: 1400px; }
.ahero__halo { position: absolute; width: 78%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 255, 255, 0.35), transparent); filter: blur(10px); }
.ahero__bag { position: relative; width: min(100%, 25rem); max-height: 78vh; object-fit: contain; filter: drop-shadow(0 40px 50px rgba(0, 0, 0, 0.35));
  transform: rotateX(var(--rx)) rotateY(var(--ry)) translateZ(0); transition: transform 900ms var(--e-out); animation: bag-in 1200ms var(--e-out) both; }
.ahero__stage.is-tilting .ahero__bag { transition: transform 160ms linear; }
/* the flavour's own crisps in front of the bag, its ingredient behind it (the packaging's artwork,
   tools/links_assets.py): each comes in after the bag and drifts with the pointer at its own depth */
.ahero__bag { z-index: 1; }
.ahero__bag--cup { width: min(100%, 22rem); }
/* the bulk carton (the client's design, a long low box): wider, and its crisps and ingredient keep to its corners */
.ahero__bag--bulk { width: min(100%, 40rem); }
.ahero__stage:has(.ahero__bag--bulk) { --bh: min(46%, 16.5rem); }
/* the carton's name and flavour are on its front: the crisps go to its right corner (over its printed side), the
   ingredient behind its top left */
.ahero__stage:has(.ahero__bag--bulk) .ahero__chips { right: auto; left: calc(50% + var(--bh) * 0.62); bottom: -3%; width: clamp(6.5rem, 4rem + 6vw, 11rem); rotate: 8deg; }
.ahero__stage:has(.ahero__bag--bulk) .ahero__ing { left: auto; right: calc(50% + var(--bh) * 0.72); top: 0; rotate: -10deg; width: clamp(7rem, 4.5rem + 7vw, 12rem); }
.ahero__ing, .ahero__chips { position: absolute; height: auto; pointer-events: none; transition: transform 900ms var(--e-out); }
.ahero__ing { z-index: 0; width: clamp(8rem, 5rem + 9vw, 14rem); top: 5%; left: calc(50% + var(--bh) * 0.62); rotate: 9deg; filter: drop-shadow(0 22px 26px rgba(0, 0, 0, 0.26));
  transform: translate3d(calc(var(--px, 0) * -14px), calc(var(--py, 0) * -10px), 0); animation: ing-in 1300ms 260ms var(--e-out) both; }
.ahero__chips { z-index: 2; width: clamp(8rem, 4.5rem + 10vw, 14.5rem); bottom: 1%; right: calc(50% + var(--bh) * 0.62); rotate: -7deg; filter: drop-shadow(0 28px 32px rgba(0, 0, 0, 0.34));
  transform: translate3d(calc(var(--px, 0) * 22px), calc(var(--py, 0) * 16px), 0); animation: chips-in 1200ms 420ms var(--e-out) both; }
.ahero__stage.is-tilting .ahero__ing, .ahero__stage.is-tilting .ahero__chips { transition: transform 160ms linear; }
@keyframes ing-in { from { opacity: 0; translate: 0 -28px; scale: 0.9; } }
@keyframes chips-in { from { opacity: 0; translate: -26px 36px; scale: 0.9; } }
@keyframes bag-in { from { opacity: 0; transform: translateY(40px) rotate(-4deg) scale(0.96); } }
@media (max-width: 860px) {
  .ahero { grid-template-columns: 1fr; min-height: 0; padding-top: calc(var(--hdr-h) + 1.5rem); }
  .ahero__stage { order: -1; }
  .ahero__bag { width: min(62%, 17rem); max-height: 46vh; }
  .ahero__bag--cup { width: min(56%, 15rem); }
  .ahero__bag--bulk { width: min(94%, 30rem); }
  .ahero__stage:has(.ahero__bag--bulk) { --bh: min(38%, 9.5rem); padding-top: 1rem; }   /* its ingredient stays on the screen */
  .ahero__stage:has(.ahero__bag--bulk) .ahero__chips { width: clamp(5rem, 22vw, 7rem); bottom: -4%; }
  .ahero__stage:has(.ahero__bag--bulk) .ahero__ing { width: clamp(4.5rem, 20vw, 6.5rem); }
  .ahero__stage { --bh: min(31%, 8.5rem); }   /* the bag's half width here: its crisps and ingredient keep to its corners */
  .ahero__ing { width: clamp(5.5rem, 26vw, 9rem); }
  .ahero__chips { width: clamp(6rem, 30vw, 10rem); }
}

/* ---- the product, row by row; its name and the two asks stay beside the rows ---- */
.pinfo { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(2rem, 1rem + 4vw, 6rem); align-items: start; }
.pinfo__side { position: sticky; top: calc(var(--hdr-h) + 2rem); display: grid; gap: 1.2rem; max-width: 30rem; }
.pinfo .sec-title em, .pcase .sec-title em { color: var(--c3); }
.pinfo__lead { font-size: var(--t-lead); color: var(--ink-soft); }
.pinfo__cta { display: flex; flex-wrap: wrap; gap: 0.7rem; margin-top: 0.3rem; }
.btn--quiet { color: var(--ink); border: 1px solid rgba(29, 20, 14, 0.22); background: transparent; }
.btn--quiet:hover { border-color: var(--ink); }
.pinfo__note { font-size: 0.92rem; color: var(--ink-faint); }
.pinfo__list { margin: 0; display: grid; border-top: 1px solid var(--line); }
.pinfo__list div { display: grid; grid-template-columns: minmax(8.5rem, 0.8fr) minmax(0, 1.2fr); gap: 1rem; align-items: baseline; padding: 1.05rem 0; border-bottom: 1px solid var(--line); }
.pinfo__list dt { font: 600 0.74rem/1.3 var(--f-body); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-faint); }
.pinfo__list dd { font: 700 clamp(1.02rem, 0.95rem + 0.3vw, 1.2rem)/1.3 var(--f-display); }
@media (max-width: 860px) { .pinfo { grid-template-columns: 1fr; } .pinfo__side { position: static; } }
@media (max-width: 420px) { .pinfo__list div { grid-template-columns: 1fr; gap: 0.35rem; } }

/* ---- the case: 48 bags in the flavour's own colours (tools/case_cutout.py, cut from the client's mockups);
   the page draws its light and its shadow: a glow of the flavour behind, the case's own shadow under it ---- */
.pcase { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(1.5rem, 1rem + 4vw, 5rem); align-items: center; background: var(--cream-2); overflow: hidden; }
.pcase__text { display: grid; gap: 1.2rem; max-width: 30rem; }
.pcase__lead { font-size: var(--t-lead); color: var(--ink-soft); }
.pcase__facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; margin: 0.4rem 0 0; max-width: 20rem; border-radius: 22px; overflow: hidden; background: var(--line); }
.pcase__facts div { display: grid; gap: 0.4rem; padding: 0.9rem 1rem; background: var(--cream); }
.pcase__facts dt { font: 600 0.7rem/1 var(--f-body); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-faint); }
.pcase__facts dd { margin: 0; font: 800 1.15rem/1.1 var(--f-display); }
.pcase__stage { position: relative; margin: 0; display: grid; place-items: center; padding-block: clamp(0.5rem, 2vw, 2rem); }
.pcase__glow { position: absolute; inset: 4% 2% 10%; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--c) 34%, transparent), transparent); filter: blur(28px); }
.pcase__box { position: relative; display: block; width: min(100%, 40rem); transition: transform 900ms var(--e-out); }
/* the case stands on its corner (its base is a V in the picture): its shadows are its own silhouette, a tight one
   where it meets the ground and a wide soft one — an ellipse under it left it floating */
.pcase__img { display: block; width: 100%; height: auto; filter: drop-shadow(0 5px 5px rgba(60, 30, 10, 0.26)) drop-shadow(0 26px 30px rgba(60, 30, 10, 0.15)); }
@media (hover: hover) and (pointer: fine) { .pcase__stage:hover .pcase__box { transform: translateY(-6px) scale(1.012); } }
.rv .pcase__glow, .rv .pcase__img { opacity: 0; }   /* in together, once loaded (js/home.js); no fade on the way out */
.rv .pcase__stage.is-loaded .pcase__glow, .rv .pcase__stage.is-loaded .pcase__img { opacity: 1; transition: opacity 900ms var(--e-out); }
@media (max-width: 860px) { .pcase { grid-template-columns: 1fr; } .pcase__stage { order: -1; } }

/* ---- the other three ---- */
.flv-list--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 760px) { .flv-list--three { grid-template-columns: 1fr; max-width: 22rem; margin-inline: auto; } }

@media (prefers-reduced-motion: reduce) {
  .ahero__bag, .ahero__ing, .ahero__chips { animation: none; transition: none; }
  .apack__opt { transition: none; }
  .pcase__box { transition: none; }
}

/* ---- Arabic, right to left: the words' shade and the light behind the bag change sides ---- */
[dir="rtl"] .ahero { background: radial-gradient(70% 80% at 28% 45%, color-mix(in srgb, var(--c) 92%, #fff) 0%, var(--c) 34%, var(--c2) 68%, var(--c3) 100%); }
[dir="rtl"] .ahero::before { background: linear-gradient(270deg, color-mix(in srgb, var(--c3) 78%, transparent) 0%, color-mix(in srgb, var(--c3) 40%, transparent) 38%, transparent 58%); }