* { box-sizing: border-box; }
:root { color-scheme: dark; --bg:#090909; --fg:#f1f0ed; --muted:#85827d; --line:#282725; --accent:#e45f39; --mono:'DM Mono',monospace; --sans:'Inter',Arial,sans-serif; }
html { scroll-behavior:smooth; background:var(--bg); }
body { margin:0; color:var(--fg); background:var(--bg); font-family:var(--sans); -webkit-font-smoothing:antialiased; }
a { color:inherit; text-decoration:none; }
button { color:inherit; font:inherit; }
.topbar { height:60px; border-bottom:1px solid #ffffff12; position:fixed; z-index:10; inset:0 0 auto; display:flex; align-items:center; justify-content:space-between; padding:0 2.1vw; background:#090909d9; backdrop-filter:blur(14px); }
.brand,.nav a { font:500 12px var(--mono); letter-spacing:.025em; }
.brand { font-weight:500; }
.nav { display:flex; gap:32px; }
.nav a { color:#9a9894; transition:color .2s; }
.nav a:hover,.nav a.active { color:var(--fg); }
.hero { height:100svh; min-height:580px; position:relative; overflow:hidden; background:#121212; }
.hero-video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 42%; filter:brightness(.77); }
.hero:after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,#0505051f 45%,#090909 100%),linear-gradient(90deg,#0003,transparent 55%); }
.hero-caption { position:absolute; z-index:1; bottom:8.5vh; left:5vw; right:5vw; display:flex; align-items:end; justify-content:space-between; }
.hero-caption p { margin:0; font:11px var(--mono); color:#d1ccc7; letter-spacing:.1em; text-transform:uppercase; }
.hero-title { font-size:clamp(36px,7.5vw,112px); font-weight:500; letter-spacing:-.075em; line-height:.92; margin:0 0 16px; }
.hero-play { border:1px solid #ffffff70; width:58px; height:58px; border-radius:50%; background:#e45f39; display:grid; place-items:center; color:#111; font-size:18px; cursor:pointer; margin-bottom:4px; transition:transform .2s; }
.hero-play:hover { transform:scale(1.08); }
.work { padding:30px 5vw 100px; }
.filter-row { display:flex; justify-content:space-between; align-items:center; gap:20px; border-bottom:1px solid var(--line); padding:0 0 18px; }
.filters { display:flex; flex-wrap:wrap; gap:8px; }
.filter { border:0; padding:8px 12px; background:transparent; color:var(--muted); font:11px var(--mono); cursor:pointer; transition:color .18s,background .18s; }
.filter:hover,.filter.selected { color:var(--fg); background:#ffffff12; }
.count,.eyebrow { font:10px var(--mono); letter-spacing:.08em; color:var(--muted); text-transform:uppercase; }
.project-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:46px 20px; padding-top:22px; }
.project-card { min-width:0; }
.project-image { display:block; width:100%; aspect-ratio:1.72; overflow:hidden; background:#171717; position:relative; }
.project-image img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .6s cubic-bezier(.2,.7,.2,1),filter .4s; filter:brightness(.9); }
.project-card:hover .project-image img { transform:scale(1.035); filter:brightness(1); }
.project-meta { display:flex; justify-content:space-between; gap:15px; align-items:baseline; padding-top:12px; }
.project-name { font-size:clamp(16px,1.5vw,21px); letter-spacing:-.04em; font-weight:500; margin:0; }
.project-info { color:var(--muted); font:10px var(--mono); text-align:right; white-space:nowrap; }
.footer { display:flex; align-items:center; justify-content:space-between; border-top:1px solid var(--line); margin:40px 5vw 0; padding:22px 0 30px; color:var(--muted); font:10px var(--mono); letter-spacing:.04em; }
.footer a:hover { color:var(--fg); }
.about { min-height:calc(100svh - 60px); padding:19vh 14vw 10vh; display:flex; flex-direction:column; justify-content:center; }
.about h1 { margin:0 0 40px; font-size:clamp(48px,9vw,126px); font-weight:500; letter-spacing:-.075em; line-height:.95; }
.about-copy { max-width:900px; font-size:clamp(23px,3vw,42px); line-height:1.32; letter-spacing:-.045em; color:#d8d6d2; }
.about-copy a { color:var(--accent); }
.detail { padding:105px 5vw 0; }
.jump-nav { position:fixed; z-index:4; left:12px; top:43vh; display:flex; flex-direction:column; gap:12px; max-height:44vh; overflow:auto; writing-mode:vertical-rl; transform:rotate(180deg); }
.jump-nav a { color:#77736e; font:9px var(--mono); letter-spacing:.08em; white-space:nowrap; transition:color .2s; }
.jump-nav a:hover { color:var(--accent); }
.back { color:var(--accent); font:10px var(--mono); letter-spacing:.08em; text-transform:uppercase; }
.detail-head { display:grid; grid-template-columns:1.5fr .7fr; gap:40px; align-items:end; margin:22px 0 44px; }
.detail h1 { font-size:clamp(42px,7vw,94px); letter-spacing:-.075em; font-weight:500; line-height:.96; margin:0; }
.detail-meta { display:flex; flex-direction:column; align-items:flex-end; gap:9px; font:11px var(--mono); color:var(--muted); text-transform:uppercase; }
.detail-meta .client { color:var(--fg); }
.detail-intro { display:grid; grid-template-columns:1fr 1.35fr; gap:9vw; padding:0 0 38px; border-bottom:1px solid var(--line); }
.description { font-size:clamp(18px,2vw,26px); line-height:1.4; letter-spacing:-.03em; margin:0; max-width:550px; }
.credits { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:34px; align-content:start; }
.credit { display:grid; grid-template-columns:110px 1fr; gap:14px; border-top:1px solid var(--line); padding:12px 0; font-size:13px; line-height:1.45; }
.credit-label { font:9px var(--mono); color:var(--muted); letter-spacing:.04em; }
.detail-section { padding:28px 0 46px; border-bottom:1px solid var(--line); scroll-margin-top:70px; }
.section-head { display:flex; justify-content:space-between; color:var(--accent); font:11px var(--mono); letter-spacing:.06em; margin-bottom:20px; }
.feature-still { position:relative; width:100%; aspect-ratio:1.85; overflow:hidden; background:#141414; }
.feature-still img { width:100%; height:100%; object-fit:cover; display:block; }
.project-video { display:block; width:100%; max-height:78vh; aspect-ratio:16/9; object-fit:contain; background:#090909; margin-bottom:10px; }
.project-video-embed { display:block; width:100%; aspect-ratio:16/9; border:0; background:#090909; margin-bottom:10px; }
.still-strip { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-top:10px; }
.still-strip.gallery { margin:0; }
.still { aspect-ratio:1.55; overflow:hidden; background:#171717; cursor:zoom-in; padding:0; border:0; }
.still img { width:100%; height:100%; display:block; object-fit:cover; transition:transform .3s; }
.still:hover img { transform:scale(1.04); }
.video-facade { aspect-ratio:16/9; background:#111; position:relative; overflow:hidden; display:grid; place-items:center; }
.video-facade>img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:brightness(.72); }
.video-facade>button { position:absolute; z-index:1; border:0; width:68px; height:68px; border-radius:50%; color:#14110f; background:var(--accent); cursor:pointer; font-size:20px; transition:transform .2s; }
.video-facade>button:hover { transform:scale(1.08); }
.video-facade>span { position:absolute; z-index:1; bottom:16px; left:18px; font:10px var(--mono); letter-spacing:.08em; }
.video-facade iframe { position:absolute; inset:0; width:100%; height:100%; border:0; }
.next-project { display:flex; justify-content:space-between; align-items:center; gap:24px; padding:46px 0 52px; }
.next-project .eyebrow { color:var(--muted); }
.next-project h2 { font-size:clamp(24px,4vw,52px); font-weight:500; letter-spacing:-.06em; margin:10px 0; }
.next-project img { width:min(24vw,290px); aspect-ratio:1.6; object-fit:cover; }
.lightbox { position:fixed; z-index:30; inset:0; background:#000e; display:grid; place-items:center; padding:5vw; cursor:zoom-out; }
.lightbox img { max-width:100%; max-height:90vh; object-fit:contain; }
.lightbox[hidden] { display:none; }
@media(max-width:720px) {
 .topbar { height:54px; padding:0 18px; }.nav{gap:20px}.brand,.nav a{font-size:10px}
 .hero{min-height:520px}.hero-caption{left:20px;right:20px;bottom:7vh}.hero-title{font-size:clamp(42px,12vw,78px)}.hero-play{width:48px;height:48px}
 .work{padding:24px 18px 70px}.filter-row{align-items:flex-start;flex-direction:column}.project-grid{grid-template-columns:1fr;gap:28px;padding-top:18px}.project-image{aspect-ratio:1.48}.project-name{font-size:17px}.project-info{font-size:9px}
 .about{padding:20vh 22px 8vh}.about h1{margin-bottom:25px}.about-copy{font-size:25px}
 .jump-nav{display:none}.detail{padding:90px 18px 0}.detail-head{grid-template-columns:1fr;gap:18px;margin:20px 0 28px}.detail h1{font-size:clamp(44px,12vw,78px)}.detail-meta{align-items:flex-start;flex-direction:row;flex-wrap:wrap;gap:8px 14px;font-size:9px}.detail-intro{grid-template-columns:1fr;gap:28px}.credits{grid-template-columns:1fr}.credit{grid-template-columns:110px 1fr}.feature-still{aspect-ratio:1.25}.still-strip{grid-template-columns:repeat(2,1fr);gap:7px}.section-head{font-size:10px}.video-facade>button{width:54px;height:54px}.next-project img{width:31vw}.footer{margin:30px 18px 0}
}

/* Tolga's portfolio content placeholders until his showreel and project media arrive. */
.hero-placeholder { background:radial-gradient(ellipse at 75% 34%,#47251b 0,transparent 34%),radial-gradient(ellipse at 28% 76%,#1c2631 0,transparent 38%),#090909; }
.hero-grid { position:absolute; inset:0; opacity:.17; background-image:linear-gradient(#ffffff0d 1px,transparent 1px),linear-gradient(90deg,#ffffff0d 1px,transparent 1px); background-size:8vw 8vw; mask-image:linear-gradient(transparent,#000 35%,#000 75%,transparent); }
.hero-placeholder:before { content:""; position:absolute; width:min(46vw,620px); aspect-ratio:1; right:12%; top:12%; border:1px solid #ffffff20; border-radius:50%; box-shadow:0 0 0 6vw #ffffff04,0 0 0 12vw #ffffff03,inset 0 0 100px #e45f3910; }
.hero-kicker { font:11px var(--mono)!important; color:var(--accent)!important; letter-spacing:.12em!important; margin:0 0 18px!important; }
.scroll-link { font:10px var(--mono); letter-spacing:.08em; color:#bbb7b0; display:flex; gap:15px; align-items:center; }
.scroll-link span { color:var(--accent); font-size:18px; }
.media-placeholder { display:flex; align-items:flex-end; justify-content:space-between; padding:24px; position:relative; overflow:hidden; background:radial-gradient(ellipse at 75% 25%,#80402a55,transparent 35%),linear-gradient(135deg,#202020,#111 65%,#221a17); }
.media-placeholder:after { content:""; position:absolute; width:46%; aspect-ratio:1; right:10%; top:8%; border:1px solid #ffffff22; border-radius:50%; box-shadow:0 0 0 2vw #ffffff05,inset 0 0 75px #e45f3915; }
.media-placeholder .placeholder-code,.media-placeholder strong,.media-placeholder small { position:relative; z-index:1; }
.media-placeholder .placeholder-code { position:absolute; left:24px; top:22px; font:9px var(--mono); letter-spacing:.1em; color:#aaa49c; }
.media-placeholder strong { font-size:clamp(19px,2.5vw,34px); font-weight:500; letter-spacing:-.055em; max-width:76%; }
.media-placeholder small { font:9px var(--mono); letter-spacing:.08em; color:#aaa49c; text-align:right; }
.project-subtitle { margin:14px 0 0; color:var(--accent); font:12px var(--mono); letter-spacing:.05em; text-transform:uppercase; }
.project-description { font-size:16px; line-height:1.7; color:#d8d6d2; max-width:700px; }
.project-description p { margin:0 0 1.1em; white-space:pre-wrap; }
.next-placeholder { width:min(24vw,290px); aspect-ratio:1.6; display:grid; place-items:center; padding:18px; text-align:center; background:radial-gradient(ellipse at 70% 30%,#743b2850,transparent 45%),#171717; font-size:16px; letter-spacing:-.04em; }
@media(max-width:720px) {
 .hero-placeholder:before { width:70vw; right:-8%; top:12%; }
 .scroll-link { display:none; }
 .next-placeholder { width:31vw; }
}

.logo-marquee { position:relative; overflow:hidden; padding:68px 0 24px; background:#090909; mask-image:linear-gradient(90deg,transparent 0,#000 8%,#000 92%,transparent 100%); }
.logo-track { display:flex; width:max-content; animation:logo-scroll 34s linear infinite; }
.logo-marquee:hover .logo-track { animation-play-state:paused; }
.logo-group { display:flex; align-items:center; flex-shrink:0; gap:clamp(54px,8vw,130px); padding:0 clamp(27px,4vw,65px); }
.logo-item { display:flex; flex:0 0 clamp(90px,10vw,150px); align-items:center; justify-content:center; height:56px; opacity:.82; transition:opacity .2s; }
.logo-item:hover { opacity:1; }
.logo-item img { display:block; flex:none; max-width:100%; max-height:44px; width:auto; height:auto; object-fit:contain; object-position:center; }
@keyframes logo-scroll { to { transform:translateX(-50%); } }
.home-about { padding:78px 5vw 76px; border-top:1px solid var(--line); }
.home-about-head { display:flex; align-items:end; justify-content:space-between; gap:24px; margin-bottom:42px; }
.home-about-head h2 { margin:0 0 10px; font-size:clamp(34px,5vw,64px); font-weight:600; letter-spacing:-.065em; line-height:.95; }
.home-about-head p { margin:0; font:10px var(--mono); color:#c9c6c1; letter-spacing:.06em; }
.about-cta { display:flex; align-items:center; gap:12px; margin-bottom:1px; font:9px var(--mono); letter-spacing:.08em; white-space:nowrap; }
.about-cta span { display:block; width:9px; height:9px; border-radius:50%; background:#fff; }
.home-about-grid { display:grid; grid-template-columns:minmax(280px,.85fr) minmax(0,1fr); gap:clamp(36px,8vw,110px); align-items:start; }
.about-portrait { display:block; width:100%; aspect-ratio:.82; object-fit:cover; object-position:center 24%; background:#171717; }
.about-bio { max-width:680px; padding-top:2px; }
.about-bio .eyebrow { display:block; margin:0 0 10px; color:#f1f0ed; }
.about-bio p { margin:0 0 19px; color:#e4e2df; font-size:clamp(13px,1.1vw,15px); line-height:1.48; letter-spacing:-.015em; }
.about-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:54px; }
.about-stats div { display:flex; flex-direction:column; align-items:center; gap:8px; text-align:center; }
.about-stats strong { font-size:clamp(25px,3vw,38px); letter-spacing:-.06em; }
.about-stats span { font:10px var(--mono); letter-spacing:.07em; color:#e4e2df; }
.rnd-section { padding:76px 5vw 82px; border-top:1px solid var(--line); background:#090909; }
.rnd-heading { margin:0 auto 34px; text-align:center; }
.rnd-heading>span { display:block; font:8px var(--mono); letter-spacing:.08em; }
.rnd-heading h2 { margin:4px 0 3px; font-size:clamp(24px,3.4vw,38px); line-height:1; letter-spacing:-.06em; }
.rnd-heading p { margin:0; color:#d7d5d1; font:8px var(--mono); letter-spacing:.035em; }
.rnd-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); grid-auto-flow:dense; gap:14px; max-width:1060px; margin:0 auto; }
.rnd-card { position:relative; display:block; min-width:0; aspect-ratio:.68; overflow:hidden; border-radius:18px; background:#171717; isolation:isolate; outline:none; }
.rnd-card-wide { grid-column:span 2; aspect-ratio:2.05; }
.rnd-card:after { content:""; position:absolute; inset:45% 0 0; z-index:1; pointer-events:none; background:linear-gradient(transparent,#0009); }
.rnd-card video,.rnd-poster { position:absolute; inset:0; display:block; width:100%; height:100%; object-fit:cover; object-position:center; }
.rnd-card video { z-index:0; transition:transform .55s cubic-bezier(.2,.7,.2,1),filter .35s; filter:brightness(.82); }
.rnd-poster { z-index:1; transition:opacity .22s ease; }
.rnd-poster.is-hidden { opacity:0; pointer-events:none; }
.rnd-card>span { position:absolute; z-index:2; left:14px; bottom:13px; font:10px var(--mono); letter-spacing:.01em; text-shadow:0 1px 8px #000; }
.rnd-card:hover video,.rnd-card:focus-visible video { transform:scale(1.045); filter:brightness(1); }
.rnd-card:focus-visible { box-shadow:0 0 0 2px var(--fg); }
@media(max-width:720px) {
 .logo-marquee { padding:62px 0 18px; }
 .logo-group { gap:46px; padding:0 23px; }
 .logo-item { flex-basis:86px; height:44px; }
 .logo-item img { max-height:36px; }
 .home-about { padding:58px 20px 54px; }
 .home-about-head { align-items:flex-start; flex-direction:column; gap:17px; margin-bottom:27px; }
 .home-about-head p { font-size:9px; }
 .home-about-grid { grid-template-columns:1fr; gap:26px; }
 .about-portrait { aspect-ratio:.95; object-position:center 23%; }
 .about-bio p { font-size:14px; }
 .about-stats { gap:8px; margin-top:36px; }
 .about-stats span { font-size:8px; }
 .rnd-section { padding:58px 18px 62px; }
 .rnd-heading { margin-bottom:23px; }
 .rnd-heading h2 { font-size:clamp(23px,7vw,32px); }
 .rnd-heading p { font-size:7px; }
 .rnd-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; }
 .rnd-card { border-radius:12px; }
 .rnd-card-wide { aspect-ratio:1.55; }
 .rnd-card>span { left:10px; bottom:10px; font-size:9px; }
}
@media(prefers-reduced-motion:reduce) { .logo-track { animation:none; } }