/*
 * Login Kontributor (shortcode [cjp_login] — Citizen Journalism Pro)
 * Dimuat HANYA di halaman yang memuat shortcode tersebut (lihat inc/cj-login.php).
 * Semua selector di-scope ke bodybody.cjp-login-page agar halaman lain tidak terpengaruh.
 */
body.cjp-login-page {
	--cjl-navy: #071d40;
	--cjl-blue: #0866e8;
	--cjl-blue-dark: #064fc4;
	--cjl-pale: #f2f7ff;
	--cjl-ink: #10264d;
	--cjl-muted: #5c6b85;
	--cjl-line: #d4deef;
	--cjl-w: min(1360px, 100vw - 32px);
	background: var(--cjl-pale);
	overflow-x: clip;
}

/* ---------- Latar & ornamen ---------- */
body.cjp-login-page .cjp-login-stage {
	position: relative;
	isolation: isolate;
	padding: 56px 0 80px;
}
body.cjp-login-page .cjp-login-stage::before,
body.cjp-login-page .cjp-login-stage::after {
	content: "";
	position: absolute;
	z-index: -1;
	top: 0;
	bottom: 0;
	left: 50%;
	width: 100vw;
	transform: translateX(-50%);
	pointer-events: none;
}
body.cjp-login-page .cjp-login-stage::before {
	background:
		radial-gradient(520px 300px at 0% 0%, rgba(8, 102, 232, .28), transparent 70%),
		radial-gradient(640px 360px at 100% 100%, rgba(8, 102, 232, .22), transparent 70%),
		linear-gradient(180deg, #f8fbff 0%, var(--cjl-pale) 100%);
}
body.cjp-login-page .cjp-login-stage::after {
	background: url("login-map.svg") no-repeat right top / min(900px, 70%) auto;
	opacity: .35;
}

/* ---------- Kartu dua kolom ---------- */
body.cjp-login-page .cjp-lg {
	display: grid;
	grid-template-columns: 48fr 52fr;
	width: var(--cjl-w);
	margin-inline: calc((100% - var(--cjl-w)) / 2);
	background: #fff;
	border: 1px solid #e3ebf8;
	border-radius: 22px;
	box-shadow: 0 30px 80px rgba(7, 29, 64, .14), 0 2px 8px rgba(7, 29, 64, .06);
	overflow: hidden;
	color: var(--cjl-ink);
}

/* ---------- Panel kiri ---------- */
body.cjp-login-page .cjp-lg__brand {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	min-width: 0;
	padding: 56px 56px 0;
	color: #fff;
	background:
		radial-gradient(600px 380px at 85% 70%, rgba(8, 102, 232, .55), transparent 70%),
		linear-gradient(165deg, var(--cjl-navy) 0%, #0a2b63 58%, #0b4aa8 100%);
}
body.cjp-login-page .cjp-lg__brand::before {
	content: "";
	position: absolute;
	inset: 0;
	background: url("login-map.svg") no-repeat center top / cover;
	opacity: .22;
	pointer-events: none;
}
body.cjp-login-page .cjp-lg__brandtop { position: relative; }
body.cjp-login-page .cjp-lg__logo {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	margin-bottom: 38px;
	color: #fff;
	text-decoration: none;
}
body.cjp-login-page .cjp-lg__logo span {
	font-family: inherit;
	font-size: 22px;
	font-weight: 600;
	line-height: 1.1;
}
body.cjp-login-page .cjp-lg__brand h1 {
	margin: 0 0 20px;
	font-family: inherit;
	font-size: clamp(36px, 4.2vw, 56px);
	font-weight: 700;
	line-height: 1.08;
	letter-spacing: -.01em;
	color: #fff;
}
body.cjp-login-page .cjp-lg__brand h1 em { font-style: normal; color: #2aa3ff; }
body.cjp-login-page .cjp-lg__lead {
	max-width: 30em;
	margin: 0 0 30px;
	font-size: 19px;
	line-height: 1.55;
	color: rgba(255, 255, 255, .92);
}
body.cjp-login-page .cjp-lg__feat {
	display: grid;
	gap: 16px;
	margin: 0;
	padding: 0;
	list-style: none;
}
body.cjp-login-page .cjp-lg__feat li { display: flex; align-items: center; gap: 16px; }
body.cjp-login-page .cjp-lg__fi {
	flex: 0 0 48px;
	display: grid;
	place-items: center;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: rgba(255, 255, 255, .16);
}
body.cjp-login-page .cjp-lg__feat strong { display: block; font-size: 17px; font-weight: 700; }
body.cjp-login-page .cjp-lg__feat small { display: block; font-size: 15px; color: rgba(255, 255, 255, .85); }
body.cjp-login-page .cjp-lg__scene {
	position: relative;
	display: block;
	width: calc(100% + 112px);
	max-width: none;
	height: auto;
	margin: 20px -56px 0;
	-webkit-mask-image: linear-gradient(180deg, transparent 0, #000 22%);
	mask-image: linear-gradient(180deg, transparent 0, #000 22%);
}

/* ---------- Panel kanan ---------- */
body.cjp-login-page .cjp-lg__panel {
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-width: 0;
	padding: 56px 64px 48px;
}

/* Kartu formulir */
body.cjp-login-page .cjp-lg .cjp-login-card {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	column-gap: 24px;
	padding: 0;
	border-radius: 0;
	overflow: visible;
	background: none;
	box-shadow: none;
	color: var(--cjl-ink);
}

/* Kepala: ikon + judul + deskripsi */
body.cjp-login-page .cjp-lg .cjp-login-head { display: contents; }
body.cjp-login-page .cjp-lg .cjp-login-icon {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	color: #fff;
	grid-column: 1;
	grid-row: 1 / span 2;
	align-self: center;
	flex: none;
	width: 88px;
	height: 88px;
	margin: 0;
	background: linear-gradient(145deg, #0a74f5, var(--cjl-blue-dark));
	box-shadow: 0 14px 28px rgba(8, 102, 232, .3);
}
body.cjp-login-page .cjp-lg .cjp-login-icon svg { width: 42px; height: 42px; }
body.cjp-login-page .cjp-lg .cjp-login-icon::after {
	content: "";
	position: absolute;
	right: -2px;
	bottom: -2px;
	width: 30px;
	height: 30px;
	border: 3px solid #fff;
	border-radius: 50%;
	background: var(--cjl-blue) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round' d='m6.5 12.5 4 4 7-8'/%3E%3C/svg%3E") center / 72% no-repeat;
}
body.cjp-login-page .cjp-lg .cjp-login-card h2 {
	grid-column: 2;
	grid-row: 1;
	align-self: end;
	margin: 0 0 6px;
	padding: 0;
	font-family: inherit;
	font-size: clamp(28px, 2.6vw, 36px);
	font-weight: 700;
	line-height: 1.12;
	letter-spacing: -.01em;
	color: var(--cjl-ink);
}
body.cjp-login-page .cjp-lg .cjp-login-card h2::after { content: none; }
body.cjp-login-page .cjp-lg .cjp-login-lead {
	grid-column: 2;
	grid-row: 2;
	align-self: start;
	margin: 0;
	font-size: 17px;
	line-height: 1.5;
	color: var(--cjl-muted);
}

/* Pesan status dari plugin (tetap terlihat, tidak menggeser layout berlebihan) */
body.cjp-login-page .cjp-lg .cjp-login-card .cjp-alert {
	grid-column: 1 / -1;
	margin: 26px 0 0;
	padding: 14px 16px;
	font-size: 15.5px;
	line-height: 1.5;
	border-radius: 12px;
}

/* ---------- Formulir ---------- */
body.cjp-login-page .cjp-lg .cjp-login-card form {
	grid-column: 1 / -1;
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	column-gap: 16px;
	margin: 28px 0 0;
	padding: 30px 0 0;
	border-top: 1px solid #e3ebf8;
}
body.cjp-login-page .cjp-lg .cjp-login-card label:not(.cjp-check) {
	grid-column: 1 / -1;
	display: block;
	margin: 0 0 22px;
	font-size: 16.5px;
	font-weight: 600;
	color: var(--cjl-ink);
}
body.cjp-login-page .cjp-lg .cjp-login-card label:not(.cjp-check)::before {
	content: "";
	display: inline-block;
	width: 20px;
	height: 20px;
	margin-right: 10px;
	vertical-align: -4px;
	background: currentColor;
	-webkit-mask: var(--cjl-ic) center / contain no-repeat;
	mask: var(--cjl-ic) center / contain no-repeat;
}
body.cjp-login-page .cjp-lg .cjp-login-card label:nth-of-type(1) {
	--cjl-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 5h18a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1Zm1 2.4V17h16V7.4l-8 5.1-8-5.1ZM5.5 7 12 11.1 18.5 7h-13Z'/%3E%3C/svg%3E");
}
body.cjp-login-page .cjp-lg .cjp-login-card label:nth-of-type(2) {
	--cjl-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1.5a5 5 0 0 0-5 5V9H5.5A1.5 1.5 0 0 0 4 10.5v10A1.5 1.5 0 0 0 5.5 22h13a1.5 1.5 0 0 0 1.5-1.5v-10A1.5 1.5 0 0 0 18.5 9H17V6.5a5 5 0 0 0-5-5Zm-3 5a3 3 0 0 1 6 0V9H9V6.5Z'/%3E%3C/svg%3E");
}
body.cjp-login-page .cjp-lg .cjp-login-card label input:not([type="checkbox"]) {
	display: block;
	width: 100%;
	height: 56px;
	margin: 10px 0 0;
	padding: 0 18px;
	font: inherit;
	font-size: 16.5px;
	font-weight: 400;
	color: var(--cjl-ink);
	background: #fff;
	border: 1.5px solid var(--cjl-line);
	border-radius: 13px;
	box-shadow: none;
	transition: border-color .15s, box-shadow .15s;
}
body.cjp-login-page .cjp-lg .cjp-login-card label input::placeholder { color: #76849f; opacity: 1; }
body.cjp-login-page .cjp-lg .cjp-login-card label input:not([type="checkbox"]):focus {
	outline: 0;
	border-color: var(--cjl-blue);
	box-shadow: 0 0 0 4px rgba(8, 102, 232, .18);
}

/* Tampilkan/sembunyikan sandi (disisipkan JS) */
body.cjp-login-page .cjp-lg__pw { position: relative; display: block; }
body.cjp-login-page .cjp-lg__pw input:not([type="checkbox"]) { padding-right: 56px; }
body.cjp-login-page .cjp-lg__eye {
	position: absolute;
	top: 10px;
	right: 6px;
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	margin: 0;
	padding: 0;
	color: var(--cjl-muted);
	background: none;
	border: 0;
	border-radius: 10px;
	cursor: pointer;
}
body.cjp-login-page .cjp-lg__eye:hover { color: var(--cjl-blue-dark); background: var(--cjl-pale); }
body.cjp-login-page .cjp-lg__eye:focus-visible { outline: 3px solid rgba(8, 102, 232, .45); outline-offset: 0; }

/* Ingat saya + lupa sandi */
body.cjp-login-page .cjp-lg .cjp-login-card .cjp-check {
	grid-column: 1;
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0;
	font-size: 16.5px;
	font-weight: 500;
	color: var(--cjl-ink);
	cursor: pointer;
}
body.cjp-login-page .cjp-lg .cjp-login-card .cjp-check input {
	-webkit-appearance: none;
	appearance: none;
	flex: 0 0 24px;
	width: 24px;
	height: 24px;
	margin: 0;
	background: #fff;
	border: 1.5px solid #b4c3dd;
	border-radius: 7px;
	cursor: pointer;
	transition: background-color .15s, border-color .15s, box-shadow .15s;
}
body.cjp-login-page .cjp-lg .cjp-login-card .cjp-check input:checked {
	background: var(--cjl-blue) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round' d='m6 12.500 4 4 8-9'/%3E%3C/svg%3E") center / 80% no-repeat;
	border-color: var(--cjl-blue);
}
body.cjp-login-page .cjp-lg .cjp-login-card .cjp-check input:focus-visible { outline: 0; box-shadow: 0 0 0 4px rgba(8, 102, 232, .25); }
body.cjp-login-page .cjp-lg__forgot {
	grid-column: 2;
	align-self: center;
	font-size: 16.5px;
	font-weight: 600;
	color: var(--cjl-blue);
	text-decoration: none;
}
body.cjp-login-page .cjp-lg__forgot:hover { color: var(--cjl-blue-dark); text-decoration: underline; }
body.cjp-login-page .cjp-lg__forgot:focus-visible,
body.cjp-login-page .cjp-lg__register:focus-visible { outline: 3px solid rgba(8, 102, 232, .45); outline-offset: 3px; border-radius: 6px; }

/* Tombol Masuk */
body.cjp-login-page .cjp-lg .cjp-login-card button[type="submit"] {
	grid-column: 1 / -1;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	width: 100%;
	height: 62px;
	margin: 26px 0 0;
	padding: 0 20px;
	font: inherit;
	font-size: 19px;
	font-weight: 700;
	color: #fff;
	background: linear-gradient(180deg, #0a74f5 0%, var(--cjl-blue-dark) 100%);
	border: 0;
	border-radius: 13px;
	box-shadow: 0 12px 26px rgba(8, 102, 232, .3);
	cursor: pointer;
	filter: none;
	transition: background .15s, box-shadow .15s, transform .15s;
}
body.cjp-login-page .cjp-lg .cjp-login-card button[type="submit"]::before {
	content: "";
	width: 24px;
	height: 24px;
	background: #fff;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M21.5 3.2 2.8 10.4a.7.7 0 0 0 0 1.300l4.700 1.900 1.900 4.700a.7.7 0 0 0 1.300.1l2.100-3.900 4.500 3.300a.7.7 0 0 0 1.100-.4L22.300 4a.7.7 0 0 0-.8-.8ZM9.600 13.200l7.600-6.100-5.500 7.300-.4 2.800-1.700-4Z'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M21.5 3.2 2.8 10.4a.7.7 0 0 0 0 1.300l4.700 1.900 1.900 4.700a.7.7 0 0 0 1.300.1l2.100-3.900 4.500 3.300a.7.7 0 0 0 1.100-.4L22.300 4a.7.7 0 0 0-.8-.8ZM9.600 13.200l7.600-6.100-5.500 7.300-.4 2.800-1.700-4Z'/%3E%3C/svg%3E") center / contain no-repeat;
}
body.cjp-login-page .cjp-lg .cjp-login-card button[type="submit"]:hover {
	background: linear-gradient(180deg, #0a6cea 0%, #05449f 100%);
	box-shadow: 0 16px 30px rgba(6, 79, 196, .34);
	transform: translateY(-1px);
	filter: none;
}
body.cjp-login-page .cjp-lg .cjp-login-card button[type="submit"]:active { transform: translateY(1px); box-shadow: 0 6px 14px rgba(6, 79, 196, .3); }
body.cjp-login-page .cjp-lg .cjp-login-card button[type="submit"]:focus-visible { outline: 3px solid var(--cjl-navy); outline-offset: 3px; }
body.cjp-login-page .cjp-lg .cjp-login-card button[type="submit"]:disabled { cursor: progress; opacity: .8; transform: none; }
body.cjp-login-page .cjp-lg .cjp-login-card button[type="submit"].is-loading::before {
	width: 22px;
	height: 22px;
	background: none;
	-webkit-mask: none;
	mask: none;
	border: 3px solid rgba(255, 255, 255, .45);
	border-top-color: #fff;
	border-radius: 50%;
	animation: cjp-lg-spin .8s linear infinite;
}
@keyframes cjp-lg-spin { to { transform: rotate(360deg); } }

/* Pemisah + tombol daftar */
body.cjp-login-page .cjp-lg__or {
	grid-column: 1 / -1;
	display: flex;
	align-items: center;
	gap: 18px;
	margin: 28px 0 18px;
	font-size: 15.5px;
	color: var(--cjl-muted);
}
body.cjp-login-page .cjp-lg__or::before,
body.cjp-login-page .cjp-lg__or::after { content: ""; flex: 1; height: 1px; background: #d9e3f3; }
body.cjp-login-page .cjp-lg__register {
	grid-column: 1 / -1;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	min-height: 58px;
	padding: 0 20px;
	font-size: 17.5px;
	font-weight: 700;
	color: var(--cjl-blue-dark);
	text-decoration: none;
	background: #fff;
	border: 1.5px solid var(--cjl-blue);
	border-radius: 13px;
	transition: background .15s, border-color .15s;
}
body.cjp-login-page .cjp-lg__register:hover { color: var(--cjl-blue-dark); background: var(--cjl-pale); border-color: var(--cjl-blue-dark); }

/* Panel privasi */
body.cjp-login-page .cjp-lg__privacy {
	display: flex;
	align-items: center;
	gap: 18px;
	margin-top: 28px;
	padding: 16px 22px;
	color: var(--cjl-blue);
	background: #eaf2ff;
	border-radius: 12px;
}
body.cjp-login-page .cjp-lg__privacy svg { flex: none; }
body.cjp-login-page .cjp-lg__privacy p { margin: 0; line-height: 1.4; }
body.cjp-login-page .cjp-lg__privacy strong { display: block; font-size: 15.5px; color: var(--cjl-ink); }
body.cjp-login-page .cjp-lg__privacy span { font-size: 14.5px; color: var(--cjl-muted); }

/* Pesan "sudah masuk" milik plugin bila halaman dibuka saat login */
body.cjp-login-page .cjp-login-stage > .cjp-wrap { max-width: 560px; }

/* ---------- Tablet & layar sedang ---------- */
@media (max-width: 1180px) {
	body.cjp-login-page .cjp-lg__brand { padding: 44px 36px 0; }
	body.cjp-login-page .cjp-lg__scene { width: calc(100% + 72px); margin: 16px -36px 0; }
	body.cjp-login-page .cjp-lg__panel { padding: 44px 40px 40px; }
	body.cjp-login-page .cjp-lg__lead { font-size: 17px; }
}

/* ---------- Satu kolom ---------- */
@media (max-width: 880px) {
	body.cjp-login-page .cjp-login-stage { padding: 28px 0 56px; }
	body.cjp-login-page .cjp-lg { grid-template-columns: 1fr; border-radius: 18px; }
	body.cjp-login-page .cjp-lg__brand { padding: 28px 28px 30px; }
	body.cjp-login-page .cjp-lg__logo { margin-bottom: 20px; }
	body.cjp-login-page .cjp-lg__logo svg { width: 44px; height: 44px; }
	body.cjp-login-page .cjp-lg__logo span { font-size: 18px; }
	body.cjp-login-page .cjp-lg__brand h1 { margin-bottom: 10px; font-size: 34px; }
	body.cjp-login-page .cjp-lg__lead { margin: 0; font-size: 16px; }
	body.cjp-login-page .cjp-lg__feat,
	body.cjp-login-page .cjp-lg__scene { display: none; }
	body.cjp-login-page .cjp-lg__panel { padding: 32px 28px 30px; }
}

/* ---------- Ponsel ---------- */
@media (max-width: 480px) {
	body.cjp-login-page { --cjl-w: calc(100vw - 20px); }
	body.cjp-login-page .cjp-login-stage { padding: 14px 0 40px; }
	body.cjp-login-page .cjp-lg { border-radius: 16px; }
	body.cjp-login-page .cjp-lg__brand { padding: 22px 20px 24px; }
	body.cjp-login-page .cjp-lg__brand h1 { font-size: 30px; }
	body.cjp-login-page .cjp-lg__lead { font-size: 15px; }
	body.cjp-login-page .cjp-lg__panel { padding: 26px 20px 24px; }
	body.cjp-login-page .cjp-lg .cjp-login-card { column-gap: 16px; }
	body.cjp-login-page .cjp-lg .cjp-login-icon { width: 64px; height: 64px; }
	body.cjp-login-page .cjp-lg .cjp-login-icon svg { width: 30px; height: 30px; }
	body.cjp-login-page .cjp-lg .cjp-login-icon::after { width: 24px; height: 24px; border-width: 2px; }
	body.cjp-login-page .cjp-lg .cjp-login-card h2 { font-size: 26px; }
	body.cjp-login-page .cjp-lg .cjp-login-lead { font-size: 15px; }
	body.cjp-login-page .cjp-lg .cjp-login-card form { margin-top: 22px; padding-top: 24px; }
	body.cjp-login-page .cjp-lg .cjp-login-card label:not(.cjp-check),
	body.cjp-login-page .cjp-lg .cjp-login-card .cjp-check,
	body.cjp-login-page .cjp-lg__forgot { font-size: 16px; }
	body.cjp-login-page .cjp-lg .cjp-login-card button[type="submit"] { height: 58px; font-size: 18px; }
	body.cjp-login-page .cjp-lg__privacy { gap: 14px; padding: 14px 16px; }
	body.cjp-login-page .cjp-lg .cjp-login-card label input:not([type="checkbox"]) { padding-left: 14px; font-size: 16px; }
	body.cjp-login-page .cjp-lg .cjp-login-card label input::placeholder { font-size: 14.5px; }
	body.cjp-login-page .cjp-lg__register { gap: 10px; padding: 0 12px; font-size: 16px; }
}

@media (prefers-reduced-motion: reduce) {
	body.cjp-login-page .cjp-lg * { transition: none !important; }
	body.cjp-login-page .cjp-lg .cjp-login-card button[type="submit"].is-loading::before { animation-duration: 2.4s; }
}