/* ========================================================================== NEXT GEO — page stylesheet for the SOLUTIONS HUB PAIR TR 3486 /cozumler/ EN 25626 /en/solutions/ One authored sheet for both; ng-page-apply.php --css-from copies it to solutions.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 that is not specific to this page; if a rule below would be useful to the seven solution-leaf pages that will reuse this card, it belongs there instead — check before adding. --------------------------------------------------------------------------- WHAT WAS ACTUALLY WRONG (measured, post-JS, before anything was changed) /cozumler/ 1440: 44.5% dead air in one 1480px band · h1: 2 390: 56.0% dead air in two bands (2600px) · 8 tap targets under 44px (three of them the card links, 171x22, 105x22, 119x22) /en/solutions/ 1440: 45.0% dead air · h1: 2 390: 56.5% dead air · same 8 tap targets And the thing no assertion caught: ELEVEN OF THE TWELVE WIDGETS SHIPPED INSIDE `elementor-invisible` — opacity:0 until Elementor's frontend script runs. LiteSpeed holds ~63 scripts on data-src until a real interaction, so what a visitor sees on arrival is a 500px stock 3D-city banner, ~3000px of white, and one orphan sentence floating on the indigo band. The h1, the seven cards and the only CTA button are all invisible. That is in the before screenshot and in no DOM, computed-style or HTML check. Everything on the new page paints without JS: .ng-anim's hidden state is scoped to html[data-ng-motion="on"] and has a 2.5s failsafe, and the closing CTA carries no entrance state at all. --------------------------------------------------------------------------- WHAT THIS HUB IS, AND HOW IT DIFFERS FROM THE OTHER TWO Three hubs, three kinds of thing, and they must not be the same page with different nouns: /sektorler/ fourteen INDUSTRIES — things a visitor already knows the name of. Its aside is an alphabetical chip cloud (find), its cards lead with a question, its second band COUNTS how many sectors share a solution family. /urunler/ seven PRODUCTS — things you log into and use. /cozumler/ seven SOLUTIONS — things that produce a DELIVERABLE. So this page is built on two ideas the other two do not use: 1. THE CARD LEADS WITH THE OUTPUT. Every card carries a wash-tinted "ÇIKTI" line — what you actually receive — above the client's own deliverable list. Nobody arrives looking for the word "Segmentasyon"; they arrive wanting a segment map and an investment priority order. The questions have not been thrown away: they do routing work in the masthead aside, where they are useful, instead of being repeated on the cards. 2. THE SEVEN ARE A SEQUENCE, and the page says so once. Section 30 regroups the same seven into Hazırlık → Karar → Yürütme with the input and the output of each stage, all of it lifted from the client's own leaf pages. That is the "why seven and not one" answer the old 190-word page never gave. The grid itself stays in the client's PUBLISHED order (footer menu, mega-menu and the old page all agree) — re-sorting it would have silently moved six links for a visitor who already knows the site. Visually it is the same system as the sectors hub — same masthead, same card, same sunken second band, same indigo close — because a visitor moving between the three hubs should feel one site, not three. ========================================================================== */ /* ========================================================================== 1. MASTHEAD — copy column and question router ========================================================================== */ /* 56/44 rather than the sectors hub's 57/43. Its aside holds one-word chips; this one holds seven full questions, and the longest — "Noktalarım haritalarda doğru görünüyor mu?" — needs the extra point of width to stay on two lines at 1440 instead of three. Below 960 the aside becomes a full-width plate under the proof strip. */ @media (min-width:960px){ .ng-v2 .ng-cozmh .ng-masthead__inner{ grid-template-columns:minmax(0,56fr) minmax(0,44fr); } } /* The proof strip's footnote, held short of the lede's measure so the two do not read as one paragraph. */ .ng-v2 .ng-cozmh__note{ max-width:56ch; } /* The router panel is SUNKEN: mist + hairline, holding chrome. Same surface role and the same reasoning as the sectors index — an untethered tint on the #FAFBFF ground reads as a smudge rather than a plate, and the hairline is what fixes that. No shadow: a recessed surface that also floats is a contradiction. */ .ng-v2 .ng-cozidx{ padding:8px 20px 20px; background:var(--ng-surface-sunken); border:1px solid var(--ng-hairline); border-radius:var(--ng-radius); } @media (min-width:960px){ /* Pinned to the top of its track, not stretched: the copy column is taller and a stretched panel would leave mist under the last row. */ .ng-v2 .ng-cozidx{ align-self:start; margin-top:34px; } } @media (max-width:959px){ .ng-v2 .ng-cozidx{ margin-top:4px; } } .ng-v2 .ng-cozidx__label{ margin:14px 0 4px; } .ng-v2 .ng-cozidx__list{ list-style:none; margin:0; padding:0; } /* Defensive: Neuros ships a bare `ul > li{padding:0 0 0 1.875em}` at (0,0,2) for the fontello chevron ng-components.css §10 suppresses. It measures 0px on the live inner pages, so something upstream already neutralises it here, but the homepage needed a per-component reset for exactly this and a 30px inset on a 44%-wide panel would be very visible. One line, no risk. */ .ng-v2 .ng-cozidx__list > li{ padding:0; } /* ROWS, NOT CHIPS. Seven questions cannot be chips: a chip row is scannable only when each item is one or two words, and "Kim nerede, hangi ürünü ister?" is nine. As rows they read top to bottom in the order the grid uses, and each row is a two-line block — question in ink, destination in accent — which is the same shape as a search result and needs no explaining. The hairline between rows is `border-top` on every row but the first, so the panel's own border does not double up with the first row's. */ .ng-v2 .ng-cozidx__row{ display:block; padding:12px 0; border-top:1px solid var(--ng-hairline); text-decoration:none; /* 44px is met by construction — two lines of type plus 24px of padding is ~62px — but declared anyway so a future one-line question cannot drop it under the minimum. */ min-height:44px; } .ng-v2 .ng-cozidx__list > li:first-child .ng-cozidx__row{ border-top:0; } .ng-v2 .ng-cozidx__q{ display:block; font-family:var(--ng-font-display); font-weight:600; font-size:15px; line-height:1.4; color:var(--ng-ink); /* 13.04:1 on mist */ } .ng-v2 .ng-cozidx__name{ display:flex; align-items:center; gap:.4em; margin-top:3px; font-family:var(--ng-font-label); font-weight:500; /* 14px, not 12: this is the destination label a visitor reads to decide whether to follow the row, not a tracked micro-label, so it takes the reading floor. Tracking is .01em, well under the 0.08em that would earn the label exception. */ font-size:14px; line-height:1.35; letter-spacing:.01em; color:var(--ng-accent); /* 4.92:1 on mist */ } @media (any-hover:hover){ .ng-v2 .ng-cozidx__row:hover .ng-cozidx__q{ color:var(--ng-accent); } .ng-v2 .ng-cozidx__row:hover .ng-arrow{ transform:translate3d(4px,0,0); } } .ng-v2 .ng-cozidx__note{ margin:16px 0 0; padding-top:14px; border-top:1px solid var(--ng-hairline); font-size:14px; line-height:1.55; color:var(--ng-muted); /* 5.42:1 on mist */ } /* ========================================================================== 2. THE SEVEN SOLUTION CARDS ========================================================================== */ /* scroll-margin, not scroll-padding on the root: the theme header is sticky at ~90px desktop / ~70px mobile, and without this every router row lands its card under the bar. Same measured values as the sectors hub. */ .ng-v2 .ng-cozlist__cell{ scroll-margin-top:104px; } @media (max-width:1364px){ .ng-v2 .ng-cozlist__cell{ scroll-margin-top:84px; } } .ng-v2 .ng-cozlist__cell{ padding:0; } /* see the note in §1 */ /* :target — the router row that brought you here should show you where you landed. An accent hairline, and nothing else; a permanent highlight on a URL fragment survives a back-navigation and reads as a selection the visitor cannot clear. */ .ng-v2 .ng-cozlist__cell:target .ng-card{ border-color:var(--ng-accent); } /* THE WIDE FIRST CARD. Seven cards in a 3-up grid is 3+3+1, and a lone card in the last row reads as a hole rather than as the end of a list. Giving the first card two slots makes it 3/3/2, and the sectors build already verified that a 2-of-3 final row reads as an ending. The alternative — a 2-up grid — was rejected: seven is odd either way (2/2/2/1) and 2-up wastes the 1120px container on cards that are only ~200 words each. The editorial half of the decision is in 20-cozumler.html: Yer ve Bölge Seçimi is the most linked-to child on the site (11 inbound vs 2–9), is first in the client's own order, and is the only child publishing BOTH a six-item analysis list and a four-step method — which is what fills the extra width. Scoped to >=620 deliberately. Below that .ng-grid is a single column, and `span 2` there would create an implicit second column and take the page wider than the viewport — a horizontal-overflow bug that a desktop check never sees. */ @media (min-width:620px){ .ng-v2 .ng-cozlist__cell--wide{ grid-column:span 2; } } /* THE OUTPUT LINE — the one element that makes this hub's card different from the sectors hub's, and the answer to "what do I actually get". Wash-tinted block rather than a plain ink paragraph: on a card that already carries a title, a body and up to seven pills, an unmarked sentence is just more grey. The wash is the same 8%-accent tint as .ng-card__icon, so the card has two accent anchors and no new colour. The alternative, a hairline rule with a tracked label above it, is what .ng-coz__meta already does two elements later — two identical separators on one card flattens both. */ .ng-v2 .ng-coz__out{ display:flex; flex-direction:column; gap:5px; margin:14px 0 0; padding:11px 13px; background:var(--ng-accent-wash); border-radius:var(--ng-radius-sm); } .ng-v2 .ng-coz__outlabel{ font-family:var(--ng-font-label); font-weight:600; /* 12px is allowed here: letter-spacing .1em is over the 0.08em that buys the tracked-label exception, and the string is authored ALREADY UPPERCASE — "ÇIKTI" through a text-transform would still be "ÇIKTI", but "GİRDİ" in §3 would come out "GIRDI", so no label in this file is transformed. */ font-size:12px; line-height:1.3; letter-spacing:.1em; text-transform:none; color:var(--ng-accent); /* 4.87:1 on the wash — verified in ng-foundation.css §2's contrast table */ } .ng-v2 .ng-coz__outval{ font-size:15px; line-height:1.5; color:var(--ng-ink); /* ink, not muted: this is the card's proposition, and it is the only line on the card that outranks the title */ } /* SLACK INSIDE THE SHORT CARDS — measured, considered, and deliberately left. The deliverable lists run 3 to 7 items, so in the last row "Veri Servisleri" (4 pills) sits beside "Dijital Harita Servisleri" (7) and, because .ng-card is height:100% and .ng-card__link is pinned by margin-top:auto, carries about 180px of white between its pills and its link at 1440. Two fixes were built and rejected: - moving margin-top:auto onto .ng-coz__meta, so the gap opens ABOVE the hairline instead of below the pills. It only relocates the hole, and it makes the rule float in the middle of the card, which reads worse. - align-items:start on the grid, so cards are not stretched. The hole moves outside the card, and a row of three cards with ragged bottoms loses the one thing that makes a seven-card grid scannable. Equal-height cards with a bottom-pinned link is the idiom the sectors hub already ships and it was verified there in a screenshot. The honest fix is more content on the short children, which belongs on those pages, not here. ng-page-check does not flag it: it is inside a card, not a page band. */ /* The count label and the client's own list. Same idiom as the sectors card: the number differs per card (3,4,4,4,4,6,7), so the small label carries information instead of being the seventh repetition of one word. The hairline above it separates the card's prose half from its data half. */ .ng-v2 .ng-coz__meta{ margin-top:20px; padding-top:16px; border-top:1px solid var(--ng-hairline); } .ng-v2 .ng-coz__values{ margin-top:10px; } /* The wide card's two inner columns: deliverables on the left, method on the right. Single column until 900 — at 620–899 the wide card is the full width of a 2-up grid (~560px), and two 250px columns there would break "Kira Maliyeti ve Ticari Sürdürülebilirlik" across three lines. */ .ng-v2 .ng-coz__cols{ display:grid; grid-template-columns:minmax(0,1fr); gap:20px; margin-top:20px; } @media (min-width:900px){ .ng-v2 .ng-coz__cols{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); column-gap:28px; } } /* The columns carry the top margin; their own metas must not add a second. */ .ng-v2 .ng-coz__cols .ng-coz__meta{ margin-top:0; } /* The four method steps. Numbered with a counter on ::after, NOT ::before: ng-components.css §10 kills `body.ng-v2 ol > li::before` outright to stop the theme's fontello chevron, so a counter written the ordinary way renders nothing at all. Same reason ng-shared.css draws its .ng-list bullet on ::after. */ .ng-v2 .ng-coz__steps{ counter-reset:ng-step; list-style:none; margin:10px 0 0; padding:0; } .ng-v2 .ng-coz__steps > li{ position:relative; counter-increment:ng-step; padding:0 0 0 28px; margin-top:9px; font-size:15px; line-height:1.5; color:var(--ng-muted); /* 6.21:1 on white */ } .ng-v2 .ng-coz__steps > li:first-child{ margin-top:0; } .ng-v2 .ng-coz__steps > li::after{ content:counter(ng-step); position:absolute; left:0; top:.05em; display:flex; align-items:center; justify-content:center; width:19px; height:19px; border-radius:var(--ng-radius-pill); background:var(--ng-accent-wash); color:var(--ng-accent); font-family:var(--ng-font-label); font-weight:600; font-size:12px; line-height:1; letter-spacing:.02em; } /* ========================================================================== 3. THE THREE STAGES — sunken band ========================================================================== */ .ng-v2 .ng-akis__flow{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:minmax(0,1fr); /* 34px of row gap rather than the grid's usual 18: the connector glyph lives in the gap, and at 18px it would touch both panels. */ gap:34px; } .ng-v2 .ng-akis__cell{ position:relative; min-width:0; padding:0; } @media (min-width:960px){ .ng-v2 .ng-akis__flow{ grid-template-columns:repeat(3,minmax(0,1fr)); column-gap:34px; } } /* THE CONNECTOR. Three panels side by side are a grid; three panels with an arrow between them are a sequence, which is the entire claim of this section. It is a pseudo-element on the cell, so it costs no markup and it is correctly invisible to a screen reader — the reading order and the "AŞAMA 01/02/03" labels already carry the sequence in text. Rotates with the layout: right-pointing while the panels are in a row, down-pointing once they stack. */ .ng-v2 .ng-akis__cell:not(:last-child)::after{ content:'\2193'; /* ↓ */ position:absolute; left:50%; bottom:-30px; transform:translateX(-50%); font-size:20px; line-height:1; color:var(--ng-accent); } @media (min-width:960px){ .ng-v2 .ng-akis__cell:not(:last-child)::after{ content:'\2192'; /* → */ left:auto; right:-25px; bottom:auto; top:50%; transform:translateY(-50%); } } /* The panels are .ng-card — the raised role, white on mist — so they inherit the card's surface, radius, shadow and reveal. They are NOT links: every solution named inside them is already a link 400px up the page, and seven more anchors with the same seven labels is precisely the repeated-link-text defect this redesign exists to remove. */ .ng-v2 .ng-akis__stage{ height:100%; } .ng-v2 .ng-akis__step{ color:var(--ng-accent); } /* GİRDİ / ÇIKTI. A 64px label column keeps the two values on a shared left edge, which is what makes the three panels comparable at a glance — the whole point of showing them side by side. */ .ng-v2 .ng-akis__io{ display:grid; grid-template-columns:64px minmax(0,1fr); gap:10px; align-items:baseline; margin:12px 0 0; padding-top:12px; border-top:1px solid var(--ng-hairline); } .ng-v2 .ng-akis__iolabel{ font-family:var(--ng-font-label); font-weight:600; font-size:12px; line-height:1.3; letter-spacing:.1em; text-transform:none; /* "GİRDİ" uppercased by CSS would print "GIRDI" — the Turkish dotted-I trap */ color:var(--ng-muted); } .ng-v2 .ng-akis__io + .ng-akis__io .ng-akis__iolabel{ color:var(--ng-accent); } .ng-v2 .ng-akis__ioval{ font-size:15px; line-height:1.55; color:var(--ng-ink); } /* margin-top:auto pins the solution list to the bottom of the panel, so three panels with different body lengths still end on one baseline. */ .ng-v2 .ng-akis__label{ margin-top:auto; padding-top:20px; } .ng-v2 .ng-akis__names{ margin-top:10px; } /* Mist pills on a white panel on a mist band. Left as ng-shared's default rather than --onmist: the contrast that matters is pill-vs-panel, and the pill sits on the white panel, not on the band. Recorded because it reads wrong in the markup and is right in the render — the same finding the sectors hub logged for .ng-fam__secs. */ .ng-v2 .ng-akis__note{ margin-top:30px; max-width:84ch; } .ng-v2 .ng-akis__links{ margin-top:16px; } /* ========================================================================== 4. RESPONSIVE The card grid is ng-shared's .ng-grid--3: 1 column below 620, 2 to 960, 3 above; with the first card spanning two slots that is 7 / 4 rows / 3 rows ending 2-of-3. Checked in a screenshot at both ends rather than assumed. ========================================================================== */ @media (max-width:767px){ .ng-v2 .ng-cozidx{ padding:6px 16px 18px; } /* Reading floor: everything below is a sentence, not a label. */ .ng-v2 .ng-cozidx__q{ font-size:16px; } .ng-v2 .ng-cozidx__name{ font-size:15px; } .ng-v2 .ng-cozidx__note, .ng-v2 .ng-cozmh__note{ font-size:15px; } .ng-v2 .ng-coz__outval, .ng-v2 .ng-coz__steps > li, .ng-v2 .ng-akis__ioval{ font-size:16px; line-height:1.55; } .ng-v2 .ng-coz__meta{ margin-top:18px; padding-top:14px; } .ng-v2 .ng-coz__out{ padding:12px 14px; } /* The 64px label column costs a quarter of a 390px screen and squeezes "Müşteri listeleri, şube adresleri, saha kayıtları" to four lines. Stacked, the label sits over its value and the value takes the full measure. */ .ng-v2 .ng-akis__io{ grid-template-columns:minmax(0,1fr); gap:4px; } } /* ========================================================================== 5. REDUCED MOTION ng-shared.css §10 already flattens .ng-card and .ng-arrow under a reduce preference — including cancelling ng-components.css's !important marker transform, which would otherwise drag every card up and left by half its own size. The only motion this page adds beyond those is the router row's arrow nudge, which is the same .ng-arrow and is therefore already covered. The stage connector is a static glyph. Nothing further to switch off; left as a note so the next person does not go looking for a missing rule. ========================================================================== */