/* ===== hero ===== */
  .pt-hero {
    position: relative;
    background:
      radial-gradient(ellipse 65% 55% at 100% 0%, rgba(232,163,61,0.28), transparent 60%),
      radial-gradient(ellipse 55% 50% at 0% 100%, rgba(14,92,84,0.10), transparent 55%),
      var(--sand);
    padding: 64px 0 48px;
    border-bottom: 1px solid var(--border);
    overflow: hidden;
  }
  .pt-hero::after {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background-image:
      linear-gradient(to right, rgba(42,35,32,0.04) 1px, transparent 1px),
      linear-gradient(to bottom, rgba(42,35,32,0.04) 1px, transparent 1px);
    background-size: 72px 72px;
    mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, black, transparent 75%);
    -webkit-mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, black, transparent 75%);
  }
  .pt-hero > * { position: relative; z-index: 1; }
  .hero-copy h1 { margin: 18px 0 22px; max-width: 22ch; }
  .hero-stats {
    display: flex; gap: 12px; flex-wrap: wrap;
    margin-top: 30px;
  }
  .hero-stats .stat {
    background: var(--paper);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    padding: 14px 18px;
    display: flex; flex-direction: column; gap: 2px;
    min-width: 150px;
  }
  .hero-stats .stat .num-big {
    font-family: var(--f-mono); font-size: 22px; font-weight: 700;
    color: var(--ink); letter-spacing: -0.02em;
  }
  .hero-stats .stat .lbl {
    font-size: 12px; color: var(--ink-soft); font-weight: 500;
  }

  /* ===== filter bar ===== */
  .filter-bar {
    background: var(--paper);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    padding: 18px 0;
    position: sticky; top: 68px; z-index: 20;
  }
  .filter-row {
    display: flex; gap: 8px; flex-wrap: wrap; align-items: center;
  }
  .filter-row .label {
    font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.12em;
    text-transform: uppercase; color: var(--ink-mute); margin-right: 4px; font-weight: 500;
  }
  .filter-chip {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 7px 13px; border-radius: var(--r-pill);
    background: var(--sand); color: var(--ink-soft);
    font-size: 13px; font-weight: 600;
    border: 1px solid var(--border);
    cursor: pointer; transition: background .15s, border-color .15s, color .15s;
  }
  .filter-chip:hover { border-color: var(--ink-mute); color: var(--ink); }
  .filter-chip.active {
    background: var(--ink); color: var(--paper); border-color: var(--ink);
  }

  /* ===== grid ===== */
  .projects {
    padding: 56px 0 80px;
  }
  .section-head {
    display: flex; flex-direction: column; gap: 12px; margin-bottom: 32px;
    max-width: 60ch;
  }
  .section-head h2 {
    font-family: var(--f-display); font-size: clamp(24px, 3.2vw, 34px);
    font-weight: 800; line-height: 1.1; margin: 0; letter-spacing: -0.025em;
  }
  .section-head p { margin: 0; }

  .projects-grid {
    display: grid; gap: 24px; grid-template-columns: 1fr;
  }
  @media (min-width: 760px) { .projects-grid { grid-template-columns: 1fr 1fr; } }
  @media (min-width: 1100px) { .projects-grid { grid-template-columns: 1fr 1fr 1fr; } }

  /* ===== project card ===== */
  .project-card {
    background: var(--paper);
    border-radius: var(--r-lg);
    border: 1px solid var(--border);
    overflow: hidden;
    display: flex; flex-direction: column;
    transition: transform .2s, box-shadow .2s, border-color .2s;
  }
  .project-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-2);
    border-color: var(--ink-mute);
  }

  /* banner — kategori-tinted */
  .project-banner {
    position: relative;
    height: 140px;
    display: flex; align-items: center; justify-content: center;
    overflow: hidden;
    border-bottom: 1px solid var(--border);
  }
  .project-banner::before {
    content: "";
    position: absolute; inset: 0;
    background-image:
      linear-gradient(to right, rgba(255,253,248,0.10) 1px, transparent 1px),
      linear-gradient(to bottom, rgba(255,253,248,0.10) 1px, transparent 1px);
    background-size: 32px 32px;
    opacity: 0.6;
    pointer-events: none;
  }
  .project-banner .glyph {
    position: relative; z-index: 1;
    font-family: var(--f-display);
    font-weight: 800; letter-spacing: -0.04em;
    font-size: 56px; line-height: 1;
    color: rgba(255,253,248,0.95);
  }
  .project-banner .badge-cat {
    position: absolute; top: 14px; left: 14px; z-index: 2;
    background: rgba(255,253,248,0.94); color: var(--ink);
    font-family: var(--f-mono); font-size: 10.5px; font-weight: 700;
    letter-spacing: 0.1em; text-transform: uppercase;
    padding: 5px 10px; border-radius: var(--r-pill);
  }
  .banner-bootcamp { background: var(--ink); }
  .banner-bootcamp .glyph { color: var(--saffron); }
  .banner-seminar  { background: var(--teal); }
  .banner-seminar  .glyph { color: rgba(255,253,248,0.95); }
  .banner-workshop { background: var(--vermilion); }
  .banner-workshop .glyph { color: rgba(255,253,248,0.95); }

  /* card body */
  .project-body {
    padding: 22px 22px 18px;
    display: flex; flex-direction: column; gap: 12px;
    flex: 1;
  }
  .project-status {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 5px 11px; border-radius: var(--r-pill);
    font-family: var(--f-display); font-size: 11.5px; font-weight: 700;
    letter-spacing: 0.02em; align-self: flex-start;
  }
  .project-status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; }
  .status-open   { background: var(--merah-soft);  color: #7A2418; }
  .status-open::before { background: var(--vermilion); }
  .status-partial { background: var(--saffron-soft); color: #7A3F14; }
  .status-partial::before { background: var(--saffron-2); }
  .status-full   { background: var(--hijau-soft); color: #2F4D22; }
  .status-full::before { background: var(--hijau); }

  .project-title {
    font-family: var(--f-display);
    font-size: 20px; font-weight: 700;
    line-height: 1.2; letter-spacing: -0.02em;
    color: var(--ink); margin: 0;
  }
  .project-desc {
    font-size: 14.5px; line-height: 1.55;
    color: var(--ink-soft); margin: 0;
  }
  .project-meta {
    display: flex; flex-wrap: wrap; gap: 8px 16px;
    font-family: var(--f-mono); font-size: 12px;
    color: var(--ink-mute); letter-spacing: 0.02em;
    padding-top: 4px;
  }
  .project-meta .item { display: inline-flex; align-items: center; gap: 6px; }
  .project-meta strong { color: var(--ink-soft); font-weight: 600; }

  /* fundraising block */
  .fund {
    margin-top: auto;
    padding: 18px 22px;
    background: var(--paper-2);
    border-top: 1px solid var(--border);
  }
  .fund-row {
    display: flex; justify-content: space-between; align-items: baseline;
    margin-bottom: 8px; gap: 8px; flex-wrap: wrap;
  }
  .fund-amount {
    font-family: var(--f-mono); font-size: 15.5px; font-weight: 700;
    color: var(--ink); letter-spacing: -0.01em;
  }
  .fund-target {
    font-family: var(--f-mono); font-size: 12.5px; font-weight: 500;
    color: var(--ink-mute); letter-spacing: -0.005em;
  }
  .fund-pct {
    font-family: var(--f-mono); font-size: 13px; font-weight: 700;
    color: var(--ink); letter-spacing: -0.01em;
  }

  .progress {
    height: 8px; border-radius: var(--r-pill);
    background: var(--sand);
    overflow: hidden;
    border: 1px solid var(--border);
  }
  .progress-fill {
    height: 100%; border-radius: var(--r-pill);
    transition: width .3s ease;
  }
  .fill-open    { background: var(--vermilion); }
  .fill-partial { background: var(--saffron-2); }
  .fill-full    { background: var(--hijau); }

  /* card actions */
  .project-actions {
    display: flex; gap: 8px; padding: 22px;
  }
  .project-actions .btn {
    flex: 1; justify-content: center;
    padding: 11px 14px;
    font-size: 13.5px;
  }
  .btn-disabled {
    background: var(--hijau-soft) !important;
    color: #2F4D22 !important;
    box-shadow: none !important;
    cursor: default !important;
    border: 1px solid rgba(78,124,58,0.30) !important;
  }
  .btn-disabled:hover { transform: none !important; }

  /* ===== bottom CTA ===== */
  .pt-cta {
    background: var(--ink); color: var(--paper);
    padding: 72px 0;
    position: relative; overflow: hidden;
  }
  .pt-cta::before {
    content: ""; position: absolute; top: -100px; right: -100px;
    width: 360px; height: 360px; border-radius: 50%;
    background: radial-gradient(circle, rgba(232,163,61,0.18), transparent 70%);
    pointer-events: none;
  }
  .pt-cta .shell { position: relative; }
  .pt-cta-inner {
    display: grid; gap: 32px; grid-template-columns: 1fr; align-items: center;
  }
  @media (min-width: 880px) {
    .pt-cta-inner { grid-template-columns: 1.4fr 1fr; gap: 56px; }
  }
  .pt-cta h2 {
    font-family: var(--f-display);
    font-size: clamp(28px, 4vw, 42px); font-weight: 800;
    line-height: 1.1; margin: 0 0 16px; letter-spacing: -0.03em;
    max-width: 22ch;
  }
  .pt-cta h2 em { color: var(--saffron); font-style: normal; }
  .pt-cta p {
    font-size: 16px; line-height: 1.6;
    color: rgba(255,253,248,0.78); max-width: 50ch; margin: 0;
  }
  .pt-cta-actions {
    display: flex; gap: 12px; flex-wrap: wrap; justify-content: flex-start;
  }
  @media (min-width: 880px) {
    .pt-cta-actions { justify-content: flex-end; }
  }

  /* empty state when filter has no matches */
  .empty-state {
    grid-column: 1 / -1;
    text-align: center; padding: 48px 24px;
    color: var(--ink-mute);
    font-size: 14.5px;
    border: 1px dashed var(--border);
    border-radius: var(--r-lg);
    background: var(--paper);
  }