/* Arcates Web Site — site.css
 * DOCS.md 5-7. Tek dosya, yapilandirma adimi yok.
 */
@layer tokens, reset, base, layout, components, pages, motion, utilities;

@layer tokens {
  :root {
    /* DOCS.md 6 — mevcut 14 renk belirteci korunur. */
    --navy: #062244;
    --blue: #0B4FA8;
    --blue-bright: #1C7BF2;
    --blue-soft: #7FB6FF;
    --cyan: #1FC4E0;
    --mist: #EDF4FF;
    --mist-2: #F7FAFF;
    --white: #FFFFFF;
    --sun: #FFC13D;
    --coral: #FF6B57;
    --violet: #7C5CFF;
    --mint: #25C989;
    --ink-soft: #4A6588;
    --line: rgba(11, 79, 168, .14);

    /* Anlamsal renk rolleri. */
    --bg: var(--white);
    --bg-sunken: var(--mist-2);
    --bg-raised: var(--white);
    --bg-invert: var(--navy);
    --fg: var(--navy);
    --fg-muted: var(--ink-soft);
    --fg-on-invert: var(--white);
    --brand: var(--blue);
    --brand-strong: var(--blue-bright);
    --brand-fg: var(--white);
    --border: var(--line);
    --border-strong: rgba(11, 79, 168, .28);
    --focus: var(--blue-bright);
    --success: #12805A;
    --danger: #B93828;

    --font-head: 'Sora', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --font-body: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

    /* Uzay olcegi. */
    --sp-1: 4px;
    --sp-2: 8px;
    --sp-3: 12px;
    --sp-4: 16px;
    --sp-5: 24px;
    --sp-6: 32px;
    --sp-7: 48px;
    --sp-8: 64px;
    --sp-9: 96px;
    --sp-10: 128px;

    --sec-tight: var(--sp-7);
    --sec: var(--sp-8);
    --sec-loose: var(--sp-9);

    --fs-xs: clamp(12px, .70rem + .15vw, 13px);
    --fs-sm: clamp(14px, .82rem + .18vw, 15px);
    --fs-base: clamp(16px, .94rem + .20vw, 17px);
    --fs-lg: clamp(18px, 1.02rem + .32vw, 20px);
    --fs-xl: clamp(21px, 1.12rem + .60vw, 24px);
    --fs-2xl: clamp(25px, 1.28rem + 1.10vw, 32px);
    --fs-3xl: clamp(30px, 1.45rem + 1.90vw, 42px);
    --fs-4xl: clamp(34px, 1.60rem + 3.30vw, 62px);

    --measure: 68ch;
    --measure-lead: 46ch;
    --wrap: 1180px;

    --r-sm: 8px;
    --r: 14px;
    --r-lg: 22px;
    --r-full: 999px;

    --sh-1: 0 1px 2px rgba(6,34,68,.06), 0 2px 8px rgba(6,34,68,.05);
    --sh-2: 0 4px 12px rgba(6,34,68,.07), 0 12px 32px rgba(6,34,68,.08);
    --sh-3: 0 8px 24px rgba(6,34,68,.09), 0 28px 64px rgba(6,34,68,.10);

    /* Sabit cizgi ve kontrol boyutlari token katmaninda tutulur. */
    --hairline: 1px;
    --progress-size: 2px;
    --focus-size: 3px;
    --logo-size: 34px;
    --tap-size: 44px;

    /* DOCS.md 7.2 — sureler degismez. */
    --ease: cubic-bezier(.16, 1, .3, 1);
    --dur-title: 1000ms;
    --dur-card: 800ms;
    --dur-shape: 950ms;
    --stagger-card: 80ms;
    --stagger-step: 140ms;
    --float-a: 7s;
    --float-b: 9s;
    --strip-loop: 34s;
  }

  @media (min-width: 58.75rem) {
    :root {
      --sec-tight: var(--sp-8);
      --sec: var(--sp-9);
      --sec-loose: var(--sp-10);
    }
  }
}

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
  body, h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd { margin: 0; }
  ul, ol { margin-block: 0; }
  img, svg, video { max-width: 100%; height: auto; }
  button, input, select, textarea { font: inherit; }
  button { color: inherit; }
  :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
    outline: var(--focus-size) solid var(--focus);
    outline-offset: var(--sp-1);
    border-radius: var(--r-sm);
  }
}

@layer base {
  body {
    background: var(--bg);
    color: var(--fg);
    font-family: var(--font-body);
    font-size: var(--fs-base);
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
  }
  h1, h2, h3, h4, h5, h6 {
    color: var(--fg);
    font-family: var(--font-head);
    font-weight: 700;
    line-height: 1.12;
    letter-spacing: -.02em;
    text-wrap: balance;
    overflow-wrap: break-word;
  }
  h1 { font-size: var(--fs-4xl); }
  h2 { font-size: var(--fs-3xl); }
  h3 { font-size: var(--fs-2xl); }
  h4 { font-size: var(--fs-xl); }
  p { margin-block-end: 1em; }
  a { color: var(--brand-strong); text-decoration-thickness: var(--hairline); text-underline-offset: .2em; }
  a:hover { color: var(--brand); }
  img[width][height] { height: auto; }
  [dir="rtl"] body { direction: rtl; }
}

@layer layout {
  .wrap { width: min(calc(100% - (var(--sp-5) * 2)), var(--wrap)); margin-inline: auto; }
  .wrap--text, .u-measure { max-width: var(--measure); }
  .u-measure-lead { max-width: var(--measure-lead); }

  .section { padding-block: var(--sec); }
  .section--tight { padding-block: var(--sec-tight); }
  .section--loose { padding-block: var(--sec-loose); }
  .section--content { padding-block-start: var(--sec-tight); }

  .section__head { max-width: var(--measure-lead); margin-block-end: var(--sp-7); }
  .section__title { margin-block-end: var(--sp-3); }
  .section__lead { color: var(--fg-muted); font-size: var(--fs-lg); margin: 0; }

  .page-hero { padding-block-end: var(--sec-tight); }
  .page__head { margin-block-end: var(--sp-6); }
  .page__title { max-width: 18ch; margin-block-end: var(--sp-4); }
  .page__lead { color: var(--fg-muted); font-size: var(--fs-lg); margin: 0; }

  .content-shell, .article-shell {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(14rem, 19rem);
    gap: var(--sp-8);
    align-items: start;
  }
  .content-main, .article-main { min-width: 0; }
  .content-aside, .article-aside { min-width: 0; display: grid; gap: var(--sp-5); align-content: start; }

  .contact-shell {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(22rem, .92fr);
    grid-template-areas: "copy card";
    gap: var(--sp-8);
    align-items: start;
  }
  .contact-copy { grid-area: copy; min-width: 0; }
  .contact-card { grid-area: card; min-width: 0; }

  .cards, .works, .post-grid, .project-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 17.5rem), 1fr));
    gap: var(--sp-5);
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .steps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
    gap: var(--sp-6);
    list-style: none;
    margin: 0;
    padding: 0;
  }

  @media (max-width: 58.75rem) {
    .content-shell, .article-shell { grid-template-columns: 1fr; gap: var(--sp-6); }
    .content-aside, .article-aside { order: -1; }
    .contact-shell { grid-template-columns: 1fr; grid-template-areas: "card" "copy"; gap: var(--sp-7); }
  }

  @media (max-width: 30rem) {
    .wrap { width: min(calc(100% - (var(--sp-4) * 2)), var(--wrap)); }
  }
}

@layer components {
  .visually-hidden {
    position: absolute;
    inline-size: var(--hairline);
    block-size: var(--hairline);
    padding: 0;
    margin: calc(var(--hairline) * -1);
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }

  .skip-link {
    position: absolute;
    inset-inline-start: var(--sp-3);
    inset-block-start: 0;
    z-index: 999;
    background: var(--bg-invert);
    color: var(--fg-on-invert);
    padding: var(--sp-2) var(--sp-4);
    border-radius: 0 0 var(--r-sm) var(--r-sm);
    transform: translateY(-140%);
    transition: transform .2s var(--ease);
  }
  .skip-link:focus { transform: translateY(0); color: var(--fg-on-invert); }

  .btn {
    display: inline-flex;
    min-block-size: var(--tap-size);
    align-items: center;
    justify-content: center;
    gap: var(--sp-2);
    padding: var(--sp-3) var(--sp-5);
    border: var(--hairline) solid transparent;
    border-radius: var(--r-full);
    background: transparent;
    color: var(--brand);
    font-family: var(--font-head);
    font-size: var(--fs-sm);
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    text-decoration: none;
    transition: transform .25s var(--ease), box-shadow .25s var(--ease), background-color .25s var(--ease), border-color .25s var(--ease);
  }
  .btn:hover { transform: translateY(calc(var(--sp-1) * -.5)); }
  .btn:disabled { cursor: not-allowed; opacity: .52; transform: none; }
  .btn--primary { background: var(--brand); color: var(--brand-fg); box-shadow: var(--sh-1); }
  .btn--primary:hover { background: var(--brand-strong); color: var(--brand-fg); box-shadow: var(--sh-2); }
  .btn--ghost { border-color: var(--border); color: var(--brand); }
  .btn--ghost:hover { background: var(--bg-sunken); color: var(--brand); border-color: var(--border-strong); }
  .btn--head { min-block-size: var(--tap-size); padding-inline: var(--sp-4); }
  .btn--on-dark { color: var(--fg-on-invert); border-color: rgba(255,255,255,.36); }
  .btn--on-dark:hover { background: rgba(255,255,255,.1); color: var(--fg-on-invert); }

  .badge, .page__eyebrow {
    display: inline-flex;
    align-items: center;
    inline-size: fit-content;
    color: var(--brand-strong);
    font-family: var(--font-head);
    font-size: var(--fs-xs);
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
  }
  .badge { padding: var(--sp-1) var(--sp-2); border-radius: var(--r-full); background: var(--mist); letter-spacing: .03em; }
  .page__eyebrow { margin-block-end: var(--sp-3); }

  .crumbs { padding-block-start: var(--sp-5); }
  .crumbs__list { display: flex; flex-wrap: wrap; gap: var(--sp-2); list-style: none; margin: 0; padding: 0; font-size: var(--fs-sm); }
  .crumbs__item { color: var(--fg-muted); }
  .crumbs__item + .crumbs__item::before { content: '/'; margin-inline-end: var(--sp-2); color: var(--border-strong); }
  .crumbs__item a { color: var(--fg-muted); text-decoration: none; }
  .crumbs__item a:hover { color: var(--brand); text-decoration: underline; }

  .prose { color: var(--fg); font-size: var(--fs-base); line-height: 1.8; }
  .prose > * + * { margin-block-start: var(--sp-4); }
  .prose h2 { margin-block-start: var(--sp-8); margin-block-end: var(--sp-4); scroll-margin-block-start: var(--sp-10); }
  .prose h3 { margin-block-start: var(--sp-7); margin-block-end: var(--sp-3); scroll-margin-block-start: var(--sp-10); }
  .prose h4 { margin-block-start: var(--sp-6); margin-block-end: var(--sp-3); }
  .prose p { margin-block-end: 0; }
  .prose ul, .prose ol { padding-inline-start: var(--sp-5); margin-block: var(--sp-4); }
  .prose li + li { margin-block-start: var(--sp-2); }
  .prose img { border-radius: var(--r-lg); margin-block: var(--sp-6); box-shadow: var(--sh-1); }
  .prose blockquote { margin-block: var(--sp-6); padding: var(--sp-4) var(--sp-5); border-inline-start: var(--focus-size) solid var(--brand-strong); background: var(--bg-sunken); border-radius: 0 var(--r) var(--r) 0; color: var(--fg-muted); font-size: var(--fs-lg); }
  .prose table { width: 100%; border-collapse: collapse; margin-block: var(--sp-6); font-size: var(--fs-sm); }
  .prose th, .prose td { padding: var(--sp-3); border-bottom: var(--hairline) solid var(--border); text-align: start; }
  .prose th { font-family: var(--font-head); font-weight: 700; }

  .card, .work, .post-card, .project-card {
    position: relative;
    background: var(--bg-raised);
    border: var(--hairline) solid var(--border);
    border-radius: var(--r-lg);
    box-shadow: var(--sh-1);
    overflow: hidden;
    transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
  }
  .card:hover, .work:hover, .post-card:hover, .project-card:hover { transform: translateY(calc(var(--sp-1) * -1)); box-shadow: var(--sh-2); border-color: var(--border-strong); }

  .card { display: flex; flex-direction: column; gap: var(--sp-3); padding: var(--sp-5); }
  .card__icon { inline-size: var(--sp-7); block-size: var(--sp-7); border-radius: var(--r); display: grid; place-items: center; background: var(--mist); color: var(--brand); }
  .card__icon svg { inline-size: var(--sp-5); block-size: var(--sp-5); }
  .card--blue .card__icon { background: rgba(11,79,168,.12); color: var(--blue); }
  .card--coral .card__icon { background: rgba(255,107,87,.14); color: var(--danger); }
  .card--cyan .card__icon { background: rgba(31,196,224,.16); color: #0F7183; }
  .card--mint .card__icon { background: rgba(37,201,137,.15); color: var(--success); }
  .card--violet .card__icon { background: rgba(124,92,255,.14); color: #5538CD; }
  .card--sun .card__icon { background: rgba(255,193,61,.2); color: #76530F; }
  .card__title { font-size: var(--fs-xl); }
  .card__title a { color: inherit; text-decoration: none; }
  .card__title a::after { content: ''; position: absolute; inset: 0; }
  .card__text { color: var(--fg-muted); font-size: var(--fs-sm); margin: 0; }

  .work { display: flex; flex-direction: column; gap: var(--sp-3); padding: var(--sp-5); }
  .work__media { margin: calc(var(--sp-5) * -1) calc(var(--sp-5) * -1) 0; overflow: hidden; }
  .work__media img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; display: block; }
  .work__title { font-size: var(--fs-xl); }
  .work__title a { color: inherit; text-decoration: none; }
  .work__title a::after { content: ''; position: absolute; inset: 0; }
  .work__meta { color: var(--brand-strong); font-size: var(--fs-xs); font-weight: 700; margin: 0; }
  .work__text { color: var(--fg-muted); font-size: var(--fs-sm); margin: 0; }

  .step { position: relative; padding-block-start: var(--sp-5); }
  .step__number { display: block; color: var(--mist); font-family: var(--font-head); font-size: var(--fs-4xl); font-weight: 800; line-height: 1; margin-block-end: var(--sp-2); }
  .step__title { font-size: var(--fs-xl); margin-block-end: var(--sp-2); }
  .step__text { color: var(--fg-muted); font-size: var(--fs-sm); margin: 0; }

  .section--faq { background: var(--bg-sunken); }
  .faq { display: grid; gap: var(--sp-3); max-width: var(--measure); }
  .faq__item { background: var(--bg-raised); border: var(--hairline) solid var(--border); border-radius: var(--r); padding-inline: var(--sp-5); box-shadow: var(--sh-1); }
  .faq__question { cursor: pointer; padding-block: var(--sp-4); font-family: var(--font-head); font-weight: 600; font-size: var(--fs-base); }
  .faq__item[open] .faq__question { border-bottom: var(--hairline) solid var(--border); }
  .faq__answer { padding-block: var(--sp-4); color: var(--fg-muted); }
  .faq__answer > *:last-child { margin-bottom: 0; }

  .notice { margin-block-end: var(--sp-5); padding: var(--sp-3) var(--sp-4); border: var(--hairline) solid var(--border); border-inline-start: var(--focus-size) solid var(--sun); border-radius: var(--r); background: var(--bg-sunken); color: var(--fg-muted); font-size: var(--fs-sm); }
  .notice--success { border-inline-start-color: var(--mint); background: rgba(37,201,137,.08); }
  .notice--error { border-inline-start-color: var(--coral); background: rgba(255,107,87,.08); }
  .notice--warning { border-inline-start-color: var(--sun); background: rgba(255,193,61,.09); }
  .notice--info { border-inline-start-color: var(--blue-soft); }

  .quick-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--hairline); margin-block-start: var(--sp-6); border: var(--hairline) solid var(--border); border-radius: var(--r-lg); overflow: hidden; background: var(--border); box-shadow: var(--sh-1); }
  .quick-facts__item { background: var(--bg-raised); padding: var(--sp-4) var(--sp-5); }
  .quick-facts dt { color: var(--fg-muted); font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
  .quick-facts dd { margin-block-start: var(--sp-1); font-family: var(--font-head); font-size: var(--fs-sm); font-weight: 700; }

  .toc, .related-links, .latest-list, .aside-cta { border: var(--hairline) solid var(--border); border-radius: var(--r-lg); background: var(--bg-raised); box-shadow: var(--sh-1); }
  .toc, .related-links, .latest-list { padding: var(--sp-5); }
  .toc__label, .related-links__label, .latest-list__label, .contact-card__label { margin: 0 0 var(--sp-3); color: var(--fg); font-family: var(--font-head); font-size: var(--fs-sm); font-weight: 700; }
  .toc__list, .related-links__list, .latest-list ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-1); }
  .toc__link, .related-links a { display: block; padding: var(--sp-2) var(--sp-3); border-radius: var(--r-sm); color: var(--fg-muted); font-size: var(--fs-sm); text-decoration: none; }
  .toc__item--l3 .toc__link { padding-inline-start: var(--sp-5); font-size: var(--fs-xs); }
  .toc__link:hover, .related-links a:hover { background: var(--bg-sunken); color: var(--brand); }
  .toc__link[aria-current] { background: var(--mist); color: var(--brand); font-weight: 700; }

  .aside-cta { position: sticky; inset-block-start: calc(var(--sp-9) + var(--sp-4)); padding: var(--sp-5); background: linear-gradient(145deg, var(--navy), var(--blue)); color: var(--fg-on-invert); transition: opacity .25s var(--ease), transform .25s var(--ease); }
  .aside-cta.is-suppressed { opacity: 0; transform: translateY(var(--sp-3)); pointer-events: none; }
  .aside-cta__eyebrow { color: var(--blue-soft); font-family: var(--font-head); font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
  .aside-cta__text { color: rgba(255,255,255,.8); font-size: var(--fs-sm); margin-block-end: var(--sp-5); }
  .aside-cta__actions { display: grid; gap: var(--sp-3); }
  .aside-cta .btn--primary { background: var(--white); color: var(--brand); box-shadow: none; }
  .aside-cta__link { display: grid; gap: var(--sp-1); padding-block-start: var(--sp-3); border-top: var(--hairline) solid rgba(255,255,255,.14); color: var(--fg-on-invert); text-decoration: none; }
  .aside-cta__link span { color: rgba(255,255,255,.68); font-size: var(--fs-xs); }
  .aside-cta__link strong { font-size: var(--fs-sm); }

  .related-links__list { grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: var(--sp-2); }
  .section--neighbors .related-links { box-shadow: none; }

  .chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-block-start: var(--sp-5); }
  .chips__item { display: inline-flex; align-items: center; min-block-size: var(--tap-size); padding-inline: var(--sp-4); border: var(--hairline) solid var(--border); border-radius: var(--r-full); background: var(--bg-raised); color: var(--brand); font-size: var(--fs-sm); font-weight: 600; text-decoration: none; }
  .chips__item:hover { background: var(--bg-sunken); }
  .chips__item.is-current { background: var(--brand); color: var(--brand-fg); border-color: var(--brand); }

  .pager { display: flex; justify-content: center; gap: var(--sp-2); flex-wrap: wrap; margin-block-start: var(--sp-7); }
  .pager__item { display: inline-flex; min-inline-size: var(--tap-size); min-block-size: var(--tap-size); align-items: center; justify-content: center; padding-inline: var(--sp-3); border: var(--hairline) solid var(--border); border-radius: var(--r-sm); background: var(--bg-raised); color: var(--brand); text-decoration: none; }
  .pager__item:hover { background: var(--bg-sunken); }
  .pager__item.is-current { background: var(--brand); color: var(--brand-fg); border-color: var(--brand); }

  .form { display: grid; gap: var(--sp-1); }
  .form__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--sp-4); }
  .field { margin-block-end: var(--sp-4); }
  .field label { display: block; margin-block-end: var(--sp-2); font-size: var(--fs-sm); font-weight: 600; }
  .field input, .field select, .field textarea {
    width: 100%;
    min-block-size: var(--tap-size);
    padding: var(--sp-3) var(--sp-4);
    border: var(--hairline) solid var(--border);
    border-radius: var(--r);
    background: var(--bg-raised);
    color: var(--fg);
    font-size: var(--fs-base);
    transition: border-color .2s var(--ease), box-shadow .2s var(--ease), background-color .2s var(--ease);
  }
  .field textarea { min-block-size: 9rem; resize: vertical; line-height: 1.65; }
  .field input:focus, .field select:focus, .field textarea:focus { border-color: var(--focus); box-shadow: 0 0 0 var(--sp-1) rgba(28,123,242,.1); }
  .field.is-valid input, .field.is-valid select, .field.is-valid textarea { border-color: rgba(37,201,137,.55); }
  .field.is-invalid input, .field.is-invalid select, .field.is-invalid textarea { border-color: rgba(255,107,87,.65); background: rgba(255,107,87,.025); }
  .field__error { display: block; margin-block-start: var(--sp-1); color: var(--danger); font-size: var(--fs-xs); }
  .field__hint { display: block; margin-block-start: var(--sp-1); color: var(--fg-muted); font-size: var(--fs-xs); }
  .field--check label { display: flex; align-items: flex-start; gap: var(--sp-2); font-weight: 500; }
  .field--check input { width: auto; min-block-size: 0; margin-block-start: var(--sp-1); flex: none; }
  .form__actions { margin-block-start: var(--sp-2); }
  .form__trap { position: absolute; inset-inline-start: -999rem; inline-size: var(--hairline); block-size: var(--hairline); overflow: hidden; }

  .section--form { background: var(--bg-sunken); }
  .thanks { text-align: center; display: grid; gap: var(--sp-4); justify-items: center; padding-block: var(--sp-7); }
  .thanks__mark { inline-size: var(--sp-9); block-size: var(--sp-9); border-radius: var(--r-full); display: grid; place-items: center; background: rgba(37,201,137,.14); color: var(--success); }
  .thanks__mark svg { inline-size: var(--sp-6); block-size: var(--sp-6); }

  .section--cta { padding-block-start: 0; padding-block-end: var(--sec); }
  .cta { background: linear-gradient(135deg, var(--navy), var(--blue)); color: var(--fg-on-invert); border-radius: var(--r-lg); padding: var(--sp-8) var(--sp-7); text-align: center; box-shadow: var(--sh-2); }
  .cta__title { color: var(--fg-on-invert); margin-block-end: var(--sp-3); }
  .cta__text { max-width: 58ch; margin: 0 auto var(--sp-5); color: rgba(255,255,255,.82); font-size: var(--fs-lg); }
  .cta__actions { display: flex; gap: var(--sp-3); justify-content: center; flex-wrap: wrap; }
  .cta .btn--primary { background: var(--white); color: var(--brand); }

  .site-foot { background: var(--bg-invert); color: rgba(255,255,255,.76); padding-block: var(--sp-9) var(--sp-5); }
  .site-foot__inner { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(auto-fit, minmax(9rem, 1fr)); gap: var(--sp-7); }
  .site-foot__logo { display: block; width: 13rem; height: auto; margin-block-end: var(--sp-1); }
  .site-foot__about { margin-block-start: var(--sp-3); max-width: 42ch; font-size: var(--fs-sm); }
  .site-foot__title { color: var(--fg-on-invert); font-family: var(--font-head); font-size: var(--fs-sm); margin-block-end: var(--sp-3); }
  .site-foot__title--sub { margin-block-start: var(--sp-5); }
  .site-foot__col ul, .site-foot__social, .hours { list-style: none; margin: 0; padding: 0; }
  .site-foot__col ul { display: grid; gap: var(--sp-2); }
  .site-foot a { color: rgba(255,255,255,.78); font-size: var(--fs-sm); text-decoration: none; }
  .site-foot a:hover { color: var(--fg-on-invert); text-decoration: underline; }
  .site-foot__social { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-block-start: var(--sp-4); }
  .nap { font-style: normal; display: grid; gap: var(--sp-2); }
  .hours { display: grid; gap: var(--sp-1); font-size: var(--fs-sm); }
  .hours li { display: flex; justify-content: space-between; gap: var(--sp-3); max-width: 14rem; }
  .site-foot__base { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-5); flex-wrap: wrap; margin-block-start: var(--sp-7); padding-block-start: var(--sp-5); border-top: var(--hairline) solid rgba(255,255,255,.12); }
  .site-foot__legal { margin: 0; font-size: var(--fs-xs); }
  .site-foot__links { display: flex; gap: var(--sp-4); list-style: none; margin: 0; padding: 0; flex-wrap: wrap; }

  .system { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: var(--sp-7) var(--sp-5); background: linear-gradient(180deg, var(--bg-sunken), var(--bg)); }
  .system__card { width: min(100%, 45rem); padding: var(--sp-7); border: var(--hairline) solid var(--border); border-radius: var(--r-lg); background: var(--bg-raised); box-shadow: var(--sh-3); }
  .system__code { font-family: var(--font-head); font-size: var(--fs-4xl); font-weight: 800; line-height: 1; color: var(--brand); margin-block-end: var(--sp-2); }
  .system__lead { color: var(--fg-muted); }
  .system__actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-block-start: var(--sp-5); }
  .system__list { list-style: none; margin: 0 0 var(--sp-5); padding: 0; }
  .system__list li { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); padding-block: var(--sp-2); border-bottom: var(--hairline) solid var(--border); font-size: var(--fs-sm); }
  .system__steps { display: flex; gap: var(--sp-2); flex-wrap: wrap; list-style: none; margin: 0 0 var(--sp-6); padding: 0; }
  .system__steps li { padding: var(--sp-2) var(--sp-3); border-radius: var(--r-full); background: var(--mist); color: var(--fg-muted); font-size: var(--fs-xs); font-weight: 600; }
  .system__steps li[aria-current="step"] { background: var(--brand); color: var(--brand-fg); }
  .system__state { font-weight: 700; font-size: var(--fs-xs); }
  .system__state--ok { color: var(--success); }
  .system__state--bad { color: var(--danger); }
}

@layer pages {
  /* Ust menu ve ilerleme. */
  .site-head { position: sticky; inset-block-start: 0; z-index: 50; background: rgba(255,255,255,.9); backdrop-filter: saturate(150%) blur(.65rem); border-bottom: var(--hairline) solid transparent; transition: border-color .3s var(--ease), box-shadow .3s var(--ease), background-color .3s var(--ease); }
  .site-head.is-stuck { border-bottom-color: var(--border); box-shadow: var(--sh-1); }
  .site-head__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-5); padding-block: var(--sp-4); }
  .site-head.is-stuck .site-head__inner { padding-block: var(--sp-2); }
  .progress { position: absolute; inset-inline: 0; inset-block-end: calc(var(--hairline) * -1); block-size: var(--progress-size); overflow: hidden; }
  .progress__bar { display: block; block-size: 100%; background: linear-gradient(90deg, var(--blue), var(--blue-bright), var(--cyan)); transform: scaleX(0); transform-origin: left center; will-change: transform; }
  [dir="rtl"] .progress__bar { transform-origin: right center; }

  .brand { display: inline-flex; align-items: center; gap: var(--sp-2); color: var(--fg); text-decoration: none; }
  .brand__mark { inline-size: var(--logo-size); block-size: var(--logo-size); flex: none; display: inline-block; border-radius: var(--r-sm); background: var(--navy) url('../img/logo-mark.png') center / cover no-repeat; box-shadow: var(--sh-1); }
  .brand__name { font-family: var(--font-head); font-size: var(--fs-lg); font-weight: 700; }
  .site-head__panel { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-5); flex: 1; min-width: 0; }
  .site-nav { display: flex; align-items: center; min-width: 0; }
  .site-nav__list { display: flex; gap: var(--sp-1); list-style: none; margin: 0; padding: 0; }
  .site-nav__link { display: inline-flex; min-block-size: var(--tap-size); align-items: center; padding-inline: var(--sp-3); border-radius: var(--r-full); color: var(--fg-muted); font-size: var(--fs-sm); font-weight: 500; text-decoration: none; }
  .site-nav__link:hover { background: var(--bg-sunken); color: var(--brand); }
  .site-nav__toggle { display: none; inline-size: var(--tap-size); block-size: var(--tap-size); border: var(--hairline) solid var(--border); border-radius: var(--r); background: var(--bg-raised); cursor: pointer; align-items: center; justify-content: center; }
  .site-nav__bars, .site-nav__bars::before, .site-nav__bars::after { display: block; inline-size: 1.15rem; block-size: .125rem; border-radius: var(--r-full); background: var(--fg); transition: transform .3s var(--ease), opacity .2s var(--ease); }
  .site-nav__bars { position: relative; }
  .site-nav__bars::before, .site-nav__bars::after { content: ''; position: absolute; inset-inline-start: 0; }
  .site-nav__bars::before { inset-block-start: -.375rem; }
  .site-nav__bars::after { inset-block-start: .375rem; }
  .site-nav__toggle[aria-expanded="true"] .site-nav__bars { background: transparent; }
  .site-nav__toggle[aria-expanded="true"] .site-nav__bars::before { transform: translateY(.375rem) rotate(45deg); }
  .site-nav__toggle[aria-expanded="true"] .site-nav__bars::after { transform: translateY(-.375rem) rotate(-45deg); }
  .site-head__side { display: flex; align-items: center; gap: var(--sp-3); flex: none; }
  .lang-switch { display: flex; gap: var(--sp-1); }
  .lang-switch__item { padding: var(--sp-1) var(--sp-2); border-radius: var(--r-sm); color: var(--fg-muted); font-size: var(--fs-xs); font-weight: 700; text-decoration: none; }
  .lang-switch__item:hover { background: var(--bg-sunken); color: var(--brand); }
  .lang-switch__item.is-current { background: var(--brand); color: var(--brand-fg); }

  /* Kahraman — kompozisyon ve sureleri korunur. */
  .hero { position: relative; overflow: hidden; background: linear-gradient(180deg, var(--bg-sunken), var(--bg) 78%); padding-block: var(--sp-8) var(--sp-9); }
  .hero__grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: var(--sp-7); align-items: center; }
  .hero__badge { display: inline-flex; align-items: center; gap: var(--sp-2); padding: var(--sp-2) var(--sp-4); margin-block-end: var(--sp-5); border: var(--hairline) solid var(--border); border-radius: var(--r-full); background: var(--bg-raised); color: var(--brand); box-shadow: var(--sh-1); font-size: var(--fs-xs); font-weight: 600; }
  .hero__title { margin-block-end: var(--sp-5); font-size: var(--fs-4xl); line-height: 1.06; letter-spacing: -.03em; }
  .hero__line { display: block; overflow: hidden; }
  .hero__line > span { display: block; }
  .hero__line--accent > span { background: linear-gradient(92deg, var(--blue), var(--blue-bright) 46%, var(--cyan)); background-clip: text; -webkit-background-clip: text; color: transparent; }
  .hero__text { max-width: 54ch; margin-block-end: var(--sp-6); color: var(--fg-muted); font-size: var(--fs-lg); }
  .hero__actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); }

  .shapes { position: relative; block-size: 30rem; }
  .shape { position: absolute; will-change: transform; translate: 0 var(--drift, 0); }
  .shape--card { inset-inline-start: 6%; inset-block-start: 12%; inline-size: 15.625rem; padding: var(--sp-4); border: var(--hairline) solid var(--border); border-radius: var(--r-lg); background: var(--bg-raised); box-shadow: var(--sh-3); }
  .shape__row { block-size: .55rem; border-radius: var(--r-full); background: var(--mist); margin-block-end: var(--sp-2); }
  .shape__row:nth-child(1) { inline-size: 62%; background: var(--blue); }
  .shape__row:nth-child(2) { inline-size: 100%; }
  .shape__row:nth-child(3) { inline-size: 84%; }
  .shape__chart { display: flex; align-items: flex-end; gap: var(--sp-1); block-size: 3.875rem; margin-block-start: var(--sp-3); }
  .shape__chart span { flex: 1; border-radius: var(--r-sm) var(--r-sm) 0 0; background: linear-gradient(180deg, var(--blue-bright), var(--blue)); }
  .shape__chart span:nth-child(1) { height: 40%; } .shape__chart span:nth-child(2) { height: 66%; } .shape__chart span:nth-child(3) { height: 52%; } .shape__chart span:nth-child(4) { height: 88%; } .shape__chart span:nth-child(5) { height: 74%; }
  .shape--circle { inset-inline-end: 12%; inset-block-start: 4%; inline-size: 7.25rem; block-size: 7.25rem; border-radius: 50%; background: radial-gradient(circle at 32% 30%, var(--sun), #F2A417); --sh-tint: rgba(255,193,61,.34); box-shadow: 0 1.125rem 2.5rem var(--sh-tint); }
  .shape--ring { inset-inline-end: 4%; inset-block-start: 34%; inline-size: 9.375rem; block-size: 9.375rem; border-radius: 50%; border: .875rem solid var(--cyan); opacity: .3; }
  .shape--square { inset-inline-start: 0; inset-block-end: 12%; inline-size: 5.25rem; block-size: 5.25rem; border-radius: var(--r-lg); background: var(--violet); --sh-tint: rgba(124,92,255,.32); box-shadow: 0 1rem 2.125rem var(--sh-tint); }
  .shape--pill { inset-inline-end: 24%; inset-block-end: 6%; inline-size: 8.25rem; block-size: 2.75rem; border-radius: var(--r-full); background: var(--coral); --sh-tint: rgba(255,107,87,.3); box-shadow: 0 1rem 2.125rem var(--sh-tint); }
  .shape--triangle { inset-inline-start: 40%; inset-block-end: 0; inline-size: 0; block-size: 0; border-inline: 2.125rem solid transparent; border-bottom: 3.625rem solid var(--mint); opacity: .88; }
  .shape--line { inset-inline-start: 14%; inset-block-start: 2%; inline-size: 15rem; block-size: 7.5rem; }
  .shape--line path { fill: none; stroke: var(--blue-bright); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }

  .strip { overflow: hidden; padding-block: var(--sp-4); background: var(--bg-invert); color: var(--fg-on-invert); --strip-duration: var(--strip-loop); }
  .strip__track { display: flex; width: max-content; animation: strip-scroll var(--strip-duration) linear infinite; }
  .strip__group { display: flex; flex: none; }
  .strip__item { display: inline-flex; align-items: center; gap: var(--sp-3); padding-inline: var(--sp-6); color: rgba(255,255,255,.84); font-family: var(--font-head); font-size: var(--fs-sm); font-weight: 600; white-space: nowrap; }
  .strip__item::after { content: ''; inline-size: .375rem; block-size: .375rem; border-radius: 50%; background: var(--cyan); opacity: .7; }

  .coast { background: var(--bg-sunken); }
  .coast__figure { margin-block-start: var(--sp-7); }
  .coast__svg { width: 100%; height: auto; display: block; overflow: visible; }
  .coast__path { fill: none; stroke: var(--brand-strong); stroke-width: 3; stroke-linecap: round; opacity: .55; }
  .coast__dot circle { fill: var(--bg-raised); stroke: var(--brand); stroke-width: 3; }
  .coast__dot text { fill: var(--fg); font-family: var(--font-head); font-size: 15px; font-weight: 600; text-anchor: middle; }
  .coast__dot a { text-decoration: none; }
  .coast__dot a:hover circle { fill: var(--brand-strong); stroke: var(--brand-strong); }
  .coast__list { display: flex; flex-wrap: wrap; gap: var(--sp-2); list-style: none; margin: var(--sp-6) 0 0; padding: 0; }
  .coast__list a { display: inline-flex; min-block-size: var(--tap-size); align-items: center; padding-inline: var(--sp-4); border: var(--hairline) solid var(--border); border-radius: var(--r-full); background: var(--bg-raised); color: var(--brand); font-size: var(--fs-sm); font-weight: 600; text-decoration: none; }

  /* Iletisim sayfasi. */
  .contact-head { max-width: var(--measure); }
  .contact-card { position: sticky; inset-block-start: calc(var(--sp-9) + var(--sp-4)); border: var(--hairline) solid var(--border); border-radius: var(--r-lg); background: var(--bg-raised); box-shadow: var(--sh-2); overflow: hidden; }
  .contact-card .section--form { padding: var(--sp-5); background: transparent; }
  .contact-card .section--form > .wrap { width: 100%; max-width: none; }
  .contact-card__details { padding: 0 var(--sp-5) var(--sp-5); border-top: var(--hairline) solid var(--border); }
  .contact-card__label { padding-block-start: var(--sp-5); }
  .contact-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-3); }
  .contact-list li { display: grid; gap: var(--sp-1); }
  .contact-list li > span { color: var(--fg-muted); font-size: var(--fs-xs); }
  .contact-list a, .contact-list strong { color: var(--fg); font-size: var(--fs-sm); font-weight: 600; text-decoration: none; overflow-wrap: anywhere; }
  .contact-list__hours div { display: grid; gap: var(--sp-1); }
  .contact-card__whatsapp { width: 100%; margin-block-start: var(--sp-4); }

  /* Blog ve ornek site kartlari. */
  .post-card, .project-card { display: flex; flex-direction: column; }
  .post-card__media, .project-card__media { display: block; overflow: hidden; aspect-ratio: 16 / 9; background: var(--bg-sunken); }
  .post-card__media img, .project-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s var(--ease); }
  .post-card:hover .post-card__media img, .project-card:hover .project-card__media img { transform: scale(1.025); }
  .post-card__body, .project-card__body { display: flex; flex-direction: column; gap: var(--sp-3); padding: var(--sp-5); flex: 1; }
  .post-card__meta, .project-card__meta { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-2); color: var(--fg-muted); font-size: var(--fs-xs); margin: 0; }
  .post-card__title, .project-card__title { font-size: var(--fs-xl); }
  .post-card__title a, .project-card__title a { color: var(--fg); text-decoration: none; }
  .post-card__text, .project-card__text { color: var(--fg-muted); font-size: var(--fs-sm); margin: 0; }
  .project-intro { margin-block-start: var(--sp-6); }

  .post__meta { display: flex; flex-wrap: wrap; gap: var(--sp-2); color: var(--fg-muted); font-size: var(--fs-sm); margin-block-end: var(--sp-4); }
  .latest-list li { display: grid; gap: var(--sp-1); padding-block: var(--sp-2); }
  .latest-list li + li { border-top: var(--hairline) solid var(--border); }
  .latest-list a { color: var(--fg); font-size: var(--fs-sm); font-weight: 600; text-decoration: none; }
  .latest-list span { color: var(--fg-muted); font-size: var(--fs-xs); }

  .project-meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: var(--sp-4); margin-block-end: var(--sp-6); padding: var(--sp-5); border: var(--hairline) solid var(--border); border-radius: var(--r-lg); background: var(--bg-sunken); }
  .project-meta dt { color: var(--fg-muted); font-size: var(--fs-xs); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
  .project-meta dd { margin-block-start: var(--sp-1); font-family: var(--font-head); font-size: var(--fs-sm); font-weight: 600; }
  .project-detail { display: grid; gap: var(--sp-7); }
  .project-cover { width: 100%; display: block; border-radius: var(--r-lg); box-shadow: var(--sh-2); }
  .project-story { max-width: var(--measure); }
  .project-story .prose h2 { padding: var(--sp-5); border: var(--hairline) solid var(--border); border-radius: var(--r-lg); background: var(--bg-sunken); box-shadow: var(--sh-1); }
  .gallery { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: var(--sp-4); }
  .gallery img { width: 100%; display: block; border-radius: var(--r); box-shadow: var(--sh-1); }

  .section__more { margin-block-start: var(--sp-6); }
  .muted { color: var(--fg-muted); }

  @media (max-width: 58.75rem) {
    .site-nav__toggle { display: inline-flex; flex: none; }
    .site-head__panel { position: absolute; inset-inline: 0; inset-block-start: 100%; display: none; flex-direction: column; align-items: stretch; gap: var(--sp-3); padding: var(--sp-3) var(--sp-5) var(--sp-5); border-bottom: var(--hairline) solid var(--border); background: var(--bg-raised); box-shadow: var(--sh-2); }
    .site-head__panel.is-open { display: flex; }
    .site-nav__list { flex-direction: column; }
    .site-nav__link { display: flex; padding-inline: var(--sp-3); }
    .site-head__side { justify-content: space-between; }
    html:not(.js) .site-head__panel { display: flex; position: static; box-shadow: none; border: 0; padding: var(--sp-3) 0 0; }
    html:not(.js) .site-head__inner { flex-wrap: wrap; }
    html:not(.js) .site-nav__toggle { display: none; }

    .hero__grid { grid-template-columns: 1fr; gap: var(--sp-6); }
    .shapes { block-size: 23.75rem; order: 2; }
    .aside-cta, .contact-card { position: static; }
    .content-aside, .article-aside { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .content-aside .aside-cta, .article-aside .aside-cta { grid-column: 1 / -1; }
  }

  @media (max-width: 45rem) {
    .hero { padding-block: var(--sp-7) var(--sp-8); }
    .shapes { block-size: 18rem; }
    .shape--card { inline-size: 11.875rem; padding: var(--sp-3); }
    .shape--circle { inline-size: 5.25rem; block-size: 5.25rem; }
    .shape--ring { inline-size: 6.625rem; block-size: 6.625rem; border-width: .625rem; }
    .shape--square { inline-size: 3.875rem; block-size: 3.875rem; }
    .shape--pill { inline-size: 6rem; block-size: 2.125rem; }
    .coast__dot text { display: none; }
    .coast__figure { margin-block-start: var(--sp-6); }
    .strip { --strip-duration: calc(var(--strip-loop) / .7); }
    .cta { padding: var(--sp-7) var(--sp-5); }
    .site-foot__inner { grid-template-columns: 1fr 1fr; }
    .quick-facts { grid-template-columns: 1fr; }
    .content-aside, .article-aside { grid-template-columns: 1fr; }
    .form__grid { grid-template-columns: 1fr; }
  }

  @media (max-width: 30rem) {
    .site-foot__inner { grid-template-columns: 1fr; }
    .cta { padding-inline: var(--sp-4); }
    .system__card { padding: var(--sp-5); }
  }
}

@layer motion {
  html.js [data-reveal] {
    opacity: 0;
    transform: translate3d(0, 1.375rem, 0);
    transition: opacity var(--dur-card) var(--ease), transform var(--dur-card) var(--ease);
    transition-delay: var(--reveal-delay, 0ms);
  }
  html.js [data-reveal].is-visible { opacity: 1; transform: translate3d(0, 0, 0); }
  html.js [data-reveal].d1 { --reveal-delay: 80ms; } html.js [data-reveal].d2 { --reveal-delay: 160ms; } html.js [data-reveal].d3 { --reveal-delay: 240ms; } html.js [data-reveal].d4 { --reveal-delay: 320ms; } html.js [data-reveal].d5 { --reveal-delay: 400ms; } html.js [data-reveal].d6 { --reveal-delay: 480ms; }
  html.js [data-reveal].s1 { --reveal-delay: 140ms; } html.js [data-reveal].s2 { --reveal-delay: 280ms; } html.js [data-reveal].s3 { --reveal-delay: 420ms; }

  @keyframes hero-line { from { transform: translate3d(0, 100%, 0); } to { transform: translate3d(0, 0, 0); } }
  @keyframes hero-fade { from { opacity: 0; transform: translate3d(0, 1rem, 0); } to { opacity: 1; transform: translate3d(0, 0, 0); } }
  @keyframes hero-shape { from { opacity: 0; transform: translate3d(0, 2rem, 0) scale(.94); } to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); } }
  @keyframes hero-mark { from { transform: rotate(-160deg) scale(.5); opacity: 0; } to { transform: rotate(0deg) scale(1); opacity: 1; } }
  @keyframes hero-draw { from { stroke-dashoffset: var(--draw-length, 400); } to { stroke-dashoffset: 0; } }
  @keyframes float-a { 0%,100% { transform: translate3d(0,0,0); } 50% { transform: translate3d(0,-.875rem,0); } }
  @keyframes float-b { 0%,100% { transform: translate3d(0,0,0) rotate(0); } 50% { transform: translate3d(0,-1.25rem,0) rotate(3deg); } }
  @keyframes strip-scroll { from { transform: translate3d(0,0,0); } to { transform: translate3d(-50%,0,0); } }

  html.js .hero__line > span { animation: hero-line var(--dur-title) var(--ease) both; }
  html.js .hero__line--1 > span { animation-delay: 80ms; }
  html.js .hero__line--2 > span { animation-delay: 180ms; }
  html.js .hero__line--3 > span { animation-delay: 280ms; }
  html.js .brand__mark { animation: hero-mark 900ms var(--ease) both; }
  html.js .hero__badge { animation: hero-fade 700ms var(--ease) both; animation-delay: 40ms; }
  html.js .hero__text { animation: hero-fade 800ms var(--ease) both; animation-delay: 560ms; }
  html.js .hero__actions { animation: hero-fade 800ms var(--ease) both; animation-delay: 660ms; }
  html.js .shape { animation: hero-shape var(--dur-shape) var(--ease) both; }
  html.js .shape--card { animation-delay: 240ms; } html.js .shape--circle { animation-delay: 420ms; } html.js .shape--ring { animation-delay: 520ms; } html.js .shape--square { animation-delay: 640ms; } html.js .shape--triangle { animation-delay: 750ms; } html.js .shape--pill { animation-delay: 860ms; } html.js .shape--line { animation-delay: 900ms; }
  html.js .shape--line path { stroke-dasharray: var(--draw-length, 400); animation: hero-draw 700ms var(--ease) both; animation-delay: 1150ms; }
  html.js .shape.is-floating { animation: float-a var(--float-a) ease-in-out infinite; }
  html.js .shape--circle.is-floating, html.js .shape--pill.is-floating { animation: float-b var(--float-b) ease-in-out infinite; }
  html.js .shape--ring.is-floating { animation: float-a var(--float-b) ease-in-out infinite; }

  html.js .coast__path { stroke-dasharray: var(--coast-length, 1200); stroke-dashoffset: var(--coast-offset, var(--coast-length, 1200)); opacity: 1; }
  html.js .coast__dot circle { transform-box: fill-box; transform-origin: center; transform: scale(0); opacity: 0; transition: transform 420ms var(--ease), opacity 320ms var(--ease), fill 260ms var(--ease); }
  html.js .coast__dot text { opacity: 0; transition: opacity 380ms var(--ease); }
  html.js .coast__dot.is-lit circle { transform: scale(1); opacity: 1; fill: var(--brand-strong); stroke: var(--brand); }
  html.js .coast__dot.is-lit text { opacity: 1; }

  @media (max-width: 45rem) {
    html.js .shape.is-floating, html.js .shape--circle.is-floating, html.js .shape--pill.is-floating, html.js .shape--ring.is-floating { animation: none; }
  }

  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation-duration: .001ms; animation-iteration-count: 1; transition-duration: .001ms; scroll-behavior: auto; }
    html.js [data-reveal], html.js [data-reveal].is-visible { opacity: 1; transform: none; }
    html.js .hero__line > span, html.js .hero__badge, html.js .hero__text, html.js .hero__actions, html.js .shape, html.js .brand__mark { opacity: 1; transform: none; animation: none; }
    html.js .shape--line path { stroke-dasharray: none; stroke-dashoffset: 0; animation: none; }
    html.js .coast__path { stroke-dasharray: none; stroke-dashoffset: 0; }
    html.js .coast__dot circle, html.js .coast__dot text { opacity: 1; transform: none; }
    .strip__track { animation: none; }
  }
}

@layer utilities {
  @media print {
    .site-head, .site-foot, .strip, .shapes, .section--cta, .skip-link, .content-aside, .article-aside { display: none; }
    body { color: #000; background: #fff; }
    .wrap { width: auto; }
    a[href^="/"]::after { content: " (" attr(href) ")"; font-size: .85em; color: #555; }
  }
}