/* ==========================================================================
   /sektorler/perakende/  +  /en/sectors/retail/
   ONE stylesheet for the pair. Applied to the English page as retail.css by
   `--css-from=perakende`, so the two languages cannot drift.

   VARIANCE PASS, 2026-08-17. Assignment from variance-plan.json:

       opening   C-FIGURE      the artefact above the h1
       dark      CLOSE         one indigo band, the last section
       sections  5             masthead · ranking · titles · method · CTA

   WHAT THIS PAGE LOOKED LIKE BEFORE, AND WHY THAT WAS THE PROBLEM. Masthead
   with an h1 on the left and a mist plate on the right; a 2x2 card grid; a
   sunken band with two half-width sample panels; a step ladder; an indigo
   band. Correct, clean, and identical in silhouette to all 75 other pages —
   which is the finding this whole pass exists to answer.

   RE-COMPOSED 2026-08-18. The variance review found this page, bankacilik and
   yeme-icme to be ONE COMPOSITION BUILT THREE TIMES: same eyebrow, same single
   full-width white sample panel above the h1, same G-G-M-G-D band rhythm with
   the mist band at ~45% of page height on all three, and only the artefact
   inside the panel different. The archetype is unchanged — it is still
   C-FIGURE / CLOSE / 5 — and everything the archetype leaves free has moved.

   WHAT IT IS NOW.
     1  masthead   a TWO-UP PAIR of the client's own 780x540 artefacts, side by
                   side above the h1: site selection next to turnover
                   forecasting, which is the actual retail decision and the two
                   halves of the hub's own question. Ground.
     2  ranking    a RANKED TABLE of candidate stores inside one sample panel,
                   with the top row opened underneath it. MIST — the tinted band
                   now lands at about a quarter of the page instead of halfway,
                   so the rhythm reads G-M-G-G-D, not G-G-M-G-D.
     3  titles     the four analysis titles as a ruled index, not a card grid.
     4  method     three steps.
     5  close      the only indigo band.

   HOW IT DIFFERS FROM ITS TWO C-FIGURE SIBLINGS, which is the whole brief.
   Bankacılık and yeme-içme both open with one white .ng-out panel of DOM-built
   figures and both put a deck of prose second. This page opens with two
   PICTURES in plain raised frames — a hex-cell potential scan beside a revenue
   projection band — and puts a ranked data table second, on the mist. The three
   pages are the same archetype and are not the same object at any scroll
   position.

   Tokens only, no !important, no literal colours. Every heading class carries
   the doubled-class idiom so it beats the theme's
   `h?:not(:first-child){margin-top:50px}` at (0,2,2) — PATTERNS.md §11.

   NOTE ON SHARED PRIMITIVES. Nothing generic is re-authored here. The two
   framed artefacts are ng-shared.css §17a (.ng-figband__fig / __frame / __img /
   __flag / __cap) and the English stand-ins are §17b
   (.ng-figband__frame--text); the candidate table is §15b (.ng-dtable) and the
   opened row is §15c (.ng-facts--5). .ng-out (§13b), .ng-card__icon, .ng-steps,
   .ng-pills and .ng-cta are used unchanged. This sheet adds a two-column track
   for the pair, a label above each frame, column widths for the table, the
   ruled index, and one rule between the panel's two parts.

   STILL NOT PROMOTED, AND NOW WORTH ACTING ON. `.ng-masthead--fig` is declared
   privately in FIVE sheets with five differently-prefixed inner blocks
   (ng-bfig__, ng-pfig__, ng-yfig__, ng-tfig__, ng-mfig__) doing the same five
   jobs, already drifted on lede measure and on the hub-question treatment. This
   pass did not promote it, because the three sektörler C-FIGURE pages are being
   re-composed independently and in parallel — moving the shared body under all
   five while two of them are in flight is how a promotion becomes a regression
   only a screenshot catches. It is the next thing to do, not a thing to do now.

   `.ng-idx__*` also stays here: ng-shared §16 records that this page's ruled
   ledger and /sektorler/hizli-teslimat/'s masthead index already ship under
   that one name and disagree on border-top and on which grid column the
   destination pins to. Renaming one of them is a markup change on four live
   pages and belongs in its own pass.
   ========================================================================== */


/* ==========================================================================
   1. THE C-FIGURE MASTHEAD
   ==========================================================================
   There is no .ng-masthead__inner on this page at all: the container holds a
   linear stack, because C-FIGURE's first screen is an artefact with words
   under it rather than two columns of anything. The shared masthead's two
   column rule therefore never applies and does not need cancelling.

   NOTHING BELOW REINTRODUCES THE PLATE. ARCHETYPES.md makes that point about
   B-STACK and it holds here: a mist "summary card" further down the page is
   the aside with a different name. The one thing the aside carried that is
   real content — the hub's question — is quoted in .ng-pfig__ask, one strip
   at reading measure under the lede, and its two bullet explanations moved
   into section 30 where they introduce the two groups they describe.

   THE HEADLINE COMES DOWN, IT DOES NOT GO UP. B-STACK raises its h1 because
   the headline IS the first screen; here the pair is, and ARCHETYPES says the
   h1 is "subordinate beneath it… at normal size". So the ceiling drops from
   ng-shared §4's 3.5rem to 3.05rem. The floor stays at 2.05rem = 32.8px, well
   over the 24px line that makes .ng-hl (--ng-accent-display) legal. */
.ng-v2 .ng-masthead--fig .ng-pfig__kick{
  margin:0;
}
/* THE TWO-UP PAIR. Everything inside each cell is ng-shared.css §17a —
   .ng-figband__fig / __frame / __img / __flag / __cap, which are all authored
   as standalone selectors and therefore work without §17a's own one-column
   .ng-figband wrapper. The only thing this page adds is the two-column track,
   because §17a ships one column and a 44/56 copy-beside-figure split and
   neither is a pair.

   860px, not §17a's 960. The break has to clear 768 (a tablet in portrait
   stacks, which is right — two 780px assets in a 720px container render their
   own baked 14px body text at about 6px) and land under 1024 (a tablet in
   landscape has the room and the pair is the composition). At 1024 each cell is
   about 500px, i.e. a 0.64 scale on the asset; at 1440 it is 520px, against the
   0.77 the four-image band on /cozumler/optimizasyon/ already ships.

   align-items:start, not §17a's center: the two captions are different lengths
   and centring made the shorter frame float against the taller one's baseline.
   The frames themselves are identical heights because the assets are. */
.ng-v2 .ng-masthead--fig .ng-pfig__pair{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:28px;
  align-items:start;
  margin:16px 0 0;
}
@media (min-width:860px){
  .ng-v2 .ng-masthead--fig .ng-pfig__pair{
    grid-template-columns:repeat(2,minmax(0,1fr));
    column-gap:32px;
  }
}
/* WHICH HALF OF THE QUESTION THIS ONE ANSWERS — and deliberately NOT the
   artefact's title, which is already burnt into the asset in 28px type twenty
   pixels below. That is the stutter the image brief forbids; the title itself
   is named once, in the figcaption, and once more as an h4 in section 30.

   INK, NOT ACCENT. The section eyebrow above the pair is the only magenta label
   on this screen; three magenta labels stacked in 120px read as three headings
   competing. 12px at .1em is ratio .12, over the 0.08 ng-page-check measures
   for the tracked-label exception, so it is a label and not body copy under the
   floor. */
.ng-v2 .ng-masthead--fig .ng-pfig__half{
  margin:0 0 12px;
  font-family:var(--ng-font-label); font-weight:600;
  font-size:12px; line-height:1.3; letter-spacing:.1em;
  text-transform:none;                /* authored pre-uppercased: i -> İ */
  color:var(--ng-ink);
}
/* The illustrative caption belongs to the figure, so it sits tight under it
   and above the rule that separates artefact from page. 96ch because it names
   four data sources; at 54ch it broke into seven short lines. */
.ng-v2 .ng-masthead--fig .ng-pfig__note{
  margin:16px 0 0;
  max-width:96ch;
}
/* The hairline is the composition in one declaration: everything above it is
   the artefact, everything below it is the page. Without it the h1 read as a
   caption belonging to the table. */
.ng-v2 .ng-masthead--fig .ng-pfig__copy{
  margin-top:34px;
  padding-top:30px;
  border-top:1px solid var(--ng-hairline);
}
.ng-v2 .ng-masthead--fig .ng-masthead__title.ng-masthead__title{
  font-size:clamp(2.05rem, 4.6vw, 3.05rem);
  line-height:1.08;
  letter-spacing:-0.028em;
  max-width:20ch;
}
.ng-v2 .ng-masthead--fig .ng-masthead__lede{
  max-width:60ch;
}
/* THE HUB'S QUESTION. SUNKEN role — mist + hairline, holding short copy — the
   same role the aside used, so nothing new is invented and no third surface
   appears. It is deliberately NOT the accent-ruled line the banking leaf uses
   for the same job: two pages quoting their hub with the identical device is
   the sameness this pass is undoing.

   A sentence, not a label: 15px and 16px at mobile, like every other sentence
   on the site. The tracked micro-label above it says whose question it is. */
.ng-v2 .ng-masthead--fig .ng-pfig__ask{
  margin:22px 0 0;
  padding:16px 18px;
  max-width:74ch;
  background:var(--ng-surface-sunken);
  border:1px solid var(--ng-hairline);
  border-radius:var(--ng-radius-sm);
  font-size:15px;
  line-height:1.6;
  color:var(--ng-muted);
}
.ng-v2 .ng-masthead--fig .ng-pfig__asklabel{
  display:block;
  margin-bottom:7px;
  color:var(--ng-ink);
}


/* ==========================================================================
   2. THE CANDIDATE TABLE  (.ng-shelf, on .ng-dtable) — section 20
   ==========================================================================
   MOVED IN THIS PASS. This table used to be the masthead artefact, bare on the
   ground. It is now the second thing on the page, inside the .ng-rep panel on
   the mist band, because ng-shared §1 is explicit that the sunken role holds
   white chrome and never plain text on nothing — and because a ranked table is
   what BOTH sibling C-FIGURE leaves put a deck of prose in front of.

   ng-shared.css §15b supplies the semantics and the three theme defences —
   the doubled-class margin reset that beats `table:not(:first-child)` at
   (0,2,2), the `border:0` restated before the bottom hairline so an unreset
   cell does not draw a navy box, and the 11px/.1em column headers. Everything
   here is column widths and the two things this table shows that a generic
   one does not: a score bar and a revenue index.

   COLUMN WIDTHS BELONG TO THE PAGE, not to the primitive — which column is
   wide is a property of the content. Four columns, sized so the whole table
   fits 342px at 390 without the .ng-dtable__wrap ever having to scroll: a
   table that only fits by scrolling has hidden a column from every phone.

   FOUR COLUMNS, NOT FIVE. The candidate's format (Cadde / AVM) started as its
   own column and was folded into the row header as a sub-line, because at 390
   five columns left the location name 74px and "Ataşehir" wrapped mid-word.
   The format is still on the page, still per-row, and now reads as part of
   what the candidate IS rather than as a fifth measurement.

   THE TOP ROW IS MARKED BY COLOUR, NOT BY A FILL. A shaded row would be a
   third surface role and there are two. Accent on the rank, the score and the
   bar — the same idiom §14's .ng-net uses for the same job. */
.ng-v2 .ng-shelf{
  table-layout:fixed;
}
.ng-v2 .ng-shelf tbody th,
.ng-v2 .ng-shelf tbody td{
  padding-block:17px;
  vertical-align:top;
}
.ng-v2 .ng-shelf__hrank,
.ng-v2 .ng-shelf__rank{
  width:52px;
}
.ng-v2 .ng-shelf tr > :nth-child(3){ width:32%; }
.ng-v2 .ng-shelf tr > :nth-child(4){ width:124px; }

/* The rank. A tracked micro-label at 11px/.1em (ratio .10, over the checker's
   0.08 threshold), not a number to be read — the ordering is carried by the
   row order and by the bar. */
.ng-v2 .ng-shelf__rank{
  font-family:var(--ng-font-label); font-weight:600;
  font-size:11px; line-height:2.1; letter-spacing:.1em;
  text-transform:none;
  color:var(--ng-muted);
  font-variant-numeric:tabular-nums;
}
.ng-v2 .ng-shelf tbody tr.is-top .ng-shelf__rank{ color:var(--ng-accent); }

/* The row header is the candidate. 19px rather than the primitive's 16px:
   this is the opening artefact of the page and the place name is the thing a
   reader is actually looking for. */
.ng-v2 .ng-shelf tbody th{
  font-size:19px;
  line-height:1.25;
}
.ng-v2 .ng-shelf__sub{
  display:block;
  margin-top:5px;
  font-family:var(--ng-font-body);
  font-weight:400;
  font-size:14px; line-height:1.4;
  color:var(--ng-muted);
}
/* The score, with the bar under it rather than beside it. Beside it, the bar
   competed with the revenue index for the same 120px and both ended up too
   short to compare; under it, the bar takes the full column and the three
   lengths can be read against each other at a glance, which is the only
   reason to draw a bar at all.

   24px is the largest figure in the table and stays --ng-ink for the two rows
   that are not first; --ng-accent (5.64:1) rather than --ng-accent-display for
   the top one, because accent is legal at every size and this is a number, not
   a display heading. */
.ng-v2 .ng-shelf__score{
  display:block;
  font-family:var(--ng-font-display); font-weight:700;
  font-size:24px; line-height:1.05;
  letter-spacing:-0.015em;
  color:var(--ng-ink);
  font-variant-numeric:tabular-nums;
}
.ng-v2 .ng-shelf tbody tr.is-top .ng-shelf__score{ color:var(--ng-accent); }
.ng-v2 .ng-shelf__bar{
  display:block;
  margin-top:9px;
  height:6px;
  border-radius:3px;
  background:var(--ng-surface-sunken);
  overflow:hidden;
}
.ng-v2 .ng-shelf__bar i{
  display:block;
  height:100%;
  border-radius:3px;
  background:var(--ng-indigo);
}
.ng-v2 .ng-shelf tbody tr.is-top .ng-shelf__bar i{ background:var(--ng-accent); }
/* The revenue index. Ink at every rank: the index is not a ranking, it is a
   measurement against the client's own network average, and colouring the top
   one would say the highest score always carries the highest index. */
.ng-v2 .ng-shelf__idx{
  display:block;
  font-family:var(--ng-font-display); font-weight:600;
  font-size:20px; line-height:1.2;
  color:var(--ng-ink);
  font-variant-numeric:tabular-nums;
}
/* The table's own footnote: what the score is made of, and what 100 means.
   A real <tfoot> rather than a paragraph after the table, so a screen reader
   gets it as part of the table and the 2px rule reads as a summary rule. */
.ng-v2 .ng-shelf tfoot td{
  line-height:1.55;
}


/* ==========================================================================
   3. THE RULED INDEX  (.ng-idx) — section 30
   ==========================================================================
   FOUR ROWS, NOT FOUR CARDS. ARCHETYPES.md asks for a dominant content shape
   "rather than defaulting to another stack of card grids, which is what every
   page is today". A 2x2 of equal boxes says these four titles are four
   parallel options; they are not. They are a list of named analyses, each
   with one paragraph and one destination, split across the two halves of the
   hub's question. A ruled index says that: the eye reads DOWN a column of
   names, and all four destinations line up in one right-hand column.

   THE WHOLE ROW IS THE ANCHOR, exactly as .ng-card--link was. That is what
   retires the four identical "Daha Fazla Bilgi" links (109x17px, a tap-target
   failure at 1024, 768 and 390) and gives each destination its own accessible
   name. The row is 100+px tall at every width, so no hit-area rule is needed.

   THE DESTINATION COLUMN IS max-content AND nowrap. A fixed track was tried
   first on the fuel leaf and is written up in PATTERNS.md: at a fixed width
   the longest label filled the line exactly and pushed its arrow onto a line
   of its own, reading as a stray glyph. The copy column is the one that can
   absorb the difference, so it does. */
.ng-v2 .ng-idx__kick{
  margin:0 0 9px;
}
/* (0,3,0) doubled — the theme's `h?:not(:first-child){margin-top:50px}` is
   (0,2,2) and would put 50px of air above every group head. PATTERNS.md §11.
   22px matches .ng-vals__name in ng-shared §14, so the two halves of this
   section carry the same weight as the two halves on every sibling leaf. */
.ng-v2 .ng-idx__head.ng-idx__head{
  margin:0;
  font-family:var(--ng-font-display); font-weight:600;
  font-size:22px; line-height:1.25;
  letter-spacing:-0.012em;
  color:var(--ng-ink);
}
.ng-v2 .ng-idx__intro{
  margin:9px 0 0;
  max-width:80ch;
  font-size:15px; line-height:1.6;
  color:var(--ng-muted);
}
/* (0,2,0) beats the theme's `.content-wrapper ul` at (0,1,1); the li reset is
   restated because the theme's list padding survived the global chevron fix
   and inset two grids by 30px on the homepage. */
.ng-v2 .ng-idx__list{
  list-style:none;
  margin:16px 0 0;
  padding:0;
}
.ng-v2 .ng-idx__list > li{
  margin:0;
  padding:0;
  min-width:0;
}
/* NO RULE HERE. The list already closes with a bottom hairline on its last
   row, so a border-top on the following group drew TWO hairlines 25px apart
   between the two halves of the section — read as a mistake, not as a break.
   Found in a 1440 screenshot; ng-page-check reported the page clean with the
   double rule in place. Space alone separates the groups. */
.ng-v2 .ng-idx__list + .ng-idx__group{
  margin-top:46px;
}
.ng-v2 .ng-idx__row{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:14px;
  padding:22px 0;
  border-top:1px solid var(--ng-hairline);
  text-decoration:none;
  color:inherit;
}
.ng-v2 .ng-idx__list > li:last-child .ng-idx__row{
  border-bottom:1px solid var(--ng-hairline);
}
@media (min-width:960px){
  .ng-v2 .ng-idx__row{
    grid-template-columns:minmax(0,25ch) minmax(0,1fr) max-content;
    align-items:start;
    gap:36px;
    padding:26px 0;
  }
}
/* THE ROW IS AN <a> HOLDING REAL BLOCK CONTENT — a div, two paragraphs and an
   h4. `<a>` has a transparent content model, so inside an `<li>` it may hold
   flow content; the alternative was four <span>s, which cost the page its
   h2 > h3 > h4 outline. The card grid this replaces used <h4> for the same
   four titles and ng-page-check reported `h4: 0` the first time this section
   shipped with spans. Structure is not decoration. */
/* THE ICON SITS BESIDE THE NAME, NOT ABOVE IT. Stacked — icon, then label,
   then name — the title of a row rendered BELOW the first line of its own
   description, so the eye met the paragraph before the thing it describes.
   A two-row grid with the chip spanning both puts the label and the name at
   the top of the row where the body starts. Found in a 1440 screenshot; the
   checker reported clean either way. */
.ng-v2 .ng-idx__lead{
  display:grid;
  grid-template-columns:44px minmax(0,1fr);
  column-gap:14px;
  align-items:start;
  min-width:0;
}
.ng-v2 .ng-idx__lead > .ng-card__icon{ grid-row:1 / span 2; }
.ng-v2 .ng-idx__meta{
  margin:2px 0 0;
  font-family:var(--ng-font-label); font-weight:600;
  font-size:12px; line-height:1.35; letter-spacing:.1em;
  text-transform:none;
  color:var(--ng-muted);
}
/* (0,3,0) doubled — this is an h4 and the theme's
   `h?:not(:first-child){margin-top:50px}` is (0,2,2). It is never the first
   child (the icon chip is), so the undoubled rule loses every time.
   PATTERNS.md §11, and the reason every heading class in ng-shared is written
   this way. */
.ng-v2 .ng-idx__name.ng-idx__name{
  margin:6px 0 0;
  font-family:var(--ng-font-display); font-weight:600;
  font-size:19px; line-height:1.25;
  letter-spacing:-0.012em;
  color:var(--ng-ink);
  transition:color .16s cubic-bezier(.25,.46,.45,.94);
}
.ng-v2 .ng-idx__body{
  margin:0;
  max-width:64ch;
  font-size:15px; line-height:1.65;
  color:var(--ng-muted);
}
.ng-v2 .ng-idx__to{
  display:inline-flex; align-items:center; gap:7px;
  white-space:nowrap;
  font-family:var(--ng-font-label); font-weight:600;
  font-size:14px; line-height:1.3;
  color:var(--ng-accent);
}
/* Hover only where a real pointer exists — the same guard ng-shared puts on
   .ng-card--link, so a touch device does not get a stuck hover state. */
@media (hover:hover){
  .ng-v2 .ng-idx__row:hover .ng-idx__name{ color:var(--ng-accent); }
  .ng-v2 .ng-idx__row:hover .ng-arrow{ transform:translate3d(4px,0,0); }
}
.ng-v2 .ng-idx__row:focus-visible .ng-idx__name{ color:var(--ng-accent); }


/* ==========================================================================
   4. THE SAMPLE PANEL  (.ng-rep) — section 20, holding both parts
   ==========================================================================
   .ng-out (§13b) is the container and the honest chrome — subject line and
   ÖRNEK chip; the table above is its first part and §15c's .ng-facts--5 is its
   second. They were two separate bands before this pass and they are one panel
   now, because they are one artefact at two zoom levels: the ranking, and its
   first row opened. Folding them together is also what keeps the page at its
   assigned five sections once the masthead artefact became a picture pair.

   NAME CHECK, the way the .ng-card collision taught us: `.ng-rank` was the
   obvious name for a ranked panel and it is ALREADY TAKEN — ng-components.css
   §.ng-rank is the homepage hero's ranked score list, and ng-components loads
   on every inner page too. It sets `display:grid; gap:9px` on the block, which
   would have fought .ng-out's flex column. `.ng-rep` is this page's own name,
   already here, and appears in no other stylesheet on the site (`.ng-rep-band`
   on /cozumler/yer-ve-bolge-secimi/ is a different class).

   THE OPENED ROW IS SEPARATED BY A RULE, NOT BY A FILL. A tinted strip inside a
   white panel on a mist band would be a third surface role and there are two.
   The 2px weight matches the table's own <tfoot> rule directly above it, so the
   panel closes its first part and opens its second with the same stroke.

   THE 118 IS THE ONLY DISPLAY-MAGENTA FIGURE ON THE PAGE. It is the answer to
   the hub question's second half. 28px clears the 24px line PATTERNS.md rule 5
   draws for --ng-accent-display, and 4.18:1 on --ng-surface clears the 3.0
   large-text bar. Its key stays --ng-muted at 14px: the display magenta would
   fail AA there. */
.ng-v2 .ng-rep .ng-out__body{
  padding:22px 20px 24px;
}
@media (min-width:960px){
  .ng-v2 .ng-rep .ng-out__body{ padding:26px 28px 28px; }
}
.ng-v2 .ng-rep__open{
  margin-top:26px;
  padding-top:22px;
  border-top:2px solid var(--ng-hairline);
}
.ng-v2 .ng-rep__facts .is-answer .ng-facts__v{
  margin-top:4px;
  font-size:28px;
  line-height:1.15;
  color:var(--ng-accent-display);
}


/* ==========================================================================
   5. RESPONSIVE
   ng-shared carries the 44px hit areas (crumbs, buttons, pills) at <=767, at
   768-1023 and at exactly 1024, and the 16px reading floor at <=767. The two
   interactive things this page adds are .ng-idx__row, which is a whole ruled
   row and over 100px tall at every width, and nothing else — the table, the
   score bars and the fact strip are static DOM. So this block is type and
   column widths only.
   ========================================================================== */

@media (max-width:1364px){
  .ng-v2 .ng-out-band{ scroll-margin-top:84px; }
}

@media (max-width:959px){
  /* Centred is right when the note sits under a symmetrical pair; with one
     panel and a left-aligned band it reads as a stray caption. */
  .ng-v2 .ng-out-band__note{ text-align:left; }
}

@media (max-width:767px){
  /* THE TABLE AT 390, NOW INSIDE A PANEL. It used to sit bare in the container
     and have all 342px; inside .ng-out it loses two 1px borders and the body's
     own padding, so the padding comes down to 12px here and the three fixed
     columns come down with it — 44 + 84 + 66 = 194, leaving 122px for the
     candidate name against 142px before. "Ataşehir" sets 76px at the 17px
     mobile step, so the name still fits on one line and .ng-dtable__wrap never
     has to scroll: a table that only fits by scrolling has hidden a column from
     every phone. */
  /* 44px, not the 30px the "01" glyphs need. table-layout:fixed does not clip
     an unbreakable word, so at 30px the header "SIRA" / "RANK" (34px at
     11px/.1em) spilled into the next cell and the two column headers read as
     one string, "RANK CANDIDATE LOCATION". Found in a 390 screenshot of the
     ENGLISH page; ng-page-check reported both pages clean, because an
     overflowing table cell is not document overflow. Shortening the header to
     "#" was the alternative and was rejected: a screen reader announces the
     column header before every cell, and "#" is not a word.
     66px on the last column is likewise a floor, not a preference: "ENDEKSİ"
     and "REVENUE" both set about 59px at 11px/.1em and the cell has 7px of
     left padding, so anything under 66 overflows a single unbreakable word. */
  .ng-v2 .ng-rep .ng-out__body{ padding:16px 12px 18px; }
  .ng-v2 .ng-rep__open{ margin-top:22px; padding-top:18px; }
  .ng-v2 .ng-shelf__hrank,
  .ng-v2 .ng-shelf__rank{ width:44px; }
  .ng-v2 .ng-shelf tr > :nth-child(3){ width:84px; }
  .ng-v2 .ng-shelf tr > :nth-child(4){ width:66px; }
  .ng-v2 .ng-shelf tbody th,
  .ng-v2 .ng-shelf tbody td{ padding-block:15px; }
  .ng-v2 .ng-shelf tbody th{ font-size:17px; }
  .ng-v2 .ng-shelf__sub{ font-size:15px; }
  .ng-v2 .ng-shelf__score{ font-size:21px; }
  .ng-v2 .ng-shelf__idx{ font-size:18px; }
  .ng-v2 .ng-shelf__bar{ margin-top:7px; }

  /* Sentences take the mobile reading floor. ng-shared already sets .ng-note
     to 15px at this width; these are restated only where a different measure
     or a different size is wanted. */
  .ng-v2 .ng-masthead--fig .ng-pfig__ask{ font-size:16px; padding:15px 16px; }
  .ng-v2 .ng-masthead--fig .ng-pfig__copy{ margin-top:28px; padding-top:26px; }
  /* 32px between the two stacked frames, not 28: stacked, each caption runs
     into the next frame's half-label and the two artefacts stopped reading as
     two. The label itself stays 12px — it is tracked at .1em and is a label,
     not a sentence, so the 16px mobile reading floor does not apply to it. */
  .ng-v2 .ng-masthead--fig .ng-pfig__pair{ gap:32px; }
  .ng-v2 .ng-masthead--fig .ng-pfig__note,
  .ng-v2 .ng-vals__note,
  .ng-v2 .ng-how__note,
  .ng-v2 .ng-out-band__note{ max-width:none; }

  .ng-v2 .ng-idx__head.ng-idx__head{ font-size:20px; }
  .ng-v2 .ng-idx__intro{ font-size:16px; }
  .ng-v2 .ng-idx__name.ng-idx__name{ font-size:18px; }
  .ng-v2 .ng-idx__body{ font-size:16px; line-height:1.6; }
  .ng-v2 .ng-idx__to{ font-size:15px; }
  .ng-v2 .ng-idx__list + .ng-idx__group{ margin-top:32px; padding-top:28px; }

  .ng-v2 .ng-rep__facts .is-answer .ng-facts__v{ font-size:26px; }
}

.ng-v2 .ng-how__note{
  margin-top:34px;
  max-width:80ch;
}


/* ==========================================================================
   6. 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, which would otherwise drag every card up and left by half its
   own size — and ng-components.css §8 does the same for .ng-anim. The two
   transitions this sheet adds (.ng-idx__name colour, and the shared .ng-arrow
   nudge on row hover) are a colour change and a 4px translate on an element
   the shared reduce block already neutralises. The score bars are static
   widths, not transitions, precisely so a reduce preference has nothing to
   switch off here. Left as a note rather than an empty block so the next
   person does not go looking for the missing rule.
   ========================================================================== */