/* Frontend CSS v2.1 — 3-Step Flow */

/* ===== ROOT ===== */
.mke-wrapper {
	--mke-color: #1D6FA5;
	--mke-dark:  #0d3d6b;
	--mke-green: #16A34A;
	--mke-red:   #DC2626;
	--mke-border:#D1E3F3;
	--mke-font:  'Segoe UI','Helvetica Neue',Arial,sans-serif;
	font-family: var(--mke-font);
	max-width: 900px;
	margin: 32px auto;
	color: #1e293b;
}

/* ===== HEADER ===== */
.mke-header {
	text-align: center;
	background: linear-gradient(135deg, var(--mke-color) 0%, var(--mke-dark) 100%);
	color: #fff;
	padding: 36px 32px 28px;
	border-radius: 14px 14px 0 0;
	position: relative;
	overflow: hidden;
}
.mke-header-deco {
	position: absolute;
	width: 300px; height: 300px;
	background: rgba(255,255,255,0.05);
	border-radius: 50%;
	top: -120px; right: -80px;
}
.mke-header-icon { font-size: 52px; line-height: 1; margin-bottom: 12px; }
.mke-judul    { font-size: 1.75rem !important; font-weight: 800 !important; color: #fff !important; margin: 0 0 8px !important; line-height: 1.2 !important; }
.mke-subtitle { font-size: .9rem; opacity: .8; margin: 0 !important; }

/* ===== STEP INDICATOR ===== */
.mke-steps {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px 28px;
	background: #f8fafc;
	border-left: 1px solid var(--mke-border);
	border-right: 1px solid var(--mke-border);
	gap: 0;
}
.mke-step {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	font-weight: 500;
	color: #94a3b8;
	transition: color .3s;
}
.mke-step-num {
	width: 28px; height: 28px;
	border-radius: 50%;
	background: #e2e8f0;
	color: #94a3b8;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 12px;
	font-weight: 700;
	transition: all .3s;
}
.mke-step-line { flex: 1; height: 2px; background: #e2e8f0; margin: 0 12px; max-width: 80px; transition: background .3s; }
.mke-step-active { color: var(--mke-color); }
.mke-step-active .mke-step-num { background: var(--mke-color); color: #fff; box-shadow: 0 0 0 4px rgba(29,111,165,.15); }
.mke-step-done { color: var(--mke-green); }
.mke-step-done .mke-step-num { background: var(--mke-green); color: #fff; }
.mke-step-done + .mke-step-line { background: var(--mke-green); }

/* ===== PANEL ===== */
.mke-panel {
	background: #fff;
	border: 1px solid var(--mke-border);
	border-top: none;
	padding: 24px 28px;
	transition: all .3s;
}
.mke-panel-hidden { display: none !important; }
.mke-panel-title {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 15px;
	font-weight: 700;
	color: #1e293b;
	margin-bottom: 20px;
}
.mke-panel-num {
	width: 26px; height: 26px;
	background: var(--mke-color);
	color: #fff;
	border-radius: 50%;
	display: flex; align-items: center; justify-content: center;
	font-size: 12px; font-weight: 700;
	flex-shrink: 0;
}

/* ===== FORM ===== */
.mke-form-grid   { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.mke-full-width  { grid-column: 1 / -1; }
.mke-form-group  { display: flex; flex-direction: column; gap: 5px; }
.mke-label       { font-size: .875rem; font-weight: 600; color: #334155; }
.mke-required    { color: var(--mke-red); margin-left: 3px; }
.mke-input       { padding: 11px 14px; border: 1.5px solid #cbd5e1; border-radius: 8px; font-size: .95rem; font-family: var(--mke-font); transition: border-color .2s, box-shadow .2s; box-sizing: border-box; width: 100%; }
.mke-input:focus { outline: none; border-color: var(--mke-color); box-shadow: 0 0 0 3px rgba(29,111,165,.1); }
.mke-input.mke-input-error { border-color: var(--mke-red); box-shadow: 0 0 0 3px rgba(220,38,38,.1); }
.mke-hint        { font-size: .8rem; color: #64748b; }
.mke-field-error { font-size: .8rem; color: var(--mke-red); margin: 2px 0 0; }
.mke-checkbox-label { display: flex; align-items: center; gap: 10px; cursor: pointer; padding: 12px 14px; background: #f0f7ff; border: 1.5px solid #bfd9ef; border-radius: 8px; font-size: .9rem; }
.mke-checkbox    { width: 17px; height: 17px; accent-color: var(--mke-color); flex-shrink: 0; }

/* ===== BUTTONS ===== */
.mke-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 12px 24px;
	border-radius: 8px;
	font-size: .95rem;
	font-weight: 600;
	font-family: var(--mke-font);
	cursor: pointer;
	border: none;
	text-decoration: none !important;
	transition: all .2s;
	white-space: nowrap;
}
.mke-btn-primary {
	background: linear-gradient(135deg, var(--mke-color), var(--mke-dark));
	color: #fff !important;
	box-shadow: 0 4px 14px rgba(29,111,165,.3);
}
.mke-btn-primary:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(29,111,165,.4); }
.mke-btn-success {
	background: linear-gradient(135deg, #16a34a, #15803d);
	color: #fff !important;
	box-shadow: 0 4px 14px rgba(22,163,74,.3);
	font-size: 1rem;
	padding: 14px 28px;
}
.mke-btn-success:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(22,163,74,.4); }
.mke-btn-outline {
	background: #fff;
	color: #475569 !important;
	border: 1.5px solid #cbd5e1;
}
.mke-btn-outline:hover { border-color: var(--mke-color); color: var(--mke-color) !important; }
.mke-btn-download {
	background: linear-gradient(135deg, #16a34a, #15803d);
	color: #fff !important;
	box-shadow: 0 4px 14px rgba(22,163,74,.3);
	font-size: 1.05rem;
	padding: 14px 32px;
	margin: 8px auto;
	display: block;
	max-width: 340px;
	text-align: center;
}
.mke-btn-download:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(22,163,74,.45); }
.mke-btn-full { width: 100%; margin-top: 20px; padding: 14px; font-size: 1rem; }
.mke-btn-arrow { margin-left: 4px; transition: transform .2s; }
.mke-btn-primary:hover .mke-btn-arrow { transform: translateX(4px); }
.mke-btn-text { background: none; border: none; color: #64748b; font-size: 13px; cursor: pointer; margin-left: auto; padding: 0; text-decoration: underline; }
.mke-btn-text:hover { color: var(--mke-color); }

/* ===== FORM ACTION ===== */
.mke-form-action { margin-top: 4px; }

/* ===== PREVIEW TABLE ===== */
.mke-preview-infobar {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 6px;
	padding: 10px 14px;
	background: #f8fafc;
	border: 1px solid #e2e8f0;
	border-radius: 8px;
	font-size: 13px;
	color: #475569;
	margin-bottom: 12px;
}
.mke-info-sep { color: #cbd5e1; margin: 0 2px; }
.mke-info-tag { background: #dcfce7; color: #166534; padding: 2px 8px; border-radius: 12px; font-size: 11px; font-weight: 600; }
.mke-table-scroll { overflow-x: auto; border: 1px solid #e2e8f0; border-radius: 8px; max-height: 320px; overflow-y: auto; margin-bottom: 12px; }
.mke-preview-table { width: 100%; border-collapse: collapse; font-size: 11px; }
.mke-preview-table th,
.mke-preview-table td { padding: 7px 10px; border: 1px solid #e2e8f0; white-space: nowrap; vertical-align: middle; }
.mke-th-title { background: linear-gradient(90deg, var(--mke-color), var(--mke-dark)) !important; color: #fff !important; text-align: center; font-size: 11px; font-weight: 700; letter-spacing: .04em; padding: 10px !important; border: none !important; }
.mke-preview-table thead th:not(.mke-th-title) { font-size: 10px; font-weight: 600; text-align: center; }
.mke-col-l { display: block; font-size: 9px; opacity: .65; margin-bottom: 1px; font-weight: 400; }
.mke-preview-table tbody tr:hover td { filter: brightness(.97); }
.mke-td-more { text-align: center; color: #64748b; font-style: italic; background: #fafafa !important; padding: 10px !important; font-size: 12px; }
.mke-tr-summary td { background: #f0fdf4 !important; color: #166534; font-size: 10px; }

/* LEGEND */
.mke-legend-bar { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 16px; }
.mke-legend { display: flex; align-items: center; gap: 5px; font-size: 11px; color: #64748b; }
.mke-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.mke-dot-formula  { background: #bbf7d0; border: 1px solid #86efac; }
.mke-dot-input    { background: #bfdbfe; border: 1px solid #93c5fd; }
.mke-dot-auto     { background: #e2e8f0; border: 1px solid #d1d5db; }
.mke-dot-dropdown { background: #fed7aa; border: 1px solid #fdba74; }

/* CONFIRM BOX */
.mke-confirm-box {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 18px 22px;
	background: linear-gradient(135deg, #f0fdf4, #eff6ff);
	border: 2px solid #86efac;
	border-radius: 10px;
	flex-wrap: wrap;
}
.mke-confirm-text strong { display: block; font-size: 15px; margin-bottom: 4px; color: #166534; }
.mke-confirm-text p { margin: 0 !important; font-size: 13px; color: #475569; }
.mke-confirm-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }

/* ===== STEP 3: LOADING & RESULT ===== */
.mke-loading {
	display: flex;
	align-items: center;
	gap: 18px;
	padding: 28px;
	background: #eff6ff;
	border-radius: 10px;
	border: 1px solid #bfd9ef;
}
.mke-spinner-wrap { flex-shrink: 0; }
.mke-spinner { width: 40px; height: 40px; border: 4px solid rgba(29,111,165,.15); border-top-color: var(--mke-color); border-radius: 50%; animation: mke-spin .8s linear infinite; }
@keyframes mke-spin { to { transform: rotate(360deg); } }
.mke-loading strong { display: block; font-size: 15px; color: var(--mke-color); margin-bottom: 4px; }
.mke-loading p { margin: 0 !important; font-size: 13px; color: #64748b; }

.mke-result-success,
.mke-result-error { text-align: center; padding: 32px 24px; border-radius: 10px; }
.mke-result-success { background: #f0fdf4; border: 2px solid #86efac; }
.mke-result-error   { background: #fef2f2; border: 2px solid #fca5a5; }
.mke-success-icon,
.mke-error-icon   { font-size: 52px; margin-bottom: 12px; }
.mke-result-success h3 { font-size: 18px; color: #166534; margin: 0 0 8px !important; }
.mke-result-error h3   { font-size: 18px; color: #991b1b; margin: 0 0 8px !important; }
.mke-filename { font-size: 12px; color: #64748b; margin: 0 0 16px !important; }
.mke-filename code { background: rgba(0,0,0,.06); padding: 2px 8px; border-radius: 4px; }
.mke-note { font-size: .78rem; color: #94a3b8; font-style: italic; margin-top: 10px !important; }

/* ===== INFO BAR BAWAH ===== */
.mke-infobar {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 0;
	background: linear-gradient(135deg, #eff6ff, #f0fdf4);
	border: 1px solid var(--mke-border);
	border-top: none;
	border-radius: 0 0 14px 14px;
	overflow: hidden;
}
.mke-infobar-item {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	padding: 16px;
	border-right: 1px solid rgba(29,111,165,.1);
}
.mke-infobar-item:last-child { border-right: none; }
.mke-infobar-icon { font-size: 22px; flex-shrink: 0; }
.mke-infobar-item strong { display: block; font-size: .8rem; color: #1e293b; margin-bottom: 2px; }
.mke-infobar-item small { font-size: .72rem; color: #64748b; line-height: 1.4; }

/* ===== RESPONSIVE ===== */
@media (max-width: 680px) {
	.mke-header { padding: 24px 16px; }
	.mke-panel  { padding: 18px 16px; }
	.mke-judul  { font-size: 1.3rem !important; }
	.mke-form-grid { grid-template-columns: 1fr; }
	.mke-full-width { grid-column: 1; }
	.mke-steps { padding: 16px; }
	.mke-step-line { max-width: 40px; }
	.mke-confirm-box { flex-direction: column; align-items: stretch; }
	.mke-confirm-actions { justify-content: stretch; }
	.mke-confirm-actions .mke-btn { flex: 1; justify-content: center; }
	.mke-infobar { grid-template-columns: 1fr 1fr; }
	.mke-infobar-item { border-bottom: 1px solid rgba(29,111,165,.1); }
	.mke-btn-download { max-width: 100%; }
}
@media (max-width: 400px) {
	.mke-infobar { grid-template-columns: 1fr; }
	.mke-steps span { display: none; }
}