/* ========================================================================== NEXT GEO — page stylesheet for the COMPANY-STORY PAIR TR 2324 /biz-kimiz/ EN 25523 /en/who-we-are/ One authored sheet for both; ng-page-apply.php --css-from copies it to who-we-are.css so the pair cannot drift. Loads last: ng-foundation → ng-components → ng-mobile → ng-shared → THIS FILE so a rule here at equal specificity beats all four. ng-shared.css owns everything not specific to this page — check there before adding anything, and never edit it: other agents are converting pages at the same time. --------------------------------------------------------------------------- REBUILT 2026-08-26. WHAT THE OWNER SAID, VERBATIM "this page is wrong, until MİSYON, VİZYON, DEĞERLER section, everything is aligned to the left. there is no right section and I don't actually want one. […] I think we need to revise them and make them unique each, it feels like repeating itself and also looks boring and wrong." There were two separate faults in that one sentence and only one of them had been fixed. FAULT 1 — the plate. .ng-banner--hero was wired inside .ng-masthead__copy, so a 2240px raster rendered at 58% of the container. Fixed globally in ng-shared.css (the rule after §17c-i) by making the plate and the breadcrumb direct children of __inner and spanning both tracks. Not this file's problem and not redone here. FAULT 2 — the copy column, which is what this file now answers. The KÜNYE aside was deleted on the owner's instruction (deck 2, slide 8), and after it went the eyebrow, the h1, the lede and the buttons were STILL rendering in the first of two grid tracks with 42% of empty container beside them. That is "everything is aligned to the left … there is no right section", exactly. THE COMMENT THAT CAUSED IT, CORRECTED. The version of this file that shipped with the aside deletion said: "The override is DELETED rather than set to 1fr: .ng-masthead__inner is single-column by default, and a rule that restates a default is the specificity inflation this project has already paid for once." THAT IS FACTUALLY WRONG, and the wrongness is the whole bug. ng-shared.css §4 sets @media (min-width:960px){ .ng-v2 .ng-masthead__inner{ grid-template-columns:minmax(0,58fr) minmax(0,42fr); }} so __inner is single-column BELOW 960px and TWO columns above it. Deleting the 56/44 override did not return the masthead to one column; it returned it to 58/42 with nothing in the second track. The reasoning was sound and the premise was false, which is the expensive kind of comment. THE FIX IS THE ARCHETYPE, NOT A WIDTH OVERRIDE. The masthead now carries .ng-masthead--stack (ng-shared.css §15a, ARCHETYPES.md "B · STACK"), whose single-column rule is (0,3,0) and therefore beats §4's (0,2,0) rule inside §4's own media query. It also lifts the 18ch ceiling off the headline, sets it one step larger and widens the lede to 58ch. Nothing about the column count is restated in this file: --stack already says it, and says it in the one place every other page can read. --------------------------------------------------------------------------- THE PAGE, SECTION BY SECTION, AND WHY EACH SHAPE Three corporate pages — /biz-kimiz/, /ekibimiz/, /kariyer/ — were all running masthead-with-aside → dark index band → card grid. This page now runs: 10 masthead B-STACK. Full-container headline, no aside anywhere, no proof strip, two links out, first content section high. 20 misyon/vizyon THE ALTERNATING STATEMENT SPREAD. Two full-width rows; margin label + one sentence at display size; the second row swaps the columns. THIS IS THE SHAPE UNIQUE TO THIS PAGE — /ekibimiz/ owns the directory index panel, /kariyer/ owns the numbered posting ledger, and nothing in /cozumler/ or /urunler/ sets a single sentence at 31px across the container with its label in the margin. 30 değerler ONE WIDE RAISED PANEL, three columns divided by vertical hairlines. Not a card grid; a card grid is the shape all three corporate pages were repeating. 40 CTA the page's single indigo band. The owner named the alternating left/right band on /cozumler/optimizasyon/ as the thing he liked. That primitive (.ng-figband--split / --flip) needs pictures, and this page pair has none: there is no biz-kimiz directory under /wp-content/uploads/ng-banner/ and no corporate set under ng-assets/img/, only the masthead hero. Section 20 is therefore the same rhythm built out of type — same flip, same left/right alternation, no invented artefact and no stock photograph. --------------------------------------------------------------------------- FACTS. Every sentence of the mission, the vision and the three values is the client's own, unchanged. Beyond those, the page states exactly three things: - the office city and the telephone number in the closing band, both published on /bize-ulasin/ (CLAIMS.md C11 for the coordinate behind it); - "on dört sektör sayfası" / "fourteen sector pages", CLAIMS.md C4 — fourteen cards on the sectors hub and fourteen child pages; - five internal destinations, all four hubs plus the team page, every ID checked in the database. AND WHAT IT DELIBERATELY DOES NOT STATE. The masthead's old proof strip read 7 ÜRÜN over a footnote that said "dokuz ürün sayfası" — the numeral and its own note disagreed. Counted from the live site today the products hub carries NINE ÜRÜN-tagged cards and twelve cards in total; CLAIMS.md C3 records eight; both homepage credential blocks print eight. Three published values for one count, and two for the solutions count (the /cozumler/ headline says "altı çözüm", its own proof strip says 7). The brief's rule is that a claim in doubt is dropped rather than softened, so no product or solution count appears on either page. There is no founding year either: CLAIMS.md lists the founding date under "claims deliberately NOT made", and "Kuruluş 2020" was the deleted künye's one unverified field. NOTHING DELETED ON THE OWNER'S INSTRUCTION HAS BEEN REINTRODUCED in another shape: no künye panel (deck 2 slide 8), no Geoawesome band (slide 9), no NE YAPIYORUZ source manifest and no MÜŞTERİLERİMİZ logo grid (slide 11). The §1–§2 and §4–§5 rules that styled them are gone from this file with them. ========================================================================== */ /* ========================================================================== 1. MASTHEAD Almost nothing is needed here, and that is the point of using --stack rather than authoring a column override: the archetype supplies the single column, the headline scale and the 58ch lede, and this page adds no geometry of its own to the masthead at all. ========================================================================== */ /* The one exception. .ng-masthead--stack ends on the actions instead of on a proof strip, and .ng-actions carries margin-top:28px, which is the right gap under a paragraph inside a column but reads tight under a 68px headline's lede at full container width. Six points, optical, measured at 1440. */ .ng-v2 .ng-bkmh .ng-masthead__copy > .ng-actions{ margin-top:34px; } /* ========================================================================== 2. THE ALTERNATING STATEMENT SPREAD — .ng-beyan The page's signature. Two rows, each: a hairline, a narrow margin column holding a tracked label and a one-line gloss, and a wide column holding one sentence set at display size. The second row swaps the two columns. ========================================================================== */ /* 26/74 rather than 50/50 or 33/67. The label column only ever holds two short lines — "MİSYONUMUZ" plus a three-word gloss — so anything wider is padding, and the sentence is the whole point of the row. At 1120 the flip therefore moves the block of type by ~26% of the container, which is about 280px: far enough to read as an alternation rather than as an indent that got lost. Stacked below 960, label first, which is the correct reading order — the label is what tells you which of the two statements is coming. */ .ng-v2 .ng-beyan__band{ display:grid; grid-template-columns:minmax(0,1fr); gap:14px; margin-top:34px; padding-top:28px; border-top:1px solid var(--ng-hairline); } @media (min-width:960px){ .ng-v2 .ng-beyan__band{ grid-template-columns:minmax(0,26fr) minmax(0,74fr); column-gap:56px; align-items:start; } /* THE FLIP IS EXPLICIT PLACEMENT, NOT `order`. Both children are given a column and the same row, so the DOM order is untouched and the label is still read first by anything that follows source order — a screen reader, a reader-mode extension, a print stylesheet. `order` would have moved the label after the sentence for a keyboard user while leaving it before it for everybody else. Same judgement ng-shared.css §17a made when it swapped the figband columns rather than setting order:-1 on the figure alone. */ .ng-v2 .ng-beyan__band--flip{ grid-template-columns:minmax(0,74fr) minmax(0,26fr); } .ng-v2 .ng-beyan__band--flip > .ng-beyan__mark{ grid-column:2; grid-row:1; text-align:end; } .ng-v2 .ng-beyan__band--flip > .ng-beyan__stmt{ grid-column:1; grid-row:1; } /* Optical, not metric. Manrope at 600 carries about 7px of leading above its cap at line-height 1.32, so a label whose own line-height is 1.3 sits visibly high against the first line of the statement beside it. */ .ng-v2 .ng-beyan__mark{ padding-top:7px; } } /* 13px at .14em is over the 0.08em tracked-label exception in the contract, so it is allowed under the 14px reading floor: this is glanced at as a field name, not read as prose. text-transform:none because the strings are authored pre-uppercased — an uppercase mapping turns "MİSYONUMUZ" into "MISYONUMUZ". --ng-accent is 5.45:1 on the ground, the correct tier for accent text below 24px; --ng-accent-display would fail here. */ .ng-v2 .ng-beyan__label{ margin:0; font-family:var(--ng-font-label); font-weight:600; font-size:13px; line-height:1.3; letter-spacing:.14em; text-transform:none; color:var(--ng-accent); } /* A sentence fragment, not a label, so it takes the reading floor untracked. */ .ng-v2 .ng-beyan__gloss{ margin:10px 0 0; font-size:15px; line-height:1.5; color:var(--ng-muted); /* 6.01:1 on ground */ } /* THE STATEMENT. Display face, one step under .ng-section-head__title's 44px so the section heading still outranks it, and well over the .ng-lede 18px that these two sentences used to be set in. They are the two sentences the company signs its name to and they were reading as body copy in a two-column panel. NO max-width. The whole argument of the shape is that the sentence runs its track; a ch ceiling inside a 74% track would reintroduce the ragged empty right edge this rebuild exists to remove. The track itself is the measure — ~730px at 1120, which is about 46 characters at this size, inside a comfortable line length. Ink, not accent-display: the clamp floor is 1.3rem = 20.8px, under the 24px threshold --ng-accent-display requires, so the token is not legal here at every width. Nothing in this block carries .ng-hl for the same reason. */ .ng-v2 .ng-beyan__stmt{ margin:0; font-family:var(--ng-font-display); font-weight:600; font-size:clamp(1.3rem, 2.6vw, 1.95rem); line-height:1.32; letter-spacing:-0.018em; color:var(--ng-ink); /* 14.46:1 on ground */ } .ng-v2 .ng-beyan__note{ margin-top:36px; } /* ========================================================================== 3. THE VALUES REGISTER — .ng-deger One raised panel on the mist band, divided into three columns by two vertical hairlines. ========================================================================== */ /* WHITE PANEL ON A MIST BAND is the two-surface rule stated exactly: sunken holds white chrome, raised holds the text. It is also the page's only raised surface, so it is the one thing here that reads as an object rather than as type on a ground — the second place the eye lands after the masthead. */ .ng-v2 .ng-deger__panel{ padding:30px 32px; background:var(--ng-surface); border:1px solid var(--ng-hairline); border-radius:var(--ng-radius); box-shadow:var(--ng-shadow-card); } /* THREE COLUMNS, TWO RULES, NO CARDS. Three .ng-card in a .ng-grid--3 is what was here before, and it is also what /ekibimiz/ and /kariyer/ close on; that repetition is half of what the owner was looking at. A card gutter says "or", a divider says "and", and these three values are one statement of method with three parts rather than three separate items. The geometry is deliberately the same as ng-shared.css §15c's .ng-facts — vertical rules at desktop, horizontal at phone width — because a reader has already met that strip elsewhere on the site. What is inverted is the emphasis: .ng-facts sets the VALUE in display type and the key as a small label, and here the NAME is the display type and the sentence is the small text. That inversion, plus the fact that a
may not contain heading content and these three names have to stay h3s in the outline, is why this is authored rather than borrowed. 760 rather than 960 for the column break: three names at 22px and three sentences at 15px still hold a ~200px column at 768, and stacking them there would leave a 700px panel with 500px of one-column text in it. */ .ng-v2 .ng-deger__set{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:minmax(0,1fr); gap:0; } @media (min-width:760px){ .ng-v2 .ng-deger__set{ grid-template-columns:repeat(3,minmax(0,1fr)); } } .ng-v2 .ng-deger__item{ min-width:0; margin-top:22px; padding-top:22px; border-top:1px solid var(--ng-hairline); } .ng-v2 .ng-deger__item:first-child{ margin-top:0; padding-top:0; border-top:0; } @media (min-width:760px){ /* The rules turn vertical. Borders on the cells rather than a gap fill, so three columns cannot leave a dangling rule the way a background stripe would if the count ever changed. */ .ng-v2 .ng-deger__item{ margin-top:0; padding:0 26px; border-top:0; border-left:1px solid var(--ng-hairline); } /* After the block above, so the first cell loses both its rule and its inset — otherwise the first name sits 26px in from the panel's own padding and the three columns read as off-centre. */ .ng-v2 .ng-deger__item:first-child{ padding-left:0; border-left:0; } .ng-v2 .ng-deger__item:last-child{ padding-right:0; } } /* (0,3,0) doubled — see ng-shared.css §11. The theme's `body .content-wrapper h3:not(:first-child){margin-top:…}` family loads after us; without the doubled class this heading renders the theme's gap where 0 is authored. Every page-level heading class on this site is written this way. */ .ng-v2 .ng-deger__name.ng-deger__name{ margin:0; font-size:22px; line-height:1.25; letter-spacing:-0.014em; color:var(--ng-ink); /* 14.95:1 on white */ } .ng-v2 .ng-deger__body{ margin:12px 0 0; font-size:15px; line-height:1.62; color:var(--ng-muted); /* 6.21:1 on white */ } .ng-v2 .ng-deger__note{ margin-top:28px; } /* .ng-actions already carries margin-top:28px; the note above it is a sentence about the same subject, so the chip row sits closer to it than to the panel. */ .ng-v2 .ng-deger__links{ margin-top:18px; } /* ========================================================================== 4. MOBILE ng-shared.css §12 already sets the 16px reading floor on .ng-lede and .ng-note and the 44px minimums on .ng-crumbs__link, .ng-btn and .ng-btn--pill, and §12 keeps .ng-actions--chips a row where a plain .ng-actions goes full-bleed and stacks. Only this page's own classes are here. ========================================================================== */ @media (max-width:767px){ /* The bands stack, so the hairline between them is doing all the separating work and needs a little more air around it than it does at 1440, where the column offset already says "new row". */ .ng-v2 .ng-beyan__band{ margin-top:28px; padding-top:24px; } /* Reading floor: these are sentences, not labels. */ .ng-v2 .ng-beyan__gloss{ font-size:16px; } .ng-v2 .ng-deger__body{ font-size:16px; line-height:1.6; } .ng-v2 .ng-beyan__note{ margin-top:28px; } .ng-v2 .ng-deger__panel{ padding:22px 18px; } .ng-v2 .ng-deger__name.ng-deger__name{ font-size:20px; } } /* ========================================================================== 5. REDUCED MOTION ng-shared.css §10 already flattens .ng-anim and .ng-arrow under a reduce preference. This page adds no transform, no transition and no filter of its own — the alternating spread is a static layout, not an animation — so there is nothing to switch off here. The section is kept as a note rather than deleted, so the next person does not have to re-derive that. ========================================================================== */