/* ============================================================ SPORSOFT — "SAHNE" v2 v1'de iki ciddi hata vardı, ikisi de burada kapalı: 1. İLK EKRAN BOŞTU. Opaklık --p'ye bağlıydı; sayfa açıldığında --p = 0 olduğu için hero görünmüyordu. Artık HTML'in varsayılanı GÖRÜNÜR. JS varsa üzerine .js gelir ve giriş animasyonu o zaman devreye girer. JS çalışmazsa her şey olduğu gibi durur. 2. METİN GÖRSELİN ÜSTÜNE BİNİYORDU. Görsel position:absolute ile tam ekrandı, metin de ortadaydı; ikisi çakışıyordu. Artık sahne iki sütun: metin bir yanda, görsel öbür yanda. Dar ekranda alt alta, üst üste değil. Hareket kuralı: JS yalnızca --p (0→1) ve .seen yazar; çizim, geçiş ve sönüm CSS'te. ============================================================ */ :root { --bg: #070707; --bg-2: #0C0C0C; --panel: #111; --line: #262626; --hair: #1A1A1A; --red: #FE0000; --ink: #FFFFFF; --sub: #8E9BA0; --dim: #7F8C91; --buz: #DCEFF3; --fh: "Space Grotesk", system-ui, sans-serif; --fb: "Inter", system-ui, sans-serif; --fm: "JetBrains Mono", ui-monospace, monospace; --ease: cubic-bezier(0.22, 1, 0.36, 1); --out: cubic-bezier(0.16, 1, 0.3, 1); } * { margin: 0; padding: 0; box-sizing: border-box; } /* Yumuşak kaydırma varsayılan; yalnızca dokunmatikte kapatılıyor. Parmakla kaydırmayla çakışıp geri sekmeye yol açıyordu. Kural bu yönde yazıldı (fine'da açmak yerine coarse'ta kapatmak): sorgu desteklenmezse masaüstü davranışı korunuyor. */ html { scroll-behavior: smooth; } @media (pointer: coarse) { html { scroll-behavior: auto; } } body { font-family: var(--fb); background: var(--bg); color: var(--ink); line-height: 1.5; overflow-x: clip; -webkit-font-smoothing: antialiased; /* Kaydırma çıpası kapalı: görüş alanının üstündeki bir öğe boyut değiştirdiğinde tarayıcı kaydırmayı birkaç piksel geri alıyor. Sahnelerde sürekli geçiş olduğu için bu sürekli tetikleniyordu. */ overflow-anchor: none; } a { color: inherit; text-decoration: none; } ul { list-style: none; } .mono { font-family: var(--fm); } /* Cok dilli emniyet: Almanca/Felemenkce gibi uzun bilesik kelimeler tek basina satira sigmadiginda kutudan tasmasin. Yalnizca kelime satira sigmiyorsa bolunur; normal metin etkilenmez. */ body { overflow-wrap: break-word; } ::selection { background: var(--red); color: #fff; } :focus-visible { outline: 2px solid var(--red); outline-offset: 3px; } /* ============================================================ ÜST ÇUBUK ============================================================ */ .bar { position: fixed; top: 0; left: 0; right: 0; z-index: 80; display: flex; align-items: center; gap: 16px; padding: 14px clamp(16px, 3vw, 44px); border-bottom: 1px solid transparent; transition: background 0.45s, backdrop-filter 0.45s, border-color 0.45s; } .bar.solid { background: rgba(7, 7, 7, 0.78); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); border-bottom-color: var(--hair); } .bar > a:first-child { display: inline-flex; align-items: center; min-height: 44px; } .bar-sp { flex: 1; } /* Dil secici: 12 dil. Serit halinde sigmadigi icin menu;
oldugu icin JS calismasa da aciliyor. Menu iki sutun, tek sutunda 12 satir mobil ekrani asiyor. */ .dil { position: relative; font-family: var(--fm); font-size: 0.64rem; } .dil > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 0.5em; min-height: 44px; padding: 0 11px; color: var(--ink); letter-spacing: 0.1em; } .dil > summary::-webkit-details-marker { display: none; } .dil > summary::after { content: ""; width: 0.34em; height: 0.34em; flex: none; border-right: 0.1em solid currentColor; border-bottom: 0.1em solid currentColor; rotate: 45deg; translate: 0 -0.12em; } .dil > summary i { font-style: normal; } .dil[open] > summary { color: var(--red); } .dil-mnu { position: absolute; inset-inline-end: 0; top: calc(100% + 6px); z-index: 6; /* Mutlak konumda kutu, kapsayicisi (44px'lik summary) kadar daralip ogeleri ust uste bindiriyordu. */ width: max-content; max-width: 84vw; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px; padding: 6px; border: 1px solid var(--line); border-radius: 10px; background: #0B0B0B; box-shadow: 0 18px 34px -14px #000; } .dil-mnu a { display: flex; align-items: center; gap: 0.7em; white-space: nowrap; min-height: 44px; padding: 0 0.8em; border-radius: 7px; color: var(--sub); transition: background 0.18s, color 0.18s; } .dil-mnu a i { font-style: normal; color: var(--dim); letter-spacing: 0.08em; min-width: 1.6em; } .dil-mnu a:hover { background: #151515; color: var(--ink); } .dil-mnu a[aria-current] { background: #151515; color: var(--ink); } .dil-mnu a[aria-current] i { color: var(--red); } @media (max-width: 380px) { .dil-mnu a { padding: 0 0.55em; gap: 0.45em; } } .prog { position: fixed; top: 0; left: 0; height: 2px; z-index: 90; background: var(--red); width: 0; } .rail { position: fixed; right: clamp(10px, 1.6vw, 22px); top: 50%; translate: 0 -50%; z-index: 70; display: flex; flex-direction: column; gap: 9px; } .rail i { display: block; width: 6px; height: 6px; border-radius: 50%; background: #2C2C2C; transition: background 0.3s, height 0.3s; } .rail i.on { background: var(--red); height: 20px; border-radius: 3px; } @media (max-width: 900px) { .rail { display: none; } } /* ============================================================ SAHNE — iki sütun, çakışma yok ============================================================ */ /* Boşluk svh (sabit): kaydırma matematiği adres çubuğu oynadıkça kaymasın. Sahne dvh (dinamik): çubuk gizlenince ekranı tam doldursun. svh'de bırakılınca sahne ekrandan kısa kalıyor ve altta bir sonraki sahne sızıyordu — "sayfa erken kesilmiş" görüntüsünün sebebi buydu. */ .act { position: relative; height: 148vh; height: 148svh; } .scene { position: sticky; top: 0; height: 100vh; height: 100dvh; display: grid; place-items: center; overflow: hidden; padding: 84px clamp(16px, 3vw, 44px) 48px; } .scene-grid { width: min(1480px, 100%); display: grid; grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr); gap: clamp(26px, 4vw, 76px); align-items: center; } [data-layout="center"] .scene-grid { grid-template-columns: minmax(0, 1fr); max-width: 1060px; justify-items: center; text-align: center; } [data-flip] .col-text { order: 2; } @media (max-width: 900px) { .scene-grid { grid-template-columns: minmax(0, 1fr); gap: 20px; justify-items: center; text-align: center; } [data-flip] .col-text { order: 0; } } .col-text { min-width: 0; width: 100%; } /* Dikey paralaks kaldirildi: kaydirirken gorselin sahneye gore kaymasi "yukari gitme" hissi veriyordu. */ .col-art { min-width: 0; width: 100%; display: grid; place-items: center; } .col-art > svg { width: 100%; height: auto; max-height: 60vh; display: block; } @media (max-width: 900px) { .col-art > svg { max-height: 30vh; } } /* ============================================================ GİRİŞ ANİMASYONU — varsayılan GÖRÜNÜR ============================================================ */ .kicker { font-family: var(--fm); font-size: clamp(0.6rem, 0.95vw, 0.7rem); letter-spacing: 0.3em; text-transform: uppercase; color: var(--red); margin-bottom: clamp(14px, 1.8vw, 22px); display: block; } [data-layout="center"] .kicker { text-align: center; } @media (max-width: 900px) { .kicker { text-align: center; } } .line { font-family: var(--fh); font-weight: 500; font-size: clamp(2.1rem, 5.4vw, 4.6rem); line-height: 1.03; letter-spacing: -0.03em; text-wrap: balance; } .line-sm { font-size: clamp(1.7rem, 3.9vw, 3.1rem); } .under { margin-top: clamp(14px, 1.8vw, 22px); max-width: 44ch; color: var(--sub); font-size: clamp(0.94rem, 1.15vw, 1.06rem); } [data-layout="center"] .under { margin-inline: auto; } @media (max-width: 900px) { .under { margin-inline: auto; } } .line .w { display: inline-block; } .js .line .w { opacity: 0; } .js .seen .line .w { opacity: 1; transition: opacity 0.6s var(--out); transition-delay: calc(var(--i, 0) * 55ms); } .js .kicker, .js .under, .js .store, .js .micro, .js .zincir, .js .steps, .js .panel, .js .probs{ opacity: 0; } .js .seen .kicker, .js .seen .under, .js .seen .store, .js .seen .micro, .js .seen .zincir, .js .seen .steps, .js .seen .panel, .js .seen .probs{ opacity: 1; transition: opacity 0.7s var(--out); } .js .seen .under { transition-delay: 0.16s; } .js .seen .store, .js .seen .zincir, .js .seen .steps, .js .seen .panel, .js .seen .probs{ transition-delay: 0.26s; } .js .seen .micro{ transition-delay: 0.4s; } .js .col-art { opacity: 0; } .js .seen .col-art { opacity: 1; transition: opacity 0.9s var(--out) 0.1s; } /* ============================================================ SAHNE GÖRSELLERİ ============================================================ */ .pitch-line { stroke: #1E1E1E; stroke-width: 2; fill: none; } .grid-line { stroke: #171717; stroke-width: 1; } .trace { stroke: var(--red); stroke-width: 3.5; fill: none; stroke-linecap: round; filter: drop-shadow(0 0 14px rgba(254, 0, 0, 0.6)); stroke-dasharray: var(--len, 1200); stroke-dashoffset: calc(var(--len, 1200) * (1 - clamp(0, calc(var(--p, 0) * 2.1), 1))); } .gate { stroke: #2E2E2E; stroke-width: 2; } .gate-on { stroke: var(--red); } .pulse { animation: pulse 2.6s ease-in-out infinite; } @keyframes pulse { 0%, 100% { opacity: .5; } 50% { opacity: 1; } } .bars rect { fill: #262626; } .pmap circle { fill: #131313; stroke: #2A2A2A; stroke-width: 1.5; } .pmap .best circle { fill: var(--red); stroke: var(--red); filter: drop-shadow(0 0 20px rgba(254,0,0,.6)); } .pmap text { font-family: var(--fm); text-anchor: middle; } .pmap .val { fill: #fff; font-weight: 700; opacity: .82; } .pmap .best .val { opacity: 1; } .pmap .lbl { fill: var(--dim); font-size: 11px; letter-spacing: 1px; } .pmap .best .lbl { fill: var(--red); } .trend-path { stroke: var(--red); stroke-width: 3.5; fill: none; stroke-linecap: round; filter: drop-shadow(0 0 12px rgba(254,0,0,.5)); stroke-dasharray: 640; stroke-dashoffset: calc(640 * (1 - clamp(0, calc(var(--p,0) * 2.1), 1))); } .gps { stroke-width: 2; fill: none; stroke-linecap: round; stroke-dasharray: 1000; } .gps-dim { stroke: #232323; stroke-dashoffset: calc(1000 * (1 - clamp(0, calc(var(--p,0) * 2.2), 1))); } .gps-hot { stroke: var(--red); filter: drop-shadow(0 0 12px rgba(254,0,0,.6)); stroke-dashoffset: calc(1000 * (1 - clamp(0, calc((var(--p,0) - .15) * 2.4), 1))); } /* ============================================================ SAHNE İÇİ BİLEŞENLER ============================================================ */ .probs { display: grid; gap: 0; margin-top: clamp(16px, 2.2vw, 26px); } .probs li { display: grid; grid-template-columns: 32px 1fr; gap: 12px; align-items: start; padding: 12px 0; border-top: 1px solid var(--hair); font-size: clamp(0.85rem, 1vw, 0.95rem); color: var(--sub); text-align: left; } .probs li b { font-family: var(--fm); font-size: 0.6rem; color: var(--red); letter-spacing: 0.12em; padding-top: 3px; } .probs li strong { color: var(--ink); font-weight: 600; } /* ---------- 05 TBS: turetme rayi ---------- Bes kutu yan yanaydi; dar ekranda 3+2 bolunup son iki kutu yetim kaliyordu. Dikey rayda bolunme yok, yukseklik her ekranda ayni ve zincirin bir hesap zinciri oldugu daha net okunuyor. Ray kaydirmayla doluyor, dugumler sirayla kirmiziya donuyor. */ .zincir { list-style: none; position: relative; width: min(30rem, 100%); margin: clamp(20px, 3vw, 32px) auto 0; text-align: left; } .zincir::before, .zincir::after { content: ""; position: absolute; left: 7px; width: 1.5px; top: 1.4rem; bottom: 1.4rem; border-radius: 1px; } .zincir::before { background: var(--line); } .zincir::after { background: var(--red); transform: scaleY(clamp(0, calc(var(--p, 0) * 1.25), 1)); transform-origin: top; } .zincir li { --lit: clamp(0, calc((var(--p, 0) - var(--i) * .14 - .04) * 9), 1); position: relative; display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding: clamp(.5rem, 1.3vh, .85rem) 0 clamp(.5rem, 1.3vh, .85rem) 1.9rem; border-bottom: 1px solid var(--hair); } .zincir li::before { content: ""; position: absolute; left: 1px; top: calc(50% - 6px); width: 11px; height: 11px; border-radius: 50%; background: var(--bg); border: 1.5px solid color-mix(in srgb, var(--red) calc(var(--lit) * 100%), var(--line)); box-shadow: 0 0 0 calc(var(--lit) * 3px) rgba(254, 0, 0, .07); } .zincir span { font-family: var(--fm); font-size: .56rem; letter-spacing: .16em; text-transform: uppercase; color: var(--dim); } .zincir b { font-family: var(--fm); font-size: clamp(.95rem, 2.2vw, 1.1rem); font-weight: 500; color: color-mix(in srgb, var(--ink) calc(var(--lit) * 100%), #4A4A4A); white-space: nowrap; } .zincir .zincir-son { border-bottom: 0; margin-top: .3rem; padding-top: .7rem; border-top: 1px solid rgba(254, 0, 0, .3); } .zincir .zincir-son span { color: var(--red); } .zincir .zincir-son b { font-size: clamp(1.35rem, 3.4vw, 1.7rem); font-weight: 600; color: color-mix(in srgb, var(--red) calc(var(--lit) * 100%), #4A4A4A); } .zincir .zincir-son::before { background: var(--red); border-color: var(--red); } @media (prefers-reduced-motion: reduce) { .zincir::after { transform: none; } .zincir li { --lit: 1; } } .steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(8px, 1vw, 14px); margin-top: clamp(22px, 3vw, 36px); } @media (max-width: 900px) { .steps { grid-template-columns: 1fr 1fr; } } @media (max-width: 520px) { .steps { grid-template-columns: 1fr; } } .steps i { font-style: normal; display: flex; flex-direction: column; gap: 6px; text-align: left; padding: clamp(15px, 1.7vw, 22px); border: 1px solid var(--line); border-radius: 12px; background: #101010; transition: border-color 0.3s, background 0.3s, transform 0.3s var(--out); } .steps i:hover { border-color: rgba(254,0,0,.45); background: #140F0F; transform: translateY(-3px); } .steps i b { font-family: var(--fm); font-size: 0.6rem; letter-spacing: 0.18em; color: var(--red); } .steps i strong { font-family: var(--fh); font-size: clamp(1rem, 1.3vw, 1.16rem); font-weight: 600; } .steps i em { font-style: normal; font-size: clamp(0.78rem, 0.95vw, 0.85rem); color: var(--sub); line-height: 1.45; } .panel { width: 100%; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: #0E0E0E; text-align: left; box-shadow: 0 40px 100px -60px #000; } .ini { font-family: var(--fm); font-size: 0.72rem; text-align: center; padding: 7px 0; background: #161616; border: 1px solid var(--line); border-radius: 6px; } .meta { font-family: var(--fm); font-size: 0.58rem; letter-spacing: 0.1em; color: var(--sub); } .tbs { font-family: var(--fm); text-align: right; } .tbs em { font-style: normal; font-size: 0.5rem; letter-spacing: 0.14em; color: var(--dim); display: block; } .tbs b { font-size: 1.16rem; font-weight: 600; } .tbs.top b { color: var(--red); font-size: 1.32rem; } .store { display: flex; gap: 10px; flex-wrap: wrap; margin-top: clamp(20px, 2.6vw, 30px); } [data-layout="center"] .store { justify-content: center; } @media (max-width: 900px) { .store { justify-content: center; } } .store a { position: relative; overflow: hidden; display: inline-flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 20px 0 16px; background: #121212; border: 1px solid rgba(254, 0, 0, 0.42); border-radius: 9px; transition: transform 0.24s var(--out), border-color 0.24s, box-shadow 0.24s; } .store a::after { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 40%, rgba(255,255,255,.09) 50%, transparent 60%); transform: translateX(-120%); } .store a:hover { transform: translateY(-3px); border-color: var(--red); box-shadow: 0 16px 36px -18px rgba(254,0,0,.75); } .store a:hover::after { transition: transform 0.7s var(--out); transform: translateX(120%); } .store span { display: flex; flex-direction: column; line-height: 1.2; font-weight: 600; font-size: 0.95rem; text-align: left; } .store small { font-family: var(--fm); font-size: 0.55rem; letter-spacing: 0.14em; color: var(--sub); font-weight: 400; } .micro { margin-top: 16px; font-size: 0.79rem; color: var(--dim); } .hint { position: absolute; bottom: 22px; left: 50%; translate: -50% 0; font-family: var(--fm); font-size: 0.54rem; letter-spacing: 0.26em; color: var(--dim); display: flex; flex-direction: column; align-items: center; gap: 8px; opacity: clamp(0, calc((1 - var(--p, 0)) * 2.2), 1); } .hint::after { content: ""; width: 1px; height: 30px; background: linear-gradient(var(--dim), transparent); animation: drop 1.9s ease-in-out infinite; } @keyframes drop { 0%, 100% { transform: scaleY(0.4); transform-origin: top; opacity: .4; } 50% { transform: scaleY(1); opacity: 1; } } /* ============================================================ DETAY ============================================================ */ .detail { padding: clamp(64px, 8vw, 120px) clamp(16px, 3vw, 44px) 0; background: var(--bg-2); border-top: 1px solid var(--hair); } .detail-in { width: min(1080px, 100%); margin-inline: auto; } .detail h2 { font-family: var(--fh); font-size: clamp(1.6rem, 3vw, 2.4rem); font-weight: 500; letter-spacing: -0.02em; margin-bottom: 8px; } .detail > .detail-in > p { color: var(--sub); max-width: 56ch; margin-bottom: 32px; } .plans { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 14px; } @media (max-width: 760px) { .plans { grid-template-columns: 1fr; } } .plan { border: 1px solid var(--line); border-radius: 12px; padding: 26px; background: var(--panel); } .plan-pro { border-color: rgba(254, 0, 0, 0.4); background: linear-gradient(168deg, #171111, var(--panel) 60%); } .plan .tag { font-family: var(--fm); font-size: 0.57rem; letter-spacing: 0.18em; color: var(--dim); text-transform: uppercase; } .plan-pro .tag { color: var(--red); } .plan .amt { font-family: var(--fh); font-size: clamp(1.9rem, 4vw, 2.7rem); font-weight: 500; margin: 12px 0 4px; } .plan .per { font-family: var(--fm); font-size: 0.57rem; letter-spacing: 0.16em; color: var(--dim); text-transform: uppercase; } .plan ul { margin-top: 18px; display: grid; gap: 8px; } .plan li { font-size: 0.86rem; color: var(--sub); padding-left: 16px; position: relative; } .plan li::before { content: ""; position: absolute; left: 0; top: 8px; width: 7px; height: 1px; background: var(--red); } .acc { border-top: 1px solid var(--hair); margin-top: 12px; } .acc details { border-bottom: 1px solid var(--hair); } .acc summary { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 18px 2px; cursor: pointer; list-style: none; font-size: 0.95rem; font-weight: 500; min-height: 44px; transition: color 0.2s; } .acc summary::-webkit-details-marker { display: none; } .acc summary::after { content: "+"; font-family: var(--fm); color: var(--red); } .acc details[open] summary::after { content: "−"; } .acc summary:hover { color: var(--red); } .acc .body { padding: 0 2px 18px; color: var(--sub); font-size: 0.88rem; max-width: 74ch; } .acc .body p + p { margin-top: 10px; } .acc .body ul { display: grid; gap: 7px; margin-top: 8px; } .acc .body li { padding-left: 16px; position: relative; } .acc .body li::before { content: ""; position: absolute; left: 0; top: 9px; width: 7px; height: 1px; background: var(--red); } .foot { margin-top: clamp(50px, 7vw, 84px); border-top: 1px solid var(--hair); padding: 30px 0 34px; display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 26px; font-size: 0.82rem; color: var(--dim); width: min(1080px, 100%); margin-inline: auto; } @media (max-width: 760px) { .foot { grid-template-columns: 1fr; } } .foot h4 { font-family: var(--fm); font-size: 0.57rem; letter-spacing: 0.18em; color: var(--sub); text-transform: uppercase; font-weight: 500; margin-bottom: 6px; min-height: 22px; display: flex; align-items: center; } .foot > div > p { min-height: 44px; display: flex; align-items: center; } /* Ritim satirin kendisinde: 44px dokunma yuksekligi yalnizca 'da olunca MERSIS gibi baglantisiz satirlar sikisip liste dagiliyordu. */ .foot ul { list-style: none; } .foot li { min-height: 44px; display: flex; align-items: center; } .foot a { display: inline-flex; align-items: center; min-height: 44px; transition: color 0.2s; } .foot a:hover { color: var(--ink); } .legal { grid-column: 1/-1; border-top: 1px solid var(--hair); margin-top: 6px; padding-top: 18px; font-size: 0.74rem; line-height: 1.7; } /* ============================================================ HAREKET KISITLI ============================================================ */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .act{ height: auto; } .scene { position: static; height: auto; padding: 70px clamp(16px,3vw,44px); } .js .line .w, .js .kicker, .js .under, .js .store, .js .micro, .js .zincir, .js .steps, .js .panel, .js .probs, .js .col-art{ opacity: 1; } .trace, .trend-path, .gps { stroke-dashoffset: 0; } .hint, .pulse { display: none; animation: none; } } /* ============================================================ 13 TEST LİSTESİ ============================================================ */ .tests { list-style: none; padding: 0; margin-top: clamp(12px, 1.8vw, 22px); width: 100%; text-align: left; display: grid; grid-template-rows: repeat(7, auto); grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); column-gap: clamp(14px, 3vw, 44px); counter-reset: test; } .tests li { position: relative; padding: clamp(4px, .8vw, 8px) 0 clamp(4px, .8vw, 8px) 2.1em; border-top: 1px solid var(--hair); font-size: clamp(.78rem, 1vw, .9rem); } /* sira agirliga gore: numara bu yuzden gorunuyor */ .tests li::after { content: counter(test, decimal-leading-zero); counter-increment: test; position: absolute; left: 0; top: 50%; translate: 0 -50%; font-family: var(--fm); font-weight: 600; font-size: .74em; letter-spacing: .06em; color: color-mix(in srgb, var(--red) calc(var(--lit, 0) * 100%), var(--dim)); } /* 13 test 7 + 6 bolunuyor; sutun basinda cizgi olmasin */ .tests li:first-child, .tests li:nth-child(8) { border-top: 0; } /* ust cizgi kaydirmayla kirmizilasir */ .tests li::before { content: ""; position: absolute; left: 0; top: -1px; width: 100%; height: 1px; background: var(--red); transform: scaleX(var(--lit, 0)); transform-origin: left; } .tests li:first-child::before, .tests li:nth-child(8)::before { display: none; } .test-not { margin-top: clamp(10px, 1.5vw, 18px); font-size: clamp(.72rem, 1.5vw, .82rem); line-height: 1.5; color: var(--sub); } /* iki sütunlu madde listesi (veliler) */ .probs-2 { grid-template-columns: 1fr 1fr; column-gap: clamp(20px, 3vw, 44px); } @media (max-width: 760px) { .probs-2 { grid-template-columns: 1fr; } } /* ============================================================ SAHNE İÇİNDE FİYAT KARTLARI Fiyat en altta, açılır listelerin arasında kalıyordu; artık kendi sahnesinde ve karşılaştırmalı duruyor. ============================================================ */ .scene .plans { width: 100%; max-width: 900px; margin: clamp(18px, 2.4vw, 28px) auto 0; gap: 10px; } .scene .plan { padding: clamp(15px, 1.9vw, 24px); text-align: left; } .scene .plan .amt { font-size: clamp(1.7rem, 3.2vw, 2.4rem); margin: 8px 0 3px; } .scene .plan li { font-size: clamp(0.76rem, 0.92vw, 0.85rem); } .scene .plan ul { margin-top: 14px; gap: 7px; } .js .scene .plans { opacity: 0; } .js .seen .plans { opacity: 1; transition: opacity .7s var(--out) .26s; } /* Kurucu 500 rozeti */ /* Kurucu 500 madalyonu: alti kose govde, ic kazima cizgi, kose tirnaklari. Dis hat kaydirdikca ciziliyor. */ .rozet-dis { stroke: var(--red); stroke-width: 3; fill: rgba(254, 0, 0, .045); } .rozet-ic { stroke: rgba(254, 0, 0, .3); stroke-width: 1.6; fill: none; } .rozet-ic2 { stroke: var(--line); stroke-width: 1; fill: none; } .rozet-tirnak line { stroke: var(--red); stroke-width: 3.4; stroke-linecap: round; } .rozet-ayrac { stroke: rgba(254, 0, 0, .34); stroke-width: 1.4; } .rozet-500 { fill: #FFFFFF; font-family: var(--fh); text-anchor: middle; } .rozet-ust { fill: var(--red); font-family: var(--fm); text-anchor: middle; letter-spacing: 11px; font-weight: 600; } /* ============================================================ DAR EKRAN — dikey boşluklar sıkılaştırıldı 100svh sahnede kısa içerik çok fazla boşluk bırakıyordu. ============================================================ */ @media (max-width: 900px) { .act { height: 134svh; } /* Ölçü, adres çubuğu AÇIKKEN kalan yüksekliğe göre verilir (390x664 gibi). Çubuk gizlenince fazladan yer nefes payı olur. */ .scene { padding: 56px clamp(14px, 3vw, 44px) 22px; } .scene-grid { gap: 13px; } .line { font-size: clamp(1.85rem, 7.4vw, 2.5rem); } .line-sm { font-size: clamp(1.5rem, 6vw, 2rem); } .under { font-size: 0.9rem; } .micro { font-size: 0.74rem; } .col-art > svg { max-height: 27svh; } .scene:has(.pmap) .col-art > svg { max-height: 34svh; } .probs li { padding: 7px 0; font-size: 0.8rem; } .probs li b { font-size: 0.55rem; } .steps { gap: 7px; } .steps i { padding: 11px 12px; gap: 3px; } .steps i em { font-size: 0.72rem; line-height: 1.35; } .steps i strong { font-size: 0.92rem; } .win-tools{ padding: 9px 12px; } .wrow { padding: 8px 12px; } /* Beşinci satır dar ekranda düşer; liste yine liste gibi okunuyor. */ .scene .plan { padding: 12px 13px; } .scene .plan .amt { font-size: 1.5rem; margin: 5px 0 2px; } .scene .plan ul { margin-top: 8px; gap: 4px; } .scene .plan li { font-size: 0.7rem; line-height: 1.35; padding-left: 13px; } .scene .plans { gap: 7px; margin-top: 10px; } .plan .tag, .plan .per { font-size: 0.52rem; } .store a { min-height: 46px; padding: 0 15px 0 12px; } .store span { font-size: 0.86rem; } .kicker { margin-bottom: 11px; } .under { margin-top: 11px; } .store { margin-top: 16px; } .zincir, .steps, .tests { margin-top: 16px; } .probs { margin-top: 11px; } .probs li { padding: 9px 0; } .micro { margin-top: 11px; } .scene .plans { margin-top: 14px; } .hint { bottom: 12px; } /* Kaydırma başına yeniden birleştirme maliyeti: paralaks kapalı. */ /* Sabit çubuğun bulanıklığı, altından geçen her karede yeniden hesaplanıyor. Mobilde opak zemin kullanılıyor. */ .bar.solid { background: #070707; backdrop-filter: none; -webkit-backdrop-filter: none; } } /* ============================================================ ÇOK KISA EKRAN (≤660 px yükseklik) Eski Android ve iPhone SE gibi cihazlarda, adres çubuğu da açıkken kalan yükseklik 600 pikselin altına iniyor. Yalnızca o durumda devreye giren ek sıkıştırma. ============================================================ */ @media (max-width: 900px) and (max-height: 660px) { .line { font-size: clamp(1.6rem, 6.6vw, 2.1rem); } .line-sm { font-size: clamp(1.34rem, 5.4vw, 1.75rem); } .under { font-size: 0.85rem; } .kicker { margin-bottom: 9px; } .col-art > svg { max-height: 26svh; } .mock-hero { max-height: 34svh; } .probs li { padding: 5px 0; font-size: 0.74rem; } .steps i { padding: 9px 10px; } .steps i em { font-size: 0.68rem; } /* Fiyat sahnesinde alt metin başlığın söylediğini tekrar ediyor; dar ekranda kartlara yer açmak için düşüyor. */ .scene:has(.plans) .under { display: none; } .scene .plan li { font-size: 0.66rem; } .scene .plan .amt { font-size: 1.3rem; } .scene .plan { padding: 10px 11px; } } /* ============================================================ SÜREKLİ HAREKET Önceki sürümde her görsel bir eşikte beliriyor, sonra kaydırmanın geri kalanında hiçbir şey olmuyordu; sahneler bu yüzden donuk duruyordu. Buradaki her kural --p'nin TAMAMINA yayılıyor: kaydırdığın sürece bir şey hareket ediyor. ============================================================ */ /* ---------- 01 SORUN: rakam yok, yalnizca yorum ---------- Profil karti bos: butun degerler soru isareti ve hafifce dalgalaniyor. Kaydirdikca sol taraftan yorumlar birer birer geliyor, sayac 0'dan 6'ya cikiyor; olcum sayisi 0'da kaliyor. Sahnenin tamami tek bir seyi soyluyor: cok soz, sifir veri. */ .soru { animation: belirsiz 3.6s ease-in-out infinite; animation-delay: var(--d, 0s); } @keyframes belirsiz { 0%, 100% { opacity: .45; } 50% { opacity: 1; } } .yorum { --g: clamp(0, calc((var(--p, 0) - var(--t, 0)) * 10), 1); opacity: var(--g); transform: translateX(calc((1 - var(--g)) * -24px)); animation: suzul-yorum 9.5s ease-in-out infinite; animation-delay: var(--d, 0s); } @keyframes suzul-yorum { 0%, 100% { translate: 0 0; } 50% { translate: 0 -6px; } } /* ---------- 02 NASIL ÇALIŞIR: adım çubuğu ---------- */ .steps i { position: relative; overflow: hidden; } .steps i::before { content: ""; position: absolute; top: 0; left: 0; height: 2px; background: var(--red); width: 100%; transform-origin: left; transform: scaleX(clamp(0, calc((var(--p, 0) * 5 - var(--i, 0)) * 1.8), 1)); } /* ---------- 03 TESTLER: sırayla yanan noktalar ---------- */ .tests li { --lit: clamp(0, calc((var(--p, 0) * 15 - var(--i, 0)) * 2), 1); } /* ---------- madde listesi: çizgi liste boyunca ilerler ---------- */ .probs li { position: relative; } .probs li::before { content: ""; position: absolute; top: -1px; left: 0; height: 1px; background: var(--red); width: 100%; transform-origin: left; transform: scaleX(clamp(0, calc((var(--p, 0) * 5.5 - var(--i, 0)) * 1.7), 1)); } /* ---------- 06 MEVKI: saha uzerinde tarama ALANI ---------- Onceden tek bir cizgiydi; Onat "genis bir tarama alani gibi gorunebilir" dedi. Cizginin arkasina bir koni eklendi. */ .mp-sweep { /* tam tur + 64 derece: supurme KANAT rozetinde (835,190) biter */ transform: rotate(calc(var(--p, 0) * 424deg)); transform-origin: 525px 340px; } .mp-sweep line { stroke: var(--red); stroke-width: 2; stroke-opacity: .5; stroke-linecap: round; filter: drop-shadow(0 0 12px rgba(254, 0, 0, .55)); } .mp-alan { fill: var(--red); fill-opacity: .10; stroke: none; } /* ---------- çizimler bütün kaydırmaya yayılır ---------- */ .trace-yavas { stroke-dashoffset: calc(var(--len, 1200) * (1 - clamp(0, calc(var(--p, 0) * 1.05), 1))); } .trend-yavas { stroke-dashoffset: calc(640 * (1 - clamp(0, calc(var(--p, 0) * 1.1), 1))); } .gps-dim.gps-yavas { stroke-dashoffset: calc(1000 * (1 - clamp(0, calc(var(--p, 0) * 1.15), 1))); } .gps-hot.gps-yavas { stroke-dashoffset: calc(1000 * (1 - clamp(0, calc((var(--p, 0) - .08) * 1.3), 1))); } /* ---------- 12 KURUCU 500: çentik halkası döner ---------- */ /* ---------- 13 FİYAT: kart hâlesi kaydırmayla güçlenir ---------- */ .scene .plan-pro { box-shadow: 0 0 calc(26px + var(--p, 0) * 54px) -24px rgba(254, 0, 0, .85); } @media (prefers-reduced-motion: reduce) { .soru { animation: none; opacity: .8; } .yorum { animation: none; opacity: 1; transform: none; } .mp-sweep, .trace-yavas, .trend-yavas, .gps-yavas { stroke-dashoffset: 0; } .steps i::before, .probs li::before { transform: none; } .tests li { --lit: 1; } } /* FIYAT sahnesi: not uzadi, kisa ekranda giris cumlesi gizlenir. Iki fiyat karti zaten ayni seyi soyluyor; ayni kural 660px'te de var. */ @media (max-width: 900px) and (max-height: 740px) { .scene:has(.plans) .under { display: none; } } /* Kisa ekranda fiyat dipnotu sikisir; dort satirlik yasal not sahneyi 8px tasiriyordu. Renk degismiyor, yalnizca satir araligi. */ @media (max-width: 900px) and (max-height: 700px) { .scene:has(.plans) .micro { font-size: .66rem; line-height: 1.36; margin-top: 8px; } } /* ============================================================ KAPANIS Sahne yalnizca baslik + iki butondan olusunca bos kaliyordu. Arkada tek bir yumusak kirmizi hale var: kaydirmayla cok az buyuyor ve cok az parlıyor, ustune uzun bir nefes biniyor. Bilerek dusuk: etkin kirmizi opaklik en fazla ~0.08, beyaz yazi 4.5 kontrast esiginin cok ustunde kaliyor. Sahne act-short degil tam act; boylece degisim uzun bir kaydirmaya yayiliyor, birden gelmiyor. ============================================================ */ .son-fon { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; } [data-layout="center"] .scene-grid { position: relative; z-index: 1; } .son-fon i { position: absolute; left: 50%; top: 54%; width: 150vmax; height: 150vmax; translate: -50% -50%; scale: calc(.74 + var(--p, 0) * .28); opacity: calc(.3 + var(--p, 0) * .32); background: radial-gradient(circle, rgba(254, 0, 0, .13) 0%, rgba(254, 0, 0, .045) 34%, transparent 62%); animation: son-nefes 11s ease-in-out infinite; } @keyframes son-nefes { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.26); } } @media (prefers-reduced-motion: reduce) { .son-fon i { animation: none; scale: .9; opacity: .5; } } /* 03 TESTLER: ozellik adi ve mevki etiketi kaydirmayla parlar. :hover yalnizca fare olan cihazlarda; dokunmatikte dokunduktan sonra uzerinde kalip "secili" gibi duruyordu. */ .tests li { color: color-mix(in srgb, var(--ink) calc(var(--lit, 0) * 100%), var(--sub)); } @supports not (color: color-mix(in srgb, red 50%, blue)) { .tests li { color: var(--ink); } } @media (hover: hover) { .tests li { transition: opacity .5s var(--out), transform .5s var(--out); } } /* ---------- HERO: degisen kelime ---------- Iki kelime ust uste duruyor, capraz soniyor. Tamamen CSS; JS kapaliyken de calisir, hareket kisitliysa ilk kelimede durur. */ .takas { display: inline-grid; vertical-align: bottom; line-height: inherit; } .takas b { grid-area: 1 / 1; font-weight: inherit; white-space: nowrap; } .takas { overflow: clip; } .takas b:nth-child(1) { animation: takas-a 3.2s cubic-bezier(.6,0,.2,1) infinite; } .takas b:nth-child(2) { animation: takas-b 3.2s cubic-bezier(.6,0,.2,1) infinite; } @keyframes takas-a { 0%, 40% { opacity: 1; translate: 0 0; } 50%, 90% { opacity: 0; translate: 0 -1.15em; } 90.01% { translate: 0 1.15em; } 100% { opacity: 1; translate: 0 0; } } @keyframes takas-b { 0%, 40% { opacity: 0; translate: 0 1.15em; } 40.01% { translate: 0 1.15em; } 50%, 90% { opacity: 1; translate: 0 0; } 100% { opacity: 0; translate: 0 -1.15em; } } /* ---------- HERO: marka cumlesi ---------- */ .slogan { margin-top: clamp(14px, 2vw, 22px); font-size: clamp(.6rem, 1.3vw, .72rem); font-weight: 600; letter-spacing: .26em; text-transform: uppercase; color: var(--red); } @media (prefers-reduced-motion: reduce) { .takas b { animation: none; } .takas b:nth-child(2) { opacity: 0; } } /* 09 KESIF: eklenen garanti notu dort satir; sahneyi 17px tasiriyordu. Not kisaltilmadan, satir araligi ve panel bosluguyla kapatildi. */ @media (max-width: 900px) { .scene:has(.mock-panel) .micro { font-size: .66rem; line-height: 1.36; } .scene:has(.mock-panel) .mock-panel { margin-top: 14px; } } @media (max-width: 900px) and (max-height: 660px) { .scene:has(.mock-panel) .mock-panel { margin-top: 2px; } .scene:has(.mock-panel) .micro { margin-top: 5px; line-height: 1.3; } } /* ---------- 07 DOGRULAMA: 17 noktali poz kaplamasi ---------- Cop adam degil, gercek poz kestirimi ciktisinin gorunumu: yakin taraftaki uzuvlar Sport Red, uzak taraftakiler Ice Blue. Bu ayrim derinligi veriyor ve poz kaplamalarinin standardi. Kare donmus; hareketi --p'ye bagli yatay ilerleme, tarama cizgisi ve takip kutusunun yuruyen tireleri tasiyor. */ /* segmentasyon maskesi: profilden bakilan bir atletin olculeri. Kalinliklar once on gorunume gore verilmisti (govde 52, uyluk 27) ve figur blob gibi duruyordu; profil olculeri cok daha ince. Grup opakligi sayesinde ust uste binen parcalar koyulasmiyor. */ .poz-maske { opacity: .2; } .poz-maske path { fill: none; stroke: var(--red); stroke-linecap: round; stroke-linejoin: round; } .poz-maske ellipse, .poz-maske circle { fill: var(--red); stroke: none; } .m-govde { fill: var(--red); stroke-width: 14; } .m-boyun { stroke-width: 13; } .m-uyluk { stroke-width: 22; } .m-incik { stroke-width: 14; } .m-ayak { stroke-width: 8; } .m-ustkol { stroke-width: 14; } .m-onkol { stroke-width: 11; } .poz-kemik path { fill: none; stroke-linecap: round; stroke-linejoin: round; } .poz-yakin path { stroke: var(--red); stroke-width: 4; } .poz-govde-c path { stroke: var(--red); stroke-width: 3.4; stroke-opacity: .82; } .poz-uzak path { stroke: var(--buz); stroke-width: 3.2; stroke-opacity: .62; } .poz-boyun path { stroke: var(--red); stroke-width: 2; stroke-opacity: .55; } .poz-yuz path { stroke-width: 1.6; stroke: var(--red); stroke-opacity: .6; } .poz-yuz.poz-uzak path { stroke: var(--buz); stroke-width: 1.5; stroke-opacity: .38; } .poz-govde { fill: rgba(254, 0, 0, .1); stroke: none; } /* koyu halka: noktalar cim ve isik uzerinde de okunuyor */ .poz-halka, .poz-halka circle { fill: #080808; fill-opacity: .78; stroke: none; } .poz-n-yakin, .poz-n-yakin circle { fill: var(--red); stroke: none; } .poz-n-uzak, .poz-n-uzak circle { fill: var(--buz); fill-opacity: .74; stroke: none; } .poz-golge { fill: rgba(254, 0, 0, .14); } /* ---------- kosu dongusu ---------- Uzuvlar notr (asagi sarkan) halde cizildi; hareket iki eklemli zincirle veriliyor: kalca etrafinda uyluk, dizin etrafinda incik. Acilar sprint acilari: topuk kalcaya degecek kadar toplaniyor (diz 105 derece), arkaya uzanan uyluk fazla acilmiyor (22). Uzak taraf yarim dongu gecikmeli. Adim suresi .52s. */ .uzuv, .diz-y, .diz-u, .dsk-y, .dsk-u, .poz-zipla { transform-box: view-box; } .bcak-y { transform-origin: 306px 198px; animation: bacak .52s linear infinite; } .bcak-u { transform-origin: 295px 196px; animation: bacak .52s linear infinite -.26s; } .diz-y { transform-origin: 306px 254px; animation: diz .52s linear infinite; } .diz-u { transform-origin: 295px 252px; animation: diz .52s linear infinite -.26s; } .kol-y { transform-origin: 320px 138px; animation: kol .52s linear infinite -.26s; } .kol-u { transform-origin: 309px 136px; animation: kol .52s linear infinite; } .dsk-y { transform-origin: 320px 180px; animation: dirsek .52s linear infinite -.26s; } .dsk-u { transform-origin: 309px 178px; animation: dirsek .52s linear infinite; } .poz-zipla { animation: zipla .26s ease-in-out infinite alternate; } @keyframes bacak { 0% { rotate: -48deg; } /* diz yukarida, topuk toplanmis */ 25% { rotate: -30deg; } /* one uzaniyor */ 50% { rotate: -2deg; } /* govdenin altinda temas */ 75% { rotate: 22deg; } /* itis */ 100% { rotate: -48deg; } } @keyframes diz { 0% { rotate: 105deg; } 25% { rotate: 30deg; } 50% { rotate: 12deg; } 75% { rotate: 38deg; } 100% { rotate: 105deg; } } @keyframes kol { 0%, 100% { rotate: 45deg; } 50% { rotate: -38deg; } } @keyframes dirsek { 0%, 100% { rotate: -85deg; } 50% { rotate: -102deg; } } @keyframes zipla { from { translate: 0 1px; } to { translate: 0 -3px; } } /* Bitis kapisi gecildi: kare donuyor, kosu duruyor. */ .scene.bitti .uzuv, .scene.bitti .diz-y, .scene.bitti .diz-u, .scene.bitti .dsk-y, .scene.bitti .dsk-u, .scene.bitti .poz-zipla { animation-play-state: paused; } /* takip kutusu: yuruyen tireler, kose kancalari */ .atlet-kutu { fill: none; stroke: var(--red); stroke-width: 1.3; stroke-opacity: .34; stroke-dasharray: 8 8; animation: kutu-tire 2.4s linear infinite; } @keyframes kutu-tire { to { stroke-dashoffset: -32; } } .atlet-kose path { fill: none; stroke: var(--red); stroke-width: 2.2; stroke-opacity: .9; } @media (prefers-reduced-motion: reduce) { .atlet-kutu { animation: none; } .uzuv, .diz-y, .diz-u, .dsk-y, .dsk-u, .poz-zipla { animation: none; } .bcak-y { rotate: -2deg; } .diz-y { rotate: 12deg; } .bcak-u { rotate: -48deg; } .diz-u { rotate: 105deg; } .kol-y { rotate: -38deg; } .kol-u { rotate: 45deg; } .dsk-y, .dsk-u { rotate: -92deg; } } /* ---------- footer: ETBIS rozeti ---------- */ .etbis { display: inline-flex; align-items: center; gap: .6em; min-height: 44px; padding: .5em .8em; border: 1px solid var(--line); border-radius: 7px; text-decoration: none; transition: border-color .25s; } .etbis:hover { border-color: rgba(254, 0, 0, .5); } .etbis b { font-family: var(--fm); font-weight: 600; font-size: .72rem; letter-spacing: .14em; color: var(--red); } .etbis span { font-size: .68rem; color: var(--sub); } /* JS yoksa --p 0 kalir; test adlari icerik oldugu icin kaydirmaya bagli belirme yalnizca .js altinda. */ /* genis ekranda uc sutun: 5 + 5 + 3 */ @media (min-width: 700px) { .tests { grid-template-rows: repeat(5, auto); max-width: 720px; margin-inline: auto; } .tests li:nth-child(8) { border-top: 1px solid var(--hair); } .tests li:nth-child(8)::before { display: block; } .tests li:nth-child(6), .tests li:nth-child(11) { border-top: 0; } .tests li:nth-child(6)::before, .tests li:nth-child(11)::before { display: none; } .test-not { max-width: 720px; margin-inline: auto; } } /* KESIF sahnesi: panel artik daha buyuk; kisa ekranda giris paragrafi ve panel alt bilgisi yer aciyor. */ @media (max-width: 900px) { .scene:has(.mock-panel) .under { font-size: .84rem; line-height: 1.45; } } @media (max-width: 900px) and (max-height: 700px) { .scene:has(.mock-panel) .win-alt { display: none; } .mock-panel .wrow { min-height: 2.3rem; padding: .32rem 1rem; } .mock-panel .win-chip, .mock-panel .win-q { min-height: 1.8rem; } } /* ============================================================ SAGDAN SOLA (Arapca) Metin, duzen ve maketler cevrilir. Yalniz SVG sahneler LTR kalir: cizimler viewBox koordinatlarina ve --p ile surulen donusumlere bagli, aynalanamaz. SVG icindeki yazi unicode-bidi: plaintext ile kendi yonunde okunur. ============================================================ */ [dir="rtl"] svg { direction: ltr; } [dir="rtl"] svg text { unicode-bidi: plaintext; } [dir="rtl"] .rail { right: auto; left: clamp(10px, 1.6vw, 22px); } /* Kod/olcu dizeleri (P 82, 0-100, TBS) tek parca kalsin. */ [dir="rtl"] .mono, [dir="rtl"] .kicker b { unicode-bidi: isolate; }