/* ═══════════════════════════════════════════════════════════════════════════
   IADEOS · site.css — the page layer shared by every artboard of the site.
   Components come from ds/iadeos/components/bundle.css; this file only lays
   out pages. Palette: white ~80 · ink ~15 · blue ~5. No shadow, 1px lines,
   radii 2 / 6 / 10, IBM Plex. Layout properties are never animated.
   ═══════════════════════════════════════════════════════════════════════════ */
html { scroll-padding-top: 88px; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: no-preference) { html[data-motion="on"] { scroll-behavior: smooth; } }
body { margin: 0; background: #FFFFFF; }
.m *, .m *::before, .m *::after { box-sizing: border-box; }
.m { font-family: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif; color: #0B1220; background: #FFFFFF; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; font-size: 16px; line-height: 1.55; }
.m h1, .m h2, .m h3, .m p { text-wrap: pretty; }
.m a:not(.ia-btn) { color: #0F4FC4; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.m a:not(.ia-btn):hover { color: #0B1220; }
.m :focus-visible { outline: 3px solid #D6E4FF; outline-offset: 2px; }
.m-wrap { max-width: 1360px; margin: 0 auto; padding-left: 24px; padding-right: 24px; }
.m-sec { padding-top: 112px; padding-bottom: 96px; }
.m-sec--tight { padding-top: 88px; padding-bottom: 80px; }
.m-band { background: #F6F8FB; border-top: 1px solid #E3E7EE; border-bottom: 1px solid #E3E7EE; }
.m-rule-top { border-top: 1px solid #E3E7EE; }
.m-skip { position: absolute; left: 16px; top: -64px; z-index: 2000; padding: 12px 16px; background: #0B1220; color: #FFFFFF !important; border-radius: 6px; text-decoration: none; }
.m-skip:focus { top: 12px; }

/* section heads: label in ink with one blue square (never blue micro-text) */
.m-head { display: flex; flex-direction: column; gap: 16px; max-width: 900px; padding-top: 20px; border-top: 1px solid #0B1220; }
.m-label { display: inline-flex; align-items: center; gap: 10px; margin: 0; font: 500 12px/1.4 'IBM Plex Mono', ui-monospace, Consolas, monospace; letter-spacing: .08em; text-transform: uppercase; color: #0B1220; }
.m-label::before { content: ""; flex: none; width: 8px; height: 8px; background: #176BFD; border-radius: 0; }
.m-label-n { color: #4A5363; }
.m-h1 { margin: 0; }
.m-h2 { margin: 0; font-weight: 300; font-size: clamp(30px, 3.4vw, 44px); line-height: 1.08; letter-spacing: -.03em; }
.m-h3 { margin: 0; font-size: 26px; font-weight: 300; line-height: 1.2; letter-spacing: -.02em; }
/* measure: ≤ 75 characters per line, measured (Plex ≈ 1.29 characters per ch) */
.m-lede { margin: 0; max-width: 54ch; font-size: 18px; line-height: 1.6; color: #4A5363; }
.m-body { max-width: 56ch; font-size: 16px; line-height: 1.6; color: #4A5363; margin: 0; }
.m-small { max-width: 58ch; font-size: 14px; line-height: 1.55; color: #4A5363; margin: 0; }
.m-mono { font: 400 12px/1.5 'IBM Plex Mono', ui-monospace, monospace; color: #4A5363; letter-spacing: .02em; }
.m-cap { font: 500 11px/1.3 'IBM Plex Mono', ui-monospace, monospace; letter-spacing: .08em; text-transform: uppercase; color: #4A5363; }
.m-ink .m-label, .m-hero--ink .m-label { color: #FFFFFF; }
.m-ink .m-label::before, .m-hero--ink .m-label::before { background: #D6E4FF; }
.m-ink .m-label-n, .m-hero--ink .m-label-n { color: rgba(255,255,255,.72); }
.m-ink .m-head { border-top-color: #FFFFFF; }

/* header + nav */
.m-top { position: sticky; top: 0; z-index: 40; background: rgba(255,255,255,.88); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-bottom: 1px solid #E3E7EE; }
.m-nav { height: 64px; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.m-brand { display: inline-flex; align-items: center; min-height: 44px; }
.m-links { display: flex; gap: 24px; align-items: center; }
.m-nav-link { position: relative; display: inline-flex; justify-content: center; min-width: 44px; color: #0B1220 !important; text-decoration: none; font-size: 14px; line-height: 20px; padding: 12px 0; white-space: nowrap; }
.m-nav-link::after { content: ""; position: absolute; left: 0; right: 0; bottom: 6px; height: 1px; background: #0B1220; transform: scaleX(0); transform-origin: 0 50%; transition: transform var(--ia-spring-fluid-ms, 380ms) var(--ia-spring-fluid, cubic-bezier(.16,1,.3,1)); }
.m-nav-link:hover::after, .m-nav-link[aria-current="true"]::after, .m-nav-link[aria-current="page"]::after { transform: scaleX(1); }
.m-nav-link[aria-current="page"] { font-weight: 500; }   /* scroll-spy ("true") moves only the underline: a weight change would reflow the row */
.m-nav-right { display: flex; align-items: center; gap: 12px; }
.m-menu { display: none !important; }
.m-progress { height: 2px; background: #176BFD; transform-origin: 0 50%; transform: scaleX(0); }
.m-mobile { display: flex; flex-direction: column; padding: 8px 24px 16px; border-top: 1px solid #E3E7EE; background: #FFFFFF; }
.m-mobile .m-nav-link { padding: 14px 0; border-bottom: 1px solid #E3E7EE; }
.m-mobile .m-nav-link::after { display: none; }
@media (max-width: 1320px) { .m-links { gap: 18px; } }
@media (max-width: 1200px) { .m-links, .m-nav-right .ia-strig { display: none; } .m-menu { display: inline-flex !important; } }
.m-nav-login { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; padding: 0 4px; color: #0B1220 !important; font-size: 14px; line-height: 20px; text-decoration: none; white-space: nowrap; }
.m-nav-login:hover, .m-nav-login[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 6px; }
.m-nav-login:focus-visible { outline: 3px solid #D6E4FF; outline-offset: 2px; border-radius: 2px; }
@media (max-width: 600px) { .m-nav-login { display: none; } }
.m-head-tools { margin-top: 24px; }
.m-foot-tools { margin: 4px 0 6px; }

/* grids */
.m-hero-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 56px; align-items: start; }
.m-split { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 56px; align-items: start; }
.m-split--even { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.m-auto { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(var(--min, 280px), 100%), 1fr)); gap: var(--gap, 24px); }
@media (max-width: 1080px) { .m-hero-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 960px) { .m-split, .m-split--even { grid-template-columns: minmax(0, 1fr); } .m-sticky { position: relative !important; top: 0 !important; } .m-step { min-height: 0 !important; } }

/* reveal (opacity + transform only) */
.m-reveal { opacity: 0; transform: translate3d(0, 20px, 0); transition: opacity .6s cubic-bezier(.22,1,.36,1), transform .6s cubic-bezier(.22,1,.36,1); }
.m-reveal.is-in { opacity: 1; transform: none; }
.m-reveal--soft { transform: none; }
html[data-motion="still"] .m-reveal { opacity: 1; transform: none; transition: none; }

/* hero */
.m-hero { position: relative; overflow: hidden; border-bottom: 1px solid #E3E7EE; background: #F6F8FB; }
/* the light is anchored in px, never to the hero height: fonts or imports changing the height cannot move it (CLS 0) */
.m-hero-light { position: absolute; top: -180px; right: -10%; width: 70%; height: 1180px; z-index: 1; pointer-events: none; background: radial-gradient(closest-side, rgba(23,107,253,.10), rgba(23,107,253,0)); }
.m-hero-in { position: relative; z-index: 5; padding-top: 64px; padding-bottom: 88px; }
.m-hero-copy { display: flex; flex-direction: column; gap: 26px; max-width: 1180px; margin-bottom: 48px; }
.m-hero-ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; }
.m-proof { display: flex; flex-direction: column; gap: 10px; padding-top: 20px; border-top: 1px solid #E3E7EE; }
.m-proof-row { display: flex; flex-wrap: wrap; gap: 8px; }
.m-hero--ink { background: #0B1220; color: #FFFFFF; border-bottom-color: #0B1220; }
.m-hero--ink .m-lede { color: rgba(255,255,255,.76); }
.m-hero--ink .m-proof { border-top-color: rgba(255,255,255,.18); }
.m-hero--ink .m-cap { color: rgba(255,255,255,.72); }
.m-hero--ink .m-hero-light { background: radial-gradient(closest-side, rgba(23,107,253,.22), rgba(23,107,253,0)); }
.m-hero--ink .m-hero-copy { --text: #FFFFFF; --ground: #0B1220; color: #FFFFFF; }
.m-hero--ink .ia-kh-mark--outline { border-color: rgba(255,255,255,.64); }
.m-hero--ink a:not(.ia-btn) { color: #D6E4FF; }

/* the AHA desk */
.m-desk { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 48px; align-items: start; margin-top: 40px; }
@media (max-width: 1080px) { .m-desk { grid-template-columns: minmax(0, 1fr); } }
.m-desk-notes { display: grid; gap: 16px; }
.m-desk-notes li { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 8px; font-size: 15px; line-height: 1.55; color: #4A5363; }
.m-desk-notes span:first-child { font: 500 12px/1.9 'IBM Plex Mono', monospace; color: #0B1220; }

/* iceberg list, steps, cards */
.m-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; border-top: 1px solid #0B1220; }
.m-list li { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 12px; padding: 14px 0; border-bottom: 1px solid #E3E7EE; }
.m-list li > span:first-child { font: 400 12px/1.6 'IBM Plex Mono', ui-monospace, monospace; color: #4A5363; }
.m-step { display: flex; flex-direction: column; gap: 14px; padding: 8px 0 48px; border-top: 1px solid #0B1220; min-height: 380px; }
.m-step .m-label { padding-top: 12px; }
.m-step { position: relative; }
.m-step::before { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 2px; background: #176BFD; transform: scaleX(0); transform-origin: 0 50%; transition: transform 420ms cubic-bezier(.2, .7, .2, 1); }
.m-step[aria-current="step"]::before { transform: scaleX(1); }
@media (prefers-reduced-motion: reduce) { .m-step::before { transition: none; } }
html[data-motion="still"] .m-step::before { transition: none; }
.m-chip-raw { padding: 10px 12px; border: 1px solid #E3E7EE; border-radius: 6px; background: #F6F8FB; font: 400 12px/1.6 'IBM Plex Mono', ui-monospace, monospace; color: #0B1220; overflow-wrap: anywhere; }
.m-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.m-card { border: 1px solid #C9D0DB; border-radius: 10px; background: #FFFFFF; transition: border-color .15s; }
a.m-card { color: #0B1220 !important; text-decoration: none; }
a.m-card:hover { border-color: #0B1220; }
a.m-card:active { transform: translateY(1.5px) scale(.985); transition-duration: 0ms; }
.m-sticky { position: sticky; top: 104px; }
.m-table { width: 100%; border-collapse: collapse; font-size: 15px; }
.m-table th { padding: 0 12px 10px 0; border-bottom: 1px solid #0B1220; text-align: left; font: 500 11px/1.3 'IBM Plex Mono', ui-monospace, monospace; letter-spacing: .08em; text-transform: uppercase; color: #4A5363; vertical-align: bottom; }
.m-table td { padding: 14px 12px 14px 0; border-bottom: 1px solid #E3E7EE; vertical-align: top; }
.m-table td.is-mono { font: 400 12px/1.5 'IBM Plex Mono', ui-monospace, monospace; white-space: nowrap; }
.m-table td.is-num, .m-table th.is-num { text-align: right; }

/* comparison: marks by form — filled = var, outline = kullanıcıya bağlı, dash = yok */
.m-cmp th:not(:first-child), .m-cmp td:not(:first-child) { text-align: center; width: 18%; }
.m-cmp tbody th { padding: 14px 12px 14px 0; border-bottom: 1px solid #E3E7EE; font: 400 15px/1.45 'IBM Plex Sans', sans-serif; letter-spacing: 0; text-transform: none; color: #0B1220; text-align: left; vertical-align: top; }
.m-cmp thead th:last-child { color: #0B1220; }
.m-cmp td:last-child, .m-cmp th:last-child { background: #EEF4FF; }
.m-mark { display: inline-flex; flex-direction: column; align-items: center; gap: 6px; font: 400 12px/1.3 'IBM Plex Mono', monospace; color: #4A5363; }
.m-mark i { display: block; width: 14px; height: 14px; border-radius: 2px; }
.m-mark--var i { background: #0B1220; }
.m-mark--kismen i { border: 2px solid #0B1220; }
.m-mark--yok i { width: 14px; height: 2px; margin: 6px 0; background: #4A5363; }

/* zaman track: ticks move with transform, never left */
.m-track { position: relative; height: 120px; margin-top: 56px; border-bottom: 1px solid #0B1220; }
.m-tick { position: absolute; top: 0; bottom: 0; width: 1px; background: #0B1220; left: calc(var(--s) * 100%); transform: translate3d(calc(var(--k, 0) * var(--d) * var(--tw, 0) * 1px), 0, 0); opacity: calc(1 - var(--k, 0) * .8); will-change: transform; }

/* security bento */
.m-bento { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 24px; align-items: start; }
@media (max-width: 1080px) { .m-bento { grid-template-columns: minmax(0, 1fr); } }
.m-bento-groups { display: grid; gap: 24px; }
.m-bento-group { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 720px) { .m-bento-group { grid-template-columns: minmax(0, 1fr); } }
.m-tile { padding: 18px 20px; display: flex; flex-direction: column; gap: 8px; }
.m-tile p { margin: 0; font-size: 14.5px; line-height: 1.5; color: #4A5363; }

/* ink band + footer */
.m-ink { position: relative; overflow: hidden; background: #0B1220; color: #FFFFFF; }
.m-ink a:not(.ia-btn) { color: #D6E4FF; }
.m-ink a:not(.ia-btn):hover { color: #FFFFFF; }
.m-ink .m-lede { color: rgba(255,255,255,.76); }
.m-stats { margin: 64px 0 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: 0; }
.m-stat { display: flex; flex-direction: column; gap: 8px; padding: 24px 24px 24px 0; border-top: 1px solid rgba(255,255,255,.24); }
.m-stat dt { order: 2; font-size: 16px; line-height: 1.4; }
.m-stat dd { margin: 0; }
.m-stat .m-stat-n { order: 1; font: 300 clamp(36px, 3.9vw, 52px)/1 'IBM Plex Mono', ui-monospace, monospace; letter-spacing: -.03em; white-space: nowrap; }
.m-stat .m-stat-src { order: 3; font: 400 12px/1.4 'IBM Plex Mono', ui-monospace, monospace; color: rgba(255,255,255,.72); }
.m-foot { background: #0B1220; color: #FFFFFF; position: relative; overflow: hidden; }
.m-foot a:not(.ia-btn) { color: #D6E4FF; }
.m-foot a:not(.ia-btn):hover { color: #FFFFFF; }
.m-foot-in { position: relative; z-index: 2; padding-top: 72px; padding-bottom: 40px; display: flex; flex-direction: column; gap: 48px; }
.m-foot nav, .m-foot-col { display: flex; flex-direction: column; gap: 0; font-size: 14px; }
.m-foot nav a, .m-foot-col > span:not(.m-cap) { display: inline-flex; align-items: center; min-height: 44px; }
.m-foot .m-cap { color: rgba(255,255,255,.72); margin-bottom: 4px; }
.m-foot-legal { display: flex; flex-direction: column; gap: 10px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,.12); font-size: 12px; line-height: 1.6; color: rgba(255,255,255,.72); }
.m-foot-legal p { margin: 0; max-width: 58ch; }
.m-foot-notes { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 32ch), 1fr)); gap: 8px 40px; }
.m-foot-notes li { max-width: 58ch; }

/* faq */
.m-faq { border-bottom: 1px solid #E3E7EE; }
.m-faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 24px; align-items: center; min-height: 64px; padding: 16px 0; font-size: 18px; line-height: 1.4; }
.m-faq summary::-webkit-details-marker { display: none; }
.m-faq-plus { flex: none; display: inline-grid; place-items: center; width: 44px; height: 44px; transition: transform .15s; }
.m-faq[open] .m-faq-plus { transform: rotate(45deg); }
.m-faq p { margin: 0 0 20px; max-width: 56ch; line-height: 1.6; color: #4A5363; }

/* closing */
.m-close { position: relative; overflow: hidden; border-top: 1px solid #E3E7EE; }
.m-close-grid { position: relative; z-index: 5; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(480px, 100%), 1fr)); gap: 48px; align-items: center; padding-top: 120px; padding-bottom: 120px; }
.m-close-panel { background: #FFFFFF; border: 1px solid #E3E7EE; border-radius: 10px; padding: 40px; display: flex; flex-direction: column; gap: 20px; }
.m-close-art { width: min(440px, 100%); height: auto; display: block; justify-self: center; }
@media (max-width: 640px) { .m-close-grid { padding-top: 72px; padding-bottom: 72px; gap: 32px; } .m-close-art { width: min(240px, 64%); } .m-close-panel { padding: 28px 22px; } .m-sec { padding-top: 80px; padding-bottom: 72px; } }

/* sub-page hero */
.m-page-head { padding-top: 64px; padding-bottom: 56px; border-bottom: 1px solid #E3E7EE; background: #F6F8FB; position: relative; overflow: hidden; }
.m-page-head .m-h1 { font-weight: 300; font-size: clamp(40px, 5.2vw, 72px); line-height: 1.02; letter-spacing: -.04em; max-width: 18ch; }
.m-crumbs { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0 0 24px; padding: 0; list-style: none; font-size: 14px; }
.m-crumbs li + li::before { content: "/"; margin-right: 8px; color: #4A5363; }
.m-crumbs a { display: inline-flex; min-height: 44px; align-items: center; }
.m-crumbs [aria-current] { color: #4A5363; }

/* tools page */
.m-tool { padding-top: 72px; padding-bottom: 72px; border-bottom: 1px solid #E3E7EE; }
.m-tool-head { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 32px; align-items: end; margin-bottom: 32px; }
@media (max-width: 960px) { .m-tool-head { grid-template-columns: minmax(0, 1fr); } }
.m-toc { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 32px; }
.m-toc a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; border: 1px solid #C9D0DB; border-radius: 6px; background: #FFFFFF; color: #0B1220 !important; text-decoration: none; font-size: 14px; }
.m-toc a:hover { border-color: #0B1220; }

/* blog */
.m-filter { display: flex; flex-wrap: wrap; gap: 8px; }
.m-filter button { min-height: 44px; padding: 0 14px; border: 1px solid #C9D0DB; border-radius: 6px; background: #FFFFFF; color: #0B1220; font: 400 14px/1 'IBM Plex Sans', sans-serif; cursor: pointer; }
.m-filter button[aria-pressed="true"] { background: #0B1220; border-color: #0B1220; color: #FFFFFF; }
.m-posts { list-style: none; margin: 32px 0 0; padding: 0; display: grid; border-top: 1px solid #0B1220; }
.m-post { display: grid; grid-template-columns: 160px minmax(0, 1fr) 120px; gap: 24px; padding: 28px 0; border-bottom: 1px solid #E3E7EE; align-items: start; }
@media (max-width: 860px) { .m-post { grid-template-columns: minmax(0, 1fr); gap: 8px; } }
.m-post h2 { margin: 0; font: 400 24px/1.25 'IBM Plex Sans', sans-serif; letter-spacing: -.01em; }
.m-post h2 a { color: #0B1220 !important; text-decoration: none; }
.m-post h2 a:hover { text-decoration: underline; }
.m-post p { margin: 8px 0 0; max-width: 56ch; color: #4A5363; line-height: 1.6; }
.m-post-meta { font: 400 12px/1.6 'IBM Plex Mono', monospace; color: #4A5363; }

/* article */
.m-article { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: 64px; align-items: start; }
@media (max-width: 1000px) { .m-article { grid-template-columns: minmax(0, 1fr); } }
.m-prose { max-width: 56ch; font-size: 18px; line-height: 1.7; color: #0B1220; }
.m-prose h2 { margin: 48px 0 12px; font: 400 28px/1.2 'IBM Plex Sans', sans-serif; letter-spacing: -.015em; }
.m-prose h3 { margin: 32px 0 8px; font: 500 19px/1.35 'IBM Plex Sans', sans-serif; }
.m-prose p { margin: 0 0 18px; }
.m-prose ul, .m-prose ol { margin: 0 0 18px; padding-left: 22px; }
.m-prose li { margin: 6px 0; }
.m-prose blockquote { margin: 24px 0; padding: 4px 0 4px 20px; border-left: 2px solid #0B1220; color: #4A5363; }
.m-aside { position: sticky; top: 104px; display: grid; gap: 16px; }
.m-aside-box { padding: 20px; border: 1px solid #E3E7EE; border-radius: 10px; background: #FFFFFF; }
.m-sources { margin: 0; padding-left: 20px; max-width: 56ch; font-size: 14px; line-height: 1.6; color: #4A5363; }

/* contact page */
.m-contact { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 56px; align-items: start; }
@media (max-width: 1000px) { .m-contact { grid-template-columns: minmax(0, 1fr); } }
.m-steps3 { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; border-top: 1px solid #0B1220; }
.m-steps3 li { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 12px; padding: 18px 0; border-bottom: 1px solid #E3E7EE; }
.m-steps3 b { font: 500 13px/1.6 'IBM Plex Mono', monospace; }

/* motion off: everything that was going to move is already in place */
@media (prefers-reduced-motion: reduce) { .m-reveal { opacity: 1; transform: none; transition: none; } .m-faq-plus, .m-nav-link::after { transition: none; } .m-tick { will-change: auto; } }

/* comparison on phones: each capability becomes a card with three labelled marks */
@media (max-width: 760px) {
  .m-cmp thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .m-cmp, .m-cmp tbody, .m-cmp tr { display: block; width: 100%; }
  .m-cmp tbody tr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px 8px; padding: 16px 0; border-bottom: 1px solid #E3E7EE; }
  .m-cmp tbody tr:first-child { border-top: 1px solid #0B1220; }
  .m-cmp tbody th { grid-column: 1 / -1; padding: 0; border: 0; }
  .m-cmp tbody td { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; width: auto !important; padding: 8px; border: 0; border-radius: 6px; background: #FFFFFF; text-align: left !important; }
  .m-cmp tbody td::before { content: attr(data-label); font: 500 10.5px/1.3 'IBM Plex Mono', monospace; letter-spacing: .06em; text-transform: uppercase; color: #4A5363; }
  .m-cmp tbody td:last-child { background: #EEF4FF; }
  .m-cmp .m-mark { align-items: flex-start; }
}

/* plain bullet list (legal and long-form): ink squares, the brand's marker */
.m-ul { margin: 0 0 16px; padding: 0; list-style: none; display: grid; gap: 8px; }
.m-ul li { position: relative; padding-left: 18px; max-width: 58ch; font-size: 16px; line-height: 1.6; color: #4A5363; }
.m-ul li::before { content: ""; position: absolute; left: 2px; top: .68em; width: 6px; height: 6px; background: #0B1220; }

/* phone: deterministic hero actions (no wrap that depends on font metrics), no header CTA (hero and dock carry it), readable cells */
@media (max-width: 480px) {
  .m-hero-ctas { flex-direction: column; align-items: flex-start; }
  .m-nav-right [data-nav-cta] { display: none; }
}
/* phone: headline → proven finding → the action, then the explanation (the first screen carries identity, proof and the CTA) */
@media (max-width: 760px) {
  .m-hero-copy { margin-bottom: 28px; }
  .m-hero-ctas { order: -1; }
}
@media (max-width: 760px) { .m-cmp tbody td { text-align: left; } }

/* phone AHA: the first proven finding inside the first screen (the full hero scene sits below the fold on phones).
   Every part holds its place from the first paint; only opacity and transform change (no layout shift). */
.m-aha { display: none; }
@media (max-width: 760px) {
  .m-aha { display: grid; gap: 8px; padding: 14px 14px 12px; border: 1px solid #0B1220; border-radius: 10px; background: #FFFFFF; color: #0B1220; position: relative; overflow: hidden; }
  .m-hero--ink .m-aha { background: #0B1220; border-color: rgba(255,255,255,.4); color: #FFFFFF; }
  .m-aha-head { display: flex; align-items: center; justify-content: space-between; }
  .m-aha-k { font: 500 11px/1.3 'IBM Plex Mono', monospace; letter-spacing: .08em; text-transform: uppercase; }
  .m-aha-scan { position: absolute; left: 0; right: 0; top: 0; height: 2px; background: #176BFD; transform: scaleX(0); transform-origin: 0 50%; }
  .m-aha-desc { margin: 0; font-size: 16px; line-height: 1.4; }
  .m-aha-nums { display: flex; flex-wrap: wrap; gap: 4px 14px; font: 400 14px/1.4 'IBM Plex Sans', sans-serif; color: #4A5363; }
  .m-hero--ink .m-aha-nums { color: rgba(255,255,255,.78); }
  .m-aha-nums b, .m-aha-out b { font: 500 15px/1.4 'IBM Plex Mono', monospace; color: inherit; }
  .m-aha-nums b { color: #0B1220; } .m-hero--ink .m-aha-nums b { color: #FFFFFF; }
  .m-aha-sgk { font: 400 12px/1.6 'IBM Plex Mono', monospace; }
  .m-aha-proof { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding-top: 8px; border-top: 1px solid #E3E7EE; }
  .m-hero--ink .m-aha-proof { border-top-color: rgba(255,255,255,.18); }
  .m-aha-badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 8px; border-radius: 2px; background: #0B1220; color: #FFFFFF; font: 600 11px/1.2 'IBM Plex Mono', monospace; letter-spacing: .08em; }
  .m-hero--ink .m-aha-badge { background: #FFFFFF; color: #0B1220; }
  .m-aha-sq { width: 8px; height: 8px; background: #176BFD; }
  .m-aha-out { font-size: 14px; }
  .m-aha-cite { margin-left: auto; font: 400 12px/1.4 'IBM Plex Mono', monospace; color: #4A5363; }
  .m-hero--ink .m-aha-cite { color: rgba(255,255,255,.72); }
  /* the timeline: on → the row arrives and is scanned; proved → the rule lands */
  .m-aha .m-aha-desc, .m-aha .m-aha-nums { opacity: 0; transform: translateY(6px); transition: opacity 360ms cubic-bezier(.22, 1, .36, 1), transform 360ms cubic-bezier(.22, 1, .36, 1); }
  .m-aha .m-aha-nums { transition-delay: 90ms; }
  .m-aha .m-aha-proof > * { opacity: 0; transform: scale(.96); transition: opacity 280ms cubic-bezier(.22, 1, .36, 1), transform 280ms cubic-bezier(.22, 1, .36, 1); }
  .m-aha .m-aha-proof > :nth-child(2) { transition-delay: 70ms; } .m-aha .m-aha-proof > :nth-child(3) { transition-delay: 140ms; }
  .m-aha.is-on .m-aha-desc, .m-aha.is-on .m-aha-nums { opacity: 1; transform: none; }
  .m-aha.is-on .m-aha-scan { transform: scaleX(1); transition: transform 520ms cubic-bezier(.22, 1, .36, 1); }
  .m-aha.is-proved .m-aha-proof > * { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) { .m-aha *, .m-aha .m-aha-proof > * { transition: none !important; } }
html[data-motion="still"] .m-aha *, html[data-motion="still"] .m-aha .m-aha-proof > * { transition: none !important; }

/* lists of links are not inline text: every entry is a 44px target (WCAG 2.5.5; brand rule) */
.m-sources a { display: inline-block; box-sizing: border-box; min-height: 44px; min-width: 44px; padding: 12px 0; line-height: 1.4; }
.m-sources li { padding: 0; }
.m-post h2 a { display: inline-block; padding: 6px 0; min-height: 44px; }
.m-crumbs a { min-width: 44px; }

/* ── footer watermark · the wordmark closes every page ───────────────────────────────────────────────
   Ink ground, 1px hairline outline (white at 16%), letters filled one step above ink (white at 6%),
   the Λ blades in the one blue. The fill rises from the baseline as the page ends: a clip window moves
   down while its content moves up by the same amount — transforms only, no paint per frame. */
.m-wm { position: relative; z-index: 2; }
.m-wm-meta { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 8px 32px; margin: 0; padding-top: 22px; padding-bottom: 0; border-top: 1px solid rgba(255,255,255,.12); }
.m-wm-motto { font: 400 16px/1.45 'IBM Plex Sans', sans-serif; color: #FFFFFF; letter-spacing: -.005em; }
.m-wm-slogan { font: 500 12px/1.6 'IBM Plex Mono', monospace; letter-spacing: .06em; color: rgba(255,255,255,.72); }
.m-wm-plate { position: relative; max-width: 1440px; margin: clamp(20px, 3vw, 44px) auto -1.6%; padding-inline: clamp(16px, 4vw, 40px); }
.m-wm-line, .m-wm-fill { display: block; width: 100%; height: auto; overflow: visible; }
.m-wm-line path { fill: none; stroke: rgba(255,255,255,.16); stroke-width: 1px; vector-effect: non-scaling-stroke; transition: stroke 600ms cubic-bezier(.22, 1, .36, 1); }
.m-wm:hover .m-wm-line path { stroke: #D6E4FF; }
.m-wm-clip { position: absolute; top: 0; bottom: 0; left: clamp(16px, 4vw, 40px); right: clamp(16px, 4vw, 40px); overflow: hidden; transform: translateY(100%); }
.m-wm-in { position: absolute; inset: 0; transform: translateY(-100%); }
.m-wm.is-live .m-wm-clip, .m-wm.is-live .m-wm-in { will-change: transform; }
.m-wm-letters path { fill: rgba(255,255,255,.06); }
.m-wm-blades path { fill: #176BFD; }
@media (prefers-reduced-motion: reduce) { .m-wm-clip, .m-wm-in { transform: none !important; } .m-wm-line path { transition: none; } }
html[data-motion="still"] .m-wm-clip, html[data-motion="still"] .m-wm-in { transform: none !important; }
@media (max-width: 640px) { .m-wm-motto { font-size: 15px; } }
/* phone: the dock covers the bottom 76px — the plate ends above it, whole */
@media (max-width: 768px) { .m-wm { padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px)); } .m-wm-plate { margin-bottom: 0; } }
@media print { .m-wm-plate { display: none; } }

/* ── glossary, term pages, guides (SEO/GEO pages) ───────────────────── */
.m-prose--wide { max-width: 72ch; }
/* the wide column is for tables and code; running text keeps a readable measure (≤ 75 characters a line) */
.m-prose--wide > p, .m-prose--wide > ul, .m-prose--wide > ol, .m-prose--wide > blockquote, .m-prose--wide > dl { max-width: 56ch; }
.m-cell-links { list-style: none; margin: 0; padding: 0; }
.m-cell-links a { display: inline-flex; align-items: center; min-height: 44px; }
.m-prose table { width: 100%; border-collapse: collapse; margin: 0; font-size: 15.5px; line-height: 1.5; }
.m-prose th, .m-prose td { padding: 10px 12px 10px 0; border-bottom: 1px solid #E3E7EE; text-align: left; vertical-align: top; }
.m-prose thead th { font: 500 11px/1.3 'IBM Plex Mono', monospace; letter-spacing: .08em; text-transform: uppercase; color: #4A5363; border-bottom: 1px solid #0B1220; }
.m-prose tbody th { font-weight: 500; }
.m-prose code, .m-ctl code { font: 400 .88em/1.4 'IBM Plex Mono', monospace; background: #EEF4FF; padding: 1px 5px; border-radius: 2px; word-break: break-word; }
.m-tablewrap { overflow-x: auto; margin: 8px 0 24px; }
.m-tablewrap:focus-visible { outline: 3px solid #D6E4FF; outline-offset: 2px; }
.m-code { margin: 12px 0 20px; padding: 16px 18px; background: #0B1220; color: #FFFFFF; border-radius: 6px; overflow-x: auto; font: 400 13px/1.65 'IBM Plex Mono', monospace; }
.m-code code { font: inherit; background: none; padding: 0; color: inherit; white-space: pre; }
.m-gloss-az { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 28px; }
.m-gloss-az a { display: inline-grid; place-items: center; min-width: 44px; min-height: 44px; border: 1px solid #C9D0DB; border-radius: 6px; background: #FFFFFF; color: #0B1220 !important; font: 500 14px/1 'IBM Plex Mono', monospace; text-decoration: none; }
.m-gloss-az a:hover { border-color: #0B1220; }
.m-gloss-letter { margin: 48px 0 0; font: 500 11px/1.3 'IBM Plex Mono', monospace; letter-spacing: .08em; text-transform: uppercase; color: #4A5363; scroll-margin-top: 96px; }
.m-gloss-letter:first-of-type { margin-top: 0; }
.m-gloss { list-style: none; margin: 12px 0 0; padding: 0; border-top: 1px solid #0B1220; }
.m-gloss > li { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 32px; padding: 24px 0; border-bottom: 1px solid #E3E7EE; scroll-margin-top: 96px; }
.m-gloss > li:target { background: #EEF4FF; box-shadow: -16px 0 0 #EEF4FF, 16px 0 0 #EEF4FF; }
.m-gloss h3 { margin: 0; font: 400 22px/1.25 'IBM Plex Sans', sans-serif; letter-spacing: -.01em; }
.m-gloss dfn { font-style: normal; }
.m-aka { margin: 6px 0 0; font: 400 12px/1.5 'IBM Plex Mono', monospace; color: #4A5363; }
.m-gloss p { margin: 0; max-width: 54ch; font-size: 16.5px; line-height: 1.65; }
.m-gloss-links { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0 20px; }
.m-gloss-links a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; font-size: 14.5px; }
.m-gloss-links--prose { margin: 0 0 18px; }
.m-gloss-rel { margin-top: 4px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; }
@media (max-width: 760px) { .m-gloss > li { grid-template-columns: minmax(0, 1fr); gap: 10px; } }
.m-srcs { list-style: none; margin: 12px 0 0; padding: 0; border-top: 1px solid #0B1220; }
.m-src { padding: 16px 0; border-bottom: 1px solid #E3E7EE; scroll-margin-top: 96px; }
.m-src p { margin: 0; max-width: 62ch; }
.m-src-t a { display: inline-flex; align-items: center; min-height: 44px; font-size: 16px; }
/* security: status marks are shape + words, never colour alone */
.m-st { display: inline-flex; align-items: center; gap: 8px; font: 500 12px/1.3 'IBM Plex Mono', monospace; letter-spacing: .02em; color: #0B1220; }
.m-st::before { content: ""; flex: none; width: 10px; height: 10px; box-sizing: border-box; border: 1px solid #0B1220; border-radius: 2px; background: #FFFFFF; }
.m-st--calisiyor::before { background: #0B1220; }
.m-st--sunucu::before { background: linear-gradient(135deg, #0B1220 50%, #FFFFFF 50%); }
.m-st--yuva::before { border-style: dashed; }
.m-legend { list-style: none; margin: 28px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 12px 28px; }
.m-ctl { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 1.55; }
.m-ctl th, .m-ctl td { padding: 14px 16px 14px 0; border-bottom: 1px solid #E3E7EE; text-align: left; vertical-align: top; }
.m-ctl thead th { font: 500 11px/1.3 'IBM Plex Mono', monospace; letter-spacing: .08em; text-transform: uppercase; color: #4A5363; border-bottom: 1px solid #0B1220; }
.m-ctl tbody th { width: 24%; font-weight: 500; }
.m-ctl td:last-child { width: 22%; white-space: nowrap; }
.m-ctl td a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; }
@media (max-width: 760px) { .m-ctl { min-width: 640px; } }
.m-certs { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 16px; }
.m-cert { display: grid; gap: 10px; align-content: start; padding: 20px; border: 1px dashed #C9D0DB; border-radius: 10px; background: #FFFFFF; min-height: 168px; }
.m-cert p { margin: 0; }
/* site map */
.m-smap { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 40px 32px; }
.m-smap h2 { margin: 0 0 12px; }
.m-smap ul { list-style: none; margin: 0; padding: 0; border-top: 1px solid #0B1220; }
.m-smap li a { display: flex; align-items: center; min-height: 44px; border-bottom: 1px solid #E3E7EE; color: #0B1220 !important; text-decoration: none; font-size: 15px; }
.m-smap li a:hover { text-decoration: underline; text-underline-offset: 4px; }
/* login */
.m-login { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 72px; align-items: start; margin-top: 8px; }
.m-login-card { padding: 32px; border: 1px solid #0B1220; border-radius: 10px; background: #FFFFFF; min-width: 0; }
.m-login-aside { display: grid; gap: 16px; padding-top: 8px; min-width: 0; }
.m-login-points { list-style: none; margin: 0; padding: 0; border-top: 1px solid #0B1220; }
.m-login-points li { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 12px; padding: 16px 0; border-bottom: 1px solid #E3E7EE; font-size: 15px; line-height: 1.55; }
@media (max-width: 960px) { .m-login { grid-template-columns: minmax(0, 1fr); gap: 40px; } }
@media (max-width: 480px) { .m-login-card { padding: 20px 16px; } }