/* ========================================================================== NEXT GEO — /urunler/sahanin-gucu/ and /en/products/sahanin-gucu/. One authored sheet for the pair; ng-page-apply.php copies it to the English slug with --css-from, so the two languages cannot drift. Loaded after ng-foundation / ng-components / ng-mobile / ng-shared, scoped to .ng-v2. Tokens only, no literal colours, no !important. NOTHING LANGUAGE-SPECIFIC MAY EVER GO IN THIS FILE. One sheet serves both pages byte for byte, so every fixed track below has to hold the LONGER of the two languages — see §6 on the sector table. HEADINGS ARE WRITTEN AT (0,3,0), doubled. Neuros ships `body .content-wrapper h?:not(:first-child){margin-top:50px}` at (0,2,2), which beats a plain `.ng-v2 .ng-x` at (0,2,0). PATTERNS.md §11 lists the shared classes that already carry the defence; every heading class this sheet adds carries it too. WHAT IS REUSED AND WHAT IS NEW, because "a new block class is a last resort": reused unchanged .ng-masthead--index (§16b) · .ng-figband / --split / --flip / __frame / __img / __cap (§17a) · .ng-steps (§13c) · .ng-dtable (§15b) · .ng-facts (§15c) · .ng-card / --link / __meta / __title / __body · .ng-grid--2 / --3 · .ng-pills · .ng-note · .ng-actions copied in .ng-idx__* from pages/hizli-teslimat.css §1b, which is what ng-shared.css §16 instructs the next F-INDEX page to do rather than promote a name two components already use new here .ng-sg-rail §4 — see the justification there .ng-sg-chain §5 — see the justification there .ng-sg-pull, .ng-sg-sub, .ng-sg-close, small furniture ========================================================================== */ /* ========================================================================== 1. THE F-INDEX MASTHEAD ========================================================================== ARCHETYPE F-INDEX, and it was chosen rather than assigned: this page is new and has no row in variance-plan.json. The seven pages already under /urunler/ open D-NUMBER (geoview), E-DARK (point-report), C-FIGURE (next-geo-tailor and whatsapp-lokasyon-raporu), A-SPLIT (lokasyon-analizi-mobile) and B-STACK (lokasyon-analizi-web). F-INDEX is the one opening no sibling uses, and it is also the one this subject actually wants: the product is a set of screens and a four-verb flow, so a navigable index of those is a truer first screen than a claim. Every anchor resolves to a real id — ARCHETYPES.md is explicit that an index which scrolls to nothing is a decoration with a pointer cursor. THERE IS NO ASIDE. §16b's single-column rule is (0,3,0) and beats §4's two-column rule inside §4's own min-width:960 query; writing an aside anyway would put a plate back on the right and undo the archetype. ========================================================================== */ /* --- 1a. the line under the headline -------------------------------------- The deck's own one-sentence definition of the product, sitting between the h1 and the client lede. A SENTENCE, so 16px and no tracking — not an eyebrow. Lifted from pages/hizli-teslimat.css §1a, where the same slot carries the attribution of the hub question. */ .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 ----- COPIED, NOT PROMOTED, from pages/hizli-teslimat.css §1b. ng-shared.css §16 records why: pages/perakende.css ships a DIFFERENT component under the same name (its section-20 ruled ledger) and disagrees with this one about .ng-idx__list's top rule and .ng-idx__to's grid-column, so a shared copy would silently redraw two live pages. The instruction there is to copy the block into your own sheet, which is what this is. Nothing is changed except §1c's seven-row minimum height, which is a property of this page's content. RULED ROWS, NOT CARDS. A contents list is one thing with seven entries, not seven things; seven raised boxes would have re-created the card grid on the first screen. The 2px top rule and the 1px rules between are the same treatment .ng-steps uses for a sequence. THREE COLUMNS ABOVE 900px: the ordinal, the entry, and where it goes. The destination column is max-content and nowrap — akaryakit's fixed 230px track put a lone arrow on its own line, and the copy column is the one that can absorb the difference. scroll-margin-top on the seven targets is in §2. */ .ng-v2 .ng-idx__label{ margin:0 0 14px; color:var(--ng-muted); /* not the accent: this labels the page's own furniture, and seven 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:15px 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:17px 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; /* authored pre-uppercased: i -> İ */ 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:19px; 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 the one primary CTA, below the index. The index owns the first screen; this is what a reader who has taken it then sees. ng-shared's .ng-masthead__proof draws its own top rule and its own 30px of air, and the masthead grid already supplies 30px of row gap, 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{ margin:16px 0 0; max-width:72ch; } .ng-v2 .ng-lead__actions{ margin-top:22px; } /* ========================================================================== 2. ANCHOR TARGETS ========================================================================== One class on each of the seven sections the index points at, rather than seven id selectors. 104px clears the theme's sticky header; 84px below the width where that header collapses. Same values as hizli-teslimat.css §5, which is the page these numbers were measured on. */ .ng-v2 .ng-jump{ scroll-margin-top:104px; } @media (max-width:1364px){ .ng-v2 .ng-jump{ scroll-margin-top:84px; } } /* ========================================================================== 3. THE THREE FULL-WIDTH EXHIBITS ========================================================================== ELEMENTOR EATS
MARGINS at (0,4,1) and lands a megabyte later in the combined file, so it wins ties on order too. ng-shared.css §17 is explicit that PAGES own their figure spacing and must beat it at (0,5,0). The doubled class below is that defence; without it the band renders hard left with its caption jammed against the next block, and every mechanical check still reports the page clean. NO max-width. These plates are 1560px wide and the container is 1120px, so the frame is always the constraint and a cap would do nothing but sit there waiting to be wrong. --split figures are grid items and take gap, not margin, so only the standalone ones carry spacing. NO .ng-figband__flag ON ANY OF THEM, and that is deliberate. The chip marks sample output on an asset that does not label itself. All three plates draw their own footer line — "ÖRNEK ÇIKTI · HARİTA GERÇEK VERİDİR, NOKTALAR TEMSİLÎDİR" — inside the frame, in the same type family, so a chip would say it twice, 20px apart. This is the same call point-report/30-ornek.html makes for the same reason. The two pieces of artwork carry no data at all, so there is nothing to hedge on them either. NO .ng-anim ON ANYTHING CONTAINING AN IMAGE. §17's third rule; the hidden state is a transform and that is the combination HANDOFF records as never loading. */ .ng-v2 .ng-section .ng-container figure.ng-sg-fig.ng-sg-fig{ margin:34px auto 0; } .ng-v2 .ng-sg-fig + .ng-sg-rail, .ng-v2 .ng-sg-fig + .ng-sg-sub{ margin-top:40px; } /* ========================================================================== 4. .ng-sg-rail — a ruled n-up list of screen features ========================================================================== NEW BLOCK, AND HERE IS WHY THE EXISTING ONES WOULD NOT DO. This page has to name four things on the map screen, three filter methods and six things head office sees. Three candidates were considered: .ng-grid + .ng-card would give the page FOUR card grids (sections 20, 30, 40, 50). ARCHETYPES.md's whole complaint is that "nearly every page is a stack of lists"; four raised grids in one scroll is that failure inside one page. .ng-steps is a numbered LADDER and reads as a sequence. The map screen's four features are simultaneous, not ordered, and the six head-office views are not steps either. §13c's own comment says a process is not a set of options; the inverse holds. .ng-facts runs a tracked LABEL over a big VALUE. These entries are a name over a sentence, which is the opposite shape, and a 15px sentence set in the __v slot would inherit display type at 30px+. So: a hairline-ruled row per entry, no fill, no shadow, laid out n-up. It is deliberately the QUIETEST of the three list shapes on this page — cards for discrete things you might pick between (the problems, the six record types), .ng-steps for a real sequence (planning, setup), and this for "what is on the screen". The 2px rule over each entry is the same sequence-free treatment .ng-idx uses one screen higher, which is what ties them together. THE MODIFIER IS THE ITEM COUNT, NOT THE COLUMN COUNT, and that is why there are four of them for three column widths. Every step has to divide the count exactly, or the last row draws a 2px rule across part of the container and reads as a broken grid — the .ng-facts orphan finding recorded in PATTERNS §16, which ng-page-check cannot see because a half-width rule is neither overflow nor dead air. --2 (2 items) 1 · 2 --3 (3 items) 1 · 3 never 2, which strands one --4 (4 items) 1 · 2 · 4 --6 (6 items) 1 · 2 · 3 all three steps divide 6 --6 exists rather than reusing --3 because six entries in a single column between 620 and 859 is a 900px stack of one-line features, and --3 has to stay at 1-then-3 for the three-item filter list that shares the class. */ .ng-v2 .ng-sg-rail{ list-style:none; margin:26px 0 0; padding:0; display:grid; gap:24px 30px; grid-template-columns:minmax(0,1fr); } @media (min-width:620px){ .ng-v2 .ng-sg-rail--2, .ng-v2 .ng-sg-rail--4, .ng-v2 .ng-sg-rail--6{ grid-template-columns:repeat(2,minmax(0,1fr)); } } @media (min-width:860px){ .ng-v2 .ng-sg-rail--3, .ng-v2 .ng-sg-rail--6{ grid-template-columns:repeat(3,minmax(0,1fr)); } .ng-v2 .ng-sg-rail--4{ grid-template-columns:repeat(4,minmax(0,1fr)); } } .ng-v2 .ng-sg-rail__item{ min-width:0; padding-top:14px; border-top:2px solid var(--ng-hairline); } .ng-v2 .ng-sg-rail__n{ display:block; margin:0 0 7px; font-family:var(--ng-font-label); font-weight:600; font-size:12px; line-height:1.4; letter-spacing:.1em; text-transform:none; /* authored pre-uppercased: i -> İ */ color:var(--ng-accent); font-variant-numeric:tabular-nums; } /* A

, not an

. Section 30 already carries an h2 and two real sub-heads; turning eleven feature names into headings as well would give the page an outline in which the map screen's "Adres ve nokta arama" ranks with "Ziyaret planlama". It is a name over a sentence, and that is what it is marked up as. */ .ng-v2 .ng-sg-rail__name{ margin:0 0 6px; font-family:var(--ng-font-display); font-weight:600; font-size:16.5px; line-height:1.3; letter-spacing:-0.01em; color:var(--ng-ink); text-wrap:balance; } .ng-v2 .ng-sg-rail__body{ margin:0; font-size:15px; line-height:1.6; color:var(--ng-muted); } /* ========================================================================== 5. .ng-sg-chain — the four-stage pipeline in the dark band ========================================================================== NEW BLOCK, and the alternative was .ng-steps used twice on one page. The difference is not decorative: .ng-steps is a numbered ladder of things a READER does in order (§13c), and section 80's setup really is one. This is four PRODUCTS handing work to each other, which the deck draws with an arrow between each pair, and the arrow is the content — it says the output of one is the input of the next. Reusing .ng-steps would have printed the same shape twice on one scroll and dropped the only mark that makes it a pipeline. The arrow is a ::after on the item rather than a glyph in the markup, so it exists only where it means something — between stages, at the width where they sit side by side, and never after the last one. Below 900 the stages stack and the arrow rotates a quarter turn, because a right-pointing arrow over a vertical stack points at nothing. NO COLOUR IS WRITTEN HERE. `is-dark` on the section flips --ng-ink, --ng-muted, --ng-hairline and the accent tier in ng-foundation.css §3. Anything hand-coloured would survive that flip and be wrong. */ .ng-v2 .ng-sg-chain{ list-style:none; margin:30px 0 0; padding:0; display:grid; gap:34px 26px; grid-template-columns:minmax(0,1fr); } @media (min-width:900px){ .ng-v2 .ng-sg-chain{ grid-template-columns:repeat(4,minmax(0,1fr)); gap:26px 34px; } } .ng-v2 .ng-sg-chain__item{ position:relative; min-width:0; padding-top:16px; border-top:2px solid var(--ng-accent); } /* -30px, not -16px: the stacked gap is 34px and the glyph box is 20px tall, so -16px put the arrow across the 2px rule it is meant to point at and read as a nick in the rule rather than as a mark. -30px seats it inside the gap with 4px clear at each end. Found in a 390 render. */ .ng-v2 .ng-sg-chain__item::after{ content:"\2192"; position:absolute; top:-30px; left:50%; transform:translateX(-50%) rotate(90deg); font-size:20px; line-height:1; color:var(--ng-accent); } .ng-v2 .ng-sg-chain__item:first-child::after{ content:none; } @media (min-width:900px){ .ng-v2 .ng-sg-chain__item::after{ top:6px; left:auto; right:calc(100% + 8px); transform:none; } } .ng-v2 .ng-sg-chain__n{ display:block; margin:0 0 8px; font-family:var(--ng-font-label); font-weight:600; font-size:12px; line-height:1.4; letter-spacing:.1em; text-transform:none; color:var(--ng-accent); font-variant-numeric:tabular-nums; } .ng-v2 .ng-sg-chain__name.ng-sg-chain__name{ margin:0 0 8px; font-family:var(--ng-font-display); font-weight:700; font-size:19px; line-height:1.25; letter-spacing:-0.014em; color:var(--ng-ink); } .ng-v2 .ng-sg-chain__body{ margin:0; font-size:15px; line-height:1.6; color:var(--ng-muted); } /* 14px, the reading floor. It tracks at .04em, which is under the contract's measured 0.08 threshold for the tracked-label exception, so it is body copy and takes the floor — the same call ng-shared.css makes for .ng-crumbs and .ng-cta__meta. 13px here would be a defect ng-page-check reports by measurement, not by allowlist. */ .ng-v2 .ng-sg-chain__link{ display:inline-block; margin-top:10px; font-family:var(--ng-font-label); font-weight:600; font-size:14px; line-height:1.4; letter-spacing:.04em; color:var(--ng-accent); text-decoration:none; border-bottom:1px solid transparent; } .ng-v2 .ng-sg-chain__link:hover{ border-bottom-color:currentColor; } /* The stat strip under the pipeline. §15c ships the block; only the air above it belongs to this page. */ .ng-v2 .ng-sg-chain + .ng-facts{ margin-top:44px; padding-top:34px; border-top:1px solid var(--ng-hairline); } /* ========================================================================== 6. SECTION FURNITURE ========================================================================== */ /* --- 6-0a. .ng-steps carries FOUR steps on this page, twice --------------- ng-shared §13c ships 1 column then 3 at 860, which is right for the three-step ladders the leaf pattern was written around. Both ladders here have four steps — the visit-planning sequence and the setup sequence — so the shipped rule breaks them 3 + 1 and draws a 2px accent rule over a lone step on its own row. Exactly the orphan the .ng-facts note in PATTERNS §16 records, and exactly as invisible to every mechanical check. 2 at 620 and 4 at 1024, both of which divide 4. Not 860 for the four-column step: at 880px a four-column track is 200px, and "Ekip eğitimi ve canlıya geçiş" / "Team training and go-live" both wrap to three lines there. */ @media (min-width:620px){ .ng-v2 .ng-steps{ grid-template-columns:repeat(2,minmax(0,1fr)); } } @media (min-width:1024px){ .ng-v2 .ng-steps{ grid-template-columns:repeat(4,minmax(0,1fr)); gap:28px 26px; } } /* --- 6-0b. copy inside a --split figure band ------------------------------ .ng-section-head supplies the eyebrow/h2/lede rhythm, but sections 20 and 40 put that cluster inside .ng-figband__text instead, where there is no .ng-section-head to inherit it from — so the lede rendered hard against the descender of the h2 with no gap at all. Found in a 1440 render; nothing measurable was wrong, because two adjacent blocks with no margin are not a defect to any assertion. Same 14px step .ng-section-head uses. */ .ng-v2 .ng-figband__text .ng-eyebrow{ margin:0 0 12px; } .ng-v2 .ng-figband__text .ng-section-head__title.ng-section-head__title{ margin:0 0 14px; } /* --- 6a. the sub-head inside a long section ------------------------------- Section 30 carries three beats (map, filters, planning) and needs a heading between them that is visibly below the h2. Doubled class for the theme's 50px margin-top, per PATTERNS §11. */ .ng-v2 .ng-sg-sub.ng-sg-sub{ margin:46px 0 6px; font-family:var(--ng-font-display); font-weight:600; font-size:clamp(19px,2.2vw,24px); line-height:1.22; letter-spacing:-0.016em; color:var(--ng-ink); text-wrap:balance; } .ng-v2 .ng-sg-sub__lede{ margin:0 0 4px; max-width:64ch; font-size:15.5px; line-height:1.6; color:var(--ng-muted); } /* --- 6b. the closing statement of section 20 ------------------------------ The deck's own conclusion, and it is the hinge of the page: the problem section ends on it and everything after it is the answer. A ruled pull line rather than another card, because a card would make it a fifth problem. */ .ng-v2 .ng-sg-pull{ margin:34px 0 0; padding:18px 0 0; border-top:2px solid var(--ng-accent); max-width:52ch; font-family:var(--ng-font-display); font-weight:600; font-size:clamp(17px,2vw,21px); line-height:1.4; letter-spacing:-0.012em; color:var(--ng-ink); } /* --- 6c. notes under a block ---------------------------------------------- */ .ng-v2 .ng-sg-note{ margin:24px 0 0; max-width:76ch; } .ng-v2 .ng-sg-lede{ margin:0; max-width:64ch; } .ng-v2 .ng-sg-cards{ margin-top:34px; } .ng-v2 .ng-sg-split{ margin-top:30px; } /* --- 6d. the sector table, section 70 ------------------------------------- .ng-dtable (§15b) unchanged — it already carries the doubled-class defence against the theme's `table:not(:first-child)` margin pair and already resets the theme's navy cell borders. Only the column track belongs to a page, because which column is wide is a property of the content. THE FIRST COLUMN'S WIDTH COMES FROM THE OTHER LANGUAGE. One sheet serves both pages, so the track has to hold the longer of "Bankacılık" and "Telecommunication" — 15 characters at the 16px mobile floor, about 118px. 30% of a 342px container is 103px and would break "Telecommunication" mid stem, which is exactly the failure optimizasyon.css records; 36% is 123px. Above 620 the copy column can take the rest. */ .ng-v2 .ng-sg-sect{ margin-top:30px; } .ng-v2 .ng-sg-sect tr > :nth-child(1){ width:36%; } @media (min-width:620px){ .ng-v2 .ng-sg-sect tr > :nth-child(1){ width:26%; } } .ng-v2 .ng-sg-sect__link{ color:var(--ng-accent); text-decoration:none; border-bottom:1px solid transparent; } .ng-v2 .ng-sg-sect__link:hover{ border-bottom-color:currentColor; } /* ========================================================================== 7. THE CLOSE — section 80 ========================================================================== THE DARK BAND ALREADY FELL, in section 60. A second indigo slab here would give this page the dark-close silhouette ARCHETYPES.md was written to break (76 of 76 pages used to end that way), so the last section is MIST. Which inverts the surfaces, exactly as PATTERNS §16 records for a NONE-MIST page: the sunken band holds a RAISED white panel. A mist rail on mist is invisible, and a shadowless plate on a tinted band reads as a hole punched in it. Same idea as akaryakit's .ng-close__rail, opposite surfaces — which is also why neither has been promoted: three leaves have now written this block and not the same one. */ .ng-v2 .ng-sg-close{ margin-top:44px; padding:clamp(26px,4vw,40px); background:var(--ng-surface); border:1px solid var(--ng-hairline); border-radius:var(--ng-radius); box-shadow:var(--ng-shadow-card); } .ng-v2 .ng-sg-close__title.ng-sg-close__title{ margin:10px 0 12px; font-family:var(--ng-font-display); font-weight:600; font-size:clamp(22px,3.2vw,32px); line-height:1.16; letter-spacing:-0.02em; color:var(--ng-ink); text-wrap:balance; max-width:24ch; } .ng-v2 .ng-sg-close__lede{ margin:0 0 22px; max-width:60ch; } .ng-v2 .ng-sg-close__actions{ margin:0; } /* ========================================================================== 8. RESPONSIVE ========================================================================== ng-mobile.css §7 carries every 44px hit area (crumbs, buttons, pills) at 767, at 768-1023 and at exactly 1024. The interactive things this page adds are .ng-idx__link (seven rows, all over 70px tall at every width, so already past the 44px minimum), the six sector links inside the table, and two inline links, which take the shared treatment. */ @media (max-width:767px){ .ng-v2 .ng-idx__body{ font-size:14.5px; } .ng-v2 .ng-idx__name{ font-size:18px; } .ng-v2 .ng-idx__link{ padding:14px 0; } /* The plates are 1560x1080 documents. At 342px of container they render at about 237px tall and their own 21px footer line lands under 5px, which is unreadable — but shrinking them further or hiding them is worse than showing a legible-at-a-glance picture whose detail is in the copy beside it. The captions carry the finding instead, which is why every one of them names what the picture shows rather than what it is called. */ .ng-v2 .ng-section .ng-container figure.ng-sg-fig.ng-sg-fig{ margin-top:26px; } .ng-v2 .ng-sg-sub.ng-sg-sub{ margin-top:38px; } /* The two inline links this page adds — the six sector names in the table and the one Point Report link in the dark band — are text, not buttons, so they get the 44px hit area on the element rather than padding that would open a gap on desktop. */ .ng-v2 .ng-sg-sect__link{ display:inline-block; min-height:44px; padding-top:11px; } .ng-v2 .ng-sg-chain__link{ min-height:44px; padding-top:14px; margin-top:2px; } }