/* Data Analyst Portfolio - Frontend Styles */
:root{
  --dap-blue: #0b1f54;   /* untuk judul/ikon penting */
  --dap-yellow: #ffd84d; /* untuk tombol/aksen */
  --dap-white: #ffffff;  /* background utama */
  --dap-gray: #f8f8f8;   /* background kartu/dashboard */
  --dap-text: #1c1c1c;   /* teks utama */
}

.dap-filter{
  display:flex; flex-wrap:wrap; gap:8px; margin: 8px 0 20px 0;
}
.dap-chip{
  border:none; background: var(--dap-gray); padding:8px 12px; border-radius:999px;
  font-family: Montserrat, Poppins, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, sans-serif;
  font-weight:700; cursor:pointer; transition: transform .05s ease, background .2s ease;
}
.dap-chip.is-active{ background: var(--dap-yellow); }
.dap-chip:active{ transform: scale(.98); }

.dap-grid{
  display:grid; gap:18px;
}
.dap-cols-1{ grid-template-columns: 1fr; }
.dap-cols-2{ grid-template-columns: repeat(2, 1fr); }
.dap-cols-3{ grid-template-columns: repeat(3, 1fr); }
.dap-cols-4{ grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px){
  .dap-cols-3,.dap-cols-4{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px){
  .dap-cols-2,.dap-cols-3,.dap-cols-4{ grid-template-columns: 1fr; }
}

.dap-card{
  background: var(--dap-gray);
  border-radius: 16px;
  overflow:hidden;
  box-shadow: 0 6px 16px rgba(0,0,0,.06);
  display:flex; flex-direction:column;
}
.dap-thumb img{
  width:100%; height:auto; display:block; object-fit:cover;
}
.dap-card-body{
  padding:16px 16px 18px 16px;
  color: var(--dap-text);
  background: var(--dap-white);
}
.dap-title{
  margin:0 0 8px 0;
  font-size: 1.15rem;
  line-height:1.3;
  color: var(--dap-blue);
  font-family: Montserrat, Poppins, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, sans-serif;
  font-weight:800;
}
.dap-excerpt{
  font-family: system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: .98rem; line-height:1.55; color:#333; margin-bottom:10px;
}
.dap-meta{
  font-size:.9rem; margin-bottom:6px;
}
.dap-meta-label{
  font-weight:700; color: var(--dap-blue);
  font-family: Montserrat, Poppins, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, sans-serif;
}
.dap-actions{
  margin-top: 8px; display:flex; align-items:center; gap:12px; flex-wrap:wrap;
}
.dap-btn{
  display:inline-block; text-decoration:none; padding:10px 14px; border-radius:12px;
  background: var(--dap-yellow); color:#000; font-weight:800;
  font-family: Montserrat, Poppins, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, sans-serif;
}
.dap-link{
  text-decoration:none; font-weight:700; color: var(--dap-blue);
  border-bottom:2px solid var(--dap-blue);
  padding-bottom:2px;
}