/* ==========================================================================
   /cozumler/yer-ve-bolge-secimi/  +  /en/solutions/location-and-area-selection/
   ONE stylesheet for the pair. TR 23322 · EN 25627.

   VARIANCE PASS (2026-08-17). Assignment, from variance-plan.json and not
   negotiable: opening F-INDEX · dark MIDDLE · 6 sections.

       10  masthead, F-INDEX, two-track index    GROUND
       20  the six analysis elements, two tracks GROUND
       30  THE SCORING MATRIX                    DARK   <- middle
       40  the decision report + what it returns MIST
       50  the four steps, one descending route  GROUND
       60  what you gain + the next step         MIST   <- the page does NOT
                                                           end on indigo

   WHAT THIS PAGE WAS BEFORE, AND WHY THAT WAS THE PROBLEM. Masthead with an
   h1 left and a plate right, a six-card grid with icon chips, two sample
   panels side by side, a 2x2 step ladder, a three-line plate, an indigo CTA.
   Clean, correct, and the same silhouette as the other 75 pages on this site —
   which is the entire finding this pass exists to answer. The content is the
   client's own and is carried over; the shape is new.

   THE DOMINANT CONTENT SHAPE IS A SCORING MATRIX. ARCHETYPES.md: "A ranked
   table is not a card grid is not a two-column comparison… Pick what the
   material wants." What this material is, precisely, is a scoring decision —
   four candidate areas, six named criteria — so the page's centrepiece is one
   table on the indigo band, and everything above it exists to define its
   columns and everything below it to explain its rows.

   TWO PAGES IN THIS GROUP SHARE THIS ASSIGNMENT. /cozumler/dijital-harita-
   servisleri/ is also F-INDEX · MIDDLE · 6. A shared archetype means the
   masthead modifier is deliberately the same; the silhouette still has to
   differ, and it does, in the three places that are actually visible:

       that page                        this page
       one 7-row index, full width      two 3-row index tracks, side by side
       GROUND GROUND MIST DARK MIST GROUND   GROUND GROUND DARK MIST GROUND MIST
       a spine ledger of service titles a matrix + a report + a route

   Verified by putting the two 1440 screenshots next to each other, which is
   the only check that has ever caught this class of defect on this project.

   Every literal is a token. No !important. Headings that this sheet styles use
   the doubled-class idiom (0,3,0) so they beat the theme's
   `body .content-wrapper h?:not(:first-child){margin-top:50px}` at (0,2,2) —
   PATTERNS.md §11, and the list of classes it says to extend.
   ========================================================================== */


/* ==========================================================================
   1. SECTION 10 — THE F-INDEX MASTHEAD
   The modifier itself (one column, small h1, 72ch lede) is ng-shared.css §16b.
   Everything below is what §16 explicitly leaves to the page sheet.
   ========================================================================== */

/* --- 1a. .ng-lead__src ----------------------------------------------------
   COPIED from pages/hizli-teslimat.css §1a. The attribution the old aside label
   carried ("ÇÖZÜMLER 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, AS TWO TRACKS -------------------------------
   Based on pages/hizli-teslimat.css §1b, which ng-shared.css §16 tells the next
   F-INDEX agent to copy rather than promote (pages/perakende.css ships a
   different component under the same name, so a shared copy would draw a 2px
   rule and move a label on two live pages). Copied, then changed in exactly one
   structural way: the list is SPLIT IN TWO.

   WHY BIPARTITE. The page's argument is "one question, two scales", and the
   index is the first place that can say it. Six rows in one column say "here
   are six things"; three under `Bölge` and three under `Nokta` say "here are
   two decisions, and each is made of three". It is also what keeps this page
   from opening like its sibling, which runs a single seven-row index across the
   full container — same archetype, same modifier, different silhouette.

   The rows are COMPACT — name over a tracked input line, no body sentence —
   because two tracks of three rows each still have to fit the first screen
   under an h1 and a lede. hizli-teslimat's rows carry a summary sentence and it
   has one column to spend on them.

   RULED ROWS, NOT CARDS. A contents list is one thing with six entries, not six
   things; six raised boxes would have rebuilt the card grid this pass removes,
   one screen higher up. The 2px cap and the 1px rules between are the treatment
   .ng-steps already uses for a sequence.

   ANCHORS RESOLVE. #unsur-01 … #unsur-06 are real ids on §20, and they are the
   SAME ids on the English page — a fragment identifier is never displayed, and
   one id set across the pair means the two markups cannot drift. Offsets are
   §7's .ng-jump. */
.ng-v2 .ng-idx__label{
  margin:0 0 16px;
  color:var(--ng-muted);       /* not the accent: this labels the page's own
                                  furniture, and six accent-adjacent rows under
                                  an accent label reads as one alarm */
}
.ng-v2 .ng-idx__tracks{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:26px;
}
@media (min-width:860px){
  .ng-v2 .ng-idx__tracks{
    grid-template-columns:repeat(2,minmax(0,1fr));
    column-gap:56px;
  }
  /* The spine is a border-left on the SECOND track, so it exists only where two
     tracks actually meet. A border-right on the first would hang a rule off the
     container's edge the day a third track appears or the second is removed —
     the same reasoning §6's gains plate uses for its dividers. */
  .ng-v2 .ng-idx__track + .ng-idx__track{
    padding-left:56px;
    border-left:1px solid var(--ng-hairline);
  }
}
/* A track heading is a LABEL for its list, not a document heading: the six
   entries below are the headings (h4 in §20) and the index is a nav. Set as a
   paragraph so the outline stays h1 -> h2 -> h3 -> h4 with no invented level,
   and tied to its <ol> with aria-labelledby instead. */
.ng-v2 .ng-idx__tname{
  margin:0 0 12px;
  font-family:var(--ng-font-display); font-weight:700;
  font-size:19px; line-height:1.3;
  letter-spacing:-0.012em;
  color:var(--ng-ink);
}
.ng-v2 .ng-idx__tq{
  font-weight:500;
  color:var(--ng-muted);
}
.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;
  align-items:baseline;
  padding:13px 0;
  min-height:44px;              /* WCAG 2.5.5 at every width, not only at 767:
                                   this is the page's densest set of links and
                                   1024 is a touch width. Not extra padding,
                                   which would move the desktop rhythm too. */
  color:inherit; text-decoration:none;
}
/* 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:18px; line-height:1.3;
  letter-spacing:-0.012em;
  color:var(--ng-ink);
}
.ng-v2 .ng-idx__to{
  display:block;
  margin-top:4px;
  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);
}
@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:focus-visible .ng-idx__name{ color:var(--ng-accent); }

/* --- 1c. the masthead's foot ----------------------------------------------
   Proof strip, its footnote and the two CTAs, 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 draws its own top rule and
   its own 30px of air, and the masthead grid already supplies 30px of row gap,
   so the two would stack to 60px. */
.ng-v2 .ng-lead__foot{ min-width:0; }
.ng-v2 .ng-lead__foot .ng-masthead__proof{ margin-top:0; }
.ng-v2 .ng-lead__actions{ margin-top:22px; }


/* ==========================================================================
   2. SECTION 20 — THE SIX ELEMENTS AS TWO TRACKS

   .ng-two, not .ng-vals: this is no longer a card grid with two sub-heads, so
   it does not carry the class whose shared rules (§14) are written for one.

   WHY A TWO-COLUMN COMPARISON. ARCHETYPES lists it as one of the shapes a page
   may take instead of a card grid, and it is the shape this content already
   had underneath: the client's own step questions sort the six into "which
   area" and "which point inside it", three and three. Two tracks show that
   split without a tag on every entry — a per-card tag reads as a property OF
   that card, when the thing being expressed is a grouping ACROSS cards
   (recorded on akaryakit, repeated on three solution leaves).

   NO SURFACE AT ALL. The entries are ruled text on the ground band. A card here
   would put a third stack of white boxes above the two panels below, and the
   dossier reads as one document with six entries rather than six offers.
   ========================================================================== */

.ng-v2 .ng-two{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:34px;
}
@media (min-width:900px){
  .ng-v2 .ng-two{
    grid-template-columns:repeat(2,minmax(0,1fr));
    column-gap:64px;
  }
  .ng-v2 .ng-two__track + .ng-two__track{
    padding-left:64px;
    border-left:1px solid var(--ng-hairline);
  }
}
@media (max-width:899px){
  /* Stacked, the spine becomes the horizontal rule between the two tracks —
     the same component in its second state, not a different one. */
  .ng-v2 .ng-two__track + .ng-two__track{
    padding-top:30px;
    border-top:1px solid var(--ng-hairline);
  }
}
/* (0,3,0) doubled — the theme's h?:not(:first-child){margin-top:50px} is
   (0,2,2) and would otherwise put 50px where 0 is authored. */
.ng-v2 .ng-two__tname.ng-two__tname{
  margin:0 0 10px;
  font-size:22px; line-height:1.25;
  letter-spacing:-0.012em;
  color:var(--ng-ink);
}
.ng-v2 .ng-two__tbody{
  margin:0;
  font-size:15px; line-height:1.6;
  color:var(--ng-muted);
  max-width:52ch;
}
.ng-v2 .ng-two__list{
  list-style:none; margin:22px 0 0; padding:0;
  border-top:2px solid var(--ng-hairline);
}
.ng-v2 .ng-two__item{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  column-gap:16px;
  padding:20px 0;
  border-bottom:1px solid var(--ng-hairline);
}
.ng-v2 .ng-two__n{
  grid-column:1; grid-row:1;
  margin:0;
  font-family:var(--ng-font-label); font-weight:600;
  font-size:12px; line-height:1.75; letter-spacing:.1em;
  text-transform:none;
  color:var(--ng-accent);             /* 5.45:1 on the ground */
  font-variant-numeric:tabular-nums;
}
.ng-v2 .ng-two__name.ng-two__name{
  grid-column:2; grid-row:1;
  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);
}
/* 12px at .1em (ratio .10) — tracked label by measurement. These are the same
   six strings that name the columns of the matrix in §30. */
.ng-v2 .ng-two__meta{
  grid-column:2;
  margin:8px 0 0;
  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-two__body{
  grid-column:2;
  margin:10px 0 0;
  font-size:15px; line-height:1.65;
  color:var(--ng-muted);              /* 6.01:1 on the ground */
  max-width:62ch;
}
.ng-v2 .ng-two__note{
  margin-top:30px;
  max-width:88ch;
}


/* ==========================================================================
   3. SECTION 30 — THE DARK BAND: THE SCORING MATRIX

   The table primitive is ng-shared.css §15b (.ng-dtable), including the three
   theme rules it beats and the doubled-class margin defence. This section adds
   the column sizing — which §15b deliberately leaves to the page, because which
   column is wide is a property of the content — the weakest-cell flag, and the
   transpose below 960.

   ON THE DARK BAND EVERY COLOUR IS A TOKEN AND NOTHING BRANCHES.
   ng-foundation.css §3 redefines the same token names inside .is-dark, so
   --ng-hairline is a 16% paper rule, --ng-ink is paper, --ng-muted is #C6C9EA
   (9.22:1 on navy) and --ng-accent is the pink tier (#FF9BC9, 7.68:1). Not one
   rule below needs an .is-dark variant, which is the whole point of that
   design.
   ========================================================================== */

.ng-v2 .ng-mtx-band{ scroll-margin-top:104px; }

/* COLUMN SIZING. table-layout stays auto: the six numeric columns are two
   digits and size themselves, and the area column is the only one that wants a
   floor. The score column is separated by a 2px rule rather than by a fill,
   because a shaded column inside a table would be a third surface role and
   there are two. */
.ng-v2 .ng-mtx__hname{ width:26%; }
.ng-v2 .ng-mtx__hscore,
.ng-v2 .ng-mtx__score{
  border-left:2px solid var(--ng-hairline);
  padding-left:18px;
}
.ng-v2 .ng-mtx tbody th{
  font-size:17px;
  white-space:nowrap;
}
/* 11px at .1em (ratio .10) — tracked label by measurement, the same basis and
   the same size ng-shared gives the column headers directly above it. */
.ng-v2 .ng-mtx__n{
  display:inline-block;
  margin-right:12px;
  font-family:var(--ng-font-label); font-weight:600;
  font-size:11px; letter-spacing:.1em;
  text-transform:none;
  color:var(--ng-muted);
  font-variant-numeric:tabular-nums;
}
.ng-v2 .ng-mtx tbody tr.is-top .ng-mtx__n{ color:var(--ng-accent); }
/* The numbers are INK, not muted: this is the data, and six columns of muted
   digits read as a footnote. 17px display weight 600, tabular. */
.ng-v2 .ng-mtx tbody td{
  font-family:var(--ng-font-display); font-weight:600;
  font-size:17px; line-height:1.25;
  color:var(--ng-ink);
  font-variant-numeric:tabular-nums;
}
.ng-v2 .ng-mtx__score{
  font-size:20px; font-weight:700;
}
/* ONE ACCENT NUMBER PER TABLE, on the row that leads it — the idiom the
   homepage hero uses for its ranked candidates. If every score were accent the
   ordering would read as a brand pattern rather than as a decision. 20px is
   under the 24px threshold, so --ng-accent is the correct tier; inside .is-dark
   both tiers are the same pink anyway, so the display magenta cannot creep in
   here even by accident. */
.ng-v2 .ng-mtx tbody tr.is-top .ng-mtx__score{ color:var(--ng-accent); }
/* THE WEAKEST CELL IN EACH ROW. The previous iteration wrote this as a line of
   prose under each score ("en zayıf: kira"); in a matrix it is already visible
   as the lowest number in the row, so it is a flag ON that cell and a reader
   can check it by looking along the row. The number stays ink and the flag
   carries the accent — the label points at the number instead of competing
   with it, the same call §16a's .ng-fig makes at a very different size. */
.ng-v2 .ng-mtx .ng-mtx__flag{
  display:block;
  margin-top:3px;
  font-family:var(--ng-font-label); font-weight:600;
  font-size:11px; line-height:1.3; letter-spacing:.1em;
  text-transform:none;                /* authored pre-uppercased: i -> İ */
  color:var(--ng-accent);             /* 7.68:1 on navy */
}
/* THE MARKER IS AN UNDERLINE, NOT A LEFT BAR — and this was found in a 1440
   screenshot, not by any assertion. The first build drew `inset 2px 0 0 0` on
   the low cell. Every numeric cell is right-aligned, so the bar landed at the
   FAR LEFT of its column, hard against the previous column's number: on the
   Kadıköy row it sat immediately after 92 and read as a flag on 92 rather than
   on the 78 four inches to its right. An underline is inside the cell's own
   column and cannot be read as belonging to its neighbour. (The stacked layout
   below 960 keeps the left bar: there the "column" is a full-width row, so the
   bar marks the row it is on and there is no neighbour to steal it.) */
.ng-v2 .ng-mtx td.is-low{
  box-shadow:inset 0 -2px 0 0 var(--ng-accent);
}

/* THE FOOT: how to read the table, and where the numbers come from. Side by
   side above 900 so the manifest is level with the reading note rather than
   stranded under a full-width paragraph. */
.ng-v2 .ng-mtx__foot{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:22px;
  margin-top:28px;
}
@media (min-width:900px){
  .ng-v2 .ng-mtx__foot{
    grid-template-columns:minmax(0,58fr) minmax(0,42fr);
    column-gap:40px;
    align-items:start;
  }
}
.ng-v2 .ng-mtx__read{
  margin:0;
  font-size:15px; line-height:1.65;
  color:var(--ng-muted);              /* 9.22:1 on navy */
  max-width:70ch;
}
.ng-v2 .ng-mtx__note{
  margin-top:26px;
  max-width:92ch;
}

/* --- .ng-src — the source manifest ----------------------------------------
   WHY IT IS BESIDE THE MATRIX AND NOT IN A SECTION OF ITS OWN: a scorecard
   provokes exactly one question — where did these numbers come from — and it is
   answered where the scorecard is.

   DELIBERATELY NOT AN .ng-out. No chrome bar and no ÖRNEK/SAMPLE flag: the six
   sources are REAL — they are the list the homepage publishes for this same
   sample analysis — and wrapping them in the sample-output primitive would
   label true things as illustrative. The page's proof strip also counts two
   örnek çıktı; a third panel with the same chrome would make that count wrong.

   It is the RAISED role on the dark band: inside .is-dark, --ng-surface is a 6%
   paper fill and --ng-shadow-card is `none`, because a navy-tinted drop on navy
   is a smudge — elevation is carried by tone there, and the same declarations
   therefore work on both bands with no branch.

   THE SIX PILL LABELS ARE THE TWO HOMEPAGES' OWN STRINGS, verified against
   sections/8-data-method.html (TR) and pages/home/090-data-method.html (EN),
   because the note directly under them CLAIMS they are. */
.ng-v2 .ng-src{
  padding:20px 18px;
  background:var(--ng-surface);
  border:1px solid var(--ng-hairline);
  border-radius:var(--ng-radius);
  box-shadow:var(--ng-shadow-card);
}
/* 11px at .1em (ratio .10) — tracked label by measurement. */
.ng-v2 .ng-src__label{
  margin: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-src__list{ margin-top:12px; }
/* A sentence, so the 14px reading floor. */
.ng-v2 .ng-src__note{
  margin:14px 0 0;
  font-size:14px; line-height:1.55;
  color:var(--ng-muted);
}

/* --- THE TRANSPOSE, BELOW 960 ---------------------------------------------
   ng-shared.css §15b: "A table that only fits by scrolling has hidden a column
   from every phone; size the columns to fit 342px first." Eight columns cannot
   be sized to fit 342px, and shortening the six column names until they do
   would mean abbreviating the client's own analysis vocabulary. So each row
   becomes its own block with the column names as leaders, from the SAME cells —
   `data-k` on the td, printed by a ::before. There is no second copy of the
   data in the markup, which is the failure mode of every hand-built responsive
   table.

   960 rather than 767: at 900 the container is 852px and "PERAKENDE" at 11px
   /.1em in an 85px column wraps mid-header. Checked at 1440, 1024, 768 and 390;
   the desktop table therefore only ever renders at >=960, i.e. at 1024 and
   above, where it has 912px or more.

   The leaders are 12px at .1em (ratio .10) — tracked labels by measurement,
   like every other label on this page. */
@media (max-width:959px){
  .ng-v2 .ng-mtx.ng-mtx,
  .ng-v2 .ng-mtx tbody,
  .ng-v2 .ng-mtx tr,
  .ng-v2 .ng-mtx tbody th,
  .ng-v2 .ng-mtx td{ display:block; }
  .ng-v2 .ng-mtx .ng-dtable__cap{ display:block; }
  /* The header row is not deleted — it is still the row a screen reader
     announces per cell — only taken out of the visual flow. */
  .ng-v2 .ng-mtx thead{
    position:absolute;
    width:1px; height:1px;
    overflow:hidden;
    clip-path:inset(50%);
    white-space:nowrap;
  }
  .ng-v2 .ng-mtx tbody tr{
    padding:18px 0 6px;
    border-top:2px solid var(--ng-hairline);
  }
  .ng-v2 .ng-mtx tbody th{
    border-bottom:0;
    padding:0 0 10px;
    font-size:20px;
  }
  .ng-v2 .ng-mtx tbody td{
    display:flex; align-items:baseline; gap:12px;
    padding:9px 0;
    border-bottom:1px solid var(--ng-hairline);
    font-size:16px;
  }
  /* (0,3,1), because ng-shared's `.ng-v2 .ng-dtable .is-num{text-align:right}`
     is (0,3,0) and would otherwise win over a plain `td` selector here. It did:
     the first build printed every leader label hard against its number with the
     whole left half of the row empty, because the ::before is a flex item that
     grows and its text was still right-aligned inside it. The flex row does the
     alignment now — leader left, number right. */
  .ng-v2 .ng-mtx tbody td.is-num{ text-align:left; }
  .ng-v2 .ng-mtx tbody td::before{
    content:attr(data-k);
    flex:1 1 auto;
    font-family:var(--ng-font-label); font-weight:500;
    font-size:12px; line-height:1.4; letter-spacing:.1em;
    color:var(--ng-muted);
  }
  .ng-v2 .ng-mtx .ng-mtx__flag{
    margin-top:0;
    text-align:right;
  }
  .ng-v2 .ng-mtx td.is-low{
    box-shadow:inset 2px 0 0 0 var(--ng-accent);
    padding-left:10px;
  }
  .ng-v2 .ng-mtx .ng-mtx__score{
    border-left:0;
    border-top:2px solid var(--ng-hairline);
    border-bottom:0;
    padding-left:0;
    margin-top:4px;
    font-size:22px;
  }
  .ng-v2 .ng-mtx tbody tr:last-child .ng-mtx__score{ border-bottom:0; }
}


/* ==========================================================================
   4. SECTION 40 — THE DECISION REPORT
   ========================================================================== */

/* --- THE PANEL SUBJECT LINE MUST NEVER ELLIPSISE, AT ANY WIDTH -------------
   ng-shared.css §13b sets `.ng-out__meta{ white-space:nowrap; overflow:hidden;
   text-overflow:ellipsis }` and unwraps it only below 767px, because the leaf it
   was written for had a full-width panel above that. This panel sits in a 62%
   column, where "Örnek nokta · Kadıköy · 6 unsur" would print as "Örnek nokta ·
   Kadık…" — the panel silently stopping saying what it is a sample OF, which is
   the failure HANDOFF records at 390 and the saglik leaf hit again at 1440.
   Fixed the way both of them fixed it rather than by shortening the string: a
   string trimmed to fit is the same defect with the evidence removed. */
.ng-v2 .ng-rep-band .ng-out__bar{ flex-wrap:wrap; row-gap:5px; }
.ng-v2 .ng-rep-band .ng-out__tag{ flex:1 1 auto; }
.ng-v2 .ng-rep-band .ng-out__meta{
  order:3; flex:1 0 100%;
  white-space:normal;
  overflow:visible;
  text-overflow:clip;
}

.ng-v2 .ng-rep-band__pair{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:20px;
}
@media (min-width:960px){
  .ng-v2 .ng-rep-band__pair{
    grid-template-columns:minmax(0,62fr) minmax(0,38fr);
    column-gap:24px;
  }
  /* The two hold very different amounts — a seven-row report with a comment,
     and four key/value rows — and ng-shared §13b gives .ng-out `height:100%`
     with its foot pushed to the bottom, which is right for a matched pair and
     wrong here: stretched, the shorter column prints its note against the
     bottom edge with a hole above it. align-self on the ITEMS (block axis),
     height on the PANEL: a single rule on .ng-out would be the cross axis of a
     flex column and would shrink the panel to its text width instead. */
  .ng-v2 .ng-rep-band__pair > *{ align-self:start; }
  .ng-v2 .ng-rep-band__pair .ng-out{ height:auto; }
}

/* The side plate. WHITE on the mist band — the surface rule this site keeps to
   is that sunken holds white chrome, never plain text on nothing. */
.ng-v2 .ng-rep-band__side{
  padding:22px 20px;
  background:var(--ng-surface);
  border:1px solid var(--ng-hairline);
  border-radius:var(--ng-radius);
  box-shadow:var(--ng-shadow-card);
}
.ng-v2 .ng-rep-band__label{
  margin:0 0 14px;
  font-family:var(--ng-font-label); font-weight:600;
  font-size:11px; line-height:1.3; letter-spacing:.1em;
  text-transform:none;
  color:var(--ng-muted);
}
.ng-v2 .ng-rep-band__note{
  margin:16px 0 0;
  font-size:14px; line-height:1.55;
  color:var(--ng-muted);
}

/* --- .ng-rep — the report rows --------------------------------------------
   A consolidation has a specific shape — every input line, then the line they
   add up to — and none of the components this site already has is that shape:
     .ng-env   (akaryakit)   key + value. No third field, no total row.
     .ng-scen  (tahminleme)  a real matrix. This is one value per row.
     .ng-dtable                the matrix in §30 IS that, and this panel is the
                               one row of it opened up with a finding per line.

   THREE FIELDS ON TWO LINES, NOT THREE COLUMNS. The row label is the client's
   own element name — up to 40 characters in Turkish — the score is two digits,
   and the finding is a short sentence. Three columns of that do not survive a
   62% column at 1024, and they would put the two things a reader compares (the
   label and its score) at opposite ends of a wide row.

   THE TOTAL ROW IS RULED, NOT TINTED — the idiom .ng-steps uses for a sequence
   and a printed table of figures uses for its bottom line.

   THE SUB-SCORES RECONCILE: 92 + 78 + 90 + 86 + 84 + 92 = 522, / 6 = 87, which
   is also the matrix's first row and the homepage hero's own score for the same
   district. */
.ng-v2 .ng-rep{
  list-style:none; margin:0; padding:0;
}
.ng-v2 .ng-rep__row{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  grid-template-areas:
    "k v"
    "f f";
  align-items:baseline;
  column-gap:14px; row-gap:3px;
  padding:12px 0;
  border-top:1px solid var(--ng-hairline);
}
.ng-v2 .ng-rep__row:first-child{ border-top:0; padding-top:0; }
.ng-v2 .ng-rep__k{
  grid-area:k;
  min-width:0;
  font-family:var(--ng-font-display); font-weight:600;
  font-size:15px; line-height:1.35;
  color:var(--ng-ink);
}
.ng-v2 .ng-rep__v{
  grid-area:v;
  text-align:right;
  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;
}
/* A sentence, so the 14px reading floor and not the label exception. */
.ng-v2 .ng-rep__f{
  grid-area:f;
  font-size:14px; line-height:1.5;
  color:var(--ng-muted);              /* 6.21:1 on --ng-surface */
}
.ng-v2 .ng-rep__row.is-total{
  border-top:2px solid var(--ng-hairline);
  padding-bottom:0;
}
/* 20px is under the 24px threshold, so --ng-accent is the correct token here
   and --ng-accent-display would fail AA. 5.64:1 on white. */
.ng-v2 .ng-rep__row.is-total .ng-rep__v{
  font-size:20px;
  color:var(--ng-accent);
}

/* The comment the report ends on. The homepage's positioning band already
   states that the output is "skor, etki alanı ve Türkçe yorumlu rapor" and that
   GeoBrain writes it, so a report panel that stopped at the numbers would show
   less than the site already promises. A MIST plate on the white panel — the
   inverse of the white-on-mist panel it sits in, so it reads as a distinct
   region inside the report rather than as a second card. */
.ng-v2 .ng-rep__ai{
  margin-top:18px;
  padding:14px 16px;
  background:var(--ng-surface-sunken);
  border-radius:var(--ng-radius-sm);
}
.ng-v2 .ng-rep__ailabel{
  margin:0 0 8px;
  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);              /* 5.42:1 on mist */
}
.ng-v2 .ng-rep__aitext{
  margin:0;
  font-size:15px; line-height:1.6;
  color:var(--ng-ink);                /* 13.04:1 on mist */
}


/* ==========================================================================
   5. SECTION 50 — THE FOUR STEPS AS ONE DESCENDING ROUTE

   NOT ng-shared's .ng-steps. That primitive is a grid of rungs — three across
   above 860, and this page's previous iteration overrode it to 2x2 for a
   fourth. Four steps side by side say "four options"; four steps down one
   spine say "first this, then this", which is what the client's own sequence
   is and what the section's own argument needs: Türkiye ölçeğinden caddeye.
   The ordinals sit ON the rule, so the eye can follow it.

   The spine is a ::before on each item rather than a border on the list,
   because the last item's rule has to STOP at its own ordinal — a rule that
   runs past the final step into the whitespace below reads as a missing fifth
   step. Same reason the site's other sequences cap their first rule at 2px and
   drop to 1px between: a sequence has ends.
   ========================================================================== */

.ng-v2 .ng-flow{
  list-style:none; margin:0; padding:0;
}
.ng-v2 .ng-flow__item{
  position:relative;
  padding:0 0 34px 72px;
}
.ng-v2 .ng-flow__item::before{
  content:'';
  position:absolute;
  left:21px; top:0; bottom:0;
  width:2px;
  background:var(--ng-hairline);
}
.ng-v2 .ng-flow__item:last-child{ padding-bottom:0; }
.ng-v2 .ng-flow__item:last-child::before{ bottom:auto; height:44px; }
/* 44x44 and centred. It is not a control — nothing here is clickable — but it
   is the same size as one, so the route reads at the same rhythm as the chip
   row below it. The ground fill is what breaks the spine behind the numeral;
   on this band --ng-ground is the page ground, which is why this section is
   deliberately NOT one of the two mist bands. */
.ng-v2 .ng-flow__num{
  position:absolute;
  left:0; top:0;
  width:44px; height:44px;
  display:flex; align-items:center; justify-content:center;
  box-sizing:border-box;
  border:2px solid var(--ng-hairline);
  border-radius:var(--ng-radius-pill);
  background:var(--ng-ground);
  font-family:var(--ng-font-label); font-weight:600;
  font-size:13px; line-height:1; letter-spacing:.1em;
  text-indent:.1em;                   /* letter-spacing pads the right of the
                                         last glyph; this re-centres the pair */
  text-transform:none;
  color:var(--ng-accent);             /* 5.45:1 on the ground */
  font-variant-numeric:tabular-nums;
}
.ng-v2 .ng-flow__main{ min-width:0; padding-top:2px; }
/* 12px at .1em (ratio .10) — tracked label by measurement. It names the SCALE
   the step works at, which is the one thing the client's own step titles do not
   say out loud and the whole reason the four are in this order. */
.ng-v2 .ng-flow__scale{
  margin:0 0 8px;
  font-family:var(--ng-font-label); font-weight:500;
  font-size:12px; line-height:1.4; letter-spacing:.1em;
  text-transform:none;                /* authored pre-uppercased: i -> İ */
  color:var(--ng-muted);
}
.ng-v2 .ng-flow__name.ng-flow__name{
  margin:0;
  font-family:var(--ng-font-display); font-weight:700;
  font-size:20px; line-height:1.3;
  letter-spacing:-0.014em;
  color:var(--ng-ink);
  max-width:44ch;
}
.ng-v2 .ng-flow__body{
  margin:10px 0 0;
  font-size:15px; line-height:1.65;
  color:var(--ng-muted);
  max-width:74ch;
}
.ng-v2 .ng-flow__pills{ margin-top:14px; }
.ng-v2 .ng-how__note + .ng-how__note{ margin-top:14px; }


/* ==========================================================================
   6. SECTION 60 — WHAT YOU GAIN + THE NEXT STEP, ON ONE PLATE

   THE PAGE ENDS ON MIST, NOT ON INDIGO, because the dark band is assigned to
   the middle and is spent on the matrix. PATTERNS.md records two earlier
   answers to the same constraint — akaryakit's mist rail on the ground, and
   saglik's raised white panel on a mist band — and this is the second of those,
   because the band under it has to be one of the two mist bands the tonal order
   needs. Deliberately still not promoted: three leaves have now written
   .ng-close__rail and no two have written the same surfaces.

   ONE PLATE FOR BOTH BLOCKS. The three gains and the closing ask are the same
   sentence said twice — here is what you get, here is how to start — and the
   six-section budget puts them on one band. A 2px rule between them is what
   separates them; a second plate would have been two cards in a row, which is
   the shape this page has spent five sections not being.
   ========================================================================== */

.ng-v2 .ng-close__plate{
  padding:28px 26px;
  background:var(--ng-surface);
  border:1px solid var(--ng-hairline);
  border-radius:var(--ng-radius);
  box-shadow:var(--ng-shadow-card);
}

/* The three gains. THREE ITEMS, NOT FOUR, which is why the column treatment
   differs from the sibling leaves that flow four down two columns: three in two
   columns prints 2 + 1 and the orphan reads as a mistake. Three columns at >=860
   with a hairline BETWEEN them instead — a border-left on items 2 and 3, so the
   divider exists only where two columns actually meet. Below 860 they stack and
   the dividers become horizontal rules: the same component, two states. */
.ng-v2 .ng-why__list{
  list-style:none; margin:0; padding:0;
  display:grid;
  grid-template-columns:minmax(0,1fr);
}
.ng-v2 .ng-why__row{
  display:flex; align-items:baseline; gap:14px;
  padding:13px 0;
  border-top:1px solid var(--ng-hairline);
}
.ng-v2 .ng-why__row:first-child{ border-top:0; padding-top:0; }
.ng-v2 .ng-why__row:last-child{ padding-bottom:0; }
@media (min-width:860px){
  .ng-v2 .ng-why__list{
    grid-template-columns:repeat(3,minmax(0,1fr));
    column-gap:34px;
  }
  .ng-v2 .ng-why__row{
    display:block;
    padding:0 0 0 24px;
    border-top:0;
    border-left:1px solid var(--ng-hairline);
  }
  .ng-v2 .ng-why__row:first-child{ padding-left:0; border-left:0; }
  .ng-v2 .ng-why__n{ display:block; margin-bottom:10px; line-height:1.3; }
}
/* 12px at .1em (ratio .10) — a tracked label by measurement, an ordinal glanced
   at beside a line rather than read. */
.ng-v2 .ng-why__n{
  flex:0 0 auto;
  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.64:1 on white */
  font-variant-numeric:tabular-nums;
}
.ng-v2 .ng-why__t{
  min-width:0;
  font-size:16px; line-height:1.5;
  color:var(--ng-ink);
}

.ng-v2 .ng-close__foot{
  margin-top:26px;
  padding-top:26px;
  border-top:2px solid var(--ng-hairline);
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:6px;
}
@media (min-width:900px){
  .ng-v2 .ng-close__foot{
    grid-template-columns:minmax(0,1fr) max-content;
    column-gap:44px;
    align-items:center;
  }
  /* max-content, not a fixed track: at a fixed width the longest button label
     filled the line exactly and pushed its second button onto a row of its own,
     which is the failure akaryakit recorded for a 230px destination column. The
     copy column is the one that can absorb the difference, so it does. */
  .ng-v2 .ng-close__side{ text-align:right; }
  .ng-v2 .ng-close__actions{ justify-content:flex-end; margin-top:0; }
}
.ng-v2 .ng-close__eyebrow{ margin:0 0 10px; }
.ng-v2 .ng-close__title.ng-close__title{
  margin:0;
  font-family:var(--ng-font-display); font-weight:700;
  font-size:26px; line-height:1.2;
  letter-spacing:-0.018em;
  color:var(--ng-ink);
  max-width:22ch;
}
.ng-v2 .ng-close__lede{
  margin:12px 0 0;
  font-size:16px; line-height:1.6;
  color:var(--ng-muted);
  max-width:56ch;
}
/* 14px, not 13: .ng-crumbs and .ng-cta__meta are both 14 for the reason
   PATTERNS.md records — this tracks at .01em, so the tracked-label exception
   (>=0.08em) does not apply and it is body copy under the floor at 13. */
.ng-v2 .ng-close__meta{
  margin:14px 0 0;
  font-size:14px; line-height:1.5;
  color:var(--ng-muted);
}


/* ==========================================================================
   7. ANCHOR OFFSETS AND RESPONSIVE

   ng-shared carries the 44px hit areas (crumbs, buttons, chips) at 767, at
   768-1023 and at exactly 1024, and the 16px reading floor at 767. The index
   rows carry their own min-height at every width (§1b). Everything else on this
   page — the matrix, the report rows, the route, the gains — is static DOM, so
   this block is type and rhythm only.
   ========================================================================== */

/* The site header is ~104px at desktop and ~84px under 1364, and an index whose
   anchors land with the entry's first line under the header is an index that
   does not work. Same two values every jump target on this site uses. */
.ng-v2 .ng-jump{ scroll-margin-top:104px; }
@media (max-width:1364px){
  .ng-v2 .ng-jump{ scroll-margin-top:84px; }
  .ng-v2 .ng-mtx-band{ scroll-margin-top:84px; }
  .ng-v2 .ng-out-band{ scroll-margin-top:84px; }
}

@media (max-width:767px){
  /* Sentences, not labels: they take the mobile treatment ng-shared already
     gives every .ng-note. Restated only where a different measure is wanted. */
  .ng-v2 .ng-two__note,
  .ng-v2 .ng-how__note,
  .ng-v2 .ng-mtx__note,
  .ng-v2 .ng-out-band__note{ max-width:none; }

  .ng-v2 .ng-idx__name{ font-size:17px; }
  .ng-v2 .ng-two__tname.ng-two__tname{ font-size:20px; }
  .ng-v2 .ng-two__name.ng-two__name{ font-size:18px; }
  /* The reading floor at phone width: these are read, not glanced at. */
  .ng-v2 .ng-two__body,
  .ng-v2 .ng-two__tbody,
  .ng-v2 .ng-mtx__read,
  .ng-v2 .ng-flow__body{ font-size:16px; }
  .ng-v2 .ng-rep__k{ font-size:16px; }
  .ng-v2 .ng-rep__f{ font-size:15px; }
  .ng-v2 .ng-rep__aitext{ font-size:16px; }
  .ng-v2 .ng-rep__ai{ padding:14px; }
  .ng-v2 .ng-rep-band__side{ padding:20px 18px; }

  .ng-v2 .ng-flow__item{ padding-left:60px; padding-bottom:28px; }
  .ng-v2 .ng-flow__name.ng-flow__name{ font-size:19px; }

  .ng-v2 .ng-close__plate{ padding:22px 18px; }
  .ng-v2 .ng-close__title.ng-close__title{ font-size:23px; max-width:none; }
  .ng-v2 .ng-why__t{ font-size:16px; }
}


/* ==========================================================================
   8. 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 matrix, the report, the route and
   the gains plate are static DOM with no transitions, precisely so that a
   reduce preference has nothing to switch off here. Left as a note rather than
   an empty block so the next person does not go looking for a missing rule.
   ========================================================================== */


/* ==========================================================================
   9. SECTION 50 — THE CLIENT'S OWN FIGURE INSIDE EACH STEP

   Four of the supplied 780x540 assets, one per step, placed INSIDE the step
   they illustrate rather than as bands between the steps. The route is the
   composition this section exists for (§5); a full-width band dropped between
   two items would cut the spine in half and turn a descent into four separate
   exhibits. Sitting inside .ng-flow__main the picture is another thing the step
   says, after its paragraph and its pills, and the spine runs past it unbroken.

   LEFT-ALIGNED AND CAPPED AT 620, NOT CENTRED AND NOT FULL WIDTH. The step's
   copy starts at the same x as the figure, so the two read as one block; a
   centred figure would float free of the ordinal that owns it. 620 < 780 means
   the raster is never upscaled at any width, which is the sizing rule that
   stops soft rasters, and it leaves the frame narrower than .ng-flow__body's
   measure so the paragraph still leads.

   NO h3 BESIDE THE PICTURE. The step's own .ng-flow__name is already two
   elements above the frame; a second heading there would be the stutter §17
   warns about. The figcaption under the frame is not that second heading: it
   names the step's analysis and then what the picture shows, against an
   .ng-flow__name that is title + question, so the two do not read as one string
   printed twice.

   .ng-anim CAME OFF THE FOUR .ng-flow__item ELEMENTS. Its hidden state is a
   transform and a lazily-loaded image inside a transformed element is the one
   combination that never loads — ng-shared §17 rule 3, and what optimizasyon
   did for the same reason. The reveal stays on .ng-section-head, so the section
   still announces itself; the four steps are now static DOM, which they already
   were below 767 anyway. A motion change, not a layout or tonal one.

   THE FOUR ARE ONE SET AND ONE SIZE, WHICH IS WHY NOTHING HERE IS A GRID.
   Since the artwork pass every asset is the same abstract 780x540 with no text,
   no numerals and nothing to hedge: the chips and the illustrative lines went
   with the rankings and the score card they used to guard, and the caption pass
   (2026-08-20) put a plain label back under each frame — the step's analysis
   name plus what the picture stands for, no hedge. They are stacked one per
   step under the single 620 cap above, so all four print at exactly the same
   width and no pair of pictures sits side by side anywhere on this page. The
   62/38 in .ng-rep-band__pair and the 58/42 in .ng-mtx__foot are copy beside a
   panel, not figure beside figure, and are left as they are.
   ========================================================================== */

.ng-v2 .ng-flow__fig{
  margin-top:22px;
  margin-inline:0;                    /* left, under the step's own copy */
  max-width:620px;                    /* under the assets' 780 native width */
}

@media (max-width:767px){
  .ng-v2 .ng-flow__fig{ margin-top:18px; }
}


/* ==========================================================================
   10. 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-flow__fig.ng-flow__fig.ng-flow__fig{ margin-top:22px; margin-inline:0; }
@media (max-width:767px){
  .ng-v2 .ng-section .ng-container figure.ng-flow__fig.ng-flow__fig.ng-flow__fig{ margin-top:18px; }
}