.visual-lab {
  --lab-bg: #191817;
  --lab-ink: #f5eee3;
  --lab-muted: #cfc2b3;
  --lab-accent: #e7d0a1;
  --lab-rule: #e3cda648;
  --lab-panel: #24211e;
  --lab-button-ink: #1d100c;
  background: var(--lab-bg);
  color: var(--lab-ink);
  padding-block: clamp(50px,7vw,112px);
}
.visual-lab :focus-visible { outline: 2px solid var(--lab-accent); outline-offset: 4px; }
.lab-mono {
  color: var(--lab-accent);
  font: 700 11px/1.4 var(--sans);
  letter-spacing: .13em;
}
.lab-head {
  display: grid;
  grid-template-columns: 1.45fr minmax(0,1fr);
  align-items: end;
  gap: 18px 40px;
  margin-bottom: clamp(21px,3.7vw,51px);
}
.lab-head h2 {
  margin-top: 8px;
  font: 400 clamp(38px,7.2vw,103px)/.98 var(--serif);
  letter-spacing: -.056em;
}
.lab-head>p { color: var(--lab-muted); max-width: 38ch; font-size: clamp(14px,1.4vw,19px); }
.lab-tabs {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  border-block: 1px solid var(--lab-rule);
  margin-bottom: clamp(12px,2vw,26px);
}
.lab-tabs button {
  background: transparent;
  color: var(--lab-ink);
  border: 0;
  border-bottom: 2px solid transparent;
  min-height: 54px;
  padding: 9px clamp(6px,1.5vw,17px);
  text-align: left;
  font: 650 clamp(12px,1.3vw,17px)/1.15 var(--sans);
  transition: border-color .22s ease;
}
.lab-tabs button+button { border-left: 1px solid var(--lab-rule); }
.lab-tabs button span { color: var(--lab-accent); margin-right: .5em; font: 700 9px var(--mono); }
.lab-tabs button[aria-selected="true"],.lab-tabs button:hover { border-bottom-color: var(--lab-accent); background: var(--lab-panel); }
.lab-panel {
  display: grid;
  grid-template-columns: minmax(0,1.9fr) minmax(0,1fr);
  gap: 1px;
  background: var(--lab-rule);
  border: 1px solid var(--lab-rule);
  scroll-margin-top: 112px;
}
.lab-panel:not([hidden])+.lab-panel:not([hidden]) { margin-top: 16px; }
.lab-panel[data-world="otomotiv"] { --lab-cut-start: inset(0); --lab-cut-end: inset(0 0 0 100%); }
.lab-panel[data-world="mimari"] { --lab-cut-start: inset(0); --lab-cut-end: inset(50% 0); }
.lab-panel[data-world="urun"] { --lab-cut-start: circle(76%); --lab-cut-end: circle(0%); }
.lab-panel.is-entering .lab-picture::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(0deg,#0c0b0bc0,transparent 58%),var(--lab-previous-frame) center/cover no-repeat;
  animation: lab-match-cut .36s cubic-bezier(.57,.06,.27,1) both;
}
.lab-panel.is-entering .lab-picture>img { animation: lab-next-frame .72s ease-out both; }
@keyframes lab-match-cut {
  from { clip-path: var(--lab-cut-start); opacity: 1; }
  82% { opacity: 1; }
  to { clip-path: var(--lab-cut-end); opacity: 0; }
}
@keyframes lab-next-frame {
  from { transform: scale(1.035); filter: brightness(.83); }
  to { transform: none; filter: brightness(1); }
}
.lab-picture,.lab-reel-image {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  align-content: space-between;
  min-height: 310px;
  aspect-ratio: 1.67;
  background: #171717;
  color: #fbf4e9;
}
.lab-picture>img,.lab-reel-image>img {
  position: absolute;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  inset: 0;
}
.lab-picture::before,.lab-reel-image::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background: linear-gradient(0deg,#090a0be8,transparent 55%),linear-gradient(180deg,#090a0b9a,transparent 34%);
}
.lab-frame-meta,.lab-picture-foot { position: relative; z-index: 2; display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: clamp(12px,2vw,24px); }
.lab-frame-meta { font: 650 9px/1.2 var(--mono); letter-spacing: .1em; }
.lab-frame-meta span:first-child { background: #161515d9; border: 1px solid #fff5df4f; padding: 6px 8px; }
.lab-picture-foot { align-items: end; }
.lab-picture-foot p { font: 400 clamp(34px,5.4vw,78px)/.9 var(--serif); letter-spacing: -.065em; }
.lab-play,.lab-brief,.lab-reel-play {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font: 700 clamp(11px,1vw,14px)/1.15 var(--sans);
  transition: background-color .2s ease, color .2s ease;
}
.lab-play {
  padding: 8px 11px;
  color: #211912;
  background: #f7ecdc;
  border: 1px solid #f7ecdc;
  white-space: nowrap;
}
.lab-play:hover,.lab-reel-play:hover { color: #fffaf0; background: #201e1b; }
.lab-details {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: start;
  gap: 12px;
  min-width: 0;
  padding: clamp(18px,3vw,46px);
  background: var(--lab-panel);
}
.lab-details h3 { font: 400 clamp(28px,3.35vw,48px)/1.04 var(--serif); letter-spacing: -.043em; }
.lab-details>p:not(.lab-mono) { color: var(--lab-muted); font-size: clamp(14px,1.15vw,16px); line-height: 1.55; }
.lab-tags { display: flex; flex-wrap: wrap; gap: 5px; list-style: none; margin: 0; padding: 0; }
.lab-tags li { border: 1px solid var(--lab-rule); padding: 5px 7px; font-size: 11px; }
.lab-detail-frame { display: inline-flex; align-items: center; gap: 9px; padding: 3px 8px 3px 3px; border: 1px solid var(--lab-rule); font-size: 12px; font-weight: 650; min-height: 44px; }
.lab-detail-frame:hover { border-color: var(--lab-accent); }
.lab-detail-frame img { width: 62px; height: 35px; object-fit: cover; }
.lab-brief { justify-content: space-between; margin-top: 6px; padding: 8px 11px; background: var(--lab-accent); color: var(--lab-button-ink); border: 1px solid var(--lab-accent); }
.lab-brief:hover { background: transparent; color: var(--lab-ink); }
.lab-method { display: grid; grid-template-columns: minmax(140px,.4fr) 1fr; gap: 10px; border-bottom: 1px solid var(--lab-rule); padding: 16px 0; }
.lab-method p:last-child { color: var(--lab-muted); font-size: 13px; max-width: 78ch; }
.lab-reels { padding-top: clamp(27px,4vw,63px); }
.lab-reels>header { display: flex; justify-content: space-between; align-items: end; flex-wrap: wrap; gap: 9px 14px; margin-bottom: 14px; }
.lab-reels h3 { font: 400 clamp(29px,4vw,56px)/1 var(--serif); letter-spacing: -.06em; }
.lab-reels a { color: var(--lab-ink); text-underline-offset: 4px; font-size: 12px; }
.lab-reels a:hover { text-decoration: underline; }
.lab-reel-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: clamp(8px,1.4vw,20px); }
.lab-reel { min-width: 0; }
.lab-reel-image { width: 100%; min-height: 148px; align-content: end; border: 1px solid var(--lab-rule); }
.lab-reel-play { color: #fff7ea; background: #171510cb; border: 0; text-align: left; padding: 9px; }
.lab-reel-play small { margin-left: auto; padding-left: 5px; font: 650 9px var(--mono); }
.lab-reel>a { display: inline-flex; gap: 8px; align-items: center; min-height: 42px; }
@media(max-width:800px) {
  .lab-panel { grid-template-columns: 1fr; }
  .lab-picture { min-height: 0; }
}
@media(max-width:600px) {
  .lab-head,.lab-method { grid-template-columns: 1fr; }
  .lab-reel-grid { grid-template-columns: 1fr; }
  .lab-reel-image { min-height: 0; aspect-ratio: 2; }
  .lab-tabs button span { display: block; margin-bottom: 3px; }
  .lab-panel { scroll-margin-top: 108px; }
}
@media(prefers-reduced-motion:reduce) {
  .lab-tabs button,.lab-play,.lab-brief,.lab-reel-play { transition: none; }
  .lab-panel.is-entering .lab-picture::after { display: none; }
  .lab-panel.is-entering .lab-picture>img { animation: none; }
}

.visual-lab {
  position: relative;
  isolation: isolate;
  --lab-veil-left: #191817;
  --lab-veil-mid: #191817d9;
  --lab-veil-edge: #19181779;
}
.lab-atmosphere {
  position: absolute;
  z-index: -1;
  inset: 0 0 auto;
  height: clamp(410px,59vw,900px);
  overflow: hidden;
  pointer-events: none;
}
.lab-atmosphere>div {
  position: absolute;
  inset: 0 0 0 23%;
  background-size: cover;
  background-position: center;
  opacity: .64;
  visibility: hidden;
}
.lab-atmosphere>div[data-world="otomotiv"],
.lab-tabs button[data-world="otomotiv"] { --lab-texture: url("media/lab/otomotiv-detay.jpg"); }
.lab-atmosphere>div[data-world="mimari"],
.lab-tabs button[data-world="mimari"] { --lab-texture: url("media/frames/hotel-architecture.jpg"); }
.lab-atmosphere>div[data-world="urun"],
.lab-tabs button[data-world="urun"] { --lab-texture: url("media/lab/urun-detay.jpg"); }
.lab-atmosphere>div[data-world="mimari"] { background-position: center 44%; filter: saturate(.65) sepia(.24); }
.visual-lab[data-world="otomotiv"] .lab-atmosphere>[data-world="otomotiv"],
.visual-lab[data-world="mimari"] .lab-atmosphere>[data-world="mimari"],
.visual-lab[data-world="urun"] .lab-atmosphere>[data-world="urun"] {
  background-image: var(--lab-texture);
  visibility: visible;
  animation: lab-atmosphere-reveal .55s ease-out both;
}
.lab-atmosphere::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(0deg,var(--lab-bg),transparent 63%),
    linear-gradient(90deg,var(--lab-veil-left) 23%,var(--lab-veil-mid) 58%,var(--lab-veil-edge) 100%);
}
@keyframes lab-atmosphere-reveal {
  from { opacity: .2; transform: scale(1.04); }
  to { opacity: .64; transform: scale(1); }
}
.lab-head>p {
  padding: 11px 13px;
  background: color-mix(in srgb,var(--lab-bg) 87%,transparent);
  border-left: 1px solid var(--lab-rule);
}
.lab-tabs {
  background: color-mix(in srgb,var(--lab-bg) 84%,transparent);
}
.lab-tabs button {
  position: relative;
  padding-right: clamp(46px,8vw,110px);
}
.lab-tabs button::after {
  content: "";
  position: absolute;
  inset: 7px 8px 7px auto;
  width: clamp(32px,6vw,80px);
  background: var(--lab-texture) center/cover;
  border: 1px solid var(--lab-rule);
  opacity: .65;
}
.lab-tabs button[aria-selected="true"]::after,.lab-tabs button:hover::after { opacity: 1; }
@media(max-width:600px) {
  .lab-atmosphere>div { left: 0; }
  .lab-atmosphere::after {
    background: linear-gradient(0deg,var(--lab-bg),transparent 72%),
                linear-gradient(90deg,var(--lab-veil-mid),var(--lab-veil-edge));
  }
  .lab-tabs button { padding-right: 6px; }
  .lab-tabs button::after { top: 5px; bottom: auto; right: 5px; height: 15px; width: 28px; }
}
@media(prefers-reduced-motion:reduce) {
  .lab-atmosphere>div { animation: none !important; }
}

.lab-panel[data-world="mimari"] .lab-picture>img:first-child { width: 70%; object-position: 60% center; }
.lab-panel[data-world="mimari"] .lab-picture>.lab-architecture-inset {
  inset: 0 0 0 auto;
  width: 30%;
  object-position: 45% center;
  border-left: 1px solid #f2e0ba64;
}
.lab-panel[data-world="mimari"] .lab-picture { aspect-ratio: 1.52; }
.lab-panel[data-world="urun"] .lab-picture {
  aspect-ratio: 1.66;
  border: 8px solid #131313;
  outline: 1px solid var(--lab-rule);
  outline-offset: -9px;
}
.lab-panel[data-world="urun"] .lab-picture>img { object-position: 53% center; }
.lab-panel[data-world="urun"] .lab-frame-meta { border-top: 1px solid var(--lab-rule); }
@media(max-width:600px) {
  .lab-panel[data-world="urun"] .lab-picture { border-width: 5px; outline-offset: -6px; }
}

@media(min-width:801px) {
  .lab-panel[data-world] .lab-picture { aspect-ratio: auto; min-height: clamp(320px,36vw,540px); }
  .lab-panel[data-world="mimari"] { grid-template-columns: minmax(0,1.68fr) minmax(0,1fr); }
}

/* The cut uses a pair of detail frames between the outgoing and incoming posters. */
.lab-cut-bridge { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.lab-panel.is-entering .lab-cut-bridge::before,
.lab-panel.is-entering .lab-cut-bridge::after {
  content: "";
  position: absolute;
  inset: 0;
  background-size: cover;
  background-repeat: no-repeat;
  opacity: 0;
}
.lab-panel.is-entering .lab-cut-bridge::before {
  background-image: linear-gradient(0deg,#100e0e70,transparent 63%),var(--lab-from-detail);
  background-position: center,var(--lab-from-position);
  animation: lab-detail-out .74s ease-out both;
}
.lab-panel.is-entering .lab-cut-bridge::after {
  background-image: linear-gradient(0deg,#100e0e70,transparent 63%),var(--lab-to-detail);
  background-position: center,var(--lab-to-position);
  animation: lab-detail-in .74s ease-out both;
}
@keyframes lab-detail-out {
  0%,12% { opacity: 0; transform: scale(1); }
  30%,43% { opacity: 1; }
  59%,100% { opacity: 0; transform: scale(1.05); }
}
@keyframes lab-detail-in {
  0%,35% { opacity: 0; clip-path: var(--lab-cut-end); }
  52%,62% { opacity: 1; clip-path: var(--lab-cut-start); }
  100% { opacity: 0; clip-path: var(--lab-cut-start); }
}

.lab-case {
  grid-column: 1/-1;
  display: grid;
  grid-template-columns: clamp(100px,17vw,205px) minmax(0,1fr) auto;
  align-items: center;
  gap: 14px;
  padding: clamp(10px,1.8vw,21px);
  background: #181612;
}
.lab-case>img {
  width: 100%;
  height: 100%;
  min-height: 77px;
  aspect-ratio: 1.78;
  object-fit: cover;
  border: 1px solid var(--lab-rule);
}
.lab-case h4 {
  margin-block: 3px;
  font: 650 clamp(15px,1.65vw,23px)/1.16 var(--sans);
  letter-spacing: -.025em;
}
.lab-case p:last-child { color: var(--lab-muted); font-size: 13px; line-height: 1.5; max-width: 62ch; }
.lab-case-play {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 10px;
  min-height: 44px;
  background: transparent;
  color: var(--lab-ink);
  border: 1px solid var(--lab-rule);
  white-space: nowrap;
  font: 650 13px/1.1 var(--sans);
}
.lab-case-play:hover { border-color: var(--lab-accent); }
.lab-case-play small { font: 650 10px var(--mono); color: var(--lab-accent); }

.lab-set-film {
  display: grid;
  grid-template-columns: minmax(0,.65fr) minmax(0,1.35fr);
  align-items: center;
  gap: clamp(15px,3vw,40px);
  margin-top: clamp(28px,5vw,63px);
  padding-top: clamp(18px,3vw,35px);
  border-top: 1px solid var(--lab-rule);
  scroll-margin-top: 60px;
}
.lab-set-film h3 { font: 400 clamp(29px,4vw,56px)/1 var(--serif); letter-spacing: -.05em; margin-block: 4px 8px; }
.lab-set-film header>p:last-child { color: var(--lab-muted); font-size: 14px; max-width: 34ch; }
.lab-set-pair { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 7px; }
.lab-set-card { position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: end; min-height: clamp(156px,23vw,260px); padding: 10px; border: 1px solid var(--lab-rule); background: #131211; color: var(--lab-ink); text-align: left; }
.lab-set-card:hover { border-color: var(--lab-accent); }
.lab-set-card>img { position: absolute; z-index: -2; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 41%; }
.lab-set-card::after { content: ""; position: absolute; z-index: -1; inset: 0; background: linear-gradient(0deg,#0b0a08f2,transparent 80%); }
.lab-set-card>span { width: 100%; display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: end; gap: 3px 8px; }
.lab-set-card small { grid-column: 1/-1; color: var(--lab-accent); font: 650 9px/1.2 var(--mono); }
.lab-set-card strong { font: 650 clamp(15px,1.9vw,25px)/1.12 var(--sans); }
@media(max-width:650px) {
  .lab-case { grid-template-columns: minmax(70px,28%) minmax(0,1fr); gap: 9px; }
  .lab-case-play { grid-column: 1/-1; justify-self: start; }
  .lab-set-film { grid-template-columns: 1fr; }
}
@media(prefers-reduced-motion:reduce) { .lab-cut-bridge { display: none; } }