:root {
      --brand-blue: #0189d4;
      --brand-navy: #001442;
      --brand-white: #ffffff;
      --brand-ice: #eef7fc;
      --brand-sky-soft: #dff0fa;
      --brand-ink: #050d20;
      --brand-cyan: #74d4ff;
      /* Accent for dark-bg highlights — a luminous cyan→brand-blue sweep,
         echoing the CTA ring's colours (used as clipped gradient text). */
      --accent-gradient: linear-gradient(118deg, #8fe0ff 0%, #4fbdf0 52%, #0189d4 100%);
      --surface-paper: #f5f8fc;
      --surface-line: #e4ecf5;
      --color-background: rgb(0 20 66 / 2%);
      --color-foreground: var(--brand-ink);
      --color-muted: #566579;
      --color-accent: var(--brand-blue);
      --font-primary: "Outfit", Arial, sans-serif;
      --page-gutter: 10px;
      --section-gap: 10px;
      --gap-small: 5px;
      --gap-medium: 10px;
      --radius-small: 10px;
      --radius-medium: 18px;
      --radius-large: 24px;
      --radius-xlarge: 24px;
      --hero-content-x: 60px;
      --header-inset: calc(var(--page-gutter) + var(--hero-content-x));
    }

    * {
      box-sizing: border-box;
    }

    html {
      /* auto OLMALI: CSS smooth, ScrollTrigger.refresh sirasinda scroll geri
         yazimini animasyonlu yapip pin/trigger olcumlerini scroll kadar
         kaydiriyor (dibe inip cikinca bozulan animasyonlarin koku). Sayfa
         kaydirma yumusakligi zaten Lenis'te; anchor'lar site.js scrollTo ile. */
      scroll-behavior: auto;
      /* Canli tuzagi: yavas agda tembel yuklenen icerik, Chrome'un scroll
         anchoring'iyle hizli iniste scrollY'yi aniden sicratir (kaydirma
         "kesilir", header sahte scroll-up gorur). Yerelde gorulmez (her sey
         onbellekte). Kapali tutulur; sayfa uzunlugu degisimleri zaten
         ScrollTrigger/Lenis tarafinda yonetiliyor. */
      overflow-anchor: none;
    }

    body {
      margin: 0;
      min-height: 100vh;
      min-height: 100svh;   /* stabil: mobil adres-çubuğu ile zıplamaz */
      background: var(--color-background);
      color: var(--color-foreground);
      font-family: var(--font-primary);
      overflow-x: hidden;
    }

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

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

    button,
    input,
    textarea,
    select {
      font: inherit;
    }

    button {
      border: 0;
      cursor: pointer;
    }

    .page {
      width: 100%;
      min-height: 100vh;
      min-height: 100svh;
    }

    .site-section {
      width: 100%;
      margin: 0;
      padding-right: var(--page-gutter);
      padding-left: var(--page-gutter);
    }

    .bento-grid {
      display: grid;
      width: 100%;
      gap: var(--section-gap);
    }

    .bento-box {
      width: 100%;
      overflow: hidden;
      background: #f5f5f5;
      border-radius: var(--radius-medium);
    }

    .bento-box--small {
      border-radius: var(--radius-small);
    }

    .bento-box--medium {
      border-radius: var(--radius-medium);
    }

    .bento-box--large {
      border-radius: var(--radius-large);
    }

    .bento-box--xlarge {
      border-radius: var(--radius-xlarge);
    }

    /* Smart sticky header: transparent over the hero, then a full-width white
       bar on scroll. Hides on scroll-down, reappears on scroll-up. */
    .site-header {
      /* Over the first ~50vh the header is part of the page flow-top: it stays
         transparent and simply scrolls away (absolute), never fixed. Past the
         threshold it becomes fixed + smart-sticky (see .is-sticky). */
      position: absolute;
      top: 0;
      right: 0;
      left: 0;
      /* Always above the scroll-video (incl. its z:40 "front" state) so the
         sticky header is never covered by the video at any scroll level. */
      z-index: 60;
      display: grid;
      grid-template-columns: minmax(244px, 1fr) auto minmax(244px, 1fr);
      align-items: center;
      gap: var(--gap-medium);
      padding: 28px var(--header-inset);
      /* Şeffaf (üstteki) halde hafif boşluk; sticky olunca 0'a iner. */
      margin-top: 20px;
      pointer-events: none;
      transition:
        transform 0.5s cubic-bezier(0.4, 0, 0.2, 1),
        padding 0.4s ease,
        margin-top 0.4s ease,
        background-color 0.4s ease,
        box-shadow 0.4s ease;
    }

    /* Smart-sticky mode: fixed to the viewport, past the 50vh threshold. */
    .site-header.is-sticky {
      position: fixed;
      margin-top: 0;
    }

    .site-header.is-scrolled {
      padding: 8px var(--header-inset);
      background: #fff;
      box-shadow: 0 8px 40px rgba(0, 20, 66, 0.09);
    }

    .site-header.is-hidden {
      /* Extra 2px past its own height + no shadow so neither a sub-pixel white
         edge nor the box-shadow bleeds a line at the very top when hidden. */
      transform: translateY(calc(-100% - 2px));
      box-shadow: none;
    }

    .site-header > * {
      pointer-events: auto;
    }

    .header-logo {
      position: relative;
      display: inline-flex;
      align-items: center;
      width: 244px;
      transition: width 0.35s ease;
    }

    /* Compact sticky bar: smaller logo, tighter vertical padding. */
    .site-header.is-scrolled .header-logo { width: 148px; }

    .header-logo img {
      width: 100%;
      height: auto;
      transition: opacity 0.35s ease;
    }

    .header-logo__dark {
      position: absolute;
      inset: 0;
      opacity: 0;
    }

    /* On the white bar, swap to the dark logo + dark nav/contact. */
    .site-header.is-scrolled .header-logo__light { opacity: 0; }
    .site-header.is-scrolled .header-logo__dark { opacity: 1; }
    .site-header.is-scrolled .header-nav { color: rgba(0, 20, 66, 0.68); }
    .site-header.is-scrolled .header-nav a:hover,
    .site-header.is-scrolled .header-nav__trigger:hover,
    .site-header.is-scrolled .header-nav__item:focus-within .header-nav__trigger {
      color: var(--brand-navy);
    }
    /* White bar: the same pill in reverse — solid navy, more compact. */
    .site-header.is-scrolled .header-contact {
      min-height: 38px;
      padding: 0 17px;
      gap: 8px;
      font-size: 13px;
      background: var(--brand-navy);
      color: #fff;
      box-shadow: 0 12px 30px rgba(0, 20, 66, 0.22);
    }
    .site-header.is-scrolled .header-contact .header-contact__arrow { width: 12px; height: 12px; }
    .site-header.is-scrolled .header-contact:hover,
    .site-header.is-scrolled .header-contact:focus-visible {
      background: #01245c;
      color: #fff;
      box-shadow: 0 18px 44px rgba(0, 20, 66, 0.3);
    }

    .header-nav {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 30px;
      color: rgba(255, 255, 255, 0.82);
      font-size: 14px;
      font-weight: 500;
      line-height: 1;
      letter-spacing: -0.2px;
      white-space: nowrap;
    }

    .header-nav a,
    .header-nav__trigger {
      display: inline-flex;
      align-items: center;
      gap: var(--gap-small);
      padding: 0;
      border: 0;
      background: transparent;
      color: inherit;
      font: inherit;
      transition: color 0.22s ease;
    }

    .header-nav a:hover,
    .header-nav__trigger:hover,
    .header-nav__item:focus-within .header-nav__trigger {
      color: var(--brand-white);
    }

    .header-nav__item {
      position: relative;
      display: inline-flex;
      align-items: center;
    }

    .header-nav__item::after {
      content: "";
      position: absolute;
      top: 100%;
      left: -24px;
      width: calc(100% + 48px);
      height: 28px;
    }

    .header-nav__chevron {
      width: 17px;
      height: 17px;
      fill: currentColor;
      opacity: 1;
    }

    .mega-menu {
      position: absolute;
      top: calc(100% + 12px);
      left: 50%;
      z-index: 30;
      width: min(1080px, calc(100vw - 40px));
      padding: 34px;
      border: 1px solid rgba(0, 20, 66, 0.08);
      border-radius: 28px;
      background: rgba(255, 255, 255, 0.96);
      color: var(--brand-navy);
      box-shadow: 0 32px 90px rgba(0, 20, 66, 0.2);
      opacity: 0;
      pointer-events: none;
      transform: translate(-50%, 10px);
      transition:
        opacity 0.22s ease,
        transform 0.22s ease;
      backdrop-filter: blur(18px);
    }

    .header-nav__item:hover .mega-menu,
    .header-nav__item:focus-within .mega-menu {
      opacity: 1;
      pointer-events: auto;
      transform: translate(-50%, 0);
    }

    .mega-menu__grid {
      display: grid;
      grid-template-columns: 250px minmax(260px, 1fr) 330px;
      gap: 28px;
      align-items: stretch;
      min-height: 242px;
    }

    .mega-menu--simple {
      width: min(720px, calc(100vw - 40px));
    }

    .mega-menu--simple .mega-menu__grid {
      grid-template-columns: minmax(260px, 1fr) 330px;
      min-height: 220px;
    }

    .mega-menu--simple .mega-menu__primary {
      padding-right: 28px;
    }

    .mega-menu__kicker {
      display: block;
      margin-bottom: 22px;
      color: rgba(0, 20, 66, 0.42);
      font-size: 11px;
      font-weight: 600;
      line-height: 1;
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }

    .mega-menu__primary,
    .mega-menu__secondary {
      min-width: 0;
    }

    .mega-menu__primary {
      padding-right: 22px;
      border-right: 1px solid rgba(0, 20, 66, 0.08);
    }

    .mega-menu__list {
      display: grid;
      gap: var(--gap-small);
      margin: 0;
      padding: 0;
      list-style: none;
    }

    .mega-menu__category,
    .mega-menu__link {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      min-height: 40px;
      padding: 0 13px;
      border: 0;
      border-radius: var(--radius-small);
      background: transparent;
      color: rgba(0, 20, 66, 0.78);
      font-size: 14px;
      font-weight: 500;
      line-height: 1;
      letter-spacing: 0;
      text-align: left;
      transition:
        background-color 0.2s ease,
        color 0.2s ease;
    }

    .header-nav .mega-menu__category,
    .header-nav .mega-menu__link {
      color: rgba(0, 20, 66, 0.78);
      text-decoration: none;
    }

    .header-nav .mega-menu__category.is-active,
    .header-nav .mega-menu__category:hover,
    .header-nav .mega-menu__category:focus-visible,
    .header-nav .mega-menu__link:hover,
    .header-nav .mega-menu__link:focus-visible {
      background: rgba(0, 20, 66, 0.055);
      color: var(--brand-blue);
    }

    .mega-menu__category svg {
      width: 15px;
      height: 15px;
      fill: currentColor;
      opacity: 0.46;
    }

    .mega-menu__panel {
      display: none;
      min-height: 100%;
    }

    .mega-menu__panel.is-active {
      display: grid;
      align-content: start;
      gap: var(--gap-small);
    }

    .mega-menu__group-title {
      margin: 0 0 12px;
      color: rgba(0, 20, 66, 0.42);
      font-size: 11px;
      font-weight: 600;
      line-height: 1;
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }

    /* Tabbed mega-menu (Ürünler: markaya / endikasyona göre) */
    .mega-menu__tabs {
      display: inline-flex;
      gap: 4px;
      margin-bottom: 24px;
      padding: 4px;
      border-radius: 999px;
      background: rgba(0, 20, 66, 0.05);
    }

    .mega-menu__tab {
      padding: 8px 18px;
      border: 0;
      border-radius: 999px;
      background: transparent;
      color: rgba(0, 20, 66, 0.58);
      font-size: 13px;
      font-weight: 600;
      letter-spacing: -0.1px;
      cursor: pointer;
      transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
    }

    .mega-menu__tab:hover { color: var(--brand-navy); }

    .mega-menu__tab.is-active {
      background: #fff;
      color: var(--brand-blue);
      box-shadow: 0 4px 14px rgba(0, 20, 66, 0.09);
    }

    .mega-menu__tabpanel { display: none; }
    .mega-menu__tabpanel.is-active { display: block; }

    .mega-menu__subgroup {
      display: block;
      margin-top: 10px;
      color: var(--brand-blue);
      font-size: 10.5px;
      font-weight: 700;
      line-height: 1;
      letter-spacing: 0.1em;
      text-transform: uppercase;
    }

    .mega-menu__group-title + .mega-menu__subgroup { margin-top: 0; }

    /* Mega-menu refined design lives after the later .mega-menu block (search
       "Mega-menu — refined, consistent design") so it wins the cascade. */

    .mega-menu__visual {
      display: grid;
      min-width: 0;
      min-height: 0;
      align-content: stretch;
    }

    .mega-menu__media {
      width: 100%;
      min-height: 0;
      overflow: hidden;
      border-radius: var(--radius-medium);
      background:
        radial-gradient(circle at 50% 0%, rgba(1, 137, 212, 0.28), rgba(0, 20, 66, 0.08) 58%, rgba(0, 20, 66, 0.04)),
        rgba(0, 20, 66, 0.04);
    }

    .mega-menu__media img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    /* Right cell: language switcher + contact CTA */
    .header-actions {
      display: flex;
      align-items: center;
      gap: 22px;
      justify-self: end;
    }

    .header-lang {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      color: rgba(255, 255, 255, 0.72);
      font-size: 13px;
      font-weight: 600;
      letter-spacing: 0.05em;
      text-decoration: none;
      transition: color 0.22s ease;
    }

    .header-lang__globe { width: 17px; height: 17px; }

    .header-lang:hover,
    .header-lang:focus-visible { color: var(--brand-white); }

    .site-header.is-scrolled .header-lang { color: rgba(0, 20, 66, 0.55); }
    .site-header.is-scrolled .header-lang:hover,
    .site-header.is-scrolled .header-lang:focus-visible { color: var(--brand-navy); }

    /* Transparent-state contact CTA mirrors the hero's primary button:
       solid white pill, navy text, arrow, soft blue glow, lift on hover. */
    .site-header .header-contact {
      justify-self: end;
      display: inline-flex;
      align-items: center;
      gap: 10px;
      min-height: 46px;
      padding: 0 22px;
      border: 0;
      border-radius: 999px;
      background: var(--brand-white);
      color: var(--brand-navy);
      font-size: 14px;
      font-weight: 600;
      letter-spacing: -0.1px;
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.7),
        0 16px 40px rgba(1, 137, 212, 0.3);
      transition:
        transform 0.3s cubic-bezier(0.19, 1, 0.22, 1),
        box-shadow 0.3s ease,
        background-color 0.3s ease;
    }

    .site-header .header-contact::before { display: none; }

    .header-contact__arrow {
      width: 14px;
      height: 14px;
      fill: currentColor;
      transition: transform 0.3s cubic-bezier(0.19, 1, 0.22, 1);
    }

    .site-header .header-contact:hover,
    .site-header .header-contact:focus-visible {
      transform: translateY(-2px);
      background: #eaf6ff;
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.82),
        0 22px 56px rgba(1, 137, 212, 0.44);
    }

    .site-header .header-contact:hover .header-contact__arrow,
    .site-header .header-contact:focus-visible .header-contact__arrow {
      transform: translateX(4px);
    }

    .hero-section {
      /* Rounded panel + clip artık BURADA — Safari transform'lu videoyu bu
         seviyede sorunsuz kırpıyor. Gutter, padding yerine margin ile
         verildi ki görüntü birebir korunsun. */
      min-height: calc(100svh - (var(--page-gutter) * 2));
      /* .site-section width:100% + margin taşma yaratır → genişliği margin'leri
         düşecek şekilde auto yap (kapsayıcı - 2*gutter). */
      width: auto;
      margin: var(--page-gutter);
      padding: 0;
      border-radius: var(--radius-xlarge);
      overflow: hidden;
    }

    .vision-section {
      display: flex;
      align-items: center;
      min-height: 100svh;
      padding-top: 0;
    }

    .vision-panel {
      position: relative;
      /* Metrics (400px aşağı) + copy sığacak kadar; aside metni partners'a
         taşındığı için gereksiz fazlalık kırpıldı. */
      min-height: clamp(940px, 112svh, 1160px);
      padding: var(--hero-content-x);
      overflow: hidden;
      border-radius: var(--radius-xlarge);
      background: transparent;
      color: var(--brand-navy);
      box-shadow: none;
    }

    .vision-kicker {
      display: block;
      margin-bottom: 20px;
      color: var(--brand-navy);
      font-size: 11px;
      font-weight: 600;
      line-height: 1;
      letter-spacing: 0.05em;
      text-transform: uppercase;
    }

    .vision-title {
      max-width: 660px;
      margin: 0;
      color: var(--brand-blue);
      font-size: clamp(42px, 5vw, 64px);
      font-weight: 500;
      line-height: 1;
      letter-spacing: -3px;
    }

    .vision-title span {
      display: block;
      color: var(--brand-navy);
    }

    .vision-plus {
      position: absolute;
      top: 48%;
      color: rgba(0, 20, 66, 0.24);
      font-size: 32px;
      font-weight: 300;
      line-height: 1;
    }

    .vision-plus--left {
      left: var(--hero-content-x);
    }

    .vision-plus--center {
      left: 50%;
      transform: translateX(-50%);
    }

    .vision-bottom {
      position: absolute;
      top: clamp(190px, 28vh, 280px);
      right: var(--hero-content-x);
      bottom: var(--hero-content-x);
      left: var(--hero-content-x);
      display: grid;
      /* space-between → ortada boşluk (scroll-anim orb için). Sol = metrikler
         (geniş) + aside metni (aşağıda); sağ = copy (genişletildi). */
      grid-template-columns: minmax(600px, 680px) minmax(400px, 520px);
      justify-content: space-between;
      align-items: start;
      gap: var(--gap-medium);
    }

    /* Sol sütun: metrikler ~300px aşağıda (padding-top knob). */
    .vision-aside {
      display: flex;
      min-width: 0;
      flex-direction: column;
      align-self: stretch;
      padding-top: 300px;   /* metrics'i aşağı taşı */
    }

    .vision-main {
      display: flex;
      min-width: 0;
      flex-direction: column;
      align-self: start;
      gap: var(--gap-medium);
    }

    .vision-aside-title {
      margin: 0;
      color: var(--brand-navy);
      font-size: 22px;
      font-weight: 500;
      line-height: 1;
      letter-spacing: -1px;
    }

    .vision-aside-copy {
      max-width: 420px;
      margin: 16px 0 24px;
      color: rgba(0, 20, 66, 0.56);
      font-size: 18px;
      font-weight: 300;
      line-height: 1.4;
      letter-spacing: -0.2px;
    }

    .vision-button {
      min-height: auto;
      padding-left: 0;
      font-size: 12px;
    }

    .vision-button .button__icon {
      display: none;
    }

    .vision-copy {
      max-width: 400px;
      margin: 0;
      color: rgba(0, 20, 66, 0.48);
      font-size: clamp(18px, 1.7vw, 24px);
      font-weight: 400;
      line-height: 1.25;
      letter-spacing: -0.6px;
    }
    /* Vision metni altindaki Hakkimizda butonu (ixv010): metinle arasina
       nefes payi. */
    .vision-main .partners-callout__link {
      margin-top: 28px;
    }

    .vision-copy__lead {
      display: block;
      padding-left: 0;
      text-align: right;
    }

    .vision-copy__body {
      display: block;
      text-align: justify;
      text-align-last: left;
    }

    .vision-copy strong {
      color: var(--brand-navy);
      font-weight: 500;
    }

    .metrics-grid {
      display: grid;
      grid-template-columns: minmax(0, 1fr) 1px minmax(0, 1fr) 1px minmax(0, 1fr);
      gap: var(--gap-medium);
      align-items: center;
      width: min(1280px, 100%);
      margin: 0 auto;
      padding: 30px;
      overflow: hidden;
      border-radius: var(--radius-small);
      background: #fff;
      box-shadow: none;
    }

    .vision-aside .metrics-grid {
      width: 100%;
      margin: 0;
    }

    /* Laptop / MacBook (orta genişlik): metrics sütunu ~500px korunur, copy sütunu
       daralır → ortadaki orb boşluğu açık kalır. */
    @media (min-width: 861px) and (max-width: 1400px) {
      .vision-bottom {
        grid-template-columns: minmax(560px, 620px) minmax(360px, 460px);
      }
      .metric-value { font-size: clamp(32px, 3.4vw, 44px); letter-spacing: -2px; }
      .metric-unit { font-size: clamp(19px, 2vw, 26px); }
      .metric-card { min-height: 120px; }
    }

    .metric-card {
      position: relative;
      display: flex;
      min-width: 0;
      min-height: 150px;
      flex-direction: column;
      justify-content: center;
      padding: 0;
      background: transparent;
      color: var(--brand-navy);
      align-items: center;
    }

    .metric-divider {
      align-self: stretch;
      justify-self: center;
      width: 1px;
      background: rgba(0, 20, 66, 0.05);
    }

    .metric-value {
      display: flex;
      align-items: flex-start;
      gap: 6px;
      margin: 0 0 16px;
      font-size: clamp(38px, 4vw, 50px);   /* ~540px sütunda rahat sığar */
      font-weight: 600;
      line-height: 0.9;
      letter-spacing: -2.4px;
      justify-content: center;
    }

    .metric-unit {
      margin-top: 7px;
      color: rgba(0, 20, 66, 0.34);
      font-size: clamp(22px, 2.3vw, 30px);
      font-weight: 600;
      line-height: 1;
      letter-spacing: -1px;
    }

    .metric-label {
      max-width: 150px;
      margin: 0;
      color: rgba(0, 20, 66, 0.54);
      font-size: 18px;
      font-weight: 300;
      line-height: 1.2;
      letter-spacing: -0.4px;
      text-align: center;
    }

    .expertise-section {
      min-height: 100svh;
      padding: var(--page-gutter);
    }

    .expertise-shell {
      position: relative;
      display: flex;
      flex-direction: column;
      gap: clamp(28px, 4vh, 56px);
      width: 100%;
      min-height: calc(100svh - (var(--page-gutter) * 2));
      padding: var(--hero-content-x);
      isolation: isolate;
      /* Visible so the magnetic CTA is never clipped as it moves; the rounded
         corners are preserved by rounding the background pseudo-elements below
         (the element's own background already clips to border-radius). */
      overflow: visible;
      border-radius: var(--radius-xlarge);
      background:
        linear-gradient(135deg, rgba(1, 137, 212, 0.36) 0%, rgba(0, 20, 66, 0.02) 36%, rgba(0, 10, 34, 0.9) 100%),
        linear-gradient(180deg, var(--brand-navy) 0%, #00091f 100%);
      color: var(--brand-white);
    }

    .expertise-shell::before {
      content: "";
      position: absolute;
      inset: 0;
      z-index: -1;
      border-radius: var(--radius-xlarge);
      background-image:
        linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
      background-size: 92px 92px;
      opacity: 0.36;
      overflow: hidden;
    }

    .expertise-shell::after {
      content: "";
      position: absolute;
      right: 0;
      bottom: 0;
      left: 0;
      z-index: -1;
      height: 42%;
      border-radius: var(--radius-xlarge);
      background: linear-gradient(0deg, rgba(1, 137, 212, 0.18), rgba(1, 137, 212, 0));
    }

    .expertise-head {
      width: min(1440px, 100%);
      margin: 0 auto;
    }

    .expertise-kicker {
      display: block;
      margin-bottom: 18px;
      background: var(--accent-gradient);
      -webkit-background-clip: text;
      background-clip: text;
      -webkit-text-fill-color: transparent;
      color: transparent;
      font-size: 11px;
      font-weight: 600;
      line-height: 1;
      letter-spacing: 0.05em;
      text-transform: uppercase;
    }

    .expertise-title {
      max-width: 720px;
      margin: 0;
      color: var(--brand-white);
      font-size: clamp(34px, 4.4vw, 60px);
      font-weight: 500;
      line-height: 1;
      letter-spacing: -2.6px;
    }

    .expertise-title span {
      display: block;
      background: var(--accent-gradient);
      -webkit-background-clip: text;
      background-clip: text;
      -webkit-text-fill-color: transparent;
      color: transparent;
    }

    .expertise-bento {
      display: grid;
      grid-template-columns: minmax(360px, 1.06fr) minmax(220px, 0.52fr) minmax(220px, 0.52fr);
      grid-template-rows: repeat(2, minmax(0, 1fr));
      align-self: center;
      flex: 1 1 auto;
      width: min(1440px, 100%);
      gap: var(--gap-medium);
      min-height: clamp(480px, 62vh, 680px);
    }

    .expertise-cta {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: clamp(24px, 4vw, 64px);
      flex-wrap: wrap;
      width: min(1440px, 100%);
      margin: 0 auto;
    }

    .expertise-cta__copy {
      max-width: 680px;
      margin: 0;
      color: rgba(255, 255, 255, 0.7);
      font-size: clamp(14px, 1vw, 16px);
      line-height: 1.6;
    }

    .expertise-cta__button {
      flex: 0 0 auto;
    }

    .expertise-card {
      position: relative;
      display: flex;
      min-width: 0;
      min-height: 0;
      flex-direction: column;
      justify-content: space-between;
      padding: clamp(20px, 2vw, 32px);
      overflow: hidden;
      border-radius: var(--radius-medium);
      background:
        radial-gradient(circle at 50% 0%, rgba(38, 92, 255, 0.5) 0%, rgba(1, 137, 212, 0.24) 34%, rgba(1, 137, 212, 0) 68%),
        linear-gradient(145deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.024)),
        rgba(0, 9, 31, 0.72);
      color: var(--brand-white);
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        0 22px 70px rgba(0, 0, 0, 0.24);
    }

    .expertise-card::before {
      content: "";
      position: absolute;
      inset: 0;
      background:
        radial-gradient(circle at 54% 12%, rgba(62, 104, 255, 0.78) 0%, rgba(1, 137, 212, 0.34) 34%, rgba(1, 137, 212, 0) 68%),
        linear-gradient(120deg, rgba(1, 137, 212, 0.48), rgba(1, 137, 212, 0) 48%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(0, 6, 22, 0.48) 100%);
      opacity: 0.92;
      pointer-events: none;
    }

    .expertise-card > * {
      position: relative;
      z-index: 1;
    }

    .expertise-card--primary {
      grid-column: 1 / 2;
      grid-row: 1 / 3;
      padding: clamp(28px, 3vw, 48px);
      background:
        radial-gradient(circle at 50% 8%, rgba(49, 91, 255, 0.95) 0%, rgba(1, 137, 212, 0.56) 34%, rgba(0, 20, 66, 0.18) 62%),
        linear-gradient(180deg, rgba(39, 82, 255, 0.72) 0%, rgba(0, 20, 66, 0.58) 52%, rgba(0, 5, 18, 0.94) 100%),
        var(--brand-navy);
    }

    .expertise-card--primary::before {
      background:
        radial-gradient(circle at 48% 14%, rgba(87, 143, 255, 0.9) 0%, rgba(38, 92, 255, 0.48) 34%, rgba(0, 10, 34, 0) 66%),
        linear-gradient(155deg, rgba(84, 174, 255, 0.72), rgba(1, 137, 212, 0.16) 42%, rgba(0, 0, 0, 0.34) 100%),
        linear-gradient(90deg, rgba(255, 255, 255, 0.08) 1px, transparent 1px);
      background-size: auto, auto, 78px 78px;
    }

    .expertise-card--center {
      grid-column: 2 / 3;
      grid-row: 1 / 2;
      align-items: center;
      justify-content: center;
      text-align: center;
    }

    .expertise-card--metric {
      grid-column: 3 / 4;
      grid-row: 1 / 2;
    }

    .expertise-card--chart {
      grid-column: 2 / 4;
      grid-row: 2 / 3;
      background:
        radial-gradient(circle at 74% 20%, rgba(60, 102, 255, 0.7) 0%, rgba(1, 137, 212, 0.3) 34%, rgba(1, 137, 212, 0) 62%),
        linear-gradient(135deg, rgba(0, 20, 66, 0.88), rgba(1, 137, 212, 0.38)),
        rgba(0, 7, 24, 0.84);
    }

    .expertise-card__index {
      color: rgba(255, 255, 255, 0.46);
      font-size: 13px;
      font-weight: 600;
      line-height: 1;
      letter-spacing: 0.08em;
    }

    .expertise-card--primary .expertise-card__index {
      color: rgba(255, 255, 255, 0.68);
    }

    .expertise-card__number {
      margin: auto 0 24px;
      color: rgba(255, 255, 255, 0.88);
      font-size: 170px;
      font-weight: 900;
      line-height: 0.78;
      letter-spacing: 0;
      text-shadow: 0 18px 70px rgba(0, 0, 0, 0.26);
    }

    .expertise-card__number span {
      color: transparent;
      -webkit-text-stroke: 1px rgba(255, 255, 255, 0.68);
      text-stroke: 1px rgba(255, 255, 255, 0.68);
    }

    .expertise-card__content {
      display: grid;
      gap: 14px;
      max-width: 520px;
    }

    .expertise-card--center .expertise-card__content {
      justify-items: center;
      max-width: 320px;
    }

    .expertise-card__title {
      margin: 0;
      color: var(--brand-white);
      font-size: 34px;
      font-weight: 500;
      line-height: 1.03;
      letter-spacing: 0;
    }

    .expertise-card:not(.expertise-card--primary) .expertise-card__title {
      font-size: 26px;
      letter-spacing: 0;
    }

    .expertise-card__copy {
      margin: 0;
      color: rgba(255, 255, 255, 0.66);
      font-size: 16px;
      font-weight: 300;
      line-height: 1.46;
      letter-spacing: 0;
    }

    .expertise-card__copy strong {
      color: var(--brand-white);
      font-weight: 500;
    }

    .expertise-visual {
      display: grid;
      gap: 8px;
      width: min(220px, 70%);
      margin-bottom: 24px;
    }

    .expertise-visual span {
      display: block;
      height: 8px;
      border-radius: 999px;
      background: linear-gradient(90deg, rgba(255, 255, 255, 0.82), rgba(1, 137, 212, 0.52));
      opacity: 0.9;
    }

    .expertise-visual span:nth-child(2) {
      width: 72%;
    }

    .expertise-visual span:nth-child(3) {
      width: 48%;
    }

    .expertise-metric {
      display: inline-flex;
      align-items: baseline;
      gap: 8px;
      margin-bottom: 24px;
      color: var(--brand-white);
      font-size: 74px;
      font-weight: 800;
      line-height: 0.88;
      letter-spacing: 0;
    }

    .expertise-metric small {
      color: rgba(255, 255, 255, 0.58);
      font-size: 18px;
      font-weight: 500;
      letter-spacing: 0;
    }

    .expertise-chart {
      width: min(260px, 100%);
      margin-bottom: 24px;
      color: #75a7ff;
      opacity: 0.95;
    }

    .expertise-chart path,
    .expertise-chart line {
      fill: none;
      stroke: currentColor;
      stroke-width: 3;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .expertise-chart line {
      opacity: 0.36;
      stroke-dasharray: 6 8;
    }

    .carousel-section {
      display: flex;
      align-items: center;
      min-height: auto;
      padding-top: 90px;
      padding-right: 0;
      padding-bottom: 90px;
    }

    .carousel-shell {
      width: 100%;
      padding-right: 0;
      padding-left: var(--hero-content-x);
      color: var(--brand-navy);
    }

    .carousel-header-container {
      margin-bottom: 90px;
      padding-right: var(--hero-content-x);
    }

    .carousel-header {
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      gap: var(--gap-medium);
    }

    .carousel-heading {
      display: grid;
      gap: 14px;
      min-width: 0;
    }

    .carousel-kicker {
      display: block;
      margin-bottom: 20px;
      color: var(--brand-navy);
      font-size: 11px;
      font-weight: 600;
      line-height: 1;
      letter-spacing: 0.05em;
      text-transform: uppercase;
    }

    .carousel-headline {
      max-width: 680px;
      margin: 0;
      color: var(--brand-navy);
      font-size: clamp(40px, 4.4vw, 64px);
      font-weight: 500;
      line-height: 1;
      letter-spacing: -2.8px;
    }

    .carousel-headline__highlight {
      color: var(--brand-blue);
    }

    .carousel-controls {
      display: inline-flex;
      align-items: center;
      gap: var(--gap-small);
      flex: 0 0 auto;
    }

    .carousel-control {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 54px;
      height: 54px;
      border-radius: var(--radius-small);
      background: var(--brand-white);
      color: var(--brand-navy);
      transition:
        background-color 0.28s ease,
        color 0.28s ease,
        transform 0.28s ease;
    }

    .carousel-control:hover {
      background: var(--brand-blue);
      color: var(--brand-white);
      transform: translateY(-2px);
    }

    .carousel-control:disabled {
      opacity: 0.36;
      pointer-events: none;
    }

    .carousel-control svg {
      width: 17px;
      height: 17px;
      fill: currentColor;
    }

    .carousel-control--prev svg {
      transform: rotate(180deg);
    }

    .carousel-control:focus-visible {
      outline: 3px solid rgba(1, 137, 212, 0.32);
      outline-offset: 4px;
    }

    .carousel-viewport {
      overflow: visible;
    }

    .carousel-track {
      display: flex;
      gap: var(--gap-medium);
      overflow-x: auto;
      padding: 2px 0 10px;
      scroll-behavior: smooth;
      scroll-snap-type: x proximity;
      scrollbar-width: none;
    }

    .carousel-track::-webkit-scrollbar {
      display: none;
    }

    .carousel-card {
      display: flex;
      min-height: 420px;
      flex: 0 0 calc(28.571% - 14px);
      flex-direction: column;
      justify-content: space-between;
      padding: 14px;
      scroll-snap-align: start;
      overflow: hidden;
      border-radius: var(--radius-medium);
      background: var(--brand-white);
      color: var(--brand-navy);
    }

    .carousel-card__top {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: var(--gap-medium);
    }

    .carousel-card__media {
      display: block;
      width: 82px;
      height: 82px;
      overflow: hidden;
      border-radius: var(--radius-small);
      background: rgba(0, 20, 66, 0.04);
      flex: 0 0 auto;
    }

    .carousel-card__media img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform 0.48s cubic-bezier(0.19, 1, 0.22, 1);
      will-change: transform;
    }

    .carousel-card:nth-child(1) .carousel-card__media img {
      object-position: 38% 22%;
    }

    .carousel-card:nth-child(4) .carousel-card__media img {
      object-position: 62% 18%;
    }

    .carousel-card:nth-child(5) .carousel-card__media img {
      object-position: center;
    }

    .carousel-card:hover .carousel-card__media img {
      transform: scale(1.12);
    }

    .carousel-card__mark {
      display: inline-flex;
      width: 34px;
      height: 22px;
      color: var(--brand-navy);
      flex: 0 0 auto;
      opacity: 0.78;
      transform: translateY(1px);
    }

    .carousel-card__mark svg {
      width: 100%;
      height: 100%;
      overflow: visible;
    }

    .carousel-card__mark path {
      fill: none;
      stroke: currentColor;
      stroke-width: 2.6;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .carousel-card__body {
      display: grid;
      gap: 20px;
      margin-top: auto;
      padding: 10px;
    }

    .carousel-card__title {
      max-width: 280px;
      margin: 0;
      font-size: 32px;
      font-weight: 500;
      line-height: 1.2;
      letter-spacing: -1.5px;
    }

    .carousel-card__copy {
      margin: 0;
      color: rgba(0, 20, 66, 0.58);
      font-size: 15px;
      font-weight: 400;
      line-height: 1.4;
      letter-spacing: -0.2px;
      transition: color 0.32s ease;
    }

    .footer-section {
      min-height: 100svh;
      /* Full-bleed: the navy footer fills edge-to-edge with no gutters. */
      padding: 0;
    }

    .footer-shell {
      position: relative;
      display: grid;
      grid-template-rows: 1fr auto auto;
      min-height: 100svh;
      padding: clamp(74px, 7vw, 112px) var(--hero-content-x) 42px;
      overflow: hidden;
      /* border-radius BURADA verilmez: alt köşeleri .content-inner'ın statik
         overflow:clip + border-radius kırpması yuvarlar (reveal bölgesinde
         görünen kenar odur; eski perde-kose kapakları 27 Tem 2026 blur-reveal
         geçişiyle kaldırıldı). */
      border-radius: 0;
      background:
        linear-gradient(140deg, rgba(1, 137, 212, 0.2) 0%, transparent 38%),
        linear-gradient(180deg, #001442 0%, #030d24 100%);
      color: var(--brand-white);
      isolation: isolate;
    }

    .footer-shell::before,
    .footer-shell::after {
      content: "";
      position: absolute;
      inset: 0;
      z-index: -1;
      pointer-events: none;
    }

    .footer-shell::before {
      background-image:
        linear-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.06) 1px, transparent 1px);
      background-size: 88px 88px;
      opacity: 0.12;
      -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 26%, #000 100%);
      mask-image: linear-gradient(180deg, transparent 0%, #000 26%, #000 100%);
    }

    .footer-shell::after {
      background:
        linear-gradient(110deg, transparent 0%, rgba(1, 137, 212, 0.16) 42%, transparent 76%);
      opacity: 0.9;
    }

    /* Editorial CTA row: statement headline left, copy + action right —
       matches the page's section language instead of a floating centre. */
    .footer-cta {
      align-self: center;
      justify-self: center;
      display: grid;
      grid-template-columns: minmax(0, 1.25fr) minmax(320px, 0.75fr);
      grid-template-rows: auto 1fr auto;
      grid-template-areas:
        "kicker copy"
        "title  copy"
        "title  actions";
      column-gap: clamp(40px, 6vw, 110px);
      align-items: end;
      width: min(1280px, 100%);
      padding: 30px 0 76px;
      text-align: left;
    }

    .footer-kicker {
      grid-area: kicker;
      display: block;
      margin-bottom: clamp(28px, 4vh, 46px);
      background: var(--accent-gradient);
      -webkit-background-clip: text;
      background-clip: text;
      -webkit-text-fill-color: transparent;
      color: transparent;
      font-size: 11px;
      font-weight: 600;
      line-height: 1;
      letter-spacing: 0.05em;
      text-transform: uppercase;
    }

    .footer-title {
      grid-area: title;
      margin: 0;
      color: var(--brand-white);
      font-size: clamp(38px, 4.4vw, 72px);
      font-weight: 500;
      line-height: 1.02;
      letter-spacing: -1.8px;
    }

    .footer-title__hl {
      background: var(--accent-gradient);
      -webkit-background-clip: text;
      background-clip: text;
      -webkit-text-fill-color: transparent;
      color: transparent;
    }

    .footer-copy {
      grid-area: copy;
      align-self: start;
      max-width: 480px;
      margin: 0;
      color: rgba(255, 255, 255, 0.66);
      font-size: clamp(15px, 1.15vw, 17px);
      font-weight: 300;
      line-height: 1.6;
      letter-spacing: 0;
    }

    .footer-actions {
      grid-area: actions;
      display: flex;
      justify-content: flex-start;
      margin-top: 26px;
    }

    /* Glass-circle CTA — the footer sibling of the hero's video play button. */
    .footer-primary {
      display: inline-flex;
      align-items: center;
      gap: 24px;
      padding: 0;
      border: 0;
      background: transparent;
      color: var(--brand-white);
      font-size: 16px;
      font-weight: 600;
      line-height: 1.2;
      text-align: left;
    }

    .footer-primary__circle {
      position: relative;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      flex: 0 0 auto;
      width: 92px;
      height: 92px;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.05);
      -webkit-backdrop-filter: blur(4px);
      backdrop-filter: blur(4px);
      transition: background-color 0.32s ease, transform 0.32s ease;
    }

    .footer-primary__circle::before {
      content: "";
      position: absolute;
      inset: 0;
      border-radius: inherit;
      padding: 2px;
      background: conic-gradient(from 220deg, rgba(255, 255, 255, 0.72) 0deg, rgba(255, 255, 255, 0.46) 88deg, rgba(255, 255, 255, 0.08) 182deg, rgba(255, 255, 255, 0) 270deg, rgba(255, 255, 255, 0.54) 360deg);
      -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
      -webkit-mask-composite: xor;
      mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
      mask-composite: exclude;
      transform-origin: center;
      transition: background 0.32s ease;
      will-change: transform;
      pointer-events: none;
    }

    /* Hover: the ring lights up cyan and sweeps — same recipe as the hero's
       video play button. */
    .footer-primary:hover .footer-primary__circle::before,
    .footer-primary:focus-visible .footer-primary__circle::before {
      background: conic-gradient(from 220deg, rgba(1, 137, 212, 0) 0deg, rgba(1, 137, 212, 0.18) 64deg, rgba(1, 137, 212, 0.94) 132deg, rgba(199, 240, 255, 0.62) 174deg, rgba(255, 255, 255, 0.34) 194deg, rgba(116, 212, 255, 0.96) 232deg, rgba(1, 137, 212, 0.34) 288deg, rgba(1, 137, 212, 0) 360deg);
      animation: galleryPlayRingSweep 2.8s linear infinite;
    }

    .footer-primary__circle svg {
      width: 26px;
      height: 26px;
      fill: currentColor;
      transition: transform 0.32s cubic-bezier(0.19, 1, 0.22, 1);
    }

    .footer-primary__text {
      position: relative;
      padding-bottom: 6px;
      max-width: 220px;
    }

    .footer-primary__text::after {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      height: 1px;
      background: currentColor;
      transform: scaleX(0);
      transform-origin: left center;
      transition: transform 0.3s ease;
    }

    .footer-primary:hover .footer-primary__circle,
    .footer-primary:focus-visible .footer-primary__circle {
      background: rgba(1, 137, 212, 0.16);
      transform: scale(1.05);
    }

    .footer-primary:hover .footer-primary__circle svg { transform: translate(3px, -3px); }

    .footer-primary:hover .footer-primary__text::after,
    .footer-primary:focus-visible .footer-primary__text::after { transform: scaleX(1); }

    .footer-bottom {
      display: grid;
      grid-template-columns: minmax(260px, 0.9fr) minmax(620px, 1.6fr);
      gap: clamp(44px, 6vw, 92px);
      align-items: start;
      width: min(1280px, 100%);
      margin: 0 auto;
      padding-top: 80px;
      border-top: 1px solid rgba(255, 255, 255, 0.12);
    }

    .footer-brand {
      display: grid;
      gap: 24px;
      max-width: 360px;
    }

    /* At least 120px of air below the brand copy, then the social row. */
    .footer-social {
      margin-top: 100px;
      display: flex;
      gap: 12px;
    }

    .footer-social__link {
      position: relative;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 42px;
      height: 42px;
      border-radius: 50%;
      border: 1px solid rgba(255, 255, 255, 0.16);
      background: rgba(255, 255, 255, 0.04);
      color: rgba(255, 255, 255, 0.7);
      transition: color 0.25s ease, background-color 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
    }

    /* Conic ring that lights up + sweeps on hover — the CTA circle's recipe. */
    .footer-social__link::before {
      content: "";
      position: absolute;
      inset: -1px;
      border-radius: 50%;
      padding: 1.5px;
      background: conic-gradient(from 220deg, rgba(1, 137, 212, 0) 0deg, rgba(1, 137, 212, 0.18) 64deg, rgba(1, 137, 212, 0.94) 132deg, rgba(199, 240, 255, 0.62) 174deg, rgba(255, 255, 255, 0.34) 194deg, rgba(116, 212, 255, 0.96) 232deg, rgba(1, 137, 212, 0.34) 288deg, rgba(1, 137, 212, 0) 360deg);
      -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
      -webkit-mask-composite: xor;
      mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
      mask-composite: exclude;
      opacity: 0;
      transform-origin: center;
      transition: opacity 0.3s ease;
      will-change: transform;
      pointer-events: none;
    }

    .footer-social__link svg { position: relative; width: 18px; height: 18px; fill: currentColor; }

    .footer-social__link:hover,
    .footer-social__link:focus-visible {
      color: #fff;
      background: rgba(1, 137, 212, 0.16);
      border-color: transparent;
      transform: translateY(-2px);
    }

    .footer-social__link:hover::before,
    .footer-social__link:focus-visible::before {
      opacity: 1;
      animation: galleryPlayRingSweep 2.8s linear infinite;
    }

    .footer-logo {
      display: inline-flex;
      width: 186px;
    }

    .footer-logo img {
      width: 100%;
      height: auto;
    }

    .footer-brand p {
      margin: 0;
      color: rgba(255, 255, 255, 0.66);
      font-size: 15px;
      font-weight: 300;
      line-height: 1.55;
      letter-spacing: 0;
    }

    .footer-nav {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: clamp(28px, 4vw, 64px);
    }

    .footer-nav__group {
      display: grid;
      align-content: start;
      gap: 17px;
      min-width: 0;
    }

    .footer-nav__title {
      margin: 0;
      color: rgba(255, 255, 255, 0.96);
      font-size: 12px;
      font-weight: 700;
      line-height: 1;
      letter-spacing: 0.14em;
      text-transform: uppercase;
    }

    .footer-nav__list {
      display: grid;
      gap: 12px;
      margin: 0;
      padding: 0;
      list-style: none;
    }

    .footer-nav__link {
      position: relative;
      display: inline-block;
      color: rgba(255, 255, 255, 0.62);
      font-size: 15px;
      font-weight: 300;
      line-height: 1.25;
      letter-spacing: 0;
      transition: color 0.24s ease, transform 0.32s cubic-bezier(0.19, 1, 0.22, 1);
    }

    /* Underline wipes in from the left as the link shifts a touch right. */
    .footer-nav__link::after {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      bottom: -3px;
      height: 1px;
      background: var(--accent-gradient);
      transform: scaleX(0);
      transform-origin: left center;
      transition: transform 0.32s cubic-bezier(0.19, 1, 0.22, 1);
    }

    .footer-nav__link:hover,
    .footer-nav__link:focus-visible {
      color: #a7e5ff;
      transform: translateX(4px);
    }

    .footer-nav__link:hover::after,
    .footer-nav__link:focus-visible::after { transform: scaleX(1); }

    .footer-legal {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: min(1280px, 100%);
      margin: 30px auto 0;
      padding-top: 22px;
      border-top: 1px solid rgba(255, 255, 255, 0.1);
      gap: var(--gap-medium);
      color: rgba(255, 255, 255, 0.5);
    }

    /* Everything sits above the giant watermark. */
    .footer-cta,
    .footer-bottom,
    .footer-legal { position: relative; z-index: 1; }

    /* Giant brand wordmark (the logo's REGECORP lettering, emblem excluded) —
       the footer's signature. Faint, bottom-anchored, fading toward the top. */
    .footer-watermark {
      position: absolute;
      left: 50%;
      bottom: -1.4%;
      z-index: 0;
      width: 90vw;
      max-width: none;
      height: auto;
      transform: translateX(-50%);
      opacity: 0.06;
      -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 78%);
      mask-image: linear-gradient(180deg, transparent 0%, #000 78%);
      pointer-events: none;
      user-select: none;
    }

    /* Back-to-top — small glass sibling of the CTA circle. */
    .footer-top {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      flex: 0 0 auto;
      width: 46px;
      height: 46px;
      border-radius: 50%;
      border: 1px solid rgba(255, 255, 255, 0.24);
      background: rgba(255, 255, 255, 0.04);
      -webkit-backdrop-filter: blur(4px);
      backdrop-filter: blur(4px);
      color: var(--brand-white);
      transition: background-color 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
    }

    .footer-top svg { width: 16px; height: 16px; fill: currentColor; }

    .footer-top:hover,
    .footer-top:focus-visible {
      background: rgba(1, 137, 212, 0.2);
      border-color: rgba(255, 255, 255, 0.44);
      transform: translateY(-2px);
    }

    .footer-legal__copy {
      margin: 0;
      font-size: 13px;
      font-weight: 300;
      line-height: 1.3;
      letter-spacing: 0;
    }

    .footer-legal__links {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: 18px;
      min-width: 0;
      flex-wrap: wrap;
    }

    .footer-legal__links a {
      color: rgba(255, 255, 255, 0.54);
      font-size: 13px;
      font-weight: 300;
      line-height: 1;
      transition: color 0.2s ease;
    }

    .footer-legal__links a:hover,
    .footer-legal__links a:focus-visible {
      color: #55c7ff;
    }

    .hero-shell {
      --hero-progress: 0%;
      position: relative;
      min-height: calc(100svh - (var(--page-gutter) * 2));
      isolation: isolate;
      /* Radius + clip artık .hero-section'da (Safari fix). Shell onu tam doldurur. */
      background:
        radial-gradient(circle at 78% 32%, rgba(238, 247, 252, 0.9) 0, rgba(1, 137, 212, 0.28) 24%, transparent 48%),
        radial-gradient(circle at 38% 20%, rgba(1, 137, 212, 0.72) 0, transparent 34%),
        linear-gradient(126deg, #001442 0%, #023a7b 42%, #0189d4 100%);
      color: var(--brand-white);
    }

    .hero-shell::before {
      content: "";
      position: absolute;
      inset: 0;
      z-index: -3;
      background:
        linear-gradient(90deg, rgba(0, 20, 66, 0.78) 0%, rgba(0, 20, 66, 0.32) 42%, rgba(0, 20, 66, 0.08) 100%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0) 48%, rgba(0, 20, 66, 0.24) 100%);
    }

    .hero-shell::after {
      content: "";
      position: absolute;
      inset: 0;
      z-index: -2;
      background-image:
        linear-gradient(rgba(255, 255, 255, 0.07) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.07) 1px, transparent 1px);
      background-size: 92px 92px;
      opacity: 0.18;
      -webkit-mask-image: linear-gradient(90deg, #000 0%, transparent 78%);
      mask-image: linear-gradient(90deg, #000 0%, transparent 78%);
    }

    .hero-content {
      position: relative;
      z-index: 3;
      display: flex;
      min-height: inherit;
      flex-direction: column;
      justify-content: center;
      width: min(720px, 52vw);
      padding: var(--hero-content-x);
      overflow: visible;
    }
    /* Uzun başlıklar (ör. "Fizyolojik Sonuçlar") kolon dışına taşabilsin, kırpılmasın. */
    .hero-title__line { overflow: visible; }

    .hero-title {
      max-width: none;
      margin: 0;
      font-size: clamp(52px, 5.7vw, 92px);
      font-weight: 600;
      line-height: 1;
      letter-spacing: -4px;
      /* Başlık kadının parlak yüzüne taşsa bile okunur kalsın diye koyu halka. */
      text-shadow:
        0 1px 2px rgba(0, 8, 26, 0.85),
        0 2px 10px rgba(0, 8, 26, 0.75),
        0 4px 44px rgba(0, 8, 26, 0.6);
    }

    .hero-title.is-compact {
      font-size: clamp(48px, 5.2vw, 72px);
      letter-spacing: -3.4px;
    }

    /* MacBook / laptop genişliği: başlık bir tık küçülsün, kadının yüzüne
       taşmasın. Büyük masaüstü (1600px+) etkilenmez. */
    @media (min-width: 861px) and (max-width: 1600px) {
      .hero-title {
        font-size: clamp(44px, 4.3vw, 66px);
        letter-spacing: -3px;
      }
    }

    .hero-title__line {
      display: block;
      white-space: nowrap;
      transition:
        opacity 0.34s ease,
        transform 0.34s ease;
    }

    .hero-title__line--muted {
      color: rgba(255, 255, 255, 0.72);
      font-weight: 400;
    }

    .hero-subline {
      max-width: 480px;
      margin: 30px 0 0;
      color: rgba(255, 255, 255, 0.65);
      font-size: clamp(16px, 1.25vw, 18px);
      font-weight: 300;
      line-height: 1.6;
      transition:
        opacity 0.34s ease,
        transform 0.34s ease;
    }

    /* Slide-change transitions are armed only AFTER the GSAP entrance finishes
       (.is-live), so they never fight the entrance's own autoAlpha tweens. */
    .hero-shell.is-live .hero-eyebrow,
    .hero-shell.is-live .hero-subline,
    .hero-shell.is-live .hero-actions {
      transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.19, 1, 0.22, 1);
    }

    .hero-shell.is-slide-changing .hero-eyebrow,
    .hero-shell.is-slide-changing .hero-title__line,
    .hero-shell.is-slide-changing .hero-subline,
    .hero-shell.is-slide-changing .hero-actions {
      opacity: 0;
      transform: translateY(12px);
    }

    .hero-actions {
      display: flex;
      align-items: center;
      gap: var(--gap-medium);
      margin-top: 32px;
      flex-wrap: wrap;
    }

    .dark-button,
    .light-button {
      position: relative;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: fit-content;
      min-height: auto;
      padding: 0 0 7px;
      border-radius: 0;
      background: transparent;
      color: var(--button-text);
      font-size: 15px;
      font-weight: 500;
      line-height: 1;
      letter-spacing: 0;
      overflow: visible;
    }

    .dark-button {
      --button-text: var(--brand-navy);
      --button-underline: currentColor;
    }

    .light-button {
      --button-text: var(--brand-white);
      --button-underline: currentColor;
    }

    .dark-button::before,
    .light-button::before {
      content: "";
      position: absolute;
      right: 0;
      bottom: 0;
      left: 0;
      z-index: 0;
      height: 1px;
      border-radius: 999px;
      background: var(--button-underline);
      transform: scaleX(0);
      transform-origin: left center;
      transition: transform 0.24s ease;
      will-change: transform;
    }

    .button__text {
      position: relative;
      z-index: 1;
      color: currentColor;
      white-space: nowrap;
    }

    .button__icon {
      display: none;
    }

    .dark-button:hover::before,
    .light-button:hover::before,
    .dark-button:focus-visible::before,
    .light-button:focus-visible::before {
      transform: scaleX(1);
    }

    .dark-button:focus-visible,
    .light-button:focus-visible {
      outline: 2px solid currentColor;
      outline-offset: 5px;
    }

    .gallery-button:focus-visible,
    .slider-button:focus-visible,
    .modal-close:focus-visible {
      outline: 3px solid rgba(255, 255, 255, 0.42);
      outline-offset: 4px;
    }

    .hero-visual {
      position: absolute;
      top: clamp(18px, 3.5vh, 44px);
      left: 50%;
      bottom: -22%;
      z-index: 1;
      width: auto;
      height: calc(100% + 12%);
      filter: drop-shadow(0 44px 90px rgba(0, 20, 66, 0.38));
      pointer-events: none;
      transform: translateX(-50%);
    }

    .hero-visual img {
      width: auto;
      max-width: none;
      height: 100%;
      object-fit: contain;
      object-position: center top;
    }

    .gallery-button {
      position: absolute;
      top: 38%;
      right: clamp(50px, 6vw, 116px);
      z-index: 4;
      display: inline-flex;
      align-items: center;
      gap: 30px;
      min-height: 116px;
      padding: 0;
      background: transparent;
      color: rgba(255, 255, 255, 0.88);
    }

    @keyframes galleryPlayRingSweep {
      to {
        transform: rotate(1turn);
      }
    }

    .gallery-button__play {
      position: relative;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 112px;
      height: 112px;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.04);
      -webkit-backdrop-filter: blur(3px);
      backdrop-filter: blur(3px);
      transform: scale(1);
      transform-origin: center;
      transition:
        background-color 0.32s ease,
        transform 0.32s ease;
    }

    .gallery-button:hover .gallery-button__play {
      background: rgba(1, 137, 212, 0.12);
      transform: scale(1.02);
    }

    .gallery-button__play::before {
      content: "";
      position: absolute;
      inset: 0;
      border-radius: inherit;
      padding: 2px;
      background: conic-gradient(from 220deg, rgba(255, 255, 255, 0.72) 0deg, rgba(255, 255, 255, 0.46) 88deg, rgba(255, 255, 255, 0.08) 182deg, rgba(255, 255, 255, 0) 270deg, rgba(255, 255, 255, 0.54) 360deg);
      -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
      -webkit-mask-composite: xor;
      mask-composite: exclude;
      opacity: 1;
      transform-origin: center;
      transition: background 0.32s ease;
      will-change: transform;
    }

    .gallery-button:hover .gallery-button__play::before {
      background: conic-gradient(from 220deg, rgba(1, 137, 212, 0) 0deg, rgba(1, 137, 212, 0.18) 64deg, rgba(1, 137, 212, 0.94) 132deg, rgba(199, 240, 255, 0.62) 174deg, rgba(255, 255, 255, 0.34) 194deg, rgba(116, 212, 255, 0.96) 232deg, rgba(1, 137, 212, 0.34) 288deg, rgba(1, 137, 212, 0) 360deg);
      animation: galleryPlayRingSweep 2.8s linear infinite;
    }

    .gallery-button__play::after {
      content: "";
      position: absolute;
      right: 3px;
      bottom: -2px;
      width: 42px;
      height: 42px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(1, 137, 212, 0.24), rgba(1, 137, 212, 0) 68%);
      filter: blur(7px);
    }

    .gallery-button__play svg {
      position: relative;
      z-index: 1;
      width: 32px;
      height: 32px;
      margin-left: 4px;
      fill: currentColor;
    }

    .gallery-button__text {
      /* 140px: "Ürün Tanıtım" tek satıra sığar, "Videoları" alt satıra iner
         (105px'te üç satıra kırılıyordu). Metin kutusu left:-50px kaydığı
         için genişleme butonun sağ kenarını aşmaz. */
      max-width: 140px;
      text-align: left;
      font-size: 20px;
      font-weight: 300;
      line-height: 1.2;
      letter-spacing: 0;
      position: relative;
      left: -50px;
      bottom: -21px;
    }

    /* EN metni ("Product Videos") 140px'de tek satıra sığıyor; kullanıcı
       isteği iki satır (Product / Videos). Kutu yalnız EN'de daraltılır;
       html lang'i Polylang basar (tr-TR / en-GB). */
    html[lang="en-GB"] .gallery-button__text {
      max-width: 92px;
    }

    .brand-tags {
      position: absolute;
      left: var(--hero-content-x);
      bottom: clamp(30px, 5vw, 66px);
      z-index: 4;
      display: grid;
      gap: var(--gap-small);
      max-width: min(560px, 42vw);
      color: var(--brand-white);
      pointer-events: none;
    }

    .brand-tags__row {
      display: flex;
      align-items: center;
      gap: var(--gap-small);
      min-width: 0;
    }

    .brand-tags__row--top {
      padding-left: 0;
    }

    .brand-tag {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 40px;
      padding: 0 18px 0 15px;
      border: none;
      border-radius: 10px;
      background: rgba(255, 255, 255, 0.25);
      color: var(--brand-white);
      font-size: 13px;
      font-weight: 400;
      line-height: 1;
      letter-spacing: 0;
      white-space: nowrap;
      backdrop-filter: blur(18px) saturate(155%);
    }

    .brand-tag::before {
      content: "+";
      display: inline-flex;
      align-items: center;
      justify-content: center;
      flex: 0 0 auto;
      width: 16px;
      height: 16px;
      margin-right: 9px;
      color: currentColor;
      font-size: 18px;
      font-weight: 400;
      line-height: 1;
      opacity: 0.9;
      text-shadow: 0 1px 5px rgba(255, 255, 255, 0.22);
      transform: translateY(-1px);
    }

    .hero-slider {
      position: absolute;
      right: var(--hero-content-x);
      bottom: clamp(30px, 5vw, 66px);
      z-index: 4;
      display: flex;
      align-items: center;
      gap: 10px;
      color: rgba(255, 255, 255, 0.9);
    }

    .hero-slider__timeline {
      display: grid;
      grid-template-columns: auto minmax(220px, 360px) auto;
      align-items: center;
      gap: var(--gap-small);
      min-width: 0;
    }

    .hero-slider__nav {
      display: inline-flex;
      align-items: center;
      gap: var(--gap-small);
      flex: 0 0 auto;
    }

    .slider-index {
      font-size: 24px;
      font-weight: 700;
      line-height: 1;
    }

    .slider-index--muted {
      color: rgba(255, 255, 255, 0.28);
    }

    .slider-track {
      position: relative;
      height: 2px;
      min-width: 0;
      background: rgba(255, 255, 255, 0.22);
      overflow: hidden;
      border-radius: var(--radius-medium);
    }

    .slider-track::before {
      content: "";
      position: absolute;
      inset: 0 auto 0 0;
      width: var(--hero-progress);
      background: linear-gradient(90deg, rgba(1, 137, 212, 0.96) 0%, rgba(116, 212, 255, 0.95) 42%, rgba(255, 255, 255, 0.38) 58%, rgba(116, 212, 255, 0.9) 74%, var(--brand-blue) 100%);
      border-radius: inherit;
      transition: width 0.12s linear;
    }

    .slider-button {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 54px;
      height: 54px;
      border-radius: var(--radius-small);
      background: rgba(255, 255, 255, 0.12);
      color: var(--brand-white);
      backdrop-filter: blur(18px);
      transition:
        background-color 0.24s ease,
        color 0.24s ease,
        transform 0.24s ease;
    }

    .slider-button:not(:disabled):hover {
      background: var(--brand-white);
      color: var(--brand-blue);
      transform: translateY(-2px);
    }

    .slider-button:disabled {
      opacity: 0.36;
      pointer-events: none;
    }

    .slider-button svg {
      width: 17px;
      height: 17px;
      fill: currentColor;
    }

    .slider-button--prev svg {
      transform: rotate(180deg);
    }

    .video-modal {
      position: fixed;
      inset: 0;
      z-index: 30;
      display: grid;
      place-items: center;
      padding: var(--page-gutter);
      background: rgba(0, 20, 66, 0.74);
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.24s ease;
      backdrop-filter: blur(14px);
    }

    .video-modal.is-open {
      opacity: 1;
      pointer-events: auto;
    }

    .video-modal__panel {
      position: relative;
      width: min(1040px, 100%);
      overflow: hidden;
      border-radius: var(--radius-large);
      background: var(--brand-navy);
      box-shadow: 0 32px 90px rgba(0, 0, 0, 0.36);
    }

    .video-modal__stage {
      position: relative;
      aspect-ratio: 16 / 9;
      overflow: hidden;
      background:
        linear-gradient(120deg, rgba(0, 20, 66, 0.8), rgba(1, 137, 212, 0.44)),
        url("woman-bg.webp") center 32% / contain no-repeat;
    }

    .video-modal__stage::after {
      content: "";
      position: absolute;
      inset: 0;
      background: radial-gradient(circle at center, rgba(255, 255, 255, 0.16), transparent 34%);
    }

    .video-modal__play {
      position: absolute;
      left: 50%;
      top: 50%;
      z-index: 2;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 86px;
      height: 86px;
      border-radius: 50%;
      background: var(--brand-white);
      color: var(--brand-blue);
      transform: translate(-50%, -50%);
      box-shadow: 0 20px 60px rgba(0, 20, 66, 0.3);
    }

    .video-modal__play svg {
      width: 28px;
      height: 28px;
      margin-left: 5px;
      fill: currentColor;
    }

    .modal-close {
      position: absolute;
      top: 18px;
      right: 18px;
      z-index: 3;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 44px;
      height: 44px;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.9);
      color: var(--brand-navy);
      font-size: 26px;
      line-height: 1;
    }

    /* Bricks video popup'i: icerik padding'i sablonda 0, video kenardan
       kenara dolar; kose yaricapi popup icerik radius'uyla (12px) eslenir
       ki kare video koseleri yuvarlak cerceveden tasmasin. Prototipin
       radyal parlama katmani (::after) video ustunde tiklamayi yakalayip
       NATIVE KONTROLLERI kilitler, popup baglaminda kapatilir. */
    .brx-popup .video-modal__stage {
      border-radius: 12px;
    }

    .brx-popup .video-modal__stage::after {
      display: none;
    }

    /* Kapat dugmesi video ustunde durur; zemin kullanici karariyla
       yari saydam (0.3), simge okunurlugu icin beyaz. */
    .brx-popup .video-modal__stage .modal-close {
      background: rgba(255, 255, 255, 0.3);
      color: var(--brand-white);
    }

    body.modal-open {
      overflow: hidden;
    }

    @media (min-width: 1500px) {
      .carousel-card {
        flex-basis: calc(22.222% - 14px);
      }
    }

    /* MacBook 13" bandi (1181-1360): grid tabani (2x244 yan kolon + ~580 nav +
       70px insetler) 1228px'in altinda viewport'u asiyor; nav logoya 10px'e
       kadar yaklasip CTA sag dolguyu yiyordu ("ufak patlama"). Yan kolon
       tabani ve logo kucultulur, nav araligi sikilastirilir; toplam taban
       ~1116px'e iner ve 1181'e kadar rahat sigar. */
    @media (max-width: 1360px) {
      .site-header {
        grid-template-columns: minmax(200px, 1fr) auto minmax(200px, 1fr);
      }

      .header-logo {
        width: 200px;
      }

      .header-nav {
        gap: 22px;
      }
    }

    @media (max-width: 1180px) {
      .hero-content {
        width: min(650px, 58vw);
      }

      .expertise-bento {
        grid-template-columns: minmax(300px, 1fr) repeat(2, minmax(190px, 0.52fr));
      }

      .expertise-card__number {
        font-size: 136px;
      }

      .expertise-card__title {
        font-size: 30px;
      }

      .expertise-card:not(.expertise-card--primary) .expertise-card__title {
        font-size: 23px;
      }

      .mega-menu {
        padding: 24px;
      }

      .mega-menu__grid {
        grid-template-columns: 220px minmax(220px, 1fr) 260px;
        gap: 20px;
      }

      .mega-menu--simple {
        width: min(640px, calc(100vw - 40px));
      }

      .mega-menu--simple .mega-menu__grid {
        grid-template-columns: minmax(220px, 1fr) 240px;
      }

      .vision-bottom {
        grid-template-columns: minmax(480px, 560px) minmax(300px, 400px);
        gap: var(--gap-medium);
      }

      .hero-visual {
        left: 50%;
        height: calc(100% + 8%);
      }

      .gallery-button {
        right: 40px;
      }

      .brand-tags {
        max-width: min(470px, 46vw);
      }

      .brand-tag {
        min-height: 36px;
        padding-right: 14px;
        padding-left: 12px;
        font-size: 12px;
      }

      .brand-tag::before {
        width: 14px;
        height: 14px;
        margin-right: 7px;
        font-size: 16px;
      }

      .hero-slider__timeline {
        grid-template-columns: auto minmax(130px, 240px) auto;
      }

      .footer-shell {
        padding-right: 45px;
        padding-left: 45px;
      }

      .footer-bottom {
        grid-template-columns: 1fr;
      }

      .footer-nav {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
    }

    @media (max-width: 860px) {
      :root {
        --page-gutter: 10px;
        --section-gap: 10px;
        --hero-content-x: 45px;
        --radius-xlarge: 24px;
        --header-inset: calc(var(--page-gutter) + var(--hero-content-x));
      }

      .site-header {
        padding: 18px var(--hero-content-x);
        grid-template-columns: 1fr auto;
      }

      .site-header.is-scrolled {
        padding: 12px var(--hero-content-x);
      }

      .header-logo {
        width: 200px;
      }

      .header-nav {
        display: none;
      }

      .site-header .header-contact {
        min-height: 38px;
        padding: 0 15px;
        font-size: 13px;
      }

      .hero-shell,
      .hero-content {
        min-height: calc(100svh - (var(--page-gutter) * 2));
      }

      .vision-panel {
        min-height: auto;
        padding: var(--hero-content-x);
      }

      .vision-section,
      .expertise-section,
      .carousel-section,
      .footer-section {
        height: auto;
        min-height: auto;
        align-items: stretch;
      }

      .vision-title {
        max-width: 560px;
      }

      .vision-plus {
        display: none;
      }

      .vision-panel { min-height: auto; }
      .vision-bottom {
        position: static;
        grid-template-columns: 1fr;
        gap: var(--gap-medium);
        margin-top: 120px;
      }
      .vision-aside { padding-top: 0; }          /* mobilde metrics'i aşağı itme */

      .vision-copy {
        max-width: 620px;
        font-size: clamp(22px, 5vw, 34px);
        transform: none;
      }

      .vision-copy__lead {
        text-align: left;
        white-space: normal;
      }

      .vision-copy__body {
        text-align: left;
      }

      .metrics-grid {
        grid-template-columns: 1fr;
        gap: var(--gap-medium);
        padding: 32px;
      }

      .metric-divider {
        align-self: center;
        justify-self: stretch;
        width: 100%;
        height: 1px;
        min-height: 0;
      }

      .metric-card {
        min-height: 140px;
      }

      .expertise-shell {
        height: auto;
        min-height: calc(100svh - (var(--page-gutter) * 2));
        padding: var(--hero-content-x);
      }

      .expertise-bento {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-rows: none;
      }

      .expertise-card--primary,
      .expertise-card--center,
      .expertise-card--metric,
      .expertise-card--chart {
        grid-column: auto;
        grid-row: auto;
      }

      .expertise-card--primary,
      .expertise-card--chart {
        grid-column: 1 / -1;
        min-height: 320px;
      }

      .expertise-card--center,
      .expertise-card--metric {
        min-height: 260px;
      }

      .carousel-section {
        padding-top: 90px;
        padding-bottom: 90px;
      }

      .carousel-shell {
        padding-right: 0;
        padding-left: var(--hero-content-x);
      }

      .carousel-header-container {
        margin-bottom: 26px;
        padding-right: var(--hero-content-x);
      }

      .carousel-header {
        align-items: flex-start;
      }

      .carousel-kicker {
        font-size: 13px;
      }

      .carousel-headline {
        max-width: 560px;
        font-size: clamp(34px, 7vw, 52px);
        letter-spacing: -2px;
      }

      .carousel-card {
        min-height: 390px;
        flex-basis: calc(45.455% - 12px);
      }

      .footer-shell {
        min-height: auto;
        padding: 72px var(--hero-content-x) 36px;
      }

      .footer-cta {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas: "kicker" "title" "copy" "actions";
        row-gap: 22px;
        padding: 22px 0 64px;
      }

      .footer-copy { align-self: start; }

      .footer-title {
        font-size: clamp(42px, 9vw, 70px);
      }

      .footer-copy {
        font-size: 17px;
      }

      .hero-content {
        width: 100%;
        justify-content: center;
        padding: var(--hero-content-x);
      }

      .hero-title {
        max-width: 580px;
      }

      .hero-title.is-compact {
        font-size: clamp(40px, 8vw, 58px);
        letter-spacing: -2.4px;
      }

      .hero-subline {
        max-width: 500px;
      }

      .hero-visual {
        top: auto;
        left: 50%;
        bottom: -88px;
        width: 520px;
        height: auto;
        min-width: 0;
      }

      .hero-visual img {
        width: 100%;
        max-width: 100%;
        height: auto;
      }

      .gallery-button {
        top: auto;
        right: 24px;
        bottom: 190px;
        min-height: 76px;
      }

      .gallery-button__play {
        width: 74px;
        height: 74px;
      }

      .gallery-button__play svg {
        width: 22px;
        height: 22px;
      }

      .gallery-button__text {
        font-size: 17px;
      }

      .brand-tags {
        bottom: 96px;
        left: var(--hero-content-x);
        max-width: calc(100% - (var(--hero-content-x) * 2));
      }

      .hero-slider {
        right: 24px;
        bottom: 24px;
        left: 24px;
      }

      .hero-slider__timeline {
        grid-template-columns: auto minmax(90px, 1fr) auto;
        flex: 1 1 auto;
      }

      .slider-button {
        width: 46px;
        height: 46px;
      }
    }

    @media (max-width: 560px) {
      :root {
        --hero-content-x: 30px;
        --header-inset: calc(var(--page-gutter) + var(--hero-content-x));
      }

      .vision-panel {
        padding: var(--hero-content-x);
      }

      .vision-title {
        font-size: clamp(38px, 12vw, 52px);
        letter-spacing: -2.4px;
      }

      .vision-bottom {
        margin-top: 86px;
      }

      .vision-copy {
        font-size: 23px;
        line-height: 1.2;
        letter-spacing: -0.9px;
      }

      .vision-copy__lead {
        padding-left: 0;
      }

      .vision-button {
        width: auto;
      }

      .metrics-grid {
        grid-template-columns: 1fr;
        padding: 28px;
        border-radius: var(--radius-medium);
      }

      .metric-card {
        min-height: 126px;
      }

      .metric-value {
        letter-spacing: -2px;
      }

      .expertise-shell {
        padding: 30px;
      }

      .expertise-bento {
        grid-template-columns: 1fr;
      }

      .expertise-card,
      .expertise-card--primary,
      .expertise-card--chart {
        grid-column: auto;
        min-height: 250px;
      }

      .expertise-card__number {
        font-size: 94px;
      }

      .expertise-card__title,
      .expertise-card:not(.expertise-card--primary) .expertise-card__title {
        font-size: 25px;
      }

      .expertise-card__copy {
        font-size: 15px;
      }

      .carousel-shell {
        padding-right: 0;
        padding-left: var(--hero-content-x);
      }

      .carousel-header {
        gap: var(--gap-medium);
      }

      .carousel-kicker {
        font-size: 13px;
        letter-spacing: 0.14em;
      }

      .carousel-headline {
        font-size: clamp(32px, 10vw, 46px);
        letter-spacing: -1.8px;
      }

      .carousel-control {
        width: 46px;
        height: 46px;
      }

      .carousel-card {
        min-height: 390px;
        flex-basis: 82%;
      }

      .carousel-card__title {
        font-size: 32px;
      }

      .carousel-card__copy {
        font-size: 15px;
      }

      .footer-shell {
        padding: 62px 30px 32px;
      }

      .footer-cta {
        padding: 8px 0 58px;
      }

      .footer-kicker {
        font-size: 12px;
      }

      .footer-title {
        font-size: clamp(36px, 11.5vw, 48px);
        line-height: 1.03;
      }

      .footer-actions,
      .footer-primary {
        width: 100%;
      }

      .footer-bottom {
        gap: 34px;
      }

      .footer-legal {
        align-items: flex-start;
        flex-direction: column;
      }

      .footer-legal__links {
        justify-content: flex-start;
      }

      .footer-nav {
        grid-template-columns: 1fr;
        gap: 28px;
      }

      .hero-content {
        padding: var(--hero-content-x);
      }

      .hero-title {
        font-size: clamp(42px, 14vw, 64px);
      }

      .hero-title.is-compact {
        font-size: clamp(28px, 9vw, 44px);
        letter-spacing: -1.6px;
      }

      .hero-subline {
        margin-top: 20px;
        font-size: 16px;
      }

      .hero-actions {
        margin-top: 24px;
      }

      .dark-button,
      .light-button {
        width: fit-content;
        justify-content: flex-start;
        font-size: 14px;
      }

      .hero-visual {
        left: 50%;
        bottom: -54px;
        width: 520px;
      }

      .gallery-button {
        right: 18px;
        bottom: 204px;
        gap: var(--gap-medium);
      }

      .gallery-button__text {
        max-width: 90px;
      }

      .brand-tags {
        display: none;
      }

      .hero-slider {
        left: 18px;
        right: 18px;
      }

      .slider-index {
        font-size: 19px;
      }
    }

    @media (prefers-reduced-motion: reduce) {
      *,
      *::before,
      *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
      }
    }

    /* ===================================================================
       HERO REDESIGN — premium blue / luxury-minimal + cinematic + GSAP
       =================================================================== */

    /* Ambient background video layer (subtle, behind the navy gradient). */
    .hero-bg-video {
      position: absolute;
      inset: 0;
      z-index: -4;
      width: 100%;
      height: 100%;
      object-fit: cover;
      opacity: 0.42;
      filter: saturate(116%) contrast(103%);
      transform: scale(1.04);
      pointer-events: none;
    }

    /* Calmer, more premium shell background (less competing noise). */
    .hero-shell {
      background:
        radial-gradient(circle at 82% 26%, rgba(238, 247, 252, 0.5) 0, rgba(1, 137, 212, 0.16) 26%, transparent 52%),
        radial-gradient(circle at 30% 84%, rgba(1, 137, 212, 0.36) 0, transparent 46%),
        linear-gradient(122deg, #001033 0%, #012a5c 46%, #0180c6 100%);
    }

    /* Wider, softer readability veil for the copy column. */
    .hero-shell::before {
      background:
        linear-gradient(96deg, rgba(0, 12, 40, 0.9) 0%, rgba(0, 16, 52, 0.46) 40%, rgba(0, 20, 66, 0.04) 74%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0) 46%, rgba(0, 12, 40, 0.36) 100%);
    }

    /* Small authority label above the headline. */
    .hero-eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 12px;
      margin: 0 0 24px;
      color: rgba(255, 255, 255, 0.74);
      font-size: 12px;
      font-weight: 500;
      line-height: 1;
      letter-spacing: 0.16em;
      text-transform: uppercase;
    }

    .hero-eyebrow::before {
      content: "";
      width: 28px;
      height: 1px;
      background: rgba(116, 212, 255, 0.85);
    }

    /* Lighter weight + calmer tracking = luxury-minimal display. */
    .hero-title {
      font-weight: 500;
      letter-spacing: -2.6px;
    }

    .hero-title__line--muted {
      color: rgba(255, 255, 255, 0.55);
      font-weight: 300;
    }

    /* Masked line reveal: outer clips (only vertically), inner slides up.
       width:max-content sizes the mask to the TEXT so a long title (ör.
       "Fizyolojik Sonuçlar") kolon dışına taşsa da yatayda kırpılmaz. */
    .hero-title__line {
      display: block;
      width: max-content;
      max-width: none;
      overflow: hidden;
      padding-bottom: 0.14em;
      padding-right: 0.16em;
      margin-bottom: -0.12em;
    }

    .hero-title__inner {
      display: block;
    }

    .hero-actions {
      gap: 26px;
      margin-top: 40px;
    }

    /* Premium primary CTA — solid, confident (replaces underline-only). */
    .hero-cta-primary {
      display: inline-flex;
      align-items: center;
      gap: 12px;
      min-height: 54px;
      padding: 0 26px;
      border-radius: 999px;
      background: var(--brand-white);
      color: var(--brand-navy);
      font-size: 15px;
      font-weight: 600;
      line-height: 1;
      letter-spacing: -0.1px;
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.7),
        0 18px 44px rgba(1, 137, 212, 0.32);
      transition:
        transform 0.3s cubic-bezier(0.19, 1, 0.22, 1),
        box-shadow 0.3s ease,
        background-color 0.3s ease;
    }

    .hero-cta-primary:hover,
    .hero-cta-primary:focus-visible {
      transform: translateY(-2px);
      background: #eaf6ff;
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.82),
        0 24px 60px rgba(1, 137, 212, 0.46);
    }

    .hero-cta-primary svg {
      width: 15px;
      height: 15px;
      fill: currentColor;
      transition: transform 0.3s cubic-bezier(0.19, 1, 0.22, 1);
    }

    .hero-cta-primary:hover svg {
      transform: translateX(4px);
    }

    /* Quieter, more refined brand-focus pills. */
    .brand-tag {
      min-height: 38px;
      padding: 0 16px;
      border: 1px solid rgba(255, 255, 255, 0.16);
      border-radius: 999px;
      background: rgba(255, 255, 255, 0.06);
      font-size: 12px;
      font-weight: 400;
      letter-spacing: 0.01em;
      backdrop-filter: blur(14px) saturate(140%);
    }

    .brand-tag::before {
      color: rgba(116, 212, 255, 0.9);
      opacity: 1;
    }

    /* GSAP entrance guard — pieces stay hidden until the timeline reveals them.
       fromTo() sets explicit start/end so there is no flash and no dead tween. */
    .hero-anim-ready .hero-eyebrow,
    .hero-anim-ready .hero-subline,
    .hero-anim-ready .hero-actions > *,
    .hero-anim-ready .brand-tag,
    .hero-anim-ready .gallery-button,
    .hero-anim-ready .hero-slider,
    .hero-anim-ready .hero-scenes,
    .hero-anim-ready .hero-title__inner {
      /* 0.01: goze gorunmez ama tarayici boyamayi LCP'ye kaydeder (opacity 0
         boyamayi metrikten dusurup LCP'yi animasyon sonuna kaydiriyordu).
         Tween'ler fromTo ile acik baslangic kullanir, gorunum degismez. */
      opacity: 0.01;
      will-change: transform, opacity;
    }

    /* ── Hero polish pass (typography rhythm, chrome, composition) ── */
    .hero-eyebrow { margin-bottom: 28px; }
    .hero-title { line-height: 0.98; }

    .hero-subline {
      max-width: 468px;
      margin-top: 28px;
      color: rgba(255, 255, 255, 0.72);
      font-size: clamp(16px, 1.2vw, 18px);
      line-height: 1.6;
    }

    .hero-actions { margin-top: 36px; }

    /* Secondary CTA — centered with the primary pill, arrow on hover. */
    .hero-cta-secondary {
      align-items: center;
      gap: 9px;
      color: rgba(255, 255, 255, 0.82);
      font-size: 14px;
      font-weight: 500;
    }

    .hero-cta-secondary svg {
      width: 14px;
      height: 14px;
      fill: currentColor;
      transition: transform 0.28s cubic-bezier(0.19, 1, 0.22, 1);
    }

    .hero-cta-secondary:hover svg { transform: translateX(3px); }

    /* Quieter brand-focus pills. */
    .brand-tag {
      min-height: 34px;
      font-size: 11.5px;
      color: rgba(255, 255, 255, 0.82);
      border-color: rgba(255, 255, 255, 0.14);
      background: rgba(255, 255, 255, 0.05);
    }

    /* Refined slider timeline. */
    .slider-index { font-size: 20px; font-weight: 600; letter-spacing: -0.5px; }
    .slider-track { height: 1px; }

    /* Play button (Tanıtım Videosu): keep the original draft styling — reverted
       per feedback (text position + backing shadow removed). */

    /* Composition: calmer imagery, crisper copy column, legible bottom edge. */

    /* Force the shell onto its own layer so filtered/transformed descendants
       (blurred bg video, drop-shadowed figure) are clipped by the border-radius
       instead of escaping into square corners. */
    .hero-shell {
      transform: translateZ(0);
    }

    .hero-bg-video {
      opacity: 0.32;
      filter: saturate(112%) contrast(102%);
      transform: none;
      border-radius: inherit;
    }

    .hero-shell::before {
      background:
        linear-gradient(94deg, rgba(0, 10, 32, 0.94) 0%, rgba(0, 14, 46, 0.5) 42%, rgba(0, 20, 66, 0.04) 76%),
        linear-gradient(0deg, rgba(0, 8, 26, 0.55) 0%, rgba(0, 8, 26, 0) 34%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.07) 0%, rgba(255, 255, 255, 0) 44%, rgba(0, 12, 40, 0.2) 100%);
    }

    /* ── Per-slide hero scenes (each slide is a full scene, crossfaded) ── */
    .hero-scenes {
      position: absolute;
      inset: 0;
      z-index: 1;
    }

    .hero-scene {
      position: absolute;
      inset: 0;
      opacity: 0;
    }

    .hero-scene.is-active {
      opacity: 1;
    }

    /* Full-bleed product/scene photography. */
    .hero-scene__cover {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: 68% center;
      transform-origin: center;
    }

    /* Ambient background video behind the figure on the human scene. */
    .hero-scene__bg {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      opacity: 0.42;
      filter: saturate(112%) contrast(102%);
    }

    /* Fake-3D cursor-scrub intro — full-bleed, imleçle taranan interaktif portre. */
    .hero-fake3d {
      position: absolute;
      inset: 0;
      display: block;
      width: 100%;
      height: 100%;
      /* canvas: kare-dizisi cover-fit JS'te; hizalama alignX=0.62 ile yapılır. */
      /* Renk grade'i (brightness/saturate/contrast) artık KARELERE baklı
         (Chrome ctx.filter ile birebir) — böylece her karede pahalı CSS filter
         geçişi YOK. Chrome'da hero'nun kasması bu sayede belirgin azalır. */
      will-change: transform;
    }

    /* Tilt ipucu (yalnız dokunmatik; markup'ı site.js kurar): iOS'ta
       jiroskop izni icin dokunma hedefi, Android'de sessiz keşif ikonu.
       Kaybolma is-gitti class'ı ile; sallanma ikonun kendisinde. */
    /* 27 Tem (onaylı A2): çip artık içerik başında akış elemanı; kicker'ın
       üstünde, içerikle aynı sol hizada. Zemin %85 (kullanıcı isteği),
       nabız halkası dokunulabilirliği fısıldar. Kicker yoksa JS
       --kabuk varyantıyla eski sağ üst konuma düşer. */
    .kt-tilt-hint {
      position: relative;
      z-index: 4;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      align-self: flex-start;
      width: 44px;
      height: 44px;
      margin-bottom: 18px;
      padding: 0;
      border: 0;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.85);
      color: var(--brand-navy);
      backdrop-filter: blur(6px);
      -webkit-backdrop-filter: blur(6px);
      box-shadow: 0 10px 28px rgba(0, 20, 66, 0.16);
      cursor: pointer;
      transition: opacity 0.5s ease, transform 0.5s ease, background-color 0.3s ease;
    }

    .kt-tilt-hint--kabuk {
      position: absolute;
      top: calc(var(--page-gutter, 16px) + 72px);
      right: 18px;
      margin-bottom: 0;
    }

    .kt-tilt-hint::before {
      content: "";
      position: absolute;
      inset: 0;
      border-radius: inherit;
      box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.5);
      animation: kt-tilt-nabiz 2.6s ease-out infinite;
      pointer-events: none;
    }

    .kt-tilt-hint svg {
      width: 20px;
      height: 20px;
      transform-origin: 50% 85%;
      animation: kt-tilt-rock 2.6s ease-in-out infinite;
    }

    .kt-tilt-hint.is-onay {
      background: rgba(255, 255, 255, 0.97);
      color: var(--brand-blue);
    }
    .kt-tilt-hint.is-onay::before { animation: none; }
    .kt-tilt-hint.is-onay svg { animation-duration: 0.9s; }

    .kt-tilt-hint.is-gitti {
      opacity: 0;
      transform: translateY(-6px);
      pointer-events: none;
    }

    @keyframes kt-tilt-nabiz {
      0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.5); }
      70% { box-shadow: 0 0 0 12px rgba(255, 255, 255, 0); }
      100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); }
    }

    @keyframes kt-tilt-rock {
      0%, 20% { transform: rotate(0deg); }
      35% { transform: rotate(-13deg); }
      55% { transform: rotate(11deg); }
      70%, 100% { transform: rotate(0deg); }
    }

    /* Mirror + reframe the reused human figure so slide 3 reads distinctly. */
    .hero-scene--flip .hero-visual {
      transform: translateX(-50%) scaleX(-1);
      object-position: 42% top;
    }

    /* Legibility scrim above the scenes, below the copy/controls. */
    .hero-scrim {
      position: absolute;
      inset: 0;
      z-index: 2;
      pointer-events: none;
      background:
        /* spotlight vignette — merkez (kadın) net kalır, sadece kenarlar hafifçe koyulaşır */
        radial-gradient(115% 118% at 60% 47%, transparent 42%, rgba(0, 6, 20, 0.22) 68%, rgba(0, 4, 15, 0.55) 100%),
        /* top band keeps the header legible over light product scenes */
        linear-gradient(180deg, rgba(0, 10, 32, 0.72) 0%, rgba(0, 10, 32, 0) 20%),
        /* left band anchors the copy column (başlık taşsa bile okunur kalsın diye sağa uzatıldı) */
        linear-gradient(94deg, rgba(0, 10, 32, 0.95) 0%, rgba(0, 12, 40, 0.72) 34%, rgba(0, 16, 52, 0.3) 52%, rgba(0, 20, 66, 0.04) 76%),
        /* bottom band supports tags + slider */
        linear-gradient(0deg, rgba(0, 8, 26, 0.66) 0%, rgba(0, 8, 26, 0) 32%);
    }

    /* Fine film grain for premium depth (very subtle). */
    .hero-grain {
      position: absolute;
      inset: 0;
      z-index: 2;
      pointer-events: none;
      opacity: 0.06;
      mix-blend-mode: overlay;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
      background-size: 130px 130px;
    }

    /* Real video inside the modal (replaces the static placeholder stage). */
    .video-modal__video {
      position: absolute;
      inset: 0;
      z-index: 1;
      width: 100%;
      height: 100%;
      object-fit: cover;
      background: #000;
    }

    /* ── Mega menu: screen-centered, symmetric, generous whitespace ─────── */
    .mega-menu {
      position: fixed;
      top: 120px;
      left: 50%;
      width: min(1120px, calc(100vw - 64px));
      padding: 44px;
      border: 1px solid var(--surface-line);
      border-radius: 26px;
      background: rgba(255, 255, 255, 0.98);
      box-shadow:
        0 44px 110px rgba(0, 20, 66, 0.2),
        0 4px 14px rgba(0, 20, 66, 0.06);
      transform: translate(-50%, 12px);
      transition: none;
      -webkit-backdrop-filter: blur(24px) saturate(160%);
      backdrop-filter: blur(24px) saturate(160%);
    }

    .site-header.is-scrolled .mega-menu { top: 72px; }

    /* Invisible hover bridge covers the gap between header and the panel. */
    .mega-menu::before {
      content: "";
      position: absolute;
      top: -64px;
      left: 0;
      right: 0;
      height: 64px;
    }

    .header-nav__item:hover .mega-menu,
    .header-nav__item:focus-within .mega-menu {
      transform: translate(-50%, 0);
    }

    /* Symmetric 3-column layout, whitespace instead of dividers. */
    .mega-menu__grid {
      grid-template-columns: 300px 1fr 380px;
      gap: 48px;
      min-height: 316px;
      align-items: stretch;
    }

    /* Simple menus (list + image) carry far less content — keep them compact. */
    .mega-menu--simple {
      width: min(720px, calc(100vw - 64px));
    }

    .mega-menu--simple .mega-menu__grid {
      grid-template-columns: 1fr 300px;
      gap: 40px;
      min-height: 260px;
    }

    .mega-menu--simple .mega-menu__media { min-height: 260px; }

    .mega-menu__primary,
    .mega-menu__secondary {
      padding: 4px 0;
      border: 0;
    }

    /* Everything flush-left with the column; the hover pill breathes outward
       via negative margins so the text never gets an unnecessary indent. */
    /* Heading text and item text share the same 14px left inset, so links like
       "Regenyal Idea ve Super Idea" line up under their blue heading. The hover
       pill still fills from the column edge (item bg spans full width). */
    .mega-menu__kicker,
    .mega-menu__group-title {
      margin: 0 0 16px;
      padding-left: 14px;
      color: var(--brand-blue);
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.16em;
    }

    .mega-menu__category,
    .mega-menu__link {
      margin-inline: 0;
      padding: 0 14px;
    }

    .mega-menu__category.is-active::before { display: none; }
    .header-nav .mega-menu__category.is-active { font-weight: 600; }

    .mega-menu__list { gap: 4px; }

    .mega-menu__category,
    .mega-menu__link {
      min-height: 50px;
      padding: 0 18px;
      border-radius: 14px;
      font-size: 15px;
      letter-spacing: -0.2px;
    }

    /* Left tabs — clean, hide the legacy chevron, active accent bar. */
    .header-nav .mega-menu__category {
      position: relative;
      color: var(--brand-navy);
      font-weight: 500;
    }

    .mega-menu__category svg { display: none; }

    .header-nav .mega-menu__category.is-active,
    .header-nav .mega-menu__category:hover,
    .header-nav .mega-menu__category:focus-visible {
      background: var(--surface-paper);
      color: var(--brand-blue);
    }

    .mega-menu__category.is-active::before {
      content: "";
      position: absolute;
      left: 3px;
      top: 50%;
      width: 3px;
      height: 24px;
      border-radius: 2px;
      background: var(--brand-blue);
      transform: translateY(-50%);
    }

    /* Middle panel — the content that opens for the hovered tab. */
    .mega-menu__panel.is-active { gap: 4px; }

    .header-nav .mega-menu__link {
      color: var(--color-muted);
      font-weight: 400;
    }

    .header-nav .mega-menu__link:hover,
    .header-nav .mega-menu__link:focus-visible {
      background: var(--surface-paper);
      color: var(--brand-blue);
    }

    .mega-menu__link::after {
      content: "→";
      margin-left: auto;
      color: var(--brand-blue);
      opacity: 0;
      transform: translateX(-6px);
      transition: opacity 0.22s ease, transform 0.22s ease;
    }

    .mega-menu__link:hover::after,
    .mega-menu__link:focus-visible::after {
      opacity: 1;
      transform: translateX(0);
    }

    /* Right preview — larger, framed. */
    .mega-menu__media {
      min-height: 316px;
      border-radius: 18px;
      border: 1px solid var(--surface-line);
      background: var(--surface-paper);
    }

    /* ═══════════════════════════════════════════════════════════════════════
       MEGA-MENU — single authoritative design system.
       This block is the LAST mega-menu CSS in the file, so it fully controls
       the look and overrides the earlier partial definitions above.
       ═══════════════════════════════════════════════════════════════════════ */

    /* Container — no outer padding; inner regions own every bit of spacing. */
    .mega-menu { padding: 0; }

    /* Kill the legacy full-width hover bridge: while a menu was open it sat
       over the NEIGHBOURING triggers and swallowed their mouseenter, so
       moving across the nav couldn't switch menus. Gap-crossing tolerance is
       handled in JS with a 200ms grace timer instead. */
    .mega-menu::before { display: none; }

    /* The parent trigger whose menu is open: emphasised text + flipped
       chevron, so it is always clear which item the dropdown belongs to. */
    .header-nav__chevron { transition: transform 0.25s ease; }
    .header-nav__item.is-mega-open .header-nav__trigger { color: var(--brand-white); }
    .site-header.is-scrolled .header-nav__item.is-mega-open .header-nav__trigger { color: var(--brand-blue); }
    .header-nav__item.is-mega-open .header-nav__chevron { transform: rotate(180deg); }

    /* Shared morphing sheet: with JS active the menus lose their own chrome —
       one fixed "sheet" carries the background/border/shadow, morphs between
       menus (width/height/x) and points at the parent item with a caret, so
       the dropdown reads as a speech bubble belonging to that trigger. */
    html.js-mega .mega-menu {
      background: transparent;
      border-color: transparent;
      box-shadow: none;
      -webkit-backdrop-filter: none;
      backdrop-filter: none;
    }
    .mega-sheet {
      position: fixed;
      top: 0;
      left: 0;
      z-index: 29;
      border: 1px solid var(--surface-line);
      border-radius: 26px;
      background: rgba(255, 255, 255, 0.98);
      box-shadow:
        0 44px 110px rgba(0, 20, 66, 0.2),
        0 4px 14px rgba(0, 20, 66, 0.06);
      -webkit-backdrop-filter: blur(24px) saturate(160%);
      backdrop-filter: blur(24px) saturate(160%);
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
    }
    .mega-sheet__caret {
      position: absolute;
      top: -7px;
      left: 0;
      width: 14px;
      height: 14px;
      border-top: 1px solid var(--surface-line);
      border-left: 1px solid var(--surface-line);
      border-radius: 3px 0 0 0;
      background: #fff;
      transform: rotate(45deg);
    }
    .mega-menu.mega-menu--simple { width: min(720px, calc(100vw - 40px)); }
    .mega-menu.mega-menu--tabbed { width: min(1100px, calc(100vw - 40px)); }

    /* Column grids */
    .mega-menu--simple .mega-menu__grid {
      grid-template-columns: minmax(0, 1fr) 300px;
      gap: 0;
      align-items: stretch;
      min-height: 0;
    }
    .mega-menu--tabbed .mega-menu__grid {
      grid-template-columns: 372px minmax(0, 1fr) 320px;
      gap: 0;
      align-items: stretch;
      min-height: 316px;
    }

    /* Tabbed primary items: single line (the column is sized for the longest
       label); the hover arrow overlays on the right instead of taking space. */
    .mega-menu--tabbed .mega-menu__primary .mega-menu__category {
      position: relative;
      white-space: nowrap;
      padding-right: 36px;
    }
    .mega-menu--tabbed .mega-menu__primary .mega-menu__category::after {
      position: absolute;
      right: 14px;
      top: 50%;
      margin: 0;
      transform: translate(-6px, -50%);
    }
    .mega-menu--tabbed .mega-menu__primary .mega-menu__category:hover::after,
    .mega-menu--tabbed .mega-menu__primary .mega-menu__category:focus-visible::after,
    .mega-menu--tabbed .mega-menu__primary .mega-menu__category.is-active::after {
      transform: translate(0, -50%);
    }

    /* Column paddings */
    .mega-menu__primary,
    .mega-menu__secondary { padding: 30px 26px; border: 0; }
    .mega-menu--simple .mega-menu__primary { padding: 34px 30px; }
    .mega-menu--tabbed .mega-menu__primary {
      padding: 26px 24px 30px 30px;
      border-right: 1px solid var(--surface-line);
    }
    .mega-menu--tabbed .mega-menu__secondary { padding: 26px 26px 30px; }
    .mega-menu__visual { display: grid; align-content: stretch; min-width: 0; padding: 20px; }

    /* Tabs (Ürünler) — editorial underline tabs sitting on the head divider,
       consistent with the menu's kicker/divider language (no pill chrome). */
    .mega-menu__tabs {
      display: flex;
      gap: 28px;
      margin: 0;
      padding: 0;
      border-radius: 0;
      background: none;
    }
    .mega-menu__tab {
      position: relative;
      padding: 19px 2px 17px;
      border: 0;
      border-radius: 0;
      background: none;
      box-shadow: none;
      color: rgba(0, 20, 66, 0.45);
      font-size: 13.5px;
      font-weight: 600;
      letter-spacing: -0.1px;
      cursor: pointer;
      transition: color 0.2s ease;
    }
    .mega-menu__tab::after {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      bottom: -1px;
      height: 2px;
      border-radius: 2px;
      background: var(--brand-blue);
      transform: scaleX(0);
      transform-origin: left center;
      transition: transform 0.28s cubic-bezier(0.19, 1, 0.22, 1);
    }
    .mega-menu__tab:hover { color: var(--brand-navy); background: none; }
    .mega-menu__tab.is-active {
      color: var(--brand-blue);
      background: none;
      box-shadow: none;
    }
    .mega-menu__tab.is-active::after { transform: scaleX(1); }

    /* Kicker + group titles — aligned with the item text column */
    .mega-menu__kicker,
    .mega-menu__group-title {
      display: block;
      margin: 0 0 16px;
      padding-left: 14px;
      font-size: 11px;
      font-weight: 700;
      line-height: 1;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: rgba(0, 20, 66, 0.4);
    }
    .mega-menu__kicker { color: var(--brand-blue); }

    /* Item list */
    .mega-menu__list {
      counter-reset: megaitem;
      display: grid;
      gap: 3px;
      margin: 0;
      padding: 0;
      list-style: none;
    }

    /* Categories + panel links share one clean pill. Scoped under .header-nav
       so it outranks the nav's `.header-nav a { padding: 0 }` reset. */
    .header-nav .mega-menu__category,
    .header-nav .mega-menu__link {
      display: flex;
      align-items: center;
      justify-content: flex-start;
      gap: 12px;
      width: 100%;
      min-height: 46px;
      margin: 0;
      padding: 0 14px;
      border: 0;
      border-radius: 12px;
      background: transparent;
      color: rgba(0, 20, 66, 0.82);
      font-size: 15px;
      font-weight: 500;
      line-height: 1.15;
      letter-spacing: -0.1px;
      text-align: left;
      text-decoration: none;
      cursor: pointer;
      transition: background-color 0.2s ease, color 0.2s ease;
    }
    .header-nav .mega-menu__link {
      min-height: 40px;
      font-size: 14px;
      font-weight: 400;
      color: rgba(0, 20, 66, 0.62);
    }

    /* The nav bar itself is nowrap; menu items must wrap long labels instead
       of overflowing their column (e.g. "Dermal Dolgu & Biyorevitalizasyon"). */
    .header-nav .mega-menu__category,
    .header-nav .mega-menu__link { white-space: normal; }

    .header-nav .mega-menu__category.is-active,
    .header-nav .mega-menu__category:hover,
    .header-nav .mega-menu__category:focus-visible,
    .header-nav .mega-menu__link:hover,
    .header-nav .mega-menu__link:focus-visible {
      background: var(--surface-paper);
      color: var(--brand-blue);
    }

    /* Auto-number every category (::before) — replaces the legacy accent bar */
    .mega-menu__category svg { display: none; }
    .mega-menu__category::before,
    .mega-menu__category.is-active::before {
      counter-increment: megaitem;
      content: counter(megaitem, decimal-leading-zero);
      display: inline-block;
      flex: 0 0 auto;
      position: static;
      width: auto;
      height: auto;
      margin: 0;
      background: none;
      border-radius: 0;
      transform: none;
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.05em;
      color: var(--brand-blue);
      opacity: 0.5;
      transition: opacity 0.2s ease;
    }
    .mega-menu__category:hover::before,
    .mega-menu__category:focus-visible::before,
    .mega-menu__category.is-active::before { opacity: 1; }

    /* Reveal arrow on hover — categories and links alike */
    .mega-menu__category::after,
    .mega-menu__link::after {
      content: "→";
      flex: 0 0 auto;
      margin-left: auto;
      color: var(--brand-blue);
      opacity: 0;
      transform: translateX(-6px);
      transition: opacity 0.22s ease, transform 0.22s ease;
    }
    .mega-menu__category:hover::after,
    .mega-menu__category:focus-visible::after,
    .mega-menu__category.is-active::after,
    .mega-menu__link:hover::after,
    .mega-menu__link:focus-visible::after { opacity: 1; transform: translateX(0); }

    /* Panels (tabbed secondary) */
    .mega-menu__panel { display: none; }
    .mega-menu__panel.is-active { display: grid; align-content: start; gap: 3px; }

    /* Framed preview image — gradient veil + subtle zoom */
    .mega-menu__media {
      position: relative;
      width: 100%;
      height: 100%;
      min-height: 0;
      overflow: hidden;
      border-radius: 16px;
      border: 1px solid var(--surface-line);
      background: var(--surface-paper);
    }
    .mega-menu__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s cubic-bezier(0.19, 1, 0.22, 1); }
    .mega-menu__media::after {
      content: "";
      position: absolute;
      inset: 0;
      border-radius: inherit;
      background: linear-gradient(180deg, transparent 42%, rgba(0, 20, 66, 0.30) 100%);
      pointer-events: none;
    }
    /* Zoom yalniz gorselin kendi hover'inda: menu geneline bagli olursa imlec
       menu icindeyken gorsel surekli 1.05'te kalir ve swap sonrasi hover'da
       animasyon gorunmez. */
    .mega-menu__media:hover img { transform: scale(1.05); }

    /* Opening/switching choreography (container + child stagger) is driven
       entirely by GSAP in initMegaSwitcher — one system, no CSS/JS races.
       Without JS the CSS :hover fallback simply shows the finished state. */

    /* Ürünler head row: tabs + divider */
    .mega-menu__head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 20px;
      padding: 0 30px;
      border-bottom: 1px solid var(--surface-line);
    }
    .mega-menu__head .mega-menu__tabs { margin: 0; }
    .mega-menu__head .mega-menu__kicker { margin: 0; padding: 0; }

    /* Caption on the preview image (active item name) */
    .mega-menu__media-label {
      position: absolute;
      left: 18px;
      right: 18px;
      bottom: 15px;
      z-index: 1;
      color: #fff;
      font-size: 14px;
      font-weight: 600;
      letter-spacing: -0.1px;
      line-height: 1.3;
      text-shadow: 0 1px 12px rgba(0, 6, 24, 0.35);
    }

    @media (prefers-reduced-motion: reduce) {
      .mega-menu__media:hover img { transform: none; }
    }

    /* ── Expertise / process — original bento layout, minimal + flat ───── */
    /* Full-width dark band with a centered inner grid (matches the page's other
       sections) instead of a floating rounded shell with heavy overlays. */
    .expertise-section {
      padding: clamp(84px, 10vh, 132px) var(--hero-content-x);
      background: linear-gradient(180deg, #001334 0%, #020c22 100%);
    }

    .expertise-shell {
      width: min(1440px, 100%);
      height: auto;
      min-height: 0;
      margin: 0 auto;
      padding: 0;
      border-radius: 0;
      background: none;
      box-shadow: none;
      isolation: auto;
    }

    .expertise-shell::before,
    .expertise-shell::after { display: none; }

    /* Tall primary on the left, two stacked steps on the right (old layout). */
    .expertise-bento {
      grid-template-columns: 1.16fr 0.84fr;
      grid-template-rows: repeat(2, minmax(206px, 1fr));
    }

    .expertise-card--primary { grid-column: 1; grid-row: 1 / 3; }
    .expertise-card--step:nth-of-type(2) { grid-column: 2; grid-row: 1; }
    .expertise-card--step:nth-of-type(3) { grid-column: 2; grid-row: 2; }

    /* Minimal flat cards — hairline border + subtle fill, no heavy gradients. */
    .expertise-card {
      justify-content: space-between;
      gap: 28px;
      padding: clamp(28px, 2.6vw, 42px);
      background: rgba(255, 255, 255, 0.035);
      border: 1px solid rgba(255, 255, 255, 0.08);
      border-radius: 20px;
      box-shadow: none;
    }

    .expertise-card::before { display: none; }

    .expertise-card--primary {
      background:
        radial-gradient(120% 80% at 14% 0%, rgba(1, 137, 212, 0.2), rgba(1, 137, 212, 0) 58%),
        rgba(255, 255, 255, 0.045);
      border-color: rgba(1, 137, 212, 0.24);
    }

    .expertise-card__index {
      color: rgba(255, 255, 255, 0.46);
      text-transform: uppercase;
    }

    .expertise-card--primary .expertise-card__index { color: rgba(150, 205, 255, 0.85); }

    .expertise-card__content { gap: 14px; max-width: 460px; }

    .expertise-card__title,
    .expertise-card:not(.expertise-card--primary) .expertise-card__title {
      font-size: clamp(23px, 1.8vw, 28px);
      font-weight: 500;
      letter-spacing: -0.6px;
    }

    .expertise-card--primary .expertise-card__title { font-size: clamp(30px, 3.2vw, 44px); }

    .expertise-card__copy { font-size: 15px; line-height: 1.55; }

    @media (max-width: 920px) {
      .expertise-bento {
        grid-template-columns: 1fr;
        grid-template-rows: none;
      }
      .expertise-card--primary,
      .expertise-card--step:nth-of-type(2),
      .expertise-card--step:nth-of-type(3) {
        grid-column: auto;
        grid-row: auto;
        min-height: 240px;
      }
    }

    /* ── Global scroll-reveal (elements marked [data-reveal] rise into view) ──
       Only hidden when JS + motion are available; no-JS / reduced-motion show
       everything. GSAP's ScrollTrigger reveals them on enter. */
    .js-motion [data-reveal] {
      /* 0.01: LCP kaydi icin (yukaridaki hero notuyla ayni); JS acilinca
         gsap.set/batch zaten kendi baslangicini yazar. */
      opacity: 0.01;
      will-change: transform, opacity;
    }

    /* Reusable section kicker. */
    .section-kicker {
      display: block;
      color: var(--brand-blue);
      font-size: 12px;
      font-weight: 600;
      line-height: 1;
      letter-spacing: 0.16em;
      text-transform: uppercase;
    }

    /* ── Ürün portföyü: video son karesi = bu PNG (aynı kare, daha kaliteli).
       PNG sticky ile ekrana PIN'lenir ve KALIR (fade yok). Video son kareye
       gelince görünmez şekilde bu PNG'e devreder. Bölüm yüksekliği, PNG pinli
       kalırken hotspot'ları gezmeye scroll payı verir. ── */
    .products-section {
      padding: 0;
      background: transparent;
      /* Sadece scroll payı (spacer): video son kareye scrub olurken + fixed
         overlay ekranda dururken yükseklik verir. Dwell knob'u budur. */
      height: 90svh;
    }
    /* FIXED overlay: video gibi ekrana sabit, içeriğin arkasında (z:6). opacity 0
       başlar; video son kareye ulaşınca .is-revealed → 1 (0.4s crossfade). */
    .products-final {
      position: fixed;
      inset: 0;
      z-index: 6;
      line-height: 0;
      overflow: hidden;
      pointer-events: none;      /* görünene kadar tıklanamaz */
      opacity: 0;
      /* visibility: hotspot butonları görünmezken Tab sırasına ve ekran
         okuyucuya girmesin. Gecikmeli visibility geçişi fade'i bozmaz. */
      visibility: hidden;
      transition: opacity 0.4s ease, visibility 0s 0.4s;
    }
    .products-final.is-revealed {
      opacity: 1;
      visibility: visible;
      transition: opacity 0.4s ease, visibility 0s 0s;
    }
    /* TIKLANABİLİR pencere (dwell): podium tek başınayken z:20 → hotspot'lar
       tıklanabilir/hover. SÜREÇ girmeye başlayınca JS kaldırır → z:6, SÜREÇ üstüne
       biner. Sadece sınıf toggle (pozisyon/scroll mutasyonu YOK) → stabil. */
    .products-final.is-interactive { z-index: 20; pointer-events: auto; }
    /* Sol üst başlık alanı — diğer bölümlerdeki (SÜREÇ) kicker+title stiliyle uyumlu.
       Fixed overlay içinde; overlay fade'iyle beraber görünür. */
    .products-final__head {
      position: absolute;
      top: clamp(96px, 13vh, 168px);
      left: var(--hero-content-x);
      z-index: 4;
      line-height: normal;
      max-width: min(560px, 60vw);
      pointer-events: none;
    }
    .products-final__kicker {
      display: block;
      margin-bottom: 18px;
      color: var(--brand-navy);
      font-size: 11px;
      font-weight: 600;
      line-height: 1;
      letter-spacing: 0.05em;
      text-transform: uppercase;
    }
    .products-final__title {
      margin: 0;
      color: var(--brand-blue);
      font-size: clamp(30px, 3.8vw, 54px);
      font-weight: 500;
      line-height: 1;
      letter-spacing: -2.2px;
    }
    .products-final__title span {
      display: block;
      color: var(--brand-navy);
    }
    .products-final__sub {
      margin: 18px 0 0;
      max-width: 380px;
      color: rgba(0, 20, 66, 0.56);
      font-size: clamp(13px, 1.1vw, 15px);
      line-height: 1.5;
      letter-spacing: 0;
    }
    /* object-fit: cover'ı taklit eden responsive sarmalayıcı: hotspot'lar (% ile)
       görselle BİREBİR hizalı kalır; ekran genişliği değişince beraber ölçeklenir.
       --frame-ar = görsel W/H = 1672/941. */
    .products-final__stage {
      --frame-ar: 1.7768;   /* görsel 1672 / 941 */
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      /* viewport birimleri = video object-fit:cover ile BİREBİR aynı kırpma
         (handoff'ta podium ↔ video son karesi hizalı). */
      width: max(100vw, calc(100svh * var(--frame-ar)));
      height: max(100svh, calc(100vw / var(--frame-ar)));
    }
    @media (prefers-reduced-motion: reduce) {
      .products-final { transition: none; }
    }
    @media (max-width: 860px) {
      /* Scroll-scrub sahnesi desktop-only; mobilde bölümü sadeleştir. */
      .products-section { height: auto; padding: clamp(72px, 10vh, 104px) var(--hero-content-x); }
      .products-final { display: none; }
      .products-mobile { display: block; }
    }

    /* ── Mobil statik ürün portföyü (yalnız ≤860px görünür) ──────────────
       Masaüstünde fixed .products-final overlay devrede; mobilde o kapalı
       olduğu için ürünler burada düz, responsive kartlarla listelenir. */
    .products-mobile { display: none; }
    .products-mobile__head { margin-bottom: clamp(28px, 6vw, 44px); }
    .products-mobile__kicker {
      display: block;
      margin-bottom: 14px;
      color: var(--brand-blue);
      font-size: 12px;
      font-weight: 600;
      line-height: 1;
      letter-spacing: 0.16em;
      text-transform: uppercase;
    }
    .products-mobile__title {
      margin: 0;
      color: var(--brand-blue);
      font-size: clamp(28px, 8vw, 40px);
      font-weight: 500;
      line-height: 1.05;
      letter-spacing: -0.025em;
    }
    .products-mobile__title span { display: block; color: var(--brand-navy); }
    .products-mobile__sub {
      margin: 14px 0 0;
      max-width: 420px;
      color: rgba(0, 20, 66, 0.56);
      font-size: 15px;
      line-height: 1.5;
    }
    .products-mobile__grid {
      list-style: none;
      margin: 0;
      padding: 0;
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
      gap: 16px;
    }
    .pm-card {
      display: flex;
      flex-direction: column;
      border: 1px solid var(--surface-line);
      border-radius: 18px;
      background: #fff;
      overflow: hidden;
    }
    .pm-card__img {
      width: 100%;
      aspect-ratio: 4 / 3;
      object-fit: cover;
      background: var(--surface-paper, #f4f6fa);
    }
    .pm-card__body { padding: 18px 18px 20px; display: flex; flex-direction: column; gap: 6px; }
    .pm-card__cat {
      color: var(--brand-blue);
      font-size: 11px;
      font-weight: 600;
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }
    .pm-card__name {
      margin: 0;
      color: var(--brand-navy);
      font-size: 17px;
      font-weight: 600;
      line-height: 1.2;
      letter-spacing: -0.01em;
    }
    .pm-card__desc {
      margin: 2px 0 0;
      color: rgba(0, 20, 66, 0.6);
      font-size: 14px;
      line-height: 1.5;
    }
    /* Kaynak sırası: bu override, yukarıdaki `.products-mobile{display:none}`
       varsayılanından SONRA gelmeli ki ≤860px'de kazansın. */
    @media (max-width: 860px) {
      .products-mobile { display: block; }
    }
    .products-final__img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: fill;   /* stage zaten görsel oranında → dolgu = birebir */
    }

    .hotspot {
      position: absolute;
      transform: translate(-50%, -50%);   /* GSAP xPercent/yPercent ile aynı; fallback */
      width: 34px;
      height: 34px;
      z-index: 3;
      filter: none;
      transition: filter 0.35s ease;
    }
    /* Katman gorunur ama etkilesim penceresi kapali (SUREC girdi): hotspotlar
       silikleşir ki tiklanabilir sanilmasin. filter kullanilir cunku GSAP
       pop animasyonu opacity'yi INLINE yazar, CSS opacity ona yenilir. */
    .products-final.is-revealed:not(.is-interactive) .hotspot {
      filter: opacity(0.4) grayscale(0.35);
    }
    /* Hover edilen hotspot ve tooltip'i diğer hotspot'ların ÜSTÜNde kalsın. */
    .hotspot:hover,
    .hotspot:focus-within {
      z-index: 20;
    }
    /* BEYAZ dolgulu küçük çember + ortada "+" ikonu. Çevresindeki mavi halka
       hero video butonu gibi hover'da dönen gradientli halka. */
    .hotspot__dot {
      position: absolute;
      inset: 0;
      margin: 0;
      width: 34px;
      height: 34px;
      padding: 0;
      border: 0;
      border-radius: 50%;
      background: #ffffff;
      display: grid;
      place-items: center;
      cursor: pointer;
      box-shadow: 0 0 12px 1px rgba(1, 137, 212, 0.28), 0 4px 12px rgba(0, 20, 66, 0.18);
      transition: transform 0.3s cubic-bezier(0.2, 0.7, 0.2, 1);
    }
    /* Çember halkası — dinlenmede DÜZ açık mavi border, hover'da hero video
       butonu gibi gradientli dönen halkaya dönüşür. */
    .hotspot__dot::before {
      content: "";
      position: absolute;
      inset: 0;
      border-radius: 50%;
      padding: 2px;
      background: rgba(1, 137, 212, 0.55);
      -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
      -webkit-mask-composite: xor;
      mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
      mask-composite: exclude;
      transform-origin: center;
      transition: background 0.32s ease;
      will-change: transform;
      pointer-events: none;
    }
    /* Açık halka gradient/animasyonu ve label açılışı cihaz tipine göre
       aşağıdaki media bloklarında tetiklenir (hover'lı → hover, dokunmatik → tıklama). */
    /* Opak, kalın pulse — sürekli dışa doğru atan mavi halka. */
    .hotspot__dot::after {
      content: "";
      position: absolute;
      inset: 0;
      border-radius: 50%;
      border: 3px solid var(--brand-blue, #0189d4);
      transform-origin: center;
      animation: hotspotPulse 2.2s cubic-bezier(0.22, 0.61, 0.36, 1) infinite;
      pointer-events: none;
    }
    @keyframes hotspotPulse {
      0%   { transform: scale(1); opacity: 0.85; }
      70%  { opacity: 0; }
      100% { transform: scale(2.1); opacity: 0; }
    }
    .hotspot__plus {
      position: relative;
      z-index: 2;
      width: 14px;
      height: 14px;
      display: block;
    }
    .hotspot__plus path {
      fill: none;
      stroke: var(--brand-blue, #0189d4);
      stroke-width: 2.6;
      stroke-linecap: round;
    }

    /* ── Tooltip kartı: kategori · başlık · görsel · açıklama · buton ── */
    .hotspot__label {
      position: absolute;
      left: 50%;
      bottom: 100%;
      width: 300px;
      padding-bottom: 16px;   /* şeffaf köprü: dot ↔ kart arası hover kesintisiz */
      transform: translate(-50%, 10px);
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.28s ease, transform 0.4s cubic-bezier(0.19, 1, 0.22, 1);
    }
    .hotspot__card {
      position: relative;
      display: flex;
      flex-direction: column;
      gap: 9px;
      padding: 15px 15px 17px;
      border-radius: var(--radius-medium, 18px);
      background: #ffffff;
      border: 1px solid var(--surface-line, #e4ecf5);
      box-shadow: 0 26px 60px -18px rgba(0, 20, 66, 0.34), 0 10px 24px -14px rgba(0, 20, 66, 0.22);
      text-align: left;
    }
    /* Alt ok (caret). */
    .hotspot__card::after {
      content: "";
      position: absolute;
      left: 50%;
      top: 100%;
      width: 14px;
      height: 14px;
      background: #ffffff;
      border-right: 1px solid var(--surface-line, #e4ecf5);
      border-bottom: 1px solid var(--surface-line, #e4ecf5);
      transform: translate(-50%, -7px) rotate(45deg);
    }

    /* ── Yön varyantları: label'ın hangi yöne açılacağı ── */
    /* Sağa açılan (en soldaki 2 hotspot) */
    .hotspot--right .hotspot__label {
      left: 100%;
      right: auto;
      bottom: auto;
      top: 50%;
      padding: 0 0 0 16px;
      transform: translate(-10px, -50%);
    }
    .hotspot--right .hotspot__card::after {
      left: 0;
      top: 50%;
      border-right: 0;
      border-bottom: 1px solid var(--surface-line, #e4ecf5);
      border-left: 1px solid var(--surface-line, #e4ecf5);
      transform: translate(-7px, -50%) rotate(45deg);
    }

    /* Sola açılan (en sağdaki 2 hotspot) */
    .hotspot--left .hotspot__label {
      left: auto;
      right: 100%;
      bottom: auto;
      top: 50%;
      padding: 0 16px 0 0;
      transform: translate(10px, -50%);
    }
    .hotspot--left .hotspot__card::after {
      left: 100%;
      top: 50%;
      border-right: 1px solid var(--surface-line, #e4ecf5);
      border-bottom: 0;
      border-top: 1px solid var(--surface-line, #e4ecf5);
      transform: translate(-7px, -50%) rotate(45deg);
    }

    /* Aşağı açılan (ortadaki hotspot) */
    .hotspot--down .hotspot__label {
      left: 50%;
      right: auto;
      bottom: auto;
      top: 100%;
      padding: 16px 0 0 0;
      transform: translate(-50%, -10px);
    }
    .hotspot--down .hotspot__card::after {
      left: 50%;
      top: 0;
      border-right: 0;
      border-bottom: 0;
      border-top: 1px solid var(--surface-line, #e4ecf5);
      border-left: 1px solid var(--surface-line, #e4ecf5);
      transform: translate(-50%, -7px) rotate(45deg);
    }

    /* ── Açılma tetikleyicisi ──
       Hover'lı (masaüstü) cihazlar: SADECE hover açar; tıklamanın işlevi yok.
       Dokunmatik (tablet/telefon) cihazlar: tıklama (focus) açar. */
    @media (hover: hover) and (pointer: fine) {
      .hotspot:hover .hotspot__dot { transform: scale(1.18); }
      .hotspot:hover .hotspot__dot::before {
        background: conic-gradient(from 220deg, rgba(1, 137, 212, 0) 0deg, rgba(1, 137, 212, 0.18) 64deg, rgba(1, 137, 212, 0.94) 132deg, rgba(199, 240, 255, 0.62) 174deg, rgba(255, 255, 255, 0.34) 194deg, rgba(116, 212, 255, 0.96) 232deg, rgba(1, 137, 212, 0.34) 288deg, rgba(1, 137, 212, 0) 360deg);
        animation: galleryPlayRingSweep 2.8s linear infinite;
      }
      .hotspot:hover .hotspot__label {
        opacity: 1;
        pointer-events: auto;
        transform: translate(-50%, 0);
      }
      .hotspot--right:hover .hotspot__label { transform: translate(0, -50%); }
      .hotspot--left:hover .hotspot__label { transform: translate(0, -50%); }
      .hotspot--down:hover .hotspot__label { transform: translate(-50%, 0); }
    }

    @media (hover: none), (pointer: coarse) {
      .hotspot.is-open .hotspot__dot,
      .hotspot:focus-within .hotspot__dot { transform: scale(1.18); }
      .hotspot.is-open .hotspot__dot::before,
      .hotspot:focus-within .hotspot__dot::before {
        background: conic-gradient(from 220deg, rgba(1, 137, 212, 0) 0deg, rgba(1, 137, 212, 0.18) 64deg, rgba(1, 137, 212, 0.94) 132deg, rgba(199, 240, 255, 0.62) 174deg, rgba(255, 255, 255, 0.34) 194deg, rgba(116, 212, 255, 0.96) 232deg, rgba(1, 137, 212, 0.34) 288deg, rgba(1, 137, 212, 0) 360deg);
        animation: galleryPlayRingSweep 2.8s linear infinite;
      }
      .hotspot.is-open .hotspot__label,
      .hotspot:focus-within .hotspot__label {
        opacity: 1;
        pointer-events: auto;
        transform: translate(-50%, 0);
      }
      .hotspot--right.is-open .hotspot__label,
      .hotspot--right:focus-within .hotspot__label { transform: translate(0, -50%); }
      .hotspot--left.is-open .hotspot__label,
      .hotspot--left:focus-within .hotspot__label { transform: translate(0, -50%); }
      .hotspot--down.is-open .hotspot__label,
      .hotspot--down:focus-within .hotspot__label { transform: translate(-50%, 0); }
    }

    .hotspot__cat {
      font-size: 11px;
      letter-spacing: 0.05em;        /* site kicker standardı */
      text-transform: uppercase;
      font-weight: 600;
      color: var(--brand-blue, #0189d4);
    }
    .hotspot__name {
      font-size: 20px;
      font-weight: 500;              /* site başlık ağırlığı (600 → 500, daha hafif) */
      letter-spacing: -0.5px;
      line-height: 1.2;
      color: var(--brand-navy, #001442);
    }
    .hotspot__thumb {
      width: 100%;
      aspect-ratio: 16 / 10;
      object-fit: cover;
      border-radius: var(--radius-small, 10px);
      background: var(--surface-paper, #f5f8fc);
      margin-top: 2px;
    }
    /* Linkli kart parcalari: baslik hover mavi; gorselde mega menu zoom deseni.
       Bricks, linkli image elementinde class'lari en dis <a>'ya tasir: kutu
       artik a.hotspot__thumb, icteki img kutuyu doldurup hover'da buyur. */
    a.hotspot__name { text-decoration: none; transition: color 0.25s ease; }
    a.hotspot__name:hover { color: var(--brand-blue, #0189d4); }
    a.hotspot__thumb { display: block; overflow: hidden; padding: 0; }
    a.hotspot__thumb img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform 0.7s cubic-bezier(0.19, 1, 0.22, 1);
    }
    a.hotspot__thumb:hover img { transform: scale(1.05); }
    .hotspot__desc {
      margin: 0;
      font-size: 13px;
      line-height: 1.45;
      color: var(--color-muted, #566579);
    }
    .hotspot__btn {
      display: inline-flex;
      align-items: center;
      align-self: flex-start;
      gap: 8px;
      margin-top: 3px;
      padding: 10px 16px;
      border-radius: 999px;
      background: var(--brand-navy, #001442);
      color: #fff;
      font-size: 12px;
      font-weight: 600;
      letter-spacing: 0.02em;
      text-decoration: none;
      transition: background 0.25s ease, transform 0.25s ease;
    }
    .hotspot__btn svg {
      width: 13px;
      height: 13px;
      fill: currentColor;
    }
    .hotspot__btn:hover {
      background: var(--brand-blue, #0189d4);
      transform: translateY(-1px);
    }
    .sr-only {
      position: absolute;
      width: 1px; height: 1px;
      padding: 0; margin: -1px;
      overflow: hidden; clip: rect(0 0 0 0);
      white-space: nowrap; border: 0;
    }
    @media (prefers-reduced-motion: reduce) {
      .hotspot__dot::before { animation: none; }
      .hotspot__dot::after { animation: none; opacity: 0; }
      a.hotspot__thumb:hover img { transform: none; }
    }

    .products-inner {
      width: min(1440px, 100%);
      margin: 0 auto;
    }

    .products-head {
      display: grid;
      gap: 18px;
      margin-bottom: clamp(34px, 4vw, 58px);
    }

    .products-title {
      margin: 0;
      color: var(--brand-navy);
      font-size: clamp(38px, 4.6vw, 62px);
      font-weight: 500;
      line-height: 1;
      letter-spacing: -2.4px;
    }

    .products-bento {
      display: grid;
      grid-template-columns: 1.32fr 1fr 1fr;
      grid-template-rows: repeat(2, minmax(196px, 1fr));
      gap: var(--gap-medium);
    }

    .product-card {
      position: relative;
      display: flex;
      min-width: 0;
      flex-direction: column;
      justify-content: space-between;
      padding: 26px;
      overflow: hidden;
      border: 1px solid var(--surface-line);
      border-radius: 20px;
      background: var(--brand-white);
      color: var(--brand-navy);
      transition:
        transform 0.45s cubic-bezier(0.19, 1, 0.22, 1),
        box-shadow 0.45s ease,
        border-color 0.45s ease;
    }

    .product-card:hover,
    .product-card:focus-visible {
      transform: translateY(-4px);
      border-color: rgba(1, 137, 212, 0.4);
      box-shadow: 0 26px 60px rgba(0, 20, 66, 0.13);
      outline: none;
    }

    .product-card__head { display: block; }

    .product-card__tag {
      display: inline-block;
      color: var(--color-muted);
      font-size: 12.5px;
      font-weight: 500;
      letter-spacing: 0.01em;
    }

    .product-card__foot {
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      gap: 14px;
      margin-top: auto;
    }

    .product-card__name {
      max-width: 12ch;
      color: var(--brand-navy);
      font-size: clamp(20px, 1.7vw, 25px);
      font-weight: 600;
      line-height: 1.1;
      letter-spacing: -0.6px;
    }

    .product-card__arrow {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 42px;
      height: 42px;
      flex: 0 0 auto;
      border-radius: 50%;
      border: 1px solid var(--surface-line);
      color: var(--brand-blue);
      transition: background-color 0.35s ease, color 0.35s ease, transform 0.35s ease;
    }

    .product-card__arrow svg { width: 15px; height: 15px; fill: currentColor; }

    .product-card:hover .product-card__arrow {
      background: var(--brand-blue);
      color: #fff;
      transform: translate(2px, -2px);
    }

    /* Feature card (Regenyal) — full-bleed image with overlaid label. */
    .product-card--feature {
      grid-column: 1;
      grid-row: 1 / 3;
      padding: 0;
      border: 0;
      color: #fff;
    }

    .product-card--feature .product-card__media {
      position: absolute;
      inset: 0;
    }

    .product-card--feature img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform 0.7s cubic-bezier(0.19, 1, 0.22, 1);
    }

    .product-card--feature:hover img { transform: scale(1.05); }

    .product-card__overlay {
      position: absolute;
      inset: 0;
      background: linear-gradient(178deg, rgba(0, 12, 40, 0) 38%, rgba(0, 10, 34, 0.86) 100%);
    }

    .product-card__content {
      position: relative;
      z-index: 1;
      display: grid;
      gap: 12px;
      margin-top: auto;
      padding: clamp(28px, 3vw, 40px);
    }

    .product-card--feature .product-card__tag { color: rgba(255, 255, 255, 0.72); }

    .product-card--feature .product-card__name {
      max-width: 16ch;
      color: #fff;
      font-size: clamp(26px, 2.4vw, 36px);
      font-weight: 600;
      letter-spacing: -1px;
    }

    .product-card__cta {
      display: inline-flex;
      align-items: center;
      gap: 9px;
      margin-top: 4px;
      color: #fff;
      font-size: 14px;
      font-weight: 600;
    }

    .product-card__cta svg {
      width: 14px;
      height: 14px;
      fill: currentColor;
      transition: transform 0.35s cubic-bezier(0.19, 1, 0.22, 1);
    }

    .product-card--feature:hover .product-card__cta svg { transform: translateX(4px); }

    @media (max-width: 900px) {
      .products-bento {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: none;
      }
      .product-card--feature {
        grid-column: 1 / -1;
        grid-row: auto;
        min-height: 320px;
      }
      .product-card { min-height: 180px; }
    }

    @media (max-width: 560px) {
      .products-bento { grid-template-columns: 1fr; }
    }

    /* ── Trust / credibility band — light, spacious, intentional ───────── */
    /* ── Scroll-scrubbed animasyon: EN ARKADA sabit katman (multiply) ─────
       Hero opak olduğu için başta görünmez; hero yukarı kalkınca altından
       ortaya çıkar. Aradaki içerik bölümleri (trust/vizyon/ürünler) şeffaf
       yapılır ki videonun beyaz negatif alanını kullansınlar. */
    .scroll-anim-bg {
      position: fixed;
      inset: 0;
      z-index: 5;                 /* footer(1) üstünde, content-wrapper(10) altında */
      pointer-events: none;
      background: #ffffff;
      opacity: 0;                 /* JS aktif bölgede görünür yapar */
      transition: opacity 0.35s ease;
    }
    .scroll-anim-bg.is-live { opacity: 1; }
    .scroll-anim__video {
      display: block;
      width: 100%;
      height: 100%;
      /* canvas: cover-fit + hizalama JS'te (PNG overlay ile birebir kırpma).
         NOT: eski mix-blend-mode:multiply kaldırıldı — zemin saf beyaz (#fff)
         olduğundan multiply görsel olarak birebir aynıydı (c×1=c) ama her
         scroll karesinde tüm katman yığınını yeniden compose ettiriyordu. */
      opacity: 0;                 /* yalnızca scrub bölgesinde görünür */
      transition: opacity 0.3s ease;
    }
    .scroll-anim-bg.video-on .scroll-anim__video { opacity: 1; }
    @media (prefers-reduced-motion: reduce) {
      .scroll-anim-bg { display: none; }
    }

    /* Yetkili distribütörlük — sola yaslı, sağ taraf helezon animasyonuna boş. */
    .partners-section {
      /* Bu bölüm aynı zamanda scroll-anim videonun oynadığı sahne. Yükseklik +
         üst/alt padding'i büyütmek = video daha uzun scroll'a yayılır = daha yavaş
         oynar. Video hızını buradan ayarla (min-height ana knob). */
      /* İçerik üstte (flex-start). SEGMENT MİMARİSİ: bu bölümün yüksekliği
         = klip 2'nin (heliks kutuyu sarar) scroll süresi. Podyum inişi artık
         .scroll-runway'de oynadığından 100vh yeterli. */
      min-height: 100vh;
      padding: clamp(64px, 6vh, 130px) var(--hero-content-x) clamp(90px, 14vh, 200px);
      background: transparent;
      /* Kolon: distribütör üstte, "Vizyoner Hekimler" notu altta-sağda. */
      display: flex;
      flex-direction: column;
      align-items: flex-start;
    }
    .partners-inner {
      max-width: min(46%, 560px);
      display: flex;
      flex-direction: column;
      gap: 24px;
      align-items: flex-start;
    }
    /* Distribütör bölümünün ALT kısmına, SAĞA YASLI "Vizyoner Hekimler" notu.
       margin-top ile aşağı alınır; ama bölümün EN dibine değil (orası podium
       overlay'in ekranı kapladığı yer → not örtülüp kaybolur). ~65vh ideal. */
    .partners-note {
      align-self: flex-end;
      margin-top: 180px;    /* distribütör bloğunun ~340px altı */
      max-width: 460px;
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      text-align: right;
    }
    .partners-eyebrow {
      margin: 0;
      font-size: 12px;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      font-weight: 600;
      color: var(--brand-navy);
    }
    .partners-brands {
      display: flex;
      align-items: center;
      gap: clamp(18px, 2.4vw, 40px);
      flex-wrap: wrap;
    }
    .partners-chips {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
    }
    @media (max-width: 860px) {
      .partners-section { min-height: auto; }
      .partners-inner { max-width: 100%; }
      .partners-note { margin-top: 48px; align-self: flex-start; align-items: flex-start; text-align: left; }
    }

    .trust-band {
      padding: clamp(64px, 9vh, 112px) var(--hero-content-x);
      background: transparent;         /* arka scroll-anim videosu görünsün */
      border-bottom: 1px solid var(--surface-line);
    }

    .trust-inner {
      display: grid;
      justify-items: center;
      gap: clamp(30px, 3.6vw, 48px);
      width: min(1040px, 100%);
      margin: 0 auto;
      text-align: center;
    }

    .trust-eyebrow {
      margin: 0;
      color: var(--brand-blue);
      font-size: 12px;
      font-weight: 600;
      line-height: 1;
      letter-spacing: 0.16em;
      text-transform: uppercase;
    }

    .trust-brands {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: clamp(26px, 4vw, 58px);
      flex-wrap: wrap;
    }

    /* Partner/distributor logos — muted monochrome by default so three very
       different marks read as one calm row; full colour + lift on hover. */
    .trust-logo {
      width: auto;
      flex: 0 0 auto;
      object-fit: contain;
      filter: grayscale(1);
      opacity: 0.5;
      transition: filter 0.4s ease, opacity 0.4s ease, transform 0.4s cubic-bezier(0.19, 1, 0.22, 1);
    }

    /* Heights tuned per lockup so the optical weight matches across marks. */
    .trust-logo--regenyal { height: 46px; }
    .trust-logo--caregen { height: 52px; }
    .trust-logo--pharmabeau { height: 30px; }

    .trust-logo:hover,
    .trust-logo:focus-visible {
      filter: grayscale(0);
      opacity: 1;
      transform: translateY(-2px);
    }

    .trust-dot {
      width: 5px;
      height: 5px;
      flex: 0 0 auto;
      border-radius: 50%;
      background: rgba(1, 137, 212, 0.4);
    }

    .trust-chips {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      flex-wrap: wrap;
    }

    .trust-chip {
      display: inline-flex;
      align-items: center;
      min-height: 38px;
      padding: 0 17px;
      border: 1px solid var(--surface-line);
      border-radius: 999px;
      background: #fff;
      color: var(--color-muted);
      font-size: 12.5px;
      font-weight: 500;
      letter-spacing: 0.01em;
    }

    /* ── Vision section refinement (copy hacks removed, metrics elevated) ── */
    .vision-copy {
      transform: none;
      max-width: 640px;
      text-align: left;
      letter-spacing: -0.5px;
    }

    .vision-copy__lead,
    .vision-copy__body {
      display: inline;
      padding: 0;
      text-align: left;
      white-space: normal;
    }

    .metrics-grid {
      border: 1px solid var(--surface-line);
      border-radius: 20px;
      box-shadow: 0 26px 64px rgba(0, 20, 66, 0.07);
    }

    .metric-divider { background: var(--surface-line); }

    /* ── Pinned horizontal "Avantajlar" gallery ────────────────────────── */
    .pinned-section {
      padding: 0;
      overflow: hidden;
      background: var(--surface-paper);
    }

    .pinned-wrap {
      display: flex;
      flex-direction: column;
      height: 100svh;
      padding: clamp(96px, 13vh, 140px) 0 clamp(40px, 6vh, 64px);
    }

    .pinned-head {
      flex: 0 0 auto;
      display: grid;
      gap: 16px;
      width: min(1440px, 100%);
      margin: 0 auto;
      padding: 0 var(--hero-content-x);
    }

    .pinned-headline {
      max-width: 760px;
      margin: 0;
      color: var(--brand-navy);
      font-size: clamp(32px, 4vw, 56px);
      font-weight: 500;
      line-height: 1.02;
      letter-spacing: -2.2px;
    }

    .pinned-headline__hl { color: var(--brand-blue); }

    /* Headline + section CTA on one baseline-aligned row. */
    .pinned-head__row {
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      gap: 40px;
      flex-wrap: wrap;
    }

    /* Quiet text button with an underline that wipes in on hover — same
       language as the hero's secondary CTA, far less dominant than a pill. */
    .pinned-cta {
      position: relative;
      display: inline-flex;
      align-items: center;
      gap: 10px;
      flex: 0 0 auto;
      padding: 0 0 8px;
      background: transparent;
      color: var(--brand-navy);
      font-size: 15px;
      font-weight: 600;
      letter-spacing: -0.1px;
      transition: color 0.24s ease;
    }

    .pinned-cta::before {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      height: 1px;
      border-radius: 999px;
      background: currentColor;
      transform: scaleX(0);
      transform-origin: left center;
      transition: transform 0.28s cubic-bezier(0.19, 1, 0.22, 1);
    }

    .pinned-cta svg {
      width: 15px;
      height: 15px;
      fill: currentColor;
      transition: transform 0.3s cubic-bezier(0.19, 1, 0.22, 1);
    }

    .pinned-cta:hover,
    .pinned-cta:focus-visible { color: var(--brand-blue); }

    .pinned-cta:hover::before,
    .pinned-cta:focus-visible::before { transform: scaleX(1); }

    .pinned-cta:hover svg,
    .pinned-cta:focus-visible svg { transform: translateX(4px); }

    .pinned-viewport {
      flex: 1 1 auto;
      display: flex;
      align-items: center;
      min-height: 0;
      margin-top: clamp(30px, 5vh, 56px);
      overflow-x: auto;
      scrollbar-width: none;
    }

    .pinned-viewport::-webkit-scrollbar { display: none; }
    .js-motion .pinned-viewport { overflow: visible; }

    .pinned-track {
      display: flex;
      gap: var(--gap-medium);
      align-items: center;
      height: 100%;
      /* First card's left edge lines up with the centred (max 1440) heading's
         left edge, not the raw viewport gutter, so 01 aligns with the title. */
      padding-left: max(var(--hero-content-x), calc((100vw - 1440px) / 2 + var(--hero-content-x)));
      padding-right: var(--hero-content-x);
      will-change: transform;
    }

    .benefit-card {
      position: relative;
      display: flex;
      flex: 0 0 auto;
      width: clamp(288px, 30vw, 400px);
      height: min(56vh, 520px);
      flex-direction: column;
      justify-content: space-between;
      gap: 30px;
      padding: 40px 38px;
      border: 1px solid var(--surface-line);
      border-radius: 24px;
      background: var(--brand-white);
      color: var(--brand-navy);
      transition:
        transform 0.5s cubic-bezier(0.19, 1, 0.22, 1),
        box-shadow 0.5s ease;
    }

    .benefit-card:hover { transform: translateY(-6px); box-shadow: 0 30px 70px rgba(0, 20, 66, 0.12); }

    .benefit-card__num {
      font-size: 16px;
      font-weight: 700;
      line-height: 1;
      letter-spacing: 0.12em;
      color: var(--brand-blue);
      font-variant-numeric: tabular-nums;
    }

    /* Kart sağ üst köşesindeki görsel (carousel-img/ — dosya adı = kart başlığı).
       Çerçevesiz/zeminsiz, düz görsel. */
    .benefit-card__img {
      position: absolute;
      top: 24px;
      right: 26px;
      width: clamp(164px, 16vw, 212px);
      aspect-ratio: 1 / 1;
      object-fit: contain;
      pointer-events: none;
    }

    .benefit-card__body { display: grid; gap: 15px; margin-top: auto; }

    .benefit-card__title {
      margin: 0;
      font-size: clamp(23px, 1.9vw, 29px);
      font-weight: 600;
      line-height: 1.12;
      letter-spacing: -0.8px;
    }

    .benefit-card__copy {
      margin: 0;
      color: var(--color-muted);
      font-size: 15.5px;
      line-height: 1.5;
      letter-spacing: -0.1px;
    }

    .benefit-card--cta {
      background: linear-gradient(165deg, #012a5c, #001033);
      border-color: transparent;
      color: #fff;
      text-decoration: none;
    }

    .benefit-card--cta .benefit-card__num {
      display: inline-flex;
      color: var(--brand-cyan);
      -webkit-text-stroke: 0;
      text-stroke: 0;
    }

    .benefit-card--cta .benefit-card__num svg { width: 40px; height: 40px; fill: currentColor; }
    .benefit-card--cta .benefit-card__title { color: #fff; }
    .benefit-card--cta:hover { transform: translateY(-6px); box-shadow: 0 30px 70px rgba(1, 137, 212, 0.32); }

    /* Closing note — quiet editorial paragraph bridging Avantajlar → footer. */
    /* ── Rejeneratif çözümler başlık bölümü (eski kapanış notu yerine).
       .closing-section class'ı korunuyor çünkü scroll-anim is-live coverEnd JS'i
       ona bağlı. İçerik regenerasyon01.html'den uyarlandı; CTA çakışmaması için
       .rejen-cta olarak yeniden adlandırıldı. ── */
    .closing-section {
      display: flex;
      align-items: center;
      min-height: 100vh;
      padding: var(--page-gutter);
      /* Opak beyaz: arkadaki sabit "# Bülten" reveal paneli, is-live örtüsü bu
         bölüm bitişinde kapanınca gutter'dan sızıyordu; beyaz zemin sızmayı kapatır
         (shell zaten beyaz → dikişsiz). Asıl footer reveal en altta korunuyor. */
      background: var(--brand-white);
    }
    .title-shell {
      width: 100%;
      min-height: calc(100vh - (var(--page-gutter) * 2));
      display: grid;
      align-content: center;
      gap: clamp(54px, 6vw, 96px);
      padding: clamp(54px, 6.5vw, 94px) var(--hero-content-x);
      border-radius: var(--radius-xlarge);
      background: var(--brand-white);
      color: var(--brand-navy);
    }
    .title-kicker {
      display: block;
      color: var(--brand-blue);
      font-size: 11px;
      font-weight: 600;
      line-height: 1;
      letter-spacing: 0.05em;
      text-transform: uppercase;
    }
    .title-grid {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(520px, 600px);
      grid-template-rows: auto auto;
      column-gap: clamp(28px, 4vw, 68px);
      row-gap: clamp(42px, 5vw, 78px);
      align-items: start;
    }
    .title-heading {
      grid-column: 1;
      max-width: 720px;
      margin: 0;
      color: var(--brand-navy);
      font-size: clamp(42px, 5vw, 64px);
      font-weight: 500;
      line-height: 1;
      letter-spacing: -3px;
    }
    .title-heading__accent { color: var(--brand-blue); }
    .title-visual-stage {
      grid-column: 2;
      justify-self: stretch;
      position: relative;
      min-height: clamp(210px, 18vw, 330px);
      border-radius: var(--radius-large);
    }
    .title-visual-card {
      position: absolute;
      top: 0;
      right: 0;
      z-index: 2;
      width: clamp(132px, 13vw, 190px);
      aspect-ratio: 1.42 / 1;
      overflow: hidden;
      border-radius: var(--radius-medium);
      background: rgba(0, 20, 66, 0.04);
      box-shadow: 0 22px 54px rgba(0, 20, 66, 0.10);
      transform-origin: top right;
      transition:
        transform 0.72s cubic-bezier(0.22, 1, 0.36, 1),
        border-radius 0.72s cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 0.72s cubic-bezier(0.22, 1, 0.36, 1);
      will-change: transform;
    }
    .title-visual-card img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: 50% 46%;
      pointer-events: none;
      -webkit-user-drag: none;
      transition: transform 0.72s cubic-bezier(0.22, 1, 0.36, 1);
      will-change: transform;
    }
    .title-visual-card:hover,
    .title-visual-card:focus-visible {
      border-radius: var(--radius-large);
      box-shadow: 0 34px 82px rgba(0, 20, 66, 0.16);
      transform: scale(1.5);
      outline: none;
    }
    .title-visual-card:hover img,
    .title-visual-card:focus-visible img { transform: scale(1.025); }
    .title-subline {
      grid-column: 1;
      align-self: end;
      margin: 0;
      color: rgba(0, 20, 66, 0.48);
      font-size: 22px;
      font-weight: 300;
      line-height: 1.4;
      letter-spacing: -0.5px;
      max-width: 440px;
    }
    .title-copy {
      grid-column: 2;
      display: grid;
      gap: 28px;
      align-self: end;
      max-width: 600px;
      color: rgba(0, 20, 66, 0.52);
    }
    .title-copy p {
      margin: 0;
      font-size: 20px;
      font-weight: 300;
      line-height: 1.6;
      letter-spacing: -0.5px;
    }
    .rejen-cta {
      display: inline-flex;
      align-items: center;
      justify-self: start;
      gap: 10px;
      width: fit-content;
      margin-top: 2px;
      color: var(--brand-navy);
      font-size: 15px;
      font-weight: 500;
      line-height: 1;
    }
    .rejen-cta svg {
      width: 14px;
      height: 14px;
      fill: currentColor;
      transition: transform 0.28s cubic-bezier(0.19, 1, 0.22, 1);
    }
    .rejen-cta__text { position: relative; }
    .rejen-cta__text::after {
      content: '';
      position: absolute;
      bottom: -4px;
      left: 0;
      width: 100%;
      height: 1px;
      background-color: currentColor;
      transform: scaleX(0);
      transform-origin: left;
      transition: transform 0.3s cubic-bezier(0.19, 1, 0.22, 1);
    }
    .rejen-cta:hover .rejen-cta__text::after,
    .rejen-cta:focus-visible .rejen-cta__text::after { transform: scaleX(1); }
    .rejen-cta:hover svg,
    .rejen-cta:focus-visible svg { transform: translateX(3px); }

    @media (max-width: 1024px) {
      .title-grid { grid-template-columns: minmax(0, 1fr) minmax(420px, 52vw); }
    }
    @media (max-width: 760px) {
      .closing-section { min-height: auto; }
      .title-shell { min-height: auto; gap: 34px; padding-top: 44px; padding-bottom: 52px; }
      .title-grid { display: flex; flex-direction: column; gap: 30px; }
      .title-heading { font-size: clamp(38px, 11vw, 52px); letter-spacing: -2.4px; }
      .title-visual-stage { order: 2; width: 100%; min-height: 230px; }
      .title-visual-card { width: min(100%, 390px); aspect-ratio: 1.48 / 1; transform: none; }
      .title-visual-card:hover, .title-visual-card:focus-visible { transform: none; }
      .title-subline { order: 3; font-size: 18px; }
      .title-copy { order: 4; max-width: none; }
    }

    /* ── Reveal footer: the whole page (content-inner) lifts near the bottom to
       reveal a fixed KuarkTek signature panel behind it. ─────────────────── */
    /* Sabit bülten panelinin görüneceği boşluk: content-wrapper'a margin-bottom
       DEĞİL (body'nin son in-flow çocuğunun alt marjı Safari'de scroll alanına
       katılmıyor, bülten mobilde erişilmez kalıyordu) → gerçek eleman. */
    body::after {
      content: "";
      display: block;
      /* svh: mobil adres cubugu vh'yi oynatinca bosluk payi da oynayip
         belge yuksekligini degistiriyordu (refresh gurultusu); svh sabit. */
      height: 50svh;
    }
    .content-wrapper {
      position: relative;
      z-index: 10;
      /* NOT: buraya `will-change: transform` veya transform VERİLMEZ — bu,
         içindeki AVANTAJLAR pinned bölümünün position:fixed pin'i için
         containing block oluşturup yatay scroll'u bozuyor. Blur-reveal
         kurgusunda içerik zaten dönüşüm almaz; will-change yalnız arka
         paneldedir ve onu da JS perde aralığında ekleyip söker. */
    }

    .content-inner {
      position: relative;
      z-index: 2;
      /* clip (hidden değil): reveal-footer köşelerini yine kırpar AMA içteki
         position:sticky elemanları BOZMAZ (hidden bozuyordu). */
      overflow: clip;
      background: transparent;           /* arka sabit scroll-anim videosu görünsün diye */
      /* Köşe yarıçapı STATİK: eskiden JS her scroll frame'inde border-radius
         yazıyordu → overflow:clip kırpma maskesi her karede yeniden hesaplanıp
         footer'ı repaint ediyordu (titremenin ana kaynağı). Yarıçap yalnız
         reveal bölgesinde görünür, o yüzden sabit olması görseli değiştirmez.
         27 Tem: kullanıcı isteğiyle 18/10'dan 28/16'ya büyütüldü. */
      border-radius: 0 0 28px 28px;
    }
    @media (max-width: 768px) {
      .content-inner { border-radius: 0 0 16px 16px; }
    }

    /* .footer-shadow: eski scale-perde kurgusunun kaldırdığı içerik altına
       düşen gölgeydi; 27 Tem 2026 blur-reveal geçişiyle (zeze referansı)
       kullanım dışı. Element Bricks footer şablonunda durduğu için şablon
       metasına dokunmadan CSS'ten kapatılır. Eski perde-kose kapakları da
       aynı geçişte kaldırıldı (JS artık üretmiyor); alt köşeleri
       .content-inner'ın statik border-radius kırpması yuvarlıyor. */
    .footer-shadow {
      display: none;
    }

    .reveal-section {
      position: fixed;
      left: 0;
      bottom: 0;
      z-index: 1;
      width: 100%;
      height: 50svh; /* body::after boslugu ile ayni birim (adres cubugu sabiti) */
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: clamp(40px, 7vh, 84px) var(--hero-content-x) clamp(24px, 4vh, 46px);
      background: linear-gradient(180deg, #ffffff 0%, #eef4fb 48%, #dfeaf7 100%);
    }

    .reveal-content {
      margin: 0 auto auto;                 /* top-anchored; logo pins to bottom */
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: clamp(14px, 2.4vh, 22px);
      max-width: 680px;
      text-align: center;
    }

    .reveal-kicker {
      display: block;
      color: var(--brand-blue);
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.16em;
      text-transform: uppercase;
    }

    .reveal-text {
      margin: 0;
      max-width: 680px;
      color: #0f1c3f;
      font-size: clamp(22px, 2.7vw, 34px);
      font-weight: 500;
      line-height: 1.15;
      letter-spacing: -0.02em;
    }

    .reveal-form {
      display: flex;
      align-items: stretch;
      gap: 8px;
      width: min(480px, 100%);
      margin-top: 6px;
      padding: 6px;
      border-radius: 999px;
      border: 1px solid rgba(15, 28, 63, 0.14);
      background: rgba(255, 255, 255, 0.7);
      -webkit-backdrop-filter: blur(10px);
      backdrop-filter: blur(10px);
      box-shadow: 0 10px 30px rgba(0, 20, 66, 0.08);
      transition: border-color 0.25s ease, box-shadow 0.25s ease;
    }

    .reveal-form:focus-within {
      border-color: rgba(1, 137, 212, 0.5);
      box-shadow: 0 12px 34px rgba(1, 137, 212, 0.18);
    }

    .reveal-input {
      flex: 1 1 auto;
      min-width: 0;
      padding: 0 18px;
      border: 0;
      background: transparent;
      color: #0f1c3f;
      font-size: 15px;
      font-weight: 500;
      letter-spacing: -0.1px;
    }

    .reveal-input::placeholder { color: rgba(15, 28, 63, 0.42); }
    .reveal-input:focus { outline: none; }

    .reveal-submit {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      flex: 0 0 auto;
      min-height: 44px;
      padding: 0 22px;
      border: 0;
      border-radius: 999px;
      background: var(--brand-navy);
      color: #fff;
      font-size: 14px;
      font-weight: 600;
      cursor: pointer;
      transition: background-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
    }

    .reveal-submit svg { width: 14px; height: 14px; fill: currentColor; transition: transform 0.3s cubic-bezier(0.19, 1, 0.22, 1); }

    .reveal-submit:hover,
    .reveal-submit:focus-visible {
      background: var(--brand-blue);
      transform: translateY(-1px);
      box-shadow: 0 14px 32px rgba(1, 137, 212, 0.32);
    }
    .reveal-submit:hover svg,
    .reveal-submit:focus-visible svg { transform: translateX(3px); }

    .reveal-note {
      margin: 2px 0 0;
      color: var(--brand-blue);
      font-size: 14px;
      font-weight: 600;
    }


    .reveal-logo-container {
      margin-top: auto;                    /* pin the logo to the bottom centre */
    }

    .reveal-logo {
      height: 44px;
      width: auto;
      object-fit: contain;
    }

    @media (max-width: 860px) {
      .reveal-section { height: 46vh; }
      .reveal-logo { height: 36px; }
    }

    @media (max-width: 860px) {
      .pinned-wrap { height: auto; padding: clamp(72px, 10vh, 104px) 0 60px; }
      .js-motion .pinned-viewport { overflow-x: auto; }
      .benefit-card { width: 76vw; }

      /* Let the hero headline wrap on phones (nowrap overflows the viewport). */
      .hero-title__line { white-space: normal; }
    }

    /* ===================================================================
       TYPE SYSTEM — one deliberate scale (kicker / title / body / card).
       Overrides the ad-hoc per-section values so nothing feels random.
       =================================================================== */

    /* Eyebrows / kickers on light sections — identical everywhere. */
    .section-kicker,
    .vision-kicker,
    .carousel-kicker {
      margin-bottom: 0;
      color: var(--brand-blue);
      font-size: 12px;
      font-weight: 600;
      line-height: 1;
      letter-spacing: 0.16em;
      text-transform: uppercase;
    }

    /* Section titles (H2) — one clamp, weight and tracking. */
    .vision-title,
    .products-title,
    .pinned-headline {
      font-weight: 500;
      line-height: 1.05;
      letter-spacing: -0.025em;
      font-size: clamp(34px, 4.2vw, 56px);
    }

    /* Large statement copy (vision lead) — consistent body-display size. */
    .vision-copy {
      font-size: clamp(16px, 1.4vw, 20px);   /* küçültüldü; sütun genişledi */
      font-weight: 400;
      line-height: 1.4;
      letter-spacing: -0.01em;
    }

    /* Card titles — consistent weight / tracking / rhythm. */
    .product-card__name,
    .benefit-card__title,
    .expertise-card__title {
      font-weight: 600;
      line-height: 1.14;
      letter-spacing: -0.02em;
    }

    /* Body copy in cards — one size. */
    .product-card__tag,
    .benefit-card__copy,
    .expertise-card__copy {
      letter-spacing: -0.01em;
    }

    /* ===================================================================
       WHITESPACE — more generous, deliberate vertical rhythm.
       =================================================================== */
    .expertise-section { padding-block: clamp(104px, 13vh, 176px); }
    .products-head { gap: 22px; margin-bottom: clamp(50px, 6vw, 88px); }
    .products-bento { gap: 16px; }
    .pinned-wrap { padding-top: clamp(112px, 15vh, 172px); }
    .pinned-head { gap: 20px; }
    .pinned-viewport { margin-top: clamp(44px, 6vh, 76px); }
    .vision-kicker { margin-bottom: 28px; }
    .expertise-bento { gap: 16px; }

    /* Keep the section copy above the "behind" layer, above the section bg. */
    .trust-inner,
    .products-inner {
      position: relative;
      z-index: 10;
    }

    /* ══ Hamburger + tam ekran mobil menü ══════════════════════════════════
       ≤1180px: 4 uzun menü başlığı yatayda sığmadığından desktop nav gizlenir,
       hamburger görünür. Menü sitenin açık zemin dilinde (#f5f8fc): gutter
       kadar içeri alınmış, radius-xlarge köşeli tam ekran panel. Açılış/kapanış
       hamburger'den büyüyen daire (clip-path, GSAP) ile; GSAP yoksa CSS fade. */

    .header-burger {
      display: none;
      align-items: center;
      justify-content: center;
      width: 44px;
      height: 44px;
      padding: 0;
      border: 0;
      border-radius: 50%;
      background: transparent;
      cursor: pointer;
      -webkit-tap-highlight-color: transparent;
    }
    .header-burger__box {
      position: relative;
      display: block;
      width: 22px;
      height: 14px;
    }
    .header-burger__box span {
      position: absolute;
      left: 0;
      width: 100%;
      height: 2px;
      border-radius: 2px;
      background: var(--brand-white);
      transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), top 0.35s ease, background-color 0.3s ease;
    }
    .header-burger__box span:first-child { top: 0; }
    .header-burger__box span:last-child { top: 12px; }
    .site-header.is-scrolled .header-burger__box span { background: var(--brand-navy); }
    .header-burger.is-open .header-burger__box span:first-child { top: 6px; transform: rotate(45deg); }
    .header-burger.is-open .header-burger__box span:last-child { top: 6px; transform: rotate(-45deg); }

    @media (max-width: 1180px) {
      .header-nav { display: none; }
      .header-burger { display: inline-flex; }
      /* Orta sütun (nav) boşaldı: logo + aksiyonlar iki sütuna otursun. */
      .site-header { grid-template-columns: 1fr auto; }
      /* Dil değişimi mobil menünün alt satırında yaşıyor. */
      .header-actions .header-lang { display: none; }
    }
    @media (max-width: 860px) {
      /* Telefon/tablet header'ı sade: logo + hamburger. CTA menü altında. */
      .header-actions .header-contact { display: none; }
    }

    .mobile-menu {
      position: fixed;
      inset: 0;
      z-index: 90;
      visibility: hidden;
      pointer-events: none;
    }
    /* En arka katman saydam DEĞİL: panelin çevresindeki gutter'dan sayfa
       görünmesin — beyaz örtü, panel dairesiyle birlikte yumuşakça gelir. */
    .mobile-menu::before {
      content: "";
      position: absolute;
      inset: 0;
      background: #ffffff;
      opacity: 0;
      transition: opacity 0.3s ease;
    }
    .mobile-menu.is-open {
      visibility: visible;
      pointer-events: auto;
    }
    .mobile-menu.is-open::before { opacity: 1; }
    body.mobile-menu-open { overflow: hidden; }

    .mobile-menu__panel {
      position: absolute;
      inset: var(--page-gutter);
      display: flex;
      flex-direction: column;
      padding: clamp(18px, 2.6vh, 30px) clamp(22px, 6vw, 45px) clamp(16px, 2.4vh, 26px);
      overflow-y: auto;
      overscroll-behavior: contain;
      -webkit-overflow-scrolling: touch;
      border-radius: var(--radius-xlarge);
      background:
        radial-gradient(120% 80% at 88% -6%, rgba(1, 137, 212, 0.12), transparent 55%),
        radial-gradient(90% 60% at -8% 108%, rgba(1, 137, 212, 0.07), transparent 55%),
        var(--surface-paper);
      color: var(--brand-navy);
      opacity: 0;
      transform: translateY(12px);
      transition: opacity 0.4s ease, transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
    }
    .mobile-menu.is-open .mobile-menu__panel { opacity: 1; transform: translateY(0); }
    /* GSAP devredeyken CSS geçişini kapat — opacity/clip-path'i JS sürer. */
    .mobile-menu.gsap-anim .mobile-menu__panel { transition: none; transform: none; }

    .mobile-menu__top {
      display: flex;
      align-items: center;
      margin-bottom: clamp(24px, 4.6vh, 46px);
    }
    .mobile-menu__logo { width: 200px; height: auto; }

    /* Kapat butonu: hamburger ile AYNI viewport noktasında (JS her açılışta
       burger'in ölçüsüne hizalar; aşağıdaki değerler no-JS fallback). Panelin
       değil overlay kökünün çocuğu → panel scroll'u ile kaymaz. */
    .mobile-menu__close {
      position: absolute;
      z-index: 3;
      top: 44px;
      right: calc(var(--hero-content-x) - var(--page-gutter));
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 44px;
      height: 44px;
      padding: 0;
      border: 0;
      border-radius: 50%;
      background: #ffffff;
      color: var(--brand-navy);
      box-shadow: 0 10px 30px rgba(0, 20, 66, 0.12);
      cursor: pointer;
      transition: background-color 0.3s ease, transform 0.3s ease;
      -webkit-tap-highlight-color: transparent;
    }
    .mobile-menu__close:hover,
    .mobile-menu__close:focus-visible { background: var(--brand-ice); transform: rotate(90deg); }
    .mobile-menu__close svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }

    .mobile-menu__group { border-bottom: 1px solid var(--surface-line); }
    .mobile-menu__trigger {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      width: 100%;
      padding: clamp(17px, 2.9vh, 25px) 0;
      border: 0;
      background: transparent;
      color: var(--brand-navy);
      font-family: var(--font-primary);
      font-size: clamp(20px, 4.8vw, 25px);
      font-weight: 500;
      line-height: 1.05;
      letter-spacing: -0.4px;
      text-align: left;
      cursor: pointer;
      -webkit-tap-highlight-color: transparent;
    }
    .mobile-menu__chevron {
      flex: 0 0 auto;
      width: 20px;
      height: 20px;
      fill: rgba(0, 20, 66, 0.38);
      transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), fill 0.3s ease;
    }
    .mobile-menu__group.is-open .mobile-menu__chevron { transform: rotate(-180deg); fill: var(--brand-blue); }

    /* Akordeon: grid-template-rows 0fr→1fr — yükseklik ölçümü olmadan akıcı. */
    .mobile-menu__drawer {
      display: grid;
      grid-template-rows: 0fr;
      transition: grid-template-rows 0.45s cubic-bezier(0.4, 0, 0.2, 1);
    }
    .mobile-menu__group.is-open .mobile-menu__drawer { grid-template-rows: 1fr; }
    .mobile-menu__list {
      min-height: 0;
      margin: 0;
      padding: 0;
      overflow: hidden;
      list-style: none;
    }
    .mobile-menu__list li:last-child { padding-bottom: 28px; }
    .mobile-menu__link {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      padding: 10px 0;
      color: rgba(0, 20, 66, 0.62);
      font-size: 15px;
      font-weight: 400;
      text-decoration: none;
      transition: color 0.25s ease, transform 0.3s ease;
    }
    .mobile-menu__link:hover,
    .mobile-menu__link:focus-visible { color: var(--brand-navy); transform: translateX(4px); }

    /* Marka altındaki ürünler (desktop mega menü paritesi): akordeon açılınca
       doğrudan görünür, girintili alt liste. */
    .mobile-menu__sublist {
      margin: 0;
      padding: 0 0 4px 18px;
      list-style: none;
      border-left: 1px solid rgba(0, 20, 66, 0.12);
    }
    .mobile-menu__sublist li:last-child { padding-bottom: 4px; }
    .mobile-menu__link--sub {
      padding: 7px 0;
      color: rgba(0, 20, 66, 0.52);
      font-size: 14px;
    }

    /* Alt blok: üst menüde olmayanlar — e-posta, sosyal medya, dil + CTA,
       yasal linkler (footer ile aynı hedefler). */
    .mobile-menu__footer {
      display: grid;
      gap: 20px;
      margin-top: auto;
      padding-top: clamp(28px, 5vh, 52px);
    }
    .mobile-menu__meta-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
    }
    .mobile-menu__social { display: flex; gap: 10px; }
    /* Footer'daki .footer-social__link ile aynı oran: 42px daire, 18px ikon. */
    .mobile-menu__social a {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 42px;
      height: 42px;
      border: 1px solid rgba(0, 20, 66, 0.16);
      border-radius: 50%;
      color: rgba(0, 20, 66, 0.72);
      transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
    }
    .mobile-menu__social a:hover,
    .mobile-menu__social a:focus-visible { background: #ffffff; border-color: rgba(0, 20, 66, 0.34); color: var(--brand-navy); }
    .mobile-menu__social svg { width: 18px; height: 18px; fill: currentColor; }
    .mobile-menu__lang {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 12px 18px;
      border: 1px solid rgba(0, 20, 66, 0.22);
      border-radius: 999px;
      color: rgba(0, 20, 66, 0.75);
      font-size: 13px;
      font-weight: 600;
      letter-spacing: 0.04em;
      text-decoration: none;
    }
    .mobile-menu__lang svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
    /* "Bize Ulaşın": buton değil, nav'ın son maddesi (akordeon oku yerine
       köşegen CTA oku). */
    .mobile-menu__trigger--link { text-decoration: none; }
    .mobile-menu__arrow {
      flex: 0 0 auto;
      width: 17px;
      height: 17px;
      fill: var(--brand-blue);
      transition: transform 0.3s ease;
    }
    .mobile-menu__trigger--link:hover .mobile-menu__arrow,
    .mobile-menu__trigger--link:focus-visible .mobile-menu__arrow { transform: translate(3px, -3px); }

    /* Dokunmatikte tıklama sonrası yapışan tarayıcı odak halkasını gizle;
       klavye kullanıcıları için :focus-visible halkası korunur. */
    .header-burger:focus,
    .mobile-menu__trigger:focus,
    .mobile-menu__link:focus,
    .mobile-menu__close:focus,
    .mobile-menu__lang:focus,
    .mobile-menu__social a:focus { outline: none; }
    .header-burger:focus-visible,
    .mobile-menu__trigger:focus-visible,
    .mobile-menu__link:focus-visible,
    .mobile-menu__close:focus-visible,
    .mobile-menu__lang:focus-visible,
    .mobile-menu__social a:focus-visible {
      outline: 2px solid var(--brand-blue);
      outline-offset: 3px;
      border-radius: 6px;
    }
    .mobile-menu__close:focus-visible,
    .mobile-menu__lang:focus-visible,
    .mobile-menu__social a:focus-visible,
    .header-burger:focus-visible { border-radius: 999px; }
    .mobile-menu__link,
    .mobile-menu__lang,
    .mobile-menu__social a { -webkit-tap-highlight-color: transparent; }

    @media (prefers-reduced-motion: reduce) {
      .mobile-menu__panel { transition: none; transform: none; }
      .mobile-menu__drawer { transition: none; }
    }

    /* ══ Mobil sayfa düzeltmeleri (≤860px) ══════════════════════════════ */
    @media (max-width: 860px) {
      /* Scroll-scrub podyum sahnesi desktop deneyimi: mobilde ürünler statik
         grid'de. Katman kapalı (JS kare setini de indirmez) → partners bölümü
         temiz zeminde okunur, arkada yarım podyum görünmez. */
      .scroll-anim-bg { display: none; }

      /* Tanıtım Videosu: alttan konumlanınca uzun içerik sütunuyla (subline +
         CTA'lar) çakışıyordu → sağ üstte kompakt yüzen play butonu. */
      .gallery-button { top: 104px; right: 20px; bottom: auto; min-height: 0; gap: 0; }
      .gallery-button__text { display: none; }
      .gallery-button__play { width: 58px; height: 58px; }
      .gallery-button__play svg { width: 18px; height: 18px; }

      .hero-eyebrow { font-size: 11px; letter-spacing: 0.15em; }

      /* Footer: mobilde dev dikey boşlukları hafif toparla. */
      .footer-cta { padding-bottom: 34px; }
      .footer-shell { min-height: auto; }
    }

    @media (max-width: 560px) {
      /* Bize Ulaşın ≤860'ta gizli (menüde yaşıyor) → logo ferah kalabilir. */
      .header-logo { width: 200px; }
      .header-actions { gap: 12px; }
    }

    /* rg sayfalarındaki sabit alt CTA barı, açık mobil menünün üstünde
       kalmasın (bar z:120, menü z:90 — bar sayfa inline CSS'inde). */
    body.mobile-menu-open .rg-bar {
      opacity: 0;
      visibility: hidden;
      transition: opacity 0.25s ease, visibility 0s 0.25s;
    }

    /* ══ Mobil tipografi ölçeği + dikey ritim (≤860px) ══════════════════════
       Denetim bulgusu: kicker 11/12px karışık, bölüm başlıkları 31–45px
       savruk, gövde 14–20px arası 6 farklı boy. Tek ölçek:
       kicker 12 · bölüm başlığı clamp(34–40) · kart başlığı 22–24 ·
       gövde 16 · ikincil gövde 15. Dosyanın SONUNDA olduğundan eşit
       özgüllükte önceki dağınık değerleri ezer. */
    @media (max-width: 860px) {
      .hero-eyebrow,
      .vision-kicker,
      .products-mobile__kicker,
      .expertise-kicker,
      .section-kicker,
      .title-kicker,
      .footer-kicker,
      .partners-eyebrow { font-size: 12px; }

      .vision-title,
      .products-mobile__title,
      .expertise-title,
      .pinned-headline,
      .title-heading,
      .footer-title {
        font-size: clamp(34px, 4.6vw, 40px);
        line-height: 1.06;
        letter-spacing: -1.4px;
      }

      .expertise-card__title,
      .expertise-card--primary .expertise-card__title { font-size: 24px; }
      .expertise-card:not(.expertise-card--primary) .expertise-card__title { font-size: 22px; }
      .benefit-card__title { font-size: 22px; }
      .pm-card__name { font-size: 18px; }

      .expertise-card__copy,
      .benefit-card__copy,
      .footer-copy,
      .title-copy p { font-size: 16px; line-height: 1.55; }
      .title-subline { font-size: 17px; }
      .pm-card__desc,
      .expertise-cta__copy,
      .metric-label { font-size: 15px; }

      /* Dikey ritim: her ana bölüme tutarlı nefes payı. */
      .vision-panel { padding-top: 64px; padding-bottom: 72px; }
      .partners-section { padding-top: 76px; padding-bottom: 96px; }
      .products-section { padding-top: 96px; padding-bottom: 96px; }
      .expertise-shell { padding-top: 72px; padding-bottom: 80px; }
      .pinned-wrap { padding-bottom: 88px; }
      .title-shell { padding-top: 72px; padding-bottom: 80px; gap: 44px; }
      .footer-shell { padding-top: 84px; }

      .products-mobile__head { margin-bottom: 40px; }
      .products-mobile__grid { gap: 20px; }
      .expertise-bento { gap: 14px; }
      .expertise-cta { margin-top: 40px; }
      .vision-bottom { margin-top: 88px; }
      .metrics-grid { gap: 18px; padding: 36px 32px; }
      .footer-cta { padding-bottom: 48px; }
      .footer-bottom { gap: 44px; }
    }


    /* ══ Mobil düzeltmeler — 2. tur ══════════════════════════════════════ */
    .hscroll-nav { display: none; }

    @media (max-width: 860px) {
      /* Vision: önce metin, altında boşluk, metrikler en altta. */
      .vision-main { order: -1; }
      .vision-copy { margin-bottom: 36px; }

      /* Tanıtım videosu: header altı yerine sağ-altta, slider'ın üstünde. */
      .gallery-button { top: auto; bottom: 112px; right: 20px; }

      /* Süreç kartları: dikey yığın yerine Avantajlar gibi yatay carousel.
         Kart içi: index üstte, içerik alta itilir (büyük nefes payı). */
      .expertise-bento {
        display: flex;
        gap: 10px;                      /* benefit track ile aynı */
        /* Tam viewport'a taşır: kart kesimi Avantajlar'daki gibi EKRAN
           kenarında olur. Taban kuralın width: min(1440px,100%) kutusu
           negatif margin'i etkisizleştiriyordu → 100vw + center. */
        width: 100vw;
        align-self: center;
        margin-inline: 0;
        padding-inline: var(--hero-content-x);
        /* Snap noktaları padding'e göre: dinlenme scrollLeft'i 0 → sol ok
           pasif başlar, ilk karttayken sağa "esneyip geri oturma" olmaz. */
        scroll-padding-inline: var(--hero-content-x);
        min-height: 0;                  /* taban 62vh min-height'ı kart boyunu aşıyordu */
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
      }
      .expertise-bento::-webkit-scrollbar { display: none; }
      .expertise-card {
        display: flex;
        flex-direction: column;
        /* Avantajlar (benefit-card) ile birebir aynı ölçü: 2. kartın bir
           kısmı görünür (peek), yükseklik/oran eş. */
        flex: 0 0 clamp(288px, 30vw, 400px);
        height: min(56vh, 520px);
        min-height: 0;
        scroll-snap-align: start;
      }
      .expertise-card__index { margin-bottom: 48px; }
      .expertise-card__content { margin-top: auto; }

      /* Carousel okları (Süreç + Avantajlar) — kartların altında, sağda. */
      .hscroll-nav {
        display: flex;
        justify-content: flex-start;
        gap: 10px;
        margin-top: 24px;
      }
      /* Süreç: shell flex-column gap'i (clamp) araya girer — Avantajlar'daki
         24px'e eşitlemek için gap'i negatif marginle geri al. */
      .expertise-shell .hscroll-nav {
        margin-top: calc(24px - clamp(28px, 4vh, 56px));
      }
      .hscroll-nav .slider-button { width: 48px; height: 48px; }
      .hscroll-nav .slider-button:disabled { opacity: 0.35; pointer-events: none; }
      /* Avantajlar açık zeminde: cam yerine lacivert tonlu buton. */
      .pinned-section .hscroll-nav { padding-inline: var(--hero-content-x); }
      .pinned-section .hscroll-nav .slider-button {
        background: rgba(0, 20, 66, 0.07);
        color: var(--brand-navy);
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
      }
    }

    /* Menü X'inin hero-hali hizalaması ölçülürken (site.js heroStateBurgerPos)
       logo genişliği gibi çocuk geçişleri anlık dönsün diye tümü kapatılır. */
    .site-header.measuring,
    .site-header.measuring * { transition: none !important; }

    /* ══ Mobil hero düzenlemesi — 3. tur ═════════════════════════════════
       Kompozisyon: içerik ortada değil ALTA yakın; okunabilirlik için scrim
       alt bandı güçlendirildi; ikincil CTA ve play butonu mobilde yok. */
    @media (max-width: 860px) {
      /* Scrim: alt bant belirgin koyulaştı (başlık/metin artık altta),
         üst bant header için korunur, portrenin yüzü (üst-sağ) açık kalır. */
      .hero-scrim {
        background:
          linear-gradient(180deg, rgba(0, 10, 32, 0.62) 0%, rgba(0, 10, 32, 0.12) 22%, rgba(0, 8, 26, 0.30) 46%, rgba(0, 6, 22, 0.74) 72%, rgba(0, 5, 18, 0.92) 100%),
          radial-gradient(130% 110% at 68% 34%, transparent 30%, rgba(0, 6, 20, 0.52) 100%);
      }

      /* İçerik alta yaslı; slider (alt 24px) + marka etiketlerine yer bırakır. */
      .hero-content {
        justify-content: flex-end;
        padding-bottom: 206px;   /* brand-tags (~bottom 96 + iki satır) + slider */
      }

      /* Başlık: iki slayt da AYNI ölçekte (is-compact ile eş) — slayt 1'in
         dev boyutu slayt 2 ile uyumsuzdu. Gölge yok; okunurluğu scrim taşır. */
      .hero-title,
      .hero-title.is-compact {
        font-size: clamp(30px, 9vw, 46px);
        letter-spacing: -1.6px;
        text-shadow: none;
      }

      /* Sadelik: ikincil CTA ve tanıtım videosu butonu mobilde yok. */
      .hero-cta-secondary { display: none; }
      .gallery-button { display: none; }
    }
    @media (max-width: 560px) {
      /* DİKEY TELEFON HERO DÜZENİ (27 Tem 2026, kullanıcı onaylı):
         ortalama kısa ekranda metni portrenin yüzüne ve logoya bindiriyordu
         (iPhone 13 canlı SS + iPhone 4 simülasyonu). İçerik ALTA yaslanır
         (yatay telefonla aynı dil), üstte portreye clamp'li pay açılır;
         taban 160px header'ı her koşulda temizler. Hero 100svh'ye sığmak
         zorunda değil: min-height korunur, içerik uzunsa bölüm aşağı uzar
         (hero-section min-height + overflow:hidden büyümeye izin verir,
         kontroller absolute bottom olduğundan yerinde kalır).
         Marka etiketleri bu genişlikte gizli → içerik daha da aşağı inebilir.
         Yatay telefon kuralı (custom.css, max-height 500) sonra yüklendiği
         için o senaryoda kazanmaya devam eder. */
      .hero-content {
        justify-content: flex-end;
        padding-top: clamp(160px, 36svh, 340px);
        padding-bottom: 118px;
      }
    }

    /* ══ Preloader (yalnız index) ═══════════════════════════════════════
       Referans dil: koyu zeminde ortada wordmark — harfler satır maskesinden
       sırayla yükselir; merkezde rastgele açılarla üst üste binen görsel
       destesi; sağ üstte 000→100 sayaç. Çıkış: harfler yukarı süpürülür,
       deste kapanır, perde (panel) yukarı kalkar. Yalnız html.js-motion
       varken görünür → no-JS ve reduced-motion kullanıcıları hiç görmez. */
    .preloader { display: none; }
    html.js-motion .preloader {
      display: flex;
      align-items: center;
      justify-content: center;
      position: fixed;
      inset: 0;
      z-index: 200;
      background:
        radial-gradient(120% 90% at 78% -10%, rgba(1, 137, 212, 0.16), transparent 55%),
        #02081a;
      color: var(--brand-ice);
    }
    html.is-preloading { overflow: hidden; }

    .preloader__stage { position: relative; }
    .preloader__word {
      display: flex;
      overflow: hidden;              /* satır maskesi: harfler alttan doğar */
      padding: 0.08em 0;
      font-size: clamp(44px, 11vw, 168px);
      font-weight: 600;
      line-height: 1;
      letter-spacing: -0.035em;
      /* Referanstaki gibi: wordmark deste GÖRSELLERİNİN ÜSTÜNDE durur ve
         difference ile karışır — koyu zeminde beyaz kalır, açık kartların
         üstünde negatife döner. z-index desteyi altta bırakır. */
      position: relative;
      z-index: 2;
      mix-blend-mode: difference;
    }
    .preloader__letter {
      display: inline-block;
      transform: translateY(118%);   /* GSAP gelene dek gizli (statik faz) */
    }
    /* Logonun gerçek yazı kesimi — eski Outfit harf dizisinin optik
       genişliğiyle eşleşir (8 harf × ~11vw). Yükseklik orandan gelir. */
    .preloader__wordmark {
      width: clamp(240px, 58vw, 900px);
      height: auto;
    }
    .preloader__count {
      position: absolute;
      top: -0.5em;
      right: 0;
      color: var(--brand-cyan);
      font-size: clamp(13px, 1.4vw, 17px);
      font-weight: 600;
      letter-spacing: 0.12em;
      font-variant-numeric: tabular-nums;
    }
    .preloader__deck {
      position: absolute;
      top: 50%;
      left: 50%;
      z-index: 1;                    /* wordmark (z:2, difference) üstte kalır */
      width: min(240px, 34vw);
      aspect-ratio: 3 / 4;
      transform: translate(-50%, -54%);
      pointer-events: none;
    }
    .preloader__deck img {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      border-radius: 10px;
      box-shadow: 0 24px 70px rgba(0, 0, 0, 0.5);
      opacity: 0;                    /* GSAP sırayla açar */
    }
    @media (max-width: 560px) {
      /* Telefonda wordmark küçük — deste onu tamamen örtmesin. */
      .preloader__deck { width: min(150px, 40vw); }
      .preloader__count { top: -1.6em; }
    }


    /* Geniş desktop (≥1600px): vision metni 24px tavanında küçük kalıyordu —
       MacBook (~1450px) hali korunur, büyük ekranda vw ile ölçeklenir. */
    @media (min-width: 1600px) {
      .vision-bottom {
        /* Sağ sütun (copy) 520px'te kapanıyordu — font büyüyünce dar kaldı. */
        grid-template-columns: minmax(600px, 720px) minmax(480px, 660px);
      }
      .vision-copy {
        max-width: 660px;
        font-size: clamp(24px, 1.55vw, 32px);
        line-height: 1.3;
      }
    }

    /* ══ Partners callout'ları (sofi-referanslı yerleşim) ═══════════════════
       Sol-üst ve sağ-alt köşe blokları: glif → ucu noktalı hairline → büyük
       lowercase başlık → kısa metin. Ortada scroll-scrub sahnesi oynar. */
    .partners-callout {
      position: relative;
      display: grid;
      justify-items: start;
      gap: 20px;
      max-width: 620px;
    }
    .partners-callout__glyph {
      display: inline-flex;
      color: var(--brand-navy);
    }
    .partners-callout__glyph svg { width: 26px; height: 26px; }
    .partners-callout__rule {
      position: relative;
      width: min(46vw, 700px);
      height: 1px;
      background: rgba(0, 20, 66, 0.30);
    }
    .partners-callout__rule::after {
      content: "";
      position: absolute;
      top: 50%;
      width: 5px;
      height: 5px;
      border-radius: 50%;
      background: var(--brand-navy);
      transform: translateY(-50%);
    }
    /* start: çizgi bloktan sağa uzar, nokta SAĞ uçta */
    .partners-callout--start .partners-callout__rule::after { right: 0; }
    /* end: nokta SOL uçta, çizgi sağa (kenara) doğru uzar */
    .partners-callout--end .partners-callout__rule::after { left: 0; }
    .partners-callout__title {
      margin: 0;
      color: var(--brand-navy);
      font-size: clamp(30px, 2.6vw, 48px);
      font-weight: 500;
      line-height: 1.06;
      letter-spacing: -1.2px;
    }
    .partners-callout__title span { color: var(--brand-blue); }
    .partners-callout__copy {
      margin: 0;
      max-width: 400px;
      color: rgba(0, 20, 66, 0.58);
      font-size: 15px;
      line-height: 1.55;
    }
    .partners-callout__link {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      margin-top: 2px;
      color: var(--brand-navy);
      font-size: 15px;
      font-weight: 600;
      text-decoration: none;
      transition: color 0.25s ease;
    }
    /* Alt çizgi statik değil — sitedeki diğer metin butonları (rejen-cta,
       footer-primary) gibi hover'da soldan büyüyerek çizilir. */
    .partners-callout__link > span { position: relative; padding-bottom: 3px; }
    .partners-callout__link > span::after {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      height: 1px;
      background: currentColor;
      transform: scaleX(0);
      transform-origin: left center;
      transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    }
    .partners-callout__link:hover,
    .partners-callout__link:focus-visible { color: var(--brand-blue); }
    .partners-callout__link:hover > span::after,
    .partners-callout__link:focus-visible > span::after { transform: scaleX(1); }
    .partners-callout__link svg { width: 13px; height: 13px; fill: currentColor; }

    /* Sağ-alt blok: bölümün altına ve sağına yaslanır. Referanstaki gibi
       glif + başlık + metin çizginin solundan değil İÇERDEN başlar; yalnız
       çizgi (rule) sola, noktalı başlangıcına kadar uzanır. */
    .partners-callout--end .partners-callout__glyph,
    .partners-callout--end .partners-callout__title,
    .partners-callout--end .partners-callout__copy,
    .partners-callout--end .partners-callout__link {
      margin-left: clamp(28px, 9vw, 190px);
    }
    .partners-callout--end {
      align-self: flex-end;
      /* Not: fazla aşağı inerse scrub sonunda podyum ürünlerinin üstüne
         biner (eski notun da bilinen sınırı) — üst bantta kalsın. */
      margin-top: clamp(180px, 24vh, 300px);
    }

    @media (max-width: 860px) {
      .partners-callout__rule { width: min(72vw, 420px); }
      .partners-callout__title { font-size: clamp(28px, 7.4vw, 38px); }
      .partners-callout--end { align-self: flex-start; margin-top: 88px; }
    }


    /* ══ Scroll runway (segment 3: podyum inişi + finali) ═══════════════════
       Görünmez scroll payı; yüksekliği klip 3+4'ün oynatma süresini belirler
       (fine-tuning düğmesi). Mobilde sahne kapalı → payı da kaldır. */
    .scroll-runway { height: 150vh; pointer-events: none; }
    @media (max-width: 860px) {
      .scroll-runway { display: none; }
    }

    /* Hero ↔ vision arasına ek nefes payı (kullanıcı isteği: +90px).
       Mobil ritmi ayrıca ayarlandığından yalnız desktop. */
    @media (min-width: 861px) {
      .vision-section { margin-top: 90px; }
    }

    /* ══ Vision: metrik ↔ metin takası (desktop) ════════════════════════════
       Metin SOL-ALTA (videonun sakin duvar bölgesi — helix ile çakışmaz),
       buzlu cam metrik kartı SAĞA (helix camın arkasından buğulu geçer).
       Mobil tek kolon düzeni değişmez (orada sahne zaten kapalı). */
    @media (min-width: 861px) {
      .vision-bottom {
        /* sol = copy (dar), sağ = metrikler (geniş) */
        grid-template-columns: minmax(420px, 560px) minmax(560px, 680px);
      }
      .vision-main { order: 1; padding-top: 300px; }  /* copy alta — eski metrik hizası */
      .vision-aside { order: 2; padding-top: 40px; }  /* metrikler üste-sağa — eski copy hizası */

      .metrics-grid {
        background: rgba(255, 255, 255, 0.6);
        -webkit-backdrop-filter: blur(9px) saturate(120%);
        backdrop-filter: blur(9px) saturate(120%);
        border-color: rgba(255, 255, 255, 0.55);
      }
    }
    @media (min-width: 1600px) {
      .vision-bottom {
        grid-template-columns: minmax(480px, 660px) minmax(600px, 720px);
      }
    }

    /* ══ Mobil dikey ritim ince ayarı (2026-07-11) ═══════════════════════════
       Ölçüm tabanlı: bölüm nefes payları 64-96px bandına çekildi (mobil tip
       ölçeği kuralı), footer marka→sosyal arası desktop'a göre kısaldı,
       metrik kartı dikeyde sıkılaştı. */
    @media (max-width: 860px) {
      .expertise-section { padding-top: 64px; padding-bottom: 64px; }
      .pinned-wrap { padding-top: 88px; }
      .footer-social { margin-top: 56px; }
      .metrics-grid { padding: 28px 30px; }
      .metric-card { min-height: 104px; }
    }