/* ilaçtarif® · below-the-fold sections. Loaded after first paint (see <head>); tokens and fonts come from tokens.css + style.css. */

/* ---------- 2 · Print story (scene units: 100 × 90 cqi) ------------------ */
@property --p { syntax: "<number>"; inherits: true; initial-value: 1; }
.pt { padding-block: var(--space-3xl) var(--space-2xl); }
.pt__stage {
  --p: 0; --enter: 1; --beam: 0; --sweep: 0; --link: 1; --feed: 1; --print: 1; --peel: 0; --fly: 0; --lift: 0; --home: 0;
  display: grid; gap: var(--space-xl); margin-top: var(--space-xl);
}
.pt__rail { display: none; }
.pt__steps { display: grid; gap: var(--space-lg); }
.pt__step { padding-top: var(--space-md); border-top: var(--rule-bold) solid var(--color-ink); }
.pt__num { color: var(--color-navy); font-size: var(--text-sm); }
.pt__step h3 { margin-top: var(--space-xs); font-family: var(--font-display); font-stretch: 75%; font-weight: 800; font-size: var(--text-xl); line-height: 1; }
.pt__step p:not(.pt__num) { margin-top: var(--space-xs); max-width: 32rem; color: var(--color-ink-2); }
.pt__inline { margin-top: var(--space-md); width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--radius-cut-lg); }

.pt__scene {
  order: -1; position: relative; container-type: inline-size;
  width: 100%; aspect-ratio: 10 / 9; justify-self: center; overflow: hidden;
  border-radius: var(--radius-cut-lg);
  background: radial-gradient(var(--color-rule) 1px, transparent 1.4px) 0 0 / 18px 18px var(--color-paper-2);
}
.pt__scene > * { position: absolute; }
.pt__scene img { display: block; width: 100%; height: auto; }
.pt__box { left: 8cqi; top: 58cqi; width: 50cqi; opacity: var(--enter); transform: translateY(calc((1 - var(--enter)) * 24cqi)); }
.pt__code {
  position: absolute; left: 50%; top: 15%; width: 22%; height: 20%; padding: .5cqi; border-radius: .3cqi;
  background: var(--color-paper); stroke: var(--color-ink); stroke-width: 1.1;
}
.pt__beam {
  position: absolute; left: 47%; top: 15%; width: 28%; height: .35cqi; border-radius: 1cqi;
  background: var(--color-scan); box-shadow: 0 0 1.2cqi .2cqi var(--color-scan);
  opacity: var(--beam); transform: translateY(calc(var(--sweep) * 5.3cqi)) scaleX(var(--beam));
}
.is-read .pt__beam { background: var(--color-led); box-shadow: 0 0 1.2cqi .2cqi var(--color-led); }
.is-read .pt__code { animation: chip-pop var(--dur-med) var(--ease-out) both; }
.pt__wire { inset: 0; width: 100%; height: 100%; fill: none; stroke: var(--color-ink-2); stroke-width: .3; }
.pt__wire path { stroke-dasharray: var(--len); stroke-dashoffset: calc(var(--len) * (1 - var(--link))); opacity: calc(1 - var(--lift)); }
.pt__bits rect { fill: var(--color-navy); stroke: none; opacity: 0; }
.pt__feed {
  left: 30cqi; top: 29.6cqi; width: 40cqi; transform-origin: 0 0;
  clip-path: inset(0 -60cqi -60cqi -60cqi);
  transform: translate(calc(var(--fly) * -20cqi), calc(var(--fly) * 33.6cqi - var(--peel) * 1.5cqi))
             rotate(calc(var(--fly) * 2deg - var(--peel) * 4deg)) scale(calc(1 + var(--peel) * .04 - var(--fly) * .54));
}
.pt__sheet { position: relative; transform: translateY(calc((var(--feed) - 1) * 101%)); }
.pt__paper { position: absolute; inset: 0; border-radius: 1.6cqi; background: var(--color-label); box-shadow: var(--shadow-label); }
.pt__sheet .label { position: relative; box-shadow: none; clip-path: inset(0 0 calc((1 - var(--print)) * 100%) 0); }
.pt__head {
  position: absolute; inset: 0 -1.5cqi auto; height: .6cqi; border-radius: .3cqi;
  background: var(--color-navy-deep); box-shadow: 0 .5cqi 1cqi var(--color-accent-deep);
  opacity: 0; transform: translateY(calc(var(--print) * 26.4cqi));
  transition: opacity var(--dur-short) var(--ease-out);
}
.is-heat .pt__head { opacity: 1; }
.pt__printer { left: 18cqi; top: 0; width: 64cqi; opacity: calc(var(--enter) - var(--lift)); transform: translateY(calc((1 - var(--enter)) * -32cqi - var(--lift) * 40cqi)); }
.pt__led { position: absolute; left: 90.4%; top: 70.1%; width: 4.4%; aspect-ratio: 1; border-radius: 50%; background: var(--color-led); box-shadow: 0 0 1.4cqi var(--color-led); opacity: 0; }
.is-busy .pt__led { opacity: 1; animation: pt-blink .5s var(--ease-in-out) 3; }
@keyframes pt-blink { 50% { opacity: .3; } }
.pt__scene .pt__home { inset: 0; height: 100%; object-fit: cover; object-position: 50% 45%; clip-path: inset(calc((1 - var(--home)) * 100%) 0 0 0); }
@keyframes chip-pop { 0% { transform: scale(.92); } 60% { transform: scale(1.03); } 100% { transform: scale(1); } }

/* live: JS on, motion allowed, viewport tall enough */
.pt.is-live .pt__track { height: 380vh; }
.pt.is-live .pt__stage {
  position: sticky; top: 0; height: 100vh; height: 100svh; margin-top: 0; gap: var(--space-sm); align-content: center;
  padding-block: 5.25rem max(var(--space-sm), env(safe-area-inset-bottom));
  grid-template: "rail" auto "scene" auto "copy" auto / minmax(0, 1fr);
}
.is-live .pt__rail {
  grid-area: rail; display: flex; justify-content: space-between; gap: var(--space-xs); position: relative;
  padding-bottom: var(--space-2xs); font-size: var(--text-xs); color: var(--color-muted); white-space: nowrap;
}
.is-live .pt__rail::before, .is-live .pt__rail::after { content: ""; position: absolute; inset: auto 0 0; height: var(--rule-bold); background: var(--color-rule); }
.is-live .pt__rail::after { background: var(--color-ink); transform-origin: 0 50%; transform: scaleX(var(--p)); }
.pt__rail .is-on { color: var(--color-ink); }
.is-live .pt__scene { grid-area: scene; width: min(100%, calc((100vh - 24rem) * 10 / 9)); width: min(100%, calc((100svh - 24rem) * 10 / 9)); }
.is-live .pt__box, .is-live .pt__feed, .is-live .pt__printer { will-change: transform; }
.is-live .pt__steps { grid-area: copy; gap: 0; }
.is-live .pt__step { grid-area: 1 / 1; padding: 0; border: 0; opacity: 0; transform: translateY(.75rem); transition: opacity var(--dur-med) var(--ease-out), transform var(--dur-med) var(--ease-out); }
.is-live .pt__step.is-active { opacity: 1; transform: none; }
.is-live .pt__inline { display: none; }
@media (max-width: 899.98px) {
  .is-live .pt__step h3 { font-size: var(--text-lg); }
  .is-live .pt__step p:not(.pt__num) { font-size: var(--text-sm); }
}
@media (min-width: 900px) {
  .pt__stage { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: var(--space-3xl); align-items: start; }
  .pt.is-live .pt__track { height: 420vh; }
  .pt.is-live .pt__stage { padding-top: 6rem; row-gap: var(--space-md); grid-template: ". scene" 1fr "rail scene" auto "copy scene" auto ". scene" 1fr / minmax(0, 5fr) minmax(0, 6fr); }
  .is-live .pt__scene { align-self: center; width: min(100%, calc((100vh - 8rem) * 10 / 9)); width: min(100%, calc((100svh - 8rem) * 10 / 9)); }
}

/* ---------- 3 · Anatomy · "Kesit": the label separates into its rows --- */
/* brand surface: #0E71B8 lit from the top right (#167DC2), deepening to #07558F,
   with the ilaçtarif® logo pressed into it behind the label */
/* paper → #167DC2 → #0E71B8 → #07558F → the maker's #EAF4FA band. Both edges fade over
   15rem along a smoothstep curve, so the blue arrives and leaves slowly, without a seam. */
.anatomy__blue {
  padding-block: 13rem calc(var(--space-2xl) + var(--space-lg));
  background: linear-gradient(180deg,
    color-mix(in oklab, var(--color-brand-light) 0%, var(--color-paper)) 0.00rem, color-mix(in oklab, var(--color-brand-light) 4%, var(--color-paper)) 1.80rem, color-mix(in oklab, var(--color-brand-light) 16%, var(--color-paper)) 3.75rem, color-mix(in oklab, var(--color-brand-light) 35%, var(--color-paper)) 6.00rem, color-mix(in oklab, var(--color-brand-light) 57%, var(--color-paper)) 8.25rem, color-mix(in oklab, var(--color-brand-light) 78%, var(--color-paper)) 10.50rem, color-mix(in oklab, var(--color-brand-light) 94%, var(--color-paper)) 12.75rem, color-mix(in oklab, var(--color-brand-light) 100%, var(--color-paper)) 15.00rem,
    var(--color-brand) 48%,
    color-mix(in oklab, var(--color-brand-deep) 100%, var(--color-paper-2)) calc(100% - 15.00rem), color-mix(in oklab, var(--color-brand-deep) 96%, var(--color-paper-2)) calc(100% - 13.20rem), color-mix(in oklab, var(--color-brand-deep) 84%, var(--color-paper-2)) calc(100% - 11.25rem), color-mix(in oklab, var(--color-brand-deep) 65%, var(--color-paper-2)) calc(100% - 9.00rem), color-mix(in oklab, var(--color-brand-deep) 43%, var(--color-paper-2)) calc(100% - 6.75rem), color-mix(in oklab, var(--color-brand-deep) 22%, var(--color-paper-2)) calc(100% - 4.50rem), color-mix(in oklab, var(--color-brand-deep) 6%, var(--color-paper-2)) calc(100% - 2.25rem), color-mix(in oklab, var(--color-brand-deep) 0%, var(--color-paper-2)) calc(100% - 0.00rem));
  color: var(--color-navy-ink);
}
.anatomy__blue .chapter-title { color: var(--color-navy-ink); }
.anatomy__blue .anatomy__head p { color: var(--color-navy-ink); opacity: .88; }
/* the ilaçtarif® icon in ordered rows: #167DC2 face, #07558F shadow */
.anatomy__blue { position: relative; isolation: isolate; }
.anatomy__pattern {
  position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; pointer-events: none;
  -webkit-mask: linear-gradient(transparent 7rem, black 15rem, black calc(100% - 15rem), transparent calc(100% - 7rem));
  mask: linear-gradient(transparent 7rem, black 15rem, black calc(100% - 15rem), transparent calc(100% - 7rem));
}
.anatomy__mark { fill: var(--color-brand-light); }
.anatomy__head p { margin-top: var(--space-sm); max-width: 36rem; color: var(--color-ink-2); }
.anatomy__list { position: relative; display: grid; gap: var(--space-md); margin-top: var(--space-xl); }
.anatomy__item { display: grid; gap: var(--space-2xs); }
.anatomy__slice {
  container-type: inline-size; max-width: 40rem;
  background: var(--color-label); color: var(--color-label-black);
  font-family: var(--font-display); font-stretch: 72%; line-height: 1.18;
  box-shadow: var(--shadow-label); border-radius: 2px;
}
.anatomy__slice > * { padding: 1.3cqi 3.2cqi; }
.anatomy__item:first-child .anatomy__slice { border-radius: 6px 6px 2px 2px; }
.anatomy__item:last-child .anatomy__slice { border-radius: 2px 2px 6px 6px; }
.anatomy__slice .label__body { min-height: 30cqi; }
.anatomy__note { position: relative; display: grid; grid-template-columns: 2.25rem minmax(0, 1fr); column-gap: var(--space-xs); }
.anatomy__note > span { grid-row: span 2; display: grid; place-items: center; width: 1.6rem; height: 1.6rem; border: var(--rule-hair) solid var(--color-navy-ink); border-radius: 50%; }
.anatomy__note h3 { font-family: var(--font-body); font-size: var(--text-md); font-weight: 600; }
.anatomy__note p { color: var(--color-navy-ink); opacity: .78; font-size: var(--text-sm); }
@media (min-width: 1024px) {
  .anatomy__head { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: var(--space-3xl); align-items: end; }
  .anatomy__head p { margin-top: 0; }
  .anatomy__list { gap: var(--space-sm); }
  .anatomy__item { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: var(--space-3xl); align-items: center; }
  .anatomy__note::before {
    content: ""; position: absolute; right: calc(100% + var(--space-2xs)); top: .8rem; width: calc(var(--space-3xl) - var(--space-2xs));
    border-top: var(--rule-hair) dotted var(--color-navy-ink); transform-origin: left; transform: scaleX(var(--lead, 1));
  }
}
/* scroll: the whole label breaks into its six rows, holds, then joins up again.
   main.js writes each slice's transform; on tall desktops the stage pins while it plays. */
.kesit.is-live .anatomy__slice { position: relative; will-change: transform; }
.kesit.is-live .anatomy__slice.is-flying { box-shadow: var(--shadow-label), 0 26px 40px -22px oklch(21% 0.025 258 / .5); }
.kesit.is-pinned { height: var(--track, 180vh); margin-top: var(--space-lg); }
.kesit.is-pinned .kesit__stage { position: sticky; top: var(--stick, 6rem); }
.kesit.is-pinned .anatomy__list { margin-top: 0; gap: var(--space-lg); }

/* ---------- 3b · Maker · "Rulo": a perforated strip that grows -------- */
.mk { padding-block: var(--space-3xl); background: var(--color-paper-2); color: var(--color-ink); }
.mk__panel .chapter-title { font-size: var(--text-xl); max-width: none; }
.mk__panel > p { margin: var(--space-xs) 0 var(--space-lg); color: var(--color-ink-2); font-size: var(--text-sm); }
.mk__stage { display: grid; gap: var(--space-2xl); align-items: center; }
.mk__panel {
  width: 100%; max-width: 30rem; padding: var(--space-lg);
  background: var(--color-paper); border: var(--rule-hair) solid var(--color-rule);
  border-radius: var(--radius-cut-lg); box-shadow: var(--shadow-pill);
}
.maker__form { display: grid; gap: var(--space-md); }
.field__input.is-typing { border-color: var(--color-ink); box-shadow: inset 0 0 0 1px var(--color-ink); }
.maker__go.is-pressed { transform: translateY(2px); background: var(--color-accent-deep); }
@media (min-width: 1024px) {
  .mk__stage { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--space-3xl); }
}
/* live: the stage pins while scrolling drives typing, language and feed */
.mk.is-live .mk__track { height: 320vh; }
.mk.is-live .mk__stage {
  position: sticky; top: 0; height: 100vh; height: 100svh; margin-top: 0;
  align-content: center; padding-block: 6rem var(--space-md);
}
.mk.is-live .maker__device { width: min(100%, 34rem, calc((100svh - 9rem) / 1.12)); }
.mk.is-auto .maker__strip { transition: none; }
@media (max-width: 1023.98px) {
  .mk.is-live .mk__stage { gap: var(--space-md); padding-top: 5.25rem; align-content: start; }
  .mk.is-live .mk__panel { padding: var(--space-md); }
  .mk.is-live .field__hint, .mk.is-live .seg legend, .mk.is-live .mk__panel > p { display: none; }
  .mk.is-live .mk__panel .chapter-title { font-size: var(--text-lg); margin-bottom: var(--space-sm); }
  .mk.is-live .maker__form { grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: var(--space-sm); }
  .mk.is-live .maker__form .field { grid-column: 1 / -1; }
  .mk.is-live .seg { grid-column: 1 / -1; }
  .mk.is-live .seg label { flex: 1; }
  .mk.is-live .seg { flex-wrap: nowrap; }
  .mk.is-live .seg span { min-width: 2.6rem; padding: 0 var(--space-2xs); }
  .mk.is-live .maker__go { min-width: 0; padding: 0 var(--space-md); }
  .mk.is-live .maker__device { width: min(100%, 34rem, calc((100svh - 22rem) / 1.12)); }
  .mk.is-live .maker__go { grid-column: 1 / -1; }
}
html:not(.js) .maker__form { display: none; }

.field { display: grid; gap: var(--space-3xs); }
.field__label { color: var(--color-muted); text-transform: uppercase; }
.field__input {
  min-height: 3rem; padding: 0 var(--space-sm);
  border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-cut);
  background: var(--color-paper); color: var(--color-ink);
  font: 400 var(--text-md)/1.2 var(--font-body);
  transition: border-color var(--dur-micro) var(--ease-out);
}
.field__input::placeholder { color: var(--color-muted); }
.field__input:hover { border-color: var(--color-ink-2); }
.field__input:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 1px; border-color: var(--color-ink); }
.field__input[aria-invalid="true"] { border-color: var(--color-error); }
.field__input:disabled { opacity: .5; cursor: not-allowed; }
.field__hint { color: var(--color-muted); }
.field__input[aria-invalid="true"] + .field__hint { color: var(--color-error); }

.seg { display: flex; flex-wrap: wrap; align-items: center; margin: 0; padding: 0; border: 0; }
.seg legend { width: 100%; margin-bottom: var(--space-3xs); padding: 0; }
.seg label { position: relative; }
.seg input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.seg span {
  display: flex; align-items: center; justify-content: center; gap: var(--space-2xs); min-width: 3.25rem; min-height: 2.75rem; padding: 0 var(--space-xs);
  border: var(--rule-hair) solid var(--color-rule); margin-left: calc(var(--rule-hair) * -1);
  background: var(--color-paper); color: var(--color-ink-2);
  font: 500 var(--text-sm)/1 var(--font-mono);
  transition: background-color var(--dur-micro) var(--ease-out);
}
.seg label:first-of-type span { border-radius: var(--radius-sm) 0 0 var(--radius-sm); margin-left: 0; }
.seg label:last-of-type span { border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.seg label:hover span { background: var(--color-paper-3); }
.seg input:checked + span { background: var(--color-ink); color: var(--color-paper); border-color: var(--color-ink); }
.seg input:focus-visible + span { outline: 2px solid var(--color-focus); outline-offset: 2px; position: relative; z-index: 1; }
.maker__go { justify-self: start; min-width: 9rem; }
.maker__go[aria-busy="true"] { cursor: progress; background: var(--color-accent-deep); }

.maker__device { container-type: inline-size; min-width: 0; width: 100%; max-width: 34rem; justify-self: center; }
.maker__printer {
  position: relative; z-index: var(--z-raised); height: 18cqi;
  background: var(--color-navy-deep);
  border-radius: var(--radius-cut-lg);
  box-shadow: var(--shadow-device);
}
.maker__printer .logo { position: absolute; left: 50%; top: 4cqi; height: 4.4cqi; width: auto; aspect-ratio: 494 / 121.5; translate: -50% 0; color: var(--color-navy-ink); opacity: .9; }
.maker__led { position: absolute; right: 5cqi; top: 4.5cqi; width: 2cqi; aspect-ratio: 1; border-radius: 50%; background: var(--color-led-off); }
.is-printing .maker__led { background: var(--color-led); box-shadow: 0 0 1.4cqi var(--color-led); animation: pt-blink 300ms steps(2, end) 3; }
.maker__slot { position: absolute; left: 9%; right: 9%; bottom: 3cqi; height: 1.2cqi; border-radius: .6cqi; background: var(--color-label-black); }
.maker__feed { position: relative; height: 92cqi; margin: -2cqi 9% 0; overflow: clip; -webkit-mask: linear-gradient(black 70%, transparent); mask: linear-gradient(black 70%, transparent); }
.maker__feed::before {
  content: ""; position: absolute; inset: 0 0 auto; height: 2px; z-index: 1;
  background: var(--color-paper); box-shadow: 0 0 12px 3px var(--glare); opacity: 0;
  transition: opacity var(--dur-short) var(--ease-out);
}
.is-printing .maker__feed::before { opacity: 1; }
.maker__strip { display: grid; gap: 4cqi; padding: 5cqi 3cqi 0; background: var(--color-paper); box-shadow: var(--shadow-receipt); transition: translate 1.1s steps(14, end); }
.maker__cut { position: relative; }
.maker__cut:not(:last-child)::after { content: ""; position: absolute; left: -3cqi; right: -3cqi; bottom: -2cqi; border-top: var(--rule-hair) dashed var(--color-rule); }
.maker__cut .label { box-shadow: none; }
@media (min-width: 1024px) {
  .maker__device { justify-self: end; }
}

/* ---------- 4 · Film through a label-shaped window (navy band) -------- */
.film { padding-block: var(--space-3xl) var(--space-2xl); background: var(--color-navy-deep); color: var(--color-navy-ink); }
.film .chapter-title { color: var(--color-navy-ink); }
.film__head { display: grid; gap: var(--space-sm) var(--space-3xl); margin-bottom: var(--space-xl); }
.film__head p { max-width: 36rem; opacity: .86; }
@media (min-width: 1024px) { .film__head { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: end; } }
.film__frame {
  position: relative; aspect-ratio: 16 / 9; overflow: hidden; cursor: pointer;
  width: min(100% - 2 * var(--gutter), var(--container) - 2 * var(--gutter)); margin-inline: auto;
  border-radius: var(--radius-cut-lg); background: var(--color-navy);
}
@media (max-width: 699.98px) { .film__frame { width: 100%; border-radius: 0; } }
.film__poster, .film__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.film__video { opacity: 0; transition: opacity var(--dur-med) var(--ease-out); }
.film__video.is-playing { opacity: 1; }
.film__frame::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; background: linear-gradient(var(--color-label-black) 0 11%, var(--color-label) 0); }
html.js .film__frame { --p: 1; clip-path: inset(calc((1 - var(--p)) * 26.3%) calc((1 - var(--p)) * 30%) round 10px); }
html.js .film__frame::after { opacity: calc(1 - var(--p) * 2.5); }
html.js .film__frame :is(img, video) { scale: calc(1.12 - .12 * var(--p)); }
@supports (animation-timeline: view()) {
  html.js .film__frame { animation: open linear both; animation-timeline: view(); animation-range: entry 15% cover 50%; }
}
.film__toggle:not(:focus-visible) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; padding: 0; }
.film__toggle:focus-visible {
  position: absolute; right: var(--space-sm); bottom: var(--space-sm);
  min-height: 2.25rem; padding: 0 var(--space-xs); border: 0; border-radius: var(--radius-xs);
  background: var(--color-paper); color: var(--color-ink);
}

/* ---------- 4b · Story: pinned map + timeline (same navy chapter) ----- */
.story { padding-block: var(--space-xl) var(--space-3xl); background: var(--color-navy-deep); color: var(--color-navy-ink); }
.story .chapter-title { color: var(--color-navy-ink); }
.story__grid { display: grid; gap: var(--space-lg); }
.atlas { position: sticky; top: 4.75rem; z-index: 1; aspect-ratio: 880 / 550; background: var(--color-navy-deep); }
.atlas__map {
  position: absolute; inset: 0; background: var(--color-navy-rule);
  -webkit-mask: url(../images/81-il.webp) center / contain no-repeat; mask: url(../images/81-il.webp) center / contain no-repeat;
}
.atlas__map--lit { background: var(--color-navy-line); clip-path: circle(150% at 18% 63%); transition: clip-path 1.4s var(--ease-out); }
.story[data-stage]:not([data-stage="3"]) .atlas__map--lit { clip-path: circle(0% at 18% 63%); }
.atlas__pin { position: absolute; left: var(--x); top: var(--y); width: 10px; aspect-ratio: 1; margin: -5px; border-radius: 50%; background: var(--color-label); box-shadow: 0 0 0 4px var(--color-navy-deep); }
.atlas__pin b { position: absolute; left: 16px; top: -.55em; font-size: var(--text-xs); font-weight: 500; color: var(--color-navy-ink); white-space: nowrap; }
.atlas__pin--kktc { transition: opacity .3s 1s, transform .4s 1s var(--ease-out); }
.story[data-stage]:not([data-stage="3"]) .atlas__pin--kktc { opacity: 0; transform: scale(.4); }
.atlas__pin--dnz::after { content: ""; position: absolute; inset: -6px; border: 1px solid var(--color-label); border-radius: 50%; opacity: 0; }
.story[data-stage="0"] .atlas__pin--dnz::after { animation: ping 1.2s var(--ease-out) 2; }
@keyframes ping { from { opacity: 1; transform: scale(.5); } to { opacity: 0; transform: scale(2.4); } }
.atlas__years { position: absolute; right: 0; top: 0; height: 1em; overflow: hidden; font-family: var(--font-display); font-weight: 800; font-stretch: 75%; font-size: var(--text-xl); line-height: 1; color: var(--color-navy-line); }
.atlas__years > span { display: block; transform: translateY(calc(var(--s, 3) * -100%)); transition: transform var(--dur-med) var(--ease-out); }
.story__line li { padding: var(--space-lg) 0 var(--space-lg) var(--space-md); border-left: var(--rule-hair) solid var(--color-navy-rule); transition: opacity var(--dur-med) var(--ease-out); }
.story__line li p:not(.story__when) { margin-top: var(--space-xs); max-width: 36rem; opacity: .86; }
.story__line h3 { margin-top: var(--space-2xs); font-family: var(--font-display); font-stretch: 75%; font-weight: 800; font-size: var(--text-lg); }
.story__when { color: var(--color-label); }
.story[data-stage] .story__line li:not(.is-on) { opacity: .78; }
.story__line img { width: min(100%, 16rem); margin-top: var(--space-sm); aspect-ratio: 16 / 10; object-fit: cover; border-radius: var(--radius-cut-lg); background: var(--color-paper); }
.story__big { font-family: var(--font-display); font-stretch: 75%; font-weight: 800; font-size: var(--text-2xl); line-height: .95; }
@media (min-width: 900px) {
  .story__grid { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); grid-template-areas: "title title" "map line"; column-gap: var(--space-2xl); }
  .story .chapter-title { grid-area: title; }
  .atlas { grid-area: map; align-self: start; top: 18vh; }
  .story__line { grid-area: line; }
  .story__line li { min-height: 50vh; }
  .atlas__years { font-size: var(--text-display); }
}
@media (max-width: 899.98px) and (max-height: 640px) { .atlas { position: static; } }

/* ---------- 5 · Modules: the real ilaçtarif® window, redrawn in CSS ---- */
/* Drawn at the client's own 1100×640 size from screenshots of v100.124, then scaled
   to the column by --k (set in main.js). Without JS it sits at 1:1 and scrolls sideways. */
.modules { padding-block: var(--space-3xl) var(--space-2xl); }
.modules > .container { display: grid; grid-template-columns: minmax(0, 1fr); }
.modules__head { display: grid; gap: var(--space-sm) var(--space-3xl); margin-bottom: var(--space-xl); }
.modules__head p { color: var(--color-ink-2); }
@media (min-width: 1024px) {
  .modules__head { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: end; }
  .modules > .container { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: var(--space-3xl); }
  .modules__head, .appx { grid-column: 1 / -1; }
}

.appx {
  --k: 1;
  position: relative; overflow: hidden; aspect-ratio: 1100 / 640;
  border-radius: var(--radius-sm); background: var(--app-blue); box-shadow: var(--shadow-film);
}
html:not(.js) .appx { aspect-ratio: auto; overflow-x: auto; }
/* phones: the tab strip stands in for the menu, so the menu column is cropped away */
@media (max-width: 699.98px) { html.js .appx { --crop: 182; aspect-ratio: 918 / 640; } }
.app {
  position: absolute; top: 0; left: calc(var(--crop, 0) * var(--k) * -1px); width: 1100px; height: 640px;
  transform: scale(var(--k)); transform-origin: 0 0;
  display: grid;
  grid-template: "head head" 34px "side work" minmax(0, 1fr) "stat stat" 30px / 182px minmax(0, 1fr);
  font: 400 12px/1.25 var(--font-app); color: var(--app-ink); text-align: left;
  user-select: none;
  /* one accent drives every blue, the way MahApps derives its brushes:
     Accent = 80 % over white (header, workspace), Accent4 = 20 % (light area) */
  --acc: var(--app-acc-blue);
  --app-on-acc: var(--app-white);
  --app-blue: color-mix(in srgb, var(--acc) 80%, var(--app-white));
  --app-light: color-mix(in srgb, var(--acc) 20%, var(--app-white));
  --app-side-on: color-mix(in srgb, var(--acc) 80%, var(--app-side));
  --app-sec: color-mix(in srgb, var(--acc) 92%, var(--app-ink));
  --app-toggle: var(--acc);
  --app-pp-head: color-mix(in srgb, var(--acc) 96%, var(--app-ink));
  --app-pp: color-mix(in srgb, var(--acc) 45%, var(--app-white));
  --app-pp-2: color-mix(in srgb, var(--acc) 33%, var(--app-white));
  transition: --acc var(--dur-long) var(--ease-in-out);
}
.app[data-accent="green"] { --acc: var(--app-acc-green); }
.app[data-accent="purple"] { --acc: var(--app-acc-purple); }
.app[data-accent="pink"] { --acc: var(--app-acc-pink); }
.app[data-accent="orange"] { --acc: var(--app-acc-orange); }
.app[data-accent="red"] { --acc: var(--app-acc-red); }
.app[data-accent="lime"] { --acc: var(--app-acc-lime); }
.app[data-accent="emerald"] { --acc: var(--app-acc-emerald); }
.app[data-accent="cyan"] { --acc: var(--app-acc-cyan); }
.app[data-accent="cobalt"] { --acc: var(--app-acc-cobalt); }
.app[data-accent="indigo"] { --acc: var(--app-acc-indigo); }
.app[data-accent="violet"] { --acc: var(--app-acc-violet); }
.app[data-accent="magenta"] { --acc: var(--app-acc-magenta); }
.app[data-accent="amber"] { --acc: var(--app-acc-amber); }
.app[data-accent="yellow"] { --acc: var(--app-acc-yellow); }
.app[data-accent="olive"] { --acc: var(--app-acc-olive); }
.app[data-accent="yellow"] { --app-on-acc: var(--app-ink); }   /* MahApps IdealForeground: Black */
html:not(.js) .app { position: relative; }
:where(.app) p, :where(.app) ul { margin: 0; padding: 0; list-style: none; }
:where(.app) i, :where(.app) em { font-style: normal; }
.app .ai { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.app .x { flex: none; margin-left: auto; color: var(--app-x); font-size: 24px; font-weight: 600; line-height: 1; }

/* title strip: brand + the app's own chips */
.ap__head { position: relative; z-index: 6; grid-area: head; display: flex; align-items: stretch; background: var(--app-blue); color: var(--app-on-acc); }
.ap__brand { align-self: center; padding-left: 10px; font-size: 19px; font-weight: 700; }
.ap__chips { display: flex; margin-left: auto; }
.app .c { display: flex; align-items: center; gap: 6px; padding: 0 10px; color: var(--app-white); font-size: 10.5px; font-weight: 700; white-space: nowrap; }
.app .c .ai { width: 15px; height: 15px; }
/* "Tema Seç": a ComboBox of 20 px accent circles */
.tm { position: relative; display: flex; }
.app .c--dot { gap: 8px; height: 100%; padding: 0 8px; border: 0; background: var(--app-light); color: var(--app-ink); font: 700 9px/1 var(--font-app); cursor: pointer; transition: filter var(--dur-short) var(--ease-in-out); }
.app .c--dot:hover, .app .c--dot.is-hot { filter: brightness(.94); }
.app .c--dot:focus-visible { outline: 3px solid var(--color-focus); outline-offset: -3px; }
.app .c--dot i { width: 20px; height: 20px; border-radius: 50%; background: var(--acc); }
.tm__list {
  position: absolute; top: 100%; left: 0; display: grid; gap: 2px; width: 100%; padding: 4px 0;
  border: 1px solid var(--app-line-2); background: var(--app-white); box-shadow: var(--app-shadow-lg);
  transform-origin: top; animation: tm-open var(--dur-short) var(--ease-in-out);
}
.tm__list[hidden] { display: none; }
@keyframes tm-open { from { opacity: 0; transform: scaleY(.6); } }
.tm__list button { display: grid; place-items: center; height: 24px; padding: 0; border: 0; background: none; cursor: pointer; transition: background-color var(--dur-micro) var(--ease-in-out); }
.tm__list button::before { content: ""; width: 20px; height: 20px; border-radius: 50%; background: var(--sw); }
.tm__list button:hover, .tm__list button.is-hot { background: var(--app-line); }
.tm__list button[aria-pressed="true"] { background: var(--app-light); }
.tm__list button:focus-visible { outline: 2px solid var(--color-focus); outline-offset: -2px; }
.app .c--kalan { background: var(--app-kalan); }
.app .c--kalan b { font-size: 16px; }
.app .c--wa { background: var(--app-wa); color: var(--app-ink); }
.app .c--uz { background: var(--app-uz); }
.app .c--tel { background: var(--app-tel); }
.app .c--satin { padding: 0 16px; background: var(--app-satin); }

/* sidebar: the real menu; captured modules are live buttons */
.ap__side { grid-area: side; display: flex; flex-direction: column; padding: 8px 0; background: var(--app-side); }
.sb__i {
  display: flex; align-items: center; gap: 14px; height: 36px; flex: none; padding: 0 0 0 18px;
  border: 0; background: none; color: var(--app-white);
  font: 600 12.5px/1 var(--font-app); text-align: left; white-space: nowrap;
}
.sb__i .ai { width: 18px; height: 18px; }
button.sb__i { position: relative; cursor: pointer; transition: background-color var(--dur-short) var(--ease-in-out); }
button.sb__i:hover, button.sb__i.is-hover { background: var(--app-side-hover); }
button.sb__i[aria-pressed="true"] { background: var(--app-side-on); }
button.sb__i:focus-visible { outline: 3px solid var(--color-label); outline-offset: -3px; }
/* with JS the selected-item block slides between menu rows */
.ap__side.has-ind { position: relative; }
.sb__ind { position: absolute; left: 0; right: 0; top: 0; height: 36px; background: var(--app-side-on); transform: translateY(var(--y, 0px)); transition: transform var(--dur-med) var(--ease-in-out); }
.has-ind button.sb__i[aria-pressed="true"] { background: transparent; }
button.sb__i[aria-pressed="true"] { color: var(--app-on-acc); }
.sb__i--off { cursor: default; }
.sb__gap { flex: 1; }

.ap__work { grid-area: work; display: grid; min-height: 0; overflow: hidden; background: var(--app-light); }
.ap__panel { grid-area: 1 / 1; display: flex; flex-direction: column; min-height: 0; }
.ap__panel[hidden] { display: none; }
.ap__light { flex: 1; min-height: 0; background: var(--app-light); }
.ap__blue { position: relative; flex: 1; min-height: 0; display: flex; align-items: flex-start; gap: 6px; padding: 6px; background: var(--app-blue); }
.ap__panel.is-out { pointer-events: none; }
@media (prefers-reduced-motion: no-preference) {
  /* view change: the old view fades under the new one, contents settle in */
  .ap__panel.is-in { z-index: 1; animation: app-fade var(--dur-med) var(--ease-in-out) both; }
  .ap__panel.is-out { z-index: 0; animation: app-fade var(--dur-med) var(--ease-in-out) reverse both; }
  .ap__light > *, .ap__blue > * { animation: app-in var(--dur-med) var(--ease-in-out) both; }
  .ap__blue > :nth-child(2) { animation-delay: 80ms; }
  .ap__blue > :nth-child(3) { animation-delay: 160ms; }
  .appd__item:not([hidden]) { animation: app-in var(--dur-med) var(--ease-in-out) both; }
}
@keyframes app-fade { from { opacity: 0; } }
@keyframes app-in { from { opacity: 0; transform: translateY(10px); } }

/* autoplay cursor (main.js): walks the menu like a screen recording */
.ap__cursor {
  position: absolute; left: 0; top: 0; z-index: 10; width: 20px; height: 26px; pointer-events: none;
  opacity: 0; transform: translate(var(--cx, 700px), var(--cy, 520px));
  transition: transform var(--cur-dur, 800ms) var(--ease-in-out), opacity var(--dur-med) var(--ease-in-out);
  filter: drop-shadow(0 2px 2px var(--app-shade));
}
.ap__cursor.is-on { opacity: 1; }
.ap__cursor svg { display: block; width: 100%; height: 100%; transform-origin: 2px 2px; transition: transform var(--dur-micro) var(--ease-in-out); }
.ap__cursor path { fill: var(--app-white); stroke: var(--app-ink); stroke-width: 1.3; stroke-linejoin: round; }
.ap__cursor.is-down svg { transform: scale(.84); }
.ap__cursor::before { content: ""; position: absolute; left: -15px; top: -15px; width: 32px; height: 32px; border-radius: 50%; background: var(--app-toggle); opacity: 0; }
.ap__cursor.is-down::before { animation: app-ripple 520ms var(--ease-out); }
@keyframes app-ripple { from { opacity: .5; transform: scale(.2); } to { opacity: 0; transform: scale(1.3); } }
.app .is-hot { filter: brightness(.92); }
.app .tb.is-hot { background: var(--app-light); filter: none; }
.app .tb, .app .el__ekle, .app .ar__logo, .app .o, .app .rf2__item, .app .pp__fmt i { transition: filter var(--dur-short) var(--ease-in-out), background-color var(--dur-short) var(--ease-in-out); }

/* toolbar */
.ap__tools { display: flex; align-items: center; flex: none; height: 52px; padding: 0 6px; background: var(--app-white); }
.app .tb { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; height: 100%; padding: 0 11px; font-size: 9.5px; font-weight: 700; white-space: nowrap; }
.app .tb .ai { width: 22px; height: 22px; }
.app .tb--big b { font-size: 12.5px; }
.tb__sep { width: 1px; height: 36px; background: var(--app-line); }
.tb__push { flex: 1; }
.tb__gap { width: 52px; }
.app .tb--qty { flex-direction: row; gap: 8px; padding: 0 6px 0 2px; }
.app .tb--qty i { color: var(--app-muted); font-size: 24px; font-weight: 300; line-height: 1; }
.app .tb__n { margin-left: 6px; font-size: 14px; }
.app .tb--lang { flex-direction: row; gap: 8px; padding: 0 12px; font-size: 12px; font-weight: 600; }
.app .tb--lang .flag { width: 30px; height: 20px; }
.app .tb--lang i { margin-left: 10px; font-size: 10px; }

/* Reçete: dark sub-bar + section bar */
.ap__sub { display: flex; align-items: center; gap: 4px; flex: none; height: 36px; padding: 0 6px; background: var(--app-sub); color: var(--app-white); font-size: 9.5px; font-weight: 700; }
.ap__sub > span { display: flex; align-items: center; gap: 6px; height: 22px; padding: 0 6px; white-space: nowrap; }
.ap__sub .is-on { margin-left: 8px; border-radius: 2px; background: var(--app-white); color: var(--app-side-on); }
.ap__sub .is-on ~ span:not(.ap__tesis) { background: var(--app-sub-2); }
.ap__sub .ap__tesis { margin-left: auto; }
.app .ck { position: relative; display: block; width: 16px; height: 16px; flex: none; border-radius: 2px; background: var(--app-white); }
.app .ck::after { content: ""; position: absolute; left: 5px; top: 1px; width: 5px; height: 10px; border: solid var(--app-side-on); border-width: 0 2.5px 2.5px 0; transform: rotate(45deg); }
.app .ck--w { width: 24px; height: 24px; }
.app .ck--w::after { left: 8px; top: 3px; width: 6px; height: 12px; }
.app .n1 { display: grid; place-items: center; width: 16px; height: 18px; background: var(--app-sub-2); }
.app .ex { display: grid; place-items: center; width: 14px; height: 14px; border-radius: 50%; background: var(--app-white); color: var(--app-sub); font-size: 10px; }
.ap__sec { display: flex; align-items: center; gap: 8px; flex: none; height: 37px; margin-top: 6px; padding: 0 6px; background: var(--app-sec); color: var(--app-on-acc); font-size: 13px; font-weight: 700; }
.app .up { display: grid; place-items: center; width: 20px; height: 20px; border: 2px solid; border-radius: 50%; font-size: 11px; line-height: 1; }
.app .pr { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 4px; background: var(--app-white); color: var(--app-sub); }

.rc { display: flex; align-items: flex-start; gap: 5px; padding: 8px 2px; }
.rc__side { display: flex; flex-direction: column; gap: 4px; width: 106px; margin-top: 54px; }
.app .rf { position: relative; display: flex; flex-direction: column; justify-content: center; height: 32px; padding: 0 22px 0 6px; border: 1px solid var(--app-line); border-radius: 2px; background: var(--app-white); font-size: 12px; text-align: center; }
.app .rf small { font-size: 9.5px; opacity: .8; }
.app .rf .x { position: absolute; right: 5px; top: 7px; color: var(--app-muted); font-size: 18px; }
.app .rf .pm { position: absolute; right: 3px; top: 6px; color: var(--app-muted); font-size: 17px; letter-spacing: 1px; }
.app .rf--btn { flex-direction: row; align-items: center; height: 36px; padding: 0; border: 0; background: none; gap: 4px; }
.app .rf--btn span { display: flex; flex-direction: column; justify-content: center; flex: 1; height: 100%; border: 1px solid var(--app-line); background: var(--app-white); }
.app .rf--btn b { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 3px; background: var(--app-tel); color: var(--app-white); font-size: 26px; font-weight: 300; }
.app .rf--go { align-items: center; height: 24px; padding: 0; border: 0; background: var(--app-tel); color: var(--app-white); }
.app .rf--go .ai { width: 16px; height: 16px; }
.rc__lbl { display: grid; gap: 4px; width: 320px; padding: 2px; border: 1px solid var(--app-orange-2); border-radius: 3px; background: var(--app-orange); }
.app .o { display: flex; align-items: center; height: 26px; padding: 0 6px 0 4px; border: 1px solid var(--app-orange-2); font-size: 12.5px; }
.app .o .x, .app .y .x { font-size: 22px; }
.app .o--split { gap: 4px; padding: 0; border: 0; }
.app .o--split > span { display: flex; align-items: center; gap: 6px; height: 100%; padding: 0 6px; border: 1px solid var(--app-orange-2); }
.app .o--split > span:first-child { flex: 1; }

/* Elden */
.el { padding: 8px; }
.el__card { display: grid; gap: 6px; padding: 10px 10px 8px; border-radius: 6px; background: var(--app-white); }
.app .in { display: flex; align-items: center; height: 36px; padding: 0 8px; border: 1px solid var(--app-line-2); color: var(--app-muted); font-size: 19px; }
.el__row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 26px; align-items: center; gap: 4px; }
.el__scan { color: var(--app-scan); }
.el__ctl { display: flex; align-items: flex-end; gap: 4px; margin-top: 16px; }
.app .cn { position: relative; display: flex; align-items: center; justify-content: space-between; width: 76px; height: 30px; padding: 0 4px 0 10px; border: 1px solid var(--app-line-2); font-size: 16px; }
.app .cn small { position: absolute; left: 22px; bottom: calc(100% + 5px); font-size: 9.5px; font-weight: 700; }
.app .cn i { color: var(--app-muted); font-size: 18px; letter-spacing: 3px; }
.app .cn--sel { width: 100px; padding-right: 8px; }
.app .cn--sel i { color: var(--app-ink); font-size: 10px; }
.el__ctl em { align-self: center; color: var(--app-muted); font-size: 20px; }
.el__ekle { display: grid; place-items: center; width: 78px; height: 46px; margin-left: 6px; border-radius: 2px; background: var(--app-green); color: var(--app-white); font-size: 11px; }
.el__mini { display: grid; gap: 4px; margin-left: 8px; }
.el__mini b { display: grid; place-items: center; width: 44px; height: 20px; border-radius: 2px; background: var(--app-green); color: var(--app-white); font-size: 8.5px; }

/* saved-labels list (Aromaterapi, Kargo) */
.app .kl { display: flex; flex-direction: column; align-self: stretch; width: 214px; flex: none; overflow: hidden; border-radius: 8px; background: var(--app-white); box-shadow: var(--app-shadow-lg); }
.kl__h { display: grid; place-items: center; height: 22px; background: var(--app-pp-head); color: var(--app-on-acc); font-size: 11.5px; }
.kl__search { display: flex; align-items: center; gap: 4px; margin: 4px 4px 8px; }
.kl__search span { flex: 1; display: flex; align-items: center; height: 26px; padding: 0 6px; border-bottom: 1px solid var(--app-ink); color: var(--app-muted); font-size: 12px; }
.app .kl__search .x { margin: 0 8px 0 -28px; color: var(--app-muted); font-size: 18px; }
.kl__search b { display: grid; place-items: center; width: 28px; height: 26px; border: 1px solid var(--app-ink); border-radius: 3px; font-size: 13px; }
.kl li { display: flex; align-items: center; gap: 5px; height: 25px; padding: 0 6px; font-size: 12px; }
.kl__del { width: 11px; height: 13px; margin-left: auto; border-radius: 1px 1px 3px 3px; background: var(--app-ink); box-shadow: 0 -4px 0 -2px var(--app-ink); }
.kl__go { position: relative; width: 15px; height: 15px; border-radius: 50%; background: var(--app-ink); }
.kl__go::after { content: ""; position: absolute; left: 6px; top: 4px; border-left: 5px solid var(--app-white); border-block: 3.5px solid transparent; }

/* yellow label fields */
.app .y { display: flex; align-items: center; padding: 0 8px; border: 1px solid var(--app-yellow-2); background: var(--app-yellow); font-size: 14px; }
.app .y--cursor { border-color: var(--app-ink); }
.app .y--cursor::before { content: ""; width: 1px; height: 18px; background: var(--app-ink); }
@media (prefers-reduced-motion: no-preference) { .app .y--cursor::before { animation: caret 1.06s steps(1) infinite; } }
@keyframes caret { 50% { opacity: 0; } }

.ar__lbl { display: grid; grid-template-columns: 140px 252px; grid-template-rows: 26px 26px 26px 44px 44px; gap: 2px; padding: 2px; flex: none; background: var(--app-yellow); box-shadow: var(--app-shadow-lg); }
.ar__logo { grid-row: 1 / 5; display: grid; place-items: center; border: 2px dashed var(--app-line-2); background: var(--app-white); color: var(--app-muted); font-size: 18px; font-weight: 700; letter-spacing: .2em; }
.ar__wide { grid-column: 1 / -1; }

/* print-options panel */
.app .pp { flex: none; width: 270px; overflow: hidden; padding-bottom: 10px; border-radius: 6px; background: var(--app-pp); box-shadow: var(--app-shadow-lg); font-size: 11.5px; }
.pp__h { display: grid; place-items: center; height: 22px; background: var(--app-pp-head); color: var(--app-on-acc); }
.pp__pill { display: flex; align-items: center; height: 30px; margin: 10px 8px 6px; padding: 0 8px; border-radius: 8px; background: var(--app-pill); color: var(--app-white); font-size: 15px; }
.pp__row { display: grid; grid-template-columns: 100px auto; align-items: center; justify-items: start; height: 32px; margin: 0 8px; }
.pp__lbl { margin: 0 8px 4px; }
.pp__font { display: flex; gap: 4px; margin: 0 8px; }
.pp__sel { display: flex; align-items: center; justify-content: space-between; flex: 1; height: 32px; padding: 0 8px; border-radius: 6px; background: var(--app-pp-2); font-size: 12px; }
.pp__sel i { font-size: 9px; }
.pp__size { display: flex; align-items: center; gap: 10px; padding: 0 6px; border-radius: 6px; background: var(--app-pp-2); font-size: 14px; font-weight: 700; }
.pp__size i { color: var(--app-sub-2); font-size: 22px; font-weight: 300; }
.pp__fmt { display: flex; gap: 6px; margin: 8px 8px 4px; }
.pp__al, .pp__st { display: flex; align-items: center; justify-content: space-around; flex: 1; height: 38px; padding: 0 4px; border-radius: 8px; background: var(--app-pp-2); }
.pp__fmt i { display: grid; place-items: center; width: 34px; height: 26px; border-radius: 2px; font-size: 18px; font-weight: 600; }
.pp__fmt i.is-on { background: var(--app-toggle); color: var(--app-white); }
.pp__st i:first-child { font-weight: 800; }
.pp__st em { font-style: italic; }
.pp__al i { font-size: 0; }
.pp__al i::before {
  content: ""; width: 16px; height: 12px;
  background:
    linear-gradient(currentColor 0 0) 0 0 / 100% 2px no-repeat,
    linear-gradient(currentColor 0 0) var(--ax, 0) 5px / 62% 2px no-repeat,
    linear-gradient(currentColor 0 0) 0 10px / 100% 2px no-repeat;
}
.pp__al i:nth-child(2) { --ax: 50%; }
.pp__al i:nth-child(3) { --ax: 100%; }
.app .tg { position: relative; display: block; width: 44px; height: 20px; border: 2px solid var(--app-pill); border-radius: 10px; }
.app .tg { transition: background-color var(--dur-short) var(--ease-in-out), border-color var(--dur-short) var(--ease-in-out); }
.app .tg::after { content: ""; position: absolute; left: 3px; top: 3px; width: 10px; height: 10px; border-radius: 50%; background: var(--app-pill); transition: transform var(--dur-short) var(--ease-in-out), background-color var(--dur-short) var(--ease-in-out); }
.app .tg.is-on { border-color: var(--app-toggle); background: var(--app-toggle); }
.app .tg.is-on::after { transform: translateX(var(--tx, 24px)); background: var(--app-white); }

/* Emanet */
.em__lbl { display: grid; gap: 2px; width: 420px; flex: none; padding: 2px; border: 1px solid var(--app-ink); background: var(--app-yellow); box-shadow: var(--app-shadow-lg); }
.em__lbl .y { position: relative; justify-content: center; padding: 0 34px; text-align: center; }
.em__lbl .x { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); }
.app .y--ph { height: 36px; border-color: var(--app-ink); color: var(--app-muted); font-size: 16px; }
.app .em__big { height: 80px; font-size: 24px; line-height: 1.3; }
.app .em__mid { height: 36px; font-size: 17px; }
.em__note { position: absolute; inset: 316px 0 auto; text-align: center; font-size: 16px; font-weight: 700; line-height: 1.6; }

/* Kargo */
.kg__lbl { display: grid; gap: 2px; width: 418px; flex: none; padding: 2px; background: var(--app-yellow); box-shadow: var(--app-shadow-lg); }
.app .kg__tall { align-items: flex-start; height: 68px; padding-top: 8px; font-size: 15px; }
.app .kg__tall .x { align-self: center; }
.app .kg__pay { gap: 22px; height: 44px; padding: 0 12px 0 0; font-size: 15px; }
.kg__pay > span:first-child { display: grid; place-items: center; flex: 1; height: 100%; border-right: 1px solid var(--app-yellow-2); }
.app .kg__pay .tg { width: 60px; height: 30px; border-radius: 15px; }
.app .kg__pay .tg { --tx: 30px; }
.app .kg__pay .tg::after { width: 16px; height: 16px; top: 5px; left: 5px; }
.app .kg__pay .ck { outline: 1px solid var(--app-ink); }
.app .kg__foot { position: relative; justify-content: center; height: 34px; font-size: 16px; }
.app .kg__foot .x { position: absolute; right: 8px; }

/* Raf */
.app .rf2 { padding: 0 6px 0 0; }
.rf2__col { display: flex; flex-direction: column; align-self: stretch; width: 226px; flex: none; background: var(--app-white); }
.rf2__tabs { display: flex; align-items: center; gap: 10px; height: 40px; padding: 0 6px; color: var(--app-muted); font-size: 24px; font-weight: 300; }
.rf2__tabs b { color: var(--app-tel); font-weight: 300; }
.rf2__list { flex: 1; min-height: 0; overflow: hidden; border-right: 14px solid var(--app-track); }
.rf2__item { display: grid; justify-items: center; gap: 12px; padding: 18px 0; }
.rf2__item.is-on { background: var(--app-pick); }
.rf2__item > b { font-size: 15px; }
.app .rs { display: grid; place-items: center; width: 162px; padding: 6px 8px; background: var(--app-yellow); font-weight: 700; text-align: center; }
.app .rs--0 { padding: 14px 10px; font-size: 13.5px; line-height: 1.35; }
.app .rs--1, .app .rs--2 { gap: 2px; }
.rs small { font-size: 8px; font-weight: 400; line-height: 1.2; }
.rs__bar { width: 100%; background: var(--app-ink); color: var(--app-white); font-size: 13px; }
.rs__bar--s { font-size: 9px; }
.rs__price, .rs__row { display: flex; align-items: center; justify-content: space-between; width: 100%; }
.rs__price s { text-decoration: none; font-size: 12px; font-weight: 400; }
.rs__price b { padding: 1px 6px; background: var(--app-ink); color: var(--app-white); font-size: 14px; }
.rs--2 strong { font-size: 14px; }
.rs__row .rs__bar { width: auto; padding: 0 6px; font-weight: 400; }
.rs__row b { font-size: 14px; }
.rf2__in { position: relative; display: flex; width: 398px; height: 32px; flex: none; margin-top: 6px; padding: 3px; background: var(--app-yellow); }
.rf2__in span { flex: 1; border: 1px solid var(--app-ink); background: var(--app-white); }
.app .rf2__in .x { position: absolute; right: 12px; top: 4px; color: var(--app-muted); font-size: 22px; }
.rf2 .pp { margin-top: 2px; margin-left: auto; }

/* Majistral */
.mj__lbl { display: flex; flex-direction: column; gap: 4px; width: 398px; flex: none; padding: 4px; background: var(--app-yellow); box-shadow: var(--app-shadow); }
.mj__top { display: flex; align-items: flex-start; gap: 4px; }
.mj__top .w:first-child { flex: 1; }
.app .w { position: relative; display: flex; align-items: center; height: 28px; padding: 0 6px; border: 1px solid var(--app-line-2); background: var(--app-white); color: var(--app-muted); font-size: 19px; }
.app .w .x { color: var(--app-muted); font-size: 22px; }
.app .w--date { width: 122px; height: 40px; padding-top: 12px; color: var(--app-ink); font-size: 17px; }
.w--date small { position: absolute; left: 4px; top: 2px; color: var(--app-muted); font-size: 9px; }
.mj__lbl hr { height: 4px; margin: 0; border: 0; background: var(--app-ink); }

/* status bar */
.ap__status { grid-area: stat; display: flex; align-items: center; gap: 8px; padding: 0 10px; background: var(--app-status); color: var(--app-white); font-size: 10px; }
.st__net { width: 12px; height: 10px; border: 1.5px solid var(--app-line-2); border-top-width: 4px; }
.st__cloud { width: 14px; height: 9px; border-radius: 6px 6px 3px 3px; background: var(--app-scan); }
.st__pr .ai { display: block; width: 14px; height: 14px; }
.st__dot { width: 9px; height: 9px; border-radius: 50%; background: var(--app-red); }
.st__qr { width: 30px; height: 22px; background: var(--app-line) repeating-conic-gradient(var(--app-ink) 0 25%, transparent 0 50%) center / 6px 6px; background-clip: content-box; padding: 4px 8px; }
.st__sh { width: 12px; height: 14px; background: var(--app-tel); clip-path: polygon(50% 0, 100% 18%, 92% 70%, 50% 100%, 8% 70%, 0 18%); }

/* readable copy beside the window */
.appd { margin-top: var(--space-lg); }
.appd__item h3 { font-family: var(--font-display); font-stretch: 75%; font-weight: 800; font-size: var(--text-xl); line-height: 1; }
.appd__item p { margin-top: var(--space-xs); max-width: 40rem; color: var(--color-ink-2); }
html:not(.js) .appd__item[hidden] { display: block; margin-top: var(--space-md); }
.appm { display: none; }
.appx__more { display: grid; gap: var(--space-md) var(--space-lg); margin: var(--space-xl) 0 0; padding-top: var(--space-md); border-top: var(--rule-hair) solid var(--color-rule); }
.appx__more dt { font-family: var(--font-mono); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .04em; color: var(--color-muted); }
.appx__more dd { margin: var(--space-3xs) 0 0; color: var(--color-ink-2); font-size: var(--text-sm); }
@media (min-width: 600px) { .appx__more { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .appx__more { margin-top: var(--space-lg); padding-top: 0; border-top: 0; } }
@media (max-width: 899.98px) {
  html.js .appm {
    order: -1; display: flex; gap: var(--space-2xs); margin: 0 calc(var(--gutter) * -1) var(--space-sm);
    padding: 0 var(--gutter) var(--space-3xs); overflow-x: auto; scrollbar-width: none;
  }
  .modules__head { order: -2; }
  .appm::-webkit-scrollbar { display: none; }
  .appm button {
    flex: none; padding: var(--space-2xs) var(--space-sm); border: var(--rule-hair) solid var(--color-rule); border-radius: 999px;
    background: var(--color-paper); color: var(--color-ink); font: 600 var(--text-sm)/1.2 var(--font-body); white-space: nowrap; cursor: pointer;
  }
  .appm button[aria-pressed="true"] { border-color: var(--app-side-on); background: var(--app-side-on); color: var(--app-white); }
  .appm button:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
}

/* ---------- 6b · Cross-sell: EczaneVPN + MobilTarif ------------------- */
.xs { padding-block: var(--space-3xl); border-top: var(--rule-hair) solid var(--color-rule); }
.xs__head { display: grid; gap: var(--space-sm) var(--space-3xl); margin-bottom: var(--space-xl); }
.xs__head p { color: var(--color-ink-2); max-width: 36rem; }
@media (min-width: 1024px) { .xs__head { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: end; } }
.xs__grid { display: grid; gap: var(--space-lg); }
@media (min-width: 900px) { .xs__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.xs-card {
  --brand: var(--color-evpn); --tape: var(--color-evpn-lime); --tape-ink: var(--color-navy-deep);
  display: grid; grid-template-rows: auto 1fr; overflow: hidden;
  background: var(--color-paper); border: var(--rule-hair) solid var(--color-rule);
  border-radius: var(--radius-cut-lg); box-shadow: var(--shadow-pill);
  transition: transform var(--dur-short) var(--ease-out);
}
.xs-card--mt { --brand: var(--color-mt); --tape: var(--color-mt-deep); --tape-ink: var(--color-mt-ink); }
.xs-card:hover { transform: translateY(-4px); }
.xs-card__media { position: relative; aspect-ratio: 16 / 9; overflow: hidden; }
.xs-card__media img { width: 100%; height: 100%; object-fit: cover; }
.xs-card__tape {
  position: absolute; left: -10%; right: -10%; bottom: 8%;
  padding-block: var(--space-2xs); overflow: hidden;
  background: var(--tape); color: var(--tape-ink);
  transform: rotate(-3deg); box-shadow: var(--shadow-label);
  font-family: var(--font-display); font-stretch: 75%; font-weight: 800; font-size: var(--text-sm); text-transform: uppercase; white-space: nowrap;
}
.xs-card__tape span { display: inline-block; padding-left: 4%; transition: transform 1.2s var(--ease-out); }
.xs-card:hover .xs-card__tape span { transform: translateX(-12%); }
.xs-card__body { display: grid; align-content: start; gap: var(--space-sm); padding: var(--space-lg); }
.xs-card__body h3 { font-family: var(--font-display); font-stretch: 75%; font-weight: 800; font-size: var(--text-xl); line-height: 1; color: var(--brand); }
.xs-card__lead { font-weight: 600; font-size: var(--text-lg); line-height: 1.3; color: var(--color-ink); }
.xs-card__facts { display: grid; gap: var(--space-2xs); color: var(--color-ink-2); font-size: var(--text-sm); }
.xs-card__facts li { display: grid; grid-template-columns: .6rem minmax(0, 1fr); gap: var(--space-xs); }
.xs-card__facts li::before { content: ""; width: .5rem; height: .5rem; margin-top: .5em; background: var(--brand); border-radius: 1px; }
.xs-card__cta { justify-self: start; margin-top: var(--space-xs); }

/* ---------- 6 · Hardware · annotated plate --------------------------- */
.hardware { padding-block: var(--space-2xl) var(--space-3xl); border-top: var(--rule-hair) solid var(--color-rule); }
.hardware__grid { display: grid; gap: var(--space-xl); align-items: center; }
.plate { position: relative; }
.plate img { width: 100%; aspect-ratio: 5 / 4; object-fit: cover; border-radius: var(--radius-cut-lg); }
.plate__lines { position: absolute; inset: 0; width: 100%; height: 100%; fill: none; stroke: var(--color-ink); stroke-width: 2.5; stroke-dasharray: 1; pointer-events: none; }
.plate__pin, .plate__tag { position: absolute; left: var(--x); top: var(--y); }
.plate__pin { width: 14px; aspect-ratio: 1; margin: -7px; border-radius: 50%; background: var(--color-paper); box-shadow: 0 0 0 2px var(--color-ink); }
.plate__pin::after { content: ""; position: absolute; inset: -7px; border: 2px solid var(--color-ink); border-radius: 50%; opacity: 0; transform: scale(.4); transition: transform var(--dur-short) var(--ease-out), opacity var(--dur-short) var(--ease-out); }
.plate__pin.is-hot::after { opacity: 1; transform: none; }
.plate__tag { background: var(--color-paper); padding: .15em .5em; border-radius: var(--radius-cut); text-transform: uppercase; white-space: nowrap; }
html.js .plate:not(.is-in) path { stroke-dashoffset: 1; }
html.js .plate path { transition: stroke-dashoffset 600ms var(--ease-out) 200ms; }
html.js .plate:not(.is-in) :is(.plate__pin, .plate__tag) { opacity: 0; }
html.js .plate.is-in .plate__pin { animation: chip-pop 420ms var(--ease-out) both; }
html.js .plate .plate__tag { transition: opacity var(--dur-med) var(--ease-out) 700ms; }
.hardware__lead { margin-top: var(--space-sm); color: var(--color-ink-2); }
.hardware__lead strong { color: var(--color-ink); font-weight: 600; }
.specs { margin-top: var(--space-lg); }
.specs > div { display: grid; grid-template-columns: 7rem minmax(0, 1fr); gap: var(--space-sm); padding-block: var(--space-xs); border-top: var(--rule-hair) solid var(--color-rule); outline-offset: -2px; }
.specs > div:last-child { border-bottom: var(--rule-hair) solid var(--color-rule); }
.specs dt { font-weight: 600; font-size: var(--text-sm); }
.specs dt .mono { color: var(--color-muted); margin-right: var(--space-3xs); }
.specs dd { font-size: var(--text-sm); color: var(--color-ink-2); }
.hardware__actions { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin-top: var(--space-lg); }
@media (min-width: 1024px) { .hardware__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-3xl); } }

/* ---------- 7 · FAQ as a printout -------------------------------------- */
.faq { padding-block: var(--space-3xl); background: var(--color-paper-2); }
.faq__grid { display: grid; gap: var(--space-xl); }
.faq__head p { margin-top: var(--space-sm); color: var(--color-ink-2); }
.faq__contact { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin-top: var(--space-md); }
.printout {
  --zz: 10px;
  padding: calc(var(--zz) + var(--space-sm)) var(--space-lg);
  background: var(--color-paper);
  -webkit-mask:
    conic-gradient(from -45deg at bottom, transparent, black 1deg 89deg, transparent 90deg) bottom / var(--zz) 51% repeat-x,
    conic-gradient(from 135deg at top, transparent, black 1deg 89deg, transparent 90deg) top / var(--zz) 51% repeat-x;
  mask:
    conic-gradient(from -45deg at bottom, transparent, black 1deg 89deg, transparent 90deg) bottom / var(--zz) 51% repeat-x,
    conic-gradient(from 135deg at top, transparent, black 1deg 89deg, transparent 90deg) top / var(--zz) 51% repeat-x;
}
.faq__grid > .printout { filter: drop-shadow(var(--shadow-receipt)); }
.faq details + details { border-top: var(--rule-hair) dashed var(--color-rule); }
.faq summary {
  display: grid; grid-template-columns: 3rem minmax(0, max-content) minmax(1rem, 1fr) 1.25rem; align-items: center; gap: var(--space-2xs);
  padding-block: var(--space-md); cursor: pointer; list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary .mono { color: var(--color-muted); }
.faq__q { font-weight: 600; }
.faq__lead { border-bottom: var(--rule-hair) dotted var(--color-muted); translate: 0 .35em; }
.faq summary:hover .faq__q { text-decoration: underline; text-underline-offset: .25em; }
.faq summary .i { transition: transform var(--dur-short) var(--ease-out); }
.faq details[open] summary .i { transform: rotate(45deg); }
.faq details[open] .faq__q { color: var(--color-navy); }
.faq__a { display: grid; gap: var(--space-xs); padding: 0 0 var(--space-md) 3.5rem; max-width: 66ch; color: var(--color-ink-2); }
.faq__a a { color: var(--color-ink); font-weight: 600; }
.faq details::details-content { block-size: 0; overflow: hidden; transition: block-size var(--dur-med) var(--ease-out), content-visibility var(--dur-med) allow-discrete; }
.faq details[open]::details-content { block-size: auto; }
html.js .faq details[open] .faq__a { animation: print .5s steps(8, end) both; }
@media (max-width: 599.98px) {
  .printout { padding-inline: var(--space-sm); }
  .faq summary { grid-template-columns: 2.5rem minmax(0, 1fr) 1.25rem; }
  .faq__lead { display: none; }
  .faq__a { padding-left: 0; }
}
@media (min-width: 1024px) {
  .faq__grid { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--space-3xl); }
  .faq__head { position: sticky; top: 7rem; align-self: start; }
}

/* ---------- 8 · Footer: farewell label + tear-off tabs ----------------- */
.footer { padding-block: var(--space-3xl) var(--space-lg); background: var(--color-navy-deep); color: var(--color-navy-ink); }
.footer__feed { width: min(100%, 42rem); }
.footer__slot { display: block; height: 8px; border-radius: 4px; background: var(--color-label-black); box-shadow: 0 1px 0 var(--color-navy-line); }
.footer__clip { clip-path: inset(0 -50vw -50vh -50vw); margin-inline: 4%; }
.footer__label { rotate: -1deg; }
.footer__label .footer__statement { margin: 0; font-size: 7.2cqi; line-height: 1; letter-spacing: -.01em; font-weight: 800; }
html.js .footer__label { translate: 0 -104%; }
html.js .footer__label.is-printed { animation: farewell 1.3s steps(22, end) forwards; }
@keyframes farewell { to { translate: 0 0; } }
.tabs { display: flex; flex-wrap: wrap; margin-top: var(--space-xl); border-top: 1.5px dashed var(--color-navy-line); }
.tabs li { display: flex; }
.tab {
  display: inline-flex; align-items: center; gap: var(--space-2xs);
  padding: var(--space-sm) var(--space-md); white-space: nowrap;
  border-right: 1.5px dashed var(--color-navy-line); color: var(--color-navy-ink);
  font: 600 var(--text-md)/1 var(--font-body); text-decoration: none;
  transition: translate var(--dur-short) var(--ease-out), rotate var(--dur-short) var(--ease-out), background-color var(--dur-short) var(--ease-out);
}
.tab:hover { translate: 0 3px; rotate: 1deg; background: var(--color-navy); }
.tab--accent { background: var(--color-accent); color: var(--color-accent-ink); }
.tab--accent:hover { background: var(--color-accent-deep); }
@media (max-width: 599.98px) {
  .tabs { flex-direction: column; }
  .tabs li, .tab { width: 100%; }
  .tab { border-right: 0; border-bottom: 1.5px dashed var(--color-navy-line); }
}
.footer__colophon {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm) var(--space-lg);
  margin-top: var(--space-2xl); padding-top: var(--space-md);
  border-top: var(--rule-hair) solid var(--color-navy-rule);
  font-size: var(--text-sm);
}
.footer__pages { display: flex; flex-wrap: wrap; gap: 0 var(--space-md); margin: 0; padding: 0; list-style: none; font-size: var(--text-sm); }
.footer__pages a { display: inline-flex; align-items: center; min-height: 2.75rem; color: var(--color-navy-ink); white-space: nowrap; }
.footer__logo { display: block; height: 1.6rem; width: auto; aspect-ratio: 494 / 121.5; color: var(--color-navy-ink); }
.footer__colophon a { text-decoration: none; }
.footer__colophon address a { display: inline-flex; align-items: center; min-height: 2.75rem; }
.footer__colophon a:hover { text-decoration: underline; }
.footer__social { display: flex; gap: var(--space-3xs); }
.footer__social a { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: var(--radius-sm); }
.footer__social a:hover { background: var(--color-navy); text-decoration: none; }
.footer__copy { margin-left: auto; opacity: .75; }
@media (max-width: 699.98px) { .footer__copy { margin-left: 0; width: 100%; } }

@media (prefers-reduced-motion: reduce) {
  html.js .footer__label { translate: none; }
}