/* (2026-10-22) Page-specific looks used to be chosen with body:has(main[...]). A :has() on body
   makes the browser recheck the whole page on every change inside it, and the scroll animations
   change things on every frame: that made the home page stutter (Safari, slow phones). The page
   now marks <html> instead (app/[[...slug]]/page.js, sceneMarks): data-mk-scene="<data-scene>",
   .mk-main-touch, .mk-main-vx-page, .mk-main-ud52, .mk-main-mount, .mk-has-vx. */
/* Medikallup additions. The engine stylesheet in /_astro/ is left untouched. */

/* Product catalogue (Products page): filters + grid */
.mk-catalog {
  grid-column: 1 / -1;
  color: #fff;
}
.mk-filters {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  margin-bottom: 4rem;
}
.mk-filter {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.625rem;
}
.mk-filter[hidden],
.mk-chip[hidden],
.mk-card[hidden],
.mk-card-more[hidden],
.mk-empty[hidden] {
  display: none;
}
.mk-filter-label {
  flex: 0 0 100%;
  text-transform: uppercase;
  opacity: 0.6;
}
.mk-chip {
  padding: 0.55rem 1.1rem;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 2rem;
  color: #fff;
  font: inherit;
  font-size: 0.8125rem;
  letter-spacing: 0.06em;
  line-height: 1.2;
  background: transparent;
  cursor: pointer;
  transition: background-color 0.3s, border-color 0.3s, color 0.3s;
}
.mk-chip:hover {
  border-color: #fff;
}
.mk-chip.is-active {
  border-color: #fff;
  color: #0d2c44;
  background: #fff;
}
.mk-count {
  opacity: 0.6;
}
.mk-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2.5rem 1rem;
}
.mk-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.mk-card-media {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 4 / 3;
  margin-bottom: 1.5rem;
  padding: 0.75rem;
  overflow: hidden;
  border-radius: 6px;
  background: #fff;
}
.mk-card-media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.mk-card-meta {
  margin-bottom: 0.5rem;
  opacity: 0.6;
}
.mk-card-title {
  margin-bottom: 0.875rem;
}
.mk-card-text {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  opacity: 0.85;
}
.mk-card.is-open .mk-card-text {
  display: block;
}
.mk-card-more {
  align-self: flex-start;
  margin-top: 0.875rem;
  padding: 0 0 0.25rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.5);
  color: #fff;
  font: inherit;
  font-size: 0.8125rem;
  letter-spacing: 0.06em;
  background: none;
  cursor: pointer;
}
.mk-empty {
  padding: 2rem 0;
}
@media (max-width: 639px) {
  .mk-card-media {
    margin-bottom: 1rem;
    padding: 0.4rem;
  }
  .mk-card-title {
    font-size: 1rem;
    line-height: 1.4;
  }
  .mk-card-text {
    font-size: 0.8125rem;
    letter-spacing: 0.04rem;
  }
}
@media (min-width: 640px) {
  .mk-grid {
    gap: 3.5rem 2rem;
  }
}
@media (min-width: 1024px) {
  .mk-catalog {
    grid-column: 4 / 22;
  }
  .mk-filter-label {
    flex-basis: 7rem;
  }
  .mk-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 4.5rem 2.5rem;
  }
}
@media (min-width: 1680px) {
  .mk-catalog {
    grid-column: 6 / 21;
  }
  .mk-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* Brand logos sit on a white plate so dark and coloured marks stay legible on dark sections */
.mk-logo-plate {
  box-sizing: border-box;
  background: #fff;
}

/* Home "Ürünler" cards: product picture above the brand name.
   Fixed height keeps the layout stable while the picture loads; the picture
   itself is never cropped or stretched and keeps its transparency. */
.mk-division-image {
  display: block;
  width: auto;
  max-width: min(26rem, 72vw);
  height: 11rem;
  margin-bottom: 2rem;
  object-fit: contain;
  object-position: left center;
}
.mk-division-text {
  max-width: 30rem;
  margin: 1.5rem 0 0;
}
@media (min-width: 1024px) {
  .mk-division-image {
    height: 15rem;
  }
}

/* Home "Ürünler" section: picture background laid over the 3D scene for this
   section only. The frame stays in view while the section scrolls past, and
   both ends fade so the scene shows through at the section edges. */
#WhatWeDo {
  position: relative;
}
#WhatWeDo > .grid {
  position: relative;
  z-index: 1;
}
.mk-section-bg {
  position: absolute;
  /* stop before the section's empty last screen, where the scene moves on to the globe */
  inset: 0 0 85vh;
  z-index: 0;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 22vh, #000 calc(100% - 22vh), transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 22vh, #000 calc(100% - 22vh), transparent 100%);
}
.mk-section-bg-frame {
  position: sticky;
  top: 0;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}
.mk-section-bg-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
  /* zoom around the iceberg itself */
  transform-origin: 50% 42%;
  will-change: transform;
}
/* darkens below the intro so the white card text stays readable */
.mk-section-bg::after {
  position: absolute;
  inset: 0;
  content: "";
  background: linear-gradient(to bottom, rgba(13, 30, 48, 0) 0, rgba(13, 30, 48, 0) 60vh, rgba(13, 30, 48, 0.55) 130vh, rgba(13, 30, 48, 0.55) 100%);
}

/* Ambient motion for the "Ürünler" background, in the spirit of the hero's
   mountain scene: the picture starts close and pulls back as the section
   scrolls (set from script), drifts slightly on its own, and dense mist rolls
   across in front of it. The drift uses translate so it adds to the scripted
   transform instead of replacing it. */
.mk-section-bg-img {
  animation: mk-bg-drift 22s ease-in-out infinite alternate;
}
.mk-section-bg-frame::before,
.mk-section-bg-frame::after {
  position: absolute;
  top: -10%;
  bottom: -10%;
  left: 0;
  z-index: 1;
  /* twice the frame wide with a pattern that repeats every half, so sliding it
     by half its width loops without a seam */
  width: 200%;
  content: "";
  background-repeat: repeat-x;
  background-size: 50% 100%;
  filter: blur(26px);
  will-change: transform;
}
.mk-section-bg-frame::before {
  background-image:
    radial-gradient(ellipse 30% 24% at 16% 70%, rgba(236, 241, 247, 0.85), transparent 70%),
    radial-gradient(ellipse 26% 20% at 46% 56%, rgba(236, 241, 247, 0.7), transparent 70%),
    radial-gradient(ellipse 32% 26% at 78% 78%, rgba(236, 241, 247, 0.8), transparent 70%),
    radial-gradient(ellipse 22% 16% at 62% 24%, rgba(236, 241, 247, 0.5), transparent 70%);
  animation: mk-bg-mist 46s linear infinite;
}
.mk-section-bg-frame::after {
  background-image:
    radial-gradient(ellipse 34% 28% at 30% 84%, rgba(226, 233, 242, 0.8), transparent 70%),
    radial-gradient(ellipse 24% 18% at 8% 38%, rgba(226, 233, 242, 0.6), transparent 70%),
    radial-gradient(ellipse 28% 22% at 64% 62%, rgba(226, 233, 242, 0.7), transparent 70%),
    radial-gradient(ellipse 30% 20% at 92% 30%, rgba(226, 233, 242, 0.55), transparent 70%);
  animation: mk-bg-mist 72s linear infinite reverse;
}
@keyframes mk-bg-drift {
  from {
    translate: -1.2% 0.6%;
  }
  to {
    translate: 1.2% -0.6%;
  }
}
@keyframes mk-bg-mist {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(-50%, 0, 0);
  }
}
@media (prefers-reduced-motion: reduce) {
  .mk-section-bg-img,
  .mk-section-bg-frame::before,
  .mk-section-bg-frame::after {
    animation: none;
  }
}

/* Globe markers: each brand sits in a glass label with a glowing dot that
   sends out two rings. The engine still positions the markers and shows or
   hides them; only their look is styled here. */
/* labels pass in front of the section heading rather than behind it */
#GlobalConnectivity [data-point] {
  z-index: 2;
}
#GlobalConnectivity [data-point] span {
  position: relative;
  gap: 0.75rem;
  padding: 0.55rem 1.15rem 0.55rem 0.7rem;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 2rem;
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  white-space: nowrap;
  background: rgba(13, 34, 54, 0.42);
  box-shadow: 0 0.5rem 1.75rem rgba(4, 16, 28, 0.35), inset 0 0 0 1px rgba(255, 255, 255, 0.06);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  transform: translateY(0.5rem) scale(0.92);
  transform-origin: left center;
  transition: opacity 0.4s linear, visibility 0.4s, transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
#GlobalConnectivity [data-point].visible span {
  transform: none;
}
/* pictogram for the brand, between the dot and the name */
.mk-point-icon {
  flex: none;
  width: 1.5rem;
  height: 1.5rem;
  margin-right: -0.15rem;
  color: #dcecff;
}
/* the dot */
#GlobalConnectivity [data-point] span::before {
  flex: none;
  width: 0.75rem;
  height: 0.75rem;
  background: radial-gradient(circle at 35% 35%, #fff 0, #cfe6ff 55%, #7fb8ee 100%);
  box-shadow: 0 0 0.6rem 0.15rem rgba(140, 196, 255, 0.85);
  animation: mk-point-glow 2.6s ease-in-out infinite;
}
/* the rings */
#GlobalConnectivity [data-point] span::after {
  position: absolute;
  top: 50%;
  left: 0.7rem;
  width: 0.75rem;
  height: 0.75rem;
  margin-top: -0.375rem;
  content: "";
  border-radius: 50%;
  box-shadow: 0 0 0 0 rgba(170, 212, 255, 0.7), 0 0 0 0 rgba(170, 212, 255, 0.45);
  animation: mk-point-rings 2.6s ease-out infinite;
  pointer-events: none;
}
/* markers do not all beat together */
#GlobalConnectivity [data-point]:nth-of-type(3n + 2) span::before,
#GlobalConnectivity [data-point]:nth-of-type(3n + 2) span::after {
  animation-delay: 0.85s;
}
#GlobalConnectivity [data-point]:nth-of-type(3n) span::before,
#GlobalConnectivity [data-point]:nth-of-type(3n) span::after {
  animation-delay: 1.7s;
}
@keyframes mk-point-glow {
  0%,
  100% {
    box-shadow: 0 0 0.5rem 0.1rem rgba(140, 196, 255, 0.7);
  }
  50% {
    box-shadow: 0 0 1rem 0.3rem rgba(170, 212, 255, 1);
  }
}
@keyframes mk-point-rings {
  0% {
    box-shadow: 0 0 0 0 rgba(170, 212, 255, 0.7), 0 0 0 0 rgba(170, 212, 255, 0.45);
  }
  70%,
  100% {
    box-shadow: 0 0 0 1.1rem rgba(170, 212, 255, 0), 0 0 0 2rem rgba(170, 212, 255, 0);
  }
}
/* Brand markers: the glowing dot sits on the brand's home town and a thin line leads out to a
   glass card with the brand's logo (--dx/--dy, set per brand, place the card's centre relative to
   the dot, so cards in crowded Europe can fan out without hiding each other). The card links to the
   brand's page. */
#GlobalConnectivity [data-point] span.mk-point-has-logo {
  --k: 1;
  display: block;
  width: 0;
  height: 0;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  transform: scale(0.6);
  transform-origin: 0 0;
}
#GlobalConnectivity [data-point].visible span.mk-point-has-logo {
  transform: none;
}
/* the dot, centred on the town */
#GlobalConnectivity [data-point] span.mk-point-has-logo::before {
  position: absolute;
  top: -0.45rem;
  left: -0.45rem;
  width: 0.9rem;
  height: 0.9rem;
  border-radius: 50%;
}
#GlobalConnectivity [data-point] span.mk-point-has-logo::after {
  top: 0;
  left: -0.45rem;
  width: 0.9rem;
  height: 0.9rem;
  margin-top: -0.45rem;
}
.mk-point-lead {
  position: absolute;
  top: 0;
  left: 0;
  width: calc(hypot(var(--dx), var(--dy)) * var(--k) * 1rem);
  height: 2px;
  background: linear-gradient(90deg, #fff, rgba(220, 238, 255, 0.7));
  box-shadow: 0 0 0.5rem rgba(150, 205, 255, 1);
  transform: rotate(atan2(var(--dy), var(--dx)));
  transform-origin: 0 50%;
  pointer-events: none;
}
.mk-point-card {
  position: absolute;
  top: calc(var(--dy) * var(--k) * 1rem);
  left: calc(var(--dx) * var(--k) * 1rem);
  display: block;
  padding: 0.7rem 1.2rem;
  border: 1.5px solid rgba(255, 255, 255, 0.95);
  border-radius: 1rem;
  background: linear-gradient(135deg, rgba(95, 165, 235, 0.78), rgba(18, 60, 104, 0.88));
  box-shadow: 0 0 0 1px rgba(150, 210, 255, 0.35), 0 0 2.2rem rgba(110, 190, 255, 0.85), 0 0.75rem 2rem rgba(4, 16, 28, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.6);
  -webkit-backdrop-filter: blur(10px) saturate(1.3);
  backdrop-filter: blur(10px) saturate(1.3);
  overflow: hidden;
  transform: translate(-50%, -50%);
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.45s, border-color 0.45s;
  pointer-events: auto;
}
/* a light sweep crosses each card now and then */
.mk-point-card::after {
  position: absolute;
  inset: -50% auto -50% -60%;
  width: 40%;
  content: "";
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.55), transparent);
  transform: rotate(20deg);
  animation: mk-point-sweep 5.5s ease-in-out infinite;
  pointer-events: none;
}
#GlobalConnectivity [data-point]:nth-of-type(3n + 2) .mk-point-card::after {
  animation-delay: 1.8s;
}
#GlobalConnectivity [data-point]:nth-of-type(3n) .mk-point-card::after {
  animation-delay: 3.6s;
}
@keyframes mk-point-sweep {
  0%,
  60% {
    left: -60%;
  }
  100% {
    left: 130%;
  }
}
.mk-point-card:hover,
.mk-point-card:focus-visible {
  border-color: #fff;
  box-shadow: 0 0 2.4rem rgba(150, 210, 255, 0.75), 0 0.75rem 2rem rgba(4, 16, 28, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.5);
  transform: translate(-50%, -50%) scale(1.08);
}
/* every logo turned white and fitted in the same box, so the cards all come out one size */
.mk-point-logo {
  display: block;
  width: 8.5rem;
  height: 2.6rem;
  object-fit: contain;
  filter: brightness(0) invert(1) drop-shadow(0 0 0.35rem rgba(255, 255, 255, 0.55));
}
@media (max-width: 767px) {
  .mk-point-icon {
    width: 1.15rem;
    height: 1.15rem;
  }
  .mk-point-logo {
    width: 3.9rem;
    height: 1.2rem;
  }
  .mk-point-card {
    padding: 0.35rem 0.55rem;
    border-radius: 0.6rem;
  }
  #GlobalConnectivity [data-point] span.mk-point-has-logo {
    --k: 0.4;
  }
  #GlobalConnectivity [data-point] span {
    padding: 0.4rem 0.85rem 0.4rem 0.55rem;
    font-size: 0.6875rem;
  }
  #GlobalConnectivity [data-point] span::after {
    left: 0.55rem;
  }
}
@media (prefers-reduced-motion: reduce) {
  #GlobalConnectivity [data-point] span::before,
  #GlobalConnectivity [data-point] span::after,
  .mk-point-card::after {
    animation: none;
  }
}

/* Footer without menus: the contact blocks start at the logo's left edge and
   sit side by side, with one-line headings so their rows line up. */
#footer .menu-right {
  justify-content: flex-start;
  gap: 2.5rem 6rem;
}
#footer .office {
  max-width: 22rem;
}
#footer .office .top h2 {
  max-width: none;
  min-height: 0;
}

/* Footer contact items: icon in a ring, heading, lines. The icons draw
   themselves when the footer comes into view, then keep a small motion of
   their own; under the mouse the ring fills. */
#footer .menu-right > .mk-foot {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 3rem 2rem;
  width: 100%;
}
@media (min-width: 768px) {
  #footer .menu-right > .mk-foot {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (min-width: 1280px) {
  #footer .menu-right > .mk-foot {
    grid-template-columns: 1.5fr repeat(4, minmax(0, 1fr));
    gap: 3rem;
  }
}
.mk-foot-item {
  min-width: 0;
  color: #2d628c;
}
.mk-foot-icon {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.25rem;
  height: 3.25rem;
  margin-bottom: 1.5rem;
  border: 1px solid rgba(45, 98, 140, 0.35);
  border-radius: 50%;
  color: #2d628c;
  transition: background-color 0.4s ease, color 0.4s ease, border-color 0.4s ease, transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
/* a ring that keeps leaving the icon */
.mk-foot-icon::after {
  position: absolute;
  inset: -1px;
  content: "";
  border: 1px solid rgba(45, 98, 140, 0.45);
  border-radius: 50%;
  opacity: 0;
  animation: mk-foot-ring 3.6s ease-out infinite;
}
.mk-foot-item:nth-child(2) .mk-foot-icon::after {
  animation-delay: 0.7s;
}
.mk-foot-item:nth-child(3) .mk-foot-icon::after {
  animation-delay: 1.4s;
}
.mk-foot-item:nth-child(4) .mk-foot-icon::after {
  animation-delay: 2.1s;
}
.mk-foot-item:nth-child(5) .mk-foot-icon::after {
  animation-delay: 2.8s;
}
.mk-foot-svg {
  width: 1.5rem;
  height: 1.5rem;
  overflow: visible;
}
.mk-foot-svg > * {
  stroke-dasharray: 80;
  stroke-dashoffset: 80;
  transition: stroke-dashoffset 1.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.mk-foot.is-in .mk-foot-svg > * {
  stroke-dashoffset: 0;
}
.mk-foot.is-in .mk-foot-item:nth-child(2) .mk-foot-svg > * {
  transition-delay: 0.15s;
}
.mk-foot.is-in .mk-foot-item:nth-child(3) .mk-foot-svg > * {
  transition-delay: 0.3s;
}
.mk-foot.is-in .mk-foot-item:nth-child(4) .mk-foot-svg > * {
  transition-delay: 0.45s;
}
.mk-foot.is-in .mk-foot-item:nth-child(5) .mk-foot-svg > * {
  transition-delay: 0.6s;
}
.mk-foot.is-in .mk-foot-item--address .mk-foot-svg {
  animation: mk-foot-hop 2.8s ease-in-out 1.6s infinite;
}
.mk-foot.is-in .mk-foot-item--phone .mk-foot-svg {
  transform-origin: 50% 50%;
  animation: mk-foot-ringing 3.4s ease-in-out 1.8s infinite;
}
.mk-foot.is-in .mk-foot-item--mail .mk-foot-svg {
  animation: mk-foot-nod 3.2s ease-in-out 2s infinite;
}
.mk-foot.is-in .mk-foot-item--whatsapp .mk-foot-svg {
  animation: mk-foot-beat 2.6s ease-in-out 2.2s infinite;
}
.mk-foot.is-in .mk-foot-item--social .mk-foot-svg {
  animation: mk-foot-turn 9s linear 2.4s infinite;
}
.mk-foot-item:hover .mk-foot-icon {
  border-color: #2d628c;
  background: #2d628c;
  color: #fff;
  transform: translateY(-0.35rem);
}
#footer .mk-foot-title {
  max-width: none;
  min-height: 0;
  margin-bottom: 1rem;
}
.mk-foot-lines {
  line-height: 2;
}
.mk-foot-lines a {
  color: inherit;
  text-decoration: none;
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
  transition: background-size 0.4s ease;
}
.mk-foot-lines a:hover {
  background-size: 100% 1px;
}
.mk-foot-legal a {
  color: inherit;
  text-decoration: none;
}
.mk-foot-legal a:hover {
  text-decoration: underline;
}
/* Footer logo. The picture itself is untouched: it is shown three times,
   each copy cut to one part (emblem, name, tagline), so the parts can arrive
   one after the other. Then the emblem floats, light crosses the logo now and
   then, and under the mouse the whole logo leans towards the pointer. */
.mk-footlogo {
  --mk-logo: var(--mk-logo-light);
  position: relative;
  width: 11rem;
  max-width: 100%;
  aspect-ratio: 1190 / 785;
  perspective: 40rem;
}
footer[data-theme="dark"] .mk-footlogo,
main[data-footer="dark"] ~ #footer .mk-footlogo {
  --mk-logo: var(--mk-logo-dark);
}
.mk-footlogo-tilt,
.mk-footlogo-part,
.mk-footlogo-shine {
  position: absolute;
  inset: 0;
  display: block;
}
.mk-footlogo-tilt {
  transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transform-style: preserve-3d;
  transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.mk-footlogo.is-hover .mk-footlogo-tilt {
  transition-duration: 0.25s;
}
/* the 1190x785 window of the 1772x1772 picture that holds the logo */
.mk-footlogo-part {
  background: var(--mk-logo) 50% 49.75% / 148.908% auto no-repeat;
}
.mk-footlogo-part--mark {
  clip-path: inset(0 0 42% 0);
  opacity: 0;
  transform: translate3d(0, 1.75rem, 0) scale(0.7) rotate(-8deg);
  transform-origin: 50% 30%;
}
.mk-footlogo-part--word {
  clip-path: inset(58% 100% 13% 0);
}
.mk-footlogo-part--tag {
  clip-path: inset(87% 0 0 0);
  opacity: 0;
  transform: translateY(0.5rem);
}
.mk-footlogo.is-in .mk-footlogo-part--mark {
  animation: mk-footlogo-mark 1.3s cubic-bezier(0.2, 1.3, 0.3, 1) 0.1s both, mk-footlogo-float 5s ease-in-out 1.6s infinite;
}
.mk-footlogo.is-in .mk-footlogo-part--word {
  animation: mk-footlogo-word 1.1s cubic-bezier(0.6, 0, 0.2, 1) 0.7s both;
}
.mk-footlogo.is-in .mk-footlogo-part--tag {
  animation: mk-footlogo-tag 0.9s ease-out 1.6s both;
}
/* a bright edge that leads the name as it is written */
.mk-footlogo-edge {
  position: absolute;
  top: 56%;
  bottom: 12%;
  left: 0;
  width: 2px;
  background: linear-gradient(rgba(60, 140, 230, 0), #3c8ce6, rgba(60, 140, 230, 0));
  box-shadow: 0 0 0.75rem 0.15rem rgba(60, 140, 230, 0.7);
  opacity: 0;
}
.mk-footlogo.is-in .mk-footlogo-edge {
  animation: mk-footlogo-edge 1.1s cubic-bezier(0.6, 0, 0.2, 1) 0.7s both;
}
/* light that crosses the logo, cut to the logo's own shape */
.mk-footlogo-shine {
  background: linear-gradient(105deg, rgba(255, 255, 255, 0) 40%, rgba(255, 255, 255, 0.95) 50%, rgba(255, 255, 255, 0) 60%) 150% 0 / 300% 100% no-repeat;
  -webkit-mask: var(--mk-logo) 50% 49.75% / 148.908% auto no-repeat;
  mask: var(--mk-logo) 50% 49.75% / 148.908% auto no-repeat;
  pointer-events: none;
}
.mk-footlogo.is-in .mk-footlogo-shine {
  animation: mk-footlogo-shine 5.5s ease-in-out 2.2s infinite;
}
.mk-footlogo.is-hover .mk-footlogo-shine {
  animation: mk-footlogo-shine-once 0.9s ease-out 1 both;
}
/* a glow breathing behind the emblem */
.mk-footlogo-glow {
  position: absolute;
  top: -12%;
  left: 8%;
  width: 84%;
  height: 80%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(60, 140, 230, 0.4), rgba(60, 140, 230, 0));
  filter: blur(0.6rem);
  opacity: 0;
  pointer-events: none;
}
.mk-footlogo.is-in .mk-footlogo-glow {
  animation: mk-footlogo-glow 5s ease-in-out 1.2s infinite;
}
.mk-footlogo.is-hover .mk-footlogo-glow {
  animation-duration: 1.6s;
}
@keyframes mk-footlogo-mark {
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes mk-footlogo-float {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-0.3rem);
  }
}
@keyframes mk-footlogo-word {
  to {
    clip-path: inset(58% 0 13% 0);
  }
}
@keyframes mk-footlogo-edge {
  0% {
    left: 0;
    opacity: 0;
  }
  10%,
  85% {
    opacity: 1;
  }
  100% {
    left: 100%;
    opacity: 0;
  }
}
@keyframes mk-footlogo-tag {
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes mk-footlogo-shine {
  0%,
  70% {
    background-position: 150% 0;
  }
  100% {
    background-position: -50% 0;
  }
}
@keyframes mk-footlogo-shine-once {
  from {
    background-position: 150% 0;
  }
  to {
    background-position: -50% 0;
  }
}
@keyframes mk-footlogo-glow {
  0%,
  100% {
    opacity: 0.25;
    transform: scale(0.9);
  }
  50% {
    opacity: 0.9;
    transform: scale(1.1);
  }
}
@media (prefers-reduced-motion: reduce) {
  .mk-footlogo .mk-footlogo-part,
  .mk-footlogo .mk-footlogo-edge,
  .mk-footlogo .mk-footlogo-shine,
  .mk-footlogo .mk-footlogo-glow {
    animation: none !important;
  }
  .mk-footlogo-part--mark,
  .mk-footlogo-part--tag {
    opacity: 1;
    transform: none;
  }
  .mk-footlogo-part--word {
    clip-path: inset(58% 0 13% 0);
  }
}

/* Hero logo on the home page: drawn inside the engine's own <svg> so its
   intro and scroll handling stay as they are. The logo stands still; the
   light effects that used to cross it stay hidden. */
.mk-herologo-edge,
.mk-herologo-glow,
.mk-herologo-shine {
  display: none;
}

/* Brand logo in a page's hero (AquaCare): written from left to right behind
   a line of light, then it bobs as if on water while a blue glint crosses it. */
.logo:has(.mk-aqlogo) {
  overflow: visible;
}
.mk-aqlogo-float {
  transform-box: fill-box;
  transform-origin: 50% 50%;
}
.mk-aqlogo-glow,
.mk-aqlogo-edge {
  opacity: 0;
}
body.loaded .mk-aqlogo-wipe {
  animation: mk-aqlogo-wipe 1.7s cubic-bezier(0.6, 0, 0.2, 1) 0.9s backwards;
}
body.loaded .mk-aqlogo-edge {
  animation: mk-aqlogo-edge 1.7s cubic-bezier(0.6, 0, 0.2, 1) 0.9s both;
}
body.loaded .mk-aqlogo-float {
  animation: mk-aqlogo-float 6s ease-in-out 2.8s infinite;
}
body.loaded .mk-aqlogo-glow {
  animation: mk-aqlogo-glow 5s ease-in-out 1.6s infinite;
}
body.loaded .mk-aqlogo-shine {
  animation: mk-aqlogo-shine 6s ease-in-out 3.2s infinite;
}
.logo:hover .mk-aqlogo-shine {
  animation: mk-aqlogo-shine-once 1s ease-out 1 both;
}
/* the logo follows the mouse sideways (--mk-px runs from -1 to 1 across the screen) */
.mk-aqlogo {
  transform: translateX(calc(var(--mk-px, 0) * 46px));
  transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

/* A product beside the hero logo: arrives from the right, floats, catches
   the light, and moves against the logo with the mouse so the two sit at
   different depths. */
.mk-herodevice {
  position: absolute;
  top: 50%;
  right: 6vw;
  z-index: 1;
  width: min(38vw, 36rem);
  aspect-ratio: 3 / 2;
  pointer-events: none;
  perspective: 60rem;
  transform: translateY(-46%);
}
.mk-herodevice-move,
.mk-herodevice-float,
.mk-herodevice-shine {
  position: absolute;
  inset: 0;
  display: block;
}
.mk-herodevice-move {
  transform: translateX(calc(var(--mk-px, 0) * -3.25rem)) rotateY(calc(var(--mk-px, 0) * -9deg));
  transform-style: preserve-3d;
  transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.mk-herodevice-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 2rem 1.75rem rgba(4, 16, 34, 0.55));
}
.mk-herodevice-glow {
  position: absolute;
  inset: 8% 6%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(140, 210, 255, 0.55), rgba(140, 210, 255, 0));
  filter: blur(1.25rem);
  opacity: 0;
}
.mk-herodevice-shine {
  background: linear-gradient(105deg, rgba(255, 255, 255, 0) 42%, rgba(255, 255, 255, 0.9) 50%, rgba(255, 255, 255, 0) 58%) 150% 0 / 300% 100% no-repeat;
  -webkit-mask: var(--mk-mask) center / contain no-repeat;
  mask: var(--mk-mask) center / contain no-repeat;
}
body.loaded .mk-herodevice-float {
  animation: mk-herodevice-in 1.6s cubic-bezier(0.16, 1, 0.3, 1) 1.5s backwards, mk-herodevice-float 6.5s ease-in-out 3.2s infinite;
}
body.loaded .mk-herodevice-glow {
  animation: mk-herodevice-glow 5s ease-in-out 2.2s infinite;
}
body.loaded .mk-herodevice-shine {
  animation: mk-herodevice-shine 6.5s ease-in-out 3s infinite;
}
/* on a light scene (Yirro) the product casts a soft navy shadow and the logo's writing line is blue */
.mk-herodevice--light .mk-herodevice-img {
  filter: drop-shadow(0 2rem 1.75rem rgba(18, 48, 88, 0.32));
}
.mk-herodevice--light .mk-herodevice-glow {
  background: radial-gradient(closest-side, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0));
}
main[data-scene="WhoWeAre"] .mk-aqlogo-edge {
  fill: #2d8fe0;
}

/* The product in the sea: the picture is shown twice, cut at a fixed water
   line. The part above bobs on the swell; the part below is the same picture
   seen through water (blue, dim, wavering). Rings spread from where it meets
   the surface, and it surfaces from below when the page opens. */
.mk-sea {
  --mk-waterline: 73%;
}
.mk-sea-defs {
  position: absolute;
}
.mk-sea-above,
.mk-sea-below,
.mk-sea-bob {
  position: absolute;
  inset: 0;
  display: block;
}
.mk-sea-above {
  clip-path: inset(-60% -30% calc(100% - var(--mk-waterline)) -30%);
}
.mk-sea-below {
  clip-path: inset(var(--mk-waterline) -30% -80% -30%);
  filter: url(#mk-sea-wave) blur(1.5px) brightness(0.42) sepia(1) hue-rotate(170deg) saturate(2.6);
  opacity: 0.5;
}
.mk-sea .mk-herodevice-img {
  filter: none;
}
.mk-sea .mk-herodevice-glow {
  inset: 4% 4% 30%;
}
/* it is simply there, in the water: it fades in where it floats and bobs from the start */
body.loaded .mk-sea-bob {
  animation: mk-sea-bob 5.5s ease-in-out infinite;
}
body.loaded .mk-sea .mk-herodevice-move {
  animation: mk-sea-appear 1.4s ease-out 1.2s backwards;
}
@keyframes mk-sea-appear {
  from {
    opacity: 0;
  }
}
/* rings on the surface, flattened as seen from the shore */
.mk-sea-ripple {
  position: absolute;
  top: var(--mk-waterline);
  left: 50%;
  width: 78%;
  aspect-ratio: 9 / 1;
  border: 1.5px solid rgba(255, 255, 255, 0.7);
  border-radius: 50%;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.75);
}
body.loaded .mk-sea-ripple {
  animation: mk-sea-ripple 4.5s ease-out 1.6s infinite;
}
body.loaded .mk-sea-ripple:nth-of-type(2) {
  animation-delay: 3.1s;
}
body.loaded .mk-sea-ripple:nth-of-type(3) {
  animation-delay: 4.6s;
}
/* the rings are switched off */
.mk-sea-ripple {
  display: none;
}
/* foam where the body cuts the water */
.mk-sea-foam {
  position: absolute;
  top: var(--mk-waterline);
  left: 17%;
  width: 66%;
  height: 0.5rem;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.35) 60%, rgba(255, 255, 255, 0));
  filter: blur(2px);
  opacity: 0;
  transform: translateY(-50%);
}
body.loaded .mk-sea-foam {
  animation: mk-sea-foam 5.5s ease-in-out 1.6s infinite;
}
@keyframes mk-sea-bob {
  0%,
  100% {
    transform: translateY(0) rotate(-1.3deg);
  }
  50% {
    transform: translateY(3.5%) rotate(1.3deg);
  }
}
@keyframes mk-sea-ripple {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.72);
  }
  15% {
    opacity: 0.75;
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1.55);
  }
}
@keyframes mk-sea-foam {
  0%,
  100% {
    opacity: 0.55;
    transform: translateY(-50%) scaleX(0.94);
  }
  50% {
    opacity: 0.95;
    transform: translateY(-50%) scaleX(1.06);
  }
}
@media (prefers-reduced-motion: reduce) {
  body.loaded .mk-sea-bob,
  body.loaded .mk-sea .mk-herodevice-move,
  body.loaded .mk-sea-ripple,
  body.loaded .mk-sea-foam {
    animation: none;
  }
}
@media (max-width: 1023px) {
  .mk-herodevice {
    top: 57%;
    right: auto;
    left: 50%;
    width: 76vw;
    transform: translateX(-50%);
  }
}
@keyframes mk-herodevice-in {
  from {
    opacity: 0;
    transform: translate3d(5rem, 1.5rem, 0) scale(0.86);
  }
}
@keyframes mk-herodevice-float {
  0%,
  100% {
    transform: translateY(0) rotate(-0.6deg);
  }
  50% {
    transform: translateY(-0.9rem) rotate(0.6deg);
  }
}
@keyframes mk-herodevice-glow {
  0%,
  100% {
    opacity: 0.2;
    transform: scale(0.92);
  }
  50% {
    opacity: 0.8;
    transform: scale(1.06);
  }
}
@keyframes mk-herodevice-shine {
  0%,
  74% {
    background-position: 150% 0;
  }
  100% {
    background-position: -50% 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .mk-aqlogo,
  .mk-herodevice-move {
    transform: none;
  }
  body.loaded .mk-herodevice-float,
  body.loaded .mk-herodevice-glow,
  body.loaded .mk-herodevice-shine {
    animation: none;
  }
}
/* no light crossing the AquaCare logo or the product beside it */
.mk-aqlogo-shine,
.mk-herodevice-shine {
  display: none;
}
@keyframes mk-aqlogo-wipe {
  from {
    width: 0;
  }
}
@keyframes mk-aqlogo-edge {
  0% {
    opacity: 0;
    transform: translateX(0);
  }
  10%,
  85% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translateX(var(--mk-lw, 302px));
  }
}
@keyframes mk-aqlogo-float {
  0%,
  100% {
    transform: translateY(0) rotate(-0.5deg);
  }
  50% {
    transform: translateY(-2.5px) rotate(0.5deg);
  }
}
@keyframes mk-aqlogo-glow {
  0%,
  100% {
    opacity: 0.15;
  }
  50% {
    opacity: 0.75;
  }
}
@keyframes mk-aqlogo-shine {
  0%,
  72% {
    transform: skewX(-14deg) translateX(0);
  }
  100% {
    transform: skewX(-14deg) translateX(480px);
  }
}
@keyframes mk-aqlogo-shine-once {
  from {
    transform: skewX(-14deg) translateX(0);
  }
  to {
    transform: skewX(-14deg) translateX(480px);
  }
}
@media (prefers-reduced-motion: reduce) {
  body.loaded .mk-aqlogo-wipe,
  body.loaded .mk-aqlogo-edge,
  body.loaded .mk-aqlogo-float,
  body.loaded .mk-aqlogo-glow,
  body.loaded .mk-aqlogo-shine {
    animation: none;
  }
}

/* AquaCare and Doctorseyes pages: the footer has no ground of its own, the sea of the
   page goes on behind it; a slight shade keeps the white text readable. */
main[data-scene="Maritime"] ~ #footer,
main[data-scene="DoctorsEyes"] ~ #footer {
  background: linear-gradient(rgba(3, 14, 30, 0) 0, rgba(3, 14, 30, 0.38) 45%, rgba(3, 14, 30, 0.5) 100%);
}
main[data-scene="Maritime"] ~ #footer .mk-foot-item,
main[data-scene="DoctorsEyes"] ~ #footer .mk-foot-item,
main[data-scene="Maritime"] ~ #footer .mk-foot-icon,
main[data-scene="DoctorsEyes"] ~ #footer .mk-foot-icon,
main[data-scene="Maritime"] ~ #footer .mk-foot-title,
main[data-scene="DoctorsEyes"] ~ #footer .mk-foot-title,
main[data-scene="Maritime"] ~ #footer .mk-foot-lines,
main[data-scene="DoctorsEyes"] ~ #footer .mk-foot-lines,
main[data-scene="Maritime"] ~ #footer .mk-foot-lines a,
main[data-scene="DoctorsEyes"] ~ #footer .mk-foot-lines a,
main[data-scene="Maritime"] ~ #footer .mk-foot-legal,
main[data-scene="DoctorsEyes"] ~ #footer .mk-foot-legal {
  color: #fff;
}
main[data-scene="Maritime"] ~ #footer .mk-foot-icon,
main[data-scene="DoctorsEyes"] ~ #footer .mk-foot-icon,
main[data-scene="Maritime"] ~ #footer .mk-foot-icon::after,
main[data-scene="DoctorsEyes"] ~ #footer .mk-foot-icon::after {
  border-color: rgba(255, 255, 255, 0.5);
}
main[data-scene="Maritime"] ~ #footer .mk-foot-item:hover .mk-foot-icon,
main[data-scene="DoctorsEyes"] ~ #footer .mk-foot-item:hover .mk-foot-icon {
  border-color: #fff;
  background: #fff;
  color: #2d628c;
}
main[data-scene="Maritime"] ~ #footer .line,
main[data-scene="DoctorsEyes"] ~ #footer .line {
  background-color: rgba(255, 255, 255, 0.3);
}
main[data-scene="Maritime"] ~ #footer .mk-footlogo,
main[data-scene="DoctorsEyes"] ~ #footer .mk-footlogo {
  --mk-logo: var(--mk-logo-dark);
}

/* Smile Line page only: the same, over that page's own dark scene. */
main[data-scene="FortEnergy"] ~ #footer {
  background: linear-gradient(rgba(0, 4, 12, 0) 0, rgba(0, 4, 12, 0.3) 45%, rgba(0, 4, 12, 0.45) 100%);
}
main[data-scene="FortEnergy"] ~ #footer .mk-foot-item,
main[data-scene="FortEnergy"] ~ #footer .mk-foot-icon,
main[data-scene="FortEnergy"] ~ #footer .mk-foot-title,
main[data-scene="FortEnergy"] ~ #footer .mk-foot-lines,
main[data-scene="FortEnergy"] ~ #footer .mk-foot-lines a,
main[data-scene="FortEnergy"] ~ #footer .mk-foot-legal {
  color: #fff;
}
main[data-scene="FortEnergy"] ~ #footer .mk-foot-icon,
main[data-scene="FortEnergy"] ~ #footer .mk-foot-icon::after {
  border-color: rgba(255, 255, 255, 0.5);
}
main[data-scene="FortEnergy"] ~ #footer .mk-foot-item:hover .mk-foot-icon {
  border-color: #fff;
  background: #fff;
  color: #2d628c;
}
main[data-scene="FortEnergy"] ~ #footer .line {
  background-color: rgba(255, 255, 255, 0.3);
}
main[data-scene="FortEnergy"] ~ #footer .mk-footlogo {
  --mk-logo: var(--mk-logo-dark);
}

/* Swarovski page only: the same, over that page's own dark scene. */
main[data-scene="Trading"] ~ #footer {
  background: linear-gradient(rgba(0, 4, 12, 0) 0, rgba(0, 4, 12, 0.3) 45%, rgba(0, 4, 12, 0.45) 100%);
}
main[data-scene="Trading"] ~ #footer .mk-foot-item,
main[data-scene="Trading"] ~ #footer .mk-foot-icon,
main[data-scene="Trading"] ~ #footer .mk-foot-title,
main[data-scene="Trading"] ~ #footer .mk-foot-lines,
main[data-scene="Trading"] ~ #footer .mk-foot-lines a,
main[data-scene="Trading"] ~ #footer .mk-foot-legal {
  color: #fff;
}
main[data-scene="Trading"] ~ #footer .mk-foot-icon,
main[data-scene="Trading"] ~ #footer .mk-foot-icon::after {
  border-color: rgba(255, 255, 255, 0.5);
}
main[data-scene="Trading"] ~ #footer .mk-foot-item:hover .mk-foot-icon {
  border-color: #fff;
  background: #fff;
  color: #2d628c;
}
main[data-scene="Trading"] ~ #footer .line {
  background-color: rgba(255, 255, 255, 0.3);
}
main[data-scene="Trading"] ~ #footer .mk-footlogo {
  --mk-logo: var(--mk-logo-dark);
}

/* Salli page only: the same, over the grass that page ends on. */
main[data-scene="Capital"] ~ #footer {
  background: linear-gradient(rgba(6, 16, 4, 0) 0, rgba(6, 16, 4, 0.3) 45%, rgba(6, 16, 4, 0.48) 100%);
}
main[data-scene="Capital"] ~ #footer .mk-foot-item,
main[data-scene="Capital"] ~ #footer .mk-foot-icon,
main[data-scene="Capital"] ~ #footer .mk-foot-title,
main[data-scene="Capital"] ~ #footer .mk-foot-lines,
main[data-scene="Capital"] ~ #footer .mk-foot-lines a,
main[data-scene="Capital"] ~ #footer .mk-foot-legal {
  color: #fff;
}
main[data-scene="Capital"] ~ #footer .mk-foot-icon,
main[data-scene="Capital"] ~ #footer .mk-foot-icon::after {
  border-color: rgba(255, 255, 255, 0.5);
}
main[data-scene="Capital"] ~ #footer .mk-foot-item:hover .mk-foot-icon {
  border-color: #fff;
  background: #fff;
  color: #2d628c;
}
main[data-scene="Capital"] ~ #footer .line {
  background-color: rgba(255, 255, 255, 0.3);
}
main[data-scene="Capital"] ~ #footer .mk-footlogo {
  --mk-logo: var(--mk-logo-dark);
}

/* Home page only: the same, over the slate sky and globe the page ends on. */
main[data-scene="Homepage"] ~ #footer {
  background: linear-gradient(rgba(0, 4, 12, 0) 0, rgba(8, 20, 34, 0.22) 45%, rgba(8, 20, 34, 0.36) 100%);
}
main[data-scene="Homepage"] ~ #footer .mk-foot-item,
main[data-scene="Homepage"] ~ #footer .mk-foot-icon,
main[data-scene="Homepage"] ~ #footer .mk-foot-title,
main[data-scene="Homepage"] ~ #footer .mk-foot-lines,
main[data-scene="Homepage"] ~ #footer .mk-foot-lines a,
main[data-scene="Homepage"] ~ #footer .mk-foot-legal {
  color: #fff;
}
main[data-scene="Homepage"] ~ #footer .mk-foot-icon,
main[data-scene="Homepage"] ~ #footer .mk-foot-icon::after {
  border-color: rgba(255, 255, 255, 0.5);
}
main[data-scene="Homepage"] ~ #footer .mk-foot-item:hover .mk-foot-icon {
  border-color: #fff;
  background: #fff;
  color: #2d628c;
}
main[data-scene="Homepage"] ~ #footer .line {
  background-color: rgba(255, 255, 255, 0.3);
}
main[data-scene="Homepage"] ~ #footer .mk-footlogo {
  --mk-logo: var(--mk-logo-dark);
}

/* Yirro page only: the footer stands on the page's own sky and mountain;
   a thin white veil keeps the navy text readable. */
main[data-scene="WhoWeAre"] ~ #footer {
  background: linear-gradient(rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0.4) 45%, rgba(255, 255, 255, 0.55) 100%);
}

/* pages with the dark footer */
main[data-footer="dark"] ~ #footer .mk-foot-item,
main[data-footer="dark"] ~ #footer .mk-foot-icon {
  color: #fff;
}
main[data-footer="dark"] ~ #footer .mk-foot-icon,
main[data-footer="dark"] ~ #footer .mk-foot-icon::after {
  border-color: rgba(255, 255, 255, 0.45);
}
main[data-footer="dark"] ~ #footer .mk-foot-item:hover .mk-foot-icon {
  border-color: #fff;
  background: #fff;
  color: #2d628c;
}
@keyframes mk-foot-ring {
  0% {
    opacity: 0.7;
    transform: scale(1);
  }
  70%,
  100% {
    opacity: 0;
    transform: scale(1.7);
  }
}
@keyframes mk-foot-hop {
  0%,
  60%,
  100% {
    transform: translateY(0);
  }
  30% {
    transform: translateY(-0.25rem);
  }
}
@keyframes mk-foot-ringing {
  0%,
  40%,
  100% {
    transform: rotate(0);
  }
  5%,
  15%,
  25% {
    transform: rotate(-12deg);
  }
  10%,
  20%,
  30% {
    transform: rotate(12deg);
  }
}
@keyframes mk-foot-nod {
  0%,
  60%,
  100% {
    transform: translateY(0) rotate(0);
  }
  20% {
    transform: translateY(-0.15rem) rotate(-6deg);
  }
  40% {
    transform: translateY(0) rotate(4deg);
  }
}
@keyframes mk-foot-beat {
  0%,
  50%,
  100% {
    transform: scale(1);
  }
  15% {
    transform: scale(1.18);
  }
  30% {
    transform: scale(0.96);
  }
}
@keyframes mk-foot-turn {
  to {
    transform: rotate(360deg);
  }
}
@media (prefers-reduced-motion: reduce) {
  .mk-foot-icon::after,
  .mk-foot.is-in .mk-foot-svg {
    animation: none !important;
  }
  .mk-foot-svg > * {
    stroke-dashoffset: 0;
    transition: none;
  }
}

/* Product stage on the brand showcase page: the product's pictures on a lit
   plate that floats gently, sweeps with light when it scrolls into view and
   cycles through the gallery. */
.mk-stage {
  position: relative;
  width: 100%;
  max-width: 27rem;
  aspect-ratio: 1 / 1;
  margin-bottom: 1.25rem;
  overflow: hidden;
  border-radius: 1.25rem;
  background: #fff;
  box-shadow: 0 2.5rem 5rem -1.5rem rgba(4, 16, 30, 0.75), 0 0 0 1px rgba(255, 255, 255, 0.14),
    0 0 5rem rgba(120, 180, 255, 0.16);
  opacity: 0;
  transform: translateY(2.5rem) scale(0.94);
  transition: opacity 1s ease, transform 1.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.mk-stage.is-in {
  opacity: 1;
  transform: none;
  animation: mk-stage-float 7s ease-in-out 1.5s infinite;
}
.mk-stage-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 7%;
  object-fit: contain;
  opacity: 0;
  transform: scale(1.08);
  transition: opacity 1.1s ease, transform 5s cubic-bezier(0.16, 1, 0.3, 1);
}
.mk-stage-img.is-active {
  opacity: 1;
  transform: scale(1);
}
/* a band of light that crosses the plate once on entry */
.mk-stage-shine {
  position: absolute;
  top: -20%;
  bottom: -20%;
  left: -60%;
  z-index: 2;
  width: 45%;
  background: linear-gradient(100deg, rgba(255, 255, 255, 0) 0, rgba(190, 220, 255, 0.55) 50%, rgba(255, 255, 255, 0) 100%);
  pointer-events: none;
  transform: skewX(-14deg);
}
.mk-stage.is-in .mk-stage-shine {
  animation: mk-stage-shine 1.6s ease-out 0.5s 1 both;
}
.mk-stage-dots {
  display: flex;
  gap: 0.5rem;
  max-width: 27rem;
  margin-bottom: 2.25rem;
}
.mk-stage-dot {
  flex: 1 1 0;
  max-width: 2.75rem;
  height: 0.75rem;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}
.mk-stage-dot::before {
  display: block;
  height: 2px;
  content: "";
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.28);
  transition: background-color 0.4s;
}
.mk-stage-dot.is-active::before {
  background: #fff;
}
@keyframes mk-stage-float {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-0.75rem);
  }
}
@keyframes mk-stage-shine {
  from {
    left: -60%;
  }
  to {
    left: 130%;
  }
}
.mk-stage-sway,
.mk-stage-tilt {
  position: absolute;
  inset: 0;
}
.mk-stage-glow,
.mk-stage-ring,
.mk-stage-sweep,
.mk-stage-spot {
  display: none;
}

/* Cut-out products: no plate. The product hangs in the dark over a glow and
   two orbiting rings, sways slowly, and under the mouse it leans towards the
   pointer, grows, and a highlight travels over its surface. */
.mk-stage.is-cut {
  --rx: 0deg;
  --ry: 0deg;
  --mx: 50%;
  --my: 50%;
  width: 112%;
  max-width: 31rem;
  margin: -2.5rem 0 -1.25rem -6%;
  overflow: visible;
  border-radius: 0;
  background: none;
  box-shadow: none;
  perspective: 62rem;
  cursor: pointer;
}
.mk-stage.is-cut .mk-stage-shine {
  display: none;
}
.mk-stage.is-cut .mk-stage-glow {
  position: absolute;
  inset: 2% -4%;
  display: block;
  border-radius: 50%;
  background: radial-gradient(circle at var(--mx) var(--my), rgba(130, 195, 255, 0.5) 0, rgba(60, 125, 225, 0.2) 34%, rgba(40, 90, 200, 0) 66%);
  filter: blur(0.75rem);
  opacity: 0.5;
  pointer-events: none;
  transition: opacity 0.6s ease;
  animation: mk-stage-breathe 5s ease-in-out infinite;
}
.mk-stage.is-cut .mk-stage-ring {
  position: absolute;
  top: 60%;
  left: 50%;
  display: block;
  width: 86%;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  background: conic-gradient(from 0deg, rgba(140, 200, 255, 0) 0 55%, rgba(140, 200, 255, 0.85) 92%, #fff 100%);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1px));
  opacity: 0.45;
  pointer-events: none;
  transition: opacity 0.6s ease;
  animation: mk-stage-orbit 9s linear infinite;
}
.mk-stage.is-cut .mk-stage-ring--outer {
  width: 108%;
  opacity: 0.22;
  animation-duration: 16s;
  animation-direction: reverse;
}
.mk-stage.is-cut.is-in .mk-stage-sway {
  transform-style: preserve-3d;
  animation: mk-stage-sway 9s ease-in-out infinite;
}
.mk-stage.is-cut .mk-stage-tilt {
  transform: rotateX(var(--rx)) rotateY(var(--ry)) scale(1);
  transform-style: preserve-3d;
  transition: transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}
.mk-stage.is-cut .mk-stage-img {
  padding: 0;
  filter: drop-shadow(0 1.5rem 1.25rem rgba(0, 6, 14, 0.6));
  transform: translate3d(7%, 0, 0) scale(0.92);
  transition: opacity 0.7s ease, transform 1.1s cubic-bezier(0.16, 1, 0.3, 1), filter 0.6s ease;
}
.mk-stage.is-cut .mk-stage-img.is-active {
  transform: translate3d(0, 0, 2.5rem) scale(1);
}
/* both lights are clipped to the product's own outline (--mk-mask is the shown picture) */
.mk-stage.is-cut .mk-stage-sweep,
.mk-stage.is-cut .mk-stage-spot {
  position: absolute;
  inset: 0;
  display: block;
  pointer-events: none;
  transform: translate3d(0, 0, 2.5rem);
  -webkit-mask: var(--mk-mask) center / contain no-repeat;
  mask: var(--mk-mask) center / contain no-repeat;
}
.mk-stage.is-cut .mk-stage-sweep {
  background: linear-gradient(105deg, rgba(255, 255, 255, 0) 42%, rgba(255, 255, 255, 0.85) 50%, rgba(255, 255, 255, 0) 58%) 130% 0 / 300% 100% no-repeat;
}
.mk-stage.is-cut.is-in .mk-stage-sweep {
  animation: mk-stage-sweep 1.5s ease-out 0.6s 1 both;
}
.mk-stage.is-cut .mk-stage-spot {
  background: radial-gradient(circle at var(--mx) var(--my), rgba(255, 255, 255, 0.6) 0, rgba(190, 225, 255, 0.22) 16%, rgba(255, 255, 255, 0) 34%);
  opacity: 0;
  transition: opacity 0.4s ease;
}
/* under the mouse */
.mk-stage.is-cut.is-hover .mk-stage-tilt {
  transform: rotateX(var(--rx)) rotateY(var(--ry)) scale(1.16);
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.mk-stage.is-cut.is-hover .mk-stage-img.is-active {
  filter: drop-shadow(0 2.5rem 2rem rgba(0, 6, 14, 0.7)) drop-shadow(0 0 1.5rem rgba(120, 190, 255, 0.45));
}
.mk-stage.is-cut.is-hover .mk-stage-glow {
  opacity: 1;
}
.mk-stage.is-cut.is-hover .mk-stage-ring {
  opacity: 1;
}
.mk-stage.is-cut.is-hover .mk-stage-ring--outer {
  opacity: 0.6;
}
.mk-stage.is-cut.is-hover .mk-stage-spot {
  opacity: 1;
}
.mk-stage.is-cut.is-hover .mk-stage-sweep {
  animation: mk-stage-sweep-hover 1.1s ease-out 1 both;
}
.mk-stage.is-cut + .mk-stage-dots {
  position: relative;
  z-index: 1;
}
/* a picture that could not be cut out sits in the same stage as a rounded photo */
.mk-stage.is-cut .mk-stage-img.is-photo {
  inset: 0;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  margin: auto;
  border-radius: 0.9rem;
}
/* nothing moves while the stage is off screen */
.mk-stage.is-cut:not(.is-live) .mk-stage-glow,
.mk-stage.is-cut:not(.is-live) .mk-stage-ring,
.mk-stage.is-cut:not(.is-live) .mk-stage-sway,
.mk-stage:not(.is-live) {
  animation-play-state: paused;
}

/* a product leaning out of the last column must not widen the page */
main:has(.mk-stage.is-cut) {
  overflow-x: clip;
}
/* a pool of light on the floor under the product */
.mk-stage.is-cut::after {
  position: absolute;
  top: 76%;
  left: 14%;
  width: 72%;
  height: 12%;
  content: "";
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(150, 205, 255, 0.5), rgba(90, 150, 240, 0.16) 55%, rgba(60, 120, 220, 0));
  filter: blur(0.5rem);
  opacity: 0.55;
  pointer-events: none;
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.mk-stage.is-cut.is-hover::after {
  opacity: 1;
  transform: scale(1.18);
}
/* while one product is under the mouse the others step back */
.mk-brand-grid .mk-card,
.products-grid .text-block.product {
  transition: opacity 0.5s ease, filter 0.5s ease;
}
.mk-brand-grid:has(.mk-stage.is-hover) .mk-card:not(:has(.mk-stage.is-hover)) {
  opacity: 0.28;
  filter: saturate(0.5);
}

/* Full-screen viewer: opens when a stage is clicked. */
.mk-viewer {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at 50% 46%, rgba(28, 66, 112, 0.92) 0, rgba(5, 14, 26, 0.97) 58%, rgba(1, 5, 11, 0.99) 100%);
  -webkit-backdrop-filter: blur(0.75rem);
  backdrop-filter: blur(0.75rem);
  opacity: 0;
  perspective: 75rem;
  transition: opacity 0.45s ease;
}
.mk-viewer.is-open {
  opacity: 1;
}
.mk-viewer-figure {
  position: relative;
  width: min(86vw, 78vh);
  height: min(86vw, 78vh);
  transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) scale(0.82);
  transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.mk-viewer.is-open .mk-viewer-figure {
  transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) scale(1);
}
.mk-viewer-figure::before {
  position: absolute;
  top: 78%;
  left: 10%;
  width: 80%;
  height: 12%;
  content: "";
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(160, 210, 255, 0.55), rgba(90, 150, 240, 0.15) 55%, rgba(60, 120, 220, 0));
  filter: blur(0.75rem);
}
.mk-viewer-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 2.5rem 2.25rem rgba(0, 4, 10, 0.7));
  opacity: 0;
  transform: translateX(4%) scale(0.95);
  transition: opacity 0.5s ease, transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.mk-viewer-img.is-active {
  opacity: 1;
  transform: none;
}
.mk-viewer-title {
  position: absolute;
  top: 2rem;
  left: 2rem;
  right: 6rem;
  margin: 0;
  color: #fff;
}
.mk-viewer-count {
  position: absolute;
  bottom: 2rem;
  left: 50%;
  color: rgba(255, 255, 255, 0.7);
  letter-spacing: 0.2em;
  transform: translateX(-50%);
}
.mk-viewer-button {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.25rem;
  height: 3.25rem;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 50%;
  background: rgba(8, 20, 36, 0.5);
  color: #fff;
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
  transition: background-color 0.3s, border-color 0.3s;
}
.mk-viewer-button:hover {
  border-color: #fff;
  background: rgba(60, 120, 200, 0.45);
}
.mk-viewer-close {
  top: 1.5rem;
  right: 1.5rem;
}
.mk-viewer-prev {
  top: 50%;
  left: 1.5rem;
  margin-top: -1.625rem;
}
.mk-viewer-next {
  top: 50%;
  right: 1.5rem;
  margin-top: -1.625rem;
}
.mk-viewer-button[hidden] {
  display: none;
}

/* Featured products (AquaCare page): one per row, large, sides alternating. */
.mk-feature {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2rem;
  align-items: center;
  margin-bottom: 4.5rem;
}
.mk-feature .mk-stage.is-cut {
  width: 100%;
  max-width: 42rem;
  margin: 0 auto 1rem;
}
.mk-feature .mk-stage-dots {
  justify-content: center;
  max-width: none;
  margin-bottom: 0;
}
.mk-feature-index {
  margin-bottom: 1.5rem;
  opacity: 0.6;
  letter-spacing: 0.3em;
}
@media (min-width: 1024px) {
  .mk-feature {
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    gap: 5rem;
    margin-bottom: 5rem;
  }
  .mk-feature--flip .mk-feature-media {
    order: 2;
  }
}

/* the page's own gaps were sized for long texts; with products they read as holes */
#grid:has(.mk-feature-list) > h2 {
  margin-bottom: 3.5rem;
}
#grid:has(.mk-feature-list) > .description {
  margin-bottom: 0;
}
/* the cut-out sits inside a square with clear margins of its own */
.mk-feature:first-child {
  margin-top: -2rem;
}
[data-chapter="MaritimeChapter"]:has(.mk-feature-list) {
  padding-bottom: 5rem;
}

/* Salli page: the title sits just above the first product, without the old text block's room */
main[data-scene="Capital"] #grid > h2 {
  margin-bottom: 5rem;
}
main[data-scene="Capital"] .capital-section .description-wrapper {
  display: none;
}
main[data-scene="Capital"] .capital-section,
main[data-scene="Capital"] .capital-section > .grid {
  padding-top: 0;
  margin-top: 0;
}

/* The other products: a shelf that scrolls sideways; a click opens the product. */
.mk-rail-wrap {
  margin-bottom: 0;
}
.mk-rail-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.22);
}
.mk-rail-nav {
  display: flex;
  gap: 0.75rem;
}
.mk-rail-button {
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 50%;
  background: rgba(8, 20, 36, 0.35);
  color: #fff;
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  transition: background-color 0.3s, border-color 0.3s;
}
.mk-rail-button:hover {
  border-color: #fff;
  background: rgba(60, 120, 200, 0.45);
}
.mk-rail {
  display: flex;
  gap: 2rem;
  padding: 3.5rem 1rem 2.5rem;
  margin: 0 -1rem;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.35) transparent;
}
.mk-rail-card {
  position: relative;
  flex: 0 0 68%;
  scroll-snap-align: start;
  transition: opacity 0.5s ease, filter 0.5s ease;
}
@media (min-width: 768px) {
  .mk-rail-card {
    flex-basis: 15.5rem;
  }
}
.mk-rail-card .mk-stage.is-cut {
  width: 100%;
  max-width: none;
  margin: 0 0 1.25rem;
}
.mk-rail-card .mk-stage.is-cut.is-hover .mk-stage-tilt {
  transform: rotateX(var(--rx)) rotateY(var(--ry)) scale(1.08);
}
.mk-rail-name {
  text-align: center;
}
.mk-rail:has(.mk-stage.is-hover) .mk-rail-card:not(:has(.mk-stage.is-hover)) {
  opacity: 0.3;
  filter: saturate(0.5);
}

/* the shelf as a grid, for a brand with only a few other products */
.mk-rail-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 3.5rem 1.5rem;
  padding-bottom: 6rem;
}
@media (min-width: 1024px) {
  .mk-rail-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 5rem 3rem;
  }
}
.mk-rail-grid:has(.mk-stage.is-hover) .mk-rail-card:not(:has(.mk-stage.is-hover)) {
  opacity: 0.3;
  filter: saturate(0.5);
}
/* a block that spans the page's whole grid */
.mk-wide {
  grid-column: 1 / -1;
  width: 100%;
  max-width: 78rem;
  margin-inline: auto;
}

/* Yirro page: the chapters were spaced for long texts; pull the showroom together */
main[data-scene="WhoWeAre"] .core-values-block,
main[data-scene="DoctorsEyes"] .core-values-block {
  padding-bottom: 2rem;
}
main[data-scene="WhoWeAre"] .driving-forces,
main[data-scene="DoctorsEyes"] .driving-forces {
  padding-top: 5rem;
}
/* the title already says the brand, and the first products need no label of their own */
main[data-scene="WhoWeAre"] .core-values-block .index-who-we-are,
main[data-scene="DoctorsEyes"] .core-values-block .index-who-we-are,
main[data-scene="WhoWeAre"] .team-block .index-who-we-are,
main[data-scene="DoctorsEyes"] .team-block .index-who-we-are {
  display: none;
}
main[data-scene="WhoWeAre"] .mk-feature,
main[data-scene="DoctorsEyes"] .mk-feature {
  margin-bottom: 2.5rem;
}
main[data-scene="WhoWeAre"] .mk-rail-grid,
main[data-scene="DoctorsEyes"] .mk-rail-grid {
  gap: 3rem 2rem;
  padding-bottom: 4rem;
}
/* the hero comes first now, so the title needs no room for the header above it */
main[data-scene="WhoWeAre"] .core-values-block,
main[data-scene="DoctorsEyes"] .core-values-block {
  padding-top: 5rem;
}

/* the chapter reserves scroll room for a team gallery that is not there any more */
.team-block:has(.mk-feature-list)::after {
  height: 0 !important;
}
.team-block .mk-feature:last-child {
  margin-bottom: 0;
}

/* Light pages (sky background, navy text): the same stage with its lights turned into shade. */
.mk-light .mk-stage-dot::before {
  background: rgba(28, 72, 122, 0.25);
}
.mk-light .mk-stage-dot.is-active::before {
  background: #1c487a;
}
.mk-light .mk-stage.is-cut .mk-stage-glow {
  background: radial-gradient(circle at var(--mx) var(--my), rgba(255, 255, 255, 0.95) 0, rgba(255, 255, 255, 0.45) 36%, rgba(255, 255, 255, 0) 68%);
}
.mk-light .mk-stage.is-cut .mk-stage-ring {
  background: conic-gradient(from 0deg, rgba(28, 72, 122, 0) 0 55%, rgba(28, 72, 122, 0.55) 92%, #1c487a 100%);
}
.mk-light .mk-stage.is-cut::after {
  background: radial-gradient(closest-side, rgba(18, 48, 88, 0.34), rgba(18, 48, 88, 0.1) 55%, rgba(18, 48, 88, 0));
}
.mk-light .mk-stage.is-cut .mk-stage-img {
  filter: drop-shadow(0 1.5rem 1.25rem rgba(18, 48, 88, 0.3));
}
.mk-light .mk-stage.is-cut.is-hover .mk-stage-img.is-active {
  filter: drop-shadow(0 2.5rem 2rem rgba(18, 48, 88, 0.38)) drop-shadow(0 0 1.5rem rgba(255, 255, 255, 0.9));
}

/* the viewer with the product's text beside the picture */
.mk-viewer-text {
  position: absolute;
  right: 5.5rem;
  top: 50%;
  width: 22rem;
  max-height: 68vh;
  overflow-y: auto;
  color: #fff;
  transform: translateY(-50%);
}
.mk-viewer-text p + p {
  margin-top: 1em;
}
.mk-viewer.has-text .mk-viewer-figure {
  width: min(52vw, 74vh);
  height: min(52vw, 74vh);
  margin-right: 26rem;
}
@media (max-width: 1023px) {
  .mk-viewer.has-text {
    flex-direction: column;
    justify-content: flex-start;
    padding: 5.5rem 1.5rem 5rem;
  }
  .mk-viewer.has-text .mk-viewer-figure {
    flex: 0 0 auto;
    width: min(80vw, 42vh);
    height: min(80vw, 42vh);
    margin-right: 0;
  }
  /* the arrows stay beside the picture, clear of the text */
  .mk-viewer.has-text .mk-viewer-prev,
  .mk-viewer.has-text .mk-viewer-next {
    top: calc(5.5rem + min(80vw, 42vh) / 2);
  }
  .mk-viewer.has-text .mk-viewer-prev {
    left: 0.5rem;
  }
  .mk-viewer.has-text .mk-viewer-next {
    right: 0.5rem;
  }
  .mk-viewer-text {
    position: static;
    width: 100%;
    max-height: none;
    flex: 1 1 auto;
    margin-top: 1.5rem;
    transform: none;
  }
}

/* Brand page: the brand's products, grouped, as a grid of stages. */
.mk-brand-group {
  margin-bottom: 8rem;
}
.mk-brand-group-title {
  margin-bottom: 4rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.22);
}
.mk-brand-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 5rem 3rem;
}
@media (min-width: 768px) {
  .mk-brand-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 1280px) {
  .mk-brand-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
.mk-brand-grid .mk-card {
  min-width: 0;
}
.mk-brand-grid .mk-card:hover {
  z-index: 2;
}
.mk-brand-grid .mk-stage.is-cut {
  width: 100%;
  max-width: 24rem;
  margin: 0 0 1rem;
}
.mk-brand-grid .mk-stage-dots {
  margin-bottom: 1.5rem;
}
@keyframes mk-stage-breathe {
  0%,
  100% {
    transform: scale(0.94);
  }
  50% {
    transform: scale(1.04);
  }
}
@keyframes mk-stage-orbit {
  from {
    transform: translate(-50%, -50%) rotateX(74deg) rotate(0deg);
  }
  to {
    transform: translate(-50%, -50%) rotateX(74deg) rotate(360deg);
  }
}
@keyframes mk-stage-sway {
  0%,
  100% {
    transform: rotateY(-7deg) rotateX(2deg);
  }
  50% {
    transform: rotateY(7deg) rotateX(-2deg);
  }
}
@keyframes mk-stage-sweep {
  from {
    background-position: 130% 0;
  }
  to {
    background-position: -30% 0;
  }
}
@keyframes mk-stage-sweep-hover {
  from {
    background-position: 130% 0;
  }
  to {
    background-position: -30% 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .mk-stage.is-cut .mk-stage-glow,
  .mk-stage.is-cut .mk-stage-ring,
  .mk-stage.is-cut.is-in .mk-stage-sway,
  .mk-stage.is-cut.is-in .mk-stage-sweep,
  .mk-stage.is-cut.is-hover .mk-stage-sweep {
    animation: none;
  }
  .mk-stage.is-cut .mk-stage-tilt,
  .mk-stage.is-cut.is-hover .mk-stage-tilt {
    transform: none;
  }
  .mk-stage,
  .mk-stage.is-in {
    opacity: 1;
    transform: none;
    animation: none;
    transition: none;
  }
  .mk-stage-img {
    transform: none;
    transition: opacity 0.3s;
  }
  .mk-stage.is-in .mk-stage-shine {
    animation: none;
  }
}

/* Drag carousel: a brand logo in place of the stop's title. Every logo is
   fitted into the same box (--mk-box-w by --mk-box-h): wide wordmarks fill its
   width, compact marks its height. --mk-kw and --mk-kh come from the logo's
   drawn part, so empty margins inside a file do not make it look smaller. */
.hero-transition .title .mk-slide-logo {
  --mk-box-w: min(11.5rem, calc(var(--title-width) * 0.62));
  --mk-box-h: 3.6rem;
  display: block;
  width: min(calc(var(--mk-box-w) * var(--mk-kw)), calc(var(--mk-box-h) * var(--mk-kh)));
  max-width: none;
  height: auto;
  object-fit: contain;
  pointer-events: none;
  -webkit-user-drag: none;
}
@media (min-width: 1024px) {
  .hero-transition .title .mk-slide-logo {
    --mk-box-w: 19rem;
    --mk-box-h: 6rem;
  }
}

/* Doctorseyes: the black logo keeps a soft light halo so it stays readable
   while the island passes behind it */
main[data-scene="DoctorsEyes"] .hero .logo {
  filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.85)) drop-shadow(0 0 28px rgba(255, 244, 230, 0.7));
}

/* Doctorseyes: every text on the page is white; a soft shade behind the
   letters keeps them readable over the pale sky */
main[data-scene="DoctorsEyes"],
main[data-scene="DoctorsEyes"] *:not(.arrow-container):not(.arrow-container *) {
  color: #fff !important;
}
main[data-scene="DoctorsEyes"] h2,
main[data-scene="DoctorsEyes"] h3,
main[data-scene="DoctorsEyes"] p,
main[data-scene="DoctorsEyes"] span,
main[data-scene="DoctorsEyes"] .index-who-we-are {
  text-shadow: 0 1px 2px rgba(38, 52, 84, 0.45), 0 0 18px rgba(38, 52, 84, 0.4);
}
main[data-scene="DoctorsEyes"] .mk-stage-dot::before {
  background: rgba(255, 255, 255, 0.4);
}
main[data-scene="DoctorsEyes"] .mk-stage-dot.is-active::before {
  background: #fff;
}
html[data-mk-scene="DoctorsEyes"] body #header .nav-link,
html[data-mk-scene="DoctorsEyes"] body #header .news-w p,
html[data-mk-scene="DoctorsEyes"] body #header .menu-cta p {
  color: #fff !important;
  text-shadow: 0 1px 2px rgba(38, 52, 84, 0.45), 0 0 18px rgba(38, 52, 84, 0.4);
}

/* Full-screen menu: eight entries are taller than a laptop window at the
   engine's fixed sizes, so on desktop the rows shrink with the window height
   (never larger than the original 2.5rem type and 1.5rem padding). */
@media (min-width: 64em) {
  body .montfort-menu[data-astro-cid-6fp6peiy] nav[data-astro-cid-6fp6peiy] .nav-link[data-astro-cid-6fp6peiy] {
    font-size: min(2.5rem, 3.9vh);
  }
  body .montfort-menu[data-astro-cid-6fp6peiy] nav[data-astro-cid-6fp6peiy] .nav-link[data-astro-cid-6fp6peiy] .text-content[data-astro-cid-6fp6peiy] {
    padding: min(1.5rem, 2.25vh) 0;
  }
}

/* WhatsApp: a third round button under the scroll-top and sound buttons, in
   the same size and outline. A slow ring calls attention to it; on hover it
   fills with the WhatsApp green. */
.buttons-container .mk-wa {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  color: #25d366;
  pointer-events: all;
  cursor: pointer;
  border: 1.5px solid rgba(255, 255, 255, 0.15);
  border-radius: 50%;
  transition: color 0.35s, background-color 0.35s, border-color 0.35s, transform 0.5s cubic-bezier(0.19, 1, 0.22, 1);
}
.buttons-container .mk-wa svg {
  position: relative;
  transition: transform 0.5s cubic-bezier(0.19, 1, 0.22, 1);
}
.buttons-container .mk-wa-ring {
  position: absolute;
  inset: -1.5px;
  border: 1.5px solid #25d366;
  border-radius: 50%;
  opacity: 0;
  animation: mk-wa-ring 3.6s cubic-bezier(0.19, 1, 0.22, 1) infinite;
}
@keyframes mk-wa-ring {
  0% { opacity: 0.55; transform: scale(1); }
  60%, 100% { opacity: 0; transform: scale(1.55); }
}
@media (hover: hover) {
  .buttons-container .mk-wa:hover {
    color: #fff;
    background: #25d366;
    border-color: #25d366;
    transform: scale(1.06);
  }
  .buttons-container .mk-wa:hover svg {
    transform: rotate(-8deg) scale(1.08);
  }
}
@media (prefers-reduced-motion: reduce) {
  .buttons-container .mk-wa-ring {
    animation: none;
  }
}

/* Demo Planla: one screen over a full-bleed video. On the left the headline
   rises line by line above the three steps and the brands; on the right a
   frosted-glass form in three steps. */
.mk-demo {
  --demo-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --demo-accent: #a9d4ff;
  position: relative;
  min-height: calc(100 * var(--svh, 1vh));
  display: flex;
  flex-direction: column;
  color: #fff;
  background: #10140f;
  overflow: hidden;
}
main.mk-demo ~ #footer {
  display: none;
}
.mk-demo-video {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  animation: mk-demo-zoom 26s ease-in-out infinite alternate;
}
@keyframes mk-demo-zoom {
  from { transform: scale(1); }
  to { transform: scale(1.09); }
}
/* the film is bright on the right and busy below: a shade keeps the text calm */
.mk-demo-shade {
  position: fixed;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(7, 11, 9, 0.78) 0%, rgba(7, 11, 9, 0.42) 46%, rgba(7, 11, 9, 0.18) 100%),
    linear-gradient(0deg, rgba(7, 11, 9, 0.6) 0%, rgba(7, 11, 9, 0) 42%),
    linear-gradient(180deg, rgba(7, 11, 9, 0.45) 0%, rgba(7, 11, 9, 0) 24%);
  pointer-events: none;
}
.mk-demo-inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 2rem;
  margin-top: auto;
  padding: 7rem 1.25rem 2rem;
}
.mk-demo-lead {
  min-width: 0;
}
.mk-demo-kicker {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin-bottom: 1.1rem;
  color: var(--demo-accent);
  font-size: 0.75rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  animation: mk-demo-in 1s var(--demo-ease) both;
}
.mk-demo-kicker-line {
  width: 3rem;
  height: 1px;
  background: currentColor;
  transform-origin: left;
  animation: mk-demo-draw 1.2s var(--demo-ease) 0.1s both;
}
@keyframes mk-demo-draw {
  from { transform: scaleX(0); }
}
.mk-demo-title {
  font-size: 2.25rem;
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -0.01em;
}
.mk-demo-line {
  display: block;
  padding-bottom: 0.12em;
  overflow: hidden;
}
.mk-demo-line > span {
  display: inline-block;
  animation: mk-demo-rise 1.15s var(--demo-ease) both;
}
.mk-demo-line:nth-child(1) > span { animation-delay: 0.12s; }
.mk-demo-line:nth-child(2) > span { animation-delay: 0.24s; }
.mk-demo-line:nth-child(3) > span { animation-delay: 0.36s; }
@keyframes mk-demo-rise {
  from { transform: translateY(115%) rotate(4deg); opacity: 0; }
}
/* the last line carries a slow light across the letters */
.mk-demo-line:last-child > span {
  color: transparent;
  background: linear-gradient(100deg, #fff 0%, #fff 38%, var(--demo-accent) 50%, #fff 62%, #fff 100%) 0 0 / 260% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  animation: mk-demo-rise 1.15s var(--demo-ease) 0.36s both, mk-demo-sheen 6s ease-in-out 1.6s infinite;
}
@keyframes mk-demo-sheen {
  0% { background-position: 100% 0; }
  55%, 100% { background-position: 0 0; }
}
.mk-demo-text {
  max-width: 30rem;
  margin-top: 1.1rem;
  font-size: 0.9375rem;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.82);
  animation: mk-demo-in 1s var(--demo-ease) 0.5s both;
}
@keyframes mk-demo-in {
  from { opacity: 0; transform: translateY(18px); }
}
/* three steps on one line; a light walks from one number to the next */
.mk-demo-steps {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  max-width: 38rem;
  margin-top: 2rem;
  padding: 0;
  list-style: none;
  counter-reset: none;
}
.mk-demo-steps::before {
  content: "";
  position: absolute;
  top: 1.125rem;
  left: 1.125rem;
  right: 16%;
  height: 1px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.12));
  transform-origin: left;
  animation: mk-demo-draw 1.6s var(--demo-ease) 0.7s both;
}
.mk-demo-step {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  animation: mk-demo-in 1s var(--demo-ease) both;
}
.mk-demo-step:nth-child(1) { animation-delay: 0.65s; }
.mk-demo-step:nth-child(2) { animation-delay: 0.78s; }
.mk-demo-step:nth-child(3) { animation-delay: 0.91s; }
.mk-demo-step-n {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  margin-bottom: 0.5rem;
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-radius: 50%;
  background: rgba(16, 22, 18, 0.7);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  animation: mk-demo-pulse 7.5s ease-in-out infinite;
}
.mk-demo-step:nth-child(1) .mk-demo-step-n { animation-delay: 1.8s; }
.mk-demo-step:nth-child(2) .mk-demo-step-n { animation-delay: 4.3s; }
.mk-demo-step:nth-child(3) .mk-demo-step-n { animation-delay: 6.8s; }
@keyframes mk-demo-pulse {
  0%, 30%, 100% { color: #fff; border-color: rgba(255, 255, 255, 0.45); background-color: rgba(16, 22, 18, 0.7); box-shadow: 0 0 0 0 rgba(169, 212, 255, 0); }
  8%, 20% { color: #0c1410; border-color: #fff; background-color: #fff; box-shadow: 0 0 0 8px rgba(169, 212, 255, 0.16); }
}
.mk-demo-step-title {
  font-size: 0.875rem;
  letter-spacing: 0.02em;
}
.mk-demo-step-text {
  font-size: 0.75rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.62);
}
/* the brands pass by in an endless band */
.mk-demo-brandsrow {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  max-width: 38rem;
  margin-top: 2rem;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  animation: mk-demo-in 1s var(--demo-ease) 1.05s both;
}
.mk-demo-brandsrow-title {
  flex: none;
  font-size: 0.625rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
}
.mk-demo-marquee {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.mk-demo-marquee-track {
  display: flex;
  align-items: center;
  width: max-content;
  animation: mk-demo-marquee 28s linear infinite;
}
.mk-demo-marquee-copy {
  display: flex;
  align-items: center;
}
.mk-demo-marquee img {
  flex: none;
  width: calc(1.35rem * var(--mk-ratio));
  max-width: 7.5rem;
  height: auto;
  margin-right: 2.75rem;
  filter: brightness(0) invert(1);
  opacity: 0.8;
}
@keyframes mk-demo-marquee {
  to { transform: translateX(-50%); }
}
/* the form: frosted glass with a light that follows the pointer */
.mk-demo-card {
  position: relative;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 1.25rem;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.06)), rgba(14, 19, 16, 0.42);
  box-shadow: 0 30px 80px -30px rgba(0, 0, 0, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.18);
  -webkit-backdrop-filter: blur(22px) saturate(1.2);
  backdrop-filter: blur(22px) saturate(1.2);
  overflow: hidden;
}
.mk-demo-form {
  width: 100%;
  padding: 1.5rem 1.25rem 1.25rem;
  animation: mk-demo-card 1.3s var(--demo-ease) 0.3s both;
}
@keyframes mk-demo-card {
  from { opacity: 0; transform: translateY(40px) scale(0.97); }
}
.mk-demo-glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(22rem circle at var(--gx, 80%) var(--gy, 0%), rgba(169, 212, 255, 0.2), rgba(169, 212, 255, 0) 60%);
  pointer-events: none;
  transition: opacity 0.6s;
}
.mk-demo-form > :not(.mk-demo-glow) {
  position: relative;
}
.mk-demo-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}
.mk-demo-form-title {
  font-size: 1.125rem;
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.mk-demo-count {
  display: flex;
  align-items: baseline;
  gap: 0.3rem;
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.55);
}
.mk-demo-count b {
  font-size: 1.5rem;
  font-weight: 400;
  color: #fff;
}
.mk-demo-count i {
  font-style: normal;
}
.mk-demo-progress {
  height: 2px;
  margin-top: 0.9rem;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.16);
  overflow: hidden;
}
.mk-demo-progress span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #fff, var(--demo-accent));
  transform-origin: left;
  transform: scaleX(0.3333);
  transition: transform 0.9s var(--demo-ease);
}
.mk-demo-form[data-step="2"] .mk-demo-progress span { transform: scaleX(0.6667); }
.mk-demo-form[data-step="3"] .mk-demo-progress span { transform: scaleX(1); }
.mk-demo-tabs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin: 0.6rem 0 1.25rem;
  padding: 0;
  list-style: none;
  font-size: 0.625rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.4);
}
.mk-demo-tabs li {
  transition: color 0.5s;
}
.mk-demo-tabs li:nth-child(2) { text-align: center; }
.mk-demo-tabs li:nth-child(3) { text-align: right; }
.mk-demo-tabs li.is-active {
  color: #fff;
}
/* the three steps share one cell, so the card keeps its height while they change */
.mk-demo-panels {
  display: grid;
}
.mk-demo-panel {
  grid-area: 1 / 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-content: start;
  gap: 0.9rem 0.75rem;
  opacity: 0;
  visibility: hidden;
  transform: translateX(28px);
  transition: opacity 0.45s, transform 0.7s var(--demo-ease), visibility 0s 0.45s;
}
.mk-demo-panel.is-active {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity 0.6s 0.15s, transform 0.8s var(--demo-ease) 0.1s;
}
.mk-demo-panel.is-past {
  transform: translateX(-28px);
}
.mk-demo-field {
  position: relative;
  display: block;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
.mk-demo-field--wide {
  grid-column: 1 / -1;
}
.mk-demo-field > input,
.mk-demo-field > textarea {
  display: block;
  width: 100%;
  padding: 1.35rem 0.9rem 0.5rem;
  color: #fff;
  font: inherit;
  font-size: 0.9375rem;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 0.75rem;
  background: rgba(255, 255, 255, 0.07);
  outline: none;
  resize: none;
  color-scheme: dark;
  transition: border-color 0.35s, background-color 0.35s, box-shadow 0.35s;
}
.mk-demo-field > span {
  position: absolute;
  top: 0.95rem;
  left: 0.95rem;
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.6);
  pointer-events: none;
  transform-origin: left top;
  transition: transform 0.45s var(--demo-ease), color 0.35s;
}
/* the label moves up out of the way once the field is in use */
.mk-demo-field > input:focus + span,
.mk-demo-field > input:not(:placeholder-shown) + span,
.mk-demo-field > textarea:focus + span,
.mk-demo-field > textarea:not(:placeholder-shown) + span,
.mk-demo-field--date > span {
  color: var(--demo-accent);
  transform: translateY(-0.6rem) scale(0.72);
}
.mk-demo-field > input:hover,
.mk-demo-field > textarea:hover {
  border-color: rgba(255, 255, 255, 0.32);
}
.mk-demo-field > input:focus,
.mk-demo-field > textarea:focus {
  border-color: var(--demo-accent);
  background: rgba(255, 255, 255, 0.12);
  box-shadow: 0 0 0 4px rgba(169, 212, 255, 0.14);
}
.mk-demo-form.is-checked .mk-demo-field > input:required:placeholder-shown {
  border-color: #ffb4a8;
  animation: mk-demo-shake 0.45s;
}
@keyframes mk-demo-shake {
  25% { transform: translateX(-5px); }
  50% { transform: translateX(4px); }
  75% { transform: translateX(-2px); }
}
.mk-demo-brands > legend {
  margin-bottom: 0.6rem;
  padding: 0;
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
}
.mk-demo-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}
.mk-demo-chip {
  position: relative;
  cursor: pointer;
}
.mk-demo-chip input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.mk-demo-chip span {
  display: block;
  padding: 0.45rem 0.95rem;
  font-size: 0.8125rem;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.05);
  transition: color 0.3s, background-color 0.3s, border-color 0.3s, transform 0.5s var(--demo-ease);
}
.mk-demo-chip:hover span {
  background: rgba(255, 255, 255, 0.16);
  transform: translateY(-2px);
}
.mk-demo-chip input:checked + span {
  color: #0c1410;
  border-color: #fff;
  background: #fff;
  transform: scale(1.04);
}
.mk-demo-chip input:focus-visible + span {
  box-shadow: 0 0 0 3px rgba(169, 212, 255, 0.4);
}
.mk-demo-consent {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  font-size: 0.75rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.8);
  cursor: pointer;
}
.mk-demo-consent input {
  flex: none;
  width: 1rem;
  height: 1rem;
  margin-top: 0.1rem;
  accent-color: #fff;
}
.mk-demo-consent a {
  text-decoration: underline;
}
.mk-demo-status {
  min-height: 1.2em;
  margin-top: 0.8rem;
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.9);
}
.mk-demo-status.is-error {
  color: #ffc9bf;
}
.mk-demo-status.is-ok::before {
  content: "";
  display: inline-block;
  width: 0.7em;
  height: 0.38em;
  margin: 0 0.6em 0.2em 0.15em;
  border-left: 2px solid var(--demo-accent);
  border-bottom: 2px solid var(--demo-accent);
  transform: rotate(-45deg);
  animation: mk-demo-tick 0.6s var(--demo-ease) both;
}
@keyframes mk-demo-tick {
  from { opacity: 0; transform: rotate(-45deg) scale(0.2); }
}
.mk-demo-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 0.6rem;
}
.mk-demo-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.85rem 1.6rem;
  color: #0c1410;
  font: inherit;
  font-size: 0.8125rem;
  letter-spacing: 0.06em;
  border: 1px solid #fff;
  border-radius: 999px;
  background: #fff;
  cursor: pointer;
  overflow: hidden;
  transition: transform 0.5s var(--demo-ease), box-shadow 0.5s, background-color 0.35s, color 0.35s, border-color 0.35s;
}
.mk-demo-btn svg {
  transition: transform 0.5s var(--demo-ease);
}
/* a glint crosses the main button every few seconds */
.mk-demo-btn:not(.mk-demo-btn--ghost)::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -40%;
  width: 30%;
  background: linear-gradient(100deg, rgba(169, 212, 255, 0), rgba(169, 212, 255, 0.75), rgba(169, 212, 255, 0));
  transform: skewX(-18deg);
  animation: mk-demo-glint 4.5s ease-in-out 2s infinite;
}
@keyframes mk-demo-glint {
  0%, 60% { left: -40%; }
  100% { left: 130%; }
}
.mk-demo-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 30px -12px rgba(169, 212, 255, 0.7);
}
.mk-demo-btn:hover svg {
  transform: translateX(4px);
}
.mk-demo-btn--ghost {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.3);
  background: rgba(255, 255, 255, 0.06);
}
.mk-demo-btn--ghost:hover {
  background: rgba(255, 255, 255, 0.16);
  box-shadow: none;
}
/* the second way of sending is a quiet text link beside the main button */
.mk-demo-btn--link {
  padding: 0.85rem 0.4rem;
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  text-decoration: underline;
  text-underline-offset: 0.3em;
  border-color: transparent;
  background: none;
}
.mk-demo-btn--link:hover {
  color: #fff;
  background: none;
  transform: none;
}
/* which buttons a step shows */
.mk-demo-form[data-step="1"] .mk-demo-back,
.mk-demo-form:not([data-step="3"]) .mk-demo-send,
.mk-demo-form[data-step="3"] .mk-demo-next {
  display: none;
}
@media (min-width: 640px) {
  .mk-demo-inner {
    padding: 8rem 2rem 3rem;
  }
  .mk-demo-title {
    font-size: 3rem;
  }
  .mk-demo-form {
    padding: 1.75rem 1.75rem 1.5rem;
  }
}
@media (max-width: 639px) {
  .mk-demo-steps {
    grid-template-columns: 1fr;
    gap: 0.9rem;
  }
  .mk-demo-steps::before {
    display: none;
  }
  .mk-demo-step {
    display: grid;
    grid-template-columns: 2.25rem 1fr;
    column-gap: 0.9rem;
  }
  .mk-demo-step-n {
    grid-row: 1 / 3;
    margin: 0;
  }
  .mk-demo-brandsrow {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.8rem;
  }
  .mk-demo-marquee {
    width: 100%;
  }
  .mk-demo-panel {
    grid-template-columns: 1fr;
  }
}
@media (min-width: 1024px) {
  .mk-demo-inner {
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
    gap: 3rem;
    /* in line with the header's menu on the left; on the right clear of the round corner buttons */
    padding: 9rem calc(13.6vw + 52px + 1.5rem) 4rem 13.6vw;
  }
  .mk-demo-lead {
    flex: 1;
  }
  .mk-demo-title {
    font-size: clamp(2.75rem, 4.1vw, 4rem);
  }
  .mk-demo-form {
    flex: none;
    width: 29rem;
  }
}
@media (prefers-reduced-motion: reduce) {
  .mk-demo *,
  .mk-demo *::before,
  .mk-demo *::after {
    animation: none !important;
    transition: none !important;
  }
}

/* Turning 3D model of a product (AquaCare Twin): a box whose sides are the product's own
   front, back, side and top photographs; the round jars always face the viewer. */
.mk-spin {
  --w: 60cqw;
  --h: calc(var(--w) * 0.4);
  --d: calc(var(--w) * 0.74);
  position: relative;
  width: 112%;
  max-width: 31rem;
  aspect-ratio: 1 / 0.86;
  margin: -1.5rem 0 0.5rem -6%;
  container-type: inline-size;
  perspective: 190cqw;
  perspective-origin: 50% 35%;
  cursor: pointer;
}
.mk-spin-tilt,
.mk-spin-model,
.mk-spin-jar,
.mk-spin-side {
  transform-style: preserve-3d;
}
.mk-spin-tilt {
  position: absolute;
  left: 50%;
  top: 62%;
  width: 0;
  height: 0;
  transform: rotateX(-11deg);
}
.mk-spin-model {
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  height: 0;
  transform: rotateY(-28deg);
  animation: mk-spin 18s linear infinite paused;
}
.mk-spin.is-live .mk-spin-model,
.mk-spin.is-live .mk-spin-jar > img {
  animation-play-state: running;
}
.mk-spin-f,
.mk-spin-core,
.mk-spin-hand,
.mk-spin-jar,
.mk-spin-shadow {
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  max-width: none;
}
.mk-spin-f,
.mk-spin-core {
  backface-visibility: hidden;
}
.mk-spin-side > img {
  position: absolute;
  max-width: none;
}
.mk-spin-side > img:first-child {
  inset: 0;
  width: 100%;
  height: 100%;
}
.mk-spin-front,
.mk-spin-back {
  width: var(--w);
  height: var(--h);
}
.mk-spin-left,
.mk-spin-right {
  width: var(--d);
  height: var(--h);
  filter: brightness(0.94);
}
.mk-spin-top {
  width: var(--w);
  height: var(--d);
}
.mk-spin-front {
  transform: translate(-50%, -50%) translateZ(calc(var(--d) / 2));
}
.mk-spin-back {
  transform: translate(-50%, -50%) rotateY(180deg) translateZ(calc(var(--d) / 2));
}
.mk-spin-right {
  transform: translate(-50%, -50%) rotateY(90deg) translateZ(calc(var(--w) / 2));
}
.mk-spin-left {
  transform: translate(-50%, -50%) rotateY(-90deg) translateZ(calc(var(--w) / 2));
}
.mk-spin-top {
  transform: translate(-50%, -50%) rotateX(90deg) translateZ(calc(var(--h) / 2));
}
/* a plain body just under the photographs closes the rounded corners of the cut-outs */
.mk-spin-core {
  background: #e9ebee;
  border-radius: 1.2cqw;
  filter: none;
  scale: 0.955;
}
.mk-spin-core.mk-spin-left,
.mk-spin-core.mk-spin-right {
  background: #dfe2e6;
}
.mk-spin-bottle {
  left: 70%;
  top: -69%;
  width: 32%;
  height: 139%;
  transform: translateZ(1.6cqw);
}
.mk-spin-hand {
  width: calc(var(--w) * 0.101);
  height: calc(var(--h) * 0.853);
  transform: translate(-50%, -100%) translate3d(calc(var(--w) * 0.414), calc(var(--h) * -0.5), calc(var(--d) / 2 + 0.3cqw));
}
.mk-spin-jar {
  width: 0;
  height: 0;
  transform: translate3d(calc(var(--w) * -0.245), calc(var(--h) * -0.48), calc(var(--d) * 0.05));
}
.mk-spin-jar--b {
  transform: translate3d(calc(var(--w) * 0.265), calc(var(--h) * -0.48), calc(var(--d) * 0.05));
}
.mk-spin-jar > img {
  position: absolute;
  left: 0;
  top: 0;
  width: calc(var(--w) * 0.333);
  height: calc(var(--h) * 0.636);
  max-width: none;
  margin: calc(var(--h) * -0.636) 0 0 calc(var(--w) * -0.1665);
  transform: rotateY(28deg);
  animation: mk-spin-back 18s linear infinite paused;
}
.mk-spin-shadow {
  width: calc(var(--w) * 1.5);
  height: calc(var(--d) * 1.5);
  background: radial-gradient(closest-side, rgba(3, 20, 45, 0.5), rgba(3, 20, 45, 0.18) 55%, transparent);
  transform: translate(-50%, -50%) rotateX(90deg) translateZ(calc(var(--h) * -0.52));
}
@keyframes mk-spin {
  from { transform: rotateY(-28deg); }
  to { transform: rotateY(332deg); }
}
@keyframes mk-spin-back {
  from { transform: rotateY(28deg); }
  to { transform: rotateY(-332deg); }
}
@media (prefers-reduced-motion: reduce) {
  .mk-spin-model,
  .mk-spin-jar > img {
    animation: none;
  }
}

/* Transparent product film in place of a stage (AquaCare Twin): the product cut out of its
   background, landscape, looping forwards and backwards. */
.mk-clip {
  position: relative;
  width: 112%;
  max-width: 34rem;
  aspect-ratio: 1440 / 980;
  margin: -1rem 0 0.5rem -6%;
  cursor: pointer;
}
.mk-clip > video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: none;
}
@media (max-width: 767px) {
  .mk-clip {
    width: 100%;
    margin: 0 0 0.5rem;
  }
}
/* the same kind of film on the AquaCare rail cards: square, in the stage's place */
.mk-rail-card .mk-clip.mk-rail-clip {
  width: 78%;
  max-width: none;
  aspect-ratio: 1 / 1;
  margin: 0 auto 0.75rem;
}
@media (min-width: 768px) {
  .mk-rail-card:has(.mk-rail-clip) {
    flex-basis: 13rem;
  }
}
/* AquaCare: no empty room kept at the end of the chapter for the "read more" texts (it left a
   ~580px gap above Instagram); the page grows while one is open and the engine re-measures after. */
[data-chapter="MaritimeChapter"]:after {
  height: 0;
}

/* Short demo request on every brand page: a small glass card that stays on the right edge
   and glides along with the scroll; it can be folded into a tab. */
.mk-lead {
  --demo-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --demo-accent: #a9d4ff;
  --lag: 0px;
  position: fixed;
  top: 50%;
  right: 1.5rem;
  z-index: 4;
  width: 17.5rem;
  transform: translate3d(0, calc(-56% + var(--lag)), 0);
  pointer-events: none;
}
.mk-lead-card {
  --gx: 80%;
  --gy: 0%;
  position: relative;
  display: grid;
  gap: 1.1rem;
  padding: 1.5rem 1.35rem 1.35rem;
  box-sizing: border-box;
  color: #fff;
  border-radius: 1.4rem;
  background: linear-gradient(150deg, rgba(9, 28, 56, 0.86), rgba(22, 58, 102, 0.74));
  box-shadow: 0 2rem 4rem -1.5rem rgba(3, 14, 30, 0.75), inset 0 0 0 1px rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(18px) saturate(1.2);
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
  overflow: hidden;
  opacity: 0;
  transform: translateX(120%);
  pointer-events: none;
  transition: opacity 0.9s ease, transform 1.2s var(--demo-ease);
}
.mk-lead.is-in:not(.is-folded) .mk-lead-card {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}
.mk-lead-card *,
.mk-lead-card *::before {
  color: inherit;
  text-shadow: none !important;
}
/* a soft light under the pointer */
.mk-lead-glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(18rem circle at var(--gx) var(--gy), rgba(169, 212, 255, 0.22), transparent 60%);
  pointer-events: none;
}
/* a line of light runs along the top edge */
.mk-lead-edge {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(169, 212, 255, 0.95), transparent);
  background-size: 40% 100%;
  background-repeat: no-repeat;
  animation: mk-lead-edge 6s linear infinite;
  pointer-events: none;
}
@keyframes mk-lead-edge {
  from { background-position: -70% 0; }
  to { background-position: 170% 0; }
}
.mk-lead-copy,
.mk-lead-fields {
  position: relative;
  min-width: 0;
}
.mk-lead-kicker {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin: 0 0 0.7rem;
  font-size: 0.625rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--demo-accent) !important;
}
.mk-lead-kicker-line {
  width: 0;
  height: 1px;
  background: currentColor;
  transition: width 1.2s var(--demo-ease) 0.6s;
}
.mk-lead.is-in .mk-lead-kicker-line {
  width: 1.75rem;
}
.mk-lead-title {
  margin: 0;
  font-family: "Century Gothic", sans-serif;
  font-size: 1.125rem;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: 0.01em;
  text-transform: none;
}
.mk-lead-title strong {
  font-weight: 400;
  color: transparent !important;
  background: linear-gradient(100deg, #fff 20%, #a9d4ff 50%, #fff 80%);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  animation: mk-lead-sheen 6s ease-in-out infinite;
}
@keyframes mk-lead-sheen {
  0%, 100% { background-position: 100% 0; }
  50% { background-position: 0 0; }
}
.mk-lead-text {
  margin: 0.55rem 0 0;
  font-size: 0.75rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.75) !important;
}
.mk-lead-fields {
  display: grid;
  gap: 0.6rem;
}
.mk-lead-card .mk-demo-field > input {
  padding: 1.15rem 0.8rem 0.4rem;
  font-size: 0.875rem;
}
.mk-lead-card .mk-demo-field > span {
  top: 0.8rem;
  left: 0.85rem;
  font-size: 0.8125rem;
  color: rgba(255, 255, 255, 0.6) !important;
}
.mk-lead-card .mk-demo-field > input:focus + span,
.mk-lead-card .mk-demo-field > input:not(:placeholder-shown) + span {
  color: var(--demo-accent) !important;
  transform: translateY(-0.5rem) scale(0.72);
}
.mk-lead-card.is-checked .mk-demo-field > input:required:placeholder-shown {
  border-color: #ffb4a8;
  animation: mk-demo-shake 0.45s;
}
.mk-lead-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.4rem 0.8rem;
  margin-top: 0.25rem;
}
/* the white button keeps its dark label, also on the page whose text is all white */
.mk-lead-card .mk-demo-btn,
main[data-scene="DoctorsEyes"] .mk-lead-card .mk-demo-btn,
main[data-scene="DoctorsEyes"] .mk-lead-card .mk-demo-btn * {
  color: #0c1c30 !important;
}
.mk-lead-card .mk-demo-btn {
  padding: 0.7rem 1.25rem;
  font-size: 0.75rem;
}
.mk-lead-more {
  font-size: 0.6875rem;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.75) !important;
  text-decoration: underline;
  text-underline-offset: 0.3em;
  transition: color 0.3s;
}
.mk-lead-more:hover {
  color: #fff !important;
}
.mk-lead-card .mk-demo-status {
  margin: 0;
  font-size: 0.6875rem;
  line-height: 1.45;
}
.mk-lead-card .mk-demo-status:empty {
  display: none;
}
.mk-lead-card .mk-demo-status.is-error {
  color: #ffb4a8 !important;
}
/* fold the card away … */
.mk-lead-close {
  position: absolute;
  top: 0.7rem;
  right: 0.7rem;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  cursor: pointer;
  transition: background-color 0.3s, transform 0.5s var(--demo-ease);
}
.mk-lead-close:hover {
  background: rgba(255, 255, 255, 0.18);
  transform: rotate(90deg);
}
.mk-lead-close > span {
  width: 0.6rem;
  height: 1px;
  background: #fff;
}
/* … into a tab on the edge of the screen */
.mk-lead-tab {
  position: absolute;
  top: 50%;
  right: -1.5rem;
  padding: 1.1rem 0.7rem;
  color: #fff !important;
  font: inherit;
  font-size: 0.6875rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  writing-mode: vertical-rl;
  border: 0;
  border-radius: 0.9rem 0 0 0.9rem;
  background: linear-gradient(180deg, rgba(9, 28, 56, 0.9), rgba(22, 58, 102, 0.82));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16), 0 1rem 2rem -1rem rgba(3, 14, 30, 0.8);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  cursor: pointer;
  opacity: 0;
  transform: translate(110%, -50%);
  pointer-events: none;
  transition: opacity 0.6s ease, transform 0.9s var(--demo-ease), padding 0.4s var(--demo-ease);
}
.mk-lead-tab > span {
  color: inherit !important;
  text-shadow: none !important;
}
.mk-lead.is-in.is-folded .mk-lead-tab {
  opacity: 1;
  transform: translate(0, -50%);
  pointer-events: auto;
}
.mk-lead-tab:hover {
  padding-right: 1.1rem;
}
/* narrow screens: the card opens from the bottom edge */
@media (max-width: 899px) {
  .mk-lead {
    top: auto;
    right: 0.75rem;
    bottom: 0.75rem;
    left: 0.75rem;
    width: auto;
    transform: none;
  }
  .mk-lead-card {
    transform: translateY(120%);
  }
  .mk-lead-tab {
    top: auto;
    right: -0.75rem;
    bottom: 42vh;
    transform: translate(110%, 0);
  }
  .mk-lead.is-in.is-folded .mk-lead-tab {
    transform: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .mk-lead-card,
  .mk-lead-tab {
    transition: none;
  }
  .mk-lead-edge,
  .mk-lead-title strong {
    animation: none;
  }
}

/* No glow behind pictures and logos: the breathing lights behind products, hero devices and
   logos are switched off, and the coloured halo is dropped from the shadows (the ground
   shadow under each product stays). */
.mk-stage-glow,
.mk-herodevice-glow,
.mk-aqlogo-glow,
.mk-herologo-glow,
.mk-footlogo-glow {
  display: none !important;
  animation: none !important;
}
.mk-stage.is-cut.is-hover .mk-stage-img.is-active {
  filter: drop-shadow(0 2.5rem 2rem rgba(0, 6, 14, 0.7));
}
.mk-light .mk-stage.is-cut.is-hover .mk-stage-img.is-active {
  filter: drop-shadow(0 2.5rem 2rem rgba(18, 48, 88, 0.38));
}
main[data-scene="DoctorsEyes"] .hero .logo {
  filter: none;
}

/* No line of light crossing pictures and logos either: the sweep over products, hero devices
   and logos and the highlight under the pointer are switched off. */
.mk-stage-sweep,
.mk-stage-shine,
.mk-stage-spot,
.mk-herodevice-shine,
.mk-aqlogo-shine,
.mk-aqlogo-edge,
.mk-herologo-shine,
.mk-herologo-edge,
.mk-footlogo-shine,
.mk-footlogo-edge {
  display: none !important;
  animation: none !important;
}

/* Demo Planla in the "hands touch" design: a white page, a soft film in the background, a human
   and a robot hand reaching for each other across the title, pill-shaped controls. The form
   keeps its markup and steps; only its dress changes. */
.mk-demo.mk-touch {
  --demo-accent: #111;
  --touch-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --touch-muted: #6e6e73;
  position: relative;
  min-height: 0;
  color: #000;
  background: #fff;
  font-family: "Century Gothic", sans-serif;
  letter-spacing: 0;
}
.mk-touch *,
.mk-touch *::before,
.mk-touch *::after {
  box-sizing: border-box;
}
.mk-touch-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  animation: mk-touch-bg 1.8s var(--touch-ease) both;
}
.mk-touch-bg video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@keyframes mk-touch-bg {
  from { opacity: 0; transform: scale(1.05); }
}
.mk-touch-fade {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
  height: 220px;
  pointer-events: none;
  background: linear-gradient(to top, #fff 0%, rgba(255, 255, 255, 0.8) 48%, rgba(255, 255, 255, 0) 100%);
}
.mk-touch-hero {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: calc(100 * var(--svh, 1vh));
  min-height: 34rem;
  overflow: hidden;
}
.mk-touch-hands {
  position: absolute;
  inset: 0;
  z-index: 3;
  overflow: hidden;
  pointer-events: none;
  user-select: none;
}
.mk-touch-hands-frame {
  position: absolute;
  top: calc(27.5% + 120px);
  left: 0;
  width: 100%;
  aspect-ratio: 3;
  transform: translateY(-50%) translate3d(var(--tx, 0px), var(--ty, 0px), 0);
  transition: transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}
.mk-touch-hands-frame > img,
.mk-touch-hands-frame > canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}
.mk-touch-hands-frame > canvas,
.mk-touch-hands[data-ready="true"] .mk-touch-hands-frame > img {
  opacity: 0;
}
.mk-touch-hands[data-ready="true"] .mk-touch-hands-frame > canvas {
  opacity: 1;
}
.mk-touch-hands > video {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}
.mk-touch-headline {
  position: relative;
  z-index: 2;
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  min-height: 0;
  padding: 6rem 1.5rem 0;
  text-align: center;
}
.mk-touch-title {
  margin: 3.5rem 0 0;
  font-size: clamp(2rem, 4.6vw, 5.5rem);
  font-weight: 400;
  line-height: 0.98;
  letter-spacing: -0.02em;
  text-transform: none;
  color: #000;
  animation: mk-touch-rise 1.4s var(--touch-ease) 0.2s both;
}
.mk-touch-title > span {
  display: block;
}
.mk-touch-title > span + span {
  margin-top: 0.12em;
}
.mk-touch-title i {
  margin-right: 0.18em;
  font-style: normal;
  text-transform: lowercase;
  color: #2d628c;
}
@keyframes mk-touch-rise {
  from { opacity: 0; transform: translateY(15px); }
}
.mk-touch-foot {
  position: relative;
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.75rem;
  width: 100%;
  max-width: 80rem;
  margin: 0 auto;
  padding: 2.5rem 2rem;
  animation: mk-touch-up 1s var(--touch-ease) 0.5s both;
}
@keyframes mk-touch-up {
  from { opacity: 0; transform: translateY(20px); }
}
.mk-touch-foot-copy {
  max-width: 21rem;
}
.mk-touch-over {
  margin: 0 0 0.5rem;
  font-size: 0.72rem;
  line-height: 1.4;
  color: var(--touch-muted);
}
.mk-touch-lead {
  margin: 0;
  font-size: 1.2rem;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: #000;
}
.mk-touch-rule {
  display: none;
  width: 1px;
  height: 4rem;
  background: rgba(0, 0, 0, 0.08);
}
.mk-touch-tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
}
.mk-touch-tag {
  padding: 0.85rem 1.5rem;
  font-size: 0.72rem;
  color: #000;
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 999px;
  background: #fff;
}
.mk-touch-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.25rem 1.25rem 0.25rem 0.25rem;
  color: #fff;
  font: inherit;
  font-size: 0.72rem;
  border: 0;
  border-radius: 999px;
  background: #000;
  cursor: pointer;
  transition: background-color 0.2s, transform 0.4s var(--touch-ease);
}
.mk-touch-cta:hover {
  background: #27272a;
  transform: translateY(-2px);
}
.mk-touch-cta-icon {
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  color: #000;
  border-radius: 50%;
  background: #fff;
  animation: mk-touch-nudge 2.4s ease-in-out 2s infinite;
}
@keyframes mk-touch-nudge {
  0%, 60%, 100% { transform: none; }
  30% { transform: translateY(3px); }
}
/* second part: what happens next, and the form */
.mk-touch-form {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
  width: 100%;
  max-width: 86rem;
  min-height: calc(100 * var(--svh, 1vh));
  margin: 0 auto;
  padding: 7.5rem 1.5rem 2rem;
}
.mk-touch-grid {
  display: grid;
  flex: 1;
  gap: 2.5rem;
  align-items: center;
}
.mk-touch-side,
.mk-touch .mk-demo-card,
.mk-touch-brands {
  opacity: 0;
  transform: translateY(2rem);
  transition: opacity 1s ease, transform 1.3s var(--touch-ease);
}
.mk-touch-form.is-in .mk-touch-side,
.mk-touch-form.is-in .mk-demo-card,
.mk-touch-form.is-in .mk-touch-brands {
  opacity: 1;
  transform: none;
}
.mk-touch-form.is-in .mk-demo-card { transition-delay: 0.15s; }
.mk-touch-form.is-in .mk-touch-brands { transition-delay: 0.3s; }
.mk-touch-h2 {
  max-width: 9em;
  margin: 0;
  font-size: clamp(2.2rem, 4vw, 3.6rem);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.02em;
  text-transform: none;
  color: #000;
}
.mk-touch-steps {
  display: grid;
  gap: 1.5rem;
  margin: 2.5rem 0 0;
  padding: 0;
  list-style: none;
}
.mk-touch-steps .mk-touch-over {
  font-size: 0.8rem;
}
.mk-touch-detail {
  max-width: 22rem;
  margin: 0;
  font-size: 1.05rem;
  line-height: 1.4;
  color: #000;
}
.mk-touch-brands {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem 1rem;
  margin: 0;
  padding: 1.25rem 0 0;
  font-size: 0.9rem;
  line-height: 1.2;
  list-style: none;
  color: #000;
  border-top: 1px solid rgba(0, 0, 0, 0.15);
}
/* the form in the same dress: white card, grey pills, black button */
.mk-touch .mk-demo-card {
  width: 100%;
  max-width: 34rem;
  justify-self: end;
  color: #000;
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 2rem;
  background: rgba(255, 255, 255, 0.82);
  box-shadow: 0 2.5rem 5rem -2.5rem rgba(0, 0, 0, 0.25);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  animation: none;
}
.mk-touch .mk-demo-glow,
.mk-touch .mk-demo-btn::after {
  display: none;
}
.mk-touch .mk-demo-form-title {
  color: #000;
  letter-spacing: -0.01em;
  text-transform: none;
}
.mk-touch .mk-demo-count,
.mk-touch .mk-demo-tabs,
.mk-touch .mk-demo-brands > legend,
.mk-touch .mk-demo-field > span {
  color: var(--touch-muted);
}
.mk-touch .mk-demo-count b,
.mk-touch .mk-demo-tabs li.is-active {
  color: #000;
}
.mk-touch .mk-demo-progress {
  background: rgba(0, 0, 0, 0.08);
}
.mk-touch .mk-demo-progress span {
  background: #000;
}
.mk-touch .mk-demo-field > input,
.mk-touch .mk-demo-field > textarea {
  color: #000;
  border-color: rgba(0, 0, 0, 0.03);
  border-radius: 1.6rem;
  background: #f4f4f6;
  color-scheme: light;
}
.mk-touch .mk-demo-field > input {
  padding-inline: 1.3rem;
}
.mk-touch .mk-demo-field > textarea {
  padding-inline: 1.3rem;
}
.mk-touch .mk-demo-field > span {
  left: 1.35rem;
}
.mk-touch .mk-demo-field > input:hover,
.mk-touch .mk-demo-field > textarea:hover {
  border-color: rgba(0, 0, 0, 0.12);
  background: #eaeaef;
}
.mk-touch .mk-demo-field > input:focus,
.mk-touch .mk-demo-field > textarea:focus {
  border-color: #000;
  background: #fff;
  box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.06);
}
.mk-touch .mk-demo-form.is-checked .mk-demo-field > input:required:placeholder-shown {
  border-color: #d9482b;
}
.mk-touch .mk-demo-chip span {
  color: #000;
  border-color: rgba(0, 0, 0, 0.15);
  background: #fff;
}
.mk-touch .mk-demo-chip:hover span {
  border-color: #000;
  background: #fff;
}
.mk-touch .mk-demo-chip input:checked + span {
  color: #fff;
  border-color: #000;
  background: #000;
}
.mk-touch .mk-demo-consent,
.mk-touch .mk-demo-consent a,
.mk-touch .mk-demo-status {
  color: rgba(0, 0, 0, 0.75);
}
.mk-touch .mk-demo-consent input {
  accent-color: #000;
}
.mk-touch .mk-demo-status.is-error {
  color: #c23a1e;
}
.mk-touch .mk-demo-btn {
  color: #fff;
  border-color: #000;
  background: #000;
}
.mk-touch .mk-demo-btn:hover {
  background: #27272a;
  box-shadow: 0 14px 30px -14px rgba(0, 0, 0, 0.5);
}
.mk-touch .mk-demo-btn--ghost {
  color: #000;
  border-color: rgba(0, 0, 0, 0.03);
  background: #f4f4f6;
}
.mk-touch .mk-demo-btn--ghost:hover {
  background: #eaeaef;
  box-shadow: none;
}
.mk-touch .mk-demo-btn--link,
.mk-touch .mk-demo-btn--link:hover {
  color: rgba(0, 0, 0, 0.7);
  border-color: transparent;
  background: none;
}
@media (min-width: 768px) {
  .mk-touch-foot {
    flex-direction: row;
    align-items: flex-end;
    padding: 3.5rem 4rem;
  }
  .mk-touch-headline {
    padding-top: 0;
  }
  /* the title sits just under the meeting fingertips */
  .mk-touch-title {
    margin-top: 26vh;
  }
  .mk-touch-form {
    padding: 8.5rem 3rem 2.25rem;
  }
  .mk-touch-brands {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
  .mk-touch-brands li:last-child {
    text-align: right;
  }
}
@media (min-width: 1024px) {
  .mk-touch-rule {
    display: block;
  }
  .mk-touch-grid {
    grid-template-columns: 1fr 1fr;
    gap: 4.5rem;
  }
}
@media (max-width: 639px) {
  .mk-touch-hands-frame {
    top: calc(33% + 205px);
  }
  .mk-touch-title {
    font-size: 7.5vw;
  }
}
@media (prefers-reduced-motion: reduce) {
  .mk-touch-bg,
  .mk-touch-title,
  .mk-touch-foot,
  .mk-touch-cta-icon {
    animation: none;
  }
  .mk-touch-side,
  .mk-touch .mk-demo-card,
  .mk-touch-brands {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* On the white Demo Planla page the header and the corner buttons turn dark
   (not while the full-screen menu is open: it brings its own background). */
html.mk-main-touch body #header:not(.is-open):not(.open) .nav-link,
html.mk-main-touch body #header:not(.is-open):not(.open) .nav-link span,
html.mk-main-touch body #header:not(.is-open):not(.open) .news-w p,
html.mk-main-touch body #header:not(.is-open):not(.open) .menu-cta p,
html.mk-main-touch body #header:not(.is-open):not(.open) .menu-cta span {
  color: #000 !important;
}
html.mk-main-touch body #header:not(.is-open):not(.open) .navbar,
html.mk-main-touch body #header:not(.is-open):not(.open) .dots-w .dot {
  background-color: #000 !important;
}
html.mk-main-touch body .buttons-container .scroll-top,
html.mk-main-touch body .buttons-container .sound,
html.mk-main-touch body .buttons-container .mk-wa {
  border-color: rgba(0, 0, 0, 0.22) !important;
}
html.mk-main-touch body .buttons-container .scroll-top svg *,
html.mk-main-touch body .buttons-container .sound svg * {
  stroke: #000 !important;
}

/* Demo Planla, livelier: the title rises word by word, rings of light spread when the
   fingertips meet, the hands drift with the pointer, the button calls for attention. */
.mk-touch-bg video {
  transform: translate3d(calc(var(--tx, 0px) * -0.5), calc(var(--ty, 0px) * -0.5), 0) scale(1.04);
  transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.mk-touch-title {
  animation: none;
}
.mk-touch-title > span {
  overflow: hidden;
  padding-bottom: 0.12em;
}
.mk-touch-title > span > b {
  display: block;
  font-weight: inherit;
  transform: translateY(115%);
  animation: mk-touch-word 1.3s var(--touch-ease) 0.25s forwards;
}
.mk-touch-title > span + span > b {
  animation-delay: 0.42s;
}
@keyframes mk-touch-word {
  to { transform: none; }
}
/* the grey word catches a slow light */
.mk-touch-title i {
  color: transparent;
  /* the navy of the Yirro page (#2d628c); the passing light is its paler tone */
  background: linear-gradient(100deg, #2d628c 0%, #2d628c 40%, #81a0bb 50%, #2d628c 60%, #2d628c 100%) 100% 0 / 280% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  animation: mk-touch-sheen 6s ease-in-out 2s infinite;
}
@keyframes mk-touch-sheen {
  0%, 55% { background-position: 100% 0; }
  100% { background-position: 0 0; }
}
/* a short lift of the whole title at the touch */
.mk-touch.is-touching .mk-touch-title {
  animation: mk-touch-beat 1.4s var(--touch-ease);
}
@keyframes mk-touch-beat {
  0% { transform: none; letter-spacing: -0.02em; }
  25% { transform: scale(1.018); letter-spacing: -0.012em; }
  100% { transform: none; letter-spacing: -0.02em; }
}
.mk-touch-spark {
  position: absolute;
  top: 28.8%;
  left: 50.1%;
  width: 0;
  height: 0;
  pointer-events: none;
}
.mk-touch-spark > i,
.mk-touch-spark > b {
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 50%;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.05);
}
.mk-touch-spark > i {
  width: 34vw;
  height: 34vw;
  border: 1px solid rgba(40, 110, 210, 0.55);
  box-shadow: 0 0 2.5rem rgba(90, 160, 255, 0.35), inset 0 0 2.5rem rgba(90, 160, 255, 0.18);
}
.mk-touch-spark > b {
  width: 9vw;
  height: 9vw;
  background: radial-gradient(closest-side, rgba(255, 255, 255, 0.95), rgba(140, 195, 255, 0.55) 45%, rgba(140, 195, 255, 0) 100%);
}
.mk-touch-spark.is-on > i {
  animation: mk-touch-ring 1.9s cubic-bezier(0.2, 0.7, 0.2, 1) forwards;
}
.mk-touch-spark.is-on > i:nth-child(2) { animation-delay: 0.18s; }
.mk-touch-spark.is-on > i:nth-child(3) { animation-delay: 0.36s; }
.mk-touch-spark.is-on > b {
  animation: mk-touch-flash 1.1s ease-out forwards;
}
@keyframes mk-touch-ring {
  0% { opacity: 0.9; transform: translate(-50%, -50%) scale(0.03); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1); }
}
@keyframes mk-touch-flash {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.2); }
  18% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.6); }
}
/* the one button left in the first screen: bigger, with a ring that keeps calling */
.mk-touch-cta {
  position: relative;
  gap: 0.9rem;
  padding: 0.35rem 1.9rem 0.35rem 0.35rem;
  font-size: 0.875rem;
}
.mk-touch-cta-icon {
  width: 3rem;
  height: 3rem;
}
.mk-touch-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 1px solid rgba(0, 0, 0, 0.5);
  animation: mk-touch-call 2.6s ease-out 1.5s infinite;
  pointer-events: none;
}
@keyframes mk-touch-call {
  0% { opacity: 0.8; transform: scale(1); }
  70%, 100% { opacity: 0; transform: scale(1.22, 1.55); }
}
@media (max-width: 639px) {
  .mk-touch-spark > i { width: 60vw; height: 60vw; }
  .mk-touch-spark > b { width: 16vw; height: 16vw; }
}
@media (prefers-reduced-motion: reduce) {
  .mk-touch-title > span > b {
    transform: none;
    animation: none;
  }
  .mk-touch-title i,
  .mk-touch-cta::before,
  .mk-touch.is-touching .mk-touch-title {
    animation: none;
  }
  .mk-touch-title i {
    color: #2d628c;
    background: none;
  }
  .mk-touch-spark {
    display: none;
  }
}

/* Demo Planla: the brands at the foot of the page as logos, passing by in an endless band.
   Every logo is shown in one ink so that white and coloured marks sit together on white;
   under the pointer the band slows to a stop and the logo comes forward. */
.mk-touch .mk-touch-brands {
  display: block;
  padding: 1.6rem 0 0.4rem;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%);
}
.mk-touch-logos {
  display: flex;
  align-items: center;
  gap: 4.5rem;
  width: max-content;
  animation: mk-touch-logos 38s linear infinite;
}
.mk-touch-logos-copy {
  display: flex;
  align-items: center;
  gap: 4.5rem;
}
.mk-touch-brands:hover .mk-touch-logos {
  animation-play-state: paused;
}
.mk-touch-logos img {
  flex: none;
  height: 2rem;
  width: calc(2rem * var(--mk-ratio, 3));
  max-width: none;
  object-fit: contain;
  filter: brightness(0);
  opacity: 0.45;
  transition: opacity 0.4s ease, transform 0.6s var(--touch-ease);
  animation: mk-touch-logo 5.4s ease-in-out infinite;
}
.mk-touch-logos img:nth-child(2n) { animation-delay: -1.8s; }
.mk-touch-logos img:nth-child(3n) { animation-delay: -3.6s; }
.mk-touch-logos img:hover {
  opacity: 1;
  transform: scale(1.12);
  animation-play-state: paused;
}
/* one third of the band is one full set of logos */
@keyframes mk-touch-logos {
  to { transform: translateX(calc((-100% - 4.5rem) / 3)); }
}
/* each logo breathes a little, so the band never looks like a still strip */
@keyframes mk-touch-logo {
  0%, 100% { opacity: 0.38; }
  50% { opacity: 0.7; }
}
@media (max-width: 767px) {
  .mk-touch-logos,
  .mk-touch-logos-copy {
    gap: 2.75rem;
  }
  .mk-touch-logos img {
    height: 1.5rem;
    width: calc(1.5rem * var(--mk-ratio, 3));
  }
  @keyframes mk-touch-logos {
    to { transform: translateX(calc((-100% - 2.75rem) / 3)); }
  }
}
@media (prefers-reduced-motion: reduce) {
  .mk-touch-logos,
  .mk-touch-logos img {
    animation: none;
  }
}

/* Yirro: the page lies on a sunset sky that turns to violet dusk, so every text is white
   (as on the Doctorseyes page) and the footer sits on the scene itself. */
main[data-scene="WhoWeAre"] ~ #footer {
  background: linear-gradient(rgba(3, 14, 30, 0) 0, rgba(3, 14, 30, 0.38) 45%, rgba(3, 14, 30, 0.5) 100%);
}
main[data-scene="Maritime"] ~ #footer .mk-foot-item,
main[data-scene="WhoWeAre"] ~ #footer .mk-foot-item,
main[data-scene="Maritime"] ~ #footer .mk-foot-icon,
main[data-scene="WhoWeAre"] ~ #footer .mk-foot-icon,
main[data-scene="Maritime"] ~ #footer .mk-foot-title,
main[data-scene="WhoWeAre"] ~ #footer .mk-foot-title,
main[data-scene="Maritime"] ~ #footer .mk-foot-lines,
main[data-scene="WhoWeAre"] ~ #footer .mk-foot-lines,
main[data-scene="Maritime"] ~ #footer .mk-foot-lines a,
main[data-scene="WhoWeAre"] ~ #footer .mk-foot-lines a,
main[data-scene="Maritime"] ~ #footer .mk-foot-legal,
main[data-scene="WhoWeAre"] ~ #footer .mk-foot-legal {
  color: #fff;
}
main[data-scene="Maritime"] ~ #footer .mk-foot-icon,
main[data-scene="WhoWeAre"] ~ #footer .mk-foot-icon,
main[data-scene="Maritime"] ~ #footer .mk-foot-icon::after,
main[data-scene="WhoWeAre"] ~ #footer .mk-foot-icon::after {
  border-color: rgba(255, 255, 255, 0.5);
}
main[data-scene="Maritime"] ~ #footer .mk-foot-item:hover .mk-foot-icon,
main[data-scene="WhoWeAre"] ~ #footer .mk-foot-item:hover .mk-foot-icon {
  border-color: #fff;
  background: #fff;
  color: #2d628c;
}
main[data-scene="Maritime"] ~ #footer .line,
main[data-scene="WhoWeAre"] ~ #footer .line {
  background-color: rgba(255, 255, 255, 0.3);
}
main[data-scene="Maritime"] ~ #footer .mk-footlogo,
main[data-scene="WhoWeAre"] ~ #footer .mk-footlogo {
  --mk-logo: var(--mk-logo-dark);
}

/* Smile Line page only: the same, over that page's own dark scene. */

main[data-scene="WhoWeAre"],
main[data-scene="WhoWeAre"] *:not(.arrow-container):not(.arrow-container *) {
  color: #fff !important;
}
main[data-scene="WhoWeAre"] h2,
main[data-scene="WhoWeAre"] h3,
main[data-scene="WhoWeAre"] p,
main[data-scene="WhoWeAre"] span,
main[data-scene="WhoWeAre"] .index-who-we-are {
  text-shadow: 0 1px 2px rgba(40, 22, 70, 0.55), 0 0 18px rgba(40, 22, 70, 0.45);
}
main[data-scene="WhoWeAre"] .mk-stage-dot::before {
  background: rgba(255, 255, 255, 0.4);
}
main[data-scene="WhoWeAre"] .mk-stage-dot.is-active::before {
  background: #fff;
}
html[data-mk-scene="WhoWeAre"] body #header .nav-link,
html[data-mk-scene="WhoWeAre"] body #header .news-w p,
html[data-mk-scene="WhoWeAre"] body #header .menu-cta p {
  color: #fff !important;
  text-shadow: 0 1px 2px rgba(40, 22, 70, 0.55), 0 0 18px rgba(40, 22, 70, 0.45);
}
main[data-scene="WhoWeAre"] .mk-lead-card .mk-demo-btn,
main[data-scene="WhoWeAre"] .mk-lead-card .mk-demo-btn * {
  color: #0c1c30 !important;
}

/* A product film that plays by itself (AquaCare): an upright card in a glass frame, rising into
   view, with the product name, a sound switch and a thin line showing how far the film has run. */
.mk-film {
  display: flex;
  justify-content: center;
  width: 100%;
  margin: 1rem 0 5rem;
  perspective: 70rem;
}
.mk-film-card {
  position: relative;
  width: min(100%, 23rem);
  aspect-ratio: 9 / 16;
  padding: 0.5rem;
  border-radius: 2.1rem;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0.05));
  box-shadow: 0 3rem 6rem -2rem rgba(1, 10, 24, 0.85), inset 0 0 0 1px rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  opacity: 0;
  transform: translateY(4rem) rotateX(8deg) scale(0.94);
  transition: opacity 1.1s ease, transform 1.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.mk-film.is-in .mk-film-card {
  opacity: 1;
  transform: none;
}
.mk-film-card > video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 1.65rem;
  background: #05080d;
}
.mk-film-shade {
  position: absolute;
  inset: 0.5rem;
  border-radius: 1.65rem;
  background: linear-gradient(0deg, rgba(2, 8, 18, 0.7) 0%, rgba(2, 8, 18, 0) 26%);
  pointer-events: none;
}
.mk-film-bar {
  position: absolute;
  right: 1.5rem;
  bottom: 1.6rem;
  left: 1.6rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.mk-film-label {
  font-size: 0.75rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #fff;
}
.mk-film-sound {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 50%;
  background: rgba(4, 14, 28, 0.45);
  cursor: pointer;
  transition: background-color 0.3s, border-color 0.3s, transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.mk-film-sound:hover {
  background: rgba(255, 255, 255, 0.2);
  border-color: #fff;
  transform: scale(1.08);
}
.mk-film .mk-film-wave,
.mk-film.is-loud .mk-film-mute {
  display: none;
}
.mk-film.is-loud .mk-film-wave {
  display: inline;
}
.mk-film-progress {
  position: absolute;
  right: 1.6rem;
  bottom: 1.05rem;
  left: 1.6rem;
  height: 2px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.22);
  overflow: hidden;
}
.mk-film-progress > i {
  display: block;
  height: 100%;
  background: #fff;
  transform: scaleX(0);
  transform-origin: left center;
}
@media (max-width: 767px) {
  .mk-film {
    margin: 0.5rem 0 3.5rem;
  }
  .mk-film-card {
    width: min(100%, 19rem);
  }
}
@media (prefers-reduced-motion: reduce) {
  .mk-film-card {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* The film on wide screens: a small card fixed on the left edge. It slides in from the left once
   the page is scrolled past the first screen and stays there; the round button puts it away. */
.mk-film-close {
  position: absolute;
  top: 1.1rem;
  right: 1.1rem;
  display: none;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 50%;
  background: rgba(4, 14, 28, 0.5);
  cursor: pointer;
  transition: background-color 0.3s, transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.mk-film-close:hover {
  background: rgba(255, 255, 255, 0.22);
  transform: rotate(90deg);
}
.mk-film-close > span,
.mk-film-close > span::before {
  display: block;
  width: 0.7rem;
  height: 1px;
  background: #fff;
}
.mk-film-close > span {
  transform: rotate(45deg);
}
.mk-film-close > span::before {
  content: "";
  transform: rotate(90deg);
}
@media (min-width: 900px) {
  .mk-film {
    position: fixed;
    top: 50%;
    left: 1.5rem;
    z-index: 4;
    display: block;
    width: 14rem;
    margin: 0;
    transform: translateY(-50%);
    perspective: none;
    pointer-events: none;
  }
  .mk-film-card {
    width: 100%;
    padding: 0.35rem;
    border-radius: 1.5rem;
    transform: translateX(-130%);
    transition: opacity 0.8s ease, transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
  }
  .mk-film.is-in .mk-film-card {
    pointer-events: auto;
  }
  .mk-film-card > video,
  .mk-film-shade {
    border-radius: 1.2rem;
  }
  .mk-film-shade {
    inset: 0.35rem;
  }
  .mk-film-close {
    display: grid;
  }
  .mk-film-bar {
    right: 0.95rem;
    bottom: 1.15rem;
    left: 1rem;
  }
  .mk-film-label {
    font-size: 0.5625rem;
  }
  .mk-film-sound {
    width: 2rem;
    height: 2rem;
  }
  .mk-film-progress {
    right: 1rem;
    bottom: 0.75rem;
    left: 1rem;
  }
}

/* The transparent film in the hero stands where the device picture stood: the film is cropped
   tight around the device, so it is drawn at the size the picture's device had. */
.mk-herodevice-video {
  background: none;
}
.mk-sea .mk-herodevice-video {
  /* raised so that, larger, it still stands in the water only up to its base */
  transform: translateY(-11%) scale(0.95);
}
/* AquaCare first screen: logo and device sit a little lower */
main[data-scene="Maritime"] .hero svg.logo {
  translate: 0 3.5rem;
}
main[data-scene="Maritime"] .hero .mk-herodevice {
  top: 58%;
}
@media (max-width: 1023px) {
  main[data-scene="Maritime"] .hero svg.logo {
    translate: 0 2rem;
  }
  main[data-scene="Maritime"] .hero .mk-herodevice {
    top: 62%;
  }
}

/* Salli first screen: the chair stands on the shore of the lake, one castor in the water, a
   little larger than before, and its image lies on the water beside it. The lake belongs to the
   3D scene, whose picture scales with the window height, so the chair is placed in vh from the
   middle of the screen. */
.mk-shore-reflect {
  display: none;
}
@media (min-width: 1024px) {
  main[data-scene="Capital"] .hero .mk-herodevice.mk-shore {
    top: 38.5vh;
    right: auto;
    left: calc(50% + 27.5vh);
    width: 76.5vh;
    transform: translateX(-50%);
  }
  .mk-shore-reflect {
    position: absolute;
    inset: 0;
    display: block;
    /* mirrored about the line the castors stand on */
    transform-origin: 50% 96.5%;
    transform: scaleY(-1);
    opacity: 0.42;
    filter: url(#mk-lake-wave) blur(1.2px) brightness(0.72) saturate(0.85);
    /* strongest at the castors, gone a little way out; only on the water side */
    -webkit-mask-image: linear-gradient(to top, #000 0%, rgba(0, 0, 0, 0.55) 30%, transparent 62%), linear-gradient(to right, #000 0%, #000 52%, transparent 70%);
    -webkit-mask-composite: source-in;
    mask-image: linear-gradient(to top, #000 0%, rgba(0, 0, 0, 0.55) 30%, transparent 62%), linear-gradient(to right, #000 0%, #000 52%, transparent 70%);
    mask-composite: intersect;
    pointer-events: none;
  }
  .mk-shore-reflect > img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
  /* on the shore the chair's own shadow falls short and low */
  .mk-shore .mk-herodevice-img {
    filter: drop-shadow(0 0.6rem 0.7rem rgba(6, 24, 14, 0.5));
  }
}

/* Salli first screen with the maker's product film in place of the still chair: the film is
   wide (the chair travels through it and the camera closes in on the seat), so its frame is
   larger than the still chair's box and no mirror image is drawn. */
.mk-shore:has(.mk-herodevice-video) {
  aspect-ratio: 1214 / 680;
}
.mk-shore .mk-herodevice-video {
  filter: none;
  /* the film's frame melts into the scene: wide soft fades on every side, widest at the bottom
     where the chair's column leaves the picture */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 16%, #000 84%, transparent 100%), linear-gradient(180deg, transparent 0, #000 9%, #000 62%, transparent 97%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent 0, #000 16%, #000 84%, transparent 100%), linear-gradient(180deg, transparent 0, #000 9%, #000 62%, transparent 97%);
  mask-composite: intersect;
}
@media (min-width: 1024px) {
  main[data-scene="Capital"] .hero .mk-herodevice.mk-shore:has(.mk-herodevice-video) {
    top: 30vh;
    left: calc(50% + 24vh);
    width: 100vh;
  }
}

/* Swarovski first screen: a transparent film of the loupe in place of its picture. The film is
   wider than the picture's box, and its edges melt away where the frame of the glasses leaves it. */
main[data-scene="Trading"] .hero .mk-herodevice:has(.mk-herodevice-video) {
  width: min(46vw, 44rem);
  aspect-ratio: 1600 / 888;
}
main[data-scene="Trading"] .hero .mk-herodevice-video {
  filter: none;
  /* every side of the film melts into the scene */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 20%, #000 80%, transparent 100%), linear-gradient(180deg, transparent 0, #000 20%, #000 78%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent 0, #000 20%, #000 80%, transparent 100%), linear-gradient(180deg, transparent 0, #000 20%, #000 78%, transparent 100%);
  mask-composite: intersect;
}
/* the film is shown as it is: no arriving, floating or leaning with the pointer */
main[data-scene="Trading"] .hero .mk-herodevice:has(.mk-herodevice-video) .mk-herodevice-float {
  animation: none !important;
}
main[data-scene="Trading"] .hero .mk-herodevice:has(.mk-herodevice-video) .mk-herodevice-move {
  transform: none !important;
  transition: none;
}

/* Swarovski: the loupe film between the first screen and the "Zeiss x Swarovski" heading.
   It has no frame: the backdrop is cut away and every side melts into the page. */
.mk-gapfilm {
  grid-column: 1 / -1;
  display: flex;
  justify-content: center;
  /* pulled up into the empty stretch the section leaves under the first screen */
  margin: -27rem 0 3rem;
  opacity: 0;
  transform: translateY(2.5rem) scale(0.97);
  transition: opacity 1.2s ease, transform 1.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.mk-gapfilm.is-in {
  opacity: 1;
  transform: none;
}
.mk-gapfilm > video {
  display: block;
  width: min(100%, 58rem);
  aspect-ratio: 1600 / 888;
  background: none;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 18%, #000 82%, transparent 100%), linear-gradient(180deg, transparent 0, #000 18%, #000 80%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent 0, #000 18%, #000 82%, transparent 100%), linear-gradient(180deg, transparent 0, #000 18%, #000 80%, transparent 100%);
  mask-composite: intersect;
}
@media (max-width: 767px) {
  .mk-gapfilm {
    margin: -13rem 0 2rem;
  }
}
@media (prefers-reduced-motion: reduce) {
  .mk-gapfilm {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* Swarovski first screen: the loupe picture a little larger than the other pages' devices */
main[data-scene="Trading"] .hero .mk-herodevice {
  width: min(47vw, 45rem);
}
@media (max-width: 1023px) {
  main[data-scene="Trading"] .hero .mk-herodevice {
    width: 90vw;
  }
}

/* Home, "Ürünler": the glacier photograph gives way to the sea of the AquaCare scene, which the
   engine now draws behind this section (it fades in as the section arrives and out as it ends). */
main[data-scene="Homepage"] #WhatWeDo > .mk-section-bg {
  display: none;
}

/* Home: a film chapter between the sea and the globe. A full-screen film is pinned behind two
   screens of text and moves with the scroll; then a second film opens from the middle of the
   screen and three pairs of words pass over it. */
.mk-cx {
  --cx-navy: #122e58;
  position: relative;
  z-index: 3;
  /* (keeps the film's negative margins inside the chapter) */
  display: flow-root;
  width: 100%;
  color: #fff;
  /* no backdrop of its own: the sea above and the globe below show through while the films fade */
  background: transparent;
  font-family: "Century Gothic", sans-serif;
  line-height: 1.4;
  /* the page gives its sections room above and below; this one runs edge to edge */
  margin: 0 !important;
  padding: 0 !important;
}
.mk-cx *, .mk-cx *::before, .mk-cx *::after { box-sizing: border-box; }
.mk-cx a { color: inherit; text-decoration: none; }
.mk-cx-bg {
  position: sticky;
  top: 0;
  /* the film already stands at the top of the window during the screen before the chapter, held
     there by the browser (it used to be moved there from the scroll in catalog.js, a frame late:
     it shook on the way in, 2026-10-23) */
  margin-top: calc(-100 * var(--svh, 1vh));
  z-index: 0;
  width: 100%;
  height: calc(100 * var(--svh, 1vh));
  overflow: hidden;
  pointer-events: none;
}
.mk-cx-bg video,
.mk-cx-sol-video video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  will-change: filter, transform;
}
/* the films are dark already: only a light veil, for the bright patch of sunlight */
.mk-cx-shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(4, 14, 34, 0.3), rgba(4, 14, 34, 0.12) 45%, rgba(4, 14, 34, 0.34));
}
.mk-cx-track {
  position: relative;
  z-index: 1;
}
.mk-cx-pad { width: 100%; padding-right: 16px; padding-left: 16px; }
.mk-cx-hero {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  height: calc(100 * var(--svh, 1vh));
  overflow: hidden;
}
.mk-cx-hero-main {
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
  align-items: center;
  width: 100%;
  height: 100%;
  padding-top: 112px;
}
.mk-cx-hero-left { display: flex; flex-direction: column; justify-content: center; height: 100%; }
.mk-cx-title {
  display: flex;
  flex-direction: column;
  margin: 0 0 40px;
  font-size: clamp(30px, 5vw, 84px);
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: -0.025em;
  text-transform: none;
  color: #fff;
}
.mk-cx-line { display: block; white-space: nowrap; }
.mk-cx-char, .mk-cx-word { display: inline-block; will-change: transform, opacity, filter; }
.mk-cx-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: fit-content;
  padding: 14px 28px;
  font-size: 14px;
  color: var(--cx-navy) !important;
  border-radius: 9999px;
  background: #fff;
  transition: background 0.2s;
}
.mk-cx-cta:hover { background: rgba(255, 255, 255, 0.9); }
.mk-cx-cta-icon,
.mk-cx-cap-icon {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  color: #fff;
  border-radius: 9999px;
  background: var(--cx-navy);
  transition: transform 0.2s;
}
.mk-cx svg { width: 14px; height: 14px; stroke-width: 2.5; }
.mk-cx-cta:hover .mk-cx-cta-icon { transform: scale(1.05); }
.mk-cx-cap-icon { margin-left: 12px; color: var(--cx-navy); background: #fff; }
.mk-cx-cap:hover .mk-cx-cap-icon { transform: scale(1.1); }
.mk-cx-hero-right { display: flex; flex-direction: column; justify-content: center; width: 100%; max-width: 328px; }
.mk-cx-eyebrow {
  display: block;
  margin-bottom: 12px;
  font-size: 11.5px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
}
.mk-cx-eyebrow--medium { margin-bottom: 0; }
.mk-cx-body { margin: 0; font-size: 14.5px; line-height: 1.625; letter-spacing: -0.01em; color: #fff; }
.mk-cx-about {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  width: 100%;
  height: calc(100 * var(--svh, 1vh));
  min-height: 600px;
  padding-top: 112px;
  padding-bottom: 56px;
}
.mk-cx-about-top { display: flex; flex-direction: column; gap: 24px; width: 100%; }
.mk-cx-about-copy {
  max-width: 1200px;
  margin: 0;
  font-size: clamp(22px, 3.2vw, 40px);
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: #fff;
}
.mk-cx-about-bottom { display: grid; grid-template-columns: 1fr; gap: 32px; width: 100%; }
.mk-cx-caps { display: flex; flex-direction: column; width: 100%; max-width: 328px; }
.mk-cx-caps-label {
  margin-bottom: 20px;
  font-size: 11.5px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
}
.mk-cx-caps-list { display: flex; flex-direction: column; width: 100%; border-bottom: 1px solid rgba(255, 255, 255, 0.15); }
.mk-cx-cap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 11px 0;
  color: #fff;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
}
.mk-cx-cap span:first-child { font-size: 14.5px; letter-spacing: -0.01em; }
/* one screen longer than it takes on the page (the negative margin): the second film stays at the
   top of the window, held by the browser, during the screen after the chapter, while the mist
   takes it to the sailboat (it used to be moved there from the scroll, a frame late, 2026-10-23) */
.mk-cx-sol { position: relative; z-index: 2; width: 100%; height: calc(400vh + 100 * var(--svh, 1vh)); margin-bottom: calc(-100 * var(--svh, 1vh)); }
.mk-cx-overlay {
  position: sticky;
  top: 0;
  width: 100%;
  height: calc(100 * var(--svh, 1vh));
  overflow: hidden;
  clip-path: inset(50% 50% round 3px);
  will-change: clip-path;
}
.mk-cx-sol-video { position: absolute; inset: 0; pointer-events: none; }
.mk-cx-sol-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  width: 100%;
  height: 100%;
}
.mk-cx-stage { position: relative; width: 100%; max-width: 1000px; height: 320px; }
.mk-cx-set {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  gap: 40px;
  justify-content: center;
  opacity: 0;
  filter: blur(15px);
  pointer-events: none;
  will-change: opacity, filter, transform;
}
.mk-cx-set-top { display: flex; flex-direction: column; gap: 24px; width: 100%; will-change: transform; }
.mk-cx-set-bottom { width: 100%; will-change: transform; }
.mk-cx-big {
  width: 100%;
  margin: 0;
  font-size: clamp(40px, 6.5vw, 105px);
  line-height: 0.98;
  letter-spacing: -0.025em;
  color: #fff;
}
@media (min-width: 1024px) {
  .mk-cx-pad { padding-right: 56px; padding-left: 56px; }
  .mk-cx-hero-main { grid-template-columns: repeat(12, 1fr); gap: 32px; padding-top: 0; }
  .mk-cx-hero-left { grid-column: span 7; transform: translateY(-40px); }
  .mk-cx-hero-right { grid-column: 9 / span 4; justify-self: end; align-self: end; margin-bottom: 56px; }
  .mk-cx-about-bottom { grid-template-columns: repeat(12, 1fr); }
  .mk-cx-caps { grid-column: 9 / span 4; justify-self: end; }
  .mk-cx-stage { height: 400px; }
}


/* Home film chapter: the films are graded to the slate blue of the sea above, and the chapter
   is entered and left through a bank of mist like the other scenes of the home page. */
.mk-cx-bg,
.mk-cx-overlay {
  --cx-edge: 0;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 calc(var(--cx-edge) * 45%));
  mask-image: linear-gradient(180deg, transparent 0, #000 calc(var(--cx-edge) * 45%));
}
.mk-cx-overlay {
  -webkit-mask-image: linear-gradient(0deg, transparent 0, #000 calc(var(--cx-edge) * 45%));
  mask-image: linear-gradient(0deg, transparent 0, #000 calc(var(--cx-edge) * 45%));
}
.mk-cx-mist {
  --cx-drift: 0px;
  position: fixed;
  inset: 0;
  z-index: 6;
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(120% 90% at 50% 55%, rgba(196, 206, 216, 0.94), rgba(150, 166, 182, 0.88) 70%, rgba(120, 138, 156, 0.82));
}
/* the softening under the mist while it comes and goes (catalog.js mistSet) */
.mk-cx-mist-blur { position: fixed; inset: 0; z-index: 6; pointer-events: none; }
/* the three cloud layers move by transform only (2026-10-21): moving a background image made the
   browser repaint three full screens on every frame, which slow computers could not keep up with.
   Each layer (i) is one tile taller than the screen and shifted by the scroll drift modulo its
   tile height (set from the script as --cx-y); inside it the image (b) is one tile wider and
   slides one tile to the right per cycle, so both seams loop invisibly. */
.mk-cx-mist i {
  --cx-th: 800px;
  position: absolute;
  top: calc(var(--cx-th) * -1);
  right: 0;
  bottom: 0;
  left: 0;
  transform: translate3d(0, var(--cx-y, 0px), 0);
}
.mk-cx-mist b {
  --cx-tw: 1600px;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: calc(var(--cx-tw) * -1);
  background: url("/medikallup/scene/mist-1.webp") 0 0 / var(--cx-tw) var(--cx-th) repeat;
  animation: mk-cx-mist-1 90s linear infinite;
  will-change: transform;
}
.mk-cx-mist i:nth-child(2) { --cx-th: 1100px; opacity: 0.85; }
.mk-cx-mist i:nth-child(2) b {
  --cx-tw: 2200px;
  background-image: url("/medikallup/scene/mist-2.webp");
  animation-name: mk-cx-mist-2;
  animation-duration: 140s;
  animation-direction: reverse;
}
.mk-cx-mist i:nth-child(3) { --cx-th: 550px; opacity: 0.55; }
.mk-cx-mist i:nth-child(3) b { --cx-tw: 1100px; animation-name: mk-cx-mist-3; animation-duration: 60s; }
@keyframes mk-cx-mist-1 { to { transform: translate3d(1600px, 0, 0); } }
@keyframes mk-cx-mist-2 { to { transform: translate3d(2200px, 0, 0); } }
@keyframes mk-cx-mist-3 { to { transform: translate3d(1100px, 0, 0); } }
/* light mode: two layers instead of three */
html.mk-lite .mk-cx-mist i:nth-child(3) { display: none; }
/* phones: when Safari's bars fold away the window grows past the screen height the page was laid
   out for (--svh), and the 3D scene's clouds showed under each full-screen picture. The pictures
   reach down to the large viewport; the extra length is taken back below them (negative margin),
   so nothing else moves, and the text and buttons on them stay where they were (2026-10-23) */
@supports (height: 1lvh) {
  html.mk-small-gpu .mk-cx-bg,
  html.mk-small-gpu .mk-cx-overlay,
  html.mk-small-gpu .mk-yc-pin {
    height: max(calc(100 * var(--svh, 1vh)), 100lvh);
    margin-bottom: min(0px, calc(100 * var(--svh, 1vh) - 100lvh));
  }
  /* what sits at the bottom of the sailboat screen stays above Safari's bar while the bar shows
     (the dynamic viewport is then shorter than the large one), and at the bottom once it folds */
  html.mk-small-gpu .mk-yc-pin .mk-yc-cue,
  html.mk-small-gpu .mk-yc-pin .mk-yc-cta,
  html.mk-small-gpu .mk-yc-pin .mk-swipe { translate: 0 min(0px, calc(100dvh - 100lvh)); }
}
/* phones and tablets: a film chapter far from the screen keeps its height and nothing else
   (catalog.js farOut) */
.mk-far > * { display: none !important; }
/* phones and tablets (catalog.js: is-small): two layers of half-size tiles. Each layer is larger
   than the screen by one tile, and at 3x that was most of the page's graphics memory (2026-10-23) */
.mk-cx-mist.is-small i { --cx-th: 400px; }
.mk-cx-mist.is-small b { --cx-tw: 800px; animation-name: mk-cx-mist-1s; }
.mk-cx-mist.is-small i:nth-child(2) { --cx-th: 550px; }
.mk-cx-mist.is-small i:nth-child(2) b { --cx-tw: 1100px; animation-name: mk-cx-mist-2s; }
.mk-cx-mist.is-small i:nth-child(3) { display: none; }
@keyframes mk-cx-mist-1s { to { transform: translate3d(800px, 0, 0); } }
@keyframes mk-cx-mist-2s { to { transform: translate3d(1100px, 0, 0); } }
@media (prefers-reduced-motion: reduce) {
  .mk-cx-mist b { animation: none; }
}

/* Home: the sea surface after the underwater films (a "yacht club" design): a full-screen film of
   the waves graded to the slate blue of the other home scenes, a liquid ring trail under the
   pointer, a staggered side menu and a product viewer whose three columns slide in from the
   right. Entered and left through the same mist as the film chapter (.mk-cx-mist). */
.mk-yc {
  --yc-ease: cubic-bezier(0.23, 1, 0.32, 1);
  --yc-panel: clamp(260px, 38vw, 420px);
  position: relative;
  z-index: 3;
  /* (keeps the pin's negative margin inside the section) */
  display: flow-root;
  width: 100%;
  /* held for the sailboat, the mist and the sea columns (220vh when there are no columns);
     2026-10-21: 450vh (was 360vh), the sailboat screen stays longer (catalog.js SAIL);
     2026-10-23: 500vh, room for a bank of mist between the sailboat and the boats */
  height: 500vh;
  margin: 0 !important;
  padding: 0 !important;
  color: #fff;
  font-family: "Instrument Serif", ui-serif, Georgia, serif;
  text-transform: uppercase;
}
.mk-yc *, .mk-yc *::before, .mk-yc *::after { box-sizing: border-box; }
.mk-yc a { color: inherit; text-decoration: none; }
.mk-yc-svg { position: absolute; width: 0; height: 0; overflow: hidden; }
/* one screen held in place by the browser (sticky) while the page scrolls past it: the sailboat
   first, then the boats, crossfading through the mist */
.mk-yc-pin {
  --cx-edge: 0;
  position: sticky;
  top: 0;
  /* the screen already stands at the top of the window during the screen before the section:
     the browser holds it there (it used to be moved there from the scroll in catalog.js, a frame
     late: it bobbed 20–40px and showed a light line under it, 2026-10-23) */
  margin-top: calc(-100 * var(--svh, 1vh));
  width: 100%;
  height: calc(100 * var(--svh, 1vh));
  overflow: hidden;
  opacity: 0;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 calc(var(--cx-edge) * 45%));
  mask-image: linear-gradient(180deg, transparent 0, #000 calc(var(--cx-edge) * 45%));
}
.mk-yc-stage {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.mk-yc-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  background: #34465a;
  /* the film is a bright blue sea: toned down to the slate of the AquaCare sea above */
  filter: saturate(0.75) brightness(0.9) contrast(1.02) blur(0px);
  transition: filter 1.3s var(--yc-ease);
}
.mk-yc.is-fleet .mk-yc-bg { filter: saturate(0.75) brightness(0.9) contrast(1.02) blur(100px); transition-duration: 1.56s; }
.mk-yc-bg img,
.mk-yc-bg iframe {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100vw;
  height: 56.25vw;
  min-width: 177.77vh;
  min-height: 100vh;
  border: 0;
  transform: translate(-50%, -50%);
}
.mk-yc-bg img { object-fit: cover; }
/* the film shows only once its player is ready (catalog.js), so an error page never does */
.mk-yc-bg iframe { opacity: 0; transition: opacity 0.8s ease; }
.mk-yc-bg iframe.is-ready { opacity: 1; }
/* light mode: the boats' background darkens instead of a 100px blur over the whole screen */
html.mk-lite .mk-yc.is-fleet .mk-yc-bg { filter: saturate(0.75) brightness(0.62); }
html.mk-lite .mk-yc-bg { filter: saturate(0.75) brightness(0.9); }
/* phones and tablets: no filter at all (over the still and the boats it was redrawn on every
   frame, ~60 ms each on a phone, 2026-10-23); the same darkening is a veil over the still */
html.mk-small-gpu .mk-yc-bg { filter: none; transition: none; }
html.mk-small-gpu .mk-yc-bg::after { content: ""; position: absolute; inset: 0; background: #0c1420; opacity: 0.12; transition: opacity 1.3s var(--yc-ease); }
html.mk-small-gpu .mk-yc.is-fleet .mk-yc-bg::after { opacity: 0.42; }
html.mk-small-gpu .mk-yc.is-fleet .mk-yc-bg { filter: none; }
.mk-yc-tint { position: absolute; inset: 0; background: #3f6488; mix-blend-mode: color; opacity: 0.6; }
.mk-yc-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20, 30, 44, 0.35), rgba(20, 30, 44, 0.05) 40%, rgba(20, 30, 44, 0.4)); }
.mk-yc-trail { position: absolute; inset: 0; z-index: 1; overflow: hidden; pointer-events: none; }
.mk-yc-ring {
  position: absolute;
  display: none;
  border-radius: 50%;
  -webkit-backdrop-filter: url(#mk-liquid-trail) blur(1px);
  backdrop-filter: url(#mk-liquid-trail) blur(1px);
  box-shadow: inset 0 0 30px rgba(255, 255, 255, 0.1), 0 0 15px rgba(147, 197, 253, 0.15);
  will-change: transform, opacity, width, height, left, top;
}
/* light mode (2026-10-21): the trail keeps its rings but drops the liquid backdrop filter, the
   most expensive effect on the page; a soft glow stands in for it */
html.mk-lite .mk-yc-ring, html.mk-small-gpu .mk-yc-ring {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  background: radial-gradient(closest-side, rgba(255, 255, 255, 0) 62%, rgba(255, 255, 255, 0.12) 86%, rgba(255, 255, 255, 0) 100%);
}
.mk-yc-hero { position: absolute; top: 96px; left: 20px; z-index: 2; pointer-events: none; }
.mk-yc-title {
  display: flex;
  flex-direction: column;
  margin: 0;
  font-family: inherit;
  /* also limited by the screen height, so the text and the logo under it fit on one screen */
  font-size: clamp(44px, min(9.7vw, 11vh), 140px);
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0;
  filter: drop-shadow(0 25px 25px rgba(0, 0, 0, 0.15));
}
.mk-yc-mask { display: block; overflow: hidden; }
.mk-yc-line {
  display: block;
  padding-bottom: 0.04em;
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.48s ease, transform 0.48s ease;
}
.mk-yc-italic { font-style: italic; }
.mk-yc.is-in .mk-yc-line { opacity: 1; transform: none; transition-duration: 0.96s; transition-delay: calc(var(--i) * 0.12s); }
.mk-yc.is-fleet .mk-yc-line { opacity: 0; transform: translateY(40px); transition-duration: 0.48s; transition-delay: 0s; }
.mk-yc-text {
  width: 260px;
  margin: 28px 0 0;
  font-size: 10px;
  line-height: 1.6;
  letter-spacing: 0.1em;
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.48s ease, transform 0.48s ease;
}
.mk-yc.is-in .mk-yc-text { opacity: 1; transform: none; transition-duration: 0.96s; transition-delay: 0.5s; }
.mk-yc.is-fleet .mk-yc-text { opacity: 0; transform: translateY(40px); transition-delay: 0s; }
.mk-yc-cta {
  position: absolute;
  right: 32px;
  bottom: 32px;
  z-index: 5;
  padding: 14px 26px;
  font-size: 15px;
  letter-spacing: 0.12em;
  color: #fff !important;
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.06);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  transition: transform 0.8s var(--yc-ease), background 0.3s, opacity 0.6s;
}
.mk-yc-cta:hover { background: rgba(255, 255, 255, 0.16); }
.mk-yc.is-fleet .mk-yc-cta { opacity: 0; pointer-events: none; }
/* product viewer */
/* the boats: the second picture of the same screen, faded in through the mist */
.mk-yc-fleet {
  position: absolute;
  inset: 0;
  z-index: 2;
  opacity: 0;
  visibility: hidden;
  background: radial-gradient(90% 70% at 50% 45%, #50667e, #2a3a4c);
  display: flex;
  /* phones: the boats stand in one row that is swiped sideways, so the page keeps scrolling */
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
}
.mk-yc-fleet-close {
  position: absolute;
  top: 96px;
  left: 20px;
  z-index: 5;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.6s ease 0.4s;
  padding: 10px 18px;
  font: inherit;
  font-size: 13px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: #fff;
  cursor: pointer;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.06);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
}
.mk-yc.is-fleet-in .mk-yc-fleet-close { opacity: 1; pointer-events: auto; }
.mk-yc-col {
  position: relative;
  flex: none;
  width: 82vw;
  height: 100%;
  overflow: hidden;
  cursor: pointer;
  outline: none;
  border-right: 2px solid #fff;
  scroll-snap-align: start;
  background: radial-gradient(90% 70% at 50% 45%, #50667e, #2a3a4c);
  transform: translateX(100vw);
  transition: transform 1.56s var(--yc-ease) calc(var(--i) * 0.1s);
}
.mk-yc.is-fleet-in .mk-yc-col { transform: none; }
.mk-yc-col video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s ease;
}
.mk-yc-col video.mk-yc-alpha { object-fit: contain; padding: 18% 8%; }
.mk-yc-col.is-hover video { transform: scale(1.05); }
.mk-yc-col-shade { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.2); pointer-events: none; }
.mk-yc-col-info {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
  padding: 32px;
  pointer-events: none;
}
.mk-yc-col.is-hover .mk-yc-col-info { pointer-events: auto; }
.mk-yc-col-info .mk-yc-mask > * {
  display: block;
  transform: translateY(110%);
  transition: transform 0.5s var(--yc-ease);
}
.mk-yc-col.is-hover .mk-yc-col-info .mk-yc-mask > * { transform: none; transition-duration: 0.9s; }
.mk-yc-col.is-hover .mk-yc-mask:nth-child(2) > * { transition-delay: 0.05s; }
.mk-yc-col.is-hover .mk-yc-specs .mk-yc-mask:nth-child(1) > * { transition-delay: 0.1s; }
.mk-yc-col.is-hover .mk-yc-specs .mk-yc-mask:nth-child(2) > * { transition-delay: 0.15s; }
.mk-yc-col.is-hover .mk-yc-specs .mk-yc-mask:nth-child(3) > * { transition-delay: 0.2s; }
.mk-yc-col.is-hover .mk-yc-specs .mk-yc-mask:nth-child(4) > * { transition-delay: 0.25s; }
.mk-yc-col.is-hover .mk-yc-col-info > .mk-yc-mask > * { transition-delay: 0.3s; }
.mk-yc-col-title { margin: 0 0 48px; font-size: 48px; font-weight: 400; line-height: 0.95; }
.mk-yc-specs { margin: 0 0 28px; }
.mk-yc-spec { display: flex; flex-wrap: wrap; gap: 4px 12px; padding: 7px 0; font-size: 11px; letter-spacing: 0.15em; color: rgba(255, 255, 255, 0.7); border-top: 1px solid rgba(255, 255, 255, 0.15); }
.mk-yc-spec dt { min-width: 130px; }
.mk-yc-spec dd { margin: 0; color: #fff; }
.mk-yc-view {
  display: inline-block;
  padding: 12px 28px;
  font-size: 13px;
  letter-spacing: 0.2em;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.05);
  -webkit-backdrop-filter: blur(120px);
  backdrop-filter: blur(120px);
}
html.mk-lite .mk-yc-view, html.mk-small-gpu .mk-yc-view { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(12, 24, 40, 0.45); }
/* staggered menu */
.mk-yc-menu { position: absolute; inset: 0; z-index: 6; pointer-events: none; }
.mk-yc-prelayers, .mk-yc-panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: var(--yc-panel);
  transform: translateX(100%);
}
.mk-yc-prelayer { position: absolute; inset: 0; transform: translateX(100%); }
.mk-yc-prelayer:nth-child(1) { background: #1b2633; }
.mk-yc-prelayer:nth-child(2) { background: #9fb9ce; }
.mk-yc-prelayers { transform: none; }
.mk-yc-panel {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 150px 32px 32px;
  overflow-y: auto;
  color: #111;
  background: #fff;
  pointer-events: auto;
}
.mk-yc-items { margin: 0; padding: 0; list-style: none; }
.mk-yc-item-wrap { overflow: hidden; line-height: 1; }
.mk-yc-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
  margin: 0;
  padding: 2px 0;
  font: inherit;
  font-size: clamp(30px, 3.6vw, 48px);
  line-height: 1;
  color: #111 !important;
  text-align: left;
  text-transform: inherit;
  cursor: pointer;
  border: 0;
  background: none;
  transform-origin: 50% 100%;
  transform: translateY(140%) rotate(10deg);
  transition: color 0.25s;
}
.mk-yc-item:hover { color: #47607a !important; }
.mk-yc-item-num { margin-top: 6px; font-family: "Century Gothic", sans-serif; font-size: 11px; color: #47607a; }
.mk-yc-socials { margin-top: 32px; font-size: 13px; letter-spacing: 0.12em; }
.mk-yc-socials-title { display: block; margin-bottom: 10px; color: #47607a; }
.mk-yc-socials ul { display: flex; flex-wrap: wrap; gap: 18px; margin: 0; padding: 0; list-style: none; }
.mk-yc-socials a { color: #111 !important; }
.mk-yc-socials a:hover { color: #47607a !important; }
.mk-yc-toggle {
  position: absolute;
  top: 96px;
  right: 32px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0;
  font: inherit;
  font-size: 17px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #fff;
  cursor: pointer;
  border: 0;
  background: none;
  pointer-events: auto;
  transition: color 0.5s;
}
.mk-yc-menu.is-open .mk-yc-toggle { color: #000; }
.mk-yc-toggle-text { display: block; height: 1.1em; overflow: hidden; line-height: 1.1; }
.mk-yc-toggle-inner { display: flex; flex-direction: column; }
.mk-yc-toggle-inner span { display: block; height: 1.1em; }
.mk-yc-icon { position: relative; width: 14px; height: 14px; }
.mk-yc-icon span { position: absolute; top: 50%; left: 50%; width: 100%; height: 2px; background: currentColor; transform: translate(-50%, -50%); }
.mk-yc-icon span:last-child { transform: translate(-50%, -50%) rotate(90deg); }
@media (min-width: 768px) {
  .mk-yc-hero { left: 96px; }
  .mk-yc-text { font-size: 12px; transform: translate(100px, 40px); }
  .mk-yc.is-in .mk-yc-text { transform: translateX(100px); }
  .mk-yc.is-fleet .mk-yc-text { transform: translate(100px, 40px); }
  .mk-yc-menu.is-open ~ .mk-yc-cta,
  .mk-yc.is-menu .mk-yc-cta { transform: translateX(calc(-1 * var(--yc-panel))); }
  .mk-yc-fleet { overflow: hidden; }
  .mk-yc-col { flex: 1 1 0; width: auto; }
  .mk-yc-col:last-of-type { border-right: 0; }
  .mk-yc-col-title { font-size: 64px; }
}
@media (prefers-reduced-motion: reduce) {
  .mk-yc-ring { display: none !important; }
}
.mk-yc-col-title .mk-yc-mask { padding-bottom: 0.1em; margin-bottom: -0.1em; }
.mk-yc-spec { font-size: 12px; }
.mk-yc-spec dd { font-size: 13px; }
@media (max-width: 767px) {
  /* phones: the title starts under the menu button, the button sits clear of the corner buttons */
  .mk-yc-hero { top: 150px; }
  .mk-yc-cta { right: auto; left: 20px; }
}

/* the sea columns carry no text any more, so they are not clickable */
.mk-yc-col { cursor: default; }

/* a film framed inside a sea column: the sea keeps running around it, the frame's edges melt
   into the water */
.mk-yc-inset {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 1;
  width: min(82%, 58vh);
  aspect-ratio: 9 / 16;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 18px;
  box-shadow: 0 30px 80px rgba(6, 14, 26, 0.55), 0 0 0 10px rgba(255, 255, 255, 0.04);
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.mk-yc-inset video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  padding: 0 !important;
  transform: none !important;
  /* graded like the other home scenes: colours toned down, cooled towards the slate blue */
  filter: saturate(0.6) brightness(0.88) contrast(1.05);
}
.mk-yc-inset::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(120% 90% at 50% 50%, transparent 62%, rgba(20, 34, 52, 0.55));
  box-shadow: inset 0 0 40px 10px rgba(16, 30, 48, 0.55);
}

/* the sea columns continue the sailboat's sea: the same grade as the wave film (.mk-yc-bg) and
   the same colour and shade layers, under the framed film */
.mk-yc-col > video { filter: saturate(0.75) brightness(0.9) contrast(1.02); }
.mk-yc-col::before,
.mk-yc-col::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}
.mk-yc-col::before { background: #3f6488; mix-blend-mode: color; opacity: 0.6; }
.mk-yc-col::after { background: linear-gradient(180deg, rgba(20, 30, 44, 0.35), rgba(20, 30, 44, 0.05) 40%, rgba(20, 30, 44, 0.4)); }
.mk-yc-inset { z-index: 2; }

/* the framed film takes the home page's colour: the same slate-blue colour layer as the sea */
.mk-yc-inset::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: #3f6488;
  mix-blend-mode: color;
  opacity: 0.35;
  pointer-events: none;
}
.mk-yc-inset::after { z-index: 2; }

/* Medikallup Master Academy logo on the right of the sailboat screen, large, arriving last out
   of a blur */
/* phones: small, top right under the header, clear of the title, the button, the round buttons
   on the right and the scroll cue at the bottom */
.mk-yc-badge {
  position: absolute;
  top: 70px;
  right: 20px;
  z-index: 2;
  width: min(28vw, 108px, 15vh);
  height: auto;
  opacity: 0;
  filter: blur(14px);
  transform: translateY(30px) scale(0.86);
  transform-origin: 100% 0;
  transition: opacity 0.5s ease, filter 0.5s ease, transform 0.5s ease;
  pointer-events: none;
}
.mk-yc.is-in .mk-yc-badge {
  opacity: 1;
  filter: blur(0);
  transform: none;
  transition: opacity 1.4s cubic-bezier(0.23, 1, 0.32, 1) 0.8s, filter 1.4s cubic-bezier(0.23, 1, 0.32, 1) 0.8s, transform 1.6s cubic-bezier(0.23, 1, 0.32, 1) 0.8s;
}
@media (min-width: 768px) {
  /* top edge on the same line as the first line of the title ("Size mümkün") */
  .mk-yc-badge {
    top: 96px;
    right: 8vw;
    transform-origin: 100% 50%;
    width: clamp(187px, min(19.55vw, 33.15vh), 315px);
    transform: translateY(30px) scale(0.86);
  }
  .mk-yc.is-in .mk-yc-badge { transform: none; }
}
/* the sailboat screen has no menu and no demo button */
.mk-yc-menu,
.mk-yc-cta {
  display: none !important;
}

/* Home underwater film chapter without any words: the title, button, texts, brand list and the
   product words over the second film are hidden. They keep their place, so the scrolling, the films
   and the mist stay exactly as they were. */
.mk-cx-hero-main,
.mk-cx-about-top,
.mk-cx-about-bottom,
.mk-cx-stage {
  visibility: hidden !important;
}

/* the sailboat screen without the "Medikallup, 10 yıldır…" text under the title */
.mk-yc-text { display: none !important; }

/* Master Academy pre-registration: a white pill under the sailboat title (a thin ring breathes
   around it to draw the eye) and a frosted slate dialog in the same type as the scene */
.mk-yc-enroll {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin-top: 34px;
  padding: 10px 10px 10px 26px;
  font-family: "Instrument Serif", ui-serif, Georgia, serif;
  font-size: 17px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #15263a;
  cursor: pointer;
  border: 0;
  border-radius: 9999px;
  background: #fff;
  box-shadow: 0 18px 40px rgba(6, 14, 26, 0.35);
  pointer-events: auto;
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.48s ease, transform 0.48s ease, background 0.3s ease;
}
.mk-yc.is-in .mk-yc-enroll {
  opacity: 1;
  transform: none;
  transition: opacity 1s cubic-bezier(0.23, 1, 0.32, 1) 0.6s, transform 1s cubic-bezier(0.23, 1, 0.32, 1) 0.6s, background 0.3s ease;
}
.mk-yc-enroll::before {
  content: "";
  position: absolute;
  inset: -1px;
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: inherit;
  animation: mk-enroll-ring 2.8s cubic-bezier(0.23, 1, 0.32, 1) infinite;
  pointer-events: none;
}
@keyframes mk-enroll-ring {
  0% { opacity: 0.8; transform: scale(1); }
  70%, 100% { opacity: 0; transform: scale(1.12, 1.45); }
}
.mk-yc-enroll:hover { background: #e8eef5; }
.mk-yc-enroll:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }
.mk-yc-enroll-icon {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  color: #fff;
  border-radius: 50%;
  background: #1e3a5f;
  transition: transform 0.35s cubic-bezier(0.23, 1, 0.32, 1);
}
.mk-yc-enroll-icon svg { width: 18px; height: 18px; }
.mk-yc-enroll:hover .mk-yc-enroll-icon,
.mk-enroll-submit:hover .mk-yc-enroll-icon { transform: translateX(4px); }

.mk-enroll {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  font-family: "Century Gothic", sans-serif;
  color: #fff;
}
.mk-enroll[hidden] { display: none; }
.mk-enroll-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(14, 24, 38, 0.55);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  opacity: 0;
  transition: opacity 0.5s ease;
}
.mk-enroll-card {
  position: relative;
  width: min(100%, 470px);
  max-height: calc(100% - 20px);
  overflow-y: auto;
  padding: 44px 40px 30px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 22px;
  background: linear-gradient(160deg, rgba(48, 70, 96, 0.92), rgba(20, 32, 48, 0.94));
  box-shadow: 0 40px 100px rgba(4, 10, 20, 0.55);
  opacity: 0;
  transform: translateY(26px) scale(0.97);
  transition: opacity 0.5s ease, transform 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}
.mk-enroll.is-open .mk-enroll-backdrop,
.mk-enroll.is-open .mk-enroll-card { opacity: 1; transform: none; }
.mk-enroll-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 38px;
  height: 38px;
  cursor: pointer;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.04);
  transition: background 0.25s, transform 0.4s cubic-bezier(0.23, 1, 0.32, 1);
}
.mk-enroll-close:hover { background: rgba(255, 255, 255, 0.12); transform: rotate(90deg); }
.mk-enroll-close span {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 14px;
  height: 1.5px;
  background: #fff;
  transform: translate(-50%, -50%) rotate(45deg);
}
.mk-enroll-close span + span { transform: translate(-50%, -50%) rotate(-45deg); }
.mk-enroll-logo { display: block; width: 92px; height: auto; margin-bottom: 18px; }
.mk-enroll-kicker {
  margin: 0 0 6px;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(214, 228, 242, 0.7);
}
.mk-enroll-title {
  margin: 0 0 10px;
  font-family: "Instrument Serif", ui-serif, Georgia, serif;
  font-size: 46px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #fff;
}
.mk-enroll-text { margin: 0 0 26px; font-size: 13.5px; line-height: 1.6; color: rgba(232, 240, 248, 0.78); }
.mk-enroll-form { display: flex; flex-direction: column; gap: 14px; }
.mk-enroll-field { position: relative; display: block; }
.mk-enroll-field input {
  width: 100%;
  padding: 24px 16px 10px;
  font: inherit;
  font-size: 15px;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 12px;
  outline: none;
  background: rgba(255, 255, 255, 0.05);
  transition: border-color 0.25s, background 0.25s;
}
.mk-enroll-field input:focus { border-color: rgba(255, 255, 255, 0.6); background: rgba(255, 255, 255, 0.09); }
.mk-enroll-field span {
  position: absolute;
  top: 17px;
  left: 17px;
  font-size: 14px;
  color: rgba(232, 240, 248, 0.6);
  pointer-events: none;
  transform-origin: 0 0;
  transition: transform 0.25s ease, color 0.25s ease;
}
.mk-enroll-field input:focus + span,
.mk-enroll-field input:not(:placeholder-shown) + span { color: rgba(214, 228, 242, 0.8); transform: translateY(-9px) scale(0.78); }
.mk-enroll-form.is-checked input:invalid,
.mk-enroll-form.is-checked input.is-bad { border-color: #e8a1a1; }
.mk-enroll-submit {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 6px;
  padding: 8px 8px 8px 24px;
  font-family: "Instrument Serif", ui-serif, Georgia, serif;
  font-size: 18px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #15263a;
  cursor: pointer;
  border: 0;
  border-radius: 9999px;
  background: #fff;
  transition: background 0.25s;
}
.mk-enroll-submit:hover { background: #e8eef5; }
.mk-enroll-status { min-height: 1.2em; margin: 2px 0 0; font-size: 12.5px; color: rgba(232, 240, 248, 0.8); }
.mk-enroll-status.is-error { color: #f1b4b4; }
.mk-enroll-note {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin: 18px 0 0;
  padding: 14px 16px;
  font-size: 12px;
  line-height: 1.55;
  color: rgba(232, 240, 248, 0.82);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.04);
}
.mk-enroll-note svg { flex: none; width: 18px; height: 18px; margin-top: 1px; color: rgba(214, 228, 242, 0.8); }
@media (max-width: 767px) {
  .mk-yc-enroll { margin-top: 24px; padding-left: 20px; font-size: 14px; }
  .mk-yc-enroll-icon { width: 34px; height: 34px; }
  .mk-enroll-card { padding: 38px 24px 24px; }
  .mk-enroll-title { font-size: 38px; }
}
/* the narrowest phones (320px): title and button stop short of the round buttons on the right */
@media (max-width: 359px) {
  .mk-yc-title { font-size: 36px; }
  .mk-yc-enroll { gap: 10px; padding-left: 16px; font-size: 12px; letter-spacing: 0.1em; }
}
@media (prefers-reduced-motion: reduce) {
  .mk-yc-enroll::before { animation: none; opacity: 0; }
}

/* Underwater film, first scene: the brand logos, all in white, one at a time in the middle of the
   film; each comes out of a blur and fades away into the next as the page scrolls. The scene is
   one screen longer to give them room. The demo button of this scene is gone. */
.mk-cx-track { padding-bottom: calc(100 * var(--svh, 1vh)); }
.mk-cx-logos {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}
.mk-cx-logo {
  position: absolute;
  /* on the diver's chest (2026-10-21: from the middle of the screen up to her body) */
  top: 43%;
  /* 1% of the screen width right of the middle; --cx-dx (from the data) moves a logo whose ink
     sits off its centre back onto the diver, in steps of about 1% of the width */
  left: calc(51% + var(--cx-dx, 0) * clamp(5px, 1vw, 16px));
  /* every logo carries the same visual weight (2026-10-20): --cx-w (from the data) is
     sqrt(aspect ratio) eased by how much ink the logo has, so a tall mark and a long
     wordmark cover about the same area; --cx-k is the size of a square logo */
  --cx-k: clamp(72px, min(7.2vw, 12.5vh), 108px);
  width: min(calc(var(--cx-k) * var(--cx-w, 1.9)), 72vw);
  height: auto;
  object-fit: contain;
  opacity: 0;
  filter: drop-shadow(0 10px 30px rgba(4, 12, 24, 0.35));
  transform: translate(-50%, -50%);
  will-change: opacity, transform, filter;
}
.mk-cx-cta { display: none !important; }
/* phones: the sentence sits above the diver, so the logo stays a little lower, under it */
@media (max-width: 767px) {
  .mk-cx-logo { top: 48%; }
}

/* the sentence left of the diver in the first underwater scene, in the scene's text style */
.mk-cx-claim {
  position: absolute;
  top: 50%;
  left: 16px;
  z-index: 1;
  width: min(84vw, 520px);
  max-width: none;
  transform: translateY(-50%);
  text-shadow: 0 2px 24px rgba(4, 12, 24, 0.45);
}
@media (max-width: 767px) {
  .mk-cx-claim { top: 22%; }
}
@media (min-width: 1024px) {
  .mk-cx-claim { left: 56px; width: min(32vw, 520px); }
}

/* the sentence a size larger, "Medikallup" in bold, set off by a fine line on its left */
.mk-cx-claim {
  padding-left: 22px;
  font-size: clamp(26px, 3.3vw, 48px);
  line-height: 1.16;
  letter-spacing: -0.015em;
  border-left: 1px solid rgba(255, 255, 255, 0.45);
}
.mk-cx-claim-line:first-child .mk-cx-word:first-child {
  font-weight: 700;
  letter-spacing: 0.01em;
}
@media (min-width: 1024px) {
  .mk-cx-claim { padding-left: 28px; width: min(33vw, 560px); }
}

/* three words to a line */
.mk-cx-claim-line { display: block; white-space: nowrap; }
.mk-cx-claim { width: auto; font-size: clamp(20px, 5.6vw, 44px); }
@media (min-width: 1024px) {
  .mk-cx-claim { width: auto; font-size: clamp(26px, 2.45vw, 46px); }
}

/* thin italic face (Josefin Sans ExtraLight Italic, "Medikallup" in SemiBold Italic), set 15% of
   the screen height lower */
.mk-cx-claim {
  top: 65%;
  font-family: "Josefin Sans", "Century Gothic", sans-serif;
  font-style: italic;
  font-weight: 200;
  line-height: 1.22;
  letter-spacing: 0;
}
.mk-cx-claim-line:first-child .mk-cx-word:first-child { font-weight: 600; letter-spacing: 0.01em; }
@media (max-width: 767px) {
  .mk-cx-claim { top: 37%; }
}

/* no line on the left of the sentence any more */
.mk-cx-claim { padding-left: 0 !important; border-left: 0 !important; }

/* second underwater scene: a title on the left in the sailboat scene's type (Instrument Serif,
   capitals, the middle line italic), its lines rising out of masks like the sailboat title */
.mk-cx-sol-title {
  position: absolute;
  top: 50%;
  left: 20px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  margin: 0;
  font-family: "Instrument Serif", ui-serif, Georgia, serif;
  font-size: clamp(44px, min(8.4vw, 11vh), 130px);
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0;
  text-transform: uppercase;
  color: #fff;
  filter: drop-shadow(0 25px 25px rgba(0, 0, 0, 0.18));
  transform: translateY(-50%);
  pointer-events: none;
}
.mk-cx-sol-line {
  display: block;
  padding-bottom: 0.04em;
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.48s ease, transform 0.48s ease;
}
.mk-cx-sol-title.is-in .mk-cx-sol-line {
  opacity: 1;
  transform: none;
  transition-duration: 0.96s;
  transition-delay: calc(var(--i) * 0.12s);
}
@media (min-width: 768px) {
  .mk-cx-sol-title { left: 96px; }
}

/* "Medikallup" as thin as the rest of the sentence */
.mk-cx-claim-line:first-child .mk-cx-word:first-child { font-weight: 200 !important; letter-spacing: 0 !important; }


/* The four mountain pages (Calipso, Leica, XO, Cvdentus: main[data-mk-mount]) take every Yirro rule: white texts, footer over the scene */
main[data-mk-mount] .mk-aqlogo-edge {
  fill: #2d8fe0;
}
main[data-mk-mount] ~ #footer {
  background: linear-gradient(rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0.4) 45%, rgba(255, 255, 255, 0.55) 100%);
}
main[data-mk-mount] .core-values-block {
  padding-bottom: 2rem;
}
main[data-mk-mount] .driving-forces {
  padding-top: 5rem;
}
main[data-mk-mount] .core-values-block .index-who-we-are,
main[data-mk-mount] .team-block .index-who-we-are {
  display: none;
}
main[data-mk-mount] .mk-feature {
  margin-bottom: 2.5rem;
}
main[data-mk-mount] .mk-rail-grid {
  gap: 3rem 2rem;
  padding-bottom: 4rem;
}
main[data-mk-mount] .core-values-block {
  padding-top: 5rem;
}
main[data-mk-mount] ~ #footer {
  background: linear-gradient(rgba(3, 14, 30, 0) 0, rgba(3, 14, 30, 0.38) 45%, rgba(3, 14, 30, 0.5) 100%);
}
main[data-mk-mount] ~ #footer .mk-foot-item,
main[data-mk-mount] ~ #footer .mk-foot-icon,
main[data-mk-mount] ~ #footer .mk-foot-title,
main[data-mk-mount] ~ #footer .mk-foot-lines,
main[data-mk-mount] ~ #footer .mk-foot-lines a,
main[data-mk-mount] ~ #footer .mk-foot-legal {
  color: #fff;
}
main[data-mk-mount] ~ #footer .mk-foot-icon,
main[data-mk-mount] ~ #footer .mk-foot-icon::after {
  border-color: rgba(255, 255, 255, 0.5);
}
main[data-mk-mount] ~ #footer .mk-foot-item:hover .mk-foot-icon {
  border-color: #fff;
  background: #fff;
  color: #2d628c;
}
main[data-mk-mount] ~ #footer .line {
  background-color: rgba(255, 255, 255, 0.3);
}
main[data-mk-mount] ~ #footer .mk-footlogo {
  --mk-logo: var(--mk-logo-dark);
}
main[data-mk-mount],
main[data-mk-mount] *:not(.arrow-container):not(.arrow-container *) {
  color: #fff !important;
}
main[data-mk-mount] h2,
main[data-mk-mount] h3,
main[data-mk-mount] p,
main[data-mk-mount] span,
main[data-mk-mount] .index-who-we-are {
  text-shadow: 0 1px 2px rgba(40, 22, 70, 0.55), 0 0 18px rgba(40, 22, 70, 0.45);
}
main[data-mk-mount] .mk-stage-dot::before {
  background: rgba(255, 255, 255, 0.4);
}
main[data-mk-mount] .mk-stage-dot.is-active::before {
  background: #fff;
}
html.mk-main-mount body #header .nav-link,
html.mk-main-mount body #header .news-w p,
html.mk-main-mount body #header .menu-cta p {
  color: #fff !important;
  text-shadow: 0 1px 2px rgba(40, 22, 70, 0.55), 0 0 18px rgba(40, 22, 70, 0.45);
}
main[data-mk-mount] .mk-lead-card .mk-demo-btn,
main[data-mk-mount] .mk-lead-card .mk-demo-btn * {
  color: #0c1c30 !important;
}

/* The mountain pages' light layer (initMountFx): over the 3D scene, under the texts */
.mk-mount-fx {
  position: fixed;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
/* Under the bright morning / noon skies of the mountain pages the white menu and title keep a soft shadow */
html.mk-main-mount body #header .nav-link span,
html.mk-main-mount body #header .news-w p,
html.mk-main-mount body #header .menu-cta p {
  text-shadow: 0 1px 10px rgba(20, 24, 40, 0.45);
}
main[data-mk-mount] .hero .logo {
  filter: drop-shadow(0 2px 14px rgba(20, 24, 40, 0.35));
}
main[data-mk-mount] .scroll-to-cta,
main[data-mk-mount] .core-values-block {
  text-shadow: 0 1px 12px rgba(20, 24, 40, 0.4);
}

/* Header: no "İletişim" link (it is in the footer now); on desktop, where the page links are shown, no "Menü" button either.
   The button stays in the DOM (the engine binds to it) and is kept on phones, where it is the only way to the pages. */
#header .news-w {
  display: none !important;
}
@media (min-width: 64.0625em) {
  #header .menu-cta {
    display: none !important;
  }
}


/* Wand uses the Smile Line background, so its footer takes the Smile Line footer rules */
main[data-scene="Wand"] ~ #footer {
  background: linear-gradient(rgba(0, 4, 12, 0) 0, rgba(0, 4, 12, 0.3) 45%, rgba(0, 4, 12, 0.45) 100%);
}
main[data-scene="Wand"] ~ #footer .mk-foot-item,
main[data-scene="Wand"] ~ #footer .mk-foot-icon,
main[data-scene="Wand"] ~ #footer .mk-foot-title,
main[data-scene="Wand"] ~ #footer .mk-foot-lines,
main[data-scene="Wand"] ~ #footer .mk-foot-lines a,
main[data-scene="Wand"] ~ #footer .mk-foot-legal {
  color: #fff;
}
main[data-scene="Wand"] ~ #footer .mk-foot-icon,
main[data-scene="Wand"] ~ #footer .mk-foot-icon::after {
  border-color: rgba(255, 255, 255, 0.5);
}
main[data-scene="Wand"] ~ #footer .mk-foot-item:hover .mk-foot-icon {
  border-color: #fff;
  background: #fff;
  color: #2d628c;
}
main[data-scene="Wand"] ~ #footer .line {
  background-color: rgba(255, 255, 255, 0.3);
}
main[data-scene="Wand"] ~ #footer .mk-footlogo {
  --mk-logo: var(--mk-logo-dark);
}

/* Calipso showroom (/calipso/, night scene): bullet lines inside the feature texts, and the "Neden CALIPSO" cards */
main[data-scene="Calipso"] .mk-feature .inner p {
  white-space: pre-line;
}
.mk-cal {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  gap: 28px;
  width: 100%;
  margin-top: 24px;
}
.mk-cal-lead {
  max-width: 22ch;
  font-family: "Century Gothic", CenturyGothic, sans-serif;
  font-size: clamp(26px, 2.6vw, 44px);
  line-height: 1.18;
  letter-spacing: 0.01em;
  color: #fff;
}
.mk-cal-lines {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 28px;
  font-family: "Josefin Sans", sans-serif;
  font-style: italic;
  font-weight: 200;
  font-size: clamp(17px, 1.35vw, 22px);
  color: rgba(214, 255, 244, 0.9);
}
.mk-cal-grid {
  display: grid;
  align-items: start;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin-top: 8px;
}
main .mk-cal .mk-cal-card {
  position: relative;
  display: block;
  height: auto;
  min-height: 0;
  padding: 28px 30px 30px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 18px;
  background: linear-gradient(160deg, rgba(40, 70, 110, 0.42), rgba(10, 22, 48, 0.55));
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 24px 60px -30px rgba(0, 0, 0, 0.6);
  overflow: hidden;
}
.mk-cal-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 2px;
  background: linear-gradient(90deg, rgba(110, 255, 210, 0.85), rgba(160, 130, 255, 0.6), transparent);
}
.mk-cal-title {
  margin-bottom: 16px;
  font-family: "Century Gothic", CenturyGothic, sans-serif;
  font-size: 13px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(214, 255, 244, 0.95);
}
.mk-cal-card ul {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.mk-cal-card li {
  position: relative;
  padding-left: 20px;
  font-size: 15px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.88);
}
.mk-cal-card li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.62em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #7dffd6;
  box-shadow: 0 0 10px rgba(125, 255, 214, 0.8);
}
@media (max-width: 47.99em) {
  .mk-cal-grid {
    grid-template-columns: 1fr;
  }
  main .mk-cal .mk-cal-card {
    padding: 22px 20px 24px;
  }
}

/* "Neden CALIPSO" (third chapter of /calipso/): aurora headline, floating microscope, counting figures,
   cards with a light that follows the pointer. Parts rise in when the section is reached (initWhy adds .is-in). */
.mk-why {
  --aur-a: #6dffd2;
  --aur-b: #8f7dff;
  --aur-c: #5ec8ff;
  grid-column: 1 / -1;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: clamp(40px, 6vw, 84px);
  width: 100%;
  margin-top: clamp(24px, 4vw, 56px);
}
@media (min-width: 64.0625em) {
  .mk-why {
    padding-right: clamp(0px, 19vw, 300px);
  }
}
.mk-why-top {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
  align-items: center;
  gap: clamp(24px, 4vw, 64px);
}
.mk-why-kicker {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 22px;
  font-family: "Century Gothic", CenturyGothic, sans-serif;
  font-size: 12px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: rgba(214, 255, 244, 0.85);
}
.mk-why-kicker span {
  width: 46px;
  height: 1px;
  background: linear-gradient(90deg, var(--aur-a), transparent);
}
main .mk-why .mk-why-title {
  font-family: "Century Gothic", CenturyGothic, sans-serif;
  font-size: clamp(34px, 4.4vw, 76px);
  font-weight: 400;
  line-height: 1.04;
  letter-spacing: -0.01em;
  color: #fff;
}
.mk-why-t1 {
  display: block;
}
main .mk-why .mk-why-t2 {
  display: block;
  font-family: "Josefin Sans", sans-serif;
  font-style: italic;
  font-weight: 200;
  background: linear-gradient(100deg, var(--aur-a), var(--aur-c) 35%, var(--aur-b) 65%, var(--aur-a));
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent !important;
  -webkit-text-fill-color: transparent;
  animation: mk-why-aurora 9s ease-in-out infinite alternate;
}
@keyframes mk-why-aurora {
  to {
    background-position: 100% 0;
  }
}
.mk-why-lines {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 34px;
}
.mk-why-lines li {
  display: flex;
  align-items: center;
  gap: 16px;
  font-family: "Josefin Sans", sans-serif;
  font-style: italic;
  font-weight: 200;
  font-size: clamp(18px, 1.5vw, 24px);
  color: rgba(255, 255, 255, 0.9);
}
.mk-why-line-bar {
  flex: none;
  width: 28px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--aur-a), var(--aur-b));
  box-shadow: 0 0 12px rgba(109, 255, 210, 0.7);
}

/* the microscope in an aurora halo */
.mk-why-visual {
  position: relative;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
}
.mk-why-halo {
  position: absolute;
  inset: 8%;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 40%, rgba(109, 255, 210, 0.45), rgba(143, 125, 255, 0.28) 45%, transparent 70%);
  filter: blur(26px);
  animation: mk-why-breathe 6s ease-in-out infinite alternate;
}
@keyframes mk-why-breathe {
  to {
    transform: scale(1.12);
    opacity: 0.75;
  }
}
.mk-why-orbit {
  position: absolute;
  inset: 4%;
  border: 1px solid rgba(214, 255, 244, 0.22);
  border-radius: 50%;
  border-top-color: rgba(109, 255, 210, 0.9);
  animation: mk-why-spin 14s linear infinite;
}
.mk-why-orbit--b {
  inset: 15%;
  border-color: rgba(200, 190, 255, 0.16);
  border-bottom-color: rgba(143, 125, 255, 0.85);
  animation-duration: 22s;
  animation-direction: reverse;
}
@keyframes mk-why-spin {
  to {
    transform: rotate(360deg);
  }
}
.mk-why-img {
  position: relative;
  width: 62%;
  max-height: 86%;
  object-fit: contain;
  filter: drop-shadow(0 30px 40px rgba(0, 0, 0, 0.55)) drop-shadow(0 0 24px rgba(109, 255, 210, 0.25));
  animation: mk-why-float 7s ease-in-out infinite alternate;
}
@keyframes mk-why-float {
  from {
    transform: translateY(-10px) rotate(-1.5deg);
  }
  to {
    transform: translateY(12px) rotate(1.5deg);
  }
}

/* figures */
.mk-why-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}
.mk-why-stat {
  padding: clamp(22px, 2.6vw, 38px) clamp(12px, 1.6vw, 26px);
}
.mk-why-stat + .mk-why-stat {
  border-left: 1px solid rgba(255, 255, 255, 0.1);
}
main .mk-why .mk-why-num {
  display: flex;
  align-items: baseline;
  gap: 2px;
  font-family: "Century Gothic", CenturyGothic, sans-serif;
  font-size: clamp(30px, 3.3vw, 58px);
  line-height: 1;
  color: #fff;
  white-space: nowrap;
}
.mk-why-num b {
  font-weight: 400;
  font-variant-numeric: tabular-nums;
}
main .mk-why .mk-why-num small {
  font-size: 0.42em;
  letter-spacing: 0.04em;
  color: var(--aur-a);
}
.mk-why-stat-label {
  margin-top: 12px;
  max-width: 22ch;
  font-size: 13px;
  line-height: 1.45;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.66);
}

/* cards */
.mk-why-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: 20px;
}
main .mk-why .mk-why-card {
  --mx: 50%;
  --my: 0%;
  position: relative;
  display: block;
  padding: 30px 32px 32px;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 22px;
  background: linear-gradient(165deg, rgba(36, 62, 104, 0.5), rgba(8, 18, 42, 0.62));
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 30px 70px -36px rgba(0, 0, 0, 0.75), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  overflow: hidden;
  transition: transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1), border-color 0.4s, box-shadow 0.5s;
}
.mk-why-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 2px;
  background: linear-gradient(90deg, var(--aur-a), var(--aur-b), transparent 85%);
}
.mk-why-spot {
  position: absolute;
  inset: 0;
  background: radial-gradient(380px circle at var(--mx) var(--my), rgba(109, 255, 210, 0.16), rgba(143, 125, 255, 0.08) 40%, transparent 65%);
  opacity: 0;
  transition: opacity 0.4s;
  pointer-events: none;
}
@media (hover: hover) {
  main .mk-why .mk-why-card:hover {
    transform: translateY(-6px);
    border-color: rgba(109, 255, 210, 0.4);
    box-shadow: 0 40px 80px -36px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(109, 255, 210, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.1);
  }
  .mk-why-card:hover .mk-why-spot {
    opacity: 1;
  }
}
.mk-why-card-head {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 22px;
}
.mk-why-icon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  border: 1px solid rgba(109, 255, 210, 0.35);
  background: radial-gradient(circle at 30% 25%, rgba(109, 255, 210, 0.25), rgba(143, 125, 255, 0.12));
  color: #c9fff0;
  box-shadow: 0 0 22px rgba(109, 255, 210, 0.18);
}
.mk-why-icon svg {
  width: 24px;
  height: 24px;
}
main .mk-why .mk-why-card-no {
  font-family: "Josefin Sans", sans-serif;
  font-style: italic;
  font-weight: 200;
  font-size: 34px;
  color: rgba(255, 255, 255, 0.22);
}
main .mk-why .mk-why-card-title {
  position: relative;
  margin-bottom: 18px;
  font-family: "Century Gothic", CenturyGothic, sans-serif;
  font-size: 19px;
  line-height: 1.3;
  color: #fff;
}
.mk-why-card ul {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 11px;
}
.mk-why-card li {
  position: relative;
  padding-left: 22px;
  font-size: 15px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.84);
}
.mk-why-card li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.6em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--aur-a);
  box-shadow: 0 0 10px rgba(109, 255, 210, 0.85);
}

/* reveal */
.mk-why[data-mk-why] .mk-why-kicker,
.mk-why[data-mk-why] .mk-why-title,
.mk-why[data-mk-why] .mk-why-lines li,
.mk-why[data-mk-why] .mk-why-visual,
.mk-why[data-mk-why] .mk-why-stat,
.mk-why[data-mk-why] .mk-why-card {
  opacity: 0;
  transform: translateY(34px);
  filter: blur(8px);
  transition: opacity 1s cubic-bezier(0.2, 0.7, 0.2, 1), transform 1.1s cubic-bezier(0.2, 0.7, 0.2, 1), filter 1s;
}
.mk-why .is-in.mk-why-kicker,
.mk-why .is-in.mk-why-title,
.mk-why .mk-why-lines.is-in li,
.mk-why .is-in.mk-why-visual,
.mk-why .is-in.mk-why-stat,
.mk-why .is-in.mk-why-card {
  opacity: 1;
  transform: none;
  filter: none;
}
.mk-why .mk-why-title {
  transition-delay: 0.12s;
}
.mk-why .mk-why-lines li {
  transition-delay: calc(0.35s + var(--i) * 0.14s);
}
.mk-why .mk-why-visual {
  transform: translateY(34px) scale(0.92);
  transition-delay: 0.2s;
}
.mk-why .mk-why-stat,
.mk-why .mk-why-card {
  transition-delay: calc(var(--i) * 0.12s);
}
.mk-why .is-in.mk-why-card {
  transition: opacity 1s cubic-bezier(0.2, 0.7, 0.2, 1) calc(var(--i) * 0.12s), filter 1s calc(var(--i) * 0.12s), transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1), border-color 0.4s, box-shadow 0.5s;
}
@media (max-width: 63.99em) {
  .mk-why-top {
    grid-template-columns: 1fr;
  }
  .mk-why-visual {
    width: min(78vw, 420px);
    justify-self: center;
  }
  .mk-why-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .mk-why-stat:nth-child(3) {
    border-left: 0;
  }
  .mk-why-stat:nth-child(n + 3) {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
  }
}
@media (max-width: 47.99em) {
  .mk-why-grid {
    grid-template-columns: 1fr;
  }
  main .mk-why .mk-why-card {
    padding: 24px 22px 26px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .mk-why *,
  .mk-why[data-mk-why] * {
    animation: none !important;
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }
}
/* the mountain pages force every text white; the "Neden CALIPSO" accents keep their colours */
main[data-mk-mount] .mk-why .mk-why-kicker {
  color: rgba(214, 255, 244, 0.88) !important;
}
main[data-mk-mount] .mk-why .mk-why-t2 {
  color: transparent !important;
  text-shadow: none !important;
}
main[data-mk-mount] .mk-why .mk-why-num small {
  color: #6dffd2 !important;
}
main[data-mk-mount] .mk-why .mk-why-stat-label {
  color: rgba(255, 255, 255, 0.68) !important;
}
main[data-mk-mount] .mk-why .mk-why-card-no {
  color: rgba(255, 255, 255, 0.24) !important;
}
main[data-mk-mount] .mk-why .mk-why-icon,
main[data-mk-mount] .mk-why .mk-why-icon * {
  color: #c9fff0 !important;
}
main[data-mk-mount] .mk-why .mk-why-card li {
  color: rgba(255, 255, 255, 0.86) !important;
}
main .mk-why .mk-why-num {
  gap: 0;
  font-size: clamp(28px, 3vw, 52px);
}
main .mk-why .mk-why-num b + small {
  margin-left: 0.18em;
}
main .mk-why .mk-why-num small:first-child {
  margin-right: 0.22em;
}
/* the four "Neden CALIPSO" cards all take the size of the tallest one */
main .mk-why .mk-why-grid {
  align-items: stretch;
  grid-auto-rows: 1fr;
}
main .mk-why .mk-why-card {
  height: 100%;
}

/* Leica showroom (/leica/, sunset scene): the same feature texts with line breaks, and a warm
   Leica red / sunset gold version of the "Neden" section */
main[data-scene="Leica"] .mk-feature .inner p {
  white-space: pre-line;
}
.mk-why--leica {
  --aur-a: #ffc27a;
  --aur-b: #ff3b3b;
  --aur-c: #ff8a5c;
}
.mk-why--leica .mk-why-kicker span {
  background: linear-gradient(90deg, #ff3b3b, transparent);
}
.mk-why--leica .mk-why-line-bar {
  box-shadow: 0 0 12px rgba(255, 120, 80, 0.75);
}
.mk-why--leica .mk-why-halo {
  background: radial-gradient(circle at 40% 40%, rgba(255, 190, 120, 0.5), rgba(255, 59, 59, 0.28) 45%, transparent 70%);
}
.mk-why--leica .mk-why-orbit {
  border-color: rgba(255, 220, 190, 0.2);
  border-top-color: rgba(255, 194, 122, 0.95);
}
.mk-why--leica .mk-why-orbit--b {
  border-color: rgba(255, 200, 180, 0.14);
  border-bottom-color: rgba(255, 59, 59, 0.85);
}
.mk-why--leica .mk-why-img {
  filter: drop-shadow(0 30px 40px rgba(0, 0, 0, 0.55)) drop-shadow(0 0 24px rgba(255, 150, 90, 0.3));
}
main .mk-why--leica .mk-why-card {
  background: linear-gradient(165deg, rgba(92, 46, 70, 0.5), rgba(30, 18, 44, 0.66));
}
.mk-why--leica .mk-why-spot {
  background: radial-gradient(380px circle at var(--mx) var(--my), rgba(255, 170, 110, 0.18), rgba(255, 59, 59, 0.08) 40%, transparent 65%);
}
@media (hover: hover) {
  main .mk-why--leica .mk-why-card:hover {
    border-color: rgba(255, 170, 110, 0.45);
    box-shadow: 0 40px 80px -36px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(255, 150, 90, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.1);
  }
}
.mk-why--leica .mk-why-icon {
  border-color: rgba(255, 170, 110, 0.4);
  background: radial-gradient(circle at 30% 25%, rgba(255, 194, 122, 0.28), rgba(255, 59, 59, 0.14));
  box-shadow: 0 0 22px rgba(255, 150, 90, 0.2);
}
.mk-why--leica .mk-why-card li::before {
  box-shadow: 0 0 10px rgba(255, 170, 110, 0.85);
}
main[data-mk-mount] .mk-why--leica .mk-why-kicker {
  color: rgba(255, 228, 200, 0.9) !important;
}
main[data-mk-mount] .mk-why--leica .mk-why-num small {
  color: #ffc27a !important;
}
main[data-mk-mount] .mk-why--leica .mk-why-icon,
main[data-mk-mount] .mk-why--leica .mk-why-icon * {
  color: #ffe2c4 !important;
}
/* Leica: the section sits over a bright sunset sky, so it gets a soft dark backdrop and the figures a glass band */
.mk-why--leica::before {
  content: "";
  position: absolute;
  inset: -80px -60px -40px;
  z-index: -1;
  background: radial-gradient(ellipse 70% 60% at 35% 35%, rgba(36, 12, 32, 0.5), rgba(36, 12, 32, 0.22) 55%, transparent 80%);
  pointer-events: none;
}
main .mk-why--leica .mk-why-t2 {
  filter: drop-shadow(0 2px 14px rgba(40, 10, 30, 0.6));
}
main .mk-why--leica .mk-why-stats {
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 20px;
  background: linear-gradient(165deg, rgba(70, 30, 56, 0.55), rgba(24, 12, 34, 0.6));
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  overflow: hidden;
}
main[data-mk-mount] .mk-why--leica .mk-why-stat-label {
  color: rgba(255, 236, 222, 0.78) !important;
}
main .mk-why--leica .mk-why-t2 {
  background-image: linear-gradient(100deg, #fff4e4, #ffd29a 35%, #ffffff 65%, #ffe0b8);
  filter: drop-shadow(0 2px 10px rgba(50, 12, 30, 0.75)) drop-shadow(0 0 2px rgba(50, 12, 30, 0.5));
}
.mk-why--leica::before {
  inset: -120px -14vw -60px -14vw;
  background: radial-gradient(ellipse 50% 50% at 42% 40%, rgba(36, 12, 32, 0.5), rgba(36, 12, 32, 0.2) 60%, transparent 100%);
}

/* CVDentus showroom (/cvdentus/, noon scene): feature texts with line breaks, films in the feature stages,
   and a CVDentus blue version of the "Neden" section over the bright sky */
main[data-scene="Cvdentus"] .mk-feature .inner p {
  white-space: pre-line;
}
.mk-stage.is-cut .mk-stage-video.is-photo {
  object-fit: cover;
  background: #0b1626;
}
.mk-why--cvd {
  --aur-a: #8fe9ff;
  --aur-b: #2f86ff;
  --aur-c: #c8f6ff;
}
.mk-why--cvd::before {
  content: "";
  position: absolute;
  inset: -120px -14vw -60px -14vw;
  z-index: -1;
  background: radial-gradient(ellipse 50% 50% at 42% 40%, rgba(6, 22, 44, 0.55), rgba(6, 22, 44, 0.22) 60%, transparent 100%);
  pointer-events: none;
}
.mk-why--cvd .mk-why-kicker span {
  background: linear-gradient(90deg, #8fe9ff, transparent);
}
.mk-why--cvd .mk-why-line-bar {
  box-shadow: 0 0 12px rgba(120, 220, 255, 0.75);
}
.mk-why--cvd .mk-why-halo {
  background: radial-gradient(circle at 40% 40%, rgba(143, 233, 255, 0.5), rgba(47, 134, 255, 0.3) 45%, transparent 70%);
}
.mk-why--cvd .mk-why-orbit {
  border-color: rgba(200, 240, 255, 0.22);
  border-top-color: rgba(143, 233, 255, 0.95);
}
.mk-why--cvd .mk-why-orbit--b {
  border-color: rgba(190, 220, 255, 0.16);
  border-bottom-color: rgba(47, 134, 255, 0.9);
}
.mk-why--cvd .mk-why-img {
  width: 78%;
  filter: drop-shadow(0 30px 40px rgba(0, 0, 0, 0.55)) drop-shadow(0 0 24px rgba(120, 220, 255, 0.3));
}
main .mk-why--cvd .mk-why-t2 {
  background-image: linear-gradient(100deg, #e6fbff, #8fe9ff 35%, #ffffff 65%, #b9ecff);
  filter: drop-shadow(0 2px 10px rgba(4, 18, 40, 0.75)) drop-shadow(0 0 2px rgba(4, 18, 40, 0.5));
}
main .mk-why--cvd .mk-why-stats {
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 20px;
  background: linear-gradient(165deg, rgba(20, 60, 104, 0.55), rgba(6, 20, 42, 0.62));
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  overflow: hidden;
}
main .mk-why--cvd .mk-why-card {
  background: linear-gradient(165deg, rgba(22, 64, 110, 0.55), rgba(6, 18, 40, 0.66));
}
.mk-why--cvd .mk-why-spot {
  background: radial-gradient(380px circle at var(--mx) var(--my), rgba(143, 233, 255, 0.18), rgba(47, 134, 255, 0.1) 40%, transparent 65%);
}
@media (hover: hover) {
  main .mk-why--cvd .mk-why-card:hover {
    border-color: rgba(143, 233, 255, 0.45);
    box-shadow: 0 40px 80px -36px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(143, 233, 255, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.1);
  }
}
.mk-why--cvd .mk-why-icon {
  border-color: rgba(143, 233, 255, 0.4);
  background: radial-gradient(circle at 30% 25%, rgba(143, 233, 255, 0.28), rgba(47, 134, 255, 0.16));
  box-shadow: 0 0 22px rgba(120, 220, 255, 0.2);
}
.mk-why--cvd .mk-why-card li::before {
  box-shadow: 0 0 10px rgba(143, 233, 255, 0.85);
}
main[data-mk-mount] .mk-why--cvd .mk-why-kicker {
  color: rgba(220, 248, 255, 0.92) !important;
}
main[data-mk-mount] .mk-why--cvd .mk-why-num small {
  color: #8fe9ff !important;
}
main[data-mk-mount] .mk-why--cvd .mk-why-stat-label {
  color: rgba(226, 244, 255, 0.8) !important;
}
main[data-mk-mount] .mk-why--cvd .mk-why-icon,
main[data-mk-mount] .mk-why--cvd .mk-why-icon * {
  color: #dcf8ff !important;
}
/* CVDentus: the photos (and films) in the feature stages sit smaller, so they stay clear of the texts and the menu */
main[data-scene="Cvdentus"] .mk-feature .mk-stage.is-cut .mk-stage-img.is-photo {
  max-width: 78%;
  max-height: 72%;
}

/* XO showroom (/xo/, sunrise scene): dawn gold and morning blue version of the "Neden" section, and the safety note */
main[data-scene="Xo"] .mk-feature .inner p {
  white-space: pre-line;
}
.mk-why--xo {
  --aur-a: #ffd9a3;
  --aur-b: #8ec9ff;
  --aur-c: #fff1dc;
}
.mk-why--xo::before {
  content: "";
  position: absolute;
  inset: -120px -14vw -60px -14vw;
  z-index: -1;
  background: radial-gradient(ellipse 50% 50% at 42% 40%, rgba(16, 24, 48, 0.5), rgba(16, 24, 48, 0.2) 60%, transparent 100%);
  pointer-events: none;
}
.mk-why--xo .mk-why-kicker span {
  background: linear-gradient(90deg, #ffd9a3, transparent);
}
.mk-why--xo .mk-why-line-bar {
  box-shadow: 0 0 12px rgba(255, 210, 150, 0.75);
}
.mk-why--xo .mk-why-halo {
  background: radial-gradient(circle at 40% 40%, rgba(255, 217, 163, 0.5), rgba(142, 201, 255, 0.3) 45%, transparent 70%);
}
.mk-why--xo .mk-why-orbit {
  border-color: rgba(255, 240, 220, 0.2);
  border-top-color: rgba(255, 217, 163, 0.95);
}
.mk-why--xo .mk-why-orbit--b {
  border-color: rgba(210, 230, 255, 0.16);
  border-bottom-color: rgba(142, 201, 255, 0.9);
}
.mk-why--xo .mk-why-img {
  width: 92%;
  filter: drop-shadow(0 30px 40px rgba(0, 0, 0, 0.5)) drop-shadow(0 0 24px rgba(255, 210, 150, 0.25));
}
main .mk-why--xo .mk-why-t2 {
  background-image: linear-gradient(100deg, #fff4e2, #ffd9a3 35%, #ffffff 65%, #cfe8ff);
  filter: drop-shadow(0 2px 10px rgba(16, 20, 44, 0.75)) drop-shadow(0 0 2px rgba(16, 20, 44, 0.5));
}
main .mk-why--xo .mk-why-stats {
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 20px;
  background: linear-gradient(165deg, rgba(44, 56, 98, 0.55), rgba(14, 18, 40, 0.62));
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  overflow: hidden;
}
main .mk-why--xo .mk-why-card {
  background: linear-gradient(165deg, rgba(48, 58, 104, 0.55), rgba(14, 18, 42, 0.66));
}
.mk-why--xo .mk-why-spot {
  background: radial-gradient(380px circle at var(--mx) var(--my), rgba(255, 217, 163, 0.18), rgba(142, 201, 255, 0.1) 40%, transparent 65%);
}
@media (hover: hover) {
  main .mk-why--xo .mk-why-card:hover {
    border-color: rgba(255, 217, 163, 0.45);
    box-shadow: 0 40px 80px -36px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(255, 217, 163, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.1);
  }
}
.mk-why--xo .mk-why-icon {
  border-color: rgba(255, 217, 163, 0.4);
  background: radial-gradient(circle at 30% 25%, rgba(255, 217, 163, 0.28), rgba(142, 201, 255, 0.16));
  box-shadow: 0 0 22px rgba(255, 210, 150, 0.2);
}
.mk-why--xo .mk-why-card li::before {
  box-shadow: 0 0 10px rgba(255, 217, 163, 0.85);
}
main[data-mk-mount] .mk-why--xo .mk-why-kicker {
  color: rgba(255, 238, 214, 0.92) !important;
}
main[data-mk-mount] .mk-why--xo .mk-why-num small {
  color: #ffd9a3 !important;
}
main[data-mk-mount] .mk-why--xo .mk-why-stat-label {
  color: rgba(240, 240, 255, 0.8) !important;
}
main[data-mk-mount] .mk-why--xo .mk-why-icon,
main[data-mk-mount] .mk-why--xo .mk-why-icon * {
  color: #fff1dc !important;
}
/* a short safety note under the cards */
main .mk-why .mk-why-note {
  max-width: 80ch;
  padding: 18px 22px;
  border-left: 2px solid var(--aur-a);
  border-radius: 0 14px 14px 0;
  background: rgba(10, 14, 32, 0.5);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  font-size: 13.5px;
  line-height: 1.6;
}
main[data-mk-mount] .mk-why .mk-why-note,
main[data-mk-mount] .mk-why .mk-why-note * {
  color: rgba(255, 255, 255, 0.82) !important;
}
main[data-mk-mount] .mk-why .mk-why-note b {
  color: var(--aur-a) !important;
  font-weight: 600;
}
/* XO: the feature photos sit smaller (clear of the menu), and the feature texts keep a stronger shadow under the bright sunrise */
main[data-scene="Xo"] .mk-feature .mk-stage.is-cut .mk-stage-img.is-photo {
  max-width: 78%;
  max-height: 72%;
}
main[data-scene="Xo"] .mk-feature-body h3,
main[data-scene="Xo"] .mk-feature-body p,
main[data-scene="Xo"] .mk-feature-body span {
  text-shadow: 0 1px 3px rgba(20, 16, 40, 0.75), 0 0 22px rgba(20, 16, 40, 0.6) !important;
}

/* Calipso with the black CALIPSO films: the films sit smaller in the stages (clear of the menu and texts),
   and the black cut-outs get a soft aurora rim so they stand out on the night scene */
main[data-scene="Calipso"] .mk-feature .mk-stage.is-cut .mk-stage-img.is-photo {
  max-width: 78%;
  max-height: 74%;
}
main[data-scene="Calipso"] .mk-herodevice-img {
  filter: drop-shadow(0 0 1px rgba(214, 255, 244, 0.7)) drop-shadow(0 0 26px rgba(109, 255, 210, 0.35)) drop-shadow(0 24px 30px rgba(0, 0, 0, 0.5));
}
main[data-scene="Calipso"] .mk-why .mk-why-img {
  filter: drop-shadow(0 0 1px rgba(214, 255, 244, 0.75)) drop-shadow(0 0 28px rgba(109, 255, 210, 0.4)) drop-shadow(0 30px 40px rgba(0, 0, 0, 0.55));
}

/* Wand showroom (/wand/, energy scene): feature stages and an electric blue "Neden" section inside the Smile Line layout */
main[data-scene="Wand"] .mk-wand-show {
  display: flex;
  flex-direction: column;
  gap: clamp(60px, 8vw, 120px);
}
main[data-scene="Wand"] .mk-feature .inner p {
  white-space: pre-line;
}
main[data-scene="Wand"] .mk-feature .mk-stage.is-cut .mk-stage-img.is-photo {
  max-width: 78%;
  max-height: 72%;
}
.mk-why--wand {
  --aur-a: #8fdcff;
  --aur-b: #5b6dff;
  --aur-c: #d2f1ff;
}
.mk-why--wand .mk-why-img {
  width: 88%;
  filter: drop-shadow(0 30px 40px rgba(0, 0, 0, 0.55)) drop-shadow(0 0 26px rgba(120, 200, 255, 0.35));
}
.mk-why--wand .mk-why-halo {
  background: radial-gradient(circle at 40% 40%, rgba(143, 220, 255, 0.45), rgba(91, 109, 255, 0.3) 45%, transparent 70%);
}
.mk-why--wand .mk-why-orbit {
  border-color: rgba(200, 235, 255, 0.2);
  border-top-color: rgba(143, 220, 255, 0.95);
}
.mk-why--wand .mk-why-orbit--b {
  border-color: rgba(190, 200, 255, 0.16);
  border-bottom-color: rgba(91, 109, 255, 0.9);
}
.mk-why--wand .mk-why-spot {
  background: radial-gradient(380px circle at var(--mx) var(--my), rgba(143, 220, 255, 0.18), rgba(91, 109, 255, 0.1) 40%, transparent 65%);
}
.mk-why--wand .mk-why-icon {
  border-color: rgba(143, 220, 255, 0.4);
  background: radial-gradient(circle at 30% 25%, rgba(143, 220, 255, 0.28), rgba(91, 109, 255, 0.16));
  box-shadow: 0 0 22px rgba(120, 200, 255, 0.2);
}
.mk-why--wand .mk-why-card li::before,
.mk-why--wand .mk-why-line-bar {
  box-shadow: 0 0 10px rgba(143, 220, 255, 0.85);
}
@media (hover: hover) {
  main .mk-why--wand .mk-why-card:hover {
    border-color: rgba(143, 220, 255, 0.45);
  }
}
main[data-mk-mount] .mk-why--wand .mk-why-kicker {
  color: rgba(214, 240, 255, 0.92) !important;
}
main[data-mk-mount] .mk-why--wand .mk-why-num small {
  color: #8fdcff !important;
}
main[data-mk-mount] .mk-why--wand .mk-why-icon,
main[data-mk-mount] .mk-why--wand .mk-why-icon * {
  color: #dff4ff !important;
}

/* Wand (/wand/), its own design: value ribbon, a "how it works" story with a sticky frame, three flow lines,
   a comparison, benefit tabs and the handpiece options. Electric blue over the energy scene. */
.mk-wd {
  --wd-a: #8fdcff;
  --wd-b: #5b6dff;
  --wd-line: rgba(143, 220, 255, 0.22);
  display: flex;
  flex-direction: column;
  gap: clamp(80px, 11vw, 160px);
  width: 100%;
  max-width: 78rem;
  margin: clamp(40px, 6vw, 90px) auto 0;
}
@media (min-width: 64.0625em) {
  .mk-wd {
    padding-right: clamp(0px, 17vw, 280px);
  }
}
main[data-mk-mount] .mk-wd .mk-wd-kicker {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
  font-family: "Century Gothic", CenturyGothic, sans-serif;
  font-size: 12px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--wd-a) !important;
}
.mk-wd-kicker::before {
  content: "";
  width: 34px;
  height: 1px;
  background: linear-gradient(90deg, var(--wd-a), transparent);
}
main .mk-wd .mk-wd-h2 {
  max-width: 24ch;
  font-family: "Century Gothic", CenturyGothic, sans-serif;
  font-size: clamp(30px, 3.4vw, 56px);
  font-weight: 400;
  line-height: 1.08;
  color: #fff;
}
main .mk-wd .mk-wd-h3 {
  font-family: "Century Gothic", CenturyGothic, sans-serif;
  font-size: clamp(22px, 2vw, 30px);
  line-height: 1.2;
  color: #fff;
}
main[data-mk-mount] .mk-wd .mk-wd-p {
  max-width: 52ch;
  font-size: 16px;
  line-height: 1.65;
  color: rgba(225, 240, 255, 0.82) !important;
}

/* value ribbon */
.mk-wd-ribbon {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid var(--wd-line);
  border-bottom: 1px solid var(--wd-line);
}
.mk-wd-rib {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 26px 20px 26px 0;
}
.mk-wd-rib + .mk-wd-rib {
  padding-left: 22px;
  border-left: 1px solid var(--wd-line);
}
main .mk-wd .mk-wd-rib b {
  font-family: "Century Gothic", CenturyGothic, sans-serif;
  font-size: clamp(26px, 2.6vw, 42px);
  font-weight: 400;
  line-height: 1;
  color: #fff;
  text-shadow: 0 0 24px rgba(143, 220, 255, 0.45);
}
main[data-mk-mount] .mk-wd .mk-wd-rib span {
  font-size: 13px;
  line-height: 1.45;
  color: rgba(214, 236, 255, 0.7) !important;
}

/* how it works: the frame stays while the steps scroll past */
.mk-wd-how-head {
  margin-bottom: clamp(30px, 4vw, 60px);
}
.mk-wd-how-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(30px, 5vw, 80px);
  align-items: start;
}
.mk-wd-frame {
  position: sticky;
  top: 18vh;
}
.mk-wd-frame-inner {
  position: relative;
  aspect-ratio: 4 / 4.4;
  border-radius: 28px;
  overflow: hidden;
  background: #f4f7fb;
  box-shadow: 0 0 0 1px rgba(143, 220, 255, 0.35), 0 0 60px -10px rgba(91, 140, 255, 0.55), 0 40px 80px -30px rgba(0, 0, 0, 0.8);
}
.mk-wd-shot {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 6%;
  object-fit: contain;
  opacity: 0;
  transform: scale(1.06);
  filter: blur(6px);
  transition: opacity 0.8s ease, transform 1.2s cubic-bezier(0.2, 0.7, 0.2, 1), filter 0.8s ease;
}
.mk-wd-shot.is-on {
  opacity: 1;
  transform: none;
  filter: none;
}
.mk-wd-scan {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 0%, rgba(91, 160, 255, 0.16) 48%, rgba(143, 220, 255, 0.35) 50%, rgba(91, 160, 255, 0.16) 52%, transparent 100%);
  background-size: 100% 260%;
  mix-blend-mode: multiply;
  animation: mk-wd-scan 5s linear infinite;
  pointer-events: none;
}
@keyframes mk-wd-scan {
  from {
    background-position: 0 100%;
  }
  to {
    background-position: 0 -160%;
  }
}
.mk-wd-progress {
  display: flex;
  gap: 8px;
  margin-top: 18px;
}
.mk-wd-progress span {
  flex: 1;
  height: 3px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.14);
  transition: background 0.5s;
}
.mk-wd-progress span.is-on {
  background: linear-gradient(90deg, var(--wd-a), var(--wd-b));
  box-shadow: 0 0 12px rgba(143, 220, 255, 0.7);
}
.mk-wd-steps {
  display: flex;
  flex-direction: column;
}
.mk-wd-step {
  position: relative;
  min-height: 62vh;
  padding: 8vh 0 8vh 28px;
  border-left: 1px solid rgba(255, 255, 255, 0.1);
  opacity: 0.32;
  transition: opacity 0.6s ease;
}
.mk-wd-step::before {
  content: "";
  position: absolute;
  left: -1px;
  top: 8vh;
  width: 2px;
  height: 0;
  background: linear-gradient(180deg, var(--wd-a), var(--wd-b));
  box-shadow: 0 0 14px rgba(143, 220, 255, 0.8);
  transition: height 0.8s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.mk-wd-step.is-on {
  opacity: 1;
}
.mk-wd-step.is-on::before {
  height: 120px;
}
main .mk-wd .mk-wd-no {
  display: block;
  margin-bottom: 14px;
  font-family: "Josefin Sans", sans-serif;
  font-style: italic;
  font-weight: 200;
  font-size: clamp(54px, 5.5vw, 92px);
  line-height: 1;
  color: transparent !important;
  -webkit-text-stroke: 1px rgba(143, 220, 255, 0.75);
  text-shadow: none !important;
}
.mk-wd-step-img {
  display: none;
}
.mk-wd-step .mk-wd-p {
  margin-top: 16px;
}
.mk-wd-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 20px;
}
main[data-mk-mount] .mk-wd .mk-wd-chips span {
  padding: 7px 14px;
  border: 1px solid rgba(143, 220, 255, 0.35);
  border-radius: 999px;
  background: rgba(20, 40, 90, 0.4);
  font-size: 13px;
  letter-spacing: 0.02em;
  color: #e6f6ff !important;
  text-shadow: none !important;
}

/* three flow lines: drops run through each pipe at its own pace */
.mk-wd-flow {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(24px, 4vw, 60px);
  align-items: center;
}
.mk-wd-flows {
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.mk-wd-flowline {
  display: grid;
  grid-template-columns: 120px 1fr;
  align-items: center;
  gap: 18px;
}
main .mk-wd .mk-wd-flowname {
  font-family: "Century Gothic", CenturyGothic, sans-serif;
  font-size: 16px;
  letter-spacing: 0.04em;
  color: #fff;
}
.mk-wd-pipe {
  position: relative;
  height: 14px;
  border-radius: 14px;
  border: 1px solid rgba(143, 220, 255, 0.3);
  background: rgba(10, 24, 60, 0.6);
  overflow: hidden;
}
.mk-wd-pipe i {
  position: absolute;
  top: 3px;
  left: -10%;
  width: 18px;
  height: 6px;
  border-radius: 6px;
  background: linear-gradient(90deg, transparent, var(--wd-a));
  box-shadow: 0 0 10px rgba(143, 220, 255, 0.9);
  animation: mk-wd-drop var(--t, 4s) linear infinite;
}
.mk-wd-pipe i:nth-child(2) {
  animation-delay: calc(var(--t, 4s) * -0.25);
}
.mk-wd-pipe i:nth-child(3) {
  animation-delay: calc(var(--t, 4s) * -0.5);
}
.mk-wd-pipe i:nth-child(4) {
  animation-delay: calc(var(--t, 4s) * -0.75);
}
.mk-wd-flowline--slow {
  --t: 6s;
}
.mk-wd-flowline--mid {
  --t: 3.2s;
}
.mk-wd-flowline--fast {
  --t: 1.6s;
}
@keyframes mk-wd-drop {
  to {
    left: 105%;
  }
}

/* comparison */
.mk-wd-vs {
  position: relative;
  padding: clamp(30px, 4vw, 56px);
  border-radius: 28px;
  border: 1px solid rgba(143, 220, 255, 0.22);
  background: radial-gradient(120% 140% at 0% 0%, rgba(91, 109, 255, 0.28), transparent 55%), linear-gradient(160deg, rgba(16, 32, 72, 0.7), rgba(6, 12, 30, 0.8));
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  overflow: hidden;
}
.mk-wd-vs ul {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px 40px;
  margin-top: 32px;
}
main[data-mk-mount] .mk-wd .mk-wd-vs li {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  font-size: 17px;
  line-height: 1.5;
  color: #fff !important;
}
.mk-wd-tick {
  flex: none;
  position: relative;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--wd-a), var(--wd-b));
  box-shadow: 0 0 16px rgba(143, 220, 255, 0.6);
}
.mk-wd-tick::after {
  content: "";
  position: absolute;
  left: 9px;
  top: 6px;
  width: 6px;
  height: 11px;
  border: solid #061230;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/* benefit tabs */
.mk-wd-tabbar {
  position: relative;
  display: inline-flex;
  gap: 4px;
  padding: 5px;
  border: 1px solid rgba(143, 220, 255, 0.25);
  border-radius: 999px;
  background: rgba(10, 22, 52, 0.6);
}
main[data-mk-mount] .mk-wd .mk-wd-tab {
  position: relative;
  z-index: 1;
  padding: 12px 26px;
  border-radius: 999px;
  font-family: "Century Gothic", CenturyGothic, sans-serif;
  font-size: 15px;
  letter-spacing: 0.04em;
  color: rgba(225, 240, 255, 0.7) !important;
  cursor: pointer;
  transition: color 0.3s;
}
main[data-mk-mount] .mk-wd .mk-wd-tab.is-on {
  color: #061230 !important;
  text-shadow: none !important;
}
.mk-wd-tabglow {
  position: absolute;
  top: 5px;
  bottom: 5px;
  left: var(--x, 5px);
  width: var(--w, 0);
  border-radius: 999px;
  background: linear-gradient(135deg, #dff4ff, var(--wd-a));
  box-shadow: 0 0 22px rgba(143, 220, 255, 0.6);
  transition: left 0.45s cubic-bezier(0.2, 0.7, 0.2, 1), width 0.45s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.mk-wd-panel {
  display: none;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 40px;
  margin-top: 30px;
}
.mk-wd-panel.is-on {
  display: grid;
  animation: mk-wd-in 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
}
@keyframes mk-wd-in {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
}
main[data-mk-mount] .mk-wd .mk-wd-panel li {
  display: flex;
  gap: 18px;
  padding: 20px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 16px;
  line-height: 1.55;
  color: rgba(235, 245, 255, 0.9) !important;
}
main .mk-wd .mk-wd-pnum {
  flex: none;
  width: 28px;
  font-family: "Josefin Sans", sans-serif;
  font-style: italic;
  font-weight: 200;
  font-size: 22px;
  line-height: 1.1;
  color: var(--wd-a) !important;
}

/* handpieces and the box */
.mk-wd-box {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: clamp(30px, 5vw, 70px);
  align-items: center;
}
.mk-wd-needles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 26px 0;
}
main[data-mk-mount] .mk-wd .mk-wd-needles li {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  column-gap: 14px;
  align-items: center;
  padding: 16px 18px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 18px;
  background: rgba(10, 22, 52, 0.55);
  color: #fff !important;
}
.mk-wd-dot {
  grid-row: 1 / 3;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--c);
  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.06), 0 0 16px var(--c);
}
main[data-mk-mount] .mk-wd .mk-wd-needles b {
  font-weight: 600;
  font-size: 15px;
}
main[data-mk-mount] .mk-wd .mk-wd-needles span:not(.mk-wd-dot) {
  font-size: 13px;
  color: rgba(214, 236, 255, 0.72) !important;
}
.mk-wd-boxlist {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
main[data-mk-mount] .mk-wd .mk-wd-boxlist li {
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px dashed rgba(143, 220, 255, 0.35);
  font-size: 13px;
  color: rgba(225, 240, 255, 0.85) !important;
}
.mk-wd-box-visual {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 1;
}
.mk-wd-box-glow {
  position: absolute;
  inset: 10%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(143, 220, 255, 0.45), rgba(91, 109, 255, 0.2) 50%, transparent 72%);
  filter: blur(24px);
}
.mk-wd-box-visual img {
  position: relative;
  width: 78%;
  filter: drop-shadow(0 30px 40px rgba(0, 0, 0, 0.6));
  animation: mk-why-float 7s ease-in-out infinite alternate;
}

/* reveal as the parts are reached */
.mk-wd [data-wd-reveal] {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.9s cubic-bezier(0.2, 0.7, 0.2, 1), transform 1s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.mk-wd [data-wd-reveal].is-in {
  opacity: 1;
  transform: none;
}

@media (max-width: 63.99em) {
  .mk-wd-ribbon {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .mk-wd-rib:nth-child(3) {
    padding-left: 0;
    border-left: 0;
  }
  .mk-wd-rib:nth-child(n + 3) {
    border-top: 1px solid var(--wd-line);
  }
  .mk-wd-how-body,
  .mk-wd-flow,
  .mk-wd-box {
    grid-template-columns: 1fr;
  }
  .mk-wd-frame {
    display: none;
  }
  .mk-wd-step {
    min-height: 0;
    padding: 30px 0 30px 22px;
    opacity: 1;
  }
  .mk-wd-step-img {
    display: block;
    width: 100%;
    max-width: 420px;
    margin-bottom: 18px;
    border-radius: 20px;
    background: #f4f7fb;
  }
  .mk-wd-vs ul,
  .mk-wd-panel {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 47.99em) {
  .mk-wd-needles {
    grid-template-columns: 1fr;
  }
  .mk-wd-flowline {
    grid-template-columns: 96px 1fr;
  }
}
@media (prefers-reduced-motion: reduce) {
  .mk-wd *,
  .mk-wd [data-wd-reveal] {
    animation: none !important;
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}
main .mk-wd .mk-wd-rib b {
  white-space: nowrap;
  font-size: clamp(22px, 2.3vw, 40px);
}
@media (max-width: 47.99em) {
  main .mk-wd .mk-wd-rib b {
    white-space: normal;
    font-size: 24px;
  }
}
@media (max-width: 47.99em) {
  main .mk-wd .mk-wd-rib b {
    font-size: 19px;
  }
  .mk-wd-rib {
    padding-right: 10px;
  }
  .mk-wd-rib + .mk-wd-rib {
    padding-left: 12px;
  }
}
@media (max-width: 47.99em) {
  .mk-wd-rib:nth-child(3) {
    padding-left: 0;
  }
}

/* Wand: "Lokal anestezide / dijital dönem" as a headline, the second line in a flowing electric gradient */
@media (min-width: 64.0625em) {
  main[data-scene="Wand"] .advantages-informations {
    grid-column: 2 / 17 !important;
  }
}
main[data-scene="Wand"] .advantages-informations h3 {
  display: flex;
  flex-direction: column;
  gap: 0.08em;
  margin-bottom: clamp(24px, 3vw, 40px);
}
main[data-scene="Wand"] .mk-wd-lt1 {
  font-family: "Century Gothic", CenturyGothic, sans-serif;
  font-size: clamp(30px, 3.6vw, 60px);
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: #fff !important;
  white-space: nowrap;
}
main[data-scene="Wand"] .mk-wd-lt2 {
  position: relative;
  display: inline-block;
  width: fit-content;
  padding: 0 0.12em 0.18em 0;
  font-family: "Josefin Sans", sans-serif;
  font-style: italic;
  font-weight: 200;
  font-size: clamp(48px, 6.6vw, 112px);
  line-height: 1;
  white-space: nowrap;
  background: linear-gradient(100deg, #ffffff 0%, #8fdcff 25%, #5b6dff 50%, #8fdcff 75%, #ffffff 100%);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent !important;
  -webkit-text-fill-color: transparent;
  text-shadow: none !important;
  filter: drop-shadow(0 0 18px rgba(120, 190, 255, 0.55)) drop-shadow(0 0 2px rgba(143, 220, 255, 0.6));
  animation: mk-wd-flowtext 7s ease-in-out infinite alternate;
}
@keyframes mk-wd-flowtext {
  to {
    background-position: 100% 0;
  }
}
main[data-scene="Wand"] .mk-wd-lt-line {
  position: absolute;
  left: 0.04em;
  right: 0;
  bottom: 0;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, #8fdcff 30%, #5b6dff 60%, transparent);
  background-size: 200% 100%;
  box-shadow: 0 0 14px rgba(143, 220, 255, 0.8);
  animation: mk-wd-sweep 3.2s linear infinite;
}
@keyframes mk-wd-sweep {
  from {
    background-position: 200% 0;
  }
  to {
    background-position: -200% 0;
  }
}
@media (max-width: 47.99em) {
  main[data-scene="Wand"] .mk-wd-lt1,
  main[data-scene="Wand"] .mk-wd-lt2 {
    white-space: normal;
  }
}
@media (prefers-reduced-motion: reduce) {
  main[data-scene="Wand"] .mk-wd-lt2,
  main[data-scene="Wand"] .mk-wd-lt-line {
    animation: none;
  }
}
/* the headline always comes before its text (the original layout puts it after on phones) */
main[data-scene="Wand"] .advantages-informations {
  display: flex !important;
  flex-direction: column !important;
}
main[data-scene="Wand"] .advantages-informations h3 {
  order: -1;
}

/* Swarovski: the film between the first screen and "Zeiss x Swarovski" now shows the whole, uncut frame
   in the same place and size, in a rounded frame instead of melting into the page */
.mk-gapfilm--full > video {
  aspect-ratio: 3864 / 2144;
  object-fit: cover;
  border-radius: 1.4rem;
  -webkit-mask-image: none;
  mask-image: none;
  background: #0b1626;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12), 0 40px 90px -40px rgba(0, 0, 0, 0.75);
}

/* Swarovski film, edge to edge: the frame spans the whole screen width (flush on the left and right),
   its top and bottom melt into the page, and a navy wash ties its white studio backdrop to the scene */
.mk-gapfilm--full {
  position: relative;
  width: 100vw;
  max-width: none;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 22%, #000 78%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0, #000 22%, #000 78%, transparent 100%);
}
.mk-gapfilm--full > video {
  width: 100%;
  max-width: none;
  border-radius: 0;
  box-shadow: none;
  filter: saturate(0.82) brightness(0.9) contrast(1.04);
}
.mk-gapfilm--full::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(120% 90% at 50% 50%, transparent 40%, rgba(3, 10, 26, 0.55) 100%),
    linear-gradient(180deg, rgba(10, 26, 58, 0.35), rgba(10, 26, 58, 0.12) 40%, rgba(10, 26, 58, 0.12) 60%, rgba(10, 26, 58, 0.4));
  mix-blend-mode: multiply;
}

/* İletişim: the animated drawing of Egs Business Park above the contact details (initEgs) */
.mk-egs {
  position: relative;
  width: 100%;
  height: clamp(420px, 92vh, 980px);
  overflow: hidden;
  background: #0d2140;
}
.mk-egs-stage,
.mk-egs-stage > svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.mk-egs-stage [data-depth] {
  transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.mk-egs-fade {
  position: absolute;
  inset: auto 0 0 0;
  height: 22%;
  background: linear-gradient(180deg, transparent, #2d628c);
  pointer-events: none;
}
.mk-egs-win {
  animation: mk-egs-win 9s ease-in-out infinite;
}
@keyframes mk-egs-win {
  0%, 100% { opacity: 0.9; }
  40% { opacity: 0.15; }
  55% { opacity: 0.85; }
}
.mk-egs-stars circle {
  animation: mk-egs-twinkle 4s ease-in-out infinite;
}
@keyframes mk-egs-twinkle {
  50% { opacity: 0.2; }
}
.mk-egs-sun {
  animation: mk-egs-sun 8s ease-in-out infinite alternate;
  transform-origin: 800px 452px;
}
@keyframes mk-egs-sun {
  to { transform: scale(1.08); opacity: 0.85; }
}
.mk-egs-flag {
  transform-box: fill-box;
  transform-origin: 0 50%;
  animation: mk-egs-flag 1.6s ease-in-out infinite alternate;
}
@keyframes mk-egs-flag {
  from { transform: skewY(-6deg) scaleX(0.92); }
  to { transform: skewY(5deg) scaleX(1.04); }
}
.mk-egs-cloud {
  animation: mk-egs-cloud 90s linear infinite;
}
@keyframes mk-egs-cloud {
  from { transform: translateX(-260px); }
  to { transform: translateX(1860px); }
}
.mk-egs-bird {
  animation: mk-egs-bird 26s linear infinite;
}
@keyframes mk-egs-bird {
  0% { transform: translate(-40px, var(--by)) scaleY(1); }
  25% { transform: translate(420px, calc(var(--by) - 20px)) scaleY(0.4); }
  50% { transform: translate(840px, var(--by)) scaleY(1); }
  75% { transform: translate(1260px, calc(var(--by) - 24px)) scaleY(0.4); }
  100% { transform: translate(1680px, var(--by)) scaleY(1); }
}
.mk-egs-tree {
  animation: mk-egs-sway 4s ease-in-out infinite alternate;
}
@keyframes mk-egs-sway {
  from { transform: rotate(-2.5deg); }
  to { transform: rotate(2.5deg); }
}
.mk-egs-lane {
  animation: mk-egs-lane 2.4s linear infinite;
}
@keyframes mk-egs-lane {
  to { stroke-dashoffset: -34; }
}
.mk-egs-canal {
  animation: mk-egs-canal 3s linear infinite;
  opacity: 0.85;
}
@keyframes mk-egs-canal {
  to { stroke-dashoffset: -40; }
}
.mk-egs-ripple {
  animation: mk-egs-ripple 3s ease-out infinite;
}
@keyframes mk-egs-ripple {
  from { transform: scale(0.4); opacity: 0.9; }
  to { transform: scale(2.6); opacity: 0; }
}
.mk-egs-jet {
  animation: mk-egs-jet 0.9s ease-in-out infinite alternate;
}
@keyframes mk-egs-jet {
  to { transform: scaleY(0.75); opacity: 0.6; }
}
/* the pin above the middle tower, and the address card */
.mk-egs-pin {
  position: absolute;
  left: 50%;
  top: 14%;
  width: 34px;
  height: 46px;
  transform: translateX(-50%);
  animation: mk-egs-pin 2.4s ease-in-out infinite;
  filter: drop-shadow(0 8px 12px rgba(0, 0, 0, 0.4));
}
.mk-egs-pin svg {
  position: relative;
  width: 100%;
  height: 100%;
}
@keyframes mk-egs-pin {
  50% { transform: translate(-50%, -10px); }
}
.mk-egs-pin-ring {
  position: absolute;
  left: 50%;
  bottom: -6px;
  width: 60px;
  height: 18px;
  margin-left: -30px;
  border: 2px solid rgba(255, 255, 255, 0.7);
  border-radius: 50%;
  animation: mk-egs-ring 2.4s ease-out infinite;
}
.mk-egs-pin-ring--b {
  animation-delay: 1.2s;
}
@keyframes mk-egs-ring {
  from { transform: scale(0.3); opacity: 1; }
  to { transform: scale(1.8); opacity: 0; }
}
.mk-egs-card {
  position: absolute;
  left: calc(50% + 46px);
  top: calc(14% - 6px);
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-width: 280px;
  padding: 14px 18px 16px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 16px;
  background: rgba(10, 24, 50, 0.55);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: #fff;
  font-size: 13px;
  line-height: 1.45;
  box-shadow: 0 20px 40px -20px rgba(0, 0, 0, 0.6);
}
.mk-egs-card-kicker {
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: #ffd9a0;
}
.mk-egs-card strong {
  font-family: "Century Gothic", CenturyGothic, sans-serif;
  font-size: 18px;
  font-weight: 400;
}
.mk-egs-card a {
  margin-top: 6px;
  width: fit-content;
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 3px;
}
@media (max-width: 767px) {
  .mk-egs {
    height: 78vh;
  }
  .mk-egs-pin {
    top: 22%;
  }
  .mk-egs-card {
    left: 16px;
    right: 16px;
    top: auto;
    bottom: 12%;
    max-width: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .mk-egs *,
  .mk-egs-pin {
    animation: none !important;
  }
}
/* the drawing starts at the very top of the page (under the menu); the contact details keep their own top space below it */
main:has(> .mk-egs) {
  padding-top: 0 !important;
}
main > .mk-egs + .grid {
  padding-top: clamp(48px, 7vw, 110px);
}
/* the pin is now drawn inside the picture, on the middle tower; the card is placed beside it by initEgs */
.mk-egs .mk-egs-pin {
  position: static;
  width: auto;
  height: auto;
  transform: none;
  animation: none;
  filter: drop-shadow(0 8px 10px rgba(0, 0, 0, 0.45));
}
.mk-egs-pin-body {
  animation: mk-egs-pinbob 2.4s ease-in-out infinite;
}
@keyframes mk-egs-pinbob {
  50% { transform: translateY(-10px); }
}
.mk-egs .mk-egs-pin-ring {
  position: static;
  width: auto;
  height: auto;
  margin: 0;
  border: 0;
  fill: none;
  stroke: rgba(255, 255, 255, 0.8);
  stroke-width: 2;
  transform-box: fill-box;
  transform-origin: center;
  animation: mk-egs-ring 2.4s ease-out infinite;
}
.mk-egs .mk-egs-pin-ring--b {
  animation-delay: 1.2s;
}
.mk-egs-card {
  left: auto;
  top: auto;
}
@media (min-width: 768px) {
  .mk-egs-card {
    left: 60%;
    top: 30%;
  }
}
/* wide screens: the section grows with the width so the towers are never cut at the top */
@media (min-width: 768px) {
  .mk-egs {
    height: clamp(420px, max(92vh, 56vw), 1150px);
  }
}

/* İletişim 3D: the canvas fills the section; the pin (placed by initEgs on the middle tower) and its card */
.mk-egs-stage canvas {
  display: block;
  width: 100%;
  height: 100%;
}
.mk-egs > .mk-egs-pin {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 2;
  width: 0;
  height: 0;
  animation: none;
  filter: none;
  pointer-events: none;
}
.mk-egs > .mk-egs-pin svg {
  position: absolute;
  left: -17px;
  top: -48px;
  width: 34px;
  height: 46px;
  animation: mk-egs-pinbob 2.4s ease-in-out infinite;
  filter: drop-shadow(0 8px 12px rgba(0, 0, 0, 0.45));
}
.mk-egs > .mk-egs-pin .mk-egs-pin-ring {
  position: absolute;
  left: -30px;
  top: -9px;
  width: 60px;
  height: 18px;
  margin: 0;
  border: 2px solid rgba(255, 255, 255, 0.8);
  border-radius: 50%;
  animation: mk-egs-ring 2.4s ease-out infinite;
}
.mk-egs > .mk-egs-pin .mk-egs-pin-ring--b {
  animation-delay: 1.2s;
}
.mk-egs .mk-egs-pin-body {
  animation: none;
}
.mk-egs-card {
  z-index: 3;
  opacity: 0;
  transition: opacity 0.8s ease;
}
.mk-egs.is-3d .mk-egs-card,
.mk-egs.is-flat .mk-egs-card {
  opacity: 1;
}
.mk-egs.is-flat {
  background: url(/medikallup/scene/egs-flat.jpg) center / cover no-repeat;
}
.mk-egs.is-flat > .mk-egs-pin {
  display: none;
}

/* İletişim showroom (.mk-ct): headline, glowing contact cards, the map with directions, the demo call.
   The original contact grid stays in the page for the engine but is hidden. */
main > .mk-ct-old {
  display: none !important;
}
main > .mk-egs + .grid {
  padding-top: 0;
}
.mk-ct {
  --ct-a: #8fd3ff;
  --ct-b: #4f7dff;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: clamp(36px, 5vw, 70px);
  max-width: 78rem;
  margin: 0 auto;
  padding: clamp(30px, 5vw, 70px) clamp(16px, 5vw, 56px) clamp(60px, 8vw, 110px);
  color: #fff;
}
.mk-ct-kicker {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
  font-family: "Century Gothic", CenturyGothic, sans-serif;
  font-size: 12px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--ct-a);
}
.mk-ct-kicker span {
  width: 34px;
  height: 1px;
  background: linear-gradient(90deg, var(--ct-a), transparent);
}
.mk-ct-title {
  max-width: 22ch;
  font-family: "Century Gothic", CenturyGothic, sans-serif;
  font-size: clamp(32px, 4.4vw, 72px);
  font-weight: 400;
  line-height: 1.06;
}
.mk-ct-title span {
  display: block;
}
.mk-ct-title em {
  display: block;
  font-family: "Josefin Sans", sans-serif;
  font-style: italic;
  font-weight: 200;
  background: linear-gradient(100deg, #ffffff, var(--ct-a) 40%, #c9b8ff 70%, #ffffff);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  animation: mk-wd-flowtext 8s ease-in-out infinite alternate;
}
.mk-ct-sub {
  margin-bottom: -30px;
  font-size: 13px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(220, 236, 255, 0.7);
}
.mk-ct-cards {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 16px;
}
.mk-ct-card {
  --mx: 50%;
  --my: 0%;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: 210px;
  padding: 24px 22px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 22px;
  background: linear-gradient(165deg, rgba(40, 80, 130, 0.55), rgba(10, 26, 54, 0.7));
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 30px 60px -36px rgba(0, 0, 0, 0.75), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  overflow: hidden;
  transition: transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1), border-color 0.4s;
}
.mk-ct-glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(320px circle at var(--mx) var(--my), rgba(143, 211, 255, 0.2), transparent 60%);
  opacity: 0;
  transition: opacity 0.4s;
  pointer-events: none;
}
@media (hover: hover) {
  .mk-ct-card:hover {
    transform: translateY(-6px);
    border-color: rgba(143, 211, 255, 0.45);
  }
  .mk-ct-card:hover .mk-ct-glow {
    opacity: 1;
  }
}
.mk-ct-icon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid rgba(143, 211, 255, 0.4);
  background: radial-gradient(circle at 30% 25%, rgba(143, 211, 255, 0.3), rgba(79, 125, 255, 0.14));
  color: #e3f3ff;
  box-shadow: 0 0 22px rgba(120, 190, 255, 0.25);
}
.mk-ct-icon svg {
  width: 22px;
  height: 22px;
}
.mk-ct-card-title {
  font-family: "Century Gothic", CenturyGothic, sans-serif;
  font-size: 13px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(220, 236, 255, 0.75);
}
.mk-ct-lines {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 15px;
  line-height: 1.45;
}
.mk-ct-lines a,
.mk-ct-lines span {
  color: #fff;
  text-decoration: none;
}
.mk-ct-lines a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}
.mk-ct-card--address {
  grid-column: span 1;
}
.mk-ct-map {
  position: relative;
  min-height: 440px;
  border-radius: 28px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 50px 90px -50px rgba(0, 0, 0, 0.8);
}
.mk-ct-map iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  filter: grayscale(0.35) contrast(1.05) saturate(0.9);
}
.mk-ct-map-card {
  position: absolute;
  left: clamp(16px, 3vw, 36px);
  bottom: clamp(16px, 3vw, 36px);
  max-width: 360px;
  padding: 26px 26px 24px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 22px;
  background: rgba(8, 22, 48, 0.78);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.mk-ct-map-title {
  font-family: "Century Gothic", CenturyGothic, sans-serif;
  font-size: 26px;
  font-weight: 400;
}
.mk-ct-map-address {
  margin-top: 8px;
  font-size: 15px;
  line-height: 1.5;
  color: rgba(225, 238, 255, 0.85);
}
.mk-ct-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 20px;
}
.mk-ct-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 22px;
  border-radius: 999px;
  background: linear-gradient(135deg, #ffffff, #d8ecff);
  color: #0b2142 !important;
  font-family: "Century Gothic", CenturyGothic, sans-serif;
  font-size: 14px;
  letter-spacing: 0.04em;
  text-decoration: none;
  box-shadow: 0 10px 30px -12px rgba(143, 211, 255, 0.8);
  transition: transform 0.3s, box-shadow 0.3s;
}
.mk-ct-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 36px -10px rgba(143, 211, 255, 0.95);
}
.mk-ct-btn--ghost {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.4);
  color: #fff !important;
  box-shadow: none;
}
.mk-ct-btn--big {
  padding: 18px 34px;
  font-size: 16px;
}
.mk-ct-demo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  padding: clamp(28px, 4vw, 50px);
  border-radius: 28px;
  border: 1px solid rgba(143, 211, 255, 0.25);
  background: radial-gradient(120% 160% at 0% 0%, rgba(79, 125, 255, 0.35), transparent 55%), linear-gradient(160deg, rgba(20, 50, 96, 0.8), rgba(6, 16, 40, 0.85));
}
.mk-ct-demo-title {
  font-family: "Century Gothic", CenturyGothic, sans-serif;
  font-size: clamp(24px, 2.6vw, 40px);
  font-weight: 400;
  line-height: 1.15;
}
.mk-ct-demo-text {
  margin-top: 10px;
  max-width: 52ch;
  font-size: 15px;
  line-height: 1.6;
  color: rgba(225, 238, 255, 0.8);
}
.mk-ct-legal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-top: 26px;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  font-size: 13px;
  color: rgba(225, 238, 255, 0.7);
}
.mk-ct-legal ul {
  display: flex;
  gap: 22px;
}
.mk-ct-legal a {
  color: #fff;
  text-decoration: none;
}
@media (max-width: 1100px) {
  .mk-ct-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 767px) {
  .mk-ct-cards {
    grid-template-columns: 1fr;
  }
  .mk-ct-card {
    min-height: 0;
  }
  .mk-ct-map {
    min-height: 520px;
  }
  .mk-ct-map-card {
    right: 16px;
    max-width: none;
  }
  .mk-ct-demo {
    flex-direction: column;
    align-items: flex-start;
  }
}
.mk-ct .mk-foot-svg > * {
  stroke-dashoffset: 0;
}
main > section.mk-ct {
  padding: clamp(30px, 5vw, 70px) clamp(16px, 5vw, 56px) clamp(60px, 8vw, 110px);
  margin: 0 auto;
}

/* İletişim: the 3D scene is the page's fixed backdrop; the first screen is a window onto it and the
   showroom scrolls over it while the camera travels to the sea */
main:has(> .mk-egs) {
  background: transparent !important;
}
.mk-egs {
  height: 100vh;
  height: 100svh;
  background: none;
  overflow: visible;
}
@media (min-width: 768px) {
  .mk-egs {
    height: 100vh;
  }
}
.mk-egs .mk-egs-stage {
  position: fixed;
  inset: 0;
  z-index: -1;
  background: #0d2140;
}
.mk-egs-fade {
  display: none;
}
.mk-egs > .mk-egs-pin,
.mk-egs-card {
  position: fixed;
  transition: opacity 0.4s ease;
}
.mk-ct-title,
.mk-ct-kicker,
.mk-ct-sub {
  text-shadow: 0 2px 18px rgba(4, 14, 34, 0.65);
}
.mk-ct-head {
  width: fit-content;
  padding: clamp(20px, 3vw, 36px) clamp(20px, 3vw, 40px);
  border-radius: 28px;
  background: linear-gradient(160deg, rgba(8, 22, 48, 0.55), rgba(8, 22, 48, 0.25));
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.12);
}
.mk-ct-sub {
  margin-bottom: -24px;
}
.mk-ct-legal {
  padding: 22px 24px;
  border-top: 0;
  border-radius: 18px;
  background: rgba(8, 22, 48, 0.6);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
/* room at the end so the camera reaches the waves with the sea in view */
main:has(> .mk-egs) > section.mk-ct {
  padding-bottom: 70vh;
}

/* İletişim: a round button with a location pin above the WhatsApp button, same size and outline;
   a slow red ring calls attention to it and on hover it fills red. Leads to the contact page. */
.buttons-container .mk-loc {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  color: #ff4d57;
  pointer-events: all;
  cursor: pointer;
  border: 1.5px solid rgba(255, 255, 255, 0.15);
  border-radius: 50%;
  transition: color 0.35s, background-color 0.35s, border-color 0.35s, transform 0.5s cubic-bezier(0.19, 1, 0.22, 1);
}
.buttons-container .mk-loc svg {
  position: relative;
  transition: transform 0.5s cubic-bezier(0.19, 1, 0.22, 1);
  animation: mk-loc-hop 3.6s ease-in-out infinite;
}
@keyframes mk-loc-hop {
  0%, 70%, 100% { transform: translateY(0); }
  78% { transform: translateY(-4px); }
  86% { transform: translateY(0); }
  92% { transform: translateY(-1.5px); }
}
.buttons-container .mk-loc-ring {
  position: absolute;
  inset: -1.5px;
  border: 1.5px solid #ff4d57;
  border-radius: 50%;
  opacity: 0;
  animation: mk-wa-ring 3.6s cubic-bezier(0.19, 1, 0.22, 1) 1.8s infinite;
}
@media (hover: hover) {
  .buttons-container .mk-loc:hover {
    color: #fff;
    background: #ff4d57;
    border-color: #ff4d57;
    transform: scale(1.06);
  }
  .buttons-container .mk-loc:hover svg {
    animation: none;
    transform: scale(1.1);
  }
  .buttons-container .mk-loc:hover svg circle {
    fill: #ff4d57;
  }
}
html.mk-main-touch body .buttons-container .mk-loc {
  border-color: rgba(0, 0, 0, 0.22) !important;
}
@media (prefers-reduced-motion: reduce) {
  .buttons-container .mk-loc-ring,
  .buttons-container .mk-loc svg {
    animation: none;
  }
}
.buttons-container .mk-loc svg {
  width: 26px;
  height: 26px;
}

/* İletişim: full-screen video hero with liquid-glass buttons (initVex); the video plays raw, no overlay */
/* the hero starts at the very top of the page, under the menu; the page below it is black */
main.mk-vx-page {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  background: #000 !important;
}
section.mk-vx {
  padding: 0;
}
.mk-vx {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100svh;
  overflow: hidden;
  background: #000;
  color: #fff;
  font-family: "Inter", sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
/* the site menu sits in a liquid-glass bar over the video, as the design's navbar */
.mk-has-vx body #header .menu-links-w {
  position: relative;
}
.mk-has-vx body #header .menu-links-w::before {
  content: "";
  position: absolute;
  inset: 20px -18px;
  z-index: -1;
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.4);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.1), inset 0 0 0 1px rgba(255, 255, 255, 0.14);
  pointer-events: none;
}
/* the video stays behind the whole page; below the hero a veil (initVex) softens and darkens it */
.mk-vx-video {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.mk-vx-body {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 0 24px 48px;
}
.mk-vx-grid {
  display: block;
}
.mk-vx-title {
  margin: 0 0 16px;
  font-family: inherit;
  font-size: 36px;
  line-height: 40px;
  font-weight: 400;
  letter-spacing: -0.04em;
  text-transform: none;
  white-space: pre-line;
  color: #fff;
}
.mk-vx-line {
  display: block;
}
.mk-vx-word {
  display: inline-block;
  white-space: nowrap;
}
.mk-vx-char {
  display: inline-block;
  opacity: 0;
  transform: translateX(-18px);
  transition: opacity 500ms, transform 500ms;
}
.mk-vx.is-on .mk-vx-char,
.mk-vs-title.is-on .mk-vx-char {
  opacity: 1;
  transform: translateX(0);
}
.mk-vx-sub {
  margin: 0 0 20px;
  font-size: 16px;
  line-height: 24px;
  color: #d1d5db;
}
.mk-vx-fade {
  opacity: 0;
  transition: opacity 1000ms;
}
.mk-vx.is-on .mk-vx-fade {
  opacity: 1;
  transition-delay: var(--d, 0ms);
}
.mk-vx-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}
.mk-vx-btn {
  display: inline-block;
  padding: 12px 32px;
  border-radius: 8px;
  background: #fff;
  color: #000;
  font-size: 16px;
  line-height: 24px;
  font-weight: 500;
  text-decoration: none;
  transition: background-color 0.15s, color 0.15s;
}
.mk-vx-btn:hover {
  background: #f3f4f6;
}
.mk-vx-btn--glass {
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #fff;
}
.mk-vx-btn--glass.mk-glass {
  background: rgba(0, 0, 0, 0.4);
}
.mk-vx-btn--glass.mk-glass:hover {
  background: #fff;
  color: #000;
}
.mk-vx-side {
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  margin-top: 32px;
}
.mk-vx-tag {
  display: inline-block;
  padding: 12px 24px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 12px;
  color: #fff;
  font-size: 18px;
  line-height: 28px;
  font-weight: 300;
  text-decoration: none;
}
.mk-glass {
  background: rgba(0, 0, 0, 0.4);
  background-blend-mode: luminosity;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.1);
  position: relative;
  overflow: hidden;
}
.mk-glass::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.4px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.1) 20%, rgba(255, 255, 255, 0) 40%, rgba(255, 255, 255, 0) 60%, rgba(255, 255, 255, 0.1) 80%, rgba(255, 255, 255, 0.3) 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}
@media (min-width: 768px) {
  .mk-vx-body {
    padding: 0 48px 48px;
  }
  .mk-vx-title {
    font-size: 48px;
    line-height: 1;
  }
  .mk-vx-sub {
    font-size: 18px;
    line-height: 28px;
  }
  .mk-vx-tag {
    font-size: 20px;
  }
}
@media (min-width: 1024px) {
  .mk-vx-body {
    padding: 0 64px 64px;
  }
  .mk-vx-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: end;
  }
  .mk-vx-title {
    font-size: 60px;
  }
  .mk-vx-side {
    justify-content: flex-end;
    margin-top: 0;
    padding-right: calc(14vw + 40px);
  }
  .mk-vx-tag {
    font-size: 24px;
    line-height: 32px;
  }
}
@media (min-width: 1280px) {
  .mk-vx-title {
    font-size: 72px;
  }
}
.mk-vx-veil {
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: var(--vx-p, 0);
  background: radial-gradient(120% 90% at 50% 40%, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.9));
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}

/* İletişim below the hero: the same type, glass and entrances, scrolling over the veiled video */
.mk-vs,
.mk-vs-legal {
  position: relative;
  z-index: 1;
  color: #fff;
  font-family: "Inter", sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
section.mk-vs {
  padding: 80px 24px;
}
.mk-vs-head {
  margin-bottom: 40px;
}
.mk-vs-kicker {
  margin: 0 0 16px;
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
  color: #d1d5db;
}
.mk-vs-title {
  margin: 0 0 16px;
  font-family: inherit;
  font-size: 30px;
  line-height: 1.1;
  font-weight: 400;
  letter-spacing: -0.04em;
  text-transform: none;
  white-space: pre-line;
  color: #fff;
}
.mk-vs-text {
  max-width: 34rem;
  margin: 0 0 20px;
  font-size: 16px;
  line-height: 24px;
  color: #d1d5db;
}
.mk-vs-in {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 1000ms, transform 1000ms;
}
.mk-vs-in.is-on {
  opacity: 1;
  transform: none;
  transition-delay: var(--d, 0ms);
}
.mk-vs-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
.mk-vs-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 24px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 12px;
  transition: opacity 1000ms, transform 1000ms, background-color 0.3s;
}
.mk-vs-card:hover {
  background: rgba(255, 255, 255, 0.08);
}
.mk-vs-icon {
  display: flex;
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: #fff;
  color: #000;
}
.mk-vs-icon svg {
  width: 20px;
  height: 20px;
}
.mk-vs .mk-foot-svg > * {
  stroke-dashoffset: 0;
}
.mk-vs-card-title {
  margin: 8px 0 0;
  font-family: inherit;
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: #d1d5db;
}
.mk-vs-lines {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0;
  font-size: 18px;
  line-height: 26px;
  font-weight: 300;
}
.mk-vs-lines a {
  color: #fff;
  text-decoration: none;
  transition: color 0.15s;
}
.mk-vs-lines a:hover {
  color: #d1d5db;
}
.mk-vs-split {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
}
.mk-vs-frame {
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 12px;
  padding: 8px;
}
.mk-vs-frame iframe {
  display: block;
  width: 100%;
  height: 320px;
  border: 0;
  border-radius: 8px;
  filter: grayscale(1) invert(0.92) contrast(0.9);
}
.mk-vs-side {
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
}
.mk-vs-legal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
  margin: 0 24px 280px;
  padding: 8px 16px;
  border-radius: 12px;
  font-size: 14px;
  line-height: 20px;
}
.mk-vs-legal ul {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 32px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.mk-vs-legal a {
  color: #fff;
  text-decoration: none;
  transition: color 0.15s;
}
.mk-vs-legal a:hover {
  color: #d1d5db;
}
.mk-vs-legal p {
  margin: 0;
  color: #d1d5db;
}
@media (min-width: 768px) {
  section.mk-vs {
    padding: 104px 48px;
  }
  .mk-vs-title {
    font-size: 48px;
    line-height: 1;
  }
  .mk-vs-text {
    font-size: 18px;
    line-height: 28px;
  }
  .mk-vs-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .mk-vs-legal {
    margin: 0 48px 48px;
  }
}
@media (min-width: 1024px) {
  section.mk-vs {
    padding: 120px calc(14vw + 72px) 120px 64px;
  }
  .mk-vs-title {
    font-size: 60px;
  }
  .mk-vs-cards {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
  .mk-vs-split {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: end;
  }
  .mk-vs-frame iframe {
    height: 420px;
  }
  .mk-vs-side {
    justify-content: flex-end;
  }
  .mk-vs-legal {
    margin: 0 calc(14vw + 72px) 64px 64px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .mk-vs-in {
    transition: none !important;
  }
}
@media (prefers-reduced-motion: reduce) {
  .mk-vx-char,
  .mk-vx-fade {
    transition: none !important;
  }
}
/* Home: opening notice, shown once per visit on top of the hero */
.mk-notice {
  position: fixed;
  inset: 0;
  z-index: 10001;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  opacity: 0;
  transition: opacity 0.6s ease;
}
.mk-notice[hidden] {
  display: none;
}
.mk-notice.is-open {
  opacity: 1;
}
.mk-notice-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(2, 10, 24, 0.55);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  cursor: pointer;
}
.mk-notice .mk-notice-card {
  position: relative;
  width: min(560px, 100%);
  max-height: calc(100% - 32px);
  /* (never sideways: the glow reaches past the card's sides, and on computers that show scroll
     bars a bar appeared under the card, 2026-10-23) */
  overflow-x: hidden;
  overflow-y: auto;
  padding: 48px 40px 40px;
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: linear-gradient(160deg, rgba(20, 52, 84, 0.82), rgba(4, 14, 30, 0.88));
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45), inset 0 1px 1px rgba(255, 255, 255, 0.18);
  color: #fff;
  text-align: center;
  transform: translateY(24px) scale(0.97);
  transition: transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.mk-notice.is-open .mk-notice-card {
  transform: none;
}
.mk-notice-glow {
  position: absolute;
  inset: -40% -20% auto;
  height: 80%;
  background: radial-gradient(closest-side, rgba(90, 170, 255, 0.35), transparent);
  pointer-events: none;
}
.mk-notice-x {
  position: absolute;
  top: 14px;
  right: 14px;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
  cursor: pointer;
  transition: background-color 0.2s;
}
.mk-notice-x:hover {
  background: rgba(255, 255, 255, 0.18);
}
.mk-notice-logo {
  position: relative;
  display: block;
  width: 150px;
  height: auto;
  margin: 0 auto 28px;
}
.mk-notice-title {
  position: relative;
  margin: 0 0 16px;
  font-family: "Century Gothic", sans-serif;
  font-size: 32px;
  line-height: 1.15;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.mk-notice-text {
  position: relative;
  margin: 0 auto 22px;
  max-width: 420px;
  font-size: 17px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.82);
}
.mk-notice-note {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 30px;
  padding: 10px 16px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.06);
  font-size: 14px;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.9);
  text-align: left;
}
.mk-notice-dot {
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #5fd38d;
  box-shadow: 0 0 0 0 rgba(95, 211, 141, 0.6);
  animation: mk-notice-pulse 1.8s ease-out infinite;
}
@keyframes mk-notice-pulse {
  to {
    box-shadow: 0 0 0 10px rgba(95, 211, 141, 0);
  }
}
.mk-notice-ok {
  position: relative;
  border: 0;
  cursor: pointer;
}
@media (max-width: 599px) {
  .mk-notice .mk-notice-card {
    padding: 44px 22px 28px;
    border-radius: 16px;
  }
  .mk-notice-logo {
    width: 120px;
    margin-bottom: 22px;
  }
  .mk-notice-title {
    font-size: 25px;
  }
  .mk-notice-text {
    font-size: 15px;
  }
  .mk-notice-note {
    font-size: 13px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .mk-notice,
  .mk-notice .mk-notice-card {
    transition: none;
  }
  .mk-notice-dot {
    animation: none;
  }
}
/* The fixed header has no backdrop of its own; over the footer (taller than the screen on phones)
   its labels ran into the footer titles, so there it sits on a dark bar */
#header.mk-over-foot:not(.menu-open) nav::before {
  /* solid: in Safari a see-through bar still let the footer titles show */
  background: #0b1a2b;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  transition: background 0.3s linear 0s;
}
#header.mk-over-foot:not(.menu-open) .nav-link,
#header.mk-over-foot:not(.menu-open) .nav-link span,
#header.mk-over-foot:not(.menu-open) .news-w p,
#header.mk-over-foot:not(.menu-open) .menu-cta p,
#header.mk-over-foot:not(.menu-open) .menu-cta span {
  color: #fff !important;
}
#header.mk-over-foot:not(.menu-open) .navbar,
#header.mk-over-foot:not(.menu-open) .dots-w .dot {
  background: #fff !important;
}
/* With the menu open over the footer, the light footer theme left the header labels white on the white menu */
#header.menu-open .nav-link,
#header.menu-open .nav-link span,
#header.menu-open .menu-cta p,
#header.menu-open .menu-cta span {
  color: #2d628c !important;
}

/* Product cards (Smile Line has 62 of them): the name and the text rise in with the product picture,
   by one CSS transition per card. The engine's per-card line splitting and scroll tweens did the same
   but measured the whole page for every card and froze slower PCs while scrolling. */
@media (min-width: 768px) and (prefers-reduced-motion: no-preference) {
  .mk-cards-js .mk-card > .mk-card-title,
  .mk-cards-js .mk-card > .content {
    opacity: 0;
    transform: translateY(1.2em);
    transition: opacity 0.8s ease 0.1s, transform 1.6s cubic-bezier(0.4, 0, 0.1, 1) 0.1s;
  }
  .mk-card.is-in > .mk-card-title,
  .mk-card.is-in > .content {
    opacity: 1;
    transform: none;
  }
}

/* Instagram showcase (home, after the globe): two drifting rows of reel covers around the account handle */
.mk-ig {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: clamp(0.5rem, 1.5vh, 1.25rem);
  padding: 6vh 0 6vh;
  overflow: hidden;
  color: #fff;
  background: radial-gradient(70% 55% at 50% 50%, rgba(3, 8, 22, 0.62), rgba(3, 8, 22, 0) 75%);
}
.mk-ig-row {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.mk-ig-track {
  display: flex;
  gap: 1.3rem;
  width: max-content;
  padding: 1.1rem 0;
  animation: mk-ig-run 75s linear infinite;
}
.mk-ig-row-b .mk-ig-track {
  animation-duration: 85s;
  animation-direction: reverse;
}
.mk-ig-row:hover .mk-ig-track,
.mk-ig-row.is-held .mk-ig-track,
.mk-ig.is-off .mk-ig-track {
  animation-play-state: paused;
}
@keyframes mk-ig-run {
  to {
    transform: translateX(calc(-50% - 0.65rem));
  }
}
.mk-ig-card {
  --r: -2deg;
  position: relative;
  flex: none;
  display: block;
  width: clamp(100px, min(12.5vw, 15.5vh), 205px);
  aspect-ratio: 9 / 16;
  border: 1.5px solid rgba(255, 255, 255, 0.75);
  border-radius: 1.1rem;
  overflow: hidden;
  background: #0b1424;
  box-shadow: 0 0 1.6rem rgba(110, 190, 255, 0.4), 0 0.8rem 2rem rgba(0, 0, 0, 0.5);
  transform: rotate(var(--r));
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.5s, border-color 0.5s;
}
.mk-ig-card:nth-child(even) {
  --r: 2deg;
}
.mk-ig-card:nth-child(3n) {
  --r: -0.5deg;
}
.mk-ig-card img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}
.mk-ig-card::before {
  position: absolute;
  inset: 0;
  z-index: 1;
  content: "";
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 55%, rgba(4, 10, 24, 0.55));
  pointer-events: none;
}
.mk-ig-card::after {
  position: absolute;
  inset: -50% auto -50% -60%;
  z-index: 2;
  width: 40%;
  content: "";
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
  transform: rotate(20deg);
  animation: mk-point-sweep 6s ease-in-out infinite;
  pointer-events: none;
}
.mk-ig-card:nth-child(3n + 2)::after {
  animation-delay: 2s;
}
.mk-ig-card:nth-child(3n)::after {
  animation-delay: 4s;
}
.mk-ig-reel {
  position: absolute;
  top: 0.7rem;
  right: 0.7rem;
  z-index: 3;
  width: 1.3rem;
  height: 1.3rem;
  fill: #fff;
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.6));
}
.mk-ig-card:hover,
.mk-ig-card:focus-visible {
  z-index: 4;
  border-color: #fff;
  box-shadow: 0 0 0 2px #3b8ee8, 0 0 2.6rem rgba(59, 142, 232, 0.75), 0 0 4.5rem rgba(110, 190, 255, 0.35), 0 1.2rem 2.4rem rgba(0, 0, 0, 0.55);
  transform: translateY(-0.6rem) rotate(0deg) scale(1.08);
  outline: none;
}
.mk-ig-card:hover img {
  transform: scale(1.08);
}
.mk-ig-center {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.7rem;
  padding: 0.5rem 1.25rem;
  text-align: center;
}
.mk-ig-avatar {
  position: relative;
  display: block;
  width: clamp(4rem, 9vh, 5.6rem);
  height: clamp(4rem, 9vh, 5.6rem);
  border-radius: 50%;
  padding: 4px;
  isolation: isolate;
}
.mk-ig-avatar::before {
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: 50%;
  content: "";
  background: conic-gradient(#0b2a5b, #1d4f9c, #3b8ee8, #a9d4ff, #3b8ee8, #1d4f9c, #0b2a5b);
  animation: mk-ig-spin 4s linear infinite;
}
.mk-ig-avatar img {
  display: block;
  width: 100%;
  height: 100%;
  border: 3px solid #0b1424;
  border-radius: 50%;
  object-fit: cover;
  background: #fff;
}
@keyframes mk-ig-spin {
  to {
    transform: rotate(360deg);
  }
}
.mk-ig-logo {
  width: 1.15em;
  height: 1.15em;
  flex: none;
}
.mk-ig-kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  margin: 0.4rem 0 0;
  font-size: 0.8rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  opacity: 0.85;
}
.mk-ig-handle {
  margin: 0;
  font-size: clamp(2.5rem, min(7.2vw, 10vh), 6.6rem);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.01em;
}
.mk-ig-handle a {
  color: transparent;
  background: linear-gradient(90deg, #4f8fe0, #a9d4ff, #ffffff, #6fb6ff, #2f6fc4, #6fb6ff, #4f8fe0);
  background-size: 300% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  filter: drop-shadow(0 0 1.4rem rgba(59, 142, 232, 0.45));
  animation: mk-ig-shine 8s linear infinite;
}
@keyframes mk-ig-shine {
  to {
    background-position: 300% 0;
  }
}
.mk-ig-text {
  max-width: 34rem;
  margin: 0;
  font-size: clamp(0.95rem, 1.2vw, 1.15rem);
  line-height: 1.55;
  opacity: 0.88;
}
.mk-ig-cta {
  position: relative;
  display: inline-block;
  margin-top: 0.6rem;
  padding: 2px;
  border-radius: 999px;
  overflow: hidden;
  color: #fff;
  isolation: isolate;
  animation: mk-ig-pulse 2.6s ease-out infinite;
}
.mk-ig-cta::before {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: -1;
  width: 160%;
  aspect-ratio: 1;
  content: "";
  background: conic-gradient(#0b2a5b, #1d4f9c, #3b8ee8, #a9d4ff, #3b8ee8, #1d4f9c, #0b2a5b);
  transform: translate(-50%, -50%);
  animation: mk-ig-orbit 3s linear infinite;
}
@keyframes mk-ig-orbit {
  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}
.mk-ig-cta span {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.95rem 2.3rem;
  border-radius: 999px;
  background: rgba(8, 14, 30, 0.92);
  font-size: 0.95rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  transition: background 0.4s;
}
.mk-ig-cta:hover span,
.mk-ig-cta:focus-visible span {
  background: rgba(8, 14, 30, 0);
}
@keyframes mk-ig-pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(59, 142, 232, 0.55);
  }
  70%,
  100% {
    box-shadow: 0 0 0 1.1rem rgba(59, 142, 232, 0);
  }
}
/* entrance: the covers come out of a blur, one after another */
.mk-ig-js .mk-ig-card {
  opacity: 0;
  filter: blur(14px);
  transform: translateY(3rem) rotate(var(--r)) scale(0.88);
}
.mk-ig-js .mk-ig-center > * {
  opacity: 0;
  transform: translateY(1.5rem);
}
.mk-ig-js .mk-ig.is-in .mk-ig-card {
  opacity: 1;
  filter: none;
  transform: rotate(var(--r));
  transition: opacity 0.9s ease calc(var(--i, 0) * 70ms), filter 1.1s ease calc(var(--i, 0) * 70ms), transform 1.2s cubic-bezier(0.16, 1, 0.3, 1) calc(var(--i, 0) * 70ms);
}
.mk-ig-js .mk-ig.is-in .mk-ig-center > * {
  opacity: 1;
  transform: none;
  transition: opacity 0.9s ease, transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.mk-ig-js .mk-ig.is-in .mk-ig-center > :nth-child(2) { transition-delay: 0.12s; }
.mk-ig-js .mk-ig.is-in .mk-ig-center > :nth-child(3) { transition-delay: 0.24s; }
.mk-ig-js .mk-ig.is-in .mk-ig-center > :nth-child(4) { transition-delay: 0.36s; }
.mk-ig-js .mk-ig.is-in .mk-ig-center > :nth-child(5) { transition-delay: 0.48s; }
.mk-ig-js .mk-ig.is-done .mk-ig-card {
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.5s, border-color 0.5s;
}
.mk-ig-js .mk-ig.is-done .mk-ig-card:hover,
.mk-ig-js .mk-ig.is-done .mk-ig-card:focus-visible {
  transform: translateY(-0.6rem) rotate(0deg) scale(1.08);
}
@media (max-width: 767px) {
  .mk-ig {
    padding: 8vh 0 7vh;
  }
  .mk-ig-track {
    gap: 0.8rem;
    padding: 1rem 0;
  }
  @keyframes mk-ig-run {
    to {
      transform: translateX(calc(-50% - 0.4rem));
    }
  }
  .mk-ig-card {
    width: min(29vw, 15vh);
    border-radius: 0.85rem;
  }
  .mk-ig-avatar {
    width: 4.6rem;
    height: 4.6rem;
  }
  .mk-ig-cta span {
    padding: 0.85rem 1.8rem;
  }
}
@media (prefers-reduced-motion: reduce) {
  .mk-ig-track,
  .mk-ig-avatar::before,
  .mk-ig-handle a,
  .mk-ig-cta,
  .mk-ig-cta::before,
  .mk-ig-card::after {
    animation: none;
  }
  .mk-ig-row {
    overflow-x: auto;
  }
}

/* Instagram showcase, minimal: one row of small covers under a compact header, the globe stays visible */
.mk-ig {
  gap: 1.4rem;
  padding: 10vh 0 8vh;
  background: none;
}
.mk-ig-center {
  gap: 0.5rem;
  padding: 0 1.25rem;
}
.mk-ig-avatar {
  width: 3.6rem;
  height: 3.6rem;
  padding: 2px;
}
.mk-ig-avatar img {
  border-width: 2px;
}
.mk-ig-kicker {
  display: none;
}
.mk-ig-handle {
  font-size: clamp(1.9rem, 3.4vw, 3rem);
}
.mk-ig-handle a {
  filter: none;
}
.mk-ig-text {
  max-width: 28rem;
  font-size: 0.95rem;
  opacity: 0.75;
}
.mk-ig-cta {
  margin-top: 0.3rem;
  animation: none;
}
.mk-ig-cta span {
  padding: 0.7rem 1.7rem;
  font-size: 0.8rem;
}
.mk-ig-track {
  gap: 0.9rem;
  padding: 0.8rem 0;
  animation-duration: 90s;
}
@keyframes mk-ig-run {
  to {
    transform: translateX(calc(-50% - 0.45rem));
  }
}
.mk-ig-card,
.mk-ig-card:nth-child(even),
.mk-ig-card:nth-child(3n) {
  --r: 0deg;
}
.mk-ig-card {
  width: clamp(92px, 8vw, 132px);
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 0.8rem;
  box-shadow: 0 0.5rem 1.4rem rgba(0, 0, 0, 0.45);
}
.mk-ig-card::after {
  display: none;
}
.mk-ig-reel {
  top: 0.45rem;
  right: 0.45rem;
  width: 1rem;
  height: 1rem;
}
.mk-ig-card:hover,
.mk-ig-card:focus-visible {
  box-shadow: 0 0 0 1.5px #6fb6ff, 0 0 1.6rem rgba(110, 182, 255, 0.6), 0 0.8rem 1.8rem rgba(0, 0, 0, 0.5);
}
.mk-ig-js .mk-ig.is-done .mk-ig-card:hover,
.mk-ig-js .mk-ig.is-done .mk-ig-card:focus-visible {
  transform: translateY(-0.4rem) scale(1.05);
}
@media (max-width: 767px) {
  .mk-ig {
    padding: 8vh 0 6vh;
  }
  .mk-ig-track {
    gap: 0.6rem;
  }
  @keyframes mk-ig-run {
    to {
      transform: translateX(calc(-50% - 0.3rem));
    }
  }
  .mk-ig-card {
    width: 24vw;
  }
}
/* the row is moved by catalog.js (initIg), one set of 12 posts, no CSS loop; centred when it fits the screen */
.mk-ig-track {
  margin: 0 auto;
  animation: none;
  will-change: transform;
}
/* 12 covers always span the screen plus one card, so the row keeps moving on wide screens too */
@media (min-width: 768px) {
  .mk-ig-card {
    width: clamp(92px, calc(100vw / 10.2 - 0.9rem), 190px);
  }
}
/* keep the handle and the line readable over light scenes (Salli meadow) */
.mk-ig-handle a {
  filter: drop-shadow(0 2px 10px rgba(4, 12, 30, 0.7));
}
.mk-ig-text {
  opacity: 0.92;
  text-shadow: 0 1px 8px rgba(4, 12, 30, 0.8);
}

/* Header legibility, page by page (2026-10-20). At the top of a page the labels take the tone that reads on that page's sky:
   navy over the light skies (home, Salli, AquaCare, Smile Line, Doctorseyes, Cvdentus, XO, Yirro, Leica, Demo Planla, KVKK),
   white over the dark ones (Swarovski, Calipso, Wand, İletişim). When the header comes back in the middle of a page (.top),
   the engine puts a bar behind it: frosted white with navy labels on the light pages, frosted navy with white labels on the dark ones.
   The unselected links were at 40% opacity, too faint over the scenes; they are at 75% now. */
@media (min-width: 64.0625em) {
  #header .menu-links-w .nav-link:not(.active):not(:hover) {
    opacity: 0.75 !important;
  }
}
html[data-mk-scene="Homepage"] body #header:not(.mk-over-foot):not(.menu-open) .nav-link,
html[data-mk-scene="Homepage"] body #header:not(.mk-over-foot):not(.menu-open) .nav-link span,
html[data-mk-scene="Homepage"] body #header:not(.mk-over-foot):not(.menu-open) .news-w p,
html[data-mk-scene="Homepage"] body #header:not(.mk-over-foot):not(.menu-open) .menu-cta p,
html[data-mk-scene="Homepage"] body #header:not(.mk-over-foot):not(.menu-open) .menu-cta span,
html[data-mk-scene="Capital"] body #header:not(.mk-over-foot):not(.menu-open) .nav-link,
html[data-mk-scene="Capital"] body #header:not(.mk-over-foot):not(.menu-open) .nav-link span,
html[data-mk-scene="Capital"] body #header:not(.mk-over-foot):not(.menu-open) .news-w p,
html[data-mk-scene="Capital"] body #header:not(.mk-over-foot):not(.menu-open) .menu-cta p,
html[data-mk-scene="Capital"] body #header:not(.mk-over-foot):not(.menu-open) .menu-cta span,
html[data-mk-scene="Maritime"] body #header:not(.mk-over-foot):not(.menu-open) .nav-link,
html[data-mk-scene="Maritime"] body #header:not(.mk-over-foot):not(.menu-open) .nav-link span,
html[data-mk-scene="Maritime"] body #header:not(.mk-over-foot):not(.menu-open) .news-w p,
html[data-mk-scene="Maritime"] body #header:not(.mk-over-foot):not(.menu-open) .menu-cta p,
html[data-mk-scene="Maritime"] body #header:not(.mk-over-foot):not(.menu-open) .menu-cta span,
html[data-mk-scene="SmileLine"] body #header:not(.mk-over-foot):not(.menu-open) .nav-link,
html[data-mk-scene="SmileLine"] body #header:not(.mk-over-foot):not(.menu-open) .nav-link span,
html[data-mk-scene="SmileLine"] body #header:not(.mk-over-foot):not(.menu-open) .news-w p,
html[data-mk-scene="SmileLine"] body #header:not(.mk-over-foot):not(.menu-open) .menu-cta p,
html[data-mk-scene="SmileLine"] body #header:not(.mk-over-foot):not(.menu-open) .menu-cta span,
html[data-mk-scene="DoctorsEyes"] body #header:not(.mk-over-foot):not(.menu-open) .nav-link,
html[data-mk-scene="DoctorsEyes"] body #header:not(.mk-over-foot):not(.menu-open) .nav-link span,
html[data-mk-scene="DoctorsEyes"] body #header:not(.mk-over-foot):not(.menu-open) .news-w p,
html[data-mk-scene="DoctorsEyes"] body #header:not(.mk-over-foot):not(.menu-open) .menu-cta p,
html[data-mk-scene="DoctorsEyes"] body #header:not(.mk-over-foot):not(.menu-open) .menu-cta span,
html[data-mk-scene="Cvdentus"] body #header:not(.mk-over-foot):not(.menu-open) .nav-link,
html[data-mk-scene="Cvdentus"] body #header:not(.mk-over-foot):not(.menu-open) .nav-link span,
html[data-mk-scene="Cvdentus"] body #header:not(.mk-over-foot):not(.menu-open) .news-w p,
html[data-mk-scene="Cvdentus"] body #header:not(.mk-over-foot):not(.menu-open) .menu-cta p,
html[data-mk-scene="Cvdentus"] body #header:not(.mk-over-foot):not(.menu-open) .menu-cta span,
html[data-mk-scene="Xo"] body #header:not(.mk-over-foot):not(.menu-open) .nav-link,
html[data-mk-scene="Xo"] body #header:not(.mk-over-foot):not(.menu-open) .nav-link span,
html[data-mk-scene="Xo"] body #header:not(.mk-over-foot):not(.menu-open) .news-w p,
html[data-mk-scene="Xo"] body #header:not(.mk-over-foot):not(.menu-open) .menu-cta p,
html[data-mk-scene="Xo"] body #header:not(.mk-over-foot):not(.menu-open) .menu-cta span,
html[data-mk-scene="WhoWeAre"] body #header:not(.mk-over-foot):not(.menu-open) .nav-link,
html[data-mk-scene="WhoWeAre"] body #header:not(.mk-over-foot):not(.menu-open) .nav-link span,
html[data-mk-scene="WhoWeAre"] body #header:not(.mk-over-foot):not(.menu-open) .news-w p,
html[data-mk-scene="WhoWeAre"] body #header:not(.mk-over-foot):not(.menu-open) .menu-cta p,
html[data-mk-scene="WhoWeAre"] body #header:not(.mk-over-foot):not(.menu-open) .menu-cta span,
html[data-mk-scene="Leica"] body #header:not(.mk-over-foot):not(.menu-open) .nav-link,
html[data-mk-scene="Leica"] body #header:not(.mk-over-foot):not(.menu-open) .nav-link span,
html[data-mk-scene="Leica"] body #header:not(.mk-over-foot):not(.menu-open) .news-w p,
html[data-mk-scene="Leica"] body #header:not(.mk-over-foot):not(.menu-open) .menu-cta p,
html[data-mk-scene="Leica"] body #header:not(.mk-over-foot):not(.menu-open) .menu-cta span,
html.mk-main-touch body #header:not(.mk-over-foot):not(.menu-open) .nav-link,
html.mk-main-touch body #header:not(.mk-over-foot):not(.menu-open) .nav-link span,
html.mk-main-touch body #header:not(.mk-over-foot):not(.menu-open) .news-w p,
html.mk-main-touch body #header:not(.mk-over-foot):not(.menu-open) .menu-cta p,
html.mk-main-touch body #header:not(.mk-over-foot):not(.menu-open) .menu-cta span,
html.mk-main-ud52 body #header:not(.mk-over-foot):not(.menu-open) .nav-link,
html.mk-main-ud52 body #header:not(.mk-over-foot):not(.menu-open) .nav-link span,
html.mk-main-ud52 body #header:not(.mk-over-foot):not(.menu-open) .news-w p,
html.mk-main-ud52 body #header:not(.mk-over-foot):not(.menu-open) .menu-cta p,
html.mk-main-ud52 body #header:not(.mk-over-foot):not(.menu-open) .menu-cta span {
  color: #0c2a4d !important;
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.65), 0 0 2px rgba(255, 255, 255, 0.5) !important;
}
html[data-mk-scene="Homepage"] body #header:not(.mk-over-foot):not(.menu-open) .navbar,
html[data-mk-scene="Homepage"] body #header:not(.mk-over-foot):not(.menu-open) .dots-w .dot,
html[data-mk-scene="Capital"] body #header:not(.mk-over-foot):not(.menu-open) .navbar,
html[data-mk-scene="Capital"] body #header:not(.mk-over-foot):not(.menu-open) .dots-w .dot,
html[data-mk-scene="Maritime"] body #header:not(.mk-over-foot):not(.menu-open) .navbar,
html[data-mk-scene="Maritime"] body #header:not(.mk-over-foot):not(.menu-open) .dots-w .dot,
html[data-mk-scene="SmileLine"] body #header:not(.mk-over-foot):not(.menu-open) .navbar,
html[data-mk-scene="SmileLine"] body #header:not(.mk-over-foot):not(.menu-open) .dots-w .dot,
html[data-mk-scene="DoctorsEyes"] body #header:not(.mk-over-foot):not(.menu-open) .navbar,
html[data-mk-scene="DoctorsEyes"] body #header:not(.mk-over-foot):not(.menu-open) .dots-w .dot,
html[data-mk-scene="Cvdentus"] body #header:not(.mk-over-foot):not(.menu-open) .navbar,
html[data-mk-scene="Cvdentus"] body #header:not(.mk-over-foot):not(.menu-open) .dots-w .dot,
html[data-mk-scene="Xo"] body #header:not(.mk-over-foot):not(.menu-open) .navbar,
html[data-mk-scene="Xo"] body #header:not(.mk-over-foot):not(.menu-open) .dots-w .dot,
html[data-mk-scene="WhoWeAre"] body #header:not(.mk-over-foot):not(.menu-open) .navbar,
html[data-mk-scene="WhoWeAre"] body #header:not(.mk-over-foot):not(.menu-open) .dots-w .dot,
html[data-mk-scene="Leica"] body #header:not(.mk-over-foot):not(.menu-open) .navbar,
html[data-mk-scene="Leica"] body #header:not(.mk-over-foot):not(.menu-open) .dots-w .dot,
html.mk-main-touch body #header:not(.mk-over-foot):not(.menu-open) .navbar,
html.mk-main-touch body #header:not(.mk-over-foot):not(.menu-open) .dots-w .dot,
html.mk-main-ud52 body #header:not(.mk-over-foot):not(.menu-open) .navbar,
html.mk-main-ud52 body #header:not(.mk-over-foot):not(.menu-open) .dots-w .dot {
  background: #0c2a4d !important;
}
html[data-mk-scene="Trading"] body #header:not(.mk-over-foot):not(.menu-open) .nav-link,
html[data-mk-scene="Trading"] body #header:not(.mk-over-foot):not(.menu-open) .nav-link span,
html[data-mk-scene="Trading"] body #header:not(.mk-over-foot):not(.menu-open) .news-w p,
html[data-mk-scene="Trading"] body #header:not(.mk-over-foot):not(.menu-open) .menu-cta p,
html[data-mk-scene="Trading"] body #header:not(.mk-over-foot):not(.menu-open) .menu-cta span,
html[data-mk-scene="Calipso"] body #header:not(.mk-over-foot):not(.menu-open) .nav-link,
html[data-mk-scene="Calipso"] body #header:not(.mk-over-foot):not(.menu-open) .nav-link span,
html[data-mk-scene="Calipso"] body #header:not(.mk-over-foot):not(.menu-open) .news-w p,
html[data-mk-scene="Calipso"] body #header:not(.mk-over-foot):not(.menu-open) .menu-cta p,
html[data-mk-scene="Calipso"] body #header:not(.mk-over-foot):not(.menu-open) .menu-cta span,
html[data-mk-scene="Wand"] body #header:not(.mk-over-foot):not(.menu-open) .nav-link,
html[data-mk-scene="Wand"] body #header:not(.mk-over-foot):not(.menu-open) .nav-link span,
html[data-mk-scene="Wand"] body #header:not(.mk-over-foot):not(.menu-open) .news-w p,
html[data-mk-scene="Wand"] body #header:not(.mk-over-foot):not(.menu-open) .menu-cta p,
html[data-mk-scene="Wand"] body #header:not(.mk-over-foot):not(.menu-open) .menu-cta span,
html.mk-main-vx-page body #header:not(.mk-over-foot):not(.menu-open) .nav-link,
html.mk-main-vx-page body #header:not(.mk-over-foot):not(.menu-open) .nav-link span,
html.mk-main-vx-page body #header:not(.mk-over-foot):not(.menu-open) .news-w p,
html.mk-main-vx-page body #header:not(.mk-over-foot):not(.menu-open) .menu-cta p,
html.mk-main-vx-page body #header:not(.mk-over-foot):not(.menu-open) .menu-cta span {
  color: #fff !important;
  text-shadow: 0 1px 2px rgba(4, 12, 30, 0.6), 0 0 14px rgba(4, 12, 30, 0.5) !important;
}
html[data-mk-scene="Trading"] body #header:not(.mk-over-foot):not(.menu-open) .navbar,
html[data-mk-scene="Trading"] body #header:not(.mk-over-foot):not(.menu-open) .dots-w .dot,
html[data-mk-scene="Calipso"] body #header:not(.mk-over-foot):not(.menu-open) .navbar,
html[data-mk-scene="Calipso"] body #header:not(.mk-over-foot):not(.menu-open) .dots-w .dot,
html[data-mk-scene="Wand"] body #header:not(.mk-over-foot):not(.menu-open) .navbar,
html[data-mk-scene="Wand"] body #header:not(.mk-over-foot):not(.menu-open) .dots-w .dot,
html.mk-main-vx-page body #header:not(.mk-over-foot):not(.menu-open) .navbar,
html.mk-main-vx-page body #header:not(.mk-over-foot):not(.menu-open) .dots-w .dot {
  background: #fff !important;
}
html[data-mk-scene="Homepage"] body #header:not(.mk-over-foot):not(.menu-open).top nav::before,
html[data-mk-scene="Capital"] body #header:not(.mk-over-foot):not(.menu-open).top nav::before,
html[data-mk-scene="Maritime"] body #header:not(.mk-over-foot):not(.menu-open).top nav::before,
html[data-mk-scene="SmileLine"] body #header:not(.mk-over-foot):not(.menu-open).top nav::before,
html[data-mk-scene="DoctorsEyes"] body #header:not(.mk-over-foot):not(.menu-open).top nav::before,
html[data-mk-scene="Cvdentus"] body #header:not(.mk-over-foot):not(.menu-open).top nav::before,
html[data-mk-scene="Xo"] body #header:not(.mk-over-foot):not(.menu-open).top nav::before,
html[data-mk-scene="WhoWeAre"] body #header:not(.mk-over-foot):not(.menu-open).top nav::before,
html[data-mk-scene="Leica"] body #header:not(.mk-over-foot):not(.menu-open).top nav::before,
html.mk-main-touch body #header:not(.mk-over-foot):not(.menu-open).top nav::before,
html.mk-main-ud52 body #header:not(.mk-over-foot):not(.menu-open).top nav::before {
  background: rgba(255, 255, 255, 0.78);
  -webkit-backdrop-filter: blur(12px) saturate(1.2);
  backdrop-filter: blur(12px) saturate(1.2);
  box-shadow: 0 8px 24px rgba(4, 16, 32, 0.12);
}
html[data-mk-scene="Trading"] body #header:not(.mk-over-foot):not(.menu-open).top nav::before,
html[data-mk-scene="Calipso"] body #header:not(.mk-over-foot):not(.menu-open).top nav::before,
html[data-mk-scene="Wand"] body #header:not(.mk-over-foot):not(.menu-open).top nav::before,
html.mk-main-vx-page body #header:not(.mk-over-foot):not(.menu-open).top nav::before {
  background: rgba(8, 20, 38, 0.72);
  -webkit-backdrop-filter: blur(12px) saturate(1.2);
  backdrop-filter: blur(12px) saturate(1.2);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

/* Demo Planla: the brands' Instagram accounts (2026-10-20), between the hero and the form. Only the accounts, no posts.
   Showpiece cards: deep navy glass with a slowly drifting blue aurora inside, a light running round the edge,
   the profile photo glowing in a turning story ring, the handle in a shimmering blue-to-white gradient and a
   white "Takip Et" pill. Under the pointer the card tilts towards it in 3D and a spotlight follows
   (catalog.js sets --mx/--my/--rx/--ry). Animations only run while the section is on screen (.is-live).
   Seven in one row on desktop, four on tablets, two on phones; a short last row is centred. */
@property --mk-fa {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}
/* main.mk-touch: the engine's section:not([data-chapter-first]) would otherwise zero the side padding
   and add 7.5-10rem above and below */
main.mk-touch .mk-follow {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 86rem;
  margin: 0 auto;
  padding: 1rem 1.5rem 0;
  text-align: center;
  color: #0c2a4d;
}
.mk-follow-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 2.5rem;
}
.mk-follow-ig {
  width: 1.7rem;
  height: 1.7rem;
  margin-bottom: 0.35rem;
  color: #1d4f9c;
}
.mk-follow-kicker {
  margin: 0;
  font-size: 0.72rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: #3b6fb0;
}
.mk-follow-title {
  margin: 0;
  padding-bottom: 0.08em;
  font-size: clamp(1.7rem, 3vw, 2.7rem);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.01em;
  text-transform: none;
  color: #0c2a4d;
  background: linear-gradient(100deg, #0b2a5b 0%, #1d4f9c 30%, #3b8ee8 45%, #0b2a5b 60%, #0b2a5b 100%) 0 0 / 250% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.mk-follow.is-live .mk-follow-title { animation: mk-follow-shine 6s ease-in-out infinite; }
.mk-follow-list {
  --cols: 2;
  --gap: 0.85rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--gap);
  margin: 0;
  padding: 0;
  list-style: none;
  perspective: 900px;
}
.mk-follow-card {
  --mx: 50%;
  --my: 30%;
  --rx: 0deg;
  --ry: 0deg;
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
  padding: 1.6rem 0.75rem 1.25rem;
  overflow: hidden;
  border-radius: 1.5rem;
  background: linear-gradient(165deg, #12386f 0%, #0b2450 45%, #061631 100%);
  box-shadow:
    0 26px 50px -22px rgba(6, 22, 49, 0.75),
    0 10px 22px -12px rgba(29, 79, 156, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
  color: #fff;
  text-decoration: none;
  transform: rotateX(var(--rx)) rotateY(var(--ry));
  transform-style: preserve-3d;
  transition: transform 0.6s cubic-bezier(.2,.7,.2,1), box-shadow 0.5s ease;
}
/* the light running round the edge */
.mk-follow-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  padding: 1.5px;
  border-radius: inherit;
  background: conic-gradient(from var(--mk-fa), rgba(169, 212, 255, 0.15) 0deg, rgba(169, 212, 255, 0.15) 200deg, #6fb6ff 280deg, #fff 320deg, #6fb6ff 340deg, rgba(169, 212, 255, 0.15) 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}
.mk-follow.is-live .mk-follow-card::before { animation: mk-follow-edge 6s linear infinite; }
.mk-follow.is-live .mk-follow-list li:nth-child(2n) .mk-follow-card::before { animation-delay: -2s; }
.mk-follow.is-live .mk-follow-list li:nth-child(3n) .mk-follow-card::before { animation-delay: -4s; }
/* (2026-10-22) the running edge light: a conic gradient on a square turning behind the card's face
   (.mk-follow-glint, the face inset 1.5px), so only the 1.5px rim shows it. Turning is done by the
   graphics chip; the masked layer that moved the gradient's start repainted all seven cards on
   every frame and made Safari stall as the row came in. Same light, same speed. */
.mk-follow-card::before { content: none; }
.mk-follow-glint {
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  overflow: hidden;
  pointer-events: none;
}
.mk-follow-glint::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 230%;
  aspect-ratio: 1;
  background: conic-gradient(rgba(169, 212, 255, 0.15) 0deg, rgba(169, 212, 255, 0.15) 200deg, #6fb6ff 280deg, #fff 320deg, #6fb6ff 340deg, rgba(169, 212, 255, 0.15) 360deg);
  transform: translate(-50%, -50%);
  will-change: transform;
}
.mk-follow-glint::after {
  content: "";
  position: absolute;
  inset: 1.5px;
  border-radius: inherit;
  background: linear-gradient(165deg, #12386f 0%, #0b2450 45%, #061631 100%);
}
.mk-follow.is-live .mk-follow-glint::before { animation: mk-follow-glint 6s linear infinite; }
.mk-follow.is-live .mk-follow-list li:nth-child(2n) .mk-follow-glint::before { animation-delay: -2s; }
.mk-follow.is-live .mk-follow-list li:nth-child(3n) .mk-follow-glint::before { animation-delay: -4s; }
@keyframes mk-follow-glint { to { transform: translate(-50%, -50%) rotate(360deg); } }
/* spotlight that follows the pointer */
.mk-follow-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: radial-gradient(14rem circle at var(--mx) var(--my), rgba(140, 200, 255, 0.28), transparent 60%);
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
}
/* aurora drifting inside the card */
.mk-follow-cover {
  position: absolute;
  inset: -40%;
  z-index: -1;
  background:
    radial-gradient(30% 26% at 30% 30%, rgba(59, 142, 232, 0.55), transparent 70%),
    radial-gradient(26% 24% at 72% 40%, rgba(111, 182, 255, 0.35), transparent 70%),
    radial-gradient(34% 30% at 50% 78%, rgba(29, 79, 156, 0.6), transparent 70%);
  filter: blur(6px);
}
.mk-follow.is-live .mk-follow-cover { animation: mk-follow-aurora 14s ease-in-out infinite alternate; }
.mk-follow-badge {
  position: absolute;
  right: -1.1rem;
  bottom: -1.1rem;
  width: 5.5rem;
  height: 5.5rem;
  color: rgba(255, 255, 255, 0.06);
  transform: rotate(-12deg);
}
.mk-follow-ring {
  position: relative;
  z-index: 2;
  display: block;
  width: 5.25rem;
  height: 5.25rem;
  margin-bottom: 0.95rem;
  padding: 4px;
  border-radius: 50%;
  transform: translateZ(30px);
}
/* the glow behind the photo */
.mk-follow-ring::after {
  content: "";
  position: absolute;
  inset: -10px;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(111, 182, 255, 0.7), transparent);
  opacity: 0.55;
}
.mk-follow.is-live .mk-follow-ring::after { animation: mk-follow-pulse 3.2s ease-in-out infinite; }
/* the turning story ring */
.mk-follow-ring::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(from var(--mk-fa), #a9d4ff, #3b8ee8, #1d4f9c, #fff, #6fb6ff, #a9d4ff);
}
/* (2026-10-22) the ring is round, so turning it gives the same running light as moving the gradient's
   start, and the graphics chip turns it without the page repainting it on every frame */
.mk-follow-ring::before { will-change: transform; }
.mk-follow.is-live .mk-follow-ring::before { animation: mk-follow-spin 5s linear infinite reverse; }
@keyframes mk-follow-spin { to { transform: rotate(360deg); } }
.mk-follow-ring img {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  border: 3px solid #0b2450;
  border-radius: 50%;
  object-fit: cover;
  background: #fff;
}
.mk-follow-name {
  position: relative;
  z-index: 2;
  font-size: 1.08rem;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0.01em;
  color: #fff;
  transform: translateZ(20px);
}
.mk-follow-handle {
  position: relative;
  z-index: 2;
  max-width: 100%;
  margin-top: 0.25rem;
  overflow: hidden;
  font-size: 0.78rem;
  text-overflow: ellipsis;
  white-space: nowrap;
  background: linear-gradient(90deg, #6fb6ff, #ffffff, #a9d4ff, #6fb6ff) 0 0 / 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  transform: translateZ(20px);
}
/* (2026-10-22) the handles shine twice as the row comes in, then rest: a running shine on seven
   lines of text repainted them on every frame (Safari stalled as the row came in) */
.mk-follow.is-live .mk-follow-handle { animation: mk-follow-shine 4.5s linear 2; }
.mk-follow-cta {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  margin-top: 1rem;
  padding: 0.5rem 1.05rem;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 6px 18px -6px rgba(111, 182, 255, 0.65);
  font-size: 0.76rem;
  letter-spacing: 0.06em;
  white-space: nowrap;
  color: #0b2a5b;
  transform: translateZ(25px);
  transition: background 0.4s ease, color 0.4s ease, box-shadow 0.4s ease;
}
.mk-follow-cta svg {
  width: 0.85rem;
  height: 0.85rem;
  transition: transform 0.35s ease;
}
.mk-follow-card:hover,
.mk-follow-card:focus-visible {
  box-shadow:
    0 34px 60px -24px rgba(6, 22, 49, 0.85),
    0 0 0 1px rgba(111, 182, 255, 0.35),
    0 0 40px -6px rgba(59, 142, 232, 0.65),
    inset 0 1px 0 rgba(255, 255, 255, 0.18);
}
.mk-follow-card:hover::after,
.mk-follow-card:focus-visible::after { opacity: 1; }
.mk-follow-card:hover::before { animation-duration: 2.2s; }
.mk-follow-card:hover .mk-follow-ring::after { opacity: 1; }
.mk-follow-card:hover .mk-follow-cta,
.mk-follow-card:focus-visible .mk-follow-cta {
  background: linear-gradient(135deg, #6fb6ff, #3b8ee8);
  box-shadow: 0 10px 26px -6px rgba(111, 182, 255, 0.9);
  color: #fff;
}
.mk-follow-card:hover .mk-follow-cta svg { transform: translateX(4px); }
.mk-follow-card:focus-visible { outline: 2px solid #6fb6ff; outline-offset: 4px; }
@keyframes mk-follow-edge { to { --mk-fa: 360deg; } }
@keyframes mk-follow-shine { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }
@keyframes mk-follow-pulse { 0%, 100% { opacity: 0.4; transform: scale(0.95); } 50% { opacity: 0.85; transform: scale(1.06); } }
@keyframes mk-follow-aurora {
  0% { transform: translate3d(-6%, -4%, 0) rotate(0deg); }
  100% { transform: translate3d(6%, 5%, 0) rotate(25deg); }
}
.mk-follow-list li {
  flex: 0 0 calc((100% - (var(--cols) - 1) * var(--gap)) / var(--cols));
  min-width: 0;
}
@media (max-width: 639px) {
  .mk-follow-head { margin-bottom: 1.6rem; }
  .mk-follow-card { padding: 1.2rem 0.55rem 1rem; border-radius: 1.2rem; }
  .mk-follow-ring { width: 4.3rem; height: 4.3rem; margin-bottom: 0.7rem; }
  .mk-follow-name { font-size: 0.98rem; }
  .mk-follow-cta { margin-top: 0.8rem; }
}
@media (min-width: 640px) {
  .mk-follow-list { --cols: 4; }
}
@media (min-width: 1024px) {
  main.mk-touch .mk-follow { padding: 1rem 3rem 0; }
}
/* seven in a row only once each card has room for "Takip Et" on one line */
@media (min-width: 1180px) {
  .mk-follow-list { --cols: 7; --gap: 1rem; }
}
/* very large screens: let the row grow and the cards with it */
@media (min-width: 1800px) {
  main.mk-touch .mk-follow { max-width: 112rem; }
  .mk-follow-card { padding: 2rem 1rem 1.6rem; }
  .mk-follow-ring { width: 6.5rem; height: 6.5rem; }
  .mk-follow-name { font-size: 1.3rem; }
  .mk-follow-handle { font-size: 0.92rem; }
  .mk-follow-cta { font-size: 0.86rem; padding: 0.6rem 1.25rem; }
}
/* small phones (iPhone SE and the like) */
@media (max-width: 380px) {
  .mk-follow-handle { font-size: 0.7rem; }
  .mk-follow-name { font-size: 0.92rem; }
}
/* entrance: the cards rise and turn up into place one after another */
.mk-follow-js .mk-follow-head,
.mk-follow-js .mk-follow-list li {
  opacity: 0;
  transform: translateY(2.5rem) rotateX(-18deg) scale(0.94);
  transform-origin: 50% 100%;
  transition: opacity 0.9s ease, transform 1.2s cubic-bezier(.2,.8,.2,1);
  transition-delay: calc(var(--i, 0) * 90ms);
}
.mk-follow-js .mk-follow.is-in .mk-follow-head,
.mk-follow-js .mk-follow.is-in .mk-follow-list li {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .mk-follow-js .mk-follow-head,
  .mk-follow-js .mk-follow-list li { opacity: 1; transform: none; transition: none; }
  .mk-follow .mk-follow-title,
  .mk-follow .mk-follow-handle,
  .mk-follow .mk-follow-cover,
  .mk-follow .mk-follow-card::before,
  .mk-follow .mk-follow-glint::before,
  .mk-follow .mk-follow-ring::before,
  .mk-follow .mk-follow-ring::after { animation: none !important; }
  .mk-follow-card { transform: none !important; transition: none; }
}

/* Instagram (2026-10-20): a round button above the location button, same size and outline as
   WhatsApp and İletişim; the Instagram colours run through the glyph, a slow pink ring calls attention
   (between the other two rings' beats) and on hover it fills with the Instagram gradient. Opens @medikallup. */
.buttons-container .mk-igb {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  pointer-events: all;
  cursor: pointer;
  border: 1.5px solid rgba(255, 255, 255, 0.15);
  border-radius: 50%;
  transition: background-color 0.35s, border-color 0.35s, transform 0.5s cubic-bezier(0.19, 1, 0.22, 1);
}
.buttons-container .mk-igb::before {
  content: "";
  position: absolute;
  inset: -1.5px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285aeb 90%);
  opacity: 0;
  transition: opacity 0.35s;
}
.buttons-container .mk-igb svg {
  position: relative;
  width: 24px;
  height: 24px;
  transition: transform 0.5s cubic-bezier(0.19, 1, 0.22, 1);
}
.buttons-container .mk-igb svg * { transition: stroke 0.35s, fill 0.35s; }
.buttons-container .mk-igb-ring {
  position: absolute;
  inset: -1.5px;
  border: 1.5px solid #d62976;
  border-radius: 50%;
  opacity: 0;
  animation: mk-wa-ring 3.6s cubic-bezier(0.19, 1, 0.22, 1) 0.9s infinite;
}
@media (hover: hover) {
  .buttons-container .mk-igb:hover {
    border-color: transparent;
    transform: scale(1.06);
  }
  .buttons-container .mk-igb:hover::before { opacity: 1; }
  .buttons-container .mk-igb:hover svg { transform: rotate(-8deg) scale(1.08); }
  .buttons-container .mk-igb:hover svg rect,
  .buttons-container .mk-igb:hover svg circle:not(:last-child) { stroke: #fff; }
  .buttons-container .mk-igb:hover svg circle:last-child { fill: #fff; }
}
html.mk-main-touch body .buttons-container .mk-igb {
  border-color: rgba(0, 0, 0, 0.22) !important;
}
@media (prefers-reduced-motion: reduce) {
  .buttons-container .mk-igb-ring { animation: none; }
}

/* Home (2026-10-20): the same Instagram account cards as Demo Planla replace the reel showcase after
   the globe; on the dark sky the heading turns light and a soft dark pool sits behind the row. */
.mk-follow--home {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 86rem;
  margin: 0 auto;
  padding: 8vh 1.5rem 9vh;
  text-align: center;
  color: #fff;
}
.mk-follow--home::before {
  content: "";
  position: absolute;
  inset: 0 50%;
  z-index: -1;
  width: 100vw;
  margin-left: -50vw;
  background: radial-gradient(60% 60% at 50% 55%, rgba(3, 8, 22, 0.6), rgba(3, 8, 22, 0) 75%);
  pointer-events: none;
}
.mk-follow--home .mk-follow-ig { color: #a9d4ff; }
.mk-follow--home .mk-follow-kicker { color: #a9d4ff; }
.mk-follow--home .mk-follow-title {
  color: #fff;
  background-image: linear-gradient(100deg, #fff 0%, #fff 30%, #a9d4ff 45%, #fff 60%, #fff 100%);
  text-shadow: none;
  filter: drop-shadow(0 2px 14px rgba(0, 0, 0, 0.45));
}
/* (2026-10-22) no blurred shadows on these cards: Safari painting seven of them as the row came
   in stalled the page; the dark drop and blue glow are one soft gradient behind each card */
.mk-follow--home .mk-follow-card {
  box-shadow:
    0 0 0 1px rgba(111, 182, 255, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.14);
}
.mk-follow--home .mk-follow-list li { position: relative; }
.mk-follow--home .mk-follow-list li::before {
  content: "";
  position: absolute;
  inset: -16px -14px -28px;
  z-index: -1;
  background: radial-gradient(52% 50% at 50% 60%, rgba(20, 70, 140, 0.45), rgba(2, 8, 20, 0.35) 60%, rgba(0, 0, 0, 0) 100%);
  transform: translateZ(0);
  pointer-events: none;
}
@media (min-width: 1024px) {
  .mk-follow--home { padding: 9vh 3rem 10vh; }
}
@media (min-width: 1800px) {
  .mk-follow--home { max-width: 112rem; }
}
/* Home (2026-10-21): Instagram's own colours (purple → pink → orange → yellow) only on the story
   ring round each logo and on the heading; the cards stay navy */
.mk-follow--home .mk-follow-title {
  background-image: linear-gradient(100deg, #feda75 0%, #fa7e1e 22%, #d62976 45%, #fff 55%, #962fbf 70%, #feda75 100%);
}
.mk-follow--home .mk-follow-ring::before,
.mk-demo .mk-follow .mk-follow-ring::before { background: conic-gradient(from var(--mk-fa), #feda75, #fa7e1e, #d62976, #962fbf, #4f5bd5, #feda75); }
/* the Instagram mark above the heading in Instagram's gradient: the mark's own shape masks the
   gradient (an SVG stroke cannot take a CSS gradient) */
.mk-follow--home .mk-follow-ig,
.mk-demo .mk-follow .mk-follow-ig {
  color: transparent;
  background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285aeb 90%);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='3' y='3' width='18' height='18' rx='5' fill='none' stroke='%23000' stroke-width='1.6'/%3E%3Ccircle cx='12' cy='12' r='4.2' fill='none' stroke='%23000' stroke-width='1.6'/%3E%3Ccircle cx='17.4' cy='6.6' r='1.1'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='3' y='3' width='18' height='18' rx='5' fill='none' stroke='%23000' stroke-width='1.6'/%3E%3Ccircle cx='12' cy='12' r='4.2' fill='none' stroke='%23000' stroke-width='1.6'/%3E%3Ccircle cx='17.4' cy='6.6' r='1.1'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Demo Planla (2026-10-22): the same Instagram colours as on the home page (ring, mark, heading);
   on this light page the heading leaves out the pale yellow and white, which would vanish */
.mk-demo .mk-follow .mk-follow-title {
  background-image: linear-gradient(100deg, #fa7e1e 0%, #d62976 25%, #962fbf 48%, #4f5bd5 62%, #d62976 80%, #fa7e1e 100%);
}
.mk-demo .mk-follow .mk-follow-kicker { color: #c13584; }

/* Home (2026-10-21): scroll cue at the foot of the mountain. Visitors did not see that the page is
   driven by the scroll, and the engine's own hint was a small line of text in the corner. A thin
   mouse whose wheel dot glides down, a spaced-out label with a slow silver-blue sheen, and a
   hairline with a light running down it; on touch screens two chevrons instead of the mouse.
   It rises in once the page has opened (.is-in, catalog.js initCue), fades as the page moves and
   scrolls one screen down when clicked. */
main[data-scene="Homepage"] .hero .scroll-to-cta { display: none !important; }
.mk-cue {
  --cue-ink: #0c2a4d;
  position: absolute;
  left: 50%;
  bottom: max(26px, 4.2vh);
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 14px 22px 0;
  color: var(--cue-ink);
  text-decoration: none;
  opacity: 0;
  transform: translate3d(-50%, 14px, 0);
  transition: opacity 1.1s cubic-bezier(0.16, 1, 0.3, 1), transform 1.1s cubic-bezier(0.16, 1, 0.3, 1);
  -webkit-tap-highlight-color: transparent;
  pointer-events: none;
}
/* a soft light behind it so it reads over the bright mist and the darker rock alike */
.mk-cue::before {
  content: "";
  position: absolute;
  inset: -18px -46px -10px;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0) 100%);
  pointer-events: none;
}
.mk-cue.is-in { opacity: var(--cue-o, 1); transform: translate3d(-50%, 0, 0); pointer-events: auto; }
.mk-cue.is-gone { pointer-events: none; }
.mk-cue-mouse {
  position: relative;
  width: 22px;
  height: 34px;
  border: 1px solid rgba(12, 42, 77, 0.55);
  border-radius: 12px;
  transition: border-color 0.4s ease, transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.mk-cue-mouse i {
  position: absolute;
  top: 7px;
  left: 50%;
  width: 2px;
  height: 6px;
  margin-left: -1px;
  border-radius: 2px;
  background: var(--cue-ink);
  animation: mk-cue-wheel 2.2s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}
@keyframes mk-cue-wheel {
  0% { opacity: 0; transform: translateY(-2px); }
  22% { opacity: 1; }
  70% { opacity: 0; transform: translateY(11px); }
  100% { opacity: 0; transform: translateY(11px); }
}
.mk-cue-swipe { display: none; flex-direction: column; align-items: center; margin-bottom: -4px; }
.mk-cue-swipe svg { display: block; margin-top: -5px; animation: mk-cue-chev 2s ease-in-out infinite; }
.mk-cue-swipe svg:last-child { animation-delay: 0.18s; }
@keyframes mk-cue-chev {
  0%, 100% { opacity: 0.25; transform: translateY(-2px); }
  50% { opacity: 1; transform: translateY(3px); }
}
.mk-cue-text { display: flex; flex-direction: column; align-items: center; gap: 6px; line-height: 1; white-space: nowrap; }
.mk-cue-text small {
  font-size: 9.5px;
  font-weight: 400;
  letter-spacing: 0.38em;
  text-transform: uppercase;
  margin-right: -0.38em;
  opacity: 0.62;
}
.mk-cue-text b {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.52em;
  text-transform: uppercase;
  margin-right: -0.52em;
  background: linear-gradient(100deg, #0c2a4d 0%, #0c2a4d 38%, #8fb4dd 50%, #0c2a4d 62%, #0c2a4d 100%) 0 0 / 260% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: mk-cue-sheen 4.6s ease-in-out infinite;
}
@keyframes mk-cue-sheen {
  0% { background-position: 100% 0; }
  60%, 100% { background-position: 0 0; }
}
.mk-cue-line { position: relative; width: 1px; height: 46px; overflow: hidden; background: rgba(12, 42, 77, 0.16); }
.mk-cue-line i {
  position: absolute;
  left: 0;
  top: 0;
  width: 1px;
  height: 18px;
  background: linear-gradient(180deg, rgba(12, 42, 77, 0), #0c2a4d);
  animation: mk-cue-run 2.2s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}
@keyframes mk-cue-run {
  0% { transform: translateY(-18px); }
  75%, 100% { transform: translateY(46px); }
}
@media (hover: hover) {
  .mk-cue:hover .mk-cue-mouse { border-color: var(--cue-ink); transform: translateY(-2px); }
}
.mk-cue:focus-visible { outline: none; }
.mk-cue:focus-visible .mk-cue-mouse { outline: 1px solid var(--cue-ink); outline-offset: 4px; }
/* touch screens: chevrons instead of the mouse, a little higher above the browser's bar */
@media (hover: none) {
  .mk-cue { bottom: max(22px, 3.4vh); gap: 10px; }
  .mk-cue-mouse { display: none; }
  .mk-cue-swipe { display: flex; }
  .mk-cue-line { height: 34px; }
  @keyframes mk-cue-run {
    0% { transform: translateY(-18px); }
    75%, 100% { transform: translateY(34px); }
  }
}
@media (max-height: 560px) {
  .mk-cue-line { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .mk-cue-mouse i, .mk-cue-swipe svg, .mk-cue-text b, .mk-cue-line i { animation: none; }
  .mk-cue-mouse i { opacity: 1; }
  .mk-cue-line i { transform: translateY(14px); }
}

/* Home (2026-10-21): "swipe right" cue on the boats (.mk-yc-fleet). On phones the three columns
   stand in one row that is swiped sideways, and nothing said so. Same family as the scroll cue on
   the mountain: a spaced-out label with a slow sheen, a hairline with a light running to the right
   and two chevrons, plus three page marks (the one in view is long). The first time the boats
   open, the row also leans to the left and back once, so it is plain that it moves. Shown only
   while the row is wider than the screen (catalog.js initSwipe adds .is-on); the label goes after
   the first swipe, the page marks stay. */
.mk-swipe {
  position: absolute;
  left: 50%;
  bottom: max(14px, 2.4vh);
  z-index: 4;
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  color: #fff;
  opacity: 0;
  transform: translate3d(-50%, 12px, 0);
  transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1), transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
  text-shadow: 0 1px 14px rgba(4, 12, 24, 0.55);
}
.mk-swipe.is-on { display: flex; }
.mk-swipe.is-in { opacity: 1; transform: translate3d(-50%, 0, 0); }
.mk-swipe::before {
  content: "";
  position: absolute;
  inset: -26px -60px -18px;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(8, 18, 32, 0.42), rgba(8, 18, 32, 0) 100%);
}
.mk-swipe-dots { display: flex; gap: 6px; margin-bottom: 2px; }
.mk-swipe-dots i {
  width: 6px;
  height: 2px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.4);
  transition: width 0.5s cubic-bezier(0.16, 1, 0.3, 1), background 0.5s ease;
}
.mk-swipe-dots i.is-on { width: 22px; background: #fff; }
.mk-swipe-hint { display: flex; flex-direction: column; align-items: center; gap: 12px; transition: opacity 0.6s ease, transform 0.6s ease; }
.mk-swipe.is-done .mk-swipe-hint { opacity: 0; transform: translateY(6px); }
.mk-swipe-text { display: flex; flex-direction: column; align-items: center; gap: 6px; line-height: 1; white-space: nowrap; }
.mk-swipe-text small { font-size: 9.5px; letter-spacing: 0.38em; margin-right: -0.38em; text-transform: uppercase; opacity: 0.72; }
.mk-swipe-text b {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.52em;
  margin-right: -0.52em;
  text-transform: uppercase;
  background: linear-gradient(100deg, #fff 0%, #fff 38%, #9cc3ee 50%, #fff 62%, #fff 100%) 0 0 / 260% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: none;
  filter: drop-shadow(0 1px 10px rgba(4, 12, 24, 0.5));
  animation: mk-cue-sheen 4.6s ease-in-out infinite;
}
.mk-swipe-track { display: flex; align-items: center; gap: 8px; }
.mk-swipe-line { position: relative; width: 54px; height: 1px; overflow: hidden; background: rgba(255, 255, 255, 0.28); }
.mk-swipe-line i {
  position: absolute;
  top: 0;
  left: 0;
  width: 20px;
  height: 1px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0), #fff);
  animation: mk-swipe-run 2.2s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}
@keyframes mk-swipe-run {
  0% { transform: translateX(-20px); }
  75%, 100% { transform: translateX(54px); }
}
.mk-swipe-chev { display: flex; }
.mk-swipe-chev svg { display: block; margin-left: -2px; animation: mk-swipe-chev 2s ease-in-out infinite; }
.mk-swipe-chev svg:last-child { animation-delay: 0.18s; }
@keyframes mk-swipe-chev {
  0%, 100% { opacity: 0.25; transform: translateX(-2px); }
  50% { opacity: 1; transform: translateX(3px); }
}
/* phones: under the middle of the card in view (the row's first column sits left of the screen's
   middle), clear of the fixed buttons on the right edge */
@media (max-width: 767px) {
  .mk-swipe { left: 41vw; }
}
/* the row leans left and back once, as if a finger had started the swipe */
.mk-yc-fleet.is-peek > .mk-yc-col { animation: mk-swipe-peek 1.5s cubic-bezier(0.45, 0, 0.2, 1) both; }
@keyframes mk-swipe-peek {
  0%, 100% { translate: 0 0; }
  45% { translate: -56px 0; }
}
@media (prefers-reduced-motion: reduce) {
  .mk-swipe-line i, .mk-swipe-chev svg, .mk-swipe-text b { animation: none; }
  .mk-yc-fleet.is-peek > .mk-yc-col { animation: none; }
}

/* Home (2026-10-21): drag cue beside the mountain. Dragging the first screen to the left brings
   the brands in from the right (the engine's hero strip) and letting go opens that brand; to the
   right there is nothing before the home page. A knob like the site's cursor glides from right to
   left along a hairline toward a chevron, so the gesture's direction is shown, not only told.
   It never takes the pointer, so a drag that starts on it still reaches the hero. Shares .mk-cue's
   rise-in and fade (catalog.js initCue). */
.mk-drag.mk-cue {
  left: auto;
  right: max(19vw, 250px);
  top: 50%;
  bottom: auto;
  gap: 14px;
  padding: 0;
  transform: translate3d(50%, calc(-50% + 14px), 0);
  pointer-events: none !important;
}
.mk-drag.mk-cue.is-in { transform: translate3d(50%, -50%, 0); }
.mk-drag.mk-cue::before { inset: -34px -54px -26px; }
.mk-drag-track { position: relative; display: flex; align-items: center; gap: 6px; height: 18px; }
.mk-drag-arrow { display: block; color: var(--cue-ink); animation: mk-drag-arrow 2.6s ease-in-out infinite; }
@keyframes mk-drag-arrow {
  0%, 30%, 100% { opacity: 0.3; transform: translateX(0); }
  62% { opacity: 1; transform: translateX(-3px); }
}
.mk-drag-line { position: relative; width: 86px; height: 1px; overflow: hidden; background: rgba(12, 42, 77, 0.16); }
.mk-drag-line i {
  position: absolute;
  top: 0;
  right: 0;
  width: 30px;
  height: 1px;
  background: linear-gradient(270deg, rgba(12, 42, 77, 0), #0c2a4d);
  animation: mk-drag-run 2.6s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}
@keyframes mk-drag-run {
  0% { transform: translateX(30px); }
  70%, 100% { transform: translateX(-86px); }
}
/* the knob: a small ring with a dot either side, like the cursor over the mountain */
.mk-drag-knob {
  position: absolute;
  top: 50%;
  right: -4px;
  width: 16px;
  height: 16px;
  margin-top: -8px;
  border: 1px solid rgba(12, 42, 77, 0.6);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.35);
  animation: mk-drag-knob 2.6s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}
.mk-drag-knob i { position: absolute; top: 50%; width: 2px; height: 2px; margin-top: -1px; border-radius: 50%; background: var(--cue-ink); }
.mk-drag-knob i:first-child { left: -6px; }
.mk-drag-knob i:last-child { right: -6px; }
@keyframes mk-drag-knob {
  0% { opacity: 0; transform: translateX(0) scale(0.8); }
  12% { opacity: 1; transform: translateX(0) scale(1); }
  70% { opacity: 1; transform: translateX(-84px) scale(1); }
  86%, 100% { opacity: 0; transform: translateX(-84px) scale(0.8); }
}
@media (max-width: 1023px) {
  .mk-drag.mk-cue { right: 50%; top: auto; bottom: calc(max(26px, 4.2vh) + 150px); transform: translate3d(50%, 14px, 0); }
  .mk-drag.mk-cue.is-in { transform: translate3d(50%, 0, 0); }
}
@media (hover: none) and (max-width: 1023px) {
  .mk-drag.mk-cue { bottom: calc(max(22px, 3.4vh) + 128px); }
}
@media (max-height: 560px) {
  .mk-drag.mk-cue { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .mk-drag-arrow, .mk-drag-line i, .mk-drag-knob { animation: none; }
  .mk-drag-knob { transform: translateX(-42px); }
}

/* cue labels, stronger (2026-10-21): deep navy, larger and heavier, the kicker no longer faded;
   the sheen runs in the brand's blue instead of a pale blue so no letter washes out. */
.mk-cue { --cue-ink: #0a2147; }
.mk-cue::before { background: radial-gradient(closest-side, rgba(255, 255, 255, 0.78), rgba(255, 255, 255, 0) 100%); }
.mk-cue .mk-cue-text { gap: 8px; }
.mk-cue .mk-cue-text small { font-size: 11px; font-weight: 600; letter-spacing: 0.32em; margin-right: -0.32em; opacity: 0.9; color: var(--cue-ink); }
.mk-cue .mk-cue-text b {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.42em;
  margin-right: -0.42em;
  background-image: linear-gradient(100deg, #0a2147 0%, #0a2147 40%, #1d5fd1 50%, #0a2147 60%, #0a2147 100%);
}
.mk-cue-mouse { border-color: rgba(10, 33, 71, 0.85); border-width: 1.5px; }
.mk-cue-line { background: rgba(10, 33, 71, 0.3); }
.mk-drag-line { background: rgba(10, 33, 71, 0.3); }
.mk-drag-knob { border-color: rgba(10, 33, 71, 0.9); border-width: 1.5px; }
.mk-drag-arrow { opacity: 1; }
.mk-drag-arrow path, .mk-cue-swipe path { stroke-width: 1.8; }
/* the white labels on the boats get the same weight */
.mk-swipe-text small { font-size: 11px; font-weight: 600; letter-spacing: 0.32em; margin-right: -0.32em; opacity: 0.95; }
.mk-swipe-text b { font-size: 15px; font-weight: 700; letter-spacing: 0.42em; margin-right: -0.42em; }
.mk-swipe::before { background: radial-gradient(closest-side, rgba(8, 18, 32, 0.6), rgba(8, 18, 32, 0) 100%); }
.mk-swipe-line { background: rgba(255, 255, 255, 0.45); }
.mk-swipe-chev path { stroke-width: 1.8; }
@media (max-width: 380px) {
  .mk-cue .mk-cue-text b, .mk-swipe-text b { font-size: 13px; letter-spacing: 0.34em; margin-right: -0.34em; }
  .mk-cue .mk-cue-text small, .mk-swipe-text small { font-size: 10px; letter-spacing: 0.26em; margin-right: -0.26em; }
}

/* Home (2026-10-21): the globe's brand labels clear before the Instagram title comes up over the
   globe (catalog.js initGlobeHandoff sets --mk-gc-fade); the engine's own fade of each label stays
   on the label's paragraph, this one is on its content, so both apply. */
#GlobalConnectivity [data-point] > span { opacity: var(--mk-gc-fade, 1); }
#GlobalConnectivity.is-handed [data-point] > span { visibility: hidden; }

/* the sailboat title starts clear of the glass header, which shows while scrolling back up
   (2026-10-21; it was 96px from the top and the header covered its first line) */
@media (min-width: 768px) {
  .mk-yc-hero { top: max(150px, 16vh); }
}

/* phones: the "Biz Kimiz" paragraph ran under the fixed buttons on the right edge (2026-10-21) */
@media (max-width: 767px) {
  #WhoWeAre .text-block { padding-right: 60px; box-sizing: border-box; }
}

/* Home (2026-10-21): shorter way from the sea columns to the globe. The globe chapter starts 0.8 of
   a screen earlier, under the end of the sailboat chapter: its low flight over the earth now passes
   behind the columns, and the mist only has to hide the chapter's cloud bank (catalog.js
   globeHold). */
main[data-scene="Homepage"] #GlobalConnectivity { margin-top: -80vh; margin-top: -80svh; }

/* Home (2026-10-21): the same scroll cue on the sailboat screen, "Akademi videoları için / Aşağı
   kaydırın": white on the sea, shown while the sailboat holds (catalog.js initYacht, .is-in), and a
   click goes on to the academy videos. */
.mk-yc-cue.mk-cue { --cue-ink: #fff; z-index: 4; color: #fff; font-family: "Century Gothic", sans-serif; text-transform: none; cursor: pointer; }
.mk-yc-cue.mk-cue::before { background: radial-gradient(closest-side, rgba(6, 16, 30, 0.5), rgba(6, 16, 30, 0) 100%); }
.mk-yc-cue .mk-cue-mouse { border-color: rgba(255, 255, 255, 0.9); }
.mk-yc-cue .mk-cue-line { background: rgba(255, 255, 255, 0.3); }
.mk-yc-cue .mk-cue-line i { background: linear-gradient(180deg, rgba(255, 255, 255, 0), #fff); }
.mk-yc-cue.mk-cue .mk-cue-text small { color: #fff; }
.mk-yc-cue.mk-cue .mk-cue-text b {
  color: #fff;
  background-image: linear-gradient(100deg, #fff 0%, #fff 38%, #a9d4ff 50%, #fff 62%, #fff 100%);
}

/* Home (2026-10-23): no "Ürünleri görmek için sağa kaydırın" under the boats any more; the three
   dots that show which boat is in view stay */
.mk-swipe-hint { display: none !important; }

/* Home (2026-10-23): the welcome card fits short phone screens (Safari's bars showing) without a
   scroll bar: less room around the logo and the text when the screen is short */
@media (max-height: 700px) and (max-width: 599px) {
  .mk-notice .mk-notice-card { padding: 34px 20px 22px; }
  .mk-notice-logo { width: 100px; margin-bottom: 14px; }
  .mk-notice-title { margin-bottom: 10px; font-size: 23px; }
  .mk-notice-text { margin-bottom: 14px; }
}

/* Product cards more than a screen away (catalog.js is-off): no animation, no 3D, no filter, so the
   browser does not keep 62 cards' layers drawn (over 1 GB of graphics memory on a phone, 2026-10-23).
   Sizes are untouched; the effects are back before the card comes into view. */
.mk-stage.is-off,
.mk-stage.is-off * {
  animation: none !important;
  transition: none !important;
  transform: none !important;
  transform-style: flat !important;
  filter: none !important;
  will-change: auto !important;
}


/* ==========================================================================
   Blog (2026-10-26, second version): /blog/ and /blog/ornek-yazi/, main.mk-pb.
   Built on the "Petalyx" landing design the user pasted, in its own colours (white, olive,
   lime) and pictures (painted clouds, cherry tree, valley, hero film; public/medikallup/blog/).
   - the page opens zooming out of a blurred landscape (is-intro → is-done, initBlog)
   - headings come in word by word, sharpened from a blur ([data-split] → .pb-w)
   - hero: drifting clouds, a film fading in from the white, blinking glass squares, parallax
   - "Diş hekimleri için…": held on screen while the counters run and the cherry tree rises
   - "Editörün seçimi": three wide numbers; the one under the pointer opens
   - articles with a sliding category filter; a moonlit valley with falling petals at the end
   main.astro-ud52ciay gives the dark menu on a white page (html.mk-main-ud52).
   ========================================================================== */
main.mk-pb {
  --ink: #121410;
  --muted: #4b4f45;
  --olive: #4d6a10;
  --green: #6f9a0c;
  --lime: #b4cd52;
  --pill: #e7efcf;
  --line: #eef0ea;
  --radius: 22px;
  --pb-out: cubic-bezier(0.215, 0.61, 0.355, 1);
  --pb-io: cubic-bezier(0.87, 0, 0.13, 1);
  position: relative;
  padding: 0 !important;
  background: transparent !important;
  color: var(--ink);
  font-family: "Inter Tight", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}
main.mk-pb section {
  padding: 0;
}
main.mk-pb a {
  color: inherit;
  text-decoration: none;
}
main.mk-pb img,
main.mk-pb video {
  display: block;
  max-width: 100%;
}
/* the opening: the page sits small over a blurred landscape and zooms out to fill the screen */
.pb-backdrop {
  position: fixed;
  inset: -40px;
  z-index: 0;
  background-position: center 70%;
  background-size: cover;
  filter: blur(18px) saturate(1.1);
  transform: scale(1.3);
}
.pb-app {
  position: relative;
  z-index: 1;
  overflow: clip;
  background: #fff;
  transform-origin: 50% 50vh;
  transition: transform 1.4s var(--pb-io), border-radius 1.4s var(--pb-io);
}
main.mk-pb.is-intro .pb-app {
  transform: scale(0.9);
  border-radius: 28px;
}
main.mk-pb.is-done .pb-backdrop {
  display: none;
}
main.mk-pb.is-done .pb-app {
  transform: none;
  transition: none;
}

/* ---- shared ---- */
.pb-pill {
  display: inline-flex;
  align-items: center;
  width: max-content;
  padding: 5px 10px;
  border-radius: 999px;
  background: var(--pill);
  color: #2c3a10;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.01em;
}
.pb-h2 {
  margin: 0;
  font-size: clamp(26px, 3.1vw, 44px);
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: -0.03em;
  text-align: center;
  color: var(--ink);
}
.pb-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  padding: 0 18px;
  border-radius: 999px;
  background: var(--olive);
  color: #f3f8e4 !important;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.01em;
  white-space: nowrap;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 2px 6px rgba(60, 80, 10, 0.25);
  transition: transform 0.3s, background 0.3s;
}
.pb-btn:hover {
  transform: translateY(-1px);
  background: #5a7c14;
}
.pb-btn--ghost {
  background: rgba(255, 255, 255, 0.85);
  color: var(--ink) !important;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08), 0 2px 6px rgba(0, 0, 0, 0.05);
}
.pb-btn--ghost:hover {
  background: #fff;
}
.pb-more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--olive) !important;
}
.pb-more svg {
  transition: transform 0.4s var(--pb-out);
}
a:hover > .pb-more svg,
.pb-more:hover svg {
  transform: translateX(4px);
}
/* words of a heading (initBlog splits [data-split]) */
.pb-w {
  display: inline-block;
  opacity: 0;
  transform: translateY(22px);
  filter: blur(8px);
  transition: opacity 0.9s var(--pb-out), transform 0.9s var(--pb-out), filter 0.9s var(--pb-out);
  transition-delay: calc(var(--i) * 60ms);
}
[data-split].is-in .pb-w {
  opacity: 1;
  transform: none;
  filter: none;
}
.pb-reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.8s var(--pb-out), transform 0.8s var(--pb-out);
}
.pb-reveal.is-in {
  opacity: 1;
  transform: none;
}
.pb-in {
  opacity: 0;
  translate: 0 40px;
  transition: opacity 0.8s var(--pb-out) calc(var(--d, 0) * 80ms), translate 1s var(--pb-out) calc(var(--d, 0) * 80ms);
}
.pb-in.is-in {
  opacity: 1;
  translate: 0 0;
}
.pb-glass {
  position: absolute;
  aspect-ratio: 1;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.55);
  -webkit-backdrop-filter: blur(10px) saturate(1.2);
  backdrop-filter: blur(10px) saturate(1.2);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4);
}
.pb-hero-glass .pb-glass {
  scale: 0.6;
  opacity: 0;
  transition: scale 0.6s cubic-bezier(0.34, 1.9, 0.64, 1) var(--pop, 0s), opacity 0.4s ease var(--pop, 0s);
}
.is-started .pb-hero-glass .pb-glass {
  scale: 1;
  opacity: 1;
}
.pb-hero-glass .pb-glass.is-blink {
  animation: pbBlink var(--du, 3s) ease-in-out var(--dl, 0s) infinite;
}
@keyframes pbBlink {
  0%, 30%, 100% { opacity: 1; }
  15% { opacity: 0.15; }
}
.pb-sq-field {
  position: absolute;
  inset: 0 0 auto 0;
  z-index: 1;
  height: 42%;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(#000, transparent);
  mask-image: linear-gradient(#000, transparent);
}
.pb-grid-sq {
  position: absolute;
  width: 46px;
  height: 46px;
  border: 1px solid #edf0e8;
  border-radius: 10px;
  opacity: 0;
  animation: pbSq var(--du, 2.4s) ease-in-out var(--dl, 0s) infinite alternate;
}
@keyframes pbSq {
  to { opacity: 1; }
}

/* ---- hero ---- */
.pb-hero {
  position: relative;
  height: 100vh;
  min-height: 620px;
  overflow: hidden;
  background: #fff;
}
.pb-cloud {
  position: absolute;
  z-index: 1;
  pointer-events: none;
  will-change: transform;
}
.pb-cloud img {
  width: 100%;
}
.pb-cloud-in {
  display: block;
  opacity: 0;
  transform: translateX(-120px);
  transition: opacity 1.6s var(--pb-out) 0.4s, transform 1.6s var(--pb-out) 0.4s;
}
.pb-cloud--r .pb-cloud-in {
  transform: translateX(120px);
}
.is-started .pb-cloud-in {
  opacity: 1;
  transform: none;
}
.pb-cloud--l {
  top: -3%;
  left: -5%;
  width: min(44vw, 640px);
}
.pb-cloud--r {
  top: 2%;
  right: -6%;
  width: min(42vw, 620px);
}
.pb-drift-a {
  animation: pbDriftA 14s ease-in-out infinite alternate;
}
.pb-drift-b {
  animation: pbDriftB 17s ease-in-out infinite alternate;
}
@keyframes pbDriftA {
  to { transform: translate(26px, 4px); }
}
@keyframes pbDriftB {
  to { transform: translate(-30px, 6px); }
}
.pb-h1 {
  position: absolute;
  z-index: 6;
  top: 31%;
  left: 0;
  right: 0;
  margin: 0;
  padding: 0 16px;
  font-size: clamp(34px, 5.2vw, 76px);
  font-weight: 400;
  line-height: 1.04;
  letter-spacing: -0.045em;
  text-align: center;
  color: var(--ink);
  will-change: transform;
}
.pb-h1 em,
.pb-ph-title em {
  color: var(--olive);
  font-style: italic;
  font-weight: 500;
}
.pb-hero-media {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  height: 72%;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 22%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 22%);
  will-change: transform;
}
.pb-hero-media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 70%;
}
.pb-hero-glass {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
}

/* ---- "Diş hekimleri için…": held while the counters run and the tree rises ---- */
.pb-stats {
  position: relative;
  height: 220vh;
  background: #fff;
}
.pb-stats-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  min-height: 680px;
  overflow: hidden;
}
.pb-stats-in {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 22px;
  height: 100%;
  padding: 0 16px;
}
.pb-stats .pb-h2 {
  margin-bottom: 18px;
}
.pb-cards {
  position: relative;
  z-index: 4;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  width: min(880px, 100%);
}
/* lime tickets with a round notch on each side */
.pb-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 150px;
  padding: 18px 22px;
  border-radius: var(--radius);
  background: var(--lime);
  -webkit-mask: radial-gradient(circle 17px at 0 55%, #0000 97%, #000) left / 51% 100% no-repeat, radial-gradient(circle 17px at 100% 55%, #0000 97%, #000) right / 51% 100% no-repeat;
  mask: radial-gradient(circle 17px at 0 55%, #0000 97%, #000) left / 51% 100% no-repeat, radial-gradient(circle 17px at 100% 55%, #0000 97%, #000) right / 51% 100% no-repeat;
  opacity: 0;
  translate: 0 40px;
  transition: opacity 0.9s var(--pb-out) calc(var(--i) * 80ms), translate 0.9s var(--pb-out) calc(var(--i) * 80ms);
}
.pb-cards.is-in .pb-card {
  opacity: 1;
  translate: 0 0;
}
.pb-card small {
  font-size: 10.5px;
  font-weight: 500;
  color: #2a3410;
}
.pb-card b {
  font-size: clamp(30px, 3.4vw, 44px);
  font-weight: 600;
  letter-spacing: -0.04em;
  color: #151a08;
  font-variant-numeric: tabular-nums;
}
.pb-cards-shadow {
  position: relative;
  z-index: 3;
  width: min(820px, 94%);
  height: 10px;
  margin-top: -18px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(0, 0, 0, 0.08), transparent);
}
.pb-logos-wrap {
  position: relative;
  display: flex;
  justify-content: center;
  width: min(860px, 100%);
}
.pb-logos {
  position: relative;
  z-index: 6;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  width: 100%;
  padding: 6px 10px;
  color: #151515;
}
.pb-logos span {
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.03em;
  white-space: nowrap;
}
.pb-tree-wrap {
  position: absolute;
  z-index: 2;
  left: 50%;
  bottom: -2%;
  width: min(340px, 58vw);
  transform: translateX(-50%);
}
.pb-tree {
  transform: translateY(var(--ty, 75%));
  will-change: transform;
}
.pb-band {
  position: absolute;
  z-index: 5;
  top: -6px;
  left: 50%;
  width: min(340px, 58vw);
  height: 64px;
  transform: translateX(-50%);
  background: rgba(255, 255, 255, 0.12);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
}

/* ---- "Editörün seçimi": an accordion of three big numbers ---- */
.pb-loop {
  position: relative;
  height: 100vh;
  min-height: 680px;
  overflow: hidden;
  background: #fff;
}
.pb-loop-head {
  position: absolute;
  z-index: 4;
  top: 9vh;
  left: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 0 16px;
  text-align: center;
}
.pb-loop-cloud {
  position: absolute;
  z-index: 3;
  top: 4vh;
  left: -4vw;
  width: min(36vw, 520px);
  pointer-events: none;
}
.pb-loop-cloud img {
  width: 100%;
}
.pb-track {
  position: absolute;
  z-index: 2;
  inset: 0;
  display: flex;
}
.pb-panel {
  position: relative;
  flex: 0 0 clamp(96px, 11vw, 170px);
  height: 100%;
  overflow: hidden;
  border-right: 1px solid var(--line);
  outline: none;
  cursor: pointer;
  transition: flex-grow 0.9s cubic-bezier(0.77, 0, 0.18, 1);
}
.pb-panel:last-child {
  border-right: 0;
}
.pb-panel.is-active {
  flex-grow: 1;
  cursor: default;
}
.pb-panel-in {
  position: absolute;
  left: clamp(14px, 1.8vw, 28px);
  bottom: 10vh;
  display: flex;
  align-items: flex-end;
  gap: clamp(16px, 2vw, 30px);
  width: max-content;
  opacity: 0;
  translate: 0 120px;
  transition: opacity 1.1s var(--pb-out), translate 1.1s var(--pb-out);
}
.pb-track.is-in .pb-panel-in {
  opacity: 1;
  translate: 0 0;
}
.pb-track.is-in .pb-panel:nth-child(2) .pb-panel-in {
  transition-delay: 0.12s;
}
.pb-track.is-in .pb-panel:nth-child(3) .pb-panel-in {
  transition-delay: 0.24s;
}
.pb-num {
  font-size: clamp(170px, 36vh, 380px);
  font-weight: 600;
  line-height: 0.74;
  letter-spacing: -0.07em;
}
.pb-n1 { color: var(--olive); }
.pb-n2 { color: var(--green); }
.pb-n3 { color: var(--lime); }
.pb-step {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  width: min(420px, 30vw);
  padding-bottom: 4px;
  opacity: 0;
  transform: translateX(-24px);
  filter: blur(6px);
  transition: opacity 0.4s, transform 0.5s, filter 0.4s;
}
.is-active .pb-step {
  opacity: 1;
  transform: none;
  filter: none;
  transition: opacity 0.7s 0.4s, transform 0.9s 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), filter 0.7s 0.4s;
}
.pb-step h3 {
  margin: 0;
  font-size: clamp(20px, 1.7vw, 26px);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -0.03em;
}
.pb-step p {
  margin: 0;
  font-size: 14px;
  line-height: 1.45;
  color: #2b2e27;
}
.pb-mini-cloud {
  position: absolute;
  left: -10%;
  bottom: calc(100% + clamp(70px, 13vh, 150px));
  width: min(18vw, 250px);
  max-width: none !important;
  animation: pbDriftA 9s ease-in-out infinite alternate;
}

/* ---- articles with a category filter ---- */
.pb-list {
  position: relative;
  padding: 14vh max(16px, calc((100% - 1180px) / 2)) 12vh !important;
  background: #fff;
}
.pb-list-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  margin-bottom: 44px;
}
.pb-filters {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px;
  margin-top: 10px;
  padding: 5px;
  border-radius: 24px;
  background: #f4f6ef;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.04);
}
.pb-filter {
  position: relative;
  z-index: 1;
  padding: 9px 16px;
  border: 0;
  border-radius: 999px;
  background: none;
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  color: var(--muted);
  cursor: pointer;
  transition: color 0.35s;
}
.pb-filter:hover {
  color: var(--ink);
}
.pb-filter.is-on {
  color: #f3f8e4;
}
.pb-filter-pill {
  position: absolute;
  z-index: 0;
  left: 0;
  top: 0;
  width: var(--w, 0);
  height: var(--h, 0);
  border-radius: 999px;
  background: var(--olive);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 2px 6px rgba(60, 80, 10, 0.25);
  transform: translate(var(--x, 0), var(--y, 0));
  transition: transform 0.55s var(--pb-out), width 0.55s var(--pb-out), height 0.55s var(--pb-out);
}
.pb-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-auto-flow: dense;
  gap: 14px;
}
.pb-empty {
  padding: 40px 0;
  text-align: center;
  color: var(--muted);
}
.pb-post {
  position: relative;
  grid-column: span 4;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: var(--radius);
  background: #f6f8f1;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.04);
  transition: transform 0.5s var(--pb-out), box-shadow 0.5s var(--pb-out),
    opacity 0.8s var(--pb-out) calc(var(--d, 0) * 80ms), translate 1s var(--pb-out) calc(var(--d, 0) * 80ms);
}
.pb-post[hidden] {
  display: none;
}
.pb-post:hover {
  transform: translateY(-4px);
  box-shadow: 0 26px 50px -26px rgba(60, 80, 10, 0.4), 0 0 0 1px rgba(77, 106, 16, 0.18);
}
.pb-post.is-out {
  opacity: 0;
  translate: 0 20px;
  pointer-events: none;
}
.pb-post-media {
  position: relative;
  display: block;
  aspect-ratio: 16 / 11;
  overflow: hidden;
  background: #fff;
}
.pb-post-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1s var(--pb-out);
}
.pb-post:hover .pb-post-media img {
  transform: scale(1.06);
}
.pb-post-media.is-cut {
  background: radial-gradient(circle at 50% 72%, #eaf2d2, #fff 70%);
}
.pb-post-media.is-cut img {
  object-fit: contain;
  padding: 6%;
}
.pb-post-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 10px;
  padding: 18px 20px 20px;
}
.pb-post-title {
  font-size: 20px;
  font-weight: 500;
  line-height: 1.22;
  letter-spacing: -0.02em;
}
.pb-post-ex {
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  font-size: 14px;
  line-height: 1.45;
  color: var(--muted);
}
.pb-post-meta {
  margin-top: auto;
  padding-top: 4px;
  font-size: 12px;
  color: #7a7f70;
}
.pb-post-go {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--olive);
  color: #f3f8e4;
  opacity: 0;
  transform: scale(0.6) rotate(-45deg);
  transition: transform 0.5s var(--pb-out), opacity 0.35s;
}
.pb-post:hover .pb-post-go {
  opacity: 1;
  transform: scale(1) rotate(-45deg);
}
.pb-post--wide {
  grid-column: span 8;
  flex-direction: row;
}
.pb-post--wide .pb-post-media {
  flex: 0 0 56%;
  aspect-ratio: auto;
  min-height: 340px;
}
.pb-post--wide .pb-post-body {
  justify-content: center;
  padding: 28px 30px;
}
.pb-post--wide .pb-post-title {
  font-size: clamp(22px, 2vw, 28px);
}
.pb-post--wide .pb-post-ex {
  -webkit-line-clamp: 3;
}
.pb-post--wide .pb-post-go {
  left: calc(56% - 54px);
  right: auto;
}
/* a tall card: the picture fills it, the text sits on a lime panel over its lower part */
.pb-post--tall {
  grid-row: span 2;
}
.pb-post--tall .pb-post-media {
  position: absolute;
  inset: 0;
  aspect-ratio: auto;
}
.pb-post--tall .pb-post-body {
  position: relative;
  z-index: 1;
  flex: none;
  margin: auto 12px 12px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.82);
  -webkit-backdrop-filter: blur(12px) saturate(1.2);
  backdrop-filter: blur(12px) saturate(1.2);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

/* ---- the valley at the end ---- */
.pb-cta {
  position: relative;
  height: 110vh;
  min-height: 720px;
  overflow: hidden;
  background: #fff;
}
.pb-cta-img {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 78%;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 24%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 24%);
}
.pb-cta-img img {
  width: 100%;
  height: 118%;
  object-fit: cover;
  object-position: center 60%;
  transform: translateY(var(--ty, -12%));
  will-change: transform;
}
.pb-cta-card {
  position: absolute;
  z-index: 4;
  top: 30%;
  left: 0;
  right: 0;
  width: min(680px, calc(100% - 32px));
  margin: 0 auto;
  padding: 46px 28px 54px;
  border-radius: 26px;
  text-align: center;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.96) 0%, rgba(255, 255, 255, 0.75) 35%, rgba(255, 255, 255, 0.12) 100%);
  border: 1px solid rgba(255, 255, 255, 0.7);
  -webkit-backdrop-filter: blur(16px) saturate(1.1);
  backdrop-filter: blur(16px) saturate(1.1);
  box-shadow: 0 30px 60px rgba(10, 20, 60, 0.18);
}
.pb-cta-card.pb-in {
  translate: 0 80px;
  scale: 0.94;
  filter: blur(10px);
  transition: opacity 1.2s var(--pb-out), translate 1.2s var(--pb-out), scale 1.2s var(--pb-out), filter 1.2s var(--pb-out);
}
.pb-cta-card.pb-in.is-in {
  translate: 0 0;
  scale: 1;
  filter: none;
}
.pb-cta-card .pb-h2 {
  margin: 16px 0 10px;
  font-size: clamp(24px, 2.8vw, 38px);
}
.pb-cta-card p {
  margin: 0 0 22px;
  font-size: 14px;
  color: #1d2230;
}
.pb-cta-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}
.pb-petals {
  position: absolute;
  inset: 0;
  z-index: 3;
  overflow: hidden;
  pointer-events: none;
}
.pb-petal {
  position: absolute;
  top: -20px;
  width: 10px;
  height: 8px;
  border-radius: 80% 0 80% 0;
  background: #f6c4d6;
  opacity: 0.85;
  scale: var(--s, 1);
  animation: pbFall linear infinite;
}
@keyframes pbFall {
  to { transform: translate(var(--dx), 120vh) rotate(540deg); }
}

/* ---- article page ---- */
.pb-progress {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  z-index: 10000;
  height: 3px;
  pointer-events: none;
}
.pb-progress i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--olive), var(--lime));
  transform: scaleX(var(--p, 0));
  transform-origin: 0 50%;
}
.pb-ph {
  position: relative;
  overflow: hidden;
  padding: clamp(170px, 24vh, 220px) 16px 0 !important;
  background: #fff;
}
.pb-ph .pb-cloud--l {
  top: 4%;
  width: min(34vw, 480px);
}
.pb-ph .pb-cloud--r {
  top: 8%;
  width: min(32vw, 460px);
}
.pb-ph-in {
  position: relative;
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  max-width: 920px;
  margin: 0 auto;
  text-align: center;
}
.pb-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 500;
  color: var(--muted) !important;
}
.pb-back svg {
  transition: transform 0.4s var(--pb-out);
}
.pb-back:hover svg {
  transform: translateX(-4px);
}
.pb-ph-title {
  margin: 0;
  font-size: clamp(32px, 4.4vw, 64px);
  font-weight: 400;
  line-height: 1.06;
  letter-spacing: -0.045em;
}
.pb-ph-lead {
  max-width: 640px;
  margin: 0;
  font-size: clamp(16px, 1.3vw, 19px);
  line-height: 1.5;
  color: var(--muted);
}
.pb-ph-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px 18px;
  font-size: 13px;
  color: #6b7062;
}
.pb-ph-meta b {
  font-weight: 600;
  color: var(--ink);
}
.pb-av {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--lime);
  color: #151a08;
  font-size: 12px;
  font-weight: 600;
}
.pb-ph-fig {
  position: relative;
  z-index: 2;
  width: min(1180px, 100%);
  margin: 56px auto 0;
}
.pb-ph-frame {
  position: relative;
  display: block;
  aspect-ratio: 16 / 8;
  overflow: hidden;
  border-radius: 28px;
  clip-path: inset(100% 0 0 0 round 28px);
  transition: clip-path 1.6s cubic-bezier(0.77, 0, 0.18, 1) 0.9s;
}
.is-started .pb-ph-frame {
  clip-path: inset(0 0 0 0 round 28px);
}
.pb-ph-frame img {
  position: absolute;
  left: 0;
  top: -10%;
  width: 100%;
  height: 120%;
  object-fit: cover;
  scale: 1.2;
  translate: 0 var(--par, 0px);
  transition: scale 2.2s var(--pb-out) 0.9s;
}
.is-started .pb-ph-frame img {
  scale: 1;
}
.pb-ph-fig figcaption,
.pb-fig figcaption {
  margin-top: 12px;
  font-size: 12px;
  color: #7a7f70;
}
.pb-hero-glass--fig {
  inset: -30px 0 auto;
  height: calc(100% + 60px);
}
.pb-body {
  display: grid;
  grid-template-columns: minmax(180px, 230px) minmax(0, 720px);
  justify-content: center;
  gap: clamp(32px, 6vw, 96px);
  padding: 90px 16px 60px !important;
  background: #fff;
}
.pb-sticky {
  position: sticky;
  top: 140px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.pb-side-title {
  margin: 0;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--olive);
}
.pb-toc {
  display: grid;
  gap: 2px;
  margin: 0 0 26px;
  padding: 0;
  list-style: none;
  border-left: 1px solid var(--line);
}
.pb-toc a {
  position: relative;
  display: block;
  padding: 8px 0 8px 16px;
  font-size: 14px;
  line-height: 1.35;
  color: #7a7f70;
  transition: color 0.3s;
}
.pb-toc a::before {
  content: "";
  position: absolute;
  left: -1px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--olive);
  transform: scaleY(0);
  transition: transform 0.4s var(--pb-out);
}
.pb-toc a:hover,
.pb-toc a.is-on {
  color: var(--ink);
}
.pb-toc a.is-on::before {
  transform: scaleY(1);
}
.pb-share {
  display: flex;
  gap: 8px;
}
.pb-sh {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #f4f6ef;
  color: var(--ink);
  font: inherit;
  cursor: pointer;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05);
  transition: background 0.3s, color 0.3s, transform 0.3s;
}
.pb-sh:hover {
  background: var(--olive);
  color: #f3f8e4;
  transform: translateY(-2px);
}
.pb-sh.is-done {
  background: var(--lime);
  color: #151a08;
}
.pb-article {
  font-size: 17px;
  line-height: 1.7;
  color: #2b2e27;
}
.pb-article p {
  margin: 0 0 22px;
}
.pb-article .pb-intro {
  font-size: clamp(19px, 1.6vw, 22px);
  line-height: 1.55;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.pb-intro::first-letter {
  float: left;
  padding: 6px 12px 0 0;
  font-size: 76px;
  font-weight: 600;
  font-style: italic;
  line-height: 0.8;
  color: var(--olive);
}
.pb-article h2 {
  margin: 56px 0 16px;
  font-size: clamp(24px, 2.2vw, 32px);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -0.03em;
  color: var(--ink);
  scroll-margin-top: 140px;
}
.pb-quote {
  margin: 40px 0;
  padding: 34px 36px;
  border-radius: var(--radius);
  background: var(--pill);
}
.pb-article .pb-quote p {
  margin: 0 0 14px;
  font-size: clamp(22px, 2vw, 28px);
  font-weight: 500;
  font-style: italic;
  line-height: 1.3;
  letter-spacing: -0.02em;
  color: var(--olive);
}
.pb-quote cite {
  font-size: 12px;
  font-style: normal;
  font-weight: 500;
  color: #2c3a10;
}
.pb-fig {
  margin: 40px 0;
}
.pb-fig-frame {
  display: block;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-radius: var(--radius);
}
.pb-fig-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1s var(--pb-out);
}
.pb-fig:hover img {
  transform: scale(1.04);
}
.pb-list-ol {
  display: grid;
  gap: 10px;
  margin: 0 0 30px;
  padding: 0;
  list-style: none;
  counter-reset: pbli;
}
.pb-list-ol li {
  position: relative;
  padding: 14px 18px 14px 58px;
  border-radius: 16px;
  background: #f6f8f1;
  counter-increment: pbli;
}
.pb-list-ol li::before {
  content: counter(pbli);
  position: absolute;
  left: 18px;
  top: 50%;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--lime);
  color: #151a08;
  font-size: 12px;
  font-weight: 600;
  transform: translateY(-50%);
}
.pb-product {
  position: relative;
  display: flex;
  align-items: center;
  gap: 24px;
  margin: 48px 0 28px;
  padding: 22px 30px 22px 22px;
  border-radius: var(--radius);
  background: var(--lime);
  -webkit-mask: radial-gradient(circle 17px at 0 55%, #0000 97%, #000) left / 51% 100% no-repeat, radial-gradient(circle 17px at 100% 55%, #0000 97%, #000) right / 51% 100% no-repeat;
  mask: radial-gradient(circle 17px at 0 55%, #0000 97%, #000) left / 51% 100% no-repeat, radial-gradient(circle 17px at 100% 55%, #0000 97%, #000) right / 51% 100% no-repeat;
}
.pb-product-media {
  flex: 0 0 clamp(110px, 16vw, 170px);
  aspect-ratio: 1440 / 980;
}
.pb-product-media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform 0.8s var(--pb-out);
}
.pb-product:hover .pb-product-media img {
  transform: translateY(-4px) scale(1.05);
}
.pb-product-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.pb-product-body small {
  font-size: 11px;
  font-weight: 500;
  color: #2a3410;
}
.pb-product-body b {
  font-size: clamp(24px, 2.4vw, 32px);
  font-weight: 600;
  letter-spacing: -0.04em;
  color: #151a08;
}
.pb-product .pb-more {
  color: #151a08 !important;
}
.pb-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.pb-tags span {
  padding: 5px 12px;
  border-radius: 999px;
  background: var(--pill);
  color: #2c3a10;
  font-size: 12px;
  font-weight: 500;
}
.pb-list--related {
  padding-top: 10vh !important;
  border-top: 1px solid var(--line);
}

/* ---- smaller screens ---- */
@media (max-width: 900px) {
  .pb-cards {
    grid-template-columns: repeat(2, 1fr);
  }
  .pb-card {
    height: 120px;
  }
  .pb-logos {
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px 26px;
  }
  .pb-logos span {
    font-size: 16px;
  }
  .pb-stats {
    height: auto;
  }
  .pb-stats-sticky {
    position: relative;
    height: auto;
    min-height: 100vh;
    padding: 90px 0 300px;
  }
  .pb-tree-wrap {
    bottom: 0;
  }
  .pb-band {
    display: none;
  }
  .pb-post {
    grid-column: span 6;
  }
  .pb-post--wide {
    grid-column: span 12;
  }
  .pb-body {
    grid-template-columns: minmax(0, 720px);
  }
  .pb-sticky {
    position: static;
  }
}
@media (max-width: 760px) {
  .pb-hero {
    height: 100svh;
    min-height: 560px;
  }
  .pb-h1 {
    top: 26%;
  }
  .pb-hero-media {
    height: 66%;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 14%);
    mask-image: linear-gradient(to bottom, transparent 0, #000 14%);
  }
  .pb-hero-media video {
    object-position: 38% 100%;
    transform: scale(1.12);
    transform-origin: 50% 100%;
  }
  .pb-cloud--l {
    top: 6%;
    left: -18vw;
    width: 70vw;
  }
  .pb-cloud--r {
    top: 10%;
    right: -20vw;
    width: 66vw;
  }
  .pb-loop {
    height: auto;
    min-height: 0;
    padding: 12vh 0 40px;
  }
  .pb-loop-head {
    position: relative;
    top: auto;
  }
  .pb-loop-cloud {
    top: 2vh;
    left: -14vw;
    width: 62vw;
    opacity: 0.9;
  }
  .pb-track {
    position: relative;
    inset: auto;
    flex-direction: column;
    margin-top: 40px;
  }
  .pb-panel {
    flex: none;
    height: auto;
    overflow: visible;
    border-right: 0;
    border-top: 1px solid var(--line);
    cursor: auto;
  }
  .pb-panel-in {
    position: relative;
    left: auto;
    bottom: auto;
    width: auto;
    gap: 18px;
    padding: 28px 16px;
  }
  .pb-num {
    font-size: 150px;
  }
  .pb-step,
  .is-active .pb-step {
    width: auto;
    opacity: 1;
    transform: none;
    filter: none;
  }
  main.mk-pb .pb-mini-cloud {
    display: none;
  }
  .pb-filters {
    flex-wrap: nowrap;
    justify-content: flex-start;
    max-width: 100%;
    overflow-x: auto;
    scrollbar-width: none;
    border-radius: 999px;
  }
  .pb-filters::-webkit-scrollbar {
    display: none;
  }
  .pb-post,
  .pb-post--wide,
  .pb-post--tall {
    grid-column: span 12;
  }
  .pb-post--wide {
    flex-direction: column;
  }
  .pb-post--wide .pb-post-media {
    flex: none;
    aspect-ratio: 16 / 11;
    min-height: 0;
  }
  .pb-post--wide .pb-post-go {
    left: auto;
    right: 14px;
  }
  .pb-post--tall {
    grid-row: span 1;
    min-height: 460px;
  }
  .pb-cta {
    height: auto;
    min-height: 0;
    padding: 60px 0 0 !important;
  }
  .pb-cta-img {
    position: relative;
    height: 92vh;
    min-height: 620px;
  }
  .pb-cta-img img {
    object-position: 30% 60%;
  }
  .pb-cta-card {
    top: 120px;
    padding: 34px 18px 42px;
  }
  .pb-ph-frame {
    aspect-ratio: 4 / 3;
  }
  .pb-product {
    flex-direction: column;
    align-items: flex-start;
  }
}
@media (prefers-reduced-motion: reduce) {
  main.mk-pb *,
  main.mk-pb *::before,
  main.mk-pb *::after {
    animation: none !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0s !important;
  }
  .pb-petals {
    display: none;
  }
}

/* Swarovski: "Detayı görün" between the opening and the loupe film (2026-10-26), after the
   "PureFlow One" design the user pasted: a man looking into the camera over a faint grid; where the
   pointer moves a soft round light shows him wearing loupes (initLoupeReveal sets --x/--y, eases
   after the pointer and moves the grid a little). Without a mouse, or before it moves, the light
   wanders over his face by itself. The loupe picture is a montage: the man is the design's own
   picture, the loupes are cut from the iMAG XR product photo (public/medikallup/reveal/). */
/* the section is taller than the screen and its picture stays put (sticky): between the mist at
   its two edges there is more than half a screen of clear view to play with the light */
section.mk-lp {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 170vh;
  padding: 0 !important;
  background: #fff;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  /* no straight edges: the white melts into the night mountain above and into the loupe film
     below (the film is pulled up under the end of this section), under the mist (initLoupeReveal) */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 20vh, #000 calc(100% - 28vh), transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 20vh, #000 calc(100% - 28vh), transparent 100%);
}
.mk-lp-stick {
  position: sticky;
  top: 0;
  width: 100%;
  height: 100vh;
  min-height: 560px;
  overflow: hidden;
}
.mk-lp-grid {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  opacity: 0.1;
  pointer-events: none;
}
.mk-lp-base,
.mk-lp-reveal {
  position: absolute;
  inset: 0;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
.mk-lp-base {
  z-index: 1;
}
.mk-lp-reveal {
  --r: 360px;
  z-index: 3;
  pointer-events: none;
}
/* the loupe stays on; where the mouse is, a soft round window shows the bare face (catalog.js
   initLoupeReveal sets --hole and .is-open only while the window is open; with no mask at all
   otherwise, so no browser can lose the loupe over a zero-sized window) */
.mk-lp-reveal.is-open {
  -webkit-mask-image: radial-gradient(circle var(--hole, 0px) at var(--x, -999px) var(--y, -999px), transparent 0, transparent 50%, rgba(0, 0, 0, 0.2) 64%, rgba(0, 0, 0, 0.5) 76%, rgba(0, 0, 0, 0.8) 88%, #000 100%);
  mask-image: radial-gradient(circle var(--hole, 0px) at var(--x, -999px) var(--y, -999px), transparent 0, transparent 50%, rgba(0, 0, 0, 0.2) 64%, rgba(0, 0, 0, 0.5) 76%, rgba(0, 0, 0, 0.8) 88%, #000 100%);
}
.mk-lp-text {
  position: absolute;
  z-index: 5;
  left: 20px;
  bottom: 48px;
  max-width: 260px;
}
/* the Swarovski Optik × ZEISS logo in place of the design's label and heading */
.mk-lp-text:has(.mk-lp-logo) {
  max-width: none;
}
.mk-lp-logo {
  margin: 0 0 20px;
  line-height: 0;
}
.mk-lp-logo img {
  display: block;
  width: clamp(230px, 27vw, 430px);
  height: auto;
}
@media (min-width: 768px) {
  .mk-lp-logo {
    margin-bottom: 28px;
  }
}
.mk-lp-label {
  margin: 0 0 8px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #4b5563;
}
.mk-lp-heading {
  margin: 0 0 16px;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.15;
  color: #111827;
}
.mk-lp-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}
.mk-lp-btn {
  padding: 8px 16px;
  border-radius: 9999px;
  background: #111827;
  color: #fff !important;
  font-size: 12px;
  font-weight: 500;
  text-decoration: none;
  transition: background 0.2s;
}
.mk-lp-btn:hover {
  background: #374151;
}
.mk-lp-specs {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #374151 !important;
  font-size: 12px;
  font-weight: 500;
  text-decoration: none;
  transition: color 0.2s;
}
.mk-lp-specs:hover {
  color: #111827 !important;
}
@media (min-width: 640px) {
  .mk-lp-text {
    left: 32px;
    max-width: 320px;
  }
  .mk-lp-label {
    margin-bottom: 12px;
    font-size: 11px;
  }
  .mk-lp-heading {
    margin-bottom: 24px;
    font-size: 30px;
  }
  .mk-lp-actions {
    gap: 16px;
  }
  .mk-lp-btn {
    padding: 10px 24px;
    font-size: 14px;
  }
  .mk-lp-specs {
    font-size: 14px;
  }
}
@media (min-width: 768px) {
  .mk-lp-text {
    left: 48px;
    bottom: 224px;
  }
  .mk-lp-heading {
    font-size: 36px;
  }
}
@media (max-width: 767px) {
  .mk-lp-reveal {
    --r: 200px;
  }
  /* on a phone the text sits over his neck: a white haze under it */
  .mk-lp-stick::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 4;
    height: 42%;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.85) 55%, #fff);
    pointer-events: none;
  }
}
/* the menu turns dark while it is over the white section */
html.mk-lp-under body #header:not(.mk-over-foot):not(.menu-open) .nav-link,
html.mk-lp-under body #header:not(.mk-over-foot):not(.menu-open) .nav-link span,
html.mk-lp-under body #header:not(.mk-over-foot):not(.menu-open) .news-w p,
html.mk-lp-under body #header:not(.mk-over-foot):not(.menu-open) .menu-cta p,
html.mk-lp-under body #header:not(.mk-over-foot):not(.menu-open) .menu-cta span {
  color: #111827 !important;
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.7) !important;
}
html.mk-lp-under body #header:not(.mk-over-foot):not(.menu-open) .navbar,
html.mk-lp-under body #header:not(.mk-over-foot):not(.menu-open) .dots-w .dot {
  background: #111827 !important;
}
html.mk-lp-under body #header:not(.mk-over-foot):not(.menu-open).top nav::before {
  background: rgba(255, 255, 255, 0.78) !important;
}
/* Swarovski: the same mist in the page's night colours (html.mk-mist-night, initLoupeReveal): a deep
   navy ground and the cloud layers tinted to a lighter navy (multiplied), so the night mountain, the
   white section and the dark film pass through one dark blue cloud, not a pale grey one */
html.mk-mist-night .mk-cx-mist {
  background: radial-gradient(120% 90% at 50% 45%, rgba(18, 36, 62, 0.97), rgba(10, 22, 40, 0.95) 65%, rgba(5, 12, 24, 0.94));
}
html.mk-mist-night .mk-cx-mist::after {
  content: "";
  position: absolute;
  inset: 0;
  background: #3a5d8c;
  mix-blend-mode: multiply;
}
html.mk-mist-night .mk-cx-mist i:nth-child(1) { opacity: 0.55; }
html.mk-mist-night .mk-cx-mist i:nth-child(2) { opacity: 0.45; }
html.mk-mist-night .mk-cx-mist i:nth-child(3) { opacity: 0.35; }

/* Swarovski: under "Detayı görün" (2026-10-26), after the "REACT" smart-glasses design the user
   pasted: a woman in profile wearing Swarovski loupes on the design's cool blue-grey ground, the
   copy on the other side. The design's entrance, once, when the section comes into view (.is-in,
   initLoupeReveal): the three headline phrases lift out of a mask, tags, button and text rise and
   settle, the round chips open. The picture is a montage: the woman is the design's poster
   (mirrored), her smart glasses retouched away, the iMAG TTL loupe photo put on in their place. */
section.mk-rc {
  position: relative;
  z-index: 2;
  height: 100vh;
  min-height: 600px;
  padding: 0 !important;
  overflow: hidden;
  background: linear-gradient(180deg, #909fae 0%, #acbbca 30%, #c3d0de 60%, #e0ebf7 75%, #e8f3fd 100%);
  color: #000;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  /* no straight edges: it melts out of the white above and into the loupe film below */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 14vh, #000 calc(100% - 26vh), transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 14vh, #000 calc(100% - 26vh), transparent 100%);
}
.mk-rc-stage {
  --u: min(100vw / 1506, 100vh / 1045);
  position: absolute;
  inset: 0;
}
.mk-rc-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 0% 50%;
  pointer-events: none;
  user-select: none;
}
.mk-rc-scrim {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(73% 138% at 31% 50%, rgba(240, 248, 255, 0.35) 0%, rgba(240, 248, 255, 0) 100%);
}
.mk-rc-copy {
  position: absolute;
  top: 50%;
  right: calc(90 * var(--u));
  width: calc(640 * var(--u));
  transform: translateY(-46%);
}
.mk-rc-tags {
  display: flex;
  gap: calc(6 * var(--u));
  height: calc(45 * var(--u));
}
.mk-rc-tag {
  display: inline-flex;
  align-items: center;
  height: 100%;
  padding: 0 calc(26 * var(--u));
  border: calc(1.3 * var(--u)) solid rgba(0, 0, 0, 0.94);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  font-size: calc(15.9 * var(--u));
  font-weight: 500;
  white-space: nowrap;
}
.mk-rc-h {
  margin: calc(28 * var(--u)) 0 0;
  font-size: calc(51.2 * var(--u));
  line-height: calc(53.1 * var(--u));
  font-weight: 700;
  letter-spacing: calc(-0.72 * var(--u));
  color: #000;
}
.mk-rc-lede {
  color: #3a424c;
  font-weight: 300;
}
.mk-rc-rv,
.mk-rc-in {
  display: inline-block;
}
.mk-rc-cta {
  display: flex;
  align-items: center;
  height: calc(62 * var(--u));
  margin-top: calc(43 * var(--u));
}
.mk-rc-btn {
  display: inline-flex;
  align-items: center;
  gap: calc(25 * var(--u));
  height: 100%;
  padding: 0 calc(36 * var(--u)) 0 calc(40 * var(--u));
  border-radius: 999px;
  background: #000;
  color: #fff !important;
  font-size: calc(19.7 * var(--u));
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  transition: transform 0.3s cubic-bezier(0.2, 0.7, 0.3, 1);
}
.mk-rc-btn:hover {
  transform: translateY(-1px);
}
.mk-rc-arrow {
  width: calc(16.4 * var(--u));
  height: calc(16.4 * var(--u));
}
.mk-rc-chip {
  display: block;
  width: calc(63.4 * var(--u));
  height: calc(63.4 * var(--u));
  margin-left: calc(6 * var(--u));
  border-radius: 50%;
  object-fit: cover;
}
.mk-rc-sub {
  margin: calc(70 * var(--u)) 0 0;
  max-width: calc(560 * var(--u));
  font-size: calc(19.4 * var(--u));
  line-height: calc(25.4 * var(--u));
  font-weight: 400;
  color: #000;
}
/* the entrance (the design's three behaviours) */
.mk-rc-rv {
  clip-path: inset(-0.34em -0.09em -0.16em -0.09em);
}
.mk-rc .mk-rc-in {
  opacity: 0;
  transform: translateY(112%);
}
.mk-rc .mk-rc-tag,
.mk-rc .mk-rc-btn,
.mk-rc .mk-rc-sub {
  opacity: 0;
  translate: 0 14px;
}
.mk-rc .mk-rc-chip {
  opacity: 0;
  scale: 0.88;
}
.mk-rc.is-in .mk-rc-in {
  animation: mkRcLift 0.92s cubic-bezier(0.16, 1, 0.3, 1) var(--d) both;
}
.mk-rc.is-in .mk-rc-rv1 .mk-rc-in { --d: 0.3s; }
.mk-rc.is-in .mk-rc-rv2 .mk-rc-in { --d: 0.42s; }
.mk-rc.is-in .mk-rc-rv3 .mk-rc-in { --d: 0.54s; }
.mk-rc.is-in .mk-rc-tag,
.mk-rc.is-in .mk-rc-btn,
.mk-rc.is-in .mk-rc-sub {
  animation: mkRcRise 0.62s cubic-bezier(0.16, 1, 0.3, 1) var(--d) both;
}
.mk-rc.is-in .mk-rc-tag:first-child { --d: 0.18s; }
.mk-rc.is-in .mk-rc-tag:last-child { --d: 0.24s; }
.mk-rc.is-in .mk-rc-btn { --d: 0.74s; }
.mk-rc.is-in .mk-rc-sub { --d: 0.9s; }
.mk-rc.is-in .mk-rc-chip {
  animation: mkRcOpen 0.7s cubic-bezier(0.16, 1, 0.3, 1) var(--d) both;
}
.mk-rc.is-in .mk-rc-chip1 { --d: 0.82s; }
.mk-rc.is-in .mk-rc-chip2 { --d: 0.88s; }
@keyframes mkRcLift {
  from { opacity: 0; transform: translateY(112%); }
  55% { opacity: 1; }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes mkRcRise {
  from { opacity: 0; translate: 0 14px; }
  to { opacity: 1; translate: 0 0; }
}
@keyframes mkRcOpen {
  from { opacity: 0; scale: 0.88; }
  to { opacity: 1; scale: 1; }
}
/* phones and portrait screens: the woman takes the upper field, the copy sits below */
@media (max-aspect-ratio: 1/1) {
  .mk-rc-stage {
    --u: min(100vw / 405, 100vh / 760, 1px);
  }
  .mk-rc-img {
    height: 58%;
    object-position: 28% 40%;
    -webkit-mask-image: linear-gradient(180deg, #000 62%, transparent 100%);
    mask-image: linear-gradient(180deg, #000 62%, transparent 100%);
  }
  .mk-rc-copy {
    top: auto;
    right: auto;
    bottom: calc(40 * var(--u));
    left: calc(26 * var(--u));
    width: calc(100% - 52 * var(--u));
    transform: none;
  }
  .mk-rc-tags { height: calc(33 * var(--u)); }
  .mk-rc-tag { padding: 0 calc(14 * var(--u)); font-size: calc(14 * var(--u)); border-width: 1px; }
  .mk-rc-h { margin-top: calc(18 * var(--u)); font-size: calc(36 * var(--u)); line-height: calc(39 * var(--u)); }
  .mk-rc-cta { height: calc(52 * var(--u)); margin-top: calc(22 * var(--u)); }
  .mk-rc-btn { padding: 0 calc(24 * var(--u)); font-size: calc(16 * var(--u)); gap: calc(14 * var(--u)); }
  .mk-rc-arrow { width: calc(14 * var(--u)); height: calc(14 * var(--u)); }
  .mk-rc-chip { width: calc(50 * var(--u)); height: calc(50 * var(--u)); margin-left: calc(8 * var(--u)); }
  .mk-rc-sub { margin-top: calc(22 * var(--u)); font-size: calc(15.5 * var(--u)); line-height: calc(21.5 * var(--u)); }
}
@media (prefers-reduced-motion: reduce) {
  .mk-rc .mk-rc-in, .mk-rc .mk-rc-tag, .mk-rc .mk-rc-btn, .mk-rc .mk-rc-sub, .mk-rc .mk-rc-chip {
    opacity: 1; transform: none; translate: none; scale: none; animation: none !important;
  }
}
/* the man and the woman cross-fade: the woman's section starts under the man's last fifth of a
   screen and fades in over it; the man keeps no faded lower edge of his own then */
section.mk-lp:has(+ section.mk-rc) {
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 20vh, #000 100%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 20vh, #000 100%);
}
section.mk-lp + section.mk-rc {
  margin-top: -14vh;
  z-index: 3;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 14vh, #000 calc(100% - 18vh), transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 14vh, #000 calc(100% - 18vh), transparent 100%);
}
@media (max-aspect-ratio: 1/1) {
  /* phones: the copy reaches low, so the fade into the film starts below it */
  section.mk-lp + section.mk-rc {
    height: 112vh;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 14vh, #000 calc(100% - 10vh), transparent 100%);
    mask-image: linear-gradient(to bottom, transparent 0, #000 14vh, #000 calc(100% - 10vh), transparent 100%);
  }
  .mk-rc-copy {
    bottom: calc(12vh + 20px);
  }
}

/* Swarovski (2026-10-26, user's request): no haze, mist or soft fades between the sections any more;
   the man, the woman and the film meet with clean edges and the woman's picture is sharp */
section.mk-lp,
section.mk-lp:has(+ section.mk-rc),
section.mk-rc,
section.mk-lp + section.mk-rc {
  -webkit-mask-image: none !important;
  mask-image: none !important;
}
section.mk-lp + section.mk-rc {
  margin-top: 0;
}
.mk-rc-scrim {
  display: none;
}
@media (max-aspect-ratio: 1/1) {
  section.mk-lp + section.mk-rc { height: 100vh; }
  .mk-rc-copy { bottom: calc(40 * var(--u)); }
  .mk-rc-img { -webkit-mask-image: none; mask-image: none; }
}
@media (max-aspect-ratio: 1/1) {
  /* phones: the picture's own pale lower edge meets a ground of the same colour (no line) */
  section.mk-rc { background: #eaf4fe; }
  .mk-rc-img { height: 62%; object-position: 30% 100%; }
}
/* (2026-10-26) the woman is now the user's own picture (Gemini, facing left, cut out on a clear
   ground): as in the design, she stands on the right on the blue-grey ground, the copy on the left */
.mk-rc-img {
  left: auto;
  right: 0;
  width: auto;
  height: 100%;
  max-width: 70%;
  object-fit: contain;
  object-position: 100% 100%;
}
.mk-rc-copy {
  right: auto;
  left: calc(71 * var(--u));
}
@media (max-aspect-ratio: 1/1) {
  section.mk-rc { background: linear-gradient(180deg, #909fae 0%, #b6c4d2 35%, #dce7f2 60%, #eaf4fe 100%); }
  .mk-rc-img { height: 60%; max-width: 100%; right: -6%; object-position: 100% 0; }
  .mk-rc-copy { left: calc(26 * var(--u)); }
}
/* its own proportions, so it has a size before it loads (lazy loading waits for a size) */
.mk-rc-img { aspect-ratio: 1306 / 1300; }
@media (max-aspect-ratio: 1/1) {
  /* phones: the picture ends at her shoulder; its last strip fades instead of a straight cut */
  .mk-rc-img {
    -webkit-mask-image: linear-gradient(180deg, #000 86%, transparent 100%) !important;
    mask-image: linear-gradient(180deg, #000 86%, transparent 100%) !important;
  }
}
@media (max-aspect-ratio: 1/1) {
  /* the box is the picture itself (no empty part under it), so the fade lands on her shoulder */
  .mk-rc-img { width: 112%; height: auto; max-width: none; max-height: 62%; object-fit: cover; object-position: 100% 0; }
}
@media (max-aspect-ratio: 1/1) {
  .mk-rc-img { width: 100%; right: 0; }
}

.mk-rc-img { aspect-ratio: 2203 / 1920; }
/* (2026-10-26) the woman's section on the same white as the man's: his photo's pale cool white and
   the same faint grid, so the two read as one */
section.mk-rc,
section.mk-lp + section.mk-rc {
  background:
    linear-gradient(rgba(100, 116, 139, 0.055) 1px, transparent 1px) 0 0 / 48px 48px,
    linear-gradient(90deg, rgba(100, 116, 139, 0.055) 1px, transparent 1px) 0 0 / 48px 48px,
    #eef1f5;
}
@media (max-aspect-ratio: 1/1) {
  section.mk-rc,
  section.mk-lp + section.mk-rc { background:
    linear-gradient(rgba(100, 116, 139, 0.055) 1px, transparent 1px) 0 0 / 48px 48px,
    linear-gradient(90deg, rgba(100, 116, 139, 0.055) 1px, transparent 1px) 0 0 / 48px 48px,
    #eef1f5; }
}

/* Swarovski (2026-10-26, user's request): from the man down, the page is on the man's pale white
   instead of night navy. The 3D scene behind (dotted floor, drifting loupes, light) is kept and
   moves exactly as before; only its colours are turned over to light by a filter on the canvas
   (html.mk-sw-light, initSwLight), and the white texts on it become dark navy. */
html.mk-sw-light #canvas-wrapper canvas {
  filter: invert(1) hue-rotate(180deg) saturate(0.55) brightness(1.03);
}
/* switched while the man's section hides the canvas: no transition */
html.mk-sw-light main section[data-chapter="TradingChapter"] .white,
html.mk-sw-light main section[data-chapter="TradingChapter"] h2,
html.mk-sw-light main section[data-chapter="TradingChapter"] h3,
html.mk-sw-light main section[data-chapter="TradingChapter"] p,
html.mk-sw-light main section[data-chapter="TradingChapter"] .content,
html.mk-sw-light main section[data-chapter="TradingChapter"] .description,
html.mk-sw-light main section[data-chapter="TradingChapter"] .category,
html.mk-sw-light main section[data-chapter="TradingChapter"] .fs-body,
html.mk-sw-light main section[data-chapter="TradingChapter"] .fs-s1,
html.mk-sw-light main section[data-chapter="TradingChapter"] .mk-rail-name,
html.mk-sw-light main section[data-chapter="TradingChapter"] [data-animation] {
  color: #0c2a4d !important;
}
html.mk-sw-light main section[data-chapter="TradingChapter"] [data-animation] * {
  color: inherit !important;
}
/* the Instagram block and the footer on the light ground: dark text, the logo for light grounds */
html.mk-sw-light main .mk-ig,
html.mk-sw-light main .mk-ig-kicker,
html.mk-sw-light main .mk-ig-text {
  color: #0c2a4d !important;
  text-shadow: none !important;
}
html.mk-sw-light main .mk-ig-handle a {
  background-image: linear-gradient(90deg, #1f4f8f, #2f6fc4, #0c2a4d, #4f8fe0, #1f4f8f, #2f6fc4, #1f4f8f);
  filter: none;
}
html.mk-sw-light #footer .mk-foot-title,
html.mk-sw-light #footer .mk-foot-lines,
html.mk-sw-light #footer .mk-foot-lines a,
html.mk-sw-light #footer .mk-foot-lines span,
html.mk-sw-light #footer .mk-foot-legal,
html.mk-sw-light #footer .mk-foot-legal a,
html.mk-sw-light #footer .mk-foot-icon {
  color: #0c2a4d !important;
  text-shadow: none !important;
}
html.mk-sw-light #footer .mk-foot-icon {
  border-color: rgba(12, 42, 77, 0.3) !important;
}
html.mk-sw-light #footer .line {
  background: rgba(12, 42, 77, 0.25) !important;
}
html.mk-sw-light #footer .mk-footlogo {
  --mk-logo: var(--mk-logo-light);
}
/* the menu on the light ground: dark, as over the man's section */
html.mk-sw-light body #header:not(.mk-over-foot):not(.menu-open) .nav-link,
html.mk-sw-light body #header:not(.mk-over-foot):not(.menu-open) .nav-link span,
html.mk-sw-light body #header:not(.mk-over-foot):not(.menu-open) .news-w p,
html.mk-sw-light body #header:not(.mk-over-foot):not(.menu-open) .menu-cta p,
html.mk-sw-light body #header:not(.mk-over-foot):not(.menu-open) .menu-cta span {
  color: #111827 !important;
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.7) !important;
}
html.mk-sw-light body #header:not(.mk-over-foot):not(.menu-open) .navbar,
html.mk-sw-light body #header:not(.mk-over-foot):not(.menu-open) .dots-w .dot {
  background: #111827 !important;
}
html.mk-sw-light body #header:not(.mk-over-foot):not(.menu-open).top nav::before {
  background: rgba(255, 255, 255, 0.78) !important;
}
/* the starMed logo, upper right of the loupe photo */
.mk-lp-brand {
  position: absolute;
  z-index: 4;
  top: 17%;
  right: 9%;
  width: clamp(150px, 15vw, 260px);
  height: auto;
  pointer-events: none;
}
@media (max-width: 767px) {
  .mk-lp-brand {
    top: 12%;
    right: 20px;
    width: 120px;
  }
}
/* (2026-10-28) right of the woman's button: the starMed and Swarovski Optik logos (as on the man)
   in place of the two round pictures */
.mk-rc-logos {
  display: flex;
  align-items: center;
  gap: calc(22 * var(--u));
  margin-left: calc(28 * var(--u));
  padding-left: calc(26 * var(--u));
  border-left: 1px solid rgba(15, 23, 42, 0.18);
  height: 70%;
}
.mk-rc-logo {
  display: block;
  height: calc(40 * var(--u));
  width: auto;
}
.mk-rc .mk-rc-logo { opacity: 0; scale: 0.92; }
.mk-rc.is-in .mk-rc-logo { animation: mkRcOpen 0.7s cubic-bezier(0.16, 1, 0.3, 1) var(--d) both; }
.mk-rc.is-in .mk-rc-logo1 { --d: 0.82s; }
.mk-rc.is-in .mk-rc-logo2 { --d: 0.88s; }
@media (prefers-reduced-motion: reduce) {
  .mk-rc .mk-rc-logo { opacity: 1; scale: none; animation: none !important; }
}
@media (max-aspect-ratio: 1/1) {
  /* phones: the logos go on their own line under the button */
  .mk-rc-cta { flex-wrap: wrap; height: auto; }
  .mk-rc-cta .mk-rc-btn { height: calc(52 * var(--u)); }
  .mk-rc-logos { flex-basis: 100%; height: auto; margin: 14px 0 0; padding: 0; border: 0; gap: 18px; }
  .mk-rc-logo { height: 30px; }
}
/* (2026-10-28) the scroll film under the woman: no longer pulled up under her section (its top was
   hidden there and it read as a thin band); it now shows whole, a full screen high */
.mk-gapfilm.mk-gapfilm--full {
  margin-top: var(--mk-gf-pull, 0px);
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 10%, #000 86%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0, #000 10%, #000 86%, transparent 100%);
}
.mk-gapfilm--full > video {
  height: max(100vh, 56.25vw);
  aspect-ratio: auto;
  object-fit: cover;
}
@media (max-aspect-ratio: 1/1) {
  .mk-gapfilm--full > video { height: 78vh; }
}
/* (2026-10-28) the film sits flush under the woman: no fade-in or slide (they left a gap while it
   waited to come into view) and no fade at its top edge, only at the bottom */
.mk-gapfilm.mk-gapfilm--full {
  opacity: 1;
  transform: none;
  transition: none;
  -webkit-mask-image: linear-gradient(180deg, #000 0, #000 86%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0, #000 86%, transparent 100%);
}
/* (2026-10-28) Swarovski, under the scroll film: the ice cave flown through by the scroll (frames +
   depth maps, catalog.js initZeissCave); at its end the ZEISS badge carved in ice */
.mk-zc {
  grid-column: 1 / -1;
  position: relative;
  width: 100vw;
  max-width: none;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  height: 310vh;
}
.mk-zc-stage {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  background: #eef2f6;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 9%, #000 91%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0, #000 9%, #000 91%, transparent 100%);
}
.mk-zc-seq {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}
.mk-zc-shade {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: none;
}
@media (max-aspect-ratio: 1/1) {
  .mk-zc { height: 250vh; }
}
/* the cave melts into the page only where the section starts and ends, not on the pinned screen */
.mk-zc-stage {
  -webkit-mask-image: none;
  mask-image: none;
}
.mk-zc::before,
.mk-zc::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  z-index: 2;
  height: 22vh;
  pointer-events: none;
}
.mk-zc::before {
  top: 0;
  background: linear-gradient(180deg, #f3f5f8, rgba(243, 245, 248, 0));
}
.mk-zc::after {
  bottom: 0;
  background: linear-gradient(0deg, #f3f5f8, rgba(243, 245, 248, 0));
}

/* medikallup (2026-10-28): the Swarovski mountain and sky are white now, so the white type on its hero gets a soft shade to stay readable */
main[data-scene="Trading"] .hero .logo { filter: drop-shadow(0 2px 18px rgba(38, 66, 96, .38)) drop-shadow(0 1px 3px rgba(38, 66, 96, .3)); }
main[data-scene="Trading"] .hero { text-shadow: 0 1px 10px rgba(38, 66, 96, .45); }
body:has(main[data-scene="Trading"]) #header .nav-link { text-shadow: 0 1px 8px rgba(38, 66, 96, .5); }
body:has(main[data-scene="Trading"]) .buttons-inner > * { filter: drop-shadow(0 2px 10px rgba(38, 66, 96, .35)); }

/* medikallup (2026-10-28): ZEISS x SWAROVSKI lockup after the ice cave. ZEISS comes in from the left and
   SWAROVSKI OPTIK from the right out of a blur, the X draws itself between them, then a light sweeps over both */
.mk-zx { grid-column: 1 / -1; position: relative; margin: 0 auto; padding: clamp(28px, 5vw, 72px) 0 clamp(36px, 5vw, 80px); width: 100%; display: flex; flex-direction: column; align-items: center; --mk-zx-h: clamp(100px, 11vw, 180px); }
.mk-zx-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.mk-zx-row { display: flex; align-items: center; justify-content: center; gap: clamp(22px, 3.4vw, 60px); }
.mk-zx-logo { position: relative; display: block; line-height: 0; }
.mk-zx-logo img { display: block; width: auto; height: 100%; user-select: none; }
.mk-zx-a { height: var(--mk-zx-h); filter: drop-shadow(0 18px 30px rgba(23, 78, 166, .28)) drop-shadow(0 3px 6px rgba(23, 78, 166, .18)); }
.mk-zx-b { height: calc(var(--mk-zx-h) * .62); }
.mk-zx-sheen { position: absolute; inset: 0; pointer-events: none; -webkit-mask: var(--mk-zx-src) center / contain no-repeat; mask: var(--mk-zx-src) center / contain no-repeat;
  background: linear-gradient(105deg, transparent 0 38%, rgba(255, 255, 255, .0) 40%, rgba(255, 255, 255, .85) 50%, rgba(255, 255, 255, 0) 60%, transparent 62%) no-repeat; background-size: 250% 100%; background-position: 130% 0; }
.mk-zx-b .mk-zx-sheen { background-image: linear-gradient(105deg, transparent 0 38%, rgba(120, 170, 255, 0) 40%, rgba(150, 195, 255, .95) 50%, rgba(120, 170, 255, 0) 60%, transparent 62%); }
.mk-zx-x { position: relative; width: calc(var(--mk-zx-h) * .42); height: calc(var(--mk-zx-h) * .42); flex: none; }
.mk-zx-x svg { position: relative; width: 100%; height: 100%; overflow: visible; }
.mk-zx-x path { stroke: url(#mkzx-g); stroke-width: 4.2; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.mk-zx-halo { position: absolute; left: 50%; top: 50%; width: 260%; height: 260%; transform: translate(-50%, -50%) scale(.4); border-radius: 50%; opacity: 0;
  background: radial-gradient(closest-side, rgba(110, 165, 255, .6), rgba(110, 165, 255, .16) 55%, transparent); }
.mk-zx-line { display: block; margin-top: clamp(26px, 3vw, 44px); width: min(720px, 70%); height: 1px; transform: scaleX(0);
  background: linear-gradient(90deg, transparent, rgba(23, 78, 166, .55) 30%, rgba(12, 18, 28, .55) 70%, transparent); }

/* before the reveal */
.mk-zx[data-mk-zx] .mk-zx-a { opacity: 0; transform: translateX(-60px) scale(.94); filter: blur(14px); }
.mk-zx[data-mk-zx] .mk-zx-b { opacity: 0; transform: translateX(60px) scale(.94); filter: blur(14px); }
/* the reveal */
.mk-zx.is-in .mk-zx-a { animation: mk-zx-in-a 1.3s cubic-bezier(.2, .8, .2, 1) .1s forwards; }
.mk-zx.is-in .mk-zx-b { animation: mk-zx-in-b 1.3s cubic-bezier(.2, .8, .2, 1) .25s forwards; }
.mk-zx.is-in .mk-zx-s1 { animation: mk-zx-draw .55s cubic-bezier(.6, 0, .2, 1) .85s forwards; }
.mk-zx.is-in .mk-zx-s2 { animation: mk-zx-draw .55s cubic-bezier(.6, 0, .2, 1) 1.1s forwards; }
.mk-zx.is-in .mk-zx-halo { animation: mk-zx-halo 1.6s ease-out 1.2s forwards, mk-zx-breathe 5s ease-in-out 2.8s infinite; }
.mk-zx.is-in .mk-zx-line { animation: mk-zx-line 1.4s cubic-bezier(.2, .8, .2, 1) 1.2s forwards; }
.mk-zx.is-in .mk-zx-sheen { animation: mk-zx-sheen 1.5s ease-in-out 1.7s, mk-zx-sheen 1.5s ease-in-out 8s infinite; }
.mk-zx.is-in .mk-zx-b .mk-zx-sheen { animation-delay: 1.95s, 8.25s; }
@keyframes mk-zx-in-a { to { opacity: 1; transform: none; filter: drop-shadow(0 18px 30px rgba(23, 78, 166, .28)) drop-shadow(0 3px 6px rgba(23, 78, 166, .18)); } }
@keyframes mk-zx-in-b { to { opacity: 1; transform: none; filter: blur(0); } }
@keyframes mk-zx-draw { to { stroke-dashoffset: 0; } }
@keyframes mk-zx-halo { 0% { opacity: 0; transform: translate(-50%, -50%) scale(.4); } 45% { opacity: 1; } 100% { opacity: .55; transform: translate(-50%, -50%) scale(1); } }
@keyframes mk-zx-breathe { 0%, 100% { opacity: .55; transform: translate(-50%, -50%) scale(1); } 50% { opacity: .85; transform: translate(-50%, -50%) scale(1.12); } }
@keyframes mk-zx-line { to { transform: scaleX(1); } }
@keyframes mk-zx-sheen { from { background-position: 130% 0; } to { background-position: -30% 0; } }
@media (max-width: 640px) {
  .mk-zx { --mk-zx-h: 64px; }
  .mk-zx-row { gap: 16px; }
  .mk-zx-b { height: calc(var(--mk-zx-h) * .6); }
}
@media (prefers-reduced-motion: reduce) {
  .mk-zx[data-mk-zx] .mk-zx-a, .mk-zx[data-mk-zx] .mk-zx-b { opacity: 1; transform: none; filter: none; animation: none; }
  .mk-zx[data-mk-zx] .mk-zx-x path { stroke-dashoffset: 0; animation: none; }
  .mk-zx[data-mk-zx] .mk-zx-line { transform: none; animation: none; }
  .mk-zx[data-mk-zx] .mk-zx-halo { opacity: .5; transform: translate(-50%, -50%); animation: none; }
  .mk-zx[data-mk-zx] .mk-zx-sheen { animation: none; }
}

/* (2026-10-28) the Swarovski scroll film pinned full screen: its section is taller than the screen and
   the film stays fixed edge to edge while the scroll plays it (catalog.js initScrubFilms), then moves on */
.mk-gapfilm.mk-gapfilm--full { display: block; height: 260vh; overflow: visible; }
.mk-gapfilm--full::after { content: none; }
.mk-gf-pin { position: sticky; top: 0; width: 100%; height: 100vh; height: 100svh; overflow: hidden; }
.mk-gf-pin::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(120% 90% at 50% 50%, transparent 40%, rgba(3, 10, 26, 0.55) 100%),
    linear-gradient(180deg, rgba(10, 26, 58, 0.35), rgba(10, 26, 58, 0.12) 40%, rgba(10, 26, 58, 0.12) 60%, rgba(10, 26, 58, 0.4));
  mix-blend-mode: multiply;
}
.mk-gapfilm--full .mk-gf-pin > video { width: 100%; height: 100%; object-fit: cover; aspect-ratio: auto; }
@media (max-aspect-ratio: 1/1) {
  .mk-gapfilm.mk-gapfilm--full { height: 220vh; }
  .mk-gapfilm--full .mk-gf-pin > video { height: 100%; }
}
.mk-gapfilm.mk-gapfilm--full {
  -webkit-mask-image: linear-gradient(180deg, #000 0, #000 94%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0, #000 94%, transparent 100%);
}

/* (2026-10-29) the ice cave ends on the Swarovski loupe; its features come in on the left and right
   as the scroll closes in (catalog.js sets --zc-p, 0 to 1, on the section) */
.mk-zc { --zc-p: 0; }
.mk-zc-feats { position: absolute; inset: 0; pointer-events: none; display: flex; justify-content: space-between; align-items: center; padding: 0 clamp(20px, 4.5vw, 84px); z-index: 2; }
.mk-zc-col { display: flex; flex-direction: column; gap: clamp(14px, 2.4vh, 28px); width: clamp(220px, 22vw, 340px); }
.mk-zc-col--r { align-items: flex-end; text-align: right; }
.mk-zc-f {
  --off: 0;
  --k: clamp(0, (var(--zc-p) - .48 - var(--off) - var(--at) * .11) * 11, 1);
  position: relative; display: flex; flex-direction: column; gap: 4px; width: 100%;
  padding: clamp(14px, 1.6vw, 22px) clamp(16px, 1.8vw, 26px);
  border-radius: 18px; color: #0d2340;
  background: linear-gradient(135deg, rgba(255, 255, 255, .62), rgba(236, 244, 252, .34));
  border: 1px solid rgba(255, 255, 255, .8);
  box-shadow: 0 18px 40px -22px rgba(20, 50, 90, .45), inset 0 1px 0 rgba(255, 255, 255, .9);
  -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2);
  opacity: var(--k);
  transform: translateX(calc((1 - var(--k)) * -70px)) scale(calc(.94 + var(--k) * .06));
  filter: blur(calc((1 - var(--k)) * 8px));
}
.mk-zc-col--r .mk-zc-f { --off: .055; transform: translateX(calc((1 - var(--k)) * 70px)) scale(calc(.94 + var(--k) * .06)); }
.mk-zc-fn { font-size: 11px; letter-spacing: .22em; color: #2f6fb8; font-weight: 600; }
.mk-zc-fv { font-size: clamp(20px, 1.9vw, 30px); line-height: 1.12; font-weight: 500; letter-spacing: -.01em; }
.mk-zc-fl { font-size: clamp(12px, .95vw, 15px); letter-spacing: .04em; color: rgba(13, 35, 64, .68); }
/* a thin line reaching from each card towards the loupe */
.mk-zc-fline { position: absolute; top: 50%; height: 1px; width: clamp(30px, 6vw, 110px); left: 100%;
  background: linear-gradient(90deg, rgba(47, 111, 184, .7), rgba(47, 111, 184, 0));
  transform-origin: left center; transform: scaleX(clamp(0, (var(--k) - .5) * 2, 1)); }
.mk-zc-fline::after { content: ""; position: absolute; right: -3px; top: -2.5px; width: 6px; height: 6px; border-radius: 50%; background: #2f6fb8; opacity: calc(var(--k) * .0); }
.mk-zc-col--r .mk-zc-fline { left: auto; right: 100%; transform-origin: right center; background: linear-gradient(270deg, rgba(47, 111, 184, .7), rgba(47, 111, 184, 0)); }
@media (max-width: 767px) {
  .mk-zc-feats { flex-direction: column; justify-content: space-between; align-items: stretch; padding: 76px 14px 28px; }
  .mk-zc-col { width: 100%; flex-direction: row; gap: 8px; }
  .mk-zc-col--r { align-items: stretch; text-align: left; }
  .mk-zc-f { flex: 1 1 0; padding: 10px 10px; border-radius: 12px; gap: 2px; transform: translateY(calc((1 - var(--k)) * -24px)); }
  .mk-zc-col--r .mk-zc-f { transform: translateY(calc((1 - var(--k)) * 24px)); }
  .mk-zc-fn { font-size: 9px; }
  .mk-zc-fv { font-size: 13px; }
  .mk-zc-fl { font-size: 10px; }
  .mk-zc-fline { display: none; }
}
@media (min-width: 768px) {
  .mk-zc-feats { align-items: flex-start; padding-top: max(96px, 13vh); }
  .mk-zc-col { width: clamp(240px, 23vw, 360px); }
}
@media (max-width: 767px) {
  /* the lower row keeps clear of the round buttons on the right edge */
  .mk-zc-col--r { padding-right: 80px; }
  .mk-zc-feats { padding-bottom: 22px; }
}

/* (2026-10-29, v2) the features take turns: left, right, left, right… spread over the approach, all six
   standing by the end. Each sits in a glowing frame: a gradient edge with a light running round it,
   corner marks, a numbered badge */
@property --zc-a { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.mk-zc-f {
  --ord: calc(var(--at) * 2);
  --k: clamp(0, (var(--zc-p) - .2 - var(--ord) * .1) * 9, 1);
  isolation: isolate;
  gap: 6px;
  padding: clamp(16px, 1.7vw, 24px) clamp(18px, 2vw, 28px) clamp(16px, 1.7vw, 22px);
  border: 0;
  border-radius: 20px;
  background:
    radial-gradient(120% 140% at 0% 0%, rgba(120, 180, 255, .22), transparent 55%),
    linear-gradient(150deg, rgba(255, 255, 255, .78), rgba(232, 242, 252, .5));
  box-shadow:
    0 24px 50px -24px rgba(16, 60, 130, .55),
    0 0 0 1px rgba(255, 255, 255, .55),
    0 0 calc(var(--k) * 34px) rgba(90, 160, 255, calc(var(--k) * .35)),
    inset 0 1px 0 rgba(255, 255, 255, .95);
}
.mk-zc-col--r .mk-zc-f { --off: 0; --ord: calc(var(--at) * 2 + 1); }
.mk-zc-col--r .mk-zc-f::before { --zc-a0: 180deg; }
/* the gradient edge, a light running round it */
.mk-zc-f::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.6px; z-index: -1;
  background: conic-gradient(from calc(var(--zc-a) + var(--zc-a0, 0deg)), rgba(23, 78, 166, .9), rgba(140, 200, 255, .9) 18%, #fff 25%, rgba(140, 200, 255, .9) 32%, rgba(23, 78, 166, .55) 50%, rgba(23, 78, 166, .9) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  animation: mk-zc-run 6s linear infinite;
}
@keyframes mk-zc-run { to { --zc-a: 360deg; } }
/* corner marks */
.mk-zc-f::after {
  content: ""; position: absolute; inset: -7px; border-radius: 26px; pointer-events: none; opacity: calc(var(--k) * .9);
  background:
    linear-gradient(#2f6fb8, #2f6fb8) top left / 16px 2px, linear-gradient(#2f6fb8, #2f6fb8) top left / 2px 16px,
    linear-gradient(#2f6fb8, #2f6fb8) bottom right / 16px 2px, linear-gradient(#2f6fb8, #2f6fb8) bottom right / 2px 16px;
  background-repeat: no-repeat;
}
.mk-zc-fn {
  align-self: flex-start; display: inline-grid; place-items: center; min-width: 30px; height: 22px; padding: 0 8px; border-radius: 11px;
  font-size: 11px; letter-spacing: .14em; color: #fff; font-weight: 600;
  background: linear-gradient(135deg, #174ea6, #3d8be0); box-shadow: 0 4px 12px -4px rgba(23, 78, 166, .7);
}
.mk-zc-col--r .mk-zc-fn { align-self: flex-end; }
.mk-zc-fv {
  font-weight: 600; font-size: clamp(21px, 2vw, 32px);
  background: linear-gradient(100deg, #0b1e3a 0%, #174ea6 60%, #3d8be0 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.mk-zc-fl { text-transform: uppercase; font-size: clamp(10.5px, .78vw, 12.5px); letter-spacing: .14em; color: rgba(13, 35, 64, .62); }
.mk-zc-fline { height: 1.5px; background: linear-gradient(90deg, rgba(61, 139, 224, .9), rgba(61, 139, 224, 0)); }
.mk-zc-col--r .mk-zc-fline { background: linear-gradient(270deg, rgba(61, 139, 224, .9), rgba(61, 139, 224, 0)); }
.mk-zc-fline::after { opacity: clamp(0, (var(--k) - .9) * 10, 1); background: #3d8be0; box-shadow: 0 0 10px #3d8be0; }
@media (max-width: 767px) {
  .mk-zc-f { padding: 10px 10px 9px; border-radius: 13px; gap: 3px; }
  .mk-zc-f::after { inset: -4px; border-radius: 16px; background-size: 10px 1.5px, 1.5px 10px, 10px 1.5px, 1.5px 10px; }
  .mk-zc-fn { min-width: 24px; height: 17px; font-size: 9px; padding: 0 6px; }
  .mk-zc-col--r .mk-zc-fn { align-self: flex-start; }
  .mk-zc-fv { font-size: 13px; }
  .mk-zc-fl { font-size: 8.5px; letter-spacing: .08em; }
}
@media (prefers-reduced-motion: reduce) { .mk-zc-f::before { animation: none; } }

/* (2026-10-29) Swarovski first screen: the loupe stands still (no floating up and down), with the
   starMed and Swarovski Optik / ZEISS logos above it */
main[data-scene="Trading"] .hero .mk-herodevice-float { animation: mk-herodevice-in 1.6s cubic-bezier(0.16, 1, 0.3, 1) 1.5s backwards !important; }
.mk-herologos {
  position: absolute; left: 50%; bottom: 96%; transform: translateX(-50%);
  display: flex; align-items: center; gap: clamp(16px, 2vw, 34px); white-space: nowrap;
  padding: clamp(10px, 1vw, 16px) clamp(18px, 1.8vw, 28px); border-radius: 999px;
  background: linear-gradient(150deg, rgba(255, 255, 255, .72), rgba(236, 244, 252, .45));
  border: 1px solid rgba(255, 255, 255, .85);
  box-shadow: 0 18px 40px -22px rgba(20, 50, 90, .5), inset 0 1px 0 #fff;
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
body.loaded .mk-herologos { animation: mk-herologos-in 1.2s cubic-bezier(0.16, 1, 0.3, 1) 2.1s backwards; }
.mk-herologos-img { display: block; width: auto; }
.mk-herologos-img1 { height: clamp(26px, 2.6vw, 44px); }
.mk-herologos-img2 { height: clamp(38px, 3.9vw, 64px); }
.mk-herologos-img1 + .mk-herologos-img2 { padding-left: clamp(16px, 2vw, 34px); border-left: 1px solid rgba(13, 35, 64, .18); }
@keyframes mk-herologos-in { from { opacity: 0; transform: translate(-50%, 14px); filter: blur(6px); } }
@media (max-width: 1023px) {
  .mk-herologos { bottom: 92%; gap: 12px; padding: 8px 14px; }
  .mk-herologos-img1 { height: 22px; }
  .mk-herologos-img2 { height: 32px; }
  .mk-herologos-img1 + .mk-herologos-img2 { padding-left: 12px; }
}
@media (prefers-reduced-motion: reduce) { body.loaded .mk-herologos { animation: none; } }
@media (max-width: 767px) {
  /* phones: the hero logo sits right above the loupe, so the logos go under it */
  .mk-herologos { bottom: auto; top: 88%; }
}

/* (2026-10-29, v2) the Swarovski Optik / ZEISS logo much larger, standing free under the loupe on a
   soft white glow; starMed stays small in its glass pill above the loupe */
.mk-herologos {
  inset: 0; left: 0; bottom: 0; top: 0; transform: none; padding: 0; border: 0; border-radius: 0;
  background: none; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; display: block; pointer-events: none;
}
body.loaded .mk-herologos { animation: none; }
.mk-herologos-img { position: absolute; left: 50%; }
.mk-herologos-img1 {
  bottom: 97%; height: clamp(44px, 4.2vw, 64px); box-sizing: border-box;
  padding: clamp(9px, .8vw, 13px) clamp(18px, 1.6vw, 26px); border-radius: 999px;
  background: linear-gradient(150deg, rgba(255, 255, 255, .78), rgba(236, 244, 252, .5));
  border: 1px solid rgba(255, 255, 255, .9);
  box-shadow: 0 16px 34px -20px rgba(20, 50, 90, .5), inset 0 1px 0 #fff;
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  transform: translateX(-50%);
}
.mk-herologos-img1 + .mk-herologos-img2 { padding-left: 0; border-left: 0; }
.mk-herologos-img2 {
  top: 99%; height: clamp(96px, 10.5vw, 168px); transform: translateX(-50%);
  filter: drop-shadow(0 0 18px rgba(255, 255, 255, .95)) drop-shadow(0 0 42px rgba(255, 255, 255, .8)) drop-shadow(0 14px 24px rgba(20, 50, 90, .18));
}
body.loaded .mk-herologos-img1 { animation: mk-herologos-in1 1.1s cubic-bezier(0.16, 1, 0.3, 1) 2s backwards; }
body.loaded .mk-herologos-img2 { animation: mk-herologos-in2 1.5s cubic-bezier(0.16, 1, 0.3, 1) 2.3s backwards; }
@keyframes mk-herologos-in1 { from { opacity: 0; transform: translate(-50%, 12px); filter: blur(6px); } }
@keyframes mk-herologos-in2 { from { opacity: 0; transform: translate(-50%, 26px) scale(.92); filter: blur(10px); } }
@media (max-width: 1023px) {
  .mk-herologos { top: 0; }
  .mk-herologos-img1 { height: 38px; padding: 8px 16px; }
  .mk-herologos-img2 { height: 84px; top: 94%; }
}
@media (max-width: 767px) {
  /* phones: the hero logo sits right above the loupe, so starMed rides on the loupe's top right */
  .mk-herologos-img1 { bottom: auto; top: 2%; left: auto; right: 4%; height: 32px; padding: 6px 12px; transform: none; }
  body.loaded .mk-herologos-img1 { animation-name: mk-herologos-in1m; }
  @keyframes mk-herologos-in1m { from { opacity: 0; transform: translateY(10px); } }
  .mk-herologos-img2 { height: 70px; top: 90%; }
}
@media (prefers-reduced-motion: reduce) { body.loaded .mk-herologos-img1, body.loaded .mk-herologos-img2 { animation: none; } }
@media (min-width: 1024px) {
  /* kept clear of the round buttons on the right edge */
  .mk-herologos-img2 { left: 38%; height: clamp(90px, 9.6vw, 150px); top: 98%; }
}

/* (2026-10-29) Swarovski hero: the logo on the left is now the Swarovski Optik / ZEISS one in its own
   colours, so it gets a soft white glow instead of the navy shade */
main[data-scene="Trading"] .hero .logo { filter: drop-shadow(0 0 14px rgba(255, 255, 255, .9)) drop-shadow(0 0 34px rgba(255, 255, 255, .7)); }

/* (2026-10-29, user's request) Swarovski: every scene dissolves into the next. No mist or colour wash:
   each section overlaps the one before and fades in over it through a mask, so the two pictures
   cross-dissolve (mountain > man > woman > loupe film > ice cave > ZEISS x SWAROVSKI) */
main[data-scene="Trading"] section.mk-lp {
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 22vh, #000 100%) !important;
  mask-image: linear-gradient(to bottom, transparent 0, #000 22vh, #000 100%) !important;
}
main[data-scene="Trading"] section.mk-lp + section.mk-rc {
  margin-top: -18vh;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, rgba(0, 0, 0, .35) 7vh, #000 18vh, #000 100%) !important;
  mask-image: linear-gradient(to bottom, transparent 0, rgba(0, 0, 0, .35) 7vh, #000 18vh, #000 100%) !important;
}
main[data-scene="Trading"] .mk-gapfilm.mk-gapfilm--full {
  position: relative;
  z-index: 3;
  margin-top: calc(var(--mk-gf-pull, 0px) - 20vh);
  -webkit-mask-image: linear-gradient(180deg, transparent 0, rgba(0, 0, 0, .35) 8vh, #000 20vh, #000 calc(100% - 32vh), rgba(0, 0, 0, .35) calc(100% - 12vh), transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0, rgba(0, 0, 0, .35) 8vh, #000 20vh, #000 calc(100% - 32vh), rgba(0, 0, 0, .35) calc(100% - 12vh), transparent 100%);
}
main[data-scene="Trading"] .mk-zc {
  z-index: 4;
  margin-top: -32vh;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, rgba(0, 0, 0, .35) 12vh, #000 32vh, #000 calc(100% - 40vh), rgba(0, 0, 0, .4) calc(100% - 16vh), transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0, rgba(0, 0, 0, .35) 12vh, #000 32vh, #000 calc(100% - 40vh), rgba(0, 0, 0, .4) calc(100% - 16vh), transparent 100%);
}
main[data-scene="Trading"] .mk-zc::before,
main[data-scene="Trading"] .mk-zc::after { content: none; }
main[data-scene="Trading"] .mk-zx { margin-top: -14vh; position: relative; z-index: 5; }
@media (max-width: 767px) {
  /* phones: the lockup does not slide over the cave's last screen (its cards would show through) */
  main[data-scene="Trading"] .mk-zx { margin-top: 0; }
}
/* (2026-10-29) the woman's section also melts away at its foot, under the start of the loupe film,
   so no straight line is left between the two */
main[data-scene="Trading"] section.mk-lp + section.mk-rc {
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, rgba(0, 0, 0, .35) 7vh, #000 18vh, #000 calc(100% - 30vh), rgba(0, 0, 0, .55) calc(100% - 16vh), rgba(0, 0, 0, .15) calc(100% - 6vh), transparent 100%) !important;
  mask-image: linear-gradient(to bottom, transparent 0, rgba(0, 0, 0, .35) 7vh, #000 18vh, #000 calc(100% - 30vh), rgba(0, 0, 0, .55) calc(100% - 16vh), rgba(0, 0, 0, .15) calc(100% - 6vh), transparent 100%) !important;
}
main[data-scene="Trading"] .mk-gapfilm.mk-gapfilm--full {
  margin-top: calc(var(--mk-gf-pull, 0px) - 30vh);
  -webkit-mask-image: linear-gradient(180deg, transparent 0, rgba(0, 0, 0, .2) 9vh, rgba(0, 0, 0, .6) 19vh, #000 30vh, #000 calc(100% - 32vh), rgba(0, 0, 0, .35) calc(100% - 12vh), transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0, rgba(0, 0, 0, .2) 9vh, rgba(0, 0, 0, .6) 19vh, #000 30vh, #000 calc(100% - 32vh), rgba(0, 0, 0, .35) calc(100% - 12vh), transparent 100%);
}

/* ======================================================================================
   Blog (/blog/, 2026-10-29): the "KernelCode" scroll piece made Medikallup's. A pinned stage
   plays four screens as the page scrolls (catalog.js initKcBlog > blog-kc.js): the sky with a
   voxel Medikallup M, then a sphere of particles, the Swarovski loupe drawn in particles, and the
   M again in particles above the five latest posts. Then the full list and the newsletter, in the
   same black, dot-matrix and hairline style.
   ====================================================================================== */
.mk-kc {
  --kc-pad: 22px;
  --kc-fs-hero: clamp(42px, 7.05vw, 112px);
  --kc-fs-h2: clamp(38px, 6.17vw, 104px);
  --kc-fs-note: clamp(12.5px, 1.04vw, 18px);
  --kc-fs-btn: clamp(12px, 1.13vw, 19px);
  --kc-ls: -.038em;
  --kc-btn-h: 47px;
  --kc-ease: cubic-bezier(.16, 1, .3, 1);
  --kc-hair: rgba(255, 255, 255, .17);
  --kc-dots: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='13' height='13'><rect width='10' height='10' fill='%23fff'/></svg>");
  position: relative;
  background: #000;
  color: #fff;
  font-family: "Schibsted Grotesk", -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  letter-spacing: -.02em;
  -webkit-font-smoothing: antialiased;
}
.mk-kc a { color: inherit; text-decoration: none; }
.mk-kc canvas { display: block; width: 100%; height: 100%; }

/* ---- the pinned stage ---- */
.kc-intro { position: relative; height: 440vh; }
.kc-stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; background: #000; }
.kc-particles { position: absolute; inset: 0; z-index: 1; opacity: 0; pointer-events: none; transition: opacity .5s linear; }
.kc-particles.is-on { opacity: 1; }
.kc-sec { position: absolute; inset: 0; overflow: hidden; opacity: 0; visibility: hidden; pointer-events: none; }
.kc-sec.is-show { opacity: 1; visibility: visible; pointer-events: auto; z-index: 2; transition: opacity .75s var(--kc-ease); }
.kc-sec.is-show.is-out-up, .kc-sec.is-show.is-out-down { opacity: 0; pointer-events: none; z-index: 3; transition: opacity .9s var(--kc-ease), transform .9s var(--kc-ease); }
.kc-sec.is-show.is-out-up { transform: translateY(-100%); }
.kc-sec.is-show.is-out-down { transform: translateY(100%); }

/* ---- first screen ---- */
.kc-hero { background: linear-gradient(to bottom, #1b2f5c 0, #2a4378 40%, #3c5a92 100%); }
.kc-hero-bg { position: absolute; left: 0; right: 0; top: 6%; height: 100%; z-index: 0; background-size: cover; background-position: center 30%; will-change: transform; filter: saturate(.86); }
.kc-hero-sky { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(to bottom, rgba(20, 60, 130, .42) 0 34%, rgba(20, 60, 130, 0) 46%); }
.kc-hero-nums { position: absolute; inset: 0; z-index: 2;
  -webkit-mask-image: linear-gradient(to bottom, #000 0 20%, rgba(0, 0, 0, .55) 36%, rgba(0, 0, 0, .14) 48%, transparent 58%);
  mask-image: linear-gradient(to bottom, #000 0 20%, rgba(0, 0, 0, .55) 36%, rgba(0, 0, 0, .14) 48%, transparent 58%); }
.kc-hero-shade { position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, .18) 62%, rgba(0, 0, 0, .45) 74%, rgba(0, 0, 0, .8) 84%, rgba(0, 0, 0, .92) 100%); }
.kc-hero-gl { position: absolute; inset: 0; z-index: 4; cursor: grab; }
.kc-hero-gl:active { cursor: grabbing; }
.kc-hero-copy { position: absolute; inset: 0; z-index: 5; pointer-events: none; }
.kc-h1 { position: absolute; left: var(--kc-pad); bottom: 4.4vh; margin: 0; max-width: calc(100vw - 2 * var(--kc-pad));
  font-size: var(--kc-fs-hero); font-weight: 400; letter-spacing: var(--kc-ls); line-height: 1.011; color: #fff; }
.kc-hero-aside { position: absolute; right: var(--kc-pad); bottom: 4.43vh; width: 22vw; min-width: 220px; max-width: calc(100vw - 2 * var(--kc-pad)); }
.kc-cats { margin: 0 0 clamp(13px, 2vh, 22px); font-size: var(--kc-fs-note); font-weight: 500; line-height: 1.45; letter-spacing: -.02em; }
.kc-cats span + span::before { content: " · "; color: rgba(255, 255, 255, .45); }

.kc-btnpair { display: flex; align-items: center; width: max-content; pointer-events: auto; }
.kc-arrowbtn { width: var(--kc-btn-h); height: var(--kc-btn-h); border-radius: 50%; background: #fff; color: #131313; display: grid; place-items: center; flex: 0 0 auto; position: relative; z-index: 2; transition: transform .45s var(--kc-ease); }
.kc-arrowbtn svg { width: 13px; height: 13px; }
.kc-pillbtn { height: var(--kc-btn-h); border-radius: 999px; background: #fff; color: #141414; display: flex; align-items: center; padding: 0 18px; margin-left: -7px; font-size: var(--kc-fs-btn); letter-spacing: -.035em; white-space: nowrap; }
.kc-btnpair:hover .kc-arrowbtn { transform: rotate(45deg); }

.kc-dotfill { background-image: var(--kc-dots); background-size: 6.5px 6.5px; background-repeat: repeat; -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-stroke: .4px rgba(255, 255, 255, .11); }

/* ---- the three particle screens ---- */
.kc-h2 { position: absolute; z-index: 6; margin: 0; font-size: var(--kc-fs-h2); font-weight: 400; letter-spacing: var(--kc-ls); line-height: 1.011; color: #fff; }
.kc-s2 .kc-h2 { left: 13.6vw; top: max(12.5vh, 128px); }
.kc-s3 .kc-h2 { right: 15.1vw; top: max(12.5vh, 128px); text-align: right; }
.kc-s4 .kc-h2 { left: var(--kc-pad); top: max(12.5vh, 128px); }
.kc-note { position: absolute; z-index: 6; font-size: var(--kc-fs-note); font-weight: 500; line-height: 1.35; letter-spacing: -.02em; color: rgba(255, 255, 255, .95); }
.kc-s2 .kc-note { right: var(--kc-pad); bottom: 3.71vh; width: 24vw; min-width: 220px; }
.kc-s3 .kc-note { left: var(--kc-pad); bottom: 3.71vh; width: 26vw; min-width: 240px; }
.kc-stats { display: flex; flex-wrap: wrap; gap: 6px 22px; margin: 0; }
.kc-stats span { white-space: nowrap; color: rgba(255, 255, 255, .7); }
.kc-stats b { font-weight: 600; color: #fff; font-size: 1.5em; letter-spacing: -.04em; margin-right: 4px; }
.kc-picks { display: flex; flex-direction: column; }
.kc-note-pill { font-size: .78em; letter-spacing: .02em; color: rgba(255, 255, 255, .5); margin-bottom: 10px; }
.kc-picks a { display: flex; gap: 14px; align-items: baseline; padding: 11px 0; border-top: 1px solid var(--kc-hair); pointer-events: auto; transition: color .3s; }
.kc-picks a em { font-style: normal; color: rgba(255, 255, 255, .4); font-size: .82em; }
.kc-picks a:hover { color: #9cc3ff; }

.kc-steps { position: absolute; left: 0; right: 0; bottom: 2.8vh; z-index: 7; padding: 0 var(--kc-pad); display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border-top: 1px solid var(--kc-hair); }
.kc-step { position: relative; overflow: hidden; isolation: isolate; padding: 17px 15px 33px; height: clamp(176px, 25vh, 260px); min-width: 0; display: flex; flex-direction: column; }
.kc-step:nth-child(n + 6) { display: none; }
.kc-step + .kc-step { border-left: 1px solid var(--kc-hair); }
.kc-step::before { content: ""; position: absolute; inset: 0; background: #fff; z-index: -1; transform: translateY(101%); transition: transform .55s var(--kc-ease); }
.kc-step::after { content: ""; position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: #fff; transform-origin: left; transform: scaleX(0); }
.kc-step.is-act::after { animation: kc-stepfill var(--kc-dwell, 4200ms) linear forwards; }
@keyframes kc-stepfill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.kc-step * { transition: color .4s var(--kc-ease); }
.kc-st-n { align-self: flex-end; font-size: clamp(10px, .9vw, 15px); font-weight: 500; color: rgba(255, 255, 255, .4); }
.kc-st-n b { font-weight: 500; color: #fff; }
.kc-st-t { margin-top: auto; font-size: clamp(15px, 1.3vw, 22px); font-weight: 700; letter-spacing: -.035em; line-height: 1.15; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.kc-st-b { margin-top: 12px; font-size: clamp(10px, .86vw, 14px); font-weight: 500; line-height: 1.35; color: rgba(255, 255, 255, .85); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.kc-st-m { margin-top: 10px; font-size: clamp(10px, .78vw, 13px); color: rgba(255, 255, 255, .45); }
@media (hover: hover) and (pointer: fine) {
  .kc-step:hover::before { transform: translateY(0); }
  .kc-step:hover .kc-st-t, .kc-step:hover .kc-st-b { color: #000; }
  .kc-step:hover .kc-st-n, .kc-step:hover .kc-st-m { color: rgba(0, 0, 0, .45); }
  .kc-step:hover .kc-st-n b { color: #000; }
}

/* ---- rail and scroll hint ---- */
.kc-rail { position: absolute; right: 25px; top: 50%; transform: translateY(-50%); width: 2px; height: 158px; z-index: 9; opacity: 0; transition: opacity .4s;
  background: repeating-linear-gradient(180deg, rgba(255, 255, 255, .26) 0 32px, transparent 32px 42px); }
.kc-rail.is-on { opacity: 1; }
.kc-rail-fill { position: absolute; left: 0; top: 0; width: 2px; height: 0; transition: height .22s linear;
  background: repeating-linear-gradient(180deg, #fff 0 32px, transparent 32px 42px); }
.kc-hint { position: absolute; left: 50%; bottom: 22px; z-index: 9; transform: translateX(-50%); font-size: 11.5px; font-weight: 600; letter-spacing: .02em; color: rgba(255, 255, 255, .75); opacity: 0; transition: opacity .4s; pointer-events: none; }
.kc-hint.is-on { opacity: 1; }

/* ---- word reveal ---- */
.kc-rv { display: inline-block; white-space: nowrap; }
.kc-rv > span { display: inline-block; opacity: 0; filter: blur(13px); transform: translateY(.12em); transition: opacity .85s var(--kc-ease), filter .85s var(--kc-ease), transform .85s var(--kc-ease); }
.kc-rv.is-in > span { opacity: 1; filter: blur(0); transform: none; }
.kc-fade { opacity: 0; transform: translateY(14px); transition: opacity .9s var(--kc-ease), transform .9s var(--kc-ease); }
.kc-fade.is-in { opacity: 1; transform: none; }

/* ---- the full list ---- */
.kc-list { position: relative; padding: clamp(90px, 12vh, 150px) var(--kc-pad) clamp(60px, 9vh, 110px); border-top: 1px solid var(--kc-hair); }
.kc-label { display: block; font-size: var(--kc-fs-note); color: rgba(255, 255, 255, .5); margin-bottom: 18px; }
.kc-h2--flow { position: static; font-size: var(--kc-fs-h2); }
.kc-list-head { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 24px 40px; margin-bottom: clamp(36px, 5vh, 60px); }
.kc-list-head .kc-label { grid-column: 1 / -1; margin-bottom: 0; }
.kc-filters { display: flex; flex-wrap: wrap; gap: 0; height: auto; border-radius: 22px; overflow: hidden; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .09); }
.kc-filter { appearance: none; border: 0; background: none; color: rgba(255, 255, 255, .8); font: inherit; font-size: clamp(12px, 1vw, 16px); letter-spacing: -.03em; padding: 12px 16px; cursor: pointer; transition: background .3s, color .3s; }
.kc-filter + .kc-filter { border-left: 1px solid rgba(255, 255, 255, .13); }
.kc-filter:hover { color: #fff; }
.kc-filter.is-on { background: #fff; color: #111; }
.kc-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--kc-hair); border-left: 1px solid var(--kc-hair); }
.kc-post { position: relative; display: flex; flex-direction: column; border-right: 1px solid var(--kc-hair); border-bottom: 1px solid var(--kc-hair); isolation: isolate; overflow: hidden; }
.kc-post[hidden] { display: none; }
.kc-post::before { content: ""; position: absolute; inset: 0; background: #fff; z-index: -1; transform: translateY(101%); transition: transform .55s var(--kc-ease); }
.kc-post-media { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: #0d0d0d; }
.kc-post-media img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.05) brightness(.85); transition: filter .6s var(--kc-ease), transform .9s var(--kc-ease); }
.kc-post-body { display: flex; flex-direction: column; gap: 10px; padding: 18px 18px 26px; }
.kc-post-n { font-size: clamp(10px, .9vw, 14px); color: rgba(255, 255, 255, .45); }
.kc-post-n b { font-weight: 500; color: #fff; }
.kc-post-title { font-size: clamp(18px, 1.6vw, 26px); font-weight: 700; letter-spacing: -.04em; line-height: 1.12; }
.kc-post-ex { font-size: clamp(12px, .95vw, 15px); font-weight: 500; line-height: 1.38; color: rgba(255, 255, 255, .78); }
.kc-post-meta { font-size: clamp(11px, .85vw, 13px); color: rgba(255, 255, 255, .45); }
.kc-post-go { position: absolute; top: 14px; right: 14px; width: 40px; height: 40px; border-radius: 50%; background: #fff; color: #111; display: grid; place-items: center; transition: transform .45s var(--kc-ease); }
.kc-post-go svg { width: 12px; height: 12px; }
.kc-post * { transition: color .4s var(--kc-ease); }
@media (hover: hover) and (pointer: fine) {
  .kc-post:hover::before { transform: translateY(0); }
  .kc-post:hover .kc-post-media img { filter: none; transform: scale(1.04); }
  .kc-post:hover .kc-post-title, .kc-post:hover .kc-post-ex { color: #000; }
  .kc-post:hover .kc-post-n, .kc-post:hover .kc-post-meta { color: rgba(0, 0, 0, .45); }
  .kc-post:hover .kc-post-n b { color: #000; }
  .kc-post:hover .kc-post-go { transform: rotate(45deg); background: #111; color: #fff; }
}
.kc-empty { margin: 40px 0 0; color: rgba(255, 255, 255, .6); }

/* ---- newsletter ---- */
.kc-cta { padding: clamp(80px, 12vh, 150px) var(--kc-pad); border-top: 1px solid var(--kc-hair); }
.kc-cta-in { max-width: 1100px; }
.kc-note-flow { max-width: 520px; margin: 22px 0 30px; font-size: var(--kc-fs-note); line-height: 1.38; color: rgba(255, 255, 255, .8); }
.kc-cta-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 22px; }
.kc-ghost { font-size: var(--kc-fs-btn); color: #fff; border-bottom: 1px solid rgba(255, 255, 255, .4); padding-bottom: 3px; transition: border-color .3s; }
.kc-ghost:hover { border-color: #fff; }

/* ---- narrow screens ---- */
@media (max-width: 1040px) {
  .mk-kc { --kc-pad: 16px; --kc-btn-h: 40px; }
  .kc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kc-list-head { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  .kc-s2, .kc-s3, .kc-s4 { display: flex; flex-direction: column; padding: 110px 0 max(14px, env(safe-area-inset-bottom, 0px)); gap: 14px; }
  .kc-s2, .kc-s3 { padding-left: var(--kc-pad); padding-right: var(--kc-pad); }
  .kc-s2 .kc-h2, .kc-s3 .kc-h2, .kc-s4 .kc-h2, .kc-s2 .kc-note, .kc-s3 .kc-note { position: relative; inset: auto; width: auto; min-width: 0; max-width: 100%; }
  .kc-s4 .kc-h2 { margin: 0 var(--kc-pad); }
  .kc-s2 .kc-note, .kc-s3 .kc-note { margin-top: auto; }
  .kc-steps { position: relative; inset: auto; margin-top: auto; display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .kc-steps::-webkit-scrollbar { display: none; }
  .kc-step { flex: 0 0 min(80vw, 320px); height: auto; min-height: 190px; scroll-snap-align: start; }
  .kc-rail { right: 8px; height: 120px; }
}
@media (max-width: 800px) {
  .kc-hero-copy { display: flex; flex-direction: column; justify-content: flex-end; padding: 0 var(--kc-pad) max(18px, env(safe-area-inset-bottom, 0px)); gap: 12px; }
  .kc-h1, .kc-hero-aside { position: relative; inset: auto; width: auto; min-width: 0; max-width: none; }
}
@media (max-width: 720px) {
  .mk-kc { --kc-fs-hero: clamp(30px, 9.6vw, 56px); --kc-fs-h2: clamp(28px, 8.6vw, 48px); --kc-fs-note: 13.5px; --kc-fs-btn: 13px; }
  .kc-grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .kc-rv > span, .kc-fade { transition: none; }
}
/* the site gives every section a top padding; the blog's own sections set their own */
.mk-kc section.kc-intro { padding: 0 !important; }
.mk-kc section.kc-sec { padding: 0; }
.mk-kc section.kc-list { padding: clamp(90px, 12vh, 150px) var(--kc-pad) clamp(60px, 9vh, 110px); }
.mk-kc section.kc-cta { padding: clamp(80px, 12vh, 150px) var(--kc-pad); }
/* clear of the site's menu bar above and its round buttons on the right */
.kc-s2 .kc-h2, .kc-s3 .kc-h2, .kc-s4 .kc-h2 { top: max(14vh, 178px); }
@media (min-width: 901px) {
  .kc-hero-aside { right: 130px; }
  .kc-s2 .kc-note { right: 130px; }
  .kc-steps { padding-right: 120px; }
  .kc-s3 .kc-h2 { right: max(15.1vw, 140px); }
}
@media (max-width: 900px) {
  .mk-kc section.kc-s2, .mk-kc section.kc-s3, .mk-kc section.kc-s4 { padding: 150px 0 max(14px, env(safe-area-inset-bottom, 0px)); }
  .mk-kc section.kc-s2, .mk-kc section.kc-s3 { padding-left: var(--kc-pad); padding-right: 70px; }
  .kc-s2 .kc-h2, .kc-s3 .kc-h2, .kc-s4 .kc-h2 { top: auto; }
  .kc-steps { padding-right: 70px; }
}
@media (max-width: 800px) { .kc-hint { display: none; } }
/* (2026-10-29) the first screen on black like the others: no picture behind, only the numbers and the M */
.kc-hero { background: #000; }
.kc-hero-nums {
  -webkit-mask-image: radial-gradient(120% 90% at 50% 30%, #000 0 30%, rgba(0, 0, 0, .5) 55%, transparent 80%);
  mask-image: radial-gradient(120% 90% at 50% 30%, #000 0 30%, rgba(0, 0, 0, .5) 55%, transparent 80%);
  opacity: .55;
}
/* as many equal columns as there are posts (up to five) */
@media (min-width: 901px) {
  .kc-steps { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
}

/* (2026-10-29) the blog's footer in the scroll piece's style: black, hairline grid, white type, the
   contact cards filling white on hover like the post cards, and the name in dot-matrix letters */
main.mk-kc ~ #footer {
  position: relative;
  background: #000;
  color: #fff;
  font-family: "Schibsted Grotesk", -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  letter-spacing: -.02em;
  border-top: 1px solid rgba(255, 255, 255, .17);
  overflow: hidden;
}
main.mk-kc ~ #footer .mk-foot { gap: 0; border-top: 1px solid rgba(255, 255, 255, .17); border-left: 1px solid rgba(255, 255, 255, .17); }
main.mk-kc ~ #footer .mk-foot-item {
  position: relative; isolation: isolate; overflow: hidden;
  padding: 22px 20px 28px; border-right: 1px solid rgba(255, 255, 255, .17); border-bottom: 1px solid rgba(255, 255, 255, .17);
}
main.mk-kc ~ #footer .mk-foot-item::before {
  content: ""; position: absolute; inset: 0; z-index: -1; background: #fff;
  transform: translateY(101%); transition: transform .55s cubic-bezier(.16, 1, .3, 1);
}
main.mk-kc ~ #footer .mk-foot-title { font-family: inherit; font-weight: 700; letter-spacing: -.03em; text-transform: none; color: #fff; transition: color .4s; }
main.mk-kc ~ #footer .mk-foot-lines, main.mk-kc ~ #footer .mk-foot-lines a { font-family: inherit; letter-spacing: -.01em; color: rgba(255, 255, 255, .72); transition: color .4s; }
main.mk-kc ~ #footer .mk-foot-icon { color: #fff; border-color: rgba(255, 255, 255, .35); transition: color .4s, border-color .4s; }
main.mk-kc ~ #footer .mk-foot-icon::after { border-color: rgba(255, 255, 255, .2); }
@media (hover: hover) and (pointer: fine) {
  main.mk-kc ~ #footer .mk-foot-item:hover::before { transform: translateY(0); }
  main.mk-kc ~ #footer .mk-foot-item:hover .mk-foot-title,
  main.mk-kc ~ #footer .mk-foot-item:hover .mk-foot-lines,
  main.mk-kc ~ #footer .mk-foot-item:hover .mk-foot-lines a { color: #000; }
  main.mk-kc ~ #footer .mk-foot-item:hover .mk-foot-icon { color: #000; border-color: rgba(0, 0, 0, .35); }
}
main.mk-kc ~ #footer .line { background: rgba(255, 255, 255, .17); }
main.mk-kc ~ #footer .mk-foot-legal, main.mk-kc ~ #footer .mk-foot-legal a { font-family: inherit; letter-spacing: -.01em; color: rgba(255, 255, 255, .5); }
main.mk-kc ~ #footer .mk-foot-legal a:hover { color: #fff; }
/* the name across the foot of the page in the dot-matrix letters of the blog's headings */
main.mk-kc ~ #footer::after {
  content: "MEDIKALLUP";
  display: block;
  padding: 0 22px;
  margin: clamp(30px, 5vh, 60px) 0 -0.16em;
  font-size: clamp(64px, 16.4vw, 290px);
  font-weight: 500;
  line-height: .9;
  letter-spacing: -.045em;
  white-space: nowrap;
  text-align: center;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='13' height='13'><rect width='10' height='10' fill='%23fff'/></svg>");
  background-size: 6.5px 6.5px;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  opacity: .9;
  -webkit-mask-image: linear-gradient(to bottom, #000 40%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 40%, transparent 100%);
}
main.mk-kc ~ #footer::after { font-size: calc((100vw - 44px) * .155); }
@media (hover: hover) and (pointer: fine) {
  main.mk-kc ~ #footer .mk-foot-item:hover .mk-foot-icon { background: #000; color: #fff; border-color: #000; }
}

/* ======================================================================================
   Blog article (/blog/<slug>/, 2026-10-29) in the scroll piece's style: black, the numbers
   field, the article's picture drawn in particles beside the title (blog-kc.js mountPost),
   hairline table of contents, numbered sections and lists, dot-matrix headings.
   ====================================================================================== */
.mk-kc--post section { padding: 0; }
.kp-progress { position: fixed; left: 0; right: 0; top: 0; height: 2px; z-index: 30; pointer-events: none; }
.kp-progress i { display: block; height: 100%; width: 100%; background: #fff; transform-origin: left; transform: scaleX(var(--kp-p, 0)); }
.mk-kc section.kp-hero { position: relative; min-height: 100vh; min-height: 100svh; overflow: hidden; padding: 0; }
.kp-nums { position: absolute; inset: 0; opacity: .35;
  -webkit-mask-image: radial-gradient(110% 80% at 70% 35%, #000 0 25%, rgba(0, 0, 0, .4) 55%, transparent 80%);
  mask-image: radial-gradient(110% 80% at 70% 35%, #000 0 25%, rgba(0, 0, 0, .4) 55%, transparent 80%); }
.kp-cloud { position: absolute; top: 0; right: 0; width: 60%; height: 100%; opacity: 0; transition: opacity 1.2s ease; }
.kp-cloud.is-on { opacity: 1; }
.kp-hero-in { position: relative; z-index: 2; min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; padding: 170px var(--kc-pad) 5vh; }
.kp-back { display: inline-flex; align-items: center; gap: 10px; width: max-content; font-size: var(--kc-fs-note); color: rgba(255, 255, 255, .75); margin-bottom: 26px; transition: color .3s; }
.kp-back:hover { color: #fff; }
.kp-back-i { width: 34px; height: 34px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .3); display: grid; place-items: center; transition: transform .45s var(--kc-ease), background .3s, color .3s; }
.kp-back-i svg { width: 13px; height: 13px; }
.kp-back:hover .kp-back-i { background: #fff; color: #000; transform: translateX(-4px); }
.kp-h1 { margin: 6px 0 0; max-width: min(16ch, 70vw); font-size: clamp(40px, 6.2vw, 104px); font-weight: 400; letter-spacing: var(--kc-ls); line-height: 1.02; color: #fff; }
.kp-h1 .kp-w { display: inline-block; opacity: 0; filter: blur(13px); transform: translateY(.12em); transition: opacity .85s var(--kc-ease), filter .85s var(--kc-ease), transform .85s var(--kc-ease); }
.kp-h1.is-in .kp-w { opacity: 1; filter: blur(0); transform: none; }
.kp-h1 .kp-w.kc-dotfill { -webkit-text-stroke: .4px rgba(255, 255, 255, .11); }
.kp-hero-foot { margin-top: auto; display: flex; justify-content: space-between; align-items: flex-end; gap: 30px 60px; flex-wrap: wrap; padding-right: 110px; }
.kp-lead { max-width: 36rem; margin: 0; font-size: clamp(15px, 1.35vw, 22px); line-height: 1.38; color: rgba(255, 255, 255, .9); }
.kp-meta { display: flex; align-items: center; gap: 14px; font-size: var(--kc-fs-note); line-height: 1.35; color: rgba(255, 255, 255, .55); }
.kp-meta b { color: #fff; font-weight: 600; }
.kp-av { width: 44px; height: 44px; border-radius: 50%; background: #fff; color: #000; display: grid; place-items: center; font-weight: 700; }
.kp-scroll { position: absolute; left: 50%; bottom: 22px; z-index: 2; width: 1px; height: 46px; background: linear-gradient(rgba(255, 255, 255, 0), #fff); animation: kp-drop 2.2s ease-in-out infinite; }
@keyframes kp-drop { 0% { transform: scaleY(0); transform-origin: top; } 50% { transform: scaleY(1); transform-origin: top; } 51% { transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }

/* pictures: grey until they come close, then in colour */
.kp-fig { margin: 0; }
.kp-fig-frame { display: block; overflow: hidden; background: #0d0d0d; border: 1px solid var(--kc-hair); }
.kp-fig img { display: block; width: 100%; height: auto; filter: grayscale(1) contrast(1.05) brightness(.9); transform: scale(1.04); transition: filter 1.2s var(--kc-ease), transform 1.6s var(--kc-ease); }
.kp-fig.is-in img { filter: none; transform: none; }
.kp-fig figcaption { margin-top: 12px; font-size: clamp(11px, .85vw, 13px); color: rgba(255, 255, 255, .5); }
.kp-fig--hero { margin: 0 var(--kc-pad); }
.kp-fig--hero .kp-fig-frame { aspect-ratio: 21 / 9; background: #fff; }
.kp-fig--hero img { height: 100%; object-fit: contain; }

/* body: contents on the left, the article on the right */
.mk-kc section.kp-body { display: grid; grid-template-columns: minmax(220px, 300px) minmax(0, 760px); justify-content: space-between; gap: 60px; padding: clamp(70px, 10vh, 130px) max(var(--kc-pad), 120px) clamp(60px, 9vh, 110px) var(--kc-pad); }
.kp-sticky { position: sticky; top: 130px; }
.kp-side-t { margin: 0 0 12px; font-size: 12px; letter-spacing: .02em; color: rgba(255, 255, 255, .45); }
.kp-toc { list-style: none; margin: 0 0 36px; padding: 0; border-top: 1px solid var(--kc-hair); }
.kp-toc a { position: relative; display: flex; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--kc-hair); font-size: 14px; line-height: 1.3; color: rgba(255, 255, 255, .6); transition: color .3s, padding .4s var(--kc-ease); }
.kp-toc a em { font-style: normal; color: rgba(255, 255, 255, .35); font-size: 12px; padding-top: 1px; }
.kp-toc a::after { content: ""; position: absolute; left: 0; bottom: -1px; height: 2px; width: 100%; background: #fff; transform: scaleX(0); transform-origin: left; transition: transform .5s var(--kc-ease); }
.kp-toc a:hover, .kp-toc a.is-on { color: #fff; }
.kp-toc a.is-on { padding-left: 8px; }
.kp-toc a.is-on::after { transform: scaleX(1); }
.kp-share { display: flex; gap: 8px; }
.kp-sh { width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .3); background: none; color: #fff; display: grid; place-items: center; cursor: pointer; transition: background .3s, color .3s; }
.kp-sh:hover, .kp-sh.is-done { background: #fff; color: #000; }

.kp-article { font-size: clamp(16px, 1.2vw, 19px); line-height: 1.68; color: rgba(255, 255, 255, .82); }
.kp-article p { margin: 0 0 1.1em; }
.kp-intro { font-size: clamp(19px, 1.6vw, 25px); line-height: 1.5; color: #fff; letter-spacing: -.02em; margin-bottom: 2.2em !important; }
.kp-sec { scroll-margin-top: 120px; padding-top: 1.6em; }
.kp-h2 { margin: 0 0 .7em; padding-top: 1em; border-top: 1px solid var(--kc-hair); font-size: clamp(26px, 2.5vw, 40px); font-weight: 500; letter-spacing: -.035em; line-height: 1.12; color: #fff; }
.kp-num { display: block; margin-bottom: 14px; font-size: 13px; font-weight: 500; letter-spacing: -.01em; color: rgba(255, 255, 255, .4); }
.kp-num b { color: #fff; font-weight: 500; }
.kp-list { list-style: none; margin: .4em 0 1.6em; padding: 0; border-top: 1px solid var(--kc-hair); }
.kp-list li { display: flex; gap: 18px; padding: 14px 0; border-bottom: 1px solid var(--kc-hair); line-height: 1.5; }
.kp-list li em { flex: none; font-style: normal; font-size: 12px; color: rgba(255, 255, 255, .4); padding-top: 4px; }
.kp-article .kp-fig { margin: 1.6em 0 2em; }
.kp-product { display: grid; grid-template-columns: 200px 1fr; margin: 3em 0 1.6em; border: 1px solid var(--kc-hair); isolation: isolate; position: relative; overflow: hidden; }
.kp-product-media { background: #fff; display: grid; place-items: center; padding: 16px; }
.kp-product-media img { width: 100%; height: 140px; object-fit: contain; }
.kp-product-body { display: flex; flex-direction: column; gap: 10px; justify-content: center; padding: 22px 26px; }
.kp-product-body .kc-label { margin: 0; font-size: 12px; }
.kp-product-body b { font-size: clamp(20px, 1.8vw, 28px); font-weight: 600; letter-spacing: -.035em; color: #fff; line-height: 1.15; }
.kp-product-body .kc-btnpair { margin-top: 6px; }
.kp-product:hover .kc-arrowbtn { transform: rotate(45deg); }
.kp-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.kp-tags span { padding: 7px 14px; border: 1px solid rgba(255, 255, 255, .25); border-radius: 999px; font-size: 13px; color: rgba(255, 255, 255, .75); }

/* things coming in as they scroll into view */
.kp-in { opacity: 0; transform: translateY(18px); transition: opacity .9s var(--kc-ease), transform .9s var(--kc-ease); }
.kp-in.is-in { opacity: 1; transform: none; }
.kp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

@media (max-width: 1040px) {
  .mk-kc section.kp-body { grid-template-columns: 1fr; padding-right: var(--kc-pad); gap: 30px; }
  .kp-side { display: none; }
  .kp-cloud { width: 100%; opacity: 0; }
  .kp-cloud.is-on { opacity: .45; }
  .kp-hero-foot { padding-right: 70px; }
}
@media (max-width: 720px) {
  .kp-hero-in { padding-top: 140px; }
  .kp-h1 { max-width: none; }
  .kp-fig--hero .kp-fig-frame { aspect-ratio: 4 / 3; }
  .kp-product { grid-template-columns: 1fr; }
  .kp-grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .kp-in, .kp-h1 .kp-w { opacity: 1; transform: none; filter: none; transition: none; }
  .kp-scroll { animation: none; }
}
.kp-h1 { max-width: min(13ch, 52vw); font-size: clamp(40px, 5.6vw, 94px); }
@media (max-width: 720px) { .kp-h1 { max-width: none; } }
@media (max-width: 1040px) { .kp-cloud.is-on { opacity: .75; } }

/* (2026-10-29) the article's pictures cut out of their ground and standing free on the black:
   built up from the bottom behind a scanning line as they arrive, then floating, leaning towards
   the pointer (blog-kc.js), a light passing over them now and then, a soft reflection under them */
.kp-cutfig { margin: 1.6em 0 2.4em; perspective: 1400px; }
.kp-cutfig--hero { margin: 0 var(--kc-pad); padding: 2vh 0 0; }
.kp-cut-stage { position: relative; display: block; padding: 4% 6% 0; --rx: 0deg; --ry: 0deg; }
.kp-cut-glow { position: absolute; left: 12%; right: 12%; top: 18%; bottom: 0; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(120, 160, 255, .22), rgba(120, 160, 255, .06) 60%, transparent); filter: blur(10px); opacity: 0; transition: opacity 1.6s ease .6s; }
.kp-cut-obj { position: relative; display: block; width: fit-content; max-width: 100%; margin: 0 auto;
  transform: rotateX(var(--rx)) rotateY(var(--ry)); transform-style: preserve-3d; transition: transform .9s cubic-bezier(.16, 1, .3, 1); }
.kp-cut-img { display: block; max-width: 100%; max-height: 72vh; width: auto; height: auto; margin: 0 auto;
  filter: drop-shadow(0 30px 40px rgba(0, 0, 0, .65)) blur(14px) brightness(1.6);
  clip-path: inset(100% 0 0 0);
  -webkit-box-reflect: below 6px linear-gradient(transparent 72%, rgba(255, 255, 255, .16));
  transition: clip-path 1.6s cubic-bezier(.65, 0, .35, 1), filter 1.4s cubic-bezier(.16, 1, .3, 1) .5s; }
.kp-cutfig--hero .kp-cut-img { max-height: 78vh; }
.kp-cut-shine { position: absolute; inset: 0; pointer-events: none;
  -webkit-mask: var(--kp-src) center / contain no-repeat; mask: var(--kp-src) center / contain no-repeat;
  background: linear-gradient(105deg, transparent 0 40%, rgba(255, 255, 255, .55) 50%, transparent 60% 100%) no-repeat; background-size: 250% 100%; background-position: 130% 0; }
.kp-cut-scan { position: absolute; left: 4%; right: 4%; bottom: 0; height: 2px; pointer-events: none; opacity: 0;
  background: linear-gradient(90deg, transparent, #fff 20%, #fff 80%, transparent); box-shadow: 0 0 18px 3px rgba(150, 190, 255, .7); }
.kp-cutfig figcaption { margin-top: 18px; text-align: center; font-size: clamp(11px, .85vw, 13px); color: rgba(255, 255, 255, .5); }

.kp-cutfig.is-in .kp-cut-img { clip-path: inset(0 0 0 0); filter: drop-shadow(0 30px 40px rgba(0, 0, 0, .65)) blur(0) brightness(1); }
.kp-cutfig.is-in .kp-cut-glow { opacity: 1; }
.kp-cutfig.is-in .kp-cut-scan { animation: kp-scan 1.6s cubic-bezier(.65, 0, .35, 1) forwards; }
.kp-cutfig.is-in .kp-cut-obj { animation: kp-float 7s ease-in-out 1.8s infinite; }
.kp-cutfig.is-in .kp-cut-shine { animation: kp-shine 1.6s ease-in-out 1.7s, kp-shine 1.6s ease-in-out 7s infinite; }
@keyframes kp-scan { 0% { bottom: 0; opacity: 1; } 92% { opacity: 1; } 100% { bottom: 100%; opacity: 0; } }
@keyframes kp-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -10px; } }
@keyframes kp-shine { from { background-position: 130% 0; } to { background-position: -30% 0; } }
.kp-cutfig.is-in .kp-cut-scan { transform-origin: center; }
/* the product card's picture free on black too */
.kp-product-media.is-cut { background: radial-gradient(closest-side, rgba(120, 160, 255, .16), transparent); }
.kp-product-media.is-cut img { filter: drop-shadow(0 14px 20px rgba(0, 0, 0, .6)); transition: transform .9s cubic-bezier(.16, 1, .3, 1); }
.kp-product:hover .kp-product-media.is-cut img { transform: translateY(-6px) scale(1.04); }
@media (prefers-reduced-motion: reduce) {
  .kp-cut-img { clip-path: none; filter: none; transition: none; }
  .kp-cutfig.is-in .kp-cut-obj, .kp-cutfig.is-in .kp-cut-shine, .kp-cutfig.is-in .kp-cut-scan { animation: none; }
}

/* (2026-10-29) the blog's pages are black: white menu labels, a dark glass bar when scrolled */
html.mk-main-kc.mk-main-kc body #header:not(.mk-over-foot):not(.menu-open) .nav-link,
html.mk-main-kc.mk-main-kc body #header:not(.mk-over-foot):not(.menu-open) .nav-link span,
html.mk-main-kc.mk-main-kc body #header:not(.mk-over-foot):not(.menu-open) .news-w p,
html.mk-main-kc.mk-main-kc body #header:not(.mk-over-foot):not(.menu-open) .menu-cta p,
html.mk-main-kc.mk-main-kc body #header:not(.mk-over-foot):not(.menu-open) .menu-cta span {
  color: #fff !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .7), 0 0 14px rgba(0, 0, 0, .6) !important;
}
html.mk-main-kc.mk-main-kc body #header:not(.mk-over-foot):not(.menu-open) .navbar,
html.mk-main-kc.mk-main-kc body #header:not(.mk-over-foot):not(.menu-open) .dots-w .dot {
  background: #fff !important;
}
html.mk-main-kc.mk-main-kc body #header:not(.mk-over-foot):not(.menu-open).top nav::before {
  background: rgba(10, 10, 12, .72);
  -webkit-backdrop-filter: blur(12px) saturate(1.2);
  backdrop-filter: blur(12px) saturate(1.2);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .35), inset 0 0 0 1px rgba(255, 255, 255, .1);
}
/* desktop only: on phones the header shows one page name at a time and the others must stay hidden */
@media (min-width: 64em) { html.mk-main-kc.mk-main-kc body #header:not(.menu-open) .nav-link { opacity: 1 !important; } }
/* the numbers field fades out under the menu so its labels stay clear */
.kc-hero::after, .mk-kc section.kp-hero::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 230px; z-index: 3; pointer-events: none;
  background: linear-gradient(#000 0, #000 35%, rgba(0, 0, 0, .7) 60%, transparent);
}

/* (2026-10-29) Swarovski first screen: the home page's scroll cue (mouse, chevrons, label, running
   line) instead of the engine's corner text, saying "Loupeleri keşfetmek için / Aşağı kaydırın" */
main[data-scene="Trading"] .hero .scroll-to-cta { display: none !important; }
main[data-scene="Trading"] .hero .mk-sw-cue { --cue-ink: #0c2a4d; }

/* (2026-10-29) Swarovski, after the ice cave: the woman with the loupe, cut out of her film's black
   ground, turns round as the page scrolls (catalog.js initWomanTurn): her back at first, slowly
   turning, at the end facing the camera. She comes up through the cave's last white and her stage
   melts into the page above and below */
main[data-scene="Trading"] .mk-wt {
  grid-column: 1 / -1;
  position: relative;
  z-index: 5;
  width: 100vw;
  max-width: none;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  margin-top: -30vh;
  height: 300vh;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, rgba(0, 0, 0, .4) 12vh, #000 30vh, #000 calc(100% - 26vh), transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0, rgba(0, 0, 0, .4) 12vh, #000 30vh, #000 calc(100% - 26vh), transparent 100%);
}
.mk-wt-stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden;
  background: radial-gradient(70% 60% at 50% 55%, #f4f7fb 0, #eef2f6 55%, rgba(238, 242, 246, 0) 100%); }
.mk-wt-glow { position: absolute; left: 50%; top: 52%; width: min(70vh, 80vw); height: min(70vh, 80vw); transform: translate(-50%, -50%); border-radius: 50%;
  background: radial-gradient(closest-side, rgba(150, 190, 240, .35), rgba(150, 190, 240, .1) 60%, transparent); filter: blur(10px); pointer-events: none; }
.mk-wt-seq { position: absolute; inset: 0; width: 100%; height: 100%; display: block;
  -webkit-mask-image: linear-gradient(180deg, #000 0, #000 78%, transparent 98%);
  mask-image: linear-gradient(180deg, #000 0, #000 78%, transparent 98%); }
.mk-wt-floor { position: absolute; left: 50%; bottom: 6vh; width: min(46vh, 60vw); height: 5vh; transform: translateX(-50%); border-radius: 50%;
  background: radial-gradient(closest-side, rgba(40, 60, 90, .16), transparent); filter: blur(6px); pointer-events: none; }
main[data-scene="Trading"] .mk-wt + .mk-zx { margin-top: 0; }
@media (max-aspect-ratio: 1/1) { main[data-scene="Trading"] .mk-wt { height: 240vh; } }

/* (2026-10-29) Swarovski: no empty room kept under the text after the ice cave for the "read more"
   to open into (442 px), and a shorter step down to "Loupeler" */
main[data-scene="Trading"] #trading-chapter > [data-chapter]::after { height: 0 !important; }
main[data-scene="Trading"] #trading-chapter > [data-chapter] .grid > .read-more { margin-bottom: 90px; }
main[data-scene="Trading"] .product-container .separator { margin-bottom: 110px !important; }

/* blog article: "Sık sorulan sorular" as open/close rows (data/pages.json post template, 2026-10-30) */
.kp-faq { margin: .4em 0 1.6em; border-top: 1px solid var(--kc-hair); }
.kp-faq-i { border-bottom: 1px solid var(--kc-hair); }
.kp-faq-i summary { display: flex; align-items: flex-start; gap: 18px; padding: 18px 0; cursor: pointer; list-style: none; font-weight: 500; line-height: 1.45; }
.kp-faq-i summary::-webkit-details-marker { display: none; }
.kp-faq-i summary em { flex: none; font-style: normal; font-size: 12px; color: rgba(255, 255, 255, .4); padding-top: 4px; }
.kp-faq-i summary span { flex: 1; }
.kp-faq-i summary i { position: relative; flex: none; width: 14px; height: 14px; margin-top: 5px; }
.kp-faq-i summary i::before, .kp-faq-i summary i::after { content: ""; position: absolute; left: 0; top: 6px; width: 14px; height: 1.5px; background: currentColor; transition: transform .35s ease; }
.kp-faq-i summary i::after { transform: rotate(90deg); }
.kp-faq-i[open] summary i::after { transform: rotate(0deg); }
.kp-faq-i p { margin: 0 0 20px 34px; color: rgba(255, 255, 255, .72); line-height: 1.65; }

/* Gizlilik Sözleşmesi (main.mk-lg, 2026-10-30): self-hosted Instrument Serif italic + Barlow */
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(/medikallup/fonts/legal/Barlow-300-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(/medikallup/fonts/legal/Barlow-300-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/medikallup/fonts/legal/Barlow-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/medikallup/fonts/legal/Barlow-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/medikallup/fonts/legal/Barlow-500-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/medikallup/fonts/legal/Barlow-500-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/medikallup/fonts/legal/Barlow-600-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/medikallup/fonts/legal/Barlow-600-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Instrument Serif';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(/medikallup/fonts/legal/InstrumentSerif-400i-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Instrument Serif';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(/medikallup/fonts/legal/InstrumentSerif-400i-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
main.mk-lg { --lg-h: 'Instrument Serif', serif; --lg-b: 'Barlow', sans-serif; background: #000; color: #fff; font-family: var(--lg-b); font-weight: 300; overflow: clip; }
html.mk-main-kc body:has(main.mk-lg), body:has(main.mk-lg) { background: #000; }
.mk-lg .liquid-glass, .mk-lg .liquid-glass-strong { position: relative; overflow: hidden; background: rgba(255, 255, 255, .01); background-blend-mode: luminosity; border: 0; }
.mk-lg .liquid-glass { -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); box-shadow: inset 0 1px 1px rgba(255, 255, 255, .1); }
.mk-lg .liquid-glass-strong { -webkit-backdrop-filter: blur(50px); backdrop-filter: blur(50px); box-shadow: 4px 4px 4px rgba(0, 0, 0, .05), inset 0 1px 1px rgba(255, 255, 255, .15); }
.mk-lg .liquid-glass::before, .mk-lg .liquid-glass-strong::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.4px; pointer-events: none;
  background: linear-gradient(180deg, rgba(255,255,255,.45) 0%, rgba(255,255,255,.15) 20%, rgba(255,255,255,0) 40%, rgba(255,255,255,0) 60%, rgba(255,255,255,.15) 80%, rgba(255,255,255,.45) 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
.mk-lg .liquid-glass-strong::before { background: linear-gradient(180deg, rgba(255,255,255,.5) 0%, rgba(255,255,255,.2) 20%, rgba(255,255,255,0) 40%, rgba(255,255,255,0) 60%, rgba(255,255,255,.2) 80%, rgba(255,255,255,.5) 100%); }

/* videos fade in when ready and out just before each loop ends (catalog.js initLegal) */
.mk-lg .lg-vid { position: absolute; z-index: 0; object-fit: cover; opacity: 0; transition: opacity .5s linear; pointer-events: none; }
.mk-lg .lg-vid.is-on { opacity: 1; }
.mk-lg .lg-vid.is-out { opacity: 0; transition-duration: .55s; }
.mk-lg .lg-vid--hero { left: 50%; top: 0; width: 120%; height: 120%; transform: translateX(-50%); object-position: top; }
.mk-lg .lg-vid--caps { inset: 0; width: 100%; height: 100%; }

/* entrance: blur + rise; words of [data-lg-blur] one by one */
@keyframes lg-rise { from { filter: blur(10px); opacity: 0; transform: translateY(20px); } to { filter: blur(0); opacity: 1; transform: none; } }
.mk-lg .lg-rise { opacity: 0; }
body.loaded .mk-lg .lg-rise { animation: lg-rise .8s cubic-bezier(0, 0, .58, 1) var(--d, 0s) both; }
.mk-lg [data-lg-blur] { display: flex; flex-wrap: wrap; justify-content: center; row-gap: .1em; }
.mk-lg .lg-w { display: inline-block; margin-right: .28em; filter: blur(10px); opacity: 0; transform: translateY(50px); transition: filter .7s ease-out, opacity .7s ease-out, transform .7s ease-out; transition-delay: calc(var(--i) * .1s); }
.mk-lg .lg-w:last-child { margin-right: 0; }
.mk-lg .is-in > .lg-w { filter: blur(0); opacity: 1; transform: none; }
.mk-lg [data-lg-io] { opacity: 0; filter: blur(10px); transform: translateY(20px); transition: opacity .8s ease-out, filter .8s ease-out, transform .8s ease-out; transition-delay: calc(var(--i, 0) * .12s); }
.mk-lg [data-lg-io].is-in { opacity: 1; filter: blur(0); transform: none; }

/* hero */
.mk-lg .lg-hero { position: relative; height: 100vh; height: 100svh; min-height: 640px; overflow: hidden; background: #000; display: flex; flex-direction: column; }
.mk-lg .lg-hero::after { content: ""; position: absolute; inset: auto 0 0; height: 30%; background: linear-gradient(transparent, #000); pointer-events: none; z-index: 1; }
.mk-lg .lg-hero-in { position: relative; z-index: 2; flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 120px 16px 0; text-align: center; }
.mk-lg .lg-badge { display: inline-flex; align-items: center; gap: 10px; border-radius: 999px; padding: 4px 14px 4px 4px; font-size: 13px; color: rgba(255,255,255,.9); }
.mk-lg .lg-badge b { background: #fff; color: #000; border-radius: 999px; padding: 4px 10px; font-weight: 600; font-size: 12px; }
.mk-lg .lg-h1 { margin: 24px 0 0; max-width: 48rem; font: italic 400 clamp(56px, 8vw, 88px)/.8 var(--lg-h); letter-spacing: -4px; color: #fff; }
.mk-lg .lg-sub { margin: 18px 0 0; max-width: 42rem; font-size: clamp(14px, 1.1vw, 16px); line-height: 1.3; color: #fff; }
.mk-lg .lg-ctas { display: flex; align-items: center; gap: 24px; margin-top: 24px; }
.mk-lg .lg-btn { display: inline-flex; align-items: center; gap: 8px; border-radius: 999px; padding: 10px 20px; color: #fff; font-weight: 500; font-size: 15px; text-decoration: none; }
.mk-lg .lg-btn svg, .mk-lg .lg-link svg { width: 16px; height: 16px; }
.mk-lg .lg-link { display: inline-flex; align-items: center; gap: 8px; color: #fff; font-weight: 500; font-size: 15px; text-decoration: none; }
.mk-lg .lg-link svg { width: 13px; height: 13px; }
.mk-lg .lg-stats { display: flex; gap: 16px; margin-top: 32px; }
.mk-lg .lg-stat { width: 220px; border-radius: 1.25rem; padding: 20px; text-align: left; display: flex; flex-direction: column; }
.mk-lg .lg-stat-ic svg { width: 24px; height: 24px; }
.mk-lg .lg-stat b { margin-top: 16px; font: italic 400 36px/1 var(--lg-h); letter-spacing: -1px; }
.mk-lg .lg-stat > span:last-child { margin-top: 8px; font-size: 13px; line-height: 1.3; color: rgba(255,255,255,.85); }
.mk-lg .lg-trust { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 0 16px 32px; }
.mk-lg .lg-pill { border-radius: 999px; padding: 6px 16px; font-size: 13px; color: rgba(255,255,255,.9); }
.mk-lg .lg-words { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 56px; }
.mk-lg .lg-words span { font: italic 400 clamp(22px, 2.2vw, 30px)/1 var(--lg-h); letter-spacing: -.5px; }

/* principles */
.mk-lg .lg-caps { position: relative; min-height: 100vh; overflow: hidden; background: #000; }
.mk-lg .lg-caps::before { content: ""; position: absolute; inset: 0 0 auto; height: 22%; background: linear-gradient(#000, transparent); z-index: 1; pointer-events: none; }
.mk-lg .lg-caps-in { position: relative; z-index: 2; min-height: 100vh; display: flex; flex-direction: column; padding: 96px clamp(16px, 5vw, 80px) 40px; }
.mk-lg .lg-label { margin: 0 0 24px; font-size: 14px; color: rgba(255,255,255,.8); }
.mk-lg .lg-h2 { margin: 0 auto 0 0; font: italic 400 clamp(56px, 7vw, 96px)/.9 var(--lg-h); letter-spacing: -3px; }
.mk-lg .lg-h2 [data-lg-blur] { justify-content: flex-start; }
.mk-lg .lg-cards { margin-top: auto; padding-top: 64px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.mk-lg .lg-card { border-radius: 1.25rem; padding: 24px; min-height: 360px; display: flex; flex-direction: column; }
.mk-lg .lg-card-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.mk-lg .lg-card-ic { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: .75rem; }
.mk-lg .lg-card-ic svg { width: 22px; height: 22px; }
.mk-lg .lg-tags { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.mk-lg .lg-tags li { border-radius: 999px; padding: 4px 12px; font-size: 11px; color: rgba(255,255,255,.9); white-space: nowrap; }
.mk-lg .lg-card-sp { flex: 1; min-height: 40px; }
.mk-lg .lg-card h3 { margin: 0; font: italic 400 clamp(30px, 2.6vw, 36px)/1 var(--lg-h); letter-spacing: -1px; }
.mk-lg .lg-card p { margin: 12px 0 0; max-width: 32ch; font-size: 14px; line-height: 1.4; color: rgba(255,255,255,.9); }

/* the policy text */
.mk-lg .lg-doc { position: relative; display: grid; grid-template-columns: minmax(220px, 300px) minmax(0, 820px); justify-content: center; gap: 48px; padding: 80px clamp(16px, 5vw, 80px) 140px;
  background: radial-gradient(60% 40% at 80% 0%, rgba(80, 120, 90, .12), transparent 70%), #000; }
.mk-lg .lg-toc { position: sticky; top: 110px; border-radius: 1.25rem; padding: 20px; }
.mk-lg .lg-toc p { margin: 0 0 12px; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.55); }
.mk-lg .lg-toc ol { list-style: none; margin: 0; padding: 0; }
.mk-lg .lg-toc a { display: flex; gap: 12px; padding: 7px 0; font-size: 14px; line-height: 1.3; color: rgba(255,255,255,.6); text-decoration: none; transition: color .3s; }
.mk-lg .lg-toc a em { flex: none; width: 18px; font: italic 400 16px/1.1 var(--lg-h); }
.mk-lg .lg-toc a:hover, .mk-lg .lg-toc a.is-on { color: #fff; }
.mk-lg .lg-art { display: flex; flex-direction: column; gap: 20px; }
.mk-lg .lg-ctrl { border-radius: 1.25rem; padding: 28px; }
.mk-lg .lg-ctrl h2, .mk-lg .lg-sec h2 { margin: 0 0 18px; display: flex; align-items: baseline; gap: 14px; font: italic 400 clamp(30px, 3vw, 40px)/1 var(--lg-h); letter-spacing: -1px; }
.mk-lg .lg-ctrl dl { margin: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px 28px; }
.mk-lg .lg-ctrl dt { font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: rgba(255,255,255,.5); }
.mk-lg .lg-ctrl dd { margin: 4px 0 0; font-size: 15px; font-weight: 400; }
.mk-lg .lg-sec { border-radius: 1.25rem; padding: 28px; scroll-margin-top: 110px; }
.mk-lg .lg-sec h2 em { font-size: .6em; color: rgba(255,255,255,.45); }
.mk-lg .lg-sec p { margin: 0 0 12px; font-size: 16px; line-height: 1.65; color: rgba(255,255,255,.86); }
.mk-lg .lg-sec ul { margin: 4px 0 0; padding: 0; list-style: none; }
.mk-lg .lg-sec li { position: relative; padding: 8px 0 8px 22px; font-size: 15.5px; line-height: 1.55; color: rgba(255,255,255,.86); border-top: 1px solid rgba(255,255,255,.08); }
.mk-lg .lg-sec li::before { content: ""; position: absolute; left: 2px; top: 17px; width: 7px; height: 7px; border-radius: 50%; background: linear-gradient(135deg, #fff, rgba(255,255,255,.2)); }

@media (max-width: 1024px) {
  .mk-lg .lg-doc { grid-template-columns: minmax(0, 1fr); }
  .mk-lg .lg-side { display: none; }
}
@media (max-width: 767px) {
  .mk-lg .lg-hero-in { padding-top: 96px; }
  .mk-lg .lg-h1 { letter-spacing: -2px; }
  .mk-lg .lg-stats { flex-direction: column; width: 100%; max-width: 320px; gap: 10px; }
  .mk-lg .lg-stat { width: auto; padding: 14px 16px; }
  .mk-lg .lg-stat b { margin-top: 8px; font-size: 28px; }
  .mk-lg .lg-words { gap: 8px 22px; }
  .mk-lg .lg-cards { grid-template-columns: 1fr; gap: 16px; }
  .mk-lg .lg-card { min-height: 280px; }
  .mk-lg .lg-ctrl dl { grid-template-columns: 1fr; }
  .mk-lg .lg-ctrl, .mk-lg .lg-sec { padding: 22px 18px; }
  .mk-lg .lg-h2 { letter-spacing: -2px; }
}
@media (prefers-reduced-motion: reduce) {
  .mk-lg .lg-rise, .mk-lg .lg-w, .mk-lg [data-lg-io] { animation: none !important; transition: none !important; opacity: 1 !important; filter: none !important; transform: none !important; }
}
.mk-lg .lg-hero { min-height: 780px; }
.mk-lg .lg-hero-in { padding-bottom: 28px; }
@media (max-width: 767px) {
  .mk-lg .lg-hero { height: auto; min-height: 100svh; }
  .mk-lg .lg-hero-in { padding: 110px 16px 28px; }
  .mk-lg .lg-ctas { gap: 18px; }
  .mk-lg .lg-stats { flex-direction: row; max-width: none; }
  .mk-lg .lg-stat { flex: 1; }
  .mk-lg .lg-stat-ic svg { width: 20px; height: 20px; }
  .mk-lg .lg-stat > span:last-child { font-size: 12px; }
  .mk-lg .lg-trust { padding-bottom: 40px; }
}

/* privacy page footer (main.mk-lg): black, glass cards, and on top the layered-rock scene whose second
   picture shows through a spotlight that follows the pointer (catalog.js initLegal moves
   template#lg-foot-tpl into the shared footer and takes it out on other pages) */
main.mk-lg ~ #footer { position: relative; isolation: isolate; overflow: hidden; background: #000; color: #fff; font-family: 'Barlow', sans-serif; font-weight: 300; }
main.mk-lg ~ #footer .menu-right > .mk-foot { gap: 14px; }
main.mk-lg ~ #footer .mk-foot-item { position: relative; overflow: hidden; border-radius: 1.25rem; padding: 22px 20px 24px; background: rgba(255, 255, 255, .01); background-blend-mode: luminosity;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); box-shadow: inset 0 1px 1px rgba(255, 255, 255, .1); transition: background .4s; }
main.mk-lg ~ #footer .mk-foot-item::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.4px; pointer-events: none;
  background: linear-gradient(180deg, rgba(255,255,255,.45) 0%, rgba(255,255,255,.15) 20%, rgba(255,255,255,0) 40%, rgba(255,255,255,0) 60%, rgba(255,255,255,.15) 80%, rgba(255,255,255,.45) 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
main.mk-lg ~ #footer .mk-foot-item:hover { background: rgba(255, 255, 255, .06); }
main.mk-lg ~ #footer .mk-foot-title { font: italic 400 clamp(24px, 2vw, 30px)/1 'Instrument Serif', serif; letter-spacing: -.5px; text-transform: none; color: #fff; }
main.mk-lg ~ #footer .mk-foot-lines, main.mk-lg ~ #footer .mk-foot-lines a { font-family: 'Barlow', sans-serif; letter-spacing: 0; color: rgba(255, 255, 255, .78); }
main.mk-lg ~ #footer .mk-foot-lines a:hover { color: #fff; }
main.mk-lg ~ #footer .mk-foot-icon { color: #fff; border-color: rgba(255, 255, 255, .35); }
main.mk-lg ~ #footer .mk-foot-icon::after { border-color: rgba(255, 255, 255, .2); }
main.mk-lg ~ #footer .line { background: rgba(255, 255, 255, .17); }
main.mk-lg ~ #footer .mk-foot-legal, main.mk-lg ~ #footer .mk-foot-legal a { font-family: "Barlow", sans-serif; letter-spacing: 0; color: rgba(255, 255, 255, .75); }
main.mk-lg ~ #footer .mk-foot-legal a:hover { color: #fff; }

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/medikallup/fonts/legal/Inter-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/medikallup/fonts/legal/Inter-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/medikallup/fonts/legal/Inter-500-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/medikallup/fonts/legal/Inter-500-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/medikallup/fonts/legal/Inter-600-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/medikallup/fonts/legal/Inter-600-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Playfair Display';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(/medikallup/fonts/legal/PlayfairDisplay-400i-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Playfair Display';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(/medikallup/fonts/legal/PlayfairDisplay-400i-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

#footer .lg-lith { position: relative; height: 100vh; height: 100dvh; min-height: 620px; overflow: hidden; background: #000; font-family: 'Inter', sans-serif; letter-spacing: -.02em; margin-bottom: clamp(40px, 6vw, 80px); }
#footer .lg-lith-bg, #footer .lg-lith-reveal { position: absolute; inset: 0; background-size: cover; background-position: center; background-repeat: no-repeat; }
#footer .lg-lith-bg { z-index: 1; background-image: var(--lg-img1); transform: scale(1.12); }
#footer .lg-lith.is-in .lg-lith-bg { transition: transform 1.8s cubic-bezier(.16, 1, .3, 1); transform: scale(1); }
#footer .lg-lith-reveal { z-index: 2; pointer-events: none; background-image: var(--lg-img2);
  --m: radial-gradient(circle 260px at var(--x, -999px) var(--y, -999px), #fff 0%, #fff 40%, rgba(255,255,255,.75) 60%, rgba(255,255,255,.4) 75%, rgba(255,255,255,.12) 88%, rgba(255,255,255,0) 100%);
  -webkit-mask-image: var(--m); mask-image: var(--m); }
#footer .lg-lith::after { content: ""; position: absolute; inset: auto 0 0; height: 18%; z-index: 3; background: linear-gradient(transparent, #000); pointer-events: none; }
#footer .lg-lith-head { position: absolute; top: 14%; left: 0; right: 0; z-index: 5; display: flex; justify-content: center; text-align: center; padding: 0 1.25rem; pointer-events: none; }
#footer .lg-lith-h { margin: 0; color: #fff; line-height: .95; }
#footer .lg-lith-l1 { display: block; font: italic 400 3rem/.95 'Playfair Display', serif; letter-spacing: -.05em; }
#footer .lg-lith-l2 { display: block; font-weight: 400; font-size: 3rem; letter-spacing: -.08em; margin-top: -.25rem; }
#footer .lg-lith-left { display: none; position: absolute; bottom: 3.5rem; left: 2.5rem; max-width: 260px; z-index: 5; }
#footer .lg-lith-left p, #footer .lg-lith-right p { margin: 0; font-size: .875rem; color: rgba(255,255,255,.8); line-height: 1.625; }
#footer .lg-lith-right { position: absolute; bottom: 2.5rem; left: 1.25rem; right: 1.25rem; z-index: 5; display: flex; flex-direction: column; align-items: flex-start; gap: 1rem; }
#footer .lg-lith-right p { font-size: .75rem; }
#footer .lg-lith-btn { background: #e8702a; color: #fff; font-size: .875rem; font-weight: 500; padding: .75rem 1.75rem; border-radius: 9999px; text-decoration: none; transition: all .2s ease; }
#footer .lg-lith-btn:hover { background: #d2611f; transform: scale(1.03); box-shadow: 0 10px 25px rgba(232,112,42,.3); }
#footer .lg-lith-btn:active { transform: scale(.95); }
@keyframes lg-lith-reveal { 0% { opacity: 0; transform: translateY(28px); filter: blur(12px); } 100% { opacity: 1; transform: none; filter: blur(0); } }
@keyframes lg-lith-fade { 0% { opacity: 0; transform: translateY(20px); } 100% { opacity: 1; transform: none; } }
#footer .lg-lith-a, #footer .lg-lith-f { opacity: 0; }
#footer .lg-lith.is-in .lg-lith-a { animation: lg-lith-reveal 1.1s cubic-bezier(.16, 1, .3, 1) var(--d) forwards; }
#footer .lg-lith.is-in .lg-lith-f { animation: lg-lith-fade 1s cubic-bezier(.16, 1, .3, 1) var(--d) forwards; }
@media (min-width: 640px) {
  #footer .lg-lith-l1, #footer .lg-lith-l2 { font-size: 4.5rem; }
  #footer .lg-lith-left { display: block; }
  #footer .lg-lith-right { bottom: 6rem; left: auto; right: 2.5rem; max-width: 260px; gap: 1.25rem; }
  #footer .lg-lith-right p { font-size: .875rem; }
}
@media (min-width: 768px) {
  #footer .lg-lith-l1, #footer .lg-lith-l2 { font-size: 6rem; }
  #footer .lg-lith-left { left: 3.5rem; }
  #footer .lg-lith-right { right: 3.5rem; }
}
@media (prefers-reduced-motion: reduce) {
  #footer .lg-lith-a, #footer .lg-lith-f { animation: none !important; opacity: 1; }
  #footer .lg-lith-bg { transform: none; }
}

/* KVKK page (main.mk-kv, 2026-10-30): a film behind the whole page that plays with the scroll
   (catalog.js initKvkk draws public/medikallup/kvkk/f/*.webp on the canvas), text revealed on view */
main.mk-kv { position: relative; z-index: 0; background: transparent; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-weight: 400; color: #fff; -webkit-font-smoothing: antialiased; }
body:has(main.mk-kv) { background: #0a0a0a; }
.mk-kv .kv-bg { position: fixed; inset: 0; z-index: -1; background: #0a0a0a; pointer-events: none; }
.mk-kv .kv-canvas, .mk-kv .kv-first { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mk-kv .kv-canvas { visibility: hidden; }
.mk-kv .kv-bg.is-live .kv-canvas { visibility: visible; }
.mk-kv .kv-bg.is-live .kv-first { display: none; }
.mk-kv .kv-shade { position: absolute; inset: 0; background: rgba(0, 0, 0, .2); }
.mk-kv .kv-r { transition: transform 700ms cubic-bezier(.33, 1, .68, 1), opacity 700ms cubic-bezier(.33, 1, .68, 1); transition-delay: var(--d, 0ms); transform: translateY(2rem); opacity: 0; }
.mk-kv .kv-r.is-in { transform: none; opacity: 1; }
.mk-kv .kv-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.mk-kv .kv-hero { position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-height: 100vh; min-height: 100svh; }
.mk-kv .kv-wrap { padding: 0 24px 40px; }
.mk-kv .kv-grid2 { display: grid; grid-template-columns: 1fr; gap: 32px; align-items: end; }
.mk-kv .kv-h1 { max-width: 32rem; margin: 0; font-weight: 500; line-height: 1.05; letter-spacing: -.025em; font-size: clamp(2.5rem, 8vw, 6rem); text-shadow: 0 10px 30px rgba(0,0,0,.35); }
.mk-kv .kv-h1 .kv-r { display: block; }
.mk-kv .kv-stats { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 24px; }
.mk-kv .kv-stats > div, .mk-kv .kv-big > div, .mk-kv .kv-cat { display: flex; flex-direction: column; }
.mk-kv .kv-stats b { font-size: 1.5rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.mk-kv .kv-stats b i, .mk-kv .kv-big b i { margin-left: 2px; font-style: normal; font-size: .6em; color: rgba(255,255,255,.7); }
.mk-kv .kv-stats span, .mk-kv .kv-big span, .mk-kv .kv-cat span { margin-top: 4px; font-size: 10px; letter-spacing: .05em; text-transform: uppercase; color: rgba(255,255,255,.55); }
.mk-kv .kv-gap { height: 80vh; }
.mk-kv .kv-two { display: flex; flex-direction: column; justify-content: space-between; min-height: 100vh; min-height: 100svh; padding: 40px 24px; }
.mk-kv .kv-top { align-self: flex-end; width: 100%; max-width: 24rem; }
.mk-kv .kv-h2 { margin: 0; font-size: 1.875rem; font-weight: 600; line-height: 1.1; letter-spacing: -.025em; }
.mk-kv .kv-big { display: grid; grid-template-columns: auto 1fr; gap: 12px 16px; margin-top: 32px; }
.mk-kv .kv-big b { font-size: 1.875rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.mk-kv .kv-big p { margin: 0; align-self: center; font-size: 12px; line-height: 1.6; color: rgba(255,255,255,.75); }
.mk-kv .kv-bottom { display: grid; grid-template-columns: 1fr; gap: 32px; margin-top: auto; padding-top: 64px; }
.mk-kv .kv-cats { display: grid; grid-template-columns: repeat(2, 1fr); }
.mk-kv .kv-cat { padding: 12px; }
.mk-kv .kv-cat:first-child { border: 1px solid rgba(255,255,255,.3); border-radius: 8px; }
.mk-kv .kv-cat b { font-size: 1.125rem; font-weight: 700; }
.mk-kv .kv-btns { display: flex; align-items: center; gap: 12px; margin-top: 8px; }
.mk-kv .kv-btn { border-radius: 999px; border: 1px solid rgba(255,255,255,.6); padding: 10px 20px; font-size: 11px; font-weight: 500; letter-spacing: .05em; text-transform: uppercase; color: #fff; text-decoration: none; transition: all .3s; }
.mk-kv .kv-btn:hover { border-color: #fff; background: rgba(255,255,255,.1); }
.mk-kv .kv-btn--w { background: #fff; border-color: #fff; color: #000; }
.mk-kv .kv-btn--w:hover { background: rgba(255,255,255,.9); transform: scale(1.05); }
.mk-kv .kv-doc { position: relative; padding: 120px 24px 140px; background: linear-gradient(rgba(10,10,10,0), rgba(10,10,10,.82) 220px); }
.mk-kv .kv-doc-in { max-width: 860px; margin: 0 auto; display: flex; flex-direction: column; gap: 16px; }
.mk-kv .kv-upd { margin: 0; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.55); }
.mk-kv .kv-doc-h { margin: 0 0 16px; font-size: clamp(2rem, 5vw, 3.5rem); font-weight: 500; line-height: 1.05; letter-spacing: -.025em; }
.mk-kv .kv-card { border: 1px solid rgba(255,255,255,.18); border-radius: 14px; padding: 26px 28px; background: rgba(10,10,10,.55); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); scroll-margin-top: 110px; }
.mk-kv .kv-card h3 { display: flex; align-items: baseline; gap: 12px; margin: 0 0 14px; font-size: clamp(1.25rem, 2.2vw, 1.6rem); font-weight: 600; letter-spacing: -.02em; line-height: 1.2; }
.mk-kv .kv-card h3 em { font-style: normal; font-size: 12px; font-weight: 500; color: rgba(255,255,255,.45); font-variant-numeric: tabular-nums; }
.mk-kv .kv-card p { margin: 0 0 12px; font-size: 15.5px; line-height: 1.65; color: rgba(255,255,255,.82); }
.mk-kv .kv-card p:last-child { margin-bottom: 0; }
.mk-kv .kv-card ul { margin: 4px 0 0; padding: 0; list-style: none; }
.mk-kv .kv-card li { padding: 9px 0 9px 20px; position: relative; font-size: 15px; line-height: 1.55; color: rgba(255,255,255,.82); border-top: 1px solid rgba(255,255,255,.1); }
.mk-kv .kv-card li::before { content: ""; position: absolute; left: 0; top: 17px; width: 8px; height: 1px; background: rgba(255,255,255,.7); }
.mk-kv .kv-ctrl dl { margin: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px 28px; }
.mk-kv .kv-ctrl dt { font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.5); }
.mk-kv .kv-ctrl dd { margin: 4px 0 0; font-size: 15px; }
@media (min-width: 640px) {
  .mk-kv .kv-wrap { padding: 0 40px 40px; }
  .mk-kv .kv-grid2 { grid-template-columns: 1fr 1fr; gap: 48px; }
  .mk-kv .kv-stats { justify-content: flex-end; gap: 40px; }
  .mk-kv .kv-stats b { font-size: 1.875rem; }
  .mk-kv .kv-stats span { font-size: 12px; }
  .mk-kv .kv-two { padding: 56px 40px; }
  .mk-kv .kv-h2 { font-size: 2.25rem; }
  .mk-kv .kv-big b { font-size: 2.25rem; }
  .mk-kv .kv-big p { font-size: 14px; }
  .mk-kv .kv-bottom { grid-template-columns: 1fr auto; padding-top: 80px; }
  .mk-kv .kv-bottom .kv-btns, .mk-kv .kv-bottom .kv-cats { justify-self: end; }
  .mk-kv .kv-cats { display: flex; }
  .mk-kv .kv-cat { padding: 12px 16px; }
  .mk-kv .kv-btn { padding: 10px 24px; font-size: 12px; }
}
@media (min-width: 768px) {
  .mk-kv .kv-wrap { padding: 0 64px 64px; }
  .mk-kv .kv-stats { gap: 56px; }
  .mk-kv .kv-stats b { font-size: 2.25rem; }
  .mk-kv .kv-two { padding: 80px 64px; }
  .mk-kv .kv-h2 { font-size: 3rem; }
  .mk-kv .kv-bottom { grid-template-columns: 1fr 1fr; }
  .mk-kv .kv-bottom > .kv-cats { grid-column: 2; }
  .mk-kv .kv-bottom > .kv-btns { grid-column: 2; }
}
@media (max-width: 639px) { .mk-kv .kv-ctrl dl { grid-template-columns: 1fr; } .mk-kv .kv-card { padding: 22px 18px; } }
@media (prefers-reduced-motion: reduce) { .mk-kv .kv-r { transition: none; transform: none; opacity: 1; } }
.mk-kv .kv-stats span, .mk-kv .kv-big span, .mk-kv .kv-cat span { color: rgba(255,255,255,.8); }
.mk-kv .kv-stats, .mk-kv .kv-big, .mk-kv .kv-cats, .mk-kv .kv-h2 { text-shadow: 0 2px 14px rgba(0,0,0,.55); }
/* KVKK: the film keeps playing behind the footer (it is fixed behind the whole page), so the footer
   is see-through with a soft dark veil and its glass cards blur the film */
main.mk-kv ~ #footer { background: linear-gradient(rgba(10,10,10,0), rgba(10,10,10,.45) 30%, rgba(10,10,10,.6)); }
main.mk-kv ~ #footer .mk-foot-item { background: rgba(10, 10, 10, .35); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
main.mk-kv ~ #footer .mk-foot-legal, main.mk-kv ~ #footer .mk-foot-legal a { color: rgba(255, 255, 255, .8); }
.mk-kv .kv-doc { background: linear-gradient(rgba(10,10,10,0), rgba(10,10,10,.82) 220px, rgba(10,10,10,.82) calc(100% - 320px), rgba(10,10,10,.45)); }
main.mk-kv ~ #footer { background: linear-gradient(rgba(10,10,10,.45), rgba(10,10,10,.6)); }

/* site search (catalog.js initSearch): magnifier in the header, panel with live results */
#header .mk-srch-btn { position: absolute; z-index: 5; top: 50%; right: clamp(16px, 3vw, 48px); transform: translateY(-50%); display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; background: none; color: inherit; cursor: pointer; transition: background .25s, transform .25s; }
#header .mk-srch-btn:hover { background: rgba(127, 127, 127, .16); }
#header .mk-srch-btn:active { transform: translateY(-50%) scale(.92); }
@media (max-width: 64em) { #header .mk-srch-btn { right: auto; left: auto; right: 132px; } }
html.mk-srch-on, html.mk-srch-on body { overflow: hidden !important; }
.mk-srch { position: fixed; inset: 0; z-index: 2147483000; display: flex; justify-content: center; align-items: flex-start; padding: clamp(70px, 12vh, 140px) 16px 24px; visibility: hidden; opacity: 0; transition: opacity .3s ease, visibility 0s .3s; font-family: inherit; }
.mk-srch.is-open { visibility: visible; opacity: 1; transition: opacity .3s ease; }
.mk-srch-veil { position: absolute; inset: 0; background: rgba(4, 8, 14, .62); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.mk-srch-box { position: relative; width: min(680px, 100%); max-height: calc(100vh - 120px); display: flex; flex-direction: column; border-radius: 22px; background: rgba(18, 22, 30, .92); border: 1px solid rgba(255, 255, 255, .14); box-shadow: 0 30px 80px rgba(0, 0, 0, .45); color: #fff; overflow: hidden; transform: translateY(-14px) scale(.98); transition: transform .4s cubic-bezier(.16, 1, .3, 1); }
.mk-srch.is-open .mk-srch-box { transform: none; }
.mk-srch-field { display: flex; align-items: center; gap: 12px; padding: 16px 18px; border-bottom: 1px solid rgba(255, 255, 255, .1); color: rgba(255, 255, 255, .7); }
.mk-srch-field input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; color: #fff; font: 400 18px/1.3 inherit; font-family: inherit; }
.mk-srch-field input::placeholder { color: rgba(255, 255, 255, .45); }
.mk-srch-field input::-webkit-search-cancel-button { display: none; }
.mk-srch-x { border: 1px solid rgba(255, 255, 255, .2); border-radius: 8px; background: none; color: rgba(255, 255, 255, .7); font-size: 11px; padding: 4px 8px; cursor: pointer; }
.mk-srch-out { overflow-y: auto; padding: 8px; overscroll-behavior: contain; }
.mk-srch-h { margin: 10px 10px 8px; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: rgba(255, 255, 255, .5); }
.mk-srch-chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 10px 12px; }
.mk-srch-chip { border: 1px solid rgba(255, 255, 255, .2); border-radius: 999px; background: rgba(255, 255, 255, .04); color: #fff; padding: 7px 14px; font: inherit; font-size: 13px; cursor: pointer; transition: background .2s, border-color .2s; }
.mk-srch-chip:hover { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .4); }
.mk-srch-empty { margin: 14px 10px 6px; font-size: 14px; color: rgba(255, 255, 255, .65); }
.mk-srch-fix { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin: 6px 10px 14px; font-size: 14px; color: rgba(255, 255, 255, .85); }
.mk-srch-it { display: flex; align-items: center; gap: 14px; padding: 10px; border-radius: 14px; color: #fff; text-decoration: none; transition: background .15s; }
.mk-srch-it:hover, .mk-srch-it.is-sel { background: rgba(255, 255, 255, .08); }
.mk-srch-img { flex: none; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 12px; background: #fff; overflow: hidden; }
.mk-srch-img img { width: 100%; height: 100%; object-fit: contain; }
.mk-srch-img--p { background: rgba(255, 255, 255, .08); color: rgba(255, 255, 255, .8); }
.mk-srch-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.mk-srch-tx b { font-weight: 500; font-size: 15px; line-height: 1.3; }
.mk-srch-tx small { font-size: 12.5px; line-height: 1.35; color: rgba(255, 255, 255, .55); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mk-srch-it em { flex: none; font-style: normal; font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: rgba(255, 255, 255, .5); border: 1px solid rgba(255, 255, 255, .15); border-radius: 999px; padding: 3px 8px; }
@media (max-width: 600px) { .mk-srch { padding-top: 64px; } .mk-srch-it em { display: none; } .mk-srch-field input { font-size: 16px; } }

/* search, 2026-10-30 second pass: a glowing glass pill in the header and a livelier panel */
#header .mk-srch-btn { width: auto; height: 40px; padding: 0 12px 0 13px; gap: 8px; display: inline-flex; align-items: center; border-radius: 999px;
  background: color-mix(in srgb, currentColor 13%, transparent); border: 1px solid color-mix(in srgb, currentColor 38%, transparent);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 6px 22px rgba(0, 0, 0, .14); font: 500 13px/1 inherit; font-family: inherit; letter-spacing: .06em; }
#header .mk-srch-btn::before { content: ""; position: absolute; inset: -1px; border-radius: inherit; pointer-events: none; border: 1px solid currentColor; opacity: 0; animation: mk-srch-ping 3.6s ease-out 1.2s infinite; }
@keyframes mk-srch-ping { 0% { opacity: .55; transform: scale(1); } 60%, 100% { opacity: 0; transform: scale(1.35, 1.6); } }
#header .mk-srch-btn:hover { background: color-mix(in srgb, currentColor 22%, transparent); }
#header .mk-srch-btn:hover svg { transform: rotate(-12deg) scale(1.08); }
#header .mk-srch-btn svg { transition: transform .3s cubic-bezier(.16, 1, .3, 1); }
.mk-srch-btn-t { text-transform: uppercase; }
.mk-srch-btn-k { font: 500 10.5px/1 inherit; font-family: inherit; padding: 4px 6px; border-radius: 6px; border: 1px solid color-mix(in srgb, currentColor 35%, transparent); opacity: .8; letter-spacing: 0; }
@media (max-width: 64em) {
  #header .mk-srch-btn { right: 128px; padding: 0 14px 0 12px; }
  .mk-srch-btn-k { display: none; }
}
@media (max-width: 420px) { .mk-srch-btn-t { display: none; } #header .mk-srch-btn { width: 40px; padding: 0; justify-content: center; } }

.mk-srch-veil { background: radial-gradient(80% 60% at 50% 0%, rgba(60, 110, 200, .35), rgba(4, 8, 14, .7) 70%); -webkit-backdrop-filter: blur(18px) saturate(1.2); backdrop-filter: blur(18px) saturate(1.2); }
.mk-srch-box { isolation: isolate; border: 0; background: rgba(14, 18, 27, .9); overflow: visible; }
.mk-srch-box::before { content: ""; position: absolute; inset: -1.5px; z-index: -1; border-radius: 23.5px; padding: 1.5px;
  background: conic-gradient(from var(--mk-srch-a, 0deg), rgba(120, 170, 255, .9), rgba(255, 255, 255, .15), rgba(120, 220, 200, .8), rgba(255, 255, 255, .15), rgba(120, 170, 255, .9));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: mk-srch-spin 6s linear infinite; }
.mk-srch-box::after { content: ""; position: absolute; inset: 10% 8% auto; height: 60%; z-index: -2; border-radius: 50%; background: rgba(90, 140, 255, .35); filter: blur(60px); pointer-events: none; }
@property --mk-srch-a { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@keyframes mk-srch-spin { to { --mk-srch-a: 360deg; } }
.mk-srch-box > .mk-srch-out { border-radius: 0 0 22px 22px; }
.mk-srch-kick { display: flex; align-items: center; gap: 8px; margin: 18px 22px 0; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .55); }
.mk-srch-kick span { width: 6px; height: 6px; border-radius: 50%; background: #7fb2ff; box-shadow: 0 0 0 0 rgba(127, 178, 255, .7); animation: mk-srch-dot 2s ease-out infinite; }
@keyframes mk-srch-dot { 0% { box-shadow: 0 0 0 0 rgba(127, 178, 255, .7); } 100% { box-shadow: 0 0 0 9px rgba(127, 178, 255, 0); } }
.mk-srch-field { padding: 10px 22px 18px; color: #9cc2ff; }
.mk-srch-field input { font-size: clamp(20px, 2.4vw, 26px); font-weight: 300; letter-spacing: -.01em; caret-color: #7fb2ff; }
.mk-srch-it { opacity: 0; transform: translateY(8px); animation: mk-srch-in .45s cubic-bezier(.16, 1, .3, 1) forwards; animation-delay: calc(var(--i, 0) * 35ms); }
@keyframes mk-srch-in { to { opacity: 1; transform: none; } }
.mk-srch-it:hover, .mk-srch-it.is-sel { background: linear-gradient(90deg, rgba(110, 160, 255, .16), rgba(255, 255, 255, .04)); box-shadow: inset 2px 0 0 #7fb2ff; }
.mk-srch-chip { transition: background .2s, border-color .2s, transform .2s; }
.mk-srch-chip:hover { transform: translateY(-1px); border-color: rgba(127, 178, 255, .7); background: rgba(127, 178, 255, .14); }
.mk-srch-fix .mk-srch-chip { border-color: rgba(127, 178, 255, .7); background: rgba(127, 178, 255, .16); }
@media (prefers-reduced-motion: reduce) { #header .mk-srch-btn::before, .mk-srch-box::before, .mk-srch-kick span { animation: none; } .mk-srch-it { animation: none; opacity: 1; transform: none; } }
/* the header's links reach close to the right edge: the button grows only where there is room */
@media (min-width: 64.0625em) {
  #header .mk-srch-btn { right: 14px; width: 40px; padding: 0; justify-content: center; }
  #header .mk-srch-btn .mk-srch-btn-t, #header .mk-srch-btn .mk-srch-btn-k { display: none; }
}
@media (min-width: 1500px) {
  #header .mk-srch-btn { right: 22px; width: auto; padding: 0 14px 0 13px; }
  #header .mk-srch-btn .mk-srch-btn-t { display: inline; }
}
@media (min-width: 1760px) { #header .mk-srch-btn .mk-srch-btn-k { display: inline; } }
/* below 1440px the links reach the right edge, but there is room left of them */
@media (min-width: 64.0625em) and (max-width: 1439px) { #header .mk-srch-btn { right: auto; left: 18px; } }

/* Swarovski man: a little air between the Swarovski Optik logo and its buttons */
/* (this margin and the logo's own 28px / 20px below it fold into one, so the gap is this value) */
.mk-lp-text .mk-lp-actions { margin-top: 88px; gap: 22px; }
@media (max-width: 767px) { .mk-lp-text .mk-lp-actions { margin-top: 52px; gap: 18px; } }
/* the text block hangs from the bottom: let it hang lower by the same amount, so the logo keeps its
   place and the buttons are the ones that move down */
.mk-lp-text:has(.mk-lp-logo) { margin-bottom: -76px; }
@media (max-width: 767px) { .mk-lp-text:has(.mk-lp-logo) { margin-bottom: -22px; } }
/* bigger buttons under the logo */
.mk-lp-text .mk-lp-btn { padding: 14px 34px; font-size: 16px; }
.mk-lp-text .mk-lp-specs { font-size: 16px; gap: 10px; }
.mk-lp-text .mk-lp-specs svg { width: 14px; height: 14px; }
@media (max-width: 767px) { .mk-lp-text .mk-lp-btn { padding: 12px 26px; font-size: 15px; } .mk-lp-text .mk-lp-specs { font-size: 15px; } }

/* Swarovski man's buttons, 2026-10-30: "Keşfet" a deep navy pill with a light sweeping across it
   now and then, a glow and an arrow that slides on hover; "Demo planla" a frosted glass pill whose
   play mark sits in a ring that pulses */
.mk-lp-text .mk-lp-btn { position: relative; overflow: hidden; isolation: isolate; display: inline-flex; align-items: center; gap: 12px; padding: 16px 30px 16px 34px; border-radius: 999px;
  background: linear-gradient(135deg, #0f1c33 0%, #1d3a6b 55%, #2b5da8 100%); color: #fff !important; font-weight: 600; letter-spacing: .02em;
  box-shadow: 0 12px 30px -8px rgba(29, 58, 107, .65), inset 0 1px 0 rgba(255, 255, 255, .22); transition: transform .35s cubic-bezier(.16, 1, .3, 1), box-shadow .35s; }
.mk-lp-text .mk-lp-btn::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .38) 48%, transparent 66%); transform: translateX(-120%); animation: mk-lp-sweep 4.2s ease-in-out 1.5s infinite; }
@keyframes mk-lp-sweep { 0%, 55% { transform: translateX(-120%); } 85%, 100% { transform: translateX(120%); } }
.mk-lp-text .mk-lp-btn::after { content: ""; width: 18px; height: 18px; flex: none; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform .35s cubic-bezier(.16, 1, .3, 1); }
.mk-lp-text .mk-lp-btn:hover { transform: translateY(-2px); box-shadow: 0 18px 38px -8px rgba(29, 58, 107, .8), inset 0 1px 0 rgba(255, 255, 255, .28); background: linear-gradient(135deg, #10203d 0%, #23468a 55%, #3570c8 100%); }
.mk-lp-text .mk-lp-btn:hover::after { transform: translateX(5px); }
.mk-lp-text .mk-lp-btn:active { transform: translateY(0) scale(.97); }

.mk-lp-text .mk-lp-specs { position: relative; gap: 12px; padding: 8px 24px 8px 8px; border-radius: 999px; font-weight: 600; color: #0f1c33 !important;
  background: rgba(255, 255, 255, .55); border: 1px solid rgba(15, 28, 51, .16); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  box-shadow: 0 10px 26px -12px rgba(15, 28, 51, .35); transition: transform .35s cubic-bezier(.16, 1, .3, 1), background .3s, border-color .3s; }
.mk-lp-text .mk-lp-specs svg { box-sizing: content-box; width: 12px !important; height: 12px !important; padding: 11px 10px 11px 12px; border-radius: 50%; background: #0f1c33; color: #fff; fill: #fff; stroke: #fff; animation: mk-lp-ring 2.4s ease-out infinite; }
@keyframes mk-lp-ring { 0% { box-shadow: 0 0 0 0 rgba(43, 93, 168, .55); } 70%, 100% { box-shadow: 0 0 0 12px rgba(43, 93, 168, 0); } }
.mk-lp-text .mk-lp-specs:hover { transform: translateY(-2px); background: rgba(255, 255, 255, .85); border-color: rgba(15, 28, 51, .3); }
.mk-lp-text .mk-lp-specs:active { transform: scale(.97); }
@media (max-width: 767px) {
  .mk-lp-text .mk-lp-btn { padding: 13px 22px 13px 26px; gap: 10px; }
  .mk-lp-text .mk-lp-btn::after { width: 16px; height: 16px; }
  .mk-lp-text .mk-lp-specs { padding: 6px 18px 6px 6px; gap: 10px; }
  .mk-lp-text .mk-lp-specs svg { padding: 9px 8px 9px 10px; width: 11px !important; height: 11px !important; }
}
@media (prefers-reduced-motion: reduce) { .mk-lp-text .mk-lp-btn::before, .mk-lp-text .mk-lp-specs svg { animation: none; } }

/* the woman's "Demo planla" in the same style as the man's: frosted glass pill, play mark in a navy
   ring that pulses (the arrow of the design gives way to it) */
.mk-rc-cta .mk-rc-btn { position: relative; gap: calc(14 * var(--u)); padding: 0 calc(30 * var(--u)) 0 calc(8 * var(--u)); background: rgba(255, 255, 255, .6); color: #0f1c33 !important; font-weight: 600;
  border: 1px solid rgba(15, 28, 51, .16); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: 0 12px 28px -12px rgba(15, 28, 51, .4);
  transition: transform .35s cubic-bezier(.16, 1, .3, 1), background .3s, border-color .3s; }
.mk-rc-cta .mk-rc-btn::before { content: ""; flex: none; order: -1; width: calc(46 * var(--u)); height: calc(46 * var(--u)); border-radius: 50%;
  background: #0f1c33 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpolygon points='8 5 19 12 8 19' fill='white'/%3E%3C/svg%3E") 56% 50% / 42% no-repeat;
  animation: mk-lp-ring 2.4s ease-out infinite; }
.mk-rc-cta .mk-rc-btn .mk-rc-arrow { display: none; }
.mk-rc-cta .mk-rc-btn:hover { transform: translateY(-2px); background: rgba(255, 255, 255, .9); border-color: rgba(15, 28, 51, .3); }
.mk-rc-cta .mk-rc-btn:active { transform: scale(.97); }
@media (prefers-reduced-motion: reduce) { .mk-rc-cta .mk-rc-btn::before { animation: none; } }

/* (2026-10-30, user's request) the woman gets a whole screen of her own: her section is as much taller
   as the man's fade above (18vh) and the film's fade below (20vh) take, and her scene sits in the full
   screen between them, so neither neighbour covers her any more */
main[data-scene="Trading"] section.mk-lp + section.mk-rc { height: calc(100vh + 38vh); min-height: 0; }
main[data-scene="Trading"] section.mk-lp + section.mk-rc .mk-rc-stage { inset: 18vh 0 auto 0; height: 100vh; min-height: 600px; }