/* GLOBAL RESET & BODY */
* { margin:0; padding:0; box-sizing:border-box; font-family:'Poppins', sans-serif; }
body {
  background: linear-gradient(135deg,#e0f7fa,#f5f5f5);
  color:#333;
  line-height:1.5;
  min-height:100vh;
  padding-bottom:30px;
  transition: background 0.5s ease;
}

/* HEADER */
header { text-align:center; padding:30px 10px; animation:fadeInDown 1s ease forwards; }
header h1 { font-size:2.2rem; color:#007bff; margin-bottom:8px; }
header p { font-size:1rem; color:#555; }

/* SECTIONS */
section {
  max-width:600px;
  margin:20px auto;
  padding:25px 20px;
  background:#fff;
  border-radius:20px;
  box-shadow:0 10px 25px rgba(0,0,0,0.08);
  transition: transform 0.3s, box-shadow 0.3s;
  opacity:0; animation:fadeInUp 1s forwards;
}
section:nth-child(1) { animation-delay:0.2s; }
section:nth-child(2) { animation-delay:0.4s; }
section:nth-child(3) { animation-delay:0.6s; }
section:nth-child(4) { animation-delay:0.8s; }
section:nth-child(5) { animation-delay:1s; }
section:hover { transform: translateY(-3px); box-shadow:0 15px 35px rgba(0,0,0,0.12); }

h2 { margin-bottom:20px; color:#007bff; font-size:1.5rem; text-align:center; }

/* FORM */
form { display:flex; flex-direction:column; gap:12px; }
input, select { padding:12px; border-radius:12px; border:1px solid #ccc; font-size:1rem; width:100%; transition: all 0.3s; }
input:focus, select:focus { border-color:#007bff; box-shadow:0 0 12px rgba(0,123,255,0.2); outline:none; }
button { padding:14px; background:linear-gradient(90deg,#007bff,#00c6ff); color:#fff; border:none; border-radius:12px; cursor:pointer; font-weight:700; font-size:1rem; transition: all 0.4s; box-shadow:0 6px 12px rgba(0,0,0,0.12); }
button:hover { transform: scale(1.08) rotate(-1deg); box-shadow:0 10px 20px rgba(0,0,0,0.18); }

/* FILTER */
#filterSection { display:flex; justify-content:center; align-items:center; gap:12px; margin-bottom:20px; flex-wrap:wrap; }
#filterSection select { padding:12px; border-radius:12px; border:1px solid #ccc; width:160px; transition: all 0.3s; }
#filterSection select:focus { border-color:#007bff; box-shadow:0 0 8px rgba(0,123,255,0.2); }

/* LIST TRANSAKSI */
#listTransaksi { list-style:none; margin-top:10px; max-height:250px; overflow-y:auto; padding-right:5px; }
#listTransaksi li {
  display:flex; justify-content:space-between; align-items:center;
  padding:12px 16px;
  border-radius:12px;
  margin-bottom:10px;
  background:linear-gradient(90deg,#f0f8ff,#e6f7ff);
  border-left:5px solid #007bff;
  transition: all 0.4s ease;
}
#listTransaksi li:hover { transform: translateX(6px); box-shadow:0 8px 20px rgba(0,0,0,0.12); }

/* SUMMARY */
.summary { display:flex; justify-content:space-around; flex-wrap:wrap; gap:10px; margin-top:15px; animation:pulse 2s infinite; }
.summary span { min-width:130px; text-align:center; font-weight:700; padding:8px 12px; border-radius:12px; color:#fff; text-shadow:1px 1px 2px rgba(0,0,0,0.2); }
#totalPemasukan { background:linear-gradient(90deg,#28a745,#6be37a); }
#totalPengeluaran { background:linear-gradient(90deg,#dc3545,#ff6f61); }
#saldo { background:linear-gradient(90deg,#007bff,#00c6ff); }

/* CHARTS */
canvas { max-width:100%; height:230px !important; border-radius:15px; box-shadow:0 10px 25px rgba(0,0,0,0.1); margin-top:15px; animation:slideIn 1s ease forwards; }

/* DASHBOARD */
#dashboardSection p { text-align:center; margin-bottom:18px; font-weight:500; font-size:1.05rem; }

/* ANIMASI */
@keyframes fadeInUp { from { opacity:0; transform:translateY(20px); } to { opacity:1; transform:translateY(0); } }
@keyframes fadeInDown { from { opacity:0; transform:translateY(-20px); } to { opacity:1; transform:translateY(0); } }
@keyframes slideIn { from { opacity:0; transform:translateX(-30px); } to { opacity:1; transform:translateX(0); } }
@keyframes pulse { 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.05); } }

/* RESPONSIVE */
@media(max-width:480px){
  section { margin:12px; padding:18px; }
  input, select, button { font-size:0.95rem; padding:12px; }
  h2 { font-size:1.4rem; }
  #filterSection { flex-direction:column; gap:10px; }
  .summary { flex-direction:column; gap:10px; }
  #listTransaksi li { flex-direction:column; align-items:flex-start; }
}