Spaces:
Running
Running
| /* ============================================================ | |
| NUMEX CLOCKWORK — Zamanın İçini Gör | |
| Palet: kömür siyahı zemin · altın pirinç · bronz vurgu | |
| Tipografi: geometrik serif başlık (Cormorant yerine sistem serif) | |
| ============================================================ */ | |
| :root { | |
| --ink: #050403; | |
| --ink-2: #0c0907; | |
| --gold: #d8ab5e; | |
| --gold-hi: #f3d79b; | |
| --bronze: #8c5f2e; | |
| --warm: #c9a06a; | |
| --text: #efe6d8; | |
| --text-dim: #a99b88; | |
| --line: rgba(216, 171, 94, 0.18); | |
| --panel-bg: rgba(12, 9, 7, 0.72); | |
| --panel-blur: 18px; | |
| --radius: 14px; | |
| --ease: cubic-bezier(0.22, 0.61, 0.36, 1); | |
| } | |
| * { box-sizing: border-box; } | |
| html, body { | |
| margin: 0; | |
| padding: 0; | |
| height: 100%; | |
| background: radial-gradient(120% 90% at 50% 15%, #17110c 0%, #0a0705 45%, #030202 100%); | |
| color: var(--text); | |
| font-family: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif; | |
| overflow: hidden; | |
| -webkit-font-smoothing: antialiased; | |
| } | |
| body { | |
| position: relative; | |
| touch-action: none; | |
| } | |
| #stage { | |
| position: fixed; | |
| inset: 0; | |
| width: 100%; | |
| height: 100%; | |
| display: block; | |
| z-index: 0; | |
| cursor: grab; | |
| } | |
| #stage:active { cursor: grabbing; } | |
| /* hafif film tane + vinyet katmanı */ | |
| body::after { | |
| content: ""; | |
| position: fixed; | |
| inset: 0; | |
| z-index: 1; | |
| pointer-events: none; | |
| background: | |
| radial-gradient(120% 100% at 50% 45%, transparent 40%, rgba(0,0,0,0.55) 100%), | |
| repeating-linear-gradient(0deg, rgba(255,255,255,0.012) 0 1px, transparent 1px 3px); | |
| mix-blend-mode: multiply; | |
| opacity: 0.85; | |
| } | |
| /* ---------------- Yükleyici ---------------- */ | |
| .loader { | |
| position: fixed; | |
| inset: 0; | |
| z-index: 50; | |
| display: grid; | |
| place-items: center; | |
| background: radial-gradient(90% 70% at 50% 50%, #120d09 0%, #050403 70%); | |
| transition: opacity 0.9s var(--ease), visibility 0.9s; | |
| } | |
| .loader.is-done { opacity: 0; visibility: hidden; } | |
| .loader-inner { | |
| text-align: center; | |
| padding: 24px; | |
| } | |
| .loader-gear { | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| gap: -10px; | |
| margin-bottom: 26px; | |
| height: 96px; | |
| } | |
| .loader-gear svg { | |
| width: 78px; | |
| height: 78px; | |
| color: var(--gold); | |
| filter: drop-shadow(0 0 14px rgba(216,171,94,0.35)); | |
| } | |
| .loader-gear svg:nth-child(1) { animation: spin 7s linear infinite; } | |
| .loader-gear svg:nth-child(2) { width: 56px; height: 56px; margin-left: -18px; margin-top: 34px; color: var(--bronze); animation: spin 4.2s linear infinite reverse; } | |
| .loader-gear svg g { fill: currentColor; } | |
| @keyframes spin { to { transform: rotate(360deg); } } | |
| .loader-title { | |
| font-family: "Cormorant Garamond", "Playfair Display", Georgia, serif; | |
| font-size: clamp(1.5rem, 5vw, 2.4rem); | |
| letter-spacing: 0.34em; | |
| font-weight: 500; | |
| margin: 0 0 6px; | |
| color: var(--gold-hi); | |
| text-indent: 0.34em; | |
| } | |
| .loader-sub { | |
| margin: 0 0 26px; | |
| font-size: 0.8rem; | |
| letter-spacing: 0.28em; | |
| text-transform: uppercase; | |
| color: var(--text-dim); | |
| text-indent: 0.28em; | |
| } | |
| .loader-bar { | |
| width: min(280px, 62vw); | |
| height: 2px; | |
| margin: 0 auto 12px; | |
| background: rgba(216,171,94,0.14); | |
| border-radius: 2px; | |
| overflow: hidden; | |
| } | |
| .loader-bar span { | |
| display: block; | |
| height: 100%; | |
| width: 0%; | |
| background: linear-gradient(90deg, var(--bronze), var(--gold-hi)); | |
| box-shadow: 0 0 12px rgba(243,215,155,0.55); | |
| transition: width 0.35s var(--ease); | |
| } | |
| .loader-hint { | |
| font-size: 0.72rem; | |
| letter-spacing: 0.14em; | |
| color: rgba(169,155,136,0.75); | |
| margin: 0; | |
| } | |
| /* ---------------- Marka ---------------- */ | |
| .brand { | |
| position: fixed; | |
| top: max(18px, env(safe-area-inset-top)); | |
| left: 20px; | |
| z-index: 10; | |
| display: flex; | |
| align-items: center; | |
| gap: 12px; | |
| pointer-events: none; | |
| } | |
| .brand-mark { color: var(--gold); display: flex; } | |
| .brand-mark svg { width: 30px; height: 30px; } | |
| .brand-text { display: flex; flex-direction: column; line-height: 1.15; } | |
| .brand-name { | |
| font-family: "Cormorant Garamond", Georgia, serif; | |
| font-size: 0.98rem; | |
| letter-spacing: 0.22em; | |
| color: var(--gold-hi); | |
| } | |
| .brand-tag { | |
| font-size: 0.62rem; | |
| letter-spacing: 0.18em; | |
| text-transform: uppercase; | |
| color: var(--text-dim); | |
| } | |
| /* ---------------- Dijital okuma ---------------- */ | |
| .readout { | |
| position: fixed; | |
| top: max(18px, env(safe-area-inset-top)); | |
| right: 20px; | |
| z-index: 10; | |
| text-align: right; | |
| font-variant-numeric: tabular-nums; | |
| font-family: "SF Mono", "JetBrains Mono", ui-monospace, monospace; | |
| color: var(--gold-hi); | |
| font-size: clamp(0.95rem, 2.4vw, 1.25rem); | |
| letter-spacing: 0.1em; | |
| /* ★28.10: sütun düzeninde saat, dakika, saniye ve iki nokta alt alta diziliyordu (00 / : / 35 …). */ | |
| display: flex; | |
| flex-wrap: wrap; | |
| justify-content: flex-end; | |
| align-items: baseline; | |
| max-width: 12em; | |
| text-shadow: 0 0 18px rgba(216,171,94,0.35); | |
| pointer-events: none; | |
| } | |
| .readout i { font-style: normal; opacity: 0.4; margin: 0 2px; } | |
| .readout small { | |
| flex-basis: 100%; | |
| margin-top: 2px; | |
| font-size: 0.6rem; | |
| letter-spacing: 0.18em; | |
| text-transform: uppercase; | |
| color: var(--text-dim); | |
| font-family: inherit; | |
| } | |
| /* ---------------- Kontrol paneli ---------------- */ | |
| .panel { | |
| position: fixed; | |
| left: 50%; | |
| bottom: max(22px, env(safe-area-inset-bottom)); | |
| transform: translateX(-50%); | |
| z-index: 12; | |
| display: flex; | |
| align-items: stretch; | |
| gap: 14px; | |
| padding: 12px 16px; | |
| max-width: calc(100vw - 32px); | |
| background: var(--panel-bg); | |
| backdrop-filter: blur(var(--panel-blur)) saturate(140%); | |
| -webkit-backdrop-filter: blur(var(--panel-blur)) saturate(140%); | |
| border: 1px solid var(--line); | |
| border-radius: var(--radius); | |
| box-shadow: 0 18px 50px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.04); | |
| flex-wrap: wrap; | |
| justify-content: center; | |
| } | |
| .panel-group { display: flex; flex-direction: column; gap: 6px; align-items: center; } | |
| .panel-label { | |
| font-size: 0.58rem; | |
| letter-spacing: 0.2em; | |
| text-transform: uppercase; | |
| color: rgba(169,155,136,0.7); | |
| } | |
| .panel-sep { | |
| width: 1px; | |
| align-self: stretch; | |
| background: linear-gradient(180deg, transparent, var(--line), transparent); | |
| margin: 2px 0; | |
| } | |
| .seg { | |
| display: flex; | |
| gap: 3px; | |
| padding: 3px; | |
| background: rgba(0,0,0,0.35); | |
| border: 1px solid rgba(216,171,94,0.12); | |
| border-radius: 9px; | |
| } | |
| .seg-btn { | |
| appearance: none; | |
| border: 0; | |
| background: transparent; | |
| color: var(--text-dim); | |
| font: inherit; | |
| font-size: 0.76rem; | |
| letter-spacing: 0.04em; | |
| padding: 0 12px; | |
| min-width: 42px; | |
| min-height: 34px; | |
| border-radius: 6px; | |
| cursor: pointer; | |
| transition: color 0.2s var(--ease), background 0.2s var(--ease), box-shadow 0.2s var(--ease); | |
| display: inline-flex; | |
| align-items: center; | |
| justify-content: center; | |
| } | |
| .seg-btn:hover { color: var(--gold-hi); background: rgba(216,171,94,0.08); } | |
| .seg-btn.is-active { | |
| color: #1a1208; | |
| background: linear-gradient(180deg, var(--gold-hi), var(--gold)); | |
| box-shadow: 0 2px 12px rgba(216,171,94,0.35); | |
| font-weight: 600; | |
| } | |
| .btn { | |
| appearance: none; | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 8px; | |
| min-height: 42px; | |
| padding: 0 14px; | |
| border-radius: 9px; | |
| border: 1px solid rgba(216,171,94,0.28); | |
| background: rgba(216,171,94,0.06); | |
| color: var(--gold-hi); | |
| font: inherit; | |
| font-size: 0.78rem; | |
| letter-spacing: 0.04em; | |
| cursor: pointer; | |
| transition: background 0.2s var(--ease), color 0.2s var(--ease), border-color 0.2s var(--ease); | |
| } | |
| .btn:hover { background: rgba(216,171,94,0.14); border-color: rgba(216,171,94,0.5); } | |
| .btn.is-active { background: linear-gradient(180deg, var(--gold-hi), var(--gold)); color: #1a1208; border-color: transparent; font-weight: 600; } | |
| .btn-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; box-shadow: 0 0 8px currentColor; } | |
| .icon-btn { | |
| appearance: none; | |
| width: 42px; | |
| height: 34px; | |
| display: inline-grid; | |
| place-items: center; | |
| border-radius: 8px; | |
| border: 1px solid rgba(216,171,94,0.14); | |
| background: rgba(0,0,0,0.3); | |
| color: var(--text-dim); | |
| cursor: pointer; | |
| transition: color 0.2s var(--ease), border-color 0.2s var(--ease), background 0.2s var(--ease); | |
| } | |
| .icon-btn svg { width: 17px; height: 17px; } | |
| .icon-btn:hover { color: var(--gold-hi); border-color: rgba(216,171,94,0.45); background: rgba(216,171,94,0.1); } | |
| .panel-group .icon-btn + .icon-btn { margin-top: 3px; } | |
| #reset-cam, #tour-btn { display: inline-grid; } | |
| .panel-group:last-child { flex-direction: row; gap: 6px; align-items: center; } | |
| /* ---------------- Alt ipucu ---------------- */ | |
| .hint { | |
| position: fixed; | |
| left: 50%; | |
| transform: translateX(-50%); | |
| bottom: 6px; | |
| z-index: 10; | |
| margin: 0; | |
| font-size: 0.62rem; | |
| letter-spacing: 0.1em; | |
| color: rgba(169,155,136,0.5); | |
| white-space: nowrap; | |
| pointer-events: none; | |
| } | |
| .hint kbd { | |
| font-family: inherit; | |
| border: 1px solid rgba(216,171,94,0.25); | |
| border-radius: 4px; | |
| padding: 1px 5px; | |
| color: rgba(239,230,216,0.7); | |
| } | |
| /* ---------------- Duyarlı ---------------- */ | |
| @media (max-width: 900px) { | |
| .panel { gap: 10px; padding: 10px 12px; } | |
| .panel-label { display: none; } | |
| .hint { display: none; } | |
| .brand-tag { display: none; } | |
| } | |
| @media (max-width: 620px) { | |
| .panel { | |
| left: 12px; | |
| right: 12px; | |
| transform: none; | |
| max-width: none; | |
| gap: 8px; | |
| padding: 10px; | |
| justify-content: space-between; | |
| } | |
| .panel-sep { display: none; } | |
| .seg-btn { min-width: 38px; padding: 0 8px; font-size: 0.72rem; } | |
| .btn { font-size: 0.72rem; padding: 0 10px; } | |
| .brand { left: 14px; gap: 8px; } | |
| .readout { right: 14px; font-size: 0.85rem; } | |
| } | |
| @media (max-height: 520px) { | |
| .panel { bottom: 8px; padding: 8px 10px; gap: 8px; } | |
| .hint { display: none; } | |
| } | |
| @media (prefers-reduced-motion: reduce) { | |
| .loader-gear svg { animation: none; } | |
| * { transition-duration: 0.01ms ; } | |
| } | |