body.login {
  background-color: #f0f2f5;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  margin: 0;

  background-color: #c4c4c4;
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAPwAAADmCAYAAADx5uiaAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA+FpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczpkYz0iaHR0cDovL3B1cmwub3JnL2RjL2VsZW1lbnRzLzEuMS8iIHhtbG5zOnhtcE1NPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvbW0vIiB4bWxuczpzdFJlZj0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL3NUeXBlL1Jlc291cmNlUmVmIyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ1M1IE1hY2ludG9zaCIgeG1wOkNyZWF0ZURhdGU9IjIwMTEtMTAtMTJUMTg6MTM6MTgrMDI6MDAiIHhtcDpNb2RpZnlEYXRlPSIyMDExLTEwLTEyVDE2OjE3KzAyOjAwIiB4bXA6TWV0YWRhdGFEYXRlPSIyMDExLTEwLTEyVDE2OjE3KzAyOjAwIiBkYzpmb3JtYXQ9ImltYWdlL3BuZyIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpEN0ZDMjJERkVEMTAxMUUwODA4OEY5QUFEQTQzOTFCNyIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDpEN0ZDMjJFMEVEMTAxMUUwODA4OEY5QUFEQTQzOTFCNyI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOkQ3RkMyMkRERUQxMDExRTA4MDg4RjlBQURBNDM5MUI3IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOkQ3RkMyMkRFRUQxMDExRTA4MDg4RjlBQURBNDM5MUI3Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+59nK8wAABF5JREFUeNrs3FturDAURFHzmP+MwTdIaekOwKVQ6rWk/FqN8Sbwc7YxxvHzt4/1rsXrbT9/9+I1j8B1P3s57efS/bwL9jNx34/EZgJfQvAgeEDwgOABwQOCBwQPCB4QPCB4QPCA4EHwgOABwQOCBwQP/KntN/otsO4MrDlKfmfDmo+75B413Pc5CkaGnSMzLyz1EBkFN6llVlzCHXrYbYHzOULnaaVrlFw44BseEDwgeEDwgOABwQOCB8EDggcEDwgeEDwgeEDwgOABwQOCBwQPX+uZaZeYFdcyMywxL20L7ekI/M695B7Ngv2cDffo/G/hhg1dPRwydeBnwZqJa99DB79hwmzqoeyVHhA8IHhA8CB4QPCA4AHBA4IHBA8IHhA8IHhA8IDgQfCA4AHBA4IH3uz8jX717KxnzbtkDxLXnlgzcd33y/fys+YsuEePqyH4xI2aocPUML009RBpGQ45CtZMPpxe/RDxSg++4QHBA4IHBA8IHhA8IHhA8IDgAcEDggfBA4IHBA8IHhA8IHhA8MBin5l2iSGB5+I1E0MX99CaM3DtiTX3kt+52izZz+XXf/4e+IbJrVvo5jccpuceXYF71DB08h6Zgair1zy80gOCBwQPCB4QPCB4QPCA4EHwgOABwQOCBwQPCB4QPCB4QPCA4AHBwxc6R2a2WWJWWmKmXcuAxJTE9d8l9/0ouT/76uATA/3uwKE/QhuaeNg1DJxMxX6VBJ9wvf3Me6UH3/CA4AHBA4IHBA8IHhA8IHhA8IDgAcGD4AHBA4IHBA8IHhA8IHhgsc9Mu9WzsxKDHFODMUfBuqm5bomBk4nZgw1DQRPXfiSCT23m6nWvkoO0jQ53IPh9dEzCTfxDOkIP5bn6BgG+4QHBA4IHBA8IHhA8IHhA8IDgAcEDggfBA4IHBA8IHhA8IHhA8MBCyZl2LcMMG+batczJ20rWTHn9WXqCv0fHQL/EhiauPTFhtmXQ6CwJdAudpfvtZ8krPfiGBwQPCB4QPCB4QPCA4AHBA4IHBA8IHgQPCB4QPCB4QPCA4AHBA4s9M+2e+XNXwW/dQg+olsGYif1cPWh0L7n2xG/cR8Hw0nNkhi6OwEPkCN2kO7DuHTig3zpodAbOUurBtL39LHmlB9/wgOABwQOCBwQPCB4QPCB4QPCA4AHBg+ABwQOCBwQPCB4QPCB4YLEzGP7q+V6JGWR36LqPwLXPgv3cQuc0MRwyseb99v08R8eU0U+cs+DGp96aVl/7VfAbkw+RxPl8/fBSr/TgGx4QPCB4QPCA4AHBA4IHBA8IHhA8IHgQPCB4QPCA4AHBA4IHBA8sdgYfJIlZZIkhgQ0z/VKz4vaC3zpL7lHFfp6hDU0Ev5XENEdmGu744v1MDPD8yuGlXunBNzwgeEDwgOABwQOCBwQPCB4QPCB4QPAgeEDwgOABwQOCBwQPCB5Y7Jlpd4QeJImBk4k5eQ3z/B5XwXlqGYyZWjOxn0v7/CfAAMrKqB7xcqi5AAAAAElFTkSuQmCC);
}

canvas.vanta-canvas {
  position: fixed;
  z-index: -5 !important;
}

#protein_login {
  width: 100%;
  max-width: 1000px;
  height: 650px;
  background: white !important;
  display: flex;
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  margin: 20px;
}

.login {
  display: flex;
  width: 100%;
  height: 100%;
}

.login_left {
  flex: 1.1;
  background-image: url(../img/bgimage.png);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center; /* Resmi hem yatay hem dikeyde ortalar */
  border-radius: 10px 0 0 10px;
}

.login_right {
  flex: 0.9;
  background-color: #2c3e80 !important;
  padding: 50px 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  color: white;
}

.login_right_title {
  font-size: 32px;
  font-weight: bold;
  text-align: center;
  margin-bottom: 40px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}

.form-group label {
  color: #d8e5f8;
  font-size: 14px;
  margin-bottom: 8px;
  display: block;
}

.input-group {
  margin-bottom: 20px;
}

.form-control {
  height: 50px !important;
  border-radius: 4px !important;
  border: none !important;
  font-size: 15px !important;
}

.input-group-text {
  background: white !important;
  border: none !important;
  color: #2c3e80 !important;
  cursor: pointer;
}

.btn-block {
  background-color: #bdd6f4 !important;
  color: #2c3e80 !important;
  font-weight: bold !important;
  font-size: 18px !important;
  padding: 12px !important;
  margin-top: 10px;
  border: none !important;
  /* text-transform: uppercase; */
}

.forgotP,
.forgotP a {
  color: #d8e5f8 !important;
  margin-top: 15px;
  font-size: 14px;
  text-decoration: underline !important;
}

.register_footer {
  margin-top: 40px;
  text-align: center;
  font-size: 14px;
  color: #d8e5f8;
}

.register_footer a {
  display: inline-block;
  margin-top: 10px;
  color: white !important;
  font-weight: bold;
  border-bottom: 2px solid white;
  text-decoration: none !important;
}

@media (max-width: 850px) {
  #protein_login {
    flex-direction: column;
    height: auto;
    max-width: 450px;
  }
  .login_left {
    display: none;
  }
  .login_right {
    padding: 40px 20px;
  }
}

.input-group {
  margin-bottom: 25px;
  background: white !important;
  border-radius: 6px !important;
  border: none !important;
  display: flex;
  align-items: center;
  overflow: hidden;
  height: 50px;
}

.form-control {
  background: transparent !important;
  border: none !important;
  height: 100% !important;
  padding: 10px 15px !important;
  color: #333 !important;
  font-size: 15px !important;
  flex: 1;
  box-shadow: none !important;
}

.input-group-append {
  background: transparent !important;
  display: flex;
  align-items: center;
  padding-right: 15px;
}

.input-group-text {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  color: #2c3e80 !important;
  font-size: 18px !important;
  cursor: pointer;
  display: flex;
  align-items: center;
}

.input-group:focus-within {
  outline: 2px solid #bdd6f4;
}

@media (max-width: 850px) {
  #protein_login {
    flex-direction: column;
    height: auto;
    min-height: 500px;
    max-width: 100%;
    margin: 10px;
    border-radius: 12px;
  }

  .login_left {
    display: none !important;
  }

  .login_right {
    flex: 1;
    width: 100%;
    padding: 40px 25px;
    border-radius: 12px;
  }

  .login_right_title {
    font-size: 26px;
    margin-bottom: 30px;
  }

  .input-group {
    height: 55px;
  }

  .btn-block {
    padding: 15px !important;
    font-size: 16px !important;
  }

  .register_footer {
    margin-top: 30px;
  }
}