:root {
      --sumi: #0E0D0B;
      --sumi-2: #16130F;
      --washi: #F4EFE6;
      --washi-2: #E8E1D3;
      --aizome: #1B3A5B;
      --shu: #B80000;
      --sakura: #F2B8C6;
      --matsu: #2D5A27;
      --muted: rgba(244, 239, 230, .62);
      --line: rgba(244, 239, 230, .10);
      --easing: cubic-bezier(.7, 0, .2, 1);
      /* ---- Typography system (StringTune approach) ---- */
      --font: 'DM Sans', system-ui, sans-serif;
      --font-mono: 'JetBrains Mono', monospace;
      --type-step: 1.333;
      --ls-intensity: -2;
    }

    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box
    }

    html {
      font-size: 16px;
      -webkit-font-smoothing: antialiased;
      text-rendering: optimizeLegibility
    }

    @media(min-width:1400px) {
      html {
        font-size: 17px
      }
    }

    @media(min-width:1800px) {
      html {
        font-size: 18px
      }
    }

    html,
    body {
      background: var(--sumi);
      color: var(--washi);
      font-family: var(--font);
      font-weight: 400;
      letter-spacing: -0.01em;
      overflow-x: hidden;
      scrollbar-width: none;
      -ms-overflow-style: none;
    }

    ::-webkit-scrollbar {
      display: none;
    }

    * {
      cursor: none !important
    }

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

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

    ::selection {
      background: var(--shu);
      color: var(--washi)
    }

    /* ============ SCROLL PROGRESS ============ */
    #scroll-rail {
      position: fixed;
      left: 20px;
      top: 50%;
      transform: translateY(-50%);
      width: 1px;
      height: 36vh;
      background: rgba(244, 239, 230, .10);
      z-index: 200;
      pointer-events: none;
      border-radius: 1px;
      opacity: 0;
      transition: opacity .6s ease, background .4s ease;
    }

    body.ready #scroll-rail {
      opacity: 1;
    }

    /* Light section override */
    #scroll-rail.on-light {
      background: rgba(14, 13, 11, .14);
    }

    #scroll-fill {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      background: var(--washi);
      /* height yerine scaleY: yukseklik yazmak her karede layout tetikliyordu */
      height: 100%;
      transform: scaleY(0);
      transform-origin: top;
      will-change: transform;
      transition: background .4s ease;
      border-radius: 1px;
    }

    #scroll-rail.on-light #scroll-fill {
      background: var(--sumi);
    }

    #scroll-dot {
      position: absolute;
      left: 50%;
      top: 0;
      /* top yerine translate: layout yerine sadece compose */
      transform: translate(-50%, -50%) translateY(var(--dot, 0px));
      width: 3px;
      height: 3px;
      border-radius: 50%;
      background: var(--shu);
      will-change: transform;
      transition: transform .08s linear;
    }

    @media(max-width: 900px) {
      #scroll-rail {
        left: 10px;
        height: 28vh;
      }
    }

    /* ============ GRAIN ============ */
    /* PERFORMANS: eskiden tam ekran canli bir feTurbulence filtresiydi ve
       her karede yeniden hesaplaniyordu. Artik ayni gurultu tek seferde
       rasterlenip 180px'lik doku olarak doseniyor; blend modu da kalkti. */
    .grain {
      position: fixed;
      inset: 0;
      pointer-events: none;
      z-index: 9000;
      opacity: .055;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.75'/%3E%3C/svg%3E");
      background-repeat: repeat;
      background-size: 180px 180px;
      /* overlay olmadan bu katman gri bir perdeye donuyordu — geri konuldu.
         Rasterize edilmis desen oldugu icin maliyeti dusuk. */
      mix-blend-mode: overlay;
    }
    @media (prefers-reduced-motion: reduce){ .grain{ display:none } }

    /* ============ PAGE TRANSITION (smooth fade) ============ */
    /* ---- SUYA DALIŞ: perde alttan yükselir, yeni sayfada üstten çekilir ---- */
    .page-transition {
      position: fixed;
      inset: 0;
      z-index: 10500;
      pointer-events: none;
      opacity: 1;
      background:
        radial-gradient(ellipse 120% 60% at 50% 8%, rgba(197, 72, 47, .10), transparent 70%),
        linear-gradient(180deg, #14181c 0%, #0E0D0B 55%, #07100f 100%);
      clip-path: ellipse(150% 0% at 50% 100%);
      transition: clip-path .72s cubic-bezier(.66, 0, .22, 1);
      will-change: clip-path;
    }

    .page-transition.active {
      pointer-events: all;
    }

    /* dalış: su yükselir */
    .page-transition.cover {
      clip-path: ellipse(150% 155% at 50% 100%);
    }

    /* yüzeye çıkış: su yukarı çekilir */
    .page-transition.reveal {
      clip-path: ellipse(150% 0% at 50% 0%);
    }

    /* su halkaları — perde kapalıyken görünür */
    .pt-ring {
      position: absolute;
      left: 50%;
      top: 50%;
      width: 40px;
      height: 40px;
      margin: -20px 0 0 -20px;
      border: 1px solid rgba(244, 239, 230, .32);
      border-radius: 50%;
      opacity: 0;
      pointer-events: none;
    }

    .page-transition.cover .pt-ring {
      animation: ptRing 1.5s cubic-bezier(.2, .6, .3, 1) infinite;
    }

    .page-transition.cover .pt-ring:nth-child(2) { animation-delay: .3s; }
    .page-transition.cover .pt-ring:nth-child(3) { animation-delay: .6s; }

    @keyframes ptRing {
      0%   { transform: scale(.3); opacity: .55; }
      100% { transform: scale(9);  opacity: 0; }
    }

    /* dalarken sayfa içeriği suya gömülür */
    body.pt-diving .light-zone,
    body.pt-diving .sec-craft,
    body.pt-diving footer,
    body.pt-diving nav,
    body.pt-diving #koiTrack {
      transition: transform .6s cubic-bezier(.66, 0, .22, 1), filter .6s ease, opacity .6s ease;
      transform: translateY(-26px) scale(.985);
      filter: blur(5px);
      opacity: .55;
    }

    @media (prefers-reduced-motion: reduce) {
      .page-transition { transition-duration: .3s; }
      .page-transition.cover .pt-ring { animation: none; }
      body.pt-diving .light-zone,
      body.pt-diving .sec-craft,
      body.pt-diving footer,
      body.pt-diving nav,
      body.pt-diving #koiTrack { transform: none; filter: none; }
    }

    /* center mark — visible when fully covered */
    .pt-content {
      position: absolute;
      inset: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      pointer-events: none;
      z-index: 5
    }

    .pt-tag {
      position: absolute;
      bottom: 48px;
      left: 48px;
      font-family: var(--font-mono);
      font-size: 11px;
      letter-spacing: .22em;
      text-transform: uppercase;
      color: var(--muted);
      opacity: 0;
      transition: opacity .3s ease;
      z-index: 5
    }

    .page-transition.cover .pt-tag {
      opacity: 1;
      transition-delay: .2s
    }


    /* ============ CURSOR SPOTLIGHT ============ */
    .spotlight {
      position: fixed;
      inset: 0;
      pointer-events: none;
      z-index: 48;
      opacity: 0;
      transition: opacity .8s ease;
      background: radial-gradient(circle 360px at var(--sx, -1000px) var(--sy, -1000px),
          rgba(244, 239, 230, .10) 0%,
          rgba(197, 72, 47, .06) 30%,
          rgba(244, 239, 230, 0) 70%)
    }

    body.spotlight-on .spotlight {
      opacity: 1
    }

    /* ============ FALLING PETALS — canvas ============ */
    #petals {
      position: fixed;
      inset: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
      z-index: 50;
    }

    /* ============ GÖLET SİSTEMİ ============ */
    /* Su halkaları + kabarcıklar — petals'ın altındaki katman */
    #ripples {
      position: fixed;
      inset: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
      z-index: 48;
    }

    /* Su altı ışık huzmeleri — sadece derinde görünür */
    .godrays {
      position: fixed;
      inset: -10% -5%;
      pointer-events: none;
      z-index: 45;
      opacity: 0;
      mix-blend-mode: screen;
      background:
        linear-gradient(112deg, transparent 38%, rgba(244, 239, 230, .055) 45%, transparent 52%),
        linear-gradient(98deg, transparent 58%, rgba(180, 210, 235, .045) 65%, transparent 73%),
        linear-gradient(124deg, transparent 72%, rgba(244, 239, 230, .035) 78%, transparent 85%);
      background-size: 240% 100%;
      animation: rayDrift 26s ease-in-out infinite alternate;
      will-change: opacity;
    }
    @keyframes rayDrift {
      from { background-position: 0% 0; }
      to   { background-position: 100% 0; }
    }
    @media (prefers-reduced-motion: reduce) { .godrays { animation: none; } }

    /* Derinlik metresi — sol alt */
    .depth-meter {
      position: fixed;
      left: 24px;
      bottom: 22px;
      z-index: 9100;
      font-family: var(--font-mono);
      font-size: 10px;
      letter-spacing: .2em;
      color: var(--muted);
      mix-blend-mode: difference;
      pointer-events: none;
      transition: opacity .6s ease;
    }
    @media (max-width: 768px) { .depth-meter { display: none; } }

    /* ============ MEVSİM SİSTEMİ ============ */
    .season-mark {
      background: none;
      border: none;
      padding: 0;
      font-family: var(--font);
      font-size: 15px;
      line-height: 1;
      color: var(--muted);
      cursor: pointer;
      transition: color .35s var(--easing), transform .35s var(--easing);
    }
    .season-mark:hover {
      color: var(--shu);
      transform: rotate(-8deg);
    }
    /* Sonbahar: higanbana sezonu — footer'daki lily tam canlanır */
    html[data-season="autumn"] .lily-bloom { filter: saturate(1.3) brightness(1.05); }
    /* Yaz: lily hafif soluk — mevsimi değil */
    html[data-season="summer"] .lily-bloom { filter: saturate(.75); }

    /* ============ CORNER SKETCHES ============ */
    .sketch {
      position: absolute;
      pointer-events: none;
      opacity: .12;
      z-index: 0
    }

    .sketch svg {
      width: 100%;
      height: 100%
    }

    .sketch.tl {
      top: 24px;
      left: 24px;
      width: 200px;
      height: 200px
    }

    .sketch.tr {
      top: 80px;
      right: 24px;
      width: 240px;
      height: 240px;
      transform: scaleX(-1)
    }

    .sketch.bl {
      bottom: 40px;
      left: 40px;
      width: 180px;
      height: 180px
    }

    .sketch.br {
      bottom: 60px;
      right: 40px;
      width: 220px;
      height: 220px;
      transform: scaleX(-1)
    }

    /* ============ CURSOR ============ */
    .cursor {
      position: fixed;
      top: 0;
      left: 0;
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: var(--washi);
      pointer-events: none;
      z-index: 9999;
      mix-blend-mode: difference;
      transform: translate(-50%, -50%);
      will-change: transform;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: width .35s var(--easing), height .35s var(--easing), background .35s var(--easing), border-color .35s var(--easing);
      border: 1px solid transparent;
    }

    /* Cursor durumları — data-cursor. Sade: etiket yok, ince halka. */
    .cursor.is-hover {
      width: 22px;
      height: 22px;
      background: transparent;
      border-color: var(--washi);
    }

    .cursor.is-view {
      width: 30px;
      height: 30px;
      background: transparent;
      border-color: var(--washi);
    }

    .cursor-echo {
      position: fixed;
      width: 10px;
      height: 10px;
      border: 1px solid var(--line);
      border-radius: 50%;
      pointer-events: none;
      z-index: 9998;
      mix-blend-mode: difference;
      will-change: transform;
      opacity: .35
    }

    @media(hover:none) {
      .cursor,
      .cursor-echo {
        display: none
      }

      *, body, a, button {
        cursor: auto !important
      }
    }

    /* ============ LOADER ============ */
    .loader {
      position: fixed;
      inset: 0;
      background: var(--washi);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      z-index: 9999;
      transition: transform .9s var(--easing);
      will-change: transform, opacity
    }

    .loader-lines {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      opacity: .5;
      pointer-events: none;
      z-index: 1
    }

    .loader svg,
    .loader-name,
    .loader-bar {
      position: relative;
      z-index: 2
    }

    .loader svg {
      width: 120px;
      height: 120px
    }

    .loader path {
      fill: none;
      stroke: var(--sumi);
      stroke-width: 6;
      stroke-linecap: round;
      stroke-linejoin: round;
      stroke-dasharray: 1200;
      stroke-dashoffset: 1200;
      animation: draw 1.6s var(--easing) forwards
    }

    .loader-name {
      /* Selam metni dillere göre değişiyor — sabit yükseklik, ortalı, zıplamasın */
      display: flex;
      align-items: center;
      justify-content: center;
      min-height: 34px;
      font-family: var(--font);
      font-size: 22px;
      letter-spacing: .2em;
      color: var(--sumi);
      font-weight: 300;
      white-space: nowrap;
      opacity: 1;
    }

    /* İlerleme çizgisi görsel olarak kaldırıldı; ilerleme JS tarafında
       hâlâ takip ediliyor, perde yalnızca her şey yüklenince kalkıyor. */
    .loader-bar { display: none; }

    .loader-name span {
      display: inline-block;
      transform: translateY(120%);
      animation: rise .6s var(--easing) forwards
    }

    .loader-name span:nth-child(1) {
      animation-delay: .6s
    }

    .loader-name span:nth-child(2) {
      animation-delay: .7s
    }

    .loader-name span:nth-child(3) {
      animation-delay: .8s
    }

    .loader-name span:nth-child(4) {
      animation-delay: .9s
    }

    .loader-name span:nth-child(5) {
      animation-delay: 1.0s
    }

    .loader-name span:nth-child(6) {
      animation-delay: 1.1s
    }

    .loader-name span:nth-child(7) {
      animation-delay: 1.2s
    }

    .loader-name span:nth-child(8) {
      animation-delay: 1.3s
    }

    .loader-bar {
      width: 80px;
      height: 1px;
      background: rgba(14, 13, 11, .12);
      overflow: hidden;
      position: relative
    }

    .loader-bar-fill {
      position: absolute;
      inset: 0;
      background: var(--sumi);
      transform: scaleX(0);
      transform-origin: left;
      transition: transform .4s var(--easing)
    }

    @keyframes draw {
      to {
        stroke-dashoffset: 0
      }
    }

    @keyframes rise {
      to {
        transform: translateY(0)
      }
    }

    /* ============ SCROLL REVEAL ============ */
    [data-reveal] {
      opacity: 0;
      transform: translate3d(0, 30px, 0);
      transition: opacity .8s ease, transform .8s var(--easing);
      will-change: transform, opacity
    }

    [data-reveal].visible {
      opacity: 1;
      transform: translate3d(0, 0, 0)
    }

    /* ============ SPOTLIGHT ============ */
    [data-spotlight] {
      position: relative;
    }

    [data-spotlight]::before {
      content: "";
      position: absolute;
      inset: 0;
      background: radial-gradient(800px circle at var(--x, 50%) var(--y, 50%), rgba(255, 255, 255, 0.04), transparent 40%);
      pointer-events: none;
      z-index: 1;
      opacity: 0;
      transition: opacity 0.5s;
    }

    [data-spotlight]:hover::before {
      opacity: 1;
    }

    /* ============ NAV ============ */
    nav {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      z-index: 100;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 28px 40px;
      /* mix-blend-mode: difference kaldırıldı — sabit konumlu bu katman, altından
         geçen her şeyle her karede yeniden harmanlanıyordu. Renkler artık
         bölüme göre .on-light sınıfıyla değişiyor. */
      color: var(--washi);
      transition: color .4s ease;
    }

    nav.on-light,
    nav.on-light .lang-switch button.active {
      color: var(--sumi);
    }

    nav.on-light .lang-switch button {
      color: rgba(14, 13, 11, .45);
    }

    .nav-mark {
      font-family: var(--font);
      font-size: 18px;
      font-weight: 300;
      letter-spacing: -.02em
    }

    .nav-mark em {
      font-style: italic;
      color: var(--shu)
    }

    .nav-links {
      display: flex;
      gap: 36px;
      font-family: var(--font-mono);
      font-size: 11px;
      letter-spacing: .18em;
      text-transform: uppercase
    }

    .nav-links a {
      position: relative;
      padding: 4px 0;
      overflow: hidden;
      display: inline-block;
      height: 1.4em;
      line-height: 1.4em
    }

    .nav-links a span {
      display: inline-block;
      transition: transform .5s var(--easing)
    }

    .nav-links a span.dup {
      position: absolute;
      left: 0;
      top: 100%
    }

    .nav-links a:hover span:first-child {
      transform: translateY(-100%)
    }

    .nav-links a:hover span.dup {
      transform: translateY(-100%)
    }

    .nav-right {
      display: flex;
      align-items: center;
      gap: 24px;
      font-family: var(--font-mono);
      font-size: 11px;
      letter-spacing: .18em;
      text-transform: uppercase
    }

    .lang-switch {
      display: flex;
      gap: 6px;
      align-items: center
    }

    .lang-switch button {
      background: none;
      border: none;
      color: var(--muted);
      font: inherit;
      letter-spacing: .18em;
      cursor: none;
      padding: 0
    }

    .lang-switch button.active {
      color: var(--washi)
    }

    .lang-switch span {
      color: var(--muted)
    }

    /* ============ SUMI-E EFFECTS ============ */


    /* ============ LIGHT ZONE (Hero to Manifesto) ============ */
    .light-zone {
      background: var(--washi);
      color: var(--sumi);
      position: relative;
      z-index: 10;
    }
    .light-zone .hero,
    .light-zone #manifesto {
      background: transparent !important;
    }
    .light-zone .hero-role .accent {
      color: var(--sumi-2);
    }
    .light-zone .hero-foot {
      color: rgba(14, 13, 11, .45);
    }
    .light-zone .scroll-cue .line {
      background: linear-gradient(to bottom, var(--sumi) 0%, var(--sumi) 50%, transparent 50%, transparent 100%);
      background-size: 1px 16px;
      opacity: .5;
    }
    .light-zone .kanji {
      color: var(--sumi);
      opacity: 0.1;
    }
    .light-zone .manifesto .word {
      color: var(--sumi) !important;
    }
    /* Language visibility for dual-DOM manifesto — akış içinde olduğu için display:none */
    html[data-lang="tr"] .mlang-en { display: none !important; }
    html[data-lang="en"] .mlang-tr { display: none !important; }
    .light-zone .sketch.bl svg {
      stroke: var(--shu);
      opacity: 0.5;
    }
    
    /* Force the JS-based perspective grid to use black lines */
    .light-zone .pg-tile {
      border: 1px solid rgba(0, 0, 0, 1) !important;
    }
    .light-zone .pg-tile.filled {
      background-color: rgba(0, 0, 0, 0.05) !important;
    }
    
    .light-zone .hero-name-inline {
      display: flex !important;
      flex-direction: row !important;
      flex-wrap: nowrap !important;
      align-items: baseline !important;
      justify-content: center !important;
      font-size: clamp(52px, min(11.5vw, 16vh), 210px) !important;
      gap: clamp(10px, 1.4vw, 26px);
      margin-bottom: 6px;
      white-space: nowrap;
      color: var(--sumi);
    }
    .light-zone .hero-name-inline .l1,
    .light-zone .hero-name-inline .l2 {
      display: inline-block !important;
    }

    /* Sketch Arrow Animation - Rough & Endless */
    @keyframes sketchJitter {
      0% { transform: translate(0, 0) rotate(0deg); }
      20% { transform: translate(1px, -1px) rotate(0.5deg); }
      40% { transform: translate(-1px, 1px) rotate(-0.5deg); }
      60% { transform: translate(1px, 1px) rotate(0deg); }
      80% { transform: translate(-1px, -1px) rotate(-0.5deg); }
      100% { transform: translate(0, 0) rotate(0deg); }
    }
    .sketch-about {
      animation: sketchJitter 0.3s infinite;
      display: inline-flex;
      align-items: center;
      gap: 12px;
      margin-top: 16px;
      background: transparent !important;
      border: none !important;
      box-shadow: none !important;
      text-decoration: none !important;
    }
    .sketch-svg {
      width: 90px;
      height: 40px;
      overflow: visible;
    }
    .sketch-svg path {
      fill: none;
      stroke: var(--shu);
      stroke-width: 2;
      stroke-linecap: round;
      stroke-linejoin: round;
      vector-effect: non-scaling-stroke;
    }
    .sketch-label {
      font-family: var(--font), cursive !important;
      font-size: 38px !important;
      color: var(--shu) !important;
      letter-spacing: 2px !important;
      text-transform: none !important;
    }

    .light-zone .hero-info {
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      width: 100%;
    }
    .sketch-about-wrapper {
      display: inline-block;
      margin-top: 16px;
      pointer-events: auto !important;
      transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    }
    .sketch-about-wrapper:hover {
      transform: scale3d(1.22, 1.22, 1) rotateZ(-3deg) translateZ(0) !important;
    }

    /* ============ KAPI SATIRLARI — hero'nun altındaki ana navigasyon ============ */
    /* Boş alanı doldurur ve ilk ekranda "nereye gideceğim" sorusunu cevaplar. */
    /* ============ HAVUZ ALT ŞERİDİ — tek satır kapılar ============ */
    /* ---- RETRO MENÜ: alt alta, soldan tek tek girer ---- */
    .pond-nav {
      /* global `nav` kuralını sıfırla — artık akış içinde, ismin altında */
      position: relative;
      top: auto;
      left: auto;
      right: auto;
      bottom: auto;
      padding: 0;
      margin: clamp(18px, 3.4vh, 44px) auto 0;
      mix-blend-mode: normal;
      display: flex;
      flex-direction: column;
      align-items: stretch;
      gap: 0;
      width: min(420px, 84vw);
      z-index: 40;
      pointer-events: auto;
      border-top: 1px solid rgba(14, 13, 11, .2);
    }

    /* editöryel künye şeridi */
    .pn-head {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 6px 2px 9px;
      font-family: var(--font-mono);
      font-size: 9.5px;
      letter-spacing: .26em;
      text-transform: uppercase;
      color: rgba(14, 13, 11, .38);
      opacity: 0;
      animation: menuPop .5s ease forwards;
      animation-delay: .95s;
    }

    .pn-head i {
      flex: 1;
      height: 1px;
      background: rgba(14, 13, 11, .14);
    }

    .pond-nav a {
      position: relative;
      display: grid;
      grid-template-columns: 10px 1fr auto;
      align-items: baseline;
      gap: 16px;
      padding: clamp(6px, 1.1vh, 11px) 16px clamp(8px, 1.3vh, 13px) 6px;
      font-family: var(--font);
      font-weight: 300;
      font-size: clamp(22px, min(2.7vw, 3.7vh), 40px);
      letter-spacing: -.035em;
      line-height: 1;
      color: var(--sumi);
      text-decoration: none;
      cursor: none;
      isolation: isolate;
      /* soldan hafif aşarak oturur */
      opacity: 0;
      transform: translateX(-42px);
      transition: color .32s ease;
    }

    .ready .pond-nav a {
      animation: menuPop .62s cubic-bezier(.2, 1.5, .35, 1) forwards;
      animation-delay: calc(1.05s + var(--i, 0) * .085s);
    }

    @keyframes menuPop {
      from { opacity: 0; transform: translateX(-42px); }
      to   { opacity: 1; transform: translateX(0); }
    }

    /* seçim bloğu — vermilyon dolgu soldan süpürür */
    .pond-nav a::before {
      content: '';
      position: absolute;
      inset: 0 -12px 0 -12px;
      z-index: -1;
      background: var(--shu);
      transform: scaleX(0);
      transform-origin: left;
      transition: transform .42s cubic-bezier(.72, 0, .16, 1);
    }

    /* satırı ayıran ince kılavuz */
    .pond-nav a::after {
      content: '';
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      height: 1px;
      background: rgba(14, 13, 11, .14);
    }

    .pn-mark {
      width: 8px;
      height: 8px;
      align-self: center;
      background: var(--shu);
      transform: rotate(45deg) scale(0);
      transition: transform .38s cubic-bezier(.2, 1.7, .35, 1), background .3s ease;
    }

    .pn-text {
      display: inline-block;
      transition: transform .38s cubic-bezier(.28, 1.35, .38, 1), font-style .1s;
    }

    .pn-go {
      font-family: var(--font-mono);
      font-size: 15px;
      align-self: center;
      color: var(--shu);
      opacity: 0;
      transform: translateX(-14px);
      transition: opacity .3s ease, transform .4s cubic-bezier(.28, 1.35, .38, 1), color .3s ease;
    }

    /* ---- hover: satır komple vermilyon bloğa döner ---- */
    .pond-nav a:hover,
    .pond-nav a:focus-visible {
      color: var(--washi);
    }

    .pond-nav a:hover::before,
    .pond-nav a:focus-visible::before { transform: scaleX(1); }

    .pond-nav a:hover .pn-mark,
    .pond-nav a:focus-visible .pn-mark { transform: rotate(45deg) scale(1); background: var(--washi); }

    .pond-nav a:hover .pn-text,
    .pond-nav a:focus-visible .pn-text {
      transform: translateX(10px) skewX(-9deg);
    }

    .pond-nav a:hover .pn-go,
    .pond-nav a:focus-visible .pn-go { opacity: 1; transform: translateX(0); color: var(--washi); }

    @media (prefers-reduced-motion: reduce) {
      .pond-nav a { opacity: 1; transform: none; animation: none !important; }
    }

    /* sol üst imza — sadece kaydırınca belirir */
    .nav-mark {
      opacity: 0;
      transform: translateY(-6px);
      pointer-events: none;
      transition: opacity .55s var(--easing), transform .55s var(--easing);
    }

    body.scrolled .nav-mark {
      opacity: 1;
      transform: translateY(0);
      pointer-events: auto;
    }

    @media (max-width: 900px) {
      .pond-nav {
        bottom: auto;
        margin-top: 20px;
        gap: 0;
        width: min(300px, 86vw);
      }

      .pond-nav a {
        font-size: 22px;
        grid-template-columns: 8px 1fr auto;
        gap: 10px;
        padding: 7px 10px 8px 4px;
      }

      .pn-head {
        padding: 4px 2px 6px;
        font-size: 8.5px;
      }

      .hero-portrait {
        width: 124px !important;
        margin: 0 auto 16px !important;
      }

      .tategaki {
        right: 16px;
        gap: 10px;
      }

      .tategaki span {
        font-size: 14px;
      }

      .tategaki i {
        height: 16px;
      }

      

      .name-reflect {
        filter: blur(1px);
        opacity: .1;
      }
    }


    /* ---- RITIM KARELERI ----
       Eski dalga seridi mobilde bulanik bir leke gibi duruyordu. Yerine
       muzige tepki veren kucuk kareler: ses kapaliyken yavas nefes alir,
       acikken frekans bantlarina gore yanip soner. */
    
    
    
    
    
    
    

    .gates {
      /* Döner hero sahnesinin DIŞINDA — hiçbir 3D dönüşten etkilenmez, isim yazısıyla çakışmaz.
         Bu bir <nav> olduğu için üst menünün global `nav` kuralını burada sıfırlıyoruz:
         onsuz fixed + yatay flex miras alıp isim yazısının üstüne biniyordu. */
      display: block;
      position: relative;
      top: auto; left: auto; right: auto;
      padding: 0;
      mix-blend-mode: normal;
      margin: 0 auto;
      width: 100%;
      max-width: 620px;
      z-index: 30;
      pointer-events: auto !important;
      border-top: 1px solid rgba(14, 13, 11, 0.16);
      /* Arka izgaranin cizgileri menu cizgileriyle kesisip kirli bir doku
         yapiyordu; menunun arkasina yumusak bir washi zemin koyuldu. */
      background:
        radial-gradient(120% 100% at 50% 50%, var(--washi) 62%, rgba(244,239,230,0) 100%);
      isolation: isolate;
    }

    .gate {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 20px;
      padding: 12px 14px 12px 4px;
      border-bottom: 1px solid rgba(14, 13, 11, 0.16);
      overflow: hidden;
      cursor: none;
      isolation: isolate;
    }

    /* hover dolgusu — aşağıdan yukarı yükselir */
    .gate::before {
      content: '';
      position: absolute;
      inset: 0;
      background: var(--sumi);
      transform: scaleY(0);
      transform-origin: bottom;
      transition: transform 0.5s cubic-bezier(0.7, 0, 0.2, 1);
      z-index: -1;
    }
    .gate:hover::before,
    .gate:focus-visible::before { transform: scaleY(1); }

    .gate-label {
      font-family: var(--font);
      font-weight: 300;
      font-size: clamp(26px, 3.4vw, 40px);
      line-height: 1;
      letter-spacing: -0.03em;
      color: var(--sumi);
      transition: color 0.35s ease, transform 0.45s cubic-bezier(0.7, 0, 0.2, 1);
    }
    .gate-right {
      display: inline-flex;
      align-items: center;
      gap: 14px;
      flex: none;
    }
    .gate-meta {
      font-family: var(--font-mono);
      font-size: 9.5px;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: rgba(14, 13, 11, 0.5);
      transition: color 0.35s ease;
      white-space: nowrap;
    }
    .gate-arrow {
      width: 22px; height: 22px;
      stroke: var(--sumi);
      stroke-width: 1.6;
      fill: none;
      stroke-linecap: round;
      stroke-linejoin: round;
      transition: transform 0.45s cubic-bezier(0.7, 0, 0.2, 1), stroke 0.35s ease;
    }

    .gate:hover .gate-label { color: var(--washi); transform: translateX(10px); }
    .gate:hover .gate-meta  { color: rgba(244, 239, 230, 0.6); }
    .gate:hover .gate-arrow { stroke: var(--washi); transform: translateX(6px); }

    /* birincil kapı — İşler */
    .gate--primary .gate-label em { font-style: italic; color: var(--shu); transition: color 0.35s ease; }
    .gate--primary:hover .gate-label em { color: #B80000; }
    .gate--primary .gate-meta { color: var(--shu); }
    .gate--primary:hover .gate-meta { color: #B80000; }

    @media (max-width: 900px) {
      .gates { margin: 26px auto 0; max-width: none; }
      .gate { padding: 13px 10px 13px 2px; }
      .gate-label { font-size: clamp(22px, 6.4vw, 30px); }
      .gate-meta { font-size: 8.5px; letter-spacing: 0.14em; }
      .gate-arrow { width: 18px; height: 18px; }
      /* dokunmatikte hover dolgusu yerine basılı efekt */
      .gate:active::before { transform: scaleY(1); }
      .gate:active .gate-label { color: var(--washi); }
      .gate:active .gate-meta { color: rgba(244, 239, 230, 0.6); }
      .gate:active .gate-arrow { stroke: var(--washi); }
    }
    @media (max-width: 420px) {
      .gate-meta { display: none; }
    }

    .light-zone .marquee {
      border-top: 1px solid rgba(14,13,11,0.12) !important;
      border-bottom: 1px solid rgba(14,13,11,0.12) !important;
    }
    .light-zone .marquee span {
      -webkit-text-stroke: 1px rgba(14, 13, 11, 0.2);
    }

    /* ============ HERO ============ */
    .hero {
      min-height: 100vh;
      position: relative;
      padding: 0;
      z-index: 1;
      background: transparent;
    }

    .hero-sticky {
      position: sticky;
      top: 0;
      min-height: 100vh;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      padding: clamp(72px, 9vh, 96px) 40px clamp(20px, 3vh, 34px);
      will-change: transform, opacity, filter
    }

    /* ---- HAVUZ: su yüzeyi ızgarası ---- */
    .pond-grid {
      will-change: opacity;
      opacity: calc(.17 + var(--beat, 0) * .18);
      perspective: 1150px;
      perspective-origin: 50% 34%;
    }

    /* Kanji sütunu ve isim de nabza katılıyor — çok hafif, dikkat dağıtmasın */
    .tategaki {
      transform: translateY(calc(-50% + var(--beat, 0) * -6px));
    }

    .tategaki span {
      opacity: calc(.17 + var(--beat, 0) * .22);
    }

    .name-reflect {
      opacity: calc(.085 + var(--beat, 0) * .09);
    }

    /* Ses düğmesi: dört çubuk dört frekans bandını gösteriyor */
    .audio-toggle[aria-pressed="true"] .audio-bars i:nth-child(1) { transform: scaleY(calc(.25 + var(--b1, 0) * .75)); animation: none; }
    .audio-toggle[aria-pressed="true"] .audio-bars i:nth-child(2) { transform: scaleY(calc(.25 + var(--b2, 0) * .75)); animation: none; }
    .audio-toggle[aria-pressed="true"] .audio-bars i:nth-child(3) { transform: scaleY(calc(.25 + var(--b3, 0) * .75)); animation: none; }
    .audio-toggle[aria-pressed="true"] .audio-bars i:nth-child(4) { transform: scaleY(calc(.25 + var(--b4, 0) * .75)); animation: none; }

    /* ---- İSİM YANSIMASI: su yüzeyinde ters, dalgalanan kopya ---- */
    .name-reflect {
      font-family: var(--font);
      font-weight: 300;
      font-size: clamp(52px, min(11.5vw, 16vh), 210px);
      letter-spacing: -.05em;
      line-height: 1;
      white-space: nowrap;
      color: var(--sumi);
      opacity: .085;
      margin-top: -.16em;
      margin-bottom: -.62em;
      pointer-events: none;
      transform: scaleY(-1);
      filter: blur(1.6px);
      -webkit-mask-image: linear-gradient(to bottom, transparent 42%, #000 100%);
      mask-image: linear-gradient(to bottom, transparent 42%, #000 100%);
      transform-origin: center center;
      animation: reflectWave 6.5s ease-in-out infinite;
    }

    .name-block {
      position: relative;
      will-change: transform;
    }

    /* ---- Harf harf su dalgası ---- */
    /* Giriş animasyonu biterken kırpma açılır ki harfler yüzeyin üstüne çıkabilsin */
    .hero-name-inline.wave-ready .l1,
    .hero-name-inline.wave-ready .l2 {
      overflow: visible;
    }

    .hero-name-inline .ch {
      display: inline-block;
      will-change: transform;
      transform: translate3d(0, var(--chy, 0px), 0) scale(var(--chs, 1));
    }

    /* ---- Tıklamada su halkası ---- */
    .pond-ripple {
      position: absolute;
      width: 18px;
      height: 18px;
      margin: -9px 0 0 -9px;
      border-radius: 50%;
      border: 1px solid var(--sumi);
      opacity: .5;
      pointer-events: none;
      z-index: 6;
      animation: pondRipple 1.5s cubic-bezier(.16, .7, .3, 1) forwards;
    }

    @keyframes pondRipple {
      0%   { transform: scale(.4); opacity: .45; border-width: 1.4px; }
      100% { transform: scale(22);  opacity: 0;   border-width: .4px; }
    }

    /* ---- Kanji sütunu: bulunduğun bölüm vurgulanır ---- */
    .tategaki span {
      transition: opacity .6s var(--easing), color .6s var(--easing), transform .6s var(--easing);
    }

    .tategaki span.on {
      opacity: .55;
      color: var(--shu);
      transform: scale(1.28);
    }

    @media (prefers-reduced-motion: reduce) {
      .hero-name-inline .ch { transform: none !important; }
      .pond-ripple { display: none; }
    }

    .name-reflect em {
      font-style: italic;
      color: var(--shu);
    }

    @keyframes reflectWave {
      0%, 100% { transform: scaleY(-1) skewX(0deg); }
      35%      { transform: scaleY(-1) skewX(1.6deg); }
      70%      { transform: scaleY(-1) skewX(-1.2deg); }
    }

    /* ---- DİKEY KANJİ SÜTUNU (縦書き) ---- */
    /* ---- BOLUM RAYI ----
       Sagda sabit duran dikey gosterge. Soldaki ince cizginin karsiligi:
       sayfa boyunca kalir ve hangi bolumde oldugunu soyler. */
    .tategaki {
      position: fixed;
      right: 26px;
      top: 50%;
      transform: translateY(-50%);
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 10px;
      z-index: 60;
      pointer-events: none;
      user-select: none;
    }

    .tategaki span {
      font-family: var(--font);
      font-size: 19px;
      font-weight: 300;
      line-height: 1;
      color: var(--sumi);
      opacity: .22;
      transition: opacity .4s var(--easing), color .4s var(--easing), transform .4s var(--easing);
    }

    .tategaki span.on { opacity: 1; color: var(--shu, #B80000); transform: scale(1.12) }

    .tategaki i {
      width: 1px;
      height: 20px;
      background: currentColor;
      color: var(--sumi);
      opacity: .16;
    }

    /* Koyu bolumlerde ray okunur kalsin */
    body.dark-zone .tategaki span { color: var(--washi, #F4EFE6) }
    body.dark-zone .tategaki i { color: var(--washi, #F4EFE6) }

    @media (max-width: 900px) { .tategaki { display: none } }

    /* ---- SES DALGASI — su çizgisi (水面線)
       Menünün altında, ritim şeridinin üstünde duran ince bir çizgi.
       Sessizken sadece çizgi görünür; müzik çalınca su kıpırdar. ---- */
    .sound-bars {
      position: absolute;
      left: 50%;
      bottom: 34px;
      transform: translateX(-50%);
      width: min(560px, 62vw);
      height: 26px;
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      z-index: 3;
      pointer-events: none;
      opacity: 0;
      transition: opacity 1.2s ease;
      mix-blend-mode: multiply;
    }

    /* su çizgisi — kenarlara doğru silinen tek kıl çizgi */
    .sound-bars::after {
      content: "";
      position: absolute;
      left: -6%;
      right: -6%;
      bottom: -1px;
      height: 1px;
      background: linear-gradient(to right,
        transparent, rgba(38,34,30,.20) 18%, rgba(38,34,30,.20) 82%, transparent);
    }

    body.audio-on .sound-bars { opacity: 1; }

    .sound-bars i {
      flex: 1 1 auto;
      max-width: 2px;
      height: 100%;
      background: linear-gradient(to top,
        rgba(38,34,30,.55) 0%, rgba(38,34,30,.28) 55%, rgba(197,72,47,.42) 100%);
      transform: scaleY(.03);
      transform-origin: bottom;
      will-change: transform;
    }

    @media (max-width: 768px) {
      .sound-bars {
        bottom: 26px;
        width: 78vw;
        height: 18px;
      }
      .sound-bars i { max-width: 1.5px; }
    }

    @media (prefers-reduced-motion: reduce) {
      .sound-bars i { display: none; }
    }

    /* ---- SEIGAIHA DALGA ŞERİDİ ---- */
    /* --beat: müziğin bas enerjisi (0–1). Ses açıkken dalga yükselip alçalıyor. */
    

    

    @media (prefers-reduced-motion: reduce) {
      .name-reflect { animation: none; transform: scaleY(-1); }
      
    }

    /* ızgara ufka oturan bir zemin gibi yatar — ekranı tam kaplar.
       grid-template burada da sabitleniyor: 1600 karo tam 40×40'a oturmazsa
       satırlar otomatik çoğalıp zemin sola kayıyor (mobilde olan buydu). */
    /* Isler bolumundeki izgara hero ile ayni zemine otursun — olcek ve
       aci ayni, boylece iki bolum ayni mekanin devami gibi okunuyor. */
    .sec-craft .pg-inner {
      width: 230vw;
      max-width: none;
      aspect-ratio: 1 / 1;
      left: 50%;
      top: 100%;
      grid-template-columns: repeat(40, 1fr);
      grid-template-rows: repeat(40, 1fr);
      transform: translate(-50%, -50%) rotateX(74deg);
      transform-origin: 50% 50%;
    }
    @media (max-width: 768px) {
      .sec-craft .pg-inner { width: 620vw; top: 92%; transform: translate(-50%, -50%) rotateX(74deg) }
    }

    .hero-pond .pg-inner {
      width: 230vw;
      max-width: none;
      aspect-ratio: 1 / 1;
      left: 50%;
      top: 100%;
      grid-template-columns: repeat(40, 1fr);
      grid-template-rows: repeat(40, 1fr);
      transform: translate(-50%, -50%) rotateX(74deg);
      transform-origin: 50% 50%;
    }

    @media (max-width: 768px) {
      /* Izgara masaustu olcegini tasisin: 340vw'de bir karo ~33px kaliyordu,
         masaustunde ~83px. Genisletince karolar buyuyor; top degeri de
         yukari cekildi, yoksa izgara ekranin altinda kaliyordu. */
      .hero-pond .pg-inner {
        width: 620vw;
        top: 80%;
        transform: translate(-50%, -50%) rotateX(74deg);
      }

      /* Koi sahnesinden geçiş mobilde çok uzun sürüyordu — yolu kısalt,
         animasyonun kendisi orantılı olduğu için akış bozulmuyor. */
      #koiTrack {
        height: 52vh !important;
      }
    }

    /* ufuk çizgisinde erir, alt kenarda tekrar solar */
    .hero-pond .pg-overlay {
      background:
        linear-gradient(to bottom,
          var(--washi) 0%,
          var(--washi) 24%,
          rgba(244, 239, 230, .58) 38%,
          rgba(244, 239, 230, .04) 62%,
          rgba(244, 239, 230, .42) 92%,
          var(--washi) 100%),
        radial-gradient(ellipse 72% 58% at 50% 76%, transparent 0%, var(--washi) 100%) !important;
    }

    /* iOS Safari'de 100vh adres çubuğunu saymaz — içerik ekranın altına taşar.
       dvh gerçek görünür yüksekliği verir. Bu blok .hero ve .hero-sticky
       tanımlarından SONRA gelmeli, yoksa 100vh kuralları bunu eziyor. */
    @supports (height: 100dvh) {
      .hero { min-height: 100dvh; }
      .hero-sticky { min-height: 100dvh; }
    }

    /* ---- Merkez tipografi ---- */
    .hero-stage {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      flex: 1;
      width: 100%;
      pointer-events: none;
      z-index: 2;
    }
    
    .hero-stage > * {
      pointer-events: auto;
    }

    .hero-info, .hero-name-inline, .hero-role, .hero-portrait {
      pointer-events: none;
    }
    
    .hero-name-inline span, .hero-role span, .ph-img {
      pointer-events: auto;
    }

    /* Seamless section stacking */
    #manifesto,
    #workSec {
      position: relative;
      z-index: 10;
      background: var(--sumi);
      margin: 0;
      border: none;
    }

    .hero-info {
      display: flex;
      flex-direction: column;
      gap: 6px;
      position: relative;
      z-index: 4;
      will-change: transform;
    }

    .hero-role {
      display: flex;
      flex-direction: column;
      gap: 12px;
      pointer-events: none;
    }

    .hero-role {
      align-items: center;
      text-align: center;
    }

    .hero-role .accent {
      color: var(--washi-2);
      font-family: var(--font-mono);
      font-size: 11px;
      letter-spacing: .22em;
      text-transform: uppercase;
      font-weight: 400;
      line-height: 1.6;
      font-style: normal;
    }

    .hero-role .role-desc {
      font-family: var(--font-mono);
      font-size: 11px;
      letter-spacing: .22em;
      text-transform: uppercase;
      color: var(--muted)
    }

    /* ============ SKETCH ABOUT CARD ============ */
    .sketch-about {
      display: inline-flex;
      flex-direction: column;
      gap: 6px;
      background: var(--washi);
      padding: 18px 22px 14px 20px;
      border-radius: 3px;
      box-shadow:
        2px 2px 0 rgba(0,0,0,0.06),
        0 8px 28px rgba(0,0,0,0.22),
        0 2px 6px rgba(0,0,0,0.12);
      transform: rotate(-1.8deg);
      text-decoration: none;
      color: var(--sumi);
      transition: transform 0.5s var(--easing), box-shadow 0.5s var(--easing);
      align-self: flex-start;
      position: relative;
      overflow: visible;
    }

    .sketch-row {
      display: flex;
      align-items: center;
      gap: 4px;
    }

    .sketch-svg {
      width: 90px;
      height: 40px;
      overflow: visible;
      flex-shrink: 0;
    }

    .sketch-svg .s-curve {
      fill: none;
      stroke: var(--shu);
      stroke-width: 2.2;
      stroke-linecap: round;
      stroke-linejoin: round;
      stroke-dasharray: 160;
      stroke-dashoffset: 160;
    }

    .sketch-svg .s-head {
      fill: none;
      stroke: var(--shu);
      stroke-width: 2.2;
      stroke-linecap: round;
      stroke-linejoin: round;
      stroke-dasharray: 28;
      stroke-dashoffset: 28;
    }

    .sketch-label {
      font-family: var(--font), cursive;
      font-size: 30px;
      line-height: 1;
      color: var(--sumi);
      opacity: 0;
      transform: translateX(-6px);
      transition: opacity 0.4s ease, transform 0.4s ease;
    }

    .sketch-sub {
      font-family: var(--font-mono);
      font-size: 9px;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      color: rgba(14,13,11,0.38);
      padding-left: 2px;
      opacity: 0;
      transition: opacity 0.4s ease 0.1s;
    }

    @keyframes drawCurve {
      to { stroke-dashoffset: 0; }
    }

    .ready .sketch-svg .s-curve {
      animation: drawCurve 0.8s cubic-bezier(.4,0,.2,1) 1.5s forwards;
    }

    .ready .sketch-svg .s-head {
      animation: drawCurve 0.35s cubic-bezier(.4,0,.2,1) 2.25s forwards;
    }

    .ready .sketch-label {
      opacity: 1;
      transform: translateX(0);
      transition-delay: 2.55s;
    }

    .ready .sketch-sub {
      opacity: 1;
      transition-delay: 2.7s;
    }

    .hero-portrait {
      /* Suya bırakılmış washi parçası — ismin hemen üstünde, merkezde */
      position: relative;
      margin: 0 auto 26px;
      transform: translate3d(var(--drift-x, 0), var(--drift-y, 0), 0) rotate(-3.5deg);
      width: clamp(120px, min(12.5vw, 19vh), 196px);
      margin-bottom: clamp(14px, 2.4vh, 26px);
      aspect-ratio: 3/4;
      background: var(--sumi-2);
      overflow: hidden;
      border-radius: 3px;
      box-shadow: 0 26px 60px -26px rgba(0, 0, 0, .5);
      z-index: 3;
      will-change: scale, clip-path, filter;
      /* Tutorial-03 style scroll progress effect: clip-path opens + scale grows + filter brightens */
      scale: calc(1 + var(--portrait-progress, 0) * 0.20);
      clip-path: inset(calc(7% - var(--portrait-progress, 0) * 7%) calc(3.5% - var(--portrait-progress, 0) * 3.5%) calc(7% - var(--portrait-progress, 0) * 7%) calc(3.5% - var(--portrait-progress, 0) * 3.5%) round 32px);
      pointer-events: none;
    }

    .hero-portrait .ph-img {
      position: absolute;
      inset: 0;
      background-size: cover;
      background-position: 50% 26%;
      background-repeat: no-repeat;
      background-image: url(portrait.jpg);
      transition: filter 1.2s var(--easing);
      filter: saturate(calc(0.82 + var(--portrait-progress, 0) * 0.18)) contrast(calc(1.04 + var(--portrait-progress, 0) * 0.06)) brightness(calc(0.92 + var(--portrait-progress, 0) * 0.08))
    }

    .hero-portrait .ph-mask {
      position: absolute;
      inset: 0;
      background: linear-gradient(180deg, rgba(14, 13, 11, 0) 35%, rgba(14, 13, 11, .5) 100%);
      pointer-events: none;
      z-index: 2
    }

    .hero-portrait .ph-meta {
      position: absolute;
      left: 16px;
      bottom: 16px;
      font-family: var(--font-mono);
      font-size: 9px;
      letter-spacing: .22em;
      text-transform: uppercase;
      color: var(--washi);
      z-index: 3;
      display: flex;
      align-items: center;
      gap: 8px
    }

    .hero-portrait .ph-meta::before {
      content: "";
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: var(--shu);
      animation: pulse 1.6s ease-in-out infinite
    }

    @keyframes pulse {

      0%,
      100% {
        opacity: .4
      }

      50% {
        opacity: 1
      }
    }

    .hero-name-inline {
      font-family: var(--font);
      font-weight: 500;
      font-size: clamp(80px, 16vw, 260px);
      line-height: .72;
      letter-spacing: -0.05em;
      color: rgba(244, 239, 230, .85);
      transition: filter .5s var(--easing), letter-spacing .5s var(--easing);
      transform-origin: center center;
      cursor: default;
      pointer-events: auto;
    }

    .hero-name-inline .l1,
    .hero-name-inline .l2 {
      display: block;
      overflow: hidden;
      height: 0.95em;
      /* Increased to prevent cut-off */
      line-height: 1;
    }

    .hero-name-inline .l2 {
      margin-top: -0.18em;
    }

    /* Bring lines together without clipping */
    .hero-name-inline .l-inner {
      display: inline-block;
      transform: translateY(110%);
      transition: transform 1.4s var(--easing);
      will-change: transform;
    }

    .ready .hero-name-inline .l-inner {
      transform: translateY(0)
    }

    .hero-name-inline em {
      font-style: italic;
      font-weight: 500;
      color: var(--shu);
      transition: color .4s, text-shadow .4s
    }

    .hero-name-inline .l2 .l-inner {
      transition-delay: .15s
    }

    .hero-foot {
      display: flex;
      justify-content: space-between;
      align-items: end;
      margin-top: clamp(12px, 2vh, 28px);
      font-family: var(--font-mono);
      font-size: 11px;
      letter-spacing: .2em;
      text-transform: uppercase;
      color: var(--muted);
      position: relative;
      z-index: 4
    }

    .scroll-cue {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 10px
    }

    .scroll-cue .line {
      width: 1px;
      height: clamp(22px, 4vh, 40px);
      background: linear-gradient(to bottom, var(--washi) 0%, var(--washi) 50%, transparent 50%, transparent 100%);
      background-size: 1px 16px;
      animation: scrollDown 1.6s linear infinite
    }

    @keyframes scrollDown {
      from {
        background-position: 0 -16px
      }

      to {
        background-position: 0 16px
      }
    }

    /* ============ SECTIONS ============ */
    .sec {
      padding: 84px 40px;
      position: relative
    }

    /* Manifesto metni kaldırıldı — bölüm sadece hero ile koi arasında
       nefes payı bırakan boş bir geçiş alanı olarak duruyor. */
    #about {
      padding: 0;
      min-height: 22vh;
    }


    .sec-head .kanji {
      font-family: var(--font);
      font-size: 14px;
      letter-spacing: 0;
      color: var(--washi-2);
      font-weight: 400;
      font-style: italic
    }

    /* ============ MANIFESTO ============ */

    .manifesto em {
      font-style: italic;
      color: var(--shu);
      transition: color .4s
    }

    .manifesto .w {
      display: inline-block;
      opacity: 0;
      transform: translateY(30px) rotate(2deg);
      transition: opacity .8s ease, transform .8s var(--easing)
    }

    .manifesto .w.in {
      opacity: 1;
      transform: translateY(0) rotate(0)
    }

    .manifesto .small {
      display: block;
      margin-top: 56px;
      font-family: var(--font-mono);
      font-size: 11px;
      letter-spacing: .22em;
      text-transform: uppercase;
      color: var(--muted);
      font-style: normal;
      font-weight: 400
    }

    /* ============ KOI STAGE (ukiyo-e backdrop for yin-yang lock) ============ */
    .koi-stage {
      height: 100vh;
      position: relative;
      background: var(--sumi);
      overflow: hidden;
      display: flex;
      align-items: center;
      justify-content: center
    }

    .koi-stage-bg {
      position: absolute;
      inset: -80px;
      z-index: 0;
      will-change: transform
    }

    .koi-stage-bg img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      opacity: .55;
      display: block;
      /* filter + will-change kaldirildi: katman her scale degisiminde
         filtreyle birlikte bastan raster ediliyordu. Parent zaten promote. */
    }

    .koi-stage-bg::after {
      content: "";
      position: absolute;
      inset: 0;
      background: radial-gradient(ellipse at center, rgba(14, 13, 11, 0) 20%, rgba(14, 13, 11, .65) 80%)
    }

    /* ============ KOI STAGE — fixed, her zaman ekranda ============ */
    /* koi-stage inline style'ı override ediyoruz */
    #koiEnd {
      position: fixed !important;
      top: 0 !important;
      left: 0 !important;
      width: 100% !important;
      height: 100vh !important;
      z-index: 1 !important;
      overflow: hidden;
      /* visibility gecikmesiz acilir, kapanirken opacity bitince devreye girer */
      transition: opacity 0.5s ease, visibility 0s linear 0s;
    }

    #koiEnd.koi-hidden {
      opacity: 0;
      pointer-events: none;
      /* Sadece opacity:0 yetmiyordu — sabit tam ekran sahne hala compose
         ediliyordu. visibility ile sayfanin geri kalaninda boyama disi kalir. */
      visibility: hidden;
      transition: opacity 0.5s ease, visibility 0s linear 0.5s;
    }

    /* Üst fade — ukiyo'nun tepesi sumi'ye erir */
    #koiEnd::after {
      content: "";
      position: absolute;
      top: 0; left: 0; right: 0;
      height: 35%;
      background: linear-gradient(to bottom, rgba(14,13,11,0.75), transparent);
      pointer-events: none;
      z-index: 2;
    }

    /* ============ WORK SECTION — koi üzerine kayarak biner ============ */
    #workSec {
      position: relative;
      border-radius: 28px 28px 0 0;
      /* workSec koiCanvas (z:20) üzerinde */
      z-index: 25;
    }

    /* Kanji + çizgi şeridi — workSec'in kavisli üst kenarında */
    .ws-entrance {
      position: absolute;
      top: 72px;
      left: 0; right: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0 48px;
      z-index: 30;
      pointer-events: none;
    }

    .wse-line {
      height: 1px;
      background: rgba(244, 239, 230, 0.22);
      flex: 1;
      transform: scaleX(0);
      transition: transform 0.9s cubic-bezier(0.7, 0, 0.2, 1) 0.1s;
    }

    .wse-line.wse-left  { transform-origin: right; }
    .wse-line.wse-right { transform-origin: left; }

    #workSec.work-entered .wse-line {
      transform: scaleX(1);
    }

    .wse-kanji {
      font-family: var(--font);
      font-size: 20px;
      font-weight: 300;
      color: rgba(244, 239, 230, 0.3);
      letter-spacing: 0.1em;
      padding: 0 20px;
      flex-shrink: 0;
      opacity: 0;
      transition: opacity 0.7s ease 0.35s;
    }

    #workSec.work-entered .wse-kanji {
      opacity: 1;
    }

    /* koiTrack üst fade — light-zone'dan geçişi yumuşatır */
    #koiTrack::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 120px;
      background: linear-gradient(to bottom, var(--washi), transparent);
      pointer-events: none;
      z-index: 10;
    }

    /* ============ SECTION HEADS ============ */
    .sec-head {
      padding-top: 40px;
      border-top: 1px solid var(--line);
      display: flex;
      justify-content: space-between;
      align-items: flex-end;
      margin-bottom: 60px;
      font-family: var(--font-mono);
      font-size: 11px;
      letter-spacing: .2em;
      text-transform: uppercase;
      color: var(--muted);
    }

    .sec-head .kanji {
      font-family: var(--font);
      font-size: 32px;
      color: var(--washi-2);
      opacity: 0.3;
      font-weight: 300;
      letter-spacing: 0;
    }

    /* ============ WORK (Premium Pinned Horizontal) ============ */
    .sec-pinned {
      height: 100vh;
      overflow: hidden;
      display: flex;
      align-items: center;
      justify-content: center; /* REQUIRED FOR HORIZONTAL SCROLL MATH */
      position: relative;
      z-index: 10;
      background: var(--sumi);
    }

    /* ============ PERSPECTIVE GRID BG ============ */
    .work-perspective-bg {
      position: absolute;
      inset: 0;
      pointer-events: none;
      z-index: 0;
      /* NO overflow:hidden here — kills 3D context; sec-pinned clips instead */
      perspective: 2000px;
    }

    .pg-inner {
      position: absolute;
      width: 80rem;
      aspect-ratio: 1/1;
      display: grid;
      grid-template-columns: repeat(40, 1fr);
      grid-template-rows: repeat(40, 1fr);
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%) rotateX(30deg) rotateY(-5deg) rotateZ(20deg) scale(2);
      pointer-events: auto;
      z-index: 1;
    }

    .pg-tile {
      min-width: 1px;
      min-height: 1px;
      border: 1px solid rgba(244, 239, 230, 0.07);
      background-color: transparent;
      box-sizing: border-box;
      transition: background-color 1s var(--easing), border-color 1s var(--easing);
      /* Default color if variable is missing */
      --tile-color: rgba(184, 0, 0, 0.35);
      --tile-border: rgba(184, 0, 0, 0.6);
    }

    .pg-tile:hover {
      background-color: var(--tile-color);
      border-color: var(--tile-border);
      transition: background-color 0s, border-color 0s;
      z-index: 5;
    }

    /* ---- RITME TEPKI VEREN KAROLAR ----
       Muzik acikken izgaranin secili kareleri kendi renginde yanip soner.
       Sadece bu karolara stil yaziliyor; 1600 karonun tamami degil. */
    .pg-tile.pg-beat {
      transition: background-color .12s linear, border-color .18s linear;
    }

    .pg-tile.filled {
      background-color: rgba(244,239,230,0.03);
      border-color: rgba(244,239,230,0.12);
    }

    .pg-overlay {
      position: absolute;
      inset: 0;
      z-index: 1;
      pointer-events: none;
      background: radial-gradient(circle, transparent 20%, var(--sumi) 78%);
    }

    .horizontal-scroll-wrap {
      display: flex;
      flex-wrap: nowrap;
      gap: 60px;
      will-change: transform;
      height: 60vh;
      align-items: center;
      width: auto;
      justify-content: center;
      position: relative;
      z-index: 2;
    }

    .premium-card {
      flex-shrink: 0;
      width: 360px;
      transition: transform 0.8s var(--easing), opacity 0.8s var(--easing);
      display: flex;
      flex-direction: column;
    }

    .sec-pinned .sec-head {
      border: none;
      padding: 0;
      margin: 0;
      position: absolute;
      top: 40px;
      left: 40px;
      z-index: 50;
    }

    /* ============ MANIFESTO REVEAL ============ */
    .sec-manifesto {
      height: 100vh;
      position: relative;
      overflow: hidden;
    }

    .manifesto {
      font-size: clamp(26px, 3.4vw, 50px);
      line-height: 1.18;
      font-weight: 300;
      text-align: center;
      max-width: 1080px;
      position: relative;
      margin: 0 auto;
      width: 100%;
      height: auto;
    }

    .m-lead {
      display: block;
    }

    .m-sub {
      display: block;
      margin-top: 32px;
      font-size: clamp(14px, 1.1vw, 17px);
      line-height: 1.65;
      color: var(--muted);
      max-width: 620px;
      margin-left: auto;
      margin-right: auto;
    }

    .manifesto .m-sub em {
      font-style: italic;
      color: var(--sumi) !important;
      opacity: .9;
    }

    .manifesto .word {
      display: inline-block;
      transform: translateY(0);
      opacity: 1;
      color: var(--washi);
    }

    .manifesto em {
      font-style: italic;
      color: var(--shu);
    }

    .premium-card {
      display: flex;
      flex-direction: column;
      gap: 16px;
      position: relative;
      cursor: none;
      will-change: transform;
      transform: translate3d(calc(var(--mx, 0)*1px), calc(var(--my, 0)*1px), 0);
      transition: transform 0.1s linear;
    }

    .premium-media {
      width: 100%;
      aspect-ratio: 1/1;
      background: var(--sumi-2);
      border-radius: 32px;
      overflow: hidden;
      position: relative;
      transform: translateZ(0);
      transition: box-shadow 0.6s ease;
      border: 1px solid rgba(244,239,230,0.07);
      border-top-color: rgba(244,239,230,0.16);
      box-shadow: inset 0 1px 0 rgba(244,239,230,0.10), 0 8px 32px rgba(0,0,0,0.32);
    }

    .premium-media img,
    .premium-media video {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block !important;
      transition: transform 1.2s var(--easing);
      transform: translate3d(calc(var(--mx, 0)*0.5px), calc(var(--my, 0)*0.5px), 0) scale(1.02);
      z-index: 1;
    }

    .premium-card:hover .premium-media {
      box-shadow: 0 40px 80px -20px rgba(0, 0, 0, 0.6);
    }

    /* ---- TEK KART: İşler kapısı ---- */
    /* Şeritte tek kart kaldığı için kart büyütülüp ortalanıyor. */
    .horizontal-scroll-wrap:has(> .premium-card:only-child) { justify-content: center; }
    .premium-card.card-gateway {
      width: min(560px, 82vw);
    }
    .premium-card.card-gateway .premium-media { aspect-ratio: 16/10; }
    .premium-card.card-gateway .premium-title { font-size: clamp(30px, 4vw, 44px); }
    /* Tek kartta metin az: başlık + tek satır künye. */
    .premium-card.card-gateway .premium-meta { padding: 18px 22px 20px; }
    .premium-card.card-gateway .premium-num { font-size: 10px; letter-spacing: .18em; text-transform: uppercase; }
    @media (max-width: 900px) {
      .premium-card.card-gateway { width: min(560px, 86vw); }
      .premium-card.card-gateway .premium-media { aspect-ratio: 4/3; }
      .premium-card.card-gateway .premium-num { font-size: 9px; letter-spacing: .14em; }
    }

    /* ---- ÇOKLU GÖRSEL MOZAİĞİ ---- */
    /* 2×2 eşit ızgara. Her görsel kendi hücresinde — taşma yok, hizalama net. */
    .pm-mosaic {
      position: absolute;
      inset: 0;
      z-index: 1;
      display: grid;
      grid-template-columns: 1fr 1fr;
      grid-template-rows: 1fr 1fr;
      gap: 2px;
      background: rgba(244, 239, 230, 0.08);
      /* Safari'de border-radius + transform sızıntısını engeller */
      overflow: hidden;
      border-radius: inherit;
      transform: translateZ(0);
    }
    .pm-mosaic .pm-cell {
      position: relative;
      display: block;
      overflow: hidden;
      background: var(--sumi-2);
      min-width: 0;
      min-height: 0;
    }
    /* .premium-media img kuralını (absolute/inset/transform) hücre içinde sıfırla */
    .pm-mosaic .pm-cell img {
      position: absolute !important;
      inset: 0 !important;
      width: 100% !important;
      height: 100% !important;
      object-fit: cover;
      transform: none !important;
      transition: transform 1.1s var(--easing), filter .6s ease;
      filter: saturate(.92) contrast(1.02);
      z-index: auto;
    }
    .premium-card:hover .pm-mosaic .pm-cell img {
      transform: scale(1.05) !important;
      filter: saturate(1) contrast(1);
    }

    @media (max-width: 900px) {
      .pm-mosaic { gap: 2px; }
    }

    .premium-card:hover .premium-media img,
    .premium-card:hover .premium-media video {
      transform: translate3d(calc(var(--mx, 0)*0.8px), calc(var(--my, 0)*0.8px), 0) scale(1.05);
    }

    /* ---- Çoklu görsel mozaiği: üstte hero, altta 3 küçük ---- */
    .premium-media .pm-mosaic {
      position: absolute;
      inset: 0;
      z-index: 1;
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      grid-template-rows: 1.9fr 1fr;
      gap: 3px;
      background: rgba(244, 239, 230, 0.10);
    }

    .premium-media .pm-mosaic img {
      position: relative;
      inset: auto;
      width: 100%;
      height: 100%;
      object-fit: cover;
      transform: none;
      transition: transform 1.1s var(--easing), filter 0.6s ease;
      filter: saturate(0.9);
    }

    .premium-media .pm-mosaic .m-hero {
      grid-column: 1 / 4;
      grid-row: 1 / 2;
    }

    .premium-card:hover .premium-media .pm-mosaic img {
      transform: scale(1.06);
      filter: saturate(1);
    }

    /* mozaik karolarının üstünde ince ayraç hissi */
    .premium-media .pm-mosaic::after {
      content: '';
      position: absolute;
      inset: 0;
      pointer-events: none;
      box-shadow: inset 0 1px 0 rgba(244, 239, 230, 0.12);
      z-index: 2;
    }

    .pm-count {
      position: absolute;
      right: 14px;
      bottom: 14px;
      z-index: 3;
      font-family: var(--font-mono);
      font-size: 9px;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: var(--washi);
      background: rgba(14, 13, 11, 0.72);
      padding: 6px 10px;
      border-radius: 999px;
      backdrop-filter: blur(6px);
    }

    .premium-meta {
      display: flex;
      flex-direction: column;
      gap: 8px;
      padding: 14px 18px;
      background: linear-gradient(135deg, rgba(244,239,230,0.07) 0%, rgba(244,239,230,0.02) 60%, rgba(27,58,91,0.05) 100%);
      backdrop-filter: blur(20px) saturate(150%);
      -webkit-backdrop-filter: blur(20px) saturate(150%);
      border: 1px solid rgba(244,239,230,0.08);
      border-top-color: rgba(244,239,230,0.18);
      border-radius: 18px;
      box-shadow: inset 0 1px 0 rgba(244,239,230,0.12), inset 0 -1px 0 rgba(0,0,0,0.10), 0 4px 16px rgba(0,0,0,0.22);
    }

    .premium-left {
      display: flex;
      flex-direction: column;
      gap: 4px
    }

    .premium-num {
      font-family: var(--font-mono);
      font-size: 10px;
      letter-spacing: .15em;
      color: var(--muted)
    }

    .premium-title {
      font-family: var(--font);
      font-size: 22px;
      line-height: 1.2;
      font-weight: 400;
      letter-spacing: -0.02em
    }

    .premium-title em {
      font-style: italic;
      color: var(--shu)
    }

    .premium-tags {
      font-family: var(--font-mono);
      font-size: 9px;
      text-transform: uppercase;
      letter-spacing: 0.12em;
      color: var(--muted);
      display: flex;
      gap: 8px;
      flex-wrap: wrap
    }

    .premium-desc {
      display: none
    }

    /* Hidden for compact 6-card view */
    .work-cta-row {
      display: none
    }

    /* Simplified interaction for the grid */
    @media (max-width: 1024px) {
      .work-grid {
        grid-template-columns: repeat(2, 1fr)
      }
    }

    @media (max-width: 768px) {
      .work-grid {
        grid-template-columns: 1fr
      }
    }

    /* ============ ZANAAT & İŞLER — tek bölüm, çizgisel ============ */
    .sec-craft {
      position: relative;
      z-index: 10;
      background: var(--sumi);
      padding: 148px 40px 140px;
      overflow: hidden;
    }

    /* Alt kenar — perspektif grid dokusu sumi'ye eriyerek footer'a bağlanır */
    .sec-craft::after {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      height: 340px;
      background: linear-gradient(to bottom, rgba(14, 13, 11, 0) 0%, rgba(14, 13, 11, .72) 55%, var(--sumi) 100%);
      pointer-events: none;
      z-index: 2;
    }

    .craft-inner {
      position: relative;
      z-index: 3;
      max-width: 1180px;
      margin: 0 auto;
    }

    .craft-anchor {
      position: absolute;
      top: -100px;
      left: 0;
      width: 1px;
      height: 1px;
    }

    .craft-head {
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      gap: 48px;
      margin: 28px 0 56px;
      flex-wrap: wrap;
    }

    /* Yetenekler basligi — isler seridinden sonra gelir, nefes payi ister */
    .craft-head--alt { margin: 104px 0 40px; }
    @media (max-width: 768px) { .craft-head--alt { margin: 72px 0 28px; } }
    .craft-head--alt .craft-title { font-size: clamp(38px, 5vw, 72px); }

    .craft-title {
      font-family: var(--font);
      font-size: clamp(44px, 6vw, 92px);
      font-weight: 300;
      letter-spacing: -.045em;
      line-height: 1;
      margin: 0;
      color: var(--washi);
    }

    .craft-title em {
      font-style: italic;
      color: var(--shu);
    }

    .craft-desc {
      font-size: 14px;
      line-height: 1.7;
      color: var(--muted);
      max-width: 380px;
      margin: 0 0 8px;
    }

    /* ---- kart linkleri ---- */
    a.skill-card {
      text-decoration: none;
      cursor: none;
    }

    /* ---- yaptığım işler ---- */


    /* ============ YETENEKLER — kompakt satir listesi ============
       Kartlar link degildi ama link gibi duruyordu; hover + yuvarlak kutu
       "tikla" vaadi veriyor, tiklayinca bir sey olmuyordu. Artik duz bir
       liste: okunur, tiklanmaz, iddia etmez. */
    .cap-list{
      list-style:none; margin:0; padding:0;
      border-top:1px solid rgba(244,239,230,.10);
    }
    .cap-row{
      display:grid;
      grid-template-columns:26px 200px 1fr;
      align-items:baseline;
      gap:20px;
      padding:15px 2px;
      border-bottom:1px solid rgba(244,239,230,.07);
    }
    .cap-kanji{
      font-size:15px; line-height:1; color:var(--shu);
      opacity:.42; text-align:center;
    }
    .cap-name{
      font-size:15.5px; font-weight:500; letter-spacing:-.01em;
      color:var(--washi);
    }
    .cap-desc{
      font-size:13.5px; line-height:1.5; color:var(--washi-2);
    }
    @media (max-width:768px){
      .cap-row{ grid-template-columns:22px 1fr; gap:6px 14px; padding:13px 0 }
      .cap-desc{ grid-column:2; font-size:12.5px }
    }

    /* ============ IS SERIDI — sonsuz kayan sessiz loop'lar ============ */
    .cw-head{ align-items:center }
    .cw-all{
      font-family:var(--font-mono); font-size:11px; letter-spacing:.14em;
      color:var(--washi-2); text-decoration:none; transition:color .3s ease;
    }
    .cw-all:hover{ color:var(--washi) }

    .reel{
      display:block; margin-top:20px; overflow:hidden;
      /* hafif egim — dumduz kaymak yerine kagit uzerinde kayan bir serit */
      transform:rotate(-1.35deg) scale(1.035);
      padding-block:10px;
      -webkit-mask-image:linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
      mask-image:linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
      cursor:pointer;
    }
    .reel-track{
      display:flex; align-items:center; width:max-content;
      animation:reelSlide 56s linear infinite;
    }
    .reel-track video{
      width:288px; height:180px; object-fit:cover; display:block; flex:none;
      /* hafif ust uste binme — galeri hissi */
      margin-right:-26px;
      border-radius:3px;
      border:1px solid rgba(244,239,230,.10);
      filter:grayscale(1) brightness(.66);
      transition:filter .45s ease, transform .45s ease, margin .45s ease;
      transform:translateZ(0);
    }
    .reel-track video:hover{
      filter:grayscale(0) brightness(1);
      transform:scale(1.06);
      margin-right:0;
      z-index:2; position:relative;
    }
    @keyframes reelSlide{ from{ transform:translateX(0) } to{ transform:translateX(-50%) } }
    @media (prefers-reduced-motion:reduce){ .reel-track{ animation:none } }
    @media (max-width:768px){
      .reel-track video{ width:196px; height:124px; margin-right:-18px }
      .reel-track{ animation-duration:40s }
    }

    .craft-works {
      margin-top: 8px;
    }

    .cw-head--solo { justify-content: flex-end; }

    .cw-head {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      gap: 24px;
      padding-bottom: 18px;
      margin-bottom: 22px;
      border-bottom: 1px solid rgba(244, 239, 230, .12);
      font-family: var(--font-mono);
      font-size: 11px;
      letter-spacing: .2em;
      text-transform: uppercase;
      color: var(--washi-2);
    }

    .work-card:hover

    .work-card .sc-desc {
      font-family: var(--font-mono);
      font-size: 10px;
      letter-spacing: .12em;
      text-transform: uppercase;
      margin-top: 10px;
    }

    /* ---- Tüm İşler kartı — diğer kartlarla aynı boyut ---- */
    .skill-tree .card-all {
      min-height: 104px;
      padding: 18px 22px;
      border-top-color: rgba(197, 72, 47, .35);
    }

    .card-all .sc-title {
      font-family: var(--font);
      font-size: 26px;
      font-weight: 300;
      letter-spacing: -.03em;
      line-height: 1.1;
    }

    .card-all .sc-title em {
      font-style: italic;
      color: var(--shu);
    }

    .card-all .sc-desc {
      font-family: var(--font-mono);
      font-size: 10px;
      letter-spacing: .12em;
      text-transform: uppercase;
      margin-top: 10px;
    }

    @media (max-width: 900px) {
      .sec-craft {
        padding: 88px 24px 80px;
      }

      .craft-head {
        margin: 24px 0 36px;
      }

      .craft-works {
        margin-top: 4px;
      }

      .work-tree {
        grid-template-columns: 1fr !important;
      }

      .card-all .sc-title {
        font-size: 20px !important;
      }

      .card-all .sc-desc {
        display: block !important;
        font-size: 9px !important;
      }
    }

    /* ============ CAPABILITIES (Premium Revamp) ============ */
    .sec-caps {
      position: relative;
      padding: 84px 0;
      overflow: hidden;
    }

    .caps-parallax-bg {
      position: absolute;
      left: -5%;
      top: 20%;
      font-size: 60vh;
      font-family: var(--font);
      color: var(--washi);
      opacity: 0.03;
      font-weight: 900;
      pointer-events: none;
      will-change: transform;
      z-index: 1;
      line-height: 1;
    }

    .caps-container {
      display: grid;
      grid-template-columns: 1fr 1.2fr;
      gap: 100px;
      max-width: 1400px;
      margin: 0 auto;
      padding: 0 40px;
      position: relative;
      z-index: 2;
    }

    .caps-container {
      display: grid;
      grid-template-columns: 1fr 1.5fr;
      gap: 80px;
      align-items: flex-start;
      position: relative;
      z-index: 2;
    }

    .caps-left {
      position: sticky;
      top: 120px;
      display: flex;
      flex-direction: column;
      gap: 24px;
      opacity: 0;
      transform: translateY(30px);
      will-change: opacity, transform;
    }

    .caps-left h2 {
      font-size: clamp(40px, 5vw, 72px);
      font-weight: 300;
      letter-spacing: -0.04em;
      margin: 0;
      line-height: 1.1;
    }

    .caps-left .caps-side-text {
      font-size: 14px;
      line-height: 1.6;
      color: var(--muted);
      max-width: 320px;
      margin-top: 24px;
    }

    .skill-tree {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 14px;
    }

    .sec-caps h2 em {
      color: var(--shu);
      font-style: normal;
    }

    /* ---- Liquid Glass Skill Card ---- */
    .skill-card {
      position: relative;
      overflow: hidden;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      padding: 26px 28px;
      min-height: 120px;
      border-radius: 14px;
      cursor: default;

      /* Liquid glass layers */
      background: linear-gradient(
        135deg,
        rgba(244, 239, 230, 0.08) 0%,
        rgba(244, 239, 230, 0.025) 45%,
        rgba(27, 58, 91, 0.06) 100%
      );
      /* backdrop-filter kaldırıldı: on kartın her biri arkasındaki alanı
         yeniden bulanıklaştırıyordu, kaydırmadaki kasmanın büyük kısmı buydu.
         Yerine sabit yarı saydam katman — görsel fark neredeyse yok. */
      background-color: rgba(30, 27, 22, 0.55);
      border: 1px solid rgba(244, 239, 230, 0.09);
      border-top-color: rgba(244, 239, 230, 0.22);
      box-shadow:
        inset 0 1px 0 rgba(244, 239, 230, 0.16),
        inset 0 -1px 0 rgba(0, 0, 0, 0.12),
        0 8px 32px rgba(0, 0, 0, 0.28),
        0 2px 8px rgba(0, 0, 0, 0.18);

      /* Reveal state - now magnetic by default */
      opacity: 1;
      transform: translate(calc(var(--mx, 0) * 1px), calc(var(--my, 0) * 1px));
      will-change: transform;
      transition:
        border-color 0.4s,
        background 0.4s,
        box-shadow 0.4s,
        transform 0.1s linear; /* Smooth magnetic follow */
    }

    /* Iridescent shimmer pseudo-element */
    .skill-card::before {
      content: '';
      position: absolute;
      inset: 0;
      border-radius: inherit;
      background: linear-gradient(
        110deg,
        rgba(244, 239, 230, 0.06) 0%,
        rgba(197, 72, 47, 0.04) 35%,
        rgba(27, 58, 91, 0.06) 70%,
        rgba(244, 239, 230, 0.03) 100%
      );
      opacity: 0;
      transition: opacity 0.5s ease;
      pointer-events: none;
    }

    .skill-card:hover::before {
      opacity: 1;
    }

    .skill-card:hover {
      border-color: rgba(244, 239, 230, 0.18);
      border-top-color: rgba(244, 239, 230, 0.38);
      box-shadow:
        inset 0 1px 0 rgba(244, 239, 230, 0.28),
        inset 0 -1px 0 rgba(0, 0, 0, 0.1),
        0 16px 48px rgba(0, 0, 0, 0.36),
        0 0 24px rgba(197, 72, 47, 0.06);
    }

    .sc-content {
      flex: 1;
      min-width: 0;
    }

    .sc-num {
      font-family: var(--font-mono);
      font-size: 10px;
      color: var(--muted);
      display: block;
      margin-bottom: 8px;
      letter-spacing: 0.14em;
    }

    .sc-title {
      font-size: 18px;
      font-weight: 400;
      color: var(--washi);
      line-height: 1.2;
      letter-spacing: -0.01em;
    }

    .sc-desc {
      font-size: 12px;
      color: var(--muted);
      margin-top: 6px;
      line-height: 1.5;
    }

    .sc-kanji {
      flex-shrink: 0;
      font-size: 52px;
      font-family: var(--font);
      font-weight: 300;
      color: var(--washi);
      opacity: 0.1;
      transition: opacity 0.5s, color 0.5s, transform 0.5s;
      pointer-events: none;
      line-height: 1;
    }

    .skill-card:hover .sc-kanji {
      opacity: 0.28;
      color: var(--shu);
      transform: scale(1.12) rotate(-4deg);
    }

    /* ============ FUTURE ============ */
    .future {
      margin-top: 100px;
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 24px;
      position: relative;
      z-index: 2
    }

    .future-slot {
      aspect-ratio: 1/1;
      border: 1px dashed var(--line);
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      padding: 24px;
      color: var(--muted);
      font-family: var(--font-mono);
      font-size: 10px;
      letter-spacing: .22em;
      text-transform: uppercase;
      transition: border-color .5s ease, color .5s ease, transform .5s var(--easing);
      will-change: transform
    }

    .future-slot:hover {
      border-color: var(--washi-2);
      color: var(--washi-2);
      transform: translateY(-6px)
    }

    .future-slot .kanji {
      font-family: var(--font);
      font-size: 64px;
      letter-spacing: 0;
      color: var(--washi-2);
      opacity: .3;
      font-weight: 300
    }

    .future-slot .label {
      font-size: 11px
    }

    /* ============ FOOTER ============ */

    .foot-content {
      position: relative;
      z-index: 3;
      max-width: 60%
    }

    .lily-bloom {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      width: min(22vw, 320px);
      aspect-ratio: 5/6;
      z-index: 1;
      opacity: 0;
      transition: opacity 1.2s ease;
      pointer-events: none
    }

    .lily-bloom.show {
      opacity: 1
    }

    .lily-bloom svg {
      width: 100%;
      height: 100%;
      overflow: visible;
      display: block
    }

    /* STEM */
    .lily-bloom #lStem {
      stroke: rgba(244, 239, 230, .55);
      stroke-width: 1.4;
      stroke-linecap: round;
      fill: none;
      stroke-dasharray: 500;
      stroke-dashoffset: 500;
      transition: stroke-dashoffset 1.8s cubic-bezier(.7, 0, .2, 1)
    }

    .lily-bloom.show #lStem {
      stroke-dashoffset: 0
    }

    /* LEAVES */
    .lily-bloom .lLeaf {
      stroke: rgba(244, 239, 230, .42);
      stroke-width: 1;
      fill: none;
      stroke-linecap: round;
      stroke-dasharray: 160;
      stroke-dashoffset: 160;
      transition: stroke-dashoffset 1.2s cubic-bezier(.7, 0, .2, 1)
    }

    .lily-bloom.show .lLeaf:nth-of-type(1) {
      transition-delay: 1.2s
    }

    .lily-bloom.show .lLeaf:nth-of-type(2) {
      transition-delay: 1.4s
    }

    .lily-bloom.show .lLeaf {
      stroke-dashoffset: 0
    }

    /* PETALS — recurved */
    .lily-bloom .lPetal {
      stroke: #B80000;
      stroke-width: 1.6;
      fill: none;
      stroke-linecap: round;
      stroke-linejoin: round;
      stroke-dasharray: 300;
      stroke-dashoffset: 300;
      transition: stroke-dashoffset 1.1s cubic-bezier(.7, 0, .2, 1)
    }

    .lily-bloom.show .petal-set g:nth-child(1) .lPetal {
      transition-delay: 1.6s
    }

    .lily-bloom.show .petal-set g:nth-child(2) .lPetal {
      transition-delay: 1.74s
    }

    .lily-bloom.show .petal-set g:nth-child(3) .lPetal {
      transition-delay: 1.88s
    }

    .lily-bloom.show .petal-set g:nth-child(4) .lPetal {
      transition-delay: 2.02s
    }

    .lily-bloom.show .petal-set g:nth-child(5) .lPetal {
      transition-delay: 2.16s
    }

    .lily-bloom.show .petal-set g:nth-child(6) .lPetal {
      transition-delay: 2.30s
    }

    .lily-bloom.show .lPetal {
      stroke-dashoffset: 0
    }

    /* STAMENS — longer, finer, between petals */
    .lily-bloom .lStamen {
      stroke: #B80000;
      stroke-width: .95;
      fill: none;
      stroke-linecap: round;
      opacity: .85;
      stroke-dasharray: 400;
      stroke-dashoffset: 400;
      transition: stroke-dashoffset 1.3s cubic-bezier(.7, 0, .2, 1)
    }

    .lily-bloom.show .stamen-set g:nth-child(1) .lStamen {
      transition-delay: 2.5s
    }

    .lily-bloom.show .stamen-set g:nth-child(2) .lStamen {
      transition-delay: 2.62s
    }

    .lily-bloom.show .stamen-set g:nth-child(3) .lStamen {
      transition-delay: 2.74s
    }

    .lily-bloom.show .stamen-set g:nth-child(4) .lStamen {
      transition-delay: 2.86s
    }

    .lily-bloom.show .stamen-set g:nth-child(5) .lStamen {
      transition-delay: 2.98s
    }

    .lily-bloom.show .stamen-set g:nth-child(6) .lStamen {
      transition-delay: 3.10s
    }

    .lily-bloom.show .lStamen {
      stroke-dashoffset: 0
    }

    /* ANTHERS */
    .lily-bloom .lAnther {
      fill: #D94040;
      opacity: 0;
      transform-origin: center;
      transform-box: fill-box;
      transform: scale(0);
      transition: opacity .6s ease, transform .8s cubic-bezier(.5, 1.6, .4, 1)
    }

    .lily-bloom.show .stamen-set g:nth-child(1) .lAnther {
      transition-delay: 3.5s
    }

    .lily-bloom.show .stamen-set g:nth-child(2) .lAnther {
      transition-delay: 3.62s
    }

    .lily-bloom.show .stamen-set g:nth-child(3) .lAnther {
      transition-delay: 3.74s
    }

    .lily-bloom.show .stamen-set g:nth-child(4) .lAnther {
      transition-delay: 3.86s
    }

    .lily-bloom.show .stamen-set g:nth-child(5) .lAnther {
      transition-delay: 3.98s
    }

    .lily-bloom.show .stamen-set g:nth-child(6) .lAnther {
      transition-delay: 4.10s
    }

    .lily-bloom.show .lAnther {
      opacity: 1;
      transform: scale(1)
    }

    /* HEART GLOW + CORE */
    .lily-bloom #lGlow {
      opacity: 0;
      transform: scale(.2);
      transform-origin: center;
      transform-box: fill-box;
      transition: opacity 1s ease 3.6s, transform 1.6s cubic-bezier(.6, 0, .2, 1) 3.6s
    }

    .lily-bloom.show #lGlow {
      opacity: 1;
      transform: scale(1);
      animation: lilyHeartPulse 5s ease-in-out infinite 5.2s
    }

    .lily-bloom #lCore {
      opacity: 0;
      transition: opacity .8s ease 4.0s
    }

    .lily-bloom.show #lCore {
      opacity: 1;
      animation: lilyCoreBreath 4s ease-in-out infinite 4.6s
    }

    @keyframes lilyHeartPulse {

      0%,
      100% {
        transform: scale(1);
        filter: brightness(1)
      }

      50% {
        transform: scale(1.12);
        filter: brightness(1.25)
      }
    }

    @keyframes lilyCoreBreath {

      0%,
      100% {
        filter: brightness(1) drop-shadow(0 0 2px rgba(184, 0, 0, .5))
      }

      50% {
        filter: brightness(1.4) drop-shadow(0 0 8px rgba(184, 0, 0, .8))
      }
    }


    .foot-big em {
      color: var(--shu)
    }


    .foot-mail::after {
      content: "";
      position: absolute;
      left: 0;
      bottom: -4px;
      width: 100%;
      height: 1px;
      background: var(--washi);
      transform: scaleX(.3);
      transform-origin: left;
      transition: transform .5s var(--easing)
    }

    .foot-mail:hover::after {
      transform: scaleX(1)
    }

    .foot-row {
      display: flex;
      justify-content: space-between;
      align-items: end;
      font-family: var(--font-mono);
      font-size: 11px;
      letter-spacing: .2em;
      text-transform: uppercase;
      color: var(--muted);
      padding-top: 28px;
      margin-top: 44px;
      border-top: none;
      position: relative;
      z-index: 2
    }

    .foot-row::before {
      content: '';
      position: absolute;
      left: 0;
      top: 0;
      width: 48px;
      height: 1px;
      background: rgba(244,239,230,0.18);
    }

    .foot-row .year {
      color: var(--washi)
    }

    /* ============ FOOTER ============ */
    footer {
      padding: 88px 40px 44px;
      position: relative;
      z-index: 10;
      background: var(--sumi);
      margin: 0;
      border: none;
    }

    .foot-content {
      max-width: 1200px;
      margin: 0 auto
    }

    .foot-big {
      font-family: var(--font);
      font-weight: 300;
      font-size: clamp(38px, 5.4vw, 80px);
      line-height: 1;
      letter-spacing: -.045em;
      margin-bottom: 24px
    }

    .foot-big em {
      font-style: italic;
      color: var(--shu)
    }
    .foot-grid {
      display: grid;
      grid-template-columns: 1fr 340px;
      gap: 56px;
      align-items: center;
      margin-bottom: 40px;
      position: relative;
      z-index: 2;
    }

    /* ============ iPOD — çalma listesi kabı ============ */
    .ipod {
      width: 100%;
      max-width: 340px;
      margin-left: auto;
      padding: 18px 18px 20px;
      border-radius: 30px;
      background:
        linear-gradient(158deg, #34302b 0%, #211e1a 42%, #2b2723 72%, #191612 100%);
      border: 1px solid rgba(244, 239, 230, .13);
      border-top-color: rgba(244, 239, 230, .26);
      box-shadow:
        inset 0 1px 0 rgba(244, 239, 230, .18),
        inset 0 -1px 0 rgba(0, 0, 0, .35),
        0 26px 60px -18px rgba(0, 0, 0, .65);
    }

    .ipod-screen {
      border-radius: 6px;
      overflow: hidden;
      background: #0b0a09;
      border: 1px solid rgba(0, 0, 0, .6);
      box-shadow:
        inset 0 0 0 1px rgba(244, 239, 230, .06),
        inset 0 3px 10px rgba(0, 0, 0, .55);
    }

    .ipod-screen iframe {
      display: block;
      border: 0;
    }

    .ipod-wheel {
      position: relative;
      width: 176px;
      height: 176px;
      margin: 22px auto 4px;
      border-radius: 50%;
      background:
        radial-gradient(circle at 50% 32%, #2f2b26 0%, #232019 60%, #1b1815 100%);
      border: 1px solid rgba(244, 239, 230, .09);
      box-shadow:
        inset 0 2px 6px rgba(0, 0, 0, .5),
        inset 0 -1px 0 rgba(244, 239, 230, .07);
    }

    .iw-center {
      position: absolute;
      left: 50%;
      top: 50%;
      width: 66px;
      height: 66px;
      margin: -33px 0 0 -33px;
      border-radius: 50%;
      background: linear-gradient(160deg, #3a352f, #211e1a);
      border: 1px solid rgba(244, 239, 230, .1);
      box-shadow: 0 4px 12px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(244, 239, 230, .12);
      cursor: none;
      display: block;
      transition: background .35s ease, box-shadow .35s ease, transform .35s var(--easing);
    }

    .iw-center:hover {
      background: linear-gradient(160deg, #4a443c, #2a2622);
      box-shadow: 0 6px 18px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(244, 239, 230, .2), 0 0 0 1px rgba(197, 72, 47, .3);
      transform: scale(1.04);
    }

    .iw-label {
      position: absolute;
      font-family: var(--font-mono);
      font-size: 9px;
      letter-spacing: .16em;
      color: rgba(244, 239, 230, .3);
      user-select: none;
      text-decoration: none;
      transition: color .3s ease;
    }

    a.iw-label {
      cursor: none;
      padding: 4px 8px;
      margin: -4px -8px;
    }

    a.iw-label:hover { color: var(--shu); }

    .iw-menu { top: 16px; left: 50%; transform: translateX(-50%); }
    .iw-play { bottom: 16px; left: 50%; transform: translateX(-50%); font-size: 11px; }
    .iw-prev { left: 18px; top: 50%; transform: translateY(-50%); font-size: 8px; }
    .iw-next { right: 18px; top: 50%; transform: translateY(-50%); font-size: 8px; }

    @media (max-width: 768px) {
      /* Mobilde iPod fazla yer kaplıyordu — gövde ve çark küçültüldü,
         ekran compact modda kalıyor. */
      .ipod {
        margin: 0 auto;
        max-width: 236px;
        padding: 11px 11px 12px;
        border-radius: 22px;
      }
      .ipod-wheel {
        width: 88px;
        height: 88px;
        margin: 11px auto 2px;
      }
      .iw-center {
        width: 34px;
        height: 34px;
        margin: -17px 0 0 -17px;
      }
      .iw-label { font-size: 8px; }
      .iw-menu { top: 10px; }
      .iw-play { bottom: 10px; font-size: 9px; }
      .iw-prev { left: 11px; }
      .iw-next { right: 11px; }
    }

    /* ============ ILETISIM KANALLARI ============
       WhatsApp ve e-posta esit agirlikta. Tek bir mailto satiri
       "yaz bana" demiyordu; bunlar tiklanacak sey gibi duruyor. */
    .foot-kanal {
      display: flex;
      flex-direction: column;
      gap: 10px;
      margin-top: 26px;
      max-width: 420px;
    }

    .kanal {
      display: grid;
      grid-template-columns: 20px 1fr auto;
      align-items: center;
      gap: 14px;
      padding: 15px 18px;
      border: 1px solid rgba(244, 239, 230, 0.16);
      border-radius: 3px;
      text-decoration: none;
      color: var(--washi);
      background: rgba(244, 239, 230, 0.03);
      transition: border-color .3s var(--easing), background .3s var(--easing), transform .3s var(--easing);
    }

    .kanal svg { width: 20px; height: 20px; fill: currentColor; opacity: .75 }
    .kanal b {
      display: block;
      font-family: var(--font);
      font-size: 16px;
      font-weight: 500;
      letter-spacing: -.01em;
    }
    .kanal i {
      display: block;
      margin-top: 2px;
      font-style: normal;
      font-family: var(--font-mono);
      font-size: 11px;
      letter-spacing: .06em;
      color: rgba(244, 239, 230, 0.52);
    }
    .kanal-ok {
      font-size: 15px;
      opacity: .35;
      transition: transform .3s var(--easing), opacity .3s var(--easing);
    }

    .kanal:hover,
    .kanal:focus-visible {
      border-color: rgba(244, 239, 230, 0.42);
      background: rgba(244, 239, 230, 0.07);
    }
    .kanal:hover .kanal-ok,
    .kanal:focus-visible .kanal-ok { transform: translateX(5px); opacity: .9 }

    /* WhatsApp birincil kanal — en cok kullanilan yol o */
    .kanal--wa { border-color: rgba(37, 211, 102, 0.34) }
    .kanal--wa svg { color: #25D366; opacity: 1 }
    .kanal--wa:hover, .kanal--wa:focus-visible {
      border-color: rgba(37, 211, 102, 0.72);
      background: rgba(37, 211, 102, 0.09);
    }

    @media (max-width: 640px) {
      .foot-kanal { max-width: none; margin-top: 20px }
      .kanal { padding: 14px 15px; gap: 12px }
      .kanal i { font-size: 10.5px }
    }

    @media (prefers-reduced-motion: reduce) {
      .kanal, .kanal-ok { transition: none }
    }

    .foot-mail {
      /* ::after alt çizgisi buna göre konumlansın — konumlandırma yoktu,
         çizgi en yakın positioned ata olan .foot-grid'in altına düşüyordu. */
      position: relative;
      display: inline-block;
      font-family: var(--font);
      font-size: clamp(18px, 2vw, 28px);
      color: var(--washi);
      text-decoration: none;
      transition: opacity .3s
    }

    .foot-mail:hover {
      opacity: .6
    }

    .foot-socials {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 9px;
      margin-top: 0;
      position: relative;
      z-index: 2
    }

    .social-card {
      position: relative;
      width: auto;
      height: auto;
      padding: 0;
      border: 0;
      border-radius: 0;
      background: none;
      display: inline-flex;
      align-items: center;
      transition: color .35s var(--easing);
      animation: none;
      text-decoration: none;
    }
    .social-card svg, .social-card i { display: none }

    /* kisa metin linkleri — ustteki basligi golgelemesin diye kisik ton */
    .social-card span {
      position: static !important;
      width: auto;
      height: auto;
      overflow: visible;
      clip: auto;
      clip-path: none;
      white-space: nowrap;
      font-family: var(--font-mono);
      font-size: 11.5px;
      letter-spacing: .16em;
      text-transform: uppercase;
      color: rgba(244, 239, 230, .40);
      border-bottom: 1px solid rgba(244, 239, 230, .12);
      padding-bottom: 3px;
      transition: color .35s var(--easing), border-color .35s var(--easing);
    }
    .social-card:hover span {
      color: rgba(244, 239, 230, .80);
      border-bottom-color: rgba(244, 239, 230, .34);
    }

    .social-card i,
    .social-card svg {
      transition: transform .4s var(--easing);
      color: var(--washi)
    }

    .social-card:hover { transform: none }



    

    

    

    


    @keyframes floatCard {
      from {
        transform: translateY(0)
      }

      to {
        transform: translateY(-12px)
      }
    }

    /* ============ KOI 3D CANVAS ============ */
    #koiCanvas {
      position: fixed;
      inset: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
      z-index: 20;
      display: block;
      /* --koi-depth: derinlikle artan görünürlük (render loop yazar)
         --koi-fade : work bölümü üstüne binince 0'a düşer */
      --koi-depth: 0.6;
      --koi-fade: 1;
      opacity: calc(var(--koi-depth) * var(--koi-fade));
      /* transition YOK: --koi-depth her karede güncelleniyordu, geçiş de her karede
         yeniden başlıyordu — kasmanın asıl kaynağı buydu. Yumuşatmayı JS yapıyor. */
    }

    /* small koi sketch corner */
    .koi-sketch {
      position: absolute;
      pointer-events: none;
      opacity: .14;
      z-index: 0
    }

    .koi-sketch svg {
      width: 100%;
      height: 100%
    }

    /* ============ RESPONSIVE ============ */
    @media(max-width:900px) {
      .curve-curtain {
        border-radius: 20px 20px 0 0;
      }
      .cc-kanji { font-size: 48px; }
      .cc-inner { padding: 0 24px; }
    }

    @media(max-width:900px) {
      /* Mobile: 3D perspective grid — same look as desktop, scaled to fit */
      .work-perspective-bg {
        display: block;
        overflow: hidden;
        perspective: 1200px;
      }
      .pg-inner {
        width: 240vw;
        aspect-ratio: 1/1;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%) rotateX(30deg) rotateY(-5deg) rotateZ(20deg) scale(1.4);
        grid-template-columns: repeat(16, 1fr);
        grid-template-rows: repeat(16, 1fr);
      }
      .pg-overlay {
        background: radial-gradient(circle, transparent 10%, var(--sumi) 65%);
      }

      nav {
        padding: 20px 24px
      }

      .nav-links {
        display: none;
      }

      .hero {
        padding: 60px 24px 40px;
        min-height: 100vh;
      }

      .hero-sticky {
        position: relative;
        min-height: 100vh;
        padding: 72px 22px 26px;
      }
      @supports (height: 100dvh) {
        .hero-sticky { min-height: 100dvh; }
      }

      .hero-stage {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        min-height: auto !important;
        transform: none !important;
      }

      .hero-portrait {
        position: relative !important;
        left: auto !important;
        top: auto !important;
        bottom: auto !important;
        width: 118px !important;
        max-width: none !important;
        margin: 0 auto 20px !important;
        transform: rotate(-3.5deg) !important;
      }

      .hero-name-inline {
        font-size: clamp(52px, 14vw, 88px);
        flex-direction: column;
        align-items: center;
        gap: 6px;
        margin: 0 0 15px 0 !important;
        line-height: 1;
      }

      .hero-role {
        font-size: 15px;
        line-height: 1.4;
        max-width: 300px;
        margin: 0 auto;
        opacity: 0.8;
      }

      .sketch-about {
        align-self: center;
        transform: rotate(-1deg);
        margin-top: 4px;
      }

      /* Work Section Mobile Fix */
      .sec-pinned {
        height: auto !important;
        min-height: 0 !important;
        padding: 60px 20px 48px !important;
        overflow: visible !important;
        display: block !important;
      }

      .sec-head-fixed {
        position: static !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        z-index: auto !important;
        margin-bottom: 0 !important;
        width: 100% !important;
      }

      /* Work section title — compact editorial strip */
      .sec-head-fixed .sec-head {
        justify-content: space-between !important;
        align-items: center !important;
        padding-top: 0 !important;
        border-top: none !important;
        border-bottom: 1px solid var(--line) !important;
        margin-bottom: 24px !important;
        padding-bottom: 10px !important;
        font-size: 10px !important;
        letter-spacing: 0.22em !important;
        opacity: 0.7;
      }

      .sec-head-fixed .sec-head .kanji {
        font-size: 18px !important;
        opacity: 0.5 !important;
      }

      .horizontal-scroll-wrap {
        height: auto !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 28px !important;
        padding: 0 !important;
        width: 100% !important;
        align-items: stretch !important;
        flex-wrap: wrap !important;
        transform: none !important;
      }

      .premium-card {
        width: 85% !important;
        max-width: 340px !important;
        flex: none !important;
        transform: none !important;
        opacity: 1 !important;
        margin: 0 auto !important;
      }

      .premium-card .premium-media {
        aspect-ratio: 4/3 !important;
      }

      /* Capabilities Section Mobile Fix */
      .sec-caps {
        height: auto !important;
        min-height: 100vh !important;
        padding: 60px 20px 100px !important;
      }

      .caps-container {
        display: flex !important;
        flex-direction: column !important;
        gap: 36px !important;
      }

      .caps-left {
        position: relative !important;
        width: 100% !important;
        top: 0 !important;
        opacity: 1 !important;
        transform: none !important;
        text-align: center !important;
      }

      .caps-left .sec-head {
        justify-content: center !important;
      }

      .caps-right {
        width: 100% !important;
        padding: 0 !important;
      }

      .skill-tree {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 8px !important;
      }

      .skill-card {
        width: 100% !important;
        left: 0 !important;
        top: 0 !important;
        min-height: 72px !important;
        padding: 14px 14px !important;
        border-radius: 10px !important;
        /* Mobile: JS reveal unreliable, force visible via CSS */
        opacity: 1 !important;
        transform: none !important;
      }
      .skill-card .sc-kanji {
        font-size: 18px !important;
      }
      .skill-card .sc-title {
        font-size: 13px !important;
      }
      .skill-card .sc-desc {
        font-size: 10px !important;
        display: none !important;
      }

      .sec {
        padding: 60px 20px;
      }

      .foot-grid {
        grid-template-columns: 1fr;
        gap: 40px;
      }

      .foot-right {
        max-width: 100%;
      }

      .work-grid {
        grid-template-columns: 1fr !important;
        gap: 32px
      }

      .premium-media {
        aspect-ratio: 1/1
      }

      .future {
        grid-template-columns: 1fr 1fr
      }

      footer {
        padding: 60px 20px 28px;
        min-height: auto
      }

      .foot-content {
        max-width: 100%
      }

      .foot-row {
        flex-direction: column;
        gap: 24px;
        align-items: flex-start
      }

      .foot-socials {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 8px !important;
      }

      /* Mobilde akışa girip ~300px boşluk açıyordu — arka planda kalsın */
      .lily-bloom {
        position: absolute;
        left: 50%;
        top: 46%;
        transform: translate(-50%, -50%);
        width: 74vw;
        height: auto;
        aspect-ratio: 5/6;
        margin: 0;
        opacity: .5;
        display: block
      }
      .lily-bloom.show {
        opacity: .42
      }

      .sketch {
        display: none
      }
    }

    /* ============ LANDSCAPE MOBILE ============ */
    /* Phone rotated — restore desktop-like experience via touch scroll */
    @media (max-width: 900px) and (orientation: landscape) {

      nav {
        padding: 14px 28px;
      }

      .hero {
        min-height: 100vh !important;
        padding: 0 !important;
      }
      .hero-sticky {
        position: sticky !important;
        min-height: 100vh !important;
        padding: 56px 36px 24px !important;
      }
      .hero-stage {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        min-height: auto !important;
        transform: none !important;
      }
      .hero-portrait {
        position: relative !important;
        left: auto !important;
        top: auto !important;
        bottom: auto !important;
        width: 72px !important;
        max-width: none !important;
        margin: 0 auto 12px !important;
        transform: rotate(-3.5deg) !important;
      }
      .hero-name-inline {
        font-size: clamp(32px, 11vw, 96px) !important;
        flex-direction: unset !important;
        text-align: center !important;
        margin: 0 0 8px 0 !important;
      }
      .pond-nav {
        bottom: auto !important;
        margin-top: 22px !important;
        width: 300px !important;
      }
      .pond-nav a {
        font-size: 24px !important;
        padding: 7px 12px 9px 4px !important;
      }
      .hero-role {
        text-align: left !important;
        max-width: none !important;
        margin: 0 !important;
      }

      /* Work: native touch horizontal scroll + snap */
      .sec-pinned {
        height: 100vh !important;
        overflow: hidden !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        justify-content: flex-start !important;
        padding: 0 !important;
      }
      .sec-head-fixed {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        z-index: 20 !important;
        padding: 20px 28px 0 !important;
        margin-bottom: 0 !important;
        width: 100% !important;
      }
      .horizontal-scroll-wrap {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        overflow-x: scroll !important;
        overflow-y: hidden !important;
        flex: 1 !important;
        height: 0 !important;       /* flex:1 drives height, not this */
        min-height: 0 !important;
        gap: 14px !important;
        padding: 12px 28px 16px !important;
        align-items: center !important;
        transform: none !important;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x mandatory;
        scroll-behavior: smooth;
        scrollbar-width: none;
      }
      .horizontal-scroll-wrap::-webkit-scrollbar {
        display: none;
      }
      /* Fade edges — hints at swipeable content */
      .sec-pinned {
        position: relative !important;
      }
      .sec-pinned::after {
        content: '';
        position: absolute;
        right: 0;
        top: 0;
        width: 72px;
        height: 100%;
        background: linear-gradient(to right, transparent, var(--sumi) 90%);
        pointer-events: none;
        z-index: 10;
      }
      .premium-card {
        /* Height-based: constrained by scroll container, width follows */
        height: calc(100vh - 120px) !important;
        width: calc(100vh - 120px) !important;
        max-width: 200px !important;
        min-width: 120px !important;
        flex-shrink: 0 !important;
        scroll-snap-align: center;
        transform: none !important;
        opacity: 1 !important;
      }
      .premium-media {
        flex: 1 !important;
        min-height: 0 !important;
        height: auto !important;
        aspect-ratio: unset !important;
        width: 100% !important;
      }

      /* Capabilities: restore 2-column like desktop */
      .sec-caps {
        padding: 56px 36px !important;
        height: auto !important;
      }
      .caps-container {
        display: grid !important;
        grid-template-columns: 1fr 1.5fr !important;
        flex-direction: unset !important;
        gap: 48px !important;
        align-items: flex-start !important;
      }
      .caps-left {
        position: sticky !important;
        top: 80px !important;
        text-align: left !important;
        transform: none !important;
        opacity: 1 !important;
      }
      .caps-left .sec-head {
        justify-content: flex-start !important;
      }
      .caps-left h2 {
        font-size: clamp(28px, 4vw, 52px) !important;
      }
      .skill-tree {
        grid-template-columns: 1fr 1fr !important;
        gap: 10px !important;
      }
      .skill-card {
        opacity: 1 !important;
        transform: none !important;
      }

      /* General section spacing */
      .sec {
        padding: 56px 36px !important;
      }
      footer {
        padding: 56px 36px 28px !important;
        min-height: auto !important;
      }
      .foot-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 40px !important;
      }
      .foot-row {
        flex-direction: row !important;
        align-items: center !important;
      }
      .foot-socials {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 8px !important;
      }

      /* Manifesto compact */
      .manifesto {
        font-size: clamp(18px, 3.5vw, 38px) !important;
        width: calc(100% - 72px) !important;
      }

      /* Sketches: show faintly */
      .sketch {
        display: block !important;
        opacity: 0.06 !important;
      }
    }


    /* ---- HAVUZ IZGARASI TASMASI ----
       .pg-inner (havuz izgarasi) 5000px+ yuksekliginde ve hicbir ata onu
       kirpmiyordu; sayfa footer'in altinda bos alan olarak uzayip gidiyordu.
       Perspektif katmanina overflow koymak 3B baglami bozdugu icin
       kirpmayi bir ust katmanda, hero'nun kendisinde yapiyoruz. */
    /* overflow:hidden hero'daki position:sticky katmani bozardi; clip-path
       hem kirpar hem sticky'yi ve 3B baglami bozmaz. */
    .hero-pond .work-perspective-bg.pond-grid { clip-path: inset(0); overflow: hidden }
    /* Isler bolumunun izgarasi hero ile ayni olcege cikinca bolumun altindan
       tasip sayfayi uzatiyordu — burada da kirpiliyor. clip-path kullaniliyor
       cunku overflow:hidden 3D baglami ve sticky'yi bozuyor. */
    .sec-craft .work-perspective-bg { clip-path: inset(0); overflow: hidden }

    /* ============ AUDIO TOGGLE ============ */
    .audio-toggle {
      position: fixed;
      bottom: 26px;
      right: 26px;
      z-index: 120;
      width: 44px;
      height: 44px;
      border-radius: 50%;
      border: 1px solid rgba(38, 34, 30, 0.16);
      background: rgba(244, 239, 230, 0.62);
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: border-color .3s ease, background .3s ease, transform .3s ease;
      /* mix-blend-mode: difference kaldirildi — Safari'de backdrop-filter ile
         birlesince butonu duz siyah diske ceviriyordu. Koyu daire + acik cubuk
         hem washi hem sumi zeminde okunuyor, blend moduna gerek yok. */
      box-shadow: 0 2px 10px rgba(38, 34, 30, .10);
    }
    .audio-toggle:hover { transform: scale(1.08); border-color: rgba(38, 34, 30, 0.34); }
    .audio-bars { display: flex; align-items: center; gap: 2px; height: 16px; }
    .audio-bars i {
      width: 2px;
      height: 16px;
      background: #26221E;
      border-radius: 1px;
      transform-origin: center;
      transform: scaleY(.25);
      transition: transform .18s ease;
      will-change: transform;
    }
    .audio-toggle[aria-pressed="true"] .audio-bars i {
      animation: audioBar 0.9s ease-in-out infinite;
    }
    .audio-toggle[aria-pressed="true"] .audio-bars i:nth-child(2) { animation-delay: .15s; }
    .audio-toggle[aria-pressed="true"] .audio-bars i:nth-child(3) { animation-delay: .3s; }
    .audio-toggle[aria-pressed="true"] .audio-bars i:nth-child(4) { animation-delay: .45s; }
    @keyframes audioBar { 0%, 100% { transform: scaleY(.25); } 50% { transform: scaleY(.94); } }
    @media (max-width: 768px) { .audio-toggle { bottom: 18px; right: 18px; width: 40px; height: 40px; } }
    @media (prefers-reduced-motion: reduce) { .audio-toggle[aria-pressed="true"] .audio-bars i { animation: none; transform: scaleY(.55); } }

    /* ============ A11Y: skip link + klavye fokus ============ */
    .skip-link {
      position: absolute;
      left: -9999px;
      top: 0;
      background: var(--washi);
      color: var(--sumi);
      padding: 12px 18px;
      font-family: var(--font-mono);
      font-size: 12px;
      letter-spacing: .08em;
      z-index: 99999;
      border-radius: 0 0 6px 0;
    }
    .skip-link:focus-visible {
      left: 0;
      top: 0;
      outline: 2px solid var(--shu);
      outline-offset: 2px;
    }
    a:focus-visible,
    button:focus-visible {
      outline: 2px solid var(--shu);
      outline-offset: 4px;
      border-radius: 2px;
    }

    /* ============ MOBİL PERFORMANS — yapı aynı, sadece pahalı efektler kapalı ============ */
    @media (max-width: 768px) {
      /* backdrop-filter blur mobilde çok pahalı → solid arka plan */
      .premium-meta, .skill-card, .social-card, .audio-toggle {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
      }
      .skill-card { background: rgba(22, 19, 15, 0.72) !important; }
      .social-card { background: rgba(244, 239, 230, 0.06) !important; animation: none !important; } /* sonsuz floatCard döngüsü kapalı */
      .sound-bars { display: none !important; }
      .premium-meta { background: rgba(20, 18, 14, 0.78) !important; }
      /* kalıcı katman/filtreleri bırak — GPU belleği ve composite yükü azalır */
      .hero-portrait, .hero-sticky, .hero-stage, .caps-left, .premium-card, .skill-card {
        will-change: auto !important;
      }
      .hero-portrait { filter: none !important; }
    }

    /* NOT: Buradaki `content-visibility: auto` kaldırıldı.
       Ekran dışı bölümlerin yüksekliği 900px varsayılıyordu; gerçek yükseklik
       farklı olunca sayfa kaydırıldıkça uzayıp "sonu gelmiyor" hissi veriyordu.
       Kazanç, yol açtığı kaydırma sorununu karşılamıyor. */

    /* ============ SES NABZI — mobil ritim gostergesi ============
       Mobilde ritmi belli eden hicbir sey yoktu (serit kaldirilmisti,
       izgara karolari da telefonda zor secliyor). Butonun kendisi
       gosterge oluyor: iki halka nabizla aciliyor, cember doluyor.
       --beat degerini ses dongusu zaten yaziyor. */
    .audio-toggle { position: fixed; isolation: isolate; }

    .audio-toggle::before,
    .audio-toggle::after {
      content: "";
      position: absolute;
      inset: -1px;
      border-radius: 50%;
      border: 1px solid var(--shu, #B80000);
      opacity: 0;
      pointer-events: none;
      z-index: -1;
    }
    body.audio-on .audio-toggle::before {
      opacity: calc(var(--beat, 0) * .55);
      transform: scale(calc(1 + var(--beat, 0) * .42));
      transition: opacity .09s linear, transform .09s linear;
    }
    body.audio-on .audio-toggle::after {
      opacity: calc(var(--beat, 0) * .28);
      transform: scale(calc(1 + var(--beat, 0) * .85));
      transition: opacity .22s ease-out, transform .22s ease-out;
    }
    /* Butonun kendisi de nabizla hafifce nefes alsin */
    body.audio-on .audio-toggle {
      border-color: rgba(184, 0, 0, calc(.18 + var(--beat, 0) * .55));
      transform: scale(calc(1 + var(--beat, 0) * .06));
    }

    /* Ses yuklenirken: dosya inerken buton olu gorunmesin */
    body.ses-yukleniyor .audio-toggle { opacity: .55 }
    body.ses-yukleniyor .audio-toggle .audio-bars i {
      animation: ses-bekle 1s ease-in-out infinite;
    }
    body.ses-yukleniyor .audio-toggle .audio-bars i:nth-child(2) { animation-delay: .12s }
    body.ses-yukleniyor .audio-toggle .audio-bars i:nth-child(3) { animation-delay: .24s }
    body.ses-yukleniyor .audio-toggle .audio-bars i:nth-child(4) { animation-delay: .36s }
    @keyframes ses-bekle { 0%,100% { opacity:.25 } 50% { opacity:1 } }

    @media (prefers-reduced-motion: reduce) {
      .audio-toggle::before, .audio-toggle::after { display: none }
      body.audio-on .audio-toggle { transform: none }
    }

    /* ---- MOBIL HERO YERLESIMI ----
       space-between iki ogeyi ekranin iki ucuna itiyordu; ustte 170px'lik
       bos bir bant, portre ve menu ise asagida kaliyordu. Mobilde icerik
       ortalaniyor ve ust bosluk kucultuluyor. */
    @media (max-width: 900px) {
      .hero-sticky {
        /* space-between + margin-top:auto ikisi birden icerigi asagi
           itiyordu; ustte ekranin dortte biri bos kaliyordu. */
        justify-content: flex-start;
        padding-top: clamp(26px, 3.5vh, 40px);
        padding-bottom: clamp(14px, 2vh, 24px);
      }
      /* Asil sebep buydu: .hero-stage flex:1 1 0% ile tum bosluğu yutup
         icerigini ortaliyordu, o yuzden ustte 160px bos bant kaliyordu.
         Mobilde buyumesin, icerigi de tepeden baslasin. */
      .hero-stage {
        margin-top: 0;
        flex: 0 0 auto;
        justify-content: flex-start;
      }
      .hero-foot { margin-top: auto }   /* kaydirma ipucu altta kalsin */
      .hero-portrait { margin-bottom: 12px !important }
    }

    /* Mobil: dekoratif katmanları hafiflet — boya maliyeti düşsün */
    @media (max-width: 768px) {
      
      .name-reflect { animation: none; transform: scaleY(-1); filter: none; opacity: .07; }
      /* .12 cok soluktu, izgara neredeyse gorunmuyordu */
      .pond-grid { opacity: .20; }
      /* Telefonda dokusu okunmuyor, sadece pus birakiyordu — kapatildi. */
      .grain { display: none; }
      /* dokunmatikte hover yok — geçişleri kısalt */
      .skill-card, .social-card { transition-duration: .25s !important; }
    }

    /* Dokunmatik cihazlarda imleç efektleri anlamsız — tamamen kapat */
    @media (hover: none) {
      .cursor, .cursor-echo, .spotlight { display: none !important; }
      a, button { cursor: pointer !important; }
    }