/* Tema Modern Biru Metalik */
:root { --blue-metal-primary: #2980B9; --blue-metal-dark: #1A5276; --blue-metal-light: #F4F6F9; --silver-accent: #B0BEC5; --text-dark: #17202A; }
body { background-color: var(--blue-metal-light); color: var(--text-dark); font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; margin: 0; padding: 0; }
.btn-metallic { background: linear-gradient(135deg, var(--blue-metal-primary) 0%, var(--blue-metal-dark) 100%); color: #ffffff; border: none; border-radius: 8px; padding: 12px 24px; font-weight: bold; letter-spacing: 0.5px; cursor: pointer; box-shadow: 0 4px 6px rgba(26, 82, 118, 0.3); transition: all 0.3s ease; }
.btn-metallic:hover { background: linear-gradient(135deg, var(--blue-metal-dark) 0%, #11364D 100%); box-shadow: 0 6px 12px rgba(26, 82, 118, 0.5); transform: translateY(-1px); }
.card-metallic { background: #ffffff; border-radius: 12px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08); border-top: 4px solid var(--blue-metal-primary); border-left: 1px solid var(--silver-accent); border-right: 1px solid var(--silver-accent); border-bottom: 1px solid var(--silver-accent); padding: 32px 24px; }
.form-control { width: 100%; padding: 12px; border-radius: 6px; border: 1px solid var(--silver-accent); background-color: #FAFAFA; margin-top: 8px; box-sizing: border-box; transition: border-color 0.3s ease; }
.form-control:focus { outline: none; border-color: var(--blue-metal-primary); box-shadow: 0 0 0 3px rgba(41, 128, 185, 0.2); }