/* Kartu AI SEO + portofolio automasi. Satu berkas untuk /automation (Academy)
   dan dua halaman marketing. Semua aturan dibatasi ke .dnx dan sengaja menulis
   ulang margin/ukuran dasar, karena tiap halaman punya reset yang berbeda. */
@property --dnx-n { syntax: "<integer>"; initial-value: 0; inherits: true; }

.dnx {
	--dnx-accent: #299bff;
	--dnx-accent-2: #66bbff;
	--dnx-deep: #0871c7;
	--dnx-text: #f5f5f5;
	--dnx-muted: rgba(255, 255, 255, 0.66);
	--dnx-dim: rgba(255, 255, 255, 0.42);
	--dnx-line: rgba(255, 255, 255, 0.1);
	--dnx-disp: var(--font-archivo, "Archivo"), ui-sans-serif, system-ui, sans-serif;
	--dnx-mono: var(--font-jetbrains-mono, "JetBrains Mono"), "Space Mono", ui-monospace, monospace;
	--dnx-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
	width: 100%;
	max-width: 1120px;
	margin: clamp(28px, 6vw, 64px) auto;
	color: var(--dnx-text);
	font-family: var(--dnx-disp);
	font-size: 16px;
	line-height: 1.5;
	text-align: left;
	scroll-margin-top: 96px;
}
.service-section .dnx { margin-block: 0; }
.dnx *, .dnx *::before, .dnx *::after { box-sizing: border-box; }
.dnx :where(h2, h3, p, ol, ul, li, figure, figcaption) { margin: 0; padding: 0; }
.dnx :where(ol, ul) { list-style: none; }
.dnx :where(img) { display: block; max-width: none; }
.dnx :where(a) { color: inherit; text-decoration: none; }
.dnx :where(button) { margin: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; }
.dnx :where(a, button):focus-visible { outline: 2px solid var(--dnx-accent-2); outline-offset: 3px; }
.dnx .dnx-ic { width: 1.1em; height: 1.1em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.dnx .dnx-ic-solid { fill: currentColor; stroke: none; }

.dnx-panel {
	position: relative;
	padding: clamp(18px, 3.6vw, 42px);
	border: 1px solid rgba(41, 155, 255, 0.36);
	border-radius: clamp(18px, 2.4vw, 26px);
	background:
		radial-gradient(70% 55% at 100% 0%, rgba(41, 155, 255, 0.18), transparent 60%),
		radial-gradient(60% 50% at 0% 100%, rgba(41, 155, 255, 0.1), transparent 60%),
		linear-gradient(180deg, #0c1119, #06080c);
	box-shadow: 0 30px 80px -50px rgba(41, 155, 255, 0.65), inset 0 1px 0 rgba(255, 255, 255, 0.05);
	overflow: hidden;
}
.dnx-head { max-width: 46rem; }
.dnx-eyebrow { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-family: var(--dnx-mono); font-size: 0.68rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--dnx-accent); }
.dnx-new { padding: 4px 9px; border-radius: 999px; background: var(--dnx-accent); color: #04121f; font-weight: 700; letter-spacing: 0.12em; }
.dnx-h2 { margin-top: 12px; font-stretch: 125%; font-weight: 800; font-size: clamp(1.45rem, 0.9rem + 2.7vw, 2.6rem); line-height: 1.06; text-transform: uppercase; text-wrap: balance; color: #fff; }
.dnx-grad { color: var(--dnx-accent); }
@supports (-webkit-background-clip: text) or (background-clip: text) {
	.dnx-grad { background: linear-gradient(97deg, var(--dnx-accent-2) 5%, var(--dnx-accent) 55%, #278eef); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
}
.dnx-lead { margin-top: 12px; font-size: clamp(0.9rem, 0.84rem + 0.3vw, 1.02rem); line-height: 1.65; color: var(--dnx-muted); }
.dnx-h3 { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-stretch: 125%; font-weight: 800; font-size: 0.86rem; line-height: 1.2; text-transform: uppercase; color: #fff; }
.dnx-h3-lg { display: block; font-size: clamp(1.05rem, 0.86rem + 1vw, 1.5rem); line-height: 1.1; text-wrap: balance; }
.dnx-tag, .dnx-kicker { font-family: var(--dnx-mono); font-stretch: 100%; font-weight: 400; font-size: 0.6rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--dnx-accent); }
.dnx-tag { padding: 3px 7px; border: 1px solid rgba(41, 155, 255, 0.4); border-radius: 999px; }

/* ── AI SEO ── */
.dnx-seo-grid { display: grid; gap: 14px; margin-top: clamp(18px, 3vw, 28px); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 960px) { .dnx-seo-grid { grid-template-columns: minmax(0, 1.18fr) minmax(0, 0.82fr); align-items: stretch; } }
.dnx-stage { display: flex; flex-direction: column; min-width: 0; border: 1px solid var(--dnx-line); border-radius: 18px; background: #0a0c10; overflow: hidden; }
.dnx-tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; padding: 8px; border-bottom: 1px solid var(--dnx-line); background: rgba(255, 255, 255, 0.03); }
.dnx .dnx-tab { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; min-width: 0; min-height: 40px; padding: 6px 4px; border: 1px solid transparent; border-radius: 11px; font-size: 0.74rem; font-weight: 700; color: var(--dnx-muted); white-space: nowrap; transition: background 0.25s, border-color 0.25s, color 0.25s; }
.dnx-tab img { width: 16px; height: 16px; padding: 2px; border-radius: 50%; background: #fff; }
.dnx-g-dot { display: grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; background: #fff; color: #4285f4; font-size: 11px; font-weight: 800; line-height: 1; }
.dnx .dnx-tab[aria-selected="true"] { border-color: rgba(41, 155, 255, 0.6); background: rgba(41, 155, 255, 0.16); color: #fff; }
@media (hover: hover) { .dnx .dnx-tab:hover { color: #fff; } }
@media (max-width: 400px) { .dnx .dnx-tab { gap: 4px; font-size: 0.66rem; } .dnx-tab img, .dnx-g-dot { width: 14px; height: 14px; } }

.dnx-screens { display: grid; flex: 1; }
.dnx-screen { grid-area: 1 / 1; display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: 14px; visibility: hidden; opacity: 0; transition: opacity 0.35s var(--dnx-ease), visibility 0s 0.35s; }
.dnx-screen.is-on { visibility: visible; opacity: 1; transition: opacity 0.35s var(--dnx-ease); }
.dnx-js .dnx-rise { opacity: 0; transform: translateY(10px); }
.dnx-js .dnx-screen.is-answered .dnx-rise { opacity: 1; transform: none; transition: opacity 0.5s var(--dnx-ease) calc(var(--d, 0) * 0.2s), transform 0.5s var(--dnx-ease) calc(var(--d, 0) * 0.2s); }
.dnx-type.is-typing::after { content: ""; display: inline-block; width: 2px; height: 1em; margin-left: 2px; vertical-align: -0.14em; background: currentColor; animation: dnx-blink 0.8s steps(1) infinite; }
.dnx mark { background: none; color: #fff; font-weight: 700; box-shadow: inset 0 -0.42em rgba(41, 155, 255, 0.42); }
.dnx-src { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; padding: 4px 10px 4px 5px; border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 999px; background: rgba(255, 255, 255, 0.07); font-size: 0.68rem; color: #dfe3e8; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dnx-src img { width: 16px; height: 16px; border-radius: 50%; background: #000; }

/* Google (tema gelap) */
.dnx-g { background: #1f1f1f; color: #bdc1c6; }
.dnx-g-bar { display: flex; align-items: center; gap: 10px; }
.dnx-g-logo { font-size: 1.08rem; font-weight: 700; letter-spacing: -0.02em; }
.dnx-g-logo b:nth-child(1), .dnx-g-logo b:nth-child(4) { color: #4285f4; }
.dnx-g-logo b:nth-child(2), .dnx-g-logo b:nth-child(6) { color: #ea4335; }
.dnx-g-logo b:nth-child(3) { color: #fbbc05; }
.dnx-g-logo b:nth-child(5) { color: #34a853; }
.dnx-q { display: flex; flex: 1; align-items: center; gap: 8px; min-width: 0; min-height: 38px; padding: 6px 14px; border-radius: 999px; background: #303134; font-size: 0.84rem; color: #e8eaed; }
.dnx-q .dnx-type { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dnx-g-ai { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 12px 14px; border: 1px solid rgba(138, 180, 248, 0.28); border-radius: 14px; background: linear-gradient(180deg, #1b2233, #171b26); }
.dnx-g-ai-h { display: inline-flex; align-items: center; gap: 6px; font-size: 0.74rem; font-weight: 700; color: #8ab4f8; }
.dnx-g-ai p { font-size: 0.82rem; line-height: 1.55; color: #e3e6ea; }
.dnx-g-res { position: relative; display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; border-radius: 12px; }
.dnx-g-res.is-top { border: 1px solid rgba(41, 155, 255, 0.62); background: rgba(41, 155, 255, 0.07); box-shadow: 0 0 26px -10px rgba(41, 155, 255, 0.8); }
.dnx-rank { position: absolute; top: -9px; right: 12px; display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; background: var(--dnx-accent); color: #04121f; font-family: var(--dnx-mono); font-size: 0.68rem; font-weight: 700; }
.dnx-rank::before { content: "#"; }
.dnx-g-site { display: flex; align-items: center; gap: 9px; min-width: 0; }
.dnx-g-site img { width: 26px; height: 26px; border-radius: 50%; background: #000; }
.dnx-g-site span { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.dnx-g-site b { font-size: 0.78rem; font-weight: 500; color: #dadce0; }
.dnx-g-site i { font-size: 0.66rem; font-style: normal; color: #9aa0a6; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dnx-g-title { font-size: clamp(0.92rem, 0.86rem + 0.3vw, 1.04rem); line-height: 1.3; color: #8ab4f8; }
.dnx-g-res p { font-size: 0.76rem; line-height: 1.5; color: #bdc1c6; }
.dnx-skel { gap: 7px; opacity: 0.55; }
.dnx-js .dnx-screen.is-answered .dnx-skel { opacity: 0.55; }
.dnx-skel i { display: block; height: 8px; border-radius: 4px; background: #34373c; }
.dnx-skel i:nth-child(1) { width: 34%; }
.dnx-skel i:nth-child(2) { width: 72%; height: 11px; background: #2b3a55; }
.dnx-skel i:nth-child(3) { width: 90%; }

/* Asisten AI */
.dnx-chat { gap: 12px; }
.dnx-chat-chatgpt { background: #212121; }
.dnx-chat-gemini { background: #131314; }
.dnx-chat-claude { background: #262624; }
.dnx-chat-top { display: flex; align-items: center; gap: 8px; padding-bottom: 10px; border-bottom: 1px solid rgba(255, 255, 255, 0.08); font-size: 0.82rem; color: #ececec; }
.dnx-chat-top img { width: 22px; height: 22px; padding: 3px; border-radius: 50%; background: #fff; }
.dnx-msg-user { align-self: flex-end; max-width: 88%; min-height: 2.4em; padding: 9px 14px; border-radius: 18px 18px 4px 18px; background: rgba(255, 255, 255, 0.1); font-size: 0.84rem; line-height: 1.45; color: #f3f3f3; }
.dnx-msg-ai { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.dnx-msg-ai p { font-size: 0.86rem; line-height: 1.62; color: #e7e7e7; }
.dnx-points { display: grid; gap: 5px; }
.dnx-points li { position: relative; padding-left: 16px; font-size: 0.82rem; line-height: 1.5; color: #dcdcdc; }
.dnx-points li::before { content: ""; position: absolute; top: 0.62em; left: 3px; width: 5px; height: 5px; border-radius: 50%; background: var(--dnx-accent); }
.dnx-src-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; max-width: 100%; }
.dnx-src-row > i { font-family: var(--dnx-mono); font-size: 0.6rem; font-style: normal; letter-spacing: 0.14em; text-transform: uppercase; color: var(--dnx-dim); }
.dnx-compose { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 42px; margin-top: auto; padding: 8px 8px 8px 16px; border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 999px; background: rgba(255, 255, 255, 0.06); font-size: 0.78rem; color: var(--dnx-dim); }
.dnx-compose b { display: grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: 50%; background: rgba(255, 255, 255, 0.9); color: #111; }
.dnx-compose .dnx-ic { width: 14px; height: 14px; transform: rotate(-90deg); }
.dnx-sim { padding: 9px 14px; border-top: 1px solid var(--dnx-line); background: rgba(255, 255, 255, 0.03); font-family: var(--dnx-mono); font-size: 0.6rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--dnx-dim); }

.dnx-side { display: grid; gap: 14px; min-width: 0; }
.dnx-box { min-width: 0; padding: 16px; border: 1px solid var(--dnx-line); border-radius: 16px; background: rgba(255, 255, 255, 0.035); }
@media (max-width: 959px) { .dnx-g-res.dnx-wide { display: none; } }
.dnx-flowbox { display: flex; flex-direction: column; height: 100%; }
.dnx-steps { position: relative; display: grid; gap: 12px; margin-top: 14px; }
.dnx-steps::before { content: ""; position: absolute; top: 14px; bottom: 14px; left: 14px; width: 2px; border-radius: 2px; background: rgba(41, 155, 255, 0.2); }
.dnx-steps::after { content: ""; position: absolute; top: 14px; left: 14px; width: 2px; height: 22%; border-radius: 2px; background: linear-gradient(180deg, transparent, var(--dnx-accent-2), transparent); opacity: 0; }
.dnx-js .dnx-flowbox.is-live .dnx-steps::after { opacity: 1; animation: dnx-fall 5.4s linear infinite; }
.dnx-steps > li { position: relative; z-index: 1; display: grid; grid-template-columns: 30px minmax(0, 1fr); column-gap: 11px; align-items: start; }
.dnx-step-node { display: grid; place-items: center; width: 30px; height: 30px; border: 1px solid rgba(41, 155, 255, 0.4); border-radius: 9px; background: #0b1420; color: var(--dnx-accent); }
.dnx-step-node .dnx-ic { width: 15px; height: 15px; }
.dnx-js .dnx-flowbox.is-live .dnx-step-node { animation: dnx-node 5.4s var(--dnx-ease) infinite; animation-delay: calc(var(--i) * 0.9s); }
.dnx-step-body { min-width: 0; padding-top: 5px; }
.dnx-step-body > b { display: flex; align-items: baseline; gap: 8px; font-size: 0.84rem; font-weight: 700; line-height: 1.25; color: #fff; }
.dnx-step-body > b > i { font-family: var(--dnx-mono); font-size: 0.58rem; font-style: normal; font-weight: 400; letter-spacing: 0.08em; color: var(--dnx-accent); }
.dnx-step-body ul { display: flex; flex-wrap: wrap; gap: 5px 6px; margin-top: 7px; }
.dnx-step-body ul li { display: inline-flex; align-items: center; gap: 5px; min-width: 0; padding: 4px 8px 4px 6px; border: 1px solid rgba(41, 155, 255, 0.22); border-radius: 8px; background: rgba(41, 155, 255, 0.08); font-size: 0.68rem; line-height: 1.25; color: #dfeaf6; }
.dnx-ck { flex: none; width: 13px; height: 13px; padding: 2px; border-radius: 4px; background: var(--dnx-accent); fill: none; stroke: #04121f; stroke-width: 3.4; stroke-linecap: round; stroke-linejoin: round; }
.dnx-js .dnx-flowbox.is-live .dnx-step-body .dnx-ck { animation: dnx-pop 0.5s var(--dnx-ease) both; animation-delay: calc(var(--k) * 70ms + 200ms); }
.dnx-flow-note { display: flex; align-items: flex-start; gap: 8px; margin-top: auto; padding-top: 14px; font-size: 0.76rem; line-height: 1.5; color: var(--dnx-muted); }
.dnx-flow-note .dnx-ck { margin-top: 2px; }
@media (max-width: 400px) { .dnx-step-body ul li { font-size: 0.64rem; padding: 3px 7px 3px 5px; } .dnx-step-body > b { font-size: 0.8rem; } }
@media (prefers-reduced-motion: reduce) { .dnx-steps::after { display: none; } .dnx-step-node, .dnx-step-body .dnx-ck { animation: none !important; } }

.dnx-foot { display: flex; flex-direction: column; gap: 14px; margin-top: clamp(18px, 3vw, 28px); padding-top: clamp(16px, 2.6vw, 22px); border-top: 1px solid var(--dnx-line); }
@media (min-width: 860px) { .dnx-foot { flex-direction: row; align-items: center; justify-content: space-between; gap: 28px; } .dnx-foot .dnx-honest { max-width: 34rem; } }
.dnx-honest { font-size: 0.82rem; line-height: 1.6; color: var(--dnx-muted); }
.dnx-btns { display: flex; flex-wrap: wrap; gap: 10px; flex: none; }
.dnx .dnx-btn { display: inline-flex; flex: 1 1 auto; align-items: center; justify-content: center; gap: 9px; min-height: 46px; padding: 12px 20px; border: 1px solid transparent; border-radius: 999px; background-color: var(--dnx-deep); background-image: linear-gradient(rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0.08)), linear-gradient(rgba(41, 155, 255, 0.65), rgba(41, 155, 255, 0.65)), url("/textures/orange-marble.svg"); background-size: auto, auto, 24rem 12rem; background-position: center; color: #fff; font-stretch: 125%; font-weight: 800; font-size: 0.74rem; letter-spacing: 0.04em; text-transform: uppercase; white-space: nowrap; box-shadow: 0 10px 28px -12px rgba(41, 155, 255, 0.9); transition: transform 0.25s var(--dnx-ease), box-shadow 0.25s; }
.dnx .dnx-btn.is-ghost { border-color: rgba(255, 255, 255, 0.2); background: rgba(255, 255, 255, 0.05); box-shadow: none; }
@media (hover: hover) { .dnx .dnx-btn:hover { transform: translateY(-2px); } }

/* ── Portofolio: studio AI → feed sosial ── */
.dnx [hidden] { display: none !important; }
.dnx h4 { margin: 0; padding: 0; color: var(--dnx-text); }
.dnx-case { margin-top: clamp(22px, 3vw, 34px); padding-top: clamp(20px, 3vw, 30px); border-top: 1px solid var(--dnx-line); }
.dnx-case-intro { display: grid; align-items: center; gap: 20px; }
.dnx-case-head { min-width: 0; }
.dnx-case-head .dnx-h3 { margin-top: 8px; }
.dnx-case-head > p { margin-top: 10px; font-size: .86rem; line-height: 1.6; color: var(--dnx-muted); }
.dnx-case-head .dnx-proof-line { display: flex; gap: 7px; align-items: flex-start; color: var(--dnx-accent-2); font-size: .75rem; }
.dnx-proof-line .dnx-ic { margin-top: 3px; }


/* Diagram kecil dengan animasi transform/opacity saja; kontrol jeda selalu ada. */
.dnx-hidden *, .dnx [data-live]:not(.is-live) * { animation-play-state: paused !important; }
.dnx-feed-label { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 6px; margin-top: 20px; font-size: .72rem; }
.dnx-feed-label > span { display: inline-flex; align-items: center; gap: 7px; }
.dnx-feed-label > span:first-child > .dnx-ic { color: var(--dnx-accent-2); }
.dnx-feed-label i { font-style: normal; color: var(--dnx-muted); }
.dnx-feed-label > span:last-child { color: var(--dnx-muted); font-size: .65rem; }
.dnx-rail { display: flex; gap: 12px; margin-top: 10px; padding: 4px 2px 10px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: thin; scrollbar-color: var(--dnx-accent) transparent; }
.dnx-rail > * { flex: none; scroll-snap-align: start; }
.dnx-rail > :first-child { margin-left: auto; }
.dnx-rail > :last-child { margin-right: auto; }
.dnx-video { width: clamp(205px, 65vw, 250px); padding: 7px; border: 1px solid var(--dnx-line); border-radius: 17px; background: #090b10; }
.dnx-short-top { display: flex; align-items: center; gap: 7px; padding: 2px 3px 9px; font-size: .68rem; }
.dnx-short-top > .dnx-ic { margin-left: auto; color: var(--dnx-accent-2); width: 20px; height: 20px; }
.dnx-channel-mark { display: grid; place-items: center; width: 25px; height: 25px; border-radius: 50%; background: rgba(41,155,255,.15); font-family: var(--dnx-mono); font-size: .55rem; color: var(--dnx-accent-2); }
.dnx-video-frame { position: relative; aspect-ratio: 9 / 16; border-radius: 12px; background: #000; overflow: hidden; }
.dnx .dnx-video-play { position: absolute; inset: 0; display: block; width: 100%; height: 100%; padding: 0; text-align: left; }
.dnx-video-play img { width: 100%; height: 100%; object-fit: cover; }
.dnx-video-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.dnx-badge { position: absolute; top: 9px; left: 9px; padding: 4px 7px; border-radius: 5px; background: #071727e6; border: 1px solid rgba(41,155,255,.5); font-family: var(--dnx-mono); font-size: .52rem; letter-spacing: .12em; color: #cfe8ff; }
.dnx-play { position: absolute; top: 45%; left: 50%; display: grid; place-items: center; width: 54px; height: 54px; transform: translate(-50%,-50%); border: 1px solid rgba(255,255,255,.65); border-radius: 50%; background: rgba(5,13,24,.8); color: #fff; box-shadow: 0 0 0 6px rgba(41,155,255,.17); transition: background .2s; }
.dnx-play .dnx-ic { width: 23px; height: 23px; margin-left: 3px; }
.dnx-short-overlay { position: absolute; inset: auto 0 0; display: grid; gap: 7px; padding: 48px 12px 14px; background: linear-gradient(transparent,#000c 35%,#000e); color: #fff; }
.dnx-short-overlay > span:first-child { font-size: .65rem; font-weight: 600; }
.dnx-short-overlay > b { font-size: .82rem; line-height: 1.4; }
.dnx-short-overlay > span:last-child { display: inline-flex; align-items: center; gap: 5px; font-size: .54rem; color: #c4d9f0; }
.dnx-video figcaption { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 0 4px; padding: 0 3px; }
.dnx-video figcaption a, .dnx .dnx-video-stop { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; font-size: .6rem; color: var(--dnx-accent-2); }
.dnx .dnx-video-stop { text-decoration: underline; text-underline-offset: 3px; }
.dnx-swipe-note { display: flex; align-items: center; justify-content: center; gap: 9px; margin-top: 5px; font-family: var(--dnx-mono); font-size: .57rem; color: var(--dnx-muted); }
.dnx-social-footer { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 14px; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--dnx-line); }
.dnx-social-footer p { font-size: .73rem; font-weight: 600; }
.dnx-social-footer p span { display: block; font-size: .63rem; font-weight: 400; color: var(--dnx-muted); }
.dnx-social-footer nav, .dnx-account-socials { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; }
.dnx-social-footer a, .dnx-account-socials a { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-size: .68rem; color: var(--dnx-accent-2); }
.dnx-social-footer a > .dnx-ic:last-child, .dnx-account-socials a > .dnx-ic:last-child { width: 12px; height: 12px; }

.dnx-social-grid { display: grid; grid-template-columns: minmax(0,1fr); gap: 22px; max-width: 860px; margin: 22px auto 0; }
.dnx-acct { display: flex; flex-direction: column; min-width: 0; }
.dnx-acct-summary { margin-bottom: 12px; }
.dnx-acct-summary .dnx-kicker { font-size: .54rem; }
.dnx-acct-summary h4 { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 5px; font-size: 1.02rem; font-weight: 750; }
.dnx-acct-summary p { margin-top: 7px; font-size: .75rem; line-height: 1.55; color: var(--dnx-muted); }
.dnx-auto { display: inline-flex; align-items: center; gap: 5px; padding: 4px 6px; border: 1px solid rgba(46,204,113,.3); border-radius: 5px; font-family: var(--dnx-mono); font-size: .48rem; font-weight: 400; letter-spacing: .08em; text-transform: uppercase; color: #b9f3d0; }
.dnx-auto i { width: 5px; height: 5px; border-radius: 50%; background: #2ecc71; }
.dnx-post-select { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 5px; margin-bottom: 7px; }
.dnx .dnx-post-select button { display: flex; align-items: center; gap: 7px; min-width: 0; min-height: 44px; padding: 8px 10px; border: 1px solid var(--dnx-line); border-radius: 8px; background: rgba(255,255,255,.025); font-size: .66rem; color: var(--dnx-muted); }
.dnx-post-select button > span { font-family: var(--dnx-mono); color: var(--dnx-accent-2); font-size: .55rem; }
.dnx-post-select button > .dnx-ic { margin-left: auto; width: 12px; height: 12px; }
.dnx .dnx-post-select button[aria-pressed="true"] { border-color: rgba(41,155,255,.55); background: rgba(41,155,255,.12); color: #fff; }
.dnx-feed-window { margin-top: auto; border: 1px solid rgba(255,255,255,.14); border-radius: 14px; background: #0b0d11; box-shadow: 0 16px 44px -28px rgba(41,155,255,.45); overflow: clip; }
.dnx-post + .dnx-post { border-top: 1px solid var(--dnx-line); }
.dnx-post-header { display: flex; align-items: center; gap: 9px; padding: 11px 12px; }
.dnx-ava { flex: none; width: 32px; height: 32px; border: 1px solid rgba(41,155,255,.4); border-radius: 50%; background: #000; object-fit: cover; }
.dnx-ava-da { padding: 5px; object-fit: contain; }
.dnx-post-header > span { display: grid; gap: 3px; flex: 1; min-width: 0; }
.dnx-post-header b { font-size: .73rem; font-weight: 650; }
.dnx-post-header i { font-size: .53rem; font-style: normal; color: var(--dnx-muted); }
.dnx-post-header > .dnx-ic { width: 21px; height: 21px; color: var(--dnx-muted); }
.dnx-media-wrap { position: relative; }
.dnx-slides { display: flex; width: 100%; aspect-ratio: 4 / 5; background: #05070a; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; }
.dnx-slides::-webkit-scrollbar { display: none; }
.dnx-slides img { flex: 0 0 100%; min-width: 0; width: 100%; height: 100%; object-fit: contain; scroll-snap-align: start; }
.dnx-slides:focus-visible, .dnx-rail:focus-visible { outline: 2px solid var(--dnx-accent-2); outline-offset: -3px; }
.dnx-slide-count { position: absolute; top: 10px; right: 10px; pointer-events: none; border: 1px solid #ffffff38; border-radius: 999px; padding: 3px 8px; background: #04080deb; color: #fff; font-family: var(--dnx-mono); font-size: .54rem; }
.dnx-slide-controls { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 1px 6px; border-bottom: 1px solid var(--dnx-line); }
.dnx .dnx-slide-controls button { display: grid; place-items: center; width: 44px; height: 44px; flex: none; color: var(--dnx-accent-2); }
.dnx .dnx-slide-controls button:disabled { color: var(--dnx-muted); opacity: .35; cursor: default; }
.dnx-slide-controls > span { display: grid; justify-items: center; gap: 5px; min-width: 0; }
.dnx-dots { display: flex; justify-content: center; gap: 5px; }
.dnx-dots i { width: 4px; height: 4px; border-radius: 50%; background: #ffffff4d; }
.dnx-dots i.is-on { background: var(--dnx-accent-2); }
.dnx-slide-hint { font-family: var(--dnx-mono); font-size: .51rem; color: var(--dnx-muted); }
.dnx-post-actions { display: flex; align-items: center; gap: 8px; padding: 0 12px; }
.dnx-post-actions a { display: inline-flex; align-items: center; gap: 12px; min-width: 44px; min-height: 44px; }
.dnx-post-actions .dnx-ic { width: 20px; height: 20px; }
.dnx-post-actions a:last-child { margin-left: auto; justify-content: flex-end; }
.dnx-post-proof { display: inline-flex; align-items: center; gap: 4px; margin-left: auto; color: var(--dnx-muted); font-family: var(--dnx-mono); font-size: .48rem; text-transform: uppercase; }
.dnx-post-proof .dnx-ic { width: 12px; height: 12px; color: #b9f3d0; }
.dnx-post-caption { padding: 0 12px 8px; }
.dnx-post-caption h4 { font-size: .8rem; line-height: 1.4; font-weight: 700; }
.dnx-post-caption p { margin-top: 6px; font-size: .72rem; line-height: 1.55; color: var(--dnx-muted); }
.dnx-original { display: inline-flex; align-items: center; gap: 5px; min-height: 44px; font-size: .64rem; color: var(--dnx-accent-2) !important; }
.dnx-account-socials { padding: 4px 3px 0; }
.dnx-platform-switch { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 2px; margin: 12px 0 6px; padding: 4px; border: 1px solid var(--dnx-line); border-radius: 12px; background: #080d15; }
.dnx .dnx-platform-switch button { display: flex; align-items: center; justify-content: center; gap: 6px; min-width: 0; min-height: 44px; padding: 6px 4px; border: 1px solid transparent; border-radius: 8px; font-size: .66rem; color: var(--dnx-muted); }
.dnx .dnx-platform-switch button[aria-pressed="true"] { border-color: #299bff65; background: #299bff18; color: var(--dnx-accent-2); }
.dnx .dnx-platform-switch button:disabled { cursor: default; }
.dnx-platform-switch .dnx-ic { width: 16px; height: 16px; flex: none; }
.dnx-platform-note { margin: 0 2px 9px; color: var(--dnx-muted); font-size: .64rem; line-height: 1.5; }
.dnx-platform-marks { display: inline-flex; margin-left: auto; }
.dnx-platform-marks > span { display: none; }
.dnx-platform-marks .dnx-ic { width: 20px; height: 20px; }
[data-platform="instagram"] [data-platform-mark="instagram"], [data-platform="youtube"] [data-platform-mark="youtube"], [data-platform="tiktok"] [data-platform-mark="tiktok"], [data-platform="threads"] [data-platform-mark="threads"] { display: inline-flex; }
.dnx-tiktok-heading, .dnx-tiktok-rail { display: none; }
.dnx-acct[data-platform="tiktok"] .dnx-feed-window { background: #080b10; border-color: #ffffff30; color: #f5f7fa; }
.dnx-acct[data-platform="tiktok"] .dnx-post-header { background: #080b10; }
.dnx-acct[data-platform="tiktok"] .dnx-post-header i, .dnx-acct[data-platform="tiktok"] .dnx-post-caption p { color: #bdc7d5; }
.dnx-acct[data-platform="tiktok"] .dnx-media-wrap { padding: 0; background: #080b10; }
.dnx-acct[data-platform="tiktok"] .dnx-tiktok-heading { display: flex; align-items: center; justify-content: center; gap: 16px; height: 36px; color: #a6aebd; font-size: .67rem; pointer-events: none; }
.dnx-acct[data-platform="tiktok"] .dnx-tiktok-heading b { color: #fff; padding: 8px 0; border-bottom: 2px solid #fff; }
.dnx-acct[data-platform="tiktok"] .dnx-slide-count { top: 44px; right: 8px; }
.dnx-acct[data-platform="tiktok"] .dnx-post-caption { padding-top: 0; }
.dnx-acct[data-platform="threads"] .dnx-post { display: flex; flex-direction: column; position: relative; padding: 0 12px 0 46px; }
.dnx-acct[data-platform="threads"] .dnx-post::before { content: ""; position: absolute; left: 26px; top: 50px; bottom: 20px; border-left: 1px solid var(--dnx-line); pointer-events: none; }
.dnx-acct[data-platform="threads"] .dnx-post-header { order: 0; padding: 12px 0; }
.dnx-acct[data-platform="threads"] .dnx-post-header .dnx-ava { position: absolute; left: 10px; top: 12px; }
.dnx-acct[data-platform="threads"] .dnx-post-caption { order: 1; padding: 0 0 8px; }
.dnx-acct[data-platform="threads"] .dnx-media-wrap { order: 2; border-radius: 10px; overflow: hidden; border: 1px solid var(--dnx-line); }
.dnx-acct[data-platform="threads"] .dnx-slide-controls { order: 3; padding-inline: 0; border: 0; }
.dnx-acct[data-platform="threads"] .dnx-post-actions { order: 4; padding: 0; }
.dnx-acct[data-platform="threads"] .dnx-post-proof { display: none; }
.dnx-case[data-platform="instagram"] .dnx-video { border-radius: 20px; border-color: #d5a1ff55; }
.dnx-case[data-platform="instagram"] .dnx-short-top { background: linear-gradient(105deg,#b558d918,#ff803918); }
.dnx-case[data-platform="instagram"] .dnx-short-overlay { padding-bottom: 34px; }
.dnx-case[data-platform="instagram"] .dnx-short-overlay::after { content: "Reels · AI creator"; color: #eee; font-size: .55rem; }
.dnx-case[data-platform="tiktok"] .dnx-video { border-radius: 10px; border-color: #54ede65c; }
.dnx-case[data-platform="tiktok"] .dnx-short-top { border-top: 2px solid #54ede6; background: #080b10; }
.dnx-case[data-platform="tiktok"] .dnx-video-frame::before { content: "Mengikuti     Untuk Anda"; position: absolute; z-index: 2; top: 14px; left: 12px; right: 12px; text-align: center; color: #fff; text-shadow: 0 1px 5px #000; font-size: .65rem; pointer-events: none; }
.dnx-case[data-platform="tiktok"] .dnx-badge { top: 42px; }
.dnx-case[data-platform="tiktok"] .dnx-short-overlay { border-left: 2px solid #54ede6; margin-left: 10px; padding-left: 10px; }
.dnx-case[data-platform="tiktok"] .dnx-video-frame:has(iframe)::before { display: none; }
@media (max-width: 359px) { .dnx .dnx-platform-switch button { gap: 4px; font-size: .58rem; } .dnx-platform-switch .dnx-ic { width: 14px; height: 14px; } .dnx-acct[data-platform="threads"] .dnx-post { padding-left: 40px; padding-right: 8px; } }
.dnx-note { margin-top: 12px; font-size: .7rem; line-height: 1.55; text-align: center; color: var(--dnx-muted); }
.dnx-note a { color: var(--dnx-accent-2); text-decoration: underline; text-underline-offset: 3px; }
@media (min-width: 680px) { .dnx-social-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 18px; } }
@media (min-width: 1100px) { .dnx-social-grid { max-width: 780px; gap: 22px; } }
@media (max-width: 619px) {
	.dnx-porto .dnx-panel { padding: 16px 12px; border-radius: 17px; }
	.dnx-porto .dnx-head { padding-inline: 3px; }
	.dnx-porto .dnx-h2 { font-size: 1.55rem; }
	.dnx-case-intro { gap: 14px; }
	.dnx-case-head > p { font-size: .81rem; }
	.dnx-acct-summary p { font-size: .73rem; }
	.dnx-social-grid { max-width: 390px; gap: 24px; }
	.dnx-post-caption p { min-height: 3.1em; }
}
@media (hover:hover) { .dnx-video-play:hover .dnx-play { background: var(--dnx-deep); } .dnx-original:hover, .dnx-account-socials a:hover, .dnx-social-footer a:hover { text-decoration: underline; text-underline-offset: 3px; } }
@media (prefers-reduced-motion: reduce) { .dnx *, .dnx *::before, .dnx *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } .dnx-motion-toggle { visibility: hidden; } .dnx-js .dnx-rise { opacity: 1; transform: none; } }

@keyframes dnx-blink { 50% { opacity: 0; } }
@keyframes dnx-pop { from { opacity: 0; scale: 0.2; } to { opacity: 1; scale: 1; } }
@keyframes dnx-flow { to { transform: translateX(460%); } }
@keyframes dnx-fall { 0% { transform: translateY(-100%); } 100% { transform: translateY(460%); } }
@keyframes dnx-node { 0%, 26%, 100% { border-color: rgba(41, 155, 255, 0.4); box-shadow: none; scale: 1; } 10% { border-color: #fff; box-shadow: 0 0 0 5px rgba(41, 155, 255, 0.22), 0 0 22px rgba(41, 155, 255, 0.9); scale: 1.08; } }
@keyframes dnx-bob { 50% { transform: translateY(-3px) rotate(-4deg); } }
@keyframes dnx-dots { from { width: 0; } to { width: 1.4em; } }
@keyframes dnx-clip { 0% { transform: scaleX(0); opacity: 0; } 12%, 86% { transform: scaleX(1); opacity: 1; } 96%, 100% { transform: scaleX(1); opacity: 0; } }
@keyframes dnx-head { from { left: 0; } to { left: 100%; } }
@keyframes dnx-count { from { --dnx-n: 0; } to { --dnx-n: 100; } }
@keyframes dnx-pulse { 0% { box-shadow: 0 0 0 0 rgba(46, 204, 113, 0.7); } 100% { box-shadow: 0 0 0 9px rgba(46, 204, 113, 0); } }

/* Setelan "Hemat Animasi" Academy. */
html[data-reduced-motion="true"] .dnx *, html[data-mode="compact"] .dnx * { animation: none !important; }
html[data-reduced-motion="true"] .dnx-js .dnx-rise, html[data-mode="compact"] .dnx-js .dnx-rise { opacity: 1; transform: none; transition: none; }

/* HP: layar contoh lebih ringkas supaya kartu tidak terlalu panjang. */
@media (max-width: 619px) { .dnx-g .dnx-skel + .dnx-skel { display: none; } .dnx-screen { padding: 12px; } }
@media (max-width: 359px) { .dnx .dnx-btn { padding-inline: 14px; font-size: 0.68rem; white-space: normal; text-align: center; } .dnx-tab img, .dnx-g-dot { display: none; } }
/* Owner 12 Oct: real platform assets, complete native carousel, tighter marketing. */
.dnx .dnx-brand { display:block; flex:none; width:20px; height:20px; object-fit:contain; border-radius:4px; }
.dnx .dnx-platform-switch button { flex-direction:column; gap:5px; padding:6px 2px; min-height:54px; font-size:.6rem; line-height:1.15; }
.dnx .dnx-channel-mark { width:28px; height:28px; object-fit:cover; border:1px solid #ffffff30; }
.dnx-post-header > .dnx-platform-marks { display:flex; flex:none; }
[data-platform="x"] [data-platform-mark="x"], [data-platform="facebook"] [data-platform-mark="facebook"] { display:inline-flex; }
.dnx-case-intro { grid-template-columns:minmax(0,1fr); }
.dnx-case-head { max-width:760px; }
.dnx-network-socials { display:flex; justify-content:center; margin-top:8px; }
.dnx-network-socials a { display:inline-flex; align-items:center; gap:7px; min-height:44px; font-size:.7rem; color:var(--dnx-accent-2); }

.dnx-custom { display:grid; gap:7px; margin:16px 0; padding:14px 16px; border:1px solid #299bff45; border-left:3px solid var(--dnx-accent); border-radius:10px; background:linear-gradient(110deg,#299bff0d,transparent); }
.dnx-custom-tag { font:600 .6rem var(--dnx-mono); letter-spacing:.12em; text-transform:uppercase; color:var(--dnx-accent-2); }
.dnx-custom strong { font-size:.95rem; line-height:1.4; }
.dnx-custom p { font-size:.78rem; line-height:1.55; color:var(--dnx-muted); }
.dnx-custom ul { display:flex; flex-wrap:wrap; gap:5px; padding:0; list-style:none; }
.dnx-custom li { padding:3px 7px; border:1px solid var(--dnx-line); border-radius:5px; color:var(--dnx-accent-2); font-size:.68rem; }
.dnx-account-socials { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:4px; }
.dnx-account-socials a { gap:5px; min-width:0; font-size:clamp(.58rem,1.6vw,.68rem); white-space:nowrap; }
.dnx-account-socials .dnx-brand { width:18px; height:18px; }
.dnx-account-socials a > .dnx-ic:last-child { display:none; }
.dns .mk-web-subtitle { margin-top:-5px; margin-bottom:12px; font-size:clamp(.83rem,2vw,1rem); }
.dns .mk-customline { display:block; padding:12px 14px; border:1px solid #299bff45; border-left:3px solid #299bff; border-radius:10px; font-size:.83rem; line-height:1.55; background:#299bff08; }
.dns .mk-customline strong { color:#299bff; }
@media(max-width:619px) { .dnx-custom { margin:12px 0; padding:12px; gap:6px; } .dnx-custom strong { font-size:.88rem; } .dnx-custom p { font-size:.76rem; } }
.dnx-acct[data-platform="x"] .dnx-post, .dnx-acct[data-platform="facebook"] .dnx-post { display:flex; flex-direction:column; }
.dnx-acct[data-platform="x"] .dnx-post-header, .dnx-acct[data-platform="facebook"] .dnx-post-header { order:0; }
.dnx-acct[data-platform="x"] .dnx-post-caption, .dnx-acct[data-platform="facebook"] .dnx-post-caption { order:1; padding-top:0; }
.dnx-acct[data-platform="x"] .dnx-media-wrap, .dnx-acct[data-platform="facebook"] .dnx-media-wrap { order:2; margin:0 10px; border-radius:12px; overflow:clip; border:1px solid var(--dnx-line); }
.dnx-acct[data-platform="x"] .dnx-slide-controls, .dnx-acct[data-platform="facebook"] .dnx-slide-controls { order:3; }
.dnx-acct[data-platform="x"] .dnx-post-actions, .dnx-acct[data-platform="facebook"] .dnx-post-actions { order:4; }
.dnx-acct[data-platform="facebook"] .dnx-feed-window { border-color:#1877f255; }
.dnx-acct[data-platform="facebook"] .dnx-post-header { background:linear-gradient(90deg,#1877f21a,transparent); }
.dnx-case[data-platform="facebook"] .dnx-video { border-color:#1877f255; }
.dnx-case[data-platform="facebook"] .dnx-short-top { background:#1877f21a; }
.dnx-case[data-platform="x"] .dnx-video { border-radius:12px; border-color:#ffffff45; }
.dnx-case[data-platform="x"] .dnx-short-top { background:#101419; }
.dnx-acct[data-platform="tiktok"] .dnx-feed-window { border-color:#25f4ee50; box-shadow:3px 0 0 -2px #fe2c5540; }
.dnx-case-head > p { max-width:70ch; }
.mk-service-part { margin-top:40px; }
.mk-academy-join { font:800 clamp(2rem,6vw,3.4rem)/1.12 var(--display,'Arial',sans-serif); color:#fff; letter-spacing:-.035em; margin:36px 0 16px; }
.mk-web-checklist { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 28px; margin-top:22px; }
.dns .mk-web-check { display:flex; align-items:flex-start; gap:12px; min-width:0; padding:16px 0; color:#fff; text-decoration:none; border-bottom:1px solid #ffffff16; }
.mk-web-check > span:nth-child(2) { display:grid; gap:5px; min-width:0; flex:1; }
.mk-web-check strong { font-size:.95rem; font-weight:650; line-height:1.4; }
.mk-web-check > span > span { color:#f1f4f8; font-size:.8rem; line-height:1.5; }
.mk-web-check .mk-web-icon { flex:none; padding-top:2px; color:#66bbff; }
.mk-web-check .dns-ic { width:22px; height:22px; }
.mk-web-check .mk-web-tick { flex:none; color:#299bff; width:19px; height:19px; margin-top:3px; }
.dns .mk-web-check:hover strong { color:#66bbff; }
.dns .mk-web-check:focus-visible { outline:2px solid #66bbff; outline-offset:4px; border-radius:3px; }
[data-marketing-polish] .dns .dns-sec { margin-top:40px; }
[data-marketing-polish] .dns > .dns-sec:first-child { margin-top:0; }
[data-marketing-polish] .dns-steps .dns-step { min-height:0; padding:18px; }
[data-marketing-polish] .dns-slot { margin-top:28px; }
@media(min-width:680px) { .dnx-case#porto-video .dnx-platform-switch button { flex-direction:row; gap:8px; min-height:44px; font-size:.7rem; } }
@media(max-width:619px) {
 .dnx { margin-top:30px; }
 .dnx-panel { padding:18px 14px; }
 .dnx .dnx-lead { font-size:.85rem; line-height:1.55; margin-top:10px; }
 .dnx-case { margin-top:22px; padding-top:22px; }
 .dnx .dnx-h3-lg { font-size:1.25rem; }
 .dnx-case-head > p { margin-top:7px; line-height:1.5; }
 .dnx-proof-line { font-size:.7rem; }
 .dnx-social-grid { gap:20px; margin-top:16px; }
 .dnx-acct-summary { margin-bottom:4px; }
 .dnx-acct-summary p { margin-top:5px; }
 .dnx-post-caption p { min-height:0; }
 .dnx-foot { margin-top:16px; padding-top:14px; }
 .mk-web-checklist { grid-template-columns:minmax(0,1fr); gap:0; margin-top:14px; }
 .dns .mk-web-check { padding:13px 0; gap:10px; }
 .mk-web-check strong { font-size:.87rem; }
 .mk-web-check > span > span { font-size:.76rem; }
 [data-marketing-polish] .dns .dns-sec { margin-top:28px; }
 [data-marketing-polish] .dns-slot { margin-top:22px; }
 [data-marketing-polish] .dns .dns-h2 { font-size:clamp(1.45rem,6vw,1.8rem); line-height:1.18; margin-bottom:16px; }
 [data-marketing-polish] .dns .dns-h3-lg { font-size:1.35rem; }
 [data-marketing-polish] .dns .dns-card { padding:16px; }
 [data-marketing-polish] .dns .dns-card p { font-size:.8rem; line-height:1.5; }
 [data-marketing-polish] .dns .dns-else { padding:18px; margin-top:18px; }
 [data-marketing-polish] .automation { padding:20px; }
 [data-marketing-polish] .au-desc { margin-block:12px; font-size:.88rem; }
 [data-marketing-polish] .ac-desc, [data-marketing-polish] .dc-desc { margin-block:12px; line-height:1.5; }
 [data-marketing-polish] .ac-main, [data-marketing-polish] .dc-main { margin-block:16px; }
 [data-marketing-polish] .academy, [data-marketing-polish] .discord { padding:22px; }
 [data-marketing-polish] .why, [data-marketing-polish] .ecosystem, [data-marketing-polish] .program { padding-block:32px; }
 .automation-page #proses { margin-top:32px; }
 .automation-page #proses > ol { margin-top:20px; gap:10px; }
 .automation-page #proses > ol > li { padding:16px; }
 .automation-page #layanan { margin-top:28px; }
 .automation-page .mk-service-part { margin-top:28px; }
 .automation-page #layanan .mk-service-part { margin-top:0; }
 .automation-page .mk-services .dns-sec { margin-top:0; }
 .automation-page .mk-services .dns-h2 { font-size:1.55rem; }
 .automation-page #form { margin-top:32px; }
}
html[data-theme="light"] .mk-academy-join { color:#101c2d; }
html[data-theme="light"] .dns .mk-web-check { color:#101c2d; border-bottom-color:#101c2d1a; }

/* Keep illustrative animation idle outside the three marketing viewports. */
.dns[data-performance="marketing"] .al:not(.is-visible),
.dns[data-performance="marketing"] .al:not(.is-visible)::before,
.dns[data-performance="marketing"] .al:not(.is-visible)::after,
.dns[data-performance="marketing"] .al[data-sleep="true"],
.dns[data-performance="marketing"] .al[data-sleep="true"]::before,
.dns[data-performance="marketing"] .al[data-sleep="true"]::after,
.dns[data-performance="marketing"] .al:not(.is-visible) *,
.dns[data-performance="marketing"] .al:not(.is-visible) *::before,
.dns[data-performance="marketing"] .al:not(.is-visible) *::after,
.dns[data-performance="marketing"] .al[data-sleep="true"] *,
.dns[data-performance="marketing"] .al[data-sleep="true"] *::before,
.dns[data-performance="marketing"] .al[data-sleep="true"] *::after { animation-play-state:paused !important; }
body[data-marketing-polish] [data-marketing-visible="false"],
body[data-marketing-polish] [data-marketing-visible="false"] *,
body[data-marketing-polish] [data-marketing-visible="false"] *::before,
body[data-marketing-polish] [data-marketing-visible="false"] *::after,
body[data-marketing-sleep="true"] *,body[data-marketing-sleep="true"] *::before,body[data-marketing-sleep="true"] *::after,
.dnx-hidden *::before,.dnx-hidden *::after,.dnx [data-live]:not(.is-live) *::before,.dnx [data-live]:not(.is-live) *::after { animation-play-state:paused !important; }
html[data-theme="light"] .mk-web-check > span > span { color:#26384e; }

/* Owner-selected AI SEO story. Existing .dnx-seo-grid and its animation are untouched. */
.dnq-story{--dnq-blue:#61b6ff;--dnq-ink:#f2f6fb;--dnq-muted:#a6b6c8;--dnq-line:#29435d;--dnq-panel:#102032;container-type:inline-size;max-width:none;text-align:left}
.dnq-story [hidden]{display:none!important}.dnq-story :where(button,a,summary):focus-visible,.dnq-perspective a:focus-visible{outline:3px solid #a6d9ff;outline-offset:4px}
.dnq-story .dnq-eyebrow{font:12px var(--dnx-mono,monospace);color:var(--dnq-blue);margin:0 0 28px}.dnq-new{display:inline-block;padding:5px 12px;background:#153956;border:1px solid #326b98;border-radius:18px;margin-right:17px}
.dnq-story .dnq-title{font-size:clamp(29px,4.25vw,49px);font-weight:700;line-height:1.14;letter-spacing:-.035em;margin:0 0 26px;color:var(--dnq-ink)}.dnq-title span{display:block;color:var(--dnq-blue)}
.dnq-story .dnq-sub{font-size:clamp(.94rem,.9rem + .15vw,1.05rem);line-height:1.6;margin:0 0 12px;color:var(--dnq-ink)}.dnq-sub span{color:var(--dnq-blue);display:block}.dnq-story .dnq-body{font-size:clamp(.9rem,.84rem + .3vw,1.02rem);line-height:1.65;color:var(--dnq-muted);margin:0 0 24px}
.dnq-label{font:11px var(--dnx-mono,"Space Mono",monospace);color:#7d95ad;letter-spacing:.04em}.dnq-paths{display:grid;grid-template-columns:minmax(0,1fr);gap:18px;margin-top:18px}
.dnq-path{border:1px solid var(--dnq-line);background:var(--dnq-panel);border-radius:18px;padding:12px 16px 16px;min-width:0;display:flex;flex-direction:column}.dnq-browser{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:44px}.dnq-engine{font:700 11px var(--dnx-mono,monospace);color:var(--dnq-blue)}
.dnq-browser button{appearance:none;border:1px solid transparent;border-radius:9px;min-width:44px;min-height:44px;background:transparent;color:var(--dnq-muted);font:inherit;font-size:12px;cursor:pointer;padding:6px 10px}.dnq-browser button:disabled{opacity:.65;cursor:default}.dnq-browser button:hover:not(:disabled),.dnq-browser button[aria-pressed=true]{background:#233b4e;border-color:#41627c;color:#fff}.dnq-ai-tabs{display:flex;gap:2px}.dnq-ai-tabs button{display:inline-flex;align-items:center;justify-content:center;padding:8px}.dnq-ai-tabs img{border-radius:5px;flex:none}
.dnq-window{box-sizing:border-box;border-radius:11px;padding:11px 12px;min-height:150px;min-width:0;position:relative}.dnq-search{border:1px solid #dae4ef;background:#f7f9fc;color:#20384c}.dnq-query{display:flex;align-items:center;gap:10px;min-width:0;border-radius:22px;padding:7px 10px;background:#edf1f7;font-size:13px}.dnq-query img{flex:none}.dnq-query span{min-width:0;overflow-wrap:anywhere}.dnq-url{display:flex;align-items:center;gap:6px;font-size:10px;margin:10px 0 6px;color:#475c6d;overflow-wrap:anywhere}.dnq-url img{border-radius:50%;flex:none}.dnq-story .dnq-search-title{color:#174ea6;font-size:14px;font-weight:600;line-height:1.3;text-decoration:none;display:block}.dnq-story .dnq-search-title:hover{text-decoration:underline}.dnq-story .dnq-answer{font-size:12px;line-height:1.4;color:#475c6d;margin-top:5px}
.dnq-chat{background:#171c24;border:1px solid #36444f;color:#f2f6fb}.dnq-chat-head{display:flex;align-items:center;gap:7px;font-size:12px}.dnq-chat-head img{border-radius:4px}.dnq-chat-head span:last-child{margin-left:auto;letter-spacing:2px;color:#a6b6c8}.dnq-story .dnq-bubble{background:#2c333e;border-radius:14px;padding:6px 9px;font-size:12px;line-height:1.35;margin:7px 0 9px;overflow-wrap:anywhere}.dnq-story .dnq-ai-answer{font-size:12px;line-height:1.4;color:#d9e5f2}.dnq-ai-answer strong{font-weight:700;color:#fff}.dnq-story .dnq-citation{display:inline-block;font-size:10px;color:#a6d8ff;background:#233b4e;border-radius:10px;padding:2px 8px;text-decoration:none;margin-top:5px;min-height:24px;align-content:center}
.dnq-explain{display:flex;align-items:baseline;gap:16px;margin-top:16px;min-width:0}.dnq-explain strong{font-size:21px;line-height:1.2;color:var(--dnq-blue);white-space:nowrap}.dnq-story .dnq-explain p{font-size:14px;line-height:1.35;color:var(--dnq-muted);margin:0;overflow-wrap:anywhere}.dnq-status{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.dnq-story .dnq-wait{display:flex;align-items:center;gap:8px;min-height:72px;font-size:12px;color:inherit}.dnq-wait i{width:13px;height:13px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:dnq-spin .75s linear infinite;opacity:.7}.dnq-converge{height:46px;position:relative;margin:0 25%}.dnq-converge:before{content:"";display:block;border:1px solid #3b6e96;border-top:0;height:23px}.dnq-converge:after{content:"↓";position:absolute;top:20px;left:calc(50% - 7px);color:var(--dnq-blue);font-size:24px}
.dnq-purpose{border:1px solid #275e88;background:#0d2b45;border-radius:14px;padding:14px 16px}.dnq-purpose .dnq-label{color:var(--dnq-blue)}.dnq-story .dnq-purpose p{font-size:clamp(1rem,.96rem + .2vw,1.1rem);line-height:1.55;font-weight:600;margin:8px 0 0;color:var(--dnq-ink)}
.dnq-proof-head{display:flex;justify-content:space-between;gap:16px;align-items:center;margin-top:32px}.dnq-proof-head .dnq-label{color:var(--dnq-blue)}.dnq-pause{min-height:44px;min-width:94px;padding:8px 14px;border-radius:10px;background:#102338;border:1px solid #355672;color:#d9eeff;cursor:pointer;font:inherit;font-size:13px}
.dnq-rail{overflow-x:auto;overflow-y:hidden;margin:10px 0 12px;scrollbar-width:thin;scrollbar-color:#365c7c transparent;mask-image:linear-gradient(90deg,#000 94%,transparent);touch-action:pan-x pan-y}.dnq-track{display:flex;width:max-content;gap:16px;animation:dnq-left 88s linear infinite;animation-play-state:paused}.dnq-rail.is-live .dnq-track{animation-play-state:running}.dnq-track figure{margin:0;width:264px;flex:none}.dnq-track img{display:block;width:264px;height:auto;border-radius:14px}.dnq-track a{display:block;border-radius:14px}.dnq-track a:focus-visible{outline-offset:-4px}.dnq-rail:hover .dnq-track,.dnq-rail:focus-within .dnq-track,[data-story-paused=true] .dnq-track,.dnx-hidden .dnq-track,.dnx-calm .dnq-track{animation-play-state:paused}.dnq-track [aria-hidden=true]{pointer-events:none}
.dnq-story .dnq-proof-note{font-size:11px;color:#7d95ad;line-height:1.5;margin:0 0 26px}.dnq-story .dnq-emphasis{font-size:clamp(27px,3.5vw,38px);font-weight:700;color:var(--dnq-blue);line-height:1.15;margin:0 0 14px}.dnq-story .dnq-emphasis-sub{font-size:18px;line-height:1.5;color:var(--dnq-ink);margin:0 0 12px}.dnq-story .dnq-count-note{font-size:11px;line-height:1.5;color:#7d95ad;margin:0 0 20px}.dnq-sources{font-size:12px;line-height:1.5;color:var(--dnq-muted);margin-top:20px}.dnq-sources summary{cursor:pointer;padding:12px 0;min-height:44px;color:#8acbff}.dnq-sources ul{list-style:disc;padding:12px 0 0 20px}.dnq-sources li{margin:5px 0}.dnq-story a{color:#8acbff}
/* A secondary reference card, sized like the surrounding service copy. */
.dn-ex-panel>.dnq-seo-brief{width:100%;min-width:0;margin:48px 0 0;padding:32px 24px 24px;border:1px solid rgba(255,255,255,.52);border-radius:20px;background:linear-gradient(145deg,rgba(255,255,255,.035),rgba(255,255,255,.01));box-shadow:0 0 18px rgba(255,255,255,.07),inset 0 0 0 1px rgba(255,255,255,.025);box-sizing:border-box;scroll-margin-top:110px}.dn-ex-panel>.dnq-seo-brief>h2{font:600 clamp(1.1rem,1rem + .3vw,1.35rem)/1.35 var(--font-archivo,"Archivo"),sans-serif;margin:0 0 24px}.dn-ex-panel>.dnq-seo-brief iframe{color-scheme:dark;background:#060606;border-radius:14px}
.dnq-perspective{--dnq-blue:#61b6ff;display:grid;grid-template-columns:130px minmax(0,1fr);gap:24px;width:100%;max-width:820px;margin:36px auto 16px;padding:20px;border:1px solid #29435d;border-radius:16px;background:#0b111b;color:#f2f6fb;font-family:var(--font-archivo,"Archivo"),sans-serif;text-align:left;overflow:visible;box-sizing:border-box}.dnq-perspective *{box-sizing:border-box}.dnq-person{min-width:0}.dnq-portrait{position:relative;isolation:isolate;overflow:visible;margin-top:-36px}.dnq-portrait:before{content:"";position:absolute;inset:36px 0 0;border-radius:12px;background:radial-gradient(ellipse at 50% 30%,#194261,#102032 75%);z-index:-1}.dnq-portrait img{display:block;width:100%;max-width:100%;height:auto;object-fit:contain;object-position:center bottom;filter:drop-shadow(0 -3px 10px rgba(0,0,0,.2))}.dnq-person h3{font-size:16px;line-height:1.3;margin:12px 0 5px;color:#fff}.dnq-person p{font-size:12px;line-height:1.5;color:#a6b6c8;margin:0}.dnq-perspective-copy{min-width:0;display:grid;grid-template-columns:minmax(0,1fr) auto;align-content:start;column-gap:12px}.dnq-perspective .dnq-label{color:#61b6ff;font-size:10px;line-height:1.5;margin:0}.dnq-perspective-copy>.dnq-label{grid-column:1;grid-row:1;align-self:center}.dnq-perspective .dnq-perspective-title{grid-column:1/-1;font-size:clamp(.82rem,.79rem + .12vw,.9rem);font-style:italic;font-weight:500;line-height:1.55;letter-spacing:0;margin:4px 0 12px;color:#f2f6fb;opacity:.72}.dnq-perspective .dnq-perspective-title:before{content:"\201C"}.dnq-perspective .dnq-perspective-title:after{content:"\201D"}.dnq-source-text{color:#8acbff;opacity:.85}.dnq-monogram{display:grid;place-items:center;aspect-ratio:880/1021;width:100%;margin-top:0}.dnq-monogram:before{inset:0}.dnq-monogram span{font-size:34px;font-weight:700;letter-spacing:.04em;color:#cfe6ff}.dnq-video-source{grid-column:2;grid-row:1;font-size:11px;display:inline-flex;align-items:center;min-height:44px;color:#8acbff}.dnq-dn-message{grid-column:1/-1;border-top:1px solid #29435d;margin-top:0;padding-top:12px}.dnq-dn-message p:not(.dnq-label){font-size:clamp(.875rem,.82rem + .2vw,1rem);line-height:1.6;margin:8px 0 0;color:#e5edf7}
@keyframes dnq-left{from{transform:translateX(0)}to{transform:translateX(calc(-50% - 8px))}}@keyframes dnq-spin{to{transform:rotate(360deg)}}
@container(min-width:700px){.dnq-paths{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}.dnq-track figure,.dnq-track img{width:280px}}
@media(max-width:700px){.dnq-converge{margin:0 50%;height:40px}.dnq-converge:before{display:none}.dnq-converge:after{top:1px}.dnq-perspective{grid-template-columns:minmax(0,1fr);gap:12px;margin:28px auto 12px;padding:16px}.dnq-person{display:grid;grid-template-columns:72px minmax(0,1fr);column-gap:14px;align-items:end}.dnq-portrait{grid-row:span 2;margin-top:-28px}.dnq-portrait:before{inset:28px 0 0}.dnq-person h3{margin:0 0 4px;font-size:15px}.dnq-person p{align-self:start;font-size:12px}.dnq-perspective .dnq-perspective-title{font-size:13.5px}.dnq-monogram{margin-top:0;aspect-ratio:1/1}.dnq-monogram:before{inset:0}.dnq-monogram span{font-size:22px}.dnq-dn-message p:not(.dnq-label){font-size:14px}}
@media(prefers-reduced-motion:reduce){.dnq-track,.dnq-wait i{animation:none!important}.dnq-track [aria-hidden=true]{display:none}.dnq-rail{mask-image:none}.dnq-pause{display:none}}

@media(max-width:800px){.dn-ex-panel>.dnq-seo-brief{margin-top:36px;padding:28px 16px 20px}.dn-ex-panel>.dnq-seo-brief>h2{margin-bottom:22px}}

/* Match existing React project briefs to the shared white-outline card. */
.automation-form-shell.automation-form-shell{border:1px solid rgba(255,255,255,.52);border-radius:20px;background:linear-gradient(145deg,rgba(255,255,255,.035),rgba(255,255,255,.01));box-shadow:0 0 18px rgba(255,255,255,.07),inset 0 0 0 1px rgba(255,255,255,.025);box-sizing:border-box}

/* Photo credits stay secondary to the quote, with the same cutout placement as Hormozi. */
.dnq-photo-credit{display:block;margin-top:6px;font-size:10px;line-height:1.5;color:#a6b6c8}.dnq-photo-credit a{color:inherit;text-decoration:underline;text-underline-offset:2px}.dnq-photo-credit a:focus-visible{outline:2px solid #61b6ff;outline-offset:3px}.dnq-photo-credit>span{display:block}
@media(max-width:700px){.dnq-expert .dnq-portrait{align-self:start;margin-top:-36px}}