/* ========================================================================== 02 — BASE Reset ringan, tipografi dasar, utilitas teks & aksesibilitas. ========================================================================== */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--kn-header-h) + 16px); } body, h1, h2, h3, h4, p, figure, blockquote, ul, ol, dl, dd { margin: 0; } ul, ol { padding: 0; list-style: none; } .kn-body { min-height: 100%; background: var(--kn-bg); color: var(--kn-ink-600); font-family: var(--kn-font-body); font-size: var(--kn-fs-base); font-weight: 400; line-height: var(--kn-lh-base); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; /* clip, bukan hidden: hidden membuat jadi scroll container dan bisa merusak position:sticky pada header. */ overflow-x: clip; } @supports not (overflow: clip) { .kn-body { overflow-x: hidden; } } /* Scroll lock saat drawer terbuka. `position: fixed` dipakai (bukan hanya overflow: hidden) karena iOS Safari mengabaikan yang terakhir. Offset `top` diisi oleh kn-nav.js agar posisi scroll tidak hilang. */ .kn-body.is-nav-open { position: fixed; inset-inline: 0; width: 100%; overflow: hidden; } img, svg, video { display: block; max-width: 100%; } img { height: auto; } a { color: var(--kn-blue-600); text-decoration: none; transition: color var(--kn-dur-fast) var(--kn-ease); } button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; } /* Hilangkan kotak abu-abu saat elemen ditekan di mobile, dan matikan delay klik 300ms bawaan browser sentuh. */ a, button, [role="button"], summary { -webkit-tap-highlight-color: transparent; touch-action: manipulation; } /* ------------------------------------------------------------ headings */ h1, h2, h3, h4 { font-family: var(--kn-font-display); color: var(--kn-navy-800); line-height: var(--kn-lh-snug); letter-spacing: var(--kn-ls-tight); text-wrap: balance; } p { text-wrap: pretty; } /* ------------------------------------------------------------- utility */ .u-accent { color: var(--kn-blue-500); } .u-inline-link { color: var(--kn-blue-600); font-weight: 500; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 3px; text-decoration-color: color-mix(in srgb, var(--kn-blue-500) 45%, transparent); } .u-inline-link:hover { color: var(--kn-blue-700); text-decoration-color: currentColor; } .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .skip-link { position: fixed; top: 10px; left: 50%; z-index: 200; padding: 10px 18px; border-radius: var(--kn-r-pill); background: var(--kn-white); box-shadow: var(--kn-shadow-md); color: var(--kn-navy-800); font-size: var(--kn-fs-sm); font-weight: 600; transform: translate(-50%, -160%); transition: transform var(--kn-dur) var(--kn-ease-out); } .skip-link:focus-visible { transform: translate(-50%, 0); } /* --------------------------------------------------------------- focus */ :where(a, button, input, [tabindex]):focus-visible { outline: 2px solid var(--kn-blue-500); outline-offset: 3px; border-radius: 4px; } /* Ikon selalu ikut warna teks induknya. */ .icon { flex: none; stroke-linecap: round; stroke-linejoin: round; } /* ----------------------------------------------------------- selection */ ::selection { background: color-mix(in srgb, var(--kn-blue-500) 22%, transparent); color: var(--kn-navy-900); } /* ------------------------------------------------------------ scrollbar */ @supports selector(::-webkit-scrollbar) { ::-webkit-scrollbar { width: 11px; height: 11px; } ::-webkit-scrollbar-track { background: var(--kn-bg-deep); } ::-webkit-scrollbar-thumb { border: 3px solid var(--kn-bg-deep); border-radius: var(--kn-r-pill); background: var(--kn-blue-200); } ::-webkit-scrollbar-thumb:hover { background: var(--kn-blue-400); } } /* --------------------------------------------------------- print basics */ @media print { .kn-backdrop, .site-header, .to-top, .drawer, .kn-scroll-progress { display: none !important; } .kn-body { background: #fff; } }