/* Group Event Avatar Styling - Öğrenci kartı tarzında avatar sistem */



.group-event-content {

  padding: 2px 4px;

  line-height: 1.2;

}



.event-student-avatar {

  transition: transform 0.2s ease;

}



.event-student-avatar:hover {

  transform: scale(1.1);

  z-index: 10;

}



/* Grup derslerinin takvimde özel görünümü */

.fc-event[style*="#ff8c00"] {

  border: 2px solid #ff8c00 !important;

}



.fc-event[style*="#ff8c00"] .fc-event-main {

  padding: 3px 6px;

}



/* Küçük ekranlarda avatar boyutunu düşür */

@media (max-width: 768px) {

  .event-student-avatar {

    width: 16px !important;

    height: 16px !important;

    font-size: 8px !important;

    margin: 0 0.5px !important;

  }

}



/* Timeline view'da grup event'lerini optimize et */

.fc-timeline-event .group-event-content {

  padding: 1px 3px;

}



.fc-timeline-event .event-student-avatar {

  width: 18px;

  height: 18px;

  font-size: 9px;

}



/* Day view'da daha büyük avatar'lar */

.fc-timegrid-event .group-event-content {

  padding: 3px 5px;

}



.fc-timegrid-event .event-student-avatar {

  width: 22px;

  height: 22px;

  font-size: 10px;

}



/* GÖMÜLÜ (INSET) BUTON STİLLERİ - Zemine gömülü görünüm */

.group-inset-button {

  position: absolute;

  width: 18px;

  height: 18px;

  border-radius: 50%;

  border: none;

  cursor: pointer;

  transition: all 0.2s ease;

  color: white;

  font-weight: bold;

  font-size: 12px;

  z-index: 10;

  opacity: 0;

  

  /* GÖMÜLÜ GÖRÜNÜM - Inner shadow ile çukur efekti */

  box-shadow: 

    inset 2px 2px 4px rgba(0,0,0,0.3),

    inset -1px -1px 2px rgba(255,255,255,0.1),

    0 1px 2px rgba(0,0,0,0.2);

  

  /* Gradient ile derinlik hissi */

  background: linear-gradient(145deg, #666, #444);

}



/* Grup eventine hover'da butonlar görünür */

.group-event-content:hover .group-inset-button {

  opacity: 1;

}



.group-inset-button:hover {

  /* Hover'da daha da gömülü görünüm */

  box-shadow: 

    inset 3px 3px 6px rgba(0,0,0,0.4),

    inset -2px -2px 3px rgba(255,255,255,0.1),

    0 2px 4px rgba(0,0,0,0.3);

  

  transform: translateY(1px);

}



.group-inset-button:active {

  /* Basıldığında daha da içeri çökme */

  box-shadow: 

    inset 4px 4px 8px rgba(0,0,0,0.5),

    inset -1px -1px 2px rgba(255,255,255,0.05);

  

  transform: translateY(2px);

}



/* + Butonu - Alt köşede */

.group-add-button {

  bottom: 3px;

  right: 3px;

  background: linear-gradient(145deg, #22c55e, #16a34a);

}



.group-add-button:hover {

  background: linear-gradient(145deg, #16a34a, #15803d);

}



/* X Butonu - Üst köşede (grup için) */

.group-delete-button {

  top: 3px;

  right: 3px;

  background: linear-gradient(145deg, #ef4444, #dc2626);

}



.group-delete-button:hover {

  background: linear-gradient(145deg, #dc2626, #b91c1c);

}



/* ÖĞRENCİ AVATAR'LARINDA HOVER X BUTONU */

.student-avatar {

  position: relative;

}



.avatar-delete-button {

  position: absolute;

  top: -4px;

  right: -4px;

  width: 14px;

  height: 14px;

  border-radius: 50%;

  border: none;

  cursor: pointer;

  color: white;

  font-weight: bold;

  font-size: 8px;

  z-index: 25;

  opacity: 0;

  transition: all 0.2s ease;

  

  /* Gömülü görünüm */

  box-shadow: 

    inset 2px 2px 4px rgba(0,0,0,0.3),

    inset -1px -1px 2px rgba(255,255,255,0.1),

    0 1px 2px rgba(0,0,0,0.2);

  

  background: linear-gradient(145deg, #ef4444, #dc2626);

}



/* Avatar'a hover'da x butonu görünür */

.student-avatar:hover .avatar-delete-button {

  opacity: 1;

}



.avatar-delete-button:hover {

  background: linear-gradient(145deg, #dc2626, #b91c1c);

  box-shadow: 

    inset 3px 3px 6px rgba(0,0,0,0.4),

    inset -2px -2px 3px rgba(255,255,255,0.1),

    0 2px 4px rgba(0,0,0,0.3);

  

  transform: translateY(1px);

}



.avatar-delete-button:active {

  box-shadow: 

    inset 4px 4px 8px rgba(0,0,0,0.5),

    inset -1px -1px 2px rgba(255,255,255,0.05);

  

  transform: translateY(2px);

}



/* BİREYSEL ÖĞRENCİ HOVER X BUTONU */

.individual-event-container {

  position: relative;

}



.individual-delete-button {

  position: absolute;

  top: 2px;

  right: 2px;

  width: 16px;

  height: 16px;

  border-radius: 50%;

  border: none;

  cursor: pointer;

  color: white;

  font-weight: bold;

  font-size: 10px;

  z-index: 20;

  opacity: 0;

  transition: all 0.2s ease;

  

  /* Gömülü görünüm */

  box-shadow: 

    inset 2px 2px 4px rgba(0,0,0,0.3),

    inset -1px -1px 2px rgba(255,255,255,0.1),

    0 1px 2px rgba(0,0,0,0.2);

  

  background: linear-gradient(145deg, #ef4444, #dc2626);

}



/* Bireysel event'e hover'da x butonu görünür */

.fc-event:hover .individual-delete-button {

  opacity: 1;

}



.individual-delete-button:hover {

  background: linear-gradient(145deg, #dc2626, #b91c1c);

  box-shadow: 

    inset 3px 3px 6px rgba(0,0,0,0.4),

    inset -2px -2px 3px rgba(255,255,255,0.1),

    0 2px 4px rgba(0,0,0,0.3);

  

  transform: translateY(1px);

}



.individual-delete-button:active {

  box-shadow: 

    inset 4px 4px 8px rgba(0,0,0,0.5),

    inset -1px -1px 2px rgba(255,255,255,0.05);

  

  transform: translateY(2px);

}