/* ==========================================================================
   /sektorler/kamu/  +  /en/sectors/public/     ONE SHEET FOR THE PAIR
   (the English page gets this file byte-for-byte via --css-from=kamu)

   VARIANCE PASS. Assignment from variance-plan.json:

       opening   A-SPLIT      headline left, plate right
       dark      CLOSE        the indigo band is the last section, and the only
                              dark thing on the page
       sections  5            masthead · dossier · ledger · ladder · CTA

   A-SPLIT IS THE ARCHETYPE THAT KEEPS THE OLD SHAPE, which is exactly why this
   page cannot coast on it. ARCHETYPES.md gives A-SPLIT to four pages out of
   twenty-eight so that it reads as one deliberate treatment rather than as the
   house default it used to be on all 76. Two things therefore carry the
   difference here, and both are below:

     1. THE PLATE IS THE PAGE'S TABLE OF CONTENTS, not a static quotation. The
        hub asks a two-part question; the plate quotes it and then offers the
        two parts as two LINKS into the two artefacts that answer them. §2.

     2. THE DOMINANT CONTENT SHAPE IS A REGISTER, NOT A CARD GRID. There is not
        one .ng-card on this page. What a public institution deals in is a
        register and a needs assessment, so section 20 is a real <table> with a
        totals row plus a demand-against-supply balance (§3, §4), and the
        client's four analysis titles are ruled ledger rows (§5). The sample
        output also MOVED to position 2, ahead of the client's value list, which
        is the reverse of the order every other leaf on this site uses.

   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)
   live in ng-shared.css §14. Anything of theirs still declared below 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.

   .ng-inv (the old bar-and-fraction list) is GONE from this sheet: its content
   is now the register table, and an orphaned component is how the next person
   is misled. Same for .ng-out__label--mid, which existed only to separate two
   stacked dl blocks that now sit side by side.
   ========================================================================== */


/* ==========================================================================
   1. THE SPLIT
   ========================================================================== */

@media (min-width:960px){
  /* 56/44 rather than ng-shared's 58/42, matching the fuel and real-estate
     leaves. The plate holds a QUOTE with a 3px rule and a hanging indent, and
     the Turkish question ("Kent envanteri nerede duruyor, yatırım fizibil
     mi?") is a two-clause sentence — at 42% it broke after "duruyor," and read
     as two separate questions rather than one. The English question is longer
     still ("Where does the city inventory stand, and is the investment
     feasible?") and needs the same room. */
  .ng-v2 .ng-lead .ng-masthead__inner{
    grid-template-columns:minmax(0,56fr) minmax(0,44fr);
  }
}


/* ==========================================================================
   2. .ng-dsr — THE PLATE IS THE FILE
   Built on ng-shared.css §13b's .ng-out, NOT on §13a's .ng-aside.

   >>> THIS WAS DECIDED BY PUTTING TWO PAGES SIDE BY SIDE, WHICH IS THE ONLY <<<
   >>> TEST THIS PASS IS ACTUALLY JUDGED ON.                                 <<<
   The first build of this page used .ng-aside like every other leaf. Rendered
   next to /sektorler/sigorta/ — the other A-SPLIT page in this group — the two
   first screens were the same picture with different words in it: same crumbs,
   same pill eyebrow, same two-line headline with an accent phrase, same lede,
   same two buttons, same three-number proof strip, and the same accent-ruled
   quotation in the same mist box on the right. Every check reported clean. That
   is the defect this pass exists to remove, reproduced INSIDE the archetype
   that was meant to fix it — A-SPLIT keeps the old geometry, so on an A-SPLIT
   page the plate is the only place a difference can live.

   So the plate takes the chrome of the artefact the page is about: a raised
   white panel with a labelled bar, the same .ng-out chrome as the two dossier
   panels in section 20. A visitor sees a FILE in the first viewport before
   reading a word of it. The alternative — a third surface role, or a tinted
   plate with a new border treatment — was rejected: the contract has two
   surface roles and the point is to differ in COMPOSITION, not in palette.

   AND THE PLATE IS NAVIGABLE. The hub asks a two-part question and this page
   answers it with two artefacts, so the two parts are links into them.
   Public-sector visitors arrive with one of the two halves, not both: the
   inventory owner and the capital-programme owner are different people in
   different departments.

   THE ARROW IS ↓, NOT →. It points down the page, which is where the link
   goes. A → beside an in-page anchor promises a new page.

   height:auto CANCELS .ng-out's height:100%. That declaration exists so two
   panels side by side in a grid close on one baseline; here the plate's grid
   area is as tall as the copy column, so height:100% would paint 200px of
   empty white under the last entry — which ng-page-check counts as dead air
   and which is the same failure ng-shared.css §13a's align-self:start avoids
   for .ng-aside.
   ========================================================================== */
.ng-v2 .ng-dsr{ height:auto; }
@media (min-width:960px){
  .ng-v2 .ng-dsr{ align-self:start; margin-top:34px; }
}
/* The hub's own words. Same treatment ng-shared.css §13a gives .ng-aside__quote
   — this is the site's one idiom for a quoted line and inventing a second would
   be drift, not variance. The ::before/::after reset is there because Neuros
   hangs a decorative glyph off blockquotes in some contexts and a stray “ in
   front of the hub's own words would read as scare quotes.

   >>> THE DOUBLED CLASS ON margin IS NOT DECORATION. <<< Measured on the live
   page with `ng-shot styles`: computed margin-bottom was 40px where 0 was
   authored. Neuros ships

       body .content-wrapper blockquote:not(:last-child){ margin-bottom:2.5rem }

   at (0,2,2), and `:not()` counts its argument, so it beats a plain
   `.ng-v2 .ng-dsr__q` at (0,2,0) — the same trap as the
   `h2:not(:first-child){margin-top:50px}` rule that put 500px of unasked-for
   air on the homepage and as the table margins ng-shared.css §15b defends
   against. ng-shared.css §11 says the doubled-class idiom is for headings; it
   is for anything the theme touches with a :not(). The gap is visible in a
   screenshot and no check on this site reports it. */
.ng-v2 .ng-dsr__q.ng-dsr__q{
  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:18px; line-height:1.45;
  color:var(--ng-ink);
}
.ng-v2 .ng-dsr__q::before,
.ng-v2 .ng-dsr__q::after{ content:none; }
.ng-v2 .ng-dsr__lede{
  margin:16px 0 0;
  font-size:15px; line-height:1.6;
  color:var(--ng-muted);              /* 6.21:1 on white */
}
@media (max-width:767px){
  .ng-v2 .ng-dsr__q{ font-size:17px; }
  .ng-v2 .ng-dsr__lede{ font-size:16px; }   /* mobile reading floor */
}
.ng-v2 .ng-dsr__list{
  list-style:none;
  margin:18px 0 0;
  padding:0;
  display:grid;
  gap:0;
}
.ng-v2 .ng-dsr__item{
  padding-top:14px;
  margin-top:14px;
  border-top:1px solid var(--ng-hairline);
}
.ng-v2 .ng-dsr__item:first-child{
  margin-top:0;
}
/* The link is the ENTRY'S TITLE ROW, not the whole entry. The body sentence
   below it is the client-facing description of what the reader will land on;
   swallowing it into the anchor would make the accessible name a 24-word
   paragraph, and the row is already a 44px target without it. */
.ng-v2 .ng-dsr__link{
  display:flex;
  align-items:center;
  gap:10px;
  min-height:44px;               /* a 44x44 box at EVERY width, not only mobile:
                                    this is a one-line link in a narrow plate,
                                    which is the exact shape that measured 21px
                                    on the crumbs and 17px on the old value
                                    cards. Costs nothing at desktop. */
  text-decoration:none;
  color:var(--ng-ink);
}
.ng-v2 .ng-dsr__n{
  flex:none;
  font-family:var(--ng-font-label); font-weight:600;
  font-size:12px; line-height:1.3; letter-spacing:.1em;
  text-transform:none;                /* strings are authored pre-uppercased */
  color:var(--ng-accent);             /* 5.64:1 on white */
  font-variant-numeric:tabular-nums;
}
.ng-v2 .ng-dsr__name{
  flex:1 1 auto; min-width:0;
  font-family:var(--ng-font-display); font-weight:600;
  font-size:16px; line-height:1.3;
  color:var(--ng-ink);
}
.ng-v2 .ng-dsr__link .ng-arrow{
  flex:none;
  color:var(--ng-accent);
  font-size:15px;
}
@media (any-hover:hover){
  /* any-hover only: on a touch screen :hover sticks after the tap. Down, not
     right — see the note above the block. */
  .ng-v2 .ng-dsr__link:hover .ng-dsr__name{ color:var(--ng-accent); }
  .ng-v2 .ng-dsr__link:hover .ng-arrow{ transform:translate3d(0,3px,0); }
}
.ng-v2 .ng-dsr__link:focus-visible .ng-dsr__name{ color:var(--ng-accent); }
.ng-v2 .ng-dsr__body{
  margin:6px 0 0;
  font-size:14px; line-height:1.55;
  color:var(--ng-muted);              /* 6.21:1 on white */
}
@media (max-width:767px){
  .ng-v2 .ng-dsr__body{ font-size:16px; }   /* mobile reading floor */
  .ng-v2 .ng-dsr__name{ font-size:17px; }
}


/* ==========================================================================
   3. .ng-reg — THE REGISTER
   The page's dominant shape, built on ng-shared.css §15b's .ng-dtable. Four
   columns, six rows, a <tfoot> that totals them.

   WHY A TABLE AND NOT THE BAR LIST IT REPLACES. The finding in this artefact is
   ARITHMETIC — 410+128+96+34+21+12 = 701, of which 688 carry a coordinate and
   13 do not — and a reader checks arithmetic in columns. The previous version
   said the same thing as six rows of "402/410" fractions with a bar each, which
   is a chart of one number per row; you could not add it up by eye and the
   totals only appeared in a sentence underneath. A <tfoot> is where a total
   belongs, and <th scope="row"> plus <th scope="col"> means a screen reader
   announces "Park ve yeşil alan, haritada değil, 5" instead of four bare
   numbers in a row.

   THE SHARE BAR SURVIVED THE MOVE, inside the first cell under the asset name.
   It is each type's share of the 701, NOT its verified ratio: verified ratios
   would draw six bars at 95-100%, a decorative row of full bars that says
   nothing. Share of the register is what shows at a glance that stops dominate
   this inventory, which is the reason eight unverified stops matter more than
   five unverified parks.

   THE ACCENT MARKS THE ROWS WITH A GAP, not the largest row. The answer here is
   the difference between what the register claims and what is on the map. An
   institution that owns 410 stops does not need a platform to count them.
   Colour is not the only signal: the number itself is in its own labelled
   column, so a reader who sees no hue difference still gets the finding (1.4.1).

   COLUMN WIDTHS ARE HERE, NOT IN THE SHARED FILE, per §15b: which column is
   wide is a property of the content. `width` on an auto-layout table is a hint
   the browser resolves against content minimums, which is what we want —
   the numeric columns cannot go narrower than their own headers, and the name
   column absorbs whatever is left.
   ========================================================================== */
.ng-v2 .ng-reg{ scroll-margin-top:104px; }
@media (max-width:1364px){
  .ng-v2 .ng-reg{ scroll-margin-top:84px; }
}

.ng-v2 .ng-reg__table tr > :nth-child(2){ width:13%; }
.ng-v2 .ng-reg__table tr > :nth-child(3){ width:15%; }
.ng-v2 .ng-reg__table tr > :nth-child(4){ width:17%; }

/* The row subject. ng-shared sets .ng-dtable tbody th to the display face at
   16px; this adds the block layout the share bar needs under it. */
.ng-v2 .ng-reg__name{
  display:block;
}
.ng-v2 .ng-reg__share{
  display:block;
  margin-top:8px;
  max-width:260px;                    /* the bar is a share, not a length to
                                         measure against the column edge; left
                                         unbounded it stretched to 590px at 1440
                                         and read as a progress bar for the row */
  height:6px; border-radius:3px;
  background:var(--ng-surface-sunken);
  overflow:hidden;
}
.ng-v2 .ng-reg__share i{
  display:block; height:100%; border-radius:3px;
  background:var(--ng-indigo);
}
.ng-v2 .ng-reg__table tbody tr.is-gap .ng-reg__share i{ background:var(--ng-accent); }

/* Numbers are the content of this table, so they are ink and one step up from
   ng-shared's muted 15px body cell. Tabular figures are already on .ng-dtable. */
.ng-v2 .ng-reg__table tbody td{
  font-family:var(--ng-font-display); font-weight:600;
  font-size:16px; line-height:1.3;
  color:var(--ng-ink);
  vertical-align:top;
}
.ng-v2 .ng-reg__table tbody th{ vertical-align:top; }
/* A zero in the last column is the quiet case and should read as one. */
.ng-v2 .ng-reg__table tbody td:last-child{ color:var(--ng-muted); }
.ng-v2 .ng-reg__table tbody tr.is-gap td:last-child{
  color:var(--ng-accent);             /* 5.64:1 on white — 16px, so --ng-accent
                                         and never --ng-accent-display, which is
                                         reserved for 24px and up */
  font-weight:700;
}
/* The totals row. ng-shared's tfoot is a muted 14px summary line; here it is
   the row a reader checks the six above against, so it takes the display face
   and the ink. The 2px top rule is ng-shared's and is left alone. */
.ng-v2 .ng-reg__table tfoot th{
  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-reg__table tfoot td{
  font-family:var(--ng-font-display); font-weight:700;
  font-size:18px; line-height:1.2;
  letter-spacing:-0.01em;
  color:var(--ng-ink);
}


/* ==========================================================================
   4. .ng-bal — THE BALANCE
   Two key/value groups side by side inside one full-width panel: what the
   catchment's population needs on one side, what is already built on the other.

   WHY SIDE BY SIDE AND NOT STACKED. The previous version had these two dl
   blocks one above the other in a half-width panel, separated by a hairline and
   a second label, and that shape says "seven facts about a neighbourhood". The
   report is a COMPARISON — the whole finding is that 8,100 children have three
   nurseries and that the culture column reads zero — and a comparison wants the
   two sides in view at once. The panel is full container width now, so they fit.

   The divider is a border on the second column, not a gap fill, so the stacked
   case at <720 does not leave a dangling rule.
   ========================================================================== */
.ng-v2 .ng-bal{ scroll-margin-top:104px; }
@media (max-width:1364px){
  .ng-v2 .ng-bal{ scroll-margin-top:84px; }
}
.ng-v2 .ng-bal__pair{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:24px;
}
@media (min-width:720px){
  .ng-v2 .ng-bal__pair{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:0;
  }
  .ng-v2 .ng-bal__col + .ng-bal__col{
    padding-left:36px;
    border-left:1px solid var(--ng-hairline);
  }
  .ng-v2 .ng-bal__col:first-child{ padding-right:36px; }
}
/* Stacked, the second group needs the rule that the border gave it. */
@media (max-width:719px){
  .ng-v2 .ng-bal__col + .ng-bal__col{
    padding-top:22px;
    border-top:1px solid var(--ng-hairline);
  }
}
.ng-v2 .ng-bal__col{ min-width:0; }
/* The zero is the finding — same treatment the register gives its gap rows. */
.ng-v2 .ng-env__row.is-gap .ng-env__v{ color:var(--ng-accent); }

/* Both dossier panels are full container width and stack, so they need the gap
   .ng-out-band__pair would have given them. */
.ng-v2 .ng-dosya .ng-out + .ng-out{ margin-top:20px; }


/* ==========================================================================
   5. .ng-rail — THE LEDGER
   The client's four analysis titles. Ruled rows, no boxes: a left rail holding
   the index number and the destination, the title and the client's paragraph in
   the main column.

   WHY NOT CARDS. Four raised white cards is what all 28 leaves look like and it
   is the shape this pass exists to break up. Why not the fuel leaf's .ng-offer
   either: that is a dark band with the destination in a right-hand track, and
   two pages in one group reaching for the same replacement is the same failure
   one level down. Here the destination leads the row — on a public-sector page
   the reader's question about an analysis title is "whose product is this and
   do we already own it", which is answered before the description rather than
   after it.

   THE WHOLE ROW IS THE ANCHOR. Same fix .ng-card--link makes: no per-row "Daha
   Fazla Bilgi" to repeat four times, and the tap target is a 100+px row rather
   than a 109x17px line of text.

   >>> THE RAIL IS A FIXED TRACK, AND THAT WAS FIXED FROM A SCREENSHOT. <<<
   The first version sized it `max-content`, reasoning from the note in
   PATTERNS.md that a fixed 230px track on the fuel leaf had pushed a → onto a
   line of its own. But EVERY ROW IS ITS OWN GRID — there is one .ng-rail__link
   per row and grid tracks do not align between separate grids — so max-content
   resolved four different widths and the four titles started at four different
   x positions (300 / 246 / 345 / 279 measured at 1440). A ledger whose column
   edge moves per row is not a ledger. ng-page-check reported the page clean
   before and after; it is visible in the first screenshot you look at.

   Both failures are avoided at once by a fixed track PLUS a non-breaking space
   before the arrow in the markup: the label may wrap inside the track, and when
   it does the arrow wraps with the last word instead of stranding itself.
   ========================================================================== */
.ng-v2 .ng-rail{
  list-style:none; margin:0; padding:0;
}
.ng-v2 .ng-rail__item + .ng-rail__item{
  margin-top:0;
  border-top:1px solid var(--ng-hairline);
}
.ng-v2 .ng-rail__link{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:10px;
  padding:20px 0;
  text-decoration:none;
  color:var(--ng-ink);
}
@media (min-width:760px){
  .ng-v2 .ng-rail__link{
    grid-template-columns:240px minmax(0,1fr);
    column-gap:36px;
    align-items:start;
  }
}
@media (min-width:1180px){
  /* 270 fits "PRODUCT · LOCATION ANALYSIS WEB →", the longest of the eight
     destination labels across the pair, on one line at the full container. */
  .ng-v2 .ng-rail__link{ grid-template-columns:270px minmax(0,1fr); }
}
.ng-v2 .ng-rail__side{
  display:flex; align-items:baseline; gap:12px;
  min-width:0;
}
@media (min-width:760px){
  .ng-v2 .ng-rail__side{
    display:block;
    padding-top:3px;
  }
}
.ng-v2 .ng-rail__n{
  flex:none;
  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);             /* 5.35:1 on the page ground */
  font-variant-numeric:tabular-nums;
}
@media (min-width:760px){
  .ng-v2 .ng-rail__n{ display:block; margin-bottom:8px; }
}
/* 12px at .1em (ratio .10) clears ng-page-check's 0.08 tracked-label threshold
   BY MEASUREMENT, which is what it actually tests. It is a destination chip,
   glanced at, not a sentence. */
.ng-v2 .ng-rail__to{
  min-width:0;
  font-family:var(--ng-font-label); font-weight:600;
  font-size:12px; line-height:1.45; letter-spacing:.1em;
  text-transform:none;
  color:var(--ng-muted);
}
.ng-v2 .ng-rail__to .ng-arrow{ color:var(--ng-accent); }
.ng-v2 .ng-rail__main{ display:block; min-width:0; }
/* (0,3,0) doubled — the theme's `body .content-wrapper h?:not(:first-child)
   {margin-top:50px}` is (0,2,2) and beats a single class. See ng-shared.css
   §11: a page-level heading class needs the same defence. */
.ng-v2 .ng-rail__name.ng-rail__name{
  margin:0;
  font-family:var(--ng-font-display); font-weight:600;
  font-size:20px; line-height:1.3;
  letter-spacing:-0.012em;
  color:var(--ng-ink);
}
.ng-v2 .ng-rail__body{
  display:block;
  margin-top:8px;
  font-size:15px; line-height:1.62;
  color:var(--ng-muted);              /* 6.01:1 on the page ground */
  max-width:70ch;
}
@media (any-hover:hover){
  .ng-v2 .ng-rail__link:hover .ng-rail__name{ color:var(--ng-accent); }
  .ng-v2 .ng-rail__link:hover .ng-arrow{ transform:translate3d(4px,0,0); }
}
.ng-v2 .ng-rail__link:focus-visible .ng-rail__name{ color:var(--ng-accent); }

/* The attribution note — the evidence that the hub and this page say the same
   thing. A full sentence at the reading floor, not a tracked micro-label. */
.ng-v2 .ng-vals__note{
  margin-top:30px;
  max-width:92ch;
}


/* ==========================================================================
   6. RESPONSIVE
   ng-shared carries the 44px hit areas (crumbs, buttons, pills) at <=767, at
   768-1023 and at exactly 1024, and the 16px reading floor at <=767. The two
   interactive things this page adds are .ng-dsr__link, which carries its own
   min-height at every width (§2), and .ng-rail__link, whose padding alone puts
   the shortest row over 80px tall. This block is type and rhythm only.
   ========================================================================== */

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

@media (max-width:767px){
  .ng-v2 .ng-vals__name.ng-vals__name{ font-size:20px; margin-bottom:12px; }
  .ng-v2 .ng-vals__half + .ng-vals__half{ margin-top:28px; padding-top:24px; }
  /* 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 three are restated only to drop the desktop measure. */
  .ng-v2 .ng-vals__note,
  .ng-v2 .ng-how__note,
  .ng-v2 .ng-out-band__note{ max-width:none; }

  /* THE REGISTER AT 390. Container 342, panel body 314 inside it. The three
     numeric columns cannot go narrower than their own 11px headers — "HARİTADA"
     is ~57px and "NOT ON THE MAP" wraps at its spaces — so the name column
     resolves to roughly 110px and "Durak ve aktarma noktası" takes three lines.
     That is the trade this table makes at phone width, and it is the right one:
     .ng-dtable__wrap's overflow-x is a safety valve, and a column a reader has
     to scroll sideways to find is a column hidden from every phone.
     Padding comes down to buy the name column back what it can. */
  .ng-v2 .ng-reg__table th,
  .ng-v2 .ng-reg__table td{ padding-left:5px; padding-right:5px; }
  .ng-v2 .ng-reg__table tr > :nth-child(2){ width:15%; }
  .ng-v2 .ng-reg__table tr > :nth-child(3){ width:21%; }
  .ng-v2 .ng-reg__table tr > :nth-child(4){ width:21%; }
  .ng-v2 .ng-reg__share{ max-width:none; }
  .ng-v2 .ng-reg__table tfoot td{ font-size:17px; }

  .ng-v2 .ng-env__k{ font-size:15px; }
  .ng-v2 .ng-env__v{ font-size:17px; }

  .ng-v2 .ng-rail__link{ padding:18px 0; }
  .ng-v2 .ng-rail__name.ng-rail__name{ font-size:19px; }
  .ng-v2 .ng-rail__body{ font-size:16px; }   /* mobile reading floor */
}


/* ==========================================================================
   7. REDUCED MOTION
   ng-shared.css §10 already flattens .ng-card and .ng-arrow under a reduce
   preference — including cancelling ng-components.css's !important marker
   transform — and ng-components.css §8 does the same for .ng-anim. The two
   hover transforms this sheet adds are both on .ng-arrow, which that block
   already covers with `transform:none !important`. The register's share bars
   are static widths, not 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 the missing rule.
   ========================================================================== */


/* ==========================================================================
   8. THE COVER PLATE — the one content image, in section 40
   Added by the image rollout. One picture on this page and it is deliberately
   NARROW: 560px centred inside a 1120px container, not a band running the full
   width. A-SPLIT puts the opening in the plate at the top, so the picture goes
   low, in the body, and it has to earn its place quietly — the fuel leaf takes
   the wide version of this same asset family, and the difference between the
   two pages is exactly this width.

   560 also keeps the raster sharp without any of the capping the rollout
   requires above 780: the asset is 780 wide, so at 560 it downsamples. There is
   no width at any breakpoint at which this frame renders over 780.

   No column, no grid, no heading beside it — .ng-figband--split is another
   page's shape. The figure is a plain block that centres itself, which is why
   nothing here needs a media query except the rhythm below.
   ========================================================================== */

.ng-v2 .ng-how__plate{
  margin:56px auto 0;
  max-width:560px;
}

/* The caption is 68ch in ng-shared §17a, which is wider than the plate; inside
   a centred column it must fold to the plate instead, or the sentence hangs off
   the right of the picture it belongs to. */
.ng-v2 .ng-how__plate .ng-figband__cap{
  max-width:none;
}

/* Air below. .ng-how__note follows the plate and ng-shared gives it 34px, which
   is the gap it uses after a ladder — too tight under a raised, shadowed frame,
   where the note starts to read as a second caption. */
.ng-v2 .ng-how__plate + .ng-how__note{
  margin-top:46px;
}

@media (max-width:767px){
  /* Container is 342 here, so max-width never binds and the plate is simply the
     column. Only the rhythm comes down. */
  .ng-v2 .ng-how__plate{ margin-top:38px; }
  .ng-v2 .ng-how__plate + .ng-how__note{ margin-top:34px; }
}


/* ==========================================================================
   9. 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-how__plate.ng-how__plate.ng-how__plate{ margin:56px auto 0; }
@media (max-width:767px){
  .ng-v2 .ng-section .ng-container figure.ng-how__plate.ng-how__plate.ng-how__plate{ margin-top:38px; }
}