/* ==========================================================================
   HALAMAN PUBLIK: STRUKTUR ORGANISASI PERPUSTAKAAN IKKH GARUT
   Modern Professional Organigram (Tanpa Card Pembungkus, Garis Presisi 100%, 1 Baris Nama)
   ========================================================================== */

/* Page Banner */
.page-banner {
  background: linear-gradient(135deg, #078f86 0%, #09a89e 100%);
  color: #ffffff;
  padding: 3.5rem 0 3rem;
  position: relative;
  overflow: hidden;
}

.page-banner::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -20%;
  width: 600px;
  height: 600px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.12) 0%, transparent 70%);
  pointer-events: none;
}

.breadcrumb-nav {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.84rem;
  color: rgba(255, 255, 255, 0.8);
  margin-bottom: 0.75rem;
}

.breadcrumb-nav a {
  color: #ffffff;
  text-decoration: none;
  transition: opacity 0.2s ease;
}

.breadcrumb-nav a:hover {
  opacity: 0.8;
}

.page-banner-title {
  font-size: 2.25rem;
  font-weight: 800;
  line-height: 1.2;
  margin-bottom: 0.5rem;
  letter-spacing: -0.01em;
}

.page-banner-desc {
  font-size: 1.05rem;
  color: rgba(255, 255, 255, 0.9);
  max-width: 720px;
  line-height: 1.5;
  margin: 0;
}

/* Section Container */
.so-section {
  padding: 3.5rem 0 5rem;
  background: #f8fafc;
}

/* ==========================================================================
   MODERN OPEN STAGE (TANPA CARD PEMBUNGKUS LUAR)
   ========================================================================== */
.so-stage-wrapper {
  overflow-x: auto;
  padding: 1rem 0.5rem 2rem;
}

.so-stage-canvas {
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
  position: relative;
}

/* Clean Header (Tanpa Bingkai) */
.so-clean-header {
  text-align: center;
  margin-bottom: 3rem;
  position: relative;
}

.so-header-badge {
  display: inline-block;
  background: rgba(9, 168, 158, 0.12);
  color: #078f86;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  padding: 0.3rem 0.85rem;
  border-radius: 20px;
  margin-bottom: 0.75rem;
  border: 1px solid rgba(9, 168, 158, 0.25);
}

.so-header-title {
  font-size: 2.15rem;
  font-weight: 900;
  color: #0f172a;
  letter-spacing: -0.02em;
  margin: 0 0 0.4rem;
  line-height: 1.2;
}

.so-header-institute {
  font-size: 1.15rem;
  font-weight: 700;
  color: #09a89e;
  margin: 0;
  letter-spacing: -0.01em;
}

/* ==========================================================================
   PURE CSS ORGANIGRAM TREE ARCHITECTURE (100% GARIS PRESISI DENGAN FOTO)
   ========================================================================== */
.so-tree-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  position: relative;
}

/* Level Single / Centered Row */
.so-single-row {
  display: flex;
  justify-content: center;
  width: 100%;
  position: relative;
}

/* Garis Batang Vertikal Antar-Level */
.so-stem-down {
  width: 2px;
  height: 38px;
  background: #09a89e;
  margin: 0 auto;
}

/* ==========================================================================
   KARTU NODE PERSONIL MODERN EXECUTIVE (PREMIUM SLATE, PILL BADGE & AURA GLOW)
   ========================================================================== */
.so-node-card {
  width: 340px;
  min-width: 320px;
  max-width: 92vw;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 2;
}

.so-node-card:hover {
  transform: translateY(-5px);
}

/* Bingkai Foto Melengkung Kubah (Arch Frame) dengan Ring Putih & Ambient Shadow */
.so-node-photo-arch {
  width: 96px;
  height: 118px;
  border-radius: 48px 48px 0 0;
  border: 3.5px solid #ffffff;
  background: #f8fafc;
  overflow: hidden;
  margin-bottom: -1px;
  position: relative;
  z-index: 3;
  box-shadow: 0 8px 24px -4px rgba(15, 23, 42, 0.12);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.so-node-card:hover .so-node-photo-arch {
  box-shadow: 0 12px 28px -2px rgba(9, 168, 158, 0.30);
  border-color: #ffffff;
  transform: scale(1.02);
}

.so-node-photo-arch img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}

.so-node-card:hover .so-node-photo-arch img {
  transform: scale(1.05);
}

.so-node-photo-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #09a89e 0%, #066d66 100%);
  color: #ffffff;
}

.so-node-initials {
  font-size: 1.3rem;
  font-weight: 900;
  letter-spacing: 0.05em;
}

/* Kotak Body Kartu Executive Modern */
.so-node-body {
  width: 100%;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.04), 0 10px 24px -3px rgba(15, 23, 42, 0.07);
  text-align: center;
  padding: 1.1rem 1.35rem 1rem;
  position: relative;
  z-index: 2;
  box-sizing: border-box;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  overflow: hidden;
}

/* Luminous Teal Accent Line di Puncak Card */
.so-node-body::before {
  content: '';
  position: absolute;
  top: 0;
  left: 20%;
  right: 20%;
  height: 2.5px;
  background: linear-gradient(90deg, transparent, #09a89e, transparent);
  opacity: 0.75;
  transition: all 0.35s ease;
}

.so-node-card:hover .so-node-body {
  border-color: #a7f3d0;
  box-shadow: 0 16px 36px -6px rgba(9, 168, 158, 0.18), 0 8px 16px -4px rgba(15, 23, 42, 0.04);
}

.so-node-card:hover .so-node-body::before {
  left: 8%;
  right: 8%;
  opacity: 1;
}

/* NAMA LENGKAP: TIPOGRAFI EXECUTIVE MODERN (1 BARIS PENUH) */
.so-node-name {
  font-size: 0.94rem;
  font-weight: 800;
  color: #0f172a;
  line-height: 1.35;
  margin: 0 0 0.6rem;
  white-space: nowrap;       /* KUNCI: Mencegah teks nama menjadi 2 baris */
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: -0.015em;
  padding: 0 0.25rem;
  transition: color 0.2s ease;
}

.so-node-card:hover .so-node-name {
  color: #078f86;
}

/* BADGE JABATAN & INSTITUSI: MODERN CAPSULE PILL DESIGN */
.so-node-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  background: transparent;
  padding: 0;
  box-shadow: none;
  border-radius: 0;
}

/* Pill Kapsul Jabatan yang Elegan */
.so-node-position {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #ffffff;
  background: linear-gradient(135deg, #09a89e 0%, #067a72 100%);
  padding: 0.32rem 1.15rem;
  border-radius: 9999px;
  box-shadow: 0 3px 10px rgba(9, 168, 158, 0.24);
  line-height: 1.3;
  white-space: nowrap;
  transition: all 0.25s ease;
}

.so-node-card:hover .so-node-position {
  box-shadow: 0 5px 16px rgba(9, 168, 158, 0.36);
  transform: translateY(-1px);
}

/* Subteks Institusi Bersih & Berkelas */
.so-node-unit {
  font-size: 0.69rem;
  font-weight: 600;
  color: #64748b;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  line-height: 1.25;
  white-space: nowrap;
  letter-spacing: -0.005em;
  transition: color 0.2s ease;
}

.so-node-unit svg {
  color: #09a89e;
  flex-shrink: 0;
}

.so-node-card:hover .so-node-unit {
  color: #334155;
}

/* ==========================================================================
   SISTEM CABANG HIERARKI MATEMATIS (100% PRESISI, TANPA PUTUS, ADA GARIS KE BAWAH)
   ========================================================================== */
.so-branch-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  margin: 0;
  padding: 0;
  position: relative;
}

/* Garis Batang Vertikal dari Kepala Perpustakaan menuju Palang Horizontal */
.so-branch-wrapper .so-stem-down {
  width: 2px;
  height: 38px;
  background: #09a89e;
  margin: 0 auto;
  position: relative;
  z-index: 2;
  flex-shrink: 0;
}

/* Wadah Baris Kolom Cabang Personil */
.so-tree-cols {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  position: relative;
  width: 100%;
  margin-top: -1px;  /* Menyatu erat dengan garis vertikal di atasnya (0 gap / tanpa putus) */
  padding: 0;
}

/* Tiap Kolom Personil Cabang */
.so-tree-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  padding: 0 1.5rem;
}

/* Garis Palang Horizontal Pembagi Cabang (Tepat di top: 0) */
.so-tree-col::before {
  content: '';
  position: absolute;
  top: 0;
  height: 2px;
  background: #09a89e;
  z-index: 1;
}

/* Kolom Pertama (Kiri): Garis dari tengah foto (50%) ke batas kanan kolom (100%) */
.so-tree-col:first-child::before {
  left: 50%;
  right: -1px;
}

/* Kolom Terakhir (Kanan): Garis dari batas kiri kolom (0%) ke tengah foto (50%) */
.so-tree-col:last-child::before {
  left: -1px;
  right: 50%;
}

/* Kolom Tengah (Jika ada 3 orang atau lebih): Garis horizontal penuh dari 0% ke 100% */
.so-tree-col:not(:first-child):not(:last-child)::before {
  left: -1px;
  right: -1px;
}

/* Jika hanya 1 orang, tidak perlu palang horizontal */
.so-tree-col:only-child::before {
  display: none;
}

/* Garis Vertikal Cabang Turun ke Tiap Pustakawan / Staf */
.so-tree-stem-down {
  width: 2px;
  height: 36px;
  background: #09a89e;
  margin: 0 auto;
  position: relative;
  z-index: 2;
  flex-shrink: 0;
}

/* Responsive Media Queries */
@media (max-width: 768px) {
  .so-header-title {
    font-size: 1.65rem;
  }

  .so-header-institute {
    font-size: 1rem;
  }

  .so-node-card {
    width: 300px;
    min-width: 280px;
  }

  .so-node-name {
    font-size: 0.86rem;
  }

  .so-tree-col {
    padding: 0 0.75rem;
  }
}