/* Hallmark · genre: modern-enterprise (custom) · macrostructure: Kinetic corporate · theme: custom "Kirana Kinetic"
 * vibe: "modern, interactive, sharp-edged, confident nationwide IT partner"
 * paper oklch(100% 0 0) / ink-night oklch(16% 0.045 258) · accent navy oklch(41% 0.12 252) + signal red oklch(60% 0.21 25)
 * display: Plus Jakarta Sans 800 · body: Inter 400/500/600 · radius: 0 (sharp)
 * nav: transparent-over-hero → solid on scroll + mega · footer: dark statement
 * pre-emit critique: P4 H5 E4 S4 R4 V5
 *
 * KIRANA SAKTI KOMPUTINDO — GLOBAL STYLESHEET (v2)
 * Prefix `ks-` untuk semua class. Pasang SEKALI secara global.
 * Motion: hanya transform/opacity/warna. Semua animasi mati pada prefers-reduced-motion.
 */

/* ============ 1. TOKENS ============ */
:root {
  --ks-night: oklch(16% 0.045 258);       /* latar gelap utama */
  --ks-night-2: oklch(20% 0.06 257);
  --ks-navy-900: oklch(25% 0.075 255);
  --ks-navy-700: oklch(41% 0.12 252);     /* logo ≈ #034A84 */
  --ks-navy-500: oklch(58% 0.13 248);
  --ks-navy-300: oklch(76% 0.08 248);
  --ks-red-500: oklch(60% 0.21 25);       /* logo ≈ #E32934 */
  --ks-red-600: oklch(53% 0.2 25);
  --ks-ink: oklch(18% 0.03 258);
  --ks-ink-2: oklch(40% 0.025 258);
  --ks-ink-3: oklch(55% 0.02 258);
  --ks-rule: oklch(88% 0.012 250);
  --ks-paper: oklch(100% 0 0);
  --ks-paper-2: oklch(97.2% 0.006 250);
  --ks-on-dark: oklch(98% 0.004 250);
  --ks-on-dark-2: oklch(78% 0.03 250);
  --ks-on-dark-3: oklch(60% 0.04 252);
  --ks-rule-dark: oklch(32% 0.05 256);
  --ks-focus: oklch(70% 0.16 248);
  --ks-logo-panel: oklch(72% 0.025 252);
  --ks-prod-light: oklch(96.6% 0 0);   /* latar foto produk MPS (banner Kirana) */
  --ks-prod-gray: oklch(72.5% 0.005 240); /* latar foto produk DaaS (banner Kirana) */

  --ks-font-display: "Plus Jakarta Sans", "Segoe UI", system-ui, sans-serif;
  --ks-font-body: "Inter", "Segoe UI", system-ui, sans-serif;
  --ks-text-xs: 0.8125rem;
  --ks-text-sm: 0.9375rem;
  --ks-text-md: 1.0625rem;
  --ks-text-lg: 1.25rem;
  --ks-text-xl: clamp(1.5rem, 1.1rem + 1.2vw, 2rem);
  --ks-text-2xl: clamp(2rem, 1.2rem + 3vw, 3.5rem);
  --ks-text-3xl: clamp(2.5rem, 1.2rem + 5vw, 5.5rem);
  --ks-text-hero: clamp(2.5rem, 0.9rem + 5.4vw, 6rem);

  --ks-space-1: 0.25rem; --ks-space-2: 0.5rem; --ks-space-3: 0.75rem; --ks-space-4: 1rem;
  --ks-space-5: 1.5rem; --ks-space-6: 2rem; --ks-space-7: 3rem; --ks-space-8: 4rem; --ks-space-9: 6rem;
  --ks-section-y: clamp(5rem, 3rem + 6vw, 9rem);
  --ks-container: 120rem;
  --ks-gutter: clamp(1rem, 0.4rem + 1.8vw, 2.25rem);

  --ks-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ks-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ks-dur-fast: 160ms;
  --ks-dur-med: 380ms;
  --ks-dur-slow: 900ms;
}

/* ============ 2. SCOPED BASE ============ */
.ks, .ks *, .ks *::before, .ks *::after { box-sizing: border-box; border-radius: 0; }
.ks { font-family: var(--ks-font-body); font-size: var(--ks-text-md); line-height: 1.6; color: var(--ks-ink); -webkit-font-smoothing: antialiased; }
.ks :where(h1, h2, h3, h4, p, ul, ol, figure, dl, dd) { margin: 0; padding: 0; }
.ks :where(ul, ol) { list-style: none; }
.ks :where(h1, h2, h3, h4) { font-family: var(--ks-font-display); font-style: normal; font-weight: 800; line-height: 1.04; letter-spacing: -0.035em; min-width: 0; overflow-wrap: anywhere; }
.ks :where(img, svg) { display: block; max-width: 100%; height: auto; }
.ks :where(a) { color: inherit; text-decoration: none; }
.ks :where(button) { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; text-align: left; }
.ks[id], .ks [id] { scroll-margin-top: 96px; }
.ks :focus-visible { outline: 2px solid var(--ks-focus); outline-offset: 4px; }
.ks-sr-only { position: absolute !important; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.ks-container { width: 100%; max-width: var(--ks-container); margin-inline: auto; padding-inline: var(--ks-gutter); }
.ks-dark { background: var(--ks-night); color: var(--ks-on-dark); }
.ks-dark :where(h1, h2, h3) { color: var(--ks-on-dark); }

/* Label kecil: garis merah + teks */
.ks-label { display: inline-flex; align-items: center; gap: var(--ks-space-3); font-size: var(--ks-text-xs); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ks-ink-3); }
.ks-label::before { content: ""; width: 28px; height: 2px; background: var(--ks-red-500); }
.ks-dark .ks-label { color: var(--ks-on-dark-2); }
.ks-accent { color: var(--ks-red-500); }
.ks-stack { display: grid; gap: var(--ks-space-5); align-content: start; justify-items: start; }
.ks-statement__text, .ks-process__title { margin-top: var(--ks-space-6); }
.ks-cta .ks-label { color: var(--ks-on-dark-2); }
.ks-cta .ks-label::before { background: var(--ks-on-dark); }

/* ============ 3. REVEAL MOTION ============ */
.ks-js [data-ks-reveal] { opacity: 0; transform: translate3d(0, 28px, 0); transition: opacity var(--ks-dur-slow) var(--ks-ease-out), transform var(--ks-dur-slow) var(--ks-ease-out); transition-delay: calc(var(--i, 0) * 80ms); }
.ks-js [data-ks-reveal="fade"] { transform: none; }
.ks-js [data-ks-reveal].is-in { opacity: 1; transform: none; }
/* Judul per-baris: teks naik dari balik mask */
.ks-lines { display: block; }
.ks-line { display: block; overflow: hidden; padding-bottom: 0.2em; margin-bottom: -0.2em; }
.ks-line > span { display: block; }
.ks-js .ks-lines .ks-line > span { transform: translate3d(0, 105%, 0); transition: transform 1100ms var(--ks-ease-out); transition-delay: calc(var(--i, 0) * 110ms + 100ms); }
.ks-js .ks-lines.is-in .ks-line > span { transform: none; }

/* ============ 4. BUTTONS (tajam, fill-slide) ============ */
.ks-btn {
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: space-between; gap: var(--ks-space-6);
  min-height: 56px; padding: 0 var(--ks-space-5);
  font-family: var(--ks-font-body); font-size: var(--ks-text-sm); font-weight: 600; line-height: 1; white-space: nowrap;
  border: 1px solid currentColor; transition: color var(--ks-dur-med) var(--ks-ease-out), border-color var(--ks-dur-med) var(--ks-ease-out);
}
.ks-btn::before { content: ""; position: absolute; inset: 0; z-index: -1; transform: scaleX(0); transform-origin: right; transition: transform var(--ks-dur-med) var(--ks-ease-out); }
.ks-btn:hover::before, .ks-btn:focus-visible::before { transform: scaleX(1); transform-origin: left; }
.ks-btn svg { width: 18px; height: 18px; flex: none; transition: transform var(--ks-dur-med) var(--ks-ease-out); }
.ks-btn:hover svg { transform: translateX(4px); }
.ks-btn:active { transform: translateY(1px); }
.ks-btn--red { background: var(--ks-red-600); border-color: var(--ks-red-600); color: var(--ks-on-dark); }
.ks-btn--red::before { background: var(--ks-on-dark); }
.ks-btn--red:hover { color: var(--ks-night); border-color: var(--ks-on-dark); }
.ks-btn--line-light { color: var(--ks-on-dark); border-color: oklch(100% 0 0 / 0.35); }
.ks-btn--line-light::before { background: var(--ks-on-dark); }
.ks-btn--line-light:hover { color: var(--ks-night); border-color: var(--ks-on-dark); }
.ks-btn--dark { background: var(--ks-night); border-color: var(--ks-night); color: var(--ks-on-dark); }
.ks-btn--dark::before { background: var(--ks-red-600); }
.ks-btn--dark:hover { border-color: var(--ks-red-600); }
.ks-btn--line-dark { color: var(--ks-ink); border-color: var(--ks-ink); }
.ks-btn--line-dark::before { background: var(--ks-ink); }
.ks-btn--line-dark:hover { color: var(--ks-on-dark); }

.ks-arrowlink { display: inline-flex; align-items: center; gap: var(--ks-space-3); font-weight: 600; font-size: var(--ks-text-sm); white-space: nowrap; padding-bottom: 4px; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size var(--ks-dur-med) var(--ks-ease-out); }
.ks-arrowlink:hover { background-size: 100% 1px; }
.ks-arrowlink svg { width: 16px; height: 16px; transition: transform var(--ks-dur-med) var(--ks-ease-out); }
.ks-arrowlink:hover svg { transform: translateX(4px); }

/* ============ 5. HEADER ============ */
.ks-header { position: fixed; inset: 0 0 auto 0; z-index: 100; color: var(--ks-on-dark); transition: background-color var(--ks-dur-med) var(--ks-ease-out), color var(--ks-dur-med) var(--ks-ease-out), transform var(--ks-dur-med) var(--ks-ease-out), border-color var(--ks-dur-med); border-bottom: 1px solid transparent; }
.ks-header.is-solid { /* glassmorphism saat scroll */
  background: linear-gradient(180deg, oklch(100% 0 0 / 0.3), oklch(100% 0 0 / 0.16));
  -webkit-backdrop-filter: saturate(1.7) blur(22px); backdrop-filter: saturate(1.7) blur(22px);
  color: var(--ks-ink); border-bottom-color: oklch(100% 0 0 / 0.35);
  box-shadow: 0 8px 32px oklch(20% 0.04 258 / 0.08), inset 0 1px 0 oklch(100% 0 0 / 0.4);
}
.ks-header.is-solid.is-ondark { /* glass gelap di atas section gelap: teks & logo putih */
  background: linear-gradient(180deg, oklch(22% 0.05 258 / 0.38), oklch(22% 0.05 258 / 0.22));
  color: var(--ks-on-dark); border-bottom-color: oklch(100% 0 0 / 0.1);
  box-shadow: 0 8px 32px oklch(5% 0.03 258 / 0.25), inset 0 1px 0 oklch(100% 0 0 / 0.08);
}
.ks-header.is-solid.is-ondark .ks-logo--dark { opacity: 0; }
.ks-header.is-solid.is-ondark .ks-logo--light { opacity: 1; }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .ks-header.is-solid { background: oklch(100% 0 0 / 0.94); } }
.ks-header.is-hidden { transform: translateY(-100%); }
.ks-header__bar { display: flex; align-items: center; gap: var(--ks-space-6); min-height: 84px; }
.ks-header__logo { flex: none; }
.ks-header__logo { position: relative; display: block; width: 138px; }
.ks-header__logo img { width: 138px; transition: opacity var(--ks-dur-med) var(--ks-ease-out); }
.ks-header__logo .ks-logo--dark { position: absolute; inset: 0; opacity: 0; }
.ks-header.is-solid .ks-logo--dark { opacity: 1; }
.ks-header.is-solid .ks-logo--light { opacity: 0; }
.ks-nav { margin-left: auto; }
.ks-nav__list { display: flex; align-items: center; gap: var(--ks-space-5); }
.ks-nav__link, .ks-nav__trigger { position: relative; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-size: var(--ks-text-sm); font-weight: 500; white-space: nowrap; }
.ks-nav__link::after, .ks-nav__trigger::after { content: ""; position: absolute; left: 0; right: 0; bottom: 6px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform var(--ks-dur-med) var(--ks-ease-out); }
.ks-nav__link:hover::after, .ks-nav__trigger:hover::after, .ks-nav__trigger[aria-expanded="true"]::after { transform: scaleX(1); transform-origin: left; }
.ks-nav__trigger svg { width: 12px; height: 12px; transition: transform var(--ks-dur-med) var(--ks-ease-out); }
.ks-nav__trigger[aria-expanded="true"] svg { transform: rotate(180deg); }
.ks-nav__item { position: relative; }
.ks-header__cta { min-height: 44px; }
.ks-header:not(.is-solid) .ks-header__cta { background: transparent; border-color: oklch(100% 0 0 / 0.4); }
.ks-header__toggle { display: none; margin-left: auto; width: 48px; height: 48px; align-items: center; justify-content: center; border: 1px solid currentColor; }
.ks-header__toggle span { position: relative; width: 20px; height: 1.5px; background: currentColor; transition: background-color var(--ks-dur-fast); }
.ks-header__toggle span::before, .ks-header__toggle span::after { content: ""; position: absolute; left: 0; width: 20px; height: 1.5px; background: currentColor; transition: transform var(--ks-dur-med) var(--ks-ease-out); }
.ks-header__toggle span::before { transform: translateY(-6px); }
.ks-header__toggle span::after { transform: translateY(6px); }
.ks-header__toggle[aria-expanded="true"] span { background: transparent; }
.ks-header__toggle[aria-expanded="true"] span::before { transform: rotate(45deg); }
.ks-header__toggle[aria-expanded="true"] span::after { transform: rotate(-45deg); }

.ks-mega { position: absolute; top: calc(100% + 18px); left: -24px; width: min(40rem, calc(100vw - 2 * var(--ks-gutter))); background: var(--ks-night); color: var(--ks-on-dark); border-top: 2px solid var(--ks-red-500); padding: var(--ks-space-3) 0; box-shadow: 0 30px 60px -20px oklch(10% 0.04 258 / 0.5); }
.ks-mega[hidden] { display: none; }
.ks-mega::before { content: ""; position: absolute; left: 0; right: 0; top: -20px; height: 20px; } /* jembatan agar kursor tidak lepas saat menuju panel */
.ks-js .ks-mega:not([hidden]) { animation: ks-drop var(--ks-dur-med) var(--ks-ease-out); }
@keyframes ks-drop { from { opacity: 0; transform: translateY(-8px); } }
.ks-mega__link { display: grid; grid-template-columns: 3rem minmax(0, 1fr) auto; gap: var(--ks-space-4); align-items: center; padding: var(--ks-space-4) var(--ks-space-5); border-bottom: 1px solid var(--ks-rule-dark); transition: background-color var(--ks-dur-fast); }
.ks-mega__link:last-of-type { border-bottom: 0; }
.ks-mega__link:hover { background: var(--ks-night-2); }
.ks-mega__num { font-size: var(--ks-text-xs); color: var(--ks-on-dark-3); font-variant-numeric: tabular-nums; }
.ks-mega__title { display: block; font-weight: 600; font-size: var(--ks-text-sm); }
.ks-mega__desc { display: block; font-size: var(--ks-text-xs); color: var(--ks-on-dark-2); }
.ks-mega__link svg { width: 16px; height: 16px; opacity: 0; transform: translateX(-6px); transition: opacity var(--ks-dur-fast), transform var(--ks-dur-med) var(--ks-ease-out); }
.ks-mega__link:hover svg { opacity: 1; transform: none; }

@media (max-width: 1099px) {
  .ks-header__toggle { display: inline-flex; }
  .ks-header__cta { display: none; }
  .ks-nav { position: fixed; inset: 84px 0 0 0; margin: 0; background: var(--ks-night); color: var(--ks-on-dark); overflow-y: auto; padding: var(--ks-space-5) var(--ks-gutter) var(--ks-space-8); }
  .ks-nav[data-open="false"] { display: none; }
  .ks-nav__list { flex-direction: column; align-items: stretch; gap: 0; }
  .ks-nav__item { border-bottom: 1px solid var(--ks-rule-dark); }
  .ks-nav__link, .ks-nav__trigger { width: 100%; justify-content: space-between; min-height: 64px; font-family: var(--ks-font-display); font-size: var(--ks-text-xl); font-weight: 700; }
  .ks-nav__link::after, .ks-nav__trigger::after { display: none; }
  .ks-mega { position: static; width: 100%; box-shadow: none; border-top: 0; padding: 0 0 var(--ks-space-4); background: transparent; }
  .ks-nav__mobile-cta { display: block; margin-top: var(--ks-space-6); }
  .ks-nav__mobile-cta .ks-btn { width: 100%; }
}
@media (min-width: 1100px) { .ks-nav__mobile-cta { display: none; } }

/* ============ 6. HERO ============ */
.ks-hero { position: relative; min-height: 100svh; display: grid; align-items: end; overflow: hidden; background: var(--ks-night); color: var(--ks-on-dark); padding: 9rem 0 0; }
.ks-hero__canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.ks-hero::after { /* fade bawah */
  content: ""; position: absolute; inset: auto 0 0 0; height: 40%; z-index: 1; pointer-events: none;
  background: linear-gradient(to top, var(--ks-night), transparent);
}
.ks-hero__inner { position: relative; z-index: 2; display: grid; gap: var(--ks-space-7); padding-bottom: var(--ks-space-7); }
.ks-hero__title { font-size: var(--ks-text-hero); max-width: 15ch; color: var(--ks-on-dark); }
.ks-rotator { display: inline-grid; vertical-align: top; overflow: hidden; padding-bottom: 0.2em; margin-bottom: -0.2em; color: var(--ks-red-500); }
.ks-rotator > span { grid-area: 1 / 1; transform: translate3d(0, 105%, 0); opacity: 0; transition: transform 700ms var(--ks-ease-out), opacity 700ms var(--ks-ease-out); white-space: nowrap; }
.ks-rotator > span.is-on { transform: none; opacity: 1; }
.ks-rotator > span.is-out { transform: translate3d(0, -105%, 0); opacity: 0; }
.ks-hero__row { display: grid; gap: var(--ks-space-6); grid-template-columns: minmax(0, 1fr); align-items: end; }
@media (min-width: 900px) { .ks-hero__row { grid-template-columns: minmax(0, 1fr) auto; } }
.ks-hero__lede { font-size: var(--ks-text-lg); line-height: 1.55; color: var(--ks-on-dark-2); max-width: 38rem; }
.ks-hero__actions { display: flex; flex-wrap: wrap; gap: var(--ks-space-3); }
#ks-home-hero .ks-hero__actions { position: relative; top: 1.5rem; }
#ks-home-hero .ks-hero__actions .ks-btn { min-height: 46px; }
.ks-hero__ticker { position: relative; z-index: 2; border-top: 1px solid var(--ks-rule-dark); }
.ks-hero__facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 900px) { .ks-hero__facts { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.ks-hero__fact { display: flex; align-items: center; gap: var(--ks-space-3); padding: var(--ks-space-5) var(--ks-space-4) var(--ks-space-5) 0; font-size: var(--ks-text-sm); color: var(--ks-on-dark-2); border-right: 1px solid var(--ks-rule-dark); }
.ks-hero__fact:last-child { border-right: 0; }
.ks-hero__fact + .ks-hero__fact { padding-left: var(--ks-space-4); }
@media (max-width: 899px) { .ks-hero__fact:nth-child(2) { border-right: 0; } .ks-hero__fact:nth-child(3) { padding-left: 0; } .ks-hero__fact:nth-child(n+3) { border-top: 1px solid var(--ks-rule-dark); } }
.ks-hero__fact strong { color: var(--ks-on-dark); font-weight: 600; }
.ks-hero__dot { width: 8px; height: 8px; flex: none; background: var(--ks-red-500); border-radius: 50%; }
.ks-scrollcue { position: absolute; right: var(--ks-gutter); bottom: 7rem; z-index: 2; display: none; width: 1px; height: 64px; background: var(--ks-rule-dark); overflow: hidden; }
.ks-scrollcue::after { content: ""; position: absolute; inset: 0; background: var(--ks-on-dark); animation: ks-cue 2.2s var(--ks-ease-in-out) infinite; }
@keyframes ks-cue { 0% { transform: translateY(-100%); } 60%, 100% { transform: translateY(100%); } }
@media (min-width: 900px) { .ks-scrollcue { display: block; } }

/* ============ 7. MARQUEE ============ */
.ks-marquee { --gap: clamp(2.5rem, 1rem + 5vw, 5rem); --dur: 50s; display: flex; overflow: hidden; gap: var(--gap); mask-image: linear-gradient(90deg, transparent, oklch(0% 0 0) 10%, oklch(0% 0 0) 90%, transparent); }
.ks-marquee__track { display: flex; flex: none; align-items: center; gap: var(--gap); min-width: 100%; justify-content: space-around; animation: ks-marquee var(--dur) linear infinite; }
.ks-marquee--reverse .ks-marquee__track { animation-direction: reverse; }
.ks-marquee:hover .ks-marquee__track { animation-play-state: paused; }
@keyframes ks-marquee { to { transform: translateX(calc(-100% - var(--gap))); } }

.ks-clients { padding-block: var(--ks-space-7); background: var(--ks-paper); border-bottom: 1px solid var(--ks-rule); }
.ks-clients__caption { margin-bottom: var(--ks-space-6); }
.ks-hero__clients { position: relative; z-index: 2; display: grid; gap: var(--ks-space-5); padding-block: var(--ks-space-6) var(--ks-space-7); border-top: 1px solid var(--ks-rule-dark); }
.ks-hero__clients-title { color: var(--ks-on-dark-3); font-family: var(--ks-font-body); letter-spacing: 0.14em; line-height: 1.4; }
.ks-hero__marquee { --gap: clamp(2.5rem, 1rem + 3.5vw, 5rem); }
.ks-clients__logo { flex: none; width: auto; height: clamp(28px, 1.1rem + 1.7vw, 45px); max-width: 160px; object-fit: contain; opacity: 0.8; transition: opacity var(--ks-dur-fast); }
.ks-clogo { position: relative; display: block; flex: none; }
.ks-clogo__color { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0; transform: scale(0.96); transition: opacity var(--ks-dur-med) var(--ks-ease-out), transform var(--ks-dur-med) var(--ks-ease-out); pointer-events: none; }
.ks-clogo .ks-clients__logo { transition: opacity var(--ks-dur-med) var(--ks-ease-out); }
.ks-clogo:hover .ks-clients__logo { opacity: 0; }
.ks-clogo:hover .ks-clogo__color { opacity: 1; transform: scale(1.06); }
.ks-hero__marquee:hover .ks-marquee__track { animation-play-state: running; }
.ks-clients__logo--square { height: clamp(39px, 1.7rem + 2.1vw, 64px); }

/* ============ 8. STATS ============ */
.ks-stats { padding-block: var(--ks-section-y); background: var(--ks-paper); }
.ks-stats__head { display: grid; gap: var(--ks-space-5); grid-template-columns: minmax(0, 1fr); margin-bottom: var(--ks-space-8); }
@media (min-width: 900px) { .ks-stats__head { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: end; } }
.ks-stats__title { font-size: var(--ks-text-2xl); max-width: 16ch; }
.ks-stats__lede { color: var(--ks-ink-2); max-width: 34rem; }
.ks-stats__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--ks-ink); }
@media (min-width: 900px) { .ks-stats__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.ks-stat { display: grid; gap: var(--ks-space-3); align-content: start; padding: var(--ks-space-6) var(--ks-space-4) var(--ks-space-6) 0; border-bottom: 1px solid var(--ks-rule); }
@media (min-width: 900px) { .ks-stat + .ks-stat { padding-left: var(--ks-space-5); border-left: 1px solid var(--ks-rule); } }
@media (max-width: 899px) { .ks-stat:nth-child(even) { padding-left: var(--ks-space-4); border-left: 1px solid var(--ks-rule); } }
.ks-stat__value { font-family: var(--ks-font-display); font-weight: 800; font-size: clamp(2.5rem, 1rem + 3.6vw, 4.75rem); line-height: 0.95; letter-spacing: -0.045em; color: var(--ks-navy-700); font-variant-numeric: tabular-nums; }
.ks-stat__label { font-size: var(--ks-text-sm); color: var(--ks-ink-2); }
.ks-iso { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ks-space-3) var(--ks-space-6); margin-top: var(--ks-space-6); font-size: var(--ks-text-sm); color: var(--ks-ink-2); }
.ks-iso strong { color: var(--ks-ink); font-family: var(--ks-font-display); font-size: var(--ks-text-lg); letter-spacing: -0.02em; }

/* ============ 9. SOLUTIONS (interactive list + sticky visual) ============ */
.ks-sol { padding-block: var(--ks-section-y); background: var(--ks-night); color: var(--ks-on-dark); }
.ks-sol__head { display: grid; gap: var(--ks-space-5); margin-bottom: var(--ks-space-8); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .ks-sol__head { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: end; } }
.ks-sol__title { font-size: clamp(1.75rem, 1rem + 2.6vw, 3rem); }
.ks-sol__lede { color: var(--ks-on-dark-2); max-width: 34rem; }
.ks-sol__grid { display: grid; gap: var(--ks-space-7); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1000px) { .ks-sol__grid { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: var(--ks-space-8); } }
.ks-sol__list { border-top: 1px solid var(--ks-rule-dark); }
.ks-sol__item { border-bottom: 1px solid var(--ks-rule-dark); }
.ks-sol__btn { position: relative; width: 100%; display: grid; grid-template-columns: 3rem minmax(0, 1fr) auto; gap: var(--ks-space-4); align-items: center; padding: var(--ks-space-5) 0; color: var(--ks-on-dark-3); transition: color var(--ks-dur-med) var(--ks-ease-out), padding var(--ks-dur-med) var(--ks-ease-out); }
.ks-sol__btn::before { content: ""; position: absolute; left: 0; bottom: -1px; height: 1px; width: 100%; background: var(--ks-red-500); transform: scaleX(0); transform-origin: left; transition: transform var(--ks-dur-slow) var(--ks-ease-out); }
.ks-sol__num { font-size: var(--ks-text-xs); font-variant-numeric: tabular-nums; }
.ks-sol__name { font-family: var(--ks-font-display); font-weight: 800; font-size: clamp(1.125rem, 0.75rem + 1.2vw, 1.625rem); letter-spacing: -0.03em; line-height: 1.1; }
.ks-sol__abbr { font-family: var(--ks-font-body); font-size: var(--ks-text-sm); font-weight: 600; letter-spacing: 0.04em; }
.ks-sol__item.is-active .ks-sol__btn, .ks-sol__btn:hover { color: var(--ks-on-dark); }
.ks-sol__item.is-active .ks-sol__btn { padding-left: var(--ks-space-3); }
.ks-sol__item.is-active .ks-sol__btn::before { transform: scaleX(1); }
.ks-sol__item.is-active .ks-sol__abbr { color: var(--ks-red-500); }
.ks-sol__body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--ks-dur-med) var(--ks-ease-out); }
.ks-sol__item.is-active .ks-sol__body { grid-template-rows: 1fr; }
.ks-sol__body > div { overflow: hidden; }
.ks-sol__body p { color: var(--ks-on-dark-2); padding: 0 0 var(--ks-space-4) calc(3rem + var(--ks-space-4) + var(--ks-space-3)); max-width: 40rem; }
.ks-sol__tags { display: flex; flex-wrap: wrap; gap: var(--ks-space-2) var(--ks-space-4); padding: 0 0 var(--ks-space-5) calc(3rem + var(--ks-space-4) + var(--ks-space-3)); font-size: var(--ks-text-xs); color: var(--ks-on-dark-3); text-transform: uppercase; letter-spacing: 0.1em; }
.ks-sol__more { padding: 0 0 var(--ks-space-6) calc(3rem + var(--ks-space-4) + var(--ks-space-3)); }
@media (max-width: 599px) { .ks-sol__btn { grid-template-columns: 2rem minmax(0, 1fr); } .ks-sol__abbr { display: none; } .ks-sol__body p, .ks-sol__tags, .ks-sol__more { padding-left: calc(2rem + var(--ks-space-4)); } }

.ks-sol__stage { display: none; position: sticky; top: 120px; align-self: start; aspect-ratio: 1 / 1; background: var(--ks-night-2); border: 1px solid var(--ks-rule-dark); overflow: hidden; }
@media (min-width: 1000px) { .ks-sol__stage { display: block; } }
.ks-sol__visual { position: absolute; inset: 0; display: grid; place-items: center; overflow: hidden; opacity: 0; transform: scale(1.04); transition: opacity var(--ks-dur-slow) var(--ks-ease-out), transform var(--ks-dur-slow) var(--ks-ease-out); }
.ks-sol__visual.is-active { opacity: 1; transform: none; }
.ks-sol__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: saturate(0.95) brightness(0.92); transform: scale(1.12); transition: transform 6s var(--ks-ease-out); }
.ks-sol__visual.is-active .ks-sol__photo { transform: scale(1); }
.ks-sol__visual::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, oklch(16% 0.045 258 / 0.1) 0%, oklch(16% 0.045 258 / 0.22) 55%, oklch(16% 0.045 258 / 0.7) 100%); }
.ks-sol__visual svg { position: relative; z-index: 1; width: 64%; height: auto; color: var(--ks-on-dark); filter: drop-shadow(0 2px 10px oklch(10% 0.04 258 / 0.6)); }
.ks-sol__visual svg [data-draw] { stroke-width: 1.6; }
.ks-sol__visual .ks-v-accent { color: var(--ks-red-500); }
.ks-sol__caption { z-index: 1; position: absolute; left: var(--ks-space-5); right: var(--ks-space-5); bottom: var(--ks-space-5); display: flex; justify-content: space-between; font-size: var(--ks-text-xs); color: var(--ks-on-dark-2); text-transform: uppercase; letter-spacing: 0.12em; }
/* garis SVG digambar saat aktif */
.ks-sol__visual [data-draw] { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1600ms var(--ks-ease-out); }
.ks-sol__visual.is-active [data-draw] { stroke-dashoffset: 0; }
.ks-sol__visual .ks-pulse { transform-box: fill-box; transform-origin: center; animation: ks-pulse 2.4s var(--ks-ease-in-out) infinite; }
@keyframes ks-pulse { 0%, 100% { opacity: 0.35; transform: scale(0.85); } 50% { opacity: 1; transform: scale(1.1); } }

/* ============ 10. STATEMENT (scroll scrub) ============ */
.ks-statement { padding-block: var(--ks-section-y); background: var(--ks-paper); }
.ks-statement { text-align: center; }
.ks-statement .ks-label { justify-content: center; }
.ks-statement__text { font-family: var(--ks-font-display); font-weight: 800; font-size: clamp(1.375rem, 0.9rem + 1.6vw, 2.5rem); line-height: 1.2; letter-spacing: -0.03em; max-width: 34ch; margin-inline: auto; color: var(--ks-ink); }
.ks-statement .ks-pillar { justify-items: center; padding-inline: var(--ks-space-5); }
.ks-statement .ks-pillar__text { max-width: 22rem; }
.ks-js [data-ks-scrub] .ks-w { opacity: var(--o, 0.14); transition: opacity 120ms linear; }
.ks-pillars { display: grid; grid-template-columns: minmax(0, 1fr); margin-top: var(--ks-space-8); border-top: 1px solid var(--ks-ink); }
@media (min-width: 700px) { .ks-pillars { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .ks-pillars { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.ks-pillar { display: grid; gap: var(--ks-space-3); align-content: start; padding: var(--ks-space-6) var(--ks-space-5) var(--ks-space-6) 0; border-bottom: 1px solid var(--ks-rule); }
@media (min-width: 1100px) { .ks-pillar + .ks-pillar { padding-left: var(--ks-space-5); border-left: 1px solid var(--ks-rule); } }
.ks-pillar__num { font-size: var(--ks-text-xs); color: var(--ks-red-600); font-weight: 600; letter-spacing: 0.1em; }
.ks-pillar__title { font-size: var(--ks-text-lg); letter-spacing: -0.02em; }
.ks-pillar__text { font-size: var(--ks-text-sm); color: var(--ks-ink-2); }

/* ============ 11. PARTNERS (marquee rows) ============ */
.ks-partners { padding-block: var(--ks-section-y); background: var(--ks-paper-2); overflow: hidden; }
.ks-partners__head { display: grid; gap: var(--ks-space-5); margin-bottom: var(--ks-space-7); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .ks-partners__head { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: end; } }
.ks-partners__title { font-size: var(--ks-text-2xl); }
.ks-partners__lede { color: var(--ks-ink-2); max-width: 34rem; }
.ks-partners__rows { display: grid; border-top: 1px solid var(--ks-rule); }
.ks-prow { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--ks-space-3); padding-block: var(--ks-space-5); border-bottom: 1px solid var(--ks-rule); align-items: center; }
@media (min-width: 900px) { .ks-prow { grid-template-columns: 14rem minmax(0, 1fr); gap: var(--ks-space-6); } }
.ks-prow__cat { font-size: var(--ks-text-xs); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ks-ink-3); }
.ks-prow .ks-marquee { --gap: clamp(1.75rem, 0.75rem + 2vw, 3rem); --dur: 45s; }
.ks-prow { padding-block: var(--ks-space-5); }
.ks-plogo { flex: none; width: auto; height: clamp(13px, 0.5rem + 0.6vw, 20px); max-width: 110px; object-fit: contain; transition: transform var(--ks-dur-med) var(--ks-ease-out); }
.ks-plogo--tall { height: clamp(20px, 0.8rem + 0.8vw, 30px); }
.ks-plogo:hover { transform: scale(1.08); }
.ks-brand { flex: none; font-family: var(--ks-font-display); font-weight: 800; font-size: clamp(1.25rem, 0.9rem + 1.2vw, 2rem); letter-spacing: -0.03em; color: var(--ks-ink); white-space: nowrap; transition: color var(--ks-dur-fast); }
.ks-brand:hover { color: var(--ks-navy-700); }
.ks-brand--dim { color: var(--ks-ink-3); }

/* ============ 12. PROCESS (line draw) ============ */
.ks-process { padding-block: var(--ks-section-y); background: var(--ks-night); color: var(--ks-on-dark); }
.ks-process__title { font-size: var(--ks-text-2xl); max-width: 18ch; margin-bottom: var(--ks-space-8); }
.ks-process__track { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; }
@media (min-width: 1000px) { .ks-process__track { grid-template-columns: repeat(4, minmax(0, 1fr)); } .ks-process__track--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.ks-process__line { position: absolute; left: 0; top: 0; height: 1px; width: 100%; background: var(--ks-rule-dark); display: none; }
.ks-process__line::after { content: ""; position: absolute; inset: 0; background: var(--ks-red-500); transform: scaleX(var(--p, 0)); transform-origin: left; }
@media (min-width: 1000px) { .ks-process__line { display: block; } }
.ks-pstep { position: relative; display: grid; gap: var(--ks-space-3); align-content: start; padding: var(--ks-space-6) var(--ks-space-6) var(--ks-space-6) 0; border-top: 1px solid var(--ks-rule-dark); }
@media (min-width: 1000px) { .ks-pstep { border-top: 0; padding-top: var(--ks-space-7); } }
.ks-pstep::before { content: ""; position: absolute; top: -5px; left: 0; width: 9px; height: 9px; background: var(--ks-night); border: 1px solid var(--ks-on-dark-3); transition: background-color var(--ks-dur-med), border-color var(--ks-dur-med); }
.ks-pstep.is-reached::before { background: var(--ks-red-500); border-color: var(--ks-red-500); }
.ks-pstep__num { font-family: var(--ks-font-display); font-weight: 800; font-size: var(--ks-text-3xl); line-height: 1; letter-spacing: -0.04em; color: var(--ks-rule-dark); transition: color var(--ks-dur-slow) var(--ks-ease-out); }
.ks-pstep.is-reached .ks-pstep__num { color: var(--ks-navy-500); }
.ks-pstep__title { font-size: var(--ks-text-lg); letter-spacing: -0.02em; }
.ks-pstep__text { font-size: var(--ks-text-sm); color: var(--ks-on-dark-2); max-width: 22rem; }

/* ============ 13. GROUP RAJA (rows + hover preview) ============ */
.ks-group { position: relative; padding-block: var(--ks-section-y); background: var(--ks-paper); }
.ks-group__head { display: grid; gap: var(--ks-space-5); margin-bottom: var(--ks-space-7); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .ks-group__head { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: end; } }
.ks-group__title { font-size: clamp(1.625rem, 1rem + 1.8vw, 2.5rem); }
.ks-group__lede { color: var(--ks-ink-2); max-width: 34rem; font-size: var(--ks-text-sm); }
.ks-group__list { border-top: 1px solid var(--ks-ink); }
.ks-grow { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--ks-space-4); align-items: center; padding: var(--ks-space-4) 0; border-bottom: 1px solid var(--ks-rule); overflow: hidden; isolation: isolate; }
@media (min-width: 900px) { .ks-grow { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; } }
.ks-grow::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--ks-night); transform: scaleY(0); transform-origin: bottom; transition: transform var(--ks-dur-med) var(--ks-ease-out); }
.ks-grow:hover::before, .ks-grow:focus-visible::before { transform: scaleY(1); }
.ks-grow__name { font-family: var(--ks-font-display); font-weight: 800; font-size: clamp(1.125rem, 0.9rem + 1vw, 1.625rem); letter-spacing: -0.035em; line-height: 1.1; transition: color var(--ks-dur-med), transform var(--ks-dur-med) var(--ks-ease-out); }
.ks-grow__desc { display: none; font-size: var(--ks-text-xs); color: var(--ks-ink-2); transition: color var(--ks-dur-med); }
@media (min-width: 900px) { .ks-grow__desc { display: block; } }
.ks-grow__url { display: inline-flex; align-items: center; gap: var(--ks-space-2); font-size: var(--ks-text-xs); font-weight: 600; color: var(--ks-navy-700); white-space: nowrap; transition: color var(--ks-dur-med); }
.ks-grow__url svg { width: 16px; height: 16px; transition: transform var(--ks-dur-med) var(--ks-ease-out); }
.ks-grow:hover .ks-grow__name, .ks-grow:focus-visible .ks-grow__name { color: var(--ks-on-dark); transform: translateX(var(--ks-space-4)); }
.ks-grow:hover .ks-grow__desc, .ks-grow:focus-visible .ks-grow__desc { color: var(--ks-on-dark-2); }
.ks-grow:hover .ks-grow__url, .ks-grow:focus-visible .ks-grow__url { color: var(--ks-on-dark); }
.ks-grow:hover .ks-grow__url svg { transform: translate(3px, -3px); }
.ks-group__preview { position: fixed; left: 0; top: 0; z-index: 50; width: 196px; aspect-ratio: 16 / 7; padding: 0; background: transparent; pointer-events: none; opacity: 0; transform: translate3d(var(--x, 0), var(--y, 0), 0) scale(0.9); transition: opacity var(--ks-dur-med) var(--ks-ease-out), transform 120ms linear; display: none; }
@media (hover: hover) and (min-width: 900px) { .ks-group__preview { display: grid; place-items: center; } }
.ks-group__preview.is-on { opacity: 1; transform: translate3d(var(--x, 0), var(--y, 0), 0) scale(1); }
.ks-group__preview img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 10px 24px oklch(10% 0.04 258 / 0.45)); }

/* ============ 14. FAQ (animated accordion) ============ */
.ks-faq { padding-block: var(--ks-section-y); background: var(--ks-paper-2); }
.ks-faq__grid { display: grid; gap: var(--ks-space-7); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1000px) { .ks-faq__grid { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); } }
.ks-faq__intro { display: grid; gap: var(--ks-space-5); align-content: start; }
.ks-faq__title { font-size: var(--ks-text-2xl); }
.ks-faq__intro p { color: var(--ks-ink-2); }
.ks-faq__list { border-top: 1px solid var(--ks-ink); }
.ks-faq__item { border-bottom: 1px solid var(--ks-rule); }
.ks-faq__q { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: var(--ks-space-5); padding: var(--ks-space-5) 0; font-family: var(--ks-font-display); font-weight: 700; font-size: var(--ks-text-lg); letter-spacing: -0.02em; line-height: 1.3; }
.ks-faq__icon { position: relative; flex: none; width: 20px; height: 20px; }
.ks-faq__icon::before, .ks-faq__icon::after { content: ""; position: absolute; left: 0; top: 50%; width: 20px; height: 1.5px; background: currentColor; transition: transform var(--ks-dur-med) var(--ks-ease-out); }
.ks-faq__icon::after { transform: rotate(90deg); }
.ks-faq__q[aria-expanded="true"] .ks-faq__icon::after { transform: rotate(0); }
.ks-faq__q:hover { color: var(--ks-navy-700); }
.ks-faq__a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--ks-dur-med) var(--ks-ease-out); }
.ks-faq__a > div { overflow: hidden; }
.ks-faq__a p { padding: 0 var(--ks-space-7) var(--ks-space-5) 0; color: var(--ks-ink-2); font-size: var(--ks-text-md); }
.ks-faq__item.is-open .ks-faq__a { grid-template-rows: 1fr; }
html:not(.ks-js) .ks-faq__a { grid-template-rows: 1fr; }

/* ============ 15. CTA ============ */
.ks-cta { position: relative; overflow: hidden; padding-block: var(--ks-section-y); background: var(--ks-navy-700); color: var(--ks-on-dark); }
.ks-cta__circle { position: absolute; right: -16vw; top: 38%; width: clamp(14rem, 30vw, 34rem); aspect-ratio: 1; border-radius: 50%; background: var(--ks-red-500); transform: translate3d(0, calc(-50% + var(--cy, 0px)), 0); }
.ks-cta__inner { position: relative; z-index: 1; display: grid; gap: var(--ks-space-7); }
.ks-cta__title { font-size: var(--ks-text-3xl); max-width: 14ch; color: var(--ks-on-dark); }
.ks-cta__row { display: grid; gap: var(--ks-space-6); grid-template-columns: minmax(0, 1fr); align-items: end; }
@media (min-width: 900px) { .ks-cta__row { grid-template-columns: minmax(0, 1fr) auto; } }
.ks-cta__lede { color: var(--ks-on-dark-2); max-width: 32rem; }
.ks-cta__actions { display: flex; flex-wrap: wrap; gap: var(--ks-space-3); }
.ks-magnetic { transition: transform 300ms var(--ks-ease-out); }
.ks-cta__contacts { display: grid; grid-template-columns: minmax(0, 1fr); border-top: 1px solid oklch(100% 0 0 / 0.25); }
@media (min-width: 700px) { .ks-cta__contacts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .ks-cta__contacts { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.ks-cta__contact { display: grid; gap: var(--ks-space-1); padding: var(--ks-space-5) var(--ks-space-4) var(--ks-space-5) 0; border-bottom: 1px solid oklch(100% 0 0 / 0.25); font-size: var(--ks-text-sm); }
.ks-cta__contact dt { font-size: var(--ks-text-xs); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ks-on-dark-2); }
.ks-cta__contact dd { font-weight: 600; }
.ks-cta__contact a:hover { text-decoration: underline; text-underline-offset: 4px; }

/* ============ 16. FOOTER ============ */
.ks-footer { background: var(--ks-night); color: var(--ks-on-dark-2); font-size: var(--ks-text-sm); }
.ks-footer__grid { display: grid; gap: var(--ks-space-7); padding-block: var(--ks-space-8) var(--ks-space-7); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 700px) { .ks-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .ks-footer__grid { grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr)); } }
.ks-footer__brand { display: grid; gap: var(--ks-space-4); align-content: start; max-width: 22rem; }
.ks-footer__brand img { width: 150px; }
.ks-footer__title { font-size: var(--ks-text-xs); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ks-on-dark-3); font-family: var(--ks-font-body); font-weight: 600; margin-bottom: var(--ks-space-4); }
.ks-footer__links { display: grid; gap: var(--ks-space-2); }
.ks-footer__links a, .ks-footer__address a { color: var(--ks-on-dark); white-space: nowrap; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size var(--ks-dur-med) var(--ks-ease-out); }
.ks-footer__links a:hover, .ks-footer__address a:hover { background-size: 100% 1px; }
.ks-footer__address { font-style: normal; display: grid; gap: var(--ks-space-2); }
.ks-footer__social { display: flex; gap: var(--ks-space-4); }
.ks-footer__social a { color: var(--ks-on-dark); }
.ks-footer__social svg { width: 20px; height: 20px; }
.ks-footer__word { font-family: var(--ks-font-display); font-weight: 800; font-size: min(7.1vw, 6.9rem); line-height: 0.9; letter-spacing: -0.05em; color: var(--ks-navy-900); white-space: nowrap; overflow: hidden; text-align: center; padding-top: var(--ks-space-5); user-select: none; }
.ks-footer__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--ks-space-3); padding-block: var(--ks-space-5); border-top: 1px solid var(--ks-rule-dark); font-size: var(--ks-text-xs); color: var(--ks-on-dark-3); }
.ks-footer__bottom nav { display: flex; gap: var(--ks-space-5); }
.ks-footer__bottom a:hover { color: var(--ks-on-dark); }

/* ============ 18. PAGE HERO (halaman layanan) ============ */
.ks-phero { position: relative; overflow: hidden; display: grid; align-items: end; min-height: min(88svh, 52rem); padding: 9rem 0 0; background: var(--ks-night); color: var(--ks-on-dark); }
.ks-phero__photo { position: absolute; inset: 0 0 0 auto; width: min(58%, 60rem); height: 100%; object-fit: cover; object-position: center 30%; filter: saturate(0.9) brightness(0.85); transform: scale(1.08); transition: transform 2.4s var(--ks-ease-out); }
.ks-phero.is-in .ks-phero__photo, html:not(.ks-js) .ks-phero__photo { transform: none; }
.ks-phero::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, var(--ks-night) 0%, var(--ks-night) 38%, oklch(16% 0.045 258 / 0.55) 62%, oklch(16% 0.045 258 / 0.15) 100%); }
.ks-phero::after { content: ""; position: absolute; inset: auto 0 0 0; height: 35%; z-index: 1; background: linear-gradient(to top, var(--ks-night), transparent); }
@media (max-width: 899px) { .ks-phero__photo { width: 100%; opacity: 0.45; } .ks-phero::before { background: linear-gradient(180deg, oklch(16% 0.045 258 / 0.6), var(--ks-night) 85%); } }
.ks-phero__inner { position: relative; z-index: 2; display: grid; gap: var(--ks-space-6); padding-bottom: var(--ks-space-7); }
.ks-crumbs { display: flex; flex-wrap: wrap; gap: var(--ks-space-2); font-size: var(--ks-text-xs); color: var(--ks-on-dark-3); }
.ks-crumbs a { color: var(--ks-on-dark-2); }
.ks-crumbs a:hover { color: var(--ks-on-dark); }
.ks-crumbs li + li::before { content: "/"; margin-right: var(--ks-space-2); color: var(--ks-on-dark-3); }
.ks-phero__title { font-size: clamp(2.5rem, 1rem + 5vw, 5.75rem); max-width: 14ch; }
.ks-phero__lede { font-size: var(--ks-text-lg); color: var(--ks-on-dark-2); max-width: 36rem; line-height: 1.55; }

/* ============ 19. ISSUES (tantangan) ============ */
.ks-issues { padding-block: var(--ks-section-y); background: var(--ks-paper); }
.ks-issues__head { display: grid; gap: var(--ks-space-5); margin-bottom: var(--ks-space-8); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .ks-issues__head { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: end; } }
.ks-issues__title { font-size: var(--ks-text-2xl); max-width: 18ch; }
.ks-issues__lede { color: var(--ks-ink-2); max-width: 34rem; }
.ks-issues__grid { display: grid; grid-template-columns: minmax(0, 1fr); border-top: 1px solid var(--ks-ink); }
@media (min-width: 700px) { .ks-issues__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .ks-issues__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.ks-issue { position: relative; display: grid; gap: var(--ks-space-3); align-content: start; padding: var(--ks-space-6) var(--ks-space-6) var(--ks-space-7) 0; border-bottom: 1px solid var(--ks-rule); }
@media (min-width: 700px) { .ks-issue { padding-left: var(--ks-space-5); border-left: 1px solid var(--ks-rule); } }
.ks-issue::before { content: ""; position: absolute; left: 0; top: -1px; height: 2px; width: 100%; background: var(--ks-red-500); transform: scaleX(0); transform-origin: left; transition: transform var(--ks-dur-slow) var(--ks-ease-out); }
.ks-issue:hover::before { transform: scaleX(1); }
.ks-issue__num { font-family: var(--ks-font-display); font-weight: 800; font-size: var(--ks-text-xl); color: var(--ks-rule); letter-spacing: -0.03em; transition: color var(--ks-dur-med); }
.ks-issue:hover .ks-issue__num { color: var(--ks-red-500); }
.ks-issue__title { font-size: var(--ks-text-lg); letter-spacing: -0.02em; }
.ks-issue__text { font-size: var(--ks-text-sm); color: var(--ks-ink-2); }

/* ============ 20. STICKY FEATURES (komponen layanan) ============ */
.ks-feat { padding-block: var(--ks-section-y); background: var(--ks-night); color: var(--ks-on-dark); }
.ks-feat__grid { display: grid; gap: var(--ks-space-7); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1000px) { .ks-feat__grid { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: var(--ks-space-9); } }
.ks-feat__aside { display: grid; gap: var(--ks-space-5); align-content: start; justify-items: start; }
@media (min-width: 1000px) { .ks-feat__aside { position: sticky; top: 120px; align-self: start; } }
.ks-feat__title { font-size: var(--ks-text-2xl); }
.ks-feat__lede { color: var(--ks-on-dark-2); max-width: 30rem; }
.ks-feat__meter { display: none; align-items: center; gap: var(--ks-space-5); width: 100%; max-width: 24rem; }
@media (min-width: 1000px) { .ks-feat__meter { display: flex; } }
.ks-feat__count { font-family: var(--ks-font-display); font-weight: 800; font-size: var(--ks-text-3xl); line-height: 1; letter-spacing: -0.04em; color: var(--ks-navy-500); font-variant-numeric: tabular-nums; }
.ks-feat__progress { flex: 1; height: 2px; background: var(--ks-rule-dark); }
.ks-feat__progress::after { content: ""; display: block; height: 100%; background: var(--ks-red-500); transform: scaleX(var(--p, 0)); transform-origin: left; transition: transform var(--ks-dur-med) var(--ks-ease-out); }
.ks-feat__list { border-top: 1px solid var(--ks-rule-dark); }
.ks-feat__item { display: grid; grid-template-columns: 3.5rem minmax(0, 1fr); gap: var(--ks-space-4); padding: var(--ks-space-7) 0; border-bottom: 1px solid var(--ks-rule-dark); }
.ks-js .ks-feat__item { opacity: 0.32; transition: opacity var(--ks-dur-slow) var(--ks-ease-out); }
.ks-js .ks-feat__item.is-current { opacity: 1; }
.ks-feat__num { font-size: var(--ks-text-xs); font-weight: 600; letter-spacing: 0.1em; color: var(--ks-red-500); padding-top: 0.6em; }
.ks-feat__name { font-size: var(--ks-text-xl); letter-spacing: -0.025em; margin-bottom: var(--ks-space-3); }
.ks-feat__text { color: var(--ks-on-dark-2); max-width: 38rem; }
.ks-feat__points { display: flex; flex-wrap: wrap; gap: var(--ks-space-2) var(--ks-space-5); margin-top: var(--ks-space-4); font-size: var(--ks-text-xs); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ks-on-dark-3); }

/* ============ 21. COMPARE (toggle) ============ */
.ks-compare { padding-block: var(--ks-section-y); background: var(--ks-paper-2); }
.ks-compare__head { display: grid; gap: var(--ks-space-5); margin-bottom: var(--ks-space-7); grid-template-columns: minmax(0, 1fr); align-items: end; }
@media (min-width: 900px) { .ks-compare__head { grid-template-columns: minmax(0, 1fr) auto; } }
.ks-compare__title { font-size: var(--ks-text-2xl); max-width: 16ch; }
.ks-switch { position: relative; display: inline-grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--ks-ink); justify-self: start; }
.ks-switch__btn { position: relative; z-index: 1; min-height: 52px; padding: 0 var(--ks-space-5); font-size: var(--ks-text-sm); font-weight: 600; white-space: nowrap; text-align: center; color: var(--ks-ink); transition: color var(--ks-dur-med) var(--ks-ease-out); }
.ks-switch__btn[aria-pressed="true"] { color: var(--ks-on-dark); }
.ks-switch__thumb { position: absolute; top: 0; bottom: 0; left: 0; width: 50%; background: var(--ks-ink); transition: transform var(--ks-dur-med) var(--ks-ease-out), background-color var(--ks-dur-med); }
.ks-compare[data-mode="mps"] .ks-switch__thumb { transform: translateX(100%); background: var(--ks-red-600); }
html:not(.ks-js) .ks-switch { display: none; }
.ks-compare__table { border-top: 1px solid var(--ks-ink); }
.ks-crow { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--ks-space-2); padding: var(--ks-space-5) 0; border-bottom: 1px solid var(--ks-rule); }
@media (min-width: 800px) { .ks-crow { grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr); gap: var(--ks-space-6); align-items: center; } }
.ks-crow__aspect { font-family: var(--ks-font-display); font-weight: 700; font-size: var(--ks-text-lg); letter-spacing: -0.02em; }
.ks-crow__vals { display: grid; }
.ks-crow__val { grid-area: 1 / 1; display: flex; align-items: center; gap: var(--ks-space-3); font-size: var(--ks-text-md); transition: opacity var(--ks-dur-med) var(--ks-ease-out), transform var(--ks-dur-med) var(--ks-ease-out); transition-delay: calc(var(--i, 0) * 40ms); }
.ks-crow__val::before { content: ""; flex: none; width: 10px; height: 10px; }
.ks-crow__val--old { color: var(--ks-ink-3); }
.ks-crow__val--old::before { border: 1.5px solid var(--ks-ink-3); }
.ks-crow__val--new { color: var(--ks-ink); font-weight: 600; }
.ks-crow__val--new::before { background: var(--ks-red-500); }
.ks-compare[data-mode="old"] .ks-crow__val--new, .ks-compare[data-mode="mps"] .ks-crow__val--old { opacity: 0; transform: translateY(10px); }
html:not(.ks-js) .ks-crow__vals { gap: var(--ks-space-2); }
html:not(.ks-js) .ks-crow__val { grid-area: auto; opacity: 1; transform: none; }

/* ============ 22. BRAND PORTFOLIO (tabs) ============ */
.ks-port { padding-block: var(--ks-section-y); background: var(--ks-paper); }
.ks-port__head { display: grid; gap: var(--ks-space-5); margin-bottom: var(--ks-space-7); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .ks-port__head { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: end; } }
.ks-port__title { font-size: var(--ks-text-2xl); }
.ks-port__lede { color: var(--ks-ink-2); max-width: 34rem; }
.ks-ptabs { display: flex; border-bottom: 1px solid var(--ks-rule); overflow-x: auto; scrollbar-width: none; }
.ks-ptabs::-webkit-scrollbar { display: none; }
.ks-ptab { position: relative; flex: none; display: flex; align-items: center; justify-content: center; gap: var(--ks-space-3); min-height: 80px; padding: 0 var(--ks-space-6); opacity: 0.45; transition: opacity var(--ks-dur-med); }
.ks-ptab img { height: 28px; width: auto; max-width: 120px; object-fit: contain; }
.ks-ptab::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--ks-red-500); transform: scaleX(0); transition: transform var(--ks-dur-med) var(--ks-ease-out); }
.ks-ptab:hover { opacity: 0.8; }
.ks-ptab[aria-selected="true"] { opacity: 1; }
.ks-ptab[aria-selected="true"]::after { transform: scaleX(1); }
.ks-ppanel { padding-top: var(--ks-space-7); }
.ks-ppanel[hidden] { display: none; }
.ks-js .ks-ppanel:not([hidden]) { animation: ks-drop var(--ks-dur-slow) var(--ks-ease-out); }
.ks-ppanel__nojs { display: none; }
html:not(.ks-js) .ks-ppanel__nojs { display: block; font-size: var(--ks-text-lg); margin-bottom: var(--ks-space-4); }
html:not(.ks-js) .ks-ptabs { display: none; }
.ks-pcats { display: grid; grid-template-columns: minmax(0, 1fr); border-top: 1px solid var(--ks-ink); }
@media (min-width: 700px) { .ks-pcats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .ks-pcats { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.ks-pcat { padding: var(--ks-space-5) var(--ks-space-5) var(--ks-space-6) 0; border-bottom: 1px solid var(--ks-rule); }
.ks-pcat__name { font-size: var(--ks-text-lg); letter-spacing: -0.02em; margin-bottom: var(--ks-space-3); }
.ks-pcat__list { display: grid; gap: var(--ks-space-1); font-size: var(--ks-text-sm); color: var(--ks-ink-2); }
.ks-pcat__list li::before { content: "— "; color: var(--ks-red-500); }

/* ============ 23. PRODUCTS ============ */
.ks-prods { padding-block: var(--ks-section-y); background: var(--ks-paper-2); }
.ks-prods__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: var(--ks-space-5); margin-bottom: var(--ks-space-7); }
.ks-prods__title { font-size: var(--ks-text-2xl); max-width: 16ch; }
.ks-prods__grid { display: grid; grid-template-columns: minmax(0, 1fr); border-top: 1px solid var(--ks-ink); }
@media (min-width: 600px) { .ks-prods__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .ks-prods__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.ks-prod { position: relative; display: grid; grid-template-rows: auto 1fr auto; gap: var(--ks-space-4); padding: var(--ks-space-6) var(--ks-space-5); border-bottom: 1px solid var(--ks-rule); isolation: isolate; }
@media (min-width: 600px) { .ks-prod:nth-child(n+2) { border-left: 1px solid var(--ks-rule); } }
@media (min-width: 600px) and (max-width: 1099px) { .ks-prod:nth-child(3) { border-left: 0; } }
.ks-prod::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--ks-paper); transform: scaleY(0); transform-origin: bottom; transition: transform var(--ks-dur-med) var(--ks-ease-out); }
.ks-prod:hover::before, .ks-prod:focus-visible::before { transform: scaleY(1); }
.ks-prod__media { position: relative; display: block; aspect-ratio: 1 / 1; }
.ks-prod__media img { position: absolute; inset: 8%; width: 84%; height: 84%; object-fit: contain; transition: transform var(--ks-dur-slow) var(--ks-ease-out); }
.ks-prod:hover .ks-prod__media img { transform: scale(1.06) translateY(-6px); }
.ks-prod__brand { font-size: var(--ks-text-xs); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ks-red-600); }
.ks-prod__name { display: block; font-family: var(--ks-font-display); font-weight: 700; font-size: var(--ks-text-lg); letter-spacing: -0.02em; line-height: 1.2; margin-top: var(--ks-space-1); }
.ks-prod__spec { display: block; font-size: var(--ks-text-sm); color: var(--ks-ink-2); margin-top: var(--ks-space-2); }

/* ============ 24. SECTORS ============ */
.ks-sectors { padding-block: var(--ks-section-y); background: var(--ks-paper); }
.ks-sectors__title { font-size: var(--ks-text-2xl); max-width: 18ch; margin-top: var(--ks-space-5); }
.ks-sectors__list { display: grid; grid-template-columns: minmax(0, 1fr); margin-top: var(--ks-space-7); border-top: 1px solid var(--ks-ink); }
@media (min-width: 700px) { .ks-sectors__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .ks-sectors__list { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.ks-sector { display: flex; align-items: baseline; gap: var(--ks-space-3); padding: var(--ks-space-5) var(--ks-space-4) var(--ks-space-5) 0; border-bottom: 1px solid var(--ks-rule); font-family: var(--ks-font-display); font-weight: 700; font-size: var(--ks-text-lg); letter-spacing: -0.02em; transition: color var(--ks-dur-med), transform var(--ks-dur-med) var(--ks-ease-out); }
.ks-sector span { font-family: var(--ks-font-body); font-size: var(--ks-text-xs); font-weight: 600; color: var(--ks-red-600); }
.ks-sector:hover { color: var(--ks-navy-700); transform: translateX(6px); }
.ks-sectors__note { margin-top: var(--ks-space-6); color: var(--ks-ink-2); max-width: 46rem; }

/* ============ 25. GRUP KIRANA (panel melebar) ============ */
.ks-gk { padding-block: var(--ks-section-y); background: var(--ks-night); color: var(--ks-on-dark); }
.ks-gk__head { display: grid; gap: var(--ks-space-5); margin-bottom: var(--ks-space-7); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .ks-gk__head { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: end; } }
.ks-gk__title { font-size: clamp(1.625rem, 1rem + 1.8vw, 2.5rem); color: var(--ks-on-dark); }
.ks-gk__lede { color: var(--ks-on-dark-2); max-width: 34rem; font-size: var(--ks-text-sm); }
.ks-gk__panels { display: flex; flex-direction: column; border-top: 1px solid var(--ks-rule-dark); }
.ks-gk__panel { border-bottom: 1px solid var(--ks-rule-dark); }
.ks-gk__tab { width: 100%; display: flex; align-items: center; gap: var(--ks-space-4); min-height: 64px; color: var(--ks-on-dark-2); transition: color var(--ks-dur-med); }
.ks-gk__tab:hover, .ks-gk__panel.is-active .ks-gk__tab { color: var(--ks-on-dark); }
.ks-gk__num { font-size: var(--ks-text-xs); font-weight: 600; color: var(--ks-red-500); letter-spacing: 0.08em; }
.ks-gk__name { font-family: var(--ks-font-display); font-weight: 800; font-size: clamp(1.125rem, 0.9rem + 1vw, 1.5rem); letter-spacing: -0.03em; white-space: nowrap; }
.ks-gk__body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--ks-dur-slow) var(--ks-ease-out); }
.ks-gk__panel.is-active .ks-gk__body { grid-template-rows: 1fr; }
.ks-gk__body > .ks-gk__inner { overflow: hidden; }
.ks-gk__inner { display: grid; gap: var(--ks-space-4); justify-items: start; }
.ks-gk__inner > :last-child { margin-bottom: var(--ks-space-6); }
.ks-gk__logo { display: grid; place-items: center; width: 100%; max-width: 22rem; aspect-ratio: 16 / 7; padding: var(--ks-space-4) var(--ks-space-5); background: var(--ks-logo-panel); }
.ks-gk__logo img { width: 100%; height: 100%; object-fit: contain; }
.ks-gk__desc { color: var(--ks-on-dark-2); font-size: var(--ks-text-sm); max-width: 26rem; }
.ks-gk .ks-arrowlink { color: var(--ks-on-dark); }

@media (min-width: 1000px) {
  .ks-gk__panels { flex-direction: row; height: 30rem; border-top: 0; border-left: 1px solid var(--ks-rule-dark); }
  .ks-gk__panel { position: relative; flex: 1 1 0; min-width: 0; display: flex; border-bottom: 0; border-right: 1px solid var(--ks-rule-dark); overflow: hidden; transition: flex-grow var(--ks-dur-slow) var(--ks-ease-out), background-color var(--ks-dur-slow); }
  .ks-gk__panel.is-active { flex-grow: 4.2; background: var(--ks-night-2); }
  .ks-gk__panel::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--ks-red-500); transform: scaleX(0); transform-origin: left; transition: transform var(--ks-dur-slow) var(--ks-ease-out); }
  .ks-gk__panel.is-active::before { transform: scaleX(1); }
  .ks-gk__tab { flex: none; width: 5rem; height: 100%; min-height: 0; flex-direction: column; justify-content: space-between; align-items: center; padding: var(--ks-space-6) 0; }
  .ks-gk__name { writing-mode: vertical-rl; transform: rotate(180deg); }
  .ks-gk__body { flex: 1; min-width: 0; display: block; opacity: 0; transition: opacity var(--ks-dur-med) var(--ks-ease-out); }
  .ks-gk__panel.is-active .ks-gk__body { opacity: 1; transition-delay: 220ms; }
  .ks-gk__inner { height: 100%; width: 26rem; max-width: 100%; align-content: end; padding: var(--ks-space-6) var(--ks-space-6) var(--ks-space-6) 0; }
  .ks-gk__inner > :last-child { margin-bottom: 0; }
}

/* ============ 26. SOLUSI: varian foto produk (terang) ============ */
.ks-sol__visual--mps { background: var(--ks-prod-light); }
.ks-sol__visual--daas { background: var(--ks-prod-gray); }
.ks-sol__photo--product { inset: auto; left: 3%; top: 44%; width: 94%; height: auto; object-fit: initial; filter: none; -webkit-mask-image: linear-gradient(90deg, transparent, oklch(0% 0 0) 9%, oklch(0% 0 0) 91%, transparent), linear-gradient(180deg, transparent, oklch(0% 0 0) 14%, oklch(0% 0 0) 86%, transparent); -webkit-mask-composite: source-in; mask-image: linear-gradient(90deg, transparent, oklch(0% 0 0) 9%, oklch(0% 0 0) 91%, transparent), linear-gradient(180deg, transparent, oklch(0% 0 0) 14%, oklch(0% 0 0) 86%, transparent); mask-composite: intersect; transform: translate(8%, -50%) scale(1.04); opacity: 0; transition: transform 1.2s var(--ks-ease-out), opacity 900ms var(--ks-ease-out); }
.ks-sol__visual.is-active .ks-sol__photo--product { transform: translate(0, -50%); opacity: 1; }
.ks-sol__visual--light::after { background: linear-gradient(180deg, oklch(16% 0.045 258 / 0.32) 0%, oklch(16% 0.045 258 / 0.4) 55%, oklch(16% 0.045 258 / 0.78) 100%); }
.ks-sol__visual--light svg { filter: drop-shadow(0 2px 10px oklch(10% 0.04 258 / 0.85)); }

/* ============ 27. GRUP KIRANA: gambar spesialisasi + logo kanan atas ============ */
.ks-gk__body { position: relative; }
.ks-gk__bg { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; margin-bottom: var(--ks-space-4); }
.ks-gk__logo { position: absolute; top: var(--ks-space-3); right: var(--ks-space-3); z-index: 2; display: block; width: clamp(130px, 30vw, 190px); aspect-ratio: auto; padding: 0; background: none; }
.ks-gk__logo img { width: 100%; height: auto; filter: drop-shadow(0 2px 4px oklch(10% 0.04 258 / 0.9)) drop-shadow(0 8px 22px oklch(10% 0.04 258 / 0.6)); }
@media (min-width: 1000px) {
  .ks-gk__body { position: static; }
  .ks-gk__bg { position: absolute; inset: 0; z-index: 0; height: 100%; aspect-ratio: auto; margin: 0; opacity: 0; transform: scale(1.08); transition: opacity var(--ks-dur-slow) var(--ks-ease-out), transform 1.6s var(--ks-ease-out); }
  .ks-gk__panel.is-active .ks-gk__bg { opacity: 1; transform: none; }
  .ks-gk__panel::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0; background: linear-gradient(90deg, oklch(16% 0.045 258 / 0.92) 0%, oklch(16% 0.045 258 / 0.55) 30%, oklch(16% 0.045 258 / 0.1) 60%), linear-gradient(180deg, oklch(16% 0.045 258 / 0.55) 0%, transparent 28%, transparent 55%, oklch(16% 0.045 258 / 0.85) 100%); transition: opacity var(--ks-dur-slow) var(--ks-ease-out); }
  .ks-gk__panel.is-active::after { opacity: 1; }
  .ks-gk__tab, .ks-gk__inner { position: relative; z-index: 2; }
  .ks-gk__logo { top: var(--ks-space-5); right: var(--ks-space-5); width: 200px; opacity: 0; transform: translateY(-8px); transition: opacity var(--ks-dur-med) var(--ks-ease-out), transform var(--ks-dur-med) var(--ks-ease-out); }
  .ks-gk__panel.is-active .ks-gk__logo { opacity: 1; transform: none; transition-delay: 260ms; }
  .ks-gk__panel::before { z-index: 3; }
}

/* ============ 28. SEKTOR INTERAKTIF (logo klien per sektor) ============ */
.ks-secx { padding-block: var(--ks-section-y); background: var(--ks-paper); }
.ks-secx__head { display: grid; gap: var(--ks-space-5); margin-bottom: var(--ks-space-7); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .ks-secx__head { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: end; } }
.ks-secx__title { font-size: var(--ks-text-2xl); max-width: 18ch; }
.ks-secx__lede { color: var(--ks-ink-2); max-width: 34rem; }
.ks-secx__list { position: relative; border-top: 1px solid var(--ks-ink); }
.ks-secx__item { border-bottom: 1px solid var(--ks-rule); }
.ks-secx__btn { position: relative; width: 100%; display: grid; grid-template-columns: 3rem minmax(0, 1fr) auto; gap: var(--ks-space-4); align-items: center; padding: var(--ks-space-5) 0; color: var(--ks-ink-3); transition: color var(--ks-dur-med), padding var(--ks-dur-med) var(--ks-ease-out); }
.ks-secx__btn::after { content: ""; position: absolute; left: 0; bottom: -1px; width: 100%; height: 2px; background: var(--ks-red-500); transform: scaleX(0); transform-origin: left; transition: transform var(--ks-dur-slow) var(--ks-ease-out); }
.ks-secx__btn:hover, .ks-secx__item.is-active .ks-secx__btn { color: var(--ks-ink); }
.ks-secx__item.is-active .ks-secx__btn { padding-left: var(--ks-space-3); }
.ks-secx__item.is-active .ks-secx__btn::after { transform: scaleX(1); }
.ks-secx__num { font-size: var(--ks-text-xs); font-weight: 600; color: var(--ks-red-600); letter-spacing: 0.08em; }
.ks-secx__name { font-family: var(--ks-font-display); font-weight: 800; font-size: clamp(1.25rem, 0.9rem + 1.4vw, 2rem); letter-spacing: -0.03em; line-height: 1.15; }
.ks-secx__count { font-size: var(--ks-text-xs); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; white-space: nowrap; }
.ks-secx__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--ks-dur-slow) var(--ks-ease-out); }
.ks-secx__item.is-active .ks-secx__panel { grid-template-rows: 1fr; }
.ks-secx__inner { overflow: hidden; display: grid; gap: var(--ks-space-4); }
.ks-secx__inner > :first-child { margin-top: var(--ks-space-4); }
.ks-secx__inner > :last-child { margin-bottom: var(--ks-space-6); }
.ks-secx__cap { font-size: var(--ks-text-xs); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ks-ink-3); padding-left: calc(3rem + var(--ks-space-4) + var(--ks-space-3)); }
.ks-secx__logos { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ks-space-5) var(--ks-space-7); padding-left: calc(3rem + var(--ks-space-4) + var(--ks-space-3)); }
.ks-secx__logos img { height: clamp(34px, 1.6rem + 1.4vw, 54px); width: auto; max-width: 170px; object-fit: contain; opacity: 0; transform: translateY(12px); transition: opacity var(--ks-dur-med) var(--ks-ease-out), transform var(--ks-dur-med) var(--ks-ease-out); }
.ks-secx__item.is-active .ks-secx__logos img { opacity: 1; transform: none; }
.ks-secx__item.is-active .ks-secx__logos li:nth-child(2) img { transition-delay: 60ms; }
.ks-secx__item.is-active .ks-secx__logos li:nth-child(3) img { transition-delay: 120ms; }
.ks-secx__item.is-active .ks-secx__logos li:nth-child(4) img { transition-delay: 180ms; }
.ks-secx__item.is-active .ks-secx__logos li:nth-child(5) img { transition-delay: 240ms; }
.ks-secx__list--plain .ks-secx__btn { grid-template-columns: 3rem minmax(0, 1fr); }
.ks-secx__list--plain .ks-secx__item:hover .ks-secx__btn { color: var(--ks-ink); padding-left: var(--ks-space-3); }
.ks-secx__list--plain .ks-secx__item:hover .ks-secx__btn::after { transform: scaleX(1); }
.ks-secx__empty { color: var(--ks-ink-2); font-size: var(--ks-text-sm); padding-left: calc(3rem + var(--ks-space-4) + var(--ks-space-3)); }
@media (max-width: 599px) {
  .ks-secx__btn { grid-template-columns: 2rem minmax(0, 1fr) auto; }
  .ks-secx__cap, .ks-secx__logos, .ks-secx__empty { padding-left: calc(2rem + var(--ks-space-4)); }
  .ks-secx__logos { gap: var(--ks-space-4) var(--ks-space-5); }
}
html:not(.ks-js) .ks-secx__panel { grid-template-rows: 1fr; }
html:not(.ks-js) .ks-secx__logos img { opacity: 1; transform: none; }

/* ============ 29. HERO LAYANAN (varian ks-hero) ============ */
.ks-hero--service .ks-crumbs { margin-bottom: calc(var(--ks-space-4) * -1); }
.ks-hero__title--service { font-size: clamp(2.25rem, 0.7rem + 3.8vw, 4.5rem); max-width: none; } /* lebih kecil dari home agar tidak menabrak foto produk */
.ks-hero__photo { position: absolute; z-index: 0; right: 5vw; top: 50%; width: min(40vw, 50rem); height: auto; transform: translateY(-66%); filter: drop-shadow(0 40px 60px oklch(10% 0.04 258 / 0.55)); -webkit-mask-image: linear-gradient(180deg, oklch(0% 0 0) 88%, transparent 100%); mask-image: linear-gradient(180deg, oklch(0% 0 0) 88%, transparent 100%); pointer-events: none; animation: ks-photo-in 1.4s var(--ks-ease-out) both 200ms; }
@keyframes ks-photo-in { from { opacity: 0; transform: translate(6%, -62%); } to { opacity: 1; transform: translateY(-66%); } }
@media (max-width: 899px) { .ks-hero__photo { display: none; } }

/* ============ 30. STATEMENT varian tint + 6 pilar ============ */
.ks-statement--tint { background: var(--ks-paper-2); }
@media (min-width: 700px) { .ks-pillars--6 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .ks-pillars--6 { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.ks-statement .ks-pillars--6 .ks-pillar__text { font-size: var(--ks-text-xs); }

/* ============ 31. BRAND GRID (MPS) ============ */
.ks-brands2 { padding-block: var(--ks-section-y); background: var(--ks-paper); }
.ks-brands2__head { display: grid; gap: var(--ks-space-5); margin-bottom: var(--ks-space-7); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .ks-brands2__head { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: end; } }
.ks-brands2__title { font-size: var(--ks-text-2xl); }
.ks-brands2__lede { color: var(--ks-ink-2); max-width: 34rem; }
.ks-brands2__grid { display: grid; grid-template-columns: minmax(0, 1fr); border-top: 1px solid var(--ks-ink); border-left: 1px solid var(--ks-rule); }
@media (min-width: 600px) { .ks-brands2__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .ks-brands2__grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.ks-bcell { position: relative; isolation: isolate; overflow: hidden; display: grid; grid-template-rows: 1fr auto; min-height: 22rem; padding: var(--ks-space-6) var(--ks-space-5); border-right: 1px solid var(--ks-rule); border-bottom: 1px solid var(--ks-rule); outline-offset: -4px; }
.ks-bcell::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--ks-night); transform: translateY(101%); transition: transform var(--ks-dur-slow) var(--ks-ease-out); }
.ks-bcell::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--ks-red-500); transform: scaleX(0); transform-origin: left; transition: transform var(--ks-dur-slow) var(--ks-ease-out); }
.ks-bcell__logo { display: grid; place-items: center; transition: transform var(--ks-dur-slow) var(--ks-ease-out); }
.ks-bcell__logo img { height: clamp(36px, 1.8rem + 1.6vw, 60px); width: auto; max-width: 80%; object-fit: contain; transition: filter var(--ks-dur-med); }
.ks-bcell__logo img[alt="HP"] { height: clamp(56px, 2.6rem + 2vw, 88px); }
.ks-bcell__info { display: grid; gap: var(--ks-space-3); opacity: 0; transform: translateY(16px); transition: opacity var(--ks-dur-med) var(--ks-ease-out), transform var(--ks-dur-slow) var(--ks-ease-out); }
.ks-bcell__tag { font-size: var(--ks-text-xs); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ks-red-500); }
.ks-bcell__list { display: grid; gap: var(--ks-space-1); font-size: var(--ks-text-sm); color: var(--ks-on-dark-2); }
.ks-bcell__list li::before { content: "— "; color: var(--ks-red-500); }
.ks-bcell:hover::before, .ks-bcell:focus-visible::before, .ks-bcell:focus-within::before { transform: none; }
.ks-bcell:hover::after, .ks-bcell:focus-visible::after { transform: scaleX(1); }
.ks-bcell:hover .ks-bcell__logo, .ks-bcell:focus-visible .ks-bcell__logo { transform: translateY(-28%) scale(0.85); }
.ks-bcell:hover .ks-bcell__logo img, .ks-bcell:focus-visible .ks-bcell__logo img { filter: brightness(0) invert(1); }
.ks-bcell:hover .ks-bcell__info, .ks-bcell:focus-visible .ks-bcell__info { opacity: 1; transform: none; transition-delay: 120ms; }
@media (hover: none) {
  .ks-bcell { min-height: 0; gap: var(--ks-space-5); }
  .ks-bcell__info { opacity: 1; transform: none; }
  .ks-bcell__list { color: var(--ks-ink-2); }
  .ks-bcell__logo { justify-items: start; }
}

/* ============ PENGHARGAAN (home 05b) ============ */
.ks-awards { padding-block: var(--ks-section-y); background: var(--ks-paper); overflow: hidden; }
.ks-awards__head { display: grid; gap: var(--ks-space-5); margin-bottom: var(--ks-space-7); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .ks-awards__head { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: end; } }
.ks-awards__title { font-size: var(--ks-text-2xl); }
.ks-awards__lede { color: var(--ks-ink-2); max-width: 34rem; }
.ks-awards__marquee { --gap: clamp(2rem, 1rem + 3vw, 4rem); margin-bottom: var(--ks-space-7); padding-block: var(--ks-space-3); }
.ks-awards__marquee .ks-marquee__track { align-items: flex-end; }
.ks-awards__marquee:hover .ks-marquee__track { animation-play-state: running; }
.ks-awards__img { display: block; width: auto; height: clamp(6.5rem, 4.5rem + 4vw, 9.5rem); max-width: none; }
.ks-awards__list { display: grid; grid-template-columns: minmax(0, 1fr); border-top: 1px solid var(--ks-rule); }
@media (min-width: 700px) { .ks-awards__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .ks-awards__list { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.ks-award { position: relative; display: grid; gap: var(--ks-space-2); align-content: start; padding: var(--ks-space-5) var(--ks-space-4) var(--ks-space-5) 0; border-bottom: 1px solid var(--ks-rule); }
.ks-award::before { content: ""; position: absolute; left: 0; top: -1px; height: 1px; width: 100%; background: var(--ks-red-500); transform: scaleX(0); transform-origin: left; transition: transform var(--ks-dur-slow) var(--ks-ease-out); }
.ks-award:hover::before { transform: scaleX(1); }
.ks-award__year { font-size: var(--ks-text-xs); font-weight: 600; letter-spacing: 0.12em; color: var(--ks-red-600); font-variant-numeric: tabular-nums; }
.ks-award__name { font-family: var(--ks-font-display); font-weight: 700; font-size: var(--ks-text-md); line-height: 1.3; color: var(--ks-ink); }
.ks-award__by { font-size: var(--ks-text-sm); color: var(--ks-ink-3); }

/* ============ MPS v3 (isi Raja Printer, gaya Kirana) ============ */
.ks-compare__lede, .ks-process__lede { max-width: 36rem; margin-top: var(--ks-space-4); }
.ks-compare__lede { color: var(--ks-ink-2); }
.ks-process__lede { color: var(--ks-on-dark-2); margin-bottom: var(--ks-space-7); }

/* --- Gunung es biaya --- */
.ks-ice { padding-block: var(--ks-section-y); background: var(--ks-paper); overflow: hidden; }
.ks-ice__head { display: grid; gap: var(--ks-space-5); margin-bottom: var(--ks-space-7); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .ks-ice__head { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: end; } }
.ks-ice__title { font-size: var(--ks-text-2xl); }
.ks-ice__lede { color: var(--ks-ink-2); max-width: 34rem; }
.ks-ice__berg { position: relative; display: grid; }
.ks-ice__zone { display: grid; gap: var(--ks-space-4); padding-block: var(--ks-space-6); }
@media (min-width: 900px) { .ks-ice__zone { grid-template-columns: 14rem minmax(0, 1fr); align-items: start; } }
.ks-ice__zone--deep { background: linear-gradient(180deg, oklch(41% 0.12 252 / 0.07), oklch(41% 0.12 252 / 0.16)); padding-inline: var(--ks-space-5); margin-inline: calc(var(--ks-space-5) * -1); }
.ks-ice__tag { font-size: var(--ks-text-xs); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ks-ink-3); padding-top: var(--ks-space-2); }
.ks-ice__zone--deep .ks-ice__tag { color: var(--ks-navy-700); }
.ks-ice__list { display: grid; grid-template-columns: minmax(0, 1fr); border-top: 1px solid var(--ks-ink); }
@media (min-width: 700px) { .ks-ice__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .ks-ice__list--deep { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.ks-ice__list--deep { border-top-color: var(--ks-navy-700); }
.ks-ice__item { display: grid; gap: var(--ks-space-1); padding: var(--ks-space-4) var(--ks-space-4) var(--ks-space-4) 0; border-bottom: 1px solid var(--ks-rule); }
.ks-ice__name { font-family: var(--ks-font-display); font-weight: 800; font-size: var(--ks-text-lg); letter-spacing: -0.02em; }
.ks-ice__desc { font-size: var(--ks-text-sm); color: var(--ks-ink-2); }
.ks-ice__zone--deep .ks-ice__item { border-bottom-color: oklch(41% 0.12 252 / 0.2); }
.ks-ice__water { position: relative; height: 34px; }
.ks-ice__wave { position: absolute; left: 0; right: 0; top: 50%; height: 2px; background: var(--ks-navy-700); transform: scaleX(0); transform-origin: left; transition: transform 1.6s var(--ks-ease-out); }
.ks-ice__wave::after { content: ""; position: absolute; right: 0; top: 50%; width: 10px; height: 10px; border-radius: 50%; background: var(--ks-red-500); transform: translate(50%, -50%); animation: ks-pulse 2.4s var(--ks-ease-in-out) infinite; }
.ks-ice__mark { position: absolute; right: var(--ks-space-5); top: -2px; font-size: var(--ks-text-xs); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ks-navy-700); background: var(--ks-paper); padding-inline: var(--ks-space-2); }
.ks-js [data-ks-ice] .ks-ice__item { opacity: 0; transform: translate3d(0, 18px, 0); transition: opacity var(--ks-dur-slow) var(--ks-ease-out), transform var(--ks-dur-slow) var(--ks-ease-out); transition-delay: calc(var(--i, 0) * 110ms); }
.ks-js [data-ks-ice] .ks-ice__zone--deep .ks-ice__item { transform: translate3d(0, -18px, 0); transition-delay: calc(500ms + var(--i, 0) * 140ms); }
[data-ks-ice].is-in .ks-ice__item { opacity: 1 !important; transform: none !important; }
[data-ks-ice].is-in .ks-ice__wave { transform: scaleX(1); }
.ks-ice__vs { display: grid; gap: 0; margin-top: var(--ks-space-8); border-top: 1px solid var(--ks-ink); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1000px) { .ks-ice__vs { grid-template-columns: minmax(0, 0.8fr) minmax(0, 0.8fr) minmax(0, 1.4fr); } }
.ks-ice__col, .ks-ice__save { display: grid; align-content: start; gap: var(--ks-space-4); padding: var(--ks-space-6) var(--ks-space-5) var(--ks-space-6) 0; border-bottom: 1px solid var(--ks-rule); }
@media (min-width: 1000px) { .ks-ice__col, .ks-ice__save { border-bottom: 0; border-right: 1px solid var(--ks-rule); padding-left: var(--ks-space-5); } .ks-ice__col:first-child { padding-left: 0; } .ks-ice__save { border-right: 0; } }
.ks-ice__coltag { font-size: var(--ks-text-xs); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ks-ink-3); }
.ks-ice__col--yes .ks-ice__coltag { color: var(--ks-navy-700); }
.ks-ice__checks { display: grid; gap: var(--ks-space-3); }
.ks-ice__checks li { display: flex; align-items: center; gap: var(--ks-space-3); font-weight: 600; }
.ks-ice__checks li::before { content: ""; flex: none; width: 18px; height: 2px; background: var(--ks-ink-3); }
.ks-ice__checks--no li { color: var(--ks-ink-3); text-decoration: line-through; text-decoration-color: oklch(55% 0.02 258 / 0.5); }
.ks-ice__checks--yes li::before { width: 10px; height: 10px; background: var(--ks-red-500); }
.ks-ice__big { font-family: var(--ks-font-display); font-weight: 800; font-size: clamp(2rem, 1rem + 3vw, 3.5rem); line-height: 1; letter-spacing: -0.04em; }
.ks-ice__big span { color: var(--ks-red-500); font-variant-numeric: tabular-nums; }
.ks-ice__big sup { font-size: 0.4em; vertical-align: super; color: var(--ks-ink-3); }
.ks-ice__note { color: var(--ks-ink-2); max-width: 30rem; }
.ks-ice__actions { display: flex; flex-wrap: wrap; gap: var(--ks-space-3); }
.ks-ice__fine { font-size: var(--ks-text-xs); color: var(--ks-ink-3); }

/* --- Kalkulator --- */
.ks-calc { padding-block: var(--ks-section-y); background: var(--ks-paper-2); }
.ks-calc__head { display: grid; gap: var(--ks-space-5); margin-bottom: var(--ks-space-7); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .ks-calc__head { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: end; } }
.ks-calc__title { font-size: var(--ks-text-2xl); }
.ks-calc__lede { color: var(--ks-ink-2); max-width: 34rem; }
.ks-calc__grid { display: grid; grid-template-columns: minmax(0, 1fr); border-top: 1px solid var(--ks-ink); }
@media (min-width: 1000px) { .ks-calc__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.ks-calc__machine { display: grid; gap: var(--ks-space-5); padding: var(--ks-space-6) 0; border-bottom: 1px solid var(--ks-rule); }
@media (min-width: 640px) { .ks-calc__machine { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); align-items: center; } }
@media (min-width: 1000px) { .ks-calc__machine { padding-right: var(--ks-space-7); border-bottom: 0; border-right: 1px solid var(--ks-rule); } }
.ks-calc__pic { position: relative; display: grid; place-items: center; aspect-ratio: 5 / 4; background: radial-gradient(60% 55% at 50% 55%, var(--ks-paper), transparent 72%); }
.ks-calc__img { width: 100%; height: 100%; object-fit: contain; transition: opacity 260ms var(--ks-ease-out), transform 260ms var(--ks-ease-out); }
.ks-calc__machine.is-swap .ks-calc__img, .ks-calc__machine.is-swap .ks-calc__meta { opacity: 0; transform: translateY(8px); }
.ks-calc__meta { display: grid; gap: var(--ks-space-3); transition: opacity 260ms var(--ks-ease-out), transform 260ms var(--ks-ease-out); }
.ks-calc__badges { display: flex; flex-wrap: wrap; gap: var(--ks-space-2); }
.ks-calc__brand { font-size: var(--ks-text-xs); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ks-red-600); padding-right: var(--ks-space-2); }
.ks-calc__chip { font-size: var(--ks-text-xs); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; padding: 2px var(--ks-space-2); border: 1px solid var(--ks-rule); color: var(--ks-ink-2); }
.ks-calc__model { font-size: var(--ks-text-xl); line-height: 1.15; }
.ks-calc__tech { color: var(--ks-ink-2); font-size: var(--ks-text-sm); }
.ks-calc__speed { display: grid; gap: var(--ks-space-2); }
.ks-calc__spd { font-family: var(--ks-font-display); font-weight: 800; font-size: 2.25rem; line-height: 1; letter-spacing: -0.04em; color: var(--ks-navy-700); }
.ks-calc__spd small { font-size: var(--ks-text-sm); margin-left: 4px; letter-spacing: 0; color: var(--ks-ink-3); }
.ks-calc__bar { position: relative; height: 3px; background: var(--ks-rule); overflow: hidden; }
.ks-calc__bar span { position: absolute; inset: 0; background: var(--ks-red-500); transform: scaleX(var(--sp, 0.5)); transform-origin: left; transition: transform 700ms var(--ks-ease-out); }
.ks-calc__sn { font-size: var(--ks-text-xs); color: var(--ks-ink-3); }
.ks-calc__spec { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--ks-space-2) var(--ks-space-4); font-size: var(--ks-text-sm); border-top: 1px solid var(--ks-rule); padding-top: var(--ks-space-3); }
.ks-calc__spec dt { color: var(--ks-ink-3); }
.ks-calc__spec dd { font-weight: 600; }
.ks-calc__form { display: grid; gap: var(--ks-space-5); align-content: start; padding: var(--ks-space-6) 0; }
@media (min-width: 1000px) { .ks-calc__form { padding-left: var(--ks-space-7); } }
.ks-calc__field { border: 0; padding: 0; margin: 0; display: grid; gap: var(--ks-space-2); min-width: 0; }
.ks-calc__field legend, .ks-calc__sel > span, .ks-lead__field legend, .ks-lead__input > span { font-size: var(--ks-text-xs); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ks-ink-3); margin-bottom: var(--ks-space-2); padding: 0; }
.ks-calc__seg { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border: 1px solid var(--ks-ink); }
.ks-calc__seg--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.ks-calc__seg label { position: relative; }
.ks-calc__seg label + label { border-left: 1px solid var(--ks-ink); }
.ks-calc__seg input, .ks-lead__chips input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.ks-calc__seg span { display: grid; place-items: center; min-height: 46px; padding-inline: var(--ks-space-2); font-weight: 600; font-size: var(--ks-text-sm); text-align: center; transition: background-color var(--ks-dur-fast), color var(--ks-dur-fast); cursor: pointer; }
.ks-calc__seg input:checked + span { background: var(--ks-ink); color: var(--ks-on-dark); }
.ks-calc__seg input:disabled + span { color: var(--ks-rule); cursor: not-allowed; text-decoration: line-through; }
.ks-calc__seg input:focus-visible + span, .ks-lead__chips input:focus-visible + span { outline: 2px solid var(--ks-focus); outline-offset: -4px; }
.ks-calc__selects { display: grid; gap: var(--ks-space-4); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 600px) { .ks-calc__selects { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.ks-calc__sel { display: grid; min-width: 0; }
.ks-calc__sel select, .ks-lead__input input, .ks-lead__input select { width: 100%; min-height: 46px; padding: 0 var(--ks-space-3); border: 1px solid var(--ks-ink); border-radius: 0; background: var(--ks-paper); color: var(--ks-ink); font: inherit; font-size: var(--ks-text-sm); }
.ks-calc__sel select:disabled { opacity: 0.4; }
.ks-calc__go { justify-self: start; }
.ks-calc__incl { font-size: var(--ks-text-xs); color: var(--ks-ink-3); max-width: 34rem; }
.ks-calc__dlg { width: min(34rem, calc(100vw - 2rem)); max-height: calc(100svh - 2rem); padding: 0; border: 0; border-top: 3px solid var(--ks-red-500); border-radius: 0; background: var(--ks-paper); color: var(--ks-ink); box-shadow: 0 40px 80px -30px oklch(10% 0.04 258 / 0.5); }
.ks-calc__dlg::backdrop { background: oklch(16% 0.045 258 / 0.6); backdrop-filter: blur(4px); }
.ks-calc__dlg[open] { animation: ks-dlg-in 420ms var(--ks-ease-out); }
@keyframes ks-dlg-in { from { opacity: 0; transform: translateY(24px); } }
.ks-calc__dlgbox { position: relative; display: grid; gap: var(--ks-space-4); padding: var(--ks-space-6); }
.ks-calc__x { position: absolute; right: var(--ks-space-3); top: var(--ks-space-3); width: 40px; height: 40px; font-size: 1.5rem; line-height: 1; color: var(--ks-ink-2); }
.ks-calc__x:hover { color: var(--ks-red-600); }
.ks-calc__dlgtitle { font-size: var(--ks-text-xl); padding-right: 2.5rem; }
.ks-calc__cfg { display: flex; flex-wrap: wrap; gap: var(--ks-space-2); }
.ks-calc__cfg span { font-size: var(--ks-text-xs); font-weight: 600; padding: 2px var(--ks-space-2); border: 1px solid var(--ks-rule); color: var(--ks-ink-2); }
.ks-calc__rows { border-top: 1px solid var(--ks-ink); }
.ks-calc__rows > div { display: flex; justify-content: space-between; gap: var(--ks-space-4); padding: var(--ks-space-3) 0; border-bottom: 1px solid var(--ks-rule); font-size: var(--ks-text-sm); }
.ks-calc__rows dt { color: var(--ks-ink-2); }
.ks-calc__rows dd { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ks-calc__rows > div.is-off { opacity: 0.4; }
.ks-calc__total { display: flex; justify-content: space-between; align-items: baseline; gap: var(--ks-space-4); }
.ks-calc__total > span { font-size: var(--ks-text-xs); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ks-ink-3); }
.ks-calc__total strong { font-family: var(--ks-font-display); font-size: clamp(1.75rem, 1.2rem + 2vw, 2.5rem); letter-spacing: -0.04em; color: var(--ks-navy-700); font-variant-numeric: tabular-nums; }
.ks-calc__total small { font-size: var(--ks-text-sm); color: var(--ks-ink-3); margin-left: 4px; letter-spacing: 0; }
.ks-calc__inc { display: flex; flex-wrap: wrap; gap: var(--ks-space-2) var(--ks-space-4); font-size: var(--ks-text-xs); color: var(--ks-ink-2); }
.ks-calc__inc li { display: flex; align-items: center; gap: 6px; }
.ks-calc__inc li::before { content: ""; width: 6px; height: 6px; background: var(--ks-red-500); }
.ks-calc__dlgact { display: flex; flex-wrap: wrap; gap: var(--ks-space-3); }
.ks-calc__fine { font-size: var(--ks-text-xs); color: var(--ks-ink-3); }
.ks-calc__notep { color: var(--ks-ink-2); }

/* --- Paket kontrak --- */
.ks-tiers { padding-block: var(--ks-section-y); background: var(--ks-paper); }
.ks-tiers__head { display: grid; gap: var(--ks-space-5); margin-bottom: var(--ks-space-7); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .ks-tiers__head { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: end; } }
.ks-tiers__title { font-size: var(--ks-text-2xl); }
.ks-tiers__lede { color: var(--ks-ink-2); max-width: 34rem; }
.ks-tiers__grid { display: grid; grid-template-columns: minmax(0, 1fr); border-top: 1px solid var(--ks-ink); }
@media (min-width: 1000px) { .ks-tiers__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.ks-tier { position: relative; display: grid; gap: var(--ks-space-3); align-content: start; grid-template-rows: auto auto auto auto 1fr auto; padding: var(--ks-space-7) var(--ks-space-5); border-bottom: 1px solid var(--ks-rule); }
@media (min-width: 1000px) { .ks-tier { border-bottom: 0; border-right: 1px solid var(--ks-rule); } .ks-tier:last-child { border-right: 0; } }
.ks-tier--main { background: var(--ks-night); color: var(--ks-on-dark); border-color: transparent; }
@media (min-width: 1000px) { .ks-tier--main { margin-top: calc(var(--ks-space-5) * -1); padding-top: calc(var(--ks-space-7) + var(--ks-space-5)); } }
.ks-tier__flag { position: absolute; top: 0; left: 0; right: 0; padding: 6px var(--ks-space-5); background: var(--ks-red-500); color: var(--ks-on-dark); font-size: var(--ks-text-xs); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; }
.ks-tier__term { font-size: var(--ks-text-xs); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ks-red-600); }
.ks-tier--main .ks-tier__term { color: var(--ks-red-500); }
.ks-tier__name { font-size: var(--ks-text-xl); }
.ks-tier__for { font-weight: 600; color: var(--ks-ink-2); }
.ks-tier--main .ks-tier__for, .ks-tier--main .ks-tier__desc { color: var(--ks-on-dark-2); }
.ks-tier__desc { color: var(--ks-ink-2); font-size: var(--ks-text-sm); }
.ks-tier__list { display: grid; gap: var(--ks-space-3); padding: var(--ks-space-4) 0; border-top: 1px solid var(--ks-rule); margin-top: var(--ks-space-2); }
.ks-tier--main .ks-tier__list { border-top-color: var(--ks-rule-dark); }
.ks-tier__list li { display: flex; gap: var(--ks-space-3); font-size: var(--ks-text-sm); font-weight: 500; }
.ks-tier__list li::before { content: ""; flex: none; width: 8px; height: 8px; margin-top: 0.55em; background: var(--ks-red-500); }
.ks-tier__cta { justify-self: start; }
.ks-tier--main .ks-btn--red:hover { color: var(--ks-night); }
.ks-tiers__all { display: flex; flex-wrap: wrap; gap: var(--ks-space-3) var(--ks-space-6); padding-top: var(--ks-space-5); border-top: 1px solid var(--ks-ink); font-size: var(--ks-text-sm); font-weight: 600; color: var(--ks-ink-2); }
.ks-tiers__all li { display: flex; align-items: center; gap: var(--ks-space-2); }
.ks-tiers__all li::before { content: ""; width: 14px; height: 2px; background: var(--ks-red-500); }

/* --- Testimoni --- */
.ks-quotes { padding-block: var(--ks-section-y); background: var(--ks-paper); overflow: hidden; }
.ks-quotes__grid { display: grid; gap: var(--ks-space-7); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1000px) { .ks-quotes__grid { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); align-items: center; } }
.ks-quotes__aside { display: grid; gap: var(--ks-space-5); align-content: start; }
.ks-quotes__title { font-size: var(--ks-text-2xl); }
.ks-quotes__lede { color: var(--ks-ink-2); max-width: 30rem; }
.ks-quotes__ctl { display: flex; align-items: center; gap: var(--ks-space-4); }
.ks-quotes__btn { display: grid; place-items: center; width: 52px; height: 52px; border: 1px solid var(--ks-ink); transition: background-color var(--ks-dur-fast), color var(--ks-dur-fast); }
.ks-quotes__btn:hover { background: var(--ks-ink); color: var(--ks-on-dark); }
.ks-quotes__btn svg { width: 18px; height: 18px; }
.ks-quotes__count { font-size: var(--ks-text-sm); font-weight: 600; font-variant-numeric: tabular-nums; color: var(--ks-ink-3); min-width: 3.5rem; text-align: center; }
.ks-quotes__stage { position: relative; display: grid; border-top: 1px solid var(--ks-ink); padding-top: var(--ks-space-6); touch-action: pan-y; }
.ks-quote { grid-area: 1 / 1; display: grid; gap: var(--ks-space-6); align-content: start; opacity: 0; transform: translate3d(32px, 0, 0); visibility: hidden; transition: opacity var(--ks-dur-slow) var(--ks-ease-out), transform var(--ks-dur-slow) var(--ks-ease-out), visibility 0s linear var(--ks-dur-slow); }
.ks-quote.is-active { opacity: 1; transform: none; visibility: visible; transition-delay: 0s; }
.ks-quote blockquote { position: relative; font-family: var(--ks-font-display); font-weight: 700; font-size: clamp(1.5rem, 1rem + 2vw, 2.5rem); line-height: 1.2; letter-spacing: -0.03em; padding-top: 3.5rem; }
.ks-quote blockquote::before { content: "\201C"; position: absolute; top: -0.35em; left: -0.05em; font-size: 5rem; line-height: 1; color: var(--ks-red-500); }
.ks-quote figcaption { display: grid; gap: 2px; padding-left: var(--ks-space-4); border-left: 2px solid var(--ks-red-500); }
.ks-quote figcaption strong { font-family: var(--ks-font-display); font-size: var(--ks-text-lg); }
.ks-quote figcaption span { font-size: var(--ks-text-sm); color: var(--ks-ink-3); }

/* --- Jangkauan --- */
.ks-area { padding-block: var(--ks-section-y); background: var(--ks-night); color: var(--ks-on-dark); overflow: hidden; }
.ks-area .ks-label { color: var(--ks-on-dark-2); }
.ks-area__head { display: grid; gap: var(--ks-space-5); margin-bottom: var(--ks-space-7); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .ks-area__head { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: end; } }
.ks-area__title { font-size: var(--ks-text-2xl); color: var(--ks-on-dark); }
.ks-area__lede { color: var(--ks-on-dark-2); max-width: 34rem; }
.ks-area__regions { border-top: 1px solid var(--ks-on-dark-3); }
.ks-area__region { position: relative; display: grid; grid-template-columns: 3rem minmax(0, 1fr); gap: var(--ks-space-2) var(--ks-space-4); align-items: baseline; padding: var(--ks-space-4) 0; border-bottom: 1px solid var(--ks-rule-dark); transition: padding var(--ks-dur-med) var(--ks-ease-out); }
@media (min-width: 800px) { .ks-area__region { grid-template-columns: 3rem minmax(0, 0.8fr) minmax(0, 1.2fr); } }
.ks-area__region::after { content: ""; position: absolute; left: 0; bottom: -1px; height: 1px; width: 100%; background: var(--ks-red-500); transform: scaleX(0); transform-origin: left; transition: transform var(--ks-dur-slow) var(--ks-ease-out); }
.ks-area__num { font-size: var(--ks-text-xs); font-weight: 600; color: var(--ks-on-dark-3); }
.ks-area__name { position: relative; font-family: var(--ks-font-display); font-weight: 800; font-size: clamp(1.25rem, 0.9rem + 1.2vw, 1.875rem); letter-spacing: -0.03em; color: var(--ks-on-dark-3); transition: color var(--ks-dur-med); }
.ks-area__cities { grid-column: 2; font-size: var(--ks-text-sm); color: var(--ks-on-dark-3); transition: color var(--ks-dur-med); }
@media (min-width: 800px) { .ks-area__cities { grid-column: auto; } }
.ks-area__region.is-on, .ks-area__region:hover { padding-left: var(--ks-space-3); }
.ks-area__region.is-on::after, .ks-area__region:hover::after { transform: scaleX(1); }
.ks-area__region.is-on .ks-area__name, .ks-area__region:hover .ks-area__name { color: var(--ks-on-dark); }
.ks-area__region.is-on .ks-area__cities, .ks-area__region:hover .ks-area__cities { color: var(--ks-on-dark-2); }
.ks-area__region.is-on .ks-area__num::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 50%; background: var(--ks-red-500); animation: ks-pulse 1.6s var(--ks-ease-in-out) infinite; }
.ks-area__foot { display: grid; gap: var(--ks-space-4); margin-top: var(--ks-space-7); }
.ks-area__cap { font-size: var(--ks-text-xs); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ks-on-dark-3); }
.ks-area__chips { display: flex; flex-wrap: wrap; gap: var(--ks-space-2); }
.ks-area__chips li { padding: 6px var(--ks-space-3); border: 1px solid var(--ks-rule-dark); font-size: var(--ks-text-sm); color: var(--ks-on-dark-2); }
.ks-area__foot .ks-arrowlink { justify-self: start; color: var(--ks-on-dark); }

/* --- Form konsultasi (di dalam ks-cta) --- */
.ks-lead { grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 1000px) { .ks-lead { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--ks-space-8); } }
.ks-lead__copy { display: grid; gap: var(--ks-space-6); }
.ks-lead__contacts { grid-template-columns: minmax(0, 1fr) !important; }
@media (min-width: 600px) { .ks-lead__contacts { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }
.ks-lead__form { position: relative; display: grid; gap: var(--ks-space-5); padding: var(--ks-space-6); background: var(--ks-paper); color: var(--ks-ink); border-top: 3px solid var(--ks-red-500); }
.ks-lead__formtitle { font-family: var(--ks-font-display); font-weight: 800; font-size: var(--ks-text-xl); letter-spacing: -0.03em; }
.ks-lead__field { border: 0; padding: 0; margin: 0; min-width: 0; }
.ks-lead__chips { display: flex; flex-wrap: wrap; gap: var(--ks-space-2); }
.ks-lead__chips label { position: relative; }
.ks-lead__chips span { display: inline-flex; align-items: center; min-height: 40px; padding: 0 var(--ks-space-3); border: 1px solid var(--ks-rule); font-size: var(--ks-text-sm); font-weight: 600; cursor: pointer; transition: background-color var(--ks-dur-fast), color var(--ks-dur-fast), border-color var(--ks-dur-fast); }
.ks-lead__chips input:checked + span { background: var(--ks-ink); color: var(--ks-on-dark); border-color: var(--ks-ink); }
.ks-lead__input { display: grid; min-width: 0; }
.ks-lead__input input:focus, .ks-lead__input select:focus, .ks-calc__sel select:focus { outline: 2px solid var(--ks-focus); outline-offset: 1px; }
.ks-lead__input.is-error input { border-color: var(--ks-red-600); }
.ks-lead__two { display: grid; gap: var(--ks-space-4); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 600px) { .ks-lead__two { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ks-lead__send { justify-self: start; }
.ks-lead__fine { font-size: var(--ks-text-xs); color: var(--ks-ink-3); }
.ks-lead__fine.is-ok { color: var(--ks-navy-700); font-weight: 600; }

/* --- Dock CTA bawah --- */
.ks-dock { position: fixed; left: 50%; bottom: 16px; z-index: 90; display: flex; align-items: center; gap: var(--ks-space-2); padding: 6px 6px 6px var(--ks-space-4); background: oklch(16% 0.045 258 / 0.82); -webkit-backdrop-filter: saturate(1.6) blur(16px); backdrop-filter: saturate(1.6) blur(16px); color: var(--ks-on-dark); border: 1px solid oklch(100% 0 0 / 0.12); box-shadow: 0 20px 40px -18px oklch(5% 0.03 258 / 0.6); transform: translate(-50%, 140%); transition: transform 600ms var(--ks-ease-out); font-size: var(--ks-text-sm); white-space: nowrap; }
.ks-dock.is-on { transform: translate(-50%, 0); }
.ks-dock__live { display: inline-flex; align-items: center; gap: var(--ks-space-2); padding-right: var(--ks-space-3); color: var(--ks-on-dark-2); }
.ks-dock__dot { width: 8px; height: 8px; border-radius: 50%; background: oklch(72% 0.17 150); animation: ks-pulse 1.8s var(--ks-ease-in-out) infinite; }
.ks-dock__wa, .ks-dock__go { display: inline-flex; align-items: center; min-height: 40px; padding: 0 var(--ks-space-4); font-weight: 600; }
.ks-dock__wa { border: 1px solid oklch(100% 0 0 / 0.3); }
.ks-dock__wa:hover { background: oklch(100% 0 0 / 0.1); }
.ks-dock__go { background: var(--ks-red-600); }
.ks-dock__go:hover { background: var(--ks-red-500); }
@media (max-width: 520px) { .ks-dock__live { display: none; } .ks-dock { padding-left: 6px; } }

/* ============ DaaS (isi Raja Komputer, gaya Kirana) ============ */
.ks-hero__photo--daas { width: min(42vw, 52rem); transform: translateY(-62%); }
.ks-compare__foot { display: flex; flex-wrap: wrap; gap: var(--ks-space-4) var(--ks-space-7); margin-top: var(--ks-space-6); }
.ks-calc__seg--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ks-calc__seg--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ks-calc__seg--4 label:nth-child(3) { border-left: 0; border-top: 1px solid var(--ks-ink); }
.ks-calc__seg--4 label:nth-child(4) { border-top: 1px solid var(--ks-ink); }
@media (min-width: 700px) { .ks-calc__seg--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .ks-calc__seg--4 label:nth-child(3) { border-left: 1px solid var(--ks-ink); } .ks-calc__seg--4 label:nth-child(n+3) { border-top: 0; } }

/* --- Produk --- */
.ks-prods { padding-block: var(--ks-section-y); background: var(--ks-paper); }
.ks-prods__head { display: grid; gap: var(--ks-space-5); margin-bottom: var(--ks-space-6); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .ks-prods__head { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: end; } }
.ks-prods__title { font-size: var(--ks-text-2xl); }
.ks-prods__lede { color: var(--ks-ink-2); max-width: 34rem; }
.ks-prods__filter { display: flex; flex-wrap: wrap; margin-bottom: var(--ks-space-5); border: 1px solid var(--ks-ink); width: fit-content; max-width: 100%; }
.ks-prods__filter button { min-height: 44px; padding: 0 var(--ks-space-5); font-weight: 600; font-size: var(--ks-text-sm); transition: background-color var(--ks-dur-fast), color var(--ks-dur-fast); }
.ks-prods__filter button + button { border-left: 1px solid var(--ks-ink); }
.ks-prods__filter button[aria-pressed="true"] { background: var(--ks-ink); color: var(--ks-on-dark); }
.ks-prods__grid { display: grid; grid-template-columns: minmax(0, 1fr); border-top: 1px solid var(--ks-ink); border-left: 1px solid var(--ks-rule); }
@media (min-width: 640px) { .ks-prods__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .ks-prods__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.ks-prod { position: relative; display: grid; gap: var(--ks-space-3); align-content: start; grid-template-rows: auto auto auto 1fr auto auto; padding: var(--ks-space-5); border-right: 1px solid var(--ks-rule); border-bottom: 1px solid var(--ks-rule); }
.ks-prod[hidden] { display: none; }
.ks-prod::before { content: ""; position: absolute; left: 0; top: -1px; width: 100%; height: 2px; background: var(--ks-red-500); transform: scaleX(0); transform-origin: left; transition: transform var(--ks-dur-slow) var(--ks-ease-out); }
.ks-prod:hover::before { transform: scaleX(1); }
.ks-prod__pic { display: flex; align-items: center; justify-content: center; height: clamp(10rem, 7rem + 6vw, 13rem); margin-bottom: var(--ks-space-2); }
.ks-prod__pic img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; filter: drop-shadow(0 18px 18px oklch(24% 0.04 252 / 0.14)); transition: transform 700ms var(--ks-ease-out); }
.ks-prod:hover .ks-prod__pic img { transform: translateY(-6px) scale(1.03); }
.ks-prod__brand { font-size: var(--ks-text-xs); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ks-red-600); }
.ks-prod__name { font-size: var(--ks-text-lg); letter-spacing: -0.02em; }
.ks-prod__spec { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--ks-space-1) var(--ks-space-3); font-size: var(--ks-text-xs); border-top: 1px solid var(--ks-rule); padding-top: var(--ks-space-3); align-content: start; }
.ks-prod__spec dt { color: var(--ks-ink-3); }
.ks-prod__spec dd { font-weight: 600; color: var(--ks-ink-2); }
.ks-prod__foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--ks-space-2); align-items: center; padding-top: var(--ks-space-3); border-top: 1px solid var(--ks-rule); }
.ks-prod__tags { display: flex; gap: var(--ks-space-1); }
.ks-prod__tags span { font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; padding: 2px 6px; border: 1px solid var(--ks-rule); color: var(--ks-ink-2); }
.ks-prod__price { font-size: var(--ks-text-xs); color: var(--ks-ink-3); }
.ks-prod .ks-arrowlink { justify-self: start; }
.ks-prods__note { margin-top: var(--ks-space-5); font-size: var(--ks-text-xs); color: var(--ks-ink-3); }

/* --- Sewa jangka panjang (varian ks-process) --- */
.ks-term__head { display: grid; gap: var(--ks-space-6); grid-template-columns: minmax(0, 1fr); margin-bottom: var(--ks-space-4); }
@media (min-width: 1000px) { .ks-term__head { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); align-items: end; } }
.ks-term .ks-process__lede { margin-bottom: 0; }
.ks-term__panel { display: grid; gap: var(--ks-space-4); padding-top: var(--ks-space-4); border-top: 1px solid var(--ks-rule-dark); }
.ks-term__count { display: flex; align-items: baseline; gap: var(--ks-space-4); }
.ks-term__num { font-family: var(--ks-font-display); font-weight: 800; font-size: clamp(3.5rem, 2rem + 5vw, 6rem); line-height: 0.9; letter-spacing: -0.05em; color: var(--ks-red-500); font-variant-numeric: tabular-nums; min-width: 2ch; }
.ks-term__unit { color: var(--ks-on-dark-2); max-width: 16rem; }
.ks-term__seg { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border: 1px solid var(--ks-on-dark-3); }
.ks-term__seg button { display: grid; place-items: center; text-align: center; min-height: 44px; font-weight: 600; font-size: var(--ks-text-sm); color: var(--ks-on-dark-2); transition: background-color var(--ks-dur-fast), color var(--ks-dur-fast); }
.ks-term__seg button + button { border-left: 1px solid var(--ks-on-dark-3); }
.ks-term__seg button[aria-pressed="true"] { background: var(--ks-on-dark); color: var(--ks-night); }
.ks-term__note { margin-top: var(--ks-space-6); font-size: var(--ks-text-xs); color: var(--ks-on-dark-3); }

/* --- Susun kebutuhan --- */
.ks-brief { padding-block: var(--ks-section-y); background: var(--ks-paper-2); }
.ks-brief__head { display: grid; gap: var(--ks-space-5); margin-bottom: var(--ks-space-7); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .ks-brief__head { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: end; } }
.ks-brief__title { font-size: var(--ks-text-2xl); }
.ks-brief__lede { color: var(--ks-ink-2); max-width: 34rem; }
.ks-brief__grid { display: grid; grid-template-columns: minmax(0, 1fr); border-top: 1px solid var(--ks-ink); }
@media (min-width: 1000px) { .ks-brief__grid { grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); } }
.ks-brief__form { display: grid; gap: var(--ks-space-5); align-content: start; padding: var(--ks-space-6) 0; }
@media (min-width: 1000px) { .ks-brief__form { padding-right: var(--ks-space-7); border-right: 1px solid var(--ks-rule); } }
.ks-brief__dur { transition: opacity var(--ks-dur-med); }
.ks-brief__dur.is-off { opacity: 0.35; }
.ks-brief__range { display: grid; gap: var(--ks-space-3); }
.ks-brief__rlabel { display: flex; justify-content: space-between; align-items: baseline; font-size: var(--ks-text-xs); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ks-ink-3); }
.ks-brief__units { font-family: var(--ks-font-display); font-size: var(--ks-text-xl); font-weight: 800; letter-spacing: -0.03em; color: var(--ks-navy-700); }
.ks-brief__range input[type="range"] { width: 100%; accent-color: var(--ks-red-500); height: 28px; }
.ks-brief__out { display: grid; gap: var(--ks-space-4); align-content: start; padding: var(--ks-space-6) 0; }
@media (min-width: 1000px) { .ks-brief__out { padding-left: var(--ks-space-7); position: sticky; top: 100px; align-self: start; } }
.ks-brief__devices { position: relative; height: 230px; overflow: hidden; }
.ks-brief__dev { position: absolute; bottom: 0; height: auto; filter: drop-shadow(0 16px 16px oklch(24% 0.04 252 / 0.16)); transition: opacity var(--ks-dur-slow) var(--ks-ease-out), transform var(--ks-dur-slow) var(--ks-ease-out); }
.ks-brief__dev--laptop { left: 0; width: auto; height: 92%; }
.ks-brief__dev--tower { right: 4%; width: auto; height: 100%; }
.ks-brief__devices[data-dev="laptop"] .ks-brief__dev--tower { opacity: 0; transform: translateX(20px); }
.ks-brief__devices[data-dev="tower"] .ks-brief__dev--laptop { opacity: 0; transform: translateX(-20px); }
.ks-brief__sum { border-top: 1px solid var(--ks-ink); }
.ks-brief__sum > div { display: flex; justify-content: space-between; gap: var(--ks-space-4); padding: var(--ks-space-3) 0; border-bottom: 1px solid var(--ks-rule); font-size: var(--ks-text-sm); }
.ks-brief__sum > div[hidden] { display: none; }
.ks-brief__sum dt { color: var(--ks-ink-3); }
.ks-brief__sum dd { font-weight: 700; text-align: right; }
.ks-brief__go { justify-self: start; }

/* --- Klien (logo berwarna) --- */
.ks-clogos { padding-block: var(--ks-space-8); background: var(--ks-paper); border-top: 1px solid var(--ks-rule); overflow: hidden; }
.ks-clogos__head { display: grid; gap: var(--ks-space-3); margin-bottom: var(--ks-space-6); }
.ks-clogos__lede { color: var(--ks-ink-2); max-width: 40rem; }
.ks-clogos__marquee { --gap: clamp(2.5rem, 1rem + 3.5vw, 4.5rem); }
.ks-clogos__marquee:hover .ks-marquee__track { animation-play-state: running; }
.ks-clogos__img { display: block; width: auto; height: clamp(28px, 1.4rem + 1.2vw, 44px); max-width: 170px; object-fit: contain; }

/* --- Insights --- */
.ks-insights { padding-block: var(--ks-section-y); background: var(--ks-paper); }
.ks-insights__head { display: grid; gap: var(--ks-space-5); margin-bottom: var(--ks-space-7); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .ks-insights__head { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: end; } }
.ks-insights__title { font-size: var(--ks-text-2xl); }
.ks-insights__lede { color: var(--ks-ink-2); max-width: 34rem; }
.ks-insights__list { border-top: 1px solid var(--ks-ink); }
.ks-insight { position: relative; display: grid; grid-template-columns: 3rem minmax(0, 1fr) 28px; gap: var(--ks-space-4); align-items: center; padding: var(--ks-space-5) 0; border-bottom: 1px solid var(--ks-rule); transition: padding var(--ks-dur-med) var(--ks-ease-out); }
.ks-insight::after { content: ""; position: absolute; left: 0; bottom: -1px; height: 1px; width: 100%; background: var(--ks-red-500); transform: scaleX(0); transform-origin: left; transition: transform var(--ks-dur-slow) var(--ks-ease-out); }
.ks-insight:hover { padding-left: var(--ks-space-3); }
.ks-insight:hover::after { transform: scaleX(1); }
.ks-insight__num { font-size: var(--ks-text-xs); font-weight: 600; color: var(--ks-red-600); }
.ks-insight__body { display: grid; gap: var(--ks-space-1); }
@media (min-width: 900px) { .ks-insight__body { grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr); gap: var(--ks-space-6); align-items: baseline; } }
.ks-insight__title { font-family: var(--ks-font-display); font-weight: 800; font-size: clamp(1.125rem, 0.85rem + 0.9vw, 1.5rem); letter-spacing: -0.025em; }
.ks-insight__desc { font-size: var(--ks-text-sm); color: var(--ks-ink-2); }
.ks-insight svg { width: 22px; height: 22px; transition: transform var(--ks-dur-med) var(--ks-ease-out), color var(--ks-dur-med); }
.ks-insight:hover svg { transform: translate(3px, -3px); color: var(--ks-red-600); }

/* --- Form konsultasi: tambahan --- */
.ks-lead__points { display: grid; gap: var(--ks-space-3); }
.ks-lead__points li { display: flex; gap: var(--ks-space-3); color: var(--ks-on-dark); font-weight: 600; }
.ks-lead__points li::before { content: ""; flex: none; width: 8px; height: 8px; margin-top: 0.55em; background: var(--ks-red-500); }
.ks-lead__input textarea { width: 100%; padding: var(--ks-space-3); border: 1px solid var(--ks-ink); border-radius: 0; background: var(--ks-paper); color: var(--ks-ink); font: inherit; font-size: var(--ks-text-sm); resize: vertical; }
.ks-lead__input textarea:focus { outline: 2px solid var(--ks-focus); outline-offset: 1px; }
.ks-lead__input.is-error input, .ks-lead__input.is-error textarea { border-color: var(--ks-red-600); }
.ks-lead__fine a { text-decoration: underline; text-underline-offset: 3px; }

/* ============ IaaS ============ */
@media (min-width: 1100px) { .ks-brands2--4 .ks-brands2__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.ks-brands2--4 .ks-bcell { min-height: 24rem; }
@media (min-width: 1100px) { .ks-brands2--3 .ks-brands2__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.ks-brands2--4 .ks-bcell__list { font-size: var(--ks-text-xs); line-height: 1.5; }
.ks-brands2--4 .ks-bcell { grid-template-rows: 1fr; }
.ks-brands2--4 .ks-bcell__info { position: absolute; left: var(--ks-space-5); right: var(--ks-space-5); bottom: var(--ks-space-5); }
.ks-brands2--4 .ks-bcell:hover .ks-bcell__logo, .ks-brands2--4 .ks-bcell:focus-visible .ks-bcell__logo { transform: translateY(-8.5rem) scale(0.72); }
@media (hover: none) { .ks-brands2--4 .ks-bcell { grid-template-rows: auto auto; } .ks-brands2--4 .ks-bcell__info { position: static; } .ks-brands2--4 .ks-bcell:hover .ks-bcell__logo { transform: none; } }

/* ============ Katalog produk (Printer Kantor & MFP) ============ */
.ks-catalog { background: var(--ks-paper-2); }
.ks-filter { display: grid; gap: var(--ks-space-4); margin-bottom: var(--ks-space-6); padding-bottom: var(--ks-space-5); border-bottom: 1px solid var(--ks-rule); }
@media (min-width: 1100px) { .ks-filter { grid-template-columns: auto auto auto 1fr; align-items: end; gap: var(--ks-space-6); } }
.ks-filter__group { display: grid; gap: var(--ks-space-2); min-width: 0; }
.ks-filter__name { font-size: var(--ks-text-xs); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ks-ink-3); }
.ks-filter__opts { display: flex; flex-wrap: wrap; border: 1px solid var(--ks-ink); width: fit-content; max-width: 100%; }
.ks-filter__opts button { min-height: 42px; padding: 0 var(--ks-space-4); font-weight: 600; font-size: var(--ks-text-sm); background: var(--ks-paper); transition: background-color var(--ks-dur-fast), color var(--ks-dur-fast); }
.ks-filter__opts button + button { border-left: 1px solid var(--ks-ink); }
.ks-filter__opts button[aria-pressed="true"] { background: var(--ks-ink); color: var(--ks-on-dark); }
.ks-filter__count { font-size: var(--ks-text-sm); color: var(--ks-ink-2); }
@media (min-width: 1100px) { .ks-filter__count { justify-self: end; } }
.ks-filter__n { font-family: var(--ks-font-display); font-size: var(--ks-text-xl); color: var(--ks-navy-700); margin-right: 4px; }
.ks-catalog .ks-prods__grid { background: var(--ks-paper); }
.ks-prod__chips { display: flex; flex-wrap: wrap; gap: var(--ks-space-1); }
.ks-prod__chips span { font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; padding: 2px 6px; background: var(--ks-paper-2); color: var(--ks-ink-2); }
.ks-prod__chips span:first-child { background: var(--ks-ink); color: var(--ks-on-dark); }
.ks-catalog .ks-prod { grid-template-rows: auto auto auto auto 1fr auto auto; }
.ks-catalog__empty { display: flex; flex-wrap: wrap; gap: var(--ks-space-4); align-items: center; padding: var(--ks-space-6) 0; color: var(--ks-ink-2); }
.ks-catalog__empty[hidden] { display: none; }

/* ============ Large Format Printer ============ */
.ks-hero__photo--lfp { width: min(30vw, 30rem); transform: translateY(-60%); }
@media (min-width: 1100px) { .ks-pillars--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); } }

/* ============ Printer 3D ============ */
.ks-hero__photo--3d { width: min(20vw, 20rem); transform: translateY(-38%); }
.ks-feat--light { background: var(--ks-paper); color: var(--ks-ink); }
.ks-feat--light .ks-feat__lede, .ks-feat--light .ks-feat__text { color: var(--ks-ink-2); }
.ks-feat--light .ks-feat__list, .ks-feat--light .ks-feat__item { border-color: var(--ks-rule); }
.ks-feat--light .ks-feat__list { border-top-color: var(--ks-ink); }
.ks-feat--light .ks-feat__progress { background: var(--ks-rule); }
.ks-feat--light .ks-feat__count { color: var(--ks-navy-700); }
.ks-feat--light .ks-feat__points { color: var(--ks-ink-3); }
.ks-feat--light .ks-label { color: var(--ks-ink-3); }
.ks-prod--3d { grid-template-rows: auto auto auto auto auto 1fr auto !important; }
.ks-prod__tier { position: relative; height: 4px; background: var(--ks-paper-2); }
.ks-prod__tier span { position: absolute; inset: 0; background: var(--ks-red-500); transform: scaleX(calc(var(--pos) / 6)); transform-origin: left; }
.ks-prod__fit { font-size: var(--ks-text-sm); color: var(--ks-ink-2); }
.ks-prod__links { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--ks-space-3); }
.ks-prod__detail { display: inline-flex; align-items: center; gap: 4px; font-size: var(--ks-text-xs); font-weight: 600; color: var(--ks-ink-3); }
.ks-prod__detail svg { width: 14px; height: 14px; }
.ks-prod__detail:hover { color: var(--ks-red-600); }
.ks-catalog--3d .ks-filter { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1100px) { .ks-catalog--3d .ks-filter { grid-template-columns: auto auto 1fr; } .ks-catalog--3d .ks-filter__group:first-child { grid-column: 1 / -1; } }
.ks-jasa3d__panel { display: grid; gap: var(--ks-space-3); justify-items: start; }
.ks-jasa3d__cap { font-size: var(--ks-text-xs); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ks-on-dark-3); }
.ks-jasa3d__chips { display: flex; flex-wrap: wrap; gap: var(--ks-space-2); margin-bottom: var(--ks-space-2); }
.ks-jasa3d__chips li { padding: 6px var(--ks-space-3); border: 1px solid var(--ks-on-dark-3); font-weight: 700; font-size: var(--ks-text-sm); }

/* ============ Grup Kirana ============ */
.ks-clients__logo--group { height: clamp(34px, 1.6rem + 1.8vw, 54px); max-width: 190px; }
.ks-glogo { display: block; flex: none; }
.ks-glogo .ks-clients__logo { opacity: 1; transition: transform var(--ks-dur-med) var(--ks-ease-out); }
.ks-glogo:hover .ks-clients__logo { transform: scale(1.06); }
.ks-brows { padding-block: var(--ks-section-y); background: var(--ks-paper); }
.ks-brows__head { display: grid; gap: var(--ks-space-5); margin-bottom: var(--ks-space-7); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .ks-brows__head { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: end; } }
.ks-brows__title { font-size: var(--ks-text-2xl); }
.ks-brows__lede { color: var(--ks-ink-2); max-width: 34rem; }
.ks-brows__list { border-top: 1px solid var(--ks-ink); }
.ks-brow { position: relative; display: grid; gap: var(--ks-space-4); grid-template-columns: 2.5rem minmax(0, 1fr); align-items: center; padding: var(--ks-space-6) 0; border-bottom: 1px solid var(--ks-rule); transition: padding var(--ks-dur-med) var(--ks-ease-out); }
@media (min-width: 1000px) { .ks-brow { grid-template-columns: 3rem 13rem minmax(0, 1fr) auto; gap: var(--ks-space-6); } }
.ks-brow::after { content: ""; position: absolute; left: 0; bottom: -1px; width: 100%; height: 1px; background: var(--ks-red-500); transform: scaleX(0); transform-origin: left; transition: transform var(--ks-dur-slow) var(--ks-ease-out); }
.ks-brow:hover { padding-left: var(--ks-space-3); }
.ks-brow:hover::after { transform: scaleX(1); }
.ks-brow__num { font-size: var(--ks-text-xs); font-weight: 600; color: var(--ks-red-600); }
.ks-brow__logo img { width: auto; height: clamp(40px, 2rem + 1.4vw, 60px); max-width: 100%; object-fit: contain; }
.ks-brow__body, .ks-brow__links { grid-column: 2 / -1; }
@media (min-width: 1000px) { .ks-brow__body, .ks-brow__links { grid-column: auto; } }
.ks-brow__name { font-size: var(--ks-text-lg); letter-spacing: -0.02em; }
.ks-brow__desc { color: var(--ks-ink-2); margin-top: var(--ks-space-1); }
.ks-brow__pts { display: flex; flex-wrap: wrap; gap: var(--ks-space-1) var(--ks-space-4); margin-top: var(--ks-space-3); font-size: var(--ks-text-xs); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ks-ink-3); }
.ks-brow__links { display: grid; gap: var(--ks-space-2); justify-items: start; }
@media (min-width: 1000px) { .ks-brow__links { justify-items: end; } }
.ks-brow__rel { display: inline-flex; align-items: center; gap: 6px; font-size: var(--ks-text-sm); color: var(--ks-ink-2); }
.ks-brow__rel svg { width: 14px; height: 14px; }
.ks-brow__rel:hover { color: var(--ks-red-600); }

/* ============ Tentang Kami ============ */
.ks-insights--tint { background: var(--ks-paper-2); }
.ks-gstrip { padding-block: var(--ks-space-8); background: var(--ks-paper-2); border-top: 1px solid var(--ks-rule); }
.ks-gstrip__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: var(--ks-space-4); margin-bottom: var(--ks-space-6); }
.ks-gstrip__title { font-size: var(--ks-text-xl); }
.ks-gstrip__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--ks-ink); border-left: 1px solid var(--ks-rule); }
@media (min-width: 700px) { .ks-gstrip__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .ks-gstrip__grid { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.ks-glink { position: relative; display: grid; gap: var(--ks-space-3); justify-items: center; padding: var(--ks-space-6) var(--ks-space-4); border-right: 1px solid var(--ks-rule); border-bottom: 1px solid var(--ks-rule); background: var(--ks-paper); transition: background-color var(--ks-dur-med); }
.ks-glink::before { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 2px; background: var(--ks-red-500); transform: scaleX(0); transform-origin: left; transition: transform var(--ks-dur-slow) var(--ks-ease-out); }
.ks-glink:hover::before { transform: scaleX(1); }
.ks-glink img { width: auto; height: clamp(38px, 2rem + 1.2vw, 54px); max-width: 100%; object-fit: contain; transition: transform var(--ks-dur-med) var(--ks-ease-out); }
.ks-glink:hover img { transform: scale(1.05); }
.ks-glink span { display: inline-flex; align-items: center; gap: 4px; font-size: var(--ks-text-xs); font-weight: 600; color: var(--ks-ink-3); }
.ks-glink span svg { width: 12px; height: 12px; }

/* ============ Kontak ============ */
.ks-hero--short { min-height: min(78svh, 46rem); }
.ks-contact { padding-block: var(--ks-section-y); background: var(--ks-paper); }
.ks-contact__grid { display: grid; gap: var(--ks-space-8); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1000px) { .ks-contact__grid { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); align-items: start; } }
.ks-contact__info { display: grid; gap: var(--ks-space-6); align-content: start; }
.ks-contact__title { font-size: var(--ks-text-2xl); }
.ks-chans { border-top: 1px solid var(--ks-ink); }
.ks-chan { position: relative; display: grid; gap: var(--ks-space-1); padding: var(--ks-space-5) 0; border-bottom: 1px solid var(--ks-rule); }
.ks-chan::after { content: ""; position: absolute; left: 0; bottom: -1px; width: 100%; height: 1px; background: var(--ks-red-500); transform: scaleX(0); transform-origin: left; transition: transform var(--ks-dur-slow) var(--ks-ease-out); }
.ks-chan:hover::after { transform: scaleX(1); }
.ks-chan__label { font-size: var(--ks-text-xs); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ks-red-600); }
.ks-chan__value { display: inline-flex; align-items: center; gap: var(--ks-space-2); font-family: var(--ks-font-display); font-weight: 800; font-size: clamp(1.125rem, 0.9rem + 0.8vw, 1.5rem); letter-spacing: -0.02em; color: var(--ks-ink); width: fit-content; }
.ks-chan__value svg { width: 18px; height: 18px; transition: transform var(--ks-dur-med) var(--ks-ease-out); }
a.ks-chan__value:hover svg { transform: translate(3px, -3px); }
.ks-chan__note { font-size: var(--ks-text-sm); color: var(--ks-ink-2); }
.ks-contact__form { border: 1px solid var(--ks-rule); border-top: 3px solid var(--ks-red-500); }
.ks-map { padding-block: var(--ks-section-y); background: var(--ks-paper-2); }
.ks-map__grid { display: grid; gap: var(--ks-space-7); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1000px) { .ks-map__grid { grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr); align-items: center; } }
.ks-map__info { display: grid; gap: var(--ks-space-4); justify-items: start; }
.ks-map__title { font-size: var(--ks-text-2xl); }
.ks-map__addr { display: grid; gap: var(--ks-space-1); font-style: normal; color: var(--ks-ink-2); max-width: 26rem; }
.ks-map__addr strong { color: var(--ks-ink); font-family: var(--ks-font-display); font-size: var(--ks-text-lg); }
.ks-map__frame { position: relative; aspect-ratio: 16 / 10; border-top: 3px solid var(--ks-ink); background: var(--ks-paper); }
.ks-map__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; filter: saturate(0.85); }

/* ============ Menu aktif ============ */
.ks-nav__link[aria-current="page"]::after, .ks-nav__trigger.is-current::after { transform: scaleX(1); height: 2px; background: var(--ks-red-500); }
.ks-mega__link[aria-current="page"] { background: var(--ks-night-2); box-shadow: inset 3px 0 0 var(--ks-red-500); }
.ks-mega__link[aria-current="page"] .ks-mega__title { color: var(--ks-on-dark); }

/* ============ 17. REDUCED MOTION ============ */
@media (prefers-reduced-motion: reduce) {
  .ks *, .ks *::before, .ks *::after { animation: none !important; transition-duration: 1ms !important; transition-delay: 0ms !important; }
  .ks-js [data-ks-reveal], .ks-js .ks-lines .ks-line > span { opacity: 1; transform: none; }
  .ks-js [data-ks-scrub] .ks-w { opacity: 1; }
  .ks-marquee { flex-wrap: wrap; mask-image: none; }
  .ks-marquee__track[aria-hidden="true"] { display: none; }
  .ks-marquee__track { flex-wrap: wrap; justify-content: flex-start; row-gap: var(--ks-space-4); }
  .ks-hero__canvas { display: none; }
}