@font-face{font-family:Inter;font-weight:400;font-display:block;src:url(assets/font-Inter-400.woff) format('woff')}
@font-face{font-family:Inter;font-weight:500;font-display:block;src:url(assets/font-Inter-500.woff) format('woff')}
@font-face{font-family:Inter;font-weight:600;font-display:block;src:url(assets/font-Inter-600.woff) format('woff')}
@font-face{font-family:Inter;font-weight:700;font-display:block;src:url(assets/font-Inter-700.woff) format('woff')}
@font-face{font-family:Montserrat;font-weight:500;font-display:block;src:url(assets/font-Montserrat-500.woff) format('woff')}
@font-face{font-family:Montserrat;font-weight:700;font-display:block;src:url(assets/font-Montserrat-700.woff) format('woff')}
@font-face{font-family:Montserrat;font-weight:800;font-display:block;src:url(assets/font-Montserrat-800.woff) format('woff')}

*{margin:0;padding:0;box-sizing:border-box}
html,body{width:100%;height:100%;overflow:hidden;background:#000;color:#faf8f6;font-family:Inter,Arial,sans-serif}
#viewport{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:#000}
#stage{position:relative;width:1920px;height:1080px;flex:none;transform-origin:center center;overflow:hidden;background:#231f20}
#stage>section{position:absolute;top:0;left:0;width:1920px;height:1080px;overflow:hidden;color:#faf8f6;opacity:0;visibility:hidden;transition:opacity .55s ease,visibility 0s linear .55s}
#stage>section.active{opacity:1;visibility:visible;transition:opacity .55s ease,visibility 0s}
section > :not([style*="position:absolute"]):not([style*="position: absolute"]){position:relative}
section aside{display:none}
p,h1,h2,h3,h4{font-family:Inter,Arial,sans-serif}
img{display:block}
section.active [data-build-in^="pop"]{animation:pop .7s cubic-bezier(.2,.9,.3,1.3) both;animation-delay:var(--d,0s)}
section.active [data-build-in^="fade"]{animation:fade .8s ease both;animation-delay:var(--d,0s)}
@keyframes pop{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:none}}
@keyframes fade{from{opacity:0}to{opacity:1}}
.skip{position:absolute;right:64px;bottom:56px;z-index:5;display:flex;align-items:center;gap:12px;padding:16px 30px;border-radius:40px;
  border:2px solid #f24f20;background:rgba(35,31,32,.72);color:#faf8f6;font:600 26px Inter,Arial,sans-serif;cursor:pointer;backdrop-filter:blur(6px);transition:background .2s}
.skip span{font-size:34px;line-height:0;color:#f24f20}
.skip:hover{background:#f24f20} .skip:hover span{color:#faf8f6}
/* kontrol çubuğu */
#bar{position:fixed;left:50%;bottom:18px;transform:translateX(-50%);display:flex;gap:6px;align-items:center;padding:6px;border-radius:14px;
  background:rgba(28,25,26,.86);border:1px solid #4a4445;z-index:20;transition:opacity .3s;font:500 14px Inter,Arial,sans-serif}
#bar.hide{opacity:0;pointer-events:none}
#bar button{all:unset;cursor:pointer;color:#faf8f6;padding:8px 12px;border-radius:9px;min-width:20px;text-align:center}
#bar button:hover{background:#3a3536} #bar button:focus-visible{outline:2px solid #f24f20}
#count{color:#c4bebc;padding:0 8px;min-width:64px;text-align:center}
#prog{position:fixed;left:0;top:0;height:3px;background:#f24f20;z-index:20;transition:width .4s}
#notes{position:fixed;left:50%;bottom:76px;transform:translateX(-50%);width:min(900px,92vw);max-height:40vh;overflow:auto;padding:18px 22px;border-radius:14px;
  background:rgba(28,25,26,.95);border:1px solid #4a4445;color:#e6e1df;font:400 16px/1.55 Inter,Arial,sans-serif;z-index:21;display:none}
#notes.open{display:block} #notes b{color:#f24f20;font-weight:600;display:block;margin-bottom:6px;font-size:13px;letter-spacing:1.5px;text-transform:uppercase}
#start{position:fixed;inset:0;z-index:30;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:28px;background:rgba(20,18,19,.78);backdrop-filter:blur(4px)}
#start button{all:unset;cursor:pointer;display:flex;align-items:center;gap:14px;padding:18px 40px;border-radius:44px;background:#f24f20;color:#faf8f6;font:700 22px Montserrat,Arial,sans-serif;box-shadow:0 10px 40px rgba(242,79,32,.35)}
#start button:hover{filter:brightness(1.08)}
#start p{color:#c4bebc;font:400 15px Inter,Arial,sans-serif;text-align:center;line-height:1.7}
#start kbd{font:600 13px Inter,Arial,sans-serif;border:1px solid #6b6464;border-radius:5px;padding:1px 7px;color:#faf8f6}
#start.gone{display:none}