/* ==========================================================================
NEXT GEO — page stylesheet for the CAREERS PAIR
TR 4769 /kariyer/ EN 25543 /en/career/
One authored sheet for both; ng-page-apply.php --css-from copies it to
career.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; check there before adding.
---------------------------------------------------------------------------
WHY THIS PAGE WAS REBUILT A SECOND TIME
The owner, on the corporate pages as a set: "kariyer, sss pages are again
similar fashion, I think we need to revise them and make them unique each,
it feels like repeating itself and also looks boring and wrong." /sss/ and
/en/faq/ are explicitly out of scope and untouched. What was true of the
other three is that /biz-kimiz/, /ekibimiz/ and /kariyer/ all ran the SAME
RHYTHM — masthead with a right-hand aside, then a dark index band, then a
card grid — so a visitor who had seen one had seen all three.
The masthead hero-width bug (a 2240px plate rendering at 58% of the
container with an empty 42% beside it, on 28 pages) was fixed globally in
ng-shared.css and is NOT re-fought here.
---------------------------------------------------------------------------
THE PAGE, SECTION BY SECTION, AND WHAT SHAPE EACH ONE IS NOW
10 masthead STACKED. .ng-masthead--stack: no aside at all, headline
across the full container, and the facts that used to be
a right-hand plate now run ACROSS the container as a
ruled key/value rail (§1). Nothing on this page is laid
out headline-left / panel-right any more.
20 open postings THE LEDGER (§2). Heavy top rule, hairline rules between
rows, a generated ordinal in the left margin, the
posting and its evidence in the middle, that posting's
own terms in a right-hand column, the whole row a link,
and the application block as the ledger's foot under a
heavy closing rule. This is the shape that belongs to
this page and to no other corporate page.
30 the work ONE WIDE PLATE, THEN TWO ALTERNATING SPLIT BANDS (§3) —
ng-shared's .ng-figband--split, the second --flip. The
owner named the alternating band specifically as the
thing he liked on /cozumler/optimizasyon/.
40 principles A TWO-COLUMN RULED GLOSSARY (§4). A , not six cards:
six terms and six definitions, which is both the honest
markup and a texture nothing else on the page has.
50 closing the indigo band, one ask, the mailbox.
No card grid anywhere on the page. No dark index band. One plate, not three.
---------------------------------------------------------------------------
THE POSTING COUNT, WHICH IS THE ONE THING ON THIS PAGE THAT ROTS
Open postings are live data: `neuros_vacancy` has four published rows in
each language today and will not always. The previous build printed the
total in three places — "Açık pozisyon / 4" in the masthead panel, "Şu anda
dört ilan açık" as the section heading, "Dördü de Maslak ofisinde" in the
lede — and baked the four postings' names and conditions into a raster
besides. Every one of those goes wrong silently the day a posting closes,
and this project has already paid for exactly that failure once: an earlier
pass left this page reading "7 ÜRÜN" long after the products hub had eight,
because the digit and its label were two different elements and only one of
them was ever updated.
So, in both languages:
- NO TOTAL IS PRINTED ANYWHERE ON THE PAGE. Not in the masthead, not in a
heading, not in a lede, not in a caption, not in an alt.
- THE ORDINALS ARE GENERATED FROM THE ROWS. `.ng-ilan__n` is empty in the
markup; a CSS counter on `.ng-ilan__row` supplies the digits (§2b), so
removing a posting renumbers the ledger and adding one numbers it, with
no numeral in the HTML to forget.
- EVERY SENTENCE ABOUT QUANTITY IS WRITTEN TO SURVIVE A CHANGE: "açık
ilanların tamamı burada", "yeni ilanlar bu sayfada yayımlanır".
- THE POSTINGS PLATE IS NO LONGER REFERENCED. ng-banner/kariyer/
20-pozisyonlar.* names the four current postings, one per column, with
each one's condition, in a 2240x960 raster nobody edits when a posting
closes. The file is left on disk untouched; the page simply does not
load it. ng-banner/kariyer/40-neden.* is dropped for a different reason
— it prints two bare figures into the plate.
Maintaining this page when a posting opens or closes is now exactly one
edit: add or delete an
in section 20.
---------------------------------------------------------------------------
FACTS, AND WHERE EACH IS VERIFIABLE
Maslak, İstanbul both homepages' credentials strip prints
"Merkez / Maslak, İstanbul", and
/bize-ulasin/ prints the street address.
info@nextgeography.com the client's own careers copy names it as
the application route; also /bize-ulasin/.
no application form on the site Elementor free ships no form widget and
none is installed.
İstanbul · Tam zamanlı per row vacancy_location / vacancy_occupation on
each posting's own record.
every summary, chip, condition that posting's own text: 4751 / 24144 /
24146 / 24149 (TR), 25561 / 25557 /
25555 / 25552 (EN).
public sources, private data
providers, field data; constant
updating and accuracy checks the client's own FAQ answer, /sss/ and
/en/faq/.
Nüfus verileri / Yıllık,
Rekabet verileri / Aylık the two example cadences the same FAQ
publishes, with its own caveat.
GeoBrain reads the score and
writes the recommendation in
Turkish the GeoBrain card on /urunler/ and
/en/products/.
the six named surfaces cards on /urunler/ and /en/products/.
the six working principles the client's own careers copy, verbatim.
NO PUBLIC INSTITUTION IS NAMED anywhere on this page. Those references were
removed from the whole site on the owner's instruction on 2026-08-20
(/root/ng-noref/NOREF.md), and this page's own "ÇALIŞTIĞIMIZ KAYNAKLAR" /
"THE SOURCES WE WORK WITH" panel was one of the things that removal took
out. The `.ng-kaynak` rules that survived it are gone from this sheet too.
Nothing here states a headcount, a founding date, a client count, a funding
round, a response time, a number of interview stages, a salary band, a
closing date, an employee testimonial or a benefits list. None of those
exist in any source this project has, and a careers page is read by people
who find out afterwards whether it was true.
========================================================================== */
/* ==========================================================================
1. MASTHEAD — the stacked opening and its terms rail
========================================================================== */
/* ng-shared §15a's .ng-masthead--stack does the structural work: one column at
(0,3,0) so it beats §4's 58fr/42fr rule inside §4's own min-width:960 query,
headline uncapped and one step larger, lede at 58ch. Everything below is the
rail, which is this page's own.
26px rather than the shared 32px gap between the copy block and the rail.
The rail opens with its own hairline at >=960 and with its cells' hairlines
below that, so 32px of grid gap plus 22px of rail padding measured as ~54px
of air under the buttons before the first rule. (0,3,0) beats §4. */
.ng-v2 .ng-karmh .ng-masthead__inner{ gap:26px; }
/* THE RAIL IS .ng-facts (ng-shared §15c), WHICH RUNS PAIRS ACROSS THE
CONTAINER, and that is the whole point of it being here. The information is
what the old right-hand panel carried; the SHAPE is the opposite of it, and
the aside is what the owner objected to on the other two corporate pages.
THREE CELLS, NOT FOUR. §15c drops an odd-count strip to one-up below 640 so
the last cell never draws a half-width rule; three cells take that path and
four would not. The fourth row the old panel had — "Çalışma şekli / Tam
zamanlı" — is deliberately NOT here: it is a property of a posting, not of
the company, and it now sits on each ledger row where it can differ per
posting without the page contradicting itself. */
.ng-v2 .ng-sart{ min-width:0; }
.ng-v2 .ng-sart__label{ margin:0 0 14px; }
/* The rule above the rail exists only at >=960, and this is not an oversight.
Below 960 §15c gives every cell its own `border-top`, so the strip already
opens with a hairline; adding one here would draw two parallel rules 22px
apart. At >=960 the cells switch to `border-left` dividers and the strip has
no top edge of its own, so it needs one to sit under the buttons. */
@media (min-width:960px){
.ng-v2 .ng-sart{
padding-top:22px;
border-top:1px solid var(--ng-hairline);
}
}
/* The address is the longest value in either language and .ng-facts__v is
20px display face. `anywhere` rather than `break-word`: at 390 in a one-up
cell the string still fits, but the 640-959 three-up band gives it ~200px
and a URL that cannot break mid-domain overflows its column instead of
wrapping. Same finding the old panel recorded for the same string. */
.ng-v2 .ng-sart__list .ng-facts__v{ overflow-wrap:anywhere; }
.ng-v2 .ng-sart__mail{
color:var(--ng-accent); /* 5.64:1 on the ground */
text-decoration:underline; text-underline-offset:3px;
}
.ng-v2 .ng-sart__mail:hover{ color:var(--ng-ink); }
.ng-v2 .ng-sart__note{ margin-top:18px; max-width:76ch; }
/* ==========================================================================
2. THE LEDGER — the section this page exists for, and the shape that is
its own
========================================================================== */
/* WHY A LEDGER AND NOT THE TWO-UP CARD GRID IT REPLACES. A careers hub has one
job that outranks every other: make its children legible and distinct. The
old page did that with .ng-grid--2 + .ng-card--link — the same primitive
/biz-kimiz/ used for its values and /ekibimiz/ used for its disciplines.
Three corporate pages presenting their content in identical boxes is most of
what "it feels like repeating itself" meant.
A ledger reads as a BOARD rather than as a set of options: one heavy rule
at the top, hairlines between rows, an ordinal in the left margin, the
subject and its evidence in the middle, the terms in a right-hand column.
It also scales — one posting or nine, the shape does not change and no
grid gets a widowed cell.
/ekibimiz/'s directory panel and this ledger are deliberately different
objects: that one is a list of names inside a plate, this one is a ruled
table of children whose rows are links. */
.ng-v2 .ng-ilanlar{ scroll-margin-top:104px; } /* the masthead button lands here */
/* THE 16px BLEED. The rules run 16px past the container's text column on both
sides so that a hovered row reads as a band across the page rather than as a
highlight around a paragraph, and so the ledger's own rules are visibly a
different system from the section head above them. It is inside .ng-container's
24px inline padding at every width, so it can never cause overflow — at 390
there are still 8px between the rule and the viewport edge.
The matching `padding-inline:16px` on the row link puts the text back on the
container's optical left edge. */
.ng-v2 .ng-ilan{
list-style:none;
margin:0 -16px;
padding:0;
counter-reset:ng-ilan;
border-top:2px solid var(--ng-ink);
}
/* --- 2b. THE ORDINAL IS GENERATED, NOT TYPED --------------------------------
This is the answer to the "7 ÜRÜN" failure written as CSS. The counter is
incremented by the ROW, so the digit cannot survive the row it belongs to
and cannot be left behind when a posting closes. There is no numeral in
either language's markup for this section.
aria-hidden on the span in the markup, because the accessible name of each
row is its and a screen reader announcing "zero one" before every job
title is noise. `decimal-leading-zero` matches the 01/02/03 idiom the rest
of the site uses (.ng-steps__num, .ng-adim__num, .ng-toc__n). */
.ng-v2 .ng-ilan__row{ counter-increment:ng-ilan; }
.ng-v2 .ng-ilan__n{
display:block;
font-family:var(--ng-font-display); font-weight:700;
font-size:22px; line-height:1.2;
letter-spacing:.01em;
color:var(--ng-muted);
font-variant-numeric:tabular-nums;
}
.ng-v2 .ng-ilan__n::before{ content:counter(ng-ilan,decimal-leading-zero); }
/* --- 2c. the row ---------------------------------------------------------- */
/* NO border-radius, on purpose. The hover fill and the row rule have to share
an edge for the thing to read as a table row; a rounded fill sitting on a
straight hairline curls away from it at both ends. */
.ng-v2 .ng-ilan__link{
display:grid;
grid-template-columns:minmax(0,1fr);
gap:10px;
padding:24px 16px 26px;
border-bottom:1px solid var(--ng-hairline);
color:var(--ng-ink);
text-decoration:none;
transition:background-color .16s cubic-bezier(.25,.46,.45,.94);
}
/* 860, not 960. The middle column carries a two-line title, a four-line
summary, a condition line and up to ten chips; measured at 768 the three-up
grid still gives it ~430px, which holds the longest chip row in three rows.
Below 860 everything stacks and the terms column becomes a wrapping strip
under the chips. */
@media (min-width:860px){
.ng-v2 .ng-ilan__link{
grid-template-columns:auto minmax(0,1fr) minmax(0,190px);
column-gap:32px; row-gap:0;
align-items:start;
padding:28px 16px 30px;
}
}
/* any-hover only: on a touch screen :hover sticks after the tap and leaves the
row filled until the user taps somewhere else. */
@media (any-hover:hover){
.ng-v2 .ng-ilan__link:hover{ background:var(--ng-accent-wash); }
.ng-v2 .ng-ilan__link:hover .ng-ilan__n{ color:var(--ng-accent); }
.ng-v2 .ng-ilan__link:hover .ng-arrow{ transform:translate3d(3px,0,0); }
}
.ng-v2 .ng-ilan__link:focus-visible{ background:var(--ng-accent-wash); }
@media (min-width:860px){
.ng-v2 .ng-ilan__n{ font-size:26px; padding-top:2px; }
}
.ng-v2 .ng-ilan__main{ display:block; min-width:0; }
/* (0,3,0) doubled — the theme's `body .content-wrapper h3:not(:first-child)
{margin-top:50px}` is (0,2,2) and loads after us. See ng-shared §11; this and
.ng-ilan__ftitle and .ng-isin__q are this page's entries in that index. */
.ng-v2 .ng-ilan__name.ng-ilan__name{
margin:0;
font-size:23px; line-height:1.24;
letter-spacing:-0.012em;
color:var(--ng-ink);
}
.ng-v2 .ng-ilan__sum{
display:block;
margin-top:8px;
font-size:15px; line-height:1.6;
color:var(--ng-muted); /* 6.01:1 on ground, 6.6:1 on the wash */
max-width:66ch;
}
/* THE POSTING'S OWN CONDITION, quoted rather than paraphrased, and given a
surface of its own so it survives the hover fill. The first build made it an
accent-wash block with an accent left rule, which is what .ng-rol__flag was;
on a row whose hover state is ALSO accent-wash it disappeared on hover. White
+ hairline + a 3px accent edge reads the same way and cannot collide with any
row state. It is a sentence, not a label, so it is untracked at the 14px
reading floor. */
.ng-v2 .ng-ilan__cond{
display:block;
margin-top:12px;
padding:10px 12px;
background:var(--ng-surface);
border:1px solid var(--ng-hairline);
border-left:3px solid var(--ng-accent);
border-radius:0 var(--ng-radius-sm) var(--ng-radius-sm) 0;
font-size:14px; line-height:1.5;
color:var(--ng-ink);
max-width:62ch;
}
.ng-v2 .ng-ilan__pills{ margin-top:12px; }
/* --- 2d. the terms column ------------------------------------------------- */
/* Below 860 this is a wrapping strip and the verb line takes its own full row,
which gives it the whole width of the card as a hit area even though the
real target is the row. Above 860 it is a right-aligned block. */
.ng-v2 .ng-ilan__side{
display:flex; flex-wrap:wrap; align-items:center;
gap:6px 16px;
min-width:0;
}
@media (min-width:860px){
.ng-v2 .ng-ilan__side{ display:block; text-align:right; padding-top:4px; }
}
/* 12px at .1em takes the tracked-label exception (ratio .10, over the 0.08
ng-page-check measures): these are glanced at, and both strings are authored
already uppercase with text-transform:none — "İSTANBUL", not an uppercase
transform that would turn the İ into an I. */
.ng-v2 .ng-ilan__meta{
font-family:var(--ng-font-label); font-weight:600;
font-size:12px; line-height:1.35; letter-spacing:.1em;
text-transform:none;
color:var(--ng-muted);
}
@media (min-width:860px){
.ng-v2 .ng-ilan__meta{ display:block; }
.ng-v2 .ng-ilan__meta + .ng-ilan__meta{ margin-top:5px; }
}
/* Same spec as ng-shared's .ng-card__link — the site's verb line. It is a
: the row is the link. */
.ng-v2 .ng-ilan__go{
display:inline-flex; align-items:center; gap:.45em;
font-family:var(--ng-font-display); font-weight:600;
font-size:14px; line-height:1.3;
color:var(--ng-accent);
}
@media (max-width:859px){
.ng-v2 .ng-ilan__go{ flex-basis:100%; margin-top:4px; }
}
@media (min-width:860px){
.ng-v2 .ng-ilan__go{ margin-top:14px; }
}
/* --- 2e. the ledger's foot ------------------------------------------------ */
/* THE APPLICATION BLOCK IS THE LAST ROW OF THE LEDGER, not a panel under it. A
candidate decides to apply while looking at a posting, so the answer to "and
then what" belongs at the bottom of the list rather than 900px further down;
and closing the table with the same heavy rule it opened with is what makes
the whole section read as one object.
It needs no top border — the last posting row's hairline is its separator. */
.ng-v2 .ng-ilan__foot{
margin:0 -16px;
padding:26px 16px 30px;
border-bottom:2px solid var(--ng-ink);
display:grid;
grid-template-columns:minmax(0,1fr);
gap:20px;
}
@media (min-width:860px){
.ng-v2 .ng-ilan__foot{
grid-template-columns:minmax(0,1fr) auto;
column-gap:40px;
align-items:end;
}
}
.ng-v2 .ng-ilan__fcopy{ min-width:0; }
.ng-v2 .ng-ilan__flabel{ margin:0; }
.ng-v2 .ng-ilan__ftitle.ng-ilan__ftitle{
margin:12px 0 0;
font-size:24px; line-height:1.25;
color:var(--ng-ink);
}
.ng-v2 .ng-ilan__fbody{
margin:12px 0 0;
font-size:16px; line-height:1.6;
color:var(--ng-muted);
max-width:66ch;
}
.ng-v2 .ng-ilan__fnote{ margin-top:14px; }
/* ng-shared §8 gives .ng-actions a 28px top margin, which is right when it
follows a paragraph and wrong when it is a grid item beside one. */
@media (min-width:860px){
.ng-v2 .ng-ilan__factions{ margin-top:0; }
}
/* ==========================================================================
3. THE WORK ITSELF — one plate, then alternating split bands
========================================================================== */
/* THE SHAPE THE OWNER NAMED. "/cozumler/optimizasyon/ … after the first
section page is really great, I really liked the left right image
alternating section." ng-shared §17a's .ng-figband--split is that band, and
--flip alternates it. This section used to be three numbered columns, which
is a card grid with the borders taken off.
THE PANEL SIDE IS .ng-figband__frame--text (§17b), NOT A PICTURE. There is
no photograph and no product screenshot to put there, and a set of
hand-built product frames was deleted this week for looking like real
output. Using the text variant in BOTH languages keeps the pair
structurally identical rather than giving Turkish a picture and English a
paragraph — which is what §17b exists for in the first place.
ONE PLATE ON THE PAGE, NOT THREE. Three consecutive sections opening with a
full-width dark plate of the same silhouette is a large part of what
"repeating itself" meant. The kept one is the flow plate, which is evergreen
and is the only one of the three whose content is not a list of things that
change. */
.ng-v2 .ng-isin__row{ margin-top:52px; }
@media (min-width:960px){
.ng-v2 .ng-isin__row{ margin-top:64px; }
}
/* The criteria line sits ABOVE the heading, the same call /cozumler/
optimizasyon/ made: read before the question, it is the subject the question
is asked about. 12px at .1em is over the tracked-label threshold. */
.ng-v2 .ng-isin__meta{
margin:0 0 12px;
font-family:var(--ng-font-label); font-weight:600;
font-size:12px; line-height:1.5; letter-spacing:.1em;
text-transform:none; /* authored pre-uppercased */
color:var(--ng-accent); /* 5.42:1 on mist */
}
.ng-v2 .ng-isin__q.ng-isin__q{
margin:0;
font-size:26px; line-height:1.22;
letter-spacing:-0.016em;
color:var(--ng-ink);
}
.ng-v2 .ng-isin__body{
margin:12px 0 0;
font-size:16px; line-height:1.65;
color:var(--ng-muted); /* 5.42:1 on mist */
max-width:56ch;
}
.ng-v2 .ng-isin__links{ margin-top:18px; }
/* ---- inside the frame ---------------------------------------------------- */
.ng-v2 .ng-isin__flabel{ margin:0; }
/* §17b gives .ng-figband__sub a 26px top margin inside a --text frame, to keep
its first line out from under the absolutely-positioned SAMPLE chip. There
is no chip on either of these frames — nothing in them is a sample, both are
published facts — so the clearance is 26px of dead white. (0,4,0) beats
§17b's (0,3,0). */
.ng-v2 .ng-isin .ng-figband__frame--text .ng-figband__sub{
margin-top:12px;
font-size:16px;
color:var(--ng-muted);
}
/* TWO COLUMNS AT EVERY WIDTH DOWN TO 480, overriding §15c's `repeat(3)` at
>=640. The strip has exactly two cells; in a three-column grid the third
track is empty and the divider system reads as a table missing a column.
Same specificity as §15c and this file loads later, so no media query of its
own is needed to win. */
.ng-v2 .ng-isin__facts{
margin-top:18px;
grid-template-columns:repeat(2,minmax(0,1fr));
}
@media (max-width:479px){
.ng-v2 .ng-isin__facts{ grid-template-columns:minmax(0,1fr); }
}
.ng-v2 .ng-isin__pills{ margin-top:16px; }
.ng-v2 .ng-isin__note{ margin-top:36px; max-width:82ch; }
/* ==========================================================================
4. WORKING PRINCIPLES — the ruled glossary
========================================================================== */
/* A IN TWO COLUMNS, NOT SIX CARDS. Six abstract nouns in six identical
boxes is the shape /biz-kimiz/ uses for its values; two corporate pages
doing that is the repetition being removed. A description list is also the
honest markup — these are six terms and six definitions — so a screen reader
now gets that relationship instead of six unrelated headings, and the page
keeps its h1 → h2 → h3 outline without inventing six more h3s.
NO ICONS. Six hand-drawn glyphs for six abstract nouns is decoration
standing in for meaning, and the imported demo's version of exactly that
(three of its six pictograms were the same two glyphs repeated) is part of
what was removed. A 3px accent rule down the leading edge says "these belong
to one set" for one declaration and invents no imagery.
THE ROWS STRETCH, AND THAT IS THE POINT. Grid items stretch by default, so
the two definitions in a visual row share a height and their bottom
hairlines land on one line all the way down the page — which is what makes
six items read as one ruled set rather than as two ragged columns. The
accent bar is absolutely positioned rather than a `border-left` so it can
take that stretch with a 24/26 inset at top and bottom: a real border would
run edge to edge and turn the hairline grid into a set of boxes, and it
would also push the text 3px right of every other left edge on the page.
`.ng-ilkeler` on the carries no rules and is not meant to: it is a
named hook so that a later change to this band can be scoped without
reaching for a positional selector. Same role `.ng-neden` had before it. */
.ng-v2 .ng-ilke{
margin:0;
display:grid;
grid-template-columns:minmax(0,1fr);
gap:0;
border-top:1px solid var(--ng-hairline);
}
@media (min-width:860px){
.ng-v2 .ng-ilke{ grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:48px; }
}
.ng-v2 .ng-ilke__row{
position:relative;
min-width:0;
padding:22px 0 24px 20px;
border-bottom:1px solid var(--ng-hairline);
}
.ng-v2 .ng-ilke__row::before{
content:"";
position:absolute; left:0; top:24px; bottom:26px; width:3px;
border-radius:2px;
background:var(--ng-accent);
}
.ng-v2 .ng-ilke__k{
margin:0;
font-family:var(--ng-font-display); font-weight:700;
font-size:20px; line-height:1.28;
letter-spacing:-0.01em;
color:var(--ng-ink);
}
/* margin:0 on the inline start kills the UA's 40px dd indent, which would put
every definition 40px right of its own term. */
.ng-v2 .ng-ilke__v{
margin:8px 0 0;
font-size:15px; line-height:1.62;
color:var(--ng-muted); /* 6.01:1 on the ground */
max-width:58ch;
}
/* "Şeffaflık — Açık iletişim, açık hedefler, açık kültür." is eight words and
stays eight words. Padding the short definitions out to match their
neighbours would be writing copy the client did not write, so they simply
end early and the stretch leaves the white space under the text. */
/* ==========================================================================
5. MOBILE
Reading floor 16px and 44px targets, per the contract. ng-shared §12 covers
the primitives; these are this page's own classes, which it cannot know
about.
========================================================================== */
@media (max-width:767px){
/* Reading floor. Every one of these is a sentence a visitor reads. The
tracked labels (.ng-ilan__meta at 12px/.1em, .ng-isin__meta at 12px/.1em)
stay where they are — the contract allows tracked labels down to 12px and
they are glanced at, not read. .ng-ilan__go stays at 14px, which is the
size ng-shared gives .ng-card__link at every width; it is the site's verb
line and moving it here alone would make this page's verb bigger than
every other page's. */
.ng-v2 .ng-ilan__sum,
.ng-v2 .ng-ilan__cond,
.ng-v2 .ng-ilke__v{ font-size:16px; line-height:1.6; }
.ng-v2 .ng-isin__body,
.ng-v2 .ng-isin__note,
.ng-v2 .ng-ilke__v,
.ng-v2 .ng-ilan__sum,
.ng-v2 .ng-ilan__cond,
.ng-v2 .ng-ilan__fbody{ max-width:none; }
/* Headline steps, matching ng-shared §12's own 44 → 30px section-head step. */
.ng-v2 .ng-ilan__name.ng-ilan__name{ font-size:21px; }
.ng-v2 .ng-ilan__ftitle.ng-ilan__ftitle{ font-size:22px; }
.ng-v2 .ng-isin__q.ng-isin__q{ font-size:22px; }
.ng-v2 .ng-ilke__k{ font-size:19px; }
/* Tighter bleed and padding, so a 390px screen does not spend 32px of its
width on the space around a 16px line. */
.ng-v2 .ng-ilan{ margin:0 -12px; }
.ng-v2 .ng-ilan__foot{ margin:0 -12px; padding:24px 12px 26px; }
.ng-v2 .ng-ilan__link{ padding:22px 12px 24px; }
.ng-v2 .ng-isin__row{ margin-top:40px; }
/* 44px on the one inline link this page adds. min-WIDTH as well as
min-height: 2.5.5 is a 44x44 box, and /ekibimiz/ measured a four-letter
crumb at 38x44 — tall enough and still a failure. The address is far wider
than 44px, but the rule is written once and costs nothing. */
.ng-v2 .ng-sart__mail{
display:inline-flex; align-items:center;
min-height:44px; min-width:44px;
}
}
/* ==========================================================================
6. TAP TARGETS AT 768 — 1024px
.ng-sart__mail is an e-mail link inside a fact cell, in the tablet range
ng-page-check never used to check (its ceiling was 600px until it was raised
to 1024px). ng-shared §12 covers the shared primitives in this range; this
class is this page's own.
max-width:1024px, NOT 1023. This off-by-one has been fixed three times on
this project: first in ng-shared.css (which the homepages do not load), then
in ng-mobile.css §7 for the shared primitives — and the page-specific
classes were still bounded at 1023, so they failed at exactly 1024 on a live
page. 1024 CSS px is iPad landscape. This block contains hit areas only, so
widening it by one pixel changes no layout.
========================================================================== */
@media (min-width:768px) and (max-width:1024px){
.ng-v2 .ng-sart__mail{
display:inline-flex; align-items:center;
min-height:44px;
}
}