/* SIXTH PATH // css/ui_nadir.css :: Sürüm 1 "Çağ Kapısı" — Nadir çerçeveler (Tunç / Lapis) + tek atımlık ışık süpürmesi, talih borcu halkası, sağlayıcı başlığı, çip sırası. WP-D · nadir.js / juice.js / hukum_sahne.js · SPEC §2.8, §2.10. KURAL (Android WebView, SPEC §4): kart kipinde yalnız tek atımlık transform/opacity (≤ 600 ms, fill-mode backwards: bitince stil sabit, animasyon kalmaz); sonsuz animasyon, kalıcı will-change, mask, blend, backdrop-filter, filter YOK. Çerçeveler DÜZ RENK: kenar rengi + gömme halkalar (bulanıklıksız box-shadow) + köşe taşları (durağan SVG, kutunun ::after'ı). Gösteriş için degrade yok; tek istisna süpürme bandının sert duraklı (katmanlı düz renk) ışığı. Köşe taşı SVG'leri scratchpad r1d_css_yaz.mjs ile kodlandı. */ /* ============================================================================= 1 · NADİR ÇERÇEVELER (nadir.js: .dc-box.nadir-tunc | .nadir-lapis, sahnenin bütün adımlarında) Kutu kenarı 2 px (ui_kart.css: şeffaf kenar + varak degrade border-box). Kenar rengi o varağın ÜSTÜNE boyanır; içe doğru koyu kıl · renk bandı · ince açık kıl · koyu kıl. Dış gölgeler ui_kart.css'teki kartla aynı (yeni bulanıklık yok). ============================================================================= */ html body.kartli .dc-box.nadir-tunc { /* koyu dövme tunç: varağın altınından ayrılsın diye bakır-kahve bant (ilk ölçümde altın kenarla karışıyordu) */ border-color: #4A2A10; box-shadow: inset 0 0 0 1px #2A170A, inset 0 0 0 5px #8E4F22, inset 0 0 0 6px #C98A4E, inset 0 0 0 7px #2A170A, inset 0 0 26px color-mix(in srgb, var(--kt-deep) 20%, transparent), 0 2px 0 rgba(0, 0, 0, .55), 0 16px 34px rgba(0, 0, 0, .66); } html body.kartli .dc-box.nadir-lapis { border-color: #D2AC52; box-shadow: inset 0 0 0 1px #0F1E4A, inset 0 0 0 4px #22418F, inset 0 0 0 5px #D2AC52, inset 0 0 0 6px #0F1E4A, inset 0 0 26px color-mix(in srgb, var(--kt-deep) 20%, transparent), 0 2px 0 rgba(0, 0, 0, .55), 0 16px 34px rgba(0, 0, 0, .66); } /* köşe taşları: kartın dört köşesinde, palmetin göbeğinin üstünde (ui_kart.css ::before köşe süsü 3 px + 9.5 px) */ html body.kartli .dc-box.nadir-tunc::after, html body.kartli .dc-box.nadir-lapis::after { content: ''; position: absolute; inset: 0; z-index: 6; pointer-events: none; border-radius: 20px 20px 24px 24px / 20px 20px 26px 26px; } html body.kartli .dc-box.nadir-tunc::after { background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2014%2014%27%3E%3Ccircle%20cx%3D%277%27%20cy%3D%277%27%20r%3D%275.6%27%20fill%3D%27%23A86B35%27%20stroke%3D%27%233E2410%27%20stroke-width%3D%271.1%27%2F%3E%3Ccircle%20cx%3D%277%27%20cy%3D%277%27%20r%3D%273.2%27%20fill%3D%27%238A5427%27%2F%3E%3Ccircle%20cx%3D%277%27%20cy%3D%277%27%20r%3D%271.5%27%20fill%3D%27%23E0B071%27%2F%3E%3C%2Fsvg%3E") left 6px top 6px / 14px 14px no-repeat, url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2014%2014%27%3E%3Ccircle%20cx%3D%277%27%20cy%3D%277%27%20r%3D%275.6%27%20fill%3D%27%23A86B35%27%20stroke%3D%27%233E2410%27%20stroke-width%3D%271.1%27%2F%3E%3Ccircle%20cx%3D%277%27%20cy%3D%277%27%20r%3D%273.2%27%20fill%3D%27%238A5427%27%2F%3E%3Ccircle%20cx%3D%277%27%20cy%3D%277%27%20r%3D%271.5%27%20fill%3D%27%23E0B071%27%2F%3E%3C%2Fsvg%3E") right 6px top 6px / 14px 14px no-repeat, url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2014%2014%27%3E%3Ccircle%20cx%3D%277%27%20cy%3D%277%27%20r%3D%275.6%27%20fill%3D%27%23A86B35%27%20stroke%3D%27%233E2410%27%20stroke-width%3D%271.1%27%2F%3E%3Ccircle%20cx%3D%277%27%20cy%3D%277%27%20r%3D%273.2%27%20fill%3D%27%238A5427%27%2F%3E%3Ccircle%20cx%3D%277%27%20cy%3D%277%27%20r%3D%271.5%27%20fill%3D%27%23E0B071%27%2F%3E%3C%2Fsvg%3E") left 6px bottom 6px / 14px 14px no-repeat, url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2014%2014%27%3E%3Ccircle%20cx%3D%277%27%20cy%3D%277%27%20r%3D%275.6%27%20fill%3D%27%23A86B35%27%20stroke%3D%27%233E2410%27%20stroke-width%3D%271.1%27%2F%3E%3Ccircle%20cx%3D%277%27%20cy%3D%277%27%20r%3D%273.2%27%20fill%3D%27%238A5427%27%2F%3E%3Ccircle%20cx%3D%277%27%20cy%3D%277%27%20r%3D%271.5%27%20fill%3D%27%23E0B071%27%2F%3E%3C%2Fsvg%3E") right 6px bottom 6px / 14px 14px no-repeat; } html body.kartli .dc-box.nadir-lapis::after { background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2014%2014%27%3E%3Cpath%20d%3D%27M7%20.9L13.1%207%207%2013.1.9%207z%27%20fill%3D%27%23D2AC52%27%20stroke%3D%27%235A4210%27%20stroke-width%3D%27.7%27%2F%3E%3Cpath%20d%3D%27M7%202.8L11.2%207%207%2011.2%202.8%207z%27%20fill%3D%27%2322418F%27%2F%3E%3Cpath%20d%3D%27M7%205.4L8.6%207%207%208.6%205.4%207z%27%20fill%3D%27%23D2AC52%27%2F%3E%3C%2Fsvg%3E") left 6px top 6px / 14px 14px no-repeat, url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2014%2014%27%3E%3Cpath%20d%3D%27M7%20.9L13.1%207%207%2013.1.9%207z%27%20fill%3D%27%23D2AC52%27%20stroke%3D%27%235A4210%27%20stroke-width%3D%27.7%27%2F%3E%3Cpath%20d%3D%27M7%202.8L11.2%207%207%2011.2%202.8%207z%27%20fill%3D%27%2322418F%27%2F%3E%3Cpath%20d%3D%27M7%205.4L8.6%207%207%208.6%205.4%207z%27%20fill%3D%27%23D2AC52%27%2F%3E%3C%2Fsvg%3E") right 6px top 6px / 14px 14px no-repeat, url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2014%2014%27%3E%3Cpath%20d%3D%27M7%20.9L13.1%207%207%2013.1.9%207z%27%20fill%3D%27%23D2AC52%27%20stroke%3D%27%235A4210%27%20stroke-width%3D%27.7%27%2F%3E%3Cpath%20d%3D%27M7%202.8L11.2%207%207%2011.2%202.8%207z%27%20fill%3D%27%2322418F%27%2F%3E%3Cpath%20d%3D%27M7%205.4L8.6%207%207%208.6%205.4%207z%27%20fill%3D%27%23D2AC52%27%2F%3E%3C%2Fsvg%3E") left 6px bottom 6px / 14px 14px no-repeat, url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2014%2014%27%3E%3Cpath%20d%3D%27M7%20.9L13.1%207%207%2013.1.9%207z%27%20fill%3D%27%23D2AC52%27%20stroke%3D%27%235A4210%27%20stroke-width%3D%27.7%27%2F%3E%3Cpath%20d%3D%27M7%202.8L11.2%207%207%2011.2%202.8%207z%27%20fill%3D%27%2322418F%27%2F%3E%3Cpath%20d%3D%27M7%205.4L8.6%207%207%208.6%205.4%207z%27%20fill%3D%27%23D2AC52%27%2F%3E%3C%2Fsvg%3E") right 6px bottom 6px / 14px 14px no-repeat; } /* GİRİŞ SÜPÜRMESİ (açılışta bir kez; nadir.js animationend'de sınıfı kaldırır, 700 ms sigorta): ::after köşe taşları yerine kartın %45'i genişliğinde bir ışık bandı olur ve 450 ms'de soldan sağa geçer — katman yalnız bu sürede ve bandın boyunda. Kutu overflow:hidden + köşe yarıçapı bandı kırpar. */ html body.kartli .dc-box.nadir-giris::after { inset: 0 auto 0 0; width: 45%; border-radius: 0; background: linear-gradient(104deg, transparent 0 22%, rgba(255, 244, 214, .16) 22% 36%, rgba(255, 248, 230, .34) 36% 64%, rgba(255, 244, 214, .16) 64% 78%, transparent 78%); transform: translateX(-100%); animation: nadirSupur 450ms linear 1 backwards; } html body.kartli .dc-box.nadir-lapis.nadir-giris::after { background: linear-gradient(104deg, transparent 0 22%, rgba(210, 172, 82, .14) 22% 36%, rgba(236, 222, 180, .32) 36% 64%, rgba(210, 172, 82, .14) 64% 78%, transparent 78%); } @keyframes nadirSupur { from { transform: translateX(-100%); } to { transform: translateX(330%); } } @media (prefers-reduced-motion: reduce) { html body.kartli .dc-box.nadir-giris::after { animation: none; } } /* kartın arkasında iz satırındaki nadir izi (nadir.js hukumEk) */ body.kartli #dc-hukum.hk-c .hk-iz .nadir-lapis { color: #22418F; } body.kartli #dc-hukum.hk-c .hk-iz .nadir-tunc { color: #7A4A20; } /* ============================================================================= 2 · TALİH BORCU (juice.js): borç varken her ZARLI madalyonda durağan altın halka; pencerede açıklama satırı. ============================================================================= */ html body.kartli .ht-ik.ht-zar.ht-borc, html body.kartli #dc-options .ht-grup .ht-ik.ht-zar.ht-borc, #ht-pen .ht-ik.ht-borc { box-shadow: inset 0 1px 0 rgba(255, 251, 235, .85), inset 0 -1px 1px rgba(90, 62, 12, .35), 0 0 0 1.5px #FFF6DC, 0 0 0 3px #D2AC52, 0 0 0 3.5px #6B4C14; } #ht-pen .ht-ik.ht-borc-ik { --ht-kenar: #6B4C14; color: #8A6A14; } #ht-pen .ht-ik.ht-borc-ik svg circle { stroke: currentColor; } /* pencere dokunuş geçirir (ui_ikon.css pointer-events:none); düğme satırı (hukum_tur.js .ht-tikla) geçirmez */ #ht-pen .ht-sat.ht-tikla { pointer-events: auto; cursor: pointer; } /* ============================================================================= 3 · SAĞLAYICI BAŞLIĞI (juice.js sebepCiz, #dc-cause.sg-bas): eski hükmün plakası + yıl + söz, kartın yazı alanının başında. Düz zemin, tek kıl; sığmazsa önce küçük resim çekilir (.sg-dar). Zemin sebebi eski bant (.sg-bant). ============================================================================= */ html body.kartli .dc-box #dc-cause.sg-bas { display: flex; align-items: center; gap: 9px; text-align: left; margin: 5px 12px 3px !important; padding: 4px 10px 4px 4px; border-radius: 4px; background: color-mix(in srgb, var(--kt-pale) 60%, #FFFAF0); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--kt-deep) 55%, transparent); } html body.kartli #dc-cause.sg-bas .sg-foto { flex: none; display: block; width: 40px; height: 40px; border-radius: 3px; overflow: hidden; background: #2A1D0E; box-shadow: 0 0 0 1px #6B4C14; } html body.kartli #dc-cause.sg-bas .sg-foto img { display: block; width: 100%; height: 100%; object-fit: cover; } html body.kartli #dc-cause.sg-bas .sg-muhur { background: none; box-shadow: none; } html body.kartli #dc-cause.sg-bas .sg-muhur svg { display: block; width: 40px; height: 40px; } html body.kartli #dc-cause.sg-bas .sg-muhur .sg-bal { fill: #8F2E18; stroke: #561A0C; stroke-width: 1; } html body.kartli #dc-cause.sg-bas .sg-muhur .sg-ic { fill: none; stroke: #D98A6E; stroke-width: 1.2; } html body.kartli #dc-cause.sg-bas .sg-muhur .sg-cz { fill: none; stroke: #F2C9A8; stroke-width: 1.6; stroke-linecap: round; } html body.kartli #dc-cause.sg-bas .sg-yazi { display: flex; flex-direction: column; gap: 1px; min-width: 0; } html body.kartli #dc-cause.sg-bas .sg-yazi b { font: 700 11px/1.3 var(--pr-display) !important; letter-spacing: .12em !important; color: var(--kt-deep) !important; } html body.kartli #dc-cause.sg-bas .sg-yazi q { quotes: none; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; font: italic 600 15px/1.2 var(--pr-metin) !important; letter-spacing: 0 !important; color: var(--kt-ink) !important; } /* sığdırma kademesinin ilki: küçük resim çekilir, yazı kalır */ html body.kartli #dc-cause.sg-bas.sg-dar { padding-left: 10px; } html body.kartli #dc-cause.sg-bas.sg-dar .sg-foto { display: none; } /* ============================================================================= 4 · KART ARKASI ÇİPLERİ TEK TEK (hukum_sahne.js cipSirasi: satır içi animation-delay 520 + 80·k ms) ============================================================================= */ body.kartli #dc-hukum.hk-c .hk-cipler s { animation: r1Cip 240ms cubic-bezier(.2, .8, .3, 1) 1 backwards; } @keyframes r1Cip { from { opacity: 0; transform: translateY(6px); } } @media (prefers-reduced-motion: reduce) { body.kartli #dc-hukum.hk-c .hk-cipler s { animation: none; } }