/* ========================================================================== NEXT GEO — page stylesheet for the KURULUM VE ENTEGRASYON / SETUP AND INTEGRATION pair TR 23268 /urunler/kurulum-ve-entegrasyon/ EN 25692 /en/products/setup-and-integration/ One authored sheet for both; ng-page-apply.php --css-from copies it to setup-and-integration.css so the pair cannot drift. Loads last: ng-foundation → ng-components → ng-mobile → ng-shared → THIS so a rule here at equal specificity beats all four. --------------------------------------------------------------------------- VARIANCE PASS, 2026-08-17. Assignment from variance-plan.json, not chosen: opening F-INDEX a navigable list is the hero of the first screen dark MIDDLE the indigo band falls on section 40 of 6 sections 6 index · ledger · table · exchange · ladder · rail THE SILHOUETTE THIS PRODUCES 10 LIGHT INDEX MASTHEAD — small h1, the hub's need line, the client's lede, then a five-row table of contents that IS the first screen, then the proof strip and one CTA 20 LIGHT THE DOMINANT SHAPE: a ÇİZELGE. The client's two lists of four — "Neler Sunuyoruz?" and "Size Ne Kazandırır?" — as the two copy columns of four ruled rows, against an ordinal rail tagged KURULUM / ENTEGRASYON 30 MIST a real comparison TABLE in a raised panel: two deployment models × eight fields, six of which are one merged cell 40 INDIGO the page's only diagram — two lanes and a spine, with the ready-made API physically between the systems that use it 50 LIGHT the shared three-rung ladder and one chip row 60 MIST the close: a sunken band holding a RAISED white panel, because the indigo is already spent on section 40 Tonal run: light · light · MIST · INDIGO · light · MIST. NOTHING ON THIS PAGE IS A CARD GRID — there is not one .ng-card left on it. That is the shape ARCHETYPES.md exists to break up: before this pass the page was masthead-with-a-plate, a 2×2 of white boxes, a 01–04 ladder, two side-by-side output panels, a step ladder and an indigo slab, which is the silhouette every other leaf on this site still has. HOW IT DIFFERS FROM THE OTHER F-INDEX PAGE. hizli-teslimat (sektörler) has the same three assignments, and the masthead is deliberately IDENTICAL — that is what a shared archetype means. Everything below it differs: hizli-teslimat index · coverage BANDS · dark TIMELINE · link LEDGER · ladder · mist rail on the ground (mist at 20 and 50) this page index · paired ÇİZELGE · mist TABLE · dark LANE DIAGRAM · ladder · raised panel on mist (mist at 30 and 60) Different dominant shape, different tonal order, a different artefact on the indigo, and the two closes use the two surface roles the opposite way round. --------------------------------------------------------------------------- WHAT THE PAGE WAS BEFORE THE FIRST CONVERSION, MEASURED ng-page-check on both pages at 1440 / 1024 / 768 / 390: VISIBLE h1 0 at every width, both languages dead air 3.8% @1440 (120px), 4.5% @1024 (140px) tap targets under 44px 2 at 1024, 768 AND 390 — theme breadcrumb links post_content 76 words TR / 74 EN, two of them headings _elementor_data 154 KB TR, 154 KB EN The screenshot showed what the numbers understate: a ~300px theme banner carrying two stock line drawings captioned ON-PREMISE and CLOUD — the theme's own artwork, and the only place on the page the two deployment models appeared at all; ~180px of nothing; a 120px empty grey band that WAS the heading "Neler Sunuyoruz?" (Elementor's `elementor-invisible` at opacity:0, and LiteSpeed's optm-js_defer=2 means the entrance script never runs); four `neuros_icon_box` widgets each carrying a bg_image hotlink to demo.artureanec.com — the theme vendor's demo server — on a live commercial page; a decorative purple blob that at 390 sat on top of a card's body text; and two "Bize Ulaşın" buttons with the same label and the same URL. --------------------------------------------------------------------------- ROLLBACK NOTE — `page_title_status` WAS 'default' ON BOTH PAGES and is now 'off'. ng-page-apply.php snapshots that key only for pages applied after 2026-08-17 01:24, and these two were first applied before it. To bring the theme banner back, set both 23268 and 25692 to 'default'. (Polylang synchronises custom fields between translations on this install, so setting it on one post can propagate to the other inside the same request — worth knowing before concluding a write failed or ran twice.) `/root/ng-rollback/pages/-restore.php` is rewritten on EVERY apply, so it holds the previous ITERATION. The true pre-redesign pages live in /root/ng-backup/pre-deploy-2026-08-14/db.sql.gz. --------------------------------------------------------------------------- WHAT IS DELIBERATELY NOT HERE, unchanged from the first conversion: - No API reference. An endpoint and a JSON body were built and thrown away: a developer reads `POST /v1/locations/score` as a commitment, and this site publishes no API documentation to back one. - No replica of a product interface. The owner deleted two hand-built DOM replicas from the homepage on 2026-08-17 because they do not represent the real product, and honest labelling did not save them. Section 40 is a DIRECTION LIST — five names and two arrows — not a screen. - No named CRM, ERP or partner product; no client name or logo. - No uptime figure, SLA, certification, customer count or price. The client's own "Sıfır Aksama" strapline stays because it is their published copy, but nothing here quantifies it, because nothing in the source does. RULES THIS FILE OBEYS: tokens only, no !important, no literal colours, one h1, 14px body floor / 16px mobile floor, 11px only for tracked labels at ≥0.08em (which is what ng-page-check MEASURES, not an allowlist), 44px hit areas to and including 1024px. REUSED FROM ng-shared.css, NOT RE-AUTHORED HERE: .ng-section(+--sunken), .ng-container, .ng-crumbs, .ng-eyebrow(+--pill), .ng-masthead(+--index §16b), .ng-masthead__proof, .ng-section-head(+__title), .ng-lede, .ng-note, .ng-actions(+--chips), .ng-btn(+--primary/--ghost/--pill), .ng-arrow, .ng-hl, .ng-steps(+__item/__num/__name/__body/__pills), .ng-pills, .ng-anim, .ng-dtable(+__wrap/__cap), .ng-how(+__note/__links), .ng-lead__note. Every 44px hit area comes from ng-mobile.css §7, including .ng-close__tel's. DELETED IN THIS PASS, because their markup is gone: .ng-val and .ng-vals__* (the capability cards and their two group heads), .ng-gain__* (the 01–04 outcome ladder), .ng-flow__* and the .ng-env__v override (the old in-panel key/value rows), the .ng-out-band pair rules and .ng-close__rail. An orphaned rule is not applied, but it does mislead the next person — and this page no longer uses .ng-out, .ng-env, .ng-card or .ng-grid at all. ========================================================================== */ /* ========================================================================== 1. THE F-INDEX MASTHEAD ========================================================================== */ /* .ng-masthead--index itself is ng-shared.css §16b — one column, a small h1 (2.6rem ceiling against §4's 3.5rem), a 72ch lede, no aside. Only the three things the modifier cannot know about are here. .ng-idx__* IS DELIBERATELY NOT SHARED. pages/perakende.css ships a DIFFERENT component under the same name and the two disagree exactly where a shared rule would bite (__list's top rule, __to's grid-column). PATTERNS.md §16 records the judgement in full and tells the next F-INDEX agent to copy the block into its own sheet, which is what this is — from pages/hizli-teslimat.css §1b, the first F-INDEX page. A NAME IS NOT A PRIMITIVE. */ /* The line the deleted aside's label used to carry, folded under the headline: which page sent you here and what it promised. It is a SENTENCE, so 16px and no tracking — not an eyebrow. */ .ng-v2 .ng-lead__src{ margin:14px 0 0; font-size:16px; line-height:1.55; color:var(--ng-muted); max-width:66ch; } /* --- 1b. .ng-idx — THE INDEX, and the reason this page looks different ----- A real table of contents: five rows, each an anchor to a real id on this page. ARCHETYPES is explicit that "anchors must actually resolve to ids on the page" — an index that scrolls to nothing is a decoration with a pointer cursor. The five ids are #yetenekler #modeller #entegrasyon #yontem #iletisim and they are the SAME on the English page, because a fragment identifier is never displayed and one id set means the two markups cannot drift. RULED ROWS, NOT CARDS. A contents list is one thing with five entries, not five things. Five raised boxes would have re-created the card grid this pass is removing, two screens higher up. THREE COLUMNS ABOVE 900px: the ordinal, the entry, and where it goes. The destination column is `max-content` and nowrap — a fixed track was tried on akaryakit and at 230px the longest label filled the line exactly and pushed its arrow onto a line of its own, reading as a stray glyph. scroll-margin-top for the targets is in §6. */ .ng-v2 .ng-idx__label{ margin:0 0 14px; color:var(--ng-muted); /* not the accent: this labels the page's own furniture, and five accent-adjacent rows under an accent label reads as one alarm */ } .ng-v2 .ng-idx__list{ list-style:none; margin:0; padding:0; border-top:2px solid var(--ng-hairline); } .ng-v2 .ng-idx__item{ border-bottom:1px solid var(--ng-hairline); } .ng-v2 .ng-idx__link{ display:grid; grid-template-columns:auto minmax(0,1fr); column-gap:16px; row-gap:6px; padding:16px 0; color:inherit; text-decoration:none; } @media (min-width:900px){ .ng-v2 .ng-idx__link{ grid-template-columns:auto minmax(0,1fr) max-content; column-gap:28px; align-items:baseline; padding:18px 0; } } /* 12px at .1em (ratio .10) is a tracked label BY MEASUREMENT, which is what ng-page-check actually tests — not by allowlist. */ .ng-v2 .ng-idx__n{ font-family:var(--ng-font-label); font-weight:600; font-size:12px; line-height:1.6; letter-spacing:.1em; text-transform:none; color:var(--ng-accent); /* 5.45:1 on the ground */ font-variant-numeric:tabular-nums; } .ng-v2 .ng-idx__main{ display:block; min-width:0; } .ng-v2 .ng-idx__name{ display:block; font-family:var(--ng-font-display); font-weight:600; font-size:20px; line-height:1.3; letter-spacing:-0.012em; color:var(--ng-ink); } .ng-v2 .ng-idx__body{ display:block; margin-top:5px; font-size:15px; line-height:1.55; color:var(--ng-muted); max-width:72ch; } /* grid-column:2 is not cosmetic — without it the destination label auto-places into column 1, i.e. UNDER THE ORDINAL, because the two-column stacked grid has three children. Reset to auto inside the 900 query, where the third column exists and auto-placement is correct again. */ .ng-v2 .ng-idx__to{ display:block; grid-column:2; font-family:var(--ng-font-label); font-weight:500; font-size:12px; line-height:1.5; letter-spacing:.1em; text-transform:none; /* authored pre-uppercased: i -> İ */ color:var(--ng-muted); } .ng-v2 .ng-idx__to .ng-arrow{ margin-left:8px; } @media (min-width:900px){ .ng-v2 .ng-idx__to{ grid-column:auto; text-align:right; white-space:nowrap; } } @media (any-hover:hover){ .ng-v2 .ng-idx__link:hover .ng-idx__name, .ng-v2 .ng-idx__link:hover .ng-idx__to{ color:var(--ng-accent); } .ng-v2 .ng-idx__link:hover .ng-arrow{ transform:translate3d(4px,0,0); } } .ng-v2 .ng-idx__link:focus-visible .ng-idx__name{ color:var(--ng-accent); } /* --- 1c. the masthead's foot ---------------------------------------------- Proof strip, its footnote and one primary action, BELOW the index rather than above it. The index owns the first screen; this is what a reader who has taken the index then sees. ng-shared's .ng-masthead__proof already draws its own top rule and 30px of air, and the masthead grid supplies 30px of row gap above it, so the two would otherwise stack to 60px. */ .ng-v2 .ng-lead__foot{ min-width:0; } .ng-v2 .ng-lead__foot .ng-masthead__proof{ margin-top:0; } .ng-v2 .ng-lead__note{ max-width:60ch; } .ng-v2 .ng-lead__actions{ margin-top:22px; } /* ========================================================================== 2. SECTION 20 — THE ÇİZELGE / LEDGER, this page's dominant shape The client publishes two lists of four that answer each other: "Neler Sunuyoruz?" (what the product does) and "Size Ne Kazandırır?" (what changes for you). On the live page they were two screens apart — four white boxes, and below the fold four bare lines under a heading that never rendered. A ROW CAN CARRY A PAIRING ACROSS IT; A CARD CANNOT. That is the whole argument for the shape. A 2x2 of cards asserts four separate items, when what is being expressed is that column two is CAUSED by column one. It is the same reasoning the akaryakit leaf used to reject a per-card tag: a property drawn on a card reads as belonging to that card, and a relationship ACROSS cards has nowhere to live. Here the first cell IS the row's label, so KURULUM / ENTEGRASYON in the rail is not that rejected pattern. THREE COLUMNS ABOVE 900px: an ordinal rail, what it does, what you gain. The two copy columns are 1.06fr / 1fr rather than even — the capability paragraphs are the client's own and run to 40 words where the gain lines run to 20, so an even split leaves the second column short and the first tight. The rail is a fixed 124px because the head strip has to line up with it and an intrinsic track cannot: the strip's first cell is empty, so `max-content` there would resolve to 0 and the two grids would drift apart by the width of the word ENTEGRASYON. ========================================================================== */ /* --- 2a. the column head strip, desktop only ------------------------------ aria-hidden, and the lede carries both of the client's questions verbatim instead — which is why the lede is worded the way it is. A visual column header that is meaningless once the columns stack should not be read aloud at any width, and duplicating it into every row would say it eight times. */ .ng-v2 .ng-cz__head{ display:none; } @media (min-width:900px){ .ng-v2 .ng-cz__head{ display:grid; grid-template-columns:124px minmax(0,1.06fr) minmax(0,1fr); column-gap:32px; padding-bottom:10px; } .ng-v2 .ng-cz__head .ng-cz__hk{ grid-column:2; } .ng-v2 .ng-cz__head .ng-cz__hk--g{ grid-column:3; } } /* 11px at .1em (ratio .10) is a tracked label BY MEASUREMENT, which is what ng-page-check tests — not by allowlist. */ .ng-v2 .ng-cz__hk{ margin:0; font-family:var(--ng-font-label); font-weight:600; font-size:11px; line-height:1.35; letter-spacing:.1em; text-transform:none; /* authored pre-uppercased: i -> İ */ color:var(--ng-muted); } .ng-v2 .ng-cz__hk--g{ color:var(--ng-accent); } /* 5.45:1 on the ground */ /* --- 2b. the rows --------------------------------------------------------- The 2px cap over the first row and 1px rules between are the same treatment .ng-steps uses for a sequence and .ng-idx uses for the contents list, so the page reads as one family of ruled lists rather than four inventions. */ .ng-v2 .ng-cz__list{ list-style:none; margin:0; padding:0; border-top:2px solid var(--ng-hairline); } .ng-v2 .ng-cz__row{ display:grid; grid-template-columns:minmax(0,1fr); gap:14px; padding:20px 0; border-bottom:1px solid var(--ng-hairline); } @media (min-width:900px){ .ng-v2 .ng-cz__row{ grid-template-columns:124px minmax(0,1.06fr) minmax(0,1fr); column-gap:32px; align-items:start; padding:24px 0; } } /* The rail: an ordinal and the half of the product's name this row belongs to. Inline at phone width, stacked in its own column above 900. */ .ng-v2 .ng-cz__rail{ display:flex; align-items:center; flex-wrap:wrap; gap:10px; } @media (min-width:900px){ .ng-v2 .ng-cz__rail{ flex-direction:column; align-items:flex-start; gap:9px; } } /* The client's own 01-04 ordering, kept — as an index, which is what an ordinal is. On the live page these were ~64px magenta gradient numerals: the largest thing on the screen, carrying no information. */ .ng-v2 .ng-cz__n{ font-family:var(--ng-font-label); font-weight:600; font-size:11px; line-height:1.6; letter-spacing:.1em; text-transform:none; color:var(--ng-accent); font-variant-numeric:tabular-nums; } /* A hairline chip, not a fill: this is a label on a ledger row, and a filled badge next to an accent ordinal would read as a second alarm. */ .ng-v2 .ng-cz__grp{ padding:3px 9px; border:1px solid var(--ng-hairline); border-radius:var(--ng-radius-pill); font-family:var(--ng-font-label); font-weight:600; font-size:11px; line-height:1.4; letter-spacing:.1em; text-transform:none; /* authored pre-uppercased: i -> İ */ color:var(--ng-muted); white-space:nowrap; } .ng-v2 .ng-cz__does, .ng-v2 .ng-cz__gain{ min-width:0; } /* Doubled class, the §11 defence against the theme's `body .content-wrapper h?:not(:first-child){margin-top:50px}` at (0,2,2). This h3 IS its cell's first child today, so the rule does not match — the defence is here because that is one markup edit away from being false, and the failure is a silent 50px gap. */ .ng-v2 .ng-cz__name.ng-cz__name{ margin:0; font-family:var(--ng-font-display); font-weight:600; font-size:18px; line-height:1.3; letter-spacing:-0.012em; color:var(--ng-ink); } .ng-v2 .ng-cz__body{ margin:8px 0 0; font-size:15px; line-height:1.6; color:var(--ng-muted); } /* The gain is the row's OUTCOME, so it takes the accent — the only place on this page where two parallel columns need telling apart at a glance. 17px is under the 24px display-magenta threshold, so this is --ng-accent (5.45:1 on the ground), never --ng-accent-display. */ .ng-v2 .ng-cz__gname{ margin:0; font-family:var(--ng-font-display); font-weight:600; font-size:17px; line-height:1.35; letter-spacing:-0.01em; color:var(--ng-accent); } .ng-v2 .ng-cz__ar{ margin-right:9px; } .ng-v2 .ng-cz__gbody{ margin:8px 0 0; font-size:15px; line-height:1.6; color:var(--ng-muted); } /* On a stacked row the two halves need separating, or the gain reads as a third paragraph of the capability. A LEFT rule, not a full-width one: the row's own bottom hairline is already the horizontal divider, and two horizontal rules 20px apart is the mistake perakende's ledger records. */ @media (max-width:899px){ .ng-v2 .ng-cz__gain{ padding-left:14px; border-left:2px solid var(--ng-hairline); } } .ng-v2 .ng-cz__note{ margin-top:30px; max-width:88ch; } /* ========================================================================== 3. SECTION 30 — THE DEPLOYMENT COMPARISON TABLE .ng-dtable is ng-shared §15b and already beats the three theme table rules (the (0,1,4) cell border/padding rule, and the two (0,2,2) `table:not(...)` margin rules that a plain `.ng-v2 .ng-dtable` at (0,2,0) would lose to — which is why the primitive doubles its own class on the margin). Only what is a property of THIS content is here. ========================================================================== */ /* The white panel the mist band holds. Sunken holds white chrome; that is the second of the site's two surface roles doing its job, and there is no third. .ng-dtable draws its own hairlines, so the panel supplies the fill, the radius and the padding and nothing else. */ .ng-v2 .ng-mdl__panel{ margin-top:30px; 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:900px){ .ng-v2 .ng-mdl__panel{ padding:26px 30px 24px; } } /* Column widths belong to the content, not to the primitive. The longest string in column 1 is "Standart kurulum süresi" / "Standard installation time"; 34% holds both on one line at 1120 and wraps to two below 768, where the table's own mobile padding has already taken over. */ @media (min-width:768px){ .ng-v2 .ng-mdl__table th:first-child{ width:34%; } .ng-v2 .ng-mdl__table thead th + th{ width:33%; } } /* THE TWO ROWS THAT ACTUALLY DIFFER. Their values are set in the ink and the display face so the eye lands on the four cells the section is about. */ .ng-v2 .ng-mdl__table .is-diff td{ font-family:var(--ng-font-display); font-weight:600; font-size:15px; line-height:1.35; color:var(--ng-ink); } /* THE SIX IDENTICAL ROWS. A colspan is the honest cell: the source material states one value for both models, and inventing a second phrasing to fill the on-premise column would be a distinction the company has not made. Printing the same string twice would have hidden the section's whole point, which is that choosing a model changes two things and not eight. */ .ng-v2 .ng-mdl__table td.is-same{ font-family:var(--ng-font-display); font-weight:600; font-size:15px; line-height:1.35; color:var(--ng-ink); } /* The marker that says WHY the cell spans. A mist chip on the white panel — the same relationship .ng-pills has to a card, so it is not a third surface role. 11px at .1em clears the tracked-label threshold by measurement. */ .ng-v2 .ng-mdl__both{ display:inline-block; margin-right:12px; padding:3px 9px; border-radius:var(--ng-radius-pill); background:var(--ng-surface-sunken); font-family:var(--ng-font-label); font-weight:600; font-size:11px; line-height:1.4; letter-spacing:.1em; text-transform:none; /* authored pre-uppercased: i -> İ */ color:var(--ng-muted); /* 5.42:1 on mist */ vertical-align:middle; } /* tfoot is already 14px muted with a 2px cap in §15b; only the measure and the line height across a spanned row are this page's. */ .ng-v2 .ng-mdl__table tfoot td{ line-height:1.55; } .ng-v2 .ng-mdl__note{ margin-top:24px; max-width:88ch; } /* ========================================================================== 4. SECTION 40 — THE INDIGO FLOW DIAGRAM The band is `.ng-section.is-dark` — NOT `ng-section--dark`, which adds text-align:center and the centred CLOSING composition. PATTERNS records that trap; a three-column diagram wants the palette only. NOT ONE COLOUR IS WRITTEN IN THIS SECTION. Every rule below reads a token, and ng-foundation §3 redefines those same token names inside .is-dark, so the whole diagram inverts on its own: 6%-paper fill, 16%-paper hairline, the pink accent tier (light magenta measures 2.65:1 on navy and .is-dark collapses BOTH accent tiers onto #FF9BC9 so a >=24px highlight cannot reintroduce it), and --ng-shadow-card:none, because a navy drop on navy is a smudge. THE CHROME IS AUTHORED HERE RATHER THAN REUSING .ng-out. ng-shared's panel is a figure whose body is a single column; this one is a three-lane grid with a spine, and the bar has to sit on a panel whose interior is divided. The three chrome roles are deliberately the same as .ng-out__bar's — what it is, what it is of, and that it is a sample — so the page still reads as the same family. ========================================================================== */ .ng-v2 .ng-fx__dia{ margin:30px 0 0; background:var(--ng-surface); border:1px solid var(--ng-hairline); border-radius:var(--ng-radius); overflow:hidden; /* the bar's fill stops at the radius */ } /* THE BAR WRAPS AT EVERY WIDTH, not only below 767 as ng-shared §13b does it. The saglik leaf found the failure this prevents: with tag + meta + flag on one row the subject line ellipsised to "Örnek bağlantı · satış ve C…" and the panel silently stopped saying what it was a sample OF. It reported clean at all four widths with the ellipsis in place, before and after. Turkish subject lines are the long ones. */ .ng-v2 .ng-fx__bar{ display:flex; align-items:center; flex-wrap:wrap; gap:6px 10px; padding:12px 16px; background:var(--ng-surface-sunken); border-bottom:1px solid var(--ng-hairline); } .ng-v2 .ng-fx__tag{ flex:1 1 auto; 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-ink); } .ng-v2 .ng-fx__meta{ order:3; flex:1 1 100%; font-family:var(--ng-font-label); font-weight:500; font-size:12px; line-height:1.35; letter-spacing:.08em; text-transform:none; color:var(--ng-muted); } .ng-v2 .ng-fx__flag{ flex:none; padding:4px 9px; border-radius:var(--ng-radius-pill); background:var(--ng-accent-wash); color:var(--ng-accent); /* 4.99:1 on the wash over the band */ font-family:var(--ng-font-label); font-weight:600; font-size:11px; line-height:1.3; letter-spacing:.1em; text-transform:none; } @media (min-width:900px){ .ng-v2 .ng-fx__bar{ padding:14px 28px; } } /* --- 4a. the three lanes -------------------------------------------------- Your systems, the API, Next Geo. The spine is PHYSICALLY BETWEEN the two lanes that use it, which is the one thing a flat list of item + direction could not say. Stacked below 900 in reading order — out, layer, back — so the sequence survives the collapse. */ .ng-v2 .ng-fx__grid{ display:grid; grid-template-columns:minmax(0,1fr); padding:20px 16px 22px; } @media (min-width:900px){ .ng-v2 .ng-fx__grid{ grid-template-columns:repeat(3,minmax(0,1fr)); padding:26px 28px 28px; } } /* A flex column so the direction line can be pushed to the bottom: the two lanes hold three items and two, so on `margin-top:0` they closed 47px apart and the diagram looked like one lane had been cut short rather than like one lane carrying fewer things. Found in the 1440 screenshot; the page reported clean before and after. */ .ng-v2 .ng-fx__lane{ min-width:0; display:flex; flex-direction:column; } /* The divider is a border on the spine, not a gap fill, so it cannot dangle when the columns stack — it simply becomes a horizontal rule instead. */ .ng-v2 .ng-fx__spine{ min-width:0; margin:22px 0; padding:22px 0 0; border-top:1px solid var(--ng-hairline); } @media (min-width:900px){ .ng-v2 .ng-fx__spine{ margin:0 26px; padding:0 26px; border-top:0; border-left:1px solid var(--ng-hairline); border-right:1px solid var(--ng-hairline); } } @media (max-width:899px){ .ng-v2 .ng-fx__lane--in{ padding-top:22px; border-top:1px solid var(--ng-hairline); } } /* 11px at .1em, tracked label by measurement. The count is a separate span so it can take the ink while the direction label stays muted: the 3 and the 2 count what is drawn on the page, so they are countable, not claims. */ .ng-v2 .ng-fx__lk{ margin:0; font-family:var(--ng-font-label); font-weight:500; font-size:11px; line-height:1.5; letter-spacing:.1em; text-transform:none; /* authored pre-uppercased: i -> İ */ color:var(--ng-muted); /* 7.84:1 on the 6% surface */ } .ng-v2 .ng-fx__ct{ color:var(--ng-ink); font-weight:600; font-variant-numeric:tabular-nums; } .ng-v2 .ng-fx__list{ list-style:none; margin:14px 0 0; padding:0; border-top:1px solid var(--ng-hairline); } /* 16px, already at the mobile reading floor, so no @media of its own. These five strings ARE the section — what actually crosses the boundary — and they are read, not glanced at. */ .ng-v2 .ng-fx__list li{ display:flex; align-items:baseline; gap:10px; padding:11px 0; border-bottom:1px solid var(--ng-hairline); font-size:16px; line-height:1.45; color:var(--ng-ink); } /* The arrow carries the direction, so it is the accent in the lane that RETURNS something and muted in the lane that sends: what comes back is what the reader is buying. */ .ng-v2 .ng-fx__ar{ flex:none; color:var(--ng-muted); font-size:15px; line-height:1; } .ng-v2 .ng-fx__lane--in .ng-fx__ar{ color:var(--ng-accent); } /* margin-top:auto, so the two lanes close on ONE baseline whatever their item count. Same reason ng-shared pins .ng-out__foot to the bottom of a panel. */ .ng-v2 .ng-fx__dir{ margin:14px 0 0; padding-top:4px; font-family:var(--ng-font-display); font-weight:600; font-size:17px; line-height:1.3; letter-spacing:-0.012em; color:var(--ng-ink); } @media (min-width:900px){ .ng-v2 .ng-fx__lane > .ng-fx__dir:last-child{ margin-top:auto; } } .ng-v2 .ng-fx__sk{ margin:0; font-family:var(--ng-font-label); font-weight:600; font-size:11px; line-height:1.5; letter-spacing:.1em; text-transform:none; color:var(--ng-accent); } .ng-v2 .ng-fx__sname{ margin:10px 0 0; font-family:var(--ng-font-display); font-weight:600; font-size:19px; line-height:1.25; letter-spacing:-0.014em; color:var(--ng-ink); } .ng-v2 .ng-fx__sbody{ margin:10px 0 0; font-size:15px; line-height:1.55; color:var(--ng-muted); } /* A
, so it is the figure's own footnote rather than the page's. */ .ng-v2 .ng-fx__foot{ margin:0; padding:16px 16px 18px; border-top:1px solid var(--ng-hairline); font-size:14px; line-height:1.55; color:var(--ng-muted); } @media (min-width:900px){ .ng-v2 .ng-fx__foot{ padding:16px 28px 20px; } } .ng-v2 .ng-fx__note{ margin:26px auto 0; max-width:86ch; text-align:center; } /* ========================================================================== 5. SECTION 50 — THE LADDER .ng-steps, .ng-steps__pills, .ng-pills, .ng-how__note and .ng-how__links are all shared (§13c and §14) and nothing on this page overrides them. Left as a note rather than deleted so the next person does not go looking for a rule that was never written. ========================================================================== */ /* ========================================================================== 6. SECTION 60 — THE CLOSE, and the anchor offsets THE PAGE CANNOT END ON THE INDIGO SLAB: dark:MIDDLE spends the band on section 40, and the finding behind this whole pass was that 76 of 76 pages closed the same way. So the close is a SUNKEN BAND HOLDING A RAISED PANEL — the inverse of the mist-rail-on-the-ground that akaryakit and hizli-teslimat use for the same assignment. Both are the site's two surface roles doing their job; putting them the other way round is what stops two MIDDLE pages closing on a block that reads as the same object. PATTERNS records both variants and neither is promoted, precisely because the leaves that have written .ng-close__* have not written the same one. ========================================================================== */ .ng-v2 .ng-close__panel{ 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__panel{ grid-template-columns:minmax(0,1fr) auto; column-gap:44px; align-items:center; padding:34px 36px; } } .ng-v2 .ng-close__copy{ min-width:0; } .ng-v2 .ng-close__eyebrow{ margin:0; } /* Doubled class for the theme's 50px margin-top. This h2 is NOT the first child of its block — the eyebrow is — so `h2:not(:first-child)` DOES match it, unlike the section heads. */ .ng-v2 .ng-close__title.ng-close__title{ margin:14px 0 0; font-size:clamp(1.6rem, 3.2vw, 2.1rem); line-height:1.15; letter-spacing:-0.02em; max-width:22ch; text-wrap:balance; } .ng-v2 .ng-close__lede{ margin:14px 0 0; font-size:17px; line-height:1.6; color:var(--ng-muted); /* 6.21:1 on the white panel */ 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 tracked-label exception. ng-mobile.css §7 already gives .ng-close__tel its 44px hit area at 767, at 768-1023 and at exactly 1024, so only the affordance is here. */ .ng-v2 .ng-close__meta{ margin:16px 0 0; font-family:var(--ng-font-label); font-weight:500; font-size:14px; line-height:1.6; letter-spacing:.04em; color:var(--ng-muted); } .ng-v2 .ng-close__tel{ color:var(--ng-muted); text-decoration:underline; text-underline-offset:4px; } .ng-v2 .ng-close__tel:hover{ color:var(--ng-ink); } /* Every index target needs the same offset, so it is one class on the section rather than five id selectors. 104px clears the theme's sticky header; the 84px step matches the width where that header collapses. An index whose anchors land under the header is an index that scrolled to the wrong place, which is indistinguishable from a broken one. */ .ng-v2 .ng-jump{ scroll-margin-top:104px; } @media (max-width:1364px){ .ng-v2 .ng-jump{ scroll-margin-top:84px; } } /* ========================================================================== 7. RESPONSIVE ng-mobile.css §7 carries every 44px hit area (crumbs, buttons, pills, tel) at <=767, at 768-1023 and at exactly 1024. The only interactive thing this page adds is .ng-idx__link, a row over 70px tall at every width, so this block is type and rhythm only. ========================================================================== */ @media (max-width:767px){ /* The 16px mobile reading floor for every sentence this page adds. The tracked labels (__n, __to, __hk, __grp, __lk, __sk, __tag, __flag, __both, and the table's caption and column heads) are exempt BY MEASUREMENT — letter-spacing / font-size = 0.10 or 0.08, at or over the 0.08 the checker tests — and stay put. */ .ng-v2 .ng-lead__src, .ng-v2 .ng-idx__body, .ng-v2 .ng-cz__body, .ng-v2 .ng-cz__gbody, .ng-v2 .ng-fx__sbody, .ng-v2 .ng-close__lede{ font-size:16px; } /* --index's 26px masthead gap is in ng-shared §16b with the modifier. */ .ng-v2 .ng-idx__name{ font-size:18px; } .ng-v2 .ng-idx__link{ padding:15px 0; } .ng-v2 .ng-lead__note{ max-width:none; } .ng-v2 .ng-cz__row{ padding:18px 0; gap:12px; } .ng-v2 .ng-cz__name.ng-cz__name{ font-size:17px; } .ng-v2 .ng-cz__gname{ font-size:16px; } .ng-v2 .ng-cz__note, .ng-v2 .ng-how__note, .ng-v2 .ng-mdl__note{ max-width:none; } /* The table at 390. The row subject keeps the 16px floor §15b sets; what gives is the panel padding and the spanned rows, whose marker becomes a line of its own — inline, it left the value 90px and broke "Eğitim · Entegrasyon · Test" across three lines. */ .ng-v2 .ng-mdl__panel{ margin-top:24px; padding:18px 14px 16px; } .ng-v2 .ng-mdl__table .is-diff td, .ng-v2 .ng-mdl__table td.is-same{ font-size:15px; } .ng-v2 .ng-mdl__both{ display:block; margin:0 0 6px; width:max-content; } .ng-v2 .ng-fx__dia{ margin-top:24px; } .ng-v2 .ng-fx__dir{ font-size:16px; } .ng-v2 .ng-fx__sname{ font-size:18px; } .ng-v2 .ng-fx__note{ max-width:none; } .ng-v2 .ng-close__panel{ padding:22px 18px; } .ng-v2 .ng-close__meta{ margin-top:14px; } } /* ========================================================================== 8. REDUCED MOTION ng-shared.css §10 already flattens .ng-card and .ng-arrow under a reduce preference — including cancelling ng-components.css's !important marker transform — and ng-components.css §8 does the same for .ng-anim. Nothing on this page adds motion beyond those two: the flow arrows are static glyphs and every rule on the page is a static border, precisely so that a reduce preference has nothing left to switch off here. Left as a note rather than an empty block so the next person does not go looking for the missing rule. ========================================================================== */ /* ========================================================================== 9. THE TWO CLIENT ARTEFACTS — ng-shared §17 inside sections 20 and 30 F-INDEX's own image shape is ONE PICTURE PER INDEXED SECTION and that is what this is: entry 01 gets the layer diagram, entry 02 gets the setup sequence, and no band ever holds two. The index in section 10 stays text — a list is the hero of this page's first screen, and a thumbnail rail inside it would be a different page's silhouette, not this one's. ENTRY 03, THE INDIGO BAND, GETS NONE, AND THAT IS DELIBERATE. Its own artefact was withdrawn; the two that remain have a white ground, and a 780px white plate inside the page's only dark band is the one thing the archetype guidance says not to build on top of a dark signal. dark:MIDDLE is an assigned property of this page. Section 40 already carries a labelled sample diagram of its own, so the section is not left without an artefact. THE LAYOUT IS THE PRIMITIVE'S; only the cap and the rhythm are here. The assets are 780x540 and .ng-figband__img is width:100%, so at 1440 the 1120px container would upscale them by 1.44 and they would go soft. The cap is on the
rather than on the frame so the caption stays under the picture instead of running out past its right edge. .ng-figband__fig sets margin:0 at the same specificity; this sheet loads after ng-shared.css, so the later rule is what applies. ========================================================================== */ .ng-v2 .ng-cz__fig, .ng-v2 .ng-mdl__fig{ max-width:780px; margin-inline:auto; } .ng-v2 .ng-cz__fig{ margin-top:26px; } .ng-v2 .ng-mdl__fig{ margin-top:22px; } /* THE LEAD-IN IS NOT A HEADING, and it may not be one. Each asset bakes in its own kicker and its own 25px title, so §17's first rule bars an h3 beside it — and on this page row 02 of the ledger already prints one of those titles verbatim. What sits above each picture is instead the sentence a phone reader needs: a 780px asset renders at 342px at a 390 viewport, so its 11px layer labels and 10.5px step notes come out near 5px, and neither the four layer names nor the four setup steps may live only inside the raster. 17px, not the 18px .ng-lede: a lede belongs to a section head, and this is a caption's opposite number — the sentence you read before the picture rather than after it. Measure capped to the picture's own width so the line never runs wider than the thing it introduces. */ .ng-v2 .ng-cz__figlead, .ng-v2 .ng-mdl__figlead{ max-width:780px; margin-inline:auto; margin-bottom:0; font-size:17px; line-height:1.6; color:var(--ng-ink); } .ng-v2 .ng-cz__figlead{ margin-top:38px; } .ng-v2 .ng-mdl__figlead{ margin-top:30px; } /* Same 16px mobile reading floor §7 gives every other sentence this page adds, and a tighter gap between the lead-in and its picture, which at 390 are two parts of one block rather than two blocks. */ @media (max-width:767px){ .ng-v2 .ng-cz__figlead, .ng-v2 .ng-mdl__figlead{ font-size:16px; } .ng-v2 .ng-cz__figlead{ margin-top:28px; } .ng-v2 .ng-mdl__figlead{ margin-top:24px; } .ng-v2 .ng-cz__fig{ margin-top:18px; } .ng-v2 .ng-mdl__fig{ margin-top:16px; } } /* ========================================================================== 10. 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
was therefore dropped: a capped figure rendered flush LEFT instead of centred and the gap under it collapsed to 0. Measured, not inferred — on /sektorler/akaryakit/ the figure computed margin-left:0px against an authored `0 auto 40px`. The declarations below are the SAME ones already written above, restated at (0,6,1) so they clear BOTH Elementor and the (0,5,1) rule ng-shared.css section 17 now ships: figure.ng-figband__fig.ng-figband__fig {margin:0}. Same declarations as above, no new values. ========================================================================== */ .ng-v2 .ng-section .ng-container figure.ng-cz__fig.ng-cz__fig.ng-cz__fig{ margin-inline:auto; } .ng-v2 .ng-section .ng-container figure.ng-mdl__fig.ng-mdl__fig.ng-mdl__fig{ margin-inline:auto; } .ng-v2 .ng-section .ng-container figure.ng-cz__fig.ng-cz__fig.ng-cz__fig{ margin-top:26px; } .ng-v2 .ng-section .ng-container figure.ng-mdl__fig.ng-mdl__fig.ng-mdl__fig{ margin-top:22px; } @media (max-width:767px){ .ng-v2 .ng-section .ng-container figure.ng-cz__fig.ng-cz__fig.ng-cz__fig{ margin-top:18px; } .ng-v2 .ng-section .ng-container figure.ng-mdl__fig.ng-mdl__fig.ng-mdl__fig{ margin-top:16px; } }