/* Blok jasa DN, DIBUAT OTOMATIS dari repo different-network-academy (npm run lab:export). Jangan disunting di sini. */
/* DN Automation Lab — gaya bersama differentnetworkacademy.com/automation dan
   differentnetwork.pages.dev (2026-09-26, Claude Opus 5.5). Sumber tunggal di
   repo academy; salinan di repo DN dibuat `npm run lab:export`. Lab selalu
   bernuansa konsol gelap di kedua tema supaya tampil sama persis. */

@property --al-angle {
	syntax: "<angle>";
	inherits: false;
	initial-value: 0deg;
}

.al {
	--al-accent: #ff4d00;
	--al-accent-2: #ff7a3d;
	--al-ok: #35d07f;
	--al-text: #f4f4f5;
	--al-muted: rgba(255, 255, 255, 0.56);
	--al-dim: rgba(255, 255, 255, 0.34);
	--al-line: rgba(255, 255, 255, 0.09);
	--al-card: rgba(255, 255, 255, 0.035);
	--al-disp: var(--font-chakra-petch, "Chakra Petch"), ui-sans-serif, system-ui, sans-serif;
	--al-mono: var(--font-jetbrains-mono, "JetBrains Mono"), ui-monospace, monospace;
	--al-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
	position: relative;
	isolation: isolate;
	overflow: hidden;
	padding: 14px;
	border-radius: 22px;
	background:
		linear-gradient(rgba(255, 255, 255, 0.022) 1px, transparent 1px) 0 0 / 28px 28px,
		linear-gradient(90deg, rgba(255, 255, 255, 0.022) 1px, transparent 1px) 0 0 / 28px 28px,
		radial-gradient(120% 80% at 100% 0%, rgba(255, 77, 0, 0.12), transparent 60%),
		#08080b;
	color: var(--al-text);
	text-align: left;
	box-shadow: 0 40px 90px -50px rgba(0, 0, 0, 0.9);
}
/* Bingkai bercahaya yang berputar pelan. */
.al::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	padding: 1px;
	border-radius: inherit;
	background: conic-gradient(
		from var(--al-angle),
		rgba(255, 255, 255, 0.08) 0deg,
		rgba(255, 77, 0, 0.75) 60deg,
		rgba(255, 255, 255, 0.08) 130deg,
		rgba(255, 255, 255, 0.08) 230deg,
		rgba(53, 208, 127, 0.45) 290deg,
		rgba(255, 255, 255, 0.08) 360deg
	);
	-webkit-mask:
		linear-gradient(#000 0 0) content-box,
		linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	mask-composite: exclude;
	animation: al-spin-angle 9s linear infinite;
	pointer-events: none;
}
.al-glow {
	position: absolute;
	inset: 0;
	z-index: -1;
	background: radial-gradient(420px circle at var(--mx, 75%) var(--my, 10%), rgba(255, 77, 0, 0.13), transparent 70%);
	pointer-events: none;
	transition: background 0.2s;
}
@keyframes al-spin-angle {
	to {
		--al-angle: 360deg;
	}
}
.al *,
.al *::before,
.al *::after {
	box-sizing: border-box;
}
.al svg.al-ic {
	width: 16px;
	height: 16px;
	flex: none;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.7;
	stroke-linecap: round;
	stroke-linejoin: round;
}
:where(.al) button {
	font: inherit;
	color: inherit;
	-webkit-tap-highlight-color: transparent;
}
/* Situs induk punya aturan global button{width:100%} — lab menetralkannya. */
.al button {
	width: auto;
}
:where(.al) button:focus-visible {
	outline: 2px solid var(--al-accent);
	outline-offset: 2px;
}

/* ── tab ── */
.al-tabs {
	display: flex;
	gap: 8px;
	overflow-x: auto;
	padding: 2px 2px 4px;
	scrollbar-width: none;
	scroll-snap-type: x proximity;
}
.al-tabs::-webkit-scrollbar {
	display: none;
}
.al-tab {
	position: relative;
	flex: none;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	padding: 0 14px;
	overflow: hidden;
	border: 1px solid var(--al-line);
	border-radius: 999px;
	background: var(--al-card);
	color: var(--al-muted);
	font-family: var(--al-mono);
	font-size: 11px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	cursor: pointer;
	scroll-snap-align: center;
	transition:
		color 0.3s,
		border-color 0.3s,
		background 0.3s,
		transform 0.25s var(--al-ease);
}
.al-tab:hover {
	color: var(--al-text);
	border-color: rgba(255, 77, 0, 0.35);
	transform: translateY(-1px);
}
.al-tab.is-active {
	color: #fff;
	border-color: rgba(255, 77, 0, 0.6);
	background: linear-gradient(135deg, rgba(255, 77, 0, 0.2), rgba(255, 77, 0, 0.04));
	box-shadow: 0 10px 30px -14px rgba(255, 77, 0, 0.8);
}
.al-tab-ic {
	display: grid;
	place-items: center;
	color: var(--al-accent);
}
.al-tab-num {
	font-size: 9px;
	opacity: 0.45;
}
.al-tab-bar {
	position: absolute;
	left: 14px;
	right: 14px;
	bottom: 5px;
	height: 2px;
	border-radius: 2px;
	background: rgba(255, 255, 255, 0.08);
	opacity: 0;
	transition: opacity 0.3s;
}
.al-tab.is-active .al-tab-bar {
	opacity: 1;
}
.al-tab-bar i {
	display: block;
	height: 100%;
	border-radius: inherit;
	background: linear-gradient(90deg, var(--al-accent), var(--al-accent-2));
	transform: scaleX(var(--p, 0));
	transform-origin: left;
}

/* ── panel ── */
.al-panel {
	display: grid;
	grid-template-areas: "head" "screen" "flow";
	gap: 16px;
	margin-top: 14px;
}
.al-head {
	grid-area: head;
}
.al-screen {
	grid-area: screen;
}
.al-flow {
	grid-area: flow;
}
@media (min-width: 960px) {
	.al {
		padding: 22px;
	}
	.al-tabs {
		display: grid;
		grid-template-columns: repeat(5, minmax(0, 1fr));
		overflow: visible;
	}
	.al-tab {
		justify-content: center;
		padding: 0 10px;
	}
	.al-panel {
		grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.3fr);
		grid-template-rows: auto 1fr;
		grid-template-areas: "head screen" "flow screen";
		gap: 18px 30px;
		margin-top: 20px;
	}
}
.al-index {
	font-family: var(--al-mono);
	font-size: 10.5px;
	letter-spacing: 0.2em;
	color: var(--al-accent);
}
.al-title {
	margin: 10px 0 0;
	font-family: var(--al-disp);
	font-weight: 700;
	font-size: clamp(1.35rem, 2.5vw, 1.85rem);
	line-height: 1.12;
	letter-spacing: -0.005em;
	color: #fff;
	text-wrap: balance;
}
.al-desc {
	margin: 10px 0 0;
	font-size: 0.95rem;
	line-height: 1.6;
	color: var(--al-muted);
}
.is-swap {
	animation: al-swap 0.55s var(--al-ease);
}
@keyframes al-swap {
	from {
		opacity: 0;
		transform: translateY(10px);
		filter: blur(5px);
	}
}

/* ── tiga langkah ── */
.al-flow {
	position: relative;
	margin: 0;
	padding: 0;
	list-style: none;
}
.al-flow-steps {
	margin: 0;
	padding: 0;
	list-style: none;
}
.al-flow-line {
	position: absolute;
	left: 30px;
	top: 34px;
	bottom: 34px;
	width: 2px;
	border-radius: 2px;
	background: var(--al-line);
}
.al-flow-line i {
	display: block;
	height: 0%;
	border-radius: inherit;
	background: linear-gradient(var(--al-dim), var(--al-accent), var(--al-ok));
	box-shadow: 0 0 12px rgba(255, 77, 0, 0.6);
	transition: height 0.7s var(--al-ease);
}
.al[data-phase="1"] .al-flow-line i {
	height: 50%;
}
.al[data-phase="2"] .al-flow-line i {
	height: 100%;
}
.al-step {
	position: relative;
	display: grid;
	grid-template-columns: 38px minmax(0, 1fr);
	gap: 12px;
	align-items: start;
	margin-top: 10px;
	padding: 12px;
	border: 1px solid var(--al-line);
	border-radius: 14px;
	background: rgba(8, 8, 11, 0.7);
	opacity: 0.5;
	transition:
		opacity 0.45s,
		border-color 0.45s,
		background 0.45s,
		box-shadow 0.45s,
		transform 0.45s var(--al-ease);
}
.al-step:first-of-type {
	margin-top: 0;
}
.al-step.is-past {
	opacity: 0.78;
}
.al-step.is-on {
	opacity: 1;
	transform: translateX(4px);
}
.al-step-ic {
	position: relative;
	z-index: 1;
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	border: 1px solid var(--al-line);
	border-radius: 11px;
	background: #111116;
	color: var(--al-muted);
	transition:
		color 0.4s,
		border-color 0.4s,
		box-shadow 0.4s;
}
.al-step-ic .al-ic {
	width: 18px;
	height: 18px;
}
.al-step b {
	display: block;
	font-family: var(--al-mono);
	font-size: 10.5px;
	font-weight: 500;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--al-muted);
}
.al-step p {
	margin: 5px 0 0;
	font-size: 0.88rem;
	line-height: 1.55;
	color: rgba(255, 255, 255, 0.84);
}
.al-step-manual.is-past p {
	text-decoration: line-through;
	text-decoration-color: rgba(255, 77, 0, 0.55);
}
.al-step-manual.is-on {
	border-color: rgba(255, 255, 255, 0.22);
}
.al-step-system.is-on {
	border-color: rgba(255, 77, 0, 0.55);
	background: linear-gradient(135deg, rgba(255, 77, 0, 0.12), rgba(8, 8, 11, 0.7));
	box-shadow: 0 14px 40px -20px rgba(255, 77, 0, 0.9);
}
.al-step-system.is-on .al-step-ic,
.al-step-system.is-past .al-step-ic {
	color: var(--al-accent);
	border-color: rgba(255, 77, 0, 0.5);
}
.al-step-system.is-on .al-step-ic {
	box-shadow: 0 0 0 4px rgba(255, 77, 0, 0.12);
	animation: al-pulse-ring 1.6s ease-out infinite;
}
.al-step-system.is-on b {
	color: var(--al-accent);
}
.al-step-result.is-on {
	border-color: rgba(53, 208, 127, 0.5);
	background: linear-gradient(135deg, rgba(53, 208, 127, 0.1), rgba(8, 8, 11, 0.7));
	box-shadow: 0 14px 40px -20px rgba(53, 208, 127, 0.7);
}
.al-step-result.is-on .al-step-ic {
	color: var(--al-ok);
	border-color: rgba(53, 208, 127, 0.5);
}
.al-step-result.is-on b {
	color: var(--al-ok);
}
@keyframes al-pulse-ring {
	0% {
		box-shadow: 0 0 0 0 rgba(255, 77, 0, 0.45);
	}
	100% {
		box-shadow: 0 0 0 12px rgba(255, 77, 0, 0);
	}
}

/* ── layar ── */
.al-screen {
	position: relative;
	display: flex;
	flex-direction: column;
	min-width: 0;
	overflow: hidden;
	border: 1px solid rgba(255, 255, 255, 0.11);
	border-radius: 18px;
	background: linear-gradient(180deg, #0f0f14, #09090c);
	box-shadow:
		0 30px 70px -30px rgba(0, 0, 0, 0.95),
		0 0 0 1px rgba(255, 77, 0, 0.06),
		inset 0 1px 0 rgba(255, 255, 255, 0.06);
	transform: perspective(1400px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
	transition: transform 0.6s var(--al-ease);
}
.al-screen::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(115deg, transparent 40%, rgba(255, 255, 255, 0.035) 50%, transparent 60%);
	pointer-events: none;
}
.al-screen-bar {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 14px;
	border-bottom: 1px solid var(--al-line);
	font-family: var(--al-mono);
	font-size: 10px;
	letter-spacing: 0.14em;
}
.al-dots {
	display: flex;
	gap: 5px;
}
.al-dots i {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #ff5f57;
	opacity: 0.85;
}
.al-dots i:nth-child(2) {
	background: #febc2e;
}
.al-dots i:nth-child(3) {
	background: #28c840;
}
.al-screen-title {
	flex: 1;
	min-width: 0;
	overflow: hidden;
	color: var(--al-muted);
	white-space: nowrap;
	text-overflow: ellipsis;
}
.al-screen-status {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--al-ok);
	white-space: nowrap;
}
.al-screen-status i {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--al-ok);
	animation: al-blink 1.4s ease-in-out infinite;
}
@keyframes al-blink {
	50% {
		opacity: 0.25;
	}
}
.al-stage {
	position: relative;
	height: 372px;
	overflow: hidden;
	container-type: inline-size;
	touch-action: pan-y;
}
@media (min-width: 960px) {
	.al-stage {
		height: 392px;
	}
}
.al-scene {
	position: absolute;
	inset: 0;
	padding: 14px;
	opacity: 0;
	transform: translateX(calc(var(--dir, 1) * 28px)) scale(0.985);
	filter: blur(6px);
	transition:
		opacity 0.42s var(--al-ease),
		transform 0.42s var(--al-ease),
		filter 0.42s;
}
.al-scene.is-shown {
	opacity: 1;
	transform: none;
	filter: none;
}
.al-scene.is-leaving {
	transform: translateX(calc(var(--dir, 1) * -28px)) scale(0.985);
	pointer-events: none;
}
.al-foot {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 10px 12px;
	overflow-x: auto;
	border-top: 1px solid var(--al-line);
	scrollbar-width: none;
}
.al-foot::-webkit-scrollbar {
	display: none;
}
.al-chips {
	display: flex;
	flex: none;
	gap: 8px;
}
.al-try {
	flex: none;
	font-family: var(--al-mono);
	font-size: 9.5px;
	letter-spacing: 0.22em;
	color: var(--al-dim);
}
.al-chip {
	flex: none;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 36px;
	padding: 0 13px;
	border: 1px solid rgba(255, 77, 0, 0.38);
	border-radius: 999px;
	background: rgba(255, 77, 0, 0.08);
	color: #ffd9c7;
	font-family: var(--al-mono);
	font-size: 10.5px;
	letter-spacing: 0.06em;
	white-space: nowrap;
	cursor: pointer;
	transition:
		background 0.25s,
		border-color 0.25s,
		transform 0.2s var(--al-ease),
		box-shadow 0.25s;
}
.al-chip:hover {
	background: rgba(255, 77, 0, 0.2);
	border-color: var(--al-accent);
	box-shadow: 0 8px 22px -10px rgba(255, 77, 0, 0.9);
	transform: translateY(-1px);
}
.al-chip:active {
	transform: scale(0.96);
}
.al-chip .al-ic {
	width: 13px;
	height: 13px;
}
.al-log {
	display: flex;
	gap: 8px;
	padding: 8px 14px 10px;
	overflow: hidden;
	border-top: 1px dashed var(--al-line);
	font-family: var(--al-mono);
	font-size: 10.5px;
	white-space: nowrap;
	color: var(--al-muted);
}
.al-log-caret {
	color: var(--al-accent);
}
.al-log-time {
	color: var(--al-dim);
}
.al-log-text {
	overflow: hidden;
	text-overflow: ellipsis;
	color: #d7f5e6;
}
.al-log.is-new .al-log-text {
	animation: al-log-in 0.4s var(--al-ease);
}
@keyframes al-log-in {
	from {
		opacity: 0;
		transform: translateX(-8px);
	}
}
.al-caret::after {
	content: "▍";
	margin-left: 1px;
	color: var(--al-accent);
	animation: al-blink 0.8s steps(1) infinite;
}

/* ═══ 1. chat — meniru WhatsApp mode gelap ═══ */
.al-scene.al-wa {
	padding: 0;
}
.al-wa {
	--wa-bg: #0b141a;
	--wa-panel: #202c33;
	--wa-in: #202c33;
	--wa-out: #005c4b;
	--wa-text: #e9edef;
	--wa-sub: #8696a0;
	--wa-green: #00a884;
	--wa-read: #53bdeb;
	--wa-field: #2a3942;
	display: flex;
	flex-direction: column;
	font-family: "Segoe UI", Roboto, "Helvetica Neue", Helvetica, Arial, ui-sans-serif, system-ui, sans-serif;
	color: var(--wa-text);
	background: var(--wa-bg);
}
.al-wa svg.al-wa-ic {
	width: 20px;
	height: 20px;
	flex: none;
	fill: currentColor;
}
.al-wa-head {
	display: flex;
	align-items: center;
	gap: 9px;
	padding: 8px 12px 8px 8px;
	background: var(--wa-panel);
	color: #aebac1;
}
.al-wa svg.al-wa-back {
	width: 21px;
	height: 21px;
	color: var(--wa-text);
}
.al-wa-ava {
	display: grid;
	flex: none;
	place-items: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: linear-gradient(135deg, #ff4d00, #ff9a5c);
	color: #fff;
}
.al-wa-ava .al-ic {
	width: 18px;
	height: 18px;
}
.al-wa-who {
	display: flex;
	flex: 1;
	flex-direction: column;
	min-width: 0;
	line-height: 1.25;
}
.al-wa-who b {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: 15px;
	font-weight: 500;
	color: var(--wa-text);
	white-space: nowrap;
}
.al-wa svg.al-wa-badge {
	width: 15px;
	height: 15px;
}
.al-wa-status {
	font-size: 12px;
	color: var(--wa-sub);
	transition: color 0.2s;
}
.al-wa-status.is-typing {
	color: var(--wa-green);
}
.al-wa-actions {
	display: inline-flex;
	gap: 18px;
	margin-left: auto;
}
.al-wa-body {
	position: relative;
	flex: 1;
	min-height: 0;
	overflow: hidden;
	background-color: var(--wa-bg);
	/* wallpaper doodle tipis khas WhatsApp */
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='132' height='132' fill='none' stroke='%23ffffff' stroke-opacity='.05' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 18h22v14H22l-8 6z'/%3E%3Ccircle cx='96' cy='22' r='9'/%3E%3Cpath d='M92 21h.1M100 21h.1M92 26c2.5 2 5.5 2 8 0'/%3E%3Cpath d='M58 62l4 9 10 1-7 7 2 10-9-5-9 5 2-10-7-7 10-1z'/%3E%3Crect x='14' y='84' width='16' height='26' rx='3'/%3E%3Cpath d='M20 105h4'/%3E%3Cpath d='M104 96c-6-8-16-2-10 6l10 9 10-9c6-8-4-14-10-6z'/%3E%3Cpath d='M112 58a8 8 0 1 1-12 7'/%3E%3Cpath d='M54 116h16l-3 8H57z'/%3E%3C/svg%3E");
	background-size: 132px 132px;
}
.al-wa-thread {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	gap: 3px;
	padding: 10px 14px 12px;
	overflow: hidden;
	-webkit-mask-image: linear-gradient(to bottom, transparent, #000 16%);
	mask-image: linear-gradient(to bottom, transparent, #000 16%);
}
.al-wa-sys {
	flex: none;
	align-self: center;
	max-width: 90%;
	margin: 4px 0;
	padding: 5px 10px;
	border-radius: 8px;
	background: #182229;
	color: var(--wa-sub);
	font-size: 11.5px;
	line-height: 1.35;
	text-align: center;
	box-shadow: 0 1px 0.5px rgba(11, 20, 26, 0.13);
	opacity: 0;
	transform: translateY(6px);
	transition:
		opacity 0.3s,
		transform 0.35s var(--al-ease);
}
.al-wa-sys.is-in {
	opacity: 1;
	transform: none;
}
.al-wa-sys.is-date {
	font-size: 11px;
	letter-spacing: 0.02em;
}
.al-wa-sys.is-note {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	color: #ffd279;
}
.al-wa svg.al-wa-lock {
	width: 11px;
	height: 11px;
}
.al-wa-sys.is-route {
	border: 1px solid rgba(0, 168, 132, 0.45);
	color: #7ae3c3;
}
.al-wa-bubble {
	position: relative;
	flex: none;
	max-width: 78%;
	margin-top: 2px;
	padding: 6px 7px 8px 9px;
	border-radius: 7.5px;
	font-size: 13.4px;
	line-height: 1.38;
	box-shadow: 0 1px 0.5px rgba(11, 20, 26, 0.13);
	opacity: 0;
	transform: translateY(8px) scale(0.97);
	transition:
		opacity 0.3s var(--al-ease),
		transform 0.3s var(--al-ease);
}
.al-wa-bubble.is-in {
	opacity: 1;
	transform: none;
}
.al-wa-bubble.has-tail {
	margin-top: 8px;
}
.al-wa-in {
	align-self: flex-start;
	background: var(--wa-in);
	transform-origin: left top;
}
.al-wa-out {
	align-self: flex-end;
	background: var(--wa-out);
	transform-origin: right top;
}
.al-wa-in.has-tail {
	border-top-left-radius: 0;
}
.al-wa-out.has-tail {
	border-top-right-radius: 0;
}
/* ekor gelembung (segitiga di sudut atas) */
.al-wa-bubble.has-tail::before {
	content: "";
	position: absolute;
	top: 0;
	width: 8px;
	height: 13px;
}
.al-wa-in.has-tail::before {
	left: -8px;
	background: var(--wa-in);
	clip-path: polygon(0 0, 100% 0, 100% 100%);
}
.al-wa-out.has-tail::before {
	right: -8px;
	background: var(--wa-out);
	clip-path: polygon(0 0, 100% 0, 0 100%);
}
.al-wa-msg {
	white-space: pre-wrap;
	overflow-wrap: anywhere;
}
/* jam + centang mengambang di pojok kanan bawah, seperti WhatsApp */
.al-wa-meta {
	float: right;
	display: inline-flex;
	align-items: center;
	gap: 3px;
	margin: 6px 0 -5px 10px;
	font-size: 10.5px;
	line-height: 1;
	color: rgba(233, 237, 239, 0.6);
	white-space: nowrap;
}
.al-wa-out .al-wa-meta {
	color: rgba(255, 255, 255, 0.6);
}
.al-wa-ticks {
	display: inline-grid;
	color: rgba(255, 255, 255, 0.6);
}
.al-wa-ticks svg.al-wa-ic {
	grid-area: 1 / 1;
	width: 16px;
	height: 16px;
	transition:
		opacity 0.2s,
		color 0.3s;
}
.al-wa-t2 {
	opacity: 0;
}
.al-wa-bubble[data-tick="2"] .al-wa-t1,
.al-wa-bubble[data-tick="read"] .al-wa-t1 {
	opacity: 0;
}
.al-wa-bubble[data-tick="2"] .al-wa-t2,
.al-wa-bubble[data-tick="read"] .al-wa-t2 {
	opacity: 1;
}
.al-wa-bubble[data-tick="read"] .al-wa-ticks {
	color: var(--wa-read);
}
.al-wa-composer {
	display: flex;
	align-items: flex-end;
	gap: 6px;
	padding: 6px 8px 8px;
	background: var(--wa-bg);
}
.al-wa-field {
	display: flex;
	flex: 1;
	align-items: center;
	gap: 10px;
	min-width: 0;
	min-height: 40px;
	padding: 0 12px;
	border-radius: 21px;
	background: var(--wa-field);
	color: var(--wa-sub);
}
.al-wa-text {
	flex: 1;
	min-width: 0;
	overflow: hidden;
	font-size: 13.5px;
	white-space: nowrap;
	text-overflow: ellipsis;
	direction: ltr;
}
.al-wa-ph {
	color: var(--wa-sub);
}
.al-wa-input {
	color: var(--wa-text);
}
.al-wa-composer.is-typing .al-wa-input::after {
	content: "";
	display: inline-block;
	width: 1.5px;
	height: 1.05em;
	margin-left: 1px;
	vertical-align: -2px;
	background: var(--wa-green);
	animation: al-blink 0.9s steps(1) infinite;
}
.al-wa-input.al-caret::after {
	content: none;
}
.al-wa-composer.is-typing .al-wa-cam {
	display: none;
}
.al-wa-send {
	display: grid;
	flex: none;
	place-items: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--wa-green);
	color: #0b141a;
	transition: transform 0.2s var(--al-ease);
}
.al-wa-send svg.al-wa-ic {
	grid-area: 1 / 1;
	width: 20px;
	height: 20px;
	transition:
		opacity 0.18s,
		transform 0.25s var(--al-ease);
}
.al-wa svg.al-wa-plane {
	width: 18px;
	height: 18px;
	margin-left: 2px;
	opacity: 0;
	transform: scale(0.4) rotate(-40deg);
}
.al-wa-composer.is-typing .al-wa-mic {
	opacity: 0;
	transform: scale(0.4);
}
.al-wa-composer.is-typing .al-wa-plane {
	opacity: 1;
	transform: none;
}
.al-intent {
	position: absolute;
	left: 50%;
	bottom: 10px;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	gap: 7px;
	max-width: calc(100% - 24px);
	padding: 7px 11px;
	border: 1px solid rgba(255, 77, 0, 0.55);
	border-radius: 999px;
	background: rgba(12, 12, 16, 0.94);
	backdrop-filter: blur(8px);
	box-shadow: 0 10px 30px -10px rgba(255, 77, 0, 0.7);
	color: #ffd2bd;
	font-family: var(--al-mono);
	font-size: 10px;
	white-space: nowrap;
	opacity: 0;
	transform: translate(-50%, 8px) scale(0.95);
	transition:
		opacity 0.3s,
		transform 0.35s var(--al-ease);
	pointer-events: none;
}
.al-intent.is-in {
	opacity: 1;
	transform: translate(-50%, 0);
}
.al-intent .al-ic {
	width: 13px;
	height: 13px;
	color: var(--al-accent);
	animation: al-spin 2.4s linear infinite;
}
.al-intent-label {
	letter-spacing: 0.16em;
	color: var(--al-accent);
}
.al-intent-tag {
	padding: 2px 7px;
	border-radius: 6px;
	background: rgba(255, 77, 0, 0.22);
	color: #fff;
	font-weight: 500;
}
.al-intent-text {
	overflow: hidden;
	text-overflow: ellipsis;
	color: var(--al-muted);
}
.al-intent.is-human {
	border-color: rgba(0, 168, 132, 0.6);
}
.al-intent.is-human .al-intent-tag {
	background: rgba(0, 168, 132, 0.25);
}
/* notifikasi admin — turun dari atas seperti banner notifikasi HP */
.al-toast {
	position: absolute;
	top: 8px;
	left: 50%;
	z-index: 3;
	display: flex;
	align-items: center;
	gap: 10px;
	width: min(300px, calc(100% - 20px));
	padding: 9px 12px;
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 16px;
	background: rgba(32, 44, 51, 0.97);
	backdrop-filter: blur(10px);
	box-shadow: 0 18px 40px -14px rgba(0, 0, 0, 0.95);
	opacity: 0;
	transform: translate(-50%, -130%);
	transition:
		opacity 0.35s,
		transform 0.55s cubic-bezier(0.2, 1.25, 0.3, 1);
}
.al-toast.is-in {
	opacity: 1;
	transform: translate(-50%, 0);
}
.al-toast > span:last-child {
	display: flex;
	flex-direction: column;
	min-width: 0;
}
.al-toast b {
	font-size: 12.5px;
	font-weight: 600;
	color: var(--wa-text);
}
.al-toast small {
	font-size: 11px;
	color: var(--wa-sub);
}
.al-toast-ic {
	display: grid;
	flex: none;
	place-items: center;
	width: 30px;
	height: 30px;
	border-radius: 9px;
	background: var(--wa-green);
	color: #0b141a;
}
.al-toast.is-in .al-toast-ic .al-ic {
	animation: al-ring 0.9s ease-in-out 2;
}
@keyframes al-ring {
	20%,
	60% {
		transform: rotate(14deg);
	}
	40%,
	80% {
		transform: rotate(-14deg);
	}
}

/* ═══ 2. prospek ═══ */
.al-leads {
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.al-src-row {
	display: flex;
	gap: 6px;
}
.al-src {
	display: inline-flex;
	flex: 1;
	align-items: center;
	justify-content: center;
	gap: 6px;
	min-width: 0;
	padding: 7px 6px;
	border: 1px solid var(--al-line);
	border-radius: 999px;
	font-family: var(--al-mono);
	font-size: 9px;
	letter-spacing: 0.1em;
	white-space: nowrap;
	color: var(--al-muted);
	transition:
		color 0.3s,
		border-color 0.3s,
		background 0.3s;
}
.al-src i {
	flex: none;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--al-dim);
}
.al-src.is-hot {
	border-color: rgba(255, 77, 0, 0.6);
	background: rgba(255, 77, 0, 0.12);
	color: #fff;
}
.al-src.is-hot i {
	background: var(--al-accent);
	animation: al-ping-o 1.1s ease-out infinite;
}
@keyframes al-ping-o {
	from {
		box-shadow: 0 0 0 0 rgba(255, 77, 0, 0.7);
	}
	to {
		box-shadow: 0 0 0 7px rgba(255, 77, 0, 0);
	}
}
.al-lead-list {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 7px;
	min-height: 0;
	overflow: hidden;
}
.al-lead {
	display: grid;
	flex: none;
	grid-template-columns: 30px minmax(0, 1fr) 96px auto;
	align-items: center;
	gap: 10px;
	padding: 8px 10px;
	border: 1px solid var(--al-line);
	border-radius: 12px;
	background: var(--al-card);
	opacity: 0;
	transform: translateX(-18px);
	transition:
		opacity 0.4s var(--al-ease),
		transform 0.45s var(--al-ease),
		border-color 0.4s,
		background 0.4s;
}
.al-lead.is-in {
	opacity: 1;
	transform: none;
}
.al-lead[data-step="3"] {
	border-color: rgba(53, 208, 127, 0.45);
	background: rgba(53, 208, 127, 0.06);
}
.al-lead[data-step="nurture"] {
	opacity: 0.6;
}
.al-lead-ava {
	display: grid;
	place-items: center;
	width: 30px;
	height: 30px;
	border: 1px solid var(--al-line);
	border-radius: 9px;
	background: #16161c;
	color: var(--al-accent);
	font-family: var(--al-mono);
	font-size: 10px;
	font-weight: 700;
}
.al-lead-who {
	display: flex;
	flex-direction: column;
	min-width: 0;
}
.al-lead-who b {
	overflow: hidden;
	font-size: 12.5px;
	white-space: nowrap;
	text-overflow: ellipsis;
}
.al-lead-who small {
	font-family: var(--al-mono);
	font-size: 8.5px;
	letter-spacing: 0.1em;
	color: var(--al-dim);
}
.al-score {
	display: flex;
	align-items: center;
	gap: 6px;
}
.al-score-bar {
	flex: 1;
	height: 5px;
	overflow: hidden;
	border-radius: 5px;
	background: rgba(255, 255, 255, 0.08);
}
.al-score-bar i {
	display: block;
	width: var(--w, 0%);
	height: 100%;
	border-radius: inherit;
	background: linear-gradient(90deg, var(--al-accent), #ffb37a);
	transition: width 0.9s var(--al-ease);
}
.al-lead[data-hot="true"] .al-score-bar i {
	background: linear-gradient(90deg, var(--al-accent), var(--al-ok));
}
.al-score-num {
	width: 22px;
	font-family: var(--al-mono);
	font-size: 11px;
	text-align: right;
}
.al-lead-status {
	padding: 4px 8px;
	border: 1px solid var(--al-line);
	border-radius: 999px;
	font-family: var(--al-mono);
	font-size: 9.5px;
	white-space: nowrap;
	color: var(--al-muted);
}
.al-lead[data-step="1"] .al-lead-status,
.al-lead[data-step="2"] .al-lead-status {
	border-color: rgba(255, 77, 0, 0.45);
	color: #ffc2a6;
}
.al-lead[data-step="3"] .al-lead-status {
	border-color: rgba(53, 208, 127, 0.5);
	background: rgba(53, 208, 127, 0.12);
	color: var(--al-ok);
}
.al-lead-status.is-pop {
	animation: al-pop 0.4s var(--al-ease);
}
@keyframes al-pop {
	from {
		transform: scale(0.8);
		opacity: 0.2;
	}
}
.al-funnel {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 6px;
}
.al-funnel-cell {
	display: flex;
	flex-direction: column;
	gap: 3px;
	padding: 7px 8px;
	border: 1px solid var(--al-line);
	border-radius: 10px;
	background: var(--al-card);
}
.al-funnel-cell small {
	font-family: var(--al-mono);
	font-size: 8px;
	letter-spacing: 0.12em;
	color: var(--al-muted);
}
.al-funnel-cell b {
	font-family: var(--al-disp);
	font-size: 17px;
}
.al-funnel-cell:last-child b {
	color: var(--al-ok);
}
.al-funnel-bar {
	height: 3px;
	overflow: hidden;
	border-radius: 3px;
	background: rgba(255, 255, 255, 0.07);
}
.al-funnel-bar i {
	display: block;
	width: var(--w, 0%);
	height: 100%;
	background: var(--al-accent);
	transition: width 0.6s var(--al-ease);
}
.al-funnel-cell:last-child .al-funnel-bar i {
	background: var(--al-ok);
}

/* ═══ 3. operasional ═══ */
.al-ops {
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.al-ops-graph {
	position: relative;
	display: grid;
	flex: 1;
	grid-template-columns: minmax(0, 1fr) 96px minmax(0, 1fr);
	align-items: center;
	column-gap: 22px;
	min-height: 0;
}
/* Rel vertikal penghubung kabel ke mesin. */
.al-ops-graph::before,
.al-ops-graph::after {
	content: "";
	position: absolute;
	top: 17%;
	bottom: 17%;
	width: 2px;
	background: rgba(255, 255, 255, 0.12);
	transition: background 0.4s;
}
.al-ops-graph::before {
	left: calc(50% - 49px);
}
.al-ops-graph::after {
	right: calc(50% - 49px);
}
.al-ops.is-flow .al-ops-graph::before {
	background: linear-gradient(rgba(255, 77, 0, 0.2), rgba(255, 77, 0, 0.8), rgba(255, 77, 0, 0.2));
}
.al-ops.is-done .al-ops-graph::after {
	background: linear-gradient(rgba(53, 208, 127, 0.2), rgba(53, 208, 127, 0.8), rgba(53, 208, 127, 0.2));
}
.al-ops-col {
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.al-node {
	position: relative;
	display: flex;
	align-items: center;
	gap: 8px;
	min-width: 0;
	padding: 8px 10px;
	border: 1px solid var(--al-line);
	border-radius: 12px;
	background: var(--al-card);
	opacity: 0.45;
	transition:
		opacity 0.4s,
		border-color 0.4s,
		box-shadow 0.4s,
		transform 0.4s var(--al-ease);
}
.al-node.is-on {
	opacity: 1;
	transform: translateY(-1px);
}
.al-node-src.is-on {
	border-color: rgba(255, 77, 0, 0.45);
	box-shadow: 0 10px 26px -16px rgba(255, 77, 0, 0.9);
}
.al-node-out.is-on {
	border-color: rgba(53, 208, 127, 0.5);
	box-shadow: 0 10px 26px -16px rgba(53, 208, 127, 0.8);
}
.al-node-ic {
	display: grid;
	flex: none;
	place-items: center;
	width: 28px;
	height: 28px;
	border-radius: 8px;
	background: rgba(255, 255, 255, 0.05);
	color: var(--al-accent);
}
.al-node-out .al-node-ic {
	color: var(--al-dim);
}
.al-node-out.is-on .al-node-ic {
	color: var(--al-ok);
}
.al-node-txt {
	display: flex;
	flex-direction: column;
	min-width: 0;
}
.al-node-txt small {
	overflow: hidden;
	font-family: var(--al-mono);
	font-size: 9px;
	letter-spacing: 0.06em;
	white-space: nowrap;
	text-overflow: ellipsis;
	color: var(--al-muted);
}
.al-node-val {
	font-size: 12px;
	color: var(--al-muted);
	white-space: nowrap;
}
.al-node-val b {
	font-family: var(--al-disp);
	font-size: 15px;
	color: #fff;
}
.al-node-out .al-node-txt b {
	overflow: hidden;
	font-size: 12px;
	white-space: nowrap;
	text-overflow: ellipsis;
}
.al-node-out.is-on .al-node-txt small {
	color: var(--al-ok);
}
.al-wire {
	position: absolute;
	top: 50%;
	width: 23px;
	height: 2px;
	background: rgba(255, 255, 255, 0.12);
}
.al-node-src .al-wire {
	left: 100%;
}
.al-node-out .al-wire {
	right: 100%;
}
.al-packet {
	position: absolute;
	top: -2px;
	left: 0;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--al-accent);
	box-shadow: 0 0 10px var(--al-accent);
	opacity: 0;
}
.al-node-out .al-packet {
	background: var(--al-ok);
	box-shadow: 0 0 10px var(--al-ok);
}
.al-ops.is-flow .al-node-src .al-packet {
	animation: al-packet 0.8s linear infinite;
}
.al-ops.is-done .al-node-out .al-packet {
	animation: al-packet 0.8s linear infinite;
}
.al-ops-col .al-node:nth-child(2) .al-packet {
	animation-delay: 0.25s;
}
.al-ops-col .al-node:nth-child(3) .al-packet {
	animation-delay: 0.5s;
}
@keyframes al-packet {
	0% {
		left: 0;
		opacity: 0;
	}
	20%,
	80% {
		opacity: 1;
	}
	100% {
		left: calc(100% - 6px);
		opacity: 0;
	}
}
.al-engine {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding-top: 92px;
	text-align: center;
}
.al-engine-ring {
	position: absolute;
	top: 0;
	left: 50%;
	width: 88px;
	height: 88px;
	margin-left: -44px;
	border: 1.5px dashed rgba(255, 77, 0, 0.55);
	border-radius: 50%;
	animation: al-spin 14s linear infinite;
}
.al-engine-core {
	position: absolute;
	top: 17px;
	left: 50%;
	display: grid;
	place-items: center;
	width: 54px;
	height: 54px;
	margin-left: -27px;
	border: 1px solid rgba(255, 77, 0, 0.6);
	border-radius: 50%;
	background: radial-gradient(circle, rgba(255, 77, 0, 0.4), rgba(255, 77, 0, 0.05) 70%);
	box-shadow: 0 0 30px -4px rgba(255, 77, 0, 0.6);
	color: #ffb899;
}
.al-ic.al-engine-gear {
	width: 26px;
	height: 26px;
	animation: al-spin 7s linear infinite;
}
.al-ops.is-flow .al-engine-ring {
	animation-duration: 2.6s;
	border-color: var(--al-accent);
}
.al-ops.is-flow .al-engine-gear {
	animation-duration: 1.3s;
}
.al-ops.is-done .al-engine-core {
	border-color: rgba(53, 208, 127, 0.7);
	box-shadow: 0 0 30px -4px rgba(53, 208, 127, 0.6);
}
.al-engine b {
	font-family: var(--al-mono);
	font-size: 9px;
	letter-spacing: 0.18em;
	color: #fff;
}
.al-engine small {
	margin-top: 2px;
	font-family: var(--al-mono);
	font-size: 8.5px;
	letter-spacing: 0.14em;
	color: var(--al-accent);
}
.al-ops.is-done .al-engine small {
	color: var(--al-ok);
}
.al-ops-chart {
	padding: 9px 11px 7px;
	border: 1px solid var(--al-line);
	border-radius: 12px;
	background: var(--al-card);
}
.al-ops-chart-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
}
.al-ops-chart-head small {
	font-family: var(--al-mono);
	font-size: 9px;
	letter-spacing: 0.14em;
	color: var(--al-muted);
}
.al-ops-chart-head b {
	font-family: var(--al-disp);
	font-size: 16px;
	color: var(--al-accent);
}
.al-bars {
	display: grid;
	grid-template-columns: repeat(7, minmax(0, 1fr));
	gap: 6px;
	height: 58px;
	margin-top: 4px;
}
.al-bar {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-end;
	gap: 3px;
}
.al-bar i {
	width: 100%;
	max-width: 22px;
	height: calc(var(--h, 4%) * 0.72);
	border-radius: 4px 4px 2px 2px;
	background: linear-gradient(to top, rgba(255, 77, 0, 0.3), var(--al-accent-2));
	transition: height 0.9s var(--al-ease);
}
.al-bar:nth-child(2) i {
	transition-delay: 0.05s;
}
.al-bar:nth-child(3) i {
	transition-delay: 0.1s;
}
.al-bar:nth-child(4) i {
	transition-delay: 0.15s;
}
.al-bar:nth-child(5) i {
	transition-delay: 0.2s;
}
.al-bar:nth-child(6) i {
	transition-delay: 0.25s;
}
.al-bar:nth-child(7) i {
	transition-delay: 0.3s;
}
.al-bar small {
	font-family: var(--al-mono);
	font-size: 8px;
	color: var(--al-dim);
}
.al-report {
	position: absolute;
	top: 10px;
	right: 10px;
	bottom: 10px;
	z-index: 3;
	display: flex;
	flex-direction: column;
	gap: 2px;
	width: min(260px, calc(100% - 20px));
	padding: 12px 14px;
	border: 1px solid rgba(255, 77, 0, 0.45);
	border-radius: 14px;
	background: rgba(12, 12, 16, 0.97);
	box-shadow: 0 24px 60px -20px rgba(0, 0, 0, 0.95);
	opacity: 0;
	transform: translateX(110%) rotate(2deg);
	transition:
		opacity 0.35s,
		transform 0.5s var(--al-ease);
}
.al-report.is-in {
	opacity: 1;
	transform: none;
}
.al-report-head {
	display: grid;
	grid-template-columns: auto 1fr;
	align-items: center;
	gap: 2px 8px;
	margin-bottom: 8px;
	color: var(--al-accent);
}
.al-report-head b {
	font-size: 12.5px;
	color: #fff;
}
.al-report-head small {
	grid-column: 2;
	font-family: var(--al-mono);
	font-size: 9px;
	color: var(--al-muted);
}
.al-report-row {
	display: flex;
	justify-content: space-between;
	gap: 8px;
	padding: 7px 0;
	border-bottom: 1px dashed var(--al-line);
	font-size: 12px;
	color: var(--al-muted);
}
.al-report-row b {
	color: #fff;
}

/* ═══ 4. konten ═══ */
.al-konten {
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.al-file {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 10px;
	border: 1px solid var(--al-line);
	border-radius: 12px;
	background: var(--al-card);
}
.al-file > .al-ic {
	width: 20px;
	height: 20px;
	color: var(--al-accent);
}
.al-file > span {
	display: flex;
	flex-direction: column;
	min-width: 0;
}
.al-file > span b {
	overflow: hidden;
	font-size: 12.5px;
	white-space: nowrap;
	text-overflow: ellipsis;
}
.al-file > span small {
	font-family: var(--al-mono);
	font-size: 9px;
	color: var(--al-dim);
}
.al-file > b {
	flex: none;
	margin-left: auto;
	padding: 3px 8px;
	border: 1px solid rgba(255, 77, 0, 0.45);
	border-radius: 999px;
	font-family: var(--al-mono);
	font-size: 9px;
	letter-spacing: 0.1em;
	color: var(--al-accent);
}
.al-timeline {
	position: relative;
	flex: none;
	height: 60px;
	padding: 6px;
	overflow: hidden;
	border: 1px solid var(--al-line);
	border-radius: 10px;
	background: #0b0b10;
}
.al-konten.is-cut .al-timeline {
	animation: al-flash 0.6s ease-out;
}
@keyframes al-flash {
	30% {
		box-shadow: inset 0 0 0 2px var(--al-accent);
		background: #1a0c05;
	}
}
.al-wave {
	display: flex;
	align-items: center;
	gap: 2px;
	height: 100%;
}
.al-wave i {
	flex: 1;
	height: var(--h, 40%);
	border-radius: 2px;
	background: rgba(255, 255, 255, 0.16);
	transition: background 0.4s;
}
.al-konten.is-scan .al-wave i {
	background: rgba(255, 255, 255, 0.26);
}
.al-seg {
	position: absolute;
	top: 5px;
	bottom: 5px;
	left: var(--l);
	width: var(--w);
	border: 1px solid var(--al-accent);
	border-radius: 6px;
	background: rgba(255, 77, 0, 0.24);
	box-shadow: 0 0 18px rgba(255, 77, 0, 0.4);
	opacity: 0;
	transform: scaleY(0.3);
	transition:
		opacity 0.3s,
		transform 0.4s var(--al-ease);
}
.al-seg.is-in {
	opacity: 1;
	transform: none;
}
.al-seg small {
	position: absolute;
	top: 3px;
	left: 3px;
	padding: 1px 4px;
	border-radius: 4px;
	background: var(--al-accent);
	font-family: var(--al-mono);
	font-size: 8px;
	white-space: nowrap;
	color: #fff;
}
@container (min-width: 440px) {
	.al-seg small::before {
		content: "HOOK · ";
	}
}
.al-playhead {
	position: absolute;
	top: 0;
	bottom: 0;
	left: var(--x, 0%);
	width: 2px;
	background: #fff;
	box-shadow: 0 0 10px #fff;
	transition: left 0.85s var(--al-ease);
}
.al-playhead::before {
	content: "";
	position: absolute;
	top: 0;
	left: -4px;
	border: 5px solid transparent;
	border-top-color: #fff;
}
.al-reels {
	display: grid;
	flex: 1;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 8px;
	min-height: 0;
}
.al-reel {
	display: flex;
	flex-direction: column;
	min-height: 0;
	overflow: hidden;
	border: 1px solid var(--al-line);
	border-radius: 12px;
	background: var(--al-card);
	opacity: 0;
	transform: translateY(16px) rotate(-3deg) scale(0.94);
	transition:
		opacity 0.4s,
		transform 0.5s cubic-bezier(0.2, 1.3, 0.3, 1);
}
.al-reel:nth-child(2) {
	transform: translateY(16px) rotate(2deg) scale(0.94);
}
.al-reel.is-in {
	opacity: 1;
	transform: none;
}
.al-reel-thumb {
	position: relative;
	display: grid;
	flex: 1;
	place-items: center;
	min-height: 54px;
	background:
		radial-gradient(circle at 30% 20%, rgba(255, 255, 255, 0.25), transparent 45%),
		linear-gradient(160deg, #ff4d00, #3a1000);
}
.al-reel:nth-child(2) .al-reel-thumb {
	background:
		radial-gradient(circle at 70% 25%, rgba(255, 255, 255, 0.22), transparent 45%),
		linear-gradient(160deg, #ff7a3d, #2d1650);
}
.al-reel:nth-child(3) .al-reel-thumb {
	background:
		radial-gradient(circle at 40% 30%, rgba(255, 255, 255, 0.22), transparent 45%),
		linear-gradient(160deg, #ffb37a, #0d3a2c);
}
.al-reel-thumb::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 3px;
	background: #fff;
	transform: scaleX(0);
	transform-origin: left;
}
.al-reel.is-play .al-reel-thumb::after {
	animation: al-progress 2.2s linear forwards;
}
@keyframes al-progress {
	to {
		transform: scaleX(1);
	}
}
.al-ic.al-reel-play {
	width: 24px;
	height: 24px;
	fill: rgba(255, 255, 255, 0.92);
	stroke: none;
	filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.5));
	transition: transform 0.3s var(--al-ease);
}
.al-reel.is-play .al-reel-play {
	animation: al-beat 0.7s ease-in-out 3;
}
@keyframes al-beat {
	50% {
		transform: scale(1.25);
	}
}
.al-reel-thumb small {
	position: absolute;
	right: 5px;
	bottom: 6px;
	padding: 1px 4px;
	border-radius: 4px;
	background: rgba(0, 0, 0, 0.6);
	font-family: var(--al-mono);
	font-size: 8.5px;
}
.al-reel p {
	min-height: 3.1em;
	margin: 0;
	padding: 7px 8px 2px;
	font-size: 11px;
	line-height: 1.38;
	color: #eee;
}
.al-reel-tag {
	padding: 0 8px 7px;
	font-family: var(--al-mono);
	font-size: 8.5px;
	letter-spacing: 0.08em;
	color: var(--al-accent);
}
.al-sched {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 8px;
}
.al-sched-item {
	display: flex;
	align-items: center;
	gap: 7px;
	min-width: 0;
	padding: 7px 8px;
	border: 1px solid var(--al-line);
	border-radius: 10px;
	opacity: 0.35;
	transition:
		opacity 0.4s,
		border-color 0.4s,
		background 0.4s;
}
.al-sched-item.is-in {
	opacity: 1;
	border-color: rgba(53, 208, 127, 0.45);
	background: rgba(53, 208, 127, 0.07);
}
.al-sched-item .al-ic {
	color: var(--al-ok);
}
.al-sched-item > span {
	display: flex;
	flex-direction: column;
	min-width: 0;
}
.al-sched-item b {
	overflow: hidden;
	font-size: 11px;
	white-space: nowrap;
	text-overflow: ellipsis;
}
.al-sched-item small {
	font-family: var(--al-mono);
	font-size: 8.5px;
	color: var(--al-muted);
}

/* ═══ 5. custom ═══ */
.al-custom {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 12px;
}
.al-procs {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 7px;
}
.al-scan {
	display: none;
}
.al-proc {
	display: grid;
	grid-template-columns: 22px minmax(0, 1fr) auto;
	align-items: center;
	gap: 8px;
	padding: 9px 10px;
	border: 1px solid var(--al-line);
	border-radius: 12px;
	background: var(--al-card);
	text-align: left;
	cursor: pointer;
	transition:
		border-color 0.3s,
		background 0.3s,
		box-shadow 0.3s;
}
.al-proc:hover {
	border-color: rgba(255, 77, 0, 0.4);
}
.al-proc.is-scan {
	border-color: var(--al-accent);
	background: linear-gradient(90deg, rgba(255, 77, 0, 0.16), rgba(255, 77, 0, 0.02));
}
.al-proc.is-sel {
	border-color: rgba(255, 77, 0, 0.7);
	box-shadow: inset 3px 0 0 var(--al-accent);
}
.al-proc-num {
	font-family: var(--al-mono);
	font-size: 9px;
	color: var(--al-dim);
}
.al-proc-who {
	display: flex;
	flex-direction: column;
	min-width: 0;
}
.al-proc-who b {
	overflow: hidden;
	font-size: 12px;
	white-space: nowrap;
	text-overflow: ellipsis;
}
.al-proc-who small {
	font-family: var(--al-mono);
	font-size: 9px;
	color: var(--al-muted);
}
.al-verdict {
	padding: 3px 7px;
	border: 1px solid var(--al-line);
	border-radius: 999px;
	font-family: var(--al-mono);
	font-size: 8.5px;
	letter-spacing: 0.08em;
	white-space: nowrap;
	opacity: 0;
	transform: scale(0.7);
	transition:
		opacity 0.3s,
		transform 0.35s cubic-bezier(0.2, 1.4, 0.3, 1);
}
.al-proc.is-done .al-verdict {
	opacity: 1;
	transform: none;
}
.al-verdict[data-v="LAYAK"] {
	border-color: rgba(53, 208, 127, 0.5);
	background: rgba(53, 208, 127, 0.1);
	color: var(--al-ok);
}
.al-verdict[data-v="SEBAGIAN"] {
	border-color: rgba(255, 77, 0, 0.5);
	background: rgba(255, 77, 0, 0.1);
	color: #ffb899;
}
.al-verdict[data-v="MANUAL"] {
	color: var(--al-muted);
}
.al-bp {
	display: flex;
	flex-direction: column;
	gap: 10px;
	min-width: 0;
	padding: 12px;
	border: 1px dashed rgba(255, 255, 255, 0.16);
	border-radius: 14px;
	background:
		linear-gradient(rgba(255, 77, 0, 0.06) 1px, transparent 1px) 0 0 / 16px 16px,
		linear-gradient(90deg, rgba(255, 77, 0, 0.06) 1px, transparent 1px) 0 0 / 16px 16px,
		#0a0a0e;
	opacity: 0.45;
	transition:
		opacity 0.4s,
		border-color 0.4s,
		box-shadow 0.4s;
}
.al-bp.is-in {
	opacity: 1;
}
.al-bp.is-ready {
	border-style: solid;
	border-color: rgba(53, 208, 127, 0.45);
	box-shadow: 0 18px 44px -24px rgba(53, 208, 127, 0.7);
}
.al-bp-head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 4px 8px;
}
.al-bp-head small {
	font-family: var(--al-mono);
	font-size: 9px;
	letter-spacing: 0.2em;
	color: var(--al-accent);
}
.al-bp-head b {
	font-size: 13px;
}
.al-bp-state {
	margin-left: auto;
	font-family: var(--al-mono);
	font-size: 8.5px;
	letter-spacing: 0.1em;
	color: var(--al-muted);
}
.al-bp.is-ready .al-bp-state {
	color: var(--al-ok);
}
.al-bp-flow {
	display: flex;
	flex-direction: column;
}
.al-bp-node {
	display: flex;
	align-items: center;
	gap: 8px;
	min-width: 0;
	padding: 7px 9px;
	border: 1px solid var(--al-line);
	border-radius: 10px;
	background: rgba(10, 10, 14, 0.85);
	opacity: 0;
	transform: translateY(6px);
	transition:
		opacity 0.35s,
		transform 0.4s var(--al-ease),
		border-color 0.4s;
}
.al-bp-node.is-in {
	opacity: 1;
	transform: none;
}
.al-bp-node:nth-child(3).is-in {
	border-color: rgba(255, 77, 0, 0.5);
}
.al-bp-node small {
	flex: none;
	width: 46px;
	font-family: var(--al-mono);
	font-size: 8px;
	letter-spacing: 0.14em;
	color: var(--al-accent);
}
.al-bp-node b {
	overflow: hidden;
	font-size: 11.5px;
	font-weight: 600;
	white-space: nowrap;
	text-overflow: ellipsis;
}
.al-bp-node .al-ic {
	margin-left: auto;
	color: var(--al-accent);
}
.al-bp-link {
	width: 2px;
	height: 14px;
	margin-left: 22px;
	background: var(--al-line);
}
.al-bp-link i {
	display: block;
	height: 100%;
	background: var(--al-accent);
	box-shadow: 0 0 8px var(--al-accent);
	transform: scaleY(0);
	transform-origin: top;
	transition: transform 0.3s ease-out;
}
.al-bp-link.is-in i {
	transform: none;
}
.al-bp-note {
	display: none;
	margin: 0;
	padding-left: 10px;
	border-left: 2px solid var(--al-dim);
	font-size: 12px;
	line-height: 1.55;
	color: var(--al-muted);
}
.al-bp.is-manual .al-bp-flow {
	display: none;
}
.al-bp.is-manual .al-bp-note {
	display: block;
}

/* ── layar sempit (HP) ── */
@container (max-width: 459px) {
	.al-scene {
		padding: 12px;
	}
	.al-scene.al-wa {
		padding: 0;
	}
	.al-wa-bubble {
		max-width: 86%;
		font-size: 12.8px;
	}
	.al-wa-thread {
		padding: 8px 10px 10px;
	}
	.al-wa-actions {
		gap: 14px;
	}
	.al-wa svg.al-wa-ic {
		width: 18px;
		height: 18px;
	}
	.al-intent-text {
		display: none;
	}
	.al-lead {
		grid-template-columns: 26px minmax(0, 1fr) 24px auto;
		gap: 8px;
		padding: 7px 8px;
	}
	.al-lead-ava {
		width: 26px;
		height: 26px;
	}
	.al-score-bar {
		display: none;
	}
	.al-lead-status {
		padding: 3px 7px;
		font-size: 8.5px;
	}
	.al-src {
		font-size: 8px;
		letter-spacing: 0.04em;
	}
	.al-src i {
		display: none;
	}
	.al-ops-graph {
		grid-template-columns: minmax(0, 1fr) 66px minmax(0, 1fr);
		column-gap: 14px;
	}
	.al-ops-graph::before {
		left: calc(50% - 34px);
	}
	.al-ops-graph::after {
		right: calc(50% - 34px);
	}
	.al-wire {
		width: 15px;
	}
	.al-node {
		padding: 7px 8px;
	}
	.al-node-ic {
		display: none;
	}
	.al-engine {
		padding-top: 70px;
	}
	.al-engine-ring {
		width: 64px;
		height: 64px;
		margin-left: -32px;
	}
	.al-engine-core {
		top: 12px;
		width: 40px;
		height: 40px;
		margin-left: -20px;
	}
	.al-ic.al-engine-gear {
		width: 20px;
		height: 20px;
	}
	.al-engine b {
		font-size: 8px;
		letter-spacing: 0.1em;
	}
	.al-reel p {
		font-size: 10.3px;
	}
	.al-sched-item {
		gap: 5px;
		padding: 6px;
	}
	.al-sched-item .al-ic {
		width: 13px;
		height: 13px;
	}
	.al-custom {
		grid-template-columns: minmax(0, 1fr);
		gap: 9px;
	}
	.al-procs {
		gap: 5px;
	}
	.al-proc {
		padding: 6px 9px;
	}
	.al-bp {
		padding: 10px;
		gap: 8px;
	}
	.al-bp-flow {
		flex-direction: row;
		align-items: stretch;
	}
	.al-bp-node {
		flex: 1;
		flex-direction: column;
		align-items: flex-start;
		gap: 2px;
		padding: 6px;
	}
	.al-bp-node small {
		width: auto;
		font-size: 7.5px;
	}
	.al-bp-node b {
		font-size: 10px;
		white-space: normal;
		line-height: 1.25;
	}
	.al-bp-node .al-ic {
		display: none;
	}
	.al-bp-link {
		align-self: center;
		width: 8px;
		height: 2px;
		margin: 0;
	}
	.al-bp-link i {
		transform: scaleX(0);
		transform-origin: left;
	}
}

@keyframes al-spin {
	to {
		transform: rotate(360deg);
	}
}

/* Hemat Animasi (toggle situs) → semua gerak berhenti. */
html[data-reduced-motion="true"] .al *,
html[data-reduced-motion="true"] .al::before,
.al[data-reduced="true"] *,
.al[data-reduced="true"]::before {
	animation: none !important;
	transition: none !important;
}

/* Blok jasa DN — gaya bersama differentnetworkacademy.com/automation (pusat),
   differentnetwork.pages.dev, dan steffenkwik.pages.dev (2026-09-26, Claude
   Opus 5.5). Sumber tunggal di repo academy; salinan di dua situs statis dibuat
   `npm run lab:export`. Semua kelas berawalan `dns-` dan tiap elemen menyetel
   ukuran/margin sendiri supaya aturan global situs mana pun tidak mengubahnya. */

.dns {
	--dns-accent: #ff4d00;
	--dns-accent-2: #ff7a3d;
	--dns-chilli: #ff2d1a;
	--dns-ok: #2ecc71;
	--dns-text: #f5f5f5;
	--dns-muted: rgba(255, 255, 255, 0.6);
	--dns-dim: rgba(255, 255, 255, 0.38);
	--dns-line: rgba(255, 255, 255, 0.09);
	--dns-card: rgba(20, 20, 22, 0.78);
	--dns-card-hi: rgba(32, 32, 36, 0.78);
	--dns-disp: var(--font-archivo, "Archivo"), ui-sans-serif, system-ui, sans-serif;
	--dns-body: var(--font-archivo, "Archivo"), ui-sans-serif, system-ui, sans-serif;
	--dns-mono: var(--font-jetbrains-mono, "JetBrains Mono"), ui-monospace, monospace;
	--dns-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
	width: 100%;
	max-width: 61rem;
	margin-inline: auto;
	color: var(--dns-text);
	font-family: var(--dns-body);
	font-size: 16px;
	line-height: 1.5;
	text-align: left;
	-webkit-font-smoothing: antialiased;
}
.dns *,
.dns *::before,
.dns *::after {
	box-sizing: border-box;
}
/* Reset hanya untuk isi blok, BUKAN lab (lab punya gaya sendiri). */
:where(.dns) :where(h2, h3, h4, p, ol, ul, li, figure, details, summary):not(.al *) {
	margin: 0;
	padding: 0;
}
:where(.dns) :where(a):not(.al *) {
	color: inherit;
	text-decoration: none;
}
:where(.dns) :where(button):not(.al *) {
	width: auto;
	margin: 0;
	font: inherit;
	color: inherit;
	text-align: center;
	-webkit-tap-highlight-color: transparent;
}
:where(.dns) :where(img):not(.al *) {
	max-width: 100%;
}
:where(.dns) :where(a, button, summary, [tabindex]):not(.al *):focus-visible {
	outline: 2px solid var(--dns-accent-2);
	outline-offset: 3px;
}
.dns svg.dns-ic {
	width: 18px;
	height: 18px;
	flex: none;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
}
.dns svg.dns-ic-fill {
	fill: currentColor;
	stroke: none;
}
.dns-sr {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

/* ── judul bagian ── */
.dns-sec {
	position: relative;
	margin-top: 80px;
	scroll-margin-top: 96px;
}
.dns > .dns-sec:first-child {
	margin-top: 0;
}
.dns-eyebrow {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	font-family: var(--dns-mono);
	font-size: 0.75rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--dns-accent);
	text-align: center;
}
.dns-eyebrow span {
	width: 28px;
	height: 1px;
	background: linear-gradient(90deg, transparent, var(--dns-accent));
}
.dns-eyebrow span:last-child {
	background: linear-gradient(90deg, var(--dns-accent), transparent);
}
.dns-h2 {
	margin-top: 16px;
	font-family: var(--dns-disp);
	font-stretch: 125%;
	font-weight: 800;
	font-size: clamp(1.5rem, 1.1rem + 1.6vw, 1.875rem);
	line-height: 1.08;
	letter-spacing: -0.01em;
	text-transform: uppercase;
	text-wrap: balance;
	color: var(--dns-text);
}
.dns-h3 {
	font-family: var(--dns-disp);
	font-stretch: 125%;
	font-weight: 800;
	font-size: clamp(1.25rem, 1rem + 1vw, 1.5rem);
	line-height: 1.1;
	text-transform: uppercase;
	text-wrap: balance;
	color: var(--dns-text);
}
.dns-h3-lg {
	margin-top: 10px;
	font-size: clamp(1.35rem, 1rem + 1.6vw, 1.9rem);
}
.dns-grad {
	color: var(--dns-accent);
}
@supports ((background-clip: text) or (-webkit-background-clip: text)) {
	.dns-grad {
		background-image: linear-gradient(97deg, var(--dns-accent-2) 10%, var(--dns-accent) 55%, var(--dns-chilli) 100%);
		-webkit-background-clip: text;
		background-clip: text;
		color: transparent;
	}
}
.dns-lead {
	max-width: 42rem;
	margin-top: 12px !important;
	font-size: clamp(0.875rem, 0.8rem + 0.3vw, 1rem);
	line-height: 1.65;
	color: var(--dns-muted);
}
.dns-kicker {
	display: block;
	font-family: var(--dns-mono);
	font-size: 0.66rem;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--dns-accent);
}
.dns-hide-sm {
	display: inline;
}
@media (max-width: 560px) {
	.dns-hide-sm {
		display: none;
	}
	.dns-sec {
		margin-top: 64px;
	}
}

/* ── kartu dasar ── */
.dns-card {
	position: relative;
	display: flex;
	flex-direction: column;
	isolation: isolate;
	overflow: hidden;
	border: 1px solid var(--dns-line);
	border-radius: 18px;
	background: linear-gradient(180deg, var(--dns-card-hi), var(--dns-card) 45%);
	box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 24px 50px -34px rgba(0, 0, 0, 0.9);
	transition:
		border-color 0.3s,
		transform 0.35s var(--dns-ease),
		box-shadow 0.35s;
}
.dns-card::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	border-radius: inherit;
	background: radial-gradient(320px circle at var(--sx, 50%) var(--sy, 30%), rgba(255, 77, 0, 0.12), transparent 70%);
	opacity: 0;
	transition: opacity 0.3s;
	pointer-events: none;
}
@media (hover: hover) {
	.dns-card:hover {
		border-color: rgba(255, 77, 0, 0.45);
		transform: translateY(-3px);
		box-shadow: 0 1px 0 rgba(255, 255, 255, 0.05) inset, 0 30px 60px -30px rgba(255, 77, 0, 0.45);
	}
	.dns-card:hover::after {
		opacity: 1;
	}
	.dns-card:hover .dns-go svg {
		transform: translateX(4px);
	}
}
a.dns-card:active {
	transform: scale(0.99);
}
.dns-card h3 {
	font-family: var(--dns-disp);
	font-stretch: 125%;
	font-weight: 800;
	font-size: 1.05rem;
	line-height: 1.15;
	text-transform: uppercase;
	color: var(--dns-text);
}
.dns-card p {
	font-size: 0.875rem;
	line-height: 1.65;
	color: var(--dns-muted);
}
.dns-tile {
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border: 1px solid rgba(255, 77, 0, 0.4);
	border-radius: 12px;
	background: linear-gradient(180deg, rgba(255, 77, 0, 0.18), rgba(255, 77, 0, 0.04));
	color: var(--dns-accent);
}
.dns-tile .dns-ic {
	width: 20px;
	height: 20px;
}
.dns-num {
	font-family: var(--dns-mono);
	font-size: 0.75rem;
	letter-spacing: 0.18em;
	color: var(--dns-dim);
}
.dns-flowline {
	display: block;
	margin-top: auto;
	padding-top: 14px;
	border-top: 1px solid var(--dns-line);
	font-family: var(--dns-mono);
	font-size: 0.7rem;
	line-height: 1.6;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.72);
}
.dns-go {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-family: var(--dns-mono);
	font-size: 0.68rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--dns-accent);
}
.dns-go .dns-ic {
	width: 14px;
	height: 14px;
	transition: transform 0.3s var(--dns-ease);
}

/* ── tombol ── */
.dns-btns {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}
.dns-btns-center {
	justify-content: center;
}
.dns-btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	min-height: 46px;
	padding: 12px 26px;
	border: 1px solid transparent;
	border-radius: 999px;
	background: linear-gradient(135deg, #ff4d00, #ff6a22);
	color: #fff;
	font-family: var(--dns-body);
	font-size: 0.82rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	white-space: nowrap;
	box-shadow: 0 14px 34px -14px rgba(255, 77, 0, 0.85);
	transition:
		transform 0.2s var(--dns-ease),
		box-shadow 0.25s,
		background 0.25s,
		border-color 0.25s;
}
.dns-btn:hover {
	transform: translateY(-2px);
	box-shadow: 0 18px 40px -14px rgba(255, 77, 0, 0.95);
}
.dns-btn:active {
	transform: scale(0.98);
}
.dns-btn .dns-ic {
	width: 16px;
	height: 16px;
}
.dns-btn.is-ghost {
	z-index: 2;
	border-color: rgba(255, 77, 0, 0.45);
	background: rgba(255, 255, 255, 0.03);
	box-shadow: none;
}
.dns-btn.is-ghost:hover {
	background: rgba(255, 77, 0, 0.12);
	box-shadow: 0 12px 30px -14px rgba(255, 77, 0, 0.6);
}
/* Tombol utama yang areanya diperlebar menutupi seluruh kartu (kartu =
   position:relative); tombol lain di kartu diberi z-index di atasnya. */
.dns-stretch {
	position: static;
}
.dns-stretch::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
}
.dns-textlink {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 44px;
	font-family: var(--dns-mono);
	font-size: 0.7rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--dns-muted);
	transition: color 0.2s;
}
.dns-textlink:hover {
	color: var(--dns-accent);
}
.dns-textlink .dns-ic {
	width: 14px;
	height: 14px;
}
@media (max-width: 560px) {
	.dns-btns {
		width: 100%;
	}
	.dns-btns .dns-btn {
		width: 100%;
		white-space: normal;
	}
}

/* ── lab ── */
.dns-lab {
	margin-top: 32px;
}
.dns-lab-fallback {
	display: grid;
	gap: 12px;
	margin-top: 32px !important;
	list-style: none;
}
@media (min-width: 640px) {
	.dns-lab-fallback {
		grid-template-columns: 1fr 1fr;
	}
}
.dns-lab-fallback li {
	padding: 18px;
	border: 1px solid var(--dns-line);
	border-radius: 16px;
	background: var(--dns-card);
}
.dns-lab-fallback b {
	display: block;
	font-family: var(--dns-mono);
	font-size: 0.7rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--dns-accent);
}
.dns-lab-fallback strong {
	display: block;
	margin: 8px 0 6px;
	font-size: 1rem;
	color: var(--dns-text);
}
.dns-lab-fallback p {
	margin-top: 4px;
	font-size: 0.85rem;
	line-height: 1.55;
	color: var(--dns-muted);
}
.dns-lab-fallback em {
	font-style: normal;
	font-weight: 600;
	color: var(--dns-text);
}
.dns-lab-fallback[hidden] {
	display: none;
}
.dns .al-panel.is-linked {
	cursor: pointer;
}
.dns .al-panel.is-linked :is(.al-tabs, .al-chip, button) {
	cursor: pointer;
}
.dns .al-cta {
	grid-column: 1 / -1;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	min-height: 52px;
	padding: 12px 18px;
	border: 1px solid rgba(255, 77, 0, 0.45);
	border-radius: 14px;
	background: linear-gradient(135deg, rgba(255, 77, 0, 0.22), rgba(255, 77, 0, 0.05));
	color: #fff;
	font-family: var(--al-mono, var(--dns-mono));
	font-size: 0.74rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	text-decoration: none;
	transition:
		background 0.25s,
		transform 0.2s var(--dns-ease),
		box-shadow 0.25s;
}
.dns .al-cta b {
	color: var(--dns-accent-2);
	font-weight: 700;
}
.dns .al-cta:hover {
	background: linear-gradient(135deg, rgba(255, 77, 0, 0.34), rgba(255, 77, 0, 0.1));
	box-shadow: 0 16px 40px -18px rgba(255, 77, 0, 0.9);
	transform: translateY(-1px);
}
.dns .al-cta .dns-ic {
	width: 18px;
	height: 18px;
	color: var(--dns-accent);
}
@media (min-width: 960px) {
	.dns .al-panel {
		grid-template-areas: "head screen" "flow screen" "cta cta";
	}
	.dns .al-cta {
		grid-area: cta;
	}
}

/* ── rail berjalan ── */
.dns-rail {
	position: relative;
	margin-top: 28px;
}
.dns-rail-track {
	display: flex;
	gap: 16px;
	padding: 6px 2px 16px;
	overflow-x: auto;
	overflow-y: hidden;
	scrollbar-width: none;
	overscroll-behavior-x: contain;
	cursor: grab;
}
.dns-rail-track::-webkit-scrollbar {
	display: none;
}
.dns-rail-track.is-dragging {
	cursor: grabbing;
	user-select: none;
}
.dns-rail-track.is-dragging :is(a, img) {
	pointer-events: none;
}
.dns-rail-track:focus-visible {
	outline-offset: 2px;
}
.dns-mq {
	position: absolute;
	top: 0;
	bottom: 16px;
	z-index: 5;
	display: grid;
	place-items: center;
	width: 52px;
	padding: 0;
	border: 0;
	background: none;
	color: #fff;
	cursor: pointer;
}
.dns-mq svg.dns-ic {
	width: 36px;
	height: 58px;
	stroke-width: 1.3;
	opacity: 0.6;
	filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.8));
	transition:
		opacity 0.36s,
		transform 0.22s var(--dns-ease);
}
.dns-mq:hover svg.dns-ic,
.dns-mq:focus-visible svg.dns-ic {
	opacity: 1;
	transform: scale(1.1);
}
.dns-mq-prev {
	left: -6px;
}
.dns-mq-next {
	right: -6px;
}
.dns-rail.is-idle .dns-mq:not(:focus-visible) svg.dns-ic {
	opacity: 0;
}
@media (max-width: 640px) {
	.dns-mq {
		width: 38px;
	}
	.dns-mq svg.dns-ic {
		width: 28px;
		height: 46px;
	}
}

/* ── 02 · jasa automasi ── */
.dns-svc {
	flex: none;
	gap: 12px;
	width: min(84vw, 21rem);
	min-height: 25rem;
	padding: 24px;
	user-select: none;
}
@media (min-width: 640px) {
	.dns-svc {
		width: 22rem;
	}
}
@media (min-width: 1024px) {
	.dns-svc {
		width: calc((100% - 16px) / 2);
	}
}
.dns-card-top {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 8px;
}
.dns-svc h3 {
	font-size: 1.12rem;
}
.dns-svc .dns-flowline {
	margin-top: auto;
}
.dns-more {
	gap: 10px;
	margin-top: 16px;
	padding: 24px;
	border-color: rgba(255, 77, 0, 0.3);
}
.dns-more::before {
	content: "";
	position: absolute;
	top: -1px;
	left: -1px;
	width: 14px;
	height: 14px;
	border-top: 2px solid var(--dns-accent);
	border-left: 2px solid var(--dns-accent);
	border-top-left-radius: 18px;
}
.dns-more p {
	max-width: 42rem;
}
.dns-more .dns-btns {
	margin-top: 8px;
}

/* ── 03 · grafis alur 6 tahap ── */
.dns-wf {
	margin-top: 32px;
	overflow: hidden;
	border: 1px solid rgba(255, 77, 0, 0.28);
	border-radius: 18px;
	background: radial-gradient(circle at 100% 0%, rgba(255, 77, 0, 0.14), transparent 45%), rgba(10, 10, 12, 0.9);
}
.dns-wf-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 12px 18px;
	border-bottom: 1px solid var(--dns-line);
	font-family: var(--dns-mono);
	font-size: 0.66rem;
	letter-spacing: 0.18em;
	color: var(--dns-muted);
}
.dns-wf-status {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	color: var(--dns-accent);
	white-space: nowrap;
}
.dns-wf-status b {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--dns-accent);
	animation: dns-blink 1.6s ease-in-out infinite;
}
.dns-wf-body {
	position: relative;
	display: grid;
	gap: 22px;
	align-items: center;
	padding: 18px;
}
@media (min-width: 900px) {
	.dns-wf-body {
		grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
		padding: 24px;
	}
}
.dns-stretch-cover {
	position: absolute;
	inset: 0;
	z-index: 3;
	border-radius: 0;
}
.dns-wf-body:hover .dns-go svg {
	transform: translateX(4px);
}
.dns-wf-browser {
	position: relative;
	overflow: hidden;
	border: 1px solid rgba(255, 77, 0, 0.25);
	border-radius: 14px;
	background: #050505;
	box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.9);
}
.dns-wf-bar {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 11px;
	border-bottom: 1px solid var(--dns-line);
	background: #111;
}
.dns-dots {
	display: inline-flex;
	gap: 5px;
}
.dns-dots i {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: rgba(255, 77, 77, 0.7);
}
.dns-dots i:nth-child(2) {
	background: rgba(255, 77, 0, 0.7);
}
.dns-dots i:nth-child(3) {
	background: rgba(46, 204, 113, 0.7);
}
.dns-wf-url {
	display: inline-flex;
	flex: 1;
	align-items: center;
	gap: 6px;
	max-width: 16rem;
	margin: 0 auto;
	padding: 3px 11px;
	border-radius: 999px;
	background: rgba(0, 0, 0, 0.6);
	font-family: var(--dns-mono);
	font-size: 0.62rem;
	color: var(--dns-muted);
}
.dns-wf-url .dns-ic {
	width: 10px;
	height: 10px;
}
.dns-wf-browser[data-stage="5"] .dns-wf-url {
	color: #fff;
}
.dns-wf-canvas {
	position: relative;
	aspect-ratio: 16 / 10;
	container-type: inline-size;
	background: radial-gradient(circle at 70% 0%, rgba(255, 77, 0, 0.12), transparent 50%), #070707;
}
.dns-wf-layer {
	position: absolute;
	inset: 0;
	opacity: 0;
	transform: translateY(2%);
	pointer-events: none;
	transition:
		opacity 0.5s var(--dns-ease),
		transform 0.5s var(--dns-ease);
}
.dns-wf-browser[data-stage="0"] .dns-wf-research,
.dns-wf-browser:not([data-stage="0"]) .dns-wf-site,
.dns-wf-browser[data-stage="3"] .dns-wf-code,
.dns-wf-browser[data-stage="4"] .dns-wf-test,
.dns-wf-browser[data-stage="5"] .dns-wf-live {
	opacity: 1;
	transform: none;
}
.dns-wf-research {
	display: flex;
	flex-direction: column;
	gap: 5cqw;
	padding: 8cqw 9cqw;
}
.dns-wf-search {
	display: flex;
	align-items: center;
	gap: 2cqw;
	padding: 2.4cqw 3.4cqw;
	border: 1px solid rgba(255, 77, 0, 0.4);
	border-radius: 999px;
	background: #111;
	color: #fff;
	font-size: 3cqw;
}
.dns-wf-search .dns-ic {
	width: 3.2cqw;
	height: 3.2cqw;
	color: var(--dns-accent);
}
.dns-wf-typing {
	display: inline-block;
	width: 17ch;
	overflow: hidden;
	border-right: 2px solid var(--dns-accent);
	white-space: nowrap;
}
.dns-wf-browser[data-stage="0"] .dns-wf-typing {
	animation: dns-type 1.1s steps(17) both;
}
.dns-wf-kw {
	display: flex;
	flex-direction: column;
	gap: 2.4cqw;
}
.dns-wf-kw-row {
	display: flex;
	align-items: center;
	gap: 3cqw;
}
.dns-wf-kw-label {
	width: 22%;
	height: 1.8cqw;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.22);
}
.dns-wf-kw-bar {
	height: 1.8cqw;
	border-radius: 999px;
	background: linear-gradient(90deg, var(--dns-accent), var(--dns-accent-2));
	transform-origin: left center;
}
.dns-wf-browser[data-stage="0"] .dns-wf-kw-bar {
	animation: dns-grow 0.7s var(--dns-ease) both;
	animation-delay: calc(0.9s + var(--i) * 0.14s);
}
.dns-wf-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 2cqw;
}
.dns-wf-tags span {
	padding: 0.8cqw 2.4cqw;
	border: 1px solid var(--dns-line);
	border-radius: 999px;
	font-family: var(--dns-mono);
	font-size: 2.1cqw;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--dns-muted);
}
.dns-wf-site {
	display: flex;
	flex-direction: column;
	gap: 4.5cqw;
	padding: 4.5cqw 6cqw;
}
.dns-wf-site :is(.dns-wf-logo, .dns-wf-links span, .dns-wf-navcta, .dns-wf-line, .dns-wf-btn, .dns-wf-media, .dns-wf-card) {
	border: 1px dashed transparent;
	transition:
		background-color 0.5s var(--dns-ease),
		border-color 0.5s var(--dns-ease);
}
.dns-wf-nav {
	display: flex;
	align-items: center;
	gap: 3cqw;
	height: 4.2cqw;
}
.dns-wf-logo {
	width: 9cqw;
	height: 100%;
	border-radius: 0.8cqw;
	background-color: var(--dns-accent);
}
.dns-wf-links {
	display: flex;
	gap: 2cqw;
	height: 40%;
}
.dns-wf-links span {
	width: 6cqw;
	border-radius: 999px;
	background-color: rgba(255, 255, 255, 0.3);
}
.dns-wf-navcta {
	width: 11cqw;
	height: 100%;
	margin-left: auto;
	border-radius: 999px;
	background-color: var(--dns-accent);
}
.dns-wf-hero {
	display: flex;
	gap: 5cqw;
	height: 27cqw;
}
.dns-wf-copy {
	display: flex;
	flex: 1;
	flex-direction: column;
	justify-content: center;
	gap: 2.2cqw;
}
.dns-wf-line {
	display: block;
	height: 3.2cqw;
	border-radius: 0.6cqw;
	background-color: #f5f5f5;
}
.dns-wf-lg {
	width: 92%;
}
.dns-wf-line.dns-wf-accent {
	width: 72%;
	background-color: var(--dns-accent);
}
.dns-wf-line.dns-wf-sm {
	width: 64%;
	height: 1.8cqw;
	background-color: rgba(255, 255, 255, 0.4);
}
.dns-wf-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40%;
	height: 5.4cqw;
	margin-top: 1.2cqw;
	border-radius: 999px;
	background-color: var(--dns-accent);
	color: #fff;
}
.dns-wf-btn .dns-ic {
	width: 2.6cqw;
	height: 2.6cqw;
	transition: opacity 0.4s;
}
.dns-wf-media {
	position: relative;
	flex: 1;
	overflow: hidden;
	border-radius: 1.6cqw;
	background-color: #141414;
}
.dns-wf-media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(circle at 70% 30%, rgba(255, 122, 61, 0.7), transparent 55%), linear-gradient(135deg, rgba(255, 77, 0, 0.5), rgba(20, 20, 20, 0.2));
	transition: opacity 0.5s var(--dns-ease);
}
.dns-wf-cards {
	display: flex;
	gap: 3cqw;
	height: 14cqw;
}
.dns-wf-card {
	position: relative;
	flex: 1;
	overflow: hidden;
	border-radius: 1.4cqw;
	background-color: #141414;
}
.dns-wf-card::before {
	content: "";
	position: absolute;
	inset: 0 0 55% 0;
	background: rgba(255, 77, 0, 0.3);
	transition: opacity 0.5s var(--dns-ease);
}
.dns-wf-tag {
	position: absolute;
	padding: 0.4cqw 1.2cqw;
	border-radius: 0.6cqw;
	background: #050505;
	color: var(--dns-accent);
	font-family: var(--dns-mono);
	font-size: 1.8cqw;
	letter-spacing: 0.14em;
	opacity: 0;
	transition: opacity 0.4s;
}
.dns-wf-tag-hero {
	top: 12cqw;
	left: 7cqw;
}
.dns-wf-tag-cards {
	bottom: 16.5cqw;
	left: 7cqw;
}
.dns-wf-browser[data-stage="1"] .dns-wf-site :is(.dns-wf-logo, .dns-wf-links span, .dns-wf-navcta, .dns-wf-line, .dns-wf-btn, .dns-wf-media, .dns-wf-card) {
	background-color: transparent;
	border-color: rgba(255, 255, 255, 0.35);
}
.dns-wf-browser[data-stage="1"] .dns-wf-media::after,
.dns-wf-browser[data-stage="1"] .dns-wf-card::before,
.dns-wf-browser[data-stage="1"] .dns-wf-btn .dns-ic {
	opacity: 0;
}
.dns-wf-browser[data-stage="1"] .dns-wf-tag {
	opacity: 1;
}
.dns-wf-browser[data-stage="2"] .dns-wf-site {
	animation: dns-settle 0.6s var(--dns-ease) both;
}
.dns-wf-layer.dns-wf-code {
	inset: 8% 4% 8% auto;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 1.4cqw;
	width: 60%;
	padding: 4cqw;
	border: 1px solid rgba(255, 77, 0, 0.35);
	border-radius: 1.6cqw;
	background: rgba(8, 8, 10, 0.96);
	box-shadow: 0 20px 40px -20px rgba(0, 0, 0, 0.9);
	font-family: var(--dns-mono);
	font-size: 2.1cqw;
	white-space: pre;
	color: #e5e5e5;
}
.dns-wf-code b {
	color: var(--dns-accent);
	font-weight: 400;
}
.dns-wf-code i {
	color: var(--dns-accent-2);
	font-style: normal;
}
.dns-wf-code-line {
	clip-path: inset(0 100% 0 0);
}
.dns-wf-browser[data-stage="3"] .dns-wf-code-line {
	animation: dns-line 0.45s steps(14) both;
	animation-delay: calc(0.2s + var(--i) * 0.28s);
}
.dns-wf-layer.dns-wf-test {
	inset: 14% 5% auto auto;
	display: flex;
	flex-direction: column;
	gap: 2.2cqw;
	width: 52%;
	padding: 3.6cqw;
	border: 1px solid var(--dns-line);
	border-radius: 1.6cqw;
	background: rgba(12, 12, 14, 0.97);
	font-size: 2.3cqw;
	color: #fff;
}
.dns-wf-check {
	display: flex;
	align-items: center;
	gap: 2cqw;
	opacity: 0.25;
}
.dns-wf-ok {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 4.2cqw;
	height: 4.2cqw;
	border: 1px solid var(--dns-line);
	border-radius: 50%;
	color: transparent;
	font-size: 2.2cqw;
}
.dns-wf-browser[data-stage="4"] .dns-wf-check {
	animation: dns-check 0.35s var(--dns-ease) both;
	animation-delay: calc(0.25s + var(--i) * 0.38s);
}
.dns-wf-browser[data-stage="4"] .dns-wf-ok {
	animation: dns-ok 0.35s var(--dns-ease) both;
	animation-delay: calc(0.25s + var(--i) * 0.38s);
}
.dns-wf-badge {
	position: absolute;
	top: 3.6cqw;
	right: 5cqw;
	display: inline-flex;
	align-items: center;
	gap: 1.2cqw;
	padding: 0.8cqw 2.2cqw;
	border: 1px solid rgba(46, 204, 113, 0.45);
	border-radius: 999px;
	background: rgba(46, 204, 113, 0.12);
	color: var(--dns-ok);
	font-family: var(--dns-mono);
	font-size: 1.9cqw;
	letter-spacing: 0.14em;
}
.dns-wf-badge b {
	width: 1.2cqw;
	height: 1.2cqw;
	border-radius: 50%;
	background: var(--dns-ok);
	animation: dns-blink 1.6s ease-in-out infinite;
}
.dns-wf-serp {
	position: absolute;
	left: 5cqw;
	bottom: 4.5cqw;
	display: flex;
	flex-direction: column;
	gap: 0.9cqw;
	width: 56%;
	padding: 2.8cqw 3.2cqw;
	border: 1px solid var(--dns-line);
	border-radius: 1.6cqw;
	background: rgba(20, 20, 20, 0.97);
}
.dns-wf-serp-url {
	font-size: 1.9cqw;
	color: var(--dns-muted);
}
.dns-wf-serp-title {
	font-size: 2.7cqw;
	font-weight: 700;
	color: var(--dns-accent-2);
}
.dns-wf-serp-line {
	width: 85%;
	height: 1.4cqw;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.2);
}
.dns-wf-chat {
	position: absolute;
	right: 5cqw;
	bottom: 20cqw;
	display: flex;
	gap: 1.8cqw;
	width: 36%;
	padding: 2.2cqw 2.6cqw;
	border: 1px solid var(--dns-line);
	border-left: 2px solid var(--dns-ok);
	border-radius: 1.6cqw;
	background: rgba(20, 20, 20, 0.97);
	font-size: 2.1cqw;
	line-height: 1.35;
	color: var(--dns-muted);
}
.dns-wf-chat b {
	color: #fff;
}
.dns-wf-chat .dns-ic {
	width: 3cqw;
	height: 3cqw;
	color: var(--dns-ok);
}
.dns-wf-browser[data-stage="5"] .dns-wf-serp {
	animation: dns-rise 0.55s var(--dns-ease) 0.25s both;
}
.dns-wf-browser[data-stage="5"] .dns-wf-chat {
	animation: dns-rise 0.55s var(--dns-ease) 1s both;
}
.dns-wf-info {
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.dns-wf-no {
	font-family: var(--dns-mono);
	font-size: 0.68rem;
	letter-spacing: 0.2em;
	color: var(--dns-accent);
}
.dns-wf-info h3 {
	font-family: var(--dns-disp);
	font-stretch: 125%;
	font-weight: 800;
	font-size: clamp(1.2rem, 1rem + 1vw, 1.55rem);
	line-height: 1.1;
	text-transform: uppercase;
	color: #fff;
}
.dns-wf-info p {
	font-size: 0.95rem;
	line-height: 1.65;
	color: var(--dns-muted);
}
.dns-wf-prog {
	height: 3px;
	margin-top: 6px;
	overflow: hidden;
	border-radius: 999px;
	background: var(--dns-line);
}
.dns-wf-prog span {
	display: block;
	width: 6%;
	height: 100%;
	border-radius: inherit;
	background: linear-gradient(90deg, var(--dns-accent), var(--dns-accent-2));
	transition: width 0.5s var(--dns-ease);
}
.dns-wf-info .dns-go {
	margin-top: 4px;
}
.dns-wf-track {
	position: relative;
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: 4px;
	padding: 14px 10px 12px;
	border-top: 1px solid var(--dns-line);
}
.dns-wf-track::before {
	content: "";
	position: absolute;
	top: 34px;
	left: 8%;
	right: 8%;
	height: 1px;
	background: linear-gradient(90deg, var(--dns-line), rgba(255, 77, 0, 0.4), var(--dns-line));
}
.dns-wf-step {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 7px;
	min-height: 44px;
	padding: 0;
	border: 0;
	background: none;
	font-family: var(--dns-mono);
	font-size: 0.6rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--dns-muted);
	cursor: pointer;
	transition: color 0.25s;
}
.dns-wf-ico {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: 50%;
	background: #111;
	transition:
		background 0.25s,
		border-color 0.25s,
		box-shadow 0.25s,
		transform 0.25s;
}
.dns-wf-ico .dns-ic {
	width: 16px;
	height: 16px;
}
.dns-wf-step:hover,
.dns-wf-step.is-done {
	color: #fff;
}
.dns-wf-step.is-done .dns-wf-ico {
	border-color: rgba(255, 77, 0, 0.5);
	color: var(--dns-accent);
}
.dns-wf-step[aria-selected="true"] {
	color: var(--dns-accent);
}
.dns-wf-step[aria-selected="true"] .dns-wf-ico {
	border-color: rgba(255, 255, 255, 0.8);
	background: var(--dns-accent);
	color: #fff;
	box-shadow: 0 0 24px rgba(255, 77, 0, 0.45);
	transform: scale(1.08);
}
@media (max-width: 560px) {
	.dns-wf-ico {
		width: 34px;
		height: 34px;
	}
	.dns-wf-track::before {
		top: 31px;
	}
	.dns-wf-step {
		font-size: 0.5rem;
		letter-spacing: 0.06em;
	}
}

/* ── 03 · empat jenis jasa website ── */
.dns-web-grid {
	display: grid;
	gap: 16px;
	margin-top: 24px;
	grid-template-columns: 1fr;
}
@media (min-width: 640px) {
	.dns-web-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}
@media (min-width: 1024px) {
	.dns-web-grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}
.dns-web {
	gap: 12px;
	padding: 20px;
}
.dns-web h3 {
	font-size: 1rem;
}
.dns-web .dns-flowline {
	padding-top: 12px;
	font-size: 0.66rem;
}

/* ── 03 · portofolio ── */
.dns-folio-head {
	margin-top: 56px;
}
.dns-folio-head p {
	margin-top: 8px;
	font-size: 0.875rem;
	color: var(--dns-muted);
}
.dns-folio {
	flex: none;
	width: min(84vw, 21rem);
	user-select: none;
}
@media (min-width: 640px) {
	.dns-folio {
		width: 22rem;
	}
}
@media (min-width: 1024px) {
	.dns-folio {
		width: calc((100% - 32px) / 3);
	}
}
.dns-folio-stage {
	position: relative;
	padding: 14px 14px 0;
	border-bottom: 1px solid var(--dns-line);
	background: radial-gradient(circle at 75% 0%, rgba(255, 77, 0, 0.25), transparent 55%), #0a0a0c;
}
.dns-folio-browser {
	overflow: hidden;
	border: 1px solid var(--dns-line);
	border-bottom: 0;
	border-radius: 10px 10px 0 0;
	background: #050505;
	transform-origin: 50% 100%;
	transition: transform 0.45s var(--dns-ease);
}
.dns-folio-bar {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 6px 9px;
	border-bottom: 1px solid var(--dns-line);
	background: #111;
}
.dns-folio-bar .dns-dots i {
	width: 5px;
	height: 5px;
}
.dns-folio-url {
	flex: 1;
	overflow: hidden;
	padding: 1px 9px;
	border-radius: 999px;
	background: rgba(0, 0, 0, 0.55);
	font-family: var(--dns-mono);
	font-size: 0.56rem;
	white-space: nowrap;
	text-overflow: ellipsis;
	color: var(--dns-muted);
}
.dns picture {
	display: block;
}
.dns-folio-shot {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 10;
	object-fit: cover;
	object-position: top center;
}
.dns-folio-phone {
	position: absolute;
	right: 12px;
	bottom: -16px;
	width: 24%;
	max-width: 92px;
	overflow: hidden;
	border: 3px solid #2a2a2e;
	border-radius: 14px;
	background: #050505;
	box-shadow: 0 18px 36px -14px rgba(0, 0, 0, 0.85), 0 0 0 1px var(--dns-line);
	transition: transform 0.45s var(--dns-ease);
}
.dns-folio-phone img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 9 / 19.5;
	object-fit: cover;
	object-position: top center;
}
.dns-folio-status {
	position: absolute;
	left: 22px;
	bottom: 12px;
	padding: 4px 10px;
	border: 1px solid rgba(255, 77, 0, 0.5);
	border-radius: 999px;
	background: rgba(0, 0, 0, 0.85);
	font-family: var(--dns-mono);
	font-size: 0.56rem;
	letter-spacing: 0.16em;
	color: var(--dns-accent);
}
.dns-folio-body {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 10px;
	padding: 28px 20px 16px;
}
.dns-folio-body h3 {
	font-size: 1.05rem;
}
.dns-folio-link::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}
.dns-folio-link:focus-visible {
	outline: none;
}
.dns-folio:focus-within {
	border-color: rgba(255, 77, 0, 0.6);
}
.dns-folio-foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	margin-top: auto;
	padding-top: 12px;
	border-top: 1px solid var(--dns-line);
}
.dns-folio-stack {
	display: flex;
	flex-wrap: wrap;
	gap: 5px;
}
.dns-folio-stack span {
	padding: 2px 8px;
	border: 1px solid var(--dns-line);
	border-radius: 999px;
	font-family: var(--dns-mono);
	font-size: 0.56rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--dns-muted);
}
.dns-folio-visit {
	position: relative;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	gap: 4px;
	min-height: 44px;
	font-family: var(--dns-mono);
	font-size: 0.62rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--dns-muted);
	transition: color 0.2s;
}
.dns-folio-visit:hover {
	color: var(--dns-accent);
}
.dns-folio-visit .dns-ic {
	width: 13px;
	height: 13px;
}
.dns-folio-soon {
	font-family: var(--dns-mono);
	font-size: 0.62rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--dns-muted);
}
@media (hover: hover) {
	.dns-folio:hover .dns-folio-browser {
		transform: scale(1.015);
	}
	.dns-folio:hover .dns-folio-phone {
		transform: translateY(-12px) rotate(-2deg);
	}
}

/* ── kartu "Siap bangun sistem atau website" ── */
.dns-final {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
	margin-top: 40px;
	padding: clamp(24px, 5vw, 44px);
	border: 1px solid rgba(255, 77, 0, 0.34);
	border-radius: 22px;
	background: radial-gradient(circle at 50% 0%, rgba(255, 77, 0, 0.2), transparent 55%), linear-gradient(160deg, rgba(28, 14, 8, 0.92), rgba(12, 12, 15, 0.94));
	text-align: center;
	scroll-margin-top: 96px;
}
.dns-final-title {
	max-width: 44rem;
	font-family: var(--dns-disp);
	font-stretch: 125%;
	font-weight: 800;
	font-size: clamp(1.35rem, 1rem + 2vw, 2.1rem);
	line-height: 1.08;
	text-transform: uppercase;
	text-wrap: balance;
	color: #fff;
}
.dns-final p {
	max-width: 40rem;
	font-size: clamp(0.88rem, 0.82rem + 0.3vw, 1rem);
	line-height: 1.7;
	color: var(--dns-muted);
}
.dns-final .dns-btns {
	margin-top: 6px;
}
.dns-note {
	font-family: var(--dns-mono);
	font-size: 0.62rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--dns-muted);
}

/* ── situs luar: cara kerja + FAQ ── */
.dns-steps ol {
	display: grid;
	gap: 12px;
	margin-top: 20px;
	list-style: none;
	grid-template-columns: 1fr;
}
@media (min-width: 640px) {
	.dns-steps ol {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}
@media (min-width: 1024px) {
	.dns-steps ol {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}
.dns-steps li {
	display: flex;
}
.dns-step {
	flex: 1;
	gap: 8px;
	padding: 20px;
}
.dns-step b {
	display: inline-grid;
	place-items: center;
	width: 36px;
	height: 36px;
	border-radius: 10px;
	background: rgba(255, 77, 0, 0.12);
	font-family: var(--dns-mono);
	font-size: 0.78rem;
	color: var(--dns-accent);
}
.dns-step strong {
	font-family: var(--dns-disp);
	font-stretch: 125%;
	font-weight: 800;
	font-size: 0.92rem;
	text-transform: uppercase;
	color: #fff;
}
.dns-faq-list {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-top: 20px;
}
.dns-faq details {
	border: 1px solid var(--dns-line);
	border-radius: 14px;
	background: var(--dns-card);
	transition: border-color 0.25s;
}
.dns-faq details[open] {
	border-color: rgba(255, 77, 0, 0.4);
}
.dns-faq summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	min-height: 54px;
	padding: 14px 18px;
	font-weight: 700;
	font-size: 0.95rem;
	color: #fff;
	list-style: none;
	cursor: pointer;
}
.dns-faq summary::-webkit-details-marker {
	display: none;
}
.dns-faq summary::after {
	content: "+";
	flex: none;
	font-family: var(--dns-mono);
	font-size: 1.1rem;
	color: var(--dns-accent);
	transition: transform 0.25s var(--dns-ease);
}
.dns-faq details[open] summary::after {
	transform: rotate(45deg);
}
.dns-faq details p {
	padding: 0 18px 16px;
	font-size: 0.9rem;
	line-height: 1.7;
	color: var(--dns-muted);
}

/* ── muncul saat masuk layar (hanya bila JS aktif) ── */
.dns-js .dns-rv {
	opacity: 0;
	transform: translateY(18px);
	transition:
		opacity 0.6s var(--dns-ease),
		transform 0.6s var(--dns-ease),
		border-color 0.3s,
		box-shadow 0.35s;
}
.dns-js .dns-rv.is-in {
	opacity: 1;
	transform: none;
}
@media (hover: hover) {
	.dns-js .dns-card.dns-rv.is-in:hover {
		transform: translateY(-3px);
	}
}

@keyframes dns-blink {
	50% {
		opacity: 0.25;
	}
}
@keyframes dns-type {
	from {
		width: 0;
	}
}
@keyframes dns-grow {
	from {
		transform: scaleX(0);
	}
}
@keyframes dns-settle {
	from {
		transform: scale(0.985);
		filter: saturate(0.4);
	}
}
@keyframes dns-line {
	to {
		clip-path: inset(0 0 0 0);
	}
}
@keyframes dns-check {
	from {
		opacity: 0.25;
		transform: translateX(-2%);
	}
	to {
		opacity: 1;
		transform: none;
	}
}
@keyframes dns-ok {
	to {
		border-color: rgba(46, 204, 113, 0.6);
		background: rgba(46, 204, 113, 0.18);
		color: #2ecc71;
	}
}
@keyframes dns-rise {
	from {
		opacity: 0;
		transform: translateY(18%);
	}
}

/* Bright Mode (hanya academy yang punya): teks & kartu ikut terang; "layar"
   (lab, grafis alur, bingkai portofolio) tetap gelap. */
html[data-theme="light"] .dns {
	--dns-text: #14100b;
	--dns-muted: rgba(20, 16, 11, 0.66);
	--dns-dim: rgba(20, 16, 11, 0.4);
	--dns-line: rgba(20, 16, 11, 0.1);
	--dns-card: rgba(255, 255, 255, 0.86);
	--dns-card-hi: rgba(255, 255, 255, 0.96);
}
html[data-theme="light"] .dns-card {
	box-shadow: 0 18px 40px -30px rgba(20, 16, 11, 0.35);
}
html[data-theme="light"] .dns-flowline {
	color: rgba(20, 16, 11, 0.7);
}
html[data-theme="light"] :is(.dns-final, .dns-wf) {
	--dns-text: #f5f5f5;
	--dns-muted: rgba(255, 255, 255, 0.6);
	--dns-line: rgba(255, 255, 255, 0.09);
}
html[data-theme="light"] .dns-btn.is-ghost {
	color: #14100b;
}
html[data-theme="light"] .dns-final .dns-btn.is-ghost {
	color: #fff;
}
html[data-theme="light"] .dns-faq summary,
html[data-theme="light"] .dns-step strong {
	color: #14100b;
}
html[data-theme="light"] .dns-mq {
	color: #14100b;
}
html[data-theme="light"] .dns-mq svg.dns-ic {
	filter: drop-shadow(0 2px 6px rgba(255, 255, 255, 0.9));
}

/* Hemat Animasi (toggle situs) → gerak dimatikan. */
html[data-reduced-motion="true"] .dns *,
html[data-reduced-motion="true"] .dns *::before,
html[data-reduced-motion="true"] .dns *::after {
	animation: none !important;
	transition: none !important;
}
html[data-reduced-motion="true"] .dns .dns-rv {
	opacity: 1;
	transform: none;
}
html[data-reduced-motion="true"] .dns-wf-code-line {
	clip-path: none;
}