.pengaduan-section {

    padding: 60px 0;

    font-family: 'Rubik', sans-serif;

  font-optical-sizing: auto;

  font-weight: bolder;

  font-style: normal;

  background-color: #fbfaf8;

  }

  .pengaduan-card {

    background: #fff;

    border-radius: 8px;

    box-shadow: 0 5px 25px rgba(0,0,0,0.08);

    padding: 40px;

    max-width: 800px;

    margin: 0 auto;

  }

  .pengaduan-card h2 {

    font-weight: 700;

    color: #222;

    margin-bottom: 6px;

  }

  .pengaduan-card h2::after {

    content: "";

    display: block;

    width: 60px;

    height: 3px;

    background: #18d26e;

    margin-top: 10px;

  }

  .pengaduan-card p.subtitle {

    color: #777;

    margin-bottom: 30px;

    margin-top: 20px;

    font-weight: normal;

  }

  .form-label {

    font-weight: 600;

    color: #333;

    font-size: 14px;

  }

  .form-control, .form-select {

    border-radius: 6px;

    border: 1px solid #ddd;

    padding: 10px 14px;

    font-size: 14px;

  }

  .form-control:focus, .form-select:focus {

    border-color: #18d26e;

    box-shadow: 0 0 0 3px rgba(24,210,110,0.15);

  }

  .btn-submit-pengaduan {

    background: #18d26e;

    border: none;

    color: #fff;

    font-weight: 600;

    padding: 12px 36px;

    border-radius: 6px;

    transition: 0.3s;

  }

  .btn-submit-pengaduan:hover {

    background: #14b862;

    color: #fff;

  }

  .form-note {

    font-size: 12px;

    color: #999;

    margin-top: 4px;

  }

  .alert-pengaduan-error {

    background: #fdecea;

    border: 1px solid #f5c2c0;

    color: #a5231b;

    padding: 15px 20px;

    border-radius: 6px;

    margin-bottom: 25px;

    font-size: 14px;

  }



  hr {

  border: none;               /* Hapus garis bawaan browser */

  border-top: 1px dotted red !important; /* Buat garis putus-putus di bagian atas */

  height: 0;                  /* Pastikan tidak ada tinggi ganda */

}



.sukses-section {

    padding: 80px 0;

    text-align: center;

    font-family: 'Rubik', sans-serif;

  }

  .sukses-icon {

    width: 80px;

    height: 80px;

    border-radius: 50%;

    background: #e9fbf1;

    color: #18d26e;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 40px;

    margin: 0 auto 20px;

  }

  .sukses-box {

    max-width: 550px;

    margin: 0 auto;

    background: #fff;

    border-radius: 8px;

    box-shadow: 0 5px 25px rgba(0,0,0,0.08);

    padding: 50px 40px;

  }

  .nomor-register {

    display: inline-block;

    background: #f1fdf6;

    border: 1px dashed #18d26e;

    color: #14b862;

    font-weight: 700;

    font-size: 20px;

    padding: 10px 25px;

    border-radius: 6px;

    margin: 20px 0;

    letter-spacing: 1px;

  }

  .btn-kembali {

    background: #18d26e;

    color: #fff;

    padding: 10px 30px;

    border-radius: 6px;

    text-decoration: none;

    font-weight: 600;

    display: inline-block;

    margin-top: 20px;

  }

  .btn-kembali:hover {

    background: #14b862;

    color: #fff;

  }

  .btn-lacak-sekunder {

    background: #fff;

    color: #18d26e;

    border: 1px solid #18d26e;

    padding: 10px 30px;

    border-radius: 6px;

    text-decoration: none;

    font-weight: 600;

    display: inline-block;

    margin-top: 20px;

    margin-left: 10px;

  }

  .btn-lacak-sekunder:hover {

    background: #f1fdf6;

    color: #18d26e;

  }

a {

  text-decoration: none;

}



.lacak-section { padding: 60px 0; font-family: 'Rubik', sans-serif; background-color:#fbfaf8 }

  .lacak-card {

    background: #fff;

    border-radius: 8px;

    box-shadow: 0 5px 25px rgba(0,0,0,0.08);

    padding: 40px;

    max-width: 750px;

    margin: 0 auto 30px;

  }

  .lacak-card h2 { font-weight: 700; color: #222; margin-bottom: 6px; }

  .lacak-card h2::after { content: ""; display: block; width: 60px; height: 3px; background: #18d26e; margin-top: 10px; }

  .lacak-card p.subtitle { color: #777; margin: 18px 0 25px; }

  .form-control { border-radius: 6px; border: 1px solid #ddd; padding: 10px 14px; font-size: 14px; }

  .form-control:focus { border-color: #18d26e; box-shadow: 0 0 0 3px rgba(24,210,110,0.15); }

  .btn-lacak { background: #18d26e; border: none; color: #fff; font-weight: 600; padding: 11px 34px; border-radius: 6px; }

  .btn-lacak:hover { background: #14b862; color: #fff; }

  .alert-lacak-error { background: #fdecea; border: 1px solid #f5c2c0; color: #a5231b; padding: 14px 18px; border-radius: 6px; margin-bottom: 20px; font-size: 14px; }



  .hasil-card { max-width: 750px; margin: 0 auto; }

  .status-besar {

    text-align: center;

    padding: 25px;

    border-radius: 8px;

    margin-bottom: 25px;

  }

  .status-besar.berjalan { background: #eef2ff; color: #4338ca; }

  .status-besar.sukses   { background: #e9fbf1; color: #14b862; }

  .status-besar.gagal    { background: #fdecea; color: #a5231b; }

  .status-besar .nomor { font-size: 13px; letter-spacing: 1px; opacity: 0.8; }

  .status-besar .label { font-size: 22px; font-weight: 700; margin-top: 4px; }



  .info-mini-label { font-size: 12px; color: #888; }

  .info-mini-value { font-size: 14px; color: #222; margin-bottom: 12px; }



  .timeline-publik { position: relative; padding-left: 0; list-style: none; margin-top: 10px; }

  .timeline-publik::before { content:''; position:absolute; left:15px; top:6px; bottom:6px; width:2px; background:#e5e9f0; }

  .timeline-publik li { position: relative; padding-left: 44px; padding-bottom: 22px; }

  .timeline-publik li:last-child { padding-bottom: 0; }

  .timeline-publik .titik {

    position: absolute; left: 0; top: 0; width: 32px; height: 32px; border-radius: 50%;

    background: #18d26e; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 14px;

  }

  .timeline-publik .waktu { font-size: 11px; color: #999; }

  .timeline-publik .ket { font-size: 13.5px; color: #333; }