
: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(--ink);color:var(--paper);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-light);}
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 .8s cubic-bezier(.16,.8,.2,1),transform .8s cubic-bezier(.16,.8,.2,1);}
.reveal.in{opacity:1;transform:translateY(0);}

/* ---- nav (shared) ---- */
.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(--paper);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(11,11,10,.62);backdrop-filter:blur(14px) saturate(140%);-webkit-backdrop-filter:blur(14px) saturate(140%);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-light);margin-top:5px;}
.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-light);}
.nav-links a::after{content:"";position:absolute;left:0;bottom:0;width:0;height:1px;background:var(--bronze-light);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-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(--bone);}
.crumb a:hover{color:var(--bronze-light);}
.page-title{font-family:var(--f-display);font-weight:700;font-size:clamp(44px,8.6vw,124px);line-height:.94;letter-spacing:-.02em;text-wrap:balance;}
.page-sub{margin-top:22px;max-width:560px;font-size:clamp(15px,1.3vw,18px);line-height:1.7;color:var(--bone);}

/* ---- filter bar ---- */
.filter-bar{display:flex;gap:10px;flex-wrap:wrap;margin-top:46px;border-top:1px solid var(--line-on-ink);border-bottom:1px solid var(--line-on-ink);padding:18px 0;}
.filter-btn{font-family:var(--f-mono);font-size:12px;letter-spacing:.08em;padding:8px 16px;border:1px solid var(--line-on-ink);border-radius:100px;color:var(--bone);transition:all .3s ease;}
.filter-btn:hover{border-color:var(--bronze-light);color:var(--paper);}
.filter-btn.active{background:var(--bronze);border-color:var(--bronze);color:var(--ink);}

/* ---- masonry grid ---- */
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:3px;padding:3px 0 0;background:var(--ink);}
.card{display:block;position:relative;overflow:hidden;grid-column:span 2;aspect-ratio:4/3;cursor:pointer;transition:opacity .5s ease,transform .5s ease;}
.card.hide{display:none;}
.card.s-wide{grid-column:span 4;aspect-ratio:16/7;}
.card.s-tall{grid-column:span 2;grid-row:span 2;aspect-ratio:auto;}
.card.s-sq{grid-column:span 2;aspect-ratio:1/1;}
.card canvas{position:absolute;inset:0;width:100%;height:100%;}
.card-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.16,1,.3,1);}
.card:hover .card-img{transform:scale(1.06);}
.card-scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,11,10,.05) 0%,rgba(11,11,10,.1) 55%,rgba(11,11,10,.92) 100%);transition:background .4s ease;}
.card:hover .card-scrim{background:linear-gradient(180deg,rgba(11,11,10,0) 0%,rgba(173,132,82,.14) 55%,rgba(11,11,10,.95) 100%);}
.card-tag{position:absolute;top:18px;left:18px;font-family:var(--f-mono);font-size:10px;letter-spacing:.1em;padding:5px 10px;border:1px solid var(--line-on-ink);border-radius:100px;color:var(--bone);text-transform:uppercase;backdrop-filter:blur(6px);}
.card-body{position:absolute;left:0;right:0;bottom:0;padding:20px 22px;}
.card-name{font-family:var(--f-display);font-weight:700;font-size:clamp(18px,1.8vw,26px);letter-spacing:-.01em;}
.card-meta{margin-top:6px;font-family:var(--f-mono);font-size:11px;letter-spacing:.06em;color:var(--bone);display:flex;gap:10px;}
.card-view{margin-top:12px;font-family:var(--f-mono);font-size:11px;letter-spacing:.08em;opacity:0;transform:translateY(6px);transition:opacity .4s ease,transform .4s ease;color:var(--bronze-light);}
.card:hover .card-view{opacity:1;transform:translateY(0);}

/* ---- footer (shared, condensed) ---- */
.foot{background:var(--paper);color:var(--ink);padding:clamp(80px,12vh,140px) 0 40px;margin-top:100px;}
.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;}
  .grid{grid-template-columns:repeat(2,1fr);}
  .card, .card.s-wide, .card.s-tall, .card.s-sq{grid-column:span 2;aspect-ratio:4/3;grid-row:auto;}
  .filter-bar{gap:8px;}
}
