/* PIKK 2027 design system. Direction and the reason behind each choice: DESIGN.md (same folder as this plugin).
   Colors: Elementor › Site Settings › Global Colors. Font: Nunito, self-hosted (assets/fonts). */

@font-face { font-family: "Nunito"; src: url(fonts/nunito.woff2) format("woff2"); font-weight: 400 900; font-style: normal; font-display: swap; }
/* Caveat (OFL, fonts/OFL-caveat.txt): only for handwritten notes, like the "Gratis!" scribble in the hero.
   Subset to Latin letters, digits and punctuation (51 KB to 18 KB) */
@font-face { font-family: "Caveat"; src: url(fonts/caveat-700.woff2) format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }

@view-transition { navigation: auto; }
html { scroll-behavior: smooth; }

body {
	/* Two colours only (owner's direction, 26 Oct 2026): Karangturi indigo #010955 and yellow #FFCC00.
	   Everything else is a shade/tint of the indigo or a neutral (paper, lines, grey text). */
	--pk-navy: var(--e-global-color-primary, #010955);
	--pk-yellow: var(--e-global-color-secondary, #FFCC00);
	--pk-ink: var(--e-global-color-text, #0E1330);
	--pk-indigo: var(--e-global-color-accent, #2A2F8F);   /* lighter indigo: links, hover, secondary marks. 11:1 on white */
	--pk-bg: var(--e-global-color-pkpaper, #F4F5F9);      /* page ground: a cool near-white from the indigo family, not cream */
	--pk-line: var(--e-global-color-pkline, #E1E4EE);
	--pk-idle: #8A90A8;                                    /* "not yet" dots and dashed outlines: 3.2:1 on white */
	--pk-line-strong: #C5CADB;                             /* table frames and row rules: a step darker than --pk-line so tables hold their shape */
	--pk-muted: var(--e-global-color-pkmuted, #50566F);
	--pk-tint: var(--e-global-color-pknavy2, #ECECF8);    /* indigo tint surfaces */
	--pk-tint-2: #DCDDF1;                                  /* pressed tint */
	--pk-indigo-soft: #A9ADD6;                             /* decorative rails and bars only (not text) */
	--pk-on-dark: #C9CBE8;                                 /* secondary text on indigo: 11:1 */
	--pk-ink-2: #0B1468;                                   /* raised surface on indigo */
	--pk-ink-line: #1C2A8A;                                /* hairline on indigo */
	/* Interaction states, shared by every control: hover lightens one step, press darkens one step and sinks 1px */
	--pk-yellow-hover: #FFD83D;
	--pk-yellow-press: #F0BF00;
	--pk-navy-hover: var(--pk-indigo);
	--pk-navy-press: #000640;
	--pk-control-line: #7E849C; /* outlines of inputs and quiet controls: 3.7:1 on white, meets the 3:1 non-text minimum */
	--pk-dur: .2s;
	--pk-press: translateY(1px);
	--pk-font: var(--e-global-typography-text-font-family, "Nunito"), system-ui, -apple-system, "Segoe UI", sans-serif;
	/* Radius (owner's rule, 27 Oct 2026): every component is 24; whatever sits inside it, 8px from its edge, is 16.
	   24 cards, panels, bars, rows, tables, the header, the indigo sections and the footer
	   16 buttons, inputs and chips, and tiles/photos/rows inside a 24 component
	   8  small marks inside a 16 element (icon tiles, badges, step numbers). Dots and rails are round. */
	--pk-r-sm: 8px;
	--pk-r: 16px;
	--pk-r-lg: 24px;
	--pk-panel-x: clamp(8px, 1.4vw, 20px); /* inset of the indigo panels and the footer from the screen edge */
	/* Shadow: three elevation steps only, each a tight contact shadow plus a soft indigo-tinted one, so every lifted
	   surface casts the same kind of shadow. Flat surfaces (cards, rows, tables) use a border, never a shadow.
	   1 bars resting on the page (hero bars, next timeline stage) · 2 floating controls (header, floating buttons)
	   3 panels above content (hero photo card, countdown, mega menu, drawer) */
	--pk-shadow-1: 0 1px 2px rgba(1, 9, 85, .06), 0 10px 24px -16px rgba(1, 9, 85, .4);
	--pk-shadow-2: 0 2px 4px rgba(1, 9, 85, .06), 0 16px 36px -18px rgba(1, 9, 85, .45);
	--pk-shadow-3: 0 2px 6px rgba(1, 9, 85, .06), 0 28px 56px -28px rgba(1, 9, 85, .5);
	/* Nested corners stay concentric: outer radius = inner radius + gap. One pair everywhere:
	   24 = 16 + 8   button in a bar, the header or a download row; photo, rows, notes and tiles inside a card or panel
	   16 = 8 + 8    icon tile inside a 16 row
	   Cards keep 24px text padding; 16px rows and notes inside them pull out to 8px from the edge with --pk-pull. */
	--pk-inset-sm: 8px;
	--pk-inset: 16px;
	--pk-card-pad: 24px;
	--pk-pull: calc(var(--pk-inset-sm) - var(--pk-card-pad)); /* -16px: from the card's text padding to the 8px row inset */
	--pk-gap: clamp(1rem, 2.4vw, 1.5rem);
	--pk-header-h: 88px; /* floating header incl. its top gap: anchors and sticky asides clear it */
	--pk-ease: cubic-bezier(.22, 1, .36, 1);
	font-family: var(--pk-font);
	font-size: 1.0625rem;
	line-height: 1.6;
	color: var(--pk-ink);
	background: var(--pk-bg); /* one continuous paper ground; sections no longer swap backgrounds */
	-webkit-font-smoothing: antialiased;
}
::selection { background: var(--pk-yellow); color: var(--pk-navy); }

h1, h2, h3, h4, .elementor-heading-title { font-family: var(--pk-font); color: inherit; letter-spacing: -0.02em; line-height: 1.08; font-weight: 800; text-wrap: balance; }
p, li { text-wrap: pretty; }
a { color: var(--pk-indigo); transition: color var(--pk-dur); }
a, a:visited, .page-content a { text-decoration: none; } /* Hello's reset underlines every link; links are marked by weight and colour instead */
a:hover { color: var(--pk-navy); }
.elementor-widget-text-editor :is(p, li, td) a, .page-content :is(p, li) a { font-weight: 800; } /* bold, not underlined: still told apart from text without relying on colour */
img { max-width: 100%; height: auto; }
[id] { scroll-margin-top: calc(var(--pk-header-h) + 1.5rem); }
/* Focus: one ring everywhere. It follows the element's own radius, so it never changes the element's shape.
   The element list lifts it above Hello's reset (a black 2px ring with a white halo on a, button, input...). */
:focus-visible, :is(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: 3px solid var(--pk-ring, var(--pk-indigo)); outline-offset: 3px; box-shadow: none; }
:is(.pk-ink, .pk-footer, .pk-mm__aside) { --pk-ring: var(--pk-yellow); }
/* Hello's reset also paints every focused button pink (#c36). Each button states its resting colours in --pk-btn-bg / --pk-btn-fg. */
:is([type="button"], [type="submit"], button):is(:focus:not(:hover), :disabled) { background-color: var(--pk-btn-bg, transparent); color: var(--pk-btn-fg, inherit); }

/* Icons: Lucide (ISC licence, assets/icons). Inline SVGs come from pikk_icon() and take the text colour. */
.pk-ico { width: 1.15em; height: 1.15em; flex: none; vertical-align: -.2em; }

/* Disabled controls: dimmed, no hover or press feedback. Non-interactive status labels use the dashed "pending" style instead. */
:is(button, .pk-btn, .elementor-button):is(:disabled, [aria-disabled="true"]):not(.pk-btn--pending) { opacity: .4; cursor: not-allowed; transform: none !important; }

/* Form fields (search, comments): same radius, border weight and focus ring as buttons */
:is(input[type="submit"], button[type="submit"]) { --pk-btn-bg: var(--pk-navy); --pk-btn-fg: #fff; min-height: 48px; padding: .75rem 1.35rem; border-radius: var(--pk-r); font: inherit; font-weight: 800; cursor: pointer; }
:is(input:not([type="checkbox"], [type="radio"], [type="submit"], [type="button"]), select, textarea) {
	min-height: 48px; padding: .65rem .9rem; border: 1px solid var(--pk-control-line); border-radius: var(--pk-r); background: #fff; color: var(--pk-ink); font: inherit; transition: border-color var(--pk-dur);
}
:is(input, select, textarea):hover:not(:disabled) { border-color: var(--pk-navy); }
:is(input, select, textarea):focus-visible { border-color: var(--pk-indigo); }
:is(input, select, textarea):disabled { background: var(--pk-bg); opacity: .6; cursor: not-allowed; }
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); white-space: nowrap; }
.elementor-widget-text-editor > :last-child, .elementor-widget-text-editor p:last-child { margin-bottom: 0; }

/* Identity motif: key words in headings are underlined in yellow, like marking a source while researching.
   A real text underline: it sits on the baseline and spans exactly the word, so it never overhangs or floats. */
:is(h1, h2, h3, .elementor-heading-title) em {
	font-style: normal; text-decoration: underline var(--pk-yellow); text-decoration-thickness: .12em; text-underline-offset: .1em; text-decoration-skip-ink: none;
	transition: text-decoration-color .8s var(--pk-ease) .25s;
}
.pk-js .pk-reveal:not(.is-in) :is(h1, h2, h3, .elementor-heading-title) em { text-decoration-color: transparent; }
/* With JS the underline becomes a felt-tip marker stroke (pikk.js draws one SVG per line, behind the text), written in
   left to right when its section appears; the hero title's waits for its letters to rise. */
.pk-marked { position: relative; z-index: 0; }
.pk-js :is(h1, h2, h3, .elementor-heading-title) em { text-decoration: none; } /* with JS there is no underline until the stroke is written */
.pk-mark { position: absolute; z-index: -1; overflow: visible; pointer-events: none; color: var(--pk-yellow); }
/* The gap (1.05) is longer than the path (1) and the start offset (1.02) sits inside it, so before the pen moves no dash
   boundary touches the path's end: a round cap there would otherwise show as a stray dot on the right.
   --t (set by pikk.js from the line's width) keeps the pen speed even for short and long words. */
.pk-mark path {
	fill: none; stroke: currentColor; stroke-linecap: round; stroke-dasharray: 1 1.05; stroke-dashoffset: 1.02;
	animation: pk-write var(--t, .8s) cubic-bezier(.45, .05, .2, 1) forwards; animation-delay: calc(.2s + var(--d, 0) * .3s);
}
.pk-mark path + path { opacity: .55; animation-duration: calc(var(--t, .8s) * .7); animation-delay: calc(.2s + var(--d, 0) * .3s + var(--t, .8s) * .8); } /* the return pass follows on as the first ends */
.pk-marked:not(.is-seen) .pk-mark path { animation-play-state: paused; } /* waits until the heading is on screen */
.pk-mark--still path { animation: none; stroke-dashoffset: 0; } /* redrawn after a resize: no replay */
@keyframes pk-write { to { stroke-dashoffset: 0; } }
/* On dark surfaces a yellow line under white text reads weakly, so the word itself turns yellow instead. */
.pk-ink :is(h1, h2, h3, .elementor-heading-title) em { text-decoration: none; color: var(--pk-yellow); }

/* ---------- Sections & surfaces ---------- */
.e-con.pk-section { --padding-top: clamp(3.5rem, 8vw, 7rem); --padding-bottom: clamp(3.5rem, 8vw, 7rem); --padding-left: 20px; --padding-right: 20px; position: relative; }
.e-con.pk-section--tight { --padding-top: clamp(2.5rem, 5vw, 4rem); --padding-bottom: clamp(2.5rem, 5vw, 4rem); }
/* Seamless page: every light section sits on the same paper, so the page reads as one sheet. Consecutive light sections
   share one gap (the next drops its top padding) instead of doubling it. Indigo sections are panels inset from the
   screen edge (radius 24) that open out to full width as they scroll in. */
:is(.pk-hero, .pk-pagehero, .e-con.pk-section:not(.pk-ink)) + .e-con.pk-section:not(.pk-ink) { --padding-top: 0px; }
.e-con.pk-section.pk-ink{ --width: calc(100% - 2 * var(--pk-panel-x)); --margin-left: auto; --margin-right: auto; border-radius: var(--pk-r-lg); }
@supports (animation-timeline: view()) {
	.pk-js .e-con.pk-section.pk-ink{ animation: pk-panel-open linear both; animation-timeline: view(); animation-range: entry 0% entry 70%; }
}
@keyframes pk-panel-open { from { clip-path: inset(0 4% round var(--pk-r-lg)); } to { clip-path: inset(0 0 round var(--pk-r-lg)); } }
.pk-paper { background-color: var(--pk-bg); }
/* Banded sections (owner, 27 Oct 2026: not plain all the way down): a full-width indigo tint with a yellow and an indigo glow
   (the dot grid stays the hero's own), faded out at the top and bottom so the band melts into the page instead of starting at a hard
   edge. White cards on it lift off naturally. */
.e-con.pk-paper { position: relative; isolation: isolate; background: none; }
.e-con.pk-paper::before {
	content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
	background:
		radial-gradient(45% 55% at 12% 28%, rgba(255, 204, 0, .16), transparent 70%),
		radial-gradient(50% 60% at 88% 72%, rgba(42, 47, 143, .13), transparent 70%),
		var(--pk-tint);
	-webkit-mask-image: linear-gradient(to bottom, transparent, #000 16%, #000 84%, transparent);
	mask-image: linear-gradient(to bottom, transparent, #000 16%, #000 84%, transparent);
}
.pk-ink { background-color: var(--pk-navy); color: #EEF0FF; }
.pk-ink a:not(.elementor-button):not(.pk-btn):not(.pk-dl__btn) { color: #fff; }
.pk-ink a:not(.elementor-button):not(.pk-btn):hover { color: var(--pk-yellow); }

/* Section kicker: the guide's own section label (e.g. "Bidang Lomba") above its heading. Plain text, no pill. */
.pk-eyebrow .elementor-heading-title, p.pk-eyebrow { margin: 0; font-size: 1rem; font-weight: 700; letter-spacing: 0; color: var(--pk-indigo); line-height: 1.3; }
.pk-ink .pk-eyebrow .elementor-heading-title { color: var(--pk-on-dark); }
.pk-h2 .elementor-heading-title { font-size: clamp(2rem, 4.4vw, 3.5rem); max-width: 20ch; }
.pk-h3 .elementor-heading-title { font-size: clamp(1.3rem, 2.2vw, 1.65rem); letter-spacing: -0.015em; }
.pk-lede, .pk-lede p { font-size: clamp(1.1rem, 1.5vw, 1.28rem); line-height: 1.55; max-width: 60ch; }
.pk-muted, .pk-muted p { color: var(--pk-muted); }
.pk-ink :is(.pk-muted, .pk-muted p) { color: var(--pk-on-dark); }

/* ---------- Buttons (owner, 27 Oct 2026: "professional, SaaS-style"). One raised surface for every real button: a solid
   fill with a 1px edge a step darker, a white highlight along the top inside edge and a soft shade along the bottom (it
   reads as a key you can press), a tight contact shadow plus a short indigo drop. Hover lifts it 1px and lengthens the
   drop; press sinks it 1px and the shadow moves inside. Radius 16 (buttons sit 8px inside 24px bars: 24 = 16 + 8).
   Three fills only: yellow = register, navy = download/submit, white = go to another page. ---------- */
.pk-btn, .pk-btn-primary .elementor-button, .pk-link-arrow .elementor-button {
	display: inline-flex; align-items: center; justify-content: center; gap: .6rem; min-height: 48px; padding: .75rem 1.35rem; border-radius: var(--pk-r);
	font-family: var(--pk-font); font-weight: 800; font-size: 1rem; line-height: 1.2; letter-spacing: -0.005em; text-decoration: none;
}
:is(.pk-btn-primary .elementor-button, .pk-link-arrow .elementor-button, .pk-hd__cta, a.pk-reg__btn, a.pk-dl__btn, input[type="submit"], button[type="submit"], .pk-tl__nav button, .pk-chips a, .pk-pager a.page-numbers) {
	--b-bg: var(--pk-yellow); --b-hover: var(--pk-yellow-hover); --b-press: var(--pk-yellow-press); --b-edge: var(--pk-navy); --b-fg: var(--pk-navy); --b-hi: rgba(255, 255, 255, .6);
	background: var(--b-bg); color: var(--b-fg) !important; border: 1px solid var(--b-edge);
	box-shadow: 0 3px 0 var(--b-edge); /* the theme badges' look (owner, 27 Oct 2026): solid edge, hard drop; radius stays 16 */
	transition: background-color var(--pk-dur), border-color var(--pk-dur), box-shadow var(--pk-dur), transform var(--pk-dur) var(--pk-ease);
}
:is(.pk-btn-primary .elementor-button, .pk-link-arrow .elementor-button, .pk-hd__cta, a.pk-reg__btn, a.pk-dl__btn, input[type="submit"], button[type="submit"], .pk-tl__nav button, .pk-chips a, .pk-pager a.page-numbers):hover {
	background: var(--b-hover); color: var(--b-fg) !important; transform: translateY(-1px);
	box-shadow: 0 4px 0 var(--b-edge);
}
:is(.pk-btn-primary .elementor-button, .pk-link-arrow .elementor-button, .pk-hd__cta, a.pk-reg__btn, a.pk-dl__btn, input[type="submit"], button[type="submit"], .pk-tl__nav button, .pk-chips a, .pk-pager a.page-numbers):active {
	background: var(--b-press); transform: translateY(2px); box-shadow: 0 1px 0 var(--b-edge); /* pressed into its shadow */
}
:is(a.pk-dl__btn, input[type="submit"], button[type="submit"]) { --b-bg: var(--pk-navy); --b-hover: var(--pk-ink-2); --b-press: var(--pk-navy-press); --b-edge: #000430; --b-fg: #fff; --b-hi: rgba(255, 255, 255, .16); }
:is(.pk-link-arrow .elementor-button, .pk-tl__nav button, .pk-chips a, .pk-pager a.page-numbers) { --b-bg: #fff; --b-hover: #fff; --b-press: var(--pk-bg); --b-edge: var(--pk-navy); --b-fg: var(--pk-navy); --b-hi: #fff; }
.e-con.pk-ink:has(.pk-reg) { background-image: radial-gradient(circle, rgba(255, 255, 255, .09) 1.2px, transparent 1.7px); background-size: 22px 22px; }
.pk-ink :is(a.pk-reg__btn, .pk-btn-primary .elementor-button) { --b-edge: #B38F00; } /* a navy edge would vanish on the navy panel */
/* on the indigo panels the white button stays solid white (owner, 28 Oct 2026: the glass outline read as see-through);
   its edge is a light indigo, since a navy one would vanish on the navy panel */
.pk-ink .pk-link-arrow .elementor-button { --b-bg: #fff; --b-hover: #F4F5FF; --b-press: var(--pk-bg); --b-edge: #A9AEDB; --b-fg: var(--pk-navy); --b-hi: #fff; }
/* Arrow on buttons that move you on (register, read more): it nudges right on hover. Drawn as a mask, so it takes the text colour. */
:is(.pk-btn-primary, .pk-link-arrow) .elementor-button-content-wrapper { display: inline-flex; align-items: center; gap: .6rem; }
:is(.pk-btn-primary, .pk-link-arrow) .elementor-button-content-wrapper::after {
	content: ""; flex: none; width: 1.1em; height: 1.1em; background: currentColor; transition: transform .3s var(--pk-ease);
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M12 5l7 7-7 7'/%3E%3C/svg%3E") center / contain no-repeat;
}
:is(.pk-btn-primary, .pk-link-arrow) .elementor-button:hover .elementor-button-content-wrapper::after { transform: translateX(3px); }
/* Every other clickable control sinks 1px while pressed */
a.pk-btn:active, .pk-hd__burger:active { transform: var(--pk-press); }
/* "Pending": a date or status shown where a button will appear later. Not a control, so no hover, press or dimming. */
.pk-btn--pending { background: transparent; color: inherit; border: 1px dashed currentColor; font-weight: 700; cursor: default; }
@keyframes pk-arrow-on { 0% { background-position: center; } 45% { background-position: 40px center; } 46% { background-position: -20px center; } 100% { background-position: center; } } /* the arrow leaves right and comes back in */
.pk-actions { --gap: .75rem; }
/* a section header whose side column holds only a link: the link sits on the right edge */
@media (min-width: 1025px) { .e-con.pk-side:not(:has(> :not(.elementor-widget-button, .elementor-widget-shortcode))) { align-items: flex-end; } } /* a sticker may sit beside the link */

/* ---------- Badges ---------- */
.pk-badge { display: inline-flex; align-items: center; padding: .15rem .5rem; border-radius: var(--pk-r-sm); font-size: .78rem; font-weight: 700; background: var(--pk-tint); color: var(--pk-navy); white-space: nowrap; }
.is-current .pk-badge, .is-next .pk-badge { background: var(--pk-yellow); color: var(--pk-navy); }
.is-past .pk-badge { background: #E6E8F0; color: var(--pk-muted); }

/* ---------- Cards: flat surfaces; only clickable ones react to hover ---------- */
.pk-card { background: #fff; border: 1px solid var(--pk-line); border-radius: var(--pk-r-lg); padding: var(--pk-card-pad) !important; }
/* Rows and notes inside a card are 16px surfaces, so they sit 8px from the card edge (24 = 16 + 8).
   Elementor caps widgets at max-width: 100% with a 4-class selector, hence !important */
.pk-card :is(.pk-catlist, .pk-checks, .pk-note) { margin-inline: var(--pk-pull); width: calc(100% - 2 * var(--pk-pull)) !important; max-width: none !important; }
/* last surface in the card, or last before an editor-only flag widget (hidden for visitors) */
.pk-card > :is(.pk-catlist, .pk-checks, .pk-note):is(:last-child, :has(+ .elementor-widget > .pk-flag)) { margin-bottom: var(--pk-pull); }
body.logged-in .pk-card > :is(.pk-catlist, .pk-checks, .pk-note):has(+ .elementor-widget > .pk-flag) { margin-bottom: 0; }
.pk-ink .pk-card { background: var(--pk-ink-2); border-color: var(--pk-ink-line); color: #EEF0FF; }

/* ---------- HERO (focal moment 1): light paper ground with a faint dot grid, text left, photo card right.
   On the home page the card carries the live countdown under the photo; inner pages reuse it as a plain photo card.
   The dot grid is the owner's request (26 Oct 2026): it reads as lab/graph paper and stays at 14% navy so text keeps its contrast. ---------- */
.e-con:is(.pk-hero, .pk-pagehero) {
	--padding-top: calc(var(--pk-hd-space) + clamp(1.5rem, 4vw, 3rem)); --padding-bottom: clamp(3rem, 6vw, 5rem); --padding-left: 20px; --padding-right: 20px;
	/* the dot grid fades out at the bottom, so the hero runs straight into the next section */
	background: linear-gradient(to bottom, transparent 55%, var(--pk-bg)), radial-gradient(circle, rgba(1, 9, 85, .14) 1.2px, transparent 1.7px) 0 0 / 22px 22px, var(--pk-bg);
}
.e-con.pk-pagehero { --padding-bottom: clamp(2.5rem, 5vw, 4rem); }
/* pages without a hero (posts, archives, 404) leave room for the floating header */
body:not(:has(.pk-hero, .pk-pagehero)) .site-main { padding-top: calc(var(--pk-hd-space) + clamp(2rem, 5vw, 3.5rem)); }
.pk-hero__kicker p { margin: 0; font-weight: 800; font-size: 1rem; color: var(--pk-indigo); }
.pk-hero__title .elementor-heading-title { font-size: clamp(4.25rem, 9vw, 7.5rem); line-height: .9; letter-spacing: -0.05em; font-weight: 900; color: var(--pk-navy); margin: 0; }
:is(.pk-hero__title .elementor-heading-title, .pk-pagehero h1.elementor-heading-title) em { text-decoration-thickness: .08em; text-underline-offset: .07em; } /* thinner at display size */
/* the event theme as four linked nodes: "Connecting" is drawn, not just said (owner, 27 Oct 2026). Screen readers get the
   plain sentence; the visual is aria-hidden. */
.pk-theme { margin: 0; }
.pk-theme__lead { display: block; margin-bottom: .55rem; color: var(--pk-indigo); font-size: .78rem; font-weight: 900; letter-spacing: .2em; text-transform: uppercase; }
.pk-theme__nodes { --g: 2.75rem; display: flex; flex-wrap: wrap; align-items: center; gap: .55rem var(--g); } /* --g: the link length between badges */
.pk-theme__nodes b { position: relative; padding: .4rem .9rem; border: 1px solid var(--pk-navy); border-radius: var(--pk-r-sm); background: #fff; box-shadow: 0 3px 0 var(--pk-navy); color: var(--pk-navy); font-size: clamp(.86rem, 1.15vw, 1rem); font-weight: 900; line-height: 1.2; white-space: nowrap; }
.pk-theme__nodes b:last-child { background: var(--pk-yellow); }
/* the link: a dashed line from the previous badge, with a yellow "signal" dot on it */
.pk-theme__nodes b + b::before { content: ""; position: absolute; right: calc(100% + 2px); top: calc(50% - 1px); width: calc(var(--g) - 4px); height: 2px; background: repeating-linear-gradient(90deg, var(--pk-navy) 0 5px, transparent 5px 9px); }
.pk-theme__nodes b + b::after { content: ""; position: absolute; right: calc(100% + var(--g) / 2 - 4px); top: calc(50% - 4px); width: 8px; height: 8px; border-radius: 50%; background: var(--pk-yellow); box-shadow: 0 0 0 2px var(--pk-navy); }
/* Motion (full-motion users only; JS adds .is-in when in view). Entrance once: "Connecting" types in, each badge pops in
   as the line to it draws. Then the loop (owner: keep it flowing): the signal dot runs along each link in turn, Science to
   the Future, one at a time, then a short rest. 3.6s per round: three 0.9s runs and a 0.9s pause. */
.pk-theme__nodes b:nth-child(2) { --n: 1; } .pk-theme__nodes b:nth-child(3) { --n: 2; } .pk-theme__nodes b:nth-child(4) { --n: 3; }
@media (prefers-reduced-motion: no-preference) {
	.pk-js .pk-theme__lead { clip-path: inset(0 100% 0 0); }
	.pk-js .pk-theme__nodes b { opacity: 0; transform: translateY(10px) scale(.85); }
	.pk-js .pk-theme__nodes b + b::before { transform: scaleX(0); transform-origin: left center; }
	.pk-js .pk-theme__nodes b + b::after { opacity: 0; }
	.pk-theme.is-in .pk-theme__lead { clip-path: inset(0 0 0 0); transition: clip-path .5s steps(10, end) .6s; }
	.pk-theme.is-in .pk-theme__nodes b { opacity: 1; transform: none; transition: opacity .3s ease calc(1.1s + var(--n, 0) * .38s), transform .5s cubic-bezier(.2, 1.6, .4, 1) calc(1.1s + var(--n, 0) * .38s); }
	.pk-theme.is-in .pk-theme__nodes b + b::before { transform: scaleX(1); transition: transform .3s ease-out calc(.86s + var(--n) * .38s); }
	.pk-theme.is-in .pk-theme__nodes b + b::after { right: calc(100% + var(--g) - 10px); animation: pk-signal 3.6s ease-in-out calc(2.3s + (var(--n) - 1) * .9s) infinite; }
}
@keyframes pk-signal {
	0% { opacity: 0; transform: translateX(0); }
	4% { opacity: 1; }
	21% { opacity: 1; }
	25% { opacity: 0; transform: translateX(calc(var(--g) - 12px)); }
	100% { opacity: 0; transform: translateX(calc(var(--g) - 12px)); }
}
@media (max-width: 600px) { .pk-theme__nodes { gap: .5rem; } .pk-theme__nodes b + b::before, .pk-theme__nodes b + b::after { display: none; } } /* rows wrap here: no dangling links */
.pk-hero__sub .elementor-heading-title { font-size: clamp(1.3rem, 2.4vw, 1.85rem); font-weight: 800; color: var(--pk-navy); max-width: 22ch; line-height: 1.15; }
.pk-hero__lede p { color: var(--pk-muted); font-size: clamp(1.05rem, 1.4vw, 1.18rem); max-width: 52ch; margin: 0; }

/* Photo card (home): an elevated surface (radius 24 + shadow) framing the photo with 8px (24 = 16 + 8);
   the countdown cells below sit on the same 8px line, also radius 16. */
.e-con.pk-hero__card { padding: var(--pk-inset-sm); background: #fff; border: 1px solid var(--pk-line); border-radius: var(--pk-r-lg); box-shadow: var(--pk-shadow-3); }
.pk-hero__media img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--pk-r); }
.pk-hero__card .pk-hero__media { overflow: hidden; border-radius: var(--pk-r); } /* keeps the entrance zoom inside the frame */
.pk-hero__card .pk-cd { border-radius: 0; box-shadow: none; padding: .5rem 0 0; background: none; }
.pk-hero__card .pk-cd__date { display: none; } /* the action bar beside it already states the opening date; say it once */
/* Inner pages: the same framed photo card, photo only */
.pk-pagehero .pk-hero__copy { flex: 1 1 0; min-width: 0; }
.pk-pagehero .pk-hero__media { position: relative; flex: 0 0 40%; padding: var(--pk-inset-sm); background: #fff; border: 1px solid var(--pk-line); border-radius: var(--pk-r-lg); box-shadow: var(--pk-shadow-3); } /* a raised card, like the home photo card */

/* Action bar: the registration status/button and the next step share one white bar (16 = 8 + 8).
   Inside the frame the "pending" label drops its dashed border; the frame already marks it. */
.pk-hero .e-con.pk-actions { padding: var(--pk-inset-sm); gap: var(--pk-inset-sm); width: 100%; justify-content: space-between; /* same edges as the info card below */ background: #fff; border: 1px solid var(--pk-line); border-radius: var(--pk-r-lg); box-shadow: var(--pk-shadow-1); }
.pk-hero .pk-actions .pk-btn--pending { border: 0; padding-inline: .75rem 1rem; color: var(--pk-navy); }
.pk-hero .pk-actions .pk-btn--pending .pk-ico { color: var(--pk-indigo); }

/* Key facts as one compact bar under the action bar, same shape (radius 24, 8px in; 24 = 16 + 8 at the icon tiles):
   icon + value for the final date and the venue (their labels are for screen readers only, the icons carry them on
   screen), split by a hairline, then the fee as a handwritten "Gratis!" at the end (owner's requests). */
.pk-hero .pk-facts { display: flex; align-items: center; gap: 1rem; padding: var(--pk-inset-sm) 1.5rem var(--pk-inset-sm) var(--pk-inset-sm); border: 1px solid var(--pk-line); border-radius: var(--pk-r-lg); background: #fff; box-shadow: var(--pk-shadow-1); } /* same elevation as the action bar above it: they read as a pair */
.pk-facts ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; flex: 1 1 auto; min-width: 0; }
.pk-facts li { display: flex; align-items: center; gap: .65rem; font-size: .98rem; font-weight: 800; line-height: 1.3; color: var(--pk-navy); }
.pk-facts li + li { padding-left: 1rem; border-left: 1px solid var(--pk-line); }
/* both facts and the note need about 692px on one line; the text column only has that from 1280px up (boxed at 1200px),
   so below it they stack instead of wrapping with a stray hairline (phones stack them further down) */
@media (min-width: 768px) and (max-width: 1279px) { .pk-facts ul { flex-direction: column; align-items: flex-start; } .pk-facts li + li { padding-left: 0; border-left: 0; } }
/* the fee written by hand, tilted, with the yellow felt-tip stroke of the headings under it */
.pk-free-note {
	position: relative; flex: none; margin: 0 0 0 auto; rotate: -6deg; isolation: isolate; /* keeps the stroke behind the word */
	font-family: "Caveat", var(--pk-font); font-size: 2.1rem; font-weight: 700; line-height: 1; color: var(--pk-navy);
}
.pk-free-note::after {
	content: ""; position: absolute; z-index: -1; left: -6%; right: -8%; bottom: -.05em; height: .42em;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 24' preserveAspectRatio='none'%3E%3Cpath d='M3 14C30 8 70 6 110 8s65 7 87 3' fill='none' stroke='%23FFCC00' stroke-width='9' stroke-linecap='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}
/* the stroke is written in left to right once the note is on screen (and the preloader has lifted) */
.pk-js .pk-free-note::after { clip-path: inset(0 100% 0 0); transition: clip-path .6s var(--pk-ease) .35s; }
.pk-js .pk-free-note.is-drawn::after { clip-path: inset(0 0 0 0); }
/* icon per fact, in the order the hero lists them: final date, venue (a 3rd fact gets no icon) */
.pk-facts li::before { content: ""; flex: none; width: 40px; height: 40px; border-radius: var(--pk-r); background: var(--pk-tint) no-repeat center / 1.2rem; }
.pk-facts li:nth-child(1)::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23010955' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 2v3M16 2v3M3 9h18M8 13h.01M12 13h.01M16 13h.01M8 17h.01M12 17h.01M16 17h.01'/%3E%3Crect x='3' y='3' width='18' height='18' rx='2'/%3E%3C/svg%3E"); }
.pk-facts li:nth-child(2)::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23010955' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 10c0 4.993-5.539 10.193-7.399 11.799a1 1 0 0 1-1.202 0C9.539 20.193 4 14.993 4 10a8 8 0 0 1 16 0'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E"); }
.pk-facts li:nth-child(n+3)::before { visibility: hidden; }

/* ---------- Hero stickers (owner's request, after ilhamriski.com): individual holographic die-cut stickers.
   Each is an SVG (see pikk_sticker_svg): its silhouette, stroked fat with an iridescent foil photo, is the cut edge, so
   the edge follows the shape instead of a circle; the two-colour art sits on it and a glare rides on top.
   pikk.js slides the foil and glare with the pointer/scroll and lets you drag a sticker around. ---------- */
.pk-hero :is(.pk-hero__copy, .e-con.pk-hero__card) { position: relative; }
.e-con.pk-hero { overflow-x: clip; } /* stickers (and their slap-on entrance) never cause sideways scrolling */
:is(.pk-hero, .pk-pagehero) .elementor-widget-shortcode:has(.pk-stickers) { position: absolute; inset: 0; z-index: 3; pointer-events: none; margin: 0; }
:is(.pk-hero, .pk-pagehero) .elementor-widget-shortcode:has(.pk-stickers) .elementor-shortcode { height: 100%; }
/* inner page heroes: one sticker over the photo card's top-left corner, one on its right edge */
.e-con.pk-pagehero { overflow-x: clip; }
.pk-stickers--page .pk-sticker--n0 { top: -38px; left: -38px; --size: 100px; }
.pk-stickers--page .pk-sticker--n1 { bottom: 16%; right: -34px; --size: 88px; }
.pk-stickers--page .pk-sticker--emc2 { --size: 124px; right: -48px; }
.pk-stickers { position: relative; height: 100%; perspective: 700px; }
.pk-sticker {
	--size: 96px;
	position: absolute; display: block; width: var(--size); pointer-events: auto; cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; /* a finger on a sticker drags it instead of scrolling */
	transform: translate(var(--dx, 0px), var(--dy, 0px)) rotate(var(--r)) rotateX(calc(var(--py, 0) * -14deg)) rotateY(calc(var(--px, 0) * 16deg));
	transition: filter .3s; /* the tilt is eased per frame in pikk.js */
	/* the shadow follows the die-cut silhouette, not a box: the sticker sits slightly proud of the card */
	filter: drop-shadow(0 1px 0 rgba(1,9,85,.18)) drop-shadow(0 8px 10px rgba(1,9,85,.32));
}
.pk-sticker:hover { filter: drop-shadow(0 1px 0 rgba(1,9,85,.18)) drop-shadow(0 16px 18px rgba(1,9,85,.36)); }
.pk-sticker.is-dragging { cursor: grabbing; transition: none; z-index: 5; filter: drop-shadow(0 1px 0 rgba(1,9,85,.18)) drop-shadow(0 22px 22px rgba(1,9,85,.4)); }
.pk-sticker__svg { display: block; width: 100%; height: auto; overflow: visible; }
.pk-sticker__shine { mix-blend-mode: overlay; pointer-events: none; }
.pk-sticker--emc2 { --size: 132px; }
/* placement: card set hangs off the photo card's corners; title set sits beside "PIKK 2027" and on the info card */
.pk-stickers--card .pk-sticker--n0 { top: -38px; left: -40px; --size: 104px; }
.pk-stickers--card .pk-sticker--n1 { top: 34%; right: -40px; --size: 92px; }
.pk-stickers--card .pk-sticker--n2 { bottom: 33%; left: -36px; --size: 80px; }
@media (max-width: 1320px) { .pk-stickers--card .pk-sticker--n1 { right: -18px; } } /* less room beside the card */
.pk-stickers--title .pk-sticker--n0 { top: 2.2rem; left: min(35rem, 82%); }
.pk-stickers--title .pk-sticker--n1 { top: 9.5rem; left: min(26rem, 62%); --size: 84px; } /* beside the subtitle, leaving the info card's corner to the "Gratis!" note */
/* home sections: one sticker each (sec-*), over a corner of their block */
:is(.e-con, .e-con-inner):has(> .elementor-widget-shortcode .pk-stickers[class*="pk-stickers--sec-"]) { position: relative; } /* boxed sections: pin to the content box, not the full-width band */
.elementor-widget-shortcode:has(.pk-stickers[class*="pk-stickers--sec-"]) { position: absolute; inset: 0; z-index: 3; pointer-events: none; margin: 0; }
.elementor-widget-shortcode:has(.pk-stickers[class*="pk-stickers--sec-"]) .elementor-shortcode { height: 100%; }
/* as in the hero: a sticker near the edge (and its 1.6x slap-on entrance) never makes the page scroll sideways on phones */
.e-con.pk-section:has(.pk-stickers[class*="pk-stickers--sec-"]) { overflow-x: clip; }
/* E=mc² above the "Detail kategori lomba" link (the side column is only as tall as the link). Tablets: the header stacks,
   so it moves up beside the heading, clear of the cards' 3D objects; phones: beside the link, on the right. */
.pk-stickers--sec-kategori .pk-sticker { bottom: calc(100% + 28px); right: 44px; --size: 150px; }
.pk-stickers--sec-jadwal .pk-sticker { top: 6px; right: 2%; --size: 92px; }
@media (max-width: 1024px) { .pk-stickers--sec-kategori .pk-sticker { bottom: calc(100% + 40px); right: 40px; --size: 132px; } }
@media (max-width: 767px) { .pk-stickers--sec-kategori .pk-sticker { bottom: auto; top: 50%; translate: 0 -50%; right: 0; --size: clamp(72px, calc(100% - 268px), 104px); } .pk-stickers--sec-jadwal .pk-sticker { top: 0; right: 0; --size: 68px; } }
/* entrance: each sticker is slapped on once, a beat after the headline */
.pk-js .pk-sticker { animation: pk-stick .7s cubic-bezier(.2, 1.6, .4, 1) backwards; animation-delay: calc(.9s + var(--i) * .15s); } /* backwards: leaves transform free for the tilt afterwards */
@keyframes pk-stick { from { opacity: 0; transform: rotate(calc(var(--r) * 3)) scale(1.6); } to { opacity: 1; } }

/* Countdown panel (Jadwal sidebar): one of two elevated surfaces */
.pk-cd { background: #fff; color: var(--pk-navy); border-radius: var(--pk-r-lg); padding: var(--pk-inset-sm); /* 24 = 16px cells + 8 */ box-shadow: var(--pk-shadow-3); }
.pk-cd__label { margin: 0; padding: .5rem .5rem .9rem; font-weight: 700; color: var(--pk-muted); }
.pk-cd__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .5rem; }
.pk-cd__cell { display: flex; flex-direction: column; align-items: center; gap: .15rem; padding: .8rem .25rem .65rem; border-radius: var(--pk-r); background: var(--pk-bg); }
.pk-cd__cell:first-child { background: var(--pk-navy); color: #fff; }
.pk-cd__cell b { font-size: clamp(1.8rem, 3.2vw, 2.6rem); font-weight: 900; letter-spacing: -0.03em; line-height: 1; font-variant-numeric: tabular-nums; }
.pk-cd__cell b { display: inline-flex; }
/* One slot per digit (see pikk.js): a changing digit rolls, the old one up and out, the new one up from below.
   Only the digit that changes moves, so the seconds' last digit ticks while the rest stay still. */
.pk-cd__d { display: inline-flex; flex-direction: column; height: 1.08em; overflow: hidden; }
.pk-cd__d i { display: block; height: 1.08em; line-height: 1.08; font-style: normal; }
.pk-cd__d.is-roll i { animation: pk-roll .6s cubic-bezier(.3, 1.35, .5, 1) both; } /* slight overshoot, like a mechanical counter */
.pk-cd__d.is-roll i:first-child { animation-name: pk-roll-out; }
@keyframes pk-roll { from { transform: translateY(0); } to { transform: translateY(-100%); } }
@keyframes pk-roll-out { from { transform: translateY(0); opacity: 1; } to { transform: translateY(-100%); opacity: 0; } }
.pk-cd__cell small { font-size: .78rem; font-weight: 600; opacity: .8; }
.pk-cd__date { margin: 0; padding: .9rem .5rem .5rem; font-weight: 800; }

/* Hero entrance (once, on load): headline letters rise from a mask, the photo settles from a slight zoom, the band slides up. */
.pk-word { display: inline-block; white-space: nowrap; }
.pk-w { display: inline-block; overflow: hidden; vertical-align: top; padding: 0 .08em .2em; margin: 0 -.08em -.2em; } /* room below for the underline */
.pk-w > span { display: inline-block; transform: translateY(105%); transition: transform .9s var(--pk-ease); transition-delay: calc(var(--wi) * 45ms); }
.is-split-in .pk-w > span { transform: none; }
.pk-js .pk-hero .pk-hero__copy > * { animation: pk-rise .8s var(--pk-ease) both; }
.pk-js .pk-hero .pk-hero__copy > :nth-child(n+3) { animation-delay: .12s; }
.pk-js .pk-hero .pk-hero__media img { animation: pk-settle 1.6s var(--pk-ease) both; }
.pk-js .pk-hero__card { animation: pk-rise .9s var(--pk-ease) .2s both; }
@keyframes pk-rise { from { transform: translateY(20px); } to { transform: none; } }
@keyframes pk-settle { from { transform: scale(1.08); } to { transform: none; } }

/* ---------- Intro figures (numbers come from the guide: 3 levels, 5 categories, 2 rounds, top 10) ---------- */
/* Four figure tiles, each with its own icon treatment (owner asked for variety, no icon boxes): the number and label sit
   at the bottom of every tile, the icon varies above. The right column sits lower for rhythm. Icons are Lucide, drawn as
   masks so they take the tile's colour. Numbers count up when the section appears. */
.pk-figures dl { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--pk-inset); }
/* Kompetisi: the requirements that are numbers, in one row; the team size is the indigo tile */
.pk-figures--req dl { grid-template-columns: repeat(4, minmax(0, 1fr)); padding-bottom: 1.75rem; /* room for the lowered tiles */ }
.pk-figures.pk-figures--req dl > div:nth-child(1)::before { mask-image: url(icons/user-check.svg); }
.pk-figures.pk-figures--req dl > div:nth-child(2)::before { mask-image: url(icons/file-text.svg); }
.pk-figures.pk-figures--req dl > div:nth-child(3)::before { mask-image: url(icons/backpack.svg); }
.pk-figures.pk-figures--req dl > div:nth-child(4)::before { mask-image: url(icons/users.svg); }
.pk-figures dl > div {
	position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; gap: .2rem;
	min-height: 11.5rem; padding: 20px; border: 1px solid var(--pk-line); border-radius: var(--pk-r-lg); background: #fff; color: var(--pk-navy);
	transition: transform .35s var(--pk-ease), border-color var(--pk-dur);
}
.pk-figures dl > div:nth-child(even) { translate: 0 1.75rem; }
.pk-figures dl > div:hover { transform: translateY(-4px); border-color: var(--pk-navy); }
.pk-figures dl > div::before { content: ""; position: absolute; pointer-events: none; background: currentColor; mask: center / contain no-repeat; transition: transform .5s var(--pk-ease); }
/* Every tile follows the finalists tile (owner's pick): a big tilted icon in the top-right corner, number and label at the
   bottom. Three white tiles and one indigo: the finalists, the goal of the competition, is the one that stands out.
   (Four colours side by side read as loud; the icons already tell the tiles apart.) */
.pk-figures dl > div::before { top: 18px; right: 18px; width: 56px; height: 56px; transform: rotate(var(--tilt, 8deg)); }
.pk-figures dl > div:hover::before { transform: rotate(-4deg) scale(1.08); }
.pk-figures dl > div:nth-child(1)::before { --tilt: -8deg; mask-image: url(icons/graduation-cap.svg); }
.pk-figures dl > div:nth-child(2)::before { --tilt: 10deg; mask-image: url(icons/shapes.svg); }
.pk-figures dl > div:nth-child(3)::before { --tilt: -6deg; mask-image: url(icons/flag.svg); }
.pk-figures dl > div:nth-child(4) { background: var(--pk-navy); border-color: var(--pk-navy); }
.pk-figures dl > div:nth-child(4)::before { color: var(--pk-yellow); mask-image: url(icons/trophy.svg); }
.pk-figures dl > div:nth-child(n+5)::before { display: none; }
/* (icon order follows the figure order: levels, categories, rounds, finalists) */
.pk-figures dl > div:nth-child(4) :is(dt, dd) { color: #fff; }
.pk-figures dl > div:nth-child(4) dd { color: var(--pk-on-dark); }
.pk-figures dt { font-size: clamp(2.6rem, 4.6vw, 3.6rem); font-weight: 900; line-height: 1; letter-spacing: -0.04em; color: var(--pk-navy); font-variant-numeric: tabular-nums; }
.pk-figures dd { margin: 0; color: var(--pk-muted); font-weight: 600; line-height: 1.35; }

/* ---------- Category cards ---------- */
.pk-levels { --gap: var(--pk-gap); }
.pk-level { --gap: .75rem; }
/* this heading is a full sentence: a step smaller and the full column wide, so it takes 2-3 lines instead of 4 */
.pk-section:has(> .e-con-inner > .pk-levels) .pk-h2 .elementor-heading-title { font-size: clamp(1.75rem, 3.4vw, 2.75rem); max-width: 26ch; }

/* ---------- 3D objects in "Bidang Lomba" (owner's request: the section felt empty; then one per card only).
   Microsoft Fluent Emoji 3D (MIT, licence in assets/img/3d), used in their own colours; picked from the set for the ones
   closest to the indigo/yellow palette (owner turned down the recoloured 3dicons renders).
   Decorative CSS images, nothing to read: microscope (SMA, research), idea bulb (SMP), magnifier (SD, observing),
   popping from the card's top-right. ---------- */
.pk-level { position: relative; }
.pk-levels > .pk-level::after { content: ""; position: absolute; z-index: 1; top: -32px; right: 12px; width: 78px; height: 90px; pointer-events: none; background: no-repeat center / contain; filter: drop-shadow(0 12px 12px rgba(1,9,85,.2)); transition: translate .5s var(--pk-ease); }
.pk-levels > .pk-level:nth-child(1)::after { background-image: url(img/3d/microscope.webp); rotate: -4deg; }
.pk-levels > .pk-level:nth-child(2)::after { background-image: url(img/3d/bulb.webp); rotate: 10deg; }
.pk-levels > .pk-level:nth-child(3)::after { background-image: url(img/3d/magnifier.webp); rotate: 8deg; }
.pk-levels > .pk-level:hover::after { translate: 0 -8px; }
@media (max-width: 1024px) {
	/* narrow columns: smaller objects that pop out above the card, clear of the subtitle */
	.pk-levels > .pk-level::after { top: -30px; right: 10px; width: 64px; height: 72px; }
}
@media (max-width: 767px) {
	/* stacked cards sit close together: objects stay inside their own card, beside the level code */
	.pk-levels > .pk-level::after { top: 12px; right: 12px; width: 64px; height: 74px; }
}
.pk-level__top { --gap: .35rem; }
.pk-level__code .elementor-heading-title { font-size: clamp(2.4rem, 4vw, 3.2rem); font-weight: 900; letter-spacing: -0.05em; line-height: .85; color: var(--pk-navy); }
.pk-level__who p { margin: 0; font-weight: 700; color: var(--pk-muted); }
.pk-catlist ol { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.pk-catlist li { display: grid; grid-template-columns: 2rem 1fr; align-items: center; gap: .7rem; min-height: 48px; padding: 8px 12px 8px 8px; border-radius: var(--pk-r); /* card 24 = row 16 + 8 */ background: var(--pk-bg); font-weight: 700; line-height: 1.3; }
/* Lucide icons that match the category content: palette (social, arts, languages), flask-conical (sciences), atom (SD Sains) */
.pk-catlist li::before { content: ""; align-self: start; width: 2rem; height: 2rem; border-radius: var(--pk-r-sm); /* row 16 = icon 8 + 8 */ background: var(--pk-navy) var(--pk-icon, none) center / 55% no-repeat; }
.pk-catlist li.pk-cat--sosial { --pk-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFCC00' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22a1 1 0 0 1 0-20 10 9 0 0 1 10 9 5 5 0 0 1-5 5h-2.25a1.75 1.75 0 0 0-1.4 2.8l.3.4a1.75 1.75 0 0 1-1.4 2.8z'/%3E%3Ccircle cx='13.5' cy='6.5' r='.5' fill='%23FFCC00'/%3E%3Ccircle cx='17.5' cy='10.5' r='.5' fill='%23FFCC00'/%3E%3Ccircle cx='6.5' cy='12.5' r='.5' fill='%23FFCC00'/%3E%3Ccircle cx='8.5' cy='7.5' r='.5' fill='%23FFCC00'/%3E%3C/svg%3E"); }
.pk-catlist li.pk-cat--mipa { --pk-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFCC00' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2v6a2 2 0 0 0 .245.96l5.51 10.08A2 2 0 0 1 18 22H6a2 2 0 0 1-1.755-2.96l5.51-10.08A2 2 0 0 0 10 8V2M6.453 15h11.094M8.5 2h7'/%3E%3C/svg%3E"); }
.pk-catlist li.pk-cat--sains { --pk-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFCC00' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='1'/%3E%3Cpath d='M20.2 20.2c2.04-2.03.02-7.36-4.5-11.9-4.54-4.52-9.87-6.54-11.9-4.5-2.04 2.03-.02 7.36 4.5 11.9 4.54 4.52 9.87 6.54 11.9 4.5Z'/%3E%3Cpath d='M15.7 15.7c4.52-4.54 6.54-9.87 4.5-11.9-2.03-2.04-7.36-.02-11.9 4.5-4.52 4.54-6.54 9.87-4.5 11.9 2.03 2.04 7.36.02 11.9-4.5Z'/%3E%3C/svg%3E"); }

/* ---------- Timeline legend (shared) ---------- */
.pk-legend { list-style: none; margin: 0 0 1.5rem; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; font-size: .9rem; color: var(--pk-muted); }
.pk-legend li { display: inline-flex; align-items: center; gap: .45rem; }
.pk-legend li::before { content: ""; width: 14px; height: 14px; border-radius: 50%; border: 3px solid var(--pk-idle); background: #fff; box-sizing: border-box; }
.pk-legend .is-past::before { background: var(--pk-indigo); border-color: var(--pk-indigo); }
.pk-legend .is-next::before { border-color: var(--pk-yellow); background: var(--pk-navy); }
/* ---------- Timeline (home, focal moment 2): one white panel holding the legend, the arrows and a horizontal scroller
   of stage cards grouped by phase. Panel 24 = cards 16 + 8. Each card draws its own rail segment; segments behind
   "today" fill in sequence when the timeline scrolls into view. The next stage is the one framed card. ---------- */
.pk-tl { padding: var(--pk-inset-sm); background: #fff; border: 1px solid var(--pk-line); border-radius: var(--pk-r-lg); }
.pk-tl__head { position: relative; z-index: 1; /* keeps the arrows' shadows above the edge fade below */ display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; padding-left: var(--pk-inset); }
.pk-tl__head .pk-legend { margin: 0; }
.pk-tl__nav { display: flex; gap: var(--pk-inset-sm); margin-left: auto; } /* stays on the right when the legend wraps */
/* prev/next arrows are functional direction cues for the scroller */
.pk-tl__nav button { --pk-btn-bg: #fff; --pk-btn-fg: var(--pk-navy); display: grid; place-items: center; width: 48px; height: 48px; padding: 0; border-radius: var(--pk-r); cursor: pointer; }
.pk-tl__nav .pk-ico { width: 1.35rem; height: 1.35rem; }
/* the right edge fades while more stages wait off-screen (pikk.js sets is-end at the end) */
/* (an overlay, not a CSS mask: Chrome clips a masked scroller's content short) */
.pk-tl__frame { position: relative; }
.pk-tl__frame::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 72px; pointer-events: none; background: linear-gradient(90deg, rgba(255,255,255,0), #fff); transition: opacity .3s; }
.pk-tl.is-end .pk-tl__frame::after { opacity: 0; }
.pk-tl__viewport { position: relative; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 0; padding: var(--pk-inset) 0 0; scrollbar-width: none; }
.pk-tl__viewport::-webkit-scrollbar { display: none; }
.pk-tl__groups { list-style: none; margin: 0; padding: 0; display: flex; gap: var(--pk-inset-sm); width: max-content; }
.pk-tl__group { display: flex; flex-direction: column; }
.pk-tl__phase { display: flex; align-items: baseline; gap: .6rem; margin: 0 0 1rem; padding: 0 0 .5rem var(--pk-inset); border-bottom: 1px solid var(--pk-navy); font-weight: 900; font-size: 1rem; color: var(--pk-navy); white-space: nowrap; }
.pk-tl__phase span { font-size: .85rem; font-weight: 700; color: var(--pk-muted); }
/* "Sekarang" lead card, shown only before the first stage: where we are relative to the schedule */
.pk-tl__group--now .pk-tl__phase { border-bottom-style: dashed; border-color: #9AA0B8; color: var(--pk-muted); }
.pk-tl__item--now { width: 12rem; }
.pk-tl__item--now .pk-tl__dot { background: var(--pk-navy); border-color: var(--pk-navy); }
.pk-tl__item--now .pk-tl__line { background: repeating-linear-gradient(90deg, #9AA0B8 0 8px, transparent 8px 14px); }
.pk-tl__item--now .pk-tl__card { background: #fff; outline: 2px dashed var(--pk-idle); outline-offset: -2px; }
.pk-tl__items { list-style: none; margin: 0; padding: 0; display: flex; gap: var(--pk-inset-sm); }
.pk-tl__item { width: 16rem; display: flex; flex-direction: column; scroll-snap-align: start; opacity: 0; transform: translateY(18px); transition: opacity .5s var(--pk-ease), transform .5s var(--pk-ease); transition-delay: calc(var(--i) * 70ms + 150ms); }
.pk-tl.is-in .pk-tl__item, html:not(.pk-js) .pk-tl__item { opacity: 1; transform: none; }
/* the dot lines up with the card text (16px in); the line runs on to the next card's dot */
.pk-tl__rail { position: relative; height: 24px; margin: 0 0 .85rem var(--pk-inset); }
.pk-tl__line { position: absolute; left: 12px; right: calc(-1 * var(--pk-inset-sm) - var(--pk-inset)); top: 10px; height: 4px; border-radius: 2px; background: var(--pk-line); overflow: hidden; }
.pk-tl__line::after { content: ""; position: absolute; inset: 0 auto 0 0; width: 0; background: var(--pk-indigo); transition: width .9s var(--pk-ease); transition-delay: calc(var(--i) * 140ms + 300ms); }
.pk-tl.is-in .pk-tl__line::after, html:not(.pk-js) .pk-tl__line::after { width: calc(var(--seg) * 100%); }
.pk-tl__group:last-child .pk-tl__item:last-child .pk-tl__line { display: none; }
.pk-tl__dot { position: absolute; left: 0; top: 0; z-index: 1; width: 24px; height: 24px; border-radius: 50%; background: #fff; border: 4px solid var(--pk-idle); }
.is-past .pk-tl__dot { background: var(--pk-indigo) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 60% no-repeat; border-color: var(--pk-indigo); }
.is-next .pk-tl__dot, .is-current .pk-tl__dot { background: var(--pk-navy); border-color: var(--pk-yellow); box-shadow: 0 0 0 4px rgba(255, 204, 0, .3); }
.is-final .pk-tl__dot { background: var(--pk-yellow); border-color: var(--pk-navy); }
.pk-tl__now { position: absolute; z-index: 2; top: -1px; left: calc(30px + (100% - 36px) * var(--at) / 100); opacity: 0; transition: opacity .4s 1.2s; }
.pk-tl.is-in .pk-tl__now, html:not(.pk-js) .pk-tl__now { opacity: 1; }
.pk-tl__now span { display: block; padding: .1rem .5rem; border-radius: var(--pk-r-sm); background: var(--pk-navy); color: #fff; font-size: .78rem; font-weight: 800; line-height: 1.5; white-space: nowrap; }
/* stage card: a 16px tile on the white panel (panel 24 = 16 + 8); its 4px badge sits 16px in */
.pk-tl__card { flex: 1; display: flex; flex-direction: column; gap: .45rem; padding: var(--pk-inset); border-radius: var(--pk-r); background: var(--pk-bg); }
.pk-tl__date { display: flex; align-items: baseline; flex-wrap: wrap; gap: .1rem .5rem; color: var(--pk-navy); }
.pk-tl__day { font-size: 2.4rem; font-weight: 900; line-height: 1; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.pk-tl__mon { font-size: .9rem; font-weight: 800; color: var(--pk-muted); }
.pk-tl__title { margin: 0; font-size: 1.1rem; line-height: 1.25; color: var(--pk-navy); }
/* three lines at most so every card in the row keeps the same rhythm; the full text is on the Jadwal page */
.pk-tl__desc { margin: 0; font-size: .92rem; line-height: 1.5; color: var(--pk-muted); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.pk-tl__card .pk-badge { align-self: flex-start; margin-top: auto; }
.is-past .pk-tl__card { opacity: .75; }
.is-past .pk-tl__day { color: var(--pk-muted); }
/* the next stage is the one thing to notice: a white card framed in indigo, lifted, with the only yellow badge.
   The final is marked by its yellow dot on the rail, not by a second loud card. */
.is-next .pk-tl__card, .is-current .pk-tl__card { background: #fff; box-shadow: inset 0 0 0 2px var(--pk-navy), var(--pk-shadow-1); }

/* ---------- Corner icons (owner, 27 Oct 2026: inner pages as lively as home). The home figure tiles' big tilted
   Lucide icon, on cards and tiles whose subject an icon can show; a mask, so it takes the text colour. Headings in the
   card keep clear of it. ---------- */
.pk-ic { position: relative; }
.pk-ic::after { content: ""; position: absolute; top: 20px; right: 20px; width: 52px; height: 52px; pointer-events: none; background: var(--pk-navy); mask: var(--ic) center / contain no-repeat; rotate: var(--tilt, 8deg); transition: rotate .5s var(--pk-ease), scale .5s var(--pk-ease); }
.pk-ic:nth-child(even)::after { --tilt: -7deg; }
.pk-ic:hover::after { rotate: -4deg; scale: 1.08; }
.pk-ic > .elementor-widget-heading { padding-right: 64px; }
.pk-spec li.pk-ic { padding-right: 3.25rem; }
.pk-spec li.pk-ic::after { top: 16px; right: 16px; width: 28px; height: 28px; background: var(--pk-indigo); }
.pk-ic--file-text { --ic: url(icons/file-text.svg); }
.pk-ic--presentation { --ic: url(icons/presentation.svg); }
.pk-ic--book-open { --ic: url(icons/book-open.svg); }
.pk-ic--image { --ic: url(icons/image.svg); }
.pk-ic--mic { --ic: url(icons/mic.svg); }
.pk-ic--files { --ic: url(icons/files.svg); }
.pk-ic--file-down { --ic: url(icons/file-down.svg); }
.pk-ic--clock { --ic: url(icons/clock.svg); }
.pk-ic--utensils { --ic: url(icons/utensils.svg); }
.pk-ic--frame { --ic: url(icons/frame.svg); }
.pk-ic--ruler { --ic: url(icons/ruler.svg); }
.pk-ic--armchair { --ic: url(icons/armchair.svg); }
.pk-ic--plug-zap { --ic: url(icons/plug-zap.svg); }
.pk-ic--message-circle-question { --ic: url(icons/message-circle-question.svg); }
.pk-steps--2col ol { columns: 2 13rem; column-gap: 2rem; }
.pk-steps--2col li { break-inside: avoid; }
.pk-steps--2col li:last-child { border-bottom: 1px solid var(--pk-line); } /* both columns end on a rule */

/* ---------- Stages ---------- */
.pk-stages { --gap: var(--pk-gap); }
.pk-stage { --gap: .75rem; }
.pk-stage__num .elementor-heading-title { font-size: 1rem; font-weight: 800; color: var(--pk-yellow); }
.pk-section:not(.pk-ink) .pk-stage__num .elementor-heading-title { color: var(--pk-indigo); }
.pk-ink .pk-stage__num .elementor-heading-title { color: var(--pk-yellow); }
.pk-steps ol { list-style: none; counter-reset: step; margin: 0; padding: 0; }
.pk-steps li { counter-increment: step; position: relative; padding: .75rem 0 .75rem 2.9rem; border-bottom: 1px solid var(--pk-line); line-height: 1.45; }
.pk-ink .pk-steps li { border-color: var(--pk-ink-line); }
.pk-steps li:last-child { border-bottom: 0; }
.pk-steps li::before { content: counter(step); position: absolute; left: 0; top: .65rem; width: 2rem; height: 2rem; display: grid; place-items: center; border-radius: var(--pk-r-sm); background: var(--pk-tint); color: var(--pk-navy); font-size: .9rem; font-weight: 800; }
.pk-ink .pk-steps li::before { background: var(--pk-yellow); color: var(--pk-navy); }

/* ---------- Checklists ---------- */
.pk-checks ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.pk-checks li { position: relative; padding: .85rem 1rem .85rem 2.9rem; border-radius: var(--pk-r-lg); background: #fff; border: 1px solid var(--pk-line); line-height: 1.45; }
.pk-card .pk-checks li { background: var(--pk-bg); border-color: transparent; border-radius: var(--pk-r); }
.pk-ink .pk-checks li { background: var(--pk-ink-2); border-color: var(--pk-ink-line); }
.pk-checks li::before { content: ""; position: absolute; left: .85rem; top: .95rem; width: 1.3rem; height: 1.3rem; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--pk-yellow-press); /* owner: yellow checks; the darker rim keeps the disc visible on white */ background: var(--pk-yellow) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23010955' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 62% no-repeat; }
.pk-checks--x li::before { background: var(--pk-tint-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23010955' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M18 6 6 18M6 6l12 12'/%3E%3C/svg%3E") center / 55% no-repeat; }

/* ---------- Big "Gratis" ---------- */
.pk-free .elementor-heading-title { font-size: clamp(4rem, 12vw, 8rem); font-weight: 900; letter-spacing: -0.05em; line-height: .85; color: var(--pk-navy); }

/* ---------- Prizes: one white card per level, in the style of the intro figure tiles (tilted icon top-right, the figure at
   the bottom). The cards stand on a common baseline and their heights step down with the prize (Rp 4 / 3 / 2 juta), so
   the shape itself shows the amounts (owner: make this section more appealing). Amount is the hierarchy. ---------- */
.e-con.pk-prizes { --align-items: flex-end; }
/* the space above the figures carries the hero's dot grid, fading out before the text */
.e-con.pk-prize { --gap: .35rem; --justify-content: flex-end; position: relative; padding: var(--pk-card-pad) !important; border: 1px solid var(--pk-line);
	background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 15%, #fff 62%), radial-gradient(circle, rgba(1, 9, 85, .14) 1.2px, transparent 1.7px) 0 0 / 18px 18px, #fff; border-radius: var(--pk-r-lg); transition: transform .35s var(--pk-ease), border-color var(--pk-dur); }
.pk-prize:hover { transform: translateY(-4px); border-color: var(--pk-navy); }
@media (min-width: 1025px) {
	/* compact steps (owner: less empty space); the shortest still fits its figure beside the sticker */
	.pk-prizes > .pk-prize:nth-child(1) { min-height: 15rem; }
	.pk-prizes > .pk-prize:nth-child(2) { min-height: 12.75rem; }
	.pk-prizes > .pk-prize:nth-child(3) { min-height: 10.5rem; }
}
/* Each card carries its own holographic die-cut sticker in the top-right corner (owner's request), the prize that fits the
   level: trophy SMA, medal SMP, award SD. Static: they catch the light like the hero stickers but cannot be dragged, and
   are slapped on when the section appears. On wide screens they stick out over the card's top edge. */
.pk-prize > .elementor-widget-shortcode:has(.pk-stickers) { position: absolute; inset: 0; z-index: 3; pointer-events: none; margin: 0; }
.pk-prize .elementor-shortcode { height: 100%; }
.pk-stickers--prize .pk-sticker { --size: 84px; top: -30px; right: 18px; }
@media (max-width: 1024px) { .pk-stickers--prize .pk-sticker { --size: 64px; top: 14px; right: 16px; } } /* stacked cards: inside the card */
.pk-sticker--static, .pk-sticker--static:hover { cursor: default; touch-action: auto; }
.pk-js .pk-sticker--static { animation: none; }
.pk-js .pk-reveal.is-in .pk-sticker--static { animation: pk-stick .7s cubic-bezier(.2, 1.6, .4, 1) backwards; animation-delay: calc(.35s + var(--card, 0) * .12s); }
.pk-prize:nth-child(2) .pk-sticker--static { --card: 1; }
.pk-prize:nth-child(3) .pk-sticker--static { --card: 2; }
.pk-prize__level .elementor-heading-title { font-size: 1rem; font-weight: 800; color: var(--pk-indigo); }
.pk-prize__amount .elementor-heading-title { white-space: nowrap; font-size: clamp(1.6rem, 3.4vw, 2.8rem); font-weight: 900; letter-spacing: -0.03em; color: var(--pk-navy); font-variant-numeric: tabular-nums; }
.pk-prize__note p { margin: 0; color: var(--pk-muted); }

/* ---------- Tables: one style for every table on the site (scoring, prizes, and any table staff add to a page or an
   announcement). White surface, radius 24, a clearly visible frame and row rules (--pk-line-strong), indigo header row,
   rows tinted on hover, cell text top-aligned on a shared 1rem/1.1rem grid. ---------- */
.pk-table { overflow-x: auto; } /* only the table widget scrolls sideways; a general text block must not clip its contents */
/* corners are rounded on the table and its corner cells, not with overflow: hidden, which clipped the caption's first letter */
:is(.pk-table, .page-content, .elementor-widget-text-editor) table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 1rem; line-height: 1.5; margin: 0; background: #fff; border: 1px solid var(--pk-line-strong); border-radius: var(--pk-r-lg); }
:is(.pk-table, .page-content, .elementor-widget-text-editor) caption { caption-side: top; text-align: left; font-weight: 800; font-size: 1.2rem; line-height: 1.3; padding: 0 0 .75rem; color: var(--pk-navy); }
:is(.pk-table, .page-content, .elementor-widget-text-editor) :is(th, td) { text-align: left; vertical-align: top; padding: 1rem 1.1rem; border: 0; border-bottom: 1px solid var(--pk-line-strong); background: transparent; }
:is(.pk-table, .page-content, .elementor-widget-text-editor) tbody tr:last-child > * { border-bottom: 0; }
/* Hello's reset stripes odd rows grey (table tbody>tr:nth-child(odd)>td); rows here are split by rules and tinted on hover instead */
:is(.pk-table, .page-content, .elementor-widget-text-editor) table > tbody > tr:nth-child(n) > :is(td, th) { background-color: transparent; transition: background-color var(--pk-dur); }
:is(.pk-table, .page-content, .elementor-widget-text-editor) table > tbody > tr:nth-child(n):hover > :is(td, th) { background-color: var(--pk-bg); }
:is(.pk-table, .page-content, .elementor-widget-text-editor) thead th { padding-block: .85rem; font-size: .9rem; font-weight: 800; line-height: 1.3; color: #fff; background: var(--pk-navy); vertical-align: bottom; }
:is(.pk-table, .page-content, .elementor-widget-text-editor) thead th:first-child { border-top-left-radius: calc(var(--pk-r-lg) - 1px); }
:is(.pk-table, .page-content, .elementor-widget-text-editor) thead th:last-child { border-top-right-radius: calc(var(--pk-r-lg) - 1px); }
:is(.pk-table, .page-content, .elementor-widget-text-editor) tfoot td { font-weight: 800; border-top: 1px solid var(--pk-navy); border-bottom: 0; background: var(--pk-bg); vertical-align: middle; }
:is(.pk-table, .page-content, .elementor-widget-text-editor) tfoot td:first-child { border-bottom-left-radius: calc(var(--pk-r-lg) - 1px); }
:is(.pk-table, .page-content, .elementor-widget-text-editor) tfoot td:last-child { border-bottom-right-radius: calc(var(--pk-r-lg) - 1px); }
/* weight column: header and numbers right-aligned; a bar on the left of each number shows the 40/20/15/10 proportions */
.pk-table .pk-weight { text-align: right; white-space: nowrap; }
.pk-table td.pk-weight { position: relative; width: 32%; min-width: 9rem; font-weight: 900; font-size: 1.35rem; line-height: 1.2; color: var(--pk-navy); font-variant-numeric: tabular-nums; }
.pk-table td.pk-weight[style*="--w"]::before, .pk-table td.pk-weight[style*="--w"]::after { content: ""; position: absolute; left: 1.1rem; top: calc(1rem + .81rem - 3px); height: 6px; border-radius: 3px; }
.pk-table td.pk-weight[style*="--w"]::before { right: 3.75rem; background: var(--pk-tint); }
.pk-table td.pk-weight[style*="--w"]::after { background: var(--pk-indigo); width: calc((100% - 4.85rem) * var(--w) / 40); max-width: calc(100% - 4.85rem); transition: width 1.1s var(--pk-ease) .2s; }
.pk-js .pk-table:not(.is-drawn) td.pk-weight::after { width: 0; } /* each table draws its bars when it is itself on screen */
.pk-table .pk-n { width: 3.5rem; color: var(--pk-muted); font-weight: 700; }
.pk-table thead .pk-n { color: #fff; }
.pk-table .pk-money { font-weight: 900; font-size: 1.15rem; line-height: 1.3; color: var(--pk-navy); display: block; white-space: nowrap; }
.pk-table tbody th[scope="row"] { width: 9rem; font-weight: 800; white-space: nowrap; color: var(--pk-navy); }
/* prize tables: the category columns share the width equally, whatever the length of their names */
.pk-prize-table table { table-layout: fixed; }
.pk-prize-table thead th:first-child { width: 9rem; }
.pk-two-tables > .elementor-element { flex: 1 1 0; min-width: 0; }

/* Final-round weight split */
.pk-split { display: flex; gap: 6px; min-height: 6.5rem; }
.pk-split span { display: flex; flex-direction: column; justify-content: space-between; padding: .9rem 1rem; background: var(--pk-navy); color: #fff; font-size: .95rem; font-weight: 700; line-height: 1.25; border-radius: var(--pk-r-lg); min-width: 0; clip-path: inset(0 0 0 0 round var(--pk-r-lg)); transition: clip-path .8s var(--pk-ease) calc(var(--i, 0) * .18s); }
.pk-split span:nth-child(2) { --i: 1; } .pk-split span:nth-child(3) { --i: 2; } .pk-split span:nth-child(4) { --i: 3; }
.pk-split span:nth-child(3) { background: var(--pk-yellow); color: var(--pk-navy); }
.pk-split span:nth-child(2), .pk-split span:nth-child(4) { background: var(--pk-indigo); }
/* each weight is wiped in left to right, one after another (like the marker strokes), and its percentage counts up (pikk.js) */
.pk-js .pk-split:not(.is-drawn) span { clip-path: inset(0 100% 0 0 round var(--pk-r-lg)); }
.pk-split b { font-size: clamp(1.6rem, 3vw, 2.4rem); font-weight: 900; }

/* ---------- Spec sheet ---------- */
.pk-spec ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(12.5rem, 1fr)); gap: .75rem; }
.pk-spec li { background: #fff; border: 1px solid var(--pk-line); border-radius: var(--pk-r-lg); padding: 1.2rem; display: flex; flex-direction: column; gap: .25rem; color: var(--pk-muted); font-size: .95rem; }
.pk-spec li strong { font-size: 1.3rem; line-height: 1.15; color: var(--pk-navy); }
.pk-spec--stack ul { grid-template-columns: minmax(0, 1fr); } /* beside a list: one tile per row instead of 2 + 1 */
.pk-spec li span { font-size: .88rem; font-weight: 700; color: var(--pk-indigo); }

/* ---------- Note ---------- */
.pk-note { background: var(--pk-tint); color: var(--pk-ink); padding: 1rem 1.25rem; border-radius: var(--pk-r-lg); }
.pk-card .pk-note { border-radius: var(--pk-r); }
.pk-ink .pk-note { background: var(--pk-ink-2); color: #EEF0FF; }
.pk-note p { margin: 0 0 .5rem; } .pk-note p:last-child { margin: 0; }

/* ---------- Page hero (inner pages) ---------- */
.pk-pagehero h1.elementor-heading-title { font-size: clamp(2.5rem, 6.5vw, 5rem); line-height: .98; letter-spacing: -0.04em; font-weight: 900; color: var(--pk-navy); max-width: 18ch; }
.pk-chips ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.pk-chips a { display: inline-flex; align-items: center; min-height: 44px; padding: .45rem 1rem; border-radius: var(--pk-r); text-decoration: none !important; font-size: .95rem; font-weight: 700; }

/* ---------- News: one row per announcement: date tile (or photo), text, arrow. The whole row is the link.
   Card 24 = 16px tile + 8. ---------- */
.pk-news { display: grid; gap: var(--pk-inset-sm); }
.pk-news__item { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 0 1.5rem; padding: var(--pk-inset-sm); border: 1px solid var(--pk-line); border-radius: var(--pk-r-lg); background: #fff; transition: border-color var(--pk-dur), transform var(--pk-dur) var(--pk-ease); }
.pk-news__item:hover { border-color: var(--pk-navy); }
.pk-news__item:active { transform: var(--pk-press); }
/* the title link covers the whole row, so the row shows the focus ring */
.pk-news__item:has(.pk-news__title a:focus-visible) { outline: 3px solid var(--pk-indigo); outline-offset: 3px; }
.pk-news__title a:focus-visible { outline: none; }
.pk-news__date { align-self: stretch; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .25rem; width: 7rem; min-height: 7rem; margin: 0; border-radius: var(--pk-r); background: var(--pk-tint); color: var(--pk-navy); }
.pk-news__date b { font-size: 2.6rem; font-weight: 900; line-height: 1; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.pk-news__date span { font-size: .85rem; font-weight: 800; color: var(--pk-indigo); }
.pk-news__img { align-self: stretch; width: 11rem; }
.pk-news__img img { display: block; width: 100%; height: 100%; min-height: 7rem; object-fit: cover; border-radius: var(--pk-r); }
.pk-news__body { display: flex; flex-direction: column; gap: .4rem; padding: var(--pk-inset-sm) 0; }
.pk-news__meta { margin: 0; display: flex; gap: .6rem; flex-wrap: wrap; align-items: center; font-size: .88rem; font-weight: 700; color: var(--pk-muted); }
.pk-news__meta:empty { display: none; }
.pk-news__title { font-size: clamp(1.15rem, 1.8vw, 1.35rem); margin: 0; line-height: 1.25; }
.pk-news__title a { color: var(--pk-navy); text-decoration: none; }
.pk-news__title a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.pk-news__item:hover .pk-news__title a { color: var(--pk-indigo); }
.pk-news__excerpt { margin: 0; color: var(--pk-muted); font-size: .97rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* arrow tile: a "go" cue, filled yellow on hover (same arrow and slide as the read-more buttons) */
.pk-news__go { width: 48px; height: 48px; margin-right: var(--pk-inset-sm); border-radius: var(--pk-r); background: var(--pk-bg) center / 20px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23010955' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M12 5l7 7-7 7'/%3E%3C/svg%3E"); transition: background-color var(--pk-dur); }
.pk-news__item:hover .pk-news__go { background-color: var(--pk-yellow); animation: pk-arrow-on .45s var(--pk-ease); }
.pk-pager { margin-top: 2.5rem; display: flex; gap: .5rem; flex-wrap: wrap; }
.pk-pager .page-numbers { min-width: 44px; min-height: 44px; display: inline-grid; place-items: center; padding: 0 .9rem; border: 1px solid var(--pk-line); border-radius: var(--pk-r); color: var(--pk-navy); font-weight: 800; text-decoration: none; transition: background-color var(--pk-dur), border-color var(--pk-dur), transform var(--pk-dur) var(--pk-ease); }
.pk-pager .current { background: var(--pk-navy); color: #fff; border-color: var(--pk-navy); }
.pk-pager .dots { border-color: transparent; }

/* ---------- Downloads ---------- */
.pk-downloads { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.pk-dl { display: flex; align-items: stretch; justify-content: space-between; /* the button fills the row height, so all its corners sit 8px in */ gap: var(--pk-inset-sm) 1rem; padding: var(--pk-inset-sm); border-radius: var(--pk-r-lg); /* 24 = 16px button + 8 */ background: #fff; border: 1px solid var(--pk-line); flex-wrap: wrap; }
.pk-dl__text { display: flex; flex-direction: column; justify-content: center; gap: .15rem; flex: 1 1 12rem; padding: var(--pk-inset-sm); }
/* a document tile opens each row (row 24 = tile 16 + 8) */
.pk-dl::before { content: ""; flex: none; width: 56px; min-height: 56px; border-radius: var(--pk-r); background: var(--pk-tint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23010955' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z'/%3E%3Cpath d='M14 2v4a2 2 0 0 0 2 2h4M10 9H8M16 13H8M16 17H8'/%3E%3C/svg%3E") center / 24px no-repeat; }
.pk-dl__text strong { font-size: 1.05rem; color: var(--pk-navy); }
.pk-dl__desc { color: var(--pk-muted); font-size: .93rem; }
.pk-dl__btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-width: 14rem; min-height: 48px; padding: .5rem 1.1rem; border: 1px solid transparent; border-radius: var(--pk-r); font-weight: 800; text-decoration: none !important; }
.pk-dl__meta { font-size: .8rem; font-weight: 600; opacity: .85; }
/* not uploaded yet: same "pending" style as the registration date label */
.pk-dl.is-empty .pk-dl__btn { background: transparent; color: var(--pk-muted) !important; border: 1px dashed var(--pk-control-line); font-weight: 700; cursor: default; }
.pk-dl.is-ready { transition: border-color var(--pk-dur); }
.pk-dl.is-ready:hover { border-color: var(--pk-navy); }

/* ---------- Committee ---------- */
.pk-group { --gap: 2rem; border-top: 3px solid var(--pk-navy); padding-top: 1.5rem !important; }
/* every role is a card; every name a row with its initials (card 24 = row 16 + 8, row 16 = initials 8 + 8) */
.pk-roster { columns: 2 17rem; column-gap: var(--pk-inset); }
.pk-role { break-inside: avoid; margin: 0 0 var(--pk-inset); padding: 18px var(--pk-inset-sm) var(--pk-inset-sm); background: #fff; border: 1px solid var(--pk-line); border-radius: var(--pk-r-lg); }
.pk-roster h3 { font-size: 1rem; font-weight: 800; color: var(--pk-indigo); margin: 0 0 .75rem; padding-inline: 12px; break-after: avoid; }
.pk-roster ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.pk-roster li { display: flex; align-items: center; gap: .75rem; min-height: 52px; padding: 8px 12px 8px 8px; border-radius: var(--pk-r); background: var(--pk-bg); font-weight: 700; line-height: 1.35; }
.pk-avatar { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: var(--pk-r-sm); background: var(--pk-navy); color: var(--pk-yellow); font-size: .8rem; font-weight: 900; letter-spacing: .02em; }
.pk-roster li small { display: block; font-weight: 600; color: var(--pk-muted); font-size: .85rem; }
.e-con.pk-group__head { position: sticky; top: calc(var(--pk-header-h) + 1.5rem); align-self: flex-start; --align-self: flex-start; } /* the group name stays beside its long list */
.pk-group-title .elementor-heading-title { font-size: clamp(1.5rem, 2.6vw, 2.1rem); }


/* ---------- FAQ ---------- */
/* Elementor's accordion stylesheets load after this file and size everything through their own variables
   (including a per-element rule with 3 classes), so set those variables with one notch more specificity. */
body .elementor-element.pk-faq.elementor-widget-n-accordion {
	--n-accordion-title-font-size: clamp(1.05rem, 1.6vw, 1.2rem); --n-accordion-title-icon-order: 1; --n-accordion-title-justify-content: space-between;
	--n-accordion-padding: 8px 8px 8px 20px; --n-accordion-border-width: 0px; --n-accordion-icon-gap: 1rem; /* row 24 = icon 16 + 8 */
	--n-accordion-title-normal-color: var(--pk-navy); --n-accordion-title-hover-color: var(--pk-indigo); --n-accordion-title-active-color: var(--pk-navy);
}
.pk-faq .e-n-accordion { display: grid; gap: .5rem; }
.pk-faq .e-n-accordion-item { background: #fff; border: 1px solid var(--pk-line); border-radius: var(--pk-r-lg); overflow: hidden; transition: border-color var(--pk-dur); }
.pk-faq .e-n-accordion-item:hover { border-color: var(--pk-indigo); }
.pk-faq .e-n-accordion-item[open] { border-color: var(--pk-navy); }
.pk-faq .e-n-accordion-item .e-n-accordion-item-title { background: none; align-items: flex-start; } /* icon stays in the corner on two-line questions */
.pk-faq .e-n-accordion-item-title-header { padding-top: 11px; } /* centres the first line on the 48px icon */
.pk-faq .e-n-accordion-item-title:focus-visible { outline-offset: -3px; } /* the item clips overflow, so the ring sits inside */
.pk-faq .e-n-accordion-item-title-header { flex: 1; }
.pk-faq .e-n-accordion-item-title-text { font-weight: 800; letter-spacing: -0.01em; line-height: 1.35; }
/* one Lucide plus that turns into a cross, instead of Elementor's two swapped icons */
.pk-faq .e-n-accordion-item .e-n-accordion-item-title-icon { flex: none; justify-content: center; width: 48px; height: 48px; border-radius: var(--pk-r); background: var(--pk-bg); transition: background-color var(--pk-dur); }
.pk-faq .e-n-accordion-item-title-icon > * { display: none !important; }
.pk-faq .e-n-accordion-item-title-icon::before { content: ""; width: 1.15rem; height: 1.15rem; background: var(--pk-navy); mask: url(icons/plus.svg) center / contain no-repeat; transition: transform .35s var(--pk-ease); }
.pk-faq .e-n-accordion-item:hover .e-n-accordion-item-title-icon { background: var(--pk-tint); }
.pk-faq .e-n-accordion-item[open] .e-n-accordion-item-title-icon { background: var(--pk-yellow); }
.pk-faq .e-n-accordion-item[open] .e-n-accordion-item-title-icon::before { transform: rotate(135deg); }
.pk-faq .e-n-accordion-item > .e-con { padding: 4px 20px 20px !important; border: 0 !important; color: var(--pk-muted); } /* beats the per-element padding Elementor writes */
.e-con.pk-faq-aside { position: sticky; top: calc(var(--pk-header-h) + 2rem); --align-self: flex-start; align-self: flex-start; } /* .e-con beats Elementor's own position/stretch */

/* ---------- Registration (#daftar, and #pendaftaran on Kompetisi): the one place to register, kept to three parts so it
   reads at a glance (owner: the earlier version was confusing): a heading with one sentence holding the dates, three
   buttons, one link to the requirements. An indigo panel carrying the hero's dot grid faintly, so the page ends where it
   began. ---------- */
.pk-signup h2.elementor-heading-title { font-size: clamp(2.2rem, 4.8vw, 3.8rem); max-width: 16ch; }
.pk-register-note { margin: 0; max-width: 42ch; font-size: clamp(1.05rem, 1.4vw, 1.2rem); line-height: 1.55; color: var(--pk-on-dark); }

/* One button per level, stacked, in the register yellow (the colour of "Daftar" everywhere). Until a form link exists the
   buttons are dimmed labels, and a single line under them says when the forms open. */
.pk-reg { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--pk-inset-sm); }
.pk-reg__btn {
	display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 64px; padding: 0 1.4rem; border-radius: var(--pk-r);
	font-size: 1.2rem; font-weight: 900; letter-spacing: -0.01em; text-decoration: none !important;
}
.pk-reg__btn .pk-ico { width: 1.25rem; height: 1.25rem; transition: transform .3s var(--pk-ease); }
a.pk-reg__btn:hover .pk-ico { transform: translate(2px, -2px); }
.pk-reg a.pk-reg__btn:focus-visible { --pk-ring: #fff; }
/* not open yet: the site's "pending" look (dashed outline, no fill), readable white text, no hover */
.pk-reg__btn.is-soon { background: transparent; border: 1px dashed rgba(255, 204, 0, .7); color: #fff !important; cursor: default; }
.pk-reg__note { display: flex; align-items: center; gap: .5rem; margin: .9rem 0 0; font-weight: 700; color: var(--pk-on-dark); }
.pk-reg__note .pk-ico { color: var(--pk-yellow); }

/* ---------- Editor-only flags ---------- */
.pk-flag { display: none; }
/* a widget holding only an editor flag would still take a flex gap for visitors; drop the whole widget */
body:not(.logged-in) .elementor-widget:has(> .pk-flag):not(:has(> :not(.pk-flag))) { display: none; }
body.logged-in .pk-flag { display: block; margin: .75rem 0; padding: .6rem .85rem; border: 1px dashed #C2410C; background: #FFF7ED; color: #7C2D12; font-size: .85rem; line-height: 1.5; border-radius: var(--pk-r-sm); text-align: left; }
body.logged-in .pk-flag::before { content: "Perlu konfirmasi (hanya terlihat oleh admin): "; font-weight: 800; }

/* ---------- Header + mega menu. A floating bar inset from the screen edges, translucent white with blur,
   always in view. Navy text; the official yellow logo is kept as is (owner's choice).
   Panels open on hover with a mouse, on click/Enter otherwise; Escape, a click outside or focus leaving closes them. ---------- */
.pk-hd {
	position: fixed; z-index: 100; top: var(--pk-hd-top); left: 0; right: 0; width: min(1240px, calc(100% - 2 * var(--pk-hd-inset))); margin-inline: auto;
	border-radius: var(--pk-r-lg); box-shadow: var(--pk-shadow-2); /* it floats over the content */
}
/* The glass lives on a pseudo-element: backdrop-filter on .pk-hd itself would trap the fixed drawer and scrim inside it. */
.pk-hd::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: rgba(255, 255, 255, .78); border: 1px solid rgba(1, 9, 85, .1); -webkit-backdrop-filter: blur(16px) saturate(1.6); backdrop-filter: blur(16px) saturate(1.6); }
body { --pk-hd-top: 12px; --pk-hd-inset: 20px; --pk-hd-space: 100px; } /* space content must leave above it */
.admin-bar .pk-hd { top: calc(32px + var(--pk-hd-top)); }
.pk-hd__bar { padding: var(--pk-inset-sm) var(--pk-inset-sm) var(--pk-inset-sm) 20px; min-height: 64px; display: flex; align-items: center; gap: .75rem; } /* bar 24 = 16px buttons + 8 */
.pk-hd__brand { display: inline-flex; align-items: center; gap: .75rem; min-height: 48px; margin-right: auto; border-radius: var(--pk-r-sm); text-decoration: none; }
.pk-hd__logo { display: block; width: auto; height: 26px; }
.pk-hd__pikk { display: block; width: auto; height: 40px; }
.pk-hd__event { display: flex; padding-left: .75rem; border-left: 1px solid rgba(1, 9, 85, .25); color: var(--pk-navy); font-size: 1.02rem; font-weight: 900; line-height: 1; white-space: nowrap; }
.pk-hd__list { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: .15rem; }
.pk-hd__trigger, .pk-hd__link { display: inline-flex; align-items: center; gap: .5rem; min-height: 48px; padding: .5rem .9rem; border: 0; border-radius: var(--pk-r); background: transparent; color: var(--pk-navy); font: inherit; font-size: 1rem; font-weight: 800; line-height: 1.2; text-decoration: none; cursor: pointer; transition: background-color var(--pk-dur); }
.pk-hd__trigger { --pk-btn-fg: var(--pk-navy); }
.pk-hd__trigger:hover, .pk-hd__link:hover, .pk-hd__trigger[aria-expanded="true"] { --pk-btn-bg: var(--pk-tint); background: var(--pk-tint); color: var(--pk-navy); }
.pk-hd__link[aria-current="page"] { background: var(--pk-tint); box-shadow: inset 0 0 0 1px var(--pk-indigo); color: var(--pk-indigo); }
.pk-hd__trigger .pk-ico { width: 1rem; height: 1rem; transition: transform .25s var(--pk-ease); }
.pk-hd__trigger[aria-expanded="true"] .pk-ico { transform: rotate(180deg); }
.pk-hd__trigger:active, .pk-hd__link:active { background: var(--pk-tint-2); }
.pk-hd__cta { display: inline-flex; align-items: center; min-height: 48px; margin-left: .5rem; padding: .6rem 1.2rem; border-radius: var(--pk-r); font-weight: 800; text-decoration: none; }
/* Menu button (owner: no outline): a filled indigo-tint key, the same tint as the hover state of the desktop menu.
   Not yellow: yellow stays the colour of "Daftar". Open, it turns navy so "Tutup" reads as the active state. */
.pk-hd__burger { --pk-btn-bg: var(--pk-tint); --pk-btn-fg: var(--pk-navy); display: none; align-items: center; gap: .6rem; min-height: 48px; padding: .5rem 1rem; border: 0; border-radius: var(--pk-r); background: var(--pk-tint); color: var(--pk-navy); font: inherit; font-weight: 800; cursor: pointer; transition: background-color var(--pk-dur), color var(--pk-dur), transform var(--pk-dur) var(--pk-ease); }
.pk-hd__burger:hover { background: var(--pk-tint-2); color: var(--pk-navy); }
.pk-hd__burger[aria-expanded="true"] { --pk-btn-bg: var(--pk-navy); --pk-btn-fg: #fff; background: var(--pk-navy); color: #fff; }
.pk-hd__burger-icon, .pk-hd__burger-icon::before, .pk-hd__burger-icon::after { display: block; width: 18px; height: 2px; border-radius: 2px; background: currentColor; transition: transform .25s var(--pk-ease), opacity .2s; }
.pk-hd__burger-icon { position: relative; }
.pk-hd__burger-icon::before, .pk-hd__burger-icon::after { content: ""; position: absolute; left: 0; }
.pk-hd__burger-icon::before { top: -6px; } .pk-hd__burger-icon::after { top: 6px; }
.pk-hd__burger[aria-expanded="true"] .pk-hd__burger-icon { background: transparent; }
.pk-hd__burger[aria-expanded="true"] .pk-hd__burger-icon::before { transform: translateY(6px) rotate(45deg); }
.pk-hd__burger[aria-expanded="true"] .pk-hd__burger-icon::after { transform: translateY(-6px) rotate(-45deg); }

/* Mega panel: a solid card as wide as the floating bar, just below it; it overlays the page, so it is elevated while open. */
.pk-mm { position: absolute; left: 0; right: 0; top: calc(100% + 8px); background: #fff; border: 1px solid var(--pk-line); border-radius: var(--pk-r-lg); box-shadow: var(--pk-shadow-3); }
.pk-mm[hidden] { display: none; }
/* invisible hover bridge over the gap between the bar and the panel, so moving the mouse down keeps it open */
.pk-mm::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 20px; }
.pk-mm.is-open { animation: pk-mm-in .28s var(--pk-ease); }
@keyframes pk-mm-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
/* panel 24 = 16px "next stage" card + 8: the card sits 8px from the panel edge; the text columns add their own room */
.pk-mm__inner { padding: var(--pk-inset-sm); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2.1fr) minmax(0, 1fr); gap: var(--pk-inset); }
.pk-mm__intro { padding: 16px 0 16px 16px; }
.pk-mm__links { padding-block: var(--pk-inset-sm); }
.pk-mm__title { margin: 0 0 .35rem; font-size: 1.45rem; font-weight: 900; line-height: 1.15; color: var(--pk-navy); }
.pk-mm__desc { margin: 0 0 1rem; color: var(--pk-muted); }
.pk-mm__all, .pk-mm__aside a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: .5rem 1rem; border: 1px solid var(--pk-navy); border-radius: var(--pk-r); background: #fff; box-shadow: 0 3px 0 var(--pk-navy); color: var(--pk-navy); font-weight: 800; text-decoration: none; transition: transform var(--pk-dur) var(--pk-ease), box-shadow var(--pk-dur), background-color var(--pk-dur); }
.pk-mm__all:hover, .pk-mm__aside a:hover { transform: translateY(-1px); box-shadow: 0 4px 0 var(--pk-navy); }
.pk-mm__all:active, .pk-mm__aside a:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--pk-navy); }
.pk-mm__links { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: .75rem; } /* fills down then across: Kompetisi reads 'joining' left, 'stages' right */
.pk-mm__links li { break-inside: avoid; }
.pk-mm__link { display: flex; flex-direction: column; gap: .1rem; min-height: 44px; padding: .55rem .75rem; border-radius: var(--pk-r); color: var(--pk-navy); text-decoration: none; transition: background-color var(--pk-dur); }
.pk-mm__link:hover, .pk-mm__link[aria-current="page"] { background: var(--pk-bg); }
.pk-mm__link:hover .pk-mm__label { color: var(--pk-indigo); }
.pk-mm__label { font-weight: 800; }
.pk-mm__note { font-size: .9rem; line-height: 1.4; color: var(--pk-muted); }
.pk-mm__aside { align-self: stretch; padding: 16px; border-radius: var(--pk-r); background: var(--pk-navy); color: #fff; }
.pk-mm__photo { display: block; width: calc(100% + 16px); max-width: none; height: 96px; margin: -8px -8px 12px; object-fit: cover; border-radius: var(--pk-r-sm); }
.pk-mm__kicker { margin: 0 0 .35rem; font-size: .9rem; font-weight: 700; color: var(--pk-yellow); }
.pk-mm__stage { margin: 0; font-size: 1.25rem; font-weight: 900; line-height: 1.2; }
.pk-mm__when { margin: .3rem 0 .75rem; color: var(--pk-on-dark); }
.pk-mm__aside a { border-color: #B38F00; background: var(--pk-yellow); box-shadow: 0 3px 0 #B38F00; }
.pk-mm__aside a:hover { box-shadow: 0 4px 0 #B38F00; } .pk-mm__aside a:active { box-shadow: 0 1px 0 #B38F00; }
:is(.pk-mm, .pk-dr) { --pk-ring: var(--pk-indigo); } /* white panels: back to the light-surface ring */
.pk-hd__scrim { position: fixed; inset: 0; z-index: -2; /* under the header glass (-1), over the page */ background: rgba(1,9,85,.35); }
.pk-hd__scrim[hidden] { display: none; }

/* Mobile drawer: every group open at once, so nothing hides behind a second tap. */
.pk-dr { position: fixed; left: var(--pk-hd-inset); right: var(--pk-hd-inset); bottom: var(--pk-hd-top); top: 88px; margin-top: 8px; z-index: 1; overflow-y: auto; padding: var(--pk-inset-sm); background: #fff; border: 1px solid var(--pk-line); border-radius: var(--pk-r-lg); box-shadow: var(--pk-shadow-3); display: grid; gap: 1.25rem; align-content: start; } /* 24 = 16px CTA and next-stage card + 8 */
.pk-dr__list { padding: 12px 16px 0; }
.pk-dr .pk-mm__aside { border-radius: var(--pk-r); }
.pk-dr[hidden] { display: none; }
.pk-dr__list { list-style: none; margin: 0; display: grid; gap: 1.5rem; }
.pk-dr__list ul { list-style: none; margin: 0; padding: 0; }
.pk-dr__title { display: flex; align-items: center; min-height: 44px; margin: 0 0 .25rem; font-size: 1.25rem; font-weight: 900; color: var(--pk-navy); } /* a group without its own page is plain text, same look */
.pk-dr__title a { display: inline-flex; align-items: center; min-height: 44px; font-size: 1.25rem; font-weight: 900; color: var(--pk-navy); text-decoration: none; }
.pk-dr__link { display: flex; align-items: center; min-height: 48px; border-bottom: 1px solid var(--pk-line); color: var(--pk-navy); font-weight: 700; text-decoration: none; }
.pk-dr__link[aria-current="page"] { color: var(--pk-indigo); }
.pk-dr .pk-hd__cta { justify-content: center; margin: 0; }
body.pk-lock { overflow: hidden; }

/* ---------- Floating buttons: WhatsApp (green, the contact shortcut) sits alone at the top of the page; once the page is
   scrolled it moves up and "back to top" (white, so it shows over the indigo panels and footer too) slides in under it.
   Radius 16, like every button. ---------- */
.pk-float { position: fixed; z-index: 90; right: 20px; bottom: 20px; width: 56px; height: 56px; }
.pk-float__btn {
	--pk-btn-bg: #fff; --pk-btn-fg: var(--pk-navy);
	position: absolute; right: 0; bottom: 0; display: grid; place-items: center; width: 56px; height: 56px; padding: 0; border: 0; border-radius: var(--pk-r); cursor: pointer;
	box-shadow: var(--pk-shadow-2);
	transition: translate .5s var(--pk-ease), scale .2s var(--pk-ease), opacity .35s var(--pk-ease), visibility .35s, background-color var(--pk-dur);
}
.pk-float__btn .pk-ico { width: 26px; height: 26px; vertical-align: 0; }
.pk-float__btn:active { scale: .94; }
/* WhatsApp green (owner's request): the one colour outside the indigo/yellow pair, because people find the WhatsApp
   button by its green. A shade darker than the brand #25D366 so the white glyph reaches 3.1:1 (brand green gives 2:1). */
.pk-float__wa { background: #1DA851; color: #fff !important; white-space: nowrap; }
.pk-float__wa:hover { background: #178F45; }
/* no number yet (PIKK 2027 › Pengaturan › Kontak panitia): not a link, so no hover or press feedback */
.pk-float__wa.is-soon { cursor: default; }
.pk-float__wa.is-soon:hover { background: #1DA851; }
.pk-float__wa.is-soon:active { scale: 1; }
.pk-float__top { background: #fff; color: var(--pk-navy); outline: 1px solid var(--pk-line); outline-offset: -1px; opacity: 0; visibility: hidden; translate: 0 18px; scale: .8; }
.pk-float__top:hover { background: var(--pk-navy); color: #fff; }
.pk-float.is-scrolled .pk-float__wa { translate: 0 calc(-100% - 10px); }
.pk-float.is-scrolled .pk-float__top { opacity: 1; visibility: visible; translate: 0 0; scale: 1; }
body.pk-lock .pk-float { opacity: 0; pointer-events: none; } /* hidden while the menu drawer is open */

/* ---------- Footer ---------- */
.pk-footer { display: block; margin: 0 var(--pk-panel-x) var(--pk-panel-x); border-radius: var(--pk-r-lg); overflow: hidden; background: var(--pk-navy); color: var(--pk-on-dark); font-size: .97rem; } /* a panel like the indigo sections */
.pk-footer a { color: #fff; text-decoration: none; }
.pk-footer a:hover { color: var(--pk-yellow); }
.pk-footer h2.elementor-heading-title { font-size: 1rem; font-weight: 800; color: var(--pk-yellow); }
.pk-footer :is(.pk-menu, .pk-contact) { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.pk-footer .pk-menu a { display: inline-flex; align-items: center; min-height: 44px; } /* thumb-sized tap targets */
.pk-footer .pk-menu { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1.5rem; } /* page links in two columns, so the footer stays short */
.pk-footer .pk-contact li { display: grid; gap: .1rem; }
.pk-footer .pk-contact li > span { display: inline-flex; align-items: center; gap: .4rem; font-size: .85rem; opacity: .8; }
.pk-footer address { font-style: normal; }
.pk-footer .pk-empty { color: var(--pk-on-dark); font-style: italic; }
.pk-footer-logo img { max-height: 72px; width: auto; }
.pk-footer-bottom { border-top: 1px solid var(--pk-ink-line); font-size: .88rem; }

/* ---------- Single announcement & archives ---------- */
.single-post .site-main, .archive .site-main, .search .site-main, .error404 .site-main { max-width: 780px; margin-inline: auto; padding: clamp(3rem, 7vw, 5rem) 20px; }
.single-post .page-header .entry-title, .archive .page-header .entry-title, .error404 .page-header .entry-title { font-size: clamp(2.1rem, 5vw, 3.3rem); color: var(--pk-navy); }
.pk-post-meta { font-size: .9rem; font-weight: 700; color: var(--pk-muted); border-bottom: 1px solid var(--pk-line); padding-bottom: 1rem; margin-bottom: 2rem; }
.pk-post-back { margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--pk-line); font-weight: 800; }
.pk-post-back a { display: inline-flex; align-items: center; gap: .45rem; min-height: 44px; }
.single-post .page-content h2 { font-size: 1.55rem; margin: 2.2rem 0 .75rem; color: var(--pk-navy); }
.pk-summary { font-size: 1.22rem; font-weight: 700; color: var(--pk-navy); }
.archive article.post { padding: 1.25rem 0; border-bottom: 1px solid var(--pk-line); }
.archive article.post .entry-title a { color: var(--pk-navy); text-decoration: none; }
.pk-empty { color: var(--pk-muted); font-style: italic; margin: 0; }
.pk-ink .pk-empty { color: var(--pk-on-dark); }

/* ---------- Scroll reveal: guides reading order, one direction only. Content stays visible without JS. ---------- */
.pk-js .pk-reveal > .e-con-inner > *, .pk-js .pk-reveal:not(.e-con-boxed) > * { transition: opacity .8s var(--pk-ease), transform .8s var(--pk-ease); }
.pk-js .pk-reveal:not(.is-in) > .e-con-inner > *, .pk-js .pk-reveal:not(.is-in):not(.e-con-boxed) > * { opacity: 0; transform: translateY(24px); }
.pk-js .pk-reveal > .e-con-inner > :nth-child(2), .pk-js .pk-reveal:not(.e-con-boxed) > :nth-child(2) { transition-delay: .08s; }
.pk-js .pk-reveal > .e-con-inner > :nth-child(n+3), .pk-js .pk-reveal:not(.e-con-boxed) > :nth-child(n+3) { transition-delay: .16s; }
.pk-stagger > .e-con { transition: opacity .7s var(--pk-ease), transform .7s var(--pk-ease); }
.pk-js .pk-reveal:not(.is-in) .pk-stagger > .e-con { opacity: 0; transform: translateY(28px); }
.pk-stagger > .e-con:nth-child(2) { transition-delay: .1s; } .pk-stagger > .e-con:nth-child(n+3) { transition-delay: .2s; }

/* ---------- Preloader (first page of a visit; the script in frontend.php sets pk-loading / pk-loaded).
   Same paper and dot grid as the hero, so lifting it reads as the page continuing, not a new screen. ---------- */
.pk-loader { display: none; }
.pk-loading .pk-loader {
	position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center;
	background: radial-gradient(circle, rgba(1, 9, 85, .14) 1.2px, transparent 1.7px) 0 0 / 22px 22px, var(--pk-bg);
	transition: opacity .45s var(--pk-ease), visibility .45s;
}
.pk-loading body { overflow: hidden; }
.pk-loaded .pk-loader { opacity: 0; visibility: hidden; }
.pk-loader__in { display: grid; justify-items: center; gap: .35rem; transition: transform .45s var(--pk-ease); }
.pk-loaded .pk-loader__in { transform: translateY(-12px) scale(.96); }
.pk-loader__sticker {
	display: block; width: 112px; margin-bottom: .9rem; --r: -10deg;
	filter: drop-shadow(0 1px 0 rgba(1, 9, 85, .18)) drop-shadow(0 12px 14px rgba(1, 9, 85, .3));
	animation: pk-stick .7s cubic-bezier(.2, 1.6, .4, 1) backwards, pk-sway 2.4s ease-in-out .7s infinite;
	transform: rotate(var(--r));
}
.pk-loader__sticker svg { display: block; width: 100%; height: auto; overflow: visible; }
@keyframes pk-sway { 0%, 100% { transform: rotate(-10deg) translateY(0); } 50% { transform: rotate(8deg) translateY(-6px); } }
.pk-loader__brand { margin: 0; font-size: 1.6rem; font-weight: 900; letter-spacing: -0.03em; line-height: 1; color: var(--pk-navy); }
/* the research steps roll up one by one (the countdown digits' motion), the marker stroke writes in under the last */
.pk-loader__words { position: relative; isolation: isolate; display: flex; flex-direction: column; height: 1.5em; margin: 0; overflow: hidden; font-size: 1.05rem; font-weight: 800; line-height: 1.5; color: var(--pk-indigo); text-align: center; }
.pk-loader__words span { display: block; animation: pk-steps 1.2s cubic-bezier(.3, 1.35, .5, 1) .15s both; }
@keyframes pk-steps { 0%, 22% { transform: translateY(0); } 33%, 55% { transform: translateY(-100%); } 66%, 100% { transform: translateY(-200%); } }
.pk-loader__words::after {
	content: ""; position: absolute; left: 50%; bottom: .05em; width: 6.2em; height: .4em; translate: -50% 0; z-index: -1;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 24' preserveAspectRatio='none'%3E%3Cpath d='M3 14C30 8 70 6 110 8s65 7 87 3' fill='none' stroke='%23FFCC00' stroke-width='9' stroke-linecap='round'/%3E%3C/svg%3E") left center / 100% 100% no-repeat;
	clip-path: inset(0 100% 0 0); animation: pk-wipe .5s var(--pk-ease) 1.15s forwards;
}
@keyframes pk-wipe { to { clip-path: inset(0 0 0 0); } }
/* the hero's own entrance waits under the loader, then plays as it lifts */
.pk-loading :is(.pk-hero, .pk-pagehero) :is(*, *::before, *::after) { animation-play-state: paused !important; }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
	/* the mega menu needs room; below this the drawer takes over */
	.pk-hd__nav { display: none; }
	.pk-hd__burger { display: inline-flex; }
}
/* Home hero from tablet up: text left, photo card right. The card keeps its width (38%, 42% on tablets) and the text
   column takes what is left, so the gap never pushes the card onto a row of its own (it did at 1025-1199px). */
@media (min-width: 768px) { .e-con.pk-hero__copy { flex: 1 1 0; min-width: 0; } .e-con.pk-hero__card { flex-shrink: 0; } }
/* Tablets (owner, 28 Oct 2026): the photo stays on the right, so the hero type steps down to fit the narrower column */
@media (min-width: 768px) and (max-width: 1024px) {
	.pk-hero__title .elementor-heading-title { font-size: clamp(3.4rem, 7.6vw, 4.9rem); }
	.pk-hero__sub .elementor-heading-title { font-size: clamp(1.15rem, 2.2vw, 1.4rem); }
	.pk-hero__lede p { font-size: 1rem; }
	.pk-theme__nodes { --g: 1.4rem; }
	.pk-theme__nodes b { padding: .35rem .65rem; font-size: .82rem; }
	.pk-free-note { font-size: 1.8rem; }
	/* a squarer photo: the card reaches up beside the text instead of leaving the top right empty */
	.pk-hero__card .pk-hero__media img { aspect-ratio: 1 / 1; }
	.pk-hero__card .pk-cd__cell b { font-size: 1.6rem; }
	.pk-hero__card .pk-cd__cell small { font-size: .72rem; }
	.pk-stickers--card .pk-sticker--n0 { top: -28px; left: -22px; --size: 84px; }
	.pk-stickers--card .pk-sticker--n1 { right: -14px; --size: 72px; }
	.pk-stickers--card .pk-sticker--n2 { left: -20px; --size: 64px; }
}
@media (min-width: 768px) and (max-width: 900px) { .pk-theme__nodes { --g: 1rem; } .pk-theme__nodes b { padding: .3rem .5rem; font-size: .78rem; } } /* the four nodes stay on one row */
@media (max-width: 1024px) {
	.pk-figures dl { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.pk-pagehero .pk-hero__copy, .pk-pagehero .pk-hero__media { flex: none; width: 100%; }
	.pk-pagehero .pk-hero__media img { aspect-ratio: 16 / 9; }
}
@media (max-width: 767px) {
	body { font-size: 1rem; }
	body { --pk-hd-top: 8px; --pk-hd-inset: 10px; --pk-hd-space: 84px; --pk-header-h: 76px; }
	.pk-hd__bar { gap: .5rem; padding-left: 16px; }
	.pk-dr { top: 72px; }
	.pk-hd__bar > .pk-hd__cta { display: none; } /* the drawer and the floating link carry it on phones */
	.pk-hd__logo { height: 22px; }
	.pk-hd__pikk { height: 36px; }
	.pk-figures dl { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.pk-figures dl > div { min-height: 10rem; padding: 16px; }
	.pk-figures dl > div::before { top: 14px; right: 14px; width: 44px; height: 44px; }
	.pk-cd__cell b { font-size: 1.65rem; }
	.pk-hero__card .pk-hero__media img, .pk-pagehero .pk-hero__media img { aspect-ratio: 16 / 10; }
	/* phones: only the card stickers, smaller and tucked in so nothing leaves the screen */
	/* phones: the title stickers fill the empty right side beside the subtitle (owner: the hero felt empty) */
	.pk-stickers--title .pk-sticker--n0 { top: 118px; left: auto; right: 68px; --size: 88px; }
	.pk-stickers--title .pk-sticker--n1 { top: 134px; left: auto; right: -2px; --size: 62px; }
	.pk-stickers--card .pk-sticker--n0 { top: -26px; left: -12px; --size: 84px; }
	.pk-stickers--card .pk-sticker--n1 { top: 30%; right: -12px; --size: 72px; }
	.pk-stickers--card .pk-sticker--n2 { display: none; }
	.pk-stickers--page .pk-sticker--n0 { top: -26px; left: -12px; --size: 76px; }
	.pk-stickers--page .pk-sticker--n1 { right: -10px; --size: 66px; }
	.pk-stickers--page .pk-sticker--emc2 { --size: 100px; right: -14px; }
	.pk-ic::after { top: 16px; right: 16px; width: 40px; height: 40px; }
	.pk-ic > .elementor-widget-heading { padding-right: 48px; }
	/* phones: the action bar and the info card stack their parts, keeping the same 8px / 16px insets */
	.pk-hero .e-con.pk-actions { width: 100%; }
	.pk-hero .pk-actions > .elementor-element { flex: 1 1 100%; }
	.pk-hero .pk-actions :is(.elementor-button, .pk-btn) { width: 100%; }
	.pk-hero .pk-actions .pk-btn--pending { justify-content: flex-start; padding-block: .5rem; }
	/* phones: the two facts stack, the note stays at the right */
	.pk-hero .pk-facts { padding-right: 1.1rem; }
	.pk-facts ul { flex-direction: column; align-items: flex-start; }
	.pk-facts li + li { padding-left: 0; border-left: 0; }
	.pk-free-note { font-size: 1.9rem; }
	.pk-tl__item { width: min(72vw, 16rem); }
	.pk-tl__head { align-items: flex-end; }
	.pk-split { flex-direction: column; min-height: 0; }
	.pk-split span { flex: none !important; flex-direction: row; align-items: baseline; justify-content: space-between; }
	.e-con.pk-faq-aside { position: static; }
	.e-con.pk-group__head { position: static; }
	.pk-table th, .pk-table td { padding: .75rem .65rem; font-size: .95rem; }
	.pk-table td.pk-weight { min-width: 6.5rem; width: auto; font-size: 1.2rem; }
	.pk-table td.pk-weight[style*="--w"]::before, .pk-table td.pk-weight[style*="--w"]::after { left: .65rem; top: calc(.75rem + .72rem - 3px); }
	.pk-table td.pk-weight[style*="--w"]::before { right: 3.2rem; }
	.pk-table td.pk-weight[style*="--w"]::after { width: calc((100% - 3.85rem) * var(--w) / 40); max-width: calc(100% - 3.85rem); }
	.pk-table tbody th[scope="row"] { width: auto; }
	.pk-prize-table thead th:first-child { width: 5.75rem; }
	.pk-prize-table :is(th, td) { white-space: normal; }
	.pk-table .pk-money { font-size: 1rem; }
	.pk-float { right: 14px; bottom: 14px; width: 52px; height: 52px; }
	.pk-float__btn { width: 52px; height: 52px; }
	.pk-news__item { grid-template-columns: auto minmax(0, 1fr); gap: 0 1rem; }
	.pk-news__go { display: none; }
	.pk-news__date { width: 4.75rem; min-height: 5rem; }
	.pk-news__date b { font-size: 1.9rem; }
	.pk-news__date span { font-size: .75rem; text-align: center; }
	.pk-news__img { width: 6rem; }
	.pk-news__excerpt { -webkit-line-clamp: 3; }
}
@media (max-width: 389px) {
	/* small phones: brand and Menu button share less than 340px */
	.pk-hd__brand { gap: .5rem; }
	.pk-hd__event { padding-left: .5rem; font-size: .95rem; }
	.pk-hd__logo { height: 19px; }
	.pk-hd__pikk { height: 32px; }
	/* owner: on small phones the Menu button is the icon alone, a 48px square (the word stays for screen readers) */
	.pk-hd__burger { width: 48px; padding: 0; justify-content: center; gap: 0; font-size: 0; }
}
@media (max-width: 782px) { .admin-bar .pk-hd { top: calc(46px + var(--pk-hd-top)); } }
@media (max-width: 600px) { .admin-bar .pk-hd { top: var(--pk-hd-top); } }

@media (prefers-reduced-motion: reduce) {
	@view-transition { navigation: none; }
	*, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; transition-delay: 0s !important; scroll-behavior: auto !important; }
	.pk-w > span { transform: none; }
	.pk-js .pk-hero .pk-hero__media img, .pk-js .pk-hero__card, .pk-js .e-con.pk-section.pk-ink{ animation: none; }
}
@media print {
	.pk-hd, .pk-footer, .pk-actions, .pk-float, .pk-tl__nav { display: none !important; }
	.pk-ink { background: #fff !important; color: #000 !important; }
	.pk-js .pk-reveal *, .pk-tl__item { opacity: 1 !important; transform: none !important; }
}

/* notes under a report-outline item (Sistematika Laporan SD) */
.pk-steps--notes small { display: block; margin-top: .15rem; color: var(--pk-muted); font-size: .88em; font-weight: 400; }
/* Panduan: all downloads in one card, rows split by hairlines instead of a card each (owner, 27 Oct 2026) */
.pk-dl-card .pk-downloads { gap: 0; }
.pk-dl-card .pk-dl { padding: .55rem 0; border: 0; border-top: 1px solid var(--pk-line); border-radius: 0; background: none; }
.pk-dl-card .pk-dl:first-child { border-top: 0; }
.pk-dl-card .pk-dl::before { width: 44px; min-height: 44px; }