@charset "UTF-8";
/* =====================================================================
   Simkod — telefon içi eğitim/demo bileşeni (simkod-demo.css)
   Tüm stiller .skd kapsamı altındadır; sitenin CSS'iyle çakışmaz.
   ===================================================================== */
.skd{
  --ink:#17121f; --muted:#5f5872; --soft:#8a839c;
  --line:rgba(124,92,190,.16);
  --purple:#a855f7; --magenta:#d946ef; --pink:#ec4899;
  --green:#16a34a; --green-l:#22c55e; --red:#ef4444;
  --grad:linear-gradient(135deg,#a855f7 0%,#c04cf0 55%,#d946ef 100%);
  --mono:'JetBrains Mono',ui-monospace,monospace;
  --sans:'Plus Jakarta Sans',system-ui,sans-serif;
;font-family:var(--sans);color:var(--ink);-webkit-font-smoothing:antialiased;line-height:normal;text-align:left}
.skd *,.skd *::before,.skd *::after{box-sizing:border-box;margin:0;padding:0}
.skd svg{display:block}
.skd .skd-screen{position:relative;height:100%;border-radius:52px;overflow:hidden;background:linear-gradient(180deg,#e9e5f2 0%,#f2eff8 45%,#ebe7f3 100%);border:6px solid #15111d;display:flex;flex-direction:column}
.skd .sb{height:48px;flex:none;display:flex;justify-content:space-between;align-items:center;padding:8px 28px 0;font:700 14px var(--sans)}
.skd .sb-ic{display:flex;gap:6px;align-items:center}
.skd .island{position:absolute;top:11px;left:50%;width:104px;height:31px;margin-left:-52px;border-radius:20px;background:#0c0a12;z-index:25;transition:transform .4s cubic-bezier(.2,.9,.3,1.2)}
.skd .island .cam{position:absolute;right:11px;top:9.5px;width:12px;height:12px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#3b3b6b,#0a0a14 60%)}
.skd .island.pulse{animation:skd-island .6s cubic-bezier(.3,.7,.2,1)}
@keyframes skd-island{40%{transform:scale(1.55,1.2)}100%{transform:none}}
.skd .island.sms{transform:scale(1.15,1.05)}
.skd .notif{position:absolute;top:8px;left:10px;right:10px;z-index:26;background:rgba(18,14,28,.94);color:#fff;border-radius:24px;padding:12px 14px;display:flex;gap:11px;align-items:center;transform-origin:50% 0;transform:translateY(-4px) scale(.3,.2);opacity:0;transition:transform .55s cubic-bezier(.2,.9,.25,1.15),opacity .3s;box-shadow:0 20px 34px -12px rgba(0,0,0,.5)}
.skd .notif.on{transform:none;opacity:1}
.skd .notif .ic{width:38px;height:38px}
.skd .notif small{display:block;font:600 10.5px var(--sans);letter-spacing:.06em;color:#b9b0cc}
.skd .notif b{display:block;font:700 13.5px var(--sans);margin-top:2px}
.skd .notif b span{font-family:var(--mono);color:#86efac}
.skd .head{flex:none;margin:4px 12px 10px;padding:11px 14px;background:rgba(255,255,255,.74);border:1px solid rgba(255,255,255,.95);border-radius:18px;display:flex;align-items:center;justify-content:space-between;box-shadow:0 6px 14px -8px rgba(80,50,140,.25)}
.skd .h-title{font:700 15px var(--sans);display:flex;gap:8px;align-items:center;color:#2a2438}
.skd .h-title svg{color:var(--purple)}
.skd .swap{animation:skd-swap .45s ease}
@keyframes skd-swap{from{opacity:0;transform:translateY(6px)}}
.skd .badge{font:700 10.5px var(--mono);letter-spacing:.08em;padding:4px 10px;border-radius:999px;display:inline-flex;gap:6px;align-items:center}
.skd .badge.live{color:#15803d;background:rgba(220,252,231,.85);border:1px solid rgba(34,197,94,.35)}
.skd .badge.live i{width:6px;height:6px;border-radius:50%;background:var(--green-l);animation:skd-blink 1.2s infinite}
.skd .badge.demo{color:#b45309;background:rgba(254,243,199,.9);border:1px solid rgba(217,119,6,.35)}
@keyframes skd-blink{50%{opacity:.25}}
.skd .scenes{position:relative;flex:1;margin:0 12px;min-height:0}
.skd .scene{position:absolute;inset:0;opacity:0;transform:scale(.965);visibility:hidden;transition:opacity .45s ease,transform .45s ease,visibility 0s .45s}
.skd .scene.is-active{opacity:1;transform:none;visibility:visible;transition-delay:0s}
.skd .ic{flex:none;width:36px;height:36px;border-radius:11px;display:grid;place-items:center;color:#fff;font:800 16px var(--sans);box-shadow:inset 0 1px 0 rgba(255,255,255,.3)}
.skd [data-step="1"] [data-s="1"],.skd [data-step="2"] [data-s="2"],.skd [data-step="3"] [data-s="3"]{background:#fff;color:#7e22ce;border-color:rgba(168,85,247,.45);box-shadow:0 4px 10px -6px rgba(150,60,220,.5)}
.skd [data-step="2"] [data-s="1"],.skd [data-step="3"] [data-s="1"],.skd [data-step="3"] [data-s="2"]{color:#15803d}
.skd .panel{position:absolute;inset:0;opacity:0;transform:translateY(10px) scale(.98);visibility:hidden;transition:opacity .4s,transform .4s,visibility 0s .4s}
.skd [data-step="1"] [data-p=service],.skd [data-step="2"] [data-p=country],.skd [data-step="3"] [data-p=number]{opacity:1;transform:none;visibility:visible;transition-delay:0s}
.skd .search{display:flex;gap:8px;align-items:center;height:38px;padding:0 12px;border-radius:12px;background:rgba(255,255,255,.8);border:1px solid #fff;font:500 12.5px var(--sans);color:#8a839c;margin-bottom:10px}
.skd .fl{display:inline-block;width:26px;height:18px;border-radius:4px;flex:none;box-shadow:0 0 0 1px rgba(0,0,0,.08)}
.skd .fl-de{background:linear-gradient(#000 0 33.3%,#dd0000 33.3% 66.6%,#ffce00 66.6%)}
.skd .fl-nl{background:linear-gradient(#ae1c28 0 33.3%,#fff 33.3% 66.6%,#21468b 66.6%)}
.skd .fl-fr{background:linear-gradient(90deg,#0055a4 0 33.3%,#fff 33.3% 66.6%,#ef4135 66.6%)}
.skd .fl-pl{background:linear-gradient(#fff 0 50%,#dc143c 50%)}
.skd .fl-us{background:linear-gradient(#3c3b6e,#3c3b6e) 0 0/45% 54% no-repeat,repeating-linear-gradient(#b22234 0 15.4%,#fff 15.4% 30.8%)}
.skd .fl-gb{background:linear-gradient(#c8102e,#c8102e) center/100% 18% no-repeat,linear-gradient(90deg,#c8102e,#c8102e) center/14% 100% no-repeat,linear-gradient(#fff,#fff) center/100% 34% no-repeat,linear-gradient(90deg,#fff,#fff) center/26% 100% no-repeat,#012169}
.skd .bar{height:6px;border-radius:6px;background:#efe7fb;overflow:hidden;margin-top:12px}
.skd .bar i{display:block;height:100%;width:40%;border-radius:6px;background:var(--grad);animation:skd-load 1s ease-in-out infinite}
@keyframes skd-load{from{transform:translateX(-100%)}to{transform:translateX(250%)}}
.skd .boxes{display:grid;grid-template-columns:repeat(6,1fr);gap:6px;margin-top:9px}
.skd .boxes span{height:42px;border-radius:11px;background:#f4effb;border:1.5px solid rgba(168,85,247,.2);display:grid;place-items:center;font:700 19px var(--mono);color:transparent;transition:color .3s,border-color .3s,background .3s,transform .3s}
.skd [data-code=filled] .boxes span{color:var(--ink);border-color:rgba(34,197,94,.55);background:#f0fdf4}
.skd [data-code=filled] .boxes span:nth-child(2){transition-delay:.07s}
.skd [data-code=filled] .boxes span:nth-child(3){transition-delay:.14s}
.skd [data-code=filled] .boxes span:nth-child(4){transition-delay:.21s}
.skd [data-code=filled] .boxes span:nth-child(5){transition-delay:.28s}
.skd [data-code=filled] .boxes span:nth-child(6){transition-delay:.35s}
.skd .wait{position:relative;display:block;height:16px;margin-top:9px;font:600 11px var(--sans);color:#8a839c}
.skd .wait>span{position:absolute;left:0;transition:opacity .3s}
.skd .w1 i{font-style:normal;animation:skd-blink 1s infinite}
.skd .w1 i:nth-child(2){animation-delay:.2s}
.skd .w1 i:nth-child(3){animation-delay:.4s}
.skd .w2{opacity:0;color:var(--green)}
.skd [data-code=filled] .w1{opacity:0}
.skd [data-code=filled] .w2{opacity:1}
.skd .dial{position:absolute;inset:0;transition:opacity .45s,transform .45s,visibility 0s .45s}
.skd [data-phase=calling] .dial,.skd [data-phase=connected] .dial{opacity:0;transform:scale(.95);visibility:hidden}
.skd [data-phase=dial] .dial{transition-delay:0s}
.skd .caret{display:inline-block;width:2px;height:24px;background:var(--purple);vertical-align:-4px;margin-left:2px;animation:skd-blink 1s steps(1) infinite}
.skd .key{height:52px;border-radius:26px;background:rgba(255,255,255,.88);border:1px solid #fff;display:flex;flex-direction:column;align-items:center;justify-content:center;transition:background .12s,transform .12s;box-shadow:0 4px 10px -8px rgba(70,40,120,.4)}
.skd .key b{font:600 20px var(--sans);line-height:1}
.skd .key small{font:700 7.5px var(--sans);letter-spacing:.16em;color:#8a839c;height:9px;margin-top:2px}
.skd .key.pressed{background:#e9dcfb;transform:scale(.93)}
.skd .ring{position:absolute;inset:0;border-radius:50%;border:2px solid rgba(232,121,249,.65);animation:skd-ringP 1.8s ease-out infinite}
.skd .ring.r2{animation-delay:.6s}
@keyframes skd-ringP{from{transform:scale(1);opacity:.85}to{transform:scale(1.9);opacity:0}}
.skd [data-phase=connected] .ring{animation:none;opacity:0}
.skd .tick{width:20px;height:20px;border-radius:50%;display:grid;place-items:center;background:#ede7f6;color:transparent;font-size:11px;font-weight:800;transition:background .3s,color .3s}
.skd [data-act="1"] .tick{background:var(--green-l);color:#fff}
.skd .scene[data-scene=sim] .key{height:46px}
.skd .from{display:inline-flex;gap:6px;align-items:center;font:700 10.5px var(--mono);color:#7e22ce;background:#f3e8ff;padding:4px 9px;border-radius:999px;margin-bottom:6px}
.skd .from .fl{width:16px;height:11px;border-radius:2px}
.skd .dlv{align-self:flex-end;position:relative;height:16px;width:170px;margin-top:6px;font:600 10.5px var(--sans)}
.skd .dlv span{position:absolute;right:0;transition:opacity .3s}
.skd .intro{position:absolute;inset:0;z-index:11;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:24px;border-radius:24px;background:linear-gradient(160deg,rgba(255,255,255,.98),rgba(246,238,255,.98));border:1px solid #fff;box-shadow:0 20px 40px -20px rgba(120,60,200,.45);opacity:0;transform:scale(.96);visibility:hidden;transition:opacity .45s,transform .45s,visibility 0s .45s}
.skd .intro.on{opacity:1;transform:none;visibility:visible;transition-delay:0s}
.skd .in-ic{width:66px;height:66px;border-radius:20px;display:grid;place-items:center;color:#fff;font:800 28px var(--sans);box-shadow:0 14px 26px -10px rgba(60,30,110,.45)}
.skd .intro small{margin-top:20px;font:700 10.5px var(--mono);letter-spacing:.2em;color:#7e22ce}
.skd .intro b{margin-top:8px;font:800 23px/1.2 var(--sans);letter-spacing:-.02em}
.skd .intro p{margin-top:10px;font:500 13.5px/1.5 var(--sans);color:#5f5872;max-width:240px}
.skd .in-bar{margin-top:24px;width:120px;height:4px;border-radius:4px;background:#ece4f8;overflow:hidden}
.skd .in-bar i{display:block;height:100%;background:var(--grad);transform-origin:left;transform:scaleX(0)}
.skd .intro.play .in-bar i{animation:skd-inbar var(--intro,1.9s) linear forwards}
@keyframes skd-inbar{to{transform:scaleX(1)}}
.skd .h-title{min-width:0}
.skd .h-title span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.skd .head .badge{flex:none;margin-left:8px}
.skd .head .h-title{font-size:13.5px;gap:7px}
.skd .head .badge.demo{font-size:9.5px;letter-spacing:.05em;padding:4px 8px}
.skd .fl-tr{background:radial-gradient(ellipse 6% 9% at 63% 50%,#fff 90%,transparent 100%),radial-gradient(ellipse 17% 25% at 46% 50%,#e30a17 97%,transparent 100%),radial-gradient(ellipse 22% 32% at 40% 50%,#fff 97%,transparent 100%),#e30a17}
.skd .coach{position:absolute;left:0;top:0;z-index:14;width:max-content;max-width:236px;padding:10px 14px 11px;border-radius:15px;background:linear-gradient(135deg,#9333ea,#c026d3);color:#fff;font:700 13px/1.4 var(--sans);box-shadow:0 16px 30px -10px rgba(110,30,170,.65),0 0 0 3px rgba(255,255,255,.55);opacity:0;pointer-events:none;transition:opacity .3s,transform .55s cubic-bezier(.2,.8,.2,1)}
.skd .coach.on{opacity:1}
.skd .coach small{display:block;font:700 9.5px var(--mono);letter-spacing:.16em;color:#f5d0fe;margin-bottom:3px}
.skd .coach::before{content:"";position:absolute;left:var(--ax,50%);width:13px;height:13px;background:#a930e8;border-radius:2px;transform:translateX(-50%) rotate(45deg)}
.skd .coach[data-pos=below]::before{top:-5px}
.skd .coach[data-pos=above]::before{bottom:-5px}
.skd .coach[data-pos=dock]::before{display:none}
.skd .coach.swap{animation:skd-coachSwap .4s ease}
@keyframes skd-coachSwap{0%{filter:brightness(1.35)}100%{filter:none}}
.skd .scene[data-scene=sim] .dial,.skd .scene[data-scene=sim] .incoming{opacity:0;transform:scale(.95);visibility:hidden;transition:opacity .45s,transform .45s,visibility 0s .45s}
.skd .scene[data-scene=sim][data-phase=dial] .dial,.skd .scene[data-scene=sim][data-phase=incoming] .incoming{opacity:1;transform:none;visibility:visible;transition-delay:0s}
.skd [data-phase=inconn] .ring{animation:none;opacity:0}
.skd .incoming{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;padding-top:22px;border-radius:26px;background:linear-gradient(180deg,#14352a 0%,#1d4d3a 55%,#226147 100%);color:#fff;overflow:hidden}
.skd .incoming .ring{border-color:rgba(134,239,172,.6)}
@keyframes skd-accPulse{50%{box-shadow:0 0 0 12px rgba(34,197,94,.25)}}
.skd .fl-ca{background:radial-gradient(ellipse 12% 20% at 50% 50%,#d52b1e 95%,transparent 100%),linear-gradient(90deg,#d52b1e 0 25%,#fff 25% 75%,#d52b1e 75%)}
.skd .fl-es{background:linear-gradient(#aa151b 0 25%,#f1bf00 25% 75%,#aa151b 75%)}
.skd .fl-it{background:linear-gradient(90deg,#009246 0 33.3%,#fff 33.3% 66.6%,#ce2b37 66.6%)}
.skd .fl-se{background:linear-gradient(90deg,transparent 30%,#fecc00 30% 44%,transparent 44%),linear-gradient(transparent 40%,#fecc00 40% 60%,transparent 60%),#006aa7}
.skd .panel{transition:opacity .6s ease,transform .6s ease,visibility 0s .6s}
.skd .scene[data-scene=sim] .dial,.skd .scene[data-scene=sim] .incoming{transition:opacity .6s,transform .6s,visibility 0s .6s}
.skd .panel .search{margin-bottom:8px}
.skd .info-card{margin-top:10px;background:rgba(255,255,255,.88);border:1px solid #fff;border-radius:16px;padding:4px 14px}
.skd .ir{display:flex;justify-content:space-between;align-items:center;padding:8px 0;font:600 11.5px var(--sans);color:#6b6480;border-bottom:1px dashed rgba(124,92,190,.18)}
.skd .ir:last-child{border-bottom:0}
.skd .ir b{font:700 11.5px var(--mono);color:var(--ink);display:inline-flex;gap:6px;align-items:center}
.skd .ir b.g{color:var(--green)}
.skd .ir .fl{width:16px;height:11px;border-radius:2px}
.skd .scene[data-scene=sim] .key{height:54px}
.skd .coach{background:#fff;color:var(--ink);max-width:240px;padding:11px 15px 12px;border-radius:16px;font:700 13.5px/1.4 var(--sans);box-shadow:0 20px 40px -14px rgba(30,15,60,.55),0 0 0 1px rgba(23,18,31,.07);transition:opacity .45s,transform .8s cubic-bezier(.25,.8,.25,1)}
.skd .coach small{color:#16a34a;letter-spacing:.14em}
.skd .coach::before{background:#fff;box-shadow:-1px -1px 0 rgba(23,18,31,.05)}
.skd .coach[data-pos=above]::before{box-shadow:1px 1px 0 rgba(23,18,31,.05)}
.skd .coach.swap{animation:skd-coachIn .5s ease}
@keyframes skd-coachIn{0%{opacity:.35}100%{opacity:1}}
.skd .cursor{position:absolute;left:-2px;top:-2px;z-index:15;width:24px;height:28px;opacity:0;pointer-events:none;filter:drop-shadow(0 3px 4px rgba(0,0,0,.35));transition:transform 1.1s cubic-bezier(.45,.05,.25,1),opacity .4s}
.skd .cursor.on{opacity:1}
.skd .cursor svg{display:block;transform-origin:2px 2px;transition:transform .15s}
.skd .cursor.click svg{transform:scale(.84)}
.skd .cursor::after{content:"";position:absolute;left:-12px;top:-12px;width:28px;height:28px;border-radius:50%;border:2px solid rgba(17,17,17,.55);opacity:0}
.skd .cursor.click::after{animation:skd-clickRing .6s ease-out}
@keyframes skd-clickRing{from{opacity:1;transform:scale(.35)}to{opacity:0;transform:scale(1.7)}}
.skd .cu-sb{align-self:stretch;height:48px;display:flex;justify-content:space-between;align-items:center;padding:8px 30px 0;font:600 14px var(--sans)}
.skd .cu-sb .sb-ic{display:flex;gap:6px;align-items:center}
.skd .skd-screen.panel-mode .head{display:none}
.skd .skd-screen.panel-mode .scenes{margin:2px 10px 10px}
.skd .pn{position:absolute;inset:0;display:flex;flex-direction:column}
.skd .pn-top{flex:none;display:flex;align-items:center;gap:7px;padding:7px;background:rgba(255,255,255,.9);border:1px solid #fff;border-radius:18px;box-shadow:0 6px 16px -10px rgba(80,50,140,.3);margin-bottom:10px}
.skd .pn-burger,.skd .pn-bell{flex:none;display:grid;place-items:center;color:#3b3550;background:#f4f0f9;border:1px solid #ebe5f3}
.skd .pn-burger{width:36px;height:36px;border-radius:12px}
.skd .pn-bell{margin-left:auto;width:34px;height:34px;border-radius:11px}
.skd .pn-crumb{font:600 12px var(--sans);color:var(--ink);white-space:nowrap}
.skd .pn-user{flex:none;display:flex;align-items:center;gap:6px;padding:3px 9px 3px 3px;border-radius:999px;border:1px solid rgba(219,39,119,.28);background:linear-gradient(90deg,#fdf2f8,#f5f3ff)}
.skd .pn-av{width:28px;height:28px;border-radius:50%;background:radial-gradient(circle at 30% 30%,#5b2a5e,#1f1024);color:#fff;font:700 10px var(--sans);display:grid;place-items:center}
.skd .pn-user small{display:block;font:600 9.5px/1.1 var(--sans);color:#6b4c7a}
.skd .pn-user b{display:block;font:700 10.5px/1.25 var(--mono);color:#c58b12}
.skd .pn-scroll{flex:1;min-height:0;overflow:hidden;position:relative}
.skd .pn-inner{padding:2px 2px 16px}
.skd .pn-h{font:800 23px/1.1 var(--sans);letter-spacing:-.035em}
.skd .pn-h em{font-style:normal;background:linear-gradient(90deg,#ec4899,#a855f7);-webkit-background-clip:text;background-clip:text;color:transparent}
.skd .pn-sub{font:500 11.5px/1.45 var(--sans);color:#5f5872;margin:5px 0 10px}
.skd .pn-duyuru{display:flex;gap:11px;align-items:center;padding:13px;border-radius:18px;background:linear-gradient(120deg,#ece2fb,#f7e7f5 60%,#eee3fb);border:1px solid rgba(168,85,247,.3);margin-bottom:9px}
.skd .du-ic{width:40px;height:40px;border-radius:12px;background:#f5d6ec;color:#e3a3c9;display:grid;place-items:center;flex:none}
.skd .pn-duyuru small{display:block;font:800 8.5px var(--sans);letter-spacing:.16em;color:#3b3550}
.skd .pn-duyuru small span{font-weight:500;letter-spacing:.04em;margin-left:6px;color:#5f5872}
.skd .pn-duyuru b{display:block;margin-top:3px;font:800 17px var(--sans);letter-spacing:-.02em}
.skd .pn-duyuru b em{font-style:normal;color:#b8860b}
.skd .pn-stats{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.skd .pn-card{position:relative;background:rgba(255,255,255,.92);border:1px solid #fff;border-radius:16px;padding:11px;box-shadow:0 4px 12px -10px rgba(70,40,120,.4)}
.skd .pn-card.big{grid-row:span 2;display:flex;flex-direction:column}
.skd .st-ic{width:36px;height:36px;border-radius:11px;background:#fde7ef;border:1px solid #f7c6d7;color:#e11d48;display:grid;place-items:center;margin-bottom:8px}
.skd .st-l{display:flex;justify-content:space-between;align-items:center;font:600 11.5px var(--sans);color:var(--ink)}
.skd .st-c{color:#8b5cf6;font-style:normal;display:grid}
.skd .bars{display:flex;gap:2px;align-items:flex-end;margin-top:auto;height:16px}
.skd .bars i{width:4px;border-radius:2px;background:#e11d48}
.skd .bars i:nth-child(1){height:5px;opacity:.45}
.skd .bars i:nth-child(2){height:9px;opacity:.65}
.skd .bars i:nth-child(3){height:13px}
.skd .bars i:nth-child(4){height:16px}
.skd .st-v{font:700 24px var(--mono);margin-top:4px}
.skd .st-v.sm{font-size:17px;margin-top:8px}
.skd .pn-iade{display:flex;justify-content:space-between;align-items:center;margin-top:8px;padding:11px 12px;background:rgba(255,255,255,.92);border:1px solid #fff;border-radius:14px;font:600 11.5px var(--sans)}
.skd .pn-iade span{display:inline-flex;gap:7px;align-items:center}
.skd .pn-iade b{font:600 11.5px var(--mono);color:#6b6480}
.skd .pn-buy{margin-top:10px;background:rgba(255,255,255,.94);border:1px solid #fff;border-radius:18px;padding:13px 12px;box-shadow:0 6px 16px -12px rgba(70,40,120,.4)}
.skd .pb-head{display:flex;justify-content:space-between;align-items:center;gap:6px}
.skd .pb-head b{font:800 15.5px var(--sans);letter-spacing:-.02em}
.skd .pb-chip{display:inline-flex;gap:4px;align-items:center;font:600 10px var(--sans);color:#9d174d;background:#fce7f3;border:1px solid #f9a8d4;padding:4px 9px;border-radius:999px;white-space:nowrap}
.skd .pb-p{font:500 11px/1.4 var(--sans);color:#5f5872;margin-top:4px}
.skd .pb-lbl{display:block;margin:11px 0 6px;font:700 9px var(--sans);letter-spacing:.18em;color:#3b3550}
.skd .pb-search{display:flex;gap:8px;align-items:center;height:38px;padding:0 12px;border-radius:12px;border:1px solid #e6dff0;background:#fff;color:#8a839c;font:500 12px var(--sans)}
.skd .pb-tabs{display:flex;gap:6px;margin:9px 0}
.skd .pb-tabs span{font:600 11px var(--sans);padding:6px 11px;border-radius:999px;border:1px solid #e6dff0;color:#3b3550;background:#fff}
.skd .pb-tabs span.on{background:#f5e6f8;border-color:#e9b8e8;color:#701a75}
.skd .pb-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}
.skd .pb-svc{background:#fff;border:1px solid #eee8f5;border-radius:14px;padding:10px 2px 8px;display:flex;flex-direction:column;align-items:center;gap:6px;font:700 10.5px var(--sans);white-space:nowrap}
.skd .pb-ic{width:32px;height:32px;border-radius:9px;display:grid;place-items:center;color:#fff;font:800 15px var(--sans);flex:none}
.skd .pn-dim{position:absolute;inset:-10px;z-index:6;background:rgba(240,234,248,.35);-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);opacity:0;visibility:hidden;transition:opacity .5s,visibility 0s .5s}
.skd .pn-drawer{position:absolute;z-index:7;top:-2px;bottom:-10px;left:-10px;width:252px;background:linear-gradient(180deg,#fbf9fe,#f3edfa);border-radius:0 24px 24px 0;border:1px solid #fff;box-shadow:16px 0 40px -18px rgba(70,40,120,.45);display:flex;flex-direction:column;transform:translateX(-104%);transition:transform .65s cubic-bezier(.25,.8,.25,1)}
.skd [data-view=drawer] .pn-dim{opacity:1;visibility:visible;transition-delay:0s}
.skd [data-view=drawer] .pn-drawer{transform:none}
.skd .dr-head{display:flex;align-items:center;gap:10px;padding:14px 12px 12px 14px;border-bottom:1px solid #ece6f4}
.skd .dr-logo{width:38px;height:38px;border-radius:11px;background:linear-gradient(135deg,#c026d3,#6d28d9);color:#fff;display:grid;place-items:center;flex:none}
.skd .dr-logo svg{width:18px;height:18px}
.skd .dr-head b{display:block;font:700 15px var(--mono)}
.skd .dr-head small{display:block;font:500 7.5px var(--mono);letter-spacing:.12em;color:#6b6480;white-space:nowrap}
.skd .dr-x{margin-left:auto;width:32px;height:32px;border-radius:10px;border:1px solid #ece6f4;background:#fff;display:grid;place-items:center;color:#3b3550;flex:none}
.skd .dr-items{padding:8px 8px 0;flex:1}
.skd .dr-it{display:flex;align-items:center;gap:12px;height:37px;padding:0 12px;border-radius:12px;border:1px solid transparent;font:500 13px var(--sans);color:#2a2438;transition:background .3s,border-color .3s}
.skd .dr-it svg{color:#5b5470;flex:none}
.skd .dr-it.on{background:linear-gradient(90deg,#fbe4f1,#f3e8ff);border-color:#f0c2dc;box-shadow:inset 3px 0 0 #db2777;font-weight:600}
.skd .dr-it.on svg{color:#db2777}
.skd .dr-it.dash{border:1px dashed #e4dcef;color:#6b6480;margin-top:4px}
.skd [data-tel="1"] .dr-it.telnyx{background:#efe6fb;border-color:#d8c6f5}
.skd .dr-sec{display:flex;align-items:center;gap:8px;margin:10px 12px 4px;font:700 9px var(--sans);letter-spacing:.18em;color:#7e22ce}
.skd .dr-sec::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,#e9c6e9,transparent)}
.skd .dr-foot{padding:8px 10px 12px;border-top:1px solid #ece6f4}
.skd .dr-admin{display:flex;gap:10px;align-items:center;height:38px;padding:0 12px;border-radius:12px;background:#eef6ff;border:1px solid #d8e8fb;font:500 12.5px var(--sans);color:#2a2438}
.skd .dr-admin svg{color:#2563eb}
.skd .dr-out{display:flex;gap:10px;align-items:center;height:34px;padding:0 12px;margin-top:4px;font:500 12.5px var(--sans);color:#2a2438}
.skd .dr-out svg{color:#db2777}
.skd .md-overlay{position:absolute;inset:-10px;z-index:6;background:rgba(70,50,100,.22);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);opacity:0;visibility:hidden;transition:opacity .5s,visibility 0s .5s}
.skd .md{position:absolute;z-index:7;left:-2px;right:-2px;top:4px;background:#fff;border-radius:26px;padding:16px 14px 14px;box-shadow:0 30px 60px -20px rgba(60,30,110,.5);opacity:0;visibility:hidden;transform:translateY(24px) scale(.97);transition:opacity .5s,transform .6s cubic-bezier(.25,.8,.25,1),visibility 0s .6s}
.skd [data-view=modal] .md-overlay,.skd [data-view=busy] .md-overlay,.skd [data-view=result] .md-overlay,.skd [data-view=modal] .md,.skd [data-view=busy] .md,.skd [data-view=result] .md{opacity:1;visibility:visible;transition-delay:0s}
.skd [data-view=modal] .md,.skd [data-view=busy] .md,.skd [data-view=result] .md{transform:none}
.skd .md-top{display:flex;justify-content:space-between;align-items:flex-start}
.skd .md-kick{display:flex;gap:6px;align-items:center;font:600 8.5px var(--sans);letter-spacing:.2em;color:#3b3550}
.skd .md-kick i{width:8px;height:8px;border-radius:50%;background:#15803d;box-shadow:0 0 0 3px #dcfce7}
.skd .md-title{display:block;margin-top:5px;padding-bottom:2px;font:800 26px/1.05 var(--sans);letter-spacing:-.03em;background:linear-gradient(90deg,#7c3aed,#db2777);-webkit-background-clip:text;background-clip:text;color:transparent}
.skd .md-x{width:36px;height:36px;border-radius:50%;background:#f5f2f9;border:1px solid #ece6f4;display:grid;place-items:center;color:#3b3550;flex:none}
.skd .md-lbl{display:flex;justify-content:space-between;align-items:center;margin:14px 0 8px;font:600 9.5px var(--sans);letter-spacing:.18em;color:#3b3550}
.skd .md-lbl span:last-child{font:500 10px var(--mono);letter-spacing:0;color:#6b6480}
.skd .md-search{position:relative;display:flex;align-items:center;gap:9px;height:44px;padding:0 14px;border-radius:14px;border:1.5px solid #8b5cf6;background:#fffdf3;color:#db2777;font:500 13px var(--sans)}
.skd .md-q{color:var(--ink)}
.skd .md-ph{position:absolute;left:39px;color:#6b6480}
.skd .md-search .caret{display:none;height:16px;margin-left:-8px}
.skd .md-search.typed .md-ph{display:none}
.skd .md-search.typed .caret{display:inline-block}
.skd .md-list{position:relative;margin-top:10px;height:222px;border:1px solid #ece6f4;border-radius:14px;overflow:hidden;background:linear-gradient(180deg,#fff,#faf8fd)}
.skd .md-rows{padding:5px 16px 5px 5px}
.skd .md-row{display:flex;align-items:center;height:42px;padding:0 10px;border-radius:12px;border:1px solid transparent;font:500 12px var(--sans);color:#17121f;transition:background .3s,border-color .3s,box-shadow .3s}
.skd .md-row.hidden{display:none}
.skd .mr-n{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.skd .mr-s{font:500 9.5px var(--mono);color:#6b6480;margin:0 8px;white-space:nowrap}
.skd .mr-p{font:700 11px var(--mono);color:#17121f}
.skd .md-row.sel{background:linear-gradient(90deg,#f3edff,#fbf7ff);border-color:#a78bfa;box-shadow:inset 3px 0 0 #8b5cf6}
.skd .md-row.sel .mr-s{color:#db2777}
.skd .md-row.sel .mr-p{color:#7c3aed}
.skd .md-sb{position:absolute;right:3px;top:3px;bottom:3px;width:9px;border-radius:5px;background:#0f1720}
.skd .md-sb i{position:absolute;left:2px;top:6px;width:5px;height:22px;border-radius:3px;background:#2dd4bf}
.skd .md-picked{display:flex;justify-content:space-between;align-items:center;margin-top:10px;padding:12px 14px;border-radius:16px;border:1.5px solid #a78bfa;background:linear-gradient(120deg,#f6f0ff,#fbeff7)}
.skd .md-picked small{display:block;font:700 9px var(--sans);letter-spacing:.18em;color:#db2777}
.skd .pk-name{display:block;font:600 13px var(--sans);margin-top:4px;white-space:nowrap}
.skd .pk-r{text-align:right}
.skd .pk-stock{display:block;font:500 9px var(--mono);color:#3b3550;letter-spacing:0;white-space:nowrap}
.skd .pk-price{display:block;font:700 26px var(--mono);color:#7c3aed;margin-top:2px}
.skd .pk-price em{font-style:normal;font-size:13px;color:#db2777}
.skd .md-note{display:flex;gap:8px;margin-top:10px;font:500 10.5px/1.45 var(--sans);color:#5f5872}
.skd .md-note svg{flex:none;color:#7c3aed;margin-top:1px}
.skd .md-btns{display:flex;gap:9px;margin-top:12px}
.skd .md-cancel{flex:none;width:88px;height:48px;border-radius:999px;border:1px solid #e6dff0;display:grid;place-items:center;font:600 13.5px var(--sans);color:#3b3550;background:#fff}
.skd .md-buy{flex:1;height:48px;border-radius:999px;display:flex;align-items:center;justify-content:center;gap:8px;font:700 14px var(--sans);color:#1f0b24;background:linear-gradient(90deg,#7c3aed,#c026d3 55%,#e0457b);box-shadow:0 12px 24px -12px rgba(150,40,200,.7),inset 0 1px 0 rgba(255,255,255,.35);transition:opacity .3s}
.skd .md-buy .bl{display:inline-flex;gap:7px;align-items:center}
.skd .md-buy .spin{display:none;width:18px;height:18px;border-radius:50%;border:2.5px solid rgba(255,255,255,.5);border-top-color:#fff;animation:skd-spin360 .8s linear infinite}
.skd [data-view=busy] .md-sel .md-buy{opacity:.55}
.skd [data-view=busy] .md-sel .md-buy .spin{display:block}
@keyframes skd-spin360{to{transform:rotate(360deg)}}
.skd .md-res{display:none}
.skd [data-view=result] .md-sel{display:none}
.skd [data-view=result] .md-res{display:block;animation:skd-swap .5s ease}
.skd .rs-card{margin-top:14px;padding:14px;border-radius:18px;border:1.5px solid #a78bfa;background:linear-gradient(120deg,#f6f0ff,#fbeff7)}
.skd .rs-head{display:flex;align-items:center;gap:10px}
.skd .rs-head b{display:block;font:700 14px var(--sans)}
.skd .rs-head small{display:block;font:500 10.5px var(--mono);color:#6b6480;margin-top:2px}
.skd .rs-flag .fl{width:34px;height:24px;border-radius:5px}
.skd .rs-st{margin-left:auto;font:700 10px var(--sans);padding:5px 9px;border-radius:999px;background:#fef3c7;color:#b45309;border:1px solid #fcd34d;white-space:nowrap}
.skd .rs-st.ok,.skd [data-done="1"] .rs-st{background:#dcfce7;color:#15803d;border-color:#86efac}
.skd .rs-st .s2{display:none}
.skd [data-done="1"] .rs-st .s1{display:none}
.skd [data-done="1"] .rs-st .s2{display:inline}
.skd .rs-num{display:flex;justify-content:space-between;align-items:center;margin-top:14px;font:700 22px var(--mono);color:#17121f}
.skd .rs-num em{font-style:normal;width:36px;height:36px;border-radius:11px;background:#fff;border:1px solid #e6dff0;display:grid;place-items:center;color:#7c3aed}
.skd .rs-time{display:flex;justify-content:space-between;align-items:center;margin-top:10px;font:600 11px var(--sans);color:#6b6480}
.skd .rs-time b{font:700 13px var(--mono);color:#db2777}
.skd .rs-code{margin-top:12px;padding:12px 14px;border-radius:16px;background:#fff;border:1px solid #ece6f4}
.skd .rs-code>small{font:700 9.5px var(--sans);letter-spacing:.16em;color:#6b6480}
.skd .md-res .info-card{margin-top:10px;background:#fff;border-color:#ece6f4}
.skd .toast{position:absolute;left:50%;top:10px;z-index:16;display:flex;gap:9px;align-items:center;padding:9px 16px 9px 9px;border-radius:999px;background:#fff;box-shadow:0 14px 30px -10px rgba(30,15,60,.45),0 0 0 1px rgba(23,18,31,.06);font:700 13.5px var(--sans);color:var(--ink);white-space:nowrap;transform:translate(-50%,-16px) scale(.9);opacity:0;pointer-events:none;transition:transform .5s cubic-bezier(.2,.9,.3,1.3),opacity .35s}
.skd .toast.on{transform:translate(-50%,0);opacity:1}
.skd .toast i{width:24px;height:24px;border-radius:50%;background:#22c55e;color:#fff;display:grid;place-items:center;font-style:normal;font-size:13px;font-weight:800}
.skd .toast.on i{animation:skd-tick .5s .15s cubic-bezier(.2,.9,.3,1.5) both}
@keyframes skd-tick{from{transform:scale(.3)}to{transform:none}}
.skd .intro .in-note{display:block;margin-top:16px;font:500 10px var(--sans);color:#8a839c}
.skd .intro.fin .in-ic{box-shadow:0 14px 28px -10px rgba(22,163,74,.6)}
.skd .intro.fin.on .in-ic{animation:skd-tick .6s cubic-bezier(.2,.9,.3,1.5) both}
.skd .intro.swapin{animation:skd-swap .5s ease}
.skd [data-sel="1"] .md-picked{animation:skd-pickPop .9s ease}
@keyframes skd-pickPop{0%{transform:none;box-shadow:none}35%{transform:scale(1.03);box-shadow:0 0 0 5px rgba(167,139,250,.25)}100%{transform:none;box-shadow:none}}
.skd .rcv{position:absolute;inset:0;z-index:8;display:flex;flex-direction:column;background:#fff;border-radius:22px;padding:14px 14px 14px;box-shadow:0 10px 24px -16px rgba(70,40,120,.4);opacity:0;visibility:hidden;transform:scale(.97);transition:opacity .6s,transform .6s,visibility 0s .6s}
.skd [data-rcv="1"] .rcv{opacity:1;visibility:visible;transform:none;transition-delay:0s}
.skd .rcv-tag{align-self:center;font:700 9.5px var(--mono);letter-spacing:.16em;color:#7e22ce;background:#f3e8ff;padding:4px 10px;border-radius:999px}
.skd .rcv-head{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:10px;align-items:center;justify-items:center;margin-top:14px;padding-bottom:12px;border-bottom:1px solid #eee}
.skd .rcv-back{grid-row:span 2;align-self:center;justify-self:start;font:400 30px/1 var(--sans);color:#0a84ff}
.skd .rcv-av{width:46px;height:46px;border-radius:50%;background:#e9e9ee;display:grid;place-items:center;margin-left:-28px}
.skd .rcv-av .fl{width:22px;height:15px;border-radius:3px}
.skd .rcv-head b{grid-column:1/-1;margin-top:6px;font:600 14px var(--mono)}
.skd .rcv-head small{grid-column:1/-1;font:500 10.5px var(--sans);color:#8a8a8e}
.skd .rcv-body{flex:1;padding-top:16px}
.skd .rcv-bubble{max-width:82%;padding:10px 13px;border-radius:18px 18px 18px 4px;background:#e9e9eb;color:#111;font:400 14px/1.4 var(--sans);opacity:0;transform:translateY(10px)}
.skd [data-rcv="1"] .rcv-bubble{animation:skd-rcvIn .6s .5s cubic-bezier(.2,.9,.3,1.2) both}
@keyframes skd-rcvIn{from{opacity:0;transform:translateY(12px) scale(.95)}to{opacity:1;transform:none}}
.skd .rcv-sec{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;border-radius:16px;background:linear-gradient(135deg,#f6f0ff,#fff);border:1px solid rgba(168,85,247,.3);font:600 11.5px/1.45 var(--sans);color:#3b3550}
.skd .rcv-sec svg{flex:none;color:var(--purple)}
.skd .wav{position:absolute;inset:0;z-index:8;background:#fff;border-radius:22px;overflow:hidden;opacity:0;visibility:hidden;transition:opacity .6s,visibility 0s .6s}
.skd [data-view=wa] .wav{opacity:1;visibility:visible;transition-delay:0s}
.skd .wv-phone,.skd .wv-codev{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;text-align:center;padding:30px 22px 0;transition:opacity .5s}
.skd .wv-codev{opacity:0}
.skd [data-wv=code] .wv-phone,.skd [data-wv=verifying] .wv-phone,.skd [data-wv=ok] .wv-phone{opacity:0}
.skd [data-wv=code] .wv-codev,.skd [data-wv=verifying] .wv-codev,.skd [data-wv=ok] .wv-codev{opacity:1}
.skd .wv-t{font:600 18px var(--sans);color:#008069}
.skd .wv-p{margin-top:12px;font:400 12.5px/1.5 var(--sans);color:#54656f;max-width:240px}
.skd .wv-cty{display:flex;justify-content:space-between;width:230px;margin-top:26px;padding:8px 2px;border-bottom:2px solid #00a884;font:500 14px var(--sans);color:#111}
.skd .wv-cty span:last-child{color:#00a884}
.skd .wv-num{display:flex;gap:14px;width:230px;margin-top:10px}
.skd .wv-cc{width:58px;flex:none;padding:8px 0;border-bottom:1px solid #00a884;font:500 15px var(--sans);color:#111;text-align:left}
.skd .wv-in{flex:1;padding:8px 0;border-bottom:2px solid #00a884;font:500 15px var(--mono);color:#111;text-align:left;min-height:38px}
.skd .wv-in .caret{height:18px;background:#00a884}
.skd .wv-hint{margin-top:12px;font:400 11px var(--sans);color:#8696a0}
.skd .wv-sending{display:flex;gap:8px;align-items:center;margin-top:22px;font:500 12px var(--sans);color:#008069;opacity:0;transition:opacity .4s}
.skd [data-wv=sent] .wv-sending{opacity:1}
.skd .wv-sending .spin,.skd .wv-st .spin{display:inline-block;width:14px;height:14px;border-radius:50%;border:2px solid rgba(0,168,132,.3);border-top-color:#00a884;animation:skd-spin360 .8s linear infinite}
.skd .wv-btn{position:absolute;left:50%;bottom:34px;transform:translateX(-50%);padding:11px 30px;border-radius:999px;background:#00a884;color:#fff;font:600 14px var(--sans)}
.skd .wv-boxes{display:flex;gap:8px;align-items:flex-end;margin-top:28px}
.skd .wv-boxes span{width:26px;height:36px;border-bottom:2px solid #00a884;display:grid;place-items:center;font:500 22px var(--mono);color:transparent;transition:color .2s}
.skd .wv-boxes span.in{color:#111}
.skd .wv-boxes i{width:10px}
.skd .wv-st{position:relative;margin-top:26px;height:70px;width:100%}
.skd .wv-st>span{position:absolute;left:0;right:0;display:flex;flex-direction:column;align-items:center;gap:10px;font:500 13px var(--sans);color:#008069;opacity:0;transition:opacity .4s}
.skd .wv-st .v1{flex-direction:row;justify-content:center}
.skd [data-wv=verifying] .wv-st .v1{opacity:1}
.skd [data-wv=ok] .wv-st .v2{opacity:1}
.skd .wv-st .v2 b{width:46px;height:46px;border-radius:50%;background:#00a884;color:#fff;display:grid;place-items:center;font-size:22px}
.skd [data-wv=ok] .wv-st .v2 b{animation:skd-tick .55s cubic-bezier(.2,.9,.3,1.5) both}
.skd .toast{left:0;top:0;transform:translateY(-10px) scale(.9)}
.skd .toast.on{transform:none}
.skd .ctl{position:relative;z-index:3;display:flex;align-items:center;gap:6px;width:390px;margin-top:10px;padding:8px 12px 8px 8px;border-radius:999px;background:rgba(255,255,255,.85);border:1px solid #fff;box-shadow:0 10px 24px -14px rgba(70,40,120,.45)}
.skd .ctl button{flex:none;position:relative;width:34px;height:34px;border:0;border-radius:50%;background:transparent;color:#3b3550;display:grid;place-items:center;cursor:pointer;transition:background .2s}
.skd .ctl button:hover{background:#f1ebf8}
.skd .ctl button:focus-visible{outline:2px solid var(--purple);outline-offset:2px}
.skd .ctl button b{position:absolute;font:800 7.5px var(--sans);top:50%;left:50%;transform:translate(-50%,-38%)}
.skd .ctl .pp{width:40px;height:40px;background:var(--grad);color:#fff;box-shadow:0 8px 16px -8px rgba(192,76,240,.7)}
.skd .ctl .pp:hover{background:var(--grad);filter:brightness(1.08)}
.skd .scrub{flex:1;min-width:0;height:22px;margin:0 4px 0 6px;background:transparent;-webkit-appearance:none;appearance:none;cursor:pointer;--v:0%}
.skd .scrub::-webkit-slider-runnable-track{height:5px;border-radius:5px;background:linear-gradient(90deg,#a855f7 var(--v),#e6dff0 var(--v))}
.skd .scrub::-moz-range-track{height:5px;border-radius:5px;background:linear-gradient(90deg,#a855f7 var(--v),#e6dff0 var(--v))}
.skd .scrub::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;margin-top:-4.5px;border-radius:50%;background:#fff;border:2px solid #a855f7;box-shadow:0 2px 6px rgba(70,40,120,.3)}
.skd .scrub::-moz-range-thumb{width:12px;height:12px;border-radius:50%;background:#fff;border:2px solid #a855f7}
.skd .tm{flex:none;font:600 11px var(--mono);color:#6b6480;min-width:72px;text-align:right}
.skd .coach .cs{display:block;margin-top:3px;font:500 11.5px/1.35 var(--sans);color:#6b6480}
.skd .md2{position:absolute;z-index:7;left:-2px;right:-2px;top:4px;background:#fff;border-radius:26px;padding:16px 14px 16px;box-shadow:0 30px 60px -20px rgba(60,30,110,.5);opacity:0;visibility:hidden;transform:translateY(24px) scale(.97);transition:opacity .5s,transform .6s cubic-bezier(.25,.8,.25,1),visibility 0s .6s}
.skd [data-view=dial] .mcall,.skd [data-view=calling] .mcall,.skd [data-view=connected] .mcall,.skd [data-view=ended] .mcall,.skd [data-view=incoming] .mcall,.skd [data-view=inconn] .mcall,.skd [data-view=form] .msms,.skd [data-view=sending] .msms,.skd [data-view=sent] .msms{opacity:1;visibility:visible;transform:none;transition-delay:0s}
.skd [data-view=dial] .md-overlay,.skd [data-view=calling] .md-overlay,.skd [data-view=connected] .md-overlay,.skd [data-view=ended] .md-overlay,.skd [data-view=incoming] .md-overlay,.skd [data-view=inconn] .md-overlay,.skd [data-view=form] .md-overlay,.skd [data-view=sending] .md-overlay,.skd [data-view=sent] .md-overlay{opacity:1;visibility:visible;transition-delay:0s}
.skd .mc-lbl{display:flex;justify-content:space-between;align-items:center;margin:14px 0 7px;font:600 9.5px var(--sans);letter-spacing:.18em;color:#3b3550}
.skd .mc-from{display:flex;align-items:center;gap:10px;padding:11px 12px;border-radius:14px;border:1.5px solid #a78bfa;background:linear-gradient(120deg,#f6f0ff,#fbeff7)}
.skd .mc-from .fl,.skd .mc-to .fl,.skd .ms-in .fl{width:22px;height:15px;border-radius:3px}
.skd .mc-from b{font:700 14px var(--mono);white-space:nowrap}
.skd .msms .md-title{font-size:22px}
.skd .rs-head>div{min-width:0}
.skd .rs-head small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.skd .mc-from .rs-st{margin-left:auto}
.skd .mc-to{display:flex;align-items:center;gap:10px;height:48px;padding:0 14px;border-radius:14px;border:1.5px solid #8b5cf6;background:#fffdf3;font:600 17px var(--mono);color:var(--ink)}
.skd .mc-to .caret{height:18px}
.skd .mc-keys{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:12px}
.skd .mc-keys span{height:46px;border-radius:14px;background:#f6f3fa;border:1px solid #ece6f4;display:grid;place-items:center;font:600 18px var(--sans);color:#2a2438;transition:background .15s,transform .15s}
.skd .mc-keys span.pressed{background:#e9dcfb;transform:scale(.95)}
.skd .mc-go{margin-top:12px;height:50px;border-radius:999px;display:flex;align-items:center;justify-content:center;gap:9px;background:linear-gradient(90deg,#16a34a,#22c55e);color:#fff;font:700 15px var(--sans);box-shadow:0 12px 22px -12px rgba(22,163,74,.7)}
.skd .mc-call,.skd .mc-in{display:none;flex-direction:column;align-items:center;padding:16px 0 4px}
.skd [data-view=calling] .mc-dial,.skd [data-view=connected] .mc-dial,.skd [data-view=ended] .mc-dial,.skd [data-view=inconn] .mc-dial,.skd [data-view=incoming] .mc-dial{display:none}
.skd [data-view=calling] .mc-call,.skd [data-view=connected] .mc-call,.skd [data-view=ended] .mc-call,.skd [data-view=inconn] .mc-call,.skd [data-view=incoming] .mc-in{display:flex;animation:skd-swap .5s ease}
.skd .mc-av{position:relative;width:96px;height:96px;border-radius:50%;background:linear-gradient(135deg,#f3e8ff,#fce7f3);border:1.5px solid #e9d5ff;display:grid;place-items:center;margin-top:84px}
.skd .mc-in .mc-av{margin-top:70px}
.skd .mc-av>.fl{width:44px;height:30px;border-radius:5px}
.skd .mc-av .ring{border-color:rgba(168,85,247,.45);animation:none;opacity:0}
.skd [data-view=calling] .mc-call .ring,.skd .mc-in .ring{animation:skd-ringP 1.8s ease-out infinite;opacity:1}
.skd .mc-in .ring{border-color:rgba(34,197,94,.55)}
.skd .mc-n{margin-top:16px;font:700 22px var(--mono);color:var(--ink)}
.skd .mc-st{margin-top:6px;min-height:20px;font:600 14px var(--sans);color:#6b6480;font-variant-numeric:tabular-nums}
.skd [data-live="1"] .mc-st{color:#16a34a}
.skd [data-view=ended] .mc-st{color:#dc2626}
.skd .mc-via{margin-top:10px;display:inline-flex;gap:6px;align-items:center;font:600 11.5px var(--sans);color:#7e22ce;background:#f3e8ff;padding:5px 11px;border-radius:999px}
.skd .mc-via .fl{width:16px;height:11px;border-radius:2px}
.skd .mc-ctrls{display:flex;gap:16px;margin-top:24px}
.skd .mc-ctrls span{display:flex;flex-direction:column;align-items:center;gap:5px;font:500 10.5px var(--sans);color:#5f5872}
.skd .mc-ctrls svg{width:52px;height:52px;padding:13px;border-radius:50%;background:#f4f0f9;color:#3b3550;box-sizing:border-box}
.skd .mc-end{margin-top:22px;display:flex;align-items:center;gap:8px;height:48px;padding:0 24px;border-radius:999px;background:#ef4444;color:#fff;font:700 14px var(--sans)}
.skd .mc-end svg{width:22px;height:22px}
.skd .mc-intag{margin-top:2px;font:700 10px var(--mono);letter-spacing:.16em;color:#15803d;background:#dcfce7;padding:4px 10px;border-radius:999px}
.skd .mc-ans{display:flex;gap:46px;margin-top:30px}
.skd .mc-ans>span{display:flex;flex-direction:column;align-items:center;gap:7px}
.skd .mc-ans i{width:62px;height:62px;border-radius:50%;display:grid;place-items:center;color:#fff;font-style:normal}
.skd .mc-ans .decl i{background:#ef4444}
.skd .mc-ans .acc i{background:#22c55e;animation:skd-accPulse 1.2s ease-in-out infinite}
.skd .mc-ans b{font:600 12px var(--sans);color:#3b3550}
.skd .ms-sel{position:relative;display:flex;align-items:center;gap:8px;height:48px;padding:0 14px;border-radius:14px;border:1.5px solid #e6dff0;background:#fff;font:500 13px var(--sans);color:#6b6480;transition:border-color .3s}
.skd [data-drop="1"] .ms-sel{border-color:#8b5cf6}
.skd .ms-sv{display:none;align-items:center;gap:8px;color:var(--ink)}
.skd .ms-sv .fl,.skd .ms-opt .fl{width:20px;height:14px;border-radius:3px}
.skd .ms-sv b{font:600 13px var(--mono)}
.skd .ms-sv em{font-style:normal;font:700 9.5px var(--sans);color:#7e22ce;background:#f3e8ff;padding:3px 8px;border-radius:999px}
.skd [data-snd="1"] .ms-ph{display:none}
.skd [data-snd="1"] .ms-sv{display:flex}
.skd .ms-ar{margin-left:auto;color:#8b5cf6}
.skd .ms-drop{position:absolute;left:-1.5px;right:-1.5px;top:52px;z-index:3;background:#fff;border:1.5px solid #a78bfa;border-radius:14px;padding:5px;box-shadow:0 18px 30px -14px rgba(60,30,110,.45);opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .3s,transform .3s,visibility 0s .3s}
.skd [data-drop="1"] .ms-drop{opacity:1;visibility:visible;transform:none;transition-delay:0s}
.skd .ms-opt{display:flex;align-items:center;gap:9px;height:40px;padding:0 10px;border-radius:10px;color:var(--ink)}
.skd .ms-opt b{font:600 12px var(--mono)}
.skd .ms-opt span{margin-left:auto;font:500 10.5px var(--sans);color:#6b6480}
.skd .ms-opt.pick{background:#f3edff}
.skd .ms-in{display:flex;align-items:center;gap:9px;height:48px;padding:0 14px;border-radius:14px;border:1.5px solid #e6dff0;background:#fff;font:600 15px var(--mono);color:var(--ink);transition:border-color .3s,background .3s}
.skd .ms-msg{min-height:92px;padding:12px 14px;border-radius:14px;border:1.5px solid #e6dff0;background:#fff;font:500 13.5px/1.5 var(--sans);color:var(--ink);transition:border-color .3s,background .3s}
.skd [data-field=rcp] .ms-in,.skd [data-field=msg] .ms-msg{border-color:#8b5cf6;background:#fffdf3}
.skd .ms-in .caret,.skd .ms-msg .caret{display:none;height:17px}
.skd [data-field=rcp] .ms-in .caret,.skd [data-field=msg] .ms-msg .caret{display:inline-block}
.skd .ms-cnt{font:500 10px var(--mono);letter-spacing:0;color:#6b6480}
.skd [data-view=sending] .ms-send{opacity:.55}
.skd [data-view=sending] .ms-send .spin{display:block}
.skd .ms-res{display:none}
.skd [data-view=sent] .ms-form{display:none}
.skd [data-view=sent] .ms-res{display:block;animation:skd-swap .5s ease}
.skd .ms-prev{margin:12px 0 0 34px;padding:11px 13px;border-radius:16px 16px 4px 16px;background:linear-gradient(90deg,#7c3aed,#c026d3);color:#fff;font:500 13px/1.45 var(--sans)}
.skd .ms-res .info-card{background:#fff;border-color:#ece6f4}
.skd .rs-head .pb-ic svg{width:17px;height:17px}
.skd .scene[data-scene=sim] .md,.skd .scene[data-scene=sim] .mcall{top:-2px;bottom:-2px;display:flex;flex-direction:column}
.skd .scene[data-scene=sim] .md-top{flex:none}
.skd .scene[data-scene=sim] .md-sel{flex:1;min-height:0;display:flex;flex-direction:column}
.skd .scene[data-scene=sim] .md-list{flex:1;height:auto;min-height:0}
.skd .scene[data-scene=sim] .md-sel .md-btns{margin-top:12px}
.skd .scene[data-scene=sim][data-view=result] .md-res{display:flex;flex-direction:column;flex:1;min-height:0}
.skd .rs-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:auto}
.skd .rs-tiles>div{display:flex;flex-direction:column;align-items:center;gap:5px;padding:13px 6px 12px;border-radius:16px;background:#faf7fd;border:1px solid #ece6f4;text-align:center}
.skd .rs-tiles i{width:38px;height:38px;border-radius:12px;background:#f3e8ff;color:#7c3aed;display:grid;place-items:center;font-style:normal}
.skd .rs-tiles i svg{width:19px;height:19px}
.skd .rs-tiles b{font:700 12.5px var(--sans);color:var(--ink)}
.skd .rs-tiles small{font:500 10px/1.3 var(--sans);color:#6b6480}
.skd .scene[data-scene=sim] .md-res .md-btns{margin-top:14px}
.skd .mcall .mc-dial{flex:1;display:flex;flex-direction:column}
.skd .mcall .mc-keys{gap:9px}
.skd .mcall .mc-keys span{height:58px;font-size:20px}
.skd .mcall .mc-go{margin-top:14px}
.skd .mcall .mc-call,.skd .mcall .mc-in{flex:1;padding:0 0 10px}
.skd [data-view=calling] .mcall .mc-call,.skd [data-view=connected] .mcall .mc-call,.skd [data-view=ended] .mcall .mc-call,.skd [data-view=inconn] .mcall .mc-call,.skd [data-view=incoming] .mcall .mc-in{display:flex}
.skd .mcall .mc-av{width:124px;height:124px;margin-top:auto}
.skd .mcall .mc-av>.fl{width:54px;height:37px;border-radius:6px}
.skd .mcall .mc-n{margin-top:20px;font-size:25px}
.skd .mcall .mc-st{margin-top:8px;font-size:15px}
.skd .mcall .mc-via{margin-top:12px;font-size:12px}
.skd .mcall .mc-ctrls{margin-top:auto;gap:22px}
.skd .mcall .mc-ctrls svg{width:60px;height:60px;padding:16px}
.skd .mcall .mc-end{margin-top:26px;height:54px;padding:0 30px;font-size:15px}
.skd .mcall .mc-intag{margin-top:14px}
.skd .mcall .mc-ans{margin-top:auto;margin-bottom:18px;gap:70px}
.skd .mcall .mc-ans i{width:70px;height:70px}
.skd .scene[data-scene=sim][data-view=result] .md-sel{display:none}
.skd .scene[data-scene=sim][data-view=calling] .mcall .mc-dial,.skd .scene[data-scene=sim][data-view=connected] .mcall .mc-dial,.skd .scene[data-scene=sim][data-view=ended] .mcall .mc-dial,.skd .scene[data-scene=sim][data-view=incoming] .mcall .mc-dial,.skd .scene[data-scene=sim][data-view=inconn] .mcall .mc-dial{display:none}
.skd .in-hl{display:flex;flex-direction:column;align-items:center;gap:9px;margin-top:16px}
.skd .in-hlb{display:inline-flex;align-items:center;gap:9px;padding:12px 20px;border-radius:999px;background:linear-gradient(90deg,#7c3aed,#c026d3 55%,#e0457b);color:#fff;box-shadow:0 14px 26px -12px rgba(150,40,200,.75)}
.skd .in-hlb b{font:800 16px var(--sans);letter-spacing:-.01em;color:#fff;margin:0}
.skd .in-hl small{font:700 12.5px var(--sans);color:#15803d;letter-spacing:.01em;margin:0}
.skd .intro.on .in-hlb{animation:skd-hlPop .7s .35s cubic-bezier(.2,.9,.3,1.4) both}
.skd .intro.on .in-hl small{animation:skd-hlPop .6s .7s ease both}
@keyframes skd-hlPop{from{opacity:0;transform:translateY(8px) scale(.9)}to{opacity:1;transform:none}}
.skd .ctl{width:auto;max-width:260px;gap:2px;margin-top:6px;padding:3px 10px 3px 3px;box-shadow:0 6px 14px -10px rgba(70,40,120,.4)}
.skd .ctl [data-a=prev],.skd .ctl [data-a=next]{display:none}
.skd .ctl button{width:26px;height:26px}
.skd .ctl button svg{width:14px;height:14px}
.skd .ctl button b{font-size:6px}
.skd .ctl .pp{width:26px;height:26px;box-shadow:none}
.skd .ctl .pp svg{width:11px;height:11px}
.skd .scrub{width:110px;flex:none;height:16px;margin:0 6px 0 4px}
.skd .scrub::-webkit-slider-runnable-track{height:3px}
.skd .scrub::-moz-range-track{height:3px}
.skd .scrub::-webkit-slider-thumb{width:10px;height:10px;margin-top:-3.5px;border-width:1.5px}
.skd .scrub::-moz-range-thumb{width:8px;height:8px;border-width:1.5px}
.skd .tm{min-width:0;font-size:9.5px}
.skd .ctl{display:inline-flex;width:auto;max-width:none;gap:0;padding:3px;white-space:nowrap;transition:padding .3s}
.skd .ctl>*:not(.pp){flex:none;max-width:0;opacity:0;overflow:hidden;margin:0;transition:max-width .35s ease,opacity .25s ease,margin .35s ease}
.skd .ctl:hover,.skd .ctl:focus-within{padding:3px 4px}
.skd .ctl:hover>*:not(.pp),.skd .ctl:focus-within>*:not(.pp){opacity:1}
.skd .ctl:hover [data-a=back],.skd .ctl:focus-within [data-a=back],.skd .ctl:hover [data-a=fwd],.skd .ctl:focus-within [data-a=fwd]{max-width:26px}
.skd .ctl:hover [data-a=back],.skd .ctl:focus-within [data-a=back]{margin-right:2px}
.skd .ctl:hover [data-a=fwd],.skd .ctl:focus-within [data-a=fwd]{margin-left:2px}
.skd .ctl .scrub{width:110px}
.skd .ctl:hover .scrub,.skd .ctl:focus-within .scrub{max-width:110px;margin:0 6px 0 6px}
.skd .ctl .tm{width:auto;overflow:hidden}
.skd .ctl:hover .tm,.skd .ctl:focus-within .tm{max-width:90px;margin-right:8px}
.skd .in-hli{display:grid}
.skd .in-hl[data-tone=pink] .in-hlb{background:linear-gradient(90deg,#be185d,#ec4899 55%,#f472b6);box-shadow:0 14px 26px -12px rgba(219,39,119,.7)}
.skd .in-hl[data-tone=pink] small{color:#be185d}
.skd .in-hl[data-tone=green] .in-hlb{background:linear-gradient(90deg,#15803d,#16a34a 50%,#22c55e);box-shadow:0 14px 26px -12px rgba(22,163,74,.7)}
.skd .in-hl[data-tone=green] small{color:#15803d}
.skd .howto{position:absolute;inset:-12px;z-index:8;display:flex;flex-direction:column;justify-content:center;padding:0 18px;background:rgba(248,244,253,.78);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);opacity:0;visibility:hidden;transition:opacity .5s,visibility 0s .5s}
.skd [data-ht="1"] .howto,.skd [data-ht="2"] .howto,.skd [data-ht="3"] .howto{opacity:1;visibility:visible;transition-delay:0s}
.skd .ht-kick{align-self:center;font:700 10px var(--mono);letter-spacing:.2em;color:#7e22ce;background:#f3e8ff;padding:5px 12px;border-radius:999px}
.skd .ht-title{display:block;margin:12px 0 20px;text-align:center;font:800 20px/1.25 var(--sans);letter-spacing:-.02em;color:var(--ink)}
.skd .ht-steps{position:relative;display:flex;flex-direction:column;gap:12px}
.skd .ht-steps::before{content:"";position:absolute;left:29px;top:30px;bottom:30px;width:2px;background:#e6dff0}
.skd .ht-s{position:relative;display:flex;align-items:center;gap:13px;padding:13px 14px;border-radius:18px;background:#fff;border:1.5px solid #ece6f4;box-shadow:0 8px 18px -14px rgba(70,40,120,.45);opacity:.55;transform:scale(.97);transition:opacity .4s,transform .4s,border-color .4s,box-shadow .4s}
.skd .ht-s>i{flex:none;position:relative;z-index:1;width:32px;height:32px;border-radius:50%;background:#f3eef9;color:#7c3aed;display:grid;place-items:center;font:800 14px var(--sans);font-style:normal;transition:background .4s,color .4s}
.skd .ht-s b{display:block;font:800 15px var(--sans);color:var(--ink)}
.skd .ht-s small{display:block;margin-top:2px;font:500 11px var(--sans);color:#6b6480}
.skd .ht-s>em{margin-left:auto;width:24px;height:24px;border-radius:50%;background:#22c55e;color:#fff;display:grid;place-items:center;font:800 12px var(--sans);font-style:normal;opacity:0;transform:scale(.4);transition:opacity .3s,transform .4s cubic-bezier(.2,.9,.3,1.5)}
.skd [data-ht="1"] .ht-s[data-i="1"],.skd [data-ht="2"] .ht-s[data-i="2"],.skd [data-ht="3"] .ht-s[data-i="3"]{opacity:1;transform:none;border-color:#a78bfa;box-shadow:0 0 0 4px rgba(167,139,250,.18),0 12px 24px -14px rgba(120,60,200,.5)}
.skd [data-ht="1"] .ht-s[data-i="1"]>i,.skd [data-ht="2"] .ht-s[data-i="2"]>i,.skd [data-ht="3"] .ht-s[data-i="3"]>i{background:var(--grad);color:#fff}
.skd [data-ht="2"] .ht-s[data-i="1"],.skd [data-ht="3"] .ht-s[data-i="1"],.skd [data-ht="3"] .ht-s[data-i="2"]{opacity:1;transform:none}
.skd [data-ht="2"] .ht-s[data-i="1"]>em,.skd [data-ht="3"] .ht-s[data-i="1"]>em,.skd [data-ht="3"] .ht-s[data-i="2"]>em{opacity:1;transform:none}
.skd [data-ht="2"] .ht-s[data-i="1"]>i,.skd [data-ht="3"] .ht-s[data-i="1"]>i,.skd [data-ht="3"] .ht-s[data-i="2"]>i{background:#dcfce7;color:#15803d}
.skd [data-ht="3"] .ht-s[data-i="3"]{animation:skd-htPulse 1.2s ease-in-out infinite}
@keyframes skd-htPulse{50%{box-shadow:0 0 0 7px rgba(167,139,250,.12),0 12px 24px -14px rgba(120,60,200,.5)}}
.skd .prog{position:relative;z-index:3;margin-top:44px;display:flex;gap:10px;width:390px}
.skd .prog button{flex:1;background:none;border:0;cursor:pointer;padding:6px 2px;text-align:left;font:600 12px var(--sans);color:#7a7290;border-radius:8px}
.skd .track{display:block;height:4px;border-radius:4px;background:rgba(124,92,190,.18);overflow:hidden}
.skd .fill{display:block;height:100%;background:var(--grad);transform:scaleX(0);transform-origin:left}
.skd .lbl{display:block;margin-top:8px;transition:color .3s}
.skd .prog button[aria-current=true] .lbl{color:var(--ink)}
.skd .prog button:focus-visible{outline:2px solid var(--purple);outline-offset:3px}
.skd.is-offscreen *,.skd.is-offscreen *::before,.skd.is-offscreen *::after{animation-play-state:paused!important}
@media (prefers-reduced-motion:reduce){.skd:not(.skd-force-motion) *,.skd:not(.skd-force-motion) *::before,.skd:not(.skd-force-motion) *::after{animation:none!important;transition:none!important}}

/* ---------- bileşen kabı: tasarım tuvali 328px genişlikte çizilir, kaba göre ölçeklenir ---------- */
.skd.skd-root{position:relative;width:100%;height:100%;overflow:hidden;background:linear-gradient(180deg,#e9e5f2 0%,#f2eff8 45%,#ebe7f3 100%)}
.skd .skd-screen{position:absolute;left:0;top:0;width:328px;height:728px;border:0!important;border-radius:0!important;transform-origin:0 0;overflow:hidden}
.skd.skd-no-island .island{display:none}
.skd.skd-no-statusbar .sb{visibility:hidden}
.skd .skd-bar-inside{position:absolute;left:0;right:0;bottom:0;z-index:40;padding:8px 14px 12px;background:#ebe7f3;border-top:1px solid rgba(124,92,190,.12)}
/* ---------- hikaye çubukları + oynatma barı ---------- */
.skd.skd-bar{display:flex;flex-direction:column;align-items:center;gap:8px;width:100%}
.skd.skd-bar .prog{width:100%;max-width:390px;margin:0}
.skd.skd-bar .ctl{margin:0}
.skd.skd-bar .lbl{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.skd .skd-bar-inside .skd-bar{gap:6px}
.skd .skd-bar-inside .prog{gap:6px}
.skd .skd-bar-inside .prog button{padding:4px 0}
.skd .skd-bar-inside .lbl{margin-top:5px;font-size:10px}