/* =========================================================
   "Neden" sayfaları — hareketli hikâye sahneleri (Radyomasyon, CaptStudio, AudiosStudio, djdeskStudio)
   Her sahne: solda konu, alışılmış yol ve yeni yol; sağda kendi kendine "önce / sonra" arasında geçen canlı bir pano.
   ========================================================= */
.wy { --a: #0a84ff; --a2: #ff375f; --a3: #bf5af2; --bg: #07070a; --gl: rgba(255,255,255,.055); --gl2: rgba(255,255,255,.1); --tx: #f5f5f7; --tx2: rgba(245,245,247,.62); --tx3: rgba(245,245,247,.4);
  position: relative; background: var(--bg); color: var(--tx); overflow: hidden; isolation: isolate; font-family: var(--font); }
.wy-cap { --a: #ff9f0a; --a2: #ff3d8b; --a3: #ffd60a; }
.wy-aud { --a: #30d158; --a2: #0a84ff; --a3: #7dfb9b; }
.wy-dj { --a: #ff2d92; --a2: #22d3ee; --a3: #7c3aed; --bg: #07060b; }
.wy *, .wy *::before, .wy *::after { box-sizing: border-box; }
.wy .wrap { position: relative; z-index: 1; }
.wy-aura { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.wy-aura i { position: absolute; border-radius: 50%; filter: blur(110px); opacity: .5; animation: wyFloat 20s ease-in-out infinite; }
.wy-aura i:nth-child(1) { width: 640px; height: 640px; left: -240px; top: -120px; background: radial-gradient(circle, color-mix(in srgb, var(--a) 70%, transparent), transparent 65%); }
.wy-aura i:nth-child(2) { width: 700px; height: 700px; right: -280px; top: 30%; background: radial-gradient(circle, color-mix(in srgb, var(--a2) 60%, transparent), transparent 65%); animation-delay: -7s; }
.wy-aura i:nth-child(3) { width: 560px; height: 560px; left: 30%; bottom: -260px; background: radial-gradient(circle, color-mix(in srgb, var(--a3) 55%, transparent), transparent 65%); animation-delay: -13s; }
@keyframes wyFloat { 50% { transform: translate(50px, -40px) scale(1.1); } }
.wy-grain { position: absolute; inset: 0; z-index: 0; opacity: .045; pointer-events: none; background-image: radial-gradient(rgba(255,255,255,.9) .6px, transparent .7px); background-size: 3px 3px; }
.wy-grad { background: linear-gradient(100deg, var(--a3), var(--a) 40%, var(--a2) 80%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.wy-dj .wy-grad { background: linear-gradient(100deg, #67e8f9, #22d3ee 22%, #7c3aed 55%, #ff2d92 85%, #ff7ab8); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; animation: wyGradMove 8s ease-in-out infinite alternate; }
@keyframes wyGradMove { to { background-position: 100% 0; } }

/* ---------- açılış ---------- */
.wy-hero { position: relative; padding: 150px 0 90px; text-align: center; }
.wy-crumbs { display: inline-flex; gap: 8px; align-items: center; font-size: 13px; color: var(--tx3); margin-bottom: 22px; }
.wy-crumbs a { color: var(--tx2); }
.wy-chip { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: 99px; font-size: 13px; font-weight: 650; color: var(--tx);
  background: color-mix(in srgb, var(--a) 16%, rgba(255,255,255,.04)); box-shadow: inset 0 0 0 .5px color-mix(in srgb, var(--a) 55%, transparent); }
.wy-chip .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--a); box-shadow: 0 0 10px var(--a); animation: wyBlink 1.6s ease-in-out infinite; }
@keyframes wyBlink { 50% { opacity: .35; } }
.wy-hero h1 { font: 800 clamp(38px, 6vw, 76px)/1.03 var(--display); letter-spacing: -0.045em; margin: 22px auto 22px; max-width: 980px; color: #fff; }
.wy-hero h1 span { display: block; }
.wy-hero .lead { font-size: clamp(17px, 1.6vw, 20px); line-height: 1.6; color: var(--tx2); max-width: 760px; margin: 0 auto; }
.wy-ctas { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 34px; }
.wy-pills { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 46px auto 0; max-width: 900px; }
.wy-pills a { display: inline-flex; align-items: center; gap: 8px; padding: 9px 15px; border-radius: 14px; font-size: 14px; font-weight: 600; color: var(--tx);
  background: rgba(255,255,255,.05); box-shadow: inset 0 0 0 .5px rgba(255,255,255,.12); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); transition: background .2s, transform .2s; }
.wy-pills a:hover { background: rgba(255,255,255,.1); transform: translateY(-2px); }
.wy-pills a i { color: var(--a); font-size: 17px; }
.wy-pills a em { font-style: normal; font-size: 11px; color: var(--tx3); font-weight: 700; }

/* ---------- sahneler ---------- */
.wy-scenes { position: relative; padding: 30px 0 60px; }
.wy-sc { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 64px; align-items: center; padding: 70px 0; }
.wy-sc.rev { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); }
.wy-sc.rev .wy-txt { order: 2; }
.wy-sc + .wy-sc { border-top: 1px solid rgba(255,255,255,.06); }
.wy-k { display: inline-flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 700; letter-spacing: .02em; color: var(--a); text-transform: uppercase; }
.wy-k b { width: 30px; height: 30px; border-radius: 10px; display: grid; place-items: center; font-size: 13px; color: #fff; background: linear-gradient(150deg, var(--a), var(--a2)); box-shadow: 0 8px 22px -8px var(--a); }
.wy-txt h2 { font: 800 clamp(28px, 3.4vw, 44px)/1.08 var(--display); letter-spacing: -0.035em; margin: 16px 0 16px; color: #fff; }
.wy-txt > p { font-size: 17px; line-height: 1.65; color: var(--tx2); margin: 0 0 22px; }
.wy-ba { display: grid; gap: 10px; }
.wy-ba div { display: grid; grid-template-columns: 26px 1fr; gap: 10px; align-items: start; padding: 13px 15px; border-radius: 14px; font-size: 15px; line-height: 1.5; }
.wy-ba small { display: block; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; margin-bottom: 2px; }
.wy-ba .o { background: rgba(255,255,255,.035); color: var(--tx3); }
.wy-ba .o i { color: rgba(255,255,255,.3); font-size: 20px; }
.wy-ba .n { background: color-mix(in srgb, var(--a) 11%, rgba(255,255,255,.03)); box-shadow: inset 0 0 0 .5px color-mix(in srgb, var(--a) 40%, transparent); color: var(--tx); }
.wy-ba .n i { color: var(--a); font-size: 20px; }
.wy-ba .n small { color: var(--a); }

/* pano */
.wy-stg { position: relative; border-radius: 24px; background: linear-gradient(160deg, rgba(255,255,255,.07), rgba(255,255,255,.02)); box-shadow: inset 0 0 0 .5px rgba(255,255,255,.14), 0 50px 120px -50px rgba(0,0,0,.9), 0 0 0 1px rgba(0,0,0,.4);
  backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); overflow: hidden; }
.wy-stg::before { content: ""; position: absolute; inset: -40%; background: radial-gradient(closest-side, color-mix(in srgb, var(--a) 22%, transparent), transparent); opacity: 0; transition: opacity .8s; pointer-events: none; }
.wy-stg[data-s="1"]::before { opacity: .9; }
.wy-sbar { position: relative; z-index: 2; display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid rgba(255,255,255,.07); }
.wy-dots { display: flex; gap: 6px; }
.wy-dots i { width: 10px; height: 10px; border-radius: 50%; background: rgba(255,255,255,.18); }
.wy-dots i:nth-child(1) { background: #ff5f57; } .wy-dots i:nth-child(2) { background: #febc2e; } .wy-dots i:nth-child(3) { background: #28c840; }
.wy-sbar .t { flex: 1; font-size: 12px; color: var(--tx3); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wy-tg { position: relative; display: grid; grid-template-columns: 1fr 1fr; padding: 3px; border-radius: 99px; background: rgba(0,0,0,.35); box-shadow: inset 0 0 0 .5px rgba(255,255,255,.1); flex: none; }
.wy-tg button { position: relative; z-index: 1; border: 0; background: none; padding: 5px 11px; font-size: 11.5px; font-weight: 700; color: var(--tx3); cursor: pointer; border-radius: 99px; white-space: nowrap; transition: color .3s; }
.wy-tg::before { content: ""; position: absolute; top: 3px; bottom: 3px; left: 3px; width: calc(50% - 3px); border-radius: 99px; background: rgba(255,255,255,.14); transition: transform .5s var(--ease), background .5s; }
.wy-stg[data-s="1"] .wy-tg::before { transform: translateX(100%); background: linear-gradient(120deg, var(--a), var(--a2)); box-shadow: 0 4px 14px -4px var(--a); }
.wy-stg[data-s="0"] .wy-tg button:first-child, .wy-stg[data-s="1"] .wy-tg button:last-child { color: #fff; }
.wy-body { position: relative; z-index: 1; aspect-ratio: 16 / 10.5; min-height: 280px; }
.wy-L { position: absolute; inset: 0; padding: 22px; transition: opacity .7s var(--ease), transform .7s var(--ease), filter .7s; }
.wy-L0 { opacity: 1; }
.wy-L1 { opacity: 0; transform: scale(.97); filter: blur(6px); pointer-events: none; }
.wy-stg[data-s="1"] .wy-L0 { opacity: 0; transform: scale(1.03); filter: blur(6px) grayscale(1); pointer-events: none; }
.wy-stg[data-s="1"] .wy-L1 { opacity: 1; transform: none; filter: none; pointer-events: auto; }
.wy-L0 { filter: saturate(.25); }
.wy-cap-l { position: absolute; left: 22px; bottom: 18px; z-index: 3; display: inline-flex; align-items: center; gap: 7px; padding: 6px 11px; border-radius: 99px; font-size: 12px; font-weight: 700; background: rgba(0,0,0,.5); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: inset 0 0 0 .5px rgba(255,255,255,.15); }
.wy-L0 .wy-cap-l { color: #ffb4ab; } .wy-L0 .wy-cap-l i { color: #ff6961; }
.wy-L1 .wy-cap-l { color: #fff; } .wy-L1 .wy-cap-l i { color: var(--a); }
/* yalnızca görünürken hareket */
.wy-stg *, .wy-stg *::before, .wy-stg *::after { animation-play-state: paused; }
.wy-stg.run *, .wy-stg.run *::before, .wy-stg.run *::after { animation-play-state: running; }

/* ortak parçalar */
.wy-win { position: absolute; border-radius: 14px; background: rgba(18,18,24,.92); box-shadow: inset 0 0 0 .5px rgba(255,255,255,.14), 0 24px 60px -24px rgba(0,0,0,.9); overflow: hidden; }
.wy-win > header { display: flex; align-items: center; gap: 7px; padding: 8px 11px; font-size: 11px; font-weight: 700; color: var(--tx2); border-bottom: 1px solid rgba(255,255,255,.06); }
.wy-win > header i { font-size: 14px; }
.wy-win > header .wy-dots i { width: 7px; height: 7px; }
.wy-row { display: flex; align-items: center; gap: 9px; padding: 8px 11px; font-size: 12px; color: var(--tx2); border-bottom: 1px solid rgba(255,255,255,.05); }
.wy-row i { font-size: 15px; }
.wy-row b { color: var(--tx); font-weight: 650; }
.wy-row .sp { margin-left: auto; }
.wy-pg { height: 6px; border-radius: 6px; background: rgba(255,255,255,.08); overflow: hidden; }
.wy-pg i { display: block; height: 100%; border-radius: 6px; background: linear-gradient(90deg, var(--a), var(--a2)); }
.wy-L0 .wy-pg i { background: rgba(255,255,255,.45); }
.wy-pill { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 99px; font-size: 11.5px; font-weight: 700; background: rgba(255,255,255,.07); color: var(--tx); box-shadow: inset 0 0 0 .5px rgba(255,255,255,.12); white-space: nowrap; }
.wy-pill.ok { background: color-mix(in srgb, var(--a) 22%, transparent); box-shadow: inset 0 0 0 .5px color-mix(in srgb, var(--a) 60%, transparent); }
.wy-pill.ok i { color: var(--a); }
.wy-pill.bad { background: rgba(255,69,58,.16); color: #ffb4ab; box-shadow: inset 0 0 0 .5px rgba(255,69,58,.45); }
.wy-spin { display: inline-block; animation: wySpin 1.1s linear infinite; }
@keyframes wySpin { to { transform: rotate(360deg); } }
.wy-ico { width: 54px; height: 54px; border-radius: 16px; display: grid; place-items: center; font-size: 28px; color: #fff; background: linear-gradient(150deg, var(--a), var(--a2)); box-shadow: 0 16px 40px -14px var(--a); }
.wy-center { position: absolute; inset: 0; display: grid; place-items: center; }
.wy-mono { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-variant-numeric: tabular-nums; }
.wy-bars { display: flex; align-items: flex-end; gap: 3px; height: 100%; }
.wy-bars i { flex: 1; border-radius: 2px; background: linear-gradient(0deg, var(--a), var(--a2)); height: var(--h, 50%); animation: wyBar 1s ease-in-out infinite alternate; animation-delay: var(--d, 0s); transform-origin: bottom; }
@keyframes wyBar { from { transform: scaleY(.3); } to { transform: scaleY(1); } }
.wy-L0 .wy-bars i { background: rgba(255,255,255,.35); }

/* ===== sahne: kurulum ===== */
.sc-inst .w0 { left: 8%; right: 8%; top: 9%; }
.sc-inst .w0 .wy-row:last-child { border: 0; }
.sc-inst .w0 .pgw { padding: 12px 11px 14px; }
.sc-inst .w0 .pgw .wy-pg i { width: 62%; animation: wyStall 4s ease-in-out infinite; }
@keyframes wyStall { 0% { width: 8%; } 40% { width: 58%; } 100% { width: 61%; } }
.sc-inst .w0 .warn { position: absolute; right: 12px; bottom: 12px; animation: wyBlink 1.2s ease-in-out infinite; }
.sc-inst .appw { left: 50%; top: 50%; width: min(330px, 78%); transform: translate(-50%, -54%); text-align: center; padding: 26px 22px 22px; animation: wyPop .7s var(--ease) both; }
.wy-stg[data-s="1"] .sc-inst .appw { animation: wyPop .7s var(--ease) both; }
@keyframes wyPop { from { opacity: 0; transform: translate(-50%, -46%) scale(.92); } }
.sc-inst .appw img { width: 60px; height: 60px; border-radius: 16px; box-shadow: 0 16px 40px -14px var(--a); }
.sc-inst .appw .rm-ic { width: 60px; height: 60px; margin: 0 auto; }
.sc-inst .appw b { display: block; font-size: 16px; margin: 12px 0 4px; }
.sc-inst .appw small { display: block; font-size: 12px; color: var(--tx2); }
.sc-inst .appw .yfld { margin: 14px 0 10px; height: 34px; border-radius: 10px; background: rgba(255,255,255,.06); box-shadow: inset 0 0 0 .5px rgba(255,255,255,.12); display: flex; align-items: center; gap: 8px; padding: 0 10px; font-size: 12px; color: var(--tx2); }
.sc-inst .appw .yfld i { color: var(--a); }
.sc-inst .appw .yfld span { overflow: hidden; white-space: nowrap; border-right: 2px solid var(--a); width: 0; animation: wyType 2.4s steps(18) .5s infinite alternate; }
@keyframes wyType { to { width: 18ch; } }
.sc-inst .appw .go { height: 34px; border-radius: 10px; display: flex; align-items: center; justify-content: center; gap: 7px; font-size: 12.5px; font-weight: 700; color: #fff; background: linear-gradient(120deg, var(--a), var(--a2)); }

/* ===== sahne: dosyalar bilgisayarda ===== */
.sc-files .pc { position: absolute; left: 50%; top: 52%; width: 46%; aspect-ratio: 16/10; transform: translate(-50%, -50%); border-radius: 12px 12px 4px 4px; background: rgba(20,20,26,.95); box-shadow: inset 0 0 0 .5px rgba(255,255,255,.18); }
.sc-files .pc::after { content: ""; position: absolute; left: -12%; right: -12%; bottom: -10px; height: 10px; border-radius: 0 0 10px 10px; background: rgba(255,255,255,.14); }
.sc-files .cl { position: absolute; left: 50%; top: 4%; transform: translateX(-50%); font-size: 54px; color: rgba(255,255,255,.4); }
.sc-files .fly i { position: absolute; left: 50%; top: 46%; font-size: 22px; color: rgba(255,255,255,.6); animation: wyUp 2.6s ease-in infinite; animation-delay: var(--d); }
@keyframes wyUp { 0% { transform: translate(var(--x), 0); opacity: 0; } 15% { opacity: 1; } 100% { transform: translate(-50%, -150px) scale(.5); opacity: 0; } }
.sc-files .up { position: absolute; left: 50%; bottom: 13%; width: 54%; transform: translateX(-50%); font-size: 11.5px; color: var(--tx2); display: grid; gap: 6px; }
.sc-files .up .wy-pg i { width: 37%; animation: wyStall 5s ease-in-out infinite; }
.sc-files .wy-fold { position: absolute; inset: 0; display: grid; place-items: center; }
.sc-files .wy-fold > i { font-size: 64px; color: var(--a); filter: drop-shadow(0 10px 24px color-mix(in srgb, var(--a) 60%, transparent)); }
.sc-files .inside i { position: absolute; left: 50%; top: 50%; font-size: 18px; color: #fff; animation: wyIn 3s var(--ease) infinite; animation-delay: var(--d); }
@keyframes wyIn { 0% { transform: translate(var(--x), var(--y)) scale(.9); opacity: 0; } 20% { opacity: 1; } 70%, 100% { transform: translate(-50%, -50%) scale(.3); opacity: 0; } }
.sc-files .shield { position: absolute; right: 7%; top: 10%; }
.sc-files .off { position: absolute; left: 7%; top: 10%; }

/* ===== zaman çizelgesi (CaptStudio) ===== */
.wy-tl { position: absolute; left: 22px; right: 22px; bottom: 58px; display: grid; gap: 8px; }
.wy-tl .ln { position: relative; height: 30px; border-radius: 8px; background: rgba(255,255,255,.045); box-shadow: inset 0 0 0 .5px rgba(255,255,255,.07); overflow: hidden; }
.wy-tl .ln::before { content: attr(data-n); position: absolute; left: 8px; top: 50%; transform: translateY(-50%); font-size: 10px; font-weight: 700; color: var(--tx3); }
.wy-tl .cl { position: absolute; top: 3px; bottom: 3px; left: var(--l); width: var(--w); border-radius: 6px; background: linear-gradient(120deg, var(--c, var(--a)), color-mix(in srgb, var(--c, var(--a)) 60%, #000)); box-shadow: inset 0 0 0 .5px rgba(255,255,255,.25); animation: wyClip .6s var(--ease) both; animation-delay: var(--d); }
@keyframes wyClip { from { transform: translateX(60px); opacity: 0; } }
.wy-stg[data-s="0"] .wy-L1 .wy-tl .cl { animation: none; opacity: 0; }
.wy-tl .ph { position: absolute; top: -6px; bottom: -6px; width: 2px; left: 12%; background: #fff; box-shadow: 0 0 10px #fff; animation: wyPh 6s linear infinite; }
@keyframes wyPh { to { left: 96%; } }
.sc-start .clock { position: absolute; left: 50%; top: 20%; transform: translateX(-50%); display: grid; justify-items: center; gap: 6px; }
.sc-start .clock .f { width: 64px; height: 64px; border-radius: 50%; box-shadow: inset 0 0 0 2px rgba(255,255,255,.3); position: relative; }
.sc-start .clock .f::before, .sc-start .clock .f::after { content: ""; position: absolute; left: 50%; bottom: 50%; width: 2px; background: #fff; transform-origin: bottom; border-radius: 2px; }
.sc-start .clock .f::before { height: 24px; animation: wySpin 1.2s linear infinite; }
.sc-start .clock .f::after { height: 16px; animation: wySpin 14s linear infinite; }
.sc-start .clock b { font-size: 13px; }
.sc-start .wand { position: absolute; left: 50%; top: 16%; transform: translateX(-50%); display: grid; justify-items: center; gap: 10px; }
.sc-start .wand .wy-ico { animation: wyGlow 2s ease-in-out infinite; }
@keyframes wyGlow { 50% { box-shadow: 0 0 0 10px color-mix(in srgb, var(--a) 18%, transparent), 0 16px 40px -14px var(--a); } }

/* ritim */
.sc-beat .grid { position: absolute; left: 22px; right: 22px; top: 22%; height: 46%; }
.sc-beat .wv { position: absolute; inset: 0; display: flex; align-items: center; gap: 2px; }
.sc-beat .wv i { flex: 1; height: var(--h); border-radius: 2px; background: rgba(255,255,255,.22); }
.wy-L1.sc-beat .wv i { background: linear-gradient(0deg, color-mix(in srgb, var(--a) 60%, transparent), var(--a3)); }
.sc-beat .bt { position: absolute; top: -8px; bottom: -8px; width: 1px; left: var(--l); background: rgba(255,255,255,.18); }
.wy-L1.sc-beat .bt { background: color-mix(in srgb, var(--a) 70%, transparent); animation: wyBeat .5s ease-out infinite; animation-delay: var(--d); }
@keyframes wyBeat { 0% { box-shadow: 0 0 14px 2px var(--a); } 100% { box-shadow: none; } }
.sc-beat .cut { position: absolute; top: -18px; bottom: -18px; width: 3px; left: var(--l); border-radius: 3px; background: #ff6961; }
.sc-beat .cut::before { content: ""; position: absolute; top: -6px; left: -5px; border: 6.5px solid transparent; border-top-color: #ff6961; }
.wy-L0.sc-beat .cut.s { animation: wySeek 3s ease-in-out infinite alternate; }
@keyframes wySeek { to { left: calc(var(--l) + 9%); } }
.wy-L1.sc-beat .cut { background: #fff; box-shadow: 0 0 14px var(--a); }
.wy-L1.sc-beat .cut::before { border-top-color: #fff; }
.sc-beat .ear { position: absolute; right: 22px; top: 12%; }

/* görünüm */
.sc-look .pan { position: absolute; top: 14%; width: 27%; padding: 10px; }
.sc-look .pan:nth-child(1) { left: 6%; } .sc-look .pan:nth-child(2) { left: 36.5%; } .sc-look .pan:nth-child(3) { left: 67%; }
.sc-look .pan b { display: flex; gap: 6px; align-items: center; font-size: 11.5px; margin-bottom: 10px; }
.sc-look .sl { position: relative; height: 4px; border-radius: 4px; background: rgba(255,255,255,.12); margin: 12px 0; }
.sc-look .sl i { position: absolute; top: -5px; width: 14px; height: 14px; border-radius: 50%; background: #ddd; left: 30%; animation: wyJit 1.3s ease-in-out infinite alternate; animation-delay: var(--d); }
@keyframes wyJit { 33% { left: 70%; } 66% { left: 12%; } 100% { left: 55%; } }
.sc-look .tpl { position: absolute; left: 6%; top: 18%; width: 30%; padding: 12px; }
.sc-look .tpl .ysw { height: 54px; border-radius: 8px; background: linear-gradient(135deg, #ff9f0a, #ff3d8b 55%, #5e5ce6); margin-bottom: 9px; }
.sc-look .tpl small { display: block; font-size: 10.5px; color: var(--tx2); margin-top: 3px; }
.sc-look .arr { position: absolute; left: 39%; top: 38%; font-size: 26px; color: var(--a); animation: wyNudge 1.4s ease-in-out infinite; }
@keyframes wyNudge { 50% { transform: translateX(8px); } }
.sc-look .pv { position: absolute; right: 6%; top: 12%; width: 48%; aspect-ratio: 16/9; border-radius: 12px; overflow: hidden; background: linear-gradient(160deg, #4b5d73, #20262e); box-shadow: inset 0 0 0 .5px rgba(255,255,255,.2), 0 24px 60px -20px rgba(0,0,0,.8); }
.sc-look .pv .hill { position: absolute; left: -10%; right: -10%; bottom: -30%; height: 70%; border-radius: 50%; background: #2c3a2d; }
.sc-look .pv .sun { position: absolute; right: 18%; top: 18%; width: 22%; aspect-ratio: 1; border-radius: 50%; background: #e8e2c8; }
.sc-look .pv .grade { position: absolute; inset: 0; background: linear-gradient(160deg, rgba(255,140,0,.45), rgba(255,61,139,.25) 60%, rgba(94,92,230,.35)); mix-blend-mode: overlay; animation: wyGrade 4s ease-in-out infinite alternate; }
@keyframes wyGrade { from { opacity: 0; } to { opacity: 1; } }
.sc-look .pv .ttl { position: absolute; left: 8%; bottom: 14%; font: 800 clamp(12px, 1.6vw, 20px)/1 var(--display); color: #fff; letter-spacing: -0.02em; text-shadow: 0 4px 14px rgba(0,0,0,.5); animation: wyTtl 4s var(--ease) infinite; }
.sc-look .pv .ttl small { display: block; font: 600 10px/1.4 var(--font); opacity: .8; }
@keyframes wyTtl { 0%, 10% { opacity: 0; transform: translateY(10px); } 25%, 85% { opacity: 1; transform: none; } 100% { opacity: 0; } }
.sc-look .pv .wipe { position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255,255,255,.7) 50%, transparent); transform: translateX(-110%); animation: wyWipe 4s ease-in-out infinite; }
@keyframes wyWipe { 0%, 70% { transform: translateX(-110%); } 90%, 100% { transform: translateX(110%); } }
.sc-look .tags { position: absolute; right: 6%; bottom: 60px; display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; max-width: 50%; }

/* biçim */
.sc-fmt .yfr { position: absolute; left: 50%; top: 46%; transform: translate(-50%, -50%); border-radius: 12px; overflow: hidden; background: linear-gradient(160deg, #3d4b5c, #1c2128); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--a) 80%, transparent), 0 24px 60px -20px rgba(0,0,0,.8); }
.wy-L1.sc-fmt .yfr { animation: wyFmt 7.5s var(--ease) infinite; }
.wy-L0.sc-fmt .yfr { width: 52%; aspect-ratio: 16/9; box-shadow: inset 0 0 0 1px rgba(255,255,255,.25); }
@keyframes wyFmt { 0%, 26% { width: 52%; height: 51%; } 33%, 59% { width: 22%; height: 68%; } 66%, 92% { width: 38%; height: 68%; } 100% { width: 52%; height: 51%; } }
.sc-fmt .yfr .ttl { position: absolute; left: 50%; bottom: 12%; transform: translateX(-50%); font: 800 clamp(11px, 1.3vw, 16px)/1.1 var(--display); color: #fff; white-space: nowrap; text-shadow: 0 3px 10px rgba(0,0,0,.6); }
.sc-fmt .yfr .sun { position: absolute; left: 50%; top: 22%; width: 26px; height: 26px; margin-left: -13px; border-radius: 50%; background: #ffd27a; }
.sc-fmt .rt { position: absolute; left: 50%; top: 10%; transform: translateX(-50%); display: flex; gap: 6px; }
.sc-fmt .rt span { opacity: .4; transition: opacity .3s; }
.wy-L1.sc-fmt .rt span { animation: wyRt 7.5s steps(1) infinite; }
.wy-L1.sc-fmt .rt span:nth-child(2) { animation-delay: -5s; } .wy-L1.sc-fmt .rt span:nth-child(3) { animation-delay: -2.5s; }
@keyframes wyRt { 0%, 33% { opacity: 1; background: color-mix(in srgb, var(--a) 30%, transparent); } 33.1%, 100% { opacity: .4; background: rgba(255,255,255,.07); } }
.wy-L0.sc-fmt .rb { position: absolute; left: 50%; top: 80%; transform: translateX(-50%); }
.wy-L0.sc-fmt .yfr .bld { position: absolute; inset: 0; background: repeating-linear-gradient(90deg, rgba(255,255,255,.06) 0 12px, transparent 12px 24px); animation: wyRebuild 2s linear infinite; }
@keyframes wyRebuild { to { background-position: 48px 0; } }

/* ===== ses (AudiosStudio) ===== */
.sc-chain .wy-win { top: 26%; width: 27%; padding-bottom: 10px; }
.sc-chain .wy-win:nth-of-type(1) { left: 4%; } .sc-chain .wy-win:nth-of-type(2) { left: 36.5%; } .sc-chain .wy-win:nth-of-type(3) { left: 69%; }
.sc-chain .wy-win .wy-bars { height: 46px; padding: 8px 10px 0; }
.sc-chain .shuttle { position: absolute; top: 18%; left: 10%; font-size: 22px; color: #fff; animation: wyShut 4s ease-in-out infinite; }
@keyframes wyShut { 0% { left: 12%; } 45% { left: 46%; } 55% { left: 46%; } 100% { left: 80%; } }
.sc-chain .ar { position: absolute; top: 37%; font-size: 20px; color: var(--tx3); }
.sc-chain .ar.a1 { left: 32%; } .sc-chain .ar.a2 { left: 64.5%; }
.sc-strip { display: grid; grid-template-columns: 34% 1fr; gap: 16px; position: absolute; inset: 22px 22px 60px; }
.sc-strip .fdr { border-radius: 14px; background: rgba(255,255,255,.04); box-shadow: inset 0 0 0 .5px rgba(255,255,255,.1); padding: 12px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.sc-strip .fdr .mt { border-radius: 6px; background: rgba(0,0,0,.4); position: relative; overflow: hidden; }
.sc-strip .fdr .mt i { position: absolute; left: 0; right: 0; bottom: 0; height: 70%; background: linear-gradient(0deg, var(--a) 0%, var(--a) 70%, #ffd60a 85%, #ff453a 100%); background-size: 100% 140%; background-position: 0 100%; animation: wyMeter .35s ease-in-out infinite alternate; animation-delay: var(--d); transform-origin: bottom; }
@keyframes wyMeter { from { transform: scaleY(.62); } to { transform: scaleY(.86); } }
.sc-strip .fdr small { grid-column: 1 / -1; text-align: center; font-size: 10.5px; color: var(--tx2); font-weight: 700; }
.sc-strip .as { border-radius: 14px; background: rgba(255,255,255,.04); box-shadow: inset 0 0 0 .5px color-mix(in srgb, var(--a) 45%, transparent); padding: 12px 14px; display: grid; align-content: start; gap: 10px; }
.sc-strip .as header { display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 700; }
.sc-strip .as header i { color: var(--a); font-size: 17px; }
.sc-strip .as header .lis { margin-left: auto; font-size: 11px; color: var(--a); animation: wyBlink 1.4s infinite; }
.sc-strip .ytg { display: flex; gap: 6px; flex-wrap: wrap; }
.sc-strip .eq { height: 74px; border-radius: 10px; background: rgba(0,0,0,.3); position: relative; overflow: hidden; }
.sc-strip .eq svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.sc-strip .eq path { fill: none; stroke: var(--a); stroke-width: 2.5; stroke-dasharray: 600; stroke-dashoffset: 600; animation: wyDraw 3.6s var(--ease) infinite; filter: drop-shadow(0 0 6px var(--a)); }
@keyframes wyDraw { 60%, 100% { stroke-dashoffset: 0; } }
.sc-strip .kn { display: flex; gap: 14px; }
.sc-strip .kn span { display: grid; justify-items: center; gap: 4px; font-size: 10px; color: var(--tx2); font-weight: 700; }
.sc-strip .kn b { width: 34px; height: 34px; border-radius: 50%; background: conic-gradient(var(--a) var(--v, 60%), rgba(255,255,255,.1) 0); position: relative; }
.sc-strip .kn b::after { content: ""; position: absolute; inset: 5px; border-radius: 50%; background: #16161c; }
.sc-calc .wy-win { left: 8%; top: 12%; width: 44%; }
.sc-calc .wy-win .scr { padding: 12px; font-size: 22px; text-align: right; color: var(--tx); }
.sc-calc .wy-win .keys { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; padding: 0 10px 10px; }
.sc-calc .wy-win .keys i { height: 22px; border-radius: 6px; background: rgba(255,255,255,.08); }
.sc-calc .wy-win .keys i:nth-child(4n) { background: rgba(255,159,10,.4); }
.sc-calc .note { position: absolute; right: 8%; top: 18%; width: 34%; padding: 12px; font-size: 12px; line-height: 1.7; color: var(--tx2); border-radius: 12px; background: rgba(255,214,10,.08); box-shadow: inset 0 0 0 .5px rgba(255,214,10,.3); transform: rotate(3deg); }
.sc-calc .note b { color: #ffd60a; }
.sc-loud { position: absolute; inset: 22px 22px 60px; display: grid; grid-template-columns: 1fr 1.2fr; gap: 18px; }
.sc-loud .big { border-radius: 16px; background: rgba(0,0,0,.3); box-shadow: inset 0 0 0 .5px color-mix(in srgb, var(--a) 40%, transparent); display: grid; place-items: center; align-content: center; gap: 4px; text-align: center; }
.sc-loud .big small { font-size: 11px; color: var(--tx2); font-weight: 700; letter-spacing: .05em; }
.sc-loud .big b { font-size: clamp(30px, 4vw, 46px); font-weight: 800; letter-spacing: -0.03em; color: var(--a); text-shadow: 0 0 24px color-mix(in srgb, var(--a) 50%, transparent); }
.sc-loud .yms { display: grid; gap: 12px; align-content: center; }
.sc-loud .yms div { display: grid; grid-template-columns: 70px 1fr 54px; gap: 10px; align-items: center; font-size: 11.5px; color: var(--tx2); font-weight: 700; }
.sc-loud .yms div em { font-style: normal; text-align: right; color: var(--tx); }
.sc-loud .yms .wy-pg { height: 10px; }
.sc-loud .yms .wy-pg i { animation: wyLvl 1.8s ease-in-out infinite alternate; width: var(--w); animation-delay: var(--d); }
@keyframes wyLvl { from { width: calc(var(--w) - 14%); } }
.sc-loud .yms .chips { grid-template-columns: none; display: flex; gap: 6px; }
.sc-comp .sl2 { position: absolute; left: 8%; right: 38%; display: grid; grid-template-columns: 76px 1fr 56px; gap: 10px; align-items: center; font-size: 11.5px; font-weight: 700; color: var(--tx2); }
.sc-comp .sl2.a { top: 22%; } .sc-comp .sl2.b { top: 38%; } .sc-comp .sl2.c { top: 54%; }
.sc-comp .sl2 .tr { position: relative; height: 6px; border-radius: 6px; background: rgba(255,255,255,.1); }
.sc-comp .sl2 .tr i { position: absolute; top: -6px; width: 18px; height: 18px; margin-left: -9px; border-radius: 50%; background: #e5e5ea; box-shadow: 0 2px 8px rgba(0,0,0,.5); }
.wy-L0.sc-comp .sl2 .tr i { animation: wyJit 1.1s ease-in-out infinite alternate; animation-delay: var(--d); }
.wy-L1.sc-comp .sl2 .tr i { left: var(--to); background: #fff; box-shadow: 0 0 0 3px color-mix(in srgb, var(--a) 40%, transparent); animation: wySettle 1.6s var(--ease) both; }
@keyframes wySettle { from { left: 20%; } }
.wy-L1.sc-comp .sl2 .tr::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: var(--to); border-radius: 6px; background: linear-gradient(90deg, var(--a), var(--a2)); }
.sc-comp .gr { position: absolute; right: 8%; top: 18%; bottom: 74px; width: 22%; border-radius: 12px; background: rgba(0,0,0,.35); box-shadow: inset 0 0 0 .5px rgba(255,255,255,.1); display: grid; grid-template-rows: auto 1fr; padding: 10px; gap: 8px; text-align: center; font-size: 10.5px; font-weight: 700; color: var(--tx2); }
.sc-comp .gr .m { position: relative; border-radius: 6px; background: rgba(255,255,255,.05); overflow: hidden; }
.sc-comp .gr .m i { position: absolute; left: 0; right: 0; top: 0; height: 30%; background: linear-gradient(180deg, #ff9f0a, #ffd60a); }
.wy-L0.sc-comp .gr .m i { animation: wyErr .5s steps(3) infinite; }
@keyframes wyErr { 0% { height: 12%; } 33% { height: 66%; } 66% { height: 34%; } }
.wy-L1.sc-comp .gr .m i { background: linear-gradient(180deg, var(--a), var(--a3)); animation: wyGR 1.2s ease-in-out infinite alternate; }
@keyframes wyGR { from { height: 22%; } to { height: 32%; } }
.sc-scatter i { position: absolute; font-size: 30px; color: rgba(255,255,255,.55); left: var(--x); top: var(--y); transform: rotate(var(--r)); }
.sc-scatter span { position: absolute; left: var(--x); top: var(--y); font-size: 10.5px; color: var(--tx3); font-weight: 600; }
.sc-proj .ypf { position: absolute; left: 50%; top: 44%; transform: translate(-50%, -50%); display: grid; justify-items: center; gap: 10px; }
.sc-proj .ypf > i { font-size: 74px; color: var(--a); filter: drop-shadow(0 12px 30px color-mix(in srgb, var(--a) 60%, transparent)); }
.sc-proj .ypf .sub { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; }
.sc-proj .fly i { position: absolute; left: 50%; top: 40%; font-size: 22px; color: #fff; animation: wyIn 3.2s var(--ease) infinite; animation-delay: var(--d); }
.sc-target .need { position: absolute; left: 50%; top: 28%; width: 70%; transform: translateX(-50%); }
.sc-target .scale { position: relative; height: 16px; border-radius: 8px; background: linear-gradient(90deg, rgba(255,255,255,.06), rgba(255,255,255,.14)); }
.sc-target .scale .tgt { position: absolute; top: -10px; bottom: -10px; width: 2px; left: var(--t); background: #fff; }
.sc-target .scale .tgt::after { content: attr(data-l); position: absolute; top: -18px; left: 50%; transform: translateX(-50%); font-size: 10.5px; font-weight: 700; white-space: nowrap; }
.sc-target .scale .nd { position: absolute; top: -4px; width: 4px; height: 24px; margin-left: -2px; border-radius: 3px; background: #ffd60a; left: 30%; }
.wy-L0.sc-target .scale .nd { animation: wyWander 2.2s ease-in-out infinite alternate; }
@keyframes wyWander { 30% { left: 70%; } 60% { left: 42%; } 100% { left: 78%; } }
.wy-L1.sc-target .scale .nd { background: var(--a); box-shadow: 0 0 14px var(--a); animation: wyLock 7.5s var(--ease) infinite; }
@keyframes wyLock { 0%, 30% { left: 56%; } 34%, 63% { left: 48%; } 67%, 96% { left: 30%; } 100% { left: 56%; } }
.wy-L1.sc-target .scale .tgt { animation: wyLock 7.5s var(--ease) infinite; }
.sc-target .pls { position: absolute; left: 50%; top: 56%; transform: translateX(-50%); display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; width: 90%; }
.wy-L1.sc-target .pls .wy-pill { animation: wyRt 7.5s steps(1) infinite; }
.wy-L1.sc-target .pls .wy-pill:nth-child(2) { animation-delay: -5s; } .wy-L1.sc-target .pls .wy-pill:nth-child(3) { animation-delay: -2.5s; }

/* ===== DJ (djdeskStudio imza) ===== */
.wy-dj .wy-stg { background: linear-gradient(160deg, rgba(124,58,237,.12), rgba(255,255,255,.02) 50%, rgba(255,45,146,.08)); }
.wy-dj .wy-stg[data-s="1"] { box-shadow: inset 0 0 0 .5px rgba(255,255,255,.14), 0 50px 120px -50px rgba(0,0,0,.9), 0 0 60px -20px rgba(255,45,146,.45); }
.sc-tap .tap { position: absolute; left: 30%; top: 44%; transform: translate(-50%, -50%); width: 96px; height: 96px; border-radius: 22px; display: grid; place-items: center; font-size: 15px; font-weight: 800; background: rgba(255,255,255,.08); box-shadow: inset 0 0 0 1px rgba(255,255,255,.2); animation: wyTap .52s ease-in-out infinite; }
@keyframes wyTap { 0%, 100% { transform: translate(-50%, -50%) scale(1); } 15% { transform: translate(-50%, -50%) scale(.9); background: rgba(255,255,255,.2); } }
.sc-tap .pad { position: absolute; right: 10%; top: 20%; width: 40%; padding: 14px; font-size: 13px; line-height: 2; color: var(--tx2); border-radius: 12px; background: rgba(255,214,10,.06); box-shadow: inset 0 0 0 .5px rgba(255,214,10,.25); transform: rotate(-2deg); }
.sc-tap .pad b { color: #ffd60a; }
.sc-an { position: absolute; inset: 22px 22px 60px; display: grid; grid-template-rows: auto 1fr; gap: 14px; }
.sc-an .tr { display: grid; grid-template-columns: 42px 1fr auto auto auto; gap: 12px; align-items: center; padding: 10px 12px; border-radius: 12px; background: rgba(255,255,255,.05); box-shadow: inset 0 0 0 .5px rgba(255,255,255,.12); }
.sc-an .tr .cv { width: 42px; height: 42px; border-radius: 9px; background: conic-gradient(from 40deg, #22d3ee, #7c3aed, #ff2d92, #22d3ee); }
.sc-an .tr b { display: block; font-size: 13px; } .sc-an .tr small { font-size: 11px; color: var(--tx2); }
.sc-an .tr .bpm { font-size: 18px; font-weight: 800; color: #fff; }
.sc-an .tr .key { padding: 4px 8px; border-radius: 7px; font-size: 11.5px; font-weight: 800; color: #34d399; background: rgba(52,211,153,.14); box-shadow: inset 0 0 0 .5px rgba(52,211,153,.5); }
.sc-an .tr .en { width: 56px; } .sc-an .tr .en .wy-pg i { width: 80%; animation: wyFill 1.6s var(--ease) both; }
@keyframes wyFill { from { width: 0; } }
.sc-an .wf { position: relative; border-radius: 12px; background: rgba(0,0,0,.35); overflow: hidden; display: flex; align-items: center; gap: 2px; padding: 0 6px; }
.sc-an .wf i { flex: 1; height: var(--h); border-radius: 2px; background: linear-gradient(0deg, #3b6cff, #c048ff 55%, #fff); opacity: .85; }
.sc-an .wf .g { position: absolute; top: 0; bottom: 0; width: 1px; left: var(--l); background: rgba(255,255,255,.35); animation: wyGrid .4s ease-out both; animation-delay: var(--d); }
@keyframes wyGrid { from { transform: scaleY(0); } }
.sc-an .chips { position: absolute; right: 12px; top: 10px; display: flex; gap: 6px; }
.sc-list .lst { position: absolute; left: 6%; right: 6%; top: 8%; bottom: 60px; overflow: hidden; border-radius: 12px; background: rgba(0,0,0,.25); box-shadow: inset 0 0 0 .5px rgba(255,255,255,.08); }
.sc-list .lst .scr { animation: wyScroll 6s linear infinite; }
@keyframes wyScroll { to { transform: translateY(-50%); } }
.sc-list .lst .wy-row { font-size: 11.5px; }
.sc-list .lst .wy-row .bp { width: 52px; text-align: right; color: var(--tx3); }
.sc-list .eye { position: absolute; right: 9%; top: 40%; font-size: 30px; color: rgba(255,255,255,.7); animation: wySeekY 2.4s ease-in-out infinite alternate; }
@keyframes wySeekY { to { transform: translateY(-50px); } }
.sc-flt .fl { position: absolute; left: 6%; right: 6%; top: 8%; display: flex; gap: 6px; flex-wrap: wrap; }
.sc-flt .fl .wy-pill { animation: wyChip .5s var(--ease) both; animation-delay: var(--d); }
@keyframes wyChip { from { opacity: 0; transform: translateY(-8px) scale(.9); } }
.sc-flt .lst { position: absolute; left: 6%; right: 6%; top: 26%; display: grid; gap: 6px; }
.sc-flt .lst .wy-row { border-radius: 10px; background: rgba(255,255,255,.05); border: 0; box-shadow: inset 0 0 0 .5px rgba(255,255,255,.1); animation: wyChip .5s var(--ease) both; animation-delay: var(--d); }
.sc-flt .lst .wy-row.hi { background: linear-gradient(90deg, rgba(255,45,146,.2), rgba(124,58,237,.12)); box-shadow: inset 0 0 0 .5px rgba(255,45,146,.6); }
.sc-flt .lst .k { color: #34d399; font-weight: 800; }
.sc-flt .lst .bp { color: #fff; font-weight: 700; }
.sc-keys { position: absolute; inset: 20% 10% 70px; display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; align-content: center; }
.sc-keys span { width: 58px; height: 42px; border-radius: 10px; display: grid; place-items: center; font-size: 13px; font-weight: 800; background: rgba(255,255,255,.06); box-shadow: inset 0 0 0 .5px rgba(255,255,255,.14); color: var(--tx2); animation: wyQ 2s ease-in-out infinite; animation-delay: var(--d); }
@keyframes wyQ { 50% { color: #ffd60a; } }
.sc-wheel { --R: min(108px, 21vw); position: absolute; left: 50%; top: 46%; width: min(56%, 260px); aspect-ratio: 1; transform: translate(-50%, -50%); }
.sc-wheel .ring { position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from -15deg, #22d3ee, #34d399, #a3e635, #facc15, #fb923c, #f87171, #ff2d92, #c084fc, #7c3aed, #6366f1, #3b82f6, #22d3ee); -webkit-mask: radial-gradient(circle, transparent 48%, #000 49%); mask: radial-gradient(circle, transparent 48%, #000 49%); opacity: .3; }
.sc-wheel .yseg { position: absolute; left: 50%; top: 50%; width: 46px; height: 30px; margin: -15px 0 0 -23px; border-radius: 8px; display: grid; place-items: center; font-size: 11px; font-weight: 800; color: var(--tx2); background: rgba(10,10,14,.85); box-shadow: inset 0 0 0 .5px rgba(255,255,255,.14);
  transform: rotate(var(--ang)) translateY(calc(-1 * var(--R))) rotate(calc(-1 * var(--ang))); }
.sc-wheel .yseg.on { color: #fff; background: linear-gradient(135deg, #ff2d92, #7c3aed); box-shadow: 0 0 22px rgba(255,45,146,.7); }
.sc-wheel .yseg.ok { color: #052e16; background: #34d399; box-shadow: 0 0 16px rgba(52,211,153,.6); animation: wyOk 2s ease-in-out infinite; }
@keyframes wyOk { 50% { box-shadow: 0 0 4px rgba(52,211,153,.3); } }
.sc-wheel .ctr { position: absolute; inset: 30%; border-radius: 50%; display: grid; place-items: center; text-align: center; font-size: 11px; font-weight: 700; color: var(--tx2); background: radial-gradient(circle, rgba(255,45,146,.18), transparent 70%); }
.sc-wheel .ctr b { display: block; font-size: 20px; color: #fff; }
.sc-two .wy-win { top: 14%; width: 40%; height: 54%; }
.sc-two .wy-win:nth-of-type(1) { left: 6%; } .sc-two .wy-win:nth-of-type(2) { right: 6%; }
.sc-two .wy-win .wy-bars { height: 40%; padding: 10px 12px 0; }
.sc-two .cable { position: absolute; left: 46%; right: 46%; top: 40%; height: 2px; background: repeating-linear-gradient(90deg, rgba(255,255,255,.5) 0 6px, transparent 6px 10px); animation: wyRebuild 1s linear infinite; }
.sc-rec { position: absolute; inset: 22px 22px 60px; display: grid; grid-template-columns: auto 1fr; gap: 18px; align-items: start; }
.sc-rec .rb { display: grid; justify-items: center; gap: 10px; padding-top: 6px; }
.sc-rec .rb .dot { width: 70px; height: 70px; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle, #ff453a 0 34%, rgba(255,69,58,.25) 35% 100%); box-shadow: 0 0 0 0 rgba(255,69,58,.6); animation: wyRec 1.4s ease-out infinite; }
@keyframes wyRec { 0% { box-shadow: 0 0 0 0 rgba(255,69,58,.55); } 100% { box-shadow: 0 0 0 22px rgba(255,69,58,0); } }
.sc-rec .rb b { font-size: 20px; }
.sc-rec .tl { display: grid; gap: 6px; }
.sc-rec .tl .wy-row { border: 0; border-radius: 10px; background: rgba(255,255,255,.05); box-shadow: inset 0 0 0 .5px rgba(255,255,255,.1); animation: wyChip .5s var(--ease) both; animation-delay: var(--d); }
.sc-rec .tl .wy-row .t { color: #22d3ee; font-weight: 800; width: 40px; }
.sc-err .wy-win { left: 12%; right: 12%; top: 12%; padding-bottom: 8px; }
.sc-err .yfld { display: grid; grid-template-columns: 110px 1fr; gap: 10px; align-items: center; padding: 6px 12px; font-size: 11.5px; color: var(--tx2); }
.sc-err .yfld span { height: 22px; border-radius: 6px; background: rgba(255,255,255,.06); box-shadow: inset 0 0 0 .5px rgba(255,255,255,.1); }
.sc-err .e { margin: 8px 12px 0; animation: wyBlink 1.2s infinite; }
.sc-air { position: absolute; inset: 0; }
.sc-air .src, .sc-air .dst { position: absolute; top: 50%; transform: translateY(-50%); display: grid; justify-items: center; gap: 8px; text-align: center; font-size: 12px; font-weight: 700; }
.sc-air .src { left: 9%; } .sc-air .dst { right: 9%; }
.sc-air .src .wy-ico { animation: wySpin 4s linear infinite; border-radius: 50%; }
.sc-air .dst .wy-ico { background: linear-gradient(150deg, #ff375f, #bf5af2); }
.sc-air .wave { position: absolute; left: 30%; right: 30%; top: 50%; height: 2px; background: linear-gradient(90deg, #22d3ee, #7c3aed, #ff2d92); box-shadow: 0 0 14px rgba(255,45,146,.6); }
.sc-air .wave i { position: absolute; top: -5px; width: 12px; height: 12px; border-radius: 50%; background: #fff; box-shadow: 0 0 14px #fff; animation: wyPkt 1.8s linear infinite; animation-delay: var(--d); }
@keyframes wyPkt { from { left: 0; } to { left: 100%; } }
.sc-air .ring { position: absolute; right: calc(9% + 20px); top: 50%; width: 30px; height: 30px; margin-top: -42px; border-radius: 50%; box-shadow: inset 0 0 0 2px rgba(255,55,95,.7); animation: wyRing 2s ease-out infinite; animation-delay: var(--d); }
@keyframes wyRing { from { transform: scale(.6); opacity: 1; } to { transform: scale(3.2); opacity: 0; } }

/* ===== Radyomasyon sahneleri ===== */
.rm-hv { position: relative; margin: 60px auto 0; max-width: 980px; aspect-ratio: 16/7; min-height: 300px; }
.rm-hv .tower { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 110px; height: 110px; border-radius: 32px; display: grid; place-items: center; font-size: 56px; color: #fff; background: linear-gradient(160deg, #ff6a5f, #d7261b); box-shadow: 0 30px 80px -20px rgba(255,59,48,.8), inset 0 1px 0 rgba(255,255,255,.35); z-index: 2; }
.rm-hv .rg { position: absolute; left: 50%; top: 50%; width: 110px; height: 110px; margin: -55px 0 0 -55px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.35); animation: wyRing 3.6s ease-out infinite; animation-delay: var(--d); }
.rm-hv .orb { position: absolute; left: 50%; top: 50%; z-index: 3; animation: wyOx 16s cubic-bezier(.37,0,.63,1) infinite alternate; animation-delay: var(--d); }
.rm-hv .orb > span { display: block; animation: wyOy 16s cubic-bezier(.37,0,.63,1) infinite alternate; animation-delay: calc(var(--d) - 8s); }
@keyframes wyOx { from { transform: translateX(calc(-1 * var(--rx))); } to { transform: translateX(var(--rx)); } }
@keyframes wyOy { from { transform: translateY(calc(-1 * var(--ry))); } to { transform: translateY(var(--ry)); } }
.rm-hv .orb em { display: inline-flex; align-items: center; gap: 8px; padding: 10px 15px; border-radius: 14px; font-style: normal; font-size: 14px; font-weight: 700; white-space: nowrap; color: #fff; transform: translate(-50%, -50%);
  background: rgba(20,20,26,.78); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: inset 0 0 0 .5px rgba(255,255,255,.18), 0 20px 50px -20px rgba(0,0,0,.9); }
.rm-hv .orb em i { font-size: 18px; color: var(--c); }
.rm-hv { --rx: min(370px, 36vw); --ry: 150px; }
.rm-loop { position: relative; width: min(100%, 420px); aspect-ratio: 1; margin: 0 auto; }
.rm-loop .trk { position: absolute; inset: 14%; border-radius: 50%; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.1); }
.rm-loop .trk::after { content: ""; position: absolute; inset: -1.5px; border-radius: 50%; background: conic-gradient(from 0deg, transparent 0 70%, var(--a) 92%, #fff 100%); -webkit-mask: radial-gradient(circle, transparent 69%, #000 70%); mask: radial-gradient(circle, transparent 69%, #000 70%); animation: wySpin 6s linear infinite; }
.rm-loop .nd { position: absolute; width: 132px; transform: translate(-50%, -50%); display: grid; justify-items: center; gap: 6px; text-align: center; font-size: 12px; font-weight: 700; color: var(--tx2); }
.rm-loop .nd .ic { width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; font-size: 25px; color: #fff; background: rgba(28,28,36,.95); box-shadow: inset 0 0 0 .5px rgba(255,255,255,.2); animation: wyNode 6s linear infinite; animation-delay: var(--d); }
@keyframes wyNode { 0%, 18% { background: linear-gradient(150deg, var(--a), var(--a2)); box-shadow: 0 0 30px -4px var(--a); } 25%, 100% { background: rgba(28,28,36,.95); box-shadow: inset 0 0 0 .5px rgba(255,255,255,.2); } }
.rm-loop .n1 { left: 50%; top: 14%; } .rm-loop .n2 { left: 86%; top: 50%; } .rm-loop .n3 { left: 50%; top: 86%; } .rm-loop .n4 { left: 14%; top: 50%; }
.rm-loop .mid { position: absolute; inset: 34%; border-radius: 50%; display: grid; place-items: center; align-content: center; text-align: center; background: radial-gradient(circle, rgba(10,132,255,.25), transparent 70%); }
.rm-loop .mid b { font-size: 40px; font-weight: 800; letter-spacing: -0.04em; }
.rm-loop .mid small { font-size: 12px; color: var(--tx2); font-weight: 700; }
.rm-orbit { position: relative; width: min(100%, 460px); aspect-ratio: 1; margin: 0 auto; }
.rm-orbit .core { position: absolute; inset: 33%; border-radius: 28px; display: grid; place-items: center; align-content: center; gap: 6px; text-align: center; background: rgba(22,22,28,.9); box-shadow: inset 0 0 0 .5px rgba(48,209,88,.5), 0 0 60px -10px rgba(48,209,88,.5); }
.rm-orbit .core .wy-bars { height: 34px; width: 70%; }
.rm-orbit .core .wy-bars i { background: linear-gradient(0deg, #30d158, #7dfb9b); }
.rm-orbit .core b { font-size: 13px; } .rm-orbit .core small { font-size: 11px; color: #30d158; font-weight: 700; }
.rm-orbit .ring { position: absolute; inset: 6%; border-radius: 50%; border: 1px dashed rgba(255,255,255,.14); animation: wySpin 40s linear infinite; }
.rm-orbit .pt { position: absolute; transform: translate(-50%, -50%); display: grid; justify-items: center; gap: 6px; font-size: 12.5px; font-weight: 700; text-align: center; width: 130px; }
.rm-orbit .pt .ic { width: 50px; height: 50px; border-radius: 15px; display: grid; place-items: center; font-size: 24px; color: #fff; background: rgba(255,159,10,.16); box-shadow: inset 0 0 0 .5px rgba(255,159,10,.55); animation: wyWarn 2.4s ease-in-out infinite; animation-delay: var(--d); }
.rm-orbit .pt .ic i { color: #ff9f0a; }
@keyframes wyWarn { 50% { box-shadow: inset 0 0 0 .5px rgba(255,159,10,.55), 0 0 30px -2px rgba(255,159,10,.6); } }
.rm-orbit .p1 { left: 50%; top: 8%; } .rm-orbit .p2 { left: 88%; top: 72%; } .rm-orbit .p3 { left: 12%; top: 72%; }
.rm-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 40px; }
.rm-cd { position: relative; border-radius: 22px; padding: 20px; background: linear-gradient(160deg, rgba(255,255,255,.06), rgba(255,255,255,.02)); box-shadow: inset 0 0 0 .5px rgba(255,255,255,.12); overflow: hidden; display: grid; grid-template-rows: 150px auto; gap: 16px; }
.rm-cd h3 { margin: 0 0 6px; font-size: 18px; letter-spacing: -0.02em; color: #fff; }
.rm-cd p { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--tx2); }
.rm-cd .vz { position: relative; border-radius: 14px; background: rgba(0,0,0,.3); box-shadow: inset 0 0 0 .5px rgba(255,255,255,.07); overflow: hidden; }
.rm-cd .k { position: absolute; left: 20px; top: 20px; z-index: 2; }
.vz-fee span { position: absolute; left: 50%; transform: translateX(-50%); animation: wyFee 5s var(--ease) infinite; animation-delay: var(--d); }
@keyframes wyFee { 0% { top: -20%; opacity: 0; } 15%, 40% { top: var(--t); opacity: 1; } 55%, 100% { top: 46%; opacity: 0; } }
.vz-fee .one { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); animation: wyOne 5s var(--ease) infinite; }
@keyframes wyOne { 0%, 50% { opacity: 0; transform: translate(-50%, -50%) scale(.8); } 60%, 95% { opacity: 1; transform: translate(-50%, -50%) scale(1); } 100% { opacity: 0; } }
.vz-sup .con { position: absolute; inset: 14px; border-radius: 10px; background: rgba(20,20,26,.9); box-shadow: inset 0 0 0 .5px rgba(255,255,255,.14); }
.vz-sup .con .wy-row { font-size: 11px; }
.vz-sup .cur { position: absolute; left: 30%; top: 60%; font-size: 20px; color: #fff; filter: drop-shadow(0 2px 4px #000); animation: wyCur 5s ease-in-out infinite; }
@keyframes wyCur { 0% { left: 70%; top: 80%; } 40% { left: 40%; top: 46%; } 60% { left: 40%; top: 46%; } 100% { left: 70%; top: 80%; } }
.vz-sup .ok { position: absolute; right: 22px; bottom: 22px; animation: wyOne2 5s ease-in-out infinite; }
@keyframes wyOne2 { 0%, 50% { opacity: 0; } 60%, 95% { opacity: 1; } 100% { opacity: 0; } }
.vz-eq { display: grid; gap: 14px; align-content: center; padding: 0 18px; }
.vz-eq div { display: grid; grid-template-columns: 100px 1fr; gap: 10px; align-items: center; font-size: 11.5px; font-weight: 700; color: var(--tx2); }
.vz-eq .wy-pg { height: 10px; } .vz-eq .wy-pg i { width: 96%; animation: wyFill 2.4s var(--ease) infinite alternate; }
.vz-chat { padding: 14px; display: grid; gap: 8px; align-content: end; }
.vz-chat .b { max-width: 78%; padding: 8px 12px; border-radius: 14px; font-size: 12px; line-height: 1.4; animation: wyChip .5s var(--ease) both; animation-delay: var(--d); }
.vz-chat .b.l { background: rgba(255,255,255,.08); justify-self: start; border-bottom-left-radius: 4px; }
.vz-chat .b.r { background: linear-gradient(120deg, var(--a), #5e5ce6); justify-self: end; border-bottom-right-radius: 4px; }
.vz-chat .ty { justify-self: start; display: flex; gap: 4px; padding: 10px 12px; border-radius: 14px; background: rgba(255,255,255,.08); }
.vz-chat .ty i { width: 6px; height: 6px; border-radius: 50%; background: #fff; animation: wyBlink 1s infinite; animation-delay: var(--d); }
.vz-ver { padding: 0 16px; display: grid; align-content: center; }
.vz-ver .ln { position: relative; height: 2px; background: rgba(255,255,255,.1); margin: 24px 0; }
.vz-ver .ln i { position: absolute; top: -6px; width: 14px; height: 14px; margin-left: -7px; border-radius: 50%; background: var(--a); box-shadow: 0 0 12px var(--a); left: var(--l); animation: wyChip .4s var(--ease) both; animation-delay: var(--d); }
.vz-ver .ln i::after { content: attr(data-v); position: absolute; top: 18px; left: 50%; transform: translateX(-50%); font-size: 10px; font-weight: 700; color: var(--tx2); font-style: normal; white-space: nowrap; }
.vz-ver .ln::after { content: ""; position: absolute; left: 0; top: 0; height: 2px; width: 100%; background: linear-gradient(90deg, var(--a), var(--a2)); transform-origin: left; animation: wyGrow 6s linear infinite; }
@keyframes wyGrow { from { transform: scaleX(0); } }
.vz-ver .air { display: flex; align-items: center; gap: 8px; font-size: 11.5px; font-weight: 700; color: #30d158; }
.vz-ver .air .wy-bars { width: 60px; height: 16px; } .vz-ver .air .wy-bars i { background: #30d158; }
.vz-now { padding: 14px; display: flex; flex-wrap: wrap; gap: 7px; align-content: center; justify-content: center; }
.vz-now .wy-pill { animation: wyLit 6s ease-in-out infinite; animation-delay: var(--d); }
@keyframes wyLit { 0%, 12% { background: color-mix(in srgb, var(--a) 30%, transparent); box-shadow: inset 0 0 0 .5px var(--a), 0 0 16px -4px var(--a); } 20%, 100% { background: rgba(255,255,255,.07); } }
.rm-net { position: absolute; inset: 22px 22px 60px; }
.rm-net .pc { position: absolute; left: 6%; top: 10%; width: 50%; bottom: 10%; border-radius: 14px; background: rgba(18,18,24,.95); box-shadow: inset 0 0 0 .5px rgba(255,255,255,.16); padding: 12px; display: grid; grid-template-rows: auto 1fr auto; gap: 10px; }
.rm-net .pc header { display: flex; align-items: center; gap: 7px; font-size: 11.5px; font-weight: 800; }
.rm-net .pc header .na { margin-left: auto; font-size: 10px; color: var(--a); letter-spacing: .04em; }
.rm-net .pc .wy-bars i { background: linear-gradient(0deg, #ff375f, #ff9f0a); }
.rm-net .pc .air { display: flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 800; color: #30d158; }
.rm-net .pc .air i { width: 8px; height: 8px; border-radius: 50%; background: #30d158; box-shadow: 0 0 8px #30d158; animation: wyBlink 1s infinite; }
.rm-net .glb { position: absolute; right: 6%; top: 50%; transform: translateY(-50%); display: grid; justify-items: center; gap: 6px; font-size: 11px; font-weight: 700; color: var(--tx2); text-align: center; }
.rm-net .glb > i { font-size: 46px; color: var(--a); }
.rm-net .lnk { position: absolute; left: 56%; right: 20%; top: 50%; height: 2px; background: linear-gradient(90deg, var(--a), var(--a2)); animation: wyCut 8s steps(1) infinite; }
@keyframes wyCut { 0%, 55% { opacity: 1; } 55.1%, 85% { opacity: .12; } 85.1%, 100% { opacity: 1; } }
.rm-net .lnk i { position: absolute; top: -4px; width: 10px; height: 10px; border-radius: 50%; background: #fff; box-shadow: 0 0 10px #fff; animation: wyPkt 1.6s linear infinite; animation-delay: var(--d); }
.rm-net .cut { position: absolute; left: 63%; top: calc(50% - 34px); animation: wyCutL 8s steps(1) infinite; }
@keyframes wyCutL { 0%, 55% { opacity: 0; } 55.1%, 85% { opacity: 1; } 85.1%, 100% { opacity: 0; } }
.rm-net .uses { position: absolute; left: 56%; right: 2%; bottom: 0; display: flex; gap: 5px; flex-wrap: wrap; justify-content: center; }
.rm-net .uses .wy-pill { font-size: 10.5px; padding: 4px 8px; }
.rm-mig { position: absolute; inset: 22px 22px 60px; }
.rm-mig .bx { position: absolute; top: 8%; bottom: 0; width: 30%; border-radius: 16px; padding: 12px; display: grid; align-content: start; gap: 6px; }
.rm-mig .bx header { display: flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 800; margin-bottom: 4px; }
.rm-mig .old { left: 0; background: rgba(255,255,255,.04); box-shadow: inset 0 0 0 .5px rgba(255,255,255,.12); color: var(--tx2); }
.rm-mig .new { right: 0; background: color-mix(in srgb, var(--a) 12%, rgba(0,0,0,.3)); box-shadow: inset 0 0 0 .5px color-mix(in srgb, var(--a) 50%, transparent), 0 0 40px -14px var(--a); }
.rm-mig .bx span { font-size: 11px; padding: 4px 8px; border-radius: 7px; background: rgba(255,255,255,.05); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rm-mig .new span { background: color-mix(in srgb, var(--a) 18%, transparent); color: #fff; animation: wyChip .5s var(--ease) both; animation-delay: var(--d); }
.rm-mig .arc span { position: absolute; left: 32%; top: var(--y); font-size: 11px; font-weight: 700; padding: 5px 10px; border-radius: 99px; color: #fff; background: linear-gradient(120deg, var(--a), var(--a2)); white-space: nowrap; animation: wyMig 4s var(--ease) infinite; animation-delay: var(--d); opacity: 0; }
@keyframes wyMig { 0% { transform: translate(0, 0) scale(.8); opacity: 0; } 15% { opacity: 1; } 60% { transform: translate(var(--dx), -26px) scale(1); opacity: 1; } 80%, 100% { transform: translate(var(--dx2), 0) scale(.8); opacity: 0; } }

/* kapanış */
.wy-end { position: relative; text-align: center; padding: 60px 0 130px; }
.wy-end .box { max-width: 880px; margin: 0 auto; padding: 46px 30px; border-radius: 30px; background: linear-gradient(160deg, rgba(255,255,255,.08), rgba(255,255,255,.02)); box-shadow: inset 0 0 0 .5px rgba(255,255,255,.16), 0 50px 120px -50px color-mix(in srgb, var(--a) 70%, transparent); }
.wy-end h2 { font: 800 clamp(28px, 3.6vw, 46px)/1.08 var(--display); letter-spacing: -0.035em; margin: 18px 0 14px; color: #fff; }
.wy-end p { font-size: 17px; line-height: 1.6; color: var(--tx2); max-width: 640px; margin: 0 auto; }
.wy-end .logo { width: 64px; height: 64px; border-radius: 18px; box-shadow: 0 20px 50px -16px var(--a); }
.wy-end .brand-mark { width: 64px; height: 64px; border-radius: 18px; font-size: 32px; margin: 0 auto; }

/* görünme */
.wy-rv { opacity: 0; transform: translateY(34px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.wy-rv.in { opacity: 1; transform: none; }
.wy-rv.d1 { transition-delay: .1s; } .wy-rv.d2 { transition-delay: .2s; }

/* iki dünya (Radyomasyon): mevcut tw stilleri koyu zeminde */
.wy .tw { padding: 40px 0 20px; }

@media (max-width: 960px) {
  .wy-sc { grid-template-columns: 1fr; gap: 30px; padding: 50px 0; }
  .wy-sc.rev { grid-template-columns: 1fr; }
  .wy-sc.rev .wy-txt { order: 0; }
  .rm-cards { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .wy-hero { padding: 120px 0 60px; }
  .wy-body { aspect-ratio: auto; height: 300px; min-height: 0; }
  .wy-L { padding: 14px; }
  .wy-sbar .t { display: none; }
  .wy-tg button { padding: 5px 9px; font-size: 11px; }
  .rm-cards { grid-template-columns: 1fr; }
  .rm-hv { --rx: 30vw; --ry: 140px; aspect-ratio: 1; }
  .rm-hv .tower { width: 80px; height: 80px; font-size: 40px; border-radius: 24px; }
  .rm-hv .orb em { font-size: 11.5px; padding: 7px 10px; }
  .rm-loop .nd { width: 96px; font-size: 11px; }
  .rm-orbit .pt { width: 96px; font-size: 11px; }
  .sc-look .pan { width: 29%; padding: 7px; } .sc-look .pan:nth-child(1) { left: 3%; } .sc-look .pan:nth-child(2) { left: 35.5%; } .sc-look .pan:nth-child(3) { left: 68%; }
  .sc-loud { grid-template-columns: 1fr; gap: 10px; }
  .sc-loud .yms div { grid-template-columns: 58px 1fr 44px; }
  .sc-strip { grid-template-columns: 30% 1fr; gap: 10px; }
  .sc-an .tr { grid-template-columns: 36px 1fr auto auto; }
  .sc-an .tr .en { display: none; }
  .sc-rec .rb .dot { width: 54px; height: 54px; }
  .sc-err .yfld { grid-template-columns: 86px 1fr; }
  .rm-net .uses { display: none; }
  .wy-cap-l { left: 14px; bottom: 12px; font-size: 11px; }
  .wy-tl { left: 14px; right: 14px; bottom: 50px; }
}
@media (prefers-reduced-motion: reduce) {
  .wy *, .wy *::before, .wy *::after { animation: none !important; transition: none !important; }
  .wy-rv { opacity: 1; transform: none; }
}
.wy-hv { position: relative; margin: 60px auto 0; max-width: 1080px; text-align: left; }
.wy-hv::before { content: ""; position: absolute; inset: 10% 6% -6%; z-index: -1; border-radius: 40px; background: radial-gradient(closest-side, color-mix(in srgb, var(--a) 45%, transparent), transparent); filter: blur(40px); }
@media (max-width: 640px) { .wy-hv { display: none; } }