/* =========================================================
   CaptStudio / AudiosStudio satış sitesi — marka katmanı
   Temel tasarım site.css'ten (Radyomasyon satış sitesi) gelir; burada marka renkleri,
   stüdyolara özel bölümler ve canlandırma ekranları tanımlanır.
   Renkler: --blue (vurgu), --g1 --g2 --g3 (marka degradesi), --glow (r,g,b)
   ========================================================= */

/* ---------- marka ---------- */
.st .b.primary { background: linear-gradient(135deg, var(--g1), var(--g2)); color: #fff; box-shadow: 0 10px 26px -12px rgba(var(--glow), .9); }
.st .b.primary:hover { filter: brightness(1.06); background: linear-gradient(135deg, var(--g1), var(--g2)); }
.st-capstudio .b.primary { background: linear-gradient(135deg, #ff9f0a, #ff5e3a 60%, #ff2d78); }
.st-audiostudio .b.primary { background: linear-gradient(135deg, #30d158, #00b386 60%, #0a84ff); }
.brand-img { width: 30px; height: 30px; border-radius: 8px; flex: none; box-shadow: 0 6px 16px -6px rgba(var(--glow), .7); }
.st .foot-band .grad, .st .fb-copy .grad { background: linear-gradient(90deg, var(--g1), var(--g2) 55%, var(--g3)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.st-badge { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 9px; border-radius: 7px; font: 800 12.5px/1 var(--display); color: #fff; background: linear-gradient(135deg, var(--g1), var(--g2)); box-shadow: 0 6px 16px -6px rgba(var(--glow), .8); }
.st-capstudio .st-badge { color: #1a1200; background: linear-gradient(135deg, #ffe14d, #ff9f0a); }
.st .kicker { color: var(--blue); }
.st .faq details[open] summary i { color: var(--blue); }
.st .fld input:focus, .st .fld select:focus, .st .fld textarea:focus { box-shadow: 0 0 0 4px rgba(var(--glow), .18); }
.st .seg-pick input:checked + span { background: rgba(var(--glow), .08); }
.st .cmp th.hl, .st .contact-card i, .st .contact-card a { color: var(--blue); }
.st .plan .tag { background: linear-gradient(90deg, var(--g1), var(--g2)); }
.st .why-chip .dot { background: var(--g2); box-shadow: 0 0 0 4px rgba(var(--glow), .2); }
.st .mm-tab.on { --c2: var(--blue); }
.lnk { background: none; border: 0; padding: 0; font: inherit; color: var(--blue); font-weight: 600; cursor: pointer; }
.lnk:hover { text-decoration: underline; }
.nav.scrolled { box-shadow: 0 1px 0 rgba(0,0,0,.06); }

/* kupon şeridi */
.cpb { position: relative; z-index: 60; display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; padding: 9px 16px; font-size: 13.5px; color: #fff; background: linear-gradient(90deg, var(--g1), var(--g2), var(--g3)); }
.cpb i { font-size: 17px; } .cpb a { color: #fff; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }

/* hero */
.st-hero .ctas { margin-top: 26px; }
.st-trust { list-style: none; margin: 18px 0 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 20px; font-size: 13.5px; color: rgba(255,255,255,.68); }
.st-trust li { display: inline-flex; align-items: center; gap: 6px; } .st-trust i { color: var(--g1); font-size: 16px; }
.am-remix .b { margin-left: auto; flex: none; }
@media (max-width: 700px) { .am-remix .b { margin: 12px 0 0; } }

/* ---------- mega menü ---------- */
.mm-uses { grid-template-columns: minmax(0, 1fr) 300px !important; }
.mm-uses .mm-links { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mm-try { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 22px !important; border-radius: 22px; background: linear-gradient(160deg, rgba(var(--glow), .14), rgba(var(--glow), .03)); box-shadow: inset 0 0 0 1px rgba(var(--glow), .2); }
.mm-try .mt-badge img { border-radius: 12px; box-shadow: 0 10px 24px -10px rgba(var(--glow), .8); }
.mm-try b { font: 750 20px var(--display); letter-spacing: -.02em; margin-top: 8px; } .mm-try p { margin: 0 0 10px; font-size: 13.5px; color: var(--ink-2); }
/* küçük ön izlemeler */
.sp-tpl { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
.sp-tpl span { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; padding: 9px; border-radius: 11px; font-size: 11px; font-weight: 700; color: #fff; background: linear-gradient(150deg, var(--k), color-mix(in srgb, var(--k) 45%, #111)); animation: spTpl 4.8s ease-in-out infinite; }
.sp-tpl span:nth-child(2) { animation-delay: .4s; } .sp-tpl span:nth-child(3) { animation-delay: .8s; } .sp-tpl span:nth-child(4) { animation-delay: 1.2s; } .sp-tpl span:nth-child(5) { animation-delay: 1.6s; } .sp-tpl span:nth-child(6) { animation-delay: 2s; }
.sp-tpl i { font-size: 16px; }
@keyframes spTpl { 0%, 70%, 100% { transform: none; box-shadow: none; } 80% { transform: translateY(-3px) scale(1.04); box-shadow: 0 10px 20px -8px var(--k); } }
.sp-tl, .sp-tr, .sp-txt, .sp-fmt, .sp-dual, .sp-loud, .sp-mix, .sp-keys, .sp-rnd { position: relative; border-radius: 14px; background: #121316; overflow: hidden; height: 128px; }
.sp-tl { padding: 12px; display: grid; gap: 6px; align-content: center; }
.sp-tl .r { position: relative; height: 14px; border-radius: 4px; background: rgba(255,255,255,.04); }
.sp-tl .r i { position: absolute; top: 1px; bottom: 1px; border-radius: 3px; }
.sp-tl .t i { background: #ffb000; } .sp-tl .o i { background: #bf5af2; } .sp-tl .v i { background: linear-gradient(90deg, #64a6ff, #3e7bd6); box-shadow: inset -1px 0 0 #121316; } .sp-tl .a i { background: repeating-linear-gradient(90deg, rgba(48,209,88,.7) 0 2px, rgba(48,209,88,.25) 2px 4px); }
.sp-tl em { position: absolute; top: 6px; bottom: 6px; width: 2px; background: #ffd60a; left: 10%; animation: spPh 5s linear infinite; }
@keyframes spPh { from { left: 8%; } to { left: 94%; } }
.sp-tr i { position: absolute; inset: 0; }
.sp-tr .a { background: linear-gradient(140deg, #1d3b6e, #3e7bd6 60%, #b9e1ff); }
.sp-tr .b { background: linear-gradient(140deg, #ff8a3d, #ff3d8b 60%, #7d5cff); clip-path: circle(0% at 50% 50%); animation: spIris 3.2s cubic-bezier(.65,0,.35,1) infinite; }
@keyframes spIris { 0%, 15% { clip-path: circle(0% at 50% 50%); } 55%, 80% { clip-path: circle(80% at 50% 50%); } 100% { clip-path: circle(80% at 50% 50%); opacity: 0; } }
.sp-tr span { position: absolute; left: 10px; bottom: 9px; font-size: 11px; font-weight: 700; color: #fff; padding: 3px 8px; border-radius: 7px; background: rgba(0,0,0,.4); }
.sp-txt { display: grid; place-content: center; text-align: center; background: radial-gradient(120px 80px at 30% 30%, rgba(255,159,10,.5), transparent), radial-gradient(140px 90px at 75% 70%, rgba(255,61,139,.45), transparent), #16121a; color: #fff; }
.sp-txt b { font: 900 26px/0.95 var(--display); letter-spacing: -.02em; animation: spWord 3s cubic-bezier(.2,.9,.2,1.2) infinite; }
.sp-txt b + b { animation-delay: .12s; }
.sp-txt small { margin-top: 8px; font-size: 10px; opacity: .75; }
@keyframes spWord { 0% { transform: translateY(12px) scale(.9); opacity: 0; } 18%, 80% { transform: none; opacity: 1; } 100% { opacity: 0; transform: translateY(-6px); } }
.sp-fmt { display: flex; align-items: center; justify-content: center; gap: 10px; }
.sp-fmt i { display: block; border-radius: 6px; background: linear-gradient(150deg, #ff9f0a, #ff3d8b); box-shadow: inset 0 0 0 2px rgba(255,255,255,.2); animation: spFmt 3.6s ease-in-out infinite; }
.sp-fmt .w { width: 96px; height: 54px; } .sp-fmt .h { width: 42px; height: 74px; animation-delay: .3s; } .sp-fmt .s { width: 58px; height: 58px; animation-delay: .6s; }
@keyframes spFmt { 0%, 100% { transform: none; } 50% { transform: translateY(-4px); } }
.sp-dual { display: flex; align-items: center; justify-content: center; gap: 8px; background: #0f1013; }
.sp-dual .m1, .sp-dual .m2 { width: 46%; height: 70%; border-radius: 6px; box-shadow: inset 0 0 0 2px #3a3b40; }
.sp-dual .m1 { display: grid; align-content: end; gap: 3px; padding: 6px; } .sp-dual .m1 i { height: 6px; border-radius: 2px; background: #3e7bd6; } .sp-dual .m1 i:nth-child(2) { background: #ffb000; width: 70%; } .sp-dual .m1 i:nth-child(3) { background: #30d158; }
.sp-dual .m2 { display: grid; place-items: center; background: linear-gradient(140deg, #ff8a3d, #ff3d8b 60%, #7d5cff); } .sp-dual .m2 b { font-size: 10px; color: #fff; }
.sp-loud { display: flex; flex-direction: column; justify-content: center; padding: 0 16px; color: #fff; background: radial-gradient(140px 80px at 80% 30%, rgba(48,209,88,.3), transparent), #0f1412; }
.sp-loud small { font-size: 9px; letter-spacing: .1em; opacity: .6; } .sp-loud b { font: 800 34px/1 var(--display); letter-spacing: -.03em; font-variant-numeric: tabular-nums; } .sp-loud span { font-size: 11px; opacity: .7; }
.sp-loud .bar { height: 6px; border-radius: 3px; background: rgba(255,255,255,.1); margin: 8px 0 6px; overflow: hidden; } .sp-loud .bar i { display: block; height: 100%; width: 72%; background: linear-gradient(90deg, #30d158, #0a84ff); animation: spLd 2.4s ease-in-out infinite alternate; }
.sp-loud em { font-style: normal; font-size: 10px; opacity: .6; }
@keyframes spLd { from { width: 64%; } to { width: 76%; } }
.sp-mix { display: flex; align-items: flex-end; justify-content: space-around; padding: 12px; }
.sp-mix span { position: relative; width: 8%; height: 90%; border-radius: 4px; background: rgba(255,255,255,.06); overflow: hidden; }
.sp-mix span i { position: absolute; left: 0; right: 0; bottom: 0; height: calc(var(--v) * 100%); background: linear-gradient(0deg, #30d158, #30d158 70%, #ffd60a 88%, #ff453a); animation: spMx 1.1s ease-in-out infinite alternate; animation-delay: calc(var(--i) * -0.17s); }
@keyframes spMx { from { transform: scaleY(.62); transform-origin: bottom; } to { transform: scaleY(1); transform-origin: bottom; } }
.sp-keys { display: grid; grid-template-rows: 1fr 34px; }
.sp-keys .roll { position: relative; background: repeating-linear-gradient(0deg, rgba(255,255,255,.04) 0 1px, transparent 1px 12px); }
.sp-keys .roll b { position: absolute; height: 9px; border-radius: 3px; background: #bf5af2; box-shadow: 0 0 10px rgba(191,90,242,.6); }
.sp-keys .kb { display: flex; gap: 2px; padding: 3px; background: #1c1d21; }
.sp-keys .kb i { flex: 1; border-radius: 0 0 3px 3px; background: #e9e9ee; } .sp-keys .kb i.on { background: #bf5af2; animation: spKey 1.2s ease-in-out infinite alternate; }
@keyframes spKey { from { background: #e9e9ee; } to { background: #bf5af2; } }
.sp-rnd { padding: 14px; display: flex; flex-wrap: wrap; align-content: center; gap: 6px; }
.sp-rnd span { font-size: 11px; font-weight: 800; color: #fff; padding: 4px 9px; border-radius: 7px; background: rgba(100,210,255,.18); box-shadow: inset 0 0 0 1px rgba(100,210,255,.35); }
.sp-rnd .bar { flex: 0 0 100%; height: 6px; border-radius: 3px; background: rgba(255,255,255,.1); overflow: hidden; margin-top: 8px; } .sp-rnd .bar i { display: block; height: 100%; background: linear-gradient(90deg, #64d2ff, #30d158); animation: spRn 3s linear infinite; }
.sp-rnd em { font-style: normal; font-size: 10px; color: rgba(255,255,255,.6); }
@keyframes spRn { from { width: 0; } to { width: 100%; } }

/* ---------- kimler için ---------- */
.st-ug { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; margin-top: 10px; }
.st-uc { display: flex; flex-direction: column; gap: 8px; padding: 24px; border-radius: 24px; background: #fff; border: .5px solid var(--hair); color: var(--ink); transition: transform .3s, box-shadow .3s; }
.st-uc:hover { transform: translateY(-3px); box-shadow: 0 24px 50px -30px rgba(0,0,0,.35); }
.st-uc .ai { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; font-size: 25px; color: var(--k); background: color-mix(in srgb, var(--k) 13%, transparent); margin-bottom: 6px; }
.st-uc b { font: 700 18px var(--display); letter-spacing: -.01em; } .st-uc p { margin: 0; font-size: 14.5px; color: var(--ink-2); flex: 1; }
.st-uc em { font-style: normal; font-size: 13.5px; font-weight: 600; color: var(--k); display: inline-flex; gap: 5px; align-items: center; margin-top: 6px; }

/* ---------- neden ---------- */
.wv-logo { width: 22px; height: 22px; border-radius: 6px; vertical-align: -5px; }
.st-why .why-head h2 .cp-grad, .st-why .why-head h2 .au-grad { display: inline; }

/* ---------- nasıl başlarsınız ---------- */
.st-steps { list-style: none; margin: 40px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; counter-reset: s; }
.st-steps li { position: relative; padding: 26px 22px 24px; border-radius: 24px; background: #fff; border: .5px solid var(--hair); }
.st-steps .st-n { position: absolute; top: 18px; right: 20px; font: 800 44px/1 var(--display); color: rgba(0,0,0,.05); }
.st-steps .st-i { width: 48px; height: 48px; border-radius: 15px; display: grid; place-items: center; font-size: 25px; color: #fff; background: linear-gradient(135deg, var(--g1), var(--g2)); box-shadow: 0 12px 24px -12px rgba(var(--glow), .9); margin-bottom: 18px; }
.st-steps b { display: block; font: 700 17px var(--display); margin-bottom: 6px; } .st-steps p { margin: 0; font-size: 14.5px; color: var(--ink-2); }
.st-steps li:not(:last-child)::after { content: ''; position: absolute; top: 49px; right: -12px; width: 8px; height: 8px; border-top: 2px solid rgba(var(--glow), .5); border-right: 2px solid rgba(var(--glow), .5); transform: rotate(45deg); }

/* ---------- paketler ---------- */
.st-per { display: inline-flex; gap: 4px; padding: 4px; border-radius: 14px; background: rgba(0,0,0,.05); margin-top: 22px; }
.st-per button { border: 0; background: none; font: 600 14px var(--font); padding: 8px 18px; border-radius: 11px; cursor: pointer; color: var(--ink-2); display: inline-flex; gap: 6px; align-items: center; }
.st-per button.on { background: #fff; color: var(--ink); box-shadow: 0 4px 12px -6px rgba(0,0,0,.3); }
.st-per em { font-style: normal; font-size: 11px; font-weight: 700; padding: 2px 7px; border-radius: 7px; color: #fff; background: linear-gradient(135deg, var(--g1), var(--g2)); }
.st-plans { margin-top: 34px; }
.st-plans.n4 { grid-template-columns: repeat(4, 1fr); } .st-plans.n2 { grid-template-columns: repeat(2, minmax(0, 380px)); justify-content: center; } .st-plans.n1 { grid-template-columns: minmax(0, 380px); justify-content: center; }
.st-plans .plan { position: relative; padding: 28px 24px; }
.st-pi { width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center; font-size: 23px; margin-bottom: 14px; color: var(--blue); background: rgba(var(--glow), .12); }
.plan.featured .st-pi { color: #fff; background: linear-gradient(135deg, var(--g1), var(--g2)); }
.st-trial { background: linear-gradient(170deg, rgba(var(--glow), .1), #fff 55%) !important; border-color: rgba(var(--glow), .3) !important; }
.st-plans .price { flex-wrap: wrap; } .st-plans .price s { flex: 0 0 100%; font-size: 14px; color: var(--ink-3, #86868b); margin-bottom: -2px; }
.plan-cta.one { grid-template-columns: 1fr; }
.st-plans .plan-cta .b { justify-content: center; }
.st-pnote { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 28px; margin-top: 28px; font-size: 14px; color: var(--ink-2); }
.st-pnote span { display: inline-flex; align-items: center; gap: 7px; } .st-pnote i { font-size: 19px; color: var(--blue); }
.st-none { text-align: center; color: var(--ink-2); margin-top: 18px; }
.st-faqmore { text-align: center; margin-top: 26px; color: var(--ink-2); }

/* ---------- çağrı bandı ---------- */
.st .st-band { background: radial-gradient(600px 300px at 50% 120%, rgba(var(--glow), .45), transparent 70%), linear-gradient(160deg, #15161a, #0a0b0d); }
.st .st-band .cta-wave i { background: linear-gradient(0deg, rgba(var(--glow), .5), rgba(var(--glow), .05)); }

/* ---------- iç sayfalar ---------- */
.st-pgl { border-radius: 10px; margin-bottom: 6px; box-shadow: 0 10px 22px -10px rgba(var(--glow), .8); }
.pg-grid.one { grid-template-columns: minmax(0, 760px); justify-content: center; }
.st-cform { display: grid; justify-items: center; }
.st-inline { position: relative; width: 100%; max-width: 620px; box-shadow: 0 30px 70px -40px rgba(0,0,0,.4); }
.dlg-kvkk { margin: 10px 0 0; font-size: 12.5px; color: var(--ink-2); text-align: center; }
.msg { padding: 11px 14px; border-radius: 12px; font-size: 14px; margin: 4px 0 12px; } .msg.ok { background: rgba(48,209,88,.12); color: #137a35; } .msg.err { background: rgba(255,59,48,.1); color: #c11b12; }
.fld small { font-weight: 500; color: var(--ink-2); }
.inner .dxp > section:first-child { margin-top: 0; }

/* ---------- push izni kartı ---------- */
.st-pc { position: fixed; right: 18px; bottom: 18px; z-index: 90; width: min(380px, calc(100vw - 36px)); display: grid; grid-template-columns: 44px 1fr; gap: 12px; padding: 16px; border-radius: 20px; background: rgba(255,255,255,.92); backdrop-filter: blur(20px) saturate(1.6); -webkit-backdrop-filter: blur(20px) saturate(1.6); box-shadow: 0 30px 60px -20px rgba(0,0,0,.35), inset 0 0 0 .5px rgba(0,0,0,.08); transform: translateY(20px); opacity: 0; transition: .4s; }
.st-pc.in { transform: none; opacity: 1; } .st-pc img { width: 44px; height: 44px; border-radius: 11px; } .st-pc b { font-size: 15px; } .st-pc p { margin: 3px 0 0; font-size: 13px; color: var(--ink-2); }
.st-pc .row { grid-column: 1 / -1; display: flex; justify-content: flex-end; gap: 8px; }

/* ---------- hareketli yazılar ---------- */
.tx-btns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.tx-btns button { display: inline-flex; align-items: center; gap: 7px; font: 600 13.5px var(--font); padding: 9px 14px; border-radius: 12px; border: 0; cursor: pointer; color: rgba(255,255,255,.75); background: rgba(255,255,255,.07); box-shadow: inset 0 0 0 .5px rgba(255,255,255,.12); transition: .25s; }
.tx-btns button i { font-size: 17px; } .tx-btns button.on { color: #1a1200; background: linear-gradient(135deg, #ffe14d, #ff9f0a); }
.tx { border-radius: 22px; overflow: hidden; background: #0c0c10; box-shadow: 0 0 0 1px rgba(255,255,255,.1), 0 40px 90px -40px rgba(0,0,0,.9), 0 30px 100px -60px rgba(255,159,10,.6); }
.tx-v { position: relative; aspect-ratio: 16 / 9; overflow: hidden; color: #fff; }
.tx-sc { position: absolute; inset: 0; background: linear-gradient(160deg, #1a1430, #3a1d3f 50%, #6b2a3a); }
.tx-sc i { position: absolute; border-radius: 50%; filter: blur(40px); animation: txSky 9s ease-in-out infinite alternate; }
.tx-sc i:nth-child(1) { width: 55%; height: 70%; left: -10%; top: -10%; background: rgba(255,159,10,.55); }
.tx-sc i:nth-child(2) { width: 50%; height: 60%; right: -8%; bottom: -15%; background: rgba(255,61,139,.5); animation-delay: -3s; }
.tx-sc i:nth-child(3) { width: 30%; height: 40%; left: 40%; top: 30%; background: rgba(125,92,255,.4); animation-delay: -6s; }
@keyframes txSky { to { transform: translate(6%, 4%) scale(1.1); } }
.tx-l { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; opacity: 0; pointer-events: none; }
.tx-l.on { opacity: 1; }
.tx-l.kinetik b { display: block; font: 900 clamp(34px, 6vw, 64px)/.92 var(--display); letter-spacing: -.03em; text-shadow: 0 10px 40px rgba(0,0,0,.4); }
.tx-l.kinetik.on b { animation: txUp .7s cubic-bezier(.2,.9,.2,1.15) both; } .tx-l.kinetik.on b + b { animation-delay: .12s; }
.tx-l.kinetik small { margin-top: 12px; font: 700 13px var(--display); letter-spacing: .3em; opacity: .85; } .tx-l.kinetik.on small { animation: txFade .6s .45s both; }
@keyframes txUp { from { transform: translateY(40px) scale(.92); opacity: 0; filter: blur(6px); } to { transform: none; opacity: 1; filter: none; } }
@keyframes txFade { from { opacity: 0; transform: translateY(8px); } to { opacity: .85; transform: none; } }
.tx-l.altbant { place-content: end start; padding: 0 0 9% 6%; text-align: left; }
.tx-l.altbant .lt { display: flex; flex-direction: column; padding: 10px 18px 10px 16px; border-left: 4px solid #ff9f0a; background: rgba(0,0,0,.55); backdrop-filter: blur(6px); border-radius: 0 10px 10px 0; }
.tx-l.altbant.on .lt { animation: txSlide .6s cubic-bezier(.2,.9,.2,1) both; }
.tx-l.altbant b { font: 750 clamp(16px, 2.2vw, 22px) var(--display); } .tx-l.altbant small { font-size: 13px; opacity: .8; }
@keyframes txSlide { from { transform: translateX(-30px); opacity: 0; clip-path: inset(0 100% 0 0); } to { transform: none; opacity: 1; clip-path: inset(0 0 0 0); } }
.tx-l.altyazi { place-content: end center; padding-bottom: 8%; }
.tx-l.altyazi p { margin: 0; max-width: 80%; font: 800 clamp(16px, 2.3vw, 24px)/1.3 var(--display); }
.tx-l.altyazi span { opacity: .35; transition: .15s; padding: 0 3px; border-radius: 6px; } .tx-l.altyazi span.done { opacity: 1; } .tx-l.altyazi span.on { opacity: 1; color: #1a1200; background: #ffd60a; }
.tx-l.daktilo b { font: 600 clamp(22px, 3.6vw, 40px) ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .02em; } .tx-l.daktilo b::after { content: '|'; margin-left: 2px; animation: txCaret 1s steps(2) infinite; }
@keyframes txCaret { 50% { opacity: 0; } }
.tx-l.neon b { display: block; font: 900 clamp(32px, 5.6vw, 60px)/1 var(--display); color: #ffe7f3; text-shadow: 0 0 6px #fff, 0 0 18px #ff3d8b, 0 0 42px #ff3d8b, 0 0 80px #7d5cff; }
.tx-l.neon.on b { animation: txFlick 1.6s both; } .tx-l.neon b + b { color: #e6fbff; text-shadow: 0 0 6px #fff, 0 0 18px #64d2ff, 0 0 42px #0a84ff; }
@keyframes txFlick { 0% { opacity: 0; } 10% { opacity: 1; } 14% { opacity: .2; } 18% { opacity: 1; } 22% { opacity: .4; } 30%, 100% { opacity: 1; } }
.tx-l.kapanis .ck { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 22px 34px; border-radius: 20px; background: rgba(255,255,255,.1); backdrop-filter: blur(10px); box-shadow: inset 0 0 0 1px rgba(255,255,255,.2); }
.tx-l.kapanis.on .ck { animation: txUp .7s cubic-bezier(.2,.9,.2,1.1) both; }
.tx-l.kapanis i { font-size: 30px; color: #ffd60a; } .tx-l.kapanis b { font: 800 clamp(20px, 2.8vw, 30px) var(--display); } .tx-l.kapanis small { opacity: .8; }
.tx-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(255,255,255,.1); } .tx-bar i { display: block; height: 100%; width: 0; background: #ffd60a; }
.tx-tl { position: relative; display: grid; grid-template-columns: 60px 1fr; align-items: center; height: 40px; padding: 0 12px; background: #141518; border-top: 1px solid rgba(255,255,255,.06); }
.tx-tl .t { font-size: 11px; color: rgba(255,255,255,.5); } .tx-tl .c { position: relative; height: 16px; }
.tx-tl .c i { position: absolute; top: 0; bottom: 0; border-radius: 4px; background: linear-gradient(90deg, #ffb000, #ff7a1a); }
.tx-tl em { position: absolute; top: 6px; bottom: 6px; width: 2px; margin-left: 72px; background: #fff; left: 0; }

/* ---------- ikinci ekran ---------- */
.du { display: grid; grid-template-columns: 1.35fr 70px 1fr; align-items: end; gap: 0; margin-top: 34px; }
.du-m { display: flex; flex-direction: column; align-items: center; gap: 0; }
.du-m small { margin-top: 10px; font-size: 13px; color: var(--ink-2); font-weight: 600; }
.du-scr { position: relative; width: 100%; aspect-ratio: 16 / 10; border-radius: 14px; overflow: hidden; background: #0d0e11; border: 9px solid #1d1e22; box-shadow: 0 40px 80px -40px rgba(0,0,0,.6); --dz: 1; }
.du-stand { width: 22%; height: 30px; background: linear-gradient(#d2d2d7, #b8b8be); clip-path: polygon(30% 0, 70% 0, 82% 100%, 18% 100%); }
.du-a .du-scr { display: grid; grid-template-rows: calc(26px * var(--dz)) calc(22% * var(--dz)) 1fr; font-size: calc(10px * var(--dz)); transition: .35s; }
.du-bar { display: flex; align-items: center; gap: 8px; padding: 0 8px; background: #17181c; color: #fff; border-bottom: 1px solid rgba(255,255,255,.06); }
.du-bar b { display: inline-flex; gap: 4px; align-items: center; font-size: 1em; } .du-bar b i { color: #ffb000; }
.du-pop { margin-left: auto; display: inline-flex; gap: 4px; align-items: center; padding: 2px 7px; border-radius: 6px; color: #1a1200; background: #ffd60a; font-weight: 700; font-size: .9em; }
.du-top { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 6px; transition: .35s; }
.du-lib, .du-ins { display: grid; gap: 4px; padding: 6px; border-radius: 6px; background: rgba(255,255,255,.04); }
.du-lib { grid-template-columns: repeat(4, 1fr); } .du-lib i { border-radius: 4px; background: linear-gradient(140deg, #3e7bd6, #b9e1ff); } .du-lib i:nth-child(2) { background: linear-gradient(140deg, #ff8a3d, #ff3d8b); } .du-lib i:nth-child(3) { background: linear-gradient(140deg, #1f6b3a, #8ee0a8); } .du-lib i:nth-child(4) { background: linear-gradient(140deg, #5e5ce6, #bf5af2); }
.du-ins i { height: 4px; border-radius: 2px; background: rgba(255,255,255,.18); align-self: center; } .du-ins i:nth-child(2) { width: 70%; } .du-ins i:nth-child(3) { width: 50%; }
.du-tl { position: relative; display: grid; align-content: start; gap: calc(5px * var(--dz)); padding: 8px; background: #111215; border-top: 1px solid rgba(255,255,255,.06); }
.du-r { position: relative; height: calc(18px * var(--dz)); border-radius: 4px; background: rgba(255,255,255,.035); transition: .35s; }
.du-r i { position: absolute; top: 2px; bottom: 2px; border-radius: 3px; }
.du-r.t i { background: #ffb000; } .du-r.o i { background: #bf5af2; } .du-r.v i { background: linear-gradient(90deg, #64a6ff, #3e7bd6); box-shadow: inset -2px 0 0 #111215; } .du-r.a i { background: repeating-linear-gradient(90deg, rgba(48,209,88,.75) 0 2px, rgba(48,209,88,.25) 2px 4px); } .du-r.m i { background: #ff6ba1; }
.du-ph { position: absolute; top: 4px; bottom: 4px; width: 2px; background: #ffd60a; box-shadow: 0 0 10px #ffd60a; left: 0; }
.du-link { display: flex; justify-content: center; gap: 6px; padding-bottom: 120px; } .du-link i { width: 6px; height: 6px; border-radius: 50%; background: rgba(var(--glow), .8); animation: duDot 1.2s ease-in-out infinite; } .du-link i:nth-child(2) { animation-delay: .2s; } .du-link i:nth-child(3) { animation-delay: .4s; }
@keyframes duDot { 0%, 100% { opacity: .25; transform: scale(.8); } 50% { opacity: 1; transform: none; } }
.du-pv { position: absolute; inset: 0; display: grid; place-items: center; color: #fff; overflow: hidden; }
.du-pv i { position: absolute; inset: 0; transition: opacity .8s; }
.du-pv .s1 { background: linear-gradient(160deg, #1d3b6e, #3e7bd6 55%, #ffd2a0); } .du-pv .s2 { background: linear-gradient(160deg, #3a1d3f, #ff3d8b 60%, #ffb000); opacity: 0; } .du-pv .s3 { background: linear-gradient(160deg, #0f3b2a, #30d158 60%, #d6ffe3); opacity: 0; }
[data-sc="1"] .du-pv .s2, [data-sc="3"] .du-pv .s2 { opacity: 1; } [data-sc="2"] .du-pv .s3 { opacity: 1; }
.du-pv b { position: relative; font: 900 clamp(18px, 2.6vw, 30px) var(--display); letter-spacing: -.02em; text-shadow: 0 6px 24px rgba(0,0,0,.4); transform: scale(calc(1 + var(--p, 0) * .12)); }
.du-tc { position: absolute; right: 10px; bottom: 8px; font: 600 11px ui-monospace, Menlo, monospace; padding: 2px 6px; border-radius: 5px; background: rgba(0,0,0,.45); }
.du-ctl { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 26px 0 8px; font-size: 14px; font-weight: 600; color: var(--ink-2); }
.seg { display: inline-flex; gap: 3px; padding: 3px; border-radius: 12px; background: rgba(0,0,0,.06); }
.seg button { border: 0; background: none; padding: 7px 15px; border-radius: 9px; font: 600 13.5px var(--font); color: var(--ink-2); cursor: pointer; } .seg button.on { background: #fff; color: var(--ink); box-shadow: 0 3px 10px -5px rgba(0,0,0,.35); }
.cpp-feat.st-f4 { grid-template-columns: repeat(4, 1fr); margin-top: 34px; }

/* ---------- eklenti pencereleri (mastering, limiter, kompresör) ---------- */
.ms, .lm, .ac { border-radius: 22px; overflow: hidden; background: #16171a; color: #f5f5f7; box-shadow: 0 0 0 1px rgba(255,255,255,.09), 0 40px 90px -40px rgba(0,0,0,.9), 0 30px 100px -60px rgba(var(--glow), .55); }
.ms { margin-top: 36px; }
.ms-h { display: flex; align-items: center; gap: 10px; height: 42px; padding: 0 14px; background: #1d1e22; border-bottom: 1px solid rgba(255,255,255,.06); font-size: 13px; }
.ms-h b { display: inline-flex; gap: 6px; align-items: center; } .ms-h b i { color: var(--g1); }
.ms-st { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 8px; background: rgba(255,255,255,.07); }
.ms-st i { width: 8px; height: 8px; border-radius: 50%; background: #8e8e93; } .ms-st.p0 i { background: #64d2ff; animation: msPulse 1s infinite; } .ms-st.p1 i, .ms-st.p2 i { background: #ffd60a; animation: msPulse .6s infinite; } .ms-st.p3 { color: #30d158; } .ms-st.p3 i { background: #30d158; }
@keyframes msPulse { 50% { opacity: .3; } }
.ms-b { display: grid; grid-template-columns: 330px 1fr; }
.ms-l { padding: 20px; border-right: 1px solid rgba(255,255,255,.06); display: flex; flex-direction: column; gap: 14px; }
.ms-k { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.45); }
.ms-tg { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.ms-tg button { text-align: left; border: 0; cursor: pointer; padding: 9px 11px; border-radius: 11px; color: #f5f5f7; background: rgba(255,255,255,.05); box-shadow: inset 0 0 0 .5px rgba(255,255,255,.1); font: 500 12px var(--font); display: flex; flex-direction: column; }
.ms-tg button b { font: 750 17px var(--display); } .ms-tg button small { font-size: 11px; color: rgba(255,255,255,.5); }
.ms-tg button.on { background: rgba(var(--glow), .16); box-shadow: inset 0 0 0 1px rgba(var(--glow), .6); }
.ms-prog span { font-size: 13px; color: rgba(255,255,255,.75); } .ms-prog .bar { height: 6px; border-radius: 3px; background: rgba(255,255,255,.08); margin-top: 8px; overflow: hidden; } .ms-prog .bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--g1), var(--g3)); }
.ms-io { display: grid; grid-template-columns: 1fr auto 1fr 1fr; align-items: center; gap: 8px; padding: 12px; border-radius: 14px; background: rgba(255,255,255,.04); }
.ms-io > i { color: rgba(255,255,255,.35); } .ms-io div { display: flex; flex-direction: column; } .ms-io small { font-size: 10px; color: rgba(255,255,255,.45); }
.ms-io b { font: 750 20px var(--display); font-variant-numeric: tabular-nums; letter-spacing: -.02em; } .ms-io span { font-size: 10px; color: rgba(255,255,255,.45); } .ms-io .o b { color: var(--g1); }
.ms-r { display: grid; grid-template-rows: 1fr auto; min-height: 340px; }
.ms-cv { position: relative; } .ms-cv canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.ms-lg { position: absolute; right: 14px; top: 10px; display: flex; gap: 10px; align-items: center; font-size: 11px; color: rgba(255,255,255,.6); }
.ms-lg i { display: inline-block; width: 14px; height: 3px; border-radius: 2px; } .ms-lg .a { background: #30d158; } .ms-lg .b { background: repeating-linear-gradient(90deg, #fff 0 4px, transparent 4px 7px); }
.ms-kn { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; padding: 14px; border-top: 1px solid rgba(255,255,255,.06); }
.ms-kn span { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.ms-kn i { width: 40px; height: 40px; border-radius: 50%; background: conic-gradient(from 225deg, var(--g1) calc(var(--v) * 270deg), rgba(255,255,255,.08) 0 270deg, transparent 0); -webkit-mask: radial-gradient(circle, transparent 13px, #000 14px); mask: radial-gradient(circle, transparent 13px, #000 14px); }
.ms-kn b { font: 650 12px var(--display); font-variant-numeric: tabular-nums; } .ms-kn small { font-size: 10.5px; color: rgba(255,255,255,.5); }
.lm { background: #fff; color: var(--ink); box-shadow: 0 0 0 .5px var(--hair), 0 40px 80px -40px rgba(0,0,0,.35); }
.lm .ms-h { background: #f5f5f7; border-color: rgba(0,0,0,.06); } .lm .ms-h b i { color: #ff453a; }
.lm-gr { margin-left: auto; font-size: 12px; color: var(--ink-2); } .lm-gr b { font: 750 16px var(--display); color: #ff453a; font-variant-numeric: tabular-nums; } .lm-gr small { font-weight: 700; margin-right: 4px; }
.lm-cv { position: relative; height: 230px; background: linear-gradient(#fbfbfd, #f2f3f5); } .lm-cv canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.lm-ceil { position: absolute; left: 12px; top: 14px; font-size: 11px; font-weight: 700; color: #ff453a; padding: 2px 8px; border-radius: 6px; background: rgba(255,69,58,.1); }
.lm-f { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-top: .5px solid var(--hair); }
.lm-f .aup-knobs { flex: 1; margin: 0; }
.lm-out { display: flex; flex-direction: column; align-items: flex-end; padding-left: 12px; border-left: .5px solid var(--hair); } .lm-out small { font-size: 11px; color: var(--ink-2); } .lm-out b { font: 800 26px var(--display); color: #0f9d48; font-variant-numeric: tabular-nums; letter-spacing: -.02em; } .lm-out span { font-size: 11px; color: var(--ink-2); }
.lm .aup-knobs span b, .lm .aup-knobs span small { color: var(--ink); } .lm .aup-knobs span small { color: var(--ink-2); }
.ac-ch { display: flex; flex-wrap: wrap; gap: 6px; padding: 12px 14px 0; }
.ac-ch button { border: 0; cursor: pointer; padding: 6px 12px; border-radius: 9px; font: 600 12.5px var(--font); color: rgba(255,255,255,.7); background: rgba(255,255,255,.06); } .ac-ch button.on { color: #1a1200; background: #ffd60a; }
.ac-cv { position: relative; height: 250px; margin: 8px 14px 0; } .ac-cv canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.ac-kn { padding: 8px 14px 0; }
.ac-go { margin: 14px; width: calc(100% - 28px); justify-content: center; }
.st-audiostudio .ac-go { background: linear-gradient(135deg, #ffd60a, #ff9f0a) !important; color: #1a1200 !important; }

/* ---------- loudness ölçer ---------- */
.ld { display: grid; grid-template-columns: 380px 1fr; margin-top: 36px; border-radius: 24px; overflow: hidden; background: #fff; box-shadow: 0 0 0 .5px var(--hair), 0 40px 80px -40px rgba(0,0,0,.3); }
.ld-n { padding: 24px; display: flex; flex-direction: column; gap: 18px; border-right: .5px solid var(--hair); }
.ld-big { display: grid; grid-template-columns: auto auto 1fr; align-items: baseline; gap: 2px 8px; }
.ld-big small { grid-column: 1 / -1; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
.ld-big b { font: 800 60px/1 var(--display); letter-spacing: -.04em; font-variant-numeric: tabular-nums; } .ld-big span { font-size: 15px; font-weight: 600; color: var(--ink-2); }
.ld-big em { justify-self: end; font-style: normal; font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: 8px; } .ld-big em.ok { color: #137a35; background: rgba(48,209,88,.14); } .ld-big em.warn { color: #b25000; background: rgba(255,159,10,.16); }
.ld-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.ld-row div { padding: 10px 12px; border-radius: 12px; background: #f5f5f7; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 5px; }
.ld-row small { flex: 0 0 100%; font-size: 11px; color: var(--ink-2); } .ld-row b { font: 750 19px var(--display); font-variant-numeric: tabular-nums; } .ld-row span { font-size: 10.5px; color: var(--ink-2); }
.ld-tg { display: flex; flex-wrap: wrap; gap: 6px; }
.ld-tg button { border: 0; cursor: pointer; padding: 6px 10px; border-radius: 10px; font: 750 13px var(--display); background: #f5f5f7; color: var(--ink); display: flex; flex-direction: column; align-items: flex-start; }
.ld-tg button small { font: 500 10.5px var(--font); color: var(--ink-2); } .ld-tg button.on { background: rgba(48,209,88,.14); box-shadow: inset 0 0 0 1px rgba(48,209,88,.6); }
.ld-cv { position: relative; min-height: 340px; background: linear-gradient(#fbfbfd, #f4f5f7); } .ld-cv canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.ld-lg { position: absolute; right: 14px; top: 12px; display: flex; gap: 10px; align-items: center; font-size: 11px; color: var(--ink-2); }
.ld-lg i { display: inline-block; width: 14px; height: 3px; border-radius: 2px; } .ld-lg .m { background: rgba(10,132,255,.6); } .ld-lg .s { background: #30d158; } .ld-lg .t { background: repeating-linear-gradient(90deg, #1a9e4b 0 4px, transparent 4px 7px); }

/* ---------- uyum ---------- */
@media (max-width: 1100px) {
  .st-plans.n4 { grid-template-columns: repeat(2, 1fr); }
  .st-steps { grid-template-columns: repeat(2, 1fr); } .st-steps li::after { display: none; }
  .ms-b { grid-template-columns: 1fr; } .ms-l { border-right: 0; border-bottom: 1px solid rgba(255,255,255,.06); }
  .ld { grid-template-columns: 1fr; } .ld-n { border-right: 0; border-bottom: .5px solid var(--hair); }
  .cpp-feat.st-f4 { grid-template-columns: repeat(2, 1fr); }
  .mm-uses { grid-template-columns: 1fr !important; } .mm-uses .mm-try { display: none; }
}
@media (max-width: 800px) {
  .du { grid-template-columns: 1fr; gap: 26px; } .du-link { display: none; }
  .ms-kn { grid-template-columns: repeat(4, 1fr); row-gap: 12px; }
}
@media (max-width: 640px) {
  .st-plans.n4, .st-plans.n3, .st-plans.n2 { grid-template-columns: 1fr; }
  .st-steps { grid-template-columns: 1fr; }
  .cpp-feat.st-f4 { grid-template-columns: 1fr; }
  .ld-row { grid-template-columns: repeat(2, 1fr); } .ld-big b { font-size: 46px; }
  .ms-io { grid-template-columns: 1fr 1fr; } .ms-io > i { display: none; }
  .lm-f { flex-direction: column; align-items: stretch; } .lm-out { border: 0; padding: 0; align-items: flex-start; }
}

/* düzeltmeler */
.st .brand { text-transform: none; letter-spacing: -0.02em; }
.st-why .why-vs { grid-template-columns: minmax(0, 1fr); max-width: 1040px; margin: 60px auto 0; }
.st .plan ul { align-content: start; }
.st .contact-card.cc-login { background: linear-gradient(150deg, var(--g1), var(--g2) 60%, var(--g3)); }
.st .cc-login .cc-ic img { border-radius: 9px; }
.ac-kn { grid-template-columns: repeat(5, 1fr) !important; display: grid !important; }
.ms-tg button b { display: inline; } .ms-tg button .u { font-size: 12px; color: rgba(255,255,255,.6); margin-left: 3px; }
.mm-try { align-self: start; } .mm-try b { color: var(--ink) !important; } .mm-try .b.primary { color: #fff; }
@media (max-width: 1380px) and (min-width: 1101px) { .st .nav-cta .b.text { display: inline-flex; } }
@media (max-width: 480px) { .st .nav-cta .b.primary { padding: 0 12px; font-size: 13px; height: 32px; } .st .brand { font-size: 16px; } .st .nav .wrap { gap: 8px; } }