Solusi Kurs & Pembayaran Digital Terpercaya

<!-- STYLE 1: Clean Light Minimalist (Tailwind CSS) --> <header class="bg-white/95 backdrop-blur-md sticky top-0 z-50 border-b border-slate-200/80 shadow-sm"> <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> <div class="flex items-center justify-between h-20"> <a href="/" class="flex items-center gap-3 shrink-0"> <div class="w-10 h-10 rounded-xl bg-[#0C2F31] text-[#9EE96D] flex items-center justify-center font-black text-xl">N</div> <span class="text-xl font-extrabold text-[#0C2F31]">NexSaldo</span> </a> <nav class="hidden lg:flex items-center gap-1 text-sm font-semibold text-slate-600"> <a href="/" class="px-3.5 py-2 rounded-xl text-[#0C2F31] bg-[#0C2F31]/5 font-bold">Beranda</a> <a href="/order" class="px-3.5 py-2 rounded-xl hover:bg-slate-100">Layanan</a> <a href="/simulasi" class="px-3.5 py-2 rounded-xl hover:bg-slate-100">Simulasi Kurs</a> <a href="/testimonial" class="px-3.5 py-2 rounded-xl hover:bg-slate-100">Testimoni</a> </nav> <div class="flex items-center gap-3"> <div class="hidden xl:flex items-center gap-2 px-3 py-1.5 rounded-full bg-slate-100 text-xs"> <span class="w-2 h-2 rounded-full bg-emerald-500 animate-pulse"></span> <span class="text-slate-500">Kurs:</span> <strong class="text-[#0C2F31]">Rp 15.800</strong> </div> <a href="/order" class="text-sm font-extrabold text-[#0C2F31] bg-[#9EE96D] hover:bg-[#8DE459] px-5 py-2.5 rounded-xl shadow-sm transition">Order Sekarang</a> </div> </div> </div> </header>

<!-- STYLE 2: Signature Dark Teal Glass (Tailwind CSS) --> <header class="bg-[#0C2F31]/95 backdrop-blur-xl sticky top-0 z-50 border-b border-white/10 shadow-xl"> <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> <div class="flex items-center justify-between h-20"> <a href="/" class="flex items-center gap-3"> <div class="w-10 h-10 rounded-xl bg-[#103B3E] border border-[#9EE96D]/40 text-[#9EE96D] flex items-center justify-center font-black text-xl">N</div> <span class="text-xl font-extrabold text-white">NexSaldo</span> </a> <nav class="hidden lg:flex items-center gap-1.5 text-sm font-semibold text-slate-300"> <a href="/" class="px-3.5 py-2 rounded-xl text-white bg-white/10 font-bold">Beranda</a> <a href="/order" class="px-3.5 py-2 rounded-xl hover:text-white hover:bg-white/5">Layanan</a> <a href="/simulasi" class="px-3.5 py-2 rounded-xl hover:text-white hover:bg-white/5">Simulasi Kurs</a> <a href="/testimonial" class="px-3.5 py-2 rounded-xl hover:text-white hover:bg-white/5">Testimoni</a> </nav> <div class="flex items-center gap-3"> <div class="hidden xl:flex items-center gap-2 px-3.5 py-1.5 rounded-full bg-[#103B3E] border border-[#9EE96D]/30 text-xs text-[#9EE96D]"> <span class="w-2 h-2 rounded-full bg-[#9EE96D] animate-pulse"></span> <span>Kurs Live: Rp 15.800</span> </div> <a href="/order" class="text-sm font-extrabold text-[#0C2F31] bg-[#9EE96D] hover:bg-[#8DE459] px-5 py-2.5 rounded-xl shadow-[0_0_20px_rgba(158,233,109,0.3)] transition">Order Sekarang</a> </div> </div> </div> </header>

<!-- STYLE 3: Floating Island Capsule (Tailwind CSS) --> <header class="fixed top-4 inset-x-0 mx-auto max-w-6xl z-50 px-4"> <div class="bg-white/90 backdrop-blur-xl border border-slate-200/90 rounded-full shadow-[0_10px_35px_rgba(12,47,49,0.08)] px-5 py-3 flex items-center justify-between"> <a href="/" class="flex items-center gap-2 font-black text-lg text-[#0C2F31]"> <span class="w-8 h-8 rounded-full bg-[#0C2F31] text-[#9EE96D] flex items-center justify-center text-sm">N</span> <span>NexSaldo</span> </a> <nav class="hidden md:flex items-center gap-1 bg-slate-100/80 p-1 rounded-full text-xs font-bold text-slate-600"> <a href="/" class="px-4 py-2 rounded-full bg-white text-[#0C2F31] shadow-xs">Beranda</a> <a href="/order?service=topup" class="px-3.5 py-2 rounded-full hover:text-[#0C2F31]">Top Up</a> <a href="/order?service=convert" class="px-3.5 py-2 rounded-full hover:text-[#0C2F31]">Convert</a> <a href="/simulasi" class="px-3.5 py-2 rounded-full hover:text-[#0C2F31]">Simulasi</a> <a href="/testimonial" class="px-3.5 py-2 rounded-full hover:text-[#0C2F31]">Testimoni</a> </nav> <a href="/order" class="text-xs font-black text-[#0C2F31] bg-[#9EE96D] hover:bg-[#8DE459] px-5 py-2.5 rounded-full shadow-sm transition">Mulai Transaksi</a> </div> </header>

<!-- STYLE 4: Double-Deck Financial Pro Ticker (Tailwind CSS) --> <header class="sticky top-0 z-50 shadow-md"> <div class="bg-[#082022] text-slate-300 text-xs py-2 px-4 border-b border-white/10"> <div class="max-w-7xl mx-auto flex items-center justify-between gap-4"> <div class="flex items-center gap-4 overflow-x-auto whitespace-nowrap"> <span class="font-bold text-white flex items-center gap-1"><span class="w-2 h-2 rounded-full bg-[#9EE96D] animate-pulse"></span>LIVE RATES:</span> <span>Beli: <strong class="text-[#9EE96D]">Rp 15.800</strong></span> <span>Convert (≥ $100): <strong class="text-[#9EE96D]">Rp 15.800</strong></span> </div> <span class="hidden sm:inline text-slate-400">Jam Kerja: 08:00 - 22:00 WIB</span> </div> </div> <div class="bg-white/95 backdrop-blur-md border-b border-slate-200"> <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 flex items-center justify-between h-18 py-3"> <a href="/" class="flex items-center gap-3 font-extrabold text-xl text-[#0C2F31]"> <div class="w-10 h-10 rounded-xl bg-[#0C2F31] text-[#9EE96D] flex items-center justify-center">N</div> <span>NexSaldo</span> </a> <nav class="hidden lg:flex items-center gap-2 text-sm font-bold text-slate-600"> <a href="/" class="px-3.5 py-2 rounded-xl text-[#0C2F31] bg-[#0C2F31]/5">Beranda</a> <a href="/order" class="px-3.5 py-2 rounded-xl hover:bg-slate-100">Layanan</a> <a href="/simulasi" class="px-3.5 py-2 rounded-xl hover:bg-slate-100">Simulasi</a> <a href="/testimonial" class="px-3.5 py-2 rounded-xl hover:bg-slate-100">Testimoni</a> </nav> <a href="/order" class="text-sm font-extrabold text-white bg-[#0C2F31] px-5 py-2.5 rounded-xl shadow-md">Mulai Sekarang</a> </div> </div> </header>