html, body {
    margin: 0 !important;
    padding: 0 !important;
    width: 100%;
    height: 100%;
    background: #f0f8ff; /* sayfa genel arkaplan rengin */
}

.top-banner,
.top-banner * {
  box-sizing: border-box;
}
.top-banner {
  background: var(
    --linear-dark-blue,
    linear-gradient(34.96deg, rgba(6, 34, 56, 1) 0%, rgba(18, 96, 158, 1) 100%)
  );
  padding: 20px 80px 20px 80px;
  display: flex;
  flex-direction: row;
  gap: 528px;
  align-items: center;
  justify-content: flex-start;
  align-self: stretch;
  flex-shrink: 0;
  position: relative;
  box-shadow: var(
    --drop-shadow-200-box-shadow,
    0px 1px 4px 0px rgba(12, 12, 13, 0.05),
    0px 1px 4px 0px rgba(12, 12, 13, 0.1)
  );
  overflow: hidden;
}
.logo {
  display: flex;
  flex-direction: row;
  gap: 12px;
  align-items: center;
  justify-content: flex-start;
  flex: 1;
  position: relative;
}
.logo2 {
  display: flex;
  flex-direction: row; /* column yerine row */
  gap: 12px;           /* logo ile yazı arası boşluk */
  align-items: center; /* ortalama */
  justify-content: flex-start;
  flex-shrink: 0;
  position: relative;
}
.logo a {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 12px !important;
}

.gravis-logo {
  width: 57px !important;
  height: 53px !important;
}
.text {
  display: flex;
  flex-direction: row;
  gap: 10px;
  align-items: flex-start;
  justify-content: flex-start;
  flex-shrink: 0;
  position: relative;
}
.gravis-logo-text {
  width: 172px !important;
  height: 43px !important;
}
header.top-banner .logo a {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 12px !important;
}
.button-group {
  display: flex;
  flex-direction: row;
  gap: 16px;
  align-items: center;
  justify-content: flex-end;
  flex: 1;
  position: relative;
}
.button {
  background: var(--neutral-0, #ffffff);
  border-radius: 8px;
  padding: 16px 12px 16px 12px;
  display: flex;
  flex-direction: row;
  gap: 4px;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
  box-shadow: var(
    --drop-shadow-300-box-shadow,
    0px 4px 4px -1px rgba(12, 12, 13, 0.05),
    0px 4px 4px -1px rgba(12, 12, 13, 0.1)
  );
}
.frame-2147224176 {
  padding: 0px 16px 0px 16px;
  display: flex;
  flex-direction: row;
  gap: 10px;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
}
.label {
  color: var(--gravis-main-blue, #1883d0);
  text-align: left;
  font-family: var(--button-m-font-family, "Roboto-Medium", sans-serif);
  font-size: var(--button-m-font-size, 16px);
  line-height: var(--button-m-line-height, 100%);
  letter-spacing: var(--button-m-letter-spacing, 0.5px);
  font-weight: var(--button-m-font-weight, 500);
  position: relative;
}
.button2 {
  background: var(
    --state-layers-on-primary-opacity-10,
    rgba(255, 255, 255, 0.1)
  );
  border-radius: 8px;
  border-style: solid;
  border-color: var(
    --state-layers-on-primary-opacity-16,
    rgba(255, 255, 255, 0.16)
  );
  border-width: 1px;
  padding: 16px 12px 16px 12px;
  display: flex;
  flex-direction: row;
  gap: 4px;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
  box-shadow: var(--glass-box-shadow, 0px 1px 4px 0px rgba(12, 12, 13, 0.05));
  backdrop-filter: var(--glass-backdrop-filter, blur(10px));
}
.frame-2147224180 {
  padding: 0px 16px 0px 16px;
  display: flex;
  flex-direction: row;
  gap: 10px;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
}
.label2 {
  color: var(--neutral-0, #ffffff);
  text-align: left;
  font-family: var(--button-m-font-family, "Roboto-Medium", sans-serif);
  font-size: var(--button-m-font-size, 16px);
  line-height: var(--button-m-line-height, 100%);
  letter-spacing: var(--button-m-letter-spacing, 0.5px);
  font-weight: var(--button-m-font-weight, 500);
  position: relative;
}