/* ==========================================================================
   /sektorler/akaryakit/  +  /en/sectors/fuel/     ONE SHEET FOR THE PAIR
   ==========================================================================
   VARIANCE PASS (2026-08-17). The page was re-composed, not restyled. Its
   assignment in /root/ng-design/variance-plan.json:

       opening   B-STACK      no aside; full-width headline; content starts high
       dark      MIDDLE       the indigo band is section 3 of 4, not the close
       sections  4            masthead · ranked table · indigo index · ladder+CTA

   Silhouette:  LIGHT STACK → MIST TABLE → INDIGO INDEX → LIGHT LADDER + RAIL

   WHAT WAS HERE BEFORE, and why it went: a split masthead with a mist plate on
   the right, four value CARDS in a 2x2, two output panels side by side, a
   ladder, and an indigo CTA at the bottom — the shape all 28 leaves share, and
   the reason the owner said "I can't tell if I'm on another page".

   The primitives this page now leans on that did NOT exist before are in
   ng-shared.css §15 (.ng-masthead--stack, .ng-dtable, .ng-facts), because more
   than one archetype needs each of them in the same shape. Everything below is
   specific to a fuel network and stays here — the rule is unchanged: a wrong
   shared primitive costs 28 pages, a duplicated page rule costs bytes.

   Rules this sheet used to declare for the shared leaf primitives (.ng-out-band,
   .ng-lead, .ng-how, .ng-vals, .ng-steps__pills, .ng-env, .ng-net) live in
   ng-shared.css §14 and are not restated. Two that WERE here are gone with the
   markup that needed them: the 56/44 masthead column split (there is no second
   column now) and .ng-net__delta (the scorecard is a <table>, not a list).

   CONTENTS
     1. MASTHEAD          the attribution line under the h1
     2. RANKED TABLE      section 20: deck, panels, table columns, score bar
     3. INDIGO INDEX      section 30: the ruled offer list on the dark band
     4. CLOSING RAIL      section 40: the mist decision rail
     5. RESPONSIVE
     6. REDUCED MOTION
     7. FIGURE INTERLUDE  section 30: the one client image, capped at 780
   ========================================================================== */


/* ==========================================================================
   1. MASTHEAD — B-STACK
   ng-shared §15a does the work (single column, 68px headline, 58ch lede). Only
   the attribution line is page-specific.

   IT IS THE SITE'S QUOTE IDIOM, MOVED. The hub's question used to sit in the
   masthead aside behind a 3px accent rule; with no aside, the question is the
   h1 and the rule now marks the line that says WHOSE question it is. Same
   treatment, same token, one component fewer.
   ========================================================================== */
.ng-v2 .ng-lead__src{
  margin:22px 0 0;
  padding:2px 0 2px 16px;
  border-left:3px solid var(--ng-accent);
  max-width:64ch;
  font-size:16px; line-height:1.6;
  color:var(--ng-muted);              /* 6.01:1 on the ground */
}


/* ==========================================================================
   2. RANKED TABLE — section 20
   ========================================================================== */

/* The two definitions the masthead aside used to carry. Two columns above
   820px because they are a PAIR — the whole point is that the question has two
   halves — and a pair stacked vertically reads as a sequence instead. */
.ng-v2 .ng-karne__deck{
  margin:0 0 30px;
  padding-bottom:26px;
  border-bottom:1px solid var(--ng-hairline);
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:14px;
}
@media (min-width:820px){
  .ng-v2 .ng-karne__deck{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:40px;
  }
}
.ng-v2 .ng-karne__def{
  margin:0;
  font-size:16px; line-height:1.6;
  color:var(--ng-muted);              /* 5.42:1 on mist */
}
.ng-v2 .ng-karne__defk{
  font-family:var(--ng-font-display); font-weight:700;
  color:var(--ng-ink);
}

/* The panels are FULL CONTAINER WIDTH and stacked, not a 2-up pair. A table
   with four columns in a 540px half-panel would have had to drop a column at
   every width under 1180, which is the column a reader most wants (what
   changed in twelve months). The pair layout is what thirteen sibling pages
   use; this one is a wide table over a wide strip. */
.ng-v2 .ng-karne__panel + .ng-karne__panel{ margin-top:20px; }
@media (min-width:768px){
  .ng-v2 .ng-karne__panel .ng-out__body{ padding:22px 26px 26px; }
}

/* Column widths. `width:1%` on the rank column is the standard trick for "as
   narrow as the content allows" in an auto-layout table; the two numeric
   columns are held off the flexible name column so the score never slides
   about as station names change length between the two languages. */
.ng-v2 .ng-karne__table tr > :nth-child(1){ width:1%; white-space:nowrap; }
@media (min-width:768px){
  .ng-v2 .ng-karne__table tr > :nth-child(3){ width:15%; }
  .ng-v2 .ng-karne__table tr > :nth-child(4){ width:24%; }
}
/* 11px at .1em is a tracked label by measurement (ratio .10, over the checker's
   0.08 threshold). A rank numeral is glanced at, not read. */
.ng-v2 .ng-karne__cn{
  font-family:var(--ng-font-label); font-weight:500;
  font-size:11px; line-height:1.3; letter-spacing:.1em;
  text-transform:none;
  color:var(--ng-muted);
  font-variant-numeric:tabular-nums;
}
/* The score bar lives in the row-header cell, under the station name, rather
   than in the score column: it is a property of the row's subject, and a bar
   in the numeric column would fight the number for the same 15% of width. */
.ng-v2 .ng-karne__bar{
  display:block;
  margin-top:8px;
  /* 380 is where the bar stops reading as a stranded stub inside a 600px name
     column at 1440 and starts reading as the chart it is, without running so
     far right that it collides with the score column at 1024. Measured in the
     screenshot at both widths, not chosen. */
  max-width:380px;
  height:6px;
  border-radius:3px;
  background:var(--ng-surface-sunken);
  overflow:hidden;
}
.ng-v2 .ng-karne__bar i{
  display:block; height:100%;
  border-radius:3px;
  background:var(--ng-indigo);
}
.ng-v2 .ng-karne__score{
  font-family:var(--ng-font-display); font-weight:700;
  font-size:20px; line-height:1.15;
  letter-spacing:-0.01em;
  color:var(--ng-ink);
  font-variant-numeric:tabular-nums;
}
/* The top row is the one the environment report below then opens up, so it is
   marked in both places — accent bar and accent score here, "tablonun ilk
   satırı" in the second panel's subject line. */
.ng-v2 .ng-karne__table .is-top .ng-karne__bar i{ background:var(--ng-accent); }
.ng-v2 .ng-karne__table .is-top .ng-karne__score{ color:var(--ng-accent); }


/* ==========================================================================
   3. INDIGO INDEX — section 30, the dark band
   A ruled contents list, not four cards. Four raised white surfaces on indigo
   would have been the card grid again in a different colour, and these four
   things are not four options — they are four ways into two solutions and two
   products, which is what a numbered index says and a grid does not.

   THE WHOLE ROW IS THE ANCHOR. One link per row, each with its own accessible
   name, and a target far over 44px at every width. The four identical "Daha
   Fazla Bilgi" links this page used to carry measured 109x17px.
   ========================================================================== */
.ng-v2 .ng-offer{
  list-style:none;
  margin:0; padding:0;
}
.ng-v2 .ng-offer__item{
  border-top:1px solid var(--ng-hairline);   /* .16 paper on the dark band */
}
.ng-v2 .ng-offer__link{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  grid-template-areas:
    "n main"
    ". to";
  column-gap:16px; row-gap:12px;
  align-items:start;
  padding:22px 0;
  text-decoration:none;
  color:inherit;
}
@media (min-width:900px){
  /* max-content on the destination track, not a fixed 230px. At 230 the
     longest label — "ÜRÜN · LOKASYON ANALİZİ MOBILE", and its English twin
     "PRODUCT · LOCATION ANALYSIS MOBILE" — filled the line exactly and pushed
     the arrow onto a row of its own, right-aligned under the label, reading as
     a stray glyph. Sizing the track to the longest label instead means the
     copy column absorbs the difference, which is the column that can. Worst
     case at 900px: 280px label, 440px of copy. */
  .ng-v2 .ng-offer__link{
    grid-template-columns:auto minmax(0,1fr) max-content;
    grid-template-areas:"n main to";
    column-gap:32px;
    padding:26px 0;
  }
}
.ng-v2 .ng-offer__n{
  grid-area:n;
  font-family:var(--ng-font-label); font-weight:600;
  font-size:12px; line-height:1.6; letter-spacing:.1em;
  text-transform:none;
  color:var(--ng-accent);             /* 7.69:1 — the pink the dark band swaps in */
  font-variant-numeric:tabular-nums;
}
.ng-v2 .ng-offer__main{ grid-area:main; min-width:0; }
/* Doubled class: the theme's `.content-wrapper h?:not(:first-child)` at (0,2,2)
   sets margin-top:50px and would open a gap between the row's own number and
   its title. §11 of ng-shared, applied to a page-level heading class. */
.ng-v2 .ng-offer__name.ng-offer__name{
  margin:0;
  font-family:var(--ng-font-display); font-weight:600;
  font-size:19px; line-height:1.3;
  letter-spacing:-0.01em;
  color:var(--ng-ink);
  transition:color .16s cubic-bezier(.25,.46,.45,.94);
}
.ng-v2 .ng-offer__body{
  display:block;
  margin-top:8px;
  font-size:15px; line-height:1.62;
  color:var(--ng-muted);              /* 9.22:1 on indigo */
  max-width:62ch;
}
/* A BLOCK, NOT A FLEX ROW. As a flex row the arrow was a sibling of the label
   rather than part of it, so when "ÜRÜN · LOKASYON ANALİZİ MOBILE" wrapped, the
   arrow was pushed onto a third line on its own. Inline it flows with the last
   word, which is where an arrow belongs. Seen in the 1440 screenshot; no
   assertion would have said anything. */
.ng-v2 .ng-offer__to{
  grid-area:to;
  display:block;
  font-family:var(--ng-font-label); font-weight:500;
  font-size:12px; line-height:1.35; letter-spacing:.1em;
  text-transform:none;                /* authored pre-uppercased: i -> İ */
  color:var(--ng-muted);
}
.ng-v2 .ng-offer__to .ng-arrow{ margin-left:8px; }
@media (min-width:900px){
  .ng-v2 .ng-offer__to{
    text-align:right;
    white-space:nowrap;
    padding-top:3px;
  }
}
.ng-v2 .ng-offer__link:hover .ng-offer__name{ color:var(--ng-accent); }
.ng-v2 .ng-offer__link:hover .ng-offer__to{ color:var(--ng-accent); }
.ng-v2 .ng-offer__link:hover .ng-arrow{ transform:translateX(4px); }


/* ==========================================================================
   4. CLOSING RAIL — section 40
   The dark band is assigned to the middle of this page, so the closing
   decision cannot be the indigo slab every other page ends on. It is a SUNKEN
   rail instead: mist + hairline, holding white chrome (the two pills), which
   is the second of the site's two surface roles doing exactly its job.

   It sits inside the ladder's section rather than in one of its own, because
   the page has four sections and this is the fourth. The reader who has just
   read the three steps is the reader deciding whether to start them.
   ========================================================================== */
.ng-v2 .ng-close__rail{
  margin-top:46px;
  padding:26px 22px;
  background:var(--ng-surface-sunken);
  border:1px solid var(--ng-hairline);
  border-radius:var(--ng-radius);
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:24px;
}
@media (min-width:900px){
  .ng-v2 .ng-close__rail{
    grid-template-columns:minmax(0,1fr) auto;
    column-gap:44px;
    align-items:center;
    padding:34px 36px;
  }
}
.ng-v2 .ng-close__eyebrow{ margin:0; }
/* Doubled class for the theme's 50px margin-top, as above. This h2 is NOT the
   first child of its block — the eyebrow is — so `h2:not(:first-child)` does
   match it, unlike the section heads. */
.ng-v2 .ng-close__title.ng-close__title{
  margin:14px 0 0;
  font-size:clamp(1.6rem, 3.2vw, 2.1rem);
  line-height:1.15;
  letter-spacing:-0.02em;
  max-width:22ch;
  text-wrap:balance;
}
.ng-v2 .ng-close__lede{
  margin:14px 0 0;
  font-size:17px; line-height:1.6;
  color:var(--ng-muted);              /* 5.42:1 on mist */
  max-width:54ch;
}
.ng-v2 .ng-close__side{
  display:flex; flex-direction:column;
  align-items:flex-start;
  gap:4px;
}
@media (min-width:900px){
  .ng-v2 .ng-close__side{ align-items:flex-end; text-align:right; }
}
.ng-v2 .ng-close__actions{ margin-top:0; }
/* 14px for the same reason .ng-cta__meta is: a phone number and an address are
   read and copied, and .04em tracking does not earn the label exception. */
.ng-v2 .ng-close__meta{
  margin:16px 0 0;
  font-family:var(--ng-font-label); font-weight:500;
  font-size:14px; line-height:1.6; letter-spacing:.04em;
  color:var(--ng-muted);
}


/* ==========================================================================
   5. RESPONSIVE
   ng-mobile.css §7 carries every 44px hit area (crumbs, buttons, pills, tel)
   at 767, 768–1023 and at exactly 1024. The two interactive things this page
   adds are .ng-offer__link, a row over 100px tall at every width, and the
   chips, which are .ng-btn--pill. So this block is type and rhythm only.
   ========================================================================== */

@media (max-width:899px){
  /* The offer rows lose their third column, so the destination label wraps
     under the copy rather than being squeezed to two words per line. */
  .ng-v2 .ng-offer__body{ max-width:none; }
}

@media (max-width:767px){
  /* Mobile reading floor, 16px, for every sentence this page adds. */
  .ng-v2 .ng-lead__src,
  .ng-v2 .ng-karne__def,
  .ng-v2 .ng-offer__body,
  .ng-v2 .ng-close__lede{ font-size:16px; }

  .ng-v2 .ng-vals__name.ng-vals__name{ font-size:20px; margin-bottom:16px; }
  .ng-v2 .ng-vals__half + .ng-vals__half{ margin-top:28px; padding-top:24px; }
  .ng-v2 .ng-vals__note,
  .ng-v2 .ng-how__note,
  .ng-v2 .ng-out-band__note{ max-width:none; }

  /* THE TABLE AT 390. Four columns still fit inside 342px: rank ~26 + name
     (flexible, "Ümraniye" is the longest at either language's 16px) + score 40
     + change ~78. The score bar is capped so it cannot force the name column
     wider than its own text, and the cell padding comes down in §15b. */
  .ng-v2 .ng-karne__bar{ max-width:160px; }
  .ng-v2 .ng-karne__score{ font-size:18px; }
  .ng-v2 .ng-karne__deck{ margin-bottom:24px; padding-bottom:22px; }
  .ng-v2 .ng-offer__link{ padding:20px 0; }
  .ng-v2 .ng-close__rail{ margin-top:36px; padding:22px 18px; }
  .ng-v2 .ng-close__meta{ margin-top:14px; }
}

/* TRIED AND REVERTED: `.ng-karne__table thead th{letter-spacing:.06em}` below
   400px, to make "10 DK’DA RAKİP · SON 12 AY" wrap at the middle dot instead of
   mid-word. ng-page-check reported four new defects at 390 the moment it
   shipped — the tracked-label exception is measured, not declared, and it needs
   letter-spacing/font-size >= 0.08. Pulling an 11px label to .06em turns it
   into untracked body copy three pixels under the reading floor. If a header
   is too wide, shorten the STRING; do not loosen the label contract to fit it. */


/* ==========================================================================
   6. 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 — and ng-components.css §8 does the same for .ng-anim. The two
   transitions this sheet adds are both colour-only except the arrow, which is
   the shared .ng-arrow rule §10 already covers. The score bars are static
   widths, not transitions, precisely so a reduce preference has nothing to
   switch off here.
   ========================================================================== */
@media (prefers-reduced-motion:reduce){
  .ng-v2 .ng-offer__name{ transition:none; }
}


/* ==========================================================================
   7. THE FIGURE INTERLUDE — section 30, on the dark band
   ADDED BY THE IMAGE ROLLOUT. One client image, and only one, between the
   section head and the ruled index. Nothing else about the page changed.

   WHY ONE, AND WHY HERE. Three sector siblings sit on the same B-STACK/
   F-INDEX family and are told apart by dominant content shape alone, so the
   count is part of the silhouette: otomotiv takes a stacked pair, telekom a
   three-up strip, this page a single wide band. Four pictures down the four
   index rows would have turned a contents list into a catalogue and put this
   page back on top of both of them. The other three akaryakit assets are
   dropped for that reason, not because they are worse.

   MAX-WIDTH IS THE POINT OF THIS RULE. .ng-figband__img is width:100% and the
   asset is 780px wide; the container is 1120px at 1440, so an uncapped band
   would upscale the raster by 1.44x and go soft. 780 + margin-inline:auto
   centres it in the band at every width above that and is a no-op below it.
   No new colour, no new type, no new column — the shared §17 primitive does
   all of that, including the chip and the caption on the indigo palette
   (pink accent on accent-wash, 5.89:1; muted caption on navy, 9.22:1).
   ========================================================================== */
.ng-v2 .ng-offer-band__fig{
  max-width:780px;
  margin:0 auto 40px;
}

@media (max-width:767px){
  /* The head's own gap drops from 36 to 26 at this width (ng-shared §2), so
     the figure's follows it down and the band keeps its rhythm. */
  .ng-v2 .ng-offer-band__fig{ margin-bottom:30px; }
}


/* ==========================================================================
   8. FIGURE MARGINS — SPECIFICITY DEFENCE (image rollout, 2026-08-18)
   Elementor frontend.css ships
     .elementor .elementor-widget:not(.elementor-widget-text-editor)
     :not(.elementor-widget-theme-post-content) figure{margin:0}
   at (0,4,1), and it loads AFTER the page sheets in the LiteSpeed-combined
   file. Every margin this sheet sets on a <figure> was therefore dropped:
   a capped figure rendered flush LEFT instead of centred and the gap under
   it collapsed to 0. Measured, not inferred — on /sektorler/akaryakit/ the
   figure computed margin-left:0px against an authored `0 auto 40px`.
   The declarations below are the SAME ones already written above, restated
   at (0,6,1) so they clear BOTH Elementor and the (0,5,1) rule
   ng-shared.css section 17 now ships: figure.ng-figband__fig.ng-figband__fig
   {margin:0}. Same declarations as above, no new values.
   ========================================================================== */
.ng-v2 .ng-section .ng-container figure.ng-offer-band__fig.ng-offer-band__fig.ng-offer-band__fig{ margin:0 auto 40px; }
@media (max-width:767px){
  .ng-v2 .ng-section .ng-container figure.ng-offer-band__fig.ng-offer-band__fig.ng-offer-band__fig{ margin-bottom:30px; }
}