/* ========================================================================== /urunler/geoview/ (TR 23306) + /en/products/geoview/ (EN 25691) ONE stylesheet for the pair. geoview is one of the four shared-slug pairs (fmcg, geoview, next-geo-tailor, point-report), so both languages resolve to post_name "geoview" and both load THIS file — there is no --css-from copy to drift from. Author markup in pages/geoview-tr/ and pages/geoview-en/ and apply each by id. VARIANCE PASS, 2026-08-17. variance-plan.json assigns this pair: opening D-NUMBER one very large figure, h1 subordinate dark NONE-MIST no indigo band anywhere on the page sections 3 including the masthead WHAT THE PAGE WAS. Six sections in the tranche-2 leaf pattern: masthead with an h1 left and a mist plate right, a 3+2 card grid of the five capabilities, a sunken band with two sample panels, a four-step ladder, a sunken band of use-case rows, and an indigo CTA. Correct, clean, and — screenshotted beside /urunler/kurulum-ve-entegrasyon/ at 1440 — the same picture with different words in it. That is the defect this pass exists to fix. WHAT IT IS NOW, in three sections: 10 GROUND a 184px "5" over a subordinate h1; the /urunler/ need line and its two halves as a WIDE rail, not a right-hand plate 20 MIST the product's two halves as two artefacts: the store finder replica, and a 7-ROW CROSSWALK TABLE pairing each field of one location record with what the interface does with it. Then the five capability titles as a numbered LEDGER 30 GROUND the four-step ladder, the five use-case rows, and a mist closing rail instead of the indigo slab NO CARD GRID SURVIVES ON THIS PAGE. ARCHETYPES.md: "Do not reach for a card grid by default — that is the shape this run exists to break up." The five capability cards are ruled ledger rows and the
record panel is a real , so the only raised surfaces left are the two artefact panels. NOTE: rules this sheet used to declare for the shared leaf primitives (.ng-out-band, .ng-lead, .ng-how, .ng-steps__pills) live in ng-shared.css §14. Anything of theirs still declared below is a DELIBERATE override — it diverged from the majority, so it was left here, and it still wins because this file loads after ng-shared.css. DELETED IN THIS PASS, and worth knowing why: .ng-lead .ng-masthead__inner{56fr 44fr} the two-column split for an aside that no longer exists. It is (0,3,0) and so is ng-shared §16a's single-column rule for .ng-masthead--num — a TIE that this sheet would win on load order, putting the D-NUMBER masthead back into two columns with one child in it. A stale override is not inert. .ng-rec__* the key/value record panel, now a table. .ng-rec was page-two of a two-page shape and PATTERNS.md says promote at three; there is now one copy left on the site, in pages/next-geo-tailor.css. .ng-caps__grid the 3+2 .ng-grid card grid. ========================================================================== */ /* ========================================================================== 1. MASTHEAD — D-NUMBER The figure, the numeral, the subordinate h1 and the single-column grid are all ng-shared.css §16a (.ng-masthead--num / .ng-fig). Nothing about them is restated here: §16a was promoted out of gayrimenkul.css precisely so the five D-NUMBER pages cannot drift apart, and a local copy would re-create the divergence the promotion removed. THE NUMBER IS 5 — Next Geo's own count of GeoView capability titles, the same five printed on the GeoView card on /urunler/, numbered 01 to 05 in the ledger in section 20. Countable from the page in one scroll, which is what ARCHETYPES.md requires of a D-NUMBER figure. The illustrative figures this page carries (4 sample branches, 1,2 km, 12 days) were all rejected as candidates for the same reason gayrimenkul recorded: a sample number set 184px tall reads as a company metric however it is captioned. ========================================================================== */ /* --- 1a. .ng-need — the hub's need line, as a WIDE rail -------------------- §16a forbids an aside on a D-NUMBER masthead: its single-column rule is (0,3,0) and beats §4's two-column rule inside §4's own min-width:960 query, so an aside would be laid out on top of the copy. The aside's CONTENT is not the problem — the /urunler/ need line is the promise this visitor clicked, and PATTERNS.md tells every leaf to quote it in the first viewport. So it moves to the foot of the masthead as a full-width rail. THE SHAPE IS THE POINT. Same words, same SUNKEN role (mist + hairline, no shadow — a recessed surface that also floats is a contradiction), opposite composition: a 1120px rail under the proof strip rather than a 42% plate on the right. A visitor arriving from a sibling leaf sees the quote in a place the house pattern never puts it. TWO COLUMNS AT >=900px: the quote on the left, the two halves as ruled rows on the right. Below that they stack, quote first, which is the reading order anyway — the need, then its two parts. */ .ng-v2 .ng-need{ margin-top:34px; padding:22px 20px; background:var(--ng-surface-sunken); border:1px solid var(--ng-hairline); border-radius:var(--ng-radius); display:grid; grid-template-columns:minmax(0,1fr); gap:20px; } @media (min-width:900px){ .ng-v2 .ng-need{ grid-template-columns:minmax(0,40fr) minmax(0,60fr); column-gap:44px; padding:26px 28px; } } .ng-v2 .ng-need__label{ margin:0 0 14px; } /* Lifted from ng-shared §13a's .ng-aside__quote, deliberately unchanged: the two are the same editorial object (a quoted hub line) and should look identical wherever they sit. margin:0 at (0,2,0) beats the theme's `.content-wrapper blockquote` at (0,1,1); the ::before/::after reset is there because Neuros hangs a decorative glyph off blockquotes in some contexts and a stray “ in front of the hub's own words reads as scare quotes. */ .ng-v2 .ng-need__quote{ margin:0; padding:2px 0 2px 16px; border-left:3px solid var(--ng-accent); font-family:var(--ng-font-display); font-weight:600; font-size:18px; line-height:1.45; color:var(--ng-ink); } .ng-v2 .ng-need__quote::before, .ng-v2 .ng-need__quote::after{ content:none; } .ng-v2 .ng-need__body{ margin:16px 0 0; font-size:15px; line-height:1.6; color:var(--ng-muted); /* 5.42:1 on mist */ } /*
with a wrapping
per pair — the only valid way to group a dt/dd inside a description list, same as ng-shared §15c's .ng-facts. The UA's `dd{margin-inline-start:40px}` is killed by the margin shorthand on __v; without it every half sits 40px in and the column looks broken. */ .ng-v2 .ng-need__halves{ margin:0; } .ng-v2 .ng-need__half{ padding:13px 0; border-top:1px solid var(--ng-hairline); } .ng-v2 .ng-need__half:first-child{ border-top:0; padding-top:0; } .ng-v2 .ng-need__half:last-child{ padding-bottom:0; } .ng-v2 .ng-need__k{ margin:0; font-family:var(--ng-font-display); font-weight:600; font-size:16px; line-height:1.3; color:var(--ng-ink); } .ng-v2 .ng-need__v{ margin:6px 0 0; font-size:15px; line-height:1.6; color:var(--ng-muted); } /* ========================================================================== 2. SECTION 20 — THE PRODUCT'S TWO HALVES. The only mist band on the page. dark: NONE-MIST, so this band carries the tonal weight the indigo slab carries on every other leaf. It is also the middle of a three-section page, which makes the page's tonal order GROUND - MIST - GROUND. ========================================================================== */ /* --- 2a. the pair --------------------------------------------------------- TWO COLUMNS ONLY FROM 1180px, not from 960 as this page did before. The right-hand panel is now a three-column table instead of a stacked
, and at 1024 a 62% column is 570px, which leaves the third column about 260px and turns half the cells into four-line paragraphs. At 1180 the container is at its full 1120 and the split is 407 / 665. Below 1180 both panels take the whole container, which is the better trade for a table: a wide table with short rows beats a narrow one with tall ones. 38/62 rather than 50/50. The finder is a fixed-height list of four rows; the table is seven rows of three columns and every pixel it gets comes off a wrapped line. */ .ng-v2 .ng-two__pair{ gap:22px; } @media (min-width:1180px){ .ng-v2 .ng-two__pair{ grid-template-columns:minmax(0,38fr) minmax(0,62fr); gap:24px; } } /* THE SUBJECT LINE TAKES ITS OWN ROW AT EVERY WIDTH, on both panels. ng-shared §13b only wraps .ng-out__bar below 767px; above that __meta is white-space:nowrap with an ellipsis, which assumes the panel is as wide as the container. From 1180 the finder is a 38% column — 407px, of which the tag and the ÖRNEK chip take about 165 — and "Örnek şube · Kadıköy, İstanbul" would be one character from truncating to "Örnek şube · Kadıköy, İst…", i.e. the panel would silently stop saying what it is a sample OF. That exact failure has now been found twice on this site (akaryakit at 390, saglik at 1440) and both times ng-page-check reported the page clean with the ellipsis in place: an ellipsis is not overflow, not small type and not a broken image, so nothing automated can see it. Applied to both panels rather than only the narrow one — a pair whose two chrome bars are different heights reads as two unrelated widgets. */ .ng-v2 .ng-two__out .ng-out__bar{ flex-wrap:wrap; gap:6px 10px; } .ng-v2 .ng-two__out .ng-out__tag{ flex:1 1 auto; } .ng-v2 .ng-two__out .ng-out__meta{ order:3; flex:1 0 100%; white-space:normal; overflow:visible; text-overflow:clip; } /* The caption for both panels. Centred under the pair, because it belongs to the pair and not to either one. 90ch, not §14's 86ch: this page's caption carries the extra sentence about the panel being drawn in Next Geo's palette rather than the client's, and at 86ch that sentence widowed its last word. */ .ng-v2 .ng-out-band__note{ margin:26px auto 0; max-width:90ch; text-align:center; } /* --- 2b. the store finder replica ----------------------------------------- Unchanged from the pre-variance page, and this is the half of the need the visitor came for, so it stays FIRST. The honest rendering of "customized map interface" is the interface. What a locator actually is, stripped of the basemap: a query, the filter criteria the client's own copy names (şehir, hizmet tipi, çalışma saati), and a nearest-first list of points with distance and open/closed state. NO BASEMAP TILE, deliberately. A drawn map would be either a picture of somebody else's cartography or an abstract decoration, and the page this replaces already tried the second thing with a hotlinked stock JPEG. The list IS the answer to "which one is nearest"; and we cannot show a map in the client's own brand colours anyway. EVERY NODE IS A SPAN. No , no
plus means a screen reader announces which column it is reading — which is the argument for a table over another key/value stack. THE FIELD IS THE ROW'S SUBJECT, so it is the ; the sample value and the behaviour are . No .is-num anywhere: the coordinate is an identifier, not a quantity, and right-aligning it would imply it is comparable with the row above. .is-top IS ON THE COORDINATE ROW, and the tfoot says why. It is the one field every other row depends on. Accent at 16px is 5.64:1 on white, the correct tier for text under 24px — --ng-accent-display would fail AA here. PERCENTAGE WIDTHS, not px: the panel is 665px at 1440, the full 1072 at 1024 and 312 inside the panel at 390, and one set of proportions holds at all three. Sized so nothing needs .ng-dtable__wrap's scrollbar — PATTERNS is explicit that a table which only fits by scrolling has hidden a column from every phone. The longest unbreakable words are "etiketleri" (~72px at 16px) and "hesaplar" (~62px at 15px), so the 26/28 split leaves both a whole line at 390. Two column strings were SHORTENED rather than tracking or type being loosened to fit, which is the lesson akaryakit's 390 header recorded. */ .ng-v2 .ng-two__t tr > :nth-child(1){ width:26%; } .ng-v2 .ng-two__t tr > :nth-child(2){ width:28%; } .ng-v2 .ng-two__t tbody tr.is-top th{ color:var(--ng-accent); } /* The wrap div is a flex child of .ng-out__body (column flex). Without min-width:0 a flex item's automatic minimum size is its content, so a long cell would push the panel wider instead of wrapping — the same trap as the grid `minmax(0,1fr)` idiom used everywhere else in this file. */ .ng-v2 .ng-two__out .ng-dtable__wrap{ min-width:0; } /* --- 2d. the five capabilities, as a LEDGER ------------------------------- WAS a 3+2 grid of raised cards. ARCHETYPES.md names the card grid as the shape this whole pass exists to break up, and on this page it had a second problem: with two artefact panels above it, five more white boxes made the band one undifferentiated stack of surfaces. Now ruled rows, numbered 01 to 05 across BOTH groups — which is what makes the masthead's 5 checkable rather than merely asserted. THE TWO GROUPS KEEP THEIR SUB-HEADS. The alternative was one list of five with a GÖRÜNEN YÜZ / ARKADAKİ KAYIT tag per row, and it was rejected for the reason the first leaf recorded: a tag on a row reads as a property OF that row, when the thing being expressed is a grouping ACROSS rows. Two h3s say it once each. THE ROWS ARE NOT LINKS. Only two of the five capabilities have a Next Geo service behind them. Linking all five means inventing three destinations; linking two of five puts identical-looking rows in one list where some are clickable and some are not. The two real destinations are chips under the note, where a reader can see what they are before deciding. */ .ng-v2 .ng-caps__eyebrow{ margin:46px 0 0; } .ng-v2 .ng-caps__group{ margin-top:22px; } .ng-v2 .ng-caps__group + .ng-caps__group{ margin-top:34px; padding-top:30px; border-top:1px solid var(--ng-hairline); } /* (0,3,0) via the doubled class, per ng-shared.css §11 — a page-level heading class needs the same defence or the theme's `body .content-wrapper h3:not(:first-child){margin-top:50px}` at (0,2,2) turns the authored 0 into a 50px hole above the second group's title. 22px sits deliberately between the 44px section title and the 17px row title: a sub-head inside a section, not a section of its own. */ .ng-v2 .ng-caps__name.ng-caps__name{ margin:0 0 6px; font-size:22px; line-height:1.25; letter-spacing:-0.012em; color:var(--ng-ink); } .ng-v2 .ng-caps__list{ list-style:none; margin:0; padding:0; } .ng-v2 .ng-caps__row{ display:grid; grid-template-columns:auto minmax(0,1fr); align-items:start; gap:12px 16px; padding:18px 0; border-top:1px solid var(--ng-hairline); } .ng-v2 .ng-caps__head{ display:block; min-width:0; } /* 11px at .1em (ratio .10) clears ng-page-check's measured 0.08 threshold for the tracked-label exception. Accent, because the ordinal is what ties this list back to the 184px numeral at the top of the page. */ .ng-v2 .ng-caps__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); font-variant-numeric:tabular-nums; } /* Doubled class again: this is an h4 and it is not its parent's first child, so the theme's 50px heading margin matches it. */ .ng-v2 .ng-caps__title.ng-caps__title{ margin:5px 0 0; font-family:var(--ng-font-display); font-weight:600; font-size:17px; line-height:1.32; letter-spacing:-0.01em; color:var(--ng-ink); } /* Below 900 the body drops to its own row under the icon and the title, which is why it spans both columns there. */ .ng-v2 .ng-caps__body{ grid-column:1 / -1; margin:0; font-size:15px; line-height:1.62; color:var(--ng-muted); /* 5.42:1 on the mist band */ } /* THIS BLOCK MUST STAY BELOW THE BASE .ng-caps__body RULE. A media query adds no specificity, so with the wide rule written first the (0,2,0) `grid-column:1/-1` below it won at every width and the third column never happened — the ledger rendered as ordinal-plus-title with the body spanning the full 1120px container underneath, i.e. a ~150-character measure. It passed ng-page-check at all four widths (a long line is not overflow, small type or a broken image) and was caught in the 1440 screenshot. Same class of bug as the .elementor-row trap: valid CSS, wrong cascade. Three columns, and the body gets everything the first two do not want. 25ch on the title column: the longest string is the English "Map Interface Suitable for Corporate Design" at 43 characters, which takes two lines at 25ch and four at 14ch. align-items:center reads as a ledger; start reads as a stack of headed paragraphs. */ @media (min-width:900px){ .ng-v2 .ng-caps__row{ grid-template-columns:auto minmax(0,25ch) minmax(0,1fr); align-items:center; column-gap:26px; } .ng-v2 .ng-caps__body{ grid-column:auto; } } /* The attribution note. It is the evidence for "the hub and this page say the same thing" plus the GeoView-vs-Digital-Map-Services distinction, so it is a sentence at the reading floor, not a tracked micro-label. */ .ng-v2 .ng-caps__note{ margin-top:30px; max-width:88ch; } /* rendered as WEIGHT, not as italic. Only Inter and Manrope at 500/600 are loaded (see HANDOFF: JetBrains Mono was removed entirely and no italic face was ever added), so a real would be synthesised as a sheared oblique — noticeably worse than the upright at this size. The emphasis is semantic and stays in the markup; only its rendering is reassigned. */ .ng-v2 .ng-caps__note em{ font-style:normal; font-weight:600; color:var(--ng-ink); } .ng-v2 .ng-caps__links{ margin-top:18px; } /* ========================================================================== 3. SECTION 30 — ROLLOUT, USE CASES AND THE CLOSE. Ground. Three blocks under one h2, because the assignment is three sections and all three of these were already on the page. They are one chapter: how it gets built, who it is for, what happens next. ========================================================================== */ /* --- 3a. the four-step ladder --------------------------------------------- The ladder itself is ng-shared §13c. Only the column count, the step-name size at the widest breakpoint and the trailing chips are here. ng-shared's .ng-steps is 1 / 3 columns, sized for the three-step ladder the first leaf needed. THIS PROCESS HAS FOUR STEPS and 3-up would leave one orphan on a second row, which reads as a step that did not fit rather than as step four. 2-up from 620 and 4-up from 1180. 4-up starts at 1180 rather than 1024 on purpose: at 1024 the container is 976px of content, so four columns are 226px each and the longest Turkish step name — "Yayına Alma & Sürekli Güncelleme Desteği" — takes four lines while its neighbours take one. At 1180 the container is at its full 1120 and the columns are 250px. Between the two the ladder is a tidy 2x2. */ @media (min-width:620px){ .ng-v2 .ng-how__steps{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:26px 28px; } } @media (min-width:1180px){ .ng-v2 .ng-how__steps{ grid-template-columns:repeat(4,minmax(0,1fr)); gap:24px; } /* (0,3,0) via the doubled class for the theme's h3 margin rule. 18px, one step down from ng-shared's 19px, so a four-line title becomes three at 250px. */ .ng-v2 .ng-how__steps .ng-steps__name.ng-steps__name{ font-size:18px; } } .ng-v2 .ng-how__note{ margin-top:34px; max-width:84ch; } /* The two lateral destinations as chips rather than as links inside the note above them. A link buried mid-sentence measured 282x42 as a tap target on the sectors hub and had to be lifted out; this page does not repeat it. Neither chip appears anywhere else on the page. */ .ng-v2 .ng-how__links{ margin-top:18px; } /* --- 3b. who it is for ---------------------------------------------------- Was its own sunken section with an h2. It is now a block inside section 30, introduced by an eyebrow and an h3, separated from the ladder by a rule rather than by a change of band — which is what keeps the page at three sections without dropping a word of it. A ruled ledger, not a card grid, and it already was one before this pass: three parts per line — the group, the clause, the destination — in three columns that scan vertically. THE ROW IS NOT THE LINK, unlike .ng-card--link in a hub grid. Two of the five rows have two destinations and one has none, so a whole-row anchor is not available; and the pill is what actually says where you would land. The pill inherits ng-mobile §7's 44px minimum at every width up to and including 1024. */ .ng-v2 .ng-uses{ margin-top:52px; padding-top:40px; border-top:1px solid var(--ng-hairline); } .ng-v2 .ng-uses__eyebrow{ margin:0; } /* Doubled class, per §11: an h3 that is not its parent's first child. Sized between the section h2 and the .ng-caps__name sub-heads in section 20 — this one opens a block of five rows, not a group of three. */ .ng-v2 .ng-uses__name.ng-uses__name{ margin:14px 0 0; font-size:clamp(1.4rem, 2.8vw, 1.85rem); line-height:1.2; letter-spacing:-0.018em; color:var(--ng-ink); max-width:26ch; } .ng-v2 .ng-uses__lede{ margin:14px 0 0; font-size:17px; line-height:1.6; color:var(--ng-muted); /* 6.01:1 on the ground */ max-width:64ch; } .ng-v2 .ng-who{ list-style:none; margin:28px 0 0; padding:0; } .ng-v2 .ng-who__row{ display:grid; grid-template-columns:minmax(0,1fr); gap:8px; padding:18px 0; border-top:1px solid var(--ng-hairline); } @media (min-width:900px){ .ng-v2 .ng-who__row{ grid-template-columns:minmax(0,25ch) minmax(0,1fr) auto; align-items:center; gap:28px; padding:20px 0; } } .ng-v2 .ng-who__group{ font-family:var(--ng-font-display); font-weight:600; font-size:17px; line-height:1.35; color:var(--ng-ink); } .ng-v2 .ng-who__why{ font-size:15px; line-height:1.6; color:var(--ng-muted); } .ng-v2 .ng-who__to{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; } @media (min-width:900px){ .ng-v2 .ng-who__to{ justify-content:flex-end; } } /* The franchise row's non-destination. It has to read as "there is no page for this", not as a disabled button, so it is plain muted text at the reading floor with no pill chrome at all — a greyed-out pill would look broken. */ .ng-v2 .ng-who__none{ font-size:14px; line-height:1.4; color:var(--ng-muted); } .ng-v2 .ng-uses__note{ margin-top:26px; max-width:88ch; } /* --- 3c. the close, without an indigo band -------------------------------- dark: NONE-MIST. Every other leaf on this site ends on the indigo slab (.ng-section--dark.is-dark), and 76 of 76 pages doing that is half of what the owner was complaining about. This page ends on the GROUND, and the call to action is a mist rail inside the last section: the SUNKEN role holding two white chrome buttons, which is the same surface logic as .ng-aside and .ng-need at the top of the page. Copied from pages/akaryakit.css §4, which built it for the same reason (dark: MIDDLE). PATTERNS.md records that three leaves have now written a .ng-close__rail and NOT the same one — saglik's inverts to a raised white panel because its only mist band is the last section — so it is deliberately still not promoted. Mine is akaryakit's, unchanged, because like akaryakit this page's close sits on ground. NOTHING WAS DROPPED IN THE MOVE: the eyebrow, the title, the client's own lede, both destinations and the contact line are all here. Only the band behind them changed. */ .ng-v2 .ng-close__rail{ margin-top:52px; padding:26px 22px; background:var(--ng-surface-sunken); border:1px solid var(--ng-hairline); border-radius:var(--ng-radius); 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 50px margin-top. This h2 is NOT the first child of its block — the eyebrow is — so `h2:not(:first-child)` matches 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:24ch; text-wrap:balance; } .ng-v2 .ng-close__lede{ margin:14px 0 0; font-size:17px; line-height:1.6; color:var(--ng-muted); /* 5.42:1 on mist */ max-width:56ch; } .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: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); } /* ========================================================================== 4. RESPONSIVE ng-mobile.css §7 carries every 44px hit area (crumbs, buttons, pills, tel) at 767, at 768–1023 and at exactly 1024. Everything below is this page's own type and rhythm. The finder, the table and the record are static DOM — no ,