/* SırtlanTech Games / Miras — yalnızca görsel katman */
:root{--bg:#090a0d;--card:#141519;--rise:#101115;--hi:#1d1f24;--line:#ffffff16;--orange:#ff6a00;--deep:#dc5500;--cyan:#00c8d7;--white:#f5f4f2;--muted:#a19ea7}
html{scroll-behavior:smooth}
body{padding:20px 18px 72px;background:radial-gradient(ellipse 700px 450px at 50% -140px,#ff6a001b,transparent 72%),linear-gradient(90deg,#ffffff04 1px,transparent 1px),linear-gradient(#ffffff04 1px,transparent 1px),var(--bg);background-size:auto,48px 48px,48px 48px,auto}
.stage{max-width:850px}
.bar{min-height:66px;padding:10px 18px;margin-bottom:44px;border-radius:15px;background:#111216e8;border-color:#ffffff20;box-shadow:0 12px 35px #0003}
.brand{display:inline-flex;align-items:center;gap:11px;color:var(--white);text-decoration:none;font:800 14px Poppins,sans-serif;letter-spacing:-.03em}
.brand-mark{width:40px;height:40px;display:grid;place-items:center;border-radius:11px;border:1px solid #ff6a0038;background:#ff6a000b}
.brand-mark img{width:30px;height:30px;object-fit:contain;transition:transform .2s}
.brand:hover img{transform:scale(1.08)}
.brand-name span{color:var(--orange)}
.pill{font:700 10px Inter,sans-serif;letter-spacing:.14em;color:var(--orange);text-align:right}
.screen.active{animation:up .35s ease}
.hero{position:relative;padding:8px 0 33px}
.hero:before{content:'GAMES LAB  /  EXPERIENCE 02';display:block;margin-bottom:20px;color:var(--orange);font:700 10px Inter,sans-serif;letter-spacing:.2em}
.hero .mascot{display:inline-block;font-size:62px;margin:0 0 10px}
.hero h1{font-size:clamp(64px,12vw,105px);line-height:.96;letter-spacing:-.075em;margin:7px 0 15px;font-weight:800}
.hero h1:after{content:'.';color:var(--orange)}
.hero .sub{font-size:14px;line-height:1.7}
.grid{gap:16px}
.panel,.card{border-radius:17px;border-color:#ffffff19;background:linear-gradient(145deg,#191a1f,#111216);box-shadow:0 12px 28px #0000001c}
.card{position:relative;min-height:165px;padding:25px;overflow:hidden}
.card:before{content:'EXPLORE  ↗';position:absolute;right:22px;top:22px;color:#ff6a008c;font:700 9px Inter,sans-serif;letter-spacing:.12em}
.card:hover{background:linear-gradient(145deg,#202026,#141519);border-color:#ff6a0080;box-shadow:0 15px 40px #ff6a0010}
.card .icon{width:48px;height:48px;display:grid;place-items:center;background:#ff6a000d;border:1px solid #ff6a002b;border-radius:13px}
.card .name{font-size:20px;margin-top:15px;letter-spacing:-.035em}
.card .desc{font-size:12px;margin-top:6px}
.btn{background:linear-gradient(135deg,var(--orange),var(--deep));border-radius:12px;padding:15px 20px;box-shadow:0 6px 20px #ff6a001a}
.btn.ghost{background:#17181c;border:1px solid #ffffff25;color:var(--white);box-shadow:none}
.btn.ghost:hover{border-color:#ff6a0080;background:#201a17}
#mirasCities>.btn{margin-top:22px}
#miras>.panel{padding:clamp(18px,4vw,34px)}
.mirasHero{padding:12px 4px 25px;border-bottom:1px solid var(--line);margin-bottom:20px}
.mirasHero .mascot{font-size:60px}
.mirasHero h2{font-size:clamp(24px,5vw,35px);letter-spacing:-.045em}
.mirasHero .sub{line-height:1.65}
.cat{display:inline-block;padding:7px 10px;border:1px solid #ff6a0038;border-radius:6px;background:#ff6a000b;font-size:10px;letter-spacing:.12em}
.step h2{font-size:clamp(21px,4vw,28px);letter-spacing:-.035em;margin:17px 0 8px}
.story{font-size:14px;color:#c6c4cb;line-height:1.85;margin-bottom:22px}
.pieces{gap:10px}
.piece{border-radius:10px;border-color:#ffffff2a;background:#1b1c21;padding:14px 17px;min-height:46px}
.piece:hover{background:#292127;border-color:var(--orange)}
.piece.sel{background:#ff6a0022;border-color:var(--orange)}
.feedback{padding:15px;border:1px solid #ffffff10;line-height:1.6}
.seal{border-color:var(--orange);background:radial-gradient(circle,#ff6a0026,transparent 65%)}
.result h2{font-size:clamp(23px,5vw,32px);letter-spacing:-.04em}
.section-title{font-size:12px;margin-top:28px}
.keyitem{background:#18191d;border-color:#ffffff16;padding:14px}
.feedback-box input,.feedback-box textarea{background:#101115;border-color:#ffffff28}
.feedback-box input:focus,.feedback-box textarea:focus{outline:1px solid var(--orange)}
.star.on{color:var(--orange)}
.toast{border-color:var(--orange);border-radius:12px}
@media(max-width:540px){body{padding:12px 12px 50px}.bar{margin-bottom:28px;padding:9px 11px;min-height:58px}.brand-mark{width:36px;height:36px}.brand-mark img{width:27px;height:27px}.brand-name{font-size:12px}.pill{font-size:9px}.hero{padding-bottom:24px}.hero:before{font-size:9px;margin-bottom:13px}.hero h1{font-size:clamp(62px,17vw,88px)}.grid{grid-template-columns:1fr}.card{min-height:145px}.mirasHero .mascot{font-size:50px}.piece{font-size:13px}}
@media(prefers-reduced-motion:reduce){.mascot,.screen.active,.seal,.seal:before,.seal:after{animation:none!important}*{scroll-behavior:auto!important}}