/* Santi Wallet tanıtım sayfası (public/santi-wallet.html): site.css ve cozum.css'in üstüne; aynı renk ve yazı dili. */
.sw-page { --brown: #6f4e37 }

/* Açılış */
.sw-hero { position: relative; padding: 112px 0 40px; overflow: hidden; background: radial-gradient(900px 520px at 78% 30%, #dbeafe 0%, rgba(219,234,254,0) 62%), linear-gradient(180deg, #eaf3ff 0%, var(--bg) 100%) }
.sw-hero .wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 32px; align-items: center; max-width: 1240px }
.sw-word img { width: 56px; height: 56px; flex: none; filter: drop-shadow(0 10px 20px rgba(29,78,216,.35)) }
.sw-word { display: flex; align-items: center; gap: 14px; margin: 22px 0 6px; font-family: var(--display); font-size: clamp(30px, 3.6vw, 44px); line-height: 1; font-weight: 800; letter-spacing: -.03em; color: var(--ink) }
.sw-santi { font-family: "Lobster", "Segoe Script", cursive; font-weight: 400; color: var(--blue); letter-spacing: .01em; font-size: 1.12em }
.sw-hero h1 { font-size: clamp(34px, 4.6vw, 60px); line-height: 1.04; margin: 10px 0 18px }
.sw-hero h1 em { font-style: normal; background: linear-gradient(90deg, #2563eb, #0ea5e9); -webkit-background-clip: text; background-clip: text; color: transparent }
.sw-hero .lead { font-size: 18.5px; max-width: 560px }
.sw-hero .actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px }
.sw-wallets { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; padding: 0; list-style: none }
.sw-wallets li { display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px; border-radius: 999px; background: #fff; border: 1px solid var(--line); color: var(--ink); font: 600 13px Inter, sans-serif }
.sw-wallets svg { width: 16px; height: 16px }

.sw-stage { position: relative; height: clamp(380px, 46vw, 600px) }
.sw-canvas { position: absolute; inset: 0; width: 100%; height: 100% }
.sw-stage img.sw-fallback { position: absolute; left: 50%; top: 50%; width: min(420px, 86%); transform: translate(-50%, -50%) rotate(-6deg); border-radius: 22px; box-shadow: 0 40px 80px -30px rgba(11,27,58,.55) }
/* Kilit ekranı bildirimi: her damgada sağ üstten iner */
.sw-note { position: absolute; top: 6%; right: 4%; z-index: 2; display: flex; align-items: center; gap: 10px; width: min(300px, 78%); padding: 10px 12px; border-radius: 18px; background: rgba(255,255,255,.82); backdrop-filter: blur(16px) saturate(1.4); box-shadow: 0 18px 40px -18px rgba(11,27,58,.45), 0 0 0 1px rgba(11,27,58,.06); opacity: 0; transform: translateY(-14px) scale(.96); transition: opacity .45s ease, transform .55s cubic-bezier(.2,.9,.3,1.2) }
.sw-note.in { opacity: 1; transform: none }
.sw-note i, .sw-push i { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 9px; background: var(--brown) }
.sw-note i img, .sw-push i img { width: 24px; height: 24px }
.sw-note span, .sw-push span { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25 }
.sw-note b, .sw-push b { font: 600 13.5px Inter, sans-serif; color: var(--ink) }
.sw-note small, .sw-push small { font-size: 13px; color: var(--body) }
.sw-note time, .sw-push time { align-self: flex-start; font-size: 11.5px; color: var(--muted) }

/* Üç adım; üstünde yatay tanıtım videosu (16:9) */
.sw-video { margin-top: 30px }
.sw-video video { aspect-ratio: 16 / 9 }
.sw-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 34px; padding: 0; list-style: none; counter-reset: s }
.sw-steps li { counter-increment: s; position: relative; padding: 22px; border-radius: 22px; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow) }
.sw-steps h3 { font-size: 19px; margin: 18px 0 6px }
.sw-steps h3::before { content: counter(s, decimal-leading-zero) "  "; color: var(--blue); white-space: pre }
.sw-steps p { font-size: 15px }
.sw-step-art { position: relative; height: 150px; border-radius: 16px; background: linear-gradient(180deg, #eff6ff, #f8fbff); overflow: hidden }
.sw-mini-phone { position: absolute; left: 50%; top: 18px; width: 74px; height: 132px; margin-left: -37px; border-radius: 16px; background: #0b1b3a; box-shadow: 0 16px 30px -14px rgba(11,27,58,.6); animation: sw-tap 3.2s ease-in-out infinite }
.sw-mini-phone::after { content: ""; position: absolute; inset: 6px; border-radius: 11px; background: linear-gradient(180deg, #1e293b, #0f172a) }
.sw-qr { position: absolute; z-index: 1; left: 50%; top: 34px; width: 40px; height: 40px; margin-left: -20px; border-radius: 4px; background: #fff repeating-conic-gradient(#0b1b3a 0 25%, #fff 0 50%) 0 0 / 10px 10px; box-shadow: 0 0 0 3px #fff }
.sw-qr.big { width: 96px; height: 96px; margin-left: -48px; top: 50%; margin-top: -48px; background-size: 16px 16px }
.sw-tag { position: absolute; right: 18%; bottom: 16px; padding: 4px 9px; border-radius: 8px; background: var(--blue); color: #fff; font: 700 11px Inter, sans-serif; letter-spacing: .06em; animation: sw-pulse 3.2s ease-in-out infinite }
@keyframes sw-tap { 0%, 100% { transform: translateY(0) rotate(-4deg) } 45%, 60% { transform: translateY(-8px) rotate(2deg) } }
@keyframes sw-pulse { 0%, 40%, 100% { box-shadow: 0 0 0 0 rgba(37,99,235,.5) } 55% { box-shadow: 0 0 0 10px rgba(37,99,235,0) } }
.sw-mini-card { position: absolute; left: 50%; top: 20px; width: 120px; height: 76px; margin-left: -60px; border-radius: 12px; background: linear-gradient(135deg, #7a8b2e, #5d6b22); box-shadow: 0 14px 26px -12px rgba(11,27,58,.5); animation: sw-drop 3.2s cubic-bezier(.5,0,.3,1) infinite }
.sw-mini-card::before { content: ""; position: absolute; left: 10px; top: 10px; width: 18px; height: 18px; border-radius: 5px; background: #fff }
.sw-mini-card::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: 12px; height: 18px; border-radius: 6px; background: repeating-linear-gradient(90deg, rgba(255,255,255,.9) 0 14px, transparent 14px 20px) }
.sw-mini-wallet { position: absolute; left: 50%; bottom: 14px; width: 150px; height: 54px; margin-left: -75px; border-radius: 14px 14px 18px 18px; background: #0b1b3a; box-shadow: inset 0 6px 0 rgba(255,255,255,.08) }
@keyframes sw-drop { 0% { transform: translateY(-30px); opacity: 0 } 18% { opacity: 1 } 50%, 82% { transform: translateY(44px) scale(.9); opacity: 1 } 100% { transform: translateY(44px) scale(.9); opacity: 0 } }
.sw-mini-stamps { position: absolute; left: 50%; top: 50%; display: grid; grid-template-columns: repeat(3, 30px); gap: 10px; transform: translate(-50%, -50%) }
.sw-mini-stamps b { width: 30px; height: 30px; border-radius: 50%; border: 2px dashed #93c5fd; background: #fff }
.sw-mini-stamps b:nth-child(-n+4) { border: 0; background: var(--blue) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 60% no-repeat }
.sw-mini-stamps b:nth-child(4) { animation: sw-stamp 3.2s ease infinite }
@keyframes sw-stamp { 0%, 30% { transform: scale(0); opacity: 0 } 42% { transform: scale(1.25); opacity: 1 } 52%, 100% { transform: none; opacity: 1 } }
.sw-mini-bell { position: absolute; right: 14px; top: 14px; width: 26px; height: 26px; border-radius: 50%; background: #f59e0b url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 16h12l-1.5-2V10a4.5 4.5 0 0 0-9 0v4L6 16zm4 2a2 2 0 0 0 4 0' fill='none' stroke='%23fff' stroke-width='2' stroke-linejoin='round'/%3E%3C/svg%3E") center / 64% no-repeat; animation: sw-ring 3.2s ease infinite }
@keyframes sw-ring { 0%, 40%, 100% { transform: none } 45% { transform: rotate(16deg) } 50% { transform: rotate(-14deg) } 55% { transform: rotate(8deg) } 60% { transform: none } }

/* Dükkânın yakınında: tam ekran, koyu zemin; harita üç boyutlu eğik, telefon önde */
.sw-geo { position: relative; min-height: 100svh; display: flex; align-items: center; padding: 96px 0; overflow: hidden; color: #cbd5e1; background: radial-gradient(900px 600px at 72% 50%, rgba(59,130,246,.35), rgba(59,130,246,0) 65%), #0b1b3a }
.sw-geo-copy { position: relative; z-index: 2 }
.sw-geo .wrap { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 40px; align-items: center; max-width: 1240px }
.sw-geo .eyebrow { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.16); color: #93c5fd }
.sw-geo h2 { color: #fff; font-size: clamp(32px, 4.4vw, 56px); line-height: 1.05; margin: 14px 0 18px }
.sw-geo .intro { font-size: 18px; color: #cbd5e1 }
.sw-geo-list { margin-top: 28px; padding: 0; list-style: none; display: grid; gap: 14px }
.sw-geo-list li { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 14px; padding: 14px 16px; border-radius: 16px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08) }
.sw-geo-list b { display: flex; align-items: flex-start; gap: 8px; color: #fff; font: 700 15px var(--display) }
.sw-geo-list b svg { flex: none; width: 20px; height: 20px; margin-top: -1px }
.sw-geo-list span { font-size: 15px }
.sw-geo-stage { position: relative; height: clamp(460px, 52vw, 640px) }
.sw-map-wrap { position: absolute; inset: 0 24% 0 0; perspective: 1400px; display: grid; place-items: center }
.sw-map { position: relative; width: 560px; height: 560px; border-radius: 40px; transform: scale(.82) rotateX(56deg) rotateZ(-32deg); transform-style: preserve-3d;
  background:
    linear-gradient(90deg, transparent 47%, #334a75 47%, #334a75 53%, transparent 53%) 0 0 / 100% 100%,
    linear-gradient(0deg, transparent 47%, #334a75 47%, #334a75 53%, transparent 53%) 0 0 / 100% 100%,
    repeating-linear-gradient(90deg, transparent 0 136px, #22375e 136px 144px),
    repeating-linear-gradient(0deg, transparent 0 136px, #22375e 136px 144px),
    #162a4f;
  box-shadow: 0 60px 120px -40px rgba(0,0,0,.8), inset 0 0 0 1px rgba(255,255,255,.06) }
.sw-block { position: absolute; border-radius: 10px; background: #1d3461; box-shadow: inset 0 0 0 1px rgba(255,255,255,.05) }
.sw-block.b1 { left: 22px; top: 22px; width: 220px; height: 110px }
.sw-block.b2 { left: 22px; top: 162px; width: 100px; height: 80px; background: #1f4d3a }
.sw-block.b3 { right: 22px; top: 22px; width: 110px; height: 220px }
.sw-block.b7 { left: 330px; top: 196px; width: 100px; height: 62px; background: #27406e }
.sw-block.b4 { left: 22px; bottom: 22px; width: 220px; height: 220px; background: #1f4d3a }
.sw-block.b5 { right: 22px; bottom: 22px; width: 220px; height: 100px }
.sw-block.b6 { right: 162px; bottom: 152px; width: 80px; height: 90px }
.sw-fence { position: absolute; left: 380px; top: 236px; width: 240px; height: 240px; margin: -120px 0 0 -120px; border-radius: 50%; background: radial-gradient(circle, rgba(59,130,246,.28), rgba(59,130,246,.06) 68%, rgba(59,130,246,0) 70%); border: 2px dashed rgba(147,197,253,.6); transition: background .4s, border-color .4s }
.sw-fence::after { content: ""; position: absolute; inset: -2px; border-radius: 50%; border: 2px solid rgba(147,197,253,.5); animation: sw-fence 2.6s ease-out infinite }
.sw-geo.near .sw-fence { background: radial-gradient(circle, rgba(34,197,94,.32), rgba(34,197,94,.08) 68%, rgba(34,197,94,0) 70%); border-color: rgba(134,239,172,.8) }
@keyframes sw-fence { from { transform: scale(.6); opacity: 1 } to { transform: scale(1.25); opacity: 0 } }
/* İğne haritaya dik durur (harita dönüşü geri alınır) */
.sw-shop { position: absolute; left: 380px; top: 236px; width: 0; height: 0; transform-style: preserve-3d }
.sw-shop-pin, .sw-shop-label { position: absolute; transform: rotateZ(32deg) rotateX(-56deg); transform-origin: 50% 100% }
.sw-shop-pin { left: -30px; bottom: 0; display: grid; place-items: center; width: 60px; height: 72px; border-radius: 30px 30px 30px 4px; rotate: 0deg; background: #fff; box-shadow: 0 18px 30px -12px rgba(0,0,0,.6); clip-path: none }
.sw-shop-pin img { width: 38px; height: 38px; margin-bottom: 8px }
.sw-shop-label { left: 50px; bottom: 34px; padding: 5px 10px; border-radius: 999px; white-space: nowrap; background: rgba(255,255,255,.95); color: var(--ink); font: 700 13px Inter, sans-serif; box-shadow: 0 8px 18px -8px rgba(0,0,0,.6) }
.sw-walker { position: absolute; left: 0; top: 0; width: 0; height: 0; transform-style: preserve-3d }
.sw-walker span { position: absolute; left: -11px; top: -11px; width: 22px; height: 22px; border-radius: 50%; background: #60a5fa; border: 4px solid #fff; box-shadow: 0 0 0 8px rgba(96,165,250,.25), 0 6px 14px rgba(0,0,0,.5) }
.sw-geo.near .sw-walker span { background: #22c55e; box-shadow: 0 0 0 8px rgba(34,197,94,.3), 0 6px 14px rgba(0,0,0,.5) }
.sw-geo-phone { position: absolute; right: 0; bottom: 6%; width: 196px; padding: 9px; border-radius: 38px; background: #020617; box-shadow: 0 40px 80px -30px rgba(0,0,0,.9), inset 0 0 0 2px #1e293b; transform: translateY(12px) rotate(3deg); transition: transform .6s cubic-bezier(.2,.9,.3,1.2) }
.sw-geo.near .sw-geo-phone { transform: translateY(-6px) rotate(0deg) }
.sw-geo-screen { position: relative; height: 380px; padding: 38px 10px 12px; border-radius: 30px; overflow: hidden; background: linear-gradient(180deg, #1e3a8a, #0f172a); filter: brightness(.45); transition: filter .5s }
.sw-geo.near .sw-geo-screen { filter: none }
.sw-geo-screen .sw-lock-time b { font-size: 40px }
.sw-geo-pass { position: absolute; left: 10px; right: 10px; bottom: 40px; padding: 10px; border-radius: 14px; background: var(--c); color: #fff; opacity: 0; transform: translateY(24px); transition: opacity .5s, transform .6s cubic-bezier(.2,.9,.3,1.2) }
.sw-geo.near .sw-geo-pass { opacity: 1; transform: none }
.sw-geo-pass .sw-pass-logo { width: 26px; height: 26px; font-size: 13px; border-radius: 7px }
.sw-geo-pass .sw-pass-top b { font-size: 13px }
.sw-geo-text { margin-top: 10px; padding: 8px 10px; border-radius: 10px; background: rgba(0,0,0,.2); font: 500 12.5px/1.35 Inter, sans-serif }
.sw-geo-hint { position: absolute; left: 0; right: 0; bottom: 14px; text-align: center; font-size: 10.5px; color: rgba(255,255,255,.6) }

/* Deneme kartı */
.sw-try-grid { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 56px; align-items: center }
.sw-try-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 26px }
.sw-seg { display: inline-flex; padding: 4px; border-radius: 13px; background: #eef2f7; border: 1px solid var(--line) }
.sw-seg button { height: 40px; padding: 0 16px; border: 0; border-radius: 10px; background: transparent; color: var(--body); font: 600 14px Inter, sans-serif; cursor: pointer }
.sw-seg button[aria-selected="true"] { background: #fff; color: var(--ink); box-shadow: 0 1px 2px rgba(15,23,42,.08), 0 4px 10px -6px rgba(15,23,42,.2) }
.sw-try-hint { margin-top: 14px; font-size: 14.5px; color: var(--muted) }
.sw-phone { width: 320px; padding: 12px; border-radius: 48px; background: #0b1b3a; box-shadow: 0 50px 90px -40px rgba(11,27,58,.7), inset 0 0 0 2px #1e293b }
.sw-phone-screen { position: relative; height: 620px; padding: 52px 14px 14px; border-radius: 38px; overflow: hidden; background: radial-gradient(500px 400px at 30% 0%, #3b5bdb 0%, rgba(59,91,219,0) 60%), linear-gradient(180deg, #1e3a8a, #0f172a) }
.sw-lock-time { text-align: center; color: #fff; line-height: 1 }
.sw-lock-time b { display: block; font: 700 58px/1 var(--display); letter-spacing: -.02em }
.sw-lock-time small { display: block; margin-top: 8px; font-size: 14px; opacity: .85 }
.sw-push { position: absolute; left: 12px; right: 12px; top: 150px; z-index: 3; display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 18px; background: rgba(255,255,255,.88); backdrop-filter: blur(14px); opacity: 0; transform: translateY(-16px) scale(.96); transition: opacity .4s ease, transform .5s cubic-bezier(.2,.9,.3,1.2) }
.sw-push.in { opacity: 1; transform: none }
.sw-pass { position: absolute; left: 12px; right: 12px; bottom: 12px; padding: 12px; border-radius: 16px; background: var(--c); color: #fff; box-shadow: 0 20px 40px -20px rgba(0,0,0,.6); transition: background .5s }
.sw-pass-top { display: flex; align-items: center; gap: 9px }
.sw-pass-logo { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; background: #fff; color: var(--c); font: 800 15px var(--display) }
.sw-pass-top b { flex: 1; font: 600 15px Inter, sans-serif }
.sw-pass-bal { text-align: right; line-height: 1.1 }
.sw-pass-bal small { display: block; font-size: 9.5px; letter-spacing: .06em; opacity: .9 }
.sw-pass-bal span { font-size: 17px; font-variant-numeric: tabular-nums }
.sw-pass-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 12px 0 10px; padding: 10px 12px; border-radius: 12px; background: rgba(0,0,0,.16) }
.sw-pass-strip .st { position: relative; aspect-ratio: 1; border-radius: 50%; border: 2px dashed rgba(255,255,255,.55); background: rgba(255,255,255,.08) center / 58% no-repeat }
.sw-pass-strip .st.on { border: 0; background-color: #fff; background-size: 66%; box-shadow: 0 3px 0 rgba(0,0,0,.18) }
.sw-pass-strip .st.on::after { content: ""; position: absolute; right: -3px; bottom: -3px; width: 34%; height: 34%; border-radius: 50%; background: var(--c) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 70% no-repeat; box-shadow: 0 0 0 2px #fff }
.sw-pass-strip .st.gift { border-style: dotted; border-color: #fff; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 10h16v3H4zM5.5 13h13v7h-13zM12 10v10M12 10c-2-3-5-3-5-1s3 1 5 1c2 0 5 1 5-1s-3-2-5 1' fill='none' stroke='%23fff' stroke-width='1.6' stroke-linejoin='round'/%3E%3C/svg%3E"); background-size: 56% }
.sw-pass-strip .st.gift.on { background-color: #fff; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 10h16v3H4zM5.5 13h13v7h-13zM12 10v10M12 10c-2-3-5-3-5-1s3 1 5 1c2 0 5 1 5-1s-3-2-5 1' fill='none' stroke='%236f4e37' stroke-width='1.8' stroke-linejoin='round'/%3E%3C/svg%3E") }
.sw-pass-strip .st.pop { animation: sw-pop .55s cubic-bezier(.3,1.6,.5,1) }
@keyframes sw-pop { 0% { transform: scale(.4) } 60% { transform: scale(1.18) } 100% { transform: none } }
.sw-pass-strip.points { display: flex; align-items: center; justify-content: space-between; min-height: 92px }
.sw-pass-strip.points .ico { flex: none; width: 62px; height: 62px; border-radius: 50%; background: #fff center / 64% no-repeat }
.sw-pass-strip.points .amt { text-align: right; line-height: 1 }
.sw-pass-strip.points .amt small { display: block; margin-bottom: 6px; font: 700 10px Inter, sans-serif; letter-spacing: .08em; opacity: .85 }
.sw-pass-strip.points .amt b { font: 800 34px/1 Inter, sans-serif; letter-spacing: -.02em; font-variant-numeric: tabular-nums }
.sw-pass-strip.points .amt b i { font-style: normal; font-size: .55em; margin-right: 2px; opacity: .92 }
.sw-pass-strip.points .amt b sup { font-size: .55em; vertical-align: baseline }
.sw-pass-strip.points .amt b.bump { animation: sw-pop .5s cubic-bezier(.3,1.6,.5,1) }
.sw-pass-fields { display: flex; justify-content: space-between; gap: 12px }
.sw-pass-fields span { display: flex; flex-direction: column; line-height: 1.2 }
.sw-pass-fields small { font-size: 9.5px; letter-spacing: .06em; opacity: .85 }
.sw-pass-fields b { font-weight: 500; font-size: 15px }
.sw-pass-qr { display: grid; justify-items: center; gap: 4px; width: 116px; margin: 12px auto 0; padding: 9px 9px 6px; border-radius: 8px; background: #fff }
.sw-pass-qr i { width: 96px; height: 96px; background: repeating-conic-gradient(#0b1b3a 0 25%, #fff 0 50%) 0 0 / 12px 12px }
.sw-pass-qr small { color: #0b1b3a; font-size: 11px }

/* Kasada */
.sw-desk { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: center }
.sw-desk-art { position: relative; display: flex; align-items: center; justify-content: center; gap: 22px; min-height: 360px; padding: 24px; border-radius: 28px; background: linear-gradient(180deg, #eff6ff, #f8fbff); border: 1px solid var(--line) }
.sw-reader { flex: none; width: 150px; padding: 10px 10px 12px; border-radius: 26px; background: #0b1b3a; text-align: center; box-shadow: 0 30px 50px -26px rgba(11,27,58,.7) }
.sw-reader p { margin-top: 8px; color: #cbd5e1; font: 600 12px Inter, sans-serif }
.sw-reader-cam { position: relative; height: 170px; border-radius: 18px; overflow: hidden; background: radial-gradient(circle at 50% 40%, #334155, #0f172a) }
.sw-reader-cam::after { content: ""; position: absolute; inset: 18%; border: 3px solid rgba(34,197,94,.85); border-radius: 12px }
.sw-scanline { position: absolute; left: 18%; right: 18%; height: 2px; top: 20%; background: #22c55e; box-shadow: 0 0 12px #22c55e; animation: sw-scan 2.2s ease-in-out infinite }
@keyframes sw-scan { 0%, 100% { top: 20% } 50% { top: 78% } }
.sw-panel { width: min(270px, 100%); padding: 14px; border-radius: 18px; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow) }
.sw-panel-head { font: 700 14px var(--display); color: var(--ink); margin-bottom: 10px }
.sw-panel-row { display: flex; align-items: center; gap: 10px; padding: 9px 8px; border-radius: 12px }
.sw-panel-row span:nth-child(2) { flex: 1; display: flex; flex-direction: column; line-height: 1.25 }
.sw-panel-row b { font-size: 14px; color: var(--ink) }
.sw-panel-row small { font-size: 12px; color: var(--muted) }
.sw-panel-row em { font-style: normal; font: 600 13px Inter, sans-serif; color: var(--ink); font-variant-numeric: tabular-nums }
.sw-av { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: #dbeafe; color: var(--blue); font: 700 13px Inter, sans-serif }
.sw-av.b { background: #dcfce7; color: #15803d }
.sw-panel-row.r1 { background: #eff6ff; animation: sw-row 4.4s ease infinite }
@keyframes sw-row { 0%, 8% { opacity: 0; transform: translateY(-10px) } 16%, 100% { opacity: 1; transform: none } }
.sw-panel-give { margin-top: 10px; display: grid; place-items: center; height: 42px; border-radius: 12px; background: linear-gradient(180deg, #3b82f6, #2563eb); color: #fff; font: 600 14px Inter, sans-serif; animation: sw-give 4.4s ease infinite }
@keyframes sw-give { 0%, 40%, 60%, 100% { transform: none } 48% { transform: scale(.95) } }
.sw-ticks { margin-top: 22px; padding: 0; list-style: none; display: grid; gap: 12px }
.sw-ticks li { position: relative; padding-left: 30px; font-size: 15.5px }
.sw-ticks li::before { content: ""; position: absolute; left: 0; top: 2px; width: 20px; height: 20px; border-radius: 50%; background: #dbeafe url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='%232563eb' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 62% no-repeat }

/* Simgeler */
.sw-icons { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 12px; margin-top: 32px; padding: 0; list-style: none }
.sw-icons li { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 16px 6px 12px; border-radius: 18px; background: var(--bg); border: 1px solid var(--line); transition: transform .25s, box-shadow .25s }
.sw-icons li:hover { transform: translateY(-4px); box-shadow: var(--shadow) }
.sw-icons img { width: 46px; height: 46px; padding: 8px; box-sizing: content-box; border-radius: 50%; background: #fff; box-shadow: 0 6px 14px -8px rgba(11,27,58,.35) }
.sw-icons span { font: 600 12.5px Inter, sans-serif; color: var(--ink); text-align: center }

/* Özellikler */
.sw-features { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: 34px }
.sw-feature { padding: 22px; border-radius: 22px; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow) }
.sw-feature h3 { font-size: 17px; margin: 14px 0 6px }
.sw-feature p { font-size: 14.5px }
.sw-fi { display: block; width: 42px; height: 42px; border-radius: 12px; background: #eff6ff center / 56% no-repeat }
.sw-fi.bell { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232563eb' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 16h12l-1.5-2V10a4.5 4.5 0 0 0-9 0v4L6 16zm4 3a2 2 0 0 0 4 0'/%3E%3C/svg%3E") }
.sw-fi.pin { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232563eb' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s-6-5.5-6-11a6 6 0 0 1 12 0c0 5.5-6 11-6 11z'/%3E%3Ccircle cx='12' cy='10' r='2.2'/%3E%3C/svg%3E") }
.sw-fi.stamp { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232563eb' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='8' cy='8' r='3'/%3E%3Ccircle cx='16' cy='8' r='3'/%3E%3Ccircle cx='8' cy='16' r='3'/%3E%3Ccircle cx='16' cy='16' r='3' stroke-dasharray='2 2'/%3E%3C/svg%3E") }
.sw-fi.card { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232563eb' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='3' width='16' height='18' rx='2'/%3E%3Cpath d='M8 7h3v3H8zM13 7h3v3h-3zM8 12h3v3H8zM13 13h3M13 16h3'/%3E%3C/svg%3E") }
.sw-fi.route { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232563eb' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='6' cy='18' r='2'/%3E%3Ccircle cx='18' cy='6' r='2'/%3E%3Cpath d='M8 18h7a3 3 0 0 0 0-6H9a3 3 0 0 1 0-6h7'/%3E%3C/svg%3E") }
.sw-fi.shield { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232563eb' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l7 3v5c0 5-3.5 8.5-7 10-3.5-1.5-7-5-7-10V6z'/%3E%3Cpath d='M9 12l2 2 4-4'/%3E%3C/svg%3E") }
.sw-fi.solo { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232563eb' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 10l1.5-5h13L20 10M5 10v9h14v-9M4 10h16M10 19v-5h4v5'/%3E%3C/svg%3E") }
.sw-fi.chart { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232563eb' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20V4M4 20h16M8 16v-4M12 16V8M16 16v-6'/%3E%3C/svg%3E") }

/* Karşılaştırma */
.sw-compare { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-top: 32px; max-width: 920px }
.sw-col { padding: 26px; border-radius: 22px; border: 1px solid var(--line) }
.sw-col h3 { font-size: 21px; margin-bottom: 14px }
.sw-col ul { padding: 0; list-style: none; display: grid; gap: 11px }
.sw-col li { position: relative; padding-left: 28px; font-size: 15.5px }
.sw-col li::before { content: ""; position: absolute; left: 0; top: 3px; width: 18px; height: 18px; border-radius: 50%; background: center / 60% no-repeat }
.sw-col.paper { background: var(--bg) }
.sw-col.paper li { color: var(--muted) }
.sw-col.paper li::before { background-color: #fee2e2; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 7l10 10M17 7L7 17' stroke='%23e11d48' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") }
.sw-col.wallet { background: #fff; box-shadow: var(--shadow); border-color: #bfdbfe }
.sw-col.wallet li::before { background-color: #dbeafe; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='%232563eb' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") }

@media (max-width: 1080px) {
  .sw-features { grid-template-columns: repeat(2, minmax(0, 1fr)) }
  .sw-icons { grid-template-columns: repeat(4, minmax(0, 1fr)) }
}
@media (max-width: 900px) {
  .sw-geo { min-height: 0; padding: 72px 0 }
  .sw-geo .wrap { grid-template-columns: minmax(0, 1fr) }
  .sw-geo-stage { height: 480px }
  .sw-map { width: 440px; height: 440px; zoom: .78 }
  .sw-hero { padding-top: 92px }
  .sw-hero .wrap, .sw-try-grid, .sw-desk { grid-template-columns: minmax(0, 1fr) }
  .sw-stage { height: 400px; order: -1; margin: -10px -24px 0 }
  .sw-steps { grid-template-columns: minmax(0, 1fr) }
  .sw-try-grid { gap: 36px }
  .sw-phone { justify-self: center }
  .sw-desk-art { order: 2 }
}
@media (max-width: 560px) {
  .wrap { padding: 0 16px }
  .sw-geo-list li { grid-template-columns: minmax(0, 1fr); gap: 4px }
  .sw-geo-stage { height: 640px }
  .sw-map { zoom: .6 }
  .sw-map-wrap { inset: 0 0 auto; height: 330px; place-items: center }
  .sw-geo-phone { width: 196px; right: 50%; margin-right: -98px; bottom: 0 }
  .sw-geo-screen { height: 300px }
  .sw-stage { height: 340px; margin: -10px -16px 0 }
  .sw-features, .sw-compare { grid-template-columns: minmax(0, 1fr) }
  .sw-icons { grid-template-columns: repeat(3, minmax(0, 1fr)) }
  .sw-phone { width: min(320px, 100%) }
  .sw-desk-art { flex-direction: column }
}
@media (prefers-reduced-motion: reduce) {
  .sw-page *, .sw-page *::before, .sw-page *::after { animation: none !important; transition: none !important }
}