/* ==========================================================================
NEXT GEO — components. Section 2: hero.
Loaded after ng-foundation.css, scoped to .ng-v2.
Hero design decisions, with sources:
- NO eyebrow. Four of six references (felt, radar, mapbox, linear, capella)
open cold on the h1; capella's own JS guards `if (label)` because there
isn't one. So there is deliberately no .ng-eyebrow in this section.
- NO live map. mapbox — a map company — ships a text-only hero and gives the
live map its own section further down. We use a static raster with real
DOM overlays (atlas.co's highest-leverage borrowable).
- The product is DOGFOODED as a DOM replica of the application chrome
(linear.app): title bar, tab strip, canvas, readout. Nothing here is a
screenshot except the basemap itself, so it is crisp at any DPR.
- The tab strip is atlas.co's use-case switcher, moved from decoration to
function: three tabs, CSS-only (:checked ~ sibling), so the visitor
self-selects inside the first viewport without a line of JS.
- The highlight span uses --ng-accent-display (#E91E8C), legal only at
>=24px. The h1 never falls below 41px. Never reuse it smaller.
========================================================================== */
/* --- 0. theme wrapper ------------------------------------------------------
Neuros wraps page content in `.content` with a 20px side margin and caps
`.content-wrapper` at 1200px. At 390px that left the hero 350px of box and
our own 24px container padding took it to 302px of usable width — which is
the single biggest reason the mobile hero read as "degraded desktop" rather
than designed. Releasing it gives the band full-bleed ground and the hero
342px of content. Scoped to body.ng-v2 (0,2,0) so the live site is
untouched; --ng-container still governs the real measure. */
body.ng-v2 .content-wrapper{ max-width:none; }
body.ng-v2 .content{ margin-left:0; margin-right:0; width:100%; }
/* The theme also puts a flat 90px margin above AND below .content-wrapper.
Measured at 390px it was 90 of the 193px sitting between the header and the
h1 — pure dead ground, and the single largest of the page's blank bands.
Every one of our sections carries its own vertical rhythm, so both go. */
body.ng-v2 .content-wrapper{ margin-top:0; margin-bottom:0; }
/* And the big one, found by walking the box tree rather than the stylesheet:
.elementor-section + .elementor-section { margin-top:80px }
Neuros adds 80px between EVERY adjacent Elementor section. With 12 sections
that is 880px of dead ground stacked on top of the padding each of our
sections already carries — the largest single contributor to the page's
26.1% blank bands. Worse, the first one collapsed straight out through
.content-wrapper and .body-container, so it materialised as an unexplained
80px hole between the header and the hero that no element accounted for.
Our sections own their vertical rhythm; this rule does not get a vote.
body.ng-v2 … is (0,3,0) against the theme's (0,2,0). */
body.ng-v2 .elementor-section + .elementor-section{ margin-top:0; }
/* --- 1. band -------------------------------------------------------------- */
.ng-v2 .ng-hero{
padding-block:28px 64px;
background:var(--ng-ground);
overflow:clip; /* not `contain` — that clipped the mega-menu */
}
@media (min-width:1024px){
.ng-v2 .ng-hero{ padding-block:40px 64px; }
}
/* Named areas rather than source order: on a phone the product panel has to
come straight after the CTAs (atlas.co puts its switcher + visual there),
with the proof strip closing the band; on desktop the same three elements
become a 2x2 where the panel spans both rows. One grid, no duplicated DOM. */
.ng-v2 .ng-hero__grid{
display:grid;
grid-template-columns:minmax(0,1fr);
grid-template-areas:"copy" "panel" "proof";
gap:28px;
align-items:start;
}
@media (min-width:1024px){
.ng-v2 .ng-hero__grid{
grid-template-columns:minmax(0,46fr) minmax(0,54fr);
grid-template-areas:"copy panel" "proof panel";
grid-template-rows:auto auto;
/* The panel spans both rows and is the taller child, so the slack lands in
the row track. align-content:center keeps copy+proof together as one
optical block instead of stranding the proof strip at the bottom with a
hole above it. */
align-content:center;
column-gap:56px; row-gap:32px;
}
}
.ng-v2 .ng-hero__copy { grid-area:copy; }
.ng-v2 .ng-hero__panel{ grid-area:panel; align-self:center; }
.ng-v2 .ng-hero__proof{ grid-area:proof; }
@media (min-width:1024px){
/* The panel spans both rows, so its height is shared out across the two row
tracks and align-content has no free space left to work with. Pinning the
copy to the BOTTOM of row 1 and the proof to the TOP of row 2 makes the
pair meet at the row boundary; the slack then falls above and below them,
which is what optically centres the left column against the panel. */
.ng-v2 .ng-hero__copy { align-self:end; }
.ng-v2 .ng-hero__proof{ align-self:start; }
}
/* --- 2. copy ---------------------------------------------------------------
capellaspace runs its display face on a clamp() and lets the viewport do the
work; the old fixed 38px mobile step was the "shrunken desktop" tell. 41.6px
floor at 390 keeps the two accent words at display size and the highlight
span legal. */
.ng-v2 .ng-hero__title{
font-size:clamp(2.6rem, 8.6vw, 3.75rem);
line-height:1.04;
letter-spacing:-0.03em;
text-wrap:balance;
}
.ng-v2 .ng-hero__hl{ color:var(--ng-accent-display); } /* legal: >=41px */
.ng-v2 .ng-hero__lede{
margin-top:16px;
font-size:clamp(1.0625rem, 1.25vw, 1.1875rem);
line-height:1.55;
color:var(--ng-muted);
max-width:46ch;
}
/* Two CTAs, one primary. They are now both pills (see below) but they are not
equal: solid magenta versus white-with-a-hairline is the same hierarchy the
text link gave, in the client's own idiom. gap tightens to 14px because two
pills 22px apart read as unrelated. */
.ng-v2 .ng-hero__ctas{
margin-top:26px;
display:flex; flex-wrap:wrap; align-items:center;
gap:12px 14px;
}
/* Secondary CTA. Was an underlined text link; yersecim pairs its magenta pill
with a white pill carrying a navy hairline, and two pills side by side read
as one decision with two answers rather than a button plus an afterthought.
Same 48px height as .ng-btn: 15px padding + 16px/1.15 label. */
.ng-v2 .ng-hero__link{
display:inline-flex; align-items:center; justify-content:center; gap:.45em;
font-family:var(--ng-font-display); font-weight:600; font-size:16px;
line-height:1.15; color:var(--ng-ink); text-decoration:none;
padding:15px 26px;
background:var(--ng-surface);
border-radius:var(--ng-radius-pill);
box-shadow:inset 0 0 0 1.5px var(--ng-border-strong);
transition:color .18s cubic-bezier(.4,0,.2,1),
box-shadow .18s cubic-bezier(.4,0,.2,1);
}
.ng-v2 .ng-hero__link:hover{
color:var(--ng-accent);
box-shadow:inset 0 0 0 1.5px var(--ng-accent);
}
.ng-v2 .ng-hero__link:focus-visible{ border-radius:var(--ng-radius-pill); }
.ng-v2 .ng-hero__arw{ transition:transform .18s cubic-bezier(.4,0,.2,1); }
.ng-v2 .ng-hero__link:hover .ng-hero__arw{ transform:translateX(3px); }
/* Proof strip. Fills the bottom of the copy column, which is where the old
hero's blank band was, and every value traces to real source material:
7 products, 14 sectors, Geoawesome Global Top 100 Geospatial Companies 2026.
Labels are authored ALREADY UPPERCASE — no text-transform anywhere. */
.ng-v2 .ng-hero__proof{
margin:0; padding:18px 0 0;
list-style:none;
border-top:1px solid var(--ng-hairline);
display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px;
}
.ng-v2 .ng-hero__pv{
display:block;
font-family:var(--ng-font-display); font-weight:600;
font-size:clamp(1.25rem, 4.6vw, 1.5rem); line-height:1.1;
letter-spacing:-0.02em; color:var(--ng-ink);
}
.ng-v2 .ng-hero__pl{
display:block; margin-top:5px;
font-family:var(--ng-font-label); font-weight:500;
font-size:10.5px; line-height:1.35; letter-spacing:.08em;
color:var(--ng-muted);
text-transform:none;
}
/* --- 3. the product panel -------------------------------------------------- */
.ng-v2 .ng-hero__panel{
position:relative;
background:var(--ng-surface);
border:1px solid var(--ng-hairline);
border-radius:var(--ng-radius);
overflow:hidden;
box-shadow:0 1px 2px rgba(27,31,94,.05),
0 28px 56px -28px rgba(27,31,94,.38);
}
/* Application title bar. */
.ng-v2 .ng-panel__bar{
display:flex; align-items:center; justify-content:space-between; gap:10px;
padding:11px 14px;
border-bottom:1px solid var(--ng-hairline);
}
.ng-v2 .ng-panel__app{
font-family:var(--ng-font-label); font-weight:500;
font-size:10.5px; line-height:1.15; letter-spacing:.1em;
color:var(--ng-muted); text-transform:none;
overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
/* Honest labelling: the figures in this panel are sample data, and the chip
says so in the first viewport rather than in a footnote. */
.ng-v2 .ng-panel__tag{
flex:none;
font-family:var(--ng-font-label); font-weight:500;
font-size:10px; line-height:1.15; letter-spacing:.08em;
color:var(--ng-accent); /* on the wash below = 4.87:1 */
background:var(--ng-accent-wash);
border-radius:var(--ng-radius-pill); padding:4px 9px;
text-transform:none;
}
/* --- 4. CSS-only tab strip -------------------------------------------------
Radios are kept in the DOM (not display:none) so they stay focusable and
arrow-key operable; they are 1px and clipped, and the focus ring is drawn on
the associated label through the sibling combinator. */
.ng-v2 .ng-tabin{
position:absolute; width:1px; height:1px;
margin:0; padding:0; border:0; opacity:0;
pointer-events:none; appearance:none; -webkit-appearance:none;
}
.ng-v2 .ng-tabs{
display:grid; grid-template-columns:repeat(auto-fit,minmax(0,1fr)); gap:4px;
padding:6px;
background:var(--ng-surface-sunken);
}
.ng-v2 .ng-tab{
display:block; margin:0;
padding:9px 4px;
border-radius:var(--ng-radius-pill);
font-family:var(--ng-font-display); font-weight:500;
font-size:clamp(11.5px, 3.1vw, 13px); line-height:1.2;
letter-spacing:-0.01em;
text-align:center; white-space:nowrap;
overflow:hidden; text-overflow:ellipsis;
color:var(--ng-muted); cursor:pointer;
text-transform:none;
transition:background-color .2s cubic-bezier(.4,0,.2,1),
color .2s cubic-bezier(.4,0,.2,1);
}
.ng-v2 .ng-tab:hover{ color:var(--ng-ink); }
.ng-v2 #ng-tab-1:checked ~ .ng-tabs .ng-tab[for="ng-tab-1"],
.ng-v2 #ng-tab-2:checked ~ .ng-tabs .ng-tab[for="ng-tab-2"],
.ng-v2 #ng-tab-3:checked ~ .ng-tabs .ng-tab[for="ng-tab-3"]{
background:var(--ng-surface);
color:var(--ng-ink);
box-shadow:0 1px 2px rgba(27,31,94,.10);
}
.ng-v2 #ng-tab-1:focus-visible ~ .ng-tabs .ng-tab[for="ng-tab-1"],
.ng-v2 #ng-tab-2:focus-visible ~ .ng-tabs .ng-tab[for="ng-tab-2"],
.ng-v2 #ng-tab-3:focus-visible ~ .ng-tabs .ng-tab[for="ng-tab-3"]{
outline:3px solid var(--ng-focus-outer); outline-offset:2px;
}
/* --- 5. map canvas ---------------------------------------------------------
aspect-ratio reserves the box before the raster arrives; the ![]()
also
carries intrinsic width/height. Two independent reservations, CLS 0.
The crop is deliberately taller on phones — a 1.9:1 letterbox at 342px wide
is 180px of map, which is what made the old mobile hero feel empty. */
.ng-v2 .ng-stage{
position:relative;
aspect-ratio:16/11;
background:var(--ng-surface-sunken);
overflow:hidden;
/* object-fit:cover crops the 1.897:1 raster horizontally only, so a marker's
X has to be re-solved per crop: container% = (image% - inset) / visible.
16/11 shows 76.7% of the width from 11.7%; the desktop crop shows all of
it. Y is never cropped and is therefore breakpoint-independent. */
/* Derived, not tuned. hero.py projects each district's real coordinate into
the render and prints its pixel position; these are those positions as a
share of the 1400x738 raster:
Kadıköy 29.0245631,40.9912955 -> 25.26% / 41.89% (--mk-a)
Ataşehir 29.1135187,40.9929379 -> 74.78% / 39.59% (--mk-b)
Göztepe 29.0626318,40.9792053 -> 46.45% / 58.81% (--mk-c)
Coordinates are OSM Nominatim's, not remembered. The previous values were
hand-nudged against a fabricated basemap and put the Kadıköy pill over
Erenköy. If the raster is ever re-rendered at another view, re-run
`python3 /root/ng-map/hero.py --mode base` and copy the numbers it prints.
X is re-solved per crop: container% = (image% - inset) / visible. Y is
never cropped by object-fit:cover here, so it is breakpoint-independent. */
--mk-a:17.73%; --mk-b:82.32%; --mk-c:45.37%;
--mk-ay:41.89%; --mk-by:39.59%; --mk-cy:58.81%;
}
@media (min-width:640px) and (max-width:1023px){
/* One-column tablet: the panel is the full measure, so a 16/11 canvas would
be ~500px of map. 16/10 keeps it generous without dominating the fold. */
.ng-v2 .ng-stage{ aspect-ratio:16/10; --mk-a:20.67%; --mk-b:79.38%; --mk-c:45.79%; }
}
@media (min-width:1024px){
.ng-v2 .ng-stage{
aspect-ratio:1400/738; /* the raster's own ratio: no crop at all */
--mk-a:25.26%; --mk-b:74.78%; --mk-c:46.45%;
}
}
.ng-v2 .ng-stage__img{
position:absolute; inset:0;
display:block; width:100%; height:100%;
object-fit:cover; object-position:50% 50%;
}
/* Analysis layers. Only one is visible per tab; all are decorative. */
.ng-v2 .ng-layers,
.ng-v2 .ng-iso{
position:absolute; opacity:0;
transition:opacity .4s cubic-bezier(.4,0,.2,1);
pointer-events:none;
}
.ng-v2 .ng-layers{
inset:0;
background-image:
repeating-linear-gradient(0deg, rgba(44,45,130,.20) 0 1px, transparent 1px 38px),
repeating-linear-gradient(90deg, rgba(44,45,130,.20) 0 1px, transparent 1px 38px);
}
/* The catchment. It used to be a CSS circle centred on the primary marker, and
a drive-time catchment is not a circle — it reaches far along the D100 and
barely at all across the water. This is the real 5/10/15 minute Valhalla
isochrone rendered as a transparent overlay. object-fit and object-position
are the basemap's exactly, so the two rasters stay registered under every
breakpoint's crop; anything else and the bands would slide off the streets
they were computed from. */
.ng-v2 .ng-iso{
inset:0;
display:block; width:100%; height:100%;
object-fit:cover; object-position:50% 50%;
}
.ng-v2 #ng-tab-2:checked ~ .ng-stage .ng-iso,
.ng-v2 #ng-tab-3:checked ~ .ng-stage .ng-layers{ opacity:1; }
/* --- 6. markers ------------------------------------------------------------
DOM, not pixels: the district names and scores are the same strings as the
ranked list below, so Polylang translates them and the client edits them
without a design round-trip (atlas.co). */
.ng-v2 .ng-mk{
position:absolute;
--tx:-50%; /* which part of the pill sits on the point */
transform:translate(var(--tx),-50%);
display:flex; align-items:center; gap:6px;
transition:opacity .4s cubic-bezier(.4,0,.2,1);
}
/* --tx anchors the DOT on the coordinate, not the pill. Markers A and C are
authored dot-then-label, so a plain -50% centres the whole pill and leaves the
dot half a pill-width to the LEFT of the point it claims to mark — about 40px
on a desktop stage, which put the Kadıköy dot off the Kadıköy hotspot even
with the projection maths correct. Offset by half the dot instead: A's dot is
15px, C's is 11px. */
.ng-v2 .ng-mk--a{ left:var(--mk-a); top:var(--mk-ay); --tx:-7.5px; }
/* Marker B's label is authored BEFORE its dot, and --tx anchors the DOT rather
than the pill's centre, so the pill grows leftwards and can never be clipped
by the right edge of the canvas. */
.ng-v2 .ng-mk--b{ left:var(--mk-b); top:var(--mk-by); --tx:calc(-100% + 6px); }
.ng-v2 .ng-mk--c{ left:var(--mk-c); top:var(--mk-cy); --tx:-5.5px; }
.ng-v2 .ng-mk__dot{
position:relative; flex:none;
width:11px; height:11px; border-radius:50%;
background:var(--ng-indigo);
box-shadow:0 0 0 3px var(--ng-surface), 0 2px 6px rgba(27,31,94,.45);
}
.ng-v2 .ng-mk--a .ng-mk__dot{ width:15px; height:15px; background:var(--ng-accent); }
.ng-v2 .ng-mk__lbl{
display:inline-flex; align-items:baseline; gap:6px;
white-space:nowrap;
font-family:var(--ng-font-display); font-weight:600;
font-size:12px; line-height:1.25;
color:var(--ng-ink);
background:rgba(255,255,255,.94);
-webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
border:1px solid var(--ng-hairline);
border-radius:var(--ng-radius-pill); padding:4px 8px;
box-shadow:0 4px 14px -6px rgba(27,31,94,.45);
}
.ng-v2 .ng-mk__lbl b{
font-family:var(--ng-font-label); font-weight:500;
font-size:11px; color:var(--ng-muted);
}
.ng-v2 .ng-mk--a .ng-mk__lbl b{ color:var(--ng-accent); }
/* Secondary markers step back while the catchment or the layer grid is the
subject, so the canvas never reads as three competing things at once. */
.ng-v2 #ng-tab-2:checked ~ .ng-stage .ng-mk--b,
.ng-v2 #ng-tab-2:checked ~ .ng-stage .ng-mk--c,
.ng-v2 #ng-tab-3:checked ~ .ng-stage .ng-mk--b,
.ng-v2 #ng-tab-3:checked ~ .ng-stage .ng-mk--c{ opacity:0; }
/* atlas.co's pulseBreath: two sonar rings on ONE shared 3s clock, offset .8s,
so an outward ripple comes from two pseudo-elements and no JS. */
.ng-v2 .ng-mk--a .ng-mk__dot::before,
.ng-v2 .ng-mk--a .ng-mk__dot::after{
content:""; position:absolute; inset:0;
border-radius:50%;
border:2px solid var(--ng-accent);
animation:ngPulseBreath 3s cubic-bezier(.4,0,.2,1) infinite;
}
.ng-v2 .ng-mk--a .ng-mk__dot::after{ animation-delay:.8s; }
@keyframes ngPulseBreath{
0% { transform:scale(1); opacity:.55; }
70% { opacity:0; }
100% { transform:scale(3.4); opacity:0; }
}
/* Licence line. The basemap is Carto's, the streets and the commercial points
are OpenStreetMap's and the population is Kontur's, and all three require
attribution where the imagery appears. It sits inside the panel because that
is what it is crediting — not the page. */
.ng-v2 .ng-panel__credit{
margin:0;
padding:0 15px 12px;
background:var(--ng-surface);
font-family:var(--ng-font-label); font-weight:500;
font-size:10px; line-height:1.4; letter-spacing:.02em;
color:var(--ng-muted);
}
/* --- 7. readout ------------------------------------------------------------
All three views occupy the SAME grid cell, so the panel is always as tall as
the tallest view and switching tabs cannot move a single pixel below it. */
.ng-v2 .ng-readout{
display:grid;
padding:15px 15px 17px;
border-top:1px solid var(--ng-hairline);
background:var(--ng-surface);
}
.ng-v2 .ng-view{
grid-area:1 / 1;
opacity:0; visibility:hidden;
transition:opacity .3s cubic-bezier(.4,0,.2,1), visibility 0s linear .3s;
}
.ng-v2 #ng-tab-1:checked ~ .ng-readout .ng-view--1,
.ng-v2 #ng-tab-2:checked ~ .ng-readout .ng-view--2,
.ng-v2 #ng-tab-3:checked ~ .ng-readout .ng-view--3{
opacity:1; visibility:visible;
transition:opacity .3s cubic-bezier(.4,0,.2,1), visibility 0s;
}
.ng-v2 .ng-view__k{
margin:0 0 11px;
font-family:var(--ng-font-label); font-weight:500;
font-size:10.5px; line-height:1.15; letter-spacing:.1em;
color:var(--ng-muted);
text-transform:none; /* strings authored pre-uppercased */
}
.ng-v2 .ng-view__note{
margin:9px 0 0;
font-size:13px; line-height:1.45; color:var(--ng-muted);
}
/* Ranked candidates. The bar widths are inline `style="width:87%"` — the same
move atlas.co uses for its priority bars — so the score and its bar can
never drift apart in a future edit. */
.ng-v2 .ng-rank{ list-style:none; margin:0; padding:0; display:grid; gap:9px; }
.ng-v2 .ng-rank li{
display:grid;
grid-template-columns:auto minmax(0,1fr) 34% auto;
align-items:center; gap:10px;
}
/* 11px, not 10.5px. The contract sets 11px as the floor for app-replica chrome
and this is the only place that went under it — an odd half-pixel value that
nothing else on the page uses. The 01/02/03 numerals are the smallest thing
in the hero either way; going from 10.5 to 11 changes the ranked list's
height by nothing measurable and stops the page contradicting its own rule. */
.ng-v2 .ng-rank__n{
font-family:var(--ng-font-label); font-weight:500;
font-size:11px; color:var(--ng-muted);
}
.ng-v2 .ng-rank__name{
font-family:var(--ng-font-display); font-weight:500;
font-size:14px; line-height:1.3; color:var(--ng-ink);
overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.ng-v2 .ng-rank__bar{
height:6px; border-radius:3px;
background:var(--ng-surface-sunken);
overflow:hidden;
}
.ng-v2 .ng-rank__bar i{
display:block; height:100%; border-radius:3px;
background:var(--ng-indigo);
}
.ng-v2 .ng-rank .is-top .ng-rank__bar i{ background:var(--ng-accent); }
.ng-v2 .ng-rank b{
font-family:var(--ng-font-label); font-weight:500;
font-size:13px; color:var(--ng-ink);
font-variant-numeric:tabular-nums;
}
.ng-v2 .ng-rank .is-top b{ color:var(--ng-accent); }
/* Catchment metric. */
.ng-v2 .ng-metric{
margin:0;
display:flex; align-items:baseline; gap:8px;
font-family:var(--ng-font-display); font-weight:600;
letter-spacing:-0.02em; color:var(--ng-ink);
}
.ng-v2 .ng-metric b{
font-weight:600;
font-size:clamp(2rem, 7vw, 2.375rem); line-height:1.05;
}
.ng-v2 .ng-metric small{
font-family:var(--ng-font-body); font-weight:400;
font-size:15px; color:var(--ng-muted);
}
/* Source chips — the local-data moat, named, in the first viewport. */
.ng-v2 .ng-chips{
list-style:none; margin:0; padding:0;
display:flex; flex-wrap:wrap; gap:6px;
}
.ng-v2 .ng-chips li{
font-family:var(--ng-font-label); font-weight:500;
font-size:11px; line-height:1.15; letter-spacing:.04em;
color:var(--ng-ink);
background:var(--ng-surface-sunken);
border-radius:var(--ng-radius-pill); padding:7px 9px;
}
/* --- 8. motion -------------------------------------------------------------
Hidden states are scoped to html[data-ng-motion="on"], which the blocking
inline snippet in the mu-plugin sets before first paint. If JS fails or the
user prefers reduced motion the attribute is absent and every element below
is simply visible — no rescue rule required, no blank page.
The panel wrapper is deliberately NOT an .ng-anim/.ng-card: it contains the
LCP ![]()
, which must paint immediately at full opacity. Only the markers
inside it animate. */
html[data-ng-motion="on"] .ng-v2 .ng-anim{
opacity:0;
filter:blur(10px);
transform:translateY(20px);
}
html[data-ng-motion="on"] .ng-v2 .ng-anim.is-in{
opacity:1;
filter:blur(0);
transform:none;
transition:opacity .9s cubic-bezier(.25,.1,.25,1),
filter .9s cubic-bezier(.25,.1,.25,1),
transform .9s cubic-bezier(.25,.1,.25,1);
}
html[data-ng-motion="on"] .ng-v2 .ng-anim--d1.is-in{ transition-delay:.10s; }
html[data-ng-motion="on"] .ng-v2 .ng-anim--d2.is-in{ transition-delay:.25s; }
html[data-ng-motion="on"] .ng-v2 .ng-anim--d3.is-in{ transition-delay:.40s; }
/* Markers spring in with a slight overshoot, staggered, keeping the
translate(-50%,-50%) that positions them. */
html[data-ng-motion="on"] .ng-v2 .ng-card{
opacity:0; transform:translate(var(--tx,-50%),-50%) scale(.86);
}
html[data-ng-motion="on"] .ng-v2 .ng-card.is-in{
opacity:1; transform:translate(var(--tx,-50%),-50%) scale(1);
transition:opacity .5s ease, transform .55s cubic-bezier(.34,1.56,.64,1);
}
html[data-ng-motion="on"] .ng-v2 .ng-mk--b.is-in{ transition-delay:.12s; }
html[data-ng-motion="on"] .ng-v2 .ng-mk--c.is-in{ transition-delay:.22s; }
@media (prefers-reduced-motion:reduce){
.ng-v2 .ng-anim{
opacity:1 !important; filter:none !important;
transform:none !important; transition:none !important;
}
.ng-v2 .ng-card{
opacity:1 !important;
transform:translate(var(--tx,-50%),-50%) !important;
transition:none !important;
}
.ng-v2 .ng-mk--a .ng-mk__dot::before,
.ng-v2 .ng-mk--a .ng-mk__dot::after{ animation:none; opacity:0; }
}
/* --- 9. theme chrome suppression -------------------------------------------
Neuros injects a full-width page-title banner with a stock 3D-city render
above the content. On the v2 page it consumed the entire first viewport,
pushed the real hero below the fold, and its .page-title was a SECOND h1.
It is now switched off at source with the theme's own per-page metabox
option (post meta page_title_status = off), so the markup is gone from the
DOM rather than merely hidden. This rule stays as belt-and-braces in case
the option is reset from the editor. */
.ng-v2 .page-title-container{ display:none !important; }
/* --- 10. theme list-marker suppression -------------------------------------
Neuros ships a bare `ul>li:before { content:'\e82d'; font-family:fontello }`
at char ~638,285 of the combined stylesheet — specificity (0,0,2), applying
to EVERY direct li of any ul on the site. Our sections use for card
grids, so a stray fontello chevron appeared at the top-left of every card.
Visible only in a screenshot — it is a pseudo-element, so it appears in no
DOM assertion, no computed style we were checking, and no console error.
body.ng-v2 ul>li::before is (0,1,3) and wins without !important.
NOTE: this now also protects the hero's ranked list and source chips. */
body.ng-v2 ul > li::before,
body.ng-v2 ol > li::before{
content:none;
display:none;
}
/* The same theme rule that drew that chevron also reserves room for it with a
left padding on the - (31.875px at 1440, 30px at 390). Killing the marker
above left the gutter behind, so both
-based card grids rendered inset
from — and 30px narrower than — the section heading directly above them:
the solutions cards and the "ürün ailesinin geri kalanı" cards sat at x=54
inside a container whose rail is x=24. Visible at every width, and in no
computed style we were checking, because we were measuring the .
Named per component rather than reset on `body.ng-v2 li`: a bare
`body.ng-v2 ul > li` is (0,1,3) and would beat OUR OWN (0,1,0) rules that
set real padding on li cards (.ng-rel__cell, .ng-cred__stat,
.ng-sektor__value, .ng-sources__item), flattening four components to fix
two. These two are the only li elements on the page with no padding of
their own. */
body.ng-v2 .ng-sol__cell,
body.ng-v2 .ng-rest__cell{
padding-left:0;
padding-right:0;
}
/* --- theme floating chrome ------------------------------------------------
Neuros ships `.body-container .footer-scroll-top` — position:fixed,
z-index:999, bottom:-100px until scroll. On the v2 page it floats over the
hero panel's caption and the product cards. None of the eight reference
sites uses a floating back-to-top; it reads as theme furniture rather than
part of the design. Hidden on this page only — the rest of the site keeps it.
(0,2,0) beats the theme's (0,2,0) by loading later, so no !important. */
.ng-v2 .footer-scroll-top{ display:none; }
/* --- theme content-wrapper width, off-centre bug --------------------------
Neuros sizes the main content column as:
.content-wrapper .content (0,2,0)
{ width:calc(100% - 40px); margin:0 20px }
.content-wrapper.content-wrapper-sidebar-position-none .content (0,3,0)
{ width:calc(100% - 40px) }
Our reset `body.ng-v2 .content{margin:0;width:100%}` is only (0,1,2). It
won on margin but LOST on width, so the 40px the theme subtracts stayed
subtracted while the 20px left margin that was meant to balance it was
removed — every section sat 20px left of centre and the whole 40px of slack
piled up on the right. Invisible in a full-page screenshot because the
section backgrounds are full-bleed; only measuring .ng-container's x against
(viewport-1240)/2 exposed it.
!important is deliberate here: matching (0,3,0) with a longer selector would
need to enumerate all three sidebar-position variants, and this is exactly
the theme-chrome suppression case where !important is the honest tool. */
body.ng-v2 .content{
width:100% !important;
max-width:none !important;
margin-left:0 !important;
margin-right:0 !important;
}
/* --- theme li gutter, generalised -----------------------------------------
Neuros puts padding-left:31.875px on list items to make room for the
fontello marker we suppress in §-list-marker above. Two grids were patched
individually earlier; measuring at 1920 found the hero proof strip had it
too — the - box started at the correct x=364 while "7 ÜRÜN" rendered at
396, so the numerals did not line up with the rule drawn above them.
We never use native markers anywhere in .ng-v2, so zero it once for all
lists rather than chasing each grid as it is noticed. */
body.ng-v2 ul > li,
body.ng-v2 ol > li{ padding-left:0; }
/* --- "loads centred, then snaps left" -------------------------------------
Neuros sets `.body-container{overflow-x:hidden}`. Max Mega Menu renders its
off-canvas panel in flow at x=1920 (320px wide) with absolutely-positioned
sub-menus reaching x=2344 — ~424px beyond the viewport, clipped but PRESENT.
overflow:hidden clips visually yet still creates a SCROLL CONTAINER, and a
scroll container can be scrolled programmatically even when no scrollbar is
offered. The moment anything inside those off-canvas panels takes focus, the
browser scrolls .body-container to bring it into view and every section
slides left, leaving the gap on the right. It cannot reproduce in a headless
screenshot because nothing ever receives focus there.
overflow:clip clips identically but creates NO scroll container, so there is
nothing to scroll. overflow-x:hidden is kept first as the fallback for
engines without clip support. */
body.ng-v2 .body-container,
body.ng-v2 .content-wrapper,
body.ng-v2 .content{
/* !important because the theme sets the SHORTHAND `overflow:hidden` on
.body-container, and a longhand at higher specificity was still losing to
it in practice. Same theme-chrome-suppression exception as elsewhere. */
overflow-x:clip !important;
overflow-clip-margin:0;
/* ...except it was NOT creating a clip container, because of a computed-value
rule that is easy to miss: when one axis is `clip` and the other is neither
`visible` nor `clip`, the `clip` axis COMPUTES TO `hidden`. The theme's
shorthand left overflow-y:hidden here, so `overflow-x:clip` was computing
back to `hidden` and .body-container stayed a scroll container — verified,
it reported `overflow-x: hidden` in getComputedStyle. Pairing it with an
explicit overflow-y:visible is what actually makes `clip` stick, and it is
also what lets §14.2's position:sticky work: a scroll container captures
sticky descendants, a clip container does not. Clipping behaviour on the
x-axis is unchanged. */
overflow-y:visible !important;
}
/* The off-canvas nav duplicate is the actual focus target that triggers the
scroll. It is inert at desktop, where the horizontal nav is already shown.
IMPORTANT: the page contains TWO elements carrying id="mega-menu-wrap-main"
— the real horizontal nav inside