/* ========================================================================== /urunler/next-geo-tailor/ (TR 23300) + /en/products/next-geo-tailor/ (EN 25695). ONE stylesheet for the pair — the two languages share this file because the slug is a proper noun and both posts carry it. VARIANCE PASS, 2026-08-17. Assignment from variance-plan.json, fixed and not chosen: opening C-FIGURE · dark CLOSE · sections 5. The page was the tranche-2 leaf pattern in six sections and opened exactly like every other leaf on the site — h1 left, mist plate right, proof strip, card grid. It was screenshotted at 1440 beside /urunler/lokasyon-analizi-mobile/ and above the fold the two are the same page. That is the defect this pass exists to fix. THE SILHOUETTE NOW: 10 GROUND C-FIGURE masthead: a ruled 4-column table of three sample decisions ABOVE the h1, full container width 20 MIST the five feature headings as a definition ledger, two groups 30 GROUND the four-step ladder + the data schema on a raised panel 40 MIST the four user profiles as ruled rows 50 DARK the closing CTA — the assignment's CLOSE Tonal order GROUND · MIST · GROUND · MIST · DARK, five sections, one h1. THE DOMINANT CONTENT SHAPE IS THE LEDGER, and it was chosen from what the subject actually is. Every other product leaf can show its output, because its product has one. Tailor's output is a different product every time, so what it genuinely produces — the same way, every time — is a document: the map of which location decisions an organisation takes, who takes them and what they run on today, and the schema of which internal record meets which Next Geo layer. Both are tables. The page is therefore made of ruled rows rather than of card grids, which is what it was and what ARCHETYPES.md names as the site-wide default. THIS ALSO SATISFIES THE OWNER'S CONSTRAINT OF TODAY. Two hand-drawn product frames were deleted from the homepage this morning because they did not represent the real product, and honest labelling did not save them. A leaf for a bespoke product is the single most tempting page on this site to draw an interface on. There is no interface here: there is a with a is off-screen for sighted readers. They are aria-hidden because the thead is still in the accessibility tree and still associated by scope, so a screen reader would otherwise hear the column name twice per cell. */ .ng-v2 .ng-req__l{ display:none; } /* --- 2a. under 900px the table stops being a table ------------------------- Four columns of Turkish prose need about 900px before the narrowest of them stops breaking mid-word. Below that the rows become blocks: owner, decision, then the two states one under the other with the same hairline/accent pair the desktop table uses on its last column. PATTERNS.md is explicit that a table which only fits by scrolling has hidden a column from every phone, so .ng-dtable__wrap stays as the safety valve for an unbreakable word and is not the layout. The is visually hidden rather than display:none — display:none takes it out of the accessibility tree and the `scope` association with it. */ @media (max-width:899px){ .ng-v2 .ng-req thead{ position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; } .ng-v2 .ng-req, .ng-v2 .ng-req tbody, .ng-v2 .ng-req tfoot, .ng-v2 .ng-req tr, .ng-v2 .ng-req th, .ng-v2 .ng-req td{ display:block; width:auto; } /* THE
, which no reader can mistake for a screenshot. The .ng-out panel with its filled chrome bar — which is what the two sample figures used to sit in — was retired from this page for the same reason. NOTE ON SHARED PRIMITIVES. Both tables are ng-shared.css §15b (.ng-dtable), the ladder is §13c (.ng-steps), the pills, chips, notes, crumbs, proof strip and CTA are unchanged. What is new here is the C-FIGURE masthead modifier (see §1), the requirement table's own columns and its stacked form (§2), the feature ledger (§3) and the data-schema block (§4). ⚠ .ng-masthead--fig IS NOW ITS THIRD PRIVATE COPY. pages/bankacilik.css and pages/perakende.css each declare the same modifier, and perakende's own comment says the third one is the signal to promote the four shared declarations into ng-shared.css §15. That was not done in this pass on purpose: another agent is reading ng-shared.css right now and the brief for this run forbids editing it. Reported in `remaining` instead — the promotion is a one-file lift plus a re-apply of three pairs and belongs in its own pass, not in a leaf's. Tokens only, no !important, no literal colours. Every page-level heading class carries the doubled-class idiom so it beats the theme's `h?:not(:first-child){margin-top:50px}` at (0,2,2) — PATTERNS.md §11. ========================================================================== */ /* ========================================================================== 1. THE C-FIGURE MASTHEAD ========================================================================== There is no .ng-masthead__inner on this page at all: the container holds a linear stack, because C-FIGURE's first screen is an artefact with words under it rather than two columns of anything. ng-shared §4's two-column rule therefore never applies and does not need cancelling. NOTHING BELOW REINTRODUCES THE PLATE. ARCHETYPES.md makes that point about B-STACK and it holds here: a mist "summary card" further down the page is the aside with a different name. The aside's contents went somewhere real — the hub's need line is .ng-tfig__ask, and its two halves are the group intros in section 20, where they introduce the groups they describe. THE HEADLINE COMES DOWN, IT DOES NOT GO UP. B-STACK raises its h1 because the headline IS the first screen; here the table is, and ARCHETYPES says the h1 is "subordinate beneath it… at normal size". 2.9rem matches the first C-FIGURE page built (bankacilik) rather than inventing a third value — a shared archetype that renders at three different sizes on three pages is not a shared archetype. The floor stays at 1.95rem = 31.2px, over the 24px line that makes .ng-hl (--ng-accent-display) legal. 22ch, not §4's 18ch. The 18ch ceiling exists so a split headline cannot run under the aside; there is no aside. At 22ch this page's headline breaks after the comma in both languages, which is where it wants to break. */ .ng-v2 .ng-masthead--fig .ng-tfig.ng-tfig{ margin:18px 0 0; } /* The caption row is the figure's chrome: what this is, and that it is a sample. It sits ABOVE the table rather than in a filled bar — see the header note about product-UI replicas. */ .ng-v2 .ng-masthead--fig .ng-tfig__cap{ display:flex; align-items:center; flex-wrap:wrap; gap:10px 14px; margin:0 0 16px; } .ng-v2 .ng-masthead--fig .ng-tfig__kick{ margin:0; } /* The illustrative caption belongs to the figure, so it sits tight under it and above the rule that separates artefact from page. 96ch because it names six data sources; at 70ch (the .ng-note default) it broke into seven short lines. */ .ng-v2 .ng-masthead--fig .ng-tfig__note{ margin:16px 0 0; max-width:96ch; } /* The hairline is the composition in one declaration: everything above it is the artefact, everything below it is the page. Without it the h1 read as a caption belonging to the table. */ .ng-v2 .ng-masthead--fig .ng-tfig__copy{ margin-top:34px; padding-top:30px; border-top:1px solid var(--ng-hairline); } .ng-v2 .ng-masthead--fig .ng-masthead__title.ng-masthead__title{ font-size:clamp(1.95rem, 4.2vw, 2.9rem); line-height:1.1; letter-spacing:-0.026em; max-width:22ch; } .ng-v2 .ng-masthead--fig .ng-masthead__lede{ max-width:62ch; } /* THE HUB'S NEED LINE, AND A THIRD DEVICE FOR IT ON PURPOSE. bankacilik quotes its hub with an accent-ruled line and perakende with a mist plate, and perakende's sheet records why: two pages quoting their hub with the identical device is the sameness this pass is undoing. This is a ruled BAND — two hairlines, no fill, no left rule — which is a third shape and costs two declarations. It also carries the "the need has two halves, and so does this page" sentence, which is the reading key for sections 20 and 30. A sentence, not a label: 15px, and 16px at mobile like every other sentence on the site. The tracked micro-label above it says whose need it is. */ .ng-v2 .ng-masthead--fig .ng-tfig__ask{ margin:22px 0 0; padding:14px 0; border-top:1px solid var(--ng-hairline); border-bottom:1px solid var(--ng-hairline); max-width:74ch; font-size:15px; line-height:1.6; color:var(--ng-muted); } .ng-v2 .ng-masthead--fig .ng-tfig__asklabel{ display:block; margin-bottom:7px; } /* ========================================================================== 2. THE REQUIREMENT MAP (.ng-req, on .ng-dtable) ========================================================================== ng-shared §15b supplies the semantics and the three theme defences — the (0,1,4) cell rule, the two (0,2,2) `table:not(...)` margin rules, and the `border:0` reset that stops an unreset cell drawing a navy box. Only the things that are properties of THIS content are here: which column is wide, what the owner cell and the after cell look like, and what the table becomes when four columns stop fitting. COLUMN WIDTHS ARE SET ON THE THEAD ROW ONLY, not with `tr > :nth-child(n)`. The tfoot is a single colspan=4 cell, and a width on it fights the table algorithm for no reason; the header row is what sizes a table. THE ACCENT RULE ON THE LAST COLUMN IS THE WHOLE VISUAL ARGUMENT. "BUGÜN" against "TAILOR'DA" is a two-state comparison; one 2px accent rule and an ink colour say it. Twelve arrow glyphs — one per cell pair — was the alternative and was rejected on the first leaf for the same reason. ⚠ THE CELL OVERRIDES ARE WRITTEN AS `.ng-req td.ng-req__to`, NOT `.ng-req__to`. ng-shared's `.ng-v2 .ng-dtable td` is (0,2,1) and it sets `border:0`, which includes border-left. A plain `.ng-v2 .ng-req__to` is (0,2,0) and LOSES on specificity no matter what order the sheets load in — this sheet loading later does not help. The element+class form is (0,3,1). VERTICAL-ALIGN GOES TO TOP. ng-shared centres cells, which is right for a ranked table of short place names and wrong here, where one cell is a four-word role and its neighbour is two lines of prose. ========================================================================== */ .ng-v2 .ng-req th, .ng-v2 .ng-req td{ vertical-align:top; } @media (min-width:900px){ .ng-v2 .ng-req thead th:nth-child(1){ width:15%; } .ng-v2 .ng-req thead th:nth-child(2){ width:23%; } .ng-v2 .ng-req thead th:nth-child(3){ width:29%; } .ng-v2 .ng-req thead th:nth-child(4){ width:33%; } } /* 11px at 0.1em — ratio .10, so ng-page-check exempts it by MEASUREMENT rather than by allowlist, exactly as ng-shared's .ng-out__tag does. It is an owner label glanced at beside a question, not something read as prose. */ .ng-v2 .ng-req td.ng-req__who{ 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: uppercase maps i->I and would print "YATIRIM EKIBI" for "YATIRIM EKİBİ" */ color:var(--ng-muted); padding-top:16px; /* optical: an 11px cap next to a 16px display line sits high without it */ } .ng-v2 .ng-req th.ng-req__q{ font-size:16px; line-height:1.3; } .ng-v2 .ng-req td.ng-req__to{ border-left:2px solid var(--ng-accent); padding-left:16px; color:var(--ng-ink); } /* The in-cell labels exist only for the stacked form below 900, where the HAS TO BE IN THIS LIST AND WAS NOT, WHICH IS WORTH RECORDING. A caption box left as `display:table-caption` under a table that is itself `display:block` is sized as if it still had a table to belong to: at 390 it shrank to a ~60px column and broke "BİR TAILOR PROJESİNİN İLK ÇIKTISI · ÖRNEK KURUM · 3 KARAR NOKTASI" across six lines. ng-page-check reported the page CLEAN at all four widths with that on it — no overflow, no dead air, no undersized type, because a six-line label is none of those things. Found in the 390 screenshot. */ .ng-v2 .ng-req caption{ display:block; width:auto; } .ng-v2 .ng-req tbody tr{ padding:16px 0; border-top:1px solid var(--ng-hairline); } .ng-v2 .ng-req tbody tr:first-child{ padding-top:0; border-top:0; } .ng-v2 .ng-req tbody th, .ng-v2 .ng-req tbody td{ padding:0; border-bottom:0; } .ng-v2 .ng-req td.ng-req__who{ padding-top:0; margin-bottom:5px; } .ng-v2 .ng-req th.ng-req__q{ font-size:17px; margin-bottom:11px; } .ng-v2 .ng-req td.ng-req__now{ padding-left:12px; border-left:2px solid var(--ng-hairline); } .ng-v2 .ng-req td.ng-req__to{ margin-top:8px; padding-left:12px; } .ng-v2 .ng-req tfoot td{ margin-top:16px; } .ng-v2 .ng-req__l{ display:block; margin-bottom:3px; font-family:var(--ng-font-label); font-weight:600; font-size:11px; line-height:1.3; letter-spacing:.1em; text-transform:none; color:var(--ng-muted); } .ng-v2 .ng-req td.ng-req__to .ng-req__l{ color:var(--ng-accent); } } /* ========================================================================== 3. THE FIVE FEATURES, AS A DEFINITION LEDGER (.ng-fx) ========================================================================== WAS FIVE RAISED CARDS IN A 3+2 GRID. ARCHETYPES.md names the card grid as the shape this pass exists to break, and a 3+2 of equal cards states nothing about how the five relate anyway. They are literally a term and its definition — the client's heading and the client's sentence — so they are a
: name in the display face on one side, sentence on the other, one hairline between rows. THE ICON CHIPS WENT WITH THE CARDS. Five 24px inline SVGs in an accent-wash chip are card furniture; in a two-column ledger they sit in the term column competing with the term. They were decorative and aria-hidden, so nothing a reader could read was lost. TWO GROUPS, WITH THE OLD ASIDE'S TWO BULLETS AS THEIR INTROS. Three of the five are about the process the product is shaped around and two are about the data it stands on. The alternative — one grid of five with a per-card tag marking the group — was rejected for the reason the first leaf recorded and the second repeated: a tag on a card reads as a property OF that card, when the thing being expressed is a grouping ACROSS cards. 32ch FOR THE TERM COLUMN AND 820px FOR THE SPLIT. The longest term here is "Next Geo veri kütüphanesi + kurum içi verilerin birleşik analizi" at 63 characters and its English twin is 68; at 26ch that one ran to four lines against a three-line definition and the row's optical baseline sat wrong. 820 rather than 960 because at 768 the container is 720px and a 32ch column still leaves the definition ~390px, which is a comfortable measure. ========================================================================== */ .ng-v2 .ng-feat__group + .ng-feat__group{ margin-top:34px; padding-top:30px; border-top:1px solid var(--ng-hairline); } /* (0,3,0) via the doubled class, per ng-shared §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 18px term: a sub-head inside a section, not a section of its own. */ .ng-v2 .ng-feat__name.ng-feat__name{ margin:0 0 10px; font-size:22px; line-height:1.25; letter-spacing:-0.012em; color:var(--ng-ink); } /* The group intro. This is the sentence the old masthead aside carried as a bullet, and it is a sentence, so it takes the reading size and not the tracked-label treatment. */ .ng-v2 .ng-feat__intro{ margin:0 0 22px; max-width:72ch; font-size:16px; line-height:1.6; color:var(--ng-muted); } .ng-v2 .ng-fx{ margin:0; } .ng-v2 .ng-fx__row{ display:grid; grid-template-columns:minmax(0,1fr); gap:8px; padding:18px 0; border-top:1px solid var(--ng-hairline); } .ng-v2 .ng-fx__row:first-child{ padding-top:0; border-top:0; } @media (min-width:820px){ .ng-v2 .ng-fx__row{ grid-template-columns:minmax(0,32ch) minmax(0,1fr); column-gap:40px; align-items:start; padding:20px 0; } } .ng-v2 .ng-fx__name{ font-family:var(--ng-font-display); font-weight:600; font-size:18px; line-height:1.3; letter-spacing:-0.01em; color:var(--ng-ink); } /* (0,3,0). A
carries a 40px inline-start margin from the UA sheet and the theme also styles dd; the doubled ancestor beats both without !important. */ .ng-v2 .ng-fx .ng-fx__body{ margin:0; font-size:15px; line-height:1.65; color:var(--ng-muted); /* 5.42:1 on the mist band */ } /* The attribution note: evidence that the hub and this page say the same words, plus the "Tailor is built on these products" claim. A sentence at the reading floor, not a tracked micro-label. */ .ng-v2 .ng-feat__note{ margin-top:30px; max-width:88ch; } .ng-v2 .ng-feat__links{ margin-top:18px; } /* ========================================================================== 4. THE FOUR-STEP PROCESS, AND THE DATA SCHEMA UNDER IT ========================================================================== The ladder itself is ng-shared §13c. Only the column count, the step-name size at the widest breakpoint, the pill spacing 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 leaves 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 for the reason the GeoView leaf measured: at 1024 the container is 976px of content, four columns are 226px each, and this page's longest Turkish step name — "İhtiyaç Analizi ve İş Süreci Haritalama" — takes five lines while "Veri Entegrasyonu" takes one. At 1180 the container is at its full 1120 and the columns are 250px. Between the two the ladder is a tidy 2x2. THE DATA SCHEMA IS HERE AND NOT IN A BAND OF ITS OWN, because the assignment is five sections and the page had six. It is step 03's output and it now sits under the ladder that names step 03; the requirement map is step 01's output and is the C-FIGURE opening. Neither artefact was dropped — they were moved next to the step that produces them, which is more use to a reader than a band of two panels halfway down. THE PANEL IS THE ONLY RAISED SURFACE ON THE PAGE. Everything else is ruled rows on ground or mist. One white card in a page of ledgers reads as "this is the artefact"; five of them read as a card grid, which is where this page started. 38/62 AT 960. The table is two columns of short field names and the prose beside it is two paragraphs; at 50/50 the table's own columns opened to ~250px each with 90px of air in the middle of every row. The narrower text column is also close to a 60ch measure, which is where the paragraph wants to be. ========================================================================== */ @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): the doubled class is still needed, because the theme's h3:not(:first-child) margin rule is (0,2,2). 18px, one step down from ng-shared's 19px, so the longest step name becomes three lines at 250px. */ .ng-v2 .ng-how__steps .ng-steps__name.ng-steps__name{ font-size:18px; } } .ng-v2 .ng-steps__pills{ margin-top:14px; } /* The masthead's ghost action jumps here. The theme header is sticky at up to 84px, so an anchor landing flush at the top puts the section title under it. */ @media (max-width:1364px){ .ng-v2 .ng-how{ scroll-margin-top:84px; } } .ng-v2 .ng-vs{ margin-top:44px; display:grid; grid-template-columns:minmax(0,1fr); gap:24px; } @media (min-width:960px){ .ng-v2 .ng-vs{ grid-template-columns:minmax(0,38fr) minmax(0,62fr); column-gap:48px; align-items:start; } } /* (0,4,0) — doubled class against the theme's (0,2,2) heading margin rule. */ .ng-v2 .ng-vs__name.ng-vs__name{ margin:10px 0 0; font-size:22px; line-height:1.25; letter-spacing:-0.012em; color:var(--ng-ink); } .ng-v2 .ng-vs__body{ margin:14px 0 0; max-width:60ch; font-size:15px; line-height:1.65; color:var(--ng-muted); } /* RAISED role: white + hairline + the shared card shadow. Doubled class because the theme styles
margins. */ .ng-v2 .ng-vs__panel.ng-vs__panel{ margin:0; padding:22px 24px 20px; background:var(--ng-surface); border:1px solid var(--ng-hairline); border-radius:var(--ng-radius); box-shadow:var(--ng-shadow-card); } .ng-v2 .ng-vs__cap{ display:flex; align-items:center; flex-wrap:wrap; gap:8px 12px; margin:0 0 14px; } .ng-v2 .ng-vs__kick{ margin:0; } /* 44% for the record column: "Operasyon kayıtları" and "Customer addresses" are the long ones and both fit on one line at that share of a 620px panel. */ .ng-v2 .ng-sch thead th:nth-child(1){ width:44%; } /* The connection line is not a fifth row: it says how all four joins are carried, so it sits under a rule with its own tracked key. */ .ng-v2 .ng-vs__wire{ margin:14px 0 0; padding-top:12px; border-top:1px solid var(--ng-hairline); font-size:14px; line-height:1.55; color:var(--ng-muted); } .ng-v2 .ng-vs__wk{ display:inline-block; margin-right:8px; 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); /* 4.87:1 on white at this weight */ } .ng-v2 .ng-vs__note{ margin-top:20px; max-width:88ch; } .ng-v2 .ng-how__note{ margin-top:30px; max-width:88ch; } /* 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. */ .ng-v2 .ng-how__links{ margin-top:18px; } /* ========================================================================== 5. WHO IT IS FOR ========================================================================== Ruled rows, and after the re-composition the page agrees with itself about that: the masthead is a ruled table, section 20 is a ruled ledger, this is ruled rows, and the one raised surface on the page is section 30's panel. Rules also let the three parts of each line — the profile, the clause, the destination — scan vertically as three columns. THE ROW IS NOT THE LINK, unlike .ng-card--link in a hub grid. The fourth row has no destination at all, so a whole-row anchor is not available; and the pill is what actually says where you would land. The pill inherits ng-shared's 44px minimum at every width up to and including 1024. THE PROFILE COLUMN IS 30ch, NOT GeoView's 25ch. These four profiles are whole sentences — "Kurumsal dashboard, performans izleme veya özel karar destek sistemi arayanlar" is 78 characters — where GeoView's were noun phrases of two or three words. At 25ch that one took five lines against a two-line clause and the row's optical baseline sat in the wrong place. ========================================================================== */ .ng-v2 .ng-who{ list-style:none; margin: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,30ch) 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); /* 5.42:1 on the mist band */ } .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 fourth 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); text-align:right; } .ng-v2 .ng-who-band__note{ margin-top:26px; max-width:88ch; } /* ========================================================================== 6. RESPONSIVE ng-shared carries the 44px hit areas (crumbs, buttons, pills) at 767, at 768–1023 and at exactly 1024, and the 16px reading floor at 767 for its own primitives. Everything below is this page's own type and rhythm. Nothing on this page is interactive outside those primitives — both tables and the ledger are static DOM with no and no