/* ===================================================================== HİZALAMA (2026-11-07) — bölüm girişleri tüm sitede ORTALI Giriş = üst etiket (eyebrow) + başlık + giriş paragrafı + hemen altındaki bölüm düğmeleri. Kart, tablo, SSS cevabı ve yasal metin gövdesi okunabilirlik için SOLA hizalı kalır. Yalnızca CSS; site.css'ten SONRA yüklenir. HTML yapısı/metni ve JS değişmedi. Hero kapsam dışı. ===================================================================== */ /* ---------- 1) ortak: bölüm başlığı bloğu ortada, satırlar dengeli ---------- */ .sec .sec-head { margin-left: auto; margin-right: auto; text-align: center; } .sec .sec-head .lead { margin-left: auto; margin-right: auto; text-wrap: balance; } /* ---------- 2) üst etiket: iki yanda simetrik çizgi, taşarsa çizgiler metne yapışık kalır ---------- inline-flex yerine satır içi model: uzun etiket telefonda iki satıra inerse çizgiler ekran kenarına kaçmaz, ilk ve son kelimenin yanında kalır. ::after'daki -.32em, Chrome'un son harften sonra da eklediği harf aralığını dengeler (yazı iki çizginin tam ortasında durur). vertical-align: -.33em → eski inline-flex kutusunun taban çizgisini (çizginin alt kenarı) taklit eder; etiket ve altındaki başlık piksel düzeyinde eski yerinde kalır. */ .sec .eyebrow, .final .eyebrow, .legal-doc > .eyebrow { display: inline-block; max-width: 100%; vertical-align: -.33em; text-wrap: balance; } .sec .eyebrow::before, .sec .eyebrow::after, .final .eyebrow::before, .final .eyebrow::after, .legal-doc > .eyebrow::before, .legal-doc > .eyebrow::after { content: ""; display: inline-block; width: 28px; height: 1px; vertical-align: .37em; background: var(--emerald-grad-h); } .sec .eyebrow::before, .final .eyebrow::before, .legal-doc > .eyebrow::before { margin-right: 12px; } .sec .eyebrow::after, .final .eyebrow::after, .legal-doc > .eyebrow::after { margin-left: calc(12px - .32em); } /* dar telefonda çizgiler biraz kısalır: "Gerçek hesap · VPS üzerinde" 390 px'te (web fontuyla da) tek satıra sığar */ @media (max-width: 420px) { .sec .eyebrow::before, .sec .eyebrow::after, .final .eyebrow::before, .final .eyebrow::after, .legal-doc > .eyebrow::before, .legal-doc > .eyebrow::after { width: 18px; } .sec .eyebrow::before, .final .eyebrow::before, .legal-doc > .eyebrow::before { margin-right: 10px; } .sec .eyebrow::after, .final .eyebrow::after, .legal-doc > .eyebrow::after { margin-left: calc(10px - .32em); } } /* 360 px sınıfı telefonlar: harf aralığı hafif daralır, aynı etiket orada da tek satır kalır (yoksa satır "· VPS üzerinde" diye noktayla başlıyordu) */ @media (max-width: 380px) { .sec .eyebrow, .final .eyebrow, .legal-doc > .eyebrow { letter-spacing: .26em; } .sec .eyebrow::after, .final .eyebrow::after, .legal-doc > .eyebrow::after { margin-left: calc(10px - .26em); } } /* ---------- 3) Topluluk: giriş (etiket + başlık + paragraf) iki sütunun ÜSTÜNE, ortaya alındı ---------- Altta: solda yörüngeli logo | sağda üç kart + not (yükseklikleri denk). Metin sütunu (sınıfsız div) display:contents ile açılır, çocukları doğrudan .wrap ızgarasına yerleşir. Satır aralığı 0; boşluklar diğer bölümlerdeki .sec-head ölçüleriyle aynı (başlık→içerik clamp(40px, 6vw, 64px)). */ #topluluk .wrap > div:not(.community-art) { display: contents; } #topluluk .wrap { grid-template-areas: "eyebrow eyebrow" "title title" "lead lead" "art pillars" "art note"; grid-template-rows: auto auto auto auto 1fr; row-gap: 0; align-items: start; } #topluluk .eyebrow { grid-area: eyebrow; justify-self: center; text-align: center; margin-top: 9px; } /* 9px: diğer bölümlerdeki satır kutusu payı */ #topluluk h2 { grid-area: title; text-align: center; } #topluluk .lead { grid-area: lead; justify-self: center; max-width: 720px; margin: 0 0 clamp(40px, 6vw, 64px); text-align: center; text-wrap: balance; } #topluluk .pillars { grid-area: pillars; margin-top: 0; } #topluluk .label-note { grid-area: note; } #topluluk .community-art { grid-area: art; align-self: center; justify-self: center; } @media (max-width: 900px) { #topluluk .wrap { grid-template-areas: "art" "eyebrow" "title" "lead" "pillars" "note"; grid-template-rows: none; } #topluluk .community-art { margin: 0 auto clamp(28px, 5vw, 40px); } } /* ---------- 4) Backtest başlığı: ürün adı bölünmesin ("TULPAR ALGO TRADE / BOT Backtest…" yerine "TULPAR ALGO TRADE BOT / Backtest Sonuçları.") ---------- */ #sonuclar .sec-head h2 .gold-text { display: block; width: fit-content; margin: 0 auto; } /* web fontuyla (Montserrat) "TULPAR ALGO TRADE BOT" ~775 px: 760 px'lik blokta ikiye bölünüp başlık 3 satıra çıkıyordu */ #sonuclar .sec-head { max-width: 880px; } /* ---------- 5) Telegram'dan: giriş ortada, oklar sağda (simetrik yan sütunlar giriş metnini kaydırmaz) ---------- */ #goruntuler .shots-head { display: grid; grid-template-columns: minmax(102px, 1fr) minmax(0, 760px) minmax(102px, 1fr); column-gap: 16px; align-items: end; } #goruntuler .shots-head .sec-head { grid-column: 2; } #goruntuler .shots-nav { grid-column: 3; justify-self: end; } @media (max-width: 760px) { #goruntuler .shots-head { display: block; } } /* galerinin altındaki "Tüm paylaşımları… / Katıl" şeridi: metin + düğme ortada (telefonda alt alta, ikisi de ortalı) */ #goruntuler .cta-row { justify-content: center; text-align: center; } /* ---------- 5b) özellik kartı düzeltmesi: telefonda "Grid yok, martingale yok" paragrafı 260 px'te kalıyordu (site.css ≤600 px kuralı .feat-hero p ve .feat-wave p'yi açıp .feat-ring p'yi unutmuş); kartlar eşit genişlikte ---------- */ @media (max-width: 600px) { .feat-ring p { max-width: none; } } /* ---------- 6) SSS: "SSS" etiketi ve başlık sabit menünün altına girmesin ---------- Üst boşluk = sabit üst menünün gerçek yüksekliği (--fh-ust-h: risk satırı AÇIKKEN; index/sss/yasal'da 'ın altındaki satır içi betik ölçer, _dil/OKU.md) + 60 px. Menü dile, genişliğe ve web fontuna göre 108–157 px; eski sabit 168/190 px'lik boşlukta pay dile göre 42–92 px arasında değişiyordu, şimdi her dilde ve genişlikte aynı. Betik çalışmazsa yedek değerler eski boşluğun aynısı (masaüstü 108 + 60 = 168 px, ≤900 px 130 + 60 = 190 px). site.css'in ≤900 px kuralını (190 px !important) da bu dosya geçersiz kılar (sonra yüklenir). */ .faq-sec { padding-top: calc(var(--fh-ust-h, 108px) + 60px) !important; } @media (max-width: 900px) { .faq-sec { padding-top: calc(var(--fh-ust-h, 130px) + 60px) !important; } } /* ---------- 7) Yasal: sayfa girişi ortada, metin gövdesi solda ---------- */ .legal-doc > .eyebrow { display: block; text-align: center; margin-top: 9px; } /* 9px: eski satır kutusu payı, başlık yerinde kalır */ .legal-doc > h1 { text-align: center; } .legal-toc { justify-content: center; } /* ---------- 7b) Metrik şeridi (.metric-box): düşüş rakamı kazanç kadar görünür kalsın ---------- 6 sütun (5 + geniş "Net / en derin düşüş") web fontuyla ancak ≥1670 px'te her dilde sığıyor (es/de; tr 1590); daha darda net/düşüş rakamı şeridin sağ kenarında kesiliyordu (her dilde 1081–1180 px, tr/en/es/fr/de 1280 px, es/fr/de 1366 px: "−18,97 %"), rozetler sayılara biniyordu, es "Factor de beneficio" iki satıra inip rakam satırını 22 px aşağı itiyordu (ölçüm: rapor/wf4/m2_duzen, arac/serit_esik.py). 1081–1699 px: site.css'in ≤1080 px düzeni (3 sütun × 2 satır). Eşik 1700: 17 px'lik kaydırma çubuğu payı dahil. */ @media (min-width: 1081px) and (max-width: 1699.98px) { .metric-box { grid-template-columns: repeat(3, 1fr); } .metric.wide { grid-column: span 1; } .metric:nth-child(4)::before { display: none; } .metric:nth-child(-n+3) { border-bottom: 1px solid var(--line-soft); } } /* güvenlik payı (ölçülmemiş bir yazı tipinde de): sayı ile rozet asla üst üste binmez, sayı kesilmez. Yer yoksa rozet alt satıra iner; geniş hücredeki "+68,02 % / −18,97 %" yalnız eğik çizgiden bölünür (iki rakam aynı boyda, tam görünür). */ .metric-box .m-row { flex-wrap: wrap; row-gap: 6px; } .metric-box .m-row .num { min-width: auto; } .metric.wide b { white-space: normal; } .metric.wide b > span { white-space: nowrap; } /* hücre notları dengeli kırılır: dar telefonda "Maksimum ayarda −" / "%37,6" diye eksi işareti rakamdan ayrılmasın (Türkçe biçimde "−%" arasında tarayıcı satır kırabiliyor; 320 px'te ölçüldü) */ .metric .m-note { text-wrap: balance; } /* aynı satırdaki hücrelerde başlık, rakam ve not satırları hizalı (bir başlık iki satıra inse de rakamlar aynı yükseklikte) */ @supports (grid-template-rows: subgrid) { .metric { display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: 10px; align-content: start; } .metric > .m-row { align-self: start; } } /* ---------- 8) birleştirme payı: dil çalışmasının çeviri notu (.dil-not, yalnız çeviri sayfalarında görünür) Yorumlar girişinin ve yasal başlığın altına düşüyor; kutu ortaya alınır, sol çizgili not metni solda kalır. Öğe yoksa hiçbir etkisi yok. ---------- */ .sec .sec-head .dil-not, main.legal-doc > .dil-not { width: fit-content; margin-left: auto; margin-right: auto; text-align: left; } /* ---------- 8b) "Nasıl başlarım" adım başlıkları, <360 px telefon: İngilizce "Get to know TULPAR⍽ALGO⍽TRADE⍽BOT" ürün adını bölünmez boşluklarla bir arada tutar (dil incelemesinin bilinçli kararı: 390 ve 1440 px'te "TULPAR / ALGO TRADE BOT" bölünmesin). 320 px'te web fontuyla bu parça 245 px, sütun 222 px: sayfa 7 px yana kayıyordu. Yalnız 360 px'ten dar ekranda başlık 18 → 16 px (parça 218 px); metin ve diğer genişlikler aynı. ---------- */ @media (max-width: 359.98px) { .step h3 { font-size: 16px; } } /* ---------- 8c) Gerçek işlemler tablosu, 320 px telefon: filtre satırı ("Sonuç: Tümü · Kazanan · Kaybeden") ve "Gerçek hesap · Maksimum risk" rozeti panelden taşıp kesiliyordu (panel overflow: hidden; filtre satırı tr 11–23 px, es/fr 19–39 px, de 15–27 px; de rozeti 9–15 px; "Kaybeden" düğmesi de kesik). Yer yoksa etiket düğmelerin üstüne iner, rozet iki satıra iner; sığan genişliklerde görünüm aynı. ---------- */ .tf-group { flex-wrap: wrap; row-gap: 8px; } @media (max-width: 400px) { .table-head .badge { white-space: normal; } } /* ===================================================================== 9) ÜST MENÜ / BAŞLIK (2026-11-07, kullanıcı isteği: "Topluluk · Expert Advisors · Gerçek işlemler · Backtest · Nasıl başlarım · SSS" kısmı düzeltilsin). Yalnız CSS; işaretleme ve JS değişmedi. 5 dilde ölçüldü. ===================================================================== */ /* 9a) Tüm başlıklar aynı yazı: "Expert Advisors" bir