/* style.css */

/* ------------------------------------------------------------- */
/* 1) Google Font Import (Montserrat)                            */
/* ------------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600&display=swap');

/* ------------------------------------------------------------- */
/* 2) Global Body Font                                           */
/* ------------------------------------------------------------- */
body {
  font-family: 'Montserrat', sans-serif; /* Montserrat */
  margin: 0; /* default margin reset (opsiyonel) */
  padding: 0; /* default padding reset (opsiyonel) */
  /* Ek stil varsa buraya ekleyebilirsiniz. */
}

/* Navbar brand fix */
.navbar-brand img {
  height: 40px;
}

/* Card styling */
.card {
  border-radius: 6px;
}

/* Tablo hücreleri dikey ortalama */
.table th, .table td {
  vertical-align: middle !important;
}

/* Sidebar link active */
.nav-link.active {
  background-color: rgba(255, 255, 255, 0.2);
  font-weight: 600; /* EKLEDİĞİMİZ ÖZELLİK */
}

/* ------------------------------------------------------------- */
/* 3) Blink-Red Animations (Deadline süresi geçen görevler)      */
/* ------------------------------------------------------------- */
.blink-red {
  animation: blink 1s linear infinite;
}

@keyframes blink {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0; }
}

/* ------------------------------------------------------------- */
/* 4) Örnek Turuncu Arka Plan (bg-orange)                        */
/* ------------------------------------------------------------- */
.bg-orange {
  background-color: #fd7e14 !important;
  color: #fff !important;
}

/* ------------------------------------------------------------- */
/* 5) Rozet/Avatar Tasarımı İçin Ek Stil                         */
/* ------------------------------------------------------------- */

/* Profil kartı kapsayıcısı */
.profile-card {
  background-color: #f8f9fa;  /* Zaten mevcuttu */
  border: 1px solid #e9ecef;
  border-radius: 8px;
  padding: 15px;
  margin-bottom: 20px;

  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

/* Soldaki kısım (Avatar + İsim/Title) */
.profile-left {
  display: flex;
  align-items: center;
  flex: 1;
  min-width: 250px;
  margin-bottom: 10px; /* mobilde alt alta gelirse */
}

/* Avatar resmi */
.profile-left img {
  width: 60px;
  height: 60px;
  object-fit: cover;
  border-radius: 50%;
  margin-right: 15px;
  border: 2px solid #dee2e6;
}

/* Sağdaki kısım (Rozet) */
.profile-right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex: 1;
  min-width: 200px;
}

/* Rozet container */
.rozet-container {
  background-color: #f1f1f1;  /* Hafif gri bir zemin */
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 10px;
  display: inline-flex;
  align-items: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); /* hafif gölge */
}

/* Rozet metni */
.rozet-text {
  font-size: 1rem; /* bir miktar büyük */
  font-weight: 600; /* Montserrat 600 */
  margin-right: 8px; /* ikonla metin arasında boşluk */
}

/* Rozet ikonu */
.rozet-icon {
  width: 70px;   /* boyutu biraz daha büyük */
  height: 70px;
  object-fit: contain;
}

/* ------------------------------------------------------------- */
/* 6) Örnek Bazı Responsive İyileştirmeler (isteğe bağlı)        */
/* ------------------------------------------------------------- */
/* Mobilde kart kenar boşlukları */
@media (max-width: 576px) {
  .profile-card {
    flex-direction: column;
  }
  .profile-left, .profile-right {
    justify-content: center;
    margin-bottom: 10px;
  }
  .rozet-container {
    margin-left: 0;
    margin-top: 8px;
  }
}