/* ==========================================================================
   /cozumler/tahminleme/  +  /en/solutions/forecasting/
   TR 23330 · EN 25583 — ONE stylesheet, both languages (--css-from).
   (The brief for this run gave the English id as 25628. There is no post 25628
   on this install; 25583 is /en/solutions/forecasting/, and it is what
   variance-plan.json carries. Verified against the database before applying.)

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

       opening   E-DARK      the masthead IS the indigo band
       dark      OPEN        and nothing below it is dark
       sections  4           masthead + board + titles + method/close

   WHAT THIS PAGE LOOKED LIKE BEFORE, MEASURED. Six sections, ground masthead
   with an h1 on the left and a mist question-plate on the right, a 2x2 card
   grid, two 42%-wide sample panels, a four-step ladder, a reasons plate and an
   indigo CTA. That is the same silhouette as all 76 pages on this site, and the
   owner's words were "I can't really distinguish if I'm on another page when I
   click a link." Screenshotted next to /cozumler/yer-ve-bolge-secimi/ at 1440
   before any of this was written: identical eyebrow pill, identical two-line
   headline with the second line in accent, identical plate, identical proof
   strip, identical "N şey, iki ölçek" section head. Two different subjects,
   one page.

   THE TONAL ORDER IS NOW  DARK -> MIST -> GROUND -> MIST, which no other page
   in the cozumler group has: raporlama is GROUND-DARK-MIST-GROUND, segmentasyon
   and optimizasyon close on the indigo, veri-servisleri has no indigo at all,
   and the two F-INDEX pages open on a light index.

   THE DOMINANT CONTENT SHAPE IS A COMPARISON BOARD, not another stack of card
   grids. Forecasting produces one set of numbers per condition; the only honest
   way to show that is conditions across, units down, with the arithmetic
   visible. Section 30's four client titles are a two-scale comparison for the
   same reason — they were four identical cards and the thing being expressed is
   a difference of SCALE between two pairs, which a card grid cannot say.

   WHAT THIS SHEET DELIBERATELY DOES NOT CONTAIN. .ng-lead__note,
   .ng-out-band, .ng-out-band__pair, .ng-out-band__note, .ng-steps__pills,
   .ng-how__links and .ng-how__note are ng-shared.css §14; .ng-out, .ng-steps
   and .ng-pills are §13; .ng-dtable, .ng-facts and the three masthead modifiers
   are §15/§16. Only genuine divergences and this page's own components are
   written here.

   Tokens only, no !important, no literal colour, no invented number. Every
   figure on this page is either the client's own copy, a count of something on
   the page, or arithmetic on the illustrative sample it sits inside.
   ========================================================================== */


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

   NOR IS IT .ng-masthead. That primitive sets `background:var(--ng-ground)` and
   a two-column grid whose only job is to hold an aside this page does not have.
   The two class names it DOES borrow — .ng-masthead__title and
   .ng-masthead__proof — are the type scale and the counts strip, identical to
   every other leaf on purpose: a visitor must still know this is one site.

   .ng-dlead IS THE SAME NAME fmcg.css uses for its dark masthead, and that is
   deliberate. Two pages now carry the E-DARK opening; keeping one name means a
   future promotion into ng-shared.css is a move rather than a merge. The bodies
   below differ from fmcg's in three measured places (the headline ceiling, the
   caption line under the h1, and the legend that replaces its three-cell prose
   rail) and those differences are what make the two pages different places.
   ========================================================================== */

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

/* NO ASIDE TO AVOID, so §4's 18ch clamp is wrong here — that ceiling exists to
   stop a split headline running under the plate. (0,4,0) via the doubled class
   inside .ng-dlead, so it beats ng-shared's own doubled (0,3,0) rule without
   touching the shared file.
   24ch, not `none`: the Turkish headline is 38 characters and at 60px with no
   ceiling it sets as one 1100px line, which reads as a strapline. Two balanced
   lines is the shape of a question. */
.ng-v2 .ng-dlead .ng-masthead__title.ng-masthead__title{
  margin:16px 0 0;
  max-width:24ch;
  font-size:clamp(2.3rem, 5.4vw, 3.7rem);
  letter-spacing:-0.03em;
}

/* THE CAPTION UNDER THE HEADLINE, and the reason this page needs no plate.
   Every other leaf quotes the hub's question in an .ng-aside beside the h1.
   Here the h1 IS that question verbatim, so quoting it again 300px to the right
   would print one sentence twice on one screen. The caption says where the
   question comes from and costs one line instead of a 380px column.
   13px at .08em is ratio .08, exactly the tracked-label threshold ng-page-check
   measures, and --ng-accent resolves to #FF9BC9 on this band (7.68:1).

   16 ABOVE AND 28 BELOW, NOT 14 AND 20. Set almost symmetrically it belonged to
   neither the headline nor the lede and read as a stranded line; pulled to 10
   and it sat inside the headline's descenders. Both were found in the 1440
   crop, where ng-page-check reported the page clean every time. */
.ng-v2 .ng-dlead__src{
  margin:16px 0 0;
}
/* 62ch rather than §4's 52ch: the copy column here is the whole container, not
   58% of it, and the client's lede is two long sentences. At 52ch it set as six
   short lines with a rag that looked like a mistake. */
.ng-v2 .ng-dlead__lede{
  margin-top:28px;
  max-width:62ch;
}
.ng-v2 .ng-dlead__proof{
  margin-top:36px;
}
/* The counting note sits under the strip on the dark band; --ng-muted is
   already inverted there, so nothing here declares a colour. */
.ng-v2 .ng-dlead .ng-lead__note{
  margin-top:14px;
}


/* --- 1b. .ng-units — the four output units, laid ACROSS the dark band -------
   THE SECOND HALF OF THE OLD ASIDE. Its two bullets said "Dört sayı: satış,
   ziyaret, dönüşüm ve gelir" and "Tek bir koşul değil". The first is this
   legend; the second is the note under it, which is also the bridge into
   section 20. Nothing was dropped, it was turned ninety degrees.

   A LEGEND, NOT THREE PROSE CELLS. fmcg's dark band carries .ng-qrail, which is
   the same idea holding a blockquote and two paragraphs. This page's subject is
   four named quantities, so the cells are ordinal / name / one clause — the key
   to the table two screens down, and the reason the table needs no repeated
   glossary of its own.

   The dividers are BORDERS ON THE CELLS, not a filled gap, so a legend that
   wraps to two rows at 620-959 does not strand a dangling rule. Same reasoning
   as ng-shared §15c's .ng-facts; it is not .ng-facts itself because __v there
   is a 20px display VALUE and these cells carry a name and a sentence. */
.ng-v2 .ng-units{
  margin-top:40px;
  padding-top:28px;
  border-top:1px solid var(--ng-hairline);   /* rgba(250,251,255,.16) on dark */
}
.ng-v2 .ng-units__label{
  margin:0 0 20px;
  color:var(--ng-accent);             /* #FF9BC9 on navy — 7.68:1 */
}
.ng-v2 .ng-units__list{
  list-style:none; margin:0; padding:0;
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:20px;
}
@media (min-width:620px){
  .ng-v2 .ng-units__list{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px 32px; }
}
@media (min-width:960px){
  .ng-v2 .ng-units__list{
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:0;
  }
  .ng-v2 .ng-units__cell{
    padding:0 22px;
    border-left:1px solid var(--ng-hairline);
  }
  .ng-v2 .ng-units__cell:first-child{ padding-left:0; border-left:0; }
  .ng-v2 .ng-units__cell:last-child{ padding-right:0; }
}
.ng-v2 .ng-units__cell{ min-width:0; }
/* 11px at .1em is ratio .10, over the 0.08 ng-page-check measures for the
   tracked-label exception. An ordinal glanced at, not read. */
.ng-v2 .ng-units__n{
  display:block;
  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);
  font-variant-numeric:tabular-nums;
}
.ng-v2 .ng-units__name{
  display:block; margin-top:8px;
  font-family:var(--ng-font-display); font-weight:600;
  font-size:22px; line-height:1.2;
  letter-spacing:-0.015em;
  color:var(--ng-ink);                /* #FAFBFF on navy — 14.46:1 */
}
.ng-v2 .ng-units__d{
  display:block; margin-top:8px;
  font-size:15px; line-height:1.55;
  color:var(--ng-muted);              /* #C6C9EA on navy — 9.22:1 */
}
.ng-v2 .ng-units__note{
  margin-top:24px;
  max-width:78ch;
}


/* ==========================================================================
   2. SECTION 20 — THE SCENARIO BOARD
   ==========================================================================
   Two output panels, FULL CONTAINER WIDTH, stacked. ng-shared §14 already
   declares .ng-out-band__pair as a one-column grid and 25 sheets add a
   two-column rule at >=960 on top of it; this page deliberately does not. A
   four-column matrix inside a 470px column is a horizontal scrollbar, and
   PATTERNS.md's own record of the .ng-out__meta ellipsis is what a narrow
   column costs. Stacking is also the reason this page's sample band does not
   look like the other 27.

   THE PRICE OF A FULL-WIDTH PANEL, AND THE FIX. ng-shared §13b sets no measure
   on .ng-out__foot, because on every other leaf the panel is 42% of the
   container and the measure comes for free. Here the foot ran the full 1086px
   of panel body — about 150 characters a line at 14px, roughly twice the
   comfortable measure and the widest body copy anywhere on the site. Capped at
   96ch, scoped to this band so nothing else on the page is touched. This is the
   mirror image of the defect PATTERNS.md records for sağlık, where a panel
   NARROWER than the container ellipsised its own subject line: .ng-out assumes
   a column, and a page that puts it anywhere else owes it a measure.
   ========================================================================== */

.ng-v2 .ng-out-band .ng-out__foot{ max-width:96ch; }

/* --- 2a. .ng-cond — the condition key --------------------------------------
   Three definitions above the table rather than three sentences under it. A
   reader comparing "RAKİP AÇILIRSA" against "TEMEL" is asking what was assumed,
   and the answer has to be readable at the moment the question occurs.

   NOT A SECOND LINE INSIDE THE <th>. Measured: at 390 the panel body is
   312px and a header cell is 24% of it, i.e. 69px after padding. A sentence
   there wraps to six lines, and shrinking it to fit would drop untracked prose
   under the 14px reading floor — the exact defect ng-page-check flags with the
   selector it is on. */
.ng-v2 .ng-cond{
  margin:0 0 20px;
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:10px;
}
/* ALIGNED TO THE TABLE'S OWN COLUMNS, not to the panel. The first attempt laid
   three equal cells across the full body width, which put "TEMEL" 300px to the
   left of the TEMEL column it defines — it read as an unrelated legend that
   happened to repeat three words. The track list here is the table's
   28/24/24/24, and `grid-column:2` on the first cell leaves the row-header
   column empty rather than adding a spacer element to the markup. 14px of left
   padding is the table cell's own, so the two sets of words share a left edge.
   900, not 720: at 720-899 a 24% column is 160px, in which "500 m yakına benzer
   bir nokta açılırsa." sets as five lines. Below that the key stacks, which is
   how it reads best on a phone anyway. */
@media (min-width:900px){
  .ng-v2 .ng-cond{
    grid-template-columns:28% repeat(3,minmax(0,1fr));
    gap:0;
  }
  .ng-v2 .ng-cond__cell{ padding:0 10px 0 14px; }
  .ng-v2 .ng-cond__cell:first-child{ grid-column:2; }
}
/* A SENTENCE, NOT A SECOND HEADER ROW. The first build set each cell as a
   tracked uppercase accent label over its definition — which, once the key was
   aligned to the table's own columns, printed TEMEL / RAKİP AÇILIRSA / GELİR
   DÜŞERSE twice in the same treatment 60px apart, and read as a duplicated
   header rather than as a gloss. Found in the 1440 crop; ng-page-check reported
   the page clean before and after, as it does for every one of this project's
   real defects. Sentence case, body colour, the condition in ink at the head of
   its own clause: the words still match the column, the treatment does not. */
.ng-v2 .ng-cond__cell{
  margin:0; min-width:0;
  font-size:14px; line-height:1.5;
  color:var(--ng-muted);              /* 6.21:1 on white */
}
.ng-v2 .ng-cond__k{
  font-weight:600;
  color:var(--ng-ink);
}

/* --- 2b. .ng-scen — the board itself ---------------------------------------
   A REAL <table>, not a grid of divs: rows share columns and a header names
   them, so a screen reader announces "RAKİP AÇILIRSA, Aylık satış, 4.140"
   rather than reading twelve orphan numbers. `scope` on every header, which is
   the whole argument for a table over four more cards.

   NOT ng-shared §15b's .ng-dtable. That primitive is one value per cell; every
   cell here is a three-part lockup — value, proportional bar, change — and
   overriding .ng-dtable's cell padding, alignment and type on all four of them
   would have been a longer rule than this one. Same reason the sheet keeps its
   own name: raporlama's dark .ng-mtx is .ng-dtable used as intended, and the
   two must not drift into each other.

   THE MARGIN IS DOUBLED — `.ng-scen.ng-scen` — and this is not decoration. The
   theme ships

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

   and `:not()` counts its argument, so both are (0,2,2) and both beat a plain
   `.ng-v2 .ng-scen` at (0,2,0). This table is neither the first nor the last
   child of the panel body, so it matched both. Same trap as the theme's
   `h2:not(:first-child){margin-top:50px}` rule and as ng-shared §15b's own
   .ng-dtable margin; PATTERNS.md records that the doubled-class defence is not
   only for headings.

   `border:0` is restated on every cell before the row rules, because the theme
   sets border-STYLE and border-WIDTH on all four sides and leaves the colour to
   inherit from currentColor — an unreset cell draws a navy box.

   table-layout:fixed at 28 / 24 / 24 / 24 is load-bearing. With `auto`, the
   longest column header widens its own column and pushes the table past the
   panel; fixed means the widths are decided here and the headers wrap instead.
   At 390: 312px of panel body gives an 87px stub and three 75px columns, in
   which "12.400" sets at ~55px and "AÇILIRSA" wraps to its own line. */
.ng-v2 .ng-scen.ng-scen{
  width:100%;
  margin:0;
  border-collapse:collapse;
  table-layout:fixed;
}
.ng-v2 .ng-scen th,
.ng-v2 .ng-scen td{
  border:0;
  padding:14px 0 14px 14px;
  text-align:left;
  vertical-align:top;
}
/* 11px at .1em tracking (ratio .10) is a tracked label BY MEASUREMENT, which is
   what ng-page-check tests — the same basis .ng-out__tag uses. Authored
   pre-uppercased with text-transform:none: the case engine maps i->I, so
   "RAKİP" would otherwise print "RAKIP". */
.ng-v2 .ng-scen thead th{
  padding-top:0; padding-bottom:12px;
  font-family:var(--ng-font-label); font-weight:600;
  font-size:11px; line-height:1.35; letter-spacing:.1em;
  text-transform:none;
  color:var(--ng-ink);
  border-bottom:1px solid var(--ng-hairline);
  vertical-align:bottom;
}
/* (0,3,2), not (0,2,0): the shared cell rule above is (0,2,1), so a bare
   `.ng-scen__corner` loses to it and the stub header printed with 14px of left
   padding — the one cell in the table that labels rows rather than holding a
   figure, sitting indented from its own column. */
.ng-v2 .ng-scen thead th.ng-scen__corner{
  width:28%;
  padding-left:0;
  color:var(--ng-muted);
}
/* A row header is the row's SUBJECT, so it is a noun phrase at the reading
   floor, not a display value competing with the figures beside it. */
.ng-v2 .ng-scen tbody th{
  padding-left:0;
  font-family:var(--ng-font-body); font-weight:400;
  font-size:15px; line-height:1.45;
  color:var(--ng-muted);
}
/* A hairline between rows, not around cells. Four rows of four figures is
   exactly the density at which the eye starts reading down the wrong column;
   the rule gives it a track to follow, and `tr + tr` keeps the first row butted
   against the header rule rather than doubling it 1px away from it. */
.ng-v2 .ng-scen tbody tr + tr th,
.ng-v2 .ng-scen tbody tr + tr td{
  border-top:1px solid var(--ng-hairline);
}
/* The last row is the one a reader stops on, so it is RULED, not tinted. A
   shaded row inside a white panel would be a third surface role and there are
   two. Same idiom .ng-steps__item uses for a sequence and a printed table of
   figures uses for its bottom line. */
.ng-v2 .ng-scen tbody tr.is-total th,
.ng-v2 .ng-scen tbody tr.is-total td{
  border-top:2px solid var(--ng-hairline);
}
.ng-v2 .ng-scen__v{
  display:block;
  font-family:var(--ng-font-display); font-weight:600;
  font-size:20px; line-height:1.2;
  letter-spacing:-0.015em;
  color:var(--ng-ink);
  font-variant-numeric:tabular-nums;
}
/* THE BAR IS ARITHMETIC, NOT DECORATION: width is the cell's value over the
   same row's TEMEL value, inline on the element because it is data
   (10.900/12.400 = 88%), exactly as the homepage hero and four other leaves
   write their score bars. aria-hidden, because the number it encodes is
   printed 4px above it and a screen reader should not hear it twice. */
.ng-v2 .ng-scen__bar{
  display:block; margin-top:9px;
  height:5px;
  border-radius:var(--ng-radius-pill);
  background:var(--ng-surface-sunken);
  overflow:hidden;
}
.ng-v2 .ng-scen__bar i{
  display:block; height:100%;
  border-radius:var(--ng-radius-pill);
  background:var(--ng-indigo);
}
/* The base column is the reference every other figure is read against, so its
   bar is the accent and its caption says so in words rather than in a number
   that would look like a change of zero. */
.ng-v2 .ng-scen td:first-of-type .ng-scen__bar i{
  background:var(--ng-accent);
}
/* A change, not a label: it is read, so it takes the 14px floor rather than the
   tracked exception. tabular figures so -%12 and -%17 align down the column. */
.ng-v2 .ng-scen__d{
  display:block; margin-top:8px;
  font-size:14px; line-height:1.4;
  color:var(--ng-muted);
  font-variant-numeric:tabular-nums;
}


/* --- 2c. .ng-plan — the expansion plan, as a schedule ----------------------
   The client's own aşama 04: "Hangi bölgede, ne zaman, nasıl bir büyüme ya da
   yatırım yapılması gerektiği net biçimde önerilir." Four facts per row —
   window, region, how many points, potential score — and the window leads,
   because it is the column a reader scans down.

   FOUR REAL COLUMNS, because the panel now runs the full container. The
   previous version stacked each row into two lines to survive a 42% column;
   with 1086px of panel body the same content reads as one line per window,
   which is what a schedule looks like. Below 720 it goes back to stacking, and
   grid-template-areas means that is a change of two declarations rather than of
   the markup.

   THE SCORE IS LABELLED IN THE ROW, not left as a bare 87. Visually-hidden text
   would have done the same job for a screen reader and nothing for a sighted
   reader looking at four unexplained numbers. */
.ng-v2 .ng-plan{
  list-style:none; margin:0; padding:0;
}
.ng-v2 .ng-plan__row{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  grid-template-areas:
    "win   pts"
    "name  name"
    "meter meter";
  align-items:baseline;
  column-gap:16px; row-gap:8px;
  padding:16px 0;
  border-top:1px solid var(--ng-hairline);
}
.ng-v2 .ng-plan__row:first-child{ border-top:0; padding-top:0; }
.ng-v2 .ng-plan__row:last-child{ padding-bottom:0; }
@media (min-width:720px){
  .ng-v2 .ng-plan__row{
    grid-template-columns:minmax(0,120px) minmax(0,1fr) auto minmax(0,300px);
    grid-template-areas:"win name pts meter";
    align-items:center;
    column-gap:26px; row-gap:0;
  }
}
/* 11px at .1em (ratio .10) — tracked label by measurement. The en dash in
   "6–12 AY" is authored, not a hyphen: it is a range. */
.ng-v2 .ng-plan__win{
  grid-area:win;
  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-plan__name{
  grid-area:name;
  min-width:0;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  font-family:var(--ng-font-display); font-weight:600;
  font-size:19px; line-height:1.3;
  color:var(--ng-ink);
}
.ng-v2 .ng-plan__pts{
  grid-area:pts;
  text-align:right;
  font-size:14px; line-height:1.4;
  color:var(--ng-muted);
}
.ng-v2 .ng-plan__meter{
  grid-area:meter;
  display:flex; align-items:center; gap:12px;
  min-width:0;
}
.ng-v2 .ng-plan__sl{
  flex:none;
  font-family:var(--ng-font-label); font-weight:600;
  font-size:11px; line-height:1.3; letter-spacing:.1em;
  text-transform:none;
  color:var(--ng-muted);
}
.ng-v2 .ng-plan__bar{
  flex:1 1 auto; min-width:48px;
  height:6px;
  border-radius:var(--ng-radius-pill);
  background:var(--ng-surface-sunken);
  overflow:hidden;
}
.ng-v2 .ng-plan__bar i{
  display:block; height:100%;
  border-radius:var(--ng-radius-pill);
  background:var(--ng-indigo);
}
.ng-v2 .ng-plan__score{
  flex:none;
  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;
}
/* ONE accent row, exactly as the homepage hero's ranked candidates do it. If
   every score were accent the ordering would read as a brand pattern rather
   than as a ranking. */
.ng-v2 .ng-plan__row.is-top .ng-plan__score{ color:var(--ng-accent); }
.ng-v2 .ng-plan__row.is-top .ng-plan__bar i{ background:var(--ng-accent); }


/* ==========================================================================
   3. SECTION 30 — THE FOUR TITLES AS TWO SCALES
   ==========================================================================
   .ng-tw = title / two scales. This replaces a 2x2 .ng-grid--2 of .ng-card,
   which is what every leaf on this site does with its value list.

   WHY NOT CARDS. A card says "here is an option, and here is another". What the
   client's four descriptions actually say is that two of them are about one
   point before it opens and two are about a network over a calendar — a
   difference of SCALE, which is a property ACROSS the pair, not of either
   entry. PATTERNS.md already records the akaryakıt agent rejecting a per-card
   tag for exactly this reason: a tag on a card reads as a property of that
   card. Two labelled columns with a rule between them say it once.

   NO SURFACE AT ALL. Cards were raised white on ground; these entries sit
   directly on the ground with hairlines. The page's raised white is spent on
   the two output panels one section up, where it means "this is a thing the
   product produced". Three raised surfaces in a row is what made every leaf
   read as one undifferentiated stack of boxes.
   ========================================================================== */

.ng-v2 .ng-tw{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:0;
}
.ng-v2 .ng-tw__col{ min-width:0; }
.ng-v2 .ng-tw__col + .ng-tw__col{
  margin-top:34px; padding-top:30px;
  border-top:1px solid var(--ng-hairline);
}
/* 900, not 960: at 900-959 the two columns are 400px each, which holds a
   45-character Turkish title on two lines and its body on five — the point at
   which the comparison is still legible. The divider is a border on the second
   column plus symmetric padding, so the rule sits on the axis rather than at
   the edge of a gap. */
@media (min-width:900px){
  .ng-v2 .ng-tw{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .ng-v2 .ng-tw__col:first-child{ padding-right:40px; }
  .ng-v2 .ng-tw__col + .ng-tw__col{
    margin-top:0; padding-top:0; padding-left:40px;
    border-top:0;
    border-left:1px solid var(--ng-hairline);
  }
}
/* The scale label. Doubled class at (0,3,0) for the theme's
   `h3:not(:first-child){margin-top:50px}` at (0,2,2) — it is the first child of
   its column here, but the same class is one edit away from not being, and a
   50px gap that appears when a paragraph is added above it is exactly the kind
   of trap this project keeps re-finding. */
.ng-v2 .ng-tw__scale.ng-tw__scale{
  margin:0 0 6px;
  font-family:var(--ng-font-display); font-weight:600;
  font-size:18px; line-height:1.3;
  letter-spacing:-0.008em;
  color:var(--ng-accent);             /* 5.35:1 on ground */
}
.ng-v2 .ng-tw__list{
  list-style:none; margin:0; padding:0;
}
/* icon spans all three text rows, so the body aligns with the title rather than
   under the chip. auto/1fr rather than a fixed track: the chip is 40px and
   saying so twice is how the two get out of step. */
.ng-v2 .ng-tw__item{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  grid-template-areas:
    "icon name"
    "icon meta"
    "icon body";
  column-gap:16px;
  padding:24px 0;
  border-top:1px solid var(--ng-hairline);
}
.ng-v2 .ng-tw__item:last-child{ padding-bottom:0; }
.ng-v2 .ng-tw__icon{
  grid-area:icon;
  align-self:start;
  display:inline-flex; align-items:center; justify-content:center;
  width:40px; height:40px;
  border-radius:var(--ng-radius-sm);
  background:var(--ng-accent-wash);
  color:var(--ng-accent);
}
/* h4, and the doubled class is required rather than defensive: the icon span is
   the first child of the item, so `h4:not(:first-child)` matches this heading
   and the theme's 50px margin-top applies at (0,2,2). (0,3,0) settles it. */
.ng-v2 .ng-tw__name.ng-tw__name{
  grid-area:name;
  margin:0;
  font-family:var(--ng-font-display); font-weight:600;
  font-size:19px; line-height:1.3;
  letter-spacing:-0.012em;
  color:var(--ng-ink);
}
/* The client's own factor lines. 11px at .1em is ratio .10 — a tracked label by
   measurement, the same basis .ng-card__meta uses, and it is glanced at as a
   set of inputs rather than read as a sentence. */
.ng-v2 .ng-tw__meta{
  grid-area:meta;
  margin:8px 0 0;
  font-family:var(--ng-font-label); font-weight:600;
  font-size:11px; line-height:1.45; letter-spacing:.1em;
  text-transform:none;
  color:var(--ng-muted);
}
.ng-v2 .ng-tw__body{
  grid-area:body;
  margin:12px 0 0;
  font-size:15px; line-height:1.62;
  color:var(--ng-muted);
}
.ng-v2 .ng-tw__note{
  margin-top:30px;
  max-width:88ch;
}


/* ==========================================================================
   4. SECTION 40 — THE FOUR STAGES, THE CHIPS AND THE CLOSE
   ==========================================================================
   The ladder is ng-shared §13c and the pills are §7's --onmist variant: the
   band is sunken, so a mist pill on mist would be invisible and the white one
   is correct. The note and the chip row are §14. Only the four-column override
   and the closing panel are this page's.
   ========================================================================== */

/* FOUR STEPS, NOT THREE. ng-shared §13c sets three columns at >=860, which is
   right for the three-stage pages in this tranche and wrong here: a fourth item
   wraps onto its own row and prints as 3 + 1, a ladder that looks like it lost
   a rung. 2x2 from 720 up — and 2x2 all the way up rather than 4-up at the
   widest, for the reason PATTERNS.md records against .ng-grid--4: at the 1120px
   container four columns are 250px each, and these paragraphs run 30-45 Turkish
   words with a five-pill row under them, which at 250px is fifteen short lines.
   (0,2,0) like the rule it overrides, and this file loads later. */
@media (min-width:720px){
  .ng-v2 .ng-steps--four{
    grid-template-columns:repeat(2,minmax(0,1fr));
    column-gap:40px; row-gap:32px;
  }
}

/* --- 4a. .ng-close__rail — the closing panel -------------------------------
   THE PAGE CANNOT CLOSE ON THE INDIGO SLAB: `dark: OPEN` spends the only dark
   band on the masthead, and ARCHETYPES.md says nothing else on the page is
   dark. akaryakıt and gayrimenkul answered the same constraint with a mist rail
   on the ground; sağlık's last band was itself mist, so it inverted the idiom
   into a RAISED white panel. This band is mist, so this page takes sağlık's
   arrangement, with the same class names on purpose — one idiom, two surface
   arrangements, and no two page sheets ever load together. Still not promoted:
   four leaves have now written .ng-close__rail and not the same one.

   IT SITS INSIDE THE LAST SECTION rather than in a section of its own, because
   the assignment is four sections and this is the fourth.

   THE SECOND COLUMN IS THE CLIENT'S "NEDEN" LIST, which used to hold a band to
   itself: an eyebrow, an h2, a lede and four one-line benefits on 56px of pad
   at each end, for 34 words. Four short lines do not earn a band. They earn the
   half of the closing panel that answers "why would I", next to the half that
   answers "what next". */
.ng-v2 .ng-close__rail{
  margin-top:46px;
  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:26px;
}
@media (min-width:900px){
  .ng-v2 .ng-close__rail{
    grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);
    column-gap:0;
    padding:34px 36px;
  }
  .ng-v2 .ng-close__copy{ padding-right:40px; }
  .ng-v2 .ng-close__why{
    padding-left:40px;
    border-left:1px solid var(--ng-hairline);
  }
}
.ng-v2 .ng-close__copy{ min-width:0; }
.ng-v2 .ng-close__eyebrow{ margin:0; }
/* h3 here, not h2: the section already has one and this panel is part of it.
   Doubled class for the theme's 50px margin — the eyebrow is the first child,
   so `h3:not(:first-child)` matches. */
.ng-v2 .ng-close__title.ng-close__title{
  margin:14px 0 0;
  font-family:var(--ng-font-display); font-weight:700;
  font-size:clamp(1.55rem, 3vw, 2rem);
  line-height:1.18;
  letter-spacing:-0.02em;
  color:var(--ng-ink);
  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);              /* 6.21:1 on white */
  max-width:54ch;
}
.ng-v2 .ng-close__actions{ margin-top:22px; }
/* 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:18px 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);
}

.ng-v2 .ng-close__why{ min-width:0; }
.ng-v2 .ng-close__wlabel{ margin:0; }
.ng-v2 .ng-close__wlede{
  margin:12px 0 0;
  font-size:16px; line-height:1.6;
  color:var(--ng-muted);
}
/* ONE COLUMN, ALWAYS. The previous version of this list ran two columns with
   grid-auto-flow:column inside a full-width plate; here it is half a panel, so
   two columns would be 190px each and every one of the four lines would wrap
   three times. */
.ng-v2 .ng-why__list{
  list-style:none; margin:16px 0 0; padding:0;
}
.ng-v2 .ng-why__row{
  display:flex; align-items:baseline; gap:14px;
  padding:12px 0;
  border-top:1px solid var(--ng-hairline);
}
.ng-v2 .ng-why__row:last-child{ padding-bottom:0; }
/* 12px at .1em (ratio .10) — a tracked ordinal glanced at beside a line. */
.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:15px; line-height:1.5;
  color:var(--ng-ink);
}


/* ==========================================================================
   5. 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 only
   interactive things on this page are those primitives — the board, the
   schedule, the two-scale ledger and the reasons list are all static DOM — so
   this block is type and rhythm only.
   ========================================================================== */

@media (max-width:959px){
  .ng-v2 .ng-out-band__note{ text-align:left; }
  .ng-v2 .ng-units{ margin-top:34px; padding-top:24px; }
}

@media (max-width:767px){
  /* 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-units__note,
  .ng-v2 .ng-tw__note,
  .ng-v2 .ng-how__note,
  .ng-v2 .ng-out-band__note{ max-width:none; }

  .ng-v2 .ng-units__name{ font-size:20px; }
  .ng-v2 .ng-units__d{ font-size:16px; }   /* mobile reading floor */

  /* THE BOARD AT 390. 312px of panel body at 28/24/24/24 gives an 87px stub and
     three 75px columns. Cell padding drops from 14 to 8 so the third column
     clears the panel edge; the stub stays at 15px, because it is a short noun
     phrase read once per row and pushing it to 16px would wrap "Aylık ziyaret"
     onto three lines in an 87px column while the figures beside it have room to
     spare. The figures keep 19px because they ARE the content, and the change
     line keeps 14px, which is the floor rather than an exception to it. */
  .ng-v2 .ng-scen th,
  .ng-v2 .ng-scen td{ padding-left:8px; padding-top:12px; padding-bottom:12px; }
  .ng-v2 .ng-scen thead th{ padding-top:0; }
  .ng-v2 .ng-scen__corner,
  .ng-v2 .ng-scen tbody th{ padding-left:0; }
  .ng-v2 .ng-scen__v{ font-size:19px; }

  .ng-v2 .ng-cond{ margin-bottom:18px; }
  .ng-v2 .ng-cond__cell{ font-size:15px; }

  .ng-v2 .ng-plan__name{ font-size:18px; }
  .ng-v2 .ng-plan__pts{ font-size:15px; }

  .ng-v2 .ng-tw__item{ column-gap:12px; padding:20px 0; }
  .ng-v2 .ng-tw__body{ font-size:16px; }
  .ng-v2 .ng-tw__scale.ng-tw__scale{ font-size:17px; }

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


/* ==========================================================================
   6. REDUCED MOTION
   ng-shared.css §10 already flattens .ng-card and .ng-arrow under a reduce
   preference — including cancelling ng-components.css's !important marker
   transform, 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 board, the schedule and the ledger 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.
   ========================================================================== */


/* ==========================================================================
   7. SECTION 20 — THE TWO CLIENT ARTEFACTS, AS AN EQUAL TWO-UP
   ==========================================================================
   Added by the content-image rollout. Two of the four supplied 780x540 assets
   for this page, side by side at the FOOT of the board band — after the two
   panels and after their note, so that note keeps the referent it was written
   for: "Potansiyel skorları… aynı değerlerdir" describes the schedule above it,
   not the region scores inside the picture, which score REGIONS where the
   schedule scores districts.

   NOT ON THE MASTHEAD. This page is E-DARK: the indigo band is the whole
   signal, and a white picture band stacked on top of it would spend it. The
   pictures start in the second band, which is where the page already says
   "örnek çıktı" and where a raised white surface already means "this is a thing
   the product produced".

   EQUAL COLUMNS, NOT §17a's 44/56. `--split` is a figure BESIDE copy; this is
   two artefacts being compared with each other, so neither may be the larger
   one. At 1440 the container is 1120 less 24px of padding a side, so each frame
   lands at (1072-32)/2 = 520px; at 1024 it is 472px. Both are comfortably under
   the assets' own 780px raster width, so NO max-width cap belongs here — the
   cap exists to stop upscaling, and adding one at this size would only shrink
   two already-small pictures further.

   ONE COLUMN BELOW 768, COPY FIRST. Written as a min-width query so the stacked
   state is the default and cannot be lost to a later override. The lead-in sits
   above the row in the DOM, so the stacked order is copy-then-pictures without
   an order property — the same reason §17a stacks --split that way.

   NO .ng-anim ANYWHERE IN THIS BLOCK. Its hidden state is a transform, and a
   lazily loaded image inside a transformed element is the one combination
   HANDOFF records as never loading. The two .ng-out panels above keep theirs;
   this block simply never had one, so no reveal was removed from this page.
   ========================================================================== */

.ng-v2 .ng-tahfig{ margin-top:46px; }

/* THE HEADING IS THE QUESTION THE TWO ARTEFACTS ANSWER, not either of their
   titles. Both titles used to be baked into the raster at 25px; since 2026-08-20 they live only in the figcaptions and repeating one 20px
   away is a stutter; each is named once, in its own figcaption, where it reads
   as a sample's subject line. 22px sits under §3's scale headings and over the
   body, which is what a sub-head inside an existing section should do. */
.ng-v2 .ng-tahfig__q{
  margin:0;
  font-family:var(--ng-font-display); font-weight:700;
  font-size:22px; line-height:1.28;
  color:var(--ng-ink);
  max-width:34ch;
}
/* THE PICTURES' SMALL TYPE IS ILLEGIBLE ON A PHONE: a 780px asset renders at
   342px at a 390 viewport, so its 9.5px axis labels come out near 4px. So this
   paragraph carries in WORDS what each picture says in type — a forecast drawn
   as a band between three curves, and a ranked list cut into entry waves — and
   neither picture is left as the only carrier of a fact. No figure from inside
   either raster is restated here: the invented twelve-month amount and its
   uplift stay inside the sample, named as illustrative in the figcaption and
   never repeated as this page's own claim. */
.ng-v2 .ng-tahfig__lede{
  margin:12px 0 0;
  font-size:16px; line-height:1.65;
  color:var(--ng-muted);
  max-width:76ch;
}

.ng-v2 .ng-tahfig__row{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:28px;
  margin-top:26px;
  align-items:start;
}
@media (min-width:768px){
  .ng-v2 .ng-tahfig__row{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:32px;
  }
}
@media (max-width:767px){
  .ng-v2 .ng-tahfig{ margin-top:36px; }
  .ng-v2 .ng-tahfig__q{ font-size:20px; max-width:none; }
  .ng-v2 .ng-tahfig__lede{ max-width:none; }
}