/* ==========================================================================
   erentcolak.com.tr — tek stil dosyası
   İçindekiler:
   1. Değişkenler   2. Temel   3. Yardımcılar   4. Butonlar ve bağlantılar
   5. Üst menü      6. Hero    7. Marka şeridi  8. Bölüm iskeleti
   9. Vaka kartları 10. Numaralı satırlar       11. Danışmanlık süreci
   12. SSS          13. Rehber kartları         14. İletişim bloğu
   15. Footer       16. WhatsApp butonu         17. Mobil
   ========================================================================== */

/* 1. Değişkenler ---------------------------------------------------------- */
:root {
  --renk-zemin: #F4F5F7;
  --renk-yuzey: #FFFFFF;
  --renk-murekkep: #111318;   /* başlıklar, çizgiler */
  --renk-metin: #33373F;      /* gövde metni */
  --renk-soluk: #555B66;      /* ikincil metin */
  --renk-cizgi: #C9CDD4;      /* ince ayırıcılar */
  --renk-dolgu: #DADDE2;      /* yer tutucu alanlar */
  --renk-vurgu: #5B45FC;      /* tek vurgu rengi: değiştirmek için yalnızca burası */

  --yazi-baslik: 'Bricolage Grotesque', system-ui, sans-serif;
  --yazi-govde: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --yazi-logo: 'Plus Jakarta Sans', system-ui, sans-serif;

  --genislik: 1280px;
  --kenar: 40px;              /* sayfa yan boşluğu */
  --bolum: 104px;             /* bölümler arası boşluk */
}

/* 2. Temel ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--renk-zemin);
  color: var(--renk-murekkep);
  font-family: var(--yazi-govde);
  font-size: 16px;
  line-height: 1.55;
}
h1, h2, h3, p, ol, ul, dl, dd, figure { margin: 0; }
ol, ul { padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
a:hover { color: var(--renk-vurgu); }
img, svg { display: block; max-width: 100%; }
button, input, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--renk-vurgu); outline-offset: 3px; }
[hidden] { display: none !important; }

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

/* 3. Yardımcılar ---------------------------------------------------------- */
.kapsayici { max-width: var(--genislik); margin-inline: auto; padding-inline: var(--kenar); }
.gizli-etiket {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}
.atla {
  position: absolute; left: 16px; top: -60px; z-index: 20;
  padding: 12px 16px; background: var(--renk-murekkep); color: #FFFFFF;
}
.atla:focus { top: 16px; color: #FFFFFF; }
.vurgu { color: var(--renk-vurgu); }
.ust-etiket { font-size: 14px; font-weight: 600; color: var(--renk-vurgu); }
.baslik-2 {
  font-family: var(--yazi-baslik); font-weight: 500;
  font-size: clamp(32px, 3.4vw, 48px); line-height: 1.05; letter-spacing: -0.025em;
}
.ok { flex: 0 0 auto; }

/* 4. Butonlar ve bağlantılar ---------------------------------------------- */
.buton {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 54px; padding: 0 28px; border: 1px solid transparent;
  font-size: 17px; font-weight: 600; cursor: pointer;
}
.buton--vurgu { background: var(--renk-vurgu); color: #FFFFFF; }
.buton--vurgu:hover { background: var(--renk-murekkep); color: #FFFFFF; }
.buton--cizgi { border-color: var(--renk-murekkep); font-weight: 500; }
.buton--cizgi:hover { background: var(--renk-murekkep); color: #FFFFFF; }
.buton--koyu { background: var(--renk-murekkep); color: #FFFFFF; }
.buton--koyu:hover { background: #2B2F38; color: #FFFFFF; }
.buton--kucuk { min-height: 44px; padding: 0 22px; font-size: 16px; }

.baglanti-ok {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px;
  font-size: 16px; font-weight: 500;
  text-decoration: underline; text-underline-offset: 5px;
}
.ikon-buton {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; padding: 0;
  border: 1px solid var(--renk-murekkep); background: transparent; cursor: pointer;
}
.ikon-buton:hover { background: var(--renk-murekkep); color: #FFFFFF; }
.ikon-buton--dolu { background: var(--renk-murekkep); color: #FFFFFF; }

/* 5. Üst menü ------------------------------------------------------------- */
.ust { padding-block: 28px; }
.ust__ic { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.logo { display: inline-flex; align-items: center; gap: 12px; min-height: 48px; color: #231F20; }
.logo:hover { color: #231F20; }
.logo__yazi { font-family: var(--yazi-logo); font-size: 16px; line-height: 1.08; font-weight: 700; }
.menu { display: flex; align-items: center; gap: 36px; font-size: 16px; }
.menu a[aria-current="page"] {
  font-weight: 600; text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 2px;
}
.ust__mobil { display: none; gap: 8px; }

.arama { padding-bottom: 20px; }
.arama__form { display: flex; gap: 8px; }
.arama__alan {
  flex: 1 1 auto; min-width: 0; height: 52px; padding: 0 16px;
  border: 1px solid var(--renk-murekkep); background: var(--renk-yuzey);
}

.mobil-menu {
  padding: 4px var(--kenar) 24px; background: var(--renk-yuzey);
  border-top: 1px solid var(--renk-murekkep); border-bottom: 1px solid var(--renk-murekkep);
  font-family: var(--yazi-baslik); font-size: 24px; font-weight: 500;
}
.mobil-menu__satir, .mobil-menu summary {
  display: flex; align-items: center; justify-content: space-between;
  min-height: 58px; border-bottom: 1px solid var(--renk-cizgi);
}
.mobil-menu details[open] summary { border-bottom: 0; }
.mobil-menu details { border-bottom: 0; }
.mobil-menu details[open] { border-bottom: 1px solid var(--renk-cizgi); }
.mobil-menu__alt { padding-bottom: 14px; font-family: var(--yazi-govde); font-size: 16px; }
.mobil-menu__alt a { display: flex; align-items: center; gap: 14px; min-height: 44px; }
.mobil-menu__alt span { min-width: 22px; font-size: 13px; font-weight: 600; color: var(--renk-vurgu); }
.mobil-menu .buton { width: 100%; margin-top: 20px; font-family: var(--yazi-govde); }

summary { cursor: pointer; list-style: none; }
summary::-webkit-details-marker { display: none; }
summary .ok { transition: transform .2s ease; }
details[open] > summary .ok { transform: rotate(90deg); }

/* 6. Hero ----------------------------------------------------------------- */
.hero { padding-block: 72px 96px; }
.hero__ic { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); align-items: center; gap: 64px; }
.hero__metin { display: flex; flex-direction: column; align-items: flex-start; gap: 28px; }
.hero__baslik {
  font-family: var(--yazi-baslik); font-weight: 500;
  font-size: clamp(42px, 5.8vw, 88px); line-height: 0.98; letter-spacing: -0.035em;
  text-wrap: balance;
}
.hero__ozet { max-width: 540px; font-size: 20px; color: var(--renk-metin); }
.hero__butonlar { display: flex; flex-wrap: wrap; gap: 20px; }

.yanit { display: flex; flex-direction: column; gap: 20px; padding: 28px; background: var(--renk-yuzey); border: 1px solid var(--renk-murekkep); }
.yanit__ust { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; color: var(--renk-soluk); }
.yanit__soru { align-self: flex-end; max-width: 85%; padding: 14px 18px; background: #ECEEF1; line-height: 1.45; }
.yanit__liste { display: flex; flex-direction: column; gap: 12px; }
.yanit__not { font-size: 15px; color: var(--renk-metin); }
.yanit__satir { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border: 1px solid var(--renk-cizgi); font-size: 17px; color: var(--renk-soluk); }
.yanit__satir i { display: block; height: 10px; background: var(--renk-dolgu); }
.yanit__satir--ilk {
  flex-wrap: wrap; justify-content: space-between; gap: 6px 12px;
  border-color: var(--renk-vurgu); background: var(--renk-vurgu); color: #FFFFFF; font-weight: 600;
}
.yanit__satir--ilk small { font-size: 13px; font-weight: 400; }
.yanit__alt { padding-top: 16px; border-top: 1px solid var(--renk-cizgi); font-size: 13px; line-height: 1.7; color: var(--renk-soluk); }

/* 7. Marka şeridi --------------------------------------------------------- */
.markalar { border-block: 1px solid var(--renk-murekkep); }
.markalar__ic { display: flex; flex-wrap: wrap; align-items: baseline; gap: 16px 48px; padding-block: 28px; }
.markalar__etiket { font-size: 14px; color: var(--renk-soluk); }
.markalar__liste { display: flex; flex-wrap: wrap; gap: 12px 44px; font-family: var(--yazi-baslik); font-size: 22px; font-weight: 500; }

/* 8. Bölüm iskeleti ------------------------------------------------------- */
/* Başlık solda, "Tümü" bağlantısı sağda; mobilde bağlantı içeriğin altına iner. */
.bolum { padding-top: var(--bolum); }
.bolum__ic {
  display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 40px 24px;
  grid-template-areas: "baslik tumu" "icerik icerik";
}
.bolum__baslik { grid-area: baslik; }
.bolum__tumu { grid-area: tumu; }
.bolum__icerik { grid-area: icerik; min-width: 0; }

/* 9. Vaka kartları -------------------------------------------------------- */
.vaka-izgara { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.vaka {
  display: flex; flex-direction: column; gap: 24px; padding: 32px;
  background: var(--renk-yuzey); border: 1px solid var(--renk-murekkep);
}
.vaka:hover { color: inherit; border-color: var(--renk-vurgu); }
.vaka__ust { font-size: 14px; color: var(--renk-soluk); }
.vaka__rakam { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 16px; }
.vaka__rakam strong { font-family: var(--yazi-baslik); font-size: 72px; line-height: 1; font-weight: 500; letter-spacing: -0.03em; color: var(--renk-vurgu); }
.vaka__rakam span { color: var(--renk-metin); }
.vaka__baslik { font-family: var(--yazi-baslik); font-size: 26px; line-height: 1.2; font-weight: 500; }
.vaka__alt { display: inline-flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 20px; border-top: 1px solid var(--renk-cizgi); font-weight: 500; }

/* 10. Numaralı satırlar (sektörler) --------------------------------------- */
.satirlar { border-bottom: 1px solid var(--renk-murekkep); }
.satir {
  display: grid; grid-template-columns: 40px minmax(0, 1fr) minmax(0, 2fr) auto; align-items: center; gap: 12px 32px;
  padding-block: 26px; border-top: 1px solid var(--renk-cizgi);
}
.satir:first-child { border-top-color: var(--renk-murekkep); }
.satir__no { font-size: 14px; font-weight: 600; color: var(--renk-vurgu); }
.satir__ad { font-family: var(--yazi-baslik); font-size: 30px; line-height: 1.15; font-weight: 500; }
.satir__aciklama { color: var(--renk-soluk); }
.satir:hover .satir__aciklama { color: var(--renk-soluk); }

/* 11. Danışmanlık süreci -------------------------------------------------- */
.surec { margin-top: var(--bolum); background: var(--renk-yuzey); border-block: 1px solid var(--renk-murekkep); }
.surec__ic { display: flex; flex-direction: column; gap: 56px; padding-block: 72px 80px; }
.surec__ust { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px 48px; }
.surec__ust p { max-width: 400px; color: var(--renk-soluk); }
.surec__adimlar { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.adim { display: flex; flex-direction: column; gap: 14px; padding-right: 40px; border-top: 2px solid var(--renk-murekkep); }
.adim::before { content: ""; display: block; width: 12px; height: 12px; margin-top: -7px; background: var(--renk-vurgu); }
.adim__no { margin-top: 14px; font-family: var(--yazi-baslik); font-size: 96px; line-height: 0.9; font-weight: 500; letter-spacing: -0.04em; color: var(--renk-vurgu); }
.adim__ad { margin-top: 6px; font-family: var(--yazi-baslik); font-size: 28px; line-height: 1.15; font-weight: 500; }
.adim__aciklama { max-width: 340px; color: var(--renk-soluk); }
.adim__cikti { display: flex; gap: 14px; max-width: 340px; margin-top: 6px; padding-top: 14px; border-top: 1px solid var(--renk-cizgi); font-size: 15px; font-weight: 500; }
.adim__cikti span { font-weight: 600; color: var(--renk-soluk); }

/* 12. SSS ----------------------------------------------------------------- */
.sss__ic { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); align-items: start; gap: 40px 64px; }
.sss__liste { border-bottom: 1px solid var(--renk-murekkep); }
.soru { padding-block: 22px; border-top: 1px solid var(--renk-cizgi); }
.soru:first-child { border-top-color: var(--renk-murekkep); }
.soru summary {
  display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; gap: 24px; min-height: 44px;
  font-family: var(--yazi-baslik); font-size: 22px; line-height: 1.3; font-weight: 500;
}
.soru__no { font-family: var(--yazi-govde); font-size: 14px; font-weight: 600; color: var(--renk-vurgu); }
.soru p { max-width: 640px; margin: 14px 0 0 64px; line-height: 1.6; color: var(--renk-soluk); }

/* 13. Rehber kartları ----------------------------------------------------- */
.rehber-izgara { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.rehber { display: flex; flex-direction: column; gap: 16px; padding-top: 20px; border-top: 2px solid var(--renk-murekkep); }
.rehber__ust { font-size: 14px; color: var(--renk-soluk); }
.rehber:hover .rehber__ust { color: var(--renk-soluk); }
.rehber__baslik { font-family: var(--yazi-baslik); font-size: 24px; line-height: 1.25; font-weight: 500; }

/* 14. İletişim bloğu ------------------------------------------------------ */
.iletisim { padding-block: var(--bolum) 56px; }
.iletisim__kutu {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 64px;
  padding: clamp(28px, 5vw, 72px); background: var(--renk-vurgu); color: #FFFFFF;
}
.iletisim__sol { display: flex; flex-direction: column; justify-content: space-between; gap: 40px; }
.iletisim__baslik { font-family: var(--yazi-baslik); font-size: clamp(34px, 4.2vw, 60px); line-height: 1.02; font-weight: 500; letter-spacing: -0.03em; }
.iletisim__ozet { max-width: 420px; margin-top: 20px; font-size: 18px; }
.iletisim__bilgi { border-bottom: 1px solid #FFFFFF; }
.iletisim__bilgi div { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 16px; padding-block: 16px; border-top: 1px solid #FFFFFF; }
.iletisim__bilgi dt { font-size: 15px; }
.iletisim__bilgi dd { font-weight: 600; }
.iletisim__bilgi a { color: #FFFFFF; text-decoration: underline; text-underline-offset: 4px; }

.form { display: flex; flex-direction: column; gap: 20px; padding: clamp(24px, 3vw, 40px); background: var(--renk-yuzey); color: var(--renk-murekkep); }
.form__alan { display: flex; flex-direction: column; gap: 8px; }
.form__alan label { font-size: 14px; font-weight: 600; }
.form__alan input, .form__alan textarea {
  width: 100%; padding: 14px; border: 1px solid var(--renk-murekkep); background: var(--renk-zemin); line-height: 1.5;
}
.form__alan input { height: 52px; padding-block: 0; }
.form__alan textarea { resize: vertical; }
.form__durum { font-size: 15px; font-weight: 500; }

/* 15. Footer -------------------------------------------------------------- */
.alt__ic {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px;
  width: calc(100% - 2 * var(--kenar)); max-width: 760px; margin-inline: auto; padding-block: 28px;
  border-top: 1px solid var(--renk-murekkep); font-size: 14px; color: var(--renk-soluk);
}
.alt__sosyal { display: flex; flex-wrap: wrap; gap: 24px; }

/* 16. WhatsApp butonu ----------------------------------------------------- */
.whatsapp {
  position: fixed; right: 24px; bottom: 16px; z-index: 10;
  display: inline-flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 18px;
  background: var(--renk-murekkep); color: #FFFFFF; font-size: 15px; font-weight: 600;
  box-shadow: 0 6px 20px rgba(17, 19, 24, 0.25);
}
.whatsapp:hover { background: var(--renk-vurgu); color: #FFFFFF; }

/* 17. Mobil --------------------------------------------------------------- */
@media (max-width: 1080px) {
  .menu { gap: 24px; font-size: 15px; }
  .satir { grid-template-columns: 40px minmax(0, 1fr) auto; }
  .satir__aciklama { grid-column: 2 / 3; grid-row: 2; }
  .satir .ok { grid-row: 1; grid-column: 3; }
}

@media (max-width: 860px) {
  :root { --kenar: 20px; --bolum: 72px; }

  /* Menü: masaüstü bağlantıları gizlenir, arama ve menü butonu görünür */
  .ust { padding-block: 14px; }
  .menu { display: none; }
  .ust__mobil { display: flex; }
  .logo svg { width: 43px; height: 40px; }
  .logo__yazi { font-size: 14px; }

  .hero { padding-block: 28px 48px; }
  .hero__ic { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .hero__metin { gap: 20px; align-items: stretch; }
  .hero__baslik { font-size: 42px; line-height: 1; }
  .hero__ozet { font-size: 17px; }
  .hero__butonlar { flex-direction: column; gap: 12px; }
  .yanit { padding: 20px; gap: 16px; }

  .markalar__ic { flex-direction: column; gap: 12px; padding-block: 22px; }
  .markalar__liste { gap: 8px 24px; font-size: 19px; }

  .baslik-2 { font-size: 32px; }
  .bolum__ic { grid-template-columns: minmax(0, 1fr); gap: 24px; grid-template-areas: "baslik" "icerik" "tumu"; }
  /* "Tümü" bağlantısı mobilde tam genişlik buton olur */
  .bolum__tumu { justify-content: center; min-height: 52px; border: 1px solid var(--renk-murekkep); font-weight: 600; text-decoration: none; }

  .vaka-izgara, .rehber-izgara { grid-template-columns: minmax(0, 1fr); }
  .vaka-izgara { gap: 16px; }
  .vaka { padding: 24px; gap: 20px; }
  .vaka__rakam strong { font-size: 56px; }
  .vaka__baslik { font-size: 22px; }

  .satir { grid-template-columns: 28px minmax(0, 1fr) auto; gap: 8px 12px; padding-block: 20px; }
  .satir__no { font-size: 13px; }
  .satir__ad { font-size: 24px; }
  .satir__aciklama { font-size: 15px; }

  .surec__ic { gap: 24px; padding-block: 48px 28px; }
  .surec__ust { flex-direction: column; align-items: flex-start; gap: 12px; }
  .surec__adimlar { grid-template-columns: minmax(0, 1fr); }
  .adim {
    display: grid; grid-template-columns: 60px minmax(0, 1fr); gap: 8px 16px;
    padding: 20px 0; border-top: 1px solid var(--renk-cizgi);
  }
  .adim:first-child { border-top: 2px solid var(--renk-murekkep); }
  .adim::before { display: none; }
  .adim__no { grid-row: 1 / 4; margin: 0; font-size: 48px; line-height: 0.95; }
  .adim__ad { margin: 0; font-size: 23px; }
  .adim__aciklama, .adim__cikti { max-width: none; font-size: 15px; }
  .adim__cikti { margin-top: 4px; padding-top: 10px; font-size: 14px; }

  .sss__ic { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .soru { padding-block: 16px; }
  .soru summary { grid-template-columns: 28px minmax(0, 1fr) auto; gap: 12px; font-size: 20px; line-height: 1.25; }
  .soru__no { font-size: 13px; }
  .soru p { margin: 10px 0 0 40px; font-size: 15px; }

  .rehber-izgara { gap: 24px; }
  .rehber { gap: 12px; padding-top: 18px; }
  .rehber__baslik { font-size: 22px; }

  /* İletişim bloğu kenardan kenara; önce form, sonra bilgiler */
  .iletisim { padding-block: var(--bolum) 0; }
  .iletisim > .kapsayici { padding-inline: 0; }
  .iletisim__kutu { grid-template-columns: minmax(0, 1fr); gap: 32px; padding: 40px 20px; }
  .iletisim__sol { display: contents; }
  .iletisim__giris { order: 1; }
  .form { order: 2; padding: 24px; gap: 18px; }
  .iletisim__bilgi { order: 3; }
  .iletisim__baslik { font-size: 36px; }
  .iletisim__ozet { margin-top: 16px; font-size: 17px; }

  .alt__ic { flex-direction: column; align-items: flex-start; gap: 14px; padding-block: 24px 96px; border-top: 0; }
  .whatsapp { right: 16px; }
}