/* style.css */ body { background: linear-gradient(135deg, #4b0082, #4169e1); /* Ungu gelap ke biru medium */ font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; /* Font yang modern dan bersih */ } .bg-dark.bg-opacity-75 { /* Menyesuaikan opasitas untuk navbar dan footer agar terlihat transparan */ background-color: rgba(33, 37, 41, 0.75) !important; } .hero-section { min-height: 70vh; /* Tinggi minimal untuk hero section */ background: rgba(0, 0, 0, 0.2); /* Sedikit overlay gelap untuk teks */ } .hero-section h1 { font-size: clamp(2.5rem, 5vw, 4.5rem); /* Ukuran font responsif */ line-height: 1.2; } /* Custom placeholder color for search input */ .hero-section .form-control::placeholder { color: rgba(255, 255, 255, 0.7) !important; } .hero-section .form-control { border: 1px solid rgba(255, 255, 255, 0.3) !important; /* Border yang sedikit transparan */ } .hero-section .form-control:focus { box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25); /* Fokus box-shadow default Bootstrap */ } .app-card { transition: transform 0.3s ease, box-shadow 0.3s ease; border-radius: 1rem; /* Sudut kartu yang lebih membulat */ background-color: rgba(0, 0, 0, 0.4) !important; /* Background kartu lebih gelap dan transparan */ backdrop-filter: blur(8px); /* Efek blur untuk glassmorphism */ } .app-card:hover { transform: translateY(-5px); /* Sedikit naik saat di-hover */ box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.3) !important; /* Bayangan lebih kuat saat di-hover */ } /* Optional: Animasi saat scroll ke elemen */ /* Membutuhkan Animate.css, tambahkan link CDN-nya di jika ingin pakai ini */ /* */ /* Jika pakai animate.css, kelas seperti animate__animated animate__fadeIn bisa digunakan */ /* Custom Border for card-body divider */ .app-card .border-top { border-color: rgba(255, 255, 255, 0.15) !important; /* Border yang lebih terang */ }