/* Tampilan CNC Works untuk halaman di luar SPA /kerja (login, galat, pesan).
   Token sama dengan frontend/src/tema/token.css. Tanpa ketergantungan ke aset Frappe. */
@font-face {
	font-family: 'Plus Jakarta Sans';
	src: url('/assets/cncworks/fonts/plus-jakarta-sans-latin.woff2') format('woff2');
	font-weight: 200 800;
	font-display: swap;
}
:root {
	--kertas: #F6F7F4; --permukaan: #FFFFFF; --tinta: #1C2430; --tinta-2: #5B6573;
	--garis: #DCE0DA; --nila: #26447A; --nila-lembut: #E2E8F3; --kunyit: #D9A21B;
	--bahaya: #B22E2E; --bahaya-lembut: #FAE4E2; --sukses: #1F7A4D; --sukses-lembut: #DEF1E6;
	--bayang: 0 1px 2px rgb(28 36 48 / .06), 0 8px 24px -8px rgb(28 36 48 / .18);
	color-scheme: light;
}
@media (prefers-color-scheme: dark) {
	:root {
		--kertas: #12161C; --permukaan: #1A2029; --tinta: #E6E9EE; --tinta-2: #A0AAB8;
		--garis: #2F3845; --nila: #8FA9DA; --nila-lembut: #25324B; --kunyit: #E8B743;
		--bahaya: #EF8076; --bahaya-lembut: #482020; --sukses: #6EC896; --sukses-lembut: #183A2A;
		--bayang: 0 1px 2px rgb(0 0 0 / .4), 0 10px 28px -8px rgb(0 0 0 / .6);
		color-scheme: dark;
	}
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
	font-family: 'Plus Jakarta Sans', 'Segoe UI', system-ui, -apple-system, Roboto, Arial, sans-serif;
	background: var(--kertas); color: var(--tinta); font-size: 15px; line-height: 1.5;
	-webkit-font-smoothing: antialiased;
}
.cnc-halaman {
	min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column;
	align-items: center; justify-content: center; padding: 24px 16px;
	background:
		radial-gradient(900px 420px at 50% -120px, var(--nila-lembut), transparent 70%),
		var(--kertas);
}
.cnc-merek { display: flex; align-items: center; gap: 12px; margin-bottom: 24px; text-decoration: none; color: var(--tinta); }
.cnc-merek img { width: 44px; height: 44px; display: block; }
.cnc-merek span { font-size: 24px; font-weight: 800; letter-spacing: -.02em; }
.cnc-merek span b { color: var(--kunyit); font-weight: 800; }
.cnc-kartu {
	width: 100%; max-width: 400px; background: var(--permukaan); border: 1px solid var(--garis);
	border-radius: 16px; box-shadow: var(--bayang); padding: 28px 24px;
}
.cnc-kartu h1 { margin: 0 0 4px; font-size: 21px; font-weight: 800; letter-spacing: -.01em; }
.cnc-kartu .sub { margin: 0 0 20px; color: var(--tinta-2); font-size: 14px; }
.cnc-bidang { margin-bottom: 16px; }
.cnc-bidang label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 6px; }
.cnc-input-wadah { position: relative; }
.cnc-input {
	width: 100%; height: 46px; padding: 0 14px; font: inherit; color: var(--tinta);
	background: var(--kertas); border: 1.5px solid var(--garis); border-radius: 10px; outline: none;
	transition: border-color .15s, box-shadow .15s;
}
.cnc-input::placeholder { color: var(--tinta-2); opacity: .7; }
.cnc-input:focus { border-color: var(--nila); box-shadow: 0 0 0 3px var(--nila-lembut), 0 0 0 4px var(--kunyit); }
.cnc-input.punya-aksi { padding-right: 84px; }
.cnc-lihat {
	position: absolute; right: 6px; top: 6px; height: 34px; padding: 0 10px; border: 0; border-radius: 8px;
	background: transparent; color: var(--nila); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer;
}
.cnc-lihat:hover { background: var(--nila-lembut); }
.cnc-tombol {
	width: 100%; height: 48px; border: 0; border-radius: 10px; background: #26447A; color: #fff;
	font: inherit; font-weight: 700; font-size: 15px; cursor: pointer; display: inline-flex;
	align-items: center; justify-content: center; gap: 8px; text-decoration: none;
	transition: filter .15s, transform .05s;
}
@media (prefers-color-scheme: dark) { .cnc-tombol { background: #3B5C9E; } }
.cnc-tombol:hover { filter: brightness(1.1); }
.cnc-tombol:active { transform: translateY(1px); }
.cnc-tombol:focus-visible, .cnc-lihat:focus-visible, .cnc-tautan:focus-visible { outline: 3px solid var(--kunyit); outline-offset: 2px; }
.cnc-tombol[disabled] { opacity: .65; cursor: progress; }
.cnc-tombol.sekunder { background: transparent; color: var(--nila); border: 1.5px solid var(--garis); }
.cnc-tautan { color: var(--nila); font: inherit; font-weight: 600; text-decoration: none; background: none; border: 0; padding: 0; cursor: pointer; }
.cnc-tautan:hover { text-decoration: underline; }
.cnc-baris { display: flex; justify-content: flex-end; margin: -6px 0 18px; font-size: 13px; }
.cnc-pesan { display: none; margin-bottom: 16px; padding: 10px 12px; border-radius: 10px; font-size: 13.5px; font-weight: 500; }
.cnc-pesan.tampil { display: block; }
.cnc-pesan.galat { background: var(--bahaya-lembut); color: var(--bahaya); }
.cnc-pesan.ok { background: var(--sukses-lembut); color: var(--sukses); }
.cnc-kaki { margin-top: 20px; font-size: 12.5px; color: var(--tinta-2); text-align: center; }
.cnc-kode { font-size: 64px; font-weight: 800; letter-spacing: -.04em; color: var(--nila); line-height: 1; margin: 0 0 8px; }
.cnc-kode i { color: var(--kunyit); font-style: normal; }
.cnc-teks-tengah { text-align: center; }
.cnc-aksi-ganda { display: grid; gap: 10px; margin-top: 20px; }
.cnc-detail { margin-top: 16px; text-align: left; }
.cnc-detail pre { max-height: 240px; overflow: auto; padding: 12px; background: var(--kertas); border: 1px solid var(--garis); border-radius: 10px; font-size: 12px; white-space: pre-wrap; word-break: break-word; }
.cnc-sembunyi { display: none !important; }
@media (max-width: 420px) { .cnc-kartu { padding: 24px 18px; border-radius: 14px; } .cnc-kode { font-size: 52px; } }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }