/* * figma-duzeltmeler.css — Figma denetimi düzeltmeleri. * Layout.cshtml'de output.css'ten SONRA yüklenir (aynı özgüllükte sonra gelen kural kazanır). * * output.css Tailwind ile önceden derlenmiş: yeni yardımcı sınıf eklemek yeniden derleme ister. Bu dosya yalnız * derlenmiş çıktının yanlış ürettiği şeyleri düzeltir; kök düzeltme kaynakta (custom.scss) yapılıp output.css * yeniden derlenirse ilgili bölüm silinebilir. */ /* ==== K-14: kırılımlı punto sınıfı, aynı öğedeki leading-[…] değerini eziyor ==== * Tailwind'in adlandırılmış punto yardımcıları (text-xs … text-9xl) font-size ile birlikte line-height da tanımlar. * `text-base leading-[1.4] lg:text-base` kalıbında lg:text-base kendi satır yüksekliğini (1.5rem) getirir ve * leading-[1.4]'ü o kırılımdan itibaren geçersiz kılar (Figma: %120 / %130 / %140). Aşağıdaki kurallar, o kırılımda * adlandırılmış punto alan öğede taban leading değerini geri verir. * - Kırılımlı leading sınıfı (lg:leading-[1.6] gibi) taşıyan öğeler hedeflenmez: satır yüksekliğini kendileri yönetir. * - Keyfi punto (lg:text-[40px]) line-height tanımlamaz, hedeflenmez. * - leading-none kapsam dışı: tek kullanımı video süre rozeti; Figma'da rozet satır yüksekliği otomatik (≈15 px). * - Kırılımlar tailwind.config.js `screens`: sm 640 · md 960 · lg 1200 · xl 1600 (output.css'te şu an yalnız lg: * punto sınıfları var; sm/md/xl kuralları ileride derlenecek sınıflar için aynı tuzağı önler). * - Özgüllük (0,2,0): Tailwind'in tek sınıflı kuralını (0,1,0) yener; :where() özgüllüğü artırmaz. * Taban değer, öğenin kendi leading sınıfının tanımladığı --fd-lh özel özelliğinden okunur. */ .leading-\[1\.2\] { --fd-lh: 1.2; } .leading-\[1\.3\] { --fd-lh: 1.3; } .leading-\[1\.4\] { --fd-lh: 1.4; } .leading-\[1\.6\] { --fd-lh: 1.6; } @media (min-width: 640px) { :is( .leading-\[1\.2\], .leading-\[1\.3\], .leading-\[1\.4\], .leading-\[1\.6\] ):is( .sm\:text-xs, .sm\:text-sm, .sm\:text-base, .sm\:text-lg, .sm\:text-xl, .sm\:text-2xl, .sm\:text-3xl, .sm\:text-4xl, .sm\:text-5xl, .sm\:text-6xl, .sm\:text-7xl, .sm\:text-8xl, .sm\:text-9xl ):where(:not([class*=":leading-"])) { line-height: var(--fd-lh); } } @media (min-width: 960px) { :is( .leading-\[1\.2\], .leading-\[1\.3\], .leading-\[1\.4\], .leading-\[1\.6\] ):is( .md\:text-xs, .md\:text-sm, .md\:text-base, .md\:text-lg, .md\:text-xl, .md\:text-2xl, .md\:text-3xl, .md\:text-4xl, .md\:text-5xl, .md\:text-6xl, .md\:text-7xl, .md\:text-8xl, .md\:text-9xl ):where(:not([class*=":leading-"])) { line-height: var(--fd-lh); } } @media (min-width: 1200px) { :is( .leading-\[1\.2\], .leading-\[1\.3\], .leading-\[1\.4\], .leading-\[1\.6\] ):is( .lg\:text-xs, .lg\:text-sm, .lg\:text-base, .lg\:text-lg, .lg\:text-xl, .lg\:text-2xl, .lg\:text-3xl, .lg\:text-4xl, .lg\:text-5xl, .lg\:text-6xl, .lg\:text-7xl, .lg\:text-8xl, .lg\:text-9xl ):where(:not([class*=":leading-"])) { line-height: var(--fd-lh); } } @media (min-width: 1600px) { :is( .leading-\[1\.2\], .leading-\[1\.3\], .leading-\[1\.4\], .leading-\[1\.6\] ):is( .xl\:text-xs, .xl\:text-sm, .xl\:text-base, .xl\:text-lg, .xl\:text-xl, .xl\:text-2xl, .xl\:text-3xl, .xl\:text-4xl, .xl\:text-5xl, .xl\:text-6xl, .xl\:text-7xl, .xl\:text-8xl, .xl\:text-9xl ):where(:not([class*=":leading-"])) { line-height: var(--fd-lh); } } /* ---- K-14 (custom.scss @apply kaynaklı) ---- * custom.scss'teki `leading-[1.4] … lg:text-base|lg|xl` @apply satırları output.css'te ayrı seçicilere derlendiği için * yukarıdaki sınıf tabanlı kural bunları yakalamaz; aynı seçiciler, aynı özgüllükle burada tekrar tanımlanır * (Kariyer ilanı / Çalışan adayları / metin içerik / KVKK zengin metinleri). */ @media (min-width: 1200px) { .defaultStyle :is(h2, h4, p, ul, ol, li), .textContentStyle > p, .textContentStyle ol, .textContentStyle ol > li, .kvkkContentStyle :is(h3, h4, h5, p, ul, ol, li) { line-height: 1.4; } } /* ==== K-06: ülke kodu seçici telefon alanını kartın dışına itiyor (Genel Başvuru, Kariyer ilanı başvuru formu) ==== * .application-form__select-wrap (shrink-0) içeriğine göre genişler ve içindeki .application-form__select w-full olduğundan * seçici en uzun seçenek metni kadar (≈382 px) şişer; 390 px'te telefon girişi kartın dışına taşır (scrollWidth 473). * Kompakt genişlik, SCSS'teki mevcut min-width (7.5rem) ile aynıdır: "TR +90" sığar, uzun ülke adları kırpılır. * w-full alan seçicisi (Başvurmak istediğiniz alan) .shrink-0 taşımadığı için etkilenmez. */ .application-form__select-wrap.shrink-0 { width: 7.5rem; } /* ==== G06-009: Yönetim listesinde "Tümünü göster" düğmesi, kartları gizleyen kırılımla aynı olmalı ==== * managementListSection 4. karttan itibaren kartları `max-lg:hidden` ile gizler (tailwind.config.js `max-lg`: ≤1350 px), * düğme ise `lg:hidden` taşıyordu (≥1200 px'te gizli) → 1200–1350 px arasında 7 kartın yalnız 3'ü görünüyor, düğme yoktu. * Düğmeden `lg:hidden` kaldırıldı; bu kural onu kartların gizlendiği aralığın tam tersinde (>1350 px) gizler. * Tıklayınca JS'in eklediği `hidden` sınıfı çalışmaya devam eder: output.css'te `.hidden`, `.inline-flex`'ten sonra gelir. */ @media not all and (max-width: 1350px) { .management-list__show-all { display: none; } } /* 1200–1350 px'te ızgara 4 sütundur: düğme tek hücreye sıkışmasın, kartların altında tam satırda ortalansın. * (<1200 px'te ızgara tek sütun; mevcut tam genişlik düğme davranışı aynen kalır.) */ @media (min-width: 1200px) and (max-width: 1350px) { .management-list__show-all { grid-column: 1 / -1; justify-self: center; } } /* ==== G06-035: 4 ve daha fazla sütunlu tablolar mobilde (≤640 px) daha sıkı dolgu ve punto ==== * Zengin metindeki tablolar (ör. Ortaklık pay tablosu) editörden satır içi (inline) stil taşıyabildiği için !important kullanılır. * `:has(tr > :nth-child(4))` yalnız bir satırında 4. hücresi olan (4+ sütun) tabloları hedefler; 2-3 sütunlu tablolar etkilenmez. */ @media (max-width: 640px) { .textContentStyle table:has(tr > :nth-child(4)) :is(th, td) { padding: 10px 6px !important; font-size: 12px; } } /* ==== G07-035: zengin metin içinde düğme görünümlü bağlantı (opt-in) ==== * Editör bağlantıya `text-content__button` sınıfını verirse (RTE kaynak görünümü) bağlantı hero pill düğmesi gibi görünür: * 44 px yükseklik, beyaz zemin, 1 px #E4E4E7 kenarlık, tam yuvarlak köşe, 14 px / 500. Sınıfsız bağlantılar etkilenmez. * Özgüllük (0,2,1): `.textContentStyle a` (0,1,1) kuralındaki mor renk ve alt çizgi ofsetini yener. * Geçiş (transition-opacity) `.textContentStyle a`'dan gelir; hover opaklığı mevcut pill düğmelerle aynıdır (hover:opacity-90). */ .textContentStyle a.text-content__button { display: inline-flex; align-items: center; justify-content: center; height: 44px; padding: 0 24px; border: 1px solid #E4E4E7; border-radius: 9999px; background-color: #FFFFFF; color: #09090B; font-size: 14px; font-weight: 500; line-height: 1.4; text-decoration: none; } .textContentStyle a.text-content__button:hover { opacity: 0.9; } /* ==== C04 · K-18: renkli/görselli bölümün hemen ardındaki metin bölümü mobilde üst boşluksuz (G02-V004, G03-V001, G03-V002, G04-V009) ==== * textContentSection `.container-large` mobilde `pt-0` taşır: öncülü hero ya da renkli/görselli bölüm olan metin bloğu (Aracılık, Amerikan ×2, * Araştırma, Bireysel Portföy, Kariyer) başlığını/paragrafını önceki bölümün alt kenarına yapışık basıyordu (Figma mobil bölüm üst boşlukları 64–80 px). * Seçenek B (dar): yalnız öncülü bu 5 bölümden biri olan metin bloğuna 4rem; öncülü beyaz bölüm ya da başka bir metin bloğu olan diğer bloklar * değişmez (ardışık metin bloklarında boşluk 128 px olmasın). <1200 px: `lg:py-20` masaüstünde zaten üst boşluk verir (lg = 1200 px). * Özgüllük (0,3,0): Tailwind `pt-0` (0,1,0) yenilir. */ @media (max-width: 1199.98px) { :is(.hero-banner03, .hero-exchange-banner, .three-grid-with-bg, .stock-market-trading-hours, .left-img-right-text-slider) + .text-content > .container-large { padding-top: 4rem; } } /* ==== C05 · K-17: kalkan-onay madde ikonu 16 px (G11-046, G13-033) ==== * Bildirim adımlarındaki "Dikkat Edilmesi Gerekenler" listesi ve zengin metindeki madde listeleri ikonu 22 px basıyordu; 12 px metinle satır adımı * 22 + 8 = 30 px oluyordu (Figma: ikon ≈16 px, satır adımı 25 px = 17 px satır + 8 px). 16 px ikonda li yüksekliği metin satırı (16,8) olur → adım 24,8. * `h3 + ul` (14 px madde metni) 22 px ikonunu korur (Figma'daki ritmi farklı; K-16 karar konusu). * Özgüllük: ilk kural output.css'teki ile aynı (0,1,2/0,1,3), sonra yüklendiği için kazanır; `h3 + ul` kuralı (0,1,4) ile ikisini de yener. */ .notification-process__notes > li::before, .textContentStyle ul > li::before { width: 16px; height: 16px; } .textContentStyle h3 + ul > li::before { width: 22px; height: 22px; } /* ==== C08 · K-50: hesap açılış adımları, CTA grubu ile adımlar başlığı arası 182 px (G01-093, G05-058) ==== * accountOpeningStepsSection kök kapsayıcısı (`.container-large`) bölümler arası boşluğu `lg:gap-16` (64 px) ile verir; Figma'da CTA düğmeleri ile * "Yatırım Hesabı Açmak Bu Kadar Kolay" başlığı arası 182 px (Ana Sayfa, Mobil Uygulama; düğme alt kenarı → başlık üst kenarı). * Açılış içeriği gizli sayfalarda (HideOpeningContent) kapsayıcıda tek çocuk vardır, row-gap etkisizdir. Yalnız ≥1200 px; mobilde gap-8 kalır. * Özgüllük (0,1,1) > `.lg\:gap-16` (0,1,0). */ @media (min-width: 1200px) { .account-opening-steps > div { row-gap: 182px; } } /* ==== C09 · K-52/K-53: küçük ikonlu ızgara kartları 349 px (G10-019, G12-010); açıklama kırpılmaz (G10-006, G10-020) ==== * threeGridWithSmallIconSection (Hesap Açılış Yöntemleri, Yasal Bildirimler): açıklama kutusundaki `line-clamp-2` şablondan kaldırıldı * (Müşteri Sınıflandırması kartında Bilgi Notu bağlantısı ve v6 cümleleri kesiliyordu). Figma'da kartlar 432x349 sabit boy: ≥1200 px'te kart * min-height 349 px. İçeriği 349 px'i aşan kart büyür, hiçbir metin kırpılmaz. * Kart #49 (Barış, 13.10; kullanıcı onayıyla Figma'dan bilinçli sapma): Figma metin bloğunu kart tabanına yaslı çiziyor (`mt-auto`), ama başlık satır * sayısı, açıklama ve bağlantı farkı aynı satırdaki başlıkları 113–258 px arasında kaydırıyordu. Şablonda metin bloğu `flex-1` (başlık ikonun hemen * altında, tüm kartlarda 113 px), yalnız "İncele" bağlantısı `mt-auto` ile tabanda (alttan 33 px). Kart boyları değişmedi. * <1200 px'te değişiklik yok. Özgüllük (0,1,1): kartta başka min-height yok. */ @media (min-width: 1200px) { .three-grid-with-small-icon article { min-height: 349px; } } /* ==== C10 · Kaydırıcı okları kilitliyken de görünür (G01-088, G04-023, G04-029) ==== * main.js üç kaydırıcıyı `watchOverflow: true` ile kurar: kart sayısı ekrana sığan sayıyı aşmazsa (ana sayfa "Ürün ve Hizmetlerimiz" 3 kart, * Bireysel Portföy "Yatırımcı Rehberi" 4 kart, Yatırım Danışmanlığı "Ürünlerimizi Keşfedin" 3 kart; masaüstünde 3/4/3 görünür) Swiper okların * üzerine `swiper-button-lock` ekler ve swiper-bundle.min.css `.swiper-button-lock{display:none}` ile gizler. Figma bu başlık satırlarında * önceki/sonraki okunu çiziyor. Kilit sınıfı çalışma anında eklendiği için Razor'dan çözülemez; oklar kilitliyken de görünür kalır (kaydırılacak * kart olmadığından tıklama bir şey yapmaz). Kart sayısı artıp kilit kalkarsa Swiper sınıfı kaldırır, davranış değişmez. * `main.js` dokunulmadı. Özgüllük (0,2,0) > `.swiper-button-lock` (0,1,0). Yatırımcı Rehberi'nde masaüstü seti `hidden … lg:flex`, mobil seti * `lg:hidden` kabında durur: kap gizliyken ok da görünmez. */ :is(.three-grid-slider, .investor-guide-slider, .discover-our-products-slider) .swiper-button-lock { display: inline-flex; } /* ==== C11 · G02-017 (KRİTİK): Aracılık üçlü kartlarında yasal ibare kırpılmaz ==== * threeGridCardsSection metin kutusu `lg:h-[220px]` sabit yüksekliğindeydi ve kart `overflow-hidden` olduğundan 9 satırlık "Yatırım Fonları" açıklaması * ("Ayrıntılar için ilgili fonun izahnamesini ve yatırımcı bilgi formunu inceleyiniz." ibaresi) kart tabanında kesiliyordu. Şablonda sabit yükseklik * `lg:flex-1` oldu: metin kutusu içeriği kadar uzar, bağlantı (varsa) `justify-between` ile dipte kalır, grid aynı satırdaki kartları eşitler. * Yalnız `lg:flex-1` olsaydı kısa içerikli satırlar (3. satır) 462 → 418 px'e inerdi (Figma kartı 468): önceki 220 px alt sınır korunur, böylece yalnız * metni sığmayan satır büyür. ≥1200 px; mobilde sabit yükseklik hiç yoktu, değişmez. Özgüllük (0,1,2). */ @media (min-width: 1200px) { .three-grid-cards article > div:last-child { min-height: 220px; } } /* ==== C12 · Amerikan Borsası blokları: Takas kartı 520 px (G03-027), "İşlem Kuralları" bandı dikey 160 px (G03-V003) ==== * Aynı iki bileşen Hisse Senetleri sayfasında da var; Figma'da orada da aynı değerler (hisse-d.json: Takas bölümü 600 = 40 + 520 + 40, "İşlem Kuralları" * bandı başlığı bölüm üstünden +160, bölüm 570). * - rightImgLeftTextWithListSection: kart görselin yüksekliğine (Amerikan'da 710 px) göre uzuyordu, görsel kırpılmıyor ve ortalanan metin 120 px aşağı * düşüyordu. Figma'da kart 520 px, telefon görseli kart tabanında kırpılı, metin kartın ortasında. min-height 520 (metin 520'ye sığmazsa kart büyür, * sabit yükseklik gibi metin kırpmaz); görsel sütunu üstten hizalı ve kartın içerik alanıyla sınırlı (520 − `lg:pt-2` 8 px; taşan görsel sütunda kırpılır). * Özgüllük (0,1,1) Tailwind sınıflarını (0,1,0) yener. Görsel sütunu `is-inview` açılış animasyonunda translateY alır; kutu sınırı onunla birlikte taşınır. * - textAreaWithBgIconSection: `lg:py-[120px]` yerine 160 px (Figma: başlık bölüm üstünden +160, düğme altı bölüm altına 160). Yalnız ≥1200 px; mobil py-20 kalır * (Figma mobil 80/80). Özgüllük (0,1,1) > `.lg\:py-\[120px\]` (0,1,0). */ @media (min-width: 1200px) { .right-img-left-text-with-list > div { min-height: 520px; } .right-img-left-text-with-list__visual { align-self: start; max-height: calc(520px - 0.5rem); overflow: hidden; } section.text-area-with-bg-icon { padding-top: 160px; padding-bottom: 160px; } } /* ==== C15 · G10-025: Kolay Para Transferi tablosu mobilde de "Banka | IBAN" iki sütunlu, mor başlık bantlı ==== * easyMoneyTransferSection mobilde başlık satırını gizliyor ve her bankayı iki satıra yığıyordu ("Banka"/"IBAN" etiketi her satırda tekrar, satır ≈127 px). * Figma m (para-transferleri-m.json): mor başlık bandı ("Banka" x32, "IBAN" x172), iki sütunlu satırlar (adım 72 = 16 + 40 + 16), kopyala simgesi sağda. * Şablonda başlık satırı artık her kırılımda görünür (`hidden … lg:grid` → `grid`). ≤1199 px: birinci sütun 139 px (Figma: IBAN sütunu tablo sol kenarından * 140 px; 1 px kenarlık düşüldü), kalan sütun IBAN + kopyala düğmesi, yan dolgu 12 px (Figma metin x = tablo + 12), tekrar eden etiketler gizli, IBAN * hücresine üst dolgu 16 px (satır içi hizalama; masaüstünde `lg:py-4` zaten var). 139 + kalan = 348 px: yatay taşma yok. * ≥1200 px'te değişiklik yok (şablondaki `lg:grid-cols-[minmax(0,280px)_minmax(0,1fr)]` ve `px-5` geçerli). Özgüllük (0,3,1) ≥ Tailwind sınıfları (0,1,0). */ @media (max-width: 1199.98px) { .easy-money-transfer [data-easy-transfer-panel] > div > .grid { grid-template-columns: 139px minmax(0, 1fr); } .easy-money-transfer [data-easy-transfer-panel] > div > .grid > div { padding-left: 0.75rem; padding-right: 0.75rem; } .easy-money-transfer [data-easy-transfer-panel] > div > .grid > div.flex { padding-top: 1rem; } .easy-money-transfer [data-easy-transfer-panel] > div > .grid span.lg\:hidden { display: none; } } /* ==== C16 · G04-038: Kurumsal Finansman banner kartı metin sütunu 432 px · G04-031: Yatırım Danışmanlığı YouTube bandı 1116 px ==== * - twoGridWithBgSection: içerik sütunu `max-w-[280px]` taşıyor; Figma'da (kurumsal-finansman-d.json) başlık/alt başlık/açıklama 432 px genişlikte * ("Halka Arz Danışmanlığı" tek satır 40 px). >=1200 px'te sütun 432 px'e kadar genişler (kart içi 552 px). Görseller (illüstrasyon boyutu/konumu) medya: kapsam dışı. * `article > div.relative` yalnız içerik sütununu tutar (görsel kabı `absolute`). Özgüllük (0,2,2) > `.max-w-\[280px\]` (0,1,0). <1200 px değişmez. * - youtubeSection: iç kapsayıcı `max-w-[1280px] lg:px-12` → bant 1184 px (x 128); Figma'da bant 1116 px (x 162, bölüm yan dolgusu 162; yatirim-danismanligi-d.json * Yurt Dışı Piyasalar Banner frame'i pad 162). 1212 = 1116 + 2 × 48 (kapsayıcı kutu-boyutu border-box, yan dolgu 48 dahil). Özgüllük (0,1,1) > `.max-w-\[1280px\]`. * Bant yüksekliği (Figma 520) içerik kaynaklı: bu kuralla değişmez. */ @media (min-width: 1200px) { .two-grid-with-bg article > div.relative { max-width: 432px; } .youtube-section > div { max-width: 1212px; } } /* ==== C17 · K-54/K-15: haber/duyuru kartları ve detay (G09-029, G09-V001, G09-032, G09-V008, G09-041, G09-036, G09-043, G09-052) ==== * - newsListSection (Haberler): Figma masaüstünde tarih ve kategori etiketi 11/15,4 harf aralığı 0, mobilde 12/16,8 harf aralığı -0,24 (altı çizili etiket her * kırılımda). Şablonda tarih `text-xs tracking-[-0.02em]` (12 px), etiket `text-[11px]`: tarih masaüstünde `.news-list__date` ile 11 px/0, etiket mobilde * `.news-list__tag` ile 12 px/-0,02em olur (satır yüksekliği `leading-[1.4]` ile punto ile birlikte 15,4 / 16,8). Mobil kart: görsel alanı 200 px (şablon * `h-[200px] lg:h-auto`), metin bölümü en az 190 px (Figma m kartı 350x390 = 200 + 190; sitede 1 px kenarlık çocukların dışında → kart 392). * Özgüllük (0,1,0): Tailwind sınıfları ile aynı, bu dosya sonra yüklendiği için kazanır; `.news-list__card > div:last-child` (0,2,1). * - announcementsListSection (Duyurular): masaüstü kart sabit 240 px (Figma 318x240: tarih/başlık arası 8 px şablonda `lg:gap-2`, "Detay" alt dolgusunda). * <1200 px'te kartın yüksekliği içeriğe göre kalır. * - NewsDetail (Haber detayı): kapak görseli masaüstünde 888x480 (Figma Rectangle 995); şablonda `aspect-[16/9]` (888x499,5). `img` genişliği kapsayıcıdan gelir * (888 px), yükseklik oran ile türer; 1200-1440 px aralığında da aynı oran korunur. Mobil değişmez. */ @media (min-width: 1200px) { .news-list__date { font-size: 11px; letter-spacing: 0; } .announcements-list__card { min-height: 240px; } .news-content img.aspect-\[16\/9\] { aspect-ratio: 888 / 480; } } @media (max-width: 1199.98px) { .news-list__tag { font-size: 12px; letter-spacing: -0.02em; } .news-list__card > div:last-child { min-height: 190px; } } /* ==== C21 · K-67: başvuru formlarında Not alanı tutamaçsız, CV yükleme metni 278 px (G08-038, G08-039, G08-044, G08-045) ==== * Genel Başvuru ve Kariyer ilanı başvuru formu aynı sınıfları kullanır (`application-form__input`, `application-form__upload`); iki sayfada da Figma aynı. * - Not alanı (`textarea`): şablonda `resize-y` sağ altta yeniden boyutlandırma tutamacı çiziyordu; Figma 52 px tek satırlık giriş kutusu, tutamaçsız * (output.css'te `resize-none` yok). Her kırılımda. Özgüllük (0,1,1) > `.resize-y` (0,1,0). * - Yükleme alanı metin kapsayıcısı (sürükle-bırak metni + format notu + dosya adı): içerik genişliğinde tek satıra yayılıyordu (354 / 323 px); Figma'da 278 px, * iki satıra sarılır (kutu 229 -> 270 px). Yalnız >=1200 px (mobil Figma'da kart içinde 278'dir ama defter yalnız masaüstünü işaretliyor); kapsayıcı üst öğede * `items-center` ile ortalı kalır. `:has()` zaten bu dosyada kullanılıyor (G06-035). */ textarea.application-form__input { resize: none; } @media (min-width: 1200px) { .application-form__upload div:has(> [data-application-upload-filename]) { max-width: 278px; } } /* ==== C22 · Kariyer ilanı: başlık -> açıklama aralığı (G08-V003), mobil başvuru formu kartsız (G08-040) ==== * - CareerDetail `.career-content__layout`: başlık ile ilk paragraf arası masaüstünde 24 px'ti (`lg:gap-6` satır ve sütun aralığını birlikte verir); Figma 40 px * (kariyer-detay-d.json: başlık y217 h48 -> paragraf y305). Yalnız satır aralığı >=1200 px'te 2,5rem olur; sütun aralığı 24 kalır. Mobil aralık şablonda * (`gap-12` -> `gap-5`: 48 -> 20 px, Figma m başlık y136 h76 -> paragraf y232). * - Başvuru formu (`#application-form`, yalnız Kariyer ilanı; Genel Başvuru formunun kimliği `general-application-form`, kart olarak Figma'da çizili ve DEĞİŞMEZ): * Figma m (kariyer-detay-m.json) formu kartsız tam genişlikte çiziyor (alanlar 350 px, başlık 18, yükleme metni 14, düğme sağda otomatik genişlik). <1200 px'te * kenarlık ve yan/alt iç dolgu kalkar (kart sınıfı `application-form__card` iki formda ortak olduğundan kimlikle kapsanır); üst dolgu 2rem kalır: Figma m * 'Form' çerçevesi pad üst 32 (kariyer-detay-m.json: Background alt kenarı y739 → 'Başvuru Formu' y771; açıklama metni altından 96 px). Masaüstü kartı * (kenarlık 1 px, p-10) aynı. Özgüllük (1,1,0) > `.border` / `.p-6` (0,1,0). Başlık/yükleme metni/düğme boyutları şablonda (`text-lg lg:text-xl`, * `text-sm lg:text-base`, `w-auto`). */ @media (min-width: 1200px) { .career-content__layout { row-gap: 2.5rem; } } @media (max-width: 1199.98px) { #application-form.application-form__card { border: 0; padding: 2rem 0 0; } } /* ==== C23 · İletişim: arka plan vektörleri 534 px, textarea tutamaçsız, açılır menü oku açık, hata etiketi kırmızı, hero 264 px (G12-046, G12-047, G12-048, G12-V004) ==== * Hepsi İletişim sayfasına özgüdür: `.contact-form` yalnız contactFormSection kökünde, `.hero-banner07--overlap` yalnız breadcrumb'ın hero'nun üstüne bindiği * (contactInfoSection içeren) tek hero07 sayfasında basılır (heroBanner07Section `breadcrumbInFlow` dalı); diğer 21 hero07 sayfasının HTML'i değişmez. * - G12-046: Figma "Background Vectors" grubu 534x386 (iletisim-d.json x-109 y1827,8; opacity 0,4); şablonda `w-[min(100%,720px)]` 720x520 çiziyordu. Genişlik 534 * (oran sabit: 386); mobilde `min(100%, 534px)` zaten %100 (390) olduğundan değişmez. Alt kenara yaslı konum (Figma: bölüm tepesinden ~596 px, sol -109) bu kuralın dışında. * - G12-047: Mesaj alanı `resize-y` sağ altta tutamaç çiziyordu (Figma tutamaçsız); `.contact-form #contact-message` özgüllüğü (1,1,0) > `.resize-y` (0,1,0). Konu seçicisinin oku * (`icon-chevron-down-dark.svg`, #1B1B1C) Figma'da açık gri: iletisim-d/m.png ok çekirdek pikseli (116,117,120) ↔ sitenin aynı ikonu (32,32,33) → #1B1B1C × ~0,62; yuvarlak 0,6. * - G12-048: jQuery Validate (Layout.cshtml `#contact-form`) hata etiketine ve geçersiz alana `uk-form-danger uk-text-small error` sınıflarını basar; bu sınıflar için * hiçbir CSS yoktu (etiket siyah, alan çerçevesi değişmiyordu). Sitedeki tek hata rengi `bg-red-500` (Layout.cshtml:445 bildirim, output.css rgb(239 68 68) = #EF4444): * geçersiz alanın çerçevesi bu renkte (metin dışı öğe: 3:1 yeterli, #EF4444 beyaz üstünde 3,76:1). Odak çerçevesi (`focus:border-[#B42EFF]`, 0,2,0) hata hâlinde de kırmızı kalır (0,2,1). * İnceleme R1: etiket METNİ #EF4444 ile beyaz üstünde 3,76:1'di (küçük metin için WCAG AA 4,5:1'in altı) → #DC2626 (4,83:1). * - G12-V004: Hero (Image and Content Container) Figma'da 264 px (iletisim-d.json y88-352; içerik yüksekliğine göre 236,8 idi). Yalnız masaüstü (defter); mobil değişmez. */ .contact-form > img { width: min(100%, 534px); } .contact-form #contact-message { resize: none; } .contact-form select + img { opacity: 0.6; } .contact-form label.error { color: #DC2626; } .contact-form :is(input, select, textarea).uk-form-danger { border-color: #EF4444; } @media (min-width: 1200px) { .hero-banner07--overlap { min-height: 264px; } } /* ==== C24 · K-68: İletişim harita görseli oranı 546:340 (G12-042, G12-043) ==== * contactInfoSection görseli `h-auto w-full object-cover` taşır: yükseklik görselin kendi oranından (CMS'teki gri yer tutucu 1320x680 = 1,94) türer, masaüstünde * 546x281,3 / mobilde 350x180,3 çiziliyordu; Figma 546x340 (iletisim-d.json adresler: 40 + 340 + 80 + 340 + 80 = 880) ve 350x218 (iletisim-m.json) = aynı oran 546:340. * `aspect-ratio` genişlikten yüksekliği türetir (h-auto korunur), `object-fit: cover` (şablonda var) oranı değişen görseli kırparak doldurur. Gerçek harita görseli (müşteri * verisi) gelince 1,94 -> 1,61 yan kırpma olur. `` öznitelik oranı bu kuralla ezilir. Yalnız İletişim (`.contact-info`). */ .contact-info article img { aspect-ratio: 546 / 340; object-fit: cover; } /* ==== C25 · KVKK: sol menüde etkin öğeden sonra 8 px (G12-025) ==== * kvkk-d.json sol menü: etkin öğe kutusu y376 h30 (alt dolgu 12 + 1 px alt çizgi), sonraki öğeler 8 px aşağıdan başlar (y414); diğer öğeler 41 px adımla dizili * (metin y426, 467, 508 …: etkin → sonraki 50, diğerleri 41). Site: tüm öğeler ~41,9 px, etkin → sonraki 42 (-8). Etkin düğmenin alt kenar boşluğu kalan farkı kapatır; * `is-active` sınıfı sekme değişince JS ile taşınır (boşluk de onunla taşınır, liste yüksekliği sabit). */ .kvkk-content__nav-link.is-active { margin-bottom: 8px; } /* ==== C26 · Yönetim: üye fotoğrafı oranı, mobil kart ortalama, "Tümünü göster" ortalı, detay paneli 500 px (G06-036, G06-037, G06-038, G06-041) ==== * Kapsam: `.management-list__item` (kart) ve `.management-list-modal__panel` yalnız managementListSection'da (yalnız Yönetim sayfası). * - G06-036 (>=1200 px): fotoğraf alanı şablonda `aspect-[222/280]` (222x280); Figma 222x250 (kart 470 -> 440, satır başına -30). `aspect-[222/250]` output.css'te yok. * - G06-037 (<1200 px): kart `max-w-[318px] px-10` sola yaslıydı (görsel x68, 222 geniş); şablonda `mx-auto` ile ortalanır (kart x36) ve iç kapsayıcının `max-w-[222px]` sınırı * kalkar (318 - 80 = 238), fotoğraf 238x250 x76 (Figma yonetim-m: görsel 238x250, merkez 195). Masaüstü iç genişlik zaten 222 (px-12). * - G06-038: "Tümünü göster" düğmesi tek sütunlu ızgarada tam genişliğe (350x40) yayılıyordu; Figma ortalı ~120x40 pill. `justify-self: center` (1200-1350 px aralığında zaten ortalı). * - G06-041 (>=1200 px): detay paneli 480 -> 500 px (Figma yonetim-detay-d: panel x940 w500); iç boşluk (şablonda lg:px-12 lg:pt-16) fotoğrafı (988, 64), özgeçmişi y303'e getirir. * `lg:max-w-[500px]` output.css'te yok. Mobil panel (G06-044: header sayfayla kayıyor) kapsam dışı. */ .management-list__show-all { justify-self: center; } @media (min-width: 1200px) { .management-list__item .aspect-\[222\/280\] { aspect-ratio: 222 / 250; } .management-list-modal__panel { max-width: 500px; } } @media (max-width: 1199.98px) { .management-list__item > div { max-width: none; } .management-list__item .aspect-\[222\/280\] { aspect-ratio: 238 / 250; } } /* ==== C27 · K-72: Misyon / Vizyon bölümleri, Vizyon alt boşluğu 92 px (G06-032, G06-033) ==== * leftContentRightImgSection (Misyonumuz) ve rightContentLeftImgSection (Vizyonumuz) yalnız Misyon & Vizyonumuz sayfasında kullanılır (48 sayfalık kapsamda `.left-content-right-img` / * `.right-content-left-img` yalnız misyon-vizyonumuz). Şablon sınıfları: sütun aralığı gap-10 -> gap-16 (mobil 64) / lg:gap-6 (masaüstü 24; iki görsel 652x494 -> 660x500 / 660x499), * Misyon dikey dolgusu 0 (Figma Frame 1321323055 pad 0/48/0/48), Vizyon py-16 / lg:py-20 (Figma pad 64 / 80). * - Vizyon görseli -> Değerlerimiz: Figma 91-92 px (misyon-d.json: Vizyon çerçevesi alt dolgu 80 + çerçeveler arası 11; defter G06-033 expected 92). lg:py-20'nin verdiği 80'e * masaüstünde 12 px eklenir (alt dolgu 92). Yalnız >=1200 px; mobil Figma çerçeveleri arası 0 (misyon-m.json). */ @media (min-width: 1200px) { .right-content-left-img > div { padding-bottom: 92px; } } /* ==== C29 · K-69: bildirim adımları, masaüstünde adım aralığı 178 px, mobilde bağlayıcı 56 px (G11-044, G11-045) ==== * notificationProcessSection (Kendi Adına… sayfası; `.notification-process__stepper`): 5 adım (132 px) + 4 bağlayıcı (46 px) = 844 px, kapsayıcı 888 px; custom.scss'teki * >=1200 px `justify-content: space-between` artan 44 px'i bağlayıcıların çevresine dağıtıyordu (adım aralığı 189 px, +11). Figma adım aralığı 178 = 132 + 46 (kendi-adina-d.json * adım başlıkları x276/454/632/810/988): `flex-start`. <1200 px: Figma dikey adım aralığı 118/138 = adım 62/82 + bağlayıcı 56 (kendi-adina-m.json rakam y1560,5/1678,5/1816,5); * bağlayıcı `h-10` (40) idi. Özgüllük aynı (0,1,0), bu dosya output.css'ten sonra yüklenir. */ @media (min-width: 1200px) { .notification-process__stepper { justify-content: flex-start; } } @media (max-width: 1199.98px) { .notification-process__connector { height: 56px; } } /* ==== C30 · K-70: veri ekranları ücret tablosu satırı 52 px, mobil kart etiket sütunu 124 px (G11-032, G11-V007) ==== * - G11-032 (>=1200 px): feeTableWithoutTabsSection masaüstü tablosunun başlık ve veri satırları py-4 (32) + 19,6 + 1 px alt çizgi = 52,6 px'ti; Figma satır 52 (9 x 52 = 468, * veri-ekranlari-d.json metin y513, 565, 617 … adım 52). Satır yüksekliği sabitlenmez (`height` bir hücre sarınca satırı kırpardı): hücrelerin satır aralığı 19 px olur * (32 + 19 + 1 = 52); sarmalanan bir hücre satırı doğal olarak uzatır. Son satırın alt kenarlığı yoktur (`last:border-b-0`): 32 + 20 = 52 için satır aralığı 20 px. * - G11-V007: mobil kartlarda "Neo Menkul'da / Piyasada" etiket sütunu `w-[110px]` idi (değer x175); Figma 124 (veri-ekranlari-m.json etiket x52 w124, değer x188; Ücret sayfası da aynı). * Yalnız mobil kartların içinde (masaüstü tablosunda bu etiket sınıfı yok). İki bölüm kökü: `.fee-table` (Ücret) ve `.fee-table-without-tabs` (Veri Ekranları). */ @media (min-width: 1200px) { .fee-table-without-tabs .lg\:block > div > div { line-height: 19px; } .fee-table-without-tabs .lg\:block > div:last-child > div { line-height: 20px; } } .fee-table span.w-\[110px\], .fee-table-without-tabs span.w-\[110px\] { width: 124px; } /* ==== K4 · Ücret tabloları: "Piyasada" sütunu yalnız en az bir satırda değer varsa basılır (müşteri yorumu, 12.10) ==== * feeTableSection (sekme başına) ve feeTableWithoutTabsSection (tablonun tamamı): hiçbir satırda Market dolu değilse başlık, hücreler ve mobil "Piyasada" satırı basılmaz ve * masaüstü grid 3 -> 2 sütun olur (başlık 300 + Neo kalan genişlik; başlık satırı ve veri satırları aynı sınıfı taşır, hizalı kalır). 3 sütunlu `grid-cols-[300px_minmax(0,1fr)_minmax(0,1fr)]` * Tailwind sınıfı output.css'te var, 2 sütunlusu yok (CI'da Tailwind derlenmiyor) -> düz CSS. Market dolu tablolarda işaretleme ve görünüm DEĞİŞMEZ (sınıf aynı kalır). */ .fee-table__cols-2 { grid-template-columns: 300px minmax(0, 1fr); } /* ==== C35 · Ürün ve Hizmetler hero görseli 554x539, görsel aralığı 10 px, alt boşluk 8 px, ikon konumları (G02-V002, G02-005) ==== * heroBanner02Section (yalnız Ürün ve Hizmetler; `.hero-banner02`), yalnız >=1200 px. Figma hizmet-urunler-d.json 'Background' (121:3535, y88 h812, dikey aralık 10): * H1 y208, açıklama y299-343, görsel 554x539 @ (443,353) (açıklamadan 10 px sonra; görsel altı 892, hero altı 900 = 8 px boşluk), ikonlar 70 px: bill (485,446), coins (390,665), analyse (957,516). * - Görsel: picture `lg:max-w-[520px]` -> 554 (görsel oranı 520:505,9 -> 539,0). Sarmalayıcı (720 px, ortalı; ikonların yüzde tabanı) görselin boyunu alır. * - Aralık: açıklama -> görsel `lg:mt-10` (40) -> 10 (Figma auto layout aralığı); alt boşluk 0 -> 8 (hero 120 + 136 + 10 + 539 + 8 = 813; Figma 812, metin yüksekliği +1). * - İkonlar: konumlar sarmalayıcıya (720 x 539) yüzde olarak, Figma görsel köşesine göre: bill sol 125 (17,361 %) üst 93 (17,254 %); coins sol 30 (4,167 %) alt 157 (29,128 %); * analyse sağ 53 (7,361 %) alt 306 (56,772 %). Eski değerler (sol 12 % üst 6 % / sol 8 % alt 22 % / sağ 6 % alt 28 %) 520 px'lik görsele göreydi. Yüzde: CMS görseli değişirse ikonlar görselle birlikte kalır. * - Mobil değişmez (tüm kurallar >=1200). Seçiciler `.hero-banner02` köküyle kapsanır; `.hero-banner02__float` translate animasyonu (<=8 px) bu kuralları etkilemez. * Hover kart görselleri (G02-V001: 356x244, kart altına yaslı) UYGULANMADI: görsel oranı medya (card-*-546.png 546x240) ile Figma'nın 356x244'ü uyuşmuyor. */ @media (min-width: 1200px) { .hero-banner02 > .container-large { padding-bottom: 8px; } .hero-banner02 > .container-large > .relative { margin-top: 10px; } .hero-banner02 picture { max-width: 554px; } .hero-banner02 .hero-banner02__float--1 { left: 17.361%; top: 17.254%; } .hero-banner02 .hero-banner02__float--2 { left: 4.167%; bottom: 29.128%; } .hero-banner02 .hero-banner02__float--3 { right: 7.361%; bottom: 56.772%; } } /* ==== C36 · Mobil Uygulama hero'su: QR 128 px (G05-052), başlık satır kırılımı (G05-054) ==== (G05-053 mor ilk harf: heroBanner06Section işaretlemesi) * heroBanner06Section (yalnız Mobil Uygulama; `.hero-banner06`), yalnız >=1200 px. * - G05-052: QR kutusu (`hidden lg:flex`, mobilde yok) `size-[92px]` idi; Figma 128x128. Özgüllük (0,2,1) > `.size-\[92px\]` (0,1,0). Sol sütun uzar ama hero yüksekliğini sağ görsel (495) belirler (655 aynı). * - G05-054: H1 masaüstünde 'ne10 ile Yatırım Dünyası Tek / Ekranda' kırılıyordu (son satırda tek kelime); Figma 'ne10 ile Yatırım Dünyası / Tek Ekranda'. `text-wrap: pretty` yetim kelimeyi önler * (Chrome 117+; desteklemeyen tarayıcılar eski kırılıma döner). Mobil kırılımı için Figma kanıtı yok (yalnız masaüstü işaretli): mobil değişmez. */ @media (min-width: 1200px) { .hero-banner06 img[src$="neo10-qr.svg"] { width: 128px; height: 128px; } .hero-banner06 h1 { text-wrap: pretty; } } /* ==== C38 · Ana sayfa: hero üst dolgusu 188 ve slayt kartı 334 (G01-078), neo10 metin sütunu sol 3rem (G01-094) ==== * Yalnız >=1200 px. Figma home-d.json: Hero (1002:75396, y0 h720): H1 ve slayt kartı y188, kart 774x334 (görsel 362x334); site pt-[180px] ve lg:h-[344px] (y180, 774x344). * Hero yüksekliği `lg:min-h-[720px]` belirler (720 aynı). Figma'daki x=39 hedefi UYGULANMADI: container 48 ile çelişir (Figma bölümleri x48); yalnız y ve yükseklik. * - G01-094: neo10 sağ sütunu (`.z-10`, 558 px) içerik kutusu 510 px olur; 432 px'lik iç blok 24 px sağa: başlık x783 -> 807 (Figma 807), QR kartı x825 -> 849 (Figma 849). * Seçici bölüm köküyle kapsanır; özgüllük Tailwind'in tek sınıflı kurallarını yener. * - G01-086 (`lg:gap-16`) ve G01-098 (mobil `h-[240px]`) işaretleme sınıfı değişiklikleridir (fd.css'te karşılığı yok). * - H2 (müşteri yorumu, 12.10): kart yüksekliği sabit 334 yerine EN AZ 334 (`min-height`). Slayt 2 ("Tek Fonla Farklı Yatırım Fırsatları") açıklaması 7 satır; sabit yükseklikte ok düğmeleri alt kenara * 4 px kalıyor, bir satır fazlasında (yedek font, farklı tarayıcı) kırpılıyordu. Şimdi içerik uzayınca kart büyür; slaytlar aynı yükseklikte kalır: `.swiper-slide` `height: auto` (Swiper'ın `height: 100%` kuralı * yüzdesi çözülmediği için slaytları esnetmiyordu) + makale `height: 100%`. Metin sütununun dikey boşluğu (`lg:gap-16`, 64) 32'ye iner: canlı içerikte (Geist, 7 satır) kart 334'te kalır, 1. ve 3. slayt AYNI görünür, * 2. slaytın okları diğerleriyle aynı hizaya (alttan 32) oturur. Oklar hep metin sütununun altında (`justify-between`); bir satır eklenirse tüm kartlar birlikte büyür (+≈15,5 px). Yalnız >=1200 px; mobil değişmez. */ @media (min-width: 1200px) { .hero-banner > .container-large { padding-top: 188px; } .hero-banner-swiper .swiper-slide { height: auto; } .hero-banner__slider article { height: 100%; min-height: 334px; } .hero-banner__slider article > div:first-child { gap: 2rem; } .neo10 .container-large > .grid > .z-10 { padding-left: 3rem; } } /* ==== C39 · K-12 + K-13: hero07 başlığı 660 px (yalnız >=1400), açıklama sütunu 546 px / 22,4 / -0,32 (G07-029, G10-018, G13-030, G06-039, G06-V001, G11-035, G11-036, G12-009, G12-041, G13-026, G07-030, G10-027) ==== * heroBanner07Section (`.hero-banner07`, 22 sayfa). Figma 1440: H1 x48 w660 (56 px / 67,2), açıklama x732 w546 (16 / 22,4 / -0,32). * - Açıklama: Razor'da sarmalayıcıdan `lg:leading-[1.6] lg:tracking-normal` kalktı (taban leading-[1.4] + K-14 kuralı = 22,4; tracking-[-0.02em] = -0,32 px) ve açıklama HTML'i `max-w-[546px]` iç * sarmalayıcıya alındı; dış sarmalayıcı 660 kalır (x732 korunur, düğmeler 546'nın dışında). Bu fd.css'te karşılığı olan kural yok. * - H1: şablondaki `lg:max-w-[432px]` yalnız >=1400 px'te 660 olur. 1440'ta container 1344 px: 660 + 24 + 660 sığar. 1200-1399'da H1 660 olunca açıklama sütunu 420-620 px'e (Figma 546'nın altına) sıkışıyordu * (1280'de 8 sayfada 500 px); bu aralıkta 432 kalır. Özgüllük (0,1,1) > `.lg\:max-w-\[432px\]` (0,1,0). */ @media (min-width: 1400px) { .hero-banner07 h1 { max-width: 660px; } } /* ==== C39 ek · hero07 başlığında içerikteki satır sonu korunur (G06-039; Figma açık satır sonları) ==== * Figma bazı başlıkları kutu genişliğinden bağımsız, elle böler: "Yönetim Kurulu ve⏎Üst Yönetim" (432:8503), "Hesap Açılış⏎Yöntemleri" * (524:24418). 660 px'te bu başlıklar tek satıra iniyor; kırılım içerikte satır sonu olarak girilir, `pre-line` onu satır olarak basar. * Başlık Razor'da tek satırda (`

@content.Title

`) basıldığı için satır sonu içermeyen başlıklarda çıktı aynıdır. */ .hero-banner07 h1 { white-space: pre-line; } /* ==== C40 · Header: menü satırı adımları Figma'da, tanıtım görseli 318x188, mobil arama kutusu altı 24 px (G01-072, G01-074, G01-075) ==== * Razor: kategori satırlarına `leading-[1.4]` (16 px metin: 24 -> 22,4 px satır), mobil üst satırda `gap-10` -> `gap-6` ve "Müşterimiz Ol" `shrink-0` (G01-071). * - G01-074 (>=1200): Figma kategori satırı adımı 54 (global-menu-d.json etiket y152, 206, 260, …). Satır 22,4 + 2 x 16 + 1 px alt kenarlık = 55,4; dikey dolgu 15,3 px -> 54,0. * - G01-075 (>=1200): tanıtım görseli `aspect-[318/200]` (output.css'te `aspect-[318/188]` yok) -> 318x188; görsel kutusu `.site-header__mega-panel` kapsamında. * - G01-072 (<1200): mobil menü satırı adımı 46 (global-menu-m.json etiket y172, 218, 264, …). Satır 22,4 + 2 x 12 + 1 = 47,4; dikey dolgu 11,3 px -> 46,0. Hem `button.site-header__mobile-cat` * hem doğrudan bağlantı (`a`) satırları aynı adımda. İlk etiket y172 (Figma: Ara kutusu y92-136, ilk satır y160 + 12): kutunun alt boşluğu 32 -> 24 px (`mb-6` output.css'te yok). */ @media (min-width: 1200px) { .site-header__cat { padding-block: 15.3px; } .site-header__mega-panel .aspect-\[318\/200\] { aspect-ratio: 318 / 188; } } @media (max-width: 1199.98px) { .site-header__mobile-nav > :is(a, button) { padding-block: 11.3px; } .site-header__mobile-panel[data-mobile-panel="root"] > label { margin-bottom: 1.5rem; } } /* ==== C41 · Footer: adresteki satır sonları görünür (G01-097) ==== * Razor: `lg:gap-20` -> `lg:gap-16` (G01-096) ve yasal bağlantı satırı `gap-4 lg:gap-6` (G01-101). Figma adresi 'Levent Mah. Gonca Sk. Emlak Bankası Pasajı / No:22 İç Kapı No:38 Beşiktaş / İSTANBUL' * biçiminde iki satırdır; site değeri tek satır metin ve sütun genişliğinde kendiliğinden sarıyor ('… Pasajı No:22 İç / Kapı No:38 …'). `pre-line` içerikteki satır sonunu korur (boşlukları yine birleştirir); * satır sonu İçerik'te adrese girilir (deploy sonrası), mevcut içerikte satır sonu olmadığından yerleşim aynı kalır. */ .site-footer img[src$="icon-footer-pin.svg"] + span { white-space: pre-line; } /* ==== C42 · 404: içerik pencerede dikey ortalı, masaüstü (G01-102) ==== * PageNotFound.cshtml kökü `.page-404` (`min-h-[60vh] lg:min-h-[70vh]`, içerik header altındaki 630 px'te ortalı). Figma 404-d.json 1440x900: '404' y301 … düğme kutusu y556-600 = 299 px blok, merkezi 450,5 = pencere ortası. * - Bölüm >=1200 px'te pencere yüksekliğinde (`100svh`) ve içerik onun içinde ortalı. * - Koyu header (`.site-header.dark`, `position: relative`) akıştadır (88 px): bölüm pencerenin tepesinden başlasın diye `margin-top: -88px` (header z-50 ile üstte kalır). Header koyu değilse (absolute, akışta değil) * bölüm zaten y0'dadır ve negatif kenar boşluğu uygulanmaz. * Mobil değişmez: Figma m '404' y164 (blok 164-440, merkezi 302) pencere ortasında (422) değil; site 60vh içinde ortalı ('404' y187,6): Figma'dan türetilemeyen mobil kural eklenmedi (G01-103 D'de). */ @media (min-width: 1200px) { .page-404 { min-height: 100svh; } .site-header.dark ~ main > .page-404 { margin-top: -88px; } } /* ==== İnceleme R2 · İletişim formu: hatalı alan odaktayken görünür odak göstergesi (WCAG 2.4.7) ==== * Alanlar `outline-none` (2 px ŞEFFAF dış çizgi) ve tek odak işareti `focus:border-[#B42EFF]` kenarlığıydı. C23'te geçersiz alanın kırmızı kenarlığı * (`.uk-form-danger`, 0,2,1) bu mor kenarlığı (0,2,0) ezdiği için jQuery Validate'in gönderimde odakladığı ilk geçersiz alanda (`focusInvalid`) görünür hiçbir * odak işareti kalmıyordu (kenarlık kırmızı kalır, çizgi şeffaf). Odaktaki geçersiz alana 3 px'lik %25 kırmızı halka eklenir; kenarlık #EF4444'te kalır. * Özgüllük (0,3,1). Odaksız geçersiz alan ve geçerli alan değişmez. */ .contact-form :is(input, select, textarea).uk-form-danger:focus { box-shadow: 0 0 0 3px rgb(239 68 68 / 0.25); } /* ==== İnceleme R4 · Haberler kategori çipleri: içeriklerinin altına inmez, sığmazsa satır kaydırılır (<1200 px) ==== * Çipler `min-w-0 flex-1` (C18). Kategori sayısı arttığında satır genişliği çiplere eşit paylanır ve `min-width: 0` yüzünden çipler içeriklerinin altına daralır * (metin sarar, çip uzar); satır hiç taşmadığı için `overflow-x-auto` kaydırması da işlemez. `min-width: max-content` çipin tek satır genişliğinin altına inmesini * önler; `flex-1` kalır: bugünkü az sayıda kategoride (üç çip) boş genişlik eşit paylaşılır, görünüm aynıdır; çipler sığmazsa satır yatay kaydırılır. * Masaüstünde çipler `lg:flex-none` olduğundan yalnız <1200 px. Özgüllük (0,2,0), `.min-w-0` (0,1,0) üstünde. */ @media (max-width: 1199.98px) { .news-list .news-list__tab { min-width: max-content; } } /* ==== İnceleme R5 · Haberler filtre çubuğu: Tab sırası masaüstünde görsel sırayla aynı (WCAG 2.4.3); mobilde Tarih Seç solda, Temizle sağda (G09-031) ==== * C18 Temizle düğmesini DOM'da tarih kutusundan sonraya taşıyıp `lg:order-first` vermişti: ≥1200 px'te görsel sıra (Temizle, Tarih) ile DOM/Tab sırası (Tarih, Temizle) ayrışıyordu. * Razor C18 öncesi DOM sırasına döndü (Temizle önce) ve `lg:order-first` kalktı: masaüstünde görsel sıra = DOM sırası = Tab sırası (Temizle, Tarih). * Figma m'de Tarih Seç solda, Temizle sağda: <1200 px'te Temizle `order: 1` ile satır sonuna alınır. Bilinçli kalan fark: <1200 px'te görsel sıra Tarih -> Temizle, Tab sırası Temizle -> Tarih. * Özgüllük (0,2,0). */ @media (max-width: 1199.98px) { .news-list [data-news-clear] { order: 1; } } /* ==== E03 · reCAPTCHA: rozet gizli, atıf metni formlarda görünür (G01-V004) ==== * Google reCAPTCHA v3 rozeti (.grecaptcha-badge, sağ altta sabit) footer'daki Clockwork logosunun üstüne biniyordu (masaüstü ve mobil). Google rozeti gizlemeye ancak * "This site is protected by reCAPTCHA..." atfı kullanıcı akışında görünürse izin verir: metin Views/Partials/Shared/RecaptchaNotice.cshtml'den (sözlük: Form.RecaptchaNotice) * beş formda (bülten, iletişim, müşteri, kariyer ilanı başvurusu, genel başvuru) gönder düğmesinin altında basılır. * visibility:hidden (display:none değil): rozet DOM'da ve yerinde kalır, betiğin kurduğu satır içi stiller (position, boyut) bozulmaz; satır içi stil visibility vermediğinden bu kural uygulanır. * Betik her sayfada yüklenir ama kural YALNIZ atıf metni bulunan sayfalarda uygulanır (body:has(.recaptcha-notice)): form içeren 44 sayfa. Form bulunmayan sayfalarda * (404, Amerikan Borsası, Hisse Senetleri, Raporlar listesi) atıf yok; Google rozeti atıfsız gizlemeye izin vermediğinden rozet orada görünür kalır * (footer logosuyla çakışma o 4 sayfada sürer: G01-V004 kısmen). :has desteklemeyen tarayıcıda kural düşer, rozet görünür kalır (güvenli hata). * Atıf bağlantıları metin rengini alır ve altı çizili kalır (renk tek ayırt edici olmasın); bülten formu ortalıdır (diğer dördü sola yaslı). */ body:has(.recaptcha-notice) .grecaptcha-badge { visibility: hidden; } .recaptcha-notice a { text-decoration: underline; text-underline-offset: 2px; } .announcements-form .recaptcha-notice { text-align: center; } /* ==== E13 · KVKK "PDF İndir" bağlantısı sitenin standart PDF bağlantısı gibi görünür (G12-026) ==== * KVKK zengin metninde (RTE) PDF bağlantısı `

PDF İndir

` gelir (4 yer, /tr/kvkk); output.css `.kvkkContentStyle a` onu mor (#B42EFF) düz metin, * `.kvkkContentStyle p` 16 px (>=1200) yapıyordu. Figma/standart (relatedDocumentsSection, documentListSection, recentlyPublishedResearchSection): `inline-flex items-center gap-2` 14 px / 500, #09090B, * solda 20 px çerçeveli (#E4E4E7) daire içinde 14 px chevron (/Content/img/icon-chevron-right-circle.svg). Şablon ve içerik DEĞİŞMEZ (RTE'ye sınıf eklenmez): yalnız `p > a[href$=".pdf"]`. * Özgüllük (0,2,2): output.css `.kvkkContentStyle a` / `.kvkkContentStyle p` (0,1,1) ezilir; fd.css sonra yüklenir. `letter-spacing: normal`: standart bağlantıda izleme yok, `p` -0,02em miras verirdi. * Hover (.8 opaklık) output.css'te zaten var. Yalnız PDF bağlantıları: KVKK metnindeki başka bağlantılar (varsa) mor kalır. * `vertical-align: top`: inline-flex kutusu varsayılan baseline hizasında 20 px'lik simgeyi taban çizgisine oturtur ve paragrafın satır kutusunu büyütür (+4 px d/l, +6 px m; ölçüldü). * top ile paragraf yüksekliği d/l'de aynı kalır, mobilde +0,4 px (simge 20 px > 14 px x 1,4 satır): bağlantının altındaki/üstündeki başlık boşlukları değişmez. */ .kvkkContentStyle p > a[href$=".pdf" i] { display: inline-flex; align-items: center; vertical-align: top; gap: 8px; font-size: 14px; font-weight: 500; line-height: 1.4; letter-spacing: normal; color: #09090B; } .kvkkContentStyle p > a[href$=".pdf" i]::before { content: ""; flex: none; box-sizing: border-box; width: 20px; height: 20px; border: 1px solid #E4E4E7; border-radius: 50%; background: url("/Content/img/icon-chevron-right-circle.svg") center / 14px no-repeat; } /* * Atlama bağlantısı (Layout.cshtml, 'nin ilk öğesi; denetim 7.4): klavyede Tab'a ilk basışta odaklanır ve #main-content'e götürür. * Normalde ekran dışındadır (mutlak konum, akışa girmez): yerleşim ve kutu ölçümü değişmez. output.css'te focus:not-sr-only yok, bu yüzden düz CSS. */ .neo-skip-link { position: absolute; left: -9999px; top: 0; } .neo-skip-link:focus { left: 16px; top: 16px; z-index: 100000; padding: 10px 16px; border-radius: 9999px; background: #B42EFF; color: #fff; font-size: 14px; font-weight: 500; text-decoration: none; outline: 2px solid #fff; outline-offset: 2px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25); } /* Atlama hedefi tabindex="-1" ile odak alır; hedef etkileşimli bir öğe olmadığından odak halkası çizilmez */ #main-content:focus { outline: none; } /* ==== J1 · Header: sağ paneli yalnız "İncele" taşıyan Ürün ve Hizmetler kategorileri doğrudan bağlantı satırı (kullanıcı talebi, 05.10) ==== * Header.cshtml: alt bağlantı listesi olmayan (ya da tek alt bağlantısı kategorinin kendisi olan) kategoriler sol sütunda sekme düğmesi (`button.site-header__cat`) yerine * doğrudan bağlantıdır (`a.site-header__cat-link`, hedef = eski "İncele" hedefi) ve alt panel basılmaz. Alt bağlantı listeli kategori (Aracılık Faaliyetleri) sekme kalır; * main.js sekme mantığı yalnız `.site-header__cat`'e bağlandığından bağlantı satırına dokunmaz, tıklama sayfaya gider. * Satır sekme düğmesiyle aynı kutudur: C40 dikey dolgusu (>=1200 px: satır adımı 54) ve output.css `.site-header__cat:not(.is-active) img` karşılığı (chevron dinlenmede gizli) * `.site-header__cat` sınıfına bağlı olduğundan burada bağlantı sınıfı için yinelenir; dinlenmede 6 satır özdeş görünür. * Üzerine gelince / klavye odağında satır etkin sekmedeki görünüme (mor metin ve kenarlık, chevron) döner. Özgüllük (0,2,0): `.text-[#6B6C6F]` / `.border-[#E6E6E7]` (0,1,0) üstünde. * Mobil (<1200 px) bağlantı satırları zaten `.site-header__mobile-nav > :is(a, button)` (C40) ile aynı adımda; mobilde ek kural yok. */ @media (min-width: 1200px) { .site-header__cat-link { padding-block: 15.3px; } } .site-header__cat-link img { display: none; } .site-header__cat-link:is(:hover, :focus-visible) { border-color: #B42EFF; color: #B42EFF; } .site-header__cat-link:is(:hover, :focus-visible) img { display: block; } /* ==== M6 · Hikayemiz: çok başlıklı anlatı metninde başlık→paragraf ve paragraf→paragraf boşlukları (FE-BE kartı #43, Barış maddesi 6) ==== * `.textContentStyle` flex sütundur; temel boşluk output.css'te mobil 40 (gap-10) / >=1200 px 64 (gap-16) ve tüm çocuklar arasında aynı. Hikayemiz'in yeni anlatı bloğu * (Figma'da karşılığı yok) başlık→paragraf ve paragraf→paragraf geçişlerini de 64 / 40 basıyordu. Hedef: h2→p 24, p→p 24 (>=1200) / 20 (mobil); paragraf→sonraki başlık DEĞİŞMEZ (64 / 40). * Negatif margin-top flex gap'in üstüne biner: mobil h2→p 24 - 40 = -16, p→p 20 - 40 = -20; >=1200 px ikisi de 24 - 64 = -40. * Kapsam (içerik biçimine duyarlı): en az iki h2 taşıyan ve doğrudan çocuk olarak h3 / ul / ol / table içermeyen blok. Yalnız Hikayemiz (+ EN eşi) eşleşir; * Müşteri Sınıflandırması (iki h2 ama ul / h3 var) dışarıda kalır. Özgüllük: mobil kurallar ile ≥1200 px kuralı aynı özgüllükte (0,1,5), sonraki kural kazanır. */ .textContentStyle:has(> h2 ~ h2):not(:has(> :is(h3, ul, ol, table))) > h2 + p { margin-top: -16px; } .textContentStyle:has(> h2 ~ h2):not(:has(> :is(h3, ul, ol, table))) > p + p { margin-top: -20px; } @media (min-width: 1200px) { .textContentStyle:has(> h2 ~ h2):not(:has(> :is(h3, ul, ol, table))) > :is(h2 + p, p + p) { margin-top: -40px; } } /* ==== M9/M10 · Başlıksız metin bloğunda paragraf arası boşluk (FE-BE kartı #43, Barış maddeleri 9 ve 10) ==== * Başlık taşımayan `.textContentStyle` (Kendi Adına, Kamusal Nüfuz, Yasal Uyarı, Kurum Politikaları + EN eşleri) output.css'teki temel boşluğu (mobil 40 / >=1200 px 64) paragraflar * arasında da basıyordu; düz yazı akışında paragraf arası mobil 20 / masaüstü 24 px. Başlık (h2-h6) içeren bloklar değişmez: orada boşluk başlık ritmini taşır. * Özgüllük: `:not(:has(h2…))` (0,1,1) output.css `.textContentStyle` (0,1,0) kuralını yener; >=1200 px kuralı aynı özgüllükle aşağıda olduğundan 4rem'i ezer. * Tek çocuklu başlıksız bloklarda (Ana Sayfa, Amerikan Borsası, Araştırma, İşlem Kanalları, Canlı Borsa, Kamuyu ilk blok) komşu olmadığından görsel etki yok. */ .textContentStyle:not(:has(h2, h3, h4, h5, h6)) { gap: 1.25rem; } @media (min-width: 1200px) { .textContentStyle:not(:has(h2, h3, h4, h5, h6)) { gap: 1.5rem; } } /* ==== M7 · Kamuyu Aydınlatma: "KAP'ta Görüntüle" düğmesi ve ardışık iki metin bölümü (FE-BE kartı #43, Barış maddesi 7) ==== * (a) Düğme, zengin metinde paragrafın sonuna `
` ile eklenmiş satır içi öğedir (inline-flex): metin satırına 0 px yapışık basılıyordu. hero07 paragraf→düğme mesafesi 44 (mobil 40); * satır içi öğede margin-top satır kutusunu büyüttüğünden düğme metnin 44 / 40 px altına iner. Seçici `br + a.text-content__button` yalnız Kamuyu'daki KAP düğmesini yakalar: * ikinci metin bloğundaki "Bilgi Toplumu Hizmetleri" bağlantısı paragrafın başında, öncesinde br yok. * (b) >=1200 px: Kamuyu'da ardışık iki metin bölümü 80 + 80 = 160 px aralıkla basılıyordu (düğmeden sonraki başlığa 160); ikinci bölümün üst dolgusu 0 → aralık 80 px. * Kapsam: `.research-documents ~ .text-content + .text-content` (araştırma belge listesinden sonra gelen ardışık iki metin bölümü). Bireysel Portföy ve İşlem Kanalları'ndaki ardışık * metin bölümleri `research-documents` taşımadığından, Araştırma'daki metin bölümleri ardışık olmadığından etkilenmez. Mobilde zaten `pt-0` (Tailwind): yalnız >=1200 px. * Özgüllük (0,4,0): Tailwind `lg:py-20` (0,1,0) yenilir. */ .textContentStyle br + a.text-content__button { margin-top: 40px; } @media (min-width: 1200px) { .textContentStyle br + a.text-content__button { margin-top: 44px; } .research-documents ~ .text-content + .text-content > .container-large { padding-top: 0; } } /* ==== M8 · Yüz Yüze Hesap Açılışı: adım kutusuz ardışık iki bölüm tek bölüm dolgusu alır (FE-BE kartı #43, Barış maddesi 8) ==== * howDoesTheStockMarketWork bölümü `py-20 lg:py-[120px]` taşır; yalnız başlık + açıklama içeren ("Kimler İçin Uygun", "Dijital Açılıştan Farkı Ne") iki ardışık bölüm * 120 + 120 = 240 px (mobil 80 + 80 = 160) aralıkla basılıyordu. İkinci bölümün üst dolgusu 0 → aralık 120 (mobil 80): tek bölüm dolgusu. * Adım kutusu (`.rounded-2xl`) taşıyan bölümler iki taraftan biri olamaz: Hisse Senetleri ve Hesap Açılış Yöntemleri'ndeki ardışık bölümler kutulu, Yüz Yüze'nin kutulu ilk bölümü * ile "Kimler İçin Uygun" çifti de değişmez. Özgüllük (0,5,0): Tailwind `py-20` / `lg:py-[120px]` (0,1,0) yenilir; mobil ve masaüstü aynı kural. */ .how-does-the-stock-market-work:not(:has(.rounded-2xl)) + .how-does-the-stock-market-work:not(:has(.rounded-2xl)) > .container-large { padding-top: 0; } /* ==== Y6 · howDoesTheStockMarketWork açıklaması: ardışık paragraflar arası boşluk (Hisse Senetleri "Kredili İşlemler Nasıl Çalışır?" ve yeni ürün sayfaları) ==== * Bölüm başlığının altındaki açıklama (`description`) zengin metindir (RTE); kardeş `

`'ler Tailwind preflight'ta 0 margin taşıdığından bitişik basılıyordu (giriş + risk notu). * Değer sitedeki benzer RTE açıklamalarından ölçüldü (canlı HTML, 1440 / 390): başlık altı açıklamalarda Canlı Borsa (M12a) 16 px, Kurumsal Finansman sol-görsel-sağ-açıklama 16 px, * hero07 açıklama sütunu 16 (mobil) / 20 (>=1200), düz metin bloklarında (M9/M10) 20 / 24; burada Canlı Borsa ile aynı 16 px (1rem). Kapsam: başlık sarmalayıcısının (`max-w-[660px]`) açıklama kutusunun doğrudan `p` çocukları; adım kutularındaki açıklamalar * (`.rounded-2xl` içi) ve tek paragraflı açıklamalar (komşu yok) DEĞİŞMEZ. */ .how-does-the-stock-market-work .max-w-\[660px\] > div > p + p { margin-top: 1rem; } /* ==== VİOP · howDoesTheStockMarketWork adım okları başlık satırında (>=1200) ==== * Adım kutusu masaüstünde `flex-row items-center`: oklar en uzun sütunun dikey ortasına iniyordu (VİOP adım metinleri uzun: 1440'ta başlık ortasından 114,8 px aşağıda; * kısa metinli sayfalarda -12,4…+46 px). Ok kutunun üstüne yaslanır ve adım sütununun başlık satırına indirilir: * sütun `lg:py-8` 32 + numara `size-6` 24 + `lg:gap-12` 48 = 104 px başlık üstü; başlık satırı 16 px × 1,2 = 19,2 → orta 113,6; ok 20 px → üst 103,6 px. * Ölçüm (canlıya enjeksiyon, 6 sayfa × 1200/1440/1920): ok ortası = ilk başlık satırı ortası (fark 0), okların yatay konumu ve kutu yüksekliği aynı; 1199 ve 390'da değişiklik yok * (<1200 sütun düzeni, oklar dönük). Başlık birden çok satırsa ok ilk satıra hizalanır. */ @media (min-width: 1200px) { .how-does-the-stock-market-work .rounded-2xl > img[src*="icon-arrow-small-right"] { align-self: flex-start; margin-top: 103.6px; } } /* ==== M12a · Canlı Borsa: açıklama paragrafları arası boşluk (FE-BE kartı #43, Barış maddesi 12) ==== * liveStockExchangeSection açıklaması zengin metindir (RTE): kardeş `

`'ler Tailwind preflight'ta 0 margin taşıdığından bitişik basılıyordu. Paragraflar arası 16 px (1rem). * Kapsam: başlığı izleyen açıklama kutusunun doğrudan `p` çocukları; `.live-stock-exchange` yalnız Canlı Borsa (+ EN eşi) sayfasında vardır (diğer sayfalarda `live-stock-market`). * Paragraf sonundaki tek `
` (RTE çıktısı) ek satır üretmez: paragraflar arası aralık margin kadar kalır. */ .live-stock-exchange h1 + div > p + p { margin-top: 1rem; } /* ==== M1 · Header: kategorili menü panelinde ve mobil çekmecede "Tüm Ürün ve Hizmetler" bağlantı satırı (FE-BE kartı #43, Barış maddesi 1) ==== * Header.cshtml: menünün `links` alanındaki ilk bağlantı (CMS: TR "Tüm Ürün ve Hizmetler", EN "All Products and Services") masaüstünde kategori sütununun sonuna (`a.site-header__all-link`), * mobilde kök kategori listesinin sonuna (`a.site-header__mobile-all-link`) koyu metin (üzerine gelince mor) ve mor chevron ile düz bağlantı satırı olarak basılır; JS kancası yok (main.js yalnız .site-header__cat ve [data-submenu]'a bağlanır). * Metin rengi bilerek koyu (#1B1B1C): marka moru #B42EFF beyaz zeminde 4,40:1 (WCAG AA 4,5:1 altı) ve etkin sekmeyle (mor) karışırdı; sınıflar output.css'te derlenmiş. * Alan boşken satır basılmaz. Satır adımı kategori satırlarıyla aynı: >=1200 px'te C40 / J1 gibi dikey dolgu 15,3 px (satır adımı 54; çıplak `py-4` 55,4 verirdi); * mobilde `.site-header__mobile-nav > :is(a, button)` (C40) kuralı doğrudan çocuk olan bağlantıya zaten 46 px adımı verir, ek kural yok. Panel zemini her durumda beyaz: koyu/yapışkan header için renk kuralı gerekmez. */ @media (min-width: 1200px) { .site-header__all-link { padding-block: 15.3px; } } /* ==== Kart #44 · C1 Form onayları: kilitli kutu görünümü ve metin bağlantısı ==== * Views/Partials/Shared/ConsentCheckbox.cshtml + wwwroot/js/consent-links.js. Kutu, etiketteki metin açılana kadar `data-consent-locked="true"` taşır (disabled DEĞİL; gerekçe şablon yorumunda). * Kilitliyken: kutu soluk, imleç not-allowed, ipucu görünür. Kilit kalkınca (öznitelik silinir) ipucu gizlenir, görünüm normale döner. * Bağlantı mor ve altı çizili: açık zeminde #B42EFF (output.css'teki .textContentStyle a ile aynı renk). */ label:has(> input[data-consent-locked="true"]) { cursor: not-allowed; } input[data-consent-locked="true"] + span { opacity: 0.5; } input:not([data-consent-locked="true"]) ~ span [data-consent-hint] { display: none; } [data-consent-link] { color: #B42EFF; text-decoration: underline; text-underline-offset: 2px; } [data-consent-link]:hover, [data-consent-link]:focus-visible { opacity: 0.8; } /* ==== Kart #44 · C2 Zengin metin bağlantıları mor ==== * Paragraf/liste içindeki SINIFSIZ bağlantılar (zengin metinden gelenler; RTE çıktısı bağlantıya sınıf koymaz) marka moru, altı çizili. Düğme/kart bağlantıları sınıf taşıdığından `:not([class])` ile dışarıda kalır. * `.textContentStyle a` / `.kvkkContentStyle a` (output.css) ile aynı renk, bindirme ve ofset; fark: altı çizgi (preflight `text-decoration: inherit` verdiğinden orada çizgi yok). * Koyu zemin dışlaması: #B42EFF koyu/mor zeminde okunmaz. Ölçümde 78 sayfada p/li içindeki 33 sınıfsız bağlantının hepsi açık zeminde; yine de ileride koyu bir bölüme zengin metin girilirse * (bg-[#980EE2]/#7F12B7 mor, bg-[#09090B]/#1B1B1C siyah, .faq-purple başlık alanı) kural orada çalışmaz. Footer `

` dışında olduğundan etkilenmez. */ main :is(p, li) a:not([class]):not(.faq-purple *, [class*="bg-[#980EE2]"] *, [class*="bg-[#09090B]"] *, [class*="bg-[#1B1B1C]"] *, [class*="bg-[#7F12B7]"] *) { color: #B42EFF; text-decoration: underline; text-underline-offset: 2px; transition: opacity 150ms cubic-bezier(0.4, 0, 0.2, 1); } main :is(p, li) a:not([class]):not(.faq-purple *, [class*="bg-[#980EE2]"] *, [class*="bg-[#09090B]"] *, [class*="bg-[#1B1B1C]"] *, [class*="bg-[#7F12B7]"] *):is(:hover, :focus-visible) { opacity: 0.8; } /* ==== Kart #48 · Ana sayfa "Yatırım Deneyimini Güçlendiren Teknoloji": eksik satır ortalı (Barış maddesi 1) ==== * fourGridWithBgSection ızgarası sabit 2/4 sütun (`grid-cols-2 lg:grid-cols-4`); Algoritmik Destek kartı çıkınca (12.10) 3 kart * masaüstünde sola yaslı kaldı, sağda boş sütun oluştu. Izgara sarmalı flex'e çevrilir: kart genişliği eski sütun genişliğiyle * aynı (gap-x-6 = 1.5rem, lg:gap-12 = 3rem), eksik satır ortalanır; 4 kartta görünüm öncekiyle aynı. Mobilde 2+1'in üçüncüsü ortada. */ .four-grid-with-bg .grid { display: flex; flex-wrap: wrap; justify-content: center; } .four-grid-with-bg .grid > article { flex: 0 0 calc((100% - 1.5rem) / 2); min-width: 0; } @media (min-width: 1200px) { .four-grid-with-bg .grid > article { flex-basis: calc((100% - 3 * 3rem) / 4); } } /* ==== Kart #52 · Form gönderilirken sayfa kilidi ==== * Layout.cshtml `#neo-page-lock`: gönderim sürerken (reCAPTCHA + istek) tüm sayfayı kaplar, tıklamayı keser, imleç bekleme gösterir. * Bildirim kutusu (`#toast-container`, z-50) katmanın üstünde kalır. Yeni sınıf output.css'te olmadığı için düz CSS. */ .neo-page-lock { position: fixed; inset: 0; z-index: 9998; background-color: rgb(255 255 255 / 0.5); cursor: wait; } .neo-page-lock[hidden] { display: none; } #toast-container { z-index: 9999; } /* ==== Kart #53 · Ürün ve Hizmetler kartı: uzun metin "İncele"yi görselin altına itmesin (Barış maddesi 3) ==== * twoGridHoverCardsSection masaüstünde sabit yükseklik (`lg:h-[440px]`, metin kutusu `lg:h-[200px]`): Bireysel Portföy metni 200 px'i aşınca * "İncele" görsel kutusunun üstüne taşıyor, DOM'da sonra gelen görsel bağlantıyı örtüyor (tıklama IMG'ye düşüyordu). Sabit yükseklik alt sınıra * çevrilir, metin kutusu içeriği kadar uzar. Eski yerleşimde kısa metinli kartta da içerik 200 px kutudan alt dolgu kadar taşıyordu ve görsel * kutusu 238 px'e sıkışıyordu; aynı ölçüler korunur (alt dolgu 9 px, görsel 238 px): kısa kartta 440 px, "İncele" 171→172 px (alt piksel), uzun metinde kart uzar. * Yalnız görselli kartlar (`:has`): görselsiz kartta eski sabit yükseklik kalır ("İncele" dibe inmesin). */ @media (min-width: 1200px) { .two-grid-hover-cards article:has(> div:first-child + div) { height: auto; min-height: 440px; } .two-grid-hover-cards article:has(> div:first-child + div) > div:first-child { flex: 1 0 auto; height: auto; min-height: 200px; padding-bottom: 9px; } .two-grid-hover-cards article > div:first-child + div { flex-shrink: 0; height: 238px; } } /* ==== Kart #53 · Mega menü alt başlıkları (Barış maddesi 4) ==== * Header.cshtml `IsNestedLink`: adresi listedeki başka bir bağlantının altında olan bağlantı (Borçlanma Araçları › Tahvil / Bono, Eurobond, Repo) girintili. */ .site-header__sublink { margin-left: 0.5rem; border-left: 1px solid #E6E6E7; padding-left: 0.75rem; }