/* Leek — ana sayfa (alan adının kökü) */ @font-face { font-family: "Inter"; src: url("/fonts/inter-400.woff") format("woff"); font-weight: 400; font-display: swap; } @font-face { font-family: "Inter"; src: url("/fonts/inter-500.woff") format("woff"); font-weight: 500; font-display: swap; } @font-face { font-family: "Inter"; src: url("/fonts/inter-600.woff") format("woff"); font-weight: 600; font-display: swap; } @font-face { font-family: "Inter"; src: url("/fonts/inter-700.woff") format("woff"); font-weight: 700; font-display: swap; } @font-face { font-family: "Inter Display"; src: url("/fonts/interdisplay-700.woff") format("woff"); font-weight: 700; font-display: swap; } @font-face { font-family: "Inter Display"; src: url("/fonts/interdisplay-800.woff") format("woff"); font-weight: 800; font-display: swap; } @font-face { font-family: "Inter Display"; src: url("/fonts/interdisplay-900.woff") format("woff"); font-weight: 900; font-display: swap; } :root { --a1: #ff1f4f; --a1r: 255 31 79; --a2: #9b3dff; --a2r: 155 61 255; --a1l: #ff8aa5; --a2l: #c39bff; } /* tema renkleri (tema.css değiştirir) */ :root { --bg: #07040a; --panel: #110c17; --raise: #1c1528; --line: #251c33; --line2: var(--sl2, #33284a); --txt: #f4eef9; --txt2: #c9bdd6; --mut: #8d7f9e; --mut2: #65587a; --red: var(--a1); --vio: var(--a2); --pink: #ff5cc8; --grn: #2ee59d; --dc: #5865f2; --grad: linear-gradient(105deg, var(--red), var(--vio)); --font: "Inter", "Segoe UI Variable Text", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --disp: "Inter Display", "Inter", system-ui, sans-serif; --w: 1200px; color-scheme: dark; } * { box-sizing: border-box; } html { scroll-behavior: smooth; scroll-padding-top: 84px; } body { margin: 0; min-height: 100vh; background: var(--bg); color: var(--txt); font: 400 15px/1.6 var(--font); font-feature-settings: "cv11", "ss01", "ss03"; -webkit-font-smoothing: antialiased; overflow-x: hidden; } [hidden] { display: none !important; } a { color: inherit; text-decoration: none; } ::selection { background: rgb(var(--a1r) / .45); color: #fff; } :focus-visible { outline: 2px solid var(--vio); outline-offset: 3px; border-radius: 6px; } .grow { flex: 1; } .ico { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .ico.s { width: 14px; height: 14px; stroke-width: 2.3; } .ico.fill { fill: currentColor; stroke: none; } /* ---------- arka plan ---------- */ .bg { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; } .bg i { position: absolute; border-radius: 50%; filter: blur(90px); opacity: .55; animation: drift 22s ease-in-out infinite alternate; } .bg .o1 { width: 560px; height: 560px; left: -140px; top: -180px; background: radial-gradient(circle, rgb(var(--a1r) / .55), transparent 65%); } .bg .o2 { width: 640px; height: 640px; right: -200px; top: 6%; background: radial-gradient(circle, rgb(var(--a2r) / .5), transparent 65%); animation-duration: 28s; animation-delay: -6s; } .bg .o3 { width: 520px; height: 520px; left: 30%; top: 70%; background: radial-gradient(circle, rgba(255, 92, 200, .28), transparent 65%); animation-duration: 32s; } @keyframes drift { to { transform: translate(60px, 40px) scale(1.12); } } .bg .grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px); background-size: 44px 44px; -webkit-mask-image: radial-gradient(70% 55% at 50% 0%, #000, transparent 80%); mask-image: radial-gradient(70% 55% at 50% 0%, #000, transparent 80%); } .bg .spot { position: absolute; inset: 0; background: radial-gradient(520px circle at var(--x, 70%) var(--y, 20%), rgba(255, 60, 140, .07), transparent 60%); } /* ---------- butonlar ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; height: 42px; padding: 0 18px; border-radius: 11px; border: 1px solid var(--sl2, #3a2d4f); background: linear-gradient(180deg, var(--s1, #211a2e), var(--s2, #1a1424)); color: var(--txt); font: 650 14px var(--font); letter-spacing: -.005em; white-space: nowrap; cursor: pointer; box-shadow: 0 1px 0 rgba(255, 255, 255, .06) inset, 0 8px 20px -12px rgba(0, 0, 0, .9); transition: transform .15s, border-color .15s, filter .15s, background .15s; } .btn:hover { border-color: #5a4775; transform: translateY(-1px); } .btn:active { transform: translateY(0); } .btn.pri { background: var(--grad); border-color: transparent; color: #fff; box-shadow: 0 1px 0 rgba(255, 255, 255, .25) inset, 0 12px 30px -10px rgb(var(--a1r) / .65); } .btn.pri:hover { filter: brightness(1.1); } .btn.ghost { background: rgba(255, 255, 255, .03); border-color: #2f2441; box-shadow: none; } .btn.big { height: 52px; padding: 0 24px; font-size: 15px; border-radius: 13px; } .btn.big .ico { width: 19px; height: 19px; } /* ---------- üst menü ---------- */ .nav { position: sticky; top: 0; z-index: 50; display: flex; align-items: center; gap: 22px; height: 72px; padding: 0 max(20px, calc((100vw - var(--w)) / 2)); transition: background .25s, border-color .25s, backdrop-filter .25s; border-bottom: 1px solid transparent; } .nav.sc { background: rgba(8, 4, 12, .72); -webkit-backdrop-filter: blur(16px) saturate(1.3); backdrop-filter: blur(16px) saturate(1.3); border-bottom-color: rgba(255, 255, 255, .06); } .brand { display: inline-flex; align-items: center; gap: 11px; flex: none; } .brand .mark { width: 38px; height: 38px; border-radius: 11px; box-shadow: 0 6px 16px -8px rgba(0, 0, 0, .9), 0 0 0 1px rgba(255, 255, 255, .07); } .brand .wm { height: 18px; width: auto; } .links { display: flex; align-items: center; gap: 2px; margin: 0 auto; padding: 4px; border-radius: 14px; background: rgb(var(--s3r, 17 12 23) / .55); border: 1px solid rgba(255, 255, 255, .06); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); } .links a { display: inline-flex; align-items: center; gap: 5px; height: 36px; padding: 0 15px; border-radius: 10px; font-size: 13.5px; font-weight: 600; color: var(--mut); transition: color .2s, background .2s; } .links a:hover { color: var(--txt); background: rgba(255, 255, 255, .04); } .links a.on { color: #fff; background: linear-gradient(180deg, rgb(var(--a1r) / .2), rgb(var(--a2r) / .14)); box-shadow: 0 0 0 1px rgb(var(--a1r) / .3) inset; } .menu { display: none; width: 42px; height: 42px; border-radius: 11px; border: 1px solid #2f2441; background: rgba(255, 255, 255, .03); cursor: pointer; padding: 0; flex-direction: column; align-items: center; justify-content: center; gap: 4px; } .menu i { display: block; width: 18px; height: 2px; border-radius: 2px; background: var(--txt); transition: transform .25s, opacity .2s; } .mopen .menu i:nth-child(1) { transform: translateY(6px) rotate(45deg); } .mopen .menu i:nth-child(2) { opacity: 0; } .mopen .menu i:nth-child(3) { transform: translateY(-6px) rotate(-45deg); } /* ---------- giriş bölümü ---------- */ main { width: 100%; max-width: var(--w); margin: 0 auto; padding: 0 20px; } .hero { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 48px; align-items: center; min-height: min(760px, calc(100vh - 72px)); padding: 40px 0 70px; } .nohr .hero { grid-template-columns: 1fr; text-align: center; justify-items: center; } .nohr .hero .hr { display: none; } .nohr .cta, .nohr .nums { justify-content: center; } .pill { display: inline-flex; align-items: center; gap: 9px; height: 34px; padding: 0 14px 0 12px; border-radius: 30px; background: rgb(var(--s3r, 17 12 23) / .7); border: 1px solid var(--sl2, #33284a); font-size: 13px; color: var(--txt2); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); } .pill b { color: #fff; } .dot { width: 9px; height: 9px; border-radius: 50%; background: #4a3d5c; flex: none; } .dot.on { background: var(--grn); box-shadow: 0 0 0 3px rgba(46, 229, 157, .18), 0 0 12px rgba(46, 229, 157, .8); animation: pulse 2.2s ease-in-out infinite; } @keyframes pulse { 50% { box-shadow: 0 0 0 6px rgba(46, 229, 157, .04), 0 0 12px rgba(46, 229, 157, .5); } } .title { position: relative; margin: 22px 0 0; font: var(--tw, 900) calc(clamp(104px, 15vw, 210px) * var(--tsz, 1) * var(--tsu, 1))/.84 var(--disp); letter-spacing: var(--tls, -.05em); margin-left: -.04em; } .title span { display: inline-block; background: linear-gradient(100deg, #fff 0%, #ffd1ef 28%, #ff5cc8 48%, var(--a1) 64%, var(--a2) 86%, #fff 100%) 0 0/220% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: shine 9s linear infinite; padding: .08em .14em .1em .04em; margin: -.08em -.14em -.1em -.04em; filter: drop-shadow(0 18px 50px rgb(var(--a1r) / .32)); } .title.long { font-size: calc(clamp(54px, 8vw, 112px) * var(--tsz, 1) * var(--tsu, 1)); letter-spacing: -.04em; line-height: .95; } @keyframes shine { to { background-position: -220% 0; } } .title::before, .title::after { content: attr(data-t); position: absolute; left: 0; top: 0; color: transparent; -webkit-text-stroke: 1px rgba(255, 92, 200, .55); pointer-events: none; opacity: 0; } .title::before { animation: glitch 7s steps(1) infinite; } .title::after { -webkit-text-stroke-color: rgba(120, 90, 255, .6); animation: glitch 7s steps(1) infinite .12s; } @keyframes glitch { 0%, 91%, 100% { opacity: 0; transform: none; clip-path: none; } 92% { opacity: 1; transform: translate(6px, -2px); clip-path: inset(10% 0 55% 0); } 94% { opacity: 1; transform: translate(-5px, 2px); clip-path: inset(60% 0 8% 0); } 96% { opacity: 1; transform: translate(3px, 0); clip-path: inset(35% 0 40% 0); } } .lead { margin: 22px 0 0; max-width: 46ch; font-size: 18px; line-height: 1.6; color: var(--txt2); } .nohr .lead { margin-left: auto; margin-right: auto; } .cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; } .nums { display: flex; flex-wrap: wrap; gap: 14px 38px; margin-top: 40px; } .nums:empty { display: none; } .nums div { display: flex; flex-direction: column; gap: 2px; position: relative; } .nums div + div::before { content: ""; position: absolute; left: -19px; top: 8px; bottom: 8px; width: 1px; background: var(--line2); } .nums b { font: 800 32px/1.1 var(--disp); letter-spacing: -.03em; font-variant-numeric: tabular-nums; display: flex; align-items: baseline; gap: 5px; } .nums b small { font: 600 14px var(--font); color: var(--mut); letter-spacing: 0; } .nums div > span { font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--mut2); } /* Discord üye listesi görünümü */ .hr { position: relative; perspective: 1400px; } .dlist { position: relative; z-index: 1; max-width: 380px; margin-left: auto; border-radius: 18px; overflow: hidden; background: #111214; border: 1px solid #26272c; box-shadow: 0 1px 0 rgba(255, 255, 255, .06) inset, 0 40px 80px -30px rgba(0, 0, 0, .95), 0 0 0 1px rgba(0, 0, 0, .4); transform: rotateY(-9deg) rotateX(4deg); animation: float 7s ease-in-out infinite; transform-style: preserve-3d; } @keyframes float { 50% { transform: rotateY(-6deg) rotateX(2deg) translateY(-10px); } } .dh { display: flex; align-items: center; gap: 8px; height: 50px; padding: 0 16px; background: #1a1b1e; border-bottom: 1px solid #0b0b0c; font-weight: 700; font-size: 15px; color: #f2f3f5; } .dh .hash { color: #80848e; font-size: 20px; font-weight: 500; } .dh i { width: 10px; height: 10px; border-radius: 50%; background: #2b2d31; } .db { padding: 6px 8px 14px; max-height: 420px; overflow: hidden; -webkit-mask-image: linear-gradient(#000 85%, transparent); mask-image: linear-gradient(#000 85%, transparent); } .dg { padding: 16px 8px 6px; font-size: 11.5px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: #949ba4; } .dm { display: flex; align-items: center; gap: 12px; padding: 6px 8px; border-radius: 8px; transition: background .15s; } .dm:hover { background: #2e3035; } .dm.off { opacity: .45; } .da { position: relative; width: 36px; height: 36px; flex: none; } .da img, .da .ini { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; display: grid; place-items: center; background: var(--c, var(--vio)); color: #fff; font: 800 13px var(--disp); } .da i { position: absolute; right: -2px; bottom: -2px; width: 14px; height: 14px; border-radius: 50%; border: 3px solid #111214; background: #80848e; } .dm:not(.off) .da i { background: #23a55a; } .dn { min-width: 0; display: grid; grid-template-columns: auto auto 1fr; align-items: center; column-gap: 6px; } .dn b { font-size: 14.5px; font-weight: 600; color: #f2f3f5; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .dn em, .bot h3 em { font-style: normal; font-size: 10px; font-weight: 700; background: var(--dc); color: #fff; padding: 1px 5px; border-radius: 4px; line-height: 15px; } .dn small { grid-column: 1 / -1; font-size: 12px; color: #949ba4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .hr .glow { position: absolute; inset: 10% 0 0 20%; z-index: 0; background: radial-gradient(closest-side, rgb(var(--a2r) / .45), transparent); filter: blur(40px); } /* ---------- bölümler ---------- */ .sec { padding: 90px 0 30px; } .sh { text-align: center; max-width: 640px; margin: 0 auto 40px; } .kick { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--a1l); } .kick::before, .kick::after { content: ""; width: 22px; height: 1px; background: linear-gradient(90deg, transparent, var(--a1l)); } .kick::after { transform: scaleX(-1); } .sh h2, .jb h2 { margin: 12px 0 0; font: 800 clamp(32px, 4.4vw, 48px)/1.08 var(--disp); letter-spacing: -.03em; } .sh p { margin: 12px 0 0; color: var(--mut); font-size: 15.5px; } /* bot kartları */ .bots { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; } .bot { --c: var(--vio); position: relative; overflow: hidden; border-radius: 20px; padding: 0 20px 20px; background: linear-gradient(180deg, var(--s1, #140e1b), var(--s2, #0f0a15)); border: 1px solid var(--sl, #241a31); box-shadow: 0 1px 0 rgba(255, 255, 255, .045) inset, 0 24px 50px -30px rgba(0, 0, 0, .9); transition: transform .25s, border-color .25s, box-shadow .3s; } .bot:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--c) 45%, var(--sl, #241a31)); box-shadow: 0 1px 0 rgba(255, 255, 255, .05) inset, 0 30px 60px -28px color-mix(in srgb, var(--c) 75%, #000); } .bb { height: 84px; margin: 0 -20px; background: radial-gradient(120% 140% at 0% 0%, var(--c), transparent 70%), linear-gradient(120deg, color-mix(in srgb, var(--c) 55%, #000), #2a1240); position: relative; } .bb::after { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(255, 255, 255, .16) 1px, transparent 1.5px); background-size: 14px 14px; -webkit-mask-image: linear-gradient(90deg, transparent, #000); mask-image: linear-gradient(90deg, transparent, #000); } .bot:not(.on) .bb { filter: saturate(.35) brightness(.6); } .bi { display: flex; align-items: flex-end; justify-content: space-between; margin-top: -38px; position: relative; } .ba { position: relative; width: 78px; height: 78px; border-radius: 22px; padding: 5px; background: #120c18; flex: none; } .ba img, .ba .ini { width: 68px; height: 68px; border-radius: 17px; object-fit: cover; display: grid; place-items: center; background: var(--c); color: #fff; font: 800 24px var(--disp); letter-spacing: -.02em; } .bot:not(.on) .ba img, .bot:not(.on) .ba .ini { filter: saturate(.5) brightness(.8); } .ba i { position: absolute; right: 0; bottom: 0; width: 20px; height: 20px; border-radius: 50%; border: 4px solid #120c18; background: #5b4f6c; } .bot.on .ba i { background: var(--grn); box-shadow: 0 0 12px rgba(46, 229, 157, .7); } .st { display: inline-flex; align-items: center; gap: 7px; height: 26px; padding: 0 10px; border-radius: 20px; font-size: 12px; font-weight: 600; color: var(--mut); background: rgba(255, 255, 255, .04); border: 1px solid var(--sl, #2c2240); } .st i { width: 7px; height: 7px; border-radius: 50%; background: #5b4f6c; } .bot.on .st { color: #8ff5c9; background: rgba(46, 229, 157, .1); border-color: rgba(46, 229, 157, .28); } .bot.on .st i { background: var(--grn); } .bot h3 { display: flex; align-items: center; gap: 8px; margin: 14px 0 0; font: 700 20px/1.2 var(--disp); letter-spacing: -.02em; } .bm { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 10px; font-size: 13px; color: var(--mut); } .bm b { color: var(--txt); font-variant-numeric: tabular-nums; } .bot.sk { height: 210px; background: linear-gradient(90deg, #120c18 25%, #1a1323 50%, #120c18 75%) 0 0/200% 100%; animation: sk 1.4s linear infinite; } @keyframes sk { to { background-position: -200% 0; } } .none { grid-column: 1 / -1; text-align: center; padding: 40px; color: var(--mut); border: 1px dashed var(--line2); border-radius: 18px; } /* özellikler */ .feats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } .feat { position: relative; overflow: hidden; padding: 26px 24px 24px; border-radius: 20px; background: linear-gradient(180deg, var(--s1, #140e1b), var(--s2, #0f0a15)); border: 1px solid var(--sl, #241a31); } .feat::after { content: ""; position: absolute; right: -60px; top: -60px; width: 180px; height: 180px; border-radius: 50%; background: radial-gradient(circle, rgb(var(--a2r) / .18), transparent 70%); } .fi { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; color: #ffd1ef; background: linear-gradient(135deg, rgb(var(--a1r) / .3), rgb(var(--a2r) / .25)); box-shadow: 0 0 0 1px rgba(255, 92, 200, .3) inset, 0 12px 30px -12px rgb(var(--a1r) / .6); } .fi .ico { width: 22px; height: 22px; } .feat h3 { margin: 18px 0 0; font: 700 20px var(--disp); letter-spacing: -.02em; } .feat p { margin: 8px 0 0; color: var(--mut); font-size: 14.5px; } .feat p b { color: var(--txt); } /* katıl bandı */ .join { padding-bottom: 90px; } .jb { position: relative; overflow: hidden; display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; padding: 44px 48px; border-radius: 26px; background: radial-gradient(600px 260px at 100% 0%, rgb(var(--a2r) / .4), transparent 70%), radial-gradient(500px 240px at 0% 100%, rgb(var(--a1r) / .32), transparent 70%), #130c1b; border: 1px solid #3a2a52; box-shadow: 0 40px 90px -40px rgb(var(--a1r) / .5); } .jb h2 { margin-top: 10px; } .jb p { margin: 8px 0 0; color: var(--txt2); } /* alt bilgi */ .foot { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; max-width: var(--w); margin: 0 auto; padding: 28px 20px 36px; border-top: 1px solid rgba(255, 255, 255, .06); font-size: 13px; color: var(--mut); } .foot .mark { width: 28px; height: 28px; border-radius: 8px; } .foot .wm { height: 14px; } .foot a:not(.brand):hover { color: var(--txt); } /* kaydırınca belirme */ .rv { opacity: 0; transform: translateY(18px); transition: opacity .7s cubic-bezier(.2, .8, .2, 1), transform .7s cubic-bezier(.2, .8, .2, 1); transition-delay: calc(var(--d, 0) * 80ms); } .rv.in { opacity: 1; transform: none; } .hr.rv { transform: translateY(18px) scale(.98); } .hr.rv.in { transform: none; } @media (max-width: 960px) { .hero { grid-template-columns: 1fr; gap: 40px; min-height: 0; padding-top: 30px; } .dlist { margin: 0 auto; transform: none; animation: none; } .feats { grid-template-columns: 1fr; } } @media (max-width: 820px) { .nav { gap: 10px; } .menu { display: flex; order: 3; } .links { position: fixed; left: 12px; right: 12px; top: 78px; margin: 0; flex-direction: column; align-items: stretch; gap: 4px; padding: 8px; border-radius: 16px; background: rgb(var(--s3r, 17 12 23) / .96); border-color: var(--sl2, #33284a); box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .9); opacity: 0; transform: translateY(-8px); pointer-events: none; transition: opacity .2s, transform .2s; } .links a { height: 46px; font-size: 15px; padding: 0 14px; } .mopen .links { opacity: 1; transform: none; pointer-events: auto; } .lead { font-size: 16.5px; } .nums { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 20px; } .nums b { font-size: 26px; } .nums div + div::before { display: none; } .nums div { padding-left: 12px; border-left: 2px solid var(--sl2, #33284a); } .sec { padding-top: 64px; } .jb { padding: 30px 24px; } .jb .btn { width: 100%; } } @media (max-width: 420px) { .brand .wm { display: none; } .cta .btn { flex: 1 1 100%; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } .rv { opacity: 1; transform: none; } html { scroll-behavior: auto; } } /* ========================================================= Portfolyo: hesap alanı, ekip kartları, ekip, projeler ========================================================= */ .acct { display: flex; align-items: center; gap: 8px; flex: none; min-height: 40px; } .acct .btn { height: 40px; padding: 0 15px; } .acct .btn .ico.fill { width: 17px; height: 17px; } .btn.ctl { padding: 0 16px; } .me { display: flex; align-items: center; gap: 9px; height: 40px; padding: 0 4px 0 4px; border-radius: 12px; border: 1px solid #2f2441; background: rgb(var(--s3r, 17 12 23) / .6); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); } .me img, .me .ini { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; display: grid; place-items: center; background: var(--grad); color: #fff; font: 800 11px var(--disp); flex: none; } .me .mn { max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; font-weight: 600; } .me .out { width: 30px; height: 30px; border: 0; border-radius: 8px; background: transparent; color: var(--mut); display: grid; place-items: center; cursor: pointer; } .me .out:hover { color: var(--a1l); background: rgb(var(--a1r) / .1); } .me .out .ico { width: 16px; height: 16px; } .flash { position: fixed; z-index: 60; left: 50%; top: 84px; transform: translateX(-50%); padding: 11px 16px; border-radius: 12px; background: #2a0f1c; border: 1px solid rgb(var(--a1r) / .45); color: #ffc2cf; font-size: 13.5px; box-shadow: 0 20px 40px -14px rgba(0, 0, 0, .9); transition: opacity .4s, transform .4s; } .flash.out { opacity: 0; transform: translate(-50%, -8px); pointer-events: none; } /* Logonun yanındaki iki büyük ekip kartı */ .tcards { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 16px; max-width: 460px; margin-left: auto; } .tc { --c: var(--vio); position: relative; overflow: hidden; border-radius: 22px; padding: 18px 18px 14px; background: radial-gradient(120% 80% at 0% 0%, color-mix(in srgb, var(--c) 22%, transparent), transparent 60%), linear-gradient(180deg, rgba(24, 16, 33, .92), rgba(15, 10, 21, .92)); border: 1px solid color-mix(in srgb, var(--c) 30%, #2b2039); box-shadow: 0 1px 0 rgba(255, 255, 255, .07) inset, 0 34px 70px -36px color-mix(in srgb, var(--c) 60%, #000), 0 30px 60px -30px rgba(0, 0, 0, .9); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); animation: float 8s ease-in-out infinite; } .tc:nth-child(1) { margin-right: 40px; } .tc:nth-child(2) { margin-left: 40px; animation-delay: -4s; } .tc::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: linear-gradient(90deg, var(--c), transparent 80%); } @keyframes float { 50% { transform: translateY(-8px); } } .tch { display: flex; align-items: flex-start; gap: 13px; } .tcn { font: 900 30px/1 var(--disp); letter-spacing: -.04em; color: transparent; -webkit-text-stroke: 1.2px color-mix(in srgb, var(--c) 85%, #fff); flex: none; margin-top: 1px; } .tch h3 { margin: 0; font: 800 19px/1.2 var(--disp); letter-spacing: -.02em; } .tch p { margin: 3px 0 0; font-size: 12.5px; color: var(--mut); line-height: 1.45; } .tcc { flex: none; font-size: 11.5px; font-weight: 700; padding: 3px 9px; border-radius: 20px; color: color-mix(in srgb, var(--c) 60%, #fff); background: color-mix(in srgb, var(--c) 15%, transparent); border: 1px solid color-mix(in srgb, var(--c) 35%, transparent); } .tcm { margin-top: 14px; display: flex; flex-direction: column; gap: 4px; } .tm { display: flex; align-items: center; gap: 12px; padding: 8px 8px; border-radius: 12px; transition: background .2s; } .tm:hover { background: rgba(255, 255, 255, .035); } .tav { position: relative; width: 40px; height: 40px; flex: none; border-radius: 50%; box-shadow: 0 0 0 2px #140d1c, 0 0 0 3.5px color-mix(in srgb, var(--c) 75%, transparent); } .tav img, .tav .ini { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: grid; place-items: center; background: color-mix(in srgb, var(--c) 70%, #2a1240); color: #fff; font: 800 13px var(--disp); } .tav.sm { width: 22px; height: 22px; margin-left: -7px; box-shadow: 0 0 0 2px #140d1c; } .tav.sm:first-child { margin-left: 0; } .tav.sm .ini { font-size: 9px; } .tm b { display: flex; align-items: center; gap: 6px; font-size: 14.5px; font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .tm small { display: block; font-size: 12.5px; color: var(--mut); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .tme { padding: 14px 8px 10px; font-size: 13px; color: var(--mut2); } .tmore { display: flex; align-items: center; gap: 10px; margin: 4px 8px 2px; padding-top: 10px; border-top: 1px solid rgba(255, 255, 255, .06); font-size: 12.5px; font-weight: 600; color: var(--txt2); } .tmore:hover { color: #fff; } .stk { display: flex; } .cr { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: #ffb547; color: #2a1800; flex: none; font-style: normal; box-shadow: 0 0 10px rgba(255, 181, 71, .5); } .cr .ico { width: 11px; height: 11px; stroke-width: 2.4; } /* Ekip bölümü */ .tblk { --c: var(--vio); margin-bottom: 44px; } .tbh { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 0 4px 16px; } .tbh > i { width: 12px; height: 12px; border-radius: 4px; background: var(--c); box-shadow: 0 0 14px var(--c); } .tbh h3 { margin: 0; font: 800 24px var(--disp); letter-spacing: -.025em; } .tbh > span:not(.grow):not(.cnt) { color: var(--mut); font-size: 14px; } .tbh .cnt { font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: 20px; color: color-mix(in srgb, var(--c) 55%, #fff); background: color-mix(in srgb, var(--c) 14%, transparent); border: 1px solid color-mix(in srgb, var(--c) 32%, transparent); } .people { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; } .pc { position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 26px 20px 22px; border-radius: 20px; background: radial-gradient(90% 60% at 50% 0%, color-mix(in srgb, var(--c) 16%, transparent), transparent 70%), linear-gradient(180deg, var(--s1, #140e1b), var(--s2, #0f0a15)); border: 1px solid var(--sl, #241a31); transition: transform .25s, border-color .25s, box-shadow .3s; } .pc:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--c) 45%, var(--sl, #241a31)); box-shadow: 0 28px 54px -30px color-mix(in srgb, var(--c) 70%, #000); } .pa { position: relative; width: 88px; height: 88px; border-radius: 50%; padding: 4px; background: conic-gradient(from 210deg, var(--c), color-mix(in srgb, var(--c) 30%, var(--a2)), var(--c)); box-shadow: 0 16px 36px -14px color-mix(in srgb, var(--c) 80%, #000); } .pa img, .pa .ini { width: 80px; height: 80px; border-radius: 50%; object-fit: cover; display: grid; place-items: center; background: #1a1225; color: #fff; font: 800 26px var(--disp); letter-spacing: -.02em; border: 3px solid #120c18; } .pa .cr { position: absolute; top: -2px; right: -2px; width: 26px; height: 26px; box-shadow: 0 0 0 3px #120c18, 0 0 14px rgba(255, 181, 71, .6); } .pa .cr .ico { width: 14px; height: 14px; } .pc h4 { margin: 16px 0 0; font: 800 19px/1.2 var(--disp); letter-spacing: -.02em; } .prole { margin-top: 8px; display: inline-flex; align-items: center; height: 26px; padding: 0 11px; border-radius: 20px; font-size: 12px; font-weight: 700; color: color-mix(in srgb, var(--c) 55%, #fff); background: color-mix(in srgb, var(--c) 14%, transparent); border: 1px solid color-mix(in srgb, var(--c) 32%, transparent); } .pc p { margin: 12px 0 0; font-size: 13.5px; color: var(--mut); line-height: 1.55; } .plink { margin-top: 14px; display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 600; color: var(--txt2); padding: 6px 11px; border-radius: 9px; background: rgba(255, 255, 255, .04); border: 1px solid var(--sl, #2c2240); } .plink:hover { color: #fff; border-color: #4a3a63; } /* Projeler */ .projs { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; } .pj { --c: var(--vio); position: relative; overflow: hidden; display: flex; flex-direction: column; padding: 22px; border-radius: 20px; background: radial-gradient(110% 70% at 100% 0%, color-mix(in srgb, var(--c) 16%, transparent), transparent 65%), linear-gradient(180deg, var(--s1, #140e1b), var(--s2, #0f0a15)); border: 1px solid var(--sl, #241a31); transition: transform .25s, border-color .25s, box-shadow .3s; } .pj:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--c) 45%, var(--sl, #241a31)); box-shadow: 0 28px 54px -30px color-mix(in srgb, var(--c) 70%, #000); } .pjt { display: flex; align-items: center; gap: 13px; } .pji { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; flex: none; font: 900 20px var(--disp); color: #fff; background: linear-gradient(135deg, var(--c), color-mix(in srgb, var(--c) 40%, #2a1240)); box-shadow: 0 0 0 1px rgba(255, 255, 255, .12) inset, 0 12px 28px -12px var(--c); } .pj h3 { margin: 0; font: 800 20px/1.2 var(--disp); letter-spacing: -.02em; } .pj p { margin: 14px 0 0; color: var(--mut); font-size: 14px; line-height: 1.6; } .tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; } .tags span { font-size: 11.5px; font-weight: 600; padding: 3px 9px; border-radius: 7px; color: var(--txt2); background: rgba(255, 255, 255, .04); border: 1px solid var(--sl, #2c2240); } .pjl { margin-top: auto; padding-top: 16px; align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; color: color-mix(in srgb, var(--c) 55%, #fff); } .pjl:hover { text-decoration: underline; } .bot .bd { margin: 8px 0 0; font-size: 13px; color: var(--txt2); line-height: 1.5; } /* yetkiliye düzenle butonu */ .editfab { position: fixed; z-index: 40; right: 20px; bottom: 20px; display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 18px; border-radius: 14px; background: var(--grad); color: #fff; font-weight: 700; font-size: 13.5px; box-shadow: 0 1px 0 rgba(255, 255, 255, .25) inset, 0 16px 34px -10px rgb(var(--a1r) / .7); transition: transform .15s, filter .15s; } .editfab:hover { transform: translateY(-2px); filter: brightness(1.1); } @media (max-width: 960px) { .tcards { margin: 0 auto; max-width: 520px; } .tc:nth-child(1), .tc:nth-child(2) { margin: 0; } .tc { animation: none; } } @media (max-width: 820px) { .me .mn { display: none; } .acct { margin-left: auto; } .acct .btn { padding: 0 12px; } .flash { left: 12px; right: 12px; transform: none; } .flash.out { transform: translateY(-8px); } .tbh h3 { font-size: 21px; } .editfab { right: 12px; bottom: 12px; } } @media (max-width: 480px) { .acct .btn:not(.ctl) span { display: none; } .people { grid-template-columns: 1fr 1fr; gap: 10px; } .pc { padding: 20px 12px 16px; } .pa { width: 70px; height: 70px; } .pa img, .pa .ini { width: 62px; height: 62px; font-size: 21px; } .pc h4 { font-size: 16px; } .pc p { font-size: 12.5px; } .tc { padding: 16px 14px 12px; } } @media (max-width: 820px) { .editfab { width: 50px; height: 50px; padding: 0; justify-content: center; border-radius: 16px; } .editfab span { display: none; } .editfab .ico { width: 20px; height: 20px; } } /* ========================================================= Discord profil kartları (logonun yanında iki kişi + ekip) ========================================================= */ .hero { grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); } .title { font-size: calc(clamp(96px, 13vw, 196px) * var(--tsz, 1) * var(--tsu, 1)); } .pcards { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; align-items: start; } .pcards .dcard:nth-child(2) { margin-top: 56px; } .pcards.one { grid-template-columns: minmax(0, 340px); justify-content: end; } .dcard { --ac: var(--a2); position: relative; overflow: hidden; border-radius: 20px; padding: 4px; background: linear-gradient(170deg, color-mix(in srgb, var(--ac) 70%, #111214), color-mix(in srgb, var(--ac) 22%, #111214) 45%, #16121d); box-shadow: 0 1px 0 rgba(255, 255, 255, .12) inset, 0 40px 80px -40px color-mix(in srgb, var(--ac) 80%, #000), 0 30px 60px -30px rgba(0, 0, 0, .95); transition: transform .3s cubic-bezier(.2, .8, .2, 1), box-shadow .3s; } .pcards .dcard { animation: float 8s ease-in-out infinite; } .pcards .dcard:nth-child(2) { animation-delay: -4s; } .dcard:hover { transform: translateY(-6px); } .dbn { height: 112px; border-radius: 16px 16px 0 0; background: radial-gradient(120% 140% at 0% 0%, color-mix(in srgb, var(--ac) 90%, #fff 10%), transparent 70%), linear-gradient(120deg, var(--ac), color-mix(in srgb, var(--ac) 35%, #2a1240)); background-size: cover; background-position: center; position: relative; } .dbn::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(180deg, transparent 55%, rgba(0, 0, 0, .25)); } .dbody { position: relative; padding: 0 14px 16px; border-radius: 0 0 16px 16px; background: rgba(12, 9, 16, .78); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); } .dav { position: relative; width: 92px; height: 92px; margin-top: -48px; border-radius: 50%; padding: 6px; background: color-mix(in srgb, var(--ac) 18%, #120e17); } .dav img, .dav .ini { width: 80px; height: 80px; border-radius: 50%; object-fit: cover; display: grid; place-items: center; background: linear-gradient(135deg, var(--ac), color-mix(in srgb, var(--ac) 40%, #2a1240)); color: #fff; font: 800 28px var(--disp); letter-spacing: -.02em; } .din { margin-top: 8px; padding: 12px 12px 4px; border-radius: 12px; background: rgba(0, 0, 0, .32); } .din h3 { margin: 0; font: 800 21px/1.15 var(--disp); letter-spacing: -.02em; overflow-wrap: anywhere; } .dtag { margin-top: 2px; font-size: 13px; color: #b5bac1; } .drole { display: inline-flex; align-items: center; margin-top: 10px; height: 24px; padding: 0 10px; border-radius: 7px; font-size: 12px; font-weight: 700; color: color-mix(in srgb, var(--ac) 45%, #fff); background: color-mix(in srgb, var(--ac) 18%, transparent); border: 1px solid color-mix(in srgb, var(--ac) 35%, transparent); } .dsec { margin-top: 12px; padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, .08); } .dsec small { display: block; font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: #dbdee1; margin-bottom: 6px; } .dsec p { margin: 0 0 8px; font-size: 13.5px; line-height: 1.5; color: #dbdee1; overflow-wrap: anywhere; white-space: pre-line; } .socs { display: flex; flex-wrap: wrap; gap: 7px; padding-bottom: 8px; } .so { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; padding: 0; cursor: pointer; color: #e3e5e8; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .08); transition: transform .15s, background .2s, color .2s, box-shadow .2s; font: inherit; } .so .ico { width: 18px; height: 18px; } .so:hover { transform: translateY(-2px); color: #fff; } .so.discord:hover { background: #5865f2; box-shadow: 0 8px 20px -8px #5865f2; } .so.github:hover { background: #24292f; box-shadow: 0 8px 20px -8px rgba(255, 255, 255, .25); } .so.instagram:hover { background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fd5949 45%, #d6249f 60%, #285aeb 90%); box-shadow: 0 8px 20px -8px #d6249f; } .so.twitter:hover { background: #000; box-shadow: 0 8px 20px -8px rgba(255, 255, 255, .3); } .so.whatsapp:hover { background: #25d366; box-shadow: 0 8px 20px -8px #25d366; } /* ekip bölümündeki kartlar */ #people { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 18px; } .flash.ok { background: #0f2a20; border-color: rgba(46, 229, 157, .45); color: #a5f7d2; } @media (max-width: 1100px) { .hero { grid-template-columns: 1fr; gap: 44px; min-height: 0; } .pcards { max-width: 640px; margin: 0 auto; width: 100%; } .pcards.one { justify-content: center; } .pcards .dcard { animation: none; } } @media (max-width: 600px) { .pcards { grid-template-columns: 1fr; gap: 16px; } .pcards .dcard:nth-child(2) { margin-top: 0; } .title { font-size: calc(clamp(84px, 26vw, 140px) * var(--tsz, 1) * var(--tsu, 1)); } } /* avatarın negatif boşluğu kartın gövdesini yukarı çekmesin (margin collapse) */ .dbody { display: flow-root; background: linear-gradient(180deg, color-mix(in srgb, var(--ac) 16%, #131017), #121016 70%); -webkit-backdrop-filter: none; backdrop-filter: none; } /* ========================================================= v2.6 — kaliteli profil kartları + detaylı profil penceresi ========================================================= */ @property --ang { syntax: ''; initial-value: 0deg; inherits: false; } @keyframes spinang { to { --ang: 360deg; } } html.lock { overflow: hidden; } .dcw { position: relative; min-width: 0; } .pcards .dcw { animation: float 8s ease-in-out infinite; } .pcards .dcw:nth-child(2) { margin-top: 56px; animation-delay: -4s; } .pcards .dcard, .pcards .dcard:nth-child(2) { animation: none; margin-top: 0; } .dcard { cursor: pointer; isolation: isolate; padding: 3px; background: none; border-radius: 22px; transition: transform .6s cubic-bezier(.2, .8, .2, 1), box-shadow .35s; will-change: transform; box-shadow: 0 40px 80px -40px color-mix(in srgb, var(--ac) 85%, #000), 0 30px 60px -30px rgba(0, 0, 0, .95); outline: none; } .dcard.tilt { transition: transform .1s linear, box-shadow .35s; } .dcard:hover, .dcard:focus-visible { box-shadow: 0 50px 90px -36px color-mix(in srgb, var(--ac) 95%, #000), 0 0 0 1px color-mix(in srgb, var(--ac) 50%, transparent), 0 30px 60px -30px rgba(0, 0, 0, .95); } .dcard:focus-visible { box-shadow: 0 0 0 3px color-mix(in srgb, var(--ac) 70%, #fff); } /* dönen ışıklı kenar */ .dfx { position: absolute; inset: 0; z-index: -2; border-radius: inherit; background: conic-gradient(from var(--ang), var(--ac), transparent 22%, color-mix(in srgb, var(--ac) 45%, #fff) 50%, transparent 78%, var(--ac)); animation: spinang 7s linear infinite; opacity: .9; } .dcard:hover .dfx { animation-duration: 2.5s; } /* kartın kendi arka planı (resim/GIF olabilir) */ .dbg { position: absolute; inset: 3px; z-index: -1; border-radius: 19px; background: linear-gradient(170deg, color-mix(in srgb, var(--ac) 38%, #111214), #15111b 52%, #120e17); background-size: cover; background-position: center; overflow: hidden; } .dcard.hasbg .dbg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10, 7, 14, .25) 0%, rgba(10, 7, 14, .7) 40%, rgba(10, 7, 14, .86) 100%); } .dbn { height: 118px; border-radius: 19px 19px 0 0; } .dbody { background: none; padding: 0 14px 14px; } .dtop { display: flex; align-items: flex-start; gap: 10px; } .dav { flex: none; padding: 6px; background: #15111b; box-shadow: 0 0 0 2px color-mix(in srgb, var(--ac) 55%, transparent), 0 12px 30px -10px color-mix(in srgb, var(--ac) 90%, #000); transition: transform .4s cubic-bezier(.2, 1.4, .4, 1); } .dcard:hover .dav { transform: scale(1.04) rotate(-2deg); } .dstat { position: relative; min-width: 0; margin-top: 10px; padding: 8px 11px; border-radius: 12px; background: rgba(17, 14, 23, .94); border: 1px solid rgba(255, 255, 255, .08); font-size: 12.5px; color: #dbdee1; box-shadow: 0 10px 24px -12px rgba(0, 0, 0, .9); } .dstat span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .dstat::before, .dstat::after { content: ""; position: absolute; border-radius: 50%; background: rgba(17, 14, 23, .94); border: 1px solid rgba(255, 255, 255, .08); } .dstat::before { width: 12px; height: 12px; left: -8px; top: 6px; } .dstat::after { width: 6px; height: 6px; left: -15px; top: 2px; } .din { background: rgba(6, 4, 9, .55); border: 1px solid rgba(255, 255, 255, .06); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); } .clamp { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .dmore { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 10px -12px -4px; padding: 10px 0 8px; border-top: 1px solid rgba(255, 255, 255, .07); font-size: 12.5px; font-weight: 700; color: color-mix(in srgb, var(--ac) 45%, #fff); opacity: .75; transition: opacity .2s, gap .2s; } .dcard:hover .dmore { opacity: 1; gap: 10px; } .dshine { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 3; background: radial-gradient(380px circle at var(--mx, 50%) var(--my, 0%), rgba(255, 255, 255, .13), transparent 45%); opacity: 0; transition: opacity .3s; } .dcard:hover .dshine { opacity: 1; } /* ---------- detaylı profil penceresi ---------- */ .pmo { position: fixed; inset: 0; z-index: 100; display: flex; padding: 24px 16px; overflow-y: auto; background: rgba(5, 3, 8, 0); transition: background .35s, backdrop-filter .35s, -webkit-backdrop-filter .35s, opacity .26s; } .pmo.in { background: rgba(5, 3, 8, .74); -webkit-backdrop-filter: blur(12px) saturate(1.2); backdrop-filter: blur(12px) saturate(1.2); } .pmo.out { opacity: 0; } .pmo.out .pm { transform: translateY(16px) scale(.96); } .pmw { width: min(660px, 100%); margin: auto; } .pm { --ac: var(--a2); position: relative; isolation: isolate; padding: 3px; border-radius: 28px; opacity: 0; transform: translateY(36px) scale(.9) rotateX(8deg); transition: transform .65s cubic-bezier(.16, 1.25, .3, 1), opacity .3s; box-shadow: 0 60px 140px -40px color-mix(in srgb, var(--ac) 70%, #000), 0 40px 80px -40px rgba(0, 0, 0, .95); } .pmo.in .pm { opacity: 1; transform: none; } .pm.fromr { animation: pmR .45s cubic-bezier(.2, .9, .3, 1); } .pm.froml { animation: pmL .45s cubic-bezier(.2, .9, .3, 1); } @keyframes pmR { from { opacity: 0; transform: translateX(60px) scale(.97); } } @keyframes pmL { from { opacity: 0; transform: translateX(-60px) scale(.97); } } .pmring { position: absolute; inset: 0; z-index: -2; border-radius: inherit; background: conic-gradient(from var(--ang), var(--ac), transparent 20%, color-mix(in srgb, var(--ac) 40%, #fff) 50%, transparent 80%, var(--ac)); animation: spinang 5s linear infinite; } .pmring::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: inherit; filter: blur(28px); opacity: .45; } .pmbg { position: absolute; inset: 3px; z-index: -1; border-radius: 25px; overflow: hidden; background: linear-gradient(170deg, color-mix(in srgb, var(--ac) 34%, #111214), #15111b 50%, #110d16); background-size: cover; background-position: center; } .pmbg.on { animation: kb 24s ease-in-out infinite alternate; } .pmbg.on::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10, 7, 14, .2), rgba(10, 7, 14, .72) 38%, rgba(10, 7, 14, .9)); } @keyframes kb { to { background-position: 60% 40%; background-size: 115%; } } .pmbn { position: relative; height: 220px; border-radius: 25px 25px 0 0; overflow: hidden; background: radial-gradient(120% 140% at 0% 0%, color-mix(in srgb, var(--ac) 90%, #fff 10%), transparent 70%), linear-gradient(120deg, var(--ac), color-mix(in srgb, var(--ac) 35%, #2a1240)); background-size: cover; background-position: center; animation: bnIn 1s cubic-bezier(.2, .8, .2, 1); } .pmbn::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 50%, rgba(0, 0, 0, .35)); } @keyframes bnIn { from { background-size: 125%; filter: brightness(1.6) saturate(1.3); } } .pmx { position: absolute; z-index: 2; top: 14px; right: 14px; width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .18); background: rgba(8, 5, 12, .55); color: #fff; display: grid; place-items: center; cursor: pointer; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); transition: transform .2s, background .2s; } .pmx:hover { transform: rotate(90deg); background: rgb(var(--a1r) / .5); } .pmhd { position: relative; z-index: 1; display: flex; align-items: flex-start; gap: 14px; padding: 0 26px; margin-top: -70px; } .pmav { position: relative; flex: none; width: 140px; height: 140px; border-radius: 50%; padding: 5px; background: conic-gradient(from var(--ang), var(--ac), #fff, color-mix(in srgb, var(--ac) 50%, var(--a2)), var(--ac)); animation: spinang 4s linear infinite, pop .7s cubic-bezier(.2, 1.5, .4, 1) .1s both; box-shadow: 0 20px 50px -14px color-mix(in srgb, var(--ac) 90%, #000); } @keyframes pop { from { transform: scale(.5); opacity: 0; } } .pmav img, .pmav .ini { width: 130px; height: 130px; border-radius: 50%; object-fit: cover; display: grid; place-items: center; border: 6px solid #141018; background: linear-gradient(135deg, var(--ac), color-mix(in srgb, var(--ac) 40%, #2a1240)); color: #fff; font: 800 44px var(--disp); } .pmst { position: relative; margin-top: 84px; padding: 10px 14px; border-radius: 14px; background: rgba(17, 14, 23, .94); border: 1px solid rgba(255, 255, 255, .09); font-size: 14px; color: #e3e5e8; box-shadow: 0 14px 30px -14px rgba(0, 0, 0, .9); animation: up .5s .3s both; max-width: 340px; } .pmst::before, .pmst::after { content: ""; position: absolute; border-radius: 50%; background: rgba(17, 14, 23, .94); border: 1px solid rgba(255, 255, 255, .09); } .pmst::before { width: 14px; height: 14px; left: -9px; top: 8px; } .pmst::after { width: 7px; height: 7px; left: -17px; top: 3px; } .pmbody { position: relative; z-index: 1; padding: 14px 26px 26px; } .pmname { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; } .pmname h2 { margin: 0; font: 800 36px/1.1 var(--disp); letter-spacing: -.03em; } .pmtag { font-size: 15px; color: #b5bac1; } .drole.big { height: 30px; padding: 0 12px; font-size: 13px; border-radius: 9px; margin-top: 10px; } .pmgrid { display: grid; gap: 12px; margin-top: 18px; } .pmsec { padding: 16px 18px; border-radius: 18px; background: rgba(6, 4, 9, .5); border: 1px solid rgba(255, 255, 255, .07); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); } .pmsec small { display: block; margin-bottom: 8px; font-size: 11.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: color-mix(in srgb, var(--ac) 35%, #fff); } .pmsec p { margin: 0; font-size: 15px; line-height: 1.65; color: #e3e5e8; white-space: pre-line; overflow-wrap: anywhere; } .skl { display: flex; flex-wrap: wrap; gap: 7px; } .skl span { height: 30px; display: inline-flex; align-items: center; padding: 0 12px; border-radius: 9px; font-size: 13px; font-weight: 650; color: color-mix(in srgb, var(--ac) 40%, #fff); background: color-mix(in srgb, var(--ac) 16%, transparent); border: 1px solid color-mix(in srgb, var(--ac) 34%, transparent); } .lrows { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .lrow { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 14px; background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .08); color: var(--txt); font: inherit; text-align: left; cursor: pointer; transition: transform .2s, border-color .2s, background .2s; } .lrow:hover { transform: translateY(-2px); background: rgba(255, 255, 255, .07); } .lic { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; flex: none; color: #fff; } .lic .ico { width: 20px; height: 20px; } .lrow.discord .lic { background: #5865f2; } .lrow.discord:hover { border-color: #5865f2; } .lrow.github .lic { background: #24292f; box-shadow: 0 0 0 1px rgba(255, 255, 255, .15) inset; } .lrow.github:hover { border-color: rgba(255, 255, 255, .35); } .lrow.instagram .lic { background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fd5949 45%, #d6249f 60%, #285aeb 90%); } .lrow.instagram:hover { border-color: #d6249f; } .lrow.twitter .lic { background: #000; box-shadow: 0 0 0 1px rgba(255, 255, 255, .2) inset; } .lrow.twitter:hover { border-color: rgba(255, 255, 255, .35); } .lrow.whatsapp .lic { background: #25d366; } .lrow.whatsapp:hover { border-color: #25d366; } .ltx { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; } .ltx b { font-size: 14px; } .ltx small { font-size: 12.5px; color: var(--mut); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .lgo { font-size: 11.5px; font-weight: 700; color: var(--mut); flex: none; } .lgo .ico { width: 15px; height: 15px; } .pmcta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; } .pmcta .btn { flex: 1 1 200px; height: 48px; font-size: 14.5px; } .pmcta .btn .ico.fill { width: 18px; height: 18px; } .btn.wa { background: #1fa855; border-color: transparent; color: #fff; box-shadow: 0 12px 30px -12px rgba(37, 211, 102, .7); } .btn.wa:hover { filter: brightness(1.1); } .pmnav { position: absolute; z-index: 2; top: 14px; left: 14px; display: flex; align-items: center; gap: 4px; padding: 4px; border-radius: 30px; background: rgba(8, 5, 12, .55); border: 1px solid rgba(255, 255, 255, .16); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); font-size: 12.5px; font-weight: 700; color: #fff; } .pmnav span { padding: 0 6px; font-variant-numeric: tabular-nums; } .pmp { width: 32px; height: 32px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .1); color: #fff; display: grid; place-items: center; cursor: pointer; transition: background .2s; } .pmp:hover { background: color-mix(in srgb, var(--ac) 70%, transparent); } .pmp .ico { width: 17px; height: 17px; } .s1, .s2, .s3, .s4, .s5, .s6 { animation: up .55s cubic-bezier(.2, .8, .2, 1) both; } .s1 { animation-delay: .12s; } .s2 { animation-delay: .17s; } .s3 { animation-delay: .22s; } .s4 { animation-delay: .27s; } .s5 { animation-delay: .32s; } .s6 { animation-delay: .37s; } @keyframes up { from { opacity: 0; transform: translateY(14px); } } @media (max-width: 600px) { .pmo { padding: 10px; } .pmbn { height: 150px; } .pmhd { padding: 0 16px; margin-top: -56px; flex-direction: column; gap: 8px; } .pmav { width: 112px; height: 112px; } .pmav img, .pmav .ini { width: 102px; height: 102px; font-size: 36px; } .pmst { margin-top: 0; max-width: none; } .pmst::before, .pmst::after { display: none; } .pmbody { padding: 12px 16px 18px; } .pmname h2 { font-size: 28px; } .lrows { grid-template-columns: 1fr; } .pmnav { top: 10px; left: 10px; } .pmx { top: 10px; right: 10px; } } @media (prefers-reduced-motion: reduce) { .pm, .pmo.in .pm { transform: none; opacity: 1; } } @media (max-width: 1100px) { .pcards .dcw { animation: none; } } @media (max-width: 600px) { .pcards .dcw:nth-child(2) { margin-top: 0; } } .pmsec .ltx small { display: block; margin: 0; text-transform: none; letter-spacing: 0; font-weight: 500; font-size: 12.5px; color: var(--mut); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* ========================================================= v2.7 — KART TEMASI: OYUNCU (esports oyuncu kartı) ========================================================= */ .pcw { filter: drop-shadow(0 34px 40px rgba(0, 0, 0, .65)) drop-shadow(0 0 34px color-mix(in srgb, var(--ac, var(--a1)) 35%, transparent)); } .dcard.pcard { --cut: 26px; position: relative; display: block; padding: 1.5px; border-radius: 0; box-shadow: none; background: linear-gradient(160deg, var(--ac) 0%, color-mix(in srgb, var(--ac) 25%, #2a1240) 38%, rgba(255, 255, 255, .18) 62%, var(--ac) 100%); clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, var(--cut) 100%, 0 calc(100% - var(--cut))); aspect-ratio: 3 / 4.25; } .dcard.pcard:hover, .dcard.pcard:focus-visible { box-shadow: none; } .dcard.pcard:focus-visible { outline: none; background: linear-gradient(160deg, #fff, var(--ac)); } .pc-in { position: relative; height: 100%; overflow: hidden; background: var(--s0, #0b0710); clip-path: polygon(0 0, calc(100% - var(--cut) + .6px) 0, 100% calc(var(--cut) - .6px), 100% 100%, calc(var(--cut) - .6px) 100%, 0 calc(100% - var(--cut) + .6px)); display: flex; flex-direction: column; } /* arka plan: kartın tamamı (GIF olabilir) */ .pc-media { position: absolute; inset: 0; background: radial-gradient(90% 60% at 50% 18%, color-mix(in srgb, var(--ac) 75%, #fff 5%), transparent 70%), radial-gradient(80% 50% at 100% 100%, color-mix(in srgb, var(--ac) 40%, #2a1240), transparent 70%), linear-gradient(180deg, color-mix(in srgb, var(--ac) 45%, #120a1a), var(--s0, #0b0710) 75%); background-size: cover; background-position: center; transition: transform .8s cubic-bezier(.2, .8, .2, 1); } .dcard:hover .pc-media { transform: scale(1.07); } .pc-media:not(.img)::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(135deg, rgba(255, 255, 255, .05) 0 2px, transparent 2px 22px); -webkit-mask-image: linear-gradient(180deg, #000, transparent 70%); mask-image: linear-gradient(180deg, #000, transparent 70%); } .pc-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8, 5, 12, .15) 0%, rgba(8, 5, 12, .05) 28%, rgba(8, 5, 12, .72) 58%, rgba(8, 5, 12, .97) 82%); } .pc-lines { position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(0deg, rgba(255, 255, 255, .035) 0 1px, transparent 1px 3px); mix-blend-mode: overlay; } /* kart parlaması (koleksiyon kartı folyosu), fareyi izler */ .pc-holo { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(115deg, transparent 22%, rgba(255, 0, 150, .32) 36%, rgba(0, 240, 255, .28) 46%, rgba(255, 230, 0, .24) 54%, rgba(150, 80, 255, .3) 62%, transparent 76%); background-size: 260% 260%; background-position: var(--mx, 50%) var(--my, 50%); mix-blend-mode: color-dodge; opacity: .18; transition: opacity .35s; } .dcard:hover .pc-holo, .pc-holo.on { opacity: .7; } .pc-holo.on { animation: holo 6s ease-in-out infinite alternate; } @keyframes holo { from { background-position: 0% 0%; } to { background-position: 100% 100%; } } .pc-num { position: absolute; right: 10px; top: 18px; font: 900 92px/.8 var(--disp); letter-spacing: -.06em; color: transparent; -webkit-text-stroke: 1.5px color-mix(in srgb, var(--ac) 70%, #fff); opacity: .45; pointer-events: none; } .pc-c { position: absolute; width: 18px; height: 18px; border-color: color-mix(in srgb, var(--ac) 60%, #fff); border-style: solid; opacity: .8; pointer-events: none; } .pc-c.tl { left: 10px; top: 10px; border-width: 2px 0 0 2px; } .pc-c.br { right: 10px; bottom: 10px; border-width: 0 2px 2px 0; } .pc-top { position: relative; display: flex; align-items: center; gap: 8px; padding: 16px 16px 0 34px; min-width: 0; } .pc-brand { display: inline-flex; align-items: center; gap: 6px; flex: none; height: 24px; padding: 0 9px 0 4px; border-radius: 6px; background: rgba(8, 5, 12, .55); border: 1px solid rgba(255, 255, 255, .14); font: 800 11px var(--disp); letter-spacing: .08em; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); } .pc-brand img { width: 18px; height: 18px; border-radius: 4px; } .pc-st { display: inline-flex; align-items: center; gap: 6px; min-width: 0; height: 24px; padding: 0 9px; border-radius: 6px; background: rgba(8, 5, 12, .55); border: 1px solid rgba(255, 255, 255, .12); font-size: 11.5px; font-weight: 600; color: #e9e3f0; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); } .pc-st i { width: 7px; height: 7px; border-radius: 50%; background: var(--grn); box-shadow: 0 0 8px var(--grn); flex: none; } .pc-st span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pc-av { position: relative; display: flex; justify-content: center; margin-top: 22px; } .pc-hex { --s: 122px; position: relative; width: var(--s); height: calc(var(--s) * 1.1); padding: 4px; background: linear-gradient(160deg, #fff, var(--ac) 40%, color-mix(in srgb, var(--ac) 30%, #2a1240)); clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); transition: transform .5s cubic-bezier(.2, 1.4, .4, 1); } .dcard:hover .pc-hex { transform: translateY(-4px) scale(1.04); } .pc-hex img, .pc-hex .ini { width: 100%; height: 100%; object-fit: cover; display: grid; place-items: center; clip-path: inherit; background: linear-gradient(160deg, color-mix(in srgb, var(--ac) 85%, #fff 5%), color-mix(in srgb, var(--ac) 35%, #1a0d26)); color: #fff; font: 900 40px var(--disp); letter-spacing: -.03em; } .pc-av::after { content: ""; position: absolute; left: 50%; bottom: -10px; width: 120px; height: 24px; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--ac) 70%, transparent), transparent); filter: blur(6px); } .pc-info { position: relative; margin-top: auto; padding: 0 18px 12px; text-align: left; } .pc-role { display: inline-block; transform: skewX(-14deg); background: linear-gradient(90deg, var(--ac), color-mix(in srgb, var(--ac) 55%, var(--a2))); padding: 3px 10px; margin-left: 4px; box-shadow: 0 6px 18px -6px var(--ac); } .pc-role b { display: inline-block; transform: skewX(14deg); font: 800 10.5px var(--font); letter-spacing: .14em; text-transform: uppercase; color: #fff; white-space: nowrap; } .pc-name { margin: 8px 0 0; font: 900 31px/.95 var(--disp); letter-spacing: -.02em; text-transform: uppercase; overflow-wrap: anywhere; background: linear-gradient(180deg, #fff 30%, color-mix(in srgb, var(--ac) 45%, #fff)); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 4px 18px color-mix(in srgb, var(--ac) 60%, transparent)); } .pc-tag { margin-top: 4px; font: 600 12.5px var(--font); color: color-mix(in srgb, var(--ac) 35%, #c9bdd6); letter-spacing: .02em; } .pc-sk { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 10px; } .pc-sk span { height: 22px; display: inline-flex; align-items: center; padding: 0 8px; font-size: 11px; font-weight: 700; color: #f0e8f7; background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .12); clip-path: polygon(6px 0, 100% 0, calc(100% - 6px) 100%, 0 100%); padding: 0 11px; } .pc-bar { position: relative; display: flex; align-items: center; gap: 8px; padding: 10px 14px 12px 16px; border-top: 1px solid color-mix(in srgb, var(--ac) 40%, transparent); background: linear-gradient(90deg, color-mix(in srgb, var(--ac) 16%, rgba(8, 5, 12, .85)), rgba(8, 5, 12, .85)); } .pc-bar .socs { flex: 1; min-width: 0; gap: 5px; padding: 0; flex-wrap: nowrap; overflow: hidden; } .pc-bar .so { width: 30px; height: 30px; border-radius: 8px; flex: none; } .pc-bar .so .ico { width: 15px; height: 15px; } .pc-go { display: inline-flex; align-items: center; gap: 5px; flex: none; margin-left: auto; font: 800 11px var(--font); letter-spacing: .14em; text-transform: uppercase; color: color-mix(in srgb, var(--ac) 45%, #fff); transition: gap .2s; } .dcard:hover .pc-go { gap: 9px; } .th-oyuncu .pcards { gap: 22px; } .th-oyuncu .pcards .dcw:nth-child(2) { margin-top: 64px; } .th-oyuncu #people { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 22px; } /* pencere — oyuncu teması */ .pm.th-oyuncu { --cut: 34px; border-radius: 0; padding: 1.5px; background: linear-gradient(160deg, var(--ac), color-mix(in srgb, var(--ac) 25%, #2a1240) 40%, rgba(255, 255, 255, .2) 65%, var(--ac)); clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, var(--cut) 100%, 0 calc(100% - var(--cut))); box-shadow: none; } .pmw:has(.pm.th-oyuncu) { filter: drop-shadow(0 50px 70px rgba(0, 0, 0, .7)) drop-shadow(0 0 50px color-mix(in srgb, var(--ac, var(--a1)) 30%, transparent)); } .pm.th-oyuncu > .pmbody { background: var(--s0, #0b0710); clip-path: polygon(0 0, 100% 0, 100% 100%, calc(var(--cut) - .6px) 100%, 0 calc(100% - var(--cut) + .6px)); padding-top: 22px; } .pmhero { position: relative; overflow: hidden; height: 330px; background: var(--s0, #0b0710); clip-path: polygon(0 0, calc(100% - var(--cut) + .6px) 0, 100% calc(var(--cut) - .6px), 100% 100%, 0 100%); } .pmhero .pc-media { animation: bnIn 1.1s cubic-bezier(.2, .8, .2, 1); } .pmhero .pc-shade { background: linear-gradient(180deg, rgba(8, 5, 12, .1), rgba(8, 5, 12, .2) 40%, rgba(8, 5, 12, .9) 85%, var(--s0, #0b0710)); } .pmhero .pc-num { font-size: 150px; top: 24px; right: 20px; } .pmhero .pmnav { left: 44px; } .pmhero .pc-c.tl { left: 14px; top: 14px; width: 24px; height: 24px; } .pmhero .pc-c.br { display: none; } .pmh-row { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: flex-end; gap: 22px; padding: 0 28px 22px; } .pc-hex.big { --s: 150px; flex: none; animation: pop .7s cubic-bezier(.2, 1.5, .4, 1) .1s both; } .pc-hex.big .ini { font-size: 52px; } .pmh-txt { min-width: 0; padding-bottom: 6px; } .pmh-txt .pc-name { font-size: 48px; margin-top: 10px; } .pmh-txt .pc-tag { font-size: 14px; } .pmh-st { display: inline-flex; align-items: center; gap: 8px; margin-top: 10px; padding: 6px 11px; background: rgba(8, 5, 12, .6); border: 1px solid rgba(255, 255, 255, .12); font-size: 13px; color: #ece6f3; clip-path: polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%); padding: 6px 16px; } .pmh-st i { width: 8px; height: 8px; border-radius: 50%; background: var(--grn); box-shadow: 0 0 8px var(--grn); } .pm.th-oyuncu .pmsec { border-radius: 0; background: linear-gradient(90deg, color-mix(in srgb, var(--ac) 9%, rgba(255, 255, 255, .025)), rgba(255, 255, 255, .02)); border: 1px solid rgba(255, 255, 255, .07); border-left: 3px solid var(--ac); clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 0 100%); -webkit-backdrop-filter: none; backdrop-filter: none; } .pm.th-oyuncu .pmsec small { letter-spacing: .16em; } .pm.th-oyuncu .skl span { border-radius: 0; clip-path: polygon(7px 0, 100% 0, calc(100% - 7px) 100%, 0 100%); padding: 0 15px; } .pm.th-oyuncu .lrow { border-radius: 0; clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 0 100%); } .pm.th-oyuncu .lic { border-radius: 8px; } .pm.th-oyuncu .pmcta .btn { border-radius: 0; clip-path: polygon(12px 0, 100% 0, calc(100% - 12px) 100%, 0 100%); text-transform: uppercase; letter-spacing: .08em; font-size: 13px; } .pm.th-oyuncu .pmx { top: 16px; right: 46px; } /* ========================================================= KART TEMASI: CAM (buzlu cam, yumuşak) ========================================================= */ .dcard.gcard { position: relative; overflow: hidden; padding: 0; border-radius: 28px; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .14); box-shadow: 0 1px 0 rgba(255, 255, 255, .2) inset, 0 40px 80px -40px color-mix(in srgb, var(--ac) 80%, #000), 0 30px 60px -30px rgba(0, 0, 0, .9); -webkit-backdrop-filter: blur(22px) saturate(1.4); backdrop-filter: blur(22px) saturate(1.4); } .gc-media { position: absolute; inset: -20px; background: radial-gradient(60% 50% at 20% 10%, color-mix(in srgb, var(--ac) 70%, transparent), transparent 70%), radial-gradient(60% 50% at 90% 90%, color-mix(in srgb, var(--ac) 40%, #2e9bff 20%), transparent 70%); background-size: cover; background-position: center; filter: blur(26px) saturate(1.3); opacity: .55; } .gc-in { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 12px 18px 16px; } .gc-bn { align-self: stretch; height: 92px; border-radius: 20px; background: linear-gradient(120deg, color-mix(in srgb, var(--ac) 80%, #fff 10%), color-mix(in srgb, var(--ac) 30%, #2e9bff)); background-size: cover; background-position: center; box-shadow: 0 0 0 1px rgba(255, 255, 255, .12) inset; } .gc-av { margin-top: -46px; width: 96px; height: 96px; border-radius: 50%; padding: 4px; background: rgba(255, 255, 255, .22); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 16px 36px -14px color-mix(in srgb, var(--ac) 90%, #000); transition: transform .4s cubic-bezier(.2, 1.4, .4, 1); } .dcard:hover .gc-av { transform: scale(1.05); } .gc-av img, .gc-av .ini { width: 88px; height: 88px; border-radius: 50%; object-fit: cover; display: grid; place-items: center; background: linear-gradient(135deg, var(--ac), color-mix(in srgb, var(--ac) 40%, #2e9bff)); color: #fff; font: 800 30px var(--disp); } .gc-st { margin-top: 10px; max-width: 100%; padding: 5px 12px; border-radius: 20px; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .12); font-size: 12px; color: #ece6f3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .gcard h3 { margin: 10px 0 0; font: 800 24px/1.1 var(--disp); letter-spacing: -.025em; } .gc-tag { margin-top: 3px; font-size: 13px; color: rgba(255, 255, 255, .6); } .gc-role { margin-top: 10px; display: inline-flex; height: 26px; align-items: center; padding: 0 12px; border-radius: 20px; font-size: 12px; font-weight: 700; color: #fff; background: linear-gradient(90deg, color-mix(in srgb, var(--ac) 70%, transparent), color-mix(in srgb, var(--ac) 35%, transparent)); box-shadow: 0 0 0 1px rgba(255, 255, 255, .16) inset; } .gcard p { margin: 12px 0 0; font-size: 13.5px; line-height: 1.55; color: rgba(255, 255, 255, .78); } .gcard .socs { justify-content: center; margin-top: 14px; padding: 0; } .gcard .so { border-radius: 50%; background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .14); } .gc-more { display: inline-flex; align-items: center; gap: 6px; margin-top: 14px; padding: 8px 16px; border-radius: 20px; font-size: 12.5px; font-weight: 700; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .16); transition: gap .2s, background .2s; } .dcard:hover .gc-more { gap: 10px; background: rgba(255, 255, 255, .16); } .pm.th-cam { border-radius: 30px; } .pm.th-cam .pmring { opacity: .45; } .pm.th-cam .pmsec { border-radius: 22px; background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .12); } .pm.th-cam .pmav { background: rgba(255, 255, 255, .25); animation: pop .7s cubic-bezier(.2, 1.5, .4, 1) .1s both; } @media (max-width: 600px) { .dcard.pcard { aspect-ratio: auto; min-height: 430px; } .pmhero { height: 300px; } .pmh-row { flex-direction: column; align-items: flex-start; gap: 12px; padding: 0 18px 16px; } .pc-hex.big { --s: 104px; } .pmh-txt .pc-name { font-size: 34px; } .pmhero .pc-num { font-size: 100px; } .pm.th-oyuncu .pmx { right: 40px; } } .pm.th-oyuncu .pmnav { left: 44px; top: 16px; border-radius: 0; clip-path: polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%); padding: 4px 12px; } .pm.th-oyuncu .pmsec .ltx small { letter-spacing: 0; } @media (max-width: 600px) { .pmhero { height: auto; min-height: 300px; } .pmh-row { position: relative; padding: 78px 18px 20px; } .pmhero .pc-num { font-size: 84px; top: 70px; } } .dcard.pcard { display: flex; flex-direction: column; } .dcard.pcard > .pc-in { flex: 1; height: auto; min-height: 0; } /* ========================================================= v2.8 — KART TEMASI: Leek (sitenin kendi kart dili) ========================================================= */ .dcard.scard { --ac: var(--a1); position: relative; display: flex; flex-direction: column; padding: 10px; border-radius: 24px; overflow: hidden; background: radial-gradient(110% 60% at 100% 0%, color-mix(in srgb, var(--ac) 14%, transparent), transparent 65%), linear-gradient(180deg, #150f1d, var(--s2, #0f0a15)); border: 1px solid #261c34; box-shadow: 0 1px 0 rgba(255, 255, 255, .05) inset, 0 30px 60px -34px rgba(0, 0, 0, .95); transition: transform .35s cubic-bezier(.2, .8, .2, 1), border-color .3s, box-shadow .35s; } .dcard.scard:hover, .dcard.scard:focus-visible { transform: translateY(-6px); border-color: color-mix(in srgb, var(--ac) 45%, #261c34); box-shadow: 0 1px 0 rgba(255, 255, 255, .06) inset, 0 36px 70px -34px color-mix(in srgb, var(--ac) 75%, #000); } .dcard.scard.tilt { transform: translateY(-6px) !important; } .sc-bn { position: relative; height: 120px; border-radius: 16px; overflow: hidden; background: radial-gradient(120% 140% at 0% 0%, color-mix(in srgb, var(--ac) 85%, transparent), transparent 65%), linear-gradient(105deg, var(--red), var(--vio)); background-size: cover; background-position: center; } .sc-bn:not(.img)::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(255, 255, 255, .08) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .08) 1px, transparent 1px); background-size: 18px 18px; -webkit-mask-image: linear-gradient(110deg, transparent 20%, #000); mask-image: linear-gradient(110deg, transparent 20%, #000); } .sc-bn::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, rgba(10, 6, 14, .45)); } .sc-num { position: absolute; z-index: 1; right: 12px; top: 8px; font: 900 34px/1 var(--disp); letter-spacing: -.04em; color: rgba(255, 255, 255, .9); text-shadow: 0 4px 20px rgba(0, 0, 0, .4); } .sc-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; padding: 0 8px; margin-top: -38px; position: relative; z-index: 1; } .sc-av { flex: none; width: 82px; height: 82px; border-radius: 50%; padding: 3px; background: linear-gradient(135deg, var(--red), var(--vio)); box-shadow: 0 0 0 4px #130d1a, 0 14px 30px -12px color-mix(in srgb, var(--ac) 80%, #000); transition: transform .4s cubic-bezier(.2, 1.4, .4, 1); } .dcard.scard:hover .sc-av { transform: scale(1.05); } .sc-av img, .sc-av .ini { width: 76px; height: 76px; border-radius: 50%; object-fit: cover; display: grid; place-items: center; background: #1a1225; color: #fff; font: 800 26px var(--disp); border: 2px solid #130d1a; } .sc-row .socs { gap: 5px; padding: 0 0 4px; } .sc-row .so { width: 32px; height: 32px; border-radius: 10px; } .sc-row .so .ico { width: 15px; height: 15px; } .sc-body { display: flex; flex-direction: column; flex: 1; padding: 12px 8px 4px; } .sc-role { align-self: flex-start; font-size: 11.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; background: linear-gradient(90deg, var(--a1l), #c08bff); -webkit-background-clip: text; background-clip: text; color: transparent; } .scard h3 { margin: 6px 0 0; font: 800 26px/1.1 var(--disp); letter-spacing: -.03em; } .sc-sub { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin-top: 5px; font-size: 13px; color: var(--mut); min-width: 0; } .sc-st { display: inline-flex; align-items: center; gap: 6px; min-width: 0; color: var(--txt2); } .sc-st i { width: 6px; height: 6px; border-radius: 50%; background: var(--grn); box-shadow: 0 0 8px var(--grn); flex: none; } .scard p { margin: 12px 0 0; font-size: 13.5px; line-height: 1.6; color: var(--mut); } .scard .tags { margin-top: 12px; } .sc-more { margin-top: auto; padding-top: 14px; display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; color: var(--a1l); transition: gap .2s; } .dcard.scard:hover .sc-more { gap: 10px; } .th-site .pcards { gap: 20px; } .th-site .pcards .dcw:nth-child(2) { margin-top: 48px; } /* pencere — Leek teması */ .pm.th-site { padding: 0; border-radius: 28px; background: linear-gradient(180deg, #150f1d, var(--s2, #0f0a15)); border: 1px solid #2b2039; box-shadow: 0 50px 120px -40px rgb(var(--a1r) / .35), 0 40px 80px -40px rgba(0, 0, 0, .95); } .pm.th-site .pmring { display: none; } .pm.th-site .pmbg { inset: 0; border-radius: 28px; opacity: .35; } .pm.th-site .pmbn { margin: 12px 12px 0; height: 200px; border-radius: 20px; background: radial-gradient(120% 140% at 0% 0%, color-mix(in srgb, var(--ac) 85%, transparent), transparent 65%), linear-gradient(105deg, var(--red), var(--vio)); background-size: cover; background-position: center; } .pm.th-site .pmav { width: 128px; height: 128px; padding: 4px; background: linear-gradient(135deg, var(--red), var(--vio)); animation: pop .6s cubic-bezier(.2, 1.4, .4, 1) .1s both; box-shadow: 0 0 0 6px var(--s1, #140e1b), 0 20px 40px -14px rgb(var(--a1r) / .6); } .pm.th-site .pmav img, .pm.th-site .pmav .ini { width: 120px; height: 120px; border: 3px solid var(--s1, #140e1b); background: #1a1225; } .pm.th-site .pmhd { margin-top: -62px; padding: 0 30px; } .pm.th-site .pmst { border-radius: 20px; margin-top: 74px; } .pm.th-site .pmst::before, .pm.th-site .pmst::after { display: none; } .pm.th-site .pmbody { padding: 14px 30px 28px; } .pm.th-site .drole.big { background: none; border: 0; padding: 0; height: auto; font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; background: linear-gradient(90deg, var(--a1l), #c08bff); -webkit-background-clip: text; background-clip: text; color: transparent; } .pm.th-site .pmsec { border-radius: 18px; background: rgba(255, 255, 255, .025); border: 1px solid var(--sl, #241a31); -webkit-backdrop-filter: none; backdrop-filter: none; } .pm.th-site .pmsec small { color: var(--a1l); } .pm.th-site .skl span { color: var(--txt2); background: rgba(255, 255, 255, .04); border-color: var(--sl, #2c2240); } @media (max-width: 600px) { .th-site .pcards .dcw:nth-child(2) { margin-top: 0; } .pm.th-site .pmbn { height: 140px; } .pm.th-site .pmhd { padding: 0 18px; margin-top: -50px; } .pm.th-site .pmav { width: 104px; height: 104px; } .pm.th-site .pmav img, .pm.th-site .pmav .ini { width: 96px; height: 96px; } .pm.th-site .pmst { margin-top: 0; } .pm.th-site .pmbody { padding: 12px 18px 20px; } } .sc-row .socs { flex-wrap: nowrap; gap: 4px; min-width: 0; } .sc-row .so { width: 29px; height: 29px; border-radius: 9px; flex: none; } .sc-row .so .ico { width: 14px; height: 14px; } @media (max-width: 600px) { .sc-row .so { width: 34px; height: 34px; } .sc-row .so .ico { width: 16px; height: 16px; } } /* banner köşesinde küçük Leek rozeti (sıra numarası yerine) */ .sc-badge { position: absolute; z-index: 1; right: 10px; top: 10px; display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px 0 4px; border-radius: 9px; background: rgba(10, 6, 14, .5); border: 1px solid rgba(255, 255, 255, .16); font: 800 11.5px var(--disp); letter-spacing: .06em; color: #fff; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); } .sc-badge img { width: 19px; height: 19px; border-radius: 6px; } /* ---------- v2.9 görsel katmanları (konum + yakınlaştırma, GIF hareketli kalır) ---------- */ .fl { position: absolute; inset: 0; z-index: 0; display: block; background-size: cover; background-repeat: no-repeat; border-radius: inherit; pointer-events: none; will-change: transform; } .sc-bn, .dbn, .gc-bn, .pmbn { position: relative; overflow: hidden; } .sc-bn.img::before { display: none; } .sc-bn::after, .dbn::after, .pmbn::after { z-index: 1; } .sc-badge, .pmbn .pmx { z-index: 2; } .dcard.scard { isolation: isolate; } .sc-bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; border-radius: inherit; opacity: .5; } .sc-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(15, 10, 21, .35), rgba(15, 10, 21, .88) 45%, var(--s2, #0f0a15) 90%); } .sc-bn, .sc-row, .sc-body { position: relative; z-index: 1; } .avb { font-size: 0 !important; } /* ---------- müzik çalar (sol alt) ---------- */ .mp { --p: 0%; --b: 0%; position: fixed; z-index: 45; left: 20px; bottom: 20px; width: 340px; max-width: calc(100vw - 24px); font-size: 13px; animation: mpIn .6s cubic-bezier(.2, .9, .3, 1.1) .4s backwards; } @keyframes mpIn { from { opacity: 0; transform: translateY(20px) scale(.96); } } .mp-card { position: relative; border-radius: 18px; padding: 10px 10px 10px 10px; background: linear-gradient(160deg, rgba(28, 21, 40, .82), rgba(12, 8, 17, .9)); border: 1px solid rgba(255, 255, 255, .08); box-shadow: 0 1px 0 rgba(255, 255, 255, .06) inset, 0 24px 50px -18px rgba(0, 0, 0, .9), 0 0 0 1px rgba(0, 0, 0, .3); backdrop-filter: blur(18px) saturate(1.4); -webkit-backdrop-filter: blur(18px) saturate(1.4); overflow: hidden; transition: border-radius .3s, width .3s; } .mp-card::before { content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; background: linear-gradient(130deg, rgb(var(--a1r) / .55), transparent 35%, transparent 65%, rgb(var(--a2r) / .5)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: .5; pointer-events: none; transition: opacity .3s; } .mp.playing .mp-card::before { opacity: 1; } .mp-card::after { content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: var(--p); background: var(--grad); box-shadow: 0 0 12px rgb(var(--a1r) / .8); transition: width .25s linear; } .mp.open .mp-card::after { display: none; } .mp-top { display: flex; align-items: center; gap: 10px; } .mp button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; -webkit-tap-highlight-color: transparent; } .mp-disc { position: relative; flex: none; width: 48px; height: 48px; border-radius: 50%; } .mp-vinyl { position: absolute; inset: 0; border-radius: 50%; background: repeating-radial-gradient(circle at 50% 50%, #120c18 0 2px, #1d1526 2px 3px); box-shadow: 0 0 0 1px rgba(255, 255, 255, .08), 0 8px 18px -6px rgba(0, 0, 0, .9); animation: mpSpin 6s linear infinite; animation-play-state: paused; } .mp.playing .mp-vinyl { animation-play-state: running; } @keyframes mpSpin { to { transform: rotate(360deg); } } .mp-cover { position: absolute; inset: 9px; border-radius: 50%; background: center / cover no-repeat, var(--grad); box-shadow: 0 0 0 2px rgba(0, 0, 0, .5); } .mp-cover.none { background-image: var(--grad); } .mp-cover::after { content: ""; position: absolute; left: 50%; top: 50%; width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 50%; background: var(--s0, #0b0710); box-shadow: 0 0 0 1px rgba(255, 255, 255, .2); } .mp-eq { position: absolute; right: -3px; bottom: -3px; display: flex; align-items: flex-end; gap: 2px; height: 16px; padding: 3px 4px; border-radius: 7px; background: var(--s0, #0b0710); border: 1px solid rgba(255, 255, 255, .12); opacity: 0; transform: scale(.6); transition: .25s; } .mp.playing .mp-eq { opacity: 1; transform: none; } .mp-eq i { width: 2px; height: 30%; border-radius: 2px; background: linear-gradient(var(--pink), var(--red)); animation: mpEq .9s ease-in-out infinite alternate; animation-play-state: paused; } .mp.playing .mp-eq i, .mp-li.on .mp-eq i { animation-play-state: running; } .mp-eq i:nth-child(2) { animation-delay: -.3s; animation-duration: .7s; } .mp-eq i:nth-child(3) { animation-delay: -.6s; animation-duration: 1.1s; } .mp-eq i:nth-child(4) { animation-delay: -.15s; animation-duration: .8s; } @keyframes mpEq { 0% { height: 20%; } 50% { height: 100%; } 100% { height: 45%; } } .mp-meta { flex: 1; min-width: 0; line-height: 1.3; } .mp-t { overflow: hidden; white-space: nowrap; font-weight: 700; font-size: 13.5px; letter-spacing: -.01em; } .mp-tt { display: inline-block; } .mp-t.mq { -webkit-mask: linear-gradient(90deg, transparent, #000 8px, #000 calc(100% - 14px), transparent); mask: linear-gradient(90deg, transparent, #000 8px, #000 calc(100% - 14px), transparent); } .mp.playing .mp-t.mq .mp-tt { animation: mpMq var(--ms, 8s) ease-in-out infinite alternate; } @keyframes mpMq { 0%, 15% { transform: translateX(0); } 85%, 100% { transform: translateX(var(--o)); } } .mp-a { color: var(--mut); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .mp-ctl { display: flex; align-items: center; gap: 2px; flex: none; } .mp-ctl button, .mp-x, .mp-tg { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; color: var(--txt2); transition: background .15s, color .15s, transform .1s; } .mp-ctl button:hover, .mp-x:hover, .mp-tg:hover { background: rgba(255, 255, 255, .07); color: #fff; } .mp-ctl button:active { transform: scale(.9); } .mp-ctl .ico { width: 15px; height: 15px; } .mp-ctl .mp-play { width: 38px; height: 38px; border-radius: 50%; background: #fff; color: var(--s0, #0b0710); box-shadow: 0 6px 18px -6px rgba(255, 255, 255, .5); } .mp-ctl .mp-play:hover { background: #fff; color: var(--s0, #0b0710); transform: scale(1.06); } .mp-ctl .mp-play .ico { width: 16px; height: 16px; } .mp.wait .mp-play { animation: mpPulse 1.6s ease-in-out infinite; } @keyframes mpPulse { 50% { box-shadow: 0 0 0 7px rgba(255, 255, 255, .12), 0 6px 18px -6px rgba(255, 255, 255, .5); } } .mp.single [data-a="prev"], .mp.single [data-a="next"] { display: none; } .mp-x .ico { transition: transform .3s; transform: rotate(180deg); } .mp.open .mp-x .ico { transform: none; } /* ilerleme + açılır kısım */ .mp-bar, .mp-more { display: none; } .mp.open .mp-bar { display: flex; align-items: center; gap: 10px; padding: 12px 4px 2px; animation: mpFade .3s; } .mp.open .mp-more { display: block; animation: mpFade .35s; } @keyframes mpFade { from { opacity: 0; transform: translateY(6px); } } .mp-time { font: 600 11px/1 var(--font); font-variant-numeric: tabular-nums; color: var(--mut); min-width: 30px; } .mp-time:last-child { text-align: right; } .mp-seek { position: relative; flex: 1; height: 18px; cursor: pointer; touch-action: none; } .mp-seek::before, .mp-buf, .mp-fill { content: ""; position: absolute; left: 0; top: 50%; height: 4px; margin-top: -2px; border-radius: 4px; } .mp-seek::before { right: 0; background: rgba(255, 255, 255, .1); } .mp-buf { width: var(--b); background: rgba(255, 255, 255, .14); } .mp-fill { width: var(--p); background: var(--grad); } .mp-knob { position: absolute; top: 50%; left: var(--p); width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 4px rgb(var(--a1r) / .25); transform: scale(0); transition: transform .15s; } .mp-seek:hover .mp-knob, .mp.drag .mp-knob, .mp-seek:focus-visible .mp-knob { transform: scale(1); } .mp-row { display: flex; align-items: center; gap: 4px; padding: 6px 2px 8px; } .mp-tg { position: relative; color: var(--mut); } .mp-tg .ico { width: 16px; height: 16px; } .mp-tg[aria-pressed="true"] { color: var(--a1l); } .mp-tg[aria-pressed="true"]::after { content: ""; position: absolute; bottom: 3px; left: 50%; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: currentColor; } .mp-tg small { position: absolute; top: 3px; right: 3px; font-size: 9px; font-weight: 800; line-height: 1; } .mp-vol { --v: 50%; -webkit-appearance: none; appearance: none; width: 96px; height: 18px; background: transparent; cursor: pointer; } .mp-vol::-webkit-slider-runnable-track { height: 4px; border-radius: 4px; background: linear-gradient(90deg, #fff var(--v), rgba(255, 255, 255, .12) var(--v)); } .mp-vol::-moz-range-track { height: 4px; border-radius: 4px; background: linear-gradient(90deg, #fff var(--v), rgba(255, 255, 255, .12) var(--v)); } .mp-vol::-webkit-slider-thumb { -webkit-appearance: none; width: 12px; height: 12px; margin-top: -4px; border-radius: 50%; background: #fff; border: 0; box-shadow: 0 2px 6px rgba(0, 0, 0, .5); } .mp-vol::-moz-range-thumb { width: 12px; height: 12px; border-radius: 50%; background: #fff; border: 0; } .mp-list { max-height: 228px; overflow-y: auto; margin: 0 -4px; padding: 6px 4px 2px; border-top: 1px solid rgba(255, 255, 255, .06); scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .15) transparent; } .mp.single .mp-list { display: none; } .mp-li { width: 100%; display: flex; align-items: center; gap: 10px; padding: 6px 8px !important; border-radius: 10px; text-align: left; transition: background .15s; } .mp-li:hover { background: rgba(255, 255, 255, .05); } .mp-li.on { background: linear-gradient(90deg, rgb(var(--a1r) / .16), rgb(var(--a2r) / .08)); } .mp-li .n { width: 18px; flex: none; text-align: center; font-size: 11.5px; font-weight: 700; color: var(--mut2); font-variant-numeric: tabular-nums; } .mp-li .mp-eq.s { position: static; display: inline-flex; opacity: 1; transform: none; background: none; border: 0; padding: 0; height: 12px; } .mp-lc { flex: none; width: 34px; height: 34px; border-radius: 8px; background: center / cover no-repeat, var(--raise); display: grid; place-items: center; color: var(--mut); } .mp-lc .ico { width: 15px; height: 15px; } .mp-li .tx { min-width: 0; display: flex; flex-direction: column; line-height: 1.3; } .mp-li .tx b { font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .mp-li.on .tx b { color: #fff; } .mp-li .tx small { font-size: 11.5px; color: var(--mut); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .mp-li .tx small:empty { display: none; } /* küçük mod: sadece plak */ .mp.mini { width: auto; } .mp.mini .mp-card { padding: 6px; border-radius: 50%; } .mp.mini .mp-card::after { display: none; } .mp.mini .mp-meta, .mp.mini .mp-ctl, .mp.mini .mp-x { display: none; } .mp.mini .mp-disc { width: 52px; height: 52px; } .mp-hint { position: absolute; left: 8px; bottom: calc(100% + 10px); display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px; border-radius: 10px; background: #fff; color: var(--s0, #0b0710); font-size: 12px; font-weight: 700; white-space: nowrap; box-shadow: 0 10px 24px -8px rgba(0, 0, 0, .8); animation: mpFade .4s; pointer-events: none; } .mp-hint::after { content: ""; position: absolute; left: 22px; top: 100%; border: 6px solid transparent; border-top-color: #fff; } .mp-hint .ico { width: 14px; height: 14px; } .mp.mini .mp-hint { display: none; } @media (max-width: 820px) { .mp { left: 12px; bottom: 12px; width: min(340px, calc(100vw - 86px)); } .mp.open { width: calc(100vw - 24px); z-index: 50; } .mp-ctl [data-a="prev"] { display: none; } } @media (prefers-reduced-motion: reduce) { .mp, .mp-vinyl, .mp-eq i, .mp-tt { animation: none !important; } } body.has-mp .foot { padding-bottom: 110px; } /* müzik: küçült butonu + Spotify */ .mp-top .mp-x { width: 30px; } .mp-min .ico { transform: none !important; } .mp.mini .mp-spb { display: none; } .mp.sp { width: 370px; } .mp.sp .mp-t { overflow: hidden; text-overflow: ellipsis; } .mp.sp.open { width: 380px; } .mp-cover.spc { display: grid; place-items: center; background: #1ed760; color: #000; } .mp-cover.spc::after { display: none; } .mp-cover.spc .ico { width: 18px; height: 18px; } .mp.sp .mp-vinyl { animation: none; } .mp.sp.used .mp-vinyl { animation: mpSpin 6s linear infinite; } .mp.sp .mp-card::after { display: none; } .mp.sp .mp-card::before { opacity: 1; background: linear-gradient(130deg, rgba(30, 215, 96, .6), transparent 40%, transparent 65%, rgb(var(--a2r) / .45)); } .mp-spb { flex: none; display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 13px 0 11px !important; border-radius: 17px; background: #1ed760 !important; color: #000 !important; font-weight: 800; font-size: 12.5px; transition: transform .12s, filter .15s; } .mp-spb:hover { transform: scale(1.04); filter: brightness(1.08); } .mp-spb .ico { width: 12px; height: 12px; } .mp.sp.open .mp-spb { display: none; } .mp-spf { height: 0; overflow: hidden; transition: height .35s cubic-bezier(.2, .8, .2, 1); } .mp.sp.open .mp-spf { height: 362px; padding-top: 10px; } .mp-spf iframe { display: block; width: 100%; height: 352px; border: 0; border-radius: 12px; background: #121212; } @media (max-width: 820px) { .mp.sp { width: min(330px, calc(100vw - 86px)); } .mp.sp.open { width: calc(100vw - 24px); } } /* ---------- rozetler + canlı Discord durumu ---------- */ .bdgs-in { margin: 9px 0 0; font-size: 0; line-height: 0; letter-spacing: 0; } .pmbdg { margin-top: 10px; } .sc-av, .pc-av, .gc-av, .dav { position: relative; } .lsd { position: absolute; right: 2px; bottom: 2px; width: 16px; height: 16px; border-radius: 50%; border: 3.5px solid #0e0914; z-index: 3; box-shadow: 0 0 10px rgba(0, 0, 0, .5); } .pc-av .lsd { right: 8%; bottom: 8%; } .lvc { display: inline-flex; align-items: center; gap: 7px; max-width: 100%; margin-top: 8px; padding: 4px 10px 4px 8px; border-radius: 8px; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .07); color: var(--txt2); font-size: 12.5px; font-weight: 500; } .lvc span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; } .lvc .ico { width: 14px; height: 14px; flex: none; } .lvc.k-spotify .ico { color: #1ed760; } .lvc.k-game .ico { color: #a99bff; } .lvc > i { width: 8px; height: 8px; border-radius: 50%; flex: none; } .lvc .lyem { width: 16px; height: 16px; } .pmlive small { display: flex; align-items: center; gap: 6px; } .pml-s { display: inline-flex; align-items: center; gap: 6px; text-transform: none; letter-spacing: 0; font-weight: 600; color: var(--txt2); } .pml-s i { width: 8px; height: 8px; border-radius: 50%; } .pml-a { display: flex; flex-direction: column; gap: 8px; } .pml-a:empty { display: none; } .lyact { display: flex; gap: 12px; align-items: center; padding: 10px; border-radius: 12px; background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .06); } .lyimg { position: relative; flex: none; width: 52px; height: 52px; border-radius: 10px; background: rgba(255, 255, 255, .06); display: grid; place-items: center; color: var(--mut); } .lyimg img:first-child { width: 100%; height: 100%; border-radius: inherit; object-fit: cover; } .lysm { position: absolute; right: -5px; bottom: -5px; width: 20px; height: 20px; border-radius: 50%; border: 3px solid #120c18; } .lyart { width: 52px; height: 52px; border-radius: 10px; flex: none; object-fit: cover; } .lytx { min-width: 0; flex: 1; display: flex; flex-direction: column; line-height: 1.35; } .lytx small { display: flex; align-items: center; gap: 6px; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--mut); } .lytx small .ico { width: 13px; height: 13px; color: #1ed760; } .lytx b { font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .lytx span { font-size: 12.5px; color: var(--txt2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .lytx .lyt { color: var(--mut); } .lybar { height: 4px; margin-top: 7px; border-radius: 4px; background: rgba(255, 255, 255, .12); overflow: hidden; } .lybar i { display: block; height: 100%; width: 0; background: #1ed760; border-radius: inherit; transition: width 1s linear; } .lyem { width: 16px; height: 16px; vertical-align: -3px; } /* alt bilgideki >_ (terminal) düğmesi */ .ft-term { font: 600 12px ui-monospace, Consolas, monospace; color: inherit; background: transparent; border: 1px solid rgb(255 255 255 / .12); border-radius: 7px; padding: 3px 8px; cursor: pointer; } .ft-term:hover { color: var(--txt); border-color: rgb(var(--a1r) / .6); } .sh-link { color: var(--a1l); text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; } /* duyuru şeridi (Panel → Nabız → Duyurular, "ana sayfada göster") */ .ntc { position: absolute; top: 84px; left: 50%; transform: translateX(-50%); z-index: 3; display: flex; align-items: center; gap: 12px; max-width: calc(var(--w) - 40px); margin: 0; padding: 11px 14px 11px 16px; border-radius: 13px; border: 1px solid rgb(255 255 255 / .12); background: rgb(17 12 23 / .86); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); font-size: 13.5px; width: calc(100% - 40px); } .ntc[hidden] { display: none; } .ntc .nk { flex: none; padding: 3px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 600; color: #0b0810; background: #5ac8ff; } .ntc.k-bakim .nk { background: #ffc24b; } .ntc.k-kesinti .nk { background: #ff5c7a; } .ntc.k-cozuldu .nk { background: #2ee59d; } .ntc .nt { min-width: 0; flex: 1; color: var(--txt2); } .ntc .nt b { color: var(--txt); font-weight: 600; margin-right: 8px; } .ntc a { flex: none; color: var(--txt2); font-size: 12.5px; text-decoration: underline; text-underline-offset: 3px; } .ntc button { flex: none; width: 26px; height: 26px; border-radius: 8px; border: 0; background: transparent; color: var(--mut); font-size: 17px; line-height: 1; cursor: pointer; } .ntc button:hover { color: var(--txt); background: rgb(255 255 255 / .08); } @media (max-width: 640px) { .ntc { flex-wrap: wrap; } .ntc .nt { flex-basis: 100%; order: 3; } } /* ---- mağaza vitrini (public/js/magaza.js) ---- */ .shop { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 16px; align-items: stretch; } .shop.one { grid-template-columns: minmax(290px, 440px); justify-content: center; } .shc { --c: var(--vio); position: relative; display: flex; flex-direction: column; padding: 26px 24px 22px; border-radius: 22px; background: radial-gradient(120% 60% at 100% 0%, color-mix(in srgb, var(--c) 14%, transparent), transparent 62%), linear-gradient(180deg, var(--s1, #140e1b), var(--s2, #0f0a15)); border: 1px solid var(--sl, #241a31); transition: transform .25s, border-color .25s, box-shadow .3s; } .shc:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--c) 45%, var(--sl, #241a31)); box-shadow: 0 30px 60px -32px color-mix(in srgb, var(--c) 70%, #000); } .shc.top { border-color: color-mix(in srgb, var(--c) 55%, var(--sl, #241a31)); box-shadow: 0 0 0 1px color-mix(in srgb, var(--c) 30%, transparent) inset, 0 30px 70px -36px color-mix(in srgb, var(--c) 80%, #000); } .shc-rb { position: absolute; top: -11px; left: 22px; padding: 4px 11px; border-radius: 999px; font-size: 11.5px; font-weight: 700; letter-spacing: .02em; color: #fff; background: linear-gradient(135deg, var(--c), color-mix(in srgb, var(--c) 55%, #6a1fd0)); box-shadow: 0 8px 20px -8px var(--c); } .shc h3 { margin: 0; font: 800 22px/1.2 var(--disp); letter-spacing: -.02em; } .shc-d { margin: 8px 0 0; color: var(--mut); font-size: 14px; line-height: 1.6; } .shc-pl { display: flex; gap: 3px; margin-top: 18px; padding: 3px; border-radius: 11px; background: rgba(255, 255, 255, .035); border: 1px solid #2a2039; } .shc-pl button { flex: 1; height: 32px; border: 0; border-radius: 8px; background: none; color: var(--mut); font: 600 12.5px var(--font, inherit); cursor: pointer; white-space: nowrap; } .shc-pl button:hover { color: var(--txt); } .shc-pl button.on { background: #251b34; color: #fff; box-shadow: 0 1px 0 rgba(255, 255, 255, .06) inset; } .shc-pr { display: flex; align-items: baseline; gap: 8px; margin-top: 20px; } .shc-pr b { font: 900 38px/1 var(--disp); letter-spacing: -.03em; font-variant-numeric: tabular-nums; } .shc-pr span { color: var(--mut); font-size: 14px; } .shc-sub { display: flex; align-items: center; gap: 8px; min-height: 22px; margin-top: 6px; font-size: 13px; color: var(--mut); } .shc-sub em { font-style: normal; font-weight: 700; font-size: 11.5px; padding: 2px 8px; border-radius: 999px; color: #b8ffd6; background: rgba(46, 229, 157, .12); border: 1px solid rgba(46, 229, 157, .25); } .shc-f { list-style: none; margin: 18px 0 0; padding: 18px 0 0; border-top: 1px solid rgba(255, 255, 255, .06); display: grid; gap: 10px; flex: 1; align-content: start; } .shc-f li { display: flex; gap: 10px; font-size: 14px; line-height: 1.45; color: var(--txt2); } .shc-f .ico { flex: none; width: 17px; height: 17px; margin-top: 1px; color: color-mix(in srgb, var(--c) 70%, #fff); } .shc-a { display: flex; flex-direction: column; align-items: stretch; gap: 10px; margin-top: 22px; } .shc-a .btn { width: 100%; } .shc-r { align-self: center; font-size: 13px; color: var(--mut); text-decoration: underline; text-underline-offset: 3px; } .shc-r:hover { color: var(--txt); } .shop-ft { margin: 22px auto 0; max-width: 70ch; text-align: center; font-size: 13px; line-height: 1.7; color: var(--mut); } .shop-bar:empty { display: none; } @media (max-width: 640px) { .shc { padding: 24px 20px 20px; } .shc-pr b { font-size: 34px; } } /* mağaza: rozetler, kampanya, görsel, önizleme, görünümler, SSS */ .shop.c2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .shop.c3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } @media (max-width: 960px) { .shop.c3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 640px) { .shop.c2, .shop.c3 { grid-template-columns: 1fr; } } .shc-rb { z-index: 2; } .shc-rb.b-yeni { background: linear-gradient(135deg, #2ee59d, #12a874); color: #04140d; box-shadow: 0 8px 20px -8px #2ee59d; } .shc-rb.b-indirim { background: linear-gradient(135deg, #ff3355, #c4122f); box-shadow: 0 8px 20px -8px #ff3355; } .shc-rb.b-ozel { background: linear-gradient(135deg, #ffc24b, #e08a00); color: #1d1200; box-shadow: 0 8px 20px -8px #ffc24b; } .shc-im { margin: -26px -24px 20px; height: 150px; border-radius: 21px 21px 0 0; overflow: hidden; background: color-mix(in srgb, var(--c) 18%, var(--s2, #0f0a15)); } .shc-im img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s cubic-bezier(.2, .8, .2, 1); } .shc:hover .shc-im img { transform: scale(1.04); } .shc.img .shc-rb { top: 12px; left: 14px; } .shc-pr s { align-self: center; color: var(--mut); font-size: 17px; font-weight: 600; text-decoration-thickness: 2px; text-decoration-color: color-mix(in srgb, #ff3355 75%, transparent); font-variant-numeric: tabular-nums; } .shc.sale .shc-pr b { color: #ffd2da; } .shc-cd { display: inline-flex; align-self: flex-start; align-items: center; gap: 7px; margin-top: 12px; padding: 5px 11px 5px 9px; border-radius: 999px; font-size: 12.5px; font-weight: 600; color: #ffc9d3; background: rgba(255, 51, 85, .1); border: 1px solid rgba(255, 51, 85, .28); } .shc-cd .ico { width: 15px; height: 15px; } .shc-demo { width: 100%; gap: 8px; background: rgba(88, 101, 242, .12); border: 1px solid rgba(88, 101, 242, .4); color: #dfe2ff; } .shc-demo:hover { background: rgba(88, 101, 242, .26); border-color: #5865f2; color: #fff; } .shc-demo .ico { width: 18px; height: 18px; } /* görünümler */ .shop.st-cam .shc { background: linear-gradient(160deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .02)); border-color: rgba(255, 255, 255, .1); -webkit-backdrop-filter: blur(16px) saturate(140%); backdrop-filter: blur(16px) saturate(140%); } .shop.st-cam .shc.top { border-color: color-mix(in srgb, var(--c) 50%, rgba(255, 255, 255, .1)); } .shop.st-cizgi .shc { background: transparent; border: 1px solid var(--line2); box-shadow: none; } .shop.st-cizgi .shc:hover { box-shadow: none; border-color: var(--c); } .shop.st-cizgi .shc.top { border: 2px solid var(--c); box-shadow: none; } .shop.st-cizgi .shc-im { margin-top: -26px; } .shop.st-neon .shc { background: var(--s0, #0b0710); border-color: color-mix(in srgb, var(--c) 60%, transparent); box-shadow: 0 0 0 1px color-mix(in srgb, var(--c) 35%, transparent) inset, 0 0 26px -6px color-mix(in srgb, var(--c) 65%, transparent); } .shop.st-neon .shc:hover { box-shadow: 0 0 0 1px var(--c) inset, 0 0 44px -4px color-mix(in srgb, var(--c) 80%, transparent); } .shop.st-neon .shc h3, .shop.st-neon .shc-pr b { text-shadow: 0 0 18px color-mix(in srgb, var(--c) 70%, transparent); } /* SSS */ .shop-faq { max-width: 760px; margin: 40px auto 0; } .shop-faq[hidden] { display: none; } .shop-faq h3 { margin: 0 0 14px; text-align: center; font: 800 24px/1.2 var(--disp); letter-spacing: -.02em; } .shop-faq details { border: 1px solid var(--line); border-radius: 14px; background: rgba(255, 255, 255, .02); transition: border-color .2s, background .2s; } .shop-faq details + details { margin-top: 8px; } .shop-faq details[open] { border-color: var(--line2); background: rgba(255, 255, 255, .035); } .shop-faq summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 15px 18px; cursor: pointer; font-weight: 650; font-size: 15px; } .shop-faq summary::-webkit-details-marker { display: none; } .shop-faq summary::after { content: "+"; flex: none; width: 24px; height: 24px; display: grid; place-items: center; border-radius: 7px; background: rgba(255, 255, 255, .05); color: var(--mut); font-size: 17px; transition: transform .25s; } .shop-faq details[open] summary::after { transform: rotate(45deg); color: var(--txt); } .shop-faq summary:focus-visible { outline: 2px solid var(--a2); outline-offset: 2px; border-radius: 14px; } .shop-faq p { margin: 0; padding: 0 18px 16px; color: var(--mut); font-size: 14.5px; line-height: 1.65; white-space: pre-line; } @media (max-width: 640px) { .shc-im { margin: -24px -20px 18px; height: 130px; } } /* ========================================================= v5.8 · düzen: gizli bölümler, ana ekran ve arka plan ayarları ========================================================= */ main > section.off, .links a.off { display: none !important; } .h-nolive #live, .h-nonums #nums, .h-nocta2 #cta-2 { display: none !important; } .fx-noorbs .bg i { display: none; } .fx-nogrid .bg .grid { display: none; } .fx-nospot .bg .spot { display: none; } .h-orta .hero { grid-template-columns: 1fr; text-align: center; justify-items: center; } .h-orta .lead { margin-left: auto; margin-right: auto; } .h-orta .cta, .h-orta .nums { justify-content: center; } .h-orta:not(.nohr) .hero .hr { width: min(760px, 100%); } /* ---- bloklar ---- */ .blk { --bc: var(--a1); } .blk.bt-bosluk { padding: 0; } .bk-box { position: relative; padding: clamp(28px, 5vw, 56px); border-radius: 28px; border: 1px solid var(--line); background: linear-gradient(180deg, rgba(255, 255, 255, .03), rgba(255, 255, 255, .01)); } .bs-vurgu .bk-box { border-color: color-mix(in srgb, var(--bc) 40%, var(--line)); background: radial-gradient(120% 90% at 0% 0%, color-mix(in srgb, var(--bc) 22%, transparent), transparent 60%), radial-gradient(90% 90% at 100% 100%, color-mix(in srgb, var(--bc) 14%, transparent), transparent 60%), var(--s2, #0f0a15); box-shadow: 0 40px 90px -50px color-mix(in srgb, var(--bc) 80%, #000); } .bk-box > .sh { margin-bottom: 30px; } .bk-txt { max-width: 760px; margin: 0 auto; } .bk-txt.al-orta { text-align: center; } .bk-txt h2 { margin: 12px 0 0; font: 800 clamp(30px, 4vw, 44px)/1.1 var(--disp); letter-spacing: -.03em; } .bk-txt .kick { color: color-mix(in srgb, var(--bc) 60%, #fff); } .bk-txt.al-sol .kick::before { display: none; } .bk-p { margin-top: 16px; color: var(--txt2); font-size: 16.5px; line-height: 1.75; } .bk-p p { margin: 0 0 14px; } .bk-p p:last-child { margin: 0; } .bk-p b { color: var(--txt); } .bk-btns { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; } .al-orta .bk-btns { justify-content: center; } .bk-grid { display: grid; gap: 14px; } .bk-grid.c2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .bk-grid.c3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .bk-grid.c4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .bk-f { padding: 24px 22px; border-radius: 20px; border: 1px solid var(--line); background: linear-gradient(180deg, var(--s1, #130d19), var(--s2, #0f0a15)); transition: border-color .25s, transform .25s; } .bk-f:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--bc) 45%, var(--line)); } .bk-ic { display: grid; place-items: center; width: 46px; height: 46px; margin-bottom: 16px; border-radius: 14px; font-size: 22px; background: color-mix(in srgb, var(--bc) 14%, transparent); border: 1px solid color-mix(in srgb, var(--bc) 30%, transparent); } .bk-f h3 { margin: 0; font: 750 18px/1.3 var(--disp); letter-spacing: -.015em; } .bk-f p { margin: 8px 0 0; color: var(--mut); font-size: 14.5px; line-height: 1.6; } .bk-img { margin: 0 auto; max-width: 960px; } .bk-img.wide { max-width: none; } .bk-img img { display: block; width: 100%; height: auto; border: 1px solid var(--line); } .bk-img.round img { border-radius: 22px; } .bk-img figcaption { margin-top: 12px; text-align: center; color: var(--mut); font-size: 13.5px; } .bk-vid { position: relative; max-width: 960px; margin: 0 auto; aspect-ratio: 16 / 9; border-radius: 22px; overflow: hidden; border: 1px solid var(--line); background: #000; box-shadow: 0 40px 90px -50px rgba(0, 0, 0, .9); } .bk-vid iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } .bk-nums { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 14px; } .bk-nums div { padding: 26px 22px; border-radius: 20px; border: 1px solid var(--line); background: rgba(255, 255, 255, .02); text-align: center; } .bk-nums b { display: block; font: 900 clamp(36px, 4.6vw, 54px)/1 var(--disp); letter-spacing: -.04em; background: linear-gradient(120deg, #fff, color-mix(in srgb, var(--bc) 70%, #fff)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; font-variant-numeric: tabular-nums; } .bk-nums span { display: block; margin-top: 10px; font-size: 12.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--mut2, var(--mut)); } .bk-faq { margin-top: 0; } .bk-cta { display: flex; align-items: center; justify-content: space-between; gap: 28px; flex-wrap: wrap; padding: clamp(28px, 5vw, 48px); border-radius: 28px; border: 1px solid color-mix(in srgb, var(--bc) 40%, var(--line)); background: radial-gradient(100% 140% at 0% 0%, color-mix(in srgb, var(--bc) 26%, transparent), transparent 60%), linear-gradient(120deg, #150d1c, #0e0913); } .bs-kutu .bk-cta, .bs-vurgu .bk-cta { padding: 0; border: 0; background: none; } .bk-cta h2 { margin: 10px 0 0; font: 800 clamp(26px, 3.4vw, 38px)/1.12 var(--disp); letter-spacing: -.03em; } .bk-cta .kick::before, .bk-cta .kick::after { display: none; } .bk-cta p { margin: 10px 0 0; max-width: 56ch; color: var(--txt2); line-height: 1.6; } .bk-cta .bk-btns { margin: 0; } @media (max-width: 860px) { .bk-grid.c3, .bk-grid.c4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 560px) { .bk-grid.c2, .bk-grid.c3, .bk-grid.c4 { grid-template-columns: 1fr; } .bk-cta .bk-btns, .bk-cta .bk-btns .btn { width: 100%; } } /* ---- panelin canlı önizlemesi (/?onizleme=1) ---- */ .pv .editfab { display: none !important; } .pv-edit main > section { position: relative; } .pv-edit main > section:not(#ust)::after { content: ""; position: absolute; inset: 0 -10px; border-radius: 18px; border: 1.5px dashed transparent; pointer-events: none; transition: border-color .15s, background .15s; } .pv-edit main > section:hover::after { border-color: rgb(var(--a2r) / .55); background: rgb(var(--a2r) / .03); } .pv-edit main > section.off:not([hidden]) { display: block !important; opacity: .38; } .pv-edit main > section.off:not([hidden]):hover { opacity: .7; } .pv-edit main > section { cursor: pointer; } .pvbar { position: absolute; z-index: 30; left: 0; top: 14px; display: flex; align-items: center; gap: 4px; padding: 4px 4px 4px 6px; border-radius: 10px; background: #1c1428f2; border: 1px solid rgb(var(--a2r) / .5); box-shadow: 0 10px 30px -10px #000; font: 600 12px/1 var(--font); color: var(--txt); opacity: 0; transform: translateY(-4px); transition: opacity .15s, transform .15s; cursor: default; } #ust > .pvbar { top: 6px; } .pv-edit main > section:hover > .pvbar, .pvbar:focus-within { opacity: 1; transform: none; } .pvbar b { padding: 0 6px 0 2px; white-space: nowrap; } .pvbar em { font-style: normal; font-size: 10.5px; padding: 3px 6px; border-radius: 6px; background: rgba(255, 255, 255, .08); color: var(--mut); } .pvbar button { height: 26px; min-width: 26px; padding: 0 7px; border: 0; border-radius: 7px; background: rgba(255, 255, 255, .06); color: var(--txt); font: 600 12px var(--font); cursor: pointer; } .pvbar button:hover { background: rgb(var(--a2r) / .5); } .pvbar button[data-pv="edit"] { background: rgb(var(--a2r) / .35); } .pvh { display: grid; place-items: center; width: 22px; height: 26px; border-radius: 6px; cursor: grab; color: var(--mut); font-size: 15px; touch-action: none; user-select: none; } .pvh:hover { color: #fff; background: rgba(255, 255, 255, .08); } .pv-dragging, .pv-dragging * { cursor: grabbing !important; user-select: none; } section.pv-drag { opacity: .45; } .pvdrop { position: absolute; left: 4%; right: 4%; z-index: 50; height: 4px; border-radius: 4px; background: var(--grad, linear-gradient(90deg, var(--a1), var(--a2))); box-shadow: 0 0 18px rgb(var(--a2r) / .8); pointer-events: none; } @keyframes pvflash { 0% { box-shadow: 0 0 0 0 rgb(var(--a2r) / .0); } 30% { box-shadow: 0 0 0 4px rgb(var(--a2r) / .55); } 100% { box-shadow: 0 0 0 0 rgb(var(--a2r) / 0); } } section.pv-flash { animation: pvflash 1.4s ease-out; border-radius: 18px; } .bk-ph { display: grid; place-items: center; min-height: 160px; border-radius: 22px; border: 1.5px dashed var(--line2); color: var(--mut); font-size: 14px; } /* ---------- v5.8 bloklar: zaman çizelgesi, adımlar, galeri, sunucular, Discord kartı, yorumlar ---------- */ .bk-tl { position: relative; max-width: 760px; margin: 0 auto; padding: 0 0 0 34px; list-style: none; } .bk-tl::before { content: ""; position: absolute; left: 9px; top: 8px; bottom: 8px; width: 2px; border-radius: 2px; background: linear-gradient(180deg, var(--bc), color-mix(in srgb, var(--bc) 15%, transparent)); } .bk-tl li { position: relative; padding: 0 0 30px; } .bk-tl li:last-child { padding-bottom: 0; } .bk-tld { position: absolute; left: -34px; top: 4px; width: 20px; height: 20px; border-radius: 50%; background: var(--bg); border: 2px solid var(--bc); box-shadow: 0 0 0 5px color-mix(in srgb, var(--bc) 14%, transparent); } .bk-tl li:last-child .bk-tld { background: var(--bc); box-shadow: 0 0 0 5px color-mix(in srgb, var(--bc) 22%, transparent), 0 0 22px var(--bc); } .bk-tl time { display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: color-mix(in srgb, var(--bc) 65%, #fff); } .bk-tl h3 { margin: 4px 0 0; font: 750 20px/1.3 var(--disp); letter-spacing: -.02em; } .bk-tl p { margin: 6px 0 0; color: var(--txt2); font-size: 15px; line-height: 1.65; } .bk-steps { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; counter-reset: s; } .bk-steps.n2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .bk-steps.n3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .bk-steps.n4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .bk-steps li { position: relative; padding: 26px 22px 24px; border-radius: 20px; border: 1px solid var(--line); background: linear-gradient(180deg, var(--s1, #130d19), var(--s2, #0f0a15)); } .bk-steps li:not(:last-child)::after { content: ""; position: absolute; top: 46px; right: -14px; width: 14px; height: 2px; background: color-mix(in srgb, var(--bc) 50%, var(--line)); } .bk-sn { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 13px; font: 800 18px/1 var(--disp); color: #fff; background: linear-gradient(135deg, var(--bc), color-mix(in srgb, var(--bc) 40%, #1a0f22)); box-shadow: 0 10px 24px -10px var(--bc); } .bk-steps small { display: block; margin-top: 16px; font-size: 11.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--mut); } .bk-steps h3 { margin: 4px 0 0; font: 750 18px/1.3 var(--disp); letter-spacing: -.015em; } .bk-steps p { margin: 8px 0 0; color: var(--mut); font-size: 14.5px; line-height: 1.6; } .bk-gal { display: grid; gap: 12px; } .bk-gal.c2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .bk-gal.c3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .bk-gal.c4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .bk-gal figure { margin: 0; min-width: 0; } .bk-gi { display: block; width: 100%; padding: 0; border: 1px solid var(--line); border-radius: 18px; overflow: hidden; background: #0d0912; cursor: zoom-in; aspect-ratio: 4 / 3; } .bk-gi img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s cubic-bezier(.2, .8, .2, 1); } .bk-gi:hover img { transform: scale(1.05); } .bk-gal figcaption { margin-top: 8px; font-size: 13px; color: var(--mut); } .bk-svg { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; } .bk-sv { display: flex; align-items: center; gap: 13px; padding: 14px 16px; border-radius: 18px; border: 1px solid var(--line); background: rgba(255, 255, 255, .02); transition: transform .2s, border-color .2s, background .2s; min-width: 0; } .bk-sv:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--bc) 45%, var(--line)); background: rgba(255, 255, 255, .04); } .bk-svi { flex: none; width: 50px; height: 50px; border-radius: 15px; overflow: hidden; display: grid; place-items: center; background: #5865f2; } .bk-svi img { width: 100%; height: 100%; object-fit: cover; } .bk-svi b { font: 800 20px var(--disp); color: #fff; } .bk-svt { display: grid; min-width: 0; } .bk-svt b { display: flex; align-items: center; gap: 6px; font-size: 15px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .bk-svt small { font-size: 12.5px; color: var(--mut); white-space: nowrap; } .bk-svt em { font-style: normal; color: #6ee7a8; } .bk-vf { display: inline-block; flex: none; width: 15px; height: 15px; border-radius: 50%; background: #23a55a url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 9px no-repeat; vertical-align: middle; } .bk-mq { overflow: hidden; -webkit-mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); } .bk-mqt { display: flex; gap: 12px; width: max-content; animation: bkmq calc(var(--n, 6) * 5s) linear infinite; } .bk-mq:hover .bk-mqt { animation-play-state: paused; } .bk-mqt .bk-sv { width: 280px; flex: none; } @keyframes bkmq { to { transform: translateX(calc(-50% - 6px)); } } .bk-dc { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 22px; padding: 0 clamp(20px, 4vw, 40px) clamp(22px, 4vw, 34px); border-radius: 28px; overflow: hidden; border: 1px solid rgba(88, 101, 242, .35); background: radial-gradient(120% 100% at 100% 100%, rgba(88, 101, 242, .2), transparent 60%), #0f0b17; } .bk-dcb { grid-column: 1 / -1; height: 150px; margin: 0 calc(clamp(20px, 4vw, 40px) * -1); overflow: hidden; } .bk-dcb img { width: 100%; height: 100%; object-fit: cover; -webkit-mask: linear-gradient(180deg, #000 30%, transparent); mask: linear-gradient(180deg, #000 30%, transparent); } .bk-dcb.def { height: 90px; background: linear-gradient(120deg, #5865f2, color-mix(in srgb, var(--bc) 60%, #5865f2)); -webkit-mask: linear-gradient(180deg, #000 10%, transparent); mask: linear-gradient(180deg, #000 10%, transparent); opacity: .8; } .bk-dci { width: 96px; height: 96px; margin-top: -64px; align-self: start; border-radius: 28px; overflow: hidden; display: grid; place-items: center; background: #5865f2; border: 5px solid #0f0b17; box-shadow: 0 16px 40px -14px rgba(0, 0, 0, .8); } .bk-dci img { width: 100%; height: 100%; object-fit: cover; } .bk-dci b { font: 900 38px var(--disp); color: #fff; } .bk-dct { min-width: 0; } .bk-dct .kick::before, .bk-dct .kick::after { display: none; } .bk-dct h2 { display: flex; align-items: center; gap: 10px; margin: 4px 0 0; font: 800 clamp(24px, 3vw, 34px)/1.15 var(--disp); letter-spacing: -.03em; } .bk-dct h2 .bk-vf { width: 22px; height: 22px; background-size: 13px; } .bk-dct p { margin: 8px 0 0; max-width: 60ch; color: var(--txt2); font-size: 15px; line-height: 1.6; } .bk-dcn { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 12px; font-size: 14px; color: var(--txt2); } .bk-dcn span { display: inline-flex; align-items: center; gap: 7px; } .bk-dcn i { width: 9px; height: 9px; border-radius: 50%; background: #80848e; } .bk-dcn i.on { background: #23a55a; box-shadow: 0 0 10px #23a55a; } .bk-dc .bk-dcj { background: #5865f2; border-color: #6c78ff; color: #fff; box-shadow: 0 14px 30px -12px #5865f2; } .bk-dc .bk-dcj:hover { background: #4752c4; } .bs-kutu .bk-dc, .bs-vurgu .bk-dc { border: 0; background: none; padding-left: 0; padding-right: 0; } .bk-stars { display: inline-flex; gap: 2px; } .bk-stars i { width: 16px; height: 16px; color: rgba(255, 255, 255, .16); } .bk-stars i.on { color: #ffc24b; } .bk-stars svg { width: 100%; height: 100%; fill: currentColor; display: block; } .bk-rvtop { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 16px 26px; margin: -8px 0 28px; } .bk-rvavg { display: flex; align-items: center; gap: 12px; } .bk-rvavg > b { font: 900 44px/1 var(--disp); letter-spacing: -.04em; } .bk-rvavg .bk-stars i { width: 20px; height: 20px; } .bk-rvavg > span { font-size: 13.5px; color: var(--mut); } .bk-rvg { columns: 3 300px; column-gap: 14px; } .bk-rv { break-inside: avoid; margin: 0 0 14px; padding: 22px; border-radius: 20px; border: 1px solid var(--line); background: linear-gradient(180deg, var(--s1, #130d19), var(--s2, #0f0a15)); } .bk-rv.pin { border-color: color-mix(in srgb, var(--bc) 45%, var(--line)); box-shadow: 0 20px 50px -30px color-mix(in srgb, var(--bc) 70%, #000); } .bk-rvh { display: flex; align-items: center; gap: 11px; } .bk-rvh img, .bk-rva { flex: none; width: 40px; height: 40px; border-radius: 50%; object-fit: cover; } .bk-rva { display: grid; place-items: center; font: 800 16px var(--disp); color: #fff; background: linear-gradient(135deg, var(--bc), color-mix(in srgb, var(--bc) 40%, #1a0f22)); } .bk-rvn { display: grid; min-width: 0; flex: 1; } .bk-rvn b { font-size: 14.5px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .bk-rvn small { font-size: 12.5px; color: var(--mut); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .bk-rv blockquote { margin: 14px 0 0; font-size: 15px; line-height: 1.65; color: var(--txt2); white-space: pre-line; } .bk-rvr { margin-top: 14px; padding: 12px 14px; border-radius: 12px; font-size: 14px; color: var(--txt2); background: rgba(255, 255, 255, .03); border-left: 3px solid var(--bc); } .bk-rvr small { display: block; margin-bottom: 4px; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: color-mix(in srgb, var(--bc) 60%, #fff); } .bk-rv figcaption { margin-top: 12px; font-size: 12px; color: var(--mut2, var(--mut)); } .bk-rvmq .bk-rv { width: 340px; flex: none; margin: 0; } .bk-rvmq .bk-mqt { align-items: flex-start; } .bk-rvempty { padding: 34px; text-align: center; border-radius: 22px; border: 1.5px dashed var(--line2); color: var(--mut); } .rvo { position: fixed; inset: 0; z-index: 120; display: grid; place-items: center; padding: 20px; background: rgba(4, 2, 8, .75); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); opacity: 0; transition: opacity .2s; } .rvo.in { opacity: 1; } .rvw { position: relative; width: min(480px, 100%); display: grid; gap: 14px; padding: 28px; border-radius: 24px; border: 1px solid var(--line2); background: var(--panel); box-shadow: 0 40px 100px -30px rgba(0, 0, 0, .9); transform: translateY(10px); transition: transform .25s cubic-bezier(.2, 1.2, .3, 1); } .rvo.in .rvw { transform: none; } .rvw h3 { margin: 0; font: 800 24px/1.2 var(--disp); letter-spacing: -.025em; } .rvp { margin: -6px 0 0; color: var(--txt2); font-size: 14px; } .rvs { margin: -6px 0 0; font-size: 13px; font-weight: 600; } .rvs.s-bekliyor { color: #ffc24b; } .rvs.s-onayli { color: #2ee59d; } .rvs.s-red { color: #ff5c7a; } .rvx { position: absolute; top: 14px; right: 14px; width: 34px; height: 34px; border-radius: 10px; border: 0; background: rgba(255, 255, 255, .05); color: var(--txt2); font-size: 22px; line-height: 1; cursor: pointer; } .rvx:hover { color: #fff; background: rgba(255, 255, 255, .1); } .rvst { display: flex; gap: 6px; } .rvst button { width: 40px; height: 40px; padding: 7px; border: 0; border-radius: 10px; background: rgba(255, 255, 255, .04); color: rgba(255, 255, 255, .2); cursor: pointer; transition: transform .15s, color .15s; } .rvst button svg { width: 100%; height: 100%; fill: currentColor; display: block; } .rvst button.on { color: #ffc24b; } .rvst button:hover { transform: scale(1.1); } .rvw label { display: grid; gap: 6px; } .rvw label span { font-size: 13px; font-weight: 600; color: var(--txt2); } .rvw textarea, .rvw input { width: 100%; padding: 11px 13px; border-radius: 12px; border: 1px solid var(--line2); background: var(--s0, #0b0710); color: var(--txt); font: 400 15px/1.5 var(--font); resize: vertical; } .rvw textarea:focus, .rvw input:focus { outline: none; border-color: rgb(var(--a1r) / .6); box-shadow: 0 0 0 3px rgb(var(--a1r) / .18); } .rve { margin: 0; color: #ff8aa5; font-size: 13.5px; } .rva { display: flex; align-items: center; gap: 10px; } .rvok { padding: 20px 0 6px; text-align: center; } .rvok span { display: inline-grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; font-size: 26px; color: #06281b; background: #2ee59d; box-shadow: 0 0 0 8px rgba(46, 229, 157, .15); } .rvok h3 { margin-top: 16px; } .rvok p { color: var(--txt2); margin: 8px 0 0; } /* görsel büyütme (galeri bloğu) */ .pj-lb { position: fixed; inset: 0; z-index: 130; display: grid; place-items: center; padding: 40px 70px; background: rgba(4, 2, 8, .92); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); opacity: 0; pointer-events: none; transition: opacity .2s; } .pj-lb.in { opacity: 1; pointer-events: auto; } .pj-lb figure { margin: 0; display: grid; justify-items: center; gap: 12px; } .pj-lb img { max-width: 100%; max-height: calc(100dvh - 110px); border-radius: 12px; box-shadow: 0 30px 80px rgba(0, 0, 0, .7); } .pj-lb figcaption { color: var(--txt2); font-size: 14px; } .pj-lbx, .pj-lbp { position: absolute; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .15); background: rgba(255, 255, 255, .06); color: #fff; font-size: 26px; line-height: 1; cursor: pointer; } .pj-lbx { top: 18px; right: 18px; } .pj-lbp { left: 16px; top: 50%; transform: translateY(-50%); } .pj-lbp.n { left: auto; right: 16px; } @media (max-width: 860px) { .bk-steps.n3, .bk-steps.n4, .bk-gal.c3, .bk-gal.c4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .bk-steps li::after { display: none; } .bk-dc { grid-template-columns: auto minmax(0, 1fr); } .bk-dcj { grid-column: 1 / -1; } } @media (max-width: 560px) { .bk-steps.n2, .bk-steps.n3, .bk-steps.n4 { grid-template-columns: 1fr; } .bk-gal.c3, .bk-gal.c4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .bk-dc { grid-template-columns: 1fr; } .bk-dci { width: 80px; height: 80px; } .bk-rvtop { justify-content: flex-start; } .pj-lb { padding: 20px 10px; } } @media (prefers-reduced-motion: reduce) { .bk-mqt { animation: none; } .bk-mq { overflow-x: auto; } } /* ekip rolleri (hiyerarşi) */ #people.grouped { display: block; } .tg + .tg { margin-top: 44px; } .tgh { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; margin-bottom: 18px; } .tgh i { width: 4px; height: 24px; border-radius: 4px; background: var(--gc); box-shadow: 0 0 16px color-mix(in srgb, var(--gc) 60%, transparent); } .tgh h3 { margin: 0; font: 800 22px/1.2 var(--disp); letter-spacing: -.02em; } .tgn { display: inline-grid; place-items: center; min-width: 26px; height: 24px; padding: 0 8px; border-radius: 999px; font-size: 12px; font-weight: 700; color: var(--txt2); background: rgba(255, 255, 255, .06); border: 1px solid var(--line); } .tgh p { flex-basis: 100%; margin: 0 0 0 16px; color: var(--mut); font-size: 14px; } .tgp { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 18px; } .th-oyuncu .tgp { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 22px; } @media (max-width: 600px) { .tgp { grid-template-columns: 1fr 1fr; gap: 10px; } } /* proje kartı: kapak, durum, detay sayfası */ .pj.cv { padding-top: 0; } .pjc { margin: 0 -22px 18px; height: 150px; overflow: hidden; border-bottom: 1px solid var(--sl, #241a31); } .pjc img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s cubic-bezier(.2, .8, .2, 1); } .pj:hover .pjc img { transform: scale(1.04); } .pjt { flex-wrap: wrap; } .pja::after { content: ""; position: absolute; inset: 0; z-index: 1; } .pjs { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; padding: 3px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 700; color: #bff5da; background: rgba(46, 229, 157, .1); border: 1px solid rgba(46, 229, 157, .3); } .pjs i { width: 6px; height: 6px; border-radius: 50%; background: #2ee59d; } .pjs.s-gelistirme { color: #ffe6b3; background: rgba(255, 194, 75, .1); border-color: rgba(255, 194, 75, .3); } .pjs.s-gelistirme i { background: #ffc24b; } .pjs.s-bitti { color: #d6e4ff; background: rgba(90, 160, 255, .1); border-color: rgba(90, 160, 255, .3); } .pjs.s-bitti i { background: #5aa0ff; } .pjs.s-ara { color: var(--txt2); background: rgba(255, 255, 255, .04); border-color: var(--line2); } .pjs.s-ara i { background: var(--mut); } .pjf { display: flex; flex-wrap: wrap; gap: 16px; margin-top: auto; padding-top: 16px; } .pjf .pjl { margin: 0; padding: 0; position: relative; z-index: 2; } .pjl.sec { color: var(--mut); } .pj.has-pg { cursor: pointer; } /* ---- mağaza: kupon, davet indirimi, stok, hediye ---- */ .shop-bar { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px; margin: 0 auto 22px; } .shk-o { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 16px; border-radius: 999px; border: 1px dashed var(--sl2, #33284a); background: transparent; color: var(--txt2); font: 600 13.5px var(--font); cursor: pointer; transition: border-color .15s, color .15s; } .shk-o:hover { border-color: var(--a1); color: var(--txt); } .shk-o .ico, .shk-ok .ico, .shc-dc .ico, .shc-r .ico { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .shk-f { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px; } .shk-f input { height: 40px; width: 200px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--sl, #241a31); background: var(--s2, #0f0a15); color: var(--txt); font: 700 14px ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .06em; text-transform: uppercase; outline: none; } .shk-f input:focus { border-color: rgb(var(--a1r) / .6); } .shk-err { flex-basis: 100%; text-align: center; color: #ff8aa0; font-size: 12.5px; } .shk-ok { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 6px 0 14px; border-radius: 999px; background: rgba(46, 229, 157, .1); border: 1px solid rgba(46, 229, 157, .35); color: #7af0bf; font-size: 13.5px; font-weight: 600; } .shk-ok.ref { padding-right: 14px; background: rgb(var(--a1r) / .1); border-color: rgb(var(--a1r) / .35); color: var(--a1l, #ff8aa5); } .shk-x { height: 28px; padding: 0 10px; border-radius: 999px; border: 0; background: rgba(255, 255, 255, .08); color: var(--txt2); font: 600 12px var(--font); cursor: pointer; } .shk-x:hover { background: rgba(255, 255, 255, .16); color: var(--txt); } .shc-dc { align-self: flex-start; width: fit-content; display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; padding: 3px 10px; border-radius: 999px; background: rgba(46, 229, 157, .1); color: #7af0bf; font-size: 12.5px; font-weight: 700; } .shc-st { display: flex; align-items: center; gap: 8px; margin-top: 12px; font-size: 13px; font-weight: 600; color: #ffc65c; } .shc-st i { width: 8px; height: 8px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 4px rgba(255, 198, 92, .15); animation: shst 1.6s ease-in-out infinite; } .shc-st.out { color: var(--mut); font-weight: 500; } .shc-st.out i { animation: none; box-shadow: none; } @keyframes shst { 50% { opacity: .35; } } .shc-rs { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 16px; } .shc-r { display: inline-flex; align-items: center; gap: 5px; } @media (prefers-reduced-motion: reduce) { .shc-st i { animation: none; } } /* ---- serbest düzen (panelin önizlemesinde) ---- */ html.mv-on .pvbar { display: none !important; } html.mv-on body, html.mv-on body * { cursor: default; } html.mv-on .rv { opacity: 1 !important; transform: none !important; } html.mv-drag, html.mv-drag * { cursor: grabbing !important; user-select: none !important; } .mv-ui { position: absolute; left: 0; top: 0; width: 0; height: 0; z-index: 2147483000; pointer-events: none; } .mv-hov, .mv-box { position: absolute; box-sizing: border-box; pointer-events: none; } .mv-hov { border: 1.5px dashed rgba(90, 170, 255, .9); border-radius: 4px; background: rgba(90, 170, 255, .06); } .mv-hov::before { content: attr(data-n); position: absolute; left: -1px; bottom: 100%; transform: scale(var(--mv-z, 1)); transform-origin: 0 100%; margin-bottom: 3px; padding: 2px 7px; border-radius: 5px; background: #2b7bff; color: #fff; font: 600 11px/1.4 system-ui, sans-serif; white-space: nowrap; max-width: 260px; overflow: hidden; text-overflow: ellipsis; } .mv-hov[hidden], .mv-box[hidden], .mv-gx[hidden], .mv-gy[hidden] { display: none; } .mv-box { border: calc(2px * var(--mv-z, 1)) solid #ff3b6b; border-radius: 4px; box-shadow: 0 0 0 4000px rgba(0, 0, 0, .0); } .mv-box i { position: absolute; width: calc(14px * var(--mv-z, 1)); height: calc(14px * var(--mv-z, 1)); margin: 0; border-radius: 50%; background: #fff; border: 2px solid #ff3b6b; pointer-events: auto; box-shadow: 0 2px 8px rgba(0, 0, 0, .5); } .mv-sc { right: calc(-8px * var(--mv-z, 1)); bottom: calc(-8px * var(--mv-z, 1)); cursor: nwse-resize !important; } .mv-rot { left: 50%; top: calc(-30px * var(--mv-z, 1)); translate: -50% 0; cursor: grab !important; } .mv-rot::after { content: ""; position: absolute; left: 50%; top: 100%; width: 2px; height: calc(14px * var(--mv-z, 1)); margin-left: -1px; background: #ff3b6b; } .mv-bar { position: absolute; left: -2px; top: 100%; margin-top: calc(8px * var(--mv-z, 1)); transform: scale(var(--mv-z, 1)); transform-origin: 0 0; display: flex; align-items: center; gap: 4px; padding: 4px 4px 4px 10px; border-radius: 10px; background: #16101d; border: 1px solid #3a2d4f; box-shadow: 0 10px 30px rgba(0, 0, 0, .6); pointer-events: auto; white-space: nowrap; font: 500 12px/1 system-ui, sans-serif; color: #e9e3f2; } .mv-box.low .mv-rot { top: auto; bottom: -34px; } .mv-box.low .mv-rot::after { top: -14px; } .mv-bar b { max-width: 200px; overflow: hidden; text-overflow: ellipsis; font-weight: 700; } .mv-v { color: #9d90b0; font-variant-numeric: tabular-nums; margin-right: 4px; } .mv-bar button { height: 26px; padding: 0 9px; border: 0; border-radius: 7px; background: #2a2135; color: #fff; font: 600 11.5px system-ui, sans-serif; cursor: pointer !important; } .mv-bar button:hover { background: #ff3b6b; } .mv-gx, .mv-gy { position: absolute; pointer-events: none; background: #ff3b6b; } .mv-gx { top: 0; width: 1px; height: 100000px; } .mv-gy { left: 0; height: 1px; width: 100vw; } .mv-box.rgt .mv-bar { left: auto; right: -2px; transform-origin: 100% 0; }