/* ==========================================================================
   /sektorler/hizli-teslimat/  +  /en/sectors/fast-delivery/
   ONE stylesheet for the pair (--css-from copies it to fast-delivery.css).

   VARIANCE PASS, 2026-08-17. Assignment from variance-plan.json, not chosen:
       opening   F-INDEX      a navigable list is the hero of the first screen
       dark      MIDDLE       the indigo band falls on section 30 of 6
       sections  6            masthead + area + route + ledger + ladder + close

   The silhouette this produces:
       INDEX-MASTHEAD -> BANDS -> DARK ITINERARY -> LEDGER -> LADDER -> MIST RAIL
   with the tonal run light / mist / INDIGO / light / mist / light. Nothing on
   the page is a card grid, which is the shape ARCHETYPES.md exists to break up:
   every sector leaf on this site is currently a masthead, a 2x2 of white boxes,
   two output panels and an indigo slab, and the owner could not tell one from
   another.

   THE DOMINANT CONTENT SHAPE IS THE ORDERED SEQUENCE, because that is what the
   subject is. The hub asks "dağıtım alanı nereye kadar uzanmalı, rota hangi
   sırayla ilerlemeli?" — a boundary and an order. So the index is numbered
   01-05, the coverage bands run 5 -> 10 -> 15 dakika, the route is a clock-axis
   timeline 09:10 -> 09:58, the four analysis titles are a numbered ledger 01-04,
   and the method is the shared three-rung ladder. Each section's eyebrow carries
   its index number ("01 · ALAN"), so the hero index is visibly the page's
   structure rather than a nav widget bolted on top.

   WHAT IS SHARED AND NOT RE-DECLARED HERE: .ng-masthead, .ng-section-head,
   .ng-out, .ng-steps, .ng-pills, .ng-facts (§15c), .ng-note, .ng-btn and the
   44px hit areas all come from ng-shared.css / ng-mobile.css. Rules this sheet
   used to carry for .ng-out-band, .ng-lead, .ng-how, .ng-vals and .ng-env were
   promoted to ng-shared.css §14 in the consolidation pass and are not restated.

   DELETED IN THIS PASS, because their markup is gone: .ng-fact (the narrow
   key/value stack, now ng-shared's .ng-facts strip) and .ng-route (the vertical
   numbered rail, now .ng-tl). An orphaned rule is not applied, but it does
   mislead the next person.
   ========================================================================== */


/* ==========================================================================
   1. THE F-INDEX MASTHEAD
   ========================================================================== */

/* --- 1a. .ng-masthead--index ----------------------------------------------
   PROMOTED TO ng-shared.css §16b on 2026-08-17, when four more F-INDEX pages
   were queued behind this one. The three rules there are this sheet's, lifted
   character for character with their reasoning, and the copies were deleted
   from here in the same pass — page CSS loads AFTER ng-shared.css, so a copy
   left behind would keep winning and the promotion would be inert.

   .ng-idx__* BELOW WAS DELIBERATELY *NOT* PROMOTED. pages/perakende.css ships
   a DIFFERENT component under the same name (the ruled ledger in its section
   20) and does not declare .ng-idx__list's top rule or .ng-idx__to's
   grid-column, so a shared copy of this block would have drawn a 2px rule and
   moved a destination label on /perakende/ and /en/retail/, invisibly to every
   assertion. The full reasoning is at the head of ng-shared.css §16. Copy this
   block into your own sheet if you are building an F-INDEX page. */

/* The attribution line the old aside label used to carry ("SEKTÖRLER
   SAYFASINDAKİ SORU") plus its body sentence, folded into one line under the
   headline. It is a SENTENCE, so 16px and no tracking — not an eyebrow. */
.ng-v2 .ng-lead__src{
  margin:14px 0 0;
  font-size:16px; line-height:1.55;
  color:var(--ng-muted);
  max-width:64ch;
}

/* --- 1b. .ng-idx — THE INDEX, and the reason this page looks different -----
   A real table of contents: five rows, each an anchor to a real id on this
   page. ARCHETYPES is explicit that "anchors must actually resolve to ids on
   the page" — an index that scrolls to nothing is a decoration with a pointer
   cursor. The five ids are #alan #rota #analiz-basliklari #yontem #iletisim and
   they are the SAME on the English page, because a fragment identifier is
   never displayed and one id set means the two markups cannot drift.

   RULED ROWS, NOT CARDS. A contents list is one thing with five entries, not
   five things; five raised boxes would have re-created the card grid this pass
   is removing, two screens higher up. The 2px top rule on the first row and the
   1px rules between are the same treatment .ng-steps uses for a sequence.

   THREE COLUMNS ABOVE 900px: the ordinal, the entry, and where it goes. The
   destination column is `max-content` and nowrap — a fixed track was tried on
   akaryakit and at 230px the longest label filled the line exactly and pushed
   its arrow onto a line of its own, reading as a stray glyph. The copy column
   is the one that can absorb the difference, so it does.

   scroll-margin-top on the targets is in §5. */
.ng-v2 .ng-idx__label{
  margin:0 0 14px;
  color:var(--ng-muted);       /* not the accent: this labels the page's own
                                  furniture, and five accent-adjacent rows
                                  under an accent label reads as one alarm */
}
.ng-v2 .ng-idx__list{
  list-style:none; margin:0; padding:0;
  border-top:2px solid var(--ng-hairline);
}
.ng-v2 .ng-idx__item{
  border-bottom:1px solid var(--ng-hairline);
}
.ng-v2 .ng-idx__link{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  column-gap:16px; row-gap:6px;
  padding:16px 0;
  color:inherit; text-decoration:none;
}
@media (min-width:900px){
  .ng-v2 .ng-idx__link{
    grid-template-columns:auto minmax(0,1fr) max-content;
    column-gap:28px;
    align-items:baseline;
    padding:18px 0;
  }
}
/* 12px at .1em (ratio .10) is a tracked label by measurement, which is what
   ng-page-check actually tests — not by allowlist. */
.ng-v2 .ng-idx__n{
  font-family:var(--ng-font-label); font-weight:600;
  font-size:12px; line-height:1.6; letter-spacing:.1em;
  text-transform:none;
  color:var(--ng-accent);             /* 5.45:1 on the ground */
  font-variant-numeric:tabular-nums;
}
.ng-v2 .ng-idx__main{ display:block; min-width:0; }
.ng-v2 .ng-idx__name{
  display:block;
  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-idx__body{
  display:block;
  margin-top:5px;
  font-size:15px; line-height:1.55;
  color:var(--ng-muted);
  max-width:72ch;
}
/* grid-column:2 is not cosmetic — without it the destination label auto-places
   into column 1, i.e. UNDER THE ORDINAL, because the two-column stacked grid
   has three children. Reset to auto inside the 900 query, where the third
   column exists and auto-placement is correct again. */
.ng-v2 .ng-idx__to{
  display:block;
  grid-column:2;
  font-family:var(--ng-font-label); font-weight:500;
  font-size:12px; line-height:1.5; letter-spacing:.1em;
  text-transform:none;                /* authored pre-uppercased: i -> İ */
  color:var(--ng-muted);
}
.ng-v2 .ng-idx__to .ng-arrow{ margin-left:8px; }
@media (min-width:900px){
  .ng-v2 .ng-idx__to{ grid-column:auto; text-align:right; white-space:nowrap; }
}
@media (any-hover:hover){
  .ng-v2 .ng-idx__link:hover .ng-idx__name,
  .ng-v2 .ng-idx__link:hover .ng-idx__to{ color:var(--ng-accent); }
  .ng-v2 .ng-idx__link:hover .ng-arrow{ transform:translate3d(4px,0,0); }
}
.ng-v2 .ng-idx__link:focus-visible .ng-idx__name{ color:var(--ng-accent); }

/* --- 1c. the masthead's foot ----------------------------------------------
   Proof strip, its footnote and the one primary CTA, below the index rather
   than above it. The index owns the first screen; this is what a reader who has
   taken the index then sees. ng-shared's .ng-masthead__proof already draws its
   own top rule, so nothing is added here but the measure and the button gap. */
.ng-v2 .ng-lead__foot{ min-width:0; }
/* The strip draws its own top rule and its own 30px of air; the masthead grid
   already supplies 30px of row gap above it, so the two would stack to 60px. */
.ng-v2 .ng-lead__foot .ng-masthead__proof{ margin-top:0; }
.ng-v2 .ng-lead__actions{ margin-top:22px; }


/* ==========================================================================
   2. SECTION 20 — ALAN / AREA
   ========================================================================== */

/* --- 2a. .ng-cov — coverage by drive-time band ----------------------------
   The hub asks "nereye kadar uzanmalı". That is a CHOICE BETWEEN BANDS, not a
   single number, so the panel shows the choice: three drive-time bands, their
   populations, and which one this sample lands on. A single "84.300 kişi" stat
   would have answered a question nobody asked.

   Bar widths are inline `style="width:32%"` on the fill and are percentages of
   the largest band, the same move ng-components.css §8 uses for the homepage
   hero's ranked candidates — so a figure and its bar cannot drift apart in a
   future edit.

   THE PICKED BAND IS ACCENT, THE OTHER TWO INDIGO. One accent row per list,
   exactly as the hero does it: if all three bars were accent, the recommended
   boundary would read as a brand pattern rather than as a decision.

   WIDENED IN THE VARIANCE PASS. The panel used to be one of a side-by-side
   pair, ~500px wide, where a 15-minute band was a 400px stub. It is now the
   full container, so the bar is ~700px and the 32/70/100 proportion is read as
   extent — which is the only thing this figure is for. The label track is fixed
   at 120px above 860 so the three bars start on one line; "15 dk sürüş" and
   "15 min drive" both fit inside it at 14px.
   ========================================================================== */
.ng-v2 .ng-cov{
  list-style:none; margin:0; padding:0;
  display:grid; gap:14px;
}
.ng-v2 .ng-cov__band{
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;
  gap:12px;
}
/* 14px, the reading floor: "10 dk sürüş" is read, not glanced at, and it does
   not carry the >=0.08em tracking that would earn the label exception. nowrap
   because a two-line band label would put the bar out of alignment with the
   two beside it, and the ordering is the whole point of the panel. */
.ng-v2 .ng-cov__k{
  font-size:14px; line-height:1.35;
  color:var(--ng-muted);
  white-space:nowrap;
}
.ng-v2 .ng-cov__bar{
  display:block;
  height:6px; border-radius:3px;
  background:var(--ng-surface-sunken);
  overflow:hidden;
}
.ng-v2 .ng-cov__bar i{
  display:block; height:100%; border-radius:3px;
  background:var(--ng-indigo);
}
.ng-v2 .ng-cov__band.is-pick .ng-cov__bar i{ background:var(--ng-accent); }
/* 16px, so --ng-accent (not --ng-accent-display) is the correct token on the
   picked row: display magenta is reserved for 24px and up and would fail AA
   here. 5.64:1 on white. */
.ng-v2 .ng-cov__v{
  text-align:right;
  font-family:var(--ng-font-display); font-weight:600;
  font-size:16px; line-height:1.3;
  letter-spacing:-0.01em;
  color:var(--ng-ink);
  font-variant-numeric:tabular-nums;
}
.ng-v2 .ng-cov__band.is-pick .ng-cov__v{ color:var(--ng-accent); }
@media (min-width:860px){
  .ng-v2 .ng-cov{ gap:18px; }
  .ng-v2 .ng-cov__band{ grid-template-columns:120px minmax(0,1fr) 104px; gap:24px; }
  .ng-v2 .ng-cov__bar{ height:10px; border-radius:5px; }
  .ng-v2 .ng-cov__bar i{ border-radius:5px; }
  .ng-v2 .ng-cov__v{ font-size:19px; }
}

/* --- 2b. .ng-sum — one tagged summary line --------------------------------
   A pill-tagged sentence stating what the list adds up to: on the area panel
   the verdict (ÖNERİLEN SINIR), on the route strip the arithmetic (TOPLAM).

   IT IS A SEPARATE ROW, not a chip inside the picked band. At 390 the band row
   is already label + bar + figure across ~290px, and a fourth element there
   pushed the bar to ~60px — the one element in the panel that has to stay
   readable as a proportion. */
.ng-v2 .ng-sum{
  display:flex; flex-wrap:wrap; align-items:center; gap:8px 10px;
  margin:20px 0 0;
  font-size:14px; line-height:1.4;
  color:var(--ng-ink);
}
/* 11px at .1em (ratio .10) is a tracked label by measurement, which is what
   ng-page-check actually tests. --ng-accent on --ng-accent-wash is 4.87:1. */
.ng-v2 .ng-sum__tag{
  padding:4px 9px;
  border-radius:var(--ng-radius-pill);
  background:var(--ng-accent-wash);
  color:var(--ng-accent);
  font-family:var(--ng-font-label); font-weight:600;
  font-size:11px; line-height:1.3; letter-spacing:.1em;
  text-transform:none;              /* strings are authored pre-uppercased */
}

/* --- 2c. the three summary figures ----------------------------------------
   These were a .ng-fact stack — key left, value right, three rows down a
   narrow column. That rule set is DELETED, not kept as a fallback: at full
   container width a three-row stack leaves 700px of empty panel beside it, and
   ng-shared §15c already ships exactly the shape this wants (.ng-facts runs
   key/value pairs ACROSS the container, 2 up below 640, 3 up above). Only the
   separation from the bands above is page-specific. */
.ng-v2 .ng-out__facts{
  margin-top:22px;
  padding-top:20px;
  border-top:1px solid var(--ng-hairline);
}
/* §15c gives each CELL a border-top below 960 and swaps to border-LEFT above
   it. So above 960 this wrapper's rule is the only horizontal line, and below
   it the wrapper's rule would sit 20px above a full-width row of cell rules —
   two parallel hairlines saying one thing. The cells win below 960. */
@media (max-width:959px){
  .ng-v2 .ng-out__facts{ border-top:0; padding-top:4px; }
}
/* The panel is the full container on this page, not one of a side-by-side
   pair, so ng-shared's 16px gutters read as a hairline margin on a 1072px
   plate. Only above 860, where the extra width actually exists. */
@media (min-width:860px){
  .ng-v2 .ng-area .ng-out__bar{ padding:14px 28px; }
  .ng-v2 .ng-area .ng-out__body{ padding:26px 28px 28px; }
  /* ng-shared's __foot has no measure, because in the leaf pattern it sat in a
     ~500px column and never needed one. At 1072px it runs ~150 characters to
     the line, which is roughly twice a readable measure. Found in the 1440
     screenshot; ng-page-check reported the page clean before and after. */
  .ng-v2 .ng-area .ng-out__foot{ max-width:92ch; }
}


/* ==========================================================================
   3. SECTION 30 — .ng-tl, THE ROUTE TIMELINE ON THE INDIGO BAND

   NOT A RANKED BAR LIST, which is what the sibling sector pages use for their
   sample output. A ROUTE IS A SEQUENCE: stop 03 exists because 01 and 02
   happened, the numbers are not scores, and four competing bars would say the
   opposite of what the figure means.

   HORIZONTAL ABOVE 860px. A day runs left to right, so the four arrival times
   form a clock axis along the top and the spine reads as elapsed time rather
   than as a list. Below 860 it rotates to a vertical rail, because four stop
   names in 80px each is not a timeline, it is a hyphenation exercise.

   THE SPINE IS DRAWN BY THE MARKS THEMSELVES, not by a pseudo-element and not
   by a border on the list. Each stop's __mark is a full-width 2px rule with its
   dot pinned to the left end; four of them butt together into one continuous
   line, and the last one's rule is transparent so the line STOPS at the final
   dot instead of running off the right edge. Two things this avoids, both of
   which have cost this project a round:
     · `li::before` is killed globally by ng-components.css §10 (the fontello
       chevron fix). The previous version of this figure lost its whole
       connecting rail to exactly that, and ng-page-check reported the page
       clean before and after — a missing pseudo-element is invisible to every
       DOM and computed-style assertion.
     · negative offsets computed from a grid gap drift the moment the gap
       changes. Here the geometry is `left:0` and `width:100%`, which cannot.

   ONE ACCENT DOT, the first: the day starts there. Same "one accent row per
   list" rule as the coverage bars above and the homepage's ranked list. Inside
   .is-dark, --ng-accent resolves to the pink tier (#FF9BC9, 7.68:1 on navy) and
   both accent tiers collapse onto it, so nothing here can reintroduce the light
   magenta that measures 2.65:1 on this band.
   ========================================================================== */

.ng-v2 .ng-tl{ min-width:0; }

/* The strip's own chrome. Same three roles as .ng-out__bar — what it is, what
   it is a sample OF, and the ÖRNEK flag — but drawn as a ruled line on the
   dark band rather than as a mist bar, because a sunken plate on indigo is a
   third surface and this system has two. */
.ng-v2 .ng-tl__bar{
  display:flex; flex-wrap:wrap; align-items:center; gap:10px 14px;
  padding-bottom:16px;
  border-bottom:1px solid var(--ng-hairline);
}
.ng-v2 .ng-tl__label{
  flex:none;
  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-ink);
}
.ng-v2 .ng-tl__meta{
  flex:1 1 auto; min-width:0;
  font-family:var(--ng-font-label); font-weight:500;
  font-size:12px; line-height:1.35; letter-spacing:.08em;
  text-transform:none;
  color:var(--ng-muted);              /* 9.22:1 on navy */
}
.ng-v2 .ng-tl__flag{
  flex:none;
  padding:4px 9px;
  border-radius:var(--ng-radius-pill);
  background:var(--ng-accent-wash);
  color:var(--ng-accent);             /* 5.89:1 on the dark wash */
  font-family:var(--ng-font-label); font-weight:600;
  font-size:11px; line-height:1.3; letter-spacing:.1em;
  text-transform:none;
}

/* The column caption. The strip's bar has three slots — what it is, what it is
   a sample OF, and the ÖRNEK flag — and the figure has a fourth string to say:
   what the rows below are columns of. .ng-out solves this with a __label inside
   the panel body, so this is the same idea in the same idiom rather than a
   fourth item crammed into the bar. 11px at .1em (ratio .10) is a tracked label
   by measurement. */
.ng-v2 .ng-tl__cap{
  margin:20px 0 0;
  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-tl__list{
  list-style:none;
  margin:24px 0 0; padding:0;
  display:grid;
  grid-template-columns:minmax(0,1fr);
}
.ng-v2 .ng-tl__stop{ min-width:0; }

.ng-v2 .ng-tl__t{
  display:block;
  font-family:var(--ng-font-display); font-weight:700;
  font-size:22px; line-height:1.15;
  letter-spacing:-0.02em;
  color:var(--ng-ink);
  font-variant-numeric:tabular-nums;
}
.ng-v2 .ng-tl__mark{
  display:block;
  position:relative;
  background:var(--ng-hairline);
}
.ng-v2 .ng-tl__mark i{
  display:block;
  position:absolute;
  width:14px; height:14px;
  border-radius:50%;
  background:var(--ng-ink);
  /* The ring is the band's own ground, so the dot sits ON the rule rather than
     being cut in half by it. A token, not a literal. */
  box-shadow:0 0 0 4px var(--ng-ground);
}
.ng-v2 .ng-tl__stop.is-first .ng-tl__mark i{ background:var(--ng-accent); }
/* The line stops at the last dot. Without this it runs to the container edge
   and the figure claims a fifth stop that does not exist. */
.ng-v2 .ng-tl__stop:last-child .ng-tl__mark{ background:transparent; }

.ng-v2 .ng-tl__main{ display:block; min-width:0; }
.ng-v2 .ng-tl__n{
  display:block;
  font-family:var(--ng-font-label); font-weight:600;
  font-size:11px; line-height:1.4; letter-spacing:.1em;
  text-transform:none;
  color:var(--ng-muted);
  font-variant-numeric:tabular-nums;
}
.ng-v2 .ng-tl__name{
  display:block;
  margin-top:3px;
  font-family:var(--ng-font-display); font-weight:600;
  font-size:17px; line-height:1.3;
  color:var(--ng-ink);
}
.ng-v2 .ng-tl__sub{
  display:block;
  margin-top:4px;
  font-size:14px; line-height:1.45;
  color:var(--ng-muted);
}

.ng-v2 .ng-tl__total{
  display:flex; flex-wrap:wrap; align-items:center; gap:8px 10px;
  margin:30px 0 0; padding-top:18px;
  border-top:1px solid var(--ng-hairline);
  font-size:15px; line-height:1.4;
  color:var(--ng-ink);
}
.ng-v2 .ng-tl__ttag{
  padding:4px 9px;
  border-radius:var(--ng-radius-pill);
  background:var(--ng-accent-wash);
  color:var(--ng-accent);
  font-family:var(--ng-font-label); font-weight:600;
  font-size:11px; line-height:1.3; letter-spacing:.1em;
  text-transform:none;
}
.ng-v2 .ng-tl__foot{
  margin:18px 0 0;
  font-size:15px; line-height:1.6;
  color:var(--ng-muted);
  max-width:86ch;
}
/* The illustrative note and the figure's own footnote are both muted sentences
   at almost the same size, so with the shared 20px they read as one paragraph
   broken in half. The note is a caption ABOUT the figure, not part of it. */
.ng-v2 .ng-routeband__note{ margin-top:30px; }

/* --- HORIZONTAL: the clock axis ------------------------------------------- */
@media (min-width:860px){
  .ng-v2 .ng-tl__list{
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:0;                            /* the marks butt into one rule; the
                                         breathing room is padding on the text */
  }
  .ng-v2 .ng-tl__t{ margin-bottom:16px; padding-right:24px; }
  .ng-v2 .ng-tl__mark{ height:2px; margin-bottom:22px; }
  .ng-v2 .ng-tl__mark i{ left:0; top:50%; margin-top:-7px; }
  .ng-v2 .ng-tl__main{ padding-right:24px; }
}

/* --- VERTICAL: the rail --------------------------------------------------- */
@media (max-width:859px){
  .ng-v2 .ng-tl__stop{
    display:grid;
    grid-template-columns:14px minmax(0,1fr);
    grid-template-areas:"mark time" "mark main";
    column-gap:18px;
    padding-bottom:24px;
  }
  .ng-v2 .ng-tl__stop:last-child{ padding-bottom:0; }
  .ng-v2 .ng-tl__t{ grid-area:time; font-size:20px; }
  .ng-v2 .ng-tl__main{ grid-area:main; margin-top:6px; }
  /* margin-left centres the 2px rule under the 14px dot; the dot then hangs
     6px to the left of it, back onto the column's own edge. */
  .ng-v2 .ng-tl__mark{
    grid-area:mark;
    width:2px; margin-left:6px;
    align-self:stretch;
  }
  .ng-v2 .ng-tl__mark i{ left:-6px; top:5px; }
}


/* ==========================================================================
   4. SECTION 40 — .ng-ledger, THE FOUR ANALYSIS TITLES

   THE CARD GRID IS GONE ON PURPOSE. ARCHETYPES.md: "Do not reach for a card
   grid by default — that is the shape this run exists to break up." Every
   sector leaf renders this same client list as four raised white boxes, so four
   of them side by side are four identical 2x2 grids. A ledger row instead gives
   the client's own two-sentence description its full measure rather than
   squeezing it into a 260px column, and a reader can run their eye down the
   right-hand column and see that two titles go to /cozumler/ and two to
   /urunler/ without opening anything.

   THE WHOLE ROW IS THE ANCHOR, exactly as .ng-card--link is on the pages that
   still use cards: no per-row "daha fazla bilgi" to repeat four times, one link
   whose accessible name is the row's own heading, and a tap target over 100px
   tall rather than a 97x30 line of text.

   THREE COLUMNS ABOVE 900px — ordinal, title + destination, description. The
   title track is a fixed 30% rather than max-content: "Dağıtım Alanı
   Optimizasyonu" and "Distribution Area Optimization" are the long ones and a
   max-content track sized to them would starve the description in English.

   The rules are hairlines with a 2px cap at the top of each group, the same
   sequence idiom .ng-steps and .ng-idx use, so the three list shapes on this
   page read as one family rather than three inventions.
   ========================================================================== */
.ng-v2 .ng-ledger{
  list-style:none; margin:0; padding:0;
  border-top:2px solid var(--ng-hairline);
}
.ng-v2 .ng-ledger__item{ border-bottom:1px solid var(--ng-hairline); }
.ng-v2 .ng-ledger__link{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  column-gap:16px; row-gap:8px;
  padding:22px 0;
  color:inherit; text-decoration:none;
}
@media (min-width:900px){
  .ng-v2 .ng-ledger__link{
    grid-template-columns:auto minmax(0,30%) minmax(0,1fr);
    column-gap:32px;
    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:2; letter-spacing:.1em;
  text-transform:none;
  color:var(--ng-accent);
  font-variant-numeric:tabular-nums;
}
.ng-v2 .ng-ledger__head{ display:block; min-width:0; }
/* (0,3,0) doubled, the §11 defence: the theme's
   `body .content-wrapper h?:not(:first-child){margin-top:50px}` is (0,2,2) and
   this h4 is not its parent's first child. */
.ng-v2 .ng-ledger__name.ng-ledger__name{
  margin: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-ledger__to{
  display:block;
  margin-top:8px;
  font-family:var(--ng-font-label); font-weight:500;
  font-size:12px; line-height:1.45; letter-spacing:.1em;
  text-transform:none;                /* authored pre-uppercased: i -> İ */
  color:var(--ng-muted);
}
.ng-v2 .ng-ledger__to .ng-arrow{ margin-left:8px; }
/* grid-column:2 for the same reason as .ng-idx__to — three children in a
   two-column stacked grid put the description under the ordinal otherwise. */
.ng-v2 .ng-ledger__body{
  display:block;
  grid-column:2;
  font-size:15px; line-height:1.62;
  color:var(--ng-muted);
  max-width:70ch;
}
@media (min-width:900px){
  .ng-v2 .ng-ledger__body{ grid-column:auto; }
}
/* ng-shared §14 separates two .ng-vals__half blocks with a hairline and 30px of
   padding. That was written for card grids, which have no rules of their own;
   here it would draw a second hairline 34px under the ledger's own last-row
   rule. Air only, no border — the two groups are already fenced by their 2px
   caps. */
.ng-v2 .ng-vals__half + .ng-vals__half{
  margin-top:40px;
  padding-top:0;
  border-top:0;
}
@media (any-hover:hover){
  .ng-v2 .ng-ledger__link:hover .ng-ledger__name,
  .ng-v2 .ng-ledger__link:hover .ng-ledger__to{ 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); }


/* ==========================================================================
   5. SECTION 60 — THE CLOSING RAIL, and the anchor offsets

   THE PAGE CANNOT END ON THE INDIGO SLAB: dark:MIDDLE spends the band on
   section 30, and the finding behind this whole pass was that 76 of 76 pages
   closed the same way. So the closing decision is 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. Shape copied from
   pages/akaryakit.css §4, which PATTERNS.md tells MIDDLE/OPEN/NONE-MIST pages
   to copy; still not promoted to the shared file, because three pages have not
   asked for it yet.
   ========================================================================== */
.ng-v2 .ng-close__rail{
  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 for the theme's 50px margin-top. This h2 is NOT the first child
   of its block — the eyebrow is — so `h2:not(:first-child)` does match it,
   unlike the section heads. */
.ng-v2 .ng-close__title.ng-close__title{
  margin:14px 0 0;
  font-size:clamp(1.6rem, 3.2vw, 2.1rem);
  line-height:1.15;
  letter-spacing:-0.02em;
  max-width:22ch;
  text-wrap:balance;
}
.ng-v2 .ng-close__lede{
  margin:14px 0 0;
  font-size:17px; line-height:1.6;
  color:var(--ng-muted);              /* 5.42:1 on mist */
  max-width:54ch;
}
.ng-v2 .ng-close__side{
  display:flex; flex-direction:column;
  align-items:flex-start;
  gap:4px;
}
@media (min-width:900px){
  .ng-v2 .ng-close__side{ align-items:flex-end; text-align:right; }
}
.ng-v2 .ng-close__actions{ margin-top:0; }
/* 14px for the same reason .ng-cta__meta is: a phone number and an address are
   read and copied, and .04em tracking does not earn the label exception. */
.ng-v2 .ng-close__meta{
  margin:16px 0 0;
  font-family:var(--ng-font-label); font-weight:500;
  font-size:14px; line-height:1.6; letter-spacing:.04em;
  color:var(--ng-muted);
}

/* Every index target needs the same offset, so it is one class on the section
   rather than five id selectors. 104px clears the theme's sticky header; the
   84px step matches what this sheet already used for .ng-out-band below the
   width where the header collapses. */
.ng-v2 .ng-jump{ scroll-margin-top:104px; }
@media (max-width:1364px){
  .ng-v2 .ng-jump{ scroll-margin-top:84px; }
}


/* ==========================================================================
   6. RESPONSIVE
   ng-mobile.css §7 carries every 44px hit area (crumbs, buttons, pills, tel) at
   767, at 768-1023 and at exactly 1024. The two interactive things this page
   adds are .ng-idx__link and .ng-ledger__link, both rows over 70px tall at
   every width, so this block is type and rhythm only.
   ========================================================================== */

@media (max-width:767px){
  /* Mobile reading floor, 16px, for every sentence this page adds. The tracked
     labels (__n, __to, __tag, __flag, __ttag, __label) are exempt by
     measurement — letter-spacing / font-size = 0.10, over the 0.08 the checker
     tests — and stay put. */
  .ng-v2 .ng-lead__src,
  .ng-v2 .ng-idx__body,
  .ng-v2 .ng-ledger__body,
  .ng-v2 .ng-tl__foot,
  .ng-v2 .ng-close__lede{ font-size:16px; }

  /* --index's 26px mobile gap moved to ng-shared.css §16b with the modifier. */
  .ng-v2 .ng-idx__name{ font-size:18px; }
  .ng-v2 .ng-idx__link{ padding:15px 0; }

  .ng-v2 .ng-vals__name.ng-vals__name{ font-size:20px; margin-bottom:16px; }
  .ng-v2 .ng-vals__half + .ng-vals__half{ margin-top:32px; }
  .ng-v2 .ng-vals__note,
  .ng-v2 .ng-how__note,
  .ng-v2 .ng-area__note{ max-width:none; }

  /* The area panel at 390. Everything that is a READ sentence goes up, and the
     band figure goes with it so the comparison stays legible; the row gaps come
     down so the panel plus its footnote still fits inside one screen. */
  .ng-v2 .ng-cov{ gap:13px; }
  .ng-v2 .ng-cov__band{ gap:10px; }
  .ng-v2 .ng-cov__k{ font-size:15px; }
  .ng-v2 .ng-cov__v{ font-size:17px; }
  .ng-v2 .ng-sum{ font-size:15px; }
  .ng-v2 .ng-out__facts{ margin-top:18px; }

  /* The timeline at 390. __sub stays 15px: it is a two-figure annotation on a
     name, the same call .ng-route__sub shipped with, and 16px there pushes
     "6 teslimat · 1,2 km" onto two lines inside a 14px-indented rail. */
  .ng-v2 .ng-tl__t{ font-size:19px; }
  .ng-v2 .ng-tl__name{ font-size:17px; }
  .ng-v2 .ng-tl__sub{ font-size:15px; }
  .ng-v2 .ng-tl__list{ margin-top:24px; }
  .ng-v2 .ng-tl__total{ margin-top:24px; font-size:16px; }

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


/* ==========================================================================
   7. REDUCED MOTION
   ng-shared.css §10 already flattens .ng-card and .ng-arrow under a reduce
   preference — including cancelling ng-components.css's !important marker
   transform — and ng-components.css §8 does the same for .ng-anim. Nothing on
   this page adds motion beyond those two: the coverage bars are static widths
   and the timeline spine is a static element rather than an animated one,
   precisely so that a reduce preference has nothing left 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.
   ========================================================================== */


/* ==========================================================================
   8. THE FOUR SAMPLE BANDS — one client artefact per indexed section

   WHY THIS SHAPE AND NOT A PICTURE INDEX. F-INDEX makes the list the hero, and
   the variance run found this page and sarj-istasyonu to be effectively the
   same page: identical masthead, identical five-row ruled index, the closest
   first-viewport pair on the site. The twins run separated them by turning
   SARJ'S INDEX into a two-column grid of framed pictures. So the one thing this
   page must not do is put pictures in its own index. Section 10 is untouched,
   text only; the four artefacts appear ONE PER INDEXED SECTION instead, spread
   over sections 20, 30, 40 and 50 — a shape that lives down the length of the
   page rather than in the first screen, which is the whole margin between the
   two pages now. Exactly one picture per band; never two.

   NO HEADING BESIDE ANY OF THEM, AND A FIGCAPTION UNDER EVERY ONE. The four
   assets are abstract drawings that carry no text of their own, so each one is
   named in its own figcaption — the ledger title it stands for, plus the few
   words that say what the drawing shows — and never in an h3 beside the frame,
   which would only stutter against the title 20px lower. Restored 2026-08-20:
   with the captions stripped these were four unlabelled pictures spread down a
   long page with nothing to say which analysis each belonged to.

   NO CHIP AND NO HEDGE ON ANY OF THEM. There are no numbers inside these
   drawings to be illustrative ABOUT; the "temsilîdir" contract belongs to the
   two real sample panels (.ng-out in section 20, .ng-tl in section 30), which
   keep their ÖRNEK chips and their notes.

   NO GRID TO EQUALISE. The four never sit side by side — one per indexed
   section, each capped at the same 780px and centred — so they are already the
   same size as a set, and there is no two-column split here to re-balance.
   ========================================================================== */

/* THE CAP IS THE POINT. The assets are 780x540 and .ng-figband__img is
   width:100%, so a figure running the full 1120px container upscales the raster
   by 1.44x and the 11px type inside it goes soft as well as small. Centred
   rather than left-anchored: a 780px block hard against the left of a 1120px
   container reads as a column that has lost its neighbour, and these bands have
   no neighbour by design. 40px of air above, the same step §4 gives the two
   ledger groups, so a picture sits as its own block inside the band rather than
   as a tail on the thing above it. */
.ng-v2 .ng-hzt__fig{
  max-width:780px;
  margin-inline:auto;
  margin-top:40px;
}

/* SECTION 40's BAND SITS BETWEEN THE TWO LEDGER GROUPS, directly under the
   Şube Yer Seçimi row it illustrates rather than after the whole ledger. That
   breaks the adjacency `.ng-vals__half + .ng-vals__half` relies on in both
   ng-shared §14 and §4 above — which costs nothing, because §4 had already
   cancelled that rule's hairline and padding and kept only its air. The air is
   restated here on the far side of the figure; the near side is the figure's
   own margin-top, so the group gap stays 40px on both sides. */
.ng-v2 .ng-hzt__fig + .ng-vals__half{
  margin-top:40px;
}

/* THE CHIP ON THE INDIGO BAND SITS ON A WHITE RASTER, NOT ON THE BAND.
   .ng-figband__flag is absolutely positioned inside the frame, which on section
   30 means it lands on the artefact's own white ground. .is-dark has by then
   swapped --ng-accent to the light pink tuned for navy BEHIND it, and that pink
   over white measures about 2:1 — the one place ng-shared's chip cannot know
   what it is sitting on. --ng-indigo is the navy token .is-dark does not
   redefine, so the chip takes it here; the wash behind it is translucent and
   composites over the raster's white to a pale pink, and navy on that pair
   measures about 13:1. Scoped to this one band: everywhere else on the page the
   frame sits on the page ground and ng-shared's chip is already correct. */
/* REMOVED 2026-08-18, image rollout. This page had scoped the chip to indigo ink
   on the indigo band, because .is-dark flips --ng-accent to the light pink tuned
   for navy and the chip sits over the asset's WHITE margin, not over the band.
   ng-shared.css §17 now fixes that centrally for every page by freezing
   --ng-flag-ink / --ng-flag-wash to the light values at .ng-v2, so this override
   is redundant AND it made one chip on the site look different from the other
   125. Deleted so every ÖRNEK/SAMPLE chip renders identically. */

@media (max-width:767px){
  /* 32px, matching the step §6 takes for the ledger groups at this width. A
     780px asset renders at 342px here, which is fine for an abstract drawing
     and would not be for a diagram: no fact on this page is left to a picture
     alone. Everything the four artefacts stand for is said in words by the
     section's own lede, panel, ledger row and figcaption. */
  .ng-v2 .ng-hzt__fig{ margin-top:32px; }
  .ng-v2 .ng-hzt__fig + .ng-vals__half{ margin-top:32px; }
}


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