@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600&display=swap');

/* Basic Setup */
body { 
    font-family: 'Poppins', sans-serif; 
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    min-height: 100vh; 
    display: flex; 
    justify-content: center; 
    align-items: flex-start;
    padding: 40px 20px;
}

.card { 
    background: #ffffff; 
    padding: 40px; 
    border-radius: 25px;
    box-shadow: 0 15px 35px rgba(0,0,0,0.2);
    width: 100%; 
    max-width: 800px;
}

h2 { color: #2d3436; text-align: center; margin-bottom: 30px; font-weight: 600; }

/* Form Elements */
input, select { 
    width: 100%; padding: 14px; margin: 8px 0 20px; border: 2px solid #edf2f7; 
    border-radius: 12px; box-sizing: border-box; transition: 0.3s;
}

input:focus { border-color: #667eea; outline: none; box-shadow: 0 0 8px rgba(102, 126, 234, 0.2); }

button { 
    width: 100%; padding: 14px; background: #667eea; color: white; border: none; 
    border-radius: 12px; cursor: pointer; font-weight: 600; transition: 0.3s;
}

button:hover { background: #5a67d8; transform: translateY(-2px); box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4); }

/* Table & Buttons */
table { width: 100%; border-collapse: collapse; margin-top: 20px; }
th { background: #f8f9fa; padding: 16px; text-align: left; color: #4a5568; }
td { padding: 16px; border-bottom: 1px solid #edf2f7; color: #2d3436; }
tr:hover { background-color: #f7fafc; }

.btn-act { 
    padding: 8px 16px; border-radius: 8px; text-decoration: none; font-size: 13px; 
    font-weight: 500; transition: 0.3s; display: inline-block; margin-right: 5px;
}
.edit { background: #f6e05e; color: #744210; }
.edit:hover { background: #ecc94b; }
.hapus { background: #f56565; color: #fff; }
.hapus:hover { background: #e53e3e; }

/* Notifikasi (Alerts) yang Sudah Disederhanakan */
.alert { 
    padding: 15px; 
    border-radius: 12px; 
    text-align: center; 
    font-weight: 500; 
    border: 1px solid;
    width: 100%; 
    box-sizing: border-box; 
    margin-bottom: 20px;
}
.alert-success { background: #c6f6d5; color: #22543d; border-color: #9ae6b4; }
.alert-error { background: #fed7d7; color: #822727; border-color: #feb2b2; }

/* Pembayaran Button */
.btn-bayar { background:#27ae60; color:white; padding:15px 30px; border-radius:10px; text-decoration:none; font-weight:bold; display:inline-block; }
.btn-bayar:hover { background: #219150; }

/* Mobile Responsif */
@media (max-width: 600px) {
    .card { padding: 20px; border-radius: 15px; }
    h2 { font-size: 20px; }
    .btn-act { padding: 6px 10px; font-size: 11px; }
    td, th { padding: 10px; font-size: 13px; }
}