/* ==========================================================================
   /sektorler/otomotiv/  +  /en/sectors/automotive/     ONE SHEET FOR THE PAIR
   ==========================================================================
   VARIANCE PASS (2026-08-17). The page was re-composed, not restyled. Its
   assignment in /root/ng-design/variance-plan.json:

       opening   B-STACK      no aside; full-width headline; content starts high
       dark      MIDDLE       the indigo band is section 2 of 4
       sections  4            masthead · indigo ledger · spine · Q&A + rail

   Silhouette:  LIGHT STACK + TERM RAIL → INDIGO LEDGER → LIGHT SPINE →
                LIGHT Q&A + MIST RAIL

   THE PAGE IT REPLACES was the leaf pattern all 28 tranche-2 pages share: a
   split masthead with a mist plate on the right, four value CARDS in a 2×2, two
   sample-output panels side by side on a mist band, a three-across ladder, and
   an indigo CTA slab at the bottom. Nothing was wrong with it except that
   twenty-seven other pages looked exactly like it.

   WHAT MAKES THIS PAGE DIFFERENT FROM ITS NEAREST SIBLING. akaryakıt was given
   the same three properties — B-STACK, MIDDLE, 4 — so the assignment alone
   cannot separate them, and the sweep checks that no two pages in a group share
   a silhouette. Four decisions do the separating, and each is recorded where it
   is implemented below:

     1. the indigo band is section 2, not section 3, so the tonal shape is
        L-D-L-L against akaryakıt's L-M-D-L and the artefact is the second thing
        on the page rather than the fifth;
     2. the sample output is ONE full-width panel on the dark band holding a
        ledger and its opened first row, not two stacked panels on a mist band;
     3. the four client analysis titles are a Q&A — question column, answer
        column — not a numbered index and not a card grid;
     4. the method is a vertical numbered SPINE, not ng-shared's three-across
        .ng-steps ladder.

   The shared primitives this page leans on are .ng-masthead--stack and .ng-facts
   (ng-shared.css §15) and .ng-out (§13b). Everything else is here, per the
   standing rule: a wrong shared primitive costs 28 pages, a duplicated page rule
   costs bytes.

   CONTENTS
     1. TERM RAIL       section 10: the flat rail that replaced the aside
     2. INDIGO LEDGER   section 20: panel, rows, bars, states, opened row
     3. SPINE           section 30: the vertical numbered process
     4. Q&A             section 40: question column / answer column
     5. CLOSING RAIL    section 40: the mist decision rail
     6. RESPONSIVE
     7. REDUCED MOTION
     8. SAMPLE PAIR     section 30: the two stacked client images
   ========================================================================== */


/* ==========================================================================
   1. TERM RAIL — section 10
   ==========================================================================
   ARCHETYPES.md on B-STACK: "The absence of the plate is the point — do not
   reintroduce it lower as a summary card." So the three things the masthead
   aside used to carry (the hub's question verbatim, and the two words it turns
   on) are a FLAT RAIL: no fill, no border box, no shadow, no radius. One
   hairline and three columns of type sitting directly on the page ground. A
   mist plate here would have been the aside with a different address.

   IT IS A GRID ROW OF .ng-masthead__inner, not a child of the copy column.
   §15a collapses that grid to one column, so a second child becomes a full-
   width row under the copy and inherits the 32px row gap — which is why this
   block sets no top margin of its own.

   THE QUOTE KEEPS THE SITE'S QUOTE IDIOM (3px accent rule, hanging indent) that
   .ng-aside__quote used, because the thing being quoted has not changed: it is
   still somebody else's sentence, printed on the /sektorler/ hub card, and the
   reader clicked because of it. The UA quotation marks are cancelled the same
   way ng-shared.css §13a cancels them.
   ========================================================================== */
.ng-v2 .ng-ask{
  padding-top:26px;
  border-top:1px solid var(--ng-hairline);
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:24px;
}
@media (min-width:900px){
  /* The question cell is widest: it holds a full sentence at display size,
     while the two definitions are body copy that reads happily at 30%. */
  .ng-v2 .ng-ask{
    grid-template-columns:minmax(0,1.15fr) minmax(0,1fr) minmax(0,1fr);
    column-gap:44px;
  }
}
.ng-v2 .ng-ask__cell{ min-width:0; }
.ng-v2 .ng-ask__label{ margin:0 0 12px; }
.ng-v2 .ng-ask__quote{
  margin:0;
  padding:2px 0 2px 16px;
  border-left:3px solid var(--ng-accent);
  font-family:var(--ng-font-display); font-weight:600;
  font-size:19px; line-height:1.4;
  letter-spacing:-0.01em;
  color:var(--ng-ink);                /* 14.46:1 on the ground */
}
.ng-v2 .ng-ask__quote::before,
.ng-v2 .ng-ask__quote::after{ content:none; }
.ng-v2 .ng-ask__body{
  margin:0;
  font-size:15px; line-height:1.62;
  color:var(--ng-muted);              /* 6.01:1 on the ground */
}


/* ==========================================================================
   2. INDIGO LEDGER — section 20, the dark band
   ==========================================================================
   ONE PANEL, FULL CONTAINER WIDTH. Thirteen sibling pages run two output panels
   side by side and akaryakıt stacks two; here the ranking and its opened first
   row are one artefact, divided by a rule inside a single .ng-out. The width is
   what lets rank, place, bar, score and state share one line at 1440 without
   becoming a table — this is a ranked LIST whose rows happen to align, and an
   <ol> says that more honestly than a <table> with a header row would.

   WHY NOT .ng-dtable (ng-shared §15b). It exists and it is right for akaryakıt,
   which genuinely has four labelled columns including a twelve-month delta. Here
   two of the five fields are graphic (a bar) and one is a free-text state note,
   so a header row would have had to name a column that is a sentence.

   TOKENS ON THE DARK BAND. Nothing here declares a colour: --ng-ink, --ng-muted,
   --ng-accent, --ng-hairline and --ng-surface-sunken are all re-pointed by
   `.is-dark` in ng-foundation.css §3, and every pair below is in the 42-pair
   contrast table there — ink 14.46:1, muted 9.22:1 and pink accent 7.68:1 on
   navy; ink 12.30:1 and muted 7.84:1 on the panel's 6% film.
   ========================================================================== */
.ng-v2 .ng-karne{
  /* The masthead's ghost button jumps here; the theme header is sticky. */
  scroll-margin-top:104px;
}
@media (max-width:1364px){
  .ng-v2 .ng-karne{ scroll-margin-top:84px; }
}
@media (min-width:768px){
  .ng-v2 .ng-karne__panel .ng-out__body{ padding:24px 28px 28px; }
}

/* --- the rows --------------------------------------------------------------
   FIXED TRACKS, NOT `auto`, above 820px. Each row is its own grid, so `auto`
   columns size to that row's content and the scores would not line up down the
   panel — the one thing a ranking has to do. The five widths are set from the
   longest string in EITHER language (state: "1 dealer in network" at 12px), so
   the two pages keep one layout.

   .is-hole IS NOT "FIRST PLACE". Rows 02–04 have a dealer that is simply too
   far away and row 05 already has one; only row 01 has nothing at all. That is
   the difference between opening a dealer and moving one, it is invisible in a
   score, and it is the only accent treatment in the list — if every row were
   accent the ranking would read as a brand pattern rather than as a state. */
.ng-v2 .ng-ledger{
  list-style:none; margin:0; padding:0;
}
.ng-v2 .ng-ledger__row{
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  grid-template-areas:
    "n name  score"
    ".  bar  state";
  align-items:center;
  column-gap:12px; row-gap:9px;
  padding:15px 0;
  border-top:1px solid var(--ng-hairline);
}
.ng-v2 .ng-ledger__row:first-child{ border-top:0; padding-top:4px; }
@media (min-width:820px){
  .ng-v2 .ng-ledger__row{
    grid-template-columns:30px minmax(112px,0.8fr) minmax(0,1.6fr) 96px 158px;
    grid-template-areas:"n name bar score state";
    column-gap:20px; row-gap:0;
    padding:13px 0;
  }
}
/* 11px at .1em is a tracked label BY MEASUREMENT (ratio .10, over the checker's
   0.08 threshold), which is what ng-page-check actually tests. A rank numeral is
   glanced at, not read. Same size ng-components.css settled on for .ng-rank__n. */
.ng-v2 .ng-ledger__n{
  grid-area:n;
  font-family:var(--ng-font-label); font-weight:500;
  font-size:11px; line-height:1.3; letter-spacing:.1em;
  text-transform:none;
  color:var(--ng-muted);
  font-variant-numeric:tabular-nums;
}
.ng-v2 .ng-ledger__name{
  grid-area:name;
  min-width:0;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  font-family:var(--ng-font-display); font-weight:600;
  font-size:17px; line-height:1.3;
  color:var(--ng-ink);
}
.ng-v2 .ng-ledger__bar{
  grid-area:bar;
  display:block;
  height:6px; border-radius:3px;
  background:var(--ng-surface-sunken);   /* 10% paper on navy */
  overflow:hidden;
}
.ng-v2 .ng-ledger__bar i{
  display:block; height:100%; border-radius:3px;
  background:var(--ng-muted);
}
.ng-v2 .ng-ledger__row.is-hole .ng-ledger__bar i{ background:var(--ng-accent); }
.ng-v2 .ng-ledger__score{
  grid-area:score;
  text-align:right;
  font-family:var(--ng-font-display); font-weight:700;
  font-size:22px; line-height:1.15;
  letter-spacing:-0.01em;
  color:var(--ng-ink);
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}
.ng-v2 .ng-ledger__row.is-hole .ng-ledger__score{ color:var(--ng-accent); }
/* The unit is on every row rather than in a column header, because there is no
   header row. 14px, the reading floor: it is a word, not a tracked label. */
.ng-v2 .ng-ledger__su{
  font-weight:500;
  font-size:14px;
  color:var(--ng-muted);
}
/* 12px at .09em (ratio .09) clears the tracked-label threshold by measurement.
   Deliberately NOT `white-space:nowrap`: the longest English state,
   "1 dealer in network", would then hold its own track width at every viewport
   and squeeze the place name at 390. */
.ng-v2 .ng-ledger__state{
  grid-area:state;
  font-family:var(--ng-font-label); font-weight:500;
  font-size:12px; line-height:1.35; letter-spacing:.09em;
  text-transform:none;                /* "BAYİ YOK" is authored uppercase */
  color:var(--ng-muted);
  text-align:right;
}
@media (min-width:820px){
  .ng-v2 .ng-ledger__state{ text-align:left; }
}
.ng-v2 .ng-ledger__row.is-hole .ng-ledger__state{
  color:var(--ng-accent);
  font-weight:600;
}

/* --- the opened first row --------------------------------------------------
   .ng-facts (ng-shared §15c) runs key/value pairs ACROSS the container. It has
   modifiers for four and five columns; six fields want three, which is its base
   at ≥640, so the only thing this page adds is the border bookkeeping for a
   strip that wraps to a second row of three — otherwise cell 4 draws a divider
   at the start of a row, which reads as a stray rule. */
.ng-v2 .ng-karne__open{
  margin-top:26px;
  padding-top:24px;
  border-top:1px solid var(--ng-hairline);
}
.ng-v2 .ng-karne__openlabel{ margin-bottom:18px; }
@media (min-width:960px){
  .ng-v2 .ng-karne__facts .ng-facts__cell:nth-child(3n+1){
    border-left:0; padding-left:0;
  }
  .ng-v2 .ng-karne__facts .ng-facts__cell:nth-child(3n){ padding-right:0; }
  .ng-v2 .ng-karne__facts .ng-facts__cell:nth-child(n+4){ margin-top:24px; }
}
/* LEFT, not centred. ng-shared's .ng-out-band__note is centred, which is right
   under a centred pair of panels; under one left-aligned full-width ledger a
   centred caption reads as a pull-quote. */
.ng-v2 .ng-karne__note{
  margin-top:24px;
  max-width:88ch;
}


/* ==========================================================================
   3. SPINE — section 30
   ==========================================================================
   ng-shared's .ng-steps lays three items ACROSS at ≥860px, which is what
   akaryakıt uses and what every tranche-2 leaf uses. Three columns read as
   three options; this is a sequence with a direction, so it runs DOWN: numbered
   nodes on a 2px rule, content to the right of each node. Same tokens, same
   rule weight, same numerals — rotated ninety degrees, which is the difference
   between a set and a pipeline.

   The connector is a ::before on the step rather than a border on the node, so
   it starts under the node and stops at the last step without a
   :last-child override fighting a border colour.

   THE SECTION HEAD SITS BESIDE THE SPINE above 1024px, not above it. Found in
   the 1440 screenshot: a single vertical sequence with a 70ch measure left the
   right third of the container empty for a whole band, directly under a
   full-bleed ledger and directly above a two-column Q&A — the one section that
   looked unfinished rather than composed. Moving the head into a 40% column
   fills the band with the material it already had, and it is a third distinct
   composition on a page whose other three bands are full-width. Below 1024 it
   returns to the normal head-above-content stack. ng-page-check reported the
   page clean before and after; this was a screenshot finding.
   ========================================================================== */
.ng-v2 .ng-spine{
  list-style:none; margin:0; padding:0;
}
@media (min-width:1024px){
  .ng-v2 .ng-how > .ng-container{
    display:grid;
    grid-template-columns:minmax(0,40fr) minmax(0,60fr);
    column-gap:56px;
    align-items:start;
  }
  /* The head spans all three rows of the right column: spine, note, chips. */
  .ng-v2 .ng-how .ng-section-head{
    grid-column:1; grid-row:1 / span 3;
    margin-bottom:0;
  }
  .ng-v2 .ng-how .ng-spine,
  .ng-v2 .ng-how .ng-how__note,
  .ng-v2 .ng-how .ng-how__links{ grid-column:2; }
  /* The column is already the measure; a second ch ceiling inside it only
     shortens the lines by a random amount. */
  .ng-v2 .ng-how .ng-spine__body{ max-width:none; }
}
.ng-v2 .ng-spine__step{
  position:relative;
  display:grid;
  grid-template-columns:44px minmax(0,1fr);
  column-gap:20px;
  align-items:start;
}
/* `display:block` IS LOAD-BEARING, and it cost a screenshot to find. The theme
   ships `ul>li:before{content:'\e82d';font-family:fontello}` and
   ng-components.css §10 kills it with BOTH `content:none` AND `display:none` on
   `body.ng-v2 ol > li::before`. Setting only `content:""` here left the
   connector `display:none` — the numbered nodes rendered and the rule between
   them silently did not, on both languages, with ng-page-check reporting the
   page clean. Any page-level ::before on a li under .ng-v2 must restate
   display. */
.ng-v2 .ng-spine__step::before{
  content:"";
  display:block;
  position:absolute;
  left:21px; top:44px; bottom:0;
  width:2px;
  background:var(--ng-hairline);
}
.ng-v2 .ng-spine__step:last-child::before{ content:none; }
.ng-v2 .ng-spine__n{
  display:flex; align-items:center; justify-content:center;
  width:44px; height:44px;
  border:2px solid var(--ng-hairline);
  border-radius:var(--ng-radius-pill);
  background:var(--ng-ground);
  font-family:var(--ng-font-label); font-weight:600;
  font-size:12px; line-height:1; letter-spacing:.1em;
  text-transform:none;
  color:var(--ng-accent);             /* 5.35:1 on the ground */
  font-variant-numeric:tabular-nums;
}
.ng-v2 .ng-spine__main{
  min-width:0;
  padding:0 0 36px;
}
.ng-v2 .ng-spine__step:last-child .ng-spine__main{ padding-bottom:0; }
/* Doubled class: the theme's `.content-wrapper h?:not(:first-child)` at (0,2,2)
   sets margin-top:50px and would push the step name off its own node.
   ng-shared.css §11, applied to a page-level heading class. */
.ng-v2 .ng-spine__name.ng-spine__name{
  margin:9px 0 0;
  font-family:var(--ng-font-display); font-weight:600;
  font-size:20px; line-height:1.3;
  letter-spacing:-0.012em;
  color:var(--ng-ink);
}
.ng-v2 .ng-spine__body{
  margin:10px 0 0;
  font-size:15px; line-height:1.62;
  color:var(--ng-muted);
  max-width:70ch;
}
.ng-v2 .ng-spine__pills{ margin-top:14px; }


/* ==========================================================================
   4. Q&A — section 40
   ==========================================================================
   The client's four analysis titles were a 2×2 of cards, which is the shape
   this whole pass exists to break up. They are now question / answer rows: the
   question a dealer network asks on the left, the client's own paragraph and
   the page it resolves into on the right.

   THE ANSWER IS THE ANCHOR, the question is not. One link per row with its own
   accessible name — replacing four identical "Daha Fazla Bilgi" links that
   measured 109×17px and failed the tap-target check at 1024, 768 and 390. The
   question stays outside the link because it is not a destination; it is the
   thing the destination answers.

   Rules, not cards: a hairline above every row and one under the last. Four
   raised surfaces would have been the card grid again with more padding.
   ========================================================================== */
.ng-v2 .ng-qa{
  list-style:none; margin:0; padding:0;
}
.ng-v2 .ng-qa__item{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:16px;
  padding:26px 0;
  border-top:1px solid var(--ng-hairline);
}
.ng-v2 .ng-qa__item:last-child{
  border-bottom:1px solid var(--ng-hairline);
}
@media (min-width:900px){
  /* 38/62. At 50/50 the four questions — one of which is nine words in Turkish
     — set as wide as the answers and the two columns stopped reading as
     question and answer; at 30/70 the longest question wrapped to four lines. */
  .ng-v2 .ng-qa__item{
    grid-template-columns:minmax(0,38fr) minmax(0,62fr);
    column-gap:48px;
    padding:30px 0;
  }
}
.ng-v2 .ng-qa__ask{ min-width:0; }
.ng-v2 .ng-qa__n{ margin:0 0 12px; }
.ng-v2 .ng-qa__q{
  margin:0;
  font-family:var(--ng-font-display); font-weight:600;
  font-size:22px; line-height:1.28;
  letter-spacing:-0.016em;
  color:var(--ng-ink);
  text-wrap:balance;
}
.ng-v2 .ng-qa__a{
  display:block;
  min-width:0;
  text-decoration:none;
  color:inherit;
  border-radius:var(--ng-radius-sm);
}
/* Doubled class for the theme's 50px heading margin, as above. */
.ng-v2 .ng-qa__name.ng-qa__name{
  margin:0;
  font-family:var(--ng-font-display); font-weight:600;
  font-size:18px; line-height:1.3;
  letter-spacing:-0.01em;
  color:var(--ng-ink);
  transition:color .16s cubic-bezier(.25,.46,.45,.94);
}
.ng-v2 .ng-qa__body{
  display:block;
  margin-top:9px;
  font-size:15px; line-height:1.62;
  color:var(--ng-muted);
  max-width:64ch;
}
/* A BLOCK, NOT A FLEX ROW, so the arrow flows with the last word of a label
   that wraps instead of being pushed onto a line of its own — the failure the
   akaryakıt sheet records for .ng-offer__to. */
.ng-v2 .ng-qa__to{
  display:block;
  margin-top:13px;
  font-family:var(--ng-font-label); font-weight:500;
  font-size:12px; line-height:1.35; letter-spacing:.1em;
  text-transform:none;                /* authored pre-uppercased: i -> İ */
  color:var(--ng-muted);
}
.ng-v2 .ng-qa__to .ng-arrow{ margin-left:8px; }
.ng-v2 .ng-qa__a:hover .ng-qa__name{ color:var(--ng-accent); }
.ng-v2 .ng-qa__a:hover .ng-qa__to{ color:var(--ng-accent); }
.ng-v2 .ng-qa__a:hover .ng-arrow{ transform:translateX(4px); }


/* ==========================================================================
   5. CLOSING RAIL — section 40
   ==========================================================================
   The indigo band is assigned to the MIDDLE of this page, so the closing
   decision cannot be the indigo slab every other leaf ends on. It is a SUNKEN
   rail: mist + hairline holding white chrome (the two pills), which is the
   second of the site's two surface roles doing exactly its job.

   The same component akaryakıt introduced, copied rather than promoted — two
   pages is not three, and PATTERNS.md sets the bar at three.
   ========================================================================== */
.ng-v2 .ng-close__rail{
  margin-top:46px;
  padding:26px 22px;
  background:var(--ng-surface-sunken);
  border:1px solid var(--ng-hairline);
  border-radius:var(--ng-radius);
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:24px;
}
@media (min-width:900px){
  .ng-v2 .ng-close__rail{
    grid-template-columns:minmax(0,1fr) auto;
    column-gap:44px;
    align-items:center;
    padding:34px 36px;
  }
}
.ng-v2 .ng-close__eyebrow{ margin:0; }
/* Doubled class again. This h2 is NOT the first child of its block — the
   eyebrow is — so `h2:not(:first-child)` does match it. */
.ng-v2 .ng-close__title.ng-close__title{
  margin:14px 0 0;
  font-size:clamp(1.6rem, 3.2vw, 2.1rem);
  line-height:1.15;
  letter-spacing:-0.02em;
  max-width:22ch;
  text-wrap:balance;
}
.ng-v2 .ng-close__lede{
  margin:14px 0 0;
  font-size:17px; line-height:1.6;
  color:var(--ng-muted);              /* 5.42:1 on mist */
  max-width:54ch;
}
.ng-v2 .ng-close__side{
  display:flex; flex-direction:column;
  align-items:flex-start;
  gap:4px;
}
@media (min-width:900px){
  .ng-v2 .ng-close__side{ align-items:flex-end; text-align:right; }
}
.ng-v2 .ng-close__actions{ margin-top:0; }
/* 14px for the same reason .ng-cta__meta is: a phone number and an address are
   read and copied, and .04em tracking does not earn the label exception. */
.ng-v2 .ng-close__meta{
  margin:16px 0 0;
  font-family:var(--ng-font-label); font-weight:500;
  font-size:14px; line-height:1.6; letter-spacing:.04em;
  color:var(--ng-muted);
}


/* ==========================================================================
   6. RESPONSIVE
   ng-mobile.css §7 carries every 44px hit area (crumbs, buttons, pills, tel) at
   ≤767, at 768–1023 and at exactly 1024. The one interactive thing this page
   adds is .ng-qa__a, a block over 100px tall at every width. So this block is
   type and rhythm only.
   ========================================================================== */

@media (max-width:899px){
  /* The Q&A loses its second column; the answer measure follows the container
     rather than holding a 64ch ceiling inside a 700px column. */
  .ng-v2 .ng-qa__body{ max-width:none; }
  /* Stacked, the question and the answer's title sit one under the other with
     nothing but a 16px gap between them, and at 22/18 they read as two
     headings rather than as a question and its answer. Two points of separation
     restore the order: the question keeps the larger size, the title drops to
     17px. Seen in the 390 screenshot; both sizes are over the 14px floor. */
  .ng-v2 .ng-qa__q{ font-size:20px; }
  .ng-v2 .ng-qa__name.ng-qa__name{ font-size:17px; }
}

@media (max-width:767px){
  /* Mobile reading floor, 16px, for every sentence this page adds. */
  .ng-v2 .ng-ask__body,
  .ng-v2 .ng-spine__body,
  .ng-v2 .ng-qa__body,
  .ng-v2 .ng-close__lede{ font-size:16px; }

  .ng-v2 .ng-ask{ padding-top:22px; gap:20px; }
  .ng-v2 .ng-ask__quote{ font-size:18px; }

  .ng-v2 .ng-vals__note,
  .ng-v2 .ng-how__note,
  .ng-v2 .ng-karne__note{ max-width:none; }

  /* THE LEDGER AT 390. Two rows per entry: place and score on the first, bar
     and state on the second. The state track is capped so that "1 dealer in
     network" wraps to two lines instead of sizing the `auto` column to its own
     max-content and taking ~40px the place name cannot spare. */
  .ng-v2 .ng-ledger__row{ padding:13px 0; column-gap:10px; }
  .ng-v2 .ng-ledger__name{ font-size:16px; }   /* reading floor: a place name */
  .ng-v2 .ng-ledger__score{ font-size:20px; }
  .ng-v2 .ng-ledger__state{ max-width:132px; justify-self:end; }
  .ng-v2 .ng-karne__open{ margin-top:22px; padding-top:20px; }

  .ng-v2 .ng-close__rail{ margin-top:36px; padding:22px 18px; }
  .ng-v2 .ng-close__meta{ margin-top:14px; }
}

@media (max-width:639px){
  /* The spine keeps its shape but the node comes down to 36px: at 44 + 20 the
     content column was 278px inside a 342px container, and the five pills in
     step 02 started breaking one word per line. */
  .ng-v2 .ng-spine__step{ grid-template-columns:36px minmax(0,1fr); column-gap:14px; }
  .ng-v2 .ng-spine__step::before{ left:17px; top:36px; }
  .ng-v2 .ng-spine__n{ width:36px; height:36px; font-size:11px; }
  .ng-v2 .ng-spine__main{ padding-bottom:30px; }
  .ng-v2 .ng-spine__name.ng-spine__name{ margin-top:5px; font-size:19px; }
  .ng-v2 .ng-qa__item{ padding:22px 0; }
}


/* ==========================================================================
   7. REDUCED MOTION
   ng-shared.css §10 already flattens .ng-card and .ng-arrow under a reduce
   preference — including cancelling ng-components.css's !important marker
   transform — and ng-components.css §8 does the same for .ng-anim. The only
   motion this sheet adds is the Q&A row's colour transition, switched off
   below; the ledger bars are static widths rather than transitions, precisely
   so a reduce preference has nothing left to switch off there.
   ========================================================================== */
@media (prefers-reduced-motion:reduce){
  .ng-v2 .ng-qa__name{ transition:none; }
}


/* ==========================================================================
   8. SAMPLE PAIR — section 30
   ==========================================================================
   Two client images, one above the other, at the foot of the spine. They are
   the output of steps 02 and 03 and they read as a sequence — the market, then
   a candidate point inside one — so they are a VERTICAL PAIR, and the pair is
   the whole point: this group is separated on dominant content shape alone. A
   two-up row above the h1 is perakende's, a two-column picture index is şarj
   istasyonu's, one figure beside a display numeral is sağlık's, a three-across
   strip is telekom's. Stacking is what is left, and it is also the only
   arrangement that keeps both rasters near their native width on a laptop.

   NO NEW BLOCK, NO NEW SECTION. This is four children added inside section
   30's existing container — a label, a lead-in and two .ng-figband figures out
   of ng-shared §17a. The spine, the note and the chip row are untouched, and
   nothing above section 30 was opened at all.

   780px CAP, CENTRED. The assets are 780×540 and .ng-figband__img is
   width:100%, so any frame wider than 780 upscales them and they go soft.
   Between 768 and 1023 this stack is the full container — 952px at a 1000px
   viewport — so the cap is doing real work there, not merely guarding 1440.
   margin-inline:auto keeps the pair centred when the container is wider.

   THE STACK JOINS THE SPINE'S COLUMN AT ≥1024. Section 3's grid puts the
   section head in column 1 spanning three rows and puts the spine, the note and
   the chip row in column 2. A fourth child with no column assignment is
   auto-placed, and the first free track it can reach is not reliably the one
   under the spine. It is stated here rather than by extending section 3's
   selector list, so section 3 stays exactly as it was written.

   NO MOTION IS ADDED. .ng-anim is deliberately absent from the stack and from
   everything inside it — its hidden state is a transform, and a lazily-loaded
   image inside a transformed element is the one combination HANDOFF records as
   never loading — so section 7 has nothing new to switch off. The spine's own
   .ng-anim steps were left alone; none of them contains an image.
   ========================================================================== */
.ng-v2 .ng-how__stack{
  max-width:780px;
  margin:44px auto 0;
}
@media (min-width:1024px){
  .ng-v2 .ng-how .ng-how__stack{ grid-column:2; }
}
.ng-v2 .ng-how__stacklabel{ margin:0 0 10px; }
/* A SENTENCE, not a label, so it takes the 14px reading floor rather than the
   tracked-label exception — the same call .ng-figband__cap and .ng-note make.
   17px sits above .ng-spine__body's 15px and below the section lede: it has to
   introduce the pair without reading as a second lede.

   AND IT IS NOT DECORATION. A 780px asset renders near 342px at a 390 viewport,
   the first image used to hold a 10px legend that came out around 4px; the artwork carries no legend since 2026-08-20. The three
   market-share grades, the drive rings and the score out of a hundred are
   therefore said here in words; the picture carries their shape, not the fact. */
.ng-v2 .ng-how__stacklead{
  margin:0 0 26px;
  font-size:17px; line-height:1.6;
  color:var(--ng-muted);
}
/* (0,3,0), which beats ng-shared §17a's `.ng-v2 .ng-figband__fig{margin:0}` at
   (0,2,0) — the gap between the two frames is a margin on the second, so the
   caption of the first keeps its own 14px and nothing collapses through it. */
.ng-v2 .ng-how__stack .ng-figband__fig{
  max-width:780px;
  margin-inline:auto;
}
.ng-v2 .ng-how__stack .ng-figband__fig + .ng-figband__fig{ margin-top:34px; }

@media (max-width:767px){
  /* The 16px mobile reading floor section 6 gives every other sentence here. */
  .ng-v2 .ng-how__stacklead{ font-size:16px; margin-bottom:22px; }
  .ng-v2 .ng-how__stack{ margin-top:34px; }
  .ng-v2 .ng-how__stack .ng-figband__fig + .ng-figband__fig{ margin-top:26px; }
}


/* ==========================================================================
   9. FIGURE MARGINS — SPECIFICITY DEFENCE (image rollout, 2026-08-18)
   Elementor frontend.css ships
     .elementor .elementor-widget:not(.elementor-widget-text-editor)
     :not(.elementor-widget-theme-post-content) figure{margin:0}
   at (0,4,1), and it loads AFTER the page sheets in the LiteSpeed-combined
   file. Every margin this sheet sets on a <figure> was therefore dropped:
   a capped figure rendered flush LEFT instead of centred and the gap under
   it collapsed to 0. Measured, not inferred — on /sektorler/akaryakit/ the
   figure computed margin-left:0px against an authored `0 auto 40px`.
   The declarations below are the SAME ones already written above, restated
   at (0,6,1) so they clear BOTH Elementor and the (0,5,1) rule
   ng-shared.css section 17 now ships: figure.ng-figband__fig.ng-figband__fig
   {margin:0}. Same declarations as above, no new values.
   ========================================================================== */
.ng-v2 .ng-section .ng-container .ng-how__stack figure.ng-figband__fig.ng-figband__fig.ng-figband__fig{ margin-inline:auto; }
.ng-v2 .ng-section .ng-container .ng-how__stack .ng-figband__fig + figure.ng-figband__fig.ng-figband__fig.ng-figband__fig{ margin-top:34px; }
@media (max-width:767px){
  .ng-v2 .ng-section .ng-container .ng-how__stack .ng-figband__fig + figure.ng-figband__fig.ng-figband__fig.ng-figband__fig{ margin-top:26px; }
}