/* PuzzleReverse · Grafit ve bakır: şirketin grafit zemini, oyunun bakırı ve adaçayı ışığı. */
.puzzle-page{--orange:#d48d6a;--copper:#d48d6a;--sage:#14252a}
.puzzle-page ::selection{color:#090d13;background:#d48d6a}
.puzzle-page :is(button,a,summary):focus-visible{outline-color:#d48d6a}
.puzzle-page .breadcrumb{color:#a1acbb}
.puzzle-page .product-logo b{color:var(--copper)}
.puzzle-page .status.building:before{background:var(--copper)}
.puzzle-page em{color:var(--copper)}
.puzzle-page .button{border-radius:4px;border-color:#edf2f7}
.puzzle-page .button:hover{background:#f0c3ab;border-color:#f0c3ab;color:#090d13}
.puzzle-page .text-link:hover{color:var(--copper)}

/* İlk ekran: solda söz, sağda iki telefon. */
.puzzle-hero{position:relative;isolation:isolate;overflow:hidden}
.puzzle-hero .lead{color:#a1acbb}
.puzzle-hero-art{position:relative;width:100%;max-width:560px;aspect-ratio:560/660;margin-left:auto}
.puzzle-hero-art:before{content:'';position:absolute;left:-14%;top:-6%;width:128%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,#617f8152 0,#d48d6a1a 38%,#090d1300 68%);z-index:-1}
.puzzle-hero-art:after{content:'';position:absolute;left:-4%;top:4%;width:108%;aspect-ratio:1;border-radius:50%;border:1px solid #ffffff0f;z-index:-1}
.puzzle-phone{position:absolute;margin:0;padding:7px;border-radius:40px;background:#050506;box-shadow:0 0 0 1px #4e5a5c,0 30px 60px #0009}
.puzzle-phone img{display:block;width:100%;height:auto;border-radius:33px}
.puzzle-phone.rear{left:2%;top:0;width:42.5%;opacity:.9;filter:brightness(.74)}
.puzzle-phone.front{left:36%;top:15%;width:48.2%;box-shadow:0 0 0 1px #617f81,-18px 34px 70px #000b}

/* Tarayıcı denemesi: oyunun koyu temalarıyla. */
.puzzle-page .puzzle-demo{background:radial-gradient(ellipse at 72% 50%,#14252a8c,#0b101700 62%),#0b1017;border-top:1px solid #ffffff0d}
.puzzle-demo .story-copy{display:grid;gap:21px;align-content:start}
.puzzle-demo .story-copy h2{font-size:clamp(34px,3.8vw,48px)}
.puzzle-demo .story-copy p{color:#a1acbb;font-size:14px;line-height:1.9;max-width:440px}
.puzzle-page .experience{--board:#14252a;--track:#617f81;--mark:#a0b9b4;--leaf:#3d8c84;--flower:#c78471;--sun:#d7ba7a;border-color:#ffffff1c;box-shadow:0 30px 60px #0006;max-width:520px;margin-inline:auto}
.puzzle-page .experience-top{color:#a0b9b4}
.puzzle-page .experience-top span:last-child{color:#c6d3cf}
.puzzle-page .orbit-board .track{opacity:.55}
.puzzle-page .target{background:color-mix(in srgb,var(--board) 82%,black);color:var(--mark)}
.puzzle-page .piece{border-color:#ffffff38;box-shadow:0 4px 0 #0007,0 8px 16px #0006}
.puzzle-page .piece svg{fill:#0d1518}
.puzzle-page .board-center{color:var(--mark)}
.puzzle-page .control{border-color:#ffffff33;background:#ffffff0a;color:#edf2f7}
.puzzle-page .control:hover:not(:disabled){background:#ffffff1a}
.puzzle-page .selection-label{color:#edf2f7}
.puzzle-page .experience-instruction{color:#c6d3cf}
.puzzle-page .experience-utility{border-color:#ffffff1c}
.puzzle-page .experience-utility button{color:#c6d3cf}
.puzzle-page .experience-utility button:hover:not(:disabled){color:#edf2f7}
.puzzle-page .theme-button{border-color:#0b1017;outline-color:#ffffff33;background:radial-gradient(circle,var(--swatch) 0 30%,var(--swatch-bg,#14252a) 34%)}
.puzzle-page .theme-button[aria-pressed=true]{outline:2px solid var(--copper)}
.puzzle-page .theme-caption{color:#a1acbb}

/* Oyunun içinden: koyu ekranlar koyu çerçevede. */
.puzzle-page .screenshot-section{background:radial-gradient(ellipse at 74% 52%,#14252a99,#0b101700 60%),#0b1017;border-top:1px solid #ffffff0d}
.puzzle-page .screens-text p{color:#a1acbb}
.puzzle-page .screenshot-phone{border:6px solid #050506;border-radius:30px;box-shadow:0 0 0 1px #3b5157,0 21px 44px #0008}
.puzzle-page .screens-phones figcaption{color:#a1acbb}
.puzzle-page .launch-box{background:#0e151c;border-color:#ffffff14}
.puzzle-page .launch-badge{border-color:#ffffff24;color:#c6d3cf}

@media(max-width:760px){
  .puzzle-hero-art{max-width:420px;margin:21px auto 0}
  .puzzle-phone{padding:5px;border-radius:30px}
  .puzzle-phone img{border-radius:25px}
}
