body { background-color: #373737; font-family: Arial, sans-serif; margin: 0; padding: 0; padding-top: 70px; } @media (min-width: 768px) { .dynamic-island-navbar { width: 80% !important; /* Lebar navbar */ margin-top: 1rem !important; /* Jarak dari atas */ box-shadow: 0 8px 16px rgba(234, 234, 234, 0.6); /* Menambahkan bayangan */ /* Cara menengahkan elemen dengan lebar spesifik */ left: 10% !important; right: 10% !important; border-radius: 0.5rem !important; /* Membuat sudut melengkung */ } } .card { box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Menambahkan bayangan */ background-color: grey; color: white; } .carousel-inner img { max-height: 50vh; /* Membatasi tinggi gambar */ object-fit: cover; /* Memastikan gambar mengisi area tanpa distorsi */ border-radius: 10px; /* Membuat sudut gambar melengkung */ margin: auto; /* Memusatkan gambar */ display: block; /* Memastikan gambar adalah elemen blok */ } .accordion-item, .accordion-button { box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Menambahkan bayangan */ background-color: grey; color: white; } /* Di dalam style.css */ .form-control { background-color: rgba( 255, 255, 255, 0.1 ); /* Warna latar belakang transparan */ } .form-control:focus { background-color: rgba( 255, 255, 255, 0.2 ); /* Warna latar belakang saat fokus */ color: white; /* Warna teks putih */ box-shadow: 0 0 5px rgba(255, 255, 255, 0.5); /* Efek bayangan saat fokus */ } /* ========================================= */ /* =========== LIGHT MODE STYLES =========== */ /* ========================================= */ /* Selector ini akan aktif jika punya atribut data-bs-theme="light" */ [data-bs-theme="light"] { /* Background utama */ body { background-color: #f8f9fa; /* Warna abu-abu sangat terang */ } /* Teks dan judul */ .text-white, [data-bs-theme="light"] .section-title, [data-bs-theme="light"] h2 { color: #212529 !important; /* Warna hitam */ } /* Kartu */ .card { background-color: #ffffff; /* Warna putih */ color: #212529; /* Warna hitam */ } /* Tombol sosial media di dalam kartu */ .card .btn-outline-secondary svg { fill: #212529; /* Warna ikon jadi hitam */ } /* Accordion */ .accordion-item, .accordion-button { background-color: #ffffff; color: #212529; } .accordion-button::after { filter: invert(1); /* Membalik warna panah accordion */ } /* Tombol Sidebar */ .btn-outline-dark svg { fill: #212529; } /* Section About & Hero */ .bg-dark { background-color: #e9ecef !important; /* Ganti bg gelap jadi abu-abu */ color: #212529 !important; /* Ganti teks terang jadi gelap */ } /* Footer */ footer.bg-dark { background-color: #343a40 !important; /* Footer tetap sedikit gelap */ color: #f8f9fa !important; } /* TAMBAHKAN ATURAN BARU INI */ .dynamic-island-navbar { /* Ganti background navbar menjadi terang */ background-color: #f8f9fa !important; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.6) !important; /* Ubah bayangan agar lebih subtle */ } /* Ganti warna brand, link, dan ikon di dalam navbar menjadi gelap */ .dynamic-island-navbar .navbar-brand, .dynamic-island-navbar .nav-link { color: #212529 !important; /* Warna teks hitam */ } /* Ganti warna ikon hamburger (toggler) menjadi gelap */ .dynamic-island-navbar .navbar-toggler-icon { filter: invert(1); } .form-control:focus { background-color: rgba(0, 0, 0, 0.1); /* Warna latar belakang saat fokus */ color: #212529; /* Warna teks hitam */ box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); /* Efek bayangan saat fokus */ } }