@font-face { font-family: "Montserrat"; font-weight: 400; font-display: swap; src: url("fonts/Montserrat-Regular.woff2") format("woff2"); }
@font-face { font-family: "Montserrat"; font-weight: 500; font-display: swap; src: url("fonts/Montserrat-Medium.woff2") format("woff2"); }
@font-face { font-family: "Montserrat"; font-weight: 600; font-display: swap; src: url("fonts/Montserrat-SemiBold.woff2") format("woff2"); }
@font-face { font-family: "Montserrat"; font-weight: 700; font-display: swap; src: url("fonts/Montserrat-Bold.woff2") format("woff2"); }
@font-face { font-family: "Montserrat"; font-weight: 800; font-display: swap; src: url("fonts/Montserrat-ExtraBold.woff2") format("woff2"); }
@font-face { font-family: "Montserrat"; font-weight: 900; font-display: swap; src: url("fonts/Montserrat-Black.woff2") format("woff2"); }
:root {
  --bg: #070b18; --panel: rgba(10, 16, 34, 0.92); --line: rgba(255, 255, 255, 0.08);
  --text: #eef2ff; --muted: #9aa6c4; --gold: #ffcc4d; --gold2: #ff9f1a; --good: #6dffa0; --bad: #ff7a6b;
  --font: "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--text); font-family: var(--font); overflow: hidden; }
#app { position: fixed; inset: 0; }
#unity-canvas { width: 100%; height: 100%; display: block; background: var(--bg); outline: none; }

/* Yükleme */
#loading { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  background: radial-gradient(1200px 600px at 50% 40%, #16254d 0%, #070b18 70%); transition: opacity .6s ease; z-index: 5; }
#loading.fade { opacity: 0; pointer-events: none; }
.brand-mark { width: clamp(90px, 14vw, 140px); height: auto; filter: drop-shadow(0 14px 34px rgba(0,0,0,.5)); animation: bob 4.5s ease-in-out infinite; }
@keyframes bob { 0%,100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-9px) rotate(2deg); } }
.brand { white-space: nowrap; font-weight: 900; font-size: clamp(44px, 8vw, 96px); letter-spacing: .06em; }
.brand .b1 { color: var(--text); } .brand .dot { color: var(--gold); margin: 0 .15em; } .brand .b2 { background: linear-gradient(90deg, var(--gold), var(--gold2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.tagline { color: var(--muted); font-size: 18px; letter-spacing: .08em; }
.bar { width: min(420px, 70vw); height: 8px; border-radius: 99px; background: rgba(255,255,255,.08); overflow: hidden; margin-top: 18px; }
#bar-fill { height: 100%; width: 0; background: linear-gradient(90deg, var(--gold), var(--gold2)); border-radius: 99px; transition: width .2s ease; }
#loading-text { color: var(--muted); font-size: 13px; }

/* Modal */
.modal { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(3,6,14,.72); backdrop-filter: blur(6px); z-index: 10; }
.hidden { display: none !important; }
.card { width: min(620px, 92vw); background: var(--panel); border: 1px solid var(--line); border-radius: 18px; padding: 28px 30px; box-shadow: 0 30px 80px rgba(0,0,0,.5); }
.card h1 { margin: 0 0 10px; font-size: 28px; color: var(--gold); }
.card p { line-height: 1.55; margin: 8px 0; }
.card ul { padding-left: 0; list-style: none; margin: 14px 0; } .card li { margin: 6px 0; }
.muted { color: var(--muted); } .small { font-size: 12px; } .card a { color: var(--gold); }
.row { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 18px; }
button { font-family: inherit; font-weight: 700; font-size: 15px; border-radius: 12px; padding: 13px 20px; border: 1px solid transparent; cursor: pointer; transition: transform .08s ease, filter .15s ease, background .15s ease; }
button:hover { filter: brightness(1.12); } button:active { transform: scale(.97); }
button.primary { background: linear-gradient(90deg, var(--gold), var(--gold2)); color: #1a1204; }
button.ghost { background: rgba(255,255,255,.06); color: var(--text); border-color: var(--line); }
.remember { display: flex; gap: 8px; align-items: center; margin-top: 14px; color: var(--muted); font-size: 13px; }

/* Kamera kutusu */
#cam-dock { position: absolute; right: 16px; bottom: 16px; z-index: 4; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
#cam-box { position: relative; width: 240px; aspect-ratio: 4 / 3; border-radius: 12px; overflow: hidden; border: 1px solid var(--line); background: #000; box-shadow: 0 10px 30px rgba(0,0,0,.4); }
#cam-video, #cam-overlay { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scaleX(-1); }
#cam-status { font-size: 12px; padding: 5px 10px; border-radius: 99px; background: var(--panel); border: 1px solid var(--line); color: var(--muted); }
#cam-status[data-state="tracking"] { color: var(--good); } #cam-status[data-state="camera_fail"], #cam-status[data-state="no_pose"] { color: var(--bad); }
.dock-buttons { display: flex; gap: 6px; } .dock-buttons button { padding: 7px 10px; font-size: 15px; background: var(--panel); color: var(--text); border-color: var(--line); }

#toast { position: absolute; left: 50%; top: 18px; transform: translateX(-50%); z-index: 20; background: var(--panel); border: 1px solid var(--line); padding: 10px 18px; border-radius: 12px; font-size: 14px; max-width: 90vw; }
@media (max-width: 700px) { #cam-box { width: 150px; } }