/* ==========================================================================
   Membuat Theme - Core Design System & Foundations
   ========================================================================== */

:root {
	/* Brand Colors */
	--membuat-primary: #2563eb;
	--membuat-primary-hover: #1d4ed8;
	--membuat-primary-light: #eff6ff;
	--membuat-primary-border: #bfdbfe;

	/* Neutral / Grayscale */
	--membuat-text: #0f172a;
	--membuat-text-muted: #64748b;
	--membuat-text-subtle: #94a3b8;
	--membuat-background: #f8fafc;
	--membuat-surface: #ffffff;
	--membuat-surface-hover: #f1f5f9;
	--membuat-border: #e2e8f0;
	--membuat-border-focus: #3b82f6;

	/* Semantic States */
	--membuat-success: #059669;
	--membuat-success-bg: #ecfdf5;
	--membuat-success-border: #a7f3d0;
	--membuat-warning: #d97706;
	--membuat-warning-bg: #fffbeb;
	--membuat-warning-border: #fde68a;
	--membuat-danger: #dc2626;
	--membuat-danger-bg: #fef2f2;
	--membuat-danger-border: #fecaca;

	/* Typography */
	--membuat-font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
	--membuat-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
	--membuat-line-height: 1.6;
	--membuat-line-height-heading: 1.25;

	/* Spacing & Layout */
	--membuat-container: 1240px;
	--membuat-container-narrow: 840px;
	--membuat-container-padding: 1.5rem;
	--membuat-radius-sm: 6px;
	--membuat-radius-md: 10px;
	--membuat-radius-lg: 16px;
	--membuat-radius-full: 9999px;

	/* Elevation / Shadows */
	--membuat-shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
	--membuat-shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.08), 0 1px 2px -1px rgba(0, 0, 0, 0.08);
	--membuat-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.07), 0 2px 4px -2px rgba(0, 0, 0, 0.05);
	--membuat-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -4px rgba(0, 0, 0, 0.04);

	/* Transitions */
	--membuat-transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
	--membuat-transition-normal: 250ms cubic-bezier(0.4, 0, 0.2, 1);
}

*, *::before, *::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}


html {
	font-family: var(--membuat-font-sans, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);
	line-height: var(--membuat-line-height, 1.6);
	-webkit-text-size-adjust: 100%;
	text-rendering: optimizeLegibility;
	scroll-behavior: smooth;
	background-color: var(--membuat-background, #f8fafc);
	color: var(--membuat-text, #0f172a);
}

body {
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	background-color: var(--membuat-background, #f8fafc);
	color: var(--membuat-text, #0f172a);
	font-size: 1rem;
	font-weight: 400;
	overflow-x: hidden;
}

/* Headings */
h1, h2, h3, h4, h5, h6 {
	color: var(--membuat-text, #0f172a);
	font-weight: 700;
	line-height: var(--membuat-line-height-heading, 1.25);
	margin-bottom: 0.75rem;
}

h1 { font-size: 2.25rem; letter-spacing: -0.025em; }
h2 { font-size: 1.75rem; letter-spacing: -0.02em; }
h3 { font-size: 1.25rem; letter-spacing: -0.015em; }
h4 { font-size: 1.125rem; }
h5 { font-size: 1rem; }
h6 { font-size: 0.875rem; }

p {
	margin-bottom: 1.25rem;
}

p:last-child {
	margin-bottom: 0;
}

a {
	color: var(--membuat-primary, #2563eb);
	text-decoration: none;
	transition: color var(--membuat-transition-fast, 150ms);
}

a:hover, a:focus {
	color: var(--membuat-primary-hover, #1d4ed8);
}

img {
	max-width: 100%;
	height: auto;
	display: block;
}

/* Focus Management (WCAG 2.2 AA) */
:focus-visible {
	outline: 2px solid var(--membuat-border-focus, #3b82f6);
	outline-offset: 2px;
}

/* Accessibility Skip Link */
.membuat-skip-link {
	position: absolute;
	top: -9999px;
	left: 1rem;
	background: var(--membuat-primary, #2563eb);
	color: #ffffff;
	padding: 0.75rem 1.25rem;
	border-radius: var(--membuat-radius-sm, 6px);
	z-index: 999999;
	font-weight: 600;
	text-decoration: none;
	box-shadow: var(--membuat-shadow-lg);
}

.membuat-skip-link:focus {
	top: 1rem;
}

/* Screen Reader Only Utility */
.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important;
}

/* Containers */
.membuat-container {
	width: 100%;
	max-width: var(--membuat-container, 1240px);
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--membuat-container-padding, 1.5rem);
	padding-right: var(--membuat-container-padding, 1.5rem);
}

.membuat-container-narrow {
	max-width: var(--membuat-container-narrow, 840px);
}

.membuat-site-content {
	flex: 1 0 auto;
}

/* Grid Utilities */
.membuat-grid-2 {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1.5rem;
}

.membuat-grid-3 {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.25rem;
}

/* Layout with Sidebar */
.membuat-content-with-sidebar {
	display: grid;
	grid-template-columns: 1fr 340px;
	gap: 2.5rem;
	padding-top: 3rem;
	padding-bottom: 4rem;
}

.membuat-article-container {
	max-width: 800px;
	margin: 3rem auto 4rem;
}

/* Badges */
.membuat-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	font-size: 0.75rem;
	font-weight: 600;
	padding: 0.25rem 0.625rem;
	border-radius: var(--membuat-radius-full, 9999px);
	line-height: 1;
	letter-spacing: 0.025em;
	text-transform: uppercase;
}

.membuat-badge--primary {
	background: var(--membuat-primary-light, #eff6ff);
	color: var(--membuat-primary, #2563eb);
	border: 1px solid var(--membuat-primary-border, #bfdbfe);
}

.membuat-badge--success {
	background: var(--membuat-success-bg, #ecfdf5);
	color: var(--membuat-success, #059669);
	border: 1px solid var(--membuat-success-border, #a7f3d0);
}

.membuat-badge--subtle {
	background: var(--membuat-surface-hover, #f1f5f9);
	color: var(--membuat-text-muted, #64748b);
	border: 1px solid var(--membuat-border, #e2e8f0);
}

.membuat-badge--privacy {
	background: #ecfdf5;
	color: #065f46;
	border: 1px solid #a7f3d0;
	font-size: 0.8125rem;
	text-transform: none;
	padding: 0.375rem 0.75rem;
}

.membuat-badge__icon {
	display: flex;
	align-items: center;
}

.membuat-badge__icon svg {
	width: 14px;
	height: 14px;
}

/* Buttons */
.membuat-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	font-family: inherit;
	font-size: 0.9375rem;
	font-weight: 600;
	padding: 0.625rem 1.25rem;
	border-radius: var(--membuat-radius-md, 8px);
	border: 1px solid transparent;
	cursor: pointer;
	text-decoration: none;
	transition: background-color var(--membuat-transition-fast), border-color var(--membuat-transition-fast), color var(--membuat-transition-fast), box-shadow var(--membuat-transition-fast);
	white-space: nowrap;
	min-height: 44px;
	min-width: 44px;
}

.membuat-btn--primary {
	background: var(--membuat-primary, #2563eb);
	color: #ffffff;
}

.membuat-btn--primary:hover, .membuat-btn--primary:focus {
	background: var(--membuat-primary-hover, #1d4ed8);
	color: #ffffff;
	box-shadow: var(--membuat-shadow-sm);
}

.membuat-btn--secondary {
	background: var(--membuat-surface, #ffffff);
	color: var(--membuat-text, #0f172a);
	border-color: var(--membuat-border, #e2e8f0);
}

.membuat-btn--secondary:hover, .membuat-btn--secondary:focus {
	background: var(--membuat-surface-hover, #f1f5f9);
	color: var(--membuat-primary, #2563eb);
	border-color: var(--membuat-primary-border, #bfdbfe);
}

.membuat-btn--outline {
	background: transparent;
	color: var(--membuat-text-muted, #64748b);
	border-color: var(--membuat-border, #e2e8f0);
}

.membuat-btn--outline:hover, .membuat-btn--outline:focus {
	background: var(--membuat-surface-hover, #f1f5f9);
	color: var(--membuat-danger, #dc2626);
	border-color: var(--membuat-danger-border, #fecaca);
}

.membuat-btn--sm {
	font-size: 0.8125rem;
	padding: 0.375rem 0.875rem;
	min-height: 36px;
}

.membuat-btn--white {
	background: #ffffff !important;
	color: #1d4ed8 !important;
	font-weight: 700;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15);
}

.membuat-btn--white:hover {
	background: #f8fafc !important;
	color: #1e40af !important;
	transform: translateY(-2px);
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
}


.membuat-btn-group {
	display: flex;
	align-items: center;
	gap: 0.75rem;
}

.membuat-btn-group--wrap {
	flex-wrap: wrap;
}

/* Breadcrumbs */
.membuat-breadcrumbs {
	background: var(--membuat-surface, #ffffff);
	border-bottom: 1px solid var(--membuat-border, #e2e8f0);
	padding: 0.75rem 0;
	font-size: 0.875rem;
}

.membuat-breadcrumbs__list {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.5rem;
	list-style: none;
}

.membuat-breadcrumbs__item {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	color: var(--membuat-text-muted, #64748b);
}

.membuat-breadcrumbs__link {
	color: var(--membuat-text-muted, #64748b);
}

.membuat-breadcrumbs__link:hover {
	color: var(--membuat-primary, #2563eb);
}

.membuat-breadcrumbs__current {
	color: var(--membuat-text, #0f172a);
	font-weight: 500;
}

.membuat-breadcrumbs__separator svg {
	width: 14px;
	height: 14px;
	color: var(--membuat-text-subtle, #94a3b8);
}

/* Common Section Styling */
.membuat-section {
	padding: 4rem 0;
}

.membuat-section-header {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	margin-bottom: 2.25rem;
}

.membuat-section-header--center {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	margin-bottom: 2.5rem;
}

.membuat-section-header--center .membuat-section-subtitle {
	text-align: center;
	margin: 0 auto;
}


.membuat-section-title {
	font-size: 1.75rem;
	font-weight: 700;
	color: var(--membuat-text, #0f172a);
	margin-bottom: 0.375rem;
}

.membuat-section-subtitle {
	color: var(--membuat-text-muted, #64748b);
	font-size: 1.0625rem;
	max-width: 620px;
}

.membuat-link-arrow {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	font-weight: 600;
	font-size: 0.9375rem;
}

.membuat-link-arrow svg {
	width: 16px;
	height: 16px;
	transition: transform var(--membuat-transition-fast);
}

.membuat-link-arrow:hover svg {
	transform: translateX(4px);
}

/* Empty States */
.membuat-empty-state {
	text-align: center;
	padding: 4rem 2rem;
	background: var(--membuat-surface, #ffffff);
	border: 1px dashed var(--membuat-border, #e2e8f0);
	border-radius: var(--membuat-radius-lg, 16px);
}

.membuat-empty-state h2 {
	font-size: 1.5rem;
	margin-bottom: 0.75rem;
}

.membuat-empty-state p {
	color: var(--membuat-text-muted, #64748b);
	max-width: 480px;
	margin: 0 auto 1.5rem;
}

/* Inline status indicator */
.membuat-inline-status {
	font-size: 0.875rem;
	font-weight: 500;
	color: var(--membuat-success, #059669);
	transition: opacity var(--membuat-transition-fast);
}