/* kolaborasi.css — Klien & Kolaborasi section */

.kolaborasi {
  border-top: 1px solid var(--paper-faint);
}

.kolaborasi__header {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: clamp(48px, 8vw, 120px);
  align-items: start;
  margin-bottom: var(--sp-16);
}

.kolaborasi__label {
  font-family: var(--font-mono);
  font-size: var(--type-micro);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--paper-dim);
  padding-top: var(--sp-2);
}

.kolaborasi__h2 {
  font-family: var(--font-display);
  font-size: var(--type-h2);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: var(--paper);
}

.kolaborasi__list {
  border-top: 1px solid var(--paper-faint);
}

.kolaborasi__row {
  display: grid;
  grid-template-columns: var(--sp-8) 16rem 1fr;
  gap: var(--sp-8);
  align-items: baseline;
  padding-block: var(--sp-6);
  border-bottom: 1px solid var(--paper-faint);
}

.kolaborasi__icon {
  font-family: var(--font-mono);
  font-size: var(--type-small);
  color: var(--accent);
}

.kolaborasi__cat {
  font-family: var(--font-mono);
  font-size: var(--type-small);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--paper);
}

.kolaborasi__desc {
  font-size: var(--type-small);
  color: var(--paper-dim);
  line-height: 1.6;
}

.kolaborasi__quote {
  margin-top: var(--sp-20);
  max-width: 52ch;
  padding-left: var(--sp-8);
  border-left: 2px solid var(--accent);
}

.kolaborasi__quote-text {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2.5vw, 1.75rem);
  font-weight: 400;
  line-height: 1.35;
  letter-spacing: -0.02em;
  color: var(--paper);
  margin-bottom: var(--sp-4);
}

.kolaborasi__quote-cite {
  font-family: var(--font-mono);
  font-size: var(--type-micro);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--paper-dim);
  font-style: normal;
}

@media (max-width: 768px) {
  .kolaborasi__header { grid-template-columns: 1fr; gap: var(--sp-6); margin-bottom: var(--sp-12); }
  .kolaborasi__row {
    grid-template-columns: var(--sp-6) 1fr;
    grid-template-rows: auto auto;
    gap: var(--sp-2) var(--sp-4);
  }
  .kolaborasi__desc { grid-column: 2; }
}