#header {
	  box-shadow: 0 2px 10px rgba(0,0,0,0.5);
	  transition: background-color 0.3s ease;
	}
	</style>
	
	<style>
/* Memberikan efek halus kembali ke form control */
input { margin-bottom: 10px;}
.form-control {
    border-radius: 6px; /* Lebih halus */
    color: #212529;
    border: 1px solid #3469db;
    background-color: #fefefe;
    transition: all 0.2s ease-in-out;
}

/* Mengurangi ketajaman saat fokus */
.form-control:focus {
    color: #212529;
    background-color: #fefefe;
    border-color: #86b7fe;
    outline: 0;
    /* Efek glow yang lebih lembut khas versi 4 */
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.15); 
}
/* Mengatur style placeholder untuk semua browser */

/* Chrome, Firefox, Opera, Safari 10.1+ */
.form-control::placeholder {
    color: #595e6a; /* Abu-abu muda yang lebih halus */
    font-size: 0.9rem; /* Sedikit lebih kecil dari teks utama */
    font-style: italic; /* Memberikan kesan pembeda yang elegan */
    opacity: 0.8; /* Transparansi agar tidak menusuk mata */
    font-weight: 300; /* Menggunakan font yang lebih tipis jika tersedia */
}

/* Internet Explorer 10-11 */
.form-control:-ms-input-placeholder {
    color: #adb5bd;
    font-style: italic;
}

/* Microsoft Edge */
.form-control::-ms-input-placeholder {
    color: #adb5bd;
    font-style: italic;
}

/* Efek saat fokus: Placeholder menghilang perlahan atau berubah warna */
.form-control:focus::placeholder {
    color: #dee2e6;
    transition: color 0.3s ease;
}
/* 1. Reset Style Dasar Tombol agar Lebih Halus */
code {
    /* --- Penambahan Utama --- */
    display: block;          /* Membuatnya memenuhi lebar kontainer */
    width: 100%;             /* Memastikan lebar 100% */
    box-sizing: border-box;  /* Agar padding tidak menambah lebar total */
    word-wrap: break-word;   /* Agar teks panjang otomatis turun ke bawah */
    white-space: pre-wrap;   /* Menjaga format spasi tapi tetap bisa wrap */
    
    /* --- Style Anda --- */
    color: #fff;
    background-color: #FF0033;
    padding: 10px;           /* Padding diperbesar agar lebih rapi sebagai blok */
    border: 1px solid #0000FF; /* Tambahkan 'solid' agar garis muncul */
    font-size: 1.0rem;
    opacity: 0.8;
    font-weight: 300;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    border-radius: 4px;      /* Opsional: agar sudut sedikit melengkung */
}
.btn {
    border-radius: 8px; /* Sudut lebih membulat dan modern */
    padding: 6px 12px;
    font-weight: 500;
    letter-spacing: 0.3px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); /* Transisi lebih smooth */
    border: none;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); /* Bayangan tipis agar tidak flat */
}

/* 2. Efek Hover: Sedikit Mengangkat Tombol */
.btn:hover {
    transform: translateY(-1px); /* Efek melayang saat kursor di atasnya */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.12); /* Bayangan menebal saat hover */
}

/* 3. Efek Klik (Active) */
.btn:active {
    transform: translateY(0);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

/* 4. Custom Warna Tombol (Contoh Primary) */
.btn-primary {
    background: linear-gradient(145deg, #0d6efd, #0a58ca); /* Gradien halus agar tidak kaku */
    color: #fff;
}

.btn-primary:hover {
    background: linear-gradient(145deg, #0b5ed7, #084298);
}

/* 5. Style Khusus Tombol Outline */
.btn-outline-primary {
    border: 1.5px solid #0d6efd;
    background-color: transparent;
}

.btn-outline-primary:hover {
    background-color: #0d6efd;
    color: #fff;
}

/* 6. Hilangkan Outline Fokus yang Kasar */
.btn:focus, .btn.focus {
    outline: none;
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25); /* Glow fokus yang lebih lembut */
}