/* Nilkimtek — the hero globe.
 * Loaded after nilkimtek-motion.css, so it overrides the conic blob it replaces.
 * See nilkimtek-globe.php for why the transparency is done the way it is.
 *
 * The globe is a faded backdrop at every width — it sits behind the hero copy
 * rather than beside it. That is why the orb's rings, halo and pulse are off
 * everywhere below: they framed a sharp disc that no longer exists.
 */

/* The disc. The source frame is a dark globe on black with no alpha channel, so
   the frame background is removed geometrically — the globe is inscribed in the
   720² frame, so a circular clip is exactly the planet and nothing else. The
   darkness that remains is then lifted off pure black by screen-blending the
   video over a teal-900 ground, which is what keeps the sphere inside the
   palette instead of dropping a near-black hole onto the porcelain page.
   isolation:isolate confines that blend to the disc. */
.nk-orb .nk-globe{
  position:absolute; top:50%; left:50%; translate:-50% -50%;
  border-radius:50%;
  overflow:hidden;
  isolation:isolate;
  background:radial-gradient(circle at 50% 42%, #0A3A37 0%, #07211F 78%);
  contain:paint;
  pointer-events:none;
  /* A mask reads the alpha channel only, so the colour is arbitrary — it is the
     ink token rather than #000 because pure black does not belong in this
     palette even where it cannot be seen. */
  -webkit-mask-image:radial-gradient(circle at 50% 50%, #07211F 34%, rgba(7,33,31,0) 72%);
          mask-image:radial-gradient(circle at 50% 50%, #07211F 34%, rgba(7,33,31,0) 72%);
}

/* The teal ground is also the loading state: until the video has decoded a
   frame the visitor sees a deep-teal sphere, which is a designed element rather
   than an empty box, and the globe resolves into it. */
.nk-orb .nk-globe video{
  display:block; width:100%; height:100%; object-fit:cover;
  mix-blend-mode:screen;
  opacity:0;
  transition:opacity .55s ease;
  transform:translateZ(0);
}
.nk-orb .nk-globe.is-ready video{ opacity:1; }

/* What the globe replaces, plus the framing that only made sense around a sharp
   disc. All of it is off at every width now. */
.nk-orb .nk-orb-blob,
.nk-orb .nk-orb-ring,
.nk-hero-orb::before,
.nk-hero-orb::after{ display:none !important; }

/* Elementor gives every widget a full-width block wrapper. The disc is
   positioned against .nk-orb, so the wrapper must not claim any of the stage. */
.nk-orb > .nk-globe-w{
  position:static;
  width:auto !important; min-height:0 !important;
  margin:0 !important; padding:0 !important;
}
.nk-orb > .nk-globe-w .elementor-widget-container,
.nk-orb > .nk-globe-w .elementor-shortcode{
  position:static;
  min-height:0 !important;
  margin:0 !important; padding:0 !important;
}

/* The orb column leaves the flow at every width and becomes the hero's
   backdrop. Descendant, not child: the hero is an e-con-boxed container, so
   Elementor puts an .e-con-inner between it and its columns. That wrapper is
   also what the orb is positioned against, which is what we want — it is the
   content box, so the globe lands behind the copy rather than behind the hero's
   padding. Taking it out of flow is also what stops the hero growing a gap
   where the column used to be. */
.nk-hero .nk-hero-orb{
  position:absolute; inset:0; z-index:0;
  width:auto !important; min-height:0 !important; height:auto !important;
  margin:0 !important; padding:0 !important;
  pointer-events:none;
}
/* The copy is in normal flow, and an out-of-flow element with z-index:0 would
   paint over it. Lift it explicitly rather than relying on a negative index. */
.nk-hero .nk-hero-copy{ position:relative; z-index:1; }

/* ---------- Phone ---------- */
/* 100vw rather than 112vw: the disc no longer runs past the screen edges (the
   hero clipped the overflow, but there was no reason to render it), and with
   the mask fading out at 72% the sphere reads a touch smaller behind the copy. */
.nk-orb .nk-globe{
  width:min(100vw,470px); height:min(100vw,470px);
  opacity:.17;
}

/* ---------- Tablet: hero has stacked to one column, copy is full width, so the
   globe stays centred behind it exactly as on a phone, only larger.

   The size is capped against the hero's own height, not just the viewport
   width. At 620px the sphere was taller than the 582px hero and got clipped top
   and bottom, so it read as a washed band rather than a planet — the one width
   where it did not match the phone and the desktop. 460-470px leaves it whole,
   at roughly the same share of the hero height the other two breakpoints use. */
@media (min-width:768px){
  .nk-orb .nk-globe{
    width:min(60vw,470px); height:min(60vw,470px);
    opacity:.20;
  }
}

/* ---------- Desktop: the hero is a two-column row again, so the globe moves
   into the half the copy does not use. It still reads as a backdrop, but no
   body text sits on moving pixels. ---------- */
@media (min-width:1025px){
  .nk-orb .nk-globe{
    left:67%;
    width:min(58vw,762px); height:min(58vw,762px);
    opacity:.42;
  }

  /* Oversized headline. Size, line-height and tracking are set in Elementor's
     own typography controls on each home page, so the client can change them
     where the rest of the page is edited. Only the things Elementor cannot
     express live here: the measure, which decides where the lines break.

     English is two sentences and has to break at the full stop, which a plain
     column width does not guarantee — hence an explicit measure, in em so it
     tracks the font size:
         Formulated in / the lab. / Proven on / the press.
     text-wrap:balance is deliberately NOT used here; it evens the line lengths
     and in doing so broke the headline mid-sentence. */
  .nk-hero-title .elementor-heading-title{
    display:block;
    max-width:6.2em;
  }

  /* Turkish is a single clause split by a comma, and its first word is wider
     than the English measure on its own. Balance is the right tool for one
     sentence: it distributes the lines evenly instead of forcing a break the
     grammar does not have. */
  html[lang|="tr"] .nk-hero-title .elementor-heading-title{
    max-width:none;
    text-wrap:balance;
  }

  /* At this size the headline supplies all the weight, so everything under it
     stays quiet and simply gets more air. */
  .nk-hero-eyebrow{ margin-bottom:18px !important; }
  .nk-hero-lede{ margin-top:26px !important; }
  .nk-hero-lede .elementor-widget-container{
    max-width:58ch;
    text-wrap:pretty;
  }
  .nk-hero-cta{ margin-top:34px !important; }
}

/* Reduced motion: nilkimtek-globe.js never calls play() and seeks to a still
   frame instead, so the sphere is a photograph. Nothing here should re-enable
   the transition that would fade it in. */
@media (prefers-reduced-motion: reduce){
  .nk-orb .nk-globe video{ transition:none; }
}