.ocm {
  --bg-color:      #ffffff;
  --node-bg:       #ffffff;
  --border-color:  #e5e7eb;
  --text-primary:  #1f2937;
  --text-secondary:#6b7280;
  --text-light:    #9ca3af;
  --shadow-soft:   0 4px 12px rgba(0,0,0,.05);
  --shadow-hover:  0 8px 25px rgba(0,0,0,.1);

  font-family: 'Inter', sans-serif;
  background:  var(--bg-color);
  color:       var(--text-primary);
}

.ocm * { box-sizing: border-box; }

.ocm .ocm-container {
  width:          100%;
  margin:         0 auto;
  display:        flex;
  flex-direction: column;
  align-items:    center;
  padding:        2rem 1rem;
  position:       relative;
  z-index:        1;
}

.ocm .ocm-chart-wrapper {
  width:           100%;
  padding:         2rem 0;
  display:         flex;
  justify-content: center;
}

.ocm .ocm-chart {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  width:          100%;
  position:       relative;
}

/* ─── BÖLÜM ─── */
.ocm .ocm-section {
  margin-bottom: 4rem;
  width:         100%;
}

.ocm .ocm-section-title {
  text-align:    center;
  font-size:     2rem;
  font-weight:   700;
  margin-bottom: 2rem;
  color:         var(--text-primary);
  padding:       1rem 2rem;
  background:    var(--bg-color);
  border-radius: 12px;
  box-shadow:    var(--shadow-soft);
  border:        1px solid var(--border-color);
}

.ocm .ocm-level {
  display:         flex;
  justify-content: center;
  align-items:     flex-start;
  gap:             2rem;
  margin-bottom:   2rem;
  position:        relative;
  z-index:         2;
  flex-wrap:       wrap;
}

/* ─── KART ─── */
.ocm .ocm-node {
  background:    var(--node-bg);
  border:        2px solid var(--border-color);
  border-top:    6px solid var(--border-color);
  border-radius: 16px;
  padding:       1.5rem 1.75rem;
  width:         calc(25% - 1.5rem);
  min-height:    120px;
  text-align:    center;
  box-shadow:    var(--shadow-soft);
  transition:    all .25s cubic-bezier(.4,0,.2,1);
  display:       flex;
  flex-direction: column;
  justify-content: center;
  position:      relative;
  overflow:      hidden;
  flex:          0 0 calc(25% - 1.5rem);
}

/* Başkan kartı — daima bölüm rengiyle */
.ocm .ocm-node-baskan {
  border-color:     var(--section-color, var(--border-color)) !important;
  border-top-color: var(--section-color, var(--border-color)) !important;
}

/* Başkan yardımcısı kartı — section rengiyle ama daha ince border-top */
.ocm .ocm-node-vbaskan {
  border-color:     var(--section-color, var(--border-color)) !important;
  border-top-color: var(--section-color, var(--border-color)) !important;
  border-top-width: 3px !important;
  opacity:          0.88;
}

/* Normal kartlar — always_colored=1 ise daima renkli */
.ocm .ocm-section[data-always-colored="1"] .ocm-node {
  border-color:     var(--section-color, var(--border-color)) !important;
  border-top-color: var(--section-color, var(--border-color)) !important;
}

/* Normal kartlar — always_colored=0 ise gri, hover'da renkli */
.ocm .ocm-section[data-always-colored="0"] .ocm-node:not(.ocm-node-baskan) {
  border-color:     var(--border-color) !important;
  border-top-color: var(--border-color) !important;
}

/* Hover efekti */
.ocm .ocm-node:hover {
  transform:        translateY(-8px) scale(1.02);
  box-shadow:       var(--shadow-hover);
  border-color:     var(--section-color, var(--border-color)) !important;
  border-top-color: var(--section-color, var(--border-color)) !important;
}

/* ─── KART METİNLERİ ─── */
.ocm .ocm-node-title {
  font-size:      1rem;
  font-weight:    700;
  margin-bottom:  .5rem;
  letter-spacing: .5px;
  text-transform: uppercase;
}

.ocm .ocm-node-subtitle {
  font-size:      .8rem;
  color:          var(--text-light);
  font-weight:    500;
  margin-bottom:  .5rem;
  text-transform: uppercase;
}

.ocm .ocm-node-role {
  font-size:      .75rem;
  color:          var(--text-secondary);
  font-weight:    600;
  font-style:     italic;
  text-transform: uppercase;
}

/* ─── MOBİL ─── */
@media (max-width: 768px) {
  .ocm .ocm-level {
    flex-direction: column;
    align-items:    center;
    gap:            1.5rem;
    margin-bottom:  2rem;
  }
  .ocm .ocm-node {
    width:    90%;
    max-width:320px;
    flex:     0 0 auto;
  }
  .ocm .ocm-section-title {
    font-size: 1.6rem;
  }
}