:root{--bg:#080e19;--ink:#f9fbff;--muted:#b2bed1;--blue:#527fff;--line:rgba(175,196,241,.17)} *{box-sizing:border-box} html{scroll-behavior:smooth} body{margin:0;min-width:320px;background:radial-gradient(ellipse at 30% 10%,#131e35 0,transparent 38%),radial-gradient(ellipse at 85% 20%,#101c36 0,transparent 55%),var(--bg);color:var(--ink);font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;-webkit-font-smoothing:antialiased} a{text-decoration:none;color:inherit} button{font:inherit} .site{max-width:1700px;margin:auto;min-height:100vh;overflow:hidden} .header{height:86px;display:flex;align-items:center;justify-content:space-between;padding:0 4.4%;gap:18px;position:relative;z-index:15} .brand{display:flex;align-items:center;gap:13px;flex:none} .brand-logo{width:42px;height:42px;border-radius:13px;background:linear-gradient(145deg,#78a4ff,#3c6bea);display:grid;place-items:center;box-shadow:0 7px 22px rgba(70,120,240,.22)} .brand-logo svg{width:30px;height:30px} .brand-name{font-size:17px;font-weight:800;line-height:1.04;letter-spacing:-.035em} .brand-sub{font-size:10px;font-weight:650;letter-spacing:.15em;color:#a2b1c9;margin-top:4px;text-transform:uppercase} .nav{display:flex;gap:clamp(16px,2.6vw,43px);align-items:center;font-size:13px;font-weight:600;color:#cbd4e5} .nav a{transition:color .2s} .nav a:hover{color:#fff} .header-actions{display:flex;gap:12px;align-items:center} .button{display:inline-flex;justify-content:center;align-items:center;min-height:48px;border-radius:11px;padding:0 21px;font-weight:750;font-size:13px;cursor:pointer;border:1px solid transparent;transition:transform .25s,box-shadow .25s,background .25s;white-space:nowrap} .button:hover{transform:translateY(-2px)} .button-primary{background:#4e78f3;color:#fff;box-shadow:0 10px 34px rgba(53,93,231,.22)} .button-primary:hover{background:#628af8} .button-ghost{border-color:#354969;color:#f5f7ff;background:rgba(255,255,255,.016)} .button-ghost:hover{background:rgba(255,255,255,.06)} .menu-toggle{display:none;flex:none;border:1px solid var(--line);color:#fff;background:transparent;border-radius:11px;width:46px;height:44px;cursor:pointer;font-size:24px} .hero{display:grid;grid-template-columns:minmax(340px, .87fr) minmax(0,1.58fr);align-items:center;gap:6px;padding:34px 3.1% 20px 4.4%;min-height:0} .hero-copy{position:relative;z-index:4;padding:18px 16px 18px 0;min-width:0} .kicker{font-size:11px;letter-spacing:.33em;font-weight:750;color:#a0b0ca;text-transform:uppercase;margin-bottom:29px;line-height:1.6} .headline{font-size:clamp(48px,5.1vw,84px);font-weight:850;line-height:.99;letter-spacing:-.072em;margin:0;max-width:700px;text-wrap:balance} .headline span{display:block;color:#6997ff} .summary{font-size:clamp(15px,1.47vw,19px);line-height:1.65;color:#b9c5d9;margin:30px 0 0;max-width:460px} .actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:29px} .actions .button{min-height:54px;padding:0 22px;font-size:14px} .benefits{display:flex;flex-wrap:wrap;gap:10px 20px;margin-top:31px} .benefit{display:flex;align-items:center;gap:9px;color:#c4cede;font-size:12px;line-height:1.3} .benefit svg{width:30px;height:30px;flex:none;padding:6px;border:1px solid #314462;border-radius:50%;stroke:#91acff} .art-area{position:relative;min-width:0;isolation:isolate} .scene{position:relative;width:100%;aspect-ratio:1672/941;overflow:visible;transform:translateZ(0)} .scene img{display:block;width:100%;height:100%;object-fit:contain;object-position:center;user-select:none;pointer-events:none;filter:drop-shadow(0 16px 45px rgba(0,0,0,.24))} .scene::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(8,14,25,.17),transparent 14%);pointer-events:none} .notification{--dx:0px;--dur:11s;position:absolute;z-index:3;display:flex;align-items:center;gap:10px;min-width:0;width:max-content;max-width:220px;padding:10px 13px 10px 10px;border-radius:14px;background:rgba(250,251,255,.97);border:1px solid rgba(255,255,255,.94);box-shadow:0 16px 38px rgba(2,5,12,.32),0 4px 10px rgba(5,10,20,.1);color:#172239;pointer-events:auto;animation:bob var(--dur) ease-in-out infinite;transform:translateX(var(--dx));transition:box-shadow .25s;cursor:default;will-change:transform} .notification:hover{animation-play-state:paused;box-shadow:0 22px 44px rgba(2,5,12,.4)} .notification-icon{flex:none;width:31px;height:31px;border-radius:10px;background:color-mix(in srgb,var(--tone) 13%,white);display:grid;place-items:center;color:var(--tone)} .notification-icon svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round} .notification-copy{min-width:0} .notification-title{font-weight:850;font-size:12px;line-height:1.17;white-space:nowrap} .notification-detail{margin-top:4px;font-size:10px;line-height:1.4;color:#61718a;white-space:nowrap} .notification-pip{width:7px;height:7px;flex:none;border-radius:50%;background:var(--tone);box-shadow:0 0 0 4px color-mix(in srgb,var(--tone) 16%,transparent);margin-left:1px} .notification::after{content:"";height:19px;position:absolute;left:50%;top:100%;width:1.5px;background:linear-gradient(var(--tone),transparent);opacity:.75} .notification::before{content:"";position:absolute;left:calc(50% - 3px);top:calc(100% + 18px);height:6px;width:6px;border-radius:50%;background:var(--tone);box-shadow:0 0 13px var(--tone)} @keyframes bob{0%,100%{transform:translate(var(--dx),0)}50%{transform:translate(var(--dx),-8px)}} @keyframes rise-in{from{opacity:0;transform:translate(var(--dx),16px)}to{opacity:1;transform:translate(var(--dx),0)}} .n-rest{left:4%;top:11%;--tone:#ff8942;--dur:9.8s;animation-delay:.08s,.93s} .n-cafe{left:44%;top:2%;--tone:#428cff;--dur:11.3s;animation-delay:.25s,1.1s} .n-market{right:1%;top:11%;--tone:#13bd7e;--dur:10.6s;animation-delay:.42s,1.27s} .n-kitchen{left:-2%;top:42%;--tone:#ed645a;--dur:10.8s;animation-delay:.59s,1.44s} .n-pool{right:0%;top:42%;--tone:#4b9cff;--dur:9.6s;animation-delay:.76s,1.61s} .n-depot{left:3%;top:76%;--tone:#ecaf43;--dur:11.2s;animation-delay:.93s,1.78s} .n-mess{left:46%;top:79%;--tone:#24b6d1;--dur:10.1s;animation-delay:1.1s,1.95s} .n-spa{right:0%;top:80%;--tone:#e668b7;--dur:10.5s;animation-delay:1.27s,2.12s} .benefit-strip{margin:24px 4.4% 24px;display:grid;grid-template-columns:repeat(4,1fr);background:rgba(17,27,46,.82);border:1px solid var(--line);border-radius:16px;min-height:84px} .strip-item{display:flex;align-items:center;gap:12px;padding:17px 20px;border-right:1px solid rgba(175,196,241,.12);font-size:12px;line-height:1.5;color:#bac8df} .strip-item:last-child{border-right:none} .strip-icon{flex:none;width:35px;height:35px;display:grid;place-items:center;border-radius:12px;background:#1c2946;color:#a8bcff;font-size:16px;font-weight:800} .strip-item strong{display:block;color:#f4f7ff;font-size:12px} .mobile-feed{display:none} .dialog-overlay{position:fixed;inset:0;z-index:500;background:rgba(0,0,0,.73);display:none;align-items:center;justify-content:center;padding:20px;backdrop-filter:blur(8px)} .dialog-overlay.open{display:flex} .dialog{background:#121d2c;border:1px solid #324562;border-radius:22px;padding:30px;width:min(480px,100%);box-shadow:0 25px 80px rgba(0,0,0,.5);position:relative} .dialog h2{font-size:25px;margin:0 0 12px} .dialog p{line-height:1.65;font-size:14px;color:#b6c4d7;margin:0 0 18px} .dialog-close{position:absolute;right:17px;top:17px;font-size:23px;cursor:pointer;background:none;border:0;color:white} .dialog label{font-size:12px;color:#aabbd2;display:block;margin-top:12px;margin-bottom:5px} .dialog input,.dialog select{width:100%;background:#0b1522;border:1px solid #344663;color:white;border-radius:10px;padding:12px;font:inherit;font-size:14px} .dialog-note{font-size:12px !important;color:#8ea2bd !important;margin-top:16px !important} .dialog form{margin:0} @media(max-width:1250px){ .nav{gap:16px} .header{padding-inline:3.4%} .hero{padding-left:3.4%;grid-template-columns:minmax(280px,.8fr) minmax(0,1.5fr)} .headline{font-size:clamp(48px,5.3vw,72px)} .notification{max-width:185px;padding:7px 8px;gap:7px;border-radius:10px} .notification-title{font-size:11px}.notification-detail{font-size:9px} .notification-icon{width:25px;height:25px;border-radius:7px}.notification-icon svg{width:15px;height:15px} } @media(max-width:980px){ .nav{display:none}.header{height:77px} .hero{grid-template-columns:1fr;padding:24px 4% 12px;gap:35px;min-height:0} .hero-copy{padding:0}.headline{font-size:clamp(49px,8vw,76px)} .summary{max-width:620px} .art-area{width:100%} .notification{max-width:215px;padding:10px 12px;gap:8px} .notification-title{font-size:12px}.notification-detail{font-size:10px} .notification-icon{width:31px;height:31px} .benefit-strip{margin-top:18px} } @media(max-width:700px){ .header{height:74px;padding:0 18px} .header-actions{margin-left:auto}.header-actions .button-ghost{display:none} .header-actions .button-primary{min-height:42px;padding:0 13px;font-size:12px} .brand-logo{width:36px;height:36px;border-radius:11px}.brand-logo svg{width:26px;height:26px} .brand-name{font-size:15px}.brand-sub{font-size:8px} .hero{padding:23px 19px 14px;gap:30px} .kicker{font-size:10px;margin-bottom:19px;letter-spacing:.21em} .headline{font-size:clamp(46px,12vw,64px);letter-spacing:-.064em} .summary{font-size:15px;line-height:1.6;margin-top:20px} .actions{margin-top:22px}.actions .button{min-height:49px;font-size:12px;padding:0 15px} .benefits{margin-top:19px;gap:8px 12px}.benefit{font-size:11px}.benefit svg{width:26px;height:26px;padding:5px} .scene{overflow:visible} .scene .notification{display:none} .mobile-feed{display:flex;gap:9px;overflow-x:auto;margin:34px -19px 0;padding:0 19px 10px;scroll-snap-type:x mandatory;scrollbar-width:none} .mobile-feed::-webkit-scrollbar{display:none} .mobile-feed-item{scroll-snap-align:start;flex:0 0 175px;border:1px solid #d9e3f3;border-radius:12px;padding:12px 13px;background:#f9fbff;color:#19253b;display:grid;gap:5px;box-shadow:0 12px 26px rgba(0,0,0,.18)} .mobile-feed-item b{font-size:12px}.mobile-feed-item span{font-size:11px;color:#586c86} .benefit-strip{margin:13px 17px 24px;grid-template-columns:1fr 1fr} .strip-item{padding:13px 10px;gap:9px}.strip-item:nth-child(2){border-right:0}.strip-item:nth-child(-n+2){border-bottom:1px solid var(--line)}.strip-icon{width:29px;height:29px;font-size:13px}.strip-item strong{font-size:10px}.strip-item{font-size:10px} } @media(max-width:360px){ .brand-sub{letter-spacing:.07em}.header-actions .button-primary{padding:0 9px;font-size:11px} .headline{font-size:43px}.actions .button{padding:0 12px} } @media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}} /* V5: Tasarım ve 3B görsel korunur. Ayrı ayrı yumuşak girip çıkan bildirim yığınları. */ .scene > .notification { display:none !important; } .scene .story-stack { position:absolute;z-index:9;display:flex;flex-direction:column;gap:6px; width:210px;max-width:29%;pointer-events:none; } .scene .story-stack.bottom-stack {flex-direction:column-reverse} .story-stack.place-rest {left:4%;top:11%} .story-stack.place-cafe {left:43%;top:2%} .story-stack.place-market {right:1%;top:11%} .story-stack.place-kitchen {left:0;top:42%} .story-stack.place-pool {right:1%;top:42%} .story-stack.place-depot {left:3%;bottom:12%} .story-stack.place-mess {left:42%;bottom:7%} .story-stack.place-spa {right:1%;bottom:11%} .story-note { --tone:#428cff;position:relative;isolation:isolate;display:flex;align-items:center;gap:8px; width:100%;min-width:0;min-height:0;max-height:0;overflow:hidden; padding:0 10px;border-radius:13px; color:#172239;background:rgba(250,251,255,.978); border:1px solid rgba(255,255,255,.94); box-shadow:0 12px 28px rgba(2,5,12,.25),0 3px 10px rgba(5,10,20,.09); opacity:0;transform:translate3d(0,13px,0) scale(.975); transition:opacity .44s cubic-bezier(.19,1,.22,1), transform .52s cubic-bezier(.19,1,.22,1), max-height .48s cubic-bezier(.2,.8,.2,1), padding .48s cubic-bezier(.2,.8,.2,1); pointer-events:none;will-change:opacity,transform; contain:layout style; } .story-note.is-visible { opacity:1;max-height:84px;padding:8px 10px; transform:translate3d(0,0,0) scale(1); } .story-note.is-leaving { opacity:0;max-height:0;padding-top:0;padding-bottom:0; transform:translate3d(0,-10px,0) scale(.985); } .story-note .notification-icon{width:28px;height:28px;flex:none;border-radius:9px} .story-note .notification-icon svg{width:17px;height:17px} .story-note .notification-copy{min-width:0;flex:1} .story-note .notification-title{font-size:11px;line-height:1.27;white-space:normal;overflow-wrap:break-word} .story-note .notification-detail{font-size:9.5px;margin-top:3px;line-height:1.2;white-space:normal} .story-note .notification-pip{margin-left:2px;flex:none} .story-note::before,.story-note::after{display:none} .mobile-feed{min-height:0} .mobile-feed-item.story-mobile-card{display:none} .mobile-stack{display:none} @media(max-width:1250px){ .scene .story-stack{width:188px;max-width:30%;gap:5px} .story-note.is-visible{padding:6px 8px} .story-note .notification-title{font-size:10px} .story-note .notification-detail{font-size:9px} .story-note .notification-icon{width:24px;height:24px} .story-note .notification-icon svg{width:15px;height:15px} } @media(max-width:980px){ .scene .story-stack{width:210px;max-width:30%} .story-note .notification-title{font-size:11px} .story-note .notification-detail{font-size:9.5px} } @media(max-width:700px){ .scene .story-stack{display:none !important} .mobile-feed{display:block;margin:16px 0 0;padding:0;min-height:0;overflow:hidden} .mobile-stack{display:flex;flex-direction:column;gap:7px;max-width:480px;margin:auto} .mobile-stack .story-note{max-width:none;border-radius:12px} .mobile-stack .story-note.is-visible{min-height:48px;max-height:66px;padding:8px 12px} .mobile-stack .story-note .notification-title{font-size:12px} .mobile-stack .story-note .notification-detail{font-size:10px} .mobile-stack .story-note .notification-icon{width:30px;height:30px} } @media(prefers-reduced-motion:reduce){ .story-note {transition:none!important;transform:none!important} } /* ===== Clapsy TSY — living operations studio, isolated stylesheet ===== */ #operations-studio{--os-blue:#326dff;--os-dark:#08152e;--os-muted:#64728a;--os-border:#dfe4ec;font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:radial-gradient(circle at 70% 6%,#fff 0,#f7f8fb 46%,#f1f3f7 100%);color:var(--os-dark);padding:78px max(18px,calc((100vw - 1570px)/2)) 100px;position:relative;overflow:hidden} #operations-studio *{box-sizing:border-box} #operations-studio .os-shell{width:100%;max-width:1550px;margin:0 auto} #operations-studio .os-kicker{display:flex;gap:12px;align-items:center;margin:0 0 28px;font-weight:800;letter-spacing:.21em;text-transform:uppercase;color:#7a899e;font-size:11px} #operations-studio .os-kicker:after{content:"";height:1px;width:64px;background:#cbd5e3} #operations-studio .os-grid{display:grid;grid-template-columns:minmax(300px,.33fr) minmax(0,.67fr);gap:24px;align-items:stretch} #operations-studio .os-copy{display:flex;flex-direction:column;justify-content:flex-start;min-width:0} #operations-studio .os-heading{font-size:clamp(43px,4.3vw,73px);font-weight:850;line-height:.99;letter-spacing:-.067em;color:#071631;margin:0 0 24px} #operations-studio .os-heading span{color:var(--os-blue)} #operations-studio .os-lead{color:#596a82;font-size:clamp(15px,1.22vw,19px);line-height:1.63;margin:0 0 28px;max-width:440px} #operations-studio .os-module-list{display:grid;gap:10px;margin-top:4px} #operations-studio .os-module{appearance:none;text-align:left;display:flex;align-items:center;gap:14px;padding:13px 15px;background:rgba(255,255,255,.92);border-radius:17px;border:1px solid #e1e5ed;box-shadow:0 8px 25px rgba(18,39,70,.035);cursor:pointer;transition:box-shadow .25s,border-color .25s,transform .25s;min-height:74px;color:#0c1c34;width:100%} #operations-studio .os-module:hover{transform:translateX(3px);box-shadow:0 10px 28px rgba(42,78,149,.09)} #operations-studio .os-module[data-active="true"]{border-color:#739cff;box-shadow:inset 0 0 0 1px rgba(60,106,255,.15),0 13px 30px rgba(45,102,254,.06)} #operations-studio .os-icon{flex:0 0 46px;height:46px;width:46px;border-radius:13px;display:grid;place-items:center;background:#f1f4f9;color:#253a59} #operations-studio .os-module[data-active="true"] .os-icon{background:linear-gradient(140deg,#2475ff,#6394ff);color:white;box-shadow:0 8px 16px rgba(60,100,250,.23)} #operations-studio .os-icon svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round} #operations-studio .os-module-copy{display:grid;gap:4px;min-width:0;flex:1} #operations-studio .os-module-copy strong{font-size:14px;font-weight:850;line-height:1.2} #operations-studio .os-module-copy small{font-size:12px;color:#7a879b;line-height:1.3} #operations-studio .os-arr{font-size:18px;color:#3a78ff;opacity:0;transition:opacity .2s} #operations-studio .os-module[data-active="true"] .os-arr{opacity:1} #operations-studio .os-right{min-width:0;display:flex;flex-direction:column;gap:13px} #operations-studio .os-stage{position:relative;border-radius:26px;overflow:hidden;aspect-ratio:1.775;background:#172437;box-shadow:0 26px 65px rgba(39,50,72,.17);isolation:isolate;border:1px solid rgba(22,46,76,.13)} #operations-studio .os-art{position:absolute;inset:0;opacity:0;pointer-events:none;transition:opacity 920ms cubic-bezier(.24,.72,.18,1);will-change:opacity} #operations-studio .os-art[data-on="true"]{opacity:1;z-index:1} #operations-studio .os-art img{width:100%;height:100%;object-fit:cover;display:block;transform:scale(1.045) translate(-.3%,.1%);animation:os-camera-drift 6s ease-in-out infinite alternate;filter:saturate(1.055) contrast(1.015)} #operations-studio .os-art:nth-child(2n) img{animation-direction:alternate-reverse} @keyframes os-camera-drift{from{transform:scale(1.045) translate(-.45%,.1%)}to{transform:scale(1.065) translate(.55%,-.75%)}} #operations-studio .os-stage::after{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;background:linear-gradient(180deg,rgba(6,17,39,.12),transparent 23%,transparent 72%,rgba(10,21,42,.22))} #operations-studio .os-tracer{pointer-events:none;position:absolute;z-index:5;inset:0;width:100%;height:100%;opacity:.85;mix-blend-mode:screen} #operations-studio .os-trace-line{fill:none;stroke:#a8d3ff;stroke-width:.5;stroke-dasharray:1.5 5;opacity:.52} #operations-studio .os-trace-dot{fill:#dbf6ff;filter:drop-shadow(0 0 2px #43a3ff)} #operations-studio .os-playbar{background:#fff;border:1px solid var(--os-border);border-radius:18px;padding:12px;box-shadow:0 8px 23px rgba(34,52,87,.035);display:flex;align-items:stretch;gap:8px} #operations-studio .os-steps{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:5px;flex:1;min-width:0} #operations-studio .os-step{appearance:none;position:relative;display:flex;align-items:center;text-align:left;gap:9px;min-width:0;padding:8px;border:0;background:transparent;border-radius:12px;cursor:pointer;color:#758298;transition:background .2s,color .2s} #operations-studio .os-step:hover{background:#f1f5fd} #operations-studio .os-step[aria-current="step"]{color:#1558e9;background:#eaf1ff} #operations-studio .os-step-num{font-weight:800;flex:0 0 29px;width:29px;height:29px;border-radius:50%;background:#edf0f5;color:#6a7890;display:grid;place-items:center;font-size:13px} #operations-studio .os-step[aria-current="step"] .os-step-num{color:white;background:#3777fc;box-shadow:0 0 0 4px rgba(60,105,248,.1)} #operations-studio .os-step-text{font-size:11px;line-height:1.15;font-weight:750;min-width:0} #operations-studio .os-step-progress{position:absolute;bottom:1px;left:8px;right:8px;height:2px;border-radius:4px;overflow:hidden;background:rgba(54,110,245,.09)} #operations-studio .os-step-progress i{display:block;width:100%;height:100%;background:#4b7efc;transform:scaleX(0);transform-origin:left;will-change:transform} #operations-studio .os-controls{display:flex;align-items:center;gap:7px;border-left:1px solid #e4e9f1;padding-left:10px} #operations-studio .os-control{width:35px;height:35px;border:1px solid #e0e5ee;border-radius:10px;background:#f7f9fc;color:#355078;display:grid;place-items:center;cursor:pointer;font-size:16px;transition:background .2s,color .2s} #operations-studio .os-control:hover{background:#e7eeff;color:#1b62ff} #operations-studio .os-ticker{margin-top:13px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px} #operations-studio .os-stat{min-width:0;border:1px solid #e1e5ed;background:#fff;border-radius:19px;padding:17px 18px 15px;box-shadow:0 15px 37px rgba(35,53,84,.055);position:relative;overflow:hidden;min-height:134px} #operations-studio .os-stat-hd{display:flex;align-items:flex-start;gap:8px} #operations-studio .os-stat-icon{width:32px;height:32px;flex:0 0 32px;border-radius:10px;display:grid;place-items:center;font-size:16px} #operations-studio .os-stat-label{font-size:12px;font-weight:800;line-height:1.25;margin-bottom:3px} #operations-studio .os-stat-desc{font-size:10px;color:#77869b;line-height:1.3} #operations-studio .os-stat-value{font-size:clamp(24px,2vw,33px);letter-spacing:-.055em;font-weight:900;white-space:nowrap;line-height:1.1;margin-top:21px} #operations-studio .os-stat-bars{position:absolute;right:12px;bottom:15px;width:40%;height:49px;display:flex;gap:3px;align-items:flex-end} #operations-studio .os-stat-bars i{flex:1;border-radius:3px 3px 0 0;background:var(--stat-color);height:20%;transition:height 750ms cubic-bezier(.26,.66,.2,1);opacity:.67} #operations-studio .os-stat-bars i:nth-child(3n){opacity:1} #operations-studio .os-stat-note{font-size:11px;color:#8593a7;margin-top:6px} #operations-studio .os-reveal{opacity:0;transform:translateY(20px);transition:transform 620ms ease,opacity 620ms ease} #operations-studio .os-reveal.visible{opacity:1;transform:none} #operations-studio .os-module{animation:os-card-in .5s both} #operations-studio .os-module:nth-child(2){animation-delay:.12s}#operations-studio .os-module:nth-child(3){animation-delay:.23s}#operations-studio .os-module:nth-child(4){animation-delay:.34s} @keyframes os-card-in{from{opacity:0;transform:translateY(-14px)}to{opacity:1;transform:translateY(0)}} #operations-studio .os-alt{display:none;border-radius:26px;min-height:400px;background:linear-gradient(135deg,#142640,#09172b);color:white;padding:40px;align-items:center;justify-content:center;text-align:center;gap:14px;flex-direction:column} #operations-studio .os-alt strong{font-size:32px;letter-spacing:-.04em} #operations-studio .os-alt p{max-width:480px;line-height:1.6;color:#b8c7de} #operations-studio[data-module]:not([data-module="sale"]) .os-stage,#operations-studio[data-module]:not([data-module="sale"]) .os-playbar{display:none} #operations-studio[data-module]:not([data-module="sale"]) .os-alt{display:flex} #operations-studio .os-coming{font-size:10px;color:#8a96a9;font-weight:750;letter-spacing:.04em} @media(max-width:1250px){#operations-studio .os-grid{grid-template-columns:minmax(280px,.34fr) minmax(0,.66fr);gap:18px}#operations-studio .os-heading{font-size:clamp(40px,4.2vw,60px)}#operations-studio .os-copy{padding-right:0}#operations-studio .os-module{min-height:66px;padding:10px}#operations-studio .os-step{gap:5px;padding:7px 5px}#operations-studio .os-step-num{width:26px;height:26px;flex-basis:26px}#operations-studio .os-stat{padding:15px 12px}} @media(max-width:980px){#operations-studio{padding:62px 20px 85px}#operations-studio .os-grid{grid-template-columns:1fr}#operations-studio .os-heading{font-size:clamp(42px,6vw,64px);max-width:800px}#operations-studio .os-lead{max-width:750px;margin-bottom:20px}#operations-studio .os-module-list{grid-template-columns:repeat(2,minmax(0,1fr));margin:0 0 14px}#operations-studio .os-stage{max-height:620px}#operations-studio .os-ticker{grid-template-columns:repeat(2,minmax(0,1fr))}} @media(max-width:620px){#operations-studio{padding:48px 12px 70px}#operations-studio .os-kicker{font-size:9px;letter-spacing:.14em;margin-bottom:20px}#operations-studio .os-heading{font-size:clamp(38px,10vw,54px);margin-bottom:19px}#operations-studio .os-lead{font-size:14px;line-height:1.65}#operations-studio .os-module-list{gap:7px}#operations-studio .os-module{padding:8px;min-height:63px;gap:8px;border-radius:14px}#operations-studio .os-icon{flex-basis:34px;width:34px;height:34px;border-radius:10px}#operations-studio .os-icon svg{width:18px;height:18px}#operations-studio .os-module-copy strong{font-size:11px}#operations-studio .os-module-copy small{font-size:10px;line-height:1.25}#operations-studio .os-arr{display:none}#operations-studio .os-stage{border-radius:17px;aspect-ratio:1.35}#operations-studio .os-art img{object-fit:cover;object-position:52% center}#operations-studio .os-playbar{padding:7px;display:grid;grid-template-columns:1fr;gap:7px}#operations-studio .os-step{padding:9px 3px 12px;flex-direction:column;justify-content:center;align-items:center;text-align:center;gap:4px}#operations-studio .os-step-num{flex:0 0 24px;width:24px;height:24px}#operations-studio .os-step-text{font-size:9px;min-height:20px;display:grid;place-items:center}#operations-studio .os-step-progress{left:3px;right:3px}#operations-studio .os-controls{justify-content:center;border-left:0;border-top:1px solid #e4e9f1;padding:6px 0 0}#operations-studio .os-control{width:38px;height:34px}#operations-studio .os-ticker{gap:8px;margin-top:12px}#operations-studio .os-stat{min-height:123px;padding:13px 11px;border-radius:15px}#operations-studio .os-stat-icon{width:26px;height:26px;flex-basis:26px}#operations-studio .os-stat-label{font-size:11px}#operations-studio .os-stat-desc{font-size:9px}#operations-studio .os-stat-value{font-size:clamp(22px,5.4vw,27px)}#operations-studio .os-stat-bars{height:35px;width:43%}#operations-studio .os-stat-note{font-size:9px}#operations-studio .os-alt{min-height:300px;padding:25px}#operations-studio .os-alt strong{font-size:24px}} @media(max-width:359px){#operations-studio .os-module-copy small{font-size:9px}#operations-studio .os-stat-value{font-size:20px}} @media(prefers-reduced-motion:reduce){#operations-studio *,#operations-studio *::after,#operations-studio *::before{animation:none !important;transition:none !important}#operations-studio .os-reveal{opacity:1;transform:none}} /* Focused revision: no tracer dot, player toolbar, or empty space between story and KPIs. */ #operations-studio .os-right{align-self:start;gap:6px} #operations-studio .os-playbar{padding:10px 12px;min-height:60px} #operations-studio .os-ticker{margin-top:0;gap:10px} #operations-studio .os-stat{padding:14px 12px;min-height:122px;border-radius:16px} #operations-studio .os-stat-hd{gap:6px} #operations-studio .os-stat-value{font-size:clamp(21px,1.75vw,30px);margin-top:17px} #operations-studio .os-stat-bars{height:38px;right:9px;bottom:13px;width:38%} #operations-studio .os-stat-icon{width:28px;height:28px;flex-basis:28px} #operations-studio .os-stat-label{font-size:11px} #operations-studio .os-stat-desc{font-size:9px} #operations-studio .os-steps{width:100%} @media(max-width:1250px){ #operations-studio .os-ticker{grid-template-columns:repeat(2,minmax(0,1fr))} #operations-studio .os-stat{min-height:110px} } @media(min-width:1251px) and (max-width:1450px){ #operations-studio .os-stat-bars{width:34%;opacity:.8} #operations-studio .os-stat-value{font-size:23px} } @media(max-width:620px){ #operations-studio .os-playbar{padding:7px;min-height:unset} #operations-studio .os-ticker{margin-top:0;gap:8px} #operations-studio .os-stat{min-height:116px;padding:12px 10px} #operations-studio .os-stat-value{font-size:clamp(21px,5.4vw,27px)} #operations-studio .os-stat-bars{width:40%;height:33px} } /* Revision: Keep hero and motion unchanged; only remove redundant artwork overlays and vertically align KPI row with the Merkez Yönetim module on desktop. */ #operations-studio .os-ticker { margin-top: var(--clapsy-kpi-desktop-gap, 0px); } @media (max-width: 980px) { #operations-studio .os-ticker { margin-top: 12px; } } /* Storyboard polish: eliminate ghosted double exposures during scene changes. */ #operations-studio .os-art{ opacity:0;clip-path:inset(0 100% 0 0); transition:none;z-index:0; } #operations-studio .os-art[data-on="true"]{ opacity:1;clip-path:inset(0 0 0 0);z-index:2; } #operations-studio .os-art.os-outgoing{ opacity:1;clip-path:inset(0 0 0 0);z-index:1; } #operations-studio .os-art.os-wipe{ transition:clip-path .72s cubic-bezier(.22,.64,.20,1); } @media (prefers-reduced-motion: reduce){ #operations-studio .os-art.os-wipe{transition:none !important;} } /* ===== Continuous 2.5D scene: one background, isolated animated picture elements ===== */ #operations-studio .os-stage.os-living{aspect-ratio:1251/705;contain:layout paint;isolation:isolate;background:#30261b} #operations-studio .os-living .os-world-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;z-index:1;pointer-events:none} #operations-studio .os-stage.os-living::after{background:linear-gradient(180deg,rgba(8,19,42,.02),transparent 70%,rgba(8,19,42,.06));z-index:9} #operations-studio .os-world-actor{position:absolute;z-index:4;will-change:transform;pointer-events:none;transform:translateZ(0)} #operations-studio .os-world-actor img{width:100%;height:100%;display:block;object-fit:fill} #operations-studio .os-actor-waiter{left:21.50%;top:51.06%;width:9.75%;height:14.04%;transform-origin:35% 26%;animation:os-waiter-listen 2.9s ease-in-out infinite} #operations-studio .os-actor-chef1{left:58.51%;top:19.15%;width:9.19%;height:15.46%;transform-origin:28% 24%;animation:os-chef-prep 1.6s ease-in-out infinite} #operations-studio .os-actor-chef2{left:84.73%;top:27.09%;width:8.55%;height:12.48%;transform-origin:24% 30%;animation:os-chef-prep 1.35s ease-in-out infinite reverse} #operations-studio .os-actor-customer{left:74.66%;top:76.45%;width:7.99%;height:11.91%;transform-origin:26% 42%;animation:os-cash-hand 2s ease-in-out infinite} @keyframes os-waiter-listen{0%,100%{transform:rotate(-.4deg)}45%{transform:rotate(5deg) translate(1px,1px)}} @keyframes os-chef-prep{0%,100%{transform:rotate(-3deg) translateY(-1px)}50%{transform:rotate(6deg) translate(1px,2px)}} @keyframes os-cash-hand{0%,100%{transform:rotate(1deg)}55%{transform:rotate(-8deg) translate(1px,-1px)}} #operations-studio .os-living:not([data-action="1"]) .os-actor-waiter{animation-play-state:paused;transform:rotate(0deg)} #operations-studio .os-living:not([data-action="2"]) .os-actor-chef1,#operations-studio .os-living:not([data-action="2"]) .os-actor-chef2{animation-play-state:paused;transform:rotate(0deg)} #operations-studio .os-living:not([data-action="4"]) .os-actor-customer{animation-play-state:paused;transform:rotate(0deg)} #operations-studio .os-table-presence{position:absolute;left:34%;top:54%;width:13%;height:8%;border:2px solid rgba(46,115,255,.9);box-shadow:0 0 22px rgba(68,124,255,.5),inset 0 0 16px rgba(68,124,255,.15);border-radius:50%;transform:rotate(-10deg);z-index:3;opacity:0} #operations-studio .os-living[data-action="0"] .os-table-presence{animation:os-table-breathe 2.3s ease-in-out infinite} @keyframes os-table-breathe{0%,100%{opacity:0;transform:rotate(-10deg) scale(.85)}45%{opacity:.88;transform:rotate(-10deg) scale(1.04)}} #operations-studio .os-tablet-touch{position:absolute;left:27.2%;top:55.3%;width:3.4%;height:5%;z-index:7;transform:rotate(-12deg);opacity:0;} #operations-studio .os-tablet-touch i{position:absolute;left:50%;top:50%;border:1.5px solid rgba(184,235,255,.98);width:25%;aspect-ratio:1;border-radius:50%;transform:translate(-50%,-50%) scale(.2);opacity:0;animation:os-tablet-taps 1.5s ease-out infinite} #operations-studio .os-tablet-touch i:nth-child(2){animation-delay:.5s}#operations-studio .os-tablet-touch i:nth-child(3){animation-delay:1s} #operations-studio .os-living[data-action="1"] .os-tablet-touch{opacity:1} @keyframes os-tablet-taps{0%{opacity:0;transform:translate(-50%,-50%) scale(.2)}15%{opacity:1}80%{opacity:0;transform:translate(-50%,-50%) scale(2.5)}100%{opacity:0}} #operations-studio .os-world-flow{position:absolute;inset:0;z-index:5;width:100%;height:100%;pointer-events:none;opacity:0;transition:opacity .4s} #operations-studio .os-live-path{fill:none;stroke:#7fd8ff;stroke-width:2;stroke-linecap:round;stroke-dasharray:32 92;animation:os-energy-run 2.9s linear infinite;filter:drop-shadow(0 0 3px #2595ff)} #operations-studio .os-living[data-action="1"] .os-world-flow,#operations-studio .os-living[data-action="3"] .os-world-flow{opacity:.84} @keyframes os-energy-run{to{stroke-dashoffset:-248}} #operations-studio .os-bill-terminal{position:absolute;left:74%;top:25%;width:8%;height:12%;z-index:8;overflow:hidden;transform:rotate(11deg);pointer-events:none} #operations-studio .os-bill-sheet{background:linear-gradient(90deg,#f4f3ef,#fff);border-radius:1px 1px 4px 4px;padding:7px 6px;box-shadow:0 4px 11px #12203455;color:#25334a;display:flex;flex-direction:column;gap:2px;font-size:clamp(4px,.56vw,9px);line-height:1.1;transform:translateY(-105%);opacity:0} #operations-studio .os-bill-sheet strong{font-size:1.12em;letter-spacing:.12em;text-align:center}#operations-studio .os-bill-sheet span{font-weight:900;text-align:center}#operations-studio .os-bill-sheet b{font-size:.81em;font-weight:500}#operations-studio .os-bill-sheet em{font-style:normal;opacity:.5}#operations-studio .os-bill-sheet small{font-size:.76em;font-weight:900} #operations-studio .os-living[data-action="1"] .os-bill-sheet{animation:os-ticket-printer 3s cubic-bezier(.2,.7,.2,1) infinite} @keyframes os-ticket-printer{0%,6%{transform:translateY(-103%);opacity:0}30%{transform:translateY(-44%);opacity:1}65%,91%{transform:translateY(0%);opacity:1}100%{transform:translateY(5%);opacity:0}} #operations-studio .os-fire{position:absolute;z-index:5;width:5%;height:7%;pointer-events:none;opacity:.0;transition:opacity .35s} #operations-studio .os-fire-1{left:91.1%;top:26.3%}#operations-studio .os-fire-2{left:96.3%;top:29%} #operations-studio .os-fire i{position:absolute;bottom:0;left:var(--fl);height:var(--ht);width:19%;border-radius:50% 50% 56% 56%;background:linear-gradient(0deg,rgba(247,95,17,.8),rgba(255,183,54,.9) 60%,rgba(255,253,177,.25));transform-origin:bottom center;filter:blur(1px);animation:os-flame .37s ease-in-out infinite alternate} #operations-studio .os-fire i:nth-child(1){--fl:8%;--ht:70%}#operations-studio .os-fire i:nth-child(2){--fl:33%;--ht:100%;animation-delay:.16s}#operations-studio .os-fire i:nth-child(3){--fl:56%;--ht:74%;animation-delay:.3s}#operations-studio .os-fire i:nth-child(4){--fl:73%;--ht:57%;animation-delay:.1s} #operations-studio .os-living[data-action="2"] .os-fire{opacity:.86} @keyframes os-flame{to{transform:scaleY(.75) rotate(7deg)}} #operations-studio .os-souffle{position:absolute;z-index:6;width:4.2%;height:10%;pointer-events:none;opacity:0;transition:opacity .3s} #operations-studio .os-steam-1{left:90.4%;top:13.6%}#operations-studio .os-steam-2{left:95.8%;top:17.3%} #operations-studio .os-souffle i{position:absolute;bottom:0;left:var(--lx);width:36%;height:40%;border-radius:48%;background:radial-gradient(ellipse,rgba(255,255,250,.72) 0%,rgba(255,255,255,.16) 45%,transparent 73%);filter:blur(5px);animation:os-steam-rise 2.1s ease-out infinite} #operations-studio .os-souffle i:nth-child(1){--lx:5%;animation-delay:0s}#operations-studio .os-souffle i:nth-child(2){--lx:39%;animation-delay:.65s}#operations-studio .os-souffle i:nth-child(3){--lx:64%;animation-delay:1.3s} #operations-studio .os-living[data-action="2"] .os-souffle{opacity:1} @keyframes os-steam-rise{0%{transform:translateY(20%) scale(.55);opacity:0}30%{opacity:.7}100%{transform:translate(-28%,-140%) scale(1.8);opacity:0}} #operations-studio .os-service-plate{position:absolute;left:40%;top:58%;width:5.4%;height:3.4%;border-radius:50%;z-index:7;background:radial-gradient(ellipse at center,#fff 34%,#f4f1e5 70%,#e5ddd3 73%);box-shadow:0 3px 8px #503b2a88;transform:translate(38px,-6px) scale(.75);opacity:0;pointer-events:none} #operations-studio .os-food-meal{position:absolute;left:21%;top:22%;width:59%;height:50%;border-radius:50%;background:radial-gradient(circle at 20% 40%,#62a94e 0 14%,transparent 17%),radial-gradient(circle at 65% 40%,#c85a27 0 26%,transparent 29%),radial-gradient(circle at 45% 72%,#e9aa5f 0 28%,transparent 32%)} #operations-studio .os-food-leaf{position:absolute;color:#66ab4b;font-size:clamp(5px,1vw,16px);top:0;left:10%} #operations-studio .os-living[data-action="3"] .os-service-plate{animation:os-service-hand-off 3.4s cubic-bezier(.2,.76,.18,1) infinite} @keyframes os-service-hand-off{0%,8%{transform:translate(38px,-18px) scale(.72);opacity:0}22%{opacity:1}62%,83%{transform:translate(0px,0px) scale(1);opacity:1}100%{transform:translate(0px,0px) scale(1);opacity:0}} #operations-studio .os-pos-signal{position:absolute;left:78.3%;top:68%;width:4.5%;aspect-ratio:1;background:rgba(239,255,247,.95);border-radius:50%;z-index:8;display:grid;place-items:center;transform:scale(.3);opacity:0;box-shadow:0 0 0 8px #24d5a733,0 0 26px #20e6a888;pointer-events:none} #operations-studio .os-pos-signal svg{width:73%;height:73%} #operations-studio .os-living[data-action="4"] .os-pos-signal{animation:os-payment-pop 3.2s ease-in-out infinite} @keyframes os-payment-pop{0%,22%{transform:scale(.2);opacity:0}32%,72%{transform:scale(1);opacity:1}88%,100%{transform:scale(.7);opacity:0}} #operations-studio .os-visually-hidden{position:absolute;overflow:hidden;width:1px;height:1px;clip:rect(0,0,0,0);white-space:nowrap} @media(max-width:980px){#operations-studio .os-bill-sheet{padding:4px 3px}} @media(prefers-reduced-motion:reduce){#operations-studio .os-living *,#operations-studio .os-living *::before,#operations-studio .os-living *::after{animation:none!important;transition:none!important}#operations-studio .os-living .os-world-flow,#operations-studio .os-living .os-fire,#operations-studio .os-living .os-souffle{opacity:0!important}} /* EVENT-SOURCED OPERATIONS: all step-specific notifications start HIDDEN. */ #operations-studio .os-kitchen-console{ position:absolute;left:66.7%;top:5.9%;width:23.8%;height:17%;z-index:6;pointer-events:none; border-radius:9px;border:1px solid rgba(144,179,218,.32); background:linear-gradient(150deg,rgba(17,32,50,.97),rgba(9,20,39,.96)); box-shadow:0 8px 26px #06111a66,inset 0 1px 0 #ffffff24;color:#f4f8ff; display:flex;flex-direction:column;justify-content:center;gap:6%;padding:2.1% 2.3%;overflow:hidden; transform:rotate(-1deg); } #operations-studio .os-console-head{font-size:clamp(6px,.7vw,11px);color:#9fc0ec;letter-spacing:.11em;font-weight:800;display:flex;align-items:center;gap:5px} #operations-studio .os-console-head b{margin-left:auto;color:#eef6ff;font-size:1.05em} #operations-studio .os-console-dot{height:6px;width:6px;border-radius:50%;background:#80a2d5;box-shadow:0 0 0 3px #5d80ad21} #operations-studio .os-console-id{font-size:clamp(8px,.91vw,13px);font-weight:850;line-height:1.12} #operations-studio .os-console-detail{font-size:clamp(6px,.62vw,10px);color:#a9bacd;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} #operations-studio .os-console-meter{height:4px;width:100%;border-radius:100px;background:#374559;overflow:hidden} #operations-studio .os-console-meter i{display:block;width:0;height:100%;background:linear-gradient(90deg,#ff9c45,#66d5aa);border-radius:inherit;transition:width .4s ease} #operations-studio .os-cash-console{position:absolute;left:73.4%;top:57.9%;width:18.4%;height:10.7%;border-radius:8px; background:linear-gradient(145deg,rgba(16,30,44,.98),rgba(22,36,55,.96));z-index:6;box-shadow:0 7px 20px #0b183851; color:#c6ddfa;display:flex;align-items:center;gap:7px;padding:3%;font-size:clamp(6px,.8vw,12px);font-weight:800;pointer-events:none} #operations-studio .os-cash-screen-dot{width:7px;height:7px;flex:none;border-radius:50%;background:#6a8fb9;box-shadow:0 0 0 3px #79aaff20} #operations-studio .os-transaction-note{position:absolute;display:flex;align-items:center;gap:8px;min-width:0;z-index:10; padding:clamp(7px,1.1%,13px) clamp(9px,1.2%,15px);border-radius:13px; background:#fffefa;box-shadow:0 10px 25px #15203135;color:#182642;border:1px solid #eff2f6; opacity:0;visibility:hidden;pointer-events:none;transform:translate3d(0,10px,0) scale(.97); transition:opacity .32s ease,transform .4s cubic-bezier(.2,.8,.18,1),visibility 0s linear .4s; } #operations-studio .os-transaction-note[data-visible="true"]{opacity:1;visibility:visible;transform:translate3d(0,0,0) scale(1);transition-delay:0s} #operations-studio .os-transaction-note strong{display:block;white-space:nowrap;font-size:clamp(8px,.96vw,13px);font-weight:850} #operations-studio .os-transaction-note small{display:block;white-space:nowrap;margin-top:3px;font-size:clamp(6px,.76vw,10px);color:#627086} #operations-studio .os-notification-symbol{width:clamp(19px,3.3vw,35px);height:clamp(19px,3.3vw,35px);flex:none;display:grid;place-items:center; background:#eaf1ff;border-radius:10px;color:#2b6dfb;font-weight:900;font-size:1.1em} #operations-studio .os-transaction-note>i{margin-left:4px;width:7px;height:7px;border-radius:50%;background:#21c580;flex:none;box-shadow:0 0 0 3px #22c18420} #operations-studio .os-note-table{left:31%;top:22.5%;} #operations-studio .os-note-order{left:38%;top:28%;} #operations-studio .os-note-kitchen{right:9%;top:27%;} #operations-studio .os-note-service{left:34%;top:59%;} #operations-studio .os-note-payment{right:4%;top:72%;} #operations-studio .os-note-kitchen .os-notification-symbol{color:#ed8b25;background:#fff0df} #operations-studio .os-note-payment .os-notification-symbol,#operations-studio .os-note-service .os-notification-symbol{color:#15946f;background:#e6f9ef} #operations-studio .os-flow-event{position:absolute;z-index:9;left:48%;top:54%;color:white;letter-spacing:.08em;font-size:clamp(6px,.7vw,10px);font-weight:850; padding:9px 13px;border-radius:20px;background:#2162dfc8;border:1px solid #92bdff5c;box-shadow:0 5px 25px #145fe57b; opacity:0;transform:translateY(10px);transition:opacity .3s,transform .3s;pointer-events:none} #operations-studio .os-flow-event[data-visible="true"]{opacity:1;transform:translateY(0)} #operations-studio .os-flow-event span{margin-left:5px} /* Supersede old repeating, unsynchronized decorative animations. */ #operations-studio .os-living .os-world-flow{opacity:0!important} #operations-studio .os-living[data-sent="true"][data-action="1"] .os-world-flow{opacity:.92!important} #operations-studio .os-living[data-action="3"] .os-world-flow{opacity:0!important} #operations-studio .os-living[data-action="1"] .os-bill-sheet{animation:none!important;transform:translateY(-104%);opacity:0} #operations-studio .os-living[data-sent="true"][data-action="1"] .os-bill-sheet{ animation:os-ticket-printer 1.4s ease-out 1 both!important; } #operations-studio .os-living[data-action="4"] .os-pos-signal{animation:none!important;opacity:0} #operations-studio .os-living[data-paid="true"] .os-pos-signal{animation:os-payment-pop 1.5s ease-out 1 both!important} #operations-studio .os-living[data-action="3"] .os-service-plate{animation:os-service-hand-off 3.5s cubic-bezier(.2,.76,.18,1) 1 both} #operations-studio .os-living[data-action="1"] .os-actor-waiter{animation-iteration-count:2} #operations-studio .os-living[data-action="2"] .os-actor-chef1,#operations-studio .os-living[data-action="2"] .os-actor-chef2{animation-iteration-count:3} @media(max-width:620px){ #operations-studio .os-kitchen-console{border-radius:4px;padding:2%} #operations-studio .os-cash-console{padding:2%;border-radius:4px} #operations-studio .os-transaction-note{gap:3px;padding:5px;border-radius:7px} #operations-studio .os-transaction-note small{display:none} #operations-studio .os-transaction-note>i{width:4px;height:4px} #operations-studio .os-notification-symbol{width:13px;height:13px;border-radius:3px;font-size:7px} #operations-studio .os-console-meter{height:2px} #operations-studio .os-transaction-note strong{font-size:6px} #operations-studio .os-console-head{font-size:4.5px} #operations-studio .os-console-id{font-size:6px} #operations-studio .os-console-detail{font-size:4px} #operations-studio .os-cash-console{font-size:5px} #operations-studio .os-flow-event{font-size:5px;padding:4px 6px} } @media(prefers-reduced-motion:reduce){ #operations-studio .os-transaction-note,#operations-studio .os-flow-event{transition:none!important} } /* Clapsy - approved Sale art preserved; new Stock & Depo interactive stage. */ #operations-studio{padding:50px max(20px,calc((100vw - 1560px)/2)) 76px;} #operations-studio .os-shell{max-width:1520px} #operations-studio .os-grid{grid-template-columns:minmax(300px, .265fr) minmax(0,.735fr);gap:18px;align-items:start} #operations-studio .os-right{gap:0;min-width:0} #operations-studio .os-heading{font-size:clamp(42px,3.73vw,61px)} #operations-studio .os-lead{font-size:clamp(14px,1.1vw,17px);line-height:1.6} #operations-studio .os-stage.os-living{aspect-ratio:1142/760;border-radius:22px 22px 0 0;box-shadow:none;background:#713d2d;border:0;} #operations-studio .os-world-bg{width:100%;height:100%;object-fit:fill;filter:none} #operations-studio .os-living .os-world-flow,#operations-studio .os-living .os-table-presence,#operations-studio .os-living .os-service-plate, #operations-studio .os-living .os-pos-signal,#operations-studio .os-living .os-souffle,#operations-studio .os-living .os-fire, #operations-studio .os-living .os-tablet-touch,#operations-studio .os-living .os-bill-terminal{display:none!important} #operations-studio .os-stage.os-living::after{display:none} #operations-studio .os-kitchen-console{left:53%;top:7%;width:21%;height:18%;opacity:0;visibility:hidden;transform:none;transition:opacity .3s} #operations-studio .os-living[data-action="2"] .os-kitchen-console,#operations-studio .os-living[data-action="3"] .os-kitchen-console{opacity:1;visibility:visible} #operations-studio .os-cash-console{display:none!important} #operations-studio .os-note-table{left:16%;top:28%} #operations-studio .os-note-order{left:31%;top:41%} #operations-studio .os-note-kitchen{right:2%;top:22%} #operations-studio .os-note-service{left:42%;top:65%} #operations-studio .os-note-payment{right:2%;top:62%} #operations-studio .os-transaction-note{max-width:42%;padding:9px 12px;border-radius:13px;background:rgba(255,255,255,.96);box-shadow:0 12px 32px rgba(12,20,35,.20);} #operations-studio .os-playbar{margin-top:0;border-radius:0 0 18px 18px;padding:11px;min-height:60px} #operations-studio .os-ticker{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:21px 0 0!important;opacity:1;transform:none} #operations-studio .os-stat{min-height:136px;padding:17px 17px;border-radius:17px;box-shadow:0 16px 30px rgba(25,41,68,.055)} #operations-studio .os-stat-value{font-size:clamp(23px,1.95vw,34px);margin-top:18px} #operations-studio .os-stat-bars{height:49px;right:12px;width:39%} #operations-studio .os-stat-note{max-width:58%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} #operations-studio[data-module="stock"] .os-alt{display:none!important} #operations-studio .os-stock-screen{display:none;min-width:0} #operations-studio[data-module="stock"] .os-stock-screen{display:block} #operations-studio .os-stock-scene{position:relative;aspect-ratio:1142/722;isolation:isolate;overflow:hidden;border-radius:22px 22px 0 0;background:#182237;} #operations-studio .os-stock-scene::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(0deg,rgba(2,12,27,.38) 0,transparent 20%,transparent 83%,rgba(5,15,34,.18));} #operations-studio .os-stock-image{display:block;width:100%;height:100%;object-fit:cover;pointer-events:none;user-select:none;} #operations-studio .os-stock-trace{position:absolute;inset:0;width:100%;height:100%;z-index:4;opacity:0;pointer-events:none;transition:opacity .5s ease;} #operations-studio .os-stock-scene[data-stage="3"][data-event="done"] .os-stock-trace{opacity:1} #operations-studio .os-stock-route{animation:os-stock-line 2.4s linear infinite;filter:drop-shadow(0 0 5px #21b9ff);} #operations-studio .os-stock-end{filter:drop-shadow(0 0 8px #58caff);} @keyframes os-stock-line{to{stroke-dashoffset:-120}} #operations-studio .os-stock-scan{position:absolute;left:30.9%;top:53%;width:5%;height:10%;z-index:5;transform:rotate(-10deg);opacity:0;pointer-events:none;} #operations-studio .os-stock-scanline{position:absolute;inset:0;border:2px solid #4ceaff;border-radius:10px;box-shadow:0 0 15px #27dbff,inset 0 0 18px #23d7ff55;animation:os-scan 1.2s ease-in-out infinite alternate;} #operations-studio .os-stock-scene[data-stage="0"] .os-stock-scan,#operations-studio .os-stock-scene[data-stage="4"] .os-stock-scan{opacity:.75} @keyframes os-scan{from{transform:scale(.85);opacity:.55}to{transform:scale(1.15);opacity:1}} #operations-studio .os-stock-signal{position:absolute;z-index:4;pointer-events:none;opacity:0;width:20px;height:20px;border:2px solid #51dcff;border-radius:50%;box-shadow:0 0 13px #26abff;animation:os-signal 1.8s ease-out infinite;} #operations-studio .os-stock-signal-warehouse{left:39%;top:42%} #operations-studio .os-stock-signal-branch{left:79%;top:41%} #operations-studio .os-stock-scene[data-stage="2"] .os-stock-signal-warehouse,#operations-studio .os-stock-scene[data-stage="4"] .os-stock-signal-branch{opacity:1} @keyframes os-signal{0%{transform:scale(.65);opacity:.25}60%{opacity:.9}100%{transform:scale(2);opacity:0}} #operations-studio .os-stock-message{position:absolute;z-index:7;display:flex;align-items:center;gap:10px;max-width:260px;padding:10px 13px 10px 10px;border-radius:15px;background:rgba(255,255,255,.97);border:1px solid #f3f6fd;color:#10203b;box-shadow:0 12px 37px #0b1b344c;opacity:0;visibility:hidden;transform:translateY(12px) scale(.96);transition:opacity .32s,transform .42s,visibility 0s linear .42s;pointer-events:none;} #operations-studio .os-stock-message[data-visible="true"]{opacity:1;visibility:visible;transform:none;transition-delay:0s;} #operations-studio .os-stock-message strong{display:block;font-size:clamp(10px,.9vw,14px);white-space:nowrap;line-height:1.22;} #operations-studio .os-stock-message small{display:block;color:#64728a;font-size:clamp(8px,.74vw,11px);margin-top:4px;white-space:nowrap;} #operations-studio .os-stock-message-0{left:12%;top:23%} #operations-studio .os-stock-message-1{left:31%;top:44%} #operations-studio .os-stock-message-2{left:40%;top:13%} #operations-studio .os-stock-message-3{right:5%;top:47%} #operations-studio .os-stock-message-4{right:5%;top:21%} #operations-studio .os-stock-message-5{right:12%;top:64%} #operations-studio .os-stock-emblem{flex:none;width:35px;height:35px;border-radius:11px;display:grid;place-items:center;font-size:19px;font-weight:900;} #operations-studio .os-stock-emblem.amber{background:#fff0df;color:#f28b24} #operations-studio .os-stock-emblem.blue{background:#e8f0ff;color:#2e77fc} #operations-studio .os-stock-emblem.green{background:#def9ea;color:#07a76e} #operations-studio .os-stock-msg-dot{width:7px;height:7px;border-radius:50%;background:currentColor;flex:none;margin-left:auto;} #operations-studio .os-stock-msg-dot.amber{color:#ff9f30} #operations-studio .os-stock-msg-dot.blue{color:#357efa} #operations-studio .os-stock-msg-dot.green{color:#12b981} #operations-studio .os-stock-bottomline{position:absolute;z-index:6;bottom:2.3%;left:3%;right:3%;display:flex;gap:8px;align-items:center;color:#fff;font-size:12px;font-weight:700;text-shadow:0 1px 4px #10192acc} #operations-studio .os-stock-bottomline span:last-child{margin-left:auto;font-size:10px;color:#ebf4ff} #operations-studio .os-stock-indicator{display:inline-block;width:8px;height:8px;flex:none;border-radius:50%;background:#44dfad;box-shadow:0 0 0 5px #44dfad24;} #operations-studio .os-stock-steps{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:4px;background:#fff;border:1px solid #dde4f0;border-radius:0 0 17px 17px;padding:12px 9px;} #operations-studio .os-stock-step{appearance:none;position:relative;display:flex;gap:7px;align-items:center;min-width:0;padding:8px 7px 11px;border:0;border-radius:12px;background:transparent;color:#71809a;cursor:pointer;text-align:left;transition:background .25s,color .25s;} #operations-studio .os-stock-step:hover{background:#f1f5fd} #operations-studio .os-stock-step[aria-current="step"]{background:#e8f1ff;color:#0b5cff} #operations-studio .os-stock-step>span{flex:0 0 29px;width:29px;height:29px;border-radius:50%;display:grid;place-items:center;background:#edf1f7;font-weight:800;color:#64738a;font-size:13px;} #operations-studio .os-stock-step[aria-current="step"]>span{background:#357bff;color:#fff;box-shadow:0 0 0 4px #337aff18;} #operations-studio .os-stock-step b{font-size:clamp(9px,.7vw,11px);line-height:1.15;} #operations-studio .os-stock-step>i{position:absolute;bottom:1px;left:6px;right:6px;height:2px;background:linear-gradient(90deg,#2775ff 0 var(--progress,0%),#dce7fa var(--progress,0%) 100%);} #operations-studio .os-stock-detail{display:flex;align-items:center;gap:13px;min-height:83px;margin-top:12px;padding:13px 17px;background:rgba(255,255,255,.92);border:1px solid #e2e8f3;border-radius:17px;box-shadow:0 10px 32px rgba(24,42,75,.055);} #operations-studio .os-stock-detail-icon{flex:0 0 38px;width:38px;height:38px;display:grid;place-items:center;border-radius:12px;background:#e8f1ff;color:#286dff;font-size:23px;font-weight:900;} #operations-studio .os-stock-detail-main{display:grid;gap:2px;min-width:0} #operations-studio .os-stock-detail-main>span{font-size:10px;letter-spacing:.14em;font-weight:800;color:#7890b0} #operations-studio .os-stock-detail-main strong{font-size:14px;line-height:1.3} #operations-studio .os-stock-detail-main small{font-size:11px;color:#687990;line-height:1.3} #operations-studio .os-stock-detail-mini{margin-left:auto;display:grid;gap:5px;text-align:right;flex:none;} #operations-studio .os-stock-detail-mini span{font-size:9px;letter-spacing:.12em;font-weight:850;color:#a0aec2;} #operations-studio .os-stock-detail-mini b{font-size:11px;color:#2b6eff} #operations-studio .os-stock-subfeatures{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:12px 4px 0} #operations-studio .os-stock-subfeatures span{color:#7184a0;font-size:9px;font-weight:800;letter-spacing:.09em;padding:7px 10px;background:#fff;border:1px solid #e7eaf1;border-radius:100px} #operations-studio .os-module:focus-visible,#operations-studio .os-step:focus-visible,#operations-studio .os-stock-step:focus-visible{outline:3px solid #3b76ff;outline-offset:2px;} #operations-studio .os-stock-screen[hidden]{display:none!important} @media(max-width:1250px){#operations-studio{padding-inline:22px}#operations-studio .os-grid{grid-template-columns:minmax(270px,.3fr) minmax(0,.7fr)}#operations-studio .os-heading{font-size:clamp(42px,4.4vw,57px)}#operations-studio .os-stock-step{gap:4px;padding:7px 4px 10px}#operations-studio .os-stock-step>span{width:25px;height:25px;flex-basis:25px}#operations-studio .os-stock-message{padding:7px;gap:6px}#operations-studio .os-stock-emblem{width:26px;height:26px;font-size:15px}} @media(max-width:980px){#operations-studio .os-grid{grid-template-columns:1fr}#operations-studio .os-heading{font-size:clamp(42px,6.2vw,66px)}#operations-studio .os-module-list{grid-template-columns:repeat(2,minmax(0,1fr))}#operations-studio .os-ticker{grid-template-columns:repeat(2,minmax(0,1fr))}} @media(max-width:620px){#operations-studio{padding:46px 12px 65px}#operations-studio .os-stock-scene{aspect-ratio:1142/722;border-radius:15px 15px 0 0}#operations-studio .os-stage.os-living{aspect-ratio:1142/760;border-radius:15px 15px 0 0}#operations-studio .os-stock-message{max-width:55%;padding:4px 5px;gap:4px;border-radius:7px;box-shadow:0 4px 10px #08152745}#operations-studio .os-stock-emblem{width:17px;height:17px;flex-basis:17px;border-radius:5px;font-size:11px}#operations-studio .os-stock-message strong{font-size:8px}#operations-studio .os-stock-message small{font-size:6px;margin-top:2px}#operations-studio .os-stock-msg-dot{width:4px;height:4px}#operations-studio .os-stock-message-0{left:5%;top:26%}#operations-studio .os-stock-message-1{left:27%;top:42%}#operations-studio .os-stock-message-2{left:39%;top:16%}#operations-studio .os-stock-message-3{right:1%;top:47%}#operations-studio .os-stock-message-4{right:3%;top:20%}#operations-studio .os-stock-message-5{right:9%;top:65%}#operations-studio .os-stock-signal{width:10px;height:10px}#operations-studio .os-stock-bottomline{font-size:8px;bottom:2%}#operations-studio .os-stock-bottomline span:last-child{font-size:7px}#operations-studio .os-stock-steps{padding:6px 4px;gap:1px}#operations-studio .os-stock-step{flex-direction:column;gap:3px;text-align:center;padding:4px 2px 10px}#operations-studio .os-stock-step>span{width:22px;height:22px;flex:0 0 22px;font-size:11px}#operations-studio .os-stock-step b{font-size:7.8px;min-height:18px;display:grid;place-items:center}#operations-studio .os-stock-step>i{left:2px;right:2px}#operations-studio .os-stock-detail{padding:11px;gap:9px}#operations-studio .os-stock-detail-icon{width:28px;flex-basis:28px;height:28px;font-size:17px}#operations-studio .os-stock-detail-main>span{font-size:8px}#operations-studio .os-stock-detail-main strong{font-size:11px}#operations-studio .os-stock-detail-main small{font-size:9px}#operations-studio .os-stock-detail-mini{display:none}#operations-studio .os-stock-subfeatures span{font-size:8px;padding:6px 8px}#operations-studio .os-playbar{padding:7px 5px;min-height:0}#operations-studio .os-transaction-note{padding:4px 6px;gap:3px;max-width:57%}#operations-studio .os-transaction-note strong{font-size:7px}#operations-studio .os-transaction-note small{display:none}#operations-studio .os-notification-symbol{width:15px;height:15px;font-size:10px}#operations-studio .os-stat{min-height:116px;padding:11px 10px}#operations-studio .os-stat-value{font-size:clamp(20px,5.2vw,27px)}#operations-studio .os-stat-bars{width:34%;height:33px}} @media(prefers-reduced-motion:reduce){#operations-studio .os-stock-route,#operations-studio .os-stock-scanline,#operations-studio .os-stock-signal{animation:none!important}#operations-studio .os-stock-message{transition:none!important}} /* Clapsy Finance / independent, state-driven motion scene */ #operations-studio .os-stock-screen:has(.os-stock-steps) {padding-bottom:0} #operations-studio .os-stock-steps{margin-bottom:0} #operations-studio .os-stock-detail,#operations-studio .os-stock-subfeatures{display:none!important} #operations-studio .os-finance-screen{display:none;min-width:0} #operations-studio[data-module="finance"] .os-finance-screen{display:block} #operations-studio .os-finance-screen[hidden]{display:none!important} #operations-studio[data-module="finance"] .os-alt{display:none!important} #operations-studio .os-finance-scene{position:relative;isolation:isolate;overflow:hidden;aspect-ratio:1140/759;border-radius:22px 22px 0 0;background:#101b2e} #operations-studio .os-finance-image{display:block;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none;user-select:none} #operations-studio .os-finance-scene:after{content:"";position:absolute;inset:0;pointer-events:none;z-index:2;background:linear-gradient(0deg,rgba(5,14,32,.42),transparent 17%,transparent 85%,rgba(8,17,33,.09))} #operations-studio .os-finance-steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:5px;background:#fff;border:1px solid #dde4f0;border-radius:0 0 17px 17px;padding:12px 10px} #operations-studio .os-finance-step{appearance:none;border:0;position:relative;display:flex;gap:8px;align-items:center;min-width:0;padding:8px 9px 11px;border-radius:12px;color:#71809a;background:transparent;cursor:pointer;text-align:left;transition:background .2s,color .2s} #operations-studio .os-finance-step:hover{background:#f1f5fd} #operations-studio .os-finance-step:focus-visible{outline:3px solid #377bff;outline-offset:2px} #operations-studio .os-finance-step[aria-current="step"]{background:#eaf1ff;color:#155bf2} #operations-studio .os-finance-step>span{flex:0 0 29px;width:29px;height:29px;border-radius:50%;display:grid;place-items:center;background:#edf1f7;color:#728098;font-size:13px;font-weight:800} #operations-studio .os-finance-step[aria-current="step"]>span{background:#357bff;color:#fff;box-shadow:0 0 0 4px #367aff1b} #operations-studio .os-finance-step b{font-size:clamp(10px,.85vw,12px);line-height:1.2} #operations-studio .os-finance-step>i{position:absolute;bottom:1px;left:8px;right:8px;height:2px;background:linear-gradient(90deg,#377aff 0 var(--progress,0%),#dce7fa var(--progress,0%) 100%)} #operations-studio .os-finance-brief{position:absolute;z-index:6;bottom:2.1%;left:2.5%;right:2.5%;display:flex;gap:9px;align-items:center;color:white;font-size:12px;font-weight:750;text-shadow:0 1px 5px #10192acc} #operations-studio .os-finance-brief span:last-child{margin-left:auto;color:#ebf4ff;font-size:10px;white-space:nowrap} #operations-studio .os-finance-indicator{height:8px;width:8px;flex:none;border-radius:50%;background:#54dfa9;box-shadow:0 0 0 5px #54dfa926} #operations-studio .os-finance-notice{position:absolute;z-index:8;display:flex;align-items:center;gap:10px;width:max-content;max-width:37%;padding:10px 13px 10px 9px;border-radius:14px;border:1px solid #f5f7fc;background:rgba(255,255,255,.98);box-shadow:0 13px 35px #11244550;color:#14243d;opacity:0;visibility:hidden;transform:translate3d(0,14px,0) scale(.975);transition:opacity .36s,transform .44s cubic-bezier(.19,1,.22,1),visibility 0s linear .44s;pointer-events:none} #operations-studio .os-finance-notice[data-visible="true"]{opacity:1;visibility:visible;transform:translate3d(0,0,0) scale(1);transition-delay:0s} #operations-studio .os-finance-notice>span:nth-child(2){display:grid;gap:4px;min-width:0} #operations-studio .os-finance-notice strong{font-size:clamp(10px,.95vw,13px);white-space:nowrap} #operations-studio .os-finance-notice small{font-size:clamp(8px,.73vw,11px);color:#748398;white-space:nowrap} #operations-studio .os-finance-notice-icon{width:34px;height:34px;flex:none;display:grid;place-items:center;color:#2c6df5;background:#eaf1ff;border-radius:10px;font-weight:900;font-size:19px} #operations-studio .os-finance-notice>i{height:7px;width:7px;flex:none;border-radius:50%;background:#18b87d;margin-left:auto;box-shadow:0 0 0 4px #18b87d20} #operations-studio .os-finance-notice-0{left:9%;top:45%} #operations-studio .os-finance-notice-1{right:2%;top:41%} #operations-studio .os-finance-notice-2{left:26%;top:24%} #operations-studio .os-finance-notice-3{right:6%;top:65%} #operations-studio .os-finance-notice-1 .os-finance-notice-icon{color:#e98430;background:#fff0e0} #operations-studio .os-finance-notice-2 .os-finance-notice-icon{color:#9761de;background:#f5ebff} #operations-studio .os-finance-notice-3 .os-finance-notice-icon{color:#0cae76;background:#e0faef} #operations-studio .os-finance-scene[data-event="done"][data-stage="0"] .os-finance-marker-0, #operations-studio .os-finance-scene[data-event="done"][data-stage="1"] .os-finance-marker-1, #operations-studio .os-finance-scene[data-event="done"][data-stage="2"] .os-finance-marker-2, #operations-studio .os-finance-scene[data-event="done"][data-stage="3"] .os-finance-marker-3{opacity:1;transform:scale(1);animation:os-finance-marker-pulse 2.3s ease-in-out infinite} @keyframes os-finance-marker-pulse{0%,100%{filter:brightness(.95)}50%{filter:brightness(1.45)}} @media(max-width:1250px){#operations-studio .os-finance-scene{border-radius:19px 19px 0 0}#operations-studio .os-finance-notice{padding:7px 9px;gap:6px}#operations-studio .os-finance-notice-icon{width:26px;height:26px;border-radius:8px;font-size:15px}#operations-studio .os-finance-notice strong{font-size:10px}#operations-studio .os-finance-notice small{font-size:9px}} @media(max-width:620px){#operations-studio .os-finance-scene{aspect-ratio:1140/759;border-radius:15px 15px 0 0}#operations-studio .os-finance-step{gap:4px;padding:7px 3px 12px;flex-direction:column;justify-content:center;text-align:center}#operations-studio .os-finance-step>span{flex:0 0 23px;width:23px;height:23px;font-size:11px}#operations-studio .os-finance-step b{font-size:9px}#operations-studio .os-finance-steps{padding:6px 4px;gap:2px}#operations-studio .os-finance-notice{max-width:62%;border-radius:7px;padding:5px 6px;gap:4px}#operations-studio .os-finance-notice strong{font-size:8px}#operations-studio .os-finance-notice small{display:none}#operations-studio .os-finance-notice-icon{width:18px;height:18px;border-radius:5px;font-size:11px}#operations-studio .os-finance-notice>i{width:4px;height:4px;margin-left:0}#operations-studio .os-finance-brief{font-size:9px}#operations-studio .os-finance-brief span:last-child{font-size:8px}#operations-studio .os-finance-notice-0{left:9%;top:49%}#operations-studio .os-finance-notice-1{right:2%;top:43%}#operations-studio .os-finance-notice-2{left:19%;top:30%}#operations-studio .os-finance-notice-3{right:3%;top:65%}#operations-studio .os-finance-marker{border-width:1px;border-radius:7px}} @media(prefers-reduced-motion:reduce){#operations-studio .os-finance-notice,#operations-studio .os-finance-marker{transition:none!important;animation:none!important}} /* Original office remains untouched; only the existing monitors get live contents. */ #operations-studio .os-finance-monitor-layer{ position:absolute;left:0;top:0;width:1140px;height:759px;z-index:4; pointer-events:none;transform-origin:0 0;overflow:visible; } #operations-studio .os-finance-monitor-layer canvas{ display:block;position:absolute;top:0;left:0;pointer-events:none; transform-origin:0 0;backface-visibility:hidden; } #operations-studio .os-finance-monitor-left{ width:630px;height:450px;transform:matrix3d(0.801316299,0.0995999484,0,0.000287133824,0.00117615176,0.643734417,0,0.00001897019,0,0,1,0,62,27,0,1); } #operations-studio .os-finance-monitor-right{ width:490px;height:500px;transform:matrix3d(0.220426857,-0.0939071862,0,-0.000310372546,-0.00494250768,0.465812436,0,-0.000006304219,0,0,1,0,784,113,0,1); } #operations-studio .os-finance-marker, #operations-studio .os-finance-marker-0, #operations-studio .os-finance-marker-1, #operations-studio .os-finance-marker-2, #operations-studio .os-finance-marker-3 {display:none!important} @media(prefers-reduced-motion: reduce) { #operations-studio .os-finance-live-monitors{transition:none!important} } /* Live screen visibility takes priority: transaction toasts stay below display bezels. */ #operations-studio .os-finance-notice-1{right:3%;top:52%} #operations-studio .os-finance-notice-2{left:29%;top:53%} @media(max-width:620px){ #operations-studio .os-finance-notice-1{right:2%;top:51%} #operations-studio .os-finance-notice-2{left:18%;top:53%} } /* Fourth Clapsy module. Only visible when selected; prior three remain unchanged. */ #operations-studio .os-manage-screen{display:none;min-width:0;isolation:isolate} #operations-studio[data-module="manage"] .os-manage-screen:not([hidden]){display:block} #operations-studio[data-module="manage"]>.os-alt{display:none!important} #operations-studio[data-module="manage"] .os-right>.os-alt{display:none!important} #operations-studio[data-module="manage"] .os-right>.os-stage, #operations-studio[data-module="manage"] .os-right>.os-playbar{display:none!important} #operations-studio[data-module="manage"]{padding-left:38px;padding-right:38px} #operations-studio[data-module="manage"] .os-grid{grid-template-columns:minmax(305px,.276fr) minmax(0,.724fr);gap:17px;align-items:start} #operations-studio[data-module="manage"] .os-kicker{margin-bottom:35px} #operations-studio[data-module="manage"] .os-heading{font-size:clamp(39px,3.45vw,54px);line-height:1.01;letter-spacing:-.069em} #operations-studio[data-module="manage"] .os-lead{max-width:410px;font-size:clamp(14px,1.09vw,18px);line-height:1.57;margin-top:8px;margin-bottom:29px;color:#617591} #operations-studio[data-module="manage"] .os-copy{padding-right:0} #operations-studio[data-module="manage"] .os-module{min-height:73px} #operations-studio[data-module="manage"] .os-module-list{gap:10px} #operations-studio[data-module="manage"] .os-right{margin-top:-53px;min-width:0} #operations-studio[data-module="manage"] .os-manage-scene{position:relative;aspect-ratio:1048/648;overflow:hidden;isolation:isolate;border-radius:22px 22px 0 0;background:#0b1b36} #operations-studio .os-manage-art{display:block;width:100%;height:100%;object-fit:cover;pointer-events:none;user-select:none} #operations-studio .os-manage-screens{position:absolute;inset:0;z-index:3;transform-origin:0 0;width:1048px;height:648px;pointer-events:none} #operations-studio .os-manage-canvas{display:block;position:absolute;top:0;left:0;transform-origin:0 0;backface-visibility:hidden;will-change:transform} #operations-studio .os-manage-branches{width:480px;height:540px;transform:matrix3d(0.5849068424,0.038731110564,0,1.9856622e-05,0.00079250635998,0.58018916465,0,6.7735586323e-06,0,0,1,0,117,44,0,1)} #operations-studio .os-manage-turnover{width:450px;height:540px;transform:matrix3d(0.53830558468,0.031716362046,0,7.6614042396e-06,-0.0018409981958,0.53889835924,0,2.6602098054e-08,0,0,1,0,409,65,0,1)} #operations-studio .os-manage-products{width:480px;height:540px;transform:matrix3d(0.57541559591,0.0059279881218,0,-4.9326137856e-05,-0.021619299615,0.51327901827,0,-2.4302184659e-05,0,0,1,0,664,86,0,1)} #operations-studio .os-manage-sheen{position:absolute;inset:0;z-index:4;pointer-events:none;opacity:.12;background:linear-gradient(118deg,transparent 18%,rgba(186,219,255,.14) 29%,transparent 40%,transparent 75%);transform:translateX(-120%);animation:os-manage-light 12s ease-in-out infinite} @keyframes os-manage-light{0%,30%,100%{transform:translateX(-130%)}67%{transform:translateX(130%)}} #operations-studio .os-manage-steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;padding:10px 10px;background:#fff;border:1px solid #dbe5f5;border-radius:0 0 18px 18px;min-height:70px} #operations-studio .os-manage-step{appearance:none;border:0;position:relative;display:flex;align-items:center;gap:11px;min-width:0;padding:8px 9px 13px;color:#7486a0;border-radius:13px;background:transparent;cursor:pointer;text-align:left;transition:background .24s,color .24s} #operations-studio .os-manage-step:hover{background:#f3f6fe} #operations-studio .os-manage-step:focus-visible{outline:2px solid #4b7efa;outline-offset:2px} #operations-studio .os-manage-step>span{flex:0 0 32px;width:32px;height:32px;display:grid;place-items:center;border-radius:50%;font-size:13px;font-weight:850;color:#5c7194;background:#edf2fa} #operations-studio .os-manage-step b{font-size:clamp(10px,.92vw,13px);font-weight:760;line-height:1.23} #operations-studio .os-manage-step[aria-current="step"]{color:#1260e9;background:#edf4ff} #operations-studio .os-manage-step[aria-current="step"]>span{background:linear-gradient(130deg,#2877ff,#4668ff);color:#fff;box-shadow:0 4px 10px #3a6aff40} #operations-studio .os-manage-step i{position:absolute;bottom:2px;left:7px;right:7px;height:2px;background:linear-gradient(90deg,#367aff 0 var(--progress,0%),#dce6f7 var(--progress,0%) 100%)} #operations-studio[data-module="manage"] .os-ticker{margin-top:20px!important;gap:13px} #operations-studio[data-module="manage"] .os-stat{min-height:153px;box-shadow:0 10px 28px rgba(24,45,78,.06)} #operations-studio[data-module="manage"] .os-stat-value{font-size:clamp(29px,2.25vw,39px)} #operations-studio[data-module="manage"] .os-stat-bars{height:48px;right:14px;bottom:15px} @media(max-width:1250px){ #operations-studio[data-module="manage"]{padding-left:38px;padding-right:38px} #operations-studio[data-module="manage"] .os-grid{grid-template-columns:minmax(275px,.3fr) minmax(0,.7fr);gap:15px} #operations-studio[data-module="manage"] .os-heading{font-size:clamp(39px,3.45vw,51px)} #operations-studio[data-module="manage"] .os-right{margin-top:-35px} } @media(max-width:980px){ #operations-studio[data-module="manage"]{padding-left:38px;padding-right:38px} #operations-studio[data-module="manage"]{padding-left:20px;padding-right:20px} #operations-studio[data-module="manage"] .os-grid{grid-template-columns:1fr;gap:15px} #operations-studio[data-module="manage"] .os-right{margin-top:0} #operations-studio[data-module="manage"] .os-heading{font-size:clamp(40px,6vw,60px)} #operations-studio[data-module="manage"] .os-lead{max-width:720px;margin:17px 0 24px} #operations-studio[data-module="manage"] .os-module{min-height:65px} #operations-studio[data-module="manage"] .os-module-list{grid-template-columns:repeat(2,minmax(0,1fr));margin:0} #operations-studio[data-module="manage"] .os-manage-steps{min-height:62px} } @media(max-width:620px){ #operations-studio[data-module="manage"]{padding-left:12px;padding-right:12px} #operations-studio[data-module="manage"] .os-manage-scene{border-radius:15px 15px 0 0} #operations-studio[data-module="manage"] .os-manage-steps{padding:7px 4px;gap:2px;min-height:61px;border-radius:0 0 14px 14px} #operations-studio .os-manage-step{flex-direction:column;align-items:center;text-align:center;justify-content:center;gap:4px;padding:5px 2px 11px} #operations-studio .os-manage-step>span{flex:0 0 23px;width:23px;height:23px;font-size:11px} #operations-studio .os-manage-step b{font-size:8.5px} #operations-studio[data-module="manage"] .os-stat{min-height:124px} #operations-studio[data-module="manage"] .os-stat-value{font-size:24px;margin-top:12px} #operations-studio[data-module="manage"] .os-stat:nth-child(2) .os-stat-value{font-size:clamp(18px,4.8vw,23px)} #operations-studio[data-module="manage"] .os-stat:nth-child(2) .os-stat-bars{height:27px;bottom:8px;width:38%} #operations-studio[data-module="manage"] .os-stat-note{font-size:9px;max-width:74%} } @media(prefers-reduced-motion:reduce){#operations-studio .os-manage-sheen{display:none}} /* Split the product list and team panel into two true perspective-aligned canvases. */ #operations-studio .os-manage-products{width:480px;height:350px;transform:matrix3d(0.621280991736,0.0177376033058,0,-1.03305785124e-05,-0.0119480519481,0.551612750885,0,-9.44510035419e-06,0,0,1,0,662,89,0,1);} #operations-studio .os-manage-team{width:400px;height:150px;transform:matrix3d(0.635052614361,0.0399567907966,0,9.09165258165e-05,-0.0523083074351,0.549806081093,0,-6.14288570234e-05,0,0,1,0,744,297,0,1);} /* RENDER FIX: physical wall is blank in the image; all live dashboards are painted exactly once in a single perspective-aware 1048x648 compositor, eliminating double panels and seams. */ #operations-studio .os-manage-canvas:not(.os-manage-master){visibility:hidden!important} #operations-studio .os-manage-canvas.os-manage-master{position:absolute;left:0;top:0;width:1048px;height:648px;transform:none!important;z-index:5;pointer-events:none;backface-visibility:visible} #operations-studio .os-manage-sheen{display:none!important} /* Final dashboard coordinate fix: one matte, one master painter, six mutually exclusive panes. */ #operations-studio .os-manage-screens canvas.os-manage-master{display:block;opacity:1;} #operations-studio .os-manage-screens canvas:not(.os-manage-master){display:none!important;} /* LIVE KPI MOTION / 2026-10-19 Each value is still owned by the correct business-event controller. The separate compositor animation continues between events, so charts never look frozen. Animating transforms instead of layout heights prevents visual jank while controllers update. */ #operations-studio .os-ticker .os-stat-bars i { transform-origin:center bottom; animation:clapsy-kpi-dance var(--kpi-period, 2400ms) cubic-bezier(.48,.08,.47,.94) infinite alternate; animation-delay:var(--kpi-shift, -650ms); will-change:transform; backface-visibility:hidden; } #operations-studio .os-ticker .os-stat-bars i:nth-child(12n + 1){--kpi-period:2100ms;--kpi-shift:-900ms;--kpi-low:.58;--kpi-high:.92} #operations-studio .os-ticker .os-stat-bars i:nth-child(12n + 2){--kpi-period:2700ms;--kpi-shift:-1930ms;--kpi-low:.73;--kpi-high:.98} #operations-studio .os-ticker .os-stat-bars i:nth-child(12n + 3){--kpi-period:1950ms;--kpi-shift:-700ms;--kpi-low:.52;--kpi-high:.88} #operations-studio .os-ticker .os-stat-bars i:nth-child(12n + 4){--kpi-period:3100ms;--kpi-shift:-1800ms;--kpi-low:.71;--kpi-high:1} #operations-studio .os-ticker .os-stat-bars i:nth-child(12n + 5){--kpi-period:2450ms;--kpi-shift:-250ms;--kpi-low:.60;--kpi-high:.96} #operations-studio .os-ticker .os-stat-bars i:nth-child(12n + 6){--kpi-period:2850ms;--kpi-shift:-1550ms;--kpi-low:.78;--kpi-high:1} #operations-studio .os-ticker .os-stat-bars i:nth-child(12n + 7){--kpi-period:2300ms;--kpi-shift:-2250ms;--kpi-low:.49;--kpi-high:.92} #operations-studio .os-ticker .os-stat-bars i:nth-child(12n + 8){--kpi-period:2900ms;--kpi-shift:-1120ms;--kpi-low:.66;--kpi-high:1} #operations-studio .os-ticker .os-stat-bars i:nth-child(12n + 9){--kpi-period:2350ms;--kpi-shift:-1700ms;--kpi-low:.61;--kpi-high:.91} #operations-studio .os-ticker .os-stat-bars i:nth-child(12n + 10){--kpi-period:2600ms;--kpi-shift:-2500ms;--kpi-low:.75;--kpi-high:1} #operations-studio .os-ticker .os-stat-bars i:nth-child(12n + 11){--kpi-period:2150ms;--kpi-shift:-450ms;--kpi-low:.56;--kpi-high:.93} #operations-studio .os-ticker .os-stat-bars i:nth-child(12n + 12){--kpi-period:3050ms;--kpi-shift:-1150ms;--kpi-low:.69;--kpi-high:.99} @keyframes clapsy-kpi-dance{ 0% {transform:scaleY(var(--kpi-low,.62))} 40% {transform:scaleY(var(--kpi-high,.98))} 67% {transform:scaleY(.80)} 100% {transform:scaleY(.98)} } @media (prefers-reduced-motion:reduce){ #operations-studio .os-ticker .os-stat-bars i{animation:none!important;will-change:auto;transform:none!important} } /* Distinct starting trends for the Sales & Service bars. Event controllers may override via inline style. */ #operations-studio .os-stat[data-stat="orders"] .os-stat-bars i:nth-child(1){height:23%} #operations-studio .os-stat[data-stat="orders"] .os-stat-bars i:nth-child(2){height:31%} #operations-studio .os-stat[data-stat="orders"] .os-stat-bars i:nth-child(3){height:28%} #operations-studio .os-stat[data-stat="orders"] .os-stat-bars i:nth-child(4){height:39%} #operations-studio .os-stat[data-stat="orders"] .os-stat-bars i:nth-child(5){height:35%} #operations-studio .os-stat[data-stat="orders"] .os-stat-bars i:nth-child(6){height:49%} #operations-studio .os-stat[data-stat="orders"] .os-stat-bars i:nth-child(7){height:44%} #operations-studio .os-stat[data-stat="orders"] .os-stat-bars i:nth-child(8){height:60%} #operations-studio .os-stat[data-stat="orders"] .os-stat-bars i:nth-child(9){height:53%} #operations-studio .os-stat[data-stat="orders"] .os-stat-bars i:nth-child(10){height:68%} #operations-studio .os-stat[data-stat="orders"] .os-stat-bars i:nth-child(11){height:62%} #operations-studio .os-stat[data-stat="orders"] .os-stat-bars i:nth-child(12){height:80%} #operations-studio .os-stat[data-stat="kitchen"] .os-stat-bars i:nth-child(1){height:74%} #operations-studio .os-stat[data-stat="kitchen"] .os-stat-bars i:nth-child(2){height:63%} #operations-studio .os-stat[data-stat="kitchen"] .os-stat-bars i:nth-child(3){height:71%} #operations-studio .os-stat[data-stat="kitchen"] .os-stat-bars i:nth-child(4){height:59%} #operations-studio .os-stat[data-stat="kitchen"] .os-stat-bars i:nth-child(5){height:66%} #operations-studio .os-stat[data-stat="kitchen"] .os-stat-bars i:nth-child(6){height:54%} #operations-studio .os-stat[data-stat="kitchen"] .os-stat-bars i:nth-child(7){height:48%} #operations-studio .os-stat[data-stat="kitchen"] .os-stat-bars i:nth-child(8){height:58%} #operations-studio .os-stat[data-stat="kitchen"] .os-stat-bars i:nth-child(9){height:43%} #operations-studio .os-stat[data-stat="kitchen"] .os-stat-bars i:nth-child(10){height:40%} #operations-studio .os-stat[data-stat="kitchen"] .os-stat-bars i:nth-child(11){height:32%} #operations-studio .os-stat[data-stat="kitchen"] .os-stat-bars i:nth-child(12){height:26%} #operations-studio .os-stat[data-stat="cash"] .os-stat-bars i:nth-child(1){height:25%} #operations-studio .os-stat[data-stat="cash"] .os-stat-bars i:nth-child(2){height:33%} #operations-studio .os-stat[data-stat="cash"] .os-stat-bars i:nth-child(3){height:28%} #operations-studio .os-stat[data-stat="cash"] .os-stat-bars i:nth-child(4){height:44%} #operations-studio .os-stat[data-stat="cash"] .os-stat-bars i:nth-child(5){height:39%} #operations-studio .os-stat[data-stat="cash"] .os-stat-bars i:nth-child(6){height:51%} #operations-studio .os-stat[data-stat="cash"] .os-stat-bars i:nth-child(7){height:47%} #operations-studio .os-stat[data-stat="cash"] .os-stat-bars i:nth-child(8){height:61%} #operations-studio .os-stat[data-stat="cash"] .os-stat-bars i:nth-child(9){height:58%} #operations-studio .os-stat[data-stat="cash"] .os-stat-bars i:nth-child(10){height:70%} #operations-studio .os-stat[data-stat="cash"] .os-stat-bars i:nth-child(11){height:65%} #operations-studio .os-stat[data-stat="cash"] .os-stat-bars i:nth-child(12){height:85%} #operations-studio .os-stat[data-stat="branch"] .os-stat-bars i:nth-child(1){height:29%} #operations-studio .os-stat[data-stat="branch"] .os-stat-bars i:nth-child(2){height:41%} #operations-studio .os-stat[data-stat="branch"] .os-stat-bars i:nth-child(3){height:35%} #operations-studio .os-stat[data-stat="branch"] .os-stat-bars i:nth-child(4){height:49%} #operations-studio .os-stat[data-stat="branch"] .os-stat-bars i:nth-child(5){height:43%} #operations-studio .os-stat[data-stat="branch"] .os-stat-bars i:nth-child(6){height:57%} #operations-studio .os-stat[data-stat="branch"] .os-stat-bars i:nth-child(7){height:54%} #operations-studio .os-stat[data-stat="branch"] .os-stat-bars i:nth-child(8){height:69%} #operations-studio .os-stat[data-stat="branch"] .os-stat-bars i:nth-child(9){height:62%} #operations-studio .os-stat[data-stat="branch"] .os-stat-bars i:nth-child(10){height:77%} #operations-studio .os-stat[data-stat="branch"] .os-stat-bars i:nth-child(11){height:70%} #operations-studio .os-stat[data-stat="branch"] .os-stat-bars i:nth-child(12){height:88%} /* Responsive navigation: tablet and phone cannot lose access to the hidden desktop links. */ .clapsy-menu-toggle{display:none;flex:none;align-items:center;justify-content:center;flex-direction:column;gap:5px;width:44px;height:44px;background:#17233a;border:1px solid #334765;border-radius:11px;color:#fff;cursor:pointer;} .clapsy-menu-toggle span{display:block;width:19px;height:2px;border-radius:4px;background:#dfe8fa;transition:transform .22s,opacity .22s;} .clapsy-menu-toggle[aria-expanded="true"] span:first-child{transform:translateY(7px) rotate(45deg)} .clapsy-menu-toggle[aria-expanded="true"] span:nth-child(2){opacity:0} .clapsy-menu-toggle[aria-expanded="true"] span:last-child{transform:translateY(-7px) rotate(-45deg)} .clapsy-menu-toggle:focus-visible,.nav a:focus-visible{outline:2px solid #8eafff;outline-offset:4px;} @media(max-width:980px){ .clapsy-menu-toggle{display:flex} .header .nav{position:absolute;display:none;top:calc(100% - 1px);right:18px;left:auto;width:min(320px,calc(100vw - 36px));padding:12px;border-radius:17px;background:#152239;border:1px solid #304765;box-shadow:0 20px 50px #0009;flex-direction:column;align-items:stretch;gap:3px;z-index:35;} .header .nav.is-open{display:flex} .header .nav a{display:block;padding:13px 14px;border-radius:9px;font-size:13px;min-height:44px;} .header .nav a:hover,.header .nav a:focus-visible{background:#223858} } @media(max-width:380px){ .header{padding-inline:11px;gap:7px} .header .brand{gap:7px;min-width:0} .header .brand-name{font-size:14px} .header .brand-sub{font-size:7px;letter-spacing:.08em} .header .brand-logo{width:32px;height:32px;border-radius:9px} .header .brand-logo svg{width:23px;height:23px} .header-actions{gap:3px} .header-actions .button-primary{font-size:10.5px;padding-inline:9px;min-height:40px} .clapsy-menu-toggle{width:38px;height:40px;border-radius:9px} } @media(prefers-reduced-motion:reduce){.clapsy-menu-toggle span{transition:none}} /* Narrow-phone legibility: no 5–6 tiny step labels crammed onto a single row. */ @media(max-width:430px){ #operations-studio .os-steps,#operations-studio .os-stock-steps{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:6px;column-gap:5px} #operations-studio .os-finance-steps,#operations-studio .os-manage-steps{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:6px;column-gap:6px} #operations-studio .os-step{min-height:54px;gap:4px;padding:6px 4px 11px} #operations-studio .os-step-text{font-size:10px;min-height:16px;line-height:1.12} #operations-studio .os-stock-step{min-height:51px;gap:6px;padding:5px 7px 9px} #operations-studio .os-stock-step>span{width:25px;height:25px;flex-basis:25px;font-size:11px} #operations-studio .os-stock-step b{font-size:10px;line-height:1.2} #operations-studio .os-finance-step,#operations-studio .os-manage-step{min-height:49px;flex-direction:row;gap:7px;justify-content:flex-start;text-align:left;padding:7px 8px 11px} #operations-studio .os-finance-step b,#operations-studio .os-manage-step b{font-size:10px} #operations-studio .os-finance-step>span,#operations-studio .os-manage-step>span{width:25px;height:25px;flex-basis:25px} } /* 03 / Real interactive mobile POS showcase: intentionally scoped to this section. */ #clapsy-usecases{position:relative;background:radial-gradient(ellipse at 51% 44%,#f0f5ff 0%,#fff 49%,#fbfcff 85%);color:#071737;padding:108px 5% 110px;overflow:hidden;isolation:isolate} #clapsy-usecases,#clapsy-usecases *{box-sizing:border-box} #clapsy-usecases button,#clapsy-usecases input,#clapsy-usecases select{font-family:inherit} #clapsy-usecases .uc-wrap{width:min(100%,1320px);margin:auto} #clapsy-usecases .uc-heading{text-align:center;margin:0 auto 50px} #clapsy-usecases .uc-eyebrow{font-size:11px;letter-spacing:.28em;font-weight:900;color:#6680a9;margin-bottom:18px;text-transform:uppercase} #clapsy-usecases .uc-title{letter-spacing:-.065em;line-height:1.06;font-weight:900;font-size:clamp(40px,4.3vw,67px);margin:14px 0 18px;color:#081632} #clapsy-usecases .uc-title span{display:block;color:#326cff} #clapsy-usecases .uc-sub{color:#61738e;font-size:16px;line-height:1.6;max-width:680px;margin:0 auto} #clapsy-usecases .uc-toolbar{display:flex;align-items:center;justify-content:center;gap:13px;margin-bottom:22px} #clapsy-usecases .uc-auto-btn{appearance:none;border:1px solid #dfebff;background:#fff;color:#294064;padding:10px 16px;border-radius:99px;display:inline-flex;align-items:center;gap:9px;font-size:12px;font-weight:800;box-shadow:0 7px 23px #a6bfe139;cursor:pointer;transition:all .2s} #clapsy-usecases .uc-auto-btn:hover{border-color:#80a8ff;transform:translateY(-1px)} #clapsy-usecases .uc-auto-dot{display:block;width:9px;height:9px;border-radius:100%;background:#3274ff;box-shadow:0 0 0 4px #e9f0ff} #clapsy-usecases .uc-auto-btn.is-paused .uc-auto-dot{background:#f6a33e;box-shadow:0 0 0 4px #fff4e8} #clapsy-usecases .uc-pips{display:flex;gap:5px;margin-left:5px} #clapsy-usecases .uc-pips i{height:4px;width:19px;background:#d5e2f8;border-radius:3px;transition:background .3s,width .3s} #clapsy-usecases .uc-pips i.on{background:#3673ff;width:31px} #clapsy-usecases .uc-showcase{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(345px,.85fr);align-items:center;gap:clamp(20px,5vw,92px);min-height:715px} #clapsy-usecases .uc-visual{position:relative;display:grid;place-items:center;min-width:0;min-height:715px} #clapsy-usecases .uc-halo{position:absolute;width:min(92%,640px);aspect-ratio:1;max-height:620px;top:50%;left:50%;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle,#eef4ff 0,#eaf1ff 66%,#e9f1ff00 71%);pointer-events:none} #clapsy-usecases .uc-decor{position:absolute;pointer-events:none;z-index:1;display:block;left:4%;top:37%;width:190px;height:300px;background-position:center;background-size:cover;border-radius:90px;opacity:.92;filter:drop-shadow(0 24px 22px #102a5e24);transition:opacity .35s} #clapsy-usecases .uc-decor-mark{position:absolute;right:9%;top:24%;font-size:54px;color:#5a92ff;font-weight:400;z-index:2;transform:rotate(-18deg);pointer-events:none} #clapsy-usecases .uc-phone{position:relative;z-index:3;width:min(355px,95%);height:704px;padding:8px;background:linear-gradient(120deg,#05080d,#242b33 36%,#090c10 64%,#454951 82%,#070b12);border:3px solid #0b1018;border-radius:52px;box-shadow:0 34px 56px #15284935,0 8px 16px #26334c3d,inset 0 1px 2px #d5e0ee77;transform:translateZ(0)} #clapsy-usecases .uc-phone:before{content:'';position:absolute;top:130px;left:-5px;width:3px;height:62px;background:#343c47;border-radius:6px} #clapsy-usecases .uc-phone:after{content:'';position:absolute;top:230px;right:-6px;width:4px;height:58px;background:#303740;border-radius:5px} #clapsy-usecases .uc-screen{position:relative;height:100%;width:100%;display:flex;flex-direction:column;overflow:hidden;border-radius:42px;background:#fff;color:#091830} #clapsy-usecases .uc-statusbar{height:35px;flex:none;padding:10px 19px 0;display:flex;align-items:flex-start;justify-content:space-between;font-weight:800;font-size:11px;color:#171c25;position:relative} #clapsy-usecases .uc-island{position:absolute;left:50%;top:5px;transform:translateX(-50%);width:110px;height:25px;border-radius:22px;background:#03070b} #clapsy-usecases .uc-status-icons{font-size:12px;letter-spacing:-.055em;color:#111927} #clapsy-usecases .uc-appbar{height:43px;display:flex;flex:none;align-items:center;justify-content:space-between;gap:8px;padding:3px 14px 5px} #clapsy-usecases .uc-app-logo{font-weight:950;font-size:21px;letter-spacing:-.065em;color:#071733} #clapsy-usecases .uc-location{border:0;min-width:0;max-width:145px;display:flex;align-items:center;gap:4px;color:#344360;background:#f2f5fb;padding:8px 10px;font-size:10px;font-weight:800;border-radius:13px;cursor:pointer} #clapsy-usecases .uc-location select{font-size:10px;font-weight:800;min-width:0;max-width:111px;border:none;background:transparent;color:#253654;appearance:none;cursor:pointer;outline:none} #clapsy-usecases .uc-user{width:29px;height:29px;display:grid;place-items:center;border-radius:50%;color:#3972ff;background:#edf4ff;font-size:14px} #clapsy-usecases .uc-app-tabs{display:grid;grid-template-columns:1fr 1fr;gap:5px;padding:0 12px 8px;flex:none} #clapsy-usecases .uc-tab{height:39px;white-space:nowrap;background:#eef3fb;border:1px solid transparent;color:#263955;font-size:11px;font-weight:850;border-radius:9px;cursor:pointer;transition:background .2s,color .2s} #clapsy-usecases .uc-tab[aria-selected=true]{background:linear-gradient(125deg,#2a6bff,#377afa);color:#fff;box-shadow:0 5px 8px #2c73ee33} #clapsy-usecases .uc-catbar{display:flex;align-items:center;gap:5px;overflow-x:auto;padding:6px 12px 7px;flex:none;scrollbar-width:none} #clapsy-usecases .uc-catbar::-webkit-scrollbar{display:none} #clapsy-usecases .uc-cat{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-width:59px;height:53px;padding:5px;border:1px solid transparent;border-radius:9px;background:transparent;color:#71809a;font-size:9px;white-space:nowrap;cursor:pointer} #clapsy-usecases .uc-cat-icon{font-size:18px;line-height:1} #clapsy-usecases .uc-cat.on{color:#2869f9;border-color:#6f9aff;background:#f4f8ff;font-weight:850} #clapsy-usecases .uc-searchwrap{padding:0 12px 7px;flex:none} #clapsy-usecases .uc-search{height:34px;border:1px solid #e7ecf7;background:#f7f9ff;border-radius:9px;display:flex;align-items:center;gap:7px;padding:0 10px;color:#8b9bb5} #clapsy-usecases .uc-search input{font-size:10px;outline:0;border:0;width:100%;background:transparent;color:#182744;min-width:0} #clapsy-usecases .uc-scroll{flex:1;min-height:0;overflow:auto;scrollbar-width:thin;scrollbar-color:#ccdafa transparent;padding:2px 12px 8px} #clapsy-usecases .uc-item{min-height:65px;display:grid;grid-template-columns:65px 1fr auto;gap:8px;align-items:center;border-bottom:1px solid #f0f3fa;padding:6px 0} #clapsy-usecases .uc-item-img{width:65px;height:58px;border-radius:10px;object-fit:cover;background:#f0f3f7} #clapsy-usecases .uc-item h3{font-size:10.5px;font-weight:900;color:#081b38;margin:0 0 3px;line-height:1.22} #clapsy-usecases .uc-item p{font-size:8.5px;color:#8392a9;margin:0 0 3px;line-height:1.2} #clapsy-usecases .uc-price{font-weight:950;font-size:11px;color:#12213e} #clapsy-usecases .uc-add{border:0;background:#2b6bff;border-radius:9px;color:white;padding:7px 9px;cursor:pointer;font-size:10px;font-weight:850;min-width:50px} #clapsy-usecases .uc-qty{display:flex;align-items:center;gap:3px;background:#edf2fc;border-radius:9px;padding:3px} #clapsy-usecases .uc-qty button{width:22px;height:22px;cursor:pointer;background:#fff;color:#276afa;border:0;border-radius:6px;font-weight:850} #clapsy-usecases .uc-qty strong{font-size:10px;min-width:12px;text-align:center} #clapsy-usecases .uc-products-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;margin-top:6px} #clapsy-usecases .uc-product-card{border:1px solid #e8eefa;border-radius:11px;overflow:hidden;background:#fff;display:flex;flex-direction:column;min-width:0;padding:5px} #clapsy-usecases .uc-product-card img{height:75px;width:100%;object-fit:contain;border-radius:6px;background:#f7f9fe} #clapsy-usecases .uc-product-card strong{font-size:10px;margin:4px 0 2px;white-space:nowrap;text-overflow:ellipsis;overflow:hidden} #clapsy-usecases .uc-product-card small{font-size:8px;color:#6a7e98} #clapsy-usecases .uc-product-card .uc-add{margin-top:4px;padding:5px 0;min-width:0;width:100%;border-radius:7px} #clapsy-usecases .uc-footer{flex:none;border-top:1px solid #ebf0fb;background:white;padding:7px 11px 8px;box-shadow:0 -7px 15px #eff5ff77} #clapsy-usecases .uc-totalbox{background:#f2f6ff;display:flex;align-items:center;justify-content:space-between;gap:8px;border-radius:10px;padding:9px 9px;margin-bottom:6px;color:#102246} #clapsy-usecases .uc-totalbox strong{font-size:13px;white-space:nowrap;font-weight:950} #clapsy-usecases .uc-totalbox small{display:block;color:#7789a6;font-size:9px;margin-top:3px} #clapsy-usecases .uc-totalbox .uc-sumtitle{font-weight:800;font-size:10px} #clapsy-usecases .uc-cta-row{display:grid;grid-template-columns:1fr 1fr;gap:5px} #clapsy-usecases .uc-cta{min-width:0;height:39px;border:0;border-radius:9px;cursor:pointer;background:#eff4ff;color:#2b69fa;font-size:10px;font-weight:850} #clapsy-usecases .uc-cta.main{background:linear-gradient(120deg,#2367ff,#397dff);color:white} #clapsy-usecases .uc-cta:disabled{opacity:.5;cursor:not-allowed} #clapsy-usecases .uc-homebar{width:105px;height:4px;background:#0c121b;border-radius:100px;flex:none;margin:5px auto 1px} #clapsy-usecases .uc-market-cart{border:1px solid #e6ecf9;border-radius:9px;padding:6px 8px;margin-top:6px} #clapsy-usecases .uc-market-cart-head{display:flex;justify-content:space-between;align-items:center;font-size:10px;color:#142440;font-weight:850} #clapsy-usecases .uc-market-cart-head button{border:0;background:transparent;color:#7284a5;font-size:9px;cursor:pointer} #clapsy-usecases .uc-cart-row{display:flex;align-items:center;gap:4px;font-size:9px;margin-top:5px;min-width:0} #clapsy-usecases .uc-cart-row span:first-child{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} #clapsy-usecases .uc-cart-row .uc-qty button{width:17px;height:18px;font-size:10px} #clapsy-usecases .uc-cart-row .uc-qty{padding:1px 2px} #clapsy-usecases .uc-cart-row b{min-width:43px;text-align:right} #clapsy-usecases .uc-toast{position:absolute;left:13px;right:13px;bottom:102px;z-index:6;padding:11px 13px;text-align:center;background:#101e3b;color:white;border-radius:10px;font-size:11px;font-weight:750;box-shadow:0 12px 30px #19335744;opacity:0;transform:translateY(8px);transition:opacity .24s,transform .24s;pointer-events:none} #clapsy-usecases .uc-toast.on{opacity:1;transform:translateY(0)} #clapsy-usecases .uc-options{position:relative;display:flex;flex-direction:column;gap:15px;max-width:475px;width:100%} #clapsy-usecases .uc-option{width:100%;display:grid;grid-template-columns:68px 1fr 36px;gap:16px;align-items:center;text-align:left;min-height:138px;padding:18px 21px;border:1px solid #e5eaf4;background:rgba(255,255,255,.91);color:#101b35;border-radius:23px;box-shadow:0 8px 28px #a7b6d110;cursor:pointer;transition:border-color .26s,transform .26s,background .26s,box-shadow .26s} #clapsy-usecases .uc-option:hover{transform:translateY(-2px);border-color:#93b6ff} #clapsy-usecases .uc-option[aria-selected=true]{background:linear-gradient(122deg,#fff 0,#f0f5ff 100%);border-color:#407cff;box-shadow:0 12px 36px #527cf322} #clapsy-usecases .uc-icon{width:68px;height:68px;border-radius:20px;background:#f1f4fa;color:#263a5b;display:grid;place-items:center;font-size:29px} #clapsy-usecases .uc-option[aria-selected=true] .uc-icon{background:linear-gradient(135deg,#6098ff,#2a67f9);color:#fff} #clapsy-usecases .uc-option strong{font-size:24px;font-weight:900;letter-spacing:-.045em;line-height:1.05} #clapsy-usecases .uc-option[aria-selected=true] strong{color:#2360e9} #clapsy-usecases .uc-option small{display:block;font-size:14px;line-height:1.5;color:#75829a;font-weight:500;margin-top:6px} #clapsy-usecases .uc-arrow{width:35px;height:35px;border-radius:50%;background:#f3f6fc;display:grid;place-items:center;font-size:22px;font-weight:400;color:#56728f} #clapsy-usecases .uc-option[aria-selected=true] .uc-arrow{background:white;color:#2264ff} #clapsy-usecases .uc-active-rule{position:absolute;left:-25px;top:0;width:2px;height:100%;background:linear-gradient(#e4eaf5,#e4eaf5) center/2px 100% no-repeat;pointer-events:none} #clapsy-usecases .uc-active-rule:after{content:'';position:absolute;left:-5px;top:var(--active-top,14%);width:12px;height:12px;background:#3475ff;box-shadow:0 0 0 5px white;border-radius:50%;transition:top .35s} #clapsy-usecases .uc-fineprint{font-size:12px;text-align:center;color:#8290a7;margin:24px auto 0} @media(max-width:1040px){#clapsy-usecases{padding:85px 3%}#clapsy-usecases .uc-showcase{gap:18px;grid-template-columns:minmax(0,1fr) minmax(305px,.85fr)}#clapsy-usecases .uc-decor{left:-3%;width:160px}} @media(max-width:800px){#clapsy-usecases{padding:75px 18px 86px}#clapsy-usecases .uc-showcase{grid-template-columns:1fr;gap:28px;min-height:0}#clapsy-usecases .uc-heading{margin-bottom:20px}#clapsy-usecases .uc-visual{min-height:710px}#clapsy-usecases .uc-options{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;max-width:680px;margin:auto}#clapsy-usecases .uc-option{grid-template-columns:1fr;justify-items:center;text-align:center;min-height:135px;gap:7px;padding:13px 6px;border-radius:16px}#clapsy-usecases .uc-icon{width:45px;height:45px;font-size:21px;border-radius:12px}#clapsy-usecases .uc-option strong{font-size:17px}#clapsy-usecases .uc-option small{font-size:10px;line-height:1.26;margin-top:4px}#clapsy-usecases .uc-arrow,#clapsy-usecases .uc-active-rule{display:none}#clapsy-usecases .uc-decor{left:18%}} @media(max-width:480px){#clapsy-usecases{padding:67px 11px 66px}#clapsy-usecases .uc-title{font-size:clamp(30px,8.4vw,41px);letter-spacing:-.055em}#clapsy-usecases .uc-sub{font-size:13px}#clapsy-usecases .uc-eyebrow{font-size:10px}#clapsy-usecases .uc-toolbar{margin-bottom:5px}#clapsy-usecases .uc-phone{height:669px;width:min(330px,94%);border-radius:46px}#clapsy-usecases .uc-screen{border-radius:37px}#clapsy-usecases .uc-visual{min-height:684px}#clapsy-usecases .uc-decor{left:-7%;top:41%;width:117px;height:222px}#clapsy-usecases .uc-options{gap:7px}#clapsy-usecases .uc-option{min-height:100px;padding:10px 5px}#clapsy-usecases .uc-icon{width:34px;height:34px;font-size:17px;border-radius:10px}#clapsy-usecases .uc-option strong{font-size:15px}#clapsy-usecases .uc-option small{font-size:9px}#clapsy-usecases .uc-cat{min-width:56px}#clapsy-usecases .uc-product-card img{height:66px}#clapsy-usecases .uc-halo{width:113%}} @media(max-width:800px){#clapsy-usecases .uc-showcase{grid-template-columns:minmax(0,1fr)}#clapsy-usecases .uc-visual{min-width:0}} @media(max-width:360px){#clapsy-usecases .uc-phone{width:min(330px,calc(100vw - 36px));max-width:100%}#clapsy-usecases .uc-visual{min-width:0}#clapsy-usecases .uc-option small{font-size:8px}} @media(prefers-reduced-motion:reduce){#clapsy-usecases *{scroll-behavior:auto!important;transition-duration:.001ms!important;animation-duration:.001ms!important}} /* SECTION 03 FINAL LAYOUT: cleaner hero backdrop, no auto/manual chip, finger-sized selectors */ #clapsy-usecases{padding:96px 4% 88px;background:radial-gradient(ellipse 55% 49% at 35% 56%,#eef4ff 0%,#f8fbff 54%,#fff 100%)} #clapsy-usecases .uc-toolbar,#clapsy-usecases .uc-auto-btn{display:none!important} #clapsy-usecases .uc-wrap{max-width:1310px} #clapsy-usecases .uc-heading{margin-bottom:27px} #clapsy-usecases .uc-showcase{grid-template-columns:minmax(0,1fr) minmax(355px,.82fr);gap:clamp(26px,4vw,70px);min-height:695px} #clapsy-usecases .uc-visual{min-height:695px;isolation:isolate} #clapsy-usecases .uc-decor{z-index:1;left:50%;top:50%;width:min(100%,710px);height:710px;max-width:710px;transform:translate(-50%,-50%);background-repeat:no-repeat;background-position:center;background-size:contain!important;filter:none;border-radius:0;opacity:1} #clapsy-usecases .uc-halo{z-index:0;width:min(90%,570px);max-height:560px;opacity:.66;top:49%} #clapsy-usecases .uc-decor-mark{display:none} #clapsy-usecases .uc-phone{margin:0 auto;box-shadow:0 29px 60px rgba(20,43,82,.19),0 7px 24px rgba(25,45,76,.16),inset 0 1px 3px #d5e0ee77} #clapsy-usecases .uc-options{gap:13px} #clapsy-usecases .uc-option{min-height:132px} #clapsy-usecases .uc-option:focus-visible,#clapsy-usecases .uc-phone button:focus-visible{outline:2px solid #2767fa;outline-offset:3px} #clapsy-usecases .uc-fineprint{margin-top:12px} #clapsy-usecases .uc-cat{min-width:61px} @media(max-width:1000px){ #clapsy-usecases{padding:78px 24px} #clapsy-usecases .uc-showcase{grid-template-columns:minmax(0,1fr) minmax(300px,.82fr);gap:18px;min-height:690px} #clapsy-usecases .uc-options{max-width:390px} #clapsy-usecases .uc-option{padding:14px 12px;grid-template-columns:52px minmax(0,1fr) 22px;gap:10px;min-height:126px} #clapsy-usecases .uc-icon{width:52px;height:52px;border-radius:15px;font-size:22px} #clapsy-usecases .uc-option strong{font-size:21px} #clapsy-usecases .uc-option small{font-size:12px} #clapsy-usecases .uc-arrow{width:26px;height:26px;font-size:18px} #clapsy-usecases .uc-decor{width:660px;height:660px} } @media(max-width:800px){ #clapsy-usecases{padding:66px 22px 75px} #clapsy-usecases .uc-heading{margin-bottom:25px} #clapsy-usecases .uc-showcase{display:flex;flex-direction:column;align-items:center;gap:20px;min-height:0} #clapsy-usecases .uc-options{order:-1;width:min(100%,650px);max-width:650px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;position:relative} #clapsy-usecases .uc-active-rule{display:none} #clapsy-usecases .uc-option{min-height:105px;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:8px;padding:12px 7px;text-align:center;border-radius:16px} #clapsy-usecases .uc-option .uc-icon{width:39px;height:39px;border-radius:12px;font-size:20px} #clapsy-usecases .uc-option strong{font-size:17px} #clapsy-usecases .uc-option small,#clapsy-usecases .uc-option .uc-arrow{display:none} #clapsy-usecases .uc-visual{width:100%;min-height:710px} #clapsy-usecases .uc-decor{width:min(720px,120vw);height:710px;left:50%} #clapsy-usecases .uc-phone{height:689px;width:min(345px,88vw)} } @media(max-width:480px){ #clapsy-usecases{padding:56px 12px 64px} #clapsy-usecases .uc-eyebrow{font-size:10px;margin-bottom:12px} #clapsy-usecases .uc-title{font-size:clamp(29px,8.1vw,39px);line-height:1.10;margin:5px 0 13px} #clapsy-usecases .uc-sub{font-size:13px;line-height:1.52} #clapsy-usecases .uc-heading{margin-bottom:21px} #clapsy-usecases .uc-showcase{gap:15px} #clapsy-usecases .uc-options{gap:7px} #clapsy-usecases .uc-option{min-height:72px;padding:9px 3px;gap:5px;border-radius:13px;box-shadow:0 3px 11px rgba(90,116,155,.05)} #clapsy-usecases .uc-option .uc-icon{width:30px;height:30px;font-size:16px;border-radius:10px} #clapsy-usecases .uc-option strong{font-size:clamp(12px,3.8vw,15px)} #clapsy-usecases .uc-visual{min-height:650px;width:100%} #clapsy-usecases .uc-phone{width:min(323px,calc(100vw - 46px));height:637px;padding:7px;border-width:2px;border-radius:45px} #clapsy-usecases .uc-screen{border-radius:37px} #clapsy-usecases .uc-decor{display:none!important} #clapsy-usecases .uc-visual::before{content:"";position:absolute;z-index:0;width:min(94%,365px);height:570px;left:50%;top:47%;transform:translate(-50%,-50%);border-radius:47% 53% 44% 56%;background:radial-gradient(ellipse at 28% 25%,#e4efff 1%,#f2f7ff 52%,#ffffff00 78%);filter:blur(8px);pointer-events:none} #clapsy-usecases .uc-visual::after{content:"";position:absolute;z-index:0;width:75%;height:260px;left:12%;bottom:6%;border-radius:50%;background:radial-gradient(ellipse,#c9dcfa77,#ffffff00 70%);filter:blur(24px);pointer-events:none} #clapsy-usecases .uc-halo{width:120%;top:52%;opacity:.64} #clapsy-usecases .uc-cat{min-width:56px;height:50px} #clapsy-usecases .uc-item{grid-template-columns:54px 1fr auto;gap:6px;min-height:61px} #clapsy-usecases .uc-item-img{width:54px;height:50px} #clapsy-usecases .uc-item h3{font-size:10px} #clapsy-usecases .uc-item p{font-size:8px} #clapsy-usecases .uc-product-card img{height:60px} #clapsy-usecases .uc-statusbar{height:32px} #clapsy-usecases .uc-footer{padding:6px 9px 6px} #clapsy-usecases .uc-cta{height:36px} #clapsy-usecases .uc-fineprint{margin-top:13px;font-size:10px} } @media(max-width:350px){ #clapsy-usecases{padding-left:8px;padding-right:8px} #clapsy-usecases .uc-phone{width:min(294px,calc(100vw - 28px));height:633px} #clapsy-usecases .uc-visual{min-height:644px} #clapsy-usecases .uc-item{grid-template-columns:49px 1fr auto} #clapsy-usecases .uc-item-img{width:49px;height:46px} #clapsy-usecases .uc-add{min-width:43px;font-size:9px;padding:7px 6px} #clapsy-usecases .uc-cat{min-width:50px} #clapsy-usecases .uc-tab{font-size:10px} #clapsy-usecases .uc-products-grid{gap:5px} } /* INDEPENDENT QA: tablet layout cannot mix the phone and option tiles. */ @media (max-width:1100px){ #clapsy-usecases .uc-showcase{display:flex;flex-direction:column;align-items:center;gap:24px;min-height:0;} #clapsy-usecases .uc-options{order:-1;width:min(100%,680px);max-width:680px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;position:relative;} #clapsy-usecases .uc-option{display:flex;align-items:center;justify-content:center;flex-direction:column;gap:8px;min-height:103px;padding:12px 8px;text-align:center;border-radius:16px;} #clapsy-usecases .uc-option .uc-icon{width:42px;height:42px;border-radius:12px;} #clapsy-usecases .uc-option strong{font-size:18px;} #clapsy-usecases .uc-option small,#clapsy-usecases .uc-option .uc-arrow,#clapsy-usecases .uc-active-rule{display:none;} #clapsy-usecases .uc-visual{min-height:710px;width:100%;} #clapsy-usecases .uc-decor{display:none!important;} #clapsy-usecases .uc-phone{width:min(345px,85vw);max-width:100%;height:689px;} } /* Phone remains visual focal point; no cutout food plates floating under the selectors. */ #clapsy-usecases .uc-halo{background:radial-gradient(ellipse at center,#e6efff 0%,#f4f8ff 56%,rgba(255,255,255,0) 74%);} #clapsy-usecases .uc-decor{display:none!important;} #clapsy-usecases .uc-visual::before{content:"";position:absolute;inset:17% 7% 9%;border-radius:40%;background:radial-gradient(ellipse at center,#dfeaff99,transparent 68%);filter:blur(22px);pointer-events:none;z-index:0;} /* A visible, keyboard operable category affordance inside narrow POS screens. */ #clapsy-usecases .uc-catwrap{position:relative;min-width:0;} #clapsy-usecases .uc-catwrap{display:flex;align-items:center;gap:2px;min-width:0;} #clapsy-usecases .uc-catwrap .uc-catbar{flex:1;min-width:0;padding-right:3px;scrollbar-width:thin;scrollbar-color:#c4d6f9 transparent;} #clapsy-usecases .uc-cat-next{position:relative;flex:0 0 25px;z-index:3;border:1px solid #d5e3ff;background:linear-gradient(90deg,#f8fbff,#fff);color:#2467ed;border-radius:9px;width:25px;height:39px;font-size:25px;line-height:1;font-weight:600;cursor:pointer;} #clapsy-usecases .uc-cat-next[hidden]{display:none!important;} #clapsy-usecases .uc-cat-next:focus-visible{outline:2px solid #206bff;outline-offset:2px;} #clapsy-usecases .uc-item p{font-size:10px;line-height:1.32;color:#788aa5;} #clapsy-usecases .uc-item h3{font-size:11.5px;line-height:1.22;} #clapsy-usecases .uc-item{min-height:67px;} #clapsy-usecases .uc-item-img{object-fit:cover;} #clapsy-usecases .uc-cta{min-height:40px;font-size:11px;} #clapsy-usecases .uc-add{min-height:33px;} #clapsy-usecases .uc-qty button{min-width:29px;min-height:30px;} #clapsy-usecases .uc-cart-row .uc-qty button{min-width:24px;min-height:25px;} #clapsy-usecases .uc-product-card .uc-add{min-height:33px;} @media(max-width:480px){ #clapsy-usecases .uc-visual{min-height:666px;} #clapsy-usecases .uc-phone{height:650px;} #clapsy-usecases .uc-item{min-height:69px;grid-template-columns:52px minmax(0,1fr) auto;gap:7px;} #clapsy-usecases .uc-item-img{width:52px;height:51px;} #clapsy-usecases .uc-item h3{font-size:11px;} #clapsy-usecases .uc-item p{font-size:9.4px;} #clapsy-usecases .uc-cat-next{width:23px;flex-basis:23px;height:36px;} #clapsy-usecases .uc-cta{min-height:41px;font-size:10.5px;} } @media(max-width:350px){ #clapsy-usecases .uc-phone{height:639px;} #clapsy-usecases .uc-visual{min-height:656px;} #clapsy-usecases .uc-item{grid-template-columns:48px minmax(0,1fr) auto;gap:5px;} #clapsy-usecases .uc-item-img{width:48px;height:47px;} #clapsy-usecases .uc-item h3{font-size:10.5px;} #clapsy-usecases .uc-item p{font-size:9px;} } #clapsy-usecases .uc-totalbox[role="button"]{cursor:pointer;border:1px solid #dce8ff;transition:border-color .2s,box-shadow .2s} #clapsy-usecases .uc-totalbox[role="button"]:hover{border-color:#6699ff;box-shadow:0 0 0 2px #bdd2ff55} #clapsy-usecases .uc-totalbox[role="button"]:focus-visible{outline:2px solid #367aff;outline-offset:2px} #clapsy-usecases .uc-summary-link{font-weight:700;color:#326eff;font-size:9px;margin-left:4px;white-space:nowrap} /* 04 | Clapsy farkı — scoped, independent of approved sections. */ #clapsy-difference{background:linear-gradient(180deg,#f8faff 0%,#ffffff 45%,#f3f6fd 100%);color:#091b3d;padding:106px clamp(18px,5vw,84px) 104px;position:relative;isolation:isolate;overflow:hidden} #clapsy-difference *{box-sizing:border-box} #clapsy-difference .cf-container{max-width:1360px;margin:0 auto} #clapsy-difference .cf-top{display:flex;justify-content:space-between;align-items:end;gap:42px;margin-bottom:42px} #clapsy-difference .cf-eye{color:#5576ac;letter-spacing:.26em;font-weight:800;font-size:11px;text-transform:uppercase;display:flex;align-items:center;gap:13px;margin-bottom:18px} #clapsy-difference .cf-eye:after{content:'';display:block;height:1px;width:58px;background:#bfccdf} #clapsy-difference .cf-title{font-size:clamp(36px,4.1vw,65px);letter-spacing:-.065em;line-height:1.065;font-weight:850;max-width:830px;margin:0} #clapsy-difference .cf-title span{color:#376cff;display:block} #clapsy-difference .cf-desc{color:#617392;font-size:16px;line-height:1.75;max-width:335px;margin:0 0 6px} #clapsy-difference .cf-demo{position:relative;border-radius:28px;overflow:hidden;border:1px solid #d7e0ef;box-shadow:0 24px 70px rgba(18,50,110,.11);background:#fff} #clapsy-difference .cf-demo-head{height:72px;display:flex;align-items:center;justify-content:space-between;padding:12px 25px;gap:20px;background:white;border-bottom:1px solid #e7ebf3;position:relative;z-index:8} #clapsy-difference .cf-demo-caption{display:flex;align-items:center;gap:12px;font-size:14px;font-weight:800} #clapsy-difference .cf-live{height:9px;width:9px;display:inline-block;border-radius:50%;background:#4ac29b;box-shadow:0 0 0 5px #4ac29b20} #clapsy-difference .cf-switches{display:flex;gap:4px;border-radius:13px;background:#eff3fb;padding:4px} #clapsy-difference .cf-switches button{cursor:pointer;background:transparent;border:0;border-radius:10px;color:#607394;padding:10px 17px;font-size:12px;font-weight:800;transition:background .25s,color .25s,box-shadow .25s} #clapsy-difference .cf-switches button[aria-pressed=true]{background:white;color:#215be2;box-shadow:0 3px 12px #152b5f12} #clapsy-difference .cf-stage{height:470px;position:relative;overflow:hidden;background:#f2f5fa;--split:50%;isolation:isolate} #clapsy-difference .cf-before, #clapsy-difference .cf-after{position:absolute;inset:0;overflow:hidden} #clapsy-difference .cf-before{background:radial-gradient(ellipse at 35% 40%,#fff7ee 0%,#eff2f7 72%);} #clapsy-difference .cf-after{clip-path:inset(0 0 0 var(--split));background:radial-gradient(ellipse at 75% 40%,#182a4f,#08152d 72%);color:white} #clapsy-difference .cf-scene-label{position:absolute;top:20px;font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.18em;z-index:5;display:flex;gap:8px;align-items:center} #clapsy-difference .cf-before .cf-scene-label{left:26px;color:#9a7282} #clapsy-difference .cf-after .cf-scene-label{right:28px;color:#86a8ff} #clapsy-difference .cf-disconnected{width:100%;height:100%;position:relative} #clapsy-difference .cf-note{position:absolute;display:flex;gap:12px;align-items:center;background:#fff;min-width:160px;border:1px solid #f0e2df;border-radius:16px;box-shadow:0 12px 30px #a983711f;padding:15px 17px;z-index:2;transform:rotate(var(--tilt,0deg));animation:cf-float var(--dr,6s) ease-in-out infinite alternate} #clapsy-difference .cf-note svg{width:24px;height:24px;stroke:#bf8591;fill:none;stroke-width:1.7;flex:none} #clapsy-difference .cf-note strong{display:block;font-size:12px;color:#293650} #clapsy-difference .cf-note small{font-size:10px;color:#9d7f86} #clapsy-difference .cf-note.a{left:10%;top:20%;--tilt:-7deg;--dr:7s} #clapsy-difference .cf-note.b{left:38%;top:15%;--tilt:5deg;--dr:6.5s} #clapsy-difference .cf-note.c{left:25%;top:49%;--tilt:3deg;--dr:5s} #clapsy-difference .cf-note.d{left:55%;top:48%;--tilt:-5deg;--dr:7.5s} #clapsy-difference .cf-note.e{left:8%;top:72%;--tilt:5deg;--dr:8s} #clapsy-difference .cf-disconnect-lines{position:absolute;inset:0;pointer-events:none;width:100%;height:100%} #clapsy-difference .cf-disconnect-lines path{fill:none;stroke:#d9b5bd;stroke-width:1.5;stroke-dasharray:6 10;opacity:.75} #clapsy-difference .cf-fragment-caption{position:absolute;bottom:19px;left:25px;font-size:11px;font-weight:600;color:#ad8490} #clapsy-difference .cf-linked{position:relative;width:100%;height:100%;} #clapsy-difference .cf-center{position:absolute;left:64%;top:48%;transform:translate(-50%,-50%);width:224px;height:232px;background:linear-gradient(145deg,#142b55,#0c1b39);border:1px solid #467de37f;box-shadow:0 20px 65px #051225bd,0 0 70px #3275fc2a;border-radius:22px;padding:23px;display:flex;flex-direction:column;justify-content:space-between;z-index:3} #clapsy-difference .cf-brandline{display:flex;gap:8px;align-items:center;font-weight:840;font-size:21px;letter-spacing:-.06em} #clapsy-difference .cf-mark{width:28px;height:28px;background:linear-gradient(135deg,#85a8ff,#336ef5);border-radius:8px;display:grid;place-items:center;font-size:17px;color:#071631;font-weight:900} #clapsy-difference .cf-center-tag{font-size:11px;color:#9ab0d6;margin:6px 0 12px} #clapsy-difference .cf-headline-kpi{font-size:26px;letter-spacing:-.06em;font-weight:850} #clapsy-difference .cf-kpi-title{font-size:10px;color:#8da7d4} #clapsy-difference .cf-kpi-cols{height:49px;display:flex;gap:6px;align-items:end;padding-top:10px} #clapsy-difference .cf-kpi-cols i{height:var(--h);flex:1;background:linear-gradient(180deg,#77aaff,#376bff);border-radius:3px 3px 0 0;animation:cf-bar 3s ease-in-out infinite alternate;animation-delay:var(--lag)} #clapsy-difference .cf-satellite{position:absolute;display:flex;align-items:center;gap:10px;width:169px;padding:13px;background:#182d52;border:1px solid #355584;border-radius:13px;z-index:4;box-shadow:0 10px 28px #030d2266} #clapsy-difference .cf-satellite svg{width:23px;height:23px;flex:none;stroke:#79a4ff;fill:none;stroke-width:1.8} #clapsy-difference .cf-satellite strong{display:block;font-size:12px;color:#f5f9ff} #clapsy-difference .cf-satellite small{font-size:10px;color:#8faddb} #clapsy-difference .cf-satellite.s1{left:11%;top:18%} #clapsy-difference .cf-satellite.s2{left:10%;top:51%} #clapsy-difference .cf-satellite.s3{right:9%;top:19%} #clapsy-difference .cf-satellite.s4{right:8%;bottom:12%} #clapsy-difference .cf-links{position:absolute;inset:0;width:100%;height:100%;pointer-events:none} #clapsy-difference .cf-links path{stroke:#3a74e9;fill:none;stroke-width:2;stroke-dasharray:3 9;opacity:.7;animation:cf-dash 5s linear infinite} #clapsy-difference .cf-links circle{fill:#68a5ff;filter:drop-shadow(0 0 9px #66a2ff)} #clapsy-difference .cf-divider{position:absolute;inset:0 auto 0 var(--split);width:2px;background:#fff;z-index:6;box-shadow:0 0 0 1px #376cff40,0 0 20px #142d5f30;pointer-events:none} #clapsy-difference .cf-handle{position:absolute;left:var(--split);top:50%;width:52px;height:52px;background:#fff;border:1px solid #cadaf6;border-radius:50%;display:flex;align-items:center;justify-content:center;gap:5px;transform:translate(-50%,-50%);color:#2f68f9;box-shadow:0 10px 30px #061d4842} #clapsy-difference .cf-handle svg{width:21px;height:21px;stroke:currentColor;fill:none;stroke-width:2.2} #clapsy-difference .cf-range{position:absolute;left:0;top:0;width:100%;height:100%;opacity:0;cursor:ew-resize;z-index:7;margin:0} #clapsy-difference .cf-under{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:15px 22px;background:#f5f8ff;border-top:1px solid #e2e9f6;color:#607293;font-size:12px} #clapsy-difference .cf-under span{display:flex;align-items:center;gap:8px} #clapsy-difference .cf-under svg{height:16px;width:16px;stroke:#507af0;fill:none;stroke-width:2} #clapsy-difference .cf-benefits{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:20px 0 39px} #clapsy-difference .cf-benefit{padding:22px 20px 20px;background:#fff;border:1px solid #e1e8f3;border-radius:17px;display:flex;gap:12px;align-items:start;box-shadow:0 11px 34px #0b285509} #clapsy-difference .cf-benefit .cf-icon{width:44px;height:44px;border-radius:12px;flex:none;background:#ecf2ff;display:grid;place-items:center} #clapsy-difference .cf-benefit svg{width:21px;height:21px;stroke:#4272ed;fill:none;stroke-width:2} #clapsy-difference .cf-benefit strong{font-size:14px;letter-spacing:-.03em;line-height:1.3;display:block;margin-bottom:5px} #clapsy-difference .cf-benefit p{font-size:12px;line-height:1.55;color:#71829d;margin:0} #clapsy-difference .cf-bottom{display:flex;justify-content:space-between;align-items:center;gap:30px;border-top:1px solid #dde6f3;padding-top:37px} #clapsy-difference .cf-bottom h3{font-size:clamp(23px,2.3vw,36px);font-weight:820;letter-spacing:-.05em;margin:0 0 6px} #clapsy-difference .cf-bottom p{font-size:14px;color:#71829b;margin:0} #clapsy-difference .cf-bottom-actions{display:flex;gap:10px;flex-wrap:wrap} #clapsy-difference .cf-cta{border:1px solid #3769f8;background:#3974fa;color:#fff;border-radius:11px;padding:15px 24px;font-size:14px;font-weight:750;cursor:pointer;box-shadow:0 9px 20px #3779f540;white-space:nowrap} #clapsy-difference .cf-subcta{background:white;border:1px solid #dce5f4;color:#203555;border-radius:11px;padding:15px 19px;font-size:13px;font-weight:730;cursor:pointer;white-space:nowrap} #clapsy-difference button:focus-visible,#clapsy-difference .cf-range:focus-visible + .cf-divider{outline:3px solid #80adff;outline-offset:3px} @keyframes cf-float{to{transform:translateY(-7px) rotate(var(--tilt))}} @keyframes cf-dash{to{stroke-dashoffset:-96}} @keyframes cf-bar{to{height:calc(var(--h) + 10%)}} @media(max-width:1120px){#clapsy-difference .cf-top{display:block}#clapsy-difference .cf-desc{max-width:670px;margin-top:18px}#clapsy-difference .cf-benefits{grid-template-columns:repeat(2,1fr)}#clapsy-difference .cf-center{left:65%}} @media(max-width:700px){#clapsy-difference{padding:68px 15px 74px}#clapsy-difference .cf-top{margin-bottom:24px}#clapsy-difference .cf-title{font-size:clamp(35px,8.6vw,49px)}#clapsy-difference .cf-desc{font-size:14px}#clapsy-difference .cf-demo-head{height:auto;padding:12px 13px;flex-wrap:wrap;gap:9px}#clapsy-difference .cf-demo-caption{font-size:12px}#clapsy-difference .cf-switches{width:100%}#clapsy-difference .cf-switches button{flex:1;min-height:38px;padding:10px 5px}#clapsy-difference .cf-stage{height:390px}#clapsy-difference .cf-before .cf-scene-label{left:11px;top:15px;font-size:9px}#clapsy-difference .cf-after .cf-scene-label{right:11px;top:15px;font-size:9px}#clapsy-difference .cf-note{min-width:125px;padding:10px 9px;gap:6px}#clapsy-difference .cf-note svg{width:18px;height:18px}#clapsy-difference .cf-note strong{font-size:10px}#clapsy-difference .cf-note small{font-size:8px}#clapsy-difference .cf-note.a{left:7%;top:23%}#clapsy-difference .cf-note.b{left:43%;top:21%}#clapsy-difference .cf-note.c{left:19%;top:47%}#clapsy-difference .cf-note.d{left:43%;top:69%}#clapsy-difference .cf-note.e{left:5%;top:73%}#clapsy-difference .cf-center{width:168px;height:194px;padding:16px;left:67%;top:48%}#clapsy-difference .cf-brandline{font-size:17px}#clapsy-difference .cf-headline-kpi{font-size:23px}#clapsy-difference .cf-satellite{width:111px;padding:8px;gap:5px;border-radius:10px}#clapsy-difference .cf-satellite svg{width:16px;height:16px}#clapsy-difference .cf-satellite strong{font-size:9px}#clapsy-difference .cf-satellite small{font-size:7.5px}#clapsy-difference .cf-satellite.s1{left:3%;top:24%}#clapsy-difference .cf-satellite.s2{left:3%;top:63%}#clapsy-difference .cf-satellite.s3{right:2%;top:22%}#clapsy-difference .cf-satellite.s4{right:2%;bottom:7%}#clapsy-difference .cf-handle{height:40px;width:40px}#clapsy-difference .cf-under{padding:13px 12px;flex-wrap:wrap;font-size:11px}#clapsy-difference .cf-benefits{gap:9px;margin:15px 0 31px}#clapsy-difference .cf-benefit{padding:14px 12px;gap:9px}#clapsy-difference .cf-benefit .cf-icon{width:35px;height:35px}#clapsy-difference .cf-benefit svg{height:17px;width:17px}#clapsy-difference .cf-benefit strong{font-size:11px}#clapsy-difference .cf-benefit p{font-size:10px}#clapsy-difference .cf-bottom{display:block;padding-top:26px}#clapsy-difference .cf-bottom-actions{margin-top:23px}} @media(max-width:375px){#clapsy-difference .cf-stage{height:350px}#clapsy-difference .cf-benefits{grid-template-columns:1fr}#clapsy-difference .cf-note.d{top:66%}#clapsy-difference .cf-note.e{top:78%}#clapsy-difference .cf-satellite.s3{right:1%;top:18%}#clapsy-difference .cf-satellite.s4{right:1%;bottom:8%}} /* QA: prevent before widgets from painting across split; responsive stage has its own composition. */ #clapsy-difference .cf-before{clip-path:inset(0 calc(100% - var(--split)) 0 0)} #clapsy-difference .cf-range:focus-visible ~ .cf-divider .cf-handle{outline:3px solid #7ca5ff;outline-offset:3px} @media(min-width:701px) and (max-width:1120px){ #clapsy-difference .cf-center{left:75%} #clapsy-difference .cf-satellite{display:none} } @media(max-width:700px){ #clapsy-difference .cf-stage{height:455px} #clapsy-difference .cf-center{width:202px;height:210px;left:50%;top:39%;padding:19px} #clapsy-difference .cf-satellite{width:42%;height:48px;padding:9px;gap:8px} #clapsy-difference .cf-satellite.s1{left:5%;top:69%} #clapsy-difference .cf-satellite.s2{left:5%;top:auto;bottom:5%} #clapsy-difference .cf-satellite.s3{right:5%;top:69%} #clapsy-difference .cf-satellite.s4{right:5%;top:auto;bottom:5%} #clapsy-difference .cf-satellite strong{font-size:10px} #clapsy-difference .cf-satellite small{font-size:8px} #clapsy-difference .cf-note{min-width:132px} #clapsy-difference .cf-before .cf-fragment-caption{max-width:90%;font-size:10px} #clapsy-difference .cf-under{display:block} #clapsy-difference .cf-under span+span{margin-top:8px} } @media(max-width:375px){#clapsy-difference .cf-stage{height:443px}#clapsy-difference .cf-center{top:39%;height:200px}#clapsy-difference .cf-satellite{width:45%}#clapsy-difference .cf-satellite.s1,#clapsy-difference .cf-satellite.s2{left:3%}#clapsy-difference .cf-satellite.s3,#clapsy-difference .cf-satellite.s4{right:3%}} @media(prefers-reduced-motion:reduce){#clapsy-difference .cf-note,#clapsy-difference .cf-kpi-cols i,#clapsy-difference .cf-links path{animation:none!important}} /* SECTION 03 — approved three-column editorial layout. App DOM/state kept intact. */ #clapsy-usecases{padding:92px clamp(22px,3.5vw,65px) 76px;background:radial-gradient(ellipse 50% 48% at 55% 51%,#e5efff 0,#f4f8ff 55%,transparent 100%),linear-gradient(115deg,#fff 0%,#f8fbff 55%,#f7faff 100%)} #clapsy-usecases .uc-wrap{max-width:1500px;width:100%} #clapsy-usecases .uc-showcase{display:grid;grid-template-columns:minmax(0,1.035fr) minmax(0,1.01fr) minmax(0,1.015fr);align-items:center;column-gap:clamp(12px,1.65vw,27px);min-height:790px} #clapsy-usecases .uc-heading{align-self:center;text-align:left;max-width:none;margin:0;position:relative;z-index:3} #clapsy-usecases .uc-eyebrow{font-size:11px;letter-spacing:.2em;margin-bottom:35px;color:#718bb6} #clapsy-usecases .uc-eyebrow::after{content:"";display:inline-block;width:70px;height:1px;background:#c9d8f4;vertical-align:middle;margin-left:14px} #clapsy-usecases .uc-title{font-size:clamp(33px,3.15vw,53px);line-height:1.13;letter-spacing:-.055em;margin:0 0 25px;max-width:455px} #clapsy-usecases .uc-title span{margin-top:2px;color:#2869f5} #clapsy-usecases .uc-sub{color:#64799a;font-size:clamp(14px,1.22vw,17px);line-height:1.7;max-width:440px;margin:0} #clapsy-usecases .uc-benefits{display:grid;grid-template-columns:1fr;gap:19px;margin-top:38px} #clapsy-usecases .uc-benefit{display:flex;align-items:center;gap:14px;min-width:0} #clapsy-usecases .uc-benefit-icon{width:55px;height:55px;flex:0 0 55px;display:grid;place-items:center;background:white;border:1px solid #e5ebf7;border-radius:17px;box-shadow:0 8px 20px rgba(82,121,178,.07)} #clapsy-usecases .uc-benefit-bolt{color:#347eff} #clapsy-usecases .uc-benefit-sync{color:#19a79f} #clapsy-usecases .uc-benefit-bars{color:#a368f4} #clapsy-usecases .uc-benefit-heart{color:#f25f85} #clapsy-usecases .uc-benefit-text{display:flex;flex-direction:column;gap:5px;min-width:0} #clapsy-usecases .uc-benefit-text strong{font-weight:850;font-size:clamp(12px,1.07vw,15px);line-height:1.35;color:#0b1d3a} #clapsy-usecases .uc-benefit-text small{font-size:clamp(11px,.95vw,13.5px);line-height:1.5;color:#8295b2} #clapsy-usecases .uc-visual{width:100%;max-width:450px;min-height:745px;justify-self:center;overflow:visible} #clapsy-usecases .uc-halo{width:128%;max-width:550px;background:radial-gradient(circle,#deebff 0,#e8f1ff 45%,transparent 70%)} #clapsy-usecases .uc-visual::before{display:none} #clapsy-usecases .uc-decor{display:none!important} #clapsy-usecases .uc-decor-mark{display:none!important} #clapsy-usecases .uc-phone{width:min(355px,96%);height:704px;max-width:100%;box-shadow:0 27px 57px rgba(25,50,94,.28),0 6px 15px rgba(22,36,61,.15),inset 0 1px 2px #d5e0ee77} #clapsy-usecases .uc-right{display:flex;flex-direction:column;gap:31px;align-items:stretch;min-width:0;margin-left:0;position:relative} #clapsy-usecases .uc-right::before{content:"";position:absolute;left:-17px;top:10px;bottom:160px;width:1px;background:linear-gradient(transparent,#c7dafa 12%,#c7dafa 85%,transparent)} #clapsy-usecases .uc-right::after{content:"";position:absolute;left:-22px;top:24%;height:11px;width:11px;border-radius:50%;background:#2d70ff;box-shadow:0 0 0 5px #fff,0 0 0 6px #d6e3f9} #clapsy-usecases .uc-options{display:flex!important;flex-direction:column;gap:17px;width:100%;max-width:none;min-width:0;margin:0} #clapsy-usecases .uc-option{min-height:129px;display:grid;grid-template-columns:63px minmax(0,1fr) 34px;gap:14px;padding:16px 17px;border-radius:22px;align-items:center;justify-items:stretch;text-align:left;box-shadow:0 14px 32px rgba(45,82,138,.04)} #clapsy-usecases .uc-option[aria-selected="true"]{border-color:#2d70ff;box-shadow:0 15px 36px rgba(45,112,255,.095)} #clapsy-usecases .uc-icon{width:63px;height:63px;border-radius:17px;display:grid;place-items:center} #clapsy-usecases .uc-option strong{font-size:clamp(19px,1.55vw,24px);line-height:1.08;letter-spacing:-.045em;display:block;margin-bottom:7px} #clapsy-usecases .uc-option small{display:block!important;font-size:clamp(11px,.99vw,14px);line-height:1.42;color:#7185a5;margin:0} #clapsy-usecases .uc-option .uc-arrow{display:grid!important;place-items:center;font-size:24px;width:31px;height:31px;border-radius:50%;color:#2368ef;background:#f5f8ff} #clapsy-usecases .uc-active-rule{display:none!important} #clapsy-usecases .uc-hand-note{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;transform:rotate(-5deg);min-height:110px;color:#286df7} #clapsy-usecases .uc-hand-arrow{width:75px;height:56px;align-self:flex-start;margin-left:30%;margin-bottom:-6px} #clapsy-usecases .uc-hand-note p{font-family:"Segoe Print","Bradley Hand","Comic Sans MS",cursive;font-style:italic;font-weight:600;font-size:clamp(15px,1.25vw,21px);line-height:1.45;letter-spacing:.01em;text-align:center;margin:0} #clapsy-usecases .uc-fineprint{font-size:11px;color:#91a1b8;text-align:center;margin:0 auto;max-width:800px} @media(max-width:1220px){ #clapsy-usecases{padding:75px 28px 70px} #clapsy-usecases .uc-showcase{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:"title title" "phone options";column-gap:clamp(20px,4vw,50px);row-gap:26px;min-height:unset} #clapsy-usecases .uc-heading{grid-area:title;text-align:center;width:100%;justify-self:center} #clapsy-usecases .uc-eyebrow{margin-bottom:15px} #clapsy-usecases .uc-title{font-size:clamp(37px,4.6vw,55px);margin:0 auto 16px;max-width:880px} #clapsy-usecases .uc-sub{margin:0 auto;max-width:720px} #clapsy-usecases .uc-benefits{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:15px;margin:26px 0 0} #clapsy-usecases .uc-benefit{flex-direction:column;text-align:center;gap:8px} #clapsy-usecases .uc-benefit-icon{width:46px;height:46px;flex-basis:46px} #clapsy-usecases .uc-benefit-text strong{font-size:12px} #clapsy-usecases .uc-benefit-text small{font-size:11px} #clapsy-usecases .uc-visual{grid-area:phone;min-height:720px} #clapsy-usecases .uc-right{grid-area:options} #clapsy-usecases .uc-option{min-height:110px;grid-template-columns:58px minmax(0,1fr) 28px;padding:14px;gap:12px} #clapsy-usecases .uc-icon{width:58px;height:58px} } @media(max-width:760px){ #clapsy-usecases{padding:55px 15px 54px} #clapsy-usecases .uc-showcase{display:flex!important;flex-direction:column;align-items:stretch;gap:0} #clapsy-usecases .uc-heading{order:0;text-align:left} #clapsy-usecases .uc-eyebrow{font-size:9px;margin-bottom:17px} #clapsy-usecases .uc-eyebrow::after{width:42px;margin-left:9px} #clapsy-usecases .uc-title{max-width:100%;font-size:clamp(32px,7.8vw,48px);margin:0 0 16px} #clapsy-usecases .uc-sub{max-width:100%;font-size:13px;line-height:1.6} #clapsy-usecases .uc-benefits{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:22px 0 20px} #clapsy-usecases .uc-benefit{flex-direction:row;text-align:left;gap:8px} #clapsy-usecases .uc-benefit-icon{width:39px;height:39px;flex-basis:39px;border-radius:12px} #clapsy-usecases .uc-benefit-icon svg{width:20px;height:20px} #clapsy-usecases .uc-benefit-text strong{font-size:11px} #clapsy-usecases .uc-benefit-text small{font-size:10px} #clapsy-usecases .uc-right{display:contents!important} #clapsy-usecases .uc-options{order:1;display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;max-width:none;width:100%;margin:0 0 18px} #clapsy-usecases .uc-option{display:flex!important;flex-direction:column;align-items:center;justify-content:center;min-height:81px;padding:10px 3px;gap:4px;text-align:center;border-radius:13px;box-shadow:0 4px 14px rgba(30,73,145,.05)} #clapsy-usecases .uc-icon{width:31px;height:31px;border-radius:10px} #clapsy-usecases .uc-icon svg{width:18px;height:18px} #clapsy-usecases .uc-option strong{font-size:clamp(12px,3.5vw,16px);margin:0} #clapsy-usecases .uc-option small,#clapsy-usecases .uc-option .uc-arrow{display:none!important} #clapsy-usecases .uc-visual{order:2;width:100%;max-width:none;min-height:680px;display:grid;place-items:center} #clapsy-usecases .uc-phone{height:650px;width:min(345px,calc(100vw - 32px));max-width:100%} #clapsy-usecases .uc-halo{max-width:470px} #clapsy-usecases .uc-hand-note{order:3;min-height:88px;align-self:center;margin:0 auto 12px;transform:rotate(-3deg)} #clapsy-usecases .uc-hand-arrow{height:47px;width:60px;align-self:flex-start} #clapsy-usecases .uc-hand-note p{font-size:16px} #clapsy-usecases .uc-fineprint{font-size:10px} } @media(max-width:390px){ #clapsy-usecases{padding-inline:11px} #clapsy-usecases .uc-title{font-size:clamp(30px,7.8vw,37px)} #clapsy-usecases .uc-benefits{gap:10px 6px} #clapsy-usecases .uc-benefit-text strong{font-size:10px} #clapsy-usecases .uc-benefit-text small{font-size:9px} #clapsy-usecases .uc-visual{min-height:648px} #clapsy-usecases .uc-phone{height:629px;width:min(323px,calc(100vw - 26px))} } /* 05 / SİZE ÖZEL CLAPSY — independently namespaced, no changes to earlier sections */ #clapsy-demo-journey{--d-blue:#316bf6;--d-ink:#0c1835;--d-muted:#687a9b;--d-border:#dce5f3;position:relative;overflow:hidden;padding:102px clamp(16px,4.7vw,76px) 122px;background:radial-gradient(ellipse at 83% 17%,#e4edff 0%,transparent 34%),linear-gradient(180deg,#fafcff 0%,#eef4ff 100%);font-family:Inter,ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;color:var(--d-ink)} #clapsy-demo-journey *{box-sizing:border-box} #clapsy-demo-journey button,#clapsy-demo-journey input,#clapsy-demo-journey textarea{font:inherit} #clapsy-demo-journey button{cursor:pointer} #clapsy-demo-journey .dj-wrap{max-width:1420px;margin:auto;position:relative;z-index:1} #clapsy-demo-journey .dj-head{display:flex;align-items:flex-end;justify-content:space-between;gap:26px;margin-bottom:36px} #clapsy-demo-journey .dj-eye{font-size:11px;letter-spacing:.3em;font-weight:800;color:#4c73b1;margin-bottom:18px} #clapsy-demo-journey h2{font-size:clamp(38px,4.45vw,69px);letter-spacing:-.065em;line-height:1.04;font-weight:850;margin:0;max-width:960px;color:var(--d-ink)} #clapsy-demo-journey h2 em{font-style:normal;color:#346dff} #clapsy-demo-journey .dj-head p{max-width:325px;font-size:16px;color:#596d91;line-height:1.7;margin:0 0 6px} #clapsy-demo-journey .dj-layout{display:grid;grid-template-columns:minmax(0,.93fr) minmax(0,1.07fr);align-items:stretch;border:1px solid #dbe6fa;border-radius:30px;overflow:hidden;background:#fff;box-shadow:0 34px 100px rgba(32,67,140,.11)} #clapsy-demo-journey .dj-config{min-width:0;padding:30px clamp(22px,3vw,44px) 28px;display:flex;flex-direction:column} #clapsy-demo-journey .dj-steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:5px;padding:6px;background:#f3f6fc;border-radius:16px;margin-bottom:35px} #clapsy-demo-journey .dj-step{border:0;background:transparent;border-radius:12px;padding:12px 5px;display:flex;align-items:center;justify-content:center;gap:7px;font-size:11px;font-weight:750;color:#7989a4;min-height:51px;transition:background .2s,color .2s} #clapsy-demo-journey .dj-step i{width:24px;height:24px;display:flex;align-items:center;justify-content:center;border-radius:50%;font-style:normal;background:#e2e9f5;color:#647593;font-size:11px;flex:none} #clapsy-demo-journey .dj-step[aria-current="step"]{background:#fff;color:#1e61ed;box-shadow:0 4px 13px rgba(25,62,134,.08)} #clapsy-demo-journey .dj-step[aria-current="step"] i{background:#326aff;color:white} #clapsy-demo-journey .dj-stage{display:none;min-height:417px;animation:dj-slidein .3s ease both} #clapsy-demo-journey .dj-stage.dj-active{display:block} @keyframes dj-slidein{from{opacity:.3;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}} #clapsy-demo-journey .dj-number{display:block;font-size:11px;letter-spacing:.16em;font-weight:800;color:#5c80bb;margin-bottom:12px} #clapsy-demo-journey h3{font-size:clamp(24px,2.05vw,34px);font-weight:800;line-height:1.16;letter-spacing:-.045em;color:var(--d-ink);margin:0 0 10px} #clapsy-demo-journey .dj-desc{font-size:14px;line-height:1.65;color:#647797;margin:0 0 23px;max-width:500px} #clapsy-demo-journey .dj-type-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px} #clapsy-demo-journey .dj-type{background:#fff;border:1px solid #e3eaf6;padding:15px;border-radius:15px;min-height:87px;text-align:left;display:flex;align-items:center;gap:12px;transition:border-color .18s,box-shadow .18s,background .18s} #clapsy-demo-journey .dj-type[data-selected="true"]{border-color:#5080ff;background:#f2f6ff;box-shadow:0 0 0 2px #e8efff inset} #clapsy-demo-journey .dj-type .dj-type-ico{flex:none;width:43px;height:43px;border-radius:13px;background:#eef2f8;color:#47678c;display:grid;place-items:center} #clapsy-demo-journey .dj-type[data-selected="true"] .dj-type-ico{background:#356eff;color:#fff} #clapsy-demo-journey .dj-type strong{display:block;font-size:13px;color:#162443;line-height:1.25} #clapsy-demo-journey .dj-type small{display:block;font-size:11px;color:#7a8ba5;line-height:1.55;margin-top:4px} #clapsy-demo-journey .dj-unit-intro{font-size:11px;letter-spacing:.12em;text-transform:uppercase;font-weight:800;color:#667b9c;margin-bottom:10px} #clapsy-demo-journey .dj-counter{display:flex;align-items:center;justify-content:space-between;background:#f6f8fc;border:1px solid #e4ebf7;border-radius:15px;padding:14px 16px;margin-bottom:19px;gap:12px} #clapsy-demo-journey .dj-counter strong{font-size:14px;display:block} #clapsy-demo-journey .dj-counter small{font-size:11px;display:block;color:#7686a0;margin-top:4px} #clapsy-demo-journey .dj-counter-controls{display:flex;align-items:center;gap:11px} #clapsy-demo-journey .dj-square{background:#fff;border:1px solid #d7e2f6;color:#2862ed;border-radius:11px;width:34px;height:34px;font-size:20px;display:grid;place-items:center} #clapsy-demo-journey #dj-branches{font-size:21px;font-weight:800;min-width:27px;text-align:center} #clapsy-demo-journey .dj-units{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px} #clapsy-demo-journey .dj-unit{display:flex;align-items:center;gap:8px;padding:11px 12px;background:#fff;border:1px solid #e1e9f5;border-radius:12px;color:#243650;font-size:12px;font-weight:680;min-height:45px;cursor:pointer} #clapsy-demo-journey .dj-unit:has(input:checked){border-color:#7fa1ff;background:#f4f7ff;color:#235ef1} #clapsy-demo-journey .dj-unit input{width:16px;height:16px;accent-color:#326aff;flex:none;margin:0} #clapsy-demo-journey .dj-stage-brief{background:#f4f7ff;border:1px solid #e2eafb;padding:16px 18px;border-radius:14px;display:flex;align-items:center;gap:11px;margin:19px 0 0;font-size:12px;color:#5d7398;line-height:1.55} #clapsy-demo-journey .dj-stage-brief svg{flex:none;color:#3674ff} #clapsy-demo-journey .dj-feature-line{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:19px 0 16px} #clapsy-demo-journey .dj-feature{border:1px solid #e1e9f8;border-radius:15px;padding:16px;background:#fbfcff} #clapsy-demo-journey .dj-feature b{display:block;font-size:14px;margin-bottom:7px} #clapsy-demo-journey .dj-feature small{font-size:11px;color:#788aa6;line-height:1.5;display:block} #clapsy-demo-journey .dj-contact{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px} #clapsy-demo-journey .dj-field{display:flex;flex-direction:column;gap:6px;min-width:0;color:#2c4266;font-size:11px;font-weight:750} #clapsy-demo-journey .dj-field.dj-full{grid-column:1 / -1} #clapsy-demo-journey .dj-field input,#clapsy-demo-journey .dj-field textarea{border:1px solid #dfe7f5;border-radius:11px;padding:12px 13px;color:#102449;background:#fcfdff;outline:none;width:100%;font-size:13px;min-width:0} #clapsy-demo-journey .dj-field input:focus,#clapsy-demo-journey .dj-field textarea:focus{border-color:#437bff;box-shadow:0 0 0 3px rgba(64,116,246,.1)} #clapsy-demo-journey .dj-field textarea{resize:vertical;min-height:69px} #clapsy-demo-journey .dj-legal{font-size:11px;line-height:1.6;color:#7e8ca4;margin:12px 0 0} #clapsy-demo-journey .dj-result{border:1px solid #cfe7dd;background:#f1fbf7;color:#1d7551;border-radius:12px;padding:15px;margin:13px 0 0;font-size:13px;line-height:1.6;display:none} #clapsy-demo-journey .dj-result[data-shown="true"]{display:block} #clapsy-demo-journey .dj-bottom{display:flex;justify-content:space-between;align-items:center;gap:14px;margin-top:auto;padding-top:19px} #clapsy-demo-journey .dj-back{background:#fff;color:#50698d;border:1px solid #dce5f5;padding:14px 18px;border-radius:12px;font-weight:700;font-size:13px;min-height:48px} #clapsy-demo-journey .dj-back:disabled{opacity:0;pointer-events:none} #clapsy-demo-journey .dj-next{border:0;border-radius:12px;background:#366ffc;color:#fff;font-size:13px;padding:15px 24px;min-width:175px;font-weight:750;box-shadow:0 12px 24px rgba(46,108,246,.19);min-height:48px} #clapsy-demo-journey .dj-progress-track{height:3px;border-radius:2px;background:#edf1fa;margin-top:27px;overflow:hidden} #clapsy-demo-journey .dj-progress-track span{display:block;background:#3772ff;width:25%;height:100%;transition:width .25s} #clapsy-demo-journey .dj-preview{position:relative;padding:27px clamp(20px,2.5vw,38px) 24px;background:radial-gradient(circle at 40% 10%,#213a68 0%,transparent 35%),linear-gradient(155deg,#0d1b35 0%,#08142a 100%);color:white;display:flex;flex-direction:column;min-width:0;overflow:hidden} #clapsy-demo-journey .dj-preview::after{content:'';position:absolute;inset:0;opacity:.13;pointer-events:none;background-image:radial-gradient(#5d84d1 1px,transparent 1px);background-size:24px 24px;mask-image:linear-gradient(to bottom,transparent 25%,black)} #clapsy-demo-journey .dj-preview>*{position:relative;z-index:1} #clapsy-demo-journey .dj-preview-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:22px} #clapsy-demo-journey .dj-brand{font-size:19px;font-weight:850;letter-spacing:-.055em;display:flex;align-items:center;gap:9px} #clapsy-demo-journey .dj-brandmark{height:31px;width:31px;background:#477eff;border-radius:9px;display:grid;place-items:center;font-weight:900} #clapsy-demo-journey .dj-demo-label{font-size:10px;font-weight:750;letter-spacing:.09em;border:1px solid #35516e;padding:7px 9px;border-radius:999px;color:#9bb7e6;white-space:nowrap} #clapsy-demo-journey .dj-monitor{border:1px solid #2f4972;border-radius:22px;background:linear-gradient(140deg,#14294b 0%,#11223e 100%);padding:23px;box-shadow:0 20px 55px rgba(0,0,0,.15);min-width:0} #clapsy-demo-journey .dj-monitor-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:19px} #clapsy-demo-journey .dj-monitor-head span{font-size:11px;color:#91abcf} #clapsy-demo-journey .dj-on{display:inline-flex;align-items:center;gap:5px;font-size:10px;color:#6de0b2} #clapsy-demo-journey .dj-on::before{content:'';height:6px;width:6px;border-radius:50%;background:#35d89e;box-shadow:0 0 0 4px rgba(53,216,158,.1)} #clapsy-demo-journey .dj-preview-name{font-size:clamp(18px,1.8vw,27px);font-weight:800;letter-spacing:-.04em;margin-bottom:6px;line-height:1.13} #clapsy-demo-journey .dj-preview-sub{font-size:11px;color:#8da8cc;margin-bottom:20px} #clapsy-demo-journey .dj-metrics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px} #clapsy-demo-journey .dj-metric{border:1px solid #2d4972;background:#1a3153;border-radius:12px;padding:12px 10px} #clapsy-demo-journey .dj-metric small{display:block;color:#8faacd;font-size:10px;line-height:1.4} #clapsy-demo-journey .dj-metric strong{display:block;color:#fff;font-size:clamp(18px,1.8vw,27px);margin:8px 0 5px} #clapsy-demo-journey .dj-metric i{font-style:normal;color:#70d7b6;font-size:9px} #clapsy-demo-journey .dj-screen-title{display:flex;justify-content:space-between;align-items:center;margin:25px 0 12px;gap:10px;font-size:12px;font-weight:750} #clapsy-demo-journey .dj-screen-title small{font-size:10px;color:#8eaad0;font-weight:500} #clapsy-demo-journey .dj-visual-flow{min-height:123px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:13px;align-items:center} #clapsy-demo-journey .dj-flow-unit{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;border:1px solid #31517c;border-radius:14px;padding:12px 5px;background:linear-gradient(160deg,#1b365c,#172b4b);min-width:0;min-height:107px} #clapsy-demo-journey .dj-flow-unit:not(:last-child)::after{position:absolute;content:'›';color:#6aa3ff;font-size:24px;right:-13px;top:38%;z-index:3} #clapsy-demo-journey .dj-unit-icon{width:33px;height:33px;border-radius:10px;display:grid;place-items:center;color:#9cbfff;background:#2b4b7f} #clapsy-demo-journey .dj-flow-unit b{font-size:11px;font-weight:750;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} #clapsy-demo-journey .dj-flow-unit small{font-size:9px;color:#9db4d3} #clapsy-demo-journey .dj-bar-wrap{display:flex;align-items:end;gap:7px;height:73px;padding:6px 0;border-bottom:1px solid #375273} #clapsy-demo-journey .dj-bar{height:var(--h);background:linear-gradient(0deg,#3b70ef,#80adff);border-radius:4px 4px 0 0;flex:1;transform-origin:bottom;animation:dj-bars 3.4s ease-in-out infinite alternate;animation-delay:var(--delay)} @keyframes dj-bars{0%{transform:scaleY(.72)}100%{transform:scaleY(1)}} #clapsy-demo-journey .dj-preview-foot{margin-top:auto;padding-top:23px} #clapsy-demo-journey .dj-mini-title{color:#9bb4da;font-size:11px;font-weight:750;margin-bottom:11px} #clapsy-demo-journey .dj-selected-units{display:flex;flex-wrap:wrap;gap:7px;min-height:36px;align-content:start} #clapsy-demo-journey .dj-pill{font-size:10px;color:#b6d0f3;border:1px solid #3a5581;border-radius:20px;background:#1b3355;padding:7px 9px;white-space:nowrap} #clapsy-demo-journey .dj-preview-summary{font-size:11px;color:#95b0d6;line-height:1.6;margin-top:12px} #clapsy-demo-journey button:focus-visible,#clapsy-demo-journey input:focus-visible,#clapsy-demo-journey textarea:focus-visible{outline:3px solid #ffba4a;outline-offset:3px} @media(max-width:1170px){#clapsy-demo-journey .dj-head{align-items:flex-start}#clapsy-demo-journey .dj-layout{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}#clapsy-demo-journey .dj-config{padding:24px}#clapsy-demo-journey .dj-preview{padding:24px}#clapsy-demo-journey .dj-steps{gap:2px}#clapsy-demo-journey .dj-step{font-size:10px;gap:4px;padding-inline:2px}#clapsy-demo-journey .dj-type{padding:10px;gap:8px}#clapsy-demo-journey .dj-type .dj-type-ico{width:35px;height:35px}#clapsy-demo-journey .dj-monitor{padding:17px}} @media(max-width:900px){#clapsy-demo-journey{padding:73px 22px 88px}#clapsy-demo-journey .dj-head{flex-direction:column;gap:13px}#clapsy-demo-journey .dj-head p{max-width:620px}#clapsy-demo-journey .dj-layout{grid-template-columns:1fr;max-width:780px;margin:auto}#clapsy-demo-journey .dj-config{min-height:0}#clapsy-demo-journey .dj-stage{min-height:0}#clapsy-demo-journey .dj-bottom{padding-top:22px}#clapsy-demo-journey .dj-preview{min-height:430px}#clapsy-demo-journey .dj-preview-foot{padding-top:22px}#clapsy-demo-journey .dj-monitor{max-width:none}} @media(max-width:530px){#clapsy-demo-journey{padding:58px 12px 73px}#clapsy-demo-journey .dj-head{padding:0 7px}#clapsy-demo-journey h2{font-size:clamp(37px,9.5vw,50px)}#clapsy-demo-journey .dj-head p{font-size:14px}#clapsy-demo-journey .dj-layout{border-radius:20px}#clapsy-demo-journey .dj-config{padding:17px 14px 20px}#clapsy-demo-journey .dj-steps{margin-bottom:24px;padding:4px;gap:0}#clapsy-demo-journey .dj-step{flex-direction:column;gap:4px;padding:6px 2px;font-size:9px;min-height:54px;line-height:1.15}#clapsy-demo-journey .dj-step i{width:20px;height:20px;font-size:10px}#clapsy-demo-journey h3{font-size:26px}#clapsy-demo-journey .dj-desc{font-size:13px;margin-bottom:16px}#clapsy-demo-journey .dj-type-grid{gap:8px}#clapsy-demo-journey .dj-type{min-height:76px;padding:9px 7px;gap:7px;flex-direction:column;align-items:flex-start}#clapsy-demo-journey .dj-type .dj-type-ico{height:30px;width:30px;border-radius:9px}#clapsy-demo-journey .dj-type strong{font-size:12px}#clapsy-demo-journey .dj-type small{font-size:10px;margin-top:1px}#clapsy-demo-journey .dj-units{gap:7px}#clapsy-demo-journey .dj-unit{font-size:11px;padding:9px 8px}#clapsy-demo-journey .dj-counter{padding:11px 9px}#clapsy-demo-journey .dj-contact{grid-template-columns:1fr}#clapsy-demo-journey .dj-feature-line{gap:7px}#clapsy-demo-journey .dj-feature{padding:12px}#clapsy-demo-journey .dj-bottom{gap:8px}#clapsy-demo-journey .dj-next{min-width:0;padding:13px 15px;flex:1}#clapsy-demo-journey .dj-back{padding:12px}#clapsy-demo-journey .dj-preview{padding:20px 14px 23px;min-height:0}#clapsy-demo-journey .dj-monitor{padding:13px;border-radius:16px}#clapsy-demo-journey .dj-metric{padding:10px 6px}#clapsy-demo-journey .dj-metric small{font-size:9px}#clapsy-demo-journey .dj-metric strong{font-size:19px}#clapsy-demo-journey .dj-screen-title{margin-top:18px}#clapsy-demo-journey .dj-visual-flow{gap:7px}#clapsy-demo-journey .dj-flow-unit{min-height:86px;padding:10px 2px}#clapsy-demo-journey .dj-flow-unit b{font-size:9px}#clapsy-demo-journey .dj-flow-unit small{font-size:8px}#clapsy-demo-journey .dj-flow-unit:not(:last-child)::after{right:-9px;font-size:19px}#clapsy-demo-journey .dj-unit-icon{width:27px;height:27px}} @media(prefers-reduced-motion:reduce){#clapsy-demo-journey .dj-stage,#clapsy-demo-journey .dj-bar{animation:none!important}} /* FINAL SITE HEADER + FOOTER — 2026 */ html{scroll-padding-top:0} .site{overflow:clip} /* unlike hidden, clip does not disable position:sticky */ .site>.header{position:sticky;top:0;z-index:999;height:78px;min-height:78px;padding-inline:clamp(16px,3.8vw,65px);background:rgba(8,15,29,.94);border-bottom:1px solid rgba(161,186,235,.15);backdrop-filter:blur(20px) saturate(130%);-webkit-backdrop-filter:blur(20px) saturate(130%);box-shadow:0 8px 34px rgba(0,0,0,.13);} .site>.header .nav{gap:clamp(12px,1.3vw,23px);font-size:12px;white-space:nowrap} .site>.header .nav a{position:relative;min-height:42px;display:flex;align-items:center;color:#bfcee3;transition:color .18s} .site>.header .nav a:hover,.site>.header .nav a[aria-current="location"]{color:#fff} .site>.header .nav a[aria-current="location"]::after{content:"";position:absolute;bottom:4px;left:0;right:0;height:2px;background:#5e89ff;border-radius:3px} .site>.header .header-demo-link{min-height:43px;padding:0 16px;gap:12px;font-size:12px} .site>.header .header-demo-link span{font-size:18px;font-weight:400} #hero,#operations-studio,#clapsy-usecases,#clapsy-difference,#clapsy-demo-journey,#iletisim{scroll-margin-top:89px} /* high-contrast dark closing section */ .clapsy-footer{background:#080f1e;color:#eef4ff;position:relative;isolation:isolate;overflow:hidden;font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif} .clapsy-footer::before{content:"";position:absolute;inset:-20% -20% auto;height:510px;background:radial-gradient(ellipse at 68% 18%,rgba(57,102,246,.19),transparent 51%);pointer-events:none;z-index:-1} .clapsy-footer-inner{max-width:1510px;margin:auto;padding:0 clamp(20px,4.6vw,70px)} .footer-cta{padding:86px 0 80px;display:grid;grid-template-columns:minmax(0,1.08fr) minmax(380px,.92fr);gap:46px;align-items:center;border-bottom:1px solid rgba(154,184,239,.16)} .footer-eyebrow{font-size:11px;font-weight:800;letter-spacing:.2em;color:#a4b6d5;display:flex;align-items:center;gap:11px;margin-bottom:26px} .footer-eyebrow-dot{width:9px;height:9px;border-radius:50%;background:#5bf0b2;box-shadow:0 0 0 6px rgba(64,220,168,.11)} .footer-cta h2{font-size:clamp(39px,4.25vw,66px);line-height:1.075;letter-spacing:-.058em;font-weight:850;max-width:760px;margin:0;text-wrap:balance} .footer-cta h2 em{font-style:normal;color:#6f98ff} .footer-cta p{font-size:clamp(15px,1.18vw,18px);line-height:1.72;max-width:570px;color:#abbad3;margin:23px 0 0} .footer-cta-actions{display:flex;flex-wrap:wrap;gap:13px;margin-top:34px;align-items:center} .footer-primary-cta,.footer-secondary-cta{border-radius:12px;display:inline-flex;align-items:center;justify-content:center;gap:16px;font-size:14px;font-weight:760;min-height:53px;padding:0 22px;transition:transform .2s,background .2s,box-shadow .2s} .footer-primary-cta{background:#416fff;color:#fff;box-shadow:0 12px 35px rgba(34,85,240,.2)} .footer-secondary-cta{border:1px solid rgba(163,193,246,.25);color:#dbe7ff;background:rgba(255,255,255,.025)} .footer-primary-cta:hover,.footer-secondary-cta:hover{transform:translateY(-3px)} .footer-primary-cta:hover{background:#5e8cff} .footer-secondary-cta:hover{background:rgba(115,157,250,.08)} .footer-flow{min-width:0;position:relative;display:grid;grid-template-columns:minmax(0,1fr) 24px minmax(0,1.45fr) 24px minmax(0,1fr);align-items:center;gap:0;padding:34px 18px 38px;border:1px solid rgba(119,155,242,.19);background:radial-gradient(ellipse at 49% 55%,rgba(48,84,195,.19),transparent 60%),rgba(15,26,48,.68);border-radius:24px;min-height:267px;box-shadow:0 28px 70px rgba(0,0,0,.24)} .footer-flow::before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(125,155,230,.24) 1px,transparent 1px);background-size:17px 17px;opacity:.25;pointer-events:none} .footer-flow-card{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;text-align:center;padding:16px 6px;border-radius:13px;min-height:110px;background:rgba(16,31,57,.97);border:1px solid rgba(133,165,240,.22);font-weight:750;font-size:12px;line-height:1.35} .footer-flow-icon{font-size:25px;color:#a6c0ff} .footer-flow-card i{width:6px;height:6px;border-radius:50%;background:#51e5b2;box-shadow:0 0 0 4px rgba(80,225,185,.12)} .footer-flow-line{height:2px;background:linear-gradient(90deg,rgba(73,118,252,.1),#709bff,rgba(73,118,252,.1));position:relative;z-index:3} .footer-flow-line b{position:absolute;top:-2px;height:6px;width:6px;border-radius:50%;background:#8fafff;box-shadow:0 0 11px #6495ff;animation:footer-pulse 2.4s linear infinite} .footer-flow-line b:nth-child(2){animation-delay:-.8s}.footer-flow-line b:nth-child(3){animation-delay:-1.6s} @keyframes footer-pulse{0%{left:0;opacity:0}20%,85%{opacity:1}100%{left:calc(100% - 6px);opacity:0}} .footer-flow-core{display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:2;border:1px solid rgba(131,166,249,.51);border-radius:18px;min-height:188px;padding:18px 8px;background:linear-gradient(155deg,#1b3158,#13233d);box-shadow:0 0 45px rgba(70,105,245,.15);text-align:center} .footer-flow-core-mark{display:grid;place-items:center;width:43px;height:43px;border-radius:12px;background:#4e7fff;color:#fff;font-size:27px;font-weight:900;margin-bottom:10px} .footer-flow-core strong{font-size:19px;letter-spacing:-.04em} .footer-flow-core small{font-size:11px;color:#adbfdf;margin:6px 0 15px} .footer-flow-core>span{font-size:10px;color:#59d8a8;white-space:nowrap} .footer-grid{padding:62px 0 61px;display:grid;grid-template-columns:minmax(240px,1.75fr) repeat(3,minmax(138px,1fr));gap:clamp(24px,3.1vw,54px);border-bottom:1px solid rgba(154,184,239,.16)} .footer-brand{display:inline-flex;align-items:center;gap:12px} .footer-brand-icon{width:43px;height:43px;display:grid;place-items:center;border-radius:13px;background:linear-gradient(150deg,#82aaff,#4e7fff);flex:none} .footer-brand-icon svg{width:29px;height:29px} .footer-brand strong{font-size:19px;display:block;letter-spacing:-.035em} .footer-brand small{display:block;font-size:9px;letter-spacing:.145em;color:#93a6c6;margin-top:5px} .footer-identity>p{margin:20px 0 18px;line-height:1.66;font-size:13px;max-width:250px;color:#a5b6d3} .footer-identity-tag{display:inline-flex;align-items:center;gap:8px;font-size:11px;color:#92aef2} .footer-identity-tag span{color:#71a1ff} .footer-link-col{display:flex;flex-direction:column;gap:15px;align-items:flex-start} .footer-link-col h3{font-size:13px;color:#f2f6ff;font-weight:800;margin:2px 0 5px} .footer-link-col a{font-size:13px;line-height:1.35;color:#aebfda;transition:color .16s,transform .16s} .footer-link-col a:hover{color:#fff;transform:translateX(3px)} .footer-bottom{display:flex;justify-content:space-between;align-items:center;gap:15px;min-height:75px;color:#8297b8;font-size:11px} .footer-bottom b{margin:0 4px;color:#4c6b98} .footer-bottom a{color:#c4d5f3;display:inline-flex;align-items:center;gap:8px} .footer-bottom a span{font-size:17px} .clapsy-footer a:focus-visible{outline:2px solid #8cadff;outline-offset:5px;border-radius:5px} @media(max-width:1230px){ .site>.header .nav{gap:12px;font-size:11.5px} .site>.header .header-demo-link{padding-inline:13px} } @media(max-width:1180px){ .site>.header .nav{display:none} .site>.header .nav.is-open{display:flex} .site>.header .clapsy-menu-toggle{display:flex} .site>.header .nav{position:absolute;top:calc(100% - 1px);right:18px;left:auto;width:min(355px,calc(100vw - 30px));max-height:calc(100dvh - 85px);overflow-y:auto;padding:10px;border-radius:0 0 16px 16px;background:rgba(16,29,53,.99);border:1px solid #304765;box-shadow:0 22px 55px #0009;flex-direction:column;align-items:stretch;gap:2px;z-index:1000} .site>.header .nav a{display:flex;padding:13px 15px;min-height:46px;font-size:13px;border-radius:9px} .site>.header .nav a[aria-current="location"]::after{left:8px;right:auto;top:11px;bottom:11px;height:auto;width:3px} .footer-cta{grid-template-columns:1fr;gap:36px;padding-block:70px} .footer-flow{max-width:620px;width:100%;justify-self:center} } @media(max-width:800px){ .footer-grid{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:39px;padding:42px 0} .footer-identity{grid-column:1/-1} .footer-identity>p{max-width:420px} .footer-cta{padding:62px 0} .footer-bottom{flex-wrap:wrap;padding:18px 0;min-height:76px} } @media(max-width:540px){ html{scroll-padding-top:0} #hero,#operations-studio,#clapsy-usecases,#clapsy-difference,#clapsy-demo-journey,#iletisim{scroll-margin-top:73px} .site>.header{height:69px;min-height:69px;padding-inline:12px;gap:6px} .site>.header .header-demo-link{min-height:36px;padding:0 9px;gap:5px;font-size:10.5px} .site>.header .header-demo-link span{font-size:15px} .site>.header .clapsy-menu-toggle{width:38px;height:38px} .site>.header .nav{right:8px;width:min(340px,calc(100vw - 16px));max-height:calc(100dvh - 72px)} .clapsy-footer-inner{padding:0 17px} .footer-cta{padding:51px 0 56px;gap:30px} .footer-eyebrow{font-size:9px;letter-spacing:.12em;margin-bottom:20px} .footer-cta h2{font-size:clamp(35px,10vw,51px)} .footer-cta p{font-size:14px;line-height:1.6} .footer-cta-actions{flex-direction:column;align-items:stretch;margin-top:27px} .footer-primary-cta,.footer-secondary-cta{width:100%;min-height:51px;font-size:13px} .footer-flow{min-height:210px;padding:18px 8px;grid-template-columns:minmax(0,1fr) 11px minmax(0,1.45fr) 11px minmax(0,1fr);border-radius:17px} .footer-flow-card{font-size:9px;min-height:90px;padding:10px 3px;gap:7px;border-radius:9px} .footer-flow-icon{font-size:20px} .footer-flow-core{min-height:150px;padding:12px 3px;border-radius:12px} .footer-flow-core-mark{width:32px;height:32px;font-size:21px;margin-bottom:9px} .footer-flow-core strong{font-size:14px} .footer-flow-core small{font-size:9px;margin-bottom:9px} .footer-flow-core>span{font-size:7px} .footer-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:34px 20px} .footer-identity{grid-column:1/-1} .footer-link-col a{font-size:12.5px} .footer-bottom{align-items:flex-start;flex-direction:column;gap:11px;padding:24px 0} } @media(max-width:355px){ .site>.header .brand-sub{display:none} .site>.header .header-demo-link{font-size:10px;padding-inline:7px} .footer-flow-core strong{font-size:12px} } @media(prefers-reduced-motion:reduce){.footer-flow-line b{animation:none;left:50%}} /* FINAL NAV ALIGNMENT & ACCESSIBILITY */ #clapsy-difference a.cf-cta{display:inline-flex;align-items:center;justify-content:center;text-decoration:none;line-height:1.35} .site>.header a:focus-visible,.clapsy-footer a:focus-visible,#clapsy-difference a.cf-cta:focus-visible{outline:3px solid #88b0ff;outline-offset:4px} @media(max-width:540px){#clapsy-difference a.cf-cta{white-space:normal;text-align:center}} /* Approved identity update: only header and footer marks. All existing sections preserved. */ .site>.header .brand-approved { display:flex;align-items:center;justify-content:flex-start;min-width:0;flex:0 1 auto; width:clamp(195px,17.3vw,246px);height:67px;padding:4px 8px; background:linear-gradient(145deg,#f5fcfe,#e7f8fc);border:1px solid #8acbd7; border-radius:10px;box-shadow:0 5px 19px rgba(6,32,55,.24),inset 0 1px 0 #fff; } .site>.header .brand-approved-full {display:block;width:100%;height:100%;object-fit:contain;object-position:center;} .site>.header .brand-approved-compact {display:none;align-items:center;gap:5px;min-width:0;} .site>.header .brand-approved-compact img {display:block;width:39px;height:40px;object-fit:contain;flex:none;} .site>.header .brand-approved-copy {display:flex;flex-direction:column;min-width:0;line-height:1.05;white-space:nowrap;} .site>.header .brand-approved-copy strong {color:#073747;font-size:13px;letter-spacing:-.04em;font-weight:900;} .site>.header .brand-approved-copy i {font-style:normal;color:#0b7082;} .site>.header .brand-approved-copy small {color:#366274;font-weight:750;font-size:8px;margin-top:4px;} .clapsy-footer .footer-brand-approved { display:inline-flex;width:min(100%,300px);padding:11px 12px; background:linear-gradient(145deg,#f7fdff,#e6f7fb);border:1px solid #9ed4df; border-radius:13px;box-shadow:0 10px 28px rgba(0,0,0,.13),inset 0 1px 0 white; line-height:0; } .clapsy-footer .footer-brand-approved img {display:block;width:100%;height:auto;object-fit:contain;} @media(max-width:1370px) and (min-width:1181px){ .site>.header .brand-approved{width:190px;height:61px;padding:4px 6px} .site>.header .nav{gap:clamp(9px,1vw,15px);font-size:11px} .site>.header .header-demo-link{padding-inline:11px} } @media(max-width:700px){ .site>.header .brand-approved{width:auto;max-width:176px;height:53px;padding:4px 6px;flex-shrink:1;border-radius:9px} .site>.header .brand-approved-full{display:none} .site>.header .brand-approved-compact{display:flex} .site>.header .header-actions{margin-left:auto} } @media(max-width:355px){ .site>.header .brand-approved{height:47px;padding:3px 4px;max-width:151px} .site>.header .brand-approved-compact img{width:30px;height:34px} .site>.header .brand-approved-copy strong{font-size:11px} .site>.header .brand-approved-copy small{font-size:7px;letter-spacing:-.015em} .site>.header .header-demo-link{padding-inline:6px;font-size:10px} .site>.header .clapsy-menu-toggle{width:35px;height:36px} } /* 2026-10-21 — client approval: place product identity on the footer's exact horizontal grid; remove the pale backing panel from header only. */ .site>.header { padding-left: max(clamp(20px, 4.6vw, 70px), calc((100% - 1510px) / 2 + clamp(20px, 4.6vw, 70px))); } .site>.header .brand-approved { background: transparent !important; border: 0 !important; box-shadow: none !important; border-radius: 0 !important; padding: 0 !important; width: clamp(205px, 18vw, 252px); height: 71px; flex: 0 0 auto; } .site>.header .brand-approved-full { object-fit: contain; filter: drop-shadow(0 1px 1px rgba(210, 246, 252, .26)); } .site>.header .brand-approved-copy strong {color:#e8faff;} .site>.header .brand-approved-copy i {color:#75c8da;} .site>.header .brand-approved-copy small {color:#bbdfe8;} @media(max-width:1370px) and (min-width:981px) { .site>.header .brand-approved {width:205px;height:66px;} } @media(max-width:700px){ .site>.header {padding-left:17px;padding-right:17px;} .site>.header .brand-approved {width:162px;max-width:162px;height:53px;flex:0 1 162px;} } @media(max-width:390px){ .site>.header .brand-approved {width:149px;max-width:149px;height:47px;flex-basis:149px;} } @media(max-width:355px){ .site>.header .brand-approved {width:137px;max-width:137px;height:43px;flex-basis:137px;} .site>.header {padding-left:17px;padding-right:12px;} } /* 2026-10-21 — header logo updated to approved horizontal CLAPSY TSY asset */ .site>.header .brand-approved{ background:transparent !important; border:0 !important; box-shadow:none !important; border-radius:0 !important; padding:0 !important; width:clamp(260px, 31vw, 460px); height:auto; min-height:0; display:flex; align-items:center; flex:0 1 auto; line-height:0; } .site>.header .brand-approved-main{ display:block; width:100%; height:auto; object-fit:contain; filter:drop-shadow(0 1px 1px rgba(210,246,252,.18)); } .site>.header .brand-approved-full, .site>.header .brand-approved-compact, .site>.header .brand-approved-copy{display:none !important;} @media(max-width:1180px){ .site>.header .brand-approved{width:min(50vw, 360px);} } @media(max-width:700px){ .site>.header{padding-left:17px;padding-right:17px;gap:8px;} .site>.header .brand-approved{width:min(52vw, 248px);min-width:0;} .site>.header .header-actions{margin-left:auto;} } @media(max-width:540px){ .site>.header .brand-approved{width:min(52vw, 220px);} } @media(max-width:390px){ .site>.header .brand-approved{width:min(50vw, 190px);} } @media(max-width:355px){ .site>.header .brand-approved{width:min(48vw, 176px);} .site>.header{padding-left:17px;padding-right:12px;} } /* WordPress 1:1 adaptation: equal left alignment to footer content grid. */ .site>.header .brand-approved {width:clamp(230px,25vw,400px);max-width:40vw;height:auto;min-height:0;} .site>.header .brand-approved-main {display:block;width:100%;height:auto;object-fit:contain;} .site>.header .brand-approved-main {filter:none;} @media(min-width:1181px) and (max-width:1450px){.site>.header .brand-approved{width:clamp(230px,22vw,310px);max-width:28vw;}} @media(max-width:1180px){.site>.header .brand-approved{width:min(42vw,330px);}} @media(max-width:700px){.site>.header .brand-approved{width:min(48vw,230px);}} @media(max-width:390px){.site>.header .brand-approved{width:min(47vw,178px);}} @media(max-width:355px){.site>.header .brand-approved{width:min(45vw,160px);}} /* Admin-bar + sticky header correctly clear the WordPress toolbar. */ body.admin-bar .site>.header{top:32px;} @media(max-width:782px){body.admin-bar .site>.header{top:46px;}} /* Classic navigation, if a WordPress menu replaces the fallback. */ .site>.header .nav ul{display:contents;list-style:none;margin:0;padding:0;} .site>.header .nav li{list-style:none;} @media(max-width:1180px){.site>.header .nav ul{display:flex;flex-direction:column;gap:2px;align-items:stretch;}} /* Clapsy STYS approved horizontal Jost identity, 2026-10-21. Original body, header positioning, menu and footer retained. */ .site>.header .brand-approved { width:clamp(228px,23.5vw,326px); max-width:29vw; flex:0 0 auto; height:auto; min-height:0; padding:0 !important; border:0 !important; border-radius:0 !important; box-shadow:none !important; background:none !important; line-height:0; } .site>.header .brand-approved-main { display:block;width:100%;height:auto; max-height:74px;object-fit:contain;filter:none; } .site>.header .brand-approved-mobile {display:none;} @media(min-width:1181px) and (max-width:1400px) { .site>.header .brand-approved {width:clamp(212px,19vw,266px);max-width:24vw;} } @media(max-width:1180px) { .site>.header .brand-approved {width:min(39vw,306px);max-width:none;min-width:0;} } @media(max-width:700px) { .site>.header .brand-approved {width:min(48vw,238px);max-width:none;} .site>.header .header-actions {margin-left:auto;} } @media(max-width:560px) { .site>.header .brand-approved {width:min(48vw,216px);} .site>.header .brand-approved-main {display:none;} .site>.header .brand-approved-mobile { display:block;width:100%;height:auto;max-height:46px; object-fit:contain; } } @media(max-width:390px) { .site>.header .brand-approved {width:min(46vw,180px);} } @media(max-width:355px) { .site>.header .brand-approved {width:min(45vw,154px);} } /* Hotfix 0.1.2 — logo is complete source artwork; do not clip the wordmark. */ .site>.header .brand-approved{overflow:visible;min-width:0;} .site>.header .brand-approved-main, .site>.header .brand-approved-mobile{object-fit:contain;object-position:left center;max-width:100%;} @media(min-width:1181px){.site>.header .brand-approved{width:clamp(260px,23.5vw,340px);max-width:30vw;}} @media(min-width:1181px) and (max-width:1400px){.site>.header .brand-approved{width:clamp(245px,21vw,300px);max-width:27vw;}} @media(max-width:1180px){.site>.header .brand-approved{width:min(41vw,320px);max-width:none;}} @media(max-width:700px){.site>.header .brand-approved{width:min(48vw,235px);}} @media(max-width:560px){.site>.header .brand-approved{width:min(47vw,205px);}} @media(max-width:390px){.site>.header .brand-approved{width:min(44vw,169px);}} @media(max-width:355px){.site>.header .brand-approved{width:min(43vw,149px);}} /* 0.2.2 — Mobile hero notification cards float INSIDE the illustration. * Keep the approved desktop motion untouched. */ @media (max-width:700px) { .hero .art-area { position:relative; } .hero .scene { position:relative; overflow:hidden; isolation:isolate; border-radius:12px; } .hero .scene > img { position:relative; z-index:0; } .hero .scene .mobile-feed { display:flex !important; position:absolute !important; z-index:25; inset:0 !important; width:100%; height:100%; margin:0 !important; padding:7px !important; min-height:0 !important; overflow:hidden !important; align-items:flex-end; justify-content:flex-end; pointer-events:none; } .hero .scene .mobile-stack { display:flex !important; flex-direction:column; align-items:stretch; justify-content:flex-end; gap:4px; width:min(68%,230px); max-height:100%; margin:0 0 2px auto; overflow:hidden; pointer-events:none; } .hero .scene .mobile-stack .story-note { flex-shrink:1; border-radius:9px; padding:0 7px; min-height:0; max-height:0; background:rgba(255,255,255,.97); box-shadow:0 7px 18px rgba(1,15,27,.35); } .hero .scene .mobile-stack .story-note.is-visible { min-height:32px; max-height:44px; padding:5px 7px; } .hero .scene .mobile-stack .story-note .notification-icon { width:23px; height:23px; border-radius:7px; } .hero .scene .mobile-stack .story-note .notification-icon svg {width:14px;height:14px;} .hero .scene .mobile-stack .story-note .notification-title { font-size:10px;line-height:1.12;overflow-wrap:anywhere; } .hero .scene .mobile-stack .story-note .notification-detail { font-size:8px;line-height:1.1;margin-top:2px; } .hero .scene .mobile-stack .story-note .notification-pip { width:5px;height:5px;margin-left:0; } } @media(max-width:360px) { .hero .scene .mobile-feed {padding:5px !important;} .hero .scene .mobile-stack {width:min(72%,205px);gap:3px;} .hero .scene .mobile-stack .story-note.is-visible {min-height:30px;max-height:41px;padding:4px 5px;} .hero .scene .mobile-stack .story-note .notification-title{font-size:9px;} .hero .scene .mobile-stack .story-note .notification-detail{font-size:7.5px;} } /* 0.3.0: True world-anchored mobile notifications, independent of desktop scene stacks. */ @media(max-width:700px){ .hero .scene .mobile-feed{inset:0!important;display:block!important;position:absolute!important;padding:0!important;overflow:hidden!important;pointer-events:none;} .hero .scene .mobile-location-layer{position:absolute;inset:0;display:block!important;pointer-events:none;} .hero .scene .mobile-origin{position:absolute;display:flex!important;flex-direction:column;align-items:stretch;justify-content:flex-end;gap:3px;max-width:45%;width:42%;height:auto;z-index:2;filter:drop-shadow(0 3px 7px #01132666);} .hero .scene .mobile-origin.place-rest{top:12%;left:2%;} .hero .scene .mobile-origin.place-cafe{top:5%;left:40%;} .hero .scene .mobile-origin.place-market{top:10%;right:2%;} .hero .scene .mobile-origin.place-pool{top:48%;right:2%;} .hero .scene .mobile-origin.place-mess{bottom:6%;left:39%;} .hero .scene .mobile-origin.place-depot{bottom:7%;left:2%;} .hero .scene .mobile-origin.place-spa{bottom:6%;right:2%;} .hero .scene .mobile-origin .story-note{box-sizing:border-box;opacity:0;visibility:hidden;min-height:0;max-height:0;padding:0 5px;margin:0;display:flex;align-items:center;gap:5px;overflow:hidden;background:rgba(255,255,255,.97);border-radius:7px;border:1px solid #fff;transform:translate3d(0,9px,0) scale(.94);transition:transform .38s ease,opacity .32s ease,visibility .32s,max-height .32s,padding .32s;pointer-events:none;} .hero .scene .mobile-origin .story-note.is-visible{visibility:visible;opacity:1;min-height:24px;max-height:40px;padding:4px 5px;transform:translate3d(0,0,0) scale(1);} .hero .scene .mobile-origin .story-note.is-leaving{visibility:hidden;opacity:0;max-height:0;min-height:0;padding:0 5px;transform:translate3d(0,-7px,0) scale(.95);} .hero .scene .mobile-origin .notification-icon{width:18px;height:18px;min-width:18px;border-radius:5px;} .hero .scene .mobile-origin .notification-icon svg{width:12px;height:12px;} .hero .scene .mobile-origin .notification-title{font-size:8.5px;line-height:1.12;white-space:normal;overflow-wrap:anywhere;} .hero .scene .mobile-origin .notification-detail{font-size:7px;line-height:1.1;white-space:normal;margin-top:1px;} .hero .scene .mobile-origin .notification-pip{width:4px;height:4px;min-width:4px;margin-left:0;} .hero .scene .mobile-origin .story-note::before,.hero .scene .mobile-origin .story-note::after{display:none!important;} } @media(max-width:380px){ .hero .scene .mobile-origin{width:43%;gap:2px;} .hero .scene .mobile-origin .story-note.is-visible{min-height:21px;max-height:34px;padding:3px 4px;gap:3px;} .hero .scene .mobile-origin .notification-icon{width:15px;height:15px;min-width:15px;} .hero .scene .mobile-origin .notification-icon svg{width:10px;height:10px;} .hero .scene .mobile-origin .notification-title{font-size:7.5px;} .hero .scene .mobile-origin .notification-detail{font-size:6.5px;} } @media(min-width:701px){.hero .scene .mobile-location-layer{display:none!important;}} @media(prefers-reduced-motion:reduce){.hero .scene .mobile-origin .story-note{transition:none!important;transform:none!important;}} /* 0.3.1: Real typographic minimal identity — no image boxes or gradient effects. */ .site>.header a.brand-approved.clapsy-wordmark-wrap { display:inline-flex; align-items:center; flex:0 0 auto; width:auto !important; min-width:0; max-width:none !important; overflow:visible; padding:0 !important; background:transparent !important; border:0 !important; box-shadow:none !important; text-decoration:none; } .clapsy-wordmark { display:inline-flex; align-items:center; gap:10px; white-space:nowrap; line-height:1; font-family:'Jost','Segoe UI',Arial,sans-serif; font-size:clamp(23px,2.05vw,33px); font-weight:750; letter-spacing:-.047em; } .clapsy-wordmark-clapsy {color:#f7fdff;} .clapsy-wordmark-separator {width:1px;height:1.04em;background:rgba(137,184,201,.65);flex:none;} .clapsy-wordmark-stys {color:#68c8d6;letter-spacing:-.028em;} .site>.header .clapsy-custom-header-logo {max-width:350px;width:auto;height:auto;max-height:64px;object-fit:contain;} .hero-copy .summary p {margin:0;} .hero-copy .summary p+p {margin-top:12px;} @media(max-width:1180px){ .clapsy-wordmark{font-size:clamp(22px,2.65vw,27px);gap:8px;} } @media(max-width:700px){ .clapsy-wordmark{font-size:clamp(20px,4.8vw,26px);gap:6px;} .site>.header .clapsy-custom-header-logo{max-width:min(46vw,224px);max-height:46px;} } @media(max-width:420px){ .clapsy-wordmark{font-size:19px;gap:5px;} .site>.header .clapsy-wordmark-separator{height:1em;} } @media(max-width:360px){.clapsy-wordmark{font-size:17.5px;gap:4px;}}