@font-face{font-family:'Outfit';src:url('/fonts/outfit-latin.woff2') format('woff2');font-weight:400 700;font-style:normal;font-display:swap;unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Outfit';src:url('/fonts/outfit-latin-ext.woff2') format('woff2');font-weight:400 700;font-style:normal;font-display:swap;unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'IBM Plex Sans';src:url('/fonts/ibm-plex-sans-latin.woff2') format('woff2');font-weight:400 700;font-style:normal;font-display:swap;unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'IBM Plex Sans';src:url('/fonts/ibm-plex-sans-latin-ext.woff2') format('woff2');font-weight:400 700;font-style:normal;font-display:swap;unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
:root{--radius-sm:8px;--radius-md:11px;--radius-lg:18px;--radius-field:18px;--radius-xl:20px;--radius-2xl:28px;--radius-pill:999px;--radius-squircle:22.37%;--space-xs:4px;--space-sm:8px;--space-md:12px;--space-base:16px;--space-lg:20px;--space-xl:24px;--space-xxl:32px;--ason-gap:8px;--satir-y-sik:5px;--satir-y-orta:8px;--satir-y-genis:12px;--satir-x:12px;--primary:#4f63e0;--primary-focus:#3f52d6;--on-primary:#ffffff;--font-outfit:'Outfit', 'Outfit Fallback';--font-plex-sans:'IBM Plex Sans', 'IBM Plex Sans Fallback';--font-code:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;--text-caption2:0.6875rem;--text-caption2--line-height:0.8125rem;--text-caption2--letter-spacing:0.006em;--text-caption1:0.6875rem;--text-caption1--line-height:0.8125rem;--text-caption1--letter-spacing:0.006em;--text-footnote:0.75rem;--text-footnote--line-height:1rem;--text-footnote--letter-spacing:0em;--text-subhead:0.8125rem;--text-subhead--line-height:1.125rem;--text-subhead--letter-spacing:-0.006em;--text-callout:0.875rem;--text-callout--line-height:1.1875rem;--text-callout--letter-spacing:-0.011em;--text-body:0.9375rem;--text-body--line-height:1.25rem;--text-body--letter-spacing:-0.016em;--text-title3:1.125rem;--text-title3--line-height:1.4375rem;--text-title3--letter-spacing:-0.025em;--text-title2:1.25rem;--text-title2--line-height:1.5625rem;--text-title2--letter-spacing:-0.023em;--text-title1:1.625rem;--text-title1--line-height:2rem;--text-title1--letter-spacing:0.005em;--text-large-title:2rem;--text-large-title--line-height:2.4375rem;--text-large-title--letter-spacing:0.010em;--text-field:1rem;--text-field--line-height:1.25rem;--theme-bg:#f5f5f7;--theme-surface:#ffffff;--theme-surface-2:#f5f5f7;--theme-ink:#1d1d1f;--theme-ink-2:#56565a;--theme-ink-3:#7a7a7a;--theme-ink-4:#a3a3a8;--theme-separator:#e0e0e0;--theme-field:#e0e0e0;--theme-accent:#4f63e0;--theme-accent-press:#3f52d6;--theme-accent-text:#4f63e0;--theme-accent-soft:#eff1fd;--theme-accent-line:#c4cbf5;--theme-on-accent:#ffffff;--theme-danger-ink:#c9241a;--theme-danger-soft:#fff2f1;--theme-danger-line:#ffd1cc;--theme-success-ink:#1f7a35;--theme-success-soft:#eaf9ef;--theme-success-line:#b0e8c2;--theme-warning-ink:#8a5000;--theme-warning-soft:#fff6e9;--theme-warning-line:#ffe0ad;--theme-hover:#eeeef2;--theme-zebra:#f5f5f7;--theme-skeleton:#e9e9ed;--theme-scrim:rgba(0, 0, 0, 0.3);--theme-tooltip-bg:#1d1d1f;--theme-tooltip-ink:#ffffff;--glass-fill:rgba(255, 255, 255, 0.58);--glass-blur:blur(30px) saturate(190%);--glass-rim:linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.35) 38%, rgba(120, 120, 140, 0.22) 100%);--glass-rim-line:linear-gradient(90deg, rgba(255, 255, 255, 0.9), rgba(160, 160, 175, 0.35) 45%, rgba(160, 160, 175, 0.2));--glass-sheen:linear-gradient(180deg, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0) 55%);--glass-rim-lines:linear-gradient(90deg, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.4) 40%, rgba(120, 120, 140, 0.22)), linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(120, 120, 140, 0.2)), linear-gradient(90deg, rgba(200, 200, 210, 0.35), rgba(120, 120, 140, 0.24)), linear-gradient(180deg, rgba(220, 220, 228, 0.5), rgba(120, 120, 140, 0.24));--glass-rim-size:100% 1px, 1px 100%, 100% 1px, 1px 100%;--glass-rim-pos:top left, top left, bottom left, top right;--glass-solid:#ffffff;--glass-hover:rgba(255, 255, 255, 0.55);--glass-fill-float:rgba(255, 255, 255, 0.95);--glass-card-mix:88%;--glass-badge:rgba(0, 0, 0, 0.06);--glass-ambient:radial-gradient(900px 520px at 85% -10%, rgba(79, 99, 224, 0.14), transparent 70%), radial-gradient(700px 520px at -5% 105%, rgba(48, 176, 199, 0.12), transparent 70%);color-scheme:light}
@media (prefers-color-scheme:dark){:root{--theme-bg:#1c1c1e;--theme-surface:#2c2c2e;--theme-surface-2:#3a3a3c;--theme-ink:#f5f5f7;--theme-ink-2:#d1d1d6;--theme-ink-3:#aeaeb2;--theme-ink-4:#8e8e93;--theme-separator:#48484a;--theme-field:#7c7c80;--theme-accent:#4f63e0;--theme-accent-press:#6274e6;--theme-accent-text:#8b98f0;--theme-accent-soft:#33385a;--theme-accent-line:#4d5594;--theme-on-accent:#ffffff;--theme-danger-ink:#ff6961;--theme-danger-soft:#45282a;--theme-danger-line:#7a3a37;--theme-success-ink:#30d158;--theme-success-soft:#213a28;--theme-success-line:#2f6b3e;--theme-warning-ink:#ffb340;--theme-warning-soft:#43341c;--theme-warning-line:#7a5a26;--theme-hover:#3a3a3c;--theme-zebra:#313133;--theme-skeleton:#3a3a3c;--theme-scrim:rgba(0, 0, 0, 0.5);--theme-tooltip-bg:#48484a;--theme-tooltip-ink:#f5f5f7;;color-scheme:dark}}
.stage,.brand-tile{--theme-bg:#f5f5f7;--theme-surface:#ffffff;--theme-surface-2:#f5f5f7;--theme-ink:#1d1d1f;--theme-ink-2:#56565a;--theme-ink-3:#7a7a7a;--theme-ink-4:#a3a3a8;--theme-separator:#e0e0e0;--theme-field:#e0e0e0;--theme-accent:#4f63e0;--theme-accent-press:#3f52d6;--theme-accent-text:#4f63e0;--theme-accent-soft:#eff1fd;--theme-accent-line:#c4cbf5;--theme-on-accent:#ffffff;--theme-danger-ink:#c9241a;--theme-danger-soft:#fff2f1;--theme-danger-line:#ffd1cc;--theme-success-ink:#1f7a35;--theme-success-soft:#eaf9ef;--theme-success-line:#b0e8c2;--theme-warning-ink:#8a5000;--theme-warning-soft:#fff6e9;--theme-warning-line:#ffe0ad;--theme-hover:#eeeef2;--theme-zebra:#f5f5f7;--theme-skeleton:#e9e9ed;--theme-scrim:rgba(0, 0, 0, 0.3);--theme-tooltip-bg:#1d1d1f;--theme-tooltip-ink:#ffffff;color-scheme:light}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--theme-bg);
  color: var(--theme-ink);
  font-family: var(--font-plex-sans), system-ui, sans-serif;
  font-size: var(--text-body);
  line-height: var(--text-body--line-height);
  letter-spacing: var(--text-body--letter-spacing);
  font-weight: 400;
}
h1, h2, h3, .brand-name { font-family: var(--font-outfit), system-ui, sans-serif; font-weight: 700; }
h1 { font-size: var(--text-large-title); line-height: var(--text-large-title--line-height); letter-spacing: var(--text-large-title--letter-spacing); margin: 0 0 8px; }
h2 { font-size: var(--text-title2); line-height: var(--text-title2--line-height); letter-spacing: var(--text-title2--letter-spacing); margin: 32px 0 8px; }
h3 { font-size: var(--text-title3); line-height: var(--text-title3--line-height); letter-spacing: var(--text-title3--letter-spacing); margin: 24px 0 8px; }
p { margin: 0 0 12px; }
em, i { font-style: normal; font-weight: 600; }
strong, b { font-weight: 600; }
a { color: var(--theme-accent-text); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--theme-accent-text); outline-offset: 2px; border-radius: var(--radius-sm); }
code, kbd, samp, pre { font-family: var(--font-code); font-size: var(--text-footnote); line-height: var(--text-footnote--line-height); }
code { background: var(--theme-surface-2); padding: 1px 6px; border-radius: 6px; overflow-wrap: anywhere; }
pre { background: var(--theme-surface-2); padding: 12px 16px; border-radius: var(--radius-md); overflow-x: auto; }
pre code { background: none; padding: 0; }
img, svg { max-width: 100%; }
.lead { font-size: var(--text-title3); line-height: var(--text-title3--line-height); letter-spacing: var(--text-title3--letter-spacing); color: var(--theme-ink-2); margin: 0 0 24px; max-width: 46rem; }
.muted { color: var(--theme-ink-3); }
.small { font-size: var(--text-footnote); line-height: var(--text-footnote--line-height); }
.num { font-variant-numeric: tabular-nums; }
.skip { position: absolute; left: -9999px; top: 8px; }
.skip:focus { left: 16px; z-index: 10; background: var(--theme-surface); padding: 8px 12px; border-radius: var(--radius-sm); }
.top { background: var(--theme-surface); border-bottom: 1px solid var(--theme-separator); }
.top-in { max-width: 1120px; margin: 0 auto; padding: 0 16px; min-height: 56px; display: flex; align-items: center; gap: 8px 24px; flex-wrap: wrap; }
.brand { display: inline-flex; align-items: center; gap: 8px; color: var(--theme-ink); text-decoration: none; }
.brand img { width: 28px; height: 21px; display: block; }
.brand-name { font-size: var(--text-title3); line-height: var(--text-title3--line-height); }
.nav { display: flex; gap: 4px; flex-wrap: wrap; margin: 0; padding: 0; list-style: none; flex: 1 1 auto; }
.nav a { display: inline-flex; align-items: center; min-height: 32px; padding: 0 12px; border-radius: var(--radius-pill); color: var(--theme-ink-2); text-decoration: none; font-weight: 600; }
.nav a:hover { background: var(--theme-hover); }
.nav a[aria-current='page'], .nav a[aria-current='true'] { background: var(--theme-accent-soft); color: var(--theme-accent-text); }
.lang { display: inline-flex; align-items: center; min-height: 32px; padding: 0 12px; border-radius: var(--radius-pill); border: 1px solid var(--theme-separator); color: var(--theme-ink-2); text-decoration: none; font-weight: 600; }
.lang:hover { background: var(--theme-hover); }
@media (max-width: 640px) {
  .top-in { padding: 8px 16px; }
  .nav { order: 3; flex-basis: 100%; }
  .lang { margin-left: auto; }
}
.wrap { max-width: 1120px; margin: 0 auto; padding: 32px 16px 64px; }
.with-side { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 32px; }
@media (max-width: 860px) { .with-side { grid-template-columns: minmax(0, 1fr); gap: 16px; } }
.side { font-size: var(--text-callout); line-height: var(--text-callout--line-height); }
.side ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; position: sticky; top: 16px; }
.side a { display: block; padding: 6px 12px; border-radius: var(--radius-sm); color: var(--theme-ink-2); text-decoration: none; }
.side a:hover { background: var(--theme-hover); }
.side a[aria-current='page'] { background: var(--theme-accent-soft); color: var(--theme-accent-text); font-weight: 600; }
@media (max-width: 860px) { .side ul { position: static; flex-direction: row; flex-wrap: wrap; } }
main { min-width: 0; }
.foot { border-top: 1px solid var(--theme-separator); }
.foot-in { max-width: 1120px; margin: 0 auto; padding: 24px 16px 40px; color: var(--theme-ink-3); font-size: var(--text-footnote); line-height: var(--text-footnote--line-height); }
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap: var(--ason-gap); margin: 0 0 24px; padding: 0; list-style: none; }
.card { background: var(--theme-surface); border-radius: var(--radius-lg); padding: 16px 20px; min-width: 0; }
a.card { display: block; color: inherit; text-decoration: none; }
a.card:hover { background: var(--theme-hover); }
.card h2, .card h3 { margin: 0 0 4px; }
.card p { margin: 0; color: var(--theme-ink-2); }
.box { background: var(--theme-surface); border-radius: var(--radius-lg); padding: 16px 20px; margin: 0 0 16px; }
.box > :last-child { margin-bottom: 0; }
.rules { margin: 0 0 16px; padding-left: 20px; }
.rules li { margin: 0 0 6px; }
.tbl-wrap { overflow-x: auto; background: var(--theme-surface); border-radius: var(--radius-lg); margin: 0 0 16px; }
table.tbl { width: 100%; border-collapse: collapse; font-size: var(--text-callout); line-height: var(--text-callout--line-height); }
.tbl th, .tbl td { text-align: left; padding: var(--satir-y-genis) var(--satir-x); border-bottom: 1px solid var(--theme-separator); vertical-align: top; }
.tbl tr:last-child td { border-bottom: 0; }
.tbl th { color: var(--theme-ink-3); font-weight: 600; font-size: var(--text-footnote); line-height: var(--text-footnote--line-height); }
.tbl td.r, .tbl th.r { text-align: right; font-variant-numeric: tabular-nums; }
.chip { display: inline-flex; align-items: center; min-height: 24px; padding: 0 10px; border-radius: var(--radius-pill); background: var(--theme-surface-2); font-size: var(--text-footnote); line-height: var(--text-footnote--line-height); font-weight: 600; }
.chip.no { color: var(--theme-danger-ink); background: var(--theme-danger-soft); }
.chip.ok { color: var(--theme-success-ink); background: var(--theme-success-soft); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; padding: 0; list-style: none; }
.swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 13rem), 1fr)); gap: var(--ason-gap); margin: 0 0 16px; padding: 0; list-style: none; }
.swatch { background: var(--theme-surface); border-radius: var(--radius-md); padding: 8px; display: flex; gap: 10px; align-items: center; min-width: 0; }
.swatch i { flex: 0 0 40px; height: 40px; border-radius: var(--radius-sm); outline: 1px solid var(--theme-separator); outline-offset: -1px; }
.swatch div { min-width: 0; }
.swatch b { display: block; font-size: var(--text-footnote); line-height: var(--text-footnote--line-height); }
.swatch span { display: block; font-size: var(--text-caption1); line-height: var(--text-caption1--line-height); color: var(--theme-ink-3); overflow-wrap: anywhere; }
.accent-hero { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.accent-hero i { width: 96px; height: 96px; border-radius: var(--radius-lg); background: var(--primary); display: block; }
.type-row { padding: 12px 0; border-bottom: 1px solid var(--theme-separator); }
.type-row:last-child { border-bottom: 0; }
.type-row .lbl { display: block; color: var(--theme-ink-3); font-size: var(--text-caption1); line-height: var(--text-caption1--line-height); margin-bottom: 4px; }
.type-row p { margin: 0; overflow-wrap: anywhere; }
.derived { display: inline-block; margin-left: 6px; padding: 0 7px; border-radius: var(--radius-pill); background: var(--theme-surface-2); color: var(--theme-ink-3); font-size: var(--text-caption2); line-height: var(--text-caption2--line-height); }
.bar { display: block; height: 12px; background: var(--primary); border-radius: 3px; }
.radius-demo { width: 72px; height: 48px; background: var(--theme-accent-soft); outline: 1px solid var(--theme-accent-line); outline-offset: -1px; }
.stage { border-radius: var(--radius-lg); padding: 24px; margin: 0 0 16px; color: var(--theme-ink); background: var(--theme-bg); outline: 1px solid var(--theme-separator); outline-offset: -1px; overflow-x: auto; }
.stage .ason-am-menu { position: static; animation: none; display: inline-block; vertical-align: top; }
.stage .ason-am-trigger { margin-right: 12px; }
.stage .ason-pf-frame { max-width: 28rem; }
.stage table { width: 100%; border-collapse: collapse; background: var(--theme-surface); border-radius: var(--radius-lg); }
.stage th, .stage td { text-align: left; padding-left: var(--satir-x); padding-right: var(--satir-x); border-bottom: 1px solid var(--theme-separator); }
.stage th { color: var(--theme-ink-3); font-weight: 600; font-size: var(--text-footnote); }
.stage tr:last-child td { border-bottom: 0; }
.stage td.r, .stage th.r { text-align: right; font-variant-numeric: tabular-nums; }
.stage .gap { height: var(--ason-gap); }
.stage .ason-tile { text-decoration: none; }
.glass-stage { position: relative; border-radius: var(--radius-lg); padding: 32px 24px; overflow: hidden; margin: 0 0 16px; background:
  radial-gradient(circle at 20% 30%, var(--theme-accent-line), transparent 45%),
  radial-gradient(circle at 80% 70%, var(--theme-success-line), transparent 40%),
  var(--theme-bg); }
.glass-sample { position: relative; max-width: 22rem; padding: 20px; border-radius: var(--radius-lg); background: var(--glass-fill); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .glass-sample { background: var(--glass-solid); } }
.curve { display: block; width: 100%; max-width: 220px; height: auto; background: var(--theme-surface); border-radius: var(--radius-md); }
.curve .grid { stroke: var(--theme-separator); stroke-width: 1; fill: none; }
.curve .line { stroke: var(--primary); stroke-width: 2.5; fill: none; }
.curve text { fill: var(--theme-ink-3); font-size: 10px; font-family: var(--font-plex-sans), sans-serif; }
.motion-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap: var(--ason-gap); margin: 0 0 16px; padding: 0; list-style: none; }
.track { position: relative; container-type: inline-size; height: 32px; margin: 12px 0 8px; background: var(--theme-surface-2); border-radius: var(--radius-pill); }
.dot { position: absolute; top: 4px; left: 4px; width: 24px; height: 24px; border-radius: 50%; background: var(--primary); transform: translateX(0); }
.motion-demo.play .dot { transform: translateX(calc(100cqw - 32px)); }
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 32px; padding: 0 16px; border: 0; border-radius: var(--radius-pill); background: var(--primary); color: var(--on-primary); font: inherit; font-weight: 600; cursor: pointer; }
.btn:hover { background: var(--primary-focus); }
.btn-small { min-height: 24px; padding: 0 10px; font-size: var(--text-footnote); }
.meta { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 0 0 16px; padding: 0; list-style: none; color: var(--theme-ink-2); font-size: var(--text-callout); }
.meta b { color: var(--theme-ink-3); font-weight: 600; margin-right: 4px; }
.guide h3 { margin-top: 20px; }
.guide ul, .guide ol { padding-left: 22px; margin: 0 0 12px; }
.guide li { margin: 0 0 6px; }
.guide .meta { padding-left: 0; }
.pro { border-top: 1px solid var(--theme-separator); margin-top: 32px; padding-top: 8px; }
.brand-tile { background: #ffffff; border-radius: var(--radius-lg); padding: 24px; display: flex; align-items: center; justify-content: center; outline: 1px solid var(--theme-separator); outline-offset: -1px; }
.brand-tile img { display: block; height: auto; }
@media (prefers-reduced-motion: reduce) {
  html:focus-within { scroll-behavior: auto; }
}