/* Professional motion — no positional shift for text (opacity only) */

html {
  scroll-behavior: smooth;
}

.page-fade {
  opacity: 1;
  transition: opacity 220ms ease;
}

.page-fade.is-leaving {
  opacity: 0;
}

/* Scroll reveal: opacity only so layouts don't look shifted */
[data-anim="hero"],
[data-anim="card"],
[data-anim="title"],
[data-anim="counter"] {
  opacity: 0;
  transition: opacity 600ms cubic-bezier(0.22, 0.61, 0.36, 1);
  will-change: opacity;
}

[data-anim="hero"].is-inview,
[data-anim="card"].is-inview,
[data-anim="title"].is-inview,
[data-anim="counter"].is-inview {
  opacity: 1;
}

[data-anim="card"] {
  transition-delay: var(--stagger, 0ms);
}

/* Above-the-fold: show immediately before observer fires */
.artboard [data-anim="hero"],
.artboard [data-anim="title"][style*="top:5"],
.artboard [data-anim="title"][style*="top:6"],
.artboard [data-role="header"] {
  opacity: 1;
}

/* Media hover zoom — image grows INSIDE the fixed frame (overflow clips).
   Never scale .xd-media itself; only the inner img/slide via transform. */
.xd-media {
  display: block;
  overflow: hidden;
}

.xd-media-img {
  position: absolute !important;
  transform: scale(1);
  transform-origin: center center;
  transition: transform 600ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.home-hero-slider,
.home-hero-slider .home-slider-track,
.project-gallery {
  overflow: hidden;
}

.home-slider-slide {
  transform: scale(1);
  transform-origin: center center;
  transition:
    opacity 0.7s ease,
    transform 600ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.project-gallery .project-gallery-slide {
  transform: scale(1);
  transform-origin: center center;
  transition:
    opacity 0.45s ease,
    transform 600ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.artboard.sector-detail .xd-vectors .sector-svg-mark {
  pointer-events: auto;
  transform: scale(1);
  transform-box: fill-box;
  transform-origin: center;
  transition: transform 600ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

@media (hover: hover) and (pointer: fine) {
  .xd-media:hover .xd-media-img,
  .xd-media.xd-card.is-hovered .xd-media-img,
  .xd-media.xd-card:focus-within .xd-media-img {
    transform: scale(1.06);
  }

  .home-hero-slider:hover .home-slider-slide.is-active {
    transform: scale(1.06);
  }

  .project-gallery:hover .project-gallery-slide.is-active {
    transform: scale(1.06);
  }

  .artboard.sector-detail .xd-vectors .sector-svg-mark:hover {
    transform: scale(1.06);
  }
}

/* UI chrome — never zoom */
.sticky-header img,
.xd-footer-pattern,
.site-menu .menu-layer.xd-img,
.xd-img[data-role="footer"] {
  transform: none !important;
  transition: none !important;
}

/* Touch / mobile: no sticky hover zoom */
html.is-reflow .xd-media:hover .xd-media-img,
html.is-reflow .xd-media.xd-card.is-hovered .xd-media-img,
html.is-reflow .xd-media.xd-card:focus-within .xd-media-img,
html.is-reflow .home-hero-slider:hover .home-slider-slide.is-active,
html.is-reflow .project-gallery:hover .project-gallery-slide.is-active {
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .xd-card .xd-plus {
    transition: none;
  }

  .xd-media-img,
  .home-slider-slide,
  .project-gallery .project-gallery-slide,
  .artboard.sector-detail .xd-vectors .sector-svg-mark {
    transition: none !important;
  }

  .xd-media:hover .xd-media-img,
  .xd-media.xd-card.is-hovered .xd-media-img,
  .xd-media.xd-card:focus-within .xd-media-img,
  .home-hero-slider:hover .home-slider-slide.is-active,
  .project-gallery:hover .project-gallery-slide.is-active,
  .artboard.sector-detail .xd-vectors .sector-svg-mark:hover {
    transform: none !important;
  }
}

.sticky-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: calc(62px * var(--artboard-scale, 1));
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(8px);
  box-shadow: 0 1px 0 rgba(43, 45, 66, 0.08);
  z-index: 1200;
  transform: translateY(-100%);
  transition: transform 280ms cubic-bezier(0.22, 0.61, 0.36, 1);
  pointer-events: none;
  overflow: hidden;
}

.sticky-header.is-visible {
  transform: translateY(0);
  pointer-events: auto;
}

.sticky-header-scale {
  width: 1920px;
  height: 70px;
  transform: scale(var(--sticky-scale, var(--artboard-scale, 1)));
  transform-origin: top left;
  position: relative;
}

.sticky-header .xd-site-header,
.sticky-header .xd-site-header.is-sticky-clone {
  position: absolute;
  left: 0;
  top: 0;
  width: 1920px;
  height: 70px;
  z-index: 1;
  pointer-events: none;
  background: transparent;
}

.sticky-header .xd-site-header > *,
.sticky-header .xd-site-header .xd-social-link {
  pointer-events: auto;
}

/* Desktop sticky / scrolled: menu must live in viewport, not on the scrolled artboard */
.site-menu-fixed-host {
  position: fixed;
  inset: 0;
  z-index: 1150;
  overflow: hidden;
  pointer-events: none;
}

.site-menu-fixed-host:not([hidden]) {
  pointer-events: none;
}

body.menu-open .site-menu-fixed-host:not([hidden]) {
  pointer-events: auto;
}

.site-menu-fixed-host[hidden] {
  display: none !important;
}

.site-menu-fixed-scale {
  width: 1920px;
  height: 1080px;
  transform: scale(var(--menu-scale, var(--artboard-scale, 1)));
  transform-origin: top left;
  position: relative;
}

.site-menu-fixed-host .site-menu,
.site-menu.is-viewport-fixed {
  position: absolute;
  inset: 0;
  width: 1920px;
  height: 1080px;
  z-index: 1;
}

.site-menu[hidden] {
  display: none !important;
}

.site-menu {
  position: absolute;
  inset: 0;
  z-index: 400;
  pointer-events: none;
}

.site-menu.is-open {
  /* Keep none so the header (MENU/X) above the overlay stays clickable.
     Interactive children re-enable pointer events below. */
  pointer-events: none;
}

.site-menu-backdrop {
  position: absolute;
  left: 0;
  right: 0;
  top: 62px;
  bottom: 0;
  background: rgba(43, 45, 66, 0.12);
  opacity: 0;
  transition: opacity 280ms ease;
  pointer-events: none;
}

.site-menu.is-open .site-menu-backdrop {
  opacity: 1;
  pointer-events: auto;
}

.site-menu-panel {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.site-menu .menu-layer,
.site-menu .menu-link {
  pointer-events: auto;
  opacity: 0;
  transform: translate3d(0, -8px, 0);
  transition:
    opacity 280ms cubic-bezier(0.22, 0.61, 0.36, 1),
    transform 280ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.site-menu .menu-vectors {
  pointer-events: none;
}

.site-menu.is-open .menu-layer {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  transition-delay: 40ms;
}

.site-menu.is-open .menu-link {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  transition-delay: calc(60ms + var(--stagger, 0s));
}

.site-menu .menu-link:hover {
  color: #0466c8 !important;
  opacity: 1 !important;
}

/* Hamburger ↔ X (XD: closed = bars, open = close glyph) */
.xd-menu-bars {
  transition: opacity 180ms ease, visibility 180ms ease;
}

body.menu-open .xd-menu-bars {
  opacity: 0 !important;
  visibility: hidden;
}

/* Close glyph lives in page SVG or shared .xd-header-vectors */
.xd-menu-close {
  opacity: 0;
  visibility: hidden;
  transition: opacity 180ms ease, visibility 180ms ease;
  pointer-events: none;
}

body.menu-open .xd-menu-close {
  opacity: 1;
  visibility: visible;
}

.xd-menu-toggle {
  z-index: 450 !important;
  cursor: pointer;
  background: transparent;
  border: 0;
}

body.menu-open {
  overflow: hidden;
}

.xd-field {
  position: absolute;
  background: transparent;
  border: 0;
  outline: none;
  font-family: "Outfit", sans-serif;
  font-size: 15px;
  color: #2b2d42;
  padding: 4px 0;
}

.xd-field::placeholder {
  color: #2b2d42;
  opacity: 1;
}

.xd-field:focus {
  background: rgba(4, 102, 200, 0.04);
}

textarea.xd-field {
  resize: none;
}

.xd-check {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.xd-check input {
  width: 18px;
  height: 18px;
  accent-color: #e50019;
  cursor: pointer;
}

/* Contact form feedback.
   Absolutely positioned in the empty band under the KVKK row so a message
   never pushes the surrounding XD layout around. Hidden until it has text. */
.xd-form-note {
  position: absolute;
  left: 238px;
  top: 1076px;
  width: 700px;
  z-index: 220;
  font-family: "Red Hat Display", "Outfit", sans-serif;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.4;
}

.xd-form-note:empty {
  display: none;
}

.xd-form-note[data-kind="success"] { color: #2a9d8f; }
.xd-form-note[data-kind="error"] { color: #e50019; }
.xd-form-note[data-kind="pending"] { color: #adb5bd; }

.xd-field[data-invalid] {
  box-shadow: inset 0 -2px 0 0 #e50019;
}

.xd-check input[data-invalid] {
  outline: 2px solid #e50019;
  outline-offset: 2px;
}

.xd-submit[aria-busy="true"] {
  opacity: 0.6;
  pointer-events: none;
}

/* In the mobile reflow the form becomes a normal flow container, so the note
   follows the fields instead of sitting at a fixed coordinate. */
html.is-reflow .xd-form-note,
html.is-reflow #contact-form .xd-form-note {
  position: static;
  width: auto;
  margin-top: 10px;
}

a.xd-text[data-anim="title"],
a.xd-text[data-role="title"] {
  background-image: linear-gradient(currentColor, currentColor);
  background-position: 0 100%;
  background-repeat: no-repeat;
  background-size: 0% 1px;
  transition: background-size 400ms ease, opacity 200ms ease;
}

a.xd-text[data-anim="title"]:hover,
a.xd-text[data-role="title"]:hover {
  background-size: 100% 1px;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .page-fade,
  [data-anim="hero"],
  [data-anim="card"],
  [data-anim="title"],
  [data-anim="counter"],
  .site-menu-backdrop,
  .site-menu .menu-layer,
  .site-menu .menu-link {
    transition: none !important;
    transform: none !important;
  }

  .xd-media-img,
  .home-slider-slide,
  .project-gallery .project-gallery-slide {
    transition: none !important;
  }

  .sticky-header {
    transition: none !important;
  }

  .sticky-header:not(.is-visible) {
    transform: translateY(-100%) !important;
  }

  [data-anim="hero"],
  [data-anim="card"],
  [data-anim="title"],
  [data-anim="counter"] {
    opacity: 1;
  }
}