{{-- FITUR SECTION --}}
<section id="fitur" class="py-24 bg-white relative overflow-hidden">
    {{-- Decorative --}}
    <div class="absolute top-0 right-0 w-96 h-96 bg-primary-50 rounded-full blur-3xl -translate-y-1/2 translate-x-1/2"></div>

    <div class="max-w-7xl mx-auto px-6 relative z-10">

        <div class="text-center mb-16">
            <div class="inline-flex items-center gap-2 px-4 py-2 bg-primary-50 rounded-full mb-6">
                <i class="fas fa-star text-primary-500 text-xs"></i>
                <span class="text-xs font-semibold text-primary-600 tracking-wide">Fitur Unggulan</span>
            </div>
            <h2 class="text-3xl md:text-4xl font-black text-gray-900 tracking-tight">
                Kenapa Memilih <span class="gradient-text">Sarakata</span>?
            </h2>
            <p class="mt-4 text-gray-500 max-w-2xl mx-auto leading-relaxed">
                Dirancang untuk kemudahan pengelolaan perpustakaan dengan teknologi modern dan antarmuka intuitif.
            </p>
        </div>

        <div class="grid md:grid-cols-3 gap-8">

            {{-- Fitur 1 --}}
            <div class="card-hover bg-gradient-to-br from-white to-primary-50/50 p-8 rounded-3xl border border-gray-100 shadow-sm relative overflow-hidden group">
                <div class="absolute top-0 right-0 w-32 h-32 bg-primary-100/30 rounded-full blur-2xl translate-x-8 -translate-y-8 group-hover:bg-primary-200/40 transition-colors"></div>
                <div class="w-14 h-14 bg-gradient-to-br from-primary-500 to-primary-700 rounded-2xl flex items-center justify-center shadow-lg shadow-primary-200 mb-6 relative z-10">
                    <i class="fas fa-book text-white text-xl"></i>
                </div>
                <h3 class="font-bold text-lg mb-3 text-gray-900 relative z-10">Manajemen Buku</h3>
                <p class="text-gray-500 text-sm leading-relaxed relative z-10">
                    Kelola data buku dengan mudah — stok, pengarang, penerbit, dan kategori dalam satu dashboard terintegrasi.
                </p>
            </div>

            {{-- Fitur 2 --}}
            <div class="card-hover bg-gradient-to-br from-white to-accent-50/50 p-8 rounded-3xl border border-gray-100 shadow-sm relative overflow-hidden group">
                <div class="absolute top-0 right-0 w-32 h-32 bg-accent-100/30 rounded-full blur-2xl translate-x-8 -translate-y-8 group-hover:bg-accent-200/40 transition-colors"></div>
                <div class="w-14 h-14 bg-gradient-to-br from-accent-500 to-accent-600 rounded-2xl flex items-center justify-center shadow-lg shadow-accent-200 mb-6 relative z-10">
                    <i class="fas fa-users text-white text-xl"></i>
                </div>
                <h3 class="font-bold text-lg mb-3 text-gray-900 relative z-10">Data Anggota</h3>
                <p class="text-gray-500 text-sm leading-relaxed relative z-10">
                    Sistem keanggotaan terstruktur dengan profil lengkap, pencarian cepat, dan manajemen data yang aman.
                </p>
            </div>

            {{-- Fitur 3 --}}
            <div class="card-hover bg-gradient-to-br from-white to-purple-50/50 p-8 rounded-3xl border border-gray-100 shadow-sm relative overflow-hidden group">
                <div class="absolute top-0 right-0 w-32 h-32 bg-purple-100/30 rounded-full blur-2xl translate-x-8 -translate-y-8 group-hover:bg-purple-200/40 transition-colors"></div>
                <div class="w-14 h-14 bg-gradient-to-br from-purple-500 to-purple-700 rounded-2xl flex items-center justify-center shadow-lg shadow-purple-200 mb-6 relative z-10">
                    <i class="fas fa-exchange-alt text-white text-xl"></i>
                </div>
                <h3 class="font-bold text-lg mb-3 text-gray-900 relative z-10">Peminjaman & Pengembalian</h3>
                <p class="text-gray-500 text-sm leading-relaxed relative z-10">
                    Proses peminjaman dan pengembalian buku tercatat otomatis dengan notifikasi dan tracking real-time.
                </p>
            </div>

        </div>
    </div>
</section>