
html {
  scroll-behavior: smooth;
}

#test-urunleri,
#simulasyon-urunleri {
  scroll-margin-top: 95px;
}

/* =====================================================
   TEST & SİMÜLASYON ÜST YÖNLENDİRME
===================================================== */

.dta-product-intro {
  width: 100%;
  max-width: 1040px;
  margin: 32px auto 62px;
  padding: 0 18px;
}

.dta-product-intro-title {
  margin: 0 0 20px;
  color: #ffffff;
  font-size: 42px;
  line-height: 1.15;
  font-weight: 700;
  text-align: center;
}

.dta-product-intro-text {
  width: 100%;
  margin: 0;
  color: rgba(255,255,255,.82);
  font-size: 16px;
  line-height: 1.8;
  font-weight: 400;
  text-align: left !important;
}

.dta-product-choice-wrap {
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 18px;
  width: 100%;
  margin-top: 36px;
}

.dta-product-choice {
  position: relative;
  display: flex;
  align-items: center;
  flex: 0 1 440px;
  min-height: 104px;
  padding: 0 24px;

  overflow: hidden;

  border: 1px solid rgba(255,255,255,.16);
  border-radius: 15px;

  background: rgba(255,255,255,.055);

  color: #ffffff !important;
  text-decoration: none !important;

  box-shadow: 0 10px 30px rgba(0,0,0,.10);

  transition:
    transform .28s ease,
    border-color .28s ease,
    background .28s ease,
    box-shadow .28s ease;
}

.dta-product-choice::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 3px;

  background: #009999;

  transform: scaleX(.12);
  transform-origin: left center;

  transition: transform .28s ease;
}

.dta-product-choice:hover {
  transform: translateY(-4px);

  border-color: rgba(0,153,153,.75);
  background: rgba(0,153,153,.11);

  box-shadow: 0 16px 34px rgba(0,0,0,.18);

  color: #ffffff !important;
  text-decoration: none !important;
}

.dta-product-choice:hover::before {
  transform: scaleX(1);
}

.dta-product-choice-icon {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 56px;
  height: 56px;
  min-width: 56px;

  margin-right: 18px;

  border: 1px solid rgba(92,224,219,.20);
  border-radius: 14px;

  background: rgba(0,153,153,.19);

  color: #69e1dc;
  font-size: 21px;

  transition:
    transform .28s ease,
    background .28s ease,
    color .28s ease;
}

.dta-product-choice:hover .dta-product-choice-icon {
  transform: scale(1.05);
  background: #009999;
  color: #ffffff;
}

.dta-product-choice-title {
  color: #ffffff;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.2;
}

.dta-product-choice-arrow {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 34px;
  height: 34px;
  min-width: 34px;

  margin-left: auto;

  border-radius: 50%;

  background: rgba(255,255,255,.055);

  color: rgba(255,255,255,.55);
  font-size: 13px;

  transition:
    transform .28s ease,
    color .28s ease,
    background .28s ease;
}

.dta-product-choice:hover .dta-product-choice-arrow {
  transform: translateY(4px);
  color: #ffffff;
  background: rgba(0,153,153,.34);
}

@media (max-width: 991px) {
  .dta-product-intro {
    max-width: 850px;
  }

  .dta-product-intro-title {
    font-size: 36px;
  }

  .dta-product-choice {
    flex-basis: calc(50% - 9px);
    min-height: 96px;
    padding: 0 20px;
  }
}

@media (max-width: 767px) {
  .dta-product-intro {
    margin: 24px auto 46px;
    padding: 0 6px;
  }

  .dta-product-intro-title {
    margin-bottom: 16px;
    font-size: 28px;
    text-align: left;
  }

  .dta-product-intro-text {
    font-size: 15px;
    line-height: 1.7;
  }

  .dta-product-choice-wrap {
    flex-direction: column;
    gap: 12px;
    margin-top: 26px;
  }

  .dta-product-choice {
    flex: none;
    width: 100%;
    min-height: 82px;
    padding: 0 17px;
    border-radius: 12px;
  }

  .dta-product-choice-icon {
    width: 48px;
    height: 48px;
    min-width: 48px;
    margin-right: 14px;
    border-radius: 11px;
    font-size: 18px;
  }

  .dta-product-choice-title {
    font-size: 16px;
  }

  .dta-product-choice-arrow {
    width: 31px;
    height: 31px;
    min-width: 31px;
  }
}
