/* * stil.css — Ebeveyn ekranı. * * Renkler ve yuvarlaklık prototipten (prototype/masal-kutusu-v5.jsx · * TASARIM TOKENLARI) birebir alındı: ürünün görsel dili orada karara * bağlanmıştı, burada yeniden icat edilmiyor. * * ─── YAZI TİPİ NEDEN CDN'DEN GELMİYOR ───────────────────────────── * Prototip Fredoka'yı Google Fonts'tan çekiyor. Üretimde bu, ebeveynin * IP'sini her sayfa açılışında üçüncü tarafa vermek demek — bu depo * ham IP'yi KENDİ veritabanına bile yazmıyor (docs/05 §2). Sistem * yuvarlak yığını kullanılıyor; prototipteki yedek zincirin aynısı. */ :root { --gok: #8ED6D2; --gok-ust: #B9E8E4; --fistik: #7FB069; --kayisi: #F2A25C; --nar: #D95F53; --hardal: #E3B23C; --patlican: #43284A; --mor: #8B6BB1; --nazar: #4C8FC0; --sut: #FFF9F0; --krem: #FFECD4; --sis: #9A8C93; --golge: rgba(67, 40, 74, .14); --yz: ui-rounded, "SF Pro Rounded", "Segoe UI Rounded", "Nunito", system-ui, -apple-system, sans-serif; /* ─── METİN ÖLÇEĞİ ─────────────────────────────────────────────── Sayfada 20 AYRI punto vardı ve aralarında `13.5px`, `14.5px`, `15.5px` gibi değerler — bu bir ölçek değil, birikmiş tek tek ayarlamalar. Sonuç, hiyerarşisi olmayan bir sayfa: bir kartın başlığı ile gövdesi arasındaki fark yarım punto kalıyor ve göz neyin önemli olduğunu ayırt edemiyor. Ebeveyn burada klinik bir gözlem okuyacak. Hiyerarşisi olmayan bir metinde "ne ölçüldü" ile "kaç oturuma dayanıyor" aynı ağırlıkta görünür ve ikincisi — güvenilirliğin tek işareti — kaybolur. Basamaklar gövdeye yakın SIK, başlığa doğru SEYREK: gövde boyutları ince ayar ister, başlıklar belirgin sıçrama. 11 → 12 → 14 → 16 → 18 → 21 → 26 → 31 SÜS VE SİMGE BOYUTLARI BU ÖLÇEĞE GİRMİYOR (bulut, tavşan, emoji seçim simgeleri): onlar metin değil çizim ve metin ölçeğine zorlanmaları ikisini de bozar. Denetim de yalnız METİN kurallarına bakıyor — kapsam `#tipografi` yorumuyla işaretli. */ --m-etiket: 11px; /* büyük harf üst etiket — letter-spacing'li */ --m-alt: 12px; /* alt bilgi, dipnot */ --m-kucuk: 14px; /* ikincil gövde */ --m-govde: 16px; /* GÖVDE */ --m-one: 18px; /* öne çıkan: düğme, alan */ --m-ara: 21px; /* ara başlık */ --m-buyuk: 26px; /* kahraman başlığı */ --m-dev: 31px; /* sayfa başlığı */ /* Satır uzunluğu: 62 karakter. 640px kabuk içinde 16px gövde ~76 karaktere kadar uzuyordu; göz satır sonundan başına dönerken yerini kaybediyor. */ --olcu: 62ch; } * { box-sizing: border-box; } body { margin: 0; background: var(--sut); color: var(--patlican); font-family: var(--yz); font-size: var(--m-govde); line-height: 1.5; -webkit-font-smoothing: antialiased; } [hidden] { display: none !important; } /* ── Başlık ── */ .tepe { background: linear-gradient(180deg, var(--gok) 0%, var(--gok-ust) 100%); padding: 28px 16px 52px; text-align: center; } .tepe h1 { margin: 0; font-size: var(--m-dev); font-weight: 700; letter-spacing: -.02em; } .tepe p { margin: 6px 0 0; font-size: var(--m-kucuk); font-weight: 500; opacity: .8; } .kabuk { max-width: 640px; margin: -34px auto 0; padding: 0 16px 56px; } /* ── Kart ── */ .kart { background: #fff; border-radius: 28px; padding: 22px; box-shadow: 0 8px 24px var(--golge); margin-bottom: 16px; } .etiket { font-size: var(--m-etiket); font-weight: 700; text-transform: uppercase; letter-spacing: .14em; color: var(--sis); margin: 0 0 8px; } .etiket + .etiket, .ara { margin-top: 18px; } /* ── Alanlar ── */ label { display: block; } input[type=text], input[type=email], input[type=password], input[type=month] { width: 100%; padding: 15px 18px; font: inherit; font-size: var(--m-one); font-weight: 600; color: var(--patlican); background: var(--krem); border: 3px solid transparent; border-radius: 20px; outline: none; } input:focus { border-color: var(--kayisi); } input::placeholder { color: var(--sis); font-weight: 500; } /* ── Düğmeler ── */ button { font: inherit; cursor: pointer; border: none; } .dugme { display: flex; width: 100%; align-items: center; justify-content: center; gap: 8px; padding: 17px; font-size: var(--m-one); font-weight: 700; color: #fff; background: var(--kayisi); border-radius: 24px; box-shadow: 0 5px 0 #D4874A; transition: transform .08s; } .dugme:active { transform: translateY(3px); box-shadow: 0 2px 0 #D4874A; } .dugme:disabled { opacity: .45; cursor: not-allowed; box-shadow: 0 5px 0 #D4874A; } .dugme.ikincil { background: var(--krem); color: var(--patlican); box-shadow: 0 5px 0 #E8D3B4; } .dugme.ikincil:active { box-shadow: 0 2px 0 #E8D3B4; } .dugme.duz { background: none; box-shadow: none; color: var(--sis); font-size: var(--m-govde); font-weight: 600; padding: 10px; } .dugme.duz:active { transform: none; } /* ── Sekme ── */ .sekmeler { display: flex; gap: 6px; background: var(--krem); border-radius: 20px; padding: 5px; margin-bottom: 18px; } .sekmeler button { flex: 1; padding: 11px; border-radius: 16px; background: none; color: var(--sis); font-weight: 700; } .sekmeler button[aria-selected="true"] { background: #fff; color: var(--patlican); box-shadow: 0 2px 6px var(--golge); } /* ── Seçim ızgarası ── */ .izgara { display: grid; gap: 8px; grid-template-columns: repeat(2, 1fr); } .izgara.dort { grid-template-columns: repeat(4, 1fr); } /* Planlar SIĞDIĞI KADAR sütuna diziliyor. Sabit iki sütunda üç plan, üçüncüsünü boş alanın yanında TEK BAŞINA bırakıyordu — satırda yalnız duran öğe, ölü alanın üstünde durur ve kart sırasını bozar. */ #planlar { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); } @media (max-width: 480px) { .izgara.dort { grid-template-columns: repeat(2, 1fr); } } .secim { padding: 14px 10px; text-align: center; background: var(--krem); border-radius: 20px; color: var(--patlican); font-weight: 600; border: 3px solid transparent; } .secim .simge { font-size: 28px; display: block; } .secim .alt { font-size: var(--m-alt); font-weight: 500; color: var(--sis); } .secim[aria-pressed="true"] { background: var(--fistik); color: #fff; } .secim[aria-pressed="true"] .alt { color: #EAF6E2; } /* ── Açılır liste ── `.secim` bir DÜĞME stili (aria-pressed'e göre dolgu değiştiriyor) ve `` Safari'de düz metin kutusuna düşüyor ve tam da sorulmaması gereken GÜNÜ yazılabilir hâle getiriyor. */ .acilir { padding: 14px 12px; background: var(--krem); border-radius: 20px; color: var(--patlican); font-weight: 600; font-size: var(--m-govde); font-family: var(--yz); border: 3px solid transparent; width: 100%; appearance: none; -webkit-appearance: none; } .acilir:focus-visible { border-color: var(--nazar); outline: none; } /* Görsel olarak gizli ama ekran okuyucuya açık. `hidden` ya da `display:none` etiketi ERİŞİLEBİLİRLİK AĞACINDAN da silerdi. */ .u-gizli-etiket { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* ── Liste satırı ── */ .satir { display: flex; width: 100%; align-items: center; gap: 12px; padding: 16px; text-align: left; background: var(--krem); border-radius: 22px; margin-bottom: 8px; color: var(--patlican); } .satir .simge { font-size: 30px; } .satir .ad { font-size: var(--m-govde); font-weight: 700; } .satir .alt { font-size: var(--m-alt); font-weight: 500; color: var(--sis); } .satir .ok { margin-left: auto; color: var(--sis); font-size: 20px; } /* ── Tarama maddesi ── */ .madde { padding: 16px 0; border-bottom: 2px solid var(--krem); } .madde:last-child { border-bottom: none; } .madde .alan { font-size: var(--m-etiket); font-weight: 700; text-transform: uppercase; letter-spacing: .12em; color: var(--sis); } .madde .soru { font-size: var(--m-govde); font-weight: 600; margin: 4px 0 10px; } .madde .izgara { grid-template-columns: repeat(3, 1fr); } .madde .secim { padding: 10px; font-size: var(--m-govde); } /* ── Bilgi ve uyarı ── */ .bilgi { background: var(--krem); border-radius: 18px; padding: 15px 17px; font-size: var(--m-kucuk); font-weight: 500; } .bilgi ul { margin: 8px 0 0; padding-left: 18px; } .bilgi li { margin: 4px 0; } .uyari { border-left: 6px solid var(--hardal); background: #FFF6E0; border-radius: 14px; padding: 14px 16px; font-size: var(--m-kucuk); font-weight: 600; } .hata { border-left: 6px solid var(--nar); background: #FDECEA; border-radius: 14px; padding: 13px 16px; font-size: var(--m-kucuk); font-weight: 600; color: #8E2F27; margin-bottom: 14px; } /* ── Sınır kartı: yönlendirme ≠ tanı ── İki sütun YAN YANA duruyor çünkü ayrım karşılaştırmalı: "yapar" tek başına okununca ürün olduğundan güçlü, "yapmaz" tek başına okununca olduğundan zayıf görünür. Dar ekranda alt alta iner — sıra korunuyor, önce yapar. */ .sinir { display: grid; gap: 14px; grid-template-columns: 1fr 1fr; } @media (max-width: 620px) { .sinir { grid-template-columns: 1fr; } } .sinir-yan { border-radius: 18px; padding: 14px 16px; background: var(--krem); } .sinir-yan.yapar { border-left: 6px solid var(--fistik); } .sinir-yan.yapmaz { border-left: 6px solid var(--nar); background: #FDECEA; } .sinir-baslik { margin: 0 0 8px; font-size: var(--m-kucuk); font-weight: 800; letter-spacing: .04em; color: var(--patlican); } .sinir .ilkeler { margin: 0; } .sinir .ilkeler li { font-size: var(--m-kucuk); } /* Fiyat METİNDİR, simge değil. `.simge` sınıfıyla (28px) çiziliyordu: kahraman başlığına yakın bir puntoyla sayfanın en baskın öğesi oluyordu. Ürünün vaadi yönlendirme — fiyat onun önüne geçmemeli. */ .plan-fiyat { display: block; font-size: var(--m-ara); font-weight: 800; line-height: 1.2; } /* ── SATIR UZUNLUĞU ── Kabuk 640px ve gövde 16px: satırlar ~76 karaktere kadar uzuyordu. Göz satır sonundan bir sonrakinin başına dönerken yerini kaybediyor; klinik bir gözlemi okuyan ebeveyn için bu, satır atlamak demek. */ .kart p, .kart li, .bilgi, .u-aciklama { max-width: var(--olcu); } /* `.dipnot` çoğu yerde kartın DIŞINDA (bölümün doğrudan çocuğu) ve ilk sınır onu kaçırdı: geniş ekranda 104 karaktere uzuyordu. Dar ekranda ölçen bir iddia bunu göremezdi — sınır orada zaten bağlamıyor. Ortalı kaldığı için `margin-inline: auto`. */ .dipnot { max-width: var(--olcu); margin-inline: auto; } /* ── Zaman içinde (rapor servisi) ── Her metrik kendi bloğunda; aralarında AYIRICI var çünkü iki metriği bitişik çizmek onları tek bir seri gibi okutur. */ .trend-satir { padding: 14px 0; border-bottom: 2px solid var(--krem); } .trend-satir:last-child { border-bottom: none; } /* ── Sessiz bayraklar (rapor servisi · B83) ── Şiddete göre renk YOK: kırmızı bir kenar da bir yorumdur ve yorum şablonun işi. Okunmuş satır yalnız soluyor. */ .bayrak-satir { padding: 14px 0; border-bottom: 2px solid var(--krem); } .bayrak-satir:last-child { border-bottom: none; } .bayrak-satir .bayrak-metin { margin: 4px 0 10px; } .bayrak-satir.okundu { opacity: .7; } .bayrak-satir .dugme { width: auto; padding: 10px 18px; } .trend-satir .cubuklar { height: 64px; margin-top: 6px; } .trend-satir .dipnot { text-align: left; margin: 6px 0 0; } .dipnot { font-size: var(--m-alt); font-weight: 500; color: var(--sis); text-align: center; line-height: 1.6; margin: 18px 8px 0; } .kod { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: var(--m-alt); background: var(--krem); border-radius: 12px; padding: 11px 13px; word-break: break-all; color: var(--patlican); } @media (prefers-reduced-motion: reduce) { * { transition: none !important; } } /* ── Yardımcı sınıflar ── Satır içi `style=` YOK ve olamaz: CSP `style-src 'self'` onu da engelliyor (script gibi). Gerçek tarayıcıda sürülene kadar görülmedi — sayfa açılıyor, düğmeler bağlanıyor ama BÜTÜN satır içi stiller sessizce düşüyordu. NOT: "aynı kural JS tarafında da geçerli, `el.style.x = y` de engellenir" diye yazıyordu ve YANLIŞTI — gerçek CSP altında ölçüldü (scripts/tarayici/cocuk.mjs · CSP ÖLÇÜMÜ), CSSOM yazma engellenmiyor. Sınıf takıp çıkarmak yine de doğru yol: stil SAYFA STİLİNDE kalsın. */ .u-ust { margin-top: 18px; } .u-ust-s { margin-top: 10px; } .u-ust-l { margin-top: 20px; } .u-alt { margin-bottom: 14px; } .u-sol { text-align: left; } .u-sol-ic { text-align: left; margin: 8px 2px 0; } .u-sol-ust{ text-align: left; margin-top: 12px; } .u-esnek { flex: 1; } .u-normal { text-transform: none; letter-spacing: 0; } .u-blok { display: block; margin-top: 12px; } .u-aciklama { margin: 0 0 4px; font-size: var(--m-kucuk); font-weight: 500; color: var(--sis); } /* Seçili liste satırı — `.secim`in satır hâli. */ /* Ad ve açıklaması ALT ALTA: `.satir` yatay bir kutu ve iki metni doğrudan içine koymak onları yan yana dizer — profil satırında ad sıkışıp açıklama yanına kayıyordu. */ .satir.dikey { flex-direction: column; align-items: flex-start; gap: 3px; } .satir.secili { background: var(--fistik); color: #fff; } .satir.secili .alt { color: #EAF6E2; } /* ── Karşılama katmanı ── Tokenlar aynı (prototipin görsel dili); yalnız yeni bileşenler. */ .tepe-amblem { display: inline-block; transform: translateY(2px); } .karsilama-kahraman { text-align: center; padding: 30px 22px 24px; background: linear-gradient(180deg, #fff 0%, var(--krem) 140%); } /* `.kahraman-sahne` SİLİNDİ: kahraman sahnesi `.sahne-mini`ye dönüştüğünde geride kaldı ve hiçbir işaretlemede geçmiyordu. Ölü kural muaf tutulmaz, silinir — bekçinin "ölü glob" kuralının biçemdeki hâli. */ .kahraman-baslik { margin: 0; font-size: var(--m-buyuk); line-height: 1.25; letter-spacing: -.02em; } .kahraman-baslik em { font-style: normal; color: var(--kayisi); } .kahraman-alt { margin: 10px auto 0; max-width: 40ch; font-size: var(--m-govde); font-weight: 500; color: var(--sis); } .adim { display: flex; gap: 14px; align-items: flex-start; padding: 12px 0; border-bottom: 2px solid var(--krem); } .adim:last-child { border-bottom: none; } .adim-no { flex: none; width: 34px; height: 34px; display: grid; place-items: center; background: var(--gok); color: #fff; font-weight: 800; border-radius: 12px; font-size: var(--m-govde); } .adim b { font-size: var(--m-govde); } .adim-alt { display: block; margin-top: 2px; font-size: var(--m-kucuk); font-weight: 500; color: var(--sis); line-height: 1.5; } .ilkeler { list-style: none; margin: 0; padding: 0; } .ilkeler li { padding: 9px 0; border-bottom: 2px solid var(--krem); font-size: var(--m-kucuk); font-weight: 500; line-height: 1.55; } .ilkeler li:last-child { border-bottom: none; } /* ── Tepe süsleri: CSS-yalnız süzülme; hareket azaltma isteğine saygı global kuralda (animation: none). Konum yüzdeyle — dar ekranda da taşmaz. ── */ .tepe { position: relative; overflow: hidden; } .tepe-sus { position: absolute; font-size: 22px; opacity: .7; animation: suzul 6s ease-in-out infinite; pointer-events: none; } .tepe-sus.s1 { left: 12%; top: 18px; animation-delay: 0s; } .tepe-sus.s2 { right: 14%; top: 12px; font-size: 26px; animation-delay: 1.6s; } .tepe-sus.s3 { left: 22%; bottom: 10px; animation-delay: 3.1s; } .tepe-sus.s4 { right: 24%; bottom: 16px; animation-delay: 4.4s; } @keyframes suzul { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } } /* ── Örnek diyalog balonları ── */ .sohbet { display: grid; gap: 10px; } .balon { max-width: 85%; padding: 12px 15px; border-radius: 20px; font-size: var(--m-kucuk); font-weight: 500; line-height: 1.5; } .balon-kim { display: block; font-size: var(--m-etiket); font-weight: 700; text-transform: uppercase; letter-spacing: .1em; opacity: .65; margin-bottom: 3px; } .balon.karakter { background: var(--gok-ust); border-bottom-left-radius: 6px; justify-self: start; } .balon.cocuk { background: var(--krem); border-bottom-right-radius: 6px; justify-self: end; font-weight: 700; } /* ── SSS: yerleşik
— JS'siz açılır kapanır ── */ .sss { border-bottom: 2px solid var(--krem); } .sss:last-of-type { border-bottom: none; } .sss summary { list-style: none; cursor: pointer; padding: 13px 0; font-size: var(--m-govde); font-weight: 700; display: flex; align-items: center; gap: 10px; } .sss summary::-webkit-details-marker { display: none; } .sss summary::before { content: "＋"; color: var(--kayisi); font-weight: 800; font-size: 18px; line-height: 1; transition: transform .15s; } .sss[open] summary::before { content: "－"; } .sss p { margin: 0 0 14px 28px; font-size: var(--m-kucuk); font-weight: 500; color: var(--sis); line-height: 1.6; } /* ── Mini sahne: kendi kendine oynayan döngü (~9 sn) ── Zaman çizelgesi TEK süreye bağlı: balonlar aynı 9 sn'lik döngünün yüzdelerinde belirip kaybolur — senkron, JS'siz. Hareket azaltmada global kural animasyonları söndürür; balonların durağan hâlde de görünmesi için aşağıda opaklık ayrıca sabitlenir. */ .sahne-mini { position: relative; height: 175px; margin: -6px -6px 14px; border-radius: 22px; overflow: hidden; background: linear-gradient(180deg, var(--gok-ust) 0%, #FFF6E8 78%, #F4E9C9 100%); } .oyuncu { position: absolute; pointer-events: none; } .gunes { top: 10px; right: 16px; font-size: 34px; animation: gunes-nefes 5s ease-in-out infinite; } @keyframes gunes-nefes { 0%,100% { transform: scale(1) rotate(0deg); } 50% { transform: scale(1.1) rotate(8deg); } } .bulut { font-size: 30px; opacity: .85; animation: bulut-gec linear infinite; } .bulut.b1 { top: 14px; animation-duration: 26s; } .bulut.b2 { top: 44px; font-size: 22px; animation-duration: 37s; animation-delay: -14s; } @keyframes bulut-gec { from { left: -12%; } to { left: 104%; } } .tavsan { left: 12%; bottom: 12px; font-size: 46px; animation: hop 2.6s ease-in-out infinite; } @keyframes hop { 0%,100% { transform: translateY(0); } 30% { transform: translateY(-13px) rotate(-4deg); } 45% { transform: translateY(0); } } .cocukfig { right: 12%; bottom: 12px; font-size: 42px; animation: salla-hafif 3.4s ease-in-out infinite; } @keyframes salla-hafif { 0%,100% { transform: rotate(0deg); } 50% { transform: rotate(4deg); } } .bitki { bottom: 6px; font-size: 20px; } .bitki.b-sol { left: 2%; } .bitki.b-sag { right: 2%; } .parilti { font-size: 18px; opacity: 0; animation: parla 9s linear infinite; } .parilti.p1 { left: 40%; top: 34px; } .parilti.p2 { left: 56%; top: 58px; animation-delay: .4s; } @keyframes parla { 0%,84% { opacity: 0; transform: scale(.6); } 90% { opacity: 1; transform: scale(1.15); } 97%,100% { opacity: 0; transform: scale(.7); } } .mini-balon { position: absolute; background: #fff; border-radius: 16px; padding: 8px 12px; font-size: var(--m-kucuk); font-weight: 700; box-shadow: 0 4px 12px var(--golge); opacity: 0; white-space: nowrap; } .mini-balon::after { content: ""; position: absolute; bottom: -7px; border: 8px solid transparent; border-bottom: none; border-top-color: #fff; } .mini-balon.k { left: 10%; bottom: 78px; animation: balon-k 9s ease infinite; } .mini-balon.k::after { left: 18px; } .mini-balon.c { right: 10%; bottom: 74px; background: var(--krem); animation: balon-c 9s ease infinite; } .mini-balon.c::after { right: 18px; border-top-color: var(--krem); } @keyframes balon-k { 0%,6% { opacity: 0; transform: translateY(6px); } 12%,46% { opacity: 1; transform: translateY(0); } 52%,100% { opacity: 0; transform: translateY(-4px); } } @keyframes balon-c { 0%,52% { opacity: 0; transform: translateY(6px); } 58%,82% { opacity: 1; transform: translateY(0); } 88%,100% { opacity: 0; transform: translateY(-4px); } } /* Hareket azaltmada sahne DURAĞAN ama EKSİKSİZ: animasyon sönerken balonlar-parıltılar opaklık 0'da kalmasın. */ @media (prefers-reduced-motion: reduce) { .mini-balon, .parilti { opacity: 1 !important; } .bulut.b1 { left: 20%; } .bulut.b2 { left: 62%; } } /* ── Kart girişleri: yumuşak yukarı süzülme; başlangıç durumu KEYFRAME'de (from) — animasyon sönerse kart olduğu gibi görünür. ── */ #e-karsilama .kart { animation: kart-gir .5s ease-out backwards; } #e-karsilama .kart:nth-child(2) { animation-delay: .08s; } #e-karsilama .kart:nth-child(3) { animation-delay: .16s; } #e-karsilama .kart:nth-child(4) { animation-delay: .24s; } #e-karsilama .kart:nth-child(5) { animation-delay: .32s; } #e-karsilama .kart:nth-child(6) { animation-delay: .40s; } @keyframes kart-gir { from { opacity: 0; transform: translateY(10px); } } /* ── Katman onarımı ── `.tepe`ye süsler için verilen position:relative onu boyama sırasında öne aldı ve başlık, üstüne bindirilmiş kartın tepesini (sekmeleri) örtmeye başladı — konumlanmış öğe, konumsuzun ÜSTÜNE çizilir. İçerik kabuğu da konumlanıp bir katman yukarı alınıyor. */ .kabuk { position: relative; z-index: 1; } /* Karşılamadaki karakter kartları: açıklama adın ALTINDA — yan yana sarınca "Pamuk meraklı / tavşan" gibi dağılıyordu (görsel turda yakalandı). */ #e-karsilama .secim .alt { display: block; margin-top: 2px; } /* ── GELİŞİM GRAFİĞİ ─────────────────────────────────────────────── Ebeveyne dakika dakika döküm değil ÇİZGİNİN YÖNÜ gösteriliyor. Saf CSS: dış bağımlılık yok. Yükseklik satır içi stille DEĞİL, `--y` özel özelliğiyle veriliyor — CSP `style-src 'self'` satır içi stili de düşürüyor (bu depoda bir kez yaşandı). */ .cubuklar { display: flex; align-items: flex-end; gap: 6px; height: 92px; padding: 10px 12px; border-radius: 14px; background: rgba(255, 255, 255, .55); border: 1px solid rgba(103, 74, 122, .12); } .cubuklar i { flex: 1; min-height: 3px; border-radius: 4px 4px 0 0; background: linear-gradient(180deg, #9b7ec4, #6f5495); opacity: .9; } /* Yükseklik SINIFLA veriliyor, satır içi stille değil: CSP `style-src 'self'` hem `style="…"` özniteliğini hem JS'teki `el.style.height = …` atamasını düşürüyor — sayfa açılır, çubuklar görünmezdi. Bu depoda tam bu hata bir kez yaşandı. */ .cubuklar i.y0 { height: 4%; } .cubuklar i.y1 { height: 12%; } .cubuklar i.y2 { height: 22%; } .cubuklar i.y3 { height: 32%; } .cubuklar i.y4 { height: 42%; } .cubuklar i.y5 { height: 52%; } .cubuklar i.y6 { height: 62%; } .cubuklar i.y7 { height: 72%; } .cubuklar i.y8 { height: 82%; } .cubuklar i.y9 { height: 91%; } .cubuklar i.y10 { height: 100%; } .cubuklar i.bos { background: rgba(103, 74, 122, .16); }