/* ========================================================================== TasarımMania — paylaşılan tasarım sistemi Kaynak: 03 Bento OS konsepti. Çok sayfalı sitede TEK CSS dosyası olarak kendi alan adımızdan servis edilir; harici sunucudan hiçbir şey çekilmez. ========================================================================== */ /* [hidden] SESSİZCE EZİLİYORDU — ölçülmüş hata. Tarayıcı `[hidden]`e yalnız `display:none` verir; sınıfın kendi `display`i (örn. `.bl-k{display:flex}`) bunu yener. Blog kategori süzgeci bu yüzden ÇALIŞMIYORDU: JS `k.hidden = true` diyordu ama kart görünmeye devam ediyor, her süzgeçte 28 kartın hepsi ekranda kalıyordu. Doğrulandı: sayfalarda `hidden` taşıyıp görünmesi GEREKEN öge yok ve `style.display` ile gösterim yapan kod yok — bu yüzden kural genel ve güvenli. */ [hidden]{display:none!important} :root{ /* zemin ve yüzeyler */ --bg:#0B0D12; --bg-2:#0E1118; --bg-3:#12151D; --panel:rgba(255,255,255,.030); --panel-2:rgba(255,255,255,.055); --hair:rgba(255,255,255,.085); --hair-strong:rgba(255,255,255,.16); /* metin */ --fg:#E7EAF0; --fg-hi:#EAFDFF; --fg-dim:#A7B0C2; --muted:#727D93; /* marka + aksanlar KURAL (karar belgesi): marka turkuazı birincil, --cy sistem aksanı. Modül renkleri sabittir: Web=--cy, Mobil=--vi, Pazarlama=--amber, Video=--pink, SEO=--lime. Bu sözlük değiştirilmez. */ --brand:#00D6CE; --cy:#00E5FF; --vi:#7A22FF; --lime:#A6FF00; --amber:#FFB020; --pink:#FF2D9B; /* geometri ve hareket */ --r-lg:20px; --r-md:14px; --r-sm:9px; --maxw:1240px; /* sabit üst menünün yüksekliği — sayfa içeriği bu kadar aşağıdan başlamalı, yoksa ilk öğe (breadcrumb) menünün altında kalır */ --nav-h:74px; --ease:cubic-bezier(.22,.8,.24,1); /* tipografi — fontlar kendi sunucumuzdan (bkz. @font-face) */ --sans:"Inter Tight","Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace; } /* modül dalı aksanı — body[data-dal] ile ayarlanır, tek değişken üzerinden akar */ /* --acc-deep: aynı rengin BEYAZ yazıyı taşıyabilen derin tonu. NEDEN VAR: parlak aksanların üstünde beyaz yazı okunmuyor. Ölçüm — beyaz #FFF üzerine kontrast oranı: --cy #00E5FF 1.54 --lime #A6FF00 1.24 --amber #FFB020 1.83 --pink #FF2D9B 3.44 --vi #7A22FF 6.00 Beşinden dördü WCAG AA eşiğinin (4.5) çok altında. AYRICA: eski koyu yazı (#04141A) --vi üzerinde 3.12 ölçüyordu; yani mobil modülünün birincil butonu zaten AA'yı karşılamıyordu. Derin tonlar aynı H/S değerinde tutulup L düşürülerek üretildi. Ölçülen beyaz kontrastı: web 5.58 mobil 7.12 pazarlama 5.59 video 5.53 seo 5.57 → beşi de AA ✓ Parlak --acc kenarlık ve ışık olarak KALIYOR; buton marka rengini kaybetmiyor, yalnız beyaz yazıyı taşıyabilir hâle geliyor. DİKKAT: --acc sözlüğü karar belgesiyle sabit, DEĞİŞTİRİLMEDİ. */ body[data-dal="web"] { --acc:var(--cy); --acc-rgb:0,229,255; --acc-deep:#05737F } body[data-dal="mobil"] { --acc:var(--vi); --acc-rgb:122,34,255; --acc-deep:#680AF5 } body[data-dal="pazarlama"] { --acc:var(--amber); --acc-rgb:255,176,32; --acc-deep:#8E5E06 } body[data-dal="video"] { --acc:var(--pink); --acc-rgb:255,45,155; --acc-deep:#CB086E } body[data-dal="seo"] { --acc:var(--lime); --acc-rgb:166,255,0; --acc-deep:#4D7305 } body { --acc:var(--cy); --acc-rgb:0,229,255; --acc-deep:#05737F } *{margin:0;padding:0;box-sizing:border-box} html{scroll-behavior:smooth;scroll-padding-top:88px} html,body{max-width:100%;overflow-x:hidden} body{ font-family:var(--sans);background:var(--bg);color:var(--fg); line-height:1.7;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility; } img,svg,video{max-width:100%;display:block} a{color:inherit;text-decoration:none} h1,h2,h3,h4{margin:0;font-weight:650;letter-spacing:-.035em;line-height:1.08} p{margin:0} ul{margin:0;padding:0;list-style:none} :focus-visible{outline:2px solid var(--acc);outline-offset:3px;border-radius:4px} .wrap{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 24px} .mono{font-family:var(--mono)} .grad{background:linear-gradient(100deg,var(--acc),var(--vi));-webkit-background-clip:text;background-clip:text;color:transparent} /* --- atlama bağlantısı (erişilebilirlik) --- */ /* Atlama bağlantısı da aksan zeminliydi ve mobil modülünde (--vi) koyu yazı 3.12 ölçüyordu. Butonla aynı derin ton + beyaz yazıya alındı. */ .skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--acc-deep);color:#FFFFFF; padding:10px 18px;border-radius:0 0 var(--r-sm) 0;font-weight:600} .skip:focus{left:0} /* --- bölüm başlığı --- */ .sec{padding:clamp(56px,7vw,104px) 0} .sec-head{margin-bottom:clamp(28px,4vw,52px);max-width:74ch} .eyebrow{display:inline-flex;align-items:center;gap:9px;font-family:var(--mono);font-size:11px; letter-spacing:.18em;text-transform:uppercase;color:var(--acc);margin-bottom:16px} .eyebrow i{width:7px;height:7px;border-radius:50%;background:var(--acc);flex:none; box-shadow:0 0 0 4px rgba(var(--acc-rgb),.16)} .sec-head h2{font-size:clamp(26px,4vw,42px);margin-bottom:12px} .sec-head p{color:var(--fg-dim);font-size:16px;max-width:64ch} /* --- butonlar --- */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;font-family:inherit; font-weight:600;font-size:14.5px;padding:13px 24px;border-radius:999px;border:1px solid transparent; cursor:pointer;transition:.28s var(--ease);white-space:nowrap} .btn svg{width:15px;height:15px;flex:none} /* Birincil buton: derin aksan zemin + BEYAZ yazı + parlak aksan kenarlık. Kenarlık ve ışık parlak --acc'te kaldığı için buton koyu zeminde sönükleşmiyor; yazı ise AA eşiğini geçiyor (bkz. --acc-deep notu). */ .btn-p{background:var(--acc-deep);color:#FFFFFF;border-color:var(--acc); box-shadow:0 10px 30px -12px rgba(var(--acc-rgb),.65)} .btn-p:hover{transform:translateY(-2px);box-shadow:0 16px 40px -12px rgba(var(--acc-rgb),.8)} .btn-g{border-color:var(--hair-strong);color:var(--fg);background:rgba(255,255,255,.02)} .btn-g:hover{border-color:var(--acc);color:var(--acc)} .btn-sm{padding:9px 17px;font-size:13px} /* --- kırıntı (breadcrumb) --- */ .crumb{font-family:var(--mono);font-size:11.5px;color:var(--muted); display:flex;gap:8px;flex-wrap:wrap;align-items:center} .crumb a{transition:color .22s} .crumb a:hover{color:var(--acc)} .crumb span[aria-hidden]{opacity:.45} /* --- sayfa başlığı (page header) --- */ .phd{padding:clamp(34px,5vw,64px) 0 clamp(30px,4vw,52px);border-bottom:1px solid var(--hair); background:radial-gradient(900px 420px at 18% -20%,rgba(var(--acc-rgb),.10),transparent 62%)} .phd h1{font-size:clamp(30px,5.4vw,58px);letter-spacing:-.045em;margin-bottom:16px} .phd .lead{color:var(--fg-dim);font-size:clamp(15.5px,1.7vw,18px);max-width:62ch} .phd-meta{display:flex;gap:20px;flex-wrap:wrap;margin-top:26px;font-family:var(--mono); font-size:11.5px;color:var(--muted);letter-spacing:.06em} .phd-meta b{color:var(--fg);font-weight:500} .phd-cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px} /* --- not kutuları --- */ .note{border:1px solid var(--hair);border-left:2px solid var(--acc);border-radius:var(--r-sm); padding:15px 18px;margin:18px 0;background:var(--panel);font-size:14.4px;color:var(--fg-dim)} .note b{color:var(--fg)} .note--uyari{border-left-color:var(--amber)} .note--iyi{border-left-color:var(--lime)} /* --- kanıt paneli (ölçülen sonuç) --- */ .kpi{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:14px;margin:22px 0} .kpi > div{border:1px solid var(--hair);border-radius:var(--r-md);padding:20px;background:var(--panel)} .kpi b{display:block;font-family:var(--mono);font-size:clamp(22px,2.6vw,30px); color:var(--acc);letter-spacing:-.02em;line-height:1.1} .kpi span{display:block;font-size:12.5px;color:var(--muted);margin-top:6px;line-height:1.45} /* --- ilgili içerik --- */ .rel{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px} .rel a{border:1px solid var(--hair);border-radius:var(--r-md);padding:20px;background:var(--panel); transition:.3s var(--ease)} .rel a:hover{border-color:var(--hair-strong);transform:translateY(-3px);background:var(--panel-2)} .rel h4{font-size:16px;margin-bottom:6px} .rel p{font-size:13.4px;color:var(--muted)} /* --- görünür olunca beliren öğeler --- */ .rv{opacity:0;transform:translateY(30px) scale(.985);transition:opacity .6s var(--ease),transform .7s var(--ease)} .rv.in{opacity:1;transform:none} .rv.d1{transition-delay:.08s}.rv.d2{transition-delay:.16s}.rv.d3{transition-delay:.24s} .rv.d4{transition-delay:.32s} /* --- kelime kelime giren başlık --- */ .kin{display:inline-block;overflow:hidden;vertical-align:bottom} .kin > i{display:inline-block;font-style:normal;transform:translateY(105%); transition:transform .8s var(--ease)} .kin.in > i{transform:none} /* --- kayan şerit --- */ .serit{overflow:hidden;border-block:1px solid var(--hair);padding:15px 0;background:var(--bg-2); -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)} .serit-ray{display:flex;gap:38px;width:max-content;animation:seritKay 34s linear infinite} .serit:hover .serit-ray{animation-play-state:paused} @keyframes seritKay{to{transform:translateX(-50%)}} .serit span{display:inline-flex;align-items:center;gap:11px;font-family:var(--mono);font-size:12.5px; letter-spacing:.1em;text-transform:uppercase;color:var(--muted);white-space:nowrap} .serit span::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--acc);flex:none; box-shadow:0 0 12px rgba(var(--acc-rgb),.9)} .serit b{color:var(--fg);font-weight:600} /* ikinci bant: ters yöne akar, daha sakin — tekrar değil, ritim */ .serit--ters{background:transparent;border-block-color:var(--hair);padding:13px 0} .serit--ters .serit-ray{animation-direction:reverse;animation-duration:44s;gap:30px} .serit--ters span{font-size:11.5px;color:var(--muted)} .serit--ters span::before{width:4px;height:4px;background:var(--muted);box-shadow:none} .serit--ters b{color:var(--fg-dim);font-weight:500} @media (prefers-reduced-motion:reduce){ .kin > i{transform:none} .serit-ray{animation:none} } /* SÜREYİ SIFIRLAMAK YETMİYOR — GECİKME DE SIFIRLANMALI. Ölçüm (teknik-seo, reduce açık): süre .001ms'ken bile 300ms'de 21 öğe, 1500ms'de 3 öğe hâlâ opacity 0'daydı; sahne ancak 4000ms'de tamamlanıyordu. Sebep: akış grafiklerinde canlanma sırası animation-delay ile kuruluyor (en geç öğe 2.18s) ve delay bu bloktan etkilenmiyordu. Yani hareketi kapatan kullanıcı, hareketi görmemek yerine boş kutulara bakıyordu. -1ms negatif gecikme animasyonu bitmiş noktasından başlatır: öğe anında son hâline oturur. */ @media (prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important; animation-delay:-1ms!important;transition-duration:.001ms!important; transition-delay:0s!important;scroll-behavior:auto!important} .rv{opacity:1;transform:none} } /* --- MOBİL DOKUNMA HEDEFLERİ (WCAG 2.5.8: en az 24px) ------------------- 390px denetiminde ölçülen küçük hedefler: breadcrumb ~20px, footer link listeleri ~16px, bento t-link 22px, soru paneli WA köprüsü 21px, fiyat şeridi linki 16px. Satır içi (inline) bağlantıda dikey padding satır yüksekliğini İTMEZ ama tıklama alanını büyütür — görsel düzen değişmez. inline-flex olanlarda negatif margin ile denge kuruldu. */ .crumb a{padding-block:8px} .ftr ul a{padding-block:7px} .t-link{padding-block:7px;margin-block:-7px} .sd-wa{padding-block:7px;margin-block:-7px} .dtay-fiyat a{padding-block:7px} /* ===== DİL DEĞİŞTİRİCİ (plan/dil-degistirici.js) ===== */ /* Sayfanın kendi vurgu rengini alır (--acc, body[data-dal] ile değişir). Dolu vurgu rengi BİLEREK kullanılmadı: menüdeki tek dolu öğe "Teklif Al" birincil düğmesi kalsın, yardımcı denetim onunla yarışmasın. */ .dil{display:inline-flex;align-items:center;flex:none;gap:2px; font-family:var(--mono);font-size:11.5px;font-weight:500;letter-spacing:.06em; border:1px solid var(--hair);border-radius:999px;padding:3px; background:rgba(255,255,255,.02)} /* ⚠ padding-block ÖLÇÜLEREK seçildi. İlk sürüm 5px'ti; tarayıcıda ölçünce bağlantının dokunma hedefi 21px çıktı — hem WCAG 2.5.8'in 24px alt sınırının hem de bu projenin mobil denetimde koyduğu 30-36px ölçütünün altında. 7px → 26px (imleç), kaba işaretleyicide 9px → 30px. */ .dil span,.dil a{display:block;padding:7px 9px;border-radius:999px;line-height:1; transition:color .25s var(--ease),background-color .25s var(--ease)} .dil span[aria-current]{color:var(--fg);background:rgba(255,255,255,.09)} /* --muted DEĞİL --fg-dim: #727D93 koyu zeminde 4,43:1 veriyor, 11,5px metin için AA eşiği 4,5:1 — kıl payı altında kalıyordu. #A7B0C2 = 8,8:1. */ .dil a{color:var(--fg-dim)} .dil a:hover{color:var(--acc);background:rgba(var(--acc-rgb),.12)} .dil a:focus-visible{outline:2px solid var(--acc);outline-offset:2px} /* Dar ekranda .nav-links/.nav-tel gizleniyor; dil düğmesi GİZLENMEZ: yanlış dilde açılan ziyaretçi hamburgeri açmadan çıkabilmeli. */ @media(pointer:coarse){.dil span,.dil a{padding-block:9px}} @media(max-width:420px){.dil{font-size:11px}.dil span,.dil a{padding-inline:8px}} /* ========================================================================== OKUNURLUK TABANI (24 Eyl 2026, kullanıcı onayı) Ölçüm: 375px'te 155 sayfada 4.306 metin 11px altındaydı (en küçük 6.8px). Kurallar sayfa içi