body { background-color: #f8fafc; }

.card-modern { border-radius: 20px; border: none; box-shadow: 0 15px 35px rgba(0,0,0,0.05); overflow: hidden; }
.card-header-modern { background: linear-gradient(135deg, #1e40af 0%, #3b82f6 100%); color: white; padding: 25px 30px; border-bottom: none; }
.form-label { font-weight: 600; color: #334155; font-size: 0.95rem; margin-bottom: 8px; }
.form-control, .form-select { border-radius: 12px; padding: 12px 15px; border: 1px solid #cbd5e1; background-color: #f8fafc; transition: all 0.3s ease; }
.form-control:focus, .form-select:focus { border-color: #3b82f6; box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.1); background-color: #ffffff; }

.upload-zone { border: 2px dashed #cbd5e1; border-radius: 16px; padding: 30px 20px; text-align: center; background-color: #f8fafc; transition: all 0.3s ease; position: relative; cursor: pointer; }
.upload-zone:hover, .upload-zone.dragover { border-color: #3b82f6; background-color: #eff6ff; }
.upload-zone i.icon-utama { font-size: 2.5rem; color: #94a3b8; transition: all 0.3s ease; }
.upload-zone:hover i.icon-utama, .upload-zone.dragover i.icon-utama { color: #3b82f6; transform: translateY(-5px); }
.upload-zone input[type="file"] { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; z-index: 10; }
.file-name-display { margin-top: 12px; font-size: 0.85rem; font-weight: 700; color: #1e293b; word-break: break-all; }
.upload-zone.success { border-color: #10b981; background-color: #f0fdf4; border-style: solid; }

.stepper-wrapper { display: flex; justify-content: space-between; position: relative; margin-bottom: 40px; padding: 0 10px; }
.stepper-wrapper::before { content: ''; position: absolute; top: 20px; left: 10%; width: 80%; height: 3px; background: #e2e8f0; z-index: 0; }
.stepper-item { position: relative; display: flex; flex-direction: column; align-items: center; flex: 1; z-index: 1; cursor: pointer; }
.step-counter { width: 45px; height: 45px; border-radius: 50%; background: #ffffff; border: 3px solid #e2e8f0; color: #94a3b8; display: flex; align-items: center; justify-content: center; font-weight: bold; font-size: 1.2rem; margin-bottom: 10px; transition: all 0.4s ease; }
.step-name { font-size: 0.85rem; font-weight: 700; color: #94a3b8; text-transform: uppercase; letter-spacing: 0.5px; text-align: center; transition: all 0.4s ease;}

.stepper-item:hover .step-counter { transform: scale(1.1); box-shadow: 0 4px 10px rgba(0,0,0,0.1); }
.stepper-item.active .step-counter { border-color: #3b82f6; background: #3b82f6; color: white; box-shadow: 0 0 0 6px rgba(59, 130, 246, 0.15); }
.stepper-item.active .step-name { color: #3b82f6; }
.stepper-item.completed .step-counter { border-color: #10b981; background: #10b981; color: white; }
.stepper-item.completed .step-name { color: #10b981; }

.wizard-step { display: none; animation: fadeInRight 0.5s ease; }
.wizard-step.active { display: block; }
@keyframes fadeInRight { from { opacity: 0; transform: translateX(30px); } to { opacity: 1; transform: translateX(0); } }

.btn-wizard { border-radius: 50px; font-weight: 600; padding: 12px 30px; letter-spacing: 0.5px; transition: all 0.3s; }
.group-header { background: #f1f5f9; padding: 10px 20px; border-radius: 10px; margin-bottom: 20px; font-weight: 700; color: #1e293b; display: flex; align-items: center; }

/* Area khusus Dynamic Serial biar rapi kalau jumlahnya banyak */
.serial-container { max-height: 220px; overflow-y: auto; padding-right: 5px; }
/* Mempercantik scrollbar pada serial container */
.serial-container::-webkit-scrollbar { width: 6px; }
.serial-container::-webkit-scrollbar-track { background: #f1f5f9; border-radius: 10px; }
.serial-container::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 10px; }
.serial-container::-webkit-scrollbar-thumb:hover { background: #94a3b8; }