/* CRN Contact — "Kirim Kami Pesan" form (Contact Form 7). */
.crn-cf-wrap {
	--cf-navy: #1F3765;
	--cf-teal: #00C1B2;
	--cf-teal-dark: #00A396;
	--cf-text: #191919;
	--cf-muted: #8A8F98;
	--cf-line: #E3E6EB;
	--cf-error: #D93025;
	--cf-radius: 8px;
	position: relative;
	width: 100%;
	font-family: "DM Sans", sans-serif;
}
.crn-cf-wrap .wpcf7 { margin: 0; }
.crn-cf-wrap .wpcf7-form { position: relative; margin: 0; transition: opacity .35s ease, transform .35s ease; }
.crn-cf-wrap .hidden-fields-container { display: none; border: 0; margin: 0; padding: 0; }
.crn-cf-wrap .screen-reader-response {
	position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); border: 0;
}

/* ---------- Honeypot (hidden from people, visible to naive bots) ---------- */
.crn-cf__hp { position: absolute !important; left: -9999px !important; top: auto; width: 1px; height: 1px; overflow: hidden; }

/* ---------- Fields ---------- */
.crn-cf__fields { display: flex; flex-direction: column; gap: 14px; }
.crn-cf__field { position: relative; }
.crn-cf-wrap .wpcf7-form-control-wrap { display: block; position: relative; }
.crn-cf-wrap .wpcf7-text,
.crn-cf-wrap .wpcf7-email,
.crn-cf-wrap .wpcf7-textarea {
	display: block;
	width: 100%;
	height: 54px;
	margin: 0;
	padding: 0 16px;
	border: 1px solid var(--cf-line);
	border-radius: var(--cf-radius);
	background: #FFFFFF;
	box-shadow: none;
	color: var(--cf-text);
	font-family: inherit;
	font-size: 14px;
	line-height: 1.5;
	outline: none;
	transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
	-webkit-appearance: none;
	appearance: none;
}
.crn-cf-wrap .wpcf7-textarea { height: 136px; min-height: 136px; max-height: 320px; padding: 15px 16px; resize: vertical; }
.crn-cf-wrap .wpcf7-form-control::placeholder { color: var(--cf-muted); opacity: 1; font-size: 13.5px; }
.crn-cf-wrap .wpcf7-text:hover,
.crn-cf-wrap .wpcf7-email:hover,
.crn-cf-wrap .wpcf7-textarea:hover { border-color: #C9CED6; }
.crn-cf-wrap .wpcf7-text:focus,
.crn-cf-wrap .wpcf7-email:focus,
.crn-cf-wrap .wpcf7-textarea:focus {
	border-color: var(--cf-teal);
	box-shadow: 0 0 0 4px rgba(0, 193, 178, .14);
}

/* ---------- Validation ---------- */
.crn-cf-wrap .wpcf7-not-valid,
.crn-cf-wrap .wpcf7-not-valid:hover { border-color: var(--cf-error) !important; }
.crn-cf-wrap .wpcf7-not-valid:focus { box-shadow: 0 0 0 4px rgba(217, 48, 37, .12) !important; }
.crn-cf-wrap .wpcf7-not-valid-tip {
	display: flex; align-items: center; gap: 6px;
	margin-top: 6px; color: var(--cf-error); font-size: 12.5px; line-height: 1.4;
	animation: crnCfTip .25s ease both;
}
.crn-cf-wrap .wpcf7-not-valid-tip::before {
	content: "!"; flex: 0 0 14px; height: 14px; border-radius: 50%; background: var(--cf-error); color: #FFFFFF;
	font-size: 10px; font-weight: 700; line-height: 14px; text-align: center;
}
@keyframes crnCfTip { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.crn-cf__field.is-shake { animation: crnCfShake .42s cubic-bezier(.36, .07, .19, .97) both; }
@keyframes crnCfShake {
	10%, 90% { transform: translateX(-1px); }
	20%, 80% { transform: translateX(2px); }
	30%, 50%, 70% { transform: translateX(-4px); }
	40%, 60% { transform: translateX(4px); }
}

/* ---------- Custom select ---------- */
.crn-cf-wrap .crn-select__native {
	position: absolute !important; inset: 0; width: 100% !important; height: 100% !important;
	opacity: 0; pointer-events: none; margin: 0; border: 0;
}
.crn-select { position: relative; }
.crn-select__btn {
	display: flex; align-items: center; justify-content: space-between; gap: 12px;
	width: 100%; height: 54px; margin: 0; padding: 0 16px;
	border: 1px solid var(--cf-line); border-radius: var(--cf-radius); background: #FFFFFF;
	color: var(--cf-text); font-family: inherit; font-size: 14px; font-weight: 400; line-height: 1.4; text-align: left; text-transform: none; letter-spacing: 0;
	cursor: pointer; box-shadow: none; outline: none;
	transition: border-color .2s ease, box-shadow .2s ease;
}
.crn-cf-wrap .crn-select__btn:hover, .crn-cf-wrap .crn-select__btn:focus { background: #FFFFFF; color: var(--cf-text); border-color: #C9CED6; }
.crn-cf-wrap .crn-select__btn:focus-visible,
.crn-select.is-open .crn-select__btn { border-color: var(--cf-teal); box-shadow: 0 0 0 4px rgba(0, 193, 178, .14); }
.crn-select.is-invalid .crn-select__btn { border-color: var(--cf-error); }
.crn-select__value { flex: 1 1 auto; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.crn-select__value.is-placeholder { color: var(--cf-muted); font-size: 13.5px; }
.crn-select__chev { flex: 0 0 auto; width: 16px; height: 16px; color: var(--cf-text); transition: transform .25s ease; }
.crn-select.is-open .crn-select__chev { transform: rotate(180deg); }
.crn-select__list {
	position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 30;
	max-height: 280px; margin: 0; padding: 6px; overflow-y: auto; overscroll-behavior: contain;
	list-style: none; background: #FFFFFF; border: 1px solid var(--cf-line); border-radius: 10px;
	box-shadow: 0 18px 40px rgba(15, 30, 60, .16);
	opacity: 0; transform: translateY(-6px) scale(.98); transform-origin: top center;
	visibility: hidden; transition: opacity .18s ease, transform .18s ease, visibility 0s linear .18s;
}
.crn-select.is-open .crn-select__list { opacity: 1; transform: none; visibility: visible; transition: opacity .18s ease, transform .18s ease; }
.crn-select.is-up .crn-select__list { top: auto; bottom: calc(100% + 6px); transform-origin: bottom center; }
.crn-select__opt {
	display: flex; align-items: center; justify-content: space-between; gap: 10px;
	margin: 0; padding: 10px 12px; border-radius: 6px; color: var(--cf-text); font-size: 14px; line-height: 1.4; cursor: pointer;
	transition: background-color .15s ease, color .15s ease;
}
.crn-select__opt.is-active { background: #EEF3FB; }
.crn-select__opt[aria-selected="true"] { color: var(--cf-navy); font-weight: 600; }
.crn-select__opt[aria-selected="true"]::after {
	content: ""; flex: 0 0 16px; height: 16px;
	background: no-repeat center / 16px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300C1B2' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}

/* ---------- Submit button + loading animation ---------- */
.crn-cf__actions { margin-top: 28px; }
.crn-cf-wrap .wpcf7-spinner { display: none !important; }
.crn-cf-wrap .crn-cf__submit {
	position: relative; overflow: hidden; isolation: isolate;
	display: inline-flex; align-items: center; justify-content: center; gap: 10px;
	width: 100%; height: 54px; margin: 0; padding: 0 24px;
	border: 0; border-radius: var(--cf-radius); background: var(--cf-teal); color: #FFFFFF;
	font-family: inherit; font-size: 15px; font-weight: 500; line-height: 1; letter-spacing: 0; text-transform: none;
	cursor: pointer; box-shadow: none;
	transition: background-color .25s ease, transform .15s ease, box-shadow .25s ease;
}
.crn-cf-wrap .crn-cf__submit:hover { background: var(--cf-teal-dark); color: #FFFFFF; box-shadow: 0 10px 22px rgba(0, 193, 178, .28); }
.crn-cf-wrap .crn-cf__submit:active { transform: scale(.985); }
.crn-cf-wrap .crn-cf__submit:focus-visible { outline: 3px solid var(--cf-navy); outline-offset: 3px; }
.crn-cf__label { position: relative; z-index: 1; transition: opacity .2s ease, transform .2s ease; }
.crn-cf__spin {
	position: absolute; left: 50%; top: 50%; z-index: 1; width: 22px; height: 22px; margin: -11px 0 0 -11px;
	border: 2.5px solid rgba(255, 255, 255, .35); border-top-color: #FFFFFF; border-radius: 50%;
	opacity: 0; transform: scale(.6); transition: opacity .2s ease, transform .2s ease;
}
/* Sliding sheen across the button while the message is being sent. */
.crn-cf-wrap .crn-cf__submit::before {
	content: ""; position: absolute; inset: 0; z-index: 0;
	background: linear-gradient(110deg, transparent 20%, rgba(255, 255, 255, .28) 50%, transparent 80%);
	transform: translateX(-100%); opacity: 0;
}
.crn-cf-wrap .wpcf7-form.submitting .crn-cf__submit { pointer-events: none; background: var(--cf-teal-dark); }
.crn-cf-wrap .wpcf7-form.submitting .crn-cf__submit::before { opacity: 1; animation: crnCfSheen 1.1s ease-in-out infinite; }
.crn-cf-wrap .wpcf7-form.submitting .crn-cf__label { opacity: 0; transform: translateY(6px); }
.crn-cf-wrap .wpcf7-form.submitting .crn-cf__spin { opacity: 1; transform: none; animation: crnCfSpin .7s linear infinite; }
.crn-cf-wrap .wpcf7-form.submitting .crn-cf__fields { opacity: .6; pointer-events: none; transition: opacity .2s ease; }
@keyframes crnCfSpin { to { transform: rotate(360deg); } }
@keyframes crnCfSheen { to { transform: translateX(100%); } }

/* ---------- Response message (errors) ---------- */
.crn-cf-wrap .wpcf7 form .wpcf7-response-output {
	margin: 16px 0 0; padding: 12px 14px; border: 0; border-left: 3px solid transparent; border-radius: 8px;
	font-size: 13.5px; line-height: 1.5; animation: crnCfTip .25s ease both;
}
.crn-cf-wrap .wpcf7 form.init .wpcf7-response-output,
.crn-cf-wrap .wpcf7 form.resetting .wpcf7-response-output,
.crn-cf-wrap .wpcf7 form.submitting .wpcf7-response-output,
.crn-cf-wrap .wpcf7 form.sent .wpcf7-response-output { display: none; }
.crn-cf-wrap .wpcf7 form.invalid .wpcf7-response-output,
.crn-cf-wrap .wpcf7 form.unaccepted .wpcf7-response-output { background: #FFF6E5; border-left-color: #F2A100; color: #7A4B00; }
.crn-cf-wrap .wpcf7 form.spam .wpcf7-response-output,
.crn-cf-wrap .wpcf7 form.failed .wpcf7-response-output,
.crn-cf-wrap .wpcf7 form.aborted .wpcf7-response-output { background: #FDECEC; border-left-color: var(--cf-error); color: #8C1D18; }

/* ---------- Success panel ---------- */
.crn-cf-success {
	position: absolute; inset: 0; z-index: 5;
	display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
	padding: 24px; text-align: center; background: #FFFFFF;
	opacity: 0; visibility: hidden; transform: translateY(10px) scale(.98);
	transition: opacity .4s ease .1s, transform .4s ease .1s, visibility 0s linear .5s;
}
.crn-cf-wrap.is-sent .wpcf7-form { opacity: 0; transform: translateY(-8px); pointer-events: none; }
.crn-cf-wrap.is-sent .crn-cf-success { opacity: 1; visibility: visible; transform: none; transition: opacity .4s ease .15s, transform .4s ease .15s; }
.crn-cf-success__icon { position: relative; width: 84px; height: 84px; }
.crn-cf-success__icon::before {
	content: ""; position: absolute; inset: 0; border-radius: 50%; background: rgba(0, 193, 178, .14);
	transform: scale(.4); opacity: 0;
}
.crn-cf-wrap.is-sent .crn-cf-success__icon::before { animation: crnCfRing 1.2s ease-out .35s both; }
.crn-cf-success__icon svg { position: relative; width: 84px; height: 84px; }
.crn-cf-success__circle { fill: none; stroke: var(--cf-teal); stroke-width: 3; stroke-dasharray: 226; stroke-dashoffset: 226; stroke-linecap: round; }
.crn-cf-success__check { fill: none; stroke: var(--cf-teal); stroke-width: 4; stroke-dasharray: 48; stroke-dashoffset: 48; stroke-linecap: round; stroke-linejoin: round; }
.crn-cf-wrap.is-sent .crn-cf-success__circle { animation: crnCfDraw .6s cubic-bezier(.65, 0, .45, 1) .3s forwards; }
.crn-cf-wrap.is-sent .crn-cf-success__check { animation: crnCfDraw .35s cubic-bezier(.65, 0, .45, 1) .85s forwards; }
@keyframes crnCfDraw { to { stroke-dashoffset: 0; } }
@keyframes crnCfRing { 0% { transform: scale(.4); opacity: 0; } 30% { opacity: 1; } 100% { transform: scale(1.45); opacity: 0; } }
.crn-cf-success__title { margin: 6px 0 0; color: var(--cf-text); font-size: 22px; font-weight: 700; line-height: 1.3; }
.crn-cf-success__text { max-width: 380px; margin: 0; color: #4B5563; font-size: 14.5px; line-height: 1.6; }
.crn-cf-wrap .crn-cf-success__again {
	margin-top: 10px; padding: 11px 22px; border: 1px solid var(--cf-navy); border-radius: var(--cf-radius);
	background: transparent; color: var(--cf-navy); font-family: inherit; font-size: 14px; font-weight: 500; line-height: 1.2; cursor: pointer;
	transition: background-color .2s ease, color .2s ease;
}
.crn-cf-wrap .crn-cf-success__again:hover, .crn-cf-wrap .crn-cf-success__again:focus { background: var(--cf-navy); color: #FFFFFF; }

/* ---------- Dark variant (navy background, e.g. Kontak Kami page) ---------- */
.crn-cf-wrap--dark .wpcf7-text,
.crn-cf-wrap--dark .wpcf7-email,
.crn-cf-wrap--dark .wpcf7-textarea,
.crn-cf-wrap--dark .crn-select__btn { border-color: #FFFFFF; }
.crn-cf-wrap--dark .wpcf7-text:focus,
.crn-cf-wrap--dark .wpcf7-email:focus,
.crn-cf-wrap--dark .wpcf7-textarea:focus,
.crn-cf-wrap--dark .crn-select__btn:focus-visible,
.crn-cf-wrap--dark .crn-select.is-open .crn-select__btn { border-color: var(--cf-teal); box-shadow: 0 0 0 4px rgba(0, 193, 178, .35); }
.crn-cf-wrap--dark .wpcf7-not-valid-tip { color: #FFB4AB; }
.crn-cf-wrap--dark .wpcf7-not-valid-tip::before { background: #FFB4AB; color: var(--cf-navy); }
.crn-cf-wrap--dark .wpcf7-not-valid { border-color: #FF8A80 !important; box-shadow: 0 0 0 1px #FF8A80; }
.crn-cf-wrap--dark .crn-select.is-invalid .crn-select__btn { border-color: #FF8A80; box-shadow: 0 0 0 1px #FF8A80; }
.crn-cf-wrap--dark .crn-cf__submit:focus-visible { outline-color: #FFFFFF; }
.crn-cf-wrap--dark .crn-cf-success { background: transparent; }
.crn-cf-wrap--dark .crn-cf-success__icon::before { background: rgba(0, 193, 178, .3); }
.crn-cf-wrap--dark .crn-cf-success__title { color: #FFFFFF; }
.crn-cf-wrap--dark .crn-cf-success__text { color: rgba(255, 255, 255, .85); }
.crn-cf-wrap--dark .crn-cf-success__again { border-color: #FFFFFF; color: #FFFFFF; }
.crn-cf-wrap--dark .crn-cf-success__again:hover,
.crn-cf-wrap--dark .crn-cf-success__again:focus { background: #FFFFFF; color: var(--cf-navy); }

@media (prefers-reduced-motion: reduce) {
	.crn-cf-wrap *, .crn-cf-wrap *::before { animation-duration: .01s !important; animation-delay: 0s !important; transition-duration: .01s !important; }
	.crn-cf-success__circle, .crn-cf-success__check { stroke-dashoffset: 0; }
}
@media (max-width: 767px) {
	.crn-cf__fields { gap: 12px; }
	.crn-cf-wrap .wpcf7-text, .crn-cf-wrap .wpcf7-email, .crn-select__btn, .crn-cf-wrap .crn-cf__submit { height: 50px; }
	.crn-cf-wrap .wpcf7-text, .crn-cf-wrap .wpcf7-email, .crn-cf-wrap .wpcf7-textarea, .crn-select__btn { font-size: 16px; } /* no iOS zoom */
	.crn-cf-wrap .wpcf7-textarea { height: 128px; min-height: 128px; }
	.crn-cf__actions { margin-top: 22px; }
	.crn-select__list { max-height: 240px; }
}