/* ============================================================
   KIAT Advisory — Mitra & Kolaborator page
   Concept: count-led hero + category filter + logo grid.
   Original KIAT-branded treatment (not a copy of the reference).
   ============================================================ */

/* ---------- hero ---------- */
.mitra-hero{
  margin-top:74px;position:relative;overflow:hidden;
  background:
    radial-gradient(110% 130% at 88% -20%, rgba(255,174,0,.20), transparent 55%),
    radial-gradient(90% 120% at -8% 10%, rgba(237,50,71,.12), transparent 52%),
    var(--paper);
  border-bottom:1px solid var(--line);
  padding:60px 0 0;
}
.mitra-hero .crumb{display:flex;gap:8px;align-items:center;font-size:13px;font-weight:600;color:var(--muted);margin-bottom:20px}
.mitra-hero .crumb a:hover{color:var(--red)}
.mitra-hero .crumb span{opacity:.5}
.mh-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:48px;align-items:center}
.mh-count{display:flex;align-items:baseline;gap:14px;line-height:.9}
.mh-count .big{font-size:clamp(72px,11vw,140px);font-weight:800;letter-spacing:-.05em;
  background:linear-gradient(120deg,var(--red) 10%,var(--amber-deep) 90%);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.mh-count .plus{font-size:clamp(40px,6vw,72px);font-weight:800;color:var(--amber-deep);letter-spacing:-.04em}
.mitra-hero h1{font-size:clamp(28px,3.6vw,44px);letter-spacing:-.025em;margin:6px 0 14px}
.mitra-hero h1 em{font-style:italic;color:var(--red)}
.mitra-hero .lead{max-width:46ch}
.mh-mini{display:flex;gap:28px;margin-top:30px;flex-wrap:wrap}
.mh-mini .mm{display:flex;flex-direction:column;gap:2px}
.mh-mini .mm b{font-size:26px;font-weight:800;color:var(--ink);letter-spacing:-.02em}
.mh-mini .mm span{font-size:13px;font-weight:600;color:var(--muted)}
.mh-mini .mm + .mm{padding-left:28px;border-left:1px solid var(--line)}
.mh-art{position:relative}
.mh-art .collage{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:14px;height:340px}
.mh-art .collage .img-ph{width:100%;height:100%;border-radius:var(--radius)}
.mh-art .collage > :nth-child(1){grid-row:span 2}
.mh-art .seal{position:absolute;right:-10px;bottom:-14px;background:var(--ink);color:#fff;border-radius:16px;padding:14px 18px;box-shadow:var(--shadow);display:flex;align-items:center;gap:12px}
.mh-art .seal .s-n{font-size:24px;font-weight:800;color:var(--amber);letter-spacing:-.02em}
.mh-art .seal .s-l{font-size:12px;font-weight:600;color:rgba(255,255,255,.78);line-height:1.3;max-width:120px}

/* ---------- filter bar (sticky under nav) ---------- */
.filter-wrap{position:sticky;top:64px;z-index:50;background:rgba(245,242,238,.86);backdrop-filter:saturate(1.3) blur(12px);border-bottom:1px solid var(--line)}
.filter-bar{display:flex;gap:10px;flex-wrap:wrap;padding:18px 0}
.fchip{display:inline-flex;align-items:center;gap:9px;padding:10px 16px;border-radius:999px;
  background:#fff;border:1px solid var(--line);font-weight:700;font-size:14.5px;color:var(--fg);
  cursor:pointer;transition:.22s var(--ease)}
.fchip .cnt{display:inline-grid;place-items:center;min-width:22px;height:22px;padding:0 6px;border-radius:999px;
  background:var(--paper-2);color:var(--muted);font-size:12px;font-weight:800;transition:.22s var(--ease)}
.fchip:hover{border-color:var(--red);transform:translateY(-2px);box-shadow:var(--shadow-sm)}
.fchip.active{background:var(--red);border-color:var(--red);color:#fff}
.fchip.active .cnt{background:rgba(255,255,255,.22);color:#fff}

/* ---------- partner grid ---------- */
.mitra-section{padding:50px 0 96px}
.mitra-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.mitra-card{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;
  display:flex;flex-direction:column;transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .35s var(--ease);
  animation:cardin .45s var(--ease) both;
}
@keyframes cardin{from{opacity:0;transform:scale(.96) translateY(8px)}to{opacity:1;transform:none}}
.mitra-card:hover{transform:translateY(-5px);box-shadow:var(--shadow);border-color:transparent}
.mitra-card .logo-wrap{position:relative;height:130px;display:grid;place-items:center;padding:22px;
  background:linear-gradient(180deg,#fff, #fcfbf9)}
.mitra-card .mc-logo{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;display:block}
.mitra-card .mc-place{font-size:12.5px;font-weight:500;color:var(--muted);line-height:1.3;margin-top:-2px}
.mitra-card .mono{display:grid;place-items:center;width:100%;height:100%;border-radius:12px;
  font-weight:800;font-size:15px;text-align:center;line-height:1.2;letter-spacing:-.01em;padding:10px}
.mitra-card .mc-body{padding:16px 18px 18px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:8px;flex:1}
.mitra-card .mc-name{font-size:15.5px;font-weight:700;letter-spacing:-.01em;color:var(--ink);line-height:1.25}
.mitra-card .mc-tag{align-self:flex-start;display:inline-flex;align-items:center;gap:7px;font-size:11.5px;font-weight:700;
  letter-spacing:.02em;color:var(--muted)}
.mitra-card .mc-tag i{width:8px;height:8px;border-radius:50%;flex:none}

/* category accent dots */
.cat-umkm  { --c:#B06A37; }
.cat-gov   { --c:var(--red); }
.cat-akad  { --c:var(--amber-deep); }
.cat-ind   { --c:var(--green); }
.cat-kom   { --c:#7A5AF8; }
.mc-tag.cat-umkm i{background:#B06A37}
.mc-tag.cat-gov i{background:var(--red)}
.mc-tag.cat-akad i{background:var(--amber-deep)}
.mc-tag.cat-ind i{background:var(--green)}
.mc-tag.cat-kom i{background:#7A5AF8}
.mono.cat-umkm{background:rgba(176,106,55,.10);color:#B06A37}
.mono.cat-gov{background:rgba(237,50,71,.08);color:var(--red)}
.mono.cat-akad{background:rgba(232,148,0,.10);color:var(--amber-deep)}
.mono.cat-ind{background:rgba(31,157,99,.10);color:var(--green)}
.mono.cat-kom{background:rgba(122,90,248,.10);color:#7A5AF8}

.mitra-empty{padding:60px;text-align:center;color:var(--muted);font-weight:500}

/* ---------- become-a-partner CTA ---------- */
.partner-cta{position:relative;overflow:hidden;border-radius:var(--radius-lg);
  background:linear-gradient(135deg,var(--red),var(--red-deep));color:#fff;
  padding:52px 48px;display:grid;grid-template-columns:1.3fr .7fr;gap:30px;align-items:center}
.partner-cta::after{content:"";position:absolute;inset:0;background:radial-gradient(60% 130% at 100% 0%,rgba(255,174,0,.34),transparent 60%);pointer-events:none}
.partner-cta .pc-l{position:relative;z-index:1}
.partner-cta h2{color:#fff;font-size:clamp(26px,3.2vw,38px);letter-spacing:-.02em;margin-bottom:12px}
.partner-cta p{color:rgba(255,255,255,.85);font-weight:500;max-width:48ch}
.partner-cta .pc-r{position:relative;z-index:1;display:flex;justify-content:flex-end;gap:12px;flex-wrap:wrap}

@media (max-width:1040px){
  .mitra-grid{grid-template-columns:repeat(3,1fr)}
  .mh-grid{grid-template-columns:1fr;gap:34px}
  .mh-art .collage{height:280px}
}
@media (max-width:720px){
  .mitra-grid{grid-template-columns:repeat(2,1fr);gap:14px}
  .filter-wrap{top:0}
  .partner-cta{grid-template-columns:1fr;padding:36px 26px}
  .partner-cta .pc-r{justify-content:flex-start}
  .mh-mini .mm + .mm{padding-left:18px}
}
@media (max-width:460px){
  .mitra-grid{grid-template-columns:1fr}
}