* { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Segoe UI', Arial, sans-serif; }
body { background: linear-gradient(135deg, #e0f2f1 0%, #b2dfdb 100%); min-height: 100vh; display: flex; justify-content: center; align-items: center; padding: 20px; }
.container { background: white; padding: 30px; border-radius: 20px; box-shadow: 0 10px 30px rgba(0,77,64,0.1); text-align: center; width: 100%; max-width: 950px; }
h1 { color: #4d1800; font-size: 2rem; margin-bottom: 20px; text-transform: uppercase; }

.grid-poli { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; margin: 20px 0; }
.card-poli { background: #f4fbf9; padding: 25px; border-radius: 15px; border: 2px solid #80cbc4; box-shadow: 0 4px 10px rgba(0,0,0,0.02); transition: 0.2s; position: relative; }
.card-poli:hover { transform: translateY(-3px); box-shadow: 0 6px 15px rgba(0,77,64,0.1); }

.nomor-besar { font-size: 5rem; font-weight: bold; color: #00796b; background: #e0f2f1; padding: 15px; border-radius: 12px; margin: 10px 0; }
.loket-label { font-size: 1.2rem; font-weight: bold; color: #e53935; background: #ffebee; padding: 5px 10px; border-radius: 8px; display: inline-block; margin-bottom: 10px; }

.btn-menu { display: block; width: 100%; background: linear-gradient(to right, #00897b, #00695c); color: white; border: none; padding: 14px; font-size: 1.1rem; font-weight: bold; border-radius: 50px; cursor: pointer; text-decoration: none; margin-bottom: 15px; text-align: center; }
.btn-menu:hover { background: #004d40; }
.btn-aksi { background: linear-gradient(to right, #00b4db, #0083b0); border-radius: 10px; padding: 12px; width: 100%; color: white; font-weight: bold; border: none; cursor: pointer; font-size: 1rem; }
.btn-panggil { background: linear-gradient(to right, #e53935, #b71c1c); margin-top: 10px; }
.btn-kembali { display: inline-block; margin-top: 15px; color: #004d40; text-decoration: none; font-weight: bold; }

.form-group { text-align: left; margin-bottom: 15px; }
.form-group label { display: block; font-weight: bold; color: #004d40; margin-bottom: 5px; }
.form-control { width: 100%; padding: 10px 15px; border: 2px solid #80cbc4; border-radius: 8px; font-size: 1rem; outline: none; }

.btn-grup-mini { display: flex; gap: 10px; margin-top: 10px; }
.btn-mini { flex: 1; padding: 6px; font-size: 0.8rem; border-radius: 6px; border: none; cursor: pointer; font-weight: bold; color: white; }
.btn-edit { background: #ffa000; }
.btn-reset { background: #757575; }

.modal-bg { display: none; position: fixed; top:0; left:0; width:100%; height:100%; background: rgba(0,0,0,0.5); justify-content: center; align-items: center; z-index: 999; }
.modal-box { background: white; padding: 25px; border-radius: 12px; width: 90%; max-width: 400px; text-align: left; box-shadow: 0 4px 20px rgba(0,0,0,0.2); }