div[id$="_card"] {
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(16px);
  border-radius: 1.5rem;
  /* 3xl karşılığı */
  box-shadow: 0 10px 40px 0 rgba(36, 37, 38, 0.18), 0 1.5px 4px 0 rgba(0, 0, 0, 0.02);
  /* shadow-2xl yaklaşık */
  border: 1px solid rgba(255, 255, 255, 0.5);
  padding: 2rem;
  transition: box-shadow 0.5s;
  /* margin: 1rem 0; */
  margin-bottom: 1rem;
}

div[id$="_card"]:hover {
  box-shadow: 0 18px 56px 0 rgba(36, 37, 38, 0.23), 0 2px 8px 0 rgba(0, 0, 0, 0.04);
  /* shadow-3xl */
}

div[id$="_cardbuttonred"].dx-button.dx-button-default {
  border: 1px solid #b81c22 !important;
  border-radius: 1.5rem !important;
  padding: 4rem 2rem !important;
  transition: all 0.3s ease !important;
  background-color: transparent !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 250px !important;
}

div[id$="_cardbuttonred"].dx-button.dx-button-default .dx-icon,
div[id$="_cardbuttonred"].dx-button.dx-button-default .dx-button-text {
  color: #b81c22 !important;
}

div[id$="_cardbuttonred"]:hover.dx-button.dx-button-default {
  border-color: #9b1b21 !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 0px 12px rgba(155, 27, 33, 0.7) !important;
}

div[id$="_cardbuttongreen"].dx-button.dx-button-default {
  border: 1px solid #22b81c !important;
  border-radius: 1.5rem !important;
  padding: 4rem 2rem !important;
  transition: all 0.3s ease !important;
  background-color: transparent !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 250px !important;
}

div[id$="_cardbuttongreen"].dx-button.dx-button-default .dx-icon,
div[id$="_cardbuttongreen"].dx-button.dx-button-default .dx-button-text {
  color: #22b81c !important;
}

div[id$="_cardbuttongreen"]:hover.dx-button.dx-button-default {
  border-color: #219b1b !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 0px 12px rgba(33, 155, 27, 0.7) !important;
}

div[id$="_cardbuttonblue"].dx-button.dx-button-default {
  border: 1px solid #1c7fb8 !important;
  border-radius: 1.5rem !important;
  padding: 4rem 2rem !important;
  transition: all 0.3s ease !important;
  background-color: transparent !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 250px !important;
}

div[id$="_cardbuttonblue"].dx-button.dx-button-default .dx-icon,
div[id$="_cardbuttonblue"].dx-button.dx-button-default .dx-button-text {
  color: #1c7fb8 !important;
}

div[id$="_cardbuttonblue"]:hover.dx-button.dx-button-default {
  border-color: rgb(26, 117, 170) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 0px 12px rgba(26, 117, 170, 0.7) !important;
}

div[id$="_cardbuttongrey"].dx-button.dx-button-default {
  border: 1px solid #494949 !important;
  border-radius: 1.5rem !important;
  padding: 4rem 2rem !important;
  transition: all 0.3s ease !important;
  background-color: transparent !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 250px !important;
}

div[id$="_cardbuttongrey"].dx-button.dx-button-default .dx-icon,
div[id$="_cardbuttongrey"].dx-button.dx-button-default .dx-button-text {
  color: #494949 !important;
}

div[id$="_cardbuttongrey"]:hover.dx-button.dx-button-default {
  border-color: rgb(66, 66, 66) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 0px 12px rgba(66, 66, 66, 0.7) !important;
}


div[id$="_cardblock"] {
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(16px);
  border-radius: 1.5rem;
  /* 3xl karşılığı */
  box-shadow: 0 10px 40px 0 rgba(36, 37, 38, 0.18), 0 1.5px 4px 0 rgba(0, 0, 0, 0.02);
  /* shadow-2xl yaklaşık */
  border: 1px solid rgba(255, 255, 255, 0.5);
  padding: 2rem;
  transition: box-shadow 0.5s;
  display: block !important;
}

div[id$="_cardblock"]:hover {
  box-shadow: 0 18px 56px 0 rgba(36, 37, 38, 0.23), 0 2px 8px 0 rgba(0, 0, 0, 0.04);
  /* shadow-3xl */
}

div[id$="_buttonblock"] {
  margin: 1rem 0;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 1rem !important;
  justify-content: flex-end !important;
  align-items: center !important;
}