/* ============================================================ CEVYRA — "CANLI SİSTEM" v2.1 (sistem.css) Tema katmanlı sürüm: TÜM renkler :root seviyesinde semantik CSS değişkenlerinden okunur. Tema özniteliğiyle yönetilir — koyu temaya dönüş tek satırdır. Varsayılan: light ("Galeri Aydınlığı"). Yapı, sahne mimarisi ve animasyonlar v2 ile birebir aynıdır. ============================================================ */ /* ---------- 0a. AÇIK TEMA — kurumsal palet (varsayılan) ---------- */ :root, html[data-theme="light"] { --bg: #f5f1e8; /* krem — galeri duvarı */ --bg-panel: #f4f6fc; /* soğuk beyaz — kart/panel */ --text: #0b1f3a; /* koyu lacivert — ana metin */ --text-dim: rgba(11, 31, 58, .75); --muted: #8E9AA8; /* duman mavisi — yalnız 16px+ */ --label: #16345C; /* küçük mono etiketler (kontrast güvenli) */ --accent: #c20000; /* tek vurgu — kuyumcu titizliğiyle */ --accent-deep: #6e0000; --accent-text: #f5f1e8; /* accent zemin üstü buton metni */ /* Motif: gravür / teknik çizim */ --line: #16345C; /* motif ana çizgisi */ --line-2: #8E9AA8; /* motif ikincil çizgisi */ --node: #c20000; /* düğüm/uç noktaları */ --node-2: #16345C; --hairline: rgba(11, 31, 58, .35); --hairline-dim: rgba(11, 31, 58, .15); --glass-bg: rgba(244, 246, 252, .6); --glass-fill: rgba(11, 31, 58, .03); --glass-stroke: rgba(11, 31, 58, .28); --tint-a: rgba(11, 31, 58, .06); --tint-b: rgba(194, 0, 0, .05); --solid-a: rgba(11, 31, 58, .05); --solid-b: #f4f6fc; --edge-a: rgba(11, 31, 58, .3); --edge-b: rgba(142, 154, 168, .5); --warm: #c20000; /* S06 duygusal vurgu (palet içi) */ --warm-bg: #f4f6fc; --overlay-bg: rgba(245, 241, 232, .96); --panel-grad-1: #f4f6fc; --panel-grad-2: #f5f1e8; /* Işıma yerine gölge: kâğıt üzerine baskı hissi */ --shadow: 0 14px 40px rgba(11, 31, 58, .08); --cursor-ring: #0b1f3a; /* Metin arkası scrim — fark edilmeyecek kadar hafif krem */ --scrim: rgba(245, 241, 232, .55); --serif: 'Fraunces', Georgia, serif; --sans: 'Instrument Sans', system-ui, sans-serif; --mono: 'JetBrains Mono', ui-monospace, Menlo, monospace; --ease: cubic-bezier(0.22, 1, 0.36, 1); --hud: 16px; } /* ---------- 0b. KOYU TEMA — v2 "Mürekkep & Şampanya" seti (birebir) ---------- */ html[data-theme="dark"] { --bg: #14101F; --bg-panel: #1E1733; --text: #F2EEE6; --text-dim: rgba(242, 238, 230, .74); --muted: #8A8497; --label: #8A8497; --accent: #D8BC8A; --accent-deep: #D8BC8A; --accent-text: #14101F; --line: #D8BC8A; --line-2: #7C5CBF; --node: #D8BC8A; --node-2: #7C5CBF; --hairline: rgba(216, 188, 138, .3); --hairline-dim: rgba(216, 188, 138, .14); --glass-bg: rgba(20, 16, 31, .72); --glass-fill: rgba(242, 238, 230, .03); --glass-stroke: rgba(216, 188, 138, .25); --tint-a: rgba(216, 188, 138, .07); --tint-b: rgba(124, 92, 191, .08); --solid-a: #181226; --solid-b: #1E1733; --edge-a: rgba(216, 188, 138, .3); --edge-b: rgba(124, 92, 191, .35); --warm: #e6c791; --warm-bg: #2a1c33; --overlay-bg: rgba(20, 16, 31, .96); --panel-grad-1: #1E1733; --panel-grad-2: #14101F; --shadow: none; --cursor-ring: #D8BC8A; --scrim: rgba(20, 16, 31, .45); } * { margin: 0; padding: 0; box-sizing: border-box; } body { background: var(--bg); color: var(--text); font-family: var(--sans); line-height: 1.65; overflow-x: hidden; -webkit-font-smoothing: antialiased; transition: background .45s var(--ease), color .45s var(--ease); } a { color: inherit; text-decoration: none; } button { font-family: inherit; } svg { display: block; } :focus-visible { outline: 1px solid var(--accent); outline-offset: 3px; } ::selection { background: var(--hairline-dim); } /* ---------- 1. HUD — kalıcı sistem arayüzü ---------- */ .hud { position: fixed; inset: 0; z-index: 900; pointer-events: none; } .hud-frame { position: absolute; inset: var(--hud); border: 1px solid var(--hairline-dim); } .hud-logo { position: absolute; top: calc(var(--hud) + 14px); left: calc(var(--hud) + 20px); font-family: var(--serif); font-size: 1.2rem; letter-spacing: .1em; pointer-events: auto; } .hud-logo i { font-style: normal; color: var(--accent); } .hud-counter { position: absolute; top: calc(var(--hud) + 18px); right: calc(var(--hud) + 20px); font-family: var(--mono); font-size: .62rem; letter-spacing: .22em; color: var(--label); text-transform: uppercase; } .hud-counter b { color: var(--accent); font-weight: 400; } .hud-bottom { position: absolute; left: calc(var(--hud) + 20px); right: calc(var(--hud) + 20px); bottom: calc(var(--hud) + 12px); display: flex; align-items: center; justify-content: space-between; gap: 18px; pointer-events: auto; } .hud-progress { flex: 1; height: 1px; background: var(--hairline-dim); position: relative; overflow: hidden; } .hud-progress i { position: absolute; inset: 0; background: var(--accent); transform-origin: left; transform: scaleX(0); } .hud-meta { font-family: var(--mono); font-size: .56rem; letter-spacing: .14em; color: var(--label); white-space: nowrap; } .hud-meta a:hover { color: var(--accent); } .hud-map-btn, .hud-theme-btn { font-family: var(--mono); font-size: .6rem; letter-spacing: .22em; text-transform: uppercase; background: var(--glass-bg); border: 1px solid var(--hairline); padding: 10px 16px; cursor: pointer; transition: background .35s var(--ease), color .35s var(--ease); box-shadow: var(--shadow); } .hud-map-btn { color: var(--accent); } .hud-map-btn:hover { background: var(--accent); color: var(--accent-text); } .hud-theme-btn { color: var(--label); } .hud-theme-btn:hover { border-color: var(--accent); color: var(--accent); } /* Tema anahtarını gizlemek istersen tek satır: .hud-theme-btn { display: none; } */ /* ---------- 2. Özel imleç ---------- */ .cursor { position: fixed; top: 0; left: 0; z-index: 1200; pointer-events: none; display: none; } @media (hover: hover) and (pointer: fine) { .cursor { display: block; } } .cursor-ring { position: absolute; top: -14px; left: -14px; width: 28px; height: 28px; border: 1px solid var(--cursor-ring); border-radius: 50%; transition: transform .3s var(--ease), background .3s var(--ease), border-color .3s var(--ease); } .cursor-label { position: absolute; top: -8px; left: 18px; font-family: var(--mono); font-size: .56rem; letter-spacing: .2em; color: var(--accent); opacity: 0; transition: opacity .3s var(--ease); white-space: nowrap; } .cursor.active .cursor-ring { transform: scale(1.8); } .cursor.active .cursor-label { opacity: 1; } /* Açık temada tıklanabilir öğe: halka içi kırmızı noktaya döner */ html[data-theme="light"] .cursor.active .cursor-ring { transform: scale(.6); background: var(--accent); border-color: var(--accent); } /* ---------- 3. Sahne mimarisi ---------- */ .stage-wrap { position: relative; } #track { display: flex; flex-direction: column; } .scene { position: relative; min-height: 100vh; min-height: 100svh; width: 100%; display: flex; align-items: center; overflow: hidden; padding: calc(var(--hud) + 60px) calc(var(--hud) + 24px); } @media (min-width: 769px) { body.horizontal #track { flex-direction: row; width: max-content; /* görünür sahne sayısı × 100vw — sabit değer yok, gizli sahneler otomatik düşer */ height: 100vh; } body.horizontal .scene { width: 100vw; height: 100vh; flex: 0 0 100vw; } } body:not(.horizontal) #track { scroll-snap-type: none; } .scene-inner { width: 100%; max-width: 1500px; margin: 0 auto; display: grid; grid-template-columns: 40% 57%; gap: 3%; align-items: center; height: 100%; } .scene-inner.flip { grid-template-columns: 57% 40%; } /* Metin bloğu arkasına çok hafif scrim (özellikle S01 sol / S04 sol-alt) */ .scene-copy { position: relative; } .scene-copy::before { content: ""; position: absolute; inset: -30px -36px; background: radial-gradient(ellipse at 42% 42%, var(--scrim) 0%, transparent 74%); z-index: -1; pointer-events: none; } .scene-copy .s-eyebrow { display: block; font-family: var(--mono); font-size: .62rem; letter-spacing: .3em; text-transform: uppercase; color: var(--accent); margin-bottom: 1.4rem; } .scene-copy h2 { font-family: var(--serif); font-weight: 300; font-size: clamp(1.9rem, 3.6vw, 3.2rem); line-height: 1.08; letter-spacing: -.01em; margin-bottom: 1rem; } .scene-copy h2 em { font-style: italic; color: var(--accent); } .scene-copy p { color: var(--text-dim); max-width: 42ch; font-size: 1rem; } /* Palet uyumlu yıldız işareti (⭐ emoji yerine — iki temada da accent rengi) */ .star-mark { font-style: normal; color: var(--accent); } /* Açık zeminde serif bir tık daha dolgun otursun diye italik vurgular lacivert kalır, yalnız em rengi accent'tir; başlık ağırlığı her iki temada aynıdır (yapı korunur). */ .micro-cta { display: inline-flex; align-items: center; gap: 10px; margin-top: 1.6rem; font-family: var(--mono); font-size: .64rem; letter-spacing: .2em; text-transform: uppercase; color: var(--text); border-bottom: 1px solid var(--hairline); padding-bottom: 6px; background: none; border-top: none; border-left: none; border-right: none; cursor: pointer; transition: color .35s var(--ease), border-color .35s var(--ease); } .micro-cta::after { content: "→"; color: var(--accent); } .micro-cta:hover { color: var(--accent); border-color: var(--accent); } .scene-visual { position: relative; height: min(72vh, 640px); border: 1px solid var(--hairline-dim); background: radial-gradient(120% 100% at 50% 0%, var(--panel-grad-1), var(--panel-grad-2) 75%); overflow: hidden; box-shadow: var(--shadow); transition: transform .2s var(--ease); } .scene-visual svg { width: 100%; height: 100%; } .scene.beat .scene-visual { transform: scale(1.015); } /* ---------- 3b. Görsel bağlama (v2.1 medya) ---------- */ .scene-visual picture, .scene-04 .bleed picture { position: absolute; inset: 0; } .scene-visual picture img, .scene-04 .bleed picture img { width: 100%; height: 100%; object-fit: cover; display: block; } /* Mobil kırpma odakları (16:9 görsel dikey kadraja girince) */ .scene-01 .scene-visual picture img { object-position: 72% center; } /* motif sağda */ .scene-04 .bleed picture img { object-position: 70% center; } /* makine sağda */ .scene-06 .scene-visual picture img { object-position: center; } /* QR standı merkezde */ .scene-07 .scene-visual picture img { object-position: center; } /* eller merkezde */ /* Bindirme yuvaları — src verilip hidden kaldırılınca aktifleşir. Koordinatlar mevcut -v kadrajlarına göredir; gerçek mockup bindirilirken ince ayar yapılır. Mobil kırpmada konum kayacağı için ≤768px'te gizli. */ .mock-slot { position: absolute; object-fit: cover; z-index: 2; } .mock-slot[hidden] { display: none; } .mock-laptop { left: 47%; top: 22.5%; width: 26%; height: 31%; transform: perspective(1200px) rotate(8.5deg) rotateY(-6deg); } .mock-phone { left: 28%; top: 49.5%; width: 10.5%; height: 20%; transform: perspective(900px) rotate(24deg) rotateY(8deg); } .qr-slot { position: absolute; left: 50.2%; top: 61.4%; width: 6.8%; height: 10.6%; z-index: 2; display: block; } .qr-slot[hidden] { display: none; } .qr-slot img { width: 100%; height: 100%; object-fit: contain; } /* Geliştirme etiketi: üretimde gizli; yalnızca ?debug=1 ile görünür */ .visual-tag { display: none; position: absolute; bottom: 12px; left: 14px; font-family: var(--mono); font-size: .54rem; letter-spacing: .18em; color: var(--label); opacity: .7; text-transform: uppercase; } body.debug .visual-tag { display: block; } /* ---------- 4. Sahne 01 ---------- */ .scene-01 h1 { font-family: var(--serif); font-weight: 300; font-size: clamp(2.6rem, 5.8vw, 5.2rem); line-height: 1.02; letter-spacing: -.02em; margin-bottom: 1.4rem; } .scene-01 h1 em { font-style: italic; color: var(--accent); } .scene-01 h1 .w { display: block; overflow: hidden; } .scene-01 h1 .w > span { display: inline-block; transform: translateY(110%); } body.loaded .scene-01 h1 .w > span { transform: translateY(0); transition: transform 1s var(--ease); } body.loaded .scene-01 h1 .w:nth-child(2) > span { transition-delay: .08s; } body.loaded .scene-01 h1 .w:nth-child(3) > span { transition-delay: .16s; } /* ---------- 5. Sahne 03 — orbit etiketleri ---------- */ .orbit { position: absolute; inset: 0; pointer-events: none; animation: orbit-spin 40s linear infinite; } .orbit span { position: absolute; font-family: var(--mono); font-size: .56rem; letter-spacing: .2em; color: var(--label); background: var(--glass-bg); border: 1px solid var(--hairline-dim); padding: 5px 10px; animation: orbit-counter 40s linear infinite; } @keyframes orbit-spin { to { transform: rotate(360deg); } } @keyframes orbit-counter { to { transform: rotate(-360deg); } } .orbit span:nth-child(1) { top: 6%; left: 42%; } .orbit span:nth-child(2) { top: 30%; right: 2%; } .orbit span:nth-child(3) { bottom: 12%; right: 12%; } .orbit span:nth-child(4) { bottom: 6%; left: 22%; } .orbit span:nth-child(5) { top: 36%; left: 0%; } /* ---------- 6. Sahne 04 — full-bleed imza sahne ---------- */ .scene-04 { padding: 0; } .scene-04 .bleed { position: absolute; inset: 0; } .scene-04 .bleed svg { width: 100%; height: 100%; } .scene-04 .panel { position: absolute; left: calc(var(--hud) + 28px); bottom: calc(var(--hud) + 64px); max-width: 420px; padding: 26px 26px 22px; background: var(--glass-bg); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid var(--hairline-dim); box-shadow: var(--shadow); z-index: 2; } .scene-04 .panel h2 { font-size: clamp(1.5rem, 2.6vw, 2.1rem); } .tag-row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 1.1rem; } .tag-row span { font-family: var(--mono); font-size: .54rem; letter-spacing: .16em; color: var(--label); border: 1px solid var(--hairline-dim); padding: 5px 9px; } /* ---------- 7. Sahne 05 — tek geniş çerçeve + ikiz metin sütunları ---------- */ .stack-05 { width: 100%; max-width: 1500px; margin: 0 auto; height: 100%; display: flex; flex-direction: column; justify-content: center; gap: 28px; } .stack-05 .scene-visual { height: min(52vh, 480px); width: 100%; } .twin-texts { display: grid; grid-template-columns: 1fr 1px 1fr; gap: 30px; align-items: start; } .twin-join { background: linear-gradient(180deg, transparent, var(--accent), transparent); opacity: .45; height: 100%; min-height: 60px; } .twin-texts h2 { font-family: var(--serif); font-weight: 300; font-size: clamp(1.3rem, 2vw, 1.7rem); line-height: 1.2; margin-bottom: .5rem; } .twin-texts h2 em { font-style: italic; color: var(--accent); } .twin-texts p { color: var(--text-dim); font-size: .92rem; max-width: 52ch; } /* ---------- 8. Sahne 06 — sıcak varyant (palet içi) ---------- */ .scene-06 .scene-visual { background: radial-gradient(120% 100% at 50% 10%, var(--warm-bg), var(--bg) 80%); } .scene-06 .s-eyebrow { color: var(--warm); } .scene-06 h2 em { color: var(--warm); } /* Özgüllük: .scene-copy p (0,1,1) kuralının font-size'ı ezmemesi için p.soon-strip */ .scene-copy p.soon-strip { margin-top: 1.8rem; font-family: var(--mono); font-size: .56rem; letter-spacing: .18em; color: var(--label); opacity: .7; text-transform: uppercase; } /* S06 ürün rozeti — beğenilmezse kapatma: display: none; (kod silmeye gerek yok) */ .brand-badge { display: inline-block; margin-top: 1.2rem; font-family: var(--mono); font-size: .56rem; letter-spacing: .22em; color: var(--muted); border: 1px solid var(--hairline); padding: 7px 12px; white-space: nowrap; } /* ---------- 9. Sahne 07 — güven + form ---------- */ .scene-07 .scene-inner { align-items: center; } .assures { display: grid; gap: 22px; margin-top: 1.6rem; } .assure { border-left: 1px solid var(--hairline); padding-left: 18px; } .assure .a-label { display: block; font-family: var(--mono); font-size: .6rem; letter-spacing: .24em; color: var(--accent); margin-bottom: 4px; } .assure p { color: var(--text-dim); font-size: .9rem; max-width: 40ch; } /* Üç kolon: güvenceler | form paneli | tam görünür görsel (yalnızca masaüstü) */ @media (min-width: 769px) { .scene-07 .scene-inner.cols-3 { grid-template-columns: 29% 32% 35%; gap: 2%; } .scene-07 .scene-visual { height: min(64vh, 580px); } } /* Form: düz panel zemini, blur yok — görseli asla örtmez */ .form-panel { background: var(--bg-panel); border: 1px solid var(--hairline-dim); box-shadow: var(--shadow); padding: 22px; } .form-panel h3 { font-family: var(--serif); font-weight: 400; font-size: 1.15rem; margin-bottom: 14px; } .form-panel h3 em { font-style: italic; color: var(--accent); } form { display: grid; gap: 12px; } .two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .field label { display: block; font-family: var(--mono); font-size: .54rem; letter-spacing: .2em; text-transform: uppercase; color: var(--label); margin-bottom: 5px; } .field label i { color: var(--accent); font-style: normal; } input, select, textarea { width: 100%; padding: 10px 2px; background: transparent; border: none; border-bottom: 1px solid var(--hairline-dim); border-radius: 0; color: var(--text); font-family: var(--sans); font-size: .9rem; outline: none; transition: border-color .35s var(--ease); } input::placeholder, textarea::placeholder { color: var(--muted); } input:focus, select:focus, textarea:focus { border-bottom-color: var(--accent); } select { cursor: pointer; } select option { background: var(--bg-panel); color: var(--text); } textarea { min-height: 64px; resize: vertical; } #formMessage { display: none; padding: 10px 12px; font-size: .8rem; border: 1px solid var(--hairline); color: var(--text-dim); } /* Başarı mesajı: serif, sahne diline uygun */ #formMessage.success { font-family: var(--serif); font-style: italic; font-size: 1.02rem; color: var(--text); border-color: var(--accent); } /* KVKK onay satırı */ .form-panel .checkbox { display: flex; gap: 8px; align-items: flex-start; font-size: .78rem; color: var(--text-dim); } .form-panel .checkbox input[type="checkbox"] { width: 15px; height: 15px; margin-top: 2px; accent-color: var(--accent); } .form-panel .checkbox a { text-decoration: underline; } .form-panel .checkbox i { color: var(--accent); font-style: normal; } .form-actions { display: flex; gap: 10px; flex-wrap: wrap; } .btn-line { display: inline-flex; align-items: center; justify-content: center; font-family: var(--mono); font-size: .6rem; letter-spacing: .18em; text-transform: uppercase; color: var(--text); border: 1px solid var(--accent); background: none; padding: 12px 20px; cursor: pointer; transition: background .35s var(--ease), color .35s var(--ease); } .btn-line:hover { background: var(--accent); color: var(--accent-text); } .btn-line:active { background: var(--accent-deep); border-color: var(--accent-deep); color: var(--accent-text); } .btn-ghost { display: inline-flex; align-items: center; justify-content: center; font-family: var(--mono); font-size: .6rem; letter-spacing: .18em; text-transform: uppercase; color: var(--label); border: 1px solid var(--hairline-dim); padding: 12px 20px; transition: color .35s var(--ease), border-color .35s var(--ease); } .btn-ghost:hover { color: var(--accent); border-color: var(--hairline); } /* ---------- 10. Sistem Haritası ---------- */ .map-overlay { position: fixed; inset: 0; z-index: 1100; background: var(--overlay-bg); display: grid; place-items: center; opacity: 0; visibility: hidden; transition: opacity .45s var(--ease), visibility 0s linear .45s; } .map-overlay.open { opacity: 1; visibility: visible; transition: opacity .45s var(--ease); } .map-close { position: absolute; top: 14px; right: 16px; font-size: 1.8rem; /* görsel boyut aynı */ padding: 6px 16px; /* dokunma alanını ≥44x44'e çıkarır */ background: none; border: none; color: var(--muted); cursor: pointer; transition: color .3s var(--ease); } .map-close:hover { color: var(--accent); } .map-title { position: absolute; top: 30px; left: 34px; font-family: var(--mono); font-size: .62rem; letter-spacing: .3em; color: var(--accent); text-transform: uppercase; } .map-grid { position: relative; display: grid; grid-template-columns: repeat(4, minmax(150px, 210px)); gap: 46px 36px; padding: 30px; } .map-wires { position: absolute; inset: 0; pointer-events: none; } .map-wires path { fill: none; stroke: var(--hairline-dim); stroke-width: 1; } .map-node { position: relative; border: 1px solid var(--hairline-dim); background: var(--bg-panel); box-shadow: var(--shadow); padding: 16px; text-align: left; color: var(--text); cursor: pointer; transition: border-color .35s var(--ease), transform .35s var(--ease); } .map-node:hover { border-color: var(--accent); transform: translateY(-3px); } .map-node .m-no { font-family: var(--mono); font-size: .56rem; letter-spacing: .22em; color: var(--accent); } .map-node h4 { font-family: var(--serif); font-weight: 400; font-size: 1rem; margin-top: 6px; } .map-node .m-pad { position: absolute; top: -3px; left: 24px; width: 6px; height: 6px; border-radius: 50%; background: var(--node); opacity: .7; } /* ---------- 11. Placeholder görsel sanatı (tema-duyarlı SVG) ---------- */ .ph-line { fill: none; stroke: var(--line); stroke-width: 1; opacity: .65; } .ph-line.dim { opacity: .3; } .ph-line.am { stroke: var(--line-2); opacity: .55; } .ph-pad { fill: var(--node); opacity: .75; } .ph-pad.am { fill: var(--node-2); } .ph-glass { fill: var(--glass-fill); stroke: var(--glass-stroke); stroke-width: 1; } .ph-text { font-family: var(--mono); font-size: 9px; letter-spacing: .14em; fill: var(--label); } /* Yapı blokları (sahne 03/04) */ .ph-box-a { fill: var(--tint-a); stroke: var(--edge-a); stroke-width: 1; } .ph-box-b { fill: var(--tint-b); stroke: var(--edge-b); stroke-width: 1; } .ph-solid-a { fill: var(--solid-a); } .ph-solid-b { fill: var(--solid-b); stroke: var(--edge-a); stroke-width: 1; } .ph-edge-a { fill: none; stroke: var(--edge-a); stroke-width: 1; } .ph-edge-b { fill: none; stroke: var(--edge-b); stroke-width: 1; } /* Sahne 06 sıcak öğeler (tema-duyarlı: koyu=altın, açık=kırmızı) */ .ph-warm-line { fill: none; stroke: var(--warm); stroke-width: 1; } .ph-warm-fill { fill: var(--warm); } .ph-warm-glass { fill: var(--glass-fill); stroke: var(--warm); stroke-width: 1; opacity: .8; } .float-a { animation: floaty 5s ease-in-out infinite; } .float-b { animation: floaty 6.5s ease-in-out infinite reverse; } .float-c { animation: floaty 8s ease-in-out infinite; } @keyframes floaty { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } } /* ---------- 12. Sahne içi reveal ---------- */ .s-reveal { opacity: 0; transform: translateY(22px); transition: opacity .9s var(--ease), transform .9s var(--ease); } .scene.active .s-reveal { opacity: 1; transform: translateY(0); } .scene.active .s-reveal:nth-child(2) { transition-delay: .08s; } .scene.active .s-reveal:nth-child(3) { transition-delay: .16s; } /* ---------- 13. Hareket azaltma ---------- */ @media (prefers-reduced-motion: reduce) { .s-reveal, .scene-01 h1 .w > span { opacity: 1 !important; transform: none !important; transition: none !important; } .orbit, .orbit span, .float-a, .float-b, .float-c { animation: none !important; } .scene.beat .scene-visual { transform: none; } * { scroll-behavior: auto !important; } } /* ---------- 14. Responsive (≤768px) ---------- */ @media (max-width: 768px) { :root { --hud: 10px; } /* Üst padding = üst HUD şeridi (56px) + pay; alt = alt bant + güvenlik payı */ .scene { padding: calc(var(--hud) + 86px) calc(var(--hud) + 16px) calc(var(--hud) + 100px + env(safe-area-inset-bottom)); } /* Üst HUD şeridi: alt banttaki gibi yarı saydam zemin + blur (logo/sayaç içerikten okunur ayrışır) */ .hud::before { content: ""; position: absolute; top: var(--hud); left: var(--hud); right: var(--hud); height: 56px; background: var(--glass-bg); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--hairline-dim); } /* Gövde metin taban boyutu: 16px altına düşmesin */ .twin-texts p, .assure p { font-size: 1rem; } /* HUD alt bandı: kompakt tek satır + yarı saydam zemin + blur */ .hud-bottom { left: var(--hud); right: var(--hud); bottom: calc(var(--hud) + env(safe-area-inset-bottom)); gap: 10px; padding: 8px 12px; background: var(--glass-bg); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-top: 1px solid var(--hairline-dim); } .hud-map-btn, .hud-theme-btn { font-size: .52rem; letter-spacing: .14em; padding: 8px 10px; white-space: nowrap; } .scene-inner, .scene-inner.flip { grid-template-columns: 1fr; gap: 22px; height: auto; } .scene-inner .scene-visual { order: -1; height: 38vh; } /* S06: rozet + "Sırada" şeridi ilk bakışta ekranda kalsın diye görsel kısaltıldı (32vh, üst HUD şeridinin eklediği padding'le 9px yetersiz kaldı → 30vh) */ .scene-06 .scene-inner .scene-visual { height: 28vh; } /* S06 rozeti mobilde CTA'nın hemen altına: DOM sırası değişmeden flex order ile ("Sırada" şeridi en sona iner; masaüstü blok akışı etkilenmez) */ .scene-06 .scene-copy { display: flex; flex-direction: column; align-items: flex-start; } .scene-06 .scene-copy p.soon-strip { order: 1; } .scene-06 .scene-copy .brand-badge { margin-top: .8rem; } .stack-05 { gap: 20px; justify-content: flex-start; } .stack-05 .scene-visual { height: 30vh; } .twin-texts { grid-template-columns: 1fr; gap: 20px; } .twin-join { display: none; } .scene-04 { padding: 0; } .scene-04 .panel { left: 16px; right: 16px; bottom: 76px; max-width: none; padding: 18px; } .scene-07 .scene-visual { display: none; } /* mobilde form öne çıkar */ .form-panel { padding: 18px; } .two { grid-template-columns: 1fr; } input, select, textarea { font-size: 16px; } .hud-meta { display: none; } .map-grid { grid-template-columns: 1fr 1fr; gap: 18px; padding: 20px; max-height: 80vh; overflow-y: auto; } .orbit { display: none; } .hud-counter { font-size: .52rem; } /* Bindirme yuvaları mobil kırpmada konum tutmaz — gizli */ .mock-slot, .qr-slot { display: none !important; } }