* {
  box-sizing: border-box;
}

html {
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body {
  margin: 0;

  font-family:
    Inter,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    Helvetica,
    Arial,
    sans-serif;

  background:
    radial-gradient(
      circle at top center,
      rgba(37, 211, 102, 0.13),
      transparent 520px
    ),
    #f5f7f6;

  color: #172019;
}


.page {
  min-height: 100vh;

  display: flex;
  align-items: center;
  justify-content: center;

  padding: 32px 18px;
}


.card {
  width: 100%;
  max-width: 520px;

  padding: 48px 42px 36px;

  background:
    rgba(255, 255, 255, 0.97);

  border:
    1px solid #e4e9e6;

  border-radius: 28px;

  box-shadow:
    0 30px 80px rgba(18, 40, 27, 0.08),
    0 5px 20px rgba(18, 40, 27, 0.04);
}


.whatsapp-icon {
  width: 70px;
  height: 70px;

  display: flex;
  align-items: center;
  justify-content: center;

  margin:
    0 auto 24px;

  background:
    #e8f9ee;

  color:
    #1cbb59;

  border-radius:
    22px;
}


.whatsapp-icon svg {
  width: 42px;
  height: 42px;
}


.eyebrow {
  display: block;

  margin-bottom:
    11px;

  text-align:
    center;

  color:
    #139649;

  font-size:
    12px;

  font-weight:
    800;

  letter-spacing:
    0.1em;

  text-transform:
    uppercase;
}


h1 {
  margin: 0;

  text-align:
    center;

  color:
    #151b17;

  font-size:
    clamp(32px, 7vw, 44px);

  font-weight:
    760;

  line-height:
    1.08;

  letter-spacing:
    -0.045em;
}


.description {
  max-width:
    410px;

  margin:
    20px auto 32px;

  text-align:
    center;

  color:
    #6f7872;

  font-size:
    15px;

  line-height:
    1.7;
}


.form-group {
  margin-bottom:
    22px;
}


.form-group label {
  display:
    block;

  margin-bottom:
    8px;

  color:
    #343d37;

  font-size:
    13px;

  font-weight:
    700;
}


/* Telefon alanı */

.phone-row {
  display:
    flex;

  width:
    100%;

  height:
    60px;

  background:
    #ffffff;

  border:
    1px solid #dfe5e1;

  border-radius:
    15px;

  overflow:
    hidden;

  transition:
    border-color .2s ease,
    box-shadow .2s ease;
}


.phone-row:focus-within {
  border-color:
    #25b95a;

  box-shadow:
    0 0 0 4px
    rgba(37, 185, 90, 0.10);
}


/* Ülke seçimi */

.country-select-wrapper {
  position:
    relative;

  flex:
    0 0 115px;

  background:
    #f5f7f6;

  border-right:
    1px solid #e1e6e3;
}


.country-select {
  width:
    100%;

  height:
    100%;

  padding:
    0 28px 0 13px;

  border:
    0;

  outline:
    0;

  appearance:
    none;

  background:
    transparent;

  color:
    #344039;

  font-family:
    inherit;

  font-size:
    15px;

  font-weight:
    700;

  cursor:
    pointer;
}


.country-select-wrapper::after {
  content:
    "";

  position:
    absolute;

  right:
    11px;

  top:
    50%;

  width:
    6px;

  height:
    6px;

  border-right:
    2px solid #7d8580;

  border-bottom:
    2px solid #7d8580;

  transform:
    translateY(-65%)
    rotate(45deg);

  pointer-events:
    none;
}


/* Numara */

.phone-input {
  flex:
    1;

  min-width:
    0;

  height:
    100%;

  padding:
    0 17px;

  border:
    0;

  outline:
    0;

  background:
    #ffffff;

  color:
    #171d19;

  font-family:
    inherit;

  font-size:
    17px;

  font-weight:
    500;

  letter-spacing:
    .02em;
}


.phone-input::placeholder {
  color:
    #aab1ac;
}


.phone-input.input-error {
  background:
    #fffafa;
}


.form-group small {
  display:
    block;

  margin-top:
    8px;

  color:
    #909892;

  font-size:
    12px;

  line-height:
    1.45;
}


/* WhatsApp butonu */

.whatsapp-button {
  width:
    100%;

  min-height:
    60px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    10px;

  padding:
    15px 22px;

  border:
    0;

  border-radius:
    15px;

  background:
    #20bd5a;

  color:
    #ffffff;

  font-family:
    inherit;

  font-size:
    16px;

  font-weight:
    750;

  cursor:
    pointer;

  box-shadow:
    0 12px 30px
    rgba(32, 189, 90, 0.22);

  transition:
    transform .2s ease,
    background .2s ease,
    box-shadow .2s ease;
}


.whatsapp-button svg {
  width:
    26px;

  height:
    26px;
}


.whatsapp-button:hover {
  background:
    #18ad50;

  transform:
    translateY(-2px);

  box-shadow:
    0 16px 36px
    rgba(32, 189, 90, 0.28);
}


.whatsapp-button:active {
  transform:
    translateY(0);
}


/* Hata */

.error-message {
  min-height:
    20px;

  margin:
    12px 0 0;

  text-align:
    center;

  color:
    #c73838;

  font-size:
    13px;

  font-weight:
    600;
}


/* Alt bilgi */

.security-note {
  display:
    flex;

  align-items:
    flex-start;

  gap:
    9px;

  margin-top:
    22px;

  padding-top:
    21px;

  border-top:
    1px solid #ecefed;
}


.security-note span {
  flex-shrink:
    0;

  width:
    20px;

  height:
    20px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  margin-top:
    1px;

  background:
    #e9f8ee;

  color:
    #15994a;

  border-radius:
    50%;

  font-size:
    11px;

  font-weight:
    800;
}


.security-note p {
  margin:
    0;

  color:
    #858d87;

  font-size:
    12px;

  line-height:
    1.55;
}


/* Mobil */

@media (max-width: 600px) {

  body {
    background:
      linear-gradient(
        180deg,
        rgba(37, 211, 102, 0.08),
        transparent 300px
      ),
      #f5f7f6;
  }


  .page {
    align-items:
      flex-start;

    padding:
      18px 13px;
  }


  .card {
    margin-top:
      7vh;

    padding:
      34px 20px 26px;

    border-radius:
      23px;
  }


  .whatsapp-icon {
    width:
      62px;

    height:
      62px;

    margin-bottom:
      20px;

    border-radius:
      19px;
  }


  .whatsapp-icon svg {
    width:
      37px;

    height:
      37px;
  }


  .description {
    margin-bottom:
      28px;

    font-size:
      14px;
  }


  .phone-row {
    height:
      58px;
  }


  .country-select-wrapper {
    flex-basis:
      105px;
  }


  .country-select {
    padding-left:
      10px;

    font-size:
      14px;
  }


  .phone-input {
    padding:
      0 13px;

    font-size:
      16px;
  }


  .whatsapp-button {
    min-height:
      58px;
  }

}


@media (max-width: 360px) {

  .card {
    padding-left:
      16px;

    padding-right:
      16px;
  }


  .country-select-wrapper {
    flex-basis:
      98px;
  }

}
.site-credit {
    margin: 22px 0 0;
    padding-top: 18px;
    border-top: 1px solid #edf0ee;

    text-align: center;
    font-size: 12px;
    line-height: 1.6;

    color: #98a09c;
}

.site-credit a {
    color: #69736e;
    font-weight: 600;
    text-decoration: none;
}

.site-credit a:hover {
    color: #111814;
    text-decoration: underline;
}