/* =============================================================
 * home.css — HOME birebir
 * ============================================================= */

/* Vurgu (ts1 = Manrope Bold + Secondary/500 magenta). Caps lead 312:229'da var. */
.home-caps__lead .hl {
  color: var(--c-secondary);
  font-weight: 700;
}

/* ---- Hero (305:108, frame 1280×650, x=0 y=40) ----
   Sol blok "We build / startups." x=221 (frame içi 221). Sağ blok lead x=611→1059 (w=448, sağa hizalı).
   İçerik y=179 (frame y40 + 139), divider (305:123) y=597 (frame içi 557), intro kartları y=690. */
.hero {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 448px;
  gap: var(--sp-6);
  padding-block: 139px 93px;
  align-items: start;
  align-content: space-between;
}
/* Divider (Vector 2, 305:123): İÇERİK genişliğinde (838-840px, .container padding'i hariç). */
.hero::after {
  content: "";
  position: absolute;
  left: var(--gutter-lg);
  right: var(--gutter-lg);
  bottom: 0;
  height: 1px;
  background: var(--c-border);
}
@media (max-width: 900px) {
  .hero::after {
    left: var(--gutter);
    right: var(--gutter);
  }
}
/* "We build" (305:110): Lora SemiBold 51/56, #161614 */
.hero__title {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 51px;
  line-height: 56px;
  color: var(--c-heading);
}
/* "startups." (305:111): Lora SemiBold 80, #0074FF */
.hero__title .accent-primary {
  display: inline-block;
  font-size: 80px;
  line-height: 1;
  color: var(--c-primary);
}
/* Buton (305:113 "Border"/Button, 244:273): "We build startups" bloğundan sonra, frame içi y=340 */
.hero__cta {
  margin-top: var(--sp-4);
}
/* Not: hero toplam yüksekliği 650px = padding-top(139) + içerik(418) + padding-bottom(93).
   İçerik alanı yüksekliği (139'dan divider y=597'ye kadar) 418px; hero__right bunu min-height
   olarak alır ki grid tasarımla birebir 650px'e otursun (aksi halde içeriğe göre küçülür). */
.hero__right {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-end;
  text-align: right;
}
/* Hero lead (305:124): iki ayrı <p>, Manrope 18/40, #5C5C58, sağ hizalı; 2. paragraf Bold+magenta.
   Genişlik SABİT 448px (tasarım) → satır kırılımı tasarımla birebir (2 satır + 1 satır). */
.hero__lead {
  width: 448px;
  max-width: 448px;
  margin-left: auto;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 18px;
  line-height: 40px;
  color: var(--c-body);
}
.hero__lead-p {
  margin: 0;
  color: inherit;
  text-align: right;
}
.hero__lead .hl {
  color: var(--c-secondary);
  font-weight: 700;
}
/* Stat (305:113/116/119, "Border"): değer Lora H2 SemiBold 36/48, etiket Manrope 14/20 */
.hero__stats {
  display: flex;
  gap: var(--sp-7);
  margin-top: var(--sp-8);
  justify-content: flex-end;
}
.hero__stat {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  text-align: center;
}
/* Stat değeri (305:114/117/120): Lora SemiBold 36/48, #161614 */
.hero__stat-value {
  font-family: var(--font-heading);
  font-size: 36px;
  line-height: 48px;
  font-weight: 600;
  color: var(--c-heading);
}
/* Stat etiketi (305:115/118/121): Manrope Regular 14/20, #5C5C58 */
.hero__stat-label {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
  color: var(--c-body);
  white-space: nowrap;
}

/* ---- Intro kartları ("Services with three colors" 316:3917/316:3920): 419px kart, 28/26 padding, hover) ---- */
/* Not: intro kartları y=690 (hero divider 597 + 93 boşluk). Alt: media (938+328=1266) → süreç (1319 frame-rel) = 53px */
.home-intro {
  padding-block: 93px 53px;
}
.home-intro__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 419px));
  gap: 0;
  max-width: 838px;
}
/* Component set "Services with three colors" (316:3911) — 3 durumlu prototip:
   Default(316:3908) bg #FFF, başlık #161614, metin #5C5C58
     --ON_HOVER, SMART_ANIMATE 200ms LINEAR-->
   Hover(316:3910) bg #D6249F, başlık #FFF, metin #FBE5F5
     --AFTER_TIMEOUT 100ms, SMART_ANIMATE 200ms LINEAR-->
   After Delay(316:3909) bg #000, başlık #FFF, metin #ACACAC
   Yani hover sürdükçe magenta→siyah otomatik ilerler; ayrılınca default'a döner. */
.home-intro__card {
  padding: 26px 28px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: 200px;
  background: var(--c-bg);
  transition: background-color 200ms linear;
}
.home-intro__card:hover {
  /* hover: magenta (200ms) → 100ms bekle → siyah (200ms). Toplam zincir keyframe ile. */
  animation: intro-card-hover 500ms linear forwards;
}
/* Intro başlık (316:3900): Lora H3 Medium 26/36 */
.home-intro__title {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 26px;
  line-height: 36px;
  color: var(--c-heading);
  margin: 0;
  transition: color 200ms linear;
}
/* Intro metin (316:3901): Manrope 16/24 sol hizalı */
.home-intro__text {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  text-align: left;
  color: var(--c-body);
  margin: 0;
  transition: color 200ms linear;
}
/* Başlık her iki hover durumunda da beyaz; metin magenta'da #FBE5F5, siyahta #ACACAC */
.home-intro__card:hover .home-intro__title {
  color: #fff;
}
.home-intro__card:hover .home-intro__text {
  color: #fbe5f5;
  animation: intro-text-hover 500ms linear forwards;
}
@keyframes intro-card-hover {
  0% {
    background: var(--c-bg);
  }
  40% {
    background: var(--c-secondary);
  } /* 200ms: magenta (Hover) */
  60% {
    background: var(--c-secondary);
  } /* +100ms bekleme (AFTER_TIMEOUT) */
  100% {
    background: #000;
  } /* +200ms: siyah (After Delay) */
}
@keyframes intro-text-hover {
  0% {
    color: #fbe5f5;
  }
  60% {
    color: #fbe5f5;
  }
  100% {
    color: #acacac;
  } /* After Delay metin rengi */
}
/* Not: kartlar y=690 h=200 (→890), geniş görsel y=938 (frame 978-40) → ara ~48px */
/* Rectangle 20 (305:127): 836×328. aspect-ratio ile oran korunur — sabit height + max-width:
   100% kombinasyonu dar viewport'ta içindeki %-bazlı img crop'unun oranını bozuyordu (görsel içerik
   "değişiyormuş" gibi görünüyordu). İçindeki img'in kendi %-bazlı width/height/left/top değerleri
   container'a orantılı olduğu için aspect-ratio ile küçülse de crop matematiği bozulmaz. */
.home-intro__media {
  position: relative;
  margin-top: 48px;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--c-surface);
  width: 836px;
  aspect-ratio: 836 / 328;
  max-width: 100%;
}
/* cropTransform (305:127): scaleMode=STRETCH (object-fit:cover DEĞİL — cover aspect-ratio'yu
   korur ama tasarımdaki oranı BOZUYOR/gerdiriyor). Kaynağın x:[0.24%,99.76%] y:[31.43%,90%] alt-bölgesi
   seçilip ORANI KORUNMADAN 836×328'e geriliyor; img'i absolute + width/height/left/top ile bu
   STRETCH'i birebir simüle ediyoruz (matematik: width=100/a, height=100/d, left=-tx/a, top=-ty/d). */
.home-intro__media img {
  position: absolute;
  left: -0.2392%;
  top: -53.6585%;
  width: 100.4785%;
  height: 170.7317%;
  max-width: none;
  object-fit: fill;
}

/* ---- Süreç (4 kutu 209×68, 1px border, uç kutularda mavi çubuk, aralarda ok) ---- */
/* Aralık: intro→süreç 669px, süreç→stories 291px */
.home-process {
  padding-block: 0 71px;
}
/* Başlık (305:143): Lora H2 SemiBold 36/48 */
.home-process__title {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 36px;
  line-height: 48px;
  margin-bottom: var(--sp-4);
}
/* Lead (305:144): Manrope Body/Hero 18/28, accent Bold+magenta */
.home-process__lead {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 18px;
  line-height: 28px;
  color: var(--c-body);
  max-width: 838px;
  margin-bottom: var(--sp-6);
}
.home-process__lead .hl {
  color: var(--c-secondary);
  font-weight: 700;
}
.home-process__steps {
  display: flex;
  gap: 0;
  max-width: 838px;
}
.home-process__step {
  position: relative;
  flex: 1;
  height: 68px;
  display: flex;
  align-items: center;
  padding-left: 23.5px;
  border: 1px solid var(--c-border);
  border-left: none; /* komşu kutuların border'ı çakışmasın */
}
.home-process__step.is-first {
  border-left: 1px solid var(--c-border);
}
/* uç kutularda 4px mavi çubuk */
.home-process__step.is-first::before,
.home-process__step.is-last::after {
  content: "";
  position: absolute;
  top: -1px;
  bottom: -1px;
  width: 4px;
  background: var(--c-primary);
}
.home-process__step.is-first::before {
  left: -1px;
}
.home-process__step.is-last::after {
  right: -1px;
}
/* Step (305:130): Manrope Body/Hero 18/28 */
.home-process__step-name {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 18px;
  line-height: 28px;
  color: var(--c-heading);
}
/* adımlar arası 36px ok ikonu, kutunun sağ kenarına taşan */
.home-process__arrow {
  position: absolute;
  right: -18px;
  top: 50%;
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  z-index: 2;
}

/* ---- Partners' Stories (carousel: sol alıntı + sağ 4-parçalı mozaik) ---- */
/* Aralık: süreç→stories 291px, stories→clients 616px */
.home-stories {
  padding-block: 0 82px;
}
/* Başlık (305:152): Lora H2 SemiBold 36/48 */
.home-stories__title {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 36px;
  line-height: 48px;
  margin-bottom: var(--sp-6);
}
/* Viewport: aynı hücreye yığılı slaytlar; aktif olan görünür (fade) */
.home-stories__viewport {
  position: relative;
}
.home-stories__slide {
  display: grid;
  grid-template-columns: 414px 414px;
  gap: 10px;
  align-items: start;
  justify-content: space-between;
  max-width: 838px;
  opacity: 0;
  visibility: hidden;
  position: absolute;
  inset: 0;
  transition: opacity 300ms ease;
}
.home-stories__slide.is-active {
  opacity: 1;
  visibility: visible;
  position: relative;
}
/* Sol: alıntı bloğu (frame 305:159 — dikey kolon, gap 41px: üst tırnak + gövde 172 + alt tırnak) */
.home-stories__quote {
  display: flex;
  flex-direction: column;
  gap: 41px;
  width: 414px;
}
/* Tırnaklar görsel SVG (305:160/305:166): açılış sola, kapanış sağa yaslı, h35 */
.home-stories__mark {
  display: block;
  height: 35px;
  width: 100%;
}
.home-stories__mark--open {
  object-fit: contain;
  object-position: left;
}
.home-stories__mark--close {
  object-fit: contain;
  object-position: right;
}
/* Gövde: 172px, dikey ortalı (quote metni + isim + rol) */
.home-stories__body {
  min-height: 172px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
/* Quote (305:163): Manrope Body/Hero 18/28 #5C5C58 */
.home-stories__text {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 18px;
  line-height: 28px;
  color: var(--c-body);
  margin: 0 0 12px;
}
.home-stories__meta {
}
/* İsim (305:164): Manrope SemiBold 18/28 #161614 */
.home-stories__name {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 18px;
  line-height: 28px;
  color: var(--c-heading);
  text-decoration: none;
}
a.home-stories__name:hover {
  color: var(--c-primary);
}
/* Rol (305:165): Manrope 16/24 #B7B7B7 */
.home-stories__role {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  color: #b7b7b7;
  margin-top: var(--sp-1);
}
/* Sağ: mozaik (Group 305:153: 414×387). 2 sütun 201px, ara 12px. Yükseklik SABİT (esnemez).
   Sol sütun: logo kutusu 82.68 + uzun foto 298 (ara 6). Sağ sütun: uzun ekran 298 + kısa 82.68.
   Her iki slaytta (tunesoft/joedtech) tile boyutları BİREBİR aynı olsun diye ölçüler sabit. */
.home-stories__mosaic {
  display: grid;
  grid-template-columns: 201px 201px;
  gap: 12px;
  height: 387px;
  min-height: 387px;
  align-self: start;
}
.home-stories__col {
  display: grid;
  gap: 6px;
  height: 387px;
}
.home-stories__col:first-child {
  grid-template-rows: 82.68px 298px;
} /* logo kutusu + uzun foto */
.home-stories__col:last-child {
  grid-template-rows: 298px 82.68px;
} /* uzun ekran + kısa teknoloji */
.home-stories__tile {
  border-radius: 4px;
  overflow: hidden;
  background: var(--c-surface);
  min-height: 0;
}
.home-stories__tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Logo kutusu: koyu arka #0F0800, logo ortada (contain) */
.home-stories__tile--logo {
  background: #0f0800;
  display: grid;
  place-items: center;
}
.home-stories__tile--logo img {
  object-fit: contain;
  width: 72%;
  height: auto;
}
/* logoFull: tasarımın kendi tam-frame render'ı (arka plan + logo birlikte, piksel-perfect) —
   sabit koyu CSS zemin/contain-padding uygulanmaz, görsel tüm kutuyu cover ile kaplar. */
.home-stories__tile--logo-full {
  background: none;
}
.home-stories__tile--logo-full img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}
/* Marka/logo dolgusu (gerçek foto yokken kullanılan tile): SVG/logo TAŞMASIN —
   cover yerine contain + nötr açık zemin. .home-stories__tile img'in cover'ını ezer. */
.home-stories__tile--brand {
  background: #f4f1ea;
  display: grid;
  place-items: center;
}
.home-stories__tile--brand img {
  object-fit: contain;
  width: 60%;
  height: auto;
}
/* Kırpılmadan TAM görünmesi gereken gerçek fotoğraf (kare/farklı en-boy oranlı):
   cover yerine contain + koyu nötr zemin, ama görsel kutuyu mümkün olduğunca doldurur. */
.home-stories__tile--fit-photo {
  background: #1a1a1a;
  display: grid;
  place-items: center;
}
.home-stories__tile--fit-photo img {
  object-fit: contain;
  width: 100%;
  height: 100%;
}
/* Yalnız logo olan hikâye (foto/ekran/teknoloji görseli yoksa): tek sütun,
   logo kutusu mozaiğin tam yüksekliğini (387px) kaplar — sahte tile yok. */
.home-stories__mosaic--logo-only {
  grid-template-columns: 201px;
}
.home-stories__mosaic--logo-only .home-stories__col:first-child {
  grid-template-rows: 387px;
}
.home-stories__mosaic--logo-only .home-stories__tile--logo img {
  width: 58%;
}
/* Carousel okları (305:168/169 Pre&Next 43px daire #F4F4F4, arrow_back #161614).
   Tasarım render'ında oklar YAN YANA, aynı hizada, bitişik; mozaik altında sağa yaslı. */
.home-stories__nav {
  position: relative;
  z-index: 2;
  display: flex;
  gap: 3px;
  justify-content: flex-end;
  width: 838px;
  max-width: 838px;
  margin-top: 23px;
}
.home-stories__arrow {
  width: 43px;
  height: 43px;
  border: 0;
  border-radius: 50%;
  background: var(--c-surface);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: background-color 150ms ease;
  padding: 0;
}
.home-stories__arrow:hover {
  background: var(--c-border);
}
.home-stories__arrow img {
  width: 24px;
  height: 24px;
  display: block;
}
/* Sol ok arrow_back olduğu gibi (←); sağ ok yatay çevrilir (→) */
.home-stories__arrow--next img {
  transform: scaleX(-1);
}

/* ---- Clients ---- */
/* Aralık: stories→clients 616px; clients→pull-quote→caps geniş boşluk */
.home-clients {
  text-align: left;
}
/* Başlık (305:171): Lora H2 SemiBold 36/48 */
.home-clients__title {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 36px;
  line-height: 48px;
  margin-bottom: var(--sp-3);
}
/* Lead (305:172): Manrope Body/Hero 18/28 #444748 */
.home-clients__lead {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 18px;
  line-height: 28px;
  color: #444748;
  max-width: 671px;
  margin-bottom: var(--sp-6);
}
/* 305:173-175 tabanlı, ama kullanıcı isteğiyle KAYAN BANT (marquee) — kaç logo eklenirse
   eklensin otomatik çalışır (config'e satır eklemek yeterli). Viewport overflow:hidden, track
   içeriği N kez basılıp (bkz. home.php — N, logo sayısına göre dinamik hesaplanır, toplam genişlik
   her zaman 2× viewport'tan geniş kalsın diye) %(100/N) kayınca dikişsiz döngü oluşturuyor —
   sabit %50 (2 kopya) az logoda track'i viewport'tan dar bırakıp sağda boşluk yaratıyordu.
   Her logo AYNI sabit kutuda (120×40) object-fit:contain ile ortalanıyor — hangi SVG/PNG olursa
   olsun (farklı en-boy oranları dahil) hepsi görsel olarak eşit "ağırlıkta" görünür. */
.home-clients__logos {
  overflow: hidden;
  mask-image: linear-gradient(to right, transparent, #000 40px, #000 calc(100% - 40px), transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, #000 40px, #000 calc(100% - 40px), transparent);
}
.home-clients__track {
  --marquee-repeat: 2;
  display: flex;
  align-items: center;
  gap: 48px;
  width: max-content;
  /* Kullanıcı isteğiyle yavaşlatıldı (önceki base: 6.667s → 16s, ~2.4× daha yavaş). */
  animation: home-clients-marquee 16s linear infinite;
  animation-duration: calc(16s * var(--marquee-repeat) / 2);
}
.home-clients__logos:hover .home-clients__track {
  animation-play-state: paused;
}
@keyframes home-clients-marquee {
  from { transform: translateX(0); }
  to { transform: translateX(calc(-100% / var(--marquee-repeat))); }
}
.home-clients__logo-box {
  display: grid;
  place-items: center;
  width: 120px;
  height: 40px;
  flex: none;
}
.home-clients__logo {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

/* ---- Pull-quote (305:221: Lora H3 Medium 26/36, ortalı, 2. cümle Bold alt satırda) ---- */
.home-quote {
  max-width: 620px;
  margin: var(--sp-9) auto;
  text-align: center;
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 26px;
  line-height: 36px;
  color: var(--c-heading);
}
.home-quote__accent {
  font-weight: 700;
}

/* ---- Our Capabilities ---- */
.home-caps {
  padding-block: var(--sp-8) var(--sp-9);
}
/* Başlık (312:228): Lora H2 SemiBold 36/48 */
.home-caps__title {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 36px;
  line-height: 48px;
  margin-bottom: var(--sp-3);
}
/* Lead (312:229): Manrope Body/Hero 18/28, accent Bold+magenta */
.home-caps__lead {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 18px;
  line-height: 28px;
  color: var(--c-body);
  max-width: 838px;
  margin-bottom: var(--sp-6);
}
/* "Flip" kartları: 414×207, hover'da Y ekseninde arkaya döner */
.home-caps__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-5);
  max-width: 838px;
}
.flip-card {
  display: block;
  width: 100%;
  height: 207px;
  padding: 0;
  border: 0;
  background: none;
  perspective: 1200px;
  cursor: pointer;
}
.flip-card__inner {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  /* "Flip" component set (312:185): Component 1 (ÖN) <-> Component 2 (ARKA). SMART_ANIMATE ~300ms */
  transition: transform 350ms ease-out;
}
/* "Flip" prototip trigger: ON_CLICK (kullanıcı doğruladı — HOVER DEĞİL).
   Karta TIKLANINCA ÖN → ARKA döner; tekrar tıklanınca geri döner (.is-flipped JS toggle). */
.flip-card.is-flipped .flip-card__inner {
  transform: rotateY(180deg);
}
.flip-card__face {
  position: absolute;
  inset: 0;
  display: block;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border-radius: var(--radius);
  overflow: hidden;
}
/* Ön yüz: beyaz, çerçeveli, başlık sol-üst + ikon sağ */
.flip-card__front {
  background: var(--c-bg);
  border: 1px solid var(--c-border);
}
/* ÖN: başlık Lora H4 22px #1B1C1C, left 25 / top 80 */
.flip-card__front .flip-card__title {
  position: absolute;
  left: 25px;
  top: 80px;
  max-width: 240px;
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 1.375rem;
  line-height: 30px;
  color: #1b1c1c;
  text-align: left;
}
/* İkon: 119×119, sağ 1px / üst 87px */
.flip-card__icon {
  position: absolute;
  right: 1px;
  top: 87px;
  width: 119px;
  height: 119px;
}
.flip-card__icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Arka yüz ("ARKA" #161614): başlık #F4F4F4 sol26/üst48, metin #5C5C58 sol26/üst88, ok sol18 dikey-ortalı */
.flip-card__back {
  background: var(--c-heading);
  transform: rotateY(180deg);
  padding: 0;
  text-align: left;
}
.flip-card__back .flip-card__title--light {
  position: absolute;
  left: 26px;
  top: 48px;
  max-width: 240px;
  color: #f4f4f4;
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 1.375rem;
  line-height: 30px;
}
/* Metin (312:173): Manrope 16/24 #5C5C58, JUSTIFIED (Body/Genel İçerik) */
.flip-card__text {
  position: absolute;
  left: 26px;
  top: 88px;
  width: 267px;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  color: #5c5c58;
  text-align: justify;
}
/* PreNext (244:329): daire #f4f4f4 43px, ok #161614 SAĞA dönük.
   ARKA yüz aynalı olduğundan tasarımdaki gerçek konum: SAĞ 18px, dikey ortalı. */
.flip-card__arrow {
  position: absolute;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  width: 43px;
  height: 43px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #f4f4f4;
}
/* Ok tasarımda SAĞA dönük (→); arrow_back SVG sola dönük olduğu için yatay çevir */
.flip-card__arrow img {
  width: 24px;
  height: 24px;
  transform: scaleX(-1);
}

/* Pull-quote altı geniş foto (Rectangle 22, 305:277): 836×328. aspect-ratio ile oran korunur. */
.home-quote-media {
  width: 836px;
  aspect-ratio: 836 / 328;
  max-width: 100%;
  margin: 0 auto var(--sp-8);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--c-surface);
}
.home-quote-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---- Responsive ---- */
@media (max-width: 860px) {
  .hero {
    grid-template-columns: 1fr;
    gap: var(--sp-6);
  }
  .hero__right {
    align-items: flex-start;
    text-align: left;
    min-height: 0;
  }
  .hero__lead {
    width: 100%;
    max-width: 100%;
    line-height: 1.6;
  }
  .hero__stats {
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: var(--sp-6);
  }
  .home-intro__grid {
    grid-template-columns: 1fr;
    gap: var(--sp-5);
  }
  .home-stories__slide {
    grid-template-columns: 1fr;
    max-width: 100%;
  }
  .home-stories__quote {
    width: 100%;
  }
  .home-stories__nav {
    width: 100%;
    max-width: 100%;
  }
  /* Mozaik (sabit 414×387, kolonlar 201px 201px): mobilde tüm sabit px'leri container
     genişliğine göre esnek (%) yapıyoruz — yoksa 402px'lik iç genişlik grid item'ı büyütüp
     tüm satırı (quote dahil) yana taşırıyordu. */
  .home-stories__mosaic {
    width: 100%;
    max-width: 414px;
    grid-template-columns: 1fr 1fr;
    height: auto;
    min-height: 0;
    aspect-ratio: 414 / 387;
  }
  /* .home-stories__col'un kendi sabit height:387px + grid-template-rows:82.68px/298px (masaüstü
     kuralı) mobilde override EDİLMEMİŞTİ — mozaik container aspect-ratio ile küçülürken col'lar
     hâlâ 387px sabit yükseklikte kalıp tile'ları container dışına taşırıyordu, bu da altındaki
     ok butonlarının üstüne binmesine sebep oluyordu. height:auto + fr denendi ama height:auto
     olan grid'de fr satırları içeriğin kendi boyutuna göre davranıp oranı garanti ETMİYOR — asıl
     çözüm height:100% vermek (mosaic zaten aspect-ratio ile definite height'e sahip, col bunu
     miras alır, fr satırları artık bu KESİN yüksekliğe göre doğru orantıda bölünüyor). */
  .home-stories__col {
    height: 100%;
    min-height: 0;
  }
  .home-stories__col:first-child {
    grid-template-rows: 21.35fr 78.65fr;
  }
  .home-stories__col:last-child {
    grid-template-rows: 78.65fr 21.35fr;
  }
  .home-stories__tile {
    min-height: 0;
  }
}
/* 465-860px arası: quote üstte, mozaik ORTALANMIŞ altında (kendi max-width:414px'i içinde),
   ok butonları mozaikle AYNI genişlikte kutuda, sağa yaslı — mozaikin hemen altında sağda
   duruyor (kullanıcı isteği: tam genişliğe yayılan nav yerine, fotoğrafla hizalı oklar). */
@media (max-width: 860px) and (min-width: 465px) {
  .home-stories__mosaic {
    margin-inline: auto;
  }
  .home-stories__nav {
    max-width: 414px;
    margin-inline: auto;
  }
  .home-process__steps {
    flex-wrap: wrap;
  }
  .home-process__step {
    flex: 1 1 45%;
    border-left: 1px solid var(--c-border);
  }
  .home-process__arrow {
    display: none;
  }
  /* Flip kart (Our Capabilities): başlık/ikon tasarımda 414px kart genişliğine göre mutlak
     konumlanmış (left:25/right:1 vb.) — kart küçüldüğünde bu konumlar değişmeden kalmalı
     (kullanıcı isteği), yoksa ön/arka yüzde metin-ikon çakışması oluyor. Çözüm: kartın
     KENDİSİNİ küçültmemek — auto-fit ile sabit 414px genişlikte kalıp sütun sayısı otomatik
     ayarlanıyor (Team/Awards/Explore kartlarıyla aynı prensip). minmax(0,414px) ile 414px'ten
     dar viewport'ta (aşağıdaki ayrı media query) taşma yerine kart kendisi sığar. */
  .home-caps__grid {
    grid-template-columns: repeat(auto-fit, minmax(0, 414px));
    justify-content: center;
  }
}
/* 414px'ten dar viewport'larda (kart artık tam sığmıyor): kartın kendisi container'a küçülür,
   içindeki title/icon'un px konumları da % bazlı olur — bu SADECE bu ekstrem dar aralıkta
   devreye giriyor, oranlar aynı kaldığı için title/icon arası boşluk hiçbir zaman kapanmaz
   (çakışma matematiksel olarak imkansız), 414px üstünde her şey tam sabit px kalıyor. */
@media (max-width: 414px) {
  .flip-card__front .flip-card__title {
    left: 6.039%;
    max-width: 57.971%;
  }
  .flip-card__icon {
    right: 0.242%;
    width: 28.744%;
    height: auto;
    aspect-ratio: 1 / 1;
  }
  /* Arka yüz: title--light + text + arrow, aynı prensiple % bazlı. */
  .flip-card__back .flip-card__title--light {
    left: 6.28%;
    max-width: 57.971%;
  }
  .flip-card__text {
    left: 6.28%;
    width: 64.493%;
  }
  .flip-card__arrow {
    right: 4.348%;
    width: 10.386%;
    height: auto;
    aspect-ratio: 1 / 1;
  }
}
@media (max-width: 520px) {
  /* Tasarımda sabit 51px/80px — çok dar telefonlarda (~360px ve altı) "startups." kelimesi
     80px font ile satır genişliğini aşıp yatay taşmaya sebep oluyordu. */
  .hero__title {
    font-size: 38px;
    line-height: 44px;
  }
  .hero__title .accent-primary {
    font-size: 56px;
  }
  .home-process__steps {
    flex-direction: column;
  }
  .home-process__step {
    flex: 1 1 auto;
  }
}