/* ======================================================
   PENGGUNA PAGE — extends style.css
   Reuses BKKBISA design tokens (--primary, --radius-*, --shadow-*)
====================================================== */

/* ===== PAGE HEADER ===== */
.pg-header { margin-bottom: .5rem; }

.pg-title {
    font-weight: 800;
    font-size: 1.6rem;
    color: var(--navy);
    letter-spacing: -.3px;
    margin-bottom: .25rem;
}

.pg-subtitle {
    color: var(--gray-600);
    font-size: .9rem;
    margin: 0;
}

/* ===== TAB NAV ===== */
.pengguna-tab-nav {
    display: flex;
    gap: .1rem;
    border-bottom: 1px solid var(--gray-border);
    overflow-x: auto;
    scrollbar-width: none;
}

.pengguna-tab-nav::-webkit-scrollbar { display: none; }

.pengguna-tab-btn {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    background: none;
    border: none;
    padding: .85rem 1rem;
    font-weight: 600;
    font-size: .88rem;
    color: var(--gray-600);
    white-space: nowrap;
    position: relative;
    cursor: pointer;
    transition: color .2s;
    font-family: inherit;
}

.pengguna-tab-btn:hover { color: var(--primary); }

.pengguna-tab-btn.active {
    color: var(--primary);
    font-weight: 700;
}

.pengguna-tab-btn.active::after {
    content: "";
    position: absolute;
    left: 1rem;
    right: 1rem;
    bottom: -1px;
    height: 2.5px;
    background: var(--primary);
    border-radius: 3px 3px 0 0;
}

.tab-count-badge {
    background: var(--primary);
    color: #fff;
    font-size: .68rem;
    font-weight: 800;
    padding: .08rem .42rem;
    border-radius: 20px;
    line-height: 1.5;
}


/* ===== USER GRID ===== */
.user-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.1rem;
}

@media (max-width: 1199.98px) { .user-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 575.98px)  { .user-grid { grid-template-columns: 1fr; } }

/* ===== USER CARD (Grid view) ===== */
.user-card {
    background: #fff;
    border: 1px solid var(--gray-border);
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: box-shadow .2s, transform .2s;
    display: flex;
    flex-direction: column;
}

.user-card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

.user-card-cover {
    height: 96px;
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    background-size: cover;
    background-position: center;
    flex-shrink: 0;
}

.user-card-body {
    padding: 0 1rem 1rem;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.user-card-avatar-row {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin-top: -56px;
    margin-bottom: .5rem;
}

.user-avatar-wrap { position: relative; }

.user-avatar {
    width: 111px;
    height: 111px;
    border-radius: 50%;
    border: 3px solid #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 1.5rem;
    color: #fff;
    box-shadow: var(--shadow-sm);
    background-size: cover;
    background-position: center;
    overflow: hidden;
    flex-shrink: 0;
}

.user-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.user-status-badge {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    font-size: .68rem;
    font-weight: 700;
    padding: .22rem .55rem;
    border-radius: 20px;
    white-space: nowrap;
    margin-bottom: .9rem;
    margin-right: -.3rem;
}

.status-carikerja {
    background: var(--green-bg);
    color: #15803D;
    border: 1px solid #BBF7D0;
}
.status-carikerja i { font-size: .7rem; }

.status-bekerja {
    background: var(--blue-bg);
    color: var(--primary);
    border: 1px solid #D7E3FB;
}
.status-bekerja i { font-size: .7rem; }

.status-terhubung {
    background: var(--green-bg);
    color: #15803D;
    border: 1px solid #BBF7D0;
}
.status-terhubung i { font-size: .7rem; }

.user-card-info { flex-grow: 1; }

.user-name {
    display: block;
    font-weight: 800;
    font-size: .95rem;
    color: var(--navy);
    text-decoration: none;
    margin-bottom: .15rem;
    transition: color .2s;
}

.user-name:hover { color: var(--primary); }

.user-position {
    font-size: .78rem;
    color: var(--gray-600);
    font-weight: 600;
    margin-bottom: .25rem;
}

.user-location {
    display: flex;
    align-items: center;
    gap: .3rem;
    font-size: .76rem;
    color: var(--gray-500);
    margin-bottom: .55rem;
}

.user-location i { color: var(--gray-400); font-size: .8rem; }

.user-skills {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: .28rem;
    margin-bottom: .55rem;
}

.user-skill-tag {
    background: #F1F5F9;
    color: #475569;
    font-size: .63rem;
    font-weight: 600;
    padding: .2rem .35rem;
    border-radius: 6px;
    border: 1px solid #E2E8F0;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

.user-bio {
    font-size: .78rem;
    color: var(--gray-600);
    line-height: 1.55;
    margin-bottom: .75rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.user-card-actions {
    display: flex;
    gap: .5rem;
}

.user-btn-profile {
    flex: 1;
    text-align: center;
    padding: .5rem .5rem;
    font-size: .8rem;
}

.user-btn-connect {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .35rem;
    padding: .5rem .5rem;
    font-size: .8rem;
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    font-family: inherit;
    font-weight: 700;
    transition: all .2s;
}

.user-btn-connect.connected {
    background: var(--green-bg);
    color: var(--green);
    border: 1.5px solid #BBF7D0;
}


/* ===== BUTTON STATES — KONEKSI ===== */
.btn-koneksi-pending,
.btn-koneksi-terhubung,
.btn-koneksi-terima,
.btn-koneksi-tolak {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .45rem 1rem;
    border-radius: var(--radius-sm);
    font-size: .82rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: all .2s;
    flex: 1;
    justify-content: center;
}
.btn-koneksi-pending {
    border: 1.5px solid var(--gray-border);
    background: var(--gray-bg);
    color: var(--gray-500);
}
.btn-koneksi-terhubung {
    border: 1.5px solid #BBF7D0;
    background: var(--green-bg);
    color: var(--green);
}
.btn-koneksi-terhubung:hover {
    background: #DCFCE7;
}
.btn-koneksi-terima {
    border: 1.5px solid var(--green);
    background: var(--green);
    color: #fff;
}
.btn-koneksi-terima:hover {
    background: #059669;
}
.btn-koneksi-tolak {
    border: 1.5px solid #FECACA;
    background: #FEF2F2;
    color: #EF4444;
}
.btn-koneksi-tolak:hover {
    background: #FEE2E2;
}
/* Loading spinner */
@keyframes spin { to { transform: rotate(360deg); } }
.spin-icon { display: inline-block; animation: spin .8s linear infinite; }

/* ===== SKELETON LOADING ===== */
@keyframes shimmer {
    0%   { background-position: -600px 0; }
    100% { background-position:  600px 0; }
}
.skel {
    background: linear-gradient(90deg, #f1f5f9 25%, #e2e8f0 50%, #f1f5f9 75%);
    background-size: 1200px 100%;
    animation: shimmer 1.5s infinite linear;
    border-radius: 6px;
    flex-shrink: 0;
}
.skel-cover {
    height: 96px;
    border-radius: 12px 12px 0 0;
    margin: 0;
}
.skel-avatar {
    width: 111px;
    height: 111px;
    border-radius: 50%;
    border: 3px solid #fff;
    box-shadow: 0 1px 4px rgba(0,0,0,.08);
}
.skel-badge  { width: 78px;  height: 26px; border-radius: 20px; margin-bottom: .9rem; margin-right: -.3rem; }
.skel-name   { height: 17px; width: 55%;   margin-bottom: .45rem; }
.skel-pos    { height: 13px; width: 78%;   margin-bottom: .3rem; }
.skel-loc    { height: 12px; width: 48%;   margin-bottom: .5rem; }
.skel-tag    { height: 26px; flex: 1;      border-radius: 6px; }
.skel-bio    { height: 11px; width: 88%;   margin-top: .45rem; }
.skel-btn    { height: 40px; flex: 1;      border-radius: var(--radius-sm, 8px); }

/* ===== EMPTY STATE ===== */
.pengguna-empty {
    text-align: center;
    padding: 3.5rem 1rem;
    color: var(--gray-500);
}

.pengguna-empty i { font-size: 2.5rem; margin-bottom: .75rem; display: block; }
.pengguna-empty p { font-size: .9rem; margin: 0; }

/* ===== PAGINATION ===== */
.pengguna-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .35rem;
    flex-wrap: wrap;
}

.pg-btn {
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border: 1.5px solid var(--gray-border);
    border-radius: var(--radius-sm);
    font-size: .82rem;
    font-weight: 600;
    color: var(--gray-700);
    cursor: pointer;
    transition: all .2s;
    font-family: inherit;
}

.pg-btn:hover:not(:disabled) { border-color: var(--primary); color: var(--primary); }

.pg-btn.active {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
}

.pg-btn:disabled { opacity: .4; cursor: not-allowed; }

.pg-btn.pg-arrow { color: var(--gray-600); }

.pg-ellipsis {
    color: var(--gray-500);
    font-size: .9rem;
    padding: 0 .2rem;
    user-select: none;
}

/* ===== CV PREMIUM BANNER ===== */
.cv-premium-banner {
    background: linear-gradient(135deg, #EDE9FE, #F5F3FF);
    border: 1px solid #DDD6FE;
    border-radius: var(--radius-xl);
    padding: 1.8rem 2rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    overflow: hidden;
    position: relative;
}

.cv-premium-banner::before {
    content: "";
    position: absolute;
    width: 220px;
    height: 220px;
    border-radius: 50%;
    background: rgba(124, 58, 237, .07);
    right: -60px;
    top: -80px;
}

.cv-premium-banner-eyebrow {
    font-size: .8rem;
    font-weight: 700;
    color: #7C3AED;
    margin-bottom: .3rem;
}

.cv-premium-banner-title {
    font-weight: 800;
    font-size: 1.5rem;
    color: #7C3AED;
    letter-spacing: -.3px;
    line-height: 1.1;
    margin-bottom: .5rem;
}

.cv-premium-banner-desc {
    font-size: .84rem;
    color: #6D28D9;
    margin-bottom: 1.1rem;
    max-width: 320px;
}

.cv-premium-banner-btn {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    background: #7C3AED;
    color: #fff;
    font-weight: 700;
    font-size: .88rem;
    padding: .65rem 1.3rem;
    border-radius: var(--radius-md);
    text-decoration: none;
    transition: background .2s;
}

.cv-premium-banner-btn:hover { background: #6D28D9; color: #fff; }

.cv-premium-banner-img {
    flex-shrink: 0;
    max-width: 180px;
    position: relative;
    z-index: 1;
}

.cv-premium-banner-img img {
    width: 100%;
    height: auto;
    display: block;
}

/* ===== SIDEBAR: SEARCH ===== */
.pengguna-search-wrap {
    display: flex;
    align-items: center;
    gap: .5rem;
    border: 1.5px solid var(--gray-border);
    border-radius: var(--radius-md);
    padding: .6rem .85rem;
    background: var(--gray-bg);
    transition: border-color .2s, background .2s;
}

.pengguna-search-wrap:focus-within {
    border-color: var(--primary);
    background: #fff;
    box-shadow: 0 0 0 3px var(--primary-light);
}

.pengguna-search-icon { color: var(--gray-400); font-size: .95rem; flex-shrink: 0; }

.pengguna-search-input {
    border: none;
    outline: none;
    background: transparent;
    font-size: .86rem;
    color: var(--navy);
    flex-grow: 1;
    font-family: inherit;
}

.pengguna-search-input::placeholder { color: var(--gray-400); }

.pengguna-search-clear {
    background: none;
    border: none;
    color: var(--gray-400);
    font-size: .9rem;
    padding: 0;
    cursor: pointer;
    transition: color .2s;
}

.pengguna-search-clear:hover { color: var(--gray-600); }

/* ===== SIDEBAR: FILTER ===== */
.filter-reset-btn {
    background: none;
    border: none;
    color: var(--primary);
    font-size: .82rem;
    font-weight: 700;
    cursor: pointer;
    padding: 0;
    font-family: inherit;
}

.filter-reset-btn:hover { text-decoration: underline; }

.filter-select-wrap {
    position: relative;
}

.filter-select {
    width: 100%;
    appearance: none;
    border: 1.5px solid var(--gray-border);
    border-radius: var(--radius-md);
    padding: .6rem .9rem;
    padding-right: 2.2rem;
    font-size: .84rem;
    color: var(--navy);
    background: #fff;
    cursor: pointer;
    font-family: inherit;
    transition: border-color .2s;
}

.filter-select:focus { outline: none; border-color: var(--primary); }

.filter-select-arrow {
    position: absolute;
    right: .8rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--gray-500);
    font-size: .75rem;
    pointer-events: none;
}

.filter-more-btn {
    width: 100%;
    display: flex;
    align-items: center;
    gap: .5rem;
    background: none;
    border: none;
    padding: .75rem .1rem 0;
    font-size: .84rem;
    font-weight: 700;
    color: var(--primary);
    cursor: pointer;
    font-family: inherit;
    transition: opacity .2s;
    margin-top: .4rem;
}

.filter-more-btn:hover { opacity: .8; }

.filter-more-panel {
    max-height: 0;
    overflow: hidden;
    transition: max-height .3s ease;
}

.filter-more-panel.open { max-height: 200px; }

#filterMoreChevron { transition: transform .3s ease; }
#filterMoreChevron.open { transform: rotate(180deg); }

/* ===== SIDEBAR: STATISTIK ===== */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: .75rem;
}

.stat-box {
    background: #fff;
    border: 1px solid var(--gray-border);
    border-radius: var(--radius-md);
    padding: .8rem .85rem;
    display: flex;
    align-items: center;
    gap: .75rem;
    box-shadow: 0 1px 3px rgba(0,0,0,.04);
}

.stat-icon-wrap {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.stat-icon-wrap i { font-size: 1.25rem; }

.stat-text { flex-grow: 1; min-width: 0; }

.stat-box-num {
    font-weight: 800;
    font-size: 1rem;
    line-height: 1.15;
    color: var(--navy);
}

.stat-box-lbl {
    font-size: .7rem;
    font-weight: 500;
    color: var(--gray-500);
    line-height: 1.3;
    margin-top: .1rem;
}

.stat-blue .stat-icon-wrap   { background: var(--blue-bg); }
.stat-blue .stat-icon-wrap i { color: var(--primary); }

.stat-green .stat-icon-wrap   { background: var(--green-bg); }
.stat-green .stat-icon-wrap i { color: var(--green); }

.stat-purple .stat-icon-wrap   { background: var(--purple-bg); }
.stat-purple .stat-icon-wrap i { color: #7C3AED; }

.stat-orange .stat-icon-wrap   { background: var(--orange-bg); }
.stat-orange .stat-icon-wrap i { color: var(--orange); }

/* ===== SIDEBAR: ORANG YANG MUNGKIN DIKENAL ===== */
.link-all {
    font-size: .82rem;
    font-weight: 700;
    color: var(--primary);
    text-decoration: none;
    flex-shrink: 0;
}

.link-all:hover { text-decoration: underline; }

.suggestion-list {
    display: flex;
    flex-direction: column;
    gap: .9rem;
}

.suggestion-item {
    display: flex;
    align-items: center;
    gap: .7rem;
}

.suggestion-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: .82rem;
    color: #fff;
    overflow: hidden;
}

.suggestion-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.suggestion-name {
    font-weight: 700;
    font-size: .84rem;
    color: var(--navy);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.suggestion-role {
    font-size: .76rem;
    color: var(--gray-600);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.suggestion-loc {
    display: flex;
    align-items: center;
    gap: .25rem;
    font-size: .72rem;
    color: var(--gray-500);
    margin-top: .1rem;
}

.suggestion-loc i { font-size: .75rem; }

.suggestion-btn {
    flex-shrink: 0;
    font-size: .75rem;
    padding: .35rem .65rem;
    white-space: nowrap;
}

.min-width-0 { min-width: 0; }

/* ===== TOAST ===== */
.pengguna-toast {
    position: fixed;
    bottom: 24px;
    right: 24px;
    background: var(--navy);
    color: #fff;
    padding: .85rem 1.3rem;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    font-size: .88rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: .6rem;
    z-index: 2000;
    transform: translateY(20px);
    opacity: 0;
    pointer-events: none;
    transition: all .25s ease;
}

.pengguna-toast.show { transform: translateY(0); opacity: 1; }
.pengguna-toast i { color: var(--green); font-size: 1.05rem; }

/* ===== RESPONSIVE ===== */
@media (max-width: 991.98px) {
    .user-grid { grid-template-columns: repeat(2, 1fr); }
    .cv-premium-banner-img { display: none; }
}

@media (max-width: 575.98px) {
    .user-grid { grid-template-columns: 1fr; }
    .pengguna-toast { left: 16px; right: 16px; bottom: 16px; }
    .pg-btn { width: 34px; height: 34px; font-size: .76rem; }
}

/* ======================================================
   PENGGUNA DETAIL PAGE — dp-* (sama persis dengan template)
====================================================== */

/* ======================================================
   PENGGUNA DETAIL PAGE v3 — pd-* prefix
====================================================== */

/* BREADCRUMB */
.pd-breadcrumb { background:#fff; border-bottom:1px solid var(--gray-border); padding:.55rem 0; }
.pd-breadcrumb .breadcrumb { margin:0; font-size:.82rem; }
.pd-breadcrumb .breadcrumb-item a { color:var(--primary); text-decoration:none; }
.pd-breadcrumb .breadcrumb-item.active { color:var(--gray-600); }
.pd-breadcrumb .breadcrumb-item+.breadcrumb-item::before { color:var(--gray-400); }

/* BASE CARD (template baru) */
.pd-card { background:#fff; border:1px solid var(--gray-border); border-radius:var(--radius-xl); box-shadow:var(--shadow-sm); padding:1.35rem 1.5rem; }
.pd-card-title { display:flex; align-items:center; gap:.55rem; font-weight:800; font-size:1.02rem; color:var(--navy); letter-spacing:-.2px; margin-bottom:1rem; }
.pd-card-title i { color:var(--primary); font-size:.95rem; }

/* SECTION LABEL (dipakai sidebar) */
.pd-sec-label { display:flex; align-items:center; gap:.45rem; font-size:.78rem; font-weight:700; text-transform:uppercase; letter-spacing:.5px; color:var(--gray-500); margin-bottom:1rem; }
.pd-sec-label i { font-size:.85rem; color:var(--primary); }

/* Offset anchor agar tidak tertutup section nav */
.pd-section { scroll-margin-top: 130px; }

/* ── HERO (template baru) ── */
.pd-hero { padding:0; overflow:hidden; position:relative; }
.pd-hero-cover { height:170px; background:linear-gradient(135deg,var(--primary),var(--primary-dark)); background-size:cover; background-position:center; }

/* Tanpa foto sampul: cover jadi strip tipis 50px, avatar turun agar tetap proporsional */
.pd-hero-cover:not(.cover-has-image) { height:50px; }
.pd-hero-cover:not(.cover-has-image) + .pd-hero-body .pd-hero-top { margin-top:-25px; }
.pd-hero-body { padding:0 1.5rem; }
.pd-hero-top { display:flex; justify-content:space-between; align-items:flex-end; margin-top:-58px; margin-bottom:.9rem; }

.pd-avatar-wrap { position:relative; flex-shrink:0; }
.pd-avatar { width:142px; height:142px; border-radius:50%; border:4px solid #fff; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:2.4rem; color:#fff; box-shadow:var(--shadow-md); background-size:cover; background-position:center; overflow:hidden; }
.pd-avatar img { width:100%; height:100%; object-fit:cover; border-radius:50%; }
.pd-avatar-ini { font-weight:800; font-size:2.4rem; color:#fff; }
.pd-avatar-status { position:absolute; right:8px; bottom:8px; width:18px; height:18px; border-radius:50%; background:var(--green); border:3px solid #fff; }

.pd-open-badge { display:inline-flex; align-items:center; gap:.4rem; background:var(--green-bg); color:#15803D; border:1px solid #BBF7D0; font-size:.74rem; font-weight:700; padding:.35rem .75rem; border-radius:20px; margin-bottom:.4rem; white-space:nowrap; }

.pd-name { display:flex; align-items:center; gap:.5rem; font-weight:800; font-size:1.5rem; color:var(--navy); letter-spacing:-.4px; margin-bottom:.15rem; }
.pd-verified { color:var(--primary); font-size:1.1rem; }
.pd-headline { font-size:.95rem; font-weight:600; color:var(--gray-600); margin-bottom:.45rem; }
.pd-headline strong { color:var(--navy); font-weight:700; }

.pd-meta { display:flex; align-items:center; flex-wrap:wrap; margin-top: 1Opx; gap:.45rem; font-size:.8rem; color:var(--gray-500); margin-bottom:.65rem; }
.pd-meta i { color:var(--gray-400); margin-right:.2rem; }
.pd-meta-dot { color:var(--gray-400); }

.pd-stats { display:flex; align-items:center; gap:1.1rem; font-size:.84rem; color:var(--gray-600); margin-bottom:.75rem; }
.pd-stat strong { color:var(--primary); font-weight:800; }

.pd-mutual { display:flex; align-items:center; gap:.55rem; margin-bottom:1.1rem; }
.pd-mutual-avatars { display:flex; }
.pd-mini-avatar { width:26px; height:26px; border-radius:50%; border:2px solid #fff; display:flex; align-items:center; justify-content:center; font-size:.58rem; font-weight:800; color:#fff; flex-shrink:0; overflow:hidden; }
.pd-mini-avatar img { width:100%; height:100%; object-fit:cover; border-radius:50%; }
.pd-mini-avatar + .pd-mini-avatar { margin-left:-8px; }
.pd-mutual-text { font-size:.78rem; color:var(--gray-500); }
.pd-mutual-text strong { color:var(--gray-600); font-weight:700; }

/* ACTION BUTTONS */
.pd-actions { display:flex; align-items:center; flex-wrap:wrap; gap:.55rem; }
/* Aksi hero: pojok kanan atas, sejajar dengan foto (align bawah avatar) */
/* Tombol aksi dipin di pojok kanan-atas, tepat di bawah sampul — sejajar (satu baris) */
.pd-hero-actions { position:absolute; top:184px; right:1.5rem; z-index:2; display:flex; flex-direction:row; flex-wrap:nowrap; align-items:center; justify-content:flex-end; gap:.55rem; }
.pd-btn { display:inline-flex; align-items:center; justify-content:center; gap:.45rem; padding:.58rem 1.15rem; font-size:.84rem; font-weight:700; border-radius:var(--radius-md); cursor:pointer; font-family:inherit; transition:all .2s; text-decoration:none; }
.pd-btn.connected, .pd-btn.following { background:var(--green-bg); color:var(--green); border:1.5px solid #BBF7D0; }
.pd-btn-icon { width:38px; height:38px; display:flex; align-items:center; justify-content:center; background:#fff; border:1.5px solid var(--gray-border); border-radius:var(--radius-md); color:var(--gray-600); font-size:1rem; cursor:pointer; transition:all .2s; }
.pd-btn-icon:hover { border-color:var(--primary); color:var(--primary); }
.pd-dropdown { border-radius:var(--radius-md); min-width:220px; padding:.5rem; }
.pd-dropdown .dropdown-item { display:flex; align-items:center; gap:.6rem; font-size:.84rem; font-weight:600; border-radius:8px; padding:.5rem .7rem; }
.pd-btn-connect { display:inline-flex; align-items:center; gap:.4rem; background:var(--primary); color:#fff; border:none; border-radius:var(--radius-md); padding:.5rem 1rem; font-size:.84rem; font-weight:700; cursor:pointer; transition:background .2s; font-family:inherit; white-space:nowrap; text-decoration:none; }
.pd-btn-connect:hover { background:var(--primary-dark); color:#fff; }
.pd-btn-connect.connected { background:var(--green-bg); color:var(--green); border:1.5px solid #BBF7D0; }
.pd-btn-connect.pending  { background:#FEF3C7; color:#D97706; border:1.5px solid #FDE68A; }
.pd-btn-msg { display:inline-flex; align-items:center; gap:.4rem; background:#fff; color:var(--primary); border:1.5px solid var(--primary); border-radius:var(--radius-md); padding:.48rem 1rem; font-size:.84rem; font-weight:700; cursor:pointer; transition:all .2s; font-family:inherit; white-space:nowrap; }
.pd-btn-msg:hover { background:var(--primary-light); }
.pd-btn-more { width:34px; height:34px; border-radius:50%; background:var(--gray-bg); border:1.5px solid var(--gray-border); display:flex; align-items:center; justify-content:center; font-size:.9rem; color:var(--gray-600); cursor:pointer; transition:background .2s; }
.pd-btn-more:hover { background:#E8ECF2; }

/* ── ABOUT ── */
.pd-bio { font-size:.88rem; color:var(--gray-700); line-height:1.7; margin-bottom:1rem; }
.pd-info-grid { display:flex; flex-direction:column; gap:.55rem; }
.pd-info-row { display:flex; align-items:center; gap:.75rem; font-size:.84rem; }
.pd-info-k { color:var(--gray-500); min-width:130px; display:flex; align-items:center; gap:.4rem; flex-shrink:0; font-size:.8rem; }
.pd-info-k i { color:var(--primary); font-size:.75rem; }
.pd-info-v { color:var(--navy); font-weight:600; }
.pd-sosmed-list { display:flex; flex-direction:column; gap:.35rem; }
.pd-sosmed-item { display:flex; align-items:center; gap:.55rem; font-size:.83rem; font-weight:600; color:var(--primary); text-decoration:none; padding:.3rem 0; transition:opacity .2s; }
.pd-sosmed-item:hover { opacity:.75; }
.pd-sosmed-ico { width:28px; height:28px; border-radius:6px; background:#EFF4FF; color:var(--primary); border:1px solid #D7E3FB; display:flex; align-items:center; justify-content:center; font-size:.85rem; flex-shrink:0; }

/* ── TIMELINE (Pengalaman & Pendidikan) ── */
.pd-timeline { display:flex; flex-direction:column; gap:1.1rem; }
.pd-tl-item { display:flex; gap:.9rem; align-items:flex-start; }
.pd-tl-logo { width:42px; height:42px; border-radius:10px; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:.85rem; color:#fff; flex-shrink:0; }
.pd-tl-body { flex:1; min-width:0; }
.pd-tl-title { font-weight:700; font-size:.92rem; color:var(--navy); margin-bottom:.15rem; display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; }
.pd-tl-sub { font-size:.82rem; color:var(--gray-600); margin-bottom:.2rem; }
.pd-tl-date { font-size:.77rem; color:var(--gray-400); margin-bottom:.35rem; }
.pd-dot-sep { color:var(--gray-400); margin:0 .2rem; }
.pd-badge-now { background:var(--green-bg); color:#15803D; border:1px solid #BBF7D0; font-size:.66rem; font-weight:700; padding:.1rem .45rem; border-radius:20px; white-space:nowrap; }
.pd-tl-bullets { padding-left:1.1rem; margin:0; }
.pd-tl-bullets li { font-size:.81rem; color:var(--gray-600); line-height:1.55; margin-bottom:.2rem; }

/* ── SKILLS ── */
.pd-skill-wrap { display:flex; flex-wrap:wrap; gap:.4rem; max-height:92px; overflow:hidden; transition:max-height .4s ease; }
.pd-skill-wrap.open { max-height:600px; }
.pd-skill-tag { background:#F8FAFC; border:1.5px solid var(--gray-border); border-radius:20px; font-size:.8rem; font-weight:600; color:var(--navy); padding:.3rem .75rem; transition:border-color .15s; }
.pd-skill-tag:hover { border-color:var(--primary); color:var(--primary); }
.pd-show-more { display:flex; align-items:center; gap:.35rem; background:none; border:none; color:var(--primary); font-size:.82rem; font-weight:700; cursor:pointer; padding:.55rem 0 0; font-family:inherit; transition:opacity .2s; }
.pd-show-more:hover { opacity:.8; }

/* ── SERTIFIKASI ── */
.pd-cert-list { display:flex; flex-direction:column; gap:.85rem; }
.pd-cert-item { display:flex; gap:.75rem; align-items:flex-start; }
.pd-cert-ico { width:36px; height:36px; border-radius:8px; display:flex; align-items:center; justify-content:center; color:#fff; font-size:.9rem; flex-shrink:0; }

/* ── BAHASA (template baru) ── */
.pd-lang-list { display:flex; flex-direction:column; }
.pd-lang-item { display:flex; align-items:center; justify-content:space-between; padding:.65rem 0; }
.pd-lang-item + .pd-lang-item { border-top:1px solid var(--gray-border); }
.pd-lang-name { font-size:.86rem; font-weight:700; color:var(--navy); }
.pd-lang-level { font-size:.78rem; color:var(--gray-500); }

/* ── LINK & MATCH CARD ── */
.pd-lm-card { background:linear-gradient(160deg,#f0f4ff 0%,#ffffff 60%); border-color:#D7E3FB; }
.pd-lm-header { display:flex; align-items:center; gap:.85rem; margin-bottom:1.2rem; }
.pd-lm-icon { width:44px; height:44px; border-radius:12px; background:var(--primary); color:#fff; display:flex; align-items:center; justify-content:center; font-size:1.1rem; flex-shrink:0; }
.pd-lm-title { font-weight:800; font-size:1rem; color:var(--navy); margin-bottom:.1rem; }
.pd-lm-sub { font-size:.74rem; color:var(--gray-500); }
.pd-lm-section { margin-bottom:1.1rem; padding-bottom:1.1rem; border-bottom:1px solid #EEF2FF; }
.pd-lm-section:last-child { margin-bottom:0; padding-bottom:0; border-bottom:none; }
.pd-lm-label { font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.5px; color:var(--gray-500); margin-bottom:.6rem; }
.pd-lm-list { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:.45rem; }
.pd-lm-list li { display:flex; align-items:center; gap:.5rem; font-size:.83rem; color:var(--gray-700); font-weight:500; }
.pd-lm-list li i { color:var(--primary); font-size:.8rem; flex-shrink:0; }

.pd-seniority-bar { height:8px; background:#E8ECFB; border-radius:6px; overflow:hidden; margin-top:.5rem; }
.pd-seniority-fill { height:100%; border-radius:6px; transition:width 1s ease; }
.pd-seniority-badge { display:inline-flex; align-items:center; gap:.35rem; font-size:.82rem; font-weight:700; padding:.35rem .75rem; border-radius:20px; }

.pd-ind-badge { display:inline-flex; align-items:center; gap:.35rem; font-size:.76rem; font-weight:700; padding:.3rem .7rem; border-radius:20px; white-space:nowrap; }

/* ── QUALITY SCORE ── */
.pd-qual-bar-wrap { display:flex; align-items:center; gap:.75rem; margin-bottom:.4rem; }
.pd-qual-bar { flex:1; height:10px; background:var(--gray-bg); border-radius:6px; overflow:hidden; }
.pd-qual-fill { height:100%; border-radius:6px; transition:width 1s ease; }
.pd-qual-pct { font-weight:800; font-size:.95rem; flex-shrink:0; }
.pd-qual-label { font-size:.78rem; font-weight:700; margin-bottom:.9rem; }
.pd-qual-items { display:flex; flex-direction:column; gap:.4rem; }
.pd-qual-item { display:flex; align-items:center; gap:.5rem; font-size:.8rem; }
.pd-qual-item.done { color:var(--navy); }
.pd-qual-item.miss { color:var(--gray-400); }
.pd-qual-item.done i { color:#16A34A; }
.pd-qual-item.miss i { color:var(--gray-300); }

/* ── KONTAK ── */
.pd-kontak-row { display:flex; align-items:center; gap:.75rem; padding:.6rem 0; border-bottom:1px solid var(--gray-border); }
.pd-kontak-row:last-child { border-bottom:none; }
.pd-kontak-ico { width:32px; height:32px; border-radius:50%; background:#EFF4FF; border:1px solid #D7E3FB; display:flex; align-items:center; justify-content:center; font-size:.85rem; color:var(--primary); flex-shrink:0; }
.pd-kontak-lbl { font-size:.72rem; color:var(--gray-500); }
.pd-kontak-val { font-size:.84rem; font-weight:600; color:var(--navy); }

/* ── SECTION NAV / SCROLLSPY (template baru) ── */
.pd-section-nav { position:sticky; top:72px; z-index:100; display:flex; gap:.35rem; background:#fff; border:1px solid var(--gray-border); border-radius:var(--radius-xl); box-shadow:var(--shadow-sm); padding:.45rem; overflow-x:auto; scrollbar-width:none; }
.pd-section-nav::-webkit-scrollbar { display:none; }
.pd-nav-link { padding:.45rem .95rem; border-radius:20px; font-size:.82rem; font-weight:700; color:var(--gray-600); text-decoration:none; white-space:nowrap; transition:all .2s; }
.pd-nav-link:hover { color:var(--primary); background:var(--gray-bg); }
.pd-nav-link.active { background:var(--primary); color:#fff; }

/* ── READ MORE (Tentang) ── */
.pd-about-text.collapsed { display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical; overflow:hidden; }
.pd-readmore { display:inline-flex; align-items:center; gap:.4rem; background:none; border:none; padding:0; margin-top:.5rem; font-size:.82rem; font-weight:700; color:var(--primary); cursor:pointer; font-family:inherit; transition:opacity .2s; }
.pd-readmore:hover { opacity:.8; }
.pd-readmore i { transition:transform .25s ease; }
.pd-readmore.open i { transform:rotate(180deg); }

/* ── SIDEBAR INFO KONTAK (template baru) ── */
.pd-contact-list { display:flex; flex-direction:column; gap:.25rem; }
.pd-contact-item { display:flex; align-items:center; gap:.65rem; padding:.5rem .55rem; border-radius:var(--radius-md); font-size:.84rem; font-weight:600; color:var(--gray-600); text-decoration:none; transition:all .2s; min-width:0; }
.pd-contact-item span { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pd-contact-item i { color:var(--primary); font-size:.95rem; flex-shrink:0; }
.pd-contact-item:hover { background:var(--blue-bg); color:var(--primary); }
.pd-contact-lock { display:flex; align-items:flex-start; gap:.5rem; margin-top:.75rem; padding:.7rem .85rem; background:var(--gray-bg); border:1px dashed var(--gray-border); border-radius:var(--radius-md); font-size:.76rem; color:var(--gray-500); line-height:1.5; }
.pd-contact-lock i { color:var(--gray-400); margin-top:.1rem; }

/* ── ABOUT (Tentang) ── */
.pd-about-text { font-size:.88rem; color:var(--gray-700); line-height:1.7; margin:0; }
.pd-about-sosmed { display:flex; flex-wrap:wrap; gap:.5rem; }
.pd-soc-link { width:34px; height:34px; border-radius:50%; background:#EFF4FF; border:1px solid #D7E3FB; display:flex; align-items:center; justify-content:center; color:var(--primary); font-size:.9rem; transition:background .15s,color .15s; text-decoration:none; }
.pd-soc-link:hover { background:var(--primary); color:#fff; }

/* ── TIMELINE extras ── */
.pd-tl-company { font-size:.83rem; color:var(--gray-600); margin-bottom:.15rem; font-weight:500; }
.pd-tl-dur { color:var(--gray-400); font-size:.75rem; }
.pd-tl-desc { font-size:.8rem; color:var(--gray-600); line-height:1.6; margin-top:.35rem; }

/* ── SKILLS extras ── */
.pd-skill-hidden { display:none; }
.pd-skill-wrap.open .pd-skill-hidden { display:inline-flex; }
.pd-skill-toggle { display:flex; align-items:center; gap:.35rem; background:none; border:none; color:var(--primary); font-size:.82rem; font-weight:700; cursor:pointer; padding:.55rem 0 0; font-family:inherit; transition:opacity .2s; }
.pd-skill-toggle:hover { opacity:.8; }

/* ── PENGALAMAN / PENDIDIKAN / SERTIFIKASI (template baru) ── */
.pd-exp-item { display:flex; gap:.95rem; }
.pd-exp-item + .pd-exp-item { margin-top:1.15rem; padding-top:1.15rem; border-top:1px solid var(--gray-border); }
.pd-exp-logo { width:48px; height:48px; flex-shrink:0; border-radius:var(--radius-md); display:flex; align-items:center; justify-content:center; font-weight:800; font-size:1rem; color:#fff; }
.pd-exp-logo i { font-size:1.15rem; }
.pd-exp-content { flex-grow:1; min-width:0; }
.pd-exp-role { display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; font-weight:800; font-size:.92rem; color:var(--navy); margin-bottom:.1rem; }
.pd-badge-now { background:#DCFCE7; color:#16A34A; border:1px solid #BBF7D0; font-size:.68rem; font-weight:700; padding:.12rem .5rem; border-radius:20px; white-space:nowrap; }
.pd-exp-company { font-size:.82rem; font-weight:600; color:var(--gray-600); margin-bottom:.15rem; }
.pd-exp-type { color:var(--gray-500); font-weight:500; }
.pd-exp-period { font-size:.78rem; color:var(--gray-500); margin-bottom:.15rem; }
.pd-exp-loc { display:flex; align-items:center; gap:.3rem; font-size:.76rem; color:var(--gray-500); margin-bottom:.5rem; }
.pd-exp-loc i { color:var(--gray-400); font-size:.78rem; }
.pd-exp-desc { font-size:.82rem; color:var(--gray-600); line-height:1.6; margin:.4rem 0 0; }
.pd-exp-desc.collapsed { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.pd-exp-readmore { display:inline-flex; align-items:center; gap:.35rem; background:none; border:none; padding:0; margin-top:.35rem; font-size:.78rem; font-weight:700; color:var(--primary); cursor:pointer; font-family:inherit; transition:opacity .2s; }
.pd-exp-readmore:hover { opacity:.8; }
.pd-exp-readmore i { transition:transform .25s ease; }
.pd-exp-readmore.open i { transform:rotate(180deg); }
.pd-cred-link { display:inline-flex; align-items:center; gap:.35rem; margin-top:.35rem; font-size:.8rem; font-weight:700; color:var(--primary); text-decoration:none; }
.pd-cred-link:hover { text-decoration:underline; }

/* ── EMPTY HINT ── */
.pd-empty-hint { font-size:.85rem; color:var(--gray-400); margin:0; text-align:center; padding:.5rem 0; }

/* ── RESPONSIVE (template baru) ── */
@media (max-width:767.98px) {
    .pd-hero-cover { height:140px; }
    .pd-hero-body { padding:0 1.1rem 1.1rem; }
    .pd-hero-top { margin-top:-44px; align-items:flex-end; flex-wrap:wrap; gap:.6rem; }
    .pd-avatar { width:106px; height:106px; font-size:1.8rem; }
    .pd-name { font-size:1.25rem; }
    .pd-hero-actions { position:static; top:auto; right:auto; width:100%; flex-direction:row; justify-content:stretch; }
    .pd-hero-actions .pd-btn-connect, .pd-hero-actions .pd-btn-msg { flex:1; justify-content:center; }
    .pd-card { padding:1.1rem 1.1rem; }
    .pd-section { scroll-margin-top:150px; }
    .pd-section-nav { top:64px; }
}
@media (max-width:575.98px) {
    .pd-open-badge { font-size:.68rem; padding:.3rem .6rem; }
    .pd-stats { flex-wrap:wrap; gap:.6rem 1rem; }
    .pd-mutual-text { font-size:.74rem; }
}

/* ── INFO + SOSMED (Tab Tentang) ── */
.pd-info-sosmed-row { display:flex; gap:0; flex-wrap:wrap; align-items:flex-start; }
.pd-info-table-wrap { flex:1 1 55%; min-width:220px; padding-right:2rem; border-right:1.5px solid var(--gray-border); }
.pd-sosmed-wrap { flex:1 1 35%; min-width:160px; padding-left:2rem; display:flex; flex-direction:column; gap:.55rem; }

.pd-info-table { width:100%; border-collapse:collapse; }
.pd-info-table tr { border-bottom:1px solid var(--gray-border); }
.pd-info-table tr:last-child { border-bottom:none; }
.pd-info-table td { padding:.7rem 0; vertical-align:middle; }
.pd-info-label { font-size:.76rem; color:var(--gray-400); font-weight:500; width:38%; padding-right:.75rem; white-space:nowrap; letter-spacing:.01em; }
.pd-info-val { font-size:.875rem; color:var(--navy); font-weight:700; }
.pd-badge-aktif { display:inline-flex; align-items:center; gap:.3rem; background:#DCFCE7; color:#16A34A; border:1px solid #BBF7D0; font-size:.74rem; font-weight:700; padding:.22rem .7rem; border-radius:20px; }
.pd-badge-aktif::before { content:''; width:6px; height:6px; border-radius:50%; background:#16A34A; display:inline-block; }
.pd-badge-bekerja { display:inline-flex; align-items:center; gap:.3rem; background:var(--blue-bg); color:var(--primary); border:1px solid #D7E3FB; font-size:.74rem; font-weight:700; padding:.22rem .7rem; border-radius:20px; }
.pd-badge-bekerja::before { content:''; width:6px; height:6px; border-radius:50%; background:var(--primary); display:inline-block; }

.pd-sosmed-title { font-size:.76rem; font-weight:700; color:var(--gray-400); letter-spacing:.06em; text-transform:uppercase; margin-bottom:.25rem; }
.pd-sosmed-item { display:flex; align-items:center; gap:.65rem; text-decoration:none; padding:.2rem 0; transition:opacity .15s; }
.pd-sosmed-item:hover { opacity:.75; }
.pd-sosmed-icon { width:30px; height:30px; border-radius:8px; display:flex; align-items:center; justify-content:center; font-size:.92rem; color:#fff; flex-shrink:0; }
.pd-sosmed-label { font-size:.82rem; font-weight:600; word-break:break-all; line-height:1.3; }

.pd-about-text { font-size:.88rem; color:var(--gray-700); line-height:1.8; margin:0; }

@media (max-width:575.98px) {
    .pd-info-table-wrap { border-right:none; padding-right:0; padding-bottom:1.25rem; border-bottom:1.5px solid var(--gray-border); flex-basis:100%; }
    .pd-sosmed-wrap { padding-left:0; padding-top:1.25rem; flex-basis:100%; }
}

/* ── PENGGUNA SERUPA ── */
.pd-similar-card { padding:1.25rem 1.5rem; }
.pd-similar-title { font-weight:800; font-size:1rem; color:var(--navy); display:flex; align-items:center; gap:.45rem; }
.pd-similar-title i { color:var(--primary); }
.pd-similar-all { font-size:.82rem; font-weight:700; color:var(--primary); text-decoration:none; }
.pd-similar-all:hover { text-decoration:underline; }
.pd-similar-item { display:flex; align-items:center; gap:.85rem; padding:.75rem 0; border-top:1px solid var(--gray-border); }
.pd-similar-avatar { position:relative; width:48px; height:48px; min-width:48px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:.82rem; color:#fff; text-decoration:none; overflow:hidden; flex-shrink:0; }
.pd-similar-avatar img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; border-radius:50%; }
.pd-similar-info { flex:1; min-width:0; }
.pd-similar-name { display:block; font-weight:700; font-size:.9rem; color:var(--navy); text-decoration:none; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; line-height:1.3; }
.pd-similar-name:hover { color:var(--primary); }
.pd-similar-role { font-size:.78rem; color:var(--gray-500); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-top:.1rem; }
.pd-similar-btn { flex-shrink:0; font-size:.78rem; font-weight:700; color:var(--primary); border:1.5px solid var(--primary); border-radius:10px; padding:.38rem .85rem; text-decoration:none; white-space:nowrap; transition:background .15s,color .15s; }
.pd-similar-btn:hover { background:var(--primary); color:#fff; }