/* ========================================================================== CairKilat - Professional Banking Theme Light default + Dark variant via [data-theme="dark"] on ========================================================================== */ /* ---------- Light theme (default) ---------- */ :root, :root[data-theme="light"] { --bg: #f6f8fb; --bg-elev: #ffffff; --surface: #ffffff; --surface-soft: #f1f5fa; --surface-mute: #eef2f7; --border: #e3e8ef; --border-strong: #cbd5e1; --divider: #eaeef3; --text: #0a2540; --text-soft: #1f3552; --muted: #5a708a; --dimmed: #8a9bb2; --primary: #0a2540; --primary-2: #133a66; --accent: #1e6fdc; --accent-2: #4a90f0; --accent-soft: #e7f0fc; --success: #0e9f6e; --success-soft: #e6f6f0; --warning: #b6791b; --warning-soft: #fdf3df; --danger: #b3261e; --danger-soft: #fbe9e7; --gold: #b88a44; --gold-soft: #f7eedd; --shadow-xs: 0 1px 2px rgba(15, 36, 64, 0.06); --shadow-sm: 0 2px 6px rgba(15, 36, 64, 0.06), 0 1px 2px rgba(15, 36, 64, 0.04); --shadow-md: 0 8px 24px rgba(15, 36, 64, 0.08), 0 2px 6px rgba(15, 36, 64, 0.04); --shadow-lg: 0 24px 48px rgba(15, 36, 64, 0.10), 0 8px 16px rgba(15, 36, 64, 0.05); --hero-mesh-1: radial-gradient(60% 40% at 80% 0%, rgba(30, 111, 220, 0.10), transparent 60%); --hero-mesh-2: radial-gradient(50% 40% at 0% 100%, rgba(184, 138, 68, 0.08), transparent 60%); --hero-grid: linear-gradient(rgba(10, 37, 64, 0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(10, 37, 64, 0.04) 1px, transparent 1px); } /* ---------- Dark theme ---------- */ :root[data-theme="dark"] { --bg: #0a1929; --bg-elev: #0f2238; --surface: #122a44; --surface-soft: #163354; --surface-mute: #0e2238; --border: #234668; --border-strong: #2d5781; --divider: #1c3a5c; --text: #e6edf6; --text-soft: #c8d4e3; --muted: #91a5bf; --dimmed: #6c83a0; --primary: #e6edf6; --primary-2: #c8d4e3; --accent: #4a9dff; --accent-2: #6db1ff; --accent-soft: rgba(74, 157, 255, 0.12); --success: #2ecc94; --success-soft: rgba(46, 204, 148, 0.12); --warning: #e6b660; --warning-soft: rgba(230, 182, 96, 0.12); --danger: #ff6b6b; --danger-soft: rgba(255, 107, 107, 0.12); --gold: #d4a766; --gold-soft: rgba(212, 167, 102, 0.12); --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.30); --shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.35), 0 1px 2px rgba(0, 0, 0, 0.25); --shadow-md: 0 12px 32px rgba(0, 0, 0, 0.45), 0 2px 6px rgba(0, 0, 0, 0.30); --shadow-lg: 0 32px 64px rgba(0, 0, 0, 0.55), 0 8px 16px rgba(0, 0, 0, 0.30); --hero-mesh-1: radial-gradient(60% 40% at 80% 0%, rgba(74, 157, 255, 0.18), transparent 60%); --hero-mesh-2: radial-gradient(50% 40% at 0% 100%, rgba(212, 167, 102, 0.10), transparent 60%); --hero-grid: linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px); } /* ---------- Base ---------- */ * { box-sizing: border-box; } html, body { margin: 0; background: var(--bg); color: var(--text); font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; font-size: 16px; font-weight: 400; line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; scroll-behavior: smooth; } body { background-image: var(--hero-mesh-1), var(--hero-mesh-2); background-attachment: fixed; background-repeat: no-repeat; } a { color: var(--accent); text-decoration: none; transition: color 0.15s; } a:hover { color: var(--accent-2); } ::selection { background: var(--accent-soft); color: var(--text); } h1, h2, h3, h4, h5, h6, .ck-display, .ck-section-title, .ck-hero-title { font-family: 'Plus Jakarta Sans', 'Inter', sans-serif; font-weight: 700; letter-spacing: -0.01em; color: var(--text); } .ck-mono, code, .ck-num { font-family: 'JetBrains Mono', 'SF Mono', Consolas, monospace; font-feature-settings: 'tnum' 1, 'zero' 1; } /* Numbers - banking style (less \"developer-mono\" than JetBrains Mono) */ .ck-quote-num, .ck-tier-pct { font-family: 'IBM Plex Sans', 'Inter', system-ui, sans-serif; font-feature-settings: 'tnum' 1; } /* Hero/Apply amount: dedicated numeric display */ .ck-amount-display, .ck-hero-amount { font-family: 'IBM Plex Sans', 'Inter', system-ui, sans-serif; font-feature-settings: 'tnum' 1; letter-spacing: -0.02em; } .ck-main { position: relative; padding-top: 72px; } .text-muted, .small.text-muted { color: var(--muted) !important; } /* (Per-signal icon colors are defined further below, after base rules, so they correctly override generic .ck-trust-item / .ck-assurance-ico styles.) */ /* ---------- Header ---------- */ .ck-header { position: fixed; top: 0; left: 0; right: 0; height: 72px; z-index: 100; background: rgba(255, 255, 255, 0.85); border-bottom: 1px solid var(--border); backdrop-filter: saturate(140%) blur(14px); -webkit-backdrop-filter: saturate(140%) blur(14px); display: flex; align-items: center; transition: background 0.2s, border-color 0.2s; } :root[data-theme="dark"] .ck-header { background: rgba(10, 25, 41, 0.80); border-bottom-color: var(--border); } .ck-logo { display: inline-flex; align-items: center; gap: 0.7rem; } .ck-logo-mark { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 10px; box-shadow: var(--shadow-sm); } .ck-logo-text { font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 800; font-size: 1.25rem; letter-spacing: -0.02em; } .ck-logo-text .cair { color: var(--primary); } .ck-logo-text .kilat { color: var(--accent); } .ck-nav { display: flex; gap: 1.6rem; } .ck-nav a { color: var(--text-soft); font-weight: 500; font-size: 0.95rem; position: relative; } .ck-nav a:hover { color: var(--accent); } .ck-nav a::after { content: ''; position: absolute; left: 0; right: 0; bottom: -22px; height: 2px; background: var(--accent); transform: scaleX(0); transform-origin: center; transition: transform 0.2s; } .ck-nav a:hover::after { transform: scaleX(1); } /* Theme toggle */ .ck-theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 10px; background: var(--surface); border: 1px solid var(--border); color: var(--text-soft); cursor: pointer; transition: all 0.15s; } .ck-theme-toggle:hover { border-color: var(--accent); color: var(--accent); box-shadow: var(--shadow-sm); } .ck-theme-toggle .ck-icon-sun { display: none; } .ck-theme-toggle .ck-icon-moon { display: inline; } :root[data-theme="dark"] .ck-theme-toggle .ck-icon-sun { display: inline; } :root[data-theme="dark"] .ck-theme-toggle .ck-icon-moon { display: none; } /* ---------- Buttons ---------- */ .btn { font-family: 'Inter', sans-serif; font-weight: 600; } .ck-btn-primary { display: inline-flex; align-items: center; justify-content: center; font-weight: 600; font-size: 0.95rem; color: #ffffff !important; background: var(--primary); border: 1px solid var(--primary); padding: 0.7rem 1.5rem; border-radius: 10px; box-shadow: var(--shadow-sm); transition: all 0.15s; letter-spacing: 0; } .ck-btn-primary:hover { background: var(--primary-2); border-color: var(--primary-2); color: #ffffff !important; box-shadow: var(--shadow-md); transform: translateY(-1px); } .ck-btn-primary:disabled { opacity: 0.6; cursor: not-allowed; transform: none; box-shadow: none; } :root[data-theme="dark"] .ck-btn-primary { background: var(--accent); border-color: var(--accent); color: #051221 !important; } :root[data-theme="dark"] .ck-btn-primary:hover { background: var(--accent-2); border-color: var(--accent-2); color: #051221 !important; } .ck-btn-ghost { display: inline-flex; align-items: center; justify-content: center; font-weight: 600; font-size: 0.95rem; color: var(--text-soft) !important; background: var(--surface); border: 1px solid var(--border); padding: 0.7rem 1.5rem; border-radius: 10px; transition: all 0.15s; } .ck-btn-ghost:hover { border-color: var(--accent); color: var(--accent) !important; background: var(--accent-soft); } /* ---------- Sections ---------- */ .ck-section { padding: 5rem 0; position: relative; } .ck-section-alt { background: var(--bg-elev); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); } .ck-eyebrow { display: inline-flex; align-items: center; gap: 0.5rem; font-family: 'Inter', sans-serif; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent); margin-bottom: 0.85rem; } .ck-eyebrow::before { content: ''; width: 28px; height: 2px; background: var(--accent); border-radius: 2px; } .ck-section-title { font-size: clamp(1.75rem, 3.4vw, 2.5rem); line-height: 1.2; margin-bottom: 0.75rem; letter-spacing: -0.02em; } .ck-section-sub { color: var(--muted); font-size: 1.05rem; max-width: 640px; margin: 0 auto; } /* ---------- Hero ---------- */ .ck-hero { padding: 4.5rem 0 5.5rem; position: relative; overflow: hidden; } .ck-hero::before { content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 0; background-image: var(--hero-grid); background-size: 56px 56px; mask-image: radial-gradient(ellipse 60% 50% at 50% 50%, #000 30%, transparent 80%); opacity: 0.6; } .ck-hero > .container { position: relative; z-index: 1; } .ck-hero-badge { display: inline-flex; align-items: center; gap: 0.5rem; background: var(--surface); border: 1px solid var(--border); padding: 0.4rem 0.9rem; border-radius: 999px; font-size: 0.82rem; color: var(--text-soft); font-weight: 500; box-shadow: var(--shadow-xs); margin-bottom: 1.4rem; } .ck-hero-badge .ck-pulse { width: 8px; height: 8px; border-radius: 50%; background: var(--success); box-shadow: 0 0 0 0 rgba(14, 159, 110, 0.5); animation: ck-pulse 2s infinite; } @keyframes ck-pulse { 0% { box-shadow: 0 0 0 0 rgba(14, 159, 110, 0.5); } 70% { box-shadow: 0 0 0 8px rgba(14, 159, 110, 0); } 100% { box-shadow: 0 0 0 0 rgba(14, 159, 110, 0); } } .ck-hero-title { font-size: clamp(2.2rem, 5vw, 3.6rem); line-height: 1.1; margin-bottom: 1.2rem; } .ck-hero-title .accent { color: var(--accent); } .ck-hero-sub { color: var(--muted); font-size: 1.15rem; line-height: 1.65; max-width: 560px; margin-bottom: 1.8rem; } .ck-hero-stats { display: flex; gap: 2.5rem; flex-wrap: wrap; padding: 1.2rem 0; margin: 0; border-top: 1px solid var(--divider); border-bottom: 1px solid var(--divider); } .ck-hero-stats > div strong { display: block; font-family: 'Plus Jakarta Sans', sans-serif; font-size: 1.4rem; font-weight: 700; color: var(--text); letter-spacing: -0.01em; } .ck-hero-stats > div span { font-size: 0.78rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.1em; font-weight: 500; } .ck-hero-card { background: var(--surface); border: 1px solid var(--border); border-radius: 18px; box-shadow: var(--shadow-lg); overflow: hidden; } .ck-hero-card-head { display: flex; align-items: center; gap: 0.6rem; padding: 1rem 1.4rem; background: var(--surface-soft); border-bottom: 1px solid var(--border); } .ck-hero-card-head .ck-card-pill { font-size: 0.75rem; color: var(--muted); font-weight: 500; letter-spacing: 0.05em; } .ck-hero-card-head .ck-secure { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.72rem; color: var(--success); font-weight: 600; margin-left: auto; } .ck-hero-card-body { padding: 1.8rem 1.6rem; } .ck-hero-amount, .ck-amount-display { font-weight: 700; font-size: 2.4rem; color: var(--text); text-align: center; margin: 0.6rem 0 1rem; letter-spacing: -0.02em; } .ck-amount-display { font-size: 2.6rem; } /* ---------- Range slider ---------- */ .ck-range { -webkit-appearance: none; appearance: none; width: 100%; height: 6px; background: linear-gradient(90deg, var(--accent), var(--gold)); border-radius: 999px; outline: none; margin: 0.4rem 0; } .ck-range::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 22px; height: 22px; border-radius: 50%; background: #ffffff; border: 3px solid var(--accent); box-shadow: var(--shadow-md); cursor: pointer; transition: transform 0.15s, box-shadow 0.15s; } .ck-range::-webkit-slider-thumb:hover { transform: scale(1.1); } .ck-range::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: #ffffff; border: 3px solid var(--accent); box-shadow: var(--shadow-md); cursor: pointer; } .ck-quickpicks { display: flex; gap: 0.5rem; flex-wrap: wrap; justify-content: center; margin-top: 0.8rem; } .ck-quickpicks button { background: var(--surface-soft); color: var(--text-soft); border: 1px solid var(--border); padding: 0.4rem 0.85rem; border-radius: 8px; font-size: 0.82rem; font-weight: 500; cursor: pointer; transition: all 0.15s; } .ck-quickpicks button:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); } .ck-quote-card { background: var(--surface-soft); border: 1px solid var(--border); border-radius: 12px; padding: 1.1rem 0.6rem; margin-top: 1.2rem; } .ck-quote-feelabel { line-height: 1.15; } .ck-quote-num { font-weight: 700; font-size: 1rem; color: var(--text); margin-top: 0.2rem; } /* Total biaya (persentase + admin) — emas / warning (lebih selaras dengan “biaya” di UI perbankan) */ .ck-quote-fee-total { color: var(--warning) !important; } :root[data-theme="dark"] .ck-quote-fee-total { color: var(--gold) !important; } .ck-quote-card .text-success { color: var(--success) !important; } /* ---------- Best tier highlight (2.00%) ---------- */ .ck-best-offer-badge { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.28rem 0.65rem; border-radius: 999px; font-size: 0.65rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: #7c2d12; background: linear-gradient(135deg, #fde68a 0%, #fbbf24 45%, #f59e0b 100%); border: 1px solid rgba(180, 83, 9, 0.35); box-shadow: 0 2px 10px rgba(245, 158, 11, 0.25); white-space: nowrap; animation: ck-best-pulse 2.4s ease-in-out infinite; } :root[data-theme="dark"] .ck-best-offer-badge { color: #fff7ed; background: linear-gradient(135deg, #b45309 0%, #d97706 50%, #f59e0b 100%); border-color: rgba(251, 191, 36, 0.45); } .ck-best-offer-ico { flex-shrink: 0; opacity: 0.95; } @keyframes ck-best-pulse { 0%, 100% { box-shadow: 0 2px 10px rgba(245, 158, 11, 0.25); transform: scale(1); } 50% { box-shadow: 0 4px 16px rgba(245, 158, 11, 0.45); transform: scale(1.02); } } @media (prefers-reduced-motion: reduce) { .ck-best-offer-badge { animation: none; } } /* ---------- Badges ---------- */ .ck-badge-cyan, .ck-badge-accent { display: inline-flex; align-items: center; background: var(--accent-soft); color: var(--accent); border: 1px solid transparent; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.04em; padding: 0.25rem 0.65rem; border-radius: 999px; } /* ---------- Trust bar ---------- */ .ck-trustbar { background: var(--bg-elev); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: 1.6rem 0; } .ck-trust-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 1.2rem 2.2rem; } .ck-trust-item { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.85rem; font-weight: 600; color: var(--muted); letter-spacing: 0.02em; } .ck-trust-item svg { color: currentColor; flex-shrink: 0; } .ck-trust-divider { width: 1px; height: 18px; background: var(--border); } /* ---------- Step cards ---------- */ .ck-step { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 1.6rem 1.4rem; height: 100%; box-shadow: var(--shadow-xs); transition: all 0.25s; position: relative; } .ck-step:hover { border-color: var(--accent); box-shadow: var(--shadow-md); transform: translateY(-3px); } .ck-step-num { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 12px; background: var(--accent-soft); color: var(--accent); font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 700; font-size: 1.1rem; margin-bottom: 1rem; } .ck-step h5 { font-size: 1.1rem; font-weight: 700; margin-bottom: 0.5rem; color: var(--text); } .ck-step p { color: var(--muted); font-size: 0.95rem; margin: 0; line-height: 1.6; } /* ---------- Tier cards ---------- */ .ck-tier-card { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 1.8rem 1.3rem; text-align: center; height: 100%; box-shadow: var(--shadow-xs); transition: all 0.3s; position: relative; overflow: hidden; } .ck-tier-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--border-strong); transition: background 0.3s; } .ck-tier-card:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); } .ck-tier-card.is-active { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft), var(--shadow-md); transform: translateY(-3px); } .ck-tier-card.is-active::before { background: var(--accent); } .ck-tier-pct { font-weight: 700; font-size: 2.6rem; color: var(--primary); letter-spacing: -0.02em; line-height: 1; } :root[data-theme="dark"] .ck-tier-pct { color: var(--text); } .ck-tier-card.is-active .ck-tier-pct { color: var(--accent); } .ck-tier-card--best { border-color: rgba(245, 158, 11, 0.45); background: linear-gradient(180deg, var(--surface) 0%, rgba(251, 191, 36, 0.08) 55%, var(--surface) 100%); box-shadow: 0 8px 28px rgba(245, 158, 11, 0.12); padding-top: 2.15rem; } .ck-tier-card--best::before { background: linear-gradient(90deg, #f59e0b, #fbbf24, #f59e0b); height: 4px; } .ck-tier-card--best.is-active { border-color: rgba(217, 119, 6, 0.75); box-shadow: 0 0 0 3px rgba(251, 191, 36, 0.35), 0 12px 32px rgba(245, 158, 11, 0.18); } .ck-tier-card--best .ck-tier-pct { background: linear-gradient(180deg, #b45309 0%, #d97706 40%, #f59e0b 100%); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; } :root[data-theme="dark"] .ck-tier-card--best .ck-tier-pct { background: linear-gradient(180deg, #fbbf24 0%, #f59e0b 100%); -webkit-background-clip: text; background-clip: text; } /* Pill tag (English short label) — avoids clipping from rotated ribbons + overflow:hidden */ .ck-tier-best-tag { position: absolute; top: 12px; right: 12px; display: inline-flex; align-items: center; gap: 0.28rem; padding: 0.3rem 0.55rem; border-radius: 999px; font-size: 0.58rem; font-weight: 800; letter-spacing: 0.07em; text-transform: uppercase; color: #fff; background: linear-gradient(90deg, #c2410c, #ea580c, #f59e0b); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.16); pointer-events: none; z-index: 2; max-width: min(11rem, calc(100% - 1.5rem)); white-space: nowrap; } .ck-tier-best-tag svg { flex-shrink: 0; opacity: 0.95; width: 11px; height: 11px; } /* ---------- Sale / Promo (per tier): card chrome unchanged; mark only (.ck-tier-sale-tag) ---------- */ .ck-tier-pct-old { font-size: 1rem; color: var(--muted); margin-top: 0.15rem; font-weight: 600; letter-spacing: 0.01em; } .ck-tier-pct-old s { text-decoration-thickness: 2px; } /* Sale tag pill — badge only; does not restyle the tier card surface */ .ck-tier-sale-tag { position: absolute; top: 12px; left: 12px; display: inline-flex; align-items: center; padding: 0.28rem 0.55rem; border-radius: 999px; font-size: 0.56rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text); background: var(--surface-soft); border: 1px solid var(--border-strong); box-shadow: var(--shadow-xs); pointer-events: none; z-index: 2; white-space: nowrap; } :root[data-theme="dark"] .ck-tier-sale-tag { color: var(--text-soft); background: var(--surface-mute); border-color: var(--border); } /* ---------- Sale banner (Limited Offer) ---------- */ .ck-sale-banner { display: flex; align-items: center; flex-wrap: wrap; gap: 0.8rem; padding: 0.85rem 1.1rem; border-radius: 12px; border: 1px solid rgba(220, 38, 38, 0.30); background: linear-gradient(90deg, rgba(254, 226, 226, 0.7), rgba(255, 237, 213, 0.7)); color: #7f1d1d; } :root[data-theme="dark"] .ck-sale-banner { background: linear-gradient(90deg, rgba(127, 29, 29, 0.35), rgba(124, 45, 18, 0.35)); color: #fecaca; border-color: rgba(248, 113, 113, 0.35); } .ck-sale-banner__tag { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.3rem 0.65rem; border-radius: 999px; font-size: 0.65rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: #fff; background: linear-gradient(90deg, #b91c1c, #dc2626, #f97316); box-shadow: 0 2px 10px rgba(220, 38, 38, 0.25); white-space: nowrap; } .ck-sale-banner__msg { font-size: 0.92rem; font-weight: 600; } /* ---------- Inline % rendering inside quote cards ---------- */ .ck-pct-now { font-weight: 700; } .ck-pct-old { margin-left: 0.25rem; color: var(--muted); font-weight: 500; font-size: 0.85em; } .ck-pct-old s { text-decoration-thickness: 1.5px; } .ck-quote-fee-old { font-size: 0.8rem !important; font-weight: 500 !important; color: var(--muted) !important; margin-top: 0 !important; text-decoration: line-through; text-decoration-thickness: 1.5px; opacity: 0.85; } .ck-tier-label { font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 700; font-size: 0.95rem; color: var(--text); margin-top: 0.6rem; } .ck-tier-range { font-size: 0.85rem; color: var(--muted); margin-top: 0.4rem; } /* ---------- Form ---------- */ .ck-form-card { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 2rem; box-shadow: var(--shadow-md); } .ck-form-section { padding: 0.8rem 0; } .ck-form-section-title { font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 700; font-size: 1.05rem; color: var(--text); margin-bottom: 1rem; display: flex; align-items: center; gap: 0.6rem; } .ck-form-section-title::before { content: ''; width: 4px; height: 18px; background: var(--accent); border-radius: 2px; } .ck-input, .form-control.ck-input, .form-select.ck-input { background: var(--surface); border: 1px solid var(--border); color: var(--text); padding: 0.7rem 0.95rem; border-radius: 10px; font-family: 'Inter', sans-serif; font-size: 1rem; transition: border-color 0.15s, box-shadow 0.15s, background 0.15s; } .ck-input::placeholder { color: var(--dimmed); } .ck-input:focus, .form-control.ck-input:focus, .form-select.ck-input:focus { background: var(--surface); border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); color: var(--text); outline: none; } .form-label { color: var(--text-soft); font-size: 0.88rem; font-weight: 600; margin-bottom: 0.4rem; } .form-check-input { background-color: var(--surface); border-color: var(--border-strong); } .form-check-input:checked { background-color: var(--accent); border-color: var(--accent); } .form-check-label { color: var(--text-soft); } .alert-danger { background: var(--danger-soft); color: var(--danger); border: 1px solid var(--danger); border-radius: 10px; } /* ---------- FAQ accordion ---------- */ .ck-accordion .accordion-item { background: var(--surface); border: 1px solid var(--border); border-radius: 12px !important; margin-bottom: 0.7rem; overflow: hidden; box-shadow: var(--shadow-xs); } .ck-accordion .accordion-button { background: var(--surface); color: var(--text); font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 600; font-size: 1rem; padding: 1.1rem 1.3rem; box-shadow: none; } .ck-accordion .accordion-button:not(.collapsed) { background: var(--accent-soft); color: var(--accent); } .ck-accordion .accordion-button:focus { box-shadow: 0 0 0 4px var(--accent-soft); border-color: var(--accent); } .ck-accordion .accordion-body { background: var(--surface); color: var(--text-soft); padding: 1rem 1.3rem 1.3rem; line-height: 1.65; } :root[data-theme="dark"] .ck-accordion .accordion-button::after { filter: invert(1) brightness(1.5); } /* ---------- Testimonials ---------- */ .ck-testimonial { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 1.6rem 1.4rem; height: 100%; box-shadow: var(--shadow-xs); transition: all 0.25s; position: relative; } .ck-testimonial::before { content: '\201C'; position: absolute; top: 0.4rem; right: 1rem; font-family: 'Plus Jakarta Sans', serif; font-size: 4rem; line-height: 1; color: var(--accent-soft); font-weight: 800; } .ck-testimonial:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); } .ck-stars { color: var(--gold); font-size: 1.05rem; letter-spacing: 0.1em; margin-bottom: 0.7rem; } .ck-testimonial-body { color: var(--text-soft); font-style: normal; line-height: 1.7; position: relative; z-index: 1; margin-bottom: 1rem; } .ck-testimonial-meta { font-size: 0.92rem; color: var(--muted); } .ck-testimonial-meta strong { color: var(--text); font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 700; } /* ---------- Security / Assurance section ---------- */ .ck-assurance { background: var(--surface); border: 1px solid var(--border); border-radius: 18px; padding: 2.4rem 2rem; box-shadow: var(--shadow-md); } .ck-assurance-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1.6rem; } .ck-assurance-item { display: flex; gap: 0.95rem; align-items: flex-start; } .ck-assurance-ico { flex-shrink: 0; width: 44px; height: 44px; border-radius: 12px; background: var(--accent-soft); color: var(--accent); display: inline-flex; align-items: center; justify-content: center; } .ck-assurance-item h5 { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 1rem; font-weight: 700; margin: 0 0 0.3rem; color: var(--text); } .ck-assurance-item p { font-size: 0.9rem; color: var(--muted); margin: 0; line-height: 1.55; } /* ---------- Footer ---------- */ .ck-footer { margin-top: 4rem; padding: 3.5rem 0 2rem; background: var(--bg-elev); border-top: 1px solid var(--border); position: relative; z-index: 1; } .ck-foot-title { font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 700; font-size: 0.85rem; letter-spacing: 0.06em; color: var(--text); margin-bottom: 1rem; text-transform: uppercase; } .ck-footer ul li { margin-bottom: 0.45rem; } .ck-footer ul li a { color: var(--muted); transition: color 0.15s; } .ck-footer ul li a:hover { color: var(--accent); } .ck-foot-sep { border-color: var(--border); margin: 2rem 0 1rem; opacity: 1; } /* ---------- Status timeline ---------- */ .ck-timeline { display: flex; flex-direction: column; gap: 1.2rem; margin: 2rem 0; } .ck-timeline-step { display: flex; align-items: center; gap: 1.1rem; padding: 1rem 1.2rem; border-radius: 12px; background: var(--surface-soft); border: 1px solid var(--border); opacity: 0.55; transition: all 0.25s; } .ck-timeline-step.done, .ck-timeline-step.active { opacity: 1; } .ck-timeline-step.done { border-color: var(--success); background: var(--success-soft); } .ck-timeline-step.active { border-color: var(--accent); background: var(--accent-soft); } .ck-timeline-step.failed { border-color: var(--danger); background: var(--danger-soft); opacity: 1; } .ck-timeline-dot { width: 38px; height: 38px; border-radius: 50%; background: var(--surface); border: 2px solid var(--border-strong); display: inline-flex; align-items: center; justify-content: center; font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 700; color: var(--muted); flex-shrink: 0; } .ck-timeline-step.done .ck-timeline-dot { background: var(--success); border-color: var(--success); color: #ffffff; } .ck-timeline-step.active .ck-timeline-dot { background: var(--accent); border-color: var(--accent); color: #ffffff; animation: ck-pulse-blue 1.6s infinite; } .ck-timeline-step.failed .ck-timeline-dot { background: var(--danger); border-color: var(--danger); color: #ffffff; } @keyframes ck-pulse-blue { 0% { box-shadow: 0 0 0 0 rgba(30, 111, 220, 0.45); } 70% { box-shadow: 0 0 0 12px rgba(30, 111, 220, 0); } 100% { box-shadow: 0 0 0 0 rgba(30, 111, 220, 0); } } /* ---------- Status badges ---------- */ .ck-status-pending, .ck-status-paid, .ck-status-disbursed, .ck-status-failed, .ck-status-expired, .ck-status-cancelled { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.04em; padding: 0.35rem 0.8rem; border-radius: 999px; text-transform: uppercase; } .ck-status-pending { background: var(--warning-soft); color: var(--warning); border: 1px solid var(--warning); } .ck-status-paid { background: var(--accent-soft); color: var(--accent); border: 1px solid var(--accent); } .ck-status-disbursed { background: var(--success-soft); color: var(--success); border: 1px solid var(--success); } .ck-status-failed { background: var(--danger-soft); color: var(--danger); border: 1px solid var(--danger); } .ck-status-expired { background: var(--surface-mute); color: var(--muted); border: 1px solid var(--border-strong); } .ck-status-cancelled { background: var(--surface-mute); color: var(--muted); border: 1px solid var(--border-strong); } /* ---------- Tables (admin) ---------- */ .ck-table { color: var(--text); --bs-table-bg: transparent; } .ck-table thead th { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.04em; color: var(--muted); text-transform: uppercase; border-color: var(--border); background: var(--surface-soft); padding: 0.9rem 0.8rem; } .ck-table tbody td { border-color: var(--divider); vertical-align: middle; padding: 0.85rem 0.8rem; color: var(--text-soft); } .ck-table tbody tr:hover { background: var(--accent-soft); } .ck-table code { background: var(--surface-soft); color: var(--text); padding: 0.15rem 0.45rem; border-radius: 5px; font-size: 0.85rem; border: 1px solid var(--border); } /* ---------- Prose (legal pages) ---------- */ .ck-prose h4 { font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 700; font-size: 1.1rem; color: var(--text); margin-top: 1.8rem; margin-bottom: 0.6rem; } .ck-prose p, .ck-prose li { color: var(--text-soft); line-height: 1.75; } .ck-prose ul { padding-left: 1.3rem; } .ck-prose ul li { margin-bottom: 0.3rem; } /* ---------- Scrollbar ---------- */ ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: var(--bg); } ::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 6px; border: 2px solid var(--bg); } ::-webkit-scrollbar-thumb:hover { background: var(--accent); } /* ---------- Admin body override ---------- */ .ck-admin-body { background: var(--bg); } /* ---------- Mobile ---------- */ @media (max-width: 992px) { .ck-section { padding: 3.5rem 0; } .ck-hero { padding: 2.5rem 0 4rem; } } @media (max-width: 576px) { .ck-section { padding: 2.8rem 0; } .ck-hero-stats { gap: 1.4rem; } .ck-hero-stats > div strong { font-size: 1.15rem; } .ck-form-card { padding: 1.4rem; } .ck-quote-num { font-size: 0.9rem; } .ck-tier-pct { font-size: 2.1rem; } } /* ---------- Per-signal icon colors (placed last to win specificity) ---------- */ .ck-trust-item.ck-ico-green svg { color: #0e9f6e !important; } .ck-trust-item.ck-ico-blue svg { color: #1e6fdc !important; } .ck-trust-item.ck-ico-cyan svg { color: #0ea5b7 !important; } .ck-trust-item.ck-ico-indigo svg { color: #2b4c7e !important; } .ck-trust-item.ck-ico-purple svg { color: #6b4bb8 !important; } .ck-trust-item.ck-ico-teal svg { color: #0f766e !important; } .ck-trust-item.ck-ico-gold svg { color: #b88a44 !important; } .ck-trust-item.ck-ico-slate svg { color: #475569 !important; } .ck-assurance-ico.ck-ico-green { color: #0e9f6e !important; background: rgba(14, 159, 110, 0.14) !important; } .ck-assurance-ico.ck-ico-blue { color: #1e6fdc !important; background: rgba(30, 111, 220, 0.14) !important; } .ck-assurance-ico.ck-ico-cyan { color: #0ea5b7 !important; background: rgba(14, 165, 183, 0.16) !important; } .ck-assurance-ico.ck-ico-indigo { color: #2b4c7e !important; background: rgba(43, 76, 126, 0.14) !important; } .ck-assurance-ico.ck-ico-purple { color: #6b4bb8 !important; background: rgba(107, 75, 184, 0.14) !important; } .ck-assurance-ico.ck-ico-teal { color: #0f766e !important; background: rgba(15, 118, 110, 0.14) !important; } .ck-assurance-ico.ck-ico-gold { color: #b88a44 !important; background: rgba(184, 138, 68, 0.16) !important; } .ck-assurance-ico.ck-ico-slate { color: #475569 !important; background: rgba(71, 85, 105, 0.14) !important; } /* ---------- Payment receipt (bank-style, anti-tamper look) ---------- */ .ck-receipt-wrap { position: relative; border: 1px solid var(--border-strong); border-radius: 4px; box-shadow: var(--shadow-md); background: var(--surface); overflow: hidden; --rec-wm: rgba(10, 37, 64, 0.055); --rec-wm-strong: rgba(10, 37, 64, 0.1); } :root[data-theme="dark"] .ck-receipt-wrap { --rec-wm: rgba(230, 237, 246, 0.045); --rec-wm-strong: rgba(230, 237, 246, 0.08); } .ck-receipt-wrap::before { content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 0; background-image: repeating-linear-gradient(0deg, transparent, transparent 10px, var(--rec-wm) 10px, var(--rec-wm) 11px), repeating-linear-gradient(90deg, transparent, transparent 10px, var(--rec-wm) 10px, var(--rec-wm) 11px), repeating-linear-gradient(-45deg, transparent, transparent 14px, var(--rec-wm-strong) 14px, var(--rec-wm-strong) 15px); } .ck-receipt-wm-layer { position: absolute; inset: 0; pointer-events: none; z-index: 1; overflow: hidden; } .ck-receipt-wm { position: absolute; font-family: 'JetBrains Mono', 'IBM Plex Sans', monospace; font-weight: 800; letter-spacing: 0.35em; color: var(--rec-wm-strong); white-space: nowrap; font-size: clamp(2rem, 6vw, 3.25rem); text-transform: uppercase; user-select: none; } .ck-receipt-wm--a { transform: rotate(-32deg); top: 8%; left: -25%; opacity: 0.88; } .ck-receipt-wm--b { transform: rotate(-32deg); top: 38%; left: -18%; opacity: 0.62; font-size: clamp(1.55rem, 5vw, 2.55rem); } .ck-receipt-wm--c { transform: rotate(-32deg); top: 68%; left: -22%; opacity: 0.48; font-size: clamp(1.25rem, 4vw, 2rem); } .ck-receipt-wm-micro { display: block; position: absolute; bottom: 6px; left: 0; right: 0; text-align: center; font-size: 0.55rem; letter-spacing: 0.22em; color: var(--muted); opacity: 0.42; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0 8px; } .ck-receipt-inner { position: relative; z-index: 2; padding: 1.35rem 1.5rem 1.5rem; } .ck-receipt-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; padding-bottom: 1rem; border-bottom: 2px solid var(--text); margin-bottom: 1rem; } .ck-receipt-kicker { font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); font-weight: 600; margin-bottom: 0.25rem; } .ck-receipt-brand { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 1.35rem; font-weight: 800; color: var(--text); letter-spacing: -0.02em; } .ck-receipt-stamp-badge { flex-shrink: 0; font-size: clamp(1.85rem, 5.5vw, 2.65rem); font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--success); border: 4px solid var(--success); padding: 0.7rem 1.2rem; border-radius: 6px; transform: rotate(-4deg); box-shadow: inset 0 0 0 1px rgba(14, 159, 110, 0.12); line-height: 1.1; } .ck-receipt-ref-block { text-align: center; margin-bottom: 1.1rem; padding: 0.65rem 0; background: var(--surface-soft); border: 1px dashed var(--border-strong); border-radius: 4px; } .ck-receipt-order-id { font-family: 'JetBrains Mono', monospace; font-weight: 700; font-size: clamp(0.95rem, 2.8vw, 1.15rem); letter-spacing: 0.06em; color: var(--text); word-break: break-all; } .ck-receipt-url-line.text-center { text-align: center; } .ck-receipt-url-code { display: inline-block; max-width: 100%; margin: 0 auto; padding: 0.5rem 0.75rem; font-size: 0.74rem; font-family: 'JetBrains Mono', monospace; line-height: 1.45; background: var(--surface-mute); border: 1px solid var(--border-strong); border-radius: 7px; color: var(--accent); cursor: pointer; word-break: break-all; text-align: left; } .ck-receipt-url-code:hover { border-color: var(--accent); background: var(--accent-soft); } .ck-receipt-url-border { border-top: 1px solid var(--border-strong); } /* Receipt row: same height & padding for ck-btn-primary and btn-outline-primary (Bootstrap default is shorter). */ .ck-receipt-actions { gap: 0.65rem !important; } .ck-receipt-actions .btn { display: inline-flex !important; align-items: center; justify-content: center; gap: 0.45rem; min-height: 2.75rem; padding: 0.65rem 1.35rem; border-radius: 10px; font-size: 0.9375rem; font-weight: 600; line-height: 1.25; text-align: center; } .ck-receipt-actions .btn svg { flex-shrink: 0; width: 1.125rem; height: 1.125rem; } /* * Receipt row — WhatsApp / Gmail-style mail / print. * Bootstrap 5.3 .btn paints via --bs-btn-* and background-color: var(--bs-btn-bg). * We must set those variables (and fallbacks) or buttons look like plain text. */ .ck-receipt-actions .btn.ck-receipt-btn-wa { --bs-btn-color: #fff; --bs-btn-bg: #25d366; --bs-btn-border-color: #1eb959; --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #20bd5a; --bs-btn-hover-border-color: #17994a; --bs-btn-active-color: #fff; --bs-btn-active-bg: #17994a; --bs-btn-active-border-color: #148a3e; --bs-btn-disabled-color: rgba(255, 255, 255, 0.72); --bs-btn-disabled-bg: #25d366; --bs-btn-disabled-border-color: #1eb959; --bs-btn-focus-shadow-rgb: 37, 211, 102; color: #fff !important; background-color: #25d366 !important; border-color: #1eb959 !important; box-shadow: var(--shadow-sm); } .ck-receipt-actions .btn.ck-receipt-btn-wa:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); } .ck-receipt-actions .btn.ck-receipt-btn-email { --bs-btn-color: #fff; --bs-btn-bg: #ea4335; --bs-btn-border-color: #d33426; --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #d33426; --bs-btn-hover-border-color: #b52d20; --bs-btn-active-color: #fff; --bs-btn-active-bg: #b52d20; --bs-btn-active-border-color: #9e261a; --bs-btn-disabled-color: rgba(255, 255, 255, 0.72); --bs-btn-disabled-bg: #ea4335; --bs-btn-disabled-border-color: #d33426; --bs-btn-focus-shadow-rgb: 234, 67, 53; color: #fff !important; background-color: #ea4335 !important; border-color: #d33426 !important; box-shadow: var(--shadow-sm); } .ck-receipt-actions .btn.ck-receipt-btn-email:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); } /* “Tinta / dokumen” — neutral slate suited to a print action */ .ck-receipt-actions .btn.ck-receipt-btn-print { --bs-btn-color: #fff; --bs-btn-bg: #546e7a; --bs-btn-border-color: #455a64; --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #455a64; --bs-btn-hover-border-color: #37474f; --bs-btn-active-color: #fff; --bs-btn-active-bg: #37474f; --bs-btn-active-border-color: #2e3c43; --bs-btn-disabled-color: rgba(255, 255, 255, 0.72); --bs-btn-disabled-bg: #546e7a; --bs-btn-disabled-border-color: #455a64; --bs-btn-focus-shadow-rgb: 84, 110, 122; color: #fff !important; background-color: #546e7a !important; border-color: #455a64 !important; box-shadow: var(--shadow-sm); } .ck-receipt-actions .btn.ck-receipt-btn-print:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); } :root[data-theme="dark"] .ck-receipt-actions .btn.ck-receipt-btn-print { --bs-btn-bg: #607d8b; --bs-btn-border-color: #546e7a; --bs-btn-hover-bg: #546e7a; --bs-btn-hover-border-color: #455a64; --bs-btn-active-bg: #455a64; --bs-btn-active-border-color: #37474f; --bs-btn-disabled-bg: #607d8b; --bs-btn-disabled-border-color: #546e7a; background-color: #607d8b !important; border-color: #546e7a !important; } /* Receipt modals — icon send buttons (Bootstrap .btn) */ .btn.ck-receipt-modal-btn-wa { --bs-btn-color: #fff; --bs-btn-bg: #25d366; --bs-btn-border-color: #1eb959; --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #20bd5a; --bs-btn-hover-border-color: #17994a; --bs-btn-active-color: #fff; --bs-btn-active-bg: #17994a; --bs-btn-active-border-color: #148a3e; --bs-btn-disabled-color: rgba(255, 255, 255, 0.72); --bs-btn-disabled-bg: #25d366; --bs-btn-disabled-border-color: #1eb959; --bs-btn-focus-shadow-rgb: 37, 211, 102; color: #fff !important; background-color: #25d366 !important; border-color: #1eb959 !important; } .btn.ck-receipt-modal-btn-email { --bs-btn-color: #fff; --bs-btn-bg: #ea4335; --bs-btn-border-color: #d33426; --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #d33426; --bs-btn-hover-border-color: #b52d20; --bs-btn-active-color: #fff; --bs-btn-active-bg: #b52d20; --bs-btn-active-border-color: #9e261a; --bs-btn-disabled-color: rgba(255, 255, 255, 0.72); --bs-btn-disabled-bg: #ea4335; --bs-btn-disabled-border-color: #d33426; --bs-btn-focus-shadow-rgb: 234, 67, 53; color: #fff !important; background-color: #ea4335 !important; border-color: #d33426 !important; } .ck-receipt-security-bar { margin: 0 0 1rem; padding: 0.85rem 1rem; background: var(--danger-soft); border: 1px solid rgba(179, 38, 30, 0.32); border-radius: 6px; border-left: 5px solid var(--danger); } .ck-receipt-security-title { font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 800; font-size: 0.82rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--danger); margin-bottom: 0.45rem; } .ck-receipt-security-list { padding-left: 1.15rem; font-size: 0.78rem; line-height: 1.55; color: var(--text-soft); } .ck-receipt-security-list li { margin-bottom: 0.35rem; } :root[data-theme="dark"] .ck-receipt-security-bar { background: rgba(255, 107, 107, 0.1); border-color: rgba(255, 107, 107, 0.32); } .ck-receipt-table { width: 100%; font-size: 0.88rem; border-collapse: collapse; margin-bottom: 1rem; } .ck-receipt-table th { text-align: left; font-weight: 600; color: var(--muted); padding: 0.45rem 0.5rem 0.45rem 0; width: 42%; vertical-align: top; border-bottom: 1px solid var(--divider); } .ck-receipt-table td { padding: 0.45rem 0; color: var(--text-soft); border-bottom: 1px solid var(--divider); } .ck-receipt-table tr:last-child th, .ck-receipt-table tr:last-child td { border-bottom: none; } .ck-receipt-mono { font-family: 'JetBrains Mono', monospace; font-variant-numeric: tabular-nums; } .ck-receipt-highlight th, .ck-receipt-highlight td { border-bottom: 2px solid var(--border-strong) !important; padding-top: 0.55rem !important; font-weight: 700; color: var(--text) !important; } .ck-receipt-recv { color: var(--success) !important; font-size: 1rem !important; } .ck-receipt-microprint { margin-top: 0.75rem; font-size: 0.52rem; line-height: 1.35; color: var(--dimmed); opacity: 0.88; letter-spacing: 0.02em; word-break: break-all; border-top: 1px solid var(--divider); padding-top: 0.5rem; } @media print { body * { visibility: hidden; } #ck-receipt-root, #ck-receipt-root * { visibility: visible; } #ck-receipt-root { position: absolute; left: 0; top: 0; width: 100%; max-width: 100%; box-shadow: none !important; border: 1px solid #999 !important; print-color-adjust: exact; -webkit-print-color-adjust: exact; } #ck-receipt-root .ck-receipt-security-bar { background: #fff5f5 !important; border: 1px solid #c9c9c9 !important; border-left: 4px solid #b3261e !important; print-color-adjust: exact; -webkit-print-color-adjust: exact; } #ck-receipt-root .ck-receipt-security-title { color: #8b1a10 !important; } #ck-receipt-root .ck-receipt-security-list, #ck-receipt-root .ck-receipt-security-list code { color: #1a1a1a !important; } } /* ---------- Reduced motion ---------- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } }