/* ==========================================================================
   /sektorler/telekom/  +  /en/sectors/telecommunication/
   ONE stylesheet for the pair. TR 23218 · EN 25752.

   VARIANCE PASS ASSIGNMENT (variance-plan.json, not negotiable):
       opening   B-STACK      no aside; full-width h1; content starts high
       dark      MIDDLE       the indigo band is section 30 of 4
       sections  4            masthead + crosswalk table + dark samples + flow

   THE SILHOUETTE THIS BUILDS
       10  LIGHT   stack masthead — h1, quoted hub question, lede, CTAs,
                   a 4-cell key/value strip
       20  LIGHT   THE DOMINANT SHAPE: a crosswalk TABLE of the four analysis
                   titles, in two row-groups, with an annotation row per item
       30  INDIGO  the two sample artefacts, stacked full width, on the dark
                   band — including a DIVERGING coefficient chart
       40  LIGHT   a left-to-right three-stage flow, chips, and a mist close rail

   HOW IT DIFFERS FROM THE TWO SIBLINGS WITH THE SAME ASSIGNMENT. akaryakit and
   otomotiv are also B-STACK / MIDDLE / 4, so the opening archetype alone cannot
   separate these three pages and the content shapes have to:

       akaryakit   L · MIST ranked table + key/value report · DARK ruled index
                   · LIGHT vertical .ng-steps ladder + close rail
       otomotiv    L · DARK ranked ledger · LIGHT vertical .ng-spine ladder
                   · LIGHT Q&A + close rail
       telekom     L · LIGHT crosswalk table · DARK sample artefacts
                   · LIGHT horizontal flow + close rail

   Three different tonal sequences, three different dominant shapes, three
   different method diagrams. This page is the only one of the three whose
   indigo band carries the artefacts rather than an index or a ledger, and the
   only one whose method reads left to right.

   RULES THIS FILE OBEYS: tokens only, no !important, no literal colours, one
   h1, 14px body floor / 16px mobile floor, 11px only for tracked labels at
   >=0.08em (which is what ng-page-check MEASURES, not an allowlist), 44px hit
   areas to and including 1024px.

   Primitives reused from ng-shared.css, not re-authored here: .ng-section,
   .ng-container, .ng-crumbs, .ng-eyebrow, .ng-masthead(+--stack), .ng-lede,
   .ng-actions, .ng-btn, .ng-arrow, .ng-note, .ng-hl, .ng-section-head,
   .ng-dtable(+__wrap/__cap), .ng-facts(+--4/__cell/__k/__v), .ng-out(+chrome),
   .ng-pills, .ng-lead__note, .ng-how__note, .ng-how__links, .ng-vals__note,
   .ng-out-band(+__note).
   ========================================================================== */


/* ==========================================================================
   1. MASTHEAD — the B-STACK opening
   ========================================================================== */

/* The sticky theme header is ~84px below 1365px, so the two in-page anchors
   (#analiz-basliklari from nothing, #ornek-cikti from the masthead's ghost
   button) would land under it without this. */
@media (max-width:1364px){
  .ng-v2 .ng-mapband,
  .ng-v2 .ng-out-band{ scroll-margin-top:84px; }
}

/* --- 1a. .ng-askline — the hub's question, in the first viewport -----------
   Leaf rule 1 in PATTERNS.md: "Answer the hub's question out loud, in the
   first viewport… quote it verbatim." Tranche 2 did that in a mist .ng-aside
   plate on the right. B-STACK forbids the plate — ARCHETYPES.md is explicit
   that the absence is the point and that it must not come back lower as a
   summary card — so the quote becomes a line that runs the full container
   instead of a column that sits beside one.

   NOT A LEFT-RULED FRAGMENT. /sektorler/akaryakit/, the other sektorler leaf
   assigned B-STACK, already puts a 3px accent bar and a single grey line under
   its h1. Label and quote on ONE row with a rule UNDERNEATH is a different
   object built from the same two parts, and it lets the label name where the
   question came from — which the bar alone cannot.

   The doubled class on the quote is the §11 defence applied to a <blockquote>:
   the theme styles bare blockquotes and this element is not inside .ng-prose,
   so margin, padding, border and the ::before/::after quote glyphs are all
   restated rather than assumed. */
.ng-v2 .ng-askline{
  margin:22px 0 0;
  padding:0 0 22px;
  border-bottom:1px solid var(--ng-hairline);
  display:grid;
  grid-template-columns:minmax(0,1fr);
  row-gap:8px;
}
@media (min-width:880px){
  .ng-v2 .ng-askline{
    grid-template-columns:max-content minmax(0,1fr);
    column-gap:26px;
    align-items:baseline;
  }
}
.ng-v2 .ng-askline__k{ margin:0; }
.ng-v2 .ng-askline__q.ng-askline__q{
  margin:0;
  padding:0;
  border:0;
  background:none;
  font-family:var(--ng-font-display); font-weight:500;
  font-size:clamp(1.05rem, 1.9vw, 1.28rem);
  line-height:1.4;
  letter-spacing:-0.008em;
  color:var(--ng-muted);              /* 6.01:1 on ground */
  quotes:none;
}
.ng-v2 .ng-askline__q::before,
.ng-v2 .ng-askline__q::after{ content:none; }
.ng-v2 .ng-askline + .ng-masthead__lede{ margin-top:24px; }

/* --- 1b. .ng-lead__facts — the proof strip, as a report header ------------
   THIS IS THE ONE PLACE THE TWO B-STACK SEKTORLER LEAVES WOULD HAVE COLLIDED.
   akaryakit keeps ng-shared's .ng-masthead__proof: three big display numerals
   with small labels beneath them. Two pages in one group opening with a huge
   headline over three big numerals is precisely the "I can't tell which page
   I'm on" complaint, one archetype deeper.

   §15c's .ng-facts inverts the pair — a 14px label ABOVE a 20px value, with
   vertical hairlines between cells — so the same three facts read as the
   header of a report instead of as a scoreboard. It also takes four cells
   across the container where the proof strip takes three, which is why the
   third countable fact on this page (three steps in section 40) could be
   admitted rather than left implicit.

   No top rule below 960: .ng-facts__cell already draws its own border-top when
   the strip wraps to two rows, and a strip rule on top of those is a doubled
   line. Above 960 the cells switch to left borders and the strip needs one. */
.ng-v2 .ng-lead__facts{ margin:34px 0 0; }
@media (min-width:960px){
  .ng-v2 .ng-lead__facts{
    padding-top:26px;
    border-top:1px solid var(--ng-hairline);
  }
}


/* ==========================================================================
   2. SECTION 20 — .ng-legend and .ng-map, the crosswalk table
   ========================================================================== */

/* --- 2a. .ng-legend — the two halves of the hub question ------------------
   The <dl> that was the aside's bullet list. It is a legend for the table's
   two row-groups, so it sits directly above the table and uses the same two
   words — NEREYE / NE OLUR, WHERE / HOW WELL — as the group headers. Authored
   pre-uppercased with text-transform inherited as none from .ng-eyebrow: the
   Turkish case engine maps i->I, so "NEREYE" is safe but a CSS-uppercased
   "İSTASYON" would not be, and the rule is applied uniformly rather than
   per-string.

   Two columns above 900, one below. Rules on TOP of each row rather than
   between them, so a one-column stack still reads as a list of two and does
   not end on a dangling rule. */
.ng-v2 .ng-legend{
  margin:34px 0 0;
  display:grid;
  gap:0;
}
@media (min-width:900px){
  .ng-v2 .ng-legend{
    grid-template-columns:repeat(2,minmax(0,1fr));
    column-gap:44px;
  }
}
.ng-v2 .ng-legend__row{
  padding:16px 0 18px;
  border-top:1px solid var(--ng-hairline);
  display:grid;
  grid-template-columns:minmax(0,1fr);
  row-gap:7px;
}
.ng-v2 .ng-legend__k{ margin:0; }
.ng-v2 .ng-legend__v{
  margin:0;                            /* <dd> ships with margin-inline-start:40px */
  font-size:15px; line-height:1.6;
  color:var(--ng-muted);
}

/* --- 2b. .ng-map — the crosswalk table ------------------------------------
   Built on §15b's .ng-dtable, which already beats the three theme rules a
   table has to beat (the (0,1,4) cell border/padding rule and the two (0,2,2)
   `table:not(:first-child)` margin rules). Everything below is this page's
   content shape on top of that.

   EVERY RULE HERE IS ELEMENT-QUALIFIED — `th.ng-map__name`, not `.ng-map__name`
   — AND THAT IS NOT STYLE. ng-shared's own component rules are
   `.ng-v2 .ng-dtable tbody th` and `.ng-v2 .ng-dtable tbody td`, both (0,2,1).
   A bare `.ng-v2 .ng-map__name` is (0,2,0) and LOSES to them, so the row
   headers would silently render at ng-shared's 16px and the description rows
   at ng-shared's muted 15px with a bottom border — a perfectly plausible
   table that is not the one authored. This page has already been bitten by
   exactly this once: see §3a on .ng-move, where a blanket (0,2,1) reset beat
   every (0,2,0) component rule and the table rendered entirely left-aligned at
   weight 400 while ng-page-check called the page clean.

   TWO COLUMNS, NOT THREE, AND THE THIRD ONE MOVED INTO THE ANNOTATION ROW.
   The first build put subject / what-it-returns / destination on the item row.
   Measured at 390: min-content 368px against 342px available — "Segmentasyonu"
   (17px), "segmentleri" (16px) and "Segmentasyon" (15px) are unbreakable words
   — so §15b's `.ng-dtable__wrap{overflow-x:auto}` scrolled and the destination
   column was off-screen on every phone. ng-page-check said `clean` and 0px
   overflow both times, correctly: the PAGE did not overflow, a scroll
   container inside it did. Found by measuring the rightmost ink column in the
   390 screenshot — 365px, hard against the clip edge, mid-word.

   The destination now lives in .ng-map__ann, which is a 1fr/max-content grid
   at 900+ (so the link keeps its own aligned right-hand column and the
   crosswalk still reads across) and a stack below. max-content rather than a
   fixed track: PATTERNS records that a fixed 230px track on akaryakit made the
   longest label fill the line exactly and push its arrow onto a line of its
   own, reading as a stray glyph.

   BORDERS RUN UNDER THE ANNOTATION ROW, NOT UNDER THE ITEM ROW, so each
   title + its sentence read as one block with a rule between blocks. */
.ng-v2 .ng-mapband .ng-dtable__wrap{ margin-top:30px; }

.ng-v2 .ng-map tr.is-group > th{
  padding:14px 0 12px;
  border-bottom:1px solid var(--ng-hairline);
  font-family:var(--ng-font-label); font-weight:600;
  font-size:12px; line-height:1.3; letter-spacing:.12em;
  text-transform:none;                /* strings authored pre-uppercased */
  color:var(--ng-accent);             /* 5.35:1 on ground */
}
/* The second group needs air above it; the first sits right under the column
   headers and does not. `tbody + tbody` is the only selector that says that
   without hard-coding which group is which. */
.ng-v2 .ng-map tbody + tbody tr.is-group > th{ padding-top:34px; }

.ng-v2 .ng-map tr.is-item > th,
.ng-v2 .ng-map tr.is-item > td{
  border-bottom:0;
  padding-top:18px;
  padding-bottom:6px;
  vertical-align:baseline;
}
.ng-v2 .ng-map th.ng-map__name{
  font-family:var(--ng-font-display); font-weight:600;
  font-size:17px; line-height:1.3;
  letter-spacing:-0.008em;
  color:var(--ng-ink);
}
.ng-v2 .ng-map td.ng-map__out{
  font-family:var(--ng-font-label); font-weight:600;
  font-size:15px; line-height:1.35;
  color:var(--ng-ink);
}
.ng-v2 .ng-map tr.is-note > td{
  padding-top:0;
  padding-bottom:22px;
  border-bottom:1px solid var(--ng-hairline);
}
/* The annotation: the client's sentence and the row's destination. One grid so
   the four links align with each other down the right-hand edge and the four
   sentences share one left edge with the row headers above them. */
.ng-v2 .ng-map__ann{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:8px;
}
@media (min-width:900px){
  .ng-v2 .ng-map__ann{
    grid-template-columns:minmax(0,1fr) max-content;
    column-gap:40px;
    align-items:start;
  }
}
.ng-v2 .ng-map__what{
  margin:0;
  max-width:82ch;
  font-size:15px; line-height:1.6;
  color:var(--ng-muted);              /* 6.01:1 on ground */
}
.ng-v2 .ng-map__to{
  display:inline-flex; align-items:center; gap:8px;
  justify-self:start;
  font-family:var(--ng-font-label); font-weight:600;
  font-size:15px; line-height:1.3;
  color:var(--ng-accent);             /* 5.35:1 on ground */
  text-decoration:none;
}
@media (min-width:900px){
  .ng-v2 .ng-map__to{ white-space:nowrap; }
}
.ng-v2 .ng-map__to:hover{
  color:var(--ng-accent-hover);
  text-decoration:underline;
}
/* The one interactive thing this section adds. ng-mobile.css §7 carries the
   44px minimum for .ng-btn, .ng-crumbs__link and the pills; a bare <a> inside
   a table cell is not in that list, so it is set here — to and INCLUDING 1024,
   which is the boundary the checker enforces and the one this project has now
   had to fix three times in three different files. */
@media (max-width:1024px){
  .ng-v2 .ng-map__to{ min-height:44px; }
}
/* ng-shared drops the bottom border on the last row of a tbody so a table does
   not end on a rule. Here there are two tbody elements and the first one's
   last row is a description in the middle of the table, which does want its
   rule. Restated at (0,3,2), which beats ng-shared's (0,3,1). */
.ng-v2 .ng-map tbody:first-of-type tr:last-child > td{
  border-bottom:1px solid var(--ng-hairline);
}
.ng-v2 .ng-map tbody:last-of-type tr:last-child > td{ border-bottom:0; }

/* Which column is wide is a property of the content, so it is set here and not
   in ng-shared — §15b says exactly that. The subject column takes the slack;
   the return column is sized to its longest value plus air. */
@media (min-width:900px){
  .ng-v2 .ng-map thead th:nth-child(2){ width:34%; }
}


/* ==========================================================================
   3. SECTION 30 — the artefacts, on the indigo band
   ========================================================================== */

/* --- 3a. .ng-sample__stack -----------------------------------------------
   The two panels are STACKED at full container width rather than paired in
   .ng-out-band__pair the way every other leaf on this site puts them. The
   coefficient chart in §3c is a DIVERGING chart with its zero axis down the
   middle: in a 530px half-column the negative half is 250px, the factor names
   have nowhere to go, and the one negative weight stops reading as a direction.

   A CONSEQUENCE WORTH RECORDING: this page used to carry a private override
   forcing .ng-out__bar to wrap at EVERY width, because at 548px the panel
   chrome ellipsised the subject line to "Örnek model · mevcut mağaza ağı
   üzerind…" and the panel silently stopped saying what it was a sample OF.
   That override is DELETED, not kept "just in case": the bar now has ~1040px,
   ng-shared's own <=767 wrap rule covers the phone, and a rule that forces two
   rows of chrome where one fits is a rule that costs 18px for nothing. If the
   panels are ever paired again, put it back. */
.ng-v2 .ng-sample__stack{
  margin-top:34px;
  display:grid;
  gap:24px;
}

/* .ng-out and its whole chrome are written in tokens, and .is-dark redefines
   those same token names, so the panels invert on their own: 6%-paper fill,
   16%-paper hairline, --ng-shadow-card:none (ng-foundation §3 — a navy drop on
   navy is a smudge). Nothing in §3a-3c needs a dark branch EXCEPT the one
   token .is-dark does not redefine; see §3c. */
.ng-v2 .ng-out-band__note{
  margin:26px auto 0;
  max-width:88ch;
  text-align:center;
}

/* --- 3b. .ng-move — the competitor movement table -------------------------
   A REAL <table>, because this is real tabular data: five regions crossed with
   own count, rival count and what changed in three months. The client's own
   Rekabet Raporları sentence describes a periodic diff — "aylık düzenli olarak
   takip ederek… bölge bazında izleyin" — and a bar chart or a ranked list would
   misrepresent it as a single ordering. <th scope="row"> on the region and
   <th scope="col"> on the four headers means a screen reader announces
   "Kartal, RAKİP, 3" rather than a bare number.

   THE HIGHLIGHTED ROW IS THE POINT OF THE PANEL, not decoration: it is the
   region where the operator holds NO point and a rival is still opening one.
   That row is the answer to "nereye". It is marked three ways, not one — accent
   text, an accent-wash fill, and the literal value 0 in its own column — because
   colour alone is not a cue (1.4.1).

   THE -4px BLEED. Cells carry 4px of inline padding so the wash has somewhere
   to sit, and the table is pulled back by the same 4px so its text still aligns
   with the .ng-out__label above it. The alternative was an indented table,
   which reads as a mistake, or a wash that starts exactly at the glyph edge,
   which reads as a selection. .ng-out has overflow:hidden, so even if the calc
   were ever wrong the page could not gain horizontal overflow from it.

   border-collapse:separate is required for the row's rounded ends; with
   collapse, border-radius on a cell is ignored. Row rules are drawn as
   border-top on every cell in the row, which with border-spacing:0 forms one
   continuous line. */
.ng-v2 .ng-move{
  width:calc(100% + 8px);
  margin:0 -4px;
  border-collapse:separate;
  border-spacing:0;
  table-layout:auto;
  font-variant-numeric:tabular-nums;
}
/* EVERY COMPONENT RULE BELOW IS ELEMENT-QUALIFIED — `th.ng-move__r`, not
   `.ng-move__r` — AND THAT IS NOT STYLE, IT IS THE BUG THIS TABLE ALREADY HAD.

   The first version of this block put the shared resets on a blanket
   `.ng-v2 .ng-move th, .ng-v2 .ng-move td`, which is (0,2,1). Every component
   class was (0,2,0). One element selector beats one class, so the blanket rule
   won every conflict: `text-align:left` and `font-weight:400` from the reset
   silently defeated the centred counts, the right-aligned change column, the
   semibold region names and the bold counts. The table rendered entirely
   left-aligned at weight 400 — a perfectly plausible-looking table, so
   ng-page-check called both pages clean and it was found by reading the 1440
   screenshot against the stylesheet. The UA's own `th{font-weight:bold;
   text-align:center}` is therefore neutralised per component here rather than
   in one blanket rule, so no rule in this block can outrank another by accident.

   The reset below is now only properties no component overrides. */
.ng-v2 .ng-move th,
.ng-v2 .ng-move td{
  border:0;
  background:transparent;
  vertical-align:baseline;
}
.ng-v2 .ng-move tbody th,
.ng-v2 .ng-move tbody td{ border-top:1px solid var(--ng-hairline); }

/* 11px at .1em tracking (ratio .10) is a tracked label BY MEASUREMENT, which is
   what ng-page-check actually tests — not an allowlist entry. Strings are
   authored already uppercase, so nothing here uppercases Turkish (the case
   engine maps i->I: "KENDİ" would print "KENDI"). */
.ng-v2 .ng-move th.ng-move__h{
  padding:0 4px 10px;
  text-align:left;
  font-family:var(--ng-font-label); font-weight:600;
  font-size:11px; line-height:1.3; letter-spacing:.1em;
  text-transform:none;
  color:var(--ng-muted);
}
.ng-v2 .ng-move th.ng-move__r{
  padding:11px 4px;
  text-align:left;
  font-family:var(--ng-font-display); font-weight:600;
  font-size:15px; line-height:1.35;
  color:var(--ng-ink);
}
.ng-v2 .ng-move td.ng-move__n{
  padding:11px 4px;
  text-align:center;
  font-family:var(--ng-font-display); font-weight:700;
  font-size:16px; line-height:1.3;
  color:var(--ng-ink);
}
/* A sentence fragment, not a label: it is read, so it takes the 14px floor
   rather than the tracked-label exception. Right-aligned, and the header with
   it: the column holds phrases of different lengths and the table is set to the
   panel's full width, so left-aligning them stranded empty cell at the panel's
   right edge. */
.ng-v2 .ng-move td.ng-move__d{
  padding:11px 4px;
  text-align:right;
  font-family:var(--ng-font-body); font-weight:400;
  font-size:14px; line-height:1.4;
  color:var(--ng-muted);
}
/* Column-alignment modifiers last, so they win over th.ng-move__h at equal
   specificity by source order. */
.ng-v2 .ng-move th.ng-move__h--n{ text-align:center; }
.ng-v2 .ng-move th.ng-move__h--d{ text-align:right; }

.ng-v2 .ng-move__row.is-gap > th,
.ng-v2 .ng-move__row.is-gap > td{ background:var(--ng-accent-wash); }
.ng-v2 .ng-move__row.is-gap > :first-child{
  border-start-start-radius:8px; border-end-start-radius:8px;
}
.ng-v2 .ng-move__row.is-gap > :last-child{
  border-start-end-radius:8px; border-end-end-radius:8px;
}
/* --ng-accent, never --ng-accent-display. On the indigo band .is-dark collapses
   both accent tiers onto #FF9BC9, which measures ~6.9:1 over the panel fill;
   the light-band magenta measured 4.87:1 on its wash. Either way this is the
   token that is safe under 24px. The first td in the row is the "KENDİ" count —
   the 0 that makes this the gap. (0,4,1), so it beats the element-qualified
   component rules above rather than tying with them. */
.ng-v2 .ng-move__row.is-gap th.ng-move__r,
.ng-v2 .ng-move__row.is-gap td.ng-move__n:first-of-type{ color:var(--ng-accent); }


/* --- 3c. .ng-coef — the DIVERGING coefficient chart ------------------------
   The client's Performans Tahminleme copy promises "faktörleri ve bu
   faktörlerin katsayılarını". A coefficient model IS the deliverable; a score
   would be the wrong artefact and a paragraph is what the page being replaced
   already had.

   WHY IT DIVERGES FROM A ZERO AXIS. The tranche-2 version of this panel drew
   five left-aligned bars of increasing length with the negative one greyed. On
   that shape −0,26 is the SECOND LONGEST bar in the list, so the eye ranks
   competitor density as the second most positive driver and only the minus sign
   in the text corrects it. Sign is the whole point of a coefficient. Splitting
   the track at zero puts the one negative weight on the other side of the axis,
   where its length now reads as magnitude in the correct direction, and it
   makes the chart shape itself the reason this page is not the ranked-bar page
   its siblings are. Colour repeats the sign, it does not carry it — the value
   still prints −0,26 (1.4.1).

   THE WIDTHS ARE THE COEFFICIENTS. `style="width:34%"` for +0,34, the same
   inline-value move ng-components.css §8 uses for the homepage hero's ranked
   candidates, so a weight and its bar cannot drift apart in a future edit. The
   five absolute weights sum to 1,00, so 34% of the full track is 68% of its
   half and nothing can overflow the axis.

   THE ONE TOKEN .is-dark DOES NOT REDEFINE. ng-foundation.css §3 redefines
   --ng-ink, --ng-muted, --ng-accent, --ng-hairline, --ng-surface,
   --ng-surface-sunken and --ng-border-strong on a dark band — but NOT
   --ng-indigo, which stays #1B1F5E. The tranche-2 bar fill was
   `background:var(--ng-indigo)`, which on this band would have painted navy
   bars on a navy panel: invisible, valid CSS, and the kind of defect no
   computed-style assertion reports because the declaration applied exactly as
   written. Positive bars are --ng-border-strong (60% paper on dark, 55% navy on
   light) so the component survives being moved to a light band later. */
.ng-v2 .ng-coef{
  list-style:none;
  margin:0; padding:0;
  display:grid;
  gap:12px;
}
.ng-v2 .ng-coef__row{
  min-width:0;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  column-gap:14px; row-gap:8px;
  align-items:baseline;
}
/* Below 760 the name and the value share the first line and the track takes a
   full-width second line, so the longest Turkish phrase ("Çevre nüfusu (10 dk
   sürüş)") has the whole column and does not compete with the bar for width.
   `order` rather than grid-template-areas: the DOM order is name/track/value,
   which is the reading order a screen reader should get, and only the visual
   order changes. */
.ng-v2 .ng-coef__name{ order:1; min-width:0; font-size:15px; line-height:1.4; color:var(--ng-ink); }
.ng-v2 .ng-coef__val{
  order:2;
  justify-self:end;
  font-family:var(--ng-font-display); font-weight:700;
  font-size:16px; line-height:1.25;
  letter-spacing:-0.01em;
  color:var(--ng-ink);
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}
.ng-v2 .ng-coef__track{
  order:3;
  grid-column:1 / -1;
  position:relative;
  display:block;
  height:18px;
}
/* THE TWO GRIDS ARE SET IN % AND px, NOT ch, AND THAT IS THE FIX FOR A
   MISALIGNMENT THAT SHIPPED FOR ONE ITERATION. The axis legend below and the
   rows here have to share a column geometry or the "0" does not sit on the
   zero line. Written as `22ch / 1fr / 6ch` they did not: `ch` resolves against
   the FONT OF THE ELEMENT, and the legend is 11px Manrope-label while a row is
   15px body — so the same declaration produced two different track positions
   and the "0" landed 23px left of the axis it names. Measured in the 1440
   screenshot. Percentages and pixels resolve identically for both. */
@media (min-width:760px){
  .ng-v2 .ng-coef__row{
    grid-template-columns:minmax(0,30%) minmax(0,1fr) 60px;
    column-gap:22px;
    align-items:center;
  }
  .ng-v2 .ng-coef__track{ order:2; grid-column:auto; }
  .ng-v2 .ng-coef__val{ order:3; }
}
/* The axis itself: a 1px rule down the centre of every track, so five separate
   tracks read as one chart. */
.ng-v2 .ng-coef__track::before{
  content:"";
  position:absolute;
  left:50%; top:0; bottom:0;
  width:1px;
  background:var(--ng-border-strong);
}
.ng-v2 .ng-coef__bar{
  position:absolute;
  top:4px;
  height:10px;
}
.ng-v2 .ng-coef__bar.is-pos{
  left:50%;
  border-radius:0 3px 3px 0;
  background:var(--ng-border-strong);
}
.ng-v2 .ng-coef__bar.is-neg{
  right:50%;
  border-radius:3px 0 0 3px;
  background:var(--ng-accent);
}
/* One emphasised row per chart, the same discipline ng-components.css uses for
   the homepage hero's ranked candidates: if every bar were at full strength the
   model would read as a pattern rather than as an ordering. */
.ng-v2 .ng-coef__row.is-top .ng-coef__bar.is-pos{ background:var(--ng-ink); }
.ng-v2 .ng-coef__row.is-neg .ng-coef__val{ color:var(--ng-accent); }

/* The axis legend. Three spans in one grid cell, positioned start / centre /
   end of the TRACK column so the words sit over the half of the chart they
   describe. aria-hidden in the markup and hidden below 760 by CSS: the strings
   are 180px and 110px at 11px/.1em and cannot share a 300px line, and the
   panel's foot paragraph states the same fact in prose at every width ("Eksi
   işaret, faktörün performansı aşağı çektiğini gösterir."). A decorative label
   that would have to be shortened to fit is worth less than the sentence that
   already says it. */
.ng-v2 .ng-coef__axis{ display:none; }
@media (min-width:760px){
  .ng-v2 .ng-coef__axis{
    display:grid;
    grid-template-columns:minmax(0,30%) minmax(0,1fr) 60px;
    column-gap:22px;
    margin:0 0 14px;
    font-family:var(--ng-font-label); font-weight:600;
    font-size:11px; line-height:1.3; letter-spacing:.1em;
    text-transform:none;
    color:var(--ng-muted);
  }
  .ng-v2 .ng-coef__axis > span{ grid-row:1; grid-column:2; }
  .ng-v2 .ng-coef__axis > span:first-child{ justify-self:start; }
  .ng-v2 .ng-coef__axis > .ng-coef__zero{ justify-self:center; color:var(--ng-ink); }
  .ng-v2 .ng-coef__axis > span:last-child{ justify-self:end; }
}

/* The model's one output. A wash plate rather than a sixth row, because it is
   not a sixth factor — it is what the five factors produce. The index
   convention (100 = your current network average) is the one
   /sektorler/perakende/ established for the same reason: a sample figure in
   lira would be a market benchmark this company cannot source. */
.ng-v2 .ng-coef__out{
  margin:22px 0 0;
  padding:13px 14px 14px;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  column-gap:14px; row-gap:5px;
  background:var(--ng-accent-wash);
  border-radius:var(--ng-radius-sm);
}
.ng-v2 .ng-coef__k{
  font-family:var(--ng-font-label); font-weight:600;
  font-size:11px; line-height:1.35; letter-spacing:.1em;
  text-transform:none;
  color:var(--ng-accent);
}
.ng-v2 .ng-coef__v{
  justify-self:end;
  font-family:var(--ng-font-display); font-weight:700;
  font-size:20px; line-height:1.1;
  letter-spacing:-0.015em;
  color:var(--ng-accent);
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}
.ng-v2 .ng-coef__n{
  grid-column:1 / -1;
  font-size:14px; line-height:1.45;
  color:var(--ng-muted);
}


/* ==========================================================================
   4. SECTION 40 — .ng-flow, and the mist close rail
   ========================================================================== */

/* --- 4a. .ng-flow — three stages, left to right ---------------------------
   NOT .ng-steps AND NOT A LADDER. ng-shared §13c's .ng-steps is a vertical
   stack of items under a 2px rule, and akaryakit uses it; otomotiv wrote its
   own vertical .ng-spine. A third vertical ladder in the same group of leaves
   is exactly the sameness this pass exists to break, and the material does not
   ask for one: this is a pipeline — an address list in, factor weights out —
   so the diagram reads in the direction the process runs, with the arrow drawn
   in the gutter between stages.

   Below 900 there is no honest way to put three columns of prose side by side,
   so it stacks and the connector rotates to point down. Same diagram, turned;
   the arrow is a pseudo-element on the SECOND and THIRD steps, so the sequence
   is never implied by position alone.

   Each stage carries its own hairline rule and an "01 · GİRDİ" kicker, so the
   three columns read as a header row of a process rather than as three cards
   — there is no fill, no border box and no shadow anywhere in this component,
   which is what keeps it from becoming the card grid this page just removed. */
.ng-v2 .ng-flow{
  list-style:none;
  margin:38px 0 0;
  padding:0;
  display:grid;
  gap:32px;
}
@media (min-width:900px){
  .ng-v2 .ng-flow{
    grid-template-columns:repeat(3,minmax(0,1fr));
    column-gap:56px;
  }
}
.ng-v2 .ng-flow__step{
  position:relative;
  padding-top:18px;
  border-top:1px solid var(--ng-hairline);
}
.ng-v2 .ng-flow__n{ margin:0; }
/* Doubled class: the theme's `body .content-wrapper h?:not(:first-child)
   {margin-top:50px}` is (0,2,2) and beats a single-class heading rule, which is
   how 14 headings on the homepage rendered 50px gaps where 14px was authored.
   PATTERNS.md keeps a list of every heading class that needs this; .ng-flow__name
   is one. */
.ng-v2 .ng-flow__name.ng-flow__name{
  margin:12px 0 0;
  font-family:var(--ng-font-display); font-weight:600;
  font-size:19px; line-height:1.3;
  letter-spacing:-0.012em;
  color:var(--ng-ink);
}
.ng-v2 .ng-flow__body{
  margin:10px 0 0;
  font-size:15px; line-height:1.62;
  color:var(--ng-muted);
}
.ng-v2 .ng-flow__pills{ margin-top:16px; }

/* The connector. Drawn in the gutter, which is 56px wide above 900, so -40px
   puts the glyph clear of both columns. It is a pseudo-element and therefore
   invisible to assistive technology: the ordered list and the "01 · / 02 · /
   03 ·" kickers already carry the sequence.

   `display:block` IS LOAD-BEARING AND WAS MISSING FOR ONE ITERATION.
   ng-components.css §-list kills the theme's fontello chevron with

       body.ng-v2 ul > li::before,
       body.ng-v2 ol > li::before{ content:none; display:none }

   at (0,1,4). This rule is (0,3,1), so it wins the `content` declaration — but
   it declared no `display`, and an uncontested `display:none` needs no
   specificity to survive. The arrow therefore had the right glyph, the right
   colour and the right position, and painted nothing.

   Found by cropping the 1440 screenshot and counting pixels in the gutter:
   7,196 of 7,200 were the page background. ng-page-check reported the page
   `clean` before and after, as it should — a missing decoration is not a
   defect it tests for. This is the fourth entry in this project's list of
   defects that only a screenshot found, and the second on this page. */
.ng-v2 .ng-flow__step + .ng-flow__step::before{
  position:absolute;
  display:block;
  font-family:var(--ng-font-display); font-weight:600;
  font-size:20px; line-height:1;
  color:var(--ng-accent);
}
@media (min-width:900px){
  .ng-v2 .ng-flow__step + .ng-flow__step::before{
    content:"\2192";
    left:-40px; top:22px;
  }
}
@media (max-width:899px){
  .ng-v2 .ng-flow__step + .ng-flow__step::before{
    content:"\2193";
    left:0; top:-27px;
  }
}

/* --- 4b. .ng-close__rail — the page's one decision -------------------------
   dark = MIDDLE means the indigo band is section 30, so this page CANNOT end
   on the indigo slab every other leaf ends on. PATTERNS.md §15 names the shape
   to use instead and this is a copy of it: a SUNKEN rail — mist + hairline
   holding the two white chrome pills — which is the second of the site's two
   surface roles doing exactly its job. Not promoted to ng-shared: three leaves
   have not asked for it yet.

   It sits inside the flow's section rather than in one of its own, because the
   page has four sections and this is the fourth. The reader who has just read
   the three stages is the reader deciding whether to start them. */
.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, unlike a section head. */
.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:24ch;
  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:56ch;
}
.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);
}


/* ==========================================================================
   5. RESPONSIVE
   ng-mobile.css §7 carries every 44px hit area (crumbs, buttons, pills, tel)
   at <=767, at 768–1023 and at exactly 1024. The only hit area this page adds
   outside those primitives is .ng-map__to's anchor, handled in §2b. This block
   is type and rhythm only.
   ========================================================================== */

@media (max-width:767px){
  /* 16px is the mobile reading floor. Every line below is a sentence a visitor
     reads, not a label they glance at, so each takes the floor rather than the
     tracked-label exception. */
  .ng-v2 .ng-legend__v{ font-size:16px; }
  .ng-v2 .ng-map td.ng-map__out{ font-size:16px; }
  .ng-v2 .ng-map tr.is-note > td{ padding-bottom:20px; }
  .ng-v2 .ng-map__what{ font-size:16px; }
  .ng-v2 .ng-map__to{ font-size:16px; }
  .ng-v2 .ng-flow__body{ font-size:16px; }
  .ng-v2 .ng-coef__name{ font-size:16px; }
  .ng-v2 .ng-coef__val{ font-size:17px; }
  .ng-v2 .ng-coef__n{ font-size:15px; }
  .ng-v2 .ng-close__lede{ font-size:16px; }

  /* THE MOVEMENT TABLE AT 390, measured against the 342px container:
       "Ümraniye"(72) + KENDİ(40) + RAKİP(38) + "−1 kapanış"(82) plus 8px of
       cell padding per column = ~264 of 314 available. The English header
       "LAST 3 MONTHS" is the widest string in either language at ~95px and
       still leaves slack.
     Element-qualified for the same reason as §3b: an unqualified
     `.ng-move__r` here is (0,2,0) and would lose to the desktop
     `th.ng-move__r` at (0,3,1), so the mobile sizes would silently not apply. */
  .ng-v2 .ng-move th.ng-move__r{ font-size:16px; padding:10px 4px; }
  .ng-v2 .ng-move td.ng-move__n{ font-size:17px; padding:10px 4px; }
  .ng-v2 .ng-move td.ng-move__d{ font-size:15px; padding:10px 4px; }

  .ng-v2 .ng-out-band__note{ text-align:left; max-width:none; }
  .ng-v2 .ng-vals__note,
  .ng-v2 .ng-how__note{ max-width:none; }

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

@media (max-width:959px){
  .ng-v2 .ng-out-band__note{ text-align:left; }
}


/* ==========================================================================
   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. Nothing on this
   page adds motion beyond those two: the coefficient bars are static widths and
   the flow connector is a static glyph, 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.
   ========================================================================== */


/* ==========================================================================
   7. .ng-mapstrip — THREE CLIENT IMAGES IN ONE ROW, UNDER THE CROSSWALK
   Added by the content-image pass. §17 of ng-shared.css owns the frame, the
   chip and the caption; everything here is the ROW those three figures sit in,
   and nothing else on this page uses it. Prefixed off §2b's .ng-map block, the
   only block section 20 has.
   ========================================================================== */

/* WHY A ROW OF THREE AND NOT A GRID. The three thumbs are three samples of the
   same kind of thing, read left to right in the client's own 01/02/04 order —
   that is a strip, not a matrix. It also has to STAY a strip: a 2x2 picture
   index is /sektorler/sarj-istasyonu/'s shape and a two-up above the h1 is
   /sektorler/perakende/'s, and the whole margin between five of the sector
   pages is dominant content shape. A fourth asset is dropped rather than
   wrapped for the same reason, and because at four across each frame is 247px.

   MEASURED. The container is 1120px INCLUDING 24px of padding a side, so its
   content box is 1072px. At thirds with a 28px gutter each frame is 339px at
   1440, 307px at 1024 and 285px at the 960 breakpoint — every one of them under
   the 780px asset width, so the raster is always downscaled and never soft. */
.ng-v2 .ng-mapstrip{ margin-top:48px; }
.ng-v2 .ng-mapstrip__kicker{ margin:0; }

/* The lead sentence is the strip's rule-5 carrier: at 355px the 8-11px labels
   burnt into these rasters render near 4px, so what each picture SAYS is said
   here and in the three captions instead of being left to the picture. 17px
   muted, the same step .ng-figband__sub takes, because it introduces figures
   rather than heading a section. */
.ng-v2 .ng-mapstrip__lead{
  margin:10px 0 0;
  max-width:80ch;
  font-size:17px;
  line-height:1.6;
  color:var(--ng-muted);
}

.ng-v2 .ng-mapstrip__row{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  column-gap:28px;
  row-gap:28px;
  align-items:start;
  margin-top:28px;
}

/* THE 780px CAP, WHICH ONLY BITES ONCE THE ROW HAS COLLAPSED. At thirds the
   column is 339px and this rule does nothing; at one column between 828 and 959
   the content box is 780-911px and an uncapped frame would upscale a 780px
   asset and go soft. Stated on the figure, per the sizing rule. */
.ng-v2 .ng-mapstrip__row > .ng-figband__fig{
  max-width:780px;
  margin-inline:auto;
}

/* ONE COLUMN BELOW 960, NOT TWO. Three items cannot make two full rows: a 2-up
   step would print two thumbs and an orphan, which reads as a broken grid — and
   a two-column picture grid is the neighbouring page's shape, which is exactly
   what this run must not re-collide. Straight to one column also keeps every
   frame comfortably above the ~270px floor where these diagrams stop reading.
   Below 960 the captions get the full column width, so each sample's sentence
   is the thing carrying it rather than the shrunken type inside the raster. */
@media (max-width:959px){
  .ng-v2 .ng-mapstrip__row{
    grid-template-columns:minmax(0,1fr);
    row-gap:34px;
  }
}

@media (max-width:767px){
  .ng-v2 .ng-mapstrip{ margin-top:36px; }
  /* 16px is this page's mobile reading floor — §5's rule for every sentence a
     visitor reads rather than glances at. */
  .ng-v2 .ng-mapstrip__lead{ font-size:16px; max-width:none; }
  .ng-v2 .ng-mapstrip__row{ margin-top:22px; row-gap:30px; }
}


/* ==========================================================================
   8. 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-mapstrip__row > figure.ng-figband__fig.ng-figband__fig.ng-figband__fig{ margin-inline:auto; }