/* ================================================================
   STRUKTUR ORGANISASI — Modern Design
   Dinas Perhubungan Provinsi Papua Tengah
   ================================================================ */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

:root {
    --so-primary:     #0f6e63;
    --so-primary-lt:  #1a9688;
    --so-blue:        #0369a1;
    --so-blue-lt:     #0ea5e9;
    --so-accent:      #f59e0b;
    --so-dark:        #0d2b28;
    --so-light:       #f0faf9;
    --so-border:      #b2ddd9;
    --so-muted:       #6b8f8c;
    --so-white:       #ffffff;
    --so-conn:        #94d5cf;
    --so-conn-w:      2px;
    --so-shadow:      0 6px 28px rgba(15,110,99,0.12);
    --so-shadow-h:    0 14px 40px rgba(15,110,99,0.2);
    --so-radius:      16px;
    --so-font:        'Plus Jakarta Sans', sans-serif;
}

/* ----------------------------------------------------------------
   WRAPPER
---------------------------------------------------------------- */
.so-wrapper {
    background: linear-gradient(150deg, #e8f8f6 0%, #f7fdfc 55%, #dff0f8 100%);
    min-height: 60vh;
    padding: 0 0 80px;
    font-family: var(--so-font);
    position: relative;
    overflow: hidden;
}
.so-wrapper::before {
    content: '';
    position: absolute;
    top: -100px; right: -100px;
    width: 380px; height: 380px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(15,110,99,0.06) 0%, transparent 70%);
    pointer-events: none;
}

/* ----------------------------------------------------------------
   BREADCRUMB
---------------------------------------------------------------- */
.so-breadcrumb {
    padding: 20px 0 14px;
}
.so-breadcrumb .breadcrumb {
    background: transparent;
    padding: 0; margin: 0;
    font-size: 13px;
    font-family: var(--so-font);
}
.so-breadcrumb .breadcrumb-item a { color: var(--so-primary-lt); }
.so-breadcrumb .breadcrumb-item.active { color: var(--so-muted); }

/* ----------------------------------------------------------------
   LAYOUT SECTIONS
---------------------------------------------------------------- */
.so-section--head {
    display: flex;
    justify-content: center;
    margin-top: 10px;
}
.so-row {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 10px;
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 20px;
    scrollbar-width: thin;
    scrollbar-color: var(--so-border) transparent;
}
.so-row::-webkit-scrollbar { height: 4px; }
.so-row::-webkit-scrollbar-thumb { background: var(--so-border); border-radius: 10px; }

.so-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1 1 0;
    min-width: 178px;
    max-width: 215px;
}

/* ----------------------------------------------------------------
   CONNECTORS
---------------------------------------------------------------- */
.so-conn-v {
    width: var(--so-conn-w);
    height: 32px;
    background: var(--so-conn);
    margin: 0 auto;
    flex-shrink: 0;
}
.so-conn-v--top {
    height: 26px;
}
.so-hline-container {
    display: flex;
    justify-content: center;
    margin: 0 auto;
    width: 88%;
    max-width: 1400px;
}
.so-hline {
    width: 100%;
    height: var(--so-conn-w);
    background: linear-gradient(90deg, transparent, var(--so-conn) 8%, var(--so-conn) 92%, transparent);
}

/* ----------------------------------------------------------------
   BASE CARD
---------------------------------------------------------------- */
.so-card {
    position: relative;
    background: var(--so-white);
    border-radius: var(--so-radius);
    box-shadow: var(--so-shadow);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: 100%;
    overflow: hidden;
    border: 1.5px solid rgba(178,221,217,0.45);
    transition: transform 0.28s ease, box-shadow 0.28s ease;
    padding-bottom: 18px;
}
.so-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--so-shadow-h);
}

/* Top bar accent */
.so-card__top-bar {
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 5px;
    background: linear-gradient(90deg, var(--so-primary), var(--so-primary-lt), #06b6d4);
    border-radius: var(--so-radius) var(--so-radius) 0 0;
}

/* Ribbon */
.so-card__ribbon {
    position: absolute;
    top: 16px; right: -18px;
    background: linear-gradient(135deg, var(--so-accent), #f97316);
    color: #fff;
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 4px 26px 4px 12px;
    border-radius: 4px 0 0 4px;
    box-shadow: 0 2px 8px rgba(245,158,11,0.3);
}

/* Badge */
.so-badge {
    display: inline-block;
    color: #fff;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 3px 14px;
    border-radius: 0 0 10px 10px;
    margin-bottom: 8px;
}
.so-badge--green { background: linear-gradient(135deg, var(--so-primary), var(--so-primary-lt)); }
.so-badge--blue  { background: linear-gradient(135deg, var(--so-blue), var(--so-blue-lt)); }

/* ----------------------------------------------------------------
   PHOTO
---------------------------------------------------------------- */
.so-card__photo-wrap {
    position: relative;
    width: 90px; height: 90px;
    border-radius: 50%;
    overflow: hidden;
    border: 3px solid var(--so-primary-lt);
    background: var(--so-light);
    margin: 0 auto 12px;
    flex-shrink: 0;
}
.so-card__photo-wrap--head {
    width: 120px; height: 120px;
    border-width: 4px;
    border-color: var(--so-primary);
    margin-top: 24px;
}
.so-card--blue .so-card__photo-wrap {
    border-color: var(--so-blue-lt);
}
.so-card__ring {
    position: absolute;
    inset: -7px;
    border-radius: 50%;
    border: 2px dashed rgba(15,110,99,0.22);
    animation: soSpin 20s linear infinite;
    pointer-events: none;
}
@keyframes soSpin { to { transform: rotate(360deg); } }

.so-card__photo {
    width: 100%; height: 100%;
    object-fit: cover;
    object-position: top center;
    display: block;
}
.so-card__photo-placeholder {
    width: 100%; height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #d1fae5, #e0f2fe);
    font-size: 32px;
    color: var(--so-primary);
}
.so-card__photo-placeholder--sm { font-size: 22px; }

/* ----------------------------------------------------------------
   CARD BODY TEXT
---------------------------------------------------------------- */
.so-card__body {
    padding: 0 14px;
    width: 100%;
}
.so-card__jabatan {
    font-size: 11px;
    font-weight: 700;
    color: var(--so-primary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    line-height: 1.4;
    min-height: 30px;
}
.so-card--blue .so-card__jabatan { color: var(--so-blue); }
.so-card__divider {
    width: 32px; height: 2px;
    background: linear-gradient(90deg, var(--so-primary), var(--so-primary-lt));
    border-radius: 2px;
    margin: 8px auto;
}
.so-card--blue .so-card__divider {
    background: linear-gradient(90deg, var(--so-blue), var(--so-blue-lt));
}
.so-card__nama {
    font-size: 12.5px;
    font-weight: 800;
    color: var(--so-dark);
    line-height: 1.4;
    margin-bottom: 4px;
}
.so-card__nip {
    font-size: 10.5px;
    color: var(--so-muted);
    font-weight: 500;
}

/* ---- KEPALA DINAS ---- */
.so-card--head {
    max-width: 300px;
    border-color: rgba(15,110,99,0.3);
    background: linear-gradient(160deg, #fff 60%, #e8f8f6 100%);
}
.so-card--head .so-card__jabatan { font-size: 12px; min-height: auto; }
.so-card--head .so-card__nama    { font-size: 14px; }

/* ---- MID CARDS ---- */
.so-card--mid {
    border-top: 3px solid var(--so-primary-lt);
}
.so-card--blue { border-top-color: var(--so-blue-lt); }

/* ----------------------------------------------------------------
   SUB LEVEL (Seksi / Kasubbag)
---------------------------------------------------------------- */
.so-sublevel {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
    position: relative;
}
.so-sublevel::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 0; bottom: 0;
    width: var(--so-conn-w);
    background: var(--so-conn);
    transform: translateX(-50%);
    z-index: 0;
}
.so-subcard {
    display: flex;
    align-items: center;
    gap: 9px;
    background: linear-gradient(90deg, #f0fafa, #fff);
    border: 1.5px solid var(--so-border);
    border-left: 4px solid var(--so-primary-lt);
    border-radius: 10px;
    padding: 9px 10px;
    position: relative;
    z-index: 1;
    transition: transform 0.22s ease, box-shadow 0.22s ease, border-left-color 0.22s;
    text-align: left;
}
.so-subcard:hover {
    transform: translateX(4px);
    box-shadow: 0 4px 16px rgba(15,110,99,0.12);
    border-left-color: var(--so-primary);
}
.so-subcard__photo {
    width: 52px; height: 52px;
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid var(--so-border);
    background: var(--so-light);
    flex-shrink: 0;
}
.so-subcard__info { flex: 1; min-width: 0; }
.so-subcard__jabatan {
    font-size: 10px;
    font-weight: 700;
    color: var(--so-primary);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    line-height: 1.3;
    margin-bottom: 3px;
}
.so-subcard__nama {
    font-size: 11px;
    font-weight: 800;
    color: var(--so-dark);
    line-height: 1.3;
    margin-bottom: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ----------------------------------------------------------------
   RESPONSIVE
---------------------------------------------------------------- */
@media (max-width: 992px) {
    .so-row { gap: 8px; }
    .so-col { min-width: 160px; max-width: 195px; }
    .so-card--head { max-width: 270px; }
    .so-hline-container { width: 94%; }
}
@media (max-width: 600px) {
    .so-col { min-width: 148px; max-width: 175px; }
    .so-card--head { max-width: 240px; }
    .so-card__photo-wrap--head { width: 96px; height: 96px; }
    .so-card__nama { font-size: 11.5px; }
    .so-card__jabatan { font-size: 10px; }
}