/* =============================================================
 * how-we-build.css — HOW WE BUILD (498:1343) SIFIRDAN pixel-perfect.
 * Container: 840px kolon (x=219-1061).
 * ============================================================= */

.hwb {
  --hb-col: 840px;
  --hb-heading: #161614;
  --hb-body: #5c5c58;
  --hb-border: #e5e5e3;
}
.hwb > section {
  width: var(--hb-col);
  max-width: calc(100% - 48px);
  margin-inline: auto;
}

/* Ortak label ("Best for/How we work/What you get/..." — Lora Medium 20/30) */
.hwb-label {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 20px;
  line-height: 30px;
  color: var(--hb-heading);
  margin: 0;
}

/* ---- Hero (498:1357 y253 / 498:1359 y327): Lora SemiBold 46/56, tek renk (vurgu yok) ---- */
.hwb-hero {
  padding-top: 214px;
} /* frame y40 + 214 = 253 (navbar altı boşluk) */
.hwb-hero__title {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 46px;
  line-height: 56px;
  color: var(--hb-heading);
  margin: 0;
}
/* lead (498:1359): Manrope 18/28, son cümle magenta+bold. Title biter y309 → lead y327 (~18px) */
.hwb-hero__lead {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 18px;
  line-height: 28px;
  color: var(--hb-body);
  width: 841px;
  max-width: 100%;
  margin: 18px 0 0;
}
.hwb-hero__lead .hl {
  color: var(--c-secondary);
  font-weight: 700;
}

/* ---- Banner (501:1970 y459, 841×280) ---- */
.hwb-banner {
  margin-top: 48px;
  height: 280px;
  border-radius: 2px;
  overflow: hidden;
  background: var(--c-surface);
}
.hwb-banner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ---- Sekme (tab) navigasyonu: Dedicated Teams / Product Development / Startup Studio ---- */
.hwb-tabs {
  margin-top: 48px;
}
.hwb-tabs__nav {
  display: flex;
  gap: 8px;
  border-bottom: 1px solid var(--hb-border);
}
/* Navbar linkleriyle (.navbar__link) AYNI font: Manrope, 14px (--fs-button), weight 500. */
.hwb-tab {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--fs-button);
  line-height: 20px;
  color: var(--hb-body);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  padding: 14px 4px 13px;
  margin-right: 24px;
  cursor: pointer;
  transition:
    color 0.15s linear,
    border-color 0.15s linear;
}
.hwb-tab:hover {
  color: var(--hb-heading);
}
.hwb-tab.is-active {
  color: var(--c-primary);
  border-bottom-color: var(--c-primary);
}

/* ---- Model bölümü ortak (Dedicated Teams / Product Development / Startup Studio) ---- */
.hwb-model__name {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 36px;
  line-height: 48px;
  color: var(--hb-heading);
  margin: 0;
}
/* headline (H4 22/30) + summary (14/20). headline→summary ~38px sonra */
.hwb-model__intro {
  margin-top: 38px;
}
.hwb-model__headline {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 22px;
  line-height: 30px;
  color: var(--hb-heading);
  margin: 0;
}
.hwb-model__summary {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  color: var(--hb-body);
  margin: 8px 0 0;
}

/* Our Process (yalnız Product Development, 506:1076): label + 4 kutu (Home step ile aynı desen) */
.hwb-process {
  margin-top: 25px;
}
.hwb-process__steps {
  display: flex;
  gap: 0;
  margin-top: 38px;
}
.hwb-process__step {
  position: relative;
  flex: 1;
  height: 68px;
  display: flex;
  align-items: center;
  padding-left: 23.5px;
  border: 1px solid var(--hb-border);
  border-left: none;
}
.hwb-process__step.is-first {
  border-left: 1px solid var(--hb-border);
}
.hwb-process__step.is-first::before,
.hwb-process__step.is-last::after {
  content: "";
  position: absolute;
  top: -1px;
  bottom: -1px;
  width: 4px;
  background: var(--c-primary);
}
.hwb-process__step.is-first::before {
  left: -1px;
}
.hwb-process__step.is-last::after {
  right: -1px;
}
.hwb-process__step span {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 18px;
  line-height: 28px;
  color: var(--hb-heading);
}
/* Adımlar arası açık-mavi ok (506:950, Home step-arrow ile aynı desen): 36px, sağ kenara taşan */
.hwb-process__arrow {
  position: absolute;
  right: -18px;
  top: 50%;
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  z-index: 2;
}

/* Bloklar (Best for / How we work / What you get / Deliverables / Validation / MVP / Growth Support) */
.hwb-model__blocks {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.hwb-block {
  margin-top: 25px;
}
.hwb-block__text {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  color: var(--hb-body);
  margin: 20px 0 0;
  width: 841px;
  max-width: 100%;
}

/* checks ("Best for", 501:1973): TEK sütun dikey liste, check ikonu 10×8 magenta + Manrope 14/20 */
.hwb-checks {
  list-style: none;
  margin: 20px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 500px;
}
.hwb-checks li {
  display: flex;
  align-items: center;
  gap: 8px;
}
.hwb-checks__icon {
  width: 10px;
  height: 8px;
  flex: none;
}
.hwb-checks li span {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  color: var(--hb-heading);
}

/* bullets ("Maddeler" component set 501:1940 — What you get/Deliverables/Growth Support):
   Default (501:1939): ikon 14×14 (tek siyah halka), text Neutral/Body (gri).
   Hover (501:1938): ikon 25.67×14 (magenta #D6249F çift/Venn halka), text Neutral/Heading (koyu).
   İki state ayrı SVG asset'i olduğu için (basit renk değişimi değil, şekil de değişiyor) iki ikon
   katmanı üst üste konup SADECE opacity ile crossfade ediliyor. Konteyner genişliği SABİT (26px,
   en geniş ikonun boyu) tutuluyor — width'i de animasyonlu yapmak text'i kaydırıp width+opacity
   transition'larının senkron ilerlememesi yüzünden "temiz olmayan/titrek" bir geçiş hissi
   veriyordu; sabit genişlikte sadece iki ikonun birbirinin üstünde solması çok daha net/pürüzsüz. */
.hwb-bullets {
  list-style: none;
  margin: 38px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.hwb-bullets li {
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: default;
}
.hwb-bullets__icon-wrap {
  position: relative;
  width: 26px;
  height: 14px;
  flex: none;
}
.hwb-bullets__icon {
  position: absolute;
  left: 0;
  top: 0;
  height: 14px;
  display: block;
  transition: opacity 0.15s linear;
}
.hwb-bullets__icon--default {
  width: 14px;
  opacity: 1;
}
.hwb-bullets__icon--hover {
  width: 25.67px;
  opacity: 0;
}
.hwb-bullets li:hover .hwb-bullets__icon--default {
  opacity: 0;
}
.hwb-bullets li:hover .hwb-bullets__icon--hover {
  opacity: 1;
}
.hwb-bullets li span {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  color: var(--hb-body);
  transition: color 0.15s linear;
}
.hwb-bullets li:hover span {
  color: var(--hb-heading);
}

/* Relevant Case Studies: label + 3 kart (270px, iç görsel 254×156) — kart altında hangi
   projeye ait olduğu (Our Works listesindeki gibi) düz metin başlık olarak yazar. */
.hwb-relevant {
  margin-top: 38px;
}
.hwb-relevant__grid {
  display: grid;
  grid-template-columns: repeat(3, 270px);
  gap: 0;
  justify-content: space-between;
  margin-top: 38px;
}
.hwb-rc {
  display: block;
  width: 270px;
  padding: 10px 8px;
  border: 1px solid var(--hb-border);
  border-radius: 2px;
  box-sizing: border-box;
}
.hwb-rc img {
  width: 100%;
  height: 156px;
  object-fit: cover;
  border-radius: 2px;
  display: block;
}
.hwb-rc__title {
  display: block;
  margin-top: 10px;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 13px;
  line-height: 18px;
  color: var(--hb-heading);
}

/* CTA: metin (Lora Medium 22/30) + buton, alt alta 33px ara */
.hwb-cta {
  margin-top: 25px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
}
.hwb-cta__text {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 22px;
  line-height: 28px;
  color: var(--hb-heading);
}

/* ---- Model paneli (tab içeriği) ---- */
/* scroll-margin-top: sticky navbar (72px) anchor scroll'da başlığın üstünü kapatmasın
   (About Us "Learn more" linkleri buraya #dedicated-teams vb. ile bağlanıyor) */
.hwb-model {
  margin-top: 40px;
  padding-bottom: 60px;
  scroll-margin-top: 88px;
}
.hwb-model[hidden] {
  display: none;
}

/* ---- Compare tablosu (506:1090 y4172) ---- */
.hwb-compare {
  margin-top: 50px;
  padding-bottom: 60px;
}

/* ---- CTA (en altta, "Which model fits you?" tablosunun ALTINDA). Aktif tab'a göre JS ile
   hangi model CTA'sının görüneceği senkronize edilir (data-hwb-cta-id). ---- */
.hwb-cta-final {
  padding-bottom: 100px;
}
.hwb-cta-final [hidden] {
  display: none;
}
.hwb-compare__title {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 26px;
  line-height: 30px;
  color: var(--hb-heading);
  margin: 0;
}
.hwb-compare__lead {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 16px;
  line-height: 20px;
  color: var(--hb-body);
  width: 556px;
  max-width: 100%;
  margin: 8px 0 0;
}
.hwb-table {
  margin-top: 58px;
  border-top: 1px solid var(--hb-border);
}
.hwb-tr {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  padding-block: 15px;
  border-bottom: 1px solid var(--hb-border);
}
.hwb-tr span {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  color: var(--hb-heading);
}
.hwb-tr--head span {
  font-weight: 700;
}
.hwb-tr__model {
  font-weight: 600;
}

/* ---- Responsive ---- */
@media (max-width: 900px) {
  .hwb-checks {
    max-width: 100%;
  }
  /* Relevant Case Studies kartları HER ZAMAN orijinal boyutunda (270×175px, büyümez/küçülmez)
     — auto-fit ile sütun sayısı sığdığı kadar otomatik ayarlanır (3 → 2 → 1). */
  .hwb-relevant__grid {
    grid-template-columns: repeat(auto-fit, 270px);
    justify-content: flex-start;
    gap: 16px;
  }
  /* Süreç adımları (Discovery→Design→Develop→Launch): yatay flex:1 + flex-wrap sığmayınca
     son adımı ("Launch") tek başına satırın tamamını kaplayan devasa bir kutuya çeviriyordu.
     Mobilde tamamen dikey stack'e geçiyoruz — sol/sağ mavi vurgu çubukları üst/alt'a döner,
     adımlar arası yatay oklar (dikey düzende anlamsız) gizlenir. */
  .hwb-process__steps {
    flex-direction: column;
  }
  .hwb-process__step {
    flex: none;
    width: 100%;
    border-left: 1px solid var(--hb-border);
    border-top: none;
  }
  .hwb-process__step.is-first {
    border-top: 1px solid var(--hb-border);
  }
  .hwb-process__step.is-first::before,
  .hwb-process__step.is-last::after {
    top: auto;
    bottom: auto;
    left: -1px;
    right: -1px;
    width: auto;
    height: 4px;
  }
  .hwb-process__step.is-first::before {
    top: -1px;
  }
  .hwb-process__step.is-last::after {
    bottom: -1px;
  }
  .hwb-process__arrow {
    display: none;
  }
  /* Compare tablosu: HER ZAMAN gerçek tablo görünümü (2 sütun, Your situation | Best model)
     korunur, küçüldükçe de tek sütuna düşmez — sadece gap/padding küçülür. */
  .hwb-tr {
    gap: 8px;
    padding-block: 12px;
  }
}