/* ===== 0-ticker ===== */
/* ==========================================================================
   NEXT GEO — section 0: coordinate ticker.
   Loaded after ng-foundation.css, scoped to .ng-v2. Tokens only.

   Source: felt.com's fixed coordinate strip (52s linear translateX, hidden
   below 767px) — their own borrowables call it "the single most transferable
   idea and the cheapest to build". Ours ran JetBrains Mono; the client asked
   for the monospace to go, so the strip is now the display sans at 12px with
   0.08em tracking and tabular figures, on --ng-ground with magenta separator
   dots. Tabular figures matter more here than the mono did: the coordinates
   are the only thing on the strip a reader parses digit by digit.

   Two deliberate departures from motion.fixed.json E01, both accessibility:
   1. E01 sets text-transform:uppercase. That is forbidden on Turkish — the
      case engine maps i to I, so "SEÇIMI" instead of "SEÇİMİ". Every string is
      authored pre-uppercased in the markup and this file sets none.
   2. E01 sets line-height:30px inside a 30px box. ng-foundation.css already
      documents why that is wrong at this size: the dot of İ sits above cap
      height and the cedillas of Ş/Ç below the baseline, and overflow:hidden
      then shaves the most recognisably Turkish glyphs off the strip. Here the
      line box is 1.4 and the strip is 34px, so nothing is clipped.
   ========================================================================== */

/* box-sizing is stated locally because ng-foundation.css adds padding-block:4px
   to .ng-ticker and the 34px height must survive it whatever the theme's
   global box model turns out to be. 34 = 4 + 12*1.4 (≈17) + 4, rounded up. */
.ng-v2 .ng-ticker{
  box-sizing:border-box;
  position:relative; z-index:4;
  height:34px; padding-block:4px;
  display:flex; align-items:center;
  overflow:hidden;
  background:var(--ng-ground);
  border-bottom:1px solid var(--ng-hairline);
  contain:layout paint style;   /* safe: nothing overhangs a marquee box */
}

.ng-v2 .ng-ticker__track{
  display:flex; align-items:center; flex:0 0 auto;
  gap:26px; padding-right:26px;
  white-space:nowrap;
  font-family:var(--ng-font-label); font-weight:500;
  font-size:12px; line-height:1.4; letter-spacing:0.08em;
  color:var(--ng-muted);
  text-transform:none;                       /* see header note 1 */
  font-variant-numeric:tabular-nums slashed-zero;
  animation:ng-ticker-x 52s linear infinite;
}
/* Trailing letter-spacing pushes a phantom 0.08em past the last glyph; absorb
   it so the gap before each square is optically even. */
.ng-v2 .ng-ticker__item{ padding-right:0.08em; }

.ng-v2 .ng-ticker__sq{
  flex:0 0 auto; width:6px; height:6px;
  border-radius:var(--ng-radius-pill);   /* round, not square: yersecim's own
                                            separators and pills are circular */
  background:var(--ng-accent);   /* #C61073 on #FAFBFF — decorative, and still
                                    ~5.45:1 if a user reads it as a bullet */
}

/* Each track translates by 100% of ITS OWN width, so three identical tracks
   loop seamlessly with no JS and no measurement. */
@keyframes ng-ticker-x{
  from{ transform:translate3d(0,0,0); }
  to  { transform:translate3d(-100%,0,0); }
}

/* felt hides the strip below 767px and so do we: at phone widths it is one
   truncated string competing with the header for the first 34px of the page. */
@media (max-width:767px){
  .ng-v2 .ng-ticker{ display:none; }
}

/* Decoration with zero unique content — under reduce it is removed outright
   rather than turned into a 34px-tall horizontal scroll box, which renders a
   scrollbar inside the strip on Windows Chrome. */
@media (prefers-reduced-motion:reduce){
  .ng-v2 .ng-ticker{ display:none; }
}


/* ===== 3-logo-band ===== */
/* ==========================================================================
   NEXT GEO — section 3: named client logo band.
   Loaded after ng-foundation.css, scoped to .ng-v2. Tokens only.

   TREATMENT (system.json 4_section_plan section 3): grayscale(100%) at
   OPACITY 1, not atlas.co's grayscale + opacity:.3. atlas is deliberately
   choosing not to make its logo wall a moment; Next Geo must choose the
   opposite, because İş Bankası and Watsons ARE the argument. Colour is
   restored on hover over .3s. Nothing here is dimmed.

   BAND COLOUR: --ng-surface (#FFFFFF), one step brighter than the --ng-ground
   hero above it. That is what lets the logo rasters be flattened opaque — see
   the note in 3-logo-band.html — and it gives the section a panel edge without
   a border-radius or a shadow.
   ========================================================================== */

.ng-v2 .ng-logoband{
  background:var(--ng-surface);
  border-block:1px solid var(--ng-hairline);
  padding-block:48px;            /* tighter than --ng-section-pad: this band is
                                    a statement, not a chapter */
}
@media (max-width:640px){
  .ng-v2 .ng-logoband{ padding-block:36px; }
}

/* The heading is a full sentence, so it is set at reading size, not at the
   44px h2 scale — a 44px 110-character sentence is a wall. (0,2,0) beats the
   foundation's `body.ng-v2 h2` (0,1,2) and the theme's bare `h2` (0,0,1). */
.ng-v2 .ng-logoband__title{
  font-family:var(--ng-font-display); font-weight:500;
  font-size:22px; line-height:1.45; letter-spacing:-0.01em;
  color:var(--ng-ink);
  max-width:56ch;
  margin:0 0 40px;
  text-wrap:balance;
}
@media (max-width:640px){
  .ng-v2 .ng-logoband__title{ font-size:18px; margin-bottom:28px; }
}

/* --- marquee --------------------------------------------------------------
   Fixed height + overflow:hidden + contain, so the track can never grow the
   page. The mask fades both ends so the loop has no hard edge; it stays inside
   .ng-container rather than going full-bleed so the row lines up with the
   heading above it and the section rails elsewhere on the page.
   The #000 in the mask gradient is an ALPHA STOP, not a design colour: a mask
   reads only the alpha channel, so no palette token applies or would help.  */
.ng-v2 .ng-logos{
  position:relative;
  display:flex; width:100%;
  height:32px; overflow:hidden;
  contain:layout paint style;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 64px,#000 calc(100% - 64px),transparent);
          mask-image:linear-gradient(90deg,transparent,#000 64px,#000 calc(100% - 64px),transparent);
}
.ng-v2 .ng-logos__track{
  display:flex; align-items:center; flex:0 0 auto;
  gap:64px; padding-right:64px;
  animation:ng-logos-x 40s linear infinite;
}
.ng-v2 .ng-logos__item{ display:flex; flex:0 0 auto; }

/* width/height are on the <img> too, so each 103x32 box is reserved before the
   raster lands and the row cannot reflow as logos arrive. */
.ng-v2 .ng-logos__logo{
  display:block; height:32px; width:auto;
  filter:grayscale(100%);
  transition:filter .3s cubic-bezier(.25,.46,.45,.94);
}

/* any-hover, not hover: on a touch screen :hover sticks after a tap, which
   would freeze the marquee until the next tap somewhere else. */
@media (any-hover:hover){
  .ng-v2 .ng-logos:hover .ng-logos__track{ animation-play-state:paused; }
  .ng-v2 .ng-logos__item:hover .ng-logos__logo{ filter:grayscale(0); }
}

@keyframes ng-logos-x{
  from{ transform:translate3d(0,0,0); }
  to  { transform:translate3d(-100%,0,0); }
}

@media (max-width:767px){
  .ng-v2 .ng-logos{
    height:28px;
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 24px,#000 calc(100% - 24px),transparent);
            mask-image:linear-gradient(90deg,transparent,#000 24px,#000 calc(100% - 24px),transparent);
  }
  .ng-v2 .ng-logos__track{ gap:44px; padding-right:44px; }
  .ng-v2 .ng-logos__logo{ height:28px; }
}

/* --- reduced motion -------------------------------------------------------
   Not "animation:none" on a 32px-tall overflow:hidden strip — that leaves the
   last five clients permanently unreachable. The row becomes a centred wrapped
   grid at full height and the two aria-hidden duplicate tracks are removed, so
   all eleven logos are visible at once and each is still announced once.    */
@media (prefers-reduced-motion:reduce){
  /* display:block, not flex: as a flex row the track is a max-content-wide
     flex item, so flex-wrap on it can never fire and the row stays clipped.
     contain must go too — paint containment would crop the second row back to
     the 32px box even after height:auto. Both were caught in a render, not by
     reading the CSS. */
  .ng-v2 .ng-logos{
    display:block;
    height:auto; overflow:visible;
    contain:none;
    -webkit-mask-image:none; mask-image:none;
  }
  .ng-v2 .ng-logos__track{
    flex-wrap:wrap; justify-content:center;
    width:100%;
    gap:32px 56px; padding-right:0;
    animation:none;
  }
  .ng-v2 .ng-logos__track[aria-hidden="true"]{ display:none; }
}


/* ===== 10-credentials ===== */
/* ==========================================================================
   NEXT GEO — section 10: credentials.
   Loaded after ng-foundation.css, scoped to .ng-v2. Tokens only.

   Band is --ng-surface-sunken (#EDEFF9): a tonal step, not a dark band.
   capella's metrics strip works because it BREAKS the surrounding tone; here
   the break has to be quiet, because section 12 directly below is indigo and
   two consecutive heavy bands cancel each other out.

   COLOUR NOTE — why the highlight uses --ng-accent and not --ng-accent-display:
   system.fixed.json licenses #E91E8C "on ground and white card at >=24px".
   This band is neither; measured against #EDEFF9 the display magenta lands at
   about 3.64:1, which is still legal for large text but leaves no headroom the
   moment the h2 steps down to 30px on a phone or someone reuses the class on a
   caption. --ng-accent (#C61073) is 4.92:1 on this ground and is legal at
   every size, so the safe token is the one that ships.
   ========================================================================== */

.ng-v2 .ng-cred{
  background:var(--ng-surface-sunken);
}

.ng-v2 .ng-cred__eyebrow{ margin:0 0 16px; }

/* (0,2,0) — clears the foundation's `body.ng-v2 h2` (0,1,2), the theme's bare
   `h1,h2,…` (0,0,1) and `.content-wrapper h1` idiom (0,1,1). */
.ng-v2 .ng-cred__title{
  font-family:var(--ng-font-display); font-weight:600;
  font-size:44px; line-height:1.12; letter-spacing:-0.02em;
  color:var(--ng-ink);
  max-width:24ch;
  margin:0 0 56px;
  text-wrap:balance;
}
.ng-v2 .ng-cred__hl{ color:var(--ng-accent); }
@media (max-width:1024px){ .ng-v2 .ng-cred__title{ font-size:36px; } }
@media (max-width:640px) { .ng-v2 .ng-cred__title{ font-size:30px; margin-bottom:36px; } }

/* --- layout ---------------------------------------------------------------
   The badge leads, the counts support it — 54/46, not 50/50, so the eye lands
   on the third-party artefact first. */
.ng-v2 .ng-cred__grid{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:40px;
  align-items:start;
}
@media (min-width:900px){
  .ng-v2 .ng-cred__grid{ grid-template-columns:minmax(0,54fr) minmax(0,46fr); gap:56px; }
}

/* --- badge ----------------------------------------------------------------
   The Geoawesome asset is a light photographic composite, so it sits on a
   white card with the same shadow pair as the hero figure rather than bleeding
   into the sunken ground. */
.ng-v2 .ng-cred__figure{
  margin:0;
  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,.06), 0 18px 44px -18px rgba(27,31,94,.30);
}
/* width/height are on the <img> too: the 16:9 box is reserved before the
   raster arrives, so nothing below it moves. */
.ng-v2 .ng-cred__img{ display:block; width:100%; height:auto; }
.ng-v2 .ng-cred__caption{
  font-family:var(--ng-font-body);
  font-size:14px; line-height:1.5;
  color:var(--ng-muted);
  padding:14px 18px 16px;
  border-top:1px solid var(--ng-hairline);
}

/* --- counts ---------------------------------------------------------------
   Manrope 500 at 56px is the weight budget's declared numeral role; asking for
   600 or 700 here is how a synthetic bold gets rendered. */
.ng-v2 .ng-cred__stats{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1px;
  background:var(--ng-hairline);   /* the 1px gap IS the rule between cells */
  border:1px solid var(--ng-hairline);
  border-radius:var(--ng-radius);
  box-shadow:var(--ng-shadow-card);
  overflow:hidden;                 /* clips the four cells to the radius */
}
.ng-v2 .ng-cred__stat{
  background:var(--ng-surface);
  padding:24px 22px 20px;
  display:flex; flex-direction:column; gap:6px;
}
.ng-v2 .ng-cred__num{
  font-family:var(--ng-font-display); font-weight:500;
  font-size:56px; line-height:1; letter-spacing:-0.03em;
  color:var(--ng-ink);
  font-variant-numeric:tabular-nums lining-nums slashed-zero;
}
.ng-v2 .ng-cred__label{
  font-family:var(--ng-font-body);
  font-size:15px; line-height:1.4;
  color:var(--ng-muted);
}
@media (max-width:640px){
  .ng-v2 .ng-cred__num{ font-size:44px; }
  .ng-v2 .ng-cred__stat{ padding:18px 16px 16px; }
}

/* E21 writes --ng-ch per element from the real final string when the count-up
   is attached; 3ch is only the fallback so a running "7 -> 14" cannot jitter
   the cell. Harmless while the numerals are static. */
.ng-v2 .ng-count{
  display:inline-block;
  min-width:calc(var(--ng-ch, 3) * 1ch);
}

.ng-v2 .ng-cred__note{
  margin:20px 0 0;
  font-family:var(--ng-font-body);
  font-size:14px; line-height:1.6;
  color:var(--ng-muted);
  max-width:52ch;
}

/* --- company facts -------------------------------------------------------- */
.ng-v2 .ng-cred__meta{ margin:24px 0 0; }
.ng-v2 .ng-cred__row{
  display:flex; align-items:baseline; justify-content:space-between; gap:20px;
  padding:12px 0;
  border-top:1px solid var(--ng-hairline);
}
body.ng-v2 .ng-cred__row dt{        /* body prefix: `dt`/`dd` are bare element
                                       selectors the theme also styles */
  font-family:var(--ng-font-label); font-weight:500;
  font-size:12px; line-height:1.15; letter-spacing:0.06em;
  padding-right:0.06em;             /* absorb the trailing letter-space */
  text-transform:none;              /* Turkish: authored as sentence case here,
                                       never machine-uppercased. Tracking is
                                       0.06em, not the eyebrow's 0.14em, which
                                       only reads correctly on caps. */
  color:var(--ng-muted);
  margin:0;
}
body.ng-v2 .ng-cred__row dd{
  font-family:var(--ng-font-display); font-weight:500;
  font-size:17px; line-height:1.3;
  color:var(--ng-ink);
  margin:0; text-align:right;
}

/* Outbound verification link — same pill idiom as the credential bar. */
/* The bottom margin is load-bearing: this <p> is the last thing before
   .ng-cred__grid, whose first cell is the badge card. At margin:...0 the
   pill's border sat 3px above the card's border and the two read as one
   stuck-together object. */
.ng-v2 .ng-cred__verify{ margin:16px 0 34px; }
.ng-v2 .ng-cred__verify-link{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--ng-font-display); font-weight:600; font-size:15px;
  color:var(--ng-accent); text-decoration:none;
  padding:11px 18px; border-radius:var(--ng-radius-pill);
  border:1.5px solid var(--ng-accent);
  transition:background-color .18s cubic-bezier(.4,0,.2,1), color .18s cubic-bezier(.4,0,.2,1);
}
.ng-v2 .ng-cred__verify-link:hover{ background:var(--ng-accent); color:#FFFFFF; }


/* ===== 4-positioning ===== */
/* ==========================================================================
   NEXT GEO — section 4: positioning statement.
   Loaded after ng-foundation.css / ng-components.css, scoped to .ng-v2.
   Tokens only. Conventions copied from ng-components.css (section 2, hero).
   ========================================================================== */

/* Background comes from .ng-section (--ng-ground). Nothing is restated here.
   The band above (§3 logo wall) is --ng-surface and the band below (§5 product)
   is the indigo .is-dark band, so this section is the warm middle step of a
   white → warm → indigo progression. */
.ng-v2 .ng-pos__title{
  /* (0,2,0) — beats the foundation's `.ng-v2 h2` (0,1,1) for size and the
     theme's `.content-wrapper h2` (0,1,1), which loads after us and would
     otherwise win the tie. No !important needed. */
  font-size:44px;
  line-height:1.22;
  letter-spacing:-0.02em;
  /* Wide enough that every AUTHORED line fits on one rendered line at 44px —
     measured in headless Chrome at 1440px, not estimated. If the copy is ever
     lengthened, re-measure: a line that re-wraps here breaks the stagger's
     rhythm, because the unit of animation is the authored line. */
  max-width:min(100%,980px);
  margin:20px 0 0;
}

/* <strong> defaults to font-weight:700. Manrope ships 400/500/600 only, so 700
   would trigger a SYNTHETIC bold — the atlas.co defect called out in the
   foundation. Pinned back to the one shipped display weight. */
.ng-v2 .ng-pos__lead{
  font-weight:600;
  color:var(--ng-ink);
}

/* Legal use of the display magenta: this span never renders below 28px (see
   the breakpoints at the foot of this file), and #E91E8C on --ng-ground is
   4.04:1 — under the 4.5 body threshold, over the 3.0 large-text threshold.
   Never reuse this token at a smaller size. */
.ng-v2 .ng-pos__hl{ color:var(--ng-accent-display); }

/* The dimmed continuation. --ng-muted on --ng-ground is 6.01:1. */
.ng-v2 .ng-pos__cont{ color:var(--ng-muted); }

.ng-v2 .ng-pos__note{
  margin:28px 0 0;
  font-family:var(--ng-font-label);
  font-weight:500;
  font-size:14px;
  line-height:1.6;
  letter-spacing:0.01em;
  color:var(--ng-muted);
  max-width:76ch;      /* measured on the label face at 14px: one line. 60ch
                          split "Türkçe / yorumlu" across two. */
}

/* --- output plate ----------------------------------------------------------
   Was one sunken #EDEFF9 plate subdivided by hairline dividers — a segmented-
   control idiom that belonged to the old sharp skin. yersecim never divides a
   plate; it sets discrete white cards on the ground and lets the gap do the
   separating. Same three artefacts, same order, same markup: the plate drops
   its fill and becomes a bare grid, and the three cells each become the card.
   The dividers go with it — a gap needs no rule to be read as a break.       */
.ng-v2 .ng-pos__out{
  margin:40px 0 0;
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:20px;
  background:none;
  /* overflow:hidden is gone with the dividers it used to clip; leaving it would
     now crop the cards' own ambient shadow at the grid edge. */
}
@media (min-width:820px){
  .ng-v2 .ng-pos__out{ grid-template-columns:repeat(3,minmax(0,1fr)); }
}
.ng-v2 .ng-pos__cell{
  box-sizing:border-box;
  padding:26px 28px 28px;
  background:var(--ng-surface);
  border:1px solid var(--ng-hairline);
  border-radius:var(--ng-radius);
  box-shadow:var(--ng-shadow-card);
}
/* Authored uppercase, text-transform stays none — "ETKİ" would come back as
   "ETKI" the moment the browser's case engine ran on it. */
.ng-v2 .ng-pos__code{
  margin:0;
  color:var(--ng-accent);          /* #C61073 on #EDEFF9 — 4.92:1, passes AA */
  text-transform:none;
}
/* (0,2,1) — clears the theme's bare `h3` (0,0,1) and `.content-wrapper h3`
   (0,1,1) without !important. 20px, below the 24px floor, so the display
   magenta is NOT usable here and is not used. */
.ng-v2 .ng-pos__out .ng-pos__name{
  margin:12px 0 0;
  font-size:20px; line-height:1.3;
  color:var(--ng-ink);
}
.ng-v2 .ng-pos__body{
  margin:8px 0 0;
  font-size:15px; line-height:1.6;
  color:var(--ng-muted);           /* #5A5E86 on #EDEFF9 — 5.42:1 */
  max-width:40ch;
}

@media (max-width:1023px){
  .ng-v2 .ng-pos__title{ font-size:34px; }
}
@media (max-width:640px){
  /* 28px, not the foundation's 30px h2 step: the authored line spans stay on
     one line each down to ~360px at this size, and 28px keeps the highlight
     span above the 24px floor that --ng-accent-display requires. */
  .ng-v2 .ng-pos__title{ font-size:28px; line-height:1.3; }
  .ng-v2 .ng-pos__note{ font-size:13px; margin-top:22px; }
  .ng-v2 .ng-pos__out{ margin-top:28px; border-radius:var(--ng-radius); }
  .ng-v2 .ng-pos__cell{ padding:20px; }
  .ng-v2 .ng-pos__out .ng-pos__name{ font-size:19px; }
}

/* --- motion (motion.fixed.json E11) ---------------------------------------
   The reveal engine only observes `.ng-anim, .ng-card`, so the <h2> has to
   carry .ng-anim to receive .is-in. But the shipped .ng-anim resting state
   (opacity 0 + 10px blur + 20px lift) would then animate the whole block AND
   its lines — two overlapping entrances on the page's biggest sentence.
   So the block's own resting state is cancelled here at (0,4,1), which beats
   the shipped (0,3,1), and the <h2> becomes nothing but the .is-in carrier;
   the lines do all the moving. CSS descends into the spans — events do not,
   which is why this is a descendant selector and not a second observer. */
.ng-v2 .ng-lines{ display:block; }
.ng-v2 .ng-lines .ng-line{ display:block; }

html[data-ng-motion="on"] .ng-v2 .ng-pos__title.ng-anim{
  opacity:1; filter:none; transform:none;
}
html[data-ng-motion="on"] .ng-v2 .ng-lines .ng-line{
  opacity:0;
  transform:translate3d(0,14px,0);
  /* power3.out */
  transition:opacity .5s cubic-bezier(.215,.61,.355,1),
             transform .5s cubic-bezier(.215,.61,.355,1);
}
html[data-ng-motion="on"] .ng-v2 .ng-lines.is-in .ng-line{ opacity:1; transform:none; }
html[data-ng-motion="on"] .ng-v2 .ng-lines.is-in .ng-line:nth-child(1){ transition-delay:0ms; }
html[data-ng-motion="on"] .ng-v2 .ng-lines.is-in .ng-line:nth-child(2){ transition-delay:70ms; }
html[data-ng-motion="on"] .ng-v2 .ng-lines.is-in .ng-line:nth-child(3){ transition-delay:140ms; }
html[data-ng-motion="on"] .ng-v2 .ng-lines.is-in .ng-line:nth-child(n+4){ transition-delay:210ms; }

/* The lines sit two levels below the revealed element, which is exactly the
   depth the motion spec's original one-level rescue selector missed. Named
   explicitly here so a reduced-motion user can never get a blank statement. */
@media (prefers-reduced-motion:reduce){
  .ng-v2 .ng-lines .ng-line{
    opacity:1 !important; transform:none !important; transition:none !important;
  }
}


/* ===== 5-product ===== */
/* ==========================================================================
   NEXT GEO — section 5: product (INDIGO .is-dark band).
   Loaded after ng-foundation.css / ng-components.css, scoped to .ng-v2.

   Decisions, with reasons:
   - .is-dark sits on the <section>, so var(--ng-ground) resolves to #1B1F5E on
     that same element and .ng-section's own background rule inverts the band
     with no extra background declaration here. No hand-rolled dark colours.
   - Contrast on this band was recomputed against the COMPOSITED card surface,
     not against the band, because --ng-surface on dark is rgba(250,251,255,.06)
     over indigo = #282C68: ink 12.30:1, muted 7.84:1, accent (#FF9BC9) 6.53:1.
     All pass AA at the sizes used here, which is why the links may take the
     accent token at 15px on this surface.
   - The figure is a fixed 16/9 box for card 1 (a real screenshot). Cards 2 and 3
     no longer hold a raster at all: their generated stand-ins misrepresented the
     products, so the visual is now REAL DOM output inside the same framed box.
     DOM sizes itself, so those two frames are auto-height rather than 16/9 —
     a chat thread squeezed into 16/9 at 390px would be 174px tall and illegible.
   - The DOM panels sit on --ng-indigo-deep, one step BELOW the card surface, so
     they read as an inset screen rather than another marketing card. Contrast
     recomputed on that composite: rows are rgba(250,251,255,.06) over #13163F =
     #21244B, giving ink 14.32:1, muted 9.12:1, accent 7.60:1. All pass AA.
   - No WhatsApp logo, wordmark or brand green anywhere. Only the LAYOUT idiom
     (alignment, corner cuts, tails, timestamps, delivery ticks), drawn in our
     own tokens. We have no licence for the marks and a fake-branded mockup is
     worse than none.
   - .ng-anim goes on the <article>, never on an element that also wants a
     hover transform: html[data-ng-motion="on"] .ng-v2 .ng-anim.is-in{transform:none}
     scores (0,4,1) and would outrank any :hover rule written here.
   - The hero's .ng-card class is deliberately NOT reused. It is position:absolute
     in ng-components.css and would rip these cards out of the grid.
   ========================================================================== */

/* --- head ----------------------------------------------------------------- */
.ng-v2 .ng-product__head{ max-width:64ch; }
.ng-v2 .ng-product__title{ margin-top:14px; text-wrap:balance; }
/* legal: this span only ever renders at h2 size (44px / 36px / 30px), and
   --ng-accent-display is display-only (>=24px). Never reuse it on body copy. */
.ng-v2 .ng-product__hl{ color:var(--ng-accent-display); }
.ng-v2 .ng-product__lede{
  margin:16px 0 0;
  font-size:18px; line-height:1.6;
  color:var(--ng-muted);
  max-width:58ch;
}

/* --- stack ---------------------------------------------------------------- */
.ng-v2 .ng-product__stack{
  margin-top:56px;
  display:grid;
  gap:24px;
}
.ng-v2 .ng-product__item{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:26px;
  align-items:center;
  padding:26px;
  border:1px solid var(--ng-hairline);
  border-radius:var(--ng-radius);
  background:var(--ng-surface);   /* on dark: rgba(250,251,255,.06) */
}
/* radar's 25/75 split, rounded to 27/73 so the copy column still fits
   "WhatsApp Lokasyon Raporu" on one line at 1240px. */
@media (min-width:960px){
  .ng-v2 .ng-product__item{
    grid-template-columns:minmax(0,27fr) minmax(0,73fr);
    gap:44px;
    padding:32px;
  }
}

/* --- copy ----------------------------------------------------------------- */
.ng-v2 .ng-product__name{ font-size:24px; line-height:1.25; }
.ng-v2 .ng-product__body{
  margin:12px 0 0;
  font-size:16px; line-height:1.65;
  color:var(--ng-muted);
  max-width:46ch;
}
.ng-v2 .ng-product__links{
  margin:18px 0 0;
  display:flex; flex-wrap:wrap; gap:10px 22px;
}
.ng-v2 .ng-product__link{
  display:inline-flex; align-items:center; gap:.45em;
  font-family:var(--ng-font-display); font-weight:500; font-size:15px;
  color:var(--ng-accent);          /* #FF9BC9 on this band — 6.53:1 */
  text-decoration:none;
  border-bottom:1px solid transparent;
  transition:color .16s cubic-bezier(.4,0,.2,1),
             border-color .16s cubic-bezier(.4,0,.2,1);
}
.ng-v2 .ng-product__link::after{
  content:"\2192";                 /* → — decorative; the label already names
                                      the destination, so nothing is lost if a
                                      screen reader skips or reads it. */
  transition:transform .16s cubic-bezier(.4,0,.2,1);
}
.ng-v2 .ng-product__link:hover{
  color:var(--ng-accent-hover);
  border-bottom-color:currentColor;
}
.ng-v2 .ng-product__link:hover::after{ transform:translateX(3px); }

/* --- visual --------------------------------------------------------------- */
.ng-v2 .ng-product__figure{ margin:0; }
.ng-v2 .ng-product__frame{
  border:1px solid var(--ng-hairline);
  border-radius:var(--ng-radius-sm);
  overflow:hidden;
  background:var(--ng-surface-sunken);
  box-shadow:0 18px 40px -22px rgba(27,31,94,.55);
}
/* aspect-ratio, not intrinsic height: this is the reserved slot. width/height
   are also on the <img> so the box holds before the raster arrives. */
.ng-v2 .ng-product__img{
  display:block;
  width:100%; height:100%;
  aspect-ratio:16/9;
  object-fit:cover;
  object-position:center;
}
.ng-v2 .ng-product__cap{
  margin-top:10px;
  font-family:var(--ng-font-label); font-weight:500;
  font-size:12px; line-height:1.4; letter-spacing:.04em;
  color:var(--ng-muted);
  text-transform:none;             /* Turkish: never uppercase in CSS */
}

/* ==========================================================================
   DOM PRODUCT OUTPUT — shared chrome for the GeoBrain and chat panels.
   ========================================================================== */

.ng-v2 .ng-product__frame--ui{
  background:var(--ng-indigo-deep);   /* same value in both palettes */
  display:flex;
}
.ng-v2 .ng-ui{
  flex:1 1 auto;
  min-width:0;
  display:flex;
  flex-direction:column;
}

/* --- panel chrome bar ----------------------------------------------------- */
.ng-v2 .ng-ui__bar{
  display:flex; align-items:center; gap:10px;
  padding:11px 14px;
  border-bottom:1px solid var(--ng-hairline);
  background:var(--ng-surface);       /* .06 over #13163F = #21244B */
}
.ng-v2 .ng-ui__tag,
.ng-v2 .ng-ui__flag,
.ng-v2 .ng-ui__label{
  font-family:var(--ng-font-label); font-weight:500;
  letter-spacing:.08em;
  text-transform:none;               /* Turkish: authored uppercase, never CSS */
  margin:0;
}
.ng-v2 .ng-ui__tag{ font-size:12px; color:var(--ng-ink); }
.ng-v2 .ng-ui__meta{
  font-size:13px; color:var(--ng-muted);
  min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
/* The honesty chip. Repeated in the figcaption so it survives a crop. */
.ng-v2 .ng-ui__flag{
  margin-left:auto; flex:none;
  font-size:10px;
  color:var(--ng-accent);
  border:1px solid var(--ng-accent);
  border-radius:var(--ng-radius-pill);
  padding:2px 8px;
  opacity:.9;
}
.ng-v2 .ng-ui__label{ font-size:11px; color:var(--ng-muted); }
.ng-v2 .ng-ui__body{ padding:20px 18px 22px; }

.ng-v2 .ng-ui__avatar{
  flex:none;
  width:26px; height:26px; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  /* 11px: the app-replica floor the contract sets. These are two-letter
     initials in a 26px circle, so the extra pixel costs nothing — the glyphs
     are nowhere near the circle's edge. */
  font-family:var(--ng-font-label); font-weight:500; font-size:11px;
  letter-spacing:.04em; text-transform:none;
  color:var(--ng-ink);
  background:var(--ng-surface-sunken);
  border:1px solid var(--ng-hairline);
}

/* the theme ships list/dl margins and a ul>li:before chevron; neutralise both
   inside these panels without touching anything outside .ng-v2. */
body.ng-v2 .ng-ui dl,
body.ng-v2 .ng-ui dt,
body.ng-v2 .ng-ui dd{ margin:0; padding:0; }
body.ng-v2 .ng-ui dd::before,
body.ng-v2 .ng-ui dt::before{ content:none; }

/* --- GeoBrain: score + fields + the written recommendation ---------------- */
.ng-v2 .ng-brain__top{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:20px;
  padding-bottom:18px;
  border-bottom:1px solid var(--ng-hairline);
}
.ng-v2 .ng-brain__num{
  margin:6px 0 0;
  font-family:var(--ng-font-display); font-weight:600;
  font-size:52px; line-height:1;
  color:var(--ng-ink);
  font-variant-numeric:tabular-nums;
}
.ng-v2 .ng-brain__den{
  font-size:18px; font-weight:500;
  color:var(--ng-muted);
  margin-left:2px;
}
.ng-v2 .ng-brain__bar{
  margin-top:12px;
  height:5px; border-radius:var(--ng-radius-pill);
  background:var(--ng-surface-sunken);
  overflow:hidden;
  max-width:200px;
}
/* 72% == the 72 printed above it. Keep the two in step if the number changes. */
.ng-v2 .ng-brain__fill{
  display:block; height:100%; width:72%;
  border-radius:var(--ng-radius-pill);
  background:var(--ng-accent);
}
.ng-v2 .ng-brain__facts{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px 18px;
  align-content:start;
}
.ng-v2 .ng-brain__fact{
  padding:10px 12px;
  border:1px solid var(--ng-hairline);
  border-radius:var(--ng-radius-sm);
  background:var(--ng-surface);
}
.ng-v2 .ng-brain__val{
  margin-top:5px;
  font-family:var(--ng-font-label); font-weight:500;
  font-size:17px; line-height:1.2;
  color:var(--ng-ink);
  font-variant-numeric:tabular-nums;
}
.ng-v2 .ng-brain__note{ padding-top:16px; }
.ng-v2 .ng-brain__notehead{ margin-bottom:10px; }
.ng-v2 .ng-brain__ln{
  margin:0 0 8px;
  font-size:15px; line-height:1.6;
  color:var(--ng-ink);
  max-width:62ch;
}
.ng-v2 .ng-brain__ln:last-child{ margin-bottom:0; }
.ng-v2 .ng-brain__caret{
  display:inline-block;
  width:2px; height:1em;
  margin-left:3px;
  vertical-align:-.14em;
  background:var(--ng-accent);
  animation:ng-caret 1.05s steps(1) infinite;
}
@keyframes ng-caret{ 0%,49%{opacity:1} 50%,100%{opacity:0} }

/* Type-on substitute, engine-driven, zero script: the three sentences arrive in
   sequence so the paragraph reads as being written. The blur+20px lift of the
   generic reveal is wrong for running text, so this overrides the hidden state
   at equal specificity (0,4,1) and simply fades each line up 6px. */
html[data-ng-motion="on"] .ng-v2 .ng-brain__ln{
  transform:translateY(6px);
  filter:none;
}
html[data-ng-motion="on"] .ng-v2 .ng-brain__ln.is-in{
  filter:none;
  transition:opacity .45s cubic-bezier(.25,.1,.25,1),
             transform .45s cubic-bezier(.25,.1,.25,1);
}
html[data-ng-motion="on"] .ng-v2 .ng-brain__ln--1.is-in{ transition-delay:.70s; }
html[data-ng-motion="on"] .ng-v2 .ng-brain__ln--2.is-in{ transition-delay:1.25s; }
html[data-ng-motion="on"] .ng-v2 .ng-brain__ln--3.is-in{ transition-delay:1.80s; }
html[data-ng-motion="on"] .ng-v2 .ng-chat__row--t1.is-in{ transition-delay:.55s; }
html[data-ng-motion="on"] .ng-v2 .ng-chat__row--t2.is-in{ transition-delay:1.15s; }

@media (prefers-reduced-motion:reduce){
  .ng-v2 .ng-brain__caret{ animation:none; }
}

/* --- chat thread ---------------------------------------------------------- */
.ng-v2 .ng-chat{
  padding:20px 18px 22px;
  display:flex; flex-direction:column; gap:16px;
  max-width:620px; width:100%; margin:0 auto;
}
.ng-v2 .ng-chat__row{ display:flex; }
.ng-v2 .ng-chat__row--out{ justify-content:flex-end; }
.ng-v2 .ng-chat__row--in{ justify-content:flex-start; }
.ng-v2 .ng-chat__bubble{
  position:relative;
  max-width:86%;
  padding:11px 13px 8px;
  border-radius:var(--ng-radius);
  border:1px solid var(--ng-hairline);
}
/* Bubble tails. Both fills composite over the SAME panel ground, so the
   triangle drawn in the bubble's own colour matches it exactly. */
.ng-v2 .ng-chat__bubble::after{
  content:""; position:absolute; top:10px;
  width:0; height:0;
  border-top:6px solid transparent;
  border-bottom:6px solid transparent;
}
.ng-v2 .ng-chat__bubble--out{
  background:var(--ng-accent-wash);
  border-top-right-radius:4px;
}
.ng-v2 .ng-chat__bubble--out::after{
  right:-6px;
  border-left:7px solid var(--ng-accent-wash);
}
.ng-v2 .ng-chat__bubble--in{
  background:var(--ng-surface);
  border-top-left-radius:4px;
  max-width:92%;
}
.ng-v2 .ng-chat__bubble--in::after{
  left:-6px;
  border-right:7px solid var(--ng-surface);
}
.ng-v2 .ng-chat__text{
  margin:0;
  font-size:15px; line-height:1.5;
  color:var(--ng-ink);
}
.ng-v2 .ng-chat__stamp{
  margin:5px 0 0;
  text-align:right;
  /* 11px: the app-replica floor. Last of the four selectors that sat under it.
     A real chat timestamp is genuinely tiny, which is the argument for 10px, but
     the contract does not carve out an exception for verisimilitude and a page
     that breaks its own stated floor once will break it again. */
  font-family:var(--ng-font-label); font-weight:500;
  font-size:11px; letter-spacing:.06em; text-transform:none;
  color:var(--ng-muted);
}
/* Delivery ticks. U+2713 is not in Manrope's cmap (nor was it in the mono's),
   so it falls back to whatever the system supplies and at 10px the pair read
   as "//" in the screenshot. Drawn as inline SVG instead — no icon font, no
   script, currentColor. */
.ng-v2 .ng-chat__tick{
  display:inline-block; vertical-align:-1px;
  margin-left:5px;
  color:var(--ng-accent);
}

/* the incoming bubble carries the report itself */
.ng-v2 .ng-chat__card{
  border:1px solid var(--ng-hairline);
  border-radius:var(--ng-radius-sm);
  padding:12px 13px 10px;
  background:var(--ng-surface-sunken);
}
.ng-v2 .ng-chat__addr{
  margin:6px 0 0;
  font-size:14px; line-height:1.45;
  color:var(--ng-ink);
}
.ng-v2 .ng-chat__score{
  margin:12px 0 0;
  display:flex; align-items:baseline; gap:2px;
}
.ng-v2 .ng-chat__num{
  font-family:var(--ng-font-display); font-weight:600;
  font-size:32px; line-height:1;
  color:var(--ng-ink);
  font-variant-numeric:tabular-nums;
}
.ng-v2 .ng-chat__den{ font-size:14px; color:var(--ng-muted); }
.ng-v2 .ng-chat__scorelab{
  margin-left:8px;
  font-family:var(--ng-font-label); font-weight:500;
  font-size:11px; letter-spacing:.06em; text-transform:none;
  color:var(--ng-muted);
}
.ng-v2 .ng-chat__rows{
  margin-top:12px;
  border-top:1px solid var(--ng-hairline);
}
.ng-v2 .ng-chat__rw{
  display:flex; align-items:baseline; justify-content:space-between; gap:14px;
  padding:7px 0;
  border-bottom:1px solid var(--ng-hairline);
}
.ng-v2 .ng-chat__rw:last-child{ border-bottom:0; padding-bottom:0; }
.ng-v2 .ng-chat__k{
  font-size:13px; color:var(--ng-muted);
}
.ng-v2 .ng-chat__v{
  font-family:var(--ng-font-label); font-weight:500;
  font-size:14px; color:var(--ng-ink);
  font-variant-numeric:tabular-nums;
}

@media (min-width:760px){
  .ng-v2 .ng-brain__top{ grid-template-columns:minmax(0,190px) minmax(0,1fr); gap:26px; }
  .ng-v2 .ng-ui__body{ padding:24px 22px 26px; }
  .ng-v2 .ng-chat{ padding:26px 22px 28px; gap:18px; }
  .ng-v2 .ng-chat__bubble{ max-width:80%; }
  .ng-v2 .ng-chat__bubble--in{ max-width:90%; }
  .ng-v2 .ng-chat__addr{ font-size:15px; }
}

@media (max-width:640px){
  .ng-v2 .ng-product__stack{ margin-top:36px; gap:18px; }
  .ng-v2 .ng-product__item{ padding:20px; border-radius:var(--ng-radius); }
  .ng-v2 .ng-product__lede{ font-size:17px; }
  .ng-v2 .ng-brain__num{ font-size:44px; }
  .ng-v2 .ng-brain__facts{ gap:10px 10px; }
  .ng-v2 .ng-brain__ln{ font-size:14.5px; }
  .ng-v2 .ng-ui__meta{ font-size:12px; }
}

/* 390px is the tightest real device: the fields must not go to one column and
   double the panel height, so they stay 2-up with tighter padding. */
@media (max-width:400px){
  .ng-v2 .ng-brain__fact{ padding:8px 9px; }
  .ng-v2 .ng-brain__val{ font-size:15px; }
  /* Was 10px, under the contract's 11px app-replica floor — and this narrow
     query is why seven of these read as sub-floor type at 390 while the same
     class was compliant at every other width. The tracking drop from .08em to
     .05em is what buys the room back, so the label still fits its panel. */
  .ng-v2 .ng-ui__label{ font-size:11px; letter-spacing:.05em; }
  .ng-v2 .ng-chat__bubble{ max-width:94%; }
  .ng-v2 .ng-chat__bubble--in{ max-width:100%; }
}

/* ==========================================================================
   THE SEVEN-PRODUCT MERGE (2026-08-17)
   Added when section 11 "Ürün ailesinin geri kalanı" was folded into this band.
   Two new shapes: a paired figure (Point Report shows two outputs) and a card
   grid for the five products that have no imagery.
   ========================================================================== */

/* --- paired figure --------------------------------------------------------
   Point Report's two replicas side by side: the score card is what the report
   says, the thread is how it is asked for. Two frames rather than one wide one,
   because they are two different surfaces and a single frame around both would
   imply one screen. Stacks below 1000px, where 2 x ~340px stops being legible —
   the score card's four fact tiles are the constraint, not the chat bubbles. */
.ng-v2 .ng-product__figure--pair{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:14px;
}
@media (min-width:1000px){
  .ng-v2 .ng-product__figure--pair{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  /* The caption spans both frames: it describes the pair, not the second one. */
  .ng-v2 .ng-product__figure--pair > .ng-product__cap{ grid-column:1 / -1; }
}

/* --- the five text-only products -----------------------------------------
   On the indigo band, so surfaces come from .is-dark's tokens: --ng-surface is
   6% paper and --ng-hairline 16% paper there, which is how every card inside a
   dark band on this site separates. No shadow: --ng-shadow-card is `none` under
   .is-dark, deliberately, because a navy-tinted drop on navy is a smudge.
   Three-up at desktop and the last row simply runs short — a 5-item grid cannot
   divide evenly, and stretching two cards to fill the row would make them read
   as more important than the other three. */
.ng-v2 .ng-product__grid{
  list-style:none;
  margin:40px 0 0;
  padding:0;
  display:grid;
  gap:16px;
  grid-template-columns:minmax(0,1fr);
}
@media (min-width:680px){
  .ng-v2 .ng-product__grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (min-width:1000px){
  .ng-v2 .ng-product__grid{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; }
}
.ng-v2 .ng-product__card{
  display:flex; flex-direction:column;
  padding:24px 22px 22px;
  background:var(--ng-surface);
  border:1px solid var(--ng-hairline);
  border-radius:var(--ng-radius);
}
/* (0,3,0) doubled — the theme's `body .content-wrapper h?:not(:first-child)`
   sets margin-top:50px at (0,2,2) and has beaten card titles on this site
   before. Same defence every heading class here uses. */
.ng-v2 .ng-product__card .ng-product__cname.ng-product__cname{
  margin:0;
  font-family:var(--ng-font-display); font-weight:600;
  font-size:20px; line-height:1.28; letter-spacing:-0.012em;
  color:var(--ng-ink);
}
.ng-v2 .ng-product__cbody{
  margin:12px 0 0;
  font-size:15px; line-height:1.62;
  color:var(--ng-muted);
}
/* margin-top:auto so every card's link sits on the same baseline regardless of
   how long its body runs — the five bodies differ by more than 100 characters. */
.ng-v2 .ng-product__clink{
  display:inline-flex; align-items:center; gap:.45em;
  margin-top:auto; padding-top:18px;
  font-family:var(--ng-font-display); font-weight:600;
  font-size:15px; line-height:1.2;
  color:var(--ng-accent);          /* .is-dark swaps this to the pink tier */
  text-decoration:none;
}
.ng-v2 .ng-product__clink:hover{ text-decoration:underline; text-underline-offset:4px; }
@media (any-hover:hover){
  .ng-v2 .ng-product__clink:hover .ng-arrow{ transform:translate3d(4px,0,0); }
}
@media (max-width:767px){
  .ng-v2 .ng-product__cbody{ font-size:16px; }
  .ng-v2 .ng-product__card{ padding:22px 18px 20px; }
}

/* --- the GeoBrain card inside a PAIRED figure ------------------------------
   Caught in a screenshot, not by ng-page-check, which reported the page clean:
   at 1440 the paired figure gives each frame ~340px instead of ~700px, and the
   rule at §"desktop" above splits .ng-brain__top into a 190px score column plus
   the facts. That left the four fact tiles about 55px wide each and "18.400" ran
   straight into "46.900" — two numbers touching, which reads as one wrong number.

   (0,3,0), so it beats the (0,2,0) desktop rule regardless of source order: the
   score goes back above the facts and the tiles get the frame's full width. Only
   inside a pair — the single-frame case still has room for the side-by-side. */
.ng-v2 .ng-product__figure--pair .ng-brain__top{
  grid-template-columns:minmax(0,1fr);
  gap:16px;
}


/* ==========================================================================
   PRODUCT SWITCHER — deck 2, slide 2
   "Bu bölümde (sektörlerdeki gibi) her bir ürün butonlarla ayrılacak şekilde
   gösterelim." So this is 7-sectors' mechanism rather than a second invention:
   a native radio group with CSS `:checked ~` switching and no JavaScript. It
   works with JS blocked or still loading, inherits arrow-key roving focus from
   the radio group, and survives a back-navigation because the browser restores
   the checked input.

   The band was one panel plus six cards, which rendered six of seven products
   as also-rans beside the one that happened to have a screenshot. As seven peer
   panels they are equals, which is what was asked for.

   THIS BAND IS `is-dark`, so every colour below is a dark-band token. These
   chips sit ON the indigo — unlike the ÖRNEK flag in §17, which sits on a white
   raster and must NOT invert. Do not copy this block onto a light band.
   ========================================================================== */

.ng-v2 .ng-product__ui{
  border:0; margin:36px 0 0; padding:0;
  min-inline-size:0;                  /* a fieldset defaults to min-width:min-content,
                                         which makes a long panel overflow its grid */
}
/* Names the radio group for assistive tech without drawing it. Not display:none,
   which would remove it from the accessibility tree too. */
.ng-v2 .ng-product__legend{
  position:absolute; width:1px; height:1px;
  margin:-1px; padding:0; border:0;
  clip-path:inset(50%); overflow:hidden; white-space:nowrap;
}
/* The radios ARE the state. Visually removed only — they stay focusable and in
   the accessibility tree, so keyboard and screen-reader users keep the control. */
.ng-v2 .ng-product__radio{
  position:absolute; width:1px; height:1px;
  opacity:0; pointer-events:none; margin:0;
}

.ng-v2 .ng-product__chips{ display:flex; flex-wrap:wrap; gap:8px; }
.ng-v2 .ng-product__chip{
  display:inline-flex; align-items:center;
  min-height:44px;                    /* 2.5.5 — these are the section's controls */
  padding:9px 16px;
  border-radius:var(--ng-radius-pill);
  border:1px solid var(--ng-border-strong);
  background:transparent;
  font-family:var(--ng-font-display); font-weight:500;
  font-size:15px; line-height:1.15;   /* not 1: the İ dot and the Ç/Ş cedillas sit
                                         outside cap height and baseline */
  text-transform:none;
  color:var(--ng-ink);
  cursor:pointer;
  transition:border-color .16s cubic-bezier(.25,.46,.45,.94),
             background-color .16s cubic-bezier(.25,.46,.45,.94),
             color .16s cubic-bezier(.25,.46,.45,.94);
}
.ng-v2 .ng-product__chip:hover{ border-color:var(--ng-accent); color:var(--ng-accent); }

.ng-v2 #urn-lokasyon-analizi-web:checked ~ .ng-product__chips [for="urn-lokasyon-analizi-web"],
.ng-v2 #urn-point-report:checked ~ .ng-product__chips [for="urn-point-report"],
.ng-v2 #urn-lokasyon-analizi-mobile:checked ~ .ng-product__chips [for="urn-lokasyon-analizi-mobile"],
.ng-v2 #urn-kurulum-ve-entegrasyon:checked ~ .ng-product__chips [for="urn-kurulum-ve-entegrasyon"],
.ng-v2 #urn-adres-cozumleri:checked ~ .ng-product__chips [for="urn-adres-cozumleri"],
.ng-v2 #urn-next-geo-tailor:checked ~ .ng-product__chips [for="urn-next-geo-tailor"],
.ng-v2 #urn-sahanin-gucu:checked ~ .ng-product__chips [for="urn-sahanin-gucu"],
.ng-v2 #urn-geoview:checked ~ .ng-product__chips [for="urn-geoview"]{
  background:var(--ng-cta-fill);
  border-color:var(--ng-cta-fill);
  color:var(--ng-cta-label);
}
/* The ring is driven from the INPUT: the input takes focus, the label is seen. */
.ng-v2 #urn-lokasyon-analizi-web:focus-visible ~ .ng-product__chips [for="urn-lokasyon-analizi-web"],
.ng-v2 #urn-point-report:focus-visible ~ .ng-product__chips [for="urn-point-report"],
.ng-v2 #urn-lokasyon-analizi-mobile:focus-visible ~ .ng-product__chips [for="urn-lokasyon-analizi-mobile"],
.ng-v2 #urn-kurulum-ve-entegrasyon:focus-visible ~ .ng-product__chips [for="urn-kurulum-ve-entegrasyon"],
.ng-v2 #urn-adres-cozumleri:focus-visible ~ .ng-product__chips [for="urn-adres-cozumleri"],
.ng-v2 #urn-next-geo-tailor:focus-visible ~ .ng-product__chips [for="urn-next-geo-tailor"],
.ng-v2 #urn-geoview:focus-visible ~ .ng-product__chips [for="urn-geoview"]{
  outline:2px solid var(--ng-cta-fill);
  outline-offset:3px;
}

.ng-v2 .ng-product__panels{
  position:relative;
  min-height:320px;
  margin-top:28px;
}
.ng-v2 .ng-product__panel{
  position:absolute; inset:0;
  opacity:0; visibility:hidden;
  display:grid; grid-template-columns:minmax(0,1fr); gap:28px;
  box-sizing:border-box;              /* an inset:0 absolute box overflows without it */
  transition:opacity .18s cubic-bezier(.25,.46,.45,.94);
}
@media (min-width:960px){
  .ng-v2 .ng-product__panel{
    grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);
    gap:44px; align-items:center;
  }
}
/* The checked panel rejoins the flow, so the container sizes to it and the
   min-height above is only a floor. */
.ng-v2 #urn-lokasyon-analizi-web:checked ~ .ng-product__panels #urn-lokasyon-analizi-web-panel,
.ng-v2 #urn-point-report:checked ~ .ng-product__panels #urn-point-report-panel,
.ng-v2 #urn-lokasyon-analizi-mobile:checked ~ .ng-product__panels #urn-lokasyon-analizi-mobile-panel,
.ng-v2 #urn-kurulum-ve-entegrasyon:checked ~ .ng-product__panels #urn-kurulum-ve-entegrasyon-panel,
.ng-v2 #urn-adres-cozumleri:checked ~ .ng-product__panels #urn-adres-cozumleri-panel,
.ng-v2 #urn-next-geo-tailor:checked ~ .ng-product__panels #urn-next-geo-tailor-panel,
.ng-v2 #urn-sahanin-gucu:checked ~ .ng-product__panels #urn-sahanin-gucu-panel,
.ng-v2 #urn-geoview:checked ~ .ng-product__panels #urn-geoview-panel{
  position:relative; inset:auto;
  opacity:1; visibility:visible;
}

.ng-v2 .ng-product__note{ margin-top:26px; }

@media (max-width:767px){
  .ng-v2 .ng-product__ui{ margin-top:26px; }
  .ng-v2 .ng-product__chips{ gap:6px; }
  .ng-v2 .ng-product__chip{ padding:8px 13px; font-size:14px; }
  .ng-v2 .ng-product__panels{ min-height:0; margin-top:20px; }
  .ng-v2 .ng-product__panel{ gap:22px; }
}

@media (prefers-reduced-motion:reduce){
  .ng-v2 .ng-product__panel{ transition:none; }
}


/* ===== 5b-whatsapp ===== */
/* ==========================================================================
   NEXT GEO — section 5b: WhatsApp Lokasyon Raporu. Light band.
   Loaded after ng-foundation.css / ng-components.css, scoped to .ng-v2.

   Decisions, with reasons:
   - LIGHT BAND ON PURPOSE. Section 5 (products) is the INDIGO .is-dark break and
     section 6 (solutions) is light again. Making this one dark too would merge it
     into section 5 as one long dark run and lose the tonal rhythm the page is
     built on — the emphasis here comes from the band being the only one on the
     page with a full-height vertical figure, not from inverting it.
   - THE FIGURE IS 9/16 AND CAPPED AT 340px. The source is 1080x1920. A vertical
     video allowed to size itself against a 1240px container would be over 700px
     tall and push the copy off the first screen; 340px keeps the whole band
     inside one viewport at 1440x900, which is where the emphasis actually comes
     from.
   - aspect-ratio, not a padding-top box. The frame must reserve its exact height
     before the stills decode or the copy column jumps when they arrive — and
     this band is tall enough that the shift would be a CLS finding, not a
     cosmetic one.
   - THE CROSS-FADE IS CSS, NOT JS. It is the low-bandwidth path, so it has to
     work when the script never runs. Six slides, 3.4s each, 20.4s cycle.
   - NO text-transform anywhere. The eyebrow is authored already-uppercase, for
     the reason recorded across this codebase: the browser's case engine maps
     i to I, never to İ, so "İLETİŞİM" would come back as "ILETIŞIM".
   ========================================================================== */

.ng-v2 .ng-wa{
  background:var(--ng-ground);
  /* The section carries an id, so it can be linked to. The theme header is
     fixed and ~76px tall, and without this the eyebrow lands underneath it —
     measured, by screenshotting the band after scrollIntoView(). */
  scroll-margin-top:96px;
}

/* THREE grid children, not two, and the reason is the phone layout.
   With one copy column the figure could only land above or below ALL of the
   copy — and below meant ~1,400px of scrolling before the video appeared on a
   390px screen, measured. Splitting head (eyebrow/title/lede) from body
   (steps/note/actions) lets the figure sit between them on phones, which is
   where it earns its place, while the desktop layout is unchanged: the media
   spans both rows of column 2. */
.ng-v2 .ng-wa__grid{
  display:grid;
  grid-template-columns:1fr;
  gap:26px;
  align-items:center;
}
.ng-v2 .ng-wa__head{ order:1; }
.ng-v2 .ng-wa__media{ order:2; }
.ng-v2 .ng-wa__body{ order:3; }

@media (min-width:900px){
  .ng-v2 .ng-wa__grid{
    grid-template-columns:minmax(0,1fr) 340px;
    grid-template-rows:auto auto;
    column-gap:clamp(40px,5vw,72px);
    row-gap:0;
    align-items:start;
  }
  .ng-v2 .ng-wa__head { grid-column:1; grid-row:1; }
  .ng-v2 .ng-wa__body { grid-column:1; grid-row:2; }
  .ng-v2 .ng-wa__media{ grid-column:2; grid-row:1 / span 2; align-self:center; }
}

/* --- copy column ---------------------------------------------------------- */
.ng-v2 .ng-wa__eyebrow{ margin:0 0 14px; }

/* (0,3,0) doubled. Neuros ships `body .content-wrapper h?:not(:first-child)
   { margin-top:50px }` at (0,2,2), which beats a plain `.ng-v2 .ng-x` (0,2,0).
   Measured here, not assumed: .ng-wa__sname declared margin-top:0 and resolved
   to 50px, opening a 50px hole between every step number and its own name.
   Same defence every heading class in this build already uses. */
.ng-v2 .ng-wa__title.ng-wa__title{
  margin:0 0 18px;
  font-family:var(--ng-font-display); font-weight:600;
  font-size:clamp(26px,4.2vw,42px); line-height:1.12; letter-spacing:-0.022em;
  color:var(--ng-ink);
  text-wrap:balance;
}
.ng-v2 .ng-wa__hl{ color:var(--ng-accent-display); }

.ng-v2 .ng-wa__lede{ margin:0 0 12px; max-width:56ch; }
.ng-v2 .ng-wa__sub{
  margin:0 0 26px; max-width:56ch;
  font-size:15.5px; line-height:1.6; color:var(--ng-muted);
}

/* --- the three steps ------------------------------------------------------
   A grid rather than three cards: cards here would compete with section 5's
   product cards directly above and the band would read as more products. */
.ng-v2 .ng-wa__steps{
  display:grid; gap:18px;
  margin:0 0 22px; padding:0; list-style:none;
  border-top:1px solid var(--ng-hairline);
  padding-top:22px;
}
@media (min-width:620px){
  .ng-v2 .ng-wa__steps{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; }
}
.ng-v2 .ng-wa__step{ margin:0; }
.ng-v2 .ng-wa__num{
  display:block; margin:0 0 7px;
  font-family:var(--ng-font-label); font-weight:500;
  font-size:11px; line-height:1; letter-spacing:.1em;
  color:var(--ng-accent-display);
  text-transform:none;
}
.ng-v2 .ng-wa__sname.ng-wa__sname{
  margin:0 0 5px;
  font-family:var(--ng-font-display); font-weight:600;
  font-size:16px; line-height:1.25; letter-spacing:-0.01em;
  color:var(--ng-ink);
}
.ng-v2 .ng-wa__sbody{
  margin:0;
  font-size:14.5px; line-height:1.55; color:var(--ng-muted);
}

.ng-v2 .ng-wa__note{ margin:0 0 22px; max-width:60ch; }

.ng-v2 .ng-wa__actions{
  display:flex; flex-wrap:wrap; align-items:center; gap:14px 22px;
}
.ng-v2 .ng-wa__link{
  font-family:var(--ng-font-display); font-weight:500;
  font-size:15px; line-height:1.2;
  color:var(--ng-accent-display); text-decoration:none;
  border-bottom:1px solid transparent;
}
.ng-v2 .ng-wa__link:hover{ border-bottom-color:currentColor; }

/* --- media ---------------------------------------------------------------- */
/* width:100% is load-bearing. <figure> is a block box, but with justify-self
   its grid area no longer stretches it, so it shrink-wraps its content — and
   the frame inside is `width:100%; max-width:340px`, which against a
   shrink-wrapped parent is circular and collapsed the video to ~140px. The
   figcaption used to prop the width up by accident; when the caption was
   removed the figure shrank. Stated explicitly now so it does not depend on
   whatever else happens to be in the figure. */
.ng-v2 .ng-wa__media{ margin:0; width:100%; }
@media (min-width:900px){ .ng-v2 .ng-wa__media{ justify-self:end; } }

.ng-v2 .ng-wa__frame{
  position:relative;
  width:100%; max-width:340px; margin-inline:auto;
  aspect-ratio:9 / 16;
  border-radius:26px;
  overflow:hidden;
  background:var(--ng-indigo-deep);
  box-shadow:var(--ng-shadow-card);
  /* isolation + transform on the frame, not the children: the rounded corners
     must clip a <video>, and Safari will happily paint video outside a plain
     overflow:hidden rounded box unless the element makes its own layer. */
  isolation:isolate;
  transform:translateZ(0);
}

.ng-v2 .ng-wa__slides{
  position:absolute; inset:0;
  margin:0; padding:0; list-style:none;
}
/* Default state: slide 1, still. The cross-fade is opt-in via .is-cycling,
   which ng-wa.js adds only after it has promoted slides 2-6 from data-src.
   Animating by default would cycle through five empty boxes whenever the script
   did not run, or chose not to spend the bytes. */
.ng-v2 .ng-wa__slide{
  position:absolute; inset:0;
  opacity:0;
}
.ng-v2 .ng-wa__slide:first-child{ opacity:1; }
.ng-v2 .ng-wa__frame.is-cycling .ng-wa__slide{
  animation:ng-wa-slide 20.4s linear infinite both;
}
.ng-v2 .ng-wa__slide img{
  display:block; width:100%; height:100%;
  object-fit:cover;
}
.ng-v2 .ng-wa__frame.is-cycling .ng-wa__slide:first-child{ opacity:0; }
.ng-v2 .ng-wa__slide:nth-child(1){ animation-delay:0s; }
.ng-v2 .ng-wa__slide:nth-child(2){ animation-delay:3.4s; }
.ng-v2 .ng-wa__slide:nth-child(3){ animation-delay:6.8s; }
.ng-v2 .ng-wa__slide:nth-child(4){ animation-delay:10.2s; }
.ng-v2 .ng-wa__slide:nth-child(5){ animation-delay:13.6s; }
.ng-v2 .ng-wa__slide:nth-child(6){ animation-delay:17s; }

@keyframes ng-wa-slide{
  0%    { opacity:0; }
  3%    { opacity:1; }
  16.67%{ opacity:1; }
  19.67%{ opacity:0; }
  100%  { opacity:0; }
}

/* Reduced motion, and the same state the script sets: one frame, no cycling.
   The band still reads — the story is in the copy — and nothing moves. */
@media (prefers-reduced-motion:reduce){
  .ng-v2 .ng-wa__frame .ng-wa__slide{ animation:none; opacity:0; }
  .ng-v2 .ng-wa__frame .ng-wa__slide:first-child{ opacity:1; }
}

.ng-v2 .ng-wa__video{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  opacity:0;
  transition:opacity .45s cubic-bezier(.4,0,.2,1);
}
/* Only reveal the video once it is genuinely painting frames — 'playing', not
   'loadeddata'. Swapping on loadeddata shows one still frame and then a stall on
   a slow line, which looks worse than the cross-fade it replaced. */
.ng-v2 .ng-wa__frame.is-playing .ng-wa__video{ opacity:1; }
/* The stills go; the CONTROL STAYS. It used to be hidden here too, which is
   how a band that autoplays a 36s loop ended up with no way to stop it. */
.ng-v2 .ng-wa__frame.is-playing .ng-wa__slides{ opacity:0; pointer-events:none; }

/* --- transport control ------------------------------------------------------
   ALWAYS in the DOM and ALWAYS visible, in one of two states. The first version
   was a small dark translucent pill at the bottom of a dark video and the owner
   reported, correctly, that it was not visible. It is now a 66px white disc in
   the middle of the frame while stopped — unmissable — and shrinks to a corner
   pill while playing so it stops competing with the film.

   It is a real pause control, not decoration: content that auto-starts and runs
   longer than five seconds needs a way to stop it (WCAG 2.2.2), and this band
   autoplays a 36-second loop. */
/* (0,3,0) doubled, and everything a button inherits is reset explicitly. The
   theme styles bare <button> hard enough to win against (0,2,0): measured
   computed style was display:inline-block, padding:10px 24px, min-width:58px,
   border-width:1px — so a 66px disc rendered as a 58x38 lozenge. Same defence
   the heading classes here already use. */
.ng-v2 .ng-wa__play.ng-wa__play{
  position:absolute; left:50%; top:50%;
  transform:translate(-50%,-50%);
  display:flex; align-items:center; justify-content:center;
  box-sizing:border-box;
  width:66px; height:66px; min-width:0; min-height:0; padding:0;
  border:0; border-radius:50%;
  background:#FFF;
  box-shadow:0 6px 24px rgba(11,13,40,.34), 0 0 0 1px rgba(11,13,40,.05);
  cursor:pointer;
  transition:width .25s cubic-bezier(.4,0,.2,1), height .25s cubic-bezier(.4,0,.2,1),
             background-color .25s cubic-bezier(.4,0,.2,1), opacity .25s, box-shadow .25s;
}
.ng-v2 .ng-wa__play.ng-wa__play:hover{ box-shadow:0 8px 30px rgba(11,13,40,.42), 0 0 0 1px rgba(11,13,40,.08); }

/* Play glyph: a triangle drawn in borders, nudged right so it reads as centred
   inside a circle (optical, not geometric). */
.ng-v2 .ng-wa__ico{
  width:0; height:0; margin-left:5px;
  border-style:solid;
  border-width:11px 0 11px 18px;
  border-color:transparent transparent transparent var(--ng-indigo-deep);
}

/* Playing: corner pill, two bars, restrained until hovered or focused. */
.ng-v2 .ng-wa__frame.is-playing .ng-wa__play.ng-wa__play{
  left:auto; right:12px; top:auto; bottom:12px;
  transform:none;
  width:38px; height:38px; min-width:0; padding:0;
  background:rgba(11,13,40,.55);
  -webkit-backdrop-filter:blur(9px); backdrop-filter:blur(9px);
  box-shadow:none;
  opacity:.7;
}
.ng-v2 .ng-wa__frame.is-playing .ng-wa__play.ng-wa__play:hover,
.ng-v2 .ng-wa__frame.is-playing .ng-wa__play.ng-wa__play:focus-visible{ opacity:1; }
.ng-v2 .ng-wa__frame.is-playing .ng-wa__ico{
  position:relative;
  width:14px; height:15px; margin:0; border:0;
}
.ng-v2 .ng-wa__frame.is-playing .ng-wa__ico::before,
.ng-v2 .ng-wa__frame.is-playing .ng-wa__ico::after{
  content:""; position:absolute; top:0;
  width:4px; height:15px; border-radius:1px; background:#FFF;
}
.ng-v2 .ng-wa__frame.is-playing .ng-wa__ico::before{ left:1px; }
.ng-v2 .ng-wa__frame.is-playing .ng-wa__ico::after { right:1px; }

@media (max-width:520px){
  .ng-v2 .ng-wa__frame{ max-width:280px; border-radius:22px; }
}


/* ===== 6-solutions ===== */
/* ==========================================================================
   NEXT GEO — section 6: solutions.
   Loaded after ng-foundation.css / ng-components.css, scoped to .ng-v2.
   Tokens only. Conventions copied from ng-components.css (section 2, hero).

   BAND: --ng-ground, inherited from .ng-section. It follows the indigo
   .is-dark product band, so the eye lands on warm paper again and the six
   white cards read as objects on it. Section 7 below then steps up to a white
   band, which is what keeps two consecutive light sections from merging.

   GRID: two columns of WIDE cards, three rows. Rewritten 2026-08-27.

   What it was, and why that broke: a 12-column grid with the first three cards
   spanning 4 and the last FOUR spanning 3, so both rows ended flush at 12. When
   Dijital Harita Servisleri was retired on the owner's instruction (CLAIMS C16,
   7 solutions -> 6) the fourth cell of row 2 went with it and nobody touched
   the grid, so row 2 spanned 9 of 12 and left a quarter of the section empty on
   the right. The owner reported it.

   Why not simply make all six span 4 — a tidy 3x2. Because the owner ruled that
   out in the same message ("making it all as 3x2 would look bad also"), and he
   is right: six identical cards three-up is a wall, and this page already runs
   a three-up card row in section 4 and a six-column cell grid in section 11.
   A third variation on the same silhouette is what makes a long page read as
   one undifferentiated scroll.

   Two-up solves the layout AND the copy. These bodies are 25-35 words. At a
   third of the container they set 7 or 8 lines in a 260px column, which is why
   row 2 towered over row 1 in the owner's screenshot even before the hole. At
   half the container — 526px at a 1440 viewport, with the icon moved out to a
   left gutter — they set three or four.

   MEASURED, because the first draft of this comment guessed and guessed wrong:
   the grid is about 80px TALLER at 1440 (792px against roughly 720), not
   shorter. Three rows of a roomier card outweigh two rows of a cramped one.
   That is the trade and it is worth taking — the hole is gone, the line count
   is halved, and the two rows no longer differ in height by a third.

   No card is ranked above another. Every asymmetric arrangement of six that
   ends flush on a 12-column grid (6/6 then 4/4/4, or 8/4 then 4/4/4) makes one
   or two cards bigger, and the published solution order carries no such
   hierarchy — inventing one in CSS would be inventing a claim.
   ========================================================================== */

/* (0,2,0) — beats the foundation's `.ng-v2 h2` (0,1,1) and the theme's late
   `.content-wrapper h2` (0,1,1), which wins ties by load order. */
.ng-v2 .ng-sol__title{
  font-size:44px;
  line-height:1.12;
  margin:16px 0 0;
  /* 26ch, not the hero's 20ch: at 20ch this headline broke into three ragged
     lines ("Yer seçiminden / raporlamaya / yedi çözüm."). 26ch lets balance
     find the two-line break the sentence actually has. */
  max-width:26ch;
  text-wrap:balance;
}
/* #E91E8C is legal here and only here: this span never renders below 30px.
   4.04:1 on --ng-ground — over the 3.0 large-text bar, under the 4.5 body bar. */
.ng-v2 .ng-sol__hl{ color:var(--ng-accent-display); }

.ng-v2 .ng-sol__lede{
  margin:18px 0 0;
  font-size:18px; line-height:1.6;
  color:var(--ng-muted);           /* 6.01:1 on --ng-ground */
  max-width:62ch;
}

/* list-style/margin/padding reset at (0,2,0): the theme styles bare `ul` at
   (0,0,1) and `.content-wrapper ul` at (0,1,1) and loads after us. */
.ng-v2 .ng-sol__grid{
  list-style:none; margin:48px 0 0; padding:0;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:20px;
}

/* --- the card -------------------------------------------------------------
   The whole card is the anchor, so there is no per-card button and no
   duplicated "Daha Fazla Bilgi". display:flex + margin-top:auto on the verb
   line keeps the six verbs on one baseline however long the body copy is. */
.ng-v2 .ng-sol__card{
  /* Grid, not flex: the icon sits in its own gutter beside the heading while
     body and verb stay in the text column, and the verb still pins to the
     bottom — `1fr` on the last row does here what margin-top:auto did there. */
  display:grid;
  grid-template-columns:44px minmax(0,1fr);
  grid-template-rows:auto auto 1fr;
  column-gap:22px;
  height:100%;
  /* border-box is declared, not assumed. The theme and Elementor both ship a
     global reset, but this section is also pasted into an HTML widget on
     pages that may not load them, and without it height:100% plus 50px of
     vertical padding overflows the grid row and the next row overlaps it —
     which is exactly what the first render did. */
  box-sizing:border-box;
  padding:28px 30px 26px;
  background:var(--ng-surface);
  border:1px solid var(--ng-hairline);
  border-radius:var(--ng-radius);
  /* The card used to be flat at rest and only lifted on hover, which meant the
     grid read as a wireframe until you moved the mouse — and never lifted at
     all on touch. yersecim's cards carry their softness at rest. */
  box-shadow:var(--ng-shadow-card);
  text-decoration:none;
  color:var(--ng-ink);
  transition:transform .16s cubic-bezier(.25,.46,.45,.94),
             box-shadow .16s cubic-bezier(.25,.46,.45,.94),
             border-color .16s cubic-bezier(.25,.46,.45,.94);
}

/* accent-wash chip. --ng-accent (#C61073) as the stroke colour, not the
   display magenta: a 24px icon is a 1.5px line, which is graphical content
   under 1.4.11 and needs 3:1 against its own background — the wash is 8%
   accent over white, so the stroke clears it comfortably. */
.ng-v2 .ng-sol__icon{
  display:inline-flex; align-items:center; justify-content:center;
  width:44px; height:44px; flex:0 0 auto;
  border-radius:var(--ng-radius-sm);
  background:var(--ng-accent-wash);
  color:var(--ng-accent);
  grid-column:1; grid-row:1;
}
.ng-v2 .ng-sol__icon svg{ display:block; }

/* (0,2,0) beats `.ng-v2 h3` (0,1,1). The three-up grid needed 19px to keep
   Turkish compound nouns off a third line; the two-up card has the room for
   the heading scale again. */
/* 21px, up from the 19px the three-up grid forced: a half-container card has
   room for the heading scale again, and Turkish compound nouns still fit on
   one line. Optically centred on the 44px chip rather than baseline-aligned. */
.ng-v2 .ng-sol__name{
  font-size:21px; line-height:1.3;
  margin:0;
  grid-column:2; grid-row:1; align-self:center;
}
.ng-v2 .ng-sol__body{
  grid-column:2; grid-row:2;
  margin:14px 0 0;
  font-size:15px; line-height:1.62;
  color:var(--ng-muted);           /* 6.21:1 on --ng-surface */
}

/* One specific verb per card (motion.fixed.json E15): the affordance moves
   from a repeated button label onto the card itself. */
.ng-v2 .ng-sol__go{
  display:inline-flex; align-items:center; gap:.45em;
  grid-column:2; grid-row:3; align-self:end;
  padding-top:20px;
  font-family:var(--ng-font-display); font-weight:600;
  font-size:14px; line-height:1.3;
  color:var(--ng-accent);          /* 5.64:1 on --ng-surface */
}
.ng-v2 .ng-sol__card .ng-arrow{
  display:inline-block;
  transition:transform .16s cubic-bezier(.25,.46,.45,.94);
}

/* any-hover only: on a touch screen :hover sticks after the tap and would
   leave a card lifted until the user taps elsewhere. */
@media (any-hover:hover){
  .ng-v2 .ng-sol__card:hover{
    transform:translate3d(0,-2px,0);
    border-color:var(--ng-border-strong);
    box-shadow:var(--ng-shadow-card-hover);
  }
  .ng-v2 .ng-sol__card:hover .ng-arrow{ transform:translate3d(4px,0,0); }
}
/* focus-visible on the anchor already draws the foundation's two-tone ring;
   the lift is repeated here so keyboard and mouse see the same card state. */
.ng-v2 .ng-sol__card:focus-visible{
  transform:translate3d(0,-2px,0);
  border-color:var(--ng-border-strong);
}
.ng-v2 .ng-sol__card:active{ transform:scale(.995) translate3d(0,-1px,0); }

@media (max-width:1023px){
  .ng-v2 .ng-sol__title{ font-size:36px; }
}
/* One column below 900: at two-up the card is ~350px here, the text column
   ~245px, and the bodies go back to eight lines — the defect this layout was
   written to remove. */
@media (max-width:900px){
  .ng-v2 .ng-sol__grid{ grid-template-columns:minmax(0,1fr); }
}
@media (max-width:640px){
  .ng-v2 .ng-sol__title{ font-size:30px; max-width:none; }
  .ng-v2 .ng-sol__lede{ font-size:16px; }
  .ng-v2 .ng-sol__grid{ margin-top:32px; gap:14px; }
  .ng-v2 .ng-sol__card{
    grid-template-columns:38px minmax(0,1fr); column-gap:14px;
    padding:22px 20px;
  }
  .ng-v2 .ng-sol__icon{ width:38px; height:38px; }
  .ng-v2 .ng-sol__name{ font-size:19px; }
}

/* --- motion ---------------------------------------------------------------
   No rules needed for the entrance itself: the cards carry .ng-anim and the
   shipped d1/d2/d3 delays in ng-components.css, and the engine reveals each
   cell as it crosses the viewport. Only the reduced-motion backstop is local,
   naming this section's own hover transform so the affordance survives as a
   border and shadow change with no movement. */
@media (prefers-reduced-motion:reduce){
  .ng-v2 .ng-sol__card,
  .ng-v2 .ng-sol__card:hover,
  .ng-v2 .ng-sol__card:focus-visible,
  .ng-v2 .ng-sol__card:active{ transform:none !important; }
  .ng-v2 .ng-sol__card .ng-arrow{ transform:none !important; transition:none !important; }
}

/* --- homepage banner captions (a homepage-wide rule, parked here) ----------
   Added 2026-08-27, and it does NOT belong to section 6 — it belongs to the
   homepage. It lives here because ng-sections.css is GENERATED by assemble.php
   from sections/*.css, so a rule written straight into ng-sections.css is
   deleted the next time anyone rebuilds the page, and there is no shared
   sections stylesheet to put it in.

   Why it exists at all: ng-v2.php enqueues ng-shared.css only when NOT home,
   which is deliberate (the two sheets are disjoint so nothing an inner page
   does can reach the verified homepage). The consequence was that the two
   homepage plates were the only captioned figures on the site rendering at the
   theme's default — 17px near-black, full container width, touching the image.
   Both captions have since been deleted as redundant, so this currently styles
   nothing. It is kept so the next homepage plate that wants a caption gets the
   same treatment as every other page instead of rediscovering this.

   Values are a COPY of ng-shared.css §17c, with ONE deliberate divergence,
   below. If §17c changes, change this.

   THE FIGURE'S OWN MARGINS, added 2026-08-27. Yesterday's port brought the
   caption across and left the figure behind, which was half a fix: with no
   .ng-banner rule on the homepage at all, both plates computed `margin:0` and
   sat flush against the header above them. The owner reported it on the
   sectors band, where the plate's top edge is dark and the seam is obvious —
   "the string is touching the image below it". It was equally true in section 6
   and simply harder to see against a pale scrim.

   IT GOES ON THE FRAME, NOT THE FIGURE, and that is not a style choice.
   Elementor ships
     `.elementor .elementor-widget:not(.elementor-widget-text-editor)
      :not(.elementor-widget-theme-post-content) figure{margin:0}`
   at (0,4,1). Every section on this site is pasted into an Elementor `html`
   widget, so that selector matches every plate on every page, and any
   `.ng-v2 .ng-banner{margin:...}` at (0,2,0) loses to it. Verified with
   CSS.getMatchedStylesForNode rather than by reading: on both / and
   /urunler/sahanin-gucu/ the matched-rule list ends with Elementor's reset and
   the figure computes margin 0/0. A first attempt here did put the margins on
   .ng-banner and changed nothing on the page.

   .ng-banner__frame is a div, so Elementor's selector cannot reach it, and the
   figure has no padding or border — so the frame's margins collapse straight
   out through it and land exactly where the figure's would have. Same trick
   ng-shared.css §17c uses for .ng-banner__cap, for the same reason.

   48px, not §17c's 36+20: on an inner page .ng-section-head carries
   `margin:0 0 36px` and the 20px override is really setting 56px of total air.
   The homepage heads (.ng-sol__head, .ng-sektor__head) have margin-bottom:0,
   so 48px here reproduces the INTENDED spacing rather than the declaration.
   Below the plate, 44px collapses with .ng-sol__grid's own 48px top margin and
   the larger wins, so the grid does not move. */
.ng-v2 .ng-banner__frame{ margin:48px 0 44px; }
@media (max-width:767px){
  .ng-v2 .ng-banner__frame{ margin:30px 0 32px; }
}
.ng-v2 .ng-banner__cap{
  margin:14px 0 44px;
  max-width:68ch;
  font-family:var(--ng-font-label); font-weight:500;
  font-size:12px; line-height:1.4; letter-spacing:.04em;
  color:var(--ng-muted);
  text-transform:none;
}
@media (max-width:767px){
  .ng-v2 .ng-banner__cap{ margin-bottom:28px; }
}


/* ===== 7-sectors ===== */
/* ==========================================================================
   NEXT GEO — section 7: sectors.
   Loaded after ng-foundation.css / ng-components.css, scoped to .ng-v2.
   Tokens only. Conventions copied from ng-components.css (section 2, hero).

   BAND: --ng-surface (#FFFFFF) with hairline rules top and bottom. Two
   reasons, both load-bearing:
     - section 6 above is --ng-ground with white cards; without a tonal step
       the two light sections would read as one very long section;
     - the client logo rasters are flattened onto #FFFFFF (they have no alpha —
       the AV1 encoder in the build chain drops the alpha plane), so every
       logo has to sit on white or it shows as a pale rectangle. Here they sit
       in white tiles on the sunken panel.

   THE TAB MECHANISM IS A RADIO GROUP, NOT JS. See the note in the HTML. The
   cost is 3 generated selector lists of 14 — chip-checked, chip-focus and
   panel-active — which is why this file is machine-generated from
   genimg/build_s7.py rather than hand-maintained.
   ========================================================================== */

.ng-v2 .ng-sektor{
  background:var(--ng-surface);
  border-block:1px solid var(--ng-hairline);
}

/* (0,2,0) — beats the foundation's `.ng-v2 h2` (0,1,1) and the theme's late
   `.content-wrapper h2` (0,1,1). */
.ng-v2 .ng-sektor__title{
  font-size:44px; line-height:1.12;
  margin:16px 0 0;
  max-width:20ch;
  text-wrap:balance;
}
/* Legal: this span never renders below 30px. #E91E8C on #FFFFFF is 4.18:1 —
   over the 3.0 large-text bar. Never reuse this token at body size. */
.ng-v2 .ng-sektor__hl{ color:var(--ng-accent-display); }

.ng-v2 .ng-sektor__lede{
  margin:18px 0 0;
  font-size:18px; line-height:1.6;
  color:var(--ng-muted);            /* 6.21:1 on --ng-surface */
  max-width:62ch;
}

/* fieldset carries the group semantics and nothing else; its default border,
   padding and min-width:min-content are all removed. min-inline-size:0 is the
   one that matters — without it the fieldset refuses to shrink below the
   widest chip row and the section overflows on mobile. */
.ng-v2 .ng-sektor__ui{
  border:0; margin:40px 0 0; padding:0;
  min-inline-size:0;
}
/* The legend names the radio group for assistive tech and is not drawn. Not
   display:none, which would remove it from the accessibility tree too. */
.ng-v2 .ng-sektor__legend{
  position:absolute; width:1px; height:1px;
  margin:-1px; padding:0; border:0;
  clip-path:inset(50%); overflow:hidden; white-space:nowrap;
}

/* The radios are the state store. They stay in the accessibility tree and stay
   focusable — only the painted box is removed, and the visible focus ring is
   forwarded to the label below. */
.ng-v2 .ng-sektor__radio{
  position:absolute;
  width:1px; height:1px;
  opacity:0; pointer-events:none;
  margin:0;
}

.ng-v2 .ng-sektor__chips{
  display:flex; flex-wrap:wrap; gap:8px;
}
/* Chips WRAP on every breakpoint. The motion spec offers a dual-direction
   marquee for mobile (E18), and it is deliberately not used: these chips are
   controls, and sliding a control out from under a thumb is a tap-target
   failure — E18's own governor is JS we are not shipping. Fourteen wrapped
   chips also let a phone user see all 14 verticals at once, which is the
   entire point of the section. */
.ng-v2 .ng-sektor__chip{
  position:relative;
  display:inline-flex; align-items:center;
  padding:9px 16px;
  border-radius:var(--ng-radius-pill);
  border:1px solid var(--ng-hairline);
  background:var(--ng-surface);
  font-family:var(--ng-font-display); font-weight:500;
  font-size:15px; line-height:1.15;   /* not 1: the İ dot and the Ş/Ç cedillas
                                         sit outside cap height and baseline */
  text-transform:none;                /* Turkish is authored as it renders */
  color:var(--ng-ink);
  cursor:pointer;
  transition:border-color .16s cubic-bezier(.25,.46,.45,.94),
             color .16s cubic-bezier(.25,.46,.45,.94),
             background-color .16s cubic-bezier(.25,.46,.45,.94);
}

/* SIGNATURE 4 (motion.fixed.json E17): each chip emits one catchment ring on
   hover — the etki alanı that is literally what we compute for that sector.
   Two pseudo-elements with an offset delay make one outward ripple, and there
   is no ambient loop when nobody is pointing at anything. */
.ng-v2 .ng-sektor__chip::before,
.ng-v2 .ng-sektor__chip::after{
  content:''; position:absolute; inset:-1px;
  border-radius:var(--ng-radius-pill);
  border:1px solid var(--ng-accent);
  opacity:0; pointer-events:none;
}
@media (any-hover:hover){
  .ng-v2 .ng-sektor__chip:hover{ border-color:var(--ng-accent); color:var(--ng-accent); }
  html[data-ng-motion="on"] .ng-v2 .ng-sektor__chip:hover::before{
    animation:ng-catchment 1.4s cubic-bezier(.25,.46,.45,.94) 1;
  }
  html[data-ng-motion="on"] .ng-v2 .ng-sektor__chip:hover::after{
    animation:ng-catchment 1.4s cubic-bezier(.25,.46,.45,.94) .35s 1;
  }
}
.ng-v2 .ng-sektor__chip:active{ border-color:var(--ng-accent); color:var(--ng-accent); }
@keyframes ng-catchment{
  0%  { transform:scale(1);    opacity:.55; }
  100%{ transform:scale(1.35); opacity:0;   }
}

/* --- generated: the selected chip. White on #C61073 is 5.64:1. ------------- */
.ng-v2 #sek-perakende:checked ~ .ng-sektor__chips [for="sek-perakende"],
.ng-v2 #sek-bankacilik:checked ~ .ng-sektor__chips [for="sek-bankacilik"],
.ng-v2 #sek-akaryakit:checked ~ .ng-sektor__chips [for="sek-akaryakit"],
.ng-v2 #sek-fmcg:checked ~ .ng-sektor__chips [for="sek-fmcg"],
.ng-v2 #sek-gayrimenkul:checked ~ .ng-sektor__chips [for="sek-gayrimenkul"],
.ng-v2 #sek-sarj-istasyonu:checked ~ .ng-sektor__chips [for="sek-sarj-istasyonu"],
.ng-v2 #sek-otomotiv:checked ~ .ng-sektor__chips [for="sek-otomotiv"],
.ng-v2 #sek-saglik:checked ~ .ng-sektor__chips [for="sek-saglik"],
.ng-v2 #sek-telekom:checked ~ .ng-sektor__chips [for="sek-telekom"],
.ng-v2 #sek-sigorta:checked ~ .ng-sektor__chips [for="sek-sigorta"],
.ng-v2 #sek-reklamcilik:checked ~ .ng-sektor__chips [for="sek-reklamcilik"],
.ng-v2 #sek-hizli-teslimat:checked ~ .ng-sektor__chips [for="sek-hizli-teslimat"],
.ng-v2 #sek-yeme-icme:checked ~ .ng-sektor__chips [for="sek-yeme-icme"],
.ng-v2 #sek-kamu:checked ~ .ng-sektor__chips [for="sek-kamu"]{
  background:var(--ng-accent);
  border-color:var(--ng-accent);
  color:var(--ng-cta-label);
  font-weight:600;
}
/* The chip's ring would be invisible on its own fill, so it is suppressed on
   the selected chip rather than left to flicker. */
.ng-v2 #sek-perakende:checked ~ .ng-sektor__chips [for="sek-perakende"]::before,
.ng-v2 #sek-bankacilik:checked ~ .ng-sektor__chips [for="sek-bankacilik"]::before,
.ng-v2 #sek-akaryakit:checked ~ .ng-sektor__chips [for="sek-akaryakit"]::before,
.ng-v2 #sek-fmcg:checked ~ .ng-sektor__chips [for="sek-fmcg"]::before,
.ng-v2 #sek-gayrimenkul:checked ~ .ng-sektor__chips [for="sek-gayrimenkul"]::before,
.ng-v2 #sek-sarj-istasyonu:checked ~ .ng-sektor__chips [for="sek-sarj-istasyonu"]::before,
.ng-v2 #sek-otomotiv:checked ~ .ng-sektor__chips [for="sek-otomotiv"]::before,
.ng-v2 #sek-saglik:checked ~ .ng-sektor__chips [for="sek-saglik"]::before,
.ng-v2 #sek-telekom:checked ~ .ng-sektor__chips [for="sek-telekom"]::before,
.ng-v2 #sek-sigorta:checked ~ .ng-sektor__chips [for="sek-sigorta"]::before,
.ng-v2 #sek-reklamcilik:checked ~ .ng-sektor__chips [for="sek-reklamcilik"]::before,
.ng-v2 #sek-hizli-teslimat:checked ~ .ng-sektor__chips [for="sek-hizli-teslimat"]::before,
.ng-v2 #sek-yeme-icme:checked ~ .ng-sektor__chips [for="sek-yeme-icme"]::before,
.ng-v2 #sek-kamu:checked ~ .ng-sektor__chips [for="sek-kamu"]::before,
.ng-v2 #sek-perakende:checked ~ .ng-sektor__chips [for="sek-perakende"]::after,
.ng-v2 #sek-bankacilik:checked ~ .ng-sektor__chips [for="sek-bankacilik"]::after,
.ng-v2 #sek-akaryakit:checked ~ .ng-sektor__chips [for="sek-akaryakit"]::after,
.ng-v2 #sek-fmcg:checked ~ .ng-sektor__chips [for="sek-fmcg"]::after,
.ng-v2 #sek-gayrimenkul:checked ~ .ng-sektor__chips [for="sek-gayrimenkul"]::after,
.ng-v2 #sek-sarj-istasyonu:checked ~ .ng-sektor__chips [for="sek-sarj-istasyonu"]::after,
.ng-v2 #sek-otomotiv:checked ~ .ng-sektor__chips [for="sek-otomotiv"]::after,
.ng-v2 #sek-saglik:checked ~ .ng-sektor__chips [for="sek-saglik"]::after,
.ng-v2 #sek-telekom:checked ~ .ng-sektor__chips [for="sek-telekom"]::after,
.ng-v2 #sek-sigorta:checked ~ .ng-sektor__chips [for="sek-sigorta"]::after,
.ng-v2 #sek-reklamcilik:checked ~ .ng-sektor__chips [for="sek-reklamcilik"]::after,
.ng-v2 #sek-hizli-teslimat:checked ~ .ng-sektor__chips [for="sek-hizli-teslimat"]::after,
.ng-v2 #sek-yeme-icme:checked ~ .ng-sektor__chips [for="sek-yeme-icme"]::after,
.ng-v2 #sek-kamu:checked ~ .ng-sektor__chips [for="sek-kamu"]::after{ display:none; }

/* --- generated: focus. The input is 1px and invisible, so the foundation's
   two-tone ring is forwarded to the label the user can actually see. -------- */
.ng-v2 #sek-perakende:focus-visible ~ .ng-sektor__chips [for="sek-perakende"],
.ng-v2 #sek-bankacilik:focus-visible ~ .ng-sektor__chips [for="sek-bankacilik"],
.ng-v2 #sek-akaryakit:focus-visible ~ .ng-sektor__chips [for="sek-akaryakit"],
.ng-v2 #sek-fmcg:focus-visible ~ .ng-sektor__chips [for="sek-fmcg"],
.ng-v2 #sek-gayrimenkul:focus-visible ~ .ng-sektor__chips [for="sek-gayrimenkul"],
.ng-v2 #sek-sarj-istasyonu:focus-visible ~ .ng-sektor__chips [for="sek-sarj-istasyonu"],
.ng-v2 #sek-otomotiv:focus-visible ~ .ng-sektor__chips [for="sek-otomotiv"],
.ng-v2 #sek-saglik:focus-visible ~ .ng-sektor__chips [for="sek-saglik"],
.ng-v2 #sek-telekom:focus-visible ~ .ng-sektor__chips [for="sek-telekom"],
.ng-v2 #sek-sigorta:focus-visible ~ .ng-sektor__chips [for="sek-sigorta"],
.ng-v2 #sek-reklamcilik:focus-visible ~ .ng-sektor__chips [for="sek-reklamcilik"],
.ng-v2 #sek-hizli-teslimat:focus-visible ~ .ng-sektor__chips [for="sek-hizli-teslimat"],
.ng-v2 #sek-yeme-icme:focus-visible ~ .ng-sektor__chips [for="sek-yeme-icme"],
.ng-v2 #sek-kamu:focus-visible ~ .ng-sektor__chips [for="sek-kamu"]{
  outline:3px solid var(--ng-focus-outer);
  outline-offset:2px;
  box-shadow:0 0 0 6px var(--ng-focus-inner);
}

/* --- panels ---------------------------------------------------------------
   Inactive panels are absolutely positioned AND visibility:hidden, so they
   take no space, are not announced, and their links are not tabbable. The
   min-height reserves the TALLEST panel, measured rather than guessed: the
   value lists run from 3 items (Sağlık) to 6 (FMCG), and at the two-column
   breakpoint the panels measured 259-339px in headless Chrome. 340px means
   picking a different sector never moves the rest of the page. */
.ng-v2 .ng-sektor__panels{
  position:relative;
  min-height:300px;
  margin-top:28px;
}
@media (min-width:900px){
  .ng-v2 .ng-sektor__panels{ min-height:340px; }
}
.ng-v2 .ng-sektor__panel{
  position:absolute; inset:0;
  opacity:0; visibility:hidden;
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:28px;
  box-sizing:border-box;            /* declared, not assumed: 32px of padding on
                                       an inset:0 absolute box overflows the
                                       panel without it */
  padding:32px;
  border-radius:var(--ng-radius);
  /* Stays SUNKEN, deliberately, while the rest of the page went to raised white
     cards. Everything inside this panel — the four .ng-sektor__value pills and
     the .ng-sektor__logo tiles — is itself white with a hairline. Turn the
     panel white and its own contents stop existing. So the page now carries two
     surface roles and they are consistent: raised is white + hairline + soft
     shadow and holds text; sunken is mist + hairline and holds white chrome.
     yersecim runs the same mist (#EDEFF9) as a section ground, so this is its
     tone, just bounded. The hairline is the new part — untethered tint on a
     #FAFBFF ground read as a smudge rather than as a plate. No shadow: a
     recessed surface that also floats is a contradiction. */
  background:var(--ng-surface-sunken);
  border:1px solid var(--ng-hairline);
  transition:opacity .3s cubic-bezier(.25,.46,.45,.94),
             visibility 0s linear .3s;
}
@media (min-width:900px){
  .ng-v2 .ng-sektor__panel{ grid-template-columns:minmax(0,1.55fr) minmax(0,1fr); gap:40px; }
}

/* --- generated: the visible panel ----------------------------------------- */
.ng-v2 #sek-perakende:checked ~ .ng-sektor__panels #sek-perakende-panel,
.ng-v2 #sek-bankacilik:checked ~ .ng-sektor__panels #sek-bankacilik-panel,
.ng-v2 #sek-akaryakit:checked ~ .ng-sektor__panels #sek-akaryakit-panel,
.ng-v2 #sek-fmcg:checked ~ .ng-sektor__panels #sek-fmcg-panel,
.ng-v2 #sek-gayrimenkul:checked ~ .ng-sektor__panels #sek-gayrimenkul-panel,
.ng-v2 #sek-sarj-istasyonu:checked ~ .ng-sektor__panels #sek-sarj-istasyonu-panel,
.ng-v2 #sek-otomotiv:checked ~ .ng-sektor__panels #sek-otomotiv-panel,
.ng-v2 #sek-saglik:checked ~ .ng-sektor__panels #sek-saglik-panel,
.ng-v2 #sek-telekom:checked ~ .ng-sektor__panels #sek-telekom-panel,
.ng-v2 #sek-sigorta:checked ~ .ng-sektor__panels #sek-sigorta-panel,
.ng-v2 #sek-reklamcilik:checked ~ .ng-sektor__panels #sek-reklamcilik-panel,
.ng-v2 #sek-hizli-teslimat:checked ~ .ng-sektor__panels #sek-hizli-teslimat-panel,
.ng-v2 #sek-yeme-icme:checked ~ .ng-sektor__panels #sek-yeme-icme-panel,
.ng-v2 #sek-kamu:checked ~ .ng-sektor__panels #sek-kamu-panel{
  position:relative; inset:auto;
  opacity:1; visibility:visible;
  transition-delay:0s;
}

/* (0,2,0) beats `.ng-v2 h3` (0,1,1). */
.ng-v2 .ng-sektor__name{
  font-size:26px; line-height:1.2;
  margin:0;
}
.ng-v2 .ng-sektor__desc{
  margin:12px 0 0;
  font-size:17px; line-height:1.6;
  color:var(--ng-muted);            /* 5.42:1 on --ng-surface-sunken */
  max-width:52ch;
}

/* The client's own "Sunduğumuz Değerler" items, as reading matter rather than
   as 14 more links. The label face at 13px with a hairline rule, so they read
   as data fields — the same register as the hero's overlay cards. */
.ng-v2 .ng-sektor__values{
  list-style:none; margin:20px 0 0; padding:0;
  display:flex; flex-wrap:wrap; gap:8px;
}
.ng-v2 .ng-sektor__value{
  font-family:var(--ng-font-label); font-weight:500;
  /* 14px. The rule said 12 while the comment two lines up said 13, and the
     inner-page contract sets 14px as the floor for anything a visitor reads.
     This is the largest block of small type on the page — 57 pills of the
     client's own words, not app chrome — so it is read, not glanced at, and it
     takes the floor rather than an exception to it. The other sub-14px type on
     this page is deliberately small (app-replica labels at 11px, rank numerals
     at 10.5px, tracked eyebrows at 12px) and stays. */
  font-size:14px; line-height:1.35;
  letter-spacing:0.01em;
  text-transform:none;
  color:var(--ng-ink);              /* 13.04:1 on --ng-surface-sunken */
  background:var(--ng-surface);
  border:1px solid var(--ng-hairline);
  border-radius:var(--ng-radius-pill);
  padding:7px 10px;
}

.ng-v2 .ng-sektor__link{
  display:inline-flex; align-items:center; gap:.45em;
  margin-top:22px;
  font-family:var(--ng-font-display); font-weight:600;
  font-size:15px; line-height:1.3;
  color:var(--ng-accent);           /* 4.92:1 on --ng-surface-sunken */
  text-decoration:none;
  border-bottom:1px solid transparent;
}
.ng-v2 .ng-sektor__link:hover{ border-bottom-color:var(--ng-accent); }
.ng-v2 .ng-sektor__link .ng-arrow{
  display:inline-block;
  transition:transform .16s cubic-bezier(.25,.46,.45,.94);
}
@media (any-hover:hover){
  .ng-v2 .ng-sektor__link:hover .ng-arrow{ transform:translate3d(4px,0,0); }
}

/* --- client tiles ---------------------------------------------------------- */
.ng-v2 .ng-sektor__clients{
  align-self:start;
  padding-top:4px;
}
.ng-v2 .ng-sektor__clientlabel{ margin:0 0 14px; }
.ng-v2 .ng-sektor__logos{
  display:flex; flex-wrap:wrap; gap:10px;
}
/* Two per row once there is a side column: perakende carries four logos and a
   free-flowing row left one orphaned on a second line. A fixed 2-up grid makes
   4 read as a block, 2 as a pair, and a lone tile (ZES) as a half-width card
   rather than a stretched banner. */
@media (min-width:900px){
  .ng-v2 .ng-sektor__logos{
    display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  }
}
/* White tile, because the rasters are flattened onto #FFFFFF and carry no
   alpha. width/height are on the <img> as well, so each 90x28 box is reserved
   before the file lands and the panel cannot reflow as logos arrive. */
.ng-v2 .ng-sektor__logo{
  display:flex; align-items:center; justify-content:center;
  padding:10px 14px;
  background:var(--ng-surface);
  border:1px solid var(--ng-hairline);
  border-radius:var(--ng-radius-sm);
}
.ng-v2 .ng-sektor__logoimg{
  display:block; height:28px; width:auto;
}

@media (max-width:1023px){
  .ng-v2 .ng-sektor__title{ font-size:36px; }
}
@media (max-width:640px){
  .ng-v2 .ng-sektor__title{ font-size:30px; max-width:none; }
  .ng-v2 .ng-sektor__lede{ font-size:16px; }
  .ng-v2 .ng-sektor__ui{ margin-top:28px; }
  .ng-v2 .ng-sektor__chips{ gap:6px; }
  .ng-v2 .ng-sektor__chip{ padding:8px 13px; font-size:14px; }
  .ng-v2 .ng-sektor__panels{ min-height:0; margin-top:20px; }
  .ng-v2 .ng-sektor__panel{ padding:24px 20px; gap:24px; }
  .ng-v2 .ng-sektor__name{ font-size:22px; }
  .ng-v2 .ng-sektor__desc{ font-size:16px; }
}

/* --- reduced motion -------------------------------------------------------
   The panel swap is STATE, not decoration: it keeps working, it just stops
   crossfading. The catchment rings are removed outright — the F2 rescue list
   in the motion spec did not name these pseudo-elements, which is exactly how
   a "harmless" ambient animation survives a reduce preference. */
@media (prefers-reduced-motion:reduce){
  .ng-v2 .ng-sektor__panel{ transition:none !important; }
  .ng-v2 .ng-sektor__chip::before,
  .ng-v2 .ng-sektor__chip::after{ animation:none !important; opacity:0 !important; }
  .ng-v2 .ng-sektor__link .ng-arrow{ transform:none !important; transition:none !important; }
}


/* ===== 9b-voices ===== */
/* ==========================================================================
   9b-voices — client statements
   ==========================================================================
   Authored for the English front page (pages/home.css) and promoted here on
   2026-08-18 when the four statements were published in Turkish as well, so
   both homepages render them from one stylesheet instead of two divergent
   copies.

   The Turkish originals were never lost — they sat in page 22994's
   _elementor_data, which is /anasayfa/, and that page was 301'd to / on the
   same day. Publishing them here is what stopped the retirement from deleting
   four attributed client statements from the site.

   The full rationale for the component (why cards and not the theme carousel,
   why the portraits load eager) is in pages/home/110-voices.html.
   ========================================================================== */

.ng-v2 .ng-voices{ background:var(--ng-ground); }

/* --- head. Same ladder as .ng-rel, so the two sections read as one argument
   in two moves rather than as two unrelated bands.                          */
.ng-v2 .ng-voices__title{
  margin-top:14px;
  max-width:24ch;
  text-wrap:balance;
}
/* Doubled class = (0,3,0). ng-foundation.css §8 lists every homepage heading
   here to beat the theme's `body .content-wrapper h2:not(:first-child)
   {margin-top:50px}` at (0,2,2); this class is new, so it is not in that list
   and has to carry its own copy of the fix. Without it the authored 14px gap
   between the eyebrow and the h2 renders at 50px. PATTERNS.md calls this out
   as the list to extend — this is the extension, kept local because
   ng-foundation.css is a shared file. */
.ng-v2 .ng-voices__title.ng-voices__title{ margin-top:14px; }

.ng-v2 .ng-voices__lede{
  margin:18px 0 0;
  font-size:18px; line-height:1.6;
  color:var(--ng-muted);            /* #5A5E86 on #FAFBFF — 6.01:1 */
  max-width:62ch;
}

/* --- grid ---------------------------------------------------------------- */
.ng-v2 .ng-voices__grid{
  margin:48px 0 0; padding:0; list-style:none;
  display:grid; gap:20px;
  grid-template-columns:minmax(0,1fr);
}
@media (min-width:900px){
  .ng-v2 .ng-voices__grid{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; }
}

/* --- card ------------------------------------------------------------------
   The <li> IS the card, as in .ng-rel__cell. That is not cosmetic: Neuros
   ships a bare `ul>li` left padding to make room for a fontello chevron, and
   ng-components.css §10 kills the chevron but only zeroes that padding on the
   two components that have no padding of their own. Declaring real padding
   here at (0,2,0) is what stops these cards being inset by ~32px, the same way
   .ng-rel__cell and .ng-cred__stat do.
   align-items:stretch on the grid + flex column here means the two cards on a
   row are the same height whatever their quote length, and the attribution
   rail is pushed to the bottom edge with margin-top:auto so both rails land on
   one baseline. Without that the shorter quote's rail floats mid-card. */
.ng-v2 .ng-voices__cell{
  display:flex;
  padding:28px;
  background:var(--ng-surface);
  border:1px solid var(--ng-hairline);
  border-radius:var(--ng-radius);
  box-shadow:var(--ng-shadow-card);
}
.ng-v2 .ng-voice{
  margin:0;
  display:flex; flex-direction:column;
  flex:1 1 auto;
  min-width:0;
}

/* --- the quotation ---------------------------------------------------------
   The theme styles bare <blockquote> (indent, rule, italic) and can inject
   quote glyphs through the `quotes` property; all of it is neutralised rather
   than fought selector by selector, because this is the only blockquote on the
   page and none of the theme's treatment is wanted.
   16px/1.68 on --ng-ink: this is the page's only long-form reading block, and
   it is set one step above the 15px card body used elsewhere because a visitor
   reads these sentences rather than scanning them. Ink on white is 13.4:1. */
.ng-v2 .ng-voice__quote{
  margin:0; padding:0;
  border:0; background:none;
  font-style:normal;
  quotes:none;
}
.ng-v2 .ng-voice__quote::before,
.ng-v2 .ng-voice__quote::after{ content:none; }

/* The opening mark is a pseudo-element on the CARD, not a character inside the
   quotation: putting a curly quote in the markup would make the first quoted
   word start mid-line and would be read aloud, and the passages are already
   marked up as a blockquote. --ng-accent-display is legal here because the
   glyph renders at 52px — the token is barred below 24px only. */
.ng-v2 .ng-voice__quote{ position:relative; padding-top:34px; }
.ng-v2 .ng-voice__quote::first-letter{ font-kerning:normal; }
.ng-v2 .ng-voice::before{
  content:"\201C";
  display:block;
  font-family:var(--ng-font-display);
  font-weight:700;
  font-size:52px; line-height:1;
  height:0;                       /* takes no vertical space; the padding above
                                     the quote is what reserves the room, so a
                                     long quote and a short one start at the
                                     same y whatever the font swap does */
  color:var(--ng-accent-display);
  pointer-events:none;
}

.ng-v2 .ng-voice__p{
  margin:0;
  font-size:16px; line-height:1.68;
  color:var(--ng-ink);
}
/* font-weight is a SEPARATE rule at (0,3,0) because the theme bolds anything
   inside a blockquote: measured on the applied page, .ng-voice__p resolved to
   font-weight 600 while this file declared nothing, and four cards of 600-weight
   16px Inter read as four blocks of shouting rather than as quoted prose. The
   doubled-class idiom is the same one ng-foundation.css §8 uses to beat the
   theme's (0,2,2) heading margins — no !important, no ancestor assumed. */
.ng-v2 .ng-voice__p.ng-voice__p{ font-weight:400; }
.ng-v2 .ng-voice__p + .ng-voice__p{ margin-top:0; }

/* Omission marker. 16px so it is never read as small print, muted so it is
   clearly editorial apparatus and not part of the quotation, and tracked so
   three dots read as a deliberate mark rather than as a typo. */
.ng-v2 .ng-voice__gap{
  margin:10px 0;
  font-size:16px; line-height:1;
  letter-spacing:0.3em;
  color:var(--ng-muted);          /* #5A5E86 on #FFFFFF — 6.21:1 */
}

/* --- attribution rail ------------------------------------------------------
   Pushed to the bottom of the card and separated by the same hairline the rest
   of the system uses for a footnote rule. The portrait is 48px because it is
   identification, not a headshot gallery: at 48 the face is recognisable and
   the name still leads. The files are the site's own 150x150 thumbnails, so
   they are sharp at 2x and cost 3.7-6.2 KB each rather than the 60-435 KB of
   the originals the old carousel loaded.
   alt="" is correct: the person's name is the very next text node, so an alt
   carrying the name would make a screen reader say it twice. */
.ng-v2 .ng-voice__by{
  margin-top:auto; padding-top:22px;
  display:flex; align-items:center; gap:14px;
  border-top:1px solid var(--ng-hairline);
}
.ng-v2 .ng-voice__face{
  flex:none;
  width:48px; height:48px;
  border-radius:var(--ng-radius-pill);
  object-fit:cover;
  background:var(--ng-surface-sunken);   /* holds the box before the file lands */
}
.ng-v2 .ng-voice__who{ display:block; min-width:0; }
.ng-v2 .ng-voice__name{
  display:block;
  font-family:var(--ng-font-display); font-weight:600;
  font-size:15px; line-height:1.3;
  color:var(--ng-ink);
}
.ng-v2 .ng-voice__role{
  display:block;
  margin-top:2px;
  font-size:14px; line-height:1.4;
  color:var(--ng-muted);          /* #5A5E86 on #FFFFFF — 6.21:1 */
}

/* --- footnote. Same treatment as .ng-rel__note, one band above. ----------- */
.ng-v2 .ng-voices__note{
  margin:40px 0 0;
  padding-top:20px;
  border-top:1px solid var(--ng-hairline);
  font-size:14px; line-height:1.6;
  color:var(--ng-muted);
  max-width:78ch;
}

@media (max-width:640px){
  .ng-v2 .ng-voices__lede{ font-size:17px; }
  .ng-v2 .ng-voices__grid{ margin-top:32px; gap:14px; }
  .ng-v2 .ng-voices__cell{ padding:22px; }
  .ng-v2 .ng-voice::before{ font-size:44px; }
  .ng-v2 .ng-voice__quote{ padding-top:30px; }
  .ng-v2 .ng-voices__note{ margin-top:28px; }
}


/* ===== 12-closing-cta ===== */
/* ==========================================================================
   NEXT GEO — section 12: closing CTA. The page's second indigo band.
   Loaded after ng-foundation.css / ng-components.css, scoped to .ng-v2.

   NOT ONE COLOUR VALUE APPEARS BELOW. The band carries .is-dark, which
   redefines the same token names (ng-foundation.css §3), so:
     --ng-ground    → #1B1F5E  the band itself
     --ng-ink       → #FAFBFF  14.46:1 on the band
     --ng-muted     → #C6C9EA   9.22:1 on the band
     --ng-cta-fill  → #FAFBFF with --ng-cta-label #1B1F5E — the CTA inverts
                      from a magenta fill to a ground fill, because magenta on
                      indigo is 2.65:1 and fails 1.4.11.
   .ng-btn already reads all four, so the button needs no restyling here at
   all; the rules below only size and centre things.

   Padding is deeper than --ng-section-pad. radar's closing band runs deep;
   the extra air is what tells the reader the page has ended and that there is
   exactly one thing left to do. Written at (0,3,0) so it outranks the
   foundation's `.ng-v2 .ng-section.is-dark` rule rather than losing to it.
   ========================================================================== */

.ng-v2 .ng-section.ng-close{
  padding-block:104px;
}
.ng-v2 .ng-close{
  text-align:center;
}
.ng-v2 .ng-close__inner{
  display:flex; flex-direction:column; align-items:center;
}

.ng-v2 .ng-close__eyebrow{
  margin:0;
  text-transform:none;      /* "SONRAKİ ADIM" is authored uppercase: the case
                               engine would map i→I and print "SONRAKI ADIM" */
}

/* (0,2,0) beats the theme's bare `h2` (0,0,1) and ties are irrelevant because
   the foundation's `body.ng-v2 h2` (0,1,2) already supplies family and colour;
   this rule only adds size and measure. */
.ng-v2 .ng-close__title{
  margin-top:18px;
  font-size:52px; line-height:1.1;
  max-width:18ch;
  text-wrap:balance;
}
.ng-v2 .ng-close__lede{
  margin:20px 0 0;
  font-size:19px; line-height:1.6;
  color:var(--ng-muted);
  max-width:52ch;
}

/* --- actions ---------------------------------------------------------------
   Button and text link on one row at desktop, stacked below 560px. The link
   is not a second button: radar's closing band has one filled control, and a
   second filled control here would split the single decision this section is
   asking for.                                                               */
.ng-v2 .ng-close__actions{
  margin-top:36px;
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center;
  gap:12px 28px;
}
.ng-v2 .ng-close__btn{ padding:18px 34px; font-size:17px; }

/* Was an accent-underlined text link. It became a ghost pill in the yersecim
   pass, for consistency rather than for taste: the hero pairs a solid pill with
   a hairline pill, and this is the same pair of choices at the other end of the
   page — the last thing a reader is offered should not be styled as a lesser
   kind of thing than the first. yersecim has exactly two action shapes, solid
   pill and hairline pill, and no third underlined-link tier.

   The 1.4.1 reason the underline existed is preserved, not dropped: the link
   was never marked by colour alone, and it still is not. The marker is now the
   pill's 1.5px border — a shape cue, which is what the hero's secondary has
   always relied on. The label keeps --ng-ink, the band's strongest ratio.

   inset box-shadow rather than border, matching .ng-btn--ghost, so the two
   actions sit at identical heights without a 1px correction. */
.ng-v2 .ng-close__link{
  display:inline-flex; align-items:center; justify-content:center;
  font-family:var(--ng-font-display); font-weight:600; font-size:17px;
  line-height:1.15;
  padding:18px 34px;                 /* matches .ng-close__btn exactly */
  color:var(--ng-ink);
  background:var(--ng-surface);      /* on dark: rgba(250,251,255,.06) */
  border-radius:var(--ng-radius-pill);
  box-shadow:inset 0 0 0 1.5px var(--ng-border-strong);
  text-decoration:none;
  transition:box-shadow .16s cubic-bezier(.4,0,.2,1);
}
.ng-v2 .ng-close__link:hover{ box-shadow:inset 0 0 0 1.5px var(--ng-ink); }
.ng-v2 .ng-close__link:focus-visible{ border-radius:var(--ng-radius-pill); }

/* --- meta ------------------------------------------------------------------
   Location and phone, both real and both already published on the contact
   page. The separator is a middle dot in the markup, not a border, so it
   wraps with the text on a narrow screen.                                   */
.ng-v2 .ng-close__meta{
  margin:40px 0 0;
  font-family:var(--ng-font-label); font-weight:500;
  font-size:13px; line-height:1.6; letter-spacing:.04em;
  color:var(--ng-muted);
}
.ng-v2 .ng-close__tel{
  color:var(--ng-muted);
  text-decoration:underline;
  text-underline-offset:4px;
}
.ng-v2 .ng-close__tel:hover{ color:var(--ng-ink); }

@media (max-width:1024px){
  .ng-v2 .ng-section.ng-close{ padding-block:88px; }
  .ng-v2 .ng-close__title{ font-size:40px; }
}
@media (max-width:640px){
  .ng-v2 .ng-section.ng-close{ padding-block:64px; }
  .ng-v2 .ng-close__title{ font-size:30px; max-width:20ch; }
  .ng-v2 .ng-close__lede{ font-size:17px; }
  .ng-v2 .ng-close__actions{ margin-top:28px; width:100%; flex-direction:column; }
  /* The actions stack at 640; both now go full-bleed, where before only the
     solid one did and the link sat under it at its own text width. */
  .ng-v2 .ng-close__btn,
  .ng-v2 .ng-close__link{ width:100%; justify-content:center; }
  .ng-v2 .ng-close__meta{ margin-top:32px; }
}