
:root{
  --ink:#0b0b0a; --ink-2:#151412; --ink-3:#1d1c19;
  --paper:#f1eee6; --paper-2:#e7e1d3;
  --concrete:#a39d8d; --graphite:#555046; --bone:#cdc6b4;
  --bronze:#ad8452; --bronze-light:#d3ab77;
  --line-on-paper:rgba(21,20,18,.14); --line-on-ink:rgba(241,238,230,.16);
  --f-display:'Bricolage Grotesque','Arial Narrow',Arial,sans-serif;
  --f-body:'Manrope','Segoe UI',Arial,sans-serif;
  --f-mono:'Space Mono','Courier New',monospace;
  --edge: clamp(20px,4vw,64px);
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto;} *{animation-duration:.001ms !important;transition-duration:.001ms !important;} }
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--f-body);-webkit-font-smoothing:antialiased;overflow-x:hidden;}
img,canvas,svg{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer;}
ul{margin:0;padding:0;list-style:none;}
h1,h2,h3,p{margin:0;}
::selection{background:var(--bronze);color:var(--ink);}
.wrap{max-width:1400px;margin:0 auto;padding:0 var(--edge);}
.eyebrow{font-family:var(--f-mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--bronze);}
html:not([data-lang="en"]) [data-i18n="en"]{display:none;}
html[data-lang="en"] [data-i18n="tr"]{display:none;}
.reveal{opacity:0;transform:translateY(24px);transition:opacity .9s cubic-bezier(.16,.8,.2,1),transform .9s cubic-bezier(.16,.8,.2,1);}
.reveal.in{opacity:1;transform:translateY(0);}

/* nav (light, toggles on-dark) */
.nav{position:fixed;top:0;left:0;right:0;z-index:1200;display:flex;align-items:center;justify-content:space-between;padding:26px var(--edge);color:var(--ink);transition:background-color .5s ease,padding .4s ease,backdrop-filter .5s ease,border-color .5s ease;border-bottom:1px solid transparent;}
.nav.scrolled{padding-top:16px;padding-bottom:16px;background:rgba(241,238,230,.72);backdrop-filter:blur(14px) saturate(140%);-webkit-backdrop-filter:blur(14px) saturate(140%);border-bottom:1px solid var(--line-on-paper);}
.nav.on-dark{color:var(--paper);}
.nav.on-dark.scrolled{background:rgba(11,11,10,.62);border-bottom:1px solid var(--line-on-ink);}
.nav-logo{font-family:var(--f-display);font-weight:600;font-size:19px;display:flex;flex-direction:column;line-height:1;}
.nav-logo b{font-weight:700;}
.nav-logo span{font-family:var(--f-mono);font-size:9px;letter-spacing:.24em;color:var(--bronze);margin-top:5px;}
.nav.on-dark .nav-logo span{color:var(--bronze-light);}
.nav-links{display:flex;gap:38px;align-items:center;}
.nav-links a{font-size:13px;letter-spacing:.03em;position:relative;padding:4px 0;opacity:.86;transition:opacity .3s ease;}
.nav-links a:hover{opacity:1;}
.nav-links a.current{opacity:1;color:var(--bronze);}
.nav.on-dark .nav-links a.current{color:var(--bronze-light);}
.nav-links a::after{content:"";position:absolute;left:0;bottom:0;width:0;height:1px;background:currentColor;transition:width .35s cubic-bezier(.16,.8,.2,1);}
.nav-links a:hover::after{width:100%;}
.nav-right{display:flex;align-items:center;gap:28px;}
.lang-toggle{font-family:var(--f-mono);font-size:12px;letter-spacing:.08em;display:flex;gap:6px;align-items:center;}
.lang-toggle button{opacity:.5;transition:opacity .3s ease;padding:2px;}
.lang-toggle button.active{opacity:1;color:var(--bronze);}
.nav.on-dark .lang-toggle button.active{color:var(--bronze-light);}
.nav-burger{display:none;flex-direction:column;gap:5px;width:26px;cursor:pointer;position:relative;z-index:1100;}
.nav-burger span{display:block;height:1px;background:currentColor;width:100%;transition:transform .35s ease,opacity .35s ease;transform-origin:center;}
.nav-burger.open{color:var(--paper);}
.nav-burger.open span:nth-child(1){transform:translateY(6px) rotate(45deg);}
.nav-burger.open span:nth-child(2){opacity:0;}
.nav-burger.open span:nth-child(3){transform:translateY(-6px) rotate(-45deg);}
.mobile-menu{position:fixed;inset:0;z-index:1000;background:var(--ink);color:var(--paper);display:flex;flex-direction:column;justify-content:center;padding:0 var(--edge);transform:translateY(-100%);transition:transform .55s cubic-bezier(.76,0,.24,1);}
.mobile-menu.open{transform:translateY(0);}
.mobile-menu nav{display:flex;flex-direction:column;gap:6px;}
.mobile-menu nav a{font-family:var(--f-display);font-size:clamp(34px,11vw,54px);font-weight:600;padding:14px 0;border-bottom:1px solid var(--line-on-ink);letter-spacing:-.01em;}
.mobile-menu-foot{margin-top:34px;display:flex;justify-content:space-between;font-family:var(--f-mono);font-size:12px;letter-spacing:.08em;color:var(--bone);}

/* page hero */
.page-hero{padding:calc(120px + 4vh) 0 60px;}
.crumb{font-family:var(--f-mono);font-size:11px;letter-spacing:.1em;color:var(--concrete);display:flex;gap:8px;align-items:center;margin-bottom:26px;}
.crumb a{color:var(--graphite);}
.crumb a:hover{color:var(--bronze);}
.page-title{font-family:var(--f-display);font-weight:700;font-size:clamp(38px,6.6vw,92px);line-height:1;letter-spacing:-.02em;text-wrap:balance;max-width:1100px;}
.page-title em{font-style:normal;color:var(--bronze);}

/* story */
.story{padding:clamp(30px,6vh,80px) 0 clamp(70px,10vh,120px);}
.story-grid{display:grid;grid-template-columns:220px 1fr;gap:60px;}
.story p{font-size:clamp(16px,1.5vw,20px);line-height:1.75;color:var(--graphite);max-width:720px;}
.story p+p{margin-top:20px;}

/* studio visual break */
.studio-visual{display:block;position:relative;height:70vh;min-height:420px;overflow:hidden;}
.studio-visual canvas{position:absolute;inset:0;width:100%;height:100%;}
.studio-scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,11,10,.1) 0%,rgba(11,11,10,.05) 45%,rgba(11,11,10,.88) 100%);}
.studio-label{position:absolute;left:var(--edge);bottom:36px;font-family:var(--f-mono);font-size:12px;letter-spacing:.1em;color:var(--bone);text-transform:uppercase;}

/* process */
.process{background:var(--ink);color:var(--paper);padding:clamp(90px,13vh,150px) 0;}
.proc-head{margin-bottom:20px;}
.proc-title{font-family:var(--f-display);font-weight:700;font-size:clamp(34px,5vw,66px);letter-spacing:-.01em;}
.proc-list{border-top:1px solid var(--line-on-ink);}
.proc-row{display:grid;grid-template-columns:70px 1fr 1fr;align-items:center;gap:30px;padding:clamp(20px,2.8vw,32px) 4px;border-bottom:1px solid var(--line-on-ink);position:relative;overflow:hidden;cursor:default;}
.proc-num{font-family:var(--f-mono);font-size:13px;color:var(--concrete);position:relative;z-index:2;}
.proc-name{font-family:var(--f-display);font-weight:600;font-size:clamp(20px,3vw,36px);letter-spacing:-.01em;position:relative;z-index:2;transition:transform .5s cubic-bezier(.16,.8,.2,1),color .4s ease;}
.proc-row:hover .proc-name{transform:translateX(14px);color:var(--bronze-light);}
.proc-desc{font-size:14.5px;line-height:1.6;color:var(--bone);position:relative;z-index:2;max-width:380px;}
.proc-fill{position:absolute;left:0;top:0;bottom:0;width:0;background:var(--ink-3);transition:width .5s cubic-bezier(.16,.8,.2,1);z-index:1;}
.proc-row:hover .proc-fill{width:100%;}

/* footer */
.foot{background:var(--paper);color:var(--ink);padding:clamp(80px,12vh,140px) 0 40px;}
.foot-cta{font-family:var(--f-display);font-weight:700;letter-spacing:-.02em;font-size:clamp(36px,7vw,100px);line-height:.96;text-wrap:balance;}
.foot-cta em{font-style:normal;color:var(--bronze);}
.foot-start{margin-top:36px;display:inline-flex;align-items:center;gap:16px;font-family:var(--f-mono);font-size:14px;letter-spacing:.08em;padding:18px 30px;border:1px solid var(--ink);border-radius:100px;transition:background .35s ease,color .35s ease,gap .35s ease;}
.foot-start:hover{background:var(--ink);color:var(--paper);gap:22px;}
.foot-bottom{margin-top:70px;padding-top:26px;border-top:1px solid var(--line-on-paper);display:flex;justify-content:space-between;flex-wrap:wrap;gap:14px;font-family:var(--f-mono);font-size:11px;letter-spacing:.06em;color:var(--concrete);}

@media (max-width:980px){
  .nav-links{display:none;} .nav-right .lang-toggle{display:none;} .nav-burger{display:flex;}
  .story-grid{grid-template-columns:1fr;gap:20px;}
  .proc-row{grid-template-columns:40px 1fr;}
  .proc-desc{grid-column:2;max-width:none;}
}
