/*
* MekaPos Design System v2.0
* Referensi: index.html — MekaPos Landing Page
* Brand: Green #47A882 · Coral glow · Plus Jakarta Sans
* ─────────────────────────────────────────────────────
* Font wajib di :
*
*
* Import:
*
*/
/* ═══════════════════════════════════════════════════
DESIGN TOKENS
═══════════════════════════════════════════════════ */
:root {
/* ── Brand — Green ── */
--green: #47A882;
--green2: #72C4A6;
--green3: #2F8568; /* dark green untuk text di atas light bg */
--green-bg: #EDF7F3;
--green-glow: rgba(71,168,130,.16);
/* ── Accent — Coral (signature CTA glow) ── */
--orange: #FF7759;
--orange2: #FF9478;
--glow-coral: -12px 14px 34px rgba(255,119,89,.55), -4px 6px 16px rgba(255,119,89,.42);
--glow-green: 0 14px 40px rgba(71,168,130,.5), 0 0 0 1px rgba(71,168,130,.3);
/* ── Purple ── */
--purple: #9B60AA;
--purple2: #D18EE2;
--purple-bg: #F8F2FB;
/* ── Backgrounds — Light (Landing / Public) ── */
--bg: #FFFFFF;
--bg-off: #F7F7F5;
/* ── Backgrounds — Dark (App / Dashboard) ── */
--bg-dark: #17171C;
--bg-dark2: #212128;
/* ── Text ── */
--txt: #212121;
--txt2: #6B6B6B;
--txt3: #9B9B9B;
--txt-inv: #FFFFFF;
/* ── Borders ── */
--border: #E8E8E8;
--border-dark: rgba(255,255,255,.10);
/* ── Status ── */
--success: #16a34a; --success-bg: #F0FDF4;
--warning: #D97706; --warning-bg: #FFFBEB;
--danger: #DC2626; --danger-bg: #FEF2F2;
--info: #2563EB; --info-bg: #EFF6FF;
/* ── Radius ── */
--r-sm: 8px;
--r-md: 12px;
--r-lg: 20px;
--r-xl: 28px;
--r-pill: 999px;
/* ── Spacing — 4px grid ── */
--s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px;
--s-5: 20px; --s-6: 24px; --s-8: 32px; --s-10: 40px;
--s-12: 48px; --s-16: 64px; --s-20: 80px; --s-24: 96px;
/* ── Typography ── */
--font: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
--font-mono: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace;
/* ── Type Scale ── */
--text-xs: 11px; --text-sm: 13px; --text-base: 15px;
--text-md: 17px; --text-lg: 20px; --text-xl: 24px;
--text-2xl: 32px; --text-3xl: 40px; --text-4xl: 52px;
/* ── Motion ── */
--ease: cubic-bezier(.4, 0, .2, 1);
--ease-spring: cubic-bezier(.34, 1.4, .5, 1);
--ease-out: cubic-bezier(.22, .68, 0, 1.2);
--dur-fast: 120ms;
--dur-base: 200ms;
--dur-slow: 360ms;
--dur-reveal: 600ms;
}
/* ═══════════════════════════════════════════════════
RESET / BASE
═══════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html {
scroll-behavior: smooth;
-webkit-text-size-adjust: 100%;
}
body {
font-family: var(--font);
font-size: var(--text-base);
line-height: 1.6;
color: var(--txt);
background: var(--bg);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
overflow-x: hidden;
}
img, video { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { cursor: pointer; font-family: inherit; }
input, textarea, select { font-family: inherit; }
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--bg-off); }
::-webkit-scrollbar-thumb { background: #D0D0D0; border-radius: 3px; }
::selection { background: var(--green-bg); color: var(--green3); }
/* ═══════════════════════════════════════════════════
TYPOGRAPHY
═══════════════════════════════════════════════════ */
/* Section label — uppercase green, di atas judul section */
.section-label {
display: block;
font-size: 12px;
font-weight: 600;
letter-spacing: .1em;
text-transform: uppercase;
color: var(--green);
margin-bottom: 16px;
}
/* Heading scale */
.heading-display {
font-size: clamp(44px, 6.4vw, 84px);
font-weight: 400;
letter-spacing: -.03em;
line-height: 1.08;
color: var(--txt);
}
.heading-xl {
font-size: clamp(32px, 4vw, 52px);
font-weight: 400;
letter-spacing: -.03em;
line-height: 1.1;
color: var(--txt);
}
.heading-lg {
font-size: clamp(24px, 3vw, 40px);
font-weight: 700;
letter-spacing: -.02em;
line-height: 1.2;
color: var(--txt);
}
.heading-md {
font-size: 22px;
font-weight: 700;
letter-spacing: -.02em;
line-height: 1.3;
color: var(--txt);
}
.heading-sm {
font-size: 17px;
font-weight: 700;
letter-spacing: -.01em;
line-height: 1.4;
color: var(--txt);
}
/* Dark variant */
.heading-inv { color: var(--txt-inv); }
.heading-green { color: var(--green); }
/* Color utilities */
.text-primary { color: var(--txt); }
.text-secondary { color: var(--txt2); }
.text-muted { color: var(--txt3); }
.text-green { color: var(--green); }
.text-inv { color: var(--txt-inv); }
.text-success { color: var(--success); }
.text-warning { color: var(--warning); }
.text-danger { color: var(--danger); }
/* Size utilities */
.text-xs { font-size: var(--text-xs); }
.text-sm { font-size: var(--text-sm); }
.text-base { font-size: var(--text-base); }
.text-md { font-size: var(--text-md); }
.text-lg { font-size: var(--text-lg); }
/* Weight utilities */
.font-regular { font-weight: 400; }
.font-medium { font-weight: 500; }
.font-semi { font-weight: 600; }
.font-bold { font-weight: 700; }
.font-black { font-weight: 800; }
.font-mono { font-family: var(--font-mono); }
.tracking-tight { letter-spacing: -.03em; }
.tracking-caps { letter-spacing: .08em; text-transform: uppercase; }
.leading-tight { line-height: 1.2; }
.leading-loose { line-height: 1.85; }
/* ═══════════════════════════════════════════════════
BUTTONS
═══════════════════════════════════════════════════ */
/* ── Base ── */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--s-2);
padding: 10px 20px;
border-radius: var(--r-md);
font-size: var(--text-sm);
font-weight: 700;
letter-spacing: .01em;
border: 1px solid transparent;
font-family: var(--font);
white-space: nowrap;
user-select: none;
text-decoration: none;
transition:
background var(--dur-base) var(--ease),
border-color var(--dur-base) var(--ease),
box-shadow var(--dur-base) var(--ease),
transform var(--dur-fast) var(--ease),
color var(--dur-base) var(--ease);
position: relative;
overflow: hidden;
}
.btn:active { transform: scale(.97); }
.btn:disabled { opacity: .4; cursor: not-allowed; pointer-events: none; }
/* Cursor spotlight — tambahkan class ini + JS tracking */
.btn-spotlight::before {
content: '';
position: absolute;
width: 120px; height: 120px;
border-radius: 50%;
background: radial-gradient(circle, rgba(255,255,255,.25) 0%, transparent 70%);
left: var(--mx, 50%); top: var(--my, 50%);
transform: translate(-50%, -50%);
opacity: 0;
transition: opacity .25s;
pointer-events: none;
}
.btn-spotlight:hover::before { opacity: 1; }
/* ── Primary — dark bg, coral glow (CTA utama landing page) ── */
.btn-primary {
background: var(--txt);
color: #fff;
border: none;
}
.btn-primary:hover {
background: #2A2A2A;
transform: translateY(-2px);
box-shadow: var(--glow-coral);
}
/* ── Green — untuk section hijau, CTA in-app ── */
.btn-green {
background: var(--green);
color: #fff;
border: none;
}
.btn-green:hover {
background: var(--green3);
transform: translateY(-2px);
box-shadow: var(--glow-green);
}
/* ── Secondary — white bg dengan border ── */
.btn-secondary {
background: #fff;
color: var(--txt);
border: 1.5px solid var(--border);
}
.btn-secondary:hover {
border-color: rgba(71,168,130,.5);
background: var(--green-bg);
transform: translateY(-2px);
box-shadow: 0 8px 24px rgba(71,168,130,.12);
}
/* ── Ghost — transparan di atas light bg ── */
.btn-ghost {
background: transparent;
color: var(--txt2);
border: 1.5px solid var(--border);
}
.btn-ghost:hover {
background: var(--bg-off);
border-color: #CCC;
color: var(--txt);
background: #F7F7F5;
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(0,0,0,.07);
}
/* ── Ghost Dark — untuk dark section/background ── */
.btn-ghost-dark {
background: rgba(255,255,255,.06);
color: rgba(255,255,255,.8);
border: 1.5px solid rgba(255,255,255,.18);
}
.btn-ghost-dark:hover {
background: rgba(255,255,255,.12);
border-color: rgba(255,255,255,.35);
transform: translateY(-1px);
}
/* ── Green Dark — CTA hijau di atas dark section ── */
.btn-green-dark {
background: var(--green);
color: #fff;
border: 1.5px solid var(--green);
}
.btn-green-dark:hover {
background: var(--green3);
border-color: var(--green3);
transform: translateY(-2px);
box-shadow: 0 10px 32px rgba(71,168,130,.45), 0 0 0 1px rgba(71,168,130,.28);
}
/* ── Danger ── */
.btn-danger {
background: var(--danger-bg);
color: var(--danger);
border: 1px solid rgba(220,38,38,.25);
}
.btn-danger:hover {
background: rgba(220,38,38,.14);
transform: translateY(-1px);
}
/* ── Sizes ── */
.btn-xs { padding: 5px 12px; font-size: var(--text-xs); border-radius: var(--r-sm); }
.btn-sm { padding: 8px 16px; font-size: var(--text-xs); border-radius: var(--r-sm); }
.btn-lg { padding: 14px 28px; font-size: var(--text-md); }
.btn-xl { padding: 16px 36px; font-size: var(--text-lg); }
.btn-pill { border-radius: var(--r-pill) !important; }
.btn-full { width: 100%; justify-content: center; }
.btn-icon { padding: 10px; aspect-ratio: 1; line-height: 1; }
.btn-icon.btn-sm { padding: 7px; }
.btn-icon.btn-lg { padding: 13px; }
/* ═══════════════════════════════════════════════════
INPUTS & FORMS
═══════════════════════════════════════════════════ */
.field { display: flex; flex-direction: column; gap: var(--s-2); }
.label {
display: block;
font-size: var(--text-sm);
font-weight: 600;
color: var(--txt);
margin-bottom: var(--s-2);
}
.input {
width: 100%;
padding: 12px 16px;
border-radius: var(--r-md);
border: 1.5px solid var(--border);
font-size: var(--text-sm);
color: var(--txt);
background: #fff;
outline: none;
font-family: var(--font);
transition:
border-color var(--dur-base) var(--ease),
box-shadow var(--dur-base) var(--ease);
}
.input::placeholder { color: var(--txt3); }
.input:focus {
border-color: var(--txt2);
box-shadow: 0 0 0 3px rgba(33,33,33,.06);
}
.input:focus.focus-green,
.input.focus-green:focus {
border-color: var(--green);
box-shadow: 0 0 0 3px rgba(71,168,130,.12);
}
.input-sm { padding: 8px 12px; font-size: var(--text-xs); }
.input-lg { padding: 14px 20px; font-size: var(--text-base); }
textarea.input { resize: vertical; min-height: 100px; line-height: 1.6; }
select.input {
appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236B6B6B' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 14px center;
padding-right: 36px;
cursor: pointer;
}
.input-group { position: relative; display: flex; align-items: center; }
.input-group .input { padding-left: 42px; }
.input-group .input-icon {
position: absolute;
left: 14px;
color: var(--txt3);
pointer-events: none;
font-size: 16px;
line-height: 1;
}
.field-hint { font-size: var(--text-xs); color: var(--txt3); }
.field-error .input { border-color: rgba(220,38,38,.5); box-shadow: none; }
.field-error .input:focus { box-shadow: 0 0 0 3px rgba(220,38,38,.08); }
.field-error .field-hint { color: var(--danger); }
/* ═══════════════════════════════════════════════════
CARDS
═══════════════════════════════════════════════════ */
/* Light card — untuk halaman putih */
.card {
background: #fff;
border: 1px solid var(--border);
border-radius: var(--r-lg);
padding: var(--s-6);
transition:
border-color var(--dur-base) var(--ease),
box-shadow var(--dur-base) var(--ease),
transform var(--dur-base) var(--ease);
}
.card-sm { padding: var(--s-4); border-radius: var(--r-md); }
.card-lg { padding: var(--s-8); border-radius: var(--r-xl); }
.card-hover:hover {
border-color: #D0D0D0;
box-shadow: 0 8px 24px rgba(0,0,0,.08);
transform: translateY(-2px);
}
.card-hover-green:hover {
border-color: rgba(71,168,130,.4);
box-shadow: 0 8px 24px rgba(71,168,130,.12);
transform: translateY(-2px);
}
/* Off-white card */
.card-off {
background: var(--bg-off);
border: 1px solid var(--border);
border-radius: var(--r-lg);
padding: var(--s-6);
}
/* Dark card — untuk dark section */
.card-dark {
background: rgba(255,255,255,.05);
border: 1px solid rgba(255,255,255,.09);
border-radius: var(--r-lg);
padding: var(--s-6);
transition:
border-color var(--dur-base) var(--ease),
background var(--dur-base) var(--ease);
}
.card-dark:hover {
background: rgba(255,255,255,.08);
border-color: rgba(255,255,255,.16);
}
/* ═══════════════════════════════════════════════════
BADGES & EYEBROWS
═══════════════════════════════════════════════════ */
/* Eyebrow / section tag — pill kecil di atas judul */
.eyebrow {
display: inline-flex;
align-items: center;
gap: var(--s-2);
background: var(--bg-off);
border: 1px solid var(--border);
border-radius: var(--r-pill);
padding: 6px 16px;
font-size: var(--text-xs);
font-weight: 600;
color: var(--txt2);
}
.eyebrow-green {
background: var(--green-bg);
border-color: rgba(71,168,130,.3);
color: var(--green3);
}
.eyebrow-dot {
width: 6px; height: 6px;
border-radius: 50%;
background: currentColor;
flex-shrink: 0;
}
/* Status badge */
.badge {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 3px 10px;
border-radius: var(--r-pill);
font-size: var(--text-xs);
font-weight: 700;
letter-spacing: .03em;
white-space: nowrap;
border: 1px solid transparent;
}
.badge::before {
content: '';
width: 6px; height: 6px;
border-radius: 50%;
background: currentColor;
flex-shrink: 0;
}
.badge-no-dot::before { display: none; }
.badge-default { background: var(--bg-off); border-color: var(--border); color: var(--txt2); }
.badge-green { background: var(--green-bg); border-color: rgba(71,168,130,.3); color: var(--green3); }
.badge-success { background: var(--success-bg); border-color: rgba(22,163,74,.3); color: var(--success); }
.badge-warning { background: var(--warning-bg); border-color: rgba(217,119,6,.3); color: var(--warning); }
.badge-danger { background: var(--danger-bg); border-color: rgba(220,38,38,.3); color: var(--danger); }
.badge-info { background: var(--info-bg); border-color: rgba(37,99,235,.3); color: var(--info); }
.badge-purple { background: var(--purple-bg); border-color: rgba(155,96,170,.3); color: var(--purple); }
/* ═══════════════════════════════════════════════════
ALERTS
═══════════════════════════════════════════════════ */
.alert {
display: flex;
align-items: flex-start;
gap: var(--s-3);
padding: var(--s-4) var(--s-5);
border-radius: var(--r-md);
font-size: var(--text-sm);
line-height: 1.5;
border: 1px solid;
}
.alert-icon { font-size: 16px; flex-shrink: 0; margin-top: 1px; }
.alert-title { font-weight: 700; margin-bottom: 2px; }
.alert-body { color: inherit; opacity: .75; }
.alert-success { background: var(--success-bg); border-color: rgba(22,163,74,.25); color: var(--success); }
.alert-warning { background: var(--warning-bg); border-color: rgba(217,119,6,.25); color: var(--warning); }
.alert-danger { background: var(--danger-bg); border-color: rgba(220,38,38,.25); color: var(--danger); }
.alert-info { background: var(--info-bg); border-color: rgba(37,99,235,.25); color: var(--info); }
/* ═══════════════════════════════════════════════════
DIVIDERS
═══════════════════════════════════════════════════ */
.divider { height: 1px; background: var(--border); border: none; margin: var(--s-6) 0; }
.divider-sm { margin: var(--s-4) 0; }
.divider-label {
display: flex; align-items: center; gap: var(--s-4);
color: var(--txt3);
font-size: var(--text-xs);
font-weight: 600;
letter-spacing: .06em;
text-transform: uppercase;
}
.divider-label::before, .divider-label::after {
content: ''; flex: 1; height: 1px; background: var(--border);
}
/* ═══════════════════════════════════════════════════
NAVBAR (floating liquid-glass)
═══════════════════════════════════════════════════ */
.nav-glass {
position: sticky;
top: 0; left: 0; right: 0;
z-index: 100;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 clamp(var(--s-5), 5vw, 72px);
height: 64px;
background: rgba(255,255,255,1);
border: 1px solid transparent;
transition:
background .45s cubic-bezier(.22,.68,0,1.2),
backdrop-filter .45s,
-webkit-backdrop-filter .45s,
box-shadow .45s,
top .45s cubic-bezier(.22,.68,0,1.2),
margin .45s cubic-bezier(.22,.68,0,1.2),
border-radius .45s cubic-bezier(.22,.68,0,1.2),
border-color .45s,
height .45s cubic-bezier(.22,.68,0,1.2);
}
.nav-glass.scrolled {
top: 16px;
margin: 0 24px;
height: 54px;
border-radius: 18px;
background: rgba(245,252,248,.72);
backdrop-filter: blur(32px) saturate(200%);
-webkit-backdrop-filter: blur(32px) saturate(200%);
border-color: rgba(71,168,130,.2);
box-shadow:
inset 0 1px 0 rgba(255,255,255,.95),
inset 0 -1px 0 rgba(71,168,130,.06),
0 0 0 1px rgba(71,168,130,.07),
0 4px 8px rgba(71,168,130,.06),
0 12px 40px rgba(0,0,0,.09),
0 2px 6px rgba(0,0,0,.05);
}
/* ═══════════════════════════════════════════════════
MODAL
═══════════════════════════════════════════════════ */
.modal-overlay {
position: fixed; inset: 0; z-index: 500;
background: rgba(0,0,0,.5);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
display: flex; align-items: center; justify-content: center;
padding: var(--s-5);
opacity: 0; pointer-events: none;
transition: opacity var(--dur-base) var(--ease);
}
.modal-overlay.open { opacity: 1; pointer-events: auto; }
.modal-box {
background: #fff;
border-radius: var(--r-xl);
padding: var(--s-10);
width: 100%; max-width: 400px;
transform: scale(.96) translateY(8px);
transition: transform var(--dur-slow) var(--ease);
box-shadow: 0 24px 80px rgba(0,0,0,.2);
}
.modal-overlay.open .modal-box { transform: none; }
/* ═══════════════════════════════════════════════════
DARK SECTION UTILITIES
═══════════════════════════════════════════════════ */
.surface-dark { background: var(--bg-dark); color: var(--txt-inv); }
.surface-dark2 { background: var(--bg-dark2); color: var(--txt-inv); }
.text-dark-sub { color: rgba(255,255,255,.5); }
.text-dark-muted { color: rgba(255,255,255,.32); }
.border-dark { border-color: var(--border-dark); }
/* ═══════════════════════════════════════════════════
PROGRESS
═══════════════════════════════════════════════════ */
.progress {
height: 4px;
background: var(--border);
border-radius: var(--r-pill);
overflow: hidden;
}
.progress-bar {
height: 100%;
border-radius: var(--r-pill);
background: var(--green);
transition: width var(--dur-slow) var(--ease);
}
.progress-bar-coral { background: var(--orange); }
/* ═══════════════════════════════════════════════════
REVEAL ANIMATION (scroll-in)
═══════════════════════════════════════════════════ */
.reveal {
opacity: 0;
transform: translateY(24px);
transition:
opacity var(--dur-reveal) cubic-bezier(.4,0,.2,1),
transform var(--dur-reveal) cubic-bezier(.4,0,.2,1);
}
.reveal.visible { opacity: 1; transform: translateY(0); }
.reveal-d1 { transition-delay: 100ms; }
.reveal-d2 { transition-delay: 200ms; }
.reveal-d3 { transition-delay: 300ms; }
.reveal-d4 { transition-delay: 400ms; }
/* reveal observer snippet (copy ke setiap halaman):
const revealObs = new IntersectionObserver(entries => {
entries.forEach(e => {
if (e.isIntersecting) { e.target.classList.add('visible'); revealObs.unobserve(e.target); }
});
}, { threshold: 0.12 });
document.querySelectorAll('.reveal').forEach(el => revealObs.observe(el));
*/
/* ═══════════════════════════════════════════════════
DECORATIVE
═══════════════════════════════════════════════════ */
/*
* PATTERN — Abstract Dots
* ─────────────────────────────────────────────────
* Tile : 160 × 160 px
* Titik : 17 buah, posisi & ukuran abstrak (tidak sejajar)
* Warna : #47A882 (brand green)
* Ukuran : r = 1 – 2.5 px (diameter 2 – 5 px)
* Opacity : 9% – 19% (subtle, tidak mengganggu konten)
*
* Peta titik cx cy r opacity
* 14 20 2.0 .18
* 55 8 1.0 .11
* 92 32 1.5 .15
* 138 14 2.5 .09
* 6 62 1.5 .13
* 44 70 1.0 .09
* 78 55 2.0 .19
* 120 66 1.0 .12
* 155 82 1.5 .15
* 30 105 2.5 .17
* 68 118 1.0 .10
* 110 98 1.5 .14
* 148 112 2.0 .12
* 18 148 1.0 .09
* 60 140 2.0 .16
* 102 155 1.5 .11
* 142 145 1.0 .09
*
* Penggunaan:
* .pattern-dots → latar terang (#FFF / #F7F7F5)
* .pattern-dots-dark → latar gelap (#17171C / #212128)
* ─────────────────────────────────────────────────
*/
/* Latar terang */
.pattern-dots {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 160'%3E%3Ccircle cx='14' cy='20' r='2' fill='%2347A882' opacity='.18'/%3E%3Ccircle cx='55' cy='8' r='1' fill='%2347A882' opacity='.11'/%3E%3Ccircle cx='92' cy='32' r='1.5' fill='%2347A882' opacity='.15'/%3E%3Ccircle cx='138' cy='14' r='2.5' fill='%2347A882' opacity='.09'/%3E%3Ccircle cx='6' cy='62' r='1.5' fill='%2347A882' opacity='.13'/%3E%3Ccircle cx='44' cy='70' r='1' fill='%2347A882' opacity='.09'/%3E%3Ccircle cx='78' cy='55' r='2' fill='%2347A882' opacity='.19'/%3E%3Ccircle cx='120' cy='66' r='1' fill='%2347A882' opacity='.12'/%3E%3Ccircle cx='155' cy='82' r='1.5' fill='%2347A882' opacity='.15'/%3E%3Ccircle cx='30' cy='105' r='2.5' fill='%2347A882' opacity='.17'/%3E%3Ccircle cx='68' cy='118' r='1' fill='%2347A882' opacity='.1'/%3E%3Ccircle cx='110' cy='98' r='1.5' fill='%2347A882' opacity='.14'/%3E%3Ccircle cx='148' cy='112' r='2' fill='%2347A882' opacity='.12'/%3E%3Ccircle cx='18' cy='148' r='1' fill='%2347A882' opacity='.09'/%3E%3Ccircle cx='60' cy='140' r='2' fill='%2347A882' opacity='.16'/%3E%3Ccircle cx='102' cy='155' r='1.5' fill='%2347A882' opacity='.11'/%3E%3Ccircle cx='142' cy='145' r='1' fill='%2347A882' opacity='.09'/%3E%3C/svg%3E");
background-size: 160px 160px;
}
/* Latar gelap — opacity dinaikkan agar tetap terlihat */
.pattern-dots-dark {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 160'%3E%3Ccircle cx='14' cy='20' r='2' fill='%2347A882' opacity='.32'/%3E%3Ccircle cx='55' cy='8' r='1' fill='%2347A882' opacity='.2'/%3E%3Ccircle cx='92' cy='32' r='1.5' fill='%2347A882' opacity='.28'/%3E%3Ccircle cx='138' cy='14' r='2.5' fill='%2347A882' opacity='.16'/%3E%3Ccircle cx='6' cy='62' r='1.5' fill='%2347A882' opacity='.24'/%3E%3Ccircle cx='44' cy='70' r='1' fill='%2347A882' opacity='.16'/%3E%3Ccircle cx='78' cy='55' r='2' fill='%2347A882' opacity='.34'/%3E%3Ccircle cx='120' cy='66' r='1' fill='%2347A882' opacity='.22'/%3E%3Ccircle cx='155' cy='82' r='1.5' fill='%2347A882' opacity='.28'/%3E%3Ccircle cx='30' cy='105' r='2.5' fill='%2347A882' opacity='.3'/%3E%3Ccircle cx='68' cy='118' r='1' fill='%2347A882' opacity='.18'/%3E%3Ccircle cx='110' cy='98' r='1.5' fill='%2347A882' opacity='.26'/%3E%3Ccircle cx='148' cy='112' r='2' fill='%2347A882' opacity='.22'/%3E%3Ccircle cx='18' cy='148' r='1' fill='%2347A882' opacity='.16'/%3E%3Ccircle cx='60' cy='140' r='2' fill='%2347A882' opacity='.3'/%3E%3Ccircle cx='102' cy='155' r='1.5' fill='%2347A882' opacity='.2'/%3E%3Ccircle cx='142' cy='145' r='1' fill='%2347A882' opacity='.16'/%3E%3C/svg%3E");
background-size: 160px 160px;
}
/* Radial glow orbs — harus di dalam position:relative + overflow:hidden */
.orb {
position: absolute;
border-radius: 50%;
filter: blur(80px);
pointer-events: none;
}
.orb-green { background: radial-gradient(circle, rgba(71,168,130,.25), transparent 70%); }
.orb-purple { background: radial-gradient(circle, rgba(155,96,170,.22), transparent 70%); }
.orb-coral { background: radial-gradient(circle, rgba(255,119,89,.22), transparent 70%); }
.orb-mixed {
background: radial-gradient(circle,
rgba(71,168,130,.15) 0%,
rgba(155,96,170,.15) 100%);
}
.orb-sm { width: 200px; height: 200px; }
.orb-md { width: 400px; height: 400px; }
.orb-lg { width: 700px; height: 700px; }
/* Glass badge — floating info chip (dark bg) */
.glass-badge {
display: inline-flex;
align-items: center;
gap: 10px;
background: rgba(6,14,10,.72);
border: 1px solid rgba(255,255,255,.13);
backdrop-filter: blur(20px) saturate(180%);
-webkit-backdrop-filter: blur(20px) saturate(180%);
border-radius: var(--r-md);
padding: 10px 15px;
box-shadow: 0 8px 28px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.07);
white-space: nowrap;
}
/* Traffic lights (window chrome mockup) */
.traffic-lights { display: flex; gap: 6px; }
.tl { width: 12px; height: 12px; border-radius: 50%; }
.tl-r{ background: #FF5F57; }
.tl-y{ background: #FEBC2E; }
.tl-g{ background: #28C840; }
/* ═══════════════════════════════════════════════════
BRAND — LOGO
File: assets/mekapos-logo-dark.svg → latar gelap (#17171C, #212128)
assets/mekapos-logo-light.svg → latar terang (#FFFFFF, #F7F7F5)
assets/mekapos-logo-mono-white.svg → satu warna putih (print, overlay)
assets/mekapos-mark.svg → mark saja (favicon, icon square)
Ratio: 392 × 120 ≈ 3.27 : 1
Min size: 32px tinggi — di bawah ini teks tidak terbaca
Spacing: clear space min = ½ tinggi logo di semua sisi
═══════════════════════════════════════════════════ */
/* Logo container — block, center by default */
.mekapos-logo {
display: block;
margin: 0 auto;
}
/* Size variants — gunakan salah satu */
.mekapos-logo-sm { height: 32px; } /* navbar compact, mobile */
.mekapos-logo-md { height: 48px; } /* navbar default, header */
.mekapos-logo-lg { height: 64px; } /* hero, splash */
.mekapos-logo-xl { height: 80px; } /* landing page hero full */
/* Logo mark saja (square) */
.mekapos-mark { height: 36px; display: block; }
.mekapos-mark-sm { height: 24px; display: block; }
.mekapos-mark-lg { height: 52px; display: block; }
/* Inline logo — gunakan di dalam flex row (navbar, footer) */
.mekapos-logo-inline {
display: inline-block;
vertical-align: middle;
height: 40px;
}
/* ═══════════════════════════════════════════════════
LAYOUT UTILITIES
═══════════════════════════════════════════════════ */
.container {
width: 100%;
max-width: 1200px;
margin: 0 auto;
padding: 0 clamp(var(--s-5), 5vw, 72px);
}
.container-sm { max-width: 760px; margin: 0 auto; }
.container-md { max-width: 1000px; margin: 0 auto; }
.section-pad { padding: clamp(64px, 8vw, 120px) clamp(var(--s-5), 5vw, 72px); }
.section-pad-sm { padding: clamp(40px, 5vw, 72px) clamp(var(--s-5), 5vw, 72px); }
.flex { display: flex; }
.flex-col { display: flex; flex-direction: column; }
.flex-wrap { display: flex; flex-wrap: wrap; }
.items-center { align-items: center; }
.items-start { align-items: flex-start; }
.items-end { align-items: flex-end; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.justify-end { justify-content: flex-end; }
.gap-1 { gap: var(--s-1); } .gap-2 { gap: var(--s-2); } .gap-3 { gap: var(--s-3); }
.gap-4 { gap: var(--s-4); } .gap-6 { gap: var(--s-6); } .gap-8 { gap: var(--s-8); }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-6); }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-6); }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-5); }
@media (max-width: 900px) {
.grid-3 { grid-template-columns: repeat(2, 1fr); }
.grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
.grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
}
.text-center { text-align: center; }
.text-left { text-align: left; }
.w-full { width: 100%; }
.h-full { height: 100%; }
.mx-auto { margin-left: auto; margin-right: auto; }
.mt-2 { margin-top: var(--s-2); } .mt-4 { margin-top: var(--s-4); }
.mt-6 { margin-top: var(--s-6); } .mt-8 { margin-top: var(--s-8); }
.mb-2 { margin-bottom: var(--s-2); } .mb-4 { margin-bottom: var(--s-4); }
.mb-6 { margin-bottom: var(--s-6); } .mb-8 { margin-bottom: var(--s-8); }
.ml-auto { margin-left: auto; }
.relative { position: relative; }
.overflow-hidden { overflow: hidden; }
@media print {
body { background: #fff; color: #000; }
}
/* ═══════════════════════════════════════════════════
PATTERN USAGE RULES
Aturan wajib untuk semua background pattern dekoratif
(blob scatter, dot scatter, dan turunannya)
═══════════════════════════════════════════════════ */
/*
* 1. TIDAK BOLEH tile/grid berulang dengan posisi rapi.
* Pattern berulang (background-size kecil + repeat) terlihat
* seperti wallpaper generik / "AI-generated". Pattern dekoratif
* utama (hero, section gelap, area kosong) HARUS berupa satu
* ilustrasi SVG non-repeating:
* background-size: cover;
* background-repeat: no-repeat;
* Elemen blob/dot di dalam SVG itu ditaruh manual satu per satu
* dengan transform acak (lihat poin 2-3). .pattern-dots (24px tile)
* HANYA untuk aksen kecil/lokal (misal dalam badge atau strip
* tipis), bukan untuk background section penuh.
*
* 2. POSISI harus tidak beraturan (asymmetric).
* Jangan sebar elemen dalam grid/kolom/baris yang sejajar.
* Variasikan jarak antar elemen secara signifikan — campur
* elemen yang berdekatan dengan area kosong yang luas.
*
* 3. UKURAN harus bervariasi acak, bukan satu ukuran seragam.
* Gunakan scale() berbeda untuk tiap instance elemen yang sama,
* kombinasikan dengan rotate() acak agar tidak ada dua elemen
* yang terlihat identik. Rentang scale yang sudah dipakai: 0.45–2.6.
*
* 4. OPACITY harus rendah dan bervariasi (transparan, bukan solid).
* Rentang yang sudah dipakai: 0.03–0.09 untuk blob di dark bg,
* 0.03–0.085 untuk dot di light bg. Elemen dengan opacity lebih
* tinggi terlihat seperti dekorasi sengaja, bukan tekstur halus.
* Jangan pernah melebihi opacity 0.12 untuk pattern dekoratif.
*
* 5. WARNA: dominan brand green (#47A882 / var(--green)).
* Coral (#FF7759 / var(--orange)) hanya sebagai aksen sesekali —
* maksimal ~20% dari total elemen pattern, tidak lebih, agar
* tetap terasa "green-first" sesuai brand.
*
* 6. BENTUK: gunakan path blob brand (b1/b2/b3 dari assets/mekapos-mark.svg)
* untuk pattern organik di dark section. Gunakan dot/circle sederhana
* untuk pattern halus di light/white section (lihat .pattern-dots
* sebagai basis, tapi non-tiled untuk full-section background).
* b1 (canonical): M1,-16 C9,-18 18,-10 16,-1 C14,7 18,15 8,17
* C-1,19 -14,14 -16,4 C-18,-6 -9,-14 1,-16 Z
*
* 7. GRAIN/NOISE (opsional, untuk section dengan gradient warna kuat
* seperti CTA ungu): boleh ditambahkan feTurbulence overlay dengan
* mix-blend-mode: overlay dan opacity sangat rendah (~0.07) di atas
* layer ::before terpisah (z-index di atas background, di bawah
* konten teks) untuk tekstur film-grain halus, bukan untuk pattern
* utama.
*
* Contoh referensi implementasi: .hero di register.html (blob scatter
* dark), body di register.html (dot scatter light), .cta-section di
* index.html (grain overlay + blob 3D di pojok).
*/
/* ═══════════════════════════════════════════════════
SYMBOL / ICON USAGE RULES
Aturan wajib untuk semua ikon di UI (card-title, badge, button, dsb)
═══════════════════════════════════════════════════ */
/*
* 1. DILARANG memakai emoji default OS (📊 🏪 🎉 dst) sebagai ikon UI.
* Emoji berbeda tampilan antar OS/browser, tidak konsisten dengan
* brand, dan langsung terlihat "AI-generated" / template generik.
*
* 2. WAJIB pakai custom SVG inline, monokrom, warna brand green
* (#47A882) sebagai warna utama. Jangan multi-warna kecuali ikon
* tersebut secara eksplisit merepresentasikan brand mark (blob
* b1/b2/b3 dengan coral/purple aksen).
*
* 3. HIERARKI/DEPTH dibuat lewat opacity bertingkat pada elemen yang
* sama, bukan lewat warna berbeda-beda. Pola yang sudah dipakai:
* elemen utama opacity 1, elemen kedua opacity .72, elemen ketiga
* opacity .42 (lihat ikon bar-chart di card-title "Bandingkan Paket",
* register.html).
*
* 4. UKURAN ikon kecil & konsisten: 16×16 untuk card-title/inline,
* 20×20–24×24 untuk badge/button standalone. Selalu set
* flex-shrink: 0 saat ikon ditaruh dalam flex row bareng teks.
*
* 5. BENTUK ikon harus simpel/geometris (rect, path garis lurus/lengkung
* minimal) — bukan ilustrasi detail/gradient/shadow. Tujuannya
* konsisten dengan garis bersih (clean lines) brand MekaPos.
*
* 6. Kalau ikon merepresentasikan brand mark (bukan ikon fungsional
* biasa), gunakan path b1/b2/b3 dari assets/mekapos-mark.svg,
* jangan re-draw shape blob baru dari nol.
*/