/* One continuous gallery; each project's artwork supplies its own colour. */
[data-portfolio="connected"] .portfolio-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:30px;margin-bottom:28px}
[data-portfolio="connected"] #works-title{font-size:clamp(54px,7.2vw,108px);line-height:.94;letter-spacing:-.065em;max-width:820px}
[data-portfolio="connected"] .portfolio-intro{font-size:clamp(15px,1.45vw,20px);line-height:1.45;margin:0 0 6px;color:var(--muted);flex-shrink:0}
[data-portfolio="connected"] .portfolio-filters{display:flex;gap:clamp(18px,3vw,40px);margin-bottom:18px}
[data-portfolio="connected"] .portfolio-filters[hidden]{display:none}
[data-portfolio="connected"] .portfolio-filters button{appearance:none;position:relative;min-height:44px;padding:8px 0;border:0;background:none;border-radius:0;font:inherit;font-size:13px;line-height:1.3;color:var(--muted);cursor:pointer}
[data-portfolio="connected"] .portfolio-filters button::after{content:"";position:absolute;bottom:1px;left:0;right:0;height:2px;background:var(--orange);transform:scaleX(0);transform-origin:left;transition:transform 180ms}
[data-portfolio="connected"] .portfolio-filters button[aria-pressed="true"]{color:var(--ink)}
[data-portfolio="connected"] .portfolio-filters button[aria-pressed="true"]::after{transform:scaleX(1)}
[data-portfolio="connected"] .portfolio-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));grid-template-rows:repeat(4,clamp(235px,23vw,335px)) clamp(300px,34vw,470px);grid-auto-rows:clamp(235px,23vw,335px);gap:10px;width:calc(100% - 48px);max-width:1392px;margin:0 auto}
[data-portfolio="connected"] .portfolio-tile{position:relative;min-width:0;min-height:0;margin:0;overflow:hidden;border-radius:14px;background:#ded8cf;isolation:isolate}
[data-portfolio="connected"] .portfolio-tile[hidden]{display:none}
[data-portfolio="connected"] .portfolio-tile>a{display:block;position:relative;width:100%;height:100%;color:#fff;text-decoration:none}
[data-portfolio="connected"] .portfolio-photo{display:block;width:100%;height:100%;object-fit:cover;transition:transform 550ms cubic-bezier(.2,.65,.3,1)}
[data-portfolio="connected"] .portfolio-caption{position:absolute;inset:auto 0 0;z-index:2;padding:58px 24px 22px;background:linear-gradient(transparent,rgba(0,0,0,.64));pointer-events:none;color:#fff}
[data-portfolio="connected"] .portfolio-caption h3{font-size:clamp(19px,1.8vw,27px);font-weight:600;line-height:1.15;letter-spacing:-.035em;margin:0 0 5px}
[data-portfolio="connected"] .portfolio-caption p{font-size:clamp(12px,1.1vw,16px);line-height:1.35;margin:0}
[data-portfolio="connected"] .portfolio-mardo{grid-column:span 6;grid-row:span 2;background:#1595ce}
[data-portfolio="connected"] .portfolio-mardo .portfolio-photo{object-position:center 60%}
[data-portfolio="connected"] .portfolio-halken,[data-portfolio="connected"] .portfolio-ali{grid-column:span 6}
[data-portfolio="connected"] .portfolio-ali .portfolio-photo{object-position:center 52%}
[data-portfolio="connected"] .portfolio-espresso{grid-column:span 4;background:#47a7df}
[data-portfolio="connected"] .portfolio-espresso .portfolio-photo{object-position:center 42%}
[data-portfolio="connected"] .portfolio-ozmerhan{grid-column:span 8;background:radial-gradient(ellipse at 18% 0%,#eee5d6,transparent 70%),#c7b6a1}
[data-portfolio="connected"] .portfolio-billboard{grid-column:span 7}
[data-portfolio="connected"] .portfolio-dental{grid-column:span 5;background:radial-gradient(ellipse at 80% 5%,#e9f0e9,transparent 70%),#b0d0c8}
[data-portfolio="connected"] .portfolio-derya{grid-column:1/-1;background:linear-gradient(125deg,#e3ded4,#b8b3a9)}
[data-portfolio="connected"] .portfolio-play{position:absolute;right:24px;top:24px;width:54px;height:54px;border-radius:50%;display:grid;place-items:center;color:#1d1d1f;background:#fffaf1;transition:transform 180ms}
[data-portfolio="connected"] .portfolio-screen{position:absolute;top:12%;left:9%;width:85%;border:6px solid #242628;border-radius:12px;overflow:hidden;transform:perspective(1100px) rotateY(-7deg) rotateZ(-3deg);box-shadow:0 20px 32px #24211d26;background:#171b1d}
[data-portfolio="connected"] .portfolio-screen>img{display:block;width:100%;height:auto;aspect-ratio:1.8;object-fit:cover;object-position:top}
[data-portfolio="connected"] .portfolio-chrome{display:flex;align-items:center;gap:4px;height:24px;padding:0 9px;background:#eeeae6;color:#55534f;font-size:9px;line-height:1;white-space:nowrap}
[data-portfolio="connected"] .portfolio-chrome i{width:4px;height:4px;border-radius:50%;background:#a4a19c;flex-shrink:0}
[data-portfolio="connected"] .portfolio-chrome span{margin:0 auto;padding-right:20px}
[data-portfolio="connected"] .portfolio-device .portfolio-caption{color:#232421;background:linear-gradient(transparent,rgba(242,237,227,.97))}
[data-portfolio="connected"] .portfolio-dental .portfolio-screen{width:89%;left:7%;top:15%;transform:perspective(900px) rotateY(5deg) rotateZ(3deg)}
[data-portfolio="connected"] .portfolio-dental .portfolio-caption{background:linear-gradient(transparent,rgba(218,234,226,.97))}
[data-portfolio="connected"] .portfolio-banner-screen{position:absolute;width:79%;left:17%;top:3%;padding:6px;border-radius:12px;border:6px solid #333433;background:#f2f0eb;transform:perspective(1600px) rotateY(-3deg) rotateZ(-3deg);box-shadow:0 20px 32px #24211d26}
[data-portfolio="connected"] .portfolio-banner-frames{display:grid;gap:7px;padding:10px}
[data-portfolio="connected"] .portfolio-banner-frames img{display:block;width:100%;height:auto}
[data-portfolio="connected"] .portfolio-more{text-align:center;padding:32px 24px 10px}
[data-portfolio="connected"] .portfolio-more a{display:inline-block;padding:12px 0 10px;border-bottom:2px solid var(--orange);color:var(--ink);font-size:14px;text-decoration:none}
[data-portfolio="connected"] button:focus-visible,[data-portfolio="connected"] a:focus-visible{outline:3px solid #1d1d1f;outline-offset:5px}
[data-portfolio="connected"] .portfolio-tile:focus-within{outline:3px solid var(--orange);outline-offset:3px}
[data-portfolio="connected"] .portfolio-grid:not([data-active-filter="all"]){grid-template-rows:none;grid-auto-rows:clamp(300px,34vw,460px)}
[data-portfolio="connected"] .portfolio-grid:not([data-active-filter="all"]) .portfolio-tile{grid-column:span 6;grid-row:span 1}
[data-portfolio="connected"] .portfolio-grid[data-active-filter="film"] .portfolio-tile{grid-column:1/-1}
@media(hover:hover){
 [data-portfolio="connected"] .portfolio-tile a:hover .portfolio-photo{transform:scale(1.025)}
 [data-portfolio="connected"] .portfolio-tile a:hover .portfolio-play{transform:scale(1.08)}
 [data-portfolio="connected"] .portfolio-filters button:hover{color:var(--ink)}
}
@media(max-width:900px){
 [data-portfolio="connected"] .portfolio-grid{grid-template-rows:repeat(4,230px) 330px;grid-auto-rows:230px;gap:8px;width:calc(100% - 32px)}
 [data-portfolio="connected"] .portfolio-caption{padding:48px 18px 18px}
 [data-portfolio="connected"] .portfolio-caption h3{font-size:21px}
 [data-portfolio="connected"] .portfolio-espresso,[data-portfolio="connected"] .portfolio-ozmerhan,[data-portfolio="connected"] .portfolio-billboard,[data-portfolio="connected"] .portfolio-dental{grid-column:span 6}
 [data-portfolio="connected"] .portfolio-play{top:16px;right:16px;width:44px;height:44px}
 [data-portfolio="connected"] .portfolio-screen{left:7%;width:88%;top:16%}
 [data-portfolio="connected"] .portfolio-banner-screen{width:94%;left:4%;top:-2%}
}
@media(max-width:620px){
 [data-portfolio="connected"] .portfolio-heading{display:block;margin-bottom:20px}
 [data-portfolio="connected"] #works-title{font-size:clamp(42px,12vw,72px);max-width:none;line-height:.98}
 [data-portfolio="connected"] .portfolio-intro{margin-top:20px;font-size:15px}
 [data-portfolio="connected"] .portfolio-intro br{display:none}
 [data-portfolio="connected"] .portfolio-intro br::after{content:" "}
 [data-portfolio="connected"] .portfolio-filters{gap:12px;justify-content:space-between;margin-bottom:14px}
 [data-portfolio="connected"] .portfolio-filters button{font-size:11px}
 [data-portfolio="connected"] .portfolio-grid,[data-portfolio="connected"] .portfolio-grid:not([data-active-filter="all"]){display:flex;flex-direction:column;gap:8px;width:calc(100% - 24px)}
 [data-portfolio="connected"] .portfolio-tile{aspect-ratio:1.22;border-radius:12px}
 [data-portfolio="connected"] .portfolio-mardo{aspect-ratio:4/5}
 [data-portfolio="connected"] .portfolio-halken{aspect-ratio:1.5}
 [data-portfolio="connected"] .portfolio-espresso{aspect-ratio:1.05}
 [data-portfolio="connected"] .portfolio-device{aspect-ratio:1.13}
 [data-portfolio="connected"] .portfolio-derya{aspect-ratio:1.3}
 [data-portfolio="connected"] .portfolio-caption h3{font-size:22px}
 [data-portfolio="connected"] .portfolio-caption p{font-size:13px}
 [data-portfolio="connected"] .portfolio-screen,[data-portfolio="connected"] .portfolio-dental .portfolio-screen{top:13%;width:90%;left:6%;border-width:5px}
 [data-portfolio="connected"] .portfolio-screen>img{aspect-ratio:1.45}
 [data-portfolio="connected"] .portfolio-banner-screen{width:132%;left:3%;top:9%;transform:rotate(-5deg)}
 [data-portfolio="connected"] .portfolio-banner-frames{padding:7px;gap:6px}
 [data-portfolio="connected"] .portfolio-more{padding-top:24px}
}
@media(prefers-reduced-motion:reduce){[data-portfolio="connected"] *{transition:none!important}}
