/* ============================================================================
   Likidera — Security and deployment page layer
   Consumes tokens/base/components. Two new components live here and nowhere
   else: .deploy-plans (the centrepiece) and .role-stair.
   Everything else on the page is shared: .card, .pair-rows, .steps, .callout,
   .spec-list, .note, .consequence, .section--tint.
   ============================================================================ */

/* The shared 18ch measure set this title in three lines with "şirketinizin"
   alone in the middle (2026-10-22 copy). 24ch makes it two from 768 up; the
   other heads keep 18ch. This sheet loads only on the security pages. */
.page-head__title { max-width: 24ch; }

/* ═══════════════ #on-premise — three plans inside three boundaries ═══════════
   The homepage teaser is one scene making one claim (nothing leaves); this is
   three alternative arrangements, so the cloud never appears. The container is
   the boundary itself: no window chrome, no hatch, no frame budget. Repeating
   the same dotted rectangle across all three is the argument — whichever shape
   you pick, the line is in the same place. */
.deploy-plans {
  display: grid;
  gap: var(--space-6);
  margin-top: var(--space-6);
}
.plan { min-width: 0; }
.plan__frame {
  position: relative;
  padding: var(--space-6) var(--space-5) var(--space-5);
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-lg);
}
/* The label sits on the rule it names. */
.plan__boundary {
  position: absolute;
  top: 0;
  left: var(--space-5);
  transform: translateY(-50%);
  padding-inline: 0.5em;
  background: var(--bg);
  font-size: var(--text-micro);
  font-weight: var(--weight-medium);
  color: var(--text-faint);
}
.plan__art { display: block; width: 100%; height: auto; }
.plan__name {
  margin-top: var(--space-4);
  font-size: var(--text-label);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--text);
}
.plan__gloss {
  margin-top: var(--space-2);
  font-size: var(--text-sm);
  color: var(--text-muted);
}
/* 640-999: the plans keep their proportions instead of stretching to a full
   container width they were not drawn for. */
@media (min-width: 640px) and (max-width: 999px) {
  .deploy-plans { max-width: 66%; }
}
@media (min-width: 1000px) {
  .deploy-plans {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: start;
  }
}


/* ═══════════════ #roles — the cumulative stair ═══════════════
   Not a tick matrix: one variable (reach) drawn as one continuous quantity, so
   the block reads as a scale rather than a table. The right edge of each bar is
   the only teal in the section, which makes the staircase the thing the eye
   follows. Widths step 1/6 … 6/6 and are set by position, because an inline
   style is not allowed and the order is the meaning. */
.role-stair { margin-top: var(--space-6); }
.role {
  display: grid;
  gap: var(--space-2);
  padding-block: var(--space-4);
}
.role + .role { border-top: 1px solid var(--rule); }
.role__name {
  font-size: var(--text-label);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--text);
}
.role__adds { font-size: var(--text-sm); color: var(--text-muted); }

/* Below 640 a six-step bar is illegible, so it is gone and the "+" phrasing
   carries the accumulation on its own. */
.role__track { display: none; }
@media (min-width: 640px) {
  .role__track {
    display: block;
    position: relative;
    height: 10px;
    border-radius: 2px;
    background: var(--surface-2);
  }
  .role__fill {
    position: absolute;
    inset: 0 auto 0 0;
    border-radius: 2px 0 0 2px;
    background: color-mix(in srgb, var(--brand) 18%, transparent);
    border-right: 2px solid var(--brand);
  }
  .role-stair > li:nth-child(1) .role__fill { width: 16.667%; }
  .role-stair > li:nth-child(2) .role__fill { width: 33.333%; }
  .role-stair > li:nth-child(3) .role__fill { width: 50%; }
  .role-stair > li:nth-child(4) .role__fill { width: 66.667%; }
  .role-stair > li:nth-child(5) .role__fill { width: 83.333%; }
  .role-stair > li:nth-child(6) .role__fill { width: 100%; }
  .role-stair > li:nth-child(6) .role__fill { border-radius: 2px; }
}
/* Widened: the six phrases measure 227/258/502/351/203/256px on one line, so
   320px wrapped two of them and made rows 3 and 4 taller for no visible reason
   while ~700px of track sat spare. At a 1216px container the track is
   1216 - 148 - 520 - 48 = 500px, stepping 83/167/250/333/417/500 — an 83px
   increment. At 1000 the track is 356px and the increment 59px, still well
   above where a step stops reading.
   2026-10-22: the role lines became full sentences (TR one-line widths
   309/414/546/675/301/615px), so from 1280 the text column is 680px and the
   track 1216 - 148 - 680 - 48 = 340px, an increment of 57px. EN Owner
   (733px) is the one line that still wraps there. */
@media (min-width: 1000px) and (max-width: 1279px) {
  .role {
    grid-template-columns: minmax(0, 148px) minmax(0, 1fr) 400px;
    column-gap: var(--space-5);
    align-items: center;
  }
}
@media (min-width: 1280px) {
  .role {
    grid-template-columns: minmax(0, 148px) minmax(0, 1fr) 680px;
    column-gap: var(--space-5);
    align-items: center;
  }
}
.roles__note { margin-top: var(--space-5); }


/* ═══════════════ #payment-approval ═══════════════ */
/* The right column belongs to the bank, not to us. The shared wash marks the
   Likidera side on Why Likidera; here it would paint the one column that is
   deliberately outside the product, so it is neutral and the payload row
   carries the eye instead. */
#payment-approval .pair-rows__with { background: none; }
.pair-rows__blank { color: var(--text-faint); }
.approval__note { margin-top: var(--space-6); }
.approval__link { margin-top: var(--space-5); }


/* ═══════════════ #measures — the shared card grid ═══════════════ */
.measure-grid { display: grid; gap: var(--space-4); margin-top: var(--space-6); }
.measure {
  display: grid;
  grid-template-rows: auto auto 1fr;
  gap: var(--space-3);
  height: 100%;
  padding: var(--space-5);
}
.measure__icon { color: var(--text-muted); }
.measure h3 {
  font-size: var(--text-lead);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-heading);
}
.measure p { font-size: var(--text-sm); line-height: 1.55; color: var(--text-muted); }
@media (min-width: 640px) {
  .measure-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .measure-grid > :last-child { grid-column: 1 / -1; }
}
@media (min-width: 1000px) {
  .measure-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .measure-grid > :last-child { grid-column: auto; }
}


/* .spec-list and its --loose modifier moved to components.css when the Product
   page became their second consumer. */
.compliance__privacy { margin-top: var(--space-5); }


/* ═══════════════ #compliance — the activity grouping ═══════════════
   The section was 767px of unrelieved text between two sections that each have
   a device. This makes the classification claim concrete instead of asserted:
   inflows above the line, outflows below, operating carrying the most lines.
   Three small charts rather than one wide SVG, so the labels stay real text and
   the block stacks to one column below 640 without shrinking to nothing. */
.activity { margin-top: var(--space-6); }
.activity__groups { display: grid; gap: var(--space-5); }
.activity__group { display: grid; gap: var(--space-2); justify-items: start; }
.activity__glyph { width: 100%; max-width: 168px; height: auto; }
.activity__axis { stroke: var(--border-strong); stroke-width: 1; }
.activity__in { fill: color-mix(in srgb, var(--brand) 55%, transparent); }
.activity__out { fill: color-mix(in srgb, var(--text-faint) 45%, transparent); }
.activity__label {
  font-size: var(--text-label);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--text-faint);
}
.activity__key {
  margin-top: var(--space-3);
  font-size: var(--text-label);
  font-weight: var(--weight-medium);
  color: var(--text-faint);
}
/* Full container width: at 570px of 1216 the block left a ~650px void, and one
   axis running the whole width is also the stronger reading. */
@media (min-width: 640px) {
  .activity__groups {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: var(--space-6);
  }
  .activity__glyph { max-width: none; }
}

/* The drawing and the standards list against the one KVKK tool that has a
   screen: a 7/5 split from 1000, the same local ratio Forecasting's #accuracy
   uses for a frame beside a longer column. The 840x640 capture is a portrait
   form, so it takes the narrower column (486px at 1440, 398px tall) and the
   drawing keeps the wider one, where its three glyphs still run 200px each.
   The list is the longer side by a paragraph; the frame is sticky for it. */
.compliance__layout { display: grid; gap: var(--space-6); margin-top: var(--space-6); }
.compliance__body { min-width: 0; }
.compliance__body .activity { margin-top: 0; }
/* The plain-language topic over each standard's text (2026-10-22): the code
   stays the term a finance reader scans for, the topic says what it is about. */
.compliance__topic {
  display: block;
  margin-bottom: var(--space-1);
  color: var(--text);
  font-weight: var(--weight-semibold);
}
/* The only portrait capture on the site, and the shared height budget bound on
   it at every width from 365 to 999: 840x640 needs 0.762 x the frame width, so
   at the 560px cap below 1000 it wants 455px against the budget's 280–532, and
   object-fit: contain pillarboxed it on the app's own ground. 500 clears the
   widest case it can ever render at (560 x 0.762 + 28 = 455) and still guards
   the frame against unbounded height. */
.compliance__exhibit { min-width: 0; --shot-real-h: 500px; }
@media (max-width: 999px) {
  .compliance__exhibit { width: 100%; max-width: 560px; margin-inline: auto; }
}
@media (min-width: 1000px) {
  .compliance__layout {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    column-gap: var(--space-7);
    align-items: start;
  }
  .compliance__exhibit {
    position: sticky;
    top: calc(var(--header-h) + var(--space-5));
  }
}


/* ═══════════════ #getting-started ═══════════════ */
.setup__note { margin-top: var(--space-6); }
.setup__steps { margin-top: var(--space-6); }
/* The Bank Accounts capture is 955px wide at native size: capped there and
   centred, so it is never scaled up to the 1216px container. */
.setup__exhibit { max-width: 955px; margin: var(--space-6) auto 0; }
.setup__exhibit + .consequence { margin-top: var(--space-6); }


/* ═══════════════ #for-it — a block inside #on-premise ═══════════════
   The anchor, a plain hairline divider, a two-row datasheet (Requirements,
   Backup) and the handover note, where the administrator is already looking.
   The dotted motif appears once, as the boundary of your network. No scroll
   margin of its own: html.has-page-index sets the scrollport's padding to
   clear the header and the index bar, and zeroes every [id]'s margin so the
   two do not add (components.css, PAGE INDEX). */
.forit {
  margin-top: var(--space-6);
  padding-top: var(--space-6);
  border-top: 1px solid var(--rule);
}
/* The block's own padding is the step above the list; under it the last row's
   own padding carries half of the note's step. */
.forit__spec { margin-top: 0; }
.forit__spec + .forit__handover { margin-top: var(--space-3); }
.forit__handover .link-arrow { margin-left: var(--space-3); }


/* ═══════════════ #payment-approval — the photograph ═══════════════
   A section slot, not a teaser: smaller by intent, height capped, width
   follows. Above the prose it would become a banner, which is the fault the
   site already learned. The subject is two people over one document, which is
   what a second signature is. */
.approval__photo { margin: 0; }
/* The frame is a grid item (figure.photo doubles as .record__exhibit, which is
   display: grid) and auto inline margins on a grid item cancel justify-self:
   stretch — an aspect-ratio box with no intrinsic width then shrink-wraps to
   nothing, which shipped as 3x2 below 1000. width fills the column and the
   300px cap letterboxes, which is the shape .teaser__media's cap produces.
   Centre a grid item with justify-self, never with auto margins. */
.approval__photo .photo__frame {
  --frame-ratio: 3 / 2;
  max-height: 300px;
  width: 100%;
}
@media (min-width: 1000px) {
  .approval__photo .photo__frame {
    height: clamp(220px, 22vw, 320px);
    aspect-ratio: auto;
    max-height: min(52vh, 420px);
  }
}
/* The record's prose column carries the block unchanged: its children keep
   their own vertical rhythm, so the column gap is zero and only the first
   child's top margin goes. */
#payment-approval .record__prose { gap: 0; }
#payment-approval .record__prose > :first-child { margin-top: 0; }