/* İYS Entegrasyonu composition. Buttons, cards, the accordion, frames and bands
   are the system's (css/system-*.css); this file only places them and draws the
   page's own line art, with the tokens. The hero figure is css/hairline-*.css. */

.iys-page main { display: block; overflow: clip; }
/* Resets carry no weight, so every rule below wins over them. */
:where(.iys-page main) :where(h1, h2, h3, p, figure, ul, ol, dl, dd) { margin: 0; }
:where(.iys-page main) :where(ul, ol) { list-style: none; }
:where(.iys-page main) :where(ul, ol):not(.card) { padding: 0; }
.iys-page main > .frame { margin-top: var(--space-64); padding-top: var(--space-32); }
.iys-page main > .frame > h2,
.iys-how-head h2,
.iys-packages-head h2,
.iys-fit-head h2 { font-size: var(--text-h2); font-weight: var(--weight-heading); line-height: var(--lh-h2); letter-spacing: var(--tracking-h2); }
.iys-page main > .frame > h2 { margin-bottom: var(--space-32); padding-inline: var(--frame-inset); }
.iys-page main code { font-family: var(--font-mono); font-weight: var(--weight-label); }

/* Line art: a calm ink line on white plates, one lit orange part (DESIGN.md B3). */
.iys-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.iys-key-a { stop-color: color-mix(in srgb, var(--brand) 64%, var(--surface-raised)); }
.iys-key-b { stop-color: var(--brand); }
.iys-key-c { stop-color: var(--brand-action); }
.iys-art { display: block; flex: 0 0 auto; overflow: visible; fill: none; stroke: var(--ink); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.iys-art * { vector-effect: non-scaling-stroke; }
.iys-art .p { fill: var(--surface-raised); }
.iys-art .d { stroke-width: 1; }
.iys-art .f { stroke: var(--ink-faint); stroke-width: 1; }
.iys-art .dot { stroke-width: 2.25; }
.iys-art .fd { stroke: var(--ink-faint); stroke-width: 2.25; }
.iys-art .h { stroke-width: 4; }
.iys-art .k { fill: url(#iys-key); filter: drop-shadow(0 0 3px rgb(var(--brand-rgb) / 32%)); }
.iys-art .ks { stroke: var(--brand); filter: drop-shadow(0 0 3px rgb(var(--brand-rgb) / 32%)); }

/* Hero */
.iys-page main > .product-hero { margin-top: 0; padding-top: var(--space-16); }
.product-breadcrumbs { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-16); padding-inline: var(--frame-inset); color: var(--ink-muted); font-size: var(--text-sm); }
.product-breadcrumbs a { display: inline-flex; align-items: center; min-height: var(--control-sm); color: inherit; text-decoration: none; }
.product-breadcrumbs a:is(:hover, :focus-visible) { color: var(--ink); text-decoration: underline; text-underline-offset: 4px; }
.product-breadcrumbs > [aria-current] { color: var(--ink); }
.product-hero-grid { display: grid; grid-template-columns: minmax(0, 52%) minmax(0, 48%); align-items: center; min-height: var(--hero-height); }
.product-hero-copy { min-width: 0; padding: var(--space-32) var(--space-24) var(--space-48) var(--frame-inset); }
.product-hero-copy h1 { margin-bottom: var(--space-24); font-size: var(--text-display); font-weight: var(--weight-heading); line-height: var(--lh-pbx-display); letter-spacing: var(--tracking-display); }
.product-hero-copy > .iys-lead { max-width: 44ch; color: var(--ink-muted); font-size: var(--text-lead); line-height: var(--lh-lead); text-wrap: pretty; }
.product-hero-copy > .iys-authority { display: flex; align-items: flex-start; gap: var(--space-12); max-width: 44ch; margin-top: var(--space-24); padding-top: var(--space-16); border-top: var(--rule-width) solid var(--surface-divider); color: var(--ink); font-weight: var(--weight-strong); line-height: var(--lh-body); }
.iys-authority-icon { flex: 0 0 auto; width: 20px; height: 20px; margin-top: 2px; color: var(--brand); }
.product-hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-16) var(--space-32); margin-top: var(--space-32); }
.iys-hero-figure { display: grid; min-width: 0; margin: 0 calc(-1 * var(--gutter)) 0 calc(-1 * var(--space-32)); }
.iys-hero-figure .hairline-figure { width: 100%; }
/* The figure is a toggle (iys-hero.mjs): a press, Enter or Space turns every box to onay, the next to ret.
   The host crops its stage, so the keyboard focus ring is drawn on the host, inside its edge. */
.iys-hero-figure [data-hairline] { cursor: pointer; }
.iys-page .iys-hero-figure [data-hairline]:focus-visible { outline: none; }
.iys-hero-figure .hairline-figure:has(> [data-hairline]:focus-visible) { outline: var(--focus-width) solid var(--ring); outline-offset: calc(-1 * var(--focus-width)); }

.product-section-nav { display: flex; align-items: center; gap: var(--space-32); overflow-x: auto; padding-block: var(--space-16); scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track); }

/* İYS nedir? */
.iys-definition-inner { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); align-items: start; gap: var(--space-48); }
.iys-definition-head { display: grid; align-content: start; gap: var(--space-32); }
.iys-channels { display: grid; gap: var(--space-16); }
.iys-channels > p { font-size: var(--text-sm); }
.iys-channels ul { display: flex; flex-wrap: wrap; gap: var(--space-16) var(--space-32); }
.iys-channels li { display: grid; justify-items: start; gap: var(--space-4); }
.iys-channels .iys-art { width: 28px; height: 28px; margin-bottom: var(--space-8); }
.iys-channels code { color: var(--ink); font-size: var(--text-spec); }
.iys-channels li > span { color: var(--ink-muted); font-size: var(--text-sm); }
.iys-prose { display: grid; justify-items: start; gap: var(--space-20); max-width: var(--reading-measure); }
.iys-prose p { font-size: var(--text-pbx-prose); }
.iys-prose-lead { color: var(--ink); }

/* Temel özellikler: one band on the frame, each cell with its own small object. */
.iys-feature-band { --band-columns: 4; }
.iys-feature-band > li { display: grid; align-content: start; gap: var(--space-8); }
.iys-feature-band > li:nth-child(4n + 1) { border-inline-start: 0; }
.iys-feature-band > li:nth-child(n + 5) { border-top: var(--rule-width) solid var(--surface-divider); }
.iys-icon { width: 40px; height: 40px; margin-bottom: var(--space-12); stroke-width: 1.75; }
.iys-feature-band h3 { font-size: var(--text-body); font-weight: var(--weight-strong); line-height: var(--lh-h3); text-wrap: balance; }
.iys-feature-band p { color: var(--ink-muted); font-size: var(--text-sm); line-height: var(--lh-body); text-wrap: pretty; }

/* Nasıl çalışır? The route: five stops on one line, the İYS check lit. */
.iys-how { --stop-art: 112px; --stop-dot: calc(var(--stop-art) + var(--space-24)); }
.iys-how-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: var(--space-16) var(--space-48); padding-inline: var(--frame-inset); }
.iys-how-head p { grid-column: 1; max-width: 62ch; color: var(--ink-muted); font-size: var(--text-lead); line-height: var(--lh-lead); }
.iys-how-head .btn { grid-column: 2; grid-row: 1 / span 2; }
.iys-route { position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); margin-top: var(--space-48); }
.iys-stop { position: relative; display: flex; flex-direction: column; align-items: center; padding-inline: var(--space-12); text-align: center; }
.iys-stop-art { width: calc(var(--stop-art) * 1.25); height: var(--stop-art); }
.iys-stop h3 { margin-top: calc(var(--space-24) * 2); font-size: var(--text-body); font-weight: var(--weight-strong); line-height: var(--lh-h3); text-wrap: balance; }
.iys-stop p { max-width: 24ch; margin-top: var(--space-4); color: var(--ink-muted); font-size: var(--text-sm); line-height: var(--lh-body); text-wrap: pretty; }
.iys-stop p code { color: var(--ink); font-size: var(--text-spec); }
/* The dot on the line, and the line to the next stop. */
.iys-stop::before { content: ""; position: absolute; z-index: 1; top: calc(var(--stop-dot) - 4.5px); left: calc(50% - 4.5px); width: 9px; height: 9px; border-radius: var(--radius-full); background: var(--surface-canvas); box-shadow: inset 0 0 0 1.5px var(--ink); }
.iys-stop:not(:last-child)::after { content: ""; position: absolute; top: var(--stop-dot); left: 50%; width: 100%; height: var(--rule-width); background: var(--ink); }
.iys-stop:nth-child(3)::before,
.iys-stop:nth-child(4)::before { background: var(--brand); box-shadow: 0 0 0 4px rgb(var(--brand-rgb) / 14%), 0 0 10px rgb(var(--brand-rgb) / 32%); }
.iys-stop:nth-child(3)::after { height: var(--focus-width); margin-top: calc(var(--rule-width) * -0.5); background: linear-gradient(90deg, var(--brand), color-mix(in srgb, var(--brand) 64%, var(--surface-raised)), var(--brand)); box-shadow: 0 0 10px rgb(var(--brand-rgb) / 32%); }
/* The way back: a refusal given in İYS returns to the first stop. */
.iys-return { position: relative; margin: var(--space-24) 50% 0 10%; }
.iys-return-path { display: block; position: relative; height: var(--space-32); border: var(--rule-width) dashed var(--ink-faint); border-top: 0; }
.iys-return-path::before { content: ""; position: absolute; top: calc(-1 * var(--rule-width)); left: calc(-1 * var(--space-4) - var(--rule-width)); width: 9px; height: 9px; border-top: var(--focus-width) solid var(--ink); border-left: var(--focus-width) solid var(--ink); transform: translateY(1px) rotate(45deg); }
.iys-return p { max-width: 48ch; margin: var(--space-16) auto 0; color: var(--ink-muted); font-size: var(--text-sm); line-height: var(--lh-body); text-align: center; }
.iys-return-icon { display: none; }
/* First the bulk import, then regular sync: a short time axis. */
.iys-phases { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); column-gap: var(--space-32); margin-top: var(--space-64); padding-inline: var(--frame-inset); }
.iys-axis { position: relative; grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; align-items: center; height: var(--space-16); margin-bottom: var(--space-20); }
.iys-axis-bulk { height: 6px; border-radius: var(--radius-full); background: linear-gradient(90deg, color-mix(in srgb, var(--brand) 64%, var(--surface-raised)), var(--brand) 55%, var(--brand-action)); box-shadow: 0 0 12px rgb(var(--brand-rgb) / 28%); }
.iys-axis-sync { width: calc(100% + var(--space-32)); height: var(--space-16); margin-left: calc(-1 * var(--space-32)); }
.iys-axis::after { content: ""; position: absolute; top: calc(50% - 4.5px); right: -1px; width: 9px; height: 9px; border-top: var(--rule-width) solid var(--ink); border-right: var(--rule-width) solid var(--ink); transform: rotate(45deg); }
.iys-phase h3 { font-size: var(--text-body); font-weight: var(--weight-strong); line-height: var(--lh-h3); }
.iys-phase p { max-width: 46ch; margin-top: var(--space-4); color: var(--ink-muted); font-size: var(--text-sm); line-height: var(--lh-body); }

/* Paketler: a recessed band, six selection cards, the terms. */
.iys-packages-band { padding: var(--space-32) var(--frame-inset) var(--space-48); background: var(--surface-inset); }
.iys-packages-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: var(--space-16) var(--space-48); }
.iys-packages-head p { max-width: 60ch; margin-top: var(--space-8); color: var(--ink-muted); font-size: var(--text-lead); line-height: var(--lh-lead); }
.iys-package-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-24); margin-top: var(--space-32); }
.iys-package { display: grid; grid-template-columns: auto auto; grid-template-areas: "measure code" "take take"; justify-content: space-between; align-items: baseline; gap: var(--space-16); }
.iys-package h3 { grid-area: code; justify-self: end; color: var(--ink-muted); font-family: var(--font-mono); font-size: var(--text-spec); font-weight: var(--weight-label); line-height: var(--lh-label); letter-spacing: normal; text-align: end; }
.iys-package .card-measure { grid-area: measure; display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-4) var(--space-8); }
.iys-package .card-measure > span { color: var(--ink-muted); letter-spacing: var(--tracking-label); }
.iys-package-take { grid-area: take; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-12) var(--space-16); padding-top: var(--space-16); border-top: var(--rule-width) solid var(--surface-divider); }
.iys-terms { --band-columns: 4; margin-top: var(--space-32); }
.iys-terms dt { font-size: var(--text-sm); font-weight: var(--weight-strong); }
.iys-terms dd { margin-top: var(--space-4); color: var(--ink-muted); font-size: var(--text-sm); line-height: var(--lh-body); }

/* Kimler için uygundur? */
.iys-fit { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; gap: var(--space-24) var(--space-48); }
.iys-fit-head { display: grid; justify-items: start; gap: var(--space-16); padding-left: var(--frame-inset); }
.iys-fit-head .btn { margin-top: var(--space-16); }
.iys-fit-head p { max-width: 36ch; color: var(--ink-muted); font-size: var(--text-lead); line-height: var(--lh-lead); }
.iys-fit-list > li { font-size: var(--text-lead); line-height: var(--lh-lead); }
.iys-heading-mark { display: flex; align-items: center; gap: var(--space-20); }
.iys-heading-mark > span { min-width: 0; }
.iys-sketch { flex: 0 0 auto; height: auto; max-height: 3cap; pointer-events: none; }
.iys-sketch-spiral { width: 56px; }
.iys-sketch-loop { width: 72px; }
.iys-sketch-arrow { width: 78px; }

/* İlgili rehberler: one band of three references. */
.iys-guide-band { --band-columns: 3; }
.iys-guide-band > .iys-guide { display: grid; grid-template-columns: 24px minmax(0, 1fr) 16px; align-items: start; gap: var(--space-4) var(--space-16); color: var(--ink); text-decoration: none; }
.iys-guide:hover { background: var(--accent); }
.iys-guide:active { background: var(--surface-inset); }
.iys-guide:focus-visible { outline: var(--focus-width) solid var(--ring); outline-offset: calc(-1 * var(--focus-width)); }
.iys-guide-icon { grid-row: 1 / span 2; width: 24px; height: 24px; color: var(--brand); }
.iys-guide strong { grid-column: 2; font-weight: var(--weight-strong); line-height: var(--lh-h3); }
.iys-guide span { grid-column: 2; color: var(--ink-muted); font-size: var(--text-sm); line-height: var(--lh-body); }
.iys-guide-arrow { grid-column: 3; grid-row: 1; width: 16px; height: 16px; margin-top: 2px; transition: transform var(--duration-micro) var(--ease); }
.iys-guide:hover .iys-guide-arrow { transform: translateX(var(--shift-arrow)); }

/* Tamamlayıcı ürünler and the closing request */
.product-related > div { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-24); }
.product-related article { align-items: start; }
.product-related article > a { margin-top: auto; }
.product-cta-inner { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--space-48); }
.product-cta-inner h2 + p { margin-top: var(--space-12); }
.product-cart-actions { display: flex; align-items: center; gap: var(--space-16); }
.iys-page main > .product-cta { margin-bottom: var(--space-48); }

@media (max-width: 1279px) {
  .iys-how { --stop-art: 88px; }
  .iys-package-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .iys-terms { --band-columns: 2; }
  .iys-terms > :nth-child(3) { border-inline-start: 0; }
  .iys-terms > :nth-child(n + 3) { border-top: var(--rule-width) solid var(--surface-divider); }
}

@media (max-width: 1023px) {
  .product-hero-grid, .iys-definition-inner, .iys-fit, .product-related > div, .product-cta-inner { grid-template-columns: minmax(0, 1fr); }
  .product-hero-grid { min-height: 0; }
  .product-hero-copy { padding: var(--space-24) var(--frame-inset) var(--space-16); }
  .iys-hero-figure { margin: var(--space-16) 0 0; }
  .product-section-nav { gap: var(--space-24); }
  .iys-definition-inner { gap: var(--space-32); }
  .iys-feature-band { --band-columns: 2; }
  .iys-feature-band > li:nth-child(n) { border-inline-start: var(--rule-width) solid var(--surface-divider); border-top: 0; }
  .iys-feature-band > li:nth-child(2n + 1) { border-inline-start: 0; }
  .iys-feature-band > li:nth-child(n + 3) { border-top: var(--rule-width) solid var(--surface-divider); }
  .iys-prose p { font-size: var(--text-body); }
  .iys-how { --stop-art: 72px; --stop-dot: calc(var(--stop-art) / 2); }
  .iys-how-head { grid-template-columns: minmax(0, 1fr); }
  .iys-how-head .btn { grid-column: 1; grid-row: auto; justify-self: start; }
  .iys-route { grid-template-columns: minmax(0, 1fr); margin-top: var(--space-32); }
  .iys-stop { display: grid; grid-template-columns: var(--space-24) calc(var(--stop-art) * 1.25) minmax(0, 1fr); grid-template-rows: auto 1fr; align-content: start; column-gap: var(--space-16); padding: 0 0 var(--space-24); text-align: start; }
  .iys-stop-art { grid-column: 2; grid-row: 1 / span 2; }
  .iys-stop h3 { grid-column: 3; margin-top: var(--space-16); }
  .iys-stop p { grid-column: 3; max-width: 40ch; }
  .iys-stop::before { left: calc(var(--space-24) / 2 - 4.5px); }
  .iys-stop:not(:last-child)::after { left: calc(var(--space-24) / 2 - var(--rule-width) / 2); width: var(--rule-width); height: 100%; }
  .iys-stop:nth-child(3)::after { width: var(--focus-width); margin-top: 0; margin-left: calc(var(--rule-width) * -0.5); background: linear-gradient(180deg, var(--brand), color-mix(in srgb, var(--brand) 64%, var(--surface-raised)), var(--brand)); }
  .iys-return { margin: var(--space-8) 0 0; }
  .iys-return-path { display: none; }
  .iys-return p { display: flex; align-items: flex-start; gap: var(--space-12); max-width: none; margin: 0; text-align: start; }
  .iys-return-icon { display: block; width: var(--space-24); height: var(--space-24); }
  .iys-phases { margin-top: var(--space-48); }
  .iys-packages-head { grid-template-columns: minmax(0, 1fr); }
  .iys-packages-head .btn { justify-self: start; }
  .iys-fit-head { padding-inline: var(--frame-inset); }
  .iys-guide-band { --band-columns: 1; }
  .iys-guide-band > .iys-guide:not(:first-child) { border-inline-start: 0; border-top: var(--rule-width) solid var(--surface-divider); }
  .iys-sketch-loop { display: none; }
}

@media (max-width: 639px) {
  .iys-hero-figure { margin-inline: calc(-1 * var(--space-8)); }
  .iys-feature-band > li:nth-child(n) { border-inline-start: 0; }
  .iys-feature-band > li:nth-child(n + 2) { border-top: var(--rule-width) solid var(--surface-divider); }
  .iys-feature-band > li { grid-template-columns: 40px minmax(0, 1fr); column-gap: var(--space-16); row-gap: var(--space-4); }
  .iys-feature-band > li > .iys-icon { grid-row: 1 / span 2; margin-bottom: 0; }
  .iys-feature-band > li > :is(h3, p) { grid-column: 2; }
  .iys-phases { grid-template-columns: minmax(0, 1fr); row-gap: var(--space-20); }
  .iys-axis { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); margin-bottom: 0; }
  .iys-axis-sync { width: 100%; margin-left: 0; }
  .iys-package-grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-16); }
  .iys-terms > :nth-child(n) { border-inline-start: 0; }
  .iys-terms > :nth-child(n + 2) { border-top: var(--rule-width) solid var(--surface-divider); }
  .product-cart-actions { justify-content: space-between; }
  .iys-sketch-arrow { width: 54px; }
}