/* =================================================================== OCTA WEB DESIGN SYSTEM · octa.css Dil: saf siyah + canlı cyan/mor, ağır display tipografi (Anton), 3B perspektif, her yerde pill, katmanlı orb, renkli glow, scroll-reveal. leonardo.ai referans estetiği — Octa için AI/müzik + cyan/mor. KULLANIM: 'e fontları + bu dosyayı + sona octa.js'i ekle, sınıfları kullan. Tüm sistem :root token'larından sürülür — temayı değiştirmek = token'ı değiştir, her bileşen birlikte kayar. Renk/font değerlerini ELLE her yere yazma; token kullan. =================================================================== */ :root{ /* renk paleti */ --bg:#000; --ink:#fff; --dim:#8a8a92; --muted:#b8b8c0; --cyan:#22d3ee; --violet:#a855f7; --indigo:#6366f1; --green:#34d399; --gold:#fbbf24; --pink:#f472b6; --grad:linear-gradient(90deg,var(--cyan),var(--violet)); /* imza gradyan: cyan→mor */ /* form */ --pill:99px; --r-card:22px; --maxw:1280px; --ease:cubic-bezier(.2,.8,.2,1); /* imza easing — snappy + premium, her geçişte bunu kullan */ } /* ---------- reset + temel ---------- */ *{margin:0;padding:0;box-sizing:border-box} html{scroll-behavior:smooth} body{background:var(--bg);color:var(--ink);font-family:Inter,system-ui,sans-serif; -webkit-font-smoothing:antialiased;overflow-x:hidden;font-size:15px;line-height:1.5} a{color:inherit;text-decoration:none} img{display:block;max-width:100%} .wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px} /* ---------- TİPOGRAFİ ---------- 3 katman: Anton = devasa display (uppercase, sıkı), Archivo 900 = eyebrow/alt-başlık, Inter = gövde. Başlıklar HER ZAMAN uppercase + negatif letter-spacing + line-height<1. */ .display{font-family:Anton,Archivo,sans-serif;font-weight:400;text-transform:uppercase; letter-spacing:-.01em;line-height:.92} .eyebrow{font-family:Archivo;font-weight:700;text-transform:uppercase;letter-spacing:.18em; font-size:12px;color:var(--cyan)} .gtext{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent} /* gri→beyaz "uyanan" devasa başlık (octa.js scroll-reveal ile .in alır) */ .section-head{font-family:Anton;text-transform:uppercase;letter-spacing:-.01em;line-height:.92; font-size:clamp(36px,7vw,104px);color:#3a3a40;transition:color .6s ease} .section-head.in{color:#fff} /* ---------- PILL (leonardo imzası — tüm buton/etiketler pill) ---------- */ .pill{display:inline-flex;align-items:center;gap:8px;border-radius:var(--pill); padding:13px 26px;font-weight:600;font-size:15px;cursor:pointer;border:1px solid transparent; transition:transform .25s var(--ease),background .25s,color .25s,border-color .25s,filter .25s;white-space:nowrap} .pill:hover{transform:translateY(-2px)} .pill--solid{background:var(--ink);color:#000} .pill--solid:hover{background:var(--cyan)} .pill--ghost{background:rgba(255,255,255,.04);color:#fff;border-color:rgba(255,255,255,.22)} .pill--ghost:hover{border-color:#fff;background:rgba(255,255,255,.08)} .pill--grad{background:var(--grad);color:#000} .pill--grad:hover{filter:brightness(1.08)} /* ---------- NAV ---------- */ header{position:fixed;top:0;left:0;right:0;z-index:50;transition:background .3s,backdrop-filter .3s} header.scrolled{background:rgba(0,0,0,.6);backdrop-filter:blur(14px)} /* octa.js scroll>40px'te ekler */ nav{display:flex;align-items:center;justify-content:space-between;height:74px;max-width:var(--maxw);margin:0 auto;padding:0 28px} .logo{font-family:Anton;font-size:24px;letter-spacing:.02em} .logo b{color:var(--cyan)} .navlinks{display:flex;gap:30px;font-weight:500;font-size:15px;color:#e7e7ea} .navlinks a{opacity:.85;transition:opacity .2s}.navlinks a:hover{opacity:1} .navcta{display:flex;gap:12px;align-items:center} .navcta .pill{padding:10px 22px;font-size:14px} .burger{display:none;flex-direction:column;gap:5px;cursor:pointer} .burger span{width:24px;height:2px;background:#fff;border-radius:2px} /* ---------- ORB (Octa imzası — katmanlı radial + conic spin + blur halo + pulse) ---------- Her zaman 3 katman: .orb-halo (arka blur ışıltı) + .orb (gövde) + ::after (conic dönen highlight). */ .orb-wrap{position:relative;width:clamp(128px,14vw,176px);aspect-ratio:1;display:grid;place-items:center} .orb{position:absolute;inset:14%;border-radius:50%; background:radial-gradient(circle at 38% 34%,#fff 0%,#bff3ff 12%,var(--cyan) 33%,var(--indigo) 60%,var(--violet) 82%,#3b1a78 100%); box-shadow:0 0 60px 6px rgba(34,211,238,.45),0 0 130px 30px rgba(168,85,247,.32), inset -14px -20px 50px rgba(48,18,96,.7),inset 10px 12px 36px rgba(255,255,255,.35); animation:orbPulse 4.4s ease-in-out infinite} .orb::after{content:"";position:absolute;inset:0;border-radius:50%;mix-blend-mode:screen; background:conic-gradient(from 0deg,transparent,rgba(34,211,238,.5),transparent 40%,rgba(168,85,247,.5),transparent 75%); animation:spin 9s linear infinite;opacity:.7} .orb-halo{position:absolute;inset:-18%;border-radius:50%;filter:blur(34px);opacity:.6; background:radial-gradient(circle,rgba(34,211,238,.55),rgba(168,85,247,.35) 45%,transparent 70%); animation:orbPulse 4.4s ease-in-out infinite} /* ---------- HERO: 3B perspektif tünel (scroll'da içinden uçar — octa.js sürer) ---------- */ .hero{position:relative;height:200vh} /* uzun = scroll boyunca fly-through */ .hero-stage{position:sticky;top:0;height:100vh;overflow:hidden;display:grid;place-items:center} .hero-stage::before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none; background:radial-gradient(ellipse 46% 52% at 50% 46%,#000 26%,rgba(0,0,0,.74) 50%,transparent 78%)} .tunnel{position:absolute;inset:0;perspective:560px;perspective-origin:50% 46%;will-change:transform,opacity} .tunnel .w{position:absolute;left:50%;top:50%;font-family:Anton;text-transform:uppercase; color:var(--violet);white-space:nowrap;font-size:12vw;line-height:.82;letter-spacing:-.02em} .tunnel .top {transform:translate(-50%,-50%) translateY(-31vh) rotateX(58deg); transform-origin:50% 100%} .tunnel .bottom{transform:translate(-50%,-50%) translateY(31vh) rotateX(-58deg);transform-origin:50% 0%} .tunnel .left {transform:translate(-50%,-50%) translateX(-33vw) rotateY(52deg); transform-origin:100% 50%;font-size:8.5vw} .tunnel .right {transform:translate(-50%,-50%) translateX(33vw) rotateY(-52deg);transform-origin:0% 50%;font-size:8.5vw} .hero-center{position:relative;z-index:3;text-align:center;display:grid;gap:20px;justify-items:center;padding:0 24px} .hero-center h1{font-family:Archivo;font-weight:900;text-transform:uppercase;letter-spacing:-.02em; font-size:clamp(30px,4.6vw,64px);line-height:.98} .hero-sub{color:#cfcfd6;max-width:520px;font-size:17px} .hero-cta{display:flex;gap:14px;flex-wrap:wrap;justify-content:center} .scrollhint{position:absolute;bottom:18px;left:50%;transform:translateX(-50%);z-index:1; font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--dim);opacity:.55} .scrollhint::after{content:"";display:block;width:1px;height:34px;margin:10px auto 0; background:linear-gradient(#fff,transparent);animation:dropline 1.8s ease-in-out infinite} /* ---------- SCROLL-REVEAL (octa.js IntersectionObserver .in ekler) ---------- Her bölüm/öğeye .reveal ver; sırayla gelsin diye .d1/.d2/.d3 gecikmeleri. */ .reveal{opacity:0;transform:translateY(40px);transition:opacity .8s ease,transform .8s var(--ease)} .reveal.in{opacity:1;transform:none} .reveal.d1{transition-delay:.08s}.reveal.d2{transition-delay:.16s}.reveal.d3{transition-delay:.24s} /* İLK EKRAN girişi: .reveal octa.js observer'a bağlı → yavaş yüklemede hero JS gelene dek SİYAH kalır. Hero/header'ı .rise ile ver: JS'siz, sadece CSS ile load'da hemen süzülür. */ .rise{opacity:0;animation:rise .8s var(--ease) both} .rise.d1{animation-delay:.08s}.rise.d2{animation-delay:.16s}.rise.d3{animation-delay:.24s} @keyframes rise{from{opacity:0;transform:translateY(40px)}to{opacity:1;transform:none}} /* ---------- 3B STATS (rotateX tünel + devasa dikey-gradyan rakam) ---------- */ .stats{padding:120px 0;perspective:700px;text-align:center} .stats .row{display:flex;justify-content:center;gap:clamp(20px,5vw,80px);transform:rotateX(20deg);transform-style:preserve-3d} .stat{display:grid;justify-items:center} .stat .n{font-family:Anton;font-size:clamp(70px,13vw,190px);line-height:.8; background-clip:text;-webkit-background-clip:text;color:transparent; background-image:linear-gradient(180deg,#67e8f9,#0891b2)} /* default: cyan */ .stat.gold .n{background-image:linear-gradient(180deg,#fcd34d,#d97706)} .stat.green .n{background-image:linear-gradient(180deg,#6ee7b7,#059669)} .stat.violet .n{background-image:linear-gradient(180deg,#d8b4fe,#7c3aed)} .stat .l{font-family:Archivo;font-weight:900;text-transform:uppercase;letter-spacing:.04em; font-size:clamp(13px,1.3vw,18px);margin-top:8px;color:#e7e7ea;max-width:200px} /* ---------- ÖZELLİK BLOĞU (zig-zag copy + demo) ---------- */ .feat{display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:center;padding:90px 0;min-height:78vh} .feat .copy{display:grid;gap:22px;align-content:center;max-width:460px} .feat .copy h3{font-family:Anton;text-transform:uppercase;font-size:clamp(34px,4.4vw,62px);line-height:.92} .feat .copy p{color:var(--muted);font-size:17px} .feat .copy .row{display:flex;gap:12px;flex-wrap:wrap} .feat .demo{height:420px;border-radius:var(--r-card);border:1px solid rgba(255,255,255,.08); position:relative;overflow:hidden;display:grid;place-items:center} .feat:nth-child(even) .demo{order:-1} /* sıra atla = zig-zag */ .demo-a{background:radial-gradient(120% 120% at 30% 20%,#1b1140,#000)} .demo-b{background:radial-gradient(120% 120% at 70% 30%,#06283d,#000)} .demo-c{background:radial-gradient(120% 120% at 50% 80%,#3a1030,#000)} /* ---------- EQ BARLARI (canlı ekolayzır — demo kutularına koy) ---------- */ .bars{display:flex;gap:5px;align-items:flex-end;height:120px} .bars i{width:7px;background:linear-gradient(var(--cyan),var(--violet));border-radius:4px;animation:eq 1.1s ease-in-out infinite} /* ---------- BENTO KUBBE-KARTLAR (vivid blok + dev index + kalın isim + dairesel ok + 3B hover) ---------- */ .bento{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;perspective:1500px} .b{position:relative;overflow:hidden;border-radius:155px 155px 28px 28px;padding:40px 32px 32px;min-height:372px; color:#0b0b14;display:flex;flex-direction:column;transform-style:preserve-3d; transition:transform .45s var(--ease),box-shadow .45s} /* arka plan = inline vivid gradyan */ .b::after{content:"";position:absolute;inset:0;pointer-events:none;mix-blend-mode:soft-light; background:radial-gradient(82% 46% at 50% -6%,rgba(255,255,255,.6),transparent 56%)} /* üst kubbe ışığı */ .b>*{position:relative;z-index:1} .b .bigidx{font-family:Anton;font-size:clamp(58px,6vw,90px);line-height:.9;color:rgba(11,11,20,.19); text-align:center;letter-spacing:-.03em;margin-bottom:auto} .b .nm{font-family:Anton;text-transform:uppercase;font-size:clamp(25px,2.4vw,36px);line-height:.9;letter-spacing:-.01em} .b .ds{font-size:14.5px;line-height:1.5;color:rgba(11,11,20,.76);margin-top:12px;font-weight:500;max-width:31ch} .b .go{margin-top:22px;width:48px;height:48px;border-radius:50%;border:2px solid rgba(11,11,20,.36); display:grid;place-items:center;font-size:20px;transition:transform .35s,background .35s,color .35s,border-color .35s} .b:hover{transform:translateY(-10px) rotateX(5deg);box-shadow:0 42px 92px rgba(0,0,0,.55)} .b:hover .go{background:#0b0b14;color:#fff;border-color:#0b0b14;transform:translateX(5px)} /* ---------- MARQUEE (sonsuz akan renkli pill chip'ler) ---------- */ .marquee{padding:70px 0;overflow:hidden;-webkit-mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)} .track{display:flex;gap:18px;width:max-content;animation:scrollx 26s linear infinite} /* içeriği 2x kopyala = dikişsiz */ .chip{font-family:Archivo;font-weight:900;text-transform:uppercase;letter-spacing:.02em;font-size:22px; padding:18px 34px;border-radius:var(--pill);color:#06121a;white-space:nowrap;background:var(--cyan)} .chip.violet{background:var(--violet);color:#160a2b}.chip.green{background:var(--green)} .chip.gold{background:var(--gold)}.chip.pink{background:var(--pink)} /* ---------- FOOTER ---------- */ footer{border-top:1px solid rgba(255,255,255,.08);padding:64px 0 40px;margin-top:40px} .fgrid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px} .fcol h4{font-family:Archivo;font-weight:900;text-transform:uppercase;letter-spacing:.1em;font-size:12px;color:#9a9aa2;margin-bottom:16px} .fcol a{display:block;color:#cfcfd6;padding:6px 0;font-size:14px;opacity:.8} .fcol a:hover{opacity:1;color:var(--cyan)} .social{display:flex;gap:14px;margin-top:18px} .social span{width:34px;height:34px;border-radius:50%;border:1px solid rgba(255,255,255,.16);display:grid;place-items:center;font-size:13px;color:#cfcfd6;transition:.2s;cursor:pointer} .social span:hover{background:#fff;color:#000} .fbar{display:flex;justify-content:space-between;color:#7a7a82;font-size:13px;margin-top:46px;flex-wrap:wrap;gap:10px} /* ---------- KEYFRAMES ---------- */ @keyframes orbPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.05)}} @keyframes spin{to{transform:rotate(360deg)}} @keyframes dropline{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top} 50.1%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}} @keyframes eq{0%,100%{height:18px}50%{height:110px}} @keyframes scrollx{to{transform:translateX(-50%)}} /* ---------- RESPONSIVE (leonardo mobil: hamburger + tek sütun) ---------- */ @media(max-width:980px){.bento{grid-template-columns:repeat(2,1fr)}} @media(max-width:860px){ .navlinks,.navcta .pill:not(.navcta-keep){display:none} .burger{display:flex} .feat{grid-template-columns:1fr;min-height:auto;gap:30px} .feat:nth-child(even) .demo{order:0}.feat .demo{height:300px} .stats .row{flex-direction:column;gap:36px;transform:none} .fgrid{grid-template-columns:1fr 1fr} .tunnel .left,.tunnel .right{display:none}.tunnel .w{font-size:24vw} } @media(max-width:560px){.bento{grid-template-columns:1fr}.b{border-radius:120px 120px 24px 24px;min-height:330px}.fgrid{grid-template-columns:1fr}} /* erişilebilirlik: hareketi azalt tercih edenlerde animasyonları kıs */ @media(prefers-reduced-motion:reduce){ *{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important} html{scroll-behavior:auto} }