/*
 * Price list (/fiyat). A price histogram you can narrow by dragging, above a price board
 * where every firm's AC and DC prices sit on their market's scale. AC keeps the brand cyan and DC its green shade,
 * the same #00e5 with less blue, for speed, on every surface of the page: histogram, switch, headings and meters.
 */
.prices-page {
  --price-ac: #0092ab;
  --price-ac-soft: rgb(0 146 171 / 12%);
  --price-dc: #009266;
  --price-dc-soft: rgb(0 146 102 / 12%);
  /* The panel's glow follows the site accent, like the campaign page's accent surfaces, not the AC/DC colours. */
  --price-glow: rgb(var(--color-brand-rgb) / 10%);
  --price-glow-faint: rgb(var(--color-brand-rgb) / 6%);
}
:root[data-theme="dark"] .prices-page {
  --price-ac: #00e5ff;
  --price-ac-soft: rgb(0 229 255 / 14%);
  --price-dc: #00e5a0;
  --price-dc-soft: rgb(0 229 160 / 14%);
  --price-glow: rgb(var(--color-brand-rgb) / 16%);
  --price-glow-faint: rgb(var(--color-brand-rgb) / 8%);
}

/* Price distribution panel */
.price-pulse {
  position: relative;
  margin-block-end: 1.25rem;
  padding: 1.25rem 1.25rem 1rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(110% 90% at 0% 0%, var(--price-glow), transparent 58%),
    radial-gradient(90% 80% at 100% 100%, var(--price-glow-faint), transparent 62%),
    var(--color-surface);
  overflow: hidden;
}

/* Histogram, the AC/DC switch and the range that narrows the list */
.price-pulse__chart-head { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-block-end: .5rem; }
.price-pulse__chart-head h2 { margin: 0; font-size: var(--text-card-title); font-weight: 700; letter-spacing: -.01em; }
.price-pulse__switch { display: none; }
.has-js .price-pulse__switch { display: inline-flex; gap: 2px; padding: 3px; border: 1px solid var(--color-border); border-radius: var(--radius-pill); background: var(--color-surface-subtle); }
.price-pulse__switch-button {
  min-width: 3.25rem;
  padding: .25rem .875rem;
  border: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--color-text-secondary);
  font: 700 var(--text-sm)/1.4 var(--font-sans);
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast);
}
.price-pulse__switch-button--ac { --switch-color: var(--price-ac); }
.price-pulse__switch-button--dc { --switch-color: var(--price-dc); }
.price-pulse__switch-button:hover { color: var(--color-text); }
.price-pulse__switch-button[aria-pressed="true"] { background: var(--switch-color); color: var(--color-on-brand); }
.price-pulse__switch-button:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }

.price-hist { --hist-color: var(--price-ac); --hist-soft: var(--price-ac-soft); position: relative; margin: 0; }
.price-hist__tip {
  position: absolute;
  z-index: 3;
  padding: .25rem .5rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface-raised);
  box-shadow: 0 6px 18px rgb(0 0 0 / 18%);
  color: var(--color-text);
  font-size: var(--text-sm);
  font-weight: 650;
  white-space: nowrap;
  pointer-events: none;
  transform: translate(-50%, calc(-100% - 6px));
}
.price-hist__tip[hidden] { display: none; }
.price-hist + .price-hist { margin-block-start: 1.25rem; }
/* Once the switch takes over, both histograms share one grid cell and the hidden one keeps its space, so the
   panel always has the taller one's height and nothing below moves when AC and DC swap. */
.price-pulse__stack[data-stacked] { display: grid; }
.price-pulse__stack[data-stacked] > .price-hist { grid-area: 1 / 1; min-width: 0; margin: 0; }
.price-pulse__stack[data-stacked] > .price-hist[data-hist-off] { visibility: hidden; }
/* The same layout from the first paint: .has-js is set in the head, and until prices.js takes over only the
   first histogram (the switch's default) shows, so the section does not shrink and shift everything below. */
.has-js .price-pulse__chart:has(.price-pulse__switch) .price-pulse__stack { display: grid; }
.has-js .price-pulse__chart:has(.price-pulse__switch) .price-pulse__stack > .price-hist { grid-area: 1 / 1; min-width: 0; margin: 0; }
.has-js .price-pulse__chart:has(.price-pulse__switch) .price-pulse__stack:not([data-stacked]) > .price-hist + .price-hist { visibility: hidden; }
.price-hist[data-price-hist="dc"] { --hist-color: var(--price-dc); --hist-soft: var(--price-dc-soft); }
.price-hist__caption { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: .25rem 1rem; margin-block-end: .25rem; color: var(--color-text-secondary); font-size: var(--text-sm); }
.price-hist__title { color: var(--color-text); font-weight: 650; }
/* With the switch the heading already names the current; the caption keeps it for screen readers. */
.has-js .price-pulse__chart:has(.price-pulse__switch) .price-hist__title { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.has-js .price-pulse__chart:has(.price-pulse__switch) .price-hist__caption { justify-content: flex-end; }
.price-hist__legend { display: inline-flex; align-items: center; gap: .375rem; }
.price-hist__median-key { width: 0; height: .875rem; border-inline-start: 2px dashed var(--color-text-secondary); }
.price-hist__chart { display: block; overflow: visible; }
.price-hist__bar { fill: var(--hist-color); opacity: .88; transition: opacity var(--transition-fast); }
.has-js .price-hist__bar:not(.is-empty) { cursor: pointer; }
.price-hist__bar.is-empty { fill: var(--color-border); opacity: 1; }
.price-hist__bar.is-out { opacity: .16; }
.price-hist__bar.is-hover, .has-js .price-hist__bar:not(.is-empty):hover { opacity: 1; }
:root[data-theme="dark"] .price-hist__bar.is-hover { filter: drop-shadow(0 0 6px var(--hist-color)); }
.price-hist__baseline { stroke: var(--color-border); stroke-width: 1; }
.price-hist__median { stroke: var(--color-text-secondary); stroke-width: 1.5; stroke-dasharray: 3 3; }
.price-hist__peak { fill: var(--color-text-secondary); font-family: var(--font-sans); font-size: var(--text-sm); font-weight: 650; paint-order: stroke; stroke: var(--color-surface); stroke-width: 4px; stroke-linejoin: round; }
.price-hist__tick { fill: var(--color-text-muted); font-family: var(--font-mono); font-size: var(--text-sm); }

.price-range { display: none; }
.has-js .price-range { display: block; margin-block-start: .25rem; }
/* Half a thumb past each side, so the thumb centres reach the chart's edges and line up with the bars. */
/* 24px tall: the minimum touch target height (WCAG 2.5.8). */
.price-range__track { position: relative; height: 1.5rem; margin-inline: -.5625rem; }
.price-range__track::before { content: ""; position: absolute; inset-inline: .5625rem; inset-block-start: 50%; height: 4px; margin-block-start: -2px; border-radius: var(--radius-pill); background: var(--color-border); }
.price-range__fill { position: absolute; inset-block-start: 50%; inset-inline-start: .5625rem; width: calc(100% - 1.125rem); height: 4px; margin-block-start: -2px; border-radius: var(--radius-pill); background: var(--hist-color); }
.price-range__input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; background: none; pointer-events: none; appearance: none; -webkit-appearance: none; }
.price-range__input::-webkit-slider-runnable-track { height: 100%; background: transparent; }
.price-range__input::-moz-range-track { background: transparent; }
.price-range__input::-webkit-slider-thumb {
  width: 1.125rem;
  height: 1.125rem;
  margin-block-start: .1875rem;
  border: 2px solid var(--hist-color);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  box-shadow: 0 0 0 4px var(--hist-soft);
  cursor: grab;
  pointer-events: auto;
  -webkit-appearance: none;
}
.price-range__input::-moz-range-thumb {
  width: 1.125rem;
  height: 1.125rem;
  box-sizing: border-box;
  border: 2px solid var(--hist-color);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  box-shadow: 0 0 0 4px var(--hist-soft);
  cursor: grab;
  pointer-events: auto;
}
.price-range__input:active::-webkit-slider-thumb { cursor: grabbing; }
.price-range__input:focus-visible::-webkit-slider-thumb { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.price-range__input:focus-visible::-moz-range-thumb { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.price-range__values { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: .25rem 1rem; margin: .375rem 0 0; color: var(--color-text-muted); font-size: var(--text-sm); }
.price-range__values [data-range-label] { color: var(--color-text); font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

/* Results line */
.price-results { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem 1rem; }
.price-results__note { color: var(--color-text); }
.price-results__reset[hidden] { display: none; }
.price-results .price-results__reset { min-height: 0; padding: .25rem .625rem; font-size: var(--text-sm); }

/* Price board */
.price-board { border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); overflow: clip; }
.price-board__table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.price-board__table th, .price-board__table td { padding: .75rem 1rem; border-block-end: 1px solid var(--color-border-soft); text-align: start; vertical-align: middle; }
.price-board__table thead th {
  position: sticky;
  inset-block-start: var(--header-height);
  z-index: 2;
  padding-block: .625rem;
  background: var(--color-surface-subtle);
  color: var(--color-text-muted);
  font-size: var(--text-table-header);
  font-weight: 700;
}
.price-board__table thead th:first-child { width: 46%; }
.price-board__sort { display: inline-flex; align-items: center; gap: .375rem; padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; }
.price-board__sort:hover { color: var(--color-text); }
.price-board__sort:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; border-radius: var(--radius-xs); }
.price-board__sort::after { content: "↕"; opacity: .35; font-family: var(--font-sans); }
th[aria-sort="ascending"] .price-board__sort::after { content: "↑"; opacity: 1; }
th[aria-sort="descending"] .price-board__sort::after { content: "↓"; opacity: 1; }
th[aria-sort] .price-board__sort { color: var(--color-text); }
.price-board__current .price-board__sort::before { content: ""; width: 8px; height: 8px; border-radius: var(--radius-pill); background: var(--cell-color); }
.price-board__current--ac, .price-board td[data-current="AC"] { --cell-color: var(--price-ac); --cell-soft: var(--price-ac-soft); }
.price-board__current--dc, .price-board td[data-current="DC"] { --cell-color: var(--price-dc); --cell-soft: var(--price-dc-soft); }
.price-board__table .unit-label { color: inherit; font-weight: 500; }

.price-board__table tbody tr { transition: background-color var(--transition-fast); }
.price-board__table tbody tr:hover { background: rgb(var(--color-brand-rgb) / 4%); }
.price-board__table tbody tr:last-child > * { border-block-end: 0; }
.price-board__table tbody tr[hidden] { display: none; }
/* Firm cells share the row's background and hover; only the column headings keep their own. */
.price-board__table tbody th { background: transparent; font-weight: inherit; }

.price-board__firm { display: flex; align-items: center; gap: .75rem; min-width: 0; }
.price-board__firm a.operator-logo-link { gap: .75rem; color: var(--color-text); text-decoration-line: none; }
/* The site underlines firm links in the brand colour; here only the name carries it, not the station count. */
.price-board__firm .operator-name { text-decoration-line: underline; text-decoration-color: var(--color-brand); text-decoration-thickness: max(1px, .09em); text-underline-offset: .2em; }
.price-board__firm a.operator-logo-link:hover .operator-name { text-decoration-thickness: 2px; }
.price-board__identity { display: flex; flex-direction: column; min-width: 0; line-height: 1.35; }
.price-board__identity .operator-name { font-weight: 650; }
.price-board__meta { color: var(--color-text-muted); font-size: var(--text-sm); }
.price-board__campaign {
  flex: none;
  margin-inline-start: auto;
  padding: .125rem .5rem;
  border: 1px solid color-mix(in srgb, var(--color-success) 35%, transparent);
  border-radius: var(--radius-pill);
  background: var(--color-success-soft);
  color: var(--color-success);
  font-size: var(--text-sm);
  font-weight: 650;
  line-height: 1.4;
  text-decoration: none;
  white-space: nowrap;
}
.price-board__campaign:hover { border-color: var(--color-success); }

.price-board__amounts { display: flex; align-items: baseline; flex-wrap: wrap; gap: .125rem .5rem; }
.price-board .price-line__amount { color: var(--color-text); font-family: var(--font-mono); font-size: var(--text-base); font-variant-numeric: tabular-nums; white-space: nowrap; }
.price-board__tag { padding: 0 .375rem; border-radius: var(--radius-xs); background: var(--cell-soft); color: var(--color-text); font-size: var(--text-sm); font-weight: 650; line-height: 1.5; white-space: nowrap; }
.price-board__tag::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-inline-end: .3125rem; border-radius: var(--radius-pill); background: var(--cell-color); vertical-align: middle; }
.price-meter { display: block; max-width: 11rem; margin-block-start: .5rem; overflow: visible; }
.price-meter__track { stroke: var(--color-border); stroke-width: 2; stroke-linecap: round; }
.price-meter__median { stroke: var(--color-text-muted); stroke-width: 1.5; }
.price-meter__value { stroke: var(--cell-color); stroke-width: 6; stroke-linecap: round; }
circle.price-meter__value { fill: var(--cell-color); stroke: none; }
/* The current shown in the histogram leads; the other column steps back. */
.price-board[data-focus="ac"] td[data-current="DC"] .price-meter,
.price-board[data-focus="dc"] td[data-current="AC"] .price-meter { opacity: .4; }

.price-board__none { margin: 0; padding: 2rem 1rem; color: var(--color-text-secondary); text-align: center; }
.price-board__none[hidden] { display: none; }
.price-board__footnote { margin: .75rem 0 0; color: var(--color-text-muted); font-size: var(--text-sm); }

@media (min-width: 62rem) {
  /* The form lists sorting right after the current type; the columns follow that order. */
  .prices-page .filter-grid--prices { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) minmax(0, 1.1fr) repeat(2, minmax(0, .8fr)) auto; }
}

@media (max-width: 43.99rem) {
  .price-pulse { padding: 1rem .875rem .875rem; }
  .price-hist__tick.is-odd { display: none; }
  .price-range__hint { display: none; }
  /* The filters pair up on phones: search and the buttons span the row, the rest share it. */
  .prices-page .filter-grid--prices { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
  .prices-page .filter-grid--prices > .form-field:first-child, .prices-page .filter-grid--prices > .filter-actions { grid-column: 1 / -1; }

  .price-board__table, .price-board__table tbody { display: block; }
  .price-board__table thead { display: block; position: sticky; inset-block-start: var(--header-height); z-index: 2; background: var(--color-surface); border-block-end: 1px solid var(--color-border-soft); }
  .price-board__table thead tr { display: flex; flex-wrap: wrap; gap: .375rem; padding: .625rem .75rem; }
  .price-board__table thead th, .price-board__table thead th:first-child { position: static; width: auto; padding: 0; border: 0; background: none; }
  .price-board__sort { padding: .25rem .625rem; border: 1px solid var(--color-border); border-radius: var(--radius-pill); background: var(--color-surface); }
  th[aria-sort] .price-board__sort { border-color: var(--color-text-secondary); }
  .price-board__table thead .unit-label { display: none; }
  .price-board__table tbody tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; padding: .75rem; border-block-end: 1px solid var(--color-border-soft); }
  .price-board__table tbody tr:last-child { border-block-end: 0; }
  .price-board__table tbody tr[hidden] { display: none; }
  .price-board__table tbody th { grid-column: 1 / -1; padding: 0; border: 0; }
  .price-board__table tbody td { min-width: 0; padding: .5rem .625rem .625rem; border: 1px solid var(--color-border-soft); border-radius: var(--radius-md); }
  .price-board__table tbody td::before { content: attr(data-current); display: block; margin-block-end: .125rem; color: var(--color-text-muted); font-size: var(--text-sm); font-weight: 700; }
  .price-board__firm, .price-board__firm a.operator-logo-link { gap: .625rem; }
  .price-meter { max-width: none; }
  .price-board .price-line__amount { white-space: normal; }
}