/* ===================================================================================================================== v474 (detay cilası) — DETAY CİLASI: çakışma, hiza, kenar, tipografi. KURALLAR "## v474" ▸ C (detay cilası). ⚠️ Bu dosya durum ya da banka RENGİ tanımlamaz (A/B kollarının işi): --tehlike, --basari, --uyari, --banka…, --bk-…, --durum-… YAZILMAZ (test/detay.testler.js kilitler). İnce çizgi / kontur EKLENMEZ. Komuta'ya dokunulmaz. Yazı boyu yalnız ölçek kademeleri. index.html'de cam-veri.css'ten SONRA (cam katmanını ince ayarlar; durum-dili.css birleşince ONDAN ÖNCE kalabilir — renk yazmaz). ===================================================================================================================== */ /* --------------------------------------------------------------------------------------------------------------------- F1 — Ödeme / Tahsilat Planı kalemi (≥ 1024): eylem kapsülü (✓ ✎ 🗑, sağ üst 4 px, 32 px, position:absolute) durum rozetinin üstüne biniyordu ("88 gün geçti", "Kısmi", "Tahsil"; Tahsilat Planı'nda borçlu adının da). Mac'te kapsül fareyle gelince çıkar → tam o anda rozet kaybolurdu. Düzen: rozet satırı METİN AKIŞI (flex → blok) + sağ üstte kapsül kadar YÜZEN boş yer (float: 30 px × kapsül genişliği). Rozetler kapsülün solunda akar, sığmayan alt satıra kayar; hiçbiri kırpılmaz, hiçbiri kapsülün altına girmez. Satır yüksekliği 30 px (iki rozet satırı arası 8 px, kapsül ortası ile tür rozeti ortası 2 px içinde). .ust ızgara öğesi → kendi biçimlendirme bağlamı, yüzen boşluk dışarı taşmaz → sonraki satır (banka / borçlu) kapsülün altından başlar. DOM ve okuma sırası AYNEN; dinlenme ve üzerine gelme AYNI düzen. Kapsül genişliği ölçüldü: 2 düğme 62 · 3 düğme 92 · 4 düğme 122 px; pay = genişlik + 4 (kapsül sağ 4 px, gövde sağ dolgusu 9 px → net ≥ 4 px). < 1024: cam-veri.css'in sağ pay kuralı AYNEN. v473 gün içi sıra (ödenen üstte, açık altta) bu kuralın konusu değil — kalemlerin SIRASI değişmez. --------------------------------------------------------------------------------------------------------------------- */ @media (min-width: 1024px) { :root[data-tema] .gorunum:not(#komutaGorunum) .plan-kalem:has(> .plan-eylem) { --dc-kapsul: 66px; } :root[data-tema] .gorunum:not(#komutaGorunum) .plan-kalem:has(> .plan-eylem > :nth-child(3)) { --dc-kapsul: 96px; } :root[data-tema] .gorunum:not(#komutaGorunum) .plan-kalem:has(> .plan-eylem > :nth-child(4)) { --dc-kapsul: 126px; } /* v562: ödenmiş kalemin TEK düğmesi (Geri Al) — 1 düğme 32 + 4. Sınıfla seçilir (:only-child değil: v504 :has hız notu). */ :root[data-tema] .gorunum:not(#komutaGorunum) .plan-kalem:has(> .plan-eylem.tek) { --dc-kapsul: 36px; } :root[data-tema] .gorunum:not(#komutaGorunum) .plan-kalem:has(> .plan-eylem) .plan-kalem-govde > .ust { display: block; line-height: 30px; min-width: 0; padding-inline-end: 0; } :root[data-tema] .gorunum:not(#komutaGorunum) .plan-kalem:has(> .plan-eylem) .plan-kalem-govde > .ust::before { content: ""; float: right; width: var(--dc-kapsul); height: 30px; } /* v504 HIZ: ":has(> .plan-eylem)" bu kuraldan KALKTI (özgüllük .plan-kalem.plan-kalem ile AYNI). :has'ın SAĞINDA evrensel (*) son bileşik, Chromium'da her DOM ekle/çıkar'da tüm :has çapalarının (main, body) ALT AĞACINI geçersiz kılıyordu (1440: ekleme başına ~11 ms stil). Eşdeğer: eylemsiz kalemde .ust esnek kutu (style.css .plan-kalem-govde .ust) → vertical-align esnek öğede ETKİSİZ; eylemlide blok → aynen. */ :root[data-tema] .gorunum:not(#komutaGorunum) .plan-kalem.plan-kalem .plan-kalem-govde > .ust > * { vertical-align: middle; } } /* F12 — Tür rozeti ("• Diğer", "• Kredi Kartı", "• Tahsilat"; cam açıkken DOLGUSUZ: nokta + nötr yazı — cam-bilesen.css) kapsül iç boşluğunu (9 px) koruyordu → nokta, altındaki satırların (banka / açıklama / tutar) sol kenarından 9 px İÇERİDE başlıyordu (Plan kalemi + Özet satırı). Dolgusuz rozette iç boşluk anlamsız: 0 → nokta içerik kenarına oturur; F1'de 3 düğmeli kapsülün yanına da sığar (1440: 74 → 56 px). */ :root[data-cam-etkin] .gorunum:not(#komutaGorunum) :is(.plan-kalem-govde > .ust, .odeme-satir > .ust) > .rozet:first-child:is(.rozet-kredi_karti, .rozet-kredi, .rozet-vergi, .rozet-kira, .rozet-maas, .rozet-diger, .rozet-tahsilat) { padding-inline: 0; } /* --------------------------------------------------------------------------------------------------------------------- F2 — Ray (sol menü, ≥ 1024) ÜST kenarı: Projeler açıkken ray kayar; marka satırı ve arama kutusu yuvarlak köşede KESİLİYORDU (alt kenarda cam-kabuk.css'in kaydırmaya bağlı sönmesi var, üstte yoktu). Üstte de söner: çıkış aralığının ilk %45'inde (öğe kenara değmeden görünmez olur). `filter: opacity()` — alt kenarın `opacity` animasyonuyla AYNI özelliği yazmasın (biri diğerini ezerdi); ikisi çarpılır. Çizgi/bant YOK. cam-kabuk.css'teki alt kenar parametreleri AYNEN tekrarlanır (animasyon listesi tek özellik). --------------------------------------------------------------------------------------------------------------------- */ @media (min-width: 1024px) { @supports (animation-timeline: view()) { :root[data-cam-etkin] .alt-menu :is(button[data-gorunum], .menu-grup-ust, .ray-bolum) { animation: camKabukRayKenar linear both, detayRayUstKenar linear both; animation-timeline: view(block 0px 62px), view(block 8px 0px); animation-range: entry 0% entry 100%, exit 0% exit 100%; } :root[data-cam-etkin] .alt-menu :is(.yan-marka, .menu-araclar) { animation: detayRayUstKenar linear both; animation-timeline: view(block 8px 0px); animation-range: exit 0% exit 100%; } } } @keyframes detayRayUstKenar { 0% { filter: opacity(1); } 45%, 100% { filter: opacity(0); } } @media (prefers-contrast: more) { :root[data-cam-etkin] .alt-menu :is(button[data-gorunum], .menu-grup-ust, .ray-bolum, .yan-marka, .menu-araclar) { animation: none; } } @media (prefers-reduced-motion: reduce) { /* kaydırmaya bağlı (zamana bağlı DEĞİL) — hareket değil, kenar sönmesi; yine de azaltılmış harekette yalnız üst kenar kapalı */ :root[data-cam-etkin] .alt-menu :is(.yan-marka, .menu-araclar) { animation: none; } } /* --------------------------------------------------------------------------------------------------------------------- F3 — Özet KPI satırı: kahraman kartın ("Banka Hesapları") sol sütunu dikeyde ORTALIYDI → etiketi yan kartlardan 34 px aşağıda, alt satırı ("2 hesap aktif") 46 px yukarıda. ≥ 760: iOS widget dizilimi (cam-veri §KPI ile aynı): etiket üstte, rakam + alt satır dipte; üst/alt dolgu yan kartlarla aynı (18 px). Kadran sağda dikey ortalı kalır. --------------------------------------------------------------------------------------------------------------------- */ @media (min-width: 760px) { :root[data-cam-etkin] #ozetGorunum .bakiye-serit > .kahraman-kart { padding-block: 18px; } :root[data-cam-etkin] #ozetGorunum .kahraman-kart > .egim-ic { align-items: stretch; } :root[data-cam-etkin] #ozetGorunum .kahraman-kart .kahraman-sol { display: flex; flex-direction: column; } :root[data-cam-etkin] #ozetGorunum .kahraman-kart .kahraman-sol > [data-rakam="kahraman"] { margin-top: auto; padding-top: 12px; } :root[data-cam-etkin] #ozetGorunum .kahraman-kart .kahraman-sag { align-self: center; } } /* --------------------------------------------------------------------------------------------------------------------- F4 — Varlıklar hesap / kart kartları: ızgara satırları esniyordu → IBAN'sız kartın başlığı 16 px aşağıda, ✎ 🗑 32 px yukarıda (yan yana iki kart hizasız). Sütun düzeni: içerik üstten, eylem satırı kartın dibinde. --------------------------------------------------------------------------------------------------------------------- */ :root[data-tema] .gorunum:not(#komutaGorunum) .varlik-satir { display: flex; flex-direction: column; } :root[data-tema] .gorunum:not(#komutaGorunum) .varlik-satir > .satir-eylem { margin-top: auto; } /* --------------------------------------------------------------------------------------------------------------------- F5 — K/Z özet şeridi: "Satış Adet 7" ana değeri, dolar alt satırlı kutuların TL tutarından 19 px, "Kâr marjı %9,3" 30 px yukarıdaydı → ana değer kutunun dibinde; beş kutunun ana rakamı aynı dipte. --------------------------------------------------------------------------------------------------------------------- */ :root[data-tema] .gorunum:not(#komutaGorunum) .kz-serit-kutu:not(.kz-serit-marj) > b { margin-top: auto; } /* Kâr marjı: "%9,3" ile "net %9,3" alt satırda yan yana (taban çizgisi ortak) → ana rakam diğer dört kutuyla aynı dipte */ :root[data-tema] .gorunum:not(#komutaGorunum) .kz-serit-kutu.kz-serit-marj { flex-flow: row wrap; align-items: baseline; align-content: space-between; column-gap: 8px; } :root[data-tema] .gorunum:not(#komutaGorunum) .kz-serit-kutu.kz-serit-marj > .etiket { flex-basis: 100%; } /* --------------------------------------------------------------------------------------------------------------------- F6 — Teslimat kuyruk kartı: "Anlaşılan / Resmî tahsilat" ikinci sütunu içerik genişliğiyle kartlar arasında oynuyordu (535–600 px). İki eşit sütun → her kartta aynı x. F7 — Teslimat dosya karşılaştırması: 6 kutu auto-fit → 1440'ta 5 + 1 yetim ("Toplam Tahsilat" tek başına). 3 × 2 (dar kapta 2 × 3). --------------------------------------------------------------------------------------------------------------------- */ :root[data-tema] .gorunum:not(#komutaGorunum) .tes-k-tutar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 12px; } /* sütun içi "min. altı · onaylı" hapı sütun genişliğine esnemesin (eskiden sütun = içerik genişliğiydi) */ :root[data-tema] .gorunum:not(#komutaGorunum) .tes-k-tutar > span { align-items: flex-start; } :root[data-tema] .gorunum:not(#komutaGorunum) .tes-karsilastirma { column-gap: 10px; grid-template-columns: repeat(auto-fit, minmax(max(140px, calc((100% - 20px) / 3)), 1fr)); } /* --------------------------------------------------------------------------------------------------------------------- F8 — Para ▸ dağılım listesi: logolu satırda ad logo genişliği kadar içeride, kasa satırında solda → ad sütunu kırıktı. Listede logo varsa logosuz satırın adı da aynı yerden başlar (boş yer tutucu; çizgi yok). --------------------------------------------------------------------------------------------------------------------- */ :root[data-tema] .gorunum:not(#komutaGorunum) .dagilim-liste:has(.ad > .banka-mark) .ad:not(:has(> .banka-mark))::before { content: ""; flex: none; width: var(--dc-mark, 22px); height: 1px; } /* --------------------------------------------------------------------------------------------------------------------- F9 — Tahsilat net şeridi: "−" ve "=" işaretleri etiketle tutar arasının ortasındaydı (tutar ortasından 10 px yukarıda) → tutar satırında. --------------------------------------------------------------------------------------------------------------------- */ @media (min-width: 760px) { :root[data-tema] .gorunum:not(#komutaGorunum) .tah-net > .tah-net-isaret { align-self: end; line-height: 22px; margin-bottom: 2px; } } /* --------------------------------------------------------------------------------------------------------------------- F11 — Satır kırma: paragraf / not / ipucunda tek kelimelik son satır olmasın; başlıklar dengeli kırılsın. --------------------------------------------------------------------------------------------------------------------- */ :root[data-tema] :is(.gorunum:not(#komutaGorunum), .modal-fon) :is(p, .ipucu, .not-kutu > span, .panel-alt-baslik, .bolum-not) { text-wrap: pretty; } :root[data-tema] :is(.gorunum:not(#komutaGorunum), .modal-fon) :is(h2, h3, .bolum-baslik) { text-wrap: balance; } /* --------------------------------------------------------------------------------------------------------------------- F13 (v474 birleştirme) — Döviz rozeti ("$ USD", Varlıklar kart satırı): kehribar yazı + %18 kehribar dolgu v473'te de 4,5'in altındaydı (piksel ölçümü, banka kimliği CSS'i KAPALI: koyu 3,77–3,98 · aydınlık 3,69–3,75); banka kimliğinin köşe ışığı ~0,25 daha düşürüyordu (3,42–3,65). Durum rozeti DEĞİL (bilgi) → durum dilinin işi değil; okunurluk cilası. Yazı aile tonunu korur ama metne doğru karışır: koyuda neredeyse beyaz kehribar, aydınlıkta mürekkep kehribar (durum dilindeki TONLU hap yazısıyla aynı mantık). Dolgu AYNEN. --------------------------------------------------------------------------------------------------------------------- */ :root[data-tema] :is(.gorunum:not(#komutaGorunum), .modal-fon) .rozet.rozet-doviz { color: color-mix(in oklab, var(--kat-vergi) 50%, var(--metin)); } /* ===================================================================================================================== "SANAT ESERİ" AYRINTILARI ===================================================================================================================== */ /* S1 — Kuruşun optik boyu: kahraman rakamdaki dil (kuruş + birim küçük, --soluk) büyük tutarlara yayılır. Bölme js/detay-cila.js (kurusAyir — metin TEK dizge kalır). Boy yalnız ölçek kademeleri: 26 → 15 · 22 → 13 · ≤ 17 → 12 (taban); Özet KPI 17 kademesinde küçültme yok. Dağılım halkası ortası küçülürse (26 → 22 → 17 → 15 → 13) kuruş 15 → 13 → 12 → 12 → 12. */ :root[data-cam-etkin] .gorunum:not(#komutaGorunum) .kurus-ince { font-size: max(12px, .58em); font-size: max(12px, round(nearest, .58em, 1px)); /* en küçük 12 px — İSTİSNASIZ (v469) */ font-weight: inherit; letter-spacing: 0; color: var(--soluk); } @container (max-width: 164.98px) { :root[data-cam-etkin] #ozetGorunum .bakiye-kart:not(.kahraman-kart) .rakam .kurus-ince { font-size: 1em; color: inherit; } } @media (prefers-contrast: more) { :root[data-cam-etkin] .gorunum:not(#komutaGorunum) .kurus-ince { color: inherit; } } /* S2 — Seçim ve imleç: metin seçimi vurgu tonunda (yazı rengi aynen), girdi imleci vurgu renginde. */ /* Komuta ekranı (body.komuta-modu) HARİÇ — kendi dili var, dokunulmaz. */ :root[data-tema] body:not(.komuta-modu) ::selection { background: color-mix(in srgb, var(--vurgu) 28%, transparent); } :root[data-tema] body:not(.komuta-modu) :is(input, textarea, [contenteditable="true"]) { caret-color: var(--vurgu); } /* ---------- Özet ▸ hafta detayı (#haftaModal — KURALLAR "## Arayüz kalan işler" ▸ 2) ---------- v469 S3: tutar ve tarih GÖVDE yazı tipinde tabular-nums (mono yalnız IBAN / kart no). Sayfalar (.modal-fon) cam-veri.css'in "--font-mono → gövde" kapsamında değildi → hafta detayında tutar ve gün tarihi JetBrains Mono kalıyordu. Yalnız bu pencere. */ :root[data-cam-etkin] #haftaModal { --font-mono: var(--cam-font); --st-font-mono: var(--cam-font); font-variant-numeric: tabular-nums lining-nums; } :root[data-cam-etkin] #haftaModal :is(.tutar, .gun-tarih) { letter-spacing: 0; } /* Durum hapları tutarın altında sağa dayalı; iki hap (Kısmi + gün geçti) sığmazsa alt satıra sarar, kırpılmaz. */ #haftaModal .gun-satir-durum { display: inline-flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }