/* Meskio tanıtım sitesi — tek dosya, çerçeve yok.
   Uygulamanın markasıyla aynı: lacivert #1D3F63 + turkuaz #00BCD4, Inter.
   Bkz. ana README "Marka" bölümü. */

@font-face {
  font-family: 'Inter';
  src: url('fonts/inter-latin-ext-400.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB,
    U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  src: url('fonts/inter-latin-400.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('fonts/inter-latin-ext-600.woff2') format('woff2');
  font-weight: 600;
  font-display: swap;
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB,
    U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  src: url('fonts/inter-latin-600.woff2') format('woff2');
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('fonts/inter-latin-ext-700.woff2') format('woff2');
  font-weight: 700;
  font-display: swap;
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB,
    U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  src: url('fonts/inter-latin-700.woff2') format('woff2');
  font-weight: 700;
  font-display: swap;
}

:root {
  --marka: #1d3f63;
  --marka-koyu: #17324f;
  --vurgu: #00bcd4;
  --metin: #1f2937;
  --sonuk: #6b7280;
  --cizgi: #e5e7eb;
  --zemin: #f7f8fa;
  --kutu: #fff;
  --radius: 12px;
}

* { box-sizing: border-box; }

/* Üst şerit YAPIŞKAN: çapa bağlantısına (#neler-var) tıklanınca hedef
   başlık şeridin ALTINDA kalıyordu. scroll-padding-top, tarayıcının
   duracağı yeri şerit boyu kadar aşağı kaydırır. */
html {
  scroll-padding-top: 84px;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  color: var(--metin);
  background: var(--kutu);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

.sarmal {
  width: 100%;
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 20px;
}

/* ── Üst şerit ── */
.ust {
  position: sticky;
  top: 0;
  z-index: 10;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--cizgi);
}
.ust .sarmal {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  height: 64px;
}
.logo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  font-size: 20px;
  color: var(--marka);
  text-decoration: none;
}
.logo img { width: 30px; height: 30px; }
.ust nav { display: flex; align-items: center; gap: 22px; }
.ust nav a {
  color: var(--sonuk);
  text-decoration: none;
  font-size: 15px;
}
.ust nav a:hover { color: var(--marka); }
/* DÜĞME İSTİSNA: yukarıdaki kural (özgüllük 0,1,2) .dugme'yi (0,1,0) ezip
   metni GRİ yapıyordu — lacivert zeminde kontrast 2.24, okunmuyordu.
   Seçiciyi özgülleştirmek, kural sırasına bağlı kalmaktan sağlamdır. */
.ust nav a.dugme {
  color: #fff;
}
.ust nav a.dugme:hover { color: #fff; }

/* ── Düğmeler ── */
.dugme {
  display: inline-block;
  background: var(--marka);
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  font-size: 15px;
  padding: 12px 22px;
  border-radius: var(--radius);
  border: 1px solid var(--marka);
  cursor: pointer;
}
.dugme:hover { background: var(--marka-koyu); }
.dugme.ikincil {
  background: transparent;
  color: var(--marka);
}
.dugme.ikincil:hover { background: var(--zemin); }

/* ── Kahraman (hero) ── */
.kahraman {
  padding: 72px 0 56px;
  background: linear-gradient(180deg, #fff 0%, var(--zemin) 100%);
}
.kahraman h1 {
  font-size: 44px;
  line-height: 1.2;
  margin: 0 0 16px;
  color: #111827;
  letter-spacing: -0.5px;
}
.kahraman .alt {
  font-size: 19px;
  color: var(--sonuk);
  max-width: 640px;
  margin: 0 0 28px;
}
.kahraman .eylemler { display: flex; gap: 12px; flex-wrap: wrap; }
.kahraman .kucuk {
  margin-top: 14px;
  font-size: 14px;
  color: var(--sonuk);
}

/* ── Ekran görüntüsü ── */
.ekran {
  margin-top: 44px;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--cizgi);
  box-shadow: 0 18px 40px rgba(29, 63, 99, 0.14);
  background: #fff;
}
.ekran img { display: block; width: 100%; height: auto; }

/* ── Bölümler ── */
section { padding: 64px 0; }
section.gri { background: var(--zemin); }
section h2 {
  font-size: 30px;
  margin: 0 0 10px;
  color: #111827;
  letter-spacing: -0.3px;
}
section .giris {
  color: var(--sonuk);
  font-size: 17px;
  max-width: 640px;
  margin: 0 0 36px;
}

.izgara {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
}
.kart {
  background: var(--kutu);
  border: 1px solid var(--cizgi);
  border-radius: var(--radius);
  padding: 22px;
}
section.gri .kart { background: #fff; }
.kart .simge { font-size: 24px; }
.kart h3 { margin: 10px 0 6px; font-size: 17px; color: #111827; }
.kart p { margin: 0; color: var(--sonuk); font-size: 15px; }

/* ── Özellik + görsel ikilisi ── */
.ikili {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
  gap: 40px;
  align-items: center;
}
.ikili + .ikili { margin-top: 64px; }
.ikili.ters > .gorsel { order: -1; }
.ikili h3 { font-size: 23px; margin: 0 0 10px; color: #111827; }
.ikili p { color: var(--sonuk); margin: 0 0 14px; }
.ikili ul { margin: 0; padding-left: 20px; color: var(--sonuk); }
.ikili li { margin: 5px 0; }
.gorsel img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 12px;
  border: 1px solid var(--cizgi);
  box-shadow: 0 10px 26px rgba(29, 63, 99, 0.1);
}

/* ── İletişim ── */
.iletisim-kutu {
  background: var(--marka);
  color: #fff;
  border-radius: 16px;
  padding: 40px;
}
.iletisim-kutu h2 { color: #fff; }
.iletisim-kutu .giris { color: rgba(255, 255, 255, 0.85); }
.iletisim-izgara {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 32px;
  align-items: start;
}
form label {
  display: block;
  font-size: 14px;
  font-weight: 600;
  margin: 0 0 6px;
  color: rgba(255, 255, 255, 0.9);
}
form input,
form textarea {
  width: 100%;
  font: inherit;
  padding: 11px 13px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  margin-bottom: 14px;
}
form input::placeholder,
form textarea::placeholder { color: rgba(255, 255, 255, 0.5); }
form input:focus,
form textarea:focus {
  outline: 2px solid var(--vurgu);
  outline-offset: 1px;
}
/* Form düğmesi TURKUAZ olmalı: .dugme lacivert veriyor ve form kutusunun
   zemini de lacivert — düğme kutunun içinde KAYBOLUYORDU (kontrast 1.0).
   `form button` (0,0,2) .dugme'yi (0,1,0) ezemediği için seçici sınıfla
   birlikte yazıldı. Koyu metin + turkuaz zemin kontrastı 8'in üzerinde;
   turkuaz ancak BÖYLE kullanılır (beyaz zeminde açık metin olarak değil). */
form button.dugme {
  background: var(--vurgu);
  border-color: var(--vurgu);
  color: #06323a;
  font-weight: 700;
}
form button.dugme:hover {
  background: #00a5ba;
  border-color: #00a5ba;
}
form button:disabled { opacity: 0.6; cursor: default; }
.form-not {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.75);
  margin: 10px 0 0;
}
.form-not a { color: #fff; }
.sonuc { margin: 12px 0 0; font-size: 15px; font-weight: 600; }
.sonuc.iyi { color: #86efac; }
.sonuc.kotu { color: #fecaca; }
/* BAL KÜPÜ: insanlar görmez, botlar doldurur (bkz. index.html açıklaması). */
.balkupu {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.dogrudan a { color: #fff; font-weight: 600; }
.dogrudan p { color: rgba(255, 255, 255, 0.85); margin: 0 0 10px; }

/* ── Alt bilgi ── */
footer {
  border-top: 1px solid var(--cizgi);
  padding: 28px 0;
  font-size: 14px;
  color: var(--sonuk);
}
footer .sarmal {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
footer a { color: var(--sonuk); }

/* ── Yasal sayfalar ── */
.yasal { padding: 48px 0 64px; max-width: 760px; }
.yasal h1 { font-size: 30px; margin: 0 0 6px; }
.yasal .tarih { color: var(--sonuk); font-size: 14px; margin: 0 0 28px; }
.yasal h2 { font-size: 19px; margin: 28px 0 8px; }
.yasal p, .yasal li { color: #374151; font-size: 15px; }
.yasal ul { padding-left: 20px; }

/* ── Telefon ──
   Tek kırılım yeter: ızgaralar zaten auto-fit ile kendiliğinden iniyor.
   minmax(0, 1fr) kullanıldı — düz 1fr hücreyi içeriğinin min-content
   genişliğinden dar yapamaz ve uzun bir kelime taşmaya yol açar (bu tuzak
   uygulamada 20 Ağu'da yaşandı, bkz. ana README "Mobil gözden geçirme"). */
@media (max-width: 760px) {
  .kahraman { padding: 48px 0 40px; }
  .kahraman h1 { font-size: 32px; }
  .kahraman .alt { font-size: 17px; }
  section { padding: 48px 0; }
  section h2 { font-size: 25px; }
  .ikili,
  .iletisim-izgara {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
  }
  .ikili.ters > .gorsel { order: 0; }
  .iletisim-kutu { padding: 26px 20px; }
  .ust nav a:not(.dugme) { display: none; }
}