diff --git a/src/app/(app)/karrier/career-config.ts b/src/app/(app)/karrier/career-config.ts
new file mode 100644
index 0000000..0245bb3
--- /dev/null
+++ b/src/app/(app)/karrier/career-config.ts
@@ -0,0 +1,22 @@
+import type { CareerSetting } from "@/payload-types"
+import type { ApplicationConfig } from "./types"
+
+/**
+ * A "Karrier oldal" globális beállításból egyetlen, a nézetben közvetlenül
+ * használható objektumot állít elő, hogy a komponensekben ne kelljen újra és
+ * újra a nullable CMS mezőkkel bajlódni.
+ */
+export function resolveApplicationConfig(
+ settings: CareerSetting | null,
+ isEn: boolean,
+ closedTextFallback: string,
+): ApplicationConfig {
+ const closedText = isEn ? settings?.applicationsClosedTextEng : settings?.applicationsClosedText
+
+ return {
+ isOpen: settings?.applicationsOpen !== false,
+ useBuiltInForm: (settings?.applicationMode ?? "builtIn") === "builtIn",
+ googleFormUrl: settings?.googleFormUrl?.trim() || null,
+ closedText: closedText?.trim() || closedTextFallback,
+ }
+}
diff --git a/src/app/(app)/karrier/career-page-client.tsx b/src/app/(app)/karrier/career-page-client.tsx
new file mode 100644
index 0000000..a82c9ec
--- /dev/null
+++ b/src/app/(app)/karrier/career-page-client.tsx
@@ -0,0 +1,145 @@
+"use client"
+
+import type { CareerSetting, Recruitment } from "@/payload-types"
+import { RichText } from "@payloadcms/richtext-lexical/react"
+import { resolveFormConfig } from "@/lib/career-form"
+import { resolveApplicationConfig } from "./career-config"
+import ApplicationForm from "./components/application-form"
+import ApplyButton from "./components/apply-button"
+import CareerFaq from "./components/career-faq"
+import CareerGroup from "./components/career-group"
+import CareerSidebar from "./components/career-sidebar"
+import { careerTexts, isEnglish } from "./translations"
+import { useCareerPage } from "./use-career-page"
+
+interface CareerPageClientProps {
+ recruitmentData: Recruitment[]
+ careerSettings: CareerSetting | null
+ lang: string
+}
+
+export default function CareerPageClient({
+ recruitmentData,
+ careerSettings,
+ lang,
+}: CareerPageClientProps) {
+ const isEn = isEnglish(lang)
+ const texts = careerTexts(isEn)
+ const application = resolveApplicationConfig(
+ careerSettings,
+ isEn,
+ texts.applicationsClosed,
+ )
+ const intro = isEn ? careerSettings?.introEng : careerSettings?.intro
+ const faqs = careerSettings?.faqs ?? []
+ const hasFaqs = faqs.some((item) =>
+ Boolean(
+ (isEn ? item.questionEng : item.question)?.trim() &&
+ (isEn ? item.answerEng : item.answer),
+ ),
+ )
+
+ const {
+ formRef,
+ openGroupIds,
+ openPositionKeys,
+ selectedPosition,
+ toggleGroup,
+ togglePosition,
+ openGroupAndScroll,
+ applyForPosition,
+ scrollToForm,
+ } = useCareerPage()
+
+ return (
+
+
+
+
+ {texts.title}
+
+
+ {intro ? (
+
+
+
+ ) : (
+
+ {texts.subtitle}
+
+ )}
+
+
+
+
+ {recruitmentData.map((group) => (
+ toggleGroup(group.id)}
+ onTogglePosition={togglePosition}
+ onApply={applyForPosition}
+ />
+ ))}
+
+
+
+
+
+ {!application.isOpen ? (
+
+
+ {application.closedText}
+
+
+ ) : application.useBuiltInForm ? (
+
+ ) : (
+ application.googleFormUrl && (
+
+
+ {texts.interested}
+
+
+
+ )
+ )}
+
+
+
+
+
+
+
+ )
+}
diff --git a/src/app/(app)/karrier/career-theme.css b/src/app/(app)/karrier/career-theme.css
new file mode 100644
index 0000000..1bbb856
--- /dev/null
+++ b/src/app/(app)/karrier/career-theme.css
@@ -0,0 +1,71 @@
+/* Career colors are independent of the legacy global utility overrides. */
+@theme inline {
+ --color-career-page: var(--career-page);
+ --color-career-surface: var(--career-surface);
+ --color-career-inset: var(--career-inset);
+ --color-career-hover: var(--career-hover);
+ --color-career-text: var(--career-text);
+ --color-career-muted: var(--career-muted);
+ --color-career-accent: var(--career-accent);
+ --color-career-accent-soft: var(--career-accent-soft);
+ --color-career-border: var(--career-border);
+ --color-career-input-border: var(--career-input-border);
+ --color-career-field: var(--career-field);
+ --color-career-action: var(--career-action);
+ --color-career-action-hover: var(--career-action-hover);
+ --color-career-on-action: var(--career-on-action);
+}
+
+.career-page {
+ --career-page: #000000;
+ --career-surface: #230505;
+ --career-inset: #140404;
+ --career-hover: #3b1015;
+ --career-text: #fafafa;
+ --career-muted: #c7babb;
+ --career-accent: #ff8290;
+ --career-accent-soft: #421820;
+ --career-border: #663b40;
+ --career-input-border: #927478;
+ --career-field: #080808;
+ --career-action: #d51028;
+ --career-action-hover: #b20e21;
+ --career-on-action: #ffffff;
+ background-color: var(--career-page);
+ color: var(--career-text);
+}
+
+html.light .career-page {
+ --career-page: #ffffff;
+ --career-surface: #f7f7f8;
+ --career-inset: #ffffff;
+ --career-hover: #f0e7e9;
+ --career-text: #211c22;
+ --career-muted: #59515a;
+ --career-accent: #b51025;
+ --career-accent-soft: #f9e4e7;
+ --career-border: #dad6d8;
+ --career-input-border: #82777b;
+ --career-field: #ffffff;
+}
+
+/* CMS paragraphs and headings follow their surrounding text hierarchy. */
+.career-page .rich-text-content :is(p, h1, h2, h3, h4, h5, h6, li) {
+ color: inherit;
+}
+
+.career-page .rich-text-content a {
+ color: var(--career-accent);
+ text-decoration: underline;
+ text-underline-offset: 3px;
+}
+
+.career-page :is(button, a, input, textarea, select, [tabindex]):focus-visible {
+ outline: 2px solid var(--career-accent);
+ outline-offset: 3px;
+}
+
+/* Inset outlines stay visible inside clipped accordion cards. */
+.career-page button[aria-expanded]:focus-visible {
+ outline-offset: -3px;
+}
diff --git a/src/app/(app)/karrier/components/application-form.tsx b/src/app/(app)/karrier/components/application-form.tsx
new file mode 100644
index 0000000..5f1df3f
--- /dev/null
+++ b/src/app/(app)/karrier/components/application-form.tsx
@@ -0,0 +1,403 @@
+"use client"
+
+import { AlertCircle, Loader2, Paperclip, X } from "lucide-react"
+import { useEffect, useRef, useState } from "react"
+import {
+ MAX_CV_SIZE,
+ validateAnswers,
+ type Answer,
+ type FormConfig,
+ type FormQuestion,
+} from "@/lib/career-form"
+import { applicationErrorText, applicationFormTexts } from "../translations"
+import type { SelectedPosition } from "../types"
+import { HoneypotField } from "./form-field"
+import SuccessCheck from "./success-check"
+
+interface ApplicationFormProps {
+ lang: string
+ isEn: boolean
+ selectedPosition: SelectedPosition | null
+ initialConfig: FormConfig
+}
+const INPUT_CLASS =
+ "w-full rounded-lg border border-career-input-border bg-career-field px-4 py-2.5 text-career-text placeholder:text-career-muted focus:border-career-accent focus:outline-none focus:ring-1 focus:ring-career-accent"
+
+function Question({
+ question: q,
+ value,
+ onChange,
+ isEn,
+ error,
+}: {
+ question: FormQuestion
+ value?: Answer
+ onChange: (value: Answer) => void
+ isEn: boolean
+ error: boolean
+}) {
+ const id = `application-${q.key}`
+ const label = isEn ? q.labelEng : q.label
+ const hint = isEn ? q.hintEng : q.hint
+ const labelContent = (
+ <>
+ {label}
+ {q.required ? (
+ " *"
+ ) : (
+
+ {" "}
+ ({isEn ? "optional" : "opcionális"})
+
+ )}
+
+ )
+ const common = {
+ id,
+ name: q.key,
+ "aria-invalid": error || undefined,
+ "aria-describedby": hint ? `${id}-hint` : undefined,
+ }
+ const onMultiChange = (key: string, checked: boolean) => {
+ const selected = Array.isArray(value) ? value : []
+ onChange(
+ checked ? [...selected, key] : selected.filter((v) => v !== key),
+ )
+ }
+ return (
+