/* ==========================================================================
   /sektorler/fmcg/  +  /en/sectors/fmcg/  —  ONE STYLESHEET FOR THE PAIR

   Both pages are post_name 'fmcg' (a proper noun does not translate), so the
   markup lives in pages/fmcg-tr/ and pages/fmcg-en/ and each is applied by id.
   The stylesheet stays keyed on the slug, which is why the pair genuinely
   shares this file and cannot drift.

   ── VARIANCE PASS, 2026-08-17 ────────────────────────────────────────────────
   variance-plan.json assigns this pair:

       opening   E-DARK      the masthead itself is the indigo band
       dark      OPEN        and it is the only dark band on the page
       sections  4           masthead · sample output · ledger · method+close

   ARCHETYPES.md, on why: 76 of 76 pages opened with a headline left and a mist
   plate right, and closed on an indigo slab. The owner could not tell one page
   from another. This page is now the inverse — a navy first screen and a light
   body — and its dominant content shape is a RANKED TABLE, not a card grid.

   THE SILHOUETTE, so the next person can check it at a glance:

       DARK MASTHEAD (h1 + question rail + counts)
       └ mist band: coverage TABLE panel + horizontal ROUTE strip
         └ paper: six-row LEDGER, two groups, 01–06
           └ paper: three-step ladder + chip row + MIST CLOSING RAIL

   Nothing below is a colour, a radius or a font stack: every value is a token
   from ng-foundation.css. No `!important` anywhere in this file.

   WHAT THIS SHEET DELIBERATELY DOES NOT CONTAIN. .ng-lead__note,
   .ng-out-band__note, .ng-vals__half, .ng-steps__pills, .ng-how__links and
   .ng-how__note were promoted into ng-shared.css §14 by the consolidation pass;
   .ng-dtable, .ng-facts and .ng-masthead--stack are §15. Only genuine
   divergences and this page's own components are written here.
   ========================================================================== */

/* ==========================================================================
   1. THE DARK MASTHEAD — the E-DARK opening
   ==========================================================================
   `class="ng-section is-dark"`, NOT `ng-section--dark`. `--dark` supplies the
   CENTRED CLOSING composition (text-align:center plus a centred flex
   container); this is a left-aligned masthead, so it takes `is-dark` alone,
   which is what flips the palette tokens and sets the 88px dark pad in
   ng-foundation.css §3 and §7. akaryakıt hit the same trap first and it is
   recorded in PATTERNS.md.

   NOR IS IT .ng-masthead. That primitive sets `background:var(--ng-ground)`
   and its own 28/52 padding, and its two-column grid exists to hold an aside
   this page does not have. Borrowing it would have meant unpicking three of
   its rules to get a one-column dark band; .ng-dlead is 30 lines that say what
   they mean. The two class names it DOES borrow — .ng-masthead__title and
   .ng-masthead__proof — are the type scale and the counts strip, which are
   identical to every other leaf's on purpose: a visitor must still know this
   is the same site.
   ========================================================================== */

/* (0,3,0) doubled, to beat `.ng-v2 .ng-section.is-dark{padding-block:88px}` in
   ng-foundation.css §7 — same specificity, and this sheet loads last. 88px of
   navy above the breadcrumb reads as a gap between the header and the page;
   36px reads as the top of the band. The bottom keeps almost the full dark
   pad, because the tonal break into the mist band below is the largest
   transition on the page and has to be paid for. */
.ng-v2 .ng-dlead.ng-dlead{
  padding-block:36px 76px;
}
.ng-v2 .ng-dlead__copy{ min-width:0; }

/* THE HEADLINE HAS NO ASIDE TO AVOID, so §4's 18ch clamp is wrong here — that
   ceiling exists to stop a split headline running under the plate. (0,4,0) via
   the doubled class inside .ng-dlead, so it beats ng-shared's own doubled
   (0,3,0) rule without touching the shared file.
   26ch, not `none`: at 62px the Turkish headline is 34 characters and would
   set as one 1000px line, which reads as a strapline rather than as a
   headline. Two balanced lines is the shape. */
.ng-v2 .ng-dlead .ng-masthead__title.ng-masthead__title{
  margin:16px 0 0;
  max-width:26ch;
  font-size:clamp(2.3rem, 5.4vw, 3.85rem);
  letter-spacing:-0.03em;
}
/* 62ch rather than §4's 52ch. The client's own lede is two long sentences and
   the copy column here is the whole container, not 58% of it; at 52ch it set
   as six short lines with a ragged right that looked like a mistake. */
.ng-v2 .ng-dlead__lede{
  margin-top:20px;
  max-width:62ch;
  color:var(--ng-muted);              /* #C6C9EA on navy — 9.22:1 */
}
.ng-v2 .ng-dlead__proof{
  margin-top:38px;
}
/* The counting note sits under the strip on the dark band; the muted token is
   already inverted, so nothing here declares a colour. */
.ng-v2 .ng-dlead .ng-lead__note{
  margin-top:14px;
}

/* --- 1b. .ng-qrail — the hub's question, laid ACROSS the band --------------
   Every other leaf on this site puts the sectors hub's question in an
   .ng-aside plate to the RIGHT of the h1. That plate is the single most
   repeated shape on the site and it is what forces the headline into a 58%
   column. Here the same three pieces of copy — the question, the Nokta half
   and the Saha half — run across the foot of the band as three cells divided
   by hairlines, and the headline gets the full container in exchange.

   The dividers are BORDERS ON THE CELLS, not a filled gap, so a rail that
   wraps to one column at 960 does not strand a dangling rule. Same reasoning
   as §15c's .ng-facts, which is the shape this is closest to; it is not
   .ng-facts itself because these cells hold a quote and two sentences, and
   .ng-facts__v is a 20px display value, not prose.

   The accent rule on the first cell is the one from .ng-aside__quote, kept so
   that a reader who has seen a leaf before recognises the quoted question. */
.ng-v2 .ng-qrail{
  margin-top:40px;
  padding-top:30px;
  border-top:1px solid var(--ng-hairline);   /* rgba(250,251,255,.16) on dark */
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:26px;
}
@media (min-width:900px){
  .ng-v2 .ng-qrail{
    grid-template-columns:minmax(0,1.2fr) minmax(0,1fr) minmax(0,1fr);
    gap:0;
  }
  .ng-v2 .ng-qrail__cell{
    padding:0 26px;
    border-left:1px solid var(--ng-hairline);
  }
  .ng-v2 .ng-qrail__cell:first-child{ padding-left:0; border-left:0; }
  .ng-v2 .ng-qrail__cell:last-child{ padding-right:0; }
}
.ng-v2 .ng-qrail__cell{ min-width:0; }
.ng-v2 .ng-qrail__label{
  margin:0 0 12px;
  color:var(--ng-accent);             /* #FF9BC9 on navy — 7.68:1 */
}
/* THE DOUBLED CLASS ON THIS ONE IS NOT DECORATIVE, and it is the same trap as
   the h2 margin and the .ng-dtable margin before it. ng-shared's
   .ng-aside__quote writes `margin:0` at (0,2,0), which beats
   `body .content-wrapper blockquote{margin:0}` at (0,1,2) — but the theme also
   ships

       body .content-wrapper blockquote:not(:first-child){ margin-top:2.5rem }
       body .content-wrapper blockquote:not(:last-child) { margin-bottom:2.5rem }

   and `:not()` counts its argument, so those are (0,2,2) and they win. This
   quote is neither the first nor the last child of its cell, so it was
   rendering with 40px of unasked-for air above AND below it — measured at
   `margin-bottom: 40px` with `ng-shot styles`, and visible in the 1440
   screenshot as a stranded "Soru iki parçalı" line. (0,3,0) settles it.
   The ::before/::after reset is there because Neuros hangs a decorative glyph
   off blockquotes in some contexts and a stray “ in front of the hub's own
   words would read as scare quotes. */
.ng-v2 .ng-qrail__quote.ng-qrail__quote{
  margin:0; padding:2px 0 2px 16px;
  border-left:3px solid var(--ng-accent);
  font-family:var(--ng-font-display); font-weight:600;
  font-size:20px; line-height:1.4;
  color:var(--ng-ink);                /* #FAFBFF on navy — 14.46:1 */
}
.ng-v2 .ng-qrail__quote::before,
.ng-v2 .ng-qrail__quote::after{ content:none; }
.ng-v2 .ng-qrail__body{
  margin:14px 0 0;
  font-size:15px; line-height:1.6;
  color:var(--ng-muted);
}
.ng-v2 .ng-qrail__cell--q .ng-qrail__body{ margin-top:16px; }

/* ==========================================================================
   2. SECTION 20 — THE COVERAGE TABLE AND THE ROUTE STRIP
   ==========================================================================
   Two artefacts, stacked full width on the mist band, each in the shared
   .ng-out chrome so each carries its own ÖRNEK / SAMPLE chip. They are NOT
   .ng-out-band__pair (two columns above 960): the table needs the full
   container for four columns plus a meter, and a route that reads left to
   right cannot live in a 548px half.
   ========================================================================== */

.ng-v2 .ng-out-band .ng-out + .ng-out{ margin-top:22px; }

/* The anchor target. The masthead's ghost button lands here, and the theme's
   sticky header would otherwise cover the panel's chrome bar. ng-shared §14
   sets 104px; below 1364 the header is shorter. */
@media (max-width:1364px){
  .ng-v2 .ng-out-band{ scroll-margin-top:84px; }
}

/* The district column carries the only prose in the table and the three
   numeric columns are 2–3 digits, so a share rather than `auto` keeps the
   numbers grouped at the right instead of drifting apart at 1440. Set on the
   ROW's first child rather than by nth-child on every row, so adding a row
   type (the tfoot total) needs no new rule. */
@media (min-width:768px){
  .ng-v2 .ng-pen__table tr > :first-child{ width:40%; }
}
/* The rate is the row's verdict, so it is set in the display face one step
   over the cell text. 18px is under the 24px large-text threshold, so it takes
   --ng-accent (5.64:1 on white) and never --ng-accent-display (4.18:1, which
   is only allowed at 24px and up). */
.ng-v2 .ng-pen__rate{
  display:block;
  font-family:var(--ng-font-display); font-weight:700;
  font-size:18px; line-height:1.15;
  letter-spacing:-0.01em;
  color:var(--ng-ink);
  font-variant-numeric:tabular-nums;
}
.ng-v2 .ng-pen__table .is-top .ng-pen__rate{ color:var(--ng-accent); }
/* A 64px meter under the rate, right-aligned with it. It is the same idiom as
   ng-shared's .ng-net__bar — mist track, indigo fill, accent fill on the top
   row — at table scale. aria-hidden in the markup: it restates the number in
   the cell above it and has nothing of its own to say to a screen reader. */
.ng-v2 .ng-pen__meter{
  display:block;
  width:64px; height:5px;
  margin:7px 0 0 auto;
  border-radius:3px;
  background:var(--ng-surface-sunken);
  overflow:hidden;
}
.ng-v2 .ng-pen__meter i{
  display:block; height:100%;
  border-radius:3px;
  background:var(--ng-indigo);
}
.ng-v2 .ng-pen__table .is-top .ng-pen__meter i{ background:var(--ng-accent); }

/* --- 2b. .ng-rota — one field day, read left to right ----------------------
   THE PREVIOUS ROUND DREW THIS AS A VERTICAL RAIL in a narrow panel beside the
   scorecard, because the two panels were side by side. With the table now full
   width, the route can be what it actually is: five stops in one day, in
   order, across the panel — a stepped diagram rather than another list. That
   is the shape ARCHETYPES asks each page to choose from its own material.

   THE RAIL IS THE WHOLE IDEA. One 2px line runs from each number to the next,
   so five stops read as one journey. It is drawn as a pseudo-element on the
   stop (not a border on the number, which would stop at the number's own line
   box) and suppressed on the last stop, so the journey ends where the last
   stop is.

   IT IS ::after, AND IT DECLARES display, AND BOTH ARE SCAR TISSUE. The first
   build of the vertical version used ::before with no display declaration and
   the rail did not paint at all, in either language, at any width:
   ng-components.css §10 kills the theme's fontello list marker with
   `body.ng-v2 ol > li::before{ content:none; display:none }`, and these stops
   are <li>. A (0,2,1) `::before` rule beats that (0,1,3) selector only for the
   properties it declares — it declared `content` and not `display`, so the
   rule won on specificity and still rendered nothing. ng-page-check reported
   the page clean before and after; the rail was missing in the screenshot.

   HORIZONTAL ABOVE 900px ONLY. At 768 five columns give each stop 125px and
   "Zincir şube · Atatürk Mah." breaks over three lines, so below 900 it
   returns to the vertical rail, which is the proven shape. */
.ng-v2 .ng-rota{
  list-style:none; margin:0; padding:0;
  display:grid; gap:16px;
}
.ng-v2 .ng-rota__stop{
  position:relative;
  display:grid;
  grid-template-columns:22px minmax(0,1fr) auto;
  gap:4px 10px;
  align-items:start;
}
/* Line-based placement rather than four extra classes: number spans both rows
   in column 1, name and tag stack in column 2, distance sits top-right. */
.ng-v2 .ng-rota__n{ grid-area:1 / 1 / 3 / 2; }
.ng-v2 .ng-rota__name{ grid-area:1 / 2 / 2 / 3; }
.ng-v2 .ng-rota__tag{ grid-area:2 / 2 / 3 / 3; }
.ng-v2 .ng-rota__km{ grid-area:1 / 3 / 2 / 4; }

.ng-v2 .ng-rota__stop::after{
  content:'';
  display:block;                      /* see the note above — not optional */
  position:absolute;
  left:10px; top:22px; bottom:-16px;
  width:2px;
  background:var(--ng-hairline);
}
.ng-v2 .ng-rota__stop:last-child::after{ content:none; display:none; }

/* 11px at .1em (ratio .10) clears ng-page-check's 0.08 tracked-label threshold
   by measurement, not by allowlist. z-index so the badge paints over the rail:
   an absolutely positioned pseudo-element otherwise paints above its static
   siblings and the line would strike through the digits. */
.ng-v2 .ng-rota__n{
  position:relative; z-index:1;
  display:inline-flex; align-items:center; justify-content:center;
  width:22px; height:22px;
  border-radius:var(--ng-radius-pill);
  background:var(--ng-accent-wash);
  color:var(--ng-accent);             /* 4.87:1 on the wash */
  font-family:var(--ng-font-label); font-weight:600;
  font-size:11px; line-height:1; letter-spacing:.1em;
  padding-left:.1em;                  /* absorb the trailing letter-space */
  text-transform:none;
  font-variant-numeric:tabular-nums;
}
/* WRAPS, deliberately — no ellipsis. "Zincir şube · Atatürk Mah." is 26
   characters and an ellipsis would silently drop the neighbourhood, which is
   the only part of the line that says WHERE. That failure already shipped once
   on this site (.ng-out__meta truncating to "Örnek dağıtım ağı · 4 ist…") and
   was found in a screenshot, not by an assertion. */
.ng-v2 .ng-rota__name{
  display:block;
  font-family:var(--ng-font-display); font-weight:600;
  font-size:15px; line-height:1.35;
  color:var(--ng-ink);
}
/* A tracked state chip, authored pre-uppercased with text-transform:none,
   because the case engine maps i->I and would print "YENI NOKTA ADAYI". */
.ng-v2 .ng-rota__tag{
  justify-self:start;
  display:inline-block;
  margin-top:2px;
  padding:3px 8px;
  border-radius:var(--ng-radius-pill);
  background:var(--ng-surface-sunken);
  color:var(--ng-muted);              /* 5.42:1 on mist */
  font-family:var(--ng-font-label); font-weight:600;
  font-size:11px; line-height:1.3; letter-spacing:.1em;
  text-transform:none;
}
/* The two stops that came out of the table's open-outlet column. */
.ng-v2 .ng-rota__tag.is-new{
  background:var(--ng-accent-wash);
  color:var(--ng-accent);             /* 4.87:1 on the wash */
}
/* 14px, the reading floor, NOT a tracked 12px label: a distance is a figure a
   reader compares between stops, not a glanced-at category. tabular-nums so
   the decimal points line up, which is most of why five legs read as one
   total. */
.ng-v2 .ng-rota__km{
  white-space:nowrap;
  font-family:var(--ng-font-label); font-weight:500;
  font-size:14px; line-height:1.4;
  color:var(--ng-muted);
  font-variant-numeric:tabular-nums;
}

@media (min-width:900px){
  /* FOUR EXPLICIT ROWS AND subgrid, because the five stops have to line up as
     ROWS and not just as columns. Found in the 1024 screenshot, and the page
     reported clean before and after it: four of the five stop names wrap to two
     lines at that width and "Kiosk · Esenşehir Mah." does not, so its tag and
     its distance sat 30px above the other four and the leg distances stopped
     reading as one row of figures. Each stop spans the four container rows and
     adopts them with `grid-template-rows:subgrid`, so badge, name, tag and
     distance are each sized by the tallest cell in their row.

     THE FALLBACK IS IN AN @supports BLOCK, not alongside. A flat
     `min-height:2.7em` on the name works in both worlds, but where subgrid IS
     supported it reserves a second line that nothing uses: at 1440 all five
     names fit on one line and the 1440 screenshot showed 25px of air over the
     tags. So the two-line floor only applies where subgrid is absent, which is
     exactly the case it was written for. */
  .ng-v2 .ng-rota{
    grid-template-columns:repeat(5,minmax(0,1fr));
    grid-template-rows:repeat(4,auto);
    column-gap:16px;
    row-gap:0;                        /* the four rows space themselves with
                                         margins; a 16px row gap on top of them
                                         would double every interval */
  }
  .ng-v2 .ng-rota__stop{
    display:grid;
    grid-row:span 4;
    grid-template-rows:subgrid;
    grid-template-columns:minmax(0,1fr);
    text-align:center;
  }
  /* The four pieces auto-place into the four inherited rows in source order.
     justify-self:center rather than the default stretch: a grid item is
     blockified, so the tag's pill background would otherwise fill the whole
     column instead of hugging its label. */
  .ng-v2 .ng-rota__n,
  .ng-v2 .ng-rota__name,
  .ng-v2 .ng-rota__tag,
  .ng-v2 .ng-rota__km{ grid-area:auto; }
  .ng-v2 .ng-rota__n{ justify-self:center; }
  .ng-v2 .ng-rota__name{ margin-top:12px; }
  .ng-v2 .ng-rota__tag{ justify-self:center; margin-top:8px; }
  .ng-v2 .ng-rota__km{ display:block; margin-top:8px; align-self:end; }
  /* Centre of this badge to centre of the next one. `right` resolves against
     the positioned ancestor — the stop itself — so -50% is half a cell and the
     16px is the column gap. Written this way rather than as one rule on the
     container inset by half a column, because that inset would have to be
     recomputed for any route that is not exactly five stops. */
  .ng-v2 .ng-rota__stop::after{
    left:50%; right:calc(-50% - 16px);
    top:10px; bottom:auto;
    width:auto; height:2px;
  }
}
/* The no-subgrid fallback: a two-line floor under every stop name, so the tags
   and the distances still line up as rows. 2.7em is two lines at the name's own
   1.35 line-height. */
@media (min-width:900px){
  @supports not (grid-template-rows:subgrid){
    .ng-v2 .ng-rota__name{ min-height:2.7em; }
  }
}

/* ==========================================================================
   3. SECTION 30 — .ng-ledger, the six analysis titles
   ==========================================================================
   NOT A CARD GRID, and that is the point of the pass. Six cards in a 2×2 plus
   a 2×1 read as two unrelated grids of options; six numbered rows under two
   sub-heads read as one ordered list of what this sector gets, and the numbers
   make the masthead's "6 ANALİZ BAŞLIĞI" literally countable.

   The whole row is the anchor, exactly as .ng-card--link made the whole card
   one, so the fix for six identical "Daha Fazla Bilgi" links (109×17px on TR,
   63×17px on EN, flagged at 1024, 768 and 390) survives the reshaping. Row
   height is over 100px at every width, so there is no hit-area rule to write.

   THE RIGHT-HAND COLUMN IS max-content, NOT A FIXED TRACK. akaryakıt shipped a
   fixed 230px track for the same thing and the longest label filled the line
   exactly, pushing its → onto a line of its own where it read as a stray
   glyph. The copy column is the one that can absorb the difference.
   ========================================================================== */

.ng-v2 .ng-ledger{
  list-style:none;
  margin:0; padding:0;
  display:grid;
}
.ng-v2 .ng-ledger__item{
  border-top:1px solid var(--ng-hairline);
}
.ng-v2 .ng-ledger__item:last-child{
  border-bottom:1px solid var(--ng-hairline);
}
/* The group divider that ng-shared §14 draws between .ng-vals__half blocks
   would land 30px under this ledger's own closing rule and read as a double
   line. The gap alone separates the two groups; the h3 does the rest. */
.ng-v2 .ng-vals__half + .ng-vals__half{
  margin-top:38px;
  padding-top:0;
  border-top:0;
}
.ng-v2 .ng-ledger__link{
  display:grid;
  grid-template-columns:22px minmax(0,1fr);
  column-gap:16px;
  padding:22px 0;
  text-decoration:none;
  color:var(--ng-ink);
}
@media (min-width:900px){
  .ng-v2 .ng-ledger__link{
    grid-template-columns:26px minmax(0,1fr) max-content;
    column-gap:28px;
    align-items:start;
    padding:26px 0;
  }
}
.ng-v2 .ng-ledger__n{
  font-family:var(--ng-font-label); font-weight:600;
  font-size:12px; line-height:1.9; letter-spacing:.1em;
  text-transform:none;
  color:var(--ng-accent);             /* 5.45:1 on the paper ground */
  font-variant-numeric:tabular-nums;
}
.ng-v2 .ng-ledger__main{ display:block; min-width:0; }
/* (0,3,0) doubled, per ng-shared §11: a page-level heading class needs the
   same defence as a shared one or the theme's
   `body .content-wrapper h4:not(:first-child){margin-top:50px}` at (0,2,2)
   turns the authored 0 into a 50px hole above every second row. */
.ng-v2 .ng-ledger__name.ng-ledger__name{
  margin:0;
  font-family:var(--ng-font-display); font-weight:600;
  font-size:20px; line-height:1.3;
  letter-spacing:-0.012em;
  color:var(--ng-ink);
}
.ng-v2 .ng-ledger__body{
  display:block;
  margin-top:8px;
  max-width:72ch;
  font-size:15px; line-height:1.62;
  color:var(--ng-muted);              /* 6.01:1 on the paper ground */
}
/* `grid-column:2` IS LOAD-BEARING BELOW 900px. The row has two explicit
   columns there (the number and the copy) and three children, so auto-placement
   sends the third — this one — to row 2 COLUMN 1, which is the 22px number
   track. The destination label then rendered inside 22px: "ÇÖZÜM ·
   SEGMENTASYON" broke over three lines and the → sat alone beside a wrapped
   label. Found in the 390 screenshot; ng-page-check reported the page clean
   with it, because the text wrapped rather than overflowing. */
.ng-v2 .ng-ledger__side{
  display:block;
  grid-column:2;
  margin-top:12px;
}
@media (min-width:900px){
  .ng-v2 .ng-ledger__side{
    grid-column:auto;                 /* row 1, the third explicit column */
    margin-top:3px;
    text-align:right;
    white-space:nowrap;
  }
}
/* 11px at .1em: the KIND of page this row resolves into, glanced at once. */
.ng-v2 .ng-ledger__kind{
  display:block;
  font-family:var(--ng-font-label); font-weight:600;
  font-size:11px; line-height:1.35; letter-spacing:.1em;
  text-transform:none;                /* authored pre-uppercased: i -> İ */
  color:var(--ng-muted);
}
/* The destination itself, at the same 14px accent as .ng-card__link, so a row
   and a card offer the same affordance in the same voice. */
.ng-v2 .ng-ledger__to{
  display:inline-flex; align-items:center; gap:.45em;
  margin-top:6px;
  font-family:var(--ng-font-display); font-weight:600;
  font-size:14px; line-height:1.3;
  color:var(--ng-accent);
}
@media (any-hover:hover){
  /* any-hover only: on a touch screen :hover sticks after the tap and leaves a
     row highlighted until the user taps somewhere else. */
  .ng-v2 .ng-ledger__link:hover .ng-ledger__name{ color:var(--ng-accent); }
  .ng-v2 .ng-ledger__link:hover .ng-arrow{ transform:translate3d(4px,0,0); }
}
.ng-v2 .ng-ledger__link:focus-visible .ng-ledger__name{ color:var(--ng-accent); }

/* The two sub-heads are QUESTIONS here, not the one-word labels akaryakıt's
   two groups use, so they need a measure: without it the first one ran to 62
   characters on one line at 1440 and read as a lede rather than as a heading.
   Doubled class for the theme's 50px h3 margin, per ng-shared §11. */
.ng-v2 .ng-vals__name.ng-vals__name{
  margin:0 0 18px;
  font-size:22px; line-height:1.3;
  letter-spacing:-0.012em;
  color:var(--ng-ink);
  max-width:46ch;
  text-wrap:balance;
}
/* The attribution note carries three claims a reader can check — that these
   are the hub's own six strings, that the grouping is ours, and why two rows
   land on one page — so it is full sentences at the reading floor. */
.ng-v2 .ng-vals__note{
  margin-top:30px;
  max-width:92ch;
}

/* ==========================================================================
   4. SECTION 40 — THE CLOSING RAIL
   ==========================================================================
   The indigo band is spent on the masthead, and ARCHETYPES.md is explicit that
   an E-DARK page has no second dark band — so the closing decision cannot be
   the indigo slab every other leaf ends on, and with four sections it does not
   get a section of its own either. It is a SUNKEN rail at the foot of the
   method section: mist + hairline holding the two white chrome pills, which is
   the second of the site's two surface roles doing exactly its job.

   Copied from pages/akaryakit.css, which built it first for its `dark: MIDDLE`
   assignment and whose PATTERNS.md entry says to copy rather than invent a
   third closing shape. Duplicating a page rule costs bytes; a wrong shared
   primitive costs 28 pages.
   ========================================================================== */
.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's
   title. */
.ng-v2 .ng-close__title.ng-close__title{
  margin:14px 0 0;
  font-size:clamp(1.6rem, 3.2vw, 2.1rem);
  line-height:1.15;
  letter-spacing:-0.02em;
  max-width:22ch;
  text-wrap:balance;
}
.ng-v2 .ng-close__lede{
  margin:14px 0 0;
  font-size:17px; line-height:1.6;
  color:var(--ng-muted);              /* 5.42:1 on mist */
  max-width:54ch;
}
.ng-v2 .ng-close__side{
  display:flex; flex-direction:column;
  align-items:flex-start;
  gap:4px;
}
@media (min-width:900px){
  .ng-v2 .ng-close__side{ align-items:flex-end; text-align:right; }
}
.ng-v2 .ng-close__actions{ margin-top:0; }
/* 14px for the same reason .ng-cta__meta and .ng-crumbs are: a phone number
   and an address are read and copied, and .04em tracking does not earn the
   tracked-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 interactive things this page
   adds are .ng-ledger__link, a row over 100px tall at every width, and the
   chip row, which is .ng-btn--pill. So this block is type and rhythm only.
   ========================================================================== */

@media (max-width:899px){
  /* The ledger's destination column drops under the copy, so it stops being a
     nowrap right-hand track and the long "ÜRÜN · LOKASYON ANALİZİ MOBILE" is
     allowed to wrap rather than widen the row. */
  .ng-v2 .ng-ledger__body{ max-width:none; }
}

@media (max-width:767px){
  /* Mobile reading floor, 16px, for every sentence this page adds. Tracked
     labels and the table's own cells are exempt by measurement, not by
     allowlist: they clear letter-spacing / font-size ≥ 0.08. */
  .ng-v2 .ng-qrail__body,
  .ng-v2 .ng-ledger__body,
  .ng-v2 .ng-close__lede{ font-size:16px; }

  .ng-v2 .ng-qrail{ margin-top:32px; padding-top:26px; gap:24px; }
  .ng-v2 .ng-qrail__quote{ font-size:18px; }

  .ng-v2 .ng-vals__name.ng-vals__name{ font-size:20px; margin-bottom:14px; max-width:none; }
  .ng-v2 .ng-ledger__name.ng-ledger__name{ font-size:19px; }
  .ng-v2 .ng-vals__note,
  .ng-v2 .ng-how__note,
  .ng-v2 .ng-lead__note,
  .ng-v2 .ng-out-band__note{ max-width:none; }

  /* THE TABLE AT 390. Four columns inside 310px of panel: district ~110 plus
     three numeric columns at ~65. The meter comes down to 52px so the widest
     rate cell ("KAPSAMA" as a header, %58 plus a meter as a cell) still sets
     on one line. A fifth column would only have fit by scrolling, which is why
     the covered count stayed in the footnote where it already was. */
  .ng-v2 .ng-pen__meter{ width:52px; }
  .ng-v2 .ng-pen__rate{ font-size:17px; }

  /* The route at 390: the vertical rail, with the gap and the rail's reach
     moving together so the line still meets the next badge. */
  .ng-v2 .ng-rota{ gap:18px; }
  .ng-v2 .ng-rota__stop::after{ bottom:-18px; }
  .ng-v2 .ng-rota__name{ font-size:16px; }   /* reading floor: it is a place */
  .ng-v2 .ng-rota__km{ font-size:15px; }
}

/* ==========================================================================
   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 — and ng-components.css §8 does the same for .ng-anim. The only
   motion this page adds is the arrow nudge on .ng-ledger__link:hover, which is
   inside `any-hover` and uses the shared .ng-arrow, so the shared reduce rule
   already covers it. The table meters and the route rail are static widths and
   a static pseudo-element, 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.
   ========================================================================== */

/* ==========================================================================
   7. SECTION 30 — .ng-vshot, THREE ILLUSTRATIONS IN THREE EQUAL FRAMES
   Added by the content-image rollout, 2026-08-18; re-composed 2026-08-20. Both
   languages use it; there is not a word of Turkish or English in this block,
   only geometry and type.

   WHERE IT SITS AND WHY. The ledger says what each of the six titles does; the
   band under it pictures three of them. It is below the ledger and above the
   closing note — NOT above the h1 and NOT in the masthead. E-DARK's whole
   signal on this page is that the first screen is indigo, and a white picture
   band stacked on top of it would spend exactly the thing the variance pass
   bought.

   WHY THE THREE FRAMES ARE EQUAL, AND WHY THEY WERE NOT. This band was one
   780px figure over two 546px ones, and the asymmetry was an argument about the
   OLD rasters: the wide one was a detailed penetration map you read first and
   the two under it were its consequences. The pictures are now abstract artwork,
   all three at one aspect ratio and one level of detail, and the three ledger
   rows they name — 01, 02 and 05 — are peers. A 1.43x size difference between
   peers states a hierarchy that no longer exists and that nothing on the page
   explains, which is precisely the defect the second revision pass was opened
   to fix. Equal thirds say what is true: three of six titles, pictured.

   NO CAP IS NEEDED AT THIRDS, AND ONE IS NEEDED BELOW THEM. The container's
   content box is 1072px, so a third with a 28px gutter is 339px at 1440, 307px
   at 1024 and 285px at the 960 breakpoint — every one of them well under the
   780px asset, so the raster is always downscaled. Below 960 the row collapses
   to ONE column, not two: three items cannot fill two rows and a 2-up step
   would print two frames and an orphan. There the content box runs to 911px, so
   the 780px cap on the figure is what stops the asset upscaling, and it is
   stated on the figure rather than on the row.

   HEIGHTS ARE NOT MATCHED. All three assets share one ratio so the frames come
   out level on their own; the captions under them are different lengths and are
   allowed to be. align-items:start keeps the frames' tops aligned rather than
   stretching one to another's caption.

   MOTION, and this one is load-bearing: NO .ng-anim SITS ON .ng-vshot, ON A
   <figure> OR ON ANY ANCESTOR OF ONE OF THESE IMAGES. .ng-anim's hidden state
   is a transform and a lazily-loaded image inside a transformed element is the
   one combination HANDOFF records as never loading. §6's note still holds —
   ng-components.css §8 flattens the reveal under a reduce preference, so this
   section adds nothing new to switch off. This block is why §7 sits after §6
   rather than before it: it was appended, not interleaved.
   ========================================================================== */

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

/* min-width:0 for the same reason every other grid item on this sheet carries
   it: a grid item's default min-width:auto refuses to shrink under its content
   and a long caption word would push the column wider than its third. */
.ng-v2 .ng-vshot__fig{ min-width:0; max-width:780px; margin-inline:auto; }

/* ONE COLUMN BELOW 960 — see above: two would leave an orphan. */
@media (max-width:959px){
  .ng-v2 .ng-vshot{
    grid-template-columns:minmax(0,1fr);
    row-gap:34px;
  }
}

/* AT 390 the row is already one column, so the only thing left is rhythm: the
   band comes closer to the ledger above it. */
@media (max-width:767px){
  .ng-v2 .ng-vshot{ margin-top:34px; 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 figure.ng-vshot__fig.ng-vshot__fig.ng-vshot__fig{ margin-inline:auto; }

/* REMOVED 2026-08-20 — .ng-vshot__head and .ng-vshot__lead.
   Their elements are gone. The head asserted the figures were product screens
   and the lead described what the old rasters drew, plus three "temsilîdir"
   hedges; the pictures are now abstract artwork with nothing in them to hedge,
   so both sentences became false rather than merely redundant. The rules are
   deleted rather than left dead so the next reader does not go looking for the
   markup. What replaced them, in the same pass that re-composed §7, is a
   figcaption under each frame carrying that picture's ledger title — shared
   .ng-figband__cap, so nothing language-specific enters this sheet and no rule
   is needed here. .ng-vshot__wide and .ng-vshot__pair went with the one-over-two
   composition; the three figures are now direct children of .ng-vshot. */