/* Kurulum sahneleri: nerdesin/ui/onboarding.css dosyasından otomatik üretildi.
   Elle düzenleme; tools/sync_site_ui.py ile yeniden üret. */
@keyframes ui-ring { 0% { transform: scale(.4); opacity: .9; } 100% { transform: scale(4.2); opacity: 0; } }
@keyframes ui-blob { to { transform: translate(80px, 60px) scale(1.15); } }
.ui .ob-stage {position: relative; overflow: hidden; background: radial-gradient(120% 100% at 30% 20%, #1d47b8 0%, var(--navy-800) 55%, var(--navy-950) 100%);}
.ui .ob-stage::before {content: ""; position: absolute; inset: 0; opacity: .5; background-image: radial-gradient(rgba(122,162,255,.22) 1px, transparent 1px); background-size: 22px 22px;}
.ui .ob-scene {position: absolute; inset: 0; display: grid; place-items: center; opacity: 0; transform: scale(.96) translateY(10px); transition: opacity .5s var(--ease), transform .6s var(--ease); pointer-events: none;}
.ui .ob-scene.on {opacity: 1; transform: none;}
@keyframes ui-textIn { from { opacity: 0; transform: translateX(14px); } }
@keyframes ui-spin { to { transform: rotate(360deg); } }
.ui .sc-phone {position: relative; width: 210px; height: 420px; border-radius: 40px; padding: 10px; background: linear-gradient(145deg, #2a3550, #0c1428); box-shadow: 0 30px 60px -20px rgba(0,0,0,.7), inset 0 0 0 2px rgba(255,255,255,.08);}
.ui .ph-notch {position: absolute; top: 18px; left: 50%; width: 64px; height: 18px; margin-left: -32px; border-radius: 12px; background: #000; z-index: 3;}
.ui .ph-screen {position: relative; width: 100%; height: 100%; border-radius: 31px; overflow: hidden; background: #0b1b3f;}
.ui .ph-screen.wall {background: radial-gradient(120% 80% at 30% 10%, #6d8dff, #3b2bd6 50%, #0b1b3f);}
.ui .ph-screen.black {background: #000; display: grid; place-items: center;}
.ui .sc-map {position: relative; width: 320px; height: 220px;}
.ui .sc-route {width: 100%; height: 100%; position: absolute; inset: 0;}
.ui .sc-route path {fill: none; stroke: rgba(255,255,255,.75); stroke-width: 3; stroke-dasharray: 8 9; stroke-linecap: round; animation: ui-dash 1.2s linear infinite;}
@keyframes ui-dash { to { stroke-dashoffset: -34; } }
.ui .sc-dot {position: absolute; width: 14px; height: 14px; margin: -7px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 6px rgba(255,255,255,.15);}
.ui .sc-dot.a {left: 60px; top: 170px;}
.ui .sc-dot.b {left: 262px; top: 48px; background: var(--blue-400); box-shadow: 0 0 0 8px rgba(61,116,255,.3); animation: ui-pulseDot 1.6s infinite;}
@keyframes ui-pulseDot { 50% { box-shadow: 0 0 0 16px rgba(61,116,255,0); } }
.ui .sc-city {position: absolute; font-size: 12px; font-weight: 800; color: #c9d6ff; letter-spacing: .04em;}
.ui .sc-city.a {left: 34px; top: 186px;}
.ui .sc-city.b {left: 240px; top: 12px;}
.ui .sc-travel {position: absolute; width: 34px; left: 0; top: 0; filter: drop-shadow(0 8px 12px rgba(0,0,0,.4)); offset-path: path("M60 170 C 110 160, 120 90, 170 95 S 250 60, 262 48"); offset-rotate: 0deg; offset-anchor: 50% 100%; animation: ui-travel 3.2s var(--ease) infinite;}
@keyframes ui-travel { 0% { offset-distance: 0%; opacity: 0; } 10% { opacity: 1; } 75% { offset-distance: 100%; } 90%, 100% { offset-distance: 100%; opacity: 0; } }
.ui .sc-store {text-align: center; color: #fff;}
.ui .sc-tile {width: 120px; height: 120px; border-radius: 28px; margin: 0 auto; display: grid; place-items: center; background: linear-gradient(160deg, #f4f6fb, #c9d1e6); box-shadow: 0 24px 50px -16px rgba(0,0,0,.6); animation: ui-float 3s ease-in-out infinite;}
.ui .sc-tile svg {width: 60px; height: 60px; color: #0b1b3f; stroke-width: 1.4;}
@keyframes ui-float { 50% { transform: translateY(-8px); } }
.ui .sc-dl {width: 160px; height: 6px; border-radius: 6px; margin: 30px auto 14px; background: rgba(255,255,255,.15); overflow: hidden;}
.ui .sc-dl i {display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--blue-400), #fff); border-radius: inherit; animation: ui-dl 2.6s ease-in-out infinite;}
@keyframes ui-dl { 70%, 100% { width: 100%; } }
.ui .sc-store p {margin: 0; font-weight: 700; color: #c9d6ff;}
.ui .sc-connect {position: relative; width: 380px; height: 240px;}
.ui .sc-laptop {position: absolute; left: 0; top: 30px;}
.ui .lp-screen {width: 210px; height: 136px; border-radius: 12px 12px 4px 4px; border: 7px solid #26314b; background: linear-gradient(160deg, #13285a, #071330); display: grid; place-items: center;}
.ui .lp-screen img {width: 120px; opacity: .9;}
.ui .lp-base {position: relative; width: 250px; height: 12px; margin-left: -20px; border-radius: 0 0 14px 14px; background: linear-gradient(#3a4767, #1b2440);}
.ui .lp-port {position: absolute; right: 20px; top: 4px; width: 10px; height: 4px; border-radius: 2px; background: #0a0f1d;}
.ui .sc-cable {position: absolute; left: 216px; top: 172px; width: 100px; height: 40px;}
.ui .sc-cable svg {width: 100%; height: 100%; overflow: visible;}
.ui .sc-cable path {fill: none; stroke: #d9e1f5; stroke-width: 3; stroke-linecap: round; stroke-dasharray: 140; stroke-dashoffset: 140; animation: ui-cableDraw 2.4s var(--ease) infinite;}
@keyframes ui-cableDraw { 45%, 100% { stroke-dashoffset: 0; } }
.ui .sc-mini {position: absolute; right: 0; top: 40px; width: 82px; height: 164px; border-radius: 18px; padding: 5px; background: linear-gradient(145deg, #2a3550, #0c1428); box-shadow: 0 20px 40px -14px rgba(0,0,0,.7), inset 0 0 0 1.5px rgba(255,255,255,.08); animation: ui-phoneIn 2.4s var(--ease) infinite;}
.ui .sc-mini .ph-notch {top: 9px; width: 26px; height: 8px; margin-left: -13px;}
.ui .sc-mini .ph-screen {border-radius: 14px; display: grid; place-items: center;}
@keyframes ui-phoneIn { 0% { transform: translateY(12px); opacity: .6; } 45%, 100% { transform: none; opacity: 1; } }
.ui .ph-bolt {font-size: 24px; opacity: 0; animation: ui-bolt 2.4s infinite;}
@keyframes ui-bolt { 0%, 50% { opacity: 0; transform: scale(.5); } 60% { opacity: 1; transform: scale(1.15); } 100% { opacity: 1; transform: none; } }
.ui .sc-detect {position: absolute; right: 19px; top: 0; width: 44px; height: 44px; border-radius: 50%; background: var(--green); display: grid; place-items: center; box-shadow: 0 0 0 10px rgba(18,183,106,.2); opacity: 0; transform: scale(.4); transition: all .5s var(--ease);}
.ui .sc-detect svg {width: 24px; height: 24px; color: #fff; stroke-width: 3;}
.ui .ob-stage.detected .sc-detect {opacity: 1; transform: none;}
.ui .ob-stage.detected .sc-cable path {animation: none; stroke-dashoffset: 0; stroke: #12b76a;}
.ui .ob-stage.detected .sc-mini, .ui .ob-stage.detected .ph-bolt {animation: none; opacity: 1; transform: none;}
.ui .ph-alert {position: absolute; left: 14px; right: 14px; top: 34%; border-radius: 16px; overflow: hidden; text-align: center; background: rgba(242,244,250,.94); color: #0b1b3f; animation: ui-alertIn .6s .2s var(--ease) both;}
@keyframes ui-alertIn { from { opacity: 0; transform: scale(1.15); } }
.ui .ph-alert b {display: block; font-size: 12px; padding: 14px 12px 4px;}
.ui .ph-alert p {margin: 0; font-size: 9.5px; line-height: 1.35; padding: 0 12px 12px; color: #4a5878;}
.ui .ph-alert-btns {display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid #d4d9e6; font-size: 12px;}
.ui .ph-alert-btns span {padding: 10px 0; color: #1f5bff;}
.ui .ph-alert-btns span + span {border-left: 1px solid #d4d9e6;}
.ui .ph-alert-btns .trust {font-weight: 800; animation: ui-tapHl 2.6s infinite;}
@keyframes ui-tapHl { 0%, 55% { background: transparent; } 62%, 75% { background: #dfe5f3; } }
.ui .ph-finger {position: absolute; width: 34px; height: 34px; border-radius: 50%; background: rgba(255,255,255,.55); border: 2px solid #fff; box-shadow: 0 6px 18px rgba(0,0,0,.35); left: 30px; top: 59%; animation: ui-finger 2.6s var(--ease) infinite;}
@keyframes ui-finger {
  0% { transform: translate(50px, 90px); opacity: 0; }
  30% { opacity: 1; }
  50% { transform: none; }
  60% { transform: scale(.8); }
  70% { transform: none; opacity: 1; }
  100% { transform: none; opacity: 0; }
}
.ui .ph-screen.settings {background: #f2f3f8; color: #0b1b3f; padding: 44px 12px 0; font-size: 11px;}
.ui .st-head {font-weight: 800; color: #1f5bff; margin-bottom: 12px;}
.ui .st-group {background: #fff; border-radius: 12px; overflow: hidden;}
.ui .st-row {display: flex; align-items: center; justify-content: space-between; padding: 11px 12px; font-weight: 600;}
.ui .st-row + .st-row {border-top: 1px solid #eceef5;}
.ui .st-row span {color: #8a96b0; font-weight: 500;}
.ui .st-cap {font-size: 9px; font-weight: 700; color: #8a96b0; margin: 14px 4px 6px; letter-spacing: .05em;}
.ui .st-row.hl {animation: ui-rowHl 4.2s infinite;}
@keyframes ui-rowHl { 0%, 20% { background: #fff; } 28%, 40% { background: #eef3ff; } 50%, 100% { background: #fff; } }
.ui .st-toggle {width: 34px; height: 20px; border-radius: 20px; background: #d6dcea; position: relative; animation: ui-tgBg 4.2s infinite;}
.ui .st-toggle::after {content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); animation: ui-tgKnob 4.2s infinite;}
@keyframes ui-tgBg { 0%, 30% { background: #d6dcea; } 36%, 100% { background: #34c759; } }
@keyframes ui-tgKnob { 0%, 30% { transform: none; } 36%, 100% { transform: translateX(14px); } }
.ui .st-sheet {position: absolute; left: 10px; right: 10px; bottom: 10px; border-radius: 16px; background: #fff; padding: 14px; text-align: center; box-shadow: 0 -10px 30px rgba(0,0,0,.15); animation: ui-sheet 4.2s var(--ease) infinite;}
.ui .st-sheet b {display: block; font-size: 11px; margin-bottom: 10px;}
.ui .st-sheet span {display: block; padding: 8px; border-radius: 10px; background: #1f5bff; color: #fff; font-weight: 700;}
@keyframes ui-sheet { 0%, 45% { transform: translateY(130%); } 55%, 90% { transform: none; } 100% { transform: translateY(130%); } }
.ui .ph-finger.dm {left: auto; right: 14px; top: 166px; animation: ui-fingerDm 4.2s var(--ease) infinite;}
@keyframes ui-fingerDm {
  0% { transform: translate(20px, 80px); opacity: 0; }
  15% { opacity: 1; }
  28% { transform: none; }
  32% { transform: scale(.8); }
  36% { transform: none; }
  50% { opacity: 1; transform: translate(-60px, 160px); }
  62% { transform: translate(-60px, 190px); }
  66% { transform: translate(-60px, 190px) scale(.8); }
  72% { transform: translate(-60px, 190px); opacity: 1; }
  80%, 100% { opacity: 0; transform: translate(-60px, 190px); }
}
.ui .sc-spinner {width: 34px; height: 34px; border-radius: 50%; border: 3px solid rgba(255,255,255,.15); border-top-color: #fff; animation: ui-spin 1s linear infinite;}
.ui .sc-prep {position: relative; width: 200px; height: 200px;}
.ui .sc-prep svg {width: 100%; height: 100%; transform: rotate(-90deg);}
.ui .sc-prep circle {fill: none; stroke-width: 6;}
.ui .sc-prep .bg {stroke: rgba(255,255,255,.1);}
.ui .sc-prep .fg {stroke: var(--blue-400); stroke-linecap: round; stroke-dasharray: 326.7; stroke-dashoffset: 326.7; transition: stroke-dashoffset .8s var(--ease); filter: drop-shadow(0 0 8px rgba(61,116,255,.8));}
.ui .sc-prep img {position: absolute; left: 50%; top: 50%; width: 54px; margin: -40px 0 0 -27px; animation: ui-float 2.4s ease-in-out infinite;}
.ui .ph-screen.map {background: linear-gradient(90deg, transparent 47%, #ffd89a 47%, #ffd89a 53%, transparent 53%), linear-gradient(0deg, transparent 60%, #fff 60%, #fff 64%, transparent 64%), linear-gradient(35deg, transparent 30%, #fff 30%, #fff 33%, transparent 33%), linear-gradient(160deg, #eef1e6, #e4ead9);}
.ui .mp-pin {position: absolute; left: 50%; top: 46%; width: 34px; height: 34px; margin: -40px 0 0 -17px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); background: var(--blue-500); box-shadow: 0 8px 14px rgba(0,0,0,.25); animation: ui-pinDrop 1s .3s var(--ease) both;}
.ui .mp-pin::after {content: ""; position: absolute; left: 11px; top: 11px; width: 12px; height: 12px; border-radius: 50%; background: #fff;}
@keyframes ui-pinDrop { from { transform: translateY(-80px) rotate(-45deg); opacity: 0; } 70% { transform: translateY(4px) rotate(-45deg); } to { transform: rotate(-45deg); } }
.ui .mp-rings i {position: absolute; left: 50%; top: 46%; width: 30px; height: 30px; margin: -15px; border-radius: 50%; border: 2px solid var(--blue-500); animation: ui-ring 2s ease-out infinite;}
.ui .mp-rings i + i {animation-delay: 1s;}
.ui .mp-chip {position: absolute; left: 50%; bottom: 40px; transform: translateX(-50%); white-space: nowrap; padding: 8px 12px; border-radius: 12px; background: #fff; font-size: 11px; font-weight: 800; color: #0b1b3f; box-shadow: 0 8px 20px rgba(0,0,0,.15); animation: ui-chipIn .6s .9s var(--ease) both;}
@keyframes ui-chipIn { from { opacity: 0; transform: translate(-50%, 10px); } }
.ui .sc-confetti {position: absolute; inset: 0; overflow: hidden;}
.ui .sc-confetti i {position: absolute; top: -20px; width: 8px; height: 14px; border-radius: 2px; animation: ui-confetti 3s linear infinite;}
.ui .sc-confetti i:nth-child(3n) {background: #3d74ff;}
.ui .sc-confetti i:nth-child(3n+1) {background: #12b76a;}
.ui .sc-confetti i:nth-child(3n+2) {background: #f79009;}
.ui .sc-confetti i:nth-child(1) {left: 8%; animation-delay: 0s;}
.ui .sc-confetti i:nth-child(2) {left: 16%; animation-delay: .6s;}
.ui .sc-confetti i:nth-child(3) {left: 24%; animation-delay: 1.4s;}
.ui .sc-confetti i:nth-child(4) {left: 32%; animation-delay: .3s;}
.ui .sc-confetti i:nth-child(5) {left: 40%; animation-delay: 2s;}
.ui .sc-confetti i:nth-child(6) {left: 48%; animation-delay: 1s;}
.ui .sc-confetti i:nth-child(7) {left: 56%; animation-delay: 2.4s;}
.ui .sc-confetti i:nth-child(8) {left: 64%; animation-delay: .8s;}
.ui .sc-confetti i:nth-child(9) {left: 72%; animation-delay: 1.7s;}
.ui .sc-confetti i:nth-child(10) {left: 80%; animation-delay: .2s;}
.ui .sc-confetti i:nth-child(11) {left: 88%; animation-delay: 2.7s;}
.ui .sc-confetti i:nth-child(12) {left: 94%; animation-delay: 1.2s;}
@keyframes ui-confetti { to { transform: translateY(620px) rotate(720deg); } }