/* Mitra & Kerja Sama. Built on the shared V3 glass system (site-v3-glass.css); only the green tint and card layout live here. */
#v3-main .mitra {
  --v3-glass-bg: linear-gradient(160deg, rgba(60, 140, 110, .20), rgba(0, 52, 43, .26));
  --v3-glass-bg-card: linear-gradient(160deg, rgba(255, 255, 255, .10), rgba(255, 255, 255, .04));
  --v3-glass-bg-card-hover: rgba(255, 255, 255, .13);
  --mt-mint: #9be8bd; --mt-mint-soft: rgba(155, 232, 189, .16);
  padding-block: clamp(20px, 3vw, 36px) clamp(36px, 6vw, 72px);
  color: var(--v3-text-primary);
}
#v3-main .mitra__inner { display: grid; gap: clamp(14px, 2vw, 22px); }
#v3-main .mitra__inner > * { min-width: 0; }
#v3-main .mitra__crumbs { width: var(--v3-panel-width); margin: 0 auto; }
#v3-main .mitra-label { color: var(--mt-mint); font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
#v3-main .mitra-hero__title { margin: 0; color: #fff; font-size: clamp(30px, 4vw, 48px); line-height: 1.1; font-weight: 700; letter-spacing: -.02em; overflow-wrap: anywhere; }
#v3-main .mitra-hero__lead { margin: 16px 0 0; max-width: 40em; color: #d3dcea; font-size: 16px; line-height: 1.6; }

#v3-main .mitra-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
#v3-main .mitra-chip { padding: 8px 14px; border-radius: 999px; border: 1px solid var(--v3-glass-border); background: rgba(255, 255, 255, .08); color: #fff; font-size: 14px; font-weight: 600; }
#v3-main .mitra-chip:hover { background: rgba(255, 255, 255, .17); }
#v3-main .mitra-chip.is-active { background: var(--mt-mint-soft); border-color: rgba(155, 232, 189, .55); color: var(--mt-mint); }

#v3-main .mitra-empty { margin: 0; color: var(--v3-text-muted); font-size: 16px; line-height: 1.6; }
#v3-main .mitra-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
#v3-main .mitra-card { scroll-margin-top: 96px; display: grid; align-content: start; gap: 10px; padding: 20px; min-width: 0; }
#v3-main .mitra-card__head { display: flex; align-items: center; gap: 14px; min-width: 0; }
#v3-main .mitra-card__id { display: grid; gap: 4px; min-width: 0; }
#v3-main .mitra-card__logo { flex: none; display: grid; place-items: center; width: 64px; height: 64px; padding: 6px; border-radius: 14px; background: rgba(255, 255, 255, .92); }
#v3-main .mitra-card__logo img { display: block; max-width: 100%; max-height: 100%; object-fit: contain; }
#v3-main .mitra-card__name { margin: 0; color: #fff; font-size: 18px; font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; }
#v3-main .mitra-card__type { margin: 0; color: #fff; font-size: 14px; font-weight: 600; overflow-wrap: anywhere; }
#v3-main .mitra-card__meta { margin: 0; color: var(--v3-text-muted); font-size: 13px; }
#v3-main .mitra-card__desc { margin: 0; color: #d3dcea; font-size: 14px; line-height: 1.55; overflow-wrap: anywhere; }
#v3-main .mitra-link { color: var(--mt-mint); font-size: 15px; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
#v3-main .mitra-link:hover { color: #fff; }

#v3-main .mitra-detail { display: grid; gap: 14px; justify-items: start; }
#v3-main .mitra-detail__logo { width: 96px; height: 96px; }
#v3-main .mitra-detail__desc { margin: 0; max-width: 60em; color: #d3dcea; font-size: 16px; line-height: 1.7; overflow-wrap: anywhere; }
#v3-main .mitra-facts { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); width: 100%; margin: 0; }
#v3-main .mitra-fact { padding: 16px 18px; min-width: 0; }
#v3-main .mitra-fact dt { color: var(--v3-text-muted); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; }
#v3-main .mitra-fact dd { margin: 6px 0 0; color: #fff; font-size: 16px; font-weight: 600; overflow-wrap: anywhere; }
#v3-main .mitra-btn { display: inline-flex; align-items: center; padding: 12px 20px; border-radius: 999px; border: 1px solid rgba(155, 232, 189, .5); background: var(--mt-mint-soft); color: var(--mt-mint); font-size: 15px; font-weight: 600; }
#v3-main .mitra-btn:hover { background: rgba(155, 232, 189, .26); }

/* ---- redesigned directory: hero panel, highlight strip, chip bar, CTA ---- */
#v3-main .mitra-hero { display: grid; gap: 24px; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); align-items: end; }
#v3-main .mitra-hero > * { min-width: 0; }
#v3-main .mitra-badge { display: inline-block; margin: 0 0 14px; padding: 6px 12px; border-radius: 999px; border: 1px solid rgba(155, 232, 189, .45); background: var(--mt-mint-soft); color: var(--mt-mint); font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
#v3-main .mitra-hero__title { font-size: clamp(34px, 5vw, 60px); }
#v3-main .mitra-hero__panel { padding: 20px 22px; border-radius: 20px; border: 1px solid var(--v3-glass-border); background: rgba(255, 255, 255, .06); }
#v3-main .mitra-hero__count { margin: 0; display: grid; gap: 4px; color: #d3dcea; font-size: 15px; line-height: 1.5; }
#v3-main .mitra-hero__count strong { color: #fff; font-size: clamp(40px, 5vw, 56px); line-height: 1; font-weight: 700; letter-spacing: -.03em; }

#v3-main .mitra-section-title { margin: 0 0 14px; color: #fff; font-size: 18px; font-weight: 600; }
#v3-main .mitra-featured__empty { margin: 0; padding: 18px 20px; border: 1px dashed rgba(255, 255, 255, .28); border-radius: 16px; color: var(--v3-text-muted); font-size: 15px; line-height: 1.55; }
#v3-main .mitra-featured__row { list-style: none; margin: 0; padding: 2px 2px 10px; display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; }
#v3-main .mitra-featured__row > li { flex: none; scroll-snap-align: start; }
#v3-main .mitra-pill { display: inline-flex; align-items: center; gap: 10px; max-width: 280px; padding: 8px 16px 8px 8px; border-radius: 999px; border: 1px solid var(--v3-glass-border); background: rgba(255, 255, 255, .08); color: #fff; font-size: 14px; font-weight: 600; }
#v3-main .mitra-pill:not(:has(.mitra-pill__logo)) { padding-left: 16px; }
#v3-main .mitra-pill:hover { background: rgba(255, 255, 255, .16); }
#v3-main .mitra-pill__logo { flex: none; display: grid; place-items: center; width: 36px; height: 36px; padding: 4px; border-radius: 50%; background: rgba(255, 255, 255, .92); }
#v3-main .mitra-pill__logo img { display: block; max-width: 100%; max-height: 100%; object-fit: contain; }
#v3-main .mitra-pill__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

#v3-main .mitra-chipbar .mitra-chips { margin-top: 0; }

#v3-main .mitra-cta { display: grid; gap: 18px; grid-template-columns: minmax(0, 1fr) auto; align-items: center; width: var(--v3-panel-width); margin: 0 auto; padding: clamp(22px, 3vw, 34px); border-radius: var(--v3-glass-radius); border: 1px solid rgba(124, 192, 255, .4); background: linear-gradient(135deg, rgba(0, 102, 204, .55), rgba(30, 60, 140, .5)); }
#v3-main .mitra-cta > * { min-width: 0; }
#v3-main .mitra-cta__title { margin: 0; color: #fff; font-size: clamp(22px, 3vw, 30px); line-height: 1.2; font-weight: 700; }
#v3-main .mitra-cta__text { margin: 8px 0 0; max-width: 40em; color: #e3ecf8; font-size: 15px; line-height: 1.6; }
#v3-main .mitra-cta__actions { display: flex; flex-wrap: wrap; gap: 10px; }
#v3-main .mitra-cta__btn { display: inline-flex; align-items: center; padding: 12px 20px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .5); color: #fff; font-size: 15px; font-weight: 600; }
#v3-main .mitra-cta__btn:hover { background: rgba(255, 255, 255, .16); }
#v3-main .mitra-cta__btn--primary { background: #fff; color: #0b3a7a; border-color: #fff; }
#v3-main .mitra-cta__btn--primary:hover { background: #e8f1fc; }

@media (max-width: 760px) {
  #v3-main .mitra-hero { grid-template-columns: minmax(0, 1fr); }
  #v3-main .mitra-cta { grid-template-columns: minmax(0, 1fr); }
  #v3-main .mitra-cta__btn { justify-content: center; flex: 1 1 100%; }
}
#v3-main .mitra-card:target { border-color: rgba(155, 232, 189, .8); box-shadow: 0 0 0 3px rgba(155, 232, 189, .28); }