/* ==========================================================================
   NEXT GEO — ng-shared.css
   The primitive set every INNER page is built from. Loaded by the mu-plugin
   only when a page has its own `uploads/ng-assets/pages/<slug>.css`, i.e.
   never on the homepage:

       ng-foundation → ng-components → ng-mobile → ng-shared → pages/<slug>

   It therefore assumes ng-foundation.css (tokens, type scale, .ng-container,
   .ng-section, .ng-eyebrow, .ng-btn, focus ring) and ng-components.css (theme
   chrome suppression, the .ng-anim reveal states) are already in the cascade,
   and it may safely redefine anything ng-components.css declares — it loads
   later and the homepage never sees this file.

   WHY THIS DUPLICATES A FEW THINGS FROM ng-sections.css, ON PURPOSE.
   ng-sections.css is what the live homepage renders from, verified by
   screenshot across 13 sections. Pulling `card`, `section head`, `dark band`
   out from under it into a shared layer would put all 13 back in play for a
   regression that only a screenshot catches. Two hundred duplicated lines is
   the cheap option; a refactor of a verified page is not. Same reasoning the
   mu-plugin's enqueue comment already records.

   HARD RULES INHERITED FROM pages/PATTERNS.md, and honoured throughout:
     - tokens only, no literal colours (the sole exceptions below are alpha
       stops inside a mask, which carry no palette value);
     - no `!important` except where it overrides an existing `!important`
       (exactly one place: §10, and it says why);
     - Turkish labels are authored ALREADY UPPERCASE with text-transform:none;
     - nothing a visitor reads goes under 14px, 16px at mobile;
     - 44px touch targets at mobile widths.

   Sizes below were chosen against the homepage's rendered values, not
   invented: card body 15px/1.62 and card title 19px/1.3 are ng-sol; the
   section head's 44/36/30px ladder is ng-sol and ng-sektor; the pill list is
   ng-sektor__value at the 14px reading floor.
   ========================================================================== */


/* ==========================================================================
   1. BANDS
   .ng-section and its --ng-section-pad rhythm already exist in
   ng-foundation.css §7. Only the two variants it does not carry are here.
   ========================================================================== */

/* Mist band with hairline rules top and bottom. This is the SUNKEN surface
   role: it holds white chrome (cards, tiles, pills), never plain text on
   nothing. The hairlines are what stop an untethered tint on the #FAFBFF
   ground from reading as a smudge rather than as a plate — the same finding
   that produced .ng-sektor__panel on the homepage.
   (0,2,0) so it beats `.ng-v2 .ng-section`'s background at equal specificity
   by load order, and loses to `.ng-section.is-dark` (0,3,0) as it should. */
.ng-v2 .ng-section--sunken{
  background:var(--ng-surface-sunken);
  border-block:1px solid var(--ng-hairline);
}

/* Indigo band.
   IMPORTANT — write it as `class="ng-section ng-section--dark is-dark"`.
   `is-dark` is where ng-foundation.css §3 flips the palette tokens, and it
   also supplies the deeper --ng-section-pad-dark. This class only adds the
   closing-band composition on top. The alternative was to re-declare the
   eight dark literals here so `--dark` stood alone; rejected, because two
   copies of a palette is exactly how a palette drifts, and rule 1 forbids
   literal colours in this file anyway. One extra class in the markup is the
   cheaper half of that trade. */
.ng-v2 .ng-section--dark{
  text-align:center;
}
.ng-v2 .ng-section--dark > .ng-container{
  display:flex; flex-direction:column; align-items:center;
}

/* A band that butts directly against the one above it, for the case where two
   consecutive bands are meant to read as one block. */
.ng-v2 .ng-section--tight{ padding-block:0 var(--ng-section-pad); }


/* ==========================================================================
   2. SECTION HEAD AND COPY
   ========================================================================== */

/* eyebrow + h2 + lede. max-width is on the children, not here, so a head can
   still hold a right-aligned action without the measure fighting it. */
.ng-v2 .ng-section-head{
  margin:0 0 36px;
}

/* (0,3,0) via the doubled class. Three rules are being beaten at once and all
   three were measured on this site, not assumed:
     `.ng-v2 h2`                                  (0,1,1) ours, size only
     theme `.content-wrapper h2`                  (0,1,1) loads AFTER us
     theme `.content-wrapper h2:not(:first-child)`(0,2,2) margin-top:50px
   The third is the one that matters: it silently turned every authored 14px
   eyebrow-to-heading gap on the homepage into 50px, ~500px of unasked-for air
   across the page, and it is invisible to every DOM assertion. Every heading
   class in this file is doubled for that reason — see §11. */
.ng-v2 .ng-section-head__title.ng-section-head__title{
  font-size:44px; line-height:1.12;
  margin:14px 0 0;
  max-width:24ch;
  text-wrap:balance;
}
/* Legal only because this span never renders below 30px: --ng-accent-display
   is 4.04:1 on the ground and 4.18:1 on white, over the 3.0 large-text bar and
   under the 4.5 body bar. Never put this token on small text. */
.ng-v2 .ng-hl{ color:var(--ng-accent-display); }

.ng-v2 .ng-lede{
  margin:18px 0 0;
  font-size:18px; line-height:1.6;
  color:var(--ng-muted);              /* 6.01:1 on ground, 5.42:1 on mist */
  max-width:64ch;
}

/* A footnote under a figure or a counted claim. Deliberately NOT tracked, so
   it stays at the 14px reading floor rather than taking the label exception —
   it is a sentence, not a label. */
.ng-v2 .ng-note{
  margin:20px 0 0;
  font-size:14px; line-height:1.6;
  color:var(--ng-muted);
  max-width:70ch;
}
.ng-v2 .ng-note a{
  color:var(--ng-accent);
  text-decoration:underline; text-underline-offset:3px;
}

/* Shared arrow glyph. Every affordance on an inner page uses the same one, and
   it only moves where a real pointer exists. */
.ng-v2 .ng-arrow{
  display:inline-block;
  transition:transform .16s cubic-bezier(.25,.46,.45,.94);
}


/* ==========================================================================
   3. BREADCRUMBS
   The theme ships its own `.breadcrumbs` inside the page-title banner, which
   inner pages switch off (post meta page_title_status=off) because that banner
   carried a SECOND h1. Switching it off also removes the only trail back up
   the tree, so every inner page supplies its own — 39x27px in the theme, 44px
   here.
   ========================================================================== */
.ng-v2 .ng-crumbs{
  display:flex; flex-wrap:wrap; align-items:center;
  gap:2px 8px;
  margin:0 0 18px;
  font-family:var(--ng-font-label); font-weight:500;
  /* 14px, not 13. A breadcrumb is read — it is the only route back up the
     tree on a page whose theme trail has been switched off — so it takes the
     reading floor. It is tracked at only .04em, well under the 0.08em that
     buys the tracked-label exception, and ng-page-check correctly reported it
     at 13px as untracked body copy under the floor. */
  font-size:14px; line-height:1.4; letter-spacing:.04em;
  color:var(--ng-muted);
}
.ng-v2 .ng-crumbs__link{
  display:inline-flex; align-items:center;
  color:var(--ng-muted);
  text-decoration:none;
  border-bottom:1px solid transparent;
}
.ng-v2 .ng-crumbs__link:hover{
  color:var(--ng-accent);
  border-bottom-color:var(--ng-accent);
}
.ng-v2 .ng-crumbs__sep{ color:var(--ng-hairline); }
.ng-v2 .ng-crumbs__here{ color:var(--ng-ink); }


/* ==========================================================================
   4. MASTHEAD — the inner-page hero.
   NOT named .ng-hero: ng-components.css owns that class completely (band,
   grid areas, product panel, map canvas, markers) and reusing it would drag a
   1400px basemap layout onto a page that has no basemap.

   Two columns at >=960px, one below. The aside is optional; with no aside the
   copy column simply takes the full measure, so a page that has nothing to put
   there does not have to fake something.
   ========================================================================== */
.ng-v2 .ng-masthead{
  padding-block:28px 52px;
  background:var(--ng-ground);
  overflow:clip;                    /* not `contain` — that clipped the mega-menu */
}
@media (min-width:1024px){
  .ng-v2 .ng-masthead{ padding-block:36px 64px; }
}
.ng-v2 .ng-masthead__inner{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:32px;
  align-items:start;
}
@media (min-width:960px){
  .ng-v2 .ng-masthead__inner{
    grid-template-columns:minmax(0,58fr) minmax(0,42fr);
    column-gap:56px;
  }
}
.ng-v2 .ng-masthead__copy{ min-width:0; }

/* clamp() rather than a fixed mobile step. The fixed 38px step was the
   "desktop, shrunk" tell on the homepage; the floor here keeps the headline at
   display size on a 390px screen without letting it hit the h1 scale of a
   landing page. Ceiling 56px, one step under the homepage's 60px, because an
   inner page is not the front door. */
.ng-v2 .ng-masthead__title.ng-masthead__title{
  margin:16px 0 0;
  font-size:clamp(2.2rem, 5.6vw, 3.5rem);
  line-height:1.06;
  letter-spacing:-0.028em;
  max-width:18ch;
  text-wrap:balance;
}
.ng-v2 .ng-masthead__lede{
  margin-top:18px;
  max-width:52ch;
}

/* Proof strip. Same idiom as the homepage hero's: values that are countable
   from the page itself rather than marketing metrics, labels authored already
   uppercase with no text-transform anywhere near them. */
.ng-v2 .ng-masthead__proof{
  margin:30px 0 0; padding:18px 0 0;
  list-style:none;
  border-top:1px solid var(--ng-hairline);
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px;
}
.ng-v2 .ng-masthead__proof > li{ min-width:0; }
.ng-v2 .ng-masthead__pv{
  display:block;
  font-family:var(--ng-font-display); font-weight:700;
  font-size:clamp(1.5rem, 4.4vw, 1.75rem); line-height:1.1;
  letter-spacing:-0.02em; color:var(--ng-ink);
}
.ng-v2 .ng-masthead__pl{
  display:block; margin-top:6px;
  font-family:var(--ng-font-label); font-weight:500;
  font-size:11px; line-height:1.35; letter-spacing:.08em;
  color:var(--ng-muted);
  text-transform:none;
}


/* ==========================================================================
   5. GRID
   One responsive grid, three densities, collapsing to a single column. The
   list reset is at (0,2,0) because the theme styles bare `ul` at (0,0,1) and
   `.content-wrapper ul` at (0,1,1) and loads after us.

   The fontello chevron the theme injects on `ul>li::before` and the 31.875px
   gutter it reserves are both already killed globally in ng-components.css
   §10 — do not re-fight them here.
   ========================================================================== */
.ng-v2 .ng-grid{
  list-style:none; margin:0; padding:0;
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:18px;
}
.ng-v2 .ng-grid > li,
.ng-v2 .ng-grid > div{ min-width:0; }

@media (min-width:620px){
  .ng-v2 .ng-grid--2,
  .ng-v2 .ng-grid--3,
  .ng-v2 .ng-grid--4{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (min-width:960px){
  .ng-v2 .ng-grid--3{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  .ng-v2 .ng-grid--4{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  .ng-v2 .ng-grid{ gap:20px; }
}
@media (min-width:1180px){
  .ng-v2 .ng-grid--4{ grid-template-columns:repeat(4,minmax(0,1fr)); }
}


/* ==========================================================================
   6. CARD — the raised surface role.
   White + hairline + soft shadow, and it holds text. There is no third
   surface role on this site; if something needs to look recessed it is
   --sunken, and sunken holds white chrome, not text.

   The card carries its softness AT REST. Flat-until-hover made the homepage
   grid read as a wireframe until the mouse moved, and never lifted at all on
   touch.
   ========================================================================== */
.ng-v2 .ng-card{
  display:flex; flex-direction:column;
  height:100%;
  padding:24px 22px;
  background:var(--ng-surface);
  border:1px solid var(--ng-hairline);
  border-radius:var(--ng-radius);
  box-shadow:var(--ng-shadow-card);
  color:var(--ng-ink);
  text-decoration:none;
  transition:transform .16s cubic-bezier(.25,.46,.45,.94),
             box-shadow .16s cubic-bezier(.25,.46,.45,.94),
             border-color .16s cubic-bezier(.25,.46,.45,.94);
}

/* The WHOLE CARD is the anchor. This is the direct fix for the audit's "14
   identical 'Daha Fazla Bilgi' links": there is no per-card button to repeat,
   the tap target is the card rather than a 97x30 line of text, and a screen
   reader hears one link per card whose accessible name is the card's own
   heading rather than the same four words fourteen times. */
.ng-v2 .ng-card--link{ cursor:pointer; }
@media (any-hover:hover){
  /* any-hover only: on a touch screen :hover sticks after the tap and leaves
     a card lifted until the user taps somewhere else. */
  .ng-v2 .ng-card--link:hover{
    transform:translate3d(0,-2px,0);
    border-color:var(--ng-border-strong);
    box-shadow:var(--ng-shadow-card-hover);
  }
  .ng-v2 .ng-card--link:hover .ng-arrow{ transform:translate3d(4px,0,0); }
}
/* The foundation's two-tone ring already draws on :focus-visible; the lift is
   repeated so keyboard and pointer see the same card state (2.4.11). */
.ng-v2 .ng-card--link:focus-visible{
  transform:translate3d(0,-2px,0);
  border-color:var(--ng-border-strong);
}
.ng-v2 .ng-card--link:active{ transform:scale(.995) translate3d(0,-1px,0); }

/* (0,3,0) doubled — see §2 and §11. 19px not the foundation's 24px h3: three
   and four card grids in Turkish, where compound nouns are long, need the
   smaller step to stay on one or two lines. */
.ng-v2 .ng-card__title.ng-card__title{
  font-size:19px; line-height:1.3;
  margin:14px 0 0;
}
.ng-v2 .ng-card__body{
  margin:10px 0 0;
  font-size:15px; line-height:1.62;
  color:var(--ng-muted);              /* 6.21:1 on --ng-surface */
}
/* Tracked label above or below the title — a count, a category, a date. 12px
   is allowed here and only here because letter-spacing is >= 0.08em, which is
   the label exception in the contract; it is glanced at, not read. */
.ng-v2 .ng-card__meta{
  margin:0;
  font-family:var(--ng-font-label); font-weight:600;
  font-size:12px; line-height:1.35; letter-spacing:.1em;
  text-transform:none;                /* strings are authored pre-uppercased */
  color:var(--ng-muted);
}
/* .ng-card is a flex COLUMN with no `gap`, so every gap in it comes from a child
   margin. .ng-card__title carries `margin:14px 0 0` and so clears the icon chip;
   .ng-card__meta carries `margin:0` and so sits flush against it. That is fine
   while the card is icon -> title, which is what most of the site does, but the
   moment a card is icon -> meta -> title the 12px tracked label touches the 44px
   chip. Reported on /cozumler/dijital-harita-servisleri/ ("GOOGLE MAPS · YANDEX
   MAPS" against the pin-with-check icon); it affects 62 cards across 14 pages,
   every one of them a card that puts a meta line between the icon and the title.

   Fixed as an adjacency rule rather than by giving .ng-card__meta a blanket
   margin-top, because the meta is also used with no icon above it and directly
   under a title, and a blanket margin would open gaps on both of those. 14px is
   not a new number — it is the step .ng-card__title already uses against the
   same icon, so a card with a meta and a card without one start identically. */
.ng-v2 .ng-card__icon + .ng-card__meta{ margin-top:14px; }
/* The card's own verb line. margin-top:auto pins it to the bottom so a row of
   cards with different body lengths still ends on one baseline. It is a
   <span>, not an <a>: the card is the link. */
.ng-v2 .ng-card__link{
  display:inline-flex; align-items:center; gap:.45em;
  margin-top:auto; padding-top:20px;
  font-family:var(--ng-font-display); font-weight:600;
  font-size:14px; line-height:1.3;
  color:var(--ng-accent);             /* 5.64:1 on --ng-surface */
}

/* Icon chip. --ng-accent as the stroke, never --ng-accent-display: a 24px
   icon is a 1.5px line, which is graphical content under 1.4.11 and needs
   3:1 against its own ground. The wash is 8% accent over white, so the
   darker accent clears it and the display magenta would not. */
.ng-v2 .ng-card__icon{
  display:inline-flex; align-items:center; justify-content:center;
  width:44px; height:44px; flex:0 0 auto;
  border-radius:var(--ng-radius-sm);
  background:var(--ng-accent-wash);
  color:var(--ng-accent);
}
.ng-v2 .ng-card__icon svg{ display:block; }


/* ==========================================================================
   7. LIST AND PROSE
   ========================================================================== */

/* Unbulleted list. The theme's fontello marker and its 31.875px gutter are
   already suppressed globally (ng-components.css §10), so this only has to
   undo `list-style` and the theme's `ul` margins. */
.ng-v2 .ng-list{
  list-style:none; margin:0; padding:0;
}
.ng-v2 .ng-list > li{
  position:relative;
  padding-left:20px;
  margin-top:8px;
  font-size:15px; line-height:1.6;
  color:var(--ng-muted);
}
.ng-v2 .ng-list > li:first-child{ margin-top:0; }
/* A drawn marker rather than a list-style, so its colour and offset are ours
   and the theme cannot reintroduce a chevron in front of it. */
.ng-v2 .ng-list > li::after{
  content:''; position:absolute;
  left:2px; top:.62em;
  width:6px; height:6px;
  border-radius:50%;
  background:var(--ng-accent);
}

/* Pill list — a set of named things (deliverables, tags, covered sectors)
   shown as data fields rather than as a paragraph or as N more links.

   DEFAULT IS MIST-ON-WHITE, not white-with-a-hairline. Both were built and
   compared: a white pill with a hairline sitting on a white card is an
   outline on its own background, and fourteen cards of them read as a
   wireframe. The mist fill is the same treatment ng-components.css §7 already
   uses for `.ng-chips` on the homepage's white product cards, so this is the
   site's existing idiom rather than a new one. The white+hairline version is
   still needed — on a SUNKEN panel mist-on-mist disappears — and is the
   --onmist variant below. That is the two-surface rule doing its job: chrome
   always contrasts with the surface it sits on.

   14px, not 12px: on a sector page this is the largest block of small type on
   the page and it is the client's own words, so it is READ and takes the 14px
   reading floor rather than the tracked-label exception. */
.ng-v2 .ng-pills{
  list-style:none; margin:12px 0 0; padding:0;
  display:flex; flex-wrap:wrap; gap:6px;
}
.ng-v2 .ng-pills > li{
  font-family:var(--ng-font-label); font-weight:500;
  font-size:14px; line-height:1.35; letter-spacing:.01em;
  text-transform:none;
  color:var(--ng-ink);                /* 13.04:1 on mist, 14.95:1 on white */
  background:var(--ng-surface-sunken);
  border:1px solid transparent;       /* declared so --onmist only swaps colour
                                         and the two variants share a height */
  border-radius:var(--ng-radius-pill);
  padding:6px 10px;
}
.ng-v2 .ng-pills--onmist > li{
  background:var(--ng-surface);
  border-color:var(--ng-hairline);
}

/* Rich-text block for pages whose body really is prose (legal, blog). Sizes
   match the body scale rather than the card scale. */
.ng-v2 .ng-prose{
  font-size:17px; line-height:1.7;
  color:var(--ng-muted);
  max-width:70ch;
}
.ng-v2 .ng-prose p{ margin:0 0 18px; }
.ng-v2 .ng-prose > :last-child{ margin-bottom:0; }
.ng-v2 .ng-prose h2,
.ng-v2 .ng-prose h3{ color:var(--ng-ink); }
.ng-v2 .ng-prose h2.ng-prose__h.ng-prose__h{ font-size:28px; line-height:1.2; margin:36px 0 12px; }
.ng-v2 .ng-prose h3.ng-prose__h.ng-prose__h{ font-size:20px; line-height:1.3; margin:28px 0 10px; }
.ng-v2 .ng-prose ul,
.ng-v2 .ng-prose ol{ margin:0 0 18px; padding-left:20px; }
.ng-v2 .ng-prose ul > li,
.ng-v2 .ng-prose ol > li{ padding-left:4px; margin-bottom:8px; }
.ng-v2 .ng-prose ul > li{ list-style:disc; }
.ng-v2 .ng-prose ol > li{ list-style:decimal; }
.ng-v2 .ng-prose a{
  color:var(--ng-accent);
  text-decoration:underline; text-underline-offset:3px;
}
.ng-v2 .ng-prose blockquote{
  margin:24px 0; padding:2px 0 2px 20px;
  border-left:3px solid var(--ng-accent);
  color:var(--ng-ink);
}
.ng-v2 .ng-prose table{
  width:100%; border-collapse:collapse; margin:0 0 18px;
  font-size:15px;
}
.ng-v2 .ng-prose th,
.ng-v2 .ng-prose td{
  text-align:left; padding:10px 12px;
  border-bottom:1px solid var(--ng-hairline);
}
.ng-v2 .ng-prose th{ color:var(--ng-ink); font-weight:600; }


/* ==========================================================================
   8. ACTIONS AND BUTTONS
   .ng-btn is ng-foundation.css §7 and already resolves its fill, label and
   hover from the palette tokens, so it inverts inside a dark band with no
   branch here. The variants below only add what the foundation does not.
   ========================================================================== */
/* Works as a <div> or as a <ul>. The list reset is here rather than left to
   the page because an action row that is semantically a LIST of links — "here
   are three places you can go" — is the honest markup for a chip row, and a
   primitive that only works as a div quietly pushes every page towards a div. */
.ng-v2 .ng-actions{
  margin:28px 0 0; padding:0;
  list-style:none;
  display:flex; flex-wrap:wrap; align-items:center;
  gap:12px 14px;
}

/* Explicit rather than implicit. `.ng-btn` alone IS the primary, but a page
   that writes `.ng-btn--primary` should not silently depend on that; naming it
   also means a future secondary style cannot quietly become the default. */
.ng-v2 .ng-btn--primary{
  background:var(--ng-cta-fill);
  color:var(--ng-cta-label);
}
/* --ghost is in the foundation (white pill, navy hairline, inset shadow so the
   two pills share a height). Only the hover accent is added here, matching the
   homepage hero's secondary. */
.ng-v2 .ng-btn--ghost:hover{
  color:var(--ng-accent);
  box-shadow:inset 0 0 0 1.5px var(--ng-accent);
}
/* --pill is the third and lowest tier: a compact hairline chip for an index,
   a filter row or a tag. It is a BUTTON shape at label scale, which is why it
   is a --btn variant and not a new component. 13px with 0.02em is body-ish,
   so it stays over the 14px floor at mobile via §12. */
.ng-v2 .ng-btn--pill{
  padding:9px 14px;
  font-size:14px; line-height:1.2;
  background:var(--ng-surface);
  color:var(--ng-ink);
  box-shadow:inset 0 0 0 1px var(--ng-hairline);
}
.ng-v2 .ng-btn--pill:hover{
  background:var(--ng-surface);
  color:var(--ng-accent);
  box-shadow:inset 0 0 0 1px var(--ng-accent);
}


/* ==========================================================================
   9. CLOSING CTA BAND
   One band, one heading, one decision. Everything that could compete with the
   button is left out — no feature recap, no logo strip, no second column.

   DELIBERATELY STATIC: no .ng-anim anywhere in a .ng-cta. The last thing on
   the page before the footer is the page's only remaining conversion point and
   it must never depend on an IntersectionObserver firing. The tonal break from
   light to indigo is the entrance.
   ========================================================================== */
.ng-v2 .ng-cta__eyebrow{
  margin:0;
  text-transform:none;   /* "SONRAKİ ADIM" is authored uppercase: the case
                            engine maps i->I and would print "SONRAKI ADIM" */
}
.ng-v2 .ng-cta__title.ng-cta__title{
  margin-top:18px;
  font-size:clamp(1.9rem, 4.4vw, 3rem);
  line-height:1.1;
  max-width:20ch;
  text-wrap:balance;
}
.ng-v2 .ng-cta__lede{
  margin:18px 0 0;
  font-size:18px; line-height:1.6;
  color:var(--ng-muted);              /* 9.22:1 on the indigo band */
  max-width:54ch;
}
.ng-v2 .ng-cta__actions{
  margin-top:32px;
  justify-content:center;
}
.ng-v2 .ng-cta .ng-btn{ padding:17px 32px; font-size:17px; }
/* Location and phone, both already published on the contact page. The
   separator is a middle dot in the markup, not a border, so it wraps with the
   text on a narrow screen. */
.ng-v2 .ng-cta__meta{
  margin:36px 0 0;
  font-family:var(--ng-font-label); font-weight:500;
  /* 14px for the same reason as .ng-crumbs: a phone number and an address are
     read and copied, and .04em tracking does not earn the label exception. */
  font-size:14px; line-height:1.6; letter-spacing:.04em;
  color:var(--ng-muted);
}
.ng-v2 .ng-cta__tel{
  color:var(--ng-muted);
  text-decoration:underline; text-underline-offset:4px;
}
.ng-v2 .ng-cta__tel:hover{ color:var(--ng-ink); }


/* ==========================================================================
   10. MOTION — and the one real collision in this design system.

   ng-components.css §8 defines `.ng-card` as the HOMEPAGE HERO'S floating
   overlay marker:

       html[data-ng-motion="on"] .ng-v2 .ng-card{
         opacity:0; transform:translate(var(--tx,-50%),-50%) scale(.86); }
       @media (prefers-reduced-motion:reduce){
         .ng-v2 .ng-card{ transform:translate(var(--tx,-50%),-50%) !important; } }

   Those markers are position:absolute and are centred on their coordinate by
   that translate. pages/PATTERNS.md, meanwhile, publishes `.ng-card` as the
   raised surface card every inner page builds its grids from. Used as
   published, every card on every inner page would be dragged up and left by
   half its own size — permanently under a reduce preference, because that one
   is !important. It would pass every DOM and computed-style assertion that
   checks the card's own declarations, and would only ever be caught in a
   screenshot.

   ng-components.css cannot be edited (it is the live homepage's sheet) and the
   name cannot be changed (28 later pages are being written against it), so the
   collision is resolved HERE, in the file that is loaded on inner pages and
   never on the homepage. Both rules below restate the components selector
   character for character; ng-shared loads later, so equal specificity wins.

   On an inner page .ng-card therefore reveals exactly like .ng-anim — which is
   what PATTERNS means by "also the .ng-anim target" — and the reveal engine in
   the mu-plugin already observes '.ng-anim, .ng-card', so a card needs no
   extra class to animate.
   ========================================================================== */
html[data-ng-motion="on"] .ng-v2 .ng-card{
  opacity:0;
  filter:blur(10px);
  transform:translateY(20px);
}
html[data-ng-motion="on"] .ng-v2 .ng-card.is-in{
  opacity:1;
  filter:blur(0);
  transform:none;
  transition:opacity .7s cubic-bezier(.25,.1,.25,1),
             filter   .7s cubic-bezier(.25,.1,.25,1),
             transform .7s cubic-bezier(.25,.1,.25,1);
}

/* The ONLY !important block in this file, and every declaration in it exists
   solely to cancel an
   !important. ng-components.css sets `transform:translate(-50%,-50%)
   !important` on .ng-card under a reduce preference; a non-important
   declaration cannot beat it at any specificity. Same selector, same
   media query, later file. */
@media (prefers-reduced-motion:reduce){
  .ng-v2 .ng-card{
    opacity:1 !important;
    filter:none !important;
    transform:none !important;
    transition:none !important;
  }
  .ng-v2 .ng-card--link:hover,
  .ng-v2 .ng-card--link:focus-visible,
  .ng-v2 .ng-card--link:active{ transform:none !important; }
  .ng-v2 .ng-arrow{ transform:none !important; transition:none !important; }
}


/* ==========================================================================
   11. THEME HEADING-MARGIN DEFENCE
   Neuros ships, at char ~1,255,000 of the LiteSpeed-combined stylesheet:

       body .content-wrapper h1:not(:first-child), … h6:not(:first-child)
       { margin-top:50px }

   Specificity (0,2,2), and it loads after us. Any heading rule written as
   `.ng-v2 .ng-x__title` (0,2,0) LOSES to it, which is how ~500px of air
   appeared across the homepage before anyone measured it. Every heading class
   in this file is therefore written with the doubled-class idiom (0,3,0),
   which wins without !important and without assuming an ancestor.

   The declarations live with their components above; this block is the index,
   so the next person can see at a glance which classes are protected and add
   theirs to the list rather than rediscovering the bug.

       .ng-masthead__title       §4
       .ng-section-head__title   §2
       .ng-card__title           §6
       .ng-cta__title            §9
       .ng-prose__h              §7

   A page-level heading class needs the same treatment in <slug>.css.
   ========================================================================== */


/* ==========================================================================
   12. MOBILE
   ng-mobile.css loads BEFORE this file and is scoped to the homepage's own
   component names, so nothing here fights it. Two rules, both from the
   contract: 16px reading floor and 44px touch targets.
   ========================================================================== */
@media (max-width:767px){
  /* Reading floor. Card body, list items and prose go to 16px; the tracked
     labels (.ng-card__meta at 12px/0.1em, .ng-masthead__pl at 11px/0.08em)
     stay, because they are glanced at and the contract allows tracked labels
     down to 12px and app chrome to 11px. */
  .ng-v2 .ng-card__body,
  .ng-v2 .ng-list > li{ font-size:16px; line-height:1.6; }
  .ng-v2 .ng-lede{ font-size:16px; }
  .ng-v2 .ng-cta__lede{ font-size:17px; }
  .ng-v2 .ng-note{ font-size:15px; }
  .ng-v2 .ng-prose{ font-size:16px; }
  .ng-v2 .ng-pills > li{ font-size:15px; }

  /* 44px targets. min-height on the element rather than extra padding, so the
     desktop rhythm is untouched; inline targets become inline-flex first or
     min-height does not apply at all. .ng-card--link is deliberately absent —
     the whole card is the target there and it is already 300x220+. */
  .ng-v2 .ng-crumbs{ gap:0 10px; }
  /* min-WIDTH as well as min-height. "Home" on the English page measured
     38x44 — tall enough and still a failure, because 2.5.5 is a 44x44 box and
     a four-letter crumb is narrower than that. justify-content:center keeps
     the label optically where it was; a longer crumb simply ignores the
     minimum. */
  .ng-v2 .ng-crumbs__link,
  .ng-v2 .ng-cta__tel{
    display:inline-flex; align-items:center; justify-content:center;
    min-height:44px; min-width:44px;
  }
  .ng-v2 .ng-btn--pill{ min-height:44px; padding:10px 15px; }

  /* Both actions go full-bleed when they stack. Before this, only the solid
     one did and the ghost sat under it at its own text width, which read as
     two different kinds of thing rather than two answers to one question. */
  .ng-v2 .ng-actions{ width:100%; flex-direction:column; align-items:stretch; }
  .ng-v2 .ng-actions .ng-btn{ width:100%; justify-content:center; }
  /* …except a chip row, which is a list of many and must stay a row. */
  .ng-v2 .ng-actions--chips{ flex-direction:row; flex-wrap:wrap; width:auto; }
  .ng-v2 .ng-actions--chips .ng-btn{ width:auto; }

  .ng-v2 .ng-section-head{ margin-bottom:26px; }
  .ng-v2 .ng-section-head__title.ng-section-head__title{
    font-size:30px; max-width:none;
  }
  .ng-v2 .ng-card{ padding:22px 18px; }
  .ng-v2 .ng-masthead__proof{ margin-top:26px; gap:10px; }
  .ng-v2 .ng-masthead__pl{ font-size:11px; }
}

@media (min-width:768px) and (max-width:1023px){
  .ng-v2 .ng-section-head__title.ng-section-head__title{ font-size:36px; }

  /* TAP TARGETS AT 768 — the same gap ng-mobile.css §6 had, in this file.
     Every 44px rule above is inside `@media (max-width:767px)`, so 768-1023 is
     a TOUCH width served the desktop sizes. Measured on /sss/ and /en/faq/ at
     768 after the checker was widened past its old 600px ceiling: thirteen
     targets under the minimum on every converted inner page — .ng-crumbs__link
     at 21px tall and .ng-btn at 38px.

     Nothing had ever looked here: ng-page-check only enforced tap targets below
     600px, which is also how eighteen undersized targets survived every pass on
     both homepages. The ceiling is now 1024px.

     Same idiom as the block above — min-height (and min-width for short
     crumbs, since 2.5.5 wants a 44x44 box and "SSS" is narrower than that),
     never extra padding, so no baseline moves and desktop is untouched. */
  .ng-v2 .ng-crumbs{ gap:0 10px; }
  .ng-v2 .ng-crumbs__link,
  .ng-v2 .ng-cta__tel{
    display:inline-flex; align-items:center; justify-content:center;
    min-height:44px; min-width:44px;
  }
  .ng-v2 .ng-btn{
    display:inline-flex; align-items:center; justify-content:center;
    min-height:44px;
  }
}

/* ==========================================================================
   13. LEAF PRIMITIVES — added by the first LEAF agent (akaryakit / fuel).

   ADDED, NOT REARRANGED. Nothing above this line was touched: twenty live
   pages and twenty-six posts render from it and it has already been through
   two rounds of fixes that only a screenshot caught.

   Every page in tranche 2 is a single-topic leaf — one sector, one product,
   one solution — of 53 to 146 words. Three shapes turned out to be needed by
   all three groups in the same form, so they are here rather than in a page
   sheet. Everything else the akaryakıt page needed (its ranked scorecard, its
   fact rows, its two-column pairing) is page-specific and lives in
   pages/akaryakit.css, per the rule that a wrong shared primitive costs 28
   pages and a duplicated page rule costs bytes.

   NAME CHECK, because this is how the .ng-card collision happened: none of
   .ng-aside, .ng-out or .ng-steps (the block) is declared in ng-foundation.css,
   ng-components.css or ng-mobile.css. ng-sections.css does define .ng-steps for
   the homepage, but that file is HOMEPAGE-ONLY and this one is INNER-PAGE-ONLY;
   the two are never in the same cascade. ng-foundation.css §? does carry one
   orphaned rule, `.ng-steps__name.ng-steps__name{margin-top:10px}`, which is
   the doubled-class margin defence already applied to that name — restated
   below at the same value so the two cannot disagree.

   Each block carries its own responsive rules, so its position relative to
   §12 does not matter.
   ========================================================================== */

/* --- 13a. .ng-aside — the masthead's second column -------------------------
   Every leaf masthead wants a plate beside the headline, and the sectors hub
   had already hand-rolled exactly this shape as .ng-sekidx. It is the SUNKEN
   role: mist + hairline, holding white chrome or short copy. The hairline is
   the load-bearing part — an untethered tint on the #FAFBFF ground reads as a
   smudge rather than a plate, which is the finding that produced the
   homepage's sector panel and then .ng-sekidx.

   No shadow: a recessed surface that also floats is a contradiction.
   align-self:start because the copy column is always the taller child, and a
   stretched panel puts 200px of dead mist under its last line — which
   ng-page-check counts as dead air. */
.ng-v2 .ng-aside{
  padding:22px 20px;
  background:var(--ng-surface-sunken);
  border:1px solid var(--ng-hairline);
  border-radius:var(--ng-radius);
}
@media (min-width:960px){
  .ng-v2 .ng-aside{ align-self:start; margin-top:34px; }
}
.ng-v2 .ng-aside__label{ margin:0 0 14px; }

/* A quoted line — on a sector leaf, the question its hub already asks about
   this page. margin:0 at (0,2,0) beats the theme's `.content-wrapper
   blockquote` at (0,1,1); 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. */
.ng-v2 .ng-aside__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:18px; line-height:1.45;
  color:var(--ng-ink);
}
.ng-v2 .ng-aside__quote::before,
.ng-v2 .ng-aside__quote::after{ content:none; }
.ng-v2 .ng-aside__body{
  margin:16px 0 0;
  font-size:15px; line-height:1.6;
  color:var(--ng-muted);              /* 5.42:1 on mist */
}
.ng-v2 .ng-aside__list{ margin-top:12px; }
@media (max-width:959px){
  /* Stacked: the plate becomes a full-width band under the proof strip, which
     is the right order — a reader who has taken the headline and the counts is
     exactly the person who then wants the question spelled out. */
  .ng-v2 .ng-aside{ margin-top:4px; }
}
@media (max-width:767px){
  .ng-v2 .ng-aside{ padding:20px 16px; }
  .ng-v2 .ng-aside__quote{ font-size:17px; }
  .ng-v2 .ng-aside__body{ font-size:16px; }   /* mobile reading floor */
}

/* --- 13b. .ng-out — a panel of REAL OUTPUT, honestly labelled --------------
   PATTERNS.md tells every page to prefer real output over decoration, and the
   homepage proved it by replacing two misleading generated rasters with DOM
   replicas of what the products actually return. A leaf has the same problem
   in a smaller frame: it is one topic, it has no publishable case study, and
   the thing a visitor most wants is to see what lands on their desk.

   This is the container and its chrome only. What goes INSIDE is page-specific
   by definition — a ranked list, a report card, a data manifest, a chat
   thread — and belongs in the page sheet.

   THE `__flag` IS NOT DECORATION. It is the "ÖRNEK" / "SAMPLE" chip, and a
   page using this primitive owes a caption as well: the site's rule is that an
   illustrative figure is labelled where it is shown, not in a footnote
   ("Örnek çıktı. Sayılar temsilîdir.").

   DELIBERATELY NOT .ng-panel__* — ng-components.css owns those names for the
   homepage hero and sets them at 10px and 10.5px, under the contract's own
   11px floor for app-replica chrome. Reusing the name would have imported a
   contract violation onto 28 pages.

   TYPE SIZES AND THE CHECKER: ng-page-check exempts a label only if its
   computed letter-spacing / font-size is >= 0.08. __tag, __flag and __label
   are 11px at 0.1em (ratio .10) and __meta is 12px at 0.08em (ratio .08), so
   all four clear it by measurement rather than by allowlist. __foot is a
   SENTENCE, not a label, so it takes the 14px reading floor. */
.ng-v2 .ng-out{
  margin:0;
  display:flex; flex-direction:column;
  height:100%;
  background:var(--ng-surface);
  border:1px solid var(--ng-hairline);
  border-radius:var(--ng-radius);
  box-shadow:var(--ng-shadow-card);
  overflow:hidden;                    /* the bar's fill has to stop at the radius */
}
.ng-v2 .ng-out__bar{
  display:flex; align-items:center; gap:10px;
  padding:12px 16px;
  background:var(--ng-surface-sunken);
  border-bottom:1px solid var(--ng-hairline);
}
.ng-v2 .ng-out__tag{
  flex:none;
  font-family:var(--ng-font-label); font-weight:600;
  font-size:11px; line-height:1.3; letter-spacing:.1em;
  text-transform:none;                /* strings are authored pre-uppercased */
  color:var(--ng-ink);
}
.ng-v2 .ng-out__meta{
  flex:1 1 auto; min-width:0;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  font-family:var(--ng-font-label); font-weight:500;
  font-size:12px; line-height:1.3; letter-spacing:.08em;
  text-transform:none;
  color:var(--ng-muted);
}
.ng-v2 .ng-out__flag{
  flex:none;
  padding:4px 9px;
  border-radius:var(--ng-radius-pill);
  background:var(--ng-accent-wash);
  color:var(--ng-accent);             /* 4.87:1 on the wash */
  font-family:var(--ng-font-label); font-weight:600;
  font-size:11px; line-height:1.3; letter-spacing:.1em;
  text-transform:none;
}
.ng-v2 .ng-out__body{
  flex:1 1 auto;
  display:flex; flex-direction:column;
  padding:18px 16px 20px;
}
.ng-v2 .ng-out__label{
  margin:0 0 14px;
  font-family:var(--ng-font-label); font-weight:600;
  font-size:11px; line-height:1.3; letter-spacing:.1em;
  text-transform:none;
  color:var(--ng-muted);
}
/* margin-top:auto so two panels of different content length still close on one
   baseline when they sit side by side. */
.ng-v2 .ng-out__foot{
  margin:18px 0 0; padding-top:14px;
  border-top:1px solid var(--ng-hairline);
  font-size:14px; line-height:1.55;
  color:var(--ng-muted);
}
.ng-v2 .ng-out__body > .ng-out__foot:last-child{ margin-top:auto; }
@media (max-width:767px){
  .ng-v2 .ng-out__bar{ padding:11px 14px; gap:6px 8px; flex-wrap:wrap; }
  /* THE BAR WRAPS AT MOBILE and the subject line takes its own row. Found in
     the 390 screenshot, not by an assertion: with tag + meta + flag on one
     342px row the meta had ~168px and ellipsised to "Örnek dağıtım ağı · 4
     ist…", i.e. the panel silently stopped saying what it was a sample OF.
     Turkish subject lines are the long ones, so this will bite every leaf.
     order:3 keeps tag and flag paired on line one; __tag grows so the flag
     still sits hard right. */
  .ng-v2 .ng-out__tag{ flex:1 1 auto; }
  .ng-v2 .ng-out__meta{
    order:3; flex:1 0 100%;
    white-space:normal; overflow:visible; text-overflow:clip;
  }
  .ng-v2 .ng-out__body{ padding:16px 14px 18px; }
  .ng-v2 .ng-out__foot{ font-size:15px; }
}

/* --- 13c. .ng-steps — a numbered ladder -----------------------------------
   "What happens if I call you" is the question a leaf gets that a hub does
   not: the reader has stopped asking whether you can do the thing. All three
   groups need it in the same shape — a sector page explains how the estate
   gets analysed, a product page how it gets deployed, a solution page how it
   runs.

   NOT CARDS, on purpose. The sector leaf that this was built for already has a
   four-card grid and two output panels above it; three more raised surfaces
   made the page read as one undifferentiated stack of white boxes, and a
   process is not a set of options. A rule over each step is the homepage's own
   treatment for .ng-steps and it reads as a sequence.

   The doubled-class margin on __name is the theme defence from §11; it is also
   already declared once in ng-foundation.css at the same 10px, restated here
   so a reader of either file sees the same number. */
.ng-v2 .ng-steps{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:minmax(0,1fr); gap:26px;
}
@media (min-width:860px){
  .ng-v2 .ng-steps{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:28px; }
}
.ng-v2 .ng-steps__item{
  min-width:0;
  padding-top:16px;
  border-top:2px solid var(--ng-hairline);
}
.ng-v2 .ng-steps__num{
  display:block;
  font-family:var(--ng-font-label); font-weight:600;
  font-size:12px; line-height:1.3; letter-spacing:.1em;
  text-transform:none;
  color:var(--ng-accent);             /* 5.64:1 on white, 5.35:1 on ground */
}
.ng-v2 .ng-steps__name.ng-steps__name{
  font-size:19px; line-height:1.3;
  margin:10px 0 0;
}
.ng-v2 .ng-steps__body{
  margin:10px 0 0;
  font-size:15px; line-height:1.62;
  color:var(--ng-muted);
}
@media (max-width:767px){
  .ng-v2 .ng-steps{ gap:22px; }
  .ng-v2 .ng-steps__body{ font-size:16px; }   /* mobile reading floor */
}


/* ==========================================================================
   TOUCH TARGETS AT EXACTLY 1024px — MOVED, do not re-add here.
   This block used to live in this file, which is why the two homepages never got
   it: ng-shared.css is inner-pages-only and they load ng-mobile.css instead. The
   union of both class sets is now ng-mobile.css §7, the one stylesheet every
   styled page loads. Fixing a shared bug in a file the failing pages do not load
   is how it stayed broken.
   ========================================================================== */


/* ==========================================================================
   14. PROMOTED LEAF PRIMITIVES
   ==========================================================================
   These rules were authored independently in 10 to 28 of the 29 leaf page sheets
   during tranche 2, because each agent could only see its own page. PATTERNS.md
   says promote a shape once three leaves want it; these were wanted by up to 28,
   and they had already started to drift — .ng-out-band__note existed in five
   different bodies, .ng-env__v in four, mostly disagreeing about a `ch` measure by
   two or four characters.

   The body kept below is the MAJORITY body in every case. Minority variants were
   deliberately LEFT in their page sheets: page CSS loads after this file, so a
   divergent copy still wins, and that is what makes this consolidation
   zero-visual-change rather than a re-design. If a page looks different from its
   siblings in one of these details, that difference is now explicit — it is the
   only copy of that rule left in its sheet.

   Generated by /root/ng-consolidate.py. Re-running it is safe and idempotent.
   ========================================================================== */

.ng-v2 .ng-lead__note{
   /* 28 sheets, 3 variants — majority kept */
  max-width:54ch;
}
.ng-v2 .ng-out-band{
   /* 26 sheets */
  scroll-margin-top:104px;
}
.ng-v2 .ng-out-band__note{
   /* 26 sheets, 4 variants — majority kept */
  margin:26px auto 0;
  max-width:86ch;
  text-align:center;
}
.ng-v2 .ng-out-band__pair{
   /* 25 sheets */
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:20px;
}
.ng-v2 .ng-steps__pills{
   /* 22 sheets */
  margin-top:14px;
}
.ng-v2 .ng-how__links{
   /* 21 sheets */
  margin-top:18px;
}
.ng-v2 .ng-how__note{
   /* 21 sheets, 2 variants — majority kept */
  margin-top:34px;
  max-width:84ch;
}
.ng-v2 .ng-vals__note{
   /* 21 sheets, 2 variants — majority kept */
  margin-top:30px;
  max-width:88ch;
}
.ng-v2 .ng-vals__half + .ng-vals__half{
   /* 20 sheets */
  margin-top:34px;
  padding-top:30px;
  border-top:1px solid var(--ng-hairline);
}
.ng-v2 .ng-vals__name.ng-vals__name{
   /* 20 sheets, 3 variants — majority kept */
  margin:0 0 20px;
  font-size:22px;
  line-height:1.25;
  letter-spacing:-0.012em;
  color:var(--ng-ink);
}
.ng-v2 .ng-env{
   /* 12 sheets */
  margin:0;
}
.ng-v2 .ng-env__k{
   /* 12 sheets */
  flex:1 1 auto;
  min-width:0;
  margin:0;
  font-size:14px;
  line-height:1.45;
  color:var(--ng-muted);
}
.ng-v2 .ng-env__row{
   /* 12 sheets */
  display:flex;
  align-items:baseline;
  gap:16px;
  padding:11px 0;
  border-top:1px solid var(--ng-hairline);
}
.ng-v2 .ng-env__row:first-child{
   /* 12 sheets */
  border-top:0;
  padding-top:0;
}
.ng-v2 .ng-env__v{
   /* 12 sheets, 4 variants — majority kept */
  flex:0 0 auto;
  margin:0;
  text-align:right;
  font-family:var(--ng-font-display);
  font-weight:600;
  font-size:16px;
  line-height:1.35;
  color:var(--ng-ink);
  font-variant-numeric:tabular-nums;
}
.ng-v2 .ng-net{
   /* 10 sheets */
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:15px;
}
.ng-v2 .ng-net__bar{
   /* 10 sheets */
  display:block;
  margin-top:8px;
  height:6px;
  border-radius:3px;
  background:var(--ng-surface-sunken);
  overflow:hidden;
}
.ng-v2 .ng-net__bar i{
   /* 10 sheets */
  display:block;
  height:100%;
  border-radius:3px;
  background:var(--ng-indigo);
}
.ng-v2 .ng-net__main{
   /* 10 sheets */
  display:block;
  min-width:0;
}
.ng-v2 .ng-net__n{
   /* 10 sheets */
  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-net__name{
   /* 10 sheets */
  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-net__row{
   /* 10 sheets, 2 variants — majority kept */
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;
  gap:12px;
}
.ng-v2 .ng-net__row.is-top .ng-net__bar i{
   /* 10 sheets */
  background:var(--ng-accent);
}
.ng-v2 .ng-net__row.is-top .ng-net__score{
   /* 10 sheets */
  color:var(--ng-accent);
}
.ng-v2 .ng-net__score{
   /* 10 sheets */
  display:block;
  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;
}
.ng-v2 .ng-net__side{
   /* 10 sheets, 2 variants — majority kept */
  display:block;
  text-align:right;
}


/* ==========================================================================
   15. ARCHETYPE PRIMITIVES — added by the first VARIANCE agent (akaryakit /
   fuel), phase 1 of the "28 pages, 28 silhouettes" pass.

   ADDED, NOT REARRANGED. Nothing above this line was touched. 76 live pages
   and 34 posts render from this file and it has been through three rounds of
   fixes that only screenshots caught.

   WHY THESE THREE AND NOTHING ELSE. pages/ARCHETYPES.md assigns each leaf one
   of six openings. Three of the shapes those openings ask for do not exist
   yet, and each is wanted by more than one page in the same form:

     .ng-masthead--stack   B-STACK is assigned to five pages (akaryakit,
                           otomotiv, telekom, lokasyon-analizi-web,
                           raporlama). All five need the identical change:
                           kill the second column, widen the headline.
     .ng-dtable            a ranked or key/value TABLE. ARCHETYPES names a
                           ranked table as the first alternative to the card
                           grid every page is today, and the theme's own table
                           rules have to be beaten the same way every time.
     .ng-facts             a WIDE key/value strip. C-FIGURE ("a wide visual
                           band — a sample output, a scorecard, a key-value
                           report" above the h1) and D-NUMBER both want facts
                           laid out across the container rather than down a
                           panel, which is what §14's .ng-env already does.

   Everything else this page needed — the dark ruled index, the score bar, the
   closing rail — is in pages/akaryakit.css. Rule unchanged: a wrong shared
   primitive costs 28 pages, a duplicated page rule costs bytes.

   NAME CHECK, the way the .ng-card collision taught us to: neither .ng-dtable
   nor .ng-facts nor .ng-masthead--stack appears in ng-foundation.css,
   ng-components.css, ng-mobile.css, ng-sections.css or any of the 28 page
   sheets. Verified by grep before writing, not assumed.
   ========================================================================== */

/* --- 15a. .ng-masthead--stack — the B-STACK opening ------------------------
   Every leaf on this site opens with a headline on the left and a plate on the
   right. That is the whole finding of this pass: 76 of 76 pages open the same
   way, and the owner could not tell one page from another. B-STACK is the
   inverse — no aside at all, the headline running the full container, the lede
   at reading measure under it, and the first content section starting high.

   It is a MODIFIER ON .ng-masthead, not a new block, because everything else
   about the masthead is unchanged: same crumbs, same eyebrow, same proof
   strip, same 44px targets. Only the grid and the type scale move.

   The single-column rule is (0,3,0), so it beats §4's two-column rule at
   (0,2,0) INSIDE its own min-width:960 query without needing a media query of
   its own. Specificity outranks a media query; source order is not relied on.

   THE HEADLINE HAS NO ch CEILING HERE, on purpose. §4 clamps the split
   headline to 18ch so it cannot run under the aside. A stack headline that
   stops at 18ch is a split headline with the plate deleted — the whole point
   is that the line runs the width of the page. text-wrap:balance (already on
   __title) keeps the last line from stranding a single word. */
.ng-v2 .ng-masthead--stack .ng-masthead__inner{
  grid-template-columns:minmax(0,1fr);
  column-gap:0;
}
.ng-v2 .ng-masthead--stack .ng-masthead__title.ng-masthead__title{
  max-width:none;
  /* one step over §4's 3.5rem ceiling: this headline is the whole first
     screen, where the split one shares it with a plate. */
  font-size:clamp(2.35rem, 6.2vw, 4.25rem);
  letter-spacing:-0.032em;
}
.ng-v2 .ng-masthead--stack .ng-masthead__lede{
  max-width:58ch;
}
/* The proof strip now spans the whole container instead of 58% of it, so it
   gets a little more air above it and its own rule reads as a full-width
   rather than a column-width divider. */
.ng-v2 .ng-masthead--stack .ng-masthead__proof{
  margin-top:36px;
}

/* --- 15b. .ng-dtable — a real data table ----------------------------------
   For a ranked list, a comparison or a key/value report that genuinely IS
   tabular: rows that share columns, and a header that names them. Semantic
   <table> with <caption>, <thead>, <th scope>, so a screen reader announces
   the column when it reads a cell — which is the argument for a table over
   four more cards.

   THREE THEME RULES ARE BEING BEATEN, all measured in
   themes/neuros/css/theme.css, not guessed:

     body .content-wrapper table tr td,
     body .content-wrapper table tr th   (0,1,4)  border:1px solid + 8px 15px
     body .content-wrapper table:not(:first-child)  (0,2,2)  margin-top:2rem
     body .content-wrapper table:not(:last-child)   (0,2,2)  margin-bottom:2rem

   The cell rule loses to (0,2,1). The two margin rules DO NOT — `:not()` counts
   its argument, so they are (0,2,2) and they beat a plain `.ng-v2 .ng-dtable`
   at (0,2,0), exactly like the `h2:not(:first-child){margin-top:50px}` rule
   that silently put 50px of air under every heading on the homepage. Hence the
   doubled class on the margin declaration. This is §11's defence applied to a
   table instead of a heading.

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

   Numbers right-align via `.is-num` on the cell, not via nth-child: which
   column is numeric is a property of the content, and a page that adds a
   column should not have to renumber a stylesheet. */
.ng-v2 .ng-dtable.ng-dtable{
  width:100%;
  margin:0;
  border-collapse:collapse;
  font-variant-numeric:tabular-nums;
}

/* THE SAME DEFENCE, ONCE, FOR EVERY TABLE WE AUTHOR.
 *
 * .ng-dtable defends itself with a doubled class above. Seventeen other tables
 * built during the variance pass do not, and every one of them loses 32px of
 * top and 32px of bottom margin to the theme:
 *
 *   body .content-wrapper table:not(:first-child){ margin-top:2rem }     (0,2,2)
 *   body .content-wrapper table:not(:last-child) { margin-bottom:2rem }  (0,2,2)
 *
 * A single class is (0,2,0) and loses. The tables affected are .ng-cmp, .ng-map,
 * .ng-move, .ng-ord, .ng-req, .ng-res, .ng-sch, .ng-shelf, .ng-sig-rank,
 * .ng-two__t, .ng-karne__table, .ng-mdl__table, .ng-pen__table, .ng-rapor__t,
 * .ng-reg__table, .ng-scale__t, .ng-sira__t, .ng-toc__table — about 34 live
 * pages, each carrying 64px of space nobody wrote, inside sample-output panels
 * where it reads as a layout bug.
 *
 * `ng-page-check` cannot see this: 32px is well under its 120px dead-air floor,
 * which is why it survived a sweep that measured 224 viewports and called them
 * all clean. It was found by reading specificity, not by measuring.
 *
 * Doing this once beats doubling seventeen class names: it also covers the next
 * table somebody writes. Checked before writing — NONE of the eighteen sets a
 * vertical margin of its own, so nothing authored is being overridden. Only
 * `margin-block` is reset; .ng-move's deliberate `margin:0 -4px` keeps its
 * horizontal bleed.
 *
 * (0,3,1) — beats the theme, and a page that genuinely wants vertical margin on
 * a table can still take it back with a doubled class plus an element or
 * attribute, the same way this rule wins here. */
.ng-v2 .ng-section table[class*="ng-"]{ margin-block:0; }
.ng-v2 .ng-dtable__cap{
  caption-side:top;
  text-align:left;
  padding:0 0 12px;
  font-family:var(--ng-font-label); font-weight:600;
  font-size:11px; line-height:1.3; letter-spacing:.1em;
  text-transform:none;                /* strings are authored pre-uppercased */
  color:var(--ng-muted);
}
.ng-v2 .ng-dtable th,
.ng-v2 .ng-dtable td{
  border:0;
  border-bottom:1px solid var(--ng-hairline);
  padding:13px 10px;
  text-align:left;
  vertical-align:middle;
}
.ng-v2 .ng-dtable th:first-child,
.ng-v2 .ng-dtable td:first-child{ padding-left:0; }
.ng-v2 .ng-dtable th:last-child,
.ng-v2 .ng-dtable td:last-child{ padding-right:0; }
/* A column header is a tracked label, so it takes the 11px label exception
   (11 x .1em, ratio .10, over the checker's 0.08 threshold) rather than the
   14px reading floor. It is glanced at once per table, not read. */
.ng-v2 .ng-dtable thead th{
  padding-top:0;
  padding-bottom:10px;
  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-muted);
  vertical-align:bottom;
}
/* A row header is the row's SUBJECT — a place, a product, a field name — so it
   is set in the display face at the reading floor and inherits the ink. */
.ng-v2 .ng-dtable tbody th{
  font-family:var(--ng-font-display); font-weight:600;
  font-size:16px; line-height:1.3;
  color:var(--ng-ink);
}
.ng-v2 .ng-dtable tbody td{
  font-size:15px; line-height:1.4;
  color:var(--ng-muted);
}
.ng-v2 .ng-dtable tbody tr:last-child th,
.ng-v2 .ng-dtable tbody tr:last-child td{ border-bottom:0; }
/* A summary row: separated by a heavier rule, never by a fill — a shaded row
   inside a white panel would be a third surface role, and there are two. */
.ng-v2 .ng-dtable tfoot th,
.ng-v2 .ng-dtable tfoot td{
  border-bottom:0;
  border-top:2px solid var(--ng-hairline);
  padding-top:14px;
  font-size:14px;
  color:var(--ng-muted);
}
.ng-v2 .ng-dtable .is-num{
  text-align:right;
  font-variant-numeric:tabular-nums;
}
/* The wrapper is a safety valve, not the layout. A table that only fits by
   scrolling has hidden a column from every phone; size the columns to fit 342px
   first and keep this for the case where a long word cannot break. */
.ng-v2 .ng-dtable__wrap{
  max-width:100%;
  overflow-x:auto;
}
@media (max-width:767px){
  .ng-v2 .ng-dtable th,
  .ng-v2 .ng-dtable td{ padding:12px 7px; }
  .ng-v2 .ng-dtable tbody th{ font-size:16px; }   /* reading floor */
  .ng-v2 .ng-dtable tbody td{ font-size:15px; }
}

/* --- 15c. .ng-facts — a wide key/value strip ------------------------------
   §14's .ng-env runs key/value pairs DOWN a narrow panel. This runs them
   ACROSS the container: five or six fields on one line at desktop, two up at
   phone width. It is the shape a report header wants, and the shape C-FIGURE
   needs above an h1 where a tall stack of rows would push the headline off the
   first screen.

   <dl> with a wrapping <div> per pair, which is the only valid way to group a
   dt/dd pair inside a description list. Label above value, not beside it: at
   five columns there is no room for a leader line, and the label is the thing
   you read first.

   The dividers are borders on the cells, not a grid gap fill, so a strip that
   wraps to two rows does not leave a dangling rule. */
.ng-v2 .ng-facts{
  margin:0;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:0;
}
@media (min-width:640px){
  .ng-v2 .ng-facts{ grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media (min-width:960px){
  .ng-v2 .ng-facts--5{ grid-template-columns:repeat(5,minmax(0,1fr)); }
  .ng-v2 .ng-facts--4{ grid-template-columns:repeat(4,minmax(0,1fr)); }
}
/* AN ODD NUMBER OF CELLS GOES ONE-UP AT PHONE WIDTH.
 *
 * The note above says a wrapped strip "does not leave a dangling rule". That is
 * true only when the cell count divides by the column count. Below 640 the
 * strip is 2-up, so THREE cells break 2 + 1 and FIVE break 2 + 2 + 1, and the
 * orphan on the last row draws its `border-top` across its own column only — a
 * hairline that stops dead at the middle of the container. It reads as a broken
 * grid, not as three things.
 *
 * Found in a 390 screenshot on /sektorler/hizli-teslimat/; `ng-page-check`
 * called the page clean before and after, because a half-width rule is not
 * overflow, dead air, or a small tap target. `saglik` hit the same thing and
 * patched its own wrapper class; that fix is now redundant but harmless.
 *
 * `:first-child:nth-last-child(odd)` is true only when the total count is odd,
 * so 4- and 6-cell strips keep their 2-up phone layout. No `:has()`, which
 * keeps this working in whatever the client's visitors are actually running. */
@media (max-width:639px){
  .ng-v2 .ng-facts__cell:first-child:nth-last-child(odd),
  .ng-v2 .ng-facts__cell:first-child:nth-last-child(odd) ~ .ng-facts__cell{
    grid-column:1 / -1;
  }
}
.ng-v2 .ng-facts__cell{
  min-width:0;
  padding:14px 16px 14px 0;
  border-top:1px solid var(--ng-hairline);
}
@media (min-width:960px){
  .ng-v2 .ng-facts__cell{
    padding:0 18px;
    border-top:0;
    border-left:1px solid var(--ng-hairline);
  }
  .ng-v2 .ng-facts__cell:first-child{ padding-left:0; border-left:0; }
  .ng-v2 .ng-facts__cell:last-child{ padding-right:0; }
}
.ng-v2 .ng-facts__k{
  margin:0;
  font-size:14px; line-height:1.45;
  color:var(--ng-muted);
}
.ng-v2 .ng-facts__v{
  margin:6px 0 0;
  font-family:var(--ng-font-display); font-weight:600;
  font-size:20px; line-height:1.25;
  letter-spacing:-0.01em;
  color:var(--ng-ink);
  font-variant-numeric:tabular-nums;
}
@media (max-width:767px){
  .ng-v2 .ng-facts__k{ font-size:15px; }
  .ng-v2 .ng-facts__v{ font-size:19px; }
}


/* ==========================================================================
   16. ARCHETYPE PRIMITIVES, ROUND 2 — promoted by the saglik / health agent
   (TR 23201 / EN 25749), the second D-NUMBER page.

   ADDED, NOT REARRANGED. Nothing above this line was touched.

   WHY NOW. §15 was written when each opening had exactly one built example, and
   PATTERNS.md's standing rule is "do not promote until three leaves want one".
   That threshold is crossed: D-NUMBER is assigned to four more pages and
   F-INDEX to four more, and if each copies the masthead CSS into its own sheet
   the site ends up with eight divergent copies of two treatments.

   LIFTED AS THEY ALREADY ARE, deliberately not improved on the way. Both bodies
   are live on pages the owner has already seen (/sektorler/gayrimenkul/ and
   /sektorler/hizli-teslimat/), so a "while I'm here" change would silently
   redesign those two as well. The copies were deleted from
   pages/gayrimenkul.css and pages/hizli-teslimat.css in the same pass and both
   pairs re-applied — page CSS loads AFTER this file, so a copy left behind
   would keep winning and the promotion would be inert.

   NAME CHECK, the way the .ng-card collision taught us: .ng-masthead--num,
   .ng-fig* and .ng-masthead--index appear in no other stylesheet on this site
   (ng-foundation, ng-components, ng-mobile, ng-sections and all 39 page
   sheets grepped, not assumed).

   .ng-idx__* IS DELIBERATELY NOT PROMOTED, and this is the one thing to read
   before "finishing the job" here. TWO DIFFERENT COMPONENTS ALREADY SHIP UNDER
   THAT NAME: hizli-teslimat's masthead index (F-INDEX) and perakende's
   section-20 ruled ledger of analysis titles (C-FIGURE), authored hours apart
   by two agents who could not see each other. They disagree on the parts a
   shared rule would impose:

       .ng-idx__list   hizli-teslimat draws a 2px top rule; perakende does not
                       declare border-top at all, and its own comment records
                       that a rule there once drew TWO hairlines 25px apart
       .ng-idx__to     hizli-teslimat pins it to grid-column:2 (its stacked
                       grid has three children and the label would otherwise
                       auto-place under the ordinal); perakende's row is a
                       different grid where column 2 is the body

   Promoting it would move both of those onto /perakende/ and /en/retail/,
   which no assertion would catch and which is precisely the "a wrong shared
   primitive costs 16 pages" failure. The next F-INDEX agent should copy
   .ng-idx from pages/hizli-teslimat.css into its own sheet, exactly as before,
   until someone renames one of the two — that is a markup change on four live
   pages and belongs in its own pass, not in a promotion.
   ========================================================================== */

/* --- 16a. .ng-masthead--num + .ng-fig — the D-NUMBER opening ---------------
   Lifted verbatim from pages/gayrimenkul.css §1a/§1b (2026-08-17), including
   its reasoning, which is why the comments below talk about that page's karne.

   ARCHETYPES.md D-NUMBER: "One very large figure dominates, set in the display
   face well above heading size, with a short label. The h1 is subordinate
   beneath it… The number must be real and countable from the page or the site
   — if you have no such number, this archetype is impossible for your page."

   THE NUMBER IS THE ONE THING THIS FILE CANNOT SUPPLY. gayrimenkul's is 12 (the
   rows of its sample çevre karnesi); saglik's is 3 (the three scales the same
   question is asked at, one row each in section 20). Both are countable in the
   section below the fold, and both were chosen over the homepage's 84.300 —
   an illustrative catchment figure set 184px tall at the top of an indexed
   sector page reads as a company metric no matter how many ÖRNEK chips sit
   near it.

   MARKUP:
     <section class="ng-section ng-masthead ng-masthead--num ng-lead">
       <div class="ng-container ng-masthead__inner">
         <div class="ng-masthead__copy ng-anim">
           …crumbs… …eyebrow…
           <div class="ng-fig">
             <p class="ng-fig__n">3</p>
             <div class="ng-fig__side">
               <p class="ng-fig__k">TRACKED LABEL, PRE-UPPERCASED</p>
               <p class="ng-fig__d">one sentence saying what the number counts</p>
             </div>
           </div>
           <h1 class="ng-masthead__title">…</h1>
           …lede… …actions… …proof strip…
   WRITE NO ASIDE: the single-column rule below is (0,3,0) and beats §4's
   two-column rule inside §4's own min-width:960 query, so an aside would be
   laid out on top of the copy. Same trick as §15a. */
.ng-v2 .ng-masthead--num .ng-masthead__inner{
  grid-template-columns:minmax(0,1fr);
  column-gap:0;
}
/* Subordinate on purpose: 40px against the figure's 184px. Every other leaf on
   this site sets its h1 at up to 56px; a visitor arriving from one of them
   should feel the hierarchy invert. Doubled class at (0,4,0) to beat §4's own
   doubled (0,3,0) rule as well as the theme's 50px margin. */
.ng-v2 .ng-masthead--num .ng-masthead__title.ng-masthead__title{
  margin:26px 0 0;
  font-size:clamp(1.75rem, 3.6vw, 2.5rem);
  line-height:1.16;
  letter-spacing:-0.022em;
  max-width:28ch;
}
.ng-v2 .ng-masthead--num .ng-masthead__lede{ max-width:58ch; }
/* The proof strip spans the whole container now instead of 58% of it. */
.ng-v2 .ng-masthead--num .ng-masthead__proof{ margin-top:36px; }

/* Baseline-aligned at >=720px: `align-items:end` puts the label block on the
   numeral's baseline so the two read as one lockup rather than as a heading
   with a caption. Below that they stack, numeral first.
   margin-top 12, not 26: an 800-weight numeral at 184px carries about 18px of
   internal leading above its cap at line-height .9, so 26px of margin measured
   as ~46px of air between the eyebrow pill and the digits. Optical, not
   metric — the blank-band check reads 0% either way. */
.ng-v2 .ng-fig{
  margin:12px 0 0;
  padding-bottom:26px;
  border-bottom:1px solid var(--ng-hairline);
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:10px;
}
@media (min-width:720px){
  .ng-v2 .ng-fig{
    grid-template-columns:auto minmax(0,1fr);
    column-gap:36px;
    align-items:end;
  }
}
/* THE NUMERAL IS INK, NOT ACCENT-DISPLAY. A magenta 184px numeral was built
   first and pulled: at that size the accent stops being an accent, and the size
   alone is already the loudest thing on the page. The accent is spent on the
   13px label beside it, where it points at the numeral instead of competing
   with it. (13px x .14em = ratio .14, over the 0.08 ng-page-check measures for
   the tracked-label exception, and --ng-accent at 5.45:1 on the ground is the
   correct tier for text under 24px.) */
.ng-v2 .ng-fig__n{
  margin:0;
  font-family:var(--ng-font-display); font-weight:800;
  /* 11.5rem = 184px at the ceiling. The 5.5rem floor keeps it dominant at 390,
     where the h1 is 28px. line-height .9 rather than something tighter: at .8
     the numeral's cap overlapped the eyebrow pill above it on Manrope's
     metrics, and .ng-masthead sets overflow:clip, so it would have been cut
     rather than merely close. */
  font-size:clamp(5.5rem, 15vw, 11.5rem);
  line-height:.9;
  letter-spacing:-0.05em;
  color:var(--ng-ink);
  font-variant-numeric:tabular-nums;
}
.ng-v2 .ng-fig__side{ min-width:0; padding-bottom:10px; }
.ng-v2 .ng-fig__k{
  margin:0;
  font-family:var(--ng-font-label); font-weight:600;
  font-size:13px; line-height:1.3; letter-spacing:.14em;
  text-transform:none;                /* authored pre-uppercased: i -> İ */
  color:var(--ng-accent);
}
/* 16px, so it is already at the mobile reading floor and needs no @media of
   its own — it is a sentence, not a label. */
.ng-v2 .ng-fig__d{
  margin:12px 0 0;
  font-size:16px; line-height:1.6;
  color:var(--ng-muted);
  max-width:48ch;
}
@media (max-width:767px){
  .ng-v2 .ng-fig{ margin-top:22px; padding-bottom:22px; }
  .ng-v2 .ng-fig__side{ padding-bottom:0; }
}

/* --- 16b. .ng-masthead--index — the F-INDEX opening ------------------------
   Lifted verbatim from pages/hizli-teslimat.css §1a (2026-08-17). The MODIFIER
   only; the index list itself (.ng-idx__*) stays in that page's sheet for the
   collision reason set out at the top of §16.

   A modifier on .ng-masthead exactly like §15a's --stack and §16a's --num:
   crumbs, eyebrow, proof strip and every hit area are unchanged, only the grid
   and the headline scale move. One column at (0,3,0), which beats §4's
   two-column rule inside §4's own min-width:960 query. There is no aside on an
   F-INDEX page at all.

   THE HEADLINE IS SMALL, and that is the archetype, not an oversight. F-INDEX
   says "a navigable index … with a SMALL h1 above it": the list is the hero.
   2.6rem at the top end against §4's 3.5rem and §15a's 4.25rem.

   The 18ch clamp §4 puts on the split headline is lifted — it exists so the
   headline cannot run under the aside, and there is no aside. 30ch instead,
   because a whole hub question is 66 characters in Turkish and 78 in English
   and should break into two or three lines, not five. */
.ng-v2 .ng-masthead--index .ng-masthead__inner{
  grid-template-columns:minmax(0,1fr);
  gap:30px;
}
.ng-v2 .ng-masthead--index .ng-masthead__title.ng-masthead__title{
  max-width:30ch;
  font-size:clamp(1.7rem, 3.4vw, 2.6rem);
  line-height:1.1;
  letter-spacing:-0.022em;
}
/* 72ch, not the 52ch §4 sets on the split lede. The measure is wider here on
   purpose: at 52ch two client sentences run to five lines and push the fifth
   index row off a 900px-tall screen, which would defeat the archetype. 72ch is
   still inside a comfortable measure and costs one line. */
.ng-v2 .ng-masthead--index .ng-masthead__lede{
  margin-top:14px;
  max-width:72ch;
}
@media (max-width:767px){
  .ng-v2 .ng-masthead--index .ng-masthead__inner{ gap:26px; }
}


/* ==========================================================================
   17. IMAGE PRIMITIVES — added by the optimizasyon / optimization agent
   (TR 23336 / EN 25595), the first page to place one of the 139 client-supplied
   780x540 content images.

   ADDED, NOT REARRANGED. Nothing above this line was touched. Fifty-six live
   pages render from this file and it has been through three rounds of fixes
   that only screenshots caught.

   WHAT THESE IMAGES ARE, because it decides the whole shape. They are 780x540
   PNGs already in the site palette (navy, magenta, Inter) and each one BAKES IN
   its own kicker, its own 28px title and a one-line caption. So the primitive's
   job is NOT to label the artefact — the artefact labels itself. Its job is:
     - hold the image at container width or beside a column of copy,
     - reserve its box so nothing reflows as it loads,
     - carry the ÖRNEK / SAMPLE chip and the illustrative caption the site's
       sample convention requires, because THE FIGURES INSIDE ARE MOCKUPS
       ("Rakamlar temsilîdir... Gerçek müşteri verisi değil" — the client's own
       guide), and a set of hand-built product frames was deleted this week for
       looking like real output.

   WHY NOT COMPOSED ON §13b's .ng-out, which already has a chrome bar with a
   __tag, a __meta and an ÖRNEK __flag. Because .ng-out__tag names the artefact,
   and the artefact already names itself 20px lower in 28px type. Every page
   using this would print its title twice, which is the exact stutter the image
   brief warns about. The chip is therefore one absolutely-positioned rule here
   rather than a fifth hand-rolled copy of a chrome bar.

   THE CAPTION IS NOT OPTIONAL and it is not styling. Use both: the chip inside
   the frame AND a <figcaption> saying the values are illustrative.

   LAZY LOADING AND TRANSFORMS DO NOT MIX ON THIS SITE. HANDOFF records a logo
   that never loaded because `loading="lazy"` evaluates intersection against
   LAYOUT position while a CSS transform moved it elsewhere. Nothing here
   transforms, and no page should put .ng-anim (which does transform) on an
   element containing one of these images. Set width/height on the <img>
   instead; the 13:9 box is reserved by the attributes, not by an aspect-ratio
   rule, so the image still scales freely if a future asset is a different size.
   ========================================================================== */

/* --- 17a. .ng-figband — one client image, framed and labelled --------------
   Default is ONE COLUMN: the figure runs the full container and its caption
   sits under it. That is the shape a C-FIGURE opening wants above an h1.

   .ng-figband--split puts a column of copy beside it at >=960 and stacks below,
   copy first — which is the right stacked order, because the heading is what
   tells a reader what they are about to look at. 44/56 rather than 50/50: at
   50/50 a 780px asset renders at 536px and the four-column sample table inside
   the first optimizasyon image sets its columns under 90px each.

   .ng-figband--flip swaps the two columns at >=960 ONLY. Below that the stack
   order never changes, so a page alternating flipped and unflipped rows still
   reads copy-then-figure all the way down a phone. */
.ng-v2 .ng-figband{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:24px;
  align-items:center;
}
@media (min-width:960px){
  .ng-v2 .ng-figband--split{
    grid-template-columns:minmax(0,44fr) minmax(0,56fr);
    column-gap:48px;
  }
  .ng-v2 .ng-figband--flip > .ng-figband__fig{ order:-1; }
  /* order:-1 alone moves the FIGURE into the 44fr column, so every flipped row
     rendered its picture ~20% smaller than the unflipped row above it — an
     alternating big/small down the page that reads as a mistake rather than a
     rhythm. The columns have to swap with the content. (0,3,0) beats the
     (0,2,0) rule above it. */
  .ng-v2 .ng-figband--split.ng-figband--flip{
    grid-template-columns:minmax(0,56fr) minmax(0,44fr);
  }
}
.ng-v2 .ng-figband__text{ min-width:0; }

/* <figure>. margin:0 at (0,2,0) beats the theme's `.content-wrapper figure`
   and, more importantly, `figure:not(:first-child)` never gets a chance —
   §15b's `.ng-v2 .ng-section table[class*="ng-"]` trick does not cover figures,
   so this is stated on the block itself. */
.ng-v2 .ng-figband__fig{ margin:0; min-width:0; }

/* RAISED role: white + hairline + shadow. These assets have a white ground of
   their own, so without the hairline the artefact bleeds into a white card and
   into the #FAFBFF page ground alike — the same finding that produced
   .ng-aside's hairline. overflow:hidden so the image corners take the radius.
   position:relative is the chip's containing block. */
.ng-v2 .ng-figband__frame{
  position:relative;
  background:var(--ng-surface);
  border:1px solid var(--ng-hairline);
  border-radius:var(--ng-radius);
  box-shadow:var(--ng-shadow-card);
  overflow:hidden;
}
/* The <img> may be wrapped in <picture> to offer WebP with a PNG fallback.
   <picture> is inline by default, so without this it contributes a text
   baseline and opens a few pixels of gap inside the overflow:hidden frame —
   visible as a hairline of surface colour under every figure. */
.ng-v2 .ng-figband__frame > picture{ display:block; }
.ng-v2 .ng-figband__img{
  display:block;
  width:100%; height:auto;
}

/* THE SAMPLE CHIP. Same type spec and the same two tokens as §13b's
   .ng-out__flag — 11px at .1em clears ng-page-check's measured 0.08 tracked
   label threshold, and accent-on-wash is 4.87:1 — but positioned, because there
   is no chrome bar to sit in. Top-right: all four supplied assets keep their
   top-right corner clear, and the magenta rule across the top of every asset is
   8px, so 14px clears it. If an asset ever puts content there, move the chip in
   the PAGE sheet rather than changing it for everyone. */
/* THE FLAG MUST NOT INVERT WITH THE BAND.
 *
 * `.is-dark` swaps --ng-accent to #FF9BC9 and --ng-accent-wash to a translucent
 * pink, which is right for a chip sitting ON the indigo. This chip does not: it
 * is absolutely positioned over the ASSET, and every asset is white to its own
 * edge. Light pink composited over white measures about 1.8:1 and the word
 * ÖRNEK becomes a ghost. Found in a 1440 screenshot on a figband inside a dark
 * band; nothing measurable was wrong, because the chip passes contrast against
 * the band it is nominally in.
 *
 * Fixed by capturing the light values HERE, on .ng-v2, outside every is-dark
 * subtree. A custom property is substituted at computed-value time on the
 * element that declares it, so --ng-flag-ink freezes to #C61073 at .ng-v2 and
 * inherits into the dark band unchanged. Tokens only, no literal colour, and no
 * page needs to know about it. Measured after the change: 5.64:1 on white,
 * inside and outside a dark band alike. */
.ng-v2{
  --ng-flag-ink:var(--ng-accent);
  --ng-flag-wash:var(--ng-accent-wash);
}
.ng-v2 .ng-figband__flag{
  position:absolute; top:14px; right:14px;
  padding:4px 9px;
  border-radius:var(--ng-radius-pill);
  background:var(--ng-flag-wash);
  color:var(--ng-flag-ink);
  font-family:var(--ng-font-label); font-weight:600;
  font-size:11px; line-height:1.3; letter-spacing:.1em;
  text-transform:none;                /* authored pre-uppercased: i -> İ */
}

/* ELEMENTOR EATS <figure> MARGINS. Its frontend sheet ships
 *
 *   .elementor .elementor-widget:not(.elementor-widget-text-editor)
 *     :not(.elementor-widget-theme-post-content) figure{margin:0}
 *
 * at (0,4,1), and in the LiteSpeed combined file it lands at byte ~1,428,000
 * against our sheets at ~419,000 — a megabyte LATER, so it also wins any tie on
 * order. Every ng section is an `elementor-widget-html`, so it applies to every
 * figure we ship.
 *
 * A page rule written the obvious way, `.ng-v2 .ng-xxx__fig{margin-inline:auto}`,
 * is (0,2,0) and silently loses every margin while keeping its max-width: the
 * band renders hard left with its caption jammed against the next block. Two
 * separate agents hit this independently, which is why it is fixed here rather
 * than in twenty page sheets.
 *
 * `--split` figures never needed this — they are grid items and take gap, not
 * margin — so only the standalone modifier carries spacing.
 *
 * WHAT NOT TO DO, LEARNED THE HARD WAY. The first version of this fix also shipped
 * a blanket `figure.ng-figband__fig.ng-figband__fig{margin:0}` at (0,5,1). That
 * added NOTHING over Elementor's own margin:0 — and it out-specified thirteen
 * page sheets that had already defended themselves at (0,5,0), re-breaking every
 * one of them flush-left. A shared reset that only restates what the framework
 * already does is pure specificity inflation; it cannot help, and it can only
 * take overrides away from pages. It is gone.
 *
 * So: pages own their figure spacing and beat Elementor at (0,5,0), e.g.
 *   .ng-v2 .ng-section .ng-container figure.ng-x__fig.ng-x__fig{ margin:0 auto 40px }
 *
 * `--center` is the shorthand for the plain case and sets ONLY the horizontal
 * centring. `max-width` and vertical rhythm stay with the page, because the cap
 * is only right when the frame would otherwise exceed it and the vertical step
 * differs per composition — 780/40, 780/30, 640, 620-left, 560, auto+26 are all
 * in use. A modifier that dictated all three would be overridden twice out of
 * three times, which is how you end up with an arms race instead of a primitive. */
.ng-v2 .ng-section .ng-container figure.ng-figband__fig--center.ng-figband__fig--center{
  margin-inline:auto;
}

/* A SENTENCE, not a label, so it takes the 14px reading floor rather than the
   tracked-label exception — the same call .ng-out__foot and .ng-note make. */
.ng-v2 .ng-figband__cap{
  margin:14px 0 0;
  font-size:14px; line-height:1.55;
  color:var(--ng-muted);
  max-width:68ch;
}

/* --- 17b. .ng-figband__frame--text — the OTHER LANGUAGE'S plate -----------
   Every one of these assets has Turkish text burnt into it, so it may only
   appear on the Turkish page. The English twin must not therefore collapse into
   a different composition: a visitor switching language should land on the same
   page, not a different one.

   This modifier keeps the frame, the chip and the caption exactly where they
   are and fills the box with the artefact's own caption line plus its figures
   as a §15c .ng-facts strip. Same section, same order, same shape, no Turkish.

   It is deliberately NOT height-matched to the image it stands in for. A plate
   padded out to 540px to match a picture is 200px of dead mist, which
   ng-page-check counts and reports. */
.ng-v2 .ng-figband__frame--text{
  padding:24px 22px;
}
/* THE CHIP NEEDS ITS OWN ROW HERE, and the image variant does not.
   Over a picture the chip floats in the artefact's own top margin and nothing
   is behind it. Over text it is absolutely positioned across the first line:
   the first English stand-in rendered "…or cost too much" running underneath
   the word SAMPLE. Found in a screenshot; nothing measurable was wrong.
   26px of clearance rather than a padding-right on the paragraph, which would
   have indented every line to protect one. */
.ng-v2 .ng-figband__sub{
  margin:0;
  max-width:52ch;
  font-size:17px; line-height:1.55;
  color:var(--ng-ink);
}
.ng-v2 .ng-figband__frame--text .ng-figband__sub{ margin-top:26px; }
.ng-v2 .ng-figband__sub + .ng-facts{ margin-top:22px; }

@media (max-width:767px){
  .ng-v2 .ng-figband{ gap:20px; }
  .ng-v2 .ng-figband__flag{ top:12px; right:12px; }
  /* 15px, the same step .ng-note takes at this width: it is read, not glanced
     at, and the mobile floor is what the contract measures. */
  .ng-v2 .ng-figband__cap{ font-size:15px; max-width:none; }
  .ng-v2 .ng-figband__frame--text{ padding:20px 16px; }
  .ng-v2 .ng-figband__sub{ font-size:16px; }
}


/* --- 17c. .ng-banner — the wide section opener ----------------------------
   Added 2026-08-24. The site measured 265 words per figure and the figures it
   had were 3:2 cards, so pages read as documents. This is the page-width plate
   that opens a section: 2240x960 rendered, 1120x480 displayed, with its heading
   drawn INTO the raster so a reader scanning the page is stopped before the
   prose.

   Full container width, not full bleed: the plate carries its own padding and
   its own footer rule, so bleeding it to the viewport edge would put its type
   closer to the screen edge than any other type on the page.

   aspect-ratio holds the box before the raster lands and the <img> repeats it
   in width/height — two independent reservations, CLS 0, the same belt and
   braces .ng-stage uses. */
/* TOP MARGIN, added 2026-08-25. margin-top was 0, on the assumption the plate
   always opens a section and therefore always follows a section head with its
   own bottom margin. On the homepage it does not: the sector band drops it
   straight after a paragraph, and the plate's top edge sat ~8px under the last
   line of prose while the caption sat immediately under its bottom edge. A
   full-width picture wedged between two blocks of text with no air reads as a
   layout fault.

   Asymmetric on purpose — 36 above, 44 below — because the caption belongs to
   the plate and has to stay closer to it than the next block of prose does. */
.ng-v2 .ng-banner{
  margin:36px 0 44px;
}
/* …but a plate that DOES open a section still sits tight under its head, where
   the section's own padding already supplies the air. (0,3,0) beats the rule
   above at (0,2,0). */
.ng-v2 .ng-section-head + .ng-banner,
.ng-v2 header + .ng-banner{ margin-top:20px; }
@media (max-width:767px){
  .ng-v2 .ng-banner{ margin:26px 0 32px; }
}
.ng-v2 .ng-banner__frame{
  border:1px solid var(--ng-hairline);
  border-radius:var(--ng-radius);
  overflow:hidden;
  background:var(--ng-surface-sunken);
}
.ng-v2 .ng-banner__img{
  display:block; width:100%; height:auto;
  aspect-ratio:7/3;
  object-fit:cover;
}
/* The caption is optional here in a way it is not on .ng-figband: this plate
   already carries its own heading, so a caption that repeats it is the echo
   §17b warns about. Use it only to say something the picture does not. */
/* THE AIR BELOW THE PLATE LIVES ON THE CAPTION, added 2026-08-26.
   CORRECTED TWICE. Read the whole note before touching anything here.

   THE SYMPTOM, measured: every captioned banner on the section pages rendered
   with computed `margin:0` on the figure and 0px of air below the caption, at
   1440 and at 390. On /sss/ that put a 12px grey caption against a 13px
   magenta .ng-eyebrow with nothing between them; on /cozumler/optimizasyon/
   the caption ran into the data table's own label line. That is what the owner
   reported.

   THE CAUSE IS ELEMENTOR SPECIFICITY, which is what the original diagnosis
   said. It ships
     `.elementor .elementor-widget:not(.elementor-widget-text-editor)
      :not(.elementor-widget-theme-post-content) figure{margin:0}`
   at (0,4,1), and `.ng-v2 .ng-banner` below is (0,2,0). Every section on this
   site lives in an Elementor `html` widget, so the reset matches every plate on
   every page and the rule below has never rendered inside one. Confirmed with
   CSS.getMatchedStylesForNode on 2026-08-27: on / and on
   /urunler/sahanin-gucu/ alike, Elementor's reset is the last matched rule and
   the figure computes 0/0.

   ON 2026-08-26 THIS NOTE SAID THE OPPOSITE, and that was wrong. It claimed
   the real culprit was LiteSpeed's UCSS deleting the margins, on the strength
   of a getComputedStyle() sweep that came back 36/44 shortly after
   wp-content/litespeed/ucss/ was emptied. That reading has never reproduced.
   The likeliest explanation — and it is a HYPOTHESIS, not a measurement — is
   the reverse of what was written: UCSS had been stripping ELEMENTOR's reset,
   so while it was active our margins won by default, and purging it restored
   the reset and unmasked a defect that had been there all along. Either way
   the fix does not depend on which is true.

   THE FIX, and why it is on the figcaption: a figcaption is not a `figure`, so
   Elementor's selector cannot reach it and nothing here has to out-specify a
   framework. The figure has no padding or border, so the caption's bottom
   margin collapses out through it and then with the next block's own
   margin-top, taking the larger — /kariyer/ keeps its 64px. Every non-hero
   banner on the site carries a caption, so no case is missed; the hero variant
   carries none and is untouched. The homepage does the same thing on
   .ng-banner__frame, which is a div, for the same reason
   (sections/6-solutions.css).

   68ch is §17a's cap for §17a's reason: /sss/ 30-sorular set 108 characters on
   a single 1072px line, twice any measure on the site.

   MEASURED AFTER DEPLOY: 44px below every caption at 1440 and 28px at 390,
   across 26 captioned banners on 16 pages.

   The rule below is left in place because it is correct wherever Elementor's
   reset does not reach — the blog wires this component outside a widget, and
   there the figure really does take 28px/44px. */
.ng-v2 .ng-banner__cap{
  margin:14px 0 44px;
  max-width:68ch;
  font-family:var(--ng-font-label); font-weight:500;
  font-size:12px; line-height:1.4; letter-spacing:.04em;
  color:var(--ng-muted);
  text-transform:none;
}
@media (max-width:767px){
  /* 28px, the same step the figure takes at this width in §17c-i below. */
  .ng-v2 .ng-banner__cap{ margin-bottom:28px; }
}
/* --- 17c-i. .ng-banner--hero — the masthead variant ------------------------
   Added 2026-08-24. A page's masthead sits directly above a section that
   usually carries a 7:3 banner, and two plates of the same silhouette stacked
   read as a stutter. The hero is 2:1 and full-bleed within the container, with
   its type drawn over the map behind a gradient rather than beside it — a
   different shape at a glance, from the same palette and type ramp.

   eager + fetchpriority=high, unlike §17c: this one is the LCP element on the
   pages that carry it, and lazy-loading your own LCP image is a measured
   regression, not a saving. */
.ng-v2 .ng-banner--hero{ margin:0 0 32px; }
.ng-v2 .ng-banner--hero .ng-banner__img{ aspect-ratio:2/1; }
/* Masthead children are capped at a reading measure on the post template via
   --ng-art-w; the section pages do not cap, so nothing is needed there. This
   rule is the belt for any page that starts capping later. */
.ng-v2 .ng-banner--hero{ --ng-art-w:100%; max-width:100%; }

/* THE HERO SPANS THE MASTHEAD GRID, added 2026-08-26.

   .ng-masthead__inner is one column below 960 and 58fr/42fr above it. The
   heroes were wired inside .ng-masthead__copy — the first of those two columns
   — so on every masthead without --stack a 2240px plate rendered at 58% of the
   container, and on twenty-six of them the other 42% was empty because those
   mastheads carry no aside. /biz-kimiz/ was the case the owner caught.

   The plate and the crumb above it are now direct children of __inner and are
   placed across both tracks. Explicit placement, not :has(): source order still
   decides the reading order, and this holds in whatever the visitor is running. */
.ng-v2 .ng-masthead__inner > .ng-crumbs,
.ng-v2 .ng-masthead__inner > .ng-banner--hero{ grid-column:1 / -1; }

@media (max-width:767px){
  /* At 342px the plate is a 3.3x downscale and its 92px heading lands at 14px —
     legible, but the legend column does not survive. The raster stays whole
     rather than being cropped: a banner that loses half its own legend is worse
     than a small one. */
  .ng-v2 .ng-banner{ margin-bottom:28px; }
}