/* ============================================================ base.css — Reset, tipografi zanaatı, yardımcı sınıflar, hareket başlangıç durumları DESIGN.md §3'ün birebir uygulaması. EN KRİTİK KURAL (§13.2): JS kapalıyken site tam okunabilir olmalı. Bu yüzden [data-reveal] ve [data-split] hiçbir zaman VARSAYILAN olarak gizlenmez. Gizli başlangıç durumu yalnızca `html.is-motion` altında "kurulur" (arm) — bu sınıfı js/engine.js ekler. JS yoksa, JS hata verirse veya kullanıcı azaltılmış hareket istiyorsa herkes bitmiş içeriği görür. ============================================================ */ /* ------------------------------------------------------------ 1. Modern reset ------------------------------------------------------------ */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; padding: 0; } html { /* Kaydırma çubuğu olmayan sayfalarda yatay kayma olmasın: oluk her zaman ayrılır (§3). */ scrollbar-gutter: stable; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; /* Tarayıcı kaynaklı arayüzler (kaydırma çubuğu, form kontrolleri) tuvalle aynı tarafta olsun. */ color-scheme: dark; /* DİKKAT: `scroll-behavior: smooth` BİLİNÇLİ olarak yok — kaydırmanın tek sahibi MODE.engine (§6). */ } html[data-act="light"] { color-scheme: light; } body { min-height: 100%; background: var(--bg); color: var(--fg); font-family: var(--font-sans); font-size: var(--t-body); line-height: var(--lh-body); font-weight: 400; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; /* Tema değişimi (koyu ↔ açık perde) sert kesmez; masthead inversiyonuyla aynı ritimde yumuşar. */ transition: background-color var(--d-base) var(--ease), color var(--d-base) var(--ease); } img, picture, video, canvas, svg { display: block; max-width: 100%; } /* width/height nitelikleriyle birlikte CLS'i sıfırda tutar (§13.6) */ img { height: auto; } svg { fill: currentColor; } input, button, textarea, select { font: inherit; color: inherit; letter-spacing: inherit; background: none; border: 0; border-radius: 0; } button { cursor: pointer; text-align: inherit; } textarea { resize: vertical; } ul, ol { list-style: none; } a { color: inherit; text-decoration: none; } p { /* Tek başına kalan kelimeleri (orphan) engeller */ text-wrap: pretty; } h1, h2, h3, h4, h5, h6 { font-weight: 500; line-height: var(--lh-snug); text-wrap: balance; } strong, b { font-weight: 600; } hr { border: 0; } address { font-style: normal; } table { border-collapse: collapse; } [hidden] { display: none !important; } /* ------------------------------------------------------------ 2. Odak, seçim Focus ring ASLA kaldırılmaz (§13.4). Gradient'in "nadir sinyal" olarak göründüğü yerlerden biri budur. ------------------------------------------------------------ */ :focus-visible { outline: 2px solid var(--ember); outline-offset: 3px; border-radius: var(--r-xs); } /* Fare tıklamasında halka gösterilmez, klavyede gösterilir */ :focus:not(:focus-visible) { outline: none; } ::selection { background: var(--ember); color: #fff; } /* ------------------------------------------------------------ 3. Erişilebilirlik yardımcıları ------------------------------------------------------------ */ /* Görsel olarak gizli, ekran okuyucuya açık */ .u-sr { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; } /* içindeki İLK odaklanabilir öğe; odaklanınca görünür olur */ .skip-link { position: fixed; top: 0; left: 50%; z-index: calc(var(--z-preloader) + 1); transform: translate(-50%, -110%); padding: .7rem 1.1rem; background: var(--ember); color: #fff; font-family: var(--font-mono); font-size: var(--t-mono); letter-spacing: var(--tr-mono); text-transform: uppercase; border-bottom-left-radius: var(--r-sm); border-bottom-right-radius: var(--r-sm); transition: transform var(--d-fast) var(--ease-out); } .skip-link:focus-visible { transform: translate(-50%, 0); outline-offset: -4px; } /* ------------------------------------------------------------ 4. Yardımcı sınıflar — DESIGN.md §3'teki tam set ------------------------------------------------------------ */ /* Mono etiket: eyebrow, indeks, sayaç, meta. Metadata'nın mono yazılması görünüşün taşıyıcı parçası (§2.3). Büyük harf dönüşümü lang="tr" sayesinde Türkçe kurallarına göre yapılır (i → İ). */ .u-mono { font-family: var(--font-mono); font-size: var(--t-mono); font-weight: 500; line-height: 1.25; letter-spacing: var(--tr-mono); text-transform: uppercase; /* Sayaçlarda rakam genişliği sabit kalsın (zıplama olmasın) */ font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1; } .u-mute { color: var(--mute); } /* Display tipografi — Fraunces variable. 'WONK' aksı sitenin imzası; asla düşürülmez (§2.3). */ .u-display { font-family: var(--font-display); font-variation-settings: 'opsz' 96, 'SOFT' 24, 'WONK' 1; font-weight: 400; line-height: var(--lh-tight); letter-spacing: -.018em; text-wrap: balance; /* Fraunces'in serif detayları büyük puntoda daha net olsun */ font-synthesis: none; } /* Tipografi zanaatı: display ölçekleri akışkan olduğu için ekran büyüdükçe punto da büyür — büyük punto daha sıkı tracking ister. Kademeleri viewport'a bağlıyoruz. */ @media (min-width: 700px) { .u-display { letter-spacing: -.024em; } } @media (min-width: 1100px) { .u-display { letter-spacing: -.03em; } } @media (min-width: 1600px) { .u-display { letter-spacing: -.034em; } } /* Gradient ile kırpılmış metin — sinyalin nadir göründüğü yerlerden biri (hero'nun son satırı gibi). */ .u-signal-text { background: var(--signal-grad); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; } /* background-clip: text desteklenmiyorsa düz ember'a düşer — metin hiçbir koşulda kaybolmaz. */ @supports not ((background-clip: text) or (-webkit-background-clip: text)) { .u-signal-text { background: none; color: var(--ember); -webkit-text-fill-color: currentColor; } } .u-center { text-align: center; margin-inline: auto; } .u-hide { display: none !important; } .u-text-width { max-width: var(--w-text); } /* ------------------------------------------------------------ 5. Hareket başlangıç durumları — [data-reveal] Varsayılan: HİÇBİR kural yok. Aşağıdaki bloklar yalnızca `html.is-motion` altında geçerli, yani JS çalıştığında ve azaltılmış hareket istenmediğinde kurulur (§13.2). `is-in` sınıfını js/motion.js ekler (giriş tamamlandı). `will-change` bilinçli olarak kullanılmıyor: sayfada yüzlerce reveal öğesi olabiliyor ve hepsine katman açmak belleği şişirip kaydırmayı yavaşlatıyor. ------------------------------------------------------------ */ html.is-motion [data-reveal] { opacity: 0; transform: translate3d(0, 28px, 0); transition: opacity var(--d-slow) var(--ease-out), transform var(--d-slow) var(--ease-out), clip-path var(--d-slow) var(--ease-out); } /* Varyantlar (§5) */ html.is-motion [data-reveal="fade"] { transform: none; } html.is-motion [data-reveal="scale"] { transform: scale3d(.94, .94, 1); } /* mask = clip-path silme; opaklık tam kalır */ html.is-motion [data-reveal="mask"] { opacity: 1; transform: none; clip-path: inset(0 0 100% 0); } /* rule = saç teli çizgiler için soldan scaleX */ html.is-motion [data-reveal="rule"] { opacity: 1; transform: scaleX(0); transform-origin: left center; } /* Bitmiş durum */ html.is-motion [data-reveal].is-in { opacity: 1; transform: none; clip-path: inset(0 0 0 0); } /* data-reveal-delay="0…8" → ×70ms */ html.is-motion [data-reveal][data-reveal-delay="0"] { transition-delay: 0ms; } html.is-motion [data-reveal][data-reveal-delay="1"] { transition-delay: 70ms; } html.is-motion [data-reveal][data-reveal-delay="2"] { transition-delay: 140ms; } html.is-motion [data-reveal][data-reveal-delay="3"] { transition-delay: 210ms; } html.is-motion [data-reveal][data-reveal-delay="4"] { transition-delay: 280ms; } html.is-motion [data-reveal][data-reveal-delay="5"] { transition-delay: 350ms; } html.is-motion [data-reveal][data-reveal-delay="6"] { transition-delay: 420ms; } html.is-motion [data-reveal][data-reveal-delay="7"] { transition-delay: 490ms; } html.is-motion [data-reveal][data-reveal-delay="8"] { transition-delay: 560ms; } /* data-reveal-stagger: ebeveynin KENDİSİ açılmaz, çocukları 70ms arayla açılır. js/motion.js gecikmeyi satır içi (inline) yazarsa o kazanır; buradaki nth-child kademeleri JS henüz çalışmadan önce/JS gecikme yazmadığında güvenli yedektir. */ html.is-motion [data-reveal-stagger] { opacity: 1; transform: none; clip-path: none; } html.is-motion [data-reveal-stagger] > :nth-child(1) { transition-delay: 0ms; } html.is-motion [data-reveal-stagger] > :nth-child(2) { transition-delay: 70ms; } html.is-motion [data-reveal-stagger] > :nth-child(3) { transition-delay: 140ms; } html.is-motion [data-reveal-stagger] > :nth-child(4) { transition-delay: 210ms; } html.is-motion [data-reveal-stagger] > :nth-child(5) { transition-delay: 280ms; } html.is-motion [data-reveal-stagger] > :nth-child(6) { transition-delay: 350ms; } html.is-motion [data-reveal-stagger] > :nth-child(7) { transition-delay: 420ms; } html.is-motion [data-reveal-stagger] > :nth-child(8) { transition-delay: 490ms; } html.is-motion [data-reveal-stagger] > :nth-child(9) { transition-delay: 560ms; } html.is-motion [data-reveal-stagger] > :nth-child(10) { transition-delay: 630ms; } html.is-motion [data-reveal-stagger] > :nth-child(11) { transition-delay: 700ms; } html.is-motion [data-reveal-stagger] > :nth-child(12) { transition-delay: 770ms; } /* ------------------------------------------------------------ 6. Hareket başlangıç durumları — [data-split] js/motion.js metni `` maskesi içinde `` olarak sarar. Erişilebilir metin host'taki aria-label ile korunur, üretilen span'lar aria-hidden olur (§5). Maskeler burada da varsayılan olarak GİZLEMEZ: .split__i ancak html.is-motion altında aşağıya itilir. ------------------------------------------------------------ */ .split__m { display: inline-block; overflow: hidden; vertical-align: top; /* Alt uzantılar (g, y, ş, ç) maskeye kurban gitmesin: kutu aşağıdan büyütülür, sonra negatif margin ile düzen etkisi geri alınır — satır yükseklikleri bozulmaz. */ padding-bottom: .14em; margin-bottom: -.14em; } .split__i { display: inline-block; white-space: pre-wrap; } html.is-motion [data-split] .split__i { transform: translate3d(0, 108%, 0); transition: transform var(--d-slow) var(--ease-out); } html.is-motion [data-split].is-in .split__i { transform: none; } /* ------------------------------------------------------------ 7. Azaltılmış hareket — genel killswitch (§13.3) Ön yükleyici, imleç, yumuşak kaydırma, canvas animasyonu, marquee ve pin JS tarafında kapanır; burada CSS tarafındaki her şey susturulur ve tüm içerik zorla görünür yapılır. ------------------------------------------------------------ */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-delay: 0ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; transition-delay: 0ms !important; scroll-behavior: auto !important; } [data-reveal], html.is-motion [data-reveal], html.is-motion [data-reveal-stagger] > * { opacity: 1 !important; transform: none !important; clip-path: none !important; } html.is-motion [data-split] .split__i, .split__i { transform: none !important; opacity: 1 !important; } .cursor, .preloader { display: none !important; } } /* Ember focus ring açık perdede (#f4f1ea) 2.97:1 — WCAG 1.4.11'in 3:1 eşiğinin altında. Açık perdeye mor ring verilir (5.0:1). */ [data-act="light"] :focus-visible { outline-color: var(--violet); } /* Zorunlu renk modunda background-clip:text + transparent metin görünmez olur: hero'nun kilit satırı "tek ekipte." kayboluyordu. */ @media (forced-colors: active) { .u-signal-text { background: none; color: CanvasText; -webkit-text-fill-color: currentColor; } }