/* Font Instrument Serif & Plus Jakarta Sans dimuat via di index.html, bukan @import, supaya browser bisa fetch font paralel bareng HTML (bukan nunggu CSS diparsing dulu). */ :root { --bg: #F8FAFC; --surface: #FFFFFF; --surface-subtle: #F1F5F9; --text: #0F172A; --muted: #64748B; --stroke: #E2E8F0; --accent-primary: #334155; --accent-slate: #475569; --accent-warm: #64748B; } * { box-sizing: border-box; scroll-behavior: smooth; } /* Offset Scroll Agar Seksi Tidak Tertutup Navbar Fixed */ section, footer { scroll-margin-top: 80px; } body { background-color: var(--bg); color: var(--text); font-family: 'Plus Jakarta Sans', sans-serif; margin: 0; padding: 0; overflow-x: hidden; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* Hide scrollbar utility */ .no-scrollbar::-webkit-scrollbar { display: none; } .no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; } .font-display { font-family: 'Instrument Serif', serif; } .font-body { font-family: 'Plus Jakarta Sans', sans-serif; } /* Loading Screen Smooth Motion Blur Exit (GPU Accelerated) */ #loading-screen { transition: opacity 0.75s cubic-bezier(0.16, 1, 0.3, 1), transform 0.75s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.75s ease; will-change: opacity, transform; transform: translateZ(0); -webkit-backface-visibility: hidden; backface-visibility: hidden; } #loading-screen.fade-out { opacity: 0; transform: scale(1.03) translateZ(0); pointer-events: none; visibility: hidden; } /* Animasi Sinkronisasi Munculnya Halaman Utama (Hero Reveal) */ .hero-entrance { animation: heroFadeBlur 0.9s cubic-bezier(0.16, 1, 0.3, 1) forwards; will-change: opacity, filter, transform; } @keyframes heroFadeBlur { 0% { opacity: 0; filter: blur(8px); transform: scale(0.98) translateZ(0); } 100% { opacity: 1; filter: blur(0px); transform: scale(1) translateZ(0); } } /* Smooth Dynamic Role Transition */ .role-transition { transition: opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1), transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), filter 0.35s cubic-bezier(0.16, 1, 0.3, 1); display: inline-block; will-change: opacity, transform, filter; } .role-hidden { opacity: 0; transform: translate3d(0, 10px, 0); filter: blur(6px); } /* iPhone Glass Navbar Styles */ .glass-nav { background: rgba(255, 255, 255, 0.65) !important; backdrop-filter: blur(20px) saturate(180%); -webkit-backdrop-filter: blur(20px) saturate(180%); border: 1px solid rgba(255, 255, 255, 0.7) !important; box-shadow: 0 10px 30px rgba(15, 23, 42, 0.06), inset 0 1px 1px rgba(255, 255, 255, 0.8); } /* Mematikan total seleksi teks, link callout, dan native drag preview */ .glass-nav, .nav-link, #nav-links-container, #nav-links-container a, #navbar { user-select: none !important; -webkit-user-select: none !important; -moz-user-select: none !important; -ms-user-select: none !important; -webkit-user-drag: none !important; -webkit-touch-callout: none !important; } #nav-links-container { cursor: grab; touch-action: pan-y; } #nav-links-container.is-dragging { cursor: grabbing !important; } /* Active Glass Pill Selector Transparan Kaca Asli */ .glass-pill { position: absolute; background: rgba(255, 255, 255, 0.45) !important; backdrop-filter: blur(16px) saturate(180%); -webkit-backdrop-filter: blur(16px) saturate(180%); border: 1px solid rgba(255, 255, 255, 0.8) !important; box-shadow: 0 4px 20px rgba(15, 23, 42, 0.08), inset 0 1px 1.5px rgba(255, 255, 255, 0.9); transition: left 0.55s cubic-bezier(0.34, 1.6, 0.64, 1), width 0.45s cubic-bezier(0.34, 1.3, 0.64, 1), top 0.45s cubic-bezier(0.34, 1.3, 0.64, 1), height 0.45s cubic-bezier(0.34, 1.3, 0.64, 1); pointer-events: none !important; will-change: left, top, width, height; -webkit-backface-visibility: hidden; backface-visibility: hidden; } /* Gradients Monokrom Netral */ .pastel-gradient { background: linear-gradient(135deg, #1E293B 0%, #475569 100%); } .pastel-gradient-soft { background: linear-gradient(135deg, #F1F5F9 0%, #E2E8F0 100%); } .pastel-text-gradient { background: linear-gradient(135deg, #0F172A 0%, #475569 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } /* Cards & Hardware Acceleration Anti-Flicker */ .pastel-card { background: #FFFFFF; border: 1px solid var(--stroke); box-shadow: 0 4px 16px -2px rgba(15, 23, 42, 0.04); transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s ease, box-shadow 0.3s ease; will-change: transform; transform: translate3d(0, 0, 0); -webkit-backface-visibility: hidden; backface-visibility: hidden; } .pastel-card:hover { border-color: #94A3B8; box-shadow: 0 14px 28px -10px rgba(15, 23, 42, 0.08); transform: translate3d(0, -4px, 0); } /* Sheen Effect Anti-Flicker */ .sheen-effect { position: relative; overflow: hidden; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; } .sheen-effect::after { content: ''; position: absolute; top: -50%; left: -60%; width: 30%; height: 200%; background: linear-gradient( 90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0) 100% ); transform: rotate(25deg) translateZ(0); transition: left 0.75s ease; pointer-events: none !important; will-change: left; } .sheen-effect:hover::after { left: 130%; } /* Marquee Animations Anti-Flicker (GPU Accelerated) */ @keyframes marquee-left { 0% { transform: translate3d(0, 0, 0); } 100% { transform: translate3d(-50%, 0, 0); } } @keyframes marquee-right { 0% { transform: translate3d(-50%, 0, 0); } 100% { transform: translate3d(0, 0, 0); } } .animate-marquee-left, .animate-marquee-right { display: flex; width: max-content; will-change: transform; -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; } .animate-marquee-left { animation: marquee-left 85s linear infinite; } .animate-marquee-right { animation: marquee-right 85s linear infinite; } .animate-marquee-left:hover, .animate-marquee-right:hover { animation-play-state: paused; } /* Keyframes */ @keyframes float-slow { 0%, 100% { transform: translate3d(0, 0, 0); } 50% { transform: translate3d(0, -10px, 0); } } .animate-float { animation: float-slow 6s ease-in-out infinite; } @keyframes pulse-soft { 0%, 100% { opacity: 0.6; transform: scale(1); } 50% { opacity: 1; transform: scale(1.03); } } .animate-pulse-soft { animation: pulse-soft 3.5s ease-in-out infinite; } @keyframes scroll-down { 0% { transform: translate3d(0, -100%, 0); opacity: 0; } 50% { opacity: 1; } 100% { transform: translate3d(0, 200%, 0); opacity: 0; } } .animate-scroll-down { animation: scroll-down 1.8s cubic-bezier(0.65, 0, 0.35, 1) infinite; } /* Scrollbar */ ::-webkit-scrollbar { width: 8px; } ::-webkit-scrollbar-track { background: #F1F5F9; } ::-webkit-scrollbar-thumb { background: #CBD5E1; border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { background: #64748B; } /* Scroll Reveal Utility Asli (Motion Blur + Scale Down + Anti-Flicker GPU Layer) */ .reveal-element { transition: transform 850ms cubic-bezier(0.16, 1, 0.3, 1), opacity 850ms cubic-bezier(0.16, 1, 0.3, 1), filter 850ms cubic-bezier(0.16, 1, 0.3, 1); opacity: 0; transform: translate3d(0, 40px, 0) scale(0.97); filter: blur(12px); will-change: transform, opacity, filter; -webkit-backface-visibility: hidden; backface-visibility: hidden; } .reveal-element.revealed { opacity: 1; transform: translate3d(0, 0, 0) scale(1); filter: blur(0px); }