/* ==========================================================================
   los · medios, tek sayfa web sitesi
   Marka Kimliği Kılavuzu (Temmuz 2026) esas alınmıştır.
   Renk: indigo zemin · pembe metin · teal aksan
   Tipografi: yalnızca Poppins (700 / 600 / 400 / 300)
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tema değişkenleri
   -------------------------------------------------------------------------- */

:root {
  /* Marka paleti (kılavuz bölüm 2) */
  --bg:            #070250;
  --bg-deep:       #04012F;   /* zeminden bir tık koyu katman */
  --text:          #FFD9F6;
  --accent:        #00FFD5;

  /* Türetilmiş yüzeyler, palet dışı yeni renk yok, hep pembe/teal opaklığı */
  --surface:       rgba(255, 217, 246, 0.035);
  --surface-hover: rgba(255, 217, 246, 0.065);
  --line:          rgba(255, 217, 246, 0.14);
  --line-soft:     rgba(255, 217, 246, 0.08);
  --line-accent:   rgba(0, 255, 213, 0.35);
  --text-soft:     rgba(255, 217, 246, 0.68);
  --text-faint:    rgba(255, 217, 246, 0.42);

  /* Logo renkleri, tema ile birlikte değişir */
  --logo-text:     var(--text);
  --logo-dot:      var(--accent);

  /* Buton */
  --btn-bg:        var(--accent);
  --btn-fg:        var(--bg);

  /* Tipografi */
  --font: "Poppins", "Helvetica Neue", Arial, sans-serif;

  --step--1: clamp(0.75rem, 0.72rem + 0.15vw, 0.82rem);
  --step-0:  clamp(0.95rem, 0.90rem + 0.24vw, 1.06rem);
  --step-1:  clamp(1.10rem, 1.00rem + 0.50vw, 1.35rem);
  --step-2:  clamp(1.45rem, 1.20rem + 1.20vw, 2.20rem);
  --step-3:  clamp(2.00rem, 1.45rem + 2.60vw, 3.60rem);
  --step-4:  clamp(2.60rem, 1.60rem + 4.60vw, 5.60rem);

  /* Ölçü */
  --wrap: 1180px;
  --gutter: clamp(1.25rem, 4vw, 4rem);
  --section-y: clamp(5rem, 11vh, 9.5rem);

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* --------------------------------------------------------------------------
   2. Temel
   -------------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 6rem;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-weight: 400;
  font-size: var(--step-0);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  transition: background-color 0.4s var(--ease), color 0.4s var(--ease);
}

h1, h2, h3, h4 {
  margin: 0;
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -0.022em;
  font-feature-settings: "liga" 0, "clig" 0;   /* kılavuz: ligatürler kapalı */
  text-wrap: balance;
}

p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; }

a {
  color: inherit;
  text-decoration: none;
  transition: color 0.25s var(--ease), opacity 0.25s var(--ease);
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 2px;
}

::selection { background: var(--accent); color: var(--bg); }

/* Metin içinde geçen marka adı: logodaki gibi bold ve accent renkli */
.brand-name { font-weight: 700; color: var(--accent); }

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* --------------------------------------------------------------------------
   3. Ortak parçalar
   -------------------------------------------------------------------------- */

/* Bölüm etiketi, "BİZ KİMİZ", "HİZMETLER" ... */
.label {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  margin: 0 0 clamp(1.25rem, 3vw, 2rem);
  color: var(--accent);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.label::before {
  content: "";
  width: 1.9em;
  height: 1px;
  background: currentColor;
}

/* Wordmark (satır içi SVG sembolü).
   <use> gölge ağacına dışarıdan seçiciyle erişilemediği için logo renkleri
   sembolün içinde satır içi style="fill:var(--logo-text|dot)" ile veriliyor;
   custom property'ler gölge sınırını geçtiği için tema değişimi çalışır. */
.wordmark { display: block; height: auto; }

/* Butonlar */
.btn {
  --_pad-y: 0.78em;
  --_pad-x: 1.6em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  padding: var(--_pad-y) var(--_pad-x);
  border: 1px solid var(--btn-bg);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font: inherit;
  font-weight: 600;
  font-size: var(--step--1);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform 0.25s var(--ease), filter 0.25s var(--ease),
              background-color 0.25s var(--ease), color 0.25s var(--ease);
}
.btn:hover { transform: translateY(-2px); filter: brightness(1.08); }
.btn:active { transform: translateY(0); }

.btn--ghost {
  background: transparent;
  border-color: var(--line);
  color: var(--text);
}
.btn--ghost:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--bg);
  filter: none;
}

/* --------------------------------------------------------------------------
   4. Navigasyon
   -------------------------------------------------------------------------- */

.nav {
  position: fixed;
  inset: 0 0 auto;
  z-index: 60;
  padding: clamp(0.75rem, 2vw, 1.4rem) var(--gutter);
  transition: background-color 0.35s var(--ease), backdrop-filter 0.35s var(--ease),
              border-color 0.35s var(--ease), padding 0.35s var(--ease);
  border-bottom: 1px solid transparent;
}
.nav.is-stuck {
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom-color: var(--line-soft);
  padding-block: clamp(0.55rem, 1.4vw, 0.9rem);
}

.nav__inner {
  max-width: var(--wrap);
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

.nav__brand { flex-shrink: 0; }
.nav__brand .wordmark { width: clamp(104px, 12vw, 136px); }

.nav__menu {
  display: flex;
  align-items: center;
  gap: clamp(1.2rem, 2.6vw, 2.4rem);
}

.nav__link {
  position: relative;
  font-size: var(--step--1);
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--text-soft);
  padding-block: 0.35em;
}
.nav__link::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s var(--ease);
}
.nav__link:hover,
.nav__link[aria-current="true"] { color: var(--text); }
.nav__link:hover::after,
.nav__link[aria-current="true"]::after { transform: scaleX(1); }

.nav__cta { --_pad-y: 0.62em; --_pad-x: 1.2em; }

/* Mobil menü düğmesi */
.nav__toggle {
  display: none;
  width: 44px; height: 44px;
  margin-right: -10px;
  padding: 0;
  background: none;
  border: 0;
  color: var(--text);
  cursor: pointer;
}
.nav__toggle span {
  display: block;
  width: 22px; height: 1.5px;
  margin: 5px auto;
  background: currentColor;
  transition: transform 0.3s var(--ease), opacity 0.2s var(--ease);
}
.nav.is-open .nav__toggle span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav.is-open .nav__toggle span:nth-child(2) { opacity: 0; }
.nav.is-open .nav__toggle span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* --------------------------------------------------------------------------
   5. Hero
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  place-items: center;
  text-align: center;
  padding: clamp(7rem, 16vh, 10rem) var(--gutter) clamp(4rem, 10vh, 6rem);
  overflow: hidden;
}

/* Zeminde çok hafif teal hale, palet dışı renk yok */
.hero::before {
  content: "";
  position: absolute;
  top: 42%; left: 50%;
  width: min(120vw, 1100px);
  aspect-ratio: 1;
  translate: -50% -50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--accent) 11%, transparent) 0%, transparent 62%);
  pointer-events: none;
}

/* Wordmark'ın arkasında nefes alan yuvarlak. Canvas'ı main.js oluşturur;
   burada yalnızca hero'ya oturtulur ve içeriğin altında kalır. */
.hero-net {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.hero__inner { position: relative; z-index: 1; max-width: 900px; }

.hero__eyebrow {
  /* 0.28em harf aralığı ch ölçüsüne girmediği için sınır bilerek geniş tutuldu. */
  max-width: 68ch;
  margin: 0 auto clamp(2rem, 5vw, 3rem);
  color: var(--text-faint);
  font-size: var(--step--1);
  font-weight: 300;
  line-height: 1.9;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  text-wrap: balance;
}

.hero__logo {
  width: min(100%, 660px);
  margin-inline: auto;
}

.hero__motto {
  margin: clamp(2rem, 5vw, 3rem) auto 0;
  max-width: 30ch;
  color: var(--accent);
  font-size: var(--step-1);
  font-weight: 600;
  letter-spacing: 0.01em;
  text-wrap: balance;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.85rem;
  margin-top: clamp(2.25rem, 5vw, 3.25rem);
}

.hero__scroll {
  position: absolute;
  z-index: 1;
  left: 50%;
  bottom: clamp(1.5rem, 4vh, 2.5rem);
  translate: -50% 0;
  color: var(--text-faint);
  font-size: var(--step--1);
  font-weight: 300;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.hero__scroll span {
  display: block;
  width: 1px; height: 42px;
  margin: 0.75rem auto 0;
  background: linear-gradient(to bottom, var(--accent), transparent);
  animation: scroll-cue 2.2s var(--ease) infinite;
}
@keyframes scroll-cue {
  0%, 100% { transform: scaleY(0.35); transform-origin: top; opacity: 0.5; }
  50%      { transform: scaleY(1);    transform-origin: top; opacity: 1; }
}

/* --------------------------------------------------------------------------
   6. Kayan şerit (marquee)
   -------------------------------------------------------------------------- */

.ticker {
  position: relative;
  border-block: 1px solid var(--line-soft);
  background: var(--bg-deep);
  padding-block: clamp(0.9rem, 2vw, 1.25rem);
  overflow: hidden;
  user-select: none;
}
.ticker__track {
  display: flex;
  width: max-content;
  animation: ticker 42s linear infinite;
}
.ticker:hover .ticker__track { animation-play-state: paused; }
.ticker__group {
  display: flex;
  align-items: center;
  gap: clamp(1.5rem, 3vw, 2.75rem);
  padding-right: clamp(1.5rem, 3vw, 2.75rem);
  font-size: var(--step--1);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: lowercase;
  white-space: nowrap;
  color: var(--text-soft);
}
.ticker__group b { font-weight: 600; color: var(--text); }
.ticker__group i { font-style: normal; color: var(--accent); }

/* Aralardaki yıldız. Eskiden ✳ (U+2733) karakteriydi; Poppins'te bu glif yok,
   iOS de eksik glifi Apple Color Emoji'ye düşürüp yeşil emoji kutusu çiziyordu
   (masaüstünde tek renk sembol fontuna düştüğü için sorun görünmüyordu).
   Şekil artık SVG, yani hangi cihaz olursa olsun birebir aynı. */
.ticker__star {
  flex: none;
  width: 0.85em;
  height: 0.85em;
}
@keyframes ticker { to { transform: translateX(-50%); } }

/* --------------------------------------------------------------------------
   7. Bölümler, ortak
   -------------------------------------------------------------------------- */

.section {
  position: relative;
  padding-block: var(--section-y);
}

/* Framer'daki dikey kılavuz çizgisi */
.section--ruled > .wrap {
  border-left: 1px solid var(--line-accent);
  padding-left: clamp(1.25rem, 4vw, 3.5rem);
}

/* Genişlik başlığın kendi punto'suna göre sınırlanır, ch birimi
   üst kapsayıcıya yazılırsa gövde punto'suna göre hesaplanır ve daralır. */
.section__title {
  font-size: var(--step-3);
  max-width: 17ch;
}

.section__lede {
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
  max-width: 62ch;
  color: var(--text-soft);
  font-size: var(--step-0);
  line-height: 1.75;
}

/* --------------------------------------------------------------------------
   8. Konumlandırma / manifesto
   -------------------------------------------------------------------------- */

/* Büyük punto paragraflar başlık ritmini alır, gövde satır aralığı değil. */
.manifesto__statement,
.name__kicker {
  font-weight: 700;
  line-height: 1.07;
  letter-spacing: -0.022em;
  text-wrap: balance;
}

.manifesto__statement {
  margin-top: clamp(2.75rem, 7vw, 5rem);
  max-width: 21ch;
  font-size: var(--step-3);
}
.manifesto__statement em {
  font-style: normal;
  color: var(--accent);
}

.facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: clamp(1.5rem, 3vw, 2.5rem);
  margin-top: clamp(3rem, 7vw, 5rem);
  padding-top: clamp(2rem, 4vw, 3rem);
  border-top: 1px solid var(--line-soft);
}
.facts dt {
  font-size: var(--step-2);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--accent);
}
.facts dd {
  margin: 0.5rem 0 0;
  color: var(--text-soft);
  font-size: var(--step--1);
  font-weight: 300;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   9. Nasıl çalışıyoruz, dört adım
   -------------------------------------------------------------------------- */

.steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 1px;
  margin-top: clamp(3rem, 6vw, 4.5rem);
  background: var(--line-soft);
  border: 1px solid var(--line-soft);
}

.step {
  position: relative;
  background: var(--bg);
  padding: clamp(1.75rem, 3vw, 2.5rem);
  transition: background-color 0.35s var(--ease);
}
.step:hover { background: var(--surface-hover); }

.step__num {
  display: block;
  margin-bottom: 1.5rem;
  color: var(--accent);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.18em;
}
.step__title {
  font-size: var(--step-2);
  margin-bottom: 0.9rem;
}
.step__text {
  color: var(--text-soft);
  font-size: var(--step--1);
  line-height: 1.7;
}

/* --------------------------------------------------------------------------
   10. Hizmetler
   -------------------------------------------------------------------------- */

.services { margin-top: clamp(3rem, 6vw, 4.5rem); }

.service {
  display: grid;
  grid-template-columns: 3.5rem minmax(0, 1fr);
  gap: 0.75rem clamp(1.5rem, 4vw, 3rem);
  padding-block: clamp(2rem, 4vw, 2.75rem);
  border-top: 1px solid var(--line-soft);
  transition: background-color 0.35s var(--ease);
}
.service:last-of-type { border-bottom: 1px solid var(--line-soft); }
.service:hover { background: var(--surface); }

.service__num {
  color: var(--accent);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.14em;
  padding-top: 0.55em;
}
.service__body {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(0.75rem, 3vw, 3rem);
  align-items: start;
}
.service__title { font-size: var(--step-2); }
.service__text {
  color: var(--text-soft);
  font-size: var(--step--1);
  line-height: 1.75;
}
.service__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 1rem;
}
.service__tags li {
  padding: 0.3em 0.75em;
  border: 1px solid var(--line);
  color: var(--text-faint);
  font-size: 0.72rem;
  font-weight: 300;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* Ters renkli kapanış kartı, kılavuzdaki tek geniş teal yüzey istisnası */
.closing-card {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  margin-top: clamp(2rem, 4vw, 3rem);
  padding: clamp(2rem, 5vw, 3.5rem);
  background: var(--accent);
  color: var(--bg);
}
.closing-card__title {
  font-size: var(--step-3);
  max-width: 16ch;
}
.closing-card__text {
  max-width: 34ch;
  font-size: var(--step--1);
  font-weight: 500;
  opacity: 0.78;
}

/* --------------------------------------------------------------------------
   11. Adımız
   -------------------------------------------------------------------------- */

.section--name { background: var(--bg-deep); }

.meanings {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: clamp(1.5rem, 3vw, 2rem);
  margin-top: clamp(3rem, 6vw, 4.5rem);
}
.meaning {
  padding: clamp(1.75rem, 3vw, 2.25rem);
  border: 1px solid var(--line-soft);
  background: var(--surface);
  transition: border-color 0.35s var(--ease), transform 0.35s var(--ease);
}
.meaning:hover { border-color: var(--line-accent); transform: translateY(-4px); }
.meaning__term {
  font-size: var(--step-1);
  font-weight: 700;
  letter-spacing: -0.01em;
}
.meaning__gloss {
  display: block;
  margin-top: 0.35rem;
  color: var(--accent);
  font-size: var(--step--1);
  font-weight: 400;
  font-style: italic;
}
.meaning__text {
  margin-top: 1rem;
  color: var(--text-soft);
  font-size: var(--step--1);
  line-height: 1.7;
}

.name__kicker {
  margin-top: clamp(3rem, 6vw, 4.5rem);
  max-width: 24ch;
  font-size: var(--step-3);
}
.name__kicker em { font-style: normal; color: var(--accent); }

/* --------------------------------------------------------------------------
   12. İletişim
   -------------------------------------------------------------------------- */

.contact { text-align: center; }
.contact .label { justify-content: center; }
.contact__title { font-size: var(--step-4); }
.contact__signature {
  margin: clamp(1.25rem, 3vw, 2rem) auto 0;
  max-width: 34ch;
  color: var(--accent);
  font-size: var(--step-1);
  font-weight: 600;
}

.form-wrap {
  position: relative;
  max-width: 760px;
  margin: clamp(3rem, 6vw, 4.5rem) auto 0;
}

.form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem;
  text-align: left;
}
.field--wide { grid-column: 1 / -1; }

.field label {
  display: block;
  margin-bottom: 0.5rem;
  color: var(--accent);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.field input,
.field textarea {
  width: 100%;
  padding: 0.95em 1.1em;
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--text);
  font: inherit;
  font-size: var(--step-0);
  transition: border-color 0.25s var(--ease), background-color 0.25s var(--ease);
}
.field textarea { resize: vertical; min-height: 8.5rem; }
.field input::placeholder,
.field textarea::placeholder { color: var(--text-faint); }
.field input:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--accent);
  background: var(--surface-hover);
}
.field input:user-invalid,
.field textarea:user-invalid { border-color: color-mix(in srgb, var(--text) 55%, transparent); }

.form__submit { grid-column: 1 / -1; justify-self: start; }

/* Gönderim sırasında form bulanıklaşır, üstünde durum katmanı belirir. */
.form-wrap.is-busy .form,
.form-wrap.is-done .form {
  filter: blur(4px);
  opacity: 0.4;
  user-select: none;
  transition: filter 0.35s var(--ease), opacity 0.35s var(--ease);
}

.form-overlay {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: grid;
  place-items: center;
  padding: 1rem;
  background: color-mix(in srgb, var(--bg) 55%, transparent);
  opacity: 0;
  animation: overlay-in 0.3s var(--ease) forwards;
}
.form-overlay[hidden] { display: none; }

@keyframes overlay-in { to { opacity: 1; } }

.form-overlay__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.1rem;
  max-width: 34ch;
  text-align: center;
}

.form-overlay__spinner {
  width: 2.25rem;
  height: 2.25rem;
  border: 2px solid var(--line);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

.form-overlay__tick {
  width: 2.5rem;
  height: 2.5rem;
  color: var(--accent);
  display: none;
}

.form-overlay__text {
  color: var(--accent);
  font-size: var(--step-0);
  font-weight: 500;
  letter-spacing: 0.02em;
}

.form-overlay__again {
  padding: 0.6em 1.2em;
  background: none;
  border: 1px solid var(--line);
  color: var(--text-soft);
  font: inherit;
  font-size: var(--step--1);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color 0.25s var(--ease), color 0.25s var(--ease);
}
.form-overlay__again:hover { border-color: var(--accent); color: var(--accent); }
.form-overlay__again[hidden] { display: none; }

/* Bitmiş durumlarda spinner yerini sonuca bırakır. */
.form-wrap.is-done .form-overlay__spinner,
.form-wrap.is-error .form-overlay__spinner { display: none; }
.form-wrap.is-done .form-overlay__tick { display: block; }
.form-wrap.is-error .form-overlay__text { color: var(--text); }

.contact__direct {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.5rem 1.25rem;
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  color: var(--text-faint);
  font-size: var(--step--1);
  font-weight: 300;
  letter-spacing: 0.1em;
}
.contact__direct a { color: var(--text); border-bottom: 1px solid var(--line-accent); }
.contact__direct a:hover { color: var(--accent); }
.contact__direct a.contact__social { border-bottom: none; color: var(--text-faint); display: inline-flex; align-items: center; }
.contact__direct a.contact__social:hover { color: var(--accent); }
.contact__social svg { width: 1.25rem; height: 1.25rem; display: block; }

/* --------------------------------------------------------------------------
   13. Footer
   -------------------------------------------------------------------------- */

.footer {
  border-top: 1px solid var(--line-soft);
  padding-block: clamp(2.5rem, 5vw, 3.5rem);
  background: var(--bg-deep);
}
.footer__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}
.footer .wordmark { width: 112px; }
.footer__meta {
  color: var(--text-faint);
  font-size: var(--step--1);
  font-weight: 300;
  letter-spacing: 0.08em;
}
.footer__motto { color: var(--accent); font-weight: 500; letter-spacing: 0.04em; }

/* Bal küpü: gerçek kullanıcıya görünmez, spam botları doldurur.
   display:none yerine ekran dışına alınır, bazı botlar gizli alanı atlar. */
.field--trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* --------------------------------------------------------------------------
   14. Başa dön butonu
   Hero geçildikten sonra sağ altta belirir. Kapalı durumda visibility:hidden
   olduğu için sekme sırasında da yer kaplamaz. Yüzeyi yapışkan menüyle aynı
   reçete (zeminin %82'si + blur), böylece ikisi aynı katmandan okunur.
   -------------------------------------------------------------------------- */

.to-top {
  position: fixed;
  z-index: 50;                      /* nav 60: mobil menü açıkken altında kalır */
  right: var(--gutter);
  bottom: var(--gutter);
  width: 2.9rem;
  height: 2.9rem;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  color: var(--accent);
  cursor: pointer;

  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease), visibility 0.3s,
              background-color 0.25s var(--ease), border-color 0.25s var(--ease),
              color 0.25s var(--ease);
}
.to-top.is-visible { opacity: 1; visibility: visible; transform: none; }

.to-top svg { width: 1.1rem; height: 1.1rem; }

.to-top:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--bg);
}
.to-top.is-visible:hover  { transform: translateY(-2px); }
.to-top.is-visible:active { transform: none; }

/* --------------------------------------------------------------------------
   15. Scroll-in animasyonu
   Kılavuz: Slide In Bottom · Offset Y 40px · Opacity 0→1 · Ease Out 0.5s · 0.1s stagger
   -------------------------------------------------------------------------- */

.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.5s ease-out, transform 0.5s ease-out;
  transition-delay: var(--d, 0s);
}
.reveal.is-visible { opacity: 1; transform: none; }

/* JS yoksa içerik her halükarda görünür */
.no-js .reveal { opacity: 1; transform: none; }

/* --------------------------------------------------------------------------
   16. Duyarlı düzen
   -------------------------------------------------------------------------- */

@media (max-width: 860px) {
  .service__body { grid-template-columns: 1fr; gap: 0.75rem; }
  .service { grid-template-columns: 2.5rem minmax(0, 1fr); }
}

@media (max-width: 720px) {
  .nav__toggle { display: block; }

  /* backdrop-filter, position:fixed alt öğeler için kapsayıcı blok yarattığından
     menü açıkken kaldırılır. Yoksa tam ekran katman nav'ın kutusuna sıkışır. */
  .nav.is-open,
  .nav.is-open.is-stuck {
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-bottom-color: transparent;
  }

  .nav__brand,
  .nav__toggle { position: relative; z-index: 2; }

  .nav__menu {
    position: fixed;
    inset: 0;
    flex-direction: column;
    justify-content: center;
    gap: 2rem;
    padding: 6rem var(--gutter) 3rem;
    background: var(--bg);
    overflow-y: auto;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity 0.3s var(--ease), transform 0.3s var(--ease), visibility 0.3s;
  }
  .nav.is-open .nav__menu { opacity: 1; visibility: visible; transform: none; }
  .nav__link { font-size: var(--step-2); font-weight: 600; letter-spacing: -0.01em; }
  .nav__link::after { display: none; }
  .nav__cta { --_pad-y: 0.85em; --_pad-x: 2em; font-size: var(--step-0); }

  .form { grid-template-columns: 1fr; }
  .form__submit { justify-self: stretch; }

  .facts { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 420px) {
  .hero__eyebrow { letter-spacing: 0.16em; }
}

/* --------------------------------------------------------------------------
   17. Erişilebilirlik / baskı
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .reveal { opacity: 1; transform: none; }

  /* Dönmeyen bir spinner bozuk görünür; metin zaten durumu anlatıyor. */
  .form-overlay__spinner { display: none; }
  .form-overlay { opacity: 1; }
}

@media print {
  .nav, .ticker, .hero__scroll, .to-top { display: none !important; }
  body { background: #fff; color: #070250; }
}