/* ========================================================================== /cozumler/optimizasyon/ + /en/solutions/optimization/ ONE SHEET, TWO PAGES. ng-page-apply.php copies this file to the English slug's filename at apply time, so nothing here may contain a Turkish string — no `content:"…"`, no language-specific selector. That is why the mobile comparison table below keeps its column labels in the MARKUP. Loaded after ng-shared.css, so anything restated here wins. Everything this page needs that is shared lives there: §4 the split masthead, §13a the aside, §13c the step ladder, §15b the data table, §15c the key/value strip, §17 the client-image figure band (added by this page, see PATTERNS.md). WHAT THIS PAGE IS, after the re-composition of 2026-08-18: 10 masthead A-SPLIT on a MIST band, RAISED plate sunken 20 iki hâl two-state comparison table + the four kazanım ground 30 başlıklar four client figures, copy beside each sunken 40 aşamalar the client's three-stage ladder ground 50 kapanış the indigo CTA — the assigned CLOSE dark Five sections, tonal order MIST-GROUND-MIST-GROUND-DARK. Every other page on the site opens on the ground or on the indigo; this is the only one that opens on the mist, which is half of how it stops looking like the three other A-SPLIT pages. The other half is what lands second: a ruled two-state ledger with no prose deck above it. WHAT WAS REMOVED. This was the last page on the site presenting its value list as a .ng-card grid, and it carried six sections against an assigned five. Gone with the grid: .ng-vals, .ng-net (the hand-built ranked action list), .ng-env (the hand-built network summary) and .ng-why-band. The client figures do that job now, and the client's four benefit lines moved into section 20 as .ng-win. ========================================================================== */ /* --- A SHARED BUG, FIXED LOCALLY BECAUSE THE SHARED FILE'S §13a IS OFF LIMITS ng-shared.css §13a sets `.ng-v2 .ng-aside__quote{ margin:0 }` and its comment says that (0,2,0) beats the theme's `.content-wrapper blockquote` at (0,1,1). It does. But Neuros also ships, in the same stylesheet: body .content-wrapper blockquote:not(:first-child) { margin-top:2.5rem } body .content-wrapper blockquote:not(:last-child) { margin-bottom:2.5rem } which are (0,2,2) and load after us — the same `:not()` family as the `h?:not(:first-child){margin-top:50px}` rule PATTERNS.md §11 was written about, applied to blockquote instead of to headings. Nobody gave .ng-aside__quote the doubled-class defence, so it computes 40px top AND 40px bottom where 0 and 16 were authored: 80px of unasked-for air inside a 200px plate, on every leaf that quotes its hub's question. MEASURED, NOT ASSUMED, post-JS at 1440 on this page and on the live /sektorler/akaryakit/ (40px/40px on both). Still open in ng-shared.css §13a; this override should be deleted the moment it lands there. §17 is additive and may not reach back up the file to fix §13a. ------------------------------------------------------------------------ */ .ng-v2 .ng-aside__quote.ng-aside__quote{ margin:0; } /* ========================================================================== 1. THE MASTHEAD, INVERTED ========================================================================== */ /* THE BAND IS THE SUNKEN SURFACE AND THE PLATE IS THE RAISED ONE. ng-shared.css §4 sets `.ng-v2 .ng-masthead{ background:var(--ng-ground) }` and §1 sets `.ng-v2 .ng-section--sunken{ background:var(--ng-surface-sunken) }` — both (0,2,0), and §4 loads later, so the masthead wins and the modifier is inert on its own. (0,3,0) here takes it back. WHY: the three other A-SPLIT pages (kamu, sigorta, lokasyon-analizi-mobile) all open ground-band + mist-plate. Swapping the two roles — mist band, white plate with the card shadow — is a first screen you can tell apart from across the room, and it invents nothing: these are the two surface roles the system already has, in the other order, exactly as PATTERNS.md §16 records .ng-close__rail doing on a NONE-MIST page. NO TOP HAIRLINE. §1 draws `border-block`, which on the first section of the page paints a rule immediately under the site header where it reads as a stray line rather than as the edge of a plate. The bottom one stays: it is the tonal boundary against the ground band that follows. */ .ng-v2 .ng-lead.ng-section--sunken{ background:var(--ng-surface-sunken); border-top:0; } /* The plate takes the RAISED role, which is white + hairline + shadow. Mist on mist would be invisible; a plate with no shadow on a tinted band reads as a hole punched in it rather than as a card lying on it. */ .ng-v2 .ng-lead .ng-aside{ background:var(--ng-surface); box-shadow:var(--ng-shadow-card); } @media (min-width:960px){ /* 56/44 rather than ng-shared's 58/42, the same adjustment the fuel leaf made and for the same reason: the aside holds a QUOTE with a 3px rule and a hanging indent, not a chip row. At 42% the Turkish question broke after "doğru" and printed "Mevcut ağım doğru / kurulmuş mu?", which reads as two fragments rather than one question. */ .ng-v2 .ng-lead .ng-masthead__inner{ grid-template-columns:minmax(0,56fr) minmax(0,44fr); } } /* ========================================================================== 2. SECTION 20 — THE TWO-STATE COMPARISON The shape that replaced the four-card grid. Built on ng-shared.css §15b's .ng-dtable, NOT as a new table: §15b already carries the doubled-class defence against the theme's `table:not(:first-child){margin-top:2rem}` pair, already resets the theme's navy cell borders, and is already screenshot- verified at four widths on a dozen pages. The eighteen hand-rolled tables the variance report lists are eighteen chances to get that wrong again. ========================================================================== */ /* The head deliberately has no lede: eyebrow, one line of h2, then the table. What lands second on this page is a ruled ledger, not another prose deck — which is the specific thing that had to differ from the other three A-SPLIT pages, all of which put paragraphs here. */ .ng-v2 .ng-swap__head{ margin-bottom:26px; max-width:34ch; } .ng-v2 .ng-swap__wrap{ margin-top:0; } /* COLUMN WIDTHS BELONG TO THE CONTENT, which is why §15b leaves them to the page. The subject column is the narrowest thing on the row — four short noun phrases — and the two state columns split what is left evenly, so the before and the after are visibly the same size. Equal width is the argument: a wider "after" column would be a layout making a claim. `table-layout:fixed` because without it the browser sizes columns from the longest word and the tfoot's two-column span drags the split off true. */ .ng-v2 .ng-swap{ table-layout:fixed; } .ng-v2 .ng-swap th:first-child, .ng-v2 .ng-swap td:first-child{ width:22%; } /* THE SPINE. A 2px rule down the boundary between the two states, and the proposal column set in ink rather than in muted — so the eye reads "this is the side that changes" without a fill, a tint or a fourth colour. A shaded column was the alternative and was rejected: this system has two surface roles and a tinted column inside a ground band would be a third. (0,3,1) beats §15b's `.ng-v2 .ng-dtable td:last-child` and its (0,2,1) cell reset, so the border-left survives the `border:0` those rules set. */ .ng-v2 .ng-swap th.ng-swap__to, .ng-v2 .ng-swap td.ng-swap__to{ border-left:2px solid var(--ng-hairline); padding-left:18px; } .ng-v2 .ng-swap tbody td.ng-swap__to{ color:var(--ng-ink); font-weight:600; } /* The arrow is in the markup, not in `content:` — this sheet is copied to the English page verbatim and a pseudo-element string is one more place a language can leak. aria-hidden on the span, because "right arrow IN THE RECOMMENDATION" is not a column name. */ .ng-v2 .ng-swap__arw{ color:var(--ng-accent); } /* The tfoot states the hub's promised output and the one thing the page must never let a reader mistake: a recommendation is not a decision. §15b already gives tfoot a 2px top rule and 14px muted type; only the span's measure is set here, because a full-width sentence at 1120px runs past a comfortable line length. */ .ng-v2 .ng-swap tfoot td{ max-width:76ch; } .ng-v2 .ng-swap-band__note{ margin-top:20px; } @media (max-width:767px){ /* THREE COLUMNS SURVIVE 390px BECAUSE THE CELLS ARE SHORT — six words at most, sized to fit rather than to be scrolled to. The alternative was the usual responsive-table trick of `display:block` plus a `content:` label per cell, and it was rejected twice over: it strips the table role in several browsers unless every ARIA role is restated by hand, and the labels would have to be Turkish strings inside a stylesheet that is copied byte for byte onto the English page. §15b's .ng-dtable__wrap stays as the safety valve for the case where a long word cannot break. */ /* 34%, not 26%. At 26% of a 342px container the subject column is 89px and "Operasyonel" — one word, 11 characters at the 16px mobile reading floor — is wider than that, so with `table-layout:fixed` it painted straight across the gutter and touched "sayısı" in the next column. Seen in a 390 screenshot; ng-page-check called the page clean, because an overflowing word inside a table cell is neither horizontal overflow of the document nor dead air. `overflow-wrap` is the backstop for the next long word rather than the fix — breaking a Turkish word mid-stem is worse than a narrow column, so the width is what actually solves it. 38 AND NOT 34, AND THE NUMBER COMES FROM THE ENGLISH PAGE. This sheet is copied byte for byte onto /en/solutions/optimization/, so the subject column has to hold the longer of the two languages' longest word, and that is "Cannibalization" — fifteen characters at the 16px mobile reading floor, about 118px. 38% of a 342px container is 130px. The Turkish worst case, "Operasyonel", is 94px and has room to spare. */ .ng-v2 .ng-swap th:first-child, .ng-v2 .ng-swap td:first-child{ width:38%; } .ng-v2 .ng-swap th, .ng-v2 .ng-swap td{ overflow-wrap:break-word; } .ng-v2 .ng-swap th.ng-swap__to, .ng-v2 .ng-swap td.ng-swap__to{ padding-left:10px; } .ng-v2 .ng-swap__head{ max-width:none; margin-bottom:22px; } .ng-v2 .ng-swap-band__note{ max-width:none; } } /* ========================================================================== 3. THE FOUR BENEFITS — .ng-win The client's own "Optimizasyonun Kazandırdıkları" / "Benefits of optimization", four lines, verbatim, in their order and numbering. WHY THEY ARE HERE AND NOT IN THE CLOSING BAND. ng-shared.css §9 says the closing band carries one heading and one decision and no feature recap, and it is right: four numbered lines above the button would compete with the button. They belong to the comparison anyway — the table says what changes, these say what the change is worth. ONE PLATE, NOT FOUR TILES. Four short lines inflated into four 200px cards manufacture dead air, which is measured on this site and reported against the page. RAISED role, because the band under it is the ground. COLUMN FLOW, NOT ROW FLOW. `grid-auto-flow:column` with two explicit rows puts 01-02 in the first column and 03-04 in the second, so the numbers still read top-to-bottom in each column. Row flow would print 01 02 / 03 04, i.e. a numbered list you read in a Z, which is how a numbered list stops being one. ========================================================================== */ .ng-v2 .ng-win{ margin-top:40px; padding:26px 24px; background:var(--ng-surface); border:1px solid var(--ng-hairline); border-radius:var(--ng-radius); box-shadow:var(--ng-shadow-card); } /* The doubled class is the §11 defence: a single-class heading rule is (0,2,0) and loses to the theme's `body .content-wrapper h3:not(:first-child) {margin-top:50px}` at (0,2,2), which would open a 50px gap where 0 is authored. Every page-level heading class on this site needs this. */ .ng-v2 .ng-win__name.ng-win__name{ margin:0 0 20px; font-size:20px; line-height:1.3; } .ng-v2 .ng-win__list{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:minmax(0,1fr); gap:0 40px; } @media (min-width:760px){ .ng-v2 .ng-win__list{ grid-template-columns:repeat(2,minmax(0,1fr)); grid-template-rows:repeat(2,auto); grid-auto-flow:column; } } .ng-v2 .ng-win__row{ display:flex; align-items:baseline; gap:14px; padding:13px 0; border-top:1px solid var(--ng-hairline); } .ng-v2 .ng-win__row:first-child{ border-top:0; padding-top:0; } @media (min-width:760px){ /* Item 3 is the first row of the SECOND column, so it loses its rule too and item 1 keeps the reset above. Hard-coded to :nth-child(3) because the list is a fixed four items of the client's own copy — if a fifth is ever added this rule is wrong, which is what this comment is for. */ .ng-v2 .ng-win__row:nth-child(3){ border-top:0; padding-top:0; } .ng-v2 .ng-win__row:nth-child(2), .ng-v2 .ng-win__row:nth-child(4){ padding-bottom:0; } } /* 12px at .1em tracking (ratio .10) is a tracked label BY MEASUREMENT, which is the basis ng-page-check actually uses — the same basis .ng-card__meta uses. It is an ordinal glanced at beside a line, not read. */ .ng-v2 .ng-win__n{ flex:0 0 auto; font-family:var(--ng-font-label); font-weight:600; font-size:12px; line-height:1.9; letter-spacing:.1em; text-transform:none; color:var(--ng-accent); /* 5.64:1 on white */ font-variant-numeric:tabular-nums; } .ng-v2 .ng-win__t{ min-width:0; font-size:16px; line-height:1.5; color:var(--ng-ink); } /* ========================================================================== 4. SECTION 30 — THE FOUR TITLES, EACH WITH THE CLIENT'S OWN FIGURE The band is sunken and the figures are white: mist holds white chrome, which is exactly what these four white-ground assets are. The layout itself is ng-shared.css §17 (.ng-figband / --split / --flip). Only the copy column's own type is here, because what goes beside a figure is a property of the page, not of the primitive. ========================================================================== */ /* 64px between rows — wide, because each row is a heading plus a paragraph plus a 540px-tall artefact, and at anything tighter the fourth row's copy starts reading as a caption for the third row's picture. */ .ng-v2 .ng-titles__row{ margin-top:52px; } @media (min-width:960px){ .ng-v2 .ng-titles__row{ margin-top:64px; } } /* THE CRITERIA LINE SITS ABOVE THE HEADING, not below it. It is the same string that was the card's __meta before this pass — the criteria that title works from, lifted from that title's own paragraph — and above the question it reads as the subject the question is asked about. 12px at .08em is the tracked-label threshold exactly (ratio .08), which is the measurement ng-page-check makes rather than an allowlist. */ .ng-v2 .ng-titles__meta{ margin:0 0 12px; font-family:var(--ng-font-label); font-weight:600; font-size:12px; line-height:1.5; letter-spacing:.08em; text-transform:none; /* authored pre-uppercased: i -> İ */ color:var(--ng-accent); /* 4.92:1 on mist */ } /* THE HEADING IS A QUESTION, NOT THE TITLE. Each asset carries its own title baked in at 28px; an h3 restating it would be a stutter, and the image brief is explicit about that. The title is still on the page as text, once, in the figcaption where it reads as a sample's subject line. Doubled class = the §11 theme-margin defence. */ .ng-v2 .ng-titles__q.ng-titles__q{ margin:0; font-family:var(--ng-font-display); font-weight:700; font-size:clamp(1.35rem, 2.6vw, 1.75rem); line-height:1.22; letter-spacing:-0.02em; color:var(--ng-ink); text-wrap:balance; } /* The client's own paragraph for that title, verbatim. 17px rather than the .ng-lede 18px: there are four of these and a lede-sized paragraph four times over reads as four ledes. */ .ng-v2 .ng-titles__body{ margin:14px 0 0; font-size:17px; line-height:1.6; color:var(--ng-muted); max-width:46ch; } .ng-v2 .ng-titles__note{ margin-top:44px; max-width:88ch; } @media (max-width:767px){ .ng-v2 .ng-titles__row{ margin-top:40px; } .ng-v2 .ng-titles__body{ font-size:16px; max-width:none; } /* mobile floor */ .ng-v2 .ng-titles__note{ max-width:none; } } /* ========================================================================== 5. SECTION 50 — THE ASK, UNDER THE CLIENT'S CLOSING LINE The band carries the client's own two closing sentences and then the one thing this solution actually needs from a visitor. Both are .ng-cta__lede so they set identically; only the gap between them is authored here. ========================================================================== */ .ng-v2 .ng-cta__ask{ margin-top:14px; } /* ========================================================================== 6. RESPONSIVE AND REDUCED MOTION ng-shared.css carries the 44px hit areas (crumbs, buttons, chips) at 767, at 768-1023 and at exactly 1024, and the 16px reading floor at 767. The only interactive things on this page are those primitives — the comparison table, the benefit plate and the four figures are all static DOM — so there is no hit-area block here, and nothing on this page adds motion beyond .ng-anim and .ng-card, both of which ng-shared.css §10 and ng-components.css §8 already flatten under a reduce preference. Left as a note rather than an empty block so the next person does not go looking for the missing rules. NOTE FOR ANYONE ADDING A FIGURE HERE: no .ng-anim on any element that contains one of the §17 images. .ng-anim's hidden state is a transform, and `loading="lazy"` evaluates intersection against LAYOUT position — the one combination HANDOFF records as never loading at all. ========================================================================== */