/* ==========================================================================
   CK WhatsApp — in-article CTA
   Two tones from contentkhana.com: Deep Navy (--ckwa-c1) + Turquoise (--ckwa-c2)
   ========================================================================== */

.ckwa-cta {
	--ckwa-c1: #0B3558;
	--ckwa-c2: #16C6D1;
	--ckwa-mid: #206892;
	--ckwa-mid: color-mix(in srgb, var(--ckwa-c1) 60%, var(--ckwa-c2));
	--ckwa-ease: cubic-bezier(.22, 1, .36, 1);
	--ckwa-spring: cubic-bezier(.34, 1.56, .64, 1);

	box-sizing: border-box;
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	gap: 28px;
	margin: 2.6em 0;
	padding: 34px 36px;
	border-radius: 24px;
	overflow: hidden;
	isolation: isolate;
	color: #fff;
	font-family: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	text-align: left;
	background:
		radial-gradient(70% 120% at 0% 115%, rgba(255, 222, 168, .16) 0%, transparent 60%),
		linear-gradient(125deg, var(--ckwa-c1) 0%, var(--ckwa-c1) 45%, var(--ckwa-mid) 100%);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, .12),
		0 30px 60px -32px rgba(11, 53, 88, .75);
}

.ckwa-cta *,
.ckwa-cta *::before,
.ckwa-cta *::after { box-sizing: border-box; }
.ckwa-cta p { margin: 0; padding: 0; }
.ckwa-cta svg { display: block; width: 100%; height: 100%; }

/* ---------- Decoration: sweeping arcs (from the brand visual), glow, orbit ---------- */
.ckwa-cta__arcs,
.ckwa-cta__arcs::before,
.ckwa-cta__arcs::after {
	position: absolute;
	border-radius: 50%;
	border: 1px solid rgba(255, 255, 255, .13);
	pointer-events: none;
}
.ckwa-cta__arcs { z-index: -1; width: 560px; height: 560px; left: -230px; top: -330px; }
.ckwa-cta__arcs::before { content: ""; inset: 46px; border-color: rgba(255, 255, 255, .08); }
.ckwa-cta__arcs::after  { content: ""; inset: -70px; border-color: rgba(22, 198, 209, .3); }

.ckwa-cta__glow {
	position: absolute;
	z-index: -1;
	width: 380px;
	height: 380px;
	right: -110px;
	top: -170px;
	border-radius: 50%;
	background: radial-gradient(circle, var(--ckwa-c2) 0%, transparent 65%);
	opacity: .42;
	filter: blur(8px);
	animation: ckwa-drift 10s ease-in-out infinite alternate;
	pointer-events: none;
}

.ckwa-cta__orbit {
	position: absolute;
	z-index: -1;
	width: 300px;
	height: 300px;
	right: -40px;
	top: 50%;
	margin-top: -150px;
	border-radius: 50%;
	border: 1px dashed rgba(255, 255, 255, .14);
	animation: ckwa-spin 26s linear infinite;
	pointer-events: none;
}
.ckwa-cta__orbit::before {
	content: "";
	position: absolute;
	inset: 50px;
	border-radius: 50%;
	border: 1px solid rgba(22, 198, 209, .22);
}
.ckwa-cta__orbit i {
	position: absolute;
	top: -4px;
	left: 50%;
	width: 8px;
	height: 8px;
	margin-left: -4px;
	border-radius: 50%;
	background: var(--ckwa-c2);
	box-shadow: 0 0 14px 3px rgba(22, 198, 209, .7);
}

/* ---------- Copy ---------- */
.ckwa-cta__body { position: relative; min-width: 0; }

.ckwa-cta__badge {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 6px 13px 6px 10px;
	border-radius: 999px;
	font-size: 11px;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .92);
	background: rgba(255, 255, 255, .08);
	border: 1px solid rgba(255, 255, 255, .16);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
}
.ckwa-cta__badge i,
.ckwa-cta__note i {
	position: relative;
	flex: 0 0 7px;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--ckwa-c2);
}
.ckwa-cta__badge i::after,
.ckwa-cta__note i::after {
	content: "";
	position: absolute;
	inset: -4px;
	border-radius: 50%;
	border: 1.5px solid var(--ckwa-c2);
	animation: ckwa-ping 2.4s var(--ckwa-ease) infinite;
}

.ckwa-cta .ckwa-cta__title {
	margin: 16px 0 10px;
	font-family: "Manrope", "Inter", ui-sans-serif, system-ui, sans-serif;
	font-size: clamp(21px, 2.3vw, 27px);
	font-weight: 800;
	line-height: 1.2;
	letter-spacing: -.02em;
	color: #fff;
}
.ckwa-cta__mark {
	display: inline-block;
	white-space: nowrap;
	color: var(--ckwa-c2);
	padding-bottom: 3px;
	background: linear-gradient(90deg, var(--ckwa-c2), rgba(255, 255, 255, .9)) no-repeat 0 100% / 100% 3px;
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
}

.ckwa-cta .ckwa-cta__text {
	max-width: 48ch;
	font-size: 15px;
	line-height: 1.6;
	color: rgba(255, 255, 255, .76);
}

/* ---------- Action ---------- */
.ckwa-cta__action {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
}

/* Turquoise pill; on hover the navy circle grows to fill it */
.ckwa-cta .ckwa-cta__btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 12px;
	height: 60px;
	padding: 6px 7px 6px 6px;
	border-radius: 999px;
	color: var(--ckwa-c1) !important;
	background: var(--ckwa-c2);
	text-decoration: none !important;
	white-space: nowrap;
	isolation: isolate;
	overflow: hidden;
	box-shadow: 0 16px 34px -12px rgba(22, 198, 209, .65), inset 0 1px 0 rgba(255, 255, 255, .35);
	transition: transform .4s var(--ckwa-ease), box-shadow .4s ease;
	-webkit-tap-highlight-color: transparent;
}
.ckwa-cta__btn::before {
	content: "";
	position: absolute;
	z-index: -1;
	left: 6px;
	top: 6px;
	bottom: 6px;
	width: 48px;
	border-radius: 999px;
	background: var(--ckwa-c1);
	transition: width .65s var(--ckwa-ease);
}
/* periodic shine */
.ckwa-cta__btn::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 2;
	pointer-events: none;
	background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .45) 50%, transparent 65%) no-repeat;
	background-size: 260% 100%;
	background-position: 170% 0;
	animation: ckwa-shine 5s var(--ckwa-ease) 1.5s infinite;
}
.ckwa-cta__btn-icon {
	flex: 0 0 48px;
	width: 48px;
	height: 48px;
	padding: 12px;
	color: var(--ckwa-c2);
}
.ckwa-cta__btn-text {
	font-size: 13.5px;
	font-weight: 800;
	letter-spacing: .08em;
	text-transform: uppercase;
	transition: color .4s ease;
}
.ckwa-cta__btn-arrow {
	flex: 0 0 38px;
	width: 38px;
	height: 38px;
	padding: 10px;
	border-radius: 50%;
	background: rgba(11, 53, 88, .12);
	transition: background .4s ease, color .4s ease, transform .5s var(--ckwa-spring);
}

.ckwa-cta__btn:hover { transform: translateY(-2px); box-shadow: 0 22px 40px -14px rgba(22, 198, 209, .75), inset 0 1px 0 rgba(255, 255, 255, .35); }
.ckwa-cta__btn:hover::before,
.ckwa-cta__btn:focus-visible::before { width: calc(100% - 12px); }
.ckwa-cta__btn:hover .ckwa-cta__btn-text,
.ckwa-cta__btn:focus-visible .ckwa-cta__btn-text { color: #fff; }
.ckwa-cta__btn:hover .ckwa-cta__btn-arrow,
.ckwa-cta__btn:focus-visible .ckwa-cta__btn-arrow { background: var(--ckwa-c2); color: var(--ckwa-c1); transform: rotate(-45deg); }
.ckwa-cta__btn:hover .ckwa-cta__btn-icon svg { animation: ckwa-wiggle .7s var(--ckwa-ease); }
.ckwa-cta__btn:focus { outline: none; }
.ckwa-cta__btn:focus-visible { outline: 3px solid #fff; outline-offset: 4px; }
.ckwa-cta__btn:active { transform: scale(.98); }

.ckwa-cta__note {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	font-size: 12.5px;
	color: rgba(255, 255, 255, .72);
}

/* ---------- Scroll reveal (only when JS is running) ---------- */
.ckwa-cta.is-anim {
	opacity: 0;
	transform: translateY(26px) scale(.985);
	transition: opacity .9s ease, transform 1.1s var(--ckwa-ease);
}
.ckwa-cta.is-anim .ckwa-cta__badge,
.ckwa-cta.is-anim .ckwa-cta__title,
.ckwa-cta.is-anim .ckwa-cta__text,
.ckwa-cta.is-anim .ckwa-cta__action {
	opacity: 0;
	transform: translateY(14px);
	transition: opacity .7s ease, transform .9s var(--ckwa-ease);
}
.ckwa-cta.is-anim .ckwa-cta__mark { background-size: 0% 3px; transition: background-size 1s var(--ckwa-ease) .75s; }

.ckwa-cta.is-anim.is-visible,
.ckwa-cta.is-anim.is-visible .ckwa-cta__badge,
.ckwa-cta.is-anim.is-visible .ckwa-cta__title,
.ckwa-cta.is-anim.is-visible .ckwa-cta__text,
.ckwa-cta.is-anim.is-visible .ckwa-cta__action { opacity: 1; transform: none; }
.ckwa-cta.is-anim.is-visible .ckwa-cta__badge  { transition-delay: .15s; }
.ckwa-cta.is-anim.is-visible .ckwa-cta__title  { transition-delay: .25s; }
.ckwa-cta.is-anim.is-visible .ckwa-cta__text   { transition-delay: .35s; }
.ckwa-cta.is-anim.is-visible .ckwa-cta__action { transition-delay: .45s; }
.ckwa-cta.is-anim.is-visible .ckwa-cta__mark   { background-size: 100% 3px; }

/* ---------- Mobile ---------- */
@media (max-width: 720px) {
	.ckwa-cta {
		grid-template-columns: 1fr;
		gap: 22px;
		padding: 28px 22px 24px;
		border-radius: 20px;
	}
	.ckwa-cta__orbit { width: 220px; height: 220px; right: -90px; top: auto; bottom: -90px; margin-top: 0; }
	.ckwa-cta__action { align-items: stretch; }
	.ckwa-cta__mark { white-space: normal; }
	.ckwa-cta .ckwa-cta__btn { width: 100%; height: 58px; }
	.ckwa-cta__btn-text { flex: 1 1 auto; text-align: center; }
	.ckwa-cta__note { justify-content: center; }
}

/* ---------- Keyframes ---------- */
@keyframes ckwa-spin { to { transform: rotate(360deg); } }
@keyframes ckwa-drift { to { transform: translate(-70px, 40px) scale(1.15); } }
@keyframes ckwa-ping {
	0%   { transform: scale(.6); opacity: .9; }
	100% { transform: scale(1.9); opacity: 0; }
}
@keyframes ckwa-shine {
	0%, 60% { background-position: 170% 0; }
	100%    { background-position: -70% 0; }
}
@keyframes ckwa-wiggle {
	0%, 100% { transform: rotate(0); }
	25% { transform: rotate(-14deg) scale(1.08); }
	50% { transform: rotate(10deg) scale(1.08); }
	75% { transform: rotate(-4deg); }
}

@media (prefers-reduced-motion: reduce) {
	.ckwa-cta *,
	.ckwa-cta *::before,
	.ckwa-cta *::after { animation: none !important; }
	.ckwa-cta.is-anim,
	.ckwa-cta.is-anim * { opacity: 1 !important; transform: none !important; transition: none !important; }
	.ckwa-cta.is-anim .ckwa-cta__mark { background-size: 100% 3px; }
}