/* ==========================================================================
   /cozumler/segmentasyon/  +  /en/solutions/segmentation/
   ONE stylesheet for the pair. Applied to the English page as segmentation.css
   by `--css-from=segmentasyon`, 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 · ledger · report · stages · CTA

   WHAT THIS PAGE LOOKED LIKE BEFORE, AND WHY THAT WAS THE PROBLEM. Masthead
   with an h1 left and a mist plate right; a 2x2 card grid in two groups; a
   sunken band holding two half-width sample panels; a 3-across step ladder; a
   white benefits plate on a second mist band; an indigo band. Clean, verified,
   and — shot side by side with /cozumler/optimizasyon/ at 1440 before this
   pass — indistinguishable from it above the fold and for two screens after.
   That is the finding the owner reported and this pass exists to answer.

   WHAT IT IS NOW. The first screen is a SEGMENT MATRIX at full container
   width: four regions down, four segments across, a 100%-stacked bar per row,
   with the h1 underneath it. The four segmentation titles are four ruled
   ledger rows, not four cards. The second sample output is a real ranked table
   inside one white panel on the page's only mist band. The stages ladder runs
   DOWN a column with the four client-stated gains ruled beside it. Only the
   closing band is dark.

   Tonal order: GROUND · GROUND · MIST · GROUND · INDIGO.

   HOW IT DIFFERS FROM ITS COZUMLER SIBLINGS. No other solution leaf is
   assigned C-FIGURE (optimizasyon A-SPLIT, raporlama B-STACK, tahminleme
   E-DARK, veri-servisleri D-NUMBER, dijital-harita-servisleri and
   yer-ve-bolge-secimi F-INDEX), so the opening is unique in the group by
   construction. Beyond the opening, the dominant content shape here is a
   CROSS-TAB READ TWICE — the same four regions as proportional shares, then as
   a ranked order — where every sibling's dominant shape is still a grid of
   raised cards. tahminleme's .ng-scen matrix was checked before this was
   built: it is a 3-scenario forecast table inside a 42% panel mid-page, not a
   full-width share matrix above an h1, and the two do not read alike.

   Tokens only, no !important, no literal colours (the two colour-mix() ratios
   are mixes, not palette values — the exception ng-post.css established and
   the contract grants gradients and masks). 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.

   SHARED PRIMITIVES USED UNCHANGED: .ng-masthead, .ng-crumbs, .ng-eyebrow,
   .ng-section-head, .ng-lede, .ng-note, .ng-card__icon, .ng-out (§13b),
   .ng-steps (§13c), .ng-pills, .ng-actions, .ng-cta, .ng-dtable (§15b) and
   .ng-facts (§15c). Both tables on this page are §15b, which is why none of
   the three theme table defences is re-fought below.

   NOTE FOR THE SHARED FILE'S NEXT OWNER — `.ng-masthead--fig`. This is now the
   FIFTH page sheet to declare that modifier privately (bankacilik, perakende,
   yeme-icme, next-geo-tailor, here). perakende.css's own comment says three is
   a promotion. It is not promoted here because ng-shared.css may not be edited
   while other agents are reading it; the four shared declarations (no second
   column, artefact first, the h1 type scale coming DOWN not up, the rule
   between artefact and page) should be lifted into §15 and the per-page rules
   below trimmed to the type scale when that happens.
   ========================================================================== */


/* ==========================================================================
   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. ng-shared §4's two-column rule
   is scoped to __inner, so it 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 is the aside
   with a different name. What the aside actually carried is redistributed —
   the hub's question was already the h1, its attribution is .ng-mfig__ask, and
   its two bullet definitions are the two group intros in section 20.

   THE HEADLINE COMES DOWN, IT DOES NOT GO UP. B-STACK raises its h1 because
   the headline IS the first screen; here the matrix 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-mfig{
  margin:16px 0 0;
}
/* The figure's chrome: what this is, and that it is a sample. It sits ABOVE
   the artefact in a bare caption row rather than inside a filled bar, because
   the filled bar is what the panel in section 30 has and the whole point of
   the pairing is that the two artefacts are different objects. The flag reuses
   .ng-out__flag, which ng-shared declares without requiring an .ng-out
   ancestor — one ÖRNEK / SAMPLE chip on the site, not two that can drift. */
.ng-v2 .ng-masthead--fig .ng-mfig__cap{
  display:flex; align-items:center; flex-wrap:wrap;
  gap:10px 14px;
  margin:0 0 16px;
}
.ng-v2 .ng-masthead--fig .ng-mfig__kick{
  margin:0;
}
/* The figure's own footnote: what the segments are, that the rows total 100%,
   and what the ink/muted contrast in the cells means. 14px and untracked — it
   is a sentence, so it takes the reading floor, not the label exception. */
.ng-v2 .ng-masthead--fig .ng-mfig__foot{
  margin:16px 0 0;
  max-width:96ch;
  font-size:14px; line-height:1.55;
  color:var(--ng-muted);
}
.ng-v2 .ng-masthead--fig .ng-mfig__note{
  margin:12px 0 0;
  max-width:100ch;
}
/* The 2px rule 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 matrix. It is 2px and the table's own closing rule
   is 1px, ~90px apart — the retail leaf recorded a case where two rules of the
   SAME weight 25px apart read as a mistake, which is the failure this avoids
   rather than repeats. */
.ng-v2 .ng-masthead--fig .ng-mfig__copy{
  margin-top:36px;
  padding-top:32px;
  border-top:2px 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, ATTRIBUTED. A ruled strip on the ground, not a mist
   plate and not an accent-ruled quote: the retail leaf uses the first for this
   exact job and the banking leaf the second, and three pages quoting their hub
   with one device is the sameness this pass is undoing. A sentence, so 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-mfig__ask{
  margin:24px 0 0;
  padding-top:18px;
  max-width:72ch;
  border-top:1px solid var(--ng-hairline);
  font-size:15px; line-height:1.6;
  color:var(--ng-muted);
}
.ng-v2 .ng-masthead--fig .ng-mfig__asklabel{
  display:block;
  margin-bottom:7px;
  color:var(--ng-ink);
}


/* ==========================================================================
   2. THE SEGMENT MATRIX  (.ng-mtx, on .ng-dtable)
   ==========================================================================
   THE ARTEFACT THE PAGE OPENS WITH. /cozumler/ states this page's output as
   "Segment bazlı bölge haritası ve yatırım öncelik sırası" — two things — so
   the page carries two artefacts and this is the first of them.

   WHY A TABLE NOW, WHEN THE FIRST AUTHOR REJECTED ONE. That rejection is
   recorded and it was right for what it was deciding: at 42% of the container,
   four regions of four shares had to stack, and a segment composition is a
   PART-TO-WHOLE relationship, which a row of numbers states and a stacked bar
   shows. At full container width both fit. The cross-tab gives the columns
   real headers a screen reader can announce, and the stacked bar column keeps
   the part-to-whole reading the numbers alone would lose. Neither replaced the
   other.

   COLOUR IS NEVER THE ONLY CARRIER (WCAG 1.4.1). Every row prints all four
   shares as numbers in labelled columns. The bar cell and its column header
   are aria-hidden because the four fills carry nothing the four numeric cells
   in the same row do not, and announcing four unlabelled fills is noise. The
   largest share in a row is ink against muted — an aid, not the carrier: the
   numbers say which is largest on their own.

   THE FOUR FILLS ARE DERIVED FROM TOKENS, NOT WRITTEN AS LITERALS. Two hues
   from the palette (accent, indigo) and one tint of each via color-mix(), the
   same exception the contract grants gradients and masks: a ratio is a mix,
   not a palette value. Four flat ramp steps of one hue were tried on the first
   version and the two middle steps were not separable at 8px tall; two hues
   plus a tint each are. */
.ng-v2 .ng-mtx{
  table-layout:fixed;
}
/* Column widths belong to the page, not to the primitive — which column is
   wide is a property of the content. Region name fixed, the four numeric
   columns fixed, and the bar column takes whatever is left, so the artefact
   grows with the container instead of the text columns doing it. */
.ng-v2 .ng-mtx tr > :nth-child(1){ width:150px; }
.ng-v2 .ng-mtx tr > :nth-child(n+3){ width:78px; }
.ng-v2 .ng-mtx th,
.ng-v2 .ng-mtx td{
  padding-block:15px;
}
/* The table closes with a hairline. ng-shared §15b removes the last row's
   bottom border so a table can end flush against a panel edge; here it ends in
   open air with a footnote under it, and without the rule the last row and the
   footnote read as one block. (0,3,3) — the same specificity as the shared
   rule it reverses, winning on source order. */
.ng-v2 .ng-mtx tbody tr:last-child th,
.ng-v2 .ng-mtx tbody tr:last-child td{
  border-bottom:1px solid var(--ng-hairline);
}
/* Column headers. The four segment letters are set at the 14px reading floor
   with no tracking rather than taking §15b's 11px tracked-label treatment: a
   single letter at 11px is not a label you glance at, it is a letter you have
   to look for. BÖLGE and PAY DAĞILIMI stay at the §15b treatment because they
   are labels. (0,3,2), which beats §15b's `.ng-v2 .ng-dtable thead th`. */
.ng-v2 .ng-mtx thead th.ng-mtx__hnum{
  font-family:var(--ng-font-display); font-weight:700;
  font-size:14px; line-height:1.3; letter-spacing:0;
  text-align:right;
  color:var(--ng-ink);
}
.ng-v2 .ng-mtx thead th.ng-mtx__hbar{
  padding-left:16px;
}
/* 17px, so --ng-accent would be the only legal accent here — which is why the
   emphasis is ink/muted and not colour. Tabular figures so the four columns
   line up on the decimal that is not there. */
.ng-v2 .ng-mtx tbody td.ng-mtx__num{
  font-family:var(--ng-font-display); font-weight:600;
  font-size:17px; line-height:1.25;
  text-align:right;
  color:var(--ng-muted);
  font-variant-numeric:tabular-nums;
}
.ng-v2 .ng-mtx tbody td.ng-mtx__num.is-max{
  font-weight:700;
  color:var(--ng-ink);
}
.ng-v2 .ng-mtx tbody td.ng-mtx__barc{
  padding-left:16px;
  padding-right:20px;
}

/* THE 100% STACKED BAR. Height 10px, not the 6px .ng-net uses on the
   optimizasyon leaf: that bar holds ONE fill whose length is the whole
   message, this one holds four and the 11% fill has to register as a band
   rather than as a seam. */
.ng-v2 .ng-mtx__bar{
  display:flex;
  height:10px; border-radius:5px;
  background:var(--ng-surface-sunken);
  overflow:hidden;
}
/* The 1px separator is a BORDER, not a flex gap. A gap would add 3px to a
   track whose four widths already total 100% and push the last fill under the
   radius; a border is inside the box under the inherited border-box, so the
   four widths still total exactly 100%. */
.ng-v2 .ng-mtx__bar i{
  display:block; height:100%;
  flex:none;
  border-right:1px solid var(--ng-ground);
}
.ng-v2 .ng-mtx__bar i:last-child{ border-right:0; }
.ng-v2 .ng-mtx__bar i.is-a{ background:var(--ng-accent); }
.ng-v2 .ng-mtx__bar i.is-b{ background:var(--ng-indigo); }
/* The plain-token declaration first, the mix second. A browser without
   color-mix() drops the second as invalid and keeps the first, so the two pale
   fills degrade to the nearest palette tints instead of disappearing — an
   undeclared background on a 10px bar segment is an invisible failure. */
.ng-v2 .ng-mtx__bar i.is-c{
  background:var(--ng-accent-wash);
  background:color-mix(in srgb, var(--ng-accent) 46%, var(--ng-surface));
}
.ng-v2 .ng-mtx__bar i.is-d{
  background:var(--ng-surface-sunken);
  background:color-mix(in srgb, var(--ng-indigo) 48%, var(--ng-surface));
}

/* THE LEGEND. It is the only thing that gives A/B/C/D meaning, so it sits
   above the table rather than under it, and it is READ — 14px, the reading
   floor, not a tracked micro-label. Explicit columns rather than
   auto-fit/minmax: with four items and a flexible minimum, auto-fit prints
   3 + 1 at container width and a legend ending in a widow reads as if the
   fourth item belonged to something else. */
.ng-v2 .ng-mtx__key{
  list-style:none; margin:0 0 20px; padding:0;
  display:grid; grid-template-columns:minmax(0,1fr);
  gap:8px 24px;
}
@media (min-width:620px){
  .ng-v2 .ng-mtx__key{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (min-width:960px){
  .ng-v2 .ng-mtx__key{ grid-template-columns:repeat(4,minmax(0,1fr)); }
}
.ng-v2 .ng-mtx__key > li{
  display:flex; align-items:baseline; gap:8px;
  padding:0; margin:0;
  min-width:0;
  font-size:14px; line-height:1.4;
  color:var(--ng-muted);
}
.ng-v2 .ng-mtx__kl{
  font-family:var(--ng-font-display); font-weight:700;
  color:var(--ng-ink);
}
/* The swatch is redundant with the letter that follows it, so it is decoration
   under 1.4.11 rather than a graphical object that must clear 3:1. The
   hairline is there so the two pale tints still have an edge. */
.ng-v2 .ng-mtx__sw{
  flex:none;
  display:inline-block;
  width:10px; height:10px; border-radius:3px;
  border:1px solid var(--ng-hairline);
  transform:translateY(1px);
}
.ng-v2 .ng-mtx__sw.is-a{ background:var(--ng-accent); border-color:var(--ng-accent); }
.ng-v2 .ng-mtx__sw.is-b{ background:var(--ng-indigo); border-color:var(--ng-indigo); }
.ng-v2 .ng-mtx__sw.is-c{
  background:var(--ng-accent-wash);
  background:color-mix(in srgb, var(--ng-accent) 46%, var(--ng-surface));
}
.ng-v2 .ng-mtx__sw.is-d{
  background:var(--ng-surface-sunken);
  background:color-mix(in srgb, var(--ng-indigo) 48%, var(--ng-surface));
}


/* ==========================================================================
   3. THE LEDGER  (.ng-led) — section 20's four segmentation titles
   ==========================================================================
   THIS IS THE CARD GRID THAT IS NOT THERE. ARCHETYPES.md: "Do not reach for a
   card grid by default — that is the shape this run exists to break up." Four
   named things, each with a criteria list and a definition, are a LEDGER: an
   ordinal, a subject, and a paragraph, on ruled rows. It buys two things
   besides variance — each paragraph runs at reading measure instead of being
   squeezed into a 45ch card, and the two groups can carry an intro sentence
   each without a third surface appearing.

   NO SURFACE AT ALL, ON PURPOSE. This band is the ground; the rows are
   hairlines on paper. The page already has one raised panel (section 30) and
   one mist band, and the two surface roles are enough. A ledger that is also a
   card is just a card.

   THREE COLUMNS ABOVE 900, TWO BELOW. The ordinal keeps its own column at
   every width — at mobile it spans both rows of a two-row grid area, so the
   subject and the body stack beside it rather than under it. A number on a
   line of its own reads as a heading for the thing after it, which it is not. */
.ng-v2 .ng-led__group + .ng-led__group{
  margin-top:38px;
  padding-top:34px;
  border-top:2px solid var(--ng-hairline);
}
/* (0,3,0) doubled — the theme's `h?:not(:first-child){margin-top:50px}` at
   (0,2,2) is what this beats. PATTERNS.md §11. */
.ng-v2 .ng-led__gname.ng-led__gname{
  margin:0;
  font-size:21px; line-height:1.3;
  letter-spacing:-0.01em;
  color:var(--ng-ink);
}
.ng-v2 .ng-led__gbody{
  margin:10px 0 0;
  max-width:80ch;
  font-size:15px; line-height:1.6;
  color:var(--ng-muted);
}
.ng-v2 .ng-led__list{
  list-style:none; margin:20px 0 0; padding:0;
}
.ng-v2 .ng-led__row{
  display:grid;
  grid-template-columns:44px minmax(0,1fr);
  grid-template-areas:
    "n subj"
    "n body";
  column-gap:16px; row-gap:12px;
  padding:22px 0;
  border-top:1px solid var(--ng-hairline);
}
@media (min-width:900px){
  .ng-v2 .ng-led__row{
    grid-template-columns:44px minmax(0,270px) minmax(0,1fr);
    grid-template-areas:"n subj body";
    column-gap:28px;
    align-items:start;
  }
}
/* THE ORDINAL AND THE ICON SHARE ONE COLUMN, and that was a correction made
   from a 1440 screenshot, not from an assertion. The icon chip started INSIDE
   the subject column, above the title: with `align-items:start` the body
   paragraph in column three then began ~60px above the title it belongs to,
   and the row read as if its definition belonged to the row above. Both marks
   in column one means the ordinal, the title and the body all start on the
   same line. The column is 44px because that is the chip's size; the ordinal
   is narrower and sits inside it. */
.ng-v2 .ng-led__mark{
  grid-area:n;
  display:flex; flex-direction:column; align-items:flex-start;
  gap:12px;
}
/* 12px at .1em (ratio .10) — a tracked label BY MEASUREMENT, which is what
   ng-page-check actually tests. */
.ng-v2 .ng-led__n{
  font-family:var(--ng-font-label); font-weight:600;
  font-size:12px; line-height:1.55; letter-spacing:.1em;
  text-transform:none;
  color:var(--ng-accent);             /* 5.35:1 on the ground */
  font-variant-numeric:tabular-nums;
}
.ng-v2 .ng-led__subj{
  grid-area:subj;
  min-width:0;
}
.ng-v2 .ng-led__name.ng-led__name{
  margin:0;
  font-size:19px; line-height:1.3;
  letter-spacing:-0.01em;
  color:var(--ng-ink);
}
/* The row's own property: WHICH CRITERIA this title works from. Every value in
   it is lifted from that title's own paragraph, so the meta cannot say more
   than the client does. 11px at .1em (ratio .10). */
.ng-v2 .ng-led__meta{
  margin:9px 0 0;
  font-family:var(--ng-font-label); font-weight:600;
  font-size:11px; line-height:1.45; letter-spacing:.1em;
  text-transform:none;
  color:var(--ng-muted);
}
.ng-v2 .ng-led__body{
  grid-area:body;
  margin:0;
  max-width:62ch;
  font-size:16px; line-height:1.65;
  color:var(--ng-muted);
}


/* ==========================================================================
   4. THE PRIORITY REPORT  (.ng-rep, .ng-ord on .ng-dtable) — section 30
   ==========================================================================
   ONE WHITE PANEL ON THE MIST BAND, which is the surface rule: mist holds
   white chrome, never plain text on nothing. The old version put TWO panels
   here at 58/42 and the height difference between them was ~390px of dead
   column — reported as 0% dead air by ng-page-check, because its blank-band
   test is full-width and that void was 42% of one. One artefact per band
   cannot have that defect.

   THE FACT STRIP IS THE REPORT HEADER, not a proof strip. ng-shared §15c runs
   key/value pairs ACROSS the container, which is exactly what a report header
   wants: what market, how many segments, which target segment, which rule
   produced the ordering. The old version stated the rule once, in prose, under
   the panel; it is above the table now, where a reader meets it before the
   numbers rather than after.

   FORCED TO TWO COLUMNS BELOW 960. §15c goes 2 up below 640 and 3 up above,
   and four cells in three columns breaks 3+1 with a half-width rule over the
   lone cell — the same orphan the health leaf recorded for three cells. Four
   halves; four does not third. */
.ng-v2 .ng-rep__facts{
  margin:0 0 22px;
  padding-bottom:20px;
  border-bottom:1px solid var(--ng-hairline);
}
@media (max-width:959px){
  .ng-v2 .ng-rep__facts{
    grid-template-columns:repeat(2,minmax(0,1fr));
    padding-bottom:8px;
  }
  /* The first row sits directly under the panel's chrome bar, which already
     draws a hairline; §15c's own border-top on every cell would draw a second
     one 0px away from it. */
  .ng-v2 .ng-rep__facts .ng-facts__cell:nth-child(-n+2){
    border-top:0;
    padding-top:0;
  }
}

/* THE RANKED TABLE. Five columns, every row sharing them, so it is a real
   <table> with <caption>, <thead> and <th scope> and a screen reader announces
   the column when it reads a cell. That is the argument for a table over four
   more boxes, and it is only possible because the artefact has the whole
   container: the old hand-built rows existed because four columns of real
   content do not survive 42% of it.

   COLUMN WIDTHS BELONG TO THE PAGE. RANK, SHARE and LARGEST are fixed because
   their contents are two characters, three characters and one; REGION takes a
   percentage; and the recommendation column absorbs the rest, because it is
   the only cell whose text can wrap without looking broken. */
.ng-v2 .ng-ord{
  table-layout:fixed;
}
.ng-v2 .ng-ord tr > :nth-child(1){ width:56px; }
.ng-v2 .ng-ord tr > :nth-child(2){ width:26%; }
.ng-v2 .ng-ord tr > :nth-child(3){ width:104px; }
.ng-v2 .ng-ord tr > :nth-child(4){ width:104px; }
.ng-v2 .ng-ord th,
.ng-v2 .ng-ord td{
  padding-block:16px;
  vertical-align:top;
}
.ng-v2 .ng-ord thead th.ng-ord__hs,
.ng-v2 .ng-ord thead th.ng-ord__hb{
  text-align:right;
}
/* 11px at .1em (ratio .10) — tracked label by measurement, pre-uppercased. */
.ng-v2 .ng-ord tbody td.ng-ord__n{
  font-family:var(--ng-font-label); font-weight:600;
  font-size:11px; line-height:1.9; letter-spacing:.1em;
  text-transform:none;
  color:var(--ng-muted);
  font-variant-numeric:tabular-nums;
}
/* 18px, which is why --ng-accent and not --ng-accent-display: display magenta
   is reserved for 24px and above and would fail AA here. 5.64:1 on white. */
.ng-v2 .ng-ord tbody td.ng-ord__share{
  font-family:var(--ng-font-display); font-weight:700;
  font-size:18px; line-height:1.2;
  letter-spacing:-0.01em;
  text-align:right;
  color:var(--ng-ink);
  font-variant-numeric:tabular-nums;
}
/* ONE ACCENT ROW, exactly as the homepage hero's ranked candidates and both
   sibling leaves do it. If every rank were accent the ordering would read as a
   brand pattern rather than as a ranking. */
.ng-v2 .ng-ord tbody tr.is-top td.ng-ord__n,
.ng-v2 .ng-ord tbody tr.is-top td.ng-ord__share{
  color:var(--ng-accent);
}
/* The swatch ties this cell back to the matrix at the top of the page: the
   letter is the same letter, in the same colour, and a reader who scrolled
   past the legend does not have to go back for it. */
.ng-v2 .ng-ord tbody td.ng-ord__big{
  font-family:var(--ng-font-display); font-weight:600;
  font-size:15px; line-height:1.4;
  text-align:right;
  color:var(--ng-ink);
}
.ng-v2 .ng-ord tbody td.ng-ord__big .ng-mtx__sw{
  margin-right:7px;
}
.ng-v2 .ng-ord tbody td.ng-ord__do{
  font-size:15px; line-height:1.5;
  color:var(--ng-muted);
}
.ng-v2 .ng-rep__panel{
  height:auto;                        /* one panel, nothing to equalise */
}
.ng-v2 .ng-rep__note{
  margin-top:24px;
  max-width:92ch;
}
/* The masthead's ghost CTA lands here, and the theme's header is sticky under
   1365px. Without this the panel's chrome bar arrives under the header. */
@media (max-width:1364px){
  .ng-v2 .ng-rep{ scroll-margin-top:84px; }
}


/* ==========================================================================
   5. STAGES AND GAINS  (.ng-duo, .ng-gain) — section 40
   ==========================================================================
   TWO OLD SECTIONS IN ONE BAND, because the assignment is five sections and
   the page had six. They belong together: the ladder is what happens, the
   gains are what it is for, and both are the client's own words.

   THE LADDER RUNS DOWN. ng-shared §13c is a 3-up grid above 860 and every
   sibling leaf prints it that way — one of the shapes this pass exists to
   vary. In a 62% column three abreast is three 220px slivers, and a sequence
   read top to bottom with a 2px rule over each step is what a process looks
   like anyway. Doubled class at (0,3,0) so it beats §13c's own (0,2,0) rule
   inside §13c's min-width:860 query without needing a media query here.

   THE GAINS ARE A RULED COLUMN, NOT A PLATE. The old version was a raised
   white plate on a mist band. This band is the ground, and a white plate
   floating to the right of a leaf's copy is the aside this pass is removing,
   moved down the page. A hairline and four ruled rows say the same thing. */
.ng-v2 .ng-duo{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:34px;
}
@media (min-width:960px){
  .ng-v2 .ng-duo{
    grid-template-columns:minmax(0,1fr) minmax(0,330px);
    column-gap:54px;
    align-items:start;
  }
}
.ng-v2 .ng-duo__steps.ng-duo__steps{
  grid-template-columns:minmax(0,1fr);
  gap:28px;
}
.ng-v2 .ng-gain{
  min-width:0;
}
@media (min-width:960px){
  .ng-v2 .ng-gain{
    padding-left:40px;
    border-left:1px solid var(--ng-hairline);
  }
}
@media (max-width:959px){
  .ng-v2 .ng-gain{
    padding-top:30px;
    border-top:2px solid var(--ng-hairline);
  }
}
.ng-v2 .ng-gain__kick{
  margin:0;
}
.ng-v2 .ng-gain__title.ng-gain__title{
  margin:12px 0 0;
  font-size:24px; line-height:1.25;
  letter-spacing:-0.018em;
  color:var(--ng-ink);
}
.ng-v2 .ng-gain__lede{
  margin:12px 0 0;
  font-size:15px; line-height:1.6;
  color:var(--ng-muted);
}
.ng-v2 .ng-gain__list{
  list-style:none; margin:22px 0 0; padding:0;
}
.ng-v2 .ng-gain__row{
  display:flex; align-items:baseline; gap:13px;
  padding:13px 0;
  border-top:1px solid var(--ng-hairline);
}
.ng-v2 .ng-gain__row:last-child{ padding-bottom:0; }
/* 12px at .1em (ratio .10) — an ordinal glanced at beside a line, not read. */
.ng-v2 .ng-gain__n{
  flex:0 0 auto;
  font-family:var(--ng-font-label); font-weight:600;
  font-size:12px; line-height:1.85; letter-spacing:.1em;
  text-transform:none;
  color:var(--ng-accent);             /* 5.35:1 on the ground */
  font-variant-numeric:tabular-nums;
}
.ng-v2 .ng-gain__t{
  min-width:0;
  font-size:16px; line-height:1.5;
  color:var(--ng-ink);
}


/* ==========================================================================
   6. RESPONSIVE
   ng-shared carries the 44px hit areas (crumbs, buttons, chips) at 767, at
   768-1023 and at exactly 1024, and the 16px reading floor at 767. The only
   interactive things on this page are those primitives — the matrix, the
   ledger, the report table and the gains column are all static DOM — so this
   block is type, column widths and rhythm only.
   ========================================================================== */

@media (max-width:1023px){
  /* The matrix loses the air it does not need before it loses a column. */
  .ng-v2 .ng-mtx tr > :nth-child(1){ width:128px; }
  .ng-v2 .ng-mtx tbody td.ng-mtx__barc{ padding-left:12px; padding-right:14px; }
  .ng-v2 .ng-mtx thead th.ng-mtx__hbar{ padding-left:12px; }
}

@media (max-width:767px){
  .ng-v2 .ng-masthead--fig .ng-mfig__copy{ margin-top:28px; padding-top:26px; }
  /* Sentences, not labels: they take the mobile reading floor like every other
     .ng-note on the site. ng-shared already sets .ng-note to 15px at this
     width; these are restated only where a different measure is wanted. */
  .ng-v2 .ng-mfig__note,
  .ng-v2 .ng-mfig__foot,
  .ng-v2 .ng-vals__note,
  .ng-v2 .ng-how__note,
  .ng-v2 .ng-rep__note{ max-width:none; }
  .ng-v2 .ng-masthead--fig .ng-mfig__foot{ font-size:15px; }
  .ng-v2 .ng-masthead--fig .ng-mfig__ask{ font-size:16px; }

  .ng-v2 .ng-mtx tr > :nth-child(1){ width:118px; }
  .ng-v2 .ng-mtx tr > :nth-child(n+3){ width:66px; }
  .ng-v2 .ng-mtx th,
  .ng-v2 .ng-mtx td{ padding-block:13px; }
  .ng-v2 .ng-mtx tbody td.ng-mtx__num{ font-size:16px; }

  .ng-v2 .ng-led__body{ font-size:16px; max-width:none; }
  .ng-v2 .ng-led__gbody{ font-size:16px; }

  .ng-v2 .ng-ord th,
  .ng-v2 .ng-ord td{ padding-block:14px; }
  .ng-v2 .ng-ord tbody td.ng-ord__do{ font-size:15px; }

  .ng-v2 .ng-gain__title.ng-gain__title{ font-size:22px; }
  .ng-v2 .ng-gain__lede{ font-size:16px; }
}

/* THE MATRIX AT PHONE WIDTH. Container is 342px at 390. Five columns fit it —
   118px for the region name and four 60px numeric columns with §15b's 7px
   mobile cell padding — and six do not. The bar column is the one that goes,
   because it is the only cell on the row that says nothing the row does not
   already print in text: it is aria-hidden for exactly that reason, so hiding
   it removes no information from anyone.

   THE ALTERNATIVE WAS TO LET .ng-dtable__wrap SCROLL, and ng-shared's own
   comment on that wrapper rules it out: "a table that only fits by scrolling
   has hidden a column from every phone". A column deliberately dropped with a
   stated reason is not the same thing as a column pushed off the edge. */
@media (max-width:619px){
  .ng-v2 .ng-mtx__hbar,
  .ng-v2 .ng-mtx__barc{ display:none; }
  .ng-v2 .ng-mtx tr > :nth-child(1){ width:auto; }
  .ng-v2 .ng-mtx tr > :nth-child(n+3){ width:60px; }
  .ng-v2 .ng-mtx th,
  .ng-v2 .ng-mtx td{ padding-inline:5px; }
  .ng-v2 .ng-mtx th:first-child,
  .ng-v2 .ng-mtx td:first-child{ padding-left:0; }
  .ng-v2 .ng-mtx th:last-child,
  .ng-v2 .ng-mtx td:last-child{ padding-right:0; }

  /* The report table keeps all five columns — RANK, SHARE and LARGEST are two,
     three and one character wide, so the recommendation column still gets
     ~115px and wraps to four lines rather than being hidden. */
  .ng-v2 .ng-ord tr > :nth-child(1){ width:34px; }
  .ng-v2 .ng-ord tr > :nth-child(2){ width:82px; }
  .ng-v2 .ng-ord tr > :nth-child(3){ width:56px; }
  .ng-v2 .ng-ord tr > :nth-child(4){ width:46px; }
  .ng-v2 .ng-ord th,
  .ng-v2 .ng-ord td{ padding-inline:5px; }
  .ng-v2 .ng-ord th:first-child,
  .ng-v2 .ng-ord td:first-child{ padding-left:0; }
  .ng-v2 .ng-ord th:last-child,
  .ng-v2 .ng-ord td:last-child{ padding-right:0; }
  .ng-v2 .ng-ord tbody td.ng-ord__big .ng-mtx__sw{ display:none; }
}


/* ==========================================================================
   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, which would otherwise drag every card on the site up and left by
   half its own size — and ng-components.css §8 does the same for .ng-anim.
   Nothing on this page adds motion beyond those two: the matrix, the ledger,
   the report table and the gains column are static DOM with no transitions,
   precisely so that 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.

   ONE OVERRIDE THIS SHEET USED TO CARRY AND NO LONGER NEEDS: the
   `.ng-aside__quote.ng-aside__quote{margin:0}` defence against the theme's
   `blockquote:not(:first-child){margin-top:2.5rem}` pair. This page has no
   aside and no blockquote any more. The bug is still real on the three sibling
   leaves that do (akaryakit, optimizasyon, tahminleme) and still belongs in
   ng-shared.css §13a, which is in the report rather than here.
   ========================================================================== */


/* ==========================================================================
   8. THE CLOSING PLATE  (.ng-endplate, on .ng-figband__fig) — section 40
   ==========================================================================
   IMAGE PASS, 2026-08-18. ONE client image on this page, and this is its box.

   WHY IT IS DOWN HERE. The opening of this page is already an artefact — the
   segment matrix above the h1, which is what the C-FIGURE assignment asked
   for. A picture near the top would give the page two openings and would walk
   it straight into the two-framed-pictures-above-the-h1 shape /sektorler/
   perakende/ now owns. So the picture is the LAST content beat of section 40,
   the full stop before the indigo band.

   WHY IT IS NARROW. 640px inside a 1120px container. ng-shared §17's frame is
   as wide as whatever holds it, and at full container width this would be a
   fifth BAND on a page whose whole argument is matrix → ledger → table →
   ladder. Centred and short of the measure on both sides, it reads as one
   plate closing the section rather than as another band opening one. It also
   sits under 780px, so the 780x540 raster is never upscaled and never goes
   soft — the cap INSTRUCTIONS asks for, taken further than the 780 minimum
   because the composition wanted it, not because the raster did.

   THE CAPTION IS CENTRED WITH THE PLATE. It keeps §17's 68ch measure — a
   figcaption is a sentence and takes the 14px reading floor — but centres
   under a centred frame instead of hanging off its left edge, which is the
   only thing that makes 640px read as deliberate rather than as a band that
   failed to fill. Nothing here is language-specific: the two captions are
   within a few words of each other and centre the same way in both.

   NO NEW SURFACE, NO NEW MOTION. The frame, the chip and the caption are all
   ng-shared §17 untouched. This section adds two boxes and a text-align. */
.ng-v2 .ng-endplate{
  max-width:640px;
  margin-inline:auto;
  margin-top:54px;
}
.ng-v2 .ng-endplate .ng-figband__cap{
  margin-inline:auto;
  text-align:center;
}

/* 390: the container is 342px, so the 640 cap never bites and the plate is
   simply the section's last full-width element. The gap closes with it —
   ng-shared §17's own max-width:767px block already takes the caption to 15px
   and its measure to none, and moves the chip in to 12px/12px, which is the
   whole of the mobile story. The caption stays centred at that width too. */
@media (max-width:767px){
  .ng-v2 .ng-endplate{ margin-top:38px; }
}


/* ==========================================================================
   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 figure.ng-endplate.ng-endplate.ng-endplate{ margin-inline:auto; margin-top:54px; }
@media (max-width:767px){
  .ng-v2 .ng-section .ng-container figure.ng-endplate.ng-endplate.ng-endplate{ margin-top:38px; }
}