/* A chapter changes like a sheet turning in a comic book. */
@view-transition { navigation: auto; }
:root { --turn-angle: -17deg; --turn-offset: -10%; --enter-angle: 17deg; --enter-offset: 12%; }
:root[data-page-turn="back"] { --turn-angle: 17deg; --turn-offset: 10%; --enter-angle: -17deg; --enter-offset: -12%; }
.site-header { view-transition-name: masthead; }
::view-transition { pointer-events: none; }
::view-transition-group(root) { perspective: 1600px; }
::view-transition-old(root), ::view-transition-new(root) {
  mix-blend-mode: normal;
  backface-visibility: hidden;
  transform-origin: 50% 45%;
  animation-duration: 680ms;
  animation-timing-function: cubic-bezier(.22,.7,.18,1);
}
::view-transition-old(root) { animation-name: chapter-out; }
::view-transition-new(root) { animation-name: chapter-in; }
::view-transition-group(masthead) { z-index: 10; animation-duration: 0s; }
::view-transition-old(masthead) { display: none; }
::view-transition-new(masthead) { animation: none; }
@keyframes chapter-out {
  0% { transform: perspective(1600px) translateZ(0) rotateY(0); opacity: 1; }
  65%,100% { transform: perspective(1600px) translateX(var(--turn-offset)) translateZ(-180px) rotateY(var(--turn-angle)); opacity: 0; }
}
@keyframes chapter-in {
  0% { transform: perspective(1600px) translateX(var(--enter-offset)) translateZ(-230px) rotateY(var(--enter-angle)); opacity: 0; }
  100% { transform: perspective(1600px) translateX(0) translateZ(0) rotateY(0); opacity: 1; }
}
[data-reveal] { transform-origin: 50% 15%; }
[tabindex="-1"]:focus:not(:focus-visible) { outline: none; }

/* The cover's reverse uses the very same native screenshot as the app viewer. */
.book-back { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto minmax(0,1fr) auto; }
.back-masthead,.back-link { grid-column: 1 / -1; }
.back-copy { grid-column: 1; grid-row: 2; align-self: center; padding: 24px 0 24px 24px; }
.back-copy h2 { font-size: clamp(28px,3.8vw,54px); }
.back-copy p { max-width: 165px; }
.cover-device-scene { grid-column: 2; grid-row: 2; align-self: center; justify-self: center; width: 66%; perspective: 900px; transform: translateX(-4%); }
.cover-device { position: relative; width: 100%; aspect-ratio: 9 / 19.5; border-radius: 13% / 6%; padding: 4.5%; background: linear-gradient(120deg,#a5aaa8,#363d3e 15%,#101718 72%,#747d79); border: 1px solid #0c1112; box-shadow: 6px 4px 0 #172021,7px 5px 0 #64716b,14px 20px 20px #192b3038; transform: rotateY(-23deg) rotateX(7deg) rotateZ(8deg); }
.cover-device:before { content: ''; position: absolute; width: 5%; aspect-ratio: 1; background: #050809; border: 1px solid #343b3e; border-radius: 50%; top: 4%; left: 47.5%; z-index: 2; }
.cover-device:after { content: ''; position: absolute; width: 25%; height: 2px; border-radius: 3px; background: #747b7e; bottom: 3%; left: 37.5%; }
.cover-device-screen { height: 100%; border-radius: 10% / 4.5%; overflow: hidden; background: #151a20; display: flex; align-items: center; }
.cover-device-screen img { width: 100%; height: auto; object-fit: contain; }
.back-star { top: 13%; right: 11px; font-size: 32px; }
.back-link { position: static; margin: 0; }
@media(max-width:850px) {
  .back-copy { padding: 17px 0 17px 15px; }
  .back-copy h2 { font-size: 32px; }
  .cover-device-scene { width: 64%; }
  .back-copy p { font-size: 10.5px; }
  :lang(tr) .back-copy h2 { font-size: 28px; }
}
@media(max-width:640px) {
  .back-copy { max-width: none; }
  .back-copy h2 { font-size: clamp(27px,8vw,39px); }
  :lang(tr) .back-copy h2 { font-size: clamp(25px,7.5vw,36px); }
  .back-copy p { max-width: 125px; }
  .cover-device-scene { width: 67%; }
  :root { --turn-angle: -11deg; --turn-offset: -6%; --enter-angle: 11deg; --enter-offset: 7%; }
  :root[data-page-turn="back"] { --turn-angle: 11deg; --turn-offset: 6%; --enter-angle: -11deg; --enter-offset: -7%; }
}
@media(max-width:370px) {
  .back-copy { padding-left: 13px; }
  .back-copy p { font-size: 9px; }
}
@media(prefers-reduced-motion:reduce) {
  @view-transition { navigation: none; }
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*) { animation: none!important; }
}