:root { --ink: #071621; --paper: #f7f8f4; --white: #fff; --mint: #c7ffcf; --aqua: #70e6dc; --teal: #168a8e; --line: rgba(7, 22, 33, .12); --muted: #60727e; --shadow: 0 24px 55px rgba(5, 23, 35, .14); color: var(--ink); background: var(--paper); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; } * { box-sizing: border-box; } html { scroll-behavior: smooth; scroll-padding-top: 88px; } body { min-width: 320px; margin: 0; background: var(--paper); } a { color: inherit; text-decoration: none; } button { color: inherit; font: inherit; } h1,h2,h3,p { margin-top: 0; } .container { width: min(1160px, calc(100% - 48px)); margin-inline: auto; } .sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; } .skip-link { position: fixed; z-index: 40; top: -60px; left: 16px; padding: 11px 16px; border-radius: 9px; background: var(--mint); color: var(--ink); font-weight: 800; } .skip-link:focus { top: 16px; } /* Navigation */ .site-header { position: absolute; z-index: 20; inset: 0 0 auto; border-bottom: 1px solid rgba(255,255,255,.13); color: var(--white); transition: background .2s ease, box-shadow .2s ease; } .site-header.is-sticky { position: fixed; background: rgba(7,22,33,.94); box-shadow: 0 8px 30px rgba(0,0,0,.2); backdrop-filter: blur(14px); } .nav-wrap { display: flex; min-height: 78px; align-items: center; justify-content: space-between; gap: 28px; } .brand { display: inline-flex; align-items: center; gap: 10px; font-size: 1.25rem; font-weight: 850; letter-spacing: -.06em; } .brand > i { position: relative; display: grid; width: 27px; height: 27px; place-items: center; overflow: hidden; border: 2px solid currentColor; border-radius: 10px 10px 10px 3px; transform: rotate(-7deg); } .brand > i::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; transform: translateY(-4px); } .brand > i::after { content: ""; position: absolute; bottom: 5px; width: 11px; height: 4px; border-radius: 3px; background: currentColor; } .brand > span { margin-left: -10px; color: var(--blue-2); } .site-nav { display: flex; align-items: center; gap: 27px; font-size: .9rem; font-weight: 720; } .site-nav > a:not(.nav-cta) { opacity: .76; transition: opacity .2s ease; }.site-nav > a:not(.nav-cta):hover { opacity: 1; } .nav-cta { padding: 11px 15px; border: 1px solid rgba(255,255,255,.42); border-radius: 10px; transition: background .2s ease, color .2s ease; }.nav-cta:hover { background: var(--white); color: var(--ink); } .menu-toggle { display: none; } /* Hero */ .hero { position: relative; z-index: 0; min-height: 745px; padding: 170px 0 86px; overflow: hidden; color: var(--white); background: linear-gradient(125deg, #061924 0%, #092f42 55%, #11505a 100%); isolation: isolate; } .eyebrow { display: flex; align-items: center; gap: 9px; margin-bottom: 18px; color: var(--mint); font-size: .72rem; font-weight: 850; letter-spacing: .115em; text-transform: uppercase; } .eyebrow > i { display: block; width: 8px; height: 8px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 5px rgba(199,255,207,.12); }.eyebrow.dark { color: #147579; } h1 { max-width: 720px; margin-bottom: 20px; font-size: clamp(3rem,5.5vw,5.55rem); line-height: .965; letter-spacing: -.075em; } h1 em { color: var(--aqua); font-style: normal; } .hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }.button { display: inline-flex; min-height: 51px; align-items: center; justify-content: center; gap: 13px; padding: 0 20px; border: 1px solid transparent; border-radius: 11px; font-size: .93rem; font-weight: 830; transition: transform .2s ease, box-shadow .2s ease, background .2s ease; }.button:hover { transform: translateY(-2px); } .primary { background: var(--mint); color: var(--ink); box-shadow: 0 13px 30px rgba(0,0,0,.18); }.primary:hover { box-shadow: 0 17px 35px rgba(0,0,0,.25); }.quiet { border-color: rgba(255,255,255,.38); color: var(--white); }.quiet:hover { background: rgba(255,255,255,.11); } /* App artwork */ /* Sections */ .trust-strip { overflow-x: auto; border-bottom: 1px solid var(--line); background: var(--white); }.trust-list { display: grid; grid-template-columns: repeat(3,1fr); }.trust-list p { display: flex; min-height: 84px; align-items: center; gap: 11px; margin: 0; padding: 0 19px; border-left: 1px solid var(--line); color: #536773; font-size: .8rem; font-weight: 760; }.trust-list p:last-child { border-right: 1px solid var(--line); }.trust-list b { color: #22a094; font-family: Georgia,serif; font-size: 1.25rem; font-style: italic; } .section { padding: 120px 0; }.section h2,.final-cta h2 { margin-bottom: 0; font-size: clamp(2.45rem,4.1vw,4.5rem); line-height: .98; letter-spacing: -.07em; }.section h2 span { color: var(--teal); }.split { display: grid; grid-template-columns: 1.1fr .7fr; align-items: end; gap: 70px; margin-bottom: 48px; }.split > p { margin: 0 0 5px; color: var(--muted); font-size: 1.01rem; line-height: 1.65; } .steps-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; }.step { position: relative; min-height: 265px; padding: 27px; overflow: hidden; border: 1px solid var(--line); border-radius: 20px; background: var(--white); }.step.featured { color: var(--white); background: var(--ink); box-shadow: var(--shadow); }.step.featured::after { content: ""; position: absolute; right: -50px; bottom: -110px; width: 220px; height: 220px; border: 30px solid var(--aqua); border-radius: 50%; opacity: .25; }.step > b { display: block; margin-bottom: 40px; color: #92a2aa; font-family: Georgia,serif; font-size: 1rem; font-style: italic; }.step.featured > b { color: var(--aqua); }.step > i { display: grid; width: 43px; height: 43px; place-items: center; margin-bottom: 26px; border-radius: 13px; background: #e0f6f1; color: #167c80; font-size: 1.4rem; font-style: normal; font-weight: 900; }.step.featured > i { background: rgba(112,230,220,.14); color: var(--aqua); }.step h3 { margin-bottom: 8px; font-size: 1.07rem; letter-spacing: -.035em; }.step p { position: relative; z-index: 1; margin: 0; color: #74848d; font-size: .88rem; line-height: 1.55; }.step.featured p { color: rgba(255,255,255,.66); } /* Vehicle artwork */ .vehicle { overflow: hidden; background: #e9f8f5; }.vehicle-grid { display: grid; grid-template-columns: .95fr 1.05fr; align-items: center; gap: 88px; }.vehicle-art { position: relative; min-height: 420px; overflow: hidden; border-radius: 28px; background: linear-gradient(150deg,#0a3443,#0d6970); box-shadow: var(--shadow); }.vehicle-art::before { content: ""; position: absolute; top: -20%; left: -20%; width: 380px; height: 380px; border-radius: 50%; background: radial-gradient(circle,#6be9dc 0,rgba(107,233,220,0) 68%); opacity: .67; }.vehicle-art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(125deg,transparent 0 47%,rgba(255,255,255,.12) 47.3% 47.8%,transparent 48.1% 100%); background-size: 120px 120px; }.vehicle-copy > p:not(.eyebrow) { max-width: 540px; margin: 23px 0; color: var(--muted); line-height: 1.7; }.proof { display: flex; align-items: center; gap: 12px; margin: 29px 0 25px; }.proof > b { display: grid; flex: 0 0 40px; width: 40px; height: 40px; place-items: center; border-radius: 12px; background: #b8eee5; color: #0f7377; font-size: 1.25rem; }.proof p { margin: 0; color: #657781; font-size: .82rem; line-height: 1.45; }.proof strong { color: var(--ink); }.text-link { display: inline-flex; gap: 11px; padding-bottom: 4px; border-bottom: 1px solid currentColor; color: #08767c; font-size: .9rem; font-weight: 820; } /* Trust is a product feature, not a small print promise. */ .safety { position: relative; overflow: hidden; color: var(--white); background: #071b23; }.safety::before { content: ""; position: absolute; inset: 0; opacity: .16; background: linear-gradient(90deg, transparent 0 49%, rgba(170,255,238,.45) 49.2% 49.35%, transparent 49.55% 100%); background-size: 100px 100px; mask-image: linear-gradient(to bottom, transparent, black 20%, black 80%, transparent); }.safety-intro { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr .75fr; gap: 84px; align-items: end; margin-bottom: 48px; }.safety .eyebrow { color: var(--mint); }.safety h2 { color: var(--white); }.safety h2 span { color: var(--aqua); }.safety-intro > p { margin: 0 0 4px; color: rgba(255,255,255,.65); line-height: 1.7; }.safety-grid { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(4,1fr); gap: 12px; }.safety-card { position: relative; min-height: 258px; padding: 22px; overflow: hidden; border: 1px solid rgba(255,255,255,.14); border-radius: 18px; background: rgba(255,255,255,.055); transition: transform .2s ease, background .2s ease; }.safety-card:hover { background: rgba(255,255,255,.09); transform: translateY(-4px); }.safety-card > i { display: grid; width: 38px; height: 38px; place-items: center; margin: 30px 0 22px; border-radius: 11px; background: rgba(199,255,207,.13); color: var(--mint); font-size: 1.2rem; font-style: normal; }.safety-number { position: absolute; top: 18px; right: 19px; color: rgba(255,255,255,.34); font-family: Georgia,serif; font-size: .96rem; font-style: italic; }.safety-card h3 { margin-bottom: 9px; font-size: .97rem; letter-spacing: -.03em; }.safety-card p { margin-bottom: 22px; color: rgba(255,255,255,.63); font-size: .8rem; line-height: 1.6; }.safety-card small { position: absolute; right: 22px; bottom: 20px; left: 22px; color: var(--aqua); font-size: .64rem; font-weight: 750; }.safety-card.identity > i { color: var(--aqua); background: rgba(112,230,220,.12); }.safety-card.location > i { color: #a8c8ff; background: rgba(111,159,255,.16); }.safety-card.tracking > i { color: #ffd59a; background: rgba(255,188,91,.14); }.safety-note { position: relative; z-index: 1; display: flex; align-items: center; gap: 13px; max-width: 770px; margin: 35px auto 0; padding: 15px 19px; border: 1px solid rgba(112,230,220,.25); border-radius: 13px; background: rgba(112,230,220,.06); }.safety-note > i { display: grid; width: 28px; height: 28px; flex: 0 0 28px; place-items: center; border-radius: 8px; background: var(--aqua); color: var(--ink); font-style: normal; }.safety-note p { margin: 0; color: rgba(255,255,255,.72); font-size: .78rem; line-height: 1.55; }.safety-note strong { color: var(--white); } @media (max-width: 900px) { .safety-intro { grid-template-columns: 1fr; gap: 20px; }.safety-grid { grid-template-columns: repeat(2,1fr); }.safety-card { min-height: 232px; } } @media (max-width: 670px) { .safety-grid { grid-template-columns: 1fr; }.safety-card { min-height: 206px; }.safety-card > i { margin: 22px 0 16px; }.safety-card p { max-width: 420px; }.safety-note { align-items: flex-start; } } /* Monochrome, ride-app-inspired direction: black, white, neutral gray and a single blue signal. */ :root { --ink: #000; --paper: #f6f6f6; --white: #fff; --mint: #fff; --aqua: #276ef1; --teal: #000; --muted: #5f5f5f; --line: rgba(0,0,0,.13); } body { background: var(--paper); }.hero { background: #000; }.hero::before { opacity: .1; background: linear-gradient(115deg, transparent 0 48%, rgba(255,255,255,.4) 48.2% 48.4%, transparent 48.6% 100%); }.glow.one,.glow.two { display: none; }.hero h1 em { color: #d7d7d7; }.hero-lede { color: #fff; }.eyebrow.dark { color: #000; }.primary { background: #fff; color: #000; box-shadow: none; }.primary:hover { background: #e8e8e8; box-shadow: none; }.quiet { border-color: rgba(255,255,255,.65); }.hero-points li::first-letter { color: #fff; }.brand > span { color: #276ef1; }.nav-cta:hover { background: #fff; color: #000; } .trust-list b { color: #000; }.section h2 span { color: #000; }.step > i { background: #efefef; color: #000; }.step.featured { background: #000; }.step.featured::after { border-color: #fff; opacity: .12; }.step.featured > b,.step.featured > i { color: #fff; }.step.featured > i { background: rgba(255,255,255,.12); } .vehicle { background: #fff; }.vehicle-art { background: #050505; box-shadow: none; }.vehicle-art::before { background: radial-gradient(circle,#464646 0,rgba(70,70,70,0) 68%); }.vehicle-art::after { opacity: .22; }.proof > b { background: #000; color: #fff; }.text-link { color: #000; } .safety { background: #000; }.safety::before { opacity: .08; }.safety h2 span { color: #fff; }.safety-card { background: rgba(255,255,255,.04); }.safety-card:hover { background: rgba(255,255,255,.08); }.safety-card > i,.safety-card.identity > i,.safety-card.location > i,.safety-card.tracking > i { background: rgba(255,255,255,.12); color: #fff; }.safety-card small { color: #bfbfbf; }.safety-note { border-color: rgba(255,255,255,.25); background: rgba(255,255,255,.06); }.safety-note > i { background: #fff; color: #000; } .map-card { background: #e4e4e4; box-shadow: none; }.map-grid { background-image: linear-gradient(#c6c6c6 1px,transparent 1px),linear-gradient(90deg,#c6c6c6 1px,transparent 1px); }.water { background: #cacaca; }.ring { border-color: rgba(0,0,0,.4); background: rgba(255,255,255,.68); color: #000; }.ring i,.legend i { background: #276ef1; box-shadow: 0 0 0 5px rgba(39,110,241,.13); }.legend { background: rgba(255,255,255,.9); color: #333; }.faq details[open] summary b { border-color: #000; background: #000; color: #fff; }.final-cta { background: #000; }.final-cta h2 span { color: #fff; }.footer-top > a:last-child { color: #fff; } /* Coverage, FAQ, footer */ .coverage { background: var(--white); }.coverage-grid { display: grid; grid-template-columns: .8fr 1.2fr; align-items: center; gap: 80px; }.coverage-grid > div:first-child > p:not(.eyebrow) { max-width: 410px; margin: 24px 0 0; color: var(--muted); line-height: 1.7; }.map-card { position: relative; min-height: 400px; overflow: hidden; border-radius: 26px; background: #d6ebe9; box-shadow: 0 16px 34px rgba(14,75,82,.1); }.map-grid { position: absolute; inset: 0; background-image: linear-gradient(#b7d5d1 1px,transparent 1px),linear-gradient(90deg,#b7d5d1 1px,transparent 1px); background-size: 38px 38px; transform: rotate(-5deg) scale(1.14); }.water { position: absolute; inset: -15% -10% -15% auto; width: 45%; border-radius: 47% 0 0 50%; background: #8ad9e9; transform: rotate(-9deg); }.ring { position: absolute; z-index: 2; display: grid; place-items: center; border: 1px solid rgba(8,117,124,.3); border-radius: 50%; background: rgba(153,245,213,.23); color: #0b656a; font-size: .76rem; text-align: center; }.ring i { position: absolute; top: 29%; width: 9px; height: 9px; border-radius: 50%; background: #0b7277; box-shadow: 0 0 0 5px rgba(11,114,119,.13); }.ring.didim { top: 35%; left: 34%; width: 142px; height: 142px; padding-top: 31px; }.ring.akbuk { top: 17%; left: 63%; width: 95px; height: 95px; padding-top: 28px; }.ring.kazikli { top: 59%; left: 59%; width: 87px; height: 87px; padding-top: 25px; }.legend { position: absolute; z-index: 3; bottom: 17px; left: 18px; margin: 0; padding: 10px 12px; border: 1px solid rgba(255,255,255,.65); border-radius: 10px; background: rgba(255,255,255,.82); color: #587078; font-size: .7rem; font-weight: 750; backdrop-filter: blur(10px); }.legend i { display: inline-block; width: 8px; height: 8px; margin-right: 5px; border-radius: 50%; background: #0b7277; } .faq { padding-bottom: 108px; }.faq-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: 110px; }.faq-grid > div:first-child > p:not(.eyebrow) { margin: 26px 0; color: var(--muted); line-height: 1.7; }.dark-button { background: var(--ink); color: var(--white); }.faq-list { border-top: 1px solid var(--line); }.faq details { border-bottom: 1px solid var(--line); }.faq summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 22px 0; cursor: pointer; list-style: none; font-size: .98rem; font-weight: 780; }.faq summary::-webkit-details-marker { display: none; }.faq summary b { display: grid; flex: 0 0 25px; width: 25px; height: 25px; place-items: center; border: 1px solid var(--line); border-radius: 50%; font-size: 1.2rem; font-weight: 400; transition: transform .2s ease, background .2s ease; }.faq details[open] summary b { border-color: var(--mint); background: var(--mint); transform: rotate(45deg); }.faq details p { max-width: 590px; margin: -2px 42px 22px 0; color: var(--muted); font-size: .9rem; line-height: 1.65; } .final-cta { position: relative; overflow: hidden; padding: 86px 0; color: var(--white); background: #0a3948; }.final-cta::after { content: ""; position: absolute; right: -5%; bottom: -125px; width: 430px; height: 430px; border: 62px solid rgba(112,230,220,.26); border-radius: 50%; }.final-inner { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 40px; }.final-cta h2 span { color: var(--aqua); }.final-cta .eyebrow { color: var(--mint); }.light { background: var(--white); color: var(--ink); }.site-footer { color: rgba(255,255,255,.67); background: #071621; }.footer-top { display: grid; grid-template-columns: 1fr 1.2fr auto; align-items: center; gap: 45px; padding: 44px 0; border-bottom: 1px solid rgba(255,255,255,.11); }.footer-top .brand { color: var(--white); }.footer-top p { margin: 0; font-size: .78rem; line-height: 1.55; }.footer-top > a:last-child { color: var(--mint); font-size: .82rem; font-weight: 780; white-space: nowrap; }.footer-bottom { display: flex; justify-content: space-between; padding: 22px 0; color: rgba(255,255,255,.43); font-size: .7rem; } @media (max-width: 900px) { .hero { min-height: auto; padding-top: 145px; }.hero-grid,.vehicle-grid,.coverage-grid,.faq-grid { grid-template-columns: 1fr; gap: 55px; }.hero-art { margin-inline: auto; }.split { grid-template-columns: 1fr; gap: 20px; }.coverage-grid { gap: 48px; }.faq-grid { gap: 48px; }.faq-grid > div:first-child { max-width: 580px; }.vehicle-art { width: 100%; max-width: 600px; }.footer-top { grid-template-columns: 1fr 1fr; }.footer-top > a:last-child { justify-self: end; }.footer-top p { grid-column: 1/-1; grid-row: 2; }.trust-list { width: min(100%,760px); }.trust-list p { min-width: 165px; padding: 0 12px; }.trust-list p:last-child { border-right: 0; } } @media (max-width: 670px) { .container { width: min(100% - 36px,1160px); }.nav-wrap { min-height: 69px; }.menu-toggle { position: relative; z-index: 3; display: grid; width: 38px; height: 38px; place-content: center; gap: 6px; padding: 8px; border: 0; background: transparent; }.menu-toggle > i { display: block; width: 21px; height: 2px; background: currentColor; transition: transform .2s ease; }.menu-toggle[aria-expanded="true"] > i:nth-child(2) { transform: translateY(4px) rotate(45deg); }.menu-toggle[aria-expanded="true"] > i:nth-child(3) { transform: translateY(-4px) rotate(-45deg); }.site-nav { position: absolute; top: 69px; right: 18px; left: 18px; display: none; align-items: stretch; gap: 4px; padding: 15px; border: 1px solid rgba(255,255,255,.13); border-radius: 16px; background: #092230; box-shadow: 0 18px 35px rgba(0,0,0,.25); }.site-nav.is-open { display: flex; flex-direction: column; }.site-nav > a:not(.nav-cta) { padding: 11px 8px; }.nav-cta { margin-top: 7px; text-align: center; }.hero { padding: 127px 0 65px; }.hero-grid { gap: 28px; }.eyebrow { margin-bottom: 14px; }.hero-detail { font-size: .94rem; }.hero-actions { flex-direction: column; align-items: stretch; }.button { width: 100%; }.hero-points { gap: 11px 16px; margin-top: 24px; }.hero-art { min-height: 405px; margin-bottom: -28px; transform: scale(.93); transform-origin: top center; }.phone-card { top: 24px; left: 0; }.choice { right: 0; }.place { bottom: 26px; left: 0; }.trust-list p { min-height: 66px; font-size: .73rem; }.section { padding: 82px 0; }.section h2,.final-cta h2 { font-size: clamp(2.45rem,12vw,3.55rem); }.steps-grid { grid-template-columns: 1fr; }.step { min-height: 0; }.step > b { margin-bottom: 24px; }.step > i { margin-bottom: 18px; }.vehicle { padding-top: 0; }.vehicle-grid { gap: 36px; }.vehicle-art { min-height: 315px; }.coverage-grid,.faq-grid { gap: 35px; }.map-card { min-height: 325px; }.ring.didim { left: 27%; }.ring.akbuk { left: 60%; }.ring.kazikli { left: 55%; }.faq { padding-bottom: 82px; }.faq summary { font-size: .91rem; }.final-cta { padding: 65px 0; }.final-inner { flex-direction: column; align-items: flex-start; gap: 29px; }.footer-top { grid-template-columns: 1fr; gap: 22px; }.footer-top > a:last-child { justify-self: start; }.footer-top p { grid-column: auto; grid-row: auto; }.footer-bottom { font-size: .65rem; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *,*::before,*::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } } /* Homepage direction inspired by ride-app clarity: a black canvas, a white action card and a full-height product story. */ :root { --ink: #000; --paper: #fff; --white: #fff; --mint: #fff; --aqua: #276ef1; --teal: #000; --muted: #606060; } .site-header { border-bottom-color: rgba(255,255,255,.16); background: #000; }.site-header.is-sticky { background: rgba(0,0,0,.96); }.brand { letter-spacing: -.07em; }.brand > span { color: #fff; }.site-nav { font-size: .86rem; }.nav-cta { border-color: #fff; border-radius: 3px; background: #fff; color: #000; }.nav-cta:hover { background: #e9e9e9; color: #000; } /* ========================================================================== CILINGIRAPP hero film — one cinematic surface: dark vector city map, glass product panels, and the headline living in the same frame. Palette: black, white, soft gray and a single blue. Original artwork only. ========================================================================== */ :root { --blue: #2f6bff; --blue-2: #6d9aff; --night: #08090a; --glass-line: rgba(255,255,255,.1); } .hero { position: relative; z-index: 0; display: grid; align-items: center; min-height: min(94vh, 960px); padding: 0; overflow: hidden; color: #fff; background: var(--night); } .hero::before { display: none; } /* --- Film surface ------------------------------------------------------- */ .film { position: absolute; z-index: 1; inset: 0; } .film-map { position: absolute; inset: 0; overflow: hidden; background: #0d1013; } .map { position: absolute; inset: 0; width: 100%; height: 100%; font-family: inherit; } .cam { transform-origin: 1060px 330px; transform: scale(var(--cam,1)) translate(var(--camx,0px), var(--camy,0px)); transition: transform 1.25s cubic-bezier(.4,0,.12,1); } .m-bg { fill: #0d1013; } .m-water { fill: #0e1e2e; } .m-shore { fill: none; stroke: rgba(109,154,255,.24); stroke-width: 2.5; } .m-blocks rect { fill: #191f25; stroke: #242c33; stroke-width: 1.5; } .m-parks rect { fill: #16201e; stroke: #202b28; stroke-width: 1.5; } .m-roads path { fill: none; stroke-linecap: round; stroke-linejoin: round; } .m-case path { stroke: #141a1f; stroke-width: 26; } .m-case .m-main { stroke-width: 44; } .m-fill path { stroke: #2d353d; stroke-width: 18; } .m-fill .m-sm { stroke: #242b32; stroke-width: 9; } .m-fill .m-main { stroke: #3c4650; stroke-width: 34; } .m-case .m-sm { stroke-width: 15; } .m-labels text { fill: #6c767f; font-size: 15px; font-weight: 800; letter-spacing: 2.4px; } .m-route { opacity: 0; transition: opacity .9s ease; } .r-glow { fill: none; stroke: rgba(47,107,255,.16); stroke-width: 30; stroke-linecap: round; } .r-soft { fill: none; stroke: rgba(47,107,255,.3); stroke-width: 17; stroke-linecap: round; } .r-done { fill: none; stroke: rgba(255,255,255,.16); stroke-width: 7; stroke-linecap: round; } .r-live { fill: none; stroke: #3d78ff; stroke-width: 9; stroke-linecap: round; } .r-flow { fill: none; stroke: rgba(255,255,255,.9); stroke-width: 3.4; stroke-linecap: round; stroke-dasharray: 2 22; animation: r-flow 1.7s linear infinite; } @keyframes r-flow { to { stroke-dashoffset: -24; } } .pin-s { transform-origin: 0px 0px; transform: scale(calc(1 / var(--cam,1))); transition: transform 1.25s cubic-bezier(.4,0,.12,1); } .p-halo { fill: rgba(255,255,255,.09); transform-box: fill-box; transform-origin: center; } .p-ring { fill: #fff; } .p-core { fill: #fff; } .p-glyph { fill: #0d1013; } .p-tag rect { fill: #fff; } .p-tag text { fill: #0d1013; font-size: 18px; font-weight: 800; letter-spacing: .2px; } .pin-pro { opacity: 0; transition: opacity .7s ease; } .pin-pro .p-core { fill: var(--blue); } .pin-pro .p-glyph { fill: #fff; } .pin-pro .p-halo { fill: rgba(47,107,255,.26); animation: p-pulse 2.4s ease-out infinite; } .pin-pro .p-tag rect { fill: var(--blue); } .pin-pro .p-tag text { fill: #fff; } @keyframes p-pulse { 0% { transform: scale(.48); opacity: .7; } 70%,100% { transform: scale(1.2); opacity: 0; } } .p-acc { fill: rgba(47,107,255,.12); stroke: rgba(109,154,255,.45); stroke-width: 2; opacity: 0; transform-box: fill-box; transform-origin: center; transition: opacity .7s ease; } .m-radar, .m-near { opacity: 0; transition: opacity .8s ease; } .m-ring { fill: none; stroke: rgba(109,154,255,.34); stroke-width: 2.4; stroke-dasharray: 6 11; } .m-ping { fill: none; stroke: rgba(109,154,255,.6); stroke-width: 3; transform-box: fill-box; transform-origin: center; animation: m-ping 3s ease-out infinite; } @keyframes m-ping { 0% { transform: scale(.4); opacity: .9; } 80%,100% { transform: scale(6); opacity: 0; } } .c-halo { fill: rgba(47,107,255,.22); transform-box: fill-box; transform-origin: center; animation: p-pulse 2.8s ease-out infinite; } .m-cand:nth-child(2) .c-halo { animation-delay: .7s; } .m-cand:nth-child(3) .c-halo { animation-delay: 1.4s; } .c-dot { fill: var(--blue); stroke: #0d1013; stroke-width: 3; } .c-tick { fill: none; stroke: #fff; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; } .film-grain { position: absolute; inset: 0; pointer-events: none; opacity: .5; background-image: radial-gradient(rgba(255,255,255,.03) 1px, transparent 1px); background-size: 3px 3px; } .film-scrim { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, rgba(8,9,10,.95) 0%, rgba(8,9,10,.86) 26%, rgba(8,9,10,.36) 50%, rgba(8,9,10,.05) 68%, rgba(8,9,10,.45) 100%), linear-gradient(180deg, rgba(8,9,10,.82) 0%, rgba(8,9,10,0) 20%, rgba(8,9,10,0) 52%, rgba(8,9,10,.9) 100%); } /* --- Scene shells ------------------------------------------------------- */ .film-scenes { position: absolute; z-index: 2; inset: 0; pointer-events: none; } .sc { position: absolute; top: 50%; right: clamp(20px,4vw,64px); display: flex; visibility: hidden; width: min(430px,40vw); flex-direction: column; align-items: flex-start; gap: 12px; opacity: 0; transform: translateY(-50%); transition: opacity .55s ease, visibility .55s; } .sc.on { visibility: visible; opacity: 1; } .sc > * { opacity: 0; transform: translateY(18px) scale(.99); filter: blur(9px); transition: opacity .6s ease, transform .6s cubic-bezier(.2,.75,.2,1), filter .6s ease; } .sc.on > * { opacity: 1; transform: none; filter: blur(0); } .sc.on > *:nth-child(1) { transition-delay: .1s; } .sc.on > *:nth-child(2) { transition-delay: .22s; } .sc.on > *:nth-child(3) { transition-delay: .34s; } .f-panel { width: 100%; display: grid; gap: 14px; padding: 18px 19px; border: 1px solid var(--glass-line); border-radius: 16px; background: linear-gradient(180deg, rgba(24,28,33,.84), rgba(11,13,16,.92)); box-shadow: 0 34px 74px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.07); backdrop-filter: blur(22px) saturate(120%); } .f-mini { gap: 12px; } .sc[data-sc="0"], .sc[data-sc="6"], .sc[data-sc="7"], .sc[data-sc="8"] { top: auto; bottom: 96px; transform: none; } .sc[data-sc="7"], .sc[data-sc="8"] { width: min(480px,42vw); } .f-chip { display: inline-flex; align-items: center; gap: 8px; padding: 8px 13px; border: 1px solid var(--glass-line); border-radius: 999px; background: rgba(11,13,16,.78); backdrop-filter: blur(14px); color: rgba(255,255,255,.9); font-size: .62rem; font-weight: 850; letter-spacing: .1em; text-transform: uppercase; } .f-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--blue); box-shadow: 0 0 0 4px rgba(47,107,255,.2); animation: f-blink 1.8s ease-in-out infinite; } @keyframes f-blink { 50% { opacity: .28; } } .f-tick { position: relative; display: inline-block; width: 12px; height: 12px; flex: 0 0 12px; } .f-tick::before { content: ""; position: absolute; top: 0; left: 3px; width: 5px; height: 9px; border: solid currentColor; border-width: 0 2.2px 2.2px 0; transform: rotate(43deg); } .f-ver { position: relative; display: inline-block; width: 15px; height: 15px; margin-left: 6px; border-radius: 50%; background: var(--blue); vertical-align: -3px; } .f-ver::before { content: ""; position: absolute; top: 3px; left: 5px; width: 4px; height: 7px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(43deg); } .f-head { display: flex; align-items: center; gap: 12px; } .f-head > div { min-width: 0; } .f-head strong { display: block; font-size: .95rem; letter-spacing: -.025em; } .f-head small { display: block; margin-top: 3px; color: rgba(255,255,255,.55); font-size: .71rem; } .f-ico { display: grid; flex: 0 0 42px; width: 42px; height: 42px; place-items: center; border: 1px solid var(--glass-line); border-radius: 12px; background: rgba(255,255,255,.06); color: #fff; } .f-ico svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } .f-ico svg .fl { fill: currentColor; stroke: none; } .f-ico-live { border-color: rgba(47,107,255,.4); background: rgba(47,107,255,.16); } .f-av { display: grid; flex: 0 0 34px; width: 34px; height: 34px; place-items: center; border-radius: 50%; background: #fff; color: #0d1013; font-size: .75rem; font-style: normal; font-weight: 850; } .f-av.lg { position: relative; flex: 0 0 44px; width: 44px; height: 44px; font-size: .92rem; } .f-av.lg .f-ver { position: absolute; right: -3px; bottom: -2px; margin: 0; border: 2px solid #0f1216; width: 17px; height: 17px; } .f-av.lg .f-ver::before { top: 3.5px; left: 5.4px; } .f-av.alt { background: #b9bec4; } .f-av.alt2 { background: #7e858c; color: #fff; } .f-pill { margin-left: auto; padding: 6px 11px; border: 1px solid var(--glass-line); border-radius: 999px; color: rgba(255,255,255,.68); font-size: .58rem; font-weight: 850; letter-spacing: .1em; white-space: nowrap; } .f-pill-live { display: inline-flex; align-items: center; gap: 6px; border-color: rgba(47,107,255,.42); background: rgba(47,107,255,.16); color: #a8c3ff; } .f-pill-live b { color: #fff; font-size: .78rem; } .f-pill-ok { display: inline-flex; align-items: center; gap: 6px; border-color: rgba(255,255,255,.28); color: #fff; } .f-rate { display: inline-flex; align-items: baseline; gap: 5px; margin-left: auto; padding: 7px 11px; border: 1px solid var(--glass-line); border-radius: 10px; background: rgba(255,255,255,.05); font-size: .86rem; font-weight: 850; letter-spacing: -.02em; } .f-rate i { color: var(--blue-2); font-style: normal; } .f-rate em { color: rgba(255,255,255,.5); font-size: .62rem; font-style: normal; font-weight: 700; } .f-list { display: grid; gap: 1px; overflow: hidden; border-radius: 11px; background: rgba(255,255,255,.07); } .f-list p { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin: 0; padding: 11px 13px; background: rgba(16,19,23,.9); } .f-list span { color: rgba(255,255,255,.5); font-size: .71rem; font-weight: 700; } .f-list b { font-size: .8rem; text-align: right; } .f-btn { display: inline-flex; width: 100%; align-items: center; justify-content: center; min-height: 46px; border-radius: 10px; font-size: .85rem; font-weight: 850; } .f-btn-primary { background: #fff; color: #0d1013; } .f-svc { display: grid; gap: 8px; } .f-svc p { display: flex; align-items: center; gap: 12px; margin: 0; padding: 11px 12px; border: 1px solid var(--glass-line); border-radius: 12px; } .f-svc p.on { border-color: rgba(47,107,255,.5); background: rgba(47,107,255,.12); } .f-svc p.on .f-ico { border-color: rgba(47,107,255,.45); background: rgba(47,107,255,.2); } .f-svc p.on .f-tick { margin-left: auto; color: var(--blue-2); } .f-svc .f-ico { flex: 0 0 36px; width: 36px; height: 36px; border-radius: 10px; } .f-svc .f-ico svg { width: 18px; height: 18px; } .f-svc span { min-width: 0; } .f-svc strong { display: block; font-size: .84rem; } .f-svc small { display: block; margin-top: 3px; color: rgba(255,255,255,.5); font-size: .68rem; } .f-quote { margin: 0; padding-left: 12px; border-left: 2px solid rgba(47,107,255,.6); color: rgba(255,255,255,.72); font-size: .78rem; font-style: italic; line-height: 1.5; } .f-media { display: flex; align-items: center; gap: 10px; } .f-shot { display: grid; flex: 0 0 56px; width: 56px; height: 42px; place-items: center; overflow: hidden; border-radius: 8px; background: rgba(255,255,255,.07); } .f-shot svg { width: 40px; height: 30px; fill: none; stroke: rgba(255,255,255,.72); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; } .f-shot svg .bd { stroke: rgba(255,255,255,.16); } .f-shot svg .fl { fill: rgba(255,255,255,.72); stroke: none; } .f-media span { min-width: 0; } .f-media strong { display: block; font-size: .78rem; } .f-media small { display: block; margin-top: 2px; color: rgba(255,255,255,.5); font-size: .67rem; } .f-note { margin: 0; padding: 11px 13px; border-radius: 10px; background: rgba(255,255,255,.06); color: rgba(255,255,255,.82); font-size: .76rem; font-weight: 700; } .f-foot { margin: 0; color: rgba(255,255,255,.45); font-size: .69rem; } .f-eq { display: inline-flex; align-items: flex-end; gap: 2.5px; height: 16px; } .f-eq b { width: 3px; height: 5px; border-radius: 2px; background: var(--blue-2); animation: f-eq 1.05s ease-in-out infinite; } .f-eq b:nth-child(2) { animation-delay: .13s; } .f-eq b:nth-child(3) { animation-delay: .26s; } .f-eq b:nth-child(4) { animation-delay: .39s; } @keyframes f-eq { 50% { height: 16px; } } .f-queue { display: grid; gap: 8px; } .f-queue p { display: flex; align-items: center; gap: 11px; margin: 0; padding: 9px 11px; border-radius: 11px; background: rgba(255,255,255,.05); } .f-queue em { margin-left: auto; color: rgba(255,255,255,.45); font-size: .64rem; font-style: normal; font-weight: 700; white-space: nowrap; } .f-sk { display: block; height: 9px; border-radius: 99px; background: linear-gradient(90deg, rgba(255,255,255,.08), rgba(255,255,255,.22), rgba(255,255,255,.08)); background-size: 220% 100%; animation: f-sk 2.2s linear infinite; } .f-sk.w1 { width: 96px; } .f-sk.w2 { width: 74px; } .f-sk.w3 { width: 58px; } @keyframes f-sk { to { background-position: -220% 0; } } .f-offer { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 14px; padding: 15px; border: 1px solid var(--glass-line); border-radius: 12px; background: rgba(255,255,255,.05); } .f-offer span { display: block; color: rgba(255,255,255,.5); font-size: .6rem; font-weight: 850; letter-spacing: .1em; text-transform: uppercase; } .f-offer > div strong { display: block; margin-top: 7px; font-size: 1.72rem; font-weight: 850; letter-spacing: -.045em; } .f-offer > div strong em { margin-left: 8px; padding: 3px 7px; border-radius: 5px; background: rgba(255,255,255,.1); color: rgba(255,255,255,.6); font-size: .34em; font-style: normal; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; vertical-align: middle; } .f-offer ul { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; text-align: right; } .f-offer li { color: rgba(255,255,255,.5); font-size: .63rem; font-weight: 700; } .f-offer li b { display: block; color: #fff; font-size: .92rem; letter-spacing: -.03em; } .f-cmp { display: grid; gap: 8px; } .f-cmp p { display: flex; align-items: center; gap: 11px; margin: 0; padding: 11px 12px; border: 1px solid var(--glass-line); border-radius: 12px; } .f-cmp p.pick { border-color: rgba(47,107,255,.55); background: rgba(47,107,255,.12); box-shadow: 0 0 0 3px rgba(47,107,255,.1); } .f-cmp p.pick .f-tick { color: var(--blue-2); } .f-cmp span { min-width: 0; } .f-cmp strong { display: block; font-size: .8rem; } .f-cmp small { display: block; margin-top: 2px; color: rgba(255,255,255,.5); font-size: .66rem; } .f-cmp p > b { margin-left: auto; font-size: .92rem; font-weight: 850; letter-spacing: -.03em; } .f-metrics { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .f-metric { padding: 13px 15px 15px; border: 1px solid var(--glass-line); border-radius: 12px; background: rgba(255,255,255,.05); } .f-metric span { display: block; color: rgba(255,255,255,.5); font-size: .6rem; font-weight: 850; letter-spacing: .1em; text-transform: uppercase; } .f-metric strong { display: block; margin-top: 8px; font-size: clamp(1.5rem,2.3vw,2.05rem); font-weight: 850; line-height: 1; letter-spacing: -.05em; font-variant-numeric: tabular-nums; } .f-metric strong em { margin: 0 2px 0 4px; font-size: .42em; font-style: normal; font-weight: 800; letter-spacing: 0; opacity: .5; } .f-metric-alt strong { color: var(--blue-2); } .f-metric-wide strong { font-size: 1.12rem; letter-spacing: -.03em; } .f-track { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 11px; } .f-track-end { display: inline-flex; align-items: center; gap: 6px; color: rgba(255,255,255,.6); font-size: .63rem; font-weight: 750; white-space: nowrap; } .f-track-end i { width: 9px; height: 9px; border-radius: 50%; } .d-pro { background: var(--blue); box-shadow: 0 0 0 3px rgba(47,107,255,.24); } .d-you { background: #fff; box-shadow: 0 0 0 3px rgba(255,255,255,.16); } .f-bar { position: relative; display: block; height: 6px; overflow: hidden; border-radius: 99px; background: rgba(255,255,255,.13); } .f-bar i { position: absolute; inset: 0 auto 0 0; width: 8%; border-radius: 99px; background: var(--blue); transition: width .5s linear; } .f-toast { display: flex; width: 100%; align-items: center; gap: 12px; padding: 13px 15px; border: 1px solid var(--glass-line); border-radius: 14px; background: rgba(255,255,255,.97); color: #0d1013; box-shadow: 0 26px 56px rgba(0,0,0,.5); } .f-toast > b { display: grid; flex: 0 0 34px; width: 34px; height: 34px; place-items: center; border-radius: 50%; background: var(--blue); color: #fff; } .f-toast strong { display: block; font-size: .87rem; } .f-toast small { display: block; margin-top: 2px; color: #5c666e; font-size: .69rem; } .f-seal { position: relative; display: grid; flex: 0 0 44px; width: 44px; height: 44px; place-items: center; border-radius: 50%; background: var(--blue); color: #fff; } .f-seal::after { content: ""; position: absolute; inset: -7px; border: 2px solid rgba(47,107,255,.5); border-radius: 50%; animation: f-seal 2.6s ease-out infinite; } @keyframes f-seal { 0% { transform: scale(.82); opacity: .85; } 70%,100% { transform: scale(1.3); opacity: 0; } } .f-seal .f-tick { width: 18px; height: 18px; } .f-seal .f-tick::before { top: 1px; left: 5px; width: 7px; height: 13px; border-width: 0 2.6px 2.6px 0; } /* --- Rail --------------------------------------------------------------- */ .film-rail { position: absolute; z-index: 4; right: clamp(20px,4vw,64px); bottom: clamp(20px,3.4vh,34px); left: clamp(20px,4vw,64px); display: grid; grid-template-columns: 36px minmax(0,1fr) auto; align-items: center; gap: 16px; } .f-play { display: grid; width: 36px; height: 36px; place-items: center; padding: 0; border: 1px solid var(--glass-line); border-radius: 50%; background: rgba(11,13,16,.7); color: #fff; cursor: pointer; backdrop-filter: blur(10px); transition: background .2s ease; } .f-play:hover { background: rgba(255,255,255,.16); } .f-play span { position: relative; display: block; width: 11px; height: 12px; } .f-play span::before, .f-play span::after { content: ""; position: absolute; top: 0; width: 3px; height: 12px; border-radius: 1px; background: currentColor; } .f-play span::before { left: 1px; } .f-play span::after { right: 1px; } .f-play[data-state="paused"] span::before { top: 0; left: 2px; width: 0; height: 0; border-top: 6px solid transparent; border-bottom: 6px solid transparent; border-left: 10px solid currentColor; border-radius: 0; background: none; } .f-play[data-state="paused"] span::after { display: none; } .f-steps { display: grid; grid-template-columns: repeat(9,1fr); gap: 6px; } .f-steps i { display: block; height: 3px; overflow: hidden; border-radius: 99px; background: rgba(255,255,255,.17); } .f-steps i b { display: block; width: 0; height: 100%; border-radius: 99px; background: #fff; } .f-steps i.done b { width: 100%; } .f-steps i.now b { animation: f-step var(--dur,5s) linear forwards; } @keyframes f-step { from { width: 0; } to { width: 100%; } } .f-now { display: inline-flex; align-items: baseline; gap: 9px; margin: 0; color: rgba(255,255,255,.8); font-size: .72rem; font-weight: 750; white-space: nowrap; } .f-now b { padding: 3px 6px; border-radius: 4px; background: rgba(255,255,255,.12); color: #fff; font-size: .62rem; font-weight: 850; letter-spacing: .06em; } .film.is-paused *, .film.is-paused *::before, .film.is-paused *::after { animation-play-state: paused !important; } /* --- Headline living on the same surface -------------------------------- */ .hero-inner { position: relative; z-index: 3; width: 100%; padding: 120px 0 150px; pointer-events: none; } .hero-copy { max-width: 620px; pointer-events: auto; } .hero-eyebrow { display: inline-flex; align-items: center; gap: 9px; margin: 0 0 22px; color: rgba(255,255,255,.6); font-size: .72rem; font-weight: 850; letter-spacing: .16em; text-transform: uppercase; } .hero-eyebrow::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--blue); box-shadow: 0 0 0 5px rgba(47,107,255,.18); } .hero h1 { max-width: 12ch; margin: 0 0 20px; color: #fff; font-size: clamp(2.5rem,4.3vw,4.05rem); font-weight: 850; line-height: 1.0; letter-spacing: -.055em; } .hero h1 em { color: #fff; font-style: normal; text-decoration: underline; text-decoration-color: var(--blue); text-decoration-thickness: .06em; text-underline-offset: .13em; } .hero-lede { max-width: 42ch; margin: 0 0 30px; color: rgba(255,255,255,.66); font-size: clamp(.98rem,1.15vw,1.1rem); line-height: 1.6; } .hero-actions { display: flex; flex-wrap: wrap; gap: 12px; } .btn { display: inline-flex; align-items: center; justify-content: center; gap: 11px; min-height: 54px; padding: 0 24px; border: 1px solid transparent; border-radius: 6px; font-size: .92rem; font-weight: 850; cursor: pointer; transition: transform .2s ease, background .2s ease, border-color .2s ease; } .btn:hover { transform: translateY(-2px); } .btn-primary { background: #fff; color: #0d1013; } .btn-primary:hover { background: #e9ebee; } .btn-primary i { order: -1; width: 0; height: 0; border-top: 5.5px solid transparent; border-bottom: 5.5px solid transparent; border-left: 9px solid currentColor; } .btn-quiet { border-color: rgba(255,255,255,.3); background: transparent; color: #fff; } .btn-quiet:hover { border-color: #fff; background: rgba(255,255,255,.08); } .hero-meta { display: flex; max-width: 500px; flex-wrap: wrap; align-items: center; margin: 30px 0 0; color: rgba(255,255,255,.52); font-size: .78rem; font-weight: 700; } .hero-meta i { display: inline-block; width: 4px; height: 4px; margin: 0 12px; border-radius: 50%; background: rgba(255,255,255,.3); } /* --- Camera and layer state per chapter --------------------------------- */ .film[data-sc="0"] { --cam: 1.15; --camx: 470px; --camy: -175px; } .film[data-sc="1"] { --cam: 2.1; --camx: 155px; --camy: -112px; } .film[data-sc="2"] { --cam: 1.7; --camx: 172px; --camy: -126px; } .film[data-sc="3"] { --cam: 1; --camx: 290px; --camy: -170px; } .film[data-sc="4"] { --cam: 1.7; --camx: 172px; --camy: -126px; } .film[data-sc="5"] { --cam: 1.8; --camx: 167px; --camy: -122px; } .film[data-sc="6"] { --cam: 1; --camx: 520px; --camy: -170px; } .film[data-sc="7"] { --cam: .92; --camx: 516px; --camy: -148px; } .film[data-sc="8"] { --cam: 2; --camx: 158px; --camy: -57px; } .film[data-sc="9"] { --cam: 1.8; --camx: 167px; --camy: -122px; } .film[data-sc="0"] .m-route, .film[data-sc="6"] .m-route, .film[data-sc="7"] .m-route, .film[data-sc="8"] .m-route, .film[data-sc="9"] .m-route { opacity: 1; } .film[data-sc="0"] .pin-pro, .film[data-sc="6"] .pin-pro, .film[data-sc="7"] .pin-pro, .film[data-sc="8"] .pin-pro, .film[data-sc="9"] .pin-pro { opacity: 1; } .film[data-sc="1"] .p-acc, .film[data-sc="2"] .p-acc { opacity: 1; animation: p-acc 3s ease-out infinite; } @keyframes p-acc { 0% { transform: scale(.7); opacity: .95; } 70%,100% { transform: scale(1.12); opacity: .3; } } .film[data-sc="3"] .m-radar, .film[data-sc="3"] .m-near { opacity: 1; } /* --- Responsive --------------------------------------------------------- */ @media (max-width: 1180px) { .sc { width: min(400px,44vw); } .hero-copy { max-width: 520px; } } @media (max-width: 980px) { .hero { display: flex; min-height: 0; flex-direction: column; align-items: stretch; padding: 0; } .hero-inner { order: 1; padding: 96px 0 26px; } .hero-copy { max-width: 640px; } .hero h1 { max-width: 16ch; } .hero-lede { max-width: 52ch; } .hero-meta { max-width: none; } .film { position: relative; order: 2; height: min(72vh,620px); } .film-scrim { background: linear-gradient(180deg, rgba(8,9,10,.86) 0%, rgba(8,9,10,.1) 26%, rgba(8,9,10,.1) 40%, rgba(8,9,10,.94) 100%); } .sc, .sc[data-sc="0"], .sc[data-sc="6"], .sc[data-sc="7"], .sc[data-sc="8"] { top: auto; right: clamp(12px,3vw,20px); bottom: 74px; left: clamp(12px,3vw,20px); width: auto; transform: none; } .film-rail { right: clamp(12px,3vw,20px); bottom: 16px; left: clamp(12px,3vw,20px); grid-template-columns: 32px minmax(0,1fr); gap: 12px; } .f-now { grid-column: 1 / -1; } .f-play { width: 32px; height: 32px; } .cam { transform-origin: 800px 380px; } .film[data-sc="0"] { --cam: 1.5; --camx: 330px; --camy: -485px; } .film[data-sc="1"] { --cam: 1.7; --camx: -180px; --camy: -190px; } .film[data-sc="2"] { --cam: 1.35; --camx: -180px; --camy: -239px; } .film[data-sc="3"] { --cam: 1; --camx: -180px; --camy: -323px; } .film[data-sc="4"] { --cam: 1.4; --camx: -180px; --camy: -231px; } .film[data-sc="5"] { --cam: 1.45; --camx: -180px; --camy: -223px; } .film[data-sc="6"] { --cam: 1.1; --camx: 260px; --camy: -483px; } .film[data-sc="7"] { --cam: .82; --camx: 66px; --camy: -423px; } .film[data-sc="8"] { --cam: 1.8; --camx: -180px; --camy: -179px; } .film[data-sc="9"] { --cam: 1.45; --camx: -180px; --camy: -223px; } } @media (max-width: 670px) { .site-nav { background: #000; } .nav-cta { color: #000; } .hero-inner { padding: 88px 0 24px; } .hero-eyebrow { margin-bottom: 16px; font-size: .64rem; } .hero h1 { max-width: 14ch; margin-bottom: 16px; font-size: clamp(2.2rem,9.6vw,3.1rem); } .hero-lede { margin-bottom: 24px; font-size: .95rem; } .hero-actions { display: grid; } .btn { min-height: 50px; } .hero-meta { margin-top: 22px; font-size: .7rem; } .hero-meta i { margin: 0 9px; } .film { height: min(78vh,620px); } .sc { bottom: 66px; gap: 10px; } .f-panel { gap: 11px; padding: 14px; border-radius: 14px; } .f-chip { padding: 7px 11px; font-size: .55rem; } .f-head strong { font-size: .86rem; } .f-head small { font-size: .65rem; } .f-metric { padding: 11px 12px 12px; } .f-metric strong { font-size: 1.42rem; } .f-track-end { font-size: .56rem; } .f-list p { padding: 9px 11px; } .f-list span { font-size: .65rem; } .f-list b { font-size: .73rem; } .f-offer { padding: 12px; } .f-offer > div strong { font-size: 1.44rem; } .f-svc p { padding: 9px 10px; } .f-svc strong { font-size: .78rem; } .f-svc small { font-size: .63rem; } .f-quote { font-size: .71rem; } .f-note { padding: 9px 11px; font-size: .7rem; } .f-foot { font-size: .63rem; } .f-cmp p { padding: 9px 10px; } .f-cmp strong { font-size: .74rem; } .f-cmp small { font-size: .61rem; } .f-cmp p > b { font-size: .82rem; } .f-shot { flex: 0 0 46px; width: 46px; height: 36px; } .f-media strong { font-size: .72rem; } .f-media small { font-size: .62rem; } .f-toast strong { font-size: .78rem; } .f-toast small { font-size: .63rem; } .f-now { font-size: .62rem; } .m-labels text { font-size: 19px; } .p-tag text { font-size: 20px; } } @media (prefers-reduced-motion: reduce) { .r-flow, .pin-pro .p-halo, .f-dot, .f-eq b, .f-sk, .f-seal::after, .m-ping, .c-halo, .p-acc { animation: none !important; } .cam, .pin-s { transition: none; } } /* --- Palette clean-up for the rest of the page (no mint / turquoise) ----- */ :root { --aqua: #2f6bff; } .vehicle-art::before { background: radial-gradient(circle,#3a4048 0,rgba(58,64,72,0) 68%); } .map-card { background: #e9eaec; box-shadow: none; } .map-grid { background-image: linear-gradient(#d6d9dd 1px,transparent 1px),linear-gradient(90deg,#d6d9dd 1px,transparent 1px); } .water { background: #dcdfe4; } .ring { border-color: rgba(0,0,0,.2); background: rgba(255,255,255,.72); color: #0d1013; } .ring i, .legend i { background: var(--blue); box-shadow: 0 0 0 5px rgba(47,107,255,.14); } .legend { background: rgba(255,255,255,.92); color: #444b51; } .final-cta { background: #0d1013; } .final-cta::after { border-color: rgba(255,255,255,.08); } .final-cta h2 span { color: var(--blue-2); } .final-cta .eyebrow { color: rgba(255,255,255,.6); } .site-footer { background: #0d1013; } .footer-top > a:last-child { color: var(--blue-2); } .safety-card small { color: #8d959c; } .trust-list b, .step > i, .proof > b { color: #0d1013; } .step.featured::after { border-color: var(--blue); opacity: .2; } .faq details[open] summary b { border-color: #0d1013; background: #0d1013; color: #fff; } /* --- Brand line and film watermark -------------------------------------- */ .hero-line { display: flex; flex-wrap: wrap; gap: 8px 10px; margin: 0 0 30px; } .hero-line b { padding: 7px 13px; border: 1px solid rgba(255,255,255,.16); border-radius: 999px; background: rgba(255,255,255,.05); color: #fff; font-size: .8rem; font-weight: 800; letter-spacing: -.015em; } .hero-line b:first-child { border-color: rgba(47,107,255,.5); background: rgba(47,107,255,.16); } .film-brand { position: absolute; z-index: 4; top: clamp(96px,12vh,124px); right: clamp(20px,4vw,64px); display: inline-flex; align-items: center; margin: 0; color: rgba(255,255,255,.5); font-size: .68rem; font-weight: 800; letter-spacing: .02em; } .film-brand i { display: inline-block; width: 3px; height: 3px; margin: 0 8px; border-radius: 50%; background: rgba(255,255,255,.35); } .trust-list p { justify-content: center; font-size: .95rem; font-weight: 800; letter-spacing: -.02em; color: #0d1013; } @media (max-width: 980px) { .film-brand { top: 14px; right: auto; left: clamp(12px,3vw,20px); } } @media (max-width: 670px) { .hero-line { margin-bottom: 24px; } .hero-line b { padding: 6px 11px; font-size: .72rem; } .film-brand { font-size: .6rem; } .trust-list p { min-width: 120px; font-size: .8rem; } } /* ========================================================================== "ÇilingirApp'i indir" — mağaza bağlantıları henüz yayında değil. Tıklanabilir mağaza butonu, gerçek URL veya taranabilir QR yok. ========================================================================== */ .download { position: relative; overflow: hidden; padding: 116px 0 108px; color: #fff; background: #0b0d10; } .dl-aura { position: absolute; inset: -30% 40% auto -10%; height: 620px; pointer-events: none; background: radial-gradient(circle at 30% 40%, rgba(47,107,255,.16), rgba(47,107,255,0) 62%); } .dl-intro { position: relative; z-index: 1; max-width: 720px; margin-bottom: 52px; } .dl-eyebrow { display: inline-flex; align-items: center; gap: 9px; margin: 0 0 20px; color: rgba(255,255,255,.6); font-size: .72rem; font-weight: 850; letter-spacing: .16em; text-transform: uppercase; } .dl-eyebrow::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--blue); box-shadow: 0 0 0 5px rgba(47,107,255,.18); } .download h2 { margin: 0 0 18px; color: #fff; font-size: clamp(2.4rem,4vw,3.9rem); font-weight: 850; line-height: 1.02; letter-spacing: -.055em; } .dl-lede { max-width: 48ch; margin: 0; color: rgba(255,255,255,.66); font-size: clamp(1rem,1.15vw,1.12rem); line-height: 1.6; } .dl-grid { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(2,1fr); gap: 20px; } .dl-card { display: grid; gap: 20px; padding: 22px; border: 1px solid var(--glass-line); border-radius: 20px; background: linear-gradient(180deg, rgba(24,28,33,.8), rgba(11,13,16,.92)); box-shadow: 0 34px 74px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.06); } .dl-card-head { display: flex; align-items: center; gap: 13px; } .dl-card-head > div { min-width: 0; } .dl-card-head strong { display: block; font-size: 1.02rem; letter-spacing: -.03em; } .dl-card-head small { display: block; margin-top: 3px; color: rgba(255,255,255,.55); font-size: .74rem; font-weight: 700; } .dl-os { display: grid; flex: 0 0 46px; width: 46px; height: 46px; place-items: center; border: 1px solid var(--glass-line); border-radius: 14px; background: rgba(255,255,255,.06); } .dl-os svg { width: 23px; height: 23px; fill: none; stroke: #fff; stroke-width: 1.6; stroke-linecap: round; } .dl-soon { margin-left: auto; padding: 7px 13px; border: 1px solid rgba(47,107,255,.45); border-radius: 999px; background: rgba(47,107,255,.16); color: #a8c3ff; font-size: .62rem; font-weight: 850; letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; } .dl-body { display: grid; grid-template-columns: 210px minmax(0,1fr); align-items: center; gap: 22px; } /* Telefon önizlemesi (statik görsel) */ .dl-phone { position: relative; width: 210px; padding: 8px; border: 1px solid rgba(255,255,255,.16); border-radius: 30px; background: linear-gradient(180deg,#1a1e23,#0d1014); box-shadow: 0 24px 48px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.09); } .dl-phone::before { content: ""; position: absolute; top: 15px; left: 50%; width: 52px; height: 5px; border-radius: 99px; background: rgba(255,255,255,.16); transform: translateX(-50%); } .dl-screen { display: grid; grid-template-columns: minmax(0,1fr); gap: 9px; height: 332px; padding: 26px 12px 13px; overflow: hidden; border-radius: 23px; background: #0a0d10; align-content: start; } .dl-bar { display: flex; align-items: center; gap: 7px; color: rgba(255,255,255,.5); font-size: .5rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; } .dl-bar i { width: 5px; height: 5px; border-radius: 50%; background: var(--blue); } .dl-bar b { width: 14px; height: 5px; margin-left: auto; border-radius: 2px; background: rgba(255,255,255,.24); } .dl-screen-title { display: flex; align-items: center; justify-content: space-between; margin: 2px 0 0; font-size: .66rem; font-weight: 850; letter-spacing: -.02em; } .dl-screen-title em { padding: 2px 7px; border-radius: 99px; background: rgba(47,107,255,.2); color: #a8c3ff; font-size: .54rem; font-style: normal; font-weight: 850; } .dl-offer { display: flex; min-width: 0; align-items: center; gap: 8px; padding: 9px 9px; border: 1px solid var(--glass-line); border-radius: 11px; } .dl-offer.is-pick { border-color: rgba(47,107,255,.5); background: rgba(47,107,255,.12); } .dl-offer span { min-width: 0; } .dl-offer strong { display: block; overflow: hidden; font-size: .58rem; white-space: nowrap; text-overflow: ellipsis; } .dl-offer small { display: block; margin-top: 2px; color: rgba(255,255,255,.5); font-size: .5rem; } .dl-offer > b { margin-left: auto; font-size: .64rem; font-weight: 850; letter-spacing: -.03em; white-space: nowrap; } .dl-av { display: grid; flex: 0 0 20px; width: 20px; height: 20px; place-items: center; border-radius: 50%; background: #fff; color: #0b0e11; font-size: .52rem; font-style: normal; font-weight: 850; } .dl-av.alt { background: #b9bec4; } .dl-tail { margin: 2px 0 0; color: rgba(255,255,255,.4); font-size: .52rem; font-weight: 700; text-align: center; } .dl-mini { display: flex; align-items: center; gap: 7px; margin: 2px 0 0; padding: 9px 10px; border: 1px solid var(--glass-line); border-radius: 10px; background: rgba(255,255,255,.05); } .dl-mini span { margin-left: auto; color: rgba(255,255,255,.5); font-size: .54rem; font-weight: 800; white-space: nowrap; } .dl-mini b { color: #fff; font-size: .58rem; font-weight: 850; letter-spacing: -.02em; white-space: nowrap; } .dl-dot { width: 6px; height: 6px; flex: 0 0 6px; border-radius: 50%; background: var(--blue); box-shadow: 0 0 0 3px rgba(47,107,255,.2); } .dl-cta { display: grid; min-height: 30px; place-items: center; border-radius: 9px; background: #fff; color: #0b0e11; font-size: .58rem; font-weight: 850; } .dl-map { position: relative; height: 152px; overflow: hidden; border-radius: 12px; } .dl-map svg { position: absolute; inset: 0; width: 100%; height: 100%; } .dm-bg { fill: #0e1114; } .dm-blocks rect { fill: #171c21; stroke: #222930; stroke-width: 1; } .dm-roads path { fill: none; stroke: #2b333a; stroke-width: 7; stroke-linecap: round; } .dm-route { fill: none; stroke: #3d78ff; stroke-width: 4; stroke-linecap: round; } .dm-flow { fill: none; stroke: rgba(255,255,255,.85); stroke-width: 1.6; stroke-linecap: round; stroke-dasharray: 1 8; } .dm-halo { fill: rgba(255,255,255,.1); } .dm-halo.alt { fill: rgba(47,107,255,.24); } .dm-ring { fill: #fff; } .dm-core { fill: #0e1114; } .dm-core.alt { fill: var(--blue); } .dl-live { display: grid; min-width: 0; gap: 8px; padding: 10px; border: 1px solid var(--glass-line); border-radius: 12px; background: rgba(255,255,255,.05); } .dl-live-head { display: flex; min-width: 0; align-items: center; gap: 8px; margin: 0; } .dl-live-head span { min-width: 0; } .dl-live-head strong { display: block; overflow: hidden; font-size: .56rem; white-space: nowrap; text-overflow: ellipsis; } .dl-live-head small { display: block; margin-top: 2px; color: rgba(255,255,255,.5); font-size: .49rem; } .dl-live-head em { margin-left: auto; padding: 3px 5px; border-radius: 99px; background: rgba(47,107,255,.2); color: #a8c3ff; font-size: .42rem; font-style: normal; font-weight: 850; letter-spacing: .06em; white-space: nowrap; } .dl-metrics { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; } .dl-metrics > div { padding: 8px; border-radius: 9px; background: rgba(255,255,255,.06); } .dl-metrics span { display: block; color: rgba(255,255,255,.5); font-size: .43rem; font-weight: 850; letter-spacing: .09em; text-transform: uppercase; } .dl-metrics strong { display: block; margin-top: 5px; white-space: nowrap; font-size: .8rem; font-weight: 850; line-height: 1; letter-spacing: -.04em; } .dl-metrics strong i { margin: 0 1px 0 2px; font-size: .5em; font-style: normal; font-weight: 800; opacity: .55; } .dl-metrics .alt strong { color: var(--blue-2); } .dl-track { position: relative; display: block; height: 4px; overflow: hidden; border-radius: 99px; background: rgba(255,255,255,.14); } .dl-track i { position: absolute; inset: 0 auto 0 0; width: 34%; border-radius: 99px; background: var(--blue); } /* QR önizleme — taranabilir değil */ .dl-side { display: grid; gap: 14px; justify-items: start; } .dl-qr { position: relative; width: 132px; padding: 10px; border: 1px solid var(--glass-line); border-radius: 16px; background: rgba(255,255,255,.05); } .dl-qr svg { display: block; width: 100%; height: auto; filter: blur(.6px); opacity: .5; } .q-bg { fill: #11151a; } .q-eye rect { fill: none; stroke: rgba(255,255,255,.66); stroke-width: 3; } .q-pupil rect, .q-mod rect { fill: rgba(255,255,255,.66); } .dl-qr-seal { position: absolute; top: 50%; left: 50%; display: inline-flex; align-items: center; gap: 6px; padding: 7px 11px; border: 1px solid rgba(47,107,255,.5); border-radius: 999px; background: rgba(11,13,16,.92); color: #a8c3ff; font-size: .58rem; font-weight: 850; letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; transform: translate(-50%,-50%); } .dl-lock { position: relative; display: inline-block; width: 9px; height: 8px; border: 1.6px solid currentColor; border-radius: 2px; } .dl-lock::before { content: ""; position: absolute; top: -6px; left: 1px; width: 5px; height: 5px; border: 1.6px solid currentColor; border-bottom: 0; border-radius: 3px 3px 0 0; } .dl-qr-note { margin: 0; } .dl-qr-note strong { display: block; font-size: .78rem; } .dl-qr-note small { display: block; margin-top: 3px; color: rgba(255,255,255,.5); font-size: .69rem; } .dl-status { display: inline-flex; align-items: center; gap: 9px; margin: 0; padding: 11px 14px; border: 1px dashed rgba(255,255,255,.22); border-radius: 11px; color: rgba(255,255,255,.62); font-size: .72rem; font-weight: 750; } .dl-status i { width: 8px; height: 8px; flex: 0 0 8px; border-radius: 50%; background: rgba(255,255,255,.28); box-shadow: 0 0 0 4px rgba(255,255,255,.06); } .dl-foot { position: relative; z-index: 1; display: flex; align-items: center; gap: 11px; margin: 34px auto 0; color: rgba(255,255,255,.5); font-size: .78rem; line-height: 1.5; } .dl-foot i { width: 6px; height: 6px; flex: 0 0 6px; border-radius: 50%; background: var(--blue); box-shadow: 0 0 0 4px rgba(47,107,255,.16); } @media (max-width: 980px) { .download { padding: 88px 0 82px; } .dl-grid { grid-template-columns: 1fr; gap: 16px; } .dl-intro { margin-bottom: 38px; } } @media (max-width: 670px) { .download { padding: 72px 0 68px; } .download h2 { font-size: clamp(2rem,8.6vw,2.8rem); } .dl-lede { font-size: .95rem; } .dl-card { padding: 18px; gap: 18px; } .dl-body { grid-template-columns: 1fr; justify-items: center; gap: 20px; } .dl-side { justify-items: center; width: 100%; text-align: center; } .dl-status { justify-content: center; width: 100%; } .dl-qr-note small { font-size: .66rem; } .dl-foot { align-items: flex-start; font-size: .72rem; } .dl-foot i { margin-top: 6px; } } /* ========================================================================== Conversion + SEO/GEO turu: hero mesajı, film kontrolleri, kapı açma bölümü, erişilebilirlik ve performans rötuşları. ========================================================================== */ /* --- Hero mesaj hiyerarşisi --------------------------------------------- */ .hero h1 { max-width: 15ch; font-size: clamp(2.2rem,3.5vw,3.5rem); } .hero-lede { max-width: 24ch; margin: 0 0 16px; color: #fff; font-size: clamp(1.15rem,1.6vw,1.5rem); font-weight: 850; letter-spacing: -.03em; line-height: 1.25; } .hero-sub { max-width: 46ch; margin: 0 0 28px; color: rgba(255,255,255,.64); font-size: clamp(.94rem,1.05vw,1.02rem); line-height: 1.6; } .final-note { margin: 14px 0 0; color: rgba(255,255,255,.6); font-size: .92rem; } /* --- Film rayı: oynat / duraklat / baştan izle / bölüm seçici ------------ */ .film-rail { display: grid; grid-template-columns: minmax(0,1fr); gap: 12px; } .film-rail-main { display: grid; grid-template-columns: 36px minmax(0,1fr) auto; align-items: center; gap: 16px; } .film-rail-jump { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } .f-jump-label { color: rgba(255,255,255,.45); font-size: .62rem; font-weight: 850; letter-spacing: .12em; text-transform: uppercase; } .f-jump { display: flex; flex-wrap: wrap; gap: 6px; } .f-jump button, .f-restart { padding: 7px 12px; border: 1px solid var(--glass-line); border-radius: 999px; background: rgba(11,13,16,.72); color: rgba(255,255,255,.82); font-size: .68rem; font-weight: 800; cursor: pointer; transition: background .2s ease, border-color .2s ease, color .2s ease; } .f-jump button:hover, .f-restart:hover { border-color: rgba(255,255,255,.4); background: rgba(255,255,255,.12); color: #fff; } .f-jump button[aria-pressed="true"] { border-color: rgba(47,107,255,.6); background: rgba(47,107,255,.2); color: #fff; } .f-restart { margin-left: auto; } .f-now { min-width: 0; } /* Kontroller büyüdüğü için panelleri yukarı al */ .sc[data-sc="0"], .sc[data-sc="6"], .sc[data-sc="7"], .sc[data-sc="8"] { bottom: 132px; } /* --- Klavye erişilebilirliği -------------------------------------------- */ .btn:focus-visible, .f-play:focus-visible, .f-jump button:focus-visible, .f-restart:focus-visible, .button:focus-visible, .nav-cta:focus-visible, .site-nav a:focus-visible, .faq summary:focus-visible { outline: 3px solid #6d9aff; outline-offset: 3px; border-radius: 6px; } /* --- Kapı açma bölümü ---------------------------------------------------- */ .doorway { padding: 116px 0; background: #f3f4f6; } .door-intro { display: grid; grid-template-columns: 1.05fr .95fr; align-items: end; gap: 70px; margin-bottom: 44px; } .doorway h2 { margin: 0; font-size: clamp(2.3rem,3.8vw,3.7rem); font-weight: 850; line-height: 1.02; letter-spacing: -.055em; } .doorway h2 span { color: #4a5560; } .door-intro > p { margin: 0 0 6px; color: #5c666e; font-size: 1rem; line-height: 1.7; } .door-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 20px; } .door-card { display: grid; gap: 0; margin: 0; overflow: hidden; border: 1px solid rgba(11,14,17,.1); border-radius: 20px; background: #fff; box-shadow: 0 22px 48px rgba(11,14,17,.09); } .door-shot { display: block; aspect-ratio: 16 / 9; overflow: hidden; background: #e6e8ea; } .door-shot img { display: block; width: 100%; height: 100%; object-fit: cover; } .door-card figcaption { padding: 22px 24px 26px; } .door-card h3 { margin: 0 0 8px; font-size: clamp(1.15rem,1.5vw,1.4rem); font-weight: 850; letter-spacing: -.035em; } .door-card figcaption p { margin: 0; color: #5c666e; font-size: .95rem; line-height: 1.6; } .door-order { margin-top: 22px; padding: 24px 26px; border: 1px solid rgba(11,14,17,.1); border-radius: 20px; background: #fff; } .door-order-title { margin: 0 0 16px; color: #6a747b; font-size: .68rem; font-weight: 850; letter-spacing: .14em; text-transform: uppercase; } .door-steps { display: grid; grid-template-columns: repeat(5,1fr); gap: 14px; margin: 0; padding: 0; list-style: none; counter-reset: door; } .door-steps li { position: relative; padding-top: 34px; counter-increment: door; } .door-steps li::before { content: counter(door); position: absolute; top: 0; left: 0; display: grid; width: 24px; height: 24px; place-items: center; border-radius: 50%; background: #0b0e11; color: #fff; font-size: .68rem; font-weight: 850; } .door-steps li::after { content: ""; position: absolute; top: 11px; left: 32px; right: 8px; height: 1px; background: rgba(11,14,17,.14); } .door-steps li:last-child::after { display: none; } .door-steps b { display: block; margin-bottom: 5px; font-size: .88rem; letter-spacing: -.02em; } .door-steps span { color: #5c666e; font-size: .8rem; line-height: 1.5; } .door-steps li:nth-child(4)::before { background: var(--blue); } /* --- Fiyatsız teklif dili ------------------------------------------------ */ .f-offer.is-text > div strong { margin-top: 6px; font-size: 1.02rem; line-height: 1.3; letter-spacing: -.025em; } .f-cmp p > b { padding: 5px 9px; border-radius: 7px; background: rgba(255,255,255,.08); font-size: .68rem; font-weight: 800; letter-spacing: 0; } .f-cmp p.pick > b { background: rgba(47,107,255,.22); color: #cfdfff; } /* --- backdrop-filter için okunabilir yedek ------------------------------- */ .f-panel, .f-chip, .film-brand, .dl-card, .f-play, .f-jump button, .f-restart { -webkit-backdrop-filter: blur(18px); } @supports not ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) { .f-panel { background: #12161b; } .f-chip, .f-play, .f-jump button, .f-restart { background: #12161b; } .dl-card { background: #12161b; } .f-toast { background: #fff; } } /* --- Performans: alt bölümleri gerekmeden boyama ------------------------- */ /* content-visibility denendi: bu sayfada kaydırma sırasında ~464px yükseklik kayması (CLS) ürettiği için kullanılmadı. Sayfa tek dosya ve ağır olan tek parça her zaman görünür olan hero SVG olduğu için kazanç da düşüktü. */ .doorway, .download { contain: layout paint; } @media (max-width: 1080px) { .door-intro { grid-template-columns: 1fr; gap: 18px; } .door-steps { grid-template-columns: repeat(3,1fr); gap: 18px; } .door-steps li:nth-child(3)::after { display: none; } } @media (max-width: 980px) { .sc[data-sc="0"], .sc[data-sc="6"], .sc[data-sc="7"], .sc[data-sc="8"] { bottom: 118px; } .sc, .sc[data-sc="0"], .sc[data-sc="6"], .sc[data-sc="7"], .sc[data-sc="8"] { bottom: 118px; } .film-rail { gap: 10px; } .doorway { padding: 88px 0; } .door-grid { grid-template-columns: 1fr; gap: 16px; } } @media (max-width: 670px) { .hero-lede { max-width: none; font-size: 1.12rem; } .hero-sub { margin-bottom: 24px; font-size: .92rem; } .sc, .sc[data-sc="0"], .sc[data-sc="6"], .sc[data-sc="7"], .sc[data-sc="8"] { bottom: 112px; } .film-rail-main { grid-template-columns: 32px minmax(0,1fr); gap: 12px; } .film-rail-main .f-now { grid-column: 1 / -1; } .f-jump-label { display: none; } .f-jump { flex: 1; } .f-jump button, .f-restart { padding: 6px 10px; font-size: .62rem; } .doorway { padding: 68px 0; } .door-card figcaption { padding: 18px 18px 20px; } .door-order { padding: 20px; } .door-steps { grid-template-columns: 1fr; gap: 14px; } .door-steps li { padding: 0 0 0 36px; } .door-steps li::after { display: none; } .door-steps li::before { top: 1px; } .final-note { font-size: .84rem; } } /* ========================================================================== Fiyat şeffaflığı bölümü + kapı açma kart rozetleri ve mobil kırpma. ========================================================================== */ /* --- Fiyat şeffaflığı ---------------------------------------------------- */ .pricing { position: relative; overflow: hidden; padding: 108px 0 100px; color: #fff; background: #0d1013; } .pricing-aura { position: absolute; inset: -40% -10% auto 30%; height: 640px; pointer-events: none; background: radial-gradient(circle at 60% 40%, rgba(47,107,255,.15), rgba(47,107,255,0) 62%); } .price-intro { position: relative; z-index: 1; max-width: 900px; margin-bottom: 42px; } .price-eyebrow { display: inline-flex; align-items: center; gap: 9px; margin: 0 0 20px; color: rgba(255,255,255,.6); font-size: .72rem; font-weight: 850; letter-spacing: .16em; text-transform: uppercase; } .price-eyebrow::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--blue); box-shadow: 0 0 0 5px rgba(47,107,255,.18); } .pricing h2 { margin: 0; color: #fff; font-size: clamp(2.1rem,3.4vw,3.25rem); font-weight: 850; line-height: 1.08; letter-spacing: -.05em; } .pricing h2 span { color: var(--blue-2); } .price-grid { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(2,1fr); gap: 20px; } .price-card { display: grid; align-content: start; gap: 14px; padding: 26px 28px 28px; border: 1px solid var(--glass-line); border-radius: 20px; background: linear-gradient(180deg, rgba(24,28,33,.8), rgba(11,13,16,.92)); box-shadow: 0 30px 66px rgba(0,0,0,.46), inset 0 1px 0 rgba(255,255,255,.06); } .price-tag { margin: 0; color: var(--blue-2); font-size: .68rem; font-weight: 850; letter-spacing: .14em; text-transform: uppercase; } .price-card h3 { margin: 0; font-size: clamp(1.2rem,1.7vw,1.55rem); font-weight: 850; line-height: 1.2; letter-spacing: -.035em; } .price-text { margin: 0; color: rgba(255,255,255,.68); font-size: .96rem; line-height: 1.65; } .price-flow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 4px; } .price-step { padding: 7px 12px; border: 1px solid var(--glass-line); border-radius: 999px; color: rgba(255,255,255,.62); font-size: .7rem; font-weight: 800; } .price-step.is-on { border-color: rgba(47,107,255,.5); background: rgba(47,107,255,.16); color: #fff; } .price-arrow { width: 14px; height: 1px; background: rgba(255,255,255,.24); } .price-note { position: relative; z-index: 1; display: flex; align-items: flex-start; gap: 12px; margin: 26px auto 0; padding: 16px 18px; border: 1px solid var(--glass-line); border-radius: 14px; background: rgba(255,255,255,.04); color: rgba(255,255,255,.7); font-size: .88rem; line-height: 1.6; } .price-note i { flex: 0 0 8px; width: 8px; height: 8px; margin-top: 7px; border-radius: 50%; background: var(--blue); box-shadow: 0 0 0 4px rgba(47,107,255,.16); } /* --- Kapı açma: güven şeridi artık fotoğrafların üstünde ----------------- */ .door-order { margin-top: 0; margin-bottom: 20px; } /* --- Kart rozetleri ------------------------------------------------------ */ .door-shot { position: relative; } .door-badge { position: absolute; top: 14px; left: 14px; display: inline-flex; align-items: center; gap: 7px; padding: 8px 12px; border: 1px solid rgba(255,255,255,.18); border-radius: 999px; background: rgba(10,13,16,.86); color: #fff; font-size: .62rem; font-weight: 850; letter-spacing: .1em; text-transform: uppercase; box-shadow: 0 8px 22px rgba(0,0,0,.35); } .door-badge .f-tick { width: 11px; height: 11px; flex: 0 0 11px; color: var(--blue-2); } .door-meta { display: flex; align-items: flex-start; gap: 8px; margin: 14px 0 0; padding-top: 13px; border-top: 1px solid rgba(11,14,17,.1); color: #5c666e; font-size: .8rem; font-weight: 700; } .door-meta .f-tick { width: 12px; height: 12px; flex: 0 0 12px; margin-top: 3px; color: var(--blue); } .door-dot { flex: 0 0 8px; width: 8px; height: 8px; margin-top: 5px; border-radius: 50%; background: #0b0e11; } @media (max-width: 980px) { .pricing { padding: 84px 0 78px; } .price-grid { grid-template-columns: 1fr; gap: 16px; } } @media (max-width: 640px) { /* Mobilde 16:9 çok basık kalıyor; kadın müşteri ve telefon ekranı görünsün diye yaklaşık 4:3 kırpma ve özneye göre hizalama. */ .door-shot { aspect-ratio: 4 / 3; } .door-card:nth-child(1) .door-shot img { object-position: 36% center; } .door-card:nth-child(2) .door-shot img { object-position: 62% center; } .door-badge { top: 10px; left: 10px; padding: 7px 10px; font-size: .58rem; letter-spacing: .08em; } .door-meta { font-size: .74rem; } } @media (max-width: 670px) { .pricing { padding: 68px 0 64px; } .pricing h2 { font-size: clamp(1.9rem,8vw,2.6rem); } .price-intro { margin-bottom: 28px; } .price-card { padding: 20px; gap: 12px; } .price-text { font-size: .9rem; } .price-step { padding: 6px 10px; font-size: .64rem; } .price-note { padding: 14px; font-size: .82rem; } } /* ========================================================================== Hero içi "uygulama yakında" şeridi. Tıklanamaz: hiçbir veya