/* ============================================================================ ANASAYFA v3 GOVDESI — hero + bantlar + kurulum + SSS + kapanis CTA. Kabuk (duyuru/nav/mega/mobil/altlik) + palet + tipografi + .ci-btn artik public/css/chrome.css icinde ve TUM sayfalarda yuklu. Bu dosya onun USTUNE gelir. Plan: arch/plans/20260806-faz2-chrome-yayilimi.json Buradaki global kurallar (*, html, body, a, ul, img) YALNIZ anasayfada gecerli: bu sayfada style.css (Tailwind) yuklenmez, taban reset gerekiyor. Siniflar ci- onekli — cakisma korumasi. ========================================================================== */ *{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth;-webkit-text-size-adjust:100%} body{ font-family:'Onest',-apple-system,system-ui,sans-serif; font-size:16px;line-height:1.6;color:var(--ink);background:#fff; -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility; } a{color:inherit;text-decoration:none} a:focus-visible,button:focus-visible,summary:focus-visible{outline:2px solid var(--ink);outline-offset:3px} ul{list-style:none} img{max-width:100%} /* ============ hero ============ */ .ci-hero{ position:relative;text-align:center;padding:142px 0 16px;margin-top:-78px; /* Duraklar YÜZDE değil PİKSEL: hero bizde daha uzun, yüzde verilirse mavi bant zipchat'takinin iki katına yayılıyor. Ölçülen zipchat durakları birebir. */ background:linear-gradient(180deg,#B6E8FF 0px,#CBE6FF 120px,#DEE8F9 300px,#EBECEE 450px,#F2EEE9 560px,#F7F3EE 700px,#fff 800px); } .ci-badge{ display:inline-flex;align-items:center;background:rgba(255,255,255,.72);border:1px solid #fff; border-radius:9999px;padding:2px 12px;font-size:14px;font-weight:500;color:var(--ink); } h1.ci-d1{margin:24px auto 18px;max-width:19ch} h1.ci-d1 em{font-style:normal;color:var(--coral)} .ci-hero .ci-lead{max-width:700px;margin:0 auto 30px} .ci-hero .ci-lead strong{color:var(--ink);font-weight:600} .ci-trustline{ display:flex;gap:12px 32px;justify-content:center;flex-wrap:wrap;align-items:center; margin-top:46px;font-size:14px;color:var(--ink); } .ci-trustline .it{display:inline-flex;align-items:center;gap:8px} .ci-trustline svg{color:var(--ink-4)} /* ============ durum etiketleri ============ */ /* ROZET TAKSONOMİSİ: hap rozet YALNIZ olgunluk taşır (Hazır/Yakında). "AI" bir durum değil, yeteneğin türü — ayrı işaret; tarih de hap değil. */ .ci-t-pill{font-size:11.5px;font-weight:500;border-radius:99px;padding:3.5px 10px;line-height:1.4} .ci-t-ai{background:var(--tag-bg);color:var(--tag-fg)} .ci-t-ok{background:var(--tag-bg);color:var(--tag-fg)} .ci-t-soon{background:#EFF2F5;color:var(--ink-3)} .ci-t-new{background:var(--new-bg);color:var(--new-fg)} .ci-aimark{ font-size:10.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--tag-fg); display:inline-flex;align-items:center;gap:5px;margin-left:9px;position:relative;top:-1px; } .ci-aimark:before{content:"";width:5px;height:5px;border-radius:99px;background:var(--tag-fg)} .ci-datemark{font-size:12.5px;color:var(--ink-4);font-weight:500;margin-bottom:2px} /* ============ bölümler ============ */ /* Yüzey ritmi: sayfa zemin bölgelerine ayrılır. .cont = önceki bölümün zeminini sürdürür. */ section.ci-band{padding:48px 0} section.ci-band.slim{padding:36px 0} /* hero'dan hemen sonraki bant: trust chip satırı ile altındaki blok arası boşluk (orijinal 40+36=76px) */ .ci-hero + section.ci-band{padding-top:28px} section.ci-band.cont{padding-top:16px} .ci-headblock{max-width:660px;margin-bottom:40px} .ci-headblock .ci-lead{margin-top:8px;color:var(--ink)} /* prose — GEO özeti + duruş paragrafı */ .ci-prose{max-width:830px;margin:0 auto;text-align:center;font-size:15.5px;line-height:1.75;color:var(--ink-2)} .ci-prose a{color:var(--coral);text-decoration:underline;text-underline-offset:3px} /* niş bandı (logo şeridinin yayınlanabilir kısmı — logo izinleri K1'de) */ .ci-logolead{text-align:center;font-size:15.5px;color:var(--ink-3)} /* kayan logo şeridi — içerik 2 kez basılır, -50%'de başa döner (kesintisiz döngü). gap DEĞİL margin-right: gap son elemandan sonra boşluk bırakmaz, döngüde zıplama yapar. */ .ci-logomarquee{ margin-top:20px;overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent); mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent); } .ci-logotrack{display:flex;align-items:center;width:max-content;animation:ci-logoscroll 40s linear infinite} .ci-logotrack img{height:32px;width:auto;flex:none;margin-right:64px;opacity:.68;filter:grayscale(1);transition:opacity .25s,filter .25s} .ci-logomarquee:hover .ci-logotrack{animation-play-state:paused} .ci-logotrack img:hover{opacity:1;filter:grayscale(0)} @keyframes ci-logoscroll{from{transform:translateX(0)}to{transform:translateX(-50%)}} @media(prefers-reduced-motion:reduce){.ci-logotrack{animation:none}} /* kartlar — gölgesiz, tonlu dolgu. Yüzey kuralı: her zemin için OPAK token. */ .ci-grid{display:grid;gap:16px} .ci-g4{grid-template-columns:repeat(4,1fr)} .ci-g3{grid-template-columns:repeat(3,1fr)} .ci-card{ background:var(--cream);border:1px solid var(--line-soft);border-radius:var(--r-md); min-height:238px;padding:24px;display:flex;flex-direction:column;gap:8px; transition:border-color .18s ease,background .18s ease; } .ci-card:hover{border-color:rgba(0,0,0,.12)} .ci-card h4,.ci-pc h4{font-size:20px;line-height:1.32;font-weight:500;letter-spacing:-.04em} /* Kart metni 2 satıra kırpılır; link .go margin-top:auto ile aşağıda kalır. */ .ci-card p{font-size:16px;line-height:1.44;color:var(--ink-2); display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .ci-card .go{font-size:16px;font-weight:500;color:var(--ink);display:inline-flex;align-items:center;gap:6px;margin-top:auto;padding-top:16px} .ci-card:hover .go{color:var(--coral)} .ci-card .go svg{transition:transform .18s ease} .ci-card:hover .go svg{transform:translateX(3px)} .ci-card .badge-row{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:2px} .ci-card.cta{align-items:center;justify-content:center;text-align:center;gap:6px} .ci-card.cta .spark{ width:44px;height:44px;border-radius:12px;background:#fff;border:1px solid var(--line-soft); display:grid;place-items:center;color:var(--tag-fg);margin-bottom:10px; } .ci-card.cta p{-webkit-line-clamp:2;flex:none;color:var(--ink-3)} .ci-card.cta .pill-btn{ margin-top:12px;background:#fff;border:1px solid var(--line);border-radius:99px; padding:10px 20px;font-size:16px;font-weight:500;color:var(--ink);display:inline-block; } /* kurulum adımları */ .ci-setup{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center} .ci-srcpanel{ min-height:378px;background:var(--cream);border:1px solid var(--line-soft);border-radius:var(--r-md); padding:32px;display:flex;flex-direction:column;justify-content:center; } .ci-src{ display:flex;align-items:center;gap:11px;padding:13px 15px;border:1px solid var(--line-soft); background:rgba(255,255,255,.76);border-radius:12px;margin-bottom:8px;font-size:14px;font-weight:500; } .ci-src:last-child{margin-bottom:0} .ci-src .tick{margin-left:auto;width:19px;height:19px;border-radius:99px;background:var(--new-fg);display:grid;place-items:center;flex:none} /* Durum işareti adıma göre değişir: alındı (yeşil) · bağlandı (mavi) · ekiple (mürekkep). Renk tek başına bilgi taşımasın diye ikonun ÇİZİMİ de farklı. */ .ci-src .tick-link{background:#4C7DF0} .ci-src .tick-team{background:var(--ink)} .ci-src.opt{background:rgba(255,255,255,.42);border-style:dashed;color:var(--ink-3);font-weight:400} .ci-src.opt .opttag{margin-left:auto;font-size:12px;color:var(--ink-4)} /* --- sekmeli kurulum paneli --- */ /* Gizleme .js-tabs altında: bu sınıfı YALNIZ script ekler. JS çalışmazsa CSS hiçbir grubu gizlemez; görünürlüğü HTML'deki hidden belirler (1. grup açık, 2-3 kapalı) — yani sayfa sekme öncesi hâline düşer. hidden'ı baştan koymak FOUC'u önler. */ .ci-srchead{font-size:13px;font-weight:600;color:var(--ink-3);margin-bottom:14px} .ci-setup.js-tabs .ci-srcgroup{display:none} .ci-setup.js-tabs .ci-srcgroup.is-on{display:block} .ci-setup.js-tabs .ci-srcgroup:focus-visible{outline:2px solid var(--ink);outline-offset:6px;border-radius:8px} /* Giriş: liste satırları sırayla belirir — tek yetkili hareket anı, sayfanın geri kalanı sakin. */ .ci-setup.js-tabs .ci-srcgroup.is-on .ci-srchead, .ci-setup.js-tabs .ci-srcgroup.is-on .ci-src{ animation:ci-srcin .42s cubic-bezier(.16,1,.3,1) both; } .ci-setup.js-tabs .ci-srcgroup.is-on .ci-src:nth-child(2){animation-delay:.04s} .ci-setup.js-tabs .ci-srcgroup.is-on .ci-src:nth-child(3){animation-delay:.08s} .ci-setup.js-tabs .ci-srcgroup.is-on .ci-src:nth-child(4){animation-delay:.12s} .ci-setup.js-tabs .ci-srcgroup.is-on .ci-src:nth-child(5){animation-delay:.16s} .ci-setup.js-tabs .ci-srcgroup.is-on .ci-src:nth-child(6){animation-delay:.2s} .ci-setup.js-tabs .ci-srcgroup.is-on .ci-src:nth-child(7){animation-delay:.24s} @keyframes ci-srcin{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}} /* DOM sırası: tablist ÖNCE, panel SONRA (WAI-ARIA tab pattern; klavye bu sırayı izler). İKİ KOLONDA panel görsel olarak solda dursun diye `order` ile yer değiştirilir — order YALNIZ görseli çevirir, klavye sırası DOM'da kalır. TEK KOLONDA order sıfırlanır (aşağıda, max-width:900px): dikeyde görsel sıra ile klavye sırasının ayrışması kafa karıştırır, o yüzden orada DOM sırası aynen görünür. */ .ci-setup .ci-srcpanel{order:1} .ci-setup .ci-steplist{order:2} .ci-steplist{display:flex;flex-direction:column} /* Adımlar