/* ==========================================================================
   NEXT GEO — ng-mobile.css
   Mobile + tablet refinement pass. Loads LAST in our chain (after
   ng-sections.css) so a plain `body.ng-v2 .x` here beats the same specificity
   in a section file without !important.

   SCOPE RULE: nothing in this file may change the 1440px rendering. Every
   block is inside a max-width query at or below 1024px. If a fix is needed at
   every width it belongs in ng-foundation/ng-components, not here — see the
   `.ng-sol__cell` list-padding fix, which was put in ng-components §10 for
   exactly that reason.

   Everything below was found by reading 390px and 768px screenshots, not by
   reading CSS. Each block says what the screenshot showed.
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. THEME SHELF ABOVE THE HERO                          <= 1024px
   .top-page-wrapper carries background #F0F1F4 + padding-bottom:25px +
   border-radius 0 0 25px 25px. At 390px that painted a 25px band of theme
   grey with two rounded corners between the white mobile header and the hero
   — a visible seam in a page whose whole top is meant to read as one surface.
   It is theme chrome, not ours, and it is invisible in every DOM assertion.
   Left alone at >=1025px: the desktop crop is another agent's surface.
   -------------------------------------------------------------------------- */
@media (max-width:1024px){
  body.ng-v2 .top-page-wrapper{
    background:var(--ng-surface);
    padding-bottom:0;
    border-radius:0;
  }
}


/* --------------------------------------------------------------------------
   2. READING SIZE FLOOR                                   <= 767px
   Card and plate body copy shipped at 15px, and several notes at 13-14px.
   At 390px on --ng-muted that is under the 16px floor this page holds itself
   to; it is also the single biggest reason the page read as "desktop,
   shrunk". Sizes are raised, not the line-height ratios, so the vertical
   rhythm of each component is preserved.
   -------------------------------------------------------------------------- */
@media (max-width:767px){
  body.ng-v2 .ng-sol__body,
  body.ng-v2 .ng-rest__body,
  body.ng-v2 .ng-pos__body,
  body.ng-v2 .ng-sources__body{
    font-size:16px;
    line-height:1.6;
  }

  /* Footnotes and image captions: one step under body, never under 15px.
     These are genuinely secondary (a caption under a screenshot, a note
     explaining where four numbers come from), so they do not go to 16. */
  body.ng-v2 .ng-cred__note,
  body.ng-v2 .ng-cred__caption,
  body.ng-v2 .ng-rel__note{
    font-size:15px;
    line-height:1.55;
  }

  /* This note was 14px JetBrains Mono, which at 390px sat well under its
     nominal size. On the label face (Manrope) the same 14px is optically
     larger, but the note is still a full sentence of body copy rather than a
     label, so it keeps the 15px floor and the looser 1.65 leading. */
  body.ng-v2 .ng-pos__note{
    font-size:15px;
    line-height:1.65;
  }
}


/* --------------------------------------------------------------------------
   3. POSITIONING STATEMENT                                <= 767px
   The <h2> is two sentences: a bright lead line and a two-line dimmed
   continuation, hand-authored one <span class="ng-line"> per rendered line.
   That contract holds down to ~768px. At 390px every authored line re-wraps,
   so the block rendered as six near-identical 28px lines with no seam between
   the two sentences — an eight-line wall, the worst thing on the page.

   The lead keeps 28px (--ng-accent-display needs >=24px to clear AA on
   --ng-ground). The continuation steps down to 21px and gains air above it,
   so the two sentences read as two things again. --ng-muted at 21px is
   5.96:1, so the step down costs nothing in contrast.
   -------------------------------------------------------------------------- */
@media (max-width:767px){
  body.ng-v2 .ng-pos__title{
    font-size:28px;
    line-height:1.28;
  }
  body.ng-v2 .ng-pos__title .ng-pos__cont{
    font-size:21px;
    line-height:1.42;
    letter-spacing:-0.01em;
    /* Each authored line now wraps to two rendered lines no matter what size
       it is set at (41 characters will not fit in 342px above ~16px). Left to
       greedy wrapping both broke one word before the end — "…ve saha /
       verisini" over "…sonucu GeoBrain / yorumlar." — two stacked one-word
       orphans. balance splits each at its midpoint instead, which is the
       break a person would have authored. Supported since Chrome 114 /
       Safari 17.5; where it is not, the greedy break is what renders and
       nothing else changes. */
    text-wrap:balance;
  }
  /* Air between sentence one and sentence two only — the two continuation
     lines stay tight to each other so they still read as one sentence. */
  body.ng-v2 .ng-pos__title .ng-line + .ng-pos__cont{
    margin-top:14px;
  }
  body.ng-v2 .ng-pos__title .ng-pos__cont + .ng-pos__cont{
    margin-top:0;
  }
}


/* --------------------------------------------------------------------------
   4. LOGO MARQUEE EDGES                                   <= 767px
   The marquee already masks both ends, but at 24px the fade is shorter than
   one glyph: the 390px screenshot showed KUVEYTTÜRK's K sliced vertically at
   the container edge and watsons cut on the right. Both read as clipping,
   not as a fade. 56px is about half a logo, which is what actually dissolves.
   The #000 stops are alpha, not colour — a mask reads only the alpha channel,
   so no palette token applies here.
   -------------------------------------------------------------------------- */
@media (max-width:767px){
  body.ng-v2 .ng-logos{
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 56px,#000 calc(100% - 56px),transparent);
            mask-image:linear-gradient(90deg,transparent,#000 56px,#000 calc(100% - 56px),transparent);
  }
}


/* --------------------------------------------------------------------------
   5. TOUCH TARGETS                                        <= 767px
   Measured heights before this block, at 390px:
     .ng-sektor__chip  34   .ng-product__link 25   .ng-sektor__link 21
     .ng-hero__link    29   .ng-rel__link     18   .ng-close__link  27
   All are real tap targets and all are under 44. Height is added with
   min-height + centring rather than padding so the text baseline does not
   move and the surrounding rhythm is unchanged; where the target is inline
   the box is made inline-flex first so min-height applies at all.

   .ng-sol__go and .ng-rest__* are deliberately absent: the whole card is the
   <a> there, so the target is already 300x200+.
   -------------------------------------------------------------------------- */
@media (max-width:767px){
  body.ng-v2 .ng-sektor__chip{
    min-height:44px;
    padding:10px 15px;
    font-size:15px;
  }

  body.ng-v2 .ng-product__link,
  body.ng-v2 .ng-sektor__link,
  body.ng-v2 .ng-hero__link,
  body.ng-v2 .ng-rel__link,
  body.ng-v2 .ng-close__link{
    display:inline-flex;
    align-items:center;
    min-height:44px;
  }

  /* These four sit directly under a paragraph or a card body. min-height
     centres the label inside a 44px box, which visually adds ~8px above the
     text as well as below; the component's own margin-top is pulled back by
     that amount so the gap looks identical to before. */
  body.ng-v2 .ng-sektor__link{ margin-top:14px; }
  body.ng-v2 .ng-rel__link{ padding-top:12px; }

  /* Stacked links inside the product cards need real separation once each is
     44px tall, otherwise two adjacent targets touch. */
  body.ng-v2 .ng-product__link + .ng-product__link{ margin-top:2px; }

  /* The closing line is "Next Geo · Maslak, İstanbul · +90 (212) 276 22 33"
     centred in 342px. It broke INSIDE the number, between the area code and
     the subscriber part, on two centred lines — a phone number split across a
     line break is unreadable and un-copyable. nowrap forces the break to fall
     on the separator before it instead. It is also a tel: link, so it gets
     the 44px box as well; inline-block keeps the centring the <p> provides. */
  body.ng-v2 .ng-close__tel{
    display:inline-block;
    white-space:nowrap;
    min-height:44px;
    line-height:44px;
  }
}


/* --------------------------------------------------------------------------
   6. TABLET                                               768px - 1023px
   768px was never reviewed before this pass. It renders as the mobile
   single-column layout at a comfortable measure and needs no structural
   change; the only defect the crops showed was the marquee mask again, which
   at 64px is proportionally shorter here than at 1440px.
   -------------------------------------------------------------------------- */
@media (min-width:768px) and (max-width:1023px){
  body.ng-v2 .ng-logos{
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 72px,#000 calc(100% - 72px),transparent);
            mask-image:linear-gradient(90deg,transparent,#000 72px,#000 calc(100% - 72px),transparent);
  }

  /* The coordinate ticker is hidden below 768 and is edge-to-edge above it,
     but unlike the logo marquee it has no mask, so the string was guillotined
     mid-glyph at x=0 — the 768 crop opened on "41,0082° K" with the leading
     digit half gone. At 1440 the same clip reads as the strip running off a
     wide page; in a 768 box it just reads as broken text. Only the two ends
     are touched, so the strip's height, background and border are unchanged.
     Alpha stops again, not palette colours. */
  body.ng-v2 .ng-ticker{
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 40px,#000 calc(100% - 40px),transparent);
            mask-image:linear-gradient(90deg,transparent,#000 40px,#000 calc(100% - 40px),transparent);
  }

  /* TAP TARGETS AT 768. §5 above raises every under-44px target to 44px, and
     every rule in it is inside `@media (max-width:767px)` — so 768-1023 was a
     TOUCH width being served the desktop link sizes. Measured on both live
     homepages at 768: eighteen targets under the minimum, fourteen
     .ng-sektor__link at 21px tall and four .ng-product__link at 27px. The same
     eighteen, selector for selector, in both languages — a defect of the shared
     section components, not of either page.

     It survived every previous pass because the checker only enforced tap
     targets below 600px, so nothing ever looked here. Fixed once, in the file
     both homepages already load, rather than per page: the English homepage
     carried a copy of this block whose own comment said to delete it if this
     ever landed, and two copies of a breakpoint fix is how they drift.

     Same idiom as §5: (0,2,1) to beat ng-sections' (0,2,0) without !important,
     min-height rather than extra padding so no baseline moves, and the
     margin pull-backs mirrored because a 44px box adds space above as well. */
  body.ng-v2 .ng-product__link,
  body.ng-v2 .ng-sektor__link,
  body.ng-v2 .ng-hero__link,
  body.ng-v2 .ng-rel__link,
  body.ng-v2 .ng-close__link{
    display:inline-flex;
    align-items:center;
    min-height:44px;
  }
  body.ng-v2 .ng-sektor__link{ margin-top:12px; }
  body.ng-v2 .ng-rel__link{ padding-top:12px; }
  /* Two product links sit side by side in a flex row with a 10px row gap. Once
     each is 44px tall they touch when the row wraps, so the gap is opened to
     the 8px minimum separation a 44px target wants. */
  body.ng-v2 .ng-product__links{ gap:8px 22px; }
  body.ng-v2 .ng-close__tel{
    display:inline-block;
    white-space:nowrap;
    min-height:44px;
    line-height:44px;
  }
}

/* --------------------------------------------------------------------------
   7. TOUCH TARGETS AT EVERY TOUCH WIDTH, INCLUDING EXACTLY 1024px
   ==========================================================================
   This is the ONE hit-area block for the whole site, and it lives here because
   ng-mobile.css is the only stylesheet that every styled page loads — the
   homepage, the 76 converted inner pages and the 26 blog posts.

   It is here because the previous fix was in the wrong file. ng-shared.css got a
   max-width:1024px block, which closed the off-by-one for the inner pages — and
   ng-shared.css is inner-pages-only, so the two HOMEPAGES never received it.
   Measured on the live site afterwards: 18 page-owned targets under 44px at
   exactly 1024 on / and on /en/ — a.ng-cred-bar__link at 274x41, four
   a.ng-product__link at 194x27, and fourteen .ng-sektor__link. A live WCAG 2.5.5
   failure, introduced by fixing the same bug in a file the failing pages do not
   load. Putting the rule where everything can see it is the actual fix; the
   class list below is the union of both sets, so there is one place to look.

   Why max-width:1024px and not 1023: 1024 CSS px is iPad landscape, a touch
   device, and ng-page-check enforces tap targets up to and INCLUDING 1024. Why a
   separate block rather than widening §5 or §6: both of those also set type
   sizes, and changing type at 1024 to fix a hit area would be a layout change
   made for an accessibility reason.

   It overlaps §5 and §6 at the widths they cover. That is deliberate and inert —
   the declarations are identical, so the later one simply wins with the same
   value. Do not "optimise" the overlap away by narrowing this query.
   -------------------------------------------------------------------------- */
@media (max-width:1024px){
  /* homepage section components */
  body.ng-v2 .ng-cred-bar__link,
  body.ng-v2 .ng-product__link,
  /* .ng-product__clink arrived with the seven-product merge (2026-08-17) and
     measured 304x36 at 390 — the fourth time a NEW interactive class has landed
     under 44px. Adding it to this union rather than to the section's own sheet is
     the whole point of §7: one list, one place to look. If you add an
     interactive element anywhere, add it here. */
  body.ng-v2 .ng-product__clink,
  body.ng-v2 .ng-sektor__link,
  body.ng-v2 .ng-hero__link,
  body.ng-v2 .ng-rel__link,
  body.ng-v2 .ng-close__link,
  /* inner-page and post primitives (was ng-shared.css) */
  body.ng-v2 .ng-crumbs__link,
  body.ng-v2 .ng-cta__tel,
  body.ng-v2 .ng-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:44px;
  }
  /* min-WIDTH too, for the short ones: 2.5.5 wants a 44x44 box, and a crumb
     reading "SSS" or a one-letter social pill is narrower than that even when it
     is tall enough. Not applied to the wide links above, where forcing a minimum
     width would stretch a text link away from its label. */
  body.ng-v2 .ng-crumbs__link,
  body.ng-v2 .ng-cta__tel{ min-width:44px; }

  body.ng-v2 .ng-sektor__link{ margin-top:12px; }
  body.ng-v2 .ng-rel__link{ padding-top:12px; }
  body.ng-v2 .ng-product__links{ gap:8px 22px; }
  body.ng-v2 .ng-close__tel{
    display:inline-block;
    white-space:nowrap;
    min-height:44px;
    line-height:44px;
  }
}