/* Expert profile (/experts/{slug}) — .texpp-*. Class cards from tk-card.css; chrome from kelas.css. */
.texpp { color: #2a3141; }
.texpp-hero { background: #f2f4fb; padding: 34px 0; }
.texpp-hero__row { display: flex; gap: 28px; align-items: center; }
.texpp-hero__photo { flex: 0 0 auto; }
.texpp-hero__main { flex: 1 1 auto; min-width: 0; }
.texpp-hero__photo img, .texpp-hero__ph { width: 132px; height: 132px; border-radius: 50%; object-fit: cover; display: block; }
.texpp-hero__ph { display: flex; align-items: center; justify-content: center; background: #dbe6f7; color: #004aad; font-size: 3rem; font-weight: 800; }
.texpp-hero__name { margin: 0; font-size: clamp(1.8rem, 4vw, 2.6rem); font-weight: 800; color: #004aad; line-height: 1.1; }
.texpp-hero__sub { margin: 6px 0 0; font-size: 1.05rem; color: #3d475c; }
.texpp-stats { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 16px; }
.texpp-stat { background: #e8eef7; border: none; border-radius: 20px; padding: 5px 14px; font-size: 12px; font-weight: 700; color: #004aad; line-height: 1.4; }
.texpp-stat strong { color: inherit; font-weight: 700; }
.texpp-hero__aside { flex: 0 0 auto; align-self: center; display: flex; gap: 10px; }
.texpp-linkedin, .texpp-social { width: 48px; height: 48px; border-radius: 13px; background: #0a66c2; color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 22px; text-decoration: none; transition: transform .15s ease, background .15s ease; }
.texpp-linkedin:hover, .texpp-social:hover { background: #084d92; transform: translateY(-2px); color: #fff; }
.texpp-social--gs { background: #4285f4; }
.texpp-social--gs:hover { background: #2f6fd0; }
.texpp-social--rg { background: #00ccbb; }
.texpp-social--rg:hover { background: #00a89a; }

.texpp-band { padding: 40px 0; }
.texpp-band--tint { background: #f7f9fd; }
.texpp-h2 { margin: 0 0 20px; font-size: 1.5rem; font-weight: 800; color: #004aad; }
.texpp-bio { line-height: 1.85; color: #3d475c; margin: 0; font-size: 1.05rem; }

.texpp-testi { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.texpp-testi__card { position: relative; margin: 0; background: #fff; border: 1px solid #eef1f6; border-radius: 16px; padding: 28px 26px 22px; box-shadow: 0 6px 20px rgba(15, 23, 42, .06); }
.texpp-testi__mark { display: block; color: #c9d6f1; font-size: 1.5rem; margin-bottom: 12px; }
.texpp-testi__body { margin: 0 0 16px; color: #33405a; line-height: 1.75; font-size: 1.02rem; }
.texpp-testi__by { font-weight: 700; color: #004aad; font-size: .92rem; }

.texpp-clips { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.texpp-clip { text-decoration: none; color: inherit; }
.texpp-clip__thumb { position: relative; display: block; border-radius: 12px; overflow: hidden; aspect-ratio: 16/9; background: #000; }
.texpp-clip__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.texpp-clip__play { position: absolute; inset: 0; margin: auto; width: 54px; height: 54px; border-radius: 50%; background: #ff0000; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 20px; opacity: 0; transition: opacity .18s ease; }
.texpp-clip:hover .texpp-clip__play { opacity: 1; }
.texpp-clip__meta { display: flex; align-items: center; gap: 7px; margin-top: 7px; }
.texpp-clip__meta i { color: #ff0000; font-size: 1.05rem; }
.texpp-clip__cat { font-size: .8rem; color: #6a7488; }
.texpp-clip__dur { position: absolute; right: 8px; bottom: 8px; background: rgba(0,0,0,.8); color: #fff; font-size: .74rem; padding: 2px 7px; border-radius: 5px; }
.texpp-clip__title { display: block; margin-top: 10px; font-weight: 700; color: #1a2b4a; font-size: .95rem; line-height: 1.4; }

.texpp-arts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.texpp-art { display: flex; flex-direction: column; text-decoration: none; color: inherit; background: #fff; border: 1px solid #e6eaf2; border-radius: 12px; overflow: hidden; transition: box-shadow .15s ease, transform .15s ease; }
.texpp-art:hover { box-shadow: 0 8px 20px rgba(15,23,42,.1); transform: translateY(-2px); }
.texpp-art__thumb { aspect-ratio: 16/9; background: #e8f0fb; }
.texpp-art__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.texpp-art__body { padding: 14px 16px; }
.texpp-art__title { display: block; font-weight: 700; color: #1a2b4a; line-height: 1.4; font-size: .95rem; }
.texpp-art__date { display: block; margin-top: 6px; font-size: .8rem; color: #94a3b8; }

.texpp-cta { padding: 10px 0 56px; text-align: center; display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.texpp-cta .container { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.texpp-cta__btn { display: inline-flex; align-items: center; gap: 8px; padding: 12px 26px; border-radius: 999px; background: #004aad; color: #fff; font-weight: 700; text-decoration: none; transition: background .15s ease, transform .15s ease; }
.texpp-cta__btn:hover { background: #00377f; transform: translateY(-2px); color: #fff; }
.texpp-cta__btn--ghost { background: #fff; color: #004aad; border: 2px solid #004aad; }
.texpp-cta__btn--ghost:hover { background: #eef4fc; color: #004aad; }

@media (max-width: 1100px) { .texpp-arts { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 800px) { .texpp-testi, .texpp-clips { grid-template-columns: 1fr; } .texpp-arts { grid-template-columns: repeat(2, 1fr); } .texpp-hero__row { flex-wrap: wrap; gap: 18px; } .texpp-hero__aside { order: 2; } }
@media (max-width: 520px) { .texpp-arts { grid-template-columns: 1fr; } }

/* Positioning: satu pill di baris stat, label dipisah titik tengah.
   Diberi warna solid supaya jadi jangkar baris — sisanya pill tint biasa. */
.texpp-stat--pos{background:#004aad;color:#fff}
/* separator titik-tengah diberi jarak sendiri supaya label tidak berdempetan */
.texpp-sep{display:inline-block;margin:0 9px;opacity:.55;font-weight:400}

/* Keahlian — baris tag di bawah paragraf Tentang (dipindah dari baris stat hero) */
.texpp-skills{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:18px}
.texpp-skills__label{font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:#6b7480;margin-right:2px}
.texpp-skill{background:#eef2f7;color:#3d475c;border:1px solid #dde3ea;border-radius:999px;padding:4px 11px;font-size:12px;font-weight:600;line-height:1.4}