/* ==========================================================================
/urunler/lokasyon-analizi-mobile/ + /en/products/location-analysis-mobile/
ONE stylesheet for the pair (--css-from copies it to the English slug).
VARIANCE PASS, 2026-08-17. Assignment from variance-plan.json:
opening A-SPLIT
dark CLOSE
sections 5 (including the masthead)
THE SILHOUETTE THIS SHEET BUILDS
10 masthead GROUND split: headline left, a PHONE right
20 app screens MIST five real screenshots as a descending flight
30 capabilities GROUND eight client headings, two facing ledgers
40 sample output MIST field record + comparison table
50 close INDIGO onboarding ladder + chips + the decision
Ground · mist · ground · mist · indigo. Every other leaf on this site is
ground · ground · mist · ground · indigo, with a thin centred slab at the
end; the alternation and the tall closing band are half of why this page
does not read as its neighbour.
WHAT WAS HERE BEFORE, so the next person can see what was traded. The page
opened with the same split every leaf had — h1 left, a mist plate carrying a
quote and two bullets right — then eight capability cards in a --grid-4, then
the sample band, then a thumbnail row of the five screenshots, then a light
method ladder, then a thin indigo CTA. Six sections, no fact different from
today's five. The owner's complaint was that clicking a link did not feel
like arriving anywhere new, and on this page they were right: it and
/urunler/lokasyon-analizi-web/ were the same drawing.
THE THREE MOVES
1. THE PLATE IS A PHONE (§1b). A-SPLIT is assigned, so the second column
stays — but this is the only product on the site that IS a phone, and the
site owns five genuine screenshots of it. A portrait 384:700 device in the
masthead is a thing no sibling can copy honestly.
2. THE SCREENS BECAME THE SPINE (§2). They were a five-up thumbnail row in
position four. They are now section two, at column width, each on its own
tread of a descending flight. A grid says "five alternatives"; a flight
says "one visit, in order", which is what they are.
3. THE CARD GRID IS GONE (§3). Eight raised cards became two facing ruled
ledgers, one per half of the visit. Same eight titles, same eight client
paragraphs, same eight inline icons.
Nothing below writes a literal colour, a radius or a font stack; nothing uses
!important. Every heading class carries the doubled-class margin defence from
PATTERNS §11, because the theme's `h?:not(:first-child){margin-top:50px}` at
(0,2,2) beats a single class and opens a 50px hole where 10px was authored.
========================================================================== */
/* ==========================================================================
1. THE MASTHEAD — A-SPLIT WITH A DEVICE
========================================================================== */
/* --- 1a. The split ratio ---------------------------------------------------
60/40 rather than ng-shared §4's 58/42. The plate no longer holds prose that
wants a measure; it holds a fixed-width device and two short lines, so the
copy column is given the difference. At 1440 that is 610px for the headline
column and 406px for the plate, and the two columns then finish within ~10px
of each other, which is what stops the mist plate from either hanging below
the proof strip or stopping short of it. */
@media (min-width:960px){
.ng-v2 .ng-lead .ng-masthead__inner{
grid-template-columns:minmax(0,60fr) minmax(0,40fr);
}
}
/* --- 1b. .ng-hand — the device plate ---------------------------------------
A MODIFIER ON .ng-aside, not a new block: the plate keeps the sunken role
(mist + hairline, no shadow, align-self:start above 960) that every leaf
masthead uses, and only its contents change. A raised white panel was the
alternative and was rejected — a white plate holding a white-chromed
screenshot is an outline on its own background, which is the same finding
that produced .ng-pills' default mist fill.
THE FRAME IS THE SAME 1920/5 SLICE THE FLIGHT USES (see §2): one file, five
384px columns, positioned by percentage. Here it is frame 02, the
quick-action fan, because it is the only screen that prints five of the
app's own action names in the app's own type — a reader who never scrolls
still learns what the thing does.
ORDER INSIDE THE PLATE: device, caption, rule, need label, quoted need. The
device is first deliberately. The old plate led with the label and the quote,
which is the correct emphasis when the plate is an explanation; when the
plate is the product, burying it 150px down the panel wastes the one element
that identifies the page on sight. */
.ng-v2 .ng-hand{
display:grid;
grid-template-columns:minmax(0,1fr);
gap:0;
}
.ng-v2 .ng-hand__frame{
display:block; position:relative;
justify-self:center;
width:min(212px,100%);
aspect-ratio:384 / 700;
overflow:hidden;
border:1px solid var(--ng-hairline);
border-radius:var(--ng-radius-sm);
background:var(--ng-surface); /* what shows before the JPEG paints */
box-shadow:var(--ng-shadow-card);
}
/* max-width:none is load-bearing: the theme sets `img{max-width:100%}`, which
clamps the image to one frame width and shows a fifth of one phone. */
.ng-v2 .ng-hand__frame img{
position:absolute; top:0; left:-100%;
height:100%; width:auto; max-width:none;
display:block;
}
.ng-v2 .ng-hand__cap{
margin:14px 0 0;
font-size:14px; line-height:1.55;
color:var(--ng-muted); /* 5.42:1 on mist */
}
/* The hairline is what separates "this is the product" from "this is why you
clicked". Two ideas in one plate need a rule between them or they read as
one caption that changed its mind. */
.ng-v2 .ng-hand__label.ng-hand__label{
margin:18px 0 12px;
padding-top:18px;
border-top:1px solid var(--ng-hairline);
}
/* 620–959: the masthead is one column, so the plate runs the full container —
720px of mist with a 212px phone centred in it was 500px of nothing. The
device goes hard left and spans all three text rows beside it. Below 620 it
centres again, because at 342px wide there is no second column to have. */
@media (min-width:620px) and (max-width:959px){
.ng-v2 .ng-hand{
grid-template-columns:212px minmax(0,1fr);
/* FIVE ROWS FOR THREE CHILDREN, and the two 1fr tracks are the load-bearing
ones. The device spans 1/-1, so without spare tracks the grid distributes
its 386px across exactly the three rows the text occupies: at 768 that
put ~90px of nothing between the caption and the need label and read as
three unrelated fragments. Found in a 768 screenshot; ng-page-check
reported the page clean with the gaps in place, because they are under
its 120px dead-air threshold and sit inside a plate that is not blank.
One trailing 1fr fixed the fragments but hung the whole leftover under
the quote as a 230px hole; a 1fr at each end splits it, so the copy reads
as a block optically centred against the device. */
grid-template-rows:1fr auto auto auto 1fr;
column-gap:28px;
align-items:start;
}
.ng-v2 .ng-hand__frame{
grid-column:1; grid-row:1 / -1;
justify-self:start;
}
.ng-v2 .ng-hand__cap{ grid-column:2; grid-row:2; margin-top:0; }
.ng-v2 .ng-hand__label.ng-hand__label{ grid-column:2; grid-row:3; }
.ng-v2 .ng-hand .ng-aside__quote{ grid-column:2; grid-row:4; }
}
/* ==========================================================================
2. .ng-walk — THE FLIGHT OF FIVE REAL SCREENS
The dominant content shape of this page.
ONE FILE, FIVE FRAMES. The source is 1920x700 holding five phone screens and
1920/5 = 384 exactly. Cutting the file at those boundaries and looking at the
result confirms every phone sits inside its own 384px column with margin to
spare, so each frame is aspect-ratio:384/700 with the image absolutely
positioned at height:100% — which makes the image exactly five frame-widths
wide — and offset by -100% per step. Six on the page (five here plus
the masthead device), one URL, one request; the browser paints the same
decoded bitmap six times.
WHY NOT FIVE CROPPED FILES: this agent may not write to uploads/, and should
not anyway.
WHY A FLIGHT AND NOT A ROW. Each tread carries the .ng-steps idiom this site
already uses for a sequence — a 2px rule, an accent ordinal, a name — with
the phone underneath, and from 960px up each column starts 30px lower than
the one before it. The 120px total descent is the whole graphic: a row of
five equal frames reads as five alternatives, and these are one visit in
order. The offsets are dropped below 960 where the grid is 2 or 3 up and a
stagger would just look like a bug.
THE NAME IS FLOOR-HEIGHTED AT TWO LINES from 960 up. Without it "Demografik
grafikler" wraps and "Harita ve arama" does not, so five phones that should
sit on one baseline within their tread sit on two. The floor is on the name,
not the frame, because the frame's ratio is fixed and must not be touched. */
.ng-v2 .ng-walk__flight{
list-style:none; margin:0; padding:0;
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:26px 14px;
}
.ng-v2 .ng-walk__step{
min-width:0; margin:0;
padding:14px 0 0; /* padding-left:0 also resets the theme's own li inset */
border-top:2px solid var(--ng-hairline);
}
/* 12px at .1em (ratio .10) — a tracked label by measurement, which is what
ng-page-check actually tests. */
.ng-v2 .ng-walk__n{
margin:0;
font-family:var(--ng-font-label); font-weight:600;
font-size:12px; line-height:1.3; letter-spacing:.1em;
text-transform:none; /* ordinals, but the rule is house-wide */
color:var(--ng-accent); /* 4.92:1 on mist */
font-variant-numeric:tabular-nums;
}
.ng-v2 .ng-walk__name.ng-walk__name{
margin:8px 0 0;
font-size:17px; line-height:1.3;
letter-spacing:-0.008em;
color:var(--ng-ink);
}
.ng-v2 .ng-walk__frame{
display:block; position:relative;
margin-top:14px;
aspect-ratio:384 / 700;
overflow:hidden;
border:1px solid var(--ng-hairline);
border-radius:var(--ng-radius-sm);
background:var(--ng-surface);
box-shadow:var(--ng-shadow-card);
}
.ng-v2 .ng-walk__frame img{
position:absolute; top:0; left:0;
height:100%; width:auto; max-width:none;
display:block;
}
.ng-v2 .ng-walk__frame--b img{ left:-100%; }
.ng-v2 .ng-walk__frame--c img{ left:-200%; }
.ng-v2 .ng-walk__frame--d img{ left:-300%; }
.ng-v2 .ng-walk__frame--e img{ left:-400%; }
.ng-v2 .ng-walk__cap{
margin:12px 0 0;
font-size:14px; line-height:1.55;
color:var(--ng-muted);
overflow-wrap:break-word; /* "Lokasyonlar" in a 170px column */
}
.ng-v2 .ng-walk__note{ margin-top:30px; max-width:88ch; }
@media (min-width:620px){
.ng-v2 .ng-walk__flight{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:30px 18px; }
}
@media (min-width:960px){
.ng-v2 .ng-walk__flight{
grid-template-columns:repeat(5,minmax(0,1fr));
gap:0 16px;
align-items:start;
}
.ng-v2 .ng-walk__name.ng-walk__name{ min-height:2.6em; }
.ng-v2 .ng-walk__step:nth-child(2){ margin-top:30px; }
.ng-v2 .ng-walk__step:nth-child(3){ margin-top:60px; }
.ng-v2 .ng-walk__step:nth-child(4){ margin-top:90px; }
.ng-v2 .ng-walk__step:nth-child(5){ margin-top:120px; }
/* The note clears the lowest tread rather than the tallest, or it would sit
level with the middle of the flight. */
.ng-v2 .ng-walk__note{ margin-top:44px; }
}
/* ==========================================================================
3. .ng-phz — THE EIGHT CAPABILITIES AS TWO FACING LEDGERS
THE CARD GRID IS WHAT THIS RUN EXISTS TO BREAK UP, and on this page it was
also the wrong shape on its own terms: eight equal raised boxes state that
the eight are eight independent things, when they are two halves of one
visit. Two ledgers standing side by side say the relation in the layout
instead of asking the reader to infer it from two sub-headings.
NOT .ng-vals, and not a --grid-4. The rows are ruled, not raised; there is no
card, no shadow and no surface change, so this section reads as a document
between two panelled bands rather than as a third band of boxes.
ORDINALS 01–08 RUN ACROSS THE PAIR, not 01–04 twice, because the visit is one
sequence that happens to be drawn in two columns. The printed ordinal is a
decorative inside an aria-hidden span — the carries the real order,
and the second list is start="5" so the two cannot disagree.
THE ICONS SURVIVED THE CARDS. They are the same eight inline SVGs, at 20px,
stacked over the ordinal in a 34px rule column. On a card an icon is a
decoration at the top of a box; here it is the row's mark, which is the only
job it was ever doing.
TWO COLUMNS FROM 900px, not 960. The masthead's 960 breakpoint exists because
its second column holds a device with a fixed width; these two columns hold
text and are comfortable at 420px each, which 900 gives. */
.ng-v2 .ng-phz__pair{
display:grid;
grid-template-columns:minmax(0,1fr);
gap:36px;
}
@media (min-width:900px){
.ng-v2 .ng-phz__pair{
grid-template-columns:repeat(2,minmax(0,1fr));
column-gap:48px;
}
}
.ng-v2 .ng-phz__col{ min-width:0; }
.ng-v2 .ng-phz__tag{ margin:0; }
.ng-v2 .ng-phz__name.ng-phz__name{
margin:10px 0 0;
font-size:26px; line-height:1.2;
letter-spacing:-0.014em;
color:var(--ng-ink);
}
.ng-v2 .ng-phz__intro{
margin:12px 0 0;
font-size:16px; line-height:1.6;
color:var(--ng-muted); /* 6.01:1 on ground */
max-width:52ch;
}
.ng-v2 .ng-phz__list{
list-style:none;
margin:24px 0 0; padding:0;
border-top:1px solid var(--ng-hairline);
}
.ng-v2 .ng-phz__row{
display:grid;
grid-template-columns:34px minmax(0,1fr);
column-gap:16px;
margin:0; padding:16px 0;
border-bottom:1px solid var(--ng-hairline);
}
.ng-v2 .ng-phz__mark{
display:flex; flex-direction:column; align-items:center; gap:7px;
color:var(--ng-accent); /* the SVG inherits currentColor */
padding-top:2px;
}
/* 11px at .1em (ratio .10) — a tracked label by measurement. */
.ng-v2 .ng-phz__n{
font-family:var(--ng-font-label); font-weight:600;
font-size:11px; line-height:1.3; letter-spacing:.1em;
text-transform:none;
color:var(--ng-muted);
font-variant-numeric:tabular-nums;
}
.ng-v2 .ng-phz__main{ min-width:0; }
.ng-v2 .ng-phz__t.ng-phz__t{
margin:0;
font-size:17px; line-height:1.32;
letter-spacing:-0.006em;
color:var(--ng-ink);
}
.ng-v2 .ng-phz__b{
margin:8px 0 0;
font-size:15px; line-height:1.6;
color:var(--ng-muted);
}
.ng-v2 .ng-phz__note{ margin-top:32px; max-width:88ch; }
/* ==========================================================================
4. THE SAMPLE OUTPUT PANELS
Unchanged from the pre-variance page except for their position. Both live
inside ng-shared §13b's .ng-out chrome; what is below is only what goes
inside, which that primitive deliberately leaves to the page.
========================================================================== */
@media (max-width:1364px){
/* The masthead's ghost button jumps here, and the sticky theme header is
84px tall below 1365. */
.ng-v2 .ng-out-band{ scroll-margin-top:84px; }
}
@media (min-width:960px){
.ng-v2 .ng-out-band__pair{
grid-template-columns:repeat(2,minmax(0,1fr));
gap:24px;
}
}
/* --- 4a. .ng-rec — the field record ---------------------------------------
Key/value rows separated by hairlines: a record, not a card grid. dt and dd
are laid out with flex rather than a two-column grid so a long Turkish key
("Ekiple paylaşıldı") wraps inside its own column instead of forcing the
value onto its own line.
The UA's `dd{margin-inline-start:40px}` is reset explicitly. Without it every
value sits 40px in from the right edge and the column looks broken — a bug
that only shows at narrow widths, where the 40px is a tenth of the panel.
SAME SHAPE AS akaryakit's .ng-env AND geoview's .ng-rec, deliberately NOT
promoted to ng-shared.css: a wrong shared primitive costs 28 pages and a
duplicated page rule costs bytes, and the three sheets that want it do not
agree on whether the value column is numeric (akaryakit) or textual (here). */
.ng-v2 .ng-rec{ margin:0; }
.ng-v2 .ng-rec__row{
display:flex; align-items:baseline; gap:16px;
padding:10px 0;
border-top:1px solid var(--ng-hairline);
}
.ng-v2 .ng-rec__row:first-child{ border-top:0; padding-top:0; }
.ng-v2 .ng-rec__k{
flex:1 1 auto; min-width:0;
margin:0;
font-size:14px; line-height:1.45;
color:var(--ng-muted);
}
/* flex:0 1 auto, not 0 0 auto: the longest value here is an address
("Söğütlü Çeşme Cad., Osmanağa Mah.") and at 390 it has to be allowed to
wrap inside its own column rather than push the key out of the panel. */
.ng-v2 .ng-rec__v{
flex:0 1 auto; min-width:0;
margin:0;
text-align:right;
font-family:var(--ng-font-display); font-weight:600;
font-size:15px; line-height:1.35;
color:var(--ng-ink);
font-variant-numeric:tabular-nums;
}
/* --- 4b. .ng-cmp — the comparison report ----------------------------------
A REAL
, not a grid of divs. Two candidates against five criteria is
the one thing on this page that genuinely is tabular data: a screen reader
announcing "Perakende skoru, A · Söğütlü Çeşme, 78" needs the row and column
headers to be associated, and `scope` on real th elements is the only way to
get that. Divs would have looked identical and said nothing.
table-layout:fixed with 44/28/28. Auto layout let the first column take the
width of "10 dk sürüş nüfusu" and squeezed the two value columns to about
60px at 390, where "84.300" wrapped between the dot and the last digit.
THE A COLUMN IS WASHED, THE B COLUMN IS NOT. One highlighted candidate per
table, the same "one accent row per list" idiom the homepage hero and the
akaryakit scorecard use: if both columns were tinted the wash would read as
a brand pattern rather than as a result.
The theme styles `.content-wrapper table` and its cells at (0,1,1)/(0,1,2)
and loads after us, so every rule here is written at (0,2,1) or better. */
.ng-v2 .ng-cmp{
width:100%;
margin:0;
border-collapse:collapse;
table-layout:fixed;
}
.ng-v2 .ng-cmp th,
.ng-v2 .ng-cmp td{
padding:9px 8px;
border:0;
border-top:1px solid var(--ng-hairline);
vertical-align:baseline;
background:none;
}
.ng-v2 .ng-cmp thead th{ border-top:0; padding-top:0; }
.ng-v2 .ng-cmp tfoot th,
.ng-v2 .ng-cmp tfoot td{ border-top-width:2px; }
/* 11px at .1em (ratio .10) is a tracked label by measurement, which is what
ng-page-check actually tests — not by allowlist. */
.ng-v2 .ng-cmp__corner{ text-align:left; }
.ng-v2 .ng-cmp__cornertx{
display:inline-block;
font-family:var(--ng-font-label); font-weight:600;
font-size:11px; line-height:1.3; letter-spacing:.1em;
text-transform:none; /* strings are authored pre-uppercased */
color:var(--ng-muted);
}
.ng-v2 .ng-cmp__h{
text-align:right;
font-family:var(--ng-font-display); font-weight:600;
font-size:14px; line-height:1.3;
color:var(--ng-ink);
overflow-wrap:break-word;
}
.ng-v2 .ng-cmp__k{
text-align:left;
font-weight:500;
font-size:14px; line-height:1.45;
color:var(--ng-muted);
overflow-wrap:break-word;
}
.ng-v2 .ng-cmp__v{
text-align:right;
font-family:var(--ng-font-display); font-weight:600;
font-size:15px; line-height:1.35;
color:var(--ng-ink);
font-variant-numeric:tabular-nums;
}
/* The wash sits on the cells rather than on a
, because a
background paints under the collapsed borders and lost the hairlines. */
.ng-v2 .ng-cmp .is-a{ background:var(--ng-accent-wash); }
.ng-v2 .ng-cmp__h.is-a{ color:var(--ng-accent); } /* 4.87:1 on the wash */
/* The verdict chip. --ng-accent as the fill with a paper label, so it is the
only saturated element in the panel and cannot be mistaken for another
value. white-space:nowrap because "ÖNE ÇIKAN" broken across two lines inside
a 90px column reads as two words rather than as one chip. */
.ng-v2 .ng-cmp__win{
display:inline-block;
padding:3px 8px;
border-radius:var(--ng-radius-pill);
background:var(--ng-accent);
color:var(--ng-cta-label);
font-family:var(--ng-font-label); font-weight:600;
font-size:11px; line-height:1.35; letter-spacing:.08em;
text-transform:none;
white-space:nowrap;
}
/* ==========================================================================
5. .ng-close — THE INDIGO BAND, WHICH IS THE WHOLE CLOSING CHAPTER
dark: CLOSE is assigned, so the indigo has to be last. Nothing says it has to
be thin. Every leaf on this site ends on the same 380px centred slab —
eyebrow, heading, lede, two buttons — and that repetition is a real part of
why the pages feel identical. Here the band carries the three-step onboarding
that used to be its own light section, the five lateral chips, and then the
decision on a mist rail. Two sections became one, which is also how the page
meets its assigned count of five.
NOT A SINGLE COLOUR IS DECLARED IN THIS SECTION. `is-dark` (ng-foundation §3)
redefines --ng-ground/--ng-surface/--ng-ink/--ng-muted/--ng-accent/
--ng-hairline and sets `color`, so .ng-steps, .ng-pills, .ng-btn--pill,
.ng-note and .ng-lede all invert with no branch. Measured pairs from the
foundation's own table: muted on navy 9.22:1, ink on the 6% surface 12.30:1,
the pink accent on navy 7.68:1, muted on the 10% sunken 6.94:1.
THE RAIL IS THE SUNKEN ROLE INVERTED — 10% paper over the indigo, plus the
16% hairline. Same construction akaryakit and gayrimenkul use for a closing
rail on the light ground; this is the dark-band case of it. Still not
promoted to ng-shared: three leaves have now written .ng-close__rail and no
two have written the same surfaces, and promoting the shared half while the
surfaces differ only moves the disagreement into the shared file. */
.ng-v2 .ng-close__rail{
margin-top:46px;
padding:28px 26px;
background:var(--ng-surface-sunken);
border:1px solid var(--ng-hairline);
border-radius:var(--ng-radius);
display:grid;
grid-template-columns:minmax(0,1fr);
gap:24px;
}
/* 860, the same breakpoint .ng-steps uses to go three-up: below it the ladder
has already stacked and a two-column rail under a one-column ladder reads as
two different pages. `auto` on the action column and `center` alignment keep
the two pills optically level with the heading, not with the lede. */
@media (min-width:860px){
.ng-v2 .ng-close__rail{
grid-template-columns:minmax(0,1fr) auto;
column-gap:40px;
align-items:center;
}
}
.ng-v2 .ng-close__copy{ min-width:0; }
.ng-v2 .ng-close__eyebrow{ margin:0; }
/* (0,3,0). ng-foundation already carries `.ng-close__title.ng-close__title{
margin-top:18px }`; this restates the margin alongside the size so the two
cannot disagree, and this sheet loads last. */
.ng-v2 .ng-close__title.ng-close__title{
margin:12px 0 0;
font-size:clamp(1.55rem, 3vw, 2rem);
line-height:1.16;
letter-spacing:-0.018em;
max-width:22ch;
color:var(--ng-ink);
}
.ng-v2 .ng-close__lede{
margin:12px 0 0;
font-size:16px; line-height:1.6;
color:var(--ng-muted); /* 6.94:1 on the 10% rail */
max-width:54ch;
}
/* .ng-actions ships a 28px top margin for a row that follows a paragraph; in
the rail it is a grid child and the gap already spaces it. */
.ng-v2 .ng-close__actions{ margin:0; }
.ng-v2 .ng-close__meta{ margin-top:28px; }
/* ==========================================================================
6. RESPONSIVE
ng-shared carries the 44px hit areas (crumbs, buttons, pills, tel) at 767,
at 768–1023 and at exactly 1024, and the 16px reading floor at 767. Nothing
on this page is interactive outside those primitives — the device, the five
frames, the two ledgers, the record and the comparison table are static DOM
with no and no