/*
  PhysioTech E-Coach — tanitim sayfasi.

  TASARIM YONU: sadelik boslukla kuruluyor, cizgiyle degil. Sayfada neredeyse hic
  kenarlik ve kutu yok; bolumleri ayiran sey aralarindaki bosluk.

  RENK ALT ROLDE. Marka yesili ve mavisi yalnizca vurgu olarak, metinde degil; sayfanin
  tamami beyaz ve koyu gri. Bir olcum urununun tanitim sayfasinin sakin olmasi, urunun
  kendisi hakkinda da bir sey soyluyor.

  Yazi tipi ISLETIM SISTEMINDEN. Web fontu indirmek sayfayi yavaslatir ve ilk cizimde
  yazinin sicramasina yol acar; sistem yazi tipi her platformda zaten okunakli ve
  kullanicinin alisik oldugu bicim.
*/

:root {
  /* Logodan olculen marka renkleri (kanal ortalamasi). */
  --marka-yesil: #4AA631;
  --marka-mavi:  #146DBF;

  /* Etkilesim yesili: logo yesili beyaz uzerinde 3.09 kontrast veriyor ve yazi
     olarak okunmuyor. Bu ton 4.59 -- AA esigini geciyor. */
  --yesil: #3B8527;
  --mavi:  #146DBF;

  --murekkep:   #12140F;
  --murekkep-2: #55605A;
  --murekkep-3: #8A938D;

  --zemin: #FFFFFF;
  --zemin-2: #F6F8F5;
  --cizgi: #E6EAE3;

  --yazi: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, Roboto,
          "Helvetica Neue", Arial, sans-serif;

  --sutun: 980px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--zemin);
  color: var(--murekkep);
  font: 17px/1.55 var(--yazi);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; }

/* --- Ust serit ---
   Ince ve sabit. Yuksek bir serit, ilk ekranda baslikla yarisir. */
.serit {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 0 28px;
  height: 58px;
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: saturate(180%) blur(18px);
  -webkit-backdrop-filter: saturate(180%) blur(18px);
  border-bottom: 1px solid var(--cizgi);
}

.marka img { height: 30px; width: auto; display: block; }

.serit nav {
  display: flex;
  align-items: center;
  gap: 26px;
}

.serit nav a {
  color: var(--murekkep-2);
  text-decoration: none;
  font-size: 14px;
}

.serit nav a:hover { color: var(--murekkep); }

/* --- Dugmeler --- */
.dugme {
  display: inline-block;
  padding: 11px 22px;
  border-radius: 980px;   /* tam yuvarlak uc */
  text-decoration: none;
  font-size: 15px;
  font-weight: 500;
  transition: background .15s ease, color .15s ease;
}

.serit .dugme {
  padding: 7px 16px;
  font-size: 14px;
  background: var(--yesil);
  color: #fff;
}

.serit .dugme:hover { background: #347522; }

.dugme.birincil { background: var(--yesil); color: #fff; }
.dugme.birincil:hover { background: #347522; }

.dugme.sade { color: var(--mavi); }
.dugme.sade:hover { background: #EDF3FA; }

/* --- Kahraman --- */
.kahraman {
  max-width: var(--sutun);
  margin: 0 auto;
  padding: 96px 28px 64px;
  text-align: center;
}

.kahraman h1 {
  margin: 0 0 22px;
  font-size: clamp(38px, 6.4vw, 68px);
  line-height: 1.07;
  letter-spacing: -0.025em;
  font-weight: 650;
}

.giris {
  max-width: 620px;
  margin: 0 auto 34px;
  font-size: clamp(18px, 2.2vw, 22px);
  line-height: 1.45;
  color: var(--murekkep-2);
}

.giris em { font-style: normal; color: var(--murekkep); font-weight: 600; }

.eylemler { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

.kucuk-not {
  margin: 22px auto 0;
  font-size: 13.5px;
  color: var(--murekkep-3);
}

/* --- Akis semasi --- */
.serit-gorsel {
  padding: 26px 28px 84px;
}

.akis {
  max-width: 760px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background: var(--zemin-2);
  border-radius: 22px;
  padding: 36px 26px;
}

.akis-adim {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  text-align: center;
  min-width: 120px;
}

.akis-ikon { font-size: 30px; line-height: 1.2; }
.akis-adim strong { font-size: 15px; }
.akis-adim span { font-size: 13.5px; color: var(--murekkep-2); }

/* Ok: ayri bir gorsel degil, bir cizgi. Tek bir ok gorseli indirmek icin istek
   acmanin karsiligi yok. */
.akis-ok {
  flex: 1;
  max-width: 90px;
  height: 1px;
  background: linear-gradient(90deg, var(--cizgi), var(--marka-yesil));
}

/* --- Bolumler --- */
.bolum {
  max-width: var(--sutun);
  margin: 0 auto;
  padding: 80px 28px;
}

.bolum h2 {
  margin: 0 0 18px;
  font-size: clamp(28px, 4vw, 42px);
  line-height: 1.12;
  letter-spacing: -0.02em;
  font-weight: 650;
}

.bolum h3 {
  margin: 0 0 8px;
  font-size: 19px;
  font-weight: 600;
}

.bolum p { margin: 0 0 14px; color: var(--murekkep-2); }

.genis { max-width: 660px; font-size: 18.5px; }
.genis strong { color: var(--murekkep); }

.vurgu { background: var(--zemin-2); max-width: none; }
.vurgu > * { max-width: var(--sutun); margin-left: auto; margin-right: auto; }

/* --- Adimlar --- */
.adimlar {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 42px 36px;
}

.sayi {
  display: block;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .12em;
  color: var(--marka-yesil);
  margin-bottom: 10px;
}

/* --- Ikili izgara --- */
.ikili {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 38px 44px;
  margin-top: 34px;
}

/* --- Olcum bolumu --- */
.olcum h2 { max-width: 720px; }

.olcum-liste {
  display: flex;
  flex-wrap: wrap;
  gap: 52px;
  margin-top: 44px;
  padding-top: 34px;
  border-top: 1px solid var(--cizgi);
}

.olcum-liste div { display: flex; flex-direction: column; gap: 2px; }

.olcum-liste strong {
  font-size: 40px;
  font-weight: 650;
  letter-spacing: -0.02em;
  color: var(--mavi);
  line-height: 1;
}

.olcum-liste span { font-size: 14px; color: var(--murekkep-2); }

/* --- Kapanis --- */
.kapanis { text-align: center; padding-bottom: 96px; }
.kapanis .genis { margin: 0 auto 28px; }

/* --- Alt --- */
footer {
  border-top: 1px solid var(--cizgi);
  padding: 44px 28px 58px;
  text-align: center;
  color: var(--murekkep-3);
}

footer img { height: 26px; width: auto; opacity: .75; }
footer p { margin: 12px 0 0; font-size: 13.5px; }

/* --- Dar ekran --- */
@media (max-width: 640px) {
  /* Serit yukseliyor: icindeki dugme parmak hedefi olcusune (44px) cikmali ve
     58px'lik bir seride 44px'lik bir dugme nefes alamiyor.

     Olculdu: onceki halde dugme 36px'ti. 44px, dokunma hedefi icin yaygin kabul
     edilen alt sinir; altinda kalan bir dugme yanlis basilmaya aciktir ve bu
     dugme sayfanin TEK gercek eylemi. */
  .serit { padding: 0 16px; height: 64px; }
  .serit nav { gap: 14px; }

  .serit .dugme {
    padding: 12px 18px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }

  /* Logo baglantisi da parmakla basilabilir olsun. */
  .marka { display: inline-flex; align-items: center; min-height: 44px; }

  /* Dar ekranda gezinme baglantilari gizleniyor, YALNIZCA dugme kaliyor: uc
     baglantiyi sigdirmak icin kuculttugumuzde hicbiri okunmuyor ve sayfanin
     tek gercek eylemi (panele girmek) gorunmez hale geliyor. */
  .serit nav a:not(.dugme) { display: none; }

  .kahraman { padding: 64px 20px 44px; }
  .bolum { padding: 56px 20px; }

  /* Akis semasi dikeye doner; oklar yatay cizgi olmaktan cikip dikey olur. */
  .akis { flex-direction: column; gap: 18px; padding: 28px 20px; }
  .akis-ok { width: 1px; height: 26px; max-width: none;
             background: linear-gradient(180deg, var(--cizgi), var(--marka-yesil)); }

  .olcum-liste { gap: 30px; }
}

/* --- Hareket azaltma tercihi ---
   Kaydirma yumusatmasi, vestibuler rahatsizligi olan kullanicilarda sorun
   yaratabiliyor. Tercihi belirtmis olana verilmiyor. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}