/* Creaft Games — site stilleri. Kurallar: CreaftGames/marka-kilavuzu.md */

@font-face { font-family: "Baloo 2"; src: url("/assets/fonts/baloo-800.woff2") format("woff2"); font-weight: 800; font-display: swap; }
@font-face { font-family: "Baloo 2"; src: url("/assets/fonts/baloo-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Rubik"; src: url("/assets/fonts/rubik-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Rubik"; src: url("/assets/fonts/rubik-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("/assets/fonts/jbmono-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }

:root {
  --selcuk: #1AA6B7;
  --firuze: #7ED6E0;
  --karatay: #0B7F8F;
  --murekkep: #1C2B55;
  --murekkep-deep: #131E40;
  --narcicegi: #F2705A;
  --kagit: #FFF6EA;
  --head: "Baloo 2", system-ui, sans-serif;
  --body: "Rubik", system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, monospace;
  --jelly: cubic-bezier(.34, 1.56, .64, 1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--body); color: var(--kagit); background: var(--murekkep); line-height: 1.5; overflow-x: hidden; }
img { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; cursor: pointer; background: none; border: 0; padding: 0; }

.skip { position: absolute; left: -999px; top: 8px; z-index: 50; background: var(--kagit); color: var(--murekkep); padding: 8px 14px; border-radius: 10px; }
.skip:focus { left: 16px; }

/* ---------- üst çubuk ---------- */
.topbar { position: fixed; inset: 0 0 auto 0; z-index: 20; display: flex; align-items: center; justify-content: space-between;
  padding: max(14px, env(safe-area-inset-top)) clamp(16px, 4vw, 40px) 14px; pointer-events: none; }
.topbar > * { pointer-events: auto; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; font-family: var(--head); font-weight: 800; font-size: 26px; letter-spacing: .02em; }
.brand img { width: 36px; height: 36px; transition: transform .5s var(--jelly); }
.brand:hover img { transform: rotate(-8deg) scale(1.08); }
.topbar nav { display: flex; align-items: center; gap: 10px; }
.sound, .ig { font: 500 14px var(--mono); padding: 6px 2px; text-decoration: none; color: rgba(255, 246, 234, .75); display: inline-flex; align-items: center; gap: 8px;
  border-bottom: 1px solid transparent; transition: color .2s, border-color .2s; }
.sound:hover, .ig:hover { color: var(--kagit); border-color: currentColor; }
.topbar nav { gap: 22px; }
.sound-icon { width: 14px; height: 14px; border-radius: 50%; background: rgba(255, 246, 234, .35); box-shadow: inset 0 0 0 3px var(--murekkep); }
.sound[aria-pressed="true"] .sound-icon { background: var(--firuze); animation: beat 1.2s var(--jelly) infinite; }
@keyframes beat { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.35); } }
.topbar.on-light .brand, .topbar.on-light .sound, .topbar.on-light .ig { color: var(--murekkep); }
.topbar.on-light .sound-icon { box-shadow: inset 0 0 0 3px var(--kagit); }

/* ---------- 1 · hero ---------- */
.hero { position: relative; min-height: 100svh; display: grid; place-items: center; overflow: hidden;
  background: var(--murekkep); }
.terminal { position: absolute; left: 50%; top: 50%; width: min(640px, 92vw); transform: translate(-50%, -50%);
  background: var(--murekkep-deep); border-radius: 22px; box-shadow: 0 30px 80px rgba(0, 0, 0, .35); overflow: hidden;
  transform-origin: 50% 100%; z-index: 3; }
.terminal .bar { position: relative; display: flex; gap: 9px; align-items: center; padding: 14px 18px; background: #0F1834; }
.terminal .bar i { width: 12px; height: 12px; border-radius: 50%; background: var(--narcicegi); }
.terminal .bar i:nth-child(2) { background: var(--selcuk); }
.terminal .bar i:nth-child(3) { background: var(--firuze); }
.terminal .bar span { position: absolute; left: 0; right: 0; text-align: center; font: 500 13px var(--mono); color: rgba(126, 214, 224, .55); pointer-events: none; }
.screen { margin: 0; padding: 22px 24px 28px; min-height: 250px; font: 500 clamp(13px, 2.1vw, 17px)/1.75 var(--mono); color: var(--kagit); white-space: pre-wrap; }
.screen .p1 { color: var(--firuze); }
.screen .p2 { color: var(--selcuk); }
.screen .dim { opacity: .6; }
.screen .cur { display: inline-block; width: .6em; height: 1.1em; vertical-align: -0.18em; background: var(--firuze); border-radius: 2px; margin-left: 1px; }
.screen .cur.blink { animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }

.stage { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 90px 20px 60px; }
.octo { width: clamp(190px, 34vw, 320px); height: auto; transform-origin: 50% 92%; will-change: transform; opacity: 0; }
.headline { margin: 18px 0 0; font: 800 clamp(44px, 8.5vw, 104px)/1.02 var(--head); letter-spacing: .02em; perspective: 800px; min-height: 1.1em; }
.headline .flip { display: inline-block; color: var(--firuze); opacity: 0; transform-origin: 50% 60%; will-change: transform; }
.headline .flip.final { color: var(--kagit); }
.slogan { margin: 14px 0 0; font: 600 clamp(20px, 2.6vw, 28px) var(--head); color: var(--firuze); letter-spacing: .02em; opacity: 0; transform: translateY(16px); transition: opacity .6s, transform .6s var(--jelly); }
.slogan.show { opacity: 1; transform: none; }

.replay { position: absolute; right: clamp(16px, 4vw, 40px); bottom: 28px; z-index: 4; font: 500 13px var(--mono); color: rgba(126, 214, 224, .7);
  padding: 8px 12px; border-radius: 999px; opacity: 0; transition: opacity .5s, color .2s; }
.replay.show { opacity: 1; }
.replay:hover { color: var(--firuze); }
.scroll-hint { position: absolute; left: 50%; bottom: 26px; width: 26px; height: 42px; margin-left: -13px; border: 2px solid rgba(126, 214, 224, .5); border-radius: 14px; opacity: 0; transition: opacity .6s; }
.scroll-hint span { position: absolute; left: 50%; top: 8px; width: 4px; height: 8px; margin-left: -2px; border-radius: 2px; background: var(--firuze); animation: wheel 1.6s ease-in-out infinite; }
.scroll-hint.show { opacity: 1; }
@keyframes wheel { 0% { transform: translateY(0); opacity: 1; } 70% { transform: translateY(12px); opacity: 0; } 100% { opacity: 0; } }

/* ---------- 2 · atölye ---------- */
.label { margin: 0 0 22px; font: 500 14px var(--mono); letter-spacing: .02em; color: var(--karatay); }
.workshop { background: var(--kagit); color: var(--murekkep); padding: clamp(96px, 13vw, 170px) clamp(20px, 7vw, 110px);
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(30px, 6vw, 90px); align-items: center; }
.workshop h2 { margin: 0; font: 800 clamp(42px, 6.4vw, 92px)/1.02 var(--head); letter-spacing: .01em; max-width: 11ch; }
.workshop .big { margin: 14px 0 34px; font: 600 clamp(24px, 2.8vw, 34px)/1.2 var(--head); color: var(--karatay); }
.workshop p:not(.label):not(.big) { margin: 0 0 16px; font-size: clamp(17px, 1.5vw, 19px); max-width: 44ch; color: rgba(28, 43, 85, .82); }
.ws-art { display: grid; place-items: center; }
.assemble { width: min(100%, 460px); height: auto; overflow: visible; }
.assemble .f { opacity: 0; transform-box: fill-box; transform-origin: center; transform: scale(.6) rotate(-8deg); }
.assemble.in .f { animation: facet .7s var(--jelly) forwards; animation-delay: calc(var(--i) * 45ms); }
@keyframes facet { to { opacity: 1; transform: none; } }
.assemble.in:hover { animation: squish .8s var(--jelly); transform-origin: 50% 90%; }
@keyframes squish { 0% { transform: scale(1, 1); } 25% { transform: scale(1.06, .92); } 50% { transform: scale(.97, 1.04); } 75% { transform: scale(1.02, .99); } 100% { transform: none; } }
@media (max-width: 760px) { .workshop { grid-template-columns: 1fr; } .ws-art { order: -1; } .assemble { width: min(78%, 360px); } }

.reveal { opacity: 0; transform: translateY(26px); transition: opacity .8s ease, transform .9s var(--jelly); }
.reveal.in { opacity: 1; transform: none; }
.workshop .reveal.in:nth-of-type(2) { transition-delay: .1s; } .workshop .reveal.in:nth-of-type(3) { transition-delay: .2s; } .workshop .reveal.in:nth-of-type(4) { transition-delay: .3s; }

/* ---------- 3 · floating ---------- */
.floating { position: relative; min-height: 100svh; display: grid; place-items: center; overflow: hidden; background: var(--murekkep); }
.floating-copy { position: relative; z-index: 2; width: 100%; padding: 0 clamp(20px, 7vw, 110px); pointer-events: none; }
.floating-copy > * { pointer-events: auto; }
.floating .label { color: var(--firuze); opacity: .8; }
.floating h2 { margin: 0; max-width: 12ch; font: 800 clamp(42px, 6.4vw, 92px)/1.02 var(--head); letter-spacing: .01em; }
.floating p:not(.label) { margin: 20px 0 0; max-width: 40ch; font-size: clamp(19px, 2vw, 24px); color: rgba(255, 246, 234, .85); }
.floating p.small { font-size: 17px; color: rgba(255, 246, 234, .6); }
.floating p.small a { color: var(--firuze); text-underline-offset: 4px; }
@keyframes bump { 40% { transform: scale(1.6); } }

/* ---------- 3b · mini demo ---------- */
.floating-grid { position: relative; z-index: 2; width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 380px); gap: clamp(28px, 5vw, 80px);
  align-items: center; padding: 0 clamp(20px, 7vw, 110px); }
.floating-grid .floating-copy { padding: 0; }
.mini { position: relative; background: var(--kagit); color: var(--murekkep); border-radius: 22px; overflow: hidden; box-shadow: 0 24px 60px rgba(0, 0, 0, .35); }
.mini-bar { position: relative; display: flex; gap: 8px; align-items: center; padding: 12px 16px; background: #F2E8D8; }
.mini-bar i { width: 10px; height: 10px; border-radius: 50%; background: var(--narcicegi); }
.mini-bar i:nth-child(2) { background: var(--selcuk); } .mini-bar i:nth-child(3) { background: var(--firuze); }
.mini-bar span { position: absolute; inset: 0; display: grid; place-items: center; font: 500 12px var(--mono); color: rgba(28, 43, 85, .5); pointer-events: none; }
.mini-body { position: relative; padding: 14px 14px 12px; }
.mini-field { position: relative; height: 250px; border-radius: 14px; background: #fff; overflow: hidden; }
.mini-toy { position: absolute; width: 66px; height: 66px; padding: 0; transform: translate(-50%, -50%); animation: bob 3s ease-in-out infinite; animation-delay: var(--d, 0s); transition: filter .15s; }
.mini-toy img { width: 100%; height: 100%; pointer-events: none; }
.mini-toy:hover { filter: brightness(1.08) drop-shadow(0 4px 6px rgba(28, 43, 85, .18)); }
.mini-toy.gone { animation: gone .28s cubic-bezier(.55,0,1,.45) forwards; pointer-events: none; }
@keyframes bob { 0%, 100% { margin-top: 0; } 50% { margin-top: -6px; } }
@keyframes gone { to { transform: translate(-50%, -50%) scale(0) rotate(20deg); opacity: 0; } }
.mini-tray { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; margin-top: 12px; padding: 7px; border-radius: 14px; background: #EFE2CC; box-shadow: inset 0 2px 0 rgba(28, 43, 85, .08); }
.mini-tray span { aspect-ratio: 1; border-radius: 9px; background: rgba(255, 255, 255, .55); display: grid; place-items: center; }
.mini-tray img { width: 88%; height: 88%; animation: land .45s var(--jelly); }
.mini-tray img.merge { animation: merge .3s cubic-bezier(.55,0,1,.45) forwards; }
@keyframes land { 0% { transform: translateY(-18px) scale(.6); } 60% { transform: scale(1.15, .85); } 100% { transform: none; } }
@keyframes merge { 40% { transform: scale(1.3); } 100% { transform: scale(0); opacity: 0; } }
.mini-tray.shake { animation: shake .45s; }
@keyframes shake { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }
.floating .mini .mini-status { margin: 10px 2px 0; max-width: none; font: 500 12px var(--mono); color: rgba(28, 43, 85, .6); min-height: 1.5em; }
.mini-status button { font: inherit; color: var(--karatay); text-decoration: underline; text-underline-offset: 3px; }
.mini-win { position: absolute; inset: 0; background: var(--kagit); padding: 26px 24px; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; }
.mini-win[hidden] { display: none; }
.mini-win.show { animation: winin .6s var(--jelly); }
@keyframes winin { from { transform: scale(.85); opacity: 0; } to { transform: none; opacity: 1; } }
.mini-win img { width: 88px; height: 88px; margin-bottom: 10px; animation: wave 1.6s var(--jelly) infinite; transform-origin: 50% 90%; }
@keyframes wave { 0%, 100% { transform: rotate(0); } 20% { transform: rotate(-8deg) scale(1.04, .96); } 40% { transform: rotate(6deg); } 60% { transform: rotate(0) translateY(-6px); } }
.mini-win h3 { margin: 0; font: 800 26px/1.1 var(--head); }
.floating .mini-win p { margin: 10px 0 16px; max-width: none; font-size: 15px; line-height: 1.45; color: rgba(28, 43, 85, .8); }
.mini-win a { font: 800 17px var(--head); color: var(--karatay); text-underline-offset: 4px; }
.mini-again { margin-top: 12px; font: 500 12px var(--mono); color: rgba(28, 43, 85, .55); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 860px) { .floating-grid { grid-template-columns: 1fr; } .mini { max-width: 380px; } }

/* ---------- footer ---------- */
.footer { position: relative; background: var(--murekkep-deep); padding: 56px clamp(20px, 7vw, 110px) 44px; overflow: hidden; }
.foot-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 22px; }
.foot-logo { width: 150px; height: auto; }
.foot-links { display: flex; flex-wrap: wrap; gap: 22px; margin: 0; }
.foot-links a { text-decoration: none; color: rgba(255, 246, 234, .8); }
.foot-links a:hover { color: var(--firuze); }
.copy { margin: 30px 0 0; font-size: 14px; color: rgba(255, 246, 234, .45); }
.peek { position: absolute; right: 12%; bottom: -54px; width: 90px; transition: transform .5s var(--jelly); }
.peek:hover, .peek:focus-visible { transform: translateY(-30px) rotate(-6deg); }
.peek.jump { animation: peekjump 1s var(--jelly); }
@keyframes peekjump { 0% { transform: translateY(0); } 35% { transform: translateY(-120px) scale(.94, 1.08); } 60% { transform: translateY(-30px) scale(1.1, .9); } 100% { transform: translateY(-30px); } }

:focus-visible { outline: 3px solid var(--firuze); outline-offset: 3px; border-radius: 8px; }

@media (max-width: 560px) {
  .topbar .ig { display: none; }
  .floating { padding: 110px 0 90px; }
  .brand span { font-size: 22px; }
  .terminal { top: 46%; }
  .screen { min-height: 230px; padding: 18px 16px 22px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { transition: none; transform: none; opacity: 1; }
  .assemble .f { opacity: 1; transform: none; animation: none; }
}