/* ==========================================================================
   NEXT GEO — page stylesheet for the SECTORS HUB PAIR
     TR  22946  /sektorler/     EN  25655  /en/sectors/
   One authored sheet for both; ng-page-apply.php --css-from copies it to
   sectors.css so the pair cannot drift.

   Loads last:
     ng-foundation → ng-components → ng-mobile → ng-shared → THIS FILE
   so a rule here at equal specificity beats all four, and ng-shared.css owns
   everything that is not specific to this page. If a rule below could be
   useful to the 28 sector-leaf pages that reuse this card, it belongs in
   ng-shared.css instead — check there before adding.

   ---------------------------------------------------------------------------
   WHAT THIS PAGE IS FOR, AND WHY IT LOOKS LIKE THIS

   A hub's job is to make its children legible and DISTINCT. The page this
   replaces failed at exactly that: all fourteen cards printed the child page's
   Elementor `description_text`, which is that page's headline and its opening
   paragraph run together and truncated with an ellipsis, so all fourteen
   opened with the same eleven words about "Yapay Zekâ Destekli Analitik". They
   also had no card surface at all — a 15×17px FontAwesome glyph, a heading and
   a line of grey text on the page background — which is why 1440 measured
   28.5% dead air in five bands while 390 measured none: the desktop grid was
   mostly the gaps between four ragged rows.

   Three decisions follow, and they are the whole design:

   1. THE CARD CARRIES THE CLIENT'S OWN DATA, not a truncated paragraph.
      Every card shows that sector's "Sunduğumuz Değerler" list verbatim — 57
      items across fourteen cards — plus one authored question built only out
      of those same item names. That is what makes Perakende distinguishable
      from Telekom without opening either, and it is content the old page
      already owned and threw away.

   2. THE WHOLE CARD IS THE LINK. No per-card button, so the audit's fourteen
      identical "Daha Fazla Bilgi" labels cannot come back, and the 390px tap
      target goes from a 97×30px line of text to the entire 320×280px card.

   3. THE PAGE IS REACHED SIDEWAYS. It is a nav-orphan — mega-menu label "#",
      no footer entry, zero inbound content links — so its only visitors arrive
      from a child breadcrumb or from search. It therefore ships its own
      breadcrumb (the theme's lived inside the page-title banner this page
      switches off), an index of all fourteen children above the fold, and
      lateral links out to /cozumler/* rather than only down into its own tree.

   THIS FILE ALSO SETS THE CARD 28 LEAF PAGES WILL REUSE. Everything reusable
   about it is in ng-shared.css (.ng-card, .ng-card--link, __title/__body/
   __meta/__link, .ng-pills, .ng-grid); what is left here is only the sector-
   specific composition.
   ========================================================================== */


/* ==========================================================================
   1. MASTHEAD — two columns, copy and index
   ========================================================================== */

/* The index column is a SUNKEN panel: mist + hairline, holding white chrome.
   It was first built flat on the ground with no plate, and at 1440 the fourteen
   chips read as a stray paragraph floating beside the headline rather than as
   a component. The hairline is the part that matters — an untethered tint on a
   #FAFBFF ground reads as a smudge, which is the same finding that produced
   the homepage's sector panel. No shadow: a recessed surface that also floats
   is a contradiction. */
.ng-v2 .ng-sekidx{
  padding:22px 20px;
  background:var(--ng-surface-sunken);
  border:1px solid var(--ng-hairline);
  border-radius:var(--ng-radius);
}
@media (min-width:960px){
  /* Pinned to the top of its grid track rather than stretched: the copy column
     is the taller child, and a stretched panel would put 200px of mist under
     the last chip. */
  .ng-v2 .ng-sekidx{ align-self:start; margin-top:34px; }
}
.ng-v2 .ng-sekidx__label{ margin:0 0 14px; }

/* A wrap ROW at every width, not a two-column list. Fourteen chips wrapping
   inside the 42% aside is four rows at 1440 and four rows at 390 — the same
   shape at both ends, and about half the height a 2×7 list would cost on a
   phone. It is also the idiom the homepage already uses for these exact
   fourteen names, so a visitor who has seen one recognises the other. */
.ng-v2 .ng-sekidx__list{
  list-style:none; margin:0; padding:0;
  display:flex; flex-wrap:wrap; gap:8px;
}
.ng-v2 .ng-sekidx__note{
  margin:16px 0 0;
  font-size:14px; line-height:1.55;
  color:var(--ng-muted);              /* 5.42:1 on mist */
}

/* The fifteenth row of the index, and the reason it is a row rather than a
   link inside the note above it: a visitor whose sector is NOT one of the
   fourteen is the one person on this page with nowhere to go, and burying
   their route in the middle of a footnote sentence hid it. It also measured
   282x42 as a tap target at 390 — inside a paragraph, so it could not be
   grown without breaking the line box. As its own row it is 44px by
   construction, and the hairline above it says "this is not a sector". */
.ng-v2 .ng-sekidx__ask{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  min-height:44px;
  margin-top:14px; padding-top:14px;
  border-top:1px solid var(--ng-hairline);
  font-family:var(--ng-font-display); font-weight:600;
  font-size:15px; line-height:1.3;
  color:var(--ng-accent);             /* 4.92:1 on mist */
  text-decoration:none;
}
@media (any-hover:hover){
  .ng-v2 .ng-sekidx__ask:hover .ng-arrow{ transform:translate3d(4px,0,0); }
}

/* The proof strip's footnote. Held to 60ch so it does not run the full width
   of the copy column and start competing with the lede above it. */
.ng-v2 .ng-sekmh__note{ max-width:56ch; }


/* ==========================================================================
   2. THE FOURTEEN SECTOR CARDS
   ========================================================================== */

/* scroll-margin, not a scroll-padding on the root: the theme's header is
   position:sticky at ~90px desktop / ~70px mobile, and without this every
   index chip lands its card underneath the bar. Measured against the rendered
   header, not guessed. */
.ng-v2 .ng-seklist__cell{ scroll-margin-top:104px; }
@media (max-width:1364px){
  .ng-v2 .ng-seklist__cell{ scroll-margin-top:84px; }
}

/* :target — the chip that brought you here should show you where you landed.
   Three seconds of accent hairline and then nothing; a permanent highlight on
   a URL fragment survives a back-navigation and looks like a selection state
   the visitor cannot clear. */
.ng-v2 .ng-seklist__cell:target .ng-card{
  border-color:var(--ng-accent);
}

/* The question is the card's proposition and it sits directly under the name.
   It stays --ng-muted rather than going to ink: fourteen cards of all-ink type
   flatten into a wall, and the verified homepage card (ng-sol__body) puts its
   body copy in muted for the same reason. 15px/1.6 is that card's measure. */
.ng-v2 .ng-sek__q{
  margin-top:8px;
  line-height:1.6;
  min-height:3.2em;                   /* two lines. The questions run 34-78
                                         characters, so without a floor the
                                         one-line cards (Otomotiv) pulled their
                                         count label up and the row lost its
                                         horizontal rhythm. Not a max — a long
                                         question is allowed three lines. */
}
@media (max-width:619px){
  /* Single column: there is no neighbouring card to line up with, so the
     reserved second line is just a gap. */
  .ng-v2 .ng-sek__q{ min-height:0; }
}

/* The count. It is the one small label on the card and it differs per card
   (3, 4, 5 or 6), so it carries information instead of being the fourteenth
   repetition of one word. Sits on a hairline rule, which is what separates the
   card's prose half from its data half. */
.ng-v2 .ng-sek__meta{
  margin-top:20px;
  padding-top:16px;
  border-top:1px solid var(--ng-hairline);
}
.ng-v2 .ng-sek__values{ margin-top:10px; }


/* ==========================================================================
   3. THE SHARED SPINE — six solution families on a sunken band
   ========================================================================== */

/* The band is --sunken, so the six cards inside it need their pills back on
   white: mist chips on a white card on a mist band still work, but the CARD
   edge then has to do all the separating. Left as the shared default
   deliberately — the cards are white and the pills sit on the card, not on the
   band, so the contrast that matters is pill-vs-card and mist-on-white is the
   stronger of the two. Recorded because it looks wrong in the markup and is
   right in the render. */
.ng-v2 .ng-fam__secs{ margin-top:12px; }

/* The counting note. It is the evidence for six numbers stated above it, so it
   is a full sentence at the reading floor rather than a tracked micro-label,
   and it is centred under the grid where a footnote belongs. */
.ng-v2 .ng-fam__note{
  margin-top:28px;
  max-width:82ch;
}
/* The two links the footnote used to carry inline. As chips they are a real
   affordance rather than two underlined runs a reader has to find mid-
   sentence, and they are 44px at mobile because .ng-btn--pill already is. */
.ng-v2 .ng-fam__links{ margin-top:16px; }


/* ==========================================================================
   4. RESPONSIVE
   The grid itself is ng-shared's .ng-grid--3: 1 column below 620, 2 to 960,
   3 above. Fourteen cards therefore land as 14 / 7 rows of 2 / 5 rows of
   3+3+3+3+2. The trailing 2 was checked in a screenshot rather than assumed —
   with `height:100%` on the card the short last row does not stretch, and a
   2-up final row of a 3-up grid reads as the end of a list, not as a hole.
   ========================================================================== */

@media (min-width:960px){
  /* The masthead's two columns meet at 58/42. Anything narrower for the aside
     and "Şarj İstasyonu" — the longest chip — wrapped to its own row and left
     a ragged hole above it. */
  .ng-v2 .ng-sekmh .ng-masthead__inner{
    grid-template-columns:minmax(0,57fr) minmax(0,43fr);
  }
}

@media (max-width:959px){
  /* Stacked. The index becomes a full-width plate under the proof strip, which
     is the right order: a visitor who has read the headline and the three
     counts is exactly the person who then wants the list of fourteen. */
  .ng-v2 .ng-sekidx{ margin-top:4px; }
}

@media (max-width:767px){
  .ng-v2 .ng-sekidx{ padding:20px 16px; }
  .ng-v2 .ng-sekidx__list{ gap:8px 6px; }
  .ng-v2 .ng-sekidx__note{ font-size:15px; }
  /* Reading floor: these two are sentences, not labels. */
  .ng-v2 .ng-sekmh__note,
  .ng-v2 .ng-fam__note{ font-size:15px; }
  .ng-v2 .ng-sek__meta{ margin-top:18px; padding-top:14px; }
}


/* ==========================================================================
   5. REDUCED MOTION
   ng-shared.css §10 already flattens .ng-card and .ng-arrow under a reduce
   preference — including cancelling ng-components.css's !important marker
   transform, which would otherwise drag every card up and left by half its
   own size. Nothing on this page adds motion beyond those two, so there is
   nothing further to switch off here. Left as a note rather than an empty
   block so the next person does not go looking for the missing rule.
   ========================================================================== */