/* ===========================================================
   Sections — each composition is deliberately different.
   No repeating text-left/image-right pattern.
=========================================================== */

/* ================= HERO (cinematic full-bleed video) ================= */
.hero{
  position: relative;
  display: flex;
  align-items: center;
  min-height: 100vh;
  min-height: 100svh;
  overflow: hidden;
  padding-bottom: clamp(3rem, 9vh, 6rem);
}

.hero-media{ position: absolute; inset: 0; z-index: 0; }
.hero-video{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 64% 40%;
}
/* Deliberately asymmetric scrim: strong navy on the left (where the
   copy sits) easing toward fully transparent on the right, so the
   footage's own red/cyan PCB detail stays visible there. Never a flat
   uniform rectangle. A soft top wash keeps the floating nav readable;
   a soft bottom wash keeps the CTA row readable on shorter viewports. */
.hero-scrim{
  position: absolute;
  inset: 0;
  background:
    linear-gradient(100deg,
      rgba(5, 12, 24, 0.88) 0%,
      rgba(6, 15, 29, 0.76) 20%,
      rgba(7, 17, 32, 0.52) 38%,
      rgba(7, 17, 32, 0.24) 56%,
      rgba(7, 17, 32, 0.07) 72%,
      rgba(7, 17, 32, 0) 88%
    ),
    linear-gradient(180deg, rgba(4, 10, 20, 0.5) 0%, rgba(4, 10, 20, 0) 22%),
    linear-gradient(0deg, rgba(4, 10, 20, 0.4) 0%, rgba(4, 10, 20, 0) 26%);
}
/* Restrained fade at the very bottom edge -- the only transition into
   the next (light) section: no waves, no curves, no decorative shapes. */
.hero-fade{
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: clamp(90px, 13vh, 170px);
  /* Eased (not linear) curve -- a softer, more cinematic hand-off into
     the next section than a flat ramp, without fading the footage into
     a large blank void (still a modest fraction of the full-height hero). */
  background: linear-gradient(180deg,
    rgba(250, 249, 245, 0) 0%,
    rgba(250, 249, 245, 0.5) 60%,
    var(--color-bg) 100%
  );
}

.hero-copy-wrap{
  position: relative;
  z-index: 2;
  width: 100%;
  padding-left: clamp(1.5rem, 19vw, 13rem);
  padding-right: clamp(1.5rem, 8vw, 6rem);
  padding-top: clamp(1rem, 7vh, 3.5rem); /* nudges the block slightly below optical center */
}
.hero-copy{ max-width: 640px; }
.hero-headline{
  margin-top: var(--space-md);
  /* capped so "doğru parçalarla" always holds its own line -- see the
     forced <br /> breaks in content.js for the exact 3-line shape */
  font-size: clamp(2.6rem, 1.5rem + 3.6vw, 4.3rem);
}
.hero-sub{
  margin-top: var(--space-lg);
  font-size: var(--fs-body-lg);
  max-width: 44ch;
}
.hero-ctas{
  margin-top: var(--space-xl);
  display: flex;
  gap: var(--space-md);
  flex-wrap: wrap;
}

@media (max-width: 760px){
  .hero{ align-items: flex-end; padding-bottom: clamp(2.5rem, 8vh, 4rem); }
  .hero-video{ object-position: 60% 38%; }
  .hero-scrim{
    background:
      linear-gradient(0deg,
        rgba(4, 10, 20, 0.94) 0%,
        rgba(5, 12, 24, 0.72) 30%,
        rgba(6, 15, 29, 0.32) 56%,
        rgba(6, 15, 29, 0.08) 76%,
        rgba(6, 15, 29, 0) 92%
      ),
      linear-gradient(180deg, rgba(4, 10, 20, 0.55) 0%, rgba(4, 10, 20, 0) 22%);
  }
  .hero-copy-wrap{
    padding-left: var(--gutter);
    padding-right: var(--gutter);
    padding-top: 0;
  }
  .hero-copy{ max-width: none; }
  .hero-headline{ font-size: clamp(2.3rem, 1.8rem + 4.5vw, 3.4rem); }
  .hero-ctas .btn{ flex: 1 1 auto; text-align: center; }
}

/* ================= PARTNERS ================= */
/* A quiet atmospheric band (the macro-PCB photo moved over from About)
   sits behind the section head only, then dissolves into the section's
   light background before the partner identities -- so the photo sets a
   technology/connection mood without ever competing with WINSOURCE /
   MEISHUO for attention. */
.partners{
  position: relative;
  padding-block: var(--space-2xl);
  overflow: hidden;
}
.partners-atmosphere{
  position: absolute;
  top: 0; left: 0; right: 0;
  height: clamp(460px, 42vw, 620px);
  z-index: 0;
  mask-image: linear-gradient(to bottom, black 0%, black 60%, transparent 70%);
  -webkit-mask-image: linear-gradient(to bottom, black 0%, black 60%, transparent 70%);
}
.partners-atmosphere picture{ position: absolute; inset: 0; display: block; }
.partners-atmosphere img{
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 55% 34%;
  filter: brightness(0.46) saturate(0.92) contrast(1.06);
}
.partners-atmosphere::after{
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(5, 12, 24, 0.32) 0%, rgba(5, 12, 24, 0.04) 62%, transparent 88%);
}
.partners .container{ position: relative; z-index: 1; }
.partners .section-head{ padding-top: clamp(0.5rem, 3vw, 1.75rem); }

@media (max-width: 700px){
  /* Mobile stacks the section-head and the partner-card grid much closer
     together than desktop's generous spacing, so the tall desktop fade
     band would still be visibly opaque behind WINSOURCE/MEISHUO. Use a
     much shorter band that clears completely behind the eyebrow/headline
     only, well before the card grid begins. */
  .partners-atmosphere{
    height: 260px;
    mask-image: linear-gradient(to bottom, black 0%, black 80%, transparent 90%);
    -webkit-mask-image: linear-gradient(to bottom, black 0%, black 80%, transparent 90%);
  }
}

/* ================= GLOBAL SOURCING ================= */
.sourcing{
  padding-block: var(--space-3xl);
  background: var(--color-bg-alt);
  overflow: hidden;
}
.sourcing-media{
  position: absolute;
  inset: 0;
  width: 58%;
  z-index: 0;
  mask-image: linear-gradient(to right, black 0%, black 62%, transparent 96%);
  -webkit-mask-image: linear-gradient(to right, black 0%, black 62%, transparent 96%);
}
.sourcing-media picture{ position: absolute; inset: 0; display: block; }
.sourcing-media img{
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 68% 42%;
  filter: saturate(0.95) contrast(1.04);
}
.sourcing-media::after{
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(150deg, rgba(10,27,50,0.34) 0%, rgba(10,27,50,0.08) 55%, transparent 78%);
  mix-blend-mode: multiply;
}
.sourcing-inner{
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.sourcing-copy{
  grid-column: 2 / 3;
  max-width: 560px;
}

@media (max-width: 700px){
  .sourcing-media{
    position: relative;
    width: auto;
    inset: auto;
    aspect-ratio: 16 / 11;
    margin-bottom: var(--space-lg);
    mask-image: linear-gradient(to bottom, black 70%, transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, black 70%, transparent 100%);
  }
  .sourcing-inner{ display: block; }
  .sourcing-copy{ max-width: none; }
}

/* ================= BUSINESS DEVELOPMENT ================= */
.bizdev{
  position: relative;
  background: var(--color-navy-dark);
  padding-block: var(--space-3xl);
  border-top: 1px solid var(--color-line-dark);
  border-bottom: 1px solid var(--color-line-dark);
  overflow: hidden;
}
/* Photograph bleeds to the right viewport edge -- the mirror of Global
   Sourcing's left bleed. A navy wash integrates it into the dark
   section while keeping the image's own blue/red lighting alive. */
.bizdev-media{
  position: absolute;
  inset: 0;
  left: auto;
  width: 62%;
  z-index: 0;
  mask-image: linear-gradient(to left, black 0%, black 60%, transparent 96%);
  -webkit-mask-image: linear-gradient(to left, black 0%, black 60%, transparent 96%);
}
.bizdev-media picture{ position: absolute; inset: 0; display: block; }
.bizdev-media img{
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 58% 46%;
  filter: brightness(0.6) saturate(1.05) contrast(1.05);
}
.bizdev-media::after{
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 65% 60% at 72% 38%, transparent 0%, rgba(7, 17, 32, 0.5) 78%),
    linear-gradient(to left, rgba(7, 17, 32, 0.08) 0%, rgba(7, 17, 32, 0.4) 70%, rgba(7, 17, 32, 0.7) 100%);
}
.bizdev-inner{
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.bizdev-copy{ grid-column: 1 / 2; max-width: 520px; }

@media (max-width: 700px){
  .bizdev-media{
    position: relative;
    width: auto;
    inset: auto;
    aspect-ratio: 16 / 12;
    margin-bottom: var(--space-lg);
    mask-image: linear-gradient(to bottom, black 70%, transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, black 70%, transparent 100%);
  }
  .bizdev-media img{ object-position: 62% 42%; }
  .bizdev-inner{ display: block; }
  .bizdev-copy{ max-width: none; }
}

/* ================= CONSULTING ================= */
/* Wide bleed -- the mirror of Global Sourcing's left bleed. The photo
   extends toward the right viewport edge and dissolves leftward under
   a gradient mask (no hard vertical edge), sitting partially behind the
   copy column rather than boxed beside it. */
.consulting{ position: relative; padding-block: var(--space-3xl); overflow: hidden; }
.consulting-media{
  position: absolute;
  inset: 0;
  left: auto;
  width: 64%;
  z-index: 0;
  mask-image: linear-gradient(to left, black 0%, black 55%, transparent 94%);
  -webkit-mask-image: linear-gradient(to left, black 0%, black 55%, transparent 94%);
}
.consulting-media picture{ position: absolute; inset: 0; display: block; }
.consulting-media img{
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 44% 46%;
  filter: saturate(0.94) contrast(1.03);
}
.consulting-media::after{
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(200deg, rgba(10, 27, 50, 0.14) 0%, transparent 55%);
  mix-blend-mode: multiply;
}
.consulting-inner{
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.consulting-copy{ grid-column: 1 / 2; max-width: 480px; }

@media (max-width: 700px){
  .consulting-media{
    position: relative;
    width: auto;
    inset: auto;
    aspect-ratio: 16 / 11;
    margin-top: var(--space-lg);
    mask-image: linear-gradient(to bottom, black 70%, transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, black 70%, transparent 100%);
  }
  .consulting-media img{ object-position: 46% 50%; }
  .consulting-inner{ display: block; }
  .consulting-copy{ max-width: none; }
}

/* ================= ABOUT ================= */
/* Typography-led brand statement -- no photograph, by design. Deep navy
   with a barely-there tonal vignette and a single diagonal sheen (pure
   CSS, no imagery, no motion): the copy itself carries the section. */
.about{
  position: relative;
  min-height: 72vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  padding-block: var(--space-3xl);
  background: var(--color-navy-dark);
}
.about-texture{
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(ellipse 60% 70% at 84% 16%, rgba(79, 216, 234, 0.07) 0%, transparent 62%),
    radial-gradient(ellipse 55% 60% at 8% 96%, rgba(36, 86, 143, 0.10) 0%, transparent 65%),
    linear-gradient(115deg, transparent 42%, rgba(244, 243, 239, 0.025) 49%, rgba(244, 243, 239, 0.04) 50%, rgba(244, 243, 239, 0.025) 51%, transparent 58%);
}
.about .container{ position: relative; z-index: 1; }
.about-copy{ max-width: 680px; }
.about-headline{
  margin-top: var(--space-md);
  font-size: clamp(2.4rem, 1.7rem + 3vw, 4.2rem);
}

/* ================= RFQ ================= */
.rfq{ background: var(--color-navy); padding-block: var(--space-3xl); }
.rfq-grid{
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
}
.rfq-copy{ max-width: 460px; }

@media (max-width: 700px){
  .rfq-grid{ grid-template-columns: 1fr; }
  .rfq-copy{ max-width: none; }
}