/* ==========================================================================
   AY Building — system pages
   --------------------------------------------------------------------------
   Loads after styles.css, on the system pages only. One page per system:

     the hero      the system's photograph from the range, continued
     the rail      every system, drawn as the range's transom bar
     the anatomy   a schematic section; its numbered parts ARE the
                   paragraphs beside it, in the order they go on
     the figures   the manufacturer's published values, with their source
     the next      the following system, full width — the reason to go on

   The plate is always graphite: a drawing sheet, not a themed surface.
   RTL: logical properties only, as everywhere else in this project.
   ========================================================================== */

:root { --rail-h: 3.5rem; }

/* --- Hero ----------------------------------------------------------------- */
.sys-hero {
  position: relative; isolation: isolate; overflow: hidden;
  min-block-size: max(31rem, 78svh);
  display: grid; align-items: end; grid-template-columns: minmax(0, 1fr);
  background: var(--graphite); color: #fff;
}
.sys-hero__img {
  position: absolute; inset: 0; z-index: -2;
  inline-size: 100%; block-size: 100%; max-width: none; object-fit: cover;
  animation: hero-settle 1.6s cubic-bezier(.2,.6,.2,1) both;
}
@keyframes hero-settle { from { transform: scale(1.05); } to { transform: none; } }
@media (prefers-reduced-motion: reduce) { .sys-hero__img { animation: none; } }

/* Worked against the brightest pixel behind each line of text, not the
   average: small type needs the scrim at .64 or more wherever it sits over a
   sky, the title .40. The far side of the photograph is left bright. */
.sys-hero__shade {
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(to top, rgb(11 12 14 / .94) 0%, rgb(11 12 14 / .62) 42%, rgb(11 12 14 / .3) 78%, rgb(11 12 14 / .2) 100%),
    linear-gradient(to right, rgb(11 12 14 / .78) 0%, rgb(11 12 14 / .55) 38%, rgb(11 12 14 / 0) 74%);
}
[dir="rtl"] .sys-hero__shade {
  background:
    linear-gradient(to top, rgb(11 12 14 / .94) 0%, rgb(11 12 14 / .62) 42%, rgb(11 12 14 / .3) 78%, rgb(11 12 14 / .2) 100%),
    linear-gradient(to left, rgb(11 12 14 / .78) 0%, rgb(11 12 14 / .55) 38%, rgb(11 12 14 / 0) 74%);
}
/* On a phone the words cross the whole picture. */
@media (max-width: 760px) {
  .sys-hero__shade, [dir="rtl"] .sys-hero__shade {
    background: linear-gradient(to top, rgb(11 12 14 / .93) 0%, rgb(11 12 14 / .74) 55%, rgb(11 12 14 / .52) 100%);
  }
}
/* No photograph (plumbing): the drawing sheet's grid instead. */
.sys-hero--drawn .sys-hero__shade {
  background:
    linear-gradient(rgb(255 255 255 / .045) 1px, transparent 1px) 0 0 / 2.5rem 2.5rem,
    linear-gradient(90deg, rgb(255 255 255 / .045) 1px, transparent 1px) 0 0 / 2.5rem 2.5rem,
    radial-gradient(ellipse at 70% 30%, #23272C, var(--graphite) 70%);
}

.sys-hero__in { padding-block: calc(var(--nav-h) + 3rem) clamp(2.5rem, 6vw, 4.25rem); }

/* The drawing in place of a photograph: large, quiet, on the far side. */
.sys-hero__art {
  position: absolute; z-index: -1; pointer-events: none;
  inset-block: calc(var(--nav-h) + 1.5rem) 1.5rem;
  inset-inline-end: max(2vw, calc((100vw - var(--wrap)) / 2 - 2rem));
  inline-size: min(54vw, 46rem);
  display: grid; place-items: center; opacity: .5;
}
.sys-hero__art .pl { inline-size: 100%; max-block-size: 100%; }
/* Fade it out toward the side the title reads from, so a long name can run
   over it without the drawing fighting the type. */
.sys-hero__art {
  -webkit-mask-image: linear-gradient(to left, #000 45%, transparent 92%);
          mask-image: linear-gradient(to left, #000 45%, transparent 92%);
}
[dir="rtl"] .sys-hero__art {
  -webkit-mask-image: linear-gradient(to right, #000 45%, transparent 92%);
          mask-image: linear-gradient(to right, #000 45%, transparent 92%);
}
.sys-hero__art .pl-call, .sys-hero__art .pl-side, .sys-hero__art .pl-dim { display: none; }
@media (max-width: 900px) { .sys-hero__art { inline-size: 92vw; inset-inline-end: 4vw; opacity: .22; } }

.crumbs ol {
  display: flex; flex-wrap: wrap; gap: .35rem .5rem;
  list-style: none; margin: 0 0 clamp(1.5rem, 3vw, 2.25rem); padding: 0;
  font-size: var(--step--1); color: rgb(255 255 255 / .78);
}
.crumbs li { display: flex; gap: .5rem; align-items: baseline; }
.crumbs li + li::before { content: "/"; color: rgb(255 255 255 / .42); }
.crumbs a { color: rgb(255 255 255 / .86); text-decoration: none; }
.crumbs a:hover { color: #fff; text-decoration: underline; text-underline-offset: .2em; }
.crumbs [aria-current] { color: #fff; }

.sys-hero__family {
  display: flex; align-items: center; gap: .8rem;
  font-size: var(--step--1); font-weight: 500; letter-spacing: .14em; text-transform: uppercase;
  color: rgb(255 255 255 / .82); margin: 0 0 1rem;
}
.sys-hero__family::before { content: ""; flex: none; inline-size: 2rem; block-size: 2px; background: var(--brand); }
[lang|="ar"] .sys-hero__family { letter-spacing: 0; text-transform: none; font-size: var(--step-0); }

.sys-hero__name {
  font-family: var(--font-display); font-stretch: var(--display-stretch);
  font-weight: 700; font-size: clamp(2.7rem, 1.3rem + 5.6vw, 6.6rem);
  line-height: .95; letter-spacing: -0.032em;
  margin: 0; max-inline-size: 13ch; text-wrap: balance;
}
[lang|="ar"] .sys-hero__name {
  letter-spacing: 0; line-height: 1.28; max-inline-size: 16ch;
  font-size: clamp(2.3rem, 1.2rem + 4.6vw, 5.4rem);
}
.sys-hero__line {
  font-size: var(--step-1); line-height: 1.55; color: rgb(255 255 255 / .88);
  max-inline-size: 42ch; margin-block-start: 1.25rem;
}
[lang|="ar"] .sys-hero__line { line-height: 1.85; }
.sys-hero__actions { display: flex; flex-wrap: wrap; gap: .75rem 1rem; margin-block-start: clamp(1.6rem, 3.5vw, 2.4rem); }
.btn__arrow--down { display: inline-block; }
[dir="rtl"] .btn__arrow--down { transform: none; }
.btn--glass:hover .btn__arrow--down,
[dir="rtl"] .btn--glass:hover .btn__arrow--down { transform: translateY(3px); }

/* Sentinel: the header stays transparent until the hero's foot reaches it. */
.sys-hero__end {
  position: absolute; inset-inline: 0; inset-block-end: var(--nav-h);
  block-size: 1px; pointer-events: none;
}

/* --- The rail --------------------------------------------------------------
   The range's transom bar, standing still: every system a bay, the open one
   lit along its head. It rides under the header once the hero has gone. */
.rail {
  position: sticky; inset-block-start: var(--nav-h); z-index: 30;
  background: #101215; border-block-end: 1px solid rgb(255 255 255 / .1);
}
.rail__list {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr);
}
.rail__link {
  position: relative; display: flex; align-items: center; block-size: 100%;
  min-block-size: var(--rail-h); padding: .55rem clamp(.55rem, 1vw, .9rem);
  border-inline-start: 1px solid rgb(255 255 255 / .12);
  color: rgb(255 255 255 / .72); text-decoration: none;
  font-family: var(--font-display); font-stretch: 104%;
  font-size: .8rem; font-weight: 600; line-height: 1.25;
  transition: color var(--hover), background var(--hover);
}
.rail li:last-child .rail__link { border-inline-end: 1px solid rgb(255 255 255 / .12); }
.rail__link::before {
  content: ""; position: absolute; inset-inline: 0; inset-block-start: 0; block-size: 3px;
  background: rgb(255 255 255 / .08);
}
.rail__link:hover { color: #fff; background: rgb(255 255 255 / .05); }
.rail__link[aria-current="page"] { color: #fff; background: rgb(255 255 255 / .06); }
.rail__link[aria-current="page"]::before { background: var(--brand); }
[lang|="ar"] .rail__link { font-family: var(--font-body); font-size: .88rem; }
.rail :focus-visible { outline-color: var(--brand); outline-offset: -3px; }

@media (max-width: 1180px) {
  .rail__list { display: flex; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity; }
  .rail__list::-webkit-scrollbar { display: none; }
  .rail__list li { flex: 0 0 auto; scroll-snap-align: start; }
  .rail__link { min-inline-size: 9.5rem; }
}

/* Anchors land below the header AND the rail. */
#anatomy, #figures, #contact { scroll-margin-block-start: calc(var(--nav-h) + var(--rail-h)); }

/* --- The anatomy --------------------------------------------------------- */
.sys-body { padding-block: clamp(3.5rem, 8vw, 6.5rem); }
.sys-body__grid {
  display: grid; gap: clamp(2.25rem, 5vw, 4.5rem);
  grid-template-columns: minmax(0, 1fr); align-items: start;
}
@media (min-width: 1000px) {
  .sys-body__grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
  .plate { position: sticky; inset-block-start: calc(var(--nav-h) + var(--rail-h) + 1.5rem); }
}

/* The plate: a drawing sheet. Gold is the hand that annotates it. */
.plate {
  margin: 0; overflow: hidden;
  background: #16181C; color: #C9CDD2;
  border: 1px solid rgb(255 255 255 / .08); border-radius: var(--radius-lg);
  box-shadow: 0 30px 60px -36px rgb(10 12 14 / .55);
}
.plate__bar, .plate__block {
  font-family: var(--font-mono); font-size: .7rem; letter-spacing: .12em; text-transform: uppercase;
  color: #9AA0A8;
}
.plate__bar {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: .3rem 1rem;
  padding: .8rem 1.1rem; border-block-end: 1px solid rgb(255 255 255 / .09);
}
.plate__bar span:first-child { white-space: nowrap; }
.plate__bar span:first-child { color: #D4A851; }
.plate__draw {
  padding: clamp(.5rem, 2vw, 1.4rem);
  background:
    linear-gradient(rgb(255 255 255 / .035) 1px, transparent 1px) 0 0 / 1.6rem 1.6rem,
    linear-gradient(90deg, rgb(255 255 255 / .035) 1px, transparent 1px) 0 0 / 1.6rem 1.6rem;
}
/* The title block of a drawing sheet. */
.plate__block {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
  border-block-start: 1px solid rgb(255 255 255 / .09);
}
.plate__block span { padding: .7rem 1.1rem; }
.plate__block span + span { border-inline-start: 1px solid rgb(255 255 255 / .09); }
.plate__block span:nth-child(2) { color: #E4E6E9; }
[lang|="ar"] .plate__bar, [lang|="ar"] .plate__block { letter-spacing: 0; text-transform: none; font-size: .78rem; }
@media (max-width: 560px) { .plate__block span:last-child { display: none; } .plate__block { grid-template-columns: auto minmax(0, 1fr); } }

/* The drawing itself. Colours are literal, never var(): the sheet is the same
   in both themes, and a transitioned var() latches in Chromium (styles.css). */
.pl { display: block; inline-size: 100%; block-size: auto; }
.pl text { direction: ltr; unicode-bidi: isolate; }
.pl-alu-ground { fill: #2C3036; }
.pl-alu-hatch  { stroke: #4C525A; stroke-width: 1.2; }
.pl-alu    { fill: url(#plAlu); stroke: #C9CDD2; stroke-width: 1.4; stroke-linejoin: round; }
.pl-web    { stroke: #6A7078; stroke-width: 1.1; }
.pl-slot   { fill: #16181C; stroke: #8A9098; stroke-width: 1; }
.pl-glass  { fill: rgb(122 168 188 / .30); stroke: #7FA3B4; stroke-width: 1.1; }
.pl-cavity { fill: rgb(122 168 188 / .07); stroke: none; }
.pl-spacer { fill: #474D55; stroke: #9AA0A8; stroke-width: 1; }
.pl-break  { fill: none; stroke: #9AA0A8; stroke-width: 1.1; stroke-dasharray: none; }
.pl-epdm   { fill: #050607; stroke: #9AA0A8; stroke-width: 1; }
.pl-iso    { fill: #5A4A2C; stroke: #A9833C; stroke-width: 1.1; }
.pl-screw  { stroke: #C9CDD2; stroke-width: 2.2; stroke-linecap: round; }
.pl-screwhead { fill: #C9CDD2; }
.pl-side   { fill: #8A9098; font-family: var(--font-mono); font-size: 12px; letter-spacing: .16em; }
/* Letter-spacing breaks Arabic joins; the labels are Arabic on the Arabic pages. */
[lang|="ar"] .pl-side { letter-spacing: 0; font-size: 13px; }
.pl-dim line { stroke: #8A9098; stroke-width: .9; }
.pl-dimtext { fill: #E4E6E9; font-family: var(--font-mono); font-size: 12px; text-anchor: middle; }
.pl-dimtext--side { text-anchor: end; }

/* Context the parts sit in: walls and slabs, the floor, water, light. */
.pl-wall       { fill: url(#plWall); stroke: #5C626A; stroke-width: 1; }
.pl-wall-ground { fill: #202429; }
.pl-wall-hatch { stroke: #353A41; stroke-width: 1.2; }
.pl-floor      { stroke: #6A7078; stroke-width: 1.4; }
.pl-bore       { fill: rgb(122 168 188 / .13); stroke: none; }
.pl-bore--ring { fill: #1D272C; stroke: #8FB0A6; stroke-width: 1; }
.pl-light      { stroke: #C39849; stroke-width: 1.2; stroke-dasharray: 5 6; opacity: .6; }
.pl-water      { stroke: #7FA3B4; stroke-width: 1.4; stroke-dasharray: 6 5; }
.pl-arrowhead  { fill: #7FA3B4; }
.pl-arrowhead--light { fill: #C39849; }

/* More materials. */
.pl-sil     { fill: #2B2418; stroke: #A9833C; stroke-width: 1; }
.pl-rod     { fill: #2E3237; stroke: #9AA0A8; stroke-width: 1; }
.pl-steel   { fill: #3B4047; stroke: #D4D7DB; stroke-width: 1.3; }
.pl-hollow  { fill: #16181C; stroke: #8A9098; stroke-width: 1; }
.pl-pvb     { fill: rgb(200 210 220 / .35); stroke: none; }
.pl-pa      { fill: #5A4A2C; stroke: #A9833C; stroke-width: 1.1; }
.pl-glassline { stroke: #7FA3B4; stroke-width: .8; opacity: .8; }
.pl-flash   { fill: none; stroke: #C9CDD2; stroke-width: 4; stroke-linejoin: round; }
.pl-block   { fill: #050607; stroke: #9AA0A8; stroke-width: 1; }
.pl-ppr     { fill: #3C4A43; stroke: #B6C9BF; stroke-width: 1.3; }
.pl-ppr2    { fill: #4A5A52; stroke: #CFDDD5; stroke-width: 1.3; }
.pl-fuse    { fill: #C39849; stroke: #E2BC6E; stroke-width: .8; opacity: .9; }
.pl-foam    { fill: url(#plFoam); stroke: #C9CDD2; stroke-width: 1.4; }
.pl-foam-ground { fill: #393322; }
.pl-foam-dot { fill: #5E5538; }
.pl-anode   { fill: #6B7076; stroke: #C9CDD2; stroke-width: 1; }
.pl-element { fill: none; stroke: #C9CDD2; stroke-width: 6; stroke-linecap: round; }
.pl-hot     { fill: none; stroke: #C9785A; stroke-width: 7; }
.pl-cold    { fill: none; stroke: #6FA0BE; stroke-width: 7; }
.pl-valve   { fill: #C9CDD2; stroke: #C9CDD2; stroke-width: 1; stroke-linejoin: round; }

.pl-call line   { stroke: #C39849; stroke-width: 1; }
.pl-call circle { fill: #16181C; stroke: #C39849; stroke-width: 1.4; }
.pl-call .pl-dot { fill: #C39849; stroke: none; }
.pl-call text   { fill: #D4A851; font-family: var(--font-mono); font-size: 14px; font-weight: 600; text-anchor: middle; }

.pl-part > *, .pl-call circle, .pl-call text, .pl-call line { transition: fill .25s ease, stroke .25s ease, stroke-width .25s ease, opacity .25s ease; }
/* A part being read lights up in gold; the others step back. */
.pl.is-reading .pl-part:not(.is-hot) { opacity: .45; }
.pl.is-reading .pl-call:not(.is-hot) { opacity: .4; }
.pl-part.is-hot > * { stroke: #E2BC6E; }
.pl-part.is-hot > :not(.pl-element):not(.pl-hot):not(.pl-cold):not(.pl-flash) { stroke-width: 2; }
.pl-part.is-hot .pl-epdm, .pl-part.is-hot .pl-block { fill: #3A2E16; }
.pl-call.is-hot circle { fill: #C39849; }
.pl-call.is-hot text { fill: #15171A; }
.pl-call.is-hot line { stroke-width: 1.6; }

/* The text column. */
.sys-text__lead {
  font-size: var(--step-1); line-height: 1.62; color: var(--ink); margin: 0;
}
[lang|="ar"] .sys-text__lead { line-height: 1.95; }
.parts {
  list-style: none; margin: clamp(1.75rem, 4vw, 2.5rem) 0 0; padding: 0;
  border-block-start: 1px solid var(--line);
}
.part {
  display: grid; grid-template-columns: 2.25rem minmax(0, 1fr); gap: 1rem;
  padding-block: 1.15rem; border-block-end: 1px solid var(--line-soft);
  cursor: default; transition: background var(--hover);
}
.part__no {
  inline-size: 2rem; block-size: 2rem; border-radius: 50%;
  display: grid; place-items: center; margin-block-start: .1rem;
  border: 1.5px solid var(--brand); color: var(--brand-text);
  font-family: var(--font-mono); font-size: .82rem; font-weight: 600;
  transition: background var(--hover), color var(--hover);
}
.part.is-hot .part__no { background: var(--brand); color: #15171A; }
.part__name {
  font-family: var(--font-display); font-stretch: 106%;
  font-size: var(--step-1); font-weight: 700; line-height: 1.2; letter-spacing: -0.01em; margin: 0;
}
[lang|="ar"] .part__name { letter-spacing: 0; line-height: 1.5; }
.part__text { color: var(--muted); line-height: 1.65; margin: .4rem 0 0; }
[lang|="ar"] .part__text { line-height: 1.95; }

.sys-text__h {
  font-family: var(--font-display); font-stretch: var(--display-stretch);
  font-size: var(--step-2); font-weight: 700; letter-spacing: -0.015em;
  margin: clamp(2.25rem, 5vw, 3rem) 0 .8rem;
}
[lang|="ar"] .sys-text__h { letter-spacing: 0; }
.sys-text__p { color: var(--muted); line-height: 1.7; margin: 0; }
[lang|="ar"] .sys-text__p { line-height: 1.95; }

/* --- Figures ----------------------------------------------------------------- */
.figs { display: grid; gap: clamp(1.25rem, 3vw, 2rem); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .figs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.figs__sheet {
  background: var(--bg); border: 1px solid var(--line-soft); border-radius: var(--radius-lg);
  padding: clamp(1.25rem, 3vw, 1.85rem);
}
.figs__sheet--wide { grid-column: 1 / -1; }
.figs .ds__sub { margin-block-start: 0; font-weight: 600; color: var(--ink); }

.tests { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; }
.test {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .2rem 1rem; align-items: baseline;
  padding: .95rem 1.05rem; border-radius: var(--radius-lg);
  background: var(--surface); border-inline-start: 3px solid var(--brand);
}
.test__key { font-weight: 600; }
.test__std { grid-row: 2; font-family: var(--font-mono); font-size: .74rem; color: var(--muted); direction: ltr; unicode-bidi: isolate; justify-self: start; }
.test__val {
  grid-row: 1 / span 2; grid-column: 2; align-self: center;
  font-family: var(--font-mono); font-size: var(--step-1); font-weight: 600; color: var(--ink);
  white-space: nowrap; direction: ltr; unicode-bidi: isolate;
}

/* --- Uses and choosing --------------------------------------------------------- */
.sys-more__grid { display: grid; gap: clamp(2rem, 5vw, 4rem); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .sys-more__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.sys-more__h {
  font-family: var(--font-display); font-stretch: var(--display-stretch);
  font-size: var(--step-2); font-weight: 700; letter-spacing: -0.015em; margin: 0 0 1.1rem;
}
[lang|="ar"] .sys-more__h { letter-spacing: 0; }
.uses { list-style: none; margin: 0; padding: 0; border-block-start: 1px solid var(--line); }
.uses__item {
  display: flex; gap: .8rem; align-items: baseline;
  padding-block: .8rem; border-block-end: 1px solid var(--line-soft);
}
.uses__item::before {
  content: ""; flex: none; inline-size: .45rem; block-size: .45rem;
  background: var(--brand); transform: translateY(-.1em);
}
.sys-more__p { color: var(--muted); line-height: 1.7; font-size: var(--step-0); margin: 0; max-inline-size: 48ch; }
[lang|="ar"] .sys-more__p { line-height: 1.95; }

/* --- The next system ----------------------------------------------------------- */
.next {
  position: relative; isolation: isolate; overflow: hidden; display: block;
  min-block-size: clamp(17rem, 34vw, 24rem);
  background: var(--graphite); color: #fff; text-decoration: none;
}
.next__img {
  position: absolute; inset: 0; z-index: -2;
  inline-size: 100%; block-size: 100%; max-width: none; object-fit: cover;
  transition: transform 1.2s cubic-bezier(.2,.6,.2,1);
}
.next:hover .next__img { transform: scale(1.04); }
@media (prefers-reduced-motion: reduce) { .next:hover .next__img { transform: none; } }
.next__shade {
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(to top, rgb(11 12 14 / .93) 0%, rgb(11 12 14 / .76) 50%, rgb(11 12 14 / .5) 100%),
    linear-gradient(to right, rgb(11 12 14 / .5) 0%, rgb(11 12 14 / 0) 70%);
}
[dir="rtl"] .next__shade {
  background:
    linear-gradient(to top, rgb(11 12 14 / .93) 0%, rgb(11 12 14 / .76) 50%, rgb(11 12 14 / .5) 100%),
    linear-gradient(to left, rgb(11 12 14 / .5) 0%, rgb(11 12 14 / 0) 70%);
}
.next--drawn .next__shade {
  background:
    linear-gradient(rgb(255 255 255 / .045) 1px, transparent 1px) 0 0 / 2.5rem 2.5rem,
    linear-gradient(90deg, rgb(255 255 255 / .045) 1px, transparent 1px) 0 0 / 2.5rem 2.5rem,
    var(--graphite);
}
.next__in {
  position: relative; display: flex; flex-direction: column; justify-content: flex-end; gap: .55rem;
  min-block-size: inherit; padding-block: clamp(2rem, 5vw, 3.25rem);
}
.next__label {
  display: flex; align-items: center; gap: .8rem;
  font-size: var(--step--1); letter-spacing: .14em; text-transform: uppercase; color: rgb(255 255 255 / .8);
}
.next__label::before { content: ""; flex: none; inline-size: 2rem; block-size: 2px; background: var(--brand); }
[lang|="ar"] .next__label { letter-spacing: 0; text-transform: none; font-size: var(--step-0); }
.next__name {
  font-family: var(--font-display); font-stretch: var(--display-stretch);
  font-weight: 700; font-size: clamp(2.1rem, 1.2rem + 3.6vw, 4.4rem);
  line-height: 1; letter-spacing: -0.028em;
}
[lang|="ar"] .next__name { letter-spacing: 0; line-height: 1.3; }
.next__name .btn__arrow { display: inline-block; color: var(--brand); transition: transform .3s cubic-bezier(.32,.72,0,1); }
.next:hover .next__name .btn__arrow { transform: translateX(.3em); }
[dir="rtl"] .next:hover .next__name .btn__arrow { transform: scaleX(-1) translateX(.3em); }
.next__line { color: rgb(255 255 255 / .84); max-inline-size: 48ch; }
.next:focus-visible { outline: 3px solid var(--brand); outline-offset: -6px; }

/* ==========================================================================
   The systems index — where "Sistemler" in the header leads
   ========================================================================== */
.idx-hero {
  position: relative; color: #fff;
  background:
    linear-gradient(rgb(255 255 255 / .04) 1px, transparent 1px) 0 0 / 2.5rem 2.5rem,
    linear-gradient(90deg, rgb(255 255 255 / .04) 1px, transparent 1px) 0 0 / 2.5rem 2.5rem,
    radial-gradient(ellipse at 75% 20%, #23272C, var(--graphite) 70%);
  background-color: var(--graphite);        /* the ground the gradients sit on */
  padding-block: calc(var(--nav-h) + clamp(2.75rem, 7vw, 5.5rem)) clamp(3rem, 7vw, 5rem);
}
.idx-hero__title {
  font-family: var(--font-display); font-stretch: var(--display-stretch);
  font-weight: 700; font-size: clamp(3rem, 1.5rem + 6.4vw, 7.5rem);
  line-height: .95; letter-spacing: -0.035em; margin: 0;
}
[lang|="ar"] .idx-hero__title { letter-spacing: 0; line-height: 1.25; }
.idx-hero__lede {
  font-size: var(--step-1); line-height: 1.6; color: rgb(255 255 255 / .84);
  max-inline-size: 54ch; margin-block-start: 1.4rem;
}
[lang|="ar"] .idx-hero__lede { line-height: 1.9; }

.idx-group + .idx-group { margin-block-start: clamp(3rem, 7vw, 4.75rem); }
.idx-group__title {
  display: flex; align-items: center; gap: .8rem; margin: 0 0 1.4rem;
  font-size: var(--step--1); font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: var(--muted);
}
.idx-group__title::before { content: ""; flex: none; inline-size: 2rem; block-size: 2px; background: var(--brand); }
[lang|="ar"] .idx-group__title { letter-spacing: 0; text-transform: none; font-size: var(--step-0); }

.idx-grid {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: clamp(1rem, 2vw, 1.5rem); grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 640px)  { .idx-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .idx-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* A card is the system's photograph; pointing at it (or focusing it) brings
   up its section drawing. Systems without a photograph show the drawing. */
.idx-card {
  display: flex; flex-direction: column; block-size: 100%;
  color: inherit; text-decoration: none;
  background: var(--bg); border: 1px solid var(--line-soft); border-radius: var(--radius-lg);
  overflow: hidden;
  transition: border-color var(--hover), box-shadow .35s ease, transform .35s cubic-bezier(.2,.7,.2,1);
}
.idx-card:hover { border-color: var(--line); box-shadow: 0 26px 50px -34px rgb(10 12 14 / .5); transform: translateY(-3px); }
.idx-card:focus-visible { outline: 3px solid var(--brand); outline-offset: 3px; }
.idx-card__media { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; background: #16181C; }
.idx-card__img {
  position: absolute; inset: 0; inline-size: 100%; block-size: 100%; max-width: none; object-fit: cover;
  transition: transform 1.1s cubic-bezier(.2,.6,.2,1);
}
.idx-card__draw {
  position: absolute; inset: 0; display: grid; place-items: center; padding: 5% 7%;
  background:
    linear-gradient(rgb(255 255 255 / .035) 1px, transparent 1px) 0 0 / 1.4rem 1.4rem,
    linear-gradient(90deg, rgb(255 255 255 / .035) 1px, transparent 1px) 0 0 / 1.4rem 1.4rem,
    #16181C;
  opacity: 0; transition: opacity .45s ease;
}
.idx-card__draw .pl { inline-size: 100%; max-block-size: 100%; }
.idx-card__draw .pl-call, .idx-card__draw .pl-side, .idx-card__draw .pl-dim { display: none; }
.idx-card:hover .idx-card__draw, .idx-card:focus-visible .idx-card__draw,
.idx-card--drawn .idx-card__draw { opacity: 1; }
.idx-card:hover .idx-card__img { transform: scale(1.05); }
@media (prefers-reduced-motion: reduce) {
  .idx-card, .idx-card__img { transition: none; }
  .idx-card:hover { transform: none; }
  .idx-card:hover .idx-card__img { transform: none; }
}
.idx-card__body { flex: 1; display: flex; flex-direction: column; gap: .45rem; padding: clamp(1.1rem, 2.4vw, 1.5rem); }
.idx-card__name {
  font-family: var(--font-display); font-stretch: 106%; font-weight: 700;
  font-size: var(--step-2); line-height: 1.12; letter-spacing: -0.015em;
}
[lang|="ar"] .idx-card__name { letter-spacing: 0; line-height: 1.45; }
.idx-card__line { color: var(--muted); line-height: 1.6; }
[lang|="ar"] .idx-card__line { line-height: 1.85; }
.idx-card__cta { margin-block-start: auto; padding-block-start: .6rem; font-size: var(--step--1); font-weight: 600; color: var(--brand-text); }
/* Inline-block, or the arrow cannot turn: transforms skip inline boxes. */
.idx-card__cta .btn__arrow { display: inline-block; }
.idx-card:hover .idx-card__cta .btn__arrow { transform: translateX(3px); }
[dir="rtl"] .idx-card:hover .idx-card__cta .btn__arrow { transform: scaleX(-1) translateX(3px); }