/* ui_panel.css — premium UI katmanı (2026-09-24). css/premium.css tokenlarını kullanır. Ajan C: kartlar arası ekranlar ve bütün paneller/perdeler. 1. ZAMAN YOLU (#sefer.zy) 4. KOMUTAN PANELİ (#profile-sheet) 2. YOL KARŞILAŞMALARI (#rite) 5. ÖDÜL PERDELERİ (#od-perde, .od-kronik) 3. VARIŞ (#rite .vr) 6. MÜHÜR ŞERİDİ (#qs-mini) · 7. NÖBET SONU (#overlay) WebView kuralı: sonsuz animasyon yok (yürüyüş anı hariç), mask/blend/backdrop yok, büyük filtre yok; girişler ≤600 ms, yalnız transform/opacity. */ /* ============================================================================= 1. ZAMAN YOLU ========================================================================== */ #sefer.zy { background: radial-gradient(120% 60% at 50% 0%, color-mix(in srgb, var(--k-altin) 10%, transparent), transparent 60%), var(--k-zemin); } #sefer.zy .sf-masa { gap: 8px; padding: 8px 10px 0; } /* b1329: zaman yolunda masa hiç taşmaz (kâğıt esner, min-height 0) ama overflow-y:auto (sim.css) onu yine bileşik bir kaydırıcı yapıyordu: 3x'te 360×642'lik boş bir katman (+8 MB) ve üstüne açılan KOMUTAN panelini de "Overlap" ile ayrı katmana itiyordu (+11 MB, ÖZELLİK 59 MB). Kaydırıcı değil. */ #sefer.zy .sf-masa { overflow: hidden; } /* ---- kâğıt: iki kıl çizgili altın çerçeve, köşe süsleri (gürültü + multiply kalktı) */ #sefer.zy .sf-kagit { border: 1px solid color-mix(in srgb, var(--k-altin) 62%, transparent); border-radius: 14px; background: radial-gradient(90% 55% at 50% 38%, color-mix(in srgb, var(--k-lit) 7%, transparent), transparent 70%), var(--k-zemin); box-shadow: inset 0 0 0 3px var(--k-alt), inset 0 0 0 4px color-mix(in srgb, var(--k-altin) 26%, transparent), inset 0 0 36px rgba(0,0,0,.55), 0 8px 22px rgba(0,0,0,.5); } #sefer.zy .sf-kagit::before { mix-blend-mode: normal; opacity: 1; z-index: 5; inset: 7px; background: linear-gradient(var(--k-altin), var(--k-altin)) 0 0 / 14px 1.5px, linear-gradient(var(--k-altin), var(--k-altin)) 0 0 / 1.5px 14px, linear-gradient(var(--k-altin), var(--k-altin)) 100% 0 / 14px 1.5px, linear-gradient(var(--k-altin), var(--k-altin)) 100% 0 / 1.5px 14px, linear-gradient(var(--k-altin), var(--k-altin)) 0 100% / 14px 1.5px, linear-gradient(var(--k-altin), var(--k-altin)) 0 100% / 1.5px 14px, linear-gradient(var(--k-altin), var(--k-altin)) 100% 100% / 14px 1.5px, linear-gradient(var(--k-altin), var(--k-altin)) 100% 100% / 1.5px 14px; background-repeat: no-repeat; } #sefer.zy .sf-kagit::after { border-radius: 14px; opacity: .8; } /* ---- çağın hayaleti: maske ve büyük filtre yerine üstüne serilen zemin rengi */ #sefer.zy .zy-arka { -webkit-mask-image: none; mask-image: none; filter: none; opacity: .15; } #sefer.zy .zy-arka::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 0%, color-mix(in srgb, var(--k-zemin) 55%, transparent) 42%, var(--k-zemin) 74%); } /* ---- sahne canlılığı yalnız YÜRÜRKEN: boşta ekran kare üretmez */ #sefer.zy .zy-yildiz, #sefer.zy.yolda .zy-yildiz { animation: none; opacity: .5; } #sefer.zy .zy-dunya { filter: none; opacity: .5; } #sefer.zy .zy-dunya .zy-dg, #sefer.zy.yolda .zy-dunya .zy-dg, #sefer.zy .zy-dunya .zy-mer { animation: none; } #sefer.zy .zy-dunya .zy-mer { opacity: .22; } #sefer.zy .zy-serp, #sefer.zy.yolda .zy-serp { animation: none; } @media (prefers-reduced-motion: no-preference) { #sefer.zy .zy-sahne:has(.zy-yuru:not(.dur)) .zy-yildiz { opacity: .72; animation: zyYildizUzak 46s linear infinite, zyYildizYakin 19s linear infinite; } #sefer.zy .zy-sahne:has(.zy-yuru:not(.dur)) .zy-dunya .zy-dg { animation: zyDunyaDon 52s linear infinite; } #sefer.zy .zy-sahne:has(.zy-yuru:not(.dur)) .zy-serp { animation: zySerpinti 7s linear infinite; } } #sefer.zy .sf-rozet-ad::before { animation: none; } /* ---- iki levha: solda çağ ve ilerleyişi (söz + beş benek), sağda rütbe ve yedi nişan -------------------------- Yüzde yok (sahibinin kuralı: ilerleme ve şans sözle). Levhalar figürün iki yanında durur: genişlikleri sahnenin yarısından figürün yarı eni kadar kısa, figürün üstüne binmez. Düz obsidyen zemin, altın kıl, basılı kenar. */ #sefer.zy .zy-cag, #sefer.zy .zy-nisan { position: absolute; z-index: 4; top: 12px; box-sizing: border-box; max-width: calc(50% - 40px); margin: 0; padding: 6px 10px 6px 6px; border-radius: 10px; background: rgba(18,17,16,.94); border: 1px solid color-mix(in srgb, var(--k-altin) 58%, transparent); box-shadow: inset 0 1px 0 rgba(238,230,212,.10), inset 0 -2px 0 rgba(0,0,0,.45), 0 3px 8px rgba(0,0,0,.5); color: var(--k-lit); font: 700 11px/1.15 var(--pr-display); letter-spacing: .08em; } #sefer.zy .zy-cag { left: 12px; display: flex; gap: 8px; align-items: center; } #sefer.zy .zy-nisan { right: 12px; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; padding: 6px 10px; text-align: right; } #sefer.zy .zy-cag > span { min-width: 0; display: flex; flex-direction: column; gap: 3px; } #sefer.zy .zy-cag b, #sefer.zy .zy-nisan b { font: 700 11px/1.1 var(--pr-display); letter-spacing: .08em; color: var(--k-lit); } /* uzun çağ adı (EN "INFORMATION AGE") levhadan taşmasın: harf aralığı daralır */ #sefer.zy .zy-cag b { font-size: 10.5px; letter-spacing: .03em; } @media (max-width: 380px) { #sefer.zy .zy-cag { gap: 6px; } #sefer.zy .zy-cag s { width: 22px; height: 22px; } } #sefer.zy .zy-cag small, #sefer.zy .zy-nisan small { display: block; font: 700 8.5px/1.15 var(--pr-display); letter-spacing: .1em; color: var(--k-metin); } #sefer.zy .zy-cag s { flex: 0 0 auto; width: 28px; height: 28px; border-radius: 50%; text-decoration: none; border: 0; background-size: cover; background-position: center; box-shadow: 0 0 0 1px #0b0805, 0 0 0 2.5px var(--k-altin), 0 2px 5px rgba(0,0,0,.6); } #sefer.zy .zy-benek { display: flex; gap: 4px; font-style: normal; } #sefer.zy .zy-benek i { width: 6px; height: 6px; transform: rotate(45deg); background: rgba(0,0,0,.5); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--k-altin) 65%, transparent); } #sefer.zy .zy-benek i.on { background: var(--k-lit); box-shadow: none; } #sefer.zy .zy-nis i { width: 7px; height: 7px; transform: none; border-radius: 50%; } #sefer.zy .zy-nis i.on { background: #D2AC52; } #sefer.zy .zy-nis i.yok { background: transparent; box-shadow: inset 0 0 0 1px rgba(238,230,212,.5); background-image: linear-gradient(135deg, transparent 44%, rgba(238,230,212,.6) 44% 56%, transparent 56%); } /* ---- KOMUTANIN FİGÜRÜ (zamanyolu.js figurSvg) --------------------------------------------------------------------- Renkler düz; çağın paleti --f* değişkenleriyle gelir, nişanlar her çağda altın (--fa). Mine çizgisi (.h) parçaları ayırır: I–III koyu, IV fildişi (siyah-beyaz gravür), V fosfor. Animasyon yalnız tek adım (.zy-adim, 560 ms). */ #sefer.zy .zy-yuru { position: absolute; left: 50%; top: var(--zt); z-index: 3; pointer-events: none; width: calc(var(--zf) * .92); height: var(--zf); transform: translate(-50%, -100%); filter: drop-shadow(0 0 1px rgba(8,5,2,.9)) drop-shadow(0 3px 4px rgba(0,0,0,.55)); --fa: #D2AC52; --fa2: #f0d58a; --fl: #3e62b5; --fk: #b4462a; --fz: rgba(238,230,212,.62); --fh: #1a0f08; --ft: #c99460; --fs: #2a190d; --fs2: #6a4526; --fg: #a24c25; --fg2: #7c3517; --fg3: #ecd7ad; --fb: #ecd7ad; --fbs: #5a3418; --fw: #6e4522; --fw2: #9a9da2; --fsd: #3a2414; --fku: #ecd7ad; --fpl: #5b2a14; --fgz: #f2e6cc; } #sefer.zy[data-cag="tunc"] .zy-yuru { --fh: #1b1209; --ft: #d9a974; --fs: #1e140b; --fs2: #6a4c2c; --fg: #ead6a2; --fg2: #cdb077; --fg3: #7d5f2c; --fb: #D2AC52; --fbs: #9a6f2c; --fw: #6a4b22; --fw2: #c99140; --fsd: #5a3d1c; --fku: #3e5fae; --fpl: #3b5aa3; --fgz: #f5ead0; } #sefer.zy[data-cag="demir"] .zy-yuru { --fh: #120d0a; --ft: #c99c74; --fs: #17120f; --fs2: #6a5a4e; --fg: #8c3b25; --fg2: #6e747c; --fg3: #ece2cc; --fb: #c3c8ce; --fbs: #3f4349; --fw: #3a3d42; --fw2: #8f959c; --fsd: #2c2622; --fku: #ece2cc; --fpl: #2f3238; --fgz: #f2ead8; } #sefer.zy[data-cag="sanayi"] .zy-yuru { --fh: #e9e2d2; --ft: #b9b2a4; --fs: #121212; --fs2: #8a8a8a; --fg: #1d1c1a; --fg2: #2c2b28; --fg3: #eee8da; --fb: #eee8da; --fbs: #121212; --fw: #121212; --fw2: #D2AC52; --fsd: #121212; --fku: #121212; --fpl: #121212; --fgz: #f4f0e6; --fz: rgba(238,230,212,.5); } #sefer.zy[data-cag="bilgi"] .zy-yuru { --fh: #7fe6ef; --ft: #1d3b47; --fs: #0c1a22; --fs2: #58c3cf; --fg: #0f212c; --fg2: #16303f; --fg3: #7fe6ef; --fb: #7fe6ef; --fbs: #0f212c; --fw: #7fe6ef; --fw2: #d6fdff; --fsd: #0f212c; --fku: #7fe6ef; --fpl: #10222d; --fgz: #d6fdff; --fz: rgba(127,230,239,.55); } /* ANUNNAKİ (figurSvg o.anu, b1329): portrelerin işaretleri — metalik mavi-tunç ten (her çağda aynı soy; IV'te gravür için soğuk gri-mavi, V'te fosforla akraba koyu camgöbeği), tunç parıltı çizgisi, altın ve yarıklı göz; kızıl yolda göz kor */ #sefer.zy .zy-yuru.anu { --ft: #5b7d84; --fts: #d9a95e; --fgz: #f6c64c; --fgh: rgba(246,198,76,.38); } #sefer.zy[data-cag="sanayi"] .zy-yuru.anu { --ft: #8a99a1; --fts: #f4f0e6; --fgz: #ecc65a; --fgh: rgba(236,198,90,.34); } #sefer.zy[data-cag="bilgi"] .zy-yuru.anu { --ft: #2b5d69; --fts: #7fe6ef; } #sefer.zy .zy-yuru .kontur { fill: none; stroke: var(--fh); stroke-width: 1.25; stroke-linejoin: round; } #sefer.zy .zy-yuru .parla { fill: none; stroke: var(--fts); stroke-width: 1.1; stroke-linecap: round; } #sefer.zy .zy-yuru .goz-hale { fill: var(--fgh); } #sefer.zy .zy-yuru .goz-anu { fill: var(--fgz); stroke: #140b04; stroke-width: .55; } #sefer.zy .zy-yuru .goz-anu.kor { fill: #ff6a2a; } #sefer.zy .zy-yuru .yarik { fill: #140b04; } #sefer.zy .zy-yuru svg { width: 100%; height: 100%; overflow: visible; display: block; } #sefer.zy .zy-yuru .h { stroke: var(--fh); stroke-width: 1.25; stroke-linejoin: round; } #sefer.zy .zy-yuru .t { fill: var(--ft); } #sefer.zy .zy-yuru .g { fill: var(--fg); } #sefer.zy .zy-yuru .g2 { fill: var(--fg2); } #sefer.zy .zy-yuru .g3 { fill: var(--fg3); } #sefer.zy .zy-yuru .sc { fill: var(--fs); } #sefer.zy .zy-yuru .bs { fill: var(--fbs); } #sefer.zy .zy-yuru .bo { fill: var(--fb); } #sefer.zy .zy-yuru .a { fill: var(--fa); } #sefer.zy .zy-yuru .a2 { fill: var(--fa2); } #sefer.zy .zy-yuru .lap { fill: var(--fl); } #sefer.zy .zy-yuru .akik { fill: var(--fk); } #sefer.zy .zy-yuru .w { fill: var(--fw); } #sefer.zy .zy-yuru .w2 { fill: var(--fw2); } #sefer.zy .zy-yuru .sd { fill: var(--fsd); } #sefer.zy .zy-yuru .kusak { fill: var(--fku); } #sefer.zy .zy-yuru .pl { fill: var(--fpl); } #sefer.zy .zy-yuru .pl-altin { stroke: var(--fa); stroke-width: 1.6; } #sefer.zy .zy-yuru .mz1 { fill: var(--fg3); } #sefer.zy .zy-yuru .mz2 { fill: var(--fg2); } #sefer.zy .zy-yuru .ip, #sefer.zy .zy-yuru .sacak, #sefer.zy .zy-yuru .devre { fill: none; stroke: var(--fg3); stroke-width: .95; stroke-linecap: round; } #sefer.zy .zy-yuru .pul { fill: none; stroke: var(--fh); stroke-width: .7; opacity: .75; } #sefer.zy .zy-yuru .altin-cizgi, #sefer.zy .zy-yuru .zincir { fill: none; stroke: var(--fa); stroke-width: 1.1; stroke-linecap: round; } #sefer.zy .zy-yuru .halka { fill: none; stroke: var(--fa); stroke-width: 2.4; } #sefer.zy .zy-yuru .a-ic { fill: none; stroke: var(--fh); stroke-width: .7; } #sefer.zy .zy-yuru .nokta, #sefer.zy .zy-yuru .goz-ic { fill: var(--fh); } #sefer.zy[data-cag="sanayi"] .zy-yuru .a-ic, #sefer.zy[data-cag="sanayi"] .zy-yuru .nokta { stroke: #121212; fill: #121212; } #sefer.zy[data-cag="sanayi"] .zy-yuru .a-ic { fill: none; } #sefer.zy .zy-yuru .kivrim { fill: none; stroke: var(--fs2); stroke-width: .9; stroke-linecap: round; } #sefer.zy .zy-yuru .goz { fill: var(--fgz); } #sefer.zy .zy-yuru .goz-kan { fill: #ff5a2a; } #sefer.zy .zy-yuru .iz { fill: none; stroke: var(--fz); stroke-width: 1.1; stroke-dasharray: 2 1.7; } #sefer.zy .zy-yuru .golge { fill: rgba(0,0,0,.45); } #sefer.zy .zy-yuru .hale { fill: none; stroke: #f3e2a6; stroke-width: 1.6; } #sefer.zy .zy-yuru .hale-dolu { fill: rgba(243,226,166,.16); } #sefer.zy .zy-yuru .hale2 { fill: none; stroke: rgba(243,226,166,.5); stroke-width: .9; stroke-dasharray: 1.2 2.2; } #sefer.zy .zy-yuru .gol { fill: rgba(70,16,6,.6); } #sefer.zy .zy-yuru .kara { fill: #2a120c; stroke: #0d0402; } #sefer.zy .zy-yuru .isik { fill: none; stroke: var(--fw); stroke-width: 1.8; stroke-linecap: round; } #sefer.zy .zy-yuru .isik-uc { fill: none; stroke: var(--fw); stroke-width: 1.2; } #sefer.zy .zy-yuru .isik-ic { fill: var(--fw2); } /* tek adım: bacaklar kalçadan, kollar omuzdan; gövde bir kez yükselip iner */ #sefer.zy .zy-yuru .b-on, #sefer.zy .zy-yuru .b-ar { transform-origin: 0 6px; } #sefer.zy .zy-yuru .k-on { transform-origin: 8px -42px; } #sefer.zy .zy-yuru .k-ar { transform-origin: -11px -42px; } @media (prefers-reduced-motion: no-preference) { #sefer.zy .zy-yuru.zy-adim .gov { animation: zyfGov .56s ease-in-out 1; } #sefer.zy .zy-yuru.zy-adim .b-on { animation: zyfOn .56s ease-in-out 1; } #sefer.zy .zy-yuru.zy-adim .b-ar { animation: zyfAr .56s ease-in-out 1; } #sefer.zy .zy-yuru.zy-adim .k-on { animation: zyfKolOn .56s ease-in-out 1; } #sefer.zy .zy-yuru.zy-adim .k-ar { animation: zyfKolAr .56s ease-in-out 1; } } @keyframes zyfGov { 0%, 100% { transform: none; } 50% { transform: translateY(-2.5px); } } @keyframes zyfOn { 0%, 100% { transform: none; } 50% { transform: rotate(-16deg); } } @keyframes zyfAr { 0%, 100% { transform: none; } 50% { transform: rotate(14deg); } } @keyframes zyfKolOn { 0%, 100% { transform: none; } 50% { transform: rotate(5deg); } } @keyframes zyfKolAr { 0%, 100% { transform: none; } 50% { transform: rotate(-10deg); } } /* dönüşüm (huy ya da rütbe değişti): tek parıltı, 600 ms */ #sefer.zy .zy-yuru.zy-donusum { animation: zyDonus .6s ease-out 1; } @keyframes zyDonus { 0% { filter: drop-shadow(0 0 0 rgba(255,236,190,0)); } 35% { filter: drop-shadow(0 0 14px rgba(255,236,190,.85)) brightness(1.35); } 100% { filter: drop-shadow(0 0 1px rgba(8,5,2,.9)) drop-shadow(0 3px 4px rgba(0,0,0,.55)); } } #sefer.zy .zy-huy-not { position: absolute; left: 50%; top: calc(var(--zt) + 8px); z-index: 6; pointer-events: none; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 3px; white-space: nowrap; padding: 5px 10px; border-radius: 8px; background: rgba(18,17,16,.95); border: 1px solid rgba(240,213,138,.55); font: 700 9.5px/1.2 var(--pr-display); letter-spacing: .14em; color: #f0d58a; animation: zyNotGir .4s ease-out 1, zyNotCik .4s ease-in 3s 1 forwards; } #sefer.zy .zy-huy-not.zy-huy-sert { color: #ffb59a; border-color: rgba(230,90,40,.6); } @keyframes zyNotGir { from { opacity: 0; transform: translate(-50%, 6px); } to { opacity: 1; transform: translate(-50%, 0); } } @keyframes zyNotCik { to { opacity: 0; } } @media (prefers-reduced-motion: reduce) { #sefer.zy .zy-yuru.zy-donusum, #sefer.zy .zy-huy-not { animation: none; } } /* ---- halka: çift kıl çizgi, taş boncuk düğümler */ #sefer.zy .zy-halka { border: 2px solid color-mix(in srgb, var(--k-altin) 58%, #000); } #sefer.zy .zy-halka::before { inset: 11px; border: 1px solid color-mix(in srgb, var(--k-altin) 22%, transparent); } #sefer.zy .zy-halka::after { content: ''; position: absolute; inset: -6px; border-radius: 50%; border: 1px solid color-mix(in srgb, var(--k-altin) 30%, transparent); pointer-events: none; } #sefer.zy .zy-dugum { width: 12px; height: 12px; margin: -6px 0 0 -6px; background: radial-gradient(circle at 38% 32%, color-mix(in srgb, var(--k-ray) 60%, #fff 8%), var(--k-alt) 70%); border: 1.5px solid color-mix(in srgb, var(--k-altin) 55%, #000); box-shadow: 0 1px 2px rgba(0,0,0,.7); } #sefer.zy .zy-dugum.zy-gecti { background: radial-gradient(circle at 36% 30%, var(--k-lit), var(--k-altin) 55%, color-mix(in srgb, var(--k-altin) 60%, #000)); border-color: color-mix(in srgb, var(--k-altin) 70%, #000); } #sefer.zy .zy-dugum.zy-burada { width: 16px; height: 16px; margin: -8px 0 0 -8px; background: radial-gradient(circle at 36% 30%, #fff6d8, var(--k-lit) 45%, var(--k-altin)); border: 2px solid #0b0805; box-shadow: 0 0 0 1.5px var(--k-lit), 0 0 12px color-mix(in srgb, var(--k-lit) 55%, transparent); } #sefer.zy .zy-dugum.zy-sirada { width: 14px; height: 14px; margin: -7px 0 0 -7px; background: radial-gradient(circle at 36% 30%, #fff6d8, var(--k-lit) 50%, var(--k-altin)); border: 2px solid #0b0805; box-shadow: 0 0 0 1.5px var(--k-lit), 0 0 0 5px color-mix(in srgb, var(--k-lit) 18%, transparent); animation: zyNabiz 1.5s ease-out 3 alternate; } #sefer.zy .zy-dugum i { top: 20px; padding: 3px 7px 2px; border-radius: 999px; background: rgba(8,6,4,.9); border: 1px solid color-mix(in srgb, var(--k-altin) 45%, transparent); font: 700 10.5px/1 var(--pr-display); letter-spacing: .1em; color: var(--k-lit); } #sefer.zy .zy-kapi { background: linear-gradient(180deg, var(--k-lit), var(--k-altin)); width: 2px; } #sefer.zy .zy-kapi b { top: -20px; padding: 3px 8px 2px; border-radius: 999px; background: rgba(8,6,4,.92); border: 1px solid color-mix(in srgb, var(--k-altin) 55%, transparent); font: 700 10px/1 var(--pr-display); letter-spacing: .1em; color: var(--k-lit); } /* ---- kadran: madalyon — altın bilezik, obsidyen ayna, oyulmuş cetvel */ #sefer.zy .zy-merkez { border: 0; background: radial-gradient(circle at 50% 30%, color-mix(in srgb, var(--k-altin) 13%, var(--k-alt)), var(--k-alt) 62%, #050403); box-shadow: 0 0 0 1px #050403, 0 0 0 3.5px var(--k-altin), 0 0 0 4.5px color-mix(in srgb, var(--k-lit) 70%, transparent), 0 0 0 6px #050403, 0 0 0 7px color-mix(in srgb, var(--k-altin) 45%, transparent), 0 10px 34px rgba(0,0,0,.7), 0 0 44px color-mix(in srgb, var(--k-lit) 16%, transparent), inset 0 0 26px rgba(0,0,0,.75); } #sefer.zy .zy-kd text { font-family: var(--pr-display); } #sefer.zy .zy-kd .zy-yil { font-family: var(--pr-display); font-weight: 700; letter-spacing: .02em; paint-order: stroke; stroke: rgba(0,0,0,.55); stroke-width: .8px; } #sefer.zy .zy-kd .zy-alt { opacity: .78; } #sefer.zy .zy-kd .zy-unv { font-family: var(--pr-display); font-weight: 700; } /* dört okuma: kanal + varak dolgu + çentik */ #sefer.zy .zy-kd .zy-cub-iz { fill: rgba(0,0,0,.42); stroke: color-mix(in srgb, var(--k-altin) 34%, transparent); stroke-width: .45; } #sefer.zy .zy-kd .zy-cub.zy-iyi { fill: url(#zyV-iyi); fill-opacity: 1; } #sefer.zy .zy-kd .zy-cub.zy-orta { fill: url(#zyV-orta); fill-opacity: 1; } #sefer.zy .zy-kd .zy-cub.zy-dip { fill: url(#zyV-dip); fill-opacity: 1; } #sefer.zy #zyV-iyi .zy-v1, #sefer.zy #zyV-iyi .zy-v3 { stop-color: color-mix(in srgb, var(--k-altin) 70%, #000); } #sefer.zy #zyV-iyi .zy-v2 { stop-color: var(--k-lit); } #sefer.zy #zyV-orta .zy-v1, #sefer.zy #zyV-orta .zy-v3 { stop-color: color-mix(in srgb, var(--k-altin) 42%, #000); } #sefer.zy #zyV-orta .zy-v2 { stop-color: color-mix(in srgb, var(--k-lit) 62%, var(--k-altin)); } #sefer.zy #zyV-dip .zy-v1, #sefer.zy #zyV-dip .zy-v3 { stop-color: #6e2a17; } #sefer.zy #zyV-dip .zy-v2 { stop-color: #e0835a; } #sefer.zy .zy-kd .zy-cetvel { fill: none; stroke: rgba(0,0,0,.5); stroke-width: .5; } #sefer.zy .zy-kd .zy-taban { fill: none; stroke: color-mix(in srgb, var(--k-altin) 60%, transparent); stroke-width: .6; } #sefer.zy .zy-kd .zy-deg { paint-order: stroke; stroke: #050403; stroke-width: 1.3px; stroke-linejoin: round; } #sefer.zy .zy-kd .zy-deg.zy-dip { fill: #ef9670; } #sefer.zy .zy-kd .zy-fark { paint-order: stroke; stroke: #050403; stroke-width: 1.2px; } /* ---- künye plakası: tablet */ #sefer.zy .sf-panel { padding: 11px 16px 12px; gap: 5px; border-radius: 12px; background: linear-gradient(180deg, color-mix(in srgb, var(--k-altin) 9%, #0f0b07), #0a0805); border: 1px solid color-mix(in srgb, var(--k-altin) 55%, transparent); box-shadow: inset 0 0 0 3px #0a0805, inset 0 0 0 4px color-mix(in srgb, var(--k-altin) 18%, transparent), inset 0 1px 0 rgba(255,236,190,.08), 0 6px 16px rgba(0,0,0,.5); } #sefer.zy .sf-panel::before, #sefer.zy .sf-panel::after { width: 8px; height: 8px; border: 0; opacity: 1; top: 50%; bottom: auto; margin-top: -4px; background: var(--k-altin); transform: rotate(45deg); box-shadow: 0 0 0 2px #0a0805, 0 0 0 3px color-mix(in srgb, var(--k-altin) 40%, transparent); } #sefer.zy .sf-panel::before { left: -4px; } #sefer.zy .sf-panel::after { right: -4px; left: auto; } #sefer.zy .sf-rozet-ad { padding: 0; border: 0; background: none; gap: 7px; font: 600 10.5px/1.2 var(--pr-display); letter-spacing: .16em; color: var(--k-altin); } #sefer.zy .sf-rozet-ad::before { width: 5px; height: 5px; box-shadow: 0 0 0 2px color-mix(in srgb, var(--k-altin) 25%, transparent); } #sefer.zy .sf-panel h3 { font: 700 16px/1.2 var(--pr-display); letter-spacing: .08em; color: var(--k-lit); text-shadow: 0 1px 0 rgba(0,0,0,.8); } #sefer.zy .sf-panel .sf-tanim { font: italic 500 15px/1.32 var(--pr-metin); letter-spacing: 0; color: var(--k-metin); opacity: 1; } /* ---- İLERLE: birincil düğme (A dili, premium.css .pr-btn--birincil — yüzey orada) */ #sefer.zy .sf-ilerle { padding: 10px 10px 14px; } #sefer.zy .sf-ilerle-btn { display: flex; width: 100%; min-height: 52px; font-size: 14px; letter-spacing: .24em; } #sefer.zy .sf-ilerle-btn s { display: inline-block; margin-left: 4px; font-size: 12px; transform: translateY(-1px); } /* ============================================================================= 2. YOL KARŞILAŞMALARI — kil tablet perde (#rite, kartlı kip) ========================================================================== */ body.kartli #rite { background: radial-gradient(120% 80% at 50% 38%, rgba(26,18,8,.78), rgba(2,1,0,.92) 70%); } html body.kartli #rite .rt-box { padding: 20px 18px 18px; border: 0; border-radius: 18px; color: var(--pr-murekkep); background: var(--pr-koseler) 9px 9px / calc(100% - 18px) calc(100% - 18px) no-repeat, var(--pr-tablet); box-shadow: var(--pr-tablet-cerceve), var(--pr-tablet-golge); } @media (prefers-reduced-motion: no-preference) { body.kartli #rite.open .rt-box { animation: cPerdeGir .28s cubic-bezier(.2,.9,.3,1) 1 backwards; } } @keyframes cPerdeGir { from { opacity: 0; transform: translateY(10px) scale(.97); } to { opacity: 1; transform: none; } } body.kartli #rite .rt-box > h3 { margin: 0 0 6px; font: 700 17px/1.2 var(--pr-display); letter-spacing: .07em; color: #3e2c0c; text-shadow: 0 1px 0 rgba(255,250,235,.7); } body.kartli #rite .rt-box > .rt-b { font: 500 16px/1.4 var(--pr-metin); color: var(--pr-murekkep); margin: 0 0 10px; letter-spacing: 0; } /* yol olayı ve haberinin kendi dili css/ui_yol.css'te (P3, 2026-10-04; eski .yc-* kil satırları kaldırıldı) */ body.kartli #rite .rt-btn:focus-visible { outline: 2px solid #3a6fd0; outline-offset: 2px; } /* tek düğmeli kapanışlar (YOLA DEVAM, KAPAT, MÜHÜRLE…) ve VAZGEÇ: A dili (premium.css .pr-btn) */ html body.kartli #rite .rt-btn.pr-btn { display: flex; width: 100%; min-height: 50px; margin-top: 14px; } html body.kartli #rite .rt-btn.pr-btn--ikincil { min-height: 46px; margin-top: 12px; } /* ============================================================================= 3. VARIŞ — yerin yüzü, künye, İÇERİ GİR ========================================================================== */ body.kartli #rite .vr-sahne { border: 0; border-radius: 12px; max-height: 31vh; box-shadow: 0 0 0 1px #2a1d08, 0 0 0 3px #c9a452, 0 0 0 4px #6b4f1a, 0 8px 18px rgba(40,26,6,.4); } body.kartli #rite .vr-sahne.vr-boyali::after { background: linear-gradient(180deg, rgba(4,3,2,.12) 0%, rgba(4,3,2,0) 30%, rgba(4,3,2,.3) 66%, rgba(4,3,2,.9) 100%); } body.kartli #rite .vr-ad { padding: 14px 14px 13px; background: linear-gradient(180deg, transparent, rgba(7,5,2,.82) 50%); z-index: 2; } body.kartli #rite .vr-ad i { font: 600 10.5px/1 var(--pr-display); letter-spacing: .24em; color: #e2c070; } body.kartli #rite .vr-ad b { margin-top: 5px; font: 700 22px/1.1 var(--pr-display); letter-spacing: .06em; color: #f6e2a4; text-shadow: 0 1px 0 #000, 0 2px 12px rgba(0,0,0,.9); } body.kartli #rite .vr-isik, body.kartli #rite .vr-toz circle { animation-iteration-count: 2; } body.kartli #rite .vr-kunye { padding-top: 12px; } body.kartli #rite .vr-tanim { font: italic 500 16px/1.34 var(--pr-metin); color: var(--pr-murekkep); } body.kartli #rite .vr-dl { margin-top: 10px; gap: 0 12px; padding: 6px 10px; border-radius: 10px; background: rgba(140,106,30,.09); box-shadow: inset 0 0 0 1px rgba(140,106,30,.22); } body.kartli #rite .vr-dl dt { font: 600 10.5px/1 var(--pr-display); letter-spacing: .12em; color: #5a4214; padding: 6px 0; } body.kartli #rite .vr-dl dd { font: 500 13px/1.3 var(--pr-ui); color: var(--pr-murekkep); padding: 4px 0; } body.kartli #rite .vr-dl dt ~ dt, body.kartli #rite .vr-dl dt ~ dt + dd { border-top: 1px dotted rgba(107,79,26,.35); } body.kartli #rite .vr-iz { border-radius: 8px; background: rgba(40,26,6,.08); } body.kartli #rite .vr-teh-bas { display: flex; align-items: center; gap: 10px; margin-top: 12px; padding-top: 0; border: 0; font: 700 11.5px/1 var(--pr-display); letter-spacing: .14em; color: #86301c; } body.kartli #rite .vr-teh-bas::before, body.kartli #rite .vr-teh-bas::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, rgba(143,52,32,.5)); } body.kartli #rite .vr-teh-bas::after { background: linear-gradient(90deg, rgba(143,52,32,.5), transparent); } body.kartli #rite .vr-tehsira { justify-content: center; } body.kartli #rite .vr-tk { width: 54px; padding: 3px; border-radius: 10px; background: #2a1d08; border: 1px solid #6b4f1a; box-shadow: 0 2px 0 #a88a4c, 0 4px 8px rgba(40,26,6,.25); } body.kartli #rite .vr-tk.vr-agir { border-color: var(--irk); box-shadow: 0 0 0 1.5px var(--irk), 0 2px 0 #a88a4c, 0 4px 10px rgba(40,26,6,.3); } body.kartli #rite .vr-tk .vr-yuz { border-radius: 7px; } body.kartli #rite .vr-tehnot { text-align: center; font: italic 500 14.5px/1.3 var(--pr-metin); color: var(--pr-murekkep2); letter-spacing: 0; } body.kartli #rite .vr-son { margin-top: 10px; padding-top: 9px; border-top: 1px solid rgba(107,79,26,.3); font: 500 13px/1.4 var(--pr-ui); color: var(--pr-murekkep2); text-align: center; } /* İÇERİ GİR: birincil (A dili, premium.css) */ html body.kartli #rite .vr-gir { display: flex; width: 100%; margin-top: 14px; min-height: 52px; font-size: 14px; letter-spacing: .24em; } /* yine buradasın: bant */ body.kartli #rite .vr-kisa .vr-kisa-ic { padding: 18px 26px 16px; border-radius: 14px; background: linear-gradient(180deg, rgba(10,7,3,.72), rgba(10,7,3,.55)); box-shadow: inset 0 0 0 1px rgba(214,176,90,.55), inset 0 0 0 4px rgba(10,7,3,.4), inset 0 0 0 5px rgba(214,176,90,.22); } body.kartli #rite .vr-kisa .vr-kisa-ic i { font: 600 10.5px/1 var(--pr-display); letter-spacing: .26em; opacity: 1; } body.kartli #rite .vr-kisa .vr-kisa-ic b { margin-top: 8px; font: 700 26px/1.1 var(--pr-display); letter-spacing: .06em; color: #f6e2a4; } body.kartli #rite .vr-kisa .vr-kisa-ic u { margin-top: 8px; font: 600 10.5px/1 var(--pr-display); letter-spacing: .2em; opacity: 1; color: #e6d3a2; } html body.kartli #rite .rt-box:has(.vr-kisa) { background: none; box-shadow: none; animation: none; } /* ============================================================================= 4. KOMUTAN PANELİ (#profile-sheet) — Ajan A'nın panel dili (ui_kapi.css) ile aynı çerçeve; sabit boy, başlık + sekmeler durur, gövde kayar (ÖZELLİK sekmesinin altı eskiden ekran dışında kalıyor ve kaydırılamıyordu). ========================================================================== */ #profile-sheet:not(.pr-yalniz) { background: radial-gradient(120% 80% at 50% 30%, rgba(20,14,6,.8), rgba(2,1,0,.9) 70%); padding: 12px 10px; } html body #profile-sheet:not(.pr-yalniz) .pr-box { position: relative; box-sizing: border-box; display: flex; flex-direction: column; width: min(calc(96 * var(--vw)), 520px); height: min(calc(100dvh - 24px), 760px); max-height: none !important; overflow: hidden !important; margin: 0 !important; padding: 0; background: var(--pr-koseler) 6px 6px / calc(100% - 12px) calc(100% - 12px) no-repeat, var(--pr-panel-zemin); border: 1px solid var(--pr-altin-kil); border-radius: 8px; /* kısa gölge: 70 px'lik bulanık gölge katmanı ekranın dışına 556×958'e büyütüyordu (3x'te +10 MB, p2_katman) */ /* b1329: 0 8px 18px gölge de paneli 400×802 katmana büyütüyordu — 4 px'e indi */ box-shadow: var(--pr-cerceve-ic), 0 2px 0 rgba(0,0,0,.5), 0 4px 8px rgba(0,0,0,.55); animation: prPanelGir .3s cubic-bezier(.2, .8, .2, 1) backwards; } html body #profile-sheet:not(.pr-yalniz) .pr-head { position: relative !important; flex: none; justify-content: center; margin: 4px 4px 0; padding: 10px 56px 12px !important; background: linear-gradient(180deg, #1d170e, #130f0a); border-bottom: 0; border-radius: 6px 6px 0 0; box-shadow: none; } #profile-sheet:not(.pr-yalniz) .pr-head::after { content: ''; position: absolute; left: 12px; right: 12px; bottom: -8px; height: 15px; background: var(--pr-ayrac) center / 200px 15px no-repeat; pointer-events: none; } #profile-sheet:not(.pr-yalniz) .pr-head b { font: 700 15px/1 var(--pr-display); letter-spacing: .26em; color: var(--pr-altin-acik); text-shadow: 0 1px 0 #000; } html body #profile-sheet:not(.pr-yalniz) #pr-close { position: absolute; right: 10px; top: 50%; margin-top: -20px; width: 40px; height: 40px; min-width: 40px; min-height: 40px; clip-path: none; } /* sekmeler: oyulmuş yuva içinde varak seçili */ html body #profile-sheet .pr-tabs { flex: none; display: flex; gap: 3px; margin: 16px 12px 4px; padding: 4px; border-radius: 10px; background: #0a0806; box-shadow: inset 0 1px 3px rgba(0,0,0,.8), inset 0 0 0 1px rgba(214,176,90,.22), 0 1px 0 rgba(255,236,190,.05); } html body #profile-sheet .pr-tab { flex: 1 1 auto; min-width: 0; min-height: 36px; padding: 6px 4px; border: 0; border-radius: 7px; background: transparent; box-shadow: none; color: #c4a468; font: 700 10.5px/1.1 var(--pr-display); letter-spacing: .03em; white-space: nowrap; } /* seçili sekme: düz altın, koyu yazı (A dili) */ html body #profile-sheet .pr-tab.on { color: var(--a-murekkep); background: var(--a-altin); text-shadow: none; box-shadow: none; } html body #profile-sheet .pr-tab:focus-visible { outline: 2px solid var(--pr-altin-acik); outline-offset: 1px; } #profile-sheet .pr-tab .vt-yol-rozet { top: -7px; right: 0; } html body #profile-sheet:not(.pr-yalniz) #pr-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 6px 16px 18px; -webkit-overflow-scrolling: touch; scrollbar-width: thin; scrollbar-color: rgba(214,176,90,.35) transparent; } /* bölüm başlığı: Cinzel + kıl çizgi */ #profile-sheet .pr-sec { display: flex; align-items: center; gap: 10px; margin: 18px 0 10px; font: 700 12px/1 var(--pr-display); letter-spacing: .16em; color: #EEE6D4; } #profile-sheet .pr-sec::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, rgba(214,176,90,.4), transparent); } /* ---- KİMSİN: MERKEZ DOSYASI (profile2.js kimPane, 2026-10-04) ------------------------------------------------ Düz renkler: obsidyen #121110, altın #D2AC52, fildişi #EEE6D4. Her bölüm aynı kart; başlıkta altın numara pulu. Katman açan hiçbir şey yok (animasyon, filtre, maske yok): sekme statik bir sayfa. */ #profile-sheet .ds-dosya { margin: 10px 0 4px; padding-bottom: 14px; border-radius: 10px; overflow: hidden; background: #121110; border: 1px solid rgba(210,172,82,.55); box-shadow: inset 0 1px 0 rgba(238,230,212,.07), inset 0 -2px 0 rgba(0,0,0,.5), 0 2px 0 rgba(0,0,0,.45); } #profile-sheet .ds-ust { display: flex; justify-content: space-between; gap: 8px; padding: 7px 12px 6px; background: #1c1912; border-bottom: 1px solid rgba(210,172,82,.35); font: 700 8.5px/1.2 var(--pr-display); letter-spacing: .2em; color: #D2AC52; } #profile-sheet .ds-ust span:last-child { color: #9c8a64; } #profile-sheet .ds-kimlik { display: flex; gap: 14px; align-items: center; padding: 14px 14px 10px; } #profile-sheet .ds-yuz { flex: 0 0 86px; width: 86px; height: 86px; margin: 3px; border-radius: 8px; overflow: hidden; background: #0b0906; box-shadow: 0 0 0 1px #000, 0 0 0 3px #D2AC52, 0 0 0 4px #4a3810; } #profile-sheet .ds-yuz svg, #profile-sheet .ds-yuz img { display: block; width: 100%; height: 100%; } /* dosyadaki portre durağandır: avatarın göz/nefes döngüleri (cardart.js ca-*) burada sonsuz bileşik animasyondu ve sekme değişince gövdenin bütün boyunu katmana çekiyordu (KİMSİN 110 MB, ölçüldü). Panelde hiçbir şey sürekli oynamaz. */ #profile-sheet .ds-yuz svg * { animation: none !important; } #profile-sheet .ds-ad { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; } #profile-sheet .ds-ad small { font: 700 8.5px/1 var(--pr-display); letter-spacing: .2em; color: #9c8a64; } #profile-sheet .ds-ad b { font: 700 19px/1.12 var(--pr-display); letter-spacing: .05em; color: #f0d58a; overflow-wrap: anywhere; } #profile-sheet .ds-ad em { font: italic 500 15px/1.32 var(--pr-metin); color: #EEE6D4; } #profile-sheet .ds-kunye { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 14px; } #profile-sheet .ds-cip { display: inline-flex; align-items: baseline; gap: 6px; padding: 5px 10px 4px; border-radius: 999px; background: #1c1912; box-shadow: inset 0 0 0 1px rgba(210,172,82,.45), inset 0 1px 0 rgba(238,230,212,.06); } #profile-sheet .ds-cip small { font: 700 8px/1 var(--pr-display); letter-spacing: .18em; color: #a8916a; } #profile-sheet .ds-cip b { font: 700 11px/1 var(--pr-display); letter-spacing: .07em; color: #f0d58a; } #profile-sheet .ds-cift { margin: 10px 14px 0; font: 500 14px/1.4 var(--pr-metin); color: #cfc4aa; } #profile-sheet .ds-cift b { font: 700 11px/1 var(--pr-display); letter-spacing: .08em; color: #D2AC52; } /* bölüm başlığı: numara pulu + ad + sağda kısa açıklama */ #profile-sheet .ds-bol { display: flex; align-items: center; gap: 9px; margin: 22px 0 9px; padding-bottom: 7px; border-bottom: 1px solid rgba(210,172,82,.22); } #profile-sheet .ds-bol i { flex: none; min-width: 26px; height: 20px; padding: 0 5px; box-sizing: border-box; display: grid; place-items: center; border-radius: 4px; background: #D2AC52; color: #121110; font: 700 10px/1 var(--pr-display); font-style: normal; letter-spacing: .04em; box-shadow: inset 0 -2px 0 rgba(0,0,0,.25); } #profile-sheet .ds-bol b { flex: none; font: 700 12px/1.1 var(--pr-display); letter-spacing: .16em; color: #EEE6D4; } #profile-sheet .ds-bol small { flex: 1; min-width: 0; text-align: right; font: italic 500 13px/1.2 var(--pr-metin); color: #a99d82; } /* ekler: akordeon (details) — kapalıyken basılı kenarlı bir sekme satırı, açıkken içindeki kart çerçevesiz */ #profile-sheet details.ds-ek { margin-top: 10px; border-radius: 10px; background: #121110; border: 1px solid rgba(210,172,82,.32); box-shadow: inset 0 1px 0 rgba(238,230,212,.05), inset 0 -2px 0 rgba(0,0,0,.45); } #profile-sheet details.ds-ek > summary { list-style: none; cursor: pointer; margin: 0; padding: 12px 12px 11px; min-height: 44px; box-sizing: border-box; border-bottom: 0; -webkit-tap-highlight-color: transparent; } #profile-sheet details.ds-ek > summary::-webkit-details-marker { display: none; } #profile-sheet details.ds-ek > summary:active { background: #1c1912; } #profile-sheet details.ds-ek[open] > summary { border-bottom: 1px solid rgba(210,172,82,.22); } #profile-sheet details.ds-ek[open] > summary b { color: #f0d58a; } #profile-sheet .ds-ok { flex: none; width: 7px; height: 7px; margin: 0 3px 3px 2px; text-decoration: none; border-right: 1.5px solid #D2AC52; border-bottom: 1.5px solid #D2AC52; transform: rotate(45deg); } #profile-sheet details.ds-ek[open] .ds-ok { transform: rotate(-135deg); margin-bottom: -3px; } #profile-sheet .ds-ek-ic > .ds-kart { border: 0; border-radius: 0 0 10px 10px; box-shadow: none; background: transparent; } #profile-sheet .ds-kart { padding: 12px 14px; border-radius: 10px; background: #121110; border: 1px solid rgba(210,172,82,.32); box-shadow: inset 0 1px 0 rgba(238,230,212,.05), inset 0 -2px 0 rgba(0,0,0,.45); } #profile-sheet .ds-not { margin: 8px 0 0; font: 500 14px/1.42 var(--pr-metin); color: #d6ccb3; } #profile-sheet .ds-not b { font: 700 11px/1 var(--pr-display); letter-spacing: .07em; color: #f0d58a; } #profile-sheet .ds-not.ds-ince { font: italic 500 13.5px/1.42 var(--pr-metin); color: #a99d82; } #profile-sheet .ds-uyari { font-style: normal; color: #ec8b72; } /* II · mühür */ #profile-sheet .ds-muhur-kutu { padding: 6px 8px 12px; } #profile-sheet .ds-muhur { display: block; width: 100%; height: auto; } #profile-sheet .ds-m-dis { fill: none; stroke: #D2AC52; stroke-width: 1.4; } #profile-sheet .ds-m-dis2 { fill: none; stroke: rgba(210,172,82,.45); stroke-width: .8; } #profile-sheet .ds-m-zemin { fill: #191610; } #profile-sheet .ds-m-halka, #profile-sheet .ds-m-isin { fill: none; stroke: rgba(210,172,82,.22); stroke-width: .8; } #profile-sheet .ds-m-veri { fill: rgba(210,172,82,.24); stroke: #D2AC52; stroke-width: 1.6; stroke-linejoin: round; } #profile-sheet .ds-m-nokta { stroke: #121110; stroke-width: 1.6; } #profile-sheet .ds-m-nokta.ds-m-guclu { stroke: #f0d58a; stroke-width: 1.8; } #profile-sheet .ds-m-ad { font: 700 11.5px var(--pr-display); letter-spacing: .05em; fill: #d9cfb8; } #profile-sheet .ds-m-ad.ds-m-guclu { fill: #f0d58a; } #profile-sheet .ds-m-ad.ds-m-zayif { fill: #e3957a; } #profile-sheet .ds-m-bant { font: italic 500 12.5px var(--pr-metin); fill: #a99d82; } #profile-sheet .ds-m-bant.ds-m-guclu { fill: #D2AC52; } #profile-sheet .ds-m-bant.ds-m-zayif { fill: #cf8068; } #profile-sheet .ds-m-merkez { fill: #D2AC52; } /* III · oyunda */ #profile-sheet .ds-e-sat { display: flex; gap: 10px; align-items: flex-start; padding: 8px 0; border-bottom: 1px solid rgba(210,172,82,.14); } #profile-sheet .ds-e-sat > s { flex: none; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; text-decoration: none; font: 700 13px/1 var(--pr-display); margin-top: 1px; } #profile-sheet .ds-art > s { background: #24452f; color: #b6efc9; } #profile-sheet .ds-eks > s { background: #4d2316; color: #f5b8a2; } #profile-sheet .ds-e-sat > span { min-width: 0; font: 500 14px/1.38 var(--pr-metin); color: #d6ccb3; } #profile-sheet .ds-e-sat > span b { display: block; margin-bottom: 2px; font: 700 10.5px/1.2 var(--pr-display); letter-spacing: .12em; color: #f0d58a; } #profile-sheet .ds-yol { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; } #profile-sheet .ds-yol > div { padding: 8px 10px 9px; border-radius: 8px; background: #1b1812; box-shadow: inset 0 0 0 1px rgba(210,172,82,.2); } #profile-sheet .ds-yol small { display: block; font: 700 8px/1.2 var(--pr-display); letter-spacing: .16em; color: #a8916a; } #profile-sheet .ds-yol b { display: block; margin: 4px 0 3px; font: 500 15px/1.25 var(--pr-metin); color: #EEE6D4; } #profile-sheet .ds-yol i { display: block; font: 700 8.5px/1.2 var(--pr-display); letter-spacing: .08em; font-style: normal; color: #8f8470; } #profile-sheet .ds-yol .ds-yol-genis { grid-column: 1 / -1; } /* IV · nasıl değişir */ #profile-sheet .ds-d-sat { padding: 7px 0 8px 11px; margin-bottom: 4px; border-left: 2px solid var(--ac); } #profile-sheet .ds-d-sat b { display: block; margin-bottom: 3px; font: 700 10.5px/1.2 var(--pr-display); letter-spacing: .12em; color: #EEE6D4; } #profile-sheet .ds-d-sat span { display: block; font: 500 13.5px/1.38 var(--pr-metin); color: #cfc4aa; } #profile-sheet .ds-d-sat s { text-decoration: none; display: inline-block; width: 14px; font-size: 9px; } #profile-sheet .ds-yuk { color: #8fd8a6; } #profile-sheet .ds-dus { color: #e3957a; } #profile-sheet .ds-rakip { margin: 10px 0 0; padding: 10px 12px; border-radius: 8px; background: #1b1812; font: 500 14px/1.42 var(--pr-metin); color: #d6ccb3; } #profile-sheet .ds-rakip b { font: 700 11px/1 var(--pr-display); letter-spacing: .07em; color: #f0d58a; } #profile-sheet .ds-rakip em { color: #D2AC52; } /* V · rütbe merdiveni: her basamakta boynuz katı (figürün başlığıyla aynı sayı) */ #profile-sheet .ds-merdiven { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; } #profile-sheet .ds-merdiven > span { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 9px 2px 8px; border-radius: 8px; background: #1b1812; box-shadow: inset 0 0 0 1px rgba(210,172,82,.14); } #profile-sheet .ds-merdiven > span i { display: flex; flex-direction: column-reverse; gap: 2px; height: 22px; justify-content: flex-start; align-items: center; } #profile-sheet .ds-merdiven > span u { display: block; width: 18px; height: 3.5px; border-radius: 1px 1px 6px 6px; background: #4a3f2a; } #profile-sheet .ds-merdiven > span b { font: 700 9px/1.15 var(--pr-display); letter-spacing: .05em; color: #8f8470; text-align: center; overflow-wrap: anywhere; } #profile-sheet .ds-merdiven > .gecti u, #profile-sheet .ds-merdiven > .simdi u { background: #D2AC52; } #profile-sheet .ds-merdiven > .gecti b { color: #b39f74; } #profile-sheet .ds-merdiven > .simdi { background: #2a2416; box-shadow: inset 0 0 0 1.5px #D2AC52; } #profile-sheet .ds-merdiven > .simdi b { color: #f0d58a; } /* dar telefon (360): sekme adları ve merdiven basamakları kendi kutusuna sığar (EN "WHO YOU ARE", "GOVERNOR") */ @media (max-width: 380px) { html body #profile-sheet .pr-tab { white-space: normal; font-size: 9.5px; letter-spacing: 0; padding: 4px 3px; } #profile-sheet .ds-merdiven > span b { font-size: 8px; letter-spacing: 0; } } /* VI · yedi kapı */ #profile-sheet .ds-nisanlar { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; } #profile-sheet .ds-nis { position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 7px 0 5px; border-radius: 7px; background: #1b1812; box-shadow: inset 0 0 0 1px rgba(210,172,82,.42); } #profile-sheet .ds-nis svg { width: 22px; height: 22px; display: block; } #profile-sheet .ds-nis svg * { fill: none; stroke: #D2AC52; stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; } #profile-sheet .ds-nis svg circle, #profile-sheet .ds-nis svg ellipse { fill: rgba(210,172,82,.3); } #profile-sheet .ds-nis i { font: 700 8.5px/1 var(--pr-display); font-style: normal; color: #b39258; } #profile-sheet .ds-nis.yok { background: transparent; box-shadow: inset 0 0 0 1px rgba(238,230,212,.16); } #profile-sheet .ds-nis.yok svg * { stroke: rgba(238,230,212,.34); stroke-dasharray: 2 2; fill: none; } #profile-sheet .ds-nis.yok i { color: #6f665a; } #profile-sheet .ds-nis.yum::after { content: '✦'; position: absolute; top: 1px; right: 3px; font-size: 9px; color: #D2AC52; } #profile-sheet .ds-kayip, #profile-sheet .ds-liste { list-style: none; margin: 10px 0 0; padding: 0; } #profile-sheet .ds-kayip li, #profile-sheet .ds-liste li { padding: 8px 0; border-top: 1px solid rgba(210,172,82,.14); } #profile-sheet .ds-kayip b { display: block; margin-bottom: 2px; font: 700 10.5px/1.2 var(--pr-display); letter-spacing: .08em; color: #e3957a; } #profile-sheet .ds-kayip span, #profile-sheet .ds-liste span { display: block; font: 500 13.5px/1.38 var(--pr-metin); color: #cfc4aa; } #profile-sheet .ds-kayip em { display: block; margin-top: 3px; font: italic 500 13px/1.35 var(--pr-metin); color: #D2AC52; } /* VII · emanetler, VIII · taşlar (salt okunur) */ #profile-sheet .ds-em-sira { display: flex; justify-content: center; padding: 2px 0; --kz-altin: #D2AC52; } #profile-sheet .ds-liste b { display: block; margin-bottom: 2px; font: 700 10.5px/1.2 var(--pr-display); letter-spacing: .08em; color: #f0d58a; } #profile-sheet .ds-tas .ds-liste li { display: grid; grid-template-columns: 28px 1fr; column-gap: 8px; } #profile-sheet .ds-tas-ic { grid-row: span 2; width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; background: #1b1812; box-shadow: inset 0 0 0 1px rgba(210,172,82,.45); text-decoration: none; } #profile-sheet .ds-tas-ic svg { width: 16px; height: 16px; fill: none; stroke: #D2AC52; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } /* ölçekli çubuklar: oyuk kanal, parlak dolgu, çentik */ #profile-sheet .at-track, #profile-sheet .yl-track, #profile-sheet .pr-bar { position: relative; display: block; height: 7px; border-radius: 4px; overflow: hidden; background: #070605; box-shadow: inset 0 1px 2px rgba(0,0,0,.9), 0 1px 0 rgba(255,236,190,.06), inset 0 0 0 1px rgba(214,176,90,.12); } #profile-sheet .at-track::after, #profile-sheet .yl-track::after, #profile-sheet .pr-bar::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, transparent calc(25% - .5px), rgba(0,0,0,.55) calc(25% - .5px) calc(25% + .5px), transparent calc(25% + .5px), transparent calc(50% - .5px), rgba(0,0,0,.55) calc(50% - .5px) calc(50% + .5px), transparent calc(50% + .5px), transparent calc(75% - .5px), rgba(0,0,0,.55) calc(75% - .5px) calc(75% + .5px), transparent calc(75% + .5px)); } #profile-sheet .at-track > u, #profile-sheet .yl-track > u, #profile-sheet .pr-bar i { border-radius: 4px; box-shadow: inset 0 1px 0 rgba(255,255,255,.35), inset 0 -1px 0 rgba(0,0,0,.3); } #profile-sheet .at-top b { font: 700 12.5px/1.2 var(--pr-display); letter-spacing: .1em; } /* ÖZELLİK: bant sözü asıl okuma (çip), sayı ikincil (küçük, sönük) */ #profile-sheet .at-top i { min-width: 0; padding: 0; font: 700 10.5px/1 var(--pr-display); color: #8f8470; background: none; box-shadow: none; } #profile-sheet .km-note { clip-path: none; margin-top: 16px; padding: 11px 13px; border-radius: 8px; gap: 9px; background: rgba(34,64,122,.14); border: 1px solid rgba(111,147,214,.3); font: italic 500 15px/1.38 var(--pr-metin); color: #d6dcea; } #profile-sheet .km-note > s { color: #8fb0e6; font-style: normal; font-size: 11px; line-height: 1.9; } /* eski konsolun '>' imi yerine varak yıldız (profile2.js) */ #profile-sheet .at-row em > s { font-size: 10px; } /* ÖZELLİK */ #profile-sheet .pr-world { gap: 8px; } #profile-sheet .pr-w { padding: 11px 12px 10px; border-radius: 10px; background: linear-gradient(180deg, rgba(34,27,17,.6), rgba(12,10,7,.7)); box-shadow: inset 0 0 0 3px #0c0a07, inset 0 0 0 4px rgba(214,176,90,.1); } #profile-sheet .pr-w b { font: 700 12px/1 var(--pr-display); letter-spacing: .18em; color: var(--pr-altin-acik); margin-bottom: 8px; } #profile-sheet .pr-w i { font: 500 13.5px/1.3 var(--pr-metin); color: #c9bc9c; margin-top: 7px; } #profile-sheet .pr-rep { font: 700 10.5px/1 var(--pr-display); letter-spacing: .1em; padding: 4px 8px 3px; border-radius: 999px; margin-bottom: 8px; box-shadow: inset 0 0 0 1px currentColor; } #profile-sheet .pr-bar i { background: linear-gradient(90deg, #8a6a24, #d6b05a 60%, #f4dfa0); } #profile-sheet .at-row { padding: 12px 2px 13px; gap: 7px; border-bottom: 1px solid rgba(214,176,90,.12); } #profile-sheet .at-band { padding: 4px 9px 3px; border-radius: 999px; background: #1c1912; box-shadow: inset 0 0 0 1px var(--ac); font: 700 10px/1 var(--pr-display); letter-spacing: .08em; opacity: 1; } #profile-sheet .pr-acik { margin: 0 0 4px; font: italic 500 13.5px/1.42 var(--pr-metin); color: #a99d82; } /* GALAKSİ YOLU: basamağın durumu sözle (sayı ikincil) */ #profile-sheet .yl-soz { flex: none; padding: 3px 8px 2px; border-radius: 999px; text-decoration: none; background: #1c1912; box-shadow: inset 0 0 0 1px rgba(210,172,82,.4); font: 700 9px/1 var(--pr-display); letter-spacing: .1em; color: #D2AC52; } #profile-sheet .yl-step.on .yl-soz { color: #a9ebc2; box-shadow: inset 0 0 0 1px rgba(143,224,166,.45); } #profile-sheet .yl-top i:not(.yer) { font-size: 10.5px; color: #8f8470; } #profile-sheet .at-row em > s { opacity: 1; } #profile-sheet .at-track > u { background: linear-gradient(90deg, color-mix(in srgb, var(--ac) 45%, #000), var(--ac) 65%, color-mix(in srgb, var(--ac) 55%, #fff)); } #profile-sheet .at-row em { font-size: 13px; line-height: 1.5; color: #c9bea4; } #profile-sheet .at-bal { font-size: 12.5px; color: #bcb096; } /* YOLDAKİ ALETLER: iki sütun küçük kart — liste ÖZELLİK gövdesini 2100 px'e uzatıyordu (kaydırma katmanı, p2_katman) */ #profile-sheet .pr-alet { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 8px; } #profile-sheet .al-row { flex-direction: column; align-items: flex-start; gap: 4px; padding: 8px 9px 9px; border: 0; border-radius: 8px; background: #1b1812; box-shadow: inset 0 0 0 1px rgba(210,172,82,.16); } #profile-sheet .al-row { flex-wrap: nowrap; } #profile-sheet .al-row > b { min-width: 0; flex: none; } #profile-sheet .al-row > span { flex: none; white-space: normal; font: 500 12.5px/1.25 var(--pr-metin); } #profile-sheet .at-row { padding: 10px 2px 11px; } #profile-sheet .al-row > b { font: 700 11.5px/1.2 var(--pr-display); letter-spacing: .08em; } #profile-sheet .al-row > i { border-radius: 999px; padding: 3px 8px 2px; font: 700 10.5px/1 var(--pr-display); } /* GALAKSİ YOLU: basamak tabletleri, Roma rakamlı madalyon */ #profile-sheet .yl-head { align-items: center; padding: 14px 2px 12px; } #profile-sheet .yl-head b { font: 700 13px/1 var(--pr-display); letter-spacing: .22em; color: var(--pr-altin-acik); } #profile-sheet .yl-head i { font: 700 11px/1 var(--pr-display); letter-spacing: .12em; color: #d6b05a; padding: 5px 9px 4px; border-radius: 999px; background: rgba(0,0,0,.45); box-shadow: inset 0 0 0 1px rgba(214,176,90,.4); } #profile-sheet .yl-road { gap: 10px; } #profile-sheet .yl-step { clip-path: none; gap: 12px; padding: 12px 12px 12px 10px; border-radius: 10px; align-items: flex-start; background: linear-gradient(180deg, rgba(34,27,17,.55), rgba(12,10,7,.75)); border: 1px solid rgba(214,176,90,.3); box-shadow: inset 0 1px 0 rgba(255,236,190,.05), 0 2px 0 rgba(0,0,0,.4); } #profile-sheet .yl-no { flex: 0 0 36px; height: 36px; border: 0; border-radius: 50%; margin-top: 1px; background: radial-gradient(circle at 50% 30%, #2a2114, #0d0a07 75%); color: var(--pr-altin-acik); box-shadow: 0 0 0 1px #000, 0 0 0 2.5px #8a6a24, inset 0 1px 0 rgba(255,230,170,.18); font: 700 12px/1 var(--pr-display); letter-spacing: 0; } #profile-sheet .yl-top b { font: 700 12.5px/1.2 var(--pr-display); letter-spacing: .08em; color: #efdcaa; } #profile-sheet .yl-top i { font: 600 12px/1 var(--pr-display); color: #c9b88c; } #profile-sheet .yl-track > u { background: linear-gradient(90deg, #8a6a24, #d6b05a 60%, #f4dfa0); } #profile-sheet .yl-step em { font: italic 500 15px/1.32 var(--pr-metin); color: #cdc2a8; } #profile-sheet .yl-step.on { border-color: rgba(95,190,140,.5); background: linear-gradient(180deg, rgba(20,48,36,.55), rgba(8,18,13,.8)); } #profile-sheet .yl-step.on .yl-no { color: #eaffef; background: radial-gradient(circle at 40% 30%, #3f9469, #25573f 60%, #133224); box-shadow: 0 0 0 1px #000, 0 0 0 2.5px #8fe0a6, 0 0 10px rgba(143,224,166,.35); font: 700 16px/1 var(--pr-ui); } #profile-sheet .yl-step.on .yl-top b { color: #a9ebc2; } #profile-sheet .yl-step.on .yl-track > u { background: linear-gradient(90deg, #1f5a40, #3f9f72 60%, #8fe0b0); } #profile-sheet .yl-step.on em { color: #b3d4c3; } #profile-sheet .yl-dark { font: italic 500 14.5px/1.38 var(--pr-metin); color: #b3a88f; text-align: center; margin: 12px 8px 0; } #profile-sheet .pr-note { font: italic 500 14.5px/1.38 var(--pr-metin); color: #bdb198; text-align: center; margin: 14px 8px 4px; } /* AYARLAR sekmesi: satırları Ajan A çizer (ui_kapi.css .pr-ayar) */ /* ============================================================================= 5. ÖDÜL PERDELERİ (odul.js #od-perde: taş seçimi, çağ mührü, rütbe sayfası) odul.js kendi