/* ==========================================================================
   Bağçıvanoğlu · tasarım sistemi
   Konsept: "Portal". Her proje bir kapı. Koyu, sıcak siyah zemin; tek pirinç vurgu.
   İçindekiler: 1 token  2 temel  3 bileşenler  4 açılış  5 ana sayfa  6 projeler
                7 proje sayfası  8 stüdyo  9 köklerimiz  10 iletişim  11 duyarlı
   ========================================================================== */

/* 1 · TOKEN ---------------------------------------------------------------- */
:root{
  --bg:#0b0a09; --bg2:#14110f; --fg:#efe8dd; --mute:#968d82; --line:rgba(239,232,221,.14);
  --brass:#c9a36b; --ink:#14110e;
  --serif:'Instrument Serif',Georgia,'Times New Roman',serif;
  --cond:'Barlow Condensed','Arial Narrow',Impact,sans-serif;
  --sans:'Hanken Grotesk',system-ui,-apple-system,'Segoe UI',sans-serif;
  --mono:'DM Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --gut:clamp(16px,3.2vw,52px);
  --ease:cubic-bezier(.2,.7,.1,1); --ease2:cubic-bezier(.65,0,.15,1);
  --hdr:clamp(76px,8vw,108px);
  color-scheme:dark;
}
body[data-theme=cream]{
  --bg:#f1ede4; --bg2:#e8e2d6; --fg:#1b1713; --mute:#6b6258; --line:rgba(27,23,19,.18); --brass:#8a6633;
  color-scheme:light;
}

/* 2 · TEMEL ---------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:auto}
html.is-loading,html.is-loading body{overflow:hidden}
body{margin:0;background:var(--bg);color:var(--fg);font:300 clamp(15px,1.05vw,17px)/1.6 var(--sans);
  -webkit-font-smoothing:antialiased;transition:background-color .6s var(--ease),color .6s var(--ease);overflow-x:clip}
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:90;opacity:.055;mix-blend-mode:overlay;
  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='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
h1,h2,h3,p,figure{margin:0}
:focus-visible{outline:2px solid var(--brass);outline-offset:4px}
::selection{background:var(--brass);color:var(--ink)}
.skip{position:fixed;left:12px;top:-60px;z-index:200;background:var(--brass);color:var(--ink);padding:10px 16px;font:500 12px var(--mono);transition:top .2s}
.skip:focus{top:12px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
main{display:block;outline:0}
.wrap{padding-inline:var(--gut)}
.mono{font:400 11px/1.5 var(--mono);letter-spacing:.14em;text-transform:uppercase}
.eb{font:400 11px/1.5 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--mute)}
.eb::before{content:"";display:inline-block;width:28px;height:1px;background:currentColor;vertical-align:middle;margin-right:14px;opacity:.7}
.cond{font-family:var(--cond);text-transform:uppercase}

/* Sürükleme/kaydırma efektlerini açan yardımcılar */
html.js .rv{opacity:0;transform:translate3d(0,44px,0);transition:opacity 1.1s var(--ease),transform 1.3s var(--ease);transition-delay:var(--d,0s)}
html.js .rv.in{opacity:1;transform:none}
html.js .rvi{clip-path:inset(0 0 100% 0);transition:clip-path 1.5s var(--ease2);transition-delay:var(--d,0s)}
html.js .rvi img{transform:scale(1.22);transition:transform 2s var(--ease);transition-delay:var(--d,0s)}
html.js .rvi.in{clip-path:inset(0 0 0 0)}
html.js .rvi.in img{transform:scale(1)}
.ln{display:block;overflow:hidden;padding-bottom:.06em}
.ln>span{display:block;transform:translate3d(0,135%,0);transition:transform 1.2s var(--ease);transition-delay:var(--d,0s)}
.in>.ln>span,.on>.ln>span,.ln.in>span{transform:none}
.w{opacity:.16;transition:opacity .5s}
.w.on{opacity:1}

/* 3 · BİLEŞENLER ----------------------------------------------------------- */
/* Üst çubuk */
#hdr{position:fixed;inset:0 0 auto 0;z-index:60;height:var(--hdr);display:flex;align-items:center;justify-content:space-between;
  padding-inline:var(--gut);transition:transform .7s var(--ease),opacity .4s;pointer-events:none}
#hdr>*{pointer-events:auto}
#hdr.hide{transform:translate3d(0,-110%,0)}
#hdr::before{content:"";position:absolute;inset:0 0 -30px 0;z-index:-1;pointer-events:none;
  background:linear-gradient(var(--bg) 0%,transparent 100%);opacity:0;transition:opacity .4s}
#hdr.solid::before{opacity:.92}
.logo img{height:clamp(46px,4.6vw,70px);width:auto;transition:opacity .3s}
.logo .lk{display:none}
body[data-theme=cream] .logo .lw{display:none}
body[data-theme=cream] .logo .lk{display:block}
.nav{display:flex;align-items:center;gap:clamp(18px,2.4vw,36px)}
.nav a{font:400 11px var(--mono);letter-spacing:.16em;text-transform:uppercase;position:relative;padding-block:8px;opacity:.72;transition:opacity .25s}
.nav a::after{content:"";position:absolute;left:0;right:0;bottom:2px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease)}
.nav a:hover,.nav a[aria-current=page]{opacity:1}
.nav a:hover::after,.nav a[aria-current=page]::after{transform:scaleX(1)}
.lang{font:400 11px var(--mono);letter-spacing:.16em;opacity:.35}
.burger{display:none;font:400 11px var(--mono);letter-spacing:.16em;text-transform:uppercase;align-items:center;gap:12px;padding:12px 0}
.burger i{width:22px;height:7px;border-block:1px solid currentColor;display:block;transition:transform .4s var(--ease)}
.burger[aria-expanded=true] i{transform:rotate(90deg)}
.menu{position:fixed;inset:0;z-index:55;background:var(--bg);display:flex;flex-direction:column;justify-content:space-between;
  padding:calc(var(--hdr) + 20px) var(--gut) 34px;clip-path:circle(0 at calc(100% - 40px) 40px);transition:clip-path .9s var(--ease2);visibility:hidden}
.menu.open{clip-path:circle(150vmax at calc(100% - 40px) 40px);visibility:visible}
.menu nav{display:flex;flex-direction:column;gap:2px}
.menu nav a{font:700 clamp(56px,17vw,120px)/.95 var(--cond);text-transform:uppercase;opacity:.9}
.menu p{color:var(--mute);text-transform:none;letter-spacing:.06em}
body.menu-open #hdr{transform:none}

/* İmleç */
.cur{position:fixed;left:0;top:0;z-index:120;pointer-events:none;width:0;height:0;mix-blend-mode:difference;display:none}
.cur span{position:absolute;left:0;top:0;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;background:#fff;
  display:grid;place-items:center;font:500 10px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:#000;
  transition:width .45s var(--ease),height .45s var(--ease),margin .45s var(--ease)}
.cur.on span{width:92px;height:92px;margin:-46px 0 0 -46px}
@media (hover:hover) and (pointer:fine){html.js .cur{display:block}html.js a,html.js button{cursor:none}html.js .lb figure img{cursor:none}}

/* Portal geçişi (sayfalar arası) */
#portal{position:fixed;inset:0;z-index:100;pointer-events:none;visibility:hidden;background:var(--bg) center/cover no-repeat}
#portal.on{visibility:visible;pointer-events:auto}

/* Düğme: çizgili bağlantı */
.lnk{display:inline-flex;align-items:center;gap:14px;font:400 11px var(--mono);letter-spacing:.16em;text-transform:uppercase;padding-block:10px;position:relative}
.lnk::after{content:"";position:absolute;left:0;right:0;bottom:4px;height:1px;background:currentColor;opacity:.55;transform-origin:left;transition:transform .6s var(--ease)}
.lnk i{font-style:normal;transition:transform .5s var(--ease)}
.lnk:hover i{transform:translateX(8px)}
.mag{display:inline-block;will-change:transform}

/* Görsel döngüsü (dissolve) */
.cyc{position:relative;overflow:hidden;background:var(--bg2)}
.cyc img{position:absolute;left:0;top:0;width:100%;height:100%;object-fit:cover}
.cyc img.fd{opacity:0;transition:opacity 1.2s ease}
.cyc img.fd.in{opacity:1}

/* Işık kutusu */
.lb{position:fixed;inset:0;z-index:150;background:rgba(8,7,6,.96);display:grid;place-items:center;padding:clamp(16px,4vw,56px);
  opacity:0;visibility:hidden;transition:opacity .4s,visibility .4s;color:#efe8dd}
.lb.open{opacity:1;visibility:visible}
.lb figure{display:grid;gap:14px;max-width:100%;max-height:100%;justify-items:center}
.lb img{max-width:100%;max-height:calc(100vh - 140px);max-height:calc(100svh - 140px);object-fit:contain}
.lb figcaption{color:#968d82}
.lb button{position:absolute;font:400 11px var(--mono);letter-spacing:.16em;text-transform:uppercase;padding:16px}
.lb-x{top:8px;right:8px}.lb-p{left:8px;top:50%;font-size:22px!important}.lb-n{right:8px;top:50%;font-size:22px!important}

/* 4 · AÇILIŞ ---------------------------------------------------------------- */
#loader{position:fixed;inset:0;z-index:200;pointer-events:none}
.ld-ring{position:absolute;left:50%;top:50%;width:min(30vmin,260px);height:min(30vmin,260px);margin:calc(min(30vmin,260px)/-2) 0 0 calc(min(30vmin,260px)/-2);
  border-radius:50%;border:1px solid rgba(201,163,107,.8);box-shadow:0 0 0 200vmax #0b0a09;transform:scale(1);
  transition:transform 1.5s cubic-bezier(.7,0,.2,1),border-color .6s}
.ld-sign{position:absolute;left:50%;top:50%;width:min(24vmin,210px);transform:translate(-50%,-50%);transition:opacity .5s,transform .8s var(--ease)}
.ld-sign img{width:100%;height:auto}
.ld-count{position:absolute;left:50%;top:calc(50% + min(15vmin,130px) + 28px);transform:translateX(-50%);font:400 11px var(--mono);letter-spacing:.2em;color:#efe8dd;transition:opacity .4s}
.ld-count i{font-style:normal;opacity:.5;margin-left:2px}
#loader.open .ld-ring{transform:scale(22);border-color:transparent}
#loader.open .ld-sign,#loader.open .ld-count{opacity:0}
#loader.done{display:none}

/* 5 · ANA SAYFA ------------------------------------------------------------- */
.hero{position:relative;height:100vh;height:100svh;min-height:560px;overflow:hidden;background:#0b0a09;color:#efe8dd}
.slide{position:absolute;inset:0;opacity:0;transition:opacity 1.8s ease;will-change:opacity}
.slide.on{opacity:1}
.slide .im{position:absolute;inset:-6% 0;will-change:transform}
.slide img{width:100%;height:100%;object-fit:cover;transform:scale(1.14);transition:transform 9s cubic-bezier(.2,.5,.3,1)}
.slide.on img{transform:scale(1)}
.hero::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:1;
  background:linear-gradient(180deg,rgba(11,10,9,.55) 0%,transparent 26%,transparent 46%,rgba(11,10,9,.86) 100%)}
.hl{position:absolute;z-index:2;left:var(--gut);right:var(--gut);bottom:clamp(88px,13vh,150px);pointer-events:none}
.hl h1,.hl .hh{font:700 clamp(56px,12.4vw,216px)/.85 var(--cond);text-transform:uppercase;letter-spacing:-.004em}
.hl .hh{position:absolute;left:0;bottom:0;visibility:hidden}
.hl .hh.on{visibility:visible}
.hl .ln:nth-child(2)>span{--d:.12s}
.hh .ln>span{transform:translate3d(0,135%,0)}
.hh.on .ln>span{transform:none}
.hh:not(.on) .ln>span{transition-duration:.6s}
.hero-sub{position:absolute;z-index:2;left:var(--gut);bottom:clamp(34px,6vh,60px);max-width:44ch;color:rgba(239,232,221,.82)}
.hero-meta{position:absolute;z-index:2;right:var(--gut);bottom:clamp(34px,6vh,60px);display:flex;align-items:center;gap:18px;color:rgba(239,232,221,.8)}
.hero-meta .bar{width:clamp(70px,9vw,140px);height:1px;background:rgba(239,232,221,.3);position:relative;overflow:hidden}
.hero-meta .bar i{position:absolute;inset:0;background:#efe8dd;transform:scaleX(0);transform-origin:left}
.hero-meta .bar i.run{animation:bar 6.5s linear forwards}
@keyframes bar{to{transform:scaleX(1)}}
.hero-cue{position:absolute;z-index:2;left:50%;bottom:14px;width:1px;height:28px;background:rgba(239,232,221,.3);overflow:hidden}
.hero-cue::after{content:"";position:absolute;left:0;top:-100%;width:1px;height:100%;background:#efe8dd;animation:cue 2.2s var(--ease2) infinite}
@keyframes cue{to{top:100%}}

.intro{padding:clamp(90px,15vw,220px) var(--gut) clamp(50px,7vw,100px)}
.intro .eb{margin-bottom:clamp(26px,3vw,46px)}
.intro p.big{font:400 clamp(30px,4.9vw,86px)/1.1 var(--serif);max-width:20em;letter-spacing:-.012em}
.stats{display:grid;grid-template-columns:repeat(3,1fr);border-block:1px solid var(--line);margin-top:clamp(50px,7vw,110px)}
.stat{padding:clamp(26px,3.4vw,54px) 0;border-right:1px solid var(--line);padding-left:clamp(14px,2.4vw,40px)}
.stat:first-child{padding-left:0}.stat:last-child{border-right:0}
.stat b{display:block;font:700 clamp(40px,7.4vw,128px)/.95 var(--cond);color:var(--brass);font-variant-numeric:tabular-nums;white-space:nowrap}
.stat b small{font:500 .36em var(--cond);margin-left:.12em;color:var(--fg)}
.stat>span{display:block;margin-top:8px;color:var(--mute)}

.mqw{padding-block:clamp(28px,4vw,56px);overflow:hidden;border-bottom:1px solid var(--line)}
.mqw .eb{padding-inline:var(--gut);margin-bottom:clamp(14px,2vw,26px)}
.mq{display:flex;width:max-content;animation:mq 80s linear infinite;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.mqw:hover .mq{animation-play-state:paused}
.mq span{font:600 clamp(26px,3.2vw,52px)/1 var(--cond);text-transform:uppercase;letter-spacing:.05em;color:var(--mute);padding-right:clamp(40px,5vw,86px);white-space:nowrap;transition:color .3s}
.mq span:hover{color:var(--fg)}
@keyframes mq{to{transform:translate3d(-50%,0,0)}}

/* Portal: seçilmiş projeler */
.sel-h{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;padding:clamp(70px,10vw,150px) var(--gut) clamp(26px,3vw,46px)}
.sec-t{font:700 clamp(46px,8.6vw,150px)/.88 var(--cond);text-transform:uppercase}
.sec-t em{font:italic 400 .9em var(--serif);text-transform:none;color:var(--brass);letter-spacing:-.01em}
.pin{position:relative}
.pin-in{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;display:flex;flex-direction:column;justify-content:center}
.pin-track{display:flex;gap:clamp(14px,1.8vw,30px);padding-inline:var(--gut);align-items:center;will-change:transform}
.pc{flex:none;width:clamp(260px,32vw,540px);position:relative;display:block}
.pc:nth-child(even){margin-top:clamp(40px,10vh,120px)}
.pc:nth-child(odd){margin-bottom:clamp(20px,5vh,60px)}
.pc .fig{aspect-ratio:4/5;overflow:hidden;position:relative;background:var(--bg2)}
.pc:nth-child(3n) .fig{aspect-ratio:1/1}
.pc .fig img{transition:transform 1.4s var(--ease)}
.pc:hover .fig img.base{transform:scale(1.05)}
.pc .no{position:absolute;left:14px;top:12px;z-index:3;font:400 11px var(--mono);letter-spacing:.14em;color:#efe8dd;mix-blend-mode:difference}
.pc .cap{display:flex;justify-content:space-between;align-items:baseline;gap:14px;padding-top:16px}
.pc .cap b{font:700 clamp(22px,2.2vw,34px)/1 var(--cond);text-transform:uppercase;font-weight:700}
.pc .cap span{color:var(--mute);font:400 11px var(--mono);letter-spacing:.12em;text-transform:uppercase;white-space:nowrap}
.pin-ui{display:flex;align-items:center;gap:18px;padding:0 var(--gut);margin-top:clamp(18px,3vh,36px);color:var(--mute)}
.pin-ui .bar{flex:1;height:1px;background:var(--line);position:relative}
.pin-ui .bar i{position:absolute;inset:0;background:var(--brass);transform:scaleX(0);transform-origin:left}
.sel-end{display:flex;justify-content:flex-end;padding:clamp(24px,3vw,44px) var(--gut) 0}

/* Çalışma alanı */
.work{padding:clamp(80px,12vw,190px) var(--gut) clamp(50px,7vw,100px)}
.work .eb{margin-bottom:clamp(30px,4vw,60px)}
.wr{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:clamp(18px,4vw,70px);align-items:end;padding-block:clamp(22px,2.8vw,40px);border-top:1px solid var(--line);position:relative;overflow:hidden}
.wr:last-child{border-bottom:1px solid var(--line)}
.wr h3{font:700 clamp(44px,8.2vw,140px)/.9 var(--cond);text-transform:uppercase;transition:color .5s,transform .8s var(--ease);color:var(--mute)}
.wr p{color:var(--mute);max-width:38ch;transition:color .5s}
.wr:hover h3{color:var(--fg);transform:translateX(clamp(8px,1.4vw,24px))}
.wr:hover p{color:var(--fg)}
.wr::before{content:"";position:absolute;inset:0;background:var(--brass);transform:scaleY(0);transform-origin:bottom;opacity:.07;transition:transform .7s var(--ease)}
.wr:hover::before{transform:scaleY(1)}

/* Köklerimiz geçişi */
.kok{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(26px,6vw,110px);align-items:center;padding:clamp(80px,12vw,190px) var(--gut);background:#0e0c0a;border-block:1px solid var(--line)}
.kok .sec-t{margin:20px 0 clamp(20px,2.6vw,36px)}
.kok p{color:#c9bfb2;max-width:46ch;margin-bottom:24px}
.kok .fr{position:relative;max-width:460px;margin-left:auto;width:100%}
.kok .fr .rvi{aspect-ratio:3/4;overflow:hidden;background:var(--bg2)}
.kok .fr img{width:100%;height:100%;object-fit:cover}
.kok figcaption{margin-top:12px;color:var(--mute)}

/* 6 · PROJELER -------------------------------------------------------------- */
.pg-h{padding:calc(var(--hdr) + clamp(30px,5vw,80px)) var(--gut) clamp(20px,3vw,40px);display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:20px}
.pg-h h1{font:700 clamp(64px,15vw,260px)/.82 var(--cond);text-transform:uppercase}
.pg-h .sub{font:italic 400 clamp(22px,2.6vw,40px)/1.1 var(--serif);color:var(--brass);margin-top:16px}
.pg-h .cnt{font:700 clamp(40px,6vw,100px)/.9 var(--cond);color:var(--mute);font-variant-numeric:tabular-nums}
.flt{padding:0 var(--gut) clamp(20px,2.4vw,34px);display:flex;flex-wrap:wrap;gap:clamp(10px,1.4vw,18px) 28px;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:30;transition:top .7s var(--ease)}
body:not(.hdr-hidden) .flt{top:calc(var(--hdr) - 12px)}
.flt::before{content:"";position:absolute;inset:-14px 0 0 0;background:var(--bg);z-index:-1;opacity:.94}
.grp{display:flex;flex-wrap:wrap;gap:8px}
.chip{font:400 11px var(--mono);letter-spacing:.12em;text-transform:uppercase;padding:9px 15px;border:1px solid var(--line);border-radius:999px;color:var(--mute);transition:background .3s,color .3s,border-color .3s}
.chip:hover{color:var(--fg);border-color:var(--fg)}
.chip[aria-pressed=true]{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.chip.disc{border-color:var(--brass);color:var(--fg);font:600 13px var(--cond);letter-spacing:.14em;padding:10px 22px;border-radius:0}
.chip.disc[aria-pressed=true]{background:var(--brass);color:var(--ink)}
.ix{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:clamp(20px,4vw,70px);padding:0 var(--gut) clamp(80px,10vw,160px);align-items:start}
.ix-row{display:flex;justify-content:space-between;align-items:baseline;gap:16px;border-top:1px solid var(--line);padding:2px 0;position:relative;overflow:hidden}
.ix-row:last-child{border-bottom:1px solid var(--line)}
.ix-row b{font:700 clamp(30px,4.6vw,76px)/1.06 var(--cond);text-transform:uppercase;color:var(--mute);transition:color .35s,transform .7s var(--ease)}
.ix-row span{font:400 11px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--mute);white-space:nowrap;transition:color .35s}
.ix-row:hover b,.ix-row.on b{color:var(--fg);transform:translateX(clamp(8px,1.2vw,20px))}
.ix-row:hover span,.ix-row.on span{color:var(--brass)}
.ix-prev{position:sticky;top:calc(var(--hdr) + 40px);aspect-ratio:4/5;overflow:hidden}
.ix-prev .cap{position:absolute;left:0;right:0;bottom:0;z-index:3;padding:70px 18px 16px;background:linear-gradient(transparent,rgba(11,10,9,.9));display:grid;gap:3px;color:#efe8dd}
.ix-prev .cap b{font:700 clamp(22px,2vw,30px)/1 var(--cond);text-transform:uppercase}
.ix-prev .cap span{color:#c9bfb2;font-size:13px}
.gr{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,1.6vw,26px);padding:0 var(--gut) clamp(80px,10vw,160px)}
.gc{display:block}
.gc .cyc{aspect-ratio:4/3}
.gc .cm{display:grid;gap:3px;padding-top:12px}
.gc .cm b{font:700 clamp(20px,1.7vw,28px)/1 var(--cond);text-transform:uppercase}
.gc .cm span{color:var(--mute);font-size:13px}
.gc .cm em{font-style:normal;color:var(--brass);font-size:13px}
.empty{padding:40px var(--gut);color:var(--mute)}

/* 7 · PROJE SAYFASI (krem dergi) -------------------------------------------- */
.pj-top{padding:calc(var(--hdr) + clamp(26px,4vw,70px)) var(--gut) clamp(24px,3vw,44px)}
.pj-top .eb{margin-bottom:clamp(14px,2vw,26px)}
.pj-top h1{font:400 clamp(58px,12.6vw,230px)/.9 var(--serif);letter-spacing:-.02em;text-wrap:balance}
.pj-hero{margin-inline:var(--gut);aspect-ratio:21/9;overflow:hidden;position:relative;background:var(--bg2)}
.pj-hero .in-i{position:absolute;inset:-9% 0;will-change:transform}
.pj-hero img{width:100%;height:100%;object-fit:cover}
.pj-cols{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:clamp(24px,6vw,110px);padding:clamp(40px,6vw,100px) var(--gut)}
.pj-cols .lead{font:400 clamp(24px,2.9vw,46px)/1.22 var(--serif);max-width:24em;text-wrap:pretty}
.facts{align-self:end;border-collapse:collapse;width:100%;font-size:14px}
.facts td{padding:12px 0;border-top:1px solid var(--line);vertical-align:top}
.facts td:first-child{color:var(--mute);width:40%;font:400 11px var(--mono);letter-spacing:.12em;text-transform:uppercase;padding-top:15px}
.facts tr:last-child td{border-bottom:1px solid var(--line)}
.tabs2{position:sticky;top:0;z-index:25;padding:14px var(--gut);display:flex;gap:10px;flex-wrap:wrap;transition:top .7s var(--ease)}
body:not(.hdr-hidden) .tabs2{top:calc(var(--hdr) - 12px)}
.tabs2::before{content:"";position:absolute;inset:0 0 0 0;background:var(--bg);opacity:.94;z-index:-1}
.msec{padding:clamp(28px,4vw,64px) var(--gut) 0}
.msec h2{font:400 clamp(34px,5vw,84px)/1 var(--serif);padding-bottom:clamp(16px,2vw,30px);margin-bottom:clamp(16px,2vw,30px);border-bottom:1px solid var(--line)}
.gg{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(12px,1.4vw,22px)}
.gg figure{grid-column:span 6;overflow:hidden;background:var(--bg2);cursor:zoom-in}
.gg figure img{width:100%;aspect-ratio:3/2;object-fit:cover;transition:transform 1.4s var(--ease)}
.gg figure:hover img{transform:scale(1.035)}
.gg figure:nth-child(4n+1){grid-column:span 7}.gg figure:nth-child(4n+2){grid-column:span 5}
.gg figure:nth-child(4n+3){grid-column:span 5}.gg figure:nth-child(4n+4){grid-column:span 7}
.gg figure:nth-child(4n+2) img,.gg figure:nth-child(4n+3) img{aspect-ratio:4/5}
.gg figure:last-child:nth-child(odd){grid-column:1/-1}
.gg figure:last-child:nth-child(odd) img{aspect-ratio:21/9}
/* Sıradaki proje portalı */
.nx{margin-top:clamp(80px,11vw,180px);padding:clamp(50px,7vw,110px) var(--gut) clamp(60px,8vw,130px);display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(24px,5vw,90px);align-items:center;border-top:1px solid var(--line);position:relative}
.nx .eb{margin-bottom:18px}
.nx h2{font:400 clamp(44px,9vw,160px)/.92 var(--serif);letter-spacing:-.02em;text-wrap:balance}
.nx-o{width:clamp(180px,30vw,460px);aspect-ratio:1;border-radius:50%;overflow:hidden;position:relative;transition:transform 1s var(--ease)}
.nx-o img{width:100%;height:100%;object-fit:cover;transform:scale(1.12);transition:transform 1.4s var(--ease)}
.nx:hover .nx-o{transform:scale(1.06)}.nx:hover .nx-o img{transform:scale(1)}
.nx-prev{position:absolute;left:var(--gut);top:18px}

/* 8 · STÜDYO ---------------------------------------------------------------- */
.st{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(24px,6vw,110px);padding:calc(var(--hdr) + clamp(20px,4vw,70px)) var(--gut) clamp(60px,8vw,130px);align-items:start}
.st-l{position:sticky;top:calc(var(--hdr) + 20px);display:grid;gap:clamp(18px,2vw,28px);align-content:start}
.st-l h1{font:400 clamp(48px,7.4vw,128px)/.94 var(--serif);letter-spacing:-.02em;text-wrap:balance}
.st-l p{color:var(--mute);max-width:46ch}
.st-l p.k{color:var(--fg)}
.founders{display:grid;border-top:1px solid var(--line)}
.founders div{display:flex;justify-content:space-between;gap:14px;padding:14px 0;border-bottom:1px solid var(--line)}
.founders span{color:var(--mute);font-size:14px}
.st-r{display:grid;gap:clamp(12px,1.4vw,22px)}
.st-r .rvi{overflow:hidden;background:var(--bg2);aspect-ratio:3/2}
.st-r .rvi:nth-child(2){aspect-ratio:4/5;width:78%;margin-left:auto}
.st-r .rvi:nth-child(3){aspect-ratio:4/3}
.st-r .rvi:nth-child(4){aspect-ratio:4/5;width:68%}
.st-r img{width:100%;height:100%;object-fit:cover}
.steps{padding:clamp(40px,6vw,90px) var(--gut) clamp(80px,10vw,150px)}
.steps .eb{margin-bottom:clamp(24px,3vw,44px)}
.sp{display:grid;grid-template-columns:90px minmax(0,1.4fr) minmax(0,1fr);gap:clamp(14px,3vw,50px);align-items:baseline;padding-block:clamp(20px,2.6vw,38px);border-top:1px solid var(--line)}
.sp:last-child{border-bottom:1px solid var(--line)}
.sp .n{font:400 11px var(--mono);letter-spacing:.14em;color:var(--brass)}
.sp h3{font:700 clamp(40px,7vw,120px)/.92 var(--cond);text-transform:uppercase}
.sp p{color:var(--mute);max-width:36ch}

/* 9 · KÖKLERİMİZ ------------------------------------------------------------ */
.kp{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(24px,6vw,110px);padding:calc(var(--hdr) + clamp(20px,4vw,70px)) var(--gut) clamp(70px,9vw,140px);align-items:start}
.kp h1{font:400 clamp(52px,8.6vw,150px)/.94 var(--serif);letter-spacing:-.02em;margin:18px 0 clamp(24px,3vw,44px);text-wrap:balance}
.kp p.t{color:#c9bfb2;max-width:46ch;font-size:clamp(17px,1.5vw,21px);margin-bottom:18px}
.tl{margin-top:clamp(30px,4vw,60px);border-top:1px solid var(--line)}
.tl div{display:grid;grid-template-columns:clamp(90px,10vw,150px) 1fr;gap:16px;padding:clamp(16px,1.8vw,26px) 0;border-bottom:1px solid var(--line);opacity:.35;transition:opacity .6s}
.tl div.act{opacity:1}
.tl b{font:700 clamp(26px,3vw,46px)/1 var(--cond);color:var(--brass);text-transform:uppercase}
.tl span{color:#c9bfb2;align-self:center}
.kp figure{position:sticky;top:calc(var(--hdr) + 20px)}
.kp figure .rvi{aspect-ratio:3/4;overflow:hidden;background:var(--bg2);cursor:zoom-in}
.kp figure img{width:100%;height:100%;object-fit:cover}
.kp figcaption{margin-top:14px;color:var(--mute);line-height:1.7}

/* 10 · İLETİŞİM ------------------------------------------------------------- */
.ct{padding:clamp(100px,15vw,240px) var(--gut) clamp(40px,5vw,70px);border-top:1px solid var(--line);position:relative;overflow:hidden}
.ct .eb{margin-bottom:clamp(24px,3vw,44px)}
.ct h2{font:700 clamp(56px,11.4vw,200px)/.86 var(--cond);text-transform:uppercase;max-width:11em}
.ct-mail{display:inline-block;margin-top:clamp(36px,5vw,80px);font:400 clamp(30px,6.4vw,112px)/1 var(--serif);letter-spacing:-.015em;position:relative;word-break:break-word}
.ct-mail::after{content:"";position:absolute;left:0;right:0;bottom:-.06em;height:2px;background:var(--brass);transform:scaleX(0);transform-origin:left;transition:transform .8s var(--ease)}
.ct-mail:hover::after{transform:scaleX(1)}
.ct-mail small{display:block;margin-top:14px;font:400 11px var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--brass)}
.ct-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:30px;margin-top:clamp(50px,7vw,110px);padding-top:30px;border-top:1px solid var(--line)}
.ct-grid .mono{color:var(--mute);display:block;margin-bottom:10px}
.ct-grid a:hover{color:var(--brass)}
.ft{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-top:clamp(50px,6vw,90px);color:var(--mute)}

/* 11 · DUYARLI -------------------------------------------------------------- */
@media (max-width:960px){
  .nav{display:none}.burger{display:inline-flex}
  .kok,.pj-cols,.st,.kp{grid-template-columns:1fr}
  .st-l,.kp figure,.ix-prev{position:static}
  .ix{grid-template-columns:1fr}.ix-prev{display:none}
  .gr{grid-template-columns:repeat(2,minmax(0,1fr))}
  .gg figure,.gg figure:nth-child(n){grid-column:1/-1}
  .gg figure:nth-child(n) img{aspect-ratio:3/2}
  .wr{grid-template-columns:1fr}
  .sp{grid-template-columns:48px 1fr}.sp p{grid-column:2}
  .nx{grid-template-columns:1fr}.nx-o{width:min(70vw,360px)}
  .ct-grid{grid-template-columns:1fr}
  .kok .fr{margin-left:0}
  .pj-hero{aspect-ratio:4/3}
  /* Yatay portal: dokunmatikte kendi kaydırması */
  .pin{height:auto!important}
  .pin-in{position:static;height:auto;display:block;padding-bottom:20px}
  .pin-track{overflow-x:auto;scroll-snap-type:x mandatory;transform:none!important;padding-bottom:10px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .pin-track::-webkit-scrollbar{display:none}
  .pc{scroll-snap-align:center;width:min(76vw,380px)}
  .pc:nth-child(n){margin:0}
  .pc .cap{flex-direction:column;gap:6px;align-items:flex-start}
  .pin-ui{display:none}
}
@media (max-width:560px){
  .stats{grid-template-columns:1fr}
  .stat{display:flex;justify-content:space-between;align-items:baseline;padding:18px 0!important;border-right:0;border-bottom:1px solid var(--line)}
  .stat:last-child{border-bottom:0}.stat>span{margin:0;text-align:right}
  .stat b{font-size:42px}
  .hero-meta .bar{display:none}.hero-sub{max-width:24ch;font-size:14px}
  .gr{grid-template-columns:1fr}
  .ix-row span{display:none}
  .pg-h .cnt{display:none}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;transition-delay:0s!important}
  html.js .rv,html.js .rvi,.ln>span{opacity:1;transform:none;clip-path:none}
  .mq{animation:none}
}

/* Ek: ilk karenin açılışta görünmesi ve bölüm kaydırma payı */
.slide.show{opacity:1}
.msec{scroll-margin-top:calc(var(--hdr) + 36px)}