/* ============================================================ AUTO WD — Landing Page Styles Font: Outfit (Google Fonts) Vibe: Ethereal Glass / Dark SaaS Premium CARA EDIT WARNA: ubah variabel di :root {} CARA EDIT FONT: ganti --font di :root {} dan link di HTML ============================================================ */ /* ── Root Variables ──────────────────────────────────────────────────── */ :root { /* Background */ --bg-primary: #040d1a; /* warna utama halaman */ --bg-secondary: #071224; /* section alt */ --bg-card: rgba(255, 255, 255, 0.035); /* glass card */ --bg-card-hover: rgba(255, 255, 255, 0.06); /* Brand colors */ --blue: #0ea5e9; /* biru utama */ --cyan: #06b6d4; /* cyan */ --purple: #8b5cf6; /* ungu */ --neon: #22d3ee; /* neon cyan */ --green: #22c55e; /* Text */ --text-primary: #f0f8ff; --text-secondary: #94a3b8; --text-muted: #4a5a6a; /* Borders */ --border: rgba(255, 255, 255, 0.08); --border-bright: rgba(255, 255, 255, 0.14); /* Surfaces yang sebelumnya hardcoded (nav, mobile menu, input) — dipindah ke variabel supaya ikut berubah saat ganti tema */ --nav-bg: rgba(4, 13, 26, 0.55); --nav-bg-scrolled: rgba(4, 13, 26, 0.88); --menu-bg: rgba(4, 13, 26, 0.97); --input-bg: rgba(255, 255, 255, 0.03); /* "Layar" perangkat di animasi hero & demo dashboard (About) — ikut berubah mengikuti tema, bukan hardcode gelap */ --screen-bg: rgba(4, 13, 26, 0.95); --screen-bg-solid: #0d1117; /* Font */ --font: 'Outfit', system-ui, sans-serif; /* Spacing */ --section-gap: 4rem; /* jarak antar section */ --container-max: 1200px; --radius-card: 1.25rem; --radius-sm: 0.75rem; /* Motion — cubic-bezier premium (bukan ease-in-out!) */ --ease-out: cubic-bezier(0.32, 0.72, 0, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); } /* ── Light Mode ────────────────────────────────────────────────────── Diaktifkan lewat [data-theme="light"] di (lihat main.js). Catatan: kartu "Dashboard Modern" (.bento-dark) sengaja TETAP gelap di kedua tema (representasi screenshot dashboard) — teksnya di-hardcode terpisah, tidak memakai variabel --text-* di bawah ini. Animasi HP/laptop di hero & demo dashboard di section About IKUT berubah mengikuti tema lewat variabel --screen-bg / --screen-bg-solid. */ :root[data-theme="light"] { --bg-primary: #f3f7fb; --bg-secondary: #e7eef5; --bg-card: rgba(8, 22, 40, 0.035); --bg-card-hover: rgba(8, 22, 40, 0.07); --text-primary: #0b1a2b; --text-secondary: #48586b; --text-muted: #7c8a9c; --border: rgba(8, 22, 40, 0.10); --border-bright: rgba(8, 22, 40, 0.18); --nav-bg: rgba(255, 255, 255, 0.65); --nav-bg-scrolled: rgba(255, 255, 255, 0.92); --menu-bg: rgba(255, 255, 255, 0.98); --input-bg: rgba(8, 22, 40, 0.03); --screen-bg: rgba(255, 255, 255, 0.95); --screen-bg-solid: #eef3f8; } /* ── Reset ───────────────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { font-family: var(--font); background: var(--bg-primary); color: var(--text-primary); line-height: 1.6; overflow-x: hidden; -webkit-font-smoothing: antialiased; } a { text-decoration: none; color: inherit; } ul { list-style: none; } img { max-width: 100%; display: block; } /* ── Particle Canvas ────────────────────────────────────────────────── */ #particle-canvas { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; opacity: 0.35; } /* ── Container ──────────────────────────────────────────────────────── */ .container { width: 100%; max-width: var(--container-max); margin: 0 auto; padding: 0 1.5rem; position: relative; z-index: 1; } .overflow-x-hidden { overflow-x: hidden; } /* ── Section gap ────────────────────────────────────────────────────── */ .section-gap { padding: var(--section-gap) 0; } /* ── Eyebrow tag ────────────────────────────────────────────────────── */ .eyebrow-tag { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.3rem 0.85rem; border-radius: 999px; border: 1px solid var(--border-bright); background: rgba(14, 165, 233, 0.08); color: var(--neon); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 1.25rem; } .tag-light { background: rgba(255,255,255,0.06); color: #c8e6ff; } :root[data-theme="light"] .tag-light { background: rgba(14,165,233,0.08); color: #0e6da3; } /* ── Typography ─────────────────────────────────────────────────────── */ .gradient-text { background: linear-gradient(135deg, var(--blue) 0%, var(--cyan) 50%, var(--purple) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .section-h2 { font-size: clamp(2rem, 4vw, 3rem); font-weight: 800; line-height: 1.15; letter-spacing: -0.02em; margin-bottom: 1.25rem; } .section-p { font-size: 1rem; color: var(--text-secondary); max-width: 520px; line-height: 1.75; margin-bottom: 1rem; } .section-sub { font-size: 1rem; color: var(--text-secondary); margin-top: 0.5rem; max-width: 480px; margin-left: auto; margin-right: auto; } .section-head { text-align: center; margin-bottom: 2rem; } .section-head .section-h2 { margin-bottom: 0.5rem; } /* ── Glass Card ─────────────────────────────────────────────────────── */ /* Outer shell + inner core — Double-Bezel */ .glass-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-card); box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.06), 0 8px 40px rgba(0, 0, 0, 0.3); transition: border-color 0.4s var(--ease-out), transform 0.4s var(--ease-out), box-shadow 0.4s var(--ease-out); position: relative; overflow: hidden; } .hover-scale:hover { transform: translateY(-4px); border-color: var(--border-bright); box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.10), 0 16px 60px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(14, 165, 233, 0.1); } /* ── Buttons ────────────────────────────────────────────────────────── */ /* Button-in-button nested icon architecture */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem; border-radius: 999px; font-family: var(--font); font-weight: 600; cursor: pointer; border: none; transition: all 0.3s var(--ease-out); white-space: nowrap; text-decoration: none; } .btn:active { transform: scale(0.97); } .btn-icon { width: 1.75rem; height: 1.75rem; border-radius: 50%; background: rgba(255,255,255,0.15); display: inline-flex; align-items: center; justify-content: center; transition: transform 0.3s var(--ease-spring), background 0.3s; flex-shrink: 0; } .btn:hover .btn-icon { transform: translateX(2px) translateY(-1px) scale(1.1); background: rgba(255,255,255,0.25); } .btn-primary { background: linear-gradient(135deg, var(--blue) 0%, #0284c7 60%, #7c3aed 100%); color: #fff; box-shadow: 0 4px 20px rgba(14, 165, 233, 0.35); } .btn-primary:hover { box-shadow: 0 8px 30px rgba(14, 165, 233, 0.55); transform: translateY(-1px); } .btn-ghost { background: rgba(255,255,255,0.06); color: var(--text-primary); border: 1px solid var(--border-bright); } .btn-ghost:hover { background: rgba(255,255,255,0.10); border-color: rgba(255,255,255,0.2); } .btn-sm { padding: 0.5rem 1.1rem; font-size: 0.8rem; } .btn-lg { padding: 0.8rem 1.75rem; font-size: 0.95rem; } .btn-xl { padding: 1rem 2rem; font-size: 1rem; } .btn-full { width: 100%; justify-content: center; padding: 0.85rem; } /* ── Navigation ─────────────────────────────────────────────────────── */ /* Floating glass pill nav — detached from top */ .nav-pill { position: fixed; top: 1.25rem; left: 50%; transform: translateX(-50%); z-index: 100; width: calc(100% - 3rem); max-width: 900px; border-radius: 999px; background: var(--nav-bg); border: 1px solid var(--border); box-shadow: 0 4px 30px rgba(0,0,0,0.3), inset 0 1px rgba(255,255,255,0.06); -webkit-backdrop-filter: blur(12px) saturate(1.4); backdrop-filter: blur(12px) saturate(1.4); transition: background 0.35s ease, box-shadow 0.35s ease, -webkit-backdrop-filter 0.35s ease, backdrop-filter 0.35s ease; } .nav-pill.scrolled { background: var(--nav-bg-scrolled); border-color: rgba(255,255,255,0.08); -webkit-backdrop-filter: blur(28px) saturate(1.8); backdrop-filter: blur(28px) saturate(1.8); box-shadow: 0 8px 32px rgba(0,0,0,0.55), 0 1px 0 rgba(255,255,255,0.05) inset, 0 0 0 1px rgba(14, 165, 233, 0.08); } .nav-inner { display: flex; align-items: center; justify-content: space-between; padding: 0.7rem 1.25rem; gap: 1rem; } .nav-logo-img { height: 44px; object-fit: contain; /* logo gelap → dibalik jadi putih, lalu diberi tint biru agar pas di navbar */ filter: brightness(0) invert(1) drop-shadow(0 0 6px rgba(14,165,233,0.4)); } /* Light mode: logo aslinya sudah gelap, jadi tidak perlu dibalik */ :root[data-theme="light"] .nav-logo-img { filter: drop-shadow(0 0 6px rgba(14,165,233,0.25)); } .nav-links { display: flex; align-items: center; gap: 0.25rem; } .nav-link { padding: 0.4rem 0.85rem; border-radius: 999px; font-size: 0.85rem; font-weight: 500; color: var(--text-secondary); transition: color 0.2s, background 0.2s; } .nav-link:hover { color: var(--text-primary); background: rgba(255,255,255,0.06); } /* Hamburger */ .hamburger { display: none; flex-direction: column; gap: 5px; background: none; border: none; cursor: pointer; padding: 0.3rem; } .ham-line { width: 22px; height: 2px; background: var(--text-primary); border-radius: 2px; display: block; transition: all 0.3s var(--ease-out); transform-origin: center; } .hamburger.open .ham-line:first-child { transform: translateY(3.5px) rotate(45deg); } .hamburger.open .ham-line:last-child { transform: translateY(-3.5px) rotate(-45deg); } /* Grup aksi kanan navbar: theme toggle + hamburger, supaya tetap rapi saat nav-links/CTA disembunyikan di mobile */ .nav-actions { display: flex; align-items: center; gap: 0.6rem; flex-shrink: 0; } /* ── Theme Toggle (dark/light mode) ───────────────────────────────────── */ .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 2.1rem; height: 2.1rem; border-radius: 50%; background: var(--bg-card-hover); border: 1px solid var(--border); color: var(--text-primary); cursor: pointer; flex-shrink: 0; transition: background 0.2s, border-color 0.2s, transform 0.2s; } .theme-toggle:hover { border-color: var(--border-bright); transform: translateY(-1px); } .theme-toggle svg { width: 16px; height: 16px; display: block; } .theme-toggle .theme-icon-moon { display: none; } :root[data-theme="light"] .theme-toggle .theme-icon-sun { display: none; } :root[data-theme="light"] .theme-toggle .theme-icon-moon { display: block; } /* Varian mengambang — dipakai di halaman tanpa navbar (mis. registrasi.html) */ .theme-toggle-floating { position: fixed; top: 1.25rem; right: 1.25rem; z-index: 60; } /* Mobile menu overlay */ .mobile-menu { position: fixed; inset: 0; z-index: 99; background: var(--menu-bg); -webkit-backdrop-filter: blur(30px); backdrop-filter: blur(30px); display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: opacity 0.3s var(--ease-out); } .mobile-menu.open { opacity: 1; pointer-events: all; } .mobile-links { display: flex; flex-direction: column; gap: 0.5rem; text-align: center; } .mobile-link { font-size: 2rem; font-weight: 700; color: var(--text-secondary); padding: 0.5rem 1rem; border-radius: var(--radius-sm); transition: color 0.2s, transform 0.2s var(--ease-out); transform: translateY(20px); opacity: 0; } .mobile-menu.open .mobile-link { transform: translateY(0); opacity: 1; } /* Staggered reveal */ .mobile-menu.open .mobile-link:nth-child(1) { transition-delay: 0.05s; } .mobile-menu.open .mobile-link:nth-child(2) { transition-delay: 0.1s; } .mobile-menu.open .mobile-link:nth-child(3) { transition-delay: 0.15s; } .mobile-menu.open .mobile-link:nth-child(4) { transition-delay: 0.2s; } .mobile-menu.open .mobile-link:nth-child(5) { transition-delay: 0.25s; } .mobile-link:hover { color: var(--text-primary); transform: translateY(-2px); } .cta-link { color: var(--blue) !important; } /* ── HERO ───────────────────────────────────────────────────────────── */ .hero { min-height: 100dvh; display: flex; flex-direction: column; justify-content: center; padding: 7rem 1.5rem 4rem; position: relative; overflow: hidden; } /* Radial mesh gradient background */ .hero::before { content: ''; position: absolute; top: -20%; left: -10%; width: 70%; height: 80%; background: radial-gradient(ellipse, rgba(14, 165, 233, 0.09) 0%, transparent 65%); pointer-events: none; } .hero::after { content: ''; position: absolute; bottom: -10%; right: -5%; width: 60%; height: 70%; background: radial-gradient(ellipse, rgba(139, 92, 246, 0.08) 0%, transparent 65%); pointer-events: none; } .hero-inner { max-width: var(--container-max); margin: 0 auto; width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; position: relative; z-index: 1; } .hero-h1 { font-size: clamp(2.8rem, 5vw, 5rem); font-weight: 900; line-height: 1.05; letter-spacing: -0.03em; margin-bottom: 1.5rem; } .hero-sub { font-size: 1.05rem; color: var(--text-secondary); line-height: 1.75; max-width: 480px; margin-bottom: 2.25rem; } .hero-ctas { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: 3rem; } .hero-stats { display: flex; align-items: center; gap: 1.5rem; } .stat-item { text-align: center; } .stat-num { display: block; font-size: 1.6rem; font-weight: 800; color: var(--text-primary); line-height: 1; } .stat-label { font-size: 0.7rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.08em; margin-top: 0.25rem; display: block; } .stat-divider { width: 1px; height: 36px; background: var(--border); } /* Scroll cue */ .scroll-cue { position: absolute; bottom: 2rem; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 6px; z-index: 1; } .scroll-dot { width: 6px; height: 6px; background: var(--blue); border-radius: 50%; animation: scrollBounce 2s var(--ease-out) infinite; } @keyframes scrollBounce { 0%, 100% { transform: translateY(0); opacity: 1; } 50% { transform: translateY(10px); opacity: 0.4; } } /* ── Hero Animation Canvas ──────────────────────────────────────────── */ .hero-animation-wrap { position: relative; } .anim-scene { position: relative; padding: 2rem; } /* Outer double-bezel shell */ .anim-card { background: rgba(255,255,255,0.03); border: 1px solid var(--border); border-radius: 1.5rem; padding: 2rem 1.5rem; box-shadow: inset 0 1px 1px rgba(255,255,255,0.06), 0 20px 60px rgba(0,0,0,0.4); display: flex; align-items: center; justify-content: center; gap: 0.5rem; flex-wrap: wrap; position: relative; min-height: 260px; } /* Smartphone */ .anim-phone { opacity: 0; transform: translateY(20px); flex-shrink: 0; } .phone-frame { width: 80px; height: 150px; border: 2px solid rgba(14,165,233,0.5); border-radius: 14px; background: var(--screen-bg); position: relative; display: flex; flex-direction: column; align-items: center; overflow: hidden; box-shadow: 0 0 20px rgba(14,165,233,0.2); } .phone-notch { width: 28px; height: 6px; background: rgba(14,165,233,0.4); border-radius: 3px; margin-top: 8px; flex-shrink: 0; } .phone-screen { flex: 1; width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 6px; opacity: 0; transition: opacity 0.3s; } .phone-app-name { font-size: 8px; font-weight: 700; color: var(--blue); margin-bottom: 4px; } .phone-status { font-size: 7px; color: var(--text-muted); } .phone-indicator { width: 8px; height: 8px; border-radius: 50%; background: var(--text-muted); margin-top: 6px; transition: background 0.5s; } .phone-indicator.connected { background: var(--green); box-shadow: 0 0 8px var(--green); } .phone-home-bar { width: 30px; height: 3px; background: rgba(255,255,255,0.2); border-radius: 2px; margin-bottom: 8px; flex-shrink: 0; } /* USB Cable SVG */ .anim-cable { width: 120px; height: 40px; /* wajib — tanpa ini SVG collapse jadi 0px di flex */ flex-shrink: 0; overflow: visible; /* agar konektor di tepi tidak terpotong */ display: block; } /* Laptop */ .anim-laptop { opacity: 0; transform: translateX(20px); flex-shrink: 0; } .laptop-screen-wrap { width: 160px; background: var(--screen-bg); border: 1px solid rgba(14,165,233,0.4); border-radius: 8px 8px 0 0; overflow: hidden; box-shadow: 0 0 20px rgba(14,165,233,0.15); } .laptop-screen { padding: 8px; min-height: 150px; } .laptop-topbar { display: flex; align-items: center; gap: 4px; margin-bottom: 8px; padding-bottom: 6px; border-bottom: 1px solid var(--border); } .dot { width: 6px; height: 6px; border-radius: 50%; } .dot-red { background: #ef4444; } .dot-yellow { background: #f59e0b; } .dot-green { background: #22c55e; } .laptop-title { font-size: 7px; color: var(--text-muted); margin-left: 4px; font-weight: 500; } .laptop-content { display: flex; flex-direction: column; gap: 6px; } .laptop-status-row { display: flex; align-items: center; gap: 6px; padding: 4px 6px; border-radius: 6px; background: rgba(255,255,255,0.04); } .laptop-status-row.hidden { display: none; } .status-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; } .status-dot.detecting { background: var(--blue); animation: pulse 1.2s ease-in-out infinite; } .status-dot.connected { background: var(--green); } .status-text { font-size: 7.5px; color: var(--text-secondary); font-weight: 500; } @keyframes pulse { 0%,100%{opacity:1;} 50%{opacity:0.3;} } /* Request card */ .request-card { background: rgba(14,165,233,0.08); border: 1px solid rgba(14,165,233,0.2); border-radius: 8px; padding: 8px; position: relative; overflow: hidden; } .request-card.hidden { display: none; } .request-label { font-size: 7px; color: var(--cyan); font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; } .request-amount { font-size: 11px; font-weight: 800; color: var(--text-primary); margin: 2px 0; } .request-dest { font-size: 6.5px; color: var(--text-muted); margin-bottom: 6px; } .accept-btn { width: 100%; padding: 4px 8px; border-radius: 999px; border: none; background: var(--blue); color: #fff; font-size: 7.5px; font-weight: 700; cursor: default; transition: background 0.3s, transform 0.15s; font-family: var(--font); position: relative; overflow: hidden; } .accept-btn.accepting { transform: scale(1.05); } .accept-btn.accepted { background: var(--green); } .ripple { position: absolute; top: 50%; left: 50%; width: 10px; height: 10px; background: rgba(255,255,255,0.4); border-radius: 50%; transform: translate(-50%,-50%) scale(0); pointer-events: none; } /* Progress */ .progress-wrap { display: flex; flex-direction: column; gap: 4px; } .progress-wrap.hidden { display: none; } .step-label { font-size: 7px; color: var(--cyan); font-weight: 600; } .progress-track { height: 4px; background: rgba(255,255,255,0.08); border-radius: 4px; overflow: hidden; } .progress-bar { height: 100%; width: 0%; background: linear-gradient(90deg, var(--blue), var(--cyan)); border-radius: 4px; transition: width 0.4s var(--ease-out); } /* Success state */ .success-state { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 6px; } .success-state.hidden { display: none; } .success-icon { width: 36px; } .success-text { font-size: 9px; font-weight: 700; color: var(--green); } .success-sub { font-size: 7px; color: var(--text-muted); } /* Laptop base */ .laptop-base { width: 160px; height: 10px; background: rgba(255,255,255,0.06); border-radius: 0 0 4px 4px; border: 1px solid rgba(14,165,233,0.2); border-top: none; } .laptop-hinge { width: 40px; height: 3px; background: rgba(14,165,233,0.3); border-radius: 2px; margin: 0 auto; margin-top: 3px; } /* LIVE badge */ .live-badge { position: absolute; top: 0.85rem; left: 1rem; display: flex; align-items: center; gap: 0.4rem; background: rgba(34, 197, 94, 0.08); border: 1px solid rgba(34, 197, 94, 0.2); border-radius: 999px; padding: 0.25rem 0.6rem; z-index: 2; opacity: 0; /* tersembunyi sampai laptop muncul */ } .live-dot { width: 7px; height: 7px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 6px #22c55e; animation: livePulse 1.4s ease-in-out infinite; flex-shrink: 0; } @keyframes livePulse { 0%, 100% { opacity: 1; box-shadow: 0 0 6px #22c55e; } 50% { opacity: 0.2; box-shadow: none; } } .live-text { font-size: 0.6rem; font-weight: 800; letter-spacing: 0.12em; color: #22c55e; } /* Floating USB icon */ .float-usb { position: absolute; top: 1rem; right: 1.5rem; width: 28px; height: 28px; background: rgba(14,165,233,0.1); border: 1px solid rgba(14,165,233,0.2); border-radius: 8px; display: flex; align-items: center; justify-content: center; padding: 6px; animation: floatIcon 3s ease-in-out infinite; } @keyframes floatIcon { 0%,100%{transform:translateY(0);} 50%{transform:translateY(-6px);} } /* Glow blobs */ .anim-glow { position: absolute; border-radius: 50%; pointer-events: none; filter: blur(40px); opacity: 0.4; } .glow-blue { width: 150px; height: 150px; background: var(--blue); top: -20%; left: -10%; } .glow-purple { width: 120px; height: 120px; background: var(--purple); bottom: -10%; right: -5%; } /* ── TRUSTED Marquee ────────────────────────────────────────────────── */ .trusted { border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: 1.75rem 0; overflow: hidden; position: relative; z-index: 1; } .trusted::before, .trusted::after { content: ''; position: absolute; top: 0; bottom: 0; width: 8rem; z-index: 2; pointer-events: none; } .trusted::before { left: 0; background: linear-gradient(to right, var(--bg-primary), transparent); } .trusted::after { right: 0; background: linear-gradient(to left, var(--bg-primary), transparent); } .trusted-label { text-align: center; font-size: 0.7rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.12em; margin-bottom: 1rem; } .marquee-outer { overflow: hidden; } .marquee-track { display: flex; align-items: center; gap: 1.5rem; width: max-content; animation: marqueeScroll 28s linear infinite; } @keyframes marqueeScroll { from { transform: translateX(0); } to { transform: translateX(-50%); } } .marquee-item { font-size: 0.95rem; font-weight: 700; color: var(--text-secondary); white-space: nowrap; letter-spacing: 0.02em; transition: color 0.2s; } .marquee-item:hover { color: var(--blue); } .marquee-sep { color: var(--text-muted); font-size: 1.2rem; } /* ── ABOUT ──────────────────────────────────────────────────────────── */ .about { padding-bottom: 2rem; } .about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 5rem; align-items: stretch; } .about-pillars { display: flex; flex-direction: column; gap: 0.6rem; margin-top: 1.5rem; } .pillar { display: flex; align-items: center; gap: 0.6rem; font-size: 0.9rem; font-weight: 600; color: var(--text-secondary); } .pillar-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; } .pillar-dot.blue { background: var(--blue); box-shadow: 0 0 8px var(--blue); } .pillar-dot.cyan { background: var(--cyan); box-shadow: 0 0 8px var(--cyan); } .pillar-dot.purple { background: var(--purple); box-shadow: 0 0 8px var(--purple); } /* Architecture flow */ .arch-card { padding: 1.75rem; } .arch-flow { display: flex; flex-direction: column; align-items: center; gap: 0; } .arch-node { padding: 0.5rem 1.25rem; border-radius: 999px; font-size: 0.8rem; font-weight: 600; text-align: center; border: 1px solid var(--border); background: rgba(255,255,255,0.04); width: 100%; max-width: 240px; transition: border-color 0.2s, background 0.2s; } .arch-node:hover { border-color: var(--border-bright); background: rgba(255,255,255,0.07); } .node-owner { border-color: rgba(139,92,246,0.4); color: #c4b5fd; } .node-master { border-color: rgba(14,165,233,0.4); color: var(--blue); } .node-user { border-color: rgba(6,182,212,0.4); color: var(--cyan); } .node-dash { color: var(--text-primary); } .node-api { color: var(--text-secondary); } .node-engine { color: var(--text-secondary); } .node-adb { border-color: rgba(34,197,94,0.3); color: var(--green); } .arch-arrow { width: 1px; height: 16px; background: linear-gradient(to bottom, var(--border), transparent); margin: 2px auto; } /* ── LAPTOP DEMO ANIMATION ───────────────────────────────────────────── */ /* about-arch stretch chain */ .about-arch { display: flex; flex-direction: column; } .laptop-demo-wrap { position: relative; display: flex; flex-direction: column; flex: 1; } .demo-laptop-outer { display: flex; flex-direction: column; flex: 1; width: 100%; filter: drop-shadow(0 0 28px rgba(14,165,233,0.15)); } /* Lid — identik hero: dark bg + biru border + glow */ .demo-laptop-lid { flex: 1; display: flex; flex-direction: column; width: 100%; min-height: 340px; background: var(--screen-bg); border: 1px solid rgba(14,165,233,0.4); border-radius: 8px 8px 0 0; overflow: hidden; box-shadow: 0 0 20px rgba(14,165,233,0.15); position: relative; } .demo-laptop-inner { padding: 10px 12px; } /* Form body */ .demo-body { padding: 6px 0 5px; } .demo-section-title { font-size: 9px; font-weight: 700; color: var(--text-primary); margin-bottom: 6px; letter-spacing: 0.03em; } /* Table */ .demo-table-wrap { margin-bottom: 7px; overflow: hidden; border: 1px solid var(--border); border-radius: 4px; } .demo-table { width: 100%; border-collapse: collapse; } .demo-table thead th { padding: 6px 10px; text-align: left; font-size: 9px; font-weight: 600; color: var(--text-muted); letter-spacing: 0.06em; text-transform: uppercase; background: rgba(255,255,255,0.03); border-bottom: 1px solid var(--border); } .demo-row { border-bottom: 1px solid rgba(255,255,255,0.04); transition: background 0.2s ease; } .demo-row:last-child { border-bottom: none; } .demo-row.row-checked { background: rgba(14,165,233,0.07); } .demo-row td { padding: 7px 10px; color: var(--text-secondary); vertical-align: middle; font-size: 12px; } .demo-nominal { text-align: right; font-weight: 700; color: var(--text-primary) !important; white-space: nowrap; } /* Bank badge pills */ .demo-bank-pill { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 10px; font-weight: 700; letter-spacing: 0.04em; } .demo-bank-pill.dana { background: rgba(105,130,255,0.15); color: #818cf8; } .demo-bank-pill.bca { background: rgba(14,165,233,0.15); color: #38bdf8; } .demo-bank-pill.bri { background: rgba(239,68,68,0.15); color: #f87171; } .demo-bank-pill.mandiri { background: rgba(251,191,36,0.15); color: #fbbf24; } /* Checkbox */ .demo-cb-wrap { flex-shrink: 0; } .demo-cb-box { width: 10px; height: 10px; border: 1px solid var(--border-bright); border-radius: 2px; display: flex; align-items: center; justify-content: center; background: transparent; transition: background 0.18s, border-color 0.18s; } .demo-cb-box.cb-on { background: var(--blue); border-color: var(--blue); } .demo-cb-tick { font-size: 6px; line-height: 1; color: white; opacity: 0; transform: scale(0.4); transition: opacity 0.15s, transform 0.15s; } .demo-cb-box.cb-on .demo-cb-tick { opacity: 1; transform: scale(1); } /* Accept button */ .demo-accept-btn { display: block; width: 100%; padding: 6px 8px; background: var(--blue); color: white; border: none; border-radius: 999px; font-size: 9px; font-weight: 700; letter-spacing: 0.05em; cursor: pointer; font-family: inherit; transition: transform 0.1s; } /* Overlays (popup / processing / success) */ .demo-overlay { position: absolute; inset: 0; opacity: 0; pointer-events: none; } .demo-overlay.ov-show { opacity: 1; pointer-events: all; } /* Popup modal */ #dPopup { background: rgba(0,0,0,0.6); display: flex; align-items: center; justify-content: center; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); } .demo-modal { background: var(--screen-bg); border: 1px solid rgba(14,165,233,0.3); border-radius: 8px; padding: 14px 16px; width: 200px; box-shadow: 0 0 20px rgba(14,165,233,0.15); } .demo-modal-title { font-size: 10px; font-weight: 700; color: var(--text-primary); margin-bottom: 10px; } .demo-modal-sub { font-size: 8px; color: var(--text-muted); margin-bottom: 5px; } /* Dropdown */ .demo-dropdown { position: relative; margin-bottom: 10px; } .demo-drop-sel { display: flex; align-items: center; justify-content: space-between; background: rgba(255,255,255,0.04); border: 1px solid var(--border); border-radius: 4px; padding: 6px 9px; font-size: 8.5px; color: var(--text-secondary); cursor: pointer; user-select: none; } .demo-drop-arrow { opacity: 0.4; font-size: 7px; } .demo-drop-list { position: absolute; top: calc(100% + 3px); left: 0; right: 0; background: var(--screen-bg); border: 1px solid rgba(14,165,233,0.25); border-radius: 5px; overflow: hidden; z-index: 5; opacity: 0; transform: translateY(-4px); pointer-events: none; transition: opacity 0.18s ease, transform 0.18s ease; box-shadow: 0 4px 16px rgba(0,0,0,0.5); } .demo-drop-list.drop-open { opacity: 1; transform: translateY(0); pointer-events: all; } .demo-drop-opt { padding: 7px 10px; font-size: 8.5px; color: var(--text-secondary); transition: background 0.12s; } .demo-drop-opt:hover { background: rgba(14,165,233,0.07); } .demo-drop-opt.opt-selected { background: rgba(14,165,233,0.12); color: var(--blue); font-weight: 600; } /* Process button */ .demo-process-btn { display: block; width: 100%; padding: 6px 8px; background: rgba(255,255,255,0.05); color: var(--text-muted); border: 1px solid var(--border); border-radius: 999px; font-size: 8.5px; font-weight: 700; letter-spacing: 0.05em; cursor: not-allowed; font-family: inherit; transition: background 0.25s, color 0.25s, border-color 0.25s; } .demo-process-btn.proc-ready { background: var(--blue); color: white; border-color: transparent; cursor: pointer; } /* Processing overlay */ #dProcessing { background: var(--screen-bg-solid); display: flex; align-items: center; justify-content: center; } .demo-proc-wrap { display: flex; flex-direction: column; align-items: center; gap: 8px; width: 65%; } .demo-proc-label { font-size: 10px; font-weight: 700; color: var(--cyan); } .demo-proc-track { width: 100%; height: 4px; background: rgba(255,255,255,0.08); border-radius: 4px; overflow: hidden; } .demo-proc-fill { height: 100%; width: 0%; background: linear-gradient(90deg, var(--blue), var(--cyan)); border-radius: 4px; transition: width 0.4s var(--ease-out); } .demo-proc-sub { font-size: 8px; color: var(--text-muted); } /* Success overlay */ #dSuccessState { background: var(--screen-bg-solid); display: flex; align-items: center; justify-content: center; } .demo-success-wrap { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; } .demo-success-circle { width: 44px; height: 44px; border-radius: 50%; background: rgba(34,197,94,0.1); border: 2px solid rgba(34,197,94,0.4); display: flex; align-items: center; justify-content: center; margin-bottom: 4px; } .demo-success-title { font-size: 11px; font-weight: 700; color: var(--green); } .demo-success-detail { font-size: 8.5px; color: var(--text-muted); } /* Base + Hinge — identik nilai hero */ .demo-laptop-base { width: 100%; height: 10px; background: rgba(255,255,255,0.06); border-radius: 0 0 4px 4px; border: 1px solid rgba(14,165,233,0.2); border-top: none; display: flex; justify-content: center; } .demo-laptop-hinge { width: 40px; height: 3px; background: rgba(14,165,233,0.3); border-radius: 2px; margin-top: 3px; } /* Cursor */ .demo-cursor { position: absolute; top: 0; left: 0; pointer-events: none; z-index: 20; opacity: 0; filter: drop-shadow(0 2px 5px rgba(0,0,0,0.55)); } .features { padding-top: 2rem; padding-bottom: 2rem; } /* ── BENTO GRID ─────────────────────────────────────────────────────── */ /* 12-column grid, grid-flow-dense, mathematically verified: Row 1: bento-wide(7) + bento-narrow(5) = 12 ✓ Row 2: bento-third(4) + bento-third(4) + bento-third(4) = 12 ✓ Row 3: bento-wide(7) + bento-narrow(5) = 12 ✓ */ .bento-grid { display: grid; grid-template-columns: repeat(12, 1fr); grid-auto-flow: dense; gap: 1rem; } .bento-card { padding: 1.75rem; } .bento-wide { grid-column: span 7; } .bento-narrow { grid-column: span 5; } .bento-third { grid-column: span 4; } .bento-icon { width: 44px; height: 44px; background: rgba(255,255,255,0.05); border: 1px solid var(--border); border-radius: 12px; display: flex; align-items: center; justify-content: center; padding: 10px; margin-bottom: 1.25rem; } .bento-icon svg { width: 100%; height: 100%; } .bento-h3 { font-size: 1.05rem; font-weight: 700; margin-bottom: 0.6rem; color: var(--text-primary); } .bento-p { font-size: 0.85rem; color: var(--text-secondary); line-height: 1.65; } .bento-tag-row { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 1rem; } .bento-tag { padding: 0.2rem 0.65rem; border-radius: 999px; font-size: 0.7rem; font-weight: 600; background: rgba(14,165,233,0.1); border: 1px solid rgba(14,165,233,0.2); color: var(--blue); } .verify-steps { display: flex; gap: 0.5rem; margin-top: 1rem; flex-wrap: wrap; } .vstep { font-size: 0.7rem; padding: 0.2rem 0.6rem; border-radius: 999px; background: rgba(255,255,255,0.04); border: 1px solid var(--border); color: var(--text-muted); } .vstep.active { background: rgba(139,92,246,0.12); border-color: rgba(139,92,246,0.3); color: #c4b5fd; } :root[data-theme="light"] .vstep.active { color: #6d28d9; } :root[data-theme="light"] .eyebrow-tag { color: #0e7490; } /* Realtime preview card */ .bento-dark { background: rgba(4,13,26,0.6) !important; } /* .bento-dark tetap gelap di kedua tema, jadi override .bento-h3/.bento-p (dipakai bareng kartu lain yang ikut tema) supaya teksnya tidak ikut menggelap saat light mode */ .bento-dark .bento-h3 { color: #f0f8ff; } .bento-dark .bento-p { color: #94a3b8; } .realtime-preview { background: rgba(0,0,0,0.4); border: 1px solid var(--border); border-radius: 10px; padding: 1rem; margin-bottom: 1.25rem; } .rt-header { display: flex; align-items: center; gap: 6px; margin-bottom: 0.75rem; } .rt-dot { width: 7px; height: 7px; border-radius: 50%; } .rt-dot.green { background: var(--green); box-shadow: 0 0 6px var(--green); animation: pulse 2s infinite; } /* Kartu "Dashboard Modern" (.bento-dark) selalu bertema gelap — warna teks di-hardcode */ .rt-title { font-size: 0.75rem; font-weight: 600; color: #94a3b8; } .rt-row { display: flex; align-items: center; justify-content: space-between; padding: 0.4rem 0; border-bottom: 1px solid rgba(255,255,255,0.04); font-size: 0.78rem; } .rt-row:last-child { border-bottom: none; } .rt-bank { color: #f0f8ff; font-weight: 500; } .rt-amount { color: #94a3b8; } .success-badge { color: var(--green); font-size: 0.65rem; font-weight: 700; background: rgba(34,197,94,0.1); padding: 1px 6px; border-radius: 4px; } .processing-badge{ color: var(--blue); font-size: 0.65rem; font-weight: 700; background: rgba(14,165,233,0.1); padding: 1px 6px; border-radius: 4px; } .how-it-works { padding-top: 2rem; padding-bottom: 2rem; } /* ── HOW IT WORKS — Steps ───────────────────────────────────────────── */ .steps-grid { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr; gap: 0.5rem; align-items: start; } .step-card { padding: 1.75rem 1.25rem; text-align: center; } .step-num { font-size: 0.7rem; font-weight: 800; color: var(--blue); letter-spacing: 0.1em; margin-bottom: 1rem; opacity: 0.7; } .step-icon { width: 52px; height: 52px; margin: 0 auto 1rem; background: rgba(255,255,255,0.04); border: 1px solid var(--border); border-radius: 14px; display: flex; align-items: center; justify-content: center; padding: 12px; } .step-icon svg { width: 100%; height: 100%; } .step-h3 { font-size: 0.95rem; font-weight: 700; margin-bottom: 0.5rem; } .step-p { font-size: 0.8rem; color: var(--text-secondary); line-height: 1.65; } .step-connector { display: flex; align-items: center; justify-content: center; padding-top: 5rem; } .step-connector svg { width: 60px; } .why-us { padding-top: 2rem; padding-bottom: 2rem; } /* ── WHY US ─────────────────────────────────────────────────────────── */ .why-inner { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 5rem; align-items: start; } .why-list { display: flex; flex-direction: column; gap: 1.75rem; } .why-item { display: flex; gap: 1rem; align-items: flex-start; } .why-icon-wrap { width: 36px; height: 36px; flex-shrink: 0; background: rgba(255,255,255,0.04); border: 1px solid var(--border); border-radius: 10px; display: flex; align-items: center; justify-content: center; padding: 8px; margin-top: 2px; } .why-icon-wrap svg { width: 100%; height: 100%; } .why-h4 { font-size: 0.95rem; font-weight: 700; margin-bottom: 0.3rem; } .why-p { font-size: 0.85rem; color: var(--text-secondary); line-height: 1.65; } .free-trial { padding-top: 2rem; padding-bottom: 2rem; } /* ── FREE TRIAL ─────────────────────────────────────────────────────── */ .trial-card { padding: 4rem; text-align: center; position: relative; overflow: hidden; border-color: rgba(14,165,233,0.2); } .trial-glow { position: absolute; border-radius: 50%; pointer-events: none; filter: blur(60px); opacity: 0.25; } .trial-glow.glow-blue { width: 300px; height: 300px; background: var(--blue); top: -30%; left: -10%; } .trial-glow.glow-purple { width: 250px; height: 250px; background: var(--purple); bottom: -20%; right: -5%; } .trial-content { position: relative; z-index: 1; } .trial-h2 { font-size: clamp(2rem, 4vw, 3.5rem); font-weight: 900; letter-spacing: -0.03em; margin-bottom: 1rem; } .trial-p { font-size: 1rem; color: var(--text-secondary); max-width: 500px; margin: 0 auto 2rem; } .trial-features { display: flex; justify-content: center; flex-wrap: wrap; gap: 1rem; margin-bottom: 2.5rem; } .trial-feat { display: flex; align-items: center; gap: 0.4rem; font-size: 0.85rem; font-weight: 500; color: var(--text-secondary); } .trial-feat svg { width: 16px; height: 16px; } .pricing { padding-top: 2rem; padding-bottom: 2rem; } /* ── PRICING ────────────────────────────────────────────────────────── */ .pricing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; align-items: start; } .pricing-card { padding: 2rem; position: relative; } .pricing-card:has(.featured-badge) { overflow: visible; } .pricing-featured { border-color: rgba(14,165,233,0.35); background: rgba(14,165,233,0.05); transform: scale(1.02); box-shadow: 0 20px 60px rgba(14,165,233,0.15), inset 0 1px 1px rgba(14,165,233,0.1); } .featured-badge { position: absolute; top: -13px; left: 50%; transform: translateX(-50%); background: linear-gradient(135deg, var(--blue), var(--purple)); color: #fff; font-size: 0.7rem; font-weight: 700; padding: 0.3rem 0.9rem; border-radius: 999px; white-space: nowrap; letter-spacing: 0.04em; } .pricing-header { margin-bottom: 1.75rem; } .plan-name { display: block; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-muted); margin-bottom: 0.75rem; } .plan-price { display: flex; align-items: baseline; gap: 0.25rem; margin-bottom: 0.75rem; } .price-idr { font-size: 1.8rem; font-weight: 900; color: var(--text-primary); } .price-period { font-size: 0.8rem; color: var(--text-muted); } .plan-desc { font-size: 0.82rem; color: var(--text-secondary); line-height: 1.6; } .plan-features { margin-bottom: 1.75rem; display: flex; flex-direction: column; gap: 0.7rem; } .plan-features li { display: flex; align-items: center; gap: 0.6rem; font-size: 0.85rem; color: var(--text-secondary); } .feat-check { color: var(--green); font-weight: 700; flex-shrink: 0; } .feat-muted { color: var(--text-muted); flex-shrink: 0; } .testimonials { padding-top: 2rem; padding-bottom: 2rem; } /* ── TESTIMONIALS ───────────────────────────────────────────────────── */ .testi-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; } .testi-card { padding: 2rem; } .testi-stars { font-size: 0.8rem; color: #f59e0b; letter-spacing: 2px; margin-bottom: 1rem; } .testi-quote { font-size: 0.9rem; color: var(--text-secondary); line-height: 1.7; margin-bottom: 1.5rem; font-style: italic; } .testi-author { display: flex; align-items: center; gap: 0.75rem; } .testi-avatar { width: 38px; height: 38px; border-radius: 50%; background: linear-gradient(135deg, var(--blue), var(--purple)); display: flex; align-items: center; justify-content: center; font-size: 0.75rem; font-weight: 800; color: #fff; flex-shrink: 0; } .testi-name { font-size: 0.85rem; font-weight: 700; } .testi-role { font-size: 0.75rem; color: var(--text-muted); } .faq { padding-top: 2rem; padding-bottom: 2rem; } /* ── FAQ ────────────────────────────────────────────────────────────── */ .faq-inner { display: grid; grid-template-columns: 1fr 2fr; gap: 5rem; align-items: start; } .faq-list { display: flex; flex-direction: column; gap: 0; } .faq-item { border-bottom: 1px solid var(--border); } .faq-q { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.25rem 0; background: none; border: none; color: var(--text-primary); font-family: var(--font); font-size: 0.95rem; font-weight: 600; text-align: left; cursor: pointer; transition: color 0.2s; } .faq-q:hover { color: var(--blue); } .faq-icon { font-size: 1.4rem; font-weight: 300; color: var(--text-muted); flex-shrink: 0; transition: transform 0.3s var(--ease-out), color 0.2s; } .faq-q[aria-expanded="true"] .faq-icon { transform: rotate(45deg); color: var(--blue); } .faq-a { overflow: hidden; max-height: 0; transition: max-height 0.4s var(--ease-out), padding 0.3s; } .faq-a.open { max-height: 300px; } .faq-a p { padding: 0 0 1.25rem; font-size: 0.88rem; color: var(--text-secondary); line-height: 1.75; } /* ── FINAL CTA ──────────────────────────────────────────────────────── */ .final-cta { padding-top: 2rem; padding-bottom: calc(var(--section-gap) * 1.15); } .cta-card { background: linear-gradient(135deg, rgba(14,165,233,0.08) 0%, rgba(139,92,246,0.08) 100%); border: 1px solid rgba(14,165,233,0.2); border-radius: 2rem; padding: 5rem; text-align: center; position: relative; overflow: hidden; } .cta-card::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 0%, rgba(14,165,233,0.12) 0%, transparent 60%); pointer-events: none; } .cta-h2 { font-size: clamp(2rem, 4vw, 3.5rem); font-weight: 900; letter-spacing: -0.03em; margin-bottom: 1rem; position: relative; } .cta-p { font-size: 1rem; color: var(--text-secondary); max-width: 480px; margin: 0 auto 2.5rem; position: relative; } .cta-btns { display: flex; justify-content: center; gap: 1rem; flex-wrap: wrap; position: relative; } /* ── FOOTER ─────────────────────────────────────────────────────────── */ .footer { border-top: 1px solid var(--border); padding: 4rem 0 2rem; position: relative; z-index: 1; } .footer-inner { max-width: 420px; margin-bottom: 3rem; } .footer-logo { height: 36px; margin-bottom: 1rem; } .footer-tagline { font-size: 0.85rem; color: var(--text-muted); line-height: 1.65; margin-bottom: 1.25rem; } .footer-tg { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.82rem; color: var(--blue); font-weight: 500; transition: opacity 0.2s; } .footer-tg:hover { opacity: 0.75; } .footer-tg svg { width: 16px; height: 16px; } .footer-legal-link { display: block; width: fit-content; margin-top: 1rem; font-size: 0.8rem; color: var(--text-muted); transition: color 0.2s; } .footer-legal-link:hover { color: var(--text-secondary); } .footer-bottom { border-top: 1px solid var(--border); padding-top: 2rem; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem; } .footer-copy { font-size: 0.8rem; color: var(--text-muted); } .footer-tech { font-size: 0.75rem; color: var(--text-muted); } /* ── LEGAL PAGES (Terms / Privacy) ──────────────────────────────────── */ .legal-page { padding-top: 8rem; } .legal-header { text-align: center; max-width: 640px; margin: 0 auto 3rem; } .legal-header .section-h2 { margin-bottom: 0.75rem; } .legal-updated { font-size: 0.85rem; color: var(--text-muted); line-height: 1.7; } .legal-content { max-width: 820px; margin: 0 auto; padding: 3rem; } .legal-content h2 { font-size: 1.2rem; font-weight: 700; color: var(--text-primary); margin: 2.25rem 0 0.9rem; } .legal-content h2:first-child { margin-top: 0; } .legal-content p { font-size: 0.92rem; color: var(--text-secondary); line-height: 1.75; margin-bottom: 1rem; } .legal-content ul { list-style: disc; margin: 0 0 1rem 1.25rem; display: flex; flex-direction: column; gap: 0.55rem; } .legal-content li { font-size: 0.92rem; color: var(--text-secondary); line-height: 1.7; } .legal-content strong { color: var(--text-primary); font-weight: 600; } .legal-content a { color: var(--blue); text-decoration: underline; text-underline-offset: 2px; } .legal-content a:hover { opacity: 0.8; } .legal-content a.legal-tg { text-decoration: none; margin-top: 0.5rem; } @media (max-width: 768px) { .legal-page { padding-top: 6.5rem; } .legal-content { padding: 2rem 1.5rem; } } /* ── AUTH (Register / Login) ───────────────────────────────────────── */ .auth-wrap { min-height: 100dvh; display: flex; align-items: center; justify-content: center; padding: 3rem 1.25rem; position: relative; z-index: 1; } .auth-card { width: 100%; max-width: 460px; padding: 2.5rem; } .auth-logo { display: block; height: 92px; margin: 0 auto 1.75rem; } .auth-head { text-align: center; margin-bottom: 2rem; } .auth-title { font-size: 1.5rem; font-weight: 800; margin-bottom: 0.4rem; } .auth-sub { font-size: 0.82rem; color: var(--text-muted); } .form-group { margin-bottom: 1.25rem; } .form-label { display: block; font-size: 0.82rem; font-weight: 600; color: var(--text-primary); margin-bottom: 0.5rem; } .form-input { width: 100%; padding: 0.85rem 1rem; border-radius: 0.75rem; border: 1px solid var(--border); background: var(--input-bg); color: var(--text-primary); font-family: var(--font); font-size: 0.9rem; transition: border-color 0.2s, background 0.2s; } .form-input::placeholder { color: var(--text-muted); } .form-input:focus { outline: none; border-color: var(--blue); background: rgba(14, 165, 233, 0.06); } .form-hint { font-size: 0.75rem; color: var(--text-muted); margin-top: 0.45rem; line-height: 1.5; } .auth-submit { margin-top: 0.5rem; } .auth-switch { text-align: center; font-size: 0.85rem; color: var(--text-muted); margin-top: 1.5rem; } .auth-switch a { color: var(--blue); font-weight: 600; } .auth-switch a:hover { opacity: 0.8; } .auth-footer { text-align: center; font-size: 0.78rem; color: var(--text-muted); margin-top: 2rem; } .auth-footer a { color: var(--text-muted); text-decoration: underline; text-underline-offset: 2px; } .auth-footer a:hover { color: var(--text-secondary); } /* ── MODAL (Success popup) ─────────────────────────────────────────── */ .modal-overlay { position: fixed; inset: 0; background: rgba(1, 4, 10, 0.92); backdrop-filter: blur(10px); display: flex; align-items: center; justify-content: center; padding: 1.5rem; z-index: 50; opacity: 0; pointer-events: none; transition: opacity 0.25s var(--ease-out); } .modal-overlay.open { opacity: 1; pointer-events: auto; } .modal-box { width: 100%; max-width: 400px; padding: 2.25rem 2rem; text-align: center; background: var(--bg-secondary); border: 1px solid var(--border-bright); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55); transform: translateY(12px); transition: transform 0.25s var(--ease-out); } .modal-overlay.open .modal-box { transform: translateY(0); } .modal-close-btn { margin-top: 0.25rem; } .modal-icon { width: 56px; height: 56px; margin: 0 auto 1.25rem; border-radius: 50%; background: rgba(34, 197, 94, 0.12); display: flex; align-items: center; justify-content: center; } .modal-title { font-size: 1.15rem; font-weight: 800; margin-bottom: 0.75rem; } .modal-text { font-size: 0.88rem; color: var(--text-secondary); line-height: 1.7; margin-bottom: 1.5rem; } .modal-close-btn { width: 100%; justify-content: center; } @media (max-width: 480px) { .auth-card { padding: 2rem 1.5rem; } } /* ── Scroll Reveal Animations ────────────────────────────────────────── */ [data-reveal] { opacity: 0; transform: translateY(32px); transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out); } [data-reveal].visible { opacity: 1; transform: translateY(0); } [data-reveal-delay="0.05"].visible { transition-delay: 0.05s; } [data-reveal-delay="0.1"].visible { transition-delay: 0.1s; } [data-reveal-delay="0.15"].visible { transition-delay: 0.15s; } [data-reveal-delay="0.2"].visible { transition-delay: 0.2s; } [data-reveal-delay="0.25"].visible { transition-delay: 0.25s; } [data-reveal-delay="0.3"].visible { transition-delay: 0.3s; } /* ── Responsive — Mobile First ──────────────────────────────────────── */ @media (max-width: 1024px) { .hero-inner { grid-template-columns: 1fr; } .hero-animation-wrap { display: block; } /* tampil di tablet/mobile */ .about-grid { grid-template-columns: 1fr; gap: 3rem; } .why-inner { grid-template-columns: 1fr; gap: 3rem; } .faq-inner { grid-template-columns: 1fr; gap: 2.5rem; } .steps-grid { grid-template-columns: repeat(2, 1fr); } .step-connector { display: none; } /* Animasi: switch ke layout vertikal di tablet/mobile */ .anim-card { flex-direction: column; align-items: center; gap: 1rem; padding: 1.5rem 1rem; min-height: unset; } /* Kabel USB: rotate jadi vertikal (atas ke bawah) */ .anim-cable { width: 40px; transform: rotate(90deg); } /* Perkecil sedikit agar proporsional di layar kecil */ .phone-frame { width: 70px; height: 130px; } .laptop-screen-wrap, .laptop-base { width: 140px; } } @media (max-width: 768px) { :root { --section-gap: 3rem; } .nav-links, .nav-pill .btn { display: none; } .hamburger { display: flex; } .hero { padding: 6rem 1.25rem 3rem; } .hero-inner { gap: 2.5rem; } .hero-h1 { font-size: clamp(2.4rem, 8vw, 3.5rem); } .hero-ctas { flex-direction: column; align-items: flex-start; } .hero-stats { gap: 1rem; } /* Animasi di HP: lebih compact */ .anim-scene { padding: 0.5rem; } .anim-card { padding: 1.25rem 0.75rem; gap: 0.75rem; } .float-usb { display: none; } /* sembunyikan floating icon di HP agar tidak sesak */ /* Bento: stack single column on mobile */ .bento-grid { grid-template-columns: 1fr; } .bento-wide, .bento-narrow, .bento-third { grid-column: span 1; } .pricing-grid { grid-template-columns: 1fr; } .pricing-featured { transform: scale(1); } .testi-grid { grid-template-columns: 1fr; } .steps-grid { grid-template-columns: 1fr; gap: 1rem; } .trial-card { padding: 2.5rem 1.5rem; } .cta-card { padding: 2.5rem 1.5rem; } .footer-inner { max-width: none; } .footer-bottom { flex-direction: column; text-align: center; } } @media (max-width: 480px) { .hero-h1 { font-size: 2.2rem; } .trial-features { flex-direction: column; align-items: center; } }