/* =========================================================
   CaptStudio / AudiosStudio — profesyonel modüller vitrini (sx-*)
   Satış siteleri ve radyomasyon.com ortak. Canlandırma: sx.js
   ========================================================= */
.sx-sec { --sx-line: rgba(255,255,255,.08); }
.sx-sec .dx-kick i { font-size: 14px; }
.sx-dots { display: inline-flex; gap: 5px; margin-right: 4px; }
.sx-dots i { width: 9px; height: 9px; border-radius: 50%; background: #ff5f57; }
.sx-dots i:nth-child(2) { background: #febc2e; } .sx-dots i:nth-child(3) { background: #28c840; }
.sx-four { margin-top: 30px; }
.cpp-dark .sx-four .aup-c, .aup-dark .sx-four .aup-c { background: rgba(255,255,255,.04); box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); }
.cpp-dark .sx-four .aup-c h3 { color: #fff; } .cpp-dark .sx-four .aup-c p { color: #a1a1a6; }
.sx-four .aup-c > i { font-size: 26px; color: var(--k); display: block; margin-bottom: 10px; }
.sx-four .aup-c h3 { font-size: 17px; margin: 0 0 6px; letter-spacing: -.01em; }
.sx-four .aup-c p { font-size: 14px; line-height: 1.5; margin: 0; }
.sx-chips { list-style: none; padding: 0; margin: 26px auto 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.sx-chips li { display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; border-radius: 99px; font-size: 13.5px; background: rgba(255,255,255,.06); color: #e5e5ea; box-shadow: inset 0 0 0 1px rgba(255,255,255,.1); }
.sx-chips li i { color: #7dfb9b; }
.sx-cap .sx-chips li i { color: #ffd60a; }
.sx-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: 30px; }
.sx-win { border-radius: 22px; background: #111216; color: #e9e9ee; box-shadow: 0 30px 70px -30px rgba(0,0,0,.6), inset 0 0 0 1px rgba(255,255,255,.07); overflow: hidden; }
.sx-winh, .sx-vbar, .sx-arrh, .sx-vwh { display: flex; align-items: center; gap: 8px; padding: 11px 14px; font-size: 13px; color: #c7c7cc; background: #17181d; border-bottom: 1px solid rgba(255,255,255,.06); }
.sx-winh b, .sx-vbar b, .sx-arrh b { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
.sx-winh b i, .sx-vbar b i, .sx-arrh b i { color: #30d158; }
.sx-cap .sx-winh b i { color: #ffd60a; }

/* ---------- VİDEO ---------- */
.sx-vid { position: relative; display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 0; align-items: center; }
.sx-vdaw { position: relative; border-radius: 22px; background: #0e0f13; box-shadow: 0 40px 90px -40px rgba(0,0,0,.8), inset 0 0 0 1px rgba(255,255,255,.08); overflow: hidden; }
.sx-vbar { justify-content: flex-start; }
.sx-lcd { margin-left: 14px; font: 600 14px/1 ui-monospace, Menlo, Consolas, monospace; color: #7dfb9b; background: #050607; padding: 6px 10px; border-radius: 7px; letter-spacing: .04em; box-shadow: inset 0 0 0 1px rgba(125,251,155,.15); }
.sx-vruler { position: relative; height: 24px; margin-left: 96px; border-bottom: 1px solid rgba(255,255,255,.08); }
.sx-vruler span { position: absolute; top: 6px; font: 10px ui-monospace, Menlo, monospace; color: rgba(255,255,255,.4); transform: translateX(2px); white-space: nowrap; }
.sx-vruler span:last-child { transform: translateX(-100%); }
.sx-vlane { display: flex; height: 44px; border-bottom: 1px solid rgba(255,255,255,.05); }
.sx-vlane.a { height: 34px; }
.sx-vh { width: 96px; flex: none; display: flex; align-items: center; gap: 7px; padding: 0 10px; font-size: 11.5px; color: #a1a1a6; background: #121318; border-right: 1px solid rgba(255,255,255,.06); }
.sx-vh i { width: 8px; height: 8px; border-radius: 2px; flex: none; } .sx-vh .ph-duotone { width: auto; height: auto; font-size: 14px; }
.sx-vlane canvas { flex: 1; min-width: 0; height: 100%; display: block; }
.sx-vcl { position: relative; flex: 1; }
.sx-vcl em { position: absolute; top: 4px; bottom: 4px; border-radius: 5px; background: color-mix(in srgb, var(--c) 32%, #121318); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 60%, transparent); overflow: hidden; }
.sx-vcl em::after { content: ''; position: absolute; inset: 7px 4px; background: repeating-linear-gradient(90deg, color-mix(in srgb, var(--c) 80%, #fff) 0 1px, transparent 1px 3px); opacity: .45; -webkit-mask: radial-gradient(ellipse at 50% 50%, #000 30%, transparent 75%); mask: linear-gradient(#000, #000); clip-path: polygon(0 40%, 6% 20%, 12% 55%, 20% 10%, 28% 60%, 36% 30%, 44% 70%, 52% 15%, 60% 50%, 68% 25%, 76% 65%, 84% 30%, 92% 50%, 100% 35%, 100% 65%, 92% 75%, 84% 70%, 76% 90%, 68% 75%, 60% 85%, 52% 95%, 44% 80%, 36% 70%, 28% 90%, 20% 85%, 12% 70%, 6% 80%, 0 60%); }
.sx-vph { position: absolute; top: 49px; bottom: 0; left: 96px; width: 2px; background: #fff; box-shadow: 0 0 10px rgba(255,255,255,.6); pointer-events: none; }
.sx-vph::before { content: ''; position: absolute; top: -6px; left: -5px; border: 6px solid transparent; border-top-color: #fff; }
.sx-vwin { position: relative; z-index: 2; margin-left: -60px; border-radius: 18px; overflow: hidden; background: #000; box-shadow: 0 50px 100px -30px rgba(0,0,0,.9), 0 0 0 1px rgba(255,255,255,.14); transform: perspective(1200px) rotateY(-6deg) translateY(30px); }
.sx-vwh { background: #15161b; font-size: 12px; }
.sx-vwh i { color: #64d2ff; }
.sx-vwh span { margin-left: auto; font-size: 11px; padding: 3px 8px; border-radius: 99px; background: rgba(100,210,255,.14); color: #8fdcff; }
.sx-vscr { position: relative; aspect-ratio: 16 / 9; }
.sx-vscr canvas { width: 100%; height: 100%; display: block; }
.sx-btc { position: absolute; left: 50%; bottom: 7%; transform: translateX(-50%); background: rgba(0,0,0,.72); color: #fff; font: 600 13px/1 ui-monospace, Menlo, Consolas, monospace; padding: 5px 9px; border-radius: 5px; letter-spacing: .05em; }

/* ---------- ARANJÖR ---------- */
.sx-arr { border-radius: 22px; background: #0f1014; box-shadow: 0 40px 90px -40px rgba(0,0,0,.55), inset 0 0 0 1px rgba(255,255,255,.08); overflow: hidden; color: #e5e5ea; }
.sx-arrst { margin-left: auto; font-size: 11.5px; color: #7dfb9b; }
.sx-arrb { display: flex; }
.sx-arrl { width: 82px; flex: none; display: flex; flex-direction: column; background: #121318; border-right: 1px solid rgba(255,255,255,.06); }
.sx-arrl span { height: 46px; display: flex; align-items: center; padding: 0 10px; font-size: 11.5px; color: #a1a1a6; border-bottom: 1px solid rgba(255,255,255,.05); }
.sx-arrl span:first-child { height: 36px; color: #fff; font-weight: 600; }
.sx-arrg { position: relative; flex: 1; height: calc(36px + 46px * 4); background: repeating-linear-gradient(90deg, rgba(255,255,255,.04) 0 1px, transparent 1px 12.5%); }
.sx-asec, .sx-aclip { position: absolute; transition: left .9s cubic-bezier(.7,0,.2,1), transform .9s cubic-bezier(.7,0,.2,1), opacity .5s; }
.sx-asec { top: 5px; height: 26px; border-radius: 6px; background: var(--c); color: rgba(0,0,0,.85); font-size: 11.5px; font-weight: 700; display: flex; align-items: center; padding: 0 9px; box-sizing: border-box; border: 1px solid rgba(0,0,0,.3); white-space: nowrap; overflow: hidden; }
.sx-asec.mv { transform: translateY(-4px); box-shadow: 0 10px 24px -6px rgba(0,0,0,.6), 0 0 0 2px #fff; z-index: 2; }
.sx-aclip { height: 38px; border-radius: 5px; background: color-mix(in srgb, var(--c) 35%, #15161b); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 65%, transparent); box-sizing: border-box; overflow: hidden; }
.sx-aclip::after { content: ''; position: absolute; left: 4px; right: 4px; top: 9px; bottom: 9px; background: repeating-linear-gradient(90deg, color-mix(in srgb, var(--c) 85%, #fff) 0 2px, transparent 2px 5px); opacity: .5; }
.sx-aclip.mid::after { background: repeating-linear-gradient(90deg, transparent 0 4px, color-mix(in srgb, var(--c) 85%, #fff) 4px 9px, transparent 9px 14px); top: 12px; bottom: 16px; }

/* ---------- BAŞLATICI ---------- */
.sx-ln { border-radius: 22px; background: #0d0e12; box-shadow: 0 40px 90px -40px rgba(0,0,0,.8), inset 0 0 0 1px rgba(255,255,255,.08); padding: 14px; color: #e5e5ea; }
.sx-lnt { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; font-size: 12px; }
.sx-seg { display: inline-flex; background: rgba(255,255,255,.06); border-radius: 9px; padding: 3px; }
.sx-seg b { padding: 5px 10px; border-radius: 6px; font-weight: 600; color: #a1a1a6; }
.sx-seg b.on { background: #2a2d37; color: #fff; }
.sx-bar { color: #a1a1a6; } .sx-bar em { font-style: normal; color: #7dfb9b; font-weight: 700; font-variant-numeric: tabular-nums; }
.sx-sp { flex: 1; }
.sx-lb { display: inline-flex; align-items: center; gap: 6px; border-radius: 8px; padding: 6px 10px; background: rgba(255,255,255,.05); box-shadow: inset 0 0 0 1px rgba(255,255,255,.1); }
.sx-lb.on { color: #7dfb9b; box-shadow: inset 0 0 0 1px rgba(48,209,88,.5); background: rgba(48,209,88,.1); }
.sx-lng { display: grid; grid-template-columns: 110px repeat(4, minmax(0, 1fr)); gap: 6px; }
.sx-lng .h { height: 34px; border-radius: 8px; background: #16171d; display: flex; align-items: center; gap: 6px; padding: 0 10px; font-size: 12px; font-weight: 600; color: #fff; transition: background .3s, box-shadow .3s; }
.sx-lng .h i { color: #30d158; }
.sx-lng .h.on { background: rgba(48,209,88,.16); box-shadow: inset 0 0 0 1px rgba(48,209,88,.5); }
.sx-lng .n { height: 54px; border-radius: 8px; background: #121318; border-left: 3px solid var(--c); display: flex; align-items: center; padding: 0 10px; font-size: 12.5px; font-weight: 600; }
.sx-lng .c { position: relative; height: 54px; border-radius: 8px; overflow: hidden; border: 1px dashed rgba(255,255,255,.08); }
.sx-lng .c.f { border: 0; background: color-mix(in srgb, var(--c) 26%, #121318); display: flex; align-items: center; gap: 8px; padding: 0 10px; font-size: 11.5px; font-weight: 700; }
.sx-lng .c.f::before { content: ''; position: absolute; inset: 0; background: conic-gradient(rgba(255,255,255,.18) var(--p, 0deg), transparent 0); opacity: 0; transition: opacity .2s; }
.sx-lng .c.f > span { position: relative; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: rgba(0,0,0,.4); font-size: 10px; flex: none; }
.sx-lng .c.f > b { position: relative; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sx-lng .c.f.on { box-shadow: inset 0 0 0 2px #30d158; background: color-mix(in srgb, var(--c) 48%, #121318); }
.sx-lng .c.f.on::before { opacity: 1; }
.sx-lng .c.f.on > span { background: #30d158; color: #000; }
.sx-lng .c.f.wait { animation: sxBlink .4s steps(2) infinite; }
@keyframes sxBlink { 50% { box-shadow: inset 0 0 0 2px rgba(48,209,88,.2); } }
.sx-lnw { margin-top: 12px; display: flex; align-items: center; gap: 10px; }
.sx-lnw small { width: 104px; flex: none; font-size: 11.5px; color: #a1a1a6; }
.sx-lnw > div { position: relative; flex: 1; height: 26px; border-radius: 7px; background: #121318; overflow: hidden; display: flex; }
.sx-lnw > div i { height: 100%; border-right: 1px solid rgba(0,0,0,.4); background: var(--c); color: rgba(0,0,0,.8); font: 700 10.5px/26px Inter, system-ui, sans-serif; font-style: normal; padding-left: 7px; box-sizing: border-box; white-space: nowrap; overflow: hidden; animation: sxGrow .6s cubic-bezier(.2,.8,.2,1); }
@keyframes sxGrow { from { transform: scaleX(0); transform-origin: left; } }

/* ---------- EK EKLENTİLER ---------- */
.sx-plg { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.sx-pc { display: flex; flex-direction: column; gap: 4px; padding: 18px; border-radius: 18px; background: var(--card, #fff); box-shadow: 0 0 0 .5px rgba(0,0,0,.08), 0 12px 30px -18px rgba(0,0,0,.25); }
.sx-pi { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; font-size: 22px; color: var(--k); background: color-mix(in srgb, var(--k) 14%, transparent); margin-bottom: 8px; }
.sx-pc b { font-size: 15.5px; letter-spacing: -.01em; }
.sx-pc small { font-size: 13px; line-height: 1.45; color: var(--ink-2, #6e6e73); }
.sx-tun { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 26px 18px 24px; }
.sx-tn { display: flex; align-items: baseline; gap: 4px; }
.sx-tn b { font: 800 64px/1 Inter, system-ui, sans-serif; letter-spacing: -.03em; color: #fff; transition: color .3s; }
.sx-tn small { font-size: 20px; color: #8e8e93; }
.sx-tm { position: relative; width: min(340px, 90%); height: 38px; border-radius: 9px; background: linear-gradient(90deg, rgba(255,69,58,.35), rgba(255,214,10,.25) 38%, rgba(48,209,88,.5) 50%, rgba(255,214,10,.25) 62%, rgba(255,69,58,.35)); display: flex; justify-content: space-between; align-items: flex-end; padding: 0 8px 4px; font-size: 10px; color: rgba(255,255,255,.55); box-sizing: border-box; }
.sx-tm::after { content: ''; position: absolute; left: 50%; top: 4px; bottom: 16px; width: 1px; background: rgba(255,255,255,.5); }
.sx-tm i { position: absolute; top: 3px; left: 50%; width: 4px; height: 24px; margin-left: -2px; border-radius: 2px; background: #fff; box-shadow: 0 0 10px rgba(255,255,255,.6); }
.sx-tf { display: flex; gap: 20px; font-size: 13px; color: #a1a1a6; font-variant-numeric: tabular-nums; }
.sx-tun.ok .sx-tn b { color: #30d158; } .sx-tun.ok .sx-tm i { background: #30d158; box-shadow: 0 0 14px #30d158; }
.sx-ph { display: grid; grid-template-columns: 200px 1fr; gap: 18px; align-items: center; padding: 18px; }
.sx-ph canvas { width: 200px; height: 200px; border-radius: 12px; background: #08090c; display: block; }
.sx-ph small { font-size: 11px; color: #8e8e93; text-transform: uppercase; letter-spacing: .06em; font-weight: 700; }
.sx-phb { position: relative; height: 10px; border-radius: 6px; margin: 10px 0 6px; background: linear-gradient(90deg, #ff453a, #ffd60a 45%, #30d158); }
.sx-phb i { position: absolute; top: -4px; left: 80%; width: 3px; height: 18px; border-radius: 2px; background: #fff; transform: translateX(-50%); }
.sx-phl { display: flex; justify-content: space-between; font-size: 10.5px; color: #8e8e93; }
.sx-ph b { display: block; font-size: 30px; margin-top: 10px; font-variant-numeric: tabular-nums; }

/* ---------- GRUPLAR VE SESSİZLİK ---------- */
.sx-win.sxd { background: #0e0f13; }
.sx-gr { display: flex; justify-content: center; gap: 12px; padding: 22px 18px 18px; }
.sx-ch { width: 62px; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 10px 0; border-radius: 12px; background: #15161c; }
.sx-ch.g { background: rgba(255,159,10,.1); box-shadow: inset 0 0 0 1px rgba(255,159,10,.35); }
.sx-gch { min-width: 16px; height: 16px; border-radius: 4px; background: #ff9f0a; color: #000; font: 800 10px/16px Inter, system-ui; text-align: center; text-transform: uppercase; }
.sx-ch:not(.g) .sx-gch { background: transparent; }
.sx-fd { position: relative; width: 26px; height: 170px; }
.sx-fd::before { content: ''; position: absolute; left: 6px; top: 0; bottom: 0; width: 3px; border-radius: 2px; background: #2a2b33; }
.sx-fd i { position: absolute; left: -2px; width: 20px; height: 30px; border-radius: 4px; background: linear-gradient(#e8e8ed, #a6a6ad); box-shadow: 0 2px 6px rgba(0,0,0,.6); top: var(--y, 40%); transition: top .5s cubic-bezier(.4,0,.2,1); }
.sx-fd i::after { content: ''; position: absolute; left: 3px; right: 3px; top: 14px; height: 2px; background: #333; }
.sx-ch.g .sx-fd i { background: linear-gradient(#ffc56b, #ff9f0a); }
.sx-fd em { position: absolute; right: 0; bottom: 0; width: 5px; border-radius: 2px; height: var(--m, 30%); background: linear-gradient(0deg, #30d158 0 70%, #ffd60a 85%, #ff453a); transition: height .08s; }
.sx-ch b { font: 600 11px ui-monospace, Menlo, monospace; color: #e5e5ea; }
.sx-ch small { font-size: 10.5px; color: #8e8e93; }
.sx-ssn { margin-left: auto; font-size: 11.5px; color: #7dfb9b; }
.sx-win .sx-ssc { display: block; width: 100%; height: 190px; margin: 0; border-radius: 0; background: none; }
.sx-ssk { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 16px 16px; font-size: 11.5px; color: #8e8e93; }
.sx-ssk span { padding: 5px 9px; border-radius: 7px; background: rgba(255,255,255,.05); }
.sx-ssk b { color: #fff; font-weight: 600; }

/* ---------- TEMALAR ---------- */
.sx-th { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.sx-thm { margin: 0; transition: transform .5s cubic-bezier(.2,.8,.2,1); }
.sx-thm figcaption { padding: 12px 4px 0; display: flex; flex-direction: column; gap: 2px; }
.sx-thm figcaption b { font-size: 15px; } .sx-thm figcaption small { font-size: 12.5px; color: var(--ink-2, #6e6e73); }
.sx-thm.on { transform: translateY(-8px); }
.sx-thm.on .sx-tmw { box-shadow: 0 30px 60px -24px rgba(0,0,0,.55), 0 0 0 2px var(--a); }
.sx-tmw { --bg: #0b0c0f; --top: #121318; --hd: #121318; --ln: #0d0e12; --mx: #0e0f13; --lcd: #08090b; --lcdc: #7dfb9b; --a: #30d158; --grid: rgba(255,255,255,.05); --rad: 3px; --cl: .55; border-radius: 14px; overflow: hidden; background: var(--bg); box-shadow: 0 20px 40px -24px rgba(0,0,0,.45), 0 0 0 1px rgba(0,0,0,.08); transition: box-shadow .4s; aspect-ratio: 4 / 3; display: flex; flex-direction: column; }
.sx-tmw .sxt { flex: 0 0 14%; display: flex; align-items: center; gap: 4px; padding: 0 8px; background: var(--top); }
.sx-tmw .sxt > i { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,.25); }
.sx-tmw .lcd { margin: 0 auto; font: 700 9px/1 ui-monospace, Menlo, monospace; color: var(--lcdc); background: var(--lcd); padding: 4px 8px; border-radius: 4px; }
.sx-tmw .pl { width: 26px; height: 10px; border-radius: 3px; background: var(--a); }
.sx-tmw .sxb { flex: 1; display: grid; grid-template-columns: 22% 1fr; min-height: 0; }
.sx-tmw .sxhd { display: grid; grid-template-rows: repeat(4, 1fr); background: var(--hd); border-right: 1px solid rgba(0,0,0,.2); }
.sx-tmw .sxhd span { border-bottom: 1px solid rgba(0,0,0,.15); position: relative; }
.sx-tmw .sxhd span::after { content: ''; position: absolute; left: 8px; right: 20%; top: 40%; height: 3px; border-radius: 2px; background: rgba(128,128,128,.5); }
.sx-tmw .sxln { position: relative; background: var(--ln); background-image: repeating-linear-gradient(90deg, var(--grid) 0 1px, transparent 1px 12.5%); }
.sx-tmw .sxln em { position: absolute; top: 3%; height: 20%; border-radius: var(--rad); overflow: hidden; }
.sx-tmw .sxln em::before { content: ''; position: absolute; inset: 0; background: var(--c); opacity: var(--cl); }
.sx-tmw .sxln em::after { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: var(--c); }
.sx-tmw .sxln .ph { position: absolute; top: 0; bottom: 0; left: 0; width: 1.5px; background: #fff; animation: sxPh 6s linear infinite; }
.sx-tmw .sxm { flex: 0 0 25%; box-sizing: border-box; display: flex; gap: 3px; padding: 5px; background: var(--mx); border-top: 1px solid rgba(0,0,0,.25); }
.sx-tmw .sxm span { flex: 1; border-radius: 3px; background: rgba(128,128,128,.14); position: relative; }
.sx-tmw .sxm span i { position: absolute; left: 30%; right: 30%; bottom: 4px; height: var(--h); border-radius: 2px; background: linear-gradient(0deg, #30d158, #ffd60a 85%, #ff453a); animation: sxMt 1.1s ease-in-out infinite alternate; }
.sx-tmw .sxm span:nth-child(2n) i { animation-duration: .8s; } .sx-tmw .sxm span:nth-child(3n) i { animation-duration: 1.4s; }
@keyframes sxPh { to { left: 100%; } }
@keyframes sxMt { from { transform: scaleY(.45); transform-origin: bottom; } to { transform: scaleY(1); transform-origin: bottom; } }
.sx-thm.gece .sx-tmw { --bg: #1d2026; --top: #2a2e36; --hd: #262a31; --ln: #1f2228; --mx: #22262d; --lcd: #15171c; --lcdc: #dfe6f3; --a: #4f9cff; --grid: rgba(255,255,255,.04); --rad: 4px; --cl: .78; }
.sx-thm.k1 .sx-tmw { --bg: #c9c9c9; --top: #b9b9b9; --hd: #a9a9a9; --ln: #d4d4d4; --mx: #3a3b3f; --lcd: #000; --lcdc: #3cff6e; --a: #2f6fe4; --grid: rgba(0,0,0,.12); --rad: 0; --cl: .62; }
.sx-thm.k2 .sx-tmw { --bg: #2b2c30; --top: #3a3b40; --hd: #33343a; --ln: #26272b; --mx: #1f2024; --lcd: #000; --lcdc: #3cff6e; --a: #3a8dff; --grid: rgba(0,0,0,.25); --rad: 1px; --cl: .62; }

/* ---------- MODÜL TABLOSU ---------- */
.sx-mx { overflow-x: auto; border-radius: 22px; background: var(--card, #fff); box-shadow: 0 0 0 .5px rgba(0,0,0,.08), 0 18px 40px -26px rgba(0,0,0,.3); }
.sx-mx table { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 560px; }
.sx-mx th, .sx-mx td { padding: 11px 16px; text-align: center; border-bottom: 1px solid rgba(0,0,0,.06); }
.sx-mx th:first-child, .sx-mx td:first-child { text-align: left; font-weight: 500; }
.sx-mx th { font-size: 13px; font-weight: 700; position: sticky; top: 0; background: var(--card, #fff); }
.sx-mx .hl { background: rgba(94,92,230,.06); }
.sx-mx td i { font-size: 18px; color: #30d158; } .sx-mx td i.no { color: rgba(0,0,0,.18); }
.sx-mx tr:last-child td { border-bottom: 0; }

/* ---------- CAPTSTUDIO ---------- */
.sx-kf, .sx-cg { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: 18px; align-items: stretch; }
.sx-kfv, .sx-cgv, .sx-scv { position: relative; border-radius: 20px; overflow: hidden; background: #000; aspect-ratio: 16 / 9; box-shadow: 0 40px 90px -40px rgba(0,0,0,.8), 0 0 0 1px rgba(255,255,255,.1); }
.sx-kfv canvas, .sx-cgv canvas, .sx-scv canvas { width: 100%; height: 100%; display: block; }
.sx-kfp { position: absolute; left: 14px; top: 14px; font-size: 12px; font-weight: 700; padding: 5px 10px; border-radius: 99px; background: rgba(0,0,0,.6); color: #ffd60a; backdrop-filter: blur(6px); }
.sx-kfr { border-radius: 20px; background: #111216; box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); padding: 16px; display: flex; flex-direction: column; gap: 14px; color: #e5e5ea; }
.sx-kfvals { display: grid; gap: 8px; }
.sx-kfvals label { display: grid; grid-template-columns: 20px 1fr 54px; grid-template-rows: auto auto; column-gap: 8px; font-size: 12.5px; color: #c7c7cc; align-items: center; }
.sx-kfvals label > i { grid-row: span 2; color: #8e8e93; font-size: 16px; }
.sx-kfvals em { font-style: normal; text-align: right; font: 600 11.5px ui-monospace, Menlo, monospace; color: #fff; }
.sx-kfvals label > b { grid-column: 2 / 4; height: 4px; border-radius: 2px; background: #2a2b33; position: relative; margin-top: 6px; }
.sx-kfvals label > b i { position: absolute; top: -5px; width: 14px; height: 14px; margin-left: -7px; border-radius: 50%; background: #fff; left: var(--x, 50%); box-shadow: 0 1px 4px rgba(0,0,0,.6); }
.sx-kftl small { display: block; margin-top: 6px; font-size: 11.5px; color: #8e8e93; } .sx-kftl small b { color: #ffd60a; }
.sx-kft { position: relative; height: 34px; border-radius: 8px; background: rgba(255,255,255,.05); }
.sx-kft .d { position: absolute; top: 12px; width: 10px; height: 10px; margin-left: -5px; background: #ffd60a; transform: rotate(45deg); border-radius: 2px; transition: background .2s; }
.sx-kft .d.on { background: #fff; box-shadow: 0 0 10px #ffd60a; }
.sx-kft .l { position: absolute; top: 16px; height: 2px; background: rgba(255,214,10,.4); }
.sx-kft .p { position: absolute; top: 2px; bottom: 2px; width: 2px; background: #ff453a; }
.sx-kfps { display: flex; flex-wrap: wrap; gap: 6px; }
.sx-kfps span { font-size: 11.5px; padding: 6px 10px; border-radius: 8px; background: rgba(255,255,255,.05); box-shadow: inset 0 0 0 1px rgba(255,255,255,.1); color: #c7c7cc; transition: all .3s; }
.sx-kfps span.on { background: rgba(255,214,10,.14); box-shadow: inset 0 0 0 1px rgba(255,214,10,.6); color: #ffd60a; }
.sx-cgd { position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; background: #fff; box-shadow: 0 0 12px rgba(0,0,0,.6); }
.sx-cgd::after { content: ''; position: absolute; top: 50%; left: -13px; width: 24px; height: 24px; margin-top: -14px; border-radius: 50%; background: #fff; border: 2px solid rgba(0,0,0,.2); }
.sx-cgl { position: absolute; top: 12px; font-size: 11.5px; font-weight: 700; padding: 4px 9px; border-radius: 99px; background: rgba(0,0,0,.55); color: #fff; }
.sx-cgl.a { left: 12px; } .sx-cgl.b { right: 12px; }
.sx-cgr { border-radius: 20px; background: #111216; padding: 18px; display: flex; flex-direction: column; gap: 18px; justify-content: center; color: #e5e5ea; }
.sx-whs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.sx-whs > div { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.sx-whs canvas { width: 100%; max-width: 110px; aspect-ratio: 1; }
.sx-whs small { font-size: 11.5px; color: #a1a1a6; }
.sx-luts { display: flex; flex-wrap: wrap; gap: 6px; }
.sx-luts span { font-size: 11.5px; padding: 6px 10px; border-radius: 8px; background: rgba(255,255,255,.05); box-shadow: inset 0 0 0 1px rgba(255,255,255,.1); color: #c7c7cc; transition: all .3s; }
.sx-luts span.on { background: rgba(255,55,95,.16); box-shadow: inset 0 0 0 1px rgba(255,55,95,.6); color: #ff8fab; }
.sx-luts span.u { color: #ffd60a; }
.sx-ck, .sx-mk { position: relative; border-radius: 22px; overflow: hidden; background: #000; aspect-ratio: 16 / 10; box-shadow: 0 40px 90px -40px rgba(0,0,0,.8), 0 0 0 1px rgba(255,255,255,.1); }
.sx-ck canvas, .sx-mk canvas { width: 100%; height: 100%; display: block; }
.sx-ckd { position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; background: #fff; box-shadow: 0 0 12px rgba(0,0,0,.6); }
.sx-cks, .sx-mkt { position: absolute; left: 12px; right: 12px; bottom: 12px; display: flex; flex-wrap: wrap; gap: 6px; }
.sx-cks span, .sx-mkt span { font-size: 11.5px; padding: 6px 10px; border-radius: 8px; background: rgba(0,0,0,.6); color: #e5e5ea; backdrop-filter: blur(6px); display: inline-flex; align-items: center; gap: 5px; transition: all .3s; }
.sx-cks b { color: #7dfb9b; }
.sx-mkt span.on { background: rgba(255,214,10,.85); color: #000; }
.sx-sc { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 18px; align-items: center; }
.sx-scg { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.sx-scg > div { border-radius: 16px; background: #0b0c10; box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); padding: 10px; display: flex; flex-direction: column; gap: 6px; }
.sx-scg > div:last-child { grid-column: span 2; align-items: center; }
.sx-scg canvas { width: 100%; height: 110px; display: block; }
.sx-scg > div:last-child canvas { width: 170px; height: 170px; }
.sx-scg small { font-size: 10.5px; color: #8e8e93; text-transform: uppercase; letter-spacing: .07em; font-weight: 700; }
.sx-sp { border-radius: 22px; background: #0f1014; padding: 16px; box-shadow: 0 40px 90px -40px rgba(0,0,0,.5); }
.sx-spf { position: relative; aspect-ratio: 16 / 9; border-radius: 14px; overflow: hidden; background: linear-gradient(135deg, #1b2a4a, #0b1020); }
.sx-spf i { position: absolute; border-radius: var(--r, 0); transition: all .9s cubic-bezier(.7,0,.2,1); box-shadow: 0 0 0 1px rgba(0,0,0,.35); }
.sx-spf .q1 { background: radial-gradient(circle at 50% 38%, #ffd2b0 0 9%, transparent 9.5%), radial-gradient(ellipse at 50% 85%, #ff9f0a 0 26%, transparent 27%), linear-gradient(160deg, #3d5a80, #1d2d44); }
.sx-spf .q2 { background: radial-gradient(circle at 50% 38%, #f1c6a0 0 9%, transparent 9.5%), radial-gradient(ellipse at 50% 85%, #30d158 0 26%, transparent 27%), linear-gradient(160deg, #7d5cff, #2d1b69); }
.sx-spf .q3 { background: radial-gradient(circle at 30% 60%, #ffd60a 0 14%, transparent 15%), linear-gradient(200deg, #ff375f, #5a1430); }
.sx-spf .q4 { background: repeating-linear-gradient(45deg, #64d2ff 0 10px, #4ab4e0 10px 20px); }
.sx-spn { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.sx-spn span { font-size: 12px; padding: 6px 11px; border-radius: 8px; background: rgba(255,255,255,.05); color: #c7c7cc; box-shadow: inset 0 0 0 1px rgba(255,255,255,.1); transition: all .3s; }
.sx-spn span.on { background: rgba(191,90,242,.18); color: #e2b8ff; box-shadow: inset 0 0 0 1px rgba(191,90,242,.6); }
.sx-chp { border-radius: 22px; background: #0e0f13; box-shadow: 0 40px 90px -40px rgba(0,0,0,.8), inset 0 0 0 1px rgba(255,255,255,.08); padding: 16px; }
.sx-chtl { position: relative; border-radius: 12px; background: #121318; padding: 30px 10px 10px; }
.sx-chr { position: absolute; left: 10px; right: 10px; top: 4px; height: 22px; }
.sx-chr button { position: absolute; top: 0; height: 22px; border: 0; border-left: 2px solid #ff9f0a; background: none; padding: 0 0 0 4px; display: flex; align-items: center; gap: 4px; color: #ffd39a; font: 700 11px Inter, system-ui, sans-serif; white-space: nowrap; animation: sxDrop .5s cubic-bezier(.2,.8,.2,1); }
.sx-chr button i { color: #ff9f0a; }
@keyframes sxDrop { from { opacity: 0; transform: translateY(-10px); } }
.sx-chv { position: relative; height: 46px; }
.sx-chv em { position: absolute; top: 0; height: 100%; border-radius: 5px; background: linear-gradient(135deg, hsl(var(--h), 70%, 45%), hsl(calc(var(--h) + 40), 70%, 30%)); }
.sx-chs { position: relative; height: 22px; margin-top: 6px; }
.sx-chs em { position: absolute; top: 0; height: 100%; border-radius: 4px; background: rgba(255,214,10,.2); box-shadow: inset 0 0 0 1px rgba(255,214,10,.5); color: #ffe27a; font: 600 10px/22px Inter, system-ui; font-style: normal; padding: 0 5px; overflow: hidden; white-space: nowrap; animation: sxDrop .4s; }
.sx-chph { position: absolute; top: 26px; bottom: 6px; left: 10px; width: 2px; background: #fff; }
.sx-chb { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 12px; }
.sx-yt, .sx-srt { border-radius: 12px; background: #15161b; overflow: hidden; }
.sx-yth { padding: 9px 12px; font-size: 12px; color: #c7c7cc; display: flex; align-items: center; gap: 6px; border-bottom: 1px solid rgba(255,255,255,.06); }
.sx-yth i { color: #ff3b30; } .sx-srt .sx-yth i { color: #ffd60a; }
.sx-chb pre { margin: 0; padding: 12px; min-height: 150px; font: 12.5px/1.6 ui-monospace, Menlo, Consolas, monospace; color: #e5e5ea; white-space: pre-wrap; }
.sx-chb pre b { color: #64d2ff; font-weight: 600; }

@media (max-width: 1100px) {
  .sx-plg, .sx-th { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sx-kf, .sx-cg, .sx-sc { grid-template-columns: 1fr; }
}
@media (max-width: 860px) {
  .sx-vid { grid-template-columns: 1fr; }
  .sx-vwin { margin: -40px 18px 0; transform: none; }
  .sx-two, .sx-chb { grid-template-columns: 1fr; }
  .sx-lng { grid-template-columns: 74px repeat(4, minmax(0, 1fr)); gap: 4px; }
  .sx-lng .n { font-size: 11px; padding: 0 6px; }
  .sx-lng .c.f { padding: 0 6px; } .sx-lng .c.f > b { display: none; }
  .sx-lnw small { width: 70px; }
}
@media (max-width: 560px) {
  .sx-plg, .sx-th { grid-template-columns: 1fr; }
  .sx-ph { grid-template-columns: 1fr; justify-items: center; }
  .sx-vh { width: 64px; font-size: 10px; padding: 0 6px; } .sx-vruler { margin-left: 64px; } .sx-vph { left: 64px; }
  .sx-vruler span:nth-child(2n) { display: none; }
  .sx-gr { gap: 6px; } .sx-ch { width: 50px; }
  .sx-lng .h { font-size: 10px; padding: 0 5px; } .sx-lng .h i { display: none; }
}
@media (prefers-reduced-motion: reduce) { .sx-tmw .sxln .ph, .sx-tmw .sxm span i { animation: none; } }

/* düzen temaları (mini) */
.sx-th { grid-template-columns: repeat(4, minmax(0, 1fr)); row-gap: 26px; }
.sx-tmw .sxtb { flex: 0 0 9%; display: flex; align-items: center; gap: 2px; padding: 0 5px; background: var(--top); border-top: 1px solid rgba(0,0,0,.25); }
.sx-tmw .sxtb b { width: 12px; height: 60%; border-radius: 1px; background: rgba(128,128,128,.45); }
.sx-tmw .sxtb b:nth-child(4) { background: var(--a); }
.sx-tmw .sxtb span { flex: 1; }
.sx-tmw .sxtb em { font: 700 7px ui-monospace, Menlo, monospace; font-style: normal; color: var(--lcdc); background: var(--lcd); padding: 1px 4px; border-radius: 2px; }
.sx-tmw .sxru { flex: 0 0 13%; display: flex; flex-direction: column; background: var(--hd); }
.sx-tmw .sxru i { flex: 1; border-bottom: 1px solid rgba(0,0,0,.2); background: repeating-linear-gradient(90deg, rgba(128,128,128,.5) 0 1px, transparent 1px 10%) 22% 0 / 78% 100% no-repeat; }
.sx-thm.lpt .sx-tmw .sxln em { height: 18%; }
.sx-thm.lpt .sx-tmw .sxln em::after { top: auto; bottom: 0; }
.sx-tmw .sxbt { flex: 0 0 10%; display: flex; align-items: center; justify-content: center; gap: 4px; background: var(--top); border-top: 1px solid rgba(0,0,0,.3); }
.sx-tmw .sxbt .lcd { margin: 0 6px 0 0; }
.sx-tmw .sxbt i { width: 8px; height: 8px; border-radius: 2px; background: rgba(200,200,210,.5); }
.sx-thm.ls1 .sx-tmw .sxb { grid-template-columns: 18% 1fr 22%; }
.sx-thm.ls1 .sx-tmw .sxb::after { content: ''; background: var(--hd); border-left: 1px solid rgba(0,0,0,.25); }
.sx-thm.ls1 .sx-tmw .sxln em { border-radius: 3px; }
.sx-thm.ls1 .sx-tmw .sxln em::before { opacity: .92; }
@media (max-width: 1100px) { .sx-th { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .sx-th { grid-template-columns: 1fr; } }

/* =========================================================
   YAPAY ZEKÂ VİTRİNİ VE ÖĞRETMEN (sx-ai.php)
   ========================================================= */
.sxa-sw, .sxa-cue, .sxa-brw, .sxa-gd, .sxa-tu .sxa-tapp { border-radius: 22px; background: #0e0f13; color: #e9e9ee; box-shadow: 0 40px 90px -40px rgba(0,0,0,.8), inset 0 0 0 1px rgba(255,255,255,.08); overflow: hidden; position: relative; }
.sxa-bar { display: flex; align-items: center; gap: 8px; padding: 11px 14px; font-size: 13px; color: #c7c7cc; background: #17181d; border-bottom: 1px solid rgba(255,255,255,.06); }
.sxa-bar b { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
.sxa-bar b i { color: #30d158; }
.sxa-st { margin-left: auto; font: 600 12px ui-monospace, Menlo, monospace; color: #7dfb9b; background: #050607; padding: 5px 9px; border-radius: 7px; box-shadow: inset 0 0 0 1px rgba(125,251,155,.15); white-space: nowrap; }
/* stem */
.sxa-sw { margin-top: 34px; }
.sxa-body { position: relative; padding: 6px 0; }
.sxa-row { display: flex; align-items: stretch; height: 64px; border-bottom: 1px solid rgba(255,255,255,.05); transition: height .6s cubic-bezier(.2,.8,.2,1), opacity .5s; }
.sxa-row.st { height: 0; opacity: 0; overflow: hidden; }
.sxa-sw.split .sxa-row.st { height: 52px; opacity: 1; }
.sxa-sw.split .sxa-row.mix { opacity: .35; }
.sxa-h { width: 112px; flex: none; display: flex; align-items: center; gap: 8px; padding: 0 12px; font-size: 12.5px; font-weight: 600; color: #d1d1d6; background: #121318; border-right: 1px solid rgba(255,255,255,.06); }
.sxa-h > i { width: 9px; height: 9px; border-radius: 3px; flex: none; }
.sxa-row.st .sxa-h i { font-size: 16px; color: var(--c); }
.sxa-row canvas { flex: 1; min-width: 0; height: 100%; display: block; }
.sxa-menu { position: absolute; left: 34%; top: 30px; width: 236px; padding: 6px; border-radius: 12px; background: rgba(32,33,38,.97); box-shadow: 0 20px 50px -10px rgba(0,0,0,.7), inset 0 0 0 1px rgba(255,255,255,.1); opacity: 0; transform: scale(.94) translateY(-6px); transform-origin: 0 0; transition: .25s cubic-bezier(.2,.8,.2,1); pointer-events: none; z-index: 3; }
.sxa-menu.on { opacity: 1; transform: none; }
.sxa-menu button { display: flex; align-items: center; gap: 9px; width: 100%; border: 0; background: none; color: #e5e5ea; font: 500 13px Inter, system-ui, sans-serif; padding: 7px 9px; border-radius: 7px; text-align: left; }
.sxa-menu button i { font-size: 15px; opacity: .8; }
.sxa-menu button.on.hot { background: #0a84ff; color: #fff; }
.sxa-menu hr { border: 0; border-top: 1px solid rgba(255,255,255,.08); margin: 4px 2px; }
.sxa-prog { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) scale(.95); width: 300px; display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 16px; background: rgba(26,28,34,.96); box-shadow: 0 24px 60px -16px rgba(0,0,0,.8), inset 0 0 0 1px rgba(255,255,255,.1); opacity: 0; transition: .3s; z-index: 3; flex-wrap: wrap; }
.sxa-prog.on { opacity: 1; transform: translate(-50%, -50%); }
.sxa-prog > i { font-size: 24px; color: #bf5af2; }
.sxa-prog span { display: flex; flex-direction: column; flex: 1; } .sxa-prog b { font-size: 13.5px; } .sxa-prog small { font-size: 11.5px; color: #8e8e93; }
.sxa-prog em { flex: 1 0 100%; height: 5px; border-radius: 3px; background: rgba(255,255,255,.1); overflow: hidden; }
.sxa-prog em i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #ff375f, #ff9f0a, #0a84ff, #30d158); border-radius: 3px; }
.sxa-cur { position: absolute; left: 0; top: 0; font-size: 22px; color: #fff; filter: drop-shadow(0 2px 4px rgba(0,0,0,.6)); z-index: 4; transition: left .8s cubic-bezier(.4,0,.2,1), top .8s cubic-bezier(.4,0,.2,1), opacity .3s; pointer-events: none; }
/* araç kutusu */
.sxa-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: 34px; }
.sxa-tool { border-radius: 20px; background: #101115; color: #e9e9ee; overflow: hidden; box-shadow: 0 24px 60px -34px rgba(0,0,0,.7), inset 0 0 0 1px rgba(255,255,255,.07); display: flex; flex-direction: column; }
.sxa-tool canvas { width: 100%; height: 132px; display: block; background: radial-gradient(120% 100% at 50% 0%, color-mix(in srgb, var(--c) 14%, #101115), #0b0c0f); }
.sxa-tt { display: flex; gap: 11px; padding: 14px 15px 16px; align-items: flex-start; }
.sxa-tt > i { font-size: 22px; color: var(--c); flex: none; margin-top: 1px; }
.sxa-tt span { display: flex; flex-direction: column; gap: 3px; } .sxa-tt b { font-size: 15px; letter-spacing: -.01em; } .sxa-tt small { font-size: 13px; color: #a1a1a6; line-height: 1.45; }
/* yayın */
.sxa-cue canvas { width: 100%; height: 250px; display: block; }
.sxa-cues { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding: 12px 14px 16px; }
.sxa-cues div { padding: 10px 12px; border-radius: 12px; background: color-mix(in srgb, var(--c) 10%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 35%, transparent); display: flex; flex-direction: column; gap: 3px; }
.sxa-cues small { font-size: 11.5px; color: #a1a1a6; } .sxa-cues b { font: 600 19px ui-monospace, Menlo, monospace; color: #fff; }
/* tarayıcı */
.sxa-brw { max-width: 420px; justify-self: center; width: 100%; }
.sxa-btabs { display: flex; gap: 4px; padding: 8px; background: rgba(0,0,0,.25); border-bottom: 1px solid rgba(255,255,255,.06); }
.sxa-btabs span { height: 32px; min-width: 36px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; border-radius: 8px; color: #8e8e93; font-size: 13px; font-weight: 600; padding: 0 9px; }
.sxa-btabs span i { font-size: 17px; } .sxa-btabs span.on { flex: 1; justify-content: flex-start; color: #fff; background: rgba(255,255,255,.09); } .sxa-btabs span.on i { color: #30d158; }
.sxa-bq { display: flex; align-items: center; gap: 8px; margin: 10px; padding: 8px 11px; border-radius: 9px; background: #17181d; box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); font-size: 13px; color: #fff; min-height: 34px; }
.sxa-bq i.ph-duotone { color: #8e8e93; }
.sxa-caret { width: 1.5px; height: 15px; background: #30d158; animation: sxaBl 1s steps(2) infinite; }
@keyframes sxaBl { 50% { opacity: 0; } }
.sxa-tree { padding: 0 6px 6px; min-height: 250px; }
.sxa-tree div { display: flex; align-items: center; gap: 7px; padding: 6px 8px 6px calc(8px + var(--d) * 16px); border-radius: 7px; font-size: 13px; color: #d1d1d6; transition: background .2s; }
.sxa-tree div i { font-size: 15px; color: #8e8e93; } .sxa-tree div.d i:last-of-type { color: #ffd60a; } .sxa-tree div.f i { color: #64d2ff; }
.sxa-tree div.on { background: rgba(48,209,88,.16); } .sxa-tree div.drag { opacity: .35; }
.sxa-pv { display: flex; align-items: center; gap: 9px; padding: 10px 12px; border-top: 1px solid rgba(255,255,255,.07); font-size: 12px; color: #a1a1a6; }
.sxa-pv > i { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; background: rgba(255,255,255,.08); color: #fff; font-size: 13px; flex: none; }
.sxa-pv span { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sxa-pv canvas { width: 90px; height: 26px; flex: none; }
.sxa-ghost { position: absolute; z-index: 5; padding: 6px 10px; border-radius: 8px; background: rgba(48,209,88,.9); color: #04230e; font: 600 12px Inter, system-ui, sans-serif; pointer-events: none; transition: left .9s cubic-bezier(.4,0,.2,1), top .9s cubic-bezier(.4,0,.2,1), opacity .3s; }
/* kılavuz ve öğretmen */
.sxa-hw { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 22px; margin-top: 34px; align-items: start; }
.sxa-gq { display: flex; align-items: center; gap: 9px; margin: 16px; padding: 12px 14px; border-radius: 12px; background: #17181d; box-shadow: inset 0 0 0 1.5px var(--acc); font-size: 15px; color: #fff; min-height: 46px; }
.sxa-gq i.ph-duotone { font-size: 18px; color: #8e8e93; } .sxa-gq kbd { margin-left: auto; font: 600 11px ui-monospace, monospace; padding: 4px 7px; border-radius: 6px; background: rgba(255,255,255,.08); color: #8e8e93; }
.sxa-gr { padding: 0 10px; min-height: 230px; }
.sxa-gr > div { display: flex; gap: 11px; align-items: flex-start; padding: 11px 12px; border-radius: 12px; opacity: 0; transform: translateY(8px); transition: .35s cubic-bezier(.2,.8,.2,1); transition-delay: calc(var(--i) * .08s); }
.sxa-gr.on > div { opacity: 1; transform: none; }
.sxa-gr > div:first-child { background: color-mix(in srgb, var(--acc) 14%, transparent); }
.sxa-gr > div > i { font-size: 18px; color: var(--acc); margin-top: 2px; }
.sxa-gr span { display: flex; flex-direction: column; gap: 2px; } .sxa-gr small { font-size: 11px; color: #8e8e93; } .sxa-gr b { font-size: 14px; } .sxa-gr em { font-style: normal; font-size: 12.5px; color: #a1a1a6; }
.sxa-gr em::first-line { color: #c7c7cc; }
.sxa-gf { display: flex; gap: 16px; padding: 12px 16px; border-top: 1px solid rgba(255,255,255,.06); font-size: 11.5px; color: #8e8e93; }
.sxa-gf kbd { font: 600 10px ui-monospace, monospace; padding: 2px 5px; border-radius: 5px; background: rgba(255,255,255,.08); margin-right: 2px; }
.sxa-tapp { height: 330px; }
.sxa-ttop { display: flex; align-items: center; gap: 8px; padding: 10px 12px; background: #17181d; border-bottom: 1px solid rgba(255,255,255,.06); }
.sxa-ttop b { height: 30px; min-width: 30px; padding: 0 10px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; background: rgba(255,255,255,.07); font-size: 12.5px; font-weight: 600; color: #e5e5ea; }
.sxa-ttop b[data-hb="1"] i { color: #ff453a; } .sxa-ttop b[data-hb="3"] { background: var(--acc); color: #111; } .sxa-ttop .sp { flex: 1; }
.sxa-tlanes { padding: 14px 14px 0; display: flex; flex-direction: column; gap: 10px; }
.sxa-tlanes i { height: 44px; border-radius: 9px; background: linear-gradient(90deg, rgba(255,255,255,.06), rgba(255,255,255,.02)); }
.sxa-tlanes i:nth-child(1) { width: 70%; background: color-mix(in srgb, var(--acc) 22%, transparent); }
.sxa-tlanes i:nth-child(2) { width: 52%; margin-left: 18%; }
.sxa-tapp::after { content: ''; position: absolute; inset: 0; background: rgba(0,0,0,.45); pointer-events: none; }
.sxa-ring { position: absolute; z-index: 2; border-radius: 11px; box-shadow: 0 0 0 2px #0a84ff, 0 0 0 9999px rgba(0,0,0,.0), 0 0 24px 4px rgba(10,132,255,.5); transition: all .55s cubic-bezier(.2,.8,.2,1); background: rgba(255,255,255,.06); }
.sxa-tc { position: absolute; z-index: 3; width: 250px; padding: 12px 13px; border-radius: 14px; background: rgba(32,33,38,.97); box-shadow: 0 20px 50px -14px rgba(0,0,0,.8), inset 0 0 0 1px rgba(255,255,255,.12); transition: all .55s cubic-bezier(.2,.8,.2,1); }
.sxa-tc .h { display: flex; align-items: center; gap: 8px; } .sxa-tc .h em { width: 22px; height: 22px; border-radius: 7px; display: grid; place-items: center; font-style: normal; font-size: 11.5px; font-weight: 700; color: #fff; background: linear-gradient(160deg, #5e9bff, #0a64e0); }
.sxa-tc .h b { font-size: 13.5px; } .sxa-tc p { margin: 6px 0 8px; font-size: 12px; line-height: 1.45; color: #aeaeb2; }
.sxa-tc .tk { display: flex; gap: 7px; align-items: center; padding: 7px 9px; border-radius: 9px; font-size: 11.5px; font-weight: 600; color: #64a8ff; background: rgba(10,132,255,.12); }
.sxa-tc .tk.ok { color: #30d158; background: rgba(48,209,88,.13); }
.sxa-fab { position: absolute; right: 12px; bottom: 12px; z-index: 3; display: flex; align-items: center; gap: 9px; padding: 8px 12px 8px 8px; border-radius: 13px; background: rgba(32,33,38,.95); box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); }
.sxa-fab > span { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; color: #fff; background: linear-gradient(160deg, #5e9bff, #0a64e0); animation: sxaPulse 2.4s ease-out infinite; }
@keyframes sxaPulse { 0% { box-shadow: 0 0 0 0 rgba(10,132,255,.6); } 70%, 100% { box-shadow: 0 0 0 10px rgba(10,132,255,0); } }
.sxa-fab b { display: flex; flex-direction: column; font-size: 12.5px; color: #fff; } .sxa-fab small { font-size: 10.5px; font-weight: 500; color: #8e8e93; }
.sxa-les { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
.sxa-les div { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; padding: 12px 6px; border-radius: 14px; background: #101115; color: #e5e5ea; box-shadow: inset 0 0 0 1px rgba(255,255,255,.07); }
.sxa-les i { font-size: 22px; color: var(--c); } .sxa-les b { font-size: 12px; line-height: 1.25; } .sxa-les small { font-size: 10.5px; color: #8e8e93; }
@media (max-width: 1000px) { .sxa-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .sxa-hw { grid-template-columns: 1fr; } }
@media (max-width: 640px) { .sxa-grid { grid-template-columns: 1fr; } .sxa-h { width: 84px; font-size: 11px; } .sxa-menu { left: 12%; } .sxa-les { grid-template-columns: repeat(3, minmax(0, 1fr)); } .sxa-cues { grid-template-columns: 1fr; } .sxa-cue canvas { height: 200px; } .sxa-tc { width: 210px; } }
.sxa-help .sx-chips li, .sxa-brs .sx-chips li { background: rgba(0,0,0,.04); color: inherit; box-shadow: inset 0 0 0 1px rgba(0,0,0,.08); }
.sxa-help .sx-chips li i { color: var(--acc, #30d158); }
/* Stüdyo Pilotu vitrini */
.sxa-tapp .sxa-fab { display: none; }
.sxa-tc { opacity: 0; }
.sxa-ring { opacity: 0; }
.sxa-tc .do { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; padding: 6px 10px; border-radius: 8px; font-size: 11.5px; font-weight: 600; color: #64a8ff; box-shadow: inset 0 0 0 1px rgba(100,168,255,.35); transition: background .2s; }
.sxa-tc .do.hot { background: rgba(10,132,255,.2); }
.sxa-gc { position: absolute; z-index: 5; left: 0; top: 0; font-size: 24px; color: #fff; opacity: 0; pointer-events: none; transform: translate(-4px, -2px); filter: drop-shadow(0 3px 6px rgba(0,0,0,.7)); }
.sxa-gc::after { content: ''; position: absolute; left: -9px; top: -9px; width: 20px; height: 20px; border-radius: 50%; border: 2px solid #0a84ff; opacity: 0; }
.sxa-gc.tap::after { animation: sxaTap .6s ease-out; }
@keyframes sxaTap { 0% { opacity: 1; transform: scale(.4); } 100% { opacity: 0; transform: scale(2.2); } }
.sxa-ttop b.press { transform: scale(.94); background: rgba(10,132,255,.35); }
.sxa-ttop b { transition: transform .15s, background .2s; }
.sxa-ask { position: absolute; right: 12px; bottom: 12px; z-index: 4; display: flex; gap: 10px; align-items: center; width: min(340px, calc(100% - 24px)); padding: 10px 12px; border-radius: 14px; background: rgba(32,33,38,.97); box-shadow: 0 20px 50px -14px rgba(0,0,0,.8), inset 0 0 0 1px rgba(255,255,255,.12); transition: transform .4s cubic-bezier(.2,.8,.2,1), box-shadow .3s; }
.sxa-ask.on { transform: translateY(-6px); box-shadow: 0 20px 50px -14px rgba(0,0,0,.8), inset 0 0 0 1.5px rgba(10,132,255,.7), 0 0 0 4px rgba(10,132,255,.15); }
.sxa-ask .ic { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; flex: none; color: #fff; background: linear-gradient(160deg, #5e9bff, #0a64e0); animation: sxaPulse 2.4s ease-out infinite; }
.sxa-ask > div { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.sxa-ask b { font-size: 12.5px; color: #fff; }
.sxa-ask .in { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: #e5e5ea; min-height: 18px; }
.sxa-ask .in > i.ph-duotone { color: #0a84ff; }
.sxa-ask em { font-style: normal; white-space: nowrap; overflow: hidden; }
.sxa-les div b { font-size: 11.5px; }

/* ================= DAW ENTEGRASYONU (sx-daw.php) ================= */
.sxd-stage { position: relative; margin-top: 34px; display: flex; flex-direction: column; align-items: stretch; }
.sxd-hw { position: relative; border-radius: 22px; padding: 14px 16px 18px; background: linear-gradient(180deg, #2a2c31, #1b1c20 60%, #151619); box-shadow: 0 40px 90px -40px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,255,255,.12), inset 0 0 0 1px rgba(255,255,255,.06); }
.sxd-hw::before { content: ''; position: absolute; inset: 0; border-radius: inherit; background: repeating-linear-gradient(90deg, rgba(255,255,255,.012) 0 2px, transparent 2px 4px); pointer-events: none; }
.sxd-lcd { display: grid; grid-template-columns: repeat(8, 1fr); gap: 0; margin: 0 0 12px; width: calc(100% - 210px); padding: 7px 6px; border-radius: 8px; background: linear-gradient(180deg, #0c2a33, #082027); box-shadow: inset 0 2px 8px rgba(0,0,0,.6), 0 0 0 1px rgba(0,0,0,.5); font: 600 11.5px ui-monospace, 'SF Mono', Menlo, monospace; color: #7ff3ff; text-shadow: 0 0 6px rgba(127,243,255,.55); }
.sxd-lcd span { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 0 2px; border-right: 1px dashed rgba(127,243,255,.12); min-width: 0; }
.sxd-lcd span:last-child { border-right: 0; }
.sxd-lcd b, .sxd-lcd em { font: inherit; font-style: normal; white-space: nowrap; overflow: hidden; max-width: 100%; transition: opacity .2s; }
.sxd-lcd em { opacity: .8; }
.sxd-lcd.swp b, .sxd-lcd.swp em { opacity: .15; }
.sxd-body { display: flex; gap: 16px; align-items: stretch; }
.sxd-strips { flex: 1; display: grid; grid-template-columns: repeat(8, 1fr) 1.1fr; gap: 6px; }
.sxd-s { display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 6px 0 8px; border-radius: 10px; background: rgba(0,0,0,.18); position: relative; }
.sxd-s.mst { background: rgba(0,0,0,.3); justify-content: flex-end; }
.sxd-lbl { font: 700 9px Inter, system-ui, sans-serif; letter-spacing: .08em; color: #8e8e93; margin-bottom: auto; padding-top: 6px; }
.sxd-pot { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: conic-gradient(from 225deg, #ffb340 0 calc(var(--p, .5) * 270deg), rgba(255,255,255,.08) 0 270deg, transparent 0); position: relative; }
.sxd-pot > i { width: 20px; height: 20px; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #4a4c52, #1e1f23); box-shadow: 0 2px 4px rgba(0,0,0,.6); transform: rotate(calc(-135deg + var(--p, .5) * 270deg)); position: relative; }
.sxd-pot > i::after { content: ''; position: absolute; left: 50%; top: 2px; width: 2px; height: 6px; margin-left: -1px; border-radius: 1px; background: #fff; }
.sxd-b { width: 78%; max-width: 44px; height: 15px; border-radius: 4px; display: grid; place-items: center; font: 700 7.5px Inter, system-ui, sans-serif; letter-spacing: .04em; color: #8e8e93; background: linear-gradient(180deg, #3a3c42, #2a2b30); box-shadow: 0 1px 0 rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.08); transition: background .15s, color .15s, box-shadow .15s; }
.sxd-b.on.r { background: #ff453a; color: #fff; box-shadow: 0 0 10px rgba(255,69,58,.8); }
.sxd-b.on.s { background: #ffd60a; color: #1c1c1e; box-shadow: 0 0 10px rgba(255,214,10,.7); }
.sxd-b.on.m { background: #ff9f0a; color: #1c1c1e; box-shadow: 0 0 10px rgba(255,159,10,.7); }
.sxd-b.on.e { background: #30d158; color: #0b2a13; box-shadow: 0 0 10px rgba(48,209,88,.7); }
.sxd-meter { width: 60%; height: 5px; border-radius: 3px; background: rgba(255,255,255,.06); overflow: hidden; }
.sxd-meter i { display: block; height: 100%; width: calc(var(--m, 0) * 100%); background: linear-gradient(90deg, #30d158 0 65%, #ffd60a 65% 85%, #ff453a 85%); transition: width .06s linear; }
.sxd-fd { position: relative; width: 8px; height: 150px; margin-top: 4px; border-radius: 4px; background: #0b0b0d; box-shadow: inset 0 1px 3px rgba(0,0,0,.9), 0 1px 0 rgba(255,255,255,.06); }
.sxd-cap { position: absolute; left: 50%; bottom: calc(var(--v, .75) * (100% - 26px)); width: 30px; height: 26px; margin-left: -15px; border-radius: 4px; background: linear-gradient(180deg, #e9eaee, #a7a9b0 48%, #6d6f76 52%, #c9cbd1); box-shadow: 0 4px 8px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.7); transition: box-shadow .15s; }
.sxd-cap::after { content: ''; position: absolute; left: 4px; right: 4px; top: 12px; height: 2px; background: #1c1c1e; }
.sxd-s.tch .sxd-cap { box-shadow: 0 0 0 2px #30d158, 0 0 18px rgba(48,209,88,.7); }
.sxd-side { width: 194px; flex: none; display: flex; flex-direction: column; gap: 8px; align-items: stretch; margin-top: -48px; }
.sxd-tc { height: 40px; border-radius: 8px; display: flex; align-items: center; justify-content: flex-end; padding: 0 12px; background: #120607; box-shadow: inset 0 2px 8px rgba(0,0,0,.8); font: 700 20px ui-monospace, 'SF Mono', Menlo, monospace; letter-spacing: .08em; color: #ff5a4f; text-shadow: 0 0 8px rgba(255,90,79,.7); white-space: pre; }
.sxd-row, .sxd-tr { display: flex; gap: 6px; }
.sxd-k { flex: 1; height: 26px; border-radius: 6px; display: grid; place-items: center; font: 700 8.5px Inter, system-ui, sans-serif; letter-spacing: .05em; color: #aeaeb2; background: linear-gradient(180deg, #3a3c42, #26272c); box-shadow: 0 2px 0 rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.08); transition: background .12s, color .12s, box-shadow .12s, transform .12s; }
.sxd-tr .sxd-k { height: 32px; font-size: 14px; }
.sxd-k.on { color: #fff; background: #0a84ff; box-shadow: 0 0 12px rgba(10,132,255,.7); transform: translateY(1px); }
.sxd-k.sxd-kg.on { background: #30d158; box-shadow: 0 0 14px rgba(48,209,88,.8); }
.sxd-k.sxd-ka.on { background: #ff453a; box-shadow: 0 0 14px rgba(255,69,58,.8); }
.sxd-jog { align-self: center; width: 86px; height: 86px; margin-top: 4px; border-radius: 50%; background: radial-gradient(circle at 50% 50%, #2b2c31 0 46%, #17181b 47% 100%); box-shadow: 0 6px 14px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.1); position: relative; }
.sxd-jog i { position: absolute; left: 50%; top: 10px; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; background: #3e4046; box-shadow: inset 0 2px 3px rgba(0,0,0,.6); transform-origin: 6px 33px; transform: rotate(var(--j, 0deg)); }
.sxd-hand { position: absolute; z-index: 5; left: 0; top: 0; font-size: 34px; color: #f5d0b5; filter: drop-shadow(0 6px 10px rgba(0,0,0,.6)); pointer-events: none; opacity: 0; transition: opacity .3s; transform: translate(-10px, -4px); }
.sxd-cable { position: relative; height: 54px; margin: 0 auto; width: 2px; background: linear-gradient(180deg, rgba(48,209,88,.6), rgba(10,132,255,.6)); }
.sxd-cable span { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); white-space: nowrap; font: 600 11.5px Inter, system-ui, sans-serif; color: #a1a1a6; padding: 4px 10px; border-radius: 99px; background: rgba(255,255,255,.06); box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); }
.sxd-cable i { position: absolute; left: -3px; width: 8px; height: 8px; border-radius: 50%; background: #7dfb9b; box-shadow: 0 0 10px #30d158; animation: sxdPulse 1.4s linear infinite; }
.sxd-cable i:nth-child(3) { animation-delay: -.47s; background: #64d2ff; box-shadow: 0 0 10px #0a84ff; animation-direction: reverse; } .sxd-cable i:nth-child(4) { animation-delay: -.94s; }
@keyframes sxdPulse { from { top: -4px; opacity: 0; } 20% { opacity: 1; } 80% { opacity: 1; } to { top: 50px; opacity: 0; } }
.sxd-sw { position: relative; border-radius: 22px; background: #0e0f13; color: #e9e9ee; box-shadow: 0 40px 90px -40px rgba(0,0,0,.8), inset 0 0 0 1px rgba(255,255,255,.08); overflow: hidden; }
.sxd-stc { margin-left: auto; font: 700 13px ui-monospace, Menlo, monospace; color: #30d158; }
.sxd-on { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; color: #30d158; padding: 3px 9px; border-radius: 99px; background: rgba(48,209,88,.12); }
.sxd-mix { display: grid; grid-template-columns: repeat(8, 1fr); gap: 8px; padding: 14px; }
.sxd-ms { position: relative; display: flex; flex-direction: column; align-items: center; gap: 7px; padding: 9px 6px 8px; border-radius: 12px; background: linear-gradient(180deg, #1c1f27, #15171d); box-shadow: inset 0 2px 0 var(--c), inset 0 0 0 1px rgba(255,255,255,.05); transition: transform .35s cubic-bezier(.2,.8,.2,1), opacity .35s; }
.sxd-mix.shift .sxd-ms { transform: translateX(-14px); opacity: 0; }
.sxd-mn { display: flex; align-items: center; justify-content: space-between; gap: 4px; width: 100%; font-size: 11.5px; }
.sxd-mn b { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sxd-mn em { font: 700 9px ui-monospace, monospace; font-style: normal; color: #0b0c0e; background: #30d158; border-radius: 4px; padding: 1px 4px; }
.sxd-pan { width: 80%; height: 4px; border-radius: 2px; background: rgba(255,255,255,.08); position: relative; }
.sxd-pan i { position: absolute; top: 50%; left: calc(var(--p, .5) * 100%); width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: #d1d1d6; }
.sxd-mf { display: flex; gap: 6px; align-items: stretch; height: 130px; }
.sxd-mtr { display: flex; gap: 2px; width: 10px; }
.sxd-mtr i { flex: 1; border-radius: 2px; background: rgba(255,255,255,.05); position: relative; overflow: hidden; }
.sxd-mtr i::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: calc(var(--m, 0) * 100%); background: linear-gradient(0deg, #30d158 0 60%, #ffd60a 60% 85%, #ff453a 85%); transition: height .06s linear; }
.sxd-fd2 { position: relative; width: 6px; border-radius: 3px; background: #050506; }
.sxd-cap2 { position: absolute; left: 50%; bottom: calc(var(--v, .75) * (100% - 18px)); width: 22px; height: 18px; margin-left: -11px; border-radius: 4px; background: linear-gradient(180deg, #4a4d55, #2a2c33); box-shadow: 0 3px 6px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.15); }
.sxd-cap2::after { content: ''; position: absolute; left: 3px; right: 3px; top: 8px; height: 2px; background: var(--c); }
.sxd-db { font: 600 10.5px ui-monospace, Menlo, monospace; color: #c7c7cc; }
.sxd-ms-b { display: flex; gap: 4px; }
.sxd-ms-b i { width: 20px; height: 18px; border-radius: 4px; display: grid; place-items: center; font: 700 9.5px Inter, system-ui, sans-serif; font-style: normal; color: #aeaeb2; background: rgba(255,255,255,.07); transition: background .15s, color .15s; }
.sxd-ms-b i.on[data-m] { background: #ff9f0a; color: #1c1c1e; } .sxd-ms-b i.on[data-s] { background: #ffd60a; color: #1c1c1e; }
.sxd-ms.sel { box-shadow: inset 0 2px 0 var(--c), inset 0 0 0 1.5px rgba(48,209,88,.7); }
.sxd-cur { position: absolute; z-index: 4; left: 0; top: 0; font-size: 22px; color: #fff; filter: drop-shadow(0 2px 4px rgba(0,0,0,.7)); pointer-events: none; opacity: 0; transition: opacity .3s; }
.sxd-say { align-self: center; margin-top: 18px; display: inline-flex; align-items: center; gap: 10px; padding: 10px 18px; border-radius: 99px; background: rgba(255,255,255,.06); box-shadow: inset 0 0 0 1px rgba(255,255,255,.1); color: #f2f2f7; font-size: 14.5px; font-weight: 500; transition: opacity .25s; }
.sxd-say i { color: #7dfb9b; font-size: 17px; }
.sxd-say.fade { opacity: 0; }
.sxd-feat { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 34px; }
.sxd-feat .aup-c > i, .sxd-sync .aup-c > i { font-size: 22px; }
@media (max-width: 980px) {
  .sxd-side { display: none; } .sxd-lcd { width: auto; }
  .sxd-feat { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .sxd-hw { padding: 10px 8px 12px; } .sxd-strips { gap: 3px; grid-template-columns: repeat(8, 1fr); } .sxd-s.mst { display: none; }
  .sxd-lcd { font-size: 8.5px; padding: 5px 2px; } .sxd-pot { width: 22px; height: 22px; } .sxd-pot > i { width: 14px; height: 14px; }
  .sxd-b { height: 12px; font-size: 6px; width: 92%; } .sxd-fd { height: 110px; } .sxd-cap { width: 22px; margin-left: -11px; height: 20px; } .sxd-cap::after { top: 9px; }
  .sxd-mix { grid-template-columns: repeat(4, 1fr); } .sxd-ms:nth-child(n+5) { display: none; } .sxd-on { display: none; }
  .sxd-feat { grid-template-columns: 1fr; } .sxd-say { font-size: 13px; text-align: center; }
}

/* ---- MIDI klavye ---- */
.sxd-kbw { border-radius: 22px; background: #0e0f13; color: #e9e9ee; box-shadow: 0 40px 90px -40px rgba(0,0,0,.5), inset 0 0 0 1px rgba(255,255,255,.08); overflow: hidden; position: relative; }
.sxd-kbw canvas { display: block; width: 100%; height: 190px; }
.sxd-toast { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; color: #30d158; padding: 3px 9px; border-radius: 99px; background: rgba(48,209,88,.12); opacity: 0; transform: translateY(-4px); transition: opacity .3s, transform .3s; }
.sxd-toast.on { opacity: 1; transform: none; }
.sxd-keys { display: flex; gap: 10px; padding: 12px; background: linear-gradient(180deg, #23252a, #17181c); border-top: 1px solid rgba(255,255,255,.06); }
.sxd-wh { display: flex; gap: 6px; }
.sxd-pb { width: 22px; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.sxd-pb i { flex: 1; width: 16px; border-radius: 6px; background: #0b0b0d; position: relative; box-shadow: inset 0 2px 4px rgba(0,0,0,.8); }
.sxd-pb i::after { content: ''; position: absolute; left: 1px; right: 1px; height: 18px; top: calc(var(--w, .5) * (100% - 18px)); border-radius: 5px; background: linear-gradient(180deg, #5a5c62, #34363b); }
.sxd-pb small { font-size: 8.5px; color: #8e8e93; }
.sxd-kk { flex: 1; position: relative; height: 96px; display: flex; }
.sxd-kk .kw { flex: 1; margin: 0 1px; border-radius: 0 0 5px 5px; background: linear-gradient(180deg, #f2f2f4, #fff 80%, #dcdce0); box-shadow: inset 0 -3px 0 rgba(0,0,0,.12); transition: background .08s; }
.sxd-kk .kb { position: absolute; top: 0; width: 4.2%; height: 60%; margin-left: -2.1%; border-radius: 0 0 4px 4px; background: linear-gradient(180deg, #2c2d31, #111); z-index: 1; transition: background .08s; }
.sxd-kk .on.kw { background: linear-gradient(180deg, #a5f3c0, #30d158); } .sxd-kk .on.kb { background: linear-gradient(180deg, #30d158, #1a8a3a); }

/* ---- Senkron ---- */
.sxd-sy { margin-top: 34px; display: grid; grid-template-columns: 1fr 1.2fr 1fr; gap: 0; align-items: center; }
.sxd-app { border-radius: 20px; background: #0e0f13; color: #e9e9ee; box-shadow: 0 30px 70px -30px rgba(0,0,0,.8), inset 0 0 0 1px rgba(255,255,255,.08); overflow: hidden; }
.sxd-role { margin-left: auto; font-size: 11.5px; padding: 3px 9px; border-radius: 99px; background: rgba(48,209,88,.12); color: #30d158; transition: background .3s, color .3s; }
.sxd-role.f { background: rgba(10,132,255,.14); color: #64a8ff; }
.sxd-ab { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 22px 14px 20px; }
.sxd-big { font: 700 34px ui-monospace, 'SF Mono', Menlo, monospace; letter-spacing: .02em; }
.sxd-beat { display: flex; gap: 8px; } .sxd-beat i { width: 14px; height: 14px; border-radius: 50%; background: rgba(255,255,255,.1); transition: background .05s, box-shadow .05s; }
.sxd-beat i.on { background: #30d158; box-shadow: 0 0 10px #30d158; } .sxd-beat i.on:first-child { background: #ffd60a; box-shadow: 0 0 10px #ffd60a; }
.sxd-bpm { font-size: 12px; color: #8e8e93; }
.sxd-wire { position: relative; height: 150px; } .sxd-wire canvas { display: block; width: 100%; height: 100%; }
.sxd-tags { position: absolute; left: 0; right: 0; bottom: -6px; display: flex; flex-wrap: wrap; justify-content: center; gap: 5px; }
.sxd-tags span { font-size: 10.5px; padding: 3px 8px; border-radius: 99px; background: rgba(255,255,255,.06); color: #c7c7cc; }
@media (max-width: 860px) { .sxd-sy { grid-template-columns: 1fr; gap: 10px; } .sxd-wire { height: 120px; } }

/* ---- CaptStudio şablon önizlemesi ---- */
.tps { display: grid; grid-template-columns: 1.55fr 1fr; gap: 18px; margin-top: 34px; align-items: stretch; }
.tps-stage { position: relative; border-radius: 22px; overflow: hidden; background: #050507; box-shadow: 0 40px 90px -40px rgba(0,0,0,.55), inset 0 0 0 1px rgba(255,255,255,.08); aspect-ratio: 16 / 10; }
.tps-stage canvas { display: block; width: 100%; height: calc(100% - 46px); }
.tps-hud { position: absolute; left: 14px; top: 12px; display: flex; align-items: center; gap: 10px; color: #fff; }
.tps-hud b { font: 700 14px Inter, system-ui, sans-serif; text-shadow: 0 2px 8px rgba(0,0,0,.6); }
.tps-rec { display: inline-flex; align-items: center; gap: 6px; padding: 4px 9px; border-radius: 99px; font-size: 11px; font-weight: 700; background: rgba(0,0,0,.5); backdrop-filter: blur(8px); }
.tps-rec i { width: 7px; height: 7px; border-radius: 50%; background: #ff375f; box-shadow: 0 0 8px #ff375f; animation: bsBlink 1.2s steps(2) infinite; }
@keyframes bsBlink { 50% { opacity: .2; } }
.tps-tl { position: absolute; left: 0; right: 0; bottom: 0; height: 46px; display: flex; gap: 3px; padding: 9px 12px; background: #111216; border-top: 1px solid rgba(255,255,255,.06); }
.tps-tl i { min-width: 6px; border-radius: 5px; background: color-mix(in srgb, var(--c) 55%, #1b1c22); box-shadow: inset 0 2px 0 var(--c); opacity: .7; transition: opacity .2s, transform .2s; }
.tps-tl i.on { opacity: 1; transform: translateY(-2px); box-shadow: inset 0 2px 0 var(--c), 0 0 0 1.5px #fff; }
.tps-list { display: flex; flex-direction: column; gap: 8px; }
.tps-list button { flex: 1; display: flex; align-items: center; gap: 12px; padding: 10px 14px; border: 0; border-radius: 16px; cursor: pointer; text-align: left; font: inherit; color: inherit; background: var(--card, #fff); box-shadow: 0 0 0 0.5px rgba(0,0,0,.08), 0 10px 26px -20px rgba(0,0,0,.35); position: relative; overflow: hidden; transition: transform .2s, box-shadow .2s; }
.tps-list button:hover { transform: translateX(3px); }
.tps-list button > .ic { width: 38px; height: 38px; flex: none; border-radius: 11px; display: grid; place-items: center; font-size: 20px; color: var(--k); background: color-mix(in srgb, var(--k) 14%, transparent); }
.tps-list button > span:not(.ic) { flex: 1; display: flex; flex-direction: column; gap: 2px; } .tps-list b { font-size: 14.5px; } .tps-list small { font-size: 12.5px; color: var(--ink-2, #6e6e73); line-height: 1.35; }
.tps-list button em { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; } .tps-list button em i { display: block; height: 100%; width: 0; background: var(--k); }
.tps-list button.on { box-shadow: 0 0 0 1.5px var(--k), 0 16px 34px -20px var(--k); }
@media (max-width: 900px) { .tps { grid-template-columns: 1fr; } .tps-list small { display: none; } }
/* ---- özellik sayfalarında büyük ekran ---- */
.pg-show { padding: 90px 0 80px; }
.pg-showv, .tl-showv { margin-top: 34px; }
.tl-showv { margin-bottom: 34px; }

/* ================= MAESTRO (sx-maestro.php) ================= */
.mae-s { position: relative; overflow: hidden; isolation: isolate; }
.mae-s-bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.mae-s-bg i { position: absolute; width: 640px; height: 640px; border-radius: 50%; filter: blur(120px); opacity: .3; animation: maeAur 16s ease-in-out infinite alternate; }
.mae-s-bg i:nth-child(1) { left: -180px; top: -120px; background: #bf5af2; } .mae-s-bg i:nth-child(2) { right: -200px; top: 120px; background: #0a84ff; animation-delay: -5s; } .mae-s-bg i:nth-child(3) { left: 35%; bottom: -320px; background: #ff375f; opacity: .2; animation-delay: -10s; }
@keyframes maeAur { to { transform: translate(60px, 30px) scale(1.12); } }
.mae-kick em { font-style: normal; display: inline-flex; align-items: center; gap: 5px; margin-left: 8px; padding: 2px 9px; border-radius: 99px; font-size: 11.5px; color: #1c1c1e; background: linear-gradient(90deg, #ffe27a, #ffb340); }
.mae-grad { background: linear-gradient(90deg, #ff6ba1, #bf5af2 35%, #5e9bff 70%, #30d158); -webkit-background-clip: text; background-clip: text; color: transparent; }
.mae-stage { position: relative; margin-top: 40px; display: grid; grid-template-columns: 240px 120px 1fr; gap: 0; align-items: center; }
.mae-files { display: flex; flex-direction: column; gap: 8px; position: relative; z-index: 2; }
.mae-f { --a: 0; display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 14px; background: rgba(255,255,255,.06); box-shadow: inset 0 0 0 1px rgba(255,255,255,.1); color: #f2f2f7; transform: translateX(calc(var(--a) * 150px)) scale(calc(1 - var(--a) * .55)); opacity: calc(1 - var(--a) * .9); transition: box-shadow .3s; }
.mae-f > .ic { width: 32px; height: 32px; flex: none; border-radius: 10px; display: grid; place-items: center; font-size: 17px; color: var(--c); background: color-mix(in srgb, var(--c) 16%, transparent); }
.mae-f > span:not(.ic) { display: flex; flex-direction: column; min-width: 0; } .mae-f b { font-size: 13px; white-space: nowrap; } .mae-f small { font-size: 11.5px; color: #a1a1a6; }
.mae-orb { position: relative; justify-self: center; width: 92px; height: 92px; border-radius: 50%; display: grid; place-items: center; font-size: 36px; color: #fff; background: conic-gradient(from 0deg, #ff375f, #bf5af2, #0a84ff, #30d158, #ffd60a, #ff375f); box-shadow: 0 0 0 6px rgba(255,255,255,.04), 0 20px 50px -10px rgba(191,90,242,.6); z-index: 1; }
.mae-orb::before { content: ""; position: absolute; inset: 5px; border-radius: 50%; background: #0c0c11; }
.mae-orb > i { position: relative; z-index: 1; }
.mae-orb span { position: absolute; inset: -14px; border-radius: 50%; border: 2px solid rgba(191,90,242,.0); }
.mae-orb.on { animation: maeSpin 2.4s linear infinite; } .mae-orb.on > i { animation: maeSpin 2.4s linear infinite reverse; }
.mae-orb.on span { animation: maePulse 1.2s ease-out infinite; }
@keyframes maeSpin { to { transform: rotate(360deg); } }
@keyframes maePulse { from { border-color: rgba(191,90,242,.7); transform: scale(.85); } to { border-color: rgba(191,90,242,0); transform: scale(1.35); } }
.mae-app { position: relative; border-radius: 22px; overflow: hidden; background: #0e0f13; color: #e9e9ee; box-shadow: 0 40px 90px -40px rgba(0,0,0,.9), inset 0 0 0 1px rgba(255,255,255,.08); }
.mae-app canvas { display: block; width: 100%; height: 250px; }
.mae-st { margin-left: auto; font-size: 12px; padding: 3px 10px; border-radius: 99px; color: #e5d4ff; background: rgba(191,90,242,.18); transition: background .3s, color .3s; }
.mae-st.ok { color: #0b2a13; background: #30d158; }
.mae-done { position: absolute; left: 50%; bottom: 16px; transform: translate(-50%, 20px); display: flex; align-items: center; gap: 12px; padding: 10px 12px 10px 14px; border-radius: 16px; background: rgba(28,28,34,.95); box-shadow: inset 0 0 0 1px rgba(255,255,255,.12), 0 20px 40px -10px rgba(0,0,0,.8); opacity: 0; transition: opacity .35s, transform .35s; white-space: nowrap; }
.mae-done.on { opacity: 1; transform: translate(-50%, 0); }
.mae-done > i { font-size: 26px; color: #30d158; } .mae-done span { display: flex; flex-direction: column; } .mae-done b { font-size: 14px; } .mae-done small { font-size: 11.5px; color: #a1a1a6; }
.mae-done em { font-style: normal; display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 99px; font-size: 12.5px; font-weight: 600; color: #111; background: #fff; }
.mae-steps-s { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 40px; }
.mae-c { position: relative; padding: 22px; border-radius: 22px; background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)); box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); }
.mae-c .n { position: absolute; right: 18px; top: 14px; font: 800 34px Inter, system-ui, sans-serif; color: rgba(255,255,255,.06); }
.mae-c > .ic { width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center; font-size: 23px; color: var(--k); background: color-mix(in srgb, var(--k) 15%, transparent); margin-bottom: 12px; }
.mae-c h3 { margin: 0 0 6px; font: 750 17px Inter, system-ui, sans-serif; color: #fff; } .mae-c p { margin: 0; font-size: 14px; line-height: 1.5; color: #a1a1a6; }
.mae-sty-s { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px; margin-top: 26px; }
.mae-sty-s > span { font-size: 13px; color: #8e8e93; margin-right: 6px; }
.mae-sty-s b { display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; border-radius: 99px; font-size: 13.5px; font-weight: 600; color: #f2f2f7; background: rgba(255,255,255,.06); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--k) 40%, transparent); }
.mae-sty-s b i { color: var(--k); }
/* yeni bir çağ */
.mae-era { position: relative; overflow: hidden; isolation: isolate; padding: 130px 0 120px; background: radial-gradient(90% 70% at 50% 0%, #1b1030 0%, #07060c 55%, #030305 100%); color: #f5f5f7; }
.mae-era-bg { position: absolute; inset: 0; z-index: -1; } .mae-era-bg canvas { width: 100%; height: 100%; display: block; }
.mae-era-h { text-align: center; max-width: 900px; margin: 0 auto 56px; }
.mae-era-k { display: inline-flex; align-items: center; gap: 8px; padding: 7px 15px; border-radius: 99px; font-size: 13px; font-weight: 700; color: #e5d4ff; background: rgba(191,90,242,.14); box-shadow: inset 0 0 0 1px rgba(191,90,242,.4); }
.mae-era-h h2 { font: 800 clamp(40px, 6.4vw, 86px)/1.0 Inter, system-ui, sans-serif; letter-spacing: -0.055em; margin: 24px 0 22px; }
.mae-era-h h2 span { color: rgba(255,255,255,.4); } .mae-era-h h2 em { font-style: normal; background: linear-gradient(90deg, #ff6ba1, #bf5af2, #5e9bff); -webkit-background-clip: text; background-clip: text; color: transparent; }
.mae-era-h p { font-size: clamp(16.5px, 1.6vw, 20px); line-height: 1.55; color: #a1a1a6; margin: 0; }
.mae-vs { display: grid; grid-template-columns: 1fr 60px 1fr; gap: 0; align-items: stretch; max-width: 1000px; margin: 0 auto; }
.mae-old, .mae-new { position: relative; padding: 28px; border-radius: 26px; }
.mae-old { background: rgba(255,255,255,.035); box-shadow: inset 0 0 0 1px rgba(255,255,255,.07); color: #a1a1a6; }
.mae-new { background: linear-gradient(160deg, rgba(191,90,242,.22), rgba(10,132,255,.14)); box-shadow: inset 0 0 0 1px rgba(191,90,242,.45), 0 40px 90px -40px rgba(191,90,242,.6); }
.mae-old h3, .mae-new h3 { display: flex; align-items: center; gap: 9px; margin: 0 0 16px; font: 750 20px Inter, system-ui, sans-serif; color: #fff; }
.mae-old ul, .mae-new ul { list-style: none; margin: 0 0 22px; padding: 0; display: flex; flex-direction: column; gap: 9px; font-size: 14.5px; }
.mae-old li::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: #48484a; margin-right: 10px; vertical-align: middle; }
.mae-new li { font-size: 17px; font-weight: 600; color: #fff; } .mae-new li::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #30d158; box-shadow: 0 0 10px #30d158; margin-right: 12px; vertical-align: middle; }
.mae-clk { display: flex; align-items: baseline; gap: 10px; } .mae-clk b { font: 800 46px ui-monospace, 'SF Mono', Menlo, monospace; letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: #fff; } .mae-clk small { font-size: 13px; color: #8e8e93; }
.mae-old .mae-clk b { color: #ff9f0a; }
.mae-ready { display: inline-flex; align-items: center; gap: 8px; margin-top: 12px; padding: 8px 14px; border-radius: 99px; font-weight: 700; font-size: 14px; color: #0b2a13; background: #30d158; opacity: 0; transform: translateY(6px); transition: opacity .3s, transform .3s; }
.mae-ready.on { opacity: 1; transform: none; }
.mae-arrow { display: grid; place-items: center; font-size: 28px; color: #bf5af2; }
.mae-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; max-width: 1000px; margin: 50px auto 0; }
.mae-facts div { padding: 20px; border-radius: 20px; background: rgba(255,255,255,.04); box-shadow: inset 0 0 0 1px rgba(255,255,255,.07); display: flex; flex-direction: column; gap: 6px; }
.mae-facts b { font: 800 34px Inter, system-ui, sans-serif; letter-spacing: -.03em; background: linear-gradient(90deg, #fff, #c9b6ff); -webkit-background-clip: text; background-clip: text; color: transparent; } .mae-facts span { font-size: 13.5px; color: #a1a1a6; line-height: 1.45; }
@media (max-width: 980px) { .mae-stage { grid-template-columns: 1fr; gap: 16px; } .mae-files { flex-direction: row; flex-wrap: wrap; justify-content: center; } .mae-f { transform: none; opacity: 1; } .mae-orb { display: none; } .mae-steps-s { grid-template-columns: 1fr 1fr; } .mae-vs { grid-template-columns: 1fr; gap: 14px; } .mae-arrow { transform: rotate(90deg); } .mae-facts { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .mae-steps-s { grid-template-columns: 1fr; } .mae-f b { font-size: 12px; } .mae-done small { display: none; } .mae-app canvas { height: 210px; } }

/* =========================================================
   CAPTSTUDIO MAESTRO vitrini (cmx-)
   ========================================================= */
.cmx-s, .cmx-clip, .cmx-ctas, .cmx-vert { position: relative; overflow: hidden; isolation: isolate; }
.cmx-bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.cmx-bg i { position: absolute; width: 680px; height: 680px; border-radius: 50%; filter: blur(130px); opacity: .28; animation: maeAur 16s ease-in-out infinite alternate; }
.cmx-bg i:nth-child(1) { left: -200px; top: -160px; background: #ffd60a; } .cmx-bg i:nth-child(2) { right: -220px; top: 140px; background: #bf5af2; animation-delay: -5s; } .cmx-bg i:nth-child(3) { left: 30%; bottom: -340px; background: #ff375f; opacity: .2; animation-delay: -10s; }
.cmx-kick em { font-style: normal; display: inline-flex; align-items: center; gap: 5px; margin-left: 8px; padding: 2px 9px; border-radius: 99px; font-size: 11.5px; color: #1c1c1e; background: linear-gradient(90deg, #ffe27a, #ffb340); }
.cmx-grad { background: linear-gradient(90deg, #ffe27a, #ffb340 30%, #ff375f 62%, #bf5af2); -webkit-background-clip: text; background-clip: text; color: transparent; }
.cmx-stage { position: relative; margin-top: 40px; display: grid; grid-template-columns: 230px 120px 1fr; align-items: center; }
.cmx-files { display: flex; flex-direction: column; gap: 8px; position: relative; z-index: 2; }
.cmx-f { --a: 0; display: flex; align-items: center; gap: 10px; padding: 8px 12px 8px 8px; border-radius: 14px; background: rgba(255,255,255,.06); box-shadow: inset 0 0 0 1px rgba(255,255,255,.1); color: #f2f2f7; transform: translateX(calc(var(--a) * 150px)) scale(calc(1 - var(--a) * .55)); opacity: calc(1 - var(--a) * .9); transition: box-shadow .3s; }
.cmx-f.in { box-shadow: inset 0 0 0 1px rgba(255,214,10,.5); }
.cmx-th { position: relative; width: 52px; height: 30px; flex: none; border-radius: 7px; overflow: hidden; background: linear-gradient(180deg, var(--s1), var(--s2) 60%, #2b1f3a); }
.cmx-th::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 40%; background: linear-gradient(180deg, transparent, #24193a 70%); }
.cmx-th em { position: absolute; left: 3px; top: 3px; z-index: 1; min-width: 14px; height: 14px; border-radius: 7px; display: grid; place-items: center; font: 800 9px Inter, system-ui, sans-serif; font-style: normal; color: #1a1205; background: #ffd60a; }
.cmx-th.au { display: grid; place-items: center; background: rgba(48,209,88,.16); color: #30d158; font-size: 16px; } .cmx-th.au::after { display: none; }
.cmx-f.scan .cmx-th { box-shadow: 0 0 0 2px #64d2ff, 0 0 18px rgba(100,210,255,.6); }
.cmx-f > span:not(.cmx-th) { display: flex; flex-direction: column; min-width: 0; } .cmx-f b { font-size: 13px; white-space: nowrap; } .cmx-f small { font-size: 11.5px; color: #a1a1a6; }
.cmx-orb { position: relative; justify-self: center; width: 94px; height: 94px; border-radius: 50%; display: grid; place-items: center; font-size: 36px; color: #ffd60a; background: conic-gradient(from 0deg, #ffd60a, #ff9f0a, #ff375f, #bf5af2, #64d2ff, #ffd60a); box-shadow: 0 0 0 6px rgba(255,255,255,.04), 0 20px 60px -10px rgba(255,190,10,.6); }
.cmx-orb::before { content: ""; position: absolute; inset: 5px; border-radius: 50%; background: #0c0c11; }
.cmx-orb > i { position: relative; z-index: 1; filter: drop-shadow(0 0 12px rgba(255,214,10,.6)); }
.cmx-orb span { position: absolute; inset: -14px; border-radius: 50%; border: 2px solid rgba(255,214,10,0); }
.cmx-orb span + span { inset: -28px; }
.cmx-orb.on { animation: maeSpin 2.4s linear infinite; } .cmx-orb.on > i { animation: maeSpin 2.4s linear infinite reverse; }
.cmx-orb.on span { animation: cmxPulse 1.3s ease-out infinite; } .cmx-orb.on span + span { animation-delay: .5s; }
@keyframes cmxPulse { 0% { border-color: rgba(255,214,10,.7); transform: scale(.85); } 100% { border-color: rgba(255,214,10,0); transform: scale(1.25); } }
.cmx-app { position: relative; border-radius: 22px; overflow: hidden; background: #0e0f13; color: #e9e9ee; box-shadow: 0 40px 90px -40px rgba(0,0,0,.9), inset 0 0 0 1px rgba(255,255,255,.08); }
.cmx-st { margin-left: auto; font-size: 12px; padding: 3px 10px; border-radius: 99px; color: #ffe9a8; background: rgba(255,214,10,.15); transition: background .3s, color .3s; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 60%; }
.cmx-st.ok { color: #0b2a13; background: #30d158; }
.cmx-view { position: relative; margin: 0 14px; border-radius: 12px; overflow: hidden; aspect-ratio: 16/9; background: #000; }
.cmx-view canvas { display: block; width: 100%; height: 100%; }
.cmx-fxn { position: absolute; right: 12px; top: 12px; padding: 5px 11px; border-radius: 99px; font-size: 12px; font-weight: 700; color: #1a1205; background: #ffd60a; opacity: 0; transform: translateY(-6px); transition: opacity .15s, transform .15s; }
.cmx-fxn.on { opacity: 1; transform: none; }
.cmx-tl { display: block; width: calc(100% - 28px); height: 96px; margin: 10px 14px 14px; }
.cmx-cta { position: absolute; left: 50%; bottom: 14%; display: flex; align-items: center; gap: 10px; padding: 8px 10px 8px 8px; border-radius: 99px; background: rgba(16,16,20,.82); box-shadow: inset 0 0 0 1px rgba(255,255,255,.14), 0 16px 40px -10px rgba(0,0,0,.8); color: #fff; opacity: 0; transform: translate(-50%, 24px) scale(.94); transition: opacity .3s, transform .45s cubic-bezier(.34,1.56,.64,1); white-space: nowrap; }
.cmx-cta.on { opacity: 1; transform: translate(-50%, 0) scale(1); }
.cmx-av { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font-size: 15px; background: linear-gradient(135deg, #ff375f, #bf5af2); }
.cmx-cta b { font-size: 13px; }
.cmx-sub { padding: 7px 14px; border-radius: 99px; font-size: 12.5px; font-weight: 800; letter-spacing: .02em; background: #ff375f; transition: background .2s; }
.cmx-cta.clk .cmx-sub { background: rgba(255,255,255,.18); }
.cmx-bell { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font-size: 16px; background: rgba(255,255,255,.12); transition: background .2s; }
.cmx-cta.clk .cmx-bell { background: #ff375f; animation: cmxRing .9s ease .35s; }
@keyframes cmxRing { 0%, 100% { transform: rotate(0); } 15% { transform: rotate(22deg); } 30% { transform: rotate(-18deg); } 45% { transform: rotate(12deg); } 60% { transform: rotate(-8deg); } 75% { transform: rotate(4deg); } }
.cmx-hand { position: absolute; right: 56px; bottom: -40px; font-size: 32px; color: #fff; filter: drop-shadow(0 4px 8px rgba(0,0,0,.6)); opacity: 0; transform: translate(40px, 40px); transition: transform .6s cubic-bezier(.2,.8,.2,1), opacity .3s; }
.cmx-cta.on .cmx-hand { opacity: 1; transform: translate(0, -18px); }
.cmx-cta.clk .cmx-hand { transform: translate(0, -14px) scale(.85); opacity: 0; transition-delay: .25s; }
.cmx-cta.sm { bottom: 18%; transform: translate(-50%, 24px) scale(.82); } .cmx-cta.sm.on { transform: translate(-50%, 0) scale(.86); }
.cmx-phone { position: absolute; right: 22px; top: 54px; width: 21%; aspect-ratio: 9/19.5; border-radius: 22px; overflow: hidden; background: #000; box-shadow: 0 0 0 5px #1c1c22, 0 0 0 6px rgba(255,255,255,.14), 0 30px 60px -10px rgba(0,0,0,.9); opacity: 0; transform: translateY(30px) rotate(4deg); transition: opacity .5s, transform .7s cubic-bezier(.2,.8,.2,1); }
.cmx-phone.on { opacity: 1; transform: none; }
.cmx-phone canvas { display: block; width: 100%; height: 100%; }
.cmx-cap { position: absolute; left: 50%; bottom: 26%; transform: translateX(-50%); font: 900 clamp(14px, 1.6vw, 22px) Inter, system-ui, sans-serif; color: #ffd60a; -webkit-text-stroke: 1px #000; text-shadow: 0 3px 0 rgba(0,0,0,.7); white-space: nowrap; }
.cmx-cap.pop { animation: cmxPop .3s cubic-bezier(.34,1.56,.64,1); }
@keyframes cmxPop { from { transform: translateX(-50%) scale(.6); opacity: 0; } }
.cmx-done { position: absolute; left: 50%; bottom: 120px; transform: translate(-50%, 20px); display: flex; align-items: center; gap: 12px; padding: 10px 12px 10px 14px; border-radius: 16px; background: rgba(28,28,34,.95); box-shadow: inset 0 0 0 1px rgba(255,255,255,.12), 0 20px 40px -10px rgba(0,0,0,.8); opacity: 0; transition: opacity .4s, transform .5s cubic-bezier(.2,.8,.2,1); z-index: 3; white-space: nowrap; }
.cmx-done.on { opacity: 1; transform: translate(-50%, 0); }
.cmx-done > i { font-size: 26px; color: #30d158; } .cmx-done span { display: flex; flex-direction: column; } .cmx-done b { font-size: 14px; } .cmx-done small { font-size: 11.5px; color: #a1a1a6; }
.cmx-done em { font-style: normal; display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 99px; font-size: 12.5px; font-weight: 700; color: #1a1205; background: #ffd60a; }
.cmx-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 40px; }
.cmx-c { position: relative; padding: 22px; border-radius: 22px; background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)); box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); }
.cmx-c .n { position: absolute; right: 18px; top: 14px; font: 800 34px Inter, system-ui, sans-serif; color: rgba(255,255,255,.06); }
.cmx-c > .ic { width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center; font-size: 23px; color: var(--k); background: color-mix(in srgb, var(--k) 15%, transparent); margin-bottom: 12px; }
.cmx-c h3 { margin: 0 0 6px; font: 750 17px Inter, system-ui, sans-serif; color: #fff; } .cmx-c p { margin: 0; font-size: 14px; line-height: 1.5; color: #a1a1a6; }
.cmx-tpls { margin-top: 44px; }
.cmx-tph { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; margin-bottom: 18px; }
.cmx-tph b { font: 800 clamp(24px, 3vw, 34px) Inter, system-ui, sans-serif; letter-spacing: -.03em; background: linear-gradient(90deg, #fff, #ffe27a); -webkit-background-clip: text; background-clip: text; color: transparent; }
.cmx-tph span { max-width: 760px; font-size: 15px; line-height: 1.55; color: #a1a1a6; }
.cmx-mq { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); padding: 5px 0; }
.cmx-mq > div { display: flex; gap: 10px; width: max-content; animation: cmxMq 60s linear infinite; }
.cmx-mq.r > div { animation-direction: reverse; animation-duration: 70s; }
.cmx-mq span { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 99px; font-size: 14px; font-weight: 600; color: #f2f2f7; background: rgba(255,255,255,.05); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--k) 40%, transparent); white-space: nowrap; }
.cmx-mq span i { color: var(--k); font-size: 17px; }
@keyframes cmxMq { to { transform: translateX(-50%); } }
/* klip montajı */
.cmx-cs { max-width: 980px; margin: 40px auto 0; }
.cmx-seg { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; padding: 5px; border-radius: 16px; background: rgba(255,255,255,.06); width: max-content; max-width: 100%; margin: 0 auto 18px; box-sizing: border-box; }
.cmx-seg button { border: 0; cursor: pointer; display: inline-flex; align-items: center; gap: 7px; padding: 10px 16px; border-radius: 12px; font: 650 14px Inter, system-ui, sans-serif; color: #c7c7cc; background: transparent; transition: background .2s, color .2s; }
.cmx-seg button:hover { color: #fff; }
.cmx-seg button.on { color: #111; background: #fff; box-shadow: 0 8px 20px -10px rgba(255,255,255,.6); }
.cmx-seg button[data-l="max"].on { background: linear-gradient(135deg, #ff375f, #ff9f0a); color: #fff; }
.cmx-cv { position: relative; border-radius: 22px; overflow: hidden; aspect-ratio: 16/9; background: #000; box-shadow: 0 40px 90px -40px rgba(0,0,0,.9), inset 0 0 0 1px rgba(255,255,255,.08); }
.cmx-cv canvas { display: block; width: 100%; height: 100%; }
.cmx-fxl { position: absolute; left: 18px; top: 18px; padding: 7px 14px; border-radius: 99px; font: 750 14px Inter, system-ui, sans-serif; color: #1a1205; background: #ffd60a; opacity: 0; transform: scale(.9); transition: opacity .12s, transform .12s; }
.cmx-fxl.on { opacity: 1; transform: none; }
.cmx-bpm { position: absolute; right: 18px; top: 18px; padding: 7px 12px; border-radius: 99px; font-size: 13px; color: #fff; background: rgba(0,0,0,.55); backdrop-filter: blur(10px); display: inline-flex; align-items: center; gap: 6px; }
.cmx-wave { display: block; width: 100%; height: 110px; margin-top: 14px; border-radius: 16px; background: rgba(255,255,255,.03); }
.cmx-legend { display: flex; justify-content: center; flex-wrap: wrap; gap: 16px; margin-top: 12px; font-size: 13px; color: #a1a1a6; }
.cmx-legend span::before { content: ""; display: inline-block; width: 10px; height: 10px; border-radius: 3px; background: var(--k); margin-right: 7px; vertical-align: -1px; }
/* çağrılar */
.cmx-two { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 50px; align-items: center; }
.cmx-two .dx-sh.left { text-align: left; margin: 0; } .cmx-two .dx-sh.left p { margin-left: 0; }
.cmx-cl { list-style: none; margin: 22px 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.cmx-cl li { display: flex; align-items: center; gap: 9px; padding: 10px 12px; border-radius: 14px; font-size: 14px; font-weight: 600; color: #f2f2f7; background: rgba(255,255,255,.05); }
.cmx-cl li i { color: #ff375f; font-size: 18px; }
.cmx-kar { border-radius: 24px; padding: 14px; background: #0e0f13; box-shadow: 0 40px 90px -40px rgba(0,0,0,.9), inset 0 0 0 1px rgba(255,255,255,.08); }
.cmx-kv { position: relative; border-radius: 14px; overflow: hidden; aspect-ratio: 16/9; }
.cmx-kv canvas { display: block; width: 100%; height: 100%; }
.cmx-ksub { position: absolute; left: 0; right: 0; bottom: 6%; text-align: center; font: 900 clamp(16px, 2vw, 26px) Inter, system-ui, sans-serif; color: #fff; -webkit-text-stroke: 1px rgba(0,0,0,.6); text-shadow: 0 3px 0 rgba(0,0,0,.6); }
.cmx-ksub b { font-weight: 900; transition: color .1s; } .cmx-ksub b.on { color: #ffd60a; }
.cmx-vw { display: block; width: 100%; height: 56px; margin-top: 12px; }
.cmx-txt { margin: 12px 4px 4px; font-size: 15px; line-height: 1.7; color: #6e6e73; }
.cmx-txt span { transition: color .15s, background .15s; border-radius: 4px; padding: 0 1px; } .cmx-txt span.past { color: #d1d1d6; } .cmx-txt span.on { color: #111; background: #ffd60a; }
/* dikey */
.cmx-vs { display: grid; grid-template-columns: minmax(0, 1fr) 60px minmax(0, .36fr); gap: 0; align-items: center; max-width: 1060px; margin: 40px auto 0; }
.cmx-wide { position: relative; border-radius: 20px; overflow: hidden; aspect-ratio: 16/9; box-shadow: 0 40px 90px -40px rgba(0,0,0,.9), inset 0 0 0 1px rgba(255,255,255,.08); }
.cmx-wide canvas { display: block; width: 100%; height: 100%; }
.cmx-crop { position: absolute; top: 0; bottom: 0; border: 2px solid #ffd60a; border-radius: 6px; box-shadow: 0 0 0 4000px rgba(0,0,0,.45); transition: left .2s linear; }
.cmx-crop em { position: absolute; left: 50%; top: 10px; transform: translateX(-50%); font-style: normal; font-size: 11.5px; font-weight: 800; padding: 3px 8px; border-radius: 99px; color: #1a1205; background: #ffd60a; white-space: nowrap; }
.cmx-wide small, .cmx-tall small { position: absolute; right: 12px; bottom: 10px; font-size: 12px; font-weight: 700; color: #fff; padding: 3px 9px; border-radius: 99px; background: rgba(0,0,0,.55); }
.cmx-arr { display: grid; place-items: center; font-size: 28px; color: #ffd60a; }
.cmx-tall { position: relative; border-radius: 28px; overflow: hidden; aspect-ratio: 9/16; box-shadow: 0 0 0 6px #1c1c22, 0 0 0 7px rgba(255,255,255,.14), 0 40px 80px -20px rgba(0,0,0,.9); }
.cmx-tall canvas { display: block; width: 100%; height: 100%; }
.cmx-tall .cmx-cap { bottom: 22%; font-size: clamp(16px, 2vw, 26px); }
@media (max-width: 980px) {
  .cmx-stage { grid-template-columns: 1fr; gap: 16px; } .cmx-files { flex-direction: row; flex-wrap: wrap; justify-content: center; } .cmx-f { transform: none; opacity: 1; } .cmx-orb { display: none; }
  .cmx-steps { grid-template-columns: 1fr 1fr; } .cmx-two { grid-template-columns: 1fr; gap: 28px; }
  .cmx-vs { grid-template-columns: 1fr; gap: 14px; justify-items: center; } .cmx-vs .cmx-wide { width: 100%; } .cmx-tall { width: 46%; } .cmx-arr { transform: rotate(90deg); }
  .cmx-phone { width: 24%; top: 50px; right: 18px; }
}
@media (max-width: 640px) { .cmx-steps { grid-template-columns: 1fr; } .cmx-f b { font-size: 12px; } .cmx-done small { display: none; } .cmx-done { bottom: 112px; } .cmx-cl { grid-template-columns: 1fr; } .cmx-seg button { padding: 8px 12px; font-size: 13px; } .cmx-tl { height: 70px; } .cmx-cta { transform: translate(-50%, 24px) scale(.72); } .cmx-cta.on { transform: translate(-50%, 0) scale(.72); } }
.cmx-kick { color: #ffd60a !important; background: rgba(255,214,10,.12) !important; box-shadow: inset 0 0 0 1px rgba(255,214,10,.3) !important; }
.cmx-cs { max-width: 900px; }
.cmx-cta.sm { bottom: 34%; }
.cmx-vs { grid-template-columns: minmax(0, 1fr) 60px minmax(0, .3fr); }

/* =========================================================
   djdeskStudio — imza tema vitrinleri (djx-, djp-)
   Koyu zemin #07060b, cam paneller, A camgöbeği / B macenta, mor vurgu, neon parlamalar.
   Satış siteleri ve radyomasyon.com ortak. Canlandırma: sx.js (sxdeck, sxdj*)
   ========================================================= */
.dj-grad { background: linear-gradient(100deg, #67e8f9 0%, #22d3ee 22%, #7c3aed 55%, #ff2d92 85%, #ff7ab8 100%); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: djxGrad 8s ease-in-out infinite alternate; }
@keyframes djxGrad { to { background-position: 100% 0; } }
.djp-aura i:nth-child(1) { background: radial-gradient(closest-side, rgba(34,211,238,.4), rgba(34,211,238,.1) 55%, transparent) !important; }
.djp-aura i:nth-child(2) { background: radial-gradient(closest-side, rgba(255,45,146,.4), rgba(255,45,146,.1) 55%, transparent) !important; }
.djp-aura i:nth-child(3) { background: radial-gradient(closest-side, rgba(124,58,237,.38), rgba(124,58,237,.1) 55%, transparent) !important; }
.djp-hero { background: #07060b !important; }
.djp .dx-hero { padding-bottom: 70px; }
.djp-hero .dx-kick, .djp-dark .dx-kick, .djp-light .dx-kick { color: #ff7ab8; background: rgba(255,45,146,.14); box-shadow: inset 0 0 0 1px rgba(255,45,146,.25); }
.djp .dx-kick { color: #d61f7a; background: rgba(255,45,146,.1); }
.djp-hero-v::before { background: radial-gradient(closest-side, rgba(255,45,146,.34), rgba(34,211,238,.2) 60%, transparent) !important; }
.djp-dark { background: #07060b !important; }
.djp-light { position: relative; overflow: hidden; isolation: isolate; background: #0d0b14; color: #f4f2fa; padding: 110px 0; }
.djp-light::before { content: ""; position: absolute; inset: 0; z-index: -1; 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: 48px 48px; -webkit-mask: radial-gradient(ellipse at 50% 40%, #000, transparent 75%); mask: radial-gradient(ellipse at 50% 40%, #000, transparent 75%); }
.djp-light h2 { color: #fff; font: 800 clamp(34px, 4.6vw, 60px)/1.03 var(--display, Inter, sans-serif); letter-spacing: -0.05em; margin: 0 0 16px; text-wrap: balance; }
.djp-light p, .djp-light .dx-sh p { color: #a8a2bb; }
.djx-two h2 { font-size: clamp(32px, 3.8vw, 50px); }
.djx-two p { font-size: 17px; line-height: 1.6; }
.djx-s { --dA: #22d3ee; --dB: #ff2d92; --dP: #7c3aed; --ok: #30d158; --cue: #ff9f0a; --ink: #f4f2fa; --ink2: #a8a2bb; --ink3: #6f6982; --gl: rgba(255,255,255,.04); --gln: rgba(255,255,255,.07); }
.djx-bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.djx-bg i { position: absolute; width: 760px; height: 760px; border-radius: 50%; filter: blur(30px); opacity: .55; animation: djxAur 22s ease-in-out infinite alternate; }
.djx-bg i:nth-child(1) { left: -280px; top: -260px; background: radial-gradient(closest-side, rgba(34,211,238,.28), transparent); }
.djx-bg i:nth-child(2) { right: -300px; top: 10%; background: radial-gradient(closest-side, rgba(255,45,146,.26), transparent); animation-delay: -7s; }
.djx-bg i:nth-child(3) { left: 30%; bottom: -420px; background: radial-gradient(closest-side, rgba(124,58,237,.3), transparent); animation-delay: -13s; }
@keyframes djxAur { 0% { transform: translate(0, 0) scale(1); } 50% { transform: translate(60px, 40px) scale(1.12); } 100% { transform: translate(-40px, 70px) scale(.95); } }
.djx-ul { list-style: none; padding: 0; margin: 20px 0 0; display: grid; gap: 9px; } .djx-ul li { display: flex; gap: 9px; align-items: flex-start; font-size: 15px; color: #e5e1f0; } .djx-ul i { color: #ff2d92; font-size: 18px; margin-top: 1px; filter: drop-shadow(0 0 6px rgba(255,45,146,.6)); }
.djx-s .sx-chips li i { color: #ff7ab8; }
/* cam panel */
.djx-app, .djx-an, .djx-syn, .djx-hc, .djx-fxm, .djx-unit, .djx-smp, .djx-lb, .djx-am, .djx-rp, .djx-lp2, .djx-ct, .djx-stm, .djx-thm { position: relative; border-radius: 20px; background: linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.02)) , rgba(13,11,20,.82); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); box-shadow: inset 0 0 0 1px rgba(255,255,255,.08), 0 40px 100px -40px rgba(0,0,0,.95), 0 0 80px -40px rgba(124,58,237,.45); color: #f4f2fa; font-family: Inter, -apple-system, system-ui, sans-serif; }
.djx-bar { display: flex; align-items: center; gap: 10px; padding: 11px 14px; border-bottom: 1px solid rgba(255,255,255,.07); font-size: 13px; } .djx-bar b { display: inline-flex; align-items: center; gap: 7px; } .djx-bar b i { color: #ff2d92; }
.djx-st { margin-left: auto; display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 600; color: #a8a2bb; padding: 4px 10px; border-radius: 99px; background: rgba(255,255,255,.05); } .djx-st i { width: 7px; height: 7px; border-radius: 50%; background: #22d3ee; box-shadow: 0 0 10px #22d3ee; animation: djxBlink 1.2s infinite; } .djx-st.on { color: #fff; background: rgba(255,45,146,.16); } .djx-st.on i { background: #ff2d92; box-shadow: 0 0 10px #ff2d92; }
@keyframes djxBlink { 50% { opacity: .35; } }
.djx-uh { display: flex; align-items: center; gap: 8px; padding: 10px 12px; font-size: 12px; } .djx-uh > b { font-weight: 800; letter-spacing: .04em; display: inline-flex; gap: 6px; align-items: center; }
.djx-dl { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 7px; font: 800 12px/1 Inter, sans-serif; color: #07060b; background: var(--dc, #22d3ee); box-shadow: 0 0 16px -2px var(--dc, #22d3ee); flex: none; }
.djx-sr.xb .djx-dl, .djx-lbm .djx-dl { --dc: #ff2d92; color: #fff; }
.djx-key { display: inline-flex; align-items: center; padding: 3px 7px; border-radius: 6px; font: 700 11px/1 ui-monospace, SFMono-Regular, Menlo, monospace; color: #e5e1f0; background: rgba(255,255,255,.08); white-space: nowrap; } .djx-key.ok { color: #7dfb9b; background: rgba(48,209,88,.14); box-shadow: inset 0 0 0 1px rgba(48,209,88,.28); }
.djx-cov { width: 34px; height: 34px; border-radius: 8px; flex: none; background: conic-gradient(from calc(var(--i, 0) * 47deg), #22d3ee, #7c3aed, #ff2d92, #22d3ee); box-shadow: inset 0 0 0 1px rgba(255,255,255,.15); position: relative; }
.djx-cov::after { content: ""; position: absolute; inset: 35%; border-radius: 50%; background: #07060b; }
.djx-cov.s { width: 26px; height: 26px; border-radius: 6px; }
.djx-sel { display: inline-flex; align-items: center; padding: 4px 10px; border-radius: 7px; background: rgba(255,255,255,.06); box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); font-size: 12px; font-weight: 600; }
.djx-uh em, .djx-fxu em, .djx-as em { font-style: normal; font-size: 10.5px; font-weight: 800; padding: 4px 7px; border-radius: 6px; background: rgba(255,255,255,.06); color: #a8a2bb; }
.djx-uh em.on, .djx-fxu em.on { background: rgba(255,255,255,.14); color: #fff; }
.djx-as { display: inline-flex; gap: 3px; margin-left: auto; } .djx-as em.on { background: var(--dc, #22d3ee); color: #07060b; box-shadow: 0 0 12px -2px var(--dc, #22d3ee); }
.djx-unit.xb .djx-as em.on, .djx-fxu.xb .djx-as em.on { --dc: #ff2d92; color: #fff; }
.djx-bt { font: 700 12px/1 ui-monospace, Menlo, monospace; color: #fff; padding: 4px 6px; }
/* düğmeler */
.djx-s button, .djx-app button { font: inherit; color: inherit; border: 0; cursor: default; }
.djx-kn { display: inline-flex; flex-direction: column; align-items: center; gap: 3px; } .djx-kn i { width: 26px; height: 26px; border-radius: 50%; position: relative; background: radial-gradient(circle at 50% 35%, #2a2639, #14121c 70%); box-shadow: inset 0 0 0 1px rgba(255,255,255,.1), 0 3px 8px rgba(0,0,0,.5); }
.djx-kn i::before { content: ""; position: absolute; inset: -3px; border-radius: 50%; background: conic-gradient(from 225deg, var(--kc, var(--dc, #22d3ee)) calc(var(--v) * 270deg), rgba(255,255,255,.06) 0 270deg, transparent 0); -webkit-mask: radial-gradient(circle, transparent 14px, #000 15px); mask: radial-gradient(circle, transparent 14px, #000 15px); filter: drop-shadow(0 0 4px var(--kc, var(--dc, #22d3ee))); }
.djx-kn i::after { content: ""; position: absolute; left: 50%; top: 4px; width: 2px; height: 8px; margin-left: -1px; border-radius: 1px; background: #fff; transform-origin: 50% 9px; transform: rotate(calc(-135deg + var(--v) * 270deg)); }
.djx-kn small { font-size: 8px; font-weight: 700; color: #6f6982; letter-spacing: .06em; }
.djx-kn.f { --kc: #fbbf24; } .djx-kn.s i { width: 22px; height: 22px; } .djx-kn.s i::before { -webkit-mask: radial-gradient(circle, transparent 12px, #000 13px); mask: radial-gradient(circle, transparent 12px, #000 13px); } .djx-kn.s i::after { height: 6px; transform-origin: 50% 7px; }
/* ================= ANA EKRAN (hero) ================= */
.djx-app { overflow: hidden; background: #07060b; border-radius: 22px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.09), 0 60px 140px -50px rgba(0,0,0,1), 0 0 120px -40px rgba(255,45,146,.45), 0 0 120px -50px rgba(34,211,238,.4); text-align: left; font-size: 12px; }
.djx-aur { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.djx-aur i { position: absolute; width: 60%; height: 70%; border-radius: 50%; filter: blur(40px); opacity: .5; animation: djxAur 16s ease-in-out infinite alternate; }
.djx-aur i:nth-child(1) { left: -15%; top: -30%; background: radial-gradient(closest-side, rgba(34,211,238,.2), transparent); }
.djx-aur i:nth-child(2) { right: -15%; top: -30%; background: radial-gradient(closest-side, rgba(255,45,146,.2), transparent); animation-delay: -5s; }
.djx-aur i:nth-child(3) { left: 25%; bottom: -40%; background: radial-gradient(closest-side, rgba(124,58,237,.22), transparent); animation-delay: -9s; }
.djx-app > *:not(.djx-aur) { position: relative; z-index: 1; }
.djx-top { display: flex; align-items: center; gap: 12px; height: 42px; padding: 0 14px; border-bottom: 1px solid rgba(255,255,255,.07); background: linear-gradient(180deg, rgba(255,255,255,.035), transparent); }
.djx-logo { display: inline-flex; align-items: center; gap: 7px; font-size: 14px; } .djx-logo i { font-size: 20px; color: #ff2d92; filter: drop-shadow(0 0 6px rgba(255,45,146,.7)); animation: djxSpin 3s linear infinite; } .djx-logo b { font-weight: 800; letter-spacing: -.3px; } .djx-logo em { font-style: normal; font-weight: 600; color: #ff2d92; }
@keyframes djxSpin { to { transform: rotate(360deg); } }
.djx-clk { margin: 0 auto; display: inline-flex; align-items: baseline; gap: 6px; padding: 4px 12px; border-radius: 99px; background: rgba(255,255,255,.05); } .djx-clk small { font-size: 9px; color: #6f6982; letter-spacing: .1em; } .djx-clk b { font: 600 13px/1 ui-monospace, Menlo, monospace; }
.djx-tbs { display: inline-flex; gap: 2px; } .djx-tb { display: inline-flex; align-items: center; gap: 5px; padding: 5px 9px; border-radius: 8px; font-size: 10.5px; font-weight: 700; letter-spacing: .05em; color: #a8a2bb; } .djx-tb i { font-size: 14px; }
.djx-tb.live { color: #fff; background: rgba(255,45,146,.16); box-shadow: 0 0 18px -6px #ff2d92; } .djx-tb.live i { color: #ff2d92; }
.djx-tb.rec i { color: #ff375f; animation: djxBlink 1s infinite; } .djx-tb.rec b { font: 600 11px ui-monospace, Menlo, monospace; color: #fff; }
.djx-main { display: grid; grid-template-columns: minmax(0, 1fr) 176px minmax(0, 1fr); gap: 8px; padding: 8px; }
.djx-deck { --dc: #22d3ee; border-radius: 14px; background: rgba(255,255,255,.035); box-shadow: inset 0 0 0 1px rgba(255,255,255,.07); padding: 8px; display: flex; flex-direction: column; gap: 6px; min-width: 0; position: relative; }
.djx-deck.xb { --dc: #ff2d92; }
.djx-deck.play::before { content: ""; position: absolute; inset: -1px; border-radius: 15px; padding: 1px; background: conic-gradient(from var(--ang, 0deg), #22d3ee, #7c3aed, #ff2d92, #22d3ee); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: .75; pointer-events: none; }
.djx-deck.play { box-shadow: inset 0 0 0 1px rgba(255,255,255,.04), 0 0 calc(12px + var(--pulse, 0) * 26px) -6px var(--dc); }
.djx-dh { display: flex; align-items: center; gap: 8px; min-width: 0; }
.djx-dh .djx-dl { width: 22px; height: 22px; }
.djx-tt { display: flex; flex-direction: column; min-width: 0; flex: 1; } .djx-tt b { font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .djx-tt small { color: #a8a2bb; font-size: 10.5px; }
.djx-bpm, .djx-tm { display: flex; flex-direction: column; align-items: flex-end; } .djx-bpm b, .djx-tm b { font: 700 15px/1 ui-monospace, SFMono-Regular, Menlo, monospace; } .djx-bpm small, .djx-tm small { font: 500 9px ui-monospace, Menlo, monospace; color: #6f6982; margin-top: 2px; }
.djx-ov { height: 16px; border-radius: 4px; overflow: hidden; background: #08070d; }
.djx-wf { position: relative; flex: 1 1 auto; min-height: 92px; border-radius: 8px; overflow: hidden; background: #08070d; box-shadow: inset 0 0 0 1px rgba(255,255,255,.05); }
.djx-ov canvas, .djx-wf canvas, .djx-app canvas, .djx-s canvas { display: block; width: 100%; height: 100%; }
.djx-wf canvas { position: absolute; inset: 0; }
.djx-db { display: grid; grid-template-columns: 96px minmax(0, 1fr) 26px; gap: 8px; align-items: center; }
.djx-deck.xb .djx-db { grid-template-columns: 26px minmax(0, 1fr) 96px; } .djx-deck.xb .djx-jog { order: 3; } .djx-deck.xb .djx-pitch { order: 1; } .djx-deck.xb .djx-ctl { order: 2; }
.djx-jog { position: relative; width: 96px; height: 96px; border-radius: 50%; }
.djx-ring { position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from var(--ang, 0deg), var(--dc), transparent 30%, var(--dc) 50%, transparent 80%, var(--dc)); filter: drop-shadow(0 0 calc(4px + var(--pulse, 0) * 10px) var(--dc)); -webkit-mask: radial-gradient(circle, transparent 44px, #000 45px); mask: radial-gradient(circle, transparent 44px, #000 45px); opacity: .9; }
.djx-plat { position: absolute; inset: 5px; border-radius: 50%; background: repeating-radial-gradient(circle, #0c0a12 0 2px, #15121d 2px 3px), #0c0a12; box-shadow: inset 0 0 0 1px rgba(255,255,255,.06), inset 0 0 20px rgba(0,0,0,.8); animation: djxSpin 1.8s linear infinite; animation-play-state: paused; }
.djx-deck.play .djx-plat, .play .djx-plat { animation-play-state: running; }
.djx-plat i { position: absolute; left: 50%; top: 4px; width: 2px; height: 22px; margin-left: -1px; border-radius: 1px; background: var(--dc); box-shadow: 0 0 8px var(--dc); transform-origin: 50% 39px; }
.djx-plat i:nth-child(2) { transform: rotate(120deg); opacity: .35; } .djx-plat i:nth-child(3) { transform: rotate(240deg); opacity: .35; }
.djx-plat::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from 20deg, transparent, rgba(255,255,255,.07) 8%, transparent 16%, transparent 50%, rgba(255,255,255,.05) 58%, transparent 66%); }
.djx-jc { position: absolute; inset: 26px; border-radius: 50%; background: radial-gradient(circle, #1b1827, #0d0b14); display: flex; flex-direction: column; align-items: center; justify-content: center; box-shadow: 0 0 0 1px rgba(255,255,255,.08); } .djx-jc b { font: 700 12px/1 ui-monospace, Menlo, monospace; } .djx-jc small { font: 500 8.5px ui-monospace, Menlo, monospace; color: #a8a2bb; margin-top: 3px; }
.djx-ctl { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.djx-tr { display: flex; gap: 5px; align-items: stretch; }
.djx-cue, .djx-play { height: 34px; min-width: 46px; border-radius: 9px !important; font: 800 11px/1 Inter, sans-serif !important; letter-spacing: .04em; }
.djx-cue { color: #ff9f0a !important; background: rgba(255,159,10,.1) !important; box-shadow: inset 0 0 0 1px rgba(255,159,10,.5); }
.djx-play { font-size: 15px !important; color: #04130a !important; background: linear-gradient(180deg, #4ade80, #22c55e) !important; box-shadow: 0 0 calc(8px + var(--pulse, 0) * 18px) -2px rgba(74,222,128,.85), inset 0 1px 0 rgba(255,255,255,.4); }
.djx-play:not(.on) { background: #1f3a29 !important; color: #4ade80 !important; box-shadow: none; }
.djx-sm { display: flex; flex-direction: column; gap: 3px; margin-left: auto; }
.djx-sync, .djx-mst { height: 15px; padding: 0 7px; border-radius: 5px !important; font: 800 8.5px/15px Inter, sans-serif !important; letter-spacing: .06em; background: rgba(255,255,255,.07) !important; color: #a8a2bb !important; }
.djx-sync.on { color: #07060b !important; background: var(--dc, #22d3ee) !important; box-shadow: 0 0 12px -2px var(--dc, #22d3ee); }
.djx-mst.on { color: #fbbf24 !important; box-shadow: inset 0 0 0 1px rgba(251,191,36,.5); }
.djx-lp { display: flex; gap: 2px; align-items: center; font-size: 9px; color: #6f6982; } .djx-lp span { margin-right: 3px; } .djx-lp em { font: 700 9px/1 ui-monospace, Menlo, monospace; font-style: normal; flex: 1; text-align: center; padding: 4px 0; border-radius: 4px; background: rgba(255,255,255,.05); color: #a8a2bb; } .djx-lp em.on { background: rgba(34,197,94,.2); color: #4ade80; }
.djx-hcp { display: grid; grid-template-columns: repeat(4, 1fr); gap: 3px; } .djx-hcp span { height: 17px; border-radius: 4px; font: 700 9px/17px Inter, sans-serif; padding-left: 5px; background: rgba(255,255,255,.04); color: #6f6982; } .djx-hcp span.on { color: #fff; background: color-mix(in srgb, var(--h) 32%, transparent); box-shadow: inset 0 0 0 1px var(--h); }
.djx-pitch { display: flex; flex-direction: column; align-items: center; gap: 3px; height: 96px; } .djx-pitch small { font: 600 8px ui-monospace, Menlo, monospace; color: #a8a2bb; white-space: nowrap; } .djx-pitch span { flex: 1; width: 4px; border-radius: 2px; background: rgba(255,255,255,.08); position: relative; } .djx-pitch i { position: absolute; left: 50%; top: calc(var(--p) * 100%); width: 20px; height: 8px; margin: -4px 0 0 -10px; border-radius: 2px; background: linear-gradient(180deg, #f4f2fa, #8a8598); box-shadow: 0 2px 6px rgba(0,0,0,.6); }
/* mikser */
.djx-mix { border-radius: 14px; background: rgba(255,255,255,.035); box-shadow: inset 0 0 0 1px rgba(255,255,255,.07); padding: 8px 6px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.djx-mh { display: flex; align-items: center; justify-content: space-between; gap: 6px; } .djx-mh > span:first-child { display: flex; flex-direction: column; } .djx-mh small { font-size: 8px; color: #6f6982; letter-spacing: .1em; } .djx-mh b { font: 700 14px/1 ui-monospace, Menlo, monospace; }
.djx-phz { display: flex; flex-direction: column; align-items: flex-end; flex: 1; } .djx-phz canvas { height: 12px !important; width: 74px !important; border-radius: 3px; background: #08070d; }
.djx-mx { display: grid; grid-template-columns: 1fr auto 1fr; gap: 4px; align-items: start; }
.djx-mc { display: flex; flex-direction: column; align-items: center; gap: 5px; --dc: #22d3ee; } .djx-mc.xb { --dc: #ff2d92; } .djx-mc > b { font: 800 10px Inter, sans-serif; color: var(--dc); }
.djx-pfl { width: 24px; height: 18px; border-radius: 5px; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,.06); color: #6f6982; font-size: 11px; } .djx-pfl.on { background: rgba(255,159,10,.2); color: #ff9f0a; }
.djx-vus { display: flex; gap: 3px; align-items: flex-end; height: 100%; padding-top: 18px; }
.djx-vu { width: 5px; height: 150px; border-radius: 2px; background: #08070d; position: relative; overflow: hidden; } .djx-vu i { position: absolute; left: 0; right: 0; bottom: 0; height: calc(var(--l, .4) * 100%); background: linear-gradient(0deg, #22c55e 0 60%, #fbbf24 60% 85%, #ff375f 85%); background-size: 100% 150px; background-position: bottom; transition: height .05s linear; }
.djx-fd { width: 18px; height: 150px; position: relative; } .djx-fd::before { content: ""; position: absolute; left: 50%; top: 4px; bottom: 4px; width: 3px; margin-left: -1.5px; border-radius: 2px; background: rgba(255,255,255,.08); } .djx-fd i { position: absolute; left: 0; right: 0; height: 12px; top: calc((1 - var(--f)) * 130px + 4px); border-radius: 3px; background: linear-gradient(180deg, #f4f2fa, #8a8598); box-shadow: 0 3px 8px rgba(0,0,0,.6); } .djx-fd i::after { content: ""; position: absolute; left: 2px; right: 2px; top: 5px; height: 2px; background: var(--dc, #22d3ee); } .djx-fd.xb i::after { background: #ff2d92; } .djx-fd.xa i::after { background: #22d3ee; }
.djx-xf { display: flex; flex-direction: column; gap: 4px; align-items: stretch; } .djx-xf > small { font-size: 8px; color: #6f6982; letter-spacing: .1em; text-align: center; }
.djx-xft { height: 18px; position: relative; } .djx-xft::before { content: ""; position: absolute; left: 4px; right: 4px; top: 50%; height: 3px; margin-top: -1.5px; border-radius: 2px; background: linear-gradient(90deg, #22d3ee, #7c3aed, #ff2d92); opacity: .5; } .djx-xft i { position: absolute; top: 0; left: calc(var(--x, .5) * (100% - 12px)); width: 12px; height: 18px; border-radius: 3px; background: linear-gradient(90deg, #f4f2fa, #8a8598); box-shadow: 0 0 10px rgba(255,255,255,.25); }
.djx-xfl { display: flex; justify-content: space-between; } .djx-xfl em { font-style: normal; font-size: 8.5px; color: #6f6982; padding: 2px 4px; border-radius: 4px; } .djx-xfl em.on { color: #fff; background: rgba(255,255,255,.1); }
.djx-fxr { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 0 8px 8px; }
.djx-fxu { --dc: #22d3ee; display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 12px; background: rgba(255,255,255,.035); box-shadow: inset 0 0 0 1px rgba(255,255,255,.07); } .djx-fxu.xb { --dc: #ff2d92; } .djx-fxu > b { font: 800 11px Inter, sans-serif; color: var(--dc); }
.djx-lib { display: grid; grid-template-columns: 150px minmax(0, 1fr); border-top: 1px solid rgba(255,255,255,.07); min-height: 150px; }
.djx-side { display: flex; flex-direction: column; gap: 2px; padding: 10px 8px; border-right: 1px solid rgba(255,255,255,.06); } .djx-side small { font-size: 8.5px; font-weight: 700; letter-spacing: .12em; color: #6f6982; padding: 6px 6px 2px; } .djx-side span { display: flex; align-items: center; gap: 7px; padding: 5px 7px; border-radius: 7px; font-size: 11px; color: #a8a2bb; } .djx-side span i { font-size: 13px; } .djx-side span.on { color: #fff; background: rgba(255,45,146,.14); } .djx-side span.on i { color: #ff2d92; }
.djx-tbl { padding: 8px 10px; min-width: 0; }
.djx-fbar { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; margin-bottom: 6px; }
.djx-q { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 8px; background: rgba(255,255,255,.05); box-shadow: inset 0 0 0 1px rgba(255,255,255,.07); color: #6f6982; font-size: 11px; min-width: 150px; }
.djx-ch { display: inline-flex; align-items: center; gap: 5px; padding: 5px 9px; border-radius: 8px; font-size: 11px; color: #a8a2bb; box-shadow: inset 0 0 0 1px rgba(255,255,255,.09); transition: all .3s; } .djx-ch.on { color: #fff; background: rgba(255,45,146,.18); box-shadow: inset 0 0 0 1px rgba(255,45,146,.6), 0 0 16px -6px #ff2d92; } .djx-ch.on i { color: #ff2d92; }
.djx-tr2 { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1.2fr) 60px 74px 64px 54px; gap: 8px; align-items: center; padding: 5px 6px; border-radius: 7px; font-size: 11.5px; color: #e5e1f0; }
.djx-tr2 > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .djx-tr2 > span:first-child { display: flex; align-items: center; gap: 8px; }
.djx-tr2.h { font-size: 9px; font-weight: 700; letter-spacing: .1em; color: #6f6982; border-bottom: 1px solid rgba(255,255,255,.06); border-radius: 0; }
.djx-tr2 .n { font-family: ui-monospace, Menlo, monospace; color: #4ade80; } .djx-tr2 .k { font: 700 10.5px ui-monospace, Menlo, monospace; color: #a8a2bb; } .djx-tr2 .k.ok { color: #7dfb9b; }
.djx-tr2 .e { display: flex; align-items: center; gap: 6px; } .djx-tr2 .e i { width: 30px; height: 4px; border-radius: 2px; background: rgba(255,255,255,.08); position: relative; overflow: hidden; } .djx-tr2 .e i::after { content: ""; position: absolute; inset: 0; right: auto; width: calc(var(--e) * 100%); background: linear-gradient(90deg, #22d3ee, #ff2d92); } .djx-tr2 .e b { font: 600 10px ui-monospace, Menlo, monospace; color: #a8a2bb; }
.djx-tr2.pl { background: rgba(255,45,146,.1); box-shadow: inset 2px 0 0 #ff2d92; } .djx-tr2.pl > span:first-child { color: #ff7ab8; } .djx-tr2.pa > span:first-child { color: #67e8f9; }
/* ================= ANALİZ ================= */
.djx-anb { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: 0; }
.djx-anl { padding: 10px; border-right: 1px solid rgba(255,255,255,.06); display: flex; flex-direction: column; gap: 4px; }
.djx-ar { display: grid; grid-template-columns: 26px minmax(0, 1fr) 60px 64px 64px 40px; gap: 8px; align-items: center; padding: 7px 8px; border-radius: 10px; font-size: 12px; transition: background .3s; }
.djx-ar .tt { display: flex; flex-direction: column; min-width: 0; } .djx-ar .tt b { font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .djx-ar .tt small { font-size: 10.5px; color: #a8a2bb; }
.djx-ar .pb { height: 4px; border-radius: 2px; background: rgba(255,255,255,.07); overflow: hidden; } .djx-ar .pb i { display: block; height: 100%; width: calc(var(--p, 0) * 100%); background: linear-gradient(90deg, #22d3ee, #7c3aed, #ff2d92); box-shadow: 0 0 8px #7c3aed; }
.djx-ar .bp { font: 700 12.5px ui-monospace, Menlo, monospace; color: #6f6982; text-align: right; } .djx-ar.done .bp, .djx-ar.cur .bp { color: #4ade80; }
.djx-ar .ky { font: 700 11px ui-monospace, Menlo, monospace; color: #6f6982; text-align: center; padding: 3px 0; border-radius: 6px; } .djx-ar.done .ky { color: #7dfb9b; background: rgba(48,209,88,.12); }
.djx-ar .e { height: 5px; border-radius: 3px; background: rgba(255,255,255,.07); position: relative; overflow: hidden; } .djx-ar .e i { position: absolute; inset: 0; right: auto; width: calc(var(--e) * 100%); background: linear-gradient(90deg, #22d3ee, #ff2d92); transition: width .6s; }
.djx-ar.cur { background: rgba(124,58,237,.16); box-shadow: inset 0 0 0 1px rgba(124,58,237,.4); }
.djx-anr { padding: 12px; display: flex; flex-direction: column; gap: 10px; }
.djx-anw { position: relative; height: 210px; border-radius: 12px; overflow: hidden; background: #08070d; box-shadow: inset 0 0 0 1px rgba(255,255,255,.06); }
.djx-anh { position: absolute; left: 10px; top: 8px; font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: 6px; background: rgba(7,6,11,.7); }
.djx-ro { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; } .djx-ro div { padding: 9px 10px; border-radius: 10px; background: rgba(255,255,255,.04); box-shadow: inset 0 0 0 1px rgba(255,255,255,.06); min-width: 0; } .djx-ro small { display: block; font-size: 10px; color: #6f6982; margin-bottom: 3px; white-space: nowrap; } .djx-ro b { font: 700 14px ui-monospace, Menlo, monospace; white-space: nowrap; color: #fff; }
.djx-ro b.ok { color: #7dfb9b; text-shadow: 0 0 12px rgba(48,209,88,.6); }
.djx-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-top: 30px; }
.djx-cd { padding: 20px; border-radius: 18px; background: rgba(255,255,255,.035); box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); position: relative; overflow: hidden; }
.djx-cd::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--k), transparent); opacity: .8; }
.djx-cd > i { width: 42px; height: 42px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 22px; color: var(--k); background: color-mix(in srgb, var(--k) 16%, transparent); margin-bottom: 12px; box-shadow: 0 0 22px -8px var(--k); }
.djx-cd h3 { font: 700 16.5px var(--display, Inter, sans-serif); margin: 0 0 6px; color: #fff; letter-spacing: -.01em; } .djx-cd p { font-size: 14px; line-height: 1.5; margin: 0; color: #a8a2bb; }
/* ================= SENKRON ================= */
.djx-syn { padding: 14px; display: flex; flex-direction: column; gap: 8px; }
.djx-sr { --dc: #22d3ee; display: grid; grid-template-columns: 24px minmax(0, 1fr) 64px; gap: 10px; align-items: center; } .djx-sr.xb { --dc: #ff2d92; }
.djx-sr canvas { height: 84px !important; border-radius: 10px; background: #08070d; box-shadow: inset 0 0 0 1px rgba(255,255,255,.06); }
.djx-sr > b { font: 700 15px ui-monospace, Menlo, monospace; text-align: right; color: var(--dc); }
.djx-pm { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 10px; align-items: center; } .djx-pm small { font-size: 10px; font-weight: 700; color: #6f6982; letter-spacing: .1em; } .djx-pm canvas { height: 22px !important; border-radius: 6px; background: #08070d; }
.djx-lock { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 700; padding: 4px 10px; border-radius: 99px; color: #6f6982; background: rgba(255,255,255,.05); transition: all .3s; } .djx-lock.on { color: #04130a; background: #4ade80; box-shadow: 0 0 20px -2px #4ade80; }
.djx-sf { display: flex; gap: 8px; align-items: center; } .djx-sf .djx-sync { height: 30px; padding: 0 16px; font-size: 11px !important; line-height: 30px !important; --dc: #22d3ee; } .djx-sf .djx-mst { height: 30px; line-height: 30px !important; font-size: 11px !important; padding: 0 12px; } .djx-pt { margin-left: auto; font: 600 12px ui-monospace, Menlo, monospace; color: #a8a2bb; }
/* ================= HOT CUE ================= */
.djx-hc { padding: 14px; }
.djx-hcw { height: 150px; border-radius: 12px; overflow: hidden; background: #08070d; box-shadow: inset 0 0 0 1px rgba(255,255,255,.06); }
.djx-hcb { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; margin-top: 12px; }
.djx-pads { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; }
.djx-pads button { height: 64px; border-radius: 12px; text-align: left; padding: 8px 10px; display: flex; flex-direction: column; justify-content: space-between; background: color-mix(in srgb, var(--h) 18%, #0d0b14); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--h) 55%, transparent); transition: transform .12s, box-shadow .2s, background .2s; }
.djx-pads button b { font: 800 16px Inter, sans-serif; color: #fff; } .djx-pads button small { font-size: 10.5px; color: color-mix(in srgb, var(--h) 60%, #fff); }
.djx-pads button.hit { transform: scale(.95); background: color-mix(in srgb, var(--h) 55%, #0d0b14); box-shadow: inset 0 0 0 1px var(--h), 0 0 30px -4px var(--h); }
.djx-loops { display: flex; flex-direction: column; gap: 10px; } .djx-loops > small { font-size: 10px; font-weight: 700; letter-spacing: .1em; color: #6f6982; }
.djx-loops > div:not(.djx-perf) { display: grid; grid-template-columns: repeat(11, minmax(0, 1fr)); gap: 3px; } .djx-loops em { font: 700 11px/1 ui-monospace, Menlo, monospace; font-style: normal; text-align: center; padding: 9px 0; border-radius: 7px; background: rgba(255,255,255,.05); color: #a8a2bb; transition: all .2s; } .djx-loops em.on { color: #04130a; background: #4ade80; box-shadow: 0 0 16px -3px #4ade80; }
.djx-perf { display: flex; flex-wrap: wrap; gap: 5px; } .djx-perf span { font: 800 10.5px/1 Inter, sans-serif; letter-spacing: .05em; padding: 8px 10px; border-radius: 8px; background: rgba(255,255,255,.05); color: #a8a2bb; box-shadow: inset 0 0 0 1px rgba(255,255,255,.07); transition: all .2s; display: inline-flex; gap: 6px; align-items: center; } .djx-perf span.on { color: #fff; background: rgba(124,58,237,.35); box-shadow: inset 0 0 0 1px #7c3aed, 0 0 18px -4px #7c3aed; }
.djx-hint { margin: 0; font-size: 12.5px; color: #a8a2bb !important; } .djx-hint b { color: #fff; }
/* ================= EFEKT / MİKSER ================= */
.djx-fx { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 14px; }
.djx-fxmb { display: grid; grid-template-columns: 1fr auto 1fr; gap: 6px; padding: 14px 10px; }
.djx-fxmb .djx-kn i { width: 34px; height: 34px; } .djx-fxmb .djx-kn i::before { -webkit-mask: radial-gradient(circle, transparent 18px, #000 19px); mask: radial-gradient(circle, transparent 18px, #000 19px); } .djx-fxmb .djx-kn i::after { height: 11px; transform-origin: 50% 13px; } .djx-fxmb .djx-kn small { font-size: 9px; }
.djx-fxmb .djx-vu, .djx-fxmb .djx-fd { height: 200px; } .djx-fxmb .djx-fd i { top: calc((1 - var(--f)) * 180px + 4px); }
.djx-cv { padding: 0 12px 12px; } .djx-cv canvas { height: 90px !important; border-radius: 10px; background: #08070d; margin-bottom: 6px; }
.djx-fxr2 { display: flex; flex-direction: column; gap: 14px; }
.djx-unit { --dc: #22d3ee; overflow: hidden; } .djx-unit.xb { --dc: #ff2d92; } .djx-unit .djx-uh > b { color: var(--dc); } .djx-unit canvas { height: 82px !important; }
.djx-smp { padding-bottom: 12px; } .djx-smp .djx-uh > b { color: #c084fc; }
.djx-sg { display: grid; grid-template-columns: repeat(8, 1fr); gap: 6px; padding: 0 12px; } .djx-sg i { aspect-ratio: 1; border-radius: 9px; background: color-mix(in srgb, var(--h) 12%, #0d0b14); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--h) 40%, transparent); transition: background .15s, box-shadow .25s; } .djx-sg i.on { background: color-mix(in srgb, var(--h) 70%, #0d0b14); box-shadow: inset 0 0 0 1px var(--h), 0 0 22px -2px var(--h); }
.djx-fxl { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; padding: 0; margin: 26px auto 0; max-width: 980px; }
.djx-fxl li { padding: 8px 14px; border-radius: 99px; font-size: 13.5px; font-weight: 600; color: #e5e1f0; background: rgba(255,255,255,.05); box-shadow: inset 0 0 0 1px rgba(255,255,255,.1); transition: all .3s; } .djx-fxl li.on { color: #fff; background: linear-gradient(135deg, rgba(34,211,238,.25), rgba(255,45,146,.3)); box-shadow: inset 0 0 0 1px rgba(255,45,146,.6), 0 0 22px -6px #ff2d92; }
/* ================= KÜTÜPHANE ================= */
.djx-lb { padding: 14px; }
.djx-lbm { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 8px 10px; margin-bottom: 10px; border-radius: 12px; background: rgba(255,45,146,.08); box-shadow: inset 0 0 0 1px rgba(255,45,146,.25); font-size: 13px; } .djx-lbm > span:not(.djx-dl):not(.djx-key) { color: #a8a2bb; font-family: ui-monospace, Menlo, monospace; font-size: 12px; }
.djx-cnt { margin-left: auto; color: #fff !important; font-weight: 700; padding: 3px 10px; border-radius: 99px; background: rgba(255,255,255,.08); }
.djx-ao { display: inline-flex; padding: 2px; border-radius: 8px; background: rgba(255,255,255,.05); } .djx-ao em { font-style: normal; font-size: 10.5px; font-weight: 800; padding: 4px 8px; border-radius: 6px; color: #6f6982; transition: all .25s; } .djx-ao em.on { color: #fff; background: #7c3aed; box-shadow: 0 0 12px -2px #7c3aed; }
.djx-ch.sv { margin-left: auto; } .djx-ch.sv.on { background: rgba(124,58,237,.25); box-shadow: inset 0 0 0 1px #7c3aed, 0 0 16px -6px #7c3aed; } .djx-ch.sv.on i { color: #c084fc; }
.djx-rows .djx-tr2 { max-height: 40px; transition: max-height .45s, opacity .45s, padding .45s, background .3s; overflow: hidden; }
.djx-rows .djx-tr2.out { max-height: 0; opacity: 0; padding-top: 0; padding-bottom: 0; }
.djx-rows .djx-tr2.hit { background: rgba(34,211,238,.06); }
.djx-pv { display: grid; grid-template-columns: auto auto minmax(0, 1fr); gap: 10px; align-items: center; margin-top: 10px; padding: 8px 10px; border-radius: 12px; background: rgba(255,255,255,.03); box-shadow: inset 0 0 0 1px rgba(255,255,255,.06); } .djx-pv > i { font-size: 28px; color: #ff9f0a; filter: drop-shadow(0 0 8px rgba(255,159,10,.6)); } .djx-pv b { display: block; font-size: 12.5px; } .djx-pv small { font-size: 11px; color: #a8a2bb; } .djx-pv canvas { height: 28px !important; }
/* ================= CAMELOT ================= */
.djx-camw { padding: 18px; display: flex; flex-direction: column; align-items: center; }
.djx-wheel { width: 100%; max-width: 440px; height: auto; display: block; overflow: visible; }
.djx-wheel g path { fill: color-mix(in srgb, var(--hc) 14%, #0d0b14); stroke: #07060b; stroke-width: 2; transition: fill .45s, filter .45s; }
.djx-wheel g text { fill: #a8a2bb; font: 700 11px Inter, sans-serif; text-anchor: middle; pointer-events: none; transition: fill .3s; } .djx-wheel g text .m { font-size: 8.5px; font-weight: 500; fill: #6f6982; }
.djx-wheel g.ok path { fill: color-mix(in srgb, #30d158 55%, #0d0b14); filter: drop-shadow(0 0 8px rgba(48,209,88,.7)); } .djx-wheel g.ok text, .djx-wheel g.cur text { fill: #fff; } .djx-wheel g.ok text .m, .djx-wheel g.cur text .m { fill: rgba(255,255,255,.75); }
.djx-wheel g.cur path { fill: #ff2d92; filter: drop-shadow(0 0 14px rgba(255,45,146,.9)); }
.djx-wheel .c { fill: #0d0b14; stroke: rgba(255,255,255,.1); } .djx-wheel .cb { fill: #fff; font: 800 26px Inter, sans-serif; text-anchor: middle; } .djx-wheel .cs { fill: #a8a2bb; font: 600 12px Inter, sans-serif; text-anchor: middle; }
.djx-flow { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 22px 0 6px; } .djx-flow > i { color: #6f6982; font-size: 12px; }
.djx-flow span { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 10px; border-radius: 12px; background: rgba(255,255,255,.04); box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); transition: all .35s; } .djx-flow b { font: 800 14px ui-monospace, Menlo, monospace; color: #7dfb9b; } .djx-flow small { font-size: 10.5px; color: #a8a2bb; }
.djx-flow span.on { background: rgba(255,45,146,.16); box-shadow: inset 0 0 0 1px #ff2d92, 0 0 22px -6px #ff2d92; } .djx-flow span.on b { color: #fff; }
/* ================= OTOMATİK MİX ================= */
.djx-amt { padding: 12px 12px 0; } .djx-amt canvas { height: 190px !important; border-radius: 12px; background: #08070d; box-shadow: inset 0 0 0 1px rgba(255,255,255,.06); }
.djx-amc { display: flex; flex-wrap: wrap; gap: 8px; padding: 10px 12px; }
.djx-seg { display: inline-flex; padding: 3px; gap: 2px; border-radius: 10px; background: rgba(255,255,255,.05); } .djx-seg em { font-style: normal; font-size: 11.5px; font-weight: 700; padding: 6px 10px; border-radius: 7px; color: #a8a2bb; transition: all .25s; } .djx-seg em.on { color: #fff; background: linear-gradient(135deg, #7c3aed, #ff2d92); box-shadow: 0 0 16px -4px #ff2d92; }
.djx-amq { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; padding: 0 12px 12px; } .djx-amq span { display: flex; flex-direction: column; gap: 4px; padding: 8px 10px; border-radius: 10px; background: rgba(255,255,255,.035); box-shadow: inset 0 0 0 1px rgba(255,255,255,.06); min-width: 0; transition: all .35s; } .djx-amq b { font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .djx-amq em { align-self: flex-start; font-style: normal; } .djx-amq small { font-size: 10.5px; color: #6f6982; min-height: 13px; }
.djx-amq span.p { box-shadow: inset 0 0 0 1px #22d3ee, 0 0 18px -8px #22d3ee; } .djx-amq span.p small { color: #67e8f9; } .djx-amq span.n { box-shadow: inset 0 0 0 1px #ff2d92, 0 0 18px -8px #ff2d92; } .djx-amq span.n small { color: #ff7ab8; }
/* ================= KAYIT VE YAYIN ================= */
.djx-rc { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: 14px; }
.djx-rp, .djx-lp2 { padding-bottom: 14px; } .djx-rp .djx-uh b i { color: #ff375f; } .djx-lp2 .djx-uh b i { color: #ff2d92; } .djx-rp .djx-uh .djx-sel, .djx-lp2 .djx-air { margin-left: auto; }
.djx-rt { display: flex; align-items: center; gap: 12px; padding: 4px 14px 10px; } .djx-rt .dot { width: 14px; height: 14px; border-radius: 50%; background: #ff375f; box-shadow: 0 0 18px #ff375f; animation: djxBlink 1s infinite; } .djx-rt b { font: 700 34px/1 ui-monospace, Menlo, monospace; letter-spacing: -.02em; } .djx-rt small { margin-left: auto; font-size: 12px; color: #a8a2bb; }
.djx-lv { padding: 0 14px; } .djx-lv canvas { height: 60px !important; border-radius: 10px; background: #08070d; }
.djx-tl { list-style: none; margin: 12px 14px 0; padding: 0; display: grid; gap: 4px; counter-reset: t; }
.djx-tl li { display: flex; gap: 12px; align-items: center; padding: 7px 10px; border-radius: 9px; font-size: 13px; background: rgba(255,255,255,.03); opacity: .25; transform: translateX(-8px); transition: opacity .5s, transform .5s, background .4s; } .djx-tl li em { font: 700 12px ui-monospace, Menlo, monospace; font-style: normal; color: #ff7ab8; } .djx-tl li.on { opacity: 1; transform: none; } .djx-tl li.cur { background: rgba(255,45,146,.12); box-shadow: inset 2px 0 0 #ff2d92; }
.djx-air { display: inline-flex; align-items: center; gap: 6px; font: 800 11px Inter, sans-serif; letter-spacing: .08em; padding: 5px 11px; border-radius: 99px; color: #fff; background: linear-gradient(135deg, #ff375f, #ff2d92); box-shadow: 0 0 22px -4px #ff2d92; } .djx-air i { width: 7px; height: 7px; border-radius: 50%; background: #fff; animation: djxBlink 1s infinite; }
.djx-onair { position: relative; height: 170px; display: flex; align-items: center; justify-content: center; } .djx-onair > i { font-size: 48px; color: #fff; filter: drop-shadow(0 0 16px #ff2d92); position: relative; z-index: 1; }
.djx-rings i { position: absolute; left: 50%; top: 50%; width: 80px; height: 80px; margin: -40px 0 0 -40px; border-radius: 50%; border: 2px solid rgba(255,45,146,.7); animation: djxRing 2.4s ease-out infinite; } .djx-rings i:nth-child(2) { animation-delay: .8s; border-color: rgba(124,58,237,.7); } .djx-rings i:nth-child(3) { animation-delay: 1.6s; border-color: rgba(34,211,238,.7); }
@keyframes djxRing { from { transform: scale(.6); opacity: 1; } to { transform: scale(2.2); opacity: 0; } }
.djx-outs { display: grid; gap: 6px; padding: 0 14px; } .djx-outs span { display: grid; grid-template-columns: auto 1fr; column-gap: 9px; padding: 8px 10px; border-radius: 10px; background: rgba(48,209,88,.08); box-shadow: inset 0 0 0 1px rgba(48,209,88,.25); } .djx-outs i { grid-row: span 2; color: #4ade80; font-size: 18px; align-self: center; } .djx-outs b { font-size: 12.5px; } .djx-outs small { font-size: 11px; color: #a8a2bb; }
.djx-lp2 .djx-hint { padding: 10px 14px 0; font-size: 12px; }
/* ================= CONTROLLER ================= */
.djx-ct { padding: 22px; }
.djx-hw { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .62fr) minmax(0, 1fr); gap: 18px; padding: 22px; border-radius: 22px; background: linear-gradient(180deg, #1b1827, #110f19); box-shadow: inset 0 1px 0 rgba(255,255,255,.08), inset 0 0 0 1px rgba(255,255,255,.06), 0 30px 60px -30px rgba(0,0,0,.9); }
.djx-hs { --dc: #22d3ee; display: flex; flex-direction: column; align-items: center; gap: 14px; } .djx-hs.xb { --dc: #ff2d92; }
.djx-hj { width: min(160px, 100%); aspect-ratio: 1; border-radius: 50%; position: relative; background: radial-gradient(circle, #2a2639 0 30%, #14121c 31% 100%); box-shadow: inset 0 0 0 2px rgba(255,255,255,.06), 0 0 0 4px #0d0b14, 0 0 0 5px color-mix(in srgb, var(--dc) 60%, transparent), 0 0 30px -6px var(--dc); }
.djx-hj i { position: absolute; inset: 8%; border-radius: 50%; background: repeating-conic-gradient(from 0deg, rgba(255,255,255,.05) 0 4deg, transparent 4deg 12deg); animation: djxSpin 6s linear infinite; }
.djx-hj.hl { box-shadow: inset 0 0 0 2px rgba(255,255,255,.06), 0 0 0 4px #0d0b14, 0 0 0 5px var(--dc), 0 0 50px 0 var(--dc); }
.djx-hb { display: flex; gap: 8px; } .djx-hb span { min-width: 46px; height: 34px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font: 800 10.5px Inter, sans-serif; color: #6f6982; background: #0d0b14; box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); transition: all .2s; }
.djx-hb span.on { color: #fff; } .djx-hb span[data-hl$="cue"].on { color: #1a1000; background: #ff9f0a; box-shadow: 0 0 18px -2px #ff9f0a; } .djx-hb span[data-hl$="play"].on { color: #04130a; background: #4ade80; box-shadow: 0 0 18px -2px #4ade80; } .djx-hb span[data-hl$="sync"].on { color: #07060b; background: var(--dc); box-shadow: 0 0 18px -2px var(--dc); }
.djx-hp { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; width: 100%; max-width: 210px; } .djx-hp i { aspect-ratio: 1.3; border-radius: 7px; background: #0d0b14; box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); transition: all .2s; } .djx-hp i.on { background: color-mix(in srgb, var(--dc) 70%, #0d0b14); box-shadow: 0 0 16px -2px var(--dc); }
.djx-hm { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.djx-hk { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; } .djx-hk i { width: 26px; height: 26px; border-radius: 50%; background: radial-gradient(circle at 50% 35%, #2a2639, #14121c 70%); box-shadow: inset 0 0 0 1px rgba(255,255,255,.1); position: relative; transition: box-shadow .2s; } .djx-hk i::after { content: ""; position: absolute; left: 50%; top: 3px; width: 2px; height: 8px; margin-left: -1px; background: #fff; } .djx-hk i.on { box-shadow: inset 0 0 0 1px #c084fc, 0 0 16px -2px #c084fc; }
.djx-hf { display: flex; gap: 22px; } .djx-hf span { width: 10px; height: 110px; border-radius: 5px; background: #0d0b14; box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); position: relative; } .djx-hf span i { position: absolute; left: -8px; right: -8px; height: 14px; top: 30%; border-radius: 4px; background: linear-gradient(180deg, #f4f2fa, #8a8598); transition: top .5s, box-shadow .2s; } .djx-hf span.on i { box-shadow: 0 0 18px 0 #c084fc; }
.djx-hx { width: 100%; max-width: 150px; height: 10px; border-radius: 5px; background: #0d0b14; box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); position: relative; } .djx-hx i { position: absolute; top: -6px; bottom: -6px; width: 16px; left: 45%; border-radius: 4px; background: linear-gradient(90deg, #f4f2fa, #8a8598); transition: left .6s, box-shadow .2s; } .djx-hx.on i { box-shadow: 0 0 18px 0 #c084fc; }
.djx-ml { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 16px; } .djx-learn, .djx-led { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 700; padding: 7px 12px; border-radius: 99px; } .djx-learn { color: #fff; background: linear-gradient(135deg, #7c3aed, #ff2d92); box-shadow: 0 0 20px -6px #ff2d92; } .djx-led { color: #fbbf24; background: rgba(251,191,36,.12); margin-left: auto; }
.djx-ms { font: 600 12.5px ui-monospace, Menlo, monospace; color: #a8a2bb; } .djx-ms b { color: #7dfb9b; }
/* ================= STEM ================= */
.djx-stm { padding-bottom: 10px; }
.djx-sl { display: grid; grid-template-columns: 96px minmax(0, 1fr) 32px; gap: 10px; align-items: center; padding: 8px 12px 0; transition: opacity .35s; }
.djx-sl .h { display: flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 700; } .djx-sl .h i { color: var(--c); font-size: 17px; filter: drop-shadow(0 0 6px var(--c)); }
.djx-sl canvas { height: 52px !important; border-radius: 9px; background: #08070d; box-shadow: inset 0 0 0 1px rgba(255,255,255,.05); }
.djx-sl .m { height: 30px; border-radius: 8px; font: 800 11px Inter, sans-serif; color: #a8a2bb; background: rgba(255,255,255,.06); }
.djx-sl.mu { opacity: .35; } .djx-sl.mu .m { color: #1a1000; background: #ff9f0a; box-shadow: 0 0 14px -2px #ff9f0a; }
/* ================= TEMALAR ================= */
.djx-thm { padding: 14px; max-width: 1040px; margin: 0 auto; }
.djx-tabs { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-bottom: 14px; } .djx-tabs button { padding: 8px 14px; border-radius: 99px; font-size: 13px; font-weight: 700; color: #a8a2bb; background: rgba(255,255,255,.05); box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); cursor: pointer; transition: all .25s; } .djx-tabs button.on { color: #fff; background: linear-gradient(135deg, #7c3aed, #ff2d92); box-shadow: 0 0 20px -6px #ff2d92; }
.djx-tp { --a: #22d3ee; --b: #ff2d92; --bg: #07060b; --pn: rgba(255,255,255,.04); height: 330px; border-radius: 16px; padding: 12px; background: var(--bg); box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 90px 1fr 50px; gap: 10px; transition: background .5s; }
.djx-tp .tw { border-radius: 10px; overflow: hidden; background: var(--pn); box-shadow: inset 0 0 0 1px rgba(255,255,255,.06); } .djx-tp .tw canvas { height: 100% !important; }
.djx-tp .tg { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 120px 1fr; gap: 10px; align-items: center; justify-items: center; }
.djx-tp .j { --dc: var(--a); width: 120px; aspect-ratio: 1; border-radius: 50%; background: repeating-radial-gradient(circle, #0c0a12 0 2px, #15121d 2px 3px); box-shadow: 0 0 0 3px color-mix(in srgb, var(--dc) 70%, transparent), 0 0 30px -6px var(--dc); position: relative; transition: all .5s; } .djx-tp .j.xb { --dc: var(--b); } .djx-tp .j i { position: absolute; left: 50%; top: 6px; width: 3px; height: 30%; margin-left: -1.5px; background: var(--dc); box-shadow: 0 0 8px var(--dc); transform-origin: 50% 54px; animation: djxSpin 1.8s linear infinite; }
.djx-tp .mx { display: flex; gap: 8px; height: 100%; align-items: center; } .djx-tp .mx i { width: 6px; height: 70%; border-radius: 3px; background: linear-gradient(0deg, #22c55e 0 60%, #fbbf24 60% 85%, #ff375f 85%); opacity: .8; }
.djx-tp .tl { grid-column: 1 / -1; display: grid; gap: 4px; } .djx-tp .tl i { height: 12px; border-radius: 4px; background: var(--pn); box-shadow: inset 0 0 0 1px rgba(255,255,255,.05); }
.djx-tp.t-yatay { grid-template-rows: 70px 70px 1fr 40px; } .djx-tp.t-yatay .tw { grid-column: 1 / -1; } .djx-tp.t-yatay .j { width: 84px; } .djx-tp.t-yatay .j i { transform-origin: 50% 36px; }
.djx-tp.t-plak { grid-template-rows: 46px 1fr 34px; } .djx-tp.t-plak .j { width: 190px; box-shadow: 0 0 0 6px #1b1827, 0 0 0 7px color-mix(in srgb, var(--dc) 60%, transparent), 0 0 40px -4px var(--dc); } .djx-tp.t-plak .j i { transform-origin: 50% 89px; } .djx-tp.t-plak .tg { grid-template-columns: 1fr 100px 1fr; }
.djx-tp.t-paralel { grid-template-rows: 64px 64px 1fr 40px; --bg: #0b0a10; } .djx-tp.t-paralel .tw { grid-column: 1 / -1; border-radius: 4px; } .djx-tp.t-paralel .j { width: 74px; border-radius: 12px; } .djx-tp.t-paralel .j i { display: none; }
.djx-tp.t-konsol { --a: #e5e1f0; --b: #e5e1f0; --bg: #121214; --pn: #1c1c1f; } .djx-tp.t-konsol .j { box-shadow: 0 0 0 2px #3a3a3f; width: 104px; } .djx-tp.t-konsol .j i { box-shadow: none; transform-origin: 50% 46px; }
/* Radyomasyon kartı */
.djx-rm { padding: 46px 0 !important; }
.djx-rmc { display: flex; align-items: center; gap: 18px; padding: 20px 24px; border-radius: 22px; background: linear-gradient(135deg, rgba(34,211,238,.12), rgba(124,58,237,.14) 50%, rgba(255,45,146,.16)); box-shadow: inset 0 0 0 1px rgba(255,255,255,.12), 0 0 60px -20px rgba(255,45,146,.6); }
.djx-rmi { width: 54px; height: 54px; flex: none; border-radius: 16px; display: flex; align-items: center; justify-content: center; font-size: 28px; color: #fff; background: linear-gradient(135deg, #22d3ee, #7c3aed 55%, #ff2d92); box-shadow: 0 0 26px -4px #ff2d92; }
.djx-rmc b { display: block; font: 800 19px/1.25 var(--display, Inter, sans-serif); color: #fff; letter-spacing: -.01em; } .djx-rmc p { margin: 4px 0 0; font-size: 14.5px; line-height: 1.5; color: #c9c4d6 !important; } .djx-rmc .b { margin-left: auto; flex: none; white-space: nowrap; }
/* Radyomasyon sayfası: rozet, neden lazım, paketler */
.djx-badge { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 9px; border-radius: 7px; font: 800 12.5px/1 var(--display, Inter, sans-serif); color: #fff; background: linear-gradient(135deg, #22d3ee, #7c3aed 55%, #ff2d92); box-shadow: 0 6px 16px -6px rgba(255,45,146,.8); }
.b.djx-cta, .djp .b.primary { background: linear-gradient(135deg, #ff2d92, #c026d3 55%, #7c3aed); color: #fff; box-shadow: 0 10px 30px -10px rgba(255,45,146,.85); }
.djx-why { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.djx-wc { position: relative; padding: 24px; border-radius: 22px; background: linear-gradient(160deg, color-mix(in srgb, var(--k) 12%, transparent), rgba(255,255,255,.025) 55%); box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); overflow: hidden; transition: transform .35s, box-shadow .35s; }
.djx-wc::after { content: ""; position: absolute; right: -60px; top: -60px; width: 180px; height: 180px; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--k) 40%, transparent), transparent); opacity: .55; }
.djx-wc:hover { transform: translateY(-4px); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--k) 60%, transparent), 0 20px 50px -24px var(--k); }
.djx-wi { width: 50px; height: 50px; border-radius: 15px; display: flex; align-items: center; justify-content: center; font-size: 26px; color: var(--k); background: color-mix(in srgb, var(--k) 16%, transparent); box-shadow: 0 0 26px -8px var(--k); margin-bottom: 14px; }
.djx-wc h3 { font: 700 18px/1.25 var(--display, Inter, sans-serif); color: #fff; margin: 0 0 8px; letter-spacing: -.01em; } .djx-wc p { font-size: 14.5px; line-height: 1.55; color: #a8a2bb !important; margin: 0 0 14px; }
.djx-wt { display: flex; flex-wrap: wrap; gap: 5px; } .djx-wt em { font-style: normal; font-size: 11.5px; font-weight: 700; padding: 4px 9px; border-radius: 99px; color: color-mix(in srgb, var(--k) 70%, #fff); background: color-mix(in srgb, var(--k) 14%, transparent); }
.djx-tiers { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.djx-tier { position: relative; padding: 24px 22px; border-radius: 22px; background: rgba(255,255,255,.035); box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); }
.djx-tier::before { content: ""; position: absolute; left: 20px; right: 20px; top: 0; height: 2px; border-radius: 2px; background: var(--k); box-shadow: 0 0 16px var(--k); }
.djx-tier.free { background: linear-gradient(170deg, rgba(34,211,238,.14), rgba(255,255,255,.03) 60%); box-shadow: inset 0 0 0 1px rgba(34,211,238,.5), 0 0 60px -24px #22d3ee; }
.djx-tier h3 { font: 800 26px var(--display, Inter, sans-serif); color: #fff; margin: 0; letter-spacing: -.02em; } .djx-tier small { display: block; color: var(--k); font-weight: 700; font-size: 13px; margin: 4px 0 16px; }
.djx-tier ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; } .djx-tier li { display: flex; gap: 8px; font-size: 14px; color: #e5e1f0; line-height: 1.4; } .djx-tier li i { color: var(--k); font-size: 16px; margin-top: 1px; flex: none; }
.djx-free { position: absolute; right: 16px; top: 16px; display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 800; padding: 5px 10px; border-radius: 99px; color: #04131a; background: #22d3ee; box-shadow: 0 0 18px -2px #22d3ee; }
.djx-note { text-align: center; margin: 24px 0 0; font-size: 14.5px; color: #a8a2bb !important; } .djx-note a { color: #ff7ab8; }
@media (max-width: 1080px) { .djx-why { grid-template-columns: repeat(2, minmax(0, 1fr)); } .djx-tiers { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) { .djx-why, .djx-tiers { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .djx-plat, .djx-hj i, .djx-tp .j i, .djx-rings i, .djx-bg i, .djx-aur i, .dj-grad, .djx-logo i { animation: none !important; } }
@media (max-width: 1080px) {
  .djx-main { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .djx-mix { display: none; }
  .djx-anb, .djx-fx, .djx-rc { grid-template-columns: 1fr; } .djx-anl { border-right: 0; border-bottom: 1px solid rgba(255,255,255,.06); }
  .djx-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .djx-hcb { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .djx-main { grid-template-columns: 1fr; } .djx-tbs .djx-tb:not(.rec) { display: none; } .djx-clk { display: none; } .djx-tbs { margin-left: auto; }
  .djx-db { grid-template-columns: 80px minmax(0, 1fr) 22px; } .djx-deck.xb .djx-db { grid-template-columns: 22px minmax(0, 1fr) 80px; } .djx-jog { width: 80px; height: 80px; } .djx-ring { -webkit-mask: radial-gradient(circle, transparent 36px, #000 37px); mask: radial-gradient(circle, transparent 36px, #000 37px); } .djx-jc { inset: 21px; } .djx-plat i { height: 18px; transform-origin: 50% 31px; } .djx-pitch { height: 80px; }
  .djx-key, .djx-tm { display: none; } .djx-deck .djx-dh .djx-key { display: none; }
  .djx-fxr { grid-template-columns: 1fr; } .djx-fxu.xb { display: none; } .djx-lib { grid-template-columns: 1fr; } .djx-side { display: none; }
  .djx-tr2 { grid-template-columns: minmax(0, 1.4fr) 54px 66px; } .djx-tr2 > span:nth-child(2), .djx-tr2 > span:nth-child(5), .djx-tr2 > span:nth-child(6) { display: none; } .djx-q { min-width: 0; flex: 1 1 100%; }
  .djx-ar { grid-template-columns: 26px minmax(0, 1fr) 56px 44px; } .djx-ar .pb, .djx-ar .e { display: none; }
  .djx-ro { grid-template-columns: repeat(2, minmax(0, 1fr)); } .djx-ro div:last-child { grid-column: 1 / -1; } .djx-anw { height: 160px; }
  .djx-cards { grid-template-columns: 1fr; }
  .djx-loops > div:not(.djx-perf) { grid-template-columns: repeat(6, minmax(0, 1fr)); } .djx-pads button { height: 54px; }
  .djx-fxmb .djx-vu, .djx-fxmb .djx-fd { height: 150px; } .djx-fxmb .djx-fd i { top: calc((1 - var(--f)) * 130px + 4px); }
  .djx-sg { grid-template-columns: repeat(4, 1fr); } .djx-sg i:nth-child(n+9) { display: none; }
  .djx-amq { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .djx-hw { grid-template-columns: 1fr; padding: 16px; } .djx-hs.xb { display: none; } .djx-led { margin-left: 0; }
  .djx-sl { grid-template-columns: 76px minmax(0, 1fr) 30px; }
  .djx-tp { height: 280px; } .djx-tp .j { width: 86px; } .djx-tp .j i { transform-origin: 50% 37px; } .djx-tp .tg { grid-template-columns: 1fr 60px 1fr; } .djx-tp.t-plak .j { width: 110px; } .djx-tp.t-plak .j i { transform-origin: 50% 49px; } .djx-tp.t-plak .tg { grid-template-columns: 1fr 50px 1fr; }
  .djx-rmc { flex-direction: column; align-items: flex-start; } .djx-rmc .b { margin-left: 0; }
  .djx-rt b { font-size: 26px; } .djx-lbm { font-size: 12px; } .djx-ch.sv { margin-left: 0; }
}

/* =========================================================
   djdeskStudio Maestro (otomatik DJ) — altın vurgu
   ========================================================= */
.djx-mae { --gold: #ffd60a; --gold2: #ff9f0a; }
.djx-mbg i:nth-child(3) { background: radial-gradient(closest-side, rgba(255,214,10,.2), transparent) !important; }
.djx-mk { color: #1a1200 !important; background: linear-gradient(135deg, #ffd60a, #ff9f0a) !important; box-shadow: 0 0 22px -6px #ffd60a; }
.djx-mk i { color: #1a1200 !important; }
.djx-mgr { background: linear-gradient(90deg, #ffd60a, #ff9f0a 40%, #ff2d92); -webkit-background-clip: text; background-clip: text; color: transparent; }
.djm-x, .djx-mset, .djx-mprep { position: relative; border-radius: 20px; background: linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.02)), rgba(13,11,20,.86); box-shadow: inset 0 0 0 1px rgba(255,255,255,.08), 0 40px 100px -40px rgba(0,0,0,.95), 0 0 90px -40px rgba(255,214,10,.4); color: #f4f2fa; font-family: Inter, -apple-system, system-ui, sans-serif; overflow: hidden; }
.djm-x::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none; background: linear-gradient(120deg, rgba(255,214,10,.65), transparent 35%, transparent 65%, rgba(255,45,146,.55)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
.djx-mae .djx-bar b i { color: #ffd60a; }
.djx-kbd { font: 700 11px ui-monospace, Menlo, monospace; padding: 2px 7px; border-radius: 6px; background: rgba(255,214,10,.16); color: #ffd60a; box-shadow: inset 0 0 0 1px rgba(255,214,10,.4); }
.djx-mae .djx-st.on { background: rgba(255,214,10,.16); color: #ffe680; } .djx-mae .djx-st.on i { background: #ffd60a; box-shadow: 0 0 10px #ffd60a; }
.djm-xb { padding: 14px; display: grid; gap: 12px; }
.djm-xw { position: relative; }
.djm-xw canvas { display: block; width: 100%; height: 260px; border-radius: 14px; background: #07060b; box-shadow: inset 0 0 0 1px rgba(255,255,255,.06); }
.djm-xl { position: absolute; left: 12px; top: 10px; font: 800 11px/1 Inter, sans-serif; letter-spacing: .06em; text-transform: uppercase; color: #1a1200; padding: 6px 10px; border-radius: 8px; background: linear-gradient(135deg, #ffd60a, #ff9f0a); box-shadow: 0 0 18px -4px #ffd60a; }
.djm-xs { display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: center; }
.djx-msty { display: flex; flex-wrap: wrap; gap: 6px; }
.djx-msty em { font-style: normal; display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; padding: 7px 11px; border-radius: 10px; color: #a8a2bb; background: rgba(255,255,255,.05); transition: all .35s; }
.djx-msty em i { font-size: 15px; }
.djx-msty em.on { color: #1a1200; background: linear-gradient(135deg, #ffd60a, #ff9f0a); box-shadow: 0 0 20px -4px #ffd60a; transform: translateY(-1px); }
.djx-mwhy { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px; }
.djx-mwhy span { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; padding: 5px 10px; border-radius: 99px; background: rgba(255,255,255,.05); color: #d9d4e6; animation: djxMIn .5s both; }
.djx-mwhy span.ok i { color: #30d158; } .djx-mwhy span i { color: #ffd60a; }
.djx-mwhy span.bad i { color: #ff9f0a; }
@keyframes djxMIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.djx-mctl { grid-column: 2; grid-row: 1; display: flex; align-items: flex-end; gap: 14px; }
.djm-k2 { display: grid; justify-items: center; gap: 4px; }
.djm-k2 small, .djm-xf small { font: 700 9px/1 Inter, sans-serif; letter-spacing: .08em; color: #8b8599; }
.djm-kn { position: relative; width: 38px; height: 38px; border-radius: 50%; background: radial-gradient(circle at 50% 35%, #2b2738, #121019); box-shadow: inset 0 0 0 1px rgba(255,255,255,.12), 0 0 0 3px rgba(34,211,238,.15); }
.djm-kn.b { box-shadow: inset 0 0 0 1px rgba(255,255,255,.12), 0 0 0 3px rgba(255,45,146,.18); }
.djm-kn.f { box-shadow: inset 0 0 0 1px rgba(255,255,255,.12), 0 0 0 3px rgba(255,214,10,.2); }
.djm-kn i { position: absolute; left: 50%; top: 4px; width: 3px; height: 13px; margin-left: -1.5px; border-radius: 2px; background: #fff; transform-origin: 50% 15px; transform: rotate(calc(-135deg + var(--v) * 270deg)); transition: transform .12s linear; }
.djm-xf { display: grid; gap: 5px; width: 150px; }
.djm-xft { position: relative; height: 8px; border-radius: 4px; background: #07060b; box-shadow: inset 0 0 0 1px rgba(255,255,255,.1); }
.djm-xft i { position: absolute; top: -7px; left: calc(50% + var(--x) * 50% - 9px); width: 18px; height: 22px; border-radius: 4px; background: linear-gradient(180deg, #f4f2fa, #b8b2c8); box-shadow: 0 4px 10px rgba(0,0,0,.6); transition: left .12s linear; }
.djm-xfl { display: flex; justify-content: space-between; font: 800 10px Inter, sans-serif; } .djm-xfl b:first-child { color: #22d3ee; } .djm-xfl b:last-child { color: #ff2d92; }
.djx-m3 { display: grid; grid-template-columns: 1.15fr 1fr; gap: 16px; margin-top: 18px; }
.djx-mmood { display: flex; gap: 4px; padding: 12px 14px 0; flex-wrap: wrap; }
.djx-mmood em { font-style: normal; font-size: 12px; font-weight: 700; padding: 6px 11px; border-radius: 9px; color: #a8a2bb; background: rgba(255,255,255,.05); transition: all .3s; }
.djx-mmood em.on { color: #1a1200; background: linear-gradient(135deg, #ffd60a, #ff9f0a); }
.djx-mcurve { padding: 10px 14px 0; } .djx-mcurve canvas { display: block; width: 100%; height: 90px; border-radius: 12px; background: #07060b; }
.djx-mlist { position: relative; padding: 10px 14px; height: calc(6 * 40px + 20px); }
.djx-mr { position: absolute; left: 14px; right: 14px; top: calc(10px + var(--y, 0) * 40px); height: 36px; display: grid; grid-template-columns: 20px 1fr 54px 40px 54px; gap: 10px; align-items: center; padding: 0 10px; border-radius: 10px; background: rgba(255,255,255,.035); font-size: 12.5px; transition: top .7s cubic-bezier(.2,.9,.25,1), background .4s, box-shadow .4s; }
.djx-mr.hit { background: rgba(255,214,10,.1); box-shadow: inset 0 0 0 1px rgba(255,214,10,.35); }
.djx-mr .n { font: 700 11px ui-monospace, monospace; color: #6f6982; text-align: right; }
.djx-mr .tt { min-width: 0; } .djx-mr b { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .djx-mr small { display: block; font-size: 10.5px; color: #8b8599; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.djx-mr em { font: 600 11.5px ui-monospace, monospace; font-style: normal; color: #d9d4e6; } .djx-mr em.k { color: #30d158; }
.djx-mr .e { height: 5px; border-radius: 3px; background: linear-gradient(90deg, #22d3ee, #ffd60a, #ff2d92) 0 0 / calc(var(--e) * 100%) 100% no-repeat, rgba(255,255,255,.1); }
.djx-mft { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 14px 14px; font-size: 12.5px; color: #a8a2bb; }
.djx-mgo { display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; border-radius: 10px; font-weight: 700; color: #1a1200; background: linear-gradient(135deg, #ffd60a, #ff9f0a); box-shadow: 0 0 20px -6px #ffd60a; }
.djx-mpw { padding: 12px 14px 0; } .djx-mpw canvas { display: block; width: 100%; height: 150px; border-radius: 12px; background: #07060b; }
.djx-mpl { display: flex; flex-wrap: wrap; gap: 12px; padding: 10px 14px 0; font-size: 12px; color: #d9d4e6; }
.djx-mpl span { display: inline-flex; align-items: center; gap: 6px; } .djx-mpl i { width: 10px; height: 10px; border-radius: 3px; background: var(--c); box-shadow: 0 0 8px var(--c); }
.djm-sug { display: grid; gap: 6px; padding: 14px; } .djm-sug > small { font: 700 10px Inter, sans-serif; letter-spacing: .08em; text-transform: uppercase; color: #8b8599; }
.djm-s { display: grid; grid-template-columns: 1fr 90px auto; gap: 10px; align-items: center; padding: 8px 10px; border-radius: 10px; background: rgba(255,255,255,.035); font-size: 12.5px; }
.djm-s b { display: block; } .djm-s small { display: block; font: 600 11px ui-monospace, monospace; color: #30d158; }
.djm-s .sc { height: 6px; border-radius: 3px; background: rgba(255,255,255,.08); overflow: hidden; } .djm-s .sc i { display: block; height: 100%; width: calc(var(--s) * 100%); border-radius: inherit; background: linear-gradient(90deg, #ffd60a, #ff2d92); transform-origin: left; animation: djxGrow 1.4s cubic-bezier(.2,.9,.25,1) both; }
@keyframes djxGrow { from { transform: scaleX(0); } }
.djm-s .ld { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 700; color: #ffd60a; padding: 5px 9px; border-radius: 8px; background: rgba(255,214,10,.1); }
.djx-mnote i { color: #ffd60a; }
@media (max-width: 980px) { .djx-m3 { grid-template-columns: 1fr; } .djm-xs { grid-template-columns: 1fr; } .djx-mctl { grid-column: 1; grid-row: auto; flex-wrap: wrap; } }
@media (max-width: 560px) { .djm-xw canvas { height: 200px; } .djx-mr { grid-template-columns: 16px 1fr 46px 34px; } .djx-mr .e { display: none; } .djm-xf { width: 120px; } .djm-s { grid-template-columns: 1fr 60px; } .djm-s .ld { display: none; } }
@media (prefers-reduced-motion: reduce) { .djx-mr, .djm-s .sc i, .djx-mwhy span { transition: none; animation: none; } }
.djx-mae .djx-bar b { white-space: nowrap; }
@media (max-width: 560px) { .djx-mst2 { display: none !important; } .djx-mae .djx-bar .djx-kbd { margin-left: 2px; } }