/* Konsensus web sitesi */

@font-face {
  font-family: "Nunito Sans";
  src: url("../fonts/nunito-sans.woff2") format("woff2");
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --lacivert: #203B59;
  --lacivert-acik: #2A4A6F;
  --sari: #F2A93B;
  --sari-acik: #F6BC63;
  --beton: #EDF0F3;
  --gri: #5A6672;
  --acik: #D7DEE6;
  --beyaz: #FFFFFF;
  --kenar: clamp(20px, 4vw, 48px);
  --bolum: clamp(56px, 8vw, 112px);
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: "Nunito Sans", "Segoe UI", Arial, sans-serif;
  font-size: clamp(1.0625rem, 0.9rem + 0.45vw, 1.25rem);
  line-height: 1.6;
  color: var(--lacivert);
  background: var(--beyaz);
}

img, svg { display: block; max-width: 100%; }
img { height: auto; }
h1, h2, h3 { margin: 0; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
a { color: inherit; text-underline-offset: 0.18em; }

:focus-visible { outline: 3px solid var(--lacivert); outline-offset: 3px; }
.koyu :focus-visible { outline-color: var(--sari); }

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

.atla {
  position: absolute; left: 12px; top: -120px; z-index: 10;
  padding: 12px 18px;
  background: var(--sari); color: var(--lacivert);
  font-weight: 800; text-decoration: none;
}
.atla:focus { top: 12px; }

.kap { max-width: 1200px; margin: 0 auto; padding-left: var(--kenar); padding-right: var(--kenar); }
.kap-dar { max-width: 860px; }

.koyu { background: var(--lacivert); color: var(--beyaz); }

/* Üst bilgi */
.baslik {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 4px 40px; padding: 20px 0 4px;
}
.marka { display: block; padding: 10px 0; }
.marka img { width: 200px; }
.menu { display: flex; flex-wrap: wrap; column-gap: 28px; font-size: 18px; font-weight: 700; }
.menu a { color: var(--beyaz); text-decoration: none; padding: 10px 0; }
.menu a:hover { text-decoration: underline; text-decoration-thickness: 2px; }

/* Açılış */
.ust { overflow: hidden; }
.acilis {
  display: flex; flex-wrap: wrap; align-items: flex-end;
  gap: 40px 48px; padding-top: clamp(32px, 5vw, 72px);
}
.acilis-metin { flex: 1 1 560px; min-width: 0; padding-bottom: clamp(56px, 7vw, 104px); }
.acilis h1 {
  font-size: clamp(2.5rem, 1.6rem + 3.6vw, 5rem);
  font-weight: 900; line-height: 1.05; letter-spacing: -0.01em;
}
.giris {
  margin-top: 28px; max-width: 32em;
  font-size: clamp(1.1875rem, 1rem + 0.5vw, 1.4rem); line-height: 1.55;
  color: var(--acik);
}
.eylemler { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 40px; }
.guven {
  display: flex; flex-wrap: wrap; gap: 10px 28px;
  margin: 36px 0 0; padding: 0; list-style: none;
  font-size: 17px; font-weight: 600; color: var(--acik);
}
.guven li { display: flex; align-items: center; gap: 10px; }
.guven li::before { content: ""; width: 10px; height: 10px; background: var(--sari); flex-shrink: 0; }
.acilis-gorsel { flex: 0 1 440px; max-width: 72%; margin-left: auto; }
.acilis-gorsel svg { width: 100%; height: auto; margin-bottom: -48px; }

/* Düğmeler */
.dugme {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  min-height: 60px; padding: 0 28px;
  border: 2px solid transparent; border-radius: 0;
  font: inherit; font-size: 20px; font-weight: 800; line-height: 1.2;
  text-align: center; text-decoration: none; cursor: pointer;
}
.dugme svg { width: 22px; height: 22px; flex-shrink: 0; }
.dugme-sari { background: var(--sari); border-color: var(--sari); color: var(--lacivert); }
.dugme-sari:hover { background: var(--sari-acik); border-color: var(--sari-acik); }
.dugme-cizgi { border-color: var(--beyaz); color: var(--beyaz); }
.dugme-cizgi:hover { background: rgba(255, 255, 255, 0.12); }
.dugme-lacivert { background: var(--lacivert); border-color: var(--lacivert); color: var(--beyaz); }
.dugme-lacivert:hover { background: var(--lacivert-acik); border-color: var(--lacivert-acik); }
.dugme-tam { width: 100%; }

/* Bölümler: lacivert açılıştan sonra beyaz ve beton zeminler sırayla gelir */
.bolum { padding: var(--bolum) 0; }
main > section.bolum:nth-of-type(odd) { background: var(--beton); }
.bolum h2 { font-size: clamp(2rem, 1.4rem + 2vw, 3.25rem); font-weight: 900; line-height: 1.1; }
.ozet { margin-top: 20px; max-width: 36em; }
h3 { font-size: clamp(1.375rem, 1.1rem + 0.8vw, 1.75rem); font-weight: 800; line-height: 1.25; }

.ikili {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
  gap: 24px; margin-top: 48px;
}
.panel { background: var(--beton); padding: clamp(28px, 4vw, 44px); }
main > section.bolum:nth-of-type(odd) .panel { background: var(--beyaz); }
.liste { list-style: none; margin: 20px 0 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.liste li { display: flex; align-items: flex-start; gap: 14px; }
.liste li::before { content: ""; width: 12px; height: 12px; margin-top: 0.5em; background: var(--sari); flex-shrink: 0; }

.adimlar {
  list-style: none; margin: 48px 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
  gap: 40px 32px; counter-reset: adim;
}
.adimlar li { counter-increment: adim; }
.adimlar li::before {
  content: counter(adim);
  display: flex; align-items: center; justify-content: center;
  width: 64px; height: 64px;
  background: var(--sari); color: var(--lacivert);
  font-size: 32px; font-weight: 900; line-height: 1;
}
.adimlar h3 { margin-top: 20px; }
.adimlar p { margin-top: 8px; }

.hizmetler {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
  gap: 44px 64px; margin-top: 48px;
}
.hizmet { display: flex; align-items: flex-start; gap: 18px; }
.hizmet::before { content: ""; width: 16px; height: 16px; margin-top: 0.55em; background: var(--sari); flex-shrink: 0; }
.hizmet p { margin-top: 8px; }

.ekip {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
  gap: 32px 24px; margin-top: 48px;
}
.ekip img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }
.ekip .ad { margin-top: 14px; font-size: clamp(1.1875rem, 1rem + 0.4vw, 1.375rem); font-weight: 800; line-height: 1.3; }
.ekip .unvan { color: var(--gri); font-size: 18px; }

.sss {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr));
  gap: 44px 64px; margin-top: 48px;
}
.sss h3 { font-size: clamp(1.25rem, 1.05rem + 0.6vw, 1.5rem); line-height: 1.3; }
.sss p { margin-top: 10px; }

/* İletişim */
.iletisim-izgara {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr));
  gap: 48px; margin-top: 48px; align-items: start;
}
.kanallar { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 28px; }
.kanal { display: flex; align-items: flex-start; gap: 16px; }
.kanal svg { width: 28px; height: 28px; flex-shrink: 0; margin-top: 4px; }
.etiket { font-size: 17px; font-weight: 600; color: var(--gri); }
.kanal a { font-weight: 800; text-decoration: none; overflow-wrap: anywhere; }
.kanal a:hover { text-decoration: underline; }
.kanal .buyuk { font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); font-weight: 900; line-height: 1.25; }

.form { background: var(--beyaz); padding: clamp(24px, 4vw, 40px); display: flex; flex-direction: column; gap: 22px; }
main > section.bolum:nth-of-type(even) .form { background: var(--beton); }
.alan label, .grup legend { display: block; margin-bottom: 8px; font-size: 18px; font-weight: 700; }
.istege-bagli { font-weight: 400; color: var(--gri); }
.alan input, .alan textarea {
  width: 100%; min-height: 56px; padding: 12px 16px;
  font: inherit; font-size: 19px; color: var(--lacivert);
  background: var(--beyaz); border: 2px solid var(--gri); border-radius: 0;
}
.alan textarea { min-height: 128px; line-height: 1.5; resize: vertical; }
.alan input:focus-visible, .alan textarea:focus-visible { outline-offset: 0; border-color: var(--lacivert); }
.ikili-alan {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
  gap: 22px;
}
.grup { border: 0; margin: 0; padding: 0; min-width: 0; }
.grup legend { padding: 0; margin-bottom: 6px; }
.secenekler { display: flex; flex-wrap: wrap; column-gap: 28px; }
.secenek { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font-size: 19px; cursor: pointer; }
.secenek input, .onay input { width: 22px; height: 22px; margin: 0; flex-shrink: 0; accent-color: var(--lacivert); }
.onay { display: flex; align-items: flex-start; gap: 12px; font-size: 17px; line-height: 1.5; cursor: pointer; }
.onay input { margin-top: 2px; }
.onay a { font-weight: 700; }

/* Alt bilgi */
.alt { padding: clamp(48px, 6vw, 72px) 0; color: var(--acik); }
.alt-ust { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 32px; }
.alt-ust img { width: 300px; }
.alt nav { display: flex; flex-wrap: wrap; column-gap: 28px; font-size: 17px; font-weight: 600; }
.alt nav a { color: var(--beyaz); padding: 10px 0; }
.telif { margin-top: 32px; font-size: 16px; }

/* Metin sayfaları */
.metin { padding: var(--bolum) 0; }
.metin h1 { font-size: clamp(2rem, 1.4rem + 2vw, 3rem); font-weight: 900; line-height: 1.1; }
.metin h2 { margin-top: 40px; font-size: clamp(1.375rem, 1.1rem + 0.8vw, 1.75rem); font-weight: 800; line-height: 1.25; }
.metin p, .metin ul { margin-top: 14px; }
.metin ul { padding-left: 1.25em; }
.metin li + li { margin-top: 6px; }
.metin .tarih { margin-top: 40px; font-size: 17px; color: var(--gri); }
.metin .dugme { margin-top: 32px; }

@media (max-width: 640px) {
  .menu { column-gap: 20px; font-size: 17px; }
  .eylemler .dugme { width: 100%; }
  .acilis-gorsel { max-width: 56%; }
  .alt-ust img { width: 280px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}