/* ==========================================================================
   NEXT GEO — page stylesheet for the RAPORLAMA pair
     TR  23347  /cozumler/raporlama/
     EN  25607  /en/solutions/reporting/
   One authored sheet for both; ng-page-apply.php --css-from copies it to
   reporting.css so the pair cannot drift.

   (Both briefs so far have quoted the English post id as 25632. There is no
   post 25632 on this install. The English translation of 23347 is 25607, slug
   `reporting`, and its `_dp_original` meta points back at 23347. The two slugs
   are distinct, so the plain `ng-page-apply.php <slug> --css-from=` form
   applies and the two-directory workaround for shared slugs does not.)

   Loads last:
     ng-foundation → ng-components → ng-mobile → ng-shared → THIS FILE
   so a rule here at equal specificity beats all four.

   ---------------------------------------------------------------------------
   THE VARIANCE PASS — WHAT THIS REWRITE IS FOR

   The page was already clean and its content was already right. The defect the
   owner reported is not about this page at all: "I can't really distinguish if
   I'm on another page when I click a link." 76 of 76 leaves opened with an h1
   on the left and a plate on the right, then stacked two to four card grids,
   then closed on an indigo band. Measured, not guessed.

   variance-plan.json assigns this pair three fixed properties, and all three
   are honoured here:

     opening   B-STACK    no aside; the h1 runs the full container at
                          clamp(2.35rem, 6.2vw, 4.25rem); the first content
                          section starts high.
     dark      MIDDLE     the indigo band is SECTION 20, with a light masthead
                          above it and two light sections below. The page does
                          not close on indigo, so the closing decision is a
                          mist rail inside section 40.
     sections  4          masthead · matrix (dark) · dossiers (mist) · ladder
                          and close (ground).

   TONAL ORDER: GROUND → DARK → MIST → GROUND. akaryakit, the other B-STACK /
   MIDDLE / 4 page on the site, runs GROUND → MIST → DARK → GROUND with a
   ranked scorecard as its dominant shape. The masthead treatment is
   deliberately identical — that is what a shared archetype means — so the
   difference has to come from the tonal order and from the content shape, per
   PATTERNS.md's note on gayrimenkul and saglik.

   THE DOMINANT CONTENT SHAPE IS A COMPARISON MATRIX, and it is the shape the
   subject actually asked for. This page sells three things that differ in
   exactly one dimension; the client's own copy says so ("aynı veri
   altyapısının üç farklı çözünürlükte okunması") and each of the three
   paragraphs opens by naming its own scale. Three things that differ in one
   dimension are a comparison, and a comparison drawn as three cards makes the
   reader do the comparing from memory. Four columns do it for them.

   WHAT WAS DROPPED FROM THE PREVIOUS ITERATION, AND WHY. Only two things, both
   of them ours rather than the client's:
     - the .ng-card grid of three report types. Its three titles, three
       paragraphs and twelve pills all survive, in the section 30 dossier rows,
       beside the sample panel each one describes.
     - the three inline SVG icon chips that sat on those cards. A ledger row is
       ordinal-led; an icon chip on it is a card's affordance on something that
       is not a card. No client copy was attached to them.
   Everything else on the page before this pass is still on it.

   ---------------------------------------------------------------------------
   WHAT WAS WRONG WITH THE ORIGINAL PAGE, MEASURED BEFORE THE FIRST PASS

   ng-page-check on /cozumler/raporlama/ at 1440/1024/768/390:

     VISIBLE h1                0 at every width (one hidden: "Raporlama") — the
                               page's only h1 lived in the theme's page-title
                               banner, which the site's own Additional CSS hides
                               with display:none
     tap targets under 44px    2 at 1024, 768 and 390 — both breadcrumb links
                               inside that same banner, 39x27 and 64x27
     dead air                  4.6% @1440, 4.8% @1024 (one 140px band)
     page height               3037px @1440 for 271 rendered words
     post_content              83 words, one of them a heading
     _elementor_data           127 KB

   The English twin measured the same: 0 visible h1 (hidden "Reporting"), the
   same two 39x27 / 64x27 crumb links, 4.6% dead air at 1440, 126 KB of payload.

   THE 83 WORDS WERE NOT THE WHOLE STORY. The inventory counts post_content, and
   post_content held only the intro and the two closing sentences. The three
   report-type descriptions and the five "Neden Next Geo Raporları?" lines —
   roughly 190 words of real, specific, client-written copy, and the best
   material on the page — existed ONLY inside `_elementor_data`. Recovering that
   copy into markup is most of what sections 20 and 30 are.

   WHAT THE PAYLOAD ALSO CARRIED, in both languages:
     - a `bg_image` on ALL THREE icon boxes pointing at
       demo.artureanec.com/themes/neuros/wp-content/uploads/2024/03/home-4-2-min.jpg
       — a hotlink to the theme vendor's demo server;
     - a `neuros_tabs` widget that performed no tabbing at all: five flat lines
       with no panels, three of which (03, 04, 05) were painted OVER by the
       theme's decorative purple blob at 1440 AND at 390. Three of the five
       selling points on the page sat behind a gradient. Visible only in a
       screenshot; ng-page-check reported the page clean of overflow there;
     - two `neuros_button` widgets, both labelled "Bize Ulaşın" / "Contact Us",
       both pointing at the contact page and roughly 900px apart;
     - a `spacer` widget rendering an empty ~140px grey band, which is the dead
       air the checker measured;
     - a 1920x700 page-title banner holding uploads/2025/05/nextgeo-raporlama-4.png
       — a stock render of a hand touching a glowing sci-fi HUD of gauges and pie
       charts. Neither it nor the page's other attachment shows a single thing
       any of the three named reports contains, and neither is used now.

   `_dp_original` on 23347 is 23341 — this page was cloned from
   /cozumler/segmentasyon/, which is why its payload shape is identical to a
   page about something else.

   NOTHING IS PROMOTED INTO ng-shared.css BY THIS PASS. §15a (.ng-masthead
   --stack), §15b (.ng-dtable) and §13 (.ng-out, .ng-steps, .ng-pills) all
   fitted as published; the four blocks below — the matrix's own columns, the
   five-across common strip, the dossier row and the closing rail — have fewer
   than three callers each, and the standing rule is that a wrong shared
   primitive costs 28 pages while a duplicated page rule costs bytes.

   NO CLIENT NAME AND NO LOGO ANYWHERE ON THIS PAGE, and no competitor is named
   either: the competition panel counts competitors and never identifies one.
   ========================================================================== */


/* ==========================================================================
   1. MASTHEAD — B-STACK
   ng-shared §15a does the work: single column, clamp(2.35rem, 6.2vw, 4.25rem)
   headline, 58ch lede, 36px above the proof strip. Only the two lines under
   the headline are this page's.
   ========================================================================== */

/* THE HUB'S QUESTION, WITH THE PLATE DELETED. It used to sit in a mist aside
   behind a 3px accent rule. B-STACK forbids the aside and forbids
   reintroducing it lower as a summary card, so the quote idiom moves inline:
   same 3px rule, same --ng-accent token, same hanging indent, one component
   fewer. This is akaryakit's .ng-lead__src treatment, copied deliberately —
   five pages share the B-STACK opening and they should share its details. */
.ng-v2 .ng-lead__src{
  margin:22px 0 0;
  padding:2px 0 2px 16px;
  border-left:3px solid var(--ng-accent);
  max-width:70ch;
  font-size:16px; line-height:1.6;
  color:var(--ng-muted);              /* 6.01:1 on the ground */
}
/* The quoted question itself takes the ink, so the line reads as "our sentence
   containing their question" rather than as one flat grey paragraph. */
.ng-v2 .ng-lead__src b{
  font-weight:600;
  color:var(--ng-ink);
}

/* Held under the lede's own measure so the two do not read as one paragraph
   that changed size halfway through. */
.ng-v2 .ng-lead__note{ max-width:58ch; }


/* ==========================================================================
   2. THE COMPARISON MATRIX — section 20, on the indigo band

   WHY THE TABLE IS THE ONE THAT GETS THE DARK BAND. It is the artefact a buyer
   uses to choose, so it earns the strongest tonal signal available. The
   practical half of the same decision: `.ng-out` sample panels are white paper
   with a hairline and a shadow, and on `is-dark` --ng-surface becomes a 6%
   film and --ng-shadow-card becomes `none` — a report specimen that stops
   looking like a report. The specimens keep the mist band in section 30; the
   table, which is nothing but rules and type, takes the indigo and needs no
   dark-band branch at all, because every colour in ng-shared §15b is a token.

   COLUMN WIDTHS LIVE HERE, NOT IN ng-shared. §15b says so explicitly: which
   column is wide is a property of the content. Percentages rather than a fixed
   table-layout, because auto layout is what lets a Turkish cell push its own
   column a few pixels when it needs to instead of overflowing.

   THE STRINGS WERE SHORTENED TO FIT 342px, NOT SCROLLED. §15b: "A table that
   only fits by scrolling has hidden a column from every phone; size the
   columns to fit 342px first." The first draft's question cells ended in
   `yönlendirmeliyim?` (17 characters, ~118px at the 15px floor) inside a
   ~110px column, which forces the whole table wider than the viewport. The
   cells say the same thing in shorter words; the long forms are all still on
   the page, verbatim, in the section 30 paragraphs. This is §15's own lesson
   from the `10 DK'DA RAKİP · SON 12 AY` header, applied to a body cell.
   ========================================================================== */

.ng-v2 .ng-mtx tr > :nth-child(1){ width:26%; }
.ng-v2 .ng-mtx tr > :nth-child(2){ width:23%; }
.ng-v2 .ng-mtx tr > :nth-child(3){ width:18%; }
.ng-v2 .ng-mtx tr > :nth-child(4){ width:33%; }

/* The row header is the row's SUBJECT stacked in two registers: the ordinal
   that ties this row to dossier 01/02/03 in section 30, and the product name.
   ng-shared's `tbody th` sets 16px display 600, which is right for the name;
   this only makes it a block so the ordinal sits above rather than beside it —
   beside it, the name loses ~30px of a 290px column at 1440 and ~24px of a
   90px column at 390. */
.ng-v2 .ng-mtx__n{
  display:block;
  margin-bottom:5px;
  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; here numerals */
  color:var(--ng-accent);             /* #FF9BC9 on navy inside is-dark */
  font-variant-numeric:tabular-nums;
}
.ng-v2 .ng-mtx__name{ display:block; }

/* Rows want more air than a four-row ranked table: every cell here is a
   sentence fragment that wraps to two or three lines, so 13px top and bottom
   reads as cramped. */
.ng-v2 .ng-mtx th,
.ng-v2 .ng-mtx td{ padding-top:18px; padding-bottom:18px; }
.ng-v2 .ng-mtx thead th{ padding-top:0; padding-bottom:12px; }

/* THE CAPTION AND THE COLUMN HEADERS READ AS TWO HEADER ROWS in the first
   render — ng-shared §15b sets both to 11px / .1em / --ng-muted and separates
   them by 12px, which is fine on a table whose caption is a long sentence
   ("LOKASYON SKORUNA GÖRE SIRALAMA") and wrong on one whose caption is three
   words sitting directly over four short column names. Caught in the 1440
   screenshot; ng-page-check reported the page clean with the collision in
   place, exactly like the two ellipsis findings before it.
   The caption keeps its size and tracking — it is a label and takes the label
   exception by measurement — and separates by TONE and SPACE instead: the ink
   rather than the muted, and 22px of clearance. */
.ng-v2 .ng-mtx .ng-dtable__cap{
  padding-bottom:22px;
  color:var(--ng-ink);                /* #FAFBFF on navy, 14.46:1 */
}

/* The per-cell key. It exists for the STACKED phone layout below and is hidden
   here, where the <th scope="col"> above the cell already names the column and
   a second copy of the same word in every cell would be noise. display:none,
   not a visually-hidden clip, so it leaves the accessibility tree too — the
   scope association is doing that job at this width. */
.ng-v2 .ng-mtx__k{ display:none; }

/* The <b> inside the section lede marks which HALF of the hub's question this
   band answers ("kime" here, "nasıl" under the strip below). Muted is the lede
   colour; ink is what makes the two words findable. */
.ng-v2 .ng-mtx-band .ng-lede b,
.ng-v2 .ng-com__lede b{
  font-weight:600;
  color:var(--ng-ink);                /* #FAFBFF inside is-dark */
}

.ng-v2 .ng-mtx__note{
  margin-top:24px;
  max-width:92ch;
}


/* ==========================================================================
   3. THE FIVE SHARED PROPERTIES — a five-across strip under the matrix

   FIVE CARDS WAS THE ORIGINAL SHAPE AND WAS MEASURED AWAY: five items in this
   system's grid gives 3+2 or 4+1, i.e. a hole in the second row at every
   desktop width, and five one-line strings inflated into five ~180px boxes of
   mostly air. The previous iteration answered that with a white plate holding
   a two-column numbered list. That plate cannot come to the indigo band — a
   raised white surface is the LIGHT band's chrome, and on is-dark it would
   have to be re-coloured, which is a second palette.

   So the five run ACROSS the container instead, divided by hairlines, in the
   same key/value idiom as ng-shared §15c's .ng-facts. That is not decoration:
   the five are the answer to the second half of the hub's question, and the
   whole claim being made about them is that they apply to every column of the
   table above. A strip that spans the same width as that table says it.

   .ng-facts itself was not reused because its cell is a dt/dd pair inside a
   <dl> and these are five ordered items of one list — an <ol> whose numbering
   is the client's own 01–05 and has to stay readable in order.

   FIVE COLUMNS ONLY AT 1024 AND UP. At 960 a fifth column is 190px and the
   longest string ("Harita, tablo ve grafiklerle zenginleştirilmiş görseller")
   runs to eight lines; the strip stops being scannable and becomes five thin
   paragraphs. Below that: three, then two, then one. Five items never divide
   evenly into three or two, so the trailing cell is a partial row at those
   tiers — which is exactly why the separators are borders on the cells rather
   than a filled grid gap, per §15c: a strip that wraps does not leave a
   dangling rule.
   ========================================================================== */

.ng-v2 .ng-com-wrap{
  margin-top:44px;
  padding-top:38px;
  border-top:1px solid var(--ng-hairline);
}
/* (0,3,0) via the doubled class, per ng-shared §11 — a page-level heading class
   needs the same defence or the theme's
   `body .content-wrapper h3:not(:first-child){margin-top:50px}` at (0,2,2)
   turns the authored 0 into a 50px hole. 22px sits deliberately between the
   44px section title and the 19px step name: a sub-head inside a section. */
.ng-v2 .ng-com__head.ng-com__head{
  margin:0;
  font-size:22px; line-height:1.25;
  letter-spacing:-0.012em;
  color:var(--ng-ink);
}
/* .ng-lede's 18px/64ch is right; its 18px top margin was authored against a
   44px h2 and is tight under a 22px sub-head. */
.ng-v2 .ng-com__lede{ margin-top:12px; max-width:78ch; }

.ng-v2 .ng-com{
  list-style:none;
  margin:30px 0 0; padding:0;
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:0;
}
@media (min-width:560px){
  .ng-v2 .ng-com{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (min-width:840px){
  .ng-v2 .ng-com{ grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media (min-width:1024px){
  .ng-v2 .ng-com{ grid-template-columns:repeat(5,minmax(0,1fr)); }
}
.ng-v2 .ng-com__cell{
  min-width:0;
  padding:16px 18px 16px 0;
  border-top:1px solid var(--ng-hairline);
}
@media (min-width:1024px){
  .ng-v2 .ng-com__cell{
    padding:0 20px;
    border-top:0;
    border-left:1px solid var(--ng-hairline);
  }
  .ng-v2 .ng-com__cell:first-child{ padding-left:0; border-left:0; }
  .ng-v2 .ng-com__cell:last-child{ padding-right:0; }
}
/* 11px at .1em tracking (ratio .10) is a tracked label BY MEASUREMENT, which is
   what ng-page-check actually tests. It is an ordinal glanced at above a line,
   not read. */
.ng-v2 .ng-com__n{
  display:block;
  margin-bottom: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-accent);             /* #FF9BC9 on navy */
  font-variant-numeric:tabular-nums;
}
.ng-v2 .ng-com__t{
  display:block;
  font-size:15px; line-height:1.5;
  color:var(--ng-ink);                /* #FAFBFF on navy, 14.46:1 */
}


/* ==========================================================================
   4. THE DOSSIER ROWS — section 30, on the mist band

   ONE ROW PER REPORT TYPE: ordinal, name, scale, the client's own paragraph
   and pills on the left rail; that type's sample output panel on the right.

   THIS IS TWO OLD SECTIONS MERGED AND THE MERGE IS THE POINT. The page used to
   describe the three types in a card grid and then show three sample panels
   900px below, so a reader had to carry "Mikro Lokasyon Raporu" across a whole
   band to find out what it produces. Going from five sections to four forced
   the question; pairing each description with its own artefact is the answer
   that makes the page better rather than merely shorter.

   A ROW, NOT A CARD. No box, no shadow, no third surface — a 2px rule over
   each row, which is the treatment ng-shared §13c already uses for .ng-steps
   and the homepage uses for its own sequences. The page already carries three
   raised panels in these rows; wrapping each of them in a second raised
   surface is how a page becomes an undifferentiated stack of white boxes.

   42/58 AT 1000px AND UP. The rail holds ~45 Turkish words and the panel holds
   a labelled figure; below 1000 the panel would be under 500px and its own
   chrome bar starts fighting for room, so the row stacks instead. 1000 rather
   than 960 because that is where the panel clears 520px inside a 1120px
   container with a 44px gutter.
   ========================================================================== */

.ng-v2 .ng-dos{
  margin-top:34px;
  padding-top:32px;
  border-top:2px solid var(--ng-hairline);
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:26px;
}
@media (min-width:1000px){
  .ng-v2 .ng-dos{
    grid-template-columns:minmax(0,42fr) minmax(0,58fr);
    column-gap:44px;
  }
}
.ng-v2 .ng-dos__rail{ min-width:0; }
.ng-v2 .ng-dos__panel{ min-width:0; }

.ng-v2 .ng-dos__n{
  display:block;
  font-family:var(--ng-font-label); font-weight:600;
  font-size:12px; line-height:1.3; letter-spacing:.1em;
  text-transform:none;
  color:var(--ng-accent);             /* 4.92:1 on mist */
  font-variant-numeric:tabular-nums;
}
/* Doubled class for the theme's `h3:not(:first-child){margin-top:50px}` at
   (0,2,2) — the ordinal is the first child, so this h3 DOES match it. */
.ng-v2 .ng-dos__name.ng-dos__name{
  margin:10px 0 0;
  font-size:24px; line-height:1.22;
  letter-spacing:-0.018em;
  color:var(--ng-ink);
}
/* The scale line. It is the same fact the matrix's ÖLÇEK column carries, said
   once more where the paragraph that defines it can be read — a property of
   this report type, which is why it sits as a per-row meta rather than as a
   grouping label across the three. (The fuel leaf's finding: a tag on a card
   reads as a property OF that card, so only use one where it genuinely is.)
   12px at .1em (ratio .10) clears the checker's tracked-label threshold. */
.ng-v2 .ng-dos__scale{
  margin:10px 0 0;
  font-family:var(--ng-font-label); font-weight:600;
  font-size:12px; line-height:1.4; letter-spacing:.1em;
  text-transform:none;                /* authored pre-uppercased — i never maps
                                         to İ under CSS uppercasing */
  color:var(--ng-muted);              /* 5.42:1 on mist */
}
.ng-v2 .ng-dos__body{
  margin:14px 0 0;
  font-size:16px; line-height:1.62;
  color:var(--ng-muted);
  max-width:56ch;
}
.ng-v2 .ng-dos__pills{ margin-top:16px; }

/* --- THE PANEL BAR WRAPS AT EVERY WIDTH IN THESE ROWS ----------------------
   FOUND IN A 1440 SCREENSHOT ON THE PREVIOUS ITERATION, NOT BY AN ASSERTION:
   ng-page-check reported the page `clean` at all four widths while all three
   subject lines were ellipsised on the desktop render —

       MAKRO STRATEJİ  Örnek sıralama · İ…      ÖRNEK
       MİKRO LOKASYON  Örnek adres · Ata…       ÖRNEK

   i.e. every panel had silently stopped saying what it was a sample OF, which
   is the one thing its chrome exists to say. ng-shared §13b wraps the bar only
   below 767px, because it was written for a PAIR of panels running the full
   container. Here the panel is 58% of 1120px, and .ng-container caps at
   1120px, so no viewport is wide enough to rescue it — this is not a narrow-
   screen problem and the fix does not belong in a media query. §16's saglik
   note records the identical finding for a panel in a 60% column.

   Restated at (0,3,0) rather than widened in ng-shared: the shared rule is
   correct for the full-width pair every other leaf ships. order:3 keeps tag
   and flag paired on line one; __tag grows so the flag still sits hard right. */
.ng-v2 .ng-dos .ng-out__bar{
  flex-wrap:wrap;
  gap:6px 10px;
}
.ng-v2 .ng-dos .ng-out__tag{ flex:1 1 auto; }
.ng-v2 .ng-dos .ng-out__meta{
  order:3; flex:1 0 100%;
  white-space:normal; overflow:visible; text-overflow:clip;
}

/* The caption belongs to all three rows, so it is left-aligned under the last
   one rather than centred under any of them. ng-shared §14 centres it; this is
   a deliberate divergence and the only copy of the rule left in this sheet. */
.ng-v2 .ng-out-band__note{
  margin:34px 0 0;
  max-width:92ch;
  text-align:left;
}


/* ==========================================================================
   5. WHAT IS INSIDE THE PANELS
   Unchanged from the previous iteration — these three blocks were verified and
   the variance pass did not touch what a report looks like, only where it sits
   on the page.
   ========================================================================== */

/* --- 5a. .ng-scan — the ranked list in the macro panel ---------------------
   A ranked list is what a macro strategy report IS: the same criteria applied
   to every province and district, sorted. So the honest rendering is the rank,
   the name, the bar and the score — nothing else.

   THE BAR WIDTH IS THE SCORE, not a normalisation. sections/2-hero.html already
   draws its ranked sample that way (width:87% for a score of 87) and reuses the
   same three districts and the same three scores, so a reader who sees both
   pages sees one consistent sample rather than two that disagree.

   NO DELTA COLUMN, unlike akaryakit.css's .ng-net, which this otherwise
   resembles. A period-over-period delta is a real thing a periodic report
   shows, but this page has no published figure for one and inventing a
   "+4 vs. previous period" would be inventing a trend, not illustrating a
   layout. The third panel says what a periodic comparison compares instead.

   grid, not flex: rank number and score are fixed-width columns and the name
   plus bar take the rest, so the three scores line up in a column that can be
   scanned without reading the names. */
.ng-v2 .ng-scan{
  list-style:none; margin:0; padding:0;
  display:grid; gap:15px;
}
.ng-v2 .ng-scan__row{
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;
  gap:12px;
}
/* 11px at .1em tracking (ratio .10) — a tracked label by measurement, which is
   what ng-page-check tests, and the same size ng-components.css settled on for
   .ng-rank__n after it was found at 10.5px. */
.ng-v2 .ng-scan__n{
  font-family:var(--ng-font-label); font-weight:500;
  font-size:11px; line-height:1.3; letter-spacing:.1em;
  text-transform:none;
  color:var(--ng-muted);
  font-variant-numeric:tabular-nums;
}
.ng-v2 .ng-scan__main{ display:block; min-width:0; }
.ng-v2 .ng-scan__name{
  display:block;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  font-family:var(--ng-font-display); font-weight:600;
  font-size:15px; line-height:1.3;
  color:var(--ng-ink);
}
.ng-v2 .ng-scan__bar{
  display:block;
  margin-top:8px;
  height:6px; border-radius:3px;
  background:var(--ng-surface-sunken);
  overflow:hidden;
}
.ng-v2 .ng-scan__bar i{
  display:block; height:100%; border-radius:3px;
  background:var(--ng-indigo);
}
/* The top row in accent, the rest in indigo. Colour is never the only carrier:
   the rank number, the bar length and the score all say the same thing. */
.ng-v2 .ng-scan__row.is-top .ng-scan__bar i{ background:var(--ng-accent); }
/* 18px, so --ng-accent (not --ng-accent-display) is the correct token on the
   top row: display magenta is reserved for 24px and above and would fail AA
   here. 5.64:1 on white. */
.ng-v2 .ng-scan__score{
  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;
  text-align:right;
}
.ng-v2 .ng-scan__row.is-top .ng-scan__score{ color:var(--ng-accent); }


/* --- 5b. .ng-sc — the large score in the micro panel -----------------------
   38px, which is over the 24px threshold, so --ng-accent-display is legal here
   and is the whole reason the score is set at display size rather than at the
   18px .ng-scan__score: it is the one number the micro report is built around.
   The denominator and the label are deliberately NOT display magenta — both are
   under 24px, where that token fails AA.

   baseline alignment on the flex row rather than centre, so "/100" sits on the
   72's baseline instead of floating in the middle of its cap height. */
.ng-v2 .ng-sc{
  margin:0;
  display:flex; align-items:baseline; flex-wrap:wrap;
  gap:0 8px;
}
.ng-v2 .ng-sc__num{
  font-family:var(--ng-font-display); font-weight:700;
  font-size:38px; line-height:1;
  letter-spacing:-0.03em;
  color:var(--ng-accent-display);     /* 4.18:1 on white, over the 3.0 large bar */
  font-variant-numeric:tabular-nums;
}
.ng-v2 .ng-sc__den{
  font-family:var(--ng-font-display); font-weight:600;
  font-size:16px; line-height:1;
  color:var(--ng-muted);
}
.ng-v2 .ng-sc__lab{
  font-size:14px; line-height:1.3;
  color:var(--ng-muted);
}


/* --- 5c. .ng-fld — key/value field rows ------------------------------------
   What a report page IS, at row level: a named field and its value, separated
   by hairlines. The answer is readable in one vertical scan of the right
   column.

   dt/dd laid out with flex rather than a two-column grid so a long Turkish key
   ("İlçe genelinde rakip nokta") wraps inside its own column instead of forcing
   the value onto its own line. The UA's `dd{margin-inline-start:40px}` is reset
   explicitly; without it every value sits 40px in from the right edge and the
   column looks broken at 390 only. Both findings are the fuel leaf's .ng-env,
   which this deliberately mirrors.

   NO STATE COLOUR, unlike dijital-harita-servisleri.css's .ng-rec. Those rows
   were listing states (Doğru / Doğrulama bekliyor) where a colour carries
   meaning; these are quantities, and colouring a population figure green would
   assert a judgement the report does not make. */
.ng-v2 .ng-fld{ margin:0; }
.ng-v2 .ng-fld__row{
  display:flex; align-items:baseline; gap:16px;
  padding:10px 0;
  border-top:1px solid var(--ng-hairline);
}
.ng-v2 .ng-fld__row:first-child{ border-top:0; padding-top:0; }
.ng-v2 .ng-fld__k{
  flex:1 1 auto; min-width:0;
  margin:0;
  font-size:14px; line-height:1.45;
  color:var(--ng-muted);
}
.ng-v2 .ng-fld__v{
  flex:0 0 auto;
  margin:0;
  text-align:right;
  font-family:var(--ng-font-display); font-weight:600;
  font-size:15px; line-height:1.35;
  color:var(--ng-ink);
  font-variant-numeric:tabular-nums;
}
/* The second label inside one panel body. .ng-out__label carries
   `margin:0 0 14px`, which is right for the first one and leaves the second
   sitting on top of the block above it, so the top margin is restored here. */
.ng-v2 .ng-fld__label2{ margin-top:22px; }


/* ==========================================================================
   6. THE CLOSING RAIL — inside section 40

   The dark band is assigned to the MIDDLE of this page, so the closing
   decision cannot be the indigo slab every other leaf ends on and the page
   must not carry two. It is a SUNKEN rail instead: mist + hairline holding
   white chrome (the two pills), which is the second of the site's two surface
   roles doing exactly its job.

   It sits inside the ladder's section rather than in one of its own, because
   the page has four sections and this is the fourth. The reader who has just
   read the three questions is the reader deciding whether to answer them.

   Copied from akaryakit.css §4 rather than re-invented — PATTERNS.md §15 names
   it as the answer for MIDDLE / OPEN / NONE-MIST assignments and says to copy
   it. It is still not promoted, because the three sheets that now carry a
   .ng-close__rail do not agree on its surface (saglik's inverts to a raised
   white panel on a mist band), and promoting the half they share would just
   move the disagreement into ng-shared.css.
   ========================================================================== */

.ng-v2 .ng-close__rail{
  margin-top:46px;
  padding:26px 22px;
  background:var(--ng-surface-sunken);
  border:1px solid var(--ng-hairline);
  border-radius:var(--ng-radius);
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:24px;
}
@media (min-width:900px){
  .ng-v2 .ng-close__rail{
    grid-template-columns:minmax(0,1fr) auto;
    column-gap:44px;
    align-items:center;
    padding:34px 36px;
  }
}
.ng-v2 .ng-close__eyebrow{ margin:0; }
/* Doubled class 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:24ch;
  text-wrap:balance;
}
.ng-v2 .ng-close__lede{
  margin:14px 0 0;
  font-size:17px; line-height:1.6;
  color:var(--ng-muted);              /* 5.42:1 on mist */
  max-width: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);
}


/* ==========================================================================
   7. RESPONSIVE
   ng-mobile.css §7 carries every 44px hit area (crumbs, buttons, pills, tel)
   at 767, at 768-1023 and at exactly 1024. The only interactive elements on
   this page are those primitives — the matrix, the dossier rails and the
   output panels are static DOM with no links in them — so this block is type
   and rhythm only.
   ========================================================================== */

@media (max-width:1023px){
  /* The five-across strip is stacked at this tier, so its own rule has already
     separated it from the note above; 38px of padding on top of a border that
     now sits 16px above the first cell reads as a gap rather than a break. */
  .ng-v2 .ng-com-wrap{ margin-top:38px; padding-top:32px; }
  .ng-v2 .ng-com{ margin-top:24px; }
}

@media (max-width:999px){
  /* The dossier row stacks: rail, then that row's own panel. Order is the
     client's own report order, which is also the matrix's row order, so
     nothing has to be re-read. */
  .ng-v2 .ng-dos{ margin-top:30px; padding-top:28px; }
}

@media (max-width:767px){
  .ng-v2 .ng-com__head.ng-com__head{ font-size:20px; }
  .ng-v2 .ng-com__t{ font-size:16px; }   /* mobile reading floor */

  /* --- THE MATRIX STACKS AT PHONE WIDTH ---------------------------------
     FOUR COLUMNS DO NOT FIT 342px IN ENGLISH, AND THE FIRST BUILD SHIPPED
     THAT AS A CLIPPED COLUMN. Measured post-JS with /root/ng-probe at 390:
     the wrap is 342px and the table computed 382px, columns
     [103, 91, 92, 96] — so 40px of "THE QUESTION IT ANSWERS" sat outside a
     silently-scrollable box, reading as "Which provinc / district / should /
     investn / go to?". ng-page-check reported the page CLEAN at all four
     widths with the column clipped, because .ng-dtable__wrap is a scroll
     container and the page itself had 0px of overflow. Found by looking at
     the screenshot; that is now four times on this project.
     Turkish fitted at 382-40 and English did not, which is the useful part:
     the same table, the same CSS, one language over the line. Tuning column
     percentages would have shipped a layout that depends on a translation's
     word lengths.

     ng-shared §15b's rule is "size the columns to fit 342px first" and the
     honest reading of it here is that FOUR columns of sentence fragments is
     not a 342px shape in either language: the Turkish render that did fit was
     four columns of 3-to-5-line wraps. So below 768 the table becomes what it
     is on a phone — one block per report type, each attribute on its own
     labelled row — and above 768 it stays a real four-column matrix.

     THE KEYS ARE AUTHORED IN THE MARKUP, not generated from a data-* attribute
     with `content:`. Chrome drops table semantics when table parts are given
     display:block, and with them the <th scope="col"> association; a CSS
     ::before is not in the accessibility tree at all, so the row would lose
     its labels twice over. A real <span> survives both. */
  .ng-v2 .ng-mtx,
  .ng-v2 .ng-mtx thead,
  .ng-v2 .ng-mtx tbody,
  .ng-v2 .ng-mtx tr,
  .ng-v2 .ng-mtx th,
  .ng-v2 .ng-mtx td{ display:block; }
  /* The <caption> too, or its default display:table-caption inside a now-block
     parent makes the browser generate an anonymous table box around it. */
  .ng-v2 .ng-mtx .ng-dtable__cap{ display:block; padding-bottom:18px; }
  /* The column headers are now said once per cell, so the header row would be
     a third copy. Clipped rather than display:none because it is still the
     table's own header row for anything that keeps table semantics. */
  .ng-v2 .ng-mtx thead{
    position:absolute;
    width:1px; height:1px;
    margin:-1px; padding:0;
    overflow:hidden;
    clip-path:inset(50%);
    white-space:nowrap;
  }
  .ng-v2 .ng-mtx tr > :nth-child(1),
  .ng-v2 .ng-mtx tr > :nth-child(2),
  .ng-v2 .ng-mtx tr > :nth-child(3),
  .ng-v2 .ng-mtx tr > :nth-child(4){ width:auto; }

  /* One rule per report type, which is the same ledger idiom as .ng-steps and
     as the section 30 dossier rows below — so the phone layout of the matrix
     and the phone layout of the dossiers are recognisably the same page. */
  .ng-v2 .ng-mtx tbody tr{
    padding-top:20px;
    border-top:1px solid var(--ng-hairline);
  }
  .ng-v2 .ng-mtx tbody tr:first-child{ padding-top:0; border-top:0; }
  .ng-v2 .ng-mtx tbody th,
  .ng-v2 .ng-mtx tbody td{
    border-bottom:0;
    padding:0;
  }
  .ng-v2 .ng-mtx tbody th{ margin-bottom:12px; }
  .ng-v2 .ng-mtx tbody tr:last-child{ padding-bottom:0; }
  /* Key left, value right. 92px holds the longest key on one or two lines in
     both languages ("MASASINDA" and "QUESTION" are both under 70px at 11px /
     .1em) and leaves 238px for the value, which is two lines of every cell. */
  .ng-v2 .ng-mtx tbody td{
    display:grid;
    grid-template-columns:92px minmax(0,1fr);
    gap:4px 12px;
    padding:9px 0 0;
  }
  .ng-v2 .ng-mtx__k{
    display:block;
    font-family:var(--ng-font-label); font-weight:600;
    font-size:11px; line-height:1.45; letter-spacing:.1em;
    text-transform:none;                /* authored pre-uppercased */
    color:var(--ng-muted);
  }
  .ng-v2 .ng-mtx__v{ display:block; }

  .ng-v2 .ng-dos__name.ng-dos__name{ font-size:21px; }

  /* Sentences, not labels: they take the mobile reading floor like every other
     .ng-note on the site. ng-shared already sets .ng-note to 15px at this
     width; these are restated only where a different measure is wanted. */
  .ng-v2 .ng-lead__note,
  .ng-v2 .ng-mtx__note,
  .ng-v2 .ng-how__note,
  .ng-v2 .ng-out-band__note{ max-width:none; }
  .ng-v2 .ng-lead__src{ font-size:16px; max-width:none; }

  /* The field rows at 390. Key and value both come up to the reading floor —
     these are the numbers the whole section exists to show, not chrome — and
     the row padding comes down so a four-row panel plus a footnote does not run
     past one screen. */
  .ng-v2 .ng-fld__k{ font-size:15px; }
  .ng-v2 .ng-fld__v{ font-size:16px; }
  .ng-v2 .ng-fld__row{ gap:12px; padding:9px 0; }

  .ng-v2 .ng-scan{ gap:13px; }
  .ng-v2 .ng-scan__row{ gap:10px; }
  .ng-v2 .ng-scan__name{ font-size:16px; }  /* reading floor: it is a place name */

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


/* ==========================================================================
   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, which would otherwise drag every card up and left by half its own
   size — and ng-components.css §8 does the same for .ng-anim. Nothing on this
   page adds motion beyond those two: the matrix, the dossier rows and the
   output panels are static DOM with no transitions at all, precisely so 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.
   ========================================================================== */


/* ==========================================================================
   9. THE THREE REPORT PAGES — the client's images, at the end of section 30

   THE ASSETS ARE 780x540 AND .ng-figband__img IS width:100%, so any frame that
   would render wider than 780 CSS px upscales the raster and it goes soft. At
   1440 this container is 1120px, so a full-width band here is 340px too wide:
   .ng-dos-cover caps at exactly 780 and centres. Below ~780 the container is
   narrower than the asset and the image simply renders down, which is the case
   the raster is fine in.

   A STACK, NOT A STRIP. Three covers side by side would be three 360px
   thumbnails at 1440 — three quarters of the type inside them illegible, and a
   catalogue rather than an artefact. Stacked full-width bands are what B-STACK
   wants and what the section's three ruled rows already establish: this block
   opens on the same 2px rule the .ng-dos rows use, so it reads as the fourth
   beat of the same sequence, and a 1px hairline between the covers keeps them
   three separate documents rather than one strip of pictures.

   NO MULTI-COLUMN ARRANGEMENT IS ADDED, so there is nothing to collapse below
   960 and nothing new in section 7. The only width-dependent step is the
   caption's, which ng-shared §17 already takes at 767.

   NOTHING HERE IS LANGUAGE-SPECIFIC: no content strings, and the one measured
   width is the asset's own pixel size, which is identical in /img/ and
   /img-en/.
   ========================================================================== */

.ng-v2 .ng-dos-covers{
  margin-top:34px;
  padding-top:32px;
  border-top:2px solid var(--ng-hairline);
}

/* The lead-in, not a heading: section 20's matrix already prints the question
   each report answers, and each cover is named in its own figcaption below the
   frame. This one line opens the block as a SET — the three scales in the order
   the three captions run — so the covers are not three loose pictures at the
   end of a section. The assets are abstract and state nothing, so no fact on
   this page is ever carried by an image alone. .ng-lede's measure, one step
   down in weight because it introduces figures rather than opening a section.

   RESTORED IN THE SECOND PASS along with the three figcaptions; the rule itself
   never went away, only the paragraph that used it. */
.ng-v2 .ng-dos-covers__lede{
  margin:0;
  max-width:64ch;
  font-size:17px; line-height:1.6;
  color:var(--ng-muted);
}

/* margin as a shorthand, not margin-inline:auto — ng-shared §17a states
   `.ng-v2 .ng-figband__fig{ margin:0 }` at the same (0,2,0) specificity and
   this sheet loads after it, so the shorthand is the unambiguous way to win. */
.ng-v2 .ng-dos-cover{
  max-width:780px;
  margin:30px auto 0;
}
.ng-v2 .ng-dos-cover + .ng-dos-cover{
  margin-top:34px;
  padding-top:34px;
  border-top:1px solid var(--ng-hairline);
}

@media (max-width:767px){
  .ng-v2 .ng-dos-covers{ margin-top:28px; padding-top:26px; }
  .ng-v2 .ng-dos-covers__lede{ font-size:16px; max-width:none; }
  .ng-v2 .ng-dos-cover{ margin-top:24px; }
  .ng-v2 .ng-dos-cover + .ng-dos-cover{ margin-top:26px; padding-top:26px; }
}


/* ==========================================================================
   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-dos-cover.ng-dos-cover.ng-dos-cover{ margin:30px auto 0; }
.ng-v2 .ng-section .ng-container .ng-dos-cover + figure.ng-dos-cover.ng-dos-cover.ng-dos-cover{ margin-top:34px; }
@media (max-width:767px){
  .ng-v2 .ng-section .ng-container figure.ng-dos-cover.ng-dos-cover.ng-dos-cover{ margin-top:24px; }
  .ng-v2 .ng-section .ng-container .ng-dos-cover + figure.ng-dos-cover.ng-dos-cover.ng-dos-cover{ margin-top:26px; }
}