/* =========================================================
   İşlerimiz (/projeler) — trionn.com/work layout
   ========================================================= */
.page-work .ch, .page-work .wd { display: inline-block; }
.page-work .wd { white-space: nowrap; }
.wk { position: relative; z-index: 3; background: var(--bg); color: var(--fg); overflow-x: clip; }

/* ---------- hero ---------- */
.wk-hero { position: relative; height: 260vh; }
.wk-hero__pin { position: sticky; top: 0; height: 100vh; height: 100svh; min-height: 600px; display: flex; align-items: center; justify-content: center; text-align: center; overflow: hidden; }
.wk-hero__thumbs { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.wk-thumb { position: absolute; left: 50%; top: 50%; width: clamp(90px, 11vw, 172px); border-radius: 3px; overflow: hidden; opacity: 0; will-change: transform, opacity; box-shadow: 0 20px 50px rgba(0,0,0,.5); }
.wk-thumb img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.wk-hero__center { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; }
.wk-mark { position: relative; width: clamp(120px, 13vw, 190px); aspect-ratio: 1; margin-bottom: clamp(10px, 2vh, 24px); filter: drop-shadow(0 0 30px rgba(194,21,28,.35)); }
.wk-mark svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.wk-mark__ghost { color: rgba(216,216,216,.1); }
.wk-mark__fill { color: var(--fg); clip-path: inset(100% 0 0 0); }
.wk-hero__title { font-size: var(--h1); line-height: .95; letter-spacing: -0.065em; margin-bottom: 22px; }
.wk-hero__sub { opacity: .8; }
.wk-hero__down { position: absolute; left: 50%; bottom: 44px; width: 20px; height: 20px; transform: translateX(-50%); opacity: .5; z-index: 2; }
.wk-hero__down svg { width: 100%; height: 100%; }

/* ---------- grid ---------- */
.wk-grid { position: relative; padding: clamp(40px, 8vh, 80px) clamp(20px, 5.3vw, 76px) clamp(80px, 14vh, 150px); display: flex; flex-direction: column; gap: clamp(70px, 12vh, 140px); }
.wk-lines { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; z-index: 0; }
.wk-lines path { fill: none; stroke: rgba(216,216,216,.28); stroke-width: 1; }
.wk-lines circle { fill: #fff; filter: drop-shadow(0 0 6px rgba(194,21,28,.9)); }
.wk-card { position: relative; z-index: 1; }
.wk-card--left { align-self: flex-start; }
.wk-card--right { align-self: flex-end; }
.wk-card--center { align-self: center; }
.wk-card--s { width: min(22vw, 330px); }
.wk-card--m { width: min(27vw, 400px); }
.wk-card--l { width: min(32vw, 470px); }
.wk-card--xl { width: min(38vw, 560px); }
.wk-card__media { position: relative; display: block; border-radius: 4px; overflow: hidden; background: #0d0e12; }
.wk-card__media img { width: 100%; height: auto; aspect-ratio: 16 / 11; object-fit: cover; display: block; transform: scale(1.06); transition: transform 1.1s var(--ease); will-change: transform; }
.wk-card__media:hover img { transform: scale(1); }
.wk-card__cat { position: absolute; left: 14px; top: 14px; padding: 6px 10px; border-radius: 100px; background: rgba(4,5,8,.65); backdrop-filter: blur(6px); font-family: var(--f-display); font-size: 11px; text-transform: uppercase; color: #fff; opacity: 0; transform: translateY(-6px); transition: opacity .4s, transform .4s var(--ease); }
.wk-card__media:hover .wk-card__cat { opacity: 1; transform: none; }
.wk-card__foot { padding-top: 22px; }
.wk-card__title { font-size: clamp(1.4rem, 1.9vw, 1.8rem); letter-spacing: -0.045em; line-height: 1.05; margin-bottom: 10px; }
.wk-card__meta { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; }
.wk-card__meta p { opacity: .6; max-width: 300px; }
.wk-card__meta .mono-link { width: 180px; flex: none; color: var(--fg); }

/* ---------- end ---------- */
.wk-end { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 22px; padding: clamp(60px, 10vh, 120px) var(--pad) clamp(110px, 18vh, 190px); }
.wk-end__title { font-size: var(--h1); line-height: .95; letter-spacing: -0.065em; }
.wk-end p { opacity: .7; }
.wk-end .mono-link { width: 200px; color: var(--fg); margin-top: 12px; }

@media (max-width: 900px) {
  .wk-card--s, .wk-card--m { width: 56vw; }
  .wk-card--l, .wk-card--xl { width: 68vw; }
  .wk-card__meta { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 560px) {
  .wk-grid { gap: 80px; }
  .wk-card--s, .wk-card--m, .wk-card--l, .wk-card--xl { width: 100%; align-self: stretch; }
  .wk-card__meta .mono-link { width: 100%; }
  .wk-lines { display: none; }
  .wk-hero__sub br { display: none; }
}