/* ===== v474 · BANKA KİMLİĞİ ===== Bankanın marka rengi bir KİMLİK katmanıdır — logo karosunun ardındaki hale, kartın köşesinden süzülen tonlu cam ışığı, taksit dizisi, Özet'te logo yığını. DURUM bu renkle ANLATILMAZ: gecikme, ödenmedi, onay bekliyor her zaman semantik rozettir (`.rozet-geciken` vb., ikon + metin). Akbank kırmızısı "risk" değil "Akbank" demektir; Akbank kredisi gecikmişse uyarıyı kırmızı ışık değil "1 taksit gecikti" rozeti (durum dili: ünlem ikonlu kritik hap) söyler. KURALLAR.md ▸ "## v474" ▸ B (banka kimliği). Tokenlar (JS yazar — js/banka-kimligi.js ▸ bankaKimlikDegiskenleri, satır içi): --banka ham marka rengi --banka-k koyu tema tonu (OKLCH, ton açısı korunur, ≥ 3:1) --banka-a aydınlık tema tonu (≥ 3:1) Bu dosya temaya göre seçer: --bk-ton metin DIŞI marka öğesi (dolgu, ikon) koyu: --banka-k · aydınlık: --banka-a --bk-isik ışık/hale (dekoratif, kontrast taşımaz) koyu: --banka-k · aydınlık: --banka (ham — sarı Vakıf'ın ışığı aydınlıkta altın-kahve değil sarı kalsın) Kontur YOK (ince çizgi istemiyoruz): ışık yalnız arka plan katmanı ve yumuşak hale; kenar çizgisi, renkli şerit yok. Okunurluk: ışık YAZI ALANINDA ≤ %16 (koyu) / ≤ %10 (aydınlık) — yazısız piksel taramasıyla ölçüldü (KURALLAR ölçümler). */ .bk-kimlik, .bk-yigin-karo { --bk-ton: var(--banka-k, var(--banka, var(--vurgu))); --bk-isik: var(--banka-k, var(--banka, var(--vurgu))); --bk-kose: 15%; /* köşe ışığının çekirdek yoğunluğu */ --bk-hale: 42%; /* logo halesi */ } :root[data-tema="aydinlik"] :is(.bk-kimlik, .bk-yigin-karo) { --bk-ton: var(--banka-a, var(--banka, var(--vurgu))); --bk-isik: var(--banka, var(--banka-a, var(--vurgu))); --bk-kose: 10%; --bk-hale: 30%; } /* ---------- 1) Kart malzemesi: köşeden süzülen marka ışığı (Liquid Glass içinde tonlu cam) ---------- İki radyal katman: geniş, sönük köşe ışığı (≤ %5 — doğrulama turu; %55'ken bütün kartı boyuyor, marka rengi durum hapıyla göz göze geliyordu) + logonun hemen ardında yoğun çekirdek. Kartın kendi cam katmanı (--cam-pencere, parıltı) AYNEN altta kalır; bulanıklık YOK (içerik kartı kuralı, v469 D1). */ :root[data-cam-etkin] .gorunum:not(#komutaGorunum) :is(.kredi-kart, .kredi-ozet-kart, .varlik-satir, .okart).bk-kimlik { background: radial-gradient(150px 120px at 0 0, color-mix(in oklab, var(--bk-isik) var(--bk-kose), transparent), transparent 100%), radial-gradient(520px 240px at 0 0, color-mix(in oklab, var(--bk-isik) calc(var(--bk-kose) * .3), transparent), transparent 100%), var(--cam-pencere); } :root[data-cam-etkin] .gorunum:not(#komutaGorunum) .varlik-satir.panel.bk-kimlik { background: radial-gradient(150px 120px at 0 0, color-mix(in oklab, var(--bk-isik) var(--bk-kose), transparent), transparent 100%), radial-gradient(520px 240px at 0 0, color-mix(in oklab, var(--bk-isik) calc(var(--bk-kose) * .3), transparent), transparent 100%), var(--cam-parilti-pencere), var(--cam-pencere); } /* ---------- 2) Logo karosu: marka renginde yumuşak hale + cam parıltısı ---------- ⚠️ v469 A.2 "renkli dış ışıma YOK" kuralının TEK istisnası budur: yalnız .bk-kimlik içindeki banka logosu, kartın İÇİNDE kalan yumuşak hale (kart overflow'u dışına taşmaz; düğmelere, rozetlere, tutarlara renkli gölge YİNE YOK). Üstte %14'lük cam parıltısı (Apple uygulama ikonu hissi) — logonun kendisi (kullanıcının dosyası) değişmez. */ :root[data-cam-etkin] .gorunum:not(#komutaGorunum) .bk-kimlik .banka-mark, :root[data-cam-etkin] .gorunum:not(#komutaGorunum) .bk-kimlik .banka-mark.logo-var { box-shadow: 0 0 26px 2px color-mix(in oklab, var(--bk-isik) var(--bk-hale), transparent), 0 6px 14px -8px rgba(0, 0, 0, .55); } :root[data-cam-etkin][data-tema="aydinlik"] .gorunum:not(#komutaGorunum) .bk-kimlik .banka-mark, :root[data-cam-etkin][data-tema="aydinlik"] .gorunum:not(#komutaGorunum) .bk-kimlik .banka-mark.logo-var { box-shadow: 0 0 24px 2px color-mix(in oklab, var(--bk-isik) var(--bk-hale), transparent), 0 6px 14px -8px rgba(24, 38, 74, .35); } .bk-kimlik .banka-mark::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; border-radius: inherit; background: linear-gradient(180deg, rgba(255, 255, 255, .14), rgba(255, 255, 255, 0) 46%); } /* Küçük (Para listesi) rozetlerde hale daha dar */ :root[data-cam-etkin] .gorunum:not(#komutaGorunum) .bk-kimlik :is(.banka-mark.kucuk, .banka-mark.nano, .banka-mark.mini) { box-shadow: 0 0 14px 1px color-mix(in oklab, var(--bk-isik) var(--bk-hale), transparent); } /* Kredi detay başlığı: logo 52 px (eski banka binası monogramının yeri ve ölçüsü) */ .kredi-ozet-ust > .banka-mark { width: 52px; height: 52px; border-radius: 15px; } /* Kredi türü ikonu (taşıt / konut / ihtiyaç) — metin dışı öğe → temaya uyarlanmış ton (≥ 3:1). Eskiden ham renk: Yapı Kredi laciverti koyu kartta 1,3:1 idi. */ .bk-kimlik .kredi-kart-ad .tur-ikon { color: var(--bk-ton); } /* "›" düğmesi üzerine gelince marka tonuna döner (eski: ham --banka) */ .kredi-kart.bk-kimlik:hover .git { color: var(--bk-ton); } /* ---------- 3) Taksit dizisi — kalan bakiyenin çizimi (js ▸ krediTaksitDizisiHTML) ---------- ≤ 24 taksit: taksit başına kapsül · > 24: yıl başına kapsül (genişlik taksit sayısıyla orantılı, --bk-k). Ödenen kısım marka tonunda dolar (üstten hafif parıltı — cam dili), kalan kısım nötr yuva. Sıradaki taksit yarım ton. Dolgu ↔ yuva ≥ 3:1 (ölçüldü). Yuva %9 --metin: eski --cam-ic (%5) 36 noktayı görünmez kılıyordu; daha koyusu dolguyla 3:1'i bozuyordu. */ .bk-dizi { display: flex; gap: 4px; height: 8px; margin: 2px 0 0; } .bk-dizi.yillik { gap: 6px; } .bk-dizi > i { flex: var(--bk-k, 1) 1 0; min-width: 3px; position: relative; overflow: hidden; border-radius: 999px; background: color-mix(in srgb, var(--metin) 9%, transparent); } .bk-dizi > i::before { content: ""; position: absolute; inset: 0 auto 0 0; width: calc(var(--bk-d, 0) * 100%); border-radius: inherit; background: linear-gradient(180deg, rgba(255, 255, 255, .26), rgba(255, 255, 255, 0) 55%), var(--bk-ton); } :root[data-tema="aydinlik"] .bk-dizi > i::before { background: linear-gradient(180deg, rgba(255, 255, 255, .22), rgba(255, 255, 255, 0) 55%), var(--bk-ton); } .bk-dizi:not(.yillik) > i.sira { background: color-mix(in srgb, var(--bk-ton) 38%, color-mix(in srgb, var(--metin) 9%, transparent)); } /* Kalın sürüm: detay başlığı. Kutusu (style.css: %22 SİYAH iç kutu, v468) cam açıkken grup tonuna döner — v469 "kutu içinde kutu YOK → grup tonu" kuralı bu kutuya hiç uygulanmamıştı: aydınlık temada gri bir levha gibi duruyor, Akbank dizisini yuvaya karşı 2,28'e düşürüyordu (ölçüldü, tur 3). */ .kredi-ozet-ilerleme-kutu .bk-dizi { height: 10px; } :root[data-cam-etkin] .gorunum:not(#komutaGorunum) .bk-kimlik .kredi-ozet-ilerleme-kutu { background: var(--cam-v-ic); border-color: transparent; } /* Kredi detayı bento ikonları (.lum-ikon) — svg.ikon DEĞİL → tarayıcının varsayılan siyah DOLGUSUYLA çiziliyordu (her temada siyah kare/daire, v473'te görüldü). İkon dilinin aynısı: dolgu yok, çizgi currentColor. Aynı sınıf rapor.js (Gider Yoğunlaşması içgörüleri) de kullanır. */ svg.lum-ikon { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } /* Kredi listesi: gecikme rozeti alt satırın SAĞ köşesinde ("›"ten önce) — marka tonlu diziden uzak, durum köşesi. Semantik rozet (.rozet-geciken) olduğu gibi; burada yalnız yerleşim + cümle düzeni (satırın büyük harf kalıtımı kesilir). */ .kredi-kart-alt .bk-durum { margin-left: auto; } .kredi-kart-alt:has(.bk-durum) .git { margin-left: 4px; } .rozet.bk-durum { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; } :root[data-cam-etkin] .rozet.bk-durum { text-transform: none; letter-spacing: 0; } /* ---------- 4) Özet KPI: hangi bankalar (js ▸ bankaYiginiHTML) ---------- Yan yana duran logo karoları (en çok 4 + "+n"), büyükten küçüğe — Dock'taki uygulama simgeleri gibi. Yuvarlak kare (köşe 9 px, ~%30): daire kırpması "AKBANK" gibi yazılı logoları kesiyordu (tur 2). Doğrulama turu (KURALLAR "## v474" ▸ B.5): bindirme YOK — 6 px aralık (−5 px bindirme Akbank'ın "A"sını, Vakıf'ın "B"sini örtüyordu); 2 px kart rengi halka KALKTI (koyuda siyah, aydınlıkta beyaz iç içe halkalar = kontur); logo karoyu DOLDURUR (iç boşluk 0). Kendi kare zemini olmayan logoya (bk-saydam; JS BANKA_LOGO_KARO_ZEMINI) dolu nötr karo + 4 px iç boşluk. Derinlik yalnız gölge: nötr temas gölgesi + aşağı düşen, yayılmasız yumuşak marka gölgesi (karo çevresinde halka çizmez). Renkli pay kapsülü bilerek YOK (ölçülü). */ .bk-yigin { display: flex; align-items: center; gap: 6px; min-height: 30px; margin-top: 14px; } .bk-yigin-karo { position: relative; display: inline-grid; border-radius: 9px; } .bk-yigin-karo .banka-mark.mini, :root[data-cam-etkin] .gorunum:not(#komutaGorunum) .bk-yigin-karo .banka-mark.mini { width: 30px; height: 30px; border-radius: 9px; vertical-align: 0; } .bk-yigin-karo .banka-mark.mini, :root[data-cam-etkin] .gorunum:not(#komutaGorunum) .bk-yigin-karo .banka-mark.mini { box-shadow: 0 1px 1.5px rgba(0, 0, 0, .34), 0 6px 10px -6px color-mix(in oklab, var(--bk-isik) 60%, transparent); } :root[data-tema="aydinlik"] .bk-yigin-karo .banka-mark.mini, :root[data-cam-etkin][data-tema="aydinlik"] .gorunum:not(#komutaGorunum) .bk-yigin-karo .banka-mark.mini { box-shadow: 0 1px 1.5px rgba(20, 24, 32, .16), 0 6px 10px -6px color-mix(in oklab, var(--bk-isik) 50%, transparent); } .bk-yigin-karo .banka-mark.mini .banka-logo { padding: 0; } .bk-yigin-karo.bk-saydam .banka-mark.mini.logo-var { background: var(--bk-karo-zemin, #FFFFFF); } .bk-yigin-karo.bk-saydam .banka-mark.mini .banka-logo { padding: 4px; } /* Cam parıltısı — kimlik kartındaki logoyla aynı (uygulama simgesi hissi); logonun kendisi değişmez */ .bk-yigin-karo .banka-mark::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; border-radius: inherit; background: linear-gradient(180deg, rgba(255, 255, 255, .14), rgba(255, 255, 255, 0) 46%); } .bk-yigin-fazla { margin-left: 2px; font-size: 12px; font-weight: 600; color: var(--soluk); font-variant-numeric: tabular-nums; } /* Dar kart (iç genişlik < 165 px — dar ekranda 2 sütunlu KPI 141 px; cam açıkken .bakiye-kart container-type: inline-size): 4 × 30 + 3 × 6 + "+n" sığmıyor, "+2" kenarda kesiliyordu (390 px çekimde görüldü) → karo 26 px, aralık 4 px (4 × 26 + 3 × 4 + "+n" ≈ 134). Cam kapalıyken kap yok → aynı değerler ekran genişliğiyle (< 760). Bindirme YİNE YOK. */ @container (max-width: 164px) { .bk-yigin { gap: 4px; } .bk-yigin-karo .banka-mark.mini, :root[data-cam-etkin] .gorunum:not(#komutaGorunum) .bk-yigin-karo .banka-mark.mini { width: 26px; height: 26px; border-radius: 8px; } .bk-yigin-karo.bk-saydam .banka-mark.mini .banka-logo { padding: 3px; } } @media (max-width: 759px) { :root:not([data-cam-etkin]) .bk-yigin { gap: 4px; } :root:not([data-cam-etkin]) .bk-yigin-karo .banka-mark.mini { width: 26px; height: 26px; border-radius: 8px; } } /* ---------- 5) Erişilebilirlik ve kademeler ---------- */ /* Yüksek kontrast: ışık ve hale kalkar (kart opak + iç kenar — cam-temel.css). Dizi AYNEN: yuvayı koyultmak (%22) koyu temada dolgu ↔ yuva oranını 3'ün altına (≈ 2) indiriyordu — yüksek kontrast isteyen kullanıcıya daha DÜŞÜK kontrast verilmez. */ @media (prefers-contrast: more) { :root[data-cam-etkin] .gorunum:not(#komutaGorunum) :is(.kredi-kart, .kredi-ozet-kart, .varlik-satir, .okart).bk-kimlik { background: var(--cam-pencere); } :root[data-cam-etkin] .gorunum:not(#komutaGorunum) :is(.bk-kimlik, .bk-yigin) .banka-mark { box-shadow: none; } :root[data-tema] .bk-yigin-karo .banka-mark.mini, :root[data-cam-etkin][data-tema] .gorunum:not(#komutaGorunum) .bk-yigin-karo .banka-mark.mini { box-shadow: none; } } @media (forced-colors: active) { .bk-dizi > i { background: Canvas; outline: 1px solid CanvasText; } .bk-dizi > i::before { background: Highlight; forced-color-adjust: none; } :is(.bk-kimlik, .bk-yigin-karo) .banka-mark::after { display: none; } }