/* Monolit Digital — vanilla HTML/CSS (React sürümüyle aynı tasarım dili) */

*,
*::before,
*::after {
  box-sizing: border-box;
}

:root {
  --sticky-nav-h: 4.25rem;
  --sticky-nav-clearance: calc(var(--sticky-nav-h) + 0.875rem);
}

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

html.has-sticky-nav {
  scroll-padding-top: var(--sticky-nav-clearance);
}

html.lenis,
html.lenis body {
  height: auto;
}

.lenis.lenis-smooth {
  scroll-behavior: auto !important;
}

.lenis.lenis-smooth [data-lenis-prevent] {
  overscroll-behavior: contain;
}

.lenis.lenis-stopped {
  overflow: hidden;
}

.lenis.lenis-smooth iframe {
  pointer-events: none;
}

body {
  margin: 0;
  font-family: 'Be Vietnam Pro', system-ui, -apple-system, BlinkMacSystemFont,
    'Segoe UI', sans-serif;
  color: #111827;
  overflow-x: clip;
}

img,
video {
  display: block;
  max-width: 100%;
}

button {
  font: inherit;
  cursor: pointer;
  border: none;
  background: none;
}

a {
  color: inherit;
  text-decoration: none;
}

/* —— Utilities —— */
.container {
  width: 100%;
  max-width: 1440px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}

@media (min-width: 640px) {
  .container {
    padding-left: 2rem;
    padding-right: 2rem;
  }
}

@media (min-width: 1024px) {
  .container {
    padding-left: 3rem;
    padding-right: 3rem;
  }
}

/* Text roll button */
.btn-roll {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.btn-roll__text {
  display: block;
  overflow: hidden;
  height: 1.25em;
}

.btn-roll__inner {
  display: flex;
  flex-direction: column;
  transition: transform 500ms cubic-bezier(0.25, 0.1, 0.25, 1);
}

.btn-roll__inner span {
  display: block;
  height: 1.25em;
  line-height: 1.25em;
}

.btn-roll:hover .btn-roll__inner {
  transform: translateY(-50%);
}

.btn-roll__icon {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  transition: transform 500ms cubic-bezier(0.25, 0.1, 0.25, 1);
}

.btn-roll:hover .btn-roll__icon {
  transform: rotate(-45deg);
}

.ease-sheet {
  transition-timing-function: cubic-bezier(0.32, 0.72, 0, 1);
}

/* Liquid glass (defined, unused in layout) */
.liquid-glass {
  background: rgba(255, 255, 255, 0.01);
  backdrop-filter: blur(4px);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
  position: relative;
}

.liquid-glass::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.4),
    rgba(255, 255, 255, 0.05)
  );
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

.liquid-glass-strong {
  background: rgba(255, 255, 255, 0.01);
  backdrop-filter: blur(50px);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
}

/* —— Sticky nav (scroll sonrası) —— */
.sticky-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 95;
  padding: 0.625rem 0;
  pointer-events: none;
  opacity: 0;
  transform: translateY(calc(-100% - 0.5rem));
  transition:
    opacity 350ms cubic-bezier(0.25, 0.1, 0.25, 1),
    transform 350ms cubic-bezier(0.25, 0.1, 0.25, 1);
  background: rgba(10, 10, 15, 0.82);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  overflow: visible;
}

@media (min-width: 640px) {
  .sticky-nav {
    padding: 0.75rem 0;
  }
}

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

.sticky-nav__inner {
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}

@media (min-width: 640px) {
  .sticky-nav__inner {
    padding-left: 2rem;
    padding-right: 2rem;
  }
}

@media (min-width: 1024px) {
  .sticky-nav__inner {
    padding-left: 3rem;
    padding-right: 3rem;
  }
}

.sticky-nav .nav {
  box-shadow: none;
}

/* —— Hero —— */
.hero {
  position: relative;
  display: flex;
  min-height: 100vh;
  flex-direction: column;
  background: #000;
}

.hero__shader {
  position: absolute;
  inset: 0;
  z-index: 10;
  pointer-events: none;
}

.hero__shader canvas {
  display: block;
  width: 100%;
  height: 100%;
}

.hero__header {
  position: relative;
  z-index: 90;
  padding-top: 0.5rem;
}

@media (min-width: 640px) {
  .hero__header {
    padding-top: 0.75rem;
  }
}

.nav {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  position: relative;
  z-index: 100;
  background: transparent;
  padding: 0;
  --nav-logo-h: 2.125rem;
  --nav-cta-icon: 2.375rem;
  --nav-cta-pad-y: 0.6875rem;
  --nav-cta-pad-x: 0.6875rem;
  --nav-cta-pad-l: 1.625rem;
  --nav-cta-font: 15px;
  --nav-cta-gap: 0.625rem;
  --nav-action-icon: 18px;
}

@media (min-width: 640px) {
  .nav {
    --nav-logo-h: 2.375rem;
    --nav-cta-icon: 2.625rem;
    --nav-cta-pad-y: 0.75rem;
    --nav-cta-pad-x: 0.75rem;
    --nav-cta-pad-l: 1.875rem;
    --nav-cta-font: 16px;
    --nav-cta-gap: 0.75rem;
    --nav-action-icon: 20px;
  }
}

@media (min-width: 1024px) {
  .nav {
    --nav-logo-h: 2.5rem;
    --nav-cta-icon: 2.75rem;
    --nav-cta-pad-l: 2rem;
    --nav-cta-font: 17px;
  }
}

.hero__header .container,
.sticky-nav__inner {
  overflow: visible;
}

.nav__brand {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  margin-right: auto;
}

.nav__logo {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  width: fit-content;
  padding: 0;
  border-radius: 0;
  text-decoration: none;
  transition: opacity 200ms;
}

.nav__logo:hover {
  opacity: 0.75;
  background: transparent;
}

.nav__logo-img {
  display: block;
  width: auto;
  height: var(--nav-logo-h);
  flex-shrink: 0;
  object-fit: contain;
  object-position: left center;
  filter: brightness(0) invert(1);
}

.page-hero .nav__logo-img {
  filter: none;
}

.nav__links {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  min-width: 0;
}

@media (min-width: 1024px) {
  .nav__links {
    display: flex;
    justify-self: center;
    gap: 1rem;
  }
}

@media (min-width: 1280px) {
  .nav__links {
    gap: 1.25rem;
  }
}

.nav__link {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 13px;
  color: #111827;
  transition: color 300ms;
  white-space: nowrap;
}

@media (min-width: 1280px) {
  .nav__link {
    font-size: 14px;
  }
}

.nav__link:hover,
.nav__link--trigger[aria-expanded='true'] {
  color: #6b7280;
}

.nav__link--active {
  color: #f26522;
}

.nav__link--active:hover {
  color: #e05a1a;
}

.nav__link--trigger {
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
  font: inherit;
}

.nav__chevron {
  transition: transform 300ms cubic-bezier(0.25, 0.1, 0.25, 1);
}

.nav__item--dropdown.is-open .nav__chevron {
  transform: rotate(180deg);
}

.nav__item {
  position: relative;
}

/* —— Nav mega overlay —— */
.nav-overlay {
  position: fixed;
  inset: 0;
  z-index: 80;
  background: rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 300ms cubic-bezier(0.25, 0.1, 0.25, 1),
    visibility 300ms;
  pointer-events: none;
}

.nav-overlay.is-visible,
body.nav-dropdown-open .nav-overlay {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

@media (hover: hover) {
  body:has(.nav__item--dropdown:hover) .nav-overlay {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }
}

.nav__item--dropdown .nav__dropdown {
  position: absolute;
  top: calc(100% + 0.625rem);
  left: 50%;
  z-index: 110;
  min-width: 11.5rem;
  padding: 0.375rem;
  border-radius: 0.875rem;
  background: #fff;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, 0.375rem);
  transition:
    opacity 250ms cubic-bezier(0.25, 0.1, 0.25, 1),
    transform 250ms cubic-bezier(0.25, 0.1, 0.25, 1),
    visibility 250ms;
  pointer-events: none;
}

.nav__item--dropdown .nav__dropdown--mega {
  position: fixed;
  top: var(--nav-mega-top, 4.5rem);
  left: 50%;
  min-width: 0;
  width: min(56rem, calc(100vw - 2.5rem));
  padding: 0;
  border-radius: 1.25rem;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.12);
  overflow: hidden;
}

.nav__item--dropdown .nav__dropdown--mega::before {
  content: '';
  position: absolute;
  top: -0.625rem;
  left: 0;
  right: 0;
  height: 0.625rem;
}

.nav__item--dropdown.is-open .nav__dropdown,
.nav__item--dropdown:focus-within .nav__dropdown {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
  pointer-events: auto;
}

@media (hover: hover) {
  .nav__item--dropdown:hover .nav__dropdown {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
    pointer-events: auto;
  }

  .nav__item--dropdown:hover .nav__chevron {
    transform: rotate(180deg);
  }
}

.nav__dropdown a {
  display: block;
  padding: 0.5rem 0.75rem;
  border-radius: 0.5rem;
  font-size: 13px;
  color: #111827;
  transition:
    background 200ms,
    color 200ms;
}

.nav__dropdown:not(.nav__dropdown--mega) a:hover {
  background: #f3f4f6;
  color: #111827;
}

/* —— Mega menu —— */
.nav-mega {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
}

@media (min-width: 768px) {
  .nav-mega {
    grid-template-columns: minmax(12rem, 1.05fr) minmax(0, 1fr) minmax(0, 1fr);
    gap: 0 2rem;
    padding: 2rem 2.25rem;
  }
}

@media (min-width: 1024px) {
  .nav-mega {
    padding: 2.25rem 2.5rem;
    gap: 0 2.5rem;
  }
}

.nav-mega__links {
  padding: 1.5rem;
}

@media (min-width: 768px) {
  .nav-mega__links {
    padding: 0;
    border-right: 1px solid #e5e7eb;
    padding-right: 2rem;
  }
}

@media (min-width: 1024px) {
  .nav-mega__links {
    padding-right: 2.5rem;
  }
}

.nav-mega__title {
  margin: 0 0 1.25rem;
  font-size: 1.125rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: #111827;
}

@media (min-width: 1024px) {
  .nav-mega__title {
    font-size: 1.25rem;
    margin-bottom: 1.5rem;
  }
}

.nav-mega__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.nav-mega__list li + li {
  margin-top: 0.875rem;
}

@media (min-width: 1024px) {
  .nav-mega__list li + li {
    margin-top: 1rem;
  }
}

.nav-mega__list a {
  display: block;
  padding: 0;
  border-radius: 0;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.45;
  color: #374151;
  white-space: normal;
}

@media (min-width: 1024px) {
  .nav-mega__list a {
    font-size: 15px;
  }
}

.nav-mega__list a:hover {
  background: transparent;
  color: #f26522;
}

.nav-mega__features {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  padding: 0 1.5rem 1.5rem;
}

@media (min-width: 768px) {
  .nav-mega__features {
    grid-column: 2 / -1;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    padding: 0;
  }
}

@media (min-width: 1024px) {
  .nav-mega__features {
    gap: 2rem;
  }
}

.nav-mega__feature-head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.875rem;
  font-size: 13px;
  font-weight: 500;
  color: #6b7280;
}

.nav-mega__feature-head .icon {
  color: #9ca3af;
}

.nav-mega__card {
  display: block;
  color: inherit;
  transition: opacity 200ms;
}

.nav-mega__card:hover {
  opacity: 0.88;
}

.nav-mega__card-media {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  border-radius: 0.625rem;
  object-fit: cover;
  background: #f3f4f6;
}

.nav-mega__card-title {
  margin: 0.875rem 0 0;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.45;
  letter-spacing: -0.01em;
  color: #111827;
}

@media (min-width: 1024px) {
  .nav-mega__card-title {
    font-size: 15px;
  }
}

.nav-mega__card-link {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  margin-top: 0.625rem;
  font-size: 13px;
  font-weight: 500;
  color: #6b7280;
  transition: color 200ms;
}

.nav-mega__card:hover .nav-mega__card-link {
  color: #f26522;
}

.nav__links a.nav__link:not(.nav__link--trigger) {
  font-size: 13px;
  color: #111827;
  transition: color 300ms;
}

@media (min-width: 1280px) {
  .nav__links a.nav__link:not(.nav__link--trigger) {
    font-size: 14px;
  }
}

.nav__links a.nav__link:not(.nav__link--trigger):hover {
  color: #6b7280;
}

.nav__right {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  gap: 0.375rem;
  margin-left: auto;
}

@media (min-width: 640px) {
  .nav__right {
    gap: 0.75rem;
  }
}

.nav__cta--meeting {
  border-color: rgba(255, 255, 255, 0.38);
  background: rgba(255, 255, 255, 0.06);
}

.nav__cta--meeting:hover {
  border-color: rgba(255, 255, 255, 0.65);
  background: rgba(255, 255, 255, 0.12);
}

.hero .nav__cta--meeting,
.page-hero .nav__cta--meeting {
  border-color: rgba(0, 0, 0, 0.2);
  color: #000;
  background: #fff;
}

.hero .nav__cta--meeting:hover,
.page-hero .nav__cta--meeting:hover {
  border-color: rgba(0, 0, 0, 0.4);
  background: #f9fafb;
}

.hero .nav__cta--meeting .nav__cta-icon,
.page-hero .nav__cta--meeting .nav__cta-icon {
  background: #000;
  color: #fff;
}

.sticky-nav .nav__cta--meeting {
  border-color: rgba(0, 0, 0, 0.2);
  color: #000;
  background: #fff;
}

.sticky-nav .nav__cta--meeting:hover {
  border-color: rgba(0, 0, 0, 0.4);
  background: #f9fafb;
}

.sticky-nav .nav__cta--meeting .nav__cta-icon {
  background: #000;
  color: #fff;
}

.nav__cta {
  display: inline-flex;
  align-items: center;
  gap: var(--nav-cta-gap);
  flex-shrink: 0;
  border-radius: 9999px;
  background: transparent;
  padding: var(--nav-cta-pad-y) var(--nav-cta-pad-x) var(--nav-cta-pad-y) var(--nav-cta-pad-l);
  font-size: var(--nav-cta-font);
  font-weight: 500;
  color: #fff;
  text-decoration: none;
  white-space: nowrap;
  border: 1.5px solid #fff;
  cursor: pointer;
  font-family: inherit;
  transition: border-color 200ms, background 200ms;
}

.nav__cta:hover {
  border-color: rgba(255, 255, 255, 0.85);
  background: rgba(255, 255, 255, 0.08);
}

.nav__cta-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--nav-cta-icon);
  height: var(--nav-cta-icon);
  border-radius: 9999px;
  background: #fff;
  color: #111827;
  flex-shrink: 0;
}

.nav__cta-icon .icon {
  width: var(--nav-action-icon);
  height: var(--nav-action-icon);
}

.nav__tagline {
  display: none;
  font-size: 13px;
  color: #4b5563;
}

@media (min-width: 1024px) {
  .nav__tagline {
    display: inline;
  }
}

.nav__clock {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 13px;
  color: #4b5563;
}

.nav__menu-btn {
  position: relative;
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: calc(var(--nav-cta-icon) + var(--nav-cta-pad-y) * 2 + 3px);
  height: calc(var(--nav-cta-icon) + var(--nav-cta-pad-y) * 2 + 3px);
  border-radius: 9999px;
  background: transparent;
  border: 1.5px solid #fff;
  color: #fff;
  cursor: pointer;
  font-family: inherit;
  transition: border-color 200ms, background 200ms;
}

.nav__menu-btn .icon {
  width: var(--nav-action-icon);
  height: var(--nav-action-icon);
  stroke-width: 2.5;
}

.nav__menu-btn:hover {
  border-color: rgba(255, 255, 255, 0.85);
  background: rgba(255, 255, 255, 0.08);
}

.nav__menu-btn .menu-toggle__close {
  display: none;
}

.nav__menu-btn[aria-expanded='true'] .menu-toggle__open {
  display: none;
}

.nav__menu-btn[aria-expanded='true'] .menu-toggle__close {
  display: block;
}

/* —— Nav responsive (header + sticky) —— */
.nav {
  width: 100%;
  min-width: 0;
}

.nav__brand {
  min-width: 0;
}

@media (max-width: 767px) {
  .nav {
    --nav-logo-h: 1.875rem;
    --nav-cta-icon: 2.125rem;
    --nav-cta-pad-y: 0.5rem;
    --nav-cta-pad-x: 0.5rem;
    --nav-cta-pad-l: 0.5rem;
    --nav-cta-font: 14px;
    --nav-cta-gap: 0;
    --nav-action-icon: 16px;
  }

  .nav__logo-img {
    max-width: 7.25rem;
  }

  .nav__right {
    gap: 0.3125rem;
  }

  .nav__cta-label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  .nav__cta {
    justify-content: center;
    padding: var(--nav-cta-pad-y) var(--nav-cta-pad-x);
    min-width: calc(var(--nav-cta-icon) + var(--nav-cta-pad-y) * 2 + 3px);
  }
}

@media (max-width: 359px) {
  .nav__right {
    gap: 0.25rem;
  }
}

.sticky-nav .nav__logo-img {
  filter: brightness(0) invert(1);
}

.sticky-nav .nav__cta:not(.nav__cta--meeting) {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.38);
}

.sticky-nav .nav__cta:not(.nav__cta--meeting):hover {
  border-color: rgba(255, 255, 255, 0.65);
  background: rgba(255, 255, 255, 0.08);
}

.sticky-nav .nav__cta:not(.nav__cta--meeting) .nav__cta-icon {
  background: #000;
  color: #fff;
}

.sticky-nav .nav__menu-btn {
  border-color: rgba(255, 255, 255, 0.38);
  color: #fff;
}

.sticky-nav .nav__menu-btn:hover {
  border-color: rgba(255, 255, 255, 0.65);
  background: rgba(255, 255, 255, 0.08);
}

/* —— Overlay sheet motion (menü & teklif) —— */
:root {
  --overlay-enter: 820ms;
  --overlay-exit: 480ms;
  --overlay-ease-enter: cubic-bezier(0.16, 1, 0.3, 1);
  --overlay-ease-exit: cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes mobile-menu-sheet-enter {
  from {
    transform: translate3d(0, calc(100% + var(--menu-gap, 0.75rem)), 0) scale(0.976);
  }

  to {
    transform: translate3d(0, 0, 0) scale(1);
  }
}

@keyframes mobile-menu-backdrop-enter {
  from {
    background: rgba(0, 0, 0, 0);
    backdrop-filter: blur(0);
    -webkit-backdrop-filter: blur(0);
  }

  to {
    background: rgba(0, 0, 0, 0.52);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }
}

@keyframes mobile-menu-inner-enter {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes mobile-menu-close-enter {
  from {
    opacity: 0;
    transform: scale(0.9);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

.mobile-menu {
  --menu-enter: 380ms;
  --menu-inner-enter: 260ms;
  --menu-inner-delay: 0ms;
  transition: visibility 0s var(--overlay-exit);
}

.quote-modal,
.meeting-modal {
  visibility: hidden;
}

.mobile-menu.is-open,
.mobile-menu.is-closing,
.mobile-menu.is-opening {
  visibility: visible;
  transition: visibility 0s 0s;
}

.quote-modal.is-open,
.quote-modal.is-closing,
.quote-modal.is-opening,
.meeting-modal.is-open,
.meeting-modal.is-closing,
.meeting-modal.is-opening {
  visibility: visible;
}

.mobile-menu.is-closing,
.mobile-menu.is-opening,
.quote-modal.is-closing,
.quote-modal.is-opening,
.meeting-modal.is-closing,
.meeting-modal.is-opening {
  pointer-events: none;
}

.mobile-menu__backdrop {
  background: rgba(0, 0, 0, 0);
  backdrop-filter: blur(0);
  -webkit-backdrop-filter: blur(0);
  transition:
    background var(--menu-enter, 380ms) var(--overlay-ease-enter),
    backdrop-filter var(--menu-enter, 380ms) var(--overlay-ease-enter),
    -webkit-backdrop-filter var(--menu-enter, 380ms) var(--overlay-ease-enter);
}

.quote-modal__backdrop,
.meeting-modal__backdrop {
  background: rgba(0, 0, 0, 0);
  backdrop-filter: blur(0);
  -webkit-backdrop-filter: blur(0);
  transition:
    background var(--overlay-enter) var(--overlay-ease-enter),
    backdrop-filter var(--overlay-enter) var(--overlay-ease-enter),
    -webkit-backdrop-filter var(--overlay-enter) var(--overlay-ease-enter);
}

.mobile-menu.is-open:not(.is-closing) .mobile-menu__backdrop {
  animation: mobile-menu-backdrop-enter var(--menu-enter, 380ms) var(--overlay-ease-enter) both;
  transition: none;
}

.quote-modal.is-open .quote-modal__backdrop,
.meeting-modal.is-open .meeting-modal__backdrop {
  background: rgba(0, 0, 0, 0.52);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.mobile-menu.is-closing .mobile-menu__backdrop {
  animation: none;
  background: rgba(0, 0, 0, 0);
  backdrop-filter: blur(0);
  -webkit-backdrop-filter: blur(0);
  transition:
    background var(--overlay-exit) var(--overlay-ease-exit),
    backdrop-filter var(--overlay-exit) var(--overlay-ease-exit),
    -webkit-backdrop-filter var(--overlay-exit) var(--overlay-ease-exit);
}

.quote-modal.is-closing .quote-modal__backdrop,
.meeting-modal.is-closing .meeting-modal__backdrop {
  transition-duration: var(--overlay-exit);
  transition-timing-function: var(--overlay-ease-exit);
}

.quote-modal:not(.is-open):not(.is-closing) .quote-modal__backdrop,
.meeting-modal:not(.is-open):not(.is-closing) .meeting-modal__backdrop {
  background: rgba(0, 0, 0, 0);
  backdrop-filter: blur(0);
  -webkit-backdrop-filter: blur(0);
  transition: none;
}

.mobile-menu__sheet {
  transform: translate3d(0, calc(100% + var(--menu-gap, 0.75rem)), 0) scale(0.976);
  transition: transform var(--menu-enter, 380ms) var(--overlay-ease-enter);
  will-change: transform;
}

.quote-modal__sheet,
.meeting-modal__sheet {
  transform: translate3d(0, calc(100% + var(--menu-gap, 0.75rem)), 0) scale(0.976);
  transition: transform var(--overlay-enter) var(--overlay-ease-enter);
  will-change: transform;
}

.quote-modal__sheet {
  transform: translate3d(0, calc(100% + var(--quote-gap, 0.75rem)), 0) scale(0.976);
}

.meeting-modal__sheet {
  transform: translate3d(0, calc(100% + var(--meeting-gap, 0.75rem)), 0) scale(0.976);
}

.mobile-menu.is-open:not(.is-closing) .mobile-menu__sheet {
  animation: mobile-menu-sheet-enter var(--menu-enter, 380ms) var(--overlay-ease-enter) both;
  transition: none;
  transform: translate3d(0, 0, 0) scale(1);
}

.quote-modal.is-open .quote-modal__sheet,
.meeting-modal.is-open .meeting-modal__sheet {
  transform: translate3d(0, 0, 0) scale(1);
}

.mobile-menu.is-closing .mobile-menu__sheet {
  animation: none;
  transition: transform var(--overlay-exit) var(--overlay-ease-exit);
  transform: translate3d(0, calc(100% + var(--menu-gap, 0.75rem)), 0) scale(0.96);
}

.mobile-menu.is-opening .mobile-menu__sheet {
  animation: none;
  transition: none;
  transform: translate3d(0, calc(100% + var(--menu-gap, 0.75rem)), 0) scale(0.976);
}

.quote-modal.is-open .quote-modal__sheet,
.meeting-modal.is-open .meeting-modal__sheet,
.quote-modal.is-closing .quote-modal__sheet,
.meeting-modal.is-closing .meeting-modal__sheet {
  opacity: 1;
}

.quote-modal:not(.is-open):not(.is-closing):not(.is-opening) .quote-modal__sheet,
.meeting-modal:not(.is-open):not(.is-closing):not(.is-opening) .meeting-modal__sheet {
  opacity: 0;
  transition: none;
}

.quote-modal__sheet,
.meeting-modal__sheet {
  transition:
    transform var(--overlay-enter) var(--overlay-ease-enter),
    opacity var(--overlay-enter) var(--overlay-ease-enter);
}

.quote-modal.is-closing .quote-modal__sheet,
.meeting-modal.is-closing .meeting-modal__sheet {
  transition:
    transform var(--overlay-exit) var(--overlay-ease-exit),
    opacity var(--overlay-exit) var(--overlay-ease-exit);
}

@media (max-width: 767.98px) {
  .quote-modal.is-closing .quote-modal__sheet {
    transform: translate3d(0, calc(100% + var(--quote-gap, 0.75rem)), 0) scale(0.96);
    opacity: 0;
  }

  .meeting-modal.is-closing .meeting-modal__sheet {
    transform: translate3d(0, calc(100% + var(--meeting-gap, 0.75rem)), 0) scale(0.96);
    opacity: 0;
  }
}

@media (min-width: 768px) {
  .quote-modal__sheet,
  .meeting-modal__sheet {
    transform: translate3d(-50%, calc(-50% + 2rem), 0) scale(0.976);
  }

  .quote-modal.is-open .quote-modal__sheet,
  .meeting-modal.is-open .meeting-modal__sheet {
    transform: translate3d(-50%, -50%, 0) scale(1);
  }

  .quote-modal.is-closing .quote-modal__sheet,
  .meeting-modal.is-closing .meeting-modal__sheet {
    transform: translate3d(-50%, calc(-50% + 1.25rem), 0) scale(0.94);
    opacity: 0;
  }
}

.mobile-menu__inner {
  opacity: 0;
  transform: translateY(10px);
  transition:
    opacity var(--menu-inner-enter, 260ms) var(--overlay-ease-enter) var(--menu-inner-delay, 40ms),
    transform var(--menu-inner-enter, 260ms) var(--overlay-ease-enter) var(--menu-inner-delay, 40ms);
}

.quote-modal__scroll,
.meeting-modal__scroll {
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity 560ms var(--overlay-ease-enter) 160ms,
    transform 560ms var(--overlay-ease-enter) 160ms;
}

.mobile-menu.is-open:not(.is-closing) .mobile-menu__inner {
  animation: mobile-menu-inner-enter var(--menu-inner-enter, 260ms) var(--overlay-ease-enter)
    var(--menu-inner-delay, 0ms) both;
  opacity: 1;
  transform: translateY(0);
}

.quote-modal.is-open .quote-modal__scroll,
.meeting-modal.is-open .meeting-modal__scroll {
  opacity: 1;
  transform: translateY(0);
}

.mobile-menu.is-closing .mobile-menu__inner {
  opacity: 0;
  transform: translateY(6px);
  transition-delay: 0ms;
  transition-duration: 200ms;
  transition-timing-function: var(--overlay-ease-exit);
}

/* Teklif & toplantı: içerik sheet ile birlikte kapanır */
.quote-modal.is-open .quote-modal__scroll,
.quote-modal.is-closing .quote-modal__scroll,
.meeting-modal.is-open .meeting-modal__scroll,
.meeting-modal.is-closing .meeting-modal__scroll {
  opacity: 1;
  transform: none;
  transition: none;
}

.quote-modal:not(.is-open):not(.is-closing) .quote-modal__scroll,
.meeting-modal:not(.is-open):not(.is-closing) .meeting-modal__scroll {
  opacity: 0;
  transition: none;
}

.meeting-modal.is-closing .meeting-modal__flow-track {
  transition: none;
}

.mobile-menu__close {
  opacity: 0;
  transform: scale(0.9);
  transition:
    opacity 220ms var(--overlay-ease-enter) 70ms,
    transform 220ms var(--overlay-ease-enter) 70ms,
    border-color 200ms ease,
    background 200ms ease;
}

.quote-modal__close,
.meeting-modal__close {
  opacity: 0;
  transform: scale(0.9);
  transition:
    opacity 420ms var(--overlay-ease-enter) 240ms,
    transform 420ms var(--overlay-ease-enter) 240ms,
    border-color 200ms ease,
    background 200ms ease;
}

.mobile-menu.is-open:not(.is-closing) .mobile-menu__close {
  animation: mobile-menu-close-enter 220ms var(--overlay-ease-enter) 70ms both;
  opacity: 1;
  transform: scale(1);
}

.quote-modal.is-open .quote-modal__close,
.meeting-modal.is-open .meeting-modal__close {
  opacity: 1;
  transform: scale(1);
}

.mobile-menu.is-closing .mobile-menu__close {
  opacity: 0;
  transform: scale(0.94);
  transition-delay: 0ms;
  transition-duration: 280ms;
  transition-timing-function: var(--overlay-ease-exit);
}

.quote-modal.is-closing .quote-modal__close,
.meeting-modal.is-closing .meeting-modal__close {
  opacity: 1;
  transform: scale(1);
  transition: none;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --overlay-enter: 1ms;
    --overlay-exit: 1ms;
  }

  .mobile-menu.is-open:not(.is-closing) .mobile-menu__sheet,
  .mobile-menu.is-open:not(.is-closing) .mobile-menu__backdrop,
  .mobile-menu.is-open:not(.is-closing) .mobile-menu__inner,
  .mobile-menu.is-open:not(.is-closing) .mobile-menu__close {
    animation: none;
  }

  .mobile-menu__inner,
  .quote-modal__scroll,
  .meeting-modal__scroll,
  .mobile-menu__close,
  .quote-modal__close,
  .meeting-modal__close {
    transition: none;
    opacity: 1;
    transform: none;
  }
}

/* Site menu (tüm ekranlar) */
.mobile-menu {
  --menu-gap: 0.75rem;
  position: fixed;
  inset: 0;
  z-index: 110;
  overflow: hidden;
  pointer-events: none;
  visibility: hidden;
}

@media (min-width: 640px) {
  .mobile-menu {
    --menu-gap: 1rem;
  }
}

@media (min-width: 1024px) {
  .mobile-menu {
    --menu-gap: 1.25rem;
  }
}

.mobile-menu.is-open {
  pointer-events: auto;
}

.mobile-menu__backdrop {
  position: absolute;
  inset: 0;
}

.mobile-menu__sheet {
  position: absolute;
  inset: var(--menu-gap);
  display: flex;
  flex-direction: column;
  border-radius: 1.25rem;
  background: #fff;
  overflow: hidden;
}

.mobile-menu__inner {
  position: relative;
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 0;
  padding: 3rem 1.5rem 1.5rem;
  overflow: hidden;
}

.mobile-menu__viewport {
  position: relative;
  display: flex;
  flex: 1;
  align-items: center;
  width: 100%;
  min-height: 0;
  overflow: hidden;
}

.mobile-menu__track {
  display: flex;
  flex: none;
  width: auto;
  height: 100%;
  transform: translate3d(0, 0, 0);
  transition: transform 980ms cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform;
}

.mobile-menu__panel {
  display: flex;
  flex: 0 0 var(--menu-panel-size, 100%);
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: var(--menu-panel-size, 100%);
  min-width: var(--menu-panel-size, 100%);
  min-height: 0;
  padding: 0 0.25rem;
  overflow: hidden;
}

.mobile-menu__panel--solutions,
.mobile-menu__panel--solutions-detail {
  justify-content: center;
  overflow-y: auto;
}

.mobile-menu__panel-body {
  --menu-row: min(100%, 22rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: var(--menu-row);
  opacity: 0;
  transform: translateY(18px) scale(0.985);
  transition:
    opacity 780ms cubic-bezier(0.16, 1, 0.3, 1) 160ms,
    transform 780ms cubic-bezier(0.16, 1, 0.3, 1) 160ms;
}

.mobile-menu__track[data-step='1'] .mobile-menu__panel--solutions .mobile-menu__panel-body,
.mobile-menu__track[data-step='2'] .mobile-menu__panel--solutions-detail .mobile-menu__panel-body {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.mobile-menu__panel-eyebrow {
  margin: 0 0 0.375rem;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #9ca3af;
  text-align: center;
}

.mobile-menu__panel-lead {
  margin: 0 0 1.25rem;
  max-width: 18rem;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.45;
  color: #6b7280;
  text-align: center;
}

.mobile-menu__back {
  position: absolute;
  top: 1.25rem;
  left: 1.25rem;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  height: 2.5rem;
  padding: 0 0.875rem 0 0.625rem;
  border: 1.5px solid rgba(17, 24, 39, 0.12);
  border-radius: 9999px;
  background: transparent;
  color: #111827;
  font: inherit;
  font-size: 0.9375rem;
  font-weight: 500;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateX(-6px);
  transition:
    color 200ms ease,
    background 200ms ease,
    border-color 200ms ease,
    opacity 220ms var(--overlay-ease-enter) 70ms,
    transform 220ms var(--overlay-ease-enter) 70ms,
    visibility 0s linear 220ms;
}

.mobile-menu.is-subpanel .mobile-menu__back {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(0);
  transition:
    color 200ms ease,
    background 200ms ease,
    border-color 200ms ease,
    opacity 220ms var(--overlay-ease-enter) 70ms,
    transform 220ms var(--overlay-ease-enter) 70ms,
    visibility 0s linear 0s;
}

.mobile-menu__back:hover {
  border-color: rgba(17, 24, 39, 0.28);
  background: rgba(17, 24, 39, 0.04);
  color: #111827;
}

.mobile-menu__panel-nav {
  --menu-row: min(100%, 22rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.375rem;
  width: 100%;
}

.mobile-menu__panel-link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
  width: 100%;
  padding: 0.625rem 1.25rem;
  border: none;
  border-radius: 0.875rem;
  background: none;
  color: #111827;
  font: inherit;
  font-size: clamp(1.625rem, 5.5vw, 2.25rem);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.1;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  opacity: 0;
  transform: translateY(10px);
  transition:
    opacity 560ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 560ms cubic-bezier(0.16, 1, 0.3, 1),
    background 280ms ease,
    color 280ms ease;
}

.mobile-menu__panel--solutions.is-revealed .mobile-menu__panel-link {
  opacity: 1;
  transform: translateY(0);
}

.mobile-menu__panel--solutions.is-revealed .mobile-menu__panel-link:nth-child(1) {
  transition-delay: 200ms;
}

.mobile-menu__panel--solutions.is-revealed .mobile-menu__panel-link:nth-child(2) {
  transition-delay: 300ms;
}

.mobile-menu__panel--solutions.is-revealed .mobile-menu__panel-link:nth-child(3) {
  transition-delay: 400ms;
}

.mobile-menu__panel--solutions.is-revealed .mobile-menu__panel-link:nth-child(4) {
  transition-delay: 500ms;
}

.mobile-menu__panel-link:hover {
  opacity: 0.55;
  transform: translateY(-1px);
}

.mobile-menu__panel--solutions.is-revealed .mobile-menu__panel-link:hover {
  opacity: 0.55;
}

.mobile-menu__panel-link--all {
  margin-top: 0.5rem;
  font-size: clamp(1.375rem, 4.75vw, 1.875rem);
  color: #6b7280;
}

.mobile-menu__panel-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  margin-bottom: 1.5rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid #eceef1;
}

.mobile-menu__panel-title {
  width: 100%;
  margin: 0 0 0.5rem;
  padding: 0 0.5rem;
  font-size: clamp(1.5rem, 4.5vw, 2rem);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.15;
  color: #111827;
  text-align: center;
}

.mobile-menu__panel-desc {
  margin: 0 0 1.25rem;
  padding: 0 0.5rem;
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.5;
  color: #6b7280;
  text-align: center;
}

.mobile-menu__panel-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

.mobile-menu__panel-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.875rem;
  width: 100%;
  padding: 1rem 1.125rem;
  border: 1px solid #e5e7eb;
  border-radius: 1rem;
  background: linear-gradient(135deg, #fafafa 0%, #fff 55%, #f9fafb 100%);
  box-shadow: 0 1px 2px rgba(17, 24, 39, 0.04);
  color: inherit;
  text-decoration: none;
  opacity: 0;
  transform: translateY(12px);
  transition:
    opacity 620ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 620ms cubic-bezier(0.16, 1, 0.3, 1),
    border-color 320ms ease,
    box-shadow 320ms ease,
    background 320ms ease;
}

.mobile-menu__panel--solutions-detail.is-revealed .mobile-menu__panel-item {
  opacity: 1;
  transform: translateY(0);
}

.mobile-menu__panel--solutions-detail.is-revealed .mobile-menu__panel-item:nth-child(1) {
  transition-delay: 240ms;
}

.mobile-menu__panel--solutions-detail.is-revealed .mobile-menu__panel-item:nth-child(2) {
  transition-delay: 360ms;
}

.mobile-menu__panel--solutions-detail.is-revealed .mobile-menu__panel-item:nth-child(3) {
  transition-delay: 480ms;
}

.mobile-menu__panel--solutions-detail.is-revealed .mobile-menu__panel-item:nth-child(4) {
  transition-delay: 600ms;
}

.mobile-menu__panel-item:hover {
  border-color: #d1d5db;
  background: #fff;
  box-shadow: 0 12px 32px rgba(17, 24, 39, 0.08);
  transform: translateY(-2px);
}

.mobile-menu__panel--solutions-detail.is-revealed .mobile-menu__panel-item:hover {
  transform: translateY(-2px);
}

.mobile-menu__panel-item-text {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  min-width: 0;
  text-align: left;
}

.mobile-menu__panel-item-label {
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.25;
  color: #111827;
}

.mobile-menu__panel-item-hint {
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.35;
  color: #9ca3af;
}

.mobile-menu__panel-item-arrow {
  flex: none;
  opacity: 0.35;
  transition:
    opacity 220ms ease,
    transform 320ms cubic-bezier(0.22, 1, 0.36, 1);
}

.mobile-menu__panel-item:hover .mobile-menu__panel-item-arrow {
  opacity: 0.85;
  transform: translateX(3px);
}

.mobile-menu__group--solutions .mobile-menu__chevron {
  opacity: 0.45;
  transform: none;
}

.mobile-menu__trigger--forward::after {
  content: none;
}

.mobile-menu__close {
  position: absolute;
  top: 1.25rem;
  right: 1.25rem;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border: 1.5px solid rgba(17, 24, 39, 0.12);
  border-radius: 9999px;
  background: transparent;
  color: #111827;
  cursor: pointer;
  font-family: inherit;
}

.mobile-menu__close:hover {
  border-color: rgba(17, 24, 39, 0.28);
  background: rgba(17, 24, 39, 0.04);
}

.mobile-menu__nav {
  --menu-row: min(100%, 20rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  width: 100%;
}

.mobile-menu__label {
  flex: 1;
  text-align: left;
}

.mobile-menu__link {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: var(--menu-row);
  padding: 0.5rem 1rem;
  font-size: clamp(2.25rem, 7.5vw, 2.875rem);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.05;
  color: #111827;
  text-decoration: none;
  border-radius: 0.75rem;
  transition: opacity 250ms ease;
}

.mobile-menu__link::after {
  content: '';
  flex-shrink: 0;
  width: 1.375rem;
}

.mobile-menu__link:hover {
  opacity: 0.55;
}

.mobile-menu__link--active {
  color: #111827;
}

.mobile-menu__group {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.mobile-menu__trigger {
  display: flex;
  align-items: center;
  width: var(--menu-row);
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  background: none;
  border: none;
  border-radius: 0.75rem;
  font-size: clamp(2.25rem, 7.5vw, 2.875rem);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.05;
  color: #111827;
  cursor: pointer;
  font-family: inherit;
  transition: opacity 250ms ease;
}

.mobile-menu__trigger:hover {
  opacity: 0.55;
}

.mobile-menu__group.is-open .mobile-menu__trigger {
  color: #111827;
}

.mobile-menu__chevron {
  flex-shrink: 0;
  width: 1.375rem;
  height: 1.375rem;
  opacity: 0.45;
  transition:
    transform 300ms cubic-bezier(0.25, 0.1, 0.25, 1),
    opacity 250ms ease;
}

.mobile-menu__group.is-open .mobile-menu__chevron {
  transform: rotate(180deg);
  opacity: 0.65;
}

.mobile-menu__sub {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: var(--menu-row);
  padding-left: 1rem;
  max-height: 0;
  overflow: hidden;
  transition: max-height 350ms cubic-bezier(0.25, 0.1, 0.25, 1);
}

.mobile-menu__group.is-open .mobile-menu__sub {
  max-height: 22rem;
}

.mobile-menu__sub a {
  display: block;
  width: 100%;
  padding: 0.5rem 0;
  font-size: 1.125rem;
  font-weight: 500;
  letter-spacing: 0.005em;
  color: #9ca3af;
  text-align: left;
  border-radius: 0.375rem;
  transition: opacity 250ms ease, transform 250ms ease;
}

.mobile-menu__sub a:hover {
  color: #111827;
  transform: translateX(3px);
}

.mobile-menu__group.is-open .mobile-menu__sub a:last-child {
  margin-bottom: 0.375rem;
}

@media (min-width: 640px) {
  .mobile-menu__inner {
    padding: 3.5rem 2rem 2rem;
  }

  .mobile-menu__close {
    top: 1.5rem;
    right: 1.5rem;
  }

  .mobile-menu__back {
    top: 1.5rem;
    left: 1.5rem;
  }

  .mobile-menu__nav {
    --menu-row: 24rem;
    gap: 0.375rem;
  }

  .mobile-menu__link,
  .mobile-menu__trigger {
    font-size: 3.25rem;
    padding-top: 0.5625rem;
    padding-bottom: 0.5625rem;
  }

  .mobile-menu__sub {
    padding-left: 1.125rem;
  }

  .mobile-menu__sub a {
    font-size: 1.25rem;
    padding-top: 0.5625rem;
    padding-bottom: 0.5625rem;
  }

  .mobile-menu__panel-body {
    --menu-row: 24rem;
  }

  .mobile-menu__panel-link {
    font-size: 2.25rem;
    padding-top: 0.5625rem;
    padding-bottom: 0.5625rem;
  }

  .mobile-menu__panel-link--all {
    font-size: 1.875rem;
  }

  .mobile-menu__panel-item-label {
    font-size: 1.0625rem;
  }

  .mobile-menu__panel-item-hint {
    font-size: 0.875rem;
  }
}

@media (min-width: 1024px) {
  .mobile-menu__nav {
    --menu-row: 26rem;
  }

  .mobile-menu__link,
  .mobile-menu__trigger {
    font-size: 3.75rem;
  }

  .mobile-menu__sub a {
    font-size: 1.375rem;
  }

  .mobile-menu__panel-body {
    --menu-row: 26rem;
  }

  .mobile-menu__panel-link {
    font-size: 2.625rem;
  }

  .mobile-menu__panel-item-label {
    font-size: 1.125rem;
  }
}

.mobile-menu__footer {
  flex-shrink: 0;
  display: flex;
  justify-content: center;
  padding: 0 1.5rem 1.75rem;
}

.mobile-menu__social {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
}

.mobile-menu__social a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 1.5px solid rgba(17, 24, 39, 0.1);
  border-radius: 9999px;
  color: #111827;
  text-decoration: none;
  transition: border-color 200ms, background 200ms, opacity 200ms;
}

.mobile-menu__social a:hover {
  border-color: rgba(17, 24, 39, 0.22);
  background: rgba(17, 24, 39, 0.04);
}

.mobile-menu__social-pair {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

@media (min-width: 640px) {
  .mobile-menu__footer {
    padding: 0 2rem 2rem;
  }

  .mobile-menu__social {
    gap: 0.75rem;
  }

  .mobile-menu__social-pair {
    gap: 0.5rem;
  }

  .mobile-menu__social a {
    width: 3rem;
    height: 3rem;
  }
}

/* Hero content */
.hero__body {
  position: relative;
  z-index: 20;
  display: flex;
  flex: 1;
  align-items: center;
  padding: 2.5rem 0 3.5rem;
}

@media (min-width: 640px) {
  .hero__body {
    padding: 3rem 0 4rem;
  }
}

@media (min-width: 1024px) {
  .hero__body {
    padding: 4rem 0 5rem;
  }
}

.hero__content {
  width: 100%;
  max-width: 46rem;
  text-align: left;
}

@media (min-width: 1024px) {
  .hero__content {
    max-width: 52rem;
  }
}

@media (min-width: 1280px) {
  .hero__content {
    max-width: 56rem;
  }
}

.hero__title {
  margin: 0;
  font-size: clamp(3rem, 12vw, 6.25rem);
  font-weight: 600;
  line-height: 0.96;
  letter-spacing: -0.045em;
  color: #ffffff;
  text-wrap: balance;
}

@media (min-width: 640px) {
  .hero__title {
    font-size: clamp(4.125rem, 9vw, 7.5rem);
    line-height: 0.94;
  }
}

@media (min-width: 1024px) {
  .hero__title {
    font-size: clamp(5rem, 7.8vw, 8.5rem);
    line-height: 0.92;
  }
}

.hero__desc {
  margin: 1.625rem 0 0;
  max-width: 38rem;
  font-size: clamp(1.0625rem, 2.4vw, 1.25rem);
  font-weight: 400;
  line-height: 1.68;
  color: rgba(255, 255, 255, 0.68);
}

@media (min-width: 640px) {
  .hero__desc {
    margin-top: 1.875rem;
    max-width: 40rem;
  }
}

@media (min-width: 1024px) {
  .hero__desc {
    margin-top: 2.125rem;
    max-width: 44rem;
    font-size: 1.3125rem;
    line-height: 1.7;
  }
}

.hero__ctas {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
  margin-top: 2.25rem;
}

@media (min-width: 640px) {
  .hero__ctas {
    flex-direction: row;
    align-items: center;
    gap: 1.25rem;
    margin-top: 2.75rem;
  }
}

@media (min-width: 1024px) {
  .hero__ctas {
    margin-top: 3.25rem;
  }
}

.hero__cta.btn-outline {
  padding: 0.6875rem 0.6875rem 0.6875rem 1.5rem;
  font-size: 15px;
}

@media (min-width: 640px) {
  .hero__cta.btn-outline {
    padding-left: 1.75rem;
    font-size: 16px;
  }
}

.hero__cta.btn-outline .btn-roll__icon {
  width: 2rem;
  height: 2rem;
}

@media (min-width: 640px) {
  .hero__cta.btn-outline .btn-roll__icon {
    width: 2.25rem;
    height: 2.25rem;
  }
}

.btn-orange {
  border: none;
  cursor: pointer;
  font-family: inherit;
  border-radius: 9999px;
  background: #f26522;
  padding: 0.5rem 0.5rem 0.5rem 1.25rem;
  font-size: 13px;
  color: #fff;
  transition: background 300ms;
}

.btn-black {
  border: none;
  cursor: pointer;
  font-family: inherit;
  border-radius: 9999px;
  background: #000;
  padding: 0.5rem 0.5rem 0.5rem 1.25rem;
  font-size: 13px;
  color: #fff;
  transition: background 300ms;
}

.btn-black:hover {
  background: #1a1a1a;
}

@media (min-width: 640px) {
  .btn-black {
    padding-left: 1.5rem;
    font-size: 14px;
  }
}

.btn-black .btn-roll__icon {
  width: 1.75rem;
  height: 1.75rem;
  background: #fff;
  color: #000;
}

@media (min-width: 640px) {
  .btn-black .btn-roll__icon {
    width: 2rem;
    height: 2rem;
  }
}

.btn-orange:hover {
  background: #e05a1a;
}

@media (min-width: 640px) {
  .btn-orange {
    padding-left: 1.5rem;
    font-size: 14px;
  }
}

.btn-orange .btn-roll__icon {
  width: 1.75rem;
  height: 1.75rem;
  background: #fff;
  color: #f26522;
}

@media (min-width: 640px) {
  .btn-orange .btn-roll__icon {
    width: 2rem;
    height: 2rem;
  }
}

.btn-outline {
  border: 1.5px solid rgba(255, 255, 255, 0.72);
  border-radius: 9999px;
  background: transparent;
  padding: 0.5625rem 0.5625rem 0.5625rem 1.375rem;
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  transition:
    background 320ms ease,
    border-color 320ms ease,
    color 320ms ease;
}

.btn-outline:hover {
  border-color: #fff;
  background: rgba(255, 255, 255, 0.07);
  color: #fff;
}

@media (min-width: 640px) {
  .btn-outline {
    padding-left: 1.625rem;
    font-size: 15px;
  }
}

.btn-outline .btn-roll__icon {
  width: 1.875rem;
  height: 1.875rem;
  border: 1px solid rgba(255, 255, 255, 0.45);
  background: transparent;
  color: #fff;
}

@media (min-width: 640px) {
  .btn-outline .btn-roll__icon {
    width: 2.125rem;
    height: 2.125rem;
  }
}

.hero__cta.btn-outline {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.hero__cta.btn-outline:hover {
  background: rgba(255, 255, 255, 0.14);
  border-color: #fff;
}

.hero__cta.btn-outline .btn-roll__icon {
  border-color: rgba(255, 255, 255, 0.38);
  background: rgba(255, 255, 255, 0.06);
}

.hero__cta.btn-outline:hover .btn-roll__icon {
  border-color: rgba(255, 255, 255, 0.65);
  background: rgba(255, 255, 255, 0.1);
}

.partner-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  border-radius: 4px;
  background: #fff;
  padding: 0.5rem 0.75rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  transition: box-shadow 300ms;
}

.partner-badge:hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}

@media (min-width: 640px) {
  .partner-badge {
    gap: 0.75rem;
    padding: 0.5rem 1rem;
  }
}

.partner-badge__icon {
  width: 1.25rem;
  height: 1.25rem;
  flex-shrink: 0;
  fill: #e8704e;
}

@media (min-width: 640px) {
  .partner-badge__icon {
    width: 1.5rem;
    height: 1.5rem;
  }
}

.partner-badge__text {
  font-size: 13px;
  font-weight: 500;
  color: #111827;
}

@media (min-width: 640px) {
  .partner-badge__text {
    font-size: 14px;
  }
}

/* —— About (Section 1) —— */
.about {
  overflow: hidden;
  background: #fff;
  padding: 4rem 0 3rem;
}

@media (min-width: 640px) {
  .about {
    padding: 5rem 0 4rem;
  }
}

@media (min-width: 1024px) {
  .about {
    padding: 8rem 0 6rem;
  }
}

.about__title {
  margin: 0 0 3rem;
  padding: 0 1.25rem;
  font-size: clamp(1.5rem, 4vw, 3.2rem);
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: #111827;
}

@media (min-width: 640px) {
  .about__title {
    margin-bottom: 4rem;
    padding: 0 2rem;
  }
}

@media (min-width: 1024px) {
  .about__title {
    margin-bottom: 7rem;
    padding: 0 3rem;
  }
}

.about__title br {
  display: none;
}

@media (min-width: 640px) {
  .about__title br {
    display: block;
  }
}

.about__mobile {
  padding: 0 1.25rem;
}

@media (min-width: 640px) {
  .about__mobile {
    padding: 0 2rem;
  }
}

@media (min-width: 1024px) {
  .about__mobile {
    display: none;
  }
}

.about__mobile p {
  max-width: 36rem;
  margin: 0;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.6;
  color: #111827;
}

@media (min-width: 640px) {
  .about__mobile p {
    font-size: 17px;
  }
}

.about__mobile .btn-orange {
  margin-top: 1.5rem;
  background: #111827;
  color: #fff;
  transition: background 300ms;
}

.about__mobile .btn-orange:hover {
  background: #1f2937;
}

.about__mobile .btn-orange .btn-roll__icon {
  background: #fff;
  color: #111827;
}

.about__desktop .btn-orange,
.about__desktop-cta.btn-orange {
  background: #111827;
  color: #fff;
  transition: background 300ms;
}

.about__desktop .btn-orange:hover,
.about__desktop-cta.btn-orange:hover {
  background: #1f2937;
}

.about__desktop .btn-orange .btn-roll__icon,
.about__desktop-cta.btn-orange .btn-roll__icon {
  background: #fff;
  color: #111827;
}

.about__images-mobile {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-top: 2.5rem;
}

@media (min-width: 640px) {
  .about__images-mobile {
    flex-direction: row;
    gap: 1.25rem;
    margin-top: 3rem;
  }
}

.about__images-mobile img:first-child {
  width: 100%;
  aspect-ratio: 438 / 346;
  border-radius: 0.75rem;
  object-fit: cover;
}

@media (min-width: 640px) {
  .about__images-mobile img:first-child {
    width: 45%;
    border-radius: 1rem;
  }
}

.about__images-mobile img:last-child {
  width: 100%;
  aspect-ratio: 900 / 600;
  border-radius: 0.75rem;
  object-fit: cover;
}

@media (min-width: 640px) {
  .about__images-mobile img:last-child {
    width: 55%;
    border-radius: 1rem;
  }
}

.about__desktop {
  display: none;
  grid-template-columns: minmax(0, 0.92fr) minmax(15rem, 21rem) minmax(0, 1.2fr);
  align-items: center;
  gap: clamp(1.25rem, 2.5vw, 2.25rem);
  padding: 0 1.25rem;
}

@media (min-width: 1024px) {
  .about__desktop {
    display: grid;
    padding: 0 3rem;
  }
}

@media (min-width: 1280px) {
  .about__desktop {
    grid-template-columns: minmax(0, 1fr) minmax(17rem, 23rem) minmax(0, 1.35fr);
    gap: clamp(1.5rem, 3vw, 2.75rem);
  }
}

.about__desktop-figure {
  position: relative;
  margin: 0;
}

.about__desktop-figure img {
  display: block;
  width: 100%;
  border-radius: 1.125rem;
  object-fit: cover;
  box-shadow: 0 22px 44px rgba(17, 24, 39, 0.08);
  transition: transform 600ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 600ms ease;
}

.about__desktop:hover .about__desktop-figure img {
  box-shadow: 0 28px 52px rgba(17, 24, 39, 0.11);
}

.about__desktop-figure--left {
  align-self: end;
  transform: translateY(1.75rem);
}

.about__desktop-figure--right {
  align-self: start;
}

.about__desktop-figure--left img {
  aspect-ratio: 438 / 346;
}

.about__desktop-figure--right img {
  aspect-ratio: 3 / 2;
}

.about__desktop-figure::after {
  content: '';
  position: absolute;
  inset: 0.875rem -0.875rem -0.875rem 0.875rem;
  border: 1px solid rgba(17, 24, 39, 0.09);
  border-radius: 1.125rem;
  pointer-events: none;
}

.about__desktop-center {
  display: flex;
  justify-content: center;
  align-self: center;
  z-index: 1;
}

.about__desktop-panel {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.375rem;
  width: 100%;
  padding: 1.75rem 1.625rem 1.875rem;
  border: 1px solid rgba(17, 24, 39, 0.08);
  border-radius: 1.25rem;
  background:
    linear-gradient(165deg, rgba(255, 255, 255, 0.98), rgba(249, 250, 251, 0.98));
  box-shadow:
    0 24px 48px rgba(17, 24, 39, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.about__desktop-panel::before {
  content: '';
  display: block;
  width: 2.25rem;
  height: 2px;
  border-radius: 9999px;
  background: #f26522;
}

.about__desktop-copy {
  margin: 0;
  max-width: 16.5rem;
  font-size: 17px;
  font-weight: 500;
  line-height: 1.65;
  letter-spacing: -0.015em;
  color: #4b5563;
}

@media (min-width: 1280px) {
  .about__desktop-copy {
    max-width: 18rem;
    font-size: 18px;
  }
}

.about__desktop-cta {
  margin-top: 0.125rem;
}

@media (prefers-reduced-motion: reduce) {
  .about__desktop-figure img {
    transition: none;
  }
}

/* —— Manifesto —— */
.manifesto {
  background: #fff;
  padding: 4.5rem 0;
  text-align: center;
}

.manifesto .container {
  width: 100%;
}

.manifesto__block {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.manifesto__title {
  margin: 0;
  width: 100%;
  text-align: center;
  font-size: clamp(2rem, 6vw, 3.75rem);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: #111827;
}

.manifesto__headline {
  display: block;
  width: 100%;
}

.manifesto__headline-anchor {
  position: relative;
  display: block;
  width: fit-content;
  max-width: 100%;
  margin-inline: auto;
  padding-left: calc(var(--picker-max-width, 0px) + 0.4em);
}

.manifesto__picker {
  position: absolute;
  left: 0;
  bottom: 0;
  overflow: hidden;
  height: 1.25em;
  line-height: 1.25;
  color: #111827;
}

.manifesto__track {
  position: relative;
  display: block;
  transition: transform 600ms cubic-bezier(0.25, 0.1, 0.25, 1);
  will-change: transform;
}

.manifesto__word {
  position: absolute;
  right: 0;
  left: auto;
  height: 1.25em;
  line-height: 1.25em;
  white-space: nowrap;
  color: #111827;
}

.manifesto__static {
  display: inline-block;
  color: #6b7280;
  line-height: 1.25;
}

@media (max-width: 767px) {
  .manifesto__static {
    white-space: normal;
    text-wrap: balance;
  }
}

@media (min-width: 768px) {
  .manifesto__static {
    white-space: nowrap;
  }
}

@media (min-width: 768px) {
  .manifesto {
    padding: 6rem 0;
  }
}

@media (min-width: 1024px) {
  .manifesto {
    padding: 7rem 0;
  }
}

.manifesto__text {
  margin: 1.75rem auto 0;
  max-width: 30rem;
  width: 100%;
  text-align: center;
  font-size: 15px;
  line-height: 1.7;
  color: #6b7280;
}

@media (min-width: 640px) {
  .manifesto__text {
    margin-top: 2rem;
    max-width: 34rem;
    font-size: 16px;
  }
}

@media (min-width: 1024px) {
  .manifesto__text {
    max-width: 38rem;
    font-size: 17px;
  }
}

/* —— Çözümler —— */
.solutions {
  position: relative;
  overflow: visible;
  background: #fff;
  padding: 4rem 0;
}

.solutions__shader,
.solutions__overlay {
  display: none;
}

@media (min-width: 640px) {
  .solutions {
    padding: 5rem 0;
  }
}

@media (min-width: 1024px) {
  .solutions {
    padding: 7rem 0;
  }
}

.solutions__header {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  margin-bottom: 3rem;
}

@media (min-width: 640px) {
  .solutions__header {
    margin-bottom: 3.5rem;
  }
}

@media (min-width: 1024px) {
  .solutions__header {
    grid-template-columns: 1.15fr 1fr;
    align-items: end;
    gap: 3rem;
    margin-bottom: 5rem;
  }
}

@media (min-width: 1280px) {
  .solutions__header {
    gap: 4rem;
  }
}

.solutions__title {
  margin: 0;
  max-width: 48rem;
  font-size: clamp(1.5rem, 4vw, 3.2rem);
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: #111827;
}

.solutions__header-side {
  padding-bottom: 0.25rem;
}

.solutions__intro {
  margin: 0;
  max-width: 36rem;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.6;
  color: #4b5563;
}

@media (min-width: 640px) {
  .solutions__intro {
    font-size: 17px;
  }
}

@media (min-width: 1024px) {
  .solutions__intro {
    font-size: 16px;
    line-height: 1.65;
  }
}

.solutions__cta {
  margin-top: 1.5rem;
}

.solutions .btn-orange {
  background: #111827;
}

.solutions .btn-orange:hover {
  background: #0a0a0f;
}

.solutions .btn-orange .btn-roll__icon {
  color: #111827;
}

@media (min-width: 640px) {
  .solutions__cta {
    margin-top: 2rem;
  }
}

/* Hizmet kartları — düz coverflow, sürükleme (ana sayfa #cozumler) */
.solutions__deck {
  margin-top: 2rem;
  padding: 0 clamp(0.25rem, 2vw, 1rem) 2rem;
  background: transparent;
  overflow: visible;
}

@media (min-width: 1024px) {
  .solutions__deck {
    margin-top: 2.75rem;
    padding-bottom: 2.25rem;
  }
}

.services-stage-host {
  width: 100%;
}

.services-stage {
  --stage-card-w: min(26rem, 94vw);
  width: 100%;
}

@media (min-width: 768px) {
  .services-stage {
    --stage-card-w: min(31rem, 72vw);
  }
}

@media (min-width: 1024px) {
  .services-stage {
    --stage-card-w: 34rem;
  }
}

.services-stage__bar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 1rem;
  padding: 0 1.25rem 1rem;
}

@media (min-width: 640px) {
  .services-stage__bar {
    padding-inline: 1.75rem;
  }
}

.services-stage__arrows {
  display: flex;
  gap: 0.35rem;
}

.services-stage__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.35rem;
  height: 2.35rem;
  padding: 0;
  border: 1px solid rgba(17, 24, 39, 0.1);
  border-radius: 999px;
  background: #fff;
  color: #111827;
  cursor: pointer;
  transition: border-color 200ms, background 200ms;
}

.services-stage__arrow:hover {
  border-color: rgba(17, 24, 39, 0.22);
  background: #fafafa;
}

.services-stage__window {
  position: relative;
  height: clamp(24rem, 62vw, 32rem);
  overflow: visible;
  cursor: grab;
  touch-action: pan-y pinch-zoom;
  user-select: none;
  outline: none;
}

.services-stage__window::before,
.services-stage__window::after {
  content: none;
  display: none;
}

.services-stage__window.is-dragging {
  cursor: grabbing;
}

.services-stage__track {
  position: relative;
  width: 100%;
  height: 100%;
}

.services-stage__slide {
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--stage-card-w);
  will-change: transform, opacity;
}

.services-stage__card {
  position: relative;
  display: block;
  min-height: 20.5rem;
  padding: 0;
  border-radius: 1.25rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: linear-gradient(168deg, #1a1f2e 0%, #111827 100%);
  text-decoration: none;
  color: inherit;
  overflow: hidden;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.06) inset,
    0 12px 32px rgba(0, 0, 0, 0.22);
  transition:
    box-shadow 280ms cubic-bezier(0.23, 1, 0.32, 1),
    border-color 280ms cubic-bezier(0.23, 1, 0.32, 1),
    filter 420ms cubic-bezier(0.23, 1, 0.32, 1);
}

.services-stage__bg-icon {
  position: absolute;
  right: 1.25rem;
  bottom: 1.25rem;
  top: auto;
  width: clamp(6.5rem, 28%, 9rem);
  height: clamp(6.5rem, 28%, 9rem);
  transform: none;
  color: rgba(255, 255, 255, 0.08);
  pointer-events: none;
  z-index: 0;
}

.services-stage__bg-icon-svg {
  display: block;
  width: 100%;
  height: 100%;
  stroke-width: 1.15;
}

.services-stage__card-body {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
  width: 100%;
  max-width: none;
  min-height: 20.5rem;
  padding: 1.75rem 1.75rem 6.5rem;
}

@media (min-width: 768px) {
  .services-stage__card {
    min-height: 22rem;
    border-radius: 1.35rem;
  }

  .services-stage__card-body {
    min-height: 22rem;
    padding: 2rem 2rem 7.25rem;
  }

  .services-stage__bg-icon {
    right: 1.75rem;
    bottom: 1.75rem;
    width: 9.5rem;
    height: 9.5rem;
  }
}

.services-stage__slide.is-active .services-stage__card {
  border-color: rgba(255, 255, 255, 0.14);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.1) inset,
    0 24px 48px rgba(0, 0, 0, 0.32);
  filter: none;
}

.services-stage__slide.is-side .services-stage__card {
  border-color: rgba(255, 255, 255, 0.06);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.2);
  filter: saturate(0.92) brightness(0.94);
}

.services-stage__slide.is-side .services-stage__story {
  -webkit-line-clamp: 4;
  opacity: 0.85;
}

.services-stage__slide.is-side .services-stage__cta {
  opacity: 0;
  pointer-events: none;
}

.services-stage__slide.is-right.is-side {
  transform-origin: center right;
}

.services-stage__slide.is-left.is-side {
  transform-origin: center left;
}

.services-stage__title {
  margin: 0;
  font-size: clamp(1.4rem, 3vw, 1.75rem);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: #f9fafb;
}

.services-stage__story {
  margin: 0;
  flex: 1;
  width: 100%;
  max-width: 92%;
  font-size: 14px;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.62);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 6;
  overflow: hidden;
}

@media (min-width: 768px) {
  .services-stage__story {
    max-width: 96%;
    font-size: 15px;
    -webkit-line-clamp: 7;
  }
}

.services-stage__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  width: fit-content;
  max-width: 100%;
  margin-top: auto;
  padding: 0.5rem 0.65rem;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  color: #f9fafb;
  white-space: nowrap;
  transition: gap 200ms ease, background 200ms ease, border-color 200ms ease;
}

.services-stage__cta-icon {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 999px;
  background: #f9fafb;
  color: #111827;
}

.services-stage__cta-icon .icon {
  width: 12px;
  height: 12px;
}

@media (hover: hover) and (pointer: fine) {
  .services-stage__slide.is-active .services-stage__card:hover .services-stage__cta {
    gap: 0.55rem;
    border-color: rgba(255, 255, 255, 0.24);
    background: rgba(255, 255, 255, 0.14);
  }
}

.services-stage__foot {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
  margin-top: 1.75rem;
  padding: 1.25rem 0 0;
}

@media (min-width: 640px) {
  .services-stage__foot {
    padding-inline: 1.75rem;
  }
}

.services-stage__eyebrow {
  margin: 0 0 0.35rem;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #9ca3af;
}

.services-stage__active {
  margin: 0;
  font-size: clamp(1.125rem, 2.5vw, 1.375rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: #111827;
}

.services-stage__dots {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  flex-shrink: 0;
}

.services-stage__dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border: none;
  border-radius: 999px;
  background: rgba(17, 24, 39, 0.16);
  cursor: pointer;
  transition: width 240ms ease, background 240ms ease;
}

.services-stage__dot.is-active {
  width: 24px;
  background: #111827;
}

@media (prefers-reduced-motion: reduce) {
  .services-stage__window {
    touch-action: pan-y;
    cursor: default;
  }

  .services-stage__slide {
    transition: opacity 150ms ease !important;
  }
}

.solutions__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
}

@media (min-width: 640px) {
  .solutions__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
  }
}

@media (min-width: 1024px) {
  .solutions__grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
  }
}

@media (min-width: 1280px) {
  .solutions__grid {
    grid-template-columns: repeat(5, 1fr);
    gap: 2rem;
  }
}

.solution-col {
  display: flex;
  flex-direction: column;
  height: 100%;
  border-radius: 1rem;
  border: 1px solid #e5e7eb;
  background: #fff;
  padding: 1.25rem;
  transition:
    background 300ms,
    border-color 300ms,
    box-shadow 300ms;
}

.solution-col:hover {
  border-color: rgba(17, 24, 39, 0.35);
  background: #fafafa;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
}

@media (min-width: 640px) {
  .solution-col {
    padding: 1.5rem;
  }
}

@media (min-width: 1024px) {
  .solution-col {
    border-radius: 1rem;
    padding: 1.75rem 1.5rem;
  }
}

.solution-col__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  margin-bottom: 1rem;
  border-radius: 9999px;
  background: #111827;
  color: #fff;
  transition: background 300ms, transform 300ms;
}

.solution-col:hover .solution-col__icon {
  background: #ffffff;
  color: #111827;
  transform: scale(1.05);
}

@media (min-width: 640px) {
  .solution-col__icon {
    width: 2.75rem;
    height: 2.75rem;
    margin-bottom: 1.25rem;
  }
}

.solution-col h3 {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: #111827;
}

@media (min-width: 640px) {
  .solution-col h3 {
    font-size: 15px;
  }
}

.solution-col p {
  margin: 0.5rem 0 0;
  font-size: 13px;
  line-height: 1.625;
  color: #6b7280;
}

@media (min-width: 640px) {
  .solution-col p {
    margin-top: 0.75rem;
    font-size: 14px;
  }
}

/* —— Case studies —— */
.projects {
  background: #fff;
  padding: 4rem 0;
  scroll-margin-top: var(--sticky-nav-clearance);
}

@media (min-width: 640px) {
  .projects {
    padding: 5rem 0;
  }
}

@media (min-width: 1024px) {
  .projects {
    padding: 7rem 0;
  }
}

.projects--page {
  padding-top: 0;
  padding-bottom: 4rem;
}

@media (min-width: 640px) {
  .projects--page {
    padding-bottom: 5rem;
  }
}

.projects__header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
  margin-bottom: 2.5rem;
  padding: 0 1.25rem;
}

.projects__title {
  margin: 0;
  font-size: clamp(1.75rem, 7vw, 4.2rem);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -0.03em;
  color: #111827;
}

.projects__view-all {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.5rem 0.5rem 1.125rem;
  border: 1.5px solid rgba(17, 24, 39, 0.14);
  border-radius: 9999px;
  font-size: 13px;
  font-weight: 500;
  color: #111827;
  text-decoration: none;
  white-space: nowrap;
  transition: border-color 200ms, background 200ms;
}

.projects__view-all:hover {
  border-color: rgba(17, 24, 39, 0.3);
  background: rgba(17, 24, 39, 0.04);
}

.projects__view-all-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 9999px;
  background: #111827;
  color: #fff;
}

@media (min-width: 640px) {
  .projects__header {
    margin-bottom: 3.5rem;
    padding: 0 2rem;
  }

  .projects__title {
    font-size: clamp(2.5rem, 5vw, 4.2rem);
  }

  .projects__view-all {
    padding-left: 1.25rem;
    font-size: 14px;
  }

  .projects__view-all-icon {
    width: 2rem;
    height: 2rem;
  }
}

@media (min-width: 1024px) {
  .projects__header {
    margin-bottom: 4rem;
    padding: 0 3rem;
  }
}

.projects__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
  padding: 0 1.25rem;
}

@media (min-width: 640px) {
  .projects__grid {
    gap: 1.5rem;
    padding: 0 2rem;
  }
}

@media (min-width: 768px) {
  .projects__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .projects__grid {
    gap: 1.75rem;
    padding: 0 3rem;
  }
}

.projects__empty {
  grid-column: 1 / -1;
  margin: 0;
  padding: 2rem 0;
  font-size: 15px;
  color: #6b7280;
  text-align: center;
}

.project-card__media {
  position: relative;
  overflow: hidden;
  border-radius: 1rem;
  cursor: pointer;
  isolation: isolate;
}

.project-card__media--wide {
  aspect-ratio: 329 / 246;
  background: #1a1d2e;
}

.project-card__media--square {
  aspect-ratio: 1 / 1;
  background: #6b6b6b;
}

.project-card__media video,
.project-card__media img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.project-card__btn-wrap {
  position: absolute;
  left: 1rem;
  bottom: 1rem;
  z-index: 1;
}

.project-card__btn {
  display: flex;
  height: 2.25rem;
  width: 2.25rem;
  align-items: center;
  overflow: hidden;
  border-radius: 9999px;
  transition: width 300ms ease-in-out;
}

.project-card__media:hover .project-card__btn--light {
  width: 148px;
}

.project-card__media:hover .project-card__btn--dark {
  width: 168px;
}

.project-card__btn--light {
  background: #fff;
}

.project-card__btn--dark {
  background: #111827;
}

.project-card__btn-text {
  white-space: nowrap;
  padding-left: 0;
  font-size: 13px;
  font-weight: 500;
  opacity: 0;
  transition: all 300ms;
  transition-delay: 0ms;
}

.project-card__btn--light .project-card__btn-text {
  color: #111827;
}

.project-card__btn--dark .project-card__btn-text {
  color: #fff;
}

.project-card__media:hover .project-card__btn-text {
  padding-left: 0.75rem;
  opacity: 1;
  transition-delay: 100ms;
}

.project-card__btn-icon {
  display: flex;
  margin-left: auto;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  transform: rotate(-45deg);
  transition: transform 300ms ease-in-out;
}

.project-card__media:hover .project-card__btn-icon {
  transform: rotate(0deg);
}

.project-card__desc {
  margin: 1rem 0 0;
  font-size: 13px;
  line-height: 1.625;
  color: #4b5563;
}

@media (min-width: 640px) {
  .project-card__desc {
    font-size: 14px;
  }
}

.project-card__name {
  margin: 0.25rem 0 0;
  font-size: 14px;
  font-weight: 600;
  color: #111827;
}

@media (min-width: 640px) {
  .project-card__name {
    font-size: 15px;
  }
}

.project-card__link {
  display: block;
  color: inherit;
  text-decoration: none;
}

/* —— Drift — scroll process —— */
.drift {
  position: relative;
  isolation: isolate;
  background: #0a0a0f;
  color: #fff;
}

.drift__track {
  height: 300vh;
}

.drift__pin {
  position: sticky;
  top: 98px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: calc(100vh - 98px);
  padding: clamp(0.75rem, 2vw, 1.25rem) clamp(1.25rem, 4vw, 2rem);
  overflow: visible;
  box-sizing: border-box;
}

.drift__backdrop {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.drift__bg-base {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 70% 55% at 80% 18%, rgba(242, 101, 34, 0.06) 0%, transparent 58%),
    radial-gradient(ellipse 55% 45% at 12% 82%, rgba(255, 255, 255, 0.025) 0%, transparent 55%),
    linear-gradient(180deg, #0a0a0f 0%, #070709 50%, #0a0a0f 100%);
}

.drift__bg-swirl {
  position: absolute;
  inset: -35%;
  background: conic-gradient(
    from 200deg at 50% 50%,
    rgba(242, 101, 34, 0) 0deg,
    rgba(242, 101, 34, 0.04) 70deg,
    rgba(255, 255, 255, 0.025) 140deg,
    rgba(242, 101, 34, 0.03) 260deg,
    rgba(242, 101, 34, 0) 360deg
  );
  filter: blur(56px);
  opacity: 0.65;
  animation: drift-swirl-spin 36s linear infinite;
}

.drift__bg-orb {
  position: absolute;
  border-radius: 9999px;
  filter: blur(72px);
  will-change: transform;
}

.drift__bg-orb--1 {
  top: -4%;
  right: -4%;
  width: min(46vw, 24rem);
  height: min(46vw, 24rem);
  background: radial-gradient(circle, rgba(242, 101, 34, 0.22) 0%, rgba(242, 101, 34, 0) 68%);
  animation: drift-orb-1 22s ease-in-out infinite;
}

.drift__bg-orb--2 {
  bottom: 8%;
  left: -8%;
  width: min(50vw, 26rem);
  height: min(50vw, 26rem);
  background: radial-gradient(circle, rgba(255, 140, 66, 0.12) 0%, rgba(255, 140, 66, 0) 70%);
  animation: drift-orb-2 26s ease-in-out infinite;
}

.drift__bg-flutes {
  position: absolute;
  inset: -15% -8%;
  background: repeating-linear-gradient(
    108deg,
    rgba(255, 255, 255, 0) 0,
    rgba(255, 255, 255, 0) 8px,
    rgba(255, 255, 255, 0.018) 8px,
    rgba(255, 255, 255, 0.018) 9px,
    rgba(255, 255, 255, 0) 9px,
    rgba(255, 255, 255, 0) 16px
  );
  opacity: 0.48;
  mask-image: radial-gradient(ellipse 80% 70% at 50% 45%, #000 20%, transparent 75%);
}

.drift__bg-grain {
  position: absolute;
  inset: 0;
  opacity: 0.22;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.45'/%3E%3C/svg%3E");
  background-size: 180px 180px;
  mix-blend-mode: overlay;
}

.drift__bg-vignette {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 88% 78% at 50% 50%, transparent 40%, rgba(0, 0, 0, 0.42) 100%),
    linear-gradient(180deg, rgba(10, 10, 15, 0.25) 0%, transparent 24%, transparent 76%, rgba(10, 10, 15, 0.35) 100%);
}

@keyframes drift-swirl-spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes drift-orb-1 {
  0%,
  100% {
    transform: translate(0, 0) scale(1);
  }

  50% {
    transform: translate(-3%, 4%) scale(1.05);
  }
}

@keyframes drift-orb-2 {
  0%,
  100% {
    transform: translate(0, 0) scale(1);
  }

  50% {
    transform: translate(5%, -3%) scale(1.06);
  }
}

.drift__stage {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  align-content: center;
  gap: clamp(1.25rem, 3vh, 2rem);
  width: 100%;
  min-height: calc(100vh - 98px - clamp(2rem, 5vw, 3rem));
  max-width: 56rem;
  margin: 0 auto;
  padding-inline: clamp(0.5rem, 2vw, 1.25rem);
}

@media (min-width: 1024px) {
  .drift__stage {
    max-width: 68rem;
    gap: clamp(1.5rem, 3.5vh, 2.25rem);
  }
}

.drift__main {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 0;
}

.drift__rail-wrap {
  flex-shrink: 0;
  width: 100%;
}

.drift__rail {
  position: relative;
  width: 100%;
  height: 10px;
  margin: 0;
}

.drift__rail-track {
  position: absolute;
  top: 50%;
  right: 0;
  left: 0;
  height: 2px;
  margin-top: -1px;
  background: rgba(255, 255, 255, 0.16);
  border-radius: 9999px;
}

.drift__rail-fill {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 2px;
  margin-top: -1px;
  border-radius: 9999px;
  background: linear-gradient(90deg, rgba(242, 101, 34, 0.55), #f26522);
  transform-origin: left center;
  transform: scaleX(0);
  will-change: transform;
}

.drift__rail-node {
  position: absolute;
  top: 50%;
  z-index: 1;
  width: 9px;
  height: 9px;
  margin-top: -4.5px;
  border-radius: 9999px;
  background: #0a0a0f;
  border: 2px solid rgba(255, 255, 255, 0.28);
  transition:
    border-color 0.4s ease,
    background 0.4s ease,
    box-shadow 0.4s ease,
    transform 0.4s ease;
}

.drift__rail-node--1 {
  left: 0;
}

.drift__rail-node--2 {
  left: 50%;
  transform: translateX(-50%);
}

.drift__rail-node--3 {
  right: 0;
}

.drift__rail-node.is-passed {
  border-color: rgba(242, 101, 34, 0.55);
  background: rgba(242, 101, 34, 0.25);
}

.drift__rail-node.is-active {
  border-color: #f26522;
  background: #f26522;
  box-shadow: 0 0 16px rgba(242, 101, 34, 0.45);
  transform: scale(1.35);
}

.drift__rail-node--2.is-active {
  transform: translateX(-50%) scale(1.35);
}

.drift__panels {
  position: relative;
  width: 100%;
  min-width: 0;
  min-height: clamp(16rem, 42vh, 22rem);
  overflow: visible;
}

.drift__panel {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  will-change: transform, opacity;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.drift__panel-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.5rem, 4vw, 2.5rem);
  width: 100%;
  max-width: 40rem;
  margin: 0 auto;
  align-items: center;
  justify-items: center;
  text-align: center;
}

@media (min-width: 1024px) {
  .drift__panel-layout {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.85fr);
    gap: clamp(2rem, 4vw, 3rem);
    max-width: none;
    text-align: left;
    justify-items: stretch;
  }
}

.drift__panel-copy {
  position: relative;
  z-index: 1;
  min-width: 0;
}

.drift__panel-visual {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  width: 100%;
  min-height: 7.5rem;
  padding: 1.25rem;
  opacity: 1;
  overflow: visible;
}

@media (min-width: 1024px) {
  .drift__panel-visual {
    min-height: 11rem;
    padding: 1.5rem;
  }
}

.drift__icon-badge {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 5.5rem;
  height: 5.5rem;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.88);
  overflow: visible;
  transition: background 0.5s ease, border-color 0.5s ease, color 0.5s ease;
}

@media (min-width: 900px) {
  .drift__icon-badge {
    width: 6.5rem;
    height: 6.5rem;
  }

  .drift__icon-glyph {
    width: 44px !important;
    height: 44px !important;
  }
}

.drift__panel.is-active .drift__icon-badge {
  background: rgba(242, 101, 34, 0.12);
  border-color: rgba(242, 101, 34, 0.42);
  color: #ffffff;
}

.drift__icon-glyph {
  position: relative;
  z-index: 1;
  display: block;
  overflow: visible;
}

.drift__icon-glyph path,
.drift__icon-glyph circle {
  vector-effect: non-scaling-stroke;
}

.drift__panel.is-active .drift__icon-glyph path,
.drift__panel.is-active .drift__icon-glyph circle {
  stroke-dasharray: none;
  stroke-dashoffset: 0;
}

.drift__panel.is-active .drift__glyph-pupil {
  opacity: 1;
}

.drift__icon-orbit {
  position: absolute;
  z-index: 0;
  inset: 18%;
  pointer-events: none;
}

.drift__icon-orbit-dot {
  position: absolute;
  top: 50%;
  left: 10%;
  width: 5px;
  height: 5px;
  margin-top: -2.5px;
  border-radius: 9999px;
  background: #f26522;
  box-shadow: 0 0 10px rgba(242, 101, 34, 0.75);
  opacity: 0;
}

.drift__icon-ring {
  position: absolute;
  inset: -8px;
  border-radius: 9999px;
  border: 1px solid rgba(242, 101, 34, 0.35);
  opacity: 0;
  pointer-events: none;
}

.drift__panel.is-active .drift__icon-badge .drift__glyph-user--left {
  transform-origin: 9px 12px;
  transform-box: fill-box;
  animation: drift-user-bob 2.8s ease-in-out infinite 0.6s;
}

.drift__panel.is-active .drift__icon-badge .drift__glyph-user--right {
  transform-origin: 18px 12px;
  transform-box: fill-box;
  animation: drift-user-bob 2.8s ease-in-out infinite 1s;
}

.drift__panel.is-active .drift__icon-badge .drift__glyph-pupil {
  transform-origin: 12px 12px;
  transform-box: fill-box;
  animation: drift-pupil-pulse 3s ease-in-out infinite 0.8s;
}

.drift__panel.is-active .drift__icon-badge .drift__glyph-layer--1 {
  transform-box: fill-box;
  transform-origin: center;
  animation: drift-layer-float 3.2s ease-in-out infinite 0.7s;
}

.drift__panel.is-active .drift__icon-badge .drift__glyph-layer--2 {
  transform-box: fill-box;
  transform-origin: center;
  animation: drift-layer-float 3.2s ease-in-out infinite 1.1s;
}

.drift__panel.is-active .drift__icon-badge .drift__glyph-layer--3 {
  transform-box: fill-box;
  transform-origin: center;
  animation: drift-layer-float 3.2s ease-in-out infinite 1.5s;
}

.drift__panel.is-active .drift__icon-badge .drift__icon-orbit-dot {
  animation: drift-orbit-travel 3.2s ease-in-out infinite 0.7s;
}

.drift__panel.is-active .drift__icon-badge .drift__icon-ring {
  animation: drift-ring-pulse 2.5s ease-in-out infinite 0.5s;
}

@keyframes drift-ring-pulse {
  0%,
  100% {
    opacity: 0;
    transform: scale(0.94);
  }

  50% {
    opacity: 0.6;
    transform: scale(1.1);
  }
}

@keyframes drift-orbit-travel {
  0% {
    left: 12%;
    opacity: 0;
  }

  8% {
    opacity: 1;
  }

  45% {
    left: 82%;
    opacity: 1;
  }

  55% {
    left: 82%;
    opacity: 1;
  }

  92% {
    opacity: 1;
  }

  100% {
    left: 12%;
    opacity: 0;
  }
}

@keyframes drift-user-bob {
  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-2px);
  }
}

@keyframes drift-pupil-in {
  to {
    opacity: 1;
  }
}

@keyframes drift-pupil-pulse {
  0%,
  100% {
    transform: scale(1);
  }

  50% {
    transform: scale(0.88);
  }
}

@keyframes drift-layer-float {
  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-3px);
  }
}

.drift__panel-title {
  margin: 0 auto;
  max-width: 13ch;
  font-size: clamp(2.125rem, 7vw, 3.75rem);
  font-weight: 600;
  line-height: 1.02;
  letter-spacing: -0.045em;
  color: #fff;
  text-wrap: balance;
}

@media (min-width: 1024px) {
  .drift__panel-title {
    margin: 0;
  }
}

.drift__panel-title-accent {
  display: block;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.72) 0%, rgba(255, 255, 255, 0.32) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  transition: background 0.5s ease;
}

.drift__panel.is-active .drift__panel-title-accent {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.92) 0%, rgba(255, 255, 255, 0.48) 100%);
  -webkit-background-clip: text;
  background-clip: text;
}

@media (min-width: 640px) {
  .drift__panel-title-accent {
    display: inline;
  }
}

.drift__panel-desc {
  margin: 1.25rem 0 0;
  max-width: 32rem;
  font-size: 14px;
  line-height: 1.75;
  color: rgba(255, 255, 255, 0.52);
  transition: color 0.4s ease;
}

.drift__panel.is-active .drift__panel-desc {
  color: rgba(255, 255, 255, 0.62);
}

@media (min-width: 640px) {
  .drift__panel-desc {
    margin-top: 1.5rem;
    font-size: 15px;
  }
}

.drift__panel-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.75rem;
  margin: 1.5rem 0 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 1024px) {
  .drift__panel-tags {
    margin-top: 1.75rem;
  }
}

.drift__panel-tags li {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.38);
  transition: color 0.35s ease;
}

.drift__panel-tags li:not(:last-child)::after {
  content: '·';
  margin-left: 0.75rem;
  color: rgba(255, 255, 255, 0.2);
  font-weight: 400;
}

.drift__panel.is-active .drift__panel-tags li {
  color: rgba(255, 255, 255, 0.55);
}

.drift__panel.is-active .drift__panel-tags li:not(:last-child)::after {
  color: rgba(255, 255, 255, 0.28);
}

@media (min-width: 640px) {
  .drift__panel-tags li {
    font-size: 13px;
  }
}

.drift__dock {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  padding-bottom: clamp(0.5rem, 2vh, 1.5rem);
}

.drift__dock-items {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.375rem;
  padding: 0.375rem;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(12px);
}

.drift__dock-item {
  padding: 0.5rem 1rem;
  border-radius: 9999px;
  font-size: 13px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.42);
  cursor: pointer;
  transition:
    background 0.45s cubic-bezier(0.22, 1, 0.36, 1),
    color 0.45s ease,
    box-shadow 0.45s ease;
}

.drift__dock-item.is-active {
  background: #fff;
  color: #111827;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
}

@media (min-width: 640px) {
  .drift__dock-item {
    padding: 0.5625rem 1.125rem;
    font-size: 14px;
  }
}

.drift.is-reduced .drift__track {
  height: auto;
}

.drift.is-reduced .drift__pin {
  position: relative;
  min-height: 0;
}

.drift.is-reduced .drift__stage {
  min-height: 0;
}

.drift.is-reduced .drift__main {
  flex-direction: column;
  align-items: stretch;
  padding-top: 0;
}

.drift.is-reduced .drift__rail-wrap {
  display: none;
}

.drift.is-reduced .drift__panels {
  position: static;
  height: auto;
  min-height: 0;
  display: grid;
  gap: 3rem;
}

.drift.is-reduced .drift__panel {
  position: relative;
  inset: auto;
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .drift__bg-swirl,
  .drift__bg-orb {
    animation: none;
  }

  .drift__panel.is-active .drift__icon-badge,
  .drift__panel.is-active .drift__icon-glyph path,
  .drift__panel.is-active .drift__icon-glyph circle,
  .drift__panel.is-active .drift__glyph-user,
  .drift__panel.is-active .drift__glyph-layer,
  .drift__panel.is-active .drift__glyph-eye,
  .drift__panel.is-active .drift__glyph-pupil,
  .drift__panel.is-active .drift__icon-orbit-dot,
  .drift__panel.is-active .drift__icon-ring {
    animation: none !important;
  }

  .drift__panel.is-active .drift__icon-glyph path,
  .drift__panel.is-active .drift__icon-glyph circle {
    stroke-dasharray: none;
    stroke-dashoffset: 0;
  }

  .drift__panel.is-active .drift__glyph-pupil {
    opacity: 1;
  }

  .drift__panel.is-active .drift__icon-orbit-dot {
    opacity: 1;
    left: 50%;
  }

  .drift__track {
    height: auto;
  }

  .drift__pin {
    position: relative;
    min-height: 0;
  }

  .drift__stage {
    min-height: 0;
  }

  .drift__main {
    flex-direction: column;
    align-items: stretch;
    padding-top: 0;
  }

  .drift__rail-wrap {
    display: none;
  }

  .drift__panels {
    position: static;
    height: auto;
    min-height: 0;
    display: grid;
    gap: 3rem;
  }

  .drift__panel {
    position: relative;
    inset: auto;
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }
}

/* —— Blog —— */
.blog {
  background: #fff;
  padding: 4rem 0 5rem;
}

@media (min-width: 640px) {
  .blog {
    padding: 5rem 0 6rem;
  }
}

@media (min-width: 1024px) {
  .blog {
    padding: 7rem 0 8rem;
  }
}

.blog__header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
  margin-bottom: 0;
  padding: 0 1.25rem 2.5rem;
  border-bottom: 1px solid rgba(17, 24, 39, 0.08);
}

@media (min-width: 640px) {
  .blog__header {
    padding: 0 2rem 3rem;
  }
}

@media (min-width: 1024px) {
  .blog__header {
    padding: 0 3rem 3.5rem;
  }
}

.blog__eyebrow {
  margin: 0 0 0.5rem;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(17, 24, 39, 0.42);
}

@media (min-width: 640px) {
  .blog__eyebrow {
    font-size: 12px;
    margin-bottom: 0.625rem;
  }
}

.blog__title {
  margin: 0;
  font-size: clamp(1.75rem, 7vw, 4.2rem);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -0.03em;
  color: #111827;
}

.blog__view-all {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.5rem 0.5rem 1.125rem;
  border: 1.5px solid rgba(17, 24, 39, 0.14);
  border-radius: 9999px;
  font-size: 13px;
  font-weight: 500;
  color: #111827;
  text-decoration: none;
  white-space: nowrap;
  transition: border-color 200ms, background 200ms;
}

.blog__view-all:hover {
  border-color: rgba(17, 24, 39, 0.3);
  background: rgba(17, 24, 39, 0.04);
}

.blog__view-all-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 9999px;
  background: #111827;
  color: #fff;
}

@media (min-width: 640px) {
  .blog__title {
    font-size: clamp(2.5rem, 5vw, 4.2rem);
  }

  .blog__view-all {
    padding-left: 1.25rem;
    font-size: 14px;
  }

  .blog__view-all-icon {
    width: 2rem;
    height: 2rem;
  }
}

.blog__stack {
  padding: 0 1.25rem;
}

@media (min-width: 640px) {
  .blog__stack {
    padding: 0 2rem;
  }
}

@media (min-width: 1024px) {
  .blog__stack {
    padding: 0 3rem;
  }
}

.blog-entry {
  border-bottom: 1px solid rgba(17, 24, 39, 0.08);
}

.blog-entry:last-child {
  border-bottom: none;
}

.blog-entry__link {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  align-items: center;
  padding: 2.25rem 0;
  color: inherit;
  text-decoration: none;
}

@media (min-width: 768px) {
  .blog-entry__link {
    padding: 3rem 0;
  }
}

@media (min-width: 900px) {
  .blog-entry__link {
    grid-template-columns: 1.05fr 0.95fr;
    gap: 2.5rem;
  }

  .blog-entry--reverse .blog-entry__media {
    order: 2;
  }

  .blog-entry--reverse .blog-entry__body {
    order: 1;
  }
}

@media (min-width: 1280px) {
  .blog-entry__link {
    padding: 3.75rem 0;
    gap: 3.5rem;
  }
}

.blog-entry__link:hover .blog-entry__title {
  color: #111827;
}

.blog-entry__link:hover .blog-entry__cta {
  gap: 0.625rem;
}

.blog-entry__link:hover .blog-entry__media img {
  transform: scale(1.03);
}

.blog-entry__media {
  overflow: hidden;
  border-radius: 1rem;
  aspect-ratio: 16 / 10;
  background: #e5e7eb;
}

@media (min-width: 900px) {
  .blog-entry__media {
    aspect-ratio: 4 / 3;
    border-radius: 1.25rem;
  }
}

.blog-entry__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 700ms cubic-bezier(0.22, 1, 0.36, 1);
}

.blog-entry__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
}

.blog-entry__meta {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #9ca3af;
}

.blog-entry__category {
  color: #f26522;
}

.blog-entry__title {
  margin: 0;
  font-size: clamp(1.375rem, 3vw, 2rem);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.025em;
  color: #374151;
  transition: color 250ms ease;
}

.blog-entry__excerpt {
  margin: 0.875rem 0 0;
  max-width: 34rem;
  font-size: 14px;
  line-height: 1.65;
  color: rgba(17, 24, 39, 0.58);
}

@media (min-width: 768px) {
  .blog-entry__excerpt {
    font-size: 15px;
    margin-top: 1rem;
  }
}

.blog-entry__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  margin-top: 1.375rem;
  font-size: 13px;
  font-weight: 500;
  color: #111827;
  transition: gap 250ms ease;
}

@media (min-width: 768px) {
  .blog-entry__cta {
    margin-top: 1.625rem;
    font-size: 14px;
  }
}

/* —— Blog sayfası —— */
.page-blog .blog--page {
  padding-top: 0;
}

.page-blog .blog__header {
  border-bottom: none;
  padding-bottom: 2rem;
}

@media (min-width: 1024px) {
  .page-blog .blog__header {
    padding-bottom: 2.5rem;
  }
}

.blog__empty-state {
  padding: 2rem 1.25rem 4rem;
  text-align: center;
  color: #6b7280;
  font-size: 15px;
  line-height: 1.65;
}

.blog__empty-cta {
  display: inline-flex;
  margin-top: 1.25rem;
  padding: 0.7rem 1.15rem;
  border: 1px solid rgba(17, 24, 39, 0.12);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  color: #111827;
  text-decoration: none;
  transition: background 240ms ease, border-color 240ms ease, color 240ms ease;
}

.blog__empty-cta:hover {
  background: #111827;
  border-color: #111827;
  color: #fff;
}

/* —— Blog yazı detay —— */
.blog-article {
  padding: 2.5rem 0 5rem;
}

@media (min-width: 768px) {
  .blog-article {
    padding: 3rem 0 7rem;
  }
}

.blog-article__inner {
  max-width: 44rem;
  margin: 0 auto;
}

.blog-article__breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.5rem;
  margin-bottom: 1.25rem;
  font-size: 13px;
  color: #9ca3af;
}

.blog-article__breadcrumb a {
  color: #6b7280;
  text-decoration: none;
  transition: color 200ms ease;
}

.blog-article__breadcrumb a:hover {
  color: #111827;
}

.blog-article__eyebrow {
  margin: 0 0 0.75rem;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #f26522;
}

.blog-article__title {
  margin: 0;
  font-size: clamp(1.85rem, 4.5vw, 2.75rem);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.035em;
  color: #111827;
}

.blog-article__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
  margin-top: 1rem;
  font-size: 14px;
  color: #6b7280;
}

.blog-article__meta-dot {
  color: #d1d5db;
}

.blog-article__lead {
  margin: 1.25rem 0 0;
  font-size: 17px;
  line-height: 1.65;
  color: #4b5563;
}

@media (min-width: 768px) {
  .blog-article__lead {
    font-size: 18px;
    margin-top: 1.5rem;
  }
}

.blog-article__cover {
  margin: 2rem 0 2.5rem;
  border-radius: 1rem;
  overflow: hidden;
  background: #f3f4f6;
}

@media (min-width: 768px) {
  .blog-article__cover {
    margin: 2.5rem 0 3rem;
    border-radius: 1.25rem;
  }
}

.blog-article__cover img {
  display: block;
  width: 100%;
  height: auto;
}

.blog-prose {
  font-size: 16px;
  line-height: 1.75;
  color: #374151;
}

.blog-prose h2 {
  margin: 2.25rem 0 1rem;
  font-size: 1.35rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.02em;
  color: #111827;
}

.blog-prose h2:first-child {
  margin-top: 0;
}

.blog-prose h3 {
  margin: 1.75rem 0 0.75rem;
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.35;
  color: #111827;
}

.blog-prose p {
  margin: 0 0 1rem;
}

.blog-prose ul,
.blog-prose ol {
  margin: 0 0 1.25rem;
  padding-left: 1.35rem;
}

.blog-prose li {
  margin-bottom: 0.5rem;
}

.blog-prose a {
  color: #111827;
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color 200ms ease;
}

.blog-prose a:hover {
  color: #f26522;
}

.blog-prose blockquote {
  margin: 1.5rem 0;
  padding: 0.875rem 1rem;
  border-left: 3px solid #f26522;
  background: rgba(242, 101, 34, 0.06);
  color: #374151;
}

.blog-prose img {
  max-width: 100%;
  height: auto;
  border-radius: 0.75rem;
}

.blog-prose pre {
  overflow-x: auto;
  margin: 1.25rem 0;
  padding: 1rem;
  border-radius: 0.75rem;
  background: #f3f4f6;
  font-size: 0.9rem;
}

.blog-prose table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.25rem 0;
  font-size: 0.95rem;
}

.blog-prose th,
.blog-prose td {
  padding: 0.5rem 0.65rem;
  border-bottom: 1px solid rgba(17, 24, 39, 0.1);
  text-align: left;
  vertical-align: top;
}

.blog-article__footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 1.5rem;
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid rgba(17, 24, 39, 0.08);
}

.blog-article__back {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 14px;
  font-weight: 500;
  color: #111827;
  text-decoration: none;
  transition: color 200ms ease;
}

.blog-article__back:hover {
  color: #f26522;
}

.blog-article__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1rem;
}

.blog-article__action {
  padding: 0;
  border: none;
  background: none;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  color: #f26522;
  cursor: pointer;
  text-decoration: none;
  transition: color 200ms ease;
}

.blog-article__action:hover {
  color: #111827;
}

.blog-article__action--link {
  color: #6b7280;
}

.blog-article__action--link:hover {
  color: #111827;
}

/* —— Proje listesi — showcase (Lenis + Motion) —— */
.page-projects [data-showcase-reveal] {
  opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
  .page-projects [data-showcase-reveal] {
    opacity: 1;
  }
}

.page-projects .project-showcase {
  padding-top: 1rem;
}

@media (min-width: 768px) {
  .page-projects .project-showcase {
    padding-top: 1.5rem;
    padding-bottom: 7rem;
  }
}

.project-showcase__intro {
  padding: 3.25rem 0 3rem;
  border-bottom: 1px solid rgba(17, 24, 39, 0.08);
}

@media (min-width: 768px) {
  .project-showcase__intro {
    padding: 3.75rem 0 4rem;
  }
}

.project-showcase__eyebrow {
  margin: 0 0 1.25rem;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #6b7280;
}

.project-showcase__intro-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
}

@media (min-width: 1024px) {
  .project-showcase__intro-grid {
    grid-template-columns: 1.15fr 1fr;
    gap: 3rem;
    align-items: end;
  }
}

.project-showcase__headline {
  margin: 0;
  font-size: clamp(2rem, 5.5vw, 3.75rem);
  font-weight: 600;
  line-height: 1.06;
  letter-spacing: -0.03em;
  color: #111827;
}

.project-showcase__lede {
  margin: 0;
  max-width: 34rem;
  font-size: 15px;
  line-height: 1.75;
  color: #4b5563;
}

@media (min-width: 768px) {
  .project-showcase__lede {
    font-size: 16px;
  }
}

.project-showcase__stats {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  margin: 2rem 0 0;
  padding: 0;
}

.project-showcase__stat {
  min-width: 5rem;
}

.project-showcase__stat dt {
  margin-bottom: 0.375rem;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #9ca3af;
}

.project-showcase__stat dd {
  margin: 0;
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 600;
  letter-spacing: -0.03em;
  color: #111827;
}

.project-showcase__layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  padding-top: 2rem;
}

@media (min-width: 1024px) {
  .project-showcase__layout {
    grid-template-columns: 13rem 1fr;
    gap: 3.5rem;
    padding-top: 3rem;
    align-items: start;
  }
}

.project-showcase__sidebar-inner {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

@media (max-width: 1023px) {
  .project-showcase__layout {
    gap: 1.25rem;
    padding-top: 2rem;
  }

  .project-showcase__sidebar {
    position: sticky;
    top: var(--sticky-nav-clearance);
    z-index: 40;
    margin-inline: 0;
    padding: 0.75rem 0;
    background: rgba(255, 255, 255, 0.94);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(17, 24, 39, 0.08);
  }

  .project-showcase__sidebar-inner {
    flex-direction: row;
    align-items: center;
    gap: 1rem 1.25rem;
  }

  .project-showcase__count {
    flex-shrink: 0;
    white-space: nowrap;
  }

  .project-showcase__count [data-count] {
    font-size: 1.5rem;
  }

  .project-showcase__filters {
    flex: 1;
    min-width: 0;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 0.5rem;
    padding-bottom: 0.125rem;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
  }

  .project-showcase__filters::-webkit-scrollbar {
    display: none;
  }

  .project-showcase__filter {
    flex-shrink: 0;
    scroll-snap-align: start;
  }
}

@media (min-width: 1024px) {
  .project-showcase__sidebar {
    position: sticky;
    top: calc(var(--sticky-nav-clearance) + 1.5rem);
    align-self: start;
  }
}

.project-showcase__count {
  display: flex;
  align-items: baseline;
  gap: 0.375rem;
  margin: 0;
  font-size: 14px;
  font-weight: 500;
  color: #6b7280;
}

.project-showcase__count [data-count] {
  font-size: 2rem;
  font-weight: 600;
  letter-spacing: -0.03em;
  color: #111827;
}

.project-showcase__filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
}

@media (min-width: 1024px) {
  .project-showcase__filters {
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 0.25rem;
  }
}

.project-showcase__filter {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: 0.625rem 1rem;
  border: none;
  border-radius: 9999px;
  background: transparent;
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  color: #6b7280;
  text-align: left;
  cursor: pointer;
  transition: color 220ms, background 220ms;
}

@media (min-width: 1024px) {
  .project-showcase__filter {
    width: 100%;
    padding: 0.75rem 0;
    border-radius: 0;
    border-bottom: 1px solid transparent;
  }
}

.project-showcase__filter:hover {
  color: #111827;
}

.project-showcase__filter.is-active {
  color: #111827;
}

@media (min-width: 1024px) {
  .project-showcase__filter.is-active {
    border-bottom-color: rgba(17, 24, 39, 0.1);
  }
}

.project-showcase__filter-indicator {
  display: none;
}

@media (max-width: 1023px) {
  .project-showcase__filter.is-active {
    background: #111827;
    color: #fff;
  }
}

.project-showcase__list {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.project-showcase__item {
  min-width: 0;
  scroll-margin-top: calc(var(--sticky-nav-clearance) + 1rem);
  opacity: 0;
  transform: translateY(2.5rem);
  transition:
    opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1) var(--showcase-delay, 0s),
    transform 0.9s cubic-bezier(0.22, 1, 0.36, 1) var(--showcase-delay, 0s);
}

.project-showcase__item.is-inview {
  opacity: 1;
  transform: none;
}

.project-showcase__item + .project-showcase__item {
  margin-top: 3rem;
  padding-top: 3rem;
  border-top: 1px solid rgba(17, 24, 39, 0.08);
}

@media (min-width: 768px) {
  .project-showcase__item + .project-showcase__item {
    margin-top: 4rem;
    padding-top: 4rem;
  }
}

.showcase-case {
  min-width: 0;
}

.showcase-case__link {
  display: block;
  color: inherit;
  text-decoration: none;
}

@media (min-width: 900px) {
  .showcase-case__link {
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
    gap: clamp(2rem, 4vw, 3.25rem);
    align-items: center;
  }
}

.showcase-case__media {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  background: #0a0a0a;
  border-radius: 1rem;
}

@media (min-width: 900px) {
  .showcase-case__media:not(.showcase-case__media--contain) {
    aspect-ratio: 4 / 3;
    border-radius: 0.875rem;
  }
}

.showcase-case__media--contain {
  aspect-ratio: auto;
  overflow: visible;
  background: transparent;
  border-radius: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

@media (min-width: 900px) {
  .showcase-case__media--contain {
    overflow: hidden;
    border-radius: 0.875rem;
    background: #f4f5f7;
    border: 1px solid rgba(17, 24, 39, 0.06);
    align-self: center;
    width: 100%;
  }
}

.showcase-case__media video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 900ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}

.showcase-case__media--contain img {
  display: block;
  width: 100%;
  height: auto;
}

@media (min-width: 900px) {
  .showcase-case__media--contain img {
    width: auto;
    max-width: 100%;
    max-height: min(68vh, 520px);
    height: auto;
    object-fit: contain;
    transition: transform 600ms cubic-bezier(0.22, 1, 0.36, 1);
  }
}

.showcase-case__link:hover .showcase-case__media video,
.showcase-case__link:focus-visible .showcase-case__media video {
  transform: scale(1.03);
}

.showcase-case__link:hover .showcase-case__media--contain img,
.showcase-case__link:focus-visible .showcase-case__media--contain img {
  transform: scale(1.012);
}

.showcase-case__foot {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  padding-top: 1.25rem;
  align-items: flex-start;
}

@media (min-width: 900px) {
  .showcase-case__foot {
    padding-top: 0;
    gap: 1.5rem;
    justify-content: center;
    align-self: center;
  }
}

.showcase-case__copy {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  min-width: 0;
}

.showcase-case__eyebrow {
  margin: 0;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #9ca3af;
}

.showcase-case__title {
  margin: 0;
  font-size: clamp(1.65rem, 3.8vw, 2.35rem);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.035em;
  color: #111827;
  transition: color 280ms ease;
}

.showcase-case__excerpt {
  margin: 0;
  max-width: 42ch;
  font-size: 15px;
  line-height: 1.65;
  color: #6b7280;
}

@media (min-width: 768px) {
  .showcase-case__excerpt {
    font-size: 16px;
  }
}

.showcase-case__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  width: fit-content;
  padding: 0.7rem 1.15rem;
  border: 1px solid rgba(17, 24, 39, 0.12);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  color: #111827;
  background: #fff;
  white-space: nowrap;
  transition:
    background 240ms ease,
    border-color 240ms ease,
    color 240ms ease;
}

.showcase-case__cta .icon {
  flex-shrink: 0;
  transition: transform 380ms cubic-bezier(0.22, 1, 0.36, 1);
}

.showcase-case__link:hover .showcase-case__title,
.showcase-case__link:focus-visible .showcase-case__title {
  color: #374151;
}

.showcase-case__link:hover .showcase-case__cta,
.showcase-case__link:focus-visible .showcase-case__cta {
  background: #111827;
  border-color: #111827;
  color: #fff;
}

.showcase-case__link:hover .showcase-case__cta .icon,
.showcase-case__link:focus-visible .showcase-case__cta .icon {
  transform: translateX(4px);
}

@media (prefers-reduced-motion: reduce) {
  .project-showcase__item {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .showcase-case__media video,
  .showcase-case__media--contain img,
  .showcase-case__cta .icon,
  .showcase-case__title,
  .showcase-case__cta {
    transition: none;
  }

  .showcase-case__link:hover .showcase-case__media video,
  .showcase-case__link:focus-visible .showcase-case__media video,
  .showcase-case__link:hover .showcase-case__media--contain img,
  .showcase-case__link:focus-visible .showcase-case__media--contain img {
    transform: none;
  }
}

[data-projects-list] {
  padding-top: 0;
}

/* —— Proje detay —— */
.page-hero--compact {
  min-height: auto;
}

.page-hero--compact .container {
  padding-bottom: 1.25rem;
}

.project-detail-hero {
  padding: 0 0 2.5rem;
  background: #fff;
}

@media (min-width: 768px) {
  .project-detail-hero {
    padding-bottom: 3.5rem;
  }
}

.project-detail-hero__breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
  font-size: 13px;
  color: #6b7280;
}

.project-detail-hero__breadcrumb a {
  color: #111827;
  text-decoration: none;
}

.project-detail-hero__breadcrumb a:hover {
  text-decoration: underline;
}

.project-detail-hero__labels {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.625rem;
  margin-bottom: 1rem;
}

.project-detail-hero__category,
.project-detail-hero__year {
  display: inline-flex;
  padding: 0.375rem 0.75rem;
  border-radius: 9999px;
  font-size: 12px;
  font-weight: 600;
}

.project-detail-hero__category {
  background: #111827;
  color: #fff;
}

.project-detail-hero__year {
  border: 1px solid rgba(17, 24, 39, 0.12);
  color: #374151;
}

.project-detail-hero__title {
  margin: 0;
  max-width: 16ch;
  font-size: clamp(2.25rem, 6vw, 4rem);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.03em;
  color: #111827;
}

.project-detail-hero__lead {
  margin: 1.25rem 0 0;
  max-width: 42rem;
  font-size: 16px;
  line-height: 1.7;
  color: #4b5563;
}

.project-detail {
  padding: 0 0 4rem;
  background: #fff;
}

@media (min-width: 768px) {
  .project-detail {
    padding-bottom: 5rem;
  }
}

.project-detail__layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
}

@media (min-width: 1024px) {
  .project-detail__layout {
    grid-template-columns: 16rem 1fr;
    gap: 4rem;
    align-items: start;
  }
}

.project-detail__sidebar {
  position: sticky;
  top: 6rem;
}

.project-detail__facts {
  margin: 0;
  padding: 1.25rem;
  border: 1px solid rgba(17, 24, 39, 0.08);
  border-radius: 1rem;
  background: #fafafa;
}

.project-detail__fact + .project-detail__fact {
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(17, 24, 39, 0.08);
}

.project-detail__fact dt {
  margin-bottom: 0.375rem;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #6b7280;
}

.project-detail__fact dd {
  margin: 0;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.5;
  color: #111827;
}

.project-detail__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.project-detail__tags li {
  padding: 0.3125rem 0.625rem;
  border-radius: 9999px;
  background: #fff;
  border: 1px solid rgba(17, 24, 39, 0.1);
  font-size: 12px;
  font-weight: 500;
  color: #374151;
}

.project-detail__media {
  overflow: hidden;
  border-radius: 1rem;
  background: #111827;
  aspect-ratio: 16 / 9;
}

.project-detail__media video,
.project-detail__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.project-detail__block {
  margin-top: 2.5rem;
}

.project-detail__block h2 {
  margin: 0 0 0.875rem;
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: #111827;
}

.project-detail__block p {
  margin: 0;
  font-size: 16px;
  line-height: 1.75;
  color: #4b5563;
}

.project-detail__results {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid rgba(17, 24, 39, 0.08);
}

@media (min-width: 640px) {
  .project-detail__results {
    grid-template-columns: repeat(3, 1fr);
  }
}

.project-detail__result {
  padding: 1.25rem;
  border-radius: 0.875rem;
  background: #fafafa;
  border: 1px solid rgba(17, 24, 39, 0.06);
}

.project-detail__result-value {
  display: block;
  font-size: clamp(1.5rem, 4vw, 2rem);
  font-weight: 600;
  letter-spacing: -0.03em;
  color: #111827;
}

.project-detail__result-label {
  display: block;
  margin-top: 0.375rem;
  font-size: 13px;
  line-height: 1.5;
  color: #6b7280;
}

.project-detail-related {
  padding: 3.5rem 0 4rem;
  background: #fafafa;
  border-top: 1px solid rgba(17, 24, 39, 0.06);
}

.project-detail-related__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.75rem;
}

.project-detail-related__title {
  margin: 0;
  font-size: 1.375rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: #111827;
}

.project-detail-related__all {
  font-size: 14px;
  font-weight: 500;
  color: #111827;
  text-decoration: none;
}

.project-detail-related__all:hover {
  text-decoration: underline;
}

.project-detail-related__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 768px) {
  .project-detail-related__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.project-related-card {
  display: block;
  overflow: hidden;
  border-radius: 0.875rem;
  background: #fff;
  border: 1px solid rgba(17, 24, 39, 0.08);
  color: inherit;
  text-decoration: none;
  transition: box-shadow 250ms, transform 250ms;
}

.project-related-card:hover {
  box-shadow: 0 8px 24px rgba(17, 24, 39, 0.08);
  transform: translateY(-2px);
}

.project-related-card__media {
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: #e5e7eb;
}

.project-related-card__media video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.project-related-card__body {
  padding: 1rem 1.125rem 1.125rem;
}

.project-related-card__meta {
  display: block;
  font-size: 12px;
  font-weight: 500;
  color: #6b7280;
}

.project-related-card__title {
  margin: 0.375rem 0 0;
  font-size: 1rem;
  font-weight: 600;
  color: #111827;
}

.project-detail-empty {
  padding: 4rem 0 5rem;
  text-align: center;
  background: #fff;
}

.project-detail-empty__title {
  margin: 0;
  font-size: 2rem;
  font-weight: 600;
  color: #111827;
}

.project-detail-empty__text {
  margin: 1rem auto 2rem;
  max-width: 28rem;
  font-size: 16px;
  line-height: 1.6;
  color: #6b7280;
}

.icon {
  display: block;
  flex-shrink: 0;
}

.icon[hidden] {
  display: none !important;
}

/* —— Ana sayfa CTA (footer içinde) —— */
.site-footer__cta {
  padding: 4.5rem 0 3rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

@media (min-width: 768px) {
  .site-footer__cta {
    padding: 6rem 0 4rem;
  }
}

.home-cta__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 1.25rem;
  max-width: 40rem;
  margin: 0 auto;
}

.home-cta__title {
  margin: 0;
  font-size: clamp(1.75rem, 5vw, 3rem);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.03em;
  color: #fff;
}

.home-cta__text {
  margin: 0;
  max-width: 32rem;
  font-size: 15px;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.65);
}

@media (min-width: 640px) {
  .home-cta__text {
    font-size: 16px;
  }
}

.home-cta__btn {
  margin-top: 0.5rem;
}

.home-cta__btn {
  border: none;
  cursor: pointer;
  font-family: inherit;
  text-decoration: none;
}

.home-cta__btn.btn-orange {
  background: #fff;
  color: #111827;
  transition: background 300ms;
}

.home-cta__btn.btn-orange:hover {
  background: #f3f4f6;
}

.home-cta__btn.btn-orange .btn-roll__icon {
  background: #111827;
  color: #fff;
}

/* —— Alt sayfa banner (beyaz shader) —— */
.page-hero {
  position: relative;
  overflow: hidden;
  background: #fff;
}

.page-hero__shader {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.45s ease, visibility 0.45s ease;
}

.page-hero.is-shader-active .page-hero__shader {
  opacity: 1;
  visibility: visible;
}

.page-hero__shader canvas {
  display: block;
  width: 100%;
  height: 100%;
}

.page-hero__overlay {
  display: none;
}

.page-hero .container,
.page-hero__inner {
  position: relative;
  z-index: 2;
}

.page-hero:not(.page-hero--contact):not(.page-hero--compact) {
  min-height: clamp(22rem, 42vh, 28rem);
}

.page-hero .hero__header {
  position: relative;
  z-index: 90;
  padding-top: 0.5rem;
}

@media (min-width: 640px) {
  .page-hero .hero__header {
    padding-top: 0.75rem;
  }
}

.page-hero .nav__cta {
  color: #000;
  border-color: rgba(0, 0, 0, 0.22);
}

.page-hero .nav__cta:hover {
  border-color: rgba(0, 0, 0, 0.45);
  background: rgba(0, 0, 0, 0.04);
}

.page-hero .nav__cta-icon {
  background: #000;
  color: #fff;
}

.page-hero .nav__menu-btn {
  border-color: rgba(0, 0, 0, 0.22);
  color: #000;
}

.page-hero .nav__menu-btn:hover {
  border-color: rgba(0, 0, 0, 0.45);
  background: rgba(0, 0, 0, 0.04);
}

.page-hero .container {
  padding-bottom: 3rem;
}

@media (min-width: 768px) {
  .page-hero .container {
    padding-bottom: 4rem;
  }
}

@media (min-width: 1024px) {
  .page-hero .container {
    padding-bottom: 5rem;
  }
}

.page-hero__title {
  margin: 2.5rem 0 0;
  font-size: clamp(2rem, 8vw, 4rem);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: #111827;
  text-wrap: balance;
}

@media (min-width: 768px) {
  .page-hero__title {
    margin-top: 3.5rem;
  }
}

@media (min-width: 1024px) {
  .page-hero__title {
    margin-top: 4rem;
  }
}

.page-hero__desc {
  margin: 1.25rem 0 0;
  max-width: 36rem;
  font-size: 15px;
  line-height: 1.7;
  color: #4b5563;
}

@media (min-width: 640px) {
  .page-hero__desc {
    font-size: 16px;
    margin-top: 1.5rem;
  }
}

.contact-quick {
  margin-top: 2.5rem;
}

.contact-quick__card {
  border-radius: 1rem;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  padding: 1.75rem 1.5rem;
}

@media (min-width: 640px) {
  .contact-quick__card {
    padding: 2rem 2.25rem;
  }
}

@media (min-width: 1024px) {
  .contact-quick__card {
    padding: 2.25rem 2.5rem;
  }
}

.contact-quick__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}

@media (min-width: 768px) {
  .contact-quick__grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 2.5rem;
  }
}

.contact-quick__item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
}

@media (max-width: 767px) {
  .contact-quick__item:not(:last-child) {
    padding-bottom: 2rem;
    border-bottom: 1px solid #f0f0f0;
  }
}

.contact-quick__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem;
  color: #111827;
}

.contact-quick__icon .icon {
  width: 28px;
  height: 28px;
}

@media (min-width: 640px) {
  .contact-quick__icon .icon {
    width: 32px;
    height: 32px;
  }
}

.contact-quick__title {
  margin: 0;
  font-size: 1.4rem;
  font-weight: 600;
  line-height: 1.3;
  color: #111827;
}

@media (min-width: 640px) {
  .contact-quick__title {
    font-size: 20px;
  }
}

@media (min-width: 1024px) {
  .contact-quick__title {
    font-size: 21px;
  }
}

.contact-quick__value {
  margin: 0.75rem 0 0;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.65;
  color: #4b5563;
}

@media (min-width: 640px) {
  .contact-quick__value {
    font-size: 17px;
  }
}

@media (min-width: 1024px) {
  .contact-quick__value {
    font-size: 18px;
  }
}

a.contact-quick__value {
  transition: color 200ms;
}

a.contact-quick__value:hover {
  color: #f26522;
}

.contact-page {
  background: #fff;
  padding: 0 0 5rem;
}

@media (min-width: 1024px) {
  .contact-page {
    padding-bottom: 6rem;
  }
}

.contact-page__header {
  max-width: 36rem;
  padding-top: 0.5rem;
  padding-bottom: 2rem;
}

@media (min-width: 768px) {
  .contact-page__header {
    padding-bottom: 2.5rem;
  }
}

.contact-page__layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  align-items: stretch;
}

@media (min-width: 1024px) {
  .contact-page__layout {
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
  }
}

.contact-page__heading {
  margin: 0;
  font-size: clamp(1.75rem, 6vw, 2.75rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: #111827;
  text-wrap: balance;
}

.contact-page__lead {
  margin: 0.75rem 0 0;
  font-size: 15px;
  line-height: 1.65;
  color: #6b7280;
}

@media (min-width: 640px) {
  .contact-page__lead {
    font-size: 16px;
  }
}

.contact-map {
  min-height: 20rem;
  border-radius: 1rem;
  overflow: hidden;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.06);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.05);
}

@media (min-width: 1024px) {
  .contact-map {
    min-height: 100%;
  }
}

.contact-map__iframe {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 20rem;
  border: 0;
}

@media (min-width: 1024px) {
  .contact-map__iframe {
    min-height: 32rem;
  }
}

.contact-form-wrap {
  min-width: 0;
}

.contact-form {
  height: 100%;
  padding: 1.75rem;
  border-radius: 1rem;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.06);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.05);
}

@media (min-width: 640px) {
  .contact-form {
    padding: 2rem 2.25rem;
  }
}

@media (min-width: 1024px) {
  .contact-form {
    padding: 2.25rem 2.5rem;
  }
}

.contact-form__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem;
  align-items: stretch;
}

@media (min-width: 640px) {
  .contact-form__row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.contact-form__field {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  width: 100%;
  box-sizing: border-box;
  padding: 0 1rem;
  border: 1px solid #e5e7eb;
  border-radius: 0.75rem;
  background: #fff;
  transition:
    border-color 200ms,
    box-shadow 200ms;
}

.contact-form__field:hover {
  border-color: #d1d5db;
}

.contact-form__field:focus-within {
  border-color: #f26522;
  box-shadow: 0 0 0 3px rgba(242, 101, 34, 0.12);
}

.contact-form__field:has(.contact-form__textarea) {
  min-height: 8.5rem;
  padding-top: 1.125rem;
}

.contact-form__row + .contact-form__field,
.contact-form__row + .contact-form__row {
  margin-top: 1rem;
}

.contact-form__field:not(:has(.contact-form__textarea)) {
  height: 3.4375rem;
  min-height: 3.4375rem;
}

.contact-form__label {
  position: absolute;
  top: 0;
  left: 0.875rem;
  z-index: 1;
  transform: translateY(-50%);
  padding: 0 0.375rem;
  background: #fff;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.2;
  color: #374151;
  pointer-events: none;
}

.contact-form__field:focus-within .contact-form__label {
  color: #f26522;
}

.contact-form__optional {
  font-weight: 500;
  color: #9ca3af;
}

.contact-form__input {
  width: 100%;
  min-width: 0;
  height: 1.375rem;
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  font: inherit;
  font-size: 15px;
  line-height: 1.375rem;
  color: #111827;
  box-shadow: none;
}

.contact-form__input::placeholder {
  color: #9ca3af;
}

.contact-form__input:hover,
.contact-form__input:focus {
  outline: none;
  border: none;
  box-shadow: none;
}

.contact-form__input:focus {
  outline: none;
}

.contact-form__select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  padding-right: 2.5rem;
}

.contact-form__textarea {
  height: auto;
  min-height: 6.5rem;
  line-height: 1.5;
  resize: vertical;
  padding-top: 0.125rem;
}

.contact-form__check {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  margin-top: 1.5rem;
  font-size: 13px;
  line-height: 1.55;
  color: #6b7280;
  cursor: pointer;
}

.contact-form__check input {
  flex-shrink: 0;
  width: 1rem;
  height: 1rem;
  margin-top: 0.125rem;
  accent-color: #f26522;
  cursor: pointer;
}

.contact-form__submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 1.75rem;
  min-width: 8rem;
  padding: 0.875rem 2rem;
  border: none;
  border-radius: 0.5rem;
  background: #111827;
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  cursor: pointer;
  transition: background 250ms, transform 250ms;
}

.contact-form__submit:hover {
  background: #f26522;
}

.contact-form__submit:active {
  transform: scale(0.98);
}

.contact-form__success {
  display: none;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 2rem 1rem;
}

.contact-form.is-sent .contact-form__success {
  display: flex;
}

.contact-form.is-sent [data-contact-fields] {
  display: none;
}

.contact-form__success-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 9999px;
  background: rgba(242, 101, 34, 0.1);
  color: #f26522;
}

.contact-form__success-title {
  margin: 1.25rem 0 0;
  font-size: 1.25rem;
  font-weight: 600;
  color: #111827;
}

.contact-form__success-text {
  margin: 0.5rem 0 0;
  max-width: 20rem;
  font-size: 15px;
  line-height: 1.6;
  color: #6b7280;
}

.contact-form__success-link {
  margin-top: 1.25rem;
  font-size: 14px;
  font-weight: 600;
  color: #f26522;
  transition: color 200ms;
}

.contact-form__success-link:hover {
  color: #111827;
}

/* —— Footer —— */
.site-footer {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: #fff;
  padding: 0 0 1.5rem;
  background-color: #040404;
}

.site-footer__backdrop {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  background:
    radial-gradient(ellipse 65% 45% at 50% 0%, rgba(255, 255, 255, 0.035) 0%, transparent 62%),
    radial-gradient(ellipse 80% 50% at 50% 105%, rgba(255, 255, 255, 0.04) 0%, transparent 58%),
    linear-gradient(180deg, #0c0c0c 0%, #050505 42%, #020202 100%);
}

.site-footer__backdrop::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url('../assets/footer-monolith.svg') center center / cover no-repeat;
  opacity: 0.92;
  mask-image: linear-gradient(180deg, #000 0%, #000 96%, transparent 100%);
}

.site-footer__backdrop::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.04) 0%, transparent 18%),
    linear-gradient(0deg, rgba(0, 0, 0, 0.75) 0%, transparent 42%);
}

.site-footer:not(:has(.site-footer__cta)) {
  padding-top: 3rem;
}

@media (min-width: 768px) {
  .site-footer:not(:has(.site-footer__cta)) {
    padding-top: 3.5rem;
  }
}

.site-footer__inner {
  position: relative;
  z-index: 1;
}

.site-footer__top {
  padding: 2.5rem 0 2rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

@media (min-width: 768px) {
  .site-footer__top {
    padding: 3rem 0 2.25rem;
  }
}

.site-footer__top .site-footer__nav {
  width: 100%;
}

.site-footer__identity {
  display: grid;
  gap: 2rem;
  padding: 2rem 0 2.25rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

@media (min-width: 768px) {
  .site-footer__identity {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 2rem;
    align-items: start;
    padding: 2.25rem 0 2.5rem;
  }
}

.site-footer__identity-main {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.25rem;
}

.site-footer__identity .site-footer__brand {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  max-width: 26rem;
}

.site-footer__reach {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  width: 100%;
  max-width: 15.5rem;
}

@media (min-width: 768px) {
  .site-footer__reach {
    padding-top: 0.1rem;
    padding-left: 1.5rem;
    border-left: 1px solid rgba(255, 255, 255, 0.08);
  }
}

.site-footer__reach-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.site-footer__reach-item {
  margin: 0;
}

.site-footer__reach-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 1.75rem;
  color: rgba(255, 255, 255, 0.78);
  text-decoration: none;
  transition: color 200ms ease;
}

a.site-footer__reach-row:hover {
  color: #fff;
}

.site-footer__reach-icon {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 1.625rem;
  height: 1.625rem;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 9999px;
  color: rgba(255, 255, 255, 0.62);
}

.site-footer__reach-icon .icon {
  display: block;
}

a.site-footer__reach-row:hover .site-footer__reach-icon {
  border-color: rgba(255, 255, 255, 0.28);
  color: rgba(255, 255, 255, 0.9);
}

.site-footer__reach-text {
  font-size: 0.8125rem;
  line-height: 1.35;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.site-footer__reach-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.15rem;
}

.site-footer__reach-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2rem;
  padding: 0 0.75rem;
  border-radius: 9999px;
  font-family: inherit;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition:
    background 200ms ease,
    border-color 200ms ease,
    color 200ms ease,
    opacity 200ms ease;
}

.site-footer__reach-btn--primary {
  border: none;
  background: #f97316;
  color: #fff;
}

.site-footer__reach-btn--primary:hover {
  background: #ea580c;
}

.site-footer__reach-btn--ghost {
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: transparent;
  color: rgba(255, 255, 255, 0.88);
}

.site-footer__reach-btn--ghost:hover {
  border-color: rgba(255, 255, 255, 0.38);
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
}

.site-footer__brand {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  max-width: 22rem;
}

.site-footer__logo {
  display: inline-flex;
  width: fit-content;
  text-decoration: none;
  transition: opacity 200ms;
}

.site-footer__logo:hover {
  opacity: 0.75;
}

.site-footer__logo-img {
  display: block;
  width: auto;
  height: 1.5rem;
  filter: brightness(0) invert(1);
}

.site-footer__tagline {
  margin: 0;
  font-size: 14px;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.55);
}

.site-footer__nav {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2rem 1.5rem;
}

@media (min-width: 640px) {
  .site-footer__nav {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .site-footer__nav {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 1280px) {
  .site-footer__nav {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 2rem 1.25rem;
  }
}

.scroll-anchor {
  display: block;
  height: 0;
  scroll-margin-top: 5.5rem;
}

.site-footer__col {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}

.site-footer__label {
  margin-bottom: 0.25rem;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.4);
}

.site-footer__col a {
  width: fit-content;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.78);
  text-decoration: none;
  transition: color 200ms;
}

.site-footer__col a:hover {
  color: #fff;
}

.site-footer__bottom {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
  padding-top: 1.5rem;
  text-align: left;
}

@media (min-width: 768px) {
  .site-footer__bottom {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem 2rem;
  }
}

.site-footer__copy {
  margin: 0;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.45);
}

.site-footer__legal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.5rem 0.625rem;
}

.site-footer__legal a {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.55);
  text-decoration: none;
  transition: color 200ms;
}

.site-footer__legal a:hover,
.site-footer__legal a[aria-current='page'] {
  color: #fff;
}

.site-footer__legal-sep {
  color: rgba(255, 255, 255, 0.28);
  font-size: 13px;
  line-height: 1;
}

@media (min-width: 768px) {
  .site-footer__legal {
    justify-content: flex-start;
  }
}

.site-footer__social {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.site-footer__social a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 9999px;
  color: rgba(255, 255, 255, 0.75);
  transition: border-color 200ms, color 200ms, background 200ms;
}

.site-footer__social a:hover {
  border-color: rgba(255, 255, 255, 0.28);
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
}

/* —— Yasal sayfalar —— */
.legal-page {
  padding: 2rem 0 4.5rem;
  background: #fff;
}

@media (min-width: 768px) {
  .legal-page {
    padding: 2.5rem 0 6rem;
  }
}

.legal-page__tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  margin-bottom: 1.25rem;
}

@media (min-width: 768px) {
  .legal-page__tabs {
    margin-bottom: 1.5rem;
  }
}

.legal-page__tab {
  display: inline-flex;
  align-items: center;
  padding: 0.5625rem 1rem;
  border: 1px solid rgba(17, 24, 39, 0.1);
  border-radius: 9999px;
  background: #fff;
  font-size: 13px;
  font-weight: 500;
  color: #4b5563;
  text-decoration: none;
  transition: border-color 200ms, background 200ms, color 200ms;
}

.legal-page__tab:hover {
  border-color: rgba(17, 24, 39, 0.22);
  color: #111827;
}

.legal-page__tab.is-active,
.legal-page__tab[aria-current='page'] {
  border-color: #111827;
  background: #111827;
  color: #fff;
}

.legal-page__header {
  padding: 0;
  margin-bottom: 2rem;
}

.legal-page__breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1.25rem;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: #9ca3af;
}

.legal-page__breadcrumb a {
  color: #6b7280;
  text-decoration: none;
  transition: color 200ms;
}

.legal-page__breadcrumb a:hover {
  color: #111827;
}

.legal-page__eyebrow {
  margin: 0 0 0.625rem;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #6b7280;
}

.legal-page__title {
  margin: 0;
  font-size: clamp(1.75rem, 4.5vw, 2.5rem);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.03em;
  color: #111827;
}

.legal-page__updated {
  margin: 1rem 0 0;
  font-size: 13px;
  font-weight: 400;
  color: #6b7280;
}

.legal-page__lead {
  margin: 1.25rem 0 0;
  font-size: 16px;
  line-height: 1.7;
  color: #4b5563;
}

@media (min-width: 640px) {
  .legal-page__lead {
    font-size: 17px;
  }
}

.legal-page__prose {
  padding: 0;
}

.legal-page__prose h2 {
  margin: 2rem 0 0.75rem;
  padding: 0;
  border: none;
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: #111827;
}

.legal-page__prose h2:first-child {
  margin-top: 0;
}

.legal-page__prose h3 {
  margin: 1.125rem 0 0.5rem;
  font-size: 0.9375rem;
  font-weight: 600;
  color: #111827;
}

.legal-page__prose p,
.legal-page__prose li {
  font-size: 15px;
  line-height: 1.8;
  color: #4b5563;
}

.legal-page__prose p {
  margin: 0 0 0.875rem;
}

.legal-page__prose ul {
  margin: 0 0 0.875rem;
  padding-left: 1.125rem;
}

.legal-page__prose li + li {
  margin-top: 0.3125rem;
}

.legal-page__prose a {
  color: #111827;
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-color: rgba(17, 24, 39, 0.25);
  transition: color 200ms, text-decoration-color 200ms;
}

.legal-page__prose a:hover {
  color: #111827;
  text-decoration-color: rgba(17, 24, 39, 0.5);
}

.legal-page__contact {
  margin: 2rem 0 0;
  padding: 0;
  font-size: 14px;
  line-height: 1.65;
  color: #6b7280;
}

.legal-page__contact a {
  color: #111827;
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.legal-page__contact a:hover {
  text-decoration-color: rgba(17, 24, 39, 0.5);
}

.contact-form__check a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.contact-form__check a:hover {
  color: #111827;
}

/* —— Çözüm alanları —— */
.solution-areas {
  background: #fff;
  padding: 4rem 0;
}

@media (min-width: 1024px) {
  .solution-areas {
    padding: 5.5rem 0;
  }
}

.solution-areas__title {
  margin: 0 0 2.5rem;
  font-size: clamp(1.75rem, 7vw, 3.5rem);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: #111827;
}

@media (min-width: 640px) {
  .solution-areas__title {
    margin-bottom: 3rem;
  }
}

@media (min-width: 1024px) {
  .solution-areas__title {
    margin-bottom: 3.5rem;
  }
}

.solution-areas__layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}

@media (min-width: 1024px) {
  .solution-areas__layout {
    grid-template-columns: minmax(16rem, 22rem) 1fr;
    gap: 2.5rem;
    align-items: center;
  }
}

@media (min-width: 1280px) {
  .solution-areas__layout {
    gap: 3.5rem;
  }
}

.solution-areas__nav {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

@media (min-width: 1024px) {
  .solution-areas__nav {
    position: sticky;
    top: 6rem;
    align-self: center;
  }
}

.solution-areas__subtitle {
  margin: 0;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.6;
  color: #4b5563;
}

@media (min-width: 640px) {
  .solution-areas__subtitle {
    font-size: 16px;
    line-height: 1.65;
  }
}

.solution-areas__tabs {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

@media (max-width: 1023px) {
  .solution-areas__tabs {
    flex-direction: row;
    overflow-x: auto;
    gap: 0.5rem;
    padding-bottom: 0.25rem;
    scrollbar-width: none;
  }

  .solution-areas__tabs::-webkit-scrollbar {
    display: none;
  }
}

.solution-areas__tab {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 0.875rem 1rem;
  border: none;
  border-radius: 0.875rem;
  background: transparent;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  transition:
    background 250ms,
    color 250ms,
    transform 250ms;
}

@media (max-width: 1023px) {
  .solution-areas__tab {
    width: auto;
    flex-shrink: 0;
    white-space: nowrap;
  }
}

.solution-areas__tab:hover {
  background: rgba(17, 24, 39, 0.04);
}

.solution-areas__tab.is-active {
  background: #fff;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
}

.solution-areas__tab-label {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.35;
  color: #6b7280;
  transition: color 250ms;
}

@media (min-width: 640px) {
  .solution-areas__tab-label {
    font-size: 16px;
  }
}

.solution-areas__tab.is-active .solution-areas__tab-label {
  color: #111827;
}

.solution-areas__descs {
  position: relative;
  min-height: 4.5rem;
}

.solution-areas__desc {
  margin: 0;
  font-size: 14px;
  line-height: 1.65;
  color: #4b5563;
  opacity: 0;
  transition: opacity 400ms cubic-bezier(0.25, 0.1, 0.25, 1);
}

.solution-areas__desc.is-active {
  position: relative;
  opacity: 1;
}

.solution-areas__desc:not(.is-active) {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
}

@media (min-width: 640px) {
  .solution-areas__desc {
    font-size: 15px;
  }
}

.solution-areas__panels {
  position: relative;
  min-height: 20rem;
}

.solution-areas__panel {
  display: none;
  opacity: 0;
  transition: opacity 400ms cubic-bezier(0.25, 0.1, 0.25, 1);
}

.solution-areas__panel.is-active {
  display: block;
  opacity: 1;
}

.solution-areas__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

@media (min-width: 640px) {
  .solution-areas__grid {
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
  }
}

.solution-area-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 1.5rem;
  border-radius: 1rem;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.05);
  transition:
    transform 300ms cubic-bezier(0.25, 0.1, 0.25, 1),
    box-shadow 300ms;
}

@media (min-width: 640px) {
  .solution-area-card {
    padding: 1.75rem;
  }
}

.solution-area-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.08);
}

.solution-area-card__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  margin-bottom: 1.25rem;
  border-radius: 9999px;
  background: #111827;
  color: #fff;
  transition: background 300ms, transform 300ms;
}

.solution-area-card:hover .solution-area-card__icon {
  background: #374151;
  transform: scale(1.05);
}

.solution-area-card h3 {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  color: #111827;
}

@media (min-width: 640px) {
  .solution-area-card h3 {
    font-size: 16px;
  }
}

.solution-area-card p {
  flex: 1;
  margin: 0.625rem 0 1.25rem;
  font-size: 13px;
  line-height: 1.65;
  color: #6b7280;
}

@media (min-width: 640px) {
  .solution-area-card p {
    font-size: 14px;
  }
}

.solution-area-card__link {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  width: fit-content;
  font-size: 13px;
  font-weight: 600;
  color: #111827;
  transition: color 200ms, gap 200ms;
}

.solution-area-card__link:hover {
  color: #4b5563;
  gap: 0.625rem;
}

/* —— Quote sheet —— */
.quote-modal {
  --quote-gap: 0.75rem;
  position: fixed;
  inset: 0;
  z-index: 120;
  overflow: hidden;
  pointer-events: none;
  visibility: hidden;
}

@media (min-width: 640px) {
  .quote-modal {
    --quote-gap: 1rem;
  }
}

@media (min-width: 1024px) {
  .quote-modal {
    --quote-gap: 1.25rem;
  }
}

.quote-modal.is-open {
  pointer-events: auto;
}

.quote-modal__backdrop {
  position: absolute;
  inset: 0;
}

.quote-modal__sheet {
  position: absolute;
  inset: var(--quote-gap);
  display: flex;
  flex-direction: column;
  border-radius: 1.25rem;
  background: #fff;
  overflow: hidden;
  outline: none;
  box-shadow:
    0 24px 48px rgba(17, 24, 39, 0.12),
    0 8px 16px rgba(17, 24, 39, 0.06);
}

@media (min-width: 768px) {
  .quote-modal__sheet {
    inset: auto;
    top: 50%;
    left: 50%;
    right: auto;
    bottom: auto;
    width: min(36rem, calc(100vw - 2.5rem));
    max-height: min(92vh, 50rem);
  }
}

.quote-modal__close {
  position: absolute;
  top: 1.25rem;
  right: 1.25rem;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border: 1.5px solid rgba(17, 24, 39, 0.12);
  border-radius: 9999px;
  background: transparent;
  color: #111827;
  cursor: pointer;
  font-family: inherit;
}

.quote-modal__close:hover {
  border-color: rgba(17, 24, 39, 0.28);
  background: rgba(17, 24, 39, 0.04);
}

.quote-modal__progress {
  flex: none;
  height: 3px;
  background: #eceef1;
}

.quote-modal__progress-bar {
  display: block;
  width: 33%;
  height: 100%;
  background: linear-gradient(90deg, #111827 0%, #374151 100%);
  transition: width 640ms cubic-bezier(0.16, 1, 0.3, 1);
}

.quote-modal__scroll {
  flex: 1;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.quote-modal__form {
  width: 100%;
  max-width: 36rem;
  display: flex;
  flex-direction: column;
}

.quote-modal__step:not([hidden]) {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  width: 100%;
  flex: 0 0 auto;
}

.quote-modal__step[data-quote-step='topic']:not([hidden]),
.quote-modal__step[data-quote-step='detail']:not([hidden]),
.quote-modal__step--success:not([hidden]) {
  justify-content: center;
}

.quote-modal__step[hidden] {
  display: none !important;
}

.quote-modal__content {
  width: 100%;
  max-width: 34rem;
  margin: 0 auto;
  padding: 3.5rem 1.5rem max(2.5rem, env(safe-area-inset-bottom, 0px));
  text-align: center;
}

@media (min-width: 640px) {
  .quote-modal__content {
    padding: 4rem 2rem max(3rem, env(safe-area-inset-bottom, 0px));
  }
}

.quote-modal__eyebrow,
.quote-modal__title,
.quote-modal__lead,
.quote-modal__selected {
  text-align: center;
}

.quote-modal__topics,
.quote-modal__fields,
.quote-modal__back {
  text-align: left;
}

.quote-modal__back {
  align-self: flex-start;
}

.quote-modal__content--success {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: calc(100% - 1rem);
  justify-content: center;
  text-align: center;
}

.quote-modal__eyebrow {
  margin: 0 0 0.5rem;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #9ca3af;
}

.quote-modal__title {
  margin: 0;
  font-size: clamp(1.5rem, 4vw, 2rem);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.15;
  color: #111827;
}

.quote-modal__lead {
  margin: 0.75rem 0 0;
  font-size: 1rem;
  line-height: 1.55;
  color: #6b7280;
}

.quote-modal__topics {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  margin-top: 1.75rem;
  width: 100%;
}

.quote-modal__topic {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.125rem;
  width: 100%;
  padding: 1rem 1.125rem;
  border: 1.5px solid #eceef1;
  border-radius: 0.875rem;
  background: #fafafa;
  text-align: left;
  cursor: pointer;
  font: inherit;
  transition:
    border-color 280ms ease,
    background 280ms ease;
}

.quote-modal__topic:hover {
  border-color: #d1d5db;
  background: #fff;
}

.quote-modal__topic.is-selected {
  border-color: #111827;
  background: #fff;
}

.quote-modal__topic-label {
  font-size: 1rem;
  font-weight: 600;
  color: #111827;
}

.quote-modal__topic-hint {
  font-size: 0.8125rem;
  color: #9ca3af;
}

.quote-modal__next,
.quote-modal__submit,
.quote-modal__done {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  gap: 0.5rem;
  width: 100%;
  margin-top: 1.5rem;
  margin-bottom: 0.25rem;
  padding: 0.875rem 1.25rem;
  border: none;
  border-radius: 999px;
  background: #111827;
  color: #fff;
  font: inherit;
  font-size: 0.9375rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 280ms ease, opacity 280ms ease;
}

.quote-modal__next:hover,
.quote-modal__submit:hover,
.quote-modal__done:hover {
  background: #1f2937;
}

.quote-modal__next:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.quote-modal__back {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  margin: 0 0 1rem;
  padding: 0.375rem 0.625rem 0.375rem 0.25rem;
  border: none;
  border-radius: 999px;
  background: rgba(17, 24, 39, 0.05);
  color: #6b7280;
  font: inherit;
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 220ms ease, color 220ms ease;
}

.quote-modal__back:hover {
  color: #111827;
  background: rgba(17, 24, 39, 0.08);
}

.quote-modal__selected {
  display: inline-block;
  margin: 0.875rem 0 0;
  padding: 0.375rem 0.75rem;
  border-radius: 999px;
  background: #f3f4f6;
  font-size: 0.8125rem;
  font-weight: 500;
  color: #374151;
}

.quote-modal__fields {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
  margin-top: 1.25rem;
}

.quote-modal__field-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.875rem;
}

@media (min-width: 640px) {
  .quote-modal__field-row {
    grid-template-columns: 1fr 1fr;
  }
}

.quote-modal__field {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.quote-modal__label {
  font-size: 0.8125rem;
  font-weight: 600;
  color: #374151;
}

.quote-modal__optional {
  font-weight: 400;
  color: #9ca3af;
}

.quote-modal__input {
  width: 100%;
  padding: 0.75rem 0.875rem;
  border: 1.5px solid #e5e7eb;
  border-radius: 0.75rem;
  background: #fff;
  font: inherit;
  font-size: 0.9375rem;
  color: #111827;
  transition: border-color 220ms ease, box-shadow 220ms ease;
}

.quote-modal__input::placeholder {
  color: #9ca3af;
}

.quote-modal__input:focus {
  border-color: #111827;
  outline: none;
  box-shadow: 0 0 0 3px rgba(17, 24, 39, 0.08);
}

.quote-modal__input--readonly {
  cursor: default;
  color: #374151;
  background: #f3f4f6;
  border-color: #e5e7eb;
}

.quote-modal__input--readonly:focus {
  border-color: #e5e7eb;
  box-shadow: none;
}

.quote-modal__textarea {
  resize: vertical;
  min-height: 5rem;
}

.quote-modal__check {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  font-size: 0.8125rem;
  line-height: 1.45;
  color: #6b7280;
}

.quote-modal__check input {
  flex-shrink: 0;
  width: 1rem;
  height: 1rem;
  margin-top: 0.125rem;
  accent-color: #111827;
}

.quote-modal__check a {
  color: #111827;
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.quote-modal__success-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.5rem;
  height: 3.5rem;
  margin-bottom: 1rem;
  border-radius: 999px;
  background: #ecfdf5;
  color: #059669;
}

.quote-modal__content--success .quote-modal__done {
  width: auto;
  min-width: 10rem;
  margin-top: 1.75rem;
}

/* —— Toplantı planlama modal —— */
.meeting-modal {
  --meeting-gap: 0.75rem;
  position: fixed;
  inset: 0;
  z-index: 120;
  overflow: hidden;
  pointer-events: none;
  visibility: hidden;
}

@media (min-width: 640px) {
  .meeting-modal {
    --meeting-gap: 1rem;
  }
}

@media (min-width: 1024px) {
  .meeting-modal {
    --meeting-gap: 1.25rem;
  }
}

.meeting-modal.is-open {
  pointer-events: auto;
}

.meeting-modal__backdrop {
  position: absolute;
  inset: 0;
}

.meeting-modal__sheet {
  position: absolute;
  inset: var(--meeting-gap);
  display: flex;
  flex-direction: column;
  border-radius: 1.25rem;
  background: #fff;
  overflow: hidden;
  outline: none;
  box-shadow:
    0 24px 48px rgba(17, 24, 39, 0.12),
    0 8px 16px rgba(17, 24, 39, 0.06);
}

@media (min-width: 768px) {
  .meeting-modal__sheet {
    inset: auto;
    top: 50%;
    left: 50%;
    right: auto;
    bottom: auto;
    width: min(56rem, calc(100vw - 2.5rem));
    max-height: min(92vh, 44rem);
  }

  .meeting-modal__sheet--embed {
    max-height: min(92vh, 44rem);
  }
}

.meeting-modal__close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border: 1.5px solid rgba(17, 24, 39, 0.12);
  border-radius: 9999px;
  background: #fff;
  color: #111827;
  cursor: pointer;
  font-family: inherit;
}

.meeting-modal__close:hover {
  border-color: rgba(17, 24, 39, 0.28);
  background: rgba(17, 24, 39, 0.04);
}

.meeting-modal__scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.meeting-modal__embed-wrap {
  min-height: min(78vh, 36rem);
  padding: 3.25rem 0 0;
}

.meeting-modal__embed {
  display: block;
  width: 100%;
  min-height: min(72vh, 34rem);
  border: 0;
}

.meeting-modal__picker {
  display: grid;
  gap: 1.5rem;
  padding: 3.25rem 1.25rem 1.5rem;
}

@media (min-width: 768px) {
  .meeting-modal__picker {
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.15fr);
    gap: 2rem;
    padding: 3.5rem 2rem 2rem;
  }
}

.meeting-modal__eyebrow {
  margin: 0 0 0.35rem;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #9ca3af;
}

.meeting-modal__picker-title {
  margin: 0;
  font-size: clamp(1.25rem, 3vw, 1.5rem);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.2;
  color: #111827;
}

.meeting-modal__picker-lead {
  margin: 0.65rem 0 0;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: #6b7280;
}

.meeting-modal__meta {
  list-style: none;
  margin: 1.25rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.meeting-modal__meta li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  color: #4b5563;
}

.meeting-modal__selection {
  margin: 1.25rem 0 0;
  padding: 0.75rem 0.875rem;
  border-radius: 0.625rem;
  background: rgba(17, 24, 39, 0.04);
  font-size: 0.8125rem;
  line-height: 1.45;
  color: #374151;
}

.meeting-modal .visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.meeting-modal__schedule {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  min-width: 0;
}

.meeting-modal__flow-steps {
  display: flex;
  align-items: center;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.meeting-modal__flow-step {
  position: relative;
  display: flex;
  flex: 1;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
  padding: 0 0.35rem 0.65rem;
  color: #9ca3af;
  transition: color 280ms ease;
}

.meeting-modal__flow-step:not(:last-child)::after {
  content: '';
  position: absolute;
  left: calc(100% - 0.35rem);
  top: 0.9rem;
  width: calc(100% - 1.5rem);
  height: 1px;
  background: #e5e7eb;
  transform: translateX(0.35rem);
  pointer-events: none;
}

.meeting-modal__flow-step.is-done,
.meeting-modal__flow-step.is-current {
  color: #111827;
}

.meeting-modal__flow-step.is-done .meeting-modal__flow-step-num {
  border-color: #111827;
  background: #111827;
  color: #fff;
}

.meeting-modal__flow-step.is-current .meeting-modal__flow-step-num {
  border-color: #111827;
  background: #fff;
  color: #111827;
  box-shadow: 0 0 0 3px rgba(17, 24, 39, 0.08);
}

.meeting-modal__flow-step-num {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 1.625rem;
  height: 1.625rem;
  border: 1.5px solid #d1d5db;
  border-radius: 999px;
  font-size: 0.6875rem;
  font-weight: 700;
  transition:
    border-color 280ms ease,
    background 280ms ease,
    color 280ms ease,
    box-shadow 280ms ease;
}

.meeting-modal__flow-step-label {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.meeting-modal__flow-viewport {
  overflow: hidden;
  min-width: 0;
}

.meeting-modal__flow-track {
  display: flex;
  width: 300%;
  transform: translate3d(0, 0, 0);
  transition: transform 520ms cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
}

.meeting-modal__flow-track[data-active-step='2'] {
  transform: translate3d(-33.3333%, 0, 0);
}

.meeting-modal__flow-track[data-active-step='3'] {
  transform: translate3d(-66.6667%, 0, 0);
}

.meeting-modal__flow-panel {
  flex: 0 0 33.3333%;
  width: 33.3333%;
  min-width: 0;
  padding-right: 0.15rem;
}

.meeting-modal__flow-panel[data-meeting-panel='times'] {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  transition:
    opacity 360ms cubic-bezier(0.4, 0, 0.2, 1),
    transform 520ms cubic-bezier(0.4, 0, 0.2, 1);
}

.meeting-modal__flow-panel[data-meeting-panel='times'].is-entering .meeting-modal__date-bar,
.meeting-modal__flow-panel[data-meeting-panel='times'].is-entering .meeting-modal__block-title,
.meeting-modal__flow-panel[data-meeting-panel='times'].is-entering .meeting-modal__times,
.meeting-modal__flow-panel[data-meeting-panel='times'].is-entering .meeting-modal__confirm {
  animation: meeting-step-in 480ms cubic-bezier(0.4, 0, 0.2, 1) both;
}

.meeting-modal__flow-panel[data-meeting-panel='times'].is-entering .meeting-modal__block-title {
  animation-delay: 60ms;
}

.meeting-modal__flow-panel[data-meeting-panel='times'].is-entering .meeting-modal__times {
  animation-delay: 120ms;
}

.meeting-modal__flow-panel[data-meeting-panel='times'].is-entering .meeting-modal__confirm {
  animation-delay: 180ms;
}

@keyframes meeting-step-in {
  from {
    opacity: 0;
    transform: translate3d(0, 0.65rem, 0);
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

.meeting-modal__date-bar {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  margin-bottom: 1rem;
  padding: 0.875rem 1rem;
  border: 1px solid #eceef1;
  border-radius: 0.875rem;
  background: #fff;
}

.meeting-modal__date-back {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 0.25rem;
  margin-top: 0.15rem;
  padding: 0.35rem 0.5rem 0.35rem 0.35rem;
  border: none;
  border-radius: 999px;
  background: rgba(17, 24, 39, 0.05);
  color: #374151;
  font-family: inherit;
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 200ms ease, color 200ms ease;
}

.meeting-modal__date-back:hover {
  background: rgba(17, 24, 39, 0.08);
  color: #111827;
}

.meeting-modal__date-display {
  flex: 1;
  min-width: 0;
}

.meeting-modal__date-eyebrow {
  display: block;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #9ca3af;
}

.meeting-modal__date-value {
  margin: 0.2rem 0 0;
  font-size: clamp(0.9375rem, 2.2vw, 1.0625rem);
  font-weight: 600;
  line-height: 1.35;
  color: #111827;
  text-transform: capitalize;
}

.meeting-modal__review {
  margin-top: 1rem;
  padding: 0.875rem 1rem;
  border-radius: 0.75rem;
  background: rgba(17, 24, 39, 0.04);
}

.meeting-modal__review-label {
  margin: 0;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #9ca3af;
}

.meeting-modal__review-value {
  margin: 0.35rem 0 0;
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.4;
  color: #111827;
  text-transform: capitalize;
}

.meeting-modal__calendar {
  padding: 1rem;
  border: 1px solid #eceef1;
  border-radius: 1rem;
  background: #fafafa;
}

.meeting-modal__cal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

.meeting-modal__cal-month {
  margin: 0;
  flex: 1;
  font-size: 0.9375rem;
  font-weight: 600;
  text-align: center;
  color: #111827;
  text-transform: capitalize;
}

.meeting-modal__cal-nav {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.125rem;
  height: 2.125rem;
  padding: 0;
  border: 1px solid rgba(17, 24, 39, 0.1);
  border-radius: 999px;
  background: #fff;
  color: #111827;
  cursor: pointer;
  transition: border-color 200ms ease, background 200ms ease, opacity 200ms ease;
}

.meeting-modal__cal-nav:hover:not(:disabled) {
  border-color: rgba(17, 24, 39, 0.22);
  background: #f9fafb;
}

.meeting-modal__cal-nav:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.meeting-modal__cal-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0.25rem;
  margin-bottom: 0.35rem;
}

.meeting-modal__cal-weekdays span {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-align: center;
  text-transform: uppercase;
  color: #9ca3af;
}

.meeting-modal__cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0.25rem;
}

.meeting-modal__cal-pad {
  display: block;
  aspect-ratio: 1;
}

.meeting-modal__cal-day {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1;
  width: 100%;
  padding: 0;
  border: 1.5px solid transparent;
  border-radius: 0.625rem;
  background: transparent;
  font-family: inherit;
  font-size: 0.8125rem;
  font-weight: 500;
  color: #111827;
  cursor: pointer;
  transition:
    border-color 200ms ease,
    background 200ms ease,
    color 200ms ease;
}

button.meeting-modal__cal-day:hover {
  border-color: #d1d5db;
  background: #fff;
}

button.meeting-modal__cal-day.is-selected {
  border-color: #111827;
  background: #111827;
  color: #fff;
}

button.meeting-modal__cal-day.is-today:not(.is-selected) {
  border-color: rgba(17, 24, 39, 0.2);
  background: #fff;
}

.meeting-modal__cal-day.is-disabled {
  opacity: 0.32;
  cursor: default;
}

.meeting-modal__times {
  margin-top: 0;
}

.meeting-modal__block-title {
  margin: 0 0 0.65rem;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #9ca3af;
}

.meeting-modal__slots {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.5rem;
}

@media (min-width: 480px) {
  .meeting-modal__slots {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.meeting-modal__slots-hint {
  margin: 0;
  grid-column: 1 / -1;
  font-size: 0.8125rem;
  color: #9ca3af;
}

.meeting-modal__slots.is-stagger .meeting-modal__slot {
  animation: meeting-slot-in 360ms cubic-bezier(0.4, 0, 0.2, 1) both;
  animation-delay: calc(var(--slot-i, 0) * 28ms + 80ms);
}

@keyframes meeting-slot-in {
  from {
    opacity: 0;
    transform: translate3d(0, 0.35rem, 0) scale(0.98);
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
}

.meeting-modal__slot {
  min-height: 2.25rem;
  border: 1.5px solid #eceef1;
  border-radius: 0.625rem;
  background: #fafafa;
  padding: 0.5rem 0.35rem;
  font-family: inherit;
  font-size: 0.8125rem;
  font-weight: 500;
  color: #111827;
  text-align: center;
  cursor: pointer;
  transition:
    border-color 200ms ease,
    background 200ms ease;
}

.meeting-modal__slot:hover {
  border-color: #d1d5db;
  background: #fff;
}

.meeting-modal__slot.is-selected {
  border-color: #111827;
  background: #111827;
  color: #fff;
}

.meeting-modal__confirm {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 2.75rem;
  margin-top: 1rem;
  border: none;
  border-radius: 9999px;
  background: #111827;
  color: #fff;
  font-family: inherit;
  font-size: 0.9375rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 200ms ease, opacity 200ms ease;
}

.meeting-modal__confirm:hover:not(:disabled) {
  background: #374151;
}

.meeting-modal__confirm:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.meeting-modal__slots-status {
  margin: 0 0 0.75rem;
  font-size: 0.875rem;
  color: #6b7280;
}

.meeting-modal__form-error {
  margin: 0.75rem 0 0;
  font-size: 0.875rem;
  color: #b91c1c;
}

.meeting-modal__contact-form .quote-modal__fields {
  margin-top: 0.5rem;
}

.meeting-modal__picker[hidden],
.meeting-modal__success[hidden] {
  display: none !important;
}

.meeting-modal__success {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 18rem;
  padding: 3.5rem 1.5rem 2rem;
  text-align: center;
}

.meeting-modal__success-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 4rem;
  height: 4rem;
  border-radius: 9999px;
  background: rgba(17, 24, 39, 0.06);
  color: #111827;
}

.meeting-modal__success-title {
  margin: 1.25rem 0 0;
  font-size: 1.375rem;
  font-weight: 600;
  letter-spacing: -0.03em;
  color: #111827;
}

.meeting-modal__success-lead {
  margin: 0.65rem 0 0;
  max-width: 24rem;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: #6b7280;
}

.meeting-modal__done {
  margin-top: 1.5rem;
  min-height: 2.5rem;
  padding: 0 1.25rem;
  border: none;
  border-radius: 9999px;
  background: #111827;
  color: #fff;
  font-family: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
}

.meeting-modal__done:hover {
  background: #374151;
}

@media (prefers-reduced-motion: reduce) {
  .meeting-modal__flow-track {
    transition: none;
  }

  .meeting-modal__flow-panel[data-meeting-panel='times'].is-entering .meeting-modal__date-bar,
  .meeting-modal__flow-panel[data-meeting-panel='times'].is-entering .meeting-modal__block-title,
  .meeting-modal__flow-panel[data-meeting-panel='times'].is-entering .meeting-modal__times,
  .meeting-modal__flow-panel[data-meeting-panel='times'].is-entering .meeting-modal__confirm,
  .meeting-modal__slots.is-stagger .meeting-modal__slot {
    animation: none;
  }
}

/* —— Hakkımızda sayfası —— */
.page-about [data-about-reveal] {
  opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
  .page-about [data-about-reveal] {
    opacity: 1;
  }
}

.page-hero--about {
  min-height: auto;
}

.page-hero--about .page-hero__inner {
  padding-bottom: 2.5rem;
}

@media (min-width: 768px) {
  .page-hero--about .page-hero__inner {
    padding-bottom: 3.5rem;
  }
}

.about-hero__stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.25rem 2rem;
  margin: 2.5rem 0 0;
  padding: 1.75rem 1.5rem;
  border-radius: 1rem;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.08);
}

@media (min-width: 640px) {
  .about-hero__stats {
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
    padding: 2rem 2.25rem;
  }
}

.about-hero__stat dt {
  margin-bottom: 0.375rem;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #9ca3af;
}

.about-hero__stat dd {
  margin: 0;
  font-size: clamp(1.375rem, 2.5vw, 1.75rem);
  font-weight: 600;
  letter-spacing: -0.03em;
  color: #111827;
}

.about-page {
  background: #fff;
  padding: 3.5rem 0;
}

@media (min-width: 768px) {
  .about-page {
    padding: 5rem 0;
  }
}

/* —— Hakkımızda: yolculuk (monolit merdiven) —— */

.about-journey {
  background:
    radial-gradient(ellipse 90% 50% at 50% 100%, rgba(17, 24, 39, 0.04), transparent 70%),
    #f4f5f7;
  padding: 3.5rem 0 4.5rem;
  border-top: 1px solid rgba(17, 24, 39, 0.06);
}

@media (min-width: 768px) {
  .about-journey {
    padding: 5rem 0 6rem;
  }
}

.about-journey__head {
  margin-bottom: 2.5rem;
}

@media (min-width: 768px) {
  .about-journey__head {
    margin-bottom: 3.5rem;
  }
}

.about-journey__staircase {
  position: relative;
  padding-bottom: 0.75rem;
}

.about-journey__steps {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.about-journey__step {
  --monolith-h: 3.25rem;
}

.about-journey__step:nth-child(2) {
  --monolith-h: 4.75rem;
}

.about-journey__step:nth-child(3) {
  --monolith-h: 6.25rem;
}

.about-journey__step:nth-child(4) {
  --monolith-h: 7.75rem;
}

.about-journey__step:nth-child(5) {
  --monolith-h: 9.25rem;
}

.about-journey__card {
  display: flex;
  flex-direction: column;
  gap: 0;
  height: 100%;
}

.about-journey__card-panel {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-bottom: 0.65rem;
  padding: 1.35rem 1.4rem;
  border-radius: 1.25rem;
  background: #fff;
  border: 1px solid rgba(17, 24, 39, 0.07);
  box-shadow:
    0 1px 2px rgba(17, 24, 39, 0.03),
    0 14px 40px rgba(17, 24, 39, 0.07);
  transition:
    border-color 280ms ease,
    box-shadow 280ms ease,
    transform 280ms ease;
}

.about-journey__card:hover .about-journey__card-panel {
  border-color: rgba(17, 24, 39, 0.11);
  box-shadow:
    0 1px 2px rgba(17, 24, 39, 0.04),
    0 22px 48px rgba(17, 24, 39, 0.1);
  transform: translateY(-4px);
}

.about-journey__monolith {
  width: 100%;
  height: var(--monolith-h);
  margin-top: auto;
  padding-top: 0.5rem;
}

.about-journey__monolith-block {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 0.75rem 0.75rem 0.35rem 0.35rem;
  background: linear-gradient(180deg, #52525b 0%, #27272a 55%, #18181b 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    0 10px 28px rgba(17, 24, 39, 0.1);
}

.about-journey__card-head {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.about-journey__date {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #6b7280;
}

.about-journey__card-title {
  margin: 0;
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: #111827;
}

.about-journey__card-text {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.65;
  color: #4b5563;
}

.about-journey__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.about-journey__tags li {
  padding: 0.35rem 0.7rem;
  border-radius: 9999px;
  background: #f9fafb;
  border: 1px solid rgba(17, 24, 39, 0.07);
  font-size: 0.6875rem;
  font-weight: 600;
  line-height: 1.3;
  color: #374151;
}

.about-journey__plaza {
  position: absolute;
  z-index: 0;
  right: 0;
  bottom: 0;
  left: 0;
  height: 1px;
  background: rgba(17, 24, 39, 0.1);
}

@media (min-width: 900px) {
  .about-journey__steps {
    flex-direction: row;
    align-items: flex-end;
    gap: 0.85rem;
  }

  .about-journey__step {
    flex: 1;
    min-width: 0;
  }

  .about-journey__step:nth-child(1) {
    --monolith-h: 4rem;
  }

  .about-journey__step:nth-child(2) {
    --monolith-h: 6rem;
  }

  .about-journey__step:nth-child(3) {
    --monolith-h: 8rem;
  }

  .about-journey__step:nth-child(4) {
    --monolith-h: 10rem;
  }

  .about-journey__step:nth-child(5) {
    --monolith-h: 12rem;
  }

  .about-journey__card {
    height: 100%;
  }

  .about-journey__card-panel {
    flex: 1;
    min-height: 13.5rem;
    padding: 1.5rem 1.35rem;
    border-radius: 1.35rem;
  }

  .about-journey__card-title {
    font-size: 1.125rem;
  }

  .about-journey__monolith-block {
    border-radius: 0.85rem 0.85rem 0.4rem 0.4rem;
  }
}

@media (min-width: 1200px) {
  .about-journey__steps {
    gap: 1rem;
  }

  .about-journey__card-panel {
    min-height: 14rem;
    padding: 1.65rem 1.5rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .about-journey__card-panel {
    transition: none;
  }

  .about-journey__card:hover .about-journey__card-panel {
    transform: none;
  }
}

.about-page__intro {
  padding-bottom: 3rem;
  border-bottom: 1px solid rgba(17, 24, 39, 0.08);
}

@media (min-width: 768px) {
  .about-page__intro {
    padding-bottom: 4rem;
  }
}

.about-page__eyebrow {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  margin: 0 0 1.25rem;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #6b7280;
}

.about-page__intro-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
}

@media (min-width: 1024px) {
  .about-page__intro-grid {
    grid-template-columns: 1.15fr 1fr;
    gap: 3rem;
    align-items: end;
  }
}

.about-page__headline {
  margin: 0;
  font-size: clamp(2rem, 5.5vw, 3.75rem);
  font-weight: 600;
  line-height: 1.06;
  letter-spacing: -0.03em;
  color: #111827;
}

.about-page__lede {
  margin: 0;
  max-width: 34rem;
  font-size: 15px;
  line-height: 1.75;
  color: #4b5563;
}

@media (min-width: 768px) {
  .about-page__lede {
    font-size: 16px;
  }
}

.about-page__story {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  padding-top: 3rem;
}

@media (min-width: 1024px) {
  .about-page__story {
    grid-template-columns: 1fr 1.05fr;
    gap: 4rem;
    align-items: center;
    padding-top: 4rem;
  }
}

.about-page__story-copy p {
  margin: 0 0 1.125rem;
  font-size: 15px;
  line-height: 1.75;
  color: #374151;
}

@media (min-width: 768px) {
  .about-page__story-copy p {
    font-size: 16px;
  }
}

.about-page__story-cta {
  display: inline-flex;
  margin-top: 1.75rem;
  text-decoration: none;
}

.about-page__story-media {
  position: relative;
  min-height: 18rem;
}

.about-page__story-img {
  display: block;
  border-radius: 0.75rem;
  object-fit: cover;
}

.about-page__story-img--primary {
  width: min(100%, 22rem);
  aspect-ratio: 4 / 5;
}

.about-page__story-img--secondary {
  position: absolute;
  right: 0;
  bottom: -1.5rem;
  width: min(58%, 14rem);
  aspect-ratio: 5 / 6;
  box-shadow: 0 24px 48px rgba(17, 24, 39, 0.12);
}

@media (min-width: 640px) {
  .about-page__story-img--secondary {
    bottom: -2rem;
  }
}

.about-page__belief {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  padding-top: 4rem;
  border-top: 1px solid rgba(17, 24, 39, 0.08);
}

@media (min-width: 768px) {
  .about-page__belief {
    grid-template-columns: 1fr 1px 1fr;
    gap: 3rem 4rem;
    padding-top: 5rem;
  }
}

.about-page__belief-divider {
  display: none;
  width: 1px;
  background: rgba(17, 24, 39, 0.08);
}

@media (min-width: 768px) {
  .about-page__belief-divider {
    display: block;
  }
}

.about-page__belief-label {
  display: block;
  margin-bottom: 1rem;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #6b7280;
}

.about-page__belief-statement {
  margin: 0 0 1rem;
  font-size: clamp(1.375rem, 2.8vw, 1.875rem);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.03em;
  color: #111827;
}

.about-page__belief-detail {
  margin: 0;
  max-width: 28rem;
  font-size: 15px;
  line-height: 1.75;
  color: #6b7280;
}

@media (min-width: 768px) {
  .about-page__belief-detail {
    font-size: 16px;
  }
}

.about-page--values {
  background: #f4f5f7;
}

.about-page__values-head {
  margin-bottom: 2.5rem;
}

@media (min-width: 768px) {
  .about-page__values-head {
    margin-bottom: 3rem;
  }
}

.about-page__values-grid {
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  .about-page__values-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.about-page__values-more {
  margin: 2rem 0 0;
  text-align: left;
}

@media (min-width: 768px) {
  .about-page__values-more {
    margin-top: 2.5rem;
  }
}

.about-page__values-more a {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 14px;
  font-weight: 600;
  color: #111827;
  text-decoration: none;
  transition: gap 200ms ease;
}

.about-page__values-more a:hover {
  gap: 0.55rem;
}

/* —— Hakkımızda: değer kartları (feature style) —— */

.about-page__values-grid {
  gap: 1.25rem;
}

@media (min-width: 768px) {
  .about-page__values-grid {
    gap: 1.5rem;
  }
}

.about-page__values-grid .solution-col--feature {
  overflow: hidden;
  min-height: 26rem;
  border: 1px solid rgba(17, 24, 39, 0.06);
  border-radius: 2rem;
  background: #fff;
  padding: 0;
  box-shadow:
    0 1px 3px rgba(17, 24, 39, 0.03),
    0 16px 48px rgba(17, 24, 39, 0.06);
  transition:
    border-color 320ms ease,
    box-shadow 320ms ease,
    transform 320ms ease;
}

.about-page__values-grid .solution-col--feature:hover {
  border-color: rgba(17, 24, 39, 0.09);
  background: #fff;
  box-shadow:
    0 1px 3px rgba(17, 24, 39, 0.04),
    0 24px 56px rgba(17, 24, 39, 0.1);
  transform: translateY(-4px);
}

.about-page__values-grid .solution-col__body {
  padding: 2rem 2rem 0;
}

@media (min-width: 768px) {
  .about-page__values-grid .solution-col__body {
    padding: 2.25rem 2.25rem 0;
  }
}

.about-page__values-grid .solution-col__icon {
  width: 2.5rem;
  height: 2.5rem;
  margin-bottom: 1.25rem;
  background: #1a1a1a;
  color: #fff;
}

.about-page__values-grid .solution-col--feature:hover .solution-col__icon {
  background: #1a1a1a;
  color: #fff;
  transform: none;
}

.about-page__values-grid .solution-col h3 {
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.2;
  color: #111827;
}

@media (min-width: 768px) {
  .about-page__values-grid .solution-col h3 {
    font-size: 1.3125rem;
  }
}

.about-page__values-grid .solution-col p {
  margin-top: 0.625rem;
  max-width: 28ch;
  font-size: 0.875rem;
  line-height: 1.65;
  color: #6b7280;
}

@media (min-width: 768px) {
  .about-page__values-grid .solution-col p {
    margin-top: 0.75rem;
    font-size: 0.9375rem;
  }
}

.about-page__values-grid .solution-col__visual {
  position: relative;
  flex: 1;
  min-height: 11.5rem;
  margin-top: 2rem;
  pointer-events: none;
}

@media (min-width: 768px) {
  .about-page__values-grid .solution-col__visual {
    min-height: 12.5rem;
    margin-top: 2.25rem;
  }
}

/* Feature scene — shared */

.about-page__values-grid .feature-scene {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: inherit;
}

.about-page__values-grid .feature-scene__pill {
  position: absolute;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  padding: 0.45rem 0.9rem;
  border-radius: 9999px;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: #374151;
  white-space: nowrap;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(17, 24, 39, 0.07);
  box-shadow:
    0 2px 8px rgba(17, 24, 39, 0.06),
    0 12px 32px rgba(17, 24, 39, 0.08);
  backdrop-filter: blur(12px);
}

/* Sahiplenme — katmanlı panel + kart */

.about-page__values-grid .solution-col__visual--ownership {
  background: linear-gradient(180deg, transparent 0%, #f6f7f9 55%, #eef0f3 100%);
}

.about-page__values-grid .feature-scene__panel--back {
  position: absolute;
  top: 0.75rem;
  right: 1rem;
  left: 2.75rem;
  padding: 0.85rem 1rem;
  border-radius: 1rem;
  background: #fff;
  border: 1px solid rgba(17, 24, 39, 0.06);
  box-shadow: 0 8px 28px rgba(17, 24, 39, 0.06);
}

.about-page__values-grid .feature-scene__panel-head {
  display: flex;
  gap: 0.3rem;
  margin-bottom: 0.65rem;
}

.about-page__values-grid .feature-scene__panel-head span {
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 9999px;
  background: #e5e7eb;
}

.about-page__values-grid .feature-scene__panel-head span:first-child {
  background: #fca5a5;
}

.about-page__values-grid .feature-scene__panel-head span:nth-child(2) {
  background: #fcd34d;
}

.about-page__values-grid .feature-scene__panel-head span:nth-child(3) {
  background: #86efac;
}

.about-page__values-grid .feature-scene__panel-line {
  height: 0.35rem;
  margin-top: 0.45rem;
  border-radius: 9999px;
  background: #f3f4f6;
}

.about-page__values-grid .feature-scene__panel-line--lg {
  width: 72%;
  margin-top: 0;
  background: #e5e7eb;
}

.about-page__values-grid .feature-scene__panel-line--sm {
  width: 42%;
}

.about-page__values-grid .feature-scene__chip {
  position: absolute;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 9999px;
  color: #374151;
  background: #fff;
  border: 1px solid rgba(17, 24, 39, 0.08);
  box-shadow: 0 6px 20px rgba(17, 24, 39, 0.1);
}

.about-page__values-grid .feature-scene__chip--a {
  top: 1.25rem;
  left: 1.25rem;
}

.about-page__values-grid .feature-scene__chip--b {
  top: 3.75rem;
  left: 0.75rem;
}

.about-page__values-grid .feature-scene__card--dark {
  position: absolute;
  z-index: 4;
  right: 1.5rem;
  bottom: 0;
  left: 1.5rem;
  padding: 1rem 1.1rem;
  border-radius: 1rem;
  color: #fff;
  background: linear-gradient(145deg, #2d3748 0%, #1a202c 100%);
  box-shadow:
    0 12px 32px rgba(17, 24, 39, 0.22),
    0 2px 8px rgba(17, 24, 39, 0.12);
  transform: rotate(-2deg);
}

.about-page__values-grid .feature-scene__card-label {
  display: block;
  font-size: 0.5625rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
}

.about-page__values-grid .feature-scene__card-value {
  display: block;
  margin-top: 0.2rem;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.about-page__values-grid .feature-scene__card-avatars {
  display: flex;
  margin-top: 0.75rem;
}

.about-page__values-grid .feature-scene__card-avatars span {
  width: 1.5rem;
  height: 1.5rem;
  margin-left: -0.35rem;
  border-radius: 9999px;
  border: 2px solid #1a202c;
  background: linear-gradient(135deg, #94a3b8, #64748b);
}

.about-page__values-grid .feature-scene__card-avatars span:first-child {
  margin-left: 0;
  background: linear-gradient(135deg, #93c5fd, #3b82f6);
}

.about-page__values-grid .feature-scene__card-avatars span:nth-child(2) {
  background: linear-gradient(135deg, #6ee7b7, #10b981);
}

.about-page__values-grid .feature-scene__card-avatars span:nth-child(3) {
  background: linear-gradient(135deg, #c4b5fd, #8b5cf6);
}

/* Şeffaflık — yüzen pill'ler */

.about-page__values-grid .solution-col__visual--transparency {
  background: linear-gradient(180deg, transparent 0%, #f8f9fb 100%);
}

.about-page__values-grid .feature-scene--pills {
  display: flex;
  align-items: center;
  justify-content: center;
}

.about-page__values-grid .feature-scene__pill--1 {
  top: 1.5rem;
  left: 50%;
  transform: translateX(-58%);
}

.about-page__values-grid .feature-scene__pill--2 {
  top: 50%;
  left: 50%;
  transform: translate(-42%, -50%);
  z-index: 3;
}

.about-page__values-grid .feature-scene__pill--3 {
  right: 1.25rem;
  bottom: 1.75rem;
}

/* Monolit mimari — grid + kart */

.about-page__values-grid .solution-col__visual--architecture {
  background: linear-gradient(180deg, transparent 0%, #f6f7f9 100%);
}

.about-page__values-grid .feature-scene__grid {
  position: absolute;
  top: 0.5rem;
  left: 50%;
  display: grid;
  grid-template-columns: repeat(3, 1.75rem);
  gap: 0.45rem;
  transform: translateX(-50%);
  opacity: 0.55;
}

.about-page__values-grid .feature-scene__grid span {
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 0.45rem;
  background: #e5e7eb;
}

.about-page__values-grid .feature-scene__grid span.is-active {
  background: linear-gradient(135deg, #6ee7b7, #34d399);
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.25);
}

.about-page__values-grid .feature-scene__pill--tag-a {
  top: 0.75rem;
  left: 1rem;
  font-size: 0.625rem;
}

.about-page__values-grid .feature-scene__pill--tag-b {
  top: 2rem;
  right: 0.75rem;
  font-size: 0.625rem;
}

.about-page__values-grid .feature-scene__card--light {
  position: absolute;
  right: 1.75rem;
  bottom: 0;
  left: 1.75rem;
  padding: 1rem;
  border-radius: 0.85rem;
  background: linear-gradient(160deg, #fff 0%, #f9fafb 100%);
  border: 1px solid rgba(17, 24, 39, 0.07);
  box-shadow:
    0 10px 32px rgba(17, 24, 39, 0.08),
    0 2px 6px rgba(17, 24, 39, 0.04);
  transform: rotate(1.5deg);
}

.about-page__values-grid .feature-scene__card-chip {
  display: block;
  width: 2rem;
  height: 0.35rem;
  border-radius: 9999px;
  background: #d1d5db;
}

.about-page__values-grid .feature-scene__card-stack {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin-top: 0.75rem;
}

.about-page__values-grid .feature-scene__card-stack span {
  display: block;
  height: 0.45rem;
  border-radius: 9999px;
  background: #f3f4f6;
}

.about-page__values-grid .feature-scene__card-stack span:first-child {
  width: 100%;
  background: linear-gradient(90deg, #e5e7eb, #f3f4f6);
}

.about-page__values-grid .feature-scene__card-stack span:nth-child(2) {
  width: 78%;
}

.about-page__values-grid .feature-scene__card-stack span:nth-child(3) {
  width: 52%;
}

.about-page__flow.manifesto {
  padding-top: 4.5rem;
  padding-bottom: 4.5rem;
}

@media (min-width: 768px) {
  .about-page__flow.manifesto {
    padding-top: 6rem;
    padding-bottom: 6rem;
  }
}

.about-page__flow-line {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.625rem 1rem;
  margin: 2rem 0 0;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: #111827;
}

@media (min-width: 640px) {
  .about-page__flow-line {
    margin-top: 2.25rem;
    font-size: 15px;
  }
}

.about-page__flow-sep {
  color: #d1d5db;
  font-weight: 400;
}

.about-page__section-head {
  margin-bottom: 2.5rem;
}

@media (min-width: 768px) {
  .about-page__section-head {
    margin-bottom: 3rem;
  }
}

.about-page__section-head--split {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
}

@media (min-width: 1024px) {
  .about-page__section-head--split {
    grid-template-columns: 1.1fr 1fr;
    gap: 3rem;
    align-items: end;
  }
}

.about-page__section-title {
  margin: 0;
  font-size: clamp(1.75rem, 4.5vw, 3rem);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.03em;
  color: #111827;
}

.about-page__section-lede {
  margin: 0;
  max-width: 32rem;
  font-size: 15px;
  line-height: 1.75;
  color: #4b5563;
}

@media (min-width: 768px) {
  .about-page__section-lede {
    font-size: 16px;
  }
}

.about-page__refs-head {
  margin-bottom: 2.5rem;
}

@media (min-width: 768px) {
  .about-page__refs-head {
    margin-bottom: 3rem;
  }
}

/* —— Referanslar (logo grid) —— */
.refs-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 640px) {
  .refs-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
  }
}

@media (min-width: 900px) {
  .refs-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (min-width: 1200px) {
  .refs-grid--about {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 1.125rem;
  }
}

.refs-grid__link {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 5.25rem;
  padding: 1.125rem 1rem;
  border: 1px solid rgba(17, 24, 39, 0.08);
  border-radius: 1rem;
  background: #fff;
  color: inherit;
  text-decoration: none;
  transition:
    border-color 280ms ease,
    box-shadow 280ms ease,
    transform 280ms cubic-bezier(0.22, 1, 0.36, 1);
}

@media (min-width: 768px) {
  .refs-grid__link {
    min-height: 5.75rem;
    padding: 1.25rem 1.125rem;
    border-radius: 1.125rem;
  }
}

.refs-grid__link:hover {
  border-color: rgba(17, 24, 39, 0.14);
  box-shadow: 0 14px 36px rgba(17, 24, 39, 0.07);
  transform: translateY(-2px);
}

.refs-grid__logo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-height: 3rem;
}

.refs-grid__img {
  display: block;
  max-width: 100%;
  max-height: 3rem;
  width: auto;
  height: auto;
  object-fit: contain;
  filter: grayscale(1);
  opacity: 0.68;
  transition: filter 280ms ease, opacity 280ms ease;
}

.refs-grid__link:hover .refs-grid__img {
  filter: grayscale(0);
  opacity: 1;
}

.refs-grid__wordmark {
  font-size: clamp(0.875rem, 2vw, 1rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1;
  color: rgba(17, 24, 39, 0.34);
  transition: color 280ms ease;
}

.refs-grid__link:hover .refs-grid__wordmark {
  color: #111827;
}

.refs-grid__img + .refs-grid__wordmark {
  display: none;
}

/* —— Ana sayfa referanslar —— */
.home-refs {
  position: relative;
  overflow: hidden;
  padding: 4rem 0 4.5rem;
  background: #fff;
  border-top: 1px solid rgba(17, 24, 39, 0.06);
}

@media (min-width: 640px) {
  .home-refs {
    padding: 5rem 0 5.5rem;
  }
}

@media (min-width: 1024px) {
  .home-refs {
    padding: 6rem 0 6.5rem;
  }
}

.home-refs__header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
  margin-bottom: 2.5rem;
  padding: 0 1.25rem;
}

@media (min-width: 640px) {
  .home-refs__header {
    margin-bottom: 3rem;
    padding: 0 2rem;
  }
}

@media (min-width: 1024px) {
  .home-refs__header {
    margin-bottom: 3.5rem;
    padding: 0 3rem;
  }
}

.home-refs__eyebrow {
  margin: 0 0 0.5rem;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(17, 24, 39, 0.42);
}

@media (min-width: 640px) {
  .home-refs__eyebrow {
    font-size: 12px;
  }
}

.home-refs__title {
  margin: 0;
  font-size: clamp(1.75rem, 5vw, 3rem);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -0.03em;
  color: #111827;
}

.home-refs__view-all {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.5rem 0.5rem 1.125rem;
  border: 1.5px solid rgba(17, 24, 39, 0.14);
  border-radius: 9999px;
  font-size: 13px;
  font-weight: 500;
  color: #111827;
  text-decoration: none;
  white-space: nowrap;
  transition: border-color 200ms, background 200ms;
}

.home-refs__view-all:hover {
  border-color: rgba(17, 24, 39, 0.3);
  background: rgba(17, 24, 39, 0.04);
}

.home-refs__view-all-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 9999px;
  background: #111827;
  color: #fff;
}

@media (min-width: 640px) {
  .home-refs__view-all {
    padding-left: 1.25rem;
    font-size: 14px;
  }

  .home-refs__view-all-icon {
    width: 2rem;
    height: 2rem;
  }
}

.home-refs__stage {
  position: relative;
  padding: 0 1.25rem 2.5rem;
}

@media (min-width: 640px) {
  .home-refs__stage {
    padding: 0 2rem 3rem;
  }
}

@media (min-width: 1024px) {
  .home-refs__stage {
    padding: 0 3rem 3.5rem;
  }
}

.home-refs__stage::before {
  content: '';
  position: absolute;
  inset: 0 1.25rem auto;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(17, 24, 39, 0.1) 20%, rgba(17, 24, 39, 0.1) 80%, transparent);
  opacity: 0;
  transform: scaleX(0.6);
  transition: opacity 800ms ease, transform 900ms cubic-bezier(0.22, 1, 0.36, 1);
}

.home-refs__stage.is-visible::before {
  opacity: 1;
  transform: scaleX(1);
}

@media (min-width: 640px) {
  .home-refs__stage::before {
    inset-inline: 2rem;
  }
}

@media (min-width: 1024px) {
  .home-refs__stage::before {
    inset-inline: 3rem;
  }
}

.home-refs__spotlight {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: clamp(4.5rem, 14vw, 7.5rem);
  padding: 1.75rem 0 2rem;
  overflow: hidden;
}

.home-refs__spotlight-label {
  display: flex;
  align-items: flex-end;
  min-width: 0;
  max-width: min(100%, 22rem);
  will-change: transform, opacity, filter;
}

.home-refs__spotlight-logo {
  display: block;
  max-height: clamp(3rem, 11vw, 5.25rem);
  max-width: 100%;
  width: auto;
  object-fit: contain;
  object-position: left bottom;
}

.home-refs__spotlight-name {
  display: block;
  max-width: 16ch;
  font-size: clamp(2.5rem, 9vw, 5.5rem);
  font-weight: 600;
  line-height: 0.95;
  letter-spacing: -0.045em;
  color: #111827;
}

.home-refs__spotlight-index {
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  font-variant-numeric: tabular-nums;
  color: rgba(17, 24, 39, 0.28);
}

@media (min-width: 640px) {
  .home-refs__spotlight-index {
    font-size: 12px;
  }
}

.home-refs__cloud {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.625rem 0.875rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 768px) {
  .home-refs__cloud {
    gap: 0.75rem 1rem;
    justify-content: flex-start;
  }
}

.home-refs__cloud-item {
  opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
  .home-refs__cloud-item {
    opacity: 1;
    animation: none !important;
  }
}

.home-refs__stage.is-visible .home-refs__cloud-item {
  animation: home-refs-float 5.5s ease-in-out infinite;
  animation-delay: calc(var(--drift, 0) * 1s);
}

.home-refs__cloud-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.875rem;
  border: 1px solid transparent;
  border-radius: 9999px;
  background: transparent;
  color: inherit;
  text-decoration: none;
  transition:
    border-color 280ms ease,
    background 280ms ease,
    color 280ms ease,
    transform 280ms cubic-bezier(0.22, 1, 0.36, 1);
}

.home-refs__cloud-item[data-tier='1'] .home-refs__cloud-link {
  padding-inline: 1rem;
}

.home-refs__cloud-item[data-tier='2'] .home-refs__cloud-link {
  padding-inline: 1.125rem;
}

.home-refs__cloud-link:hover,
.home-refs__cloud-item.is-active .home-refs__cloud-link {
  border-color: rgba(17, 24, 39, 0.12);
  background: rgba(17, 24, 39, 0.03);
  transform: translateY(-1px);
}

.home-refs__cloud-item.is-active .home-refs__cloud-link {
  border-color: rgba(242, 101, 34, 0.28);
  background: rgba(242, 101, 34, 0.06);
}

.home-refs__cloud-img {
  display: block;
  flex-shrink: 0;
  max-height: 1.125rem;
  width: auto;
  object-fit: contain;
  filter: grayscale(1);
  opacity: 0.55;
  transition: filter 280ms ease, opacity 280ms ease;
}

.home-refs__cloud-link:hover .home-refs__cloud-img,
.home-refs__cloud-item.is-active .home-refs__cloud-img {
  filter: grayscale(0);
  opacity: 1;
}

.home-refs__cloud-wordmark {
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.2;
  white-space: nowrap;
  color: rgba(17, 24, 39, 0.52);
  transition: color 280ms ease;
}

.home-refs__cloud-item[data-tier='1'] .home-refs__cloud-wordmark {
  font-size: 0.875rem;
}

.home-refs__cloud-item[data-tier='2'] .home-refs__cloud-wordmark {
  font-size: 0.9375rem;
}

.home-refs__cloud-link:hover .home-refs__cloud-wordmark,
.home-refs__cloud-item.is-active .home-refs__cloud-wordmark {
  color: #111827;
}

.home-refs__cloud-item.is-active .home-refs__cloud-wordmark {
  color: #c24e12;
}

.home-refs__cta {
  padding: 0 1.25rem;
  opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
  .home-refs__cta {
    opacity: 1;
  }
}

@media (min-width: 640px) {
  .home-refs__cta {
    padding: 0 2rem;
  }
}

@media (min-width: 1024px) {
  .home-refs__cta {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 2rem 3rem;
    padding: 0 3rem;
  }
}

.home-refs__lede {
  margin: 0;
  max-width: 34rem;
  font-size: 15px;
  line-height: 1.7;
  color: #6b7280;
}

@media (min-width: 640px) {
  .home-refs__lede {
    font-size: 16px;
  }
}

.home-refs__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.5rem;
}

@media (min-width: 1024px) {
  .home-refs__actions {
    margin-top: 0;
    justify-content: flex-end;
  }
}

.home-refs__btn-primary,
.home-refs__btn-secondary {
  text-decoration: none;
}

.home-refs__btn-primary.btn-orange {
  background: #111827;
  color: #fff;
  transition: background 300ms;
}

.home-refs__btn-primary.btn-orange:hover {
  background: #1f2937;
}

.home-refs__btn-primary.btn-orange .btn-roll__icon {
  background: #fff;
  color: #111827;
}

.home-refs__btn-secondary {
  cursor: pointer;
  font-family: inherit;
  border-color: rgba(17, 24, 39, 0.18);
  color: #111827;
}

.home-refs__btn-secondary:hover {
  border-color: rgba(17, 24, 39, 0.35);
  background: rgba(17, 24, 39, 0.04);
  color: #111827;
}

.home-refs__btn-secondary .btn-roll__icon {
  border-color: rgba(17, 24, 39, 0.16);
  color: #111827;
}

@keyframes home-refs-float {
  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-5px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .home-refs__stage.is-visible .home-refs__cloud-item {
    animation: none;
  }
}

.about-page .refs-grid--about {
  margin-top: 0.5rem;
}

.about-page__quote {
  padding: 4rem 0;
  background: #fff;
}

@media (min-width: 768px) {
  .about-page__quote {
    padding: 5.5rem 0;
  }
}

.about-page__quote-inner {
  margin: 0;
  max-width: 48rem;
}

.about-page__quote-inner p {
  margin: 0;
  font-size: clamp(1.375rem, 3.5vw, 2rem);
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: -0.02em;
  color: #111827;
}

.about-page a.btn-orange,
.about-page a.btn-outline {
  text-decoration: none;
}

/* —— Scroll to top —— */
.scroll-top {
  --scroll-top-color: #111827;

  position: fixed;
  right: 1.25rem;
  bottom: 1.25rem;
  z-index: 90;
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  padding: 0;
  border: none;
  border-radius: 9999px;
  background: transparent;
  color: var(--scroll-top-color);
  cursor: pointer;
  opacity: 0;
  transform: translateY(0.75rem) scale(0.92);
  pointer-events: none;
  transition:
    opacity 420ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 420ms cubic-bezier(0.22, 1, 0.36, 1),
    color 320ms ease;
}

.scroll-top.is-light {
  --scroll-top-color: #fff;
}

.scroll-top.is-dark {
  --scroll-top-color: #111827;
}

@media (min-width: 768px) {
  .scroll-top {
    right: 1.75rem;
    bottom: 1.75rem;
    width: 3.25rem;
    height: 3.25rem;
  }
}

.scroll-top.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.scroll-top__ring {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
  pointer-events: none;
}

.scroll-top__progress {
  fill: none;
  stroke: var(--scroll-top-color);
  stroke-width: 1.75;
  stroke-linecap: round;
  transition: stroke-dashoffset 80ms linear;
}

.scroll-top__icon {
  position: relative;
  z-index: 1;
  display: block;
  transition: transform 320ms cubic-bezier(0.22, 1, 0.36, 1);
}

.scroll-top:hover {
  transform: translateY(-2px) scale(1);
}

.scroll-top.is-visible:hover {
  transform: translateY(-2px) scale(1);
}

.scroll-top:hover .scroll-top__icon {
  transform: translateY(-1px);
}

.scroll-top:active {
  transform: translateY(0) scale(0.96);
}

.scroll-top.is-visible:active {
  transform: translateY(0) scale(0.96);
}

@media (prefers-reduced-motion: reduce) {
  .scroll-top {
    transition: opacity 200ms ease;
  }

  .scroll-top__progress {
    transition: none;
  }

  .scroll-top__icon {
    transition: none;
  }
}

/* —— Catalog pages (Hizmetler / Çözümler / Ürünler) —— */
.page-services,
.page-solutions,
.page-products {
  background: #fff;
}

.catalog-page {
  padding: 3rem 0 4rem;
}

@media (min-width: 768px) {
  .catalog-page {
    padding: 4rem 0 5rem;
  }
}

.catalog-page--solutions {
  padding-bottom: 0;
}

.catalog-page--cases {
  padding-top: 3rem;
}

.page-solutions .solution-areas {
  padding-top: 2.5rem;
}

@media (min-width: 768px) {
  .page-solutions .solution-areas {
    padding-top: 3rem;
  }
}

[data-catalog-reveal] {
  opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
  [data-catalog-reveal] {
    opacity: 1;
  }
}

.catalog-intro {
  padding-bottom: 2.5rem;
  border-bottom: 1px solid rgba(17, 24, 39, 0.08);
}

@media (min-width: 768px) {
  .catalog-intro {
    padding-bottom: 3rem;
  }
}

.catalog-intro__eyebrow {
  margin: 0 0 1.25rem;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #6b7280;
}

.catalog-intro__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
}

@media (min-width: 1024px) {
  .catalog-intro__grid {
    grid-template-columns: 1.15fr 1fr;
    gap: 3rem;
    align-items: end;
  }
}

.catalog-intro__headline {
  margin: 0;
  font-size: clamp(2rem, 5.5vw, 3.75rem);
  font-weight: 600;
  line-height: 1.06;
  letter-spacing: -0.03em;
  color: #111827;
}

.catalog-intro__lede {
  margin: 0;
  max-width: 34rem;
  font-size: 15px;
  line-height: 1.75;
  color: #4b5563;
}

@media (min-width: 768px) {
  .catalog-intro__lede {
    font-size: 16px;
  }
}

.catalog-section {
  padding-top: 2.5rem;
}

@media (min-width: 768px) {
  .catalog-section {
    padding-top: 3rem;
  }
}

.catalog-section--process {
  padding-top: 3.5rem;
  border-top: 1px solid rgba(17, 24, 39, 0.08);
}

.catalog-section__header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
  margin-bottom: 2rem;
}

.catalog-section__title {
  margin: 0;
  font-size: clamp(1.5rem, 4vw, 2.25rem);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: #111827;
}

.catalog-section__link {
  text-decoration: none;
}

.service-index {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid rgba(17, 24, 39, 0.08);
}

.service-index__link {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 1.25rem 1.5rem;
  padding: 1.375rem 0;
  border-bottom: 1px solid rgba(17, 24, 39, 0.08);
  color: inherit;
  text-decoration: none;
  transition: background 280ms ease, padding-inline 280ms ease;
}

@media (min-width: 768px) {
  .service-index__link {
    gap: 2rem;
    padding: 1.625rem 0.5rem;
  }
}

.service-index__link:hover {
  background: rgba(17, 24, 39, 0.02);
}

.service-index__index {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  font-variant-numeric: tabular-nums;
  color: rgba(17, 24, 39, 0.28);
}

.service-index__title {
  display: block;
  font-size: clamp(1.125rem, 2.5vw, 1.5rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: #111827;
}

.service-index__summary {
  display: block;
  margin-top: 0.375rem;
  max-width: 36rem;
  font-size: 14px;
  line-height: 1.6;
  color: #6b7280;
}

@media (min-width: 768px) {
  .service-index__summary {
    font-size: 15px;
  }
}

.service-index__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border: 1px solid rgba(17, 24, 39, 0.1);
  border-radius: 9999px;
  color: #111827;
  transition: border-color 280ms ease, transform 280ms cubic-bezier(0.22, 1, 0.36, 1);
}

.service-index__link:hover .service-index__arrow {
  border-color: rgba(17, 24, 39, 0.22);
  transform: translateX(2px);
}

.service-process {
  display: grid;
  gap: 1.5rem;
}

@media (min-width: 768px) {
  .service-process {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1.25rem;
  }
}

.service-process__step {
  padding: 1.25rem 0 0;
  border-top: 2px solid rgba(17, 24, 39, 0.08);
}

.service-process__step:first-child {
  border-top-color: #f26522;
}

.service-process__index {
  display: block;
  margin-bottom: 0.75rem;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: rgba(17, 24, 39, 0.32);
}

.service-process__title {
  margin: 0 0 0.5rem;
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: #111827;
}

.service-process__desc {
  margin: 0;
  font-size: 14px;
  line-height: 1.65;
  color: #6b7280;
}

.product-strips {
  display: flex;
  flex-direction: column;
  gap: 4rem;
}

@media (min-width: 768px) {
  .product-strips {
    gap: 5rem;
  }
}

.product-strip {
  display: grid;
  gap: 2rem;
  align-items: center;
  padding-bottom: 4rem;
  border-bottom: 1px solid rgba(17, 24, 39, 0.08);
}

.product-strip:last-child {
  padding-bottom: 0;
  border-bottom: none;
}

@media (min-width: 1024px) {
  .product-strip {
    grid-template-columns: 1fr 1.05fr;
    gap: 3.5rem;
  }

  .product-strip--reverse .product-strip__copy {
    order: 2;
  }

  .product-strip--reverse .product-strip__media {
    order: 1;
  }
}

.product-strip__eyebrow {
  margin: 0 0 0.625rem;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #6b7280;
}

.product-strip__title {
  margin: 0;
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.03em;
  color: #111827;
}

.product-strip__tagline {
  margin: 0.5rem 0 0;
  font-size: 15px;
  font-weight: 500;
  color: #374151;
}

.product-strip__summary {
  margin: 1rem 0 0;
  max-width: 32rem;
  font-size: 15px;
  line-height: 1.7;
  color: #6b7280;
}

.product-strip__features {
  margin: 1.25rem 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.5rem;
}

.product-strip__features li {
  position: relative;
  padding-left: 1rem;
  font-size: 14px;
  line-height: 1.55;
  color: #4b5563;
}

.product-strip__features li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 0.25rem;
  height: 0.25rem;
  border-radius: 9999px;
  background: #f26522;
}

.product-strip__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.5rem;
}

.product-strip__media {
  border-radius: 1.125rem;
  overflow: hidden;
  border: 1px solid rgba(17, 24, 39, 0.08);
  background: #f9fafb;
}

.product-strip__media img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.catalog-btn-dark.btn-orange {
  background: #111827;
  color: #fff;
}

.catalog-btn-dark.btn-orange:hover {
  background: #1f2937;
}

.catalog-btn-dark.btn-orange .btn-roll__icon {
  background: #fff;
  color: #111827;
}

.catalog-btn-outline-dark.btn-outline {
  border-color: rgba(17, 24, 39, 0.18);
  color: #111827;
}

.catalog-btn-outline-dark.btn-outline:hover {
  border-color: rgba(17, 24, 39, 0.35);
  background: rgba(17, 24, 39, 0.04);
  color: #111827;
}

.catalog-btn-outline-dark.btn-outline .btn-roll__icon {
  border-color: rgba(17, 24, 39, 0.16);
  color: #111827;
}

.catalog-cases {
  display: grid;
  gap: 1rem;
}

@media (min-width: 768px) {
  .catalog-cases {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.25rem;
  }
}

.catalog-case {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  padding: 1.375rem 1.25rem;
  border: 1px solid rgba(17, 24, 39, 0.08);
  border-radius: 1rem;
  background: #fff;
  color: inherit;
  text-decoration: none;
  transition:
    border-color 280ms ease,
    box-shadow 280ms ease,
    transform 280ms cubic-bezier(0.22, 1, 0.36, 1);
}

.catalog-case:hover {
  border-color: rgba(17, 24, 39, 0.14);
  box-shadow: 0 16px 40px rgba(17, 24, 39, 0.06);
  transform: translateY(-2px);
}

.catalog-case__label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #9ca3af;
}

.catalog-case__title {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: #111827;
}

.catalog-case__excerpt {
  margin: 0;
  flex: 1;
  font-size: 14px;
  line-height: 1.65;
  color: #6b7280;
}

.catalog-case__link {
  font-size: 13px;
  font-weight: 500;
  color: #111827;
}

.catalog-crosslink {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.625rem 1rem;
  margin-top: 3.5rem;
  padding-top: 2.5rem;
  border-top: 1px solid rgba(17, 24, 39, 0.08);
}

.catalog-crosslink__link {
  font-size: 14px;
  font-weight: 500;
  color: #9ca3af;
  text-decoration: none;
  transition: color 200ms ease;
}

.catalog-crosslink__link:hover {
  color: #111827;
}

.catalog-crosslink__link.is-current {
  color: #111827;
}

.catalog-crosslink__sep {
  color: rgba(17, 24, 39, 0.2);
  user-select: none;
}

/* —— Detail pages (hizmetler / cozumler / urunler) —— */
.page-detail {
  background: #fff;
}

[data-detail-reveal] {
  opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
  [data-detail-reveal] {
    opacity: 1;
  }
}

.detail-hero {
  padding: 2rem 0 2.5rem;
  border-bottom: 1px solid rgba(17, 24, 39, 0.08);
}

@media (min-width: 768px) {
  .detail-hero {
    padding: 2.5rem 0 3rem;
  }
}

.detail-hero__breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 1.5rem;
  font-size: 13px;
  color: #6b7280;
}

.detail-hero__breadcrumb a {
  color: #6b7280;
  text-decoration: none;
  transition: color 200ms ease;
}

.detail-hero__breadcrumb a:hover {
  color: #111827;
}

.detail-hero__eyebrow {
  margin: 0 0 0.75rem;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #6b7280;
}

.detail-hero__title {
  margin: 0 0 1rem;
  font-size: clamp(2rem, 5.5vw, 3.25rem);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.03em;
  color: #111827;
}

.detail-hero__lead {
  margin: 0;
  max-width: 40rem;
  font-size: 16px;
  line-height: 1.7;
  color: #4b5563;
}

.detail-page {
  padding: 2.5rem 0 3rem;
}

.detail-page__layout--product {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}

@media (min-width: 1024px) {
  .detail-page__layout--product {
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    align-items: start;
  }
}

.detail-page__tagline {
  margin: 0 0 1rem;
  font-size: 15px;
  font-weight: 500;
  color: #374151;
}

.detail-page__copy p {
  margin: 0 0 1rem;
  font-size: 15px;
  line-height: 1.75;
  color: #4b5563;
}

.detail-page__copy p:last-child {
  margin-bottom: 0;
}

.detail-page__highlights {
  margin: 1.75rem 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.65rem;
}

.detail-page__highlights li {
  position: relative;
  padding-left: 1.25rem;
  font-size: 14px;
  line-height: 1.5;
  color: #374151;
}

.detail-page__highlights li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #f97316;
}

.detail-page__cta {
  margin-top: 2rem;
}

.detail-page__media img {
  width: 100%;
  height: auto;
  border-radius: 12px;
  border: 1px solid rgba(17, 24, 39, 0.08);
}

.detail-process {
  padding: 2.5rem 0 3rem;
  border-top: 1px solid rgba(17, 24, 39, 0.08);
  background: #fafafa;
}

.detail-process__title {
  margin: 0 0 1.75rem;
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: #111827;
}

.detail-process__steps {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 1.25rem;
}

@media (min-width: 768px) {
  .detail-process__steps {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
  }
}

@media (min-width: 1024px) {
  .detail-process__steps {
    grid-template-columns: repeat(4, 1fr);
  }
}

.detail-process__step {
  display: flex;
  gap: 1rem;
  padding: 1.25rem;
  background: #fff;
  border: 1px solid rgba(17, 24, 39, 0.08);
  border-radius: 12px;
}

.detail-process__index {
  flex-shrink: 0;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #f97316;
}

.detail-process__body h3 {
  margin: 0 0 0.35rem;
  font-size: 15px;
  font-weight: 600;
  color: #111827;
}

.detail-process__body p {
  margin: 0;
  font-size: 13px;
  line-height: 1.55;
  color: #6b7280;
}

.detail-related {
  padding: 2.5rem 0 4rem;
  border-top: 1px solid rgba(17, 24, 39, 0.08);
}

.detail-related__title {
  margin: 0 0 1.25rem;
  font-size: clamp(1.35rem, 3vw, 1.75rem);
  font-weight: 600;
  color: #111827;
}

.detail-related__grid {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 1rem;
}

@media (min-width: 768px) {
  .detail-related__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.detail-related__card {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 1.25rem 1.5rem;
  border: 1px solid rgba(17, 24, 39, 0.08);
  border-radius: 12px;
  text-decoration: none;
  transition: border-color 200ms ease, box-shadow 200ms ease;
}

.detail-related__card:hover {
  border-color: rgba(249, 115, 22, 0.35);
  box-shadow: 0 8px 24px rgba(17, 24, 39, 0.06);
}

.detail-related__card-label {
  font-size: 12px;
  color: #6b7280;
}

.detail-related__card-title {
  font-size: 15px;
  font-weight: 600;
  color: #111827;
}

.detail-related__card-arrow {
  margin-top: 0.25rem;
  font-size: 14px;
  color: #f97316;
}

.detail-empty {
  padding: 4rem 0;
  text-align: center;
}

.detail-empty__title {
  margin: 0 0 0.75rem;
  font-size: 1.75rem;
  font-weight: 600;
  color: #111827;
}

.detail-empty__text {
  margin: 0 0 1.5rem;
  color: #6b7280;
}

/* —— Detail page hero (hakkımızda ile uyumlu) —— */
.page-hero--detail {
  min-height: auto;
}

.page-hero--detail .page-hero__inner {
  padding-bottom: 2.5rem;
}

@media (min-width: 768px) {
  .page-hero--detail .page-hero__inner {
    padding-bottom: 3.5rem;
  }
}

.page-hero__breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin: 2rem 0 0;
  font-size: 13px;
  color: #6b7280;
}

@media (min-width: 768px) {
  .page-hero__breadcrumb {
    margin-top: 2.5rem;
  }
}

.page-hero__breadcrumb a {
  color: #6b7280;
  text-decoration: none;
  transition: color 200ms ease;
}

.page-hero__breadcrumb a:hover {
  color: #111827;
}

.page-hero--detail .page-hero__title {
  margin-top: 1.25rem;
}

@media (min-width: 768px) {
  .page-hero--detail .page-hero__title {
    margin-top: 1.5rem;
  }
}

/* Çözüm sayfası hero — ana sayfa editorial görseli */
.page-hero--solution {
  min-height: auto;
}

.page-hero--solution .page-hero__split {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  align-items: end;
}

@media (min-width: 1024px) {
  .page-hero--solution .page-hero__split {
    grid-template-columns: minmax(0, 1.08fr) minmax(260px, 380px);
    gap: clamp(2rem, 4vw, 3.5rem);
    align-items: center;
  }
}

.page-hero--solution .page-hero__media {
  position: relative;
  margin: 0;
  width: 100%;
}

@media (max-width: 1023px) {
  .page-hero--solution .page-hero__media {
    max-width: 26rem;
  }
}

.page-hero--solution .page-hero__media-img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  border-radius: 1.125rem;
  object-fit: cover;
  box-shadow: 0 22px 44px rgba(17, 24, 39, 0.1);
}

.page-hero--solution .page-hero__media::after {
  content: '';
  position: absolute;
  inset: 0.875rem -0.875rem -0.875rem 0.875rem;
  border: 1px solid rgba(17, 24, 39, 0.09);
  border-radius: 1.125rem;
  pointer-events: none;
}

@media (min-width: 1024px) {
  .page-hero--solution .page-hero__inner {
    padding-bottom: clamp(2.5rem, 5vw, 4rem);
  }
}

.page-hero--solution .sol-hero__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1.25rem;
}

@media (min-width: 768px) {
  .page-hero--solution .sol-hero__meta {
    margin-top: 1.5rem;
  }
}

.sol-hero__badge {
  display: inline-flex;
  align-items: center;
  padding: 0.35rem 0.75rem;
  border-radius: 999px;
  border: 1px solid rgba(17, 24, 39, 0.08);
  background: rgba(255, 255, 255, 0.85);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #374151;
}

.sol-hero__badge--muted {
  border-color: rgba(17, 24, 39, 0.05);
  background: rgba(249, 250, 251, 0.9);
  color: #6b7280;
}

.sol-hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  margin-top: 1.75rem;
}

@media (min-width: 768px) {
  .sol-hero__actions {
    margin-top: 2rem;
  }
}

.page-detail[data-solution-page] .sol-hero__actions .sol-hero__cta,
.page-detail[data-solution-page] .sol-hero__actions .sol-hero__cta-secondary {
  padding: 0.5rem 0.5rem 0.5rem 1.25rem;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.2;
  min-height: 3rem;
  box-sizing: border-box;
}

@media (min-width: 640px) {
  .page-detail[data-solution-page] .sol-hero__actions .sol-hero__cta,
  .page-detail[data-solution-page] .sol-hero__actions .sol-hero__cta-secondary {
    padding-left: 1.5rem;
  }
}

.page-detail[data-solution-page] .sol-hero__actions .btn-roll__icon {
  width: 2rem;
  height: 2rem;
  flex-shrink: 0;
}

.page-detail[data-solution-page] .sol-hero__actions .sol-hero__cta-secondary.btn-outline {
  padding: calc(0.5rem - 1.5px) calc(0.5rem - 1.5px) calc(0.5rem - 1.5px) calc(1.25rem - 1.5px);
}

@media (min-width: 640px) {
  .page-detail[data-solution-page] .sol-hero__actions .sol-hero__cta-secondary.btn-outline {
    padding-left: calc(1.5rem - 1.5px);
  }
}

.sol-hero__cta-secondary.btn-outline {
  border-color: #000;
  color: #000;
}

.sol-hero__cta-secondary.btn-outline:hover {
  border-color: #000;
  background: rgba(0, 0, 0, 0.04);
  color: #000;
}

.sol-hero__cta-secondary.btn-outline .btn-roll__icon {
  border-color: #000;
  background: transparent;
  color: #000;
}

.sol-hero__cta-secondary.btn-outline:hover .btn-roll__icon {
  border-color: #000;
  background: rgba(0, 0, 0, 0.06);
  color: #000;
}

.sol-page--alpha .sol-section--outcomes {
  background: #fff;
}

.sol-page--beta .sol-section--outcomes {
  background: #f8fafc;
}

.sol-page--gamma .sol-section--outcomes {
  background: #f9fafb;
}

/* Editorial layout — görsel ağırlıklı, sade içerik */
.sol-page--editorial .sol-section--lead {
  padding-bottom: 2.5rem;
}

.sol-page--editorial .sol-metrics {
  border-color: rgba(17, 24, 39, 0.08);
}

.sol-page--editorial .sol-metrics__item + .sol-metrics__item {
  border-color: rgba(17, 24, 39, 0.08);
}

.sol-page--editorial .sol-metrics__value {
  font-size: clamp(1rem, 1.8vw, 1.25rem);
  font-weight: 600;
}

.sol-page--editorial .sol-metrics__label {
  font-size: 12px;
  letter-spacing: 0.01em;
}

.sol-page--editorial .sol-aside__figure {
  position: relative;
}

.sol-page--editorial .sol-aside__img {
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 0.35rem;
}

.sol-page--editorial .sol-aside__label {
  position: absolute;
  left: 1rem;
  bottom: 1rem;
  margin: 0;
  padding: 0.35rem 0.65rem;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #fff;
  background: #000;
}

.sol-page--editorial .sol-section--gallery {
  padding-top: 0;
  border-top: none;
}

.sol-page--editorial .sol-section--gallery .sol-section-head {
  max-width: 28rem;
  margin-bottom: 2rem;
}

.sol-page--editorial .sol-gallery {
  grid-template-columns: 1fr;
  gap: 0.75rem;
}

.sol-page--editorial .sol-gallery__item {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
}

.sol-page--editorial .sol-gallery__item:first-child {
  aspect-ratio: 16 / 11;
}

@media (min-width: 900px) {
  .sol-page--editorial .sol-gallery {
    grid-template-columns: 1.15fr 0.85fr;
    grid-template-rows: repeat(2, 1fr);
    gap: 1rem;
    height: clamp(420px, 40vw, 500px);
  }

  .sol-page--editorial .sol-gallery__item {
    aspect-ratio: auto;
    height: 100%;
    min-height: 0;
  }

  .sol-page--editorial .sol-gallery__item:first-child {
    grid-row: 1 / span 2;
    aspect-ratio: auto;
  }

  .sol-page--editorial .sol-gallery__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    min-height: 0;
    object-fit: cover;
    object-position: center;
    transform: none;
  }
}

.sol-page--editorial .sol-gallery__img {
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: cover;
  object-position: center;
}

.sol-page--editorial .sol-section--outcomes-editorial {
  background: #fff;
  border-top: none;
  padding: 2.5rem 0 3.25rem;
}

.sol-page--editorial .sol-outcomes--simple {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 1.75rem;
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  .sol-page--editorial .sol-outcomes--simple {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2.5rem;
  }
}

.sol-page--editorial .sol-outcomes__point {
  margin: 0;
}

.sol-page--editorial .sol-outcomes__title {
  margin: 0 0 0.4rem;
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.35;
  color: #111827;
}

.sol-page--editorial .sol-outcomes__desc {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: #6b7280;
}

.sol-page--editorial .sol-section--process {
  background: #fafafa;
}

@media (min-width: 1024px) {
  .sol-page--editorial .sol-story {
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  }

  .sol-page--editorial .sol-story__media {
    order: 2;
  }

  .sol-page--editorial .sol-story__copy {
    order: 1;
    padding-right: 2rem;
  }
}

.sol-page--editorial .sol-related {
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  .sol-page--editorial .sol-related {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.sol-section--outcomes {
  border-top: 1px solid rgba(17, 24, 39, 0.08);
  border-bottom: 1px solid rgba(17, 24, 39, 0.08);
}

.sol-outcomes {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 1rem;
}

@media (min-width: 768px) {
  .sol-outcomes {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.25rem;
  }
}

.sol-outcomes__item {
  border: 1px solid rgba(17, 24, 39, 0.08);
  border-radius: 18px;
  background: #fff;
  padding: 1.1rem 1rem 1.05rem;
}

.sol-outcomes__title {
  margin: 0;
  font-size: 17px;
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: #111827;
}

.sol-outcomes__desc {
  margin: 0.65rem 0 0;
  font-size: 14px;
  line-height: 1.65;
  color: #4b5563;
}

.sol-section--gallery {
  background: #fff;
}

.sol-gallery {
  display: grid;
  gap: 0.9rem;
}

@media (min-width: 768px) {
  .sol-gallery {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.1rem;
  }
}

.sol-gallery__item {
  margin: 0;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(17, 24, 39, 0.1);
  background: #f3f4f6;
}

.sol-gallery__img {
  width: 100%;
  height: 100%;
  min-height: 240px;
  display: block;
  object-fit: cover;
  transform: scale(1.03);
}

@media (min-width: 1024px) {
  .sol-page--alpha .sol-section--gallery .sol-section-head__title,
  .sol-page--gamma .sol-section--gallery .sol-section-head__title {
    max-width: 18ch;
  }
}

.page-detail[data-detail='solution'] {
  background: #fff;
}

/* —— Ürünler / SaaS —— */
.page-products {
  background: #fafafa;
}

.page-detail[data-detail='product'] {
  background: #fff;
}

[data-products-reveal] {
  opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
  [data-products-reveal] {
    opacity: 1;
  }
}

.saas-kicker {
  margin: 0 0 0.75rem;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #6b7280;
}

.saas-kicker--light {
  color: rgba(255, 255, 255, 0.55);
}

.saas-link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 14px;
  font-weight: 600;
  color: #111827;
  text-decoration: none;
  transition: gap 200ms ease, color 200ms ease;
}

.saas-link-arrow:hover {
  gap: 0.7rem;
  color: #ea580c;
}

/* Önizleme çerçevesi */
.saas-preview {
  border: 1px solid rgba(17, 24, 39, 0.1);
  border-radius: 0.85rem;
  background: #fff;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.9) inset,
    0 20px 48px rgba(17, 24, 39, 0.08);
  overflow: hidden;
}

.saas-preview__chrome {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.65rem 0.85rem;
  border-bottom: 1px solid rgba(17, 24, 39, 0.06);
  background: #f9fafb;
}

.saas-preview__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(17, 24, 39, 0.12);
}

.saas-preview__dot:first-child {
  background: rgba(249, 115, 22, 0.55);
}

.saas-preview__screen {
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: #f3f4f6;
}

.saas-preview__screen img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform-origin: center center;
}

.saas-preview--lg {
  border-radius: 1rem;
  margin-bottom: 2.5rem;
}

.saas-preview--lg .saas-preview__screen {
  aspect-ratio: 21 / 9;
}

@media (max-width: 767px) {
  .saas-preview--lg .saas-preview__screen {
    aspect-ratio: 16 / 10;
  }
}

/* Hub */
.saas-hub {
  padding-bottom: 0;
}

.saas-hub__intro {
  padding: 2.5rem 0 2rem;
}

@media (min-width: 768px) {
  .saas-hub__intro {
    padding: 3.5rem 0 2.5rem;
  }
}

.saas-hub__title {
  margin: 0;
  max-width: 18ch;
  font-size: clamp(1.75rem, 4.5vw, 2.75rem);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.03em;
  color: #111827;
}

.saas-hub__lede {
  margin: 1rem 0 0;
  max-width: 40rem;
  font-size: 15px;
  line-height: 1.75;
  color: #4b5563;
}

@media (min-width: 768px) {
  .saas-hub__lede {
    font-size: 16px;
  }
}

.saas-hub__trust {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 1.5rem 0 0;
  padding: 0;
  list-style: none;
}

.saas-hub__trust li {
  padding: 0.4rem 0.75rem;
  border: 1px solid rgba(17, 24, 39, 0.08);
  border-radius: 999px;
  background: #fff;
  font-size: 12px;
  font-weight: 500;
  color: #374151;
}

.saas-grid {
  margin: 0;
  padding: 0 0 3rem;
  list-style: none;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
}

@media (min-width: 900px) {
  .saas-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    padding-bottom: 4rem;
  }
}

.saas-card {
  height: 100%;
  border: 1px solid rgba(17, 24, 39, 0.08);
  border-radius: 1rem;
  background: #fff;
  transition: border-color 220ms ease, box-shadow 220ms ease, transform 220ms ease;
}

.saas-card:hover {
  border-color: rgba(17, 24, 39, 0.14);
  box-shadow: 0 20px 40px rgba(17, 24, 39, 0.08);
  transform: translateY(-2px);
}

.saas-card__link {
  display: flex;
  flex-direction: column;
  height: 100%;
  text-decoration: none;
  color: inherit;
}

.saas-card__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 1.25rem 1.25rem 1.35rem;
}

.saas-card__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.85rem;
}

.saas-card__badge {
  padding: 0.2rem 0.55rem;
  border-radius: 6px;
  background: rgba(17, 24, 39, 0.06);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #374151;
}

.saas-card__status {
  font-size: 11px;
  font-weight: 500;
  color: #9ca3af;
}

.saas-card__title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 0.5rem;
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: #111827;
}

.saas-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 8px;
  background: rgba(249, 115, 22, 0.1);
  color: #ea580c;
}

.saas-card__tagline {
  margin: 0 0 1rem;
  font-size: 14px;
  line-height: 1.55;
  color: #4b5563;
}

.saas-card__highlights {
  margin: 0 0 1.25rem;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  flex: 1;
}

.saas-card__highlights li {
  font-size: 12px;
  line-height: 1.5;
  color: #6b7280;
}

.saas-card__highlights strong {
  font-weight: 600;
  color: #374151;
}

.saas-card__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: auto;
  font-size: 13px;
  font-weight: 600;
  color: #111827;
  transition: gap 200ms ease, color 200ms ease;
}

.saas-card:hover .saas-card__cta {
  gap: 0.6rem;
  color: #ea580c;
}

.saas-card .saas-preview {
  border: none;
  border-radius: 0;
  box-shadow: none;
  border-bottom: 1px solid rgba(17, 24, 39, 0.06);
}

/* Ekosistem */
.saas-stack {
  margin-bottom: 3rem;
  padding: 2rem 1.25rem;
  border: 1px solid rgba(17, 24, 39, 0.08);
  border-radius: 1rem;
  background: #fff;
}

@media (min-width: 768px) {
  .saas-stack {
    padding: 2.5rem 2rem;
    margin-bottom: 4rem;
  }
}

.saas-stack__title {
  margin: 0;
  font-size: clamp(1.35rem, 3vw, 1.85rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: #111827;
}

.saas-stack__lede {
  margin: 0.75rem 0 0;
  max-width: 36rem;
  font-size: 15px;
  line-height: 1.7;
  color: #4b5563;
}

.saas-stack__list {
  margin: 2rem 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.65rem;
}

@media (min-width: 768px) {
  .saas-stack__list {
    grid-template-columns: repeat(3, 1fr);
    gap: 0.75rem;
  }
}

.saas-stack__item {
  display: grid;
  gap: 0.25rem;
  padding: 1rem 1.1rem;
  border: 1px solid rgba(17, 24, 39, 0.06);
  border-radius: 0.75rem;
  background: #fafafa;
}

.saas-stack__name {
  font-size: 14px;
  font-weight: 600;
  color: #111827;
}

.saas-stack__role {
  font-size: 13px;
  font-weight: 500;
  color: #ea580c;
}

.saas-stack__fits {
  font-size: 12px;
  line-height: 1.5;
  color: #6b7280;
}

.saas-stack__cta {
  margin-top: 1.75rem;
}

/* CTA band */
.saas-cta-band {
  padding: 0 0 4rem;
}

.page-detail[data-detail='product'] .saas-cta-band:last-child {
  padding-bottom: 0;
}

.saas-cta-band__inner {
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
  padding: 2.25rem 1.5rem;
  border-radius: 1rem;
  background: #111827;
  color: #fff;
}

@media (min-width: 768px) {
  .saas-cta-band__inner {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 2.5rem;
    padding: 2.75rem 2.5rem;
  }
}

.saas-cta-band__title {
  margin: 0;
  font-size: clamp(1.35rem, 3vw, 1.75rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.15;
}

.saas-cta-band__text {
  margin: 0.65rem 0 0;
  max-width: 28rem;
  font-size: 14px;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.62);
}

.saas-cta-band__actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.85rem;
  flex-shrink: 0;
}

.saas-cta-band__secondary,
.saas-product__secondary-link {
  font-size: 14px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.75);
  text-decoration: none;
  transition: color 200ms ease;
}

.saas-product__secondary-link {
  color: #6b7280;
}

.saas-cta-band__secondary:hover,
.saas-product__secondary-link:hover {
  color: #ea580c;
}

/* Ürün detay */
.saas-product-page {
  background: #fff;
}

.saas-product {
  padding: 2rem 0 0;
}

@media (min-width: 768px) {
  .saas-product {
    padding-top: 2.75rem;
  }
}

.saas-product__top {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  margin-bottom: 2rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid rgba(17, 24, 39, 0.08);
}

@media (min-width: 768px) {
  .saas-product__top {
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
    gap: 2rem;
  }
}

.saas-product__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

.saas-product__tagline {
  margin: 0;
  max-width: 32rem;
  font-size: clamp(1.05rem, 2vw, 1.3rem);
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: -0.01em;
  color: #374151;
}

.saas-product__top-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.75rem;
}

.saas-product__metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.65rem;
  margin: 0 0 3rem;
  padding: 0;
  list-style: none;
}

@media (max-width: 639px) {
  .saas-product__metrics {
    grid-template-columns: 1fr;
  }
}

.saas-product__metric {
  padding: 1.1rem 1rem;
  border: 1px solid rgba(17, 24, 39, 0.08);
  border-radius: 0.75rem;
  background: #fafafa;
}

.saas-product__metric-value {
  display: block;
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: #111827;
}

.saas-product__metric-label {
  display: block;
  margin-top: 0.25rem;
  font-size: 12px;
  color: #6b7280;
}

.saas-product__overview {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  padding-bottom: 3.5rem;
}

@media (min-width: 1024px) {
  .saas-product__overview {
    grid-template-columns: 1.2fr 0.8fr;
    gap: 3rem;
    align-items: start;
    padding-bottom: 4.5rem;
  }
}

.saas-product__headline {
  margin: 0 0 1rem;
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: #111827;
}

.saas-product__copy p {
  margin: 0 0 1rem;
  font-size: 15px;
  line-height: 1.75;
  color: #4b5563;
}

.saas-product__copy p:last-child {
  margin-bottom: 0;
}

.saas-product__check-label {
  margin: 0 0 1rem;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #9ca3af;
}

.saas-checklist {
  margin: 0;
  padding: 1.25rem;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  border: 1px solid rgba(17, 24, 39, 0.08);
  border-radius: 0.85rem;
  background: #fafafa;
}

.saas-checklist li {
  position: relative;
  padding-left: 1.35rem;
  font-size: 14px;
  line-height: 1.5;
  color: #374151;
}

.saas-checklist li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.45em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #f97316;
}

.saas-product__block {
  padding: 3rem 0;
  border-top: 1px solid rgba(17, 24, 39, 0.08);
}

.saas-product__block--muted {
  background: #fafafa;
}

.saas-product__block-head {
  margin-bottom: 2rem;
}

.saas-product__block-title {
  margin: 0;
  font-size: clamp(1.35rem, 3vw, 1.85rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: #111827;
}

.saas-bento {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.75rem;
}

@media (min-width: 768px) {
  .saas-bento {
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
  }
}

.saas-bento__item {
  padding: 1.35rem 1.25rem;
  border: 1px solid rgba(17, 24, 39, 0.08);
  border-radius: 0.85rem;
  background: #fff;
  transition: border-color 200ms ease, box-shadow 200ms ease;
}

.saas-product__block--muted .saas-bento__item {
  background: #fff;
}

.saas-bento__item:hover {
  border-color: rgba(249, 115, 22, 0.25);
  box-shadow: 0 12px 28px rgba(17, 24, 39, 0.06);
}

.saas-bento__title {
  margin: 0 0 0.5rem;
  font-size: 1rem;
  font-weight: 600;
  color: #111827;
}

.saas-bento__desc {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: #6b7280;
}

.saas-flow {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

@media (min-width: 768px) {
  .saas-flow {
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
  }
}

.saas-flow__step {
  padding: 1.35rem 1.25rem;
  border: 1px solid rgba(17, 24, 39, 0.08);
  border-radius: 0.85rem;
  background: #fff;
}

.saas-flow__index {
  display: block;
  margin-bottom: 0.75rem;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: #ea580c;
}

.saas-flow__title {
  margin: 0 0 0.4rem;
  font-size: 1rem;
  font-weight: 600;
  color: #111827;
}

.saas-flow__desc {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  color: #6b7280;
}

.saas-product__integrations {
  padding: 2.5rem 0 3rem;
  border-top: 1px solid rgba(17, 24, 39, 0.08);
}

.saas-product__integrations-inner {
  padding: 1.5rem 1.25rem;
  border: 1px solid rgba(17, 24, 39, 0.08);
  border-radius: 0.85rem;
  background: #fafafa;
}

.saas-product__integrations-lede {
  margin: 0 0 1.25rem;
  font-size: 15px;
  line-height: 1.6;
  color: #4b5563;
}

.saas-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.saas-tags li {
  padding: 0.45rem 0.85rem;
  border: 1px solid rgba(17, 24, 39, 0.08);
  border-radius: 999px;
  background: #fff;
  font-size: 13px;
  font-weight: 500;
  color: #374151;
}

.saas-product__family {
  padding: 3rem 0;
  border-top: 1px solid rgba(17, 24, 39, 0.08);
  background: #fafafa;
}

.saas-family-grid {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

@media (min-width: 768px) {
  .saas-family-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.saas-family-card {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  height: 100%;
  padding: 1.35rem 1.25rem;
  border: 1px solid rgba(17, 24, 39, 0.08);
  border-radius: 0.85rem;
  background: #fff;
  text-decoration: none;
  transition: border-color 200ms ease, box-shadow 200ms ease;
}

.saas-family-card:hover {
  border-color: rgba(249, 115, 22, 0.3);
  box-shadow: 0 14px 32px rgba(17, 24, 39, 0.07);
}

.saas-family-card__badge {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #9ca3af;
}

.saas-family-card__name {
  font-size: 1.125rem;
  font-weight: 600;
  color: #111827;
}

.saas-family-card__summary {
  margin: 0;
  flex: 1;
  font-size: 14px;
  line-height: 1.55;
  color: #6b7280;
}

.saas-family-card__link {
  font-size: 13px;
  font-weight: 600;
  color: #111827;
  transition: color 200ms ease;
}

.saas-family-card:hover .saas-family-card__link {
  color: #ea580c;
}

.page-detail[data-detail='product'] .saas-cta-band .saas-cta-band__inner {
  margin-bottom: 4rem;
}

@media (min-width: 768px) {
  .page-detail[data-detail='product'] .saas-cta-band .saas-cta-band__inner {
    margin-bottom: 5rem;
  }
}

/* ===================================================================
   PRODUCT DETAIL — SOPHISTICATED EDITORIAL DESIGN
   =================================================================== */

.pd-page {
  background: #fff;
}

/* shared section headers */
.pd-section-kicker {
  margin: 0 0 0.85rem;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #9ca3af;
}

.pd-section-title {
  margin: 0;
  font-size: clamp(1.5rem, 3.5vw, 2.25rem);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.03em;
  color: #0a0a0b;
}

.pd-section-head {
  margin-bottom: 3rem;
}

.pd-section-head--centered {
  text-align: center;
}

.pd-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 14px;
  font-weight: 600;
  color: #374151;
  text-decoration: none;
  transition: gap 220ms ease, color 220ms ease;
}

.pd-link:hover {
  gap: 0.7rem;
  color: #ea580c;
}

/* ── Showcase ── */

.pd-showcase {
  padding: 0 0 4rem;
}

@media (min-width: 768px) {
  .pd-showcase {
    padding: 1rem 0 6rem;
  }
}

.pd-showcase__wrap {
  max-width: 1120px;
  margin: 0 auto;
}

.pd-showcase__frame {
  border: 1px solid rgba(17, 24, 39, 0.07);
  border-radius: 1.25rem;
  background: #fff;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.9) inset, 0 24px 56px rgba(17, 24, 39, 0.05);
  overflow: hidden;
}

.pd-showcase__chrome {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.7rem 0.9rem;
  border-bottom: 1px solid rgba(17, 24, 39, 0.04);
  background: #fafafa;
}

.pd-showcase__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(17, 24, 39, 0.1);
}

.pd-showcase__dot:first-child {
  background: rgba(249, 115, 22, 0.5);
}

.pd-showcase__screen {
  aspect-ratio: 21 / 9;
  overflow: hidden;
  background: #f3f4f6;
}

.pd-showcase__screen img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (max-width: 767px) {
  .pd-showcase__screen {
    aspect-ratio: 16 / 10;
  }
}

/* ── Overview ── */

.pd-overview {
  padding: 4rem 0;
  border-top: 1px solid rgba(17, 24, 39, 0.06);
}

@media (min-width: 768px) {
  .pd-overview {
    padding: 6rem 0;
  }
}

.pd-overview__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  align-items: center;
}

@media (min-width: 1024px) {
  .pd-overview__grid {
    grid-template-columns: 1fr 1fr;
    gap: 5rem;
  }
}

.pd-overview__text {
  max-width: 520px;
}

.pd-overview__body p {
  margin: 0 0 1rem;
  font-size: 16px;
  line-height: 1.75;
  color: #4b5563;
}

.pd-overview__body p:last-child {
  margin-bottom: 0;
}

.pd-overview__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.25rem;
  margin-top: 2rem;
}

.pd-overview__img-wrap {
  border-radius: 1rem;
  overflow: hidden;
  border: 1px solid rgba(17, 24, 39, 0.07);
  box-shadow: 0 28px 56px rgba(17, 24, 39, 0.06);
}

.pd-overview__img-wrap img {
  display: block;
  width: 100%;
  height: auto;
}

/* ── Features ── */

.pd-features {
  padding: 3rem 0;
  border-top: 1px solid rgba(17, 24, 39, 0.06);
}

@media (min-width: 768px) {
  .pd-features {
    padding: 5rem 0;
  }
}

.pd-features__list {
  display: flex;
  flex-direction: column;
}

.pd-feature {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  padding: 2.5rem 0;
  border-top: 1px solid rgba(17, 24, 39, 0.06);
  align-items: center;
}

.pd-feature:first-child {
  border-top: none;
  padding-top: 0;
}

@media (min-width: 900px) {
  .pd-feature {
    grid-template-columns: 1.1fr 0.9fr;
    gap: 4rem;
  }

  .pd-feature--reverse {
    grid-template-columns: 0.9fr 1.1fr;
  }

  .pd-feature--reverse .pd-feature__visual {
    order: 2;
  }

  .pd-feature--reverse .pd-feature__body {
    order: 1;
  }
}

.pd-feature__frame {
  border: 1px solid rgba(17, 24, 39, 0.06);
  border-radius: 0.85rem;
  background: #fff;
  overflow: hidden;
  box-shadow: 0 16px 36px rgba(17, 24, 39, 0.04);
}

.pd-feature__chrome {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.55rem 0.75rem;
  border-bottom: 1px solid rgba(17, 24, 39, 0.04);
  background: #f9fafb;
}

.pd-feature__d {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(17, 24, 39, 0.1);
}

.pd-feature__d:first-child {
  background: rgba(249, 115, 22, 0.45);
}

.pd-feature__screen {
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: #f3f4f6;
}

.pd-feature__screen img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pd-feature__num {
  display: block;
  margin-bottom: 1rem;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: #ea580c;
}

.pd-feature__title {
  margin: 0 0 0.85rem;
  font-size: clamp(1.25rem, 2.5vw, 1.7rem);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.025em;
  color: #0a0a0b;
}

.pd-feature__desc {
  margin: 0;
  font-size: 15px;
  line-height: 1.7;
  color: #4b5563;
}

@media (min-width: 768px) {
  .pd-feature__desc {
    font-size: 16px;
  }
}

/* ── Bento ── */

.pd-bento {
  padding: 3rem 0;
  border-top: 1px solid rgba(17, 24, 39, 0.06);
  background: #fafafa;
}

@media (min-width: 768px) {
  .pd-bento {
    padding: 5rem 0;
  }
}

.pd-bento__stack {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.pd-bento__row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

@media (min-width: 768px) {
  .pd-bento__row {
    grid-template-columns: 1fr 1fr;
  }
}

.pd-bento__row--alt .pd-bento-card {
  background: #fff;
}

.pd-bento__row--alt .pd-bento-card:first-child {
  background: #f4f4f6;
}

.pd-bento-card {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.35rem;
  border: 1px solid rgba(17, 24, 39, 0.06);
  border-radius: 1rem;
  background: #fff;
  overflow: hidden;
  padding: 1.5rem;
  transition: border-color 280ms ease, box-shadow 280ms ease, transform 280ms ease;
}

.pd-bento-card:hover {
  border-color: rgba(17, 24, 39, 0.12);
  box-shadow: 0 20px 44px rgba(17, 24, 39, 0.06);
  transform: translateY(-2px);
}

@media (min-width: 640px) {
  .pd-bento-card {
    grid-template-columns: 1fr 1.1fr;
  }
}

.pd-bento-card--phantom {
  visibility: hidden;
}

.pd-bento-card__frame {
  border: 1px solid rgba(17, 24, 39, 0.05);
  border-radius: 0.65rem;
  background: #fff;
  overflow: hidden;
}

.pd-bento-card__chrome {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.4rem 0.55rem;
  border-bottom: 1px solid rgba(17, 24, 39, 0.04);
  background: #fafafa;
}

.pd-bento-card__d {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(17, 24, 39, 0.1);
}

.pd-bento-card__d:first-child {
  background: rgba(249, 115, 22, 0.4);
}

.pd-bento-card__screen {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: #f3f4f6;
}

.pd-bento-card__screen img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pd-bento-card__body {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.pd-bento-card__title {
  margin: 0 0 0.55rem;
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: #0a0a0b;
}

.pd-bento-card__desc {
  margin: 0;
  font-size: 14px;
  line-height: 1.65;
  color: #4b5563;
}

/* ── Workflow ── */

.pd-workflow {
  padding: 3rem 0;
  border-top: 1px solid rgba(17, 24, 39, 0.06);
}

@media (min-width: 768px) {
  .pd-workflow {
    padding: 5rem 0;
  }
}

.pd-workflow__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
}

@media (min-width: 900px) {
  .pd-workflow__grid {
    grid-template-columns: 0.9fr 1.1fr;
    gap: 4rem;
  }
}

.pd-workflow__lede {
  margin: 1.25rem 0 0;
  font-size: 15px;
  line-height: 1.7;
  color: #4b5563;
}

.pd-workflow__steps {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.pd-workflow-step {
  display: flex;
  gap: 1.25rem;
  padding-bottom: 2rem;
}

.pd-workflow-step:last-child {
  padding-bottom: 0;
}

.pd-workflow-step__marker {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
  width: 42px;
}

.pd-workflow-step__num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #f97316;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  flex-shrink: 0;
}

.pd-workflow-step__connector {
  width: 1px;
  flex: 1;
  min-height: 32px;
  margin-top: 0.35rem;
  background: linear-gradient(to bottom, rgba(249, 115, 22, 0.3), rgba(17, 24, 39, 0.06));
}

.pd-workflow-step__body {
  padding-top: 0.35rem;
}

.pd-workflow-step__title {
  margin: 0 0 0.4rem;
  font-size: 1.1rem;
  font-weight: 600;
  letter-spacing: -0.018em;
  color: #0a0a0b;
}

.pd-workflow-step__desc {
  margin: 0;
  font-size: 15px;
  line-height: 1.65;
  color: #4b5563;
}

/* ── Integrations ── */

.pd-integrations {
  padding: 3rem 0;
  border-top: 1px solid rgba(17, 24, 39, 0.06);
}

@media (min-width: 768px) {
  .pd-integrations {
    padding: 5rem 0;
  }
}

.pd-integrations__logos {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 2rem 3.5rem;
  padding: 2rem 0 0;
}

.pd-integrations__logo {
  opacity: 0.5;
  transition: opacity 250ms ease;
}

.pd-integrations__logo:hover {
  opacity: 0.85;
}

.pd-integrations__logo img {
  height: 26px;
  width: auto;
  max-width: 120px;
}

.pd-integrations__pills {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.6rem;
  padding: 1.5rem 0 0;
}

.pd-integrations__pill {
  padding: 0.5rem 1.1rem;
  border: 1px solid rgba(17, 24, 39, 0.08);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
  color: #374151;
  background: #fff;
  transition: border-color 220ms ease, color 220ms ease, background 220ms ease;
}

.pd-integrations__pill:hover {
  border-color: rgba(249, 115, 22, 0.3);
  color: #ea580c;
  background: #fff9f5;
}

/* ── FAQ ── */

.pd-faq {
  padding: 3rem 0;
  border-top: 1px solid rgba(17, 24, 39, 0.06);
}

@media (min-width: 768px) {
  .pd-faq {
    padding: 5rem 0;
  }
}

.pd-faq__list {
  margin: 0;
  max-width: 800px;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.pd-faq__item {
  border-bottom: 1px solid rgba(17, 24, 39, 0.06);
}

.pd-faq__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  width: 100%;
  padding: 1.3rem 0;
  border: none;
  background: none;
  font-family: inherit;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.5;
  color: #111827;
  text-align: left;
  cursor: pointer;
  transition: color 200ms ease;
}

.pd-faq__trigger:hover {
  color: #ea580c;
}

.pd-faq__plus {
  flex-shrink: 0;
  opacity: 0.3;
  transition: transform 280ms cubic-bezier(0.22, 1, 0.36, 1), opacity 200ms ease;
}

.pd-faq__trigger[aria-expanded='true'] .pd-faq__plus {
  transform: rotate(45deg);
  opacity: 0.7;
}

.pd-faq__answer {
  height: 0;
  overflow: hidden;
  opacity: 0;
  transition: height 280ms cubic-bezier(0.22, 1, 0.36, 1), opacity 220ms ease;
}

.pd-faq__answer p {
  margin: 0 0 1.5rem;
  font-size: 14px;
  line-height: 1.7;
  color: #4b5563;
}

/* ── CTA ── */

.pd-cta {
  padding: 2rem 0 4rem;
}

@media (min-width: 768px) {
  .pd-cta {
    padding: 3rem 0 5rem;
  }
}

.pd-cta__inner {
  display: flex;
  flex-direction: column;
  gap: 2.25rem;
  padding: 2.75rem 2rem;
  border-radius: 1.25rem;
  background: #0a0a0b;
  color: #fff;
}

@media (min-width: 768px) {
  .pd-cta__inner {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 3.5rem;
    padding: 3.25rem 2.75rem;
  }
}

.pd-cta__copy {
  flex: 1;
}

.pd-cta__kicker {
  margin: 0 0 0.8rem;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.35);
}

.pd-cta__title {
  margin: 0 0 0.85rem;
  font-size: clamp(1.4rem, 3vw, 1.8rem);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.025em;
  color: #fff;
}

.pd-cta__text {
  margin: 0;
  max-width: 32rem;
  font-size: 15px;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.48);
}

.pd-cta__actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
  flex-shrink: 0;
}

.pd-cta__secondary {
  font-size: 14px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.5);
  text-decoration: none;
  transition: color 200ms ease;
}

.pd-cta__secondary:hover {
  color: rgba(255, 255, 255, 0.85);
}

/* ── Related ── */

.pd-related {
  padding: 3rem 0 4rem;
  border-top: 1px solid rgba(17, 24, 39, 0.06);
}

@media (min-width: 768px) {
  .pd-related {
    padding: 5rem 0 6rem;
  }
}

.pd-related__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

@media (min-width: 640px) {
  .pd-related__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.pd-related-card {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding: 1.6rem;
  border: 1px solid rgba(17, 24, 39, 0.07);
  border-radius: 1rem;
  background: #fff;
  text-decoration: none;
  color: inherit;
  transition: border-color 280ms ease, box-shadow 280ms ease, transform 280ms ease;
}

.pd-related-card:hover {
  border-color: rgba(17, 24, 39, 0.13);
  box-shadow: 0 16px 36px rgba(17, 24, 39, 0.05);
  transform: translateY(-2px);
}

.pd-related-card__badge {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #9ca3af;
}

.pd-related-card__name {
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: -0.018em;
  color: #0a0a0b;
}

.pd-related-card__summary {
  margin: 0;
  flex: 1;
  font-size: 14px;
  line-height: 1.6;
  color: #6b7280;
}

.pd-related-card__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 13px;
  font-weight: 600;
  color: #111827;
  transition: gap 220ms ease, color 220ms ease;
}

.pd-related-card:hover .pd-related-card__cta {
  gap: 0.65rem;
  color: #ea580c;
}

/* ===================================================================
   SERVICE DETAIL — about-aligned editorial
   =================================================================== */

.page-service .sv-page.about-page {
  padding-top: 0;
}

.sv-page {
  background: #fff;
}

.sv-section {
  padding: 3rem 0;
}

@media (min-width: 768px) {
  .sv-section {
    padding: 4.5rem 0;
  }
}

.sv-section--scope {
  background: linear-gradient(180deg, #fafafa 0%, #fff 100%);
  border-top: 1px solid rgba(17, 24, 39, 0.06);
}

/* —— Hizmet bento: why us grid —— */

.sv-section--bento {
  background: #fff;
  border-top: 1px solid rgba(17, 24, 39, 0.06);
  padding-top: 3rem;
  padding-bottom: 3rem;
}

@media (min-width: 768px) {
  .sv-section--bento {
    padding-top: 4rem;
    padding-bottom: 4rem;
  }
}

@media (min-width: 1024px) {
  .sv-section--bento {
    padding-top: 5rem;
    padding-bottom: 5rem;
  }
}

.sv-bento__grid {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

@media (min-width: 768px) {
  .sv-bento__grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: repeat(10, minmax(46px, auto));
    gap: 1rem;
  }

  .sv-bento__card--header {
    grid-column: 1 / 3;
    grid-row: 1 / 5;
  }

  .sv-bento__card--speed {
    grid-column: 3 / 5;
    grid-row: 1 / 6;
  }

  .sv-bento__card--text {
    grid-column: 5 / 7;
    grid-row: 1 / 5;
  }

  .sv-bento__card--income {
    grid-column: 1 / 3;
    grid-row: 5 / 11;
  }

  .sv-bento__card--photo {
    grid-column: 3 / 5;
    grid-row: 6 / 11;
  }

  .sv-bento__card--projects {
    grid-column: 5 / 7;
    grid-row: 5 / 11;
  }
}

.sv-bento__card {
  min-height: 0;
}

.sv-bento__card--header {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 0 0 1rem 0;
}

@media (min-width: 768px) {
  .sv-bento__card--header {
    padding: 0 1rem 1rem 0;
  }
}

.sv-bento__label {
  display: inline-block;
  margin-bottom: 1rem;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: #6b7280;
}

.sv-bento__heading {
  margin: 0;
  font-size: clamp(1.6rem, 2.6vw, 2.4rem);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -0.02em;
}

.sv-bento__heading-accent {
  color: #111827;
  font-weight: 500;
}

.sv-bento__heading-muted {
  color: #9ca3af;
}

.sv-bento__header-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.25rem;
  margin-top: 1.75rem;
}

.sv-bento__link {
  font-size: 14px;
  font-weight: 600;
  color: #111827;
  text-decoration: none;
  transition: color 200ms ease;
}

.sv-bento__link:hover {
  color: #f97316;
}

.sv-bento__card--income,
.sv-bento__card--speed,
.sv-bento__card--projects {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  padding: 1.75rem;
  background: #fafafa;
  border: 1px solid rgba(17, 24, 39, 0.07);
}

@media (min-width: 768px) {
  .sv-bento__card--income,
  .sv-bento__card--speed,
  .sv-bento__card--projects {
    padding: 1.75rem;
  }
}

.sv-bento__card-eyebrow {
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #9ca3af;
}

.sv-bento__steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  flex: 1;
  justify-content: center;
}

.sv-bento__step {
  display: flex;
  align-items: flex-start;
  gap: 0.875rem;
}

.sv-bento__step-num {
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: #f97316;
  padding-top: 0.15rem;
}

.sv-bento__step-title {
  margin: 0 0 0.2rem;
  font-size: 14px;
  font-weight: 500;
  color: #111827;
}

.sv-bento__step-desc {
  margin: 0;
  font-size: 12px;
  line-height: 1.55;
  color: #6b7280;
}

.sv-bento__deliverables {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  flex: 1;
  justify-content: center;
}

.sv-bento__deliverables li {
  position: relative;
  padding-left: 1rem;
  font-size: 13px;
  line-height: 1.55;
  color: #374151;
}

.sv-bento__deliverables li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #f97316;
}

.sv-bento__points {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  flex: 1;
  justify-content: center;
}

.sv-bento__point-title {
  margin: 0 0 0.15rem;
  font-size: 13px;
  font-weight: 500;
  color: #111827;
}

.sv-bento__point-desc {
  margin: 0;
  font-size: 12px;
  line-height: 1.55;
  color: #6b7280;
}

.sv-bento__card--text {
  display: flex;
  flex-direction: column;
  padding: 1.75rem;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: #fff;
  background-color: #040404;
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.sv-bento__card--text::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 65% 45% at 50% 0%, rgba(255, 255, 255, 0.035) 0%, transparent 62%),
    radial-gradient(ellipse 80% 50% at 50% 105%, rgba(255, 255, 255, 0.04) 0%, transparent 58%),
    linear-gradient(180deg, #0c0c0c 0%, #050505 42%, #020202 100%);
}

.sv-bento__card--text::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.04) 0%, transparent 18%),
    linear-gradient(0deg, rgba(0, 0, 0, 0.75) 0%, transparent 42%),
    url('../assets/footer-monolith.svg') center center / cover no-repeat;
  opacity: 0.92;
  mask-image: linear-gradient(180deg, #000 0%, #000 96%, transparent 100%);
}

.sv-bento__text-top {
  display: flex;
  justify-content: flex-end;
  position: relative;
  z-index: 1;
}

.sv-bento__text-body {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  padding-bottom: 0.25rem;
  position: relative;
  z-index: 1;
}

.sv-bento__text-body p {
  margin: 0;
  font-size: 13px;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.55);
}

.sv-bento__plus {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  flex-shrink: 0;
  border: 1px solid rgba(17, 24, 39, 0.18);
  font-size: 12px;
  font-weight: 300;
  color: #111827;
}

.sv-bento__plus--dark {
  border-color: rgba(17, 24, 39, 0.15);
  color: #111827;
}

.sv-bento__card--text .sv-bento__plus {
  border-color: rgba(255, 255, 255, 0.2);
  color: rgba(255, 255, 255, 0.78);
}

.sv-bento__income-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

.sv-bento__stat {
  margin: 0;
  font-size: clamp(1.8rem, 3.5vw, 2.8rem);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.03em;
  color: #111827;
}

.sv-bento__stat-suffix {
  margin-left: 0.1em;
}

.sv-bento__stat--light {
  color: #fff;
}

.sv-bento__stat-desc {
  margin: 0.5rem 0 0;
  max-width: 16rem;
  font-size: 13px;
  line-height: 1.45;
  color: #6b7280;
}

.sv-bento__stat-desc--light {
  color: rgba(255, 255, 255, 0.62);
}

.sv-bento__stat-block--center {
  margin-top: 0.5rem;
  text-align: center;
}

.sv-bento__chart-wrap {
  margin-top: auto;
  padding-top: 2rem;
}

.sv-bento__chart {
  display: flex;
  gap: 2px;
}

.sv-bento__chart-col {
  display: flex;
  flex-direction: column-reverse;
  gap: 2px;
}

.sv-bento__chart-cell {
  width: 5px;
  height: 5px;
  background: rgba(17, 24, 39, 0.08);
}

.sv-bento__chart-cell.is-filled {
  background: #111827;
}

@media (min-width: 640px) {
  .sv-bento__chart-cell {
    width: 7px;
    height: 7px;
  }
}

.sv-bento__chart-years {
  display: flex;
  justify-content: space-between;
  margin-top: 0.75rem;
  padding-right: 0.5rem;
  font-size: 10px;
  letter-spacing: 0.06em;
  color: #9ca3af;
}

.sv-bento__speed-visual {
  display: flex;
  flex: 1;
  align-items: flex-start;
  justify-content: center;
  padding-top: 0.5rem;
}

.sv-bento__speed-svg {
  width: 100%;
  max-width: 240px;
  height: auto;
}

.sv-bento__card--projects {
  position: relative;
}

.sv-bento__projects-visual {
  position: relative;
  height: 6rem;
  width: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.sv-bento__projects-svg {
  width: 100%;
  max-width: 220px;
  height: auto;
}

.sv-bento__card--projects .sv-bento__stat {
  margin-top: 1rem;
}

.sv-bento__card--photo {
  position: relative;
  overflow: hidden;
  background: #111827;
  min-height: 380px;
}

.sv-bento__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.55;
}

.sv-bento__photo-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(17, 24, 39, 0.65), transparent 45%, rgba(17, 24, 39, 0.25));
  pointer-events: none;
}

.sv-bento__photo-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 380px;
  padding: 1.5rem;
}

.sv-bento__photo-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

.sv-bento__brand {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.sv-bento__brand-mark {
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1;
  color: #fff;
}

.sv-bento__brand-name {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.85);
}

.sv-bento__brand-blocks {
  display: flex;
  align-items: flex-end;
  gap: 3px;
}

.sv-bento__brand-blocks span {
  display: block;
  background: #fff;
}

.sv-bento__brand-blocks span:nth-child(1) {
  width: 10px;
  height: 10px;
}

.sv-bento__brand-blocks span:nth-child(2),
.sv-bento__brand-blocks span:nth-child(3) {
  width: 7px;
  height: 7px;
}

.sv-bento__brand-blocks span:nth-child(3) {
  opacity: 0.5;
}

.sv-bento__rating {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.35rem;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1;
  color: #fff;
}

.sv-bento__stars {
  display: flex;
  gap: 2px;
  color: #fff;
}

.sv-bento__photo-mid {
  display: flex;
  gap: 0.5rem;
}

.sv-bento__photo-mid span:nth-child(1) {
  width: 18px;
  height: 18px;
  background: rgba(255, 255, 255, 0.7);
}

.sv-bento__photo-mid span:nth-child(2) {
  width: 18px;
  height: 26px;
  background: rgba(255, 255, 255, 0.4);
}

.sv-bento__photo-bottom--stats {
  flex-direction: row;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  margin-top: auto;
}

.sv-bento__photo-square {
  display: block;
  width: 3rem;
  height: 3rem;
  flex-shrink: 0;
  background: #fff;
}

.sv-bento__photo-bottom {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.75rem;
  margin-top: auto;
}

.sv-bento__photo-caption {
  margin: 0;
  max-width: 18rem;
  font-size: 13px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.72);
}

.sv-bento__photo-link {
  font-size: 13px;
  font-weight: 500;
  color: #fff;
  text-decoration: none;
  transition: color 200ms;
}

.sv-bento__photo-link:hover {
  color: #f97316;
}

.sv-section--insights {
  background: #fff;
  border-top: 1px solid rgba(17, 24, 39, 0.06);
  overflow: hidden;
}

.sv-section--trust {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(ellipse 120% 80% at 100% 100%, rgba(249, 115, 22, 0.08), transparent 55%),
    radial-gradient(ellipse 80% 60% at 0% 0%, rgba(255, 255, 255, 0.04), transparent 50%),
    #0a0a0b;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  color: #fff;
}

@media (min-width: 768px) {
  .sv-section--trust {
    padding-top: 5rem;
    padding-bottom: 5.5rem;
  }
}

.page-service [data-sv-enter],
.page-service [data-sv-blur-in],
.page-service [data-sv-insights-card],
.page-service [data-sv-bento-card],
.page-service [data-sv-trust-frame],
.page-service [data-sv-trust-pillar],
.page-service [data-sv-trust-text],
.page-service [data-sv-trust-lead] {
  opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
  .page-service [data-sv-enter],
  .page-service [data-sv-blur-in],
  .page-service [data-sv-insights-card],
  .page-service [data-sv-bento-card],
  .page-service [data-sv-trust-frame],
  .page-service [data-sv-trust-pillar],
  .page-service [data-sv-trust-text],
  .page-service [data-sv-trust-lead] {
    opacity: 1;
    filter: none;
  }
}

.sv-section--cta {
  padding-bottom: 2rem;
}

@media (min-width: 768px) {
  .sv-section--cta {
    padding-bottom: 3rem;
  }
}

.sv-section--related {
  border-top: 1px solid rgba(17, 24, 39, 0.06);
  padding-bottom: 4rem;
}

@media (min-width: 768px) {
  .sv-section--related {
    padding-bottom: 6rem;
  }
}

.sv-section-head {
  margin-bottom: 2.5rem;
}

.sv-section-head .about-page__headline {
  font-size: clamp(1.75rem, 4vw, 2.75rem);
}

.sv-section-head .about-page__lede {
  margin-top: 1rem;
}

/* story block */
.sv-story__copy p {
  margin: 0 0 1rem;
  font-size: 15px;
  line-height: 1.75;
  color: #374151;
}

@media (min-width: 768px) {
  .sv-story__copy p {
    font-size: 16px;
  }
}

.sv-story__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.25rem;
  margin-top: 2rem;
}

.sv-story__link {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 14px;
  font-weight: 600;
  color: #111827;
  text-decoration: none;
  transition: gap 220ms ease, color 220ms ease;
}

.sv-story__link:hover {
  gap: 0.65rem;
  color: #ea580c;
}

.sv-visual {
  position: relative;
  border-radius: 1.1rem;
  overflow: hidden;
  border: 1px solid rgba(17, 24, 39, 0.08);
  box-shadow: 0 32px 64px rgba(17, 24, 39, 0.08);
}

.sv-visual__glow {
  position: absolute;
  inset: -20% -10% auto;
  height: 55%;
  background: radial-gradient(ellipse at 50% 0%, rgba(249, 115, 22, 0.18), transparent 70%);
  pointer-events: none;
  z-index: 1;
}

.sv-visual img {
  display: block;
  width: 100%;
  height: auto;
  will-change: transform;
}

/* —— Kapsam: editorial list —— */

.sv-scope__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.sv-scope__item {
  position: relative;
  padding: 2rem 0 2rem 1.25rem;
  border-bottom: 1px solid rgba(17, 24, 39, 0.08);
}

.sv-scope__item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 2.15rem;
  width: 3px;
  height: 0;
  border-radius: 999px;
  background: #f97316;
  transition: height 320ms cubic-bezier(0.22, 1, 0.36, 1);
}

.sv-scope__item:hover::before {
  height: 1.75rem;
}

.sv-scope__item:first-child {
  border-top: 1px solid rgba(17, 24, 39, 0.08);
}

@media (min-width: 768px) {
  .sv-scope__item {
    padding: 2.75rem 0 2.75rem 1.75rem;
  }

  .sv-scope__item::before {
    top: 2.85rem;
  }
}

.sv-scope__title {
  margin: 0 0 0.65rem;
  font-size: clamp(1.25rem, 2.5vw, 1.65rem);
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.15;
  color: #111827;
  transition: color 280ms ease, transform 420ms cubic-bezier(0.22, 1, 0.36, 1);
}

.sv-scope__item:hover .sv-scope__title {
  color: #ea580c;
  transform: translateX(4px);
}

.sv-scope__desc {
  margin: 0;
  max-width: 38rem;
  font-size: 15px;
  line-height: 1.7;
  color: #6b7280;
}

@media (min-width: 768px) {
  .sv-scope__desc {
    font-size: 16px;
  }
}

/* —— Yaklaşım: insights video cards —— */

.sv-insights {
  display: flex;
  flex-direction: column;
  gap: 3.5rem;
  padding-top: 1rem;
  padding-bottom: 1rem;
}

@media (min-width: 768px) {
  .sv-insights {
    gap: 4.5rem;
  }
}

@media (min-width: 1024px) {
  .sv-insights {
    gap: 5.625rem;
  }
}

.sv-insights__top {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  max-width: 32rem;
}

@media (min-width: 768px) {
  .sv-insights__top {
    gap: 2rem;
  }
}

@media (min-width: 1024px) {
  .sv-insights__top {
    gap: 2.5rem;
    max-width: 517px;
  }
}

.sv-insights__title {
  margin: 0;
  font-size: clamp(2.25rem, 5vw, 3.75rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.03em;
  color: #111827;
  text-wrap: balance;
}

@media (min-width: 1024px) {
  .sv-insights__title {
    line-height: 1.05;
  }
}

.sv-insights__lede {
  margin: 0;
  max-width: 22.5rem;
  font-size: clamp(1rem, 1.8vw, 1.25rem);
  line-height: 1.55;
  color: #4b5563;
  text-wrap: pretty;
}

.sv-insights__cards {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 1.25rem;
}

@media (min-width: 1024px) {
  .sv-insights__cards {
    flex-direction: row;
    align-items: flex-end;
    gap: 1.25rem;
  }
}

.sv-insights__card {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 2.5rem;
  border-radius: 2.5rem;
  overflow: hidden;
}

.sv-insights__card--tall {
  min-height: 450px;
}

.sv-insights__card--short {
  min-height: 350px;
}

@media (max-width: 1023px) {
  .sv-insights__card--tall,
  .sv-insights__card--short {
    min-height: 380px;
  }
}

.sv-insights__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

.sv-insights__overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.sv-insights__card-body {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  max-width: 24rem;
}

.sv-insights__card-title {
  margin: 0;
  font-size: clamp(1.65rem, 2.8vw, 2.25rem);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.025em;
  color: #111827;
  text-wrap: balance;
}

.sv-insights__card-desc {
  margin: 0;
  max-width: 22rem;
  font-size: clamp(1.05rem, 1.8vw, 1.375rem);
  line-height: 1.45;
  color: #374151;
  opacity: 0.88;
  text-wrap: pretty;
}

.sv-insights__card--short .sv-insights__card-body {
  max-width: 22rem;
}

.sv-insights__card--short .sv-insights__card-desc {
  max-width: 21.875rem;
}

/* —— İş ortaklığı: layered editorial panel —— */

.sv-trust__mesh {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse 85% 70% at 50% 40%, #000 20%, transparent 75%);
  pointer-events: none;
}

.sv-trust__ambient {
  position: absolute;
  inset: -10% -5% auto;
  height: 75%;
  background: radial-gradient(ellipse 65% 50% at 25% 0%, rgba(249, 115, 22, 0.16), transparent 70%);
  pointer-events: none;
}

.sv-trust__ghost {
  position: absolute;
  top: 50%;
  right: -0.05em;
  transform: translateY(-50%);
  font-size: clamp(6rem, 18vw, 14rem);
  font-weight: 700;
  line-height: 0.85;
  letter-spacing: -0.04em;
  color: #fff;
  opacity: 0.035;
  user-select: none;
  pointer-events: none;
  white-space: nowrap;
}

.sv-trust {
  position: relative;
  z-index: 1;
}

.sv-trust__intro {
  max-width: 42rem;
  margin-bottom: 2.5rem;
}

@media (min-width: 768px) {
  .sv-trust__intro {
    margin-bottom: 3.25rem;
  }
}

.sv-trust__badge {
  display: inline-flex;
  align-items: center;
  margin-bottom: 1.25rem;
  padding: 0.4rem 0.85rem;
  border: 1px solid rgba(249, 115, 22, 0.35);
  border-radius: 999px;
  background: rgba(249, 115, 22, 0.1);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 237, 213, 0.95);
}

.sv-trust__intro .about-page__headline {
  color: #fff;
  font-size: clamp(2rem, 4.5vw, 3.25rem);
  text-wrap: balance;
}

.sv-trust__frame {
  position: relative;
  padding: 2rem 1.5rem;
  border-radius: 1.25rem;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.03) inset,
    0 32px 80px rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(12px);
}

.sv-trust__frame::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(
    135deg,
    rgba(249, 115, 22, 0.45) 0%,
    rgba(255, 255, 255, 0.08) 35%,
    rgba(255, 255, 255, 0.04) 65%,
    rgba(249, 115, 22, 0.2) 100%
  );
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  pointer-events: none;
}

@media (min-width: 768px) {
  .sv-trust__frame {
    padding: 2.75rem 2.5rem;
    border-radius: 1.5rem;
  }
}

@media (min-width: 1024px) {
  .sv-trust__frame {
    padding: 3.25rem 3rem;
  }
}

.sv-trust__layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
}

@media (min-width: 900px) {
  .sv-trust__layout {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: 3.5rem 4rem;
    align-items: start;
  }
}

.sv-trust__lead-col {
  position: relative;
}

@media (min-width: 900px) {
  .sv-trust__lead-col {
    position: sticky;
    top: 7rem;
    padding-right: 2rem;
    border-right: 1px solid rgba(255, 255, 255, 0.1);
  }
}

.sv-trust__quote {
  display: block;
  margin-bottom: 0.5rem;
  font-size: clamp(3rem, 6vw, 4.5rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.04em;
  background: linear-gradient(180deg, #f97316 0%, rgba(249, 115, 22, 0.35) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  opacity: 0.9;
}

.sv-trust__lead {
  margin: 0 0 1.75rem;
  font-size: clamp(1.35rem, 2.6vw, 1.85rem);
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: -0.025em;
  color: rgba(255, 255, 255, 0.92);
  text-wrap: balance;
}

.sv-trust__pillars {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.sv-trust__pillar {
  padding: 0.45rem 0.85rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.04);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.72);
  transition: border-color 280ms ease, background 280ms ease, color 280ms ease;
}

.sv-trust__pillar:hover {
  border-color: rgba(249, 115, 22, 0.4);
  background: rgba(249, 115, 22, 0.1);
  color: #fff;
}

.sv-trust__prose {
  display: flex;
  flex-direction: column;
}

.sv-trust__para {
  margin: 0;
  padding: 1.75rem 0 0;
  font-size: 15px;
  line-height: 1.85;
  letter-spacing: 0.01em;
  color: rgba(255, 255, 255, 0.58);
  text-wrap: pretty;
}

.sv-trust__para:first-child {
  padding-top: 0;
  font-size: clamp(15px, 1.5vw, 17px);
  line-height: 1.8;
  color: rgba(255, 255, 255, 0.68);
}

.sv-trust__para + .sv-trust__para {
  border-top: 1px solid rgba(255, 255, 255, 0.07);
}

@media (min-width: 768px) {
  .sv-trust__para {
    padding-top: 2rem;
    font-size: 16px;
  }

  .sv-trust__para:first-child {
    font-size: 17px;
  }
}

/* CTA panel */
.sv-cta__panel {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  gap: 2rem;
  max-width: none;
  margin: 0;
  padding: 2.5rem 1.75rem;
  border-radius: 1.25rem;
  background: #0a0a0b;
}

@media (min-width: 768px) {
  .sv-cta__panel {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 3rem;
    padding: 3rem 2.75rem;
  }
}

.sv-cta__panel .about-page__eyebrow {
  color: rgba(255, 255, 255, 0.4);
  margin-bottom: 0.75rem;
}

.sv-cta__copy {
  flex: 1;
}

.sv-cta__actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.75rem;
  flex-shrink: 0;
}

@media (min-width: 480px) {
  .sv-cta__actions {
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem 1rem;
  }
}

.sv-cta__panel .home-cta__btn {
  margin-top: 0;
}

.sv-cta__btn-secondary.btn-outline {
  border-color: rgba(255, 255, 255, 0.28);
  background: rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.sv-cta__btn-secondary.btn-outline:hover {
  border-color: rgba(255, 255, 255, 0.55);
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}

.sv-cta__btn-secondary.btn-outline .btn-roll__icon {
  border-color: rgba(255, 255, 255, 0.32);
  background: rgba(255, 255, 255, 0.06);
}

.sv-cta__btn-secondary.btn-outline:hover .btn-roll__icon {
  border-color: rgba(255, 255, 255, 0.5);
  background: rgba(255, 255, 255, 0.12);
}

/* related */
.sv-related__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

@media (min-width: 640px) {
  .sv-related__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.sv-related-card {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  min-height: 100%;
  padding: 1.75rem;
  border: 1px solid rgba(17, 24, 39, 0.07);
  border-radius: 1rem;
  background: #fff;
  text-decoration: none;
  color: inherit;
  transition: border-color 280ms ease, box-shadow 280ms ease, transform 280ms ease;
}

.sv-related-card:hover {
  border-color: rgba(17, 24, 39, 0.13);
  box-shadow: 0 20px 44px rgba(17, 24, 39, 0.06);
  transform: translateY(-3px);
}

.sv-related-card__title {
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: -0.018em;
  color: #111827;
}

.sv-related-card__desc {
  margin: 0;
  flex: 1;
  font-size: 14px;
  line-height: 1.6;
  color: #6b7280;
}

.sv-related-card__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.5rem;
  font-size: 13px;
  font-weight: 600;
  color: #111827;
  transition: gap 220ms ease, color 220ms ease;
}

.sv-related-card:hover .sv-related-card__cta {
  gap: 0.65rem;
  color: #ea580c;
}

/* —— Ürün detay (pr-*) — modern SaaS startup layout —— */

.page-detail[data-detail='product'] {
  background: #fff;
}

.page-detail[data-detail='product'] .page-hero--detail .page-hero__title {
  max-width: none;
  font-size: clamp(2rem, 7vw, 3.5rem);
}

@media (min-width: 768px) {
  .page-detail[data-detail='product'] .page-hero--detail .page-hero__title {
    max-width: 14ch;
    font-size: clamp(2rem, 8vw, 4rem);
  }
}

.page-detail[data-detail='product'] .page-hero__desc {
  max-width: 42ch;
  font-size: clamp(1rem, 2vw, 1.125rem);
  line-height: 1.65;
  color: #4b5563;
}

/* Hero meta + actions */
.pr-hero__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1.25rem;
}

@media (min-width: 768px) {
  .pr-hero__meta {
    margin-top: 1.5rem;
  }
}

.pr-hero__badge {
  display: inline-flex;
  align-items: center;
  padding: 0.35rem 0.75rem;
  border-radius: 999px;
  border: 1px solid rgba(17, 24, 39, 0.08);
  background: rgba(255, 255, 255, 0.85);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #374151;
}

.pr-hero__badge--muted {
  border-color: rgba(17, 24, 39, 0.05);
  background: rgba(249, 250, 251, 0.9);
  color: #6b7280;
}

.pr-hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  margin-top: 1.75rem;
}

@media (min-width: 768px) {
  .pr-hero__actions {
    margin-top: 2rem;
  }
}

.pr-hero__cta-secondary.btn-outline {
  border-color: rgba(17, 24, 39, 0.12);
  color: #374151;
}

.pr-hero__cta-secondary.btn-outline:hover {
  border-color: rgba(17, 24, 39, 0.2);
  color: #111827;
}

.page-hero--detail .pr-hero__cta.btn-orange {
  background: #111827;
  color: #fff;
}

.page-hero--detail .pr-hero__cta.btn-orange:hover {
  background: #1f2937;
}

.page-hero--detail .pr-hero__cta.btn-orange .btn-roll__icon {
  background: #fff;
  color: #111827;
}

/* Page shell */
.pr-page {
  overflow: hidden;
}

.pr-page .sv-section-head {
  max-width: 36rem;
}

.pr-page .sv-section-head .about-page__headline {
  font-size: clamp(1.75rem, 4vw, 2.5rem);
}

.pr-page .about-page__lede {
  margin-top: 0.85rem;
  font-size: 15px;
  line-height: 1.7;
  color: #6b7280;
}

.pr-section {
  padding: 3rem 0;
}

@media (min-width: 768px) {
  .pr-section {
    padding: 4rem 0;
  }
}

.pr-section--preview {
  padding-top: 0;
  margin-top: -0.5rem;
}

@media (min-width: 768px) {
  .pr-section--preview {
    margin-top: -1rem;
  }
}

.pr-section--intro {
  border-top: 1px solid rgba(17, 24, 39, 0.06);
}

.pr-section--modules {
  background: #fff;
  border-top: 1px solid rgba(17, 24, 39, 0.06);
}

.pr-section--spotlight {
  background: #fff;
}

.pr-section--gallery {
  border-top: 1px solid rgba(17, 24, 39, 0.06);
  background: #fff;
}

.pr-section--flow {
  background: #fafafa;
  border-top: 1px solid rgba(17, 24, 39, 0.06);
}

.pr-section--integrations {
  background: #fff;
  padding-top: 2.5rem;
  padding-bottom: 2.5rem;
}

.pr-section--cta {
  padding-top: 2.5rem;
  padding-bottom: 2.5rem;
  background: #fff;
}

.pr-section--cta .home-cta__inner {
  align-items: flex-start;
  text-align: left;
  max-width: none;
  margin: 0;
}

.pr-section--cta .sv-cta__panel {
  padding: 0;
  border-radius: 0;
  background: transparent;
}

.pr-section--cta .sv-cta__panel .about-page__eyebrow {
  color: #6b7280;
}

.pr-section--cta .sv-cta__panel .home-cta__title {
  color: #111827;
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.12;
}

.pr-section--cta .sv-cta__panel .home-cta__text {
  color: #6b7280;
  max-width: 34ch;
}

.pr-section--cta .home-cta__btn.btn-orange {
  background: #f26522;
  color: #fff;
}

.pr-section--cta .home-cta__btn.btn-orange:hover {
  background: #e05a1a;
}

.pr-section--cta .home-cta__btn.btn-orange .btn-roll__icon {
  background: #fff;
  color: #111827;
}

.pr-section--cta .sv-cta__btn-secondary.btn-outline {
  border-color: rgba(17, 24, 39, 0.15);
  background: transparent;
  color: #111827;
}

.pr-section--cta .sv-cta__btn-secondary.btn-outline:hover {
  border-color: rgba(17, 24, 39, 0.28);
  background: rgba(17, 24, 39, 0.04);
  color: #111827;
}

.pr-section--cta .sv-cta__btn-secondary.btn-outline .btn-roll__icon {
  border-color: rgba(17, 24, 39, 0.12);
  background: rgba(17, 24, 39, 0.04);
  color: #111827;
}

.pr-section--cta .sv-cta__btn-secondary.btn-outline:hover .btn-roll__icon {
  border-color: rgba(17, 24, 39, 0.22);
  background: rgba(17, 24, 39, 0.08);
  color: #111827;
}

.pr-section--related {
  padding-top: 2rem;
  background: #fff;
  border-top: 1px solid rgba(17, 24, 39, 0.06);
}

.pr-section--preview-no-image {
  padding-top: 0.5rem;
}

.pr-section--preview-no-image .pr-preview-wrap {
  gap: 0;
}

@media (min-width: 768px) {
  .pr-section--preview-no-image {
    padding-top: 1rem;
  }
}

/* Preview */
.pr-preview-wrap {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.pr-preview {
  position: relative;
}

.pr-preview__img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 0.75rem;
}

/* Stats row */
.pr-stats {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid rgba(17, 24, 39, 0.08);
}

@media (min-width: 640px) {
  .pr-stats {
    grid-template-columns: repeat(3, 1fr);
  }
}

.pr-stats__item {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 1.35rem 0;
  border: none;
  background: none;
  box-shadow: none;
}

.pr-stats__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  margin-bottom: 0.35rem;
  border-radius: 999px;
  background: #111827;
  color: #fff;
  flex-shrink: 0;
}

@media (min-width: 640px) {
  .pr-stats__item {
    padding: 1.5rem 1.75rem 1.5rem 0;
  }

  .pr-stats__item + .pr-stats__item {
    padding-left: 1.75rem;
    border-left: 1px solid rgba(17, 24, 39, 0.08);
  }
}

@media (max-width: 639px) {
  .pr-stats__item + .pr-stats__item {
    border-top: 1px solid rgba(17, 24, 39, 0.06);
  }
}

.pr-stats__value {
  font-size: clamp(1.125rem, 2vw, 1.375rem);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.15;
  color: #111827;
}

.pr-stats__label {
  font-size: 13px;
  line-height: 1.5;
  color: #6b7280;
}

/* Intro */
.pr-intro__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  align-items: start;
}

@media (min-width: 1024px) {
  .pr-intro__grid {
    grid-template-columns: 1.15fr 0.85fr;
    gap: 3.5rem;
  }
}

.pr-intro__body p {
  margin: 0 0 1rem;
  max-width: 38rem;
  font-size: 15px;
  line-height: 1.75;
  color: #4b5563;
}

.pr-intro__body p:last-child {
  margin-bottom: 0;
}

.pr-intro__main .about-page__eyebrow {
  margin-bottom: 1rem;
}

.pr-intro__main .about-page__headline {
  margin: 0 0 1.35rem;
  line-height: 1.18;
}

@media (min-width: 768px) {
  .pr-intro__main .about-page__headline {
    margin-bottom: 1.5rem;
    line-height: 1.15;
  }
}

.pr-intro__features {
  padding-top: 0.35rem;
}

.pr-intro__features-label {
  margin: 0 0 1.35rem;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #6b7280;
}

.pr-features {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid rgba(17, 24, 39, 0.08);
}

.pr-features__item {
  position: relative;
  padding: 1.05rem 0 1.05rem 1.35rem;
  border-bottom: 1px solid rgba(17, 24, 39, 0.06);
}

.pr-features__item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 1.25rem;
  width: 2px;
  height: 0;
  border-radius: 999px;
  background: #111827;
  transition: height 280ms cubic-bezier(0.22, 1, 0.36, 1);
}

.pr-features__item:hover::before {
  height: 1.35rem;
}

@media (min-width: 768px) {
  .pr-features__item {
    padding: 1.2rem 0 1.2rem 1.5rem;
  }

  .pr-features__item::before {
    top: 1.4rem;
  }
}

.pr-features__text {
  display: block;
  font-size: 15px;
  line-height: 1.55;
  color: #374151;
  transition: color 220ms ease, transform 320ms cubic-bezier(0.22, 1, 0.36, 1);
}

.pr-features__item:hover .pr-features__text {
  color: #111827;
  transform: translateX(3px);
}

@media (min-width: 768px) {
  .pr-features__text {
    font-size: 16px;
  }
}

/* Platform modules — bento grid */
.pr-modules-head {
  max-width: 36rem;
  margin-bottom: 2.5rem;
}

@media (min-width: 768px) {
  .pr-modules-head {
    margin-bottom: 3rem;
  }
}

.pr-modules-head__lede {
  margin: 0.85rem 0 0;
  font-size: 15px;
  line-height: 1.7;
  color: #6b7280;
}

.pr-modules-bento {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.75rem;
}

@media (min-width: 768px) {
  .pr-modules-bento {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.85rem;
  }
}

.pr-module-card {
  display: flex;
  flex-direction: column;
  min-height: 22rem;
  overflow: hidden;
  border-radius: 1.5rem;
  background: #fff;
  border: 1px solid rgba(17, 24, 39, 0.06);
  box-shadow:
    0 1px 2px rgba(17, 24, 39, 0.03),
    0 12px 36px rgba(17, 24, 39, 0.06);
  transition:
    box-shadow 320ms ease,
    transform 320ms ease;
}

@media (min-width: 768px) {
  .pr-module-card {
    min-height: 24rem;
    border-radius: 1.75rem;
  }
}

.pr-module-card:hover {
  box-shadow:
    0 1px 2px rgba(17, 24, 39, 0.04),
    0 20px 48px rgba(17, 24, 39, 0.1);
  transform: translateY(-3px);
}

.pr-module-card__body {
  padding: 1.5rem 1.5rem 0;
}

@media (min-width: 768px) {
  .pr-module-card__body {
    padding: 1.75rem 1.75rem 0;
  }
}

.pr-module-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  margin-bottom: 1rem;
  border-radius: 999px;
  background: #111827;
  color: #fff;
}

.pr-module-card__title {
  margin: 0;
  max-width: 16ch;
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.2;
  color: #111827;
}

@media (min-width: 768px) {
  .pr-module-card__title {
    font-size: 1.1875rem;
  }
}

.pr-module-card__desc {
  margin: 0.5rem 0 0;
  max-width: 30ch;
  font-size: 0.8125rem;
  line-height: 1.6;
  color: #6b7280;
}

.pr-module-card__visual {
  position: relative;
  flex: 1;
  min-height: 11rem;
  margin-top: 1.25rem;
  pointer-events: none;
}

@media (min-width: 768px) {
  .pr-module-card__visual {
    min-height: 12rem;
    margin-top: 1.5rem;
  }
}

/* Module scenes */
.pr-mod-scene {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: inherit;
}

.pr-mod-scene__pill {
  position: absolute;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  padding: 0.45rem 0.85rem;
  border-radius: 999px;
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: #374151;
  white-space: nowrap;
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid rgba(17, 24, 39, 0.07);
  box-shadow:
    0 2px 8px rgba(17, 24, 39, 0.06),
    0 10px 28px rgba(17, 24, 39, 0.07);
}

.pr-module-card__visual--ops-dashboard,
.pr-module-card__visual--workflows,
.pr-module-card__visual--field-mobile,
.pr-module-card__visual--analytics,
.pr-module-card__visual--content-library,
.pr-module-card__visual--approval-calendar,
.pr-module-card__visual--multi-channel,
.pr-module-card__visual--team-collab,
.pr-module-card__visual--project-plan,
.pr-module-card__visual--time-budget,
.pr-module-card__visual--resource-mgmt,
.pr-module-card__visual--client-portal,
.pr-module-card__visual--crm-cari,
.pr-module-card__visual--travel-flow,
.pr-module-card__visual--backoffice,
.pr-module-card__visual--e-documents {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #f6f7f9 58%, #eef0f3 100%);
}

/* Dashboard */
.pr-mod-scene--dashboard {
  min-height: 10rem;
}

.pr-mod-scene__panel--back {
  position: absolute;
  top: 0.5rem;
  right: 1rem;
  left: 2.5rem;
  padding: 0.75rem 0.9rem;
  border-radius: 0.85rem;
  background: #fff;
  border: 1px solid rgba(17, 24, 39, 0.06);
  box-shadow: 0 8px 24px rgba(17, 24, 39, 0.06);
}

.pr-mod-scene__panel-head {
  display: flex;
  gap: 0.25rem;
  margin-bottom: 0.55rem;
}

.pr-mod-scene__panel-head span {
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 999px;
  background: #e5e7eb;
}

.pr-mod-scene__panel-head span:first-child { background: #fca5a5; }
.pr-mod-scene__panel-head span:nth-child(2) { background: #fcd34d; }
.pr-mod-scene__panel-head span:nth-child(3) { background: #86efac; }

.pr-mod-scene__panel-line {
  height: 0.3rem;
  margin-top: 0.4rem;
  border-radius: 999px;
  background: #f3f4f6;
}

.pr-mod-scene__panel-line--lg {
  width: 72%;
  margin-top: 0;
  background: #e5e7eb;
}

.pr-mod-scene__panel-line--sm { width: 42%; }

.pr-mod-scene__chip {
  position: absolute;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 999px;
  color: #374151;
  background: #fff;
  border: 1px solid rgba(17, 24, 39, 0.08);
  box-shadow: 0 6px 18px rgba(17, 24, 39, 0.1);
}

.pr-mod-scene__chip--a { top: 1rem; left: 1rem; }

.pr-mod-scene__chip--b {
  top: 1rem;
  right: 1rem;
  left: auto;
}

.pr-mod-scene__panel--shift-left {
  left: 1rem;
  right: 2.75rem;
}

.pr-mod-scene__panel--doc {
  padding-bottom: 1.5rem;
}

.pr-mod-scene__panel--doc .pr-mod-scene__portal-check {
  position: absolute;
  right: 0.75rem;
  bottom: 0.75rem;
  margin-top: 0;
}

.pr-mod-scene__card--tilt-right {
  transform: rotate(2deg);
}

.pr-mod-scene__card--tilt-left {
  transform: rotate(-2.5deg);
}

.pr-mod-scene__flow-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-top: 0.65rem;
}

.pr-mod-scene__flow-tags span {
  padding: 0.2rem 0.45rem;
  border-radius: 999px;
  font-size: 0.5rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: rgba(255, 255, 255, 0.88);
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.14);
}

.pr-mod-scene__mini-bars {
  display: flex;
  align-items: flex-end;
  gap: 0.25rem;
  height: 1.35rem;
  margin-top: 0.65rem;
}

.pr-mod-scene__mini-bars span {
  flex: 1;
  height: var(--h, 50%);
  border-radius: 2px 2px 0 0;
  background: rgba(255, 255, 255, 0.18);
}

.pr-mod-scene__mini-bars span.is-active {
  background: rgba(249, 115, 22, 0.85);
}

.pr-mod-scene__card--docs {
  transform: rotate(-1.5deg);
}

.pr-mod-scene__card-label--dark {
  margin-top: 0.45rem;
  color: #6b7280;
}

.pr-mod-scene__card--dark {
  position: absolute;
  z-index: 4;
  right: 1.25rem;
  bottom: 0;
  left: 1.25rem;
  padding: 0.9rem 1rem;
  border-radius: 0.9rem;
  color: #fff;
  background: linear-gradient(145deg, #2d3748 0%, #1a202c 100%);
  box-shadow: 0 12px 28px rgba(17, 24, 39, 0.2);
  transform: rotate(-2deg);
}

.pr-mod-scene__card--sm {
  right: auto;
  left: 50%;
  bottom: 0.75rem;
  width: 8.5rem;
  transform: translateX(-50%) rotate(-1deg);
}

.pr-mod-scene__card-label {
  display: block;
  font-size: 0.5rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
}

.pr-mod-scene__card-value {
  display: block;
  margin-top: 0.15rem;
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.pr-mod-scene__card-avatars {
  display: flex;
  margin-top: 0.65rem;
}

.pr-mod-scene__card-avatars span {
  width: 1.35rem;
  height: 1.35rem;
  margin-left: -0.3rem;
  border-radius: 999px;
  border: 2px solid #1a202c;
  background: linear-gradient(135deg, #94a3b8, #64748b);
}

.pr-mod-scene__card-avatars span:first-child {
  margin-left: 0;
  background: linear-gradient(135deg, #93c5fd, #3b82f6);
}

.pr-mod-scene__card-avatars span:nth-child(2) {
  background: linear-gradient(135deg, #6ee7b7, #10b981);
}

.pr-mod-scene__card-avatars span:nth-child(3) {
  background: linear-gradient(135deg, #c4b5fd, #8b5cf6);
}

/* Pills */
.pr-mod-scene--pills {
  display: flex;
  align-items: center;
  justify-content: center;
}

.pr-mod-scene__pill--1 {
  top: 1.25rem;
  left: 50%;
  transform: translateX(-58%);
}

.pr-mod-scene__pill--2 {
  top: 50%;
  left: 50%;
  transform: translate(-42%, -50%);
  z-index: 3;
}

.pr-mod-scene__pill--3 {
  bottom: 1rem;
  left: 50%;
  transform: translateX(-48%);
}

/* Mobile */
.pr-mod-scene--mobile {
  display: flex;
  align-items: center;
  justify-content: center;
}

.pr-mod-scene__phone {
  display: block;
  width: 4.5rem;
  height: 7.5rem;
  border-radius: 0.85rem;
  border: 2px solid rgba(17, 24, 39, 0.12);
  background: linear-gradient(180deg, #fff 0%, #f9fafb 100%);
  box-shadow: 0 12px 32px rgba(17, 24, 39, 0.1);
}

.pr-mod-scene__phone::before {
  content: '';
  display: block;
  width: 1.5rem;
  height: 2px;
  margin: 0.6rem auto 0;
  border-radius: 999px;
  background: rgba(17, 24, 39, 0.12);
}

.pr-mod-scene__phone::after {
  content: '';
  display: block;
  width: 3rem;
  height: 4.5rem;
  margin: 0.5rem auto 0;
  border-radius: 0.4rem;
  background: linear-gradient(180deg, rgba(249, 115, 22, 0.15), rgba(249, 115, 22, 0.28));
}

.pr-mod-scene__pill--float-a {
  top: 1.25rem;
  left: 1rem;
}

.pr-mod-scene__pill--float-b {
  bottom: 1.25rem;
  right: 1rem;
}

/* Stats */
.pr-mod-scene--stats {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 0.65rem;
  padding: 0 1rem 0.5rem;
}

.pr-mod-scene__stat {
  flex: 1;
  max-width: 7.5rem;
  padding: 0.75rem 0.85rem;
  border-radius: 0.85rem;
  background: #fff;
  border: 1px solid rgba(17, 24, 39, 0.06);
  box-shadow: 0 8px 24px rgba(17, 24, 39, 0.06);
}

.pr-mod-scene__stat-badge {
  display: inline-block;
  padding: 0.15rem 0.45rem;
  border-radius: 999px;
  font-size: 0.5625rem;
  font-weight: 700;
}

.pr-mod-scene__stat-badge.is-up {
  color: #15803d;
  background: rgba(34, 197, 94, 0.15);
}

.pr-mod-scene__stat-badge.is-down {
  color: #b91c1c;
  background: rgba(239, 68, 68, 0.12);
}

.pr-mod-scene__stat-badge.is-neutral {
  color: #374151;
  background: rgba(17, 24, 39, 0.06);
}

.pr-mod-scene__stat-value {
  display: block;
  margin-top: 0.45rem;
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: #111827;
}

.pr-mod-scene__stat-label {
  display: block;
  margin-top: 0.15rem;
  font-size: 0.5625rem;
  color: #9ca3af;
}

/* Library */
.pr-mod-scene--library {
  background: linear-gradient(180deg, transparent 0%, #f8f9fb 100%);
}

.pr-mod-scene__asset-grid {
  position: absolute;
  top: 0.75rem;
  left: 50%;
  display: grid;
  grid-template-columns: repeat(3, 1.75rem);
  gap: 0.35rem;
  transform: translateX(-50%);
}

.pr-mod-scene__asset-grid span {
  aspect-ratio: 1;
  border-radius: 0.35rem;
  background: rgba(17, 24, 39, 0.06);
}

.pr-mod-scene__asset-grid span.is-active {
  background: rgba(249, 115, 22, 0.28);
}

.pr-mod-scene__card--light {
  position: absolute;
  right: 1.25rem;
  bottom: 0;
  left: 1.25rem;
  padding: 0.85rem;
  border-radius: 0.85rem;
  background: #fff;
  border: 1px solid rgba(17, 24, 39, 0.06);
  box-shadow: 0 10px 28px rgba(17, 24, 39, 0.08);
}

.pr-mod-scene__card-chip {
  display: block;
  width: 2rem;
  height: 0.35rem;
  border-radius: 999px;
  background: #e5e7eb;
}

.pr-mod-scene__card-stack {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  margin-top: 0.55rem;
}

.pr-mod-scene__card-stack span {
  display: block;
  height: 0.3rem;
  border-radius: 999px;
  background: #f3f4f6;
}

.pr-mod-scene__card-stack span:first-child { width: 88%; background: #e5e7eb; }
.pr-mod-scene__card-stack span:nth-child(2) { width: 72%; }
.pr-mod-scene__card-stack span:nth-child(3) { width: 54%; }

/* Calendar */
.pr-mod-scene--calendar {
  display: flex;
  align-items: center;
  justify-content: center;
}

.pr-mod-scene__cal-grid {
  display: grid;
  grid-template-columns: repeat(3, 1.75rem);
  gap: 0.35rem;
}

.pr-mod-scene__cal-grid span {
  aspect-ratio: 1.15;
  border-radius: 0.3rem;
  background: rgba(17, 24, 39, 0.06);
}

.pr-mod-scene__cal-grid span.is-active {
  background: rgba(249, 115, 22, 0.3);
}

.pr-mod-scene__pill--cal-a {
  top: 1rem;
  left: 1rem;
}

.pr-mod-scene__pill--cal-b {
  bottom: 1rem;
  right: 1rem;
}

/* Collab */
.pr-mod-scene--collab {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  padding-bottom: 0.5rem;
}

.pr-mod-scene__avatars {
  display: flex;
  margin-bottom: 1rem;
}

.pr-mod-scene__avatars span {
  width: 2rem;
  height: 2rem;
  margin-left: -0.4rem;
  border-radius: 999px;
  border: 2px solid #fff;
  background: linear-gradient(135deg, #94a3b8, #64748b);
  box-shadow: 0 4px 12px rgba(17, 24, 39, 0.12);
}

.pr-mod-scene__avatars span:first-child {
  margin-left: 0;
  background: linear-gradient(135deg, #fdba74, #f97316);
}

.pr-mod-scene__avatars span:nth-child(2) {
  background: linear-gradient(135deg, #93c5fd, #3b82f6);
}

.pr-mod-scene__avatars span:nth-child(3) {
  background: linear-gradient(135deg, #6ee7b7, #10b981);
}

/* Roadmap */
.pr-mod-scene--roadmap {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  padding: 0 1rem 1rem;
}

.pr-mod-scene__road-node {
  flex-shrink: 0;
  padding: 0.35rem 0.55rem;
  border-radius: 999px;
  font-size: 0.5625rem;
  font-weight: 600;
  color: #6b7280;
  background: #fff;
  border: 1px solid rgba(17, 24, 39, 0.08);
  box-shadow: 0 4px 12px rgba(17, 24, 39, 0.06);
}

.pr-mod-scene__road-node.is-active {
  color: #111827;
  border-color: rgba(249, 115, 22, 0.35);
  background: rgba(249, 115, 22, 0.1);
}

.pr-mod-scene__road-line {
  flex: 1;
  max-width: 2rem;
  height: 1px;
  background: rgba(17, 24, 39, 0.12);
}

/* Capacity bars */
.pr-mod-scene--capacity {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 0.45rem;
  height: 100%;
  padding-bottom: 0.75rem;
}

.pr-mod-scene--capacity span {
  width: 1.25rem;
  height: var(--h, 50%);
  border-radius: 0.35rem 0.35rem 0 0;
  background: rgba(17, 24, 39, 0.08);
}

.pr-mod-scene--capacity span.is-active {
  background: linear-gradient(180deg, #f97316, #ea580c);
}

/* Portal */
.pr-mod-scene--portal {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-bottom: 0.75rem;
}

.pr-mod-scene__portal-doc {
  width: 7.5rem;
  padding: 1rem;
  border-radius: 0.75rem;
  background: #fff;
  border: 1px solid rgba(17, 24, 39, 0.06);
  box-shadow: 0 10px 28px rgba(17, 24, 39, 0.08);
}

.pr-mod-scene__portal-line {
  display: block;
  height: 0.3rem;
  margin-top: 0.45rem;
  border-radius: 999px;
  background: #e5e7eb;
}

.pr-mod-scene__portal-line:first-child { margin-top: 0; width: 100%; }
.pr-mod-scene__portal-line--sm { width: 58%; }

.pr-mod-scene__portal-check {
  display: block;
  width: 1.1rem;
  height: 1.1rem;
  margin-top: 0.65rem;
  border-radius: 50%;
  background: rgba(34, 197, 94, 0.18);
  border: 1.5px solid rgba(34, 197, 94, 0.45);
}

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

  .pr-module-card:hover {
    transform: none;
  }
}

/* Legacy spotlight (unused) */
.pr-spotlight {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  margin-top: 2.5rem;
  border-top: 1px solid rgba(17, 24, 39, 0.08);
}

@media (min-width: 768px) {
  .pr-spotlight {
    grid-template-columns: repeat(3, 1fr);
    margin-top: 3rem;
  }
}

.pr-spotlight__item {
  padding: 2rem 0 0;
}

@media (min-width: 768px) {
  .pr-spotlight__item {
    padding: 2.5rem 2rem 0 0;
  }

  .pr-spotlight__item + .pr-spotlight__item {
    padding-left: 2rem;
    border-left: 1px solid rgba(17, 24, 39, 0.08);
  }
}

@media (max-width: 767px) {
  .pr-spotlight__item + .pr-spotlight__item {
    margin-top: 2rem;
    padding-top: 2rem;
    border-top: 1px solid rgba(17, 24, 39, 0.06);
  }
}

.pr-spotlight__title {
  margin: 0 0 0.75rem;
  font-size: clamp(1.25rem, 2.2vw, 1.625rem);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.15;
  color: #111827;
}

.pr-spotlight__desc {
  margin: 0;
  max-width: 22ch;
  font-size: 15px;
  line-height: 1.65;
  color: #6b7280;
}

/* Product gallery */
.pr-gallery__lede {
  max-width: 36rem;
  margin-top: 0.75rem;
}

.pr-gallery {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  margin-top: 2rem;
}

.pr-gallery__stage {
  position: relative;
  margin: 0;
}

.pr-gallery__viewport {
  overflow: hidden;
  border-radius: 0.75rem;
}

.pr-gallery__main {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 0.75rem;
  transition: opacity 220ms ease;
}

.pr-gallery__main.is-fading {
  opacity: 0;
}

.pr-gallery__nav {
  position: absolute;
  top: 50%;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border: 1px solid rgba(17, 24, 39, 0.1);
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.92);
  color: #111827;
  cursor: pointer;
  transform: translateY(calc(-50% - 1rem));
  box-shadow: 0 4px 16px rgba(17, 24, 39, 0.08);
  transition:
    background 200ms ease,
    border-color 200ms ease,
    transform 200ms ease;
}

.pr-gallery__nav:hover {
  background: #fff;
  border-color: rgba(17, 24, 39, 0.18);
}

.pr-gallery__nav:focus-visible {
  outline: 2px solid #f97316;
  outline-offset: 2px;
}

.pr-gallery__nav--prev {
  left: 0.75rem;
}

.pr-gallery__nav--next {
  right: 0.75rem;
}

.pr-gallery__caption {
  margin: 0.85rem 0 0;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: #374151;
  text-align: center;
}

.pr-gallery__thumbs {
  display: flex;
  gap: 0.75rem;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  padding-bottom: 0.15rem;
  scrollbar-width: thin;
}

.pr-gallery__thumbs::-webkit-scrollbar {
  height: 6px;
}

.pr-gallery__thumbs::-webkit-scrollbar-thumb {
  border-radius: 9999px;
  background: rgba(17, 24, 39, 0.16);
}

.pr-gallery__thumb {
  display: flex;
  flex: 0 0 auto;
  width: min(42vw, 11.5rem);
  flex-direction: column;
  gap: 0.55rem;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: inherit;
  scroll-snap-align: center;
}

@media (min-width: 640px) {
  .pr-gallery__thumb {
    width: 11.5rem;
  }
}

.pr-gallery__thumb-frame {
  overflow: hidden;
  border: 1px solid rgba(17, 24, 39, 0.1);
  border-radius: 0.5rem;
  background: transparent;
  transition:
    border-color 220ms ease,
    box-shadow 220ms ease,
    opacity 220ms ease;
}

.pr-gallery__thumb-frame img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: contain;
  object-position: top center;
  background: transparent;
}

.pr-gallery__thumb-label {
  font-size: 12px;
  font-weight: 500;
  line-height: 1.35;
  color: #9ca3af;
  transition: color 220ms ease;
}

.pr-gallery__thumb:not(.is-active) .pr-gallery__thumb-frame {
  opacity: 0.72;
}

.pr-gallery__thumb:hover .pr-gallery__thumb-frame {
  opacity: 0.92;
  border-color: rgba(17, 24, 39, 0.18);
}

.pr-gallery__thumb:hover .pr-gallery__thumb-label {
  color: #6b7280;
}

.pr-gallery__thumb.is-active .pr-gallery__thumb-frame {
  opacity: 1;
  border-color: rgba(249, 115, 22, 0.45);
  box-shadow: 0 0 0 1px rgba(249, 115, 22, 0.1);
}

.pr-gallery__thumb.is-active .pr-gallery__thumb-label {
  color: #111827;
  font-weight: 600;
}

.pr-gallery__thumb:focus-visible {
  outline: 2px solid #f97316;
  outline-offset: 3px;
  border-radius: 0.5rem;
}

/* Capabilities bento (legacy) */
.pr-capabilities__lede {
  max-width: 36rem;
  margin-top: 0.75rem;
}

.pr-capabilities {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  margin-top: 2rem;
}

@media (min-width: 768px) {
  .pr-capabilities {
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
  }
}

.pr-capability {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid rgba(17, 24, 39, 0.07);
  border-radius: 1.25rem;
  background: #fff;
  box-shadow: 0 1px 2px rgba(17, 24, 39, 0.03);
  transition:
    border-color 280ms ease,
    box-shadow 280ms ease;
}

.pr-capability:hover {
  border-color: rgba(17, 24, 39, 0.11);
  box-shadow: 0 16px 40px rgba(17, 24, 39, 0.07);
}

.pr-capability__visual {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 9rem;
  padding: 1.5rem;
  background: linear-gradient(180deg, #f8f9fb 0%, #f1f3f6 100%);
  border-bottom: 1px solid rgba(17, 24, 39, 0.05);
}

.pr-capability__copy {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1.35rem 1.35rem 1.5rem;
}

.pr-capability__title {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #111827;
}

.pr-capability__desc {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: #6b7280;
}

/* UI scenes */
.pr-ui-scene {
  width: 100%;
  max-width: 14rem;
}

.pr-ui-scene--panel .pr-ui-scene__panel {
  padding: 0.85rem;
  border-radius: 0.65rem;
  background: #fff;
  border: 1px solid rgba(17, 24, 39, 0.08);
  box-shadow: 0 8px 24px rgba(17, 24, 39, 0.06);
}

.pr-ui-scene__panel-head {
  display: flex;
  gap: 0.25rem;
  margin-bottom: 0.65rem;
}

.pr-ui-scene__panel-head span {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(17, 24, 39, 0.12);
}

.pr-ui-scene__line {
  height: 5px;
  margin-bottom: 0.4rem;
  border-radius: 999px;
  background: rgba(17, 24, 39, 0.08);
}

.pr-ui-scene__line--lg {
  width: 78%;
}

.pr-ui-scene__line--sm {
  width: 42%;
}

.pr-ui-scene__chips {
  display: flex;
  gap: 0.35rem;
  margin-top: 0.65rem;
}

.pr-ui-scene__chips span {
  width: 2rem;
  height: 0.65rem;
  border-radius: 999px;
  background: rgba(249, 115, 22, 0.2);
}

.pr-ui-scene--grid .pr-ui-scene__cells {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.35rem;
  padding: 0.85rem;
  border-radius: 0.65rem;
  background: #fff;
  border: 1px solid rgba(17, 24, 39, 0.08);
  box-shadow: 0 8px 24px rgba(17, 24, 39, 0.06);
}

.pr-ui-scene__cells span {
  aspect-ratio: 1;
  border-radius: 0.35rem;
  background: rgba(17, 24, 39, 0.06);
}

.pr-ui-scene__cells span.is-active {
  background: rgba(249, 115, 22, 0.35);
}

.pr-ui-scene--chart .pr-ui-scene__bars {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 0.35rem;
  height: 4.5rem;
  padding: 0.85rem;
  border-radius: 0.65rem;
  background: #fff;
  border: 1px solid rgba(17, 24, 39, 0.08);
  box-shadow: 0 8px 24px rgba(17, 24, 39, 0.06);
}

.pr-ui-scene__bars span {
  width: 0.65rem;
  height: var(--pr-bar-h, 50%);
  border-radius: 999px 999px 2px 2px;
  background: linear-gradient(180deg, #52525b 0%, #27272a 100%);
}

.pr-ui-scene__bars span:nth-child(even) {
  background: linear-gradient(180deg, #f97316 0%, #ea580c 100%);
}

.pr-ui-scene--stack {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 0.35rem;
  height: 4.5rem;
}

.pr-ui-scene__monolith {
  display: block;
  border-radius: 0.35rem 0.35rem 0.15rem 0.15rem;
  background: linear-gradient(180deg, #52525b 0%, #18181b 100%);
}

.pr-ui-scene__monolith--sm {
  width: 1.25rem;
  height: 1.75rem;
}

.pr-ui-scene__monolith--md {
  width: 1.25rem;
  height: 2.75rem;
}

.pr-ui-scene__monolith--lg {
  width: 1.25rem;
  height: 3.75rem;
}

/* Flow — numbered step cards */
.pr-flow {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.85rem;
  margin: 2rem 0 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 768px) {
  .pr-flow {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
    margin-top: 2.5rem;
  }
}

.pr-flow__item {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  min-height: 100%;
  padding: 1.35rem 1.35rem 1.5rem;
  border: 1px solid rgba(17, 24, 39, 0.08);
  border-radius: 0.75rem;
  background: #fff;
}

@media (min-width: 768px) {
  .pr-flow__item {
    padding: 1.5rem 1.5rem 1.65rem;
  }
}

.pr-flow__step {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  min-width: 2.25rem;
  padding: 0.3rem 0.55rem;
  border-radius: 0.25rem;
  background: #000;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  line-height: 1;
  color: #fff;
}

.pr-flow__content {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.pr-flow__title {
  margin: 0;
  font-size: 1.125rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.25;
  color: #111827;
}

.pr-flow__desc {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: #6b7280;
}

/* Integrations */
.pr-integrations-panel {
  display: grid;
  gap: 2rem;
  padding: 0;
  background: transparent;
}

@media (min-width: 768px) {
  .pr-integrations-panel {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    align-items: start;
    gap: 3rem;
    padding-top: 0.5rem;
  }
}

.pr-integrations-panel__intro {
  max-width: 24rem;
  padding-top: 0.25rem;
}

.pr-integrations-panel__intro .about-page__headline {
  max-width: 12ch;
}

.pr-integrations-panel__lede {
  margin: 0.85rem 0 0;
  max-width: 34ch;
  font-size: 15px;
  line-height: 1.65;
  color: #6b7280;
}

.pr-integrations-panel__body {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding-top: 0.15rem;
}

.pr-integration-logos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.65rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 640px) {
  .pr-integration-logos {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.pr-integration-logos__item {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 4.25rem;
  padding: 1rem 1.15rem;
  border-radius: 0.85rem;
  background: #fff;
  border: 1px solid rgba(17, 24, 39, 0.07);
  box-shadow: 0 1px 2px rgba(17, 24, 39, 0.03);
  transition:
    border-color 220ms ease,
    box-shadow 220ms ease,
    transform 220ms ease;
}

.pr-integration-logos__item:hover {
  border-color: rgba(17, 24, 39, 0.12);
  box-shadow: 0 8px 24px rgba(17, 24, 39, 0.06);
  transform: translateY(-1px);
}

.pr-integration-logos__item img {
  display: block;
  width: auto;
  height: 1.65rem;
  max-width: 100%;
  object-fit: contain;
  filter: none;
  opacity: 1;
}

.pr-integrations-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0.65rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.pr-integrations-list__item {
  padding: 0.55rem 0.85rem;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.35;
  color: #374151;
  background: #fff;
  border: 1px solid rgba(17, 24, 39, 0.08);
}

.pr-integrations-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.pr-integrations-tags__item {
  padding: 0.4rem 0.75rem;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #6b7280;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(17, 24, 39, 0.08);
}

/* Related — link rows */
.pr-page .pr-section--related .sv-section-head {
  margin-bottom: 0;
}

.pr-related {
  margin-top: 2.5rem;
  border-top: 1px solid rgba(17, 24, 39, 0.08);
}

.pr-related__link {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 1rem 2rem;
  align-items: center;
  padding: 1.75rem 0;
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid rgba(17, 24, 39, 0.06);
  transition: color 220ms ease;
}

.pr-related__link:hover {
  color: #ea580c;
}

.pr-related__main {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.pr-related__title {
  font-size: clamp(1.0625rem, 2vw, 1.25rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: #111827;
  transition: color 220ms ease;
}

.pr-related__link:hover .pr-related__title {
  color: #ea580c;
}

.pr-related__desc {
  max-width: 40ch;
  font-size: 14px;
  line-height: 1.6;
  color: #6b7280;
}

.pr-related__arrow {
  font-size: 1.25rem;
  line-height: 1;
  color: #9ca3af;
  transition: transform 220ms ease, color 220ms ease;
}

.pr-related__link:hover .pr-related__arrow {
  color: #ea580c;
  transform: translateX(4px);
}

@media (prefers-reduced-motion: reduce) {
  .pr-gallery__main,
  .pr-gallery__nav,
  .pr-gallery__thumb-frame,
  .pr-related__link,
  .pr-related__arrow {
    transition: none;
  }

  .pr-gallery__main.is-fading {
    opacity: 1;
  }

  .pr-related__link:hover .pr-related__arrow {
    transform: none;
  }
}

/* —— Responsive patch (site-wide mobile/tablet) —— */
@media (max-width: 767px) {
  .page-hero:not(.page-hero--contact):not(.page-hero--compact) {
    min-height: auto;
  }

  .page-hero__breadcrumb {
    margin-top: 1.25rem;
    font-size: 12px;
    gap: 0.35rem;
  }

  .page-hero__desc {
    font-size: 15px;
  }

  .contact-quick {
    margin-top: 1.75rem;
  }

  .about-hero__stats {
    grid-template-columns: 1fr;
    gap: 1rem;
    padding: 1.25rem 1.125rem;
  }

  .about-page__story-media {
    padding-bottom: 1.5rem;
  }

  .about-page__story-img--secondary {
    position: relative;
    right: auto;
    bottom: auto;
    width: min(72%, 14rem);
    margin: -2.5rem 0 0 auto;
  }

  .home-refs__header {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 2rem;
  }

  .site-footer__reach-text {
    white-space: normal;
    overflow: visible;
    text-overflow: unset;
    word-break: break-word;
  }

  .sv-insights__card--tall,
  .sv-insights__card--short {
    min-height: clamp(16rem, 55vw, 22rem);
    padding: 1.75rem;
  }

  .sv-trust__ghost {
    display: none;
  }

  .sv-bento__chart-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 0.25rem;
  }

  .pr-module-card {
    min-height: auto;
  }

  .pr-module-card__title,
  .pr-module-card__desc {
    max-width: none;
  }

  .pr-spotlight__desc {
    max-width: none;
  }

  .meeting-modal__embed-wrap {
    min-height: min(62vh, 28rem);
  }

  .meeting-modal__embed {
    min-height: min(58vh, 26rem);
  }

  .solution-areas__tabs {
    scroll-snap-type: x proximity;
  }

  .solution-areas__tab {
    scroll-snap-align: start;
  }

  .contact-form__check {
    line-height: 1.45;
  }

  .contact-form__check a {
    word-break: break-word;
  }
}

@media (hover: none) {
  .project-card__media .project-card__btn--light {
    width: 148px;
  }

  .project-card__media .project-card__btn--dark {
    width: 168px;
  }

  .project-card__media .project-card__btn-text {
    padding-left: 0.75rem;
    opacity: 1;
  }

  .project-card__media .project-card__btn-icon {
    transform: rotate(0deg);
  }
}

/* ── Solution pages (sol-page) — sector editorial system ── */

.sol-page {
  overflow: hidden;
  background: #fff;
}

.sol-section {
  padding: 3.25rem 0;
  border-top: 1px solid rgba(17, 24, 39, 0.06);
}

@media (min-width: 768px) {
  .sol-section {
    padding: 4.5rem 0;
  }
}

.sol-section--lead {
  margin-top: -0.5rem;
  border-top: none;
  background: #fff;
}

.sol-lead {
  display: grid;
  gap: 2rem;
}

.sol-section-head {
  max-width: 38rem;
  margin-bottom: 2.5rem;
}

@media (min-width: 768px) {
  .sol-section-head {
    margin-bottom: 3rem;
  }
}

.sol-section-head__title {
  margin: 0;
  font-size: clamp(1.75rem, 4vw, 2.6rem);
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1.08;
  color: #111827;
}

.sol-section-head__lede {
  margin: 0.85rem 0 0;
  max-width: 42rem;
  font-size: 15px;
  line-height: 1.7;
  color: #6b7280;
}

.sol-headline {
  margin: 0 0 1.25rem;
  font-size: clamp(1.85rem, 4.2vw, 2.75rem);
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1.08;
  color: #111827;
}

.sol-prose {
  max-width: 42rem;
  font-size: 15px;
  line-height: 1.75;
  color: #4b5563;
}

.sol-prose p + p {
  margin-top: 1rem;
}

.sol-lead__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
}

@media (min-width: 1024px) {
  .sol-lead__grid {
    grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
    gap: clamp(2rem, 4vw, 3.5rem);
    align-items: start;
  }

  .sol-lead__grid--solo {
    grid-template-columns: 1fr;
    max-width: 42rem;
  }
}

.sol-lead__aside {
  display: grid;
  gap: 1.75rem;
}

.sol-metrics {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid rgba(17, 24, 39, 0.1);
  border-bottom: 1px solid rgba(17, 24, 39, 0.1);
}

@media (min-width: 768px) {
  .sol-metrics {
    grid-template-columns: repeat(3, 1fr);
  }
}

.sol-metrics__item {
  display: grid;
  gap: 0.35rem;
  padding: 1.35rem 0;
}

@media (min-width: 768px) {
  .sol-metrics__item {
    padding: 1.5rem 2rem 1.5rem 0;
  }

  .sol-metrics__item + .sol-metrics__item {
    padding-left: 2rem;
    border-left: 1px solid rgba(17, 24, 39, 0.1);
  }
}

@media (max-width: 767px) {
  .sol-metrics__item + .sol-metrics__item {
    border-top: 1px solid rgba(17, 24, 39, 0.1);
  }
}

.sol-metrics__value {
  font-size: clamp(1.15rem, 2.2vw, 1.45rem);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.15;
  color: #111827;
}

.sol-metrics__label {
  max-width: 22ch;
  font-size: 13px;
  line-height: 1.55;
  color: #6b7280;
}

.sol-aside__figure {
  margin: 0;
}

.sol-aside__img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 0.5rem;
}

.sol-highlights {
  padding-top: 1.5rem;
  border-top: 1px solid rgba(17, 24, 39, 0.1);
}

.sol-highlights__label {
  margin: 0 0 0.85rem;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #6b7280;
}

.sol-highlights__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0;
}

.sol-highlights__item {
  padding: 0.65rem 0;
  font-size: 14px;
  line-height: 1.55;
  color: #374151;
  border-bottom: 1px solid rgba(17, 24, 39, 0.06);
}

.sol-highlights__item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.sol-audiences {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem 0.65rem;
  margin: 0 0 1.35rem;
}

.sol-audiences__label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #6b7280;
}

.sol-audiences__item {
  font-size: 13px;
  line-height: 1.4;
  color: #374151;
}

.sol-audiences__item:not(:last-child)::after {
  content: '·';
  margin-left: 0.65rem;
  color: #d1d5db;
}

.sol-pullquote {
  position: relative;
  margin: 2rem 0 0;
  padding: 1.35rem 0 0 1.35rem;
  border: none;
  border-top: 1px solid rgba(17, 24, 39, 0.08);
}

.sol-pullquote::before {
  content: '';
  position: absolute;
  left: 0;
  top: 1.35rem;
  width: 2px;
  height: calc(100% - 1.35rem);
  background: #111827;
}

.sol-pullquote p {
  margin: 0;
  max-width: 36rem;
  font-size: clamp(1.05rem, 2vw, 1.2rem);
  font-weight: 500;
  line-height: 1.65;
  letter-spacing: -0.02em;
  color: #111827;
}

.sol-section--scope {
  background: #fff;
}

.sol-scope {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid rgba(17, 24, 39, 0.1);
}

@media (min-width: 900px) {
  .sol-scope {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 3rem;
  }
}

.sol-scope__item {
  padding: 1.5rem 0;
  border-bottom: 1px solid rgba(17, 24, 39, 0.08);
}

@media (min-width: 900px) {
  .sol-scope__item:nth-last-child(-n + 2) {
    border-bottom: none;
  }
}

.sol-scope__title {
  margin: 0 0 0.5rem;
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: #111827;
}

.sol-scope__desc {
  margin: 0;
  font-size: 14px;
  line-height: 1.65;
  color: #6b7280;
}

.sol-screens {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 3rem;
  padding-top: 3rem;
  border-top: 1px solid rgba(17, 24, 39, 0.08);
}

@media (min-width: 900px) {
  .sol-screens {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1.25rem;
  }
}

.sol-screen {
  margin: 0;
}

.sol-screen__img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 0.5rem;
  border: 1px solid rgba(17, 24, 39, 0.1);
}

.sol-screen__label {
  margin: 0.6rem 0 0;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #9ca3af;
}

.sol-section--product {
  color: #fff;
  background-color: #040404;
  border-top-color: rgba(255, 255, 255, 0.08);
}

.sol-product-band {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  align-items: center;
}

@media (min-width: 900px) {
  .sol-product-band {
    grid-template-columns: minmax(0, 0.88fr) minmax(0, 1.12fr);
    gap: clamp(2.5rem, 5vw, 4rem);
  }
}

.sol-product-band__copy {
  max-width: 30rem;
}

.sol-product-band__label {
  margin: 0 0 1.5rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.42);
}

.sol-product-band__link {
  display: grid;
  gap: 1rem;
  color: inherit;
  text-decoration: none;
}

.sol-product-band__name {
  font-size: clamp(2rem, 4.5vw, 2.85rem);
  font-weight: 600;
  letter-spacing: -0.04em;
  line-height: 1.02;
  color: #fff;
  transition: color 220ms ease;
}

.sol-product-band__link:hover .sol-product-band__name {
  color: rgba(255, 255, 255, 0.78);
}

.sol-product-band__desc {
  max-width: 28rem;
  font-size: 15px;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.58);
}

.sol-product-band__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  width: fit-content;
  margin-top: 0.35rem;
  padding: 0.7rem 1.15rem;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 999px;
  font-size: 14px;
  font-weight: 500;
  color: #fff;
  transition:
    border-color 220ms ease,
    background 220ms ease,
    transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
}

.sol-product-band__link:hover .sol-product-band__cta {
  border-color: rgba(255, 255, 255, 0.42);
  background: rgba(255, 255, 255, 0.06);
  transform: translateX(4px);
}

.sol-product-band__preview {
  margin: 0;
  overflow: hidden;
}

.sol-product-band__img {
  display: block;
  width: 100%;
  height: auto;
  border: none;
  border-radius: 0;
  clip-path: inset(8.5% 3.6% 7.1% 3.5%);
}

.sol-section--process {
  background: #fafafa;
  border-top-color: rgba(17, 24, 39, 0.08);
}

.sol-story {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  align-items: center;
}

@media (min-width: 900px) {
  .sol-story {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: clamp(2.5rem, 5vw, 4.5rem);
  }
}

.sol-story__media {
  margin: 0;
  position: relative;
}

.sol-story__img {
  display: block;
  width: 100%;
  aspect-ratio: 5 / 4;
  object-fit: cover;
  object-position: center 42%;
  border-radius: 0;
  filter: grayscale(0.28) contrast(1.05) saturate(0.92);
}

.sol-story__copy {
  max-width: 34rem;
}

.sol-story__eyebrow {
  margin: 0 0 1.25rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid rgba(17, 24, 39, 0.1);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #9ca3af;
}

.sol-story__title {
  margin: 0 0 1.25rem;
  font-size: clamp(1.65rem, 3.6vw, 2.35rem);
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1.1;
  color: #111827;
}

.sol-story__prose {
  font-size: 15px;
  line-height: 1.75;
  color: #4b5563;
}

.sol-story__prose p {
  margin: 0;
}

.sol-story__prose p + p {
  margin-top: 1rem;
}

.sol-section--related {
  background: #fff;
  padding-top: 2rem;
}

.sol-related {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid rgba(17, 24, 39, 0.1);
}

.sol-related__link {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.35rem 1.25rem;
  align-items: center;
  padding: 1.15rem 0;
  border-bottom: 1px solid rgba(17, 24, 39, 0.08);
  color: inherit;
  text-decoration: none;
  transition: opacity 200ms ease;
}

.sol-related__link:hover {
  opacity: 0.72;
}

.sol-related__meta {
  grid-column: 1;
  font-size: 12px;
  color: #6b7280;
}

.sol-related__title {
  grid-column: 1;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: #111827;
}

.sol-related__arrow {
  grid-column: 2;
  grid-row: 1 / span 2;
  font-size: 1.1rem;
  color: #9ca3af;
  transition: transform 220ms ease;
}

.sol-related__link:hover .sol-related__arrow {
  transform: translateX(4px);
}

.sol-section--cta {
  padding-bottom: 5rem;
  background: #fff;
  border-top-color: rgba(17, 24, 39, 0.1);
}

.sol-cta {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}

@media (min-width: 900px) {
  .sol-cta {
    grid-template-columns: 1.2fr auto;
    align-items: center;
    gap: 3rem;
  }
}

.sol-cta__title {
  margin: 0;
  font-size: clamp(1.5rem, 3.5vw, 2rem);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.12;
  color: #111827;
}

.sol-cta__text {
  margin: 0.85rem 0 0;
  max-width: 38rem;
  font-size: 15px;
  line-height: 1.7;
  color: #6b7280;
}

.sol-cta__text strong {
  color: #111827;
  font-weight: 600;
}

.sol-cta__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.sol-cta__btn.btn-black {
  background: #000;
  color: #fff;
}

.sol-cta__btn.btn-black:hover {
  background: #1a1a1a;
}

.sol-cta__btn.btn-black .btn-roll__icon {
  background: #fff;
  color: #000;
}

.sol-cta__btn-secondary.btn-outline {
  border-color: rgba(17, 24, 39, 0.12);
  color: #374151;
}

.sol-cta__btn-secondary.btn-outline:hover {
  border-color: rgba(17, 24, 39, 0.2);
  background: transparent;
  color: #111827;
}

@media (prefers-reduced-motion: reduce) {
  .sol-product-band__link:hover .sol-product-band__cta,
  .sol-related__link:hover .sol-related__arrow {
    transform: none;
  }
}