/* Ödeme - sayfa yüzeyi.
   Page-local only. Shared tokens and chrome stay in style.css.

   Direction: `03 - Dört Kapı`, selected from the payment direction round under
   `iterations/payment-directions/`. Operator selection, 2026-08-03.

   The page is one board of five surfaces. It has no scroll story, no pinned
   scene and no page-local ScrollTrigger: every way to pay is on the first
   screen and the visitor picks one.

   The hierarchy is carried by the grounds rather than by type size. Paper
   states the page, graphite carries the primary action, the brand field
   carries the telephone number, the brightest paper carries the one value
   somebody transcribes by hand, and the deepest graphite closes with the four
   banks. That is the whole ranking mechanism, which is why the page needs only
   one heading scale under the title.

   Two things this sheet adds over the first build of the board.

   The board is one grid rather than a grid and a strip beneath it, and the
   tracks that grid sits on re-proportion under the pointer. A surface being
   read takes room from the four it is not, and takes it from a fixed budget:
   the pair of tracks always sums to two, so the board never changes size and
   nothing outside it moves. That is the whole of the mechanic. It is a
   proportion change, not a lift, a tilt, a shadow or a scale, because those
   are what make a board of this density unpleasant to read.

   And two of the five surfaces now carry a drawn object of their own, set out
   from the real thing rather than from an icon set: a pair of payment cards at
   the true ID-1 proportion, and a counter transfer slip whose account row has
   one cell per character of a Turkish IBAN. Both are line drawings at rest, so
   the values stay the loudest thing in their cell. Approach is what makes them
   physical. */

/* ---------- Type ---------- */

/* Bricolage Grotesque, already in the repository with its licence and already
   set on the reseller directory, is declared here rather than in `style.css`
   because that sheet belongs to the closing chrome pass. It ships as the 45 KB
   subset woff2 and is `swap`, so it blocks no paint.

   The page sets words in Bricolage and figures in Inter Tight, and the split
   is not a compromise. This page exists to hand over two numbers - a telephone
   number and an IBAN - and Inter Tight has the tabular figures that let a
   reader compare and transcribe them without the digits shifting under their
   eye. Bricolage has the character; Inter Tight has the column. */
@font-face {
  font-family: "Bricolage Grotesque";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("../fonts/BricolageGrotesque-latin-ext-400-800-v1.woff2")
    format("woff2");
}

/* One scale, six ranks, each one clearly a step from the one under it. The
   first build had four ranks doing six jobs and two pairs of them landed on
   the same size, which is what made a board of large surfaces read flat. */
.pay-board {
  --font-word: "Bricolage Grotesque", "Inter Tight", sans-serif;

  --step-title: clamp(66px, 8.8vw, 156px);
  --step-heading: clamp(27px, 3vw, 46px);
  --step-figure: clamp(34px, 4.4vw, 66px);
  --step-value: clamp(20px, 2.05vw, 30px);
  --step-body: clamp(15px, 1.05vw, 16px);
  --step-label: clamp(10.5px, 0.78vw, 11.5px);

  font-optical-sizing: auto;
}

/* ---------- Board ---------- */

/* The board starts at the top of the document rather than below the header.
   The header is fixed and transparent, so a board that began under it would
   leave nothing themed at the sample point and the bar would keep whatever
   theme the markup shipped with. The two top cells reserve the bar's height
   in their own padding instead.

   The bank strip is the third row of this same grid and spans both columns,
   which is what makes the five surfaces one piece of machinery instead of a
   board with an appendix. */
.pay-board {
  /* The whole budget of the mechanic, in one place. The pair sums to two, so
     the board is the same size in all five states. */
  --pay-open: 1.12fr;
  --pay-hold: 0.88fr;
  --pay-shift: 620ms;
  --pay-ease: cubic-bezier(0.16, 1, 0.3, 1);

  display: grid;
  grid-template-columns: 1fr 1fr;
  /* The rows are not equal, and the ratio is deliberately below what the top
     band would take if it were free to. The masthead and the portal say one
     thing each; the telephone number and the transfer - which now closes with
     the four banks - need the room underneath. Operator instruction,
     2026-08-03.

     Set this way, the top row never claims more than its content on a short
     screen, so the board's smallest possible height is the sum of what the two
     rows actually need rather than that sum inflated by a fixed share. That is
     what lets the whole page hold inside one frame on a laptop. */
  grid-template-rows: 0.68fr 1.32fr;
  min-height: 100vh;
  transition:
    grid-template-columns var(--pay-shift) var(--pay-ease),
    grid-template-rows var(--pay-shift) var(--pay-ease);
}

/* Pointer and keyboard both open a surface, and they are declared apart on
   purpose: `:hover` is scoped to devices that really have a pointer, while
   `:focus-visible` has to work everywhere, including on a touch screen driven
   from a keyboard.

   A track transition is layout-bound rather than composited, which on this
   page is the right trade: five cells and two figures re-lay in a frame, and
   the alternative - a `transform: scale()` on the cell - would resample the
   type of a page whose whole job is a telephone number and an IBAN. */
/* Both sets are behind the same width query as the two-column board itself.
   A `:has()` rule outscores the plain `.pay-board` rule the compact layout
   uses, so a rule left outside this query would put a one-column phone board
   back on two tracks the moment anything in it took focus. */
@media (min-width: 901px) {
  .pay-board:has(.pay-cell--call:focus-visible) {
    grid-template-columns: var(--pay-open) var(--pay-hold);
  }

  .pay-board:has(.pay-cell--portal:focus-visible),
  .pay-board:has(.pay-cell--transfer:focus-visible) {
    grid-template-columns: var(--pay-hold) var(--pay-open);
  }

  .pay-board:has(.pay-cell--portal:focus-visible) {
    grid-template-rows: 0.76fr 1.24fr;
  }

  .pay-board:has(.pay-cell--call:focus-visible),
  .pay-board:has(.pay-cell--transfer:focus-visible) {
    grid-template-rows: 0.6fr 1.4fr;
  }
}

@media (min-width: 901px) and (hover: hover) and (pointer: fine) {
  .pay-board:has(.pay-cell--call:hover) {
    grid-template-columns: var(--pay-open) var(--pay-hold);
  }

  .pay-board:has(.pay-cell--portal:hover),
  .pay-board:has(.pay-cell--transfer:hover) {
    grid-template-columns: var(--pay-hold) var(--pay-open);
  }

  .pay-board:has(.pay-cell--portal:hover) {
    grid-template-rows: 0.76fr 1.24fr;
  }

  .pay-board:has(.pay-cell--call:hover),
  .pay-board:has(.pay-cell--transfer:hover) {
    grid-template-rows: 0.6fr 1.4fr;
  }
}

.pay-cell {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 9px;
  /* A cell that clips is a scroll container, and a scroll container's
     automatic minimum size is zero - so without this the grid was free to
     hand a shrinking row less height than the cell's own content needed, and
     the transfer cell lost its last line off the bottom edge whenever a
     neighbour opened. `max-content` puts the floor back where the content is,
     so a surface opens exactly as far as the tightest cell can afford. */
  min-height: max-content;
  padding: clamp(20px, 2.3vw, 38px);
  text-decoration: none;
  overflow: hidden;
}

.pay-cell--title,
.pay-cell--portal {
  padding-top: calc(var(--header-height) + clamp(18px, 2vw, 32px));
}

/* The page sets its own heading boxes. The document default puts a 0.67em
   margin on an `h1`, which at this title's size is 83px of dead space above
   and below it and pushes the lead most of a cell away from the word it
   belongs to. */
.pay-title,
.pay-cell__title,
.pay-banks__title {
  margin: 0;
}

.pay-cell > * {
  position: relative;
  z-index: 1;
}

/* Two of the five surfaces are links the size of a quarter of the screen, and
   on grounds that strong the browser's own ring is easy to lose. Each cell
   draws its own instead, set in from the edge and in the ink of whatever
   ground it is standing on. */
.pay-cell:focus-visible {
  outline: none;
}

.pay-cell:focus-visible::after {
  position: absolute;
  z-index: 2;
  content: "";
  inset: 12px;
  border: 2px solid currentColor;
  pointer-events: none;
}

/* ---------- The drawn objects ---------- */

/* Both figures are hand-authored inline SVG rather than a file behind an
   `img`, because an external document cannot be reached by the stylesheet and
   the whole point of them is that the cell's own state drives them.

   They sit under the type at `z-index: 0`, they are cropped by the cell's
   `overflow: hidden` rather than fitted inside it - an object that stops short
   of an edge reads as an object that did not fit - and they take no pointer
   events, so nothing about them can get between the visitor and the link they
   are standing on. */
.pay-figure {
  position: absolute;
  z-index: 0;
  pointer-events: none;
}

.pay-figure svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

/* Nothing in either figure moves on its own. Every value below is a rest state
   and an approach state with a transition between them: no loop, no idle
   drift, and no motion at all until a pointer or the keyboard asks for it. */
.pay-figure * {
  transition:
    opacity var(--pay-shift, 620ms) var(--pay-ease, ease),
    transform var(--pay-shift, 620ms) var(--pay-ease, ease),
    fill var(--pay-shift, 620ms) var(--pay-ease, ease),
    stroke-opacity var(--pay-shift, 620ms) var(--pay-ease, ease);
}

/* ---------- Figure: the invoice ---------- */

/* Cropped by the foot of its surface and standing behind the word, at the one
   size that lets the item table read as a table rather than as texture. */
.pay-figure--invoice {
  top: clamp(64px, 7.4vh, 116px);
  right: clamp(-18px, -1.2vw, 0px);
  width: clamp(168px, 42%, 340px);
}

.pay-inv__sheet {
  fill: var(--paper-bright);
  stroke: var(--line-strong);
  stroke-width: 1.6;
}

.pay-inv__rule {
  fill: none;
  stroke: var(--line-strong);
  stroke-width: 1.2;
}

.pay-inv__bar rect,
.pay-inv__bar,
.pay-inv__code rect {
  fill: var(--line);
}

.pay-inv__code rect {
  fill: var(--ink);
  fill-opacity: 0.42;
}

.pay-inv__tick rect {
  fill: var(--signal-orange);
  fill-opacity: 0.4;
}

.pay-inv__perf {
  fill: none;
  stroke: var(--line-strong);
  stroke-width: 1.2;
  stroke-dasharray: 3 5;
}

/* The one part of the sheet the rest of the board can reach. It is quiet
   until a way of paying is engaged, and then it is the accent - which is the
   page saying, in the only way a drawing can, what those four surfaces are
   for. */
.pay-inv__sum {
  fill: var(--ink);
  fill-opacity: 0.18;
}

.pay-board:has(.pay-cell--portal:hover) .pay-inv__sum,
.pay-board:has(.pay-cell--call:hover) .pay-inv__sum,
.pay-board:has(.pay-cell--transfer:hover) .pay-inv__sum,
.pay-board:has(.pay-banks a:hover) .pay-inv__sum,
.pay-board:has(.pay-cell--portal:focus-visible) .pay-inv__sum,
.pay-board:has(.pay-cell--call:focus-visible) .pay-inv__sum,
.pay-board:has(.pay-cell--transfer:focus-within) .pay-inv__sum,
.pay-board:has(.pay-banks a:focus-visible) .pay-inv__sum {
  fill: var(--signal-orange);
  fill-opacity: 1;
}

/* ---------- Figure: the service counter ---------- */

.pay-figure--counter {
  right: 2%;
  bottom: -6%;
  width: clamp(160px, 32%, 250px);
}

.pay-desk__frame {
  fill: none;
  stroke: var(--paper-bright);
  stroke-width: 1.8;
  stroke-opacity: 0.5;
}

.pay-desk__void {
  fill: #000;
  fill-opacity: 0.26;
}

.pay-desk__depth {
  fill: none;
  stroke: var(--paper-bright);
  stroke-width: 1.2;
  stroke-opacity: 0.14;
}

/* Four slats hanging out of the housing. On approach each one climbs back
   into it, the lowest travelling furthest, so the hatch opens rather than
   disappearing. */
.pay-desk__slat rect {
  fill: var(--paper-bright);
  fill-opacity: 0.16;
  stroke: var(--paper-bright);
  stroke-width: 1.4;
  stroke-opacity: 0.42;
}

.pay-cell--portal:hover .pay-desk__slat rect,
.pay-cell--portal:focus-visible .pay-desk__slat rect {
  transform: translateY(calc(-26px - var(--i) * 22px));
  transition-delay: calc(var(--i) * 60ms);
}

.pay-desk__lamp {
  fill: var(--paper-bright);
  fill-opacity: 0.28;
}

.pay-cell--portal:hover .pay-desk__lamp,
.pay-cell--portal:focus-visible .pay-desk__lamp {
  fill: var(--signal-orange-invert);
  fill-opacity: 1;
  transition-delay: 260ms;
}

/* ---------- Figure: the payment cards ---------- */

.pay-figure--card {
  top: 3%;
  right: -12%;
  width: clamp(220px, 53%, 420px);
}

/* The measure marks around the card. They are the quietest thing in the
   figure and they are what makes it a drawing of an object rather than a
   picture of one. */
.pay-card__guide {
  stroke: var(--ink);
  stroke-width: 1.2;
  stroke-opacity: 0.18;
  fill: none;
}

.pay-card__front,
.pay-card__back {
  transform-box: fill-box;
}

.pay-card__body {
  fill: none;
  stroke: var(--ink);
  stroke-width: 2;
  stroke-opacity: 0.5;
}

/* The card beneath is the reverse of a card, so the one thing it can show is
   the magnetic stripe. At rest only its right edge is out from under the front
   card; approach slides the pair apart and the stripe becomes readable as what
   it is. */
.pay-card__back {
  opacity: 0.16;
}

.pay-card__stripe {
  fill: var(--ink);
  fill-opacity: 0.62;
}

.pay-card__panel {
  fill: var(--paper-bright);
  fill-opacity: 0;
}

.pay-card__hatch {
  stroke: var(--ink);
  stroke-width: 1.2;
  stroke-opacity: 0.4;
}

.pay-card__chip {
  stroke: var(--ink);
  stroke-width: 1.8;
  stroke-opacity: 0.62;
}

.pay-card__chip rect {
  fill: var(--ink);
  fill-opacity: 0;
}

.pay-card__wave path {
  stroke: var(--ink);
  stroke-width: 3;
  stroke-linecap: round;
  opacity: 0.22;
}

.pay-card__emboss {
  fill: none;
  stroke: var(--ink);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-opacity: 0.22;
}

.pay-cell--call:hover .pay-card__body,
.pay-cell--call:focus-visible .pay-card__body {
  stroke-opacity: 0.9;
}

.pay-cell--call:hover .pay-card__front .pay-card__body,
.pay-cell--call:focus-visible .pay-card__front .pay-card__body {
  fill: var(--paper-bright);
}

.pay-cell--call:hover .pay-card__front,
.pay-cell--call:focus-visible .pay-card__front {
  transform: translate(-20px, -15px);
}

.pay-cell--call:hover .pay-card__back,
.pay-cell--call:focus-visible .pay-card__back {
  opacity: 1;
  transform: translate(12px, 9px);
}

.pay-cell--call:hover .pay-card__back .pay-card__body,
.pay-cell--call:focus-visible .pay-card__back .pay-card__body {
  fill: var(--paper);
}

.pay-cell--call:hover .pay-card__panel,
.pay-cell--call:focus-visible .pay-card__panel {
  fill-opacity: 1;
}

.pay-cell--call:hover .pay-card__chip rect,
.pay-cell--call:focus-visible .pay-card__chip rect {
  fill-opacity: 0.16;
}

.pay-cell--call:hover .pay-card__emboss,
.pay-cell--call:focus-visible .pay-card__emboss {
  stroke-opacity: 0.4;
}

/* The contactless mark opens one ring at a time, from the chip outward, which
   is the direction the thing actually works in. Four steps of 70ms, so the
   whole gesture is over well inside the track shift it rides on. */
.pay-cell--call:hover .pay-card__wave path,
.pay-cell--call:focus-visible .pay-card__wave path {
  opacity: 1;
}

.pay-card__wave path:nth-child(1) {
  transition-delay: 60ms;
}

.pay-card__wave path:nth-child(2) {
  transition-delay: 130ms;
}

.pay-card__wave path:nth-child(3) {
  transition-delay: 200ms;
}

.pay-card__wave path:nth-child(4) {
  transition-delay: 270ms;
}

/* ---------- Figure: the transfer slip ---------- */

/* Set into the corner of the surface and bled past two of its edges, so the
   sheet is cropped by the cell the way a form is cropped by the counter it is
   lying on. The account list above it is capped in width to keep clear. */
.pay-figure--slip {
  right: -26px;
  bottom: 32%;
  width: clamp(170px, 38%, 280px);
}

.pay-slip__sheet {
  fill: var(--paper);
  fill-opacity: 0;
  stroke: var(--line-strong);
  stroke-width: 1.6;
}

.pay-slip__field rect {
  fill: none;
  stroke: var(--line);
  stroke-width: 1.2;
}

.pay-slip__bar rect {
  fill: var(--line);
}

.pay-slip__tick rect {
  fill: var(--signal-orange);
  fill-opacity: 0.45;
}

.pay-slip__iban rect {
  fill: var(--ink);
  fill-opacity: 0;
  stroke: var(--line-strong);
  stroke-width: 1.1;
}

.pay-cell--transfer:hover .pay-slip__sheet,
.pay-cell--transfer:focus-within .pay-slip__sheet {
  fill-opacity: 1;
}

.pay-cell--transfer:hover .pay-slip__field rect,
.pay-cell--transfer:focus-within .pay-slip__field rect {
  stroke: var(--line-strong);
}

.pay-cell--transfer:hover .pay-slip__bar rect,
.pay-cell--transfer:focus-within .pay-slip__bar rect {
  fill: var(--line-strong);
}

.pay-cell--transfer:hover .pay-slip__tick rect,
.pay-cell--transfer:focus-within .pay-slip__tick rect {
  fill-opacity: 1;
}

/* The account row fills left to right at 13ms a cell: twenty-six cells in
   about a third of a second, which is the pace of somebody copying an IBAN
   across rather than a bar loading. */
.pay-cell--transfer:hover .pay-slip__iban rect,
.pay-cell--transfer:focus-within .pay-slip__iban rect {
  fill-opacity: 0.82;
  transition-delay: calc(var(--i) * 13ms);
}

/* The stamp lands after the last cell is in, once and without a bounce. */
.pay-slip__stamp {
  opacity: 0;
  transform: rotate(-14deg) scale(1.16);
  transform-origin: 406px 290px;
  transform-box: view-box;
}

.pay-slip__stamp-ring,
.pay-slip__stamp-inner,
.pay-slip__stamp-line {
  fill: none;
  stroke: var(--orange-ink);
}

.pay-slip__stamp-ring {
  stroke-width: 4;
}

.pay-slip__stamp-inner {
  stroke-width: 1.4;
  stroke-dasharray: 5 6;
}

.pay-slip__stamp-line {
  stroke-width: 2.4;
}

.pay-cell--transfer:hover .pay-slip__stamp,
.pay-cell--transfer:focus-within .pay-slip__stamp {
  opacity: 0.9;
  transform: rotate(-14deg) scale(1);
  transition-delay: 400ms;
}

.pay-cell__label {
  font-family: var(--font-ui);
  font-size: var(--step-label);
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

/* The method marker in the corner of the transfer surface. It is the same
   rank as a label and deliberately not in the same place, so the head of that
   cell is one line of type instead of two. */
.pay-cell__mark {
  position: absolute;
  top: clamp(20px, 2.3vw, 38px);
  right: clamp(20px, 2.3vw, 38px);
  z-index: 1;
  font-family: var(--font-ui);
  font-size: var(--step-label);
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
}

.pay-cell__title {
  font-family: var(--font-word);
  font-size: var(--step-heading);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.02;
}

.pay-cell__note {
  max-width: 28em;
  font-size: var(--step-body);
  line-height: 1.62;
}

.pay-cell__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: auto;
  padding-top: 18px;
  border-top: 1px solid currentColor;
  font-family: var(--font-ui);
  font-size: 13px;
  letter-spacing: 0.015em;
}

.pay-cell__foot svg {
  flex: none;
  width: 26px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  transition: transform 320ms cubic-bezier(0.22, 1, 0.36, 1);
}

.pay-cell:hover .pay-cell__foot svg,
.pay-cell:focus-visible .pay-cell__foot svg {
  transform: translateX(7px);
}

/* The two processed page textures, kept from the previous build of this page.
   The colour underneath is a CSS layer rather than something the image
   supplies, so a 404 on a texture costs the grain and not the surface, and
   both are tiled at a fixed size rather than sized with `cover` - these cells
   are far larger than the tile and `cover` would smear it. */
.pay-cell--title,
.pay-cell--transfer {
  background-repeat: repeat;
  background-size: 384px 384px;
  background-image: url("../img/online/online-counter-paper-v2.jpg");
  background-image: image-set(
    url("../img/online/online-counter-paper-v2.webp") type("image/webp"),
    url("../img/online/online-counter-paper-v2.jpg") type("image/jpeg")
  );
}

.pay-cell--portal {
  background-repeat: repeat;
  background-size: 320px 320px;
  background-image: url("../img/online/online-counter-graphite-v2.jpg");
  background-image: image-set(
    url("../img/online/online-counter-graphite-v2.webp") type("image/webp"),
    url("../img/online/online-counter-graphite-v2.jpg") type("image/jpeg")
  );
}

/* ---------- Title cell ---------- */

/* The word sits at the foot of the surface with the invoice standing behind
   it, rather than centred on an empty ground. The lead sentence is gone -
   operator instruction, 2026-08-03 - and a centred word with nothing under it
   would have left the cell reading as unfinished. */
.pay-cell--title {
  justify-content: flex-end;
  background-color: var(--paper);
  border-right: 1px solid var(--line-strong);
  border-bottom: 1px solid var(--line-strong);
}

.pay-title {
  font-family: var(--font-word);
  font-size: var(--step-title);
  font-weight: 700;
  letter-spacing: -0.05em;
  /* The box reserves room for the Turkish diacritics and the descender rather
     than sitting tight on the current word. */
  line-height: 0.9;
}

/* ---------- Portal ---------- */

/* The darkest object on the board, which is how the board names the way in
   without ranking it in words. */
.pay-cell--portal {
  color: var(--paper-bright);
  background-color: var(--graphite);
  border-bottom: 1px solid var(--graphite);
  transition: background-color 300ms ease;
}

.pay-cell--portal:hover,
.pay-cell--portal:focus-visible {
  background-color: var(--graphite-deep);
}

.pay-cell--portal .pay-cell__label {
  color: var(--signal-orange-invert);
}

/* The address is the heading. It is set in Space Grotesk rather than in the
   display face because it is a machine string, not a phrase, and the
   interface face is where this site keeps its machine strings.

   It carries its own arrow instead of handing it to a foot rule: the cell has
   one thing to say and one place to go, and a rule across the bottom of it
   was separating those two facts for no reason. */
.pay-url {
  display: flex;
  align-items: center;
  gap: clamp(14px, 1.4vw, 24px);
  margin: 0;
  font-family: var(--font-ui);
  font-size: clamp(23px, 2.5vw, 40px);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.06;
  color: var(--paper-bright);
}

.pay-url svg {
  flex: none;
  width: clamp(26px, 2vw, 34px);
  height: auto;
  fill: none;
  stroke: var(--signal-orange-invert);
  stroke-width: 1.6;
  transition: transform 320ms cubic-bezier(0.22, 1, 0.36, 1);
}

.pay-cell--portal:hover .pay-url svg,
.pay-cell--portal:focus-visible .pay-url svg {
  transform: translateX(9px);
}

/* ---------- Telephone ---------- */

/* The brand field, used once on the page. The number is the cell. */
.pay-cell--call {
  color: var(--ink);
  background-color: var(--signal-orange);
  border-right: 1px solid rgba(39, 20, 14, 0.32);
  transition: background-color 300ms ease;
}

/* The brand field is the one cell with no processed texture behind it, so its
   grain is the site's own noise layer, held low enough to be material rather
   than pattern. */
.pay-cell--call::before {
  position: absolute;
  content: "";
  inset: 0;
  background-image: var(--grain);
  opacity: 0.085;
  pointer-events: none;
}

.pay-cell--call:hover,
.pay-cell--call:focus-visible {
  background-color: var(--orange-deep);
}

.pay-cell--call .pay-cell__label {
  color: rgba(39, 20, 14, 0.72);
}

.pay-number {
  margin-top: auto;
  font-family: var(--font-display);
  font-size: var(--step-figure);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.035em;
  line-height: 1;
  white-space: nowrap;
}

.pay-cell--call .pay-cell__foot {
  margin-top: 20px;
  border-top-color: rgba(39, 20, 14, 0.32);
}

/* ---------- Transfer ---------- */

.pay-cell--transfer {
  background-color: var(--paper-bright);
}

.pay-cell--transfer .pay-cell__label {
  color: var(--muted);
}

.pay-iban {
  margin-top: 2px;
}

/* Caption and control on one line, sitting on the same baseline. */
.pay-iban__head {
  display: flex;
  align-items: baseline;
  gap: 18px;
}

.pay-iban__label {
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--orange-ink);
}

.pay-iban__value {
  margin-top: 8px;
  font-family: var(--font-display);
  font-size: var(--step-value);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.005em;
  line-height: 1.16;
}

.pay-iban__copy {
  display: grid;
  width: 32px;
  height: 32px;
  padding: 0;
  place-items: center;
  font-family: var(--font-ui);
  color: var(--ink);
  background: transparent;
  border: 1px solid var(--line-strong);
  cursor: pointer;
  transition:
    background 200ms ease,
    border-color 200ms ease,
    color 200ms ease;
}

.pay-iban__copy svg {
  display: block;
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: square;
  stroke-linejoin: miter;
  stroke-width: 1.5;
}

.pay-iban__copy:hover,
.pay-iban__copy:focus-visible {
  color: var(--paper-bright);
  background: var(--ink);
  border-color: var(--ink);
}

.pay-iban__copy[data-copied] {
  color: var(--paper-bright);
  background: var(--orange-ink);
  border-color: var(--orange-ink);
}

.pay-iban__copy:focus-visible {
  outline: 2px solid var(--orange-ink);
  outline-offset: 3px;
}

.pay-iban__status {
  margin-top: 6px;
  min-height: 1.1em;
  font-family: var(--font-ui);
  font-size: 11px;
  color: var(--muted);
}

/* Capped, so the slip in the corner behind it never has to cross a word.
   The figure gives up the room, but only after the type has taken what it
   needs. */
.pay-account {
  max-width: 64%;
  margin: auto 0 0;
  padding-top: 6px;
}

.pay-account > div {
  display: grid;
  grid-template-columns: minmax(88px, 0.3fr) minmax(0, 1fr);
  gap: 12px;
  padding: 6px 0;
  border-top: 1px solid var(--line);
}

.pay-account dt {
  padding-top: 3px;
  font-family: var(--font-ui);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

.pay-account dd {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.4;
}

/* ---------- Banks, inside the transfer surface ---------- */

/* The four banks close the transfer surface rather than the board. Paying from
   your own bank's internet branch is the same act as the transfer set out
   above them - money leaving your account for CloudCell's - so this is where
   they belong, and it is also the one place on the board a reader arrives at
   without being asked to scroll to it.

   They are on paper here rather than on graphite, which the marks have to
   answer to: the symbols are CSS masks, so the page owns their colour and they
   simply invert. */
.pay-banks {
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid var(--line-strong);
}

/* The caption and its sentence share a line rather than stacking. Two ranks
   of small type one above the other cost this cell about twenty-five pixels
   it does not have, and they read as one thing anyway. */
.pay-banks__head {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px 16px;
}

.pay-banks__title {
  margin: 0;
  font-family: var(--font-ui);
  font-size: var(--step-label);
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
}

.pay-banks__note {
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--muted);
}

/* Four tiles across, on the same budget mechanic as the board one scale down:
   the tracks always sum to four, so the row is the same width in every state
   and the three banks nobody is pointing at keep their place. */
.pay-banks__list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
  border-left: 1px solid var(--line);
  transition: grid-template-columns var(--pay-shift) var(--pay-ease);
}

/* Behind the same width query as the four-across row itself. On a phone the
   list is two by two, and a `:has()` rule naming four tracks outscores the
   plain rule that reshaped it - so a focused bank would have rebuilt four
   columns underneath a two-by-two grid. */
@media (min-width: 901px) {
  .pay-banks__list:has(li:nth-child(1) a:focus-visible) {
    grid-template-columns: 1.3fr 0.9fr 0.9fr 0.9fr;
  }

  .pay-banks__list:has(li:nth-child(2) a:focus-visible) {
    grid-template-columns: 0.9fr 1.3fr 0.9fr 0.9fr;
  }

  .pay-banks__list:has(li:nth-child(3) a:focus-visible) {
    grid-template-columns: 0.9fr 0.9fr 1.3fr 0.9fr;
  }

  .pay-banks__list:has(li:nth-child(4) a:focus-visible) {
    grid-template-columns: 0.9fr 0.9fr 0.9fr 1.3fr;
  }
}

@media (min-width: 901px) and (hover: hover) and (pointer: fine) {
  .pay-banks__list:has(li:nth-child(1) a:hover) {
    grid-template-columns: 1.3fr 0.9fr 0.9fr 0.9fr;
  }

  .pay-banks__list:has(li:nth-child(2) a:hover) {
    grid-template-columns: 0.9fr 1.3fr 0.9fr 0.9fr;
  }

  .pay-banks__list:has(li:nth-child(3) a:hover) {
    grid-template-columns: 0.9fr 0.9fr 1.3fr 0.9fr;
  }

  .pay-banks__list:has(li:nth-child(4) a:hover) {
    grid-template-columns: 0.9fr 0.9fr 0.9fr 1.3fr;
  }
}

.pay-banks__list li {
  display: grid;
  min-width: 0;
}

.pay-banks__list a {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 11px 8px 10px;
  text-align: center;
  text-decoration: none;
  border-right: 1px solid var(--line);
  transition: background 240ms ease;
}

.pay-banks__list a:hover,
.pay-banks__list a:focus-visible {
  background: rgba(39, 20, 14, 0.05);
}

.pay-bank__name {
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.02em;
  line-height: 1.2;
  color: var(--muted);
  transition: color 240ms ease;
}

.pay-banks__list a:hover .pay-bank__name,
.pay-banks__list a:focus-visible .pay-bank__name {
  color: var(--ink);
}

/* The mark is scaled rather than resized, because a size change on a grid item
   pushes the track it sits in and the row starts to breathe. A transform costs
   no layout at all. */
.pay-mark {
  transition: transform var(--pay-shift) var(--pay-ease);
}

.pay-banks__list a:hover .pay-mark,
.pay-banks__list a:focus-visible .pay-mark {
  transform: scale(1.08);
}

/* The bank symbols are CSS masks rather than images, so this page owns their
   colour: paper at rest, the accent wiping up from the foot on approach. */
.pay-mark {
  --bank-mask: none;
  position: relative;
  display: block;
  width: clamp(30px, 2.3vw, 36px);
  height: clamp(30px, 2.3vw, 36px);
}

.pay-mark::before,
.pay-mark::after {
  position: absolute;
  content: "";
  inset: 0;
  background: var(--ink);
  -webkit-mask-image: var(--bank-mask);
  mask-image: var(--bank-mask);
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
}

.pay-mark::after {
  background: var(--orange-ink);
  clip-path: inset(100% 0 0 0);
  transition: clip-path 480ms cubic-bezier(0.22, 1, 0.36, 1);
}

.pay-banks__list a:hover .pay-mark::after,
.pay-banks__list a:focus-visible .pay-mark::after {
  clip-path: inset(0 0 0 0);
}

.pay-mark--isbank {
  --bank-mask: url("../brand/banks/isbank-symbol.svg");
}

.pay-mark--ziraat {
  --bank-mask: url("../brand/banks/ziraat-symbol.svg");
}

.pay-mark--qnb {
  --bank-mask: url("../brand/banks/qnb-symbol.svg");
}

.pay-mark--vakifbank {
  --bank-mask: url("../brand/banks/vakifbank-symbol.svg");
}

/* ---------- Compact ---------- */

@media (max-width: 900px) {
  /* One column, and the rows stop being equal. Five cells of the tallest
     cell's height leaves the short ones two thirds empty on a phone.

     The board mechanic is not carried down here at all. It is a proportion
     change between two tracks, and a column has no second track to take the
     room from. */
  .pay-board {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
    grid-auto-rows: auto;
    min-height: 0;
  }

  .pay-cell {
    min-height: 0;
    border-right: 0;
  }

  /* The masthead keeps a height of its own here. Left to its content it came
     out about a hundred pixels tall, which turned the page's opening surface
     into a band and left the invoice behind it as a sliver. */
  .pay-cell--title {
    min-height: clamp(300px, 42vh, 400px);
    padding-top: calc(var(--header-height) + clamp(28px, 7vw, 48px));
    border-right: 0;
    border-bottom: 1px solid var(--line-strong);
  }

  /* The account list has the whole column to itself on one column, so the cap
     that keeps it clear of the slip on a wide screen comes off. It was
     breaking `A.S.` onto a line of its own. */
  .pay-account {
    max-width: none;
  }

  /* `HESAP SAHIBI` is two words and needs the room for them. */
  .pay-account > div {
    grid-template-columns: minmax(98px, 0.34fr) minmax(0, 1fr);
  }

  .pay-cell--portal {
    padding-top: clamp(22px, 2.6vw, 44px);
  }

  .pay-cell--call {
    border-right: 0;
  }

  /* Both figures stay on a phone, and both give up the room instead of the
     type: they sit smaller, further into the corner and quieter, and the cell
     reserves a strip of padding under its last line so the two never meet. */
  .pay-cell--portal,
  .pay-cell--call,
  .pay-cell--transfer {
    padding-bottom: clamp(120px, 34vw, 190px);
  }

  .pay-figure--counter {
    right: 3%;
    bottom: -5%;
    width: clamp(165px, 54%, 240px);
  }

  .pay-figure--card {
    top: auto;
    right: -18%;
    bottom: -16%;
    width: clamp(210px, 74%, 340px);
  }

  .pay-figure--slip {
    right: -30px;
    bottom: -58px;
    width: clamp(190px, 62%, 300px);
  }

  .pay-figure--invoice {
    top: auto;
    bottom: clamp(-60px, -8vw, -20px);
    right: clamp(-26px, -3vw, -8px);
    width: clamp(150px, 44%, 220px);
  }

  /* Two by two on a phone. Four across leaves each tile about 85px wide,
     which is under the size a finger can be asked to hit and too narrow for
     the longest of the four names. */
  .pay-banks__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border-top: 1px solid var(--line);
  }

  .pay-banks__list a {
    min-height: 118px;
    border-bottom: 1px solid var(--line);
  }
}

/* Reduced motion takes the whole mechanic off rather than shortening it. A
   620ms proportion change compressed to a millisecond is not a calmer board,
   it is the same 86px of layout arriving as a jump - so the tracks stay where
   they are and the figures keep their rest state. Every value the two figures
   carry is a decoration of information that is already set in type beside
   them, so nothing is withheld by holding them still. */
@media (prefers-reduced-motion: reduce) {
  .pay-cell,
  .pay-cell__foot svg,
  .pay-mark,
  .pay-mark::after,
  .pay-banks__list a,
  .pay-iban__copy,
  .pay-figure *,
  .pay-board,
  .pay-banks__list {
    transition-duration: 1ms;
    transition-delay: 0ms;
  }

  /* The two cards stop sliding apart and the stamp stops landing. The stamp
     keeps its rotation, because that is how the object is drawn rather than
     something the approach does to it. */
  .pay-cell--call:hover .pay-card__front,
  .pay-cell--call:focus-visible .pay-card__front,
  .pay-cell--call:hover .pay-card__back,
  .pay-cell--call:focus-visible .pay-card__back {
    transform: none;
  }

  .pay-slip__stamp,
  .pay-cell--transfer:hover .pay-slip__stamp,
  .pay-cell--transfer:focus-within .pay-slip__stamp {
    transform: rotate(-14deg);
  }

  .pay-banks__list a:hover .pay-mark,
  .pay-banks__list a:focus-visible .pay-mark {
    transform: none;
  }
}

/* The compact two-by-two needs its own reset for the same reason. */
@media (prefers-reduced-motion: reduce) and (max-width: 900px) {
  .pay-banks__list:has(li:nth-child(1) a:hover),
  .pay-banks__list:has(li:nth-child(2) a:hover),
  .pay-banks__list:has(li:nth-child(3) a:hover),
  .pay-banks__list:has(li:nth-child(4) a:hover),
  .pay-banks__list:has(li:nth-child(1) a:focus-visible),
  .pay-banks__list:has(li:nth-child(2) a:focus-visible),
  .pay-banks__list:has(li:nth-child(3) a:focus-visible),
  .pay-banks__list:has(li:nth-child(4) a:focus-visible) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Held apart from the block above because the compact board is one column: a
   `:has()` rule that put two tracks back would outscore the single-column rule
   and rebuild the desktop board on a phone. */
@media (prefers-reduced-motion: reduce) and (min-width: 901px) {
  .pay-board:has(.pay-cell--title:hover),
  .pay-board:has(.pay-cell--portal:hover),
  .pay-board:has(.pay-cell--call:hover),
  .pay-board:has(.pay-cell--transfer:hover),
  .pay-board:has(.pay-cell--title:focus-visible),
  .pay-board:has(.pay-cell--portal:focus-visible),
  .pay-board:has(.pay-cell--call:focus-visible),
  .pay-board:has(.pay-cell--transfer:focus-visible) {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 0.68fr 1.32fr;
  }

  /* Selector for selector with the rules above, because those name an
     `:nth-child` and a plain `:has(a:focus-visible)` loses to them - which is
     how the bank row went on shifting with reduced motion asked for. */
  .pay-banks__list:has(li:nth-child(1) a:hover),
  .pay-banks__list:has(li:nth-child(2) a:hover),
  .pay-banks__list:has(li:nth-child(3) a:hover),
  .pay-banks__list:has(li:nth-child(4) a:hover),
  .pay-banks__list:has(li:nth-child(1) a:focus-visible),
  .pay-banks__list:has(li:nth-child(2) a:focus-visible),
  .pay-banks__list:has(li:nth-child(3) a:focus-visible),
  .pay-banks__list:has(li:nth-child(4) a:focus-visible) {
    grid-template-columns: repeat(4, 1fr);
  }
}