/*
 * One product, one continuous engineering journey.
 * The Canvas scene occupies the right side on desktop and the lower half on
 * mobile. Selectable HTML explains the behaviour without covering the product.
 * This file intentionally follows style.css and cinema.css.
 */
#cinema {
  --cinema-copy-left: 10.3%;
  --journey-muted: #b6c7d5;
  --journey-rule: rgba(218, 233, 244, .16);
  background: #07314e;
}
#cinema.cinema-enabled { height: 1300svh; }
#cinema #cinema-stage,
#cinema.cinema-enabled #cinema-stage {
  height: calc(100svh - var(--header));
  min-height: 0;
  background: #07314e;
}
#cinema #cinema-fallback,
#cinema #cinema-fallback img {
  z-index: 0;
  object-position: center;
}
#cinema #cinema-canvas { z-index: 1; }
#cinema .cinema-shade {
  z-index: 2;
  background: linear-gradient(90deg, rgba(5, 24, 39, .42) 0%, rgba(5, 24, 39, .14) 40%, transparent 53%);
}
#cinema .cinema-grid {
  z-index: 2;
  inset: 12% 4.5% 13%;
  border: 0;
  border-left: 1px solid var(--journey-rule);
  border-right: 1px solid var(--journey-rule);
}
#cinema .cinema-grid::before,
#cinema .cinema-grid::after {
  bottom: 0;
  font-size: 13px;
  opacity: .52;
}
#cinema .cinema-topline {
  z-index: 5;
  top: 22px;
  left: var(--cinema-copy-left);
  right: 4.5%;
  gap: 24px;
  font-size: 10px;
  line-height: 1.5;
  letter-spacing: .055em;
  color: #c4d4df;
}
#cinema .cinema-topline > span:first-child { max-width: 520px; }
#cinema .cinema-topline #motion-toggle {
  min-width: 110px;
  min-height: 44px;
  padding: 10px 12px;
  border-color: rgba(229, 236, 236, .28);
  border-radius: 3px;
  background: rgba(4, 22, 36, .35);
  font-size: 10px;
  letter-spacing: 0;
}
#cinema .cinema-copy,
#cinema .cinema-copy.copy-right,
#cinema .cinema-copy.copy-bottom {
  z-index: 4;
  top: 24%;
  bottom: auto;
  left: var(--cinema-copy-left);
  width: 36%;
  max-width: 600px;
  padding: 0;
  text-shadow: none;
}
#cinema .cinema-kicker {
  margin: 0 0 21px;
  color: #e6c894;
  font-size: 10px;
  line-height: 1.5;
  letter-spacing: .13em;
}
#cinema .cinema-kicker::before { width: 19px; }
#cinema .cinema-copy h1,
#cinema .cinema-copy h2,
html[lang="tr"] #cinema .cinema-copy h1,
html[lang="tr"] #cinema .cinema-copy h2 {
  max-width: 610px;
  font-size: clamp(44px, 4.75vw, 76px);
  line-height: 1.035;
  font-weight: 400;
  letter-spacing: -.055em;
  color: #f5f0e5;
  text-wrap: balance;
}
#cinema .cinema-copy h1 em,
#cinema .cinema-copy h2 em { color: #e6c894; }
#cinema .cinema-description,
#cinema .cinema-copy[data-scene] .cinema-description {
  display: block;
  max-width: 385px;
  margin: 24px 0 0;
  font-size: 14px;
  line-height: 1.7;
  color: #c9d6df;
  text-wrap: pretty;
}
#cinema .cinema-tags {
  display: flex;
  max-width: 430px;
  gap: 7px 13px;
  margin-top: 23px;
}
#cinema .cinema-tags > span {
  padding: 0 0 7px;
  border: 0;
  border-bottom: 1px solid rgba(209, 227, 238, .3);
  border-radius: 0;
  color: #d5e0e5;
  font-size: 10px;
  line-height: 1.4;
  letter-spacing: .025em;
}
#cinema .cinema-actions { margin-top: 25px; gap: 12px 21px; }
#cinema .cinema-actions .button,
#cinema .cinema-actions button,
#cinema .cinema-actions > a:not(.button) {
  min-height: 44px;
  font-size: 10px;
  letter-spacing: .01em;
}
#cinema #cinema-chapters {
  z-index: 6;
  top: 50%;
  bottom: auto;
  left: 1.6%;
  right: auto;
  transform: translateY(-50%);
  flex-direction: column;
  gap: 0;
}
#cinema #cinema-chapters button {
  flex: 0 0 44px;
  min-width: 44px;
  min-height: 44px;
  padding: 10px;
  justify-content: center;
  font-size: 10px;
  font-variant-numeric: tabular-nums;
  color: #86a5b9;
}
#cinema #cinema-chapters button::before {
  top: calc(50% - 2px);
  bottom: auto;
  left: 0;
}
#cinema #cinema-chapters button > span:last-child:not(:first-child) {
  display: block;
  left: 43px;
  max-width: 62px;
  padding: 5px;
  background: #092e48;
  color: #f0e7d2;
  font-size: 8px;
  line-height: 1.4;
  letter-spacing: 0;
}
#cinema #cinema-chapters button:hover,
#cinema #cinema-chapters button:focus-visible,
#cinema #cinema-chapters button[aria-current="true"],
#cinema #cinema-chapters button[aria-pressed="true"],
#cinema #cinema-chapters button.is-active { color: #edcc91; }
#cinema .cinema-bottomline {
  z-index: 6;
  bottom: 19px;
  left: var(--cinema-copy-left);
  right: 4.5%;
  min-height: 44px;
  gap: 24px;
  font-size: 10px;
  letter-spacing: .02em;
  color: #c1d3df;
}
#cinema #cinema-current-label { display: block; max-width: 290px; font-size: 10px; }
#cinema #cinema-count { display: block; font-size: 11px; }
#cinema #cinema-progress { display: block; width: 90px; }
#cinema #cinema-skip { font-size: 10px; min-height: 44px; letter-spacing: 0; }
#cinema :focus-visible { outline: 2px solid #f4cd83; outline-offset: 4px; }
#cinema .journey-disclaimer {
  position: absolute;
  z-index: 4;
  left: var(--cinema-copy-left);
  bottom: 92px;
  max-width: 36%;
  color: #9db6c9;
  font: 10px/1.5 var(--cinema-mono);
  letter-spacing: .015em;
}
.product-art.art-native::before,
.product-art.art-native::after,
.detail-art.art-native::before,
.detail-art.art-native::after { display: none; }
.art-native > canvas { display: block; position: relative; z-index: 1; width: 100%; height: 100%; object-fit: contain; }

@media (min-width: 1700px) {
  #cinema .cinema-copy h1, #cinema .cinema-copy h2,
  html[lang="tr"] #cinema .cinema-copy h1, html[lang="tr"] #cinema .cinema-copy h2 { font-size: 85px; }
  #cinema .cinema-description, #cinema .cinema-copy[data-scene] .cinema-description { max-width: 435px; font-size: 16px; }
  #cinema .cinema-kicker, #cinema .cinema-tags > span { font-size: 11px; }
}
@media (min-width: 761px) and (max-width: 1100px) {
  #cinema { --cinema-copy-left: 11%; }
  #cinema .cinema-copy { width: 37%; top: 23%; }
  #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(39px, 5.1vw, 55px); }
  #cinema .cinema-description, #cinema .cinema-copy[data-scene] .cinema-description { margin-top: 20px; font-size: 13px; line-height: 1.6; }
  #cinema .cinema-kicker { font-size: 9px; margin-bottom: 17px; }
  #cinema .cinema-tags { margin-top: 19px; gap: 7px 10px; }
  #cinema .cinema-tags > span { font-size: 9px; }
  #cinema #cinema-chapters { left: 1.2%; }
  #cinema #cinema-chapters button > span:last-child:not(:first-child) { display: none; }
  #cinema .cinema-bottomline { gap: 18px; }
  #cinema #cinema-current-label { max-width: 195px; }
  #cinema #cinema-progress { width: 50px; }
}
@media (max-width: 760px) {
  #cinema { --cinema-copy-left: 7%; }
  #cinema.cinema-enabled { height: 1430svh; }
  #cinema #cinema-stage, #cinema.cinema-enabled #cinema-stage { min-height: 0; height: calc(100svh - var(--header)); }
  #cinema .cinema-shade {
    background: linear-gradient(180deg, rgba(4, 25, 40, .38) 0%, rgba(4, 25, 40, .16) 36%, transparent 47%, transparent 84%, rgba(4, 25, 40, .72) 100%);
  }
  #cinema .cinema-grid { inset: 10% 4.5% 14%; border-color: rgba(207, 226, 236, .1); }
  #cinema .cinema-topline { top: 8px; left: 7%; right: 7%; gap: 14px; font-size: 8px; line-height: 1.45; letter-spacing: .01em; }
  #cinema .cinema-topline > span:first-child { max-width: 245px; }
  #cinema .cinema-topline #motion-toggle { min-width: 88px; font-size: 9px; padding: 8px; gap: 5px; }
  #cinema .cinema-copy,
  #cinema .cinema-copy.copy-right,
  #cinema .cinema-copy.copy-bottom {
    top: 12%;
    bottom: auto;
    left: 7%;
    width: 86%;
    max-width: 590px;
    padding: 0;
  }
  #cinema .cinema-copy h1, #cinema .cinema-copy h2,
  html[lang="tr"] #cinema .cinema-copy h1, html[lang="tr"] #cinema .cinema-copy h2 {
    max-width: 580px;
    font-size: clamp(32px, 7.7vw, 44px);
    line-height: 1.06;
    letter-spacing: -.045em;
  }
  #cinema .cinema-kicker { margin-bottom: 11px; gap: 8px; font-size: 9px; letter-spacing: .075em; }
  #cinema .cinema-kicker::before { width: 15px; }
  #cinema .cinema-description, #cinema .cinema-copy[data-scene] .cinema-description {
    display: block;
    max-width: 435px;
    margin-top: 14px;
    font-size: 12px;
    line-height: 1.5;
  }
  #cinema .cinema-tags, #cinema .cinema-copy[data-scene] .cinema-tags { display: flex; margin-top: 13px; gap: 6px 11px; max-width: 420px; }
  #cinema .cinema-tags > span { padding-bottom: 4px; font-size: 8px; }
  #cinema .cinema-actions { margin-top: 16px; gap: 8px 15px; }
  #cinema .cinema-actions .button, #cinema .cinema-actions button, #cinema .cinema-actions > a:not(.button) { font-size: 9px; min-height: 44px; }
  #cinema .cinema-actions .button { padding: 10px 13px; gap: 14px; }
  #cinema #cinema-chapters {
    top: auto;
    bottom: 44px;
    left: 7%;
    right: 7%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 0;
    transform: none;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scroll-padding-inline: 15px;
    border-bottom: 1px solid rgba(191, 213, 227, .16);
  }
  #cinema #cinema-chapters::-webkit-scrollbar { display: none; }
  #cinema #cinema-chapters button { flex: 1 0 44px; min-height: 44px; min-width: 44px; font-size: 10px; padding: 10px; }
  #cinema #cinema-chapters button::before { top: auto; bottom: 3px; left: calc(50% - 2px); }
  #cinema #cinema-chapters button > span:last-child:not(:first-child) { display: none; }
  #cinema .cinema-bottomline { bottom: 0; left: 7%; right: 7%; min-height: 44px; gap: 10px; font-size: 8px; letter-spacing: 0; }
  #cinema #cinema-current-label { max-width: 170px; font-size: 8px; letter-spacing: 0; }
  #cinema #cinema-count { margin-left: auto; font-size: 9px; }
  #cinema #cinema-progress { display: none; }
  #cinema #cinema-skip { margin-left: 5px; gap: 5px; font-size: 8px; }
  #cinema .journey-disclaimer { top: 61px; bottom: auto; left: 7%; max-width: 86%; font-size: 8px; line-height: 1.4; }
}
@media (max-width: 400px) {
  #cinema .cinema-topline { font-size: 8px; gap: 9px; }
  #cinema .cinema-topline > span:first-child { max-width: 210px; }
  #cinema .cinema-topline #motion-toggle { min-width: 84px; font-size: 8px; }
  #cinema .cinema-copy h1, #cinema .cinema-copy h2,
  html[lang="tr"] #cinema .cinema-copy h1, html[lang="tr"] #cinema .cinema-copy h2 { font-size: 32px; }
  #cinema .cinema-tags { gap: 6px 9px; }
  #cinema #cinema-current-label { max-width: 127px; }
  #cinema #cinema-skip { max-width: 117px; white-space: normal; text-align: right; }
}
@media (max-width: 760px) and (max-height: 730px) {
  #cinema .cinema-copy { top: 12.5%; }
  #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(29px, 7.5vw, 38px); }
  #cinema .cinema-kicker { margin-bottom: 8px; font-size: 8px; }
  #cinema .cinema-description, #cinema .cinema-copy[data-scene] .cinema-description { margin-top: 11px; font-size: 12px; line-height: 1.45; }
  #cinema.cinema-enabled .cinema-tags, #cinema.cinema-enabled .cinema-copy[data-scene] .cinema-tags { display: none; }
  #cinema .cinema-actions { margin-top: 12px; }
  #cinema.cinema-enabled .journey-disclaimer { top: 57px; font-size: 8px; }
}
@media (min-width: 761px) and (max-height: 650px) {
  #cinema .cinema-copy { top: 19%; }
  #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(38px, 4.4vw, 57px); }
  #cinema .cinema-kicker { margin-bottom: 12px; }
  #cinema .cinema-description, #cinema .cinema-copy[data-scene] .cinema-description { font-size: 13px; margin-top: 16px; }
  #cinema .cinema-tags { margin-top: 14px; }
  #cinema .cinema-topline { top: 8px; }
  #cinema #cinema-chapters { left: 0; }
  #cinema .cinema-bottomline { bottom: 5px; }
  #cinema .journey-disclaimer { bottom: 70px; }
}

/* In landscape, keep a readable left text column and an ordinary horizontal
   chapter rail. It must never increase the sticky panel beyond the viewport. */
@media (min-width: 600px) and (max-height: 520px) {
  #cinema { --cinema-copy-left: 7%; }
  #cinema .cinema-copy, #cinema .cinema-copy.copy-bottom, #cinema .cinema-copy.copy-right { top: 20%; left: 7%; width: 41%; }
  #cinema .cinema-copy h1, #cinema .cinema-copy h2,
  html[lang="tr"] #cinema .cinema-copy h1, html[lang="tr"] #cinema .cinema-copy h2 { font-size: 32px; line-height: 1.04; }
  #cinema .cinema-topline { top: 0; font-size: 8px; }
  #cinema .cinema-topline #motion-toggle { font-size: 8px; }
  #cinema .cinema-kicker { margin-bottom: 7px; font-size: 8px; }
  #cinema .cinema-description, #cinema .cinema-copy[data-scene] .cinema-description { font-size: 12px; line-height: 1.4; margin-top: 10px; }
  #cinema.cinema-enabled .cinema-tags, #cinema.cinema-enabled .cinema-copy[data-scene] .cinema-tags { display: none; }
  #cinema .cinema-actions { margin-top: 9px; }
  #cinema .cinema-actions .button, #cinema .cinema-actions > a:not(.button) { font-size: 8px; padding-block: 8px; }
  #cinema #cinema-chapters { top: auto; bottom: 0; left: 7%; right: 24%; transform: none; flex-direction: row; gap: 0; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
  #cinema #cinema-chapters button { flex: 0 0 44px; }
  #cinema #cinema-chapters button::before { top: auto; bottom: 3px; left: calc(50% - 2px); }
  #cinema #cinema-chapters button > span:last-child:not(:first-child) { display: none; }
  #cinema .cinema-bottomline { left: auto; right: 4.5%; bottom: 0; }
  #cinema #cinema-current-label, #cinema #cinema-count, #cinema #cinema-progress { display: none; }
  #cinema #cinema-skip { font-size: 9px; }
  #cinema.cinema-enabled .journey-disclaimer { display: none; }
}

/* The driver switches to this reading layout for reduced motion. All content
   remains real HTML, ordered, selectable and keyboard reachable. */
html.motion-off #cinema,
#cinema.cinema-static { height: auto !important; }
html.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 8%;
  height: auto;
  min-height: 0;
  padding: 140px 10% 65px;
  background: #092b42;
}
html.motion-off #cinema #cinema-canvas,
html.motion-off #cinema #cinema-fallback,
html.motion-off #cinema #cinema-chapters,
html.motion-off #cinema .cinema-shade,
html.motion-off #cinema .cinema-grid,
html.motion-off #cinema .cinema-bottomline,
#cinema.cinema-static #cinema-canvas,
#cinema.cinema-static #cinema-fallback,
#cinema.cinema-static #cinema-chapters,
#cinema.cinema-static .cinema-shade,
#cinema.cinema-static .cinema-grid,
#cinema.cinema-static .cinema-bottomline { display: none; }
html.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;
  min-height: 0;
  padding: 35px 0 43px;
  border-top: 1px solid rgba(221, 236, 240, .2);
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  pointer-events: auto !important;
  will-change: auto;
}
html.motion-off #cinema .cinema-copy[data-scene="0"],
#cinema.cinema-static .cinema-copy[data-scene="0"] { grid-column: 1 / -1; max-width: 850px; min-height: 0; padding: 0 0 50px; border: 0; }
html.motion-off #cinema .cinema-copy h2,
#cinema.cinema-static .cinema-copy h2 { font-size: clamp(34px, 3.5vw, 53px); }
html.motion-off #cinema .cinema-copy .cinema-description,
#cinema.cinema-static .cinema-copy .cinema-description { display: block; max-width: 480px; font-size: 14px; }
html.motion-off #cinema .cinema-copy .cinema-tags,
#cinema.cinema-static .cinema-copy .cinema-tags { display: flex; }
html.motion-off #cinema .journey-disclaimer,
#cinema.cinema-static .journey-disclaimer { display: block; position: relative; grid-column: 1 / -1; top: auto; bottom: auto; left: auto; max-width: none; padding: 14px 0 0; font-size: 11px; }
@media (max-width: 760px) {
  html.motion-off #cinema #cinema-stage, #cinema.cinema-static #cinema-stage { grid-template-columns: 1fr; gap: 0; padding: 112px 7% 25px; }
  html.motion-off #cinema .cinema-copy[data-scene="0"], #cinema.cinema-static .cinema-copy[data-scene="0"] { min-height: 0; padding-bottom: 35px; }
  html.motion-off #cinema .cinema-copy h2, #cinema.cinema-static .cinema-copy h2 { font-size: 36px; }
  html.motion-off #cinema .cinema-copy .cinema-description, #cinema.cinema-static .cinema-copy .cinema-description { font-size: 13px; line-height: 1.65; }
  html.motion-off #cinema .cinema-copy .cinema-tags, #cinema.cinema-static .cinema-copy .cinema-tags { margin-top: 19px; }
  html.motion-off #cinema .cinema-copy .cinema-tags > span, #cinema.cinema-static .cinema-copy .cinema-tags > span { font-size: 10px; }
}
/* Without JS, the operating system preference still reveals every chapter. */
@media (prefers-reduced-motion: reduce) {
  html:not(.motion-full) #cinema { 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 8%; height: auto; min-height: 0; padding: 140px 10% 65px; background: #092b42; }
  html:not(.motion-full) #cinema #cinema-canvas,
  html:not(.motion-full) #cinema #cinema-fallback,
  html:not(.motion-full) #cinema #cinema-chapters,
  html:not(.motion-full) #cinema .cinema-shade,
  html:not(.motion-full) #cinema .cinema-grid,
  html:not(.motion-full) #cinema .cinema-bottomline { display: none; }
  html:not(.motion-full) #cinema .cinema-copy { position: relative; display: block !important; top: auto; bottom: auto; left: auto; width: auto; max-width: none; min-height: 0; padding: 35px 0 43px; border-top: 1px solid rgba(221, 236, 240, .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; max-width: 850px; min-height: 0; padding: 0 0 50px; border: 0; }
  html:not(.motion-full) #cinema .cinema-copy h2 { font-size: clamp(34px, 3.5vw, 53px); }
  html:not(.motion-full) #cinema .cinema-copy .cinema-description { display: block; max-width: 480px; font-size: 14px; }
  html:not(.motion-full) #cinema .cinema-copy .cinema-tags { display: flex; }
  html:not(.motion-full) #cinema .journey-disclaimer { display: block; position: relative; grid-column: 1 / -1; top: auto; bottom: auto; left: auto; max-width: none; padding: 14px 0 0; font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) and (max-width: 760px) {
  html:not(.motion-full) #cinema #cinema-stage { grid-template-columns: 1fr; gap: 0; padding: 112px 7% 25px; }
  html:not(.motion-full) #cinema .cinema-copy[data-scene="0"] { min-height: 0; padding-bottom: 35px; }
  html:not(.motion-full) #cinema .cinema-copy h2 { font-size: 36px; }
  html:not(.motion-full) #cinema .cinema-copy .cinema-description { font-size: 13px; line-height: 1.65; }
  html:not(.motion-full) #cinema .cinema-copy .cinema-tags { margin-top: 19px; }
  html:not(.motion-full) #cinema .cinema-copy .cinema-tags > span { font-size: 10px; }
}
@media print {
  #cinema, #cinema.cinema-enabled, #cinema.cinema-static { height: auto !important; background: #fff; color: #111; }
  #cinema #cinema-stage, #cinema.cinema-static #cinema-stage { position: static !important; display: block !important; height: auto; min-height: 0; padding: 22pt 0; background: #fff; }
  #cinema .cinema-copy, #cinema.cinema-static .cinema-copy { display: none !important; }
  #cinema .cinema-copy[data-scene="0"], #cinema.cinema-static .cinema-copy[data-scene="0"] { position: static !important; display: block !important; width: auto; min-height: 0; max-width: none; padding: 0; border: 0; }
  #cinema .cinema-copy h1, #cinema .cinema-copy h1 em { color: #111; font-size: 34pt; }
  #cinema .cinema-description, #cinema .cinema-kicker { color: #333; font-size: 10pt; max-width: none; }
  #cinema .cinema-tags, #cinema .cinema-copy[data-scene] .cinema-tags { display: none !important; }
  #cinema .journey-disclaimer { display: none !important; }
  html #cinema #cinema-stage { background: #fff !important; padding: 22pt 0 !important; }
  html #cinema .cinema-copy[data-scene] { display: none !important; }
  html #cinema .cinema-copy[data-scene="0"] { display: block !important; }
}