/* ==========================================================================
   Kreativa Studio — company profile agensi kreatif, colorful & bold ("Bauhaus-pop")
   Semua warna, huruf, dan sudut berasal dari variabel tema (--c-*, --f-*, --r*) dan warna turunan kit
   (--ks-*) yang dihitung di render.php. Mode gelap = .ks-dark di <html>. Variabel bagian (--sec-*)
   disetel oleh kelas latar .bg-*; komponen hanya memakai --sec-* dan warna nada (--tone-*).
   ========================================================================== */

:root {
    --ks-ease: cubic-bezier(.22, .8, .24, 1);
    --ks-bounce: cubic-bezier(.34, 1.56, .64, 1);
    --ks-head-h: 84px;
    --ks-gut: clamp(16px, 4vw, 40px);
    --ks-pad-y: clamp(76px, 9vw, 136px);
    --ks-page: var(--ks-paper);
    --ks-grad: linear-gradient(115deg, var(--ks-g1), var(--ks-g2) 34%, var(--ks-g3) 68%, var(--ks-g4));
    --ks-grad-s: linear-gradient(115deg, var(--ks-s1), var(--ks-s2) 34%, var(--ks-s3) 68%, var(--ks-s4));
    --ks-grad-h: linear-gradient(100deg, var(--ks-h1), var(--ks-h2) 36%, var(--ks-h3) 68%, var(--ks-h4));
    --ks-grad-hd: linear-gradient(100deg, var(--ks-hd1), var(--ks-hd2) 36%, var(--ks-hd3) 68%, var(--ks-hd4));
    --ks-title: calc(clamp(2.15rem, 1.25rem + 3.3vw, 4.25rem) * var(--ks-ts));
    --ks-lead: clamp(1.02rem, .95rem + .3vw, 1.2rem);
    --ks-fw: calc(var(--fw-head) + 100);
}
.ks-dark { --ks-page: var(--ks-night); color-scheme: dark; }

/* --- Dasar ------------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
html.ks-smooth { scroll-behavior: smooth; }
body {
    margin: 0; min-width: 320px; overflow-x: hidden;
    background: var(--ks-page); color: color-mix(in srgb, var(--ks-ink) 86%, var(--ks-page));
    font-family: var(--f-body); font-size: 1rem; line-height: 1.65;
    -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
    transition: background-color .45s var(--ks-ease), color .45s var(--ks-ease);
}
.ks-dark body { color: color-mix(in srgb, var(--ks-snow) 86%, var(--ks-page)); }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote, fieldset { margin: 0; }
ul, ol { padding: 0; list-style: none; }
fieldset { padding: 0; border: 0; min-width: 0; }
h1, h2, h3, h4 { font-family: var(--f-head); font-weight: var(--ks-fw); color: var(--sec-ink, var(--ks-ink)); line-height: 1.1; letter-spacing: -.025em; overflow-wrap: break-word; }
p, li, dd, dt, blockquote, span, small, strong, a, label, legend { overflow-wrap: anywhere; }
::selection { background: color-mix(in srgb, var(--ks-g3) 34%, transparent); }
:focus-visible { outline: 3px solid var(--ks-g2); outline-offset: 3px; }
.ks-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.ks-skip { position: fixed; left: 16px; top: -60px; z-index: 200; padding: 10px 18px; border-radius: var(--r-btn); background: var(--ks-ink); color: var(--ks-snow); font-weight: 700; text-decoration: none; transition: top .2s; }
.ks-skip:focus { top: 12px; }
.ks-container { width: min(1240px, 100% - 2 * var(--ks-gut)); margin-inline: auto; position: relative; }
.ks-center { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px 20px; margin-top: clamp(40px, 5vw, 64px); text-align: center; }
.ks-actions-row { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.k-ph { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 160px; width: 100%; height: 100%; border: 2px dashed color-mix(in srgb, var(--sec-ink, var(--ks-ink)) 30%, transparent); border-radius: var(--r); color: var(--sec-muted, inherit); font-size: .9rem; background: color-mix(in srgb, var(--sec-ink, var(--ks-ink)) 4%, transparent); }
.k-ph i { font-size: 1.6rem; }
.ks-root-hidden, .k-sec [hidden] { display: none !important; }

/* --- Latar bagian ------------------------------------------------------------- */
.k-sec { position: relative; padding-block: var(--ks-pad-y); background: var(--sec-bg); color: var(--sec-text); overflow: hidden; overflow: clip; scroll-margin-top: var(--ks-head-h); isolation: isolate; }

/* Permukaan terang */
.k-sec.bg-light, .k-sec.bg-white, .k-sec.bg-tint, .ks-header, .ks-footer--light, .ks-banner--soft, .ks-form {
    --sec-ink: var(--ks-ink);
    --sec-text: color-mix(in srgb, var(--ks-ink) 85%, var(--sec-bg));
    --sec-muted: color-mix(in srgb, var(--ks-ink) 75%, var(--sec-bg));
    --sec-line: color-mix(in srgb, var(--ks-ink) 13%, transparent);
    --sec-card: #ffffff;
    --sec-chip-c: var(--ks-ink); --sec-chip-p: 7%;
    --sec-hl-c: var(--ks-tx-primary);
    --sec-hl-grad: var(--ks-grad-h);
    --sec-acc: var(--ks-tx-primary);
    --sec-btn-bg: var(--ks-f-primary);
    --sec-btn-fg: var(--ks-on-primary);
    --sec-logo: brightness(0) opacity(.66);
    --sec-shadow: 0 26px 60px -32px color-mix(in srgb, var(--ks-ink) 42%, transparent);
    --sec-tx-primary: var(--ks-tx-primary); --sec-tx-blue: var(--ks-tx-blue); --sec-tx-pink: var(--ks-tx-pink); --sec-tx-accent: var(--ks-tx-accent);
}
.k-sec.bg-light { --sec-bg: var(--ks-paper); }
.k-sec.bg-white { --sec-bg: #ffffff; --sec-card: color-mix(in srgb, var(--ks-paper) 70%, #ffffff); }
.k-sec.bg-tint { --sec-bg: var(--ks-tint); background: linear-gradient(140deg, var(--ks-tint), var(--ks-tint2)); }
.ks-header, .ks-footer--light { --sec-bg: var(--ks-paper); }
.ks-banner--soft { --sec-bg: var(--ks-tint2); }
.ks-form { --sec-bg: #ffffff; --sec-card: #ffffff; }

/* Permukaan gelap ("Gelap", dan semua permukaan terang di mode gelap) */
.k-sec.bg-dark, .ks-dark .k-sec.bg-light, .ks-dark .k-sec.bg-white, .ks-dark .k-sec.bg-tint, .ks-footer--dark, .ks-dark .ks-footer--light, .ks-dark .ks-header, .ks-banner--dark, .ks-dark .ks-banner--soft, .ks-dark .ks-form, .ks-lightbox {
    --sec-ink: var(--ks-snow);
    --sec-text: color-mix(in srgb, var(--ks-snow) 87%, var(--sec-bg));
    --sec-muted: color-mix(in srgb, var(--ks-snow) 74%, var(--sec-bg));
    --sec-line: color-mix(in srgb, var(--ks-snow) 15%, transparent);
    --sec-card: color-mix(in srgb, #ffffff 6%, var(--sec-bg));
    --sec-chip-c: #ffffff; --sec-chip-p: 9%;
    --sec-hl-c: var(--ks-td-pink);
    --sec-hl-grad: var(--ks-grad-hd);
    --sec-acc: var(--ks-td-accent);
    --sec-btn-bg: var(--ks-f-accent);
    --sec-btn-fg: var(--ks-on-accent);
    --sec-logo: brightness(0) invert(1) opacity(.74);
    --sec-shadow: 0 26px 60px -30px #000000;
    --sec-tx-primary: var(--ks-td-primary); --sec-tx-blue: var(--ks-td-blue); --sec-tx-pink: var(--ks-td-pink); --sec-tx-accent: var(--ks-td-accent);
}
.k-sec.bg-dark, .ks-footer--dark, .ks-banner--dark { --sec-bg: var(--ks-darkbg); }
.ks-dark .k-sec.bg-light, .ks-dark .ks-footer--light, .ks-dark .ks-header { --sec-bg: var(--ks-night); }
.ks-dark .k-sec.bg-white, .ks-dark .ks-form { --sec-bg: var(--ks-night2); }
.ks-dark .k-sec.bg-tint { --sec-bg: var(--ks-night3); background: var(--ks-night3); }
.ks-dark .ks-banner--soft { --sec-bg: var(--ks-night3); }
.ks-dark .k-sec.bg-dark, .ks-dark .ks-footer--dark, .ks-dark .ks-banner--dark { --sec-bg: var(--ks-abyss); }
.ks-lightbox { --sec-bg: var(--ks-abyss); }

/* Pita "Warna utama" & "Gradasi" (teks putih penuh — campuran warna tidak cukup kontras di sini) */
.k-sec.bg-primary, .k-sec.bg-gradient, .ks-footer--gradient, .ks-banner--gradient, .ks-header.is-open {
    --sec-ink: #ffffff;
    --sec-text: #ffffff;
    --sec-muted: color-mix(in srgb, #ffffff 96%, var(--sec-bg));
    --sec-line: color-mix(in srgb, #ffffff 28%, transparent);
    --sec-card: color-mix(in srgb, #000000 20%, transparent);
    --sec-chip-c: #000000; --sec-chip-p: 24%;
    --sec-hl-c: #ffffff;
    --sec-hl-grad: none;
    --sec-acc: #ffffff;
    --sec-btn-bg: #ffffff;
    --sec-btn-fg: var(--ks-ink);
    --sec-logo: brightness(0) invert(1) opacity(.88);
    --sec-shadow: 0 26px 60px -30px color-mix(in srgb, #000000 62%, transparent);
    --sec-tx-primary: #ffffff; --sec-tx-blue: #ffffff; --sec-tx-pink: #ffffff; --sec-tx-accent: #ffffff;
}
.k-sec.bg-primary, .ks-header.is-open { --sec-bg: var(--ks-primbg); }
.k-sec.bg-gradient, .ks-footer--gradient, .ks-banner--gradient { --sec-bg: var(--ks-s2); background: var(--ks-grad-s); }

/* Pita "Warna aksen" (teks tinta atau putih — dihitung di render.php) */
.k-sec.bg-accent {
    --sec-bg: var(--ks-accbg);
    --sec-ink: var(--ks-acc-ink);
    --sec-text: var(--ks-acc-ink);
    --sec-muted: var(--ks-acc-ink);
    --sec-line: color-mix(in srgb, var(--ks-acc-ink) 24%, transparent);
    --sec-card: color-mix(in srgb, var(--ks-acc-away) 24%, transparent);
    --sec-chip-c: var(--ks-acc-away); --sec-chip-p: 34%;
    --sec-hl-c: var(--ks-acc-ink);
    --sec-hl-grad: none;
    --sec-acc: var(--ks-acc-ink);
    --sec-btn-bg: var(--ks-acc-btnbg);
    --sec-btn-fg: var(--ks-acc-btnfg);
    --sec-logo: brightness(0) opacity(.8);
    --sec-shadow: 0 26px 60px -32px color-mix(in srgb, #000000 45%, transparent);
    --sec-tx-primary: var(--ks-acc-ink); --sec-tx-blue: var(--ks-acc-ink); --sec-tx-pink: var(--ks-acc-ink); --sec-tx-accent: var(--ks-acc-ink);
}

/* Warna nada (ungu / biru / pink / oranye) */
.ks-tone--primary { --tone: var(--ks-t-primary); --tone-fill: var(--ks-f-primary); --tone-on: var(--ks-on-primary); --tone-away: var(--ks-away-primary); --tone-tx: var(--sec-tx-primary); }
.ks-tone--blue { --tone: var(--ks-t-blue); --tone-fill: var(--ks-f-blue); --tone-on: var(--ks-on-blue); --tone-away: var(--ks-away-blue); --tone-tx: var(--sec-tx-blue); }
.ks-tone--pink { --tone: var(--ks-t-pink); --tone-fill: var(--ks-f-pink); --tone-on: var(--ks-on-pink); --tone-away: var(--ks-away-pink); --tone-tx: var(--sec-tx-pink); }
.ks-tone--accent { --tone: var(--ks-t-accent); --tone-fill: var(--ks-f-accent); --tone-on: var(--ks-on-accent); --tone-away: var(--ks-away-accent); --tone-tx: var(--sec-tx-accent); }
/* Chip bernada: tint 14% di permukaan terang/gelap; di pita berwarna digelapkan/dicerahkan */
.ks-chip, .ks-feat__cat, .ks-quote__metric {
    background: color-mix(in srgb, var(--tone, var(--sec-ink)) 14%, transparent); color: var(--tone-tx, var(--sec-ink));
}
.k-sec.bg-primary :is(.ks-chip, .ks-feat__cat, .ks-quote__metric), .k-sec.bg-gradient :is(.ks-chip, .ks-feat__cat, .ks-quote__metric), .k-sec.bg-accent :is(.ks-chip, .ks-feat__cat, .ks-quote__metric) {
    background: color-mix(in srgb, var(--sec-chip-c) var(--sec-chip-p), transparent); color: var(--sec-ink);
}

/* --- Judul bagian & sorotan ----------------------------------------------------- */
.ks-head { display: grid; gap: 18px; max-width: 780px; margin-bottom: clamp(40px, 5vw, 68px); }
.ks-head--center { margin-inline: auto; text-align: center; justify-items: center; }
.ks-head--left { justify-items: start; }
.ks-eyebrow { display: inline-flex; align-items: center; gap: 10px; color: var(--sec-acc); font-size: .8rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; line-height: 1.3; }
.ks-eyebrow::before { content: ""; flex: none; width: 14px; height: 14px; border-radius: 50% 50% 0 50%; background: var(--ks-grad); transform: rotate(45deg); }
.k-sec.bg-primary .ks-eyebrow::before, .k-sec.bg-gradient .ks-eyebrow::before, .ks-banner--gradient .ks-eyebrow::before { background: #ffffff; }
.k-sec.bg-accent .ks-eyebrow::before { background: var(--ks-acc-ink); }
.ks-title { font-size: var(--ks-title); line-height: 1.02; letter-spacing: -.04em; text-wrap: balance; }
.ks-lead { font-size: var(--ks-lead); color: var(--sec-muted); max-width: 640px; text-wrap: pretty; }
.ks-prose { display: grid; gap: 1em; color: var(--sec-text); font-size: 1.05rem; }

.ks-hl { font-style: normal; }
.ks-hl--serif { font-family: var(--f-accent); font-style: italic; font-weight: 400; color: var(--sec-hl-c); letter-spacing: -.02em; }
.ks-hl--gradient { background: var(--sec-hl-grad); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-box-decoration-break: clone; box-decoration-break: clone; padding-bottom: .06em; }
.ks-hl--marker {
    background: linear-gradient(transparent 8%, var(--ks-mark) 8% 92%, transparent 92%); color: var(--ks-on-mark);
    padding-inline: .14em; margin-inline: -.04em; border-radius: .12em; -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.k-sec.bg-accent .ks-hl--marker { background: linear-gradient(transparent 8%, var(--ks-acc-ink) 8% 92%, transparent 92%); color: var(--ks-accbg); }
/* Di pita berwarna gradasi teks tidak terbaca → garis bawah bergelombang */
.k-sec.bg-primary .ks-hl--gradient, .k-sec.bg-gradient .ks-hl--gradient, .k-sec.bg-accent .ks-hl--gradient, .ks-banner--gradient .ks-hl--gradient {
    background: none; color: inherit; text-decoration: underline wavy; text-decoration-color: var(--ks-g4); text-decoration-thickness: .06em; text-underline-offset: .16em; text-decoration-skip-ink: none;
}
.k-sec.bg-accent .ks-hl--gradient { text-decoration-color: currentColor; }

/* --- Tombol ------------------------------------------------------------------- */
.k-btn {
    --btn-bg: var(--sec-btn-bg, var(--ks-f-primary)); --btn-fg: var(--sec-btn-fg, #ffffff);
    position: relative; isolation: isolate; overflow: hidden;
    display: inline-flex; align-items: center; justify-content: center; gap: .6em;
    min-height: 50px; padding: .85em 1.6em; border: 2px solid transparent; border-radius: var(--r-btn);
    font-family: var(--f-body); font-size: .98rem; font-weight: 700; line-height: 1.15; letter-spacing: -.005em; text-decoration: none; text-align: center; cursor: pointer;
    transition: transform .35s var(--ks-ease), box-shadow .35s var(--ks-ease), background-color .3s, border-color .3s, color .3s;
}
.k-btn--solid { background: var(--btn-bg); color: var(--btn-fg); box-shadow: 4px 4px 0 0 color-mix(in srgb, var(--sec-ink, var(--ks-ink)) 88%, transparent); }
.k-btn--solid:hover { transform: translate(-2px, -2px); box-shadow: 7px 7px 0 0 color-mix(in srgb, var(--sec-ink, var(--ks-ink)) 88%, transparent); }
.k-btn--solid:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 0 color-mix(in srgb, var(--sec-ink, var(--ks-ink)) 88%, transparent); }
.k-btn--outline { background: transparent; color: var(--sec-ink); border-color: color-mix(in srgb, var(--sec-ink) 30%, transparent); }
.k-btn--outline[style] { border-color: color-mix(in srgb, var(--btn-bg) 72%, transparent); }
.k-btn--outline:hover { transform: translateY(-2px); border-color: var(--sec-ink); background: color-mix(in srgb, var(--sec-ink) 7%, transparent); }
/* Tombol berwarna utama/aksen: isian digeser agar teksnya selalu ≥ 4.5:1 */
.k-btn[style*="--btn-bg:var(--c-primary)"] { --btn-bg: var(--ks-btn-p) !important; --btn-fg: var(--ks-on-primary) !important; }
.k-btn[style*="--btn-bg:var(--c-accent)"] { --btn-bg: var(--ks-btn-a) !important; --btn-fg: var(--ks-on-accent) !important; }
/* Tombol "Latar" di pita aksen/terang tidak boleh lenyap di permukaannya sendiri */
.k-sec.bg-accent .k-btn--solid[style*="--btn-bg:var(--c-light)"], .k-sec:is(.bg-light, .bg-white, .bg-tint) .k-btn--solid[style*="--btn-bg:var(--c-light)"] { --btn-bg: var(--sec-btn-bg) !important; --btn-fg: var(--sec-btn-fg) !important; }
.ks-dark .k-sec:is(.bg-light, .bg-white, .bg-tint) .k-btn--solid[style*="--btn-bg:var(--c-dark)"], .k-sec.bg-dark .k-btn--solid[style*="--btn-bg:var(--c-dark)"], .ks-banner--dark .k-btn--solid[style*="--btn-bg:var(--c-dark)"] { --btn-bg: var(--sec-btn-bg) !important; --btn-fg: var(--sec-btn-fg) !important; }
.k-btn--sm { min-height: 42px; padding: .6em 1.15em; font-size: .9rem; }
.k-btn--lg { min-height: 58px; padding: 1em 1.85em; font-size: 1.04rem; }
.k-btn--block { width: 100%; }
.k-btn i { font-size: 1.1em; }
.ks-btn--arrow::after { content: "→"; font-family: var(--f-body); font-weight: 700; transition: transform .35s var(--ks-ease); }
.ks-btn--arrow:hover::after { transform: translateX(4px); }

/* --- Header ------------------------------------------------------------------- */
.ks-header { position: relative; z-index: 60; color: var(--sec-ink); margin-bottom: calc(var(--ks-head-h) * -1); }
.ks-header.is-sticky { position: sticky; top: 0; }
.ks-header__bar { position: relative; }
.ks-header__bar::before {
    content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background: color-mix(in srgb, var(--sec-bg) 84%, transparent); -webkit-backdrop-filter: blur(16px) saturate(1.4); backdrop-filter: blur(16px) saturate(1.4);
    border-bottom: 1px solid var(--sec-line); transition: opacity .35s var(--ks-ease), box-shadow .35s, background-color .35s;
}
.ks-header--float .ks-header__bar { width: min(1280px, 100% - 24px); margin: 12px auto 0; }
.ks-header--float .ks-header__bar::before { border: 1.5px solid color-mix(in srgb, var(--sec-ink) 14%, transparent); border-radius: max(var(--r-lg), 18px); box-shadow: 0 12px 40px -26px color-mix(in srgb, var(--ks-ink) 70%, transparent); }
.ks-header.is-scrolled .ks-header__bar::before { box-shadow: 0 16px 44px -26px color-mix(in srgb, var(--ks-ink) 80%, transparent); }
.ks-header--float .ks-header__inner { width: auto; padding-inline: clamp(14px, 2vw, 22px); }
.ks-header__inner { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 20px; min-height: 70px; }
.ks-header.is-open .ks-header__bar::before { opacity: 0; }

.ks-brand { display: inline-flex; align-items: center; gap: 11px; min-width: 0; color: var(--sec-ink); text-decoration: none; position: relative; z-index: 2; justify-self: start; }
.ks-brand__logo { height: var(--logo-h); width: auto; max-width: 220px; object-fit: contain; }
.ks-brand__logo--dark { display: none; }
.ks-dark .ks-brand__logo--light, .ks-footer--dark .ks-brand__logo--light, .ks-footer--gradient .ks-brand__logo--light, .ks-header.is-open .ks-brand__logo--light { display: none; }
.ks-dark .ks-brand__logo--dark, .ks-footer--dark .ks-brand__logo--dark, .ks-footer--gradient .ks-brand__logo--dark, .ks-header.is-open .ks-brand__logo--dark { display: block; }
.ks-brand__mark {
    flex: none; position: relative; display: grid; place-items: end center; width: calc(var(--logo-h) * .92); height: var(--logo-h);
    border-radius: 999px 999px calc(var(--r) * .5 + 3px) calc(var(--r) * .5 + 3px); background: var(--ks-grad);
    color: #ffffff; font-family: var(--f-head); font-weight: 700; font-size: calc(var(--logo-h) * .5); line-height: 1; padding-bottom: calc(var(--logo-h) * .16);
    transition: transform .45s var(--ks-bounce);
}
.ks-brand__mark::after { content: ""; position: absolute; right: -4px; top: -2px; width: calc(var(--logo-h) * .3); height: calc(var(--logo-h) * .3); border-radius: 50%; background: var(--ks-t-accent); border: 2px solid var(--sec-bg); }
.ks-brand__mark span { position: relative; text-shadow: 0 1px 6px color-mix(in srgb, #000000 35%, transparent); }
.ks-brand:hover .ks-brand__mark { transform: rotate(-8deg) scale(1.05); }
.ks-brand__text { display: flex; align-items: baseline; gap: 7px; min-width: 0; }
.ks-brand__name { font-family: var(--f-head); font-weight: 700; font-size: calc(var(--logo-h) * .54 + 4px); letter-spacing: -.045em; line-height: 1; white-space: nowrap; }
.ks-brand__suffix { display: none; font-family: var(--f-accent); font-style: italic; font-size: calc(var(--logo-h) * .38 + 4px); line-height: 1; white-space: nowrap; color: var(--sec-muted, inherit); }
@media (min-width: 400px) { .ks-brand__suffix { display: inline; } }

.ks-nav__list { display: flex; }
.ks-nav__list a { display: flex; align-items: baseline; gap: 10px; text-decoration: none; font-weight: 600; color: var(--sec-ink); transition: color .25s, background-color .25s; }
.ks-nav__num { font-size: .7rem; font-weight: 700; letter-spacing: .08em; opacity: .7; }
.ks-nav__shape { display: none; }
.ks-actions { display: flex; align-items: center; gap: 10px; position: relative; z-index: 2; justify-self: end; }
.ks-actions__cta { display: none; }
.ks-mode { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1.5px solid var(--sec-line); border-radius: 50%; background: transparent; color: var(--sec-ink); cursor: pointer; transition: transform .45s var(--ks-bounce), background-color .25s; }
.ks-mode:hover { transform: rotate(-24deg); background: color-mix(in srgb, var(--sec-ink) 8%, transparent); }
.ks-mode i { font-size: 1.08rem; line-height: 1; }
.ks-mode__sun { display: none; }
.ks-dark .ks-mode__sun { display: block; }
.ks-dark .ks-mode__moon { display: none; }
.k-burger { display: grid; align-content: center; gap: 5px; width: 46px; height: 46px; padding: 0 12px; border: 0; border-radius: 50%; background: var(--sec-ink); cursor: pointer; }
.k-burger span { display: block; height: 2px; border-radius: 2px; background: var(--sec-bg); transition: transform .35s var(--ks-ease), opacity .25s, width .35s var(--ks-ease); }
.k-burger span:nth-child(2) { width: 70%; justify-self: end; }
.k-header.is-open .k-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.k-header.is-open .k-burger span:nth-child(2) { opacity: 0; }
.k-header.is-open .k-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Menu mobile: lapisan layar penuh berwarna utama dengan nomor besar */
@media (max-width: 1079.98px) {
    .ks-nav {
        position: fixed; inset: 0; z-index: 1; display: flex; flex-direction: column; justify-content: space-between; gap: 30px;
        padding: calc(var(--ks-head-h) + 30px) var(--ks-gut) 30px; overflow-y: auto; overscroll-behavior: contain;
        background: var(--ks-primbg); color: #ffffff; opacity: 0; visibility: hidden; clip-path: circle(0 at calc(100% - 46px) 46px);
        transition: opacity .3s var(--ks-ease), clip-path .6s var(--ks-ease), visibility 0s .6s;
    }
    .k-header.is-open .ks-nav { opacity: 1; visibility: visible; clip-path: circle(150% at calc(100% - 46px) 46px); transition: opacity .3s var(--ks-ease), clip-path .7s var(--ks-ease); }
    .ks-nav__shape { display: block; position: absolute; z-index: -1; pointer-events: none; }
    .ks-nav__shape--arch { right: -12vw; bottom: -6vw; width: 52vw; max-width: 320px; aspect-ratio: 3 / 4; border-radius: 999px 999px 0 0; background: var(--ks-t-accent); opacity: .9; }
    .ks-nav__shape--dot { left: 6vw; bottom: 22%; width: 18vw; max-width: 110px; aspect-ratio: 1; border-radius: 50%; background: var(--ks-t-pink); opacity: .85; }
    .ks-nav__list { flex-direction: column; gap: 2px; }
    .ks-nav__list a { padding: 8px 0; color: #ffffff; font-family: var(--f-head); font-size: clamp(2rem, 8.5vw, 3rem); font-weight: 700; letter-spacing: -.04em; line-height: 1.08; border-bottom: 1px solid color-mix(in srgb, #ffffff 22%, transparent); }
    .ks-nav__list a .ks-nav__num { font-family: var(--f-body); font-size: .8rem; letter-spacing: .1em; opacity: .85; }
    .ks-nav__list a:hover span:last-child, .ks-nav__list a.is-active span:last-child { font-family: var(--f-accent); font-style: italic; font-weight: 400; }
    .ks-nav__foot { display: grid; gap: 18px; justify-items: start; }
    .ks-nav__note { font-size: 1.05rem; font-weight: 600; }
    .ks-nav__cta { width: 100%; }
    .ks-nav .k-btn--solid { --btn-bg: #ffffff; --btn-fg: var(--ks-ink); box-shadow: 4px 4px 0 0 #000000; }
}
@media (min-width: 640px) and (max-width: 1079.98px) { .ks-actions__cta { display: inline-flex; } .ks-nav__cta { display: none; } }
@media (min-width: 1080px) {
    .ks-header__inner { grid-template-columns: auto 1fr auto; }
    .ks-header--menu-center .ks-header__inner { grid-template-columns: 1fr auto 1fr; }
    .ks-nav { display: flex; justify-content: flex-end; }
    .ks-header--menu-center .ks-nav { justify-content: center; }
    .ks-nav__list { align-items: center; gap: 2px; }
    .ks-nav__list a { position: relative; padding: 8px 14px; border-radius: 999px; font-size: .95rem; }
    .ks-nav__num { display: none; }
    .ks-nav__list a::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: 3px; height: 2px; border-radius: 2px; background: var(--ks-grad); transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ks-ease); }
    .ks-nav__list a:hover::after, .ks-nav__list a.is-active::after { transform: scaleX(1); }
    .ks-nav__foot, .k-burger { display: none; }
    .ks-actions__cta { display: inline-flex; }
}
.ks-lock, .ks-lock body { overflow: hidden; }
/* Konten bagian pertama tidak tertutup header yang melayang di atasnya */
.ks-header + main > .k-sec:first-child { padding-top: calc(var(--ks-pad-y) * .7 + var(--ks-head-h)); }

/* Media sosial */
.ks-social { display: flex; flex-wrap: wrap; gap: 10px; }
.ks-social a { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; border: 1.5px solid var(--sec-line); color: var(--sec-ink); text-decoration: none; transition: transform .35s var(--ks-bounce), background-color .25s, color .25s, border-color .25s; }
.ks-social a:hover { transform: translateY(-3px) rotate(-8deg); background: var(--sec-ink); color: var(--sec-bg); border-color: var(--sec-ink); }
.ks-social--nav a { border-color: color-mix(in srgb, #ffffff 40%, transparent); color: #ffffff; }
.ks-social--nav a:hover { background: #ffffff; color: var(--ks-primbg); }

/* --- Bentuk geometris dekoratif --------------------------------------------- */
.ks-shapes { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.ks-shape { position: absolute; display: block; }
.ks-shape--arch { width: clamp(70px, 9vw, 130px); aspect-ratio: 3 / 4; border-radius: 999px 999px 0 0; background: var(--ks-t-pink); }
.ks-shape--half { width: clamp(90px, 11vw, 170px); aspect-ratio: 2 / 1; border-radius: 999px 999px 0 0; background: var(--ks-t-accent); }
.ks-shape--ring { width: clamp(80px, 10vw, 150px); aspect-ratio: 1; border-radius: 50%; border: clamp(10px, 1.4vw, 18px) solid var(--ks-t-blue); }
.ks-shape--star { width: clamp(46px, 5vw, 76px); fill: var(--ks-t-accent); }
.ks-shape--zig { width: clamp(90px, 10vw, 140px); stroke: var(--ks-t-primary); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }
.ks-shape--dots { width: 120px; height: 72px; background-image: radial-gradient(circle, color-mix(in srgb, var(--sec-ink) 26%, transparent) 2.5px, transparent 3px); background-size: 18px 18px; }
/* Pola penempatan — di tepi bagian agar tidak menutupi teks */
.ks-shapes--hero .ks-shape--arch { right: 34%; bottom: -36px; transform: rotate(8deg); }
.ks-shapes--hero .ks-shape--half { right: 4%; top: calc(var(--ks-head-h) + 8px); transform: rotate(180deg); opacity: .0; }
.ks-shapes--hero .ks-shape--ring { right: -44px; bottom: 6%; }
.ks-shapes--hero .ks-shape--star { left: 44%; top: calc(var(--ks-head-h) + 24px); }
.ks-shapes--hero .ks-shape--zig { left: 3%; top: calc(var(--ks-head-h) + 20px); }
.ks-shapes--hero .ks-shape--dots { right: 42%; bottom: 10%; }
.ks-shapes--a .ks-shape--arch { right: -30px; top: 12%; transform: rotate(12deg); }
.ks-shapes--a .ks-shape--half { left: 4%; bottom: -2px; }
.ks-shapes--a .ks-shape--ring { left: -50px; top: 20%; }
.ks-shapes--a .ks-shape--star { right: 8%; bottom: 10%; }
.ks-shapes--a .ks-shape--zig { right: 30%; top: 5%; }
.ks-shapes--a .ks-shape--dots { left: 10%; top: 8%; }
.ks-shapes--b .ks-shape--arch { left: -64px; top: 12%; transform: rotate(90deg); }
.ks-shapes--b .ks-shape--half { right: 6%; top: -2px; transform: rotate(180deg); }
.ks-shapes--b .ks-shape--ring { right: -60px; bottom: 12%; }
.ks-shapes--b .ks-shape--star { left: 30%; top: 3%; }
.ks-shapes--b .ks-shape--zig { display: none; }
.ks-shapes--b .ks-shape--dots { right: 12%; bottom: 6%; }
.ks-shapes--c .ks-shape--arch { right: 5%; bottom: -2px; }
.ks-shapes--c .ks-shape--half { left: -64px; top: 16%; transform: rotate(90deg); }
.ks-shapes--c .ks-shape--ring { display: none; }
.ks-shapes--c .ks-shape--star { right: 9%; top: 7%; }
.ks-shapes--c .ks-shape--zig { left: 8%; bottom: 6%; }
.ks-shapes--c .ks-shape--dots { left: 3%; top: 6%; }
.ks-shapes--d .ks-shape--arch { display: none; }
.ks-shapes--d .ks-shape--half { right: -14px; top: 9%; transform: rotate(-90deg); }
.ks-shapes--d .ks-shape--ring { left: -56px; bottom: 8%; }
.ks-shapes--d .ks-shape--star { left: 46%; top: 5%; }
.ks-shapes--d .ks-shape--zig { right: 6%; bottom: 5%; }
.ks-shapes--d .ks-shape--dots { right: 40%; bottom: 4%; }
.ks-shapes--foot .ks-shape--arch { display: none; }
.ks-shapes--foot .ks-shape--half, .ks-shapes--foot .ks-shape--zig, .ks-shapes--foot .ks-shape--dots { display: none; }
.ks-shapes--foot .ks-shape--ring { left: -50px; top: 30%; }
.ks-shapes--foot .ks-shape--star { left: 42%; top: 42px; }
/* Di pita berwarna, bentuk yang sewarna latar diganti agar tetap terlihat */
.k-sec.bg-primary .ks-shape--zig, .k-sec.bg-gradient .ks-shape--zig { stroke: #ffffff; }
.k-sec.bg-accent .ks-shape--star { fill: var(--ks-t-primary); }
.k-sec.bg-accent .ks-shape--half { background: var(--ks-t-primary); }
@media (max-width: 719.98px) {
    .ks-shape { opacity: .55; transform: scale(.75); }
    .ks-shape--dots, .ks-shape--zig { display: none; }
}

/* --- Stiker berputar ---------------------------------------------------------- */
.ks-sticker { position: absolute; z-index: 3; display: grid; place-items: center; width: clamp(104px, 11vw, 140px); aspect-ratio: 1; border-radius: 50%; background: var(--ks-f-accent); color: var(--ks-on-accent); text-decoration: none; box-shadow: 0 18px 40px -18px color-mix(in srgb, #000000 55%, transparent); transition: transform .5s var(--ks-bounce); }
a.ks-sticker:hover { transform: scale(1.08) rotate(-8deg); }
.ks-sticker__ring { position: absolute; inset: 4%; width: 92%; height: 92%; overflow: visible; }
.ks-sticker__ring text { fill: currentColor; font-family: var(--f-body); font-size: 11.5px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase; }
.ks-sticker__core { display: grid; place-items: center; width: 40%; aspect-ratio: 1; border-radius: 50%; background: var(--ks-ink); color: var(--ks-t-accent); font-size: 1.35rem; }

/* --- Hero --------------------------------------------------------------------- */
.ks-hero { padding-bottom: clamp(64px, 8vw, 112px); }
.ks-hero--ribbon { padding-bottom: 0; }
.ks-hero__grid { display: grid; gap: clamp(44px, 6vw, 72px); align-items: center; }
.ks-hero__text { display: grid; gap: 26px; justify-items: start; min-width: 0; }
.ks-badge { display: inline-flex; align-items: center; gap: 10px; padding: 6px 16px 6px 6px; border: 1.5px solid var(--sec-line); border-radius: 999px; background: var(--sec-card); font-size: .9rem; font-weight: 600; color: var(--sec-ink); box-shadow: 3px 3px 0 0 color-mix(in srgb, var(--sec-ink) 14%, transparent); }
.ks-badge__icon { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--ks-grad); color: #ffffff; font-size: .9rem; }
.ks-hero__title { font-size: calc(clamp(2.75rem, 1.15rem + 5.6vw, 6.6rem) * var(--ks-ts)); line-height: .98; letter-spacing: -.055em; }
.ks-hero__row { display: block; }
.ks-hero__words { display: inline; }
.ks-pill { display: inline-block; width: 1.85em; height: .8em; margin: 0 .1em; vertical-align: .04em; border-radius: 999px; overflow: hidden; background: color-mix(in srgb, var(--sec-ink) 10%, transparent); transform: rotate(-4deg); transition: transform .5s var(--ks-bounce), width .5s var(--ks-ease); box-shadow: 0 10px 24px -14px color-mix(in srgb, #000000 60%, transparent); }
.ks-hero__row:last-child .ks-pill { transform: rotate(5deg); }
.ks-pill:hover { transform: rotate(0) scale(1.06); }
.ks-pill .ks-pill__img, .ks-pill .k-ph { width: 100%; height: 100%; min-height: 0; object-fit: cover; border-radius: inherit; }
.ks-pill--empty { display: inline-grid; place-items: center; border: 2px dashed var(--sec-line); background: transparent; font-size: .3em; color: var(--sec-muted); box-shadow: none; }
.ks-hero__lead { font-size: clamp(1.05rem, .98rem + .35vw, 1.24rem); color: var(--sec-muted); max-width: 560px; text-wrap: pretty; }
.ks-hero__stats { display: flex; flex-wrap: wrap; gap: 18px 36px; padding-top: 22px; border-top: 1.5px dashed var(--sec-line); width: 100%; max-width: 600px; overflow-wrap: break-word; }
.ks-hero__stat dt { font-family: var(--f-head); font-weight: var(--ks-fw); font-size: clamp(1.8rem, 1.4rem + 1.4vw, 2.6rem); line-height: 1; letter-spacing: -.04em; color: var(--sec-ink); }
.ks-hero__stat dd { margin-top: 6px; font-size: .9rem; color: var(--sec-muted); overflow-wrap: break-word; }
.ks-hero__stat:nth-child(1) dt { color: var(--sec-tx-primary); }
.ks-hero__stat:nth-child(3) dt { color: var(--sec-tx-pink); }

.ks-hero__visual { position: relative; width: 100%; max-width: 560px; margin-inline: auto; aspect-ratio: 9 / 10; }
.ks-hero__disc { position: absolute; right: -4%; top: 2%; width: 74%; aspect-ratio: 1; border-radius: 50%; background: var(--ks-grad); opacity: .95; }
.ks-hero__arch { position: absolute; right: 8%; top: 8%; width: 66%; aspect-ratio: 4 / 5; border-radius: 999px 999px var(--r-lg) var(--r-lg); overflow: hidden; background: var(--sec-card); border: 6px solid var(--sec-bg); box-shadow: var(--sec-shadow); }
.ks-hero__arch .ks-hero__img, .ks-hero__arch .k-ph { width: 100%; height: 100%; object-fit: cover; border-radius: 0; }
.ks-hero__card { position: absolute; left: 0; bottom: 2%; width: 40%; aspect-ratio: 4 / 5; border-radius: var(--r-lg); overflow: hidden; border: 6px solid var(--sec-bg); background: var(--sec-card); transform: rotate(-8deg); box-shadow: var(--sec-shadow); transition: transform .6s var(--ks-bounce); }
.ks-hero__card:hover { transform: rotate(-3deg) translateY(-6px); }
.ks-hero__card .ks-hero__cardimg, .ks-hero__card .k-ph { width: 100%; height: 100%; object-fit: cover; min-height: 0; }
.ks-hero__chip { position: absolute; left: 4%; top: 14%; z-index: 3; display: inline-flex; align-items: center; gap: 10px; max-width: 62%; padding: 8px 16px 8px 8px; border-radius: 999px; background: var(--sec-card); color: var(--sec-ink); font-weight: 700; font-size: .9rem; line-height: 1.25; box-shadow: var(--sec-shadow), 3px 3px 0 0 color-mix(in srgb, var(--sec-ink) 16%, transparent); }
.ks-hero__chipicon { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--ks-f-pink); color: var(--ks-on-pink); }
.ks-hero__sticker { right: 0; bottom: 4%; }

@media (min-width: 960px) {
    .ks-hero--collage .ks-hero__grid { grid-template-columns: minmax(0, 1.18fr) minmax(0, .82fr); }
    .ks-hero--collage .ks-hero__visual { max-width: none; }
}
/* Tengah: headline raksasa di tengah, kolase melebar di bawahnya */
.ks-hero--center .ks-hero__text { justify-items: center; text-align: center; }
.ks-hero--center .ks-hero__title { font-size: calc(clamp(2.9rem, 1.1rem + 6.6vw, 7.6rem) * var(--ks-ts)); }
.ks-hero--center .ks-hero__lead { margin-inline: auto; }
.ks-hero--center .ks-hero__actions { justify-content: center; }
.ks-hero--center .ks-hero__stats { justify-content: center; margin-inline: auto; }
.ks-hero--center .ks-hero__visual { max-width: 980px; aspect-ratio: 16 / 9; }
.ks-hero--center .ks-hero__disc { left: 50%; right: auto; top: 14%; width: 46%; transform: translateX(-50%); }
.ks-hero--center .ks-hero__arch { left: 50%; right: auto; top: 0; width: 38%; height: 100%; aspect-ratio: auto; transform: translateX(-50%); }
.ks-hero--center .ks-hero__card { left: 4%; bottom: 6%; width: 27%; }
.ks-hero--center .ks-hero__chip { left: auto; right: 3%; top: 12%; max-width: 32%; }
.ks-hero--center .ks-hero__sticker { right: 12%; bottom: 0; }

/* Pita teks berjalan */
.ks-ribbon { position: relative; z-index: 2; margin: clamp(56px, 7vw, 96px) -3% 0; padding: 18px 0; background: var(--ks-f-accent); color: var(--ks-on-accent); transform: rotate(-2deg); transform-origin: center; overflow: hidden; border-block: 2px solid var(--ks-ink); }
.ks-ribbon__track { display: flex; width: max-content; }
.ks-ribbon__set { display: flex; flex: none; align-items: center; }
.ks-ribbon__set li { display: inline-flex; align-items: center; gap: 28px; padding-right: 28px; font-family: var(--f-head); font-weight: var(--ks-fw); font-size: clamp(1.3rem, 1rem + 1.4vw, 2.3rem); letter-spacing: -.03em; white-space: nowrap; }
.ks-ribbon__set li:nth-child(even) span { font-family: var(--f-accent); font-style: italic; font-weight: 400; }
.ks-ribbon__set li i { font-size: .7em; }
main[data-motion="on"] .ks-ribbon__track { animation: ks-marquee 34s linear infinite; }
.ks-ribbon:hover .ks-ribbon__track { animation-play-state: paused; }
.ks-hero--ribbon .ks-ribbon { margin-bottom: clamp(36px, 4vw, 56px); }

/* --- Tentang ------------------------------------------------------------------ */
.ks-about__grid { display: grid; gap: clamp(48px, 7vw, 96px); align-items: center; }
.ks-about__media { position: relative; width: 100%; max-width: 560px; margin-inline: auto; padding: 0 12% 14% 0; }
.ks-about__main { aspect-ratio: 4 / 5; border-radius: var(--r-lg); border-top-left-radius: 48% 38%; overflow: hidden; background: var(--sec-card); box-shadow: var(--sec-shadow); }
.ks-about__img, .ks-about__main .k-ph, .ks-about__small .k-ph { width: 100%; height: 100%; object-fit: cover; }
.ks-about__small { position: absolute; right: 0; bottom: 0; width: 52%; aspect-ratio: 4 / 3; border-radius: var(--r-lg); overflow: hidden; border: 8px solid var(--sec-bg); background: var(--sec-card); transform: rotate(4deg); box-shadow: var(--sec-shadow); transition: transform .6s var(--ks-bounce); }
.ks-about__small:hover { transform: rotate(0) scale(1.03); }
.ks-about__media--single { padding: 0; }
.ks-about__badge { position: absolute; left: -4%; bottom: 20%; z-index: 2; display: grid; place-content: center; gap: 4px; width: clamp(130px, 14vw, 168px); aspect-ratio: 1; padding: 18px; border-radius: 50%; background: var(--ks-f-accent); color: var(--ks-on-accent); text-align: center; box-shadow: 4px 4px 0 0 var(--ks-ink); transform: rotate(-8deg); }
.ks-about__badge strong { font-family: var(--f-head); font-weight: var(--ks-fw); font-size: clamp(2.1rem, 1.6rem + 1.5vw, 2.9rem); line-height: .9; letter-spacing: -.05em; }
.ks-about__badge span { font-size: .78rem; font-weight: 700; line-height: 1.25; }
.ks-about__body { display: grid; gap: 26px; min-width: 0; }
.ks-about__body .ks-head { margin-bottom: 0; }
.ks-values { display: grid; gap: 14px; }
.ks-value { display: flex; gap: 16px; align-items: flex-start; padding: 16px 18px; border-radius: var(--r); background: var(--sec-card); border: 1.5px solid var(--sec-line); transition: transform .4s var(--ks-ease), border-color .3s; }
.ks-value:hover { transform: translateX(6px); border-color: var(--tone); }
.ks-value__icon { flex: none; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50% 50% 50% 8px; background: var(--tone-fill); color: var(--tone-on); font-size: 1.2rem; }
.ks-value__body { display: grid; gap: 4px; }
.ks-value__body strong { font-family: var(--f-head); color: var(--sec-ink); font-size: 1.08rem; font-weight: 700; line-height: 1.3; }
.ks-value__body span { color: var(--sec-muted); font-size: .95rem; }
.ks-sign { display: grid; gap: 2px; }
.ks-sign__name { font-family: var(--f-accent); font-style: italic; font-size: clamp(1.6rem, 1.3rem + 1vw, 2.1rem); color: var(--sec-ink); line-height: 1.1; }
.ks-sign__role { font-size: .85rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--sec-muted); }
@media (min-width: 960px) {
    .ks-about__grid { grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); }
    .ks-about--image-right .ks-about__media { order: 2; }
}

/* --- Layanan ------------------------------------------------------------------ */
.ks-svc-list--bento { display: flex; flex-wrap: wrap; gap: 20px; }
.ks-svc-list--bento .ks-svc { flex: 1 1 280px; }
.ks-svc-list--bento.ks-cols-3 .ks-svc:nth-child(4n+1) { flex-basis: 460px; }
.ks-svc-list--bento.ks-cols-2 .ks-svc { flex-basis: 400px; }
.ks-svc-list--bento.ks-cols-2 .ks-svc:nth-child(4n+1), .ks-svc-list--bento.ks-cols-2 .ks-svc:nth-child(4n+4) { flex-basis: 640px; }
.ks-svc-list--bento .ks-svc {
    position: relative; display: flex; flex-direction: column; gap: 16px; min-height: 320px; padding: clamp(24px, 2.6vw, 32px);
    border-radius: var(--r-lg); background: var(--sec-card); border: 1.5px solid var(--sec-line); color: var(--sec-text);
    transition: transform .5s var(--ks-bounce), box-shadow .4s var(--ks-ease);
}
.ks-svc-list--bento .ks-svc:hover { transform: translateY(-8px) rotate(-.8deg); box-shadow: var(--sec-shadow); }
.ks-svc-list--bento .ks-svc:nth-child(even):hover { transform: translateY(-8px) rotate(.8deg); }
.ks-svc__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.ks-svc__icon { display: grid; place-items: center; width: 58px; height: 58px; border-radius: 50% 50% 50% 10px; background: var(--tone-fill); color: var(--tone-on); font-size: 1.5rem; transition: transform .5s var(--ks-bounce); }
.ks-svc:hover .ks-svc__icon { transform: rotate(-12deg) scale(1.06); }
.ks-svc__num { font-family: var(--f-head); font-weight: var(--ks-fw); font-size: 1rem; letter-spacing: -.02em; color: var(--sec-muted); }
.ks-svc__title { font-size: clamp(1.35rem, 1.2rem + .6vw, 1.7rem); letter-spacing: -.035em; }
.ks-svc__body { display: grid; gap: 14px; }
.ks-svc__text { color: var(--sec-muted); }
.ks-svc__tags { display: flex; flex-wrap: wrap; gap: 6px; }
.ks-svc__tags li { padding: 4px 11px; border-radius: 999px; font-size: .78rem; font-weight: 700; background: color-mix(in srgb, var(--tone) 14%, transparent); color: var(--tone-tx); }
.ks-svc__link { display: inline-flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 6px; font-weight: 700; text-decoration: none; color: var(--sec-ink); }
.ks-svc__link i { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; border: 1.5px solid currentColor; transition: transform .4s var(--ks-bounce), background-color .3s; }
.ks-svc__link:hover i { transform: rotate(45deg); }
/* Kartu berisi warna */
.ks-svc-list--bento .ks-svc--fill { background: var(--tone-fill); color: var(--tone-on); border-color: transparent; }
.ks-svc--fill .ks-svc__title, .ks-svc--fill .ks-svc__text, .ks-svc--fill .ks-svc__num, .ks-svc--fill .ks-svc__link { color: var(--tone-on); }
.ks-svc--fill .ks-svc__icon { background: color-mix(in srgb, var(--tone-away) 22%, transparent); color: var(--tone-on); }
.ks-svc--fill .ks-svc__tags li { background: color-mix(in srgb, var(--tone-away) 24%, transparent); color: var(--tone-on); }
.k-sec.bg-primary .ks-svc:not(.ks-svc--fill) .ks-svc__tags li, .k-sec.bg-gradient .ks-svc:not(.ks-svc--fill) .ks-svc__tags li, .k-sec.bg-accent .ks-svc:not(.ks-svc--fill) .ks-svc__tags li { background: color-mix(in srgb, var(--sec-chip-c) var(--sec-chip-p), transparent); color: var(--sec-ink); }
.k-sec.bg-primary .ks-svc--fill.ks-tone--primary, .k-sec.bg-accent .ks-svc--fill.ks-tone--accent { box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--sec-ink) 40%, transparent); }

/* Baris bernomor besar */
.ks-svc-list--list { border-top: 1.5px solid var(--sec-line); }
.ks-svc-list--list .ks-svc { position: relative; isolation: isolate; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px 22px; align-items: center; padding: clamp(22px, 3vw, 34px) 0; border-bottom: 1.5px solid var(--sec-line); transition: padding .45s var(--ks-ease), color .3s; }
.ks-svc-list--list .ks-svc::before { content: ""; position: absolute; inset: 0 calc(var(--ks-gut) * -1); z-index: -1; background: var(--tone-fill); transform: scaleY(0); transform-origin: bottom; transition: transform .5s var(--ks-ease); }
.ks-svc-list--list .ks-svc__top { flex-direction: row-reverse; justify-content: flex-end; align-items: center; grid-row: span 2; align-self: start; }
.ks-svc-list--list .ks-svc__icon { width: 48px; height: 48px; font-size: 1.2rem; }
.ks-svc-list--list .ks-svc__num { display: none; }
.ks-svc-list--list .ks-svc__title { font-size: clamp(1.7rem, 1.1rem + 2.4vw, 3.2rem); letter-spacing: -.045em; }
.ks-svc-list--list .ks-svc__link { margin-top: 0; }
.ks-svc-list--list .ks-svc__link span { display: none; }
.ks-svc-list--list .ks-svc__link i { width: 52px; height: 52px; font-size: 1.2rem; }
@media (hover: hover) {
    .ks-svc-list--list .ks-svc:hover::before { transform: scaleY(1); }
    .ks-svc-list--list .ks-svc:hover { padding-inline: clamp(12px, 2vw, 28px); }
    .ks-svc-list--list .ks-svc:hover :is(.ks-svc__title, .ks-svc__text, .ks-svc__link) { color: var(--tone-on); }
    .ks-svc-list--list .ks-svc:hover .ks-svc__tags li { background: color-mix(in srgb, var(--tone-away) 24%, transparent); color: var(--tone-on); }
    .ks-svc-list--list .ks-svc:hover .ks-svc__icon { background: color-mix(in srgb, var(--tone-away) 22%, transparent); color: var(--tone-on); }
}
@media (min-width: 900px) {
    .ks-svc-list--list .ks-svc { grid-template-columns: 70px minmax(0, 1.05fr) minmax(0, 1fr) auto; gap: 28px; }
    .ks-svc-list--list .ks-svc__top { grid-row: auto; align-self: center; }
}

/* --- Keahlian ----------------------------------------------------------------- */
.ks-expertise__grid { display: grid; gap: clamp(48px, 7vw, 96px); align-items: center; }
.ks-expertise__body { display: grid; gap: 30px; min-width: 0; }
.ks-expertise__body .ks-head { margin-bottom: 0; }
.ks-skills { display: grid; gap: 20px; }
.ks-skill { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 14px; align-items: baseline; }
.ks-skill__label { font-weight: 700; color: var(--sec-ink); }
.ks-skill__value { font-family: var(--f-head); font-weight: var(--ks-fw); color: var(--sec-ink); font-size: 1.05rem; }
.ks-skill__track { grid-column: 1 / -1; display: block; height: 12px; border-radius: 999px; background: color-mix(in srgb, var(--sec-ink) 10%, transparent); overflow: hidden; }
.ks-skill__bar { display: block; height: 100%; width: var(--v); border-radius: inherit; background: var(--ks-grad); background-size: 300% 100%; transition: width 1.5s var(--ks-ease); }
.ks-skill:nth-child(2) .ks-skill__bar { background-position: 30% 0; }
.ks-skill:nth-child(3) .ks-skill__bar { background-position: 60% 0; }
.ks-skill:nth-child(4) .ks-skill__bar { background-position: 90% 0; }
.k-sec.bg-primary .ks-skill__bar, .k-sec.bg-gradient .ks-skill__bar { background: #ffffff; }
.k-sec.bg-accent .ks-skill__bar { background: var(--ks-acc-ink); }
.js-rv .ks-skill.rv:not(.is-in) .ks-skill__bar { width: 0; }
.ks-industries { display: grid; gap: 14px; }
.ks-industries__title { font-size: 1rem; font-family: var(--f-body); font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--sec-muted); }
.ks-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.ks-chip { padding: 7px 15px; border-radius: 999px; font-size: .88rem; font-weight: 700; transition: transform .35s var(--ks-bounce); }
.ks-chip:hover { transform: translateY(-3px) rotate(-3deg); }
.ks-expertise__media { position: relative; width: 100%; max-width: 520px; margin-inline: auto; padding: 0 0 8% 8%; }
.ks-expertise__block { position: absolute; right: -4%; top: 6%; width: 82%; height: 82%; border-radius: var(--r-lg); background: var(--ks-grad); transform: rotate(5deg); }
.ks-expertise__frame { position: relative; aspect-ratio: 5 / 6; border-radius: var(--r-lg); border-bottom-right-radius: 44% 36%; overflow: hidden; background: var(--sec-card); box-shadow: var(--sec-shadow); }
.ks-expertise__img, .ks-expertise__frame .k-ph { width: 100%; height: 100%; object-fit: cover; }
.ks-expertise__stat { position: absolute; left: 0; bottom: 0; z-index: 2; display: grid; gap: 4px; max-width: 64%; padding: 18px 22px; border-radius: var(--r-lg); background: var(--ks-f-pink); color: var(--ks-on-pink); box-shadow: 4px 4px 0 0 var(--ks-ink); }
.ks-expertise__stat strong { font-family: var(--f-head); font-weight: var(--ks-fw); font-size: clamp(2.4rem, 2rem + 1.6vw, 3.4rem); line-height: .9; letter-spacing: -.05em; }
.ks-expertise__stat span { font-weight: 700; font-size: .9rem; line-height: 1.3; }
@media (min-width: 960px) {
    .ks-expertise__grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); }
    .ks-expertise--reverse .ks-expertise__media { order: -1; }
    .ks-expertise--noimg .ks-expertise__grid { grid-template-columns: minmax(0, 1fr); max-width: 820px; }
}

/* --- Proyek unggulan ---------------------------------------------------------- */
.ks-feat-list { display: grid; gap: clamp(64px, 9vw, 120px); }
.ks-feat { display: grid; gap: clamp(28px, 4vw, 56px); align-items: center; }
.ks-feat__media { position: relative; padding: 0 22px 22px 0; }
.ks-feat__block { position: absolute; inset: 22px 0 0 22px; border-radius: var(--r-lg); background: var(--tone-fill); transition: transform .6s var(--ks-ease); }
.ks-feat:hover .ks-feat__block { transform: translate(8px, 8px); }
.ks-feat__frame { position: relative; aspect-ratio: 4 / 3; border-radius: var(--r-lg); overflow: hidden; background: var(--sec-card); border: 1.5px solid var(--sec-line); }
.ks-feat__img, .ks-feat__frame .k-ph { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ks-ease); }
.ks-feat:hover .ks-feat__img { transform: scale(1.05); }
.ks-feat__num { position: absolute; top: -.42em; left: -.1em; z-index: 2; font-family: var(--f-head); font-weight: var(--ks-fw); font-size: clamp(3.6rem, 2.4rem + 4.6vw, 7rem); line-height: 1; letter-spacing: -.06em; color: transparent; -webkit-text-stroke: 2px var(--sec-ink); pointer-events: none; }
.ks-feat__body { display: grid; gap: 16px; justify-items: start; min-width: 0; }
.ks-feat__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.ks-feat__cat { padding: 5px 13px; border-radius: 999px; font-size: .8rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.ks-feat__year { font-size: .9rem; font-weight: 700; color: var(--sec-muted); }
.ks-feat__title { font-size: clamp(1.6rem, 1.2rem + 1.5vw, 2.5rem); letter-spacing: -.04em; line-height: 1.08; }
.ks-feat__client { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: var(--sec-ink); }
.ks-feat__client i { color: var(--tone-tx); }
.ks-feat__summary { color: var(--sec-muted); max-width: 520px; }
.ks-feat__metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 14px; width: 100%; max-width: 480px; padding: 18px 0 4px; border-top: 1.5px dashed var(--sec-line); overflow-wrap: break-word; }
.ks-feat__metrics dt { font-family: var(--f-head); font-weight: var(--ks-fw); font-size: clamp(1.8rem, 1.4rem + 1.4vw, 2.5rem); line-height: 1; letter-spacing: -.045em; color: var(--tone-tx); }
.ks-feat__metrics dd { margin-top: 6px; font-size: .88rem; color: var(--sec-muted); }
.ks-feat__link { display: inline-flex; align-items: center; gap: 10px; padding: 11px 20px; border-radius: var(--r-btn); border: 1.5px solid var(--sec-ink); color: var(--sec-ink); font-weight: 700; text-decoration: none; transition: background-color .3s, color .3s, transform .35s var(--ks-ease); }
.ks-feat__link:hover { background: var(--sec-ink); color: var(--sec-bg); transform: translateY(-2px); }
@media (min-width: 960px) {
    .ks-featured--stack .ks-feat { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
    .ks-featured--stack .ks-feat:nth-child(even) { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
    .ks-featured--stack .ks-feat:nth-child(even) .ks-feat__media { order: 2; padding: 0 0 22px 22px; }
    .ks-featured--stack .ks-feat:nth-child(even) .ks-feat__block { inset: 22px 22px 0 0; }
    .ks-featured--stack .ks-feat:nth-child(even) .ks-feat__num { left: auto; right: -.1em; }
    .ks-featured--stack .ks-feat:nth-child(even) .ks-feat__body { padding-left: 4%; }
    .ks-featured--stack .ks-feat:nth-child(odd) .ks-feat__body { padding-right: 4%; }
}
/* Kartu dua kolom (kolom kanan turun sedikit → asimetris) */
.ks-featured--cards .ks-feat-list { gap: 28px; }
.ks-featured--cards .ks-feat { align-content: start; gap: 0; border-radius: calc(var(--r-lg) + 6px); background: var(--sec-card); border: 1.5px solid var(--sec-line); overflow: hidden; transition: transform .5s var(--ks-ease), box-shadow .4s; }
.ks-featured--cards .ks-feat:hover { transform: translateY(-6px); box-shadow: var(--sec-shadow); }
.ks-featured--cards .ks-feat__media { padding: 0; }
.ks-featured--cards .ks-feat__block { display: none; }
.ks-featured--cards .ks-feat__frame { aspect-ratio: 16 / 10; border: 0; border-radius: 0; border-bottom: 6px solid var(--tone-fill); }
.ks-featured--cards .ks-feat__num { top: 14px; left: 16px; font-size: 1rem; padding: 6px 12px; border-radius: 999px; background: var(--tone-fill); color: var(--tone-on); -webkit-text-stroke: 0; letter-spacing: 0; }
.ks-featured--cards .ks-feat__body { padding: clamp(22px, 3vw, 34px); }
.ks-featured--cards .ks-feat__title { font-size: clamp(1.4rem, 1.2rem + .9vw, 2rem); }
@media (min-width: 860px) {
    .ks-featured--cards .ks-feat-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ks-featured--cards .ks-feat:nth-child(even) { margin-top: 72px; }
}

/* --- Proses ------------------------------------------------------------------- */
.ks-steps { position: relative; display: grid; gap: 20px; counter-reset: step; }
.ks-step { position: relative; }
.ks-step__dot { display: none; }
.ks-step__card { position: relative; display: grid; gap: 12px; height: 100%; padding: 24px; border-radius: var(--r-lg); background: var(--sec-card); border: 1.5px solid var(--sec-line); transition: transform .5s var(--ks-bounce), box-shadow .4s; }
.ks-step:hover .ks-step__card { transform: translateY(-6px) rotate(-1deg); box-shadow: var(--sec-shadow); }
.ks-step__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ks-step__num { font-family: var(--f-head); font-weight: var(--ks-fw); font-size: clamp(2.4rem, 2rem + 1.4vw, 3.2rem); line-height: .9; letter-spacing: -.06em; color: var(--sec-ink); }
.ks-step__icon { display: grid; place-items: center; width: 50px; height: 50px; border-radius: 50%; background: var(--tone-fill); color: var(--tone-on); font-size: 1.25rem; }
.ks-step__time { justify-self: start; padding: 4px 12px; border-radius: 999px; font-size: .78rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; background: color-mix(in srgb, var(--sec-chip-c, var(--sec-ink)) var(--sec-chip-p, 8%), transparent); color: var(--sec-ink); }
.ks-step__title { font-size: 1.35rem; letter-spacing: -.03em; }
.ks-step__text { color: var(--sec-muted); font-size: .96rem; }
@media (min-width: 720px) { .ks-process--steps .ks-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1080px) {
    .ks-process--steps .ks-steps { grid-template-columns: repeat(min(var(--n), 5), minmax(0, 1fr)); padding-top: 40px; }
    .ks-process--steps .ks-steps::before { content: ""; position: absolute; left: 4%; right: 4%; top: 12px; border-top: 2.5px dashed var(--sec-line); }
    .ks-process--steps .ks-step__dot { display: block; position: absolute; left: 24px; top: -38px; width: 22px; height: 22px; border-radius: 50%; background: var(--tone); border: 4px solid var(--sec-bg); }
    .ks-process--steps .ks-step:nth-child(even) { margin-top: 44px; }
    .ks-process--steps .ks-step:nth-child(even) .ks-step__dot { top: -82px; }
}
/* Timeline vertikal */
.ks-process--timeline .ks-steps { max-width: 960px; margin-inline: auto; gap: 26px; padding-left: 42px; }
.ks-process--timeline .ks-steps::before { content: ""; position: absolute; left: 13px; top: 8px; bottom: 8px; border-left: 2.5px dashed var(--sec-line); }
.ks-process--timeline .ks-step__dot { display: block; position: absolute; left: -38px; top: 26px; width: 20px; height: 20px; border-radius: 50%; background: var(--tone); border: 4px solid var(--sec-bg); }
@media (min-width: 860px) {
    .ks-process--timeline .ks-steps { padding-left: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 88px; }
    .ks-process--timeline .ks-steps::before { left: 50%; }
    .ks-process--timeline .ks-step:nth-child(odd) { grid-column: 1; }
    .ks-process--timeline .ks-step:nth-child(even) { grid-column: 2; margin-top: 90px; }
    .ks-process--timeline .ks-step:nth-child(n+3) { margin-top: -60px; }
    .ks-process--timeline .ks-step:nth-child(odd) .ks-step__dot { left: auto; right: -55px; }
    .ks-process--timeline .ks-step:nth-child(even) .ks-step__dot { left: -55px; }
}

/* --- Galeri portofolio -------------------------------------------------------- */
.ks-filters { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: -16px 0 clamp(30px, 4vw, 44px); }
.ks-filter { padding: 9px 18px; border-radius: 999px; border: 1.5px solid var(--sec-line); background: transparent; color: var(--sec-ink); font-weight: 700; font-size: .92rem; cursor: pointer; transition: background-color .25s, color .25s, border-color .25s, transform .35s var(--ks-bounce); }
.ks-filter:hover { transform: translateY(-2px); border-color: var(--sec-ink); }
.ks-filter.is-active { background: var(--sec-ink); color: var(--sec-bg); border-color: var(--sec-ink); }
.ks-works { --c: 3; }
.ks-works.ks-cols-4 { --c: 4; }
.ks-work { position: relative; border-radius: var(--r-lg); overflow: hidden; background: var(--sec-card); isolation: isolate; }
.ks-work.is-hidden { display: none; }
.ks-work__frame { position: relative; height: 100%; }
.ks-work__img, .ks-work__frame .k-ph { width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ks-ease), filter .5s; }
.ks-work:hover .ks-work__img { transform: scale(1.06); }
.ks-work__open { position: absolute; inset: 0; z-index: 2; display: flex; align-items: flex-start; justify-content: flex-end; padding: 14px; border: 0; background: transparent; cursor: zoom-in; color: var(--ks-on-accent); }
.ks-work__open i { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: var(--ks-f-accent); font-size: 1.2rem; transform: scale(0) rotate(-90deg); transition: transform .45s var(--ks-bounce); }
.ks-work:hover .ks-work__open i, .ks-work__open:focus-visible i { transform: none; }
.ks-work__info { position: absolute; left: 12px; right: 12px; bottom: 12px; z-index: 3; display: grid; gap: 2px; padding: 12px 16px; border-radius: var(--r); background: var(--sec-card); color: var(--sec-ink); pointer-events: none; transition: transform .5s var(--ks-ease), opacity .4s; box-shadow: 0 12px 30px -16px color-mix(in srgb, #000000 50%, transparent); }
.k-sec.bg-primary .ks-work__info, .k-sec.bg-gradient .ks-work__info, .k-sec.bg-accent .ks-work__info { background: var(--ks-ink); color: #ffffff; --sec-ink: #ffffff; --sec-muted: color-mix(in srgb, #ffffff 80%, var(--ks-ink)); --tone-tx: var(--ks-td-accent); }
.ks-work__cat { font-size: .72rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--tone-tx, var(--sec-tx-primary)); }
.ks-work__title { font-size: 1.02rem; letter-spacing: -.02em; line-height: 1.25; }
.ks-work__client { font-size: .82rem; color: var(--sec-muted); }
[data-mode="editor"] .ks-work__info { pointer-events: auto; }
@media (hover: hover) {
    html:not([data-mode="editor"]) .ks-work__info { opacity: 0; transform: translateY(calc(100% + 16px)); }
    html:not([data-mode="editor"]) .ks-work:hover .ks-work__info, html:not([data-mode="editor"]) .ks-work:focus-within .ks-work__info { opacity: 1; transform: none; }
}
/* Mosaik asimetris: 4 kolom, pola 6 posisi (lihat gallery.php) */
.ks-works--mosaic { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: clamp(150px, 42vw, 240px); grid-auto-flow: dense; gap: 14px; }
.ks-works--mosaic > [data-pos="1"] { grid-column: span 2; grid-row: span 2; }
.ks-works--mosaic > [data-pos="3"] { grid-row: span 2; }
.ks-works--mosaic > [data-pos="5"], .ks-works--mosaic > [data-pos="6"] { grid-column: span 2; }
.ks-works--mosaic > [data-tail="1"][data-pos], .ks-works--mosaic > [data-tail="5"][data-pos="5"] { grid-column: 1 / -1; grid-row: span 1; }
.ks-works--mosaic > [data-tail="2"][data-pos], .ks-works--mosaic > [data-tail="3"][data-pos="1"] { grid-column: span 2; grid-row: span 1; }
.ks-works--mosaic > [data-tail="3"][data-pos="3"] { grid-row: span 1; }
@media (min-width: 720px) {
    .ks-works--mosaic { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: clamp(150px, 18vw, 250px); gap: 16px; }
}
/* Masonry: tinggi alami gambar */
.ks-works--masonry { columns: 2 220px; column-gap: 14px; }
.ks-works--masonry > .ks-work { display: block; margin-bottom: 14px; break-inside: avoid; }
.ks-works--masonry .ks-work__frame, .ks-works--masonry .ks-work__img { height: auto; }
@media (min-width: 960px) { .ks-works--masonry { columns: var(--c); column-gap: 16px; } .ks-works--masonry > .ks-work { margin-bottom: 16px; } }
/* Grid rata */
.ks-works--grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: 16px; }
.ks-works--grid > .ks-work { aspect-ratio: 4 / 3; }
@media (min-width: 960px) { .ks-works--grid { grid-template-columns: repeat(var(--c), minmax(0, 1fr)); } }

/* Lightbox */
.ks-lightbox { position: fixed; inset: 0; z-index: 120; display: grid; place-items: center; padding: clamp(12px, 3vw, 40px); background: color-mix(in srgb, var(--ks-abyss) 92%, transparent); color: var(--sec-ink); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); animation: ks-fade .35s var(--ks-ease); }
.ks-lightbox[hidden] { display: none; }
.ks-lightbox__panel { position: relative; display: grid; gap: 16px; width: min(1100px, 100%); max-height: 100%; }
.ks-lightbox__figure { display: grid; gap: 16px; min-height: 0; }
.ks-lightbox__media { display: grid; place-items: center; min-height: 0; }
.ks-lightbox__media img { max-width: 100%; max-height: min(72vh, 820px); width: auto; height: auto; border-radius: var(--r-lg); box-shadow: 0 30px 80px -30px #000000; animation: ks-zoom .45s var(--ks-ease); }
.ks-lightbox__caption { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; padding-inline: 4px; }
.ks-lightbox__cat { padding: 4px 12px; border-radius: 999px; background: var(--ks-f-accent); color: var(--ks-on-accent); font-size: .74rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.ks-lightbox__cat:empty, .ks-lightbox__client:empty { display: none; }
.ks-lightbox__title { font-family: var(--f-head); font-size: clamp(1.1rem, 1rem + .6vw, 1.5rem); letter-spacing: -.02em; color: var(--sec-ink); }
.ks-lightbox__client { color: var(--sec-muted); font-size: .92rem; }
.ks-lightbox__link { margin-left: auto; }
.ks-lightbox__close, .ks-lightbox__step, .ks-round { display: grid; place-items: center; width: 50px; height: 50px; padding: 0; border-radius: 50%; border: 1.5px solid var(--sec-line); background: var(--sec-card); color: var(--sec-ink); cursor: pointer; font-size: 1.1rem; transition: transform .35s var(--ks-bounce), background-color .25s, color .25s, opacity .25s; }
.ks-lightbox__close:hover, .ks-lightbox__step:hover, .ks-round:hover:not(:disabled) { transform: scale(1.08); background: var(--sec-ink); color: var(--sec-bg); }
.ks-lightbox__close { position: absolute; right: 0; top: -6px; z-index: 2; transform: translateY(-100%); }
.ks-lightbox__close:hover { transform: translateY(-100%) scale(1.08); }
.ks-lightbox__nav { display: flex; align-items: center; justify-content: center; gap: 16px; }
.ks-lightbox__nav[hidden] { display: none; }
.ks-lightbox__count { min-width: 64px; text-align: center; font-weight: 700; color: var(--sec-muted); font-variant-numeric: tabular-nums; }
@media (max-width: 719.98px) { .ks-lightbox__close { top: 6px; right: 6px; transform: none; } .ks-lightbox__close:hover { transform: scale(1.08); } .ks-lightbox__panel { padding-top: 56px; } }

/* --- Testimoni ---------------------------------------------------------------- */
.ks-quotes__top { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 24px 48px; margin-bottom: clamp(36px, 5vw, 60px); }
.ks-quotes__top .ks-head { margin-bottom: 0; }
.ks-quotes__score { display: flex; align-items: center; gap: 16px; padding: 14px 22px 14px 14px; border-radius: var(--r-lg); background: var(--sec-card); border: 1.5px solid var(--sec-line); box-shadow: 4px 4px 0 0 color-mix(in srgb, var(--sec-ink) 14%, transparent); }
.ks-quotes__score > strong { display: grid; place-items: center; min-width: 74px; height: 74px; padding: 0 10px; border-radius: var(--r); background: var(--ks-f-primary); color: var(--ks-on-primary); font-family: var(--f-head); font-size: 2rem; letter-spacing: -.04em; }
.ks-quotes__score > span { display: grid; gap: 4px; }
.ks-quotes__note { font-size: .88rem; color: var(--sec-muted); max-width: 220px; }
.ks-stars { display: inline-flex; gap: 3px; color: var(--ks-t-accent); font-size: .95rem; }
.ks-stars__off { opacity: .25; }
.k-sec.bg-accent .ks-stars { color: var(--ks-acc-ink); }
.ks-quotes__track { display: grid; gap: 20px; }
.ks-quotes--grid .ks-quotes__track { grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); }
.ks-quotes--slider .ks-quotes__track { grid-auto-flow: column; grid-auto-columns: min(440px, 86%); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: 4px; scrollbar-width: none; padding: 6px 4px 12px; margin: -6px -4px 0; }
.ks-quotes--slider .ks-quotes__track::-webkit-scrollbar { display: none; }
.ks-quote { display: flex; flex-direction: column; gap: 18px; padding: clamp(24px, 2.6vw, 32px); border-radius: var(--r-lg); background: var(--sec-card); border: 1.5px solid var(--sec-line); scroll-snap-align: start; transition: transform .5s var(--ks-bounce), box-shadow .4s; }
.ks-quote:hover { transform: translateY(-6px) rotate(-.6deg); box-shadow: var(--sec-shadow); }
.ks-quote__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ks-quote__mark { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50% 50% 50% 8px; background: var(--tone-fill); color: var(--tone-on); font-size: 1.9rem; line-height: 1; }
.ks-quote__text { font-size: 1.08rem; line-height: 1.6; color: var(--sec-ink); flex: 1; }
.ks-quote__metric { align-self: flex-start; display: inline-flex; align-items: center; gap: 7px; padding: 5px 13px; border-radius: 999px; font-size: .82rem; font-weight: 800; }
.ks-quote__who { display: flex; align-items: center; gap: 14px; padding-top: 18px; border-top: 1.5px dashed var(--sec-line); }
.ks-quote__id { display: grid; gap: 1px; min-width: 0; }
.ks-quote__id strong { color: var(--sec-ink); font-weight: 700; }
.ks-quote__id span { font-size: .86rem; color: var(--sec-muted); }
.ks-avatar { flex: none; position: relative; display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%; overflow: hidden; background: var(--tone-fill); color: var(--tone-on); }
.ks-avatar__img { width: 100%; height: 100%; object-fit: cover; object-position: center 18%; }
.ks-avatar .k-ph { min-height: 0; border-radius: 50%; font-size: .6rem; }
.ks-avatar .k-ph span { display: none; }
.ks-avatar__initials { font-family: var(--f-head); font-weight: 700; font-size: 1.1rem; }
.ks-slider__nav { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: 26px; }
.ks-dots { display: flex; flex-wrap: wrap; gap: 8px; }
.ks-dot { width: 10px; height: 10px; border-radius: 999px; background: var(--sec-line); transition: width .4s var(--ks-ease), background-color .3s; }
.ks-dot.is-active { width: 34px; background: var(--sec-ink); }
.ks-slider__btns { display: flex; gap: 10px; }
.ks-round:disabled { opacity: .35; cursor: default; }

/* --- Brand / logo klien -------------------------------------------------------- */
.ks-brands .ks-head { margin-bottom: clamp(32px, 4vw, 52px); }
.ks-logo { display: grid; place-items: center; }
.ks-logo__img { height: clamp(34px, 3.4vw, 46px); width: auto; max-width: 180px; object-fit: contain; transition: filter .35s, opacity .35s, transform .35s var(--ks-bounce); }
.ks-brands--mono .ks-logo__img { filter: var(--sec-logo); }
.ks-brands--mono .ks-logo:hover .ks-logo__img { filter: none; transform: scale(1.06); }
.ks-dark .ks-brands--mono .ks-logo:hover .ks-logo__img, .k-sec.bg-dark.ks-brands--mono .ks-logo:hover .ks-logo__img, .k-sec.bg-primary.ks-brands--mono .ks-logo:hover .ks-logo__img, .k-sec.bg-gradient.ks-brands--mono .ks-logo:hover .ks-logo__img { filter: brightness(0) invert(1); }
.ks-logo__name { font-family: var(--f-head); font-weight: 700; font-size: 1.15rem; letter-spacing: -.03em; color: var(--sec-ink); white-space: nowrap; }
.ks-logos { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 140px), 1fr)); gap: 14px; }
.ks-logos .ks-logo { min-height: 104px; padding: 22px; border-radius: var(--r-lg); background: var(--sec-card); border: 1.5px solid var(--sec-line); transition: transform .4s var(--ks-bounce), border-color .3s; }
.ks-logos .ks-logo:hover { transform: translateY(-4px) rotate(-1.5deg); border-color: var(--sec-ink); }
.ks-logos .ks-logo__name { white-space: normal; text-align: center; }
.ks-marquees { display: grid; gap: 18px; -webkit-mask-image: linear-gradient(90deg, transparent, #000000 10%, #000000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000000 10%, #000000 90%, transparent); }
.ks-marquee { overflow: hidden; }
.ks-marquee__track { display: flex; width: max-content; }
.ks-marquee__set { display: flex; flex: none; align-items: center; gap: 16px; padding-right: 16px; }
.ks-marquee .ks-logo { min-width: 190px; height: 92px; padding: 18px 26px; border-radius: 999px; background: var(--sec-card); border: 1.5px solid var(--sec-line); }
main[data-motion="on"] .ks-marquee__track { animation: ks-marquee 46s linear infinite; }
main[data-motion="on"] .ks-marquee--rev .ks-marquee__track { animation-direction: reverse; animation-duration: 52s; }
.ks-marquee:hover .ks-marquee__track { animation-play-state: paused; }

/* --- Tim ---------------------------------------------------------------------- */
.ks-team__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: clamp(20px, 2.4vw, 30px); }
.ks-member { display: grid; align-content: start; gap: 16px; min-width: 0; }
.ks-member__photo { position: relative; aspect-ratio: 4 / 5; border-radius: var(--r-lg); overflow: hidden; background: var(--tone-fill); isolation: isolate; }
.ks-team--arch .ks-member__photo { border-radius: 999px 999px var(--r-lg) var(--r-lg); }
.ks-member__shape { position: absolute; left: 50%; bottom: -18%; z-index: -1; width: 90%; aspect-ratio: 1; border-radius: 50%; border: 18px solid color-mix(in srgb, var(--tone-away) 16%, transparent); transform: translateX(-50%); transition: transform .7s var(--ks-ease); }
.ks-member:hover .ks-member__shape { transform: translateX(-50%) scale(1.12); }
.ks-member__img { position: absolute; left: 50%; bottom: 0; width: auto; height: 94%; max-width: 110%; object-fit: contain; object-position: bottom center; transform: translateX(-50%); transition: transform .7s var(--ks-ease); }
.ks-member:hover .ks-member__img { transform: translateX(-50%) scale(1.04); }
.ks-member__photo .k-ph { position: absolute; inset: 12px; width: auto; height: auto; color: var(--tone-on); border-color: color-mix(in srgb, var(--tone-on) 40%, transparent); }
.ks-member__initials { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--f-head); font-weight: 700; font-size: clamp(3rem, 6vw, 5rem); letter-spacing: -.05em; color: var(--tone-on); }
.ks-member__social { position: absolute; right: 12px; bottom: 12px; z-index: 2; display: grid; gap: 8px; }
.ks-member__social a { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--sec-card); color: var(--sec-ink); text-decoration: none; box-shadow: 0 8px 20px -10px color-mix(in srgb, #000000 60%, transparent); transition: transform .35s var(--ks-bounce), background-color .25s, color .25s; }
.ks-member__social a:hover { transform: scale(1.1) rotate(-8deg); background: var(--sec-ink); color: var(--sec-bg); }
.k-sec.bg-primary .ks-member__social a, .k-sec.bg-gradient .ks-member__social a, .k-sec.bg-accent .ks-member__social a { background: #ffffff; color: var(--ks-ink); }
@media (hover: hover) {
    html:not([data-mode="editor"]) .ks-member__social li { opacity: 0; transform: translateX(14px); transition: opacity .35s, transform .45s var(--ks-bounce); }
    html:not([data-mode="editor"]) .ks-member__social li:nth-child(2) { transition-delay: .05s; }
    html:not([data-mode="editor"]) .ks-member__social li:nth-child(3) { transition-delay: .1s; }
    html:not([data-mode="editor"]) .ks-member:hover .ks-member__social li, html:not([data-mode="editor"]) .ks-member:focus-within .ks-member__social li { opacity: 1; transform: none; }
}
.ks-member__info { display: grid; gap: 4px; padding-inline: 4px; }
.ks-member__name { font-size: 1.3rem; letter-spacing: -.03em; }
.ks-member__role { font-size: .82rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--tone-tx); }
.ks-member__bio { font-size: .95rem; color: var(--sec-muted); margin-top: 4px; }
.ks-member--join { align-content: center; justify-items: start; gap: 14px; min-height: 280px; padding: 28px; border-radius: var(--r-lg); border: 2px dashed color-mix(in srgb, var(--sec-ink) 30%, transparent); }
.ks-member__joinicon { display: grid; place-items: center; width: 60px; height: 60px; border-radius: 50%; background: var(--ks-grad); color: #ffffff; font-size: 1.5rem; transition: transform .5s var(--ks-bounce); }
.ks-member--join:hover .ks-member__joinicon { transform: rotate(90deg); }
@media (min-width: 720px) { .ks-team__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 960px) {
    .ks-team__grid.ks-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .ks-team__grid.ks-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .ks-team__grid.ks-cols-3 > .ks-member:nth-child(3n+2) { margin-top: 48px; }
    .ks-team__grid.ks-cols-4 > .ks-member:nth-child(even) { margin-top: 40px; }
}

/* --- Banner CTA --------------------------------------------------------------- */
.ks-banner { position: relative; isolation: isolate; overflow: hidden; display: grid; gap: 36px; align-items: center; padding: clamp(32px, 6vw, 84px); border-radius: calc(var(--r-lg) + 10px); background-color: var(--sec-bg); color: var(--sec-text); box-shadow: var(--sec-shadow); }
.ks-banner--dark { border: 1.5px solid var(--sec-line); }
.ks-banner__arch { position: absolute; left: -40px; bottom: -40px; z-index: -1; width: clamp(140px, 18vw, 240px); aspect-ratio: 3 / 4; border-radius: 999px 999px 0 0; background: color-mix(in srgb, var(--sec-ink) 10%, transparent); transform: rotate(18deg); }
.ks-banner__ring { position: absolute; right: -60px; top: -60px; z-index: -1; width: clamp(160px, 20vw, 280px); aspect-ratio: 1; border-radius: 50%; border: clamp(18px, 2.4vw, 30px) solid color-mix(in srgb, var(--sec-ink) 10%, transparent); }
.ks-banner__text { display: grid; gap: 22px; justify-items: start; min-width: 0; }
.ks-banner__title { font-size: calc(clamp(2.3rem, 1.3rem + 4vw, 4.8rem) * var(--ks-ts)); line-height: 1; letter-spacing: -.05em; }
.ks-banner__lead { font-size: var(--ks-lead); color: var(--sec-muted); max-width: 560px; }
.ks-banner__note { display: inline-flex; align-items: center; gap: 8px; font-size: .92rem; font-weight: 600; color: var(--sec-muted); }
.ks-banner__visual { position: relative; display: grid; place-items: center; }
.ks-banner__img { width: min(100%, 420px); height: auto; filter: drop-shadow(0 30px 40px color-mix(in srgb, #000000 30%, transparent)); }
.ks-banner__visual .k-ph { min-height: 260px; }
.ks-banner__sticker { left: 0; top: 0; }
.ks-banner__sticker--solo { left: auto; right: clamp(20px, 4vw, 56px); top: clamp(20px, 4vw, 56px); }
.ks-banner--gradient .ks-hl--serif, .ks-banner--dark .ks-hl--serif { text-decoration: underline wavy; text-decoration-color: var(--ks-t-accent); text-decoration-thickness: .05em; text-underline-offset: .18em; text-decoration-skip-ink: none; }
@media (min-width: 900px) {
    .ks-banner { grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); }
    .ks-banner--noimg { grid-template-columns: minmax(0, 1fr); padding-right: clamp(180px, 20vw, 240px); }
}

/* --- Kontak ------------------------------------------------------------------- */
.ks-contact__grid { display: grid; gap: clamp(40px, 6vw, 72px); align-items: start; }
.ks-contact__info { display: grid; gap: 28px; min-width: 0; }
.ks-contact__info .ks-head { margin-bottom: 0; }
.ks-contact__list { display: grid; gap: 4px; }
.ks-contact__list li { display: flex; gap: 16px; align-items: flex-start; padding: 14px 0; border-bottom: 1.5px dashed var(--sec-line); }
.ks-contact__icon { flex: none; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50% 50% 50% 8px; background: var(--tone-fill); color: var(--tone-on); font-size: 1.15rem; }
.ks-contact__txt { display: grid; gap: 2px; min-width: 0; }
.ks-contact__txt small { font-size: .76rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--sec-muted); }
.ks-contact__txt a, .ks-contact__txt > span { color: var(--sec-ink); font-weight: 600; text-decoration: none; }
.ks-contact__txt a:hover { text-decoration: underline; text-underline-offset: 3px; }
.ks-contact__extra { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px; }
.ks-contact__social { display: grid; gap: 10px; }
.ks-contact__sociallabel { font-size: .8rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--sec-muted); }
.ks-form { position: relative; overflow: hidden; isolation: isolate; display: grid; gap: 18px; padding: clamp(24px, 4vw, 44px); border-radius: calc(var(--r-lg) + 6px); background: var(--sec-bg); color: var(--sec-text); border: 1.5px solid var(--sec-line); box-shadow: 8px 8px 0 0 color-mix(in srgb, var(--ks-ink) 90%, transparent); }
.ks-dark .ks-form { box-shadow: 8px 8px 0 0 color-mix(in srgb, var(--ks-t-primary) 70%, transparent); }
.ks-form__corner { position: absolute; right: -30px; top: -30px; z-index: -1; width: 120px; aspect-ratio: 1; border-radius: 50%; background: var(--ks-t-accent); opacity: .9; }
.ks-form__title { font-size: clamp(1.4rem, 1.2rem + .8vw, 1.9rem); letter-spacing: -.035em; padding-right: 60px; }
.ks-form__row { display: grid; gap: 18px; }
.ks-field { display: grid; gap: 7px; min-width: 0; }
.ks-field > span, .ks-field > legend { font-size: .86rem; font-weight: 700; color: var(--sec-ink); }
.ks-field > legend { margin-bottom: 7px; padding: 0; }
.ks-field input, .ks-field select, .ks-field textarea { width: 100%; min-height: 52px; padding: 13px 16px; border-radius: var(--r); border: 1.5px solid color-mix(in srgb, var(--sec-ink) 20%, transparent); background: color-mix(in srgb, var(--sec-ink) 3%, var(--sec-bg)); color: var(--sec-ink); transition: border-color .25s, box-shadow .25s; }
.ks-field textarea { resize: vertical; min-height: 120px; }
.ks-field input::placeholder, .ks-field textarea::placeholder { color: var(--sec-muted); opacity: .85; }
.ks-field input:focus, .ks-field select:focus, .ks-field textarea:focus { outline: none; border-color: var(--ks-t-primary); box-shadow: 0 0 0 4px color-mix(in srgb, var(--ks-t-primary) 22%, transparent); }
.ks-field.is-invalid input { border-color: var(--ks-t-accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--ks-t-accent) 24%, transparent); }
.ks-picks__list { display: flex; flex-wrap: wrap; gap: 8px; }
.ks-pick { position: relative; cursor: pointer; }
.ks-pick input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.ks-pick span { display: inline-flex; align-items: center; min-height: 40px; padding: 8px 15px; border-radius: 999px; border: 1.5px solid color-mix(in srgb, var(--sec-ink) 22%, transparent); font-size: .88rem; font-weight: 600; color: var(--sec-ink); transition: background-color .25s, color .25s, border-color .25s, transform .3s var(--ks-bounce); }
.ks-pick:hover span { transform: translateY(-2px); }
.ks-pick input:checked + span { background: var(--ks-f-primary); color: var(--ks-on-primary); border-color: transparent; }
.ks-pick input:focus-visible + span { outline: 3px solid var(--ks-g2); outline-offset: 2px; }
.ks-form__submit { --btn-bg: var(--ks-f-primary); --btn-fg: var(--ks-on-primary); }
.ks-form__error { padding: 10px 14px; border-radius: var(--r); background: color-mix(in srgb, var(--ks-t-accent) 16%, transparent); color: var(--sec-ink); font-weight: 600; font-size: .9rem; }
.ks-form__note { display: flex; align-items: flex-start; gap: 8px; font-size: .84rem; color: var(--sec-muted); }
@media (min-width: 640px) { .ks-form__row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 960px) { .ks-contact--split .ks-contact__grid { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); } }
.ks-contact--stack .ks-contact__grid { max-width: 860px; margin-inline: auto; }
@media (min-width: 720px) {
    .ks-contact--stack .ks-contact__list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 28px; }
}

/* --- Footer ------------------------------------------------------------------- */
.ks-footer { position: relative; isolation: isolate; overflow: hidden; padding-top: clamp(64px, 8vw, 110px); background-color: var(--sec-bg); color: var(--sec-text); }
.ks-footer__big { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 18px 40px; padding-bottom: clamp(40px, 5vw, 64px); margin-bottom: clamp(40px, 5vw, 64px); border-bottom: 1.5px solid var(--sec-line); }
.ks-footer__ask { font-family: var(--f-head); font-weight: var(--ks-fw); font-size: clamp(2.2rem, 1.2rem + 4vw, 4.6rem); line-height: 1; letter-spacing: -.05em; color: var(--sec-ink); max-width: 760px; }
.ks-footer__mail { display: inline-flex; align-items: center; gap: 14px; font-family: var(--f-accent); font-style: italic; font-size: clamp(1.3rem, 1rem + 1.6vw, 2.2rem); color: var(--sec-ink); text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 100% / 0 2px no-repeat; transition: background-size .5s var(--ks-ease); }
.ks-footer__mail:hover { background-size: 100% 2px; }
.ks-footer__mail i { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--ks-f-accent); color: var(--ks-on-accent); font-size: 1.2rem; font-style: normal; transition: transform .45s var(--ks-bounce); }
.ks-footer__mail:hover i { transform: rotate(45deg); }
.ks-footer__grid { display: grid; gap: 36px; }
.ks-footer__about { display: grid; gap: 18px; justify-items: start; max-width: 380px; }
.ks-footer__about p { color: var(--sec-muted); }
.ks-footer__col h3 { margin-bottom: 16px; font-family: var(--f-body); font-size: .8rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--sec-muted); }
.ks-footer__col ul { display: grid; gap: 10px; }
.ks-footer__col a, .ks-footer__col li > span { color: var(--sec-ink); text-decoration: none; font-weight: 500; }
.ks-footer__col a:hover { text-decoration: underline; text-underline-offset: 3px; }
.ks-footer__contact li { display: flex; gap: 10px; align-items: flex-start; }
.ks-footer__contact i { margin-top: 3px; color: var(--sec-muted); }
.ks-footer__bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 28px; margin-top: clamp(40px, 5vw, 64px); padding: 24px 0; border-top: 1.5px solid var(--sec-line); font-size: .9rem; }
.ks-footer__copy { color: var(--sec-muted); }
.ks-footer__legal { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.ks-footer__legal a { color: var(--sec-muted); text-decoration: none; }
.ks-footer__legal a:hover { color: var(--sec-ink); }
.ks-totop { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: var(--sec-ink); text-decoration: none; }
.ks-totop i { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; border: 1.5px solid var(--sec-line); transition: transform .35s var(--ks-bounce); }
.ks-totop:hover i { transform: translateY(-4px); }
.ks-footer__word { font-family: var(--f-head); font-weight: var(--ks-fw); font-size: clamp(4.6rem, 21vw, 21rem); line-height: .78; letter-spacing: -.07em; text-align: center; white-space: nowrap; overflow: hidden; margin-top: 12px; padding-bottom: .04em; background: var(--ks-grad); -webkit-background-clip: text; background-clip: text; color: transparent; user-select: none; }
.ks-footer--gradient .ks-footer__word { background: none; color: color-mix(in srgb, #ffffff 20%, transparent); }
@media (min-width: 720px) { .ks-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .ks-footer__grid { grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr)); } }

/* --- Tombol WhatsApp melayang ------------------------------------------------- */
.ks-wa { position: fixed; right: clamp(14px, 2.4vw, 28px); bottom: clamp(14px, 2.4vw, 28px); z-index: 70; display: inline-flex; align-items: center; gap: 10px; padding: 6px; border-radius: 999px; background: var(--ks-f-primary); color: var(--ks-on-primary); text-decoration: none; font-weight: 700; box-shadow: 4px 4px 0 0 var(--ks-ink), 0 16px 36px -14px color-mix(in srgb, #000000 50%, transparent); transition: transform .4s var(--ks-bounce); }
.ks-dark .ks-wa { box-shadow: 4px 4px 0 0 color-mix(in srgb, var(--ks-snow) 80%, transparent), 0 16px 36px -14px #000000; }
.ks-wa:hover { transform: translate(-2px, -3px); }
.ks-wa__icon { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: color-mix(in srgb, var(--ks-away-primary) 18%, transparent); font-size: 1.5rem; }
.ks-wa__label { display: none; padding-right: 14px; }
@media (min-width: 720px) { .ks-wa__label { display: inline; } }

/* --- Animasi ------------------------------------------------------------------ */
@keyframes ks-marquee { to { transform: translateX(-50%); } }
@keyframes ks-spin { to { transform: rotate(360deg); } }
@keyframes ks-float { 0% { translate: 0 0; } 100% { translate: 0 -14px; } }
@keyframes ks-fade { from { opacity: 0; } }
@keyframes ks-zoom { from { opacity: 0; transform: scale(.96); } }
main[data-motion="on"] .ks-sticker__ring { animation: ks-spin 16s linear infinite; }
main[data-motion="on"] .ks-shape { animation: ks-float 6s ease-in-out infinite alternate; }
main[data-motion="on"] .ks-shape:nth-child(2n) { animation-duration: 8s; animation-delay: -2s; }
main[data-motion="on"] .ks-hero__chip { animation: ks-float 5s ease-in-out infinite alternate; }
.js-rv .rv { opacity: 0; transform: translateY(28px); transition: opacity .8s var(--ks-ease), transform .8s var(--ks-ease); }
.js-rv .rv.is-in { opacity: 1; transform: none; }
.js-rv .ks-hero__visual.rv { transform: translateY(28px) scale(.97); }
.js-rv .ks-hero__visual.rv.is-in { transform: none; }
.ks-theming body, .ks-theming .k-sec, .ks-theming .ks-header__bar::before, .ks-theming .ks-footer { transition: background-color .5s var(--ks-ease), color .5s var(--ks-ease); }

/* Editor & "kurangi gerakan": semua statis, teks berjalan tersusun rapi */
[data-mode="editor"] .ks-ribbon__track, [data-mode="editor"] .ks-marquee__track, [data-mode="editor"] .ks-sticker__ring, [data-mode="editor"] .ks-shape, [data-mode="editor"] .ks-hero__chip { animation: none !important; }
[data-mode="editor"] .ks-marquee__track, main[data-motion="off"] .ks-marquee__track { width: auto; justify-content: center; }
[data-mode="editor"] .ks-marquee__set, main[data-motion="off"] .ks-marquee__set { flex: 0 1 auto; flex-wrap: wrap; justify-content: center; gap: 14px; padding: 0 var(--ks-gut); }
[data-mode="editor"] .ks-marquee__set + .ks-marquee__set, main[data-motion="off"] .ks-marquee__set + .ks-marquee__set { display: none; }
[data-mode="editor"] .ks-marquees, main[data-motion="off"] .ks-marquees { -webkit-mask-image: none; mask-image: none; }
@media (prefers-reduced-motion: reduce) {
    html.ks-smooth { scroll-behavior: auto; }
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
    .ks-marquee__track { width: auto; justify-content: center; }
    .ks-marquee__set { flex: 0 1 auto; flex-wrap: wrap; justify-content: center; gap: 14px; padding: 0 var(--ks-gut); }
    .ks-marquee__set + .ks-marquee__set { display: none; }
    .ks-marquees { -webkit-mask-image: none; mask-image: none; }
}

/* --- Ponsel kecil ------------------------------------------------------------- */
@media (max-width: 559.98px) {
    .ks-hero__visual { aspect-ratio: 1 / 1.05; }
    .ks-hero__chip { max-width: 70%; font-size: .8rem; }
    .ks-hero--center .ks-hero__visual { aspect-ratio: 4 / 3.4; }
    .ks-hero--center .ks-hero__arch { width: 52%; }
    .ks-hero--center .ks-hero__card { width: 34%; }
    .ks-hero--center .ks-hero__chip { max-width: 46%; top: 4%; }
    .ks-about__badge { left: 0; }
    .ks-quotes__score { width: 100%; }
    .ks-slider__nav { flex-wrap: wrap; }
    .ks-feat__media { padding: 0 14px 14px 0; }
    .ks-feat__block { inset: 14px 0 0 14px; }
}
/* Logo "warna asli" selalu di atas kartu terang agar tetap terbaca di latar gelap/berwarna */
.ks-brands--original .ks-marquee .ks-logo, .ks-brands--original .ks-logos .ks-logo { background: #ffffff; border-color: color-mix(in srgb, var(--ks-ink) 12%, transparent); }
.ks-brands--original .ks-logo__name { color: var(--ks-ink); }
@media (max-width: 719.98px) {
    .ks-marquee .ks-logo { min-width: 148px; height: 74px; padding: 14px 20px; }
    .ks-team__grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 148px), 1fr)); gap: 22px 14px; }
    .ks-team__grid > .ks-member--join { grid-column: 1 / -1; min-height: 0; }
    .ks-member__name { font-size: 1.1rem; }
    .ks-member__bio { font-size: .88rem; }
    .ks-member__social { right: 8px; bottom: 8px; gap: 6px; }
    .ks-member__social a { width: 34px; height: 34px; font-size: .85rem; }
}
/* Pita teks statis (editor, animasi dimatikan, "kurangi gerakan"): satu set saja, rata tengah */
[data-mode="editor"] .ks-ribbon__track, main[data-motion="off"] .ks-ribbon__track { width: auto; justify-content: center; }
[data-mode="editor"] .ks-ribbon__set, main[data-motion="off"] .ks-ribbon__set { flex: 0 1 auto; flex-wrap: wrap; justify-content: center; padding-inline: var(--ks-gut); }
[data-mode="editor"] .ks-ribbon__set + .ks-ribbon__set, main[data-motion="off"] .ks-ribbon__set + .ks-ribbon__set { display: none; }
@media (prefers-reduced-motion: reduce) {
    .ks-ribbon__track { width: auto; justify-content: center; }
    .ks-ribbon__set { flex: 0 1 auto; flex-wrap: wrap; justify-content: center; padding-inline: var(--ks-gut); }
    .ks-ribbon__set + .ks-ribbon__set { display: none; }
}