/* İşler sayfası */

.works-main{max-width:1560px;margin:0 auto;padding:0 var(--pad) clamp(90px,12vh,140px)}

.works-hero{padding:clamp(130px,17vh,190px) 0 clamp(36px,5vh,56px)}
.works-hero h1{
  margin:0;font-family:var(--serif);font-weight:400;
  font-size:clamp(58px,9vw,138px);line-height:.9;letter-spacing:-.03em;
}
.works-hero h1 em{font-style:italic;color:var(--ink-dim)}
.works-hero .lede{margin-top:clamp(24px,4vh,36px);max-width:52ch}
.works-tools{
  display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;
  margin-top:clamp(34px,5vh,52px);padding-top:18px;border-top:1px solid var(--line);
  font:400 10px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:#6f685d;
}

.work-group{border-top:1px solid var(--line);padding:clamp(26px,4vh,42px) 0}
.group-head{display:flex;align-items:baseline;justify-content:space-between;gap:18px;margin-bottom:clamp(18px,3vh,28px)}
.group-head h2{
  margin:0;font-family:var(--serif);font-weight:400;
  font-size:clamp(30px,3.4vw,48px);line-height:1;letter-spacing:-.02em;
}
.group-head span{font:400 10px/1 var(--sans);letter-spacing:.18em;color:#6f685d}

.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(22px,2.4vw,34px)}
.card{display:block;text-decoration:none;color:inherit}
.card-media{
  position:relative;margin:0;aspect-ratio:16/9;overflow:hidden;
  background:#101010;border:1px solid var(--line-soft);
}
.card-media img{width:100%;height:100%;object-fit:cover;filter:saturate(.85) contrast(1.03) brightness(.9);opacity:.92;transition:transform .8s var(--ease),opacity .3s}
.card:hover .card-media img{transform:scale(1.045);opacity:1}
.card-play{position:absolute;inset:0;display:grid;place-items:center;color:var(--ink);opacity:0;transition:opacity .3s}
.card:hover .card-play{opacity:1}
.card-play svg{width:54px;height:54px;filter:drop-shadow(0 4px 20px rgba(0,0,0,.6))}
.card-meta{display:flex;justify-content:space-between;gap:12px;margin-top:11px;font:400 9.5px/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:#6f685d}
.card h3{
  margin:8px 0 0;font-family:var(--serif);font-weight:400;
  font-size:clamp(20px,1.9vw,26px);line-height:1.1;letter-spacing:-.01em;color:var(--ink);
  transition:color .2s;
}
.card:hover h3{color:#fff}
.card p{margin:5px 0 0;font:400 9.5px/1.4 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:#6f685d}

@media (max-width:900px){
  .cards{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:600px){
  .works-hero h1{font-size:clamp(46px,13vw,64px)}
  .cards{grid-template-columns:1fr}
}