/* ========================================================================== NEXT GEO — ng-post.css The blog post view. Loaded by mu-plugins/ng-post.php on `is_singular('post')` only, LAST in the same chain every inner page uses: ng-foundation → ng-components → ng-mobile → ng-shared → ng-post so everything ng-shared.css publishes is already in the cascade and this file only has to add what a long-form article needs. Most of the page — .ng-section, .ng-container, .ng-crumbs, .ng-eyebrow, .ng-lede, .ng-prose, .ng-section-head, .ng-grid--3, .ng-card--link, .ng-btn, .ng-actions, .ng-cta — is ng-shared's and is not restated here. Where it IS overridden the comment says what was wrong with it *on this view specifically*. THE PROBLEM THIS FILE EXISTS TO SOLVE These articles are 400–600 words of Turkish prose and nothing else: no images in the body, no data, no tables, no quotes worth the name. There is nothing to decorate with, so the whole job is typography — measure, scale, rhythm, and the numbered section spine the mu-plugin's outline filter builds out of the authors'
    . Everything below serves that. Decorating the edges of a wall of text still leaves a wall. WHAT WAS MEASURED, not assumed (all numbers reproduced in the comments): - characters per line for Inter at 16/17/18/19px against real article Turkish and real article English; - the longest real title in both languages, at four display sizes and five column widths, to pick an h1 ceiling that does not run to 5 lines; - every featured image on the site (26 posts, 8 distinct files, source ratios from 1.0 to 2.74) before choosing a crop; - which theme rules actually reach this template — it does NOT render inside .content-wrapper, so the (0,2,2) `h?:not(:first-child) {margin-top:50px}` rule that has bitten every other page in this project cannot match here. Three theme rules that DO reach it are handled in §4. HARD RULES INHERITED FROM pages/PATTERNS.md, honoured throughout: - tokens only, no literal colour / radius / font stack. The only bare numbers in a colour position are alpha stops and mix ratios inside color-mix(), which carry no palette value — the same exception the contract already grants gradients and masks; - no `!important` anywhere in this file; - Turkish strings are authored pre-uppercased in PHP; nothing here applies text-transform; - nothing a visitor reads goes under 14px, 16px at mobile; tracked labels (letter-spacing >= 0.08em) may go to 12px; - 44x44 touch targets at EVERY width up to 1023px — see §9, and note the two rail components are 44px at all widths precisely so there is no breakpoint left for the hole to come back in. ========================================================================== */ /* ========================================================================== 1. THE ARTICLE, AND THE VALUES THE REST OF THE FILE IS BUILT FROM ========================================================================== */ .ng-v2 .ng-art{ /* ONE COLUMN WIDTH FOR THE WHOLE PAGE. --measure is the reading measure derived in §4 (658px ≈ 58ch ≈ 68 Turkish characters at 18px), and the masthead takes the same value so the breadcrumb, the kicker, the lede, the featured image and every paragraph of the article share one left edge and one right edge. The headline is the single exception and it is opted out per-element in §2, not by having its own constant. px rather than ch on purpose: the same number has to be usable on the h1 (48px) and on the figure, and `ch` resolves against whatever font-size the using element happens to have — 58ch on the h1 would be 1757px. The ch arithmetic belongs in the comment, not in the value. */ --ng-art-measure:658px; --ng-art-head:var(--ng-art-measure); --ng-art-rail:284px; --ng-art-gap:72px; --ng-art-step-gutter:64px; } /* Band rhythm. The masthead and the body band are BOTH .ng-section, so out of the box they stack 56 + 56 = 112px of the same #FAFBFF between the featured image and the first sentence — a seam with nothing in it, on a page whose predecessor was measured at 33.8% dead air. They are one continuous light region and are joined here: the masthead closes at 0 and the body band opens the gap it actually needs. The tonal break to the closing band keeps its full depth; that gap is the only one on the page that is meant to be read as a chapter break, which is ng-foundation's own rule (--ng-section-pad-dark, §3). */ .ng-v2 .ng-art__head{ padding-block:28px 0; } .ng-v2 .ng-art__bodyband{ padding-block:44px 64px; } @media (min-width:1024px){ .ng-v2 .ng-art__head{ padding-block:32px 0; } .ng-v2 .ng-art__bodyband{ padding-block:52px 80px; } } /* ========================================================================== 2. MASTHEAD Crumbs, kicker, h1, lede, figure — one left-aligned column, all five on the same rail and the same measure as the article text below them, so the page has ONE left edge from the breadcrumb to the last paragraph. Rejected: a centred masthead. It is the obvious editorial move and it fills the 1120px container evenly, but every other converted page on this site (/bilgi-bankasi/, /sss/, /sektorler/) opens with a left-aligned masthead and the brief for this view is that a reader arriving from /bilgi-bankasi/ must not feel they changed sites. The one case where it IS centred is the no-rail variant, and that is argued in §3. Rejected: a two-column masthead with the featured image on the right, the shape /bilgi-bankasi/ uses for its KONULAR panel. The images are generic stock (a laptop with a glowing world map, a green arrow on grey card stock, three cartoon people with emoji balloons — all eight were opened and looked at); they are not worth half the masthead and they would take the width the headline needs. ========================================================================== */ /* All five children at once, rather than five max-widths that can drift. Routed through a custom property rather than set directly, and that is not decoration: `.ng-v2 .ng-art__head > .ng-container > *` is (0,3,0) — three classes, because .ng-container is one — so a per-child override written the obvious way as `.ng-v2 .ng-art__lede` (0,2,0) LOSES to it. Measured: the lede's max-width computed to 760px, not the 46ch it declares, and set 85 characters to the line. A child that wants a different measure now sets --ng-art-w on itself and the specificity question never arises. */ .ng-v2 .ng-art__head > .ng-container > *{ max-width:var(--ng-art-w, var(--ng-art-head)); } /* The last crumb is the whole article title — 90 characters on the longest one, which wraps the breadcrumb onto two and sometimes three lines directly above the headline and reads as noise, not as navigation. Truncated to one line; nothing is lost, because the same string is the h1 20px below it and the element still carries aria-current="page". min-width:0 because it is a flex item and would otherwise refuse to shrink; max-width:min(...,100%) because a fixed ch value is wider than a 342px mobile column and would be a horizontal overflow, which is a hard fail. */ .ng-v2 .ng-art__head .ng-crumbs__here{ min-width:0; max-width:min(46ch, 100%); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } /* "KATEGORİ · 9 MAYIS 2025 · 3 DK OKUMA". Left as the plain .ng-eyebrow — magenta, 13px, 0.08em, text-transform:none. Two things were considered and rejected: the --pill variant (this string is 40+ characters, and the pill is for two-word labels), and demoting it to .ng-card__meta's muted grey (the site already prints a magenta category-and-date line exactly like this one on the /bilgi-bankasi/ lead card, so magenta IS the idiom here). */ .ng-v2 .ng-art__kicker{ margin:20px 0 0; /* Turkish-correct casing made the longest kicker longer: ng_upper() now produces "İNFOGRAFİK SERİSİ · 29 AĞUSTOS 2024 · 1 DK OKUMA", 48 characters, which wraps at 390px and left "OKUMA" alone on a second line looking like a mistake. balance splits it evenly instead. Rejected: dropping to 12px on mobile (allowed for a tracked label, but shrinking type on the smallest screen to avoid a wrap is the "desktop, shrunk" tell) and tightening the tracking (0.08em is exactly what earns this label the sub-14px exception; below it ng-page-check would correctly flag 13px as body copy). No-op on the 24 posts whose kicker fits one line. */ text-wrap:balance; } /* THE HEADLINE. Doubled class (0,3,0) — see §10 for why every heading class in this project is written that way even where the theme rule that forced the idiom cannot reach. Ceiling 48px, and it is a measured ceiling, not a taste one. Rendered in Manrope 800 against the two longest real titles on the site: column 44px 48px 52px 56px 740px TR 3 lines TR 4 lines TR 4 lines TR 4 lines 780px TR 3 lines TR 3 lines TR 4 lines TR 4 lines (TR = 'Geoawesome tarafından açıklanan "2026'nın en iyi 100 Coğrafi Teknoloji Şirketi" listesindeyiz.', 95 chars, the longest published) 48px in a 760px column is the largest step at which the worst title still sets in three lines; 52px tips it to four. The longest English title ('We are on the Global Top 100 Geospatial Companies – 2026 Edition list.') sets in three at 48px and the typical seven-word title sets in two. ng-shared's .ng-masthead__title ceiling is 56px and the homepage hero's is 60px; an article headline sitting one step under the inner-page masthead is the correct place for it in the hierarchy. So the headline — and only the headline — is allowed 760px where everything else on the page takes the 658px measure. A headline overhanging the text column on the right is an ordinary editorial move and is invisible as long as the LEFT edges agree, which they do. In the centred no-rail variant they would not, so §3 pulls it back to the measure there. text-wrap:balance rather than a tighter max-width: at three and four lines the ragged edge is what makes a long Turkish title look accidental, and balance equalises the lines without capping the measure for the short titles that would then set too narrow. */ .ng-v2 .ng-art__title{ --ng-art-w:760px; } /* The data plate takes the whole container, not the reading measure. --ng-art-w is the hook §2 documents for exactly this case: every masthead child is capped at --ng-art-head so prose keeps a ~46-character line, and a 2240x960 plate dropped into that column is a 3.4x downscale — its 92px drawn heading lands near 27px and its 30px legend labels under 9px, which is below the floor for anything a reader is expected to read. The rule that consumes the variable is (0,3,0), so this cannot be written as `.ng-v2 .ng-banner{max-width:100%}` at (0,2,0) and be expected to win. Set the variable, as that comment asks. */ .ng-v2 .ng-art__head > .ng-container > .ng-banner{ --ng-art-w:100%; margin-top:28px; } .ng-v2 .ng-art__title.ng-art__title{ margin:14px 0 0; font-size:clamp(2.125rem, 4.4vw, 3rem); /* 34px → 48px */ line-height:1.08; letter-spacing:-0.03em; color:var(--ng-ink); /* 14.46:1 on the ground */ text-wrap:balance; } /* The promoted opening summary. .ng-lede gives 18px/1.6 muted; an article lede is the one sentence that decides whether the article gets read, so it takes a step up to 20px. It keeps the shared 658px measure — ~72 characters at 20px — rather than a tighter one of its own: the PHP caps a promoted lede at 240 characters, so the worst case is four lines, and a narrower box would put its left edge somewhere different from the h1's in the centred no-rail layout, which is the one place a 40px disagreement is visible. */ .ng-v2 .ng-art__lede{ margin:20px 0 0; font-size:20px; line-height:1.6; color:var(--ng-muted); /* 6.01:1 on the ground */ text-wrap:pretty; } /* THE FEATURED IMAGE. Every featured image on the site was listed and the eight distinct files opened. They are decorative stock with no text in them, which is why the template ships them alt="" and why a crop is safe here — it would not be if any of them were one of the TÜİK infographics the site also publishes. Source aspect ratios measured: 1.00 (1024×1024), 1.33 (626×470), 1.50 (1536×1024 and 750×499), 1.78 (1200×675, 1920×1080), 2.74 (1920×700). A single plate ratio therefore has to crop something. 16/9 was chosen because it crops the 1.50 sources — the largest group, and the group that includes the only image with content near its top edge (three cartoon figures with speech balloons) — by 16% of height, 8% off the top. 21/9 was built first and beheaded them. 3/2 does not crop that group at all but makes the plate 507px tall at desktop, which pushes the first sentence of a 127-word article below the fold. The mist fill is the sunken surface role and shows only in the instant before the file paints; the hairline is what stops a light illustration from bleeding into the #FAFBFF ground with no edge. Same treatment /bilgi-bankasi/ gives its lead card media. */ .ng-v2 .ng-art__figure{ margin:36px 0 0; /* theme sets `figure{margin:0}` */ aspect-ratio:16 / 9; overflow:hidden; border-radius:var(--ng-radius); border:1px solid var(--ng-hairline); background:var(--ng-surface-sunken); } .ng-v2 .ng-art__img{ display:block; width:100%; height:100%; object-fit:cover; object-position:center; } /* ========================================================================== 3. BODY BAND — the two-column grid, and the no-rail variant ========================================================================== */ .ng-v2 .ng-art__grid{ display:grid; grid-template-columns:minmax(0,1fr); gap:32px; } @media (min-width:1024px){ /* THE RAIL SITS ON THE RIGHT, against the source order, and that is the whole reason the two-column layout works here. With the aside in column 1 the article text would start 356px inside the container and stop aligning with the masthead above it; in column 2 the prose keeps the container's own left edge and the page has one left rail from the breadcrumb down. It is also the shape /bilgi-bankasi/ already uses — copy left, panel right — so the post view reads as the same site. Source order is unchanged, so a screen reader and the tab sequence still meet the contents list before the article, which is the useful order. */ .ng-v2 .ng-art__grid{ grid-template-columns:minmax(0,1fr) var(--ng-art-rail); column-gap:var(--ng-art-gap); } .ng-v2 .ng-art__body { grid-column:1; grid-row:1; } .ng-v2 .ng-art__aside{ grid-column:2; grid-row:1; /* align-self:start is not optional — a grid item stretches by default and a stretched item is full-height, so position:sticky has nothing left to travel in and silently does nothing. */ align-self:start; position:sticky; /* 28px, not a header offset: theme_mod sticky_header_status is 'off' and header.header computes to position:relative, so nothing overlaps the top of the viewport on this template. Checked rather than assumed. */ top:28px; } } /* NO CONTENTS RAIL — .ng-art__aside--shareonly / .ng-art__body--wide. 11 of the 26 posts have fewer than three transformable sections, so there is no contents list; the aside still renders, holding the share block alone. THE WHOLE PAGE BECOMES ONE CENTRED COLUMN and the share block moves to the end of the article, which is where it now sits at every width — the same place §9 already puts it below 1024. So `--shareonly` is not a third layout; it is the mobile layout, at desktop, because that is what the content is. Rejected: keeping the two-column grid and letting the rail hold just the share block. It is a familiar pattern and it would have been less work, but judged on the case it has to survive — /2024-tuketici-guven-endeksi-analizi-4/, 127 words — it puts a 120px share block at the top of a 284px column beside a 600px article and leaves the rest of a 1072px container empty, with the page's weight thrown to the left. A share rail is only a rail if there is an article long enough to run beside. Four chips are not. The masthead follows the body, INCLUDING pulling the headline back from its 760px overhang to the shared measure: in a centred layout two blocks of different widths have two different left edges, and a 50px disagreement between the h1 and the first paragraph is the one thing that reads as broken. :has() is the only way the masthead can see the variant — they are siblings two levels apart and the class is on the deeper one. Chrome 105+ / Safari 15.4+ / Firefox 121+; where it is unsupported every rule below drops together and the page falls back to the left-aligned two-column layout, which is still correct, just less deliberate. They cannot half-apply. An earlier version of this section reserved the rail's column even with nothing in it, and the article rendered at x=212 in a 1072px container with a 356px empty channel — precisely the "the rail failed to load" look. That is the failure mode this whole block exists to prevent, and it is why the grid template is reset here rather than left to collapse on its own. */ @media (min-width:1024px){ .ng-v2 .ng-art__grid:has(.ng-art__body--wide){ grid-template-columns:minmax(0,1fr); } /* Explicit placement, both in column 1: the aside is FIRST in source order, so auto-placement would put the share block above the article. Rows, not `order`, because these are the only two items and stating the rows is clearer than stating the reordering. */ .ng-v2 .ng-art__grid:has(.ng-art__body--wide) > .ng-art__body{ grid-column:1; grid-row:1; } .ng-v2 .ng-art__grid:has(.ng-art__body--wide) > .ng-art__aside--shareonly{ grid-column:1; grid-row:2; /* sticky has nothing to travel in once the aside is its own full-width row, and a sticky element at the end of a band can only get in the way of the CTA below it. */ position:static; width:100%; max-width:var(--ng-art-measure); margin-inline:auto; } } .ng-v2 .ng-art__body--wide{ margin-inline:auto; } .ng-v2 .ng-art:has(.ng-art__body--wide) .ng-art__head > .ng-container > *{ margin-inline:auto; } .ng-v2 .ng-art:has(.ng-art__body--wide) .ng-art__title{ --ng-art-w:var(--ng-art-measure); } /* ========================================================================== 4. THE PROSE — measure, scale, and the three theme rules that reach it ========================================================================== */ /* THE MEASURE, worked out at this font size rather than inherited. Inter's `0` advance is 0.6311em, so 1ch = 11.36px at 18px — but the AVERAGE character in this site's Turkish article prose measures 8.267px at 18px (0.459em), and in the English 8.241px. Measured over real article paragraphs, not a pangram. The two differ by 37%, which is why a ch-based max-width does not mean what it looks like it means: ng-shared's .ng-prose max-width:70ch = 795px ≈ 96 characters a line Then verified against the RENDERED page rather than the arithmetic, because a line only fills ~92% of its box before the next Turkish word is too long to fit: at a 613px box the first intro paragraph set 64 characters in 565px of ink. Working back from that: 58ch = 659px → intro paragraphs ≈ 68 characters a line → numbered sections ≈ 62 (they lose the 64px gutter, §5) Both inside the 60–75 band, which is what the whole column is sized around. That is the single most important number in this file and it is the reason .ng-prose is overridden here at all: 70ch is right for a legal page read once under stress and catastrophic for 600 words of continuous prose. 18px/1.75 rather than .ng-prose's 17px/1.7. On a page whose only content is text, the body copy is the design; 18px is the long-form step and the looser leading is what stops seven consecutive full-measure paragraphs reading as a block. COLOUR: --ng-ink, not .ng-prose's --ng-muted. PATTERNS defines --ng-ink as "headings and primary text" and --ng-muted as "secondary text". On every other page .ng-prose IS secondary — an intro, a legal clause. Here it is the entire reason the page exists, so it takes the primary role, and the lede keeps --ng-muted so the two are still a step apart. 14.46:1. */ .ng-v2 .ng-art__body.ng-art__body{ font-size:18px; line-height:1.75; color:var(--ng-ink); max-width:var(--ng-art-measure); /* 658px ≈ 58ch — see above */ } /* Three theme rules reach this template. They were found by pulling the 1.39MB LiteSpeed-combined stylesheet and grepping it for bare element selectors, not by guessing: p{ margin:1.875em 0 } (0,0,1) — beaten by .ng-prose p (0,2,1) p{ line-height:1.5em } (0,0,1) — NOT beaten by anything in ng-shared. .ng-prose sets line-height on the CONTAINER and the theme sets it on the

    itself, and a direct declaration beats an inherited value at any specificity. Every paragraph on every page using .ng-prose is therefore rendering at 1.5, not the 1.7 the file declares. Restated here on the element. ol{ list-style-position:inside; padding:0 } (0,0,1) — ng-shared beats the padding and leaves the position, so a prose

      renders its numbers inside the text block. Restated below. The (0,2,2) `body .content-wrapper h?:not(:first-child){margin-top:50px}` rule that mangled the homepage does NOT apply here: this template is rendered outside .content-wrapper (grep of the served HTML: 0 occurrences). The heading classes are still doubled — see §10 for why. */ .ng-v2 .ng-art__body p{ margin:0 0 22px; line-height:1.75; text-wrap:pretty; /* kills the one-word last line on a 69ch measure */ } .ng-v2 .ng-art__body > :first-child{ margin-top:0; } .ng-v2 .ng-art__body > :last-child{ margin-bottom:0; } /* Gutenberg leaves an empty

      at the end of two posts. Without this it is a 22px phantom gap between the last sentence and the band edge. */ .ng-v2 .ng-art__body p:empty{ display:none; } /* Bare headings inside the body. Only ONE post is built this way (the Elementor-authored 'Fiyat Rekabeti…', h2×1 h3×4) but the theme sets bare `h2{font-size:38px}` and ng-foundation sets `body.ng-v2 h2{font-size:44px}`, so left alone that post renders a 44px h2 inside 18px prose. .ng-prose only styles `h2.ng-prose__h`, which this markup does not carry. (0,2,1) beats ng-foundation's (0,1,2) on class count. */ .ng-v2 .ng-art__body h2{ font-size:26px; line-height:1.22; margin:44px 0 14px; color:var(--ng-ink); } .ng-v2 .ng-art__body h3{ font-size:21px; line-height:1.3; margin:34px 0 10px; color:var(--ng-ink); } .ng-v2 .ng-art__body h4{ font-size:18px; line-height:1.35; margin:28px 0 8px; color:var(--ng-ink); } /* SECTION HEADINGS THAT ARE NOT HEADINGS. Ten of the eleven English posts carry their sections as `

      4. Competitor Locations

      ` and nothing else — no h2, no h3, no
        for the outline filter to transform. Without a rule here the entire English half of the archive is an unbroken wall, so this is not a nicety. It cannot be promoted to a real heading — this is CSS, the document outline stays flat, and that is a content fix, not a styling one (flagged in the report). What it can do is stop them reading as bold paragraphs. ⚠️ `:only-child` IS NOT THE TEST I WANTED, and the `:not([id])` is not superstition. :only-child counts ELEMENT children, so a in the MIDDLE of a sentence is an only-child too, and the first version of this rule turned "…ekonomik teorilerden biri olan Bertrand Rekabeti, lokasyon stratejilerinde…" into three blocks with a heading wedged in the middle. Caught in a screenshot of /fiyat-rekabeti-doneminde-lokasyon-stratejileri/; no assertion would have said a word. CSS cannot see text nodes, so there is no way to ask "is the the whole paragraph". Every

        in the archive was then parsed with DOMDocument and classified: 53 paragraphs where the IS the whole paragraph (real heading) 2 where it sits inside a sentence (false positive) and the split lands exactly on the id attribute: all 2 false positives, and only 4 of the 53 true ones, carry `id="emberNNNN"` — pasted-in markup from one post authored outside WordPress, which is also the only post in the archive that bolds mid-sentence. `:not([id])` therefore keeps 49 of 53 real headings and loses 0 sentences. The 4 it gives up are in that same post, which already has genuine h2/h3 markup and is the least in need of this. HOW IT CAN FAIL, stated so the next person does not have to rediscover it: a NEW post, authored in Gutenberg (so no id), whose only bolded run sits inside a sentence, would break the same way. The durable fix is content — those lines should be real headings — not a cleverer selector. Kept deliberately at the same 22px as the numbered spine's h2 in §5: in the one post that has both, the runs are the PARENT sections and the numbered

          sits underneath one of them, so making either visibly dominant would state a hierarchy that is the wrong way round. */ .ng-v2 .ng-art__body > p:not([id]):has(> strong:only-child){ margin:40px 0 12px; /* The same hairline the numbered spine uses in §5, for the same reason: it is what makes a run of sections read as a series from a scroll rather than as four bold paragraphs. Ten of the eleven English posts are built entirely out of these, so without it the whole English half of the archive has no scannable structure at all. */ padding-top:28px; border-top:1px solid var(--ng-hairline); } /* …except where the run is immediately followed by the numbered spine, which draws its own rule ~50px lower. Exactly one post does this (/en/the-importance-of-a-location-based-approach-in-competitor-analysis/, where "Why is it Important?" is the parent of the three numbered sections) and two horizontal rules 50px apart read as a stutter. */ .ng-v2 .ng-art__body > p:not([id]):has(> strong:only-child):has(+ ol.ng-art__steps){ padding-top:0; border-top:0; } .ng-v2 .ng-art__body > p:not([id]) > strong:only-child{ display:block; font-family:var(--ng-font-display); font-weight:700; font-size:22px; line-height:1.3; letter-spacing:-0.02em; color:var(--ng-ink); } /* Lists. The theme's fontello chevron and its 31.875px gutter are already dead globally (ng-components §10); this only restores an honest marker and puts the accent on it, which is the same magenta-marker idiom .ng-list uses everywhere else on the site. ::marker takes colour and font only, which is all that is wanted here. */ .ng-v2 .ng-art__body ul, .ng-v2 .ng-art__body ol{ margin:0 0 22px; padding-left:24px; list-style-position:outside; /* theme sets `inside` on bare ol */ } .ng-v2 .ng-art__body li{ margin-bottom:10px; line-height:1.7; } .ng-v2 .ng-art__body li::marker{ color:var(--ng-accent); /* 5.45:1 — a marker is graphical, but it clears the text bar anyway */ } /* Quotes. Two exist on the whole site, both in the Elementor post, and they are the only visual relief any of these articles offers — so they are promoted from .ng-prose's 17px muted indent to something that reads as a pull quote: display face, 21px, ink, and the accent rule thickened. Still not a decoration: it is the author's own sentence, set larger. */ .ng-v2 .ng-art__body blockquote{ margin:34px 0; padding:2px 0 2px 24px; border-left:3px solid var(--ng-accent); font-family:var(--ng-font-display); font-weight:500; font-size:21px; line-height:1.5; letter-spacing:-0.01em; color:var(--ng-ink); } .ng-v2 .ng-art__body blockquote p{ font-size:inherit; line-height:inherit; margin:0 0 12px; } .ng-v2 .ng-art__body blockquote > :last-child{ margin-bottom:0; } /* In-body images. One post has one (a TÜİK infographic). The theme already gives every img max-width:100%, so this is only the plate treatment, and it is object-fit-free on purpose: an infographic carries text and must never be cropped, which is the opposite of the decorative masthead image in §2. */ .ng-v2 .ng-art__body figure{ margin:30px 0; } .ng-v2 .ng-art__body figure img{ width:100%; height:auto; border-radius:var(--ng-radius-sm); border:1px solid var(--ng-hairline); } .ng-v2 .ng-art__body figcaption{ margin-top:10px; font-size:14px; line-height:1.5; color:var(--ng-muted); } .ng-v2 .ng-art__body a{ color:var(--ng-accent); /* 5.45:1 on the ground */ text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px; } .ng-v2 .ng-art__body a:hover{ color:var(--ng-accent-hover); } /* Inline links inside a sentence measure 237×21 at 390px, which ng-page-check correctly reports as a target under 44px. WCAG 2.5.5 has an explicit "Inline" exception for a target inside a block of text, so this would be defensible left alone — but the hit area can be doubled for free and it is worth having. Vertical padding on a non-replaced INLINE element does not contribute to the line box, so nothing reflows and no baseline moves; it only grows the box the pointer and the hit-test see, from 21px to 45px. Scoped to touch widths, and to the body, so the rail chips (which are real 44px pills already) and the desktop line rhythm are untouched. */ @media (max-width:1024px){ .ng-v2 .ng-art__body a{ padding-block:12px; } } /* ========================================================================== 5. THE NUMBERED SPINE — .ng-art__steps / __step / __steph This is the structure the mu-plugin's outline filter builds out of the authors'
            , and on a page with no images, no data and no tables it is the only structure there is. It carries the whole scan. THE NUMBER IS REAL. The markup is a genuine
              , so the count is not invented here — but ::marker was rejected as the mechanism: it takes colour and font and nothing else, so the numeral cannot be given a gutter, cannot be baseline-aligned against a 26px heading, and cannot be sized independently of the item it labels. A counter in a ::before can do all three. `counter(list-item)` was rejected in turn in favour of an explicit counter, because it would silently re-map if a post ever ships an
                and nothing here would catch that. THE TREATMENT IS THE SITE'S OWN, scaled up. /sss/ already sets its accordion rows as a tracked magenta `01` in a left gutter with the question in navy beside it, and /bilgi-bankasi/ sets its reading-order cards the same way with a numeral in an accent-wash chip. Both were looked at before this was written. The difference here is size: an accordion row is scanned by eye at rest, and these have to be findable while a reader scrolls past at speed, so the numeral goes to 34px — which is also what makes --ng-accent-display legal on it. Under 24px it would have to be the darker --ng-accent and would stop being a scan anchor. Hairline above each section, not around it: seven boxed cards would make an article look like a listicle grid, and the rule is the lightest thing that still says "a new one starts here" from 400px away. ========================================================================== */ /* `ol.ng-art__steps`, not `.ng-art__steps`. The prose list rule above is `.ng-v2 .ng-art__body ol` at (0,2,1) and beats a plain (0,2,0) here — it was leaving 24px of list padding under the 64px step gutter, so the section text sat 88px in, the hairlines started 24px right of the column edge, and the sections rendered at 55 characters a line instead of 62. Caught in a screenshot, not in a declaration. */ .ng-v2 .ng-art__body ol.ng-art__steps{ list-style:none; margin:44px 0 0; padding-left:0; counter-reset:ng-step; } .ng-v2 .ng-art__steps > .ng-art__step{ list-style:none; counter-increment:ng-step; position:relative; margin:0; padding:30px 0 34px; line-height:1.75; /* the prose leading, not the 1.7 the bullet-list rule above sets on li */ border-top:1px solid var(--ng-hairline); } /* The last section keeps its 34px only when something follows it — three of these articles close with a summary paragraph after the
                  , and with the padding zeroed it butted straight onto the last section's final sentence with no break at all. Where the list IS the end of the article the padding goes, so the band does not carry 34px of trailing nothing. */ .ng-v2 .ng-art__body ol.ng-art__steps:last-child > .ng-art__step:last-child{ padding-bottom:0; } /* (0,3,1). It has to clear ng-components §10's `body.ng-v2 ol > li::before{content:none;display:none}` at (0,1,3), which exists to kill the theme's fontello chevron and would otherwise take this numeral with it — a pseudo-element, so invisible to every DOM assertion. */ .ng-v2 .ng-art__steps > .ng-art__step::before{ content:counter(ng-step, decimal-leading-zero); display:block; font-family:var(--ng-font-display); font-weight:800; font-size:34px; line-height:1; letter-spacing:-0.03em; /* Legal only because this never renders below 26px: --ng-accent-display is 4.04:1 on the ground, over the 3.0 large-text bar and under the 4.5 body bar. §9 keeps the mobile step at 26px for the same reason. */ color:var(--ng-accent-display); } @media (min-width:620px){ /* Hanging numeral. The gutter is inside the measure, not outside it: a negative margin would hang the numeral into the container's own 24px padding at 1024px and clip it. Cost is the step text setting at 613 − 64 = 549px ≈ 63 characters against the intro paragraphs' 69 — both inside the 60–75 band, and the indent is what makes the seven sections read as one series rather than seven restarts. */ .ng-v2 .ng-art__steps > .ng-art__step{ padding-left:var(--ng-art-step-gutter); } .ng-v2 .ng-art__steps > .ng-art__step::before{ position:absolute; left:0; /* 22px, not the 30px the li pads by. Both boxes are set from the top, and a 34px/1 numeral has a taller ascent than a 26px/1.22 heading, so equal tops put the numeral's baseline ~6px below the heading's — measured on the render. 22px lands the two baselines together. */ top:22px; } } /* The section heading. Doubled class (0,3,0) — §10. 26px against the body's 18px: a 1.44 step is the smallest that still reads as a level change at a glance, and anything larger starts competing with the 48px h1 two bands up. */ .ng-v2 .ng-art__steph.ng-art__steph{ margin:0 0 12px; font-family:var(--ng-font-display); font-weight:700; font-size:26px; line-height:1.22; letter-spacing:-0.022em; color:var(--ng-ink); /* The h2 carries the anchor the contents rail links to. Without this the jump lands the heading hard against the top of the viewport with its own hairline cut off. */ scroll-margin-top:24px; } @media (min-width:620px){ .ng-v2 .ng-art__steph.ng-art__steph{ margin-top:-4px; } /* cap-height align */ } /* The Turkish articles are authored with hard breaks between sentences — `title
                  sentence
                  sentence` inside a step
                1. , and `sentence
                  sentence` inside the intro paragraphs — so a section's body is bare text with no paragraph spacing at all and two sentences land on consecutive lines looking like a wrap that went wrong. Giving the break a block box is the only way to space text that is not inside an element of its own; 12px against the 22px between real paragraphs keeps the two levels distinct. Scoped to these two places rather than to `br`, so nothing else on the page moves — and deliberately NOT applied inside a heading, where an author's line break is a line break. */ .ng-v2 .ng-art__step > br, .ng-v2 .ng-art__body > p > br{ display:block; content:""; margin-top:12px; } /* A step that holds its own
                    (the English shape) should not also carry the default list bottom margin — the step's own padding already closes it. */ .ng-v2 .ng-art__step > ul:last-child, .ng-v2 .ng-art__step > ol:last-child{ margin-bottom:0; } /* ========================================================================== 6. THE RAIL — contents + share A raised white card with hairline rows, which is precisely the KONULAR panel /bilgi-bankasi/ opens with. Reusing that shape rather than inventing a rail treatment is what keeps the two pages feeling like one site, and it also anchors the rail against the container's right edge — a bare list of links floating 150px away from the prose reads as leftover markup. ========================================================================== */ .ng-v2 .ng-art__tocwrap{ padding:20px 18px; background:var(--ng-surface); border:1px solid var(--ng-hairline); border-radius:var(--ng-radius); box-shadow:var(--ng-shadow-card); } .ng-v2 .ng-art__tocwrap .ng-eyebrow{ margin:0; } .ng-v2 .ng-toc{ list-style:none; margin:10px 0 0; padding:0; counter-reset:ng-toc; } .ng-v2 .ng-toc > .ng-toc__i{ counter-increment:ng-toc; margin:0; padding:0; border-top:1px solid var(--ng-hairline); } .ng-v2 .ng-toc > .ng-toc__i:first-child{ border-top:0; } /* 44px at EVERY width, not only under 1024. Both shared stylesheets once scoped their touch rules to max-width:767px and left 768–1023 served desktop sizes; the fix widened the ceiling to 1024, and the rail is visible AT 1024 (that is the breakpoint the two-column layout starts on), so a max-width rule would leave exactly one width uncovered. A 44px row is also simply the right height for this list — seven of them is a 308px rail. */ .ng-v2 .ng-toc__l{ display:flex; align-items:center; gap:10px; min-height:44px; padding:9px 0; font-family:var(--ng-font-display); font-weight:500; font-size:14px; line-height:1.4; color:var(--ng-ink); /* 14.95:1 on the white card */ text-decoration:none; } /* The rail numeral repeats the body's `01…07` so the contents list is a map of the article rather than a second, unrelated list. 12px is allowed here and only here because it is tracked at 0.1em — the label exception the contract grants — and because it is glanced at, never read. flex-basis fixes the column so two-digit and one-digit rows align. */ .ng-v2 .ng-toc__l::before{ content:counter(ng-toc, decimal-leading-zero); flex:0 0 22px; font-family:var(--ng-font-label); font-weight:600; font-size:12px; line-height:1.35; letter-spacing:.1em; padding-left:.05em; /* absorb the trailing letter-space */ color:var(--ng-accent); /* 5.64:1 on white */ } @media (any-hover:hover){ /* any-hover only: on touch, :hover sticks after the tap and leaves a row highlighted until the user taps elsewhere. Same reasoning as ng-shared §6. */ .ng-v2 .ng-toc__l:hover{ color:var(--ng-accent); } } /* IN THE RAIL, under the contents card: just a gap. */ .ng-v2 .ng-art__share{ margin-top:22px; } .ng-v2 .ng-art__share .ng-eyebrow{ margin:0; } /* AT THE END OF THE ARTICLE it needs a rule above it, or four chips floating under the last sentence read as leftover markup rather than as the end of the piece. This is the position the share block is in for every post below 1024 (§9) and for a --shareonly post at every width, i.e. the majority of the renders on this site — 11 of 26 posts have no contents list at all. */ @media (min-width:1024px){ .ng-v2 .ng-art__grid:has(.ng-art__body--wide) .ng-art__share{ margin-top:0; padding-top:26px; border-top:1px solid var(--ng-hairline); } } .ng-v2 .ng-share{ list-style:none; display:flex; flex-wrap:wrap; gap:8px; margin:12px 0 0; padding:0; } .ng-v2 .ng-share > li{ margin:0; padding:0; } /* Hairline chips, the .ng-btn--pill shape, because a bare row of four text links is neither obviously interactive nor 44px tall. min-WIDTH as well as min-height: "X" is one character and measures 37px wide at this padding. WCAG 2.5.5 wants a 44×44 box, and a target that is tall enough and too narrow is still a failure — that exact defect shipped once already on the English homepage's social pills. */ .ng-v2 .ng-share__l{ display:inline-flex; align-items:center; justify-content:center; min-height:44px; min-width:44px; padding:0 14px; border-radius:var(--ng-radius-pill); background:var(--ng-surface); box-shadow:inset 0 0 0 1px var(--ng-hairline); font-family:var(--ng-font-display); font-weight:600; font-size:14px; line-height:1.2; color:var(--ng-ink); text-decoration:none; } @media (any-hover:hover){ .ng-v2 .ng-share__l:hover{ color:var(--ng-accent); box-shadow:inset 0 0 0 1px var(--ng-accent); } } /* The band's own inherited `color` USED to need setting here: .is-dark redefined the tokens but never set `color`, so the band computed rgb(51,51,51) on navy. That is now fixed at source — ng-foundation.css §3 sets `color:var(--ng-ink)` inside .is-dark, which covers the homepage, every converted page and every post. The local override is gone; do not reintroduce it. */ /* The second: a 54ch lede centred under a 20ch title reads as a paragraph that escaped rather than as a closing line. */ .ng-v2 .ng-art__cta .ng-cta__lede{ max-width:48ch; } /* ========================================================================== 8. RELATED READING Almost entirely ng-shared: .ng-section-head, .ng-grid--3, .ng-card--link. Two things are wrong with it in THIS band and only in this band. ========================================================================== */ /* .ng-card__body here is not a body — it is "3 dk okuma", the same reading-time string the masthead kicker carries, and it is the last line of every card. ng-shared pins .ng-card__link to the bottom with margin-top:auto but nothing pins this, so with a two-line title in one card and a four-line title in the next the three reading times sit at three different heights and the row loses its baseline. Pinned, and set to the muted role so it reads as metadata rather than as the card's copy. Stays at 15px (16px at mobile, from ng-shared §12) — it is untracked, so it takes the reading floor, not the label exception. */ .ng-v2 .ng-art__rel .ng-card__body{ margin-top:auto; padding-top:16px; } /* .ng-actions opens with 28px; after a card grid that reads as a fourth, empty row. */ .ng-v2 .ng-art__relall{ margin-top:32px; } /* ========================================================================== 9. MOBILE AND TABLET ng-mobile.css and ng-shared §12 already carry the shared 16px reading floor and the 44px targets for .ng-crumbs__link, .ng-btn and .ng-btn--pill, at BOTH max-width:767 and 768–1023. Nothing here re-scopes any of that to 767 and reintroduces the tablet hole; .ng-toc__l and .ng-share__l are 44px at every width in §6 for the same reason. ========================================================================== */ /* THE 1024px HIT-AREA HOLE IS NOT PATCHED HERE — deliberately, and this note is the reason a future reader will not re-add it. ng-shared.css's two 44px blocks stopped at 1023 while ng-page-check enforces `w <= 1024`, so at exactly 1024 (iPad landscape) two breadcrumb links measured 21px tall on every converted page. This file carried a local copy for a while; the cause has since been fixed at source in ng-shared.css, in a standalone `@media (max-width:1024px)` block that sets nothing but hit areas and sits last so it wins where it overlaps the desktop rules. The local copy is gone: two copies of a breakpoint fix is how they drift, which is the same lesson the English homepage's private 768 patch already taught this project. Re-verified at 1024 after removing it — see §9's closing note. */ @media (max-width:1023px){ /* The rail collapses. display:contents dissolves the