/* ============================================================
   Websitekuu — Overrides.

   Everything here is OURS, not the design handoff: gaps the
   prototype left, bugs it shipped, and the sizing/motion pass.
   Keeping it in one file means tokens/, components.css and
   sections.css stay close to the design source and can be
   re-synced without losing this work.

   Load LAST.
   ============================================================ */

/* ------------------------------------------------------------
   1. [hidden] must actually hide
   ------------------------------------------------------------
   `[hidden]{display:none}` is a user-agent rule, so ANY author
   `display:` declaration beats it. .wk-form and .wk-contact__done
   both declare display:flex, so the contact form's success panel
   rendered underneath the live form instead of replacing it.
   This makes the attribute authoritative, which is what every
   `el.hidden = true` in js/ assumes. */
[hidden]{display:none!important}

/* ------------------------------------------------------------
   2. Inline icon sprite
   ------------------------------------------------------------
   The prototype swapped <i data-lucide> at runtime via the Lucide
   CDN. Here the glyphs live in one <svg> sprite per page and
   .wk-ic is the sizing box. The overrides below re-assert sizes
   that components.css sets on a bare `svg` — this file loads
   after it, so `.wk-ic svg` would otherwise collapse icons inside
   buttons and star rows to zero width. */
.wk-icsprite{position:absolute;width:0;height:0;overflow:hidden}
.wk-ic{display:inline-flex;align-items:center;justify-content:center;width:1.25rem;height:1.25rem;flex:none}
.wk-ic svg{width:100%;height:100%;display:block;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
/* Filled glyphs (WhatsApp mark, rating star) rather than outline. */
.wk-ic--solid svg{fill:currentColor;stroke:none}
.wk-btn .wk-ic{width:1.15em;height:1.15em}
.wk-foot__soc .wk-ic{width:18px;height:18px}
.wk-hero__stars .wk-ic svg{fill:currentColor;stroke:currentColor;stroke-width:1.2px}
.wk-quote__stars .wk-ic{width:16px;height:16px}
.wk-acc__ic .wk-ic{width:15px;height:15px}
.wk-feat__ic .wk-ic{width:12px;height:12px}
.wk-alert__ic .wk-ic{width:20px;height:20px}
.wk-cf__btn .wk-ic{width:20px;height:20px}
/* The select chevron carries .wk-ic too, and .wk-ic's 1.25rem default
   would win on source order — restate its 18px here. */
.wk-select-wrap__chev{width:18px;height:18px}
/* Stroke weights the design system set per-glyph. */
.wk-acc__ic svg{stroke-width:2.4}
.wk-select-wrap__chev svg,.wk-cf__btn svg{stroke-width:2.2}

/* ------------------------------------------------------------
   3. Keyboard skip link
   ------------------------------------------------------------ */
.wk-skip{position:absolute;left:-9999px;top:0;z-index:100;padding:12px 18px;background:var(--ink-950);color:var(--cream-50);border-radius:0 0 var(--radius-md) 0;font-size:var(--text-sm);font-weight:var(--fw-semibold)}
.wk-skip:focus{left:0;color:var(--cream-50)}

/* ------------------------------------------------------------
   4. Mobile nav drawer
   ------------------------------------------------------------
   The Navbar primitive ships a menu button the prototype wired to
   nothing (onMenu was never passed), so below 860px the nav had
   no links at all. This is that missing panel. */
.wk-navdrawer{position:fixed;inset:68px 0 auto 0;z-index:49;background:rgba(254,253,249,.97);backdrop-filter:saturate(1.3) blur(12px);-webkit-backdrop-filter:saturate(1.3) blur(12px);border-bottom:1px solid var(--border-soft);box-shadow:var(--shadow-lg);padding:12px var(--gutter) 20px;animation:wk-drawer var(--dur-base) var(--ease-out)}
@keyframes wk-drawer{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.wk-navdrawer{animation:none}}
.wk-navdrawer__links{display:flex;flex-direction:column}
.wk-navdrawer__links a{display:flex;align-items:center;min-height:48px;padding:0 4px;font-size:var(--text-md);font-weight:var(--fw-medium);color:var(--text-body);border-bottom:1px solid var(--border-soft)}
.wk-navdrawer__links a:hover{color:var(--text-strong)}
.wk-navdrawer__cta{margin-top:18px}
@media (min-width:861px){.wk-navdrawer{display:none}}

/* ------------------------------------------------------------
   5. Portfolio "coming soon"
   ------------------------------------------------------------
   Real screenshots pending. Cards keep the coverflow mock; the
   caption states the work type rather than naming clients. */
.wk-cf__cat--soon{color:var(--blue-300)}

/* ------------------------------------------------------------
   6. Horizontal-overflow fixes
   ------------------------------------------------------------
   The prototype scrolled sideways at several widths. Same root
   cause each time: min-content wider than the grid track. */

/* Pricing. "Rp749.000an" at 2.875rem Space Mono is 300px wide, so
   a card cannot be narrower than 356px, while a 1fr third of the
   1152 container is 327px. The `auto` minimum inflated the tracks
   to 1116px inside a 1024px box, which knocked the fan off-axis
   (card 1 sat 54px inside the content column, card 3 hung 37px
   outside) and below 961px pushed the page into sideways scroll.
   min-width:0 restores even tracks; the value then scales to its
   own card, still capped at the design's 2.875rem. */
.wk-price{min-width:0}
.wk-price__val{font-size:clamp(1.75rem,3vw,2.875rem)}
@supports (container-type:inline-size){
  .wk-price{container-type:inline-size}
  /* 1cqi = 1% of the card's content box. "Rp749.000an" measures
     6.51x its font-size, so 14cqi fills ~91% of that box — the
     same fill as the reference screenshot. */
  .wk-price__val{font-size:clamp(1.75rem,14cqi,2.875rem)}
}

/* Add-ons. .wk-addon is a flex row of icon (46px) + text + a
   nowrap price, giving "Maintenance bulanan / Rp50.000an" a
   ~348px min-content. Three tracks stop fitting below ~1010px and
   two below ~793px, so the generic 960/600 steps were too late. */
@media (max-width:1040px){ .wk-addon-grid{grid-template-columns:1fr 1fr} }
@media (max-width:820px){ .wk-addon-grid{grid-template-columns:1fr} }
@media (max-width:430px){
  /* Even one full-width column is narrower than 348px on a phone,
     so the price drops to its own line under the text column. */
  .wk-addon{flex-wrap:wrap}
  .wk-addon__body{min-width:0}
  .wk-addon__price{width:100%;padding-left:62px}
}

/* Hero mock. Its nowrap address pill sets a ~289px floor, which on
   a 320px screen widened the stacked hero track past the viewport.
   It is decorative and .wk-browser already clips. */
.wk-hero__art{min-width:0}

/* Lock both scroll axes.
   The page has no overflow in either direction — the document ends exactly
   at the footer — yet browsers still let you drag past the edges. That is
   `overscroll-behavior`, whose default `auto` permits:
     - the elastic rubber-band at the top, bottom and sides
     - scroll chaining, and on a trackpad a sideways swipe that fires
       browser back/forward
     - pull-to-refresh on Android
   `none` switches all of that off, so the page stops at its own edges.

   Note this is a real behaviour change: Android users lose pull-to-refresh
   here. On a marketing page that is usually welcome (no accidental reload
   halfway through the contact form), but it is a trade, not a free win.

   `overflow-x:clip` is the belt-and-braces guard against anything ever
   bleeding sideways. clip — not hidden — because hidden would turn body
   into a scroll container and break the sticky navbar. */
html{overscroll-behavior:none}
body{overflow-x:clip}

/* ------------------------------------------------------------
   7. Section sizing pass
   ------------------------------------------------------------ */

/* One content axis. Navbar/Hero/Footer used --container-xl while
   content sections use --container-lg, putting content on four
   different left edges at 1280 — the H1 began 56px left of the
   pricing cards, and the hero's own stats bar sat on a different
   axis from the copy above it. Delete this rule to go back. */
.wk-nav__inner,
.wk-hero__inner,
.wk-foot__inner{max-width:var(--container-lg)}

/* Section rhythm. --section-y is clamp(4rem,8vw,7.5rem); 8vw only
   overtakes the 4rem floor at 800px, so every phone got a flat
   64px. Desktop value is unchanged. */
:root{--section-y:clamp(4.5rem,8vw,7.5rem)}

/* Heading -> content gap. Was an inconsistent 48/44/48/48/40 fixed
   px, which on a phone ate as much room as the content itself. */
.wk-price-grid,
.wk-addon-grid,
.wk-proc-grid,
.wk-voice-grid{margin-top:clamp(2rem,4vw,3rem)}
.wk-sec__head-row{margin-bottom:clamp(1.5rem,3vw,2.5rem)}

/* Mobile: reclaim padding the phone can't spare. Desktop keeps the
   designed values; on a 320px card, 32px gutters were spending a
   fifth of the width on nothing. */
@media (max-width:600px){
  .wk-explain{padding:24px 20px}
  .wk-price{padding:26px 22px}
  .wk-proc{padding:22px 20px}
  .wk-hero__stats{padding-block:26px}
  .wk-cf__stage{padding:22px 0}
}

/* Hero subline is --text-lg (20px), heavy for body copy on a
   phone. Scales 18 -> 20px; unchanged from ~900px up. */
.wk-hero__sub{font-size:clamp(1.125rem,1rem + .55vw,1.25rem)}

/* ------------------------------------------------------------
   8. No tag / chip affordances
   ------------------------------------------------------------
   Same idea applied to the explainer's closing line: it used to be
   a green pill chip with a shield icon, written in two clipped
   badge-style clauses. It is a normal paragraph now, separated
   from the diagram by a hairline instead of a coloured capsule,
   and the sentence actually explains why it matters. Its rule
   lives with the rest of the explainer in sections.css.

   The design system leaned on a mono / UPPERCASE / wide-tracking
   "eyebrow" above almost every heading. Nine of them said nothing
   the heading below didn't already say ("PAKET & HARGA" over
   "Pilih paket yang pas buat kamu"), and the stacked-label look
   reads as generated rather than written — so those are gone from
   the markup.

   Three carried real information, so the text stays and only the
   treatment changes: package tier, the portfolio "coming soon"
   flag, and the T&C breadcrumb. Sentence case, body typeface,
   normal tracking. */
.wk-price__eye{font-family:var(--font-sans);font-size:var(--text-sm);font-weight:var(--fw-medium);letter-spacing:normal;text-transform:none}
.wk-cf__cat{font-family:var(--font-sans);font-size:var(--text-xs);letter-spacing:normal;text-transform:none}
.wk-legal__crumb{font-family:var(--font-sans);font-size:var(--text-sm);letter-spacing:normal;text-transform:none}
/* The explainer title no longer sits under an eyebrow. */
.wk-explain__title{margin-top:0}

/* ------------------------------------------------------------
   9. Process: scroll-driven step progression
   ------------------------------------------------------------
   The four steps used to be four identical static cards with a small
   chevron between them — it read as a grid, not as a sequence. Now
   each one stays dimmed until the scroll reaches it, then lights up:
   an accent bar wipes across the card top, the icon fills to
   near-black, the number turns blue. The chevrons are gone; the
   progression itself carries the "one after another" reading.

   The dimmed state only applies under .wk-proc-grid--stepped, which
   js/main.js adds. No JS, or reduced motion → every step renders lit,
   which is exactly the old design. */
/* --- layout: notes pinned to a board, zig-zagging down --- */
.wk-proc-grid{position:relative;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(2rem,4vw,3.25rem) clamp(1.5rem,5vw,5rem);align-items:start}
/* Right-hand notes hang lower, which is what makes the eye travel. */
.wk-proc[data-step="2"],
.wk-proc[data-step="4"]{margin-top:clamp(2.5rem,7vw,6.5rem)}
/* A hand-pinned tilt, not the source component's 8deg — brand.md asks for
   "santai tapi rapi", and past ~2deg it stops reading as tidy. */
.wk-proc[data-step="1"],
.wk-proc[data-step="3"]{--rot:-1.2deg;justify-self:start}
.wk-proc[data-step="2"],
.wk-proc[data-step="4"]{--rot:1.2deg;justify-self:end}
/* Kept note-sized, and narrower than its column on purpose: the leftover
   space is what the route runs through. At full column width the line was
   almost entirely hidden behind the cards and read as a stray dash. */
.wk-proc{max-width:clamp(260px,27vw,340px)}

/* --- the note itself: white frame + pin + cream panel --- */
.wk-proc{position:relative;z-index:1;background:var(--surface-card);border:1px solid var(--border-soft);border-radius:var(--radius-xl);padding:12px;box-shadow:var(--shadow-md);transform:rotate(var(--rot,0deg));transition:transform var(--dur-base) var(--ease-out),box-shadow var(--dur-base) var(--ease-out)}
.wk-proc:hover{transform:rotate(var(--rot,0deg)) translateY(-5px) scale(1.02);box-shadow:var(--shadow-lg);z-index:3}
.wk-proc__pin{display:grid;place-items:center;margin:2px auto 12px;color:var(--ink-950)}
.wk-proc__pin .wk-ic{width:26px;height:26px}
.wk-proc__inner{background:var(--surface-sunken);border:1px solid var(--border-soft);border-radius:var(--radius-lg);padding:20px 20px 22px}
.wk-proc__num{display:block;font-family:var(--font-mono);font-weight:700;font-size:2.25rem;line-height:1;letter-spacing:-.02em;color:var(--blue-500);margin-bottom:14px}
.wk-proc__title{font-family:var(--font-display);font-size:var(--text-lg);margin:0 0 8px;color:var(--text-strong)}
.wk-proc__text{font-size:var(--text-sm);color:var(--text-muted);line-height:1.55;margin:0}

/* --- the route between notes --- */
/* Dashed grey track, with a solid blue line drawn over it as you scroll.
   Both paths are generated in js/main.js from the cards' measured
   positions, so nothing here depends on magic pixel coordinates. */
.wk-proc-path{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0;overflow:visible}
.wk-proc-path__track{stroke:var(--ink-200);stroke-width:2;stroke-dasharray:7 7;stroke-linecap:round}
.wk-proc-path__fill{stroke:var(--blue-500);stroke-width:2.5;stroke-linecap:round}

/* --- pending vs lit --- */
.wk-proc-grid--stepped .wk-proc,
.wk-proc-grid--stepped .wk-proc__pin,
.wk-proc-grid--stepped .wk-proc__num,
.wk-proc-grid--stepped .wk-proc__title,
.wk-proc-grid--stepped .wk-proc__text{transition:color var(--dur-slow) var(--ease-out),box-shadow var(--dur-slow) var(--ease-out),transform var(--dur-base) var(--ease-out)}
.wk-proc-grid--stepped .wk-proc{box-shadow:var(--shadow-xs)}
.wk-proc-grid--stepped .wk-proc__pin{color:var(--ink-300)}
.wk-proc-grid--stepped .wk-proc__num{color:var(--ink-300)}
.wk-proc-grid--stepped .wk-proc__title{color:var(--ink-400)}
.wk-proc-grid--stepped .wk-proc__text{color:var(--ink-300)}
.wk-proc-grid--stepped .wk-proc.is-on{box-shadow:var(--shadow-md)}
.wk-proc-grid--stepped .wk-proc.is-on .wk-proc__pin{color:var(--ink-950)}
.wk-proc-grid--stepped .wk-proc.is-on .wk-proc__num{color:var(--blue-500)}
.wk-proc-grid--stepped .wk-proc.is-on .wk-proc__title{color:var(--text-strong)}
.wk-proc-grid--stepped .wk-proc.is-on .wk-proc__text{color:var(--text-muted)}

/* --- phones: one column, flat, no route --- */
/* Below this the two columns get too tight for the zig-zag to breathe. */
@media (max-width:900px){
  .wk-proc-grid{grid-template-columns:1fr;gap:1.25rem}
  /* Centred and capped: a note stretched to 800px stops looking like a
     note. On a phone the container is narrower than the cap anyway, so
     there it still fills the width like every other card on the site. */
  .wk-proc[data-step]{margin-top:0;--rot:0deg;justify-self:center}
  .wk-proc{max-width:520px;width:100%}
  .wk-proc-path{display:none}
}

/* ------------------------------------------------------------
   10. Anchor landing offset
   ------------------------------------------------------------
   The navbar is sticky and 68px tall, so anything scrolled to by
   its id lands underneath it. js/main.js compensates in its eased
   scroll, but that only covers clicks it intercepts — a plain
   anchor jump with JS unavailable, browser find-on-page, or moving
   focus with the keyboard all bypass it and hide the heading.
   scroll-margin-top fixes those natively. 68 + 16 breathing room. */
main[id],
section[id]{scroll-margin-top:84px}

/* ------------------------------------------------------------
   11. 404 page
   ------------------------------------------------------------
   Vercel serves /404.html automatically when a static path is
   missing. Reuses the site's nav and buttons so a wrong URL still
   lands somewhere branded, with a way back. */
.wk-404{display:grid;place-items:center;min-height:calc(100vh - 68px);padding-block:var(--section-y)}
.wk-404__inner{display:flex;flex-direction:column;align-items:center;text-align:center;max-width:44rem}
.wk-404__code{font-family:var(--font-mono);font-weight:700;font-size:clamp(3.5rem,12vw,6rem);line-height:1;letter-spacing:-.03em;color:var(--blue-500)}
.wk-404__title{font-size:clamp(1.75rem,1.2rem + 2vw,2.6rem);margin:18px 0 0;letter-spacing:var(--tracking-tight)}
.wk-404__text{margin:14px 0 0;font-size:var(--text-md);color:var(--text-muted);line-height:1.6;max-width:46ch}
.wk-404__ctas{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin-top:30px}

/* ------------------------------------------------------------
   12. Motion pass
   ------------------------------------------------------------
   The FAQ panel opened on --dur-base (220ms), right for a hover
   but clipped for a height animation. The token is untouched —
   only these two transitions are lengthened. */
.wk-acc__wrap{transition:grid-template-rows 340ms var(--ease-out)}
.wk-acc__ic{transition:transform 340ms var(--ease-out),background 340ms var(--ease-out),color 340ms var(--ease-out),border-color 340ms var(--ease-out)}
@media (prefers-reduced-motion:reduce){
  .wk-acc__wrap,.wk-acc__ic{transition:none}
}