/* SIXTH PATH // css/ui_tas.css :: MÜHÜR TAŞLARI (2026-10-04) — js/sim/odul.js çizer (tasGem, tasPerdesi, seritCiz, tasIsaret, hukumEk), js/sim/hukum_tur.js öbeğe ve pencereye koyar. Sahibi: "üç aynı kahverengi madalyon" → her taşın kendi minerali ve kesimi (lapis, obsidyen, malakit, akik, jasp, kehribar, altın, firuze); taş kartın üst kenarındaki YUVA SIRASINDA durur, işlediği şıkta ve kartın arkasında görünür. Dil: obsidyen #121110, altın #D2AC52, fildişi #EEE6D4, Cinzel + Alegreya; düz renkler, kabartma basış kenarı. KURAL (Android WebView): sonsuz animasyon, kalıcı will-change, mask, blend, backdrop-filter, filter YOK. Hareket yalnız tek atımlık transform/opacity ≤ 600 ms (taşın yuvaya oturuşu 480 ms, uçuş 520 ms Web Animations), bitince sınıf kalkar ya da öğe DOM'dan çıkar. Kart arkası çiplerinin taş çizimi odul.js stilKur'da (aynı SVG'den). */ .tas-gem { display: block; width: 100%; height: 100%; overflow: visible; } /* ============================================================================= 1 · SEÇİM PERDESİ (#od-perde.tas) — taş levhaları: sol kenar taşın renginde, büyük oymalı mücevher css/ui_panel.css levha dilini korur; burada yalnız taşa özgü olan (html body önekiyle öne geçer) ============================================================================= */ html body #od-perde .od-sec.od-tas { position: relative; border-left: 4px solid var(--tas, #D2AC52); padding-left: 10px; } html body #od-perde .od-sec.od-tas .od-gem { flex: none; width: 46px; height: 46px; margin: -2px 0; } html body #od-perde .od-sec.od-tas b { display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 8px; } html body #od-perde .od-sec.od-tas b small, html body #od-perde .od-taslar li.od-tas b small { font: 600 9px/1 var(--pr-display); letter-spacing: .2em; color: color-mix(in srgb, var(--tas, #8c6a1e) 78%, #121110); } html body #od-perde .od-sec.od-tas.secildi { border-left-color: var(--tas, #D2AC52); } /* seçilen levhanın mücevheri uçar (odul.js tasUcur): yerinde soluk iz kalır */ html body #od-perde .od-sec.od-tas.secildi .od-gem { opacity: .28; transition: opacity 120ms linear; } /* rütbe sayfası (KOMUTAN SİCİLİ) taş listesi */ html body #od-perde .od-taslar li.od-tas { border-left: 3px solid var(--tas, #D2AC52); } html body #od-perde .od-taslar li.od-tas .od-gem { flex: none; width: 34px; height: 34px; } html body #od-perde .od-taslar li.od-tas b { display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 8px; } /* uçan mücevher (body çocuğu, perdenin üstünde; bitince DOM'dan çıkar) */ .tas-ucan { position: fixed; z-index: 9800; width: 44px; height: 44px; pointer-events: none; } /* ============================================================================= 2 · YUVA SIRASI — kartın üst kenarına kakılı taşlar (#od-serit'in çocuğu, mutlak: şeridin ve kartın düzenine dokunmaz). Obsidyen kemer, altın kıl; taş başına 14 px. Dokununca şerit gibi rütbe sayfası (taşların listesi). ============================================================================= */ .tas-yuva { display: none; } html body.kartli #od-serit .tas-yuva { display: flex; align-items: center; gap: 3px; position: absolute; left: 50%; bottom: calc(100% + 3px); translate: -50% 0; height: 18px; padding: 0 5px; border-radius: 9px; box-sizing: border-box; background: #121110; border: 1px solid #D2AC52; box-shadow: 0 0 0 1px rgba(18, 17, 16, .55), 0 2px 0 #6b4f1a, 0 3px 5px rgba(20, 12, 2, .35); pointer-events: auto; } html body.kartli #od-serit .tas-yv { position: relative; display: block; width: 14px; height: 14px; flex: none; font-style: normal; } /* ikinci kopya (KİL KALKANI II, TALİH II) yanında ikinci mücevher olarak durur (odul.js tasYuvaHtml) */ /* yeni taş yuvasına oturur: yukarıdan büyük gelir, oturur, altın halka bir kez açılır (480 ms tek atım) */ html body.kartli #od-serit .tas-yv.yeni { animation: tasOtur 480ms cubic-bezier(.2, 1.3, .4, 1) backwards; } html body.kartli #od-serit .tas-yv.yeni::before { content: ''; position: absolute; inset: -4px; border-radius: 50%; border: 1.5px solid #D2AC52; opacity: 0; animation: tasHalka 480ms ease-out 140ms backwards; pointer-events: none; } @keyframes tasOtur { 0% { opacity: 0; transform: translateY(-14px) scale(2.2); } 55% { opacity: 1; transform: translateY(1px) scale(.86); } 100% { transform: none; } } @keyframes tasHalka { 0% { opacity: .95; transform: scale(.5); } 100% { opacity: 0; transform: scale(1.9); } } /* kart sarılıp giderken şeritle birlikte söner (#decision.kart-gider > #od-serit opacity, css/ui_hukum.css) */ /* ============================================================================= 3 · ŞIKTA TAŞ — madalyon öbeğinin sonunda mücevher (bronz zemin yok: taşın kendisi), pencerede satırı ============================================================================= */ html body.kartli .ht-ik.ht-tas { background: none; border: 0; box-shadow: none; width: 20px; height: 20px; border-radius: 0; } html body.kartli .ht-ik.ht-tas svg { width: 20px; height: 20px; stroke: none; fill: initial; } html body.kartli .ht-ik + .ht-ik.ht-tas { margin-left: -2px; } html body.kartli .ht-ik.ht-tas + .ht-ik.ht-tas { margin-left: -7px; } /* en çok iki taş görünür (üçüncüsü pencerede yazılı): öbek hapın yazısını itmesin */ html body.kartli #dc-options .ht-grup .ht-tas ~ .ht-tas ~ .ht-tas { display: none; } html body.kartli #dc-options .ht-grup.ht-acik .ht-ik.ht-tas { box-shadow: none; } html body.kartli #dc-options .ht-grup.ht-dar .ht-ik.ht-tas, html body.kartli #dc-options .ht-grup.ht-kose .ht-ik.ht-tas { width: 18px; height: 18px; } html body.kartli #dc-options .ht-grup.ht-dar .ht-ik.ht-tas svg, html body.kartli #dc-options .ht-grup.ht-kose .ht-ik.ht-tas svg { width: 18px; height: 18px; } /* pencere satırı: mücevher 26 px, ad taşın dilinde (Cinzel), açıklama Alegreya italik */ #ht-pen .ht-ik.ht-tas { width: 26px; height: 26px; margin-top: 0; background: none; border: 0; box-shadow: none; border-radius: 0; } #ht-pen .ht-ik.ht-tas svg { width: 26px; height: 26px; stroke: none; fill: initial; } /* taş satırları sıkı: pencere çok taşla da ekrana sığsın */ #ht-pen .ht-sat + .ht-sat:has(> .ht-ik.ht-tas) { margin-top: 5px; padding-top: 5px; } #ht-pen .ht-sat:has(> .ht-ik.ht-tas) + .ht-sat { margin-top: 5px; padding-top: 5px; } #ht-pen .ht-sat:has(> .ht-ik.ht-tas) .ht-yazi b { font-size: 11.5px; } #ht-pen .ht-sat:has(> .ht-ik.ht-tas) .ht-yazi em { font-size: 13.5px; line-height: 1.22; margin-top: 1px; } /* KÂHİN GÖZÜ: bedel satırının (.pay) başında küçük obsidyen göz — sayılar onun işi */ html body.kartli #dc-options .dc-opt .pay .tas-kahin-yv { display: block; width: 13px; height: 13px; margin: 0 1px 0 0; flex: none; } /* NÜFUZ TAŞI: uçan nüfuz yazısında taşın payı (odul.js nufuzUcur) */ #od-ucan .tas-ek { display: inline-flex; align-items: center; gap: 2px; vertical-align: -2px; color: #6b4f1a; } #od-ucan .tas-ek .tas-gem { width: 12px; height: 12px; } /* ============================================================================= 4 · KARTIN ARKASI — taş sonucu değiştirdiyse iz satırında çip (hukumEk: span.tas.tas-). Taşın çizimi ::before (odul.js stilKur, aynı tasGem SVG'si); zemin obsidyen, yazı fildişi, kenar altın. Sıkışık kartta (hk-sik4) diğer izler çekilir, taş çipi kalır. ============================================================================= */ body.kartli #dc-hukum.hk-c .hk-iz .tas { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px 3px 4px; border-radius: 999px; background: #121110; color: #EEE6D4; border: 1px solid #D2AC52; font: 700 10.5px/1.15 var(--pr-display); letter-spacing: .08em; box-shadow: 0 1px 0 rgba(255, 250, 235, .5), 0 2px 0 #6b4f1a; } body.kartli #dc-hukum.hk-c .hk-iz .tas::before { content: ''; flex: none; width: 15px; height: 15px; background: center / contain no-repeat; } body.kartli .dc-box.hk-sik4 #dc-hukum.hk-c .hk-iz:has(> .tas) { display: flex; } body.kartli .dc-box.hk-sik4 #dc-hukum.hk-c .hk-iz:has(> .tas) > :not(.tas) { display: none; } @media (prefers-reduced-motion: reduce) { html body.kartli #od-serit .tas-yv.yeni, html body.kartli #od-serit .tas-yv.yeni::before { animation: none; } }