/* style.css — elegan emas & hitam, responsif */
:root{
  --emas: #d4af37;
  --hitam: #111;
  --bg: #fafafa;
  --card-bg: #121212;
  --text-light: #ffffff;
}
*{box-sizing:border-box;font-family:'Poppins',sans-serif}
body{margin:0;background:linear-gradient(180deg,#fff 0%, #f7f7f7 100%);color:var(--hitam)}
.container{max-width:960px;margin:40px auto;padding:16px}
.card{background:linear-gradient(180deg, #fff, #fff);padding:28px;border-radius:12px;box-shadow:0 6px 18px rgba(0,0,0,0.08)}
.card h1{margin-top:0;color:var(--hitam)}
.lead{color:#333}
.form label{display:block;margin-bottom:12px}
.form input[type='text'], .form input[type='email'], .form input[type='tel'], .form input[type='date'], .form select, .form textarea, .form input[type='search']{width:100%;padding:10px;border:1px solid #ddd;border-radius:8px}
.grid{display:grid;grid-template-columns:1fr;gap:12px}
.radio-group{display:flex;gap:12px;align-items:center}
.checkbox{display:flex;align-items:center;gap:8px}
.actions{margin-top:14px}
.btn{background:var(--emas);border:none;padding:10px 18px;border-radius:8px;color:#111;font-weight:600;cursor:pointer;text-decoration:none}
.btn.ghost{background:transparent;border:1px solid #ddd}
.card.success{border-left:6px solid var(--emas)}
.table-wrap{overflow:auto;margin-top:12px}
.table{width:100%;border-collapse:collapse}
.table th, .table td{padding:10px;border-bottom:1px solid #eee;text-align:left}
.topbar{display:flex;justify-content:space-between;align-items:center;gap:12px}
.search input[type=search]{padding:8px;border:1px solid #ddd;border-radius:8px}
.error{color:#c00;padding:8px 0}
@media(min-width:700px){
  .grid{grid-template-columns:repeat(2,1fr)}
  .radio-group{grid-column:span 2}
}
@media(max-width:699px){
  .container{padding:10px;margin:16px}
}