/* ============================================================================ Ortak bileşen kütüphanesi (W-10…W-25). Bu dosya ana sayfaya ÖZGÜ değil — sonraki sayfalar bunu olduğu gibi kullanır. Sayfaya özgü her şey anasayfa.css'te. ============================================================================ */ /* ---- NAV ------------------------------------------------------------------ */ .nav{position:relative;z-index:1000;background:var(--kagit);border-bottom:1px solid var(--cizgi)} .nav-ic{display:flex;align-items:center;gap:var(--b4);min-height:var(--b6)} .marka{display:flex;align-items:center;gap:var(--b2);font-family:var(--aile-display);font-size:var(--t5);line-height:1} /* İşaret = Konsept B (marka/ikon-glif-koyu.svg). Gövde `stroke:currentColor` yani kelime işaretinin rengini izliyor (koyu bölümde de doğru); turuncu nokta AYRI tokende, çünkü turuncu açık zeminde gösterge eşiğini bile geçmiyor (2,91:1 beyaz · 2,58:1 krem — ölçüldü) ve bu yüzden SALT dekoratif. */ .marka-mim{width:var(--t5);height:var(--t5);flex:none} .mim-nokta{fill:var(--nokta)} /* Kelime işareti = `marka/logo-yatay.svg`in kelime path'i, Bricolage Grotesque 700 yola çevrilmiş (font YOLU bütçe tarafından kapalı: latin alt kümesi 41.344 B, METİN payı 4.206 B — ölçüldü 11 Eki). `width` YAZILMIYOR: symbol bir viewBox taşıdığı için tarayıcı genişliği KENDİ en-boy oranından hesaplıyor, yani burada sihirli bir sayı durmuyor. Kutu yüksekliği `--t5` ve viewBox markanın logo kutusuyla aynı birim ölçeğinde (96 birim), yani işaret↔kelime oranı marka dosyasındaki oranı (%4 içinde) koruyor. `fill:currentColor` symbol gövdesinde: açık başlıkta çam, koyu ayakta krem. */ .marka-yazi{height:var(--t5);flex:none} .nav-menu{display:flex;align-items:center;gap:var(--b4);margin-inline-start:var(--b5)} .nav-menu a{font-size:var(--t9);line-height:var(--t9-s);color:var(--soluk);padding-block:var(--b1)} .nav-menu a:hover{color:var(--murekkep)} .nav-sag{display:flex;align-items:center;gap:var(--b2);margin-inline-start:auto} .nav-sag .nav-giris{font-size:var(--t9);color:var(--soluk);padding-inline:var(--b2)} .nav-sag .nav-giris:hover{color:var(--murekkep)} @media (max-width:991px){ .nav-menu{display:none} .nav-ic{min-height:calc(var(--b5) + var(--b2))} } @media (max-width:420px){ .nav-sag .nav-giris:not([data-giris]){display:none} } /* ---- BUTON ---------------------------------------------------------------- */ .dg{ display:inline-flex;align-items:center;justify-content:center;gap:var(--b2); min-height:calc(var(--b5) - var(--b1));padding-inline:var(--b4); border-radius:var(--y-hap);border:1px solid transparent; font-size:var(--t8);font-weight:500;line-height:1;cursor:pointer;white-space:nowrap; transition:background-color var(--sure-kisa) var(--egri),color var(--sure-kisa) var(--egri),border-color var(--sure-kisa) var(--egri),transform var(--sure-kisa) var(--egri); } .dg:active{transform:translateY(1px)} .dg-1{background:var(--murekkep);color:var(--kagit)} .dg-1:hover{background:var(--koyu-yuzey)} .dg-2{background:var(--kagit);color:var(--murekkep);border-color:var(--cizgi)} .dg-2:hover{border-color:var(--murekkep)} .dg-3{background:transparent;padding-inline:0;min-height:auto;color:var(--murekkep);border:0} .dg-3 .ok{transition:transform var(--sure-kisa) var(--egri)} .dg-3:hover .ok{transform:translateX(var(--b1))} .koyu .dg-1{background:var(--kagit);color:var(--murekkep)} .koyu .dg-1:hover{background:var(--koyu-soluk)} .koyu .dg-2{background:transparent;color:var(--kagit);border-color:var(--koyu-cizgi)} .koyu .dg-2:hover{border-color:var(--kagit)} .koyu .dg-3{color:var(--kagit)} .dg-cift{display:flex;flex-wrap:wrap;gap:var(--b3)} /* ---- BÖLÜM BAŞLIĞI (eyebrow + başlık + alt metin) ------------------------- */ .kas{display:inline-flex;align-items:center;gap:var(--b2);color:var(--soluk)} .kas::before{content:"";width:var(--b2);height:var(--b2);border-radius:var(--y-hap);background:var(--nokta);flex:none} .bas{display:flex;flex-direction:column;gap:var(--b3);max-width:var(--olcu-bas)} .bas .g-alt{max-width:var(--olcu-orta)} .bas-orta{align-items:center;text-align:center;margin-inline:auto;max-width:var(--olcu-bas)} .bas-orta .g-alt{margin-inline:auto} .bas + *{margin-block-start:var(--b5)} .bas .d2 .ikinci{color:var(--soluk)} /* ---- KART ----------------------------------------------------------------- */ .kart{border:1px solid var(--cizgi);border-radius:var(--y-kart);background:var(--kagit);overflow:hidden} .koyu .kart{border-color:var(--koyu-cizgi);background:var(--koyu-yuzey)} /* ---- ÖZELLİK IZGARASI (ikon + başlık + açıklama) -------------------------- */ .oz{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--b4) var(--b5)} .oz-m{display:flex;gap:var(--b3)} .oz-kutu{ width:calc(var(--b5) - var(--b1));height:calc(var(--b5) - var(--b1));flex:none; display:grid;place-items:center; background:var(--kagit);border:1px solid var(--cizgi);border-radius:var(--y-kart); box-shadow:var(--golge);color:var(--murekkep); } .oz-m h4{font-size:var(--t8);line-height:var(--t8-s);font-weight:500;margin-block-end:var(--b1)} .oz-m p{font-size:var(--t9);line-height:var(--t9-s);color:var(--soluk)} @media (max-width:991px){ .oz{grid-template-columns:1fr} } /* ---- 4'LÜ ÇIPLAK IZGARA (güven bandı) ------------------------------------- */ .dortlu{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--b4)} .dortlu h4{font-size:var(--t8);line-height:var(--t8-s);font-weight:500;margin-block:var(--b2) var(--b1)} .dortlu p{font-size:var(--t9);line-height:var(--t9-s);color:var(--koyu-soluk)} @media (max-width:991px){ .dortlu{grid-template-columns:repeat(2,1fr)} } @media (max-width:640px){ .dortlu{grid-template-columns:1fr} } /* ---- İSTATİSTİK BANDI ----------------------------------------------------- */ .ist{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--b3)} .ist-m{padding-inline-start:var(--b4);border-inline-start:1px solid var(--cizgi);display:flex;flex-direction:column;gap:var(--b3)} .ist-n{font-family:var(--aile-display);font-size:var(--t2);line-height:1;font-variant-numeric:tabular-nums} .ist-e{font-size:var(--t8);line-height:var(--t8-s);color:var(--soluk)} .kaynak-not{margin-block-start:var(--b5);padding-block-start:var(--b4);border-block-start:1px solid var(--cizgi);font-size:var(--t9);line-height:var(--t9-s);color:var(--soluk);max-width:var(--olcu-bas)} @media (max-width:767px){ .ist{grid-template-columns:1fr;gap:var(--b4)} .ist-m{gap:var(--b1)} } /* ---- OTO-SEKME ------------------------------------------------------------ */ .sekmeler{display:grid;grid-template-columns:1fr 1fr;gap:var(--b6);align-items:start} .sekme-liste{display:flex;flex-direction:column;gap:var(--b4)} .sekme{ display:grid;grid-template-columns:auto 1fr;gap:var(--b3); text-align:start;background:none;border:0;padding:0;cursor:pointer; } .sekme-cubuk{width:5px;border-radius:var(--y-hap);background:var(--cizgi);overflow:hidden;position:relative} .sekme-cubuk::after{content:"";position:absolute;inset-inline:0;top:0;height:0;background:var(--murekkep);transition:height var(--sure) linear} .sekme[aria-selected="true"] .sekme-cubuk::after{height:100%;transition-duration:6s} .sekme-yazi{display:flex;flex-direction:column;gap:var(--b2);padding-block:var(--b1)} .sekme-ust{display:flex;align-items:center;gap:var(--b2);flex-wrap:wrap} .chip{display:inline-flex;align-items:center;border:1px solid var(--cizgi);background:var(--kagit);border-radius:var(--y-hap);padding:var(--b1) var(--b2)} .sekme-ad{font-size:var(--t6);line-height:var(--t6-s);font-weight:500} .sekme-ac{font-size:var(--t8);line-height:var(--t8-s);color:var(--soluk);display:none} .sekme[aria-selected="true"] .sekme-ac{display:block} .sekme[aria-selected="false"] .sekme-ad{color:var(--soluk)} .sekme-medya{position:relative;min-height:calc(var(--b7) * 4)} .sekme-panel{display:none} .sekme-panel.secili{display:block} @media (max-width:991px){ .sekmeler{grid-template-columns:1fr;gap:var(--b5)} .sekme-medya{min-height:0} } /* ---- CTA BANDI ------------------------------------------------------------ */ .cta{display:flex;flex-direction:column;align-items:center;text-align:center;gap:var(--b4)} .cta .d2{max-width:20ch} .cta-not{font-size:var(--t9);line-height:var(--t9-s);color:var(--koyu-soluk);max-width:var(--olcu-orta)} /* ---- FOOTER --------------------------------------------------------------- */ .ayak{background:var(--murekkep);color:var(--kagit)} .ayak-ust{display:grid;grid-template-columns:minmax(0,1.3fr) repeat(4,minmax(0,1fr));gap:var(--b5) var(--b4);padding-block:var(--b6);border-block-start:1px solid var(--koyu-cizgi)} .ayak-marka{display:flex;flex-direction:column;gap:var(--b3);max-width:34ch} .ayak-marka p{font-size:var(--t9);line-height:var(--t9-s);color:var(--koyu-soluk)} .ayak-kolon h3{margin-block-end:var(--b3);color:var(--koyu-soluk)} .ayak-kolon li{margin-block-end:var(--b2);font-size:var(--t9);line-height:var(--t9-s)} .ayak-kolon a:hover{text-decoration:underline;text-underline-offset:3px} .ayak-alt{display:flex;flex-wrap:wrap;align-items:center;gap:var(--b3) var(--b4);padding-block:var(--b4);border-block-start:1px solid var(--koyu-cizgi);color:var(--koyu-soluk)} .ayak-alt .mono{color:var(--koyu-soluk)} .ayak-sosyal{display:flex;gap:var(--b3);margin-inline-start:auto} .ayak-sosyal a{color:var(--koyu-soluk)} .ayak-sosyal a:hover{color:var(--kagit)} @media (max-width:991px){ .ayak-ust{grid-template-columns:repeat(2,minmax(0,1fr))} .ayak-marka{grid-column:1 / -1} } @media (max-width:520px){ .ayak-ust{grid-template-columns:1fr} .ayak-sosyal{margin-inline-start:0} } /* İki sütunlu "şunu yapar / şunu yapmaz" listesi. `kurulum.css`ten BURAYA taşındı (kopyalanmadı) çünkü ikinci bir sayfa de kullanıyor: aynı kavramın iki yazımı yan yana bayatlar. Eski ad `.kur-ikili` kurulum sayfasına özeldi. */ .ikili{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--b4);margin-block-start:var(--b4)} @media (max-width:991px){ .ikili{grid-template-columns:1fr} } .ikili h3{font-size:var(--t8);line-height:var(--t8-s);font-weight:500;margin-block-end:var(--b2)} .ikili li{display:flex;gap:var(--b2);font-size:var(--t9);line-height:var(--t9-s);color:var(--soluk)} .ikili ul{display:flex;flex-direction:column;gap:var(--b2)} .ikili svg{ width:var(--b3);height:var(--b3);flex:none;margin-block-start:calc(var(--b1) / 2); fill:none;stroke:var(--vurgu);stroke-width:2;stroke-linecap:round;stroke-linejoin:round; } /* ---- SAYFA İSKELETİ (iç sayfa başlığı) ------------------------------------ */ /* Ana sayfanın hero'su bu değil: iç sayfalar (güvenlik, blog, sektör…) aynı başlık bloğunu kullanır. Süreğen döngü BURADA duruyor — Samet'in 29 Eylül talimatı her sayfada hareket istiyor ve onu sayfa sayfa yazmak aynı kavramın N yazımı olurdu. Süre referansın ölçülen Lottie döngülerinden biri (6,47 sn). */ .iskelet{padding-block:var(--b6) var(--b5);border-block-end:1px solid var(--cizgi)} .iskelet .bas{max-width:var(--olcu-bas)} .iskelet .kas::before{animation:iskeletNabiz 6.47s var(--egri) infinite} /* %100 GÖRÜNÜR karede bitiyor: reduced-motion'da donduğunda kaybolan bir şey yok. */ @keyframes iskeletNabiz{0%,100%{opacity:1}50%{opacity:.3}} .iskelet-ust{display:flex;flex-wrap:wrap;gap:var(--b2) var(--b4);margin-block-start:var(--b4);font-size:var(--t9);line-height:var(--t9-s);color:var(--soluk)} .iskelet-ust > * {display:flex;align-items:center;gap:var(--b2)} /* ---- KART IZGARASI (dizin sayfaları: blog · sektör · entegrasyon) --------- */ .kizgara{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--b4)} .kizgara-m{display:flex;flex-direction:column;gap:var(--b2);padding:var(--b4);block-size:100%} .kizgara-m h3{font-size:var(--t8);line-height:var(--t8-s);font-weight:500} /* ⚠️ 29 Eylül: bu kural `.kizgara-m p` idi (0,2,0) ve `.kizgara-et`i (0,1,0) EZİYORDU — yani ızgara kartının mikro etiketi 10px UPPER yerine 14px gövde olarak çiziliyordu. ÖLÇÜLDÜ: `guvenlik.html`de 9, `yaklasim.html`de 3 etiket bu hâldeydi, yani kusur canlı. Düzeltme özgüllük savaşıyla değil KAPSAMLA: sınıfsız paragraf gövde metnidir, sınıflı paragraf kendi kuralını taşır. */ .kizgara-m p:not([class]){font-size:var(--t9);line-height:var(--t9-s);color:var(--soluk)} .kizgara-et{font-size:var(--tmicro);line-height:var(--t9-s);letter-spacing:.09em;text-transform:uppercase;color:var(--soluk)} /* Bağlantı kartında hareket YALNIZ kenarlık + 1px kalkma: kutu ölçüsü değişmiyor (padding/kenarlık KALINLIĞI seçiliyle oynatılırsa ızgara zıplar). */ a.kizgara-m{color:inherit;text-decoration:none;transition:border-color var(--sure-kisa) var(--egri),transform var(--sure-kisa) var(--egri)} a.kizgara-m:hover{border-color:var(--murekkep);transform:translateY(-1px)} @media (max-width:991px){ .kizgara{grid-template-columns:repeat(2,1fr)} } @media (max-width:640px){ .kizgara{grid-template-columns:1fr} } /* ---- FAQ AKORDEON --------------------------------------------------------- */ /* `
` — JS YOK, yani betik yüklenmese de sorular açılır. Ad `.sss` DEĞİL: `.sss` fiyat sayfasında İKİ SÜTUNLU soru-cevap ızgarası olarak zaten kullanılıyor (farklı kavram, aynı ada iki anlam yükleme yok). */ .akordeon{display:flex;flex-direction:column;border-block-start:1px solid var(--cizgi);max-width:var(--olcu-bas)} .akordeon-m{border-block-end:1px solid var(--cizgi)} .akordeon-m > summary{ display:flex;align-items:center;justify-content:space-between;gap:var(--b3); min-block-size:var(--b5);padding-block:var(--b3);cursor:pointer;list-style:none; font-size:var(--t8);line-height:var(--t8-s);font-weight:500; } .akordeon-m > summary::-webkit-details-marker{display:none} .akordeon-m > summary::after{ content:"";inline-size:var(--b2);block-size:var(--b2);flex:none; border-inline-end:2px solid var(--soluk);border-block-end:2px solid var(--soluk); rotate:45deg;transition:rotate var(--sure-kisa) var(--egri); } .akordeon-m[open] > summary::after{rotate:-135deg} .akordeon-g{padding-block-end:var(--b4);font-size:var(--t9);line-height:var(--t9-s);color:var(--soluk);max-width:var(--olcu-orta)} .akordeon-m[open] .akordeon-g{animation:akordeonAc var(--sure-kisa) var(--egri) both} /* `both` + görünür son kare: donduğunda içerik GÖRÜNÜR kalır. */ @keyframes akordeonAc{from{opacity:0;transform:translateY(calc(-1 * var(--b1)))}to{opacity:1;transform:none}} /* ── Satır içi kod ────────────────────────────────────────────────────────── TEK YAZIM. 29 Eylül'de ölçüldü: aynı kural `demo.css` ve `llm-info.css`'te İKİ KOPYA olarak duruyordu (biri boşluklu biri boşluksuz bildirimle, yani ayrışmaya açık) ve `karsilastirma.html`'in tek ``'u HİÇBİR kopyayı yüklemediği için STİLSİZDİ. Buraya taşımak duplikasyonu kaldırıyor ve o elemanı da kapsıyor. `` taşıyan sayfalar: demo 16 · llm-info 13 · karsilastirma 1 · kalan 9 sayfa 0. */ #ana code{font-family:var(--aile-govde);font-size:.95em;padding-inline:var(--b1);border-radius:var(--y-hap);background:var(--kagit2);color:var(--murekkep)} .bolum-tint #ana code,#ana .bolum-tint code{background:var(--kagit)} /* ---- ŞEMA: sayfanın KENDİ anlattığı mekanizmanın çizimi -------------------- */ /* ORTAK dosyada, çünkü `siteUrunArama.test.ts:114` stil kümesini ORTAK_CSS'e BİREBİR pinliyor ve `:133` her sınıfı ortak kütüphanede arıyor; ayrı bir `gorsel.css` denendi, iki kapı da HAKLI olarak kırmızı verdi. `izgara.css`teki `.esli-medya` kullanılamaz: seçicisi `.esli > .esli-medya` (gerekçe `izgara.css:148`) ve sayfaların çoğu o dosyayı yüklemiyor. 🔴 Arayüz çizimi "Interface illustration" etiketi TAŞIMAK ZORUNDA (`urun.css:82` kararı · `siteAnasayfa.test.ts:1491` kapısı). 🔴 `.yt` yer tutucularının YERİNE GEÇMEZ: 21 yuvanın 18'i müşteri izni / ölçülmüş sayı / belge ister (OLCUM.md §5.2); `data-yt` ve tripwire duruyor. CSP `style-src 'self'`: yalnız SVG sunum niteliği, renk `currentColor`. Oran `viewBox`tan gelir → yükseklik hesaplanmadan ayrılır (CLS yok). Mono aile YOK: `temel.css:54` onu bilerek kaldırmış. */ .sema{margin:0;position:relative;min-width:0;color:var(--murekkep)} .sema svg{display:block;inline-size:100%;block-size:auto} /* 🔴 TELEFON/TABLET OKUNURLUĞU — ÖLÇÜLDÜ, varsayılmadı. `viewBox` 1200 sabit ve svg %100 genişlikte ölçeklendiği için yazı viewport ile birlikte küçülüyor: 390px'te gövde 4,08 px / en küçük etiket 3,21 px · 768px'te 8,03 / 6,31 · ancak 1280px'te 13,07 / 10,27 (5 sayfanın 5'inde BİREBİR aynı — bileşenin özelliği, tek bir figürün kusuru değil). Üç alt ajan bunu bağımsız ölçtü. Çözüm `fiyatlandirma.css:195`in kanonik deseni: dar ekranda KAP kaydırılır, çizim okunur boyutta kalır. 1040px'te ölçek 0,867 → gövde 12,1 px. `body{overflow-x:hidden}` (temel.css) kabı olmayan fazla genişliği KIRPARDI. */ @media (max-width:1199px){ .sema-kay{overflow-x:auto} /* `max-inline-size:none` ŞART: `temel.css:22`de global `img,svg,video{max-width:100%}` resetti var ve `inline-size:1040px`i kabın genişliğine KIRPIYOR. Ölçüldü — onsuz kural cascade'i KAZANIYOR ama used-value 350px kalıyor, yani "düzeltme işlemedi" gibi görünüyor. (Teşhisi `CSS.getMatchedStylesForNode` DEĞİL, global reseti aramak verdi: eşleşen kural listesini "sema" diye süzmek onu gizlemişti.) */ .sema-kay>svg{inline-size:1040px;max-inline-size:none} /* 🔴 KAYDIRILABİLİRLİK GÖRÜNÜR OLMAK ZORUNDA — bu kusuru SAYILAR değil GÖZ yakaladı. Yukarıdaki kap 390px'te yazıyı 3,21 → 11 px'e çıkardı ve sayısal kapılar YEŞİLDİ (`taşma false`, `yazı 11-13px`). Ama kırpılmış kareye bakınca çizimin sağ yarısı yok: satırlar ortadan kesiliyor ve `blog`un 2x2 matrisinde İKİNCİ SÜTUN hiç görünmüyor — yani çizim yalnız okunmuyor değil, ANLAMINI kaybediyor. Kaydırma vardı, kaydırılabildiğini söyleyen hiçbir işaret yoktu. Üç işaret birden, çünkü tek başına hiçbiri yetmiyor: · sağ kenarda yumuşak kesim — içeriğin DEVAM ETTİĞİNİ gösterir · figcaption'da ⇄ — kesimi göremeyen (yüksek kontrast / zorlanmış renk) için · `scrollbar-width:thin` — işaretçili cihazda gerçek kaydırma çubuğu ⚠️ Maske kaydırma SONUNDA da duruyor (CSS tek başına "sona gelindi" diyemez); bilerek kabul edildi — yanlış yöndeki hata "biraz daha var" sanmaktır, tersi "içerik yok" sanmaktır ve o daha pahalı. ⚠️ Maskede `currentColor` — çıplak bir siyah onaltılık DEĞİL, ve bunu `tokens.css` kapısı yakaladı (HAKLI). Maske için önemli olan RENK değil ALFA: `currentColor` opak, `transparent` şeffaf; yani token gerekmiyor ve çıplak renk de girmiyor. (Kapı YORUMLARI SÖKMÜYOR: ilk yazımda gerekçeyi anlatırken o onaltılığı yorumda ANMIŞTIM ve kapı onu ihlal saydı — haklı tarafta yanılıyor, çünkü yanlış pozitif gürültülüdür, yanlış negatif sessizdir. Bu dosyada renk değerleri yorumda da YAZILMAZ, kelimeyle anlatılır.) */ .sema-kay{ scrollbar-width:thin; -webkit-mask-image:linear-gradient(to right,currentColor calc(100% - 32px),transparent); mask-image:linear-gradient(to right,currentColor calc(100% - 32px),transparent); } .sema>figcaption::before{content:"\21C4\00A0";font-variant-emoji:text} } .sema text{font-family:inherit;fill:currentColor} .sema .sema-et{text-transform:uppercase;letter-spacing:.09em} .sema>figcaption{margin-block-start:var(--b2);font-size:var(--t9);line-height:var(--t9-s);color:var(--soluk)} .sema-bosluk{margin-block-start:var(--b5)} /* Sağlayıcı kimliği (gizlilik + iletişim sayfası): ad · adres · e-posta, iki kolon. */ .kimlik{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,3fr);gap:var(--b3) var(--b5);max-width:var(--olcu-bas);margin-block-start:var(--b4);padding-block-start:var(--b4);border-block-start:1px solid var(--cizgi)} .kimlik dt{color:var(--soluk)} .koyu .kimlik{border-color:var(--koyu-cizgi)} .koyu .kimlik dt{color:var(--koyu-soluk)} @media (max-width:575px){ .kimlik{grid-template-columns:1fr;gap:var(--b1)} .kimlik dd{margin-block-end:var(--b3)} }