/* Global Resets And Requirements */
body,
h1,
h2,
h3,
p,
a,
li,
ul,
button,
span {
  line-height: 1.5;
  letter-spacing: 0.02em;
  padding: 0;
  margin: 0;
  border: none;
  color: inherit;
}
body {
  background-color: #ffffff;
  color: #434455;
  font-family: "Roboto", sans-serif;
}
.container {
  width: 1440px;
  margin: 0 auto;
}
header,
footer {
  padding: 0 141px;
  box-sizing: border-box;
}
nav,
address {
  display: inline-block;
}
address {
  float: right;
}
nav {
  padding-left: 102px;
}
header .ulist {
  gap: 40px;
}
.logo {
  font-family: "Raleway", sans-serif;
  font-size: 18px;
  line-height: 1.167;
  color: #4d5ae5;
  letter-spacing: 0.03em;
}
h1 {
  font-size: 56px;
  line-height: 1.071428571428571;
  margin-bottom: 48px;
}
h2 {
  font-size: 36px;
  line-height: 1.111111111111111;
  margin-bottom: 72px;
}
.logo,
h1,
h2 {
  font-weight: 700;
}
.nav,
h3,
.desc {
  font-weight: 500;
}
.hspan,
.nav,
h2,
h3,
.desc {
  color: #2e2f42;
}
a:not(form a) {
  text-decoration: none;
  font-style: normal;
}
ul {
  display: flex;
  list-style-type: none;
  justify-content: space-between;
}
.section .ulist {
  gap: 24px;
}
main .section {
  padding: 120px 141px;
}
.section#our-team {
  padding: 120px 141px;
  box-sizing: content-box;
  text-align: center;
  background-color: #f4f4fd;
}
#our-team .card-content {
  background-color: #ffffff;
}
h1,
h2 {
  text-align: center;
}
#our-portfolio ul {
  flex-wrap: wrap;
  row-gap: 48px;
}
.section:first-child,
footer {
  background-color: #2e2f42;
}
#our-approach li {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.section#head-view {
  position: relative;
  text-align: center;
  padding: 188px 0px;
  background-image: linear-gradient(rgba(46, 47, 66, 0.7), rgba(46, 47, 66, 0.7)), url("../images/hero_image.jpg");
  background-size: cover;
  color: #ffffff;
  padding: 188px 0;
} /*                                                                 */
/*                                                                 */
button {
  background-color: #4d5ae5;
  padding: 16px 32px;
  position: relative;
  border: none;
  color: #ffffff;
  text-align: center;
  border-radius: 4px;
  box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.15);
  letter-spacing: 0.04em;
}
#our-team .ulist > li {
  box-shadow: 0px 2px 1px 0px rgba(46, 47, 66, 0.08), 0px 1px 1px 0px rgba(46, 47, 66, 0.16),
    0px 1px 6px 0px rgba(46, 47, 66, 0.08);
}
#our-portfolio .card-content {
  border: 1px solid #e7e9fc;
}
.social-media li {
  position: relative;
  width: 40px;
  height: 40px;
  background-color: #4d5ae5;
  border-radius: 20px;
}
.rectangle {
  position: relative;
  background-color: #f4f4fd;
  border-radius: 4px;
  border: 1px solid #8e8f99;
  height: 112px;
}
svg:not(form svg) {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
img {
  display: block;
}
.card-content {
  padding: 32px 16px;
  display: flex;
  gap: 8px;
  flex-direction: column;
}
.imgg {
  width: 360px;
  height: 300px;
  position: relative;
  overflow: hidden;
}
/* Resim */
.imgg img {
  display: block;
  width: 100%;
  height: auto;
}

/* Hover metni (başta görünmez) */
.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #4d5ae5;
  color: #fff;
  display: flex;

  padding: 40px 32px 0;

  transform: translateY(100%);
  transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* Hover olduğunda yukarı gelsin */
#our-portfolio li:hover .overlay {
  transform: translateY(0);
}

footer h3,
.logo:not(header .logo) {
  display: inline-block;
  margin-bottom: 16px;
}
footer {
  position: relative;
  padding: 100px 141px;
}
footer h3 {
  color: #ffffff;
}
.foot-info {
  display: inline-block;
  width: 264px;
  color: #f4f4fd;
}
.fspan {
  color: #f4f4fd;
}
.foot-social {
  display: inline-block;
  position: absolute;
  left: 540px;
  width: 208px;
}

#our-portfolio li {
  transition: box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1);
}
.social-media li {
  transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1);
}
button {
  transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1);
}
.links {
  position: relative;
  display: inline-block;
  padding-top: 24px;
  padding-bottom: 24px;
  transition: color 250ms cubic-bezier(0.4, 0, 0.2, 1);
}

#our-portfolio li:hover {
  box-shadow: 0px 2px 1px 0px rgba(46, 47, 66, 0.08), 0px 1px 1px 0px rgba(46, 47, 66, 0.16),
    0px 1px 6px 0px rgba(46, 47, 66, 0.08);
}
.foot-social .social-media li:hover {
  background-color: #31d0aa;
}
#our-team .ulist li:hover .social-media li {
  background-color: #404bbf;
}
.links:hover,
.links:active,
.links:focus {
  color: #404bbf;
}
/* TASK3*/
nav .links::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0px;
  width: 100%;
  height: 4px;
  background-color: #404bbf;
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1);
}
/* Hover ve focus durumunda çizgi görünür */
nav .links:hover::after,
nav .links:focus::after {
  transform: scaleX(1);
}
/* Aktif sayfa durumunda kalıcı çizgi /*/
nav .links.active::after {
  transform: scaleX(1);
}
footer h3 {
  font-size: 16px;
  line-height: 24px;
  letter-spacing: 2%;
}
footer form {
  display: flex;
  float: right;
  width: 453px;
}
footer label {
  width: 100%;
}

.inputs {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.input {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.modal-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw; /* ekranın genişliği */
  height: 100vh; /* ekranın yüksekliği */
  background-color: rgba(0, 0, 0, 0.5); /* karartma efekti */
  transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 999; /* her şeyin üstünde */
}

.modal {
  position: absolute; /* artık absolute olmasına gerek yok */
  background-color: white;
  max-width: 408px;
  width: 100%;
  padding: 24px;
  z-index: 1000;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.main-form {
  display: block;
  font-size: 12px;
  line-height: 14px;
  text-align: left;
  letter-spacing: 0.04em;
  color: #8e8f99;
}
*/ .modal h3 {
  text-align: center;
}
.check {
  display: inline-block; /* Label satır içi gibi davranır */
  cursor: pointer; /* Tıklanabilir his */
  height: 16px;
}

.check input[type="checkbox"] {
  width: 16px;
  height: 16px;
  display: inline-block; /* Yan yana görünmesini sağlar */
  vertical-align: middle; /* Metinle dikey ortalar */
  margin-right: 4px; /* Checkbox ile metin arasında küçük boşluk */
  transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1);
}

.check a.modal-policy {
  color: #4d5ae5;
  text-decoration: underline;
}
.modal-wrapper {
  display: block;
  width: 24px;
  height: 24px;
  position: relative;
  margin-left: auto;
  transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1);
  border-radius: 20px;
}
.modal-wrapper:hover {
  background-color: #404bbf;
}
.modal-inputs {
  display: flex;
  flex-direction: column;

  gap: 16px;
}
.input div:not(footer div) {
  border: 1px solid rgba(46, 47, 66, 0.4);
  display: flex;
  padding: 9px 0 9px 16px;
  border-radius: 4px;
  gap: 8px;
  transition: border-color 250ms cubic-bezier(0.4, 0, 0.2, 1);
}
.input input {
  border: none;
  outline: none;
  width: 100%;
  font-size: 16px;
}
.input div:focus-within {
  border-color: #4d5ae5;
}
.input div:focus-within svg {
  fill: #4d5ae5;
}
.modal button {
  width: 169px;
  margin: auto;
}

.main-form {
  display: flex;
  gap: 16px;
  flex-direction: column;
}
.main-form h3 {
  text-align: center;
}
.modal {
  display: flex;
  gap: 24px;
  flex-direction: column;
}
.check-wrap {
  display: inline-block;
}

.check {
  display: inline-block;
  cursor: pointer;
  font-size: 12px;
  line-height: 14px;
}

.check-wrap {
  display: inline-block;
  position: relative;
  width: 16px;
  height: 16px;
  vertical-align: middle;
  margin-right: 4px;
  transition: border-color 250ms cubic-bezier(0.4, 0, 0.2, 1);
}

.check-wrap input[type="checkbox"] {
  appearance: none;
  position: relative;
  width: 16px;
  height: 16px;
  margin: 0;
  cursor: pointer;
  border-radius: 2px;
  border: 1px solid rgba(46, 47, 66, 0.4);
}
.check-wrap svg {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.check-wrap input[type="checkbox"]:checked {
  background-color: #404bbf;
}

.check a.modal-policy {
  color: #4d5ae5;
  text-decoration: underline;
}
.modal-wrapper:hover {
  background-color: #4d5ae5;
  fill: #fff;
  border-radius: 20px;
}
.modal-backdrop,
.modal {
  display: none;
}
.is-open {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.input-row {
  display: flex;
  padding-left: 0;
  gap: 24px;
}
.input-row input {
  flex: 1;
  padding: 8px 16px;
  padding-right: 0;
  border: 1px solid #fff;
  background-color: transparent;
  border-radius: 4px;
  box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.15);
}
footer .subscribe-btn {
  display: inline-flex; /* yan yana ve ortalanmış */
  align-items: center; /* dikey ortalama */
  gap: 16px; /* metin ile svg arası boşluk */
  padding: 8px 24px;
  background-color: #4d5ae5;
  color: #fff;
  border: none;
  border-radius: 4px;
}

.subscribe-btn .btn-text {
  font-size: 16px;
  line-height: 24px;
  letter-spacing: 0.04em;
  font-weight: 500;
}

.subscribe-btn .btn-icon svg {
  display: block; /* flex içinde svg düzgün hizalanır */
  width: 24px; /* svg boyutunu ayarlayabilirsin */
  height: 24px;
}
textarea {
  height: 120px;
  width: 100%;
  display: block;
  border-radius: 4px;
  border: 1px solid rgba(46, 47, 66, 0.4);
  padding-top: 8px;
  padding-left: 16px;
  outline: none; /* varsayılan mavi kenarlığı kaldırır */
  transition: border-color 250ms cubic-bezier(0.4, 0, 0.2, 1);
}

textarea:focus {
  box-shadow: 0 0 0 2px rgba(77, 90, 229, 0.3); /* yumuşak vurgu efekti */
}
textarea::placeholder {
  color: rgba(46, 47, 66, 0.4);
}
footer input {
  transition: border-color 250ms cubic-bezier(0.4, 0, 0.2, 1);
}

footer input::placeholder {
  color: #fff;
}
textarea:focus,
footer input:focus {
  border-color: #4d5ae5; /* istediğin mavi ton */
  outline: none; /* tarayıcı varsayılan mavi/siyah çerçeveyi kapatır */
  appearance: none; /* Safari / iOS gibi yerlerdeki stilleri sıfırlar */
}
button:hover {
  background-color: #404bbf;
}