/* ==========================================================================
   /urunler/point-report/ (TR 23311) + /en/products/point-report/ (EN 25696)
   One stylesheet for the pair — the two posts share post_name=point-report, so
   ng-page-apply keys the CSS on the slug and both ids install the same file.

   VARIANCE PASS (ARCHETYPES.md): opening E-DARK · dark OPEN · 4 sections.
   The masthead IS the indigo band and nothing below it is dark. The tonal order
   is DARK · MIST · GROUND · MIST, deliberately the inverse of
   /urunler/adres-cozumleri/ (DARK · GROUND · MIST · GROUND), which is this
   page's nearest sibling: it carries the SAME assignment, so the tonal order
   and the dominant content shape are the only things left to distinguish them.

   THE DOMINANT CONTENT SHAPE IS A REAL TABLE, not another card grid. This
   product is a document with six sections, and six sections that share three
   properties — what the section is, what the report returns, which fields it
   names — are rows sharing columns. §3 below is that table; §2 is the report's
   cover sheet, which is what the dark band holds instead of an aside.

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


/* ==========================================================================
   1. THE DARK COVER MASTHEAD — .ng-cover
   E-DARK: `class="ng-section is-dark ng-cover"`. `ng-section--dark` is NOT
   written, because that modifier is the CENTRED CLOSING composition
   (text-align:center + a centred flex container) and this band is a
   left-aligned opening; `is-dark` alone is what flips the palette tokens and
   supplies --ng-section-pad-dark (ng-foundation.css §3 + §7).

   TWO COLUMNS, 54/46 — wider on the plate side than ng-shared's 58/42
   masthead, because the plate here is not a quote card but a document with
   four key/value rows whose values ("TÜİK · Next Geo veri tabanı · özel
   modelleme") are the long half of the pair. At 42% those wrapped to three
   lines each and the sheet was taller than the copy beside it.

   The class is .ng-cover rather than .ng-dlead / .ng-dopen (fmcg,
   adres-cozumleri / reklamcilik) on purpose: those two names already describe
   different dark openings on other pages, and no two page sheets ever load
   together, so the only cost of reusing one would be a name that lies to the
   next person grepping for it.
   ========================================================================== */
.ng-v2 .ng-cover__inner{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:34px;
  align-items:start;
}
@media (min-width:960px){
  .ng-v2 .ng-cover__inner{
    grid-template-columns:minmax(0,54fr) minmax(0,46fr);
    column-gap:56px;
  }
}
.ng-v2 .ng-cover__copy{ min-width:0; }
/* The h1 keeps ng-shared §4's scale and its 18ch measure — this IS a split
   composition, just an inverted one, so the headline shares the first screen
   with a plate exactly as §4 assumes. Only the top margin is restated, because
   the eyebrow above it is a pill rather than a bare label. */
.ng-v2 .ng-cover__title.ng-cover__title{ margin-top:18px; }
.ng-v2 .ng-cover__lede{ max-width:52ch; }
.ng-v2 .ng-cover__note{ max-width:60ch; }


/* ==========================================================================
   2. THE COVER SHEET — .ng-sheet
   What the dark band holds instead of an aside: the report's own cover, with
   the subject the hub prints, the sample address, the scope and the two
   delivery formats. A visitor sees what the product physically IS before
   reading a claim about it — which is the argument for this page opening on a
   document rather than on a value proposition.

   NO WHITE PLATE, AND THAT IS NOT A COMPROMISE. Inside `.is-dark`,
   --ng-surface is a 6% paper fill and --ng-hairline a 16% one: ng-foundation
   §3 states plainly that elevation on the indigo band is carried by TONE, not
   by shade, because a navy-tinted drop shadow on navy is a smudge. A literal
   white would also be a hardcoded colour, which PATTERNS.md rule 1 bans. So
   the sheet is lit by the same light as the band it sits on.

   MEASURED CONTRAST, from ng-foundation.css §3's own table: ink #FAFBFF on the
   6% surface #282C68 is 12.30:1; muted #C6C9EA on it is 7.84:1; the pink
   accent #FF9BC9 on the accent-wash is 5.89:1. Nothing in this block is under
   4.5:1 and nothing needs the large-text exemption.
   ========================================================================== */
.ng-v2 .ng-sheet{
  margin:0;                           /* <figure> — the theme gives it 1em 40px */
  display:flex; flex-direction:column;
  background:var(--ng-surface);
  border:1px solid var(--ng-hairline);
  border-radius:var(--ng-radius);
  overflow:hidden;                    /* the bar's fill has to stop at the radius */
}
/* The chrome bar, same idiom as ng-shared §13b's .ng-out__bar: a tag on the
   left, the illustrative flag on the right. This sheet is not an .ng-out
   because .ng-out is white-on-light by definition (it sets --ng-surface as its
   own background and carries --ng-shadow-card), and on the dark band both of
   those resolve to something it was never drawn for. */
.ng-v2 .ng-sheet__bar{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:12px 18px;
  background:var(--ng-surface-sunken);
  border-bottom:1px solid var(--ng-hairline);
}
.ng-v2 .ng-sheet__tag{
  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-sheet__flag{
  flex:none;
  padding:4px 9px;
  border-radius:var(--ng-radius-pill);
  background:var(--ng-accent-wash);
  color:var(--ng-accent);
  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-sheet__body{ padding:22px 18px 20px; }
@media (min-width:960px){
  .ng-v2 .ng-sheet__body{ padding:26px 26px 24px; }
}
.ng-v2 .ng-sheet__label{ margin:0; }
/* A ruled break between the cover's three blocks — subject, scope, delivery.
   A hairline plus air, not a second fill: the sheet is already a surface and a
   shaded sub-block inside it would be the third surface role this system does
   not have. */
.ng-v2 .ng-sheet__label.is-second{
  margin-top:22px; padding-top:20px;
  border-top:1px solid var(--ng-hairline);
}
/* The subject line is the /urunler/ hub's own need line, quoted verbatim —
   PATTERNS.md's first leaf rule, answered in the first viewport. A report cover
   carries a subject, so quoting it here is the document's own grammar rather
   than a pull-quote pinned to the side.

   TWO THEME RULES ARE BEING BEATEN HERE, AND ONE OF THEM ONLY SHOWED UP IN A
   SCREENSHOT. themes/neuros/css/theme.css §8703 sets on every blockquote inside
   .content-wrapper:

     body .content-wrapper blockquote                  (0,1,2) padding-left 3.5em
     body .content-wrapper blockquote:not(:first-child)(0,2,2) margin-top 2.5rem
     body .content-wrapper blockquote:not(:last-child) (0,2,2) margin-bottom 2.5rem
     body .content-wrapper blockquote:before           (0,1,2) fontello '\e82f'
                                                       at 2.25em, absolute left:0

   A plain `.ng-v2 .ng-sheet__quote` is (0,2,0) and LOSES to the two `:not()`
   rules — `:not()` counts its argument, the same trap as the
   `h2:not(:first-child){margin-top:50px}` rule that put 500px of unasked-for
   air on the homepage — so the box declarations carry the doubled class. The
   ::before is worse than a spacing bug: it painted a 43px fontello quote glyph
   ON TOP of the hub's own words in the first render of this page, and
   ng-page-check reported the page clean with it there. ng-shared §13a resets it
   for .ng-aside__quote and says why; this is the same reset for the same
   reason, because a page-level blockquote class does not inherit that defence. */
.ng-v2 .ng-sheet__quote.ng-sheet__quote{
  margin:10px 0 0;
  padding:2px 0 2px 16px;
  border-left:3px solid var(--ng-accent);
  font-family:var(--ng-font-display); font-weight:600;
  font-size:19px; line-height:1.35;
  letter-spacing:-0.01em;
  color:var(--ng-ink);
}
.ng-v2 .ng-sheet__quote::before,
.ng-v2 .ng-sheet__quote::after{ content:none; }
.ng-v2 .ng-sheet__addr{
  margin:14px 0 0;
  display:flex; flex-wrap:wrap; align-items:baseline; gap:10px;
  font-size:15px; line-height:1.5;
  color:var(--ng-ink);
}
.ng-v2 .ng-sheet__addrk{
  flex:none;
  font-family:var(--ng-font-label); font-weight:600;
  font-size:11px; line-height:1.3; letter-spacing:.1em;
  text-transform:none;
  color:var(--ng-muted);
}

/* The scope rows. Key/value DOWN a narrow panel is what ng-shared §14's
   .ng-env does, and this is that shape — but it is inside a dark plate whose
   own hairline is a 16% white, so the rule colour, the label colour and the
   value weight all have to be read from the dark tokens rather than from
   .ng-env's light-band body. Restated here rather than overridden there:
   overriding six declarations of a shared primitive to invert it is how a page
   sheet ends up owning a component by accident. */
.ng-v2 .ng-sheet__kv{ margin:12px 0 0; }
.ng-v2 .ng-sheet__row{
  display:grid;
  grid-template-columns:minmax(0,40%) minmax(0,1fr);
  gap:12px;
  padding:9px 0;
  border-top:1px solid var(--ng-hairline);
}
.ng-v2 .ng-sheet__row:first-child{ border-top:0; padding-top:2px; }
.ng-v2 .ng-sheet__k{
  margin:0;
  font-size:14px; line-height:1.45;
  color:var(--ng-muted);              /* 7.84:1 on the 6% surface */
}
/* dd's UA margin-inline-start:40px is reset explicitly — without it every
   value sits 40px in from its column and the sheet looks broken at 390 only. */
.ng-v2 .ng-sheet__v{
  margin:0;
  font-family:var(--ng-font-label); font-weight:600;
  font-size:14px; line-height:1.45;
  color:var(--ng-ink);
  font-variant-numeric:tabular-nums;
}

/* The two delivery formats — the two /urunler/ cards that point at this one
   URL. Numbered, because the proof strip opposite counts them ("2 TESLİM
   BİÇİMİ") and a reader should be able to see the two things being counted. */
.ng-v2 .ng-sheet__del{
  list-style:none; margin:12px 0 0; padding:0;
  display:grid; gap:12px;
}
.ng-v2 .ng-sheet__di{
  display:grid; grid-template-columns:auto minmax(0,1fr);
  gap:12px; align-items:start;
}
/* 12px at .1em — ratio .10, over the 0.08 the checker measures for the tracked
   label exception. */
.ng-v2 .ng-sheet__dn{
  font-family:var(--ng-font-label); font-weight:600;
  font-size:12px; line-height:1.75; letter-spacing:.1em;
  text-transform:none;
  color:var(--ng-accent);
  font-variant-numeric:tabular-nums;
}
.ng-v2 .ng-sheet__dc{
  font-size:14px; line-height:1.55;
  color:var(--ng-muted);
}
.ng-v2 .ng-sheet__dname{
  font-weight:600;
  color:var(--ng-ink);
}
/* The caption is the second place the cover is labelled illustrative, after
   the ÖRNEK KAPAK chip in its own chrome. Site rule: an illustrative figure is
   labelled where it is shown, not in a footnote. */
.ng-v2 .ng-sheet__cap{
  margin:0;
  padding:14px 18px 16px;
  border-top:1px solid var(--ng-hairline);
  font-size:14px; line-height:1.55;
  color:var(--ng-muted);
}
@media (min-width:960px){
  .ng-v2 .ng-sheet__cap{ padding:14px 26px 18px; }
}


/* ==========================================================================
   3. THE CONTENTS TABLE — .ng-toc
   The page's dominant content shape. Mist band, one white sheet, one real
   <table> inside it: the two-surface rule (sunken holds white chrome) doing
   double duty as the document metaphor — a contents page lying on the desk.

   WHY A TABLE AND NOT SIX CARDS. Every leaf on this site answers "what do I
   get" with a grid, which is the finding this pass exists to fix. These six
   rows genuinely share three columns, and a <table> with <caption>, <thead>,
   <th scope> and two <tbody> row groups tells a screen reader which column a
   cell belongs to — which no six-card grid does.

   COLUMN WIDTHS ARE SET ON THE HEADER ROW ONLY. ng-shared §15b deliberately
   leaves widths to the page ("which column is wide is a property of the
   content"). They are declared on `thead th` rather than on `tr > :nth-child()`
   because two rows in this table are group headings with `colspan="3"`, and a
   width landing on a spanning cell does not describe a column.
   ========================================================================== */
.ng-v2 .ng-toc__sheet{
  margin-top:34px;
  padding:22px 18px 20px;
  background:var(--ng-surface);
  border:1px solid var(--ng-hairline);
  border-radius:var(--ng-radius);
  box-shadow:var(--ng-shadow-card);
}
@media (min-width:960px){
  .ng-v2 .ng-toc__sheet{ padding:30px 32px 26px; }
  .ng-v2 .ng-toc__table thead th:nth-child(1){ width:26%; }
  .ng-v2 .ng-toc__table thead th:nth-child(2){ width:42%; }
  .ng-v2 .ng-toc__table thead th:nth-child(3){ width:32%; }
}
/* The row group heading. `scope="rowgroup"` is what a heading over a set of
   rows IS; the previous iteration said the same two things as <h3>s over two
   card grids. Tracked label, muted, no bottom rule — it labels the rows under
   it rather than dividing them from it. */
.ng-v2 .ng-toc__table th.ng-toc__gname{
  padding:26px 0 10px;
  border-bottom:0;
  font-family:var(--ng-font-label); font-weight:600;
  font-size:11px; line-height:1.3; letter-spacing:.12em;
  text-transform:none;                /* authored pre-uppercased */
  color:var(--ng-muted);
}
/* The caption, the column headers and the first group label are three tracked
   grey lines in a row; without this the sheet opens on a stack of labels and a
   reader cannot tell which one names the rows. The caption takes 16px of air
   and the first group label 18px, so the three read as caption / columns /
   group rather than as one block. */
.ng-v2 .ng-toc .ng-dtable__cap{ padding-bottom:16px; }
.ng-v2 .ng-toc__table tbody:first-of-type th.ng-toc__gname{ padding-top:18px; }
/* ng-shared removes the bottom rule from the last row of EACH tbody, so row 03
   has none. The second group's heading supplies it instead — one rule between
   the two groups, drawn once, in the place a reader expects a chapter break. */
.ng-v2 .ng-toc__table tbody + tbody th.ng-toc__gname{
  padding-top:22px;
  border-top:1px solid var(--ng-hairline);
}
.ng-v2 .ng-toc__table th.ng-toc__h{
  padding:16px 18px 16px 0;
  vertical-align:top;
}
/* The ordinal is the report's own section number, and it is the accent's only
   appearance inside the sheet: six accent-coloured names would read as six
   links. 11px at .1em clears the tracked-label threshold by measurement. */
.ng-v2 .ng-toc__n{
  display:block;
  font-family:var(--ng-font-label); font-weight:600;
  font-size:11px; line-height:1.3; letter-spacing:.1em;
  text-transform:none;
  color:var(--ng-accent);             /* 5.64:1 on white */
  font-variant-numeric:tabular-nums;
}
.ng-v2 .ng-toc__name{
  display:block;
  margin-top:6px;
  font-family:var(--ng-font-display); font-weight:600;
  font-size:17px; line-height:1.25;
  letter-spacing:-0.01em;
  color:var(--ng-ink);
}
.ng-v2 .ng-toc__table td.ng-toc__what{
  padding-top:16px; padding-bottom:16px;
  vertical-align:top;
  font-size:15px; line-height:1.55;
  color:var(--ng-muted);              /* 6.21:1 on white */
}
.ng-v2 .ng-toc__table td.ng-toc__fields{
  padding-top:14px; padding-bottom:16px;
  vertical-align:top;
}
/* .ng-pills carries margin-top:12px for the case where it follows a card body;
   inside a table cell the cell's own padding is the gap. */
.ng-v2 .ng-toc__fields .ng-pills{ margin:0; }
.ng-v2 .ng-toc__note{ margin-top:26px; max-width:88ch; }


/* ==========================================================================
   4. THE SAMPLE OUTPUT — section 30, now on the GROUND band
   The two panels are ng-shared §13b's .ng-out: white, hairline, --ng-shadow-card.
   They read as raised on the ground exactly as they did on the mist, and the
   band change is what makes this page's tonal order (DARK·MIST·GROUND·MIST) the
   inverse of its nearest sibling's.
   ========================================================================== */
@media (max-width:1364px){
  .ng-v2 .ng-out-band{ scroll-margin-top:84px; }
}
@media (min-width:960px){
  .ng-v2 .ng-out-band__pair{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:24px;
  }
}

/* The note belongs to the pair, not to either panel, so it is centred under
   both — and since the second pass it once again sits DIRECTLY under the pair,
   with the map strip below it, so it hedges only the invented numbers. It is
   the third place the sample is labelled illustrative, after the ÖRNEK chip in
   the first panel's chrome and the word "Örnek" in its subject line. */
.ng-v2 .ng-out-band__note{
  margin:26px auto 0;
  max-width:88ch;
  text-align:center;
}

/* A second labelled block inside one panel body. ng-shared's .ng-out__label
   sits flush at the top of the body; the second one needs air above it and a
   hairline would over-rule an already ruled panel. */
.ng-v2 .ng-out__label.is-second{ margin-top:24px; }


/* --- 4a. the pedestrian access rings ---------------------------------------
   Three rows with a bar each is the honest rendering of "erişim alanı
   haritası" without drawing a map: the report's answer is that the catchment
   roughly triples between the 5-minute and the 15-minute ring, and a bar makes
   that visible where three bare numbers do not.

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

   ONE ACCENT ROW, THE REST INDIGO — the 10-minute ring, because it is the row
   the comparative block below is computed for and the foot sentence says so. If
   every bar were accent the set would read as a brand pattern rather than as a
   measurement. */
.ng-v2 .ng-ring{
  list-style:none; margin:0; padding:0;
  display:grid; gap:14px;
}
.ng-v2 .ng-ring__row{
  display:grid;
  grid-template-columns:minmax(88px,auto) minmax(0,1fr) auto;
  align-items:center;
  gap:12px;
}
.ng-v2 .ng-ring__name{
  font-family:var(--ng-font-display); font-weight:600;
  font-size:15px; line-height:1.3;
  color:var(--ng-ink);
}
.ng-v2 .ng-ring__bar{
  display:block;
  height:6px; border-radius:3px;
  background:var(--ng-surface-sunken);
  overflow:hidden;
}
.ng-v2 .ng-ring__bar i{
  display:block; height:100%; border-radius:3px;
  background:var(--ng-indigo);
}
.ng-v2 .ng-ring__row.is-top .ng-ring__bar i{ background:var(--ng-accent); }
/* 17px, so --ng-accent (not --ng-accent-display) is the correct token on the
   accent row: display magenta is reserved for 24px and up and would fail AA
   here. 5.64:1 on white. */
.ng-v2 .ng-ring__val{
  text-align:right;
  font-family:var(--ng-font-display); font-weight:700;
  font-size:17px; line-height:1.15;
  letter-spacing:-0.01em;
  color:var(--ng-ink);
  font-variant-numeric:tabular-nums;
}
.ng-v2 .ng-ring__row.is-top .ng-ring__val{ color:var(--ng-accent); }


/* --- 4b. the comparative rows ----------------------------------------------
   The client's own copy for bölüm 03 promises "karşılaştırmalı tablolar" at
   mahalle, ilçe and il level. A real four-column table was built first and
   rejected at 390: 314px of usable panel width across a parameter name and
   three values gave the name ~130px, which wraps "1 km'de aynı sektörde rakip"
   onto three lines and puts the numbers out of alignment with it. (The page's
   OTHER table, §3, is 1120px wide and stacks at 390 — the difference is the
   frame it sits in, which is why one is a table and one is a row.)

   So the comparison is a ROW instead — the access-area value large on the
   right, the reference values as a second line under the parameter name. It
   states exactly the same three numbers, reads as a report line rather than as
   a spreadsheet, and needs no horizontal scroll at any width.

   dd's UA `margin-inline-start:40px` is reset explicitly; without it every
   value sits 40px in from the right edge and the column looks broken at 390
   only. */
.ng-v2 .ng-cmp{ margin:0; }
.ng-v2 .ng-cmp__row{
  display:flex; align-items:baseline; gap:16px;
  padding:12px 0;
  border-top:1px solid var(--ng-hairline);
}
.ng-v2 .ng-cmp__row:first-child{ border-top:0; padding-top:0; }
.ng-v2 .ng-cmp__k{
  flex:1 1 auto; min-width:0;
  margin:0;
  font-size:15px; line-height:1.4;
  color:var(--ng-ink);
}
/* The reference values. 14px is the reading floor and this line is read — it is
   three numbers, not a label — so it does not take the tracked-label exception
   and is not tracked. */
.ng-v2 .ng-cmp__ref{
  display:block;
  margin-top:3px;
  font-size:14px; line-height:1.45;
  color:var(--ng-muted);              /* 6.21:1 on --ng-surface */
}
.ng-v2 .ng-cmp__v{
  flex:0 0 auto;
  margin:0;
  text-align:right;
  font-family:var(--ng-font-display); font-weight:700;
  font-size:19px; line-height:1.25;
  letter-spacing:-0.01em;
  color:var(--ng-ink);
  font-variant-numeric:tabular-nums;
}


/* --- 4c. the chat reply ----------------------------------------------------
   THIS IS A DELIBERATE SECOND COPY OF THE HOMEPAGE'S THREAD REPLICA, and it has
   to be. sections/5-product.css is compiled into ng-sections.css, which is
   HOMEPAGE-ONLY and is never in an inner page's cascade — the two files are
   disjoint on purpose (see the ng-shared.css header), because refactoring a
   primitive out from under the live homepage would put thirteen verified
   sections back in play for a regression only a screenshot catches. The class
   names are kept identical to the homepage's so the relationship is greppable.

   WHY THE THREAD IS ON THIS PAGE AT ALL: the products hub's WhatsApp card says
   "Point Report üzerinden teslim edilir", and the homepage's Point Report card
   states that the report can be requested over WhatsApp. A visitor arrives here
   having been promised that thread. The figures are the homepage's own,
   verbatim, so the two pages cannot disagree.

   WHATSAPP'S LAYOUT LANGUAGE ONLY — bubble alignment, tails, timestamps,
   delivery ticks. No logo, no wordmark, no brand green: there is no licence for
   those and a fake-branded mockup would be worse than none. Unchanged from the
   homepage's decision.

   THREE THINGS DIFFER FROM THE HOMEPAGE COPY, all forced by the ground:
     1. the thread sits on a MIST plate. On the homepage it sits inside a dark
        panel, where a white incoming bubble reads on its own. Here the panel
        body is white, and a white bubble with a hairline on white is an outline
        on its own background — the same finding that made .ng-pills mist by
        default in ng-shared §7. Mist plate, white chrome: the site's two-surface
        rule, unchanged.
     2. .ng-chat__k is 14px, not the homepage's 13px. Nothing on an inner page
        is allowed under the reading floor, and these are data fields a visitor
        reads, not chrome they glance at.
     3. .ng-chat__stamp is tracked at .1em rather than .06em. ng-page-check
        exempts a label only where letter-spacing/font-size >= 0.08, and 11px at
        .06em does not clear it — on the homepage that line is one of the
        accepted app-replica exceptions, and this page does not need an
        exception when a tracking value it should have had anyway removes it.
     4. the "NOKTA RAPORU" kicker is .ng-chat__kicker here. The homepage uses
        .ng-ui__label, which belongs to its own product-panel chrome and is not
        in this cascade. */
.ng-v2 .ng-chat{
  margin:0;
  padding:16px 14px;
  display:flex; flex-direction:column; gap:14px;
  background:var(--ng-surface-sunken);
  border:1px solid var(--ng-hairline);
  border-radius:var(--ng-radius-sm);
}
.ng-v2 .ng-chat__row{ display:flex; }
.ng-v2 .ng-chat__row--out{ justify-content:flex-end; }
.ng-v2 .ng-chat__row--in{ justify-content:flex-start; }
.ng-v2 .ng-chat__bubble{
  position:relative;
  max-width:88%;
  padding:11px 13px 8px;
  border-radius:var(--ng-radius-sm);
  border:1px solid var(--ng-hairline);
}
/* Bubble tails. Both fills composite over the SAME mist plate, so a triangle
   drawn in the bubble's own colour matches it exactly. */
.ng-v2 .ng-chat__bubble::after{
  content:""; position:absolute; top:10px;
  width:0; height:0;
  border-top:6px solid transparent;
  border-bottom:6px solid transparent;
}
.ng-v2 .ng-chat__bubble--out{
  background:var(--ng-accent-wash);
  border-top-right-radius:4px;
}
.ng-v2 .ng-chat__bubble--out::after{
  right:-6px;
  border-left:7px solid var(--ng-accent-wash);
}
.ng-v2 .ng-chat__bubble--in{
  background:var(--ng-surface);
  border-top-left-radius:4px;
  max-width:96%;
}
.ng-v2 .ng-chat__bubble--in::after{
  left:-6px;
  border-right:7px solid var(--ng-surface);
}
.ng-v2 .ng-chat__text{
  margin:0;
  font-size:15px; line-height:1.5;
  color:var(--ng-ink);
}
/* 11px at .1em (ratio .10) — a tracked label by measurement, which is what
   ng-page-check actually tests, and 11px is the app-replica floor the contract
   sets. */
.ng-v2 .ng-chat__stamp{
  margin:5px 0 0;
  text-align:right;
  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);
}
/* Delivery ticks. U+2713 is not in Manrope's cmap, so a text checkmark falls
   back to whatever the system supplies and the pair read as "//" in the
   homepage's screenshot. Drawn as inline SVG instead — no icon font, no script,
   currentColor. */
.ng-v2 .ng-chat__tick{
  display:inline-block; vertical-align:-1px;
  margin-left:5px;
  color:var(--ng-accent);
}

/* the incoming bubble carries the report card itself */
.ng-v2 .ng-chat__card{
  border:1px solid var(--ng-hairline);
  border-radius:var(--ng-radius-sm);
  padding:12px 13px 10px;
  background:var(--ng-surface-sunken);
}
.ng-v2 .ng-chat__kicker{
  margin:0;
  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 */
  color:var(--ng-muted);
}
.ng-v2 .ng-chat__addr{
  margin:6px 0 0;
  font-size:14px; line-height:1.45;
  color:var(--ng-ink);
}
.ng-v2 .ng-chat__score{
  margin:12px 0 0;
  display:flex; align-items:baseline; gap:2px; flex-wrap:wrap;
}
/* 30px is over the 24px threshold, so --ng-accent-display would be legal here.
   It is still not used: this number is the same 72 the homepage prints in ink,
   and two renderings of one sample figure should not differ in colour. */
.ng-v2 .ng-chat__num{
  font-family:var(--ng-font-display); font-weight:700;
  font-size:30px; line-height:1;
  color:var(--ng-ink);
  font-variant-numeric:tabular-nums;
}
.ng-v2 .ng-chat__den{ font-size:14px; color:var(--ng-muted); }
.ng-v2 .ng-chat__scorelab{
  margin-left:8px;
  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);
}
.ng-v2 .ng-chat__rows{
  margin:12px 0 0;
  border-top:1px solid var(--ng-hairline);
}
.ng-v2 .ng-chat__rw{
  display:flex; align-items:baseline; justify-content:space-between; gap:14px;
  padding:8px 0;
  border-bottom:1px solid var(--ng-hairline);
}
.ng-v2 .ng-chat__rw:last-child{ border-bottom:0; padding-bottom:0; }
.ng-v2 .ng-chat__k{
  margin:0;
  font-size:14px; line-height:1.4;
  color:var(--ng-muted);
}
.ng-v2 .ng-chat__v{
  margin:0;
  font-family:var(--ng-font-label); font-weight:600;
  font-size:14px; line-height:1.4;
  color:var(--ng-ink);
  font-variant-numeric:tabular-nums;
}


/* ==========================================================================
   5. THE METHOD LADDER AND THE CLOSE — section 40, mist band
   The ladder is ng-shared §13c and the pills are §7's --onmist variant, because
   a mist pill on a mist band is invisible. Only the note, the chip row and the
   closing panel are this page's.
   ========================================================================== */
.ng-v2 .ng-how__note{
  margin-top:34px;
  max-width:80ch;
}
.ng-v2 .ng-how__links{ margin-top:18px; }

/* --- 5a. the closing panel ------------------------------------------------
   THE PAGE CANNOT CLOSE ON THE INDIGO SLAB — `dark: OPEN` spends the only dark
   band on the masthead. akaryakit and gayrimenkul answered the same wall with a
   mist rail on the ground; this page's last band IS the mist, so it runs the
   other way round, as saglik's does: the SUNKEN band holds a RAISED white
   panel. Same class names as those three sheets on purpose — it is one idiom
   with two surface arrangements, and no two page sheets ever load together.
   Still not promoted to ng-shared: four leaves have now written
   .ng-close__rail and not the same one, and promoting the shared half while the
   surface differs would just move the disagreement into the shared file.

   It sits inside the last section rather than in a section of its own, because
   the assignment is four sections and this is the fourth. */
.ng-v2 .ng-close__rail{
  margin-top:46px;
  padding:26px 22px;
  background:var(--ng-surface);
  border:1px solid var(--ng-hairline);
  border-radius:var(--ng-radius);
  box-shadow:var(--ng-shadow-card);
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:24px;
}
@media (min-width:900px){
  .ng-v2 .ng-close__rail{
    grid-template-columns:minmax(0,1fr) auto;
    column-gap:44px;
    align-items:center;
    padding:34px 36px;
  }
}
.ng-v2 .ng-close__eyebrow{ margin:0; }
/* Doubled class for the theme's `h2:not(:first-child){margin-top:50px}` at
   (0,2,2): this h2 is NOT the first child of its block — the eyebrow is — so
   the theme rule matches it, unlike the three section heads. */
.ng-v2 .ng-close__title.ng-close__title{
  margin:14px 0 0;
  font-size:clamp(1.6rem, 3.2vw, 2.1rem);
  line-height:1.15;
  letter-spacing:-0.02em;
  max-width:22ch;
  text-wrap:balance;
}
.ng-v2 .ng-close__lede{
  margin:14px 0 0;
  font-size:17px; line-height:1.6;
  color:var(--ng-muted);              /* 6.21:1 on white */
  max-width:54ch;
}
.ng-v2 .ng-close__side{
  display:flex; flex-direction:column;
  align-items:flex-start;
  gap:4px;
}
@media (min-width:900px){
  .ng-v2 .ng-close__side{ align-items:flex-end; text-align:right; }
}
.ng-v2 .ng-close__actions{ margin-top:0; }
/* 14px for the same reason .ng-cta__meta is: a phone number and an address are
   read and copied, and .04em tracking does not earn the label exception. */
.ng-v2 .ng-close__meta{
  margin:18px 0 0;
  font-family:var(--ng-font-label); font-weight:500;
  font-size:14px; line-height:1.6; letter-spacing:.04em;
  color:var(--ng-muted);
}


/* ==========================================================================
   6. RESPONSIVE
   ng-shared and ng-mobile carry the 44px hit areas (crumbs, buttons, chips) at
   <=767, at 768-1023 and at exactly 1024, and the 16px reading floor at <=767.
   Every interactive element on this page is one of those primitives — the cover
   sheet, the contents table, the rings, the comparative rows and the chat
   thread are static DOM — so what follows is type, rhythm and one layout
   change: the table stacks.
   ========================================================================== */

@media (max-width:959px){
  /* The pair stacks. The report page stays first: it is the answer to the
     first delivery format, and the chat panel is the second's. */
  .ng-v2 .ng-out-band__note{ text-align:left; }
}

@media (max-width:767px){
  /* Sentences, not labels: they take the mobile reading floor like every other
     .ng-note on the site (ng-shared §12 already sets .ng-note to 15px at this
     width). Only the measure is restated. */
  .ng-v2 .ng-cover__note,
  .ng-v2 .ng-toc__note,
  .ng-v2 .ng-how__note,
  .ng-v2 .ng-out-band__note{ max-width:none; }
  .ng-v2 .ng-cover__lede{ max-width:none; }

  /* The cover sheet at 390. The quote comes down one step and the two key/value
     columns become one, because "TÜİK · Next Geo veri tabanı · özel modelleme"
     in 55% of 310px is four lines against a one-line key. */
  .ng-v2 .ng-sheet__body{ padding:20px 16px 18px; }
  .ng-v2 .ng-sheet__cap{ padding:14px 16px 16px; }
  .ng-v2 .ng-sheet__quote{ font-size:18px; }
  .ng-v2 .ng-sheet__addr{ font-size:16px; }
  .ng-v2 .ng-sheet__row{
    grid-template-columns:minmax(0,1fr);
    gap:3px;
  }
  .ng-v2 .ng-sheet__k,
  .ng-v2 .ng-sheet__v{ font-size:15px; }
  .ng-v2 .ng-sheet__dc{ font-size:16px; }
  .ng-v2 .ng-sheet__cap{ font-size:15px; }

  /* --- the contents table stacks -----------------------------------------
     Three columns cannot fit 342px, and ng-shared §15b's own comment says a
     table that only fits by scrolling has hidden a column from every phone. So
     each row becomes a block: ordinal, name, sentence, fields.

     `display:block` on table elements STRIPS THE TABLE ROLE in Chrome and
     Firefox, which is why the markup carries explicit role attributes. The
     header row is clipped rather than `display:none`d for the same reason —
     display:none takes it out of the accessibility tree entirely. */
  .ng-v2 .ng-toc__sheet{ padding:20px 16px 18px; }
  .ng-v2 .ng-toc__table,
  .ng-v2 .ng-toc__table tbody,
  .ng-v2 .ng-toc__table tfoot,
  .ng-v2 .ng-toc__table tr,
  .ng-v2 .ng-toc__table th,
  .ng-v2 .ng-toc__table td{ display:block; width:auto; }
  /* The caption keeps `display:table-caption` when everything around it goes to
     block, and a table-caption with no table box to size against shrinks to
     fit: at 390 the contents caption rendered in a 140px column, six lines
     deep, while the sheet beside it was 342px wide. Found in a screenshot; the
     page reported clean with it. */
  .ng-v2 .ng-toc .ng-dtable__cap{
    display:block;
    width:auto;
    padding-bottom:14px;
  }
  .ng-v2 .ng-toc__table thead{
    position:absolute;
    width:1px; height:1px; margin:-1px; padding:0;
    overflow:hidden; clip-path:inset(50%);
    white-space:nowrap;
  }
  .ng-v2 .ng-toc__table tbody tr{
    padding:16px 0 20px;
    border-bottom:1px solid var(--ng-hairline);
  }
  .ng-v2 .ng-toc__table tbody tr.ng-toc__grow{
    padding:24px 0 0;
    border-bottom:0;
  }
  .ng-v2 .ng-toc__table tbody:first-of-type tr.ng-toc__grow{ padding-top:0; }
  .ng-v2 .ng-toc__table tbody:last-of-type tr:last-child{ border-bottom:0; }
  .ng-v2 .ng-toc__table th.ng-toc__gname{
    padding:0 0 2px;
    border-top:0;
  }
  .ng-v2 .ng-toc__table tbody + tbody th.ng-toc__gname{ padding-top:0; }
  .ng-v2 .ng-toc__table th.ng-toc__h,
  .ng-v2 .ng-toc__table td.ng-toc__what,
  .ng-v2 .ng-toc__table td.ng-toc__fields{
    padding:0;
    border-bottom:0;
  }
  .ng-v2 .ng-toc__name{ font-size:18px; }
  .ng-v2 .ng-toc__table td.ng-toc__what{
    margin-top:10px;
    font-size:16px;                   /* mobile reading floor */
  }
  .ng-v2 .ng-toc__table td.ng-toc__fields{ margin-top:12px; }
  .ng-v2 .ng-toc__table tfoot td.ng-toc__foot{
    padding:16px 0 0;
    font-size:15px;
  }

  /* The rings at 390. 88px is enough for "15 dk yaya" / "15 min walk" at 16px
     and leaves ~140px of bar, which still reads as a length comparison. */
  .ng-v2 .ng-ring{ gap:13px; }
  .ng-v2 .ng-ring__row{ gap:10px; }
  .ng-v2 .ng-ring__name{ font-size:16px; }    /* reading floor */
  .ng-v2 .ng-ring__val{ font-size:18px; }

  /* Comparative rows and chat data at the mobile floors. .ng-cmp__ref and the
     chat's key/value pairs go to 15px rather than 16px: they are the second
     line of a row and the fields of an app replica respectively, both over the
     14px minimum and both under their own primary line, which is what keeps the
     hierarchy readable in a 342px panel. */
  .ng-v2 .ng-cmp__k{ font-size:16px; }
  .ng-v2 .ng-cmp__ref{ font-size:15px; }
  .ng-v2 .ng-cmp__v{ font-size:20px; }
  .ng-v2 .ng-chat{ padding:14px 12px; gap:12px; }
  .ng-v2 .ng-chat__bubble{ max-width:94%; }
  .ng-v2 .ng-chat__bubble--in{ max-width:100%; }
  .ng-v2 .ng-chat__text{ font-size:16px; }
  .ng-v2 .ng-chat__addr{ font-size:15px; }
  .ng-v2 .ng-chat__k,
  .ng-v2 .ng-chat__v{ font-size:15px; }

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


/* ==========================================================================
   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, which would otherwise drag every card up and left by half its own
   size — and ng-components.css §8 does the same for .ng-anim. Nothing on this
   page adds motion beyond those two: the ring bars are static widths, not
   transitions, and the chat thread has no staggered reveal here (the homepage's
   .ng-chat__row--t1/--t2 delays are deliberately not copied — a two-bubble
   thread inside a panel that is already revealing does not need a second
   timeline). Left as a note rather than an empty block so the next person does
   not go looking for the missing rule.
   ========================================================================== */


/* ==========================================================================
   8. THE MAP STRIP — section 30, three figures in one row, one per map page
   Added by the image rollout. Nothing above this section was edited; this is a
   new block appended under the two .ng-out panels. THE BAND NOTE IS NO LONGER
   BELOW IT: the second pass moved .ng-out-band__note back up to close the
   PAIR, because the three assets are abstract artwork with no number in them
   and a note reading "Sayılar temsilîdir" under them hedged nothing. The note
   now sits between the pair and this block; nothing here needed changing for
   the move, and .ng-out-band__maps still opens on its own 44px.

   THREE ACROSS IS THE POINT. This pair is the only page in /urunler/ that gets
   a single-row strip of three — adres-cozumleri (the E-DARK sibling) takes
   figure-left split rows, geoview one wide band, kurulum-ve-entegrasyon one
   image per indexed section — so the group keeps six distinguishable dominant
   shapes. Nothing goes on the dark cover: the masthead IS this archetype's
   signal and a white image band stacked on it would erase it.

   WHY THE COLUMN CAN BE THIS NARROW. At 1120 the container is 1072 inside its
   padding, so a third with a 20px gutter is ~344px, and at 1024 it is ~312px.
   That is far too small for a data sheet or a table, and all three assets here
   are MAPS for exactly that reason: a contour, a scatter of markers and a
   legend still read as shapes at a third size where 11px type does not.

   ONE COLUMN BELOW 900. Below that a third of the container is under 270px and
   the base map stops resolving. In the stacked state the container can exceed
   the assets' native 780px, so each figure is capped and centred — over 780 the
   raster upscales and goes soft, which is the one measurable defect this
   treatment could introduce.
   ========================================================================== */
.ng-v2 .ng-out-band__maps{ margin-top:44px; }

/* The lead-in, not a heading: every one of these assets bakes in its own kicker
   and its own 28px title, so an h3 beside one would be a stutter — and a third
   heading level under an h2 that already has a lede would be a new rank on a
   finished page. It is centred to match .ng-out-band__note directly below it,
   and it carries in words what the rasters say in type that renders near 5px on
   a phone, so no image in this strip is the only carrier of a fact. 17px is
   .ng-lede's step down; --ng-muted is the same role the note takes. */
.ng-v2 .ng-out-band__maps-lede{
  margin:0 auto;
  max-width:80ch;
  text-align:center;
  font-size:17px;
  line-height:1.6;
  color:var(--ng-muted);
}

.ng-v2 .ng-out-band__strip{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:26px;
  margin-top:26px;
}

/* The cap. In the stacked state the container is wider than 780px from about
   830px of viewport upward, and .ng-figband__img is width:100%. margin-inline
   centres the capped figure under the centred lede; the caption inside it stays
   left-aligned, which is right for a sentence. Harmless in the three-up state,
   where the column is ~344px. */
.ng-v2 .ng-out-band__strip > .ng-figband__fig{
  max-width:780px;
  margin-inline:auto;
}

@media (min-width:900px){
  .ng-v2 .ng-out-band__strip{
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:20px;
    align-items:start;              /* captions differ in length; tops align */
  }
}

@media (max-width:767px){
  .ng-v2 .ng-out-band__maps{ margin-top:34px; }
  /* 16px is this page's mobile reading floor, the same step .ng-close__lede and
     the ring names take at this width. Left, not centred: at 342px a centred
     three-line paragraph ragged on both edges is harder to read than the same
     paragraph set flush, and the strip beneath it is a single column. */
  .ng-v2 .ng-out-band__maps-lede{
    max-width:none;
    text-align:left;
    font-size:16px;
  }
  .ng-v2 .ng-out-band__strip{ gap:22px; margin-top:22px; }
}


/* ==========================================================================
   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 .ng-out-band__strip > figure.ng-figband__fig.ng-figband__fig.ng-figband__fig{ margin-inline:auto; }

/* THE CHAT PANEL NOW HOLDS THE CLIENT'S OWN IMAGE, NOT A DRAWN ONE.
   This panel used to be a hand-built WhatsApp replica — chat bubbles, ticks and a
   score card assembled in the DOM. The owner had the identical construction deleted
   from the homepage because it does not represent the real product, and this page
   kept a copy. It is replaced by the client's own supplied asset, which shows the
   same thing and is theirs.

   The image sits inside .ng-out, not .ng-figband, because the panel already has its
   own bar, label and foot; only the body needed swapping. Elementor's
   `figure{margin:0}` is irrelevant here — this is an <img>, not a <figure>. */
/* Same reason as ng-shared's .ng-figband__frame > picture rule: the <img> is
   wrapped in <picture> to offer WebP with a PNG fallback, and an inline
   <picture> would open a baseline gap inside the panel. */
.ng-v2 .ng-out__panel picture,
.ng-v2 .ng-out picture{ display:block; }
.ng-v2 .ng-out__img{
  display:block;
  width:100%;
  height:auto;
  max-width:520px;
  margin:18px auto 0;
  border-radius:var(--ng-radius-sm);
  border:1px solid var(--ng-hairline);
}