/* Space Grotesk — self-hosted variable font (300–700), no external CDN */
  @font-face{
    font-family:'Space Grotesk';
    font-style:normal;
    font-weight:300 700;
    font-display:swap;
    src:url('../assets/fonts/space-grotesk-latin-wght-normal.woff2') format('woff2-variations');
    unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  }
  @font-face{
    font-family:'Space Grotesk';
    font-style:normal;
    font-weight:300 700;
    font-display:swap;
    src:url('../assets/fonts/space-grotesk-latin-ext-wght-normal.woff2') format('woff2-variations');
    unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
  }

  :root{
    --black:#0A0A0A;
    --black2:#100F0F;
    --paper:#FAF7F2;
    --paper-dim:rgba(250,247,242,.62);
    --paper-faint:rgba(250,247,242,.34);
    --line:rgba(250,247,242,.12);
    --red:#A31621;
    --red-hi:#C22430;
    --red-glow:rgba(163,22,33,.45);
    --maxw:1120px;
    --pad:clamp(20px, 5vw, 56px);
  }
  *{margin:0;padding:0;box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{
    background:var(--black);
    color:var(--paper);
    font-family:'Space Grotesk', ui-sans-serif, system-ui, sans-serif;
    font-weight:400;
    line-height:1.65;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
  }
  ::selection{background:var(--red);color:var(--paper)}

  /* ---------- living surface ---------- */
  #surface{
    position:fixed; inset:0;
    width:100%; height:100%;
    z-index:0;
    background:var(--black);
  }
  .grain{
    position:fixed; inset:-50%;
    width:200%; height:200%;
    z-index:1; pointer-events:none;
    opacity:.05;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
    animation:grain 9s steps(6) infinite;
  }
  @keyframes grain{
    0%{transform:translate(0,0)} 20%{transform:translate(-3%,2%)}
    40%{transform:translate(2%,-3%)} 60%{transform:translate(-2%,-2%)}
    80%{transform:translate(3%,2%)} 100%{transform:translate(0,0)}
  }
  .vignette{
    position:fixed; inset:0; z-index:1; pointer-events:none;
    background:radial-gradient(ellipse 120% 90% at 50% 40%, transparent 55%, rgba(10,10,10,.72) 100%);
  }

  /* ---------- shell ---------- */
  .shell{position:relative; z-index:2}
  .wrap{max-width:var(--maxw); margin:0 auto; padding:0 var(--pad)}

  /* ---------- header ---------- */
  header{
    position:fixed; top:0; left:0; right:0; z-index:10;
    padding:18px var(--pad);
    display:flex; justify-content:space-between; align-items:center;
    transition:background .4s ease, backdrop-filter .4s ease;
  }
  header.scrolled{
    background:rgba(10,10,10,.72);
    backdrop-filter:blur(12px);
    -webkit-backdrop-filter:blur(12px);
    border-bottom:1px solid var(--line);
  }
  .brand{
    font-weight:600; letter-spacing:.04em; font-size:1.02rem;
    color:var(--paper); text-decoration:none;
  }
  .brand em{font-style:normal; color:var(--red-hi)}
  nav{display:flex; gap:26px; align-items:center}
  nav a{
    color:var(--paper-dim); text-decoration:none;
    font-size:.82rem; letter-spacing:.14em; text-transform:uppercase;
    transition:color .25s ease;
  }
  nav a:hover{color:var(--paper)}
  nav a.cta{
    color:var(--paper);
    border:1px solid var(--line);
    padding:8px 18px; border-radius:999px;
    transition:border-color .25s ease, background .25s ease;
  }
  nav a.cta:hover{border-color:var(--red); background:rgba(163,22,33,.18)}

  /* ---------- mobile nav ---------- */
  .nav-toggle{
    display:none;
    flex-direction:column; gap:5px; justify-content:center; align-items:center;
    width:40px; height:40px;
    background:none; border:1px solid var(--line); border-radius:50%;
    cursor:pointer; padding:0;
    transition:border-color .3s ease;
  }
  .nav-toggle span{
    display:block; width:15px; height:1.5px;
    background:var(--paper);
    transition:transform .35s cubic-bezier(.22,.8,.24,1);
  }
  body.mnav-open .nav-toggle{border-color:rgba(194,36,48,.5)}
  body.mnav-open .nav-toggle span:first-child{transform:translateY(3.25px) rotate(45deg)}
  body.mnav-open .nav-toggle span:last-child{transform:translateY(-3.25px) rotate(-45deg)}
  .mnav{
    position:fixed; inset:0; z-index:9;
    background:rgba(10,10,10,.94);
    backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
    display:flex; align-items:center;
    padding:80px var(--pad) 40px;
    opacity:0; visibility:hidden;
    transition:opacity .4s ease, visibility 0s linear .4s;
  }
  body.mnav-open .mnav{opacity:1; visibility:visible; transition-delay:0s}
  body.mnav-open{overflow:hidden}
  .mnav nav{display:flex; flex-direction:column; align-items:stretch; gap:0; width:100%}
  .mnav a{
    color:var(--paper); text-decoration:none;
    font-size:clamp(1.9rem, 8.5vw, 2.5rem); font-weight:600; letter-spacing:-.02em;
    text-transform:none;
    width:100%;
    padding:16px 0;
    border-bottom:1px solid var(--line);
    opacity:0; transform:translateY(14px);
    transition:opacity .5s ease, transform .5s cubic-bezier(.22,.8,.24,1);
  }
  .mnav a:last-child{color:var(--red-hi)}
  body.mnav-open .mnav a{opacity:1; transform:none}
  body.mnav-open .mnav a:nth-child(1){transition-delay:.05s}
  body.mnav-open .mnav a:nth-child(2){transition-delay:.1s}
  body.mnav-open .mnav a:nth-child(3){transition-delay:.15s}
  body.mnav-open .mnav a:nth-child(4){transition-delay:.2s}
  body.mnav-open .mnav a:nth-child(5){transition-delay:.25s}

  @media (max-width:760px){
    header nav a:not(.cta){display:none}
    header nav{gap:12px}
    .nav-toggle{display:inline-flex}
  }

  /* ---------- hero ---------- */
  .hero{
    min-height:74vh; min-height:74svh;
    display:flex; align-items:center;
    position:relative;
    padding-top:130px; padding-bottom:70px;
  }
  .hero-text{position:relative; z-index:2; max-width:600px}
  .hero-credit{
    font-size:.84rem; letter-spacing:.26em; text-transform:uppercase;
    color:var(--paper-dim); font-weight:400; margin-bottom:26px;
  }
  .hero-credit em{font-style:normal; color:var(--red-hi)}
  .hero-statement{
    font-weight:600;
    font-size:clamp(2.5rem, 5.6vw, 4.3rem);
    line-height:1.04; letter-spacing:-.028em;
    margin-bottom:28px;
  }
  .hero-line{
    font-size:clamp(1.04rem, 1.6vw, 1.22rem);
    line-height:1.62; font-weight:300;
    max-width:40ch;
    color:var(--paper-dim);
  }
  .hero-roles{
    margin-top:36px;
    font-size:.76rem; letter-spacing:.28em; text-transform:uppercase;
    color:var(--red-hi); font-weight:500;
  }
  .hero-portrait{
    position:absolute; right:var(--pad); top:50%;
    transform:translateY(-44%);
    width:min(26vw, 390px); aspect-ratio:4/5;
    background:url('../assets/photos/hero_cut.webp') center bottom/100% auto no-repeat;
    -webkit-mask-image:linear-gradient(to bottom, #000 80%, transparent 99%);
    mask-image:linear-gradient(to bottom, #000 80%, transparent 99%);
    animation:portrait-in 1.2s ease .3s both;
  }
  @keyframes portrait-in{from{opacity:0}to{opacity:1}}

  /* ---------- sections ---------- */
  section{padding:clamp(90px,14vh,150px) 0; position:relative}
  .sec-head{
    display:flex; align-items:baseline; gap:20px;
    margin-bottom:clamp(40px,7vh,70px);
    border-bottom:1px solid var(--line);
    padding-bottom:22px;
  }
  h2{
    font-weight:600; letter-spacing:-.02em;
    font-size:clamp(1.9rem, 4.6vw, 3.1rem); line-height:1.1;
  }
  .sec-sub{color:var(--paper-faint); font-size:.9rem; margin-left:auto; text-align:right; font-weight:300}
  @media (max-width:640px){.sec-sub{display:none}}

  /* ---------- hikaye · hatıra defteri ---------- */
  /* extra air below the board so it clears the next section's heading */
  #hikaye{padding-bottom:clamp(160px, 22vh, 240px)}

  .portals{
    display:flex; gap:clamp(14px, 2vw, 22px);
    margin-top:clamp(64px, 10vh, 110px);
  }
  .portal{
    flex:1 1 0;
    display:flex; align-items:center; justify-content:flex-start; gap:20px;
    border:1px solid var(--line);
    background:rgba(16,15,15,.58);
    padding:clamp(24px, 3.4vw, 34px) 28px;
    text-decoration:none; color:var(--paper);
    transition:border-color .4s ease, transform .4s cubic-bezier(.22,1,.36,1), background .4s ease;
  }
  .portal .p-text{display:flex; flex-direction:column; gap:6px; min-width:0}
  .portal .p-desc{
    font-size:.84rem; font-weight:300; line-height:1.5;
    color:var(--paper-faint);
    transition:color .4s ease;
  }
  .portal:hover .p-desc{color:var(--paper-dim)}
  .portal:hover{
    border-color:var(--red);
    background:rgba(20,19,19,.8);
    transform:translateY(-3px);
  }
  .portal .glyph{
    width:30px; height:30px; flex:none;
    stroke:var(--paper-faint); fill:none;
    stroke-width:1.2; stroke-linecap:round;
    transition:stroke .4s ease;
  }
  .portal .glyph .dot{fill:var(--paper-faint); stroke:none; transition:fill .4s ease}
  .portal:hover .glyph{stroke:var(--red-hi)}
  .portal:hover .glyph .dot{fill:var(--red-hi)}
  .portal .p-title{
    font-size:clamp(1.05rem, 1.7vw, 1.25rem); font-weight:500;
    letter-spacing:-.01em; line-height:1.25; white-space:nowrap;
  }
  @media (max-width:760px){
    .portals{flex-wrap:wrap}
    .portal{flex:1 1 220px}
  }

  .board{position:relative}
  .b-grid{
    display:grid;
    /* minmax(0,1fr): hiçbir panelin içeriği tahtanın kolon genişliklerini değiştiremez */
    grid-template-columns:repeat(12, minmax(0, 1fr));
    gap:clamp(16px, 2.2vw, 26px);
  }
  .b-span-3{grid-column:span 3}
  .b-span-4{grid-column:span 4}
  .b-span-5{grid-column:span 5}
  .b-span-6{grid-column:span 6}
  .b-span-7{grid-column:span 7}
  .b-span-8{grid-column:span 8}
  .b-push-1{margin-top:2.2rem}
  .b-push-2{margin-top:4.5rem}
  .b-push-3{margin-top:7rem}

  /* ---------- tiles ---------- */
  .board .tile{will-change:transform}
  .board .tile-inner{
    position:relative; height:100%;
    border:1px solid var(--line);
    background:rgba(16,15,15,.58);
    backdrop-filter:blur(3px);
    -webkit-backdrop-filter:blur(3px);
    padding:22px 22px 64px;
    opacity:0; transform:translateY(30px);
    transition:opacity .9s ease, transform .9s cubic-bezier(.22,1,.36,1),
               border-color .5s ease, box-shadow .5s ease, background .5s ease;
  }
  .board .tile.in .tile-inner{opacity:1; transform:translateY(0)}
  .board .tile-inner:hover{
    transform:translateY(-8px);
    border-color:rgba(250,247,242,.32);
    box-shadow:0 28px 70px rgba(0,0,0,.68);
    background:rgba(20,19,19,.78);
    z-index:5;
  }
  .board .note{
    position:absolute; left:22px; right:22px; bottom:18px;
    border-top:1px solid var(--line); padding-top:10px;
    font-size:.76rem; line-height:1.5; color:var(--paper-dim);
    opacity:0; transform:translateY(6px);
    transition:opacity .45s ease .05s, transform .45s ease .05s;
  }
  .board .tile-inner:hover .note{opacity:1; transform:translateY(0)}

  /* the numeral */
  .board .t-num .tile-inner{display:flex; flex-direction:column; justify-content:flex-end; min-height:360px; container-type:inline-size}
  .board .big20{
    font-weight:300; letter-spacing:-.05em; line-height:.82;
    font-size:clamp(8.5rem, 17vw, 13.5rem);
    color:var(--paper);
  }
  /* rakam artık viewport'a değil kendi paneline göre ölçeklenir — panele asla taşmaz */
  @supports (container-type: inline-size){
    .board .big20{font-size:clamp(4rem, 68cqi, 13.5rem)}
  }
  .board .big20 sup{
    font-size:.14em; letter-spacing:.18em; font-weight:400;
    color:var(--red-hi); vertical-align:top; text-transform:uppercase;
  }
  .board .num-cap{
    margin-top:14px; font-size:.82rem; letter-spacing:.2em;
    text-transform:uppercase; color:var(--paper-dim);
  }

  /* voice fragments */
  .board .frag{
    font-weight:300; line-height:1.42; letter-spacing:-.01em;
    font-size:clamp(1.18rem, 1.75vw, 1.5rem);
  }
  .board .t-final .tile-inner{border-color:rgba(194,36,48,.4)}
  .board .t-final .frag{font-size:clamp(1.5rem, 2.6vw, 2.1rem)}
  .board .t-final .frag strong{font-weight:500; color:var(--red-hi)}
  .board .t-yz .tile-inner{padding-bottom:112px}

  /* stat panel — büyük rakam vurgusu */
  .board .t-stat .stat{
    display:block; margin-top:12px;
    font-size:clamp(1.7rem, 2.8vw, 2.3rem); font-weight:300; letter-spacing:-.02em;
    color:var(--paper);
  }
  .board .t-stat .stat em{
    font-style:normal; font-size:.42em; letter-spacing:.18em; text-transform:uppercase;
    color:var(--paper-dim); margin-left:8px;
  }

  /* keynote — animasyonlu mikrofon simgesi */
  .board .t-mic .micsym{
    display:block; width:58px; height:58px; margin-bottom:16px;
    opacity:.7; transition:opacity .5s ease;
  }
  .board .t-mic .tile-inner:hover .micsym{opacity:1}
  .board .micsym .mic-body, .board .micsym .mic-cradle, .board .micsym .mic-stand{
    fill:none; stroke:var(--paper); stroke-width:1.6; stroke-linecap:round;
  }
  .board .micsym .mic-wave{
    fill:none; stroke:var(--red-hi); stroke-width:1.4; stroke-linecap:round;
    opacity:0; animation:mic-wave 2.6s ease-out infinite;
  }
  .board .micsym .w2{animation-delay:1.3s}
  @keyframes mic-wave{
    0%{opacity:0; transform:translateX(0)}
    25%{opacity:.9}
    70%,100%{opacity:0; transform:translateX(3px)}
  }

  /* education — mini vertical timeline */
  .board .t-edu .tile-inner{padding-bottom:132px}
  .board .edu{display:flex; flex-direction:column; margin-top:4px}
  .board .edu-item{
    position:relative;
    padding:0 0 22px 24px;
    border-left:1px solid var(--line);
  }
  .board .edu-item:last-child{padding-bottom:0}
  .board .edu-item::before{
    content:""; position:absolute; left:-4px; top:4px;
    width:7px; height:7px; border-radius:50%;
    background:var(--black); border:1px solid rgba(250,247,242,.55);
  }
  .board .edu-year{
    display:block; font-size:.72rem; letter-spacing:.22em;
    color:var(--paper-faint); margin-bottom:5px;
  }
  .board .edu-org{
    display:block; font-size:.95rem; font-weight:500;
    color:var(--paper); line-height:1.35;
  }
  .board .edu-deg{
    display:block; margin-top:4px; font-size:.8rem; font-weight:300;
    color:var(--paper-dim); line-height:1.5;
  }
  /* the unfinished one: red year, dashed dimmed connector, tag */
  .board .edu-incomplete{border-left:1px dashed rgba(194,36,48,.4)}
  .board .edu-incomplete::before{background:var(--red-hi); border-color:var(--red-hi)}
  .board .edu-incomplete .edu-year{color:var(--red-hi)}
  .board .edu-tag{
    display:inline-block; margin-left:8px; padding:2px 7px;
    font-style:normal; font-size:.6rem; letter-spacing:.18em; text-transform:uppercase;
    color:var(--red-hi); border:1px solid rgba(194,36,48,.45);
    vertical-align:1px; white-space:nowrap;
  }

  /* certificates */
  .board .t-cert .tile-inner{text-align:left}
  .board .cseal{display:block; width:76px; height:76px; margin-bottom:18px}
  .board .cseal .ring-o{fill:none; stroke:rgba(250,247,242,.4); stroke-width:1}
  .board .cseal .ring-i{fill:none; stroke:rgba(250,247,242,.16); stroke-width:1; stroke-dasharray:2 4}
  .board .cseal .tick{fill:none; stroke:var(--red-hi); stroke-width:2}
  .board .cseal text{
    fill:var(--paper); font-family:'Space Grotesk', sans-serif;
    font-weight:300; font-size:24px; letter-spacing:.02em;
  }
  .board .cert-org{
    font-size:.92rem; font-weight:500; letter-spacing:.06em; line-height:1.35;
  }
  .board .cert-year{
    margin-top:6px; font-size:.74rem; letter-spacing:.24em; color:var(--paper-faint);
  }

  /* workplaces — emblem grid */
  .board .t-work .tile-inner{padding-bottom:28px}
  .board .work{
    display:grid; grid-template-columns:repeat(6, 1fr);
    margin-top:10px;
  }
  .board .job{
    display:flex; flex-direction:column; align-items:center; text-align:center;
    padding:8px 10px 2px; min-width:0;
  }
  .board .job + .job{border-left:1px solid var(--line)}
  .board .job img{
    height:52px; width:auto; max-width:100%; object-fit:contain;
    margin-bottom:16px;
    opacity:.5; filter:grayscale(.75) brightness(.92);
    transition:opacity .5s ease, filter .5s ease;
  }
  .board .t-work .tile-inner:hover .job img{opacity:1; filter:grayscale(0) brightness(1)}
  .board .j-name{
    font-size:.82rem; font-weight:500; letter-spacing:.04em;
    color:var(--paper); line-height:1.3;
  }
  .board .j-role{
    margin-top:5px; font-size:.66rem; font-weight:300;
    color:var(--paper-faint); line-height:1.45;
  }

  /* certificates — emblem strip, same language as workplaces */
  .board .t-certs .tile-inner{padding-bottom:28px}
  .board .certs{
    display:grid; grid-template-columns:repeat(4, 1fr);
    margin-top:10px;
  }
  .board .cert{
    display:flex; flex-direction:column; align-items:center; text-align:center;
    padding:8px 14px 2px; min-width:0;
  }
  .board .cert + .cert{border-left:1px solid var(--line)}
  .board .cert img{
    height:60px; width:auto; max-width:100%; object-fit:contain;
    margin-bottom:18px;
    opacity:.55; filter:grayscale(.6) brightness(.95);
    transition:opacity .5s ease, filter .5s ease;
  }
  .board .t-certs .tile-inner:hover .cert img{opacity:1; filter:grayscale(0) brightness(1)}
  .board .c-name{
    font-size:.8rem; font-weight:500; letter-spacing:.03em;
    color:var(--paper); line-height:1.4;
  }

  /* board — responsive */
  @media (max-width:760px){
    .b-grid{grid-template-columns:1fr}
    .b-span-3,.b-span-4,.b-span-5,.b-span-6,.b-span-7,.b-span-8{grid-column:auto}
    .b-push-1,.b-push-2,.b-push-3{margin-top:0}
    .board .t-num .tile-inner{min-height:280px}
    .board .big20{font-size:clamp(4rem, 44cqi, 8.5rem)}
    .board .work{grid-template-columns:repeat(3, 1fr); row-gap:26px}
    .board .job:nth-child(3n+1){border-left:none}
    .board .job img{opacity:.85; filter:grayscale(.3)}
    .board .certs{grid-template-columns:repeat(2, 1fr); row-gap:26px}
    .board .cert:nth-child(2n+1){border-left:none}
    .board .cert img{opacity:.85; filter:grayscale(.3)}
    /* dokunmatik: notlar hep görünür */
    .board .note{position:static; opacity:1; transform:none; margin-top:16px; border-top:1px solid var(--line)}
    .board .tile-inner{padding-bottom:22px}
    .board .t-edu .tile-inner{padding-bottom:22px}
    .board .t-yz .tile-inner{padding-bottom:22px}
  }
  @media (hover:none){
    .board .note{opacity:1; transform:none}
  }

  /* ---------- photo slots ---------- */
  .photo{
    position:relative; overflow:hidden;
    border:1px solid var(--line);
    border-radius:6px;
    background:
      radial-gradient(circle at 30% 20%, rgba(163,22,33,.5), transparent 60%),
      linear-gradient(155deg, rgba(163,22,33,.34) 0%, rgba(10,10,10,.94) 78%);
    display:flex; align-items:center; justify-content:center;
  }
  .photo::after{
    content:""; position:absolute; inset:0;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
    opacity:.14; mix-blend-mode:overlay;
  }
  .photo-label{
    position:relative; z-index:1;
    font-size:.68rem; letter-spacing:.3em; text-transform:uppercase;
    color:var(--paper-faint);
    border:1px dashed rgba(250,247,242,.22);
    padding:10px 20px; border-radius:2px;
    text-align:center;
  }
  /* ---------- photos (with actual source) ---------- */
  .photo.has-photo{
    background:
      radial-gradient(circle at 50% 15%, rgba(163,22,33,.25), transparent 50%),
      linear-gradient(to bottom, rgba(10,10,10,0) 0%, rgba(10,10,10,.45) 100%);
  }
  .photo.has-photo::before{
    content:""; position:absolute; inset:0; z-index:0;
    background-image:url('../assets/photos/test_photo1.png');
    background-size:cover; background-position:center 30%;
    filter:brightness(.95) contrast(1.02);
    animation:photo-in .8s ease .2s both;
  }
  @keyframes photo-in{from{opacity:0; transform:scale(1.04)}to{opacity:1; transform:scale(1)}}
  .photo.has-photo .photo-label{display:none}
  .photo.portrait{aspect-ratio:4/5; max-width:340px; margin:70px auto 0}
  .photo.wide{aspect-ratio:21/8; margin-top:54px}
  @media (max-width:640px){.photo.wide{aspect-ratio:16/9}}

  /* hero — small screens: portrait moves below the text */
  @media (max-width:920px){
    .hero{flex-direction:column; justify-content:center; align-items:flex-start; padding-top:120px; min-height:0}
    .hero-portrait{
      position:relative; top:auto; right:auto;
      transform:none;
      width:min(74%, 300px); margin-top:48px;
      -webkit-mask-image:linear-gradient(to bottom, #000 82%, transparent 99%);
      mask-image:linear-gradient(to bottom, #000 82%, transparent 99%);
    }
  }

  /* ---------- sahne · isim perdesi ---------- */
  #sahne{padding-bottom:clamp(48px, 8vh, 80px)}
  .perde{
    position:relative;
    padding:clamp(8px, 1.5vh, 18px) 0 0;
  }
  .perde-layout{
    display:grid;
    grid-template-columns:1.15fr 0.85fr;
    gap:clamp(28px, 4vw, 56px);
    align-items:stretch;
  }
  .perde.is-stage .perde-layout{
    opacity:0.28;
    pointer-events:none;
    filter:saturate(0.7);
  }

  .perde-list{
    list-style:none;
    display:flex; flex-direction:column;
    justify-content:space-between;
    height:100%;
    gap:0;
    min-height:0;
  }
  .perde-list-lead{ gap:clamp(6px, 1.2vh, 14px); }
  .perde-list-cast{ gap:clamp(4px, 0.9vh, 10px); }
  .perde-item{
    display:flex;
    justify-content:flex-start;
    margin:0;
  }

  .perde-name{
    appearance:none; border:0; background:none; cursor:pointer;
    color:inherit; font:inherit; text-align:left;
    padding:2px 4px 4px;
    position:relative;
    max-width:100%;
    transition:transform .55s cubic-bezier(.22,.8,.24,1), opacity .45s ease;
  }
  .perde-name:focus-visible{ outline:1px solid rgba(194,36,48,.55); outline-offset:6px; }

  .perde-date{
    display:block;
    font-size:10px; letter-spacing:.26em; text-transform:uppercase;
    color:var(--paper-faint); font-weight:500;
    margin-bottom:5px;
    transition:color .4s ease;
  }
  .perde-word{
    display:block;
    font-weight:600;
    letter-spacing:var(--track, -0.03em);
    line-height:0.88;
    font-size:var(--size);
    color:rgba(250,247,242,.12);
    -webkit-text-fill-color:rgba(250,247,242,.12);
    -webkit-text-stroke:1px rgba(250,247,242,.24);
    background-color:transparent;
    background-image:none;
    background-size:cover;
    background-position:var(--pos, 50% 40%);
    background-repeat:no-repeat;
    transform-origin:left center;
    transform:scale(1);
    will-change:transform;
    transition:
      font-size .65s cubic-bezier(.22,.8,.24,1),
      color .35s ease,
      -webkit-text-fill-color .35s ease,
      -webkit-text-stroke-color .35s ease,
      letter-spacing .7s ease,
      opacity .55s ease,
      transform .55s cubic-bezier(.22,.8,.24,1);
    /* NOTE: background-position must NOT be transitioned. js/sahne.js writes a
       new position every frame for the slow photo drift; a transition here
       restarts on every write, so the rendered value never advances more than a
       fraction of each tiny step and the drift visibly stalls. */
  }

  /* 6 lead vs 9 cast — lead a touch larger, cast denser so columns share a floor */
  .perde-name[data-tier="lead"]{
    --size: clamp(2.55rem, 6.8vw, 4.85rem);
    --track: -0.035em;
  }
  .perde-name[data-tier="cast"]{
    --size: clamp(1.05rem, 2.1vw, 1.45rem);
    --track: -0.02em;
  }
  .perde-name[data-tier="cast"] .perde-word{
    max-width:min(100%, 20ch);
    line-height:1.02;
  }
  .perde-name[data-word="Enocta Günü"] .perde-word,
  .perde-name[data-word="Airbus Strategic Partnership"] .perde-word{
    max-width:min(100%, 28ch);
  }
  .perde-name[data-tier="cast"] .perde-date{
    font-size:8.5px; letter-spacing:.2em; margin-bottom:2px;
  }
  .perde-name[data-tier="cast"]{ padding:1px 4px 2px; }
  .perde-name[data-word="TAI"]{ --track: 0.06em; }
  .perde-name[data-word="Londra"]{ --pos: 50% 28%; }
  .perde-name[data-word="HBR Türkiye"],
  .perde-name[data-word="Claude Code Meetup"],
  .perde-name[data-word="Me, Myself And AI"],
  .perde-name[data-word="Enocta Günü"],
  .perde-name[data-word="Airbus Strategic Partnership"],
  .perde-name[data-word="TEGEP Ankara"]{
    --track: -0.025em;
  }

  .perde-meta{
    display:grid;
    grid-template-rows:0fr;
    opacity:0;
    transition:grid-template-rows .5s ease, opacity .45s ease .05s, transform .45s ease;
    transform:translateY(-4px);
    margin-top:0;
  }
  .perde-meta-inner{ overflow:hidden; }
  .perde-title{
    font-size:clamp(.88rem, 1.5vw, 1.05rem);
    font-weight:400; color:var(--paper);
    letter-spacing:-.01em; line-height:1.35;
    padding-top:10px;
    max-width:28ch;
  }
  .perde-venue{
    font-size:.76rem; color:var(--paper-dim); font-weight:300;
    margin-top:4px;
  }
  .perde-open-stage{
    display:inline-flex; align-items:center; gap:8px;
    margin-top:12px;
    padding:0;
    border:0; background:none; cursor:pointer;
    font:inherit;
    font-size:.72rem; letter-spacing:.16em; text-transform:uppercase;
    color:var(--red-hi); font-weight:500;
    opacity:0; transform:translateY(4px);
    transition:opacity .35s ease, transform .35s ease, color .3s ease;
  }
  .perde-open-stage:hover{ color:var(--paper); }
  .perde:not(.is-stage) .perde-name.is-open .perde-open-stage,
  .perde:not(.is-stage) .perde-name:hover .perde-open-stage{
    opacity:1; transform:translateY(0);
    transition-delay:.12s;
  }

  .perde:not(.is-stage) .perde-name.is-open .perde-date,
  .perde:not(.is-stage) .perde-name:hover .perde-date{ color:var(--red-hi); }

  /* Act 1 — photo masked into the letterforms */
  .perde:not(.is-stage) .perde-name.is-open .perde-word,
  .perde:not(.is-stage) .perde-name:hover .perde-word{
    color:transparent !important;
    -webkit-text-fill-color:transparent !important;
    -webkit-text-stroke:1px rgba(194,36,48,.4);
    background-image:var(--photo) !important;
    -webkit-background-clip:text !important;
    background-clip:text !important;
    letter-spacing:calc(var(--track, -0.03em) + 0.012em);
  }
  /* Hover grow: scale only (no font-size) so column floors stay put */
  .perde:not(.is-stage) .perde-name[data-tier="lead"].is-open .perde-word,
  .perde:not(.is-stage) .perde-name[data-tier="lead"]:hover .perde-word{
    transform:scale(1.22);
  }
  .perde:not(.is-stage) .perde-name[data-tier="cast"].is-open .perde-word,
  .perde:not(.is-stage) .perde-name[data-tier="cast"]:hover .perde-word{
    transform:scale(1.52);
  }
  .perde:not(.is-stage) .perde-name.is-open .perde-meta,
  .perde:not(.is-stage) .perde-name:hover .perde-meta{
    grid-template-rows:1fr;
    opacity:1;
    transform:translateY(0);
  }

  .perde.is-focused .perde-name:not(.is-open){ opacity:0.34; }
  .perde.is-focused .perde-name:not(.is-open) .perde-word{
    -webkit-text-stroke-color:rgba(250,247,242,.12);
  }
  .perde:not(.is-stage) .perde-name.is-open,
  .perde:not(.is-stage) .perde-name:hover{
    transform:translateY(-2px);
    z-index:2;
  }

  .perde:not(.is-stage) .perde-name.is-open::before,
  .perde:not(.is-stage) .perde-name:hover::before{
    content:"";
    position:absolute;
    left:8%; right:8%; top:30%; bottom:0;
    background:radial-gradient(ellipse at 50% 50%, rgba(163,22,33,.16), transparent 70%);
    z-index:-1;
    pointer-events:none;
    filter:blur(8px);
  }

  /* Act 2 — viewport-centered overlay */
  .perde-stage{
    position:fixed;
    inset:0;
    z-index:80;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:clamp(20px, 4vh, 40px) var(--pad);
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transition:
      opacity .45s cubic-bezier(.22,.8,.24,1),
      visibility 0s linear .45s;
  }
  .perde.is-stage .perde-stage{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    transition-delay:0s;
  }
  .perde-stage-scrim{
    position:absolute; inset:0;
    background:rgba(6,5,5,.78);
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
    cursor:pointer;
  }
  .perde-stage-card{
    position:relative;
    z-index:1;
    width:min(920px, 100%);
    max-height:min(90vh, 860px);
    display:flex;
    flex-direction:column;
    padding:clamp(14px, 2vw, 22px);
    border:1px solid var(--line);
    background:rgba(12,11,11,.94);
    box-shadow:0 30px 80px rgba(0,0,0,.55);
    transform:translateY(14px) scale(0.985);
    transition:transform .5s cubic-bezier(.22,.8,.24,1);
    overflow:auto;
  }
  .perde.is-stage .perde-stage-card{
    transform:translateY(0) scale(1);
  }
  .perde-stage-bar{
    display:flex; justify-content:flex-end; align-items:baseline;
    margin-bottom:12px;
    flex:none;
  }
  .perde-stage-close{
    appearance:none; border:0; background:none; cursor:pointer;
    font:inherit;
    font-size:.72rem; letter-spacing:.16em; text-transform:uppercase;
    color:var(--paper-dim); font-weight:400; padding:4px 0;
  }
  .perde-stage-close:hover{ color:var(--paper); }
  .perde-stage-frame{
    position:relative;
    width:100%;
    aspect-ratio:16 / 10;
    max-height:min(58vh, 520px);
    border:1px solid var(--line);
    background:#050505;
    overflow:hidden;
    flex:none;
    box-shadow:
      0 0 0 1px rgba(10,10,10,.9),
      inset 0 0 80px rgba(0,0,0,.45);
  }
  .perde-stage-frame::after{
    content:"";
    position:absolute; inset:0; z-index:2; pointer-events:none;
    box-shadow:
      inset 0 0 0 1px rgba(250,247,242,.05),
      inset 0 30px 60px rgba(0,0,0,.28),
      inset 0 -40px 70px rgba(0,0,0,.45);
  }
  .perde-stage-frame img{
    position:absolute; inset:0;
    width:100%; height:100%;
    object-fit:contain;
    object-position:center;
    opacity:0;
    transform:scale(1.03);
    transition:opacity .8s cubic-bezier(.22,.6,.24,1), transform 1s cubic-bezier(.22,.6,.24,1);
  }
  .perde.is-stage .perde-stage-frame img.is-on{
    opacity:1;
    transform:scale(1);
  }
  .perde-stage-caption{
    margin-top:16px;
    padding-top:14px;
    border-top:1px solid var(--line);
    display:grid;
    gap:6px;
    flex:none;
  }
  .perde-stage-caption .sc-date{
    font-size:10px; letter-spacing:.26em; text-transform:uppercase;
    color:var(--red-hi); font-weight:500;
  }
  .perde-stage-caption .sc-word{
    font-size:clamp(1.35rem, 2.8vw, 1.9rem);
    font-weight:600; letter-spacing:-.02em; color:var(--paper);
    line-height:1.1;
  }
  .perde-stage-caption .sc-title{
    font-size:.95rem; color:var(--paper-dim); font-weight:300;
    max-width:40ch;
  }

  .perde.is-stage .perde-name.is-open .perde-open-stage{ display:none; }

  body.sahne-stage-open{ overflow:hidden; }

  @media (hover:none){
    /* touch: names sit brighter at rest so the section reads as tappable */
    .perde-word{
      color:rgba(250,247,242,.16);
      -webkit-text-fill-color:rgba(250,247,242,.16);
      -webkit-text-stroke:1px rgba(250,247,242,.36);
    }
    .perde:not(.is-stage) .perde-name:hover .perde-word{
      color:rgba(250,247,242,.16) !important;
      -webkit-text-fill-color:rgba(250,247,242,.16) !important;
      -webkit-text-stroke:1px rgba(250,247,242,.36);
      background-image:none !important;
      -webkit-background-clip:border-box !important;
      background-clip:border-box !important;
      letter-spacing:var(--track, -0.03em);
      transform:scale(1);
    }
    .perde:not(.is-stage) .perde-name:hover .perde-meta{
      grid-template-rows:0fr; opacity:0;
    }
    .perde:not(.is-stage) .perde-name:hover .perde-date{ color:var(--paper-faint); }
    .perde:not(.is-stage) .perde-name:hover .perde-open-stage{ opacity:0; }
    .perde:not(.is-stage) .perde-name:hover::before{ display:none; }
  }

  @media (max-width:860px){
    .perde-layout{
      grid-template-columns:1fr;
      gap:clamp(28px, 5vh, 40px);
    }
    .perde-list{
      height:auto;
      justify-content:flex-start;
    }
    .perde-list-lead{ gap:clamp(10px, 1.8vh, 18px); }
    .perde-list-cast{ gap:clamp(8px, 1.4vh, 14px); }
    .perde-name[data-tier="lead"]{ --size: clamp(2.2rem, 9vw, 3.5rem); }
    .perde-name[data-tier="cast"]{ --size: clamp(1.1rem, 4.2vw, 1.45rem); }
    .perde-stage-frame{ aspect-ratio:4 / 3; max-height:46vh; }
    .perde-stage-card{ max-height:92vh; }
  }

  @media (prefers-reduced-motion: reduce){
    .perde-stage, .perde-stage-card, .perde-stage-frame img{
      transition-duration:.2s !important;
    }
    .perde-word{ transition-duration:.2s !important; }
    .perde:not(.is-stage) .perde-name[data-tier="lead"].is-open .perde-word,
    .perde:not(.is-stage) .perde-name[data-tier="lead"]:hover .perde-word{
      transform:scale(1.1);
    }
    .perde:not(.is-stage) .perde-name[data-tier="cast"].is-open .perde-word,
    .perde:not(.is-stage) .perde-name[data-tier="cast"]:hover .perde-word{
      transform:scale(1.22);
    }
  }

  /* ---------- repertuar · quiet programme ---------- */
  #repertuar{padding-bottom:clamp(100px, 16vh, 160px)}
  #repertuar .sec-head{margin-bottom:clamp(32px, 5vh, 52px)}
  .prog{position:relative; margin-top:0}
  .prog-rail{
    position:absolute; left:-2px; top:0; width:3px; height:3px;
    border-radius:50%; background:var(--red-hi);
    box-shadow:0 0 14px rgba(194,36,48,.55);
    opacity:0; pointer-events:none;
    transition:top .45s cubic-bezier(.22,.8,.24,1), opacity .35s ease;
  }
  .prog-rail.on{opacity:1}
  .prog-list{list-style:none}
  .prog-item{
    display:grid;
    grid-template-columns:56px minmax(0,1fr) minmax(110px,140px);
    gap:10px 28px;
    align-items:start;
    padding:clamp(28px, 4vh, 38px) 0;
    border-bottom:1px solid var(--line);
    cursor:default;
    transition:opacity .45s ease, transform .5s cubic-bezier(.22,.8,.24,1);
  }
  .prog-item:last-child{border-bottom-color:rgba(250,247,242,.06)}
  .prog-item:focus-visible{outline:1px solid rgba(194,36,48,.55); outline-offset:6px}
  .prog-lead{
    display:flex; align-items:flex-start; gap:10px;
    padding-top:6px;
  }
  .prog-idx{
    font-size:.72rem; letter-spacing:.18em; color:var(--red-hi); font-weight:500;
    line-height:1.2;
  }
  .prog-tick{
    display:block; width:1px; height:18px; margin-top:1px;
    background:rgba(194,36,48,.28);
    transition:background .35s ease, height .4s ease, box-shadow .35s ease;
  }
  .prog-item.is-on .prog-tick,
  .prog-item.is-preview .prog-tick{
    background:var(--red-hi);
    height:22px;
    box-shadow:0 0 10px rgba(194,36,48,.45);
  }
  .prog-title{
    position:relative;
    display:inline;
    font-size:clamp(1.2rem, 2.6vw, 1.65rem); font-weight:500;
    letter-spacing:-.02em; line-height:1.25; color:var(--paper);
    margin:0;
    transition:color .35s ease;
  }
  .prog-title::after{
    content:"";
    position:absolute; left:0; bottom:-3px; height:1px; width:0;
    background:var(--red-hi);
    transition:width .55s cubic-bezier(.22,.8,.24,1);
  }
  .prog-item.is-on .prog-title::after,
  .prog-item.is-preview .prog-title::after{width:100%}
  .prog-preview{
    margin:10px 0 0; max-width:48ch;
    font-size:.88rem; font-weight:300; color:var(--paper-faint); line-height:1.45;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
    opacity:.55;
    transition:opacity .35s ease, color .35s ease;
  }
  .prog-item.is-preview .prog-preview{
    opacity:.85;
    color:var(--paper-dim);
  }
  .prog-item.is-on .prog-preview{display:none}
  .prog-note{
    display:grid; grid-template-rows:0fr; opacity:0;
    transition:grid-template-rows .5s ease, opacity .45s ease .04s;
    margin-top:0;
  }
  .prog-note > span{overflow:hidden}
  .prog-note p{
    margin:12px 0 0; max-width:48ch;
    font-size:.95rem; font-weight:300; color:var(--paper-dim); line-height:1.55;
  }
  .prog-aud{
    display:inline-flex; align-items:center; gap:6px;
    margin-top:12px;
    font-size:.58rem; letter-spacing:.16em; text-transform:uppercase;
    font-weight:400;
  }
  .prog-aud-label{color:var(--paper-faint); letter-spacing:.14em}
  .prog-aud-sep{color:var(--paper-faint); letter-spacing:0}
  .prog-aud-val{color:var(--paper); font-weight:500; letter-spacing:.18em}
  .prog-item.is-on .prog-note{grid-template-rows:1fr; opacity:1}
  /* mail action — reads as a button, signals an outgoing message */
  .prog-mail{
    display:flex; width:max-content; align-items:center; gap:9px;
    margin-top:18px;
    padding:9px 16px;
    font-size:.62rem; letter-spacing:.16em; text-transform:uppercase;
    color:var(--paper); font-weight:500; text-decoration:none;
    border:1px solid rgba(194,36,48,.45);
    background:rgba(163,22,33,.14);
    border-radius:999px;
    transition:background .3s ease, border-color .3s ease, transform .35s cubic-bezier(.22,.8,.24,1);
  }
  .prog-mail-ico{
    width:14px; height:11px; flex:none;
    fill:none; stroke:var(--red-hi); stroke-width:1.3;
    stroke-linecap:round; stroke-linejoin:round;
    transition:stroke .3s ease, transform .35s cubic-bezier(.22,.8,.24,1);
  }
  .prog-mail:hover{
    background:rgba(163,22,33,.34);
    border-color:var(--red-hi);
    transform:translateY(-2px);
  }
  .prog-mail:hover .prog-mail-ico{stroke:var(--paper); transform:translateX(2px)}
  .prog-forms{
    display:flex; flex-direction:column; align-items:flex-end; gap:6px;
    padding-top:4px;
  }
  .prog-stub{
    display:inline-block;
    font-size:.58rem; letter-spacing:.16em; text-transform:uppercase;
    color:var(--paper-faint); font-weight:400;
    padding:5px 8px;
    border:1px solid rgba(250,247,242,.1);
    opacity:.38;
    transition:opacity .4s ease, color .35s ease, border-color .35s ease;
  }
  .prog-item.is-on .prog-stub,
  .prog-item.is-preview .prog-stub{
    opacity:1;
    color:var(--paper);
    border-color:rgba(194,36,48,.4);
  }
  .prog-item.is-on{transform:translateX(8px)}
  #repertuar.is-pinned .prog-item:not(.is-on){opacity:.38}
  #repertuar.is-pinned .prog-item:not(.is-on) .prog-title{color:var(--paper-faint)}
  @media (max-width:760px){
    .prog-item{
      grid-template-columns:40px 1fr;
      gap:8px 14px;
      padding:clamp(22px, 3.5vh, 30px) 0;
    }
    .prog-forms{
      grid-column:2; align-items:flex-start; flex-direction:row; flex-wrap:wrap; gap:6px;
      padding-top:2px;
    }
    .prog-preview{
      white-space:normal; display:-webkit-box;
      -webkit-line-clamp:1; -webkit-box-orient:vertical;
    }
    .prog-item.is-on .prog-preview{display:none}
    .prog-rail{left:0}
  }

  /* ---------- projeler ---------- */
  #projeler{padding-bottom:clamp(100px, 16vh, 160px)}
  .projects{
    display:grid;
    grid-template-columns:repeat(4, minmax(0, 1fr));
    gap:clamp(18px, 2.5vw, 32px);
  }
  @media (max-width:920px){
    .projects{grid-template-columns:repeat(2, minmax(0, 1fr))}
  }
  @media (max-width:560px){
    .projects{grid-template-columns:1fr}
  }
  .project{
    background:transparent;
    padding:38px 30px 34px;
    position:relative;
    isolation:isolate;
    transition:opacity .45s ease, background .45s ease, transform .5s cubic-bezier(.22,.8,.24,1);
  }
  /* Soft radial wash from the seal — revealed on hover only */
  .project::before{
    content:"";
    position:absolute; inset:0; z-index:-1;
    border-radius:2px;
    background:
      radial-gradient(ellipse 90% 70% at 28% 18%, rgba(194,36,48,.14), transparent 58%),
      radial-gradient(ellipse 80% 60% at 50% 40%, rgba(250,247,242,.04), transparent 70%);
    opacity:0;
    transition:opacity .45s ease;
    pointer-events:none;
  }
  /* Architectural corner ticks (top-left + bottom-right) */
  .project::after{
    content:"";
    position:absolute; inset:10px; z-index:-1;
    opacity:0;
    pointer-events:none;
    background:
      linear-gradient(var(--paper-faint), var(--paper-faint)) top left / 12px 1px no-repeat,
      linear-gradient(var(--paper-faint), var(--paper-faint)) top left / 1px 12px no-repeat,
      linear-gradient(var(--paper-faint), var(--paper-faint)) bottom right / 12px 1px no-repeat,
      linear-gradient(var(--paper-faint), var(--paper-faint)) bottom right / 1px 12px no-repeat;
    transition:opacity .45s ease;
  }
  .seal{
    width:74px; height:74px;
    border-radius:50%;
    border:1px solid rgba(250,247,242,.16);
    box-shadow:inset 0 2px 10px rgba(0,0,0,.85), inset 0 -1px 2px rgba(250,247,242,.05);
    display:flex; align-items:center; justify-content:center;
    margin-bottom:26px;
    background:radial-gradient(circle at 38% 32%, rgba(250,247,242,.045), rgba(0,0,0,.4));
    transition:border-color .4s ease, box-shadow .4s ease, transform .5s cubic-bezier(.22,.8,.24,1);
  }
  .seal svg{
    width:42px; height:42px;
    stroke:var(--paper); fill:none;
    stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round;
    opacity:.8;
    transition:opacity .4s ease, filter .4s ease, stroke .4s ease;
  }
  .project h3{
    position:relative;
    display:inline-block;
    font-size:1.18rem; font-weight:600; letter-spacing:.01em;
    margin:0 0 8px;
    color:var(--paper);
    transition:letter-spacing .45s ease, color .35s ease;
  }
  .project h3::after{
    content:"";
    position:absolute; left:0; bottom:-3px; height:1px; width:0;
    background:var(--red-hi);
    transition:width .55s cubic-bezier(.22,.8,.24,1);
  }
  .project p{
    color:var(--paper-faint); font-weight:300; font-size:.92rem; line-height:1.55;
    transition:color .4s ease;
  }

  /* Statement cell — not a project: prospectus note in the empty seat */
  .proj-statement{
    position:relative;
    display:flex; align-items:stretch; gap:18px;
    min-height:100%;
    padding:28px 26px 28px 22px;
    text-decoration:none; color:inherit;
    isolation:isolate;
    background:
      linear-gradient(165deg, rgba(250,247,242,.045) 0%, rgba(250,247,242,.012) 42%, rgba(0,0,0,.15) 100%);
    box-shadow:inset 0 0 0 1px rgba(250,247,242,.07);
    transition:opacity .45s ease, background .5s ease, box-shadow .5s ease;
  }
  .proj-statement-spine{
    flex:0 0 auto;
    width:1px;
    align-self:stretch;
    background:linear-gradient(
      to bottom,
      var(--red-hi) 0%,
      rgba(194,36,48,.55) 35%,
      rgba(250,247,242,.12) 100%
    );
    transform-origin:top center;
    transform:scaleY(.42);
    opacity:.85;
    transition:transform .7s cubic-bezier(.22,.8,.24,1), opacity .45s ease;
  }
  .proj-statement-inner{
    flex:1 1 auto;
    display:flex; flex-direction:column; justify-content:space-between;
    gap:28px;
    min-width:0;
  }
  .proj-statement-copy{
    margin:0;
    max-width:26ch;
    font-size:clamp(.95rem, 1.35vw, 1.08rem);
    font-weight:300;
    line-height:1.55;
    letter-spacing:.005em;
    color:var(--paper-dim);
    transition:color .4s ease;
  }
  .proj-statement-mail{
    position:relative;
    display:inline-block;
    align-self:flex-start;
    font-size:.72rem; font-weight:400;
    letter-spacing:.04em;
    color:var(--paper);
    transition:color .35s ease;
  }
  .proj-statement-mail::after{
    content:"";
    position:absolute; left:0; bottom:-5px; height:1px; width:28%;
    background:var(--red-hi);
    transition:width .55s cubic-bezier(.22,.8,.24,1);
  }

  @media (hover: hover){
    .projects:has(.project:hover) .project:not(:hover){opacity:.42}
    .projects:has(.project:hover) .proj-statement{opacity:.5}
    .projects:has(.proj-statement:hover) .project{opacity:.38}
    .project:hover::before{opacity:1}
    .project:hover::after{opacity:.7}
    .project:hover .seal{
      border-color:rgba(163,22,33,.55);
      box-shadow:inset 0 2px 10px rgba(0,0,0,.85), 0 0 22px var(--red-glow);
      transform:scale(1.06);
    }
    .project:hover .seal svg{
      opacity:1; stroke:var(--red-hi);
      filter:drop-shadow(0 0 6px rgba(194,36,48,.7));
    }
    .project:hover h3{letter-spacing:.03em}
    .project:hover h3::after{width:100%}
    .project:hover p{color:var(--paper-dim)}
    .proj-statement:hover{
      background:
        linear-gradient(165deg, rgba(194,36,48,.1) 0%, rgba(250,247,242,.04) 45%, rgba(0,0,0,.12) 100%);
      box-shadow:inset 0 0 0 1px rgba(194,36,48,.35);
    }
    .proj-statement:hover .proj-statement-spine{
      transform:scaleY(1); opacity:1;
    }
    .proj-statement:hover .proj-statement-copy{color:var(--paper)}
    .proj-statement:hover .proj-statement-mail::after{width:100%}
  }

  /* ---------- animated sigils ---------- */
  /* MINDPRINT — profile brain + biometric scan */
  .sg-mindprint .outline{opacity:.95}
  .sg-mindprint .fold{opacity:.7; stroke-width:1.15}
  .sg-mindprint .cerebellum{opacity:.85}
  .sg-mindprint .core{fill:var(--red-hi); stroke:none}
  .sg-mindprint .scan{
    stroke:var(--red-hi); stroke-width:1.1; opacity:0;
    animation:sg-scan 3.8s ease-in-out infinite;
  }
  @keyframes sg-scan{
    0%{transform:translateY(-11px); opacity:0}
    16%{opacity:.9}
    52%{transform:translateY(11px); opacity:.9}
    70%,100%{transform:translateY(11px); opacity:0}
  }

  /* PolyMind — one question rippling through a synthetic crowd */
  .sg-polymind .nd{fill:var(--paper); stroke:none; opacity:.4; animation:sg-node 3.6s ease-in-out infinite}
  @keyframes sg-node{0%,100%{opacity:.3}40%{opacity:.95}}
  .sg-polymind .core{fill:var(--red-hi)}
  .sg-polymind .ripple{
    fill:none; stroke:var(--red-hi); stroke-width:1;
    transform-box:fill-box; transform-origin:center;
    animation:sg-ripple 3.6s ease-out infinite;
  }
  @keyframes sg-ripple{
    0%{transform:scale(.35); opacity:.8}
    70%{transform:scale(2.3); opacity:0}
    100%{transform:scale(2.3); opacity:0}
  }

  /* PulseCall — telephone + radial public pulse */
  .sg-pulsecall .phone{opacity:.95}
  .sg-pulsecall .ray{
    stroke:var(--red-hi); stroke-width:1.2; fill:none; opacity:0;
    stroke-dasharray:4 28;
    transform-origin:24px 26px;
    animation:sg-pc-ray 3.2s ease-out infinite;
  }
  .sg-pulsecall .ray:nth-child(1){animation-delay:0s}
  .sg-pulsecall .ray:nth-child(2){animation-delay:.1s}
  .sg-pulsecall .ray:nth-child(3){animation-delay:.2s}
  .sg-pulsecall .ray:nth-child(4){animation-delay:.3s}
  .sg-pulsecall .ray:nth-child(5){animation-delay:.4s}
  .sg-pulsecall .ray:nth-child(6){animation-delay:.5s}
  .sg-pulsecall .ray:nth-child(7){animation-delay:.6s}
  .sg-pulsecall .ray:nth-child(8){animation-delay:.7s}
  @keyframes sg-pc-ray{
    0%,8%{opacity:0; stroke-dashoffset:24}
    28%{opacity:.95; stroke-dashoffset:0}
    55%{opacity:.25; stroke-dashoffset:-8}
    72%,100%{opacity:0; stroke-dashoffset:-16}
  }
  .sg-pulsecall .ring{
    stroke:var(--red-hi); stroke-width:1.15; fill:none; opacity:0;
    animation:sg-pc-ring 3.2s ease-out infinite;
  }
  .sg-pulsecall .ring.r2{animation-delay:.2s}
  @keyframes sg-pc-ring{
    0%,10%{opacity:0}
    22%{opacity:.85}
    48%,100%{opacity:0}
  }

  /* Scrollable — mixed media feed */
  .sg-scrollable .feed{animation:sg-feed 5.4s linear infinite}
  @keyframes sg-feed{from{transform:translateY(0)}to{transform:translateY(-26px)}}
  .sg-scrollable .chip{stroke:var(--paper); fill:rgba(250,247,242,.05); stroke-width:1}
  .sg-scrollable .play{fill:var(--red-hi); stroke:none; opacity:.9}
  .sg-scrollable .wave{stroke:var(--red-hi); stroke-width:1; opacity:.85}

  /* ZoomMarizer — long text condenses; the lens appears */
  .sg-zoommarizer .zl path{
    transform-box:fill-box; transform-origin:center;
    animation:sg-zoom 4.4s ease-in-out infinite;
  }
  .sg-zoommarizer .zl path:nth-child(2){animation-delay:.12s}
  .sg-zoommarizer .zl path:nth-child(3){animation-delay:.24s}
  .sg-zoommarizer .zl path:nth-child(4){animation-delay:.36s}
  @keyframes sg-zoom{
    0%,22%{transform:scaleX(1); opacity:.75}
    55%,78%{transform:scaleX(.14); opacity:1}
    100%{transform:scaleX(1); opacity:.75}
  }
  .sg-zoommarizer .lens{
    stroke:var(--red-hi); fill:none; opacity:0;
    transform-box:fill-box; transform-origin:center;
    animation:sg-lens 4.4s ease-in-out infinite;
  }
  @keyframes sg-lens{
    0%,40%{opacity:0; transform:scale(1.5)}
    55%,80%{opacity:.9; transform:scale(1)}
    95%,100%{opacity:0; transform:scale(1)}
  }

  /* A.LIVE — AI faceplate + two-way talk */
  .sg-alive .plate{opacity:.95}
  .sg-alive .detail{opacity:.55; stroke-width:1.1}
  .sg-alive .visor{
    stroke:var(--red-hi); stroke-width:1.7;
    animation:sg-al-visor 2.8s ease-in-out infinite;
  }
  .sg-alive .led{
    fill:var(--red-hi); stroke:none;
    animation:sg-al-led 2.8s ease-in-out infinite;
  }
  .sg-alive .led.l2{animation-delay:.14s}
  @keyframes sg-al-visor{
    0%,100%{opacity:.55; stroke-width:1.5}
    45%,55%{opacity:1; stroke-width:2}
  }
  @keyframes sg-al-led{
    0%,100%{opacity:.4}
    45%,55%{opacity:1}
  }
  .sg-alive .bubble{opacity:.55}
  .sg-alive .bubble-out{
    stroke:var(--red-hi);
    transform-box:fill-box; transform-origin:center;
    animation:sg-al-out 3.4s ease-in-out infinite;
  }
  .sg-alive .bubble-in{
    transform-box:fill-box; transform-origin:center;
    animation:sg-al-in 3.4s ease-in-out infinite;
  }
  .sg-alive .dots-out{
    fill:var(--red-hi); stroke:none;
    transform-box:fill-box; transform-origin:center;
    animation:sg-al-out 3.4s ease-in-out infinite;
  }
  .sg-alive .dots-in{
    fill:var(--paper); stroke:none;
    transform-box:fill-box; transform-origin:center;
    animation:sg-al-in 3.4s ease-in-out infinite;
  }
  @keyframes sg-al-out{
    0%,12%{opacity:0; transform:translate(2px,1px) scale(.86)}
    28%,48%{opacity:1; transform:translate(0,0) scale(1)}
    62%,100%{opacity:0; transform:translate(-1px,-1px) scale(.94)}
  }
  @keyframes sg-al-in{
    0%,40%{opacity:0; transform:translate(-2px,1px) scale(.86)}
    55%,78%{opacity:1; transform:translate(0,0) scale(1)}
    90%,100%{opacity:0; transform:translate(1px,-1px) scale(.94)}
  }

  /* OLIVE BRANCH — branch over geo theater */
  .sg-olivebranch .globe{stroke:var(--paper-faint); stroke-width:1; opacity:.55}
  .sg-olivebranch .meridian{stroke:var(--paper-faint); stroke-width:1; opacity:.4; stroke-dasharray:2 3}
  .sg-olivebranch .sweep{
    stroke:var(--red-hi); stroke-width:1; fill:none; opacity:0;
    transform-origin:24px 24px;
    animation:sg-ob-sweep 5.5s linear infinite;
  }
  @keyframes sg-ob-sweep{
    0%{transform:rotate(-40deg); opacity:0}
    12%{opacity:.7}
    55%{opacity:.35}
    100%{transform:rotate(320deg); opacity:0}
  }
  .sg-olivebranch .branch{
    transform-origin:16px 38px;
    animation:sg-ob-sway 3.8s ease-in-out infinite alternate;
  }
  @keyframes sg-ob-sway{from{transform:rotate(-8deg)}to{transform:rotate(8deg)}}
  .sg-olivebranch .stem{opacity:.95}
  .sg-olivebranch .leaf{
    transform-box:fill-box; transform-origin:left center;
    animation:sg-ob-leaf 2.8s ease-in-out infinite alternate;
  }
  .sg-olivebranch .leaf:nth-child(3){animation-delay:.2s}
  .sg-olivebranch .leaf:nth-child(4){animation-delay:.4s}
  .sg-olivebranch .leaf:nth-child(5){animation-delay:.6s}
  .sg-olivebranch .leaf:nth-child(6){animation-delay:.8s}
  @keyframes sg-ob-leaf{
    from{opacity:.55; transform:scaleX(.92)}
    to{opacity:1; transform:scaleX(1)}
  }
  .sg-olivebranch .fruit{fill:var(--red-hi); stroke:none}

  /* ---------- iletisim ---------- */
  #iletisim{padding-bottom:clamp(100px, 16vh, 160px)}
  .contact h2.big{
    font-size:clamp(2.6rem, 8vw, 5.4rem);
    letter-spacing:-.03em; line-height:1.02;
    margin-bottom:30px;
  }
  .contact .lead{
    color:var(--paper-dim); font-weight:300;
    font-size:clamp(1.02rem, 1.9vw, 1.2rem);
    max-width:46ch; margin-bottom:48px;
  }
  .contact-grid{display:flex; gap:16px; flex-wrap:wrap}
  .contact-card{
    flex:1 1 260px;
    border:1px solid var(--line); border-radius:6px;
    padding:30px 32px;
    text-decoration:none; color:var(--paper);
    background:rgba(10,10,10,.45);
    transition:border-color .3s ease, background .3s ease, transform .3s ease;
    display:block;
  }
  .contact-card:hover{
    border-color:var(--red);
    background:rgba(163,22,33,.14);
    transform:translateY(-3px);
  }
  .contact-card .kind{
    font-size:.72rem; letter-spacing:.3em; text-transform:uppercase;
    color:var(--red-hi); display:block; margin-bottom:12px; font-weight:500;
  }
  .contact-card .val{font-size:clamp(1.05rem, 2.2vw, 1.35rem); font-weight:500; word-break:break-all}

  /* ---------- footer ---------- */
  footer{
    border-top:1px solid var(--line);
    padding:56px var(--pad) 120px;
    display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap;
    color:var(--paper-faint); font-size:.86rem; font-weight:300;
    position:relative; z-index:2;
  }
  footer .l{color:var(--paper); font-weight:500; letter-spacing:.06em}
  footer .l em{font-style:normal; color:var(--red-hi)}

  /* ---------- persistent cta ---------- */
  .float-cta{
    position:fixed; right:20px; bottom:20px; z-index:9;
    display:flex; gap:8px;
    opacity:0; transform:translateY(14px); pointer-events:none;
    transition:opacity .45s ease, transform .45s ease;
  }
  .float-cta.show{opacity:1; transform:none; pointer-events:auto}
  .float-cta a{
    display:inline-flex; align-items:center; gap:8px;
    background:rgba(10,10,10,.78);
    backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
    border:1px solid var(--line);
    color:var(--paper); text-decoration:none;
    font-size:.78rem; letter-spacing:.12em; text-transform:uppercase;
    padding:11px 20px; border-radius:999px;
    transition:border-color .3s ease, background .3s ease;
  }
  .float-cta a:hover{border-color:var(--red); background:rgba(163,22,33,.25)}
  .float-cta .dot{width:6px; height:6px; border-radius:50%; background:var(--red-hi)}

  /* ---------- reveal ---------- */
  .rv{opacity:0; transform:translateY(26px); transition:opacity .9s ease, transform .9s cubic-bezier(.22,.8,.3,1)}
  .rv.in{opacity:1; transform:none}
  .rv.d1{transition-delay:.08s}.rv.d2{transition-delay:.16s}.rv.d3{transition-delay:.24s}

  @media (prefers-reduced-motion: reduce){
    html{scroll-behavior:auto}
    .grain{animation:none}
    .rv{opacity:1; transform:none; transition:none}
    .sg *{animation:none !important}
    .micsym .mic-wave{animation:none}
    .board .tile-inner{transition:none; opacity:1; transform:none}
    .board .note{transition:none}
    *{transition-duration:.01ms !important}
  }