<style>
html{overflow-y:scroll}
.profil-container{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(320px,1fr));
  gap:20px
}
.profil-card{
  display:flex;
  align-items:center;
  background:#fff;
  padding:15px;
  border-radius:8px;
  box-shadow:0 2px 6px rgba(0,0,0,.08)
}
.foto img{
  width:70px;height:70px;border-radius:50%;object-fit:cover
}
.info{margin-left:15px;overflow:hidden}
.info h4{font-size:14px;margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.info p{font-size:13px;margin:3px 0 0}

/* TOMBOL DETAIL */
.btn-detail {
  background-color: #16b3ac;
  color: #fff;
  border: none;
}

.btn-detail:hover,
.btn-detail:focus {
  background-color: #129a94;
  color: #fff;
}

/* HEADER MODAL */
.modal-header-custom {
  background-color: #16b3ac;
  color: #fff;
}

/* LINK EMAIL */
.modal a {
  color: #16b3ac;
  text-decoration: none;
}

.modal a:hover {
  text-decoration: underline;
}
/* HEADER PROFIL DOSEN */
.header-profil {
  background: linear-gradient(135deg, #16b3ac, #129a94);
  color: #fff;
  padding: 28px 0;
  box-shadow: 0 6px 20px rgba(22,179,172,.35);
}

.header-title h3 {
  font-weight: 700;
  margin: 0;
}

.header-title p {
  font-size: 14px;
  opacity: 0.9;
}

/* TOMBOL HEADER */
.btn-header {
  background: #fff;
  color: #16b3ac;
  border-radius: 30px;
  padding: 8px 18px;
  font-weight: 600;
  border: none;
}

.btn-header:hover {
  background: #f0fffe;
  color: #129a94;
}

</style>