/* Renkli Avatar Tooltip Sistemi */

.student-education-tooltip {

  max-width: 380px;

  font-size: 12px;

  line-height: 1.4;

  background: linear-gradient(135deg, #f8f9fa, #e9ecef);

  border-radius: 12px;

  padding: 16px;

  box-shadow: 0 8px 25px rgba(0,0,0,0.2);

  border: 1px solid rgba(255,255,255,0.8);

}



.education-header {

  font-weight: bold;

  margin-bottom: 12px;

  color: #2c3e50;

  border-bottom: 2px solid #3498db;

  padding-bottom: 8px;

  font-size: 14px;

}



.student-info {

  margin-bottom: 8px;

  padding: 8px 12px;

  background: linear-gradient(135deg, rgba(52, 152, 219, 0.15), rgba(52, 152, 219, 0.05));

  border-radius: 8px;

  border-left: 4px solid #3498db;

  font-size: 13px;

  font-weight: 500;

  color: #2c3e50;

}



.group-info {

  margin-bottom: 12px;

  padding: 8px 12px;

  background: linear-gradient(135deg, rgba(155, 89, 182, 0.15), rgba(155, 89, 182, 0.05));

  border-radius: 8px;

  border-left: 4px solid #9b59b6;

  font-weight: 600;

  color: #8e44ad;

  font-size: 12px;

}



.education-details {

  color: #666;

}



.program-block {

  margin-bottom: 15px;

  border-radius: 10px;

  overflow: hidden;

  box-shadow: 0 3px 12px rgba(0,0,0,0.1);

}



.program-info {

  padding: 12px 16px;

  font-weight: bold;

  color: white;

  text-shadow: 1px 1px 2px rgba(0,0,0,0.5);

  margin-bottom: 0;

  font-size: 13px;

  position: relative;

}



.program-info::after {

  content: '';

  position: absolute;

  bottom: 0;

  left: 0;

  right: 0;

  height: 2px;

  background: rgba(255,255,255,0.3);

}



/* Program renkleri - Gradient backrounds */

.program-info.zihinsel {

  background: linear-gradient(135deg, #e74c3c 0%, #c0392b 50%, #a93226 100%);

}



.program-info.otizm {

  background: linear-gradient(135deg, #9b59b6 0%, #8e44ad 50%, #7d3c98 100%);

}



.program-info.bedensel {

  background: linear-gradient(135deg, #27ae60 0%, #229954 50%, #1e8449 100%);

}



.program-info.ogrenme {

  background: linear-gradient(135deg, #f39c12 0%, #e67e22 50%, #d68910 100%);

}



.program-info.isitme {

  background: linear-gradient(135deg, #2980b9 0%, #3498db 50%, #5dade2 100%);

}



.module-block {

  margin-bottom: 10px;

  background: linear-gradient(135deg, rgba(255,255,255,0.9), rgba(248,249,250,0.8));

  border-radius: 8px;

  padding: 10px 14px;

  border-left: 5px solid #34495e;

  box-shadow: 0 2px 8px rgba(0,0,0,0.05);

  position: relative;

}



.module-block::before {

  content: '';

  position: absolute;

  top: 0;

  left: 0;

  right: 0;

  height: 1px;

  background: linear-gradient(to right, transparent, rgba(52, 73, 94, 0.3), transparent);

}



.module-name {

  font-weight: 700;

  color: #2c3e50;

  display: block;

  margin-bottom: 6px;

  font-size: 12px;

  text-transform: uppercase;

  letter-spacing: 0.5px;

}



.sections-list {

  margin-left: 12px;

  margin-top: 6px;

}



.section-item {

  display: block;

  margin-bottom: 3px;

  color: #555;

  padding: 3px 6px;

  background: rgba(236, 240, 241, 0.5);

  border-radius: 4px;

  font-size: 11px;

  transition: all 0.2s ease;

  border-left: 2px solid #95a5a6;

}



.section-item:hover {

  background: rgba(52, 152, 219, 0.1);

  border-left-color: #3498db;

  transform: translateX(2px);

}



.program-separator {

  height: 2px;

  background: linear-gradient(to right, transparent, #bdc3c7, transparent);

  margin: 15px 0;

  position: relative;

}



.program-separator::before {

  content: '✦';

  position: absolute;

  top: -8px;

  left: 50%;

  transform: translateX(-50%);

  background: #f8f9fa;

  color: #bdc3c7;

  padding: 0 8px;

  font-size: 10px;

}



/* Özel hover efektleri */

.program-block:hover {

  transform: translateY(-2px);

  box-shadow: 0 6px 20px rgba(0,0,0,0.15);

  transition: all 0.3s ease;

}



.module-block:hover {

  border-left-color: #3498db;

  background: linear-gradient(135deg, rgba(255,255,255,1), rgba(248,249,250,0.9));

  transition: all 0.3s ease;

}



/* Loading animasyonu */

.tooltip-loading {

  display: flex;

  align-items: center;

  justify-content: center;

  padding: 20px;

  color: #7f8c8d;

}



.tooltip-loading::before {

  content: '';

  width: 16px;

  height: 16px;

  border: 2px solid #ecf0f1;

  border-top: 2px solid #3498db;

  border-radius: 50%;

  animation: spin 1s linear infinite;

  margin-right: 8px;

}



@keyframes spin {

  0% { transform: rotate(0deg); }

  100% { transform: rotate(360deg); }

}



/* Responsive design */

@media (max-width: 768px) {

  .student-education-tooltip {

    max-width: 320px;

    font-size: 11px;

    padding: 12px;

  }

  

  .program-info {

    padding: 10px 12px;

    font-size: 12px;

  }

  

  .module-name {

    font-size: 11px;

  }

  

  .section-item {

    font-size: 10px;

    padding: 2px 5px;

  }

}