:root {
      --bg: #070707;
      --paper: #070707;
      --ink: #f5f5f2;
      --muted: rgba(245,245,242,.58);
      --line: rgba(255,255,255,.15);
      --soft: #111111;
      --radius: clamp(18px, 1.45vw, 28px);
      --ease: cubic-bezier(.16,1,.3,1);
      --ease-soft: cubic-bezier(.22,.75,.18,1);
      --font:
        -apple-system,
        BlinkMacSystemFont,
        "SF Pro Display",
        "SF Pro Text",
        "Helvetica Neue",
        Helvetica,
        Arial,
        "Segoe UI",
        sans-serif;
    }

    * { box-sizing: border-box; }

    html {
      width: 100%;
      max-width: 100%;
      min-width: 320px;
      background: #070707;
      overflow-x: clip;
    }

    body {
      margin: 0;
      width: 100%;
      min-width: 320px;
      min-height: 100svh;
      overflow-x: clip;
      background: #070707;
      color: var(--ink);
      font-family: var(--font);
      -webkit-font-smoothing: antialiased;
      text-rendering: optimizeLegibility;
    }

    a,
    button { font: inherit; }

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

    button {
      border: 0;
      padding: 0;
    }

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

    /* =========================================================
       MAIN COMPOSITION
       Desktop: tek bakışta okunabilir.
       Mobile: görsel ve içerik ayrı akışta, crop zorlaması yok.
       ========================================================= */

    .page {
      min-height: 100svh;
      display: grid;
      place-items: center;
      padding:
        max(22px, env(safe-area-inset-top))
        max(22px, env(safe-area-inset-right))
        max(22px, env(safe-area-inset-bottom))
        max(22px, env(safe-area-inset-left));
      background: var(--bg);
    }

    .about-shell {
      width: min(100%, 1500px);
      min-height: min(82svh, 860px);
      margin-inline: auto;
      display: grid;
      grid-template-columns: minmax(340px, .72fr) minmax(0, 1.28fr);
      align-items: center;
      gap: clamp(42px, 5vw, 84px);
      overflow: visible;
      border: 0;
      border-radius: 0;
      background: transparent;
    }

    /* =========================================================
       PORTRAIT
       ========================================================= */

    .portrait-column {
      position: relative;
      width: min(100%, 520px);
      aspect-ratio: 4 / 5;
      min-width: 0;
      min-height: 0;
      justify-self: end;
      overflow: hidden;
      border-radius: var(--radius);
      background: #111;
      clip-path: inset(0 0 100% 0 round var(--radius));
      animation: image-mask-in 1050ms var(--ease) 70ms forwards;
    }

    .portrait-column::after {
      content: "";
      position: absolute;
      inset: 0;
      z-index: 2;
      pointer-events: none;
      border-radius: inherit;
      box-shadow: inset 0 0 0 1px rgba(255,255,255,.10);
    }

    .portrait {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: 50% 24%;
      transform:
        translate3d(
          var(--portrait-x, 0px),
          var(--portrait-y, 0px),
          0
        )
        scale(1.055);
      filter: saturate(.9) contrast(1.02);
      opacity: 0;
      animation: portrait-in 1200ms var(--ease) 130ms forwards;
      will-change: transform;
      backface-visibility: hidden;
    }
/* =========================================================
       CONTENT
       ========================================================= */

    .content {
      min-width: 0;
      width: min(100%, 760px);
      display: flex;
      flex-direction: column;
      justify-content: center;
      padding: 0;
    }
.title {
      margin: 0;
      max-width: 930px;
      font-size: clamp(44px, 5vw, 92px);
      font-weight: 680;
      line-height: .92;
      letter-spacing: -.064em;
      text-wrap: balance;
    }

    .line {
      display: block;
      overflow: hidden;
      padding-bottom: .065em;
    }

    .line > span {
      display: block;
      opacity: 0;
      transform: translate3d(0, 108%, 0);
      animation: line-in 920ms var(--ease) forwards;
      will-change: transform, opacity;
    }

    .line:nth-child(1) > span { animation-delay: 240ms; }
    .line:nth-child(2) > span { animation-delay: 350ms; }

    .summary {
      width: min(650px, 100%);
      margin: clamp(22px, 2.5vw, 34px) 0 0;
      color: rgba(245,245,242,.72);
      font-size: clamp(15px, 1.18vw, 18px);
      line-height: 1.54;
      letter-spacing: -.024em;
      opacity: 0;
      transform: translateY(12px);
      animation: fade-up 680ms var(--ease) 510ms forwards;
    }

    .summary strong {
      color: var(--ink);
      font-weight: 670;
    }

    /* =========================================================
       QUICK PROOF
       Recruiter scan: 4 sayı, tek satır.
       ========================================================= */

    .proof {
      display: grid;
      grid-template-columns: repeat(4, minmax(0,1fr));
      margin-top: clamp(28px, 3.5vw, 50px);
      border-top: 1px solid var(--line);
      border-bottom: 1px solid var(--line);
      opacity: 0;
      transform: translateY(12px);
      animation: fade-up 680ms var(--ease) 640ms forwards;
    }

    .proof-item {
      min-width: 0;
      padding: clamp(16px, 1.6vw, 24px) clamp(10px, 1.4vw, 18px);
    }

    .proof-item:first-child { padding-left: 0; }

    .proof-item + .proof-item {
      border-left: 1px solid var(--line);
    }

    .proof-value {
      display: block;
      font-size: clamp(30px, 2.8vw, 50px);
      font-weight: 710;
      line-height: .9;
      letter-spacing: -.058em;
    }

    .proof-label {
      display: block;
      max-width: 135px;
      margin-top: 8px;
      color: var(--muted);
      font-size: 10px;
      font-weight: 590;
      line-height: 1.3;
    }

    /* =========================================================
       TOOLS
       ========================================================= */

    .tools {
      margin-top: clamp(26px, 3.2vw, 44px);
      opacity: 0;
      transform: translateY(12px);
      animation: fade-up 680ms var(--ease) 760ms forwards;
    }

    .tools-head {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-bottom: 15px;
      color: var(--muted);
      font-size: 10px;
      font-weight: 670;
      letter-spacing: .08em;
      text-transform: uppercase;
    }

    .tools-head::after {
      content: "";
      flex: 1;
      height: 1px;
      background: var(--line);
    }

    .tool-viewport {
      --tool-fade: 5%;
      position: relative;
      overflow: hidden;
      isolation: isolate;
    }

    .tool-viewport::before,
    .tool-viewport::after {
      content: "";
      position: absolute;
      z-index: 3;
      top: 0;
      bottom: 0;
      width: var(--tool-fade);
      pointer-events: none;
    }

    .tool-viewport::before {
      left: 0;
      background: linear-gradient(to right, var(--bg), rgba(7,7,7,0));
    }

    .tool-viewport::after {
      right: 0;
      background: linear-gradient(to left, var(--bg), rgba(7,7,7,0));
    }

    .tool-marquee {
      display: flex;
      width: max-content;
      transform: translate3d(0,0,0);
      animation: tools-marquee 25s linear infinite;
      animation-play-state: paused;
      backface-visibility: hidden;
    }

    .tools.is-ready .tool-marquee {
      animation-play-state: running;
    }

    .tool-group {
      flex: 0 0 auto;
      display: flex;
      align-items: center;
      gap: clamp(18px, 1.8vw, 28px);
      padding-right: clamp(18px, 1.8vw, 28px);
    }

    .tool {
      flex: 0 0 auto;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      color: rgba(245,245,242,.70);
      white-space: nowrap;
    }

    .tool img {
      width: 21px;
      height: 21px;
      object-fit: contain;
      -webkit-filter: grayscale(1) brightness(0) invert(1);
      filter: grayscale(1) brightness(0) invert(1);
      opacity: .72;
      transform: translateZ(0);
      backface-visibility: hidden;
      transition:
        opacity 200ms ease,
        transform 220ms var(--ease-soft);
    }

    .tool span {
      font-size: 11px;
      font-weight: 610;
      letter-spacing: -.015em;
    }

    /* =========================================================
       DESKTOP NAV
       ========================================================= */

    .desktop-menu-wrap {
      position: fixed;
      z-index: 200;
      right: calc(22px + env(safe-area-inset-right));
      bottom: calc(22px + env(safe-area-inset-bottom));
      opacity: 0;
      transform: translateY(10px);
      animation: fade-up 620ms var(--ease) 880ms forwards;
    }

    .desktop-menu {
      display: flex;
      align-items: center;
      gap: 2px;
      padding: 5px;
      border: 1px solid rgba(10,10,10,.08);
      border-radius: 15px;
      background: #fff;
      box-shadow:
        0 10px 30px rgba(0,0,0,.14),
        0 1px 2px rgba(0,0,0,.06);
    }

    .desktop-menu a {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 38px;
      padding: 0 13px;
      border-radius: 10px;
      color: #111;
      font-size: 13px;
      font-weight: 630;
      letter-spacing: -.022em;
      white-space: nowrap;
      transition:
        color 180ms ease,
        background-color 180ms ease,
        transform 220ms var(--ease-soft);
    }

    .desktop-menu a:hover {
      background: #f0f0ed;
      transform: translateY(-1px);
    }

    .desktop-menu a[aria-current="page"] {
      color: #fff;
      background: #0a0a0a;
    }

    /* =========================================================
       MOBILE NAV
       ========================================================= */

    .mobile-nav {
      display: none;
      position: fixed;
      z-index: 999;
      right: calc(18px + env(safe-area-inset-right));
      bottom: calc(18px + env(safe-area-inset-bottom));
      opacity: 1;
      transform: none;
    }

    .mobile-menu-panel {
      position: absolute;
      right: 0;
      bottom: 56px;
      width: min(
        310px,
        calc(100vw - 32px - env(safe-area-inset-left) - env(safe-area-inset-right))
      );
      max-height: min(70svh,430px);
      overflow-y: auto;
      overscroll-behavior: contain;
      padding: 7px;
      border: 1px solid rgba(10,10,10,.08);
      border-radius: 18px;
      background: #fff;
      box-shadow:
        0 20px 48px rgba(0,0,0,.18),
        0 1px 2px rgba(0,0,0,.05);
      opacity: 0;
      visibility: hidden;
      transform: translateY(10px) scale(.985);
      transform-origin: right bottom;
      transition:
        opacity 180ms ease,
        visibility 180ms,
        transform 260ms var(--ease);
    }

    .mobile-menu-panel nav {
      display: grid;
      gap: 3px;
    }

    .mobile-menu-panel a {
      display: flex;
      align-items: center;
      justify-content: space-between;
      min-height: 48px;
      padding: 0 14px;
      border-radius: 12px;
      color: #111;
      font-size: 15px;
      font-weight: 640;
      letter-spacing: -.025em;
      touch-action: manipulation;
      -webkit-tap-highlight-color: transparent;
    }

    .mobile-menu-panel .arrow {
      opacity: .34;
      transform: translate(-3px,3px);
      transition:
        opacity 160ms ease,
        transform 180ms var(--ease);
    }

    .mobile-menu-panel a:active,
    .mobile-menu-panel a.is-selected,
    .mobile-menu-panel a[aria-current="page"] {
      color: #fff;
      background: #0a0a0a;
    }

    .mobile-menu-panel a:active .arrow,
    .mobile-menu-panel a.is-selected .arrow,
    .mobile-menu-panel a[aria-current="page"] .arrow {
      opacity: 1;
      transform: translate(0,0);
    }

    .hamburger-button {
      position: relative;
      width: 48px;
      height: 48px;
      background: transparent;
      color: #ffffff;
      cursor: pointer;
      touch-action: manipulation;
      -webkit-tap-highlight-color: transparent;
    }

    .hamburger-line {
      position: absolute;
      left: 50%;
      width: 28px;
      height: 2px;
      border-radius: 999px;
      background: currentColor;
      transform: translateX(-50%);
      box-shadow: 0 1px 5px rgba(0,0,0,.48);
      transition:
        top 270ms var(--ease),
        transform 270ms var(--ease),
        opacity 160ms ease;
    }

    .hamburger-line:nth-child(1) { top: 15px; }
    .hamburger-line:nth-child(2) { top: 23px; }
    .hamburger-line:nth-child(3) { top: 31px; }

    .mobile-nav.is-open .mobile-menu-panel {
      opacity: 1;
      visibility: visible;
      transform: translateY(0) scale(1);
    }

    .mobile-nav.is-open .hamburger-line:nth-child(1) {
      top: 23px;
      transform: translateX(-50%) rotate(45deg);
    }

    .mobile-nav.is-open .hamburger-line:nth-child(2) { opacity: 0; }

    .mobile-nav.is-open .hamburger-line:nth-child(3) {
      top: 23px;
      transform: translateX(-50%) rotate(-45deg);
    }

    /* =========================================================
       ANIMATION
       ========================================================= */

    @keyframes image-mask-in {
      from { clip-path: inset(0 0 100% 0 round var(--radius)); }
      to   { clip-path: inset(0 0 0 0 round var(--radius)); }
    }

    @keyframes portrait-in {
      from {
        opacity: .42;
        transform:
          translate3d(var(--portrait-x,0px),var(--portrait-y,0px),0)
          scale(1.085);
        filter: saturate(.72) contrast(.98);
      }
      to {
        opacity: 1;
        transform:
          translate3d(var(--portrait-x,0px),var(--portrait-y,0px),0)
          scale(1.055);
        filter: saturate(.88) contrast(1.015);
      }
    }

    @keyframes line-in {
      from {
        opacity: 0;
        transform: translate3d(0,108%,0);
      }
      to {
        opacity: 1;
        transform: translate3d(0,0,0);
      }
    }

    @keyframes fade-up {
      from {
        opacity: 0;
        transform: translateY(12px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }
@keyframes tools-marquee {
      from { transform: translate3d(0,0,0); }
      to   { transform: translate3d(-50%,0,0); }
    }


    /* =========================================================
       LARGE DESKTOP — yaklaşık %40 daha büyük / daha okunaklı
       Mobil ve tablet stillerine dokunmaz.
       ========================================================= */
    @media (min-width: 1101px) {
      /*
        Bu breakpoint yalnızca Hakkımda içeriğini büyütür.
        Global navigasyon burada override edilmez.
      */
      .page {
        padding:
          max(24px, env(safe-area-inset-top))
          max(24px, env(safe-area-inset-right))
          max(24px, env(safe-area-inset-bottom))
          max(24px, env(safe-area-inset-left));
      }

      .about-shell {
        width: min(100%, 1800px);
        min-height: min(88svh, 980px);
        grid-template-columns: minmax(460px, .78fr) minmax(0, 1.22fr);
        gap: clamp(56px, 6vw, 112px);
      }

      .portrait-column {
        width: min(100%, 700px);
      }

      .content {
        width: min(100%, 1060px);
      }

      .title {
        max-width: 1060px;
        font-size: clamp(62px, 6.65vw, 126px);
        line-height: .91;
      }

      .summary {
        width: min(910px, 100%);
        margin-top: clamp(30px, 3.4vw, 48px);
        font-size: clamp(19px, 1.55vw, 25px);
        line-height: 1.52;
      }

      .proof {
        margin-top: clamp(38px, 4.4vw, 68px);
      }

      .proof-item {
        padding:
          clamp(22px, 2.2vw, 34px)
          clamp(14px, 1.8vw, 25px);
      }

      .proof-value {
        font-size: clamp(42px, 3.75vw, 70px);
      }

      .proof-label {
        max-width: 190px;
        margin-top: 11px;
        font-size: 14px;
        line-height: 1.35;
      }

      .tools {
        margin-top: clamp(36px, 4.2vw, 60px);
      }

      .tools-head {
        gap: 16px;
        margin-bottom: 20px;
        font-size: 14px;
      }

      .tool-group {
        gap: clamp(24px, 2.4vw, 38px);
        padding-right: clamp(24px, 2.4vw, 38px);
      }

      .tool {
        gap: 11px;
      }

      .tool img {
        width: 29px;
        height: 29px;
      }

      .tool span {
        font-size: 15px;
      }

    }

    /* =========================================================
       TABLET
       ========================================================= */

    @media (max-width: 1100px) and (min-width: 821px) {
      .about-shell {
        width: min(100%, 1120px);
        min-height: min(84svh, 760px);
        grid-template-columns: minmax(300px, .72fr) minmax(0, 1.28fr);
        gap: clamp(30px, 4vw, 52px);
      }

      .content {
        width: 100%;
        padding: 0;
      }

      .title {
        font-size: clamp(42px,5.2vw,68px);
      }

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

      .proof-item:nth-child(3) {
        padding-left: 0;
        border-left: 0;
        border-top: 1px solid var(--line);
      }

      .proof-item:nth-child(4) {
        border-top: 1px solid var(--line);
      }

      .portrait-column {
        width: min(100%, 440px);
      }
    }

    /* =========================================================
       MOBILE
       ========================================================= */

    @media (max-width: 820px) {
      .desktop-menu-wrap {
        display: none;
      }

      .mobile-nav {
        display: block;
      }

      .page {
        min-height: 100svh;
        display: block;
        padding:
          max(12px, env(safe-area-inset-top))
          max(12px, env(safe-area-inset-right))
          max(90px, calc(72px + env(safe-area-inset-bottom)))
          max(12px, env(safe-area-inset-left));
        background: #070707;
      }

      .about-shell {
        width: 100%;
        min-height: auto;
        display: block;
        overflow: visible;
        border: 0;
        border-radius: 0;
        background: transparent;
      }

      /*
        Fotoğraf kontrollü güvenli alanda:
        - kenarlara yapışmaz
        - viewport'u kaplamaz
        - 320px–tablet aralığında ölçeklenir
      */
      .portrait-column {
        position: relative;
        width: min(calc(100% - 20px), 350px);
        aspect-ratio: 4 / 3;
        height: auto;
        min-height: 0;
        margin: 0 auto;
        justify-self: auto;
        overflow: hidden;
        border-radius: 16px;
      }

      .portrait {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: 50% 22%;
        transform:
          translate3d(
            var(--portrait-x,0px),
            var(--portrait-y,0px),
            0
          )
          scale(1.035);
      }

      .content {
        width: min(100%, 620px);
        margin: 0 auto;
        padding: 32px 8px 0;
      }

      .title {
        width: 100%;
        max-width: 100%;
        font-size: clamp(36px, 10.5vw, 54px);
        line-height: .95;
        letter-spacing: -.056em;
      }

      .summary {
        width: 100%;
        margin-top: 20px;
        color: rgba(245,245,242,.72);
        font-size: 15px;
        line-height: 1.56;
      }

      .proof {
        grid-template-columns: repeat(2,minmax(0,1fr));
        margin-top: 28px;
      }

      .proof-item {
        padding: 17px 12px 17px 0;
      }

      .proof-item + .proof-item {
        padding-left: 12px;
      }

      .proof-item:nth-child(3) {
        padding-left: 0;
        border-left: 0;
        border-top: 1px solid var(--line);
      }

      .proof-item:nth-child(4) {
        border-top: 1px solid var(--line);
      }

      .proof-value {
        font-size: clamp(34px, 10vw, 46px);
      }

      .proof-label {
        color: rgba(245,245,242,.54);
        font-size: 10px;
      }

      .tools {
        margin-top: 28px;
      }

      .tools-head {
        color: rgba(245,245,242,.54);
      }

      .tool-viewport {
        --tool-fade: 8%;
        margin-inline: -8px;
        overflow: hidden;
      }

      .tool-marquee {
        animation-duration: 22s;
      }

      .tool-group {
        gap: 18px;
        padding-right: 18px;
      }

      .tool {
        color: rgba(245,245,242,.66);
      }

      .mobile-menu-panel {
        width: min(
          310px,
          calc(100vw - 28px - env(safe-area-inset-left) - env(safe-area-inset-right))
        );
      }

      .hamburger-button {
        color: #fff;
      }
    }

    /* Kısa ekran / landscape mobile */
    @media (max-width: 820px) and (orientation: landscape) and (min-width: 620px) {
      .page {
        padding:
          max(10px, env(safe-area-inset-top))
          max(74px, calc(58px + env(safe-area-inset-right)))
          max(10px, env(safe-area-inset-bottom))
          max(10px, env(safe-area-inset-left));
      }

      .about-shell {
        min-height: calc(100svh - 20px);
        display: grid;
        grid-template-columns: minmax(220px, .72fr) minmax(0,1.28fr);
        align-items: center;
        gap: 28px;
      }

      .portrait-column {
        width: min(100%, 340px);
        aspect-ratio: 4 / 5;
        margin: 0;
        justify-self: end;
      }

      .portrait {
        object-position: 50% 24%;
      }

      .content {
        width: 100%;
        max-height: calc(100svh - 24px);
        overflow-y: auto;
        padding: 22px 0 48px;
      }

      .title {
        font-size: clamp(32px, 5.6vw, 46px);
      }

      .summary {
        font-size: 14px;
      }

      .proof {
        margin-top: 20px;
      }

      .tools {
        margin-top: 20px;
      }
    }

    @media (max-width: 390px) {
      .portrait-column {
        width: min(calc(100% - 16px), 310px);
        aspect-ratio: 4 / 3;
      }

      .content {
        padding-inline: 4px;
      }

      .title {
        font-size: clamp(35px, 10.6vw, 46px);
      }

      .mobile-nav {
        right: calc(16px + env(safe-area-inset-right));
        bottom: calc(16px + env(safe-area-inset-bottom));
      }

      .tool-viewport {
        margin-right: -16px;
        margin-left: -2px;
      }
    }

    /* =========================================================
       REDUCED MOTION
       Basit fade korunur; parallax ve büyük hareket devreden çıkar.
       ========================================================= */

    @media (prefers-reduced-motion: reduce) {
      /*
        Bu sayfada giriş animasyonları ve araç akışı bilinçli olarak korunur.
        Hareket amplitüdü zaten düşük; yalnızca marquee biraz yavaşlatılır.
      */
      .tool-marquee {
        animation-duration: 32s !important;
      }

      .portrait-column,
      .portrait,
      .line > span,
      .summary,
      .proof,
      .tools,
      .desktop-menu-wrap,
      .mobile-nav {
        animation-play-state: running !important;
      }
    }
/* =========================================================
       HOVER / ACCESSIBILITY
       ========================================================= */

    @media (hover:hover) and (pointer:fine) {
      .tool:hover img {
        opacity: 1;
        transform: translateY(-2px);
      }

      .mobile-menu-panel a:hover {
        background: #f0f0ed;
      }

      .mobile-menu-panel a[aria-current="page"]:hover,
      .mobile-menu-panel a.is-selected:hover {
        color: #fff;
        background: #0a0a0a;
      }
    }

    :focus-visible {
      outline: 3px solid #ffffff;
      outline-offset: 4px;
    }

    .desktop-menu :focus-visible,
    .mobile-menu-panel :focus-visible {
      outline-color: #0a0a0a;
    }