/* ==========================================================================
   /sektorler/sarj-istasyonu/  +  /en/sectors/charging-station/
   One stylesheet for the pair. Loaded AFTER ng-foundation, ng-components,
   ng-shared and ng-mobile, so anything restated here wins.

   THE VARIANCE ASSIGNMENT (variance-plan.json), which is fixed, not chosen:

       opening    F-INDEX      a list is the hero; the h1 is small
       dark       MIDDLE       the indigo band is section 40 of six
       sections   6            masthead + five

   WHAT THIS PAGE LOOKED LIKE BEFORE: the house silhouette the owner objected
   to — h1 on the left, a quote plate on the right, then a 2x2 card grid, then
   two sample panels, then a ladder, then an indigo close. 76 of 76 pages.

   WHAT IT IS NOW, section by section, and why each surface is what it is:

       10  GROUND   F-INDEX masthead: small h1 = the whole hub question, then
                    a TWO-UP PICTURE INDEX — four of its five entries led by
                    the client's own supplied artefact for this sector — then
                    the proof strip and one CTA
       20  MIST     the DOMINANT SHAPE — a comparison table, five districts
                    with demand and today's supply under two grouped headers
       30  GROUND   one address from the table's top row, as a wide six-field
                    key/value report (.ng-facts), not a second table
       40  INDIGO   the four analysis titles as a 2x2 RULED MATRIX
       50  GROUND   the three-step ladder and the lateral chips
       60  MIST     the close: a RAISED white panel on mist, because the page
                    has already spent its dark band

   THERE IS NO .ng-card ON THIS PAGE AT ALL, and that is deliberate: "a stack
   of card grids" is the shape this pass exists to break, and everything this
   page has to show is either tabular, a key/value pair, or an entry in an
   index.

   THE OTHER F-INDEX PAGE IN THIS GROUP is /sektorler/hizli-teslimat/. Sharing
   an archetype means sharing the masthead treatment — that is the whole point
   of a fixed assignment — so the two differ where PATTERNS.md says they must:

       first screen  this page  two-up grid of framed sample pictures
                     that page  one column of five ruled text rows
       tonal order   this page  GROUND MIST GROUND INDIGO GROUND MIST
                     that page  GROUND MIST INDIGO GROUND MIST  GROUND
       dominant      this page  a two-axis comparison table + a wide report
                     that page  coverage bars + a route timeline + a ledger

   THAT FIRST LINE IS NEW, AND IT IS WHY THIS SHEET WAS OPENED A SECOND TIME.
   The variance review measured the two first screens at an RMS luminance
   difference of 0.027 against a group median of 0.101 — the closest pair on
   the site by 2.4x — because both mastheads were the same ruled index. Only
   this page moved; hizli-teslimat is another agent's work and was not touched.

   THE FOUR IMAGES ARE THE CLIENT'S OWN, 780x540, already in this palette, and
   every figure inside them is a MOCKUP by the client's own guide. They are
   Turkish rasters, so they are on the Turkish page only and the English page
   gets §17b's text plate in the same four boxes — same sections, same order,
   same shapes.

   NOTE: rules this sheet used to declare for the shared leaf primitives
   (.ng-out-band, .ng-lead, .ng-how, .ng-vals, .ng-steps__pills, .ng-env,
   .ng-net) live in ng-shared.css §14. .ng-net and .ng-env are no longer used
   by this page — the ranked bar list became the table in §2 and the six
   key/value rows became the strip in §3 — so their overrides are gone with
   them, including the .ng-net__delta chip rule, whose content is now the
   table's own ARZ column.
   ========================================================================== */


/* ==========================================================================
   1. THE F-INDEX MASTHEAD — section 10
   .ng-masthead--index itself is ng-shared.css §16b (one column, small h1,
   72ch lede). Everything below is the index list and the masthead's foot.
   ========================================================================== */

/* The attribution line the deleted aside 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-pidx — THE PICTURE INDEX -------------------------------------
   THE ONE THING THIS PASS CHANGED, AND WHY. The variance review measured this
   page's first screen against /sektorler/hizli-teslimat/ — the other F-INDEX
   page in this group — at an RMS luminance difference of 0.027 against a group
   median of 0.101: the closest pair on the site by 2.4x, and by construction,
   because this sheet used to carry a copy of that page's .ng-idx. Two pages
   that share an assigned archetype are meant to share the masthead TREATMENT;
   they are not meant to be the same picture. So the index here is no longer a
   single column of ruled rows with an ordinal rail and a right-hand
   destination track — that composition is hizli-teslimat's and stays theirs —
   it is a TWO-UP GRID OF PICTURE-LED ENTRIES. Four of the five entries are led
   by the client's own supplied 780x540 artefact for this sector, so the
   difference is visible before a word is read, which is the test.

   .ng-pidx IS A NEW NAME, CHECKED BEFORE IT WAS WRITTEN. `.ng-idx` is already
   two different components on this site (hizli-teslimat's masthead index and
   perakende's section-20 ledger), which is why PATTERNS.md §16 refuses to
   promote it; a third under the same name would be the .ng-card collision
   repeated. Nothing here is promoted either: one page has this shape.

   THE FRAME, THE CHIP AND THE CAPTION ARE ng-shared.css §17a AS SHIPPED —
   .ng-figband__frame / __img / __flag / __cap, and on the English page
   §17b's --text plate. This sheet adds the grid and the entry text and nothing
   else, because a fifth hand-rolled sample-chrome is exactly what §17 was
   promoted to stop.

   STILL A REAL TABLE OF CONTENTS: five entries, five anchors, five ids that
   exist on this page (#siralama #aday-nokta #analiz-basliklari #yontem
   #iletisim), and each entry's meta line is the same "01 · NEREYE" the section
   it points at prints as its own eyebrow. ARCHETYPES is explicit that an index
   which scrolls to nothing is a decoration with a pointer cursor.

   TWO COLUMNS FROM 720px, NOT 900. At 768 a one-column grid renders a 780px
   asset 720px wide and 498px tall, and four of those make a 2,800px masthead a
   visitor has to scroll past to reach section 20. Two columns at that width
   put the picture at 344px, which is where these assets stop being a wall. */
.ng-v2 .ng-pidx__label{
  margin:0 0 16px;
  color:var(--ng-muted);       /* not the accent: this labels the page's own
                                  furniture, and it now sits over four framed
                                  artefacts that already carry accent chips */
}
.ng-v2 .ng-pidx__list{
  list-style:none; margin:0; padding:0;
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:30px;
}
@media (min-width:720px){
  .ng-v2 .ng-pidx__list{
    grid-template-columns:repeat(2,minmax(0,1fr));
    column-gap:40px; row-gap:40px;
  }
  .ng-v2 .ng-pidx__item--wide{ grid-column:1 / -1; }
}
/* The tile is the positioning context for the stretched hit area below. */
.ng-v2 .ng-pidx__item{ position:relative; min-width:0; }
/* <figure> margin:0 at (0,3,0). §17a states it on .ng-figband__fig for the
   same reason — the theme's `figure:not(:first-child)` is (0,2,2) and there is
   no `table[class*="ng-"]`-style blanket defence for figures. */
.ng-v2 .ng-pidx__fig{ margin:0; min-width:0; }
/* The frame is §17a's own <div> and the English plate's lead line is its own
   <p>, unchanged — they are inside the <figure> and NOT inside the <a>, so no
   element has to be downgraded to phrasing content to stay valid. That matters
   on the English page, where the plate holds a <dl>: a <dl> inside a <span> is
   invalid, renders anyway, and is the kind of thing no assertion here reports.
   .ng-pidx__frame / __sub therefore need no declarations of their own; the
   classes stay on the markup as hooks for whatever this page needs next. */
/* 10px, not §17a's 14px: in a tile the caption is 10px under its own picture
   and 16px above the entry it belongs to, so the two gaps have to be told
   apart. The measure ceiling goes: a 516px column is already under 68ch. */
.ng-v2 .ng-pidx__cap{ margin-top:10px; max-width:none; }

/* THE ENGLISH PLATE'S FACTS STRIP. §15c goes 3-up above 640 and swaps its
   dividers to border-left above 960 — both sized for a strip running the full
   1120px container, not for a 470px plate inside a tile, where three columns
   are 150px each and "Candidate site scored" sets four lines. Two columns at
   every width, dividers back on the top edge. (0,3,0) beats §15c's (0,2,0) at
   every width, so this needs no media query of its own. */
.ng-v2 .ng-pidx .ng-facts{ grid-template-columns:repeat(2,minmax(0,1fr)); }
.ng-v2 .ng-pidx .ng-facts__cell{
  padding:12px 16px 0 0;
  border-top:1px solid var(--ng-hairline);
  border-left:0;
}
.ng-v2 .ng-pidx .ng-facts__cell:nth-child(2n){ padding-right:0; }

/* THE ENTRY. The <a> wraps the TEXT ONLY and then covers the whole tile with
   an absolutely positioned ::after. That is not a styling trick, it is what
   lets both of these be true at once: the image keeps a real alt describing
   the diagram (the brief requires one), and the link's accessible name is the
   entry — "01 · NEREYE Nereye: ilçe sıralaması …" — rather than the diagram
   description, which is what a screen-reader user would otherwise hear as the
   name of a table-of-contents link. Cost: the caption inside the tile cannot
   be text-selected. Accepted; .ng-card--link has the same property. */
.ng-v2 .ng-pidx__link{
  display:block;
  margin-top:16px;
  color:inherit; text-decoration:none;
}
.ng-v2 .ng-pidx__link::after{
  content:"";
  position:absolute; inset:0;
  border-radius:var(--ng-radius);
}
/* 12px at .1em (ratio .10) is a tracked label BY MEASUREMENT, which is what
   ng-page-check tests — not by allowlist. Authored pre-uppercased: i -> İ. */
.ng-v2 .ng-pidx__meta{
  display:block;
  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-pidx__name{
  display:block;
  margin-top:6px;
  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-pidx__body{
  display:block;
  margin-top:7px;
  font-size:15px; line-height:1.55;
  color:var(--ng-muted);
  max-width:46ch;
}
.ng-v2 .ng-pidx__to{
  display:block;
  margin-top:12px;
  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-pidx__to .ng-arrow{ margin-left:8px; }
@media (any-hover:hover){
  .ng-v2 .ng-pidx__link:hover .ng-pidx__name,
  .ng-v2 .ng-pidx__link:hover .ng-pidx__to{ color:var(--ng-accent); }
  .ng-v2 .ng-pidx__link:hover .ng-arrow{ transform:translate3d(4px,0,0); }
}
.ng-v2 .ng-pidx__link:focus-visible .ng-pidx__name{ color:var(--ng-accent); }

/* THE FIFTH ENTRY HAS NO PICTURE, because there are four artefacts and five
   sections, and the fifth section is the contact close — which has no sample
   output and must not be given a borrowed one. It spans both columns under the
   grid with a rule over it, so the index reads as four samples and then a way
   out, rather than as a 2x2 with a hole in it. */
.ng-v2 .ng-pidx__item--wide{
  border-top:1px solid var(--ng-hairline);
  padding-top:24px;
}
.ng-v2 .ng-pidx__item--wide .ng-pidx__link{ margin-top:0; }
@media (min-width:900px){
  /* Two columns inside the wide row: the naming column and the sentence. A
     single stacked block across 1072px would set the body to one 1000px line,
     which is twice any measure on this page. */
  .ng-v2 .ng-pidx__item--wide .ng-pidx__link{
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);
    grid-template-areas:
      "meta body"
      "name body"
      "to   body";
    column-gap:48px;
    align-content:start;
  }
  .ng-v2 .ng-pidx__item--wide .ng-pidx__meta{ grid-area:meta; }
  .ng-v2 .ng-pidx__item--wide .ng-pidx__name{ grid-area:name; }
  .ng-v2 .ng-pidx__item--wide .ng-pidx__body{ grid-area:body; margin-top:0; max-width:60ch; }
  .ng-v2 .ng-pidx__item--wide .ng-pidx__to{ grid-area:to; }
}
/* The one sentence that says out loud what the four chips and four captions
   already say once each: these are samples, and they are four SEPARATE
   samples. It is here rather than under each tile because four repetitions of
   the same disclaimer read as small print, and this one has to be read. */
.ng-v2 .ng-pidx__note{
  margin-top:26px;
  max-width:92ch;
}

/* --- 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, and this is what a reader
   who has taken the index then sees. ng-shared's .ng-masthead__proof draws its
   own top rule, so nothing is added here but the measure and the button gap.

   The old ghost button ("Örnek çıktıyı görün" -> #ornek-cikti) is not here,
   and is not missing: the index is five of that button, each one saying where
   it lands and what it holds. */
.ng-v2 .ng-lead__foot{ min-width:0; }
.ng-v2 .ng-lead__actions{ margin-top:22px; }


/* ==========================================================================
   2. SECTION 20 — THE COMPARISON TABLE, this page's dominant shape

   WHY A TABLE AT ALL. The material is two quantities that move independently:
   how much demand a district has, and how much charging supply already stands
   in it. The ranked bar list this section used to be could only say that in a
   footnote; two columns under two grouped headers say it in a glance, and the
   fourth row — more than twice the points of any other row, and low BECAUSE of
   them — is the whole argument of the page.

   .ng-dtable is ng-shared.css §15b, including the doubled-class defence
   against the theme's `table:not(:first-child){margin-top:2rem}` at (0,2,2)
   and the `border:0` reset that stops an unreset cell drawing a navy box.
   What belongs HERE is the column widths (which column is wide is a property
   of the content), the grouped header row, and the score bar.
   ========================================================================== */

/* A panel that runs the full 1120px container can afford more interior than
   ng-shared's 18px/16px, which was sized for a half-width panel in a pair. */
@media (min-width:900px){
  .ng-v2 .ng-sira__panel .ng-out__body,
  .ng-v2 .ng-nokta__panel .ng-out__body{ padding:24px 26px 26px; }
}

/* --- 2a. the grouped header ------------------------------------------------
   TALEP over the score, ARZ over the count. `scope="colgroup"` is real, so a
   screen reader announces the group before the column before the cell.

   (0,3,1) — `.ng-v2 .ng-dtable thead th` in ng-shared is (0,2,2) and would
   otherwise win on both padding and colour. The empty cells over the first two
   columns carry NO bottom rule, so the hairline sits only over the two data
   columns and reads as a bracket rather than as a second header underline. */
.ng-v2 .ng-dtable .ng-sira__grp td{
  padding:0;
  border-bottom:0;
}
.ng-v2 .ng-dtable .ng-sira__grp th{
  padding:0 10px 7px;
  border-bottom:1px solid var(--ng-hairline);
  font-family:var(--ng-font-label); font-weight:600;
  font-size:11px; line-height:1.3; letter-spacing:.1em;   /* ratio .10 */
  text-transform:none;                /* authored pre-uppercased: i -> İ */
  color:var(--ng-accent);             /* 5.64:1 on the white panel */
  vertical-align:bottom;
}
.ng-v2 .ng-dtable .ng-sira__grp th:last-child{ padding-right:0; }
/* The column-name row needs air under the group rule; ng-shared sets
   padding-top:0 on every thead th, which is right for the first row only. */
.ng-v2 .ng-dtable .ng-sira__grp + tr th{ padding-top:11px; }

/* --- 2b. column widths -----------------------------------------------------
   Sized so the four columns fit a 390 phone WITHOUT the wrapper scrolling —
   PATTERNS.md: a table that only fits by scrolling has hidden a column from
   every phone, and the hidden one here would be the ARZ column the page is
   about. The two data columns are narrow, which is why their headers are one
   short word each (SKOR / NOKTA, SCORE / POINTS) and the caption and the
   footnote carry the full sentence. Lengthening a header until it wraps
   mid-word was tried on akaryakit and cost four checker defects. */
.ng-v2 .ng-sira__t tr > :nth-child(1){ width:58px; }
.ng-v2 .ng-sira__t tr > :nth-child(3){ width:118px; }
.ng-v2 .ng-sira__t tr > :nth-child(4){ width:118px; }
/* 12px at .1em, tabular, muted: the ordinal repeats the reading order, so it
   is the one column that may be quiet. */
.ng-v2 .ng-sira__cn{
  font-family:var(--ng-font-label); font-weight:600;
  font-size:12px; letter-spacing:.1em;
  text-transform:none;
  color:var(--ng-muted);
  font-variant-numeric:tabular-nums;
}

/* --- 2c. the score bar and the two figures ---------------------------------
   Shape copied from pages/akaryakit.css §2 (.ng-karne__bar), the first leaf to
   put a proportional bar inside a row header, so the two sector tables on this
   site read as one component rather than two inventions.

   THE TRACK IS MIST AND THE FILL IS INDIGO, with the top row's fill switched
   to accent. No row fill anywhere: a shaded row inside a white panel would be
   a third surface role, and this system has two. */
.ng-v2 .ng-sira__bar{
  display:block;
  margin-top:8px;
  max-width:340px;
  height:6px;
  border-radius:3px;
  background:var(--ng-surface-sunken);
  overflow:hidden;
}
.ng-v2 .ng-sira__bar i{
  display:block; height:100%;
  border-radius:3px;
  background:var(--ng-indigo);
}
/* Both figures are set in the display face at the same weight, because the
   argument of the table is that they are equals — the demand number is not the
   headline and the supply number is not its footnote. (0,3,2) beats
   ng-shared's `.ng-v2 .ng-dtable tbody td` at (0,2,2). */
.ng-v2 .ng-sira__score{
  font-family:var(--ng-font-display); font-weight:700;
  font-size:19px; line-height:1.1;
  letter-spacing:-0.01em;
  color:var(--ng-ink);
}
.ng-v2 .ng-sira__t tbody td:last-child{
  font-family:var(--ng-font-display); font-weight:700;
  font-size:19px; line-height:1.1;
  letter-spacing:-0.01em;
  color:var(--ng-ink);
}
.ng-v2 .ng-sira__t .is-top .ng-sira__bar i{ background:var(--ng-accent); }
.ng-v2 .ng-sira__t .is-top .ng-sira__score{ color:var(--ng-accent); }
/* tfoot is the five rows' own arithmetic and is labelled as such in the
   markup; ng-shared already separates it with a 2px rule and never a fill. */
.ng-v2 .ng-sira__t tfoot th{
  font-family:var(--ng-font-display); font-weight:600;
  font-size:14px;
  color:var(--ng-muted);
}
.ng-v2 .ng-sira__note,
.ng-v2 .ng-nokta__note{
  margin-top:22px;
  max-width:92ch;
}


/* ==========================================================================
   3. SECTION 30 — THE SIX-FIELD REPORT

   Section 20 compares five districts on two axes; this opens ONE address, and
   a single row of a comparison is not a comparison. .ng-facts (ng-shared §15c)
   runs the six fields ACROSS the container instead of down a narrow panel the
   way .ng-env did here before, so the four supply fields read as one answer to
   "rakip nerede duruyor" rather than as six unrelated rows.
   ========================================================================== */

/* §15c goes three-up above 640 and draws its divider as a border-left on every
   cell but the FIRST — which is correct for a single row and wrong for six
   cells, where cell 4 opens the second row with a rule hanging off the left
   edge and no rule above it. Same class of defect the saglik agent recorded
   for a three-cell strip ("three is not a number that halves"). Fixed by
   keying on the column position rather than on the first cell, and by giving
   the second row its own top rule; no field was dropped to make it fit. */
@media (min-width:960px){
  .ng-v2 .ng-nokta__facts .ng-facts__cell:nth-child(3n+1){
    padding-left:0;
    border-left:0;
  }
  .ng-v2 .ng-nokta__facts .ng-facts__cell:nth-child(3n){
    padding-right:0;
  }
  .ng-v2 .ng-nokta__facts .ng-facts__cell:nth-child(n+4){
    margin-top:22px;
    padding-top:22px;
    border-top:1px solid var(--ng-hairline);
  }
}
/* Below 960 the cells already stack two- or three-up with a border-top each,
   which is §15c's own mobile treatment. One thing it does need: with the label
   above the value, a one-line label next to a two-line one put "84.300" and
   "6" on different baselines, and the strip stopped reading as a row of
   fields. Grid items already stretch to the row height, so pushing the value
   to the bottom of its own cell aligns the figures across the row. FOUND IN A
   390 SCREENSHOT; the page reported clean before and after. */
@media (max-width:959px){
  .ng-v2 .ng-nokta__facts .ng-facts__cell{ display:flex; flex-direction:column; }
  .ng-v2 .ng-nokta__facts .ng-facts__v{ margin-top:auto; padding-top:6px; }
}


/* ==========================================================================
   4. SECTION 40 — THE INDIGO BAND: a 2x2 ruled matrix

   `class="ng-section is-dark"` in the markup, WITHOUT `ng-section--dark`:
   `is-dark` flips the palette tokens (ng-foundation §3) and supplies the 88px
   pad, while `--dark` adds the centred CLOSING composition, which is wrong for
   a left-ruled matrix.

   WHY A MATRIX AND NOT A LEDGER. /sektorler/akaryakit/ already spends its own
   MIDDLE indigo band on a single-column ruled ledger of its four titles, and
   /sektorler/hizli-teslimat/ ships the same shape on the ground. Four things
   that split two-and-two by the hub question's two halves are a 2x2, and
   saying so in the layout means the two sub-heads are not the only thing
   carrying the split. Rules only — no fill, no shadow, no radius — because
   four raised surfaces on indigo would be the card grid again in a different
   colour.
   ========================================================================== */

.ng-v2 .ng-mtx{
  list-style:none;
  margin:0; padding:0;
  display:grid;
  grid-template-columns:minmax(0,1fr);
  border-top:2px solid var(--ng-hairline);   /* .16 paper on the dark band */
}
@media (min-width:900px){
  .ng-v2 .ng-mtx{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
.ng-v2 .ng-mtx__item{
  min-width:0;
  border-bottom:1px solid var(--ng-hairline);
}
@media (min-width:900px){
  /* The vertical rule between the pair. It is drawn on the SECOND cell rather
     than as a gap fill, so a group with one entry would not leave a dangling
     rule — the same reasoning §15c gives for .ng-facts. */
  .ng-v2 .ng-mtx__item:nth-child(even){
    border-left:1px solid var(--ng-hairline);
  }
}
.ng-v2 .ng-mtx__link{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  grid-template-areas:
    "n name"
    ".  body"
    ".  to";
  column-gap:14px; row-gap:10px;
  padding:22px 0;
  color:inherit; text-decoration:none;
}
@media (min-width:900px){
  .ng-v2 .ng-mtx__item:nth-child(even) .ng-mtx__link{ padding-left:28px; }
  .ng-v2 .ng-mtx__item:nth-child(odd) .ng-mtx__link{ padding-right:28px; }
}
.ng-v2 .ng-mtx__n{
  grid-area:n;
  font-family:var(--ng-font-label); font-weight:600;
  font-size:12px; line-height:1.8; letter-spacing:.1em;   /* ratio .10 */
  text-transform:none;
  color:var(--ng-accent);            /* pink tier on the dark band: 7.68:1 */
  font-variant-numeric:tabular-nums;
}
/* Doubled class at (0,3,0) for the theme's
   `body .content-wrapper h4:not(:first-child){margin-top:50px}` at (0,2,2) —
   ng-shared.css §11's defence, which is not only for section titles. */
.ng-v2 .ng-mtx__name.ng-mtx__name{
  grid-area: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);               /* paper on the dark band: 14.46:1 */
}
.ng-v2 .ng-mtx__body{
  grid-area:body;
  display:block;
  font-size:15px; line-height:1.6;
  color:var(--ng-muted);             /* #C6C9EA on navy: 9.22:1 */
}
.ng-v2 .ng-mtx__to{
  grid-area:to;
  display:block;
  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-mtx__to .ng-arrow{ margin-left:8px; }
@media (any-hover:hover){
  .ng-v2 .ng-mtx__link:hover .ng-mtx__name,
  .ng-v2 .ng-mtx__link:hover .ng-mtx__to{ color:var(--ng-accent); }
  .ng-v2 .ng-mtx__link:hover .ng-arrow{ transform:translate3d(4px,0,0); }
}
.ng-v2 .ng-mtx__link:focus-visible .ng-mtx__name{ color:var(--ng-accent); }

/* (0,3,0) via the doubled class, per ng-shared.css §11 — a page-level heading
   class needs the same defence or the theme's
   `h3:not(:first-child){margin-top:50px}` at (0,2,2) turns the authored 0 into
   a 50px hole above the second group's title. 22px sits deliberately between
   the section title and the 20px entry title: it is a sub-head inside a
   section, not a section of its own. */
.ng-v2 .ng-vals__name.ng-vals__name{
  margin:0 0 18px;
  font-size:22px; line-height:1.25;
  letter-spacing:-0.012em;
  color:var(--ng-ink);
  max-width:34ch;              /* the English sub-head is the long one:
                                  "Competitors and market: who is where, and
                                  where are the cars" runs to 62 characters and
                                  without a measure it sets one 900px line. */
}
/* ng-shared §14 fences 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 matrix's own last-row
   rule and read as a mistake. Air only. */
.ng-v2 .ng-vals__half + .ng-vals__half{
  margin-top:40px;
  padding-top:0;
  border-top:0;
}


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

   THE PAGE CANNOT END ON THE INDIGO SLAB: dark:MIDDLE spends the band on
   section 40, and the finding behind this whole pass is that 76 of 76 pages
   closed the same way. The last band is MIST, so the rail inverts: a RAISED
   white panel on the sunken band, which is the inversion pages/saglik.css
   recorded for a NONE-MIST/MIDDLE page whose last section is mist. akaryakit
   and hizli-teslimat do the opposite — a mist rail on the ground — because
   their last band is the ground. Same .ng-close__* names, opposite surfaces;
   still not promoted, because the three pages that have written this rail have
   not written the same one.
   ========================================================================== */
.ng-v2 .ng-close__rail{
  padding:26px 22px;
  background:var(--ng-surface);
  border:1px solid var(--ng-hairline);
  border-radius:var(--ng-radius);
  box-shadow:var(--ng-shadow-card);
  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__copy{ min-width:0; }
.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)` matches 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);              /* 6.21:1 on white */
  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 is where that 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-pidx__link and .ng-mtx__link, both well over 44px tall at
   every width — .ng-pidx__link also stretches over its whole tile — 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, __cn, the table headers, __tag, __flag, __label) are
     exempt BY MEASUREMENT — letter-spacing / font-size = 0.10, over the 0.08
     ng-page-check tests — and stay put. */
  .ng-v2 .ng-lead__src,
  .ng-v2 .ng-pidx__body,
  .ng-v2 .ng-mtx__body,
  .ng-v2 .ng-close__lede{ font-size:16px; }

  .ng-v2 .ng-pidx__name{ font-size:18px; }
  .ng-v2 .ng-pidx__body{ max-width:none; }

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

  .ng-v2 .ng-mtx__name.ng-mtx__name{ font-size:18px; }
  .ng-v2 .ng-mtx__link{ padding:20px 0; }

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

@media (max-width:479px){
  /* THE TABLE AT 390. The panel body is ~312px of usable width and the four
     columns fit — 44 + name + 66 + 66, with the 12px/7px cell padding
     ng-shared already drops to at this width — but only if the two data
     columns give up their desktop 118px. The RANK column narrows first, then
     the data columns, and the district name column absorbs the rest: it is the
     one holding a word that must not break. .ng-dtable__wrap's scroll is
     deliberately not being relied on. */
  .ng-v2 .ng-sira__t tr > :nth-child(1){ width:44px; }
  .ng-v2 .ng-sira__t tr > :nth-child(3){ width:66px; }
  .ng-v2 .ng-sira__t tr > :nth-child(4){ width:66px; }
  .ng-v2 .ng-sira__score,
  .ng-v2 .ng-sira__t tbody td:last-child{ font-size:17px; }
  /* The bar is a chart, not a decoration, so it keeps its full row width. */
  .ng-v2 .ng-sira__bar{ max-width:none; }
}


/* ==========================================================================
   7. REDUCED MOTION
   ng-shared.css §10 already flattens .ng-card and .ng-arrow under a reduce
   preference — including cancelling ng-components.css's !important marker
   transform — and ng-components.css §8 does the same for .ng-anim. Nothing on
   this page adds motion beyond those two: the score bars are static widths,
   not transitions, 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.
   ========================================================================== */