/*
 * The engineering journey — one continuous, full-bleed stage.
 * Scene selection and interpolation belong to cinema.js. With no JavaScript,
 * the opening remains a complete, readable introduction with an ordinary link.
 */
:root {
  --ink: #101923;
  --paper: #f0eee7;
  --lime: #dcc28c;
  --olive: #6d7480;
  --quiet: #a8b5c3;
  --line: rgba(240, 238, 231, .19);
  --light-line: rgba(16, 25, 35, .19);
  --cinema-cream: #f2ead8;
  --cinema-gold: #e8c77c;
  --cinema-ink: #0a1421;
  --cinema-blue: #064878;
  --cinema-mono: "Courier New", Courier, monospace;
}
.site-header, header.header { background: #0a1421; border-bottom-color: rgba(242, 234, 216, .16); }
#navigation > a { color: #c0c6cc; }
.site-header .brand, .site-header .header-cv { color: var(--cinema-cream); }
.site-header .brand-symbol { color: var(--cinema-gold); }
.site-header .language-switch button { color: #b3bfca; }
.site-header .language-switch button[aria-pressed="true"] { color: var(--cinema-gold); }
.reading-progress { background: var(--cinema-gold); }

#cinema {
  --cinema-copy-left: 12.5%;
  position: relative;
  height: auto;
  background: var(--cinema-blue);
  color: var(--cinema-cream);
  isolation: isolate;
}
#cinema-stage {
  position: relative;
  top: auto;
  width: 100%;
  height: calc(100svh - var(--header));
  min-height: 650px;
  overflow: hidden;
  isolation: isolate;
  background: var(--cinema-blue);
}
#cinema.cinema-enabled { height: 650svh; }
#cinema.cinema-enabled #cinema-stage {
  position: sticky;
  top: var(--header);
  min-height: 600px;
}
#cinema-canvas, #cinema-fallback, #cinema-fallback img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
#cinema-canvas {
  z-index: 0;
  opacity: 0;
  pointer-events: none;
}
#cinema-fallback, #cinema-fallback img {
  z-index: -1;
  object-fit: cover;
  object-position: 58% center;
  pointer-events: none;
}
#cinema.cinema-enabled #cinema-canvas { opacity: 1; }
.cinema-shade {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(5, 19, 33, .58), rgba(5, 24, 41, .34) 32%, rgba(5, 24, 41, .08) 56%, transparent 73%),
    linear-gradient(0deg, rgba(5, 15, 28, .62), transparent 28%, transparent 83%, rgba(5, 20, 34, .22));
}
.cinema-grid {
  pointer-events: none;
  position: absolute;
  z-index: 2;
  top: 9.3%;
  bottom: 13%;
  left: 5%;
  right: 5%;
  border: 1px solid rgba(242, 234, 216, .12);
  border-top: 0;
  border-bottom-color: rgba(242, 234, 216, .21);
}
.cinema-grid::before, .cinema-grid::after {
  content: "+";
  position: absolute;
  bottom: -8px;
  left: -5px;
  color: rgba(242, 234, 216, .7);
  font: 15px/1 var(--cinema-mono);
}
.cinema-grid::after { left: auto; right: -5px; }
.cinema-topline {
  position: absolute;
  z-index: 4;
  top: 33px;
  left: var(--cinema-copy-left);
  right: 5%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  color: rgba(242, 234, 216, .77);
  font: 9px/1.6 var(--cinema-mono);
  letter-spacing: .1em;
  text-transform: uppercase;
}
.cinema-topline > span:last-child { text-align: right; }
.cinema-topline strong { font-weight: 400; color: var(--cinema-cream); }
.cinema-topline .cinema-location { color: rgba(242, 234, 216, .54); }
.cinema-topline > span:first-child { max-width: 400px; }
.cinema-topline #motion-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  gap: 8px;
  min-width: 100px;
  min-height: 44px;
  padding: 10px 13px;
  border: 1px solid rgba(242, 234, 216, .35);
  border-radius: 2px;
  background: rgba(5, 20, 33, .28);
  color: var(--cinema-cream);
  font: 8px/1.4 var(--cinema-mono);
  letter-spacing: .025em;
  text-transform: uppercase;
}
.cinema-topline #motion-toggle::before {
  content: "";
  width: 4px;
  height: 4px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--cinema-gold);
}
.cinema-topline #motion-toggle[aria-pressed="true"]::before { background: transparent; box-shadow: 0 0 0 1px currentColor; }
.cinema-topline #motion-toggle:hover { background: rgba(5, 20, 33, .65); border-color: var(--cinema-gold); color: var(--cinema-gold); }

#cinema-chapters {
  position: absolute;
  z-index: 6;
  top: 50%;
  left: 2.7%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  transform: translateY(-50%);
}
#cinema-chapters button {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 44px;
  min-height: 44px;
  padding: 10px 12px;
  background: transparent;
  color: rgba(242, 234, 216, .51);
  font: 9px/1.3 var(--cinema-mono);
  letter-spacing: .05em;
  text-align: left;
  transition: color .2s;
}
#cinema-chapters button::before {
  content: "";
  position: absolute;
  left: 0;
  top: calc(50% - 2px);
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0;
  transform: scale(.4);
  transition: opacity .2s, transform .2s;
}
#cinema-chapters button > span:last-child:not(:first-child) {
  position: absolute;
  left: 44px;
  max-width: 76px;
  font-size: 7px;
  line-height: 1.4;
  opacity: 0;
  transform: translateX(-4px);
  transition: transform .2s, opacity .2s;
  pointer-events: none;
}
#cinema-chapters button:hover, #cinema-chapters button:focus-visible,
#cinema-chapters button[aria-current="true"],
#cinema-chapters button[aria-pressed="true"],
#cinema-chapters button.is-active { color: var(--cinema-gold); }
#cinema-chapters button[aria-current="true"]::before,
#cinema-chapters button[aria-pressed="true"]::before,
#cinema-chapters button.is-active::before { opacity: 1; transform: scale(1); }
#cinema-chapters button:hover > span:last-child:not(:first-child),
#cinema-chapters button:focus-visible > span:last-child:not(:first-child) { opacity: 1; transform: none; }
#cinema:not(.cinema-enabled) #cinema-chapters { display: none; }

.cinema-copy {
  position: absolute;
  z-index: 3;
  left: var(--cinema-copy-left);
  top: 25%;
  display: none;
  width: 48%;
  max-width: 790px;
  padding: 0 0 32px;
  opacity: 0;
  pointer-events: none;
  text-shadow: 0 2px 24px rgba(2, 18, 34, .14);
  will-change: opacity, transform;
}
.cinema-copy[data-scene="0"] { display: block; opacity: 1; pointer-events: auto; }
#cinema.cinema-enabled .cinema-copy { display: block; }
.cinema-kicker {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 27px;
  font: 9px/1.6 var(--cinema-mono);
  text-transform: uppercase;
  letter-spacing: .17em;
  color: var(--cinema-gold);
}
.cinema-kicker::before { content: ""; width: 22px; height: 1px; background: currentColor; flex-shrink: 0; }
.cinema-copy h1, .cinema-copy h2 {
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(53px, 5.35vw, 92px);
  font-weight: 400;
  line-height: .99;
  letter-spacing: -.065em;
  color: var(--cinema-cream);
  text-wrap: balance;
}
.cinema-copy h1 em, .cinema-copy h2 em { font-style: italic; color: #f1dcb1; font-weight: 400; }
.cinema-copy h1 > span, .cinema-copy h2 > span { display: block; }
.cinema-description {
  margin-top: 28px;
  max-width: 370px;
  color: rgba(247, 241, 226, .85);
  font-size: 13px;
  line-height: 1.75;
  font-weight: 400;
  text-wrap: pretty;
}
.cinema-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  max-width: 415px;
  margin-top: 22px;
}
.cinema-tags > span {
  padding: 6px 9px;
  border: 1px solid rgba(242, 234, 216, .25);
  border-radius: 2px;
  color: rgba(242, 234, 216, .83);
  font: 8px/1.4 var(--cinema-mono);
  letter-spacing: .03em;
}
.cinema-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 16px 25px; margin-top: 30px; }
.cinema-actions .button, .cinema-actions button {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 46px;
  padding: 14px 17px;
  border: 1px solid rgba(242, 234, 216, .68);
  border-radius: 2px;
  background: var(--cinema-cream);
  color: var(--cinema-ink);
  font: 9px/1.5 var(--cinema-mono);
  font-weight: 400;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.cinema-actions .button:hover, .cinema-actions button:hover { background: var(--cinema-gold); border-color: var(--cinema-gold); }
.cinema-actions > a:not(.button) {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  min-height: 44px;
  color: var(--cinema-cream);
  font: 9px/1.6 var(--cinema-mono);
  text-underline-offset: 5px;
}
.cinema-actions > a:not(.button):hover { text-decoration: underline; }
.cinema-copy.copy-right { left: 58%; width: 36%; }
.cinema-copy.copy-bottom, .cinema-copy[data-scene="1"], .cinema-copy[data-scene="4"] { top: auto; bottom: 18%; }
.cinema-copy.copy-bottom h2, .cinema-copy[data-scene="1"] h2, .cinema-copy[data-scene="4"] h2 { font-size: clamp(48px, 4.5vw, 74px); }
.cinema-copy.copy-bottom .cinema-description, .cinema-copy[data-scene="1"] .cinema-description, .cinema-copy[data-scene="4"] .cinema-description { max-width: 380px; margin-top: 20px; }
#cinema .cinema-bottomline {
  position: absolute;
  z-index: 6;
  bottom: 29px;
  left: var(--cinema-copy-left);
  right: 5%;
  display: flex;
  align-items: center;
  gap: 28px;
  min-height: 44px;
  font: 8px/1.5 var(--cinema-mono);
  letter-spacing: .075em;
  color: rgba(242, 234, 216, .7);
}
#cinema-current-label { max-width: 220px; text-transform: uppercase; }
#cinema-count { margin-left: auto; white-space: nowrap; color: var(--cinema-cream); font-size: 10px; }
#cinema-progress { position: relative; display: block; width: 112px; height: 1px; background: rgba(242, 234, 216, .26); overflow: visible; }
#cinema-progress::before { content: ""; position: absolute; inset: 0; transform-origin: left; transform: scaleX(var(--cinema-progress, 0)); background: var(--cinema-gold); }
#cinema-progress > span { display: block; width: 100%; height: 1px; transform-origin: left; background: var(--cinema-gold); }
#cinema-skip {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 15px;
  min-height: 44px;
  margin-left: 12px;
  color: var(--cinema-cream);
  font: 8px/1.5 var(--cinema-mono);
  white-space: nowrap;
  text-transform: uppercase;
  text-underline-offset: 5px;
}
#cinema-skip:hover { text-decoration: underline; }
#cinema:not(.cinema-enabled) #cinema-progress { display: none; }
#cinema .cinema-status { position: absolute; z-index: 3; left: 12.5%; bottom: 115px; color: #f2ead8; font: 10px/1.5 var(--cinema-mono); }
html[lang="tr"] .cinema-copy h1, html[lang="tr"] .cinema-copy h2 { font-size: clamp(49px, 4.9vw, 82px); line-height: 1.04; letter-spacing: -.055em; }
html[lang="tr"] .cinema-copy.copy-bottom h2, html[lang="tr"] .cinema-copy[data-scene="1"] h2, html[lang="tr"] .cinema-copy[data-scene="4"] h2 { font-size: clamp(46px, 4.3vw, 72px); }

/* Carry the same metal, parchment and ink palette into the interactive craft. */
.manifesto .muted-text, .manifesto-heading .muted-text { color: #8b9399; }
.manifesto .lime-text, .manifesto-heading .lime-text { color: #697f8c; }
.manifesto-bottom > p, .principles > div > p, .principle p, .manifesto-footnote { color: #68727a; }
.principle-index { color: #71818c; }
.demo-console::before { background: radial-gradient(ellipse, #25415a 0%, transparent 65%); }
.demo-console::after, .demo-orbit { border-color: rgba(220, 194, 140, .15); }
.architecture { background: #d7d4c7; }
.architecture-layer { border-color: #788793; background: #e8e9e4; box-shadow: 5px 12px 0 -3px #8e9aa1, 5px 13px 0 -3px #4f606d, 16px 34px 32px rgba(13, 33, 47, .15); }
.architecture-layer[data-depth="0"] { background: #142c40; border-color: #61819a; color: #edf0e9; box-shadow: 5px 12px 0 -3px #56758a, 5px 13px 0 -3px #21384a, 16px 34px 32px rgba(13, 33, 47, .15); }
.architecture-layer[data-depth="1"] { background: #f0eee7; color: #344957; }
.architecture-layer[data-depth="2"] { background: #bac8c9; color: #263f52; }
.architecture-layer[data-depth="3"] { background: #668ba5; color: #102f44; }
.layer-controls button, .layer-explanation p, .architecture-footnote { color: #526775; }
.layer-explanation code { color: #254b67; }
.work-main .work-description, .work-secondary p, .work-meta { color: #687780; }
.work-tagline, .work-main > .work-tagline { color: #5e727f; }
.work-main summary, .work-main .work-description .tagline, .work-secondary .tagline { color: #526b7a; }
.ai-topic .tagline, .ai-topic p, .agent-details > p, .simulation-note { color: #a6b8c5; }
.toolkit .section-heading h2 em, .career-intro h2 em { color: #6b8291; }
.toolkit .section-heading > p, .career-intro > p, .education p, .education > .mono { color: #637987; }
.education { border-color: #c2cccd; }
.skill-filters #skill-count, .skill-tools, .skill-tools > span, .career-date { color: #607a89; }
.skill-row p { color: #687b86; }
.contact-bottom > p { color: #b1c0cd; }
.contact-links > a > span:last-child { color: #9eb2c1; }
.footer { border-top-color: #3a4d5d; }
.footer-inner > span > small { color: #95a6b4; }
#motion-toggle { color: #b2c3cf; border-color: #4b6173; }
#motion-toggle:hover, #motion-toggle[aria-pressed="true"] { color: var(--cinema-gold); border-color: var(--cinema-gold); }
.noscript-note { background: #223b50; color: #dae3e8; }
.manifesto :focus-visible, .architecture :focus-visible, .work :focus-visible, .toolkit :focus-visible, .career :focus-visible { outline-color: #15557f; }

@media (min-width: 1700px) {
  .cinema-copy { max-width: 860px; }
  .cinema-copy h1, .cinema-copy h2 { font-size: 102px; }
  .cinema-description { font-size: 15px; max-width: 430px; }
  .cinema-kicker { font-size: 10px; }
}
@media (max-width: 1100px) {
  #cinema { --cinema-copy-left: 12%; }
  .cinema-copy { width: 53%; top: 24%; }
  .cinema-copy h1, .cinema-copy h2 { font-size: clamp(54px, 6.35vw, 76px); }
  .cinema-topline { font-size: 8px; }
  .cinema-description { max-width: 340px; font-size: 12px; }
  #cinema-chapters { left: 2.2%; }
  #cinema-chapters button > span:last-child:not(:first-child) { display: none; }
  #cinema .cinema-bottomline { gap: 20px; }
  #cinema-current-label { max-width: 180px; }
  #cinema-progress { width: 75px; }
}
@media (max-width: 760px) {
  #cinema { --cinema-copy-left: 7%; }
  #cinema-stage, #cinema.cinema-enabled #cinema-stage { min-height: 640px; height: calc(100svh - var(--header)); }
  #cinema.cinema-enabled { height: 650svh; }
  #cinema-fallback, #cinema-fallback img { object-position: 66% center; }
  .cinema-shade {
    background:
      linear-gradient(90deg, rgba(5, 20, 33, .56), rgba(5, 20, 33, .18) 65%, rgba(5, 20, 33, .07)),
      linear-gradient(0deg, rgba(5, 16, 30, .76), rgba(5, 20, 33, .20) 36%, rgba(5, 20, 33, .16) 74%, rgba(5, 20, 33, .25));
  }
  .cinema-grid { left: 5%; right: 5%; top: 7%; bottom: 21%; border-color: rgba(242, 234, 216, .1); }
  .cinema-topline { top: 25px; left: 7%; right: 7%; font-size: 7px; letter-spacing: .06em; gap: 20px; }
  .cinema-topline > span:last-child { max-width: 115px; }
  .cinema-topline > span:first-child { max-width: 240px; }
  .cinema-topline #motion-toggle { min-width: 89px; padding: 10px; font-size: 7px; gap: 6px; }
  .cinema-copy, .cinema-copy.copy-right { left: 7%; top: 19%; width: 86%; max-width: 470px; padding-bottom: 0; }
  .cinema-copy h1, .cinema-copy h2 { font-size: clamp(46px, 9.5vw, 68px); max-width: 470px; line-height: 1.015; letter-spacing: -.064em; }
  .cinema-kicker { margin-bottom: 20px; font-size: 8px; letter-spacing: .11em; }
  .cinema-description { font-size: 12px; line-height: 1.65; max-width: 295px; margin-top: 22px; }
  .cinema-tags { max-width: 320px; gap: 5px; margin-top: 19px; }
  .cinema-tags > span { font-size: 7px; padding: 5px 7px; }
  .cinema-actions { margin-top: 24px; gap: 10px 20px; }
  .cinema-actions .button, .cinema-actions button { font-size: 8px; min-height: 44px; padding: 13px 13px; gap: 18px; }
  .cinema-actions > a:not(.button) { font-size: 8px; min-height: 44px; }
  .cinema-copy.copy-bottom, .cinema-copy[data-scene="1"], .cinema-copy[data-scene="4"] { top: auto; bottom: 26%; }
  .cinema-copy.copy-bottom h2, .cinema-copy[data-scene="1"] h2, .cinema-copy[data-scene="4"] h2 { font-size: clamp(43px, 9vw, 63px); }
  .cinema-copy.copy-bottom .cinema-description, .cinema-copy[data-scene="1"] .cinema-description, .cinema-copy[data-scene="4"] .cinema-description { max-width: 305px; }
  #cinema-chapters { top: auto; left: 7%; right: 7%; bottom: 75px; transform: none; flex-direction: row; justify-content: space-between; gap: 0; }
  #cinema-chapters button { min-width: 44px; min-height: 44px; justify-content: center; padding: 10px; font-size: 9px; }
  #cinema-chapters button::before { top: auto; bottom: 2px; left: calc(50% - 2px); }
  #cinema .cinema-bottomline { left: 7%; right: 7%; bottom: 20px; gap: 14px; min-height: 38px; font-size: 7px; letter-spacing: .035em; }
  #cinema-current-label { max-width: 145px; }
  #cinema-count { font-size: 9px; }
  #cinema-progress { width: 32px; }
  #cinema-skip { min-height: 44px; margin-left: auto; font-size: 7px; gap: 9px; }
  #cinema .cinema-status { left: 7%; bottom: 136px; font-size: 8px; }
  html[lang="tr"] .cinema-copy h1, html[lang="tr"] .cinema-copy h2 { font-size: clamp(43px, 8.8vw, 62px); line-height: 1.065; }
  html[lang="tr"] .cinema-copy.copy-bottom h2, html[lang="tr"] .cinema-copy[data-scene="1"] h2, html[lang="tr"] .cinema-copy[data-scene="4"] h2 { font-size: clamp(41px, 8.5vw, 58px); }
}
@media (max-width: 400px) {
  .cinema-topline { font-size: 6px; gap: 13px; }
  .cinema-topline > span:last-child { max-width: 90px; }
  .cinema-topline > span:first-child { max-width: 170px; }
  .cinema-topline #motion-toggle { min-width: 84px; font-size: 6px; }
  .cinema-copy h1, .cinema-copy h2 { font-size: 44px; }
  .cinema-copy { top: 18%; }
  .cinema-description { max-width: 264px; font-size: 11px; }
  .cinema-actions { gap: 5px 12px; margin-top: 20px; }
  .cinema-actions .button, .cinema-actions button, .cinema-actions > a:not(.button) { font-size: 7px; }
  #cinema-progress { display: none; }
  #cinema-current-label { max-width: 119px; font-size: 6px; }
  #cinema-chapters { left: 5%; right: 5%; }
  html[lang="tr"] .cinema-copy h1, html[lang="tr"] .cinema-copy h2 { font-size: 41px; }
}
@media (max-height: 740px) and (min-width: 761px) {
  #cinema-stage, #cinema.cinema-enabled #cinema-stage { min-height: 560px; }
  .cinema-copy { top: 20%; }
  .cinema-copy h1, .cinema-copy h2 { font-size: clamp(49px, 4.8vw, 73px); }
  .cinema-kicker { margin-bottom: 18px; }
  .cinema-description { margin-top: 20px; font-size: 12px; }
  .cinema-actions { margin-top: 20px; }
  .cinema-tags { margin-top: 16px; }
  .cinema-copy[data-scene="1"], .cinema-copy[data-scene="4"] { bottom: 18%; }
  html[lang="tr"] .cinema-copy h1, html[lang="tr"] .cinema-copy h2 { font-size: clamp(46px, 4.5vw, 66px); }
}
@media (max-height: 730px) and (max-width: 760px) {
  #cinema-stage, #cinema.cinema-enabled #cinema-stage { min-height: calc(100svh - var(--header)); }
  .cinema-copy { top: 16%; }
  .cinema-copy h1, .cinema-copy h2 { font-size: clamp(39px, 8.3vw, 54px); }
  .cinema-kicker { margin-bottom: 14px; }
  .cinema-description { font-size: 11px; margin-top: 16px; }
  .cinema-tags { margin-top: 13px; }
  .cinema-actions { margin-top: 17px; }
  #cinema-chapters { bottom: 52px; }
  #cinema .cinema-bottomline { bottom: 5px; }
  .cinema-copy.copy-bottom, .cinema-copy[data-scene="1"], .cinema-copy[data-scene="4"] { bottom: 23%; }
  .cinema-copy.copy-bottom h2, .cinema-copy[data-scene="1"] h2, .cinema-copy[data-scene="4"] h2 { font-size: clamp(39px, 8.3vw, 54px); }
  html[lang="tr"] .cinema-copy h1, html[lang="tr"] .cinema-copy h2,
  html[lang="tr"] .cinema-copy[data-scene="1"] h2, html[lang="tr"] .cinema-copy[data-scene="4"] h2 { font-size: clamp(36px, 7.8vw, 51px); }
}

/* A short landscape viewport keeps controls clear without trapping the page. */
@media (max-height: 520px) and (min-width: 600px) {
  #cinema-stage, #cinema.cinema-enabled #cinema-stage { min-height: 0; height: calc(100svh - var(--header)); }
  .cinema-topline { top: 5px; font-size: 7px; }
  .cinema-topline #motion-toggle { min-height: 44px; font-size: 7px; }
  #cinema { --cinema-copy-left: 12%; }
  .cinema-copy, .cinema-copy.copy-right,
  .cinema-copy.copy-bottom, .cinema-copy[data-scene="1"], .cinema-copy[data-scene="4"] { left: var(--cinema-copy-left); top: 20%; bottom: auto; width: 62%; }
  #cinema .cinema-copy h1, #cinema .cinema-copy h2,
  html[lang="tr"] #cinema .cinema-copy h1, html[lang="tr"] #cinema .cinema-copy h2 { font-size: clamp(30px, 4.5vw, 41px); line-height: 1.02; }
  .cinema-kicker { margin-bottom: 10px; font-size: 7px; }
  .cinema-description, .cinema-copy[data-scene="1"] .cinema-description, .cinema-copy[data-scene="4"] .cinema-description { margin-top: 12px; font-size: 10px; line-height: 1.5; max-width: 410px; }
  .cinema-tags { margin-top: 10px; }
  .cinema-tags > span { font-size: 6px; padding: 4px 6px; }
  .cinema-copy[data-scene="0"] .cinema-tags, .cinema-copy[data-scene="5"] .cinema-tags { display: none; }
  .cinema-copy[data-scene="0"] .cinema-description, .cinema-copy[data-scene="5"] .cinema-description { display: none; }
  .cinema-actions { margin-top: 14px; }
  .cinema-actions .button, .cinema-actions button, .cinema-actions > a:not(.button) { min-height: 44px; font-size: 7px; padding-block: 10px; }
  #cinema .cinema-bottomline { bottom: 3px; left: auto; right: 5%; }
  #cinema-current-label, #cinema-count, #cinema-progress { display: none; }
  #cinema-chapters { top: auto; left: var(--cinema-copy-left); right: auto; bottom: 3px; transform: none; flex-direction: row; gap: 0; }
  #cinema-chapters button { min-width: 44px; min-height: 44px; padding: 10px; }
  #cinema-chapters button::before { top: auto; bottom: 2px; left: calc(50% - 2px); }
  .cinema-grid { bottom: 18%; }
}

@media (max-height: 400px) and (min-width: 600px) {
  #cinema .cinema-copy h1, #cinema .cinema-copy h2,
  html[lang="tr"] #cinema .cinema-copy h1, html[lang="tr"] #cinema .cinema-copy h2 { font-size: 31px; }
  #cinema .cinema-tags { display: none; }
  #cinema .cinema-description { margin-top: 9px; }
}

/* Reduced motion is a different reading layout, never an empty pinned space. */
.motion-off #cinema, #cinema.cinema-static { height: auto!important; }
.motion-off #cinema #cinema-stage, #cinema.cinema-static #cinema-stage {
  position: relative;
  top: auto;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 80px;
  height: auto;
  min-height: 0;
  padding: 150px 12.5% 80px;
  background: var(--cinema-ink);
}
.motion-off #cinema-canvas, #cinema.cinema-static #cinema-canvas,
.motion-off #cinema-chapters, #cinema.cinema-static #cinema-chapters,
.motion-off #cinema .cinema-grid, #cinema.cinema-static .cinema-grid,
.motion-off #cinema .cinema-bottomline, #cinema.cinema-static .cinema-bottomline { display: none; }
.motion-off #cinema-fallback, #cinema.cinema-static #cinema-fallback,
.motion-off #cinema-fallback img, #cinema.cinema-static #cinema-fallback img { height: 680px; }
.motion-off #cinema .cinema-shade, #cinema.cinema-static .cinema-shade { background: linear-gradient(0deg, #0a1421 calc(100% - 590px), rgba(10, 20, 33, .3)), linear-gradient(90deg, rgba(10, 20, 33, .5), transparent); }
.motion-off #cinema .cinema-copy, #cinema.cinema-static .cinema-copy {
  position: relative;
  display: block!important;
  top: auto;
  bottom: auto;
  left: auto;
  width: auto;
  max-width: none;
  padding: 42px 0 48px;
  border-top: 1px solid rgba(242, 234, 216, .2);
  opacity: 1!important;
  visibility: visible!important;
  transform: none!important;
  pointer-events: auto!important;
  will-change: auto;
}
.motion-off #cinema .cinema-copy[data-scene="0"], #cinema.cinema-static .cinema-copy[data-scene="0"] { grid-column: 1 / -1; border: 0; max-width: 760px; min-height: 495px; padding-top: 0; padding-bottom: 90px; }
.motion-off #cinema .cinema-copy:not([data-scene="0"]) h2, #cinema.cinema-static .cinema-copy:not([data-scene="0"]) h2 { font-size: clamp(38px, 3.4vw, 57px); }
.motion-off #cinema .cinema-copy:not([data-scene="0"]) .cinema-description, #cinema.cinema-static .cinema-copy:not([data-scene="0"]) .cinema-description { max-width: 380px; }
.motion-off #cinema .cinema-copy[data-scene="0"] button[data-scene], #cinema.cinema-static .cinema-copy[data-scene="0"] button[data-scene] { display: none; }
.motion-off #cinema .cinema-copy .cinema-description, #cinema.cinema-static .cinema-copy .cinema-description { display: block; }
.motion-off #cinema .cinema-copy .cinema-tags, #cinema.cinema-static .cinema-copy .cinema-tags { display: flex; }
@media (max-width: 760px) {
  .motion-off #cinema #cinema-stage, #cinema.cinema-static #cinema-stage { grid-template-columns: 1fr; gap: 0; padding: 130px 7% 40px; }
  .motion-off #cinema .cinema-copy[data-scene="0"], #cinema.cinema-static .cinema-copy[data-scene="0"] { min-height: 480px; }
  .motion-off #cinema .cinema-copy:not([data-scene="0"]) h2, #cinema.cinema-static .cinema-copy:not([data-scene="0"]) h2 { font-size: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  html:not(.motion-full) #cinema, html:not(.motion-full) #cinema.cinema-enabled { height: auto!important; }
  html:not(.motion-full) #cinema #cinema-stage { position: relative; top: auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 80px; height: auto; min-height: 0; padding: 150px 12.5% 80px; background: var(--cinema-ink); }
  html:not(.motion-full) #cinema-canvas, html:not(.motion-full) #cinema-chapters, html:not(.motion-full) #cinema .cinema-grid, html:not(.motion-full) #cinema .cinema-bottomline { display: none; }
  html:not(.motion-full) #cinema-fallback, html:not(.motion-full) #cinema-fallback img { height: 680px; }
  html:not(.motion-full) #cinema .cinema-shade { background: linear-gradient(0deg, #0a1421 calc(100% - 590px), rgba(10, 20, 33, .3)), linear-gradient(90deg, rgba(10, 20, 33, .5), transparent); }
  html:not(.motion-full) #cinema .cinema-copy { position: relative; display: block!important; top: auto; bottom: auto; left: auto; width: auto; max-width: none; padding: 42px 0 48px; border-top: 1px solid rgba(242, 234, 216, .2); opacity: 1!important; visibility: visible!important; transform: none!important; pointer-events: auto!important; will-change: auto; }
  html:not(.motion-full) #cinema .cinema-copy[data-scene="0"] { grid-column: 1 / -1; border: 0; max-width: 760px; min-height: 495px; padding-top: 0; padding-bottom: 90px; }
  html:not(.motion-full) #cinema .cinema-copy:not([data-scene="0"]) h2 { font-size: clamp(38px, 3.4vw, 57px); }
  html:not(.motion-full) #cinema .cinema-copy[data-scene="0"] button[data-scene] { display: none; }
  html:not(.motion-full) #cinema .cinema-copy .cinema-description { display: block; }
  html:not(.motion-full) #cinema .cinema-copy .cinema-tags { display: flex; }
  @media (max-width: 760px) {
    html:not(.motion-full) #cinema #cinema-stage { grid-template-columns: 1fr; gap: 0; padding: 130px 7% 40px; }
    html:not(.motion-full) #cinema .cinema-copy[data-scene="0"] { min-height: 480px; }
    html:not(.motion-full) #cinema .cinema-copy:not([data-scene="0"]) h2 { font-size: 44px; }
  }
}
@media print {
  #cinema, #cinema.cinema-enabled { height: auto!important; background: white; color: #111; }
  #cinema #cinema-stage { position: static!important; display: block; height: auto; min-height: 0; padding: 25pt 0; background: white; }
  #cinema-canvas, #cinema-fallback, .cinema-shade, .cinema-grid, .cinema-topline, #cinema-chapters, #cinema .cinema-bottomline, .cinema-actions { display: none!important; }
  #cinema .cinema-copy { display: none!important; }
  #cinema .cinema-copy[data-scene="0"] { display: block!important; position: static!important; opacity: 1!important; visibility: visible!important; transform: none!important; width: auto; min-height: 0; max-width: none; padding: 0; border: 0; }
  #cinema .cinema-copy h1, #cinema .cinema-copy h1 em { font-size: 39pt; color: #111; text-shadow: none; }
  #cinema .cinema-description, #cinema .cinema-kicker { color: #333; font-size: 10pt; text-shadow: none; max-width: none; }
}