
    body { font-family: Arial, sans-serif; margin: 0; padding: 0; background: #f5f5f5;}
    .wrap { max-width: 700px; margin: 0 auto; padding: 16px; }
    .form-box { background: #fff; padding: 20px 16px 16px 16px; border-radius: 10px; box-shadow: 0 2px 8px rgba(0,0,0,0.08); }
    .hasil-box { background: #fff; margin-top: 20px; padding: 18px 8px 8px 8px; border-radius: 10px; box-shadow: 0 2px 8px rgba(0,0,0,0.08); }
    table { border-collapse: collapse; width: 100%; font-size: 1em; margin-bottom: 16px;}
    td { border: 1px solid #ccc; padding: 8px; }
    .bunga { margin:20px 0; font-size:1.5em; font-weight:bold; text-align:center; }
    .btn { font-size:1.1em; height:48px; width:100%; margin:14px 0; border-radius:8px; border:none; background:#4CAF50; color:white; }
    .btn-pelunasan { background:#E91E63; }
    a { text-decoration:none; color:#333; }
    .notfound { color:red; font-size:1.2em; text-align:center; margin-top:18px;}
    .sukses { color:green; font-size:1.1em; text-align:center; }
    input[type="text"] {
      font-size: 1.1em; height: 44px; width: 100%; margin: 10px 0 18px 0; border-radius:7px; border:1px solid #ccc; padding: 0 10px;
    }
    .img-box { text-align:center; margin-top:12px; }
    .img-box img { max-width:100%; height:auto; border-radius:8px; box-shadow:0 2px 8px rgba(0,0,0,0.12); display:block; margin:0 auto; }
    small.note { display:block; text-align:center; color:#555; margin-top:6px; }
    @media (min-width:600px) {
      .wrap { max-width: 900px; }
      .form-box, .hasil-box { padding: 28px 32px 24px 32px; }
      table { font-size: 1.1em; }
      .bunga { font-size:2em; }
    }
  