/* ============================================================
   Alpekin · Contact Page (Alpine Green · full-bleed premium)
   - Yalnız tokens.css değişkenleri
   - Privacy/Terms çizgisiyle tam uyum
   ============================================================ */


/* =========================================
   1) Full-bleed Background for this page
   ========================================= */

.contact-page {
  position: relative;
  z-index: 0;
}

/* footer’ın overlay altında kaybolmaması için */
.site-footer {
  position: relative;
  z-index: 1;
}

/* Tam ekran premium doku (header/footer dahil görünür) */
.contact-page::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(60rem 28rem at 90% -10%,
      color-mix(in srgb, var(--tree-gold) 10%, transparent), transparent 60%),
    radial-gradient(80rem 40rem at -10% -20%,
      color-mix(in srgb, var(--alpine-green) 12%, transparent), transparent 55%),
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--ivory-bone) 96%, white) 0%,
      color-mix(in srgb, var(--moon-ash) 85%, white) 100%
    );
  box-shadow: inset 0 0 120px rgba(0,0,0,.06);
  pointer-events: none;
}

/* Sayfa iç kenar boşlukları ve metin rengi */
.contact-page {
  color: var(--dark-soil);
  padding-block: var(--space-10);
  padding-inline: var(--space-4);
  max-width: min(var(--container-max), 75ch);
  margin-inline: auto;
}


/* =========================================
   2) Heading & Intro
   ========================================= */

.contact-page h1 {
  font-family: var(--font-heading);
  font-weight: var(--weight-bold);
  font-size: clamp(2rem, 2.4vw + 1.25rem, 3rem);
  letter-spacing: var(--ls-heading-tight);
  color: var(--deep-moss);
  text-shadow: 0 0 10px color-mix(in srgb, var(--tree-gold) 10%, transparent);
  margin: 0 0 var(--space-2);
}

.contact-intro {
  margin: 0 0 var(--space-2);
  color: color-mix(in srgb, var(--dark-soil) 85%, white);
  font-size: clamp(1rem, .25vw + .95rem, 1.125rem);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-body);
}

.response-pledge {
  margin: 0 0 var(--space-6);
  font-size: .95rem;
  color: color-mix(in srgb, var(--dark-soil) 70%, white);
}


/* =========================================
   3) Social Follow (icons only, no DM)
   ========================================= */

.social-follow {
  margin-block: var(--space-5);
}

.social-follow h2 {
  font-family: var(--font-heading);
  font-weight: var(--weight-semibold);
  font-size: clamp(1.05rem, .6vw + 1rem, 1.25rem);
  color: var(--deep-moss);
  margin: 0 0 var(--space-2);
}

.social-follow__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  padding: 0;
  margin: 0 0 var(--space-6);
  list-style: none;
}

/* Yuvarlak premium “badge” buton */
.social-follow__link {
  --_size: 42px;
  inline-size: var(--_size);
  block-size: var(--_size);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--tree-gold) 55%, var(--moon-ash));
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--tree-gold) 10%, white),
      color-mix(in srgb, var(--tree-gold) 6%, white)
    );
  box-shadow:
    0 6px 14px rgba(0,0,0,.06),
    inset 0 1px 0 rgba(255,255,255,.25);
  color: var(--bone-black); /* svg currentColor */
  text-decoration: none;
  transition: transform 140ms ease, box-shadow var(--ease-standard), border-color var(--ease-standard), background var(--ease-standard);
  -webkit-tap-highlight-color: transparent;
}

.social-follow__link:hover,
.social-follow__link:focus-visible {
  transform: translateY(-1px);
  box-shadow: 0 10px 20px rgba(0,0,0,.10), inset 0 1px 0 rgba(255,255,255,.3);
  border-color: var(--tree-gold);
  outline: none;
}

/* Focus ring token ile */
.social-follow__link:focus-visible {
  box-shadow:
    var(--accent-gold-ring),
    0 10px 20px rgba(0,0,0,.10),
    inset 0 1px 0 rgba(255,255,255,.3);
}

.social-follow__link svg {
  display: block;
  width: 20px;
  height: 20px;
}

/* Küçük ekran yoğunluğu */
@media (max-width: 640px) {
  .social-follow__link { --_size: 40px; }
}


/* =========================================
   4) Form Card (privacy/terms kartlarıyla aynı doku)
   ========================================= */

.contact-form {
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--deep-moss) 48%, black) 0%,
      color-mix(in srgb, var(--deep-moss) 62%, black) 100%
    );
  color: var(--ivory-bone);
  border: 1px solid var(--border);
  border-top: 3px solid var(--tree-gold);
  border-radius: var(--radius-lg);
  box-shadow:
    var(--elevation-sm),
    inset 0 0 0 1px color-mix(in srgb, var(--ivory-bone) 10%, transparent);
  padding: clamp(var(--space-6), 2vw + 1rem, var(--space-8));
  backdrop-filter: saturate(115%) blur(.3px);
}

/* Grid */
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4) var(--space-4);
}
.form-group.full-width { grid-column: 1 / -1; }

/* Etiketler */
.contact-form label {
  display: inline-block;
  font-size: .95rem;
  font-weight: var(--weight-semibold);
  color: var(--ivory-bone);
  margin-bottom: .35rem;
}

/* Alanlar */
.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form input[type="tel"],
.contact-form select,
.contact-form textarea {
  box-sizing: border-box;
  width: 100%;
  border: 1px solid color-mix(in srgb, var(--moon-ash) 68%, white);
  background: color-mix(in srgb, var(--dark-soil) 12%, white);
  color: var(--bone-black);
  border-radius: var(--radius-md);
  padding: .7rem .85rem;
  font-size: .95rem;
  transition: border-color var(--ease-standard),
              box-shadow var(--ease-standard),
              background-color var(--ease-standard);
  outline: none;
  -webkit-appearance: none; appearance: none;
}

.contact-form ::placeholder {
  color: color-mix(in srgb, var(--bone-black) 45%, white);
}

/* Focus */
.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
  border-color: var(--alpine-green);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--alpine-green) 28%, transparent);
  background: #fff;
}

.contact-form textarea { min-height: 9.5rem; resize: vertical; }

/* Hata blokları */
.form-errors {
  background: color-mix(in srgb, var(--ritual-fire-glow) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--ritual-fire-glow) 55%, transparent);
  color: var(--ivory-bone);
  padding: .6rem .75rem;
  border-radius: var(--radius-md);
  margin: 0 0 var(--space-3);
}

.field-errors {
  color: color-mix(in srgb, var(--ritual-fire-glow) 90%, white);
  font-size: .85rem;
  margin: 0 0 .25rem;
}

.contact-form .errorlist {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Consent satırı */
.form-group.consent {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
}
.form-group.consent input[type="checkbox"] { margin-top: .25rem; }
.form-group.consent label {
  color: var(--ivory-bone);
  font-weight: 500;
  line-height: 1.35;
}
.form-group.consent a {
  color: var(--tree-gold);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.form-group.consent a:hover,
.form-group.consent a:focus-visible {
  color: color-mix(in srgb, var(--tree-gold) 85%, var(--sacred-copper));
  outline: none;
}

/* Gönder butonu */
.submit-btn {
  margin-top: .5rem;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  border: 1px solid color-mix(in srgb, var(--tree-gold) 50%, var(--moon-ash));
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--tree-gold) 30%, white),
    color-mix(in srgb, var(--tree-gold) 15%, white)
  );
  color: var(--bone-black);
  padding: .75rem 1.15rem;
  border-radius: var(--radius-md);
  font-weight: var(--weight-bold);
  cursor: pointer;
  transition: transform 120ms ease, box-shadow var(--ease-standard), background var(--ease-standard);
}
.submit-btn:hover { transform: translateY(-1px); box-shadow: 0 8px 18px rgba(0,0,0,.07); }
.submit-btn:disabled { opacity: .6; cursor: not-allowed; }

/* Spinner (opsiyonel) */
.submit-btn .spinner {
  width: 16px; height: 16px;
  border: 2px solid color-mix(in srgb, var(--bone-black) 25%, white);
  border-top-color: var(--bone-black);
  border-radius: 50%;
  display: none;
  animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Yardımcı metinler */
.input-hint { font-size: .8rem; opacity: .85; margin-top: .35rem; color: color-mix(in srgb, var(--ivory-bone) 92%, white); }
.char-counter { font-size: .8rem; text-align: right; margin-top: .35rem; color: color-mix(in srgb, var(--ivory-bone) 75%, white); }

/* Başarı mesajı */
.success-message {
  background: color-mix(in srgb, var(--alpine-green) 18%, white);
  border: 1px solid color-mix(in srgb, var(--alpine-green) 45%, var(--moon-ash));
  color: var(--deep-moss);
  padding: .9rem 1rem;
  border-radius: var(--radius-md);
  margin: 0 0 var(--space-4) 0;
}


/* =========================================
   5) Responsive
   ========================================= */

@media (max-width: 760px) {
  .form-grid { grid-template-columns: 1fr; gap: var(--space-3); }
  .contact-page { padding-block: var(--space-8); }
}


/* =========================================
   6) Focus / A11y
   ========================================= */

.contact-page :focus-visible {
  box-shadow: var(--accent-gold-ring);
  outline: none;
}

html[dir="rtl"] .char-counter { text-align: left; }


/* =========================================
   7) Dark Mode
   ========================================= */

@media (prefers-color-scheme: dark) {
  .contact-page::before {
    background:
      radial-gradient(60rem 28rem at 90% -10%,
        color-mix(in srgb, var(--oxidized-bronze) 12%, transparent), transparent 60%),
      radial-gradient(80rem 40rem at -10% -20%,
        color-mix(in srgb, var(--deep-moss) 16%, transparent), transparent 55%),
      linear-gradient(180deg,
        color-mix(in srgb, var(--dark-soil) 86%, black) 0%,
        color-mix(in srgb, var(--dark-soil) 94%, black) 100%);
    box-shadow: inset 0 0 140px rgba(0,0,0,.35);
  }

  .social-follow h2 { color: var(--ivory-bone); }

  .social-follow__link {
    background:
      linear-gradient(
        180deg,
        color-mix(in srgb, var(--oxidized-bronze) 18%, var(--dark-soil)),
        color-mix(in srgb, var(--oxidized-bronze) 10%, var(--dark-soil))
      );
    border-color: color-mix(in srgb, var(--oxidized-bronze) 50%, var(--dark-soil));
    color: var(--ivory-bone);
    box-shadow:
      0 10px 24px rgba(0,0,0,.45),
      inset 0 1px 0 rgba(255,255,255,.05);
  }

  .contact-form {
    background:
      linear-gradient(
        180deg,
        color-mix(in srgb, var(--dark-soil) 86%, black) 0%,
        color-mix(in srgb, var(--dark-soil) 92%, black) 100%
      );
    border-color: color-mix(in srgb, var(--dark-soil) 50%, black);
    box-shadow: 0 10px 24px rgba(0,0,0,.45),
                inset 0 1px 0 rgba(255,255,255,.04);
  }

  .contact-form input[type="text"],
  .contact-form input[type="email"],
  .contact-form input[type="tel"],
  .contact-form select,
  .contact-form textarea {
    background: color-mix(in srgb, var(--dark-soil) 78%, black);
    border-color: color-mix(in srgb, var(--cleansing-blue-gray) 35%, black);
    color: var(--moon-ash);
  }

  .contact-form ::placeholder {
    color: color-mix(in srgb, var(--moon-ash) 65%, black);
  }

  .submit-btn {
    background: linear-gradient(
      180deg,
      color-mix(in srgb, var(--oxidized-bronze) 30%, var(--dark-soil)),
      color-mix(in srgb, var(--oxidized-bronze) 15%, var(--dark-soil))
    );
    border-color: color-mix(in srgb, var(--oxidized-bronze) 55%, var(--dark-soil));
    color: var(--ivory-bone);
  }

  .success-message {
    background: color-mix(in srgb, var(--deep-moss) 35%, black);
    border-color: color-mix(in srgb, var(--alpine-green) 45%, black);
    color: var(--ivory-bone);
  }
}


/* =========================================
   8) Motion
   ========================================= */

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}






/* a11y helper: visually hide but keep for screen readers */
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0 0 1px 1px) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* ikon rozetinin içine yazı sızmasını tamamen engelle */
.social-follow__link {
  overflow: hidden;           /* <- span sr-only olsa da garanti */
  line-height: 0;             /* iç metin yüksekliğini sıfırla */
}

/* SVG’nin hizası için küçük dokunuş */
.social-follow__link svg {
  display: block;
  width: 20px;
  height: 20px;
}