/* ==========================================================================
   pages/reklamcilik.css — /sektorler/reklamcilik/ and /en/sectors/advertising/
   One authored sheet, copied to advertising.css at apply time (--css-from), so
   the two languages cannot drift.

   VARIANCE PASS, 2026-08-17. Assigned in variance-plan.json and not negotiable:

       opening   E-DARK      the masthead IS the indigo band
       dark      OPEN        and it is the ONLY dark band on the page
       sections  4           masthead · titles · scorecard · ladder+close

   THE DOMINANT CONTENT SHAPE IS A TWO-COLUMN COMPARISON, chosen because that
   is what the subject is. Advertising is the one sector on this site whose
   deliverable is a loop: you decide where the AUDIENCE is before a campaign,
   and you read what the campaign GIVES BACK while it runs. Both halves of the
   hub's own question say so. So section 20 sets the client's four analysis
   titles as two facing columns split by a rule instead of a 2x2 card grid, and
   section 30 is the same comparison at full size with numbers in it —
   ÖNGÖRÜ beside GERÇEKLEŞEN. There is no card grid anywhere on this page,
   which is the shape ARCHETYPES.md exists to break up.

   HOW THIS DIFFERS FROM fmcg, THE OTHER E-DARK/OPEN/4 PAGE. Assignments are
   dealt centrally, so two sector leaves share all three properties; if the
   internals also matched, the pair would be one silhouette with two headlines.
     fmcg      one full-width copy column; the hub question laid across the
               foot of the band as three text cells; a mist band of two
               stacked artefacts; a numbered ledger; ladder + rail.
     this page two columns in the dark band, and the second one carries an
               ARTEFACT — the h1 asks which areas hold your audience and the
               ranked list beside it answers with four of them. Then a two-
               column comparison of the four titles, then a scorecard with its
               reading notes on a ruled rail, then ladder + rail.
   No other page on this site puts a sample output inside the indigo.

   WHAT IS REUSED AND WHY IT IS NOT RE-AUTHORED: .ng-out (the sample-output
   chrome), .ng-aud and .ng-fc (this page's own ranking and comparison table,
   kept verbatim from the leaf pass with their findings), .ng-steps, .ng-pills,
   .ng-masthead__title / __proof, and akaryakit's .ng-close__rail. Everything
   below is either new for this composition or a documented override.

   NOTE: rules this sheet used to declare for the shared leaf primitives
   (.ng-out-band, .ng-lead, .ng-how, .ng-vals, .ng-steps__pills, .ng-env,
   .ng-net) live in ng-shared.css §14. Anything of theirs still declared here
   is a deliberate override — it diverged from the majority, so it was left
   here, and it still wins because this file loads after ng-shared.css.
   ========================================================================== */


/* ==========================================================================
   1. SECTION 10 — .ng-dopen, THE DARK MASTHEAD (E-DARK)
   ==========================================================================
   NOT .ng-masthead. ng-shared.css §4 sets `background:var(--ng-ground)` on
   that block, so building a dark masthead on it paints paper straight over the
   band. .ng-dopen borrows exactly two of its class names — .ng-masthead__title
   for the type scale and .ng-masthead__proof for the counts strip — because a
   visitor must still know this is the same site.

   `is-dark` and not `ng-section--dark`: --dark adds `text-align:center` and a
   centred flex container, which is the CLOSING composition. A masthead wants
   the palette flip only. ng-foundation.css §3 is where is-dark swaps the
   tokens (and the accent to the pink tier, since #C61073 on navy is 2.65:1)
   and §7 is where it supplies the 88px pad.
   ========================================================================== */

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

/* TWO COLUMNS AT 1024, NOT 960. The second column holds a .ng-out panel with a
   four-row ranking and a chrome bar in it, not a paragraph: at 960 the panel
   column resolves to ~415px and the bar's subject line ("Örnek kampanya · 4
   bölge, İstanbul") loses its row. 1024 gives it ~450px and the tablet portrait
   width gets the stacked layout, where the panel is full width and unarguably
   legible. */
.ng-v2 .ng-dopen__inner{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:34px;
  align-items:start;
}
/* 57/43, and the 57 is measured, not chosen. At 54/46 the copy column resolves
   to 551px at 1440 and the two CTAs need 561 — so the ghost pill wrapped onto
   a line of its own and the masthead read as a phone layout stretched to
   desktop. Seen in the 1440 screenshot; ng-page-check reported the page clean
   before and after, because a button on its own line is not a defect any
   assertion tests for. 57 gives 581px, which clears both languages' pair with
   room, and leaves the panel 439px — still wide enough for the ranking's
   three columns with 312px of name track. */
@media (min-width:1024px){
  .ng-v2 .ng-dopen__inner{
    grid-template-columns:minmax(0,57fr) minmax(0,43fr);
    column-gap:52px;
  }
}
.ng-v2 .ng-dopen__copy{ min-width:0; }

/* (0,4,0): doubled class INSIDE .ng-dopen, so it beats ng-shared's own doubled
   (0,3,0) .ng-masthead__title rule without touching the shared file.
   16ch, not §4's 18ch: this headline shares its screen with an output panel,
   and both language's headlines ("Hedef kitleniz hangi bölgede?" / "Which
   areas hold your audience?") want to set as two or three balanced lines. */
.ng-v2 .ng-dopen .ng-masthead__title.ng-masthead__title{
  margin:16px 0 0;
  max-width:16ch;
  font-size:clamp(2.25rem, 4.4vw, 3.4rem);
  letter-spacing:-0.03em;
}
.ng-v2 .ng-dopen__lede{
  margin-top:18px;
  max-width:50ch;
  color:var(--ng-muted);              /* #C6C9EA on navy — 9.22:1 */
}
.ng-v2 .ng-dopen__proof{ margin-top:34px; }
.ng-v2 .ng-dopen .ng-lead__note{ margin-top:14px; }

/* The second column: the hub's question, then the artefact that answers it.
   margin-top at desktop lines the question's label up with the eyebrow pill
   rather than with the breadcrumb, so the two columns start on the same
   optical line without either being nailed to a pixel value that a longer
   breadcrumb would break. */
.ng-v2 .ng-dopen__side{
  min-width:0;
  display:grid;
  gap:24px;
  align-content:start;
}
@media (min-width:1024px){
  .ng-v2 .ng-dopen__side{ margin-top:38px; }
}
.ng-v2 .ng-dopen__asklabel{
  margin:0 0 12px;
  color:var(--ng-accent);             /* #FF9BC9 on navy — 7.68:1 */
}
/* THE DOUBLED CLASS HERE IS LOAD-BEARING. ng-shared's blockquote rules are not
   in play (this is not .ng-aside__quote), and Neuros ships
       body .content-wrapper blockquote:not(:first-child){ margin-top:2.5rem }
       body .content-wrapper blockquote:not(:last-child) { margin-bottom:2.5rem }
   at (0,2,2) — `:not()` counts its argument. A plain `.ng-v2 .ng-dopen__quote`
   is (0,2,0) and loses, which would open 40px above and below the hub's own
   question. Same trap as the h2 margin and the .ng-dtable margin.
   The ::before/::after reset is there because the theme hangs a decorative
   glyph off blockquotes in some contexts, and a stray “ in front of the hub's
   words would read as scare quotes. */
.ng-v2 .ng-dopen__quote.ng-dopen__quote{
  margin:0;
  padding:2px 0 2px 16px;
  border-left:3px solid var(--ng-accent);
  font-family:var(--ng-font-display); font-weight:600;
  font-size:19px; line-height:1.42;
  color:var(--ng-ink);                /* #FAFBFF on navy — 14.46:1 */
}
.ng-v2 .ng-dopen__quote::before,
.ng-v2 .ng-dopen__quote::after{ content:none; }
.ng-v2 .ng-dopen__askbody{
  margin:14px 0 0;
  font-size:15px; line-height:1.6;
  color:var(--ng-muted);
}

/* THE PANEL INSIDE THE DARK BAND. .ng-out needs no dark branch — it is built
   from --ng-surface (which is 6% paper inside is-dark), --ng-hairline (16%
   paper) and --ng-shadow-card (which is `none` on dark, because a navy-tinted
   drop on navy is a smudge). ng-foundation.css §3 measured all four resulting
   pairs: muted 7.84:1, ink 12.30:1 and pink 6.53:1 on the 6% surface.
   ONE THING DOES NEED A BRANCH — see the bar fill in §2 below. */
.ng-v2 .ng-dopen__fig{ margin:0; }


/* ==========================================================================
   2. .ng-aud — THE RANKED AREA LIST (now in the dark band)
   ==========================================================================
   A ranked list with a bar per row is the honest rendering of "hedef kitle
   hangi bölgede": the ORDERING is the answer, and the bar makes the distance
   between 87 and 68 visible without adding a chart library. Same idiom as the
   homepage hero's .ng-rank and the fuel leaf's .ng-net, deliberately — this
   site should have one way of drawing a ranking, not three.

   Bar widths are inline `style="width:87%"` on the fill, the same move
   ng-components.css §8 uses for the hero, so a score and its bar cannot drift
   apart in a future edit.

   THE TOP ROW IS ACCENT, THE REST INK — one accent row per list, exactly as
   the hero does it. If every bar were accent the ranking would read as a brand
   pattern rather than as an ordering.

   THE MEDIA-POINT COUNT SITS UNDER THE BAR, IN THE MAIN COLUMN, NOT IN A SIDE
   COLUMN. The kamu leaf shipped an annotation in the side column and found in
   the 390 screenshot that (a) it ellipsised the row's own name and (b) it made
   every bar a different length, because an `auto` side column resolves per row
   and a bar chart whose baseline moves per row is not a chart. So the side
   column here holds ONLY the score and is a fixed 46px — wide enough for two
   tabular digits at 18px/700 with the slack a fallback face needs — and all
   four bars share one track.
   ========================================================================== */
.ng-v2 .ng-aud{
  list-style:none; margin:0; padding:0;
  display:grid; gap:16px;
}
.ng-v2 .ng-aud__row{
  display:grid;
  grid-template-columns:auto minmax(0,1fr) 46px;
  align-items:start;
  gap:12px;
}
/* 11px at .1em (ratio .10) — a tracked label BY MEASUREMENT, which is what
   ng-page-check actually tests, and the size ng-components.css settled on for
   .ng-rank__n after it was found at 10.5px. padding-top aligns its cap height
   with the name beside it. */
.ng-v2 .ng-aud__n{
  padding-top:3px;
  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-aud__main{ display:block; min-width:0; }
.ng-v2 .ng-aud__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-aud__bar{
  display:block;
  margin-top:8px;
  height:6px; border-radius:3px;
  background:var(--ng-surface-sunken);
  overflow:hidden;
}
/* THE ONE RULE THAT DID NEED A DARK BRANCH, and it is the sort of thing no
   assertion reports. The fill was `background:var(--ng-indigo)`, which is the
   ONE palette token .is-dark does NOT redefine — it is the navy itself. On the
   light band that is a navy bar on a mist track; in the dark band it is navy on
   navy, i.e. three of the four bars simply stop existing while the numbers
   beside them stay correct. Paper on the 10%-paper track instead, which
   ng-foundation §3 measures at 12.30:1 for ink on this surface.
   font-style is reset because <i> here is a fill, not emphasis. */
.ng-v2 .ng-aud__bar i{
  display:block; height:100%; border-radius:3px;
  background:var(--ng-ink);
  font-style:normal;
}
.ng-v2 .ng-aud__row.is-top .ng-aud__bar i{ background:var(--ng-accent); }
/* 12px at .09em (ratio .09) clears the checker's 0.08 tracked-label threshold
   by measurement. It is a count glanced at beside a bar, not a sentence. */
.ng-v2 .ng-aud__note{
  display:block;
  margin-top:7px;
  font-family:var(--ng-font-label); font-weight:500;
  font-size:12px; line-height:1.3; letter-spacing:.09em;
  text-transform:none;
  color:var(--ng-muted);
}
.ng-v2 .ng-aud__score{
  text-align:right;
  font-family:var(--ng-font-display); font-weight:700;
  font-size:18px; line-height:1.25;
  letter-spacing:-0.01em;
  color:var(--ng-ink);
  font-variant-numeric:tabular-nums;
}
/* On the dark band both accent tiers collapse onto #FF9BC9, so an 18px score
   in the accent is 6.53:1 on the panel — the light-band reason for using
   --ng-accent rather than --ng-accent-display below 24px still holds and is
   simply moot here. */
.ng-v2 .ng-aud__row.is-top .ng-aud__score{ color:var(--ng-accent); }


/* ==========================================================================
   3. THE CHROME BAR MUST WRAP AT EVERY WIDTH ON BOTH PANELS
   ==========================================================================
   ng-shared.css §13b wraps .ng-out__bar only below 767px, because that is
   where the FIRST leaf page's Turkish subject lines ran out of room. The
   otomotiv leaf then found the same failure at 1440 in English and fixed it in
   its own sheet; this pair needs it too, and the arithmetic is worth writing
   down because it is the third page to hit it.

   The masthead panel is 46% of the container: ~450px at 1024, so its bar has
   ~418px of content box. "BÖLGE SIRALAMASI" takes ~145px at 11px/0.1em and the
   ÖRNEK chip ~62px, plus two 10px gaps: that leaves ~190px for "Örnek kampanya
   · 4 bölge, İstanbul", which needs ~215px. It ellipsises — i.e. the panel
   silently stops saying what it is a sample OF, which is the one thing that
   label exists to say. English is no better: "CAMPAIGN SCORECARD" is wider than
   the Turkish tag.

   THE OTHER FIX WAS REJECTED. Shortening the strings ("Örnek · Kadıköy") buys
   ~80px, which is enough at 1440 and not at 1024 — it trades a visible defect
   for a defect at one breakpoint, and it shortens an HONESTY LABEL to solve a
   layout problem. Wrapping costs one 18px row per panel, is correct in both
   languages at every width, and keeps TR and EN on one layout.

   (0,3,0) on the two figure classes, so it beats ng-shared's (0,2,0) base and
   its (0,2,0) mobile block without touching either; the mobile padding there
   still applies.
   ========================================================================== */
.ng-v2 .ng-dopen__fig .ng-out__bar,
.ng-v2 .ng-board__fig .ng-out__bar{
  flex-wrap:wrap;
  gap:6px 10px;
}
.ng-v2 .ng-dopen__fig .ng-out__tag,
.ng-v2 .ng-board__fig .ng-out__tag{ flex:1 1 auto; }
.ng-v2 .ng-dopen__fig .ng-out__meta,
.ng-v2 .ng-board__fig .ng-out__meta{
  order:3; flex:1 0 100%;
  white-space:normal; overflow:visible; text-overflow:clip;
}


/* ==========================================================================
   4. SECTION 20 — .ng-vs, THE TWO FACING COLUMNS
   ==========================================================================
   The client's four "Sunduğumuz Değerler" titles. They used to be four
   .ng-card--link tiles in a .ng-grid--2 under two h3 sub-heads. Same titles,
   same descriptions, same destinations; the shape changed because a CARD says
   "here is an option" and these four are not alternatives to each other. They
   are two pairs — the audience side and the return side — and the PAIRING is
   the content. Two columns divided by one rule say that; a 2x2 grid of raised
   boxes says four of something.

   THE SPINE IS A BORDER ON THE SECOND COLUMN, not a filled gap, so the stacked
   layout does not strand a dangling rule — the same reasoning §15c uses for
   .ng-facts and fmcg's rail uses for its cells.

   THE WHOLE ROW IS THE ANCHOR: no repeated "daha fazla bilgi" line, one link
   per row, one accessible name per link, and a tap target over 100px tall at
   every width. That is what .ng-card--link exists for and it survives the move
   off the card.
   ========================================================================== */
.ng-v2 .ng-vs__grid{
  margin-top:34px;
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:34px;
}
@media (min-width:900px){
  .ng-v2 .ng-vs__grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:0;
  }
  .ng-v2 .ng-vs__col{
    padding:0 36px;
    border-left:1px solid var(--ng-hairline);
  }
  .ng-v2 .ng-vs__col:first-child{ padding-left:0; border-left:0; }
  .ng-v2 .ng-vs__col:last-child{ padding-right:0; }
}
@media (max-width:899px){
  /* Stacked, the spine becomes a rule between the two halves. */
  .ng-v2 .ng-vs__col + .ng-vs__col{
    padding-top:30px;
    border-top:1px solid var(--ng-hairline);
  }
  /* The 46ch measure is right for a 470px column and wrong for a 720px one:
     at 768 the intro broke at ~460px while the rows under it ran the full
     width, so the head of each half looked indented by accident. Seen in the
     768 screenshot. */
  .ng-v2 .ng-vs__intro{ max-width:none; }
}
.ng-v2 .ng-vs__col{ min-width:0; }
.ng-v2 .ng-vs__k{
  margin:0 0 10px;
  color:var(--ng-accent);             /* 5.45:1 on the ground */
}
/* Doubled class: the theme's `.content-wrapper h?:not(:first-child)` at (0,2,2)
   sets margin-top:50px, and this h3 is not the first child of its column — the
   eyebrow is — so the selector does match it. §11 of ng-shared, applied to a
   page-level heading. */
.ng-v2 .ng-vs__q.ng-vs__q{
  margin:0;
  font-size:22px; line-height:1.25;
  letter-spacing:-0.012em;
  color:var(--ng-ink);
}
/* The two intro sentences are the ones that used to be the masthead aside's
   bullet list. They are the hub question's two halves, so they belong at the
   head of the two halves of the page. */
.ng-v2 .ng-vs__intro{
  margin:12px 0 0;
  font-size:15px; line-height:1.6;
  color:var(--ng-muted);
  max-width:46ch;
}
.ng-v2 .ng-vs__items{
  list-style:none;
  margin:24px 0 0; padding:0;
}
.ng-v2 .ng-vs__item{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  column-gap:16px;
  align-items:start;
  padding:22px 0;
  border-top:1px solid var(--ng-hairline);
  text-decoration:none;
  color:var(--ng-ink);
}
.ng-v2 .ng-vs__n{
  padding-top:2px;
  font-family:var(--ng-font-label); font-weight:600;
  font-size:12px; line-height:1.35; letter-spacing:.1em;
  text-transform:none;                /* authored pre-uppercased: i -> İ */
  color:var(--ng-accent);
  font-variant-numeric:tabular-nums;
}
.ng-v2 .ng-vs__main{ display:block; min-width:0; }
.ng-v2 .ng-vs__meta{
  display:block;
  font-family:var(--ng-font-label); font-weight:600;
  font-size:12px; line-height:1.35; letter-spacing:.1em;
  text-transform:none;
  color:var(--ng-muted);
}
.ng-v2 .ng-vs__name.ng-vs__name{
  margin:8px 0 0;
  font-family:var(--ng-font-display); font-weight:600;
  font-size:19px; line-height:1.3;
  letter-spacing:-0.01em;
  color:var(--ng-ink);
  transition:color .16s cubic-bezier(.25,.46,.45,.94);
}
.ng-v2 .ng-vs__text{
  display:block;
  margin-top:9px;
  font-size:15px; line-height:1.62;
  color:var(--ng-muted);              /* 6.01:1 on the ground */
}
/* A BLOCK, NOT AN INLINE ROW, and the arrow is inside it. As a flex sibling the
   arrow was pushed onto a line of its own when a long destination label wrapped
   — the finding the fuel leaf recorded for .ng-offer__to. Inline it flows with
   the last word, which is where an arrow belongs. */
.ng-v2 .ng-vs__to{
  display:block;
  margin-top:14px;
  font-family:var(--ng-font-display); font-weight:600;
  font-size:14px; line-height:1.3;
  color:var(--ng-accent);             /* 5.45:1 on the ground */
}
.ng-v2 .ng-vs__to .ng-arrow{ margin-left:8px; }
@media (any-hover:hover){
  /* any-hover only: on a touch screen :hover sticks after the tap and leaves
     the row highlighted until the user taps somewhere else. */
  .ng-v2 .ng-vs__item:hover .ng-vs__name{ color:var(--ng-accent); }
  .ng-v2 .ng-vs__item:hover .ng-arrow{ transform:translateX(4px); }
}
.ng-v2 .ng-vs__item:focus-visible .ng-vs__name{ color:var(--ng-accent); }


/* ==========================================================================
   5. SECTION 30 — .ng-board, THE FORECAST/ACTUAL SCOREBOARD
   ==========================================================================
   The panel and its reading notes, side by side on the mist band.

   THE NOTES ARE NOT A SECOND PLATE. They used to be .ng-out__foot inside the
   white panel; here they sit on the sunken surface with a rule down their left
   edge. Two surface roles on this site, and only two: raised (white + hairline
   + shadow, holds text) and sunken (mist, holds white chrome). A second white
   plate beside the first would have made one artefact read as two.

   62/38 AND NO COLUMN GAP. The gap is the rail's own left padding, so the
   border sits exactly on the column boundary. At 1440 that leaves the panel
   ~694px, which puts the comparison table at the width §6's 22% column hint was
   measured against; at 960 it is ~560px, still two clear numeric columns.
   ========================================================================== */
.ng-v2 .ng-board__grid{
  margin-top:30px;
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:26px;
  align-items:start;
}
@media (min-width:960px){
  .ng-v2 .ng-board__grid{
    grid-template-columns:minmax(0,62fr) minmax(0,38fr);
    gap:0;
  }
  .ng-v2 .ng-board__read{
    padding-left:40px;
    border-left:1px solid var(--ng-hairline);
  }
}
.ng-v2 .ng-board__fig{ margin:0; }
/* The panel is the page's centrepiece now that it is not sharing a band, so it
   gets a little more interior air than ng-shared's 18/16/20 default. */
.ng-v2 .ng-board__fig .ng-out__body{ padding:20px 20px 24px; }
.ng-v2 .ng-board__read{ min-width:0; }
.ng-v2 .ng-board__readlabel{
  margin:0 0 14px;
  color:var(--ng-accent);             /* 4.92:1 on mist */
}
.ng-v2 .ng-board__p{
  margin:0 0 14px;
  font-size:15px; line-height:1.65;
  color:var(--ng-muted);              /* 5.42:1 on mist */
}
.ng-v2 .ng-board__p:last-child{ margin-bottom:0; }


/* ==========================================================================
   6. .ng-fc — FORECAST BESIDE ACTUAL
   ==========================================================================
   THE ONE COMPONENT ON THIS PAGE THAT IS NOT IN THE PATTERN LIBRARY, and the
   reason is in the content, not the styling: advertising is a loop, and a loop
   needs two columns of the same measure. A key/value report (akaryakit's
   .ng-env) can say what a place is like; it cannot say "we expected 112 and got
   103, so the budget moved".

   IT IS A REAL <table>, not a grid of divs. Three rows x two measures with
   column headers IS tabular data: a screen reader announces "Dönüşüm endeksi,
   GERÇEKLEŞEN, 103" only if the header association exists, and it does not
   exist in a div grid without a pile of ARIA that would be a reimplementation
   of <table>.

   THEME DEFENCE. Neuros ships, at char ~8,795 of css/theme.css:
       body .content-wrapper table tr td, … tr th { border:1px solid; padding:8px 15px }   (0,1,4)
       body .content-wrapper table:not(:first-child) { margin-top:2rem }                    (0,2,2)
   The first loses to `.ng-v2 .ng-fc th` (0,2,1) on class count. The second is
   beaten by the doubled class (0,3,0), the same idiom §11 of ng-shared uses for
   headings — without it the table would sit 32px below its own context line.

   NO RED/GREEN ON THE DELTAS, deliberately. Direction is not goodness here: the
   budget row going DOWN is the correct outcome of the two rows above it, so
   colouring "−6 puan" as a loss would be wrong as well as inaccessible. All
   three deltas are muted and the reading rail carries the meaning.

   AUTO TABLE LAYOUT, not fixed. At 390 the panel body is ~314px and the widest
   header, "GERÇEKLEŞEN" at 11px/0.1em, is ~92px; a fixed 1fr/1fr/1fr would give
   the measure column 105px and wrap "Etkileşim endeksi" onto three lines. Auto
   lets the two numeric columns take exactly what they need and gives the rest
   to the measure.
   ========================================================================== */
.ng-v2 .ng-fc__ctx{
  margin:-6px 0 16px;
  font-family:var(--ng-font-label); font-weight:500;
  /* .09em, not .08em. ng-page-check exempts a label when computed
     letter-spacing / font-size >= 0.08, and 12px x 0.08em lands EXACTLY on the
     threshold — one float rounding the wrong way and a context line the page
     needs would be reported as body copy under the floor. .09 costs nothing and
     is the value the other two tracked micro-labels on this page already use. */
  font-size:12px; line-height:1.4; letter-spacing:.09em;
  text-transform:none;                /* authored pre-uppercased: i -> İ */
  color:var(--ng-muted);
}
.ng-v2 .ng-fc.ng-fc{
  width:100%;
  margin:0;
  border-collapse:collapse;
}
.ng-v2 .ng-fc th,
.ng-v2 .ng-fc td{
  border:0;
  padding:13px 0;
  vertical-align:baseline;
  background:transparent;
}
.ng-v2 .ng-fc thead th{ padding-top:0; padding-bottom:9px; }
.ng-v2 .ng-fc tbody th,
.ng-v2 .ng-fc tbody td{ border-top:1px solid var(--ng-hairline); }

/* The row header: the measure being compared. A sentence fragment that is read,
   so it takes the 14px floor rather than the label exception. font-weight is
   restated because the theme sets `table tbody th{font-weight:600}`. */
.ng-v2 .ng-fc .ng-fc__k{
  text-align:left;
  padding-right:12px;
  font-family:var(--ng-font-body);
  font-weight:400;
  font-size:15px; line-height:1.45;
  color:var(--ng-muted);
}
/* The column headers. 11px at .1em (ratio .10) — tracked labels by
   measurement — authored ALREADY UPPERCASE with text-transform:none, because
   the case engine maps i->I and would print "ÖNGÖRU"/"GERÇEKLEŞEN" wrong. */
.ng-v2 .ng-fc .ng-fc__c{
  text-align:right;
  white-space:normal;
  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);
}
/* The corner cell. It carries ONLY .ng-fc__hk, never .ng-fc__k as well.
   The first build put both classes on it so it could inherit the left
   alignment, and the mobile block's `.ng-fc__k{font-size:15px}` — which sits
   later in this file — then beat it at equal specificity and printed "Ölçüm" at
   15px next to two 11px tracked captions. Two classes on one element whose
   rules are ordered by file position is a fight waiting to happen; the corner
   now declares its own alignment and padding and cannot be reached by any __k
   rule at all. Found in the 390 screenshot; ng-page-check reported the page
   clean before and after, because 15px is over the reading floor and a
   heading that is too big is not a defect any assertion tests for. */
.ng-v2 .ng-fc .ng-fc__hk{
  text-align:left;
  padding-right:12px;
  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-fc .ng-fc__v{
  text-align:right;
  white-space:nowrap;
}
/* A WIDTH HINT ON THE TWO NUMERIC COLUMNS, NOT A FIXED LAYOUT.
   Found in the 768 screenshot of the previous composition, where each panel
   took the full 712px: pure auto layout sized the numeric columns to their
   content (~90px) and handed the remaining ~530px to a measure column whose
   longest string is "Dönüşüm endeksi" at ~120px. The result was a label on the
   far left and its two numbers 350px away on the far right, which is a row a
   reader has to track with a finger. ng-page-check reported the page clean at
   768 before and after — a gap is not a defect any assertion tests for.

   22% is a hint, not a constraint: auto layout treats a percentage as a
   preferred width and still expands a column whose content needs more, which is
   what keeps "GERÇEKLEŞEN" (~92px at 11px/0.1em) on one line at 390 where 22%
   is only ~69px. Fixed layout was the alternative and was rejected for exactly
   that case — it would have wrapped the longest column header on the narrowest
   screen, in the language whose header is longest.

   The panel is ~694px wide in the new composition, i.e. inside the range this
   hint was measured for. */
.ng-v2 .ng-fc .ng-fc__c,
.ng-v2 .ng-fc .ng-fc__v{ width:22%; padding-left:14px; }
/* 21px, up from 18px: this table is now the whole of section 30 rather than
   the right half of a two-panel band, and the numerals are the thing the
   section exists to show. --ng-ink at every size, so no accent-tier rule is
   in play. */
.ng-v2 .ng-fc__num{
  display:block;
  font-family:var(--ng-font-display); font-weight:700;
  font-size:21px; line-height:1.2;
  letter-spacing:-0.01em;
  color:var(--ng-ink);
  font-variant-numeric:tabular-nums;
}
/* 12px at .09em (ratio .09) clears the tracked-label threshold. <i> here is a
   delta chip, not emphasis, so font-style is reset. */
.ng-v2 .ng-fc__d{
  display:block;
  margin-top:4px;
  font-style:normal;
  font-family:var(--ng-font-label); font-weight:500;
  font-size:12px; line-height:1.3; letter-spacing:.09em;
  text-transform:none;
  color:var(--ng-muted);
  font-variant-numeric:tabular-nums;
}

/* The anchor target. ng-shared §14 sets 104px; the header is shorter below
   1364, where the mega-menu row collapses. */
@media (max-width:1364px){
  .ng-v2 .ng-out-band{ scroll-margin-top:84px; }
}


/* ==========================================================================
   7. SECTION 40 — .ng-close__rail, THE CLOSING DECISION
   ==========================================================================
   The dark band is assigned to the TOP of this page, so the closing decision
   cannot be the indigo slab 76 of 76 pages end on — a second dark band would
   put the page straight back into the silhouette this pass exists to break,
   and would make the opening inversion mean nothing.

   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. The shape is akaryakit's, copied rather than reinvented; three pages
   have now wanted it, which is PATTERNS.md's own threshold for promoting it
   into ng-shared.css — a note for whoever goes next, not something a page
   sheet may do.

   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 steps is the reader deciding whether to start them.
   ========================================================================== */
.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, as above. This h2 is NOT the
   first child of its block — the eyebrow is — so `h2:not(:first-child)` does
   match it, unlike the section heads. */
.ng-v2 .ng-close__title.ng-close__title{
  margin:14px 0 0;
  font-size:clamp(1.6rem, 3.2vw, 2.1rem);
  line-height:1.15;
  letter-spacing:-0.02em;
  max-width:22ch;
  text-wrap:balance;
}
.ng-v2 .ng-close__lede{
  margin:14px 0 0;
  font-size:17px; line-height:1.6;
  color:var(--ng-muted);              /* 5.42:1 on mist */
  max-width:54ch;
}
.ng-v2 .ng-close__side{
  display:flex; flex-direction:column;
  align-items:flex-start;
  gap:4px;
}
@media (min-width:900px){
  .ng-v2 .ng-close__side{ align-items:flex-end; text-align:right; }
}
.ng-v2 .ng-close__actions{ margin-top:0; }
/* 14px for the same reason .ng-cta__meta is: a phone number and an address are
   read and copied, and .04em tracking does not earn the label exception. */
.ng-v2 .ng-close__meta{
  margin:16px 0 0;
  font-family:var(--ng-font-label); font-weight:500;
  font-size:14px; line-height:1.6; letter-spacing:.04em;
  color:var(--ng-muted);
}

.ng-v2 .ng-how__note{
  margin-top:34px;
  max-width:80ch;
}


/* ==========================================================================
   8. RESPONSIVE
   ng-mobile.css §7 carries every 44px hit area (crumbs, buttons, pills, tel)
   at <=767, at 768–1023 and at exactly 1024. The one interactive thing this
   page adds is .ng-vs__item, a row over 100px tall at every width, so this
   block is type and rhythm only.
   ========================================================================== */

@media (max-width:1023px){
  /* Stacked masthead. The panel becomes a full-width band under the counts
     strip, which is the right order: a reader who has taken the headline and
     the numbers is exactly the person who then wants the ranking. */
  .ng-v2 .ng-dopen .ng-masthead__title.ng-masthead__title{ max-width:20ch; }
  .ng-v2 .ng-dopen__lede{ max-width:64ch; }
}

@media (max-width:959px){
  .ng-v2 .ng-out-band__note{ text-align:left; }
}

/* THE ONE WIDTH WHERE THE TABLE SPRAWLS. Between 768 and 959 the board is
   stacked, so the panel takes the whole 720px container and 22% numeric
   columns leave a 404px measure column — "Etkileşim endeksi" on the far left
   and 118 four hundred pixels away on the right, a row a reader has to track
   with a finger. Above 960 the panel is 62% of the container and never gets
   that wide; below 768 auto layout sizes the numeric columns to
   "GERÇEKLEŞEN" itself and the percentage stops binding. So the correction
   belongs to this range and only this range.
   Seen in the 768 screenshot; ng-page-check reported clean at 768 before and
   after, because a gap is not a defect any assertion tests for. */
@media (min-width:768px) and (max-width:959px){
  .ng-v2 .ng-fc .ng-fc__c,
  .ng-v2 .ng-fc .ng-fc__v{ width:30%; }
}

@media (max-width:767px){
  /* Mobile reading floor, 16px, for every sentence this page adds. ng-shared
     already lifts .ng-note and .ng-steps__body; these are the page's own. */
  .ng-v2 .ng-dopen__askbody,
  .ng-v2 .ng-vs__intro,
  .ng-v2 .ng-vs__text,
  .ng-v2 .ng-board__p,
  .ng-v2 .ng-close__lede{ font-size:16px; }

  .ng-v2 .ng-dopen.ng-dopen{ padding-block:28px 56px; }
  .ng-v2 .ng-dopen__quote.ng-dopen__quote{ font-size:18px; }

  .ng-v2 .ng-vs__q.ng-vs__q{ font-size:20px; }
  .ng-v2 .ng-vs__item{ padding:20px 0; column-gap:12px; }
  .ng-v2 .ng-vals__note,
  .ng-v2 .ng-how__note,
  .ng-v2 .ng-out-band__note{ max-width:none; }

  /* The ranking at 390. Three columns still fit — 11px rank + name + 46px score
     is ~300px of the 314px body — but the row gap comes down so four rows plus
     a footnote do not push the panel past one screen. The place name goes to
     16px: it is a word a visitor READS, so it takes the mobile reading floor. */
  .ng-v2 .ng-aud{ gap:14px; }
  .ng-v2 .ng-aud__row{ gap:10px; }
  .ng-v2 .ng-aud__name{ font-size:16px; }

  /* Same reasoning in the table: the measure is read, the numbers are the
     answer. The column headers stay at 11px — they are tracked captions. */
  .ng-v2 .ng-fc__num{ font-size:19px; }
  .ng-v2 .ng-fc th,
  .ng-v2 .ng-fc td{ padding:11px 0; }
  .ng-v2 .ng-fc .ng-fc__k{ font-size:15px; padding-right:8px; }
  .ng-v2 .ng-fc .ng-fc__hk{ padding-right:8px; }
  /* 10px, not 14: at 314px of panel body the gutter is competing with
     "GERÇEKLEŞEN", which needs ~92px of its own. Still a clear gap, still
     enough that the two headers cannot read as one word — they rendered as
     "ÖNGÖRÜGERÇEKLEŞEN" without it, seen in a 390 screenshot while the page
     reported clean. */
  .ng-v2 .ng-fc .ng-fc__c,
  .ng-v2 .ng-fc .ng-fc__v{ padding-left:10px; }
  .ng-v2 .ng-board__fig .ng-out__body{ padding:16px 14px 18px; }

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


/* ==========================================================================
   9. 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. The only
   motion this page adds is the .ng-vs__item hover, which is a colour change and
   a 4px arrow nudge on the shared .ng-arrow, already covered there. The ranking
   bars are static widths, not transitions, precisely so 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 the missing rule.
   ========================================================================== */


/* ==========================================================================
   10. SECTION 20 — THE TWO SAMPLE OUTPUTS UNDER THE LEDGER
   ==========================================================================
   Two of the client's four supplied artefacts, each in its own
   .ng-figband--split row with the copy left and the figure right, the two rows
   consecutive at the foot of section 20.

   WHY THEY ARE DOWN THERE. This page is E-DARK: the dark masthead is the one
   thing that tells it apart at a glance, and a white picture band stacked on
   top of it cancels that. And the page's dominant content shape is the
   two-column comparison in .ng-vs__grid — pictures above it would push the
   comparison off the first screen and the page would stop being the page two
   previous passes built. So the pictures start in the second band, after the
   four titles have been named.

   NEITHER ROW IS FLIPPED. Both figures line up down the same edge, so the pair
   reads as two views of one map rather than as a zig-zag. The alternating
   left/right variant is /cozumler/optimizasyon/'s and it is spent.

   NO WIDTH CAP HERE, AND THAT IS DELIBERATE. §17's --split gives the figure
   56fr of 44/56; at the 1120px container that is 627px, comfortably under the
   assets' native 780px, so the raster is never upscaled. A cap would only be
   needed for a full-width or >780px frame, and this page has none.

   The layout is ng-shared.css §17. Only the copy column's own type is here,
   because what goes beside a figure is a property of the page, not of the
   primitive.

   THIS SECTION IS MOBILE-FIRST AND EVERY QUERY IN IT IS min-width. §8 above
   scopes a block to max-width:1023px; that is an older item belonging to the
   scoreboard, it is left exactly as it is, and it is not a model to copy.
   ========================================================================== */

/* Wide gaps. Each row is a kicker, a question, a paragraph and a 540px-tall
   artefact; any tighter and the second row's copy starts reading as a caption
   for the first row's picture. The first row gets more again, because what is
   above it is the last ruled item of the ledger and the two must not merge. */
.ng-v2 .ng-vs__figrow{ margin-top:36px; }
.ng-v2 .ng-vs__grid + .ng-vs__figrow{ margin-top:40px; }
@media (min-width:768px){
  .ng-v2 .ng-vs__figrow{ margin-top:44px; }
  .ng-v2 .ng-vs__grid + .ng-vs__figrow{ margin-top:52px; }
}
@media (min-width:960px){
  .ng-v2 .ng-vs__figrow{ margin-top:56px; }
  .ng-v2 .ng-vs__grid + .ng-vs__figrow{ margin-top:68px; }
}

/* THE KICKER SITS ABOVE THE QUESTION and names the axes the artefact is drawn
   on. 12px at .1em, the same spec as .ng-vs__n and .ng-vs__meta in the ledger,
   which is the measured tracked-label floor rather than an allowlist. Accent,
   like .ng-vs__k, because these read as the heads of a band and not as row
   metadata. 5.45:1 on the ground, same as .ng-vs__k. */
.ng-v2 .ng-vs__figmeta{
  margin:0 0 12px;
  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 -> İ */
  color:var(--ng-accent);
}

/* THE HEADING IS THE QUESTION, NOT THE TITLE. Each asset bakes its own title
   in at 28px and an h3 restating it 20px away is a stutter; the title is on
   the page as text once, in the figcaption. 20px rather than the 22px of
   .ng-vs__q, so the two column heads above stay the loudest thing in the
   section and the ledger keeps the section's shape.
   Doubled class = the theme-margin defence: `.content-wrapper h?:not(
   :first-child)` sets margin-top:50px at (0,2,2) and this h3 is not the first
   child of its column — the kicker is. Same call as .ng-vs__q. */
.ng-v2 .ng-vs__figq.ng-vs__figq{
  margin:0;
  font-family:var(--ng-font-display); font-weight:600;
  font-size:20px; line-height:1.28;
  letter-spacing:-0.012em;
  color:var(--ng-ink);
  text-wrap:balance;
}

/* THE PARAGRAPH CARRIES THE LEGEND IN WORDS. A 780px asset renders at 342px at
   a 390 viewport, so its 10px legend comes out near 5px and nobody reads it;
   the four audience steps and the two marker classes are therefore stated
   here, in prose, and the picture is never the only carrier of them.
   15px matches .ng-vs__text so the two halves of the section read as one
   voice. No max-width: below 960 the row stacks and the copy takes the whole
   container, and a ch measure there indents the head of the block by accident
   — the finding already recorded for .ng-vs__intro at 768. */
.ng-v2 .ng-vs__figp{
  margin:12px 0 0;
  font-size:16px; line-height:1.62;   /* mobile reading floor first */
  color:var(--ng-muted);              /* 6.01:1 on the ground */
}
@media (min-width:768px){
  .ng-v2 .ng-vs__figp{ font-size:15px; }
}

/* The section footnote is about the four titles, not about the two pictures,
   so it needs enough air after the last figure not to read as a third caption. */
.ng-v2 .ng-vs__figrow + .ng-vals__note{ margin-top:32px; }
@media (min-width:768px){
  .ng-v2 .ng-vs__figrow + .ng-vals__note{ margin-top:40px; }
}