@import "https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700&display=swap";:root{--primary:#7c6aff;--primary-light:#9d8fff;--primary-soft:#7c6aff1f;--accent:#ff8a7a;--accent-soft:#ff8a7a1f;--success:#5cd6a0;--success-soft:#5cd6a01f;--bg-deep:#12121a;--bg-card:#1a1a26;--bg-surface:#22222f;--bg-hover:#2a2a3a;--text-main:#eeeef4;--text-secondary:#9898ac;--text-hint:#5e5e72;--border:#ffffff0f;--shadow:0 8px 32px #0000004d}.full-screen-modal{z-index:50;background:var(--bg-deep);flex-direction:column;animation:.25s cubic-bezier(.2,.8,.2,1) both screenFadeIn;display:flex;position:fixed;inset:0}@keyframes slideInPage{0%{opacity:.85;transform:translate(28px)}to{opacity:1;transform:translate(0,0)}}.mobile-layout.has-active-overlay>.mobile-header,.mobile-layout.has-active-overlay>.mobile-content,.mobile-layout.has-active-overlay>.bottom-nav,.mobile-layout.has-active-overlay>div[style*="background: var(--primary-soft)"]{visibility:hidden!important;pointer-events:none!important}.msg-row.sent .msg-bubble{color:var(--on-grad,#fff);--text-main:var(--on-grad,#fff);--text-secondary:var(--on-grad,#fff);--text-hint:var(--on-grad,#fff);background:var(--grad,var(--primary))!important;border-color:#0000!important}::view-transition-old(root){mix-blend-mode:normal;animation:none}::view-transition-new(root){mix-blend-mode:normal;animation:none}:root[data-theme=transparan],:root[data-theme=transparan] body{background:0 0!important}:root[data-theme=transparan] body{text-shadow:0 0 2px var(--halo), 0 0 8px var(--halo)}:root[data-theme=transparan] .primary-btn,:root[data-theme=transparan] .send-btn,:root[data-theme=transparan] .unread-badge{text-shadow:none}:root[data-theme=transparan] .mobile-header{border-bottom:1px solid var(--bar-line)!important;background:0 0!important}:root[data-theme=transparan] .full-screen-modal{background:0 0!important}:root[data-theme=transparan] .bottom-nav{border-top:1px solid var(--bar-line)!important;background:0 0!important}:root[data-theme=transparan] .chat-input-bar{padding:10px 12px;border-top:1px solid var(--bar-line)!important;background:0 0!important}:root[data-theme=transparan] .chat-input-bar input,:root[data-theme=transparan] .styled-input,:root[data-theme=transparan] .msg-bubble,:root[data-theme=transparan] .incoming-call-box{background:var(--bg-card)!important;border-color:var(--border)!important}:root[data-theme=transparan] .msg-row.sent .msg-bubble{background:var(--grad)!important}@keyframes storyRing{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes storyPulse{0%,to{opacity:1}50%{opacity:.6}}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;margin:0;padding:0}body{font-family:var(--font-app,"Plus Jakarta Sans", sans-serif);background:var(--bg-deep);color:var(--text-main);justify-content:center;min-height:100dvh;display:flex;overflow:hidden}#root{justify-content:center;width:100%;display:flex}@keyframes fadeUp{0%{opacity:0;transform:translateY(15px)}to{opacity:1;transform:translateY(0)}}@keyframes pulse{0%,to{transform:scale(1)}50%{transform:scale(1.04)}}@keyframes shimmer{0%{background-position:-200% 0}to{background-position:200% 0}}.center-container{min-height:100dvh;padding:max(20px, env(safe-area-inset-top)) 20px max(20px, env(safe-area-inset-bottom));justify-content:center;align-items:center;width:100%;max-width:480px;display:flex}.glass-card{background:var(--bg-card);border:1px solid var(--border);box-shadow:var(--shadow);border-radius:28px;width:100%;padding:2.5rem 2rem;animation:.3s cubic-bezier(.2,.8,.2,1) both screenFadeIn}.text-center{text-align:center}.mb-1{margin-bottom:.25rem}.mb-2{margin-bottom:.5rem}.mt-2{margin-top:.5rem}.mt-3{margin-top:.75rem}.mt-4{margin-top:1rem}.logo{letter-spacing:-.5px;background:linear-gradient(135deg,#7c6aff,#ff8a7a);-webkit-text-fill-color:transparent;-webkit-background-clip:text;font-size:2rem;font-weight:700}.logo-icon{color:#fff;background:linear-gradient(135deg,#7c6aff,#9d8fff);border-radius:16px;justify-content:center;align-items:center;width:56px;height:56px;margin:0 auto 1rem;font-size:1.5rem;font-weight:700;display:flex}.subtitle{color:var(--text-secondary);margin-bottom:1.5rem;font-size:.85rem;line-height:1.6}.google-btn{background:var(--bg-surface);color:var(--text-main);border:1px solid var(--border);cursor:pointer;border-radius:14px;justify-content:center;align-items:center;gap:8px;width:100%;padding:.75rem 1rem;font-family:inherit;font-size:.85rem;font-weight:600;transition:all .2s;display:flex}.google-btn:hover,.google-btn:active{background:var(--bg-hover)}.primary-btn{background:var(--primary);color:var(--on-primary,#fff);cursor:pointer;border:none;border-radius:14px;width:100%;padding:.75rem 1.5rem;font-family:inherit;font-size:.85rem;font-weight:600;transition:all .2s}.primary-btn:hover{opacity:.9}.styled-input{background:var(--bg-surface);border:1px solid var(--border);width:100%;color:var(--text-main);border-radius:14px;outline:none;padding:.75rem 1rem;font-family:inherit;font-size:.9rem;transition:border .2s}.styled-input:focus{border-color:var(--primary)}.styled-input::placeholder{color:var(--text-hint)}.dev-test-box{background:var(--bg-surface);border:1px solid var(--border);border-radius:16px;margin-top:1.5rem;padding:1rem}.dev-test-box p{color:var(--text-hint);text-transform:uppercase;letter-spacing:1px;margin-bottom:8px;font-size:.7rem}.mobile-layout{background:var(--bg-deep);flex-direction:column;width:100%;max-width:480px;height:100dvh;display:flex;position:relative;overflow:hidden}.mobile-header{padding:calc(12px + env(safe-area-inset-top,0px)) max(18px, env(safe-area-inset-right)) 14px max(18px, env(safe-area-inset-left));background:var(--bar-bg,var(--bg-deep));color:var(--on-bar,var(--text-main));--text-main:var(--on-bar,#eeeef4);--text-secondary:var(--on-bar-2,#9898ac);--text-hint:var(--on-bar-2,#5e5e72);--primary:var(--on-bar,#7c6aff);--primary-light:var(--on-bar,#9d8fff);--bg-hover:var(--on-bar-soft,#2a2a3a);--border:var(--on-bar-soft,#ffffff0f);text-shadow:0 1px 3px var(--bar-halo,transparent);z-index:10;justify-content:space-between;align-items:center;display:flex}.mobile-header h2{letter-spacing:-.3px;font-size:1.2rem;font-weight:700}.header-badge{color:var(--primary);background:var(--primary-soft);border-radius:20px;padding:4px 10px;font-size:.65rem;font-weight:600}.mobile-content{padding:12px max(16px, env(safe-area-inset-right)) 100px max(16px, env(safe-area-inset-left));scroll-behavior:auto;-webkit-overflow-scrolling:touch;flex:1;overflow-y:auto}.mobile-content::-webkit-scrollbar{display:none}.screen-transition-wrapper{will-change:transform, opacity;backface-visibility:hidden;width:100%;height:100%;animation:.25s cubic-bezier(.2,.8,.2,1) both screenFadeIn}.tab-pane-transition{will-change:transform, opacity;backface-visibility:hidden;animation:.25s cubic-bezier(.2,.8,.2,1) both screenSlideIn}@keyframes screenFadeIn{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translate(0,0)}}.sub-tabs{background:var(--bg-card);border:1px solid var(--border);border-radius:12px;margin-bottom:16px;padding:3px;display:flex}.sub-tab{color:var(--text-hint);cursor:pointer;background:0 0;border:none;border-radius:10px;flex:1;padding:8px;font-family:inherit;font-size:.78rem;font-weight:600;transition:all .25s}.sub-tab.active{background:var(--primary);color:var(--on-primary,#fff);box-shadow:0 2px 8px #7c6aff4d}.chat-list-item{cursor:pointer;border-radius:16px;align-items:center;gap:12px;margin-bottom:4px;padding:12px;transition:all .15s;display:flex}.chat-list-item:hover,.chat-list-item:active{background:var(--bg-card)}.chat-list-item .avatar-sm{color:#fff;border-radius:14px;flex-shrink:0;justify-content:center;align-items:center;width:44px;height:44px;font-size:.85rem;font-weight:700;display:flex}.chat-list-item .chat-info{flex:1;min-width:0}.chat-list-item .chat-name{margin-bottom:2px;font-size:.88rem;font-weight:600}.chat-list-item .chat-preview{color:var(--text-secondary);white-space:nowrap;text-overflow:ellipsis;font-size:.75rem;overflow:hidden}.chat-list-item .chat-meta{text-align:right;flex-shrink:0}.chat-list-item .chat-time{color:var(--text-hint);font-size:.65rem}.unread-badge{background:var(--accent);color:var(--on-accent,#fff);border-radius:10px;margin-top:4px;padding:2px 7px;font-size:.6rem;font-weight:700;display:inline-block}.empty-state{text-align:center;flex-direction:column;justify-content:center;align-items:center;padding:60px 20px;animation:.4s ease-out fadeUp;display:flex}.empty-icon{border-radius:20px;justify-content:center;align-items:center;width:64px;height:64px;margin-bottom:16px;display:flex}.empty-state h3{margin-bottom:6px;font-size:1rem}.empty-state p{color:var(--text-secondary);max-width:260px;font-size:.8rem;line-height:1.5}.circle-card{background:var(--bg-card);border:1px solid var(--border);cursor:pointer;border-radius:18px;margin-bottom:10px;padding:16px;transition:all .2s}.circle-card:hover{border-color:var(--primary)}.circle-card-header{align-items:center;gap:12px;margin-bottom:10px;display:flex}.circle-emoji{border-radius:14px;justify-content:center;align-items:center;width:42px;height:42px;font-size:1.3rem;display:flex}.circle-card h4{font-size:.9rem;font-weight:600}.circle-card .circle-members{color:var(--text-secondary);font-size:.7rem}.chat-room{flex-direction:column;height:calc(100vh - 140px);display:flex}.chat-messages-area{padding:10px max(14px, env(safe-area-inset-right)) 10px max(14px, env(safe-area-inset-left));flex:1;overflow-y:auto}.chat-messages-area::-webkit-scrollbar{display:none}.msg-row{gap:8px;margin-bottom:8px;animation:.2s ease-out fadeUp;display:flex}.msg-row.sent{flex-direction:row-reverse}.msg-avatar{color:#fff;border-radius:10px;flex-shrink:0;justify-content:center;align-items:center;width:30px;height:30px;font-size:.65rem;font-weight:700;display:flex}.msg-bubble{background:var(--bg-card);border:1px solid var(--border);border-radius:4px 16px 16px;max-width:74%;padding:10px 14px}.msg-row.sent .msg-bubble{border-radius:16px 4px 16px 16px}.msg-sender{color:var(--primary-light);margin-bottom:3px;font-size:.65rem;font-weight:700}.msg-row.sent .msg-sender{display:none}.msg-text{font-size:calc(.85rem * var(--skala-teks,1));word-wrap:break-word;line-height:1.4;font-family:var(--font-chat,inherit)}.chat-input-bar{padding:10px max(12px, env(safe-area-inset-right)) max(10px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));gap:8px;display:flex;position:relative}.chat-input-bar input{background:var(--bg-card);border:1px solid var(--border);color:var(--text-main);border-radius:14px;outline:none;flex:1;padding:10px 16px;font-family:inherit;font-size:.85rem}.chat-input-bar input:focus{border-color:var(--primary)}.chat-input-bar input::placeholder{color:var(--text-hint)}.chat-input-bar{align-items:flex-end}.chat-input-bar .kolom-pesan{background:var(--bg-card);border:1px solid var(--border);min-width:0;color:var(--text-main);font-size:calc(.85rem * var(--skala-teks,1));resize:none;box-sizing:border-box;border-radius:14px;outline:none;flex:1;padding:10px 16px;font-family:inherit;line-height:1.4;display:block}.chat-input-bar .kolom-pesan:focus{border-color:var(--primary)}.chat-input-bar .kolom-pesan::placeholder{color:var(--text-hint)}:root[data-theme=transparan] .chat-input-bar .kolom-pesan{background:var(--bg-card)!important;border-color:var(--border)!important}.send-btn{background:var(--primary);color:var(--on-primary,#fff);cursor:pointer;border:none;border-radius:14px;flex-shrink:0;justify-content:center;align-items:center;width:44px;height:44px;transition:all .15s;display:flex}.send-btn:active{transform:scale(.95)}.profile-view{animation:.3s cubic-bezier(.2,.8,.2,1) both screenFadeIn}.profile-header{text-align:center;background:var(--bg-card);border:1px solid var(--border);border-radius:24px;margin-bottom:12px;padding:20px}.avatar-large{color:#fff;background:linear-gradient(135deg,#7c6aff,#ff8a7a);border-radius:22px;justify-content:center;align-items:center;width:72px;height:72px;margin:0 auto 12px;font-size:1.6rem;font-weight:700;display:flex}.profile-username{margin-bottom:2px;font-size:1.1rem;font-weight:700}.profile-email{color:var(--text-secondary);font-size:.75rem}.profile-section{background:var(--bg-card);border:1px solid var(--border);border-radius:18px;margin-bottom:12px;padding:4px 0}.profile-row{border-bottom:1px solid var(--border);justify-content:space-between;align-items:center;padding:12px 16px;display:flex}.profile-row:last-child{border-bottom:none}.profile-label{color:var(--text-secondary);font-size:.8rem}.profile-value{font-size:.8rem;font-weight:600}.photo-grid{grid-template-columns:repeat(3,1fr);gap:8px;margin-top:10px;display:grid}.photo-slot{aspect-ratio:1;background:var(--bg-surface);color:var(--text-hint);cursor:pointer;border:1px dashed #ffffff14;border-radius:12px;justify-content:center;align-items:center;font-size:1.2rem;transition:all .2s;display:flex}.photo-slot:hover{border-color:var(--primary);color:var(--primary)}.bottom-nav{background:var(--bg-card);border-top:1px solid var(--border);width:100%;padding:8px 0;padding-bottom:max(8px, env(safe-area-inset-bottom));z-index:20;justify-content:space-around;display:flex;position:absolute;bottom:0}.nav-item{color:var(--text-hint);cursor:pointer;-webkit-tap-highlight-color:transparent;background:0 0;border:none;border-radius:12px;flex-direction:column;align-items:center;gap:3px;padding:4px 8px;font-family:inherit;transition:transform .12s cubic-bezier(.16,1,.3,1),color .15s;display:flex;position:relative;overflow:visible!important}.nav-item:active{transform:scale(.91)}.nav-item .nav-label,.nav-item>span:last-child{letter-spacing:.3px;font-size:.6rem;font-weight:600}.nav-icon-wrap{justify-content:center;align-items:center;display:inline-flex;position:relative;overflow:visible!important}.lencana-badge{flex-shrink:0;overflow:visible!important}.nav-item.active{color:var(--primary)}.nav-item.active:before{content:"";background:var(--primary);border-radius:2px;width:20px;height:3px;position:absolute;top:-8px}.icon-btn{color:var(--text-secondary);cursor:pointer;background:0 0;border:none;border-radius:10px;padding:6px;overflow:visible!important}.icon-btn:hover{color:var(--accent)}.section-title{color:var(--text-hint);text-transform:uppercase;letter-spacing:1.2px;margin-bottom:10px;padding-left:4px;font-size:.7rem;font-weight:700}.call-modal{z-index:100;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:#12121af2;flex-direction:column;justify-content:center;align-items:center;width:100%;height:100%;animation:.3s ease-out fadeUp;display:flex;position:fixed;top:0;left:0}.video-container{background:#000;justify-content:center;align-items:center;width:100%;max-width:480px;height:100%;display:flex;position:relative}.remote-video{object-fit:cover;pointer-events:none;width:100%;height:100%}.remote-video::-webkit-media-controls{display:none!important}.local-video{top:calc(env(safe-area-inset-top,0px) + 56px);border:2px solid var(--border);object-fit:cover;width:100px;height:140px;box-shadow:var(--shadow);pointer-events:none;background:#222;border-radius:12px;position:absolute;right:16px}.local-video::-webkit-media-controls{display:none!important}.call-actions{z-index:20;bottom:calc(30px + env(safe-area-inset-bottom,0px));box-sizing:border-box;flex-wrap:wrap;justify-content:center;gap:14px 16px;width:100%;padding:0 16px;display:flex;position:absolute}.call-btn{color:#fff;cursor:pointer;border:none;border-radius:30px;justify-content:center;align-items:center;width:60px;height:60px;transition:all .2s;display:flex;box-shadow:0 4px 15px #0000004d}.call-btn:active{transform:scale(.9)}.call-btn.accept{background:var(--success)}.call-btn.reject{background:var(--accent)}.incoming-call-box{background:var(--bg-card);text-align:center;border:1px solid var(--border);border-radius:20px;padding:30px}.incoming-call-box h3{margin:15px 0 5px;font-size:1.2rem}.incoming-call-box p{color:var(--text-hint);margin-bottom:25px}.call-modal.mode-pip .call-actions,.call-modal.mode-pip .local-video{display:none!important}.call-modal.mode-pip .remote-video{object-fit:cover;width:100%!important;height:100%!important}:root .msg-row .msg-bubble.bubble-stiker,:root[data-theme] .msg-row.sent .msg-bubble.bubble-stiker{box-shadow:none!important;background:0 0!important;border:none!important;padding:0!important}.layar-memanggil{color:#fff;text-align:center;flex-direction:column;justify-content:center;align-items:center;gap:14px;padding:20px;display:flex}.lm-avatar-wadah{justify-content:center;align-items:center;width:120px;height:120px;margin-bottom:18px;display:flex;position:relative}.lm-avatar{z-index:2;color:#fff;background:linear-gradient(135deg,#7c6aff,#ff8a7a);border-radius:50%;justify-content:center;align-items:center;width:104px;height:104px;font-size:2.2rem;font-weight:800;display:flex;position:relative;overflow:hidden;box-shadow:0 0 30px #7c6aff73}.lm-avatar img{object-fit:cover;width:100%;height:100%}.lm-gelombang{border:2px solid #7c6affbf;border-radius:50%;animation:2.4s ease-out infinite lmGelombang;position:absolute;inset:8px}.lm-g2{animation-delay:.8s}.lm-g3{animation-delay:1.6s}.lm-lambai{z-index:3;transform-origin:70% 75%;font-size:2.1rem;animation:1.6s ease-in-out infinite lmLambai;position:absolute;bottom:-6px;right:-10px}.lm-nama{letter-spacing:.2px;font-size:1.35rem;font-weight:800}.lm-status{opacity:.8;font-size:.95rem}.lm-titik i{font-style:normal;animation:1.4s infinite lmTitik;display:inline-block}.lm-titik i:nth-child(2){animation-delay:.2s}.lm-titik i:nth-child(3){animation-delay:.4s}@keyframes lmGelombang{0%{opacity:.85;transform:scale(1)}to{opacity:0;transform:scale(2.1)}}@keyframes lmLambai{0%,60%,to{transform:rotate(0)}10%,30%{transform:rotate(18deg)}20%,40%{transform:rotate(-10deg)}50%{transform:rotate(10deg)}}@keyframes lmTitik{0%,80%,to{opacity:.2;transform:translateY(0)}40%{opacity:1;transform:translateY(-4px)}}.layar-masuk{z-index:101;padding:calc(env(safe-area-inset-top,0px) + 12vh) 24px calc(env(safe-area-inset-bottom,0px) + 48px);background:#000;flex-direction:column;justify-content:space-between;display:flex;position:fixed;inset:0}.layar-masuk .layar-memanggil{flex:1;justify-content:flex-start}.lm-aksi{justify-content:space-around;align-items:center;display:flex}.lm-tombol{color:#fff;opacity:.95;flex-direction:column;align-items:center;gap:10px;font-size:.9rem;display:flex}.lm-tombol .call-btn{border-radius:50%;width:74px;height:74px}.lm-goyang{animation:1.2s ease-in-out infinite lmGoyang}@keyframes lmGoyang{0%,60%,to{transform:rotate(0)}10%,30%,50%{transform:rotate(-14deg)}20%,40%{transform:rotate(14deg)}}@media (prefers-reduced-motion:reduce){.lm-gelombang,.lm-lambai,.lm-titik i,.lm-goyang{animation:none}}.msg-sorot .msg-bubble{z-index:5;animation:1.8s cubic-bezier(.22,1,.36,1) msgSorotPulse;position:relative}@keyframes msgSorotPulse{0%{filter:brightness();transform:scale(1);box-shadow:0 0 #0000}15%{box-shadow:0 0 0 3.5px var(--primary), 0 0 24px var(--primary-soft,#7c6aff80);filter:brightness(1.3)contrast(1.05);transform:scale(1.04)}35%{box-shadow:0 0 0 3px var(--primary), 0 0 16px var(--primary-soft,#7c6aff59);filter:brightness(1.18);transform:scale(1.02)}65%{box-shadow:0 0 0 1.5px var(--primary), 0 0 8px var(--primary-soft,#7c6aff33);filter:brightness(1.08);transform:scale(1.006)}to{filter:brightness();transform:scale(1);box-shadow:0 0 #0000}}.subtabs-segmented-wrap{background:var(--bg-card);border:1px solid var(--border);border-radius:14px;gap:4px;margin-bottom:12px;padding:4px;display:flex;position:relative}.subtab-segmented-btn{cursor:pointer;color:var(--text-secondary);background:0 0;border:none;border-radius:10px;flex:1;justify-content:center;align-items:center;padding:8px 12px;font-size:.84rem;font-weight:700;transition:background-color .22s cubic-bezier(.16,1,.3,1),color .22s cubic-bezier(.16,1,.3,1),box-shadow .22s cubic-bezier(.16,1,.3,1),transform .15s;display:flex}.subtab-segmented-btn:active{transform:scale(.97)}.subtab-segmented-btn.active{background:var(--primary);color:#fff;box-shadow:0 2px 10px #7c6aff47}.subtab-content-anim{animation:.2s cubic-bezier(.16,1,.3,1) both subtabFadeSlide}@keyframes subtabFadeSlide{0%{opacity:.3;transform:translateY(4px)}to{opacity:1;transform:translate(0,0)}}@keyframes msgBubbleEnter{0%{opacity:0;transform:translateY(8px)scale(.96)}to{opacity:1;transform:translate(0,0)scale(1)}}.reaction-bar-pop{animation:.25s cubic-bezier(.18,1.25,.4,1) both reactionBarPop}@keyframes reactionBarPop{0%{opacity:0;transform:translateY(10px)scale(.88)}to{opacity:1;transform:translate(0,0)scale(1)}}.reaction-emoji-btn{transition:transform .16s cubic-bezier(.18,1.35,.35,1)}.reaction-emoji-btn:hover,.reaction-emoji-btn:active{transform:scale(1.3)translateY(-4px)}.reaction-badge-bounce{animation:.3s cubic-bezier(.18,1.4,.35,1) both reactionBadgeBounce}@keyframes reactionBadgeBounce{0%{opacity:0;transform:scale(.4)}70%{opacity:1;transform:scale(1.22)}to{opacity:1;transform:scale(1)}}.typing-dots{vertical-align:middle;align-items:center;gap:3px;margin-left:5px;display:inline-flex}.typing-dots span{background:var(--primary,#25d366);border-radius:50%;width:4px;height:4px;animation:1.2s ease-in-out infinite typingDotJump;display:inline-block}.typing-dots span:first-child{animation-delay:0s}.typing-dots span:nth-child(2){animation-delay:.2s}.typing-dots span:nth-child(3){animation-delay:.4s}@keyframes typingDotJump{0%,60%,to{opacity:.35;transform:translateY(0)}30%{opacity:1;transform:translateY(-4px)}}.bottom-sheet-spring{animation:.25s cubic-bezier(.16,1.15,.3,1) both sheetSpringSlideUp}@keyframes sheetSpringSlideUp{0%{opacity:0;transform:translateY(36px)scale(.97)}to{opacity:1;transform:translate(0,0)scale(1)}}.lencana-bump{animation:.32s cubic-bezier(.18,1.4,.35,1) badgeBump;display:inline-flex}@keyframes badgeBump{0%{transform:scale(1)}45%{transform:scale(1.35)}75%{transform:scale(.92)}to{transform:scale(1)}}.btn-morph{animation:.22s cubic-bezier(.18,1.3,.4,1) both btnMorph;display:inline-flex}@keyframes btnMorph{0%{opacity:0;transform:scale(.7)rotate(-35deg)}to{opacity:1;transform:scale(1)rotate(0)}}.nav-item{flex:1 1 0;min-width:0;overflow:visible!important}.nav-item .nav-label,.nav-item>span:last-child,.mobile-header h2,.section-title,.sub-tab{white-space:nowrap;text-overflow:ellipsis;max-width:100%;overflow:hidden}.mobile-header h2,.sub-tab{min-width:0}.profile-row>.profile-value{white-space:nowrap;text-overflow:ellipsis;text-align:right;min-width:0;overflow:hidden}.mobile-layout{height:var(--tinggi-layar,100dvh)}.full-screen-modal,html.keyboard-buka div[style*="position: fixed"][style*="inset: 0"]{top:var(--atas-layar,0px)!important;height:var(--tinggi-layar,100dvh)!important;bottom:auto!important}html.keyboard-buka .full-screen-modal,html.keyboard-buka .mobile-layout{padding-bottom:0!important}html.keyboard-buka div[style*="position: fixed"][style*="inset: 0"]>div[style*=safe-area-inset-bottom]{padding-bottom:8px!important}html.keyboard-buka .bottom-nav{display:none!important}html.keyboard-buka .mobile-content{padding-bottom:12px}html.keyboard-buka .chat-input-bar{padding-top:6px!important;padding-bottom:6px!important;padding-left:max(12px, env(safe-area-inset-left))!important;padding-right:max(12px, env(safe-area-inset-right))!important}.chat-messages-area{overscroll-behavior-y:contain;-webkit-overflow-scrolling:touch}.call-modal.panggilan-kecil{display:none!important}.bar-panggilan{z-index:96;color:#fff;text-shadow:none;cursor:pointer;padding:calc(env(safe-area-inset-top,0px) + .35rem) 1rem .45rem;text-align:center;white-space:nowrap;text-overflow:ellipsis;background:#1fa855;font-size:.85rem;font-weight:700;line-height:1.2rem;animation:2.2s ease-in-out infinite barPanggilanBreathing;position:fixed;top:0;left:0;right:0;overflow:hidden;box-shadow:0 2px 14px #1fa85566}@keyframes barPanggilanBreathing{0%,to{background:#1fa855;box-shadow:0 2px 10px #1fa85559}50%{background:#25d366;box-shadow:0 4px 20px #25d366a6}}html.ada-bar-panggilan .mobile-header{padding-top:calc(12px + env(safe-area-inset-top,0px) + 2rem)}.ajak-video{left:16px;right:16px;top:calc(env(safe-area-inset-top,0px) + 64px);z-index:45;box-sizing:border-box;background:var(--bg-solid,var(--bg-card));max-width:400px;color:var(--text-main);text-align:center;text-shadow:none;box-shadow:var(--shadow);border-radius:18px;margin:0 auto;padding:16px;position:absolute}:root{--teks-asli:var(--text-main);--teks-asli-2:var(--text-secondary)}.menu-header{--text-main:var(--teks-asli);--text-secondary:var(--teks-asli-2);color:var(--teks-asli)}.btn-terima,.btn-tolak{cursor:pointer;text-shadow:none;border:none;border-radius:10px;padding:10px 14px;font-family:inherit;font-weight:700;transition:transform .12s,filter .2s;color:#fff!important}.btn-terima{background:linear-gradient(135deg,#3dd68c,#1fa855);box-shadow:0 2px 10px #1fa8554d}.btn-tolak{background:linear-gradient(135deg,#ff7a7a,#e5484d);box-shadow:0 2px 10px #e5484d47}.btn-terima:active,.btn-tolak:active{filter:brightness(.95);transform:scale(.97)}html[data-pola-warna] .mobile-layout{background:var(--pola-lapis), var(--bg-deep)}.chip-teman{white-space:nowrap;border-radius:14px;min-height:28px;padding:5px 10px;font-size:.7rem;line-height:1}.chip-tambah{border:1px solid var(--primary);color:var(--primary);cursor:pointer;background:0 0;font-family:inherit;font-weight:700}.chip-tambah:active{background:var(--primary-soft)}.chip-menunggu{color:var(--text-hint);white-space:nowrap;padding:4px 2px;font-size:.68rem}.swipe-button-container{-webkit-user-select:none;user-select:none;background:#ffffff26;border:1px solid #ffffff1a;border-radius:26px;justify-content:center;align-items:center;height:52px;display:flex;position:relative;overflow:hidden;box-shadow:inset 0 2px 4px #0003}.swipe-text{color:#fff;pointer-events:none;letter-spacing:.5px;font-size:.85rem;font-weight:600;transition:opacity .3s}.swipe-thumb{background:var(--bg-color);color:#fff;cursor:grab;border-radius:26px;justify-content:center;align-items:center;width:52px;height:100%;display:flex;position:absolute;top:0;left:0;box-shadow:0 2px 8px #0000004d}.swipe-thumb:active{cursor:grabbing}.desktop-placeholder{display:none}@media (width>=900px){body{justify-content:flex-start!important;overflow:hidden!important}#root{background:var(--bg-deep,#12121a)!important;justify-content:flex-start!important;width:100vw!important;max-width:100vw!important}.mobile-layout{flex-direction:row!important;width:100vw!important;max-width:100%!important;height:100dvh!important;display:flex!important;position:relative!important;overflow:visible!important}.mobile-layout>.mobile-header,.mobile-layout>.mobile-content,.mobile-layout>.bottom-nav{width:var(--sidebar-width,400px)!important;max-width:var(--sidebar-width,400px)!important;min-width:var(--sidebar-width,400px)!important;box-sizing:border-box!important;flex-shrink:0!important}.mobile-layout>.mobile-header,.mobile-layout>.bottom-nav{display:flex!important}.mobile-layout>.mobile-content{display:block!important}.mobile-layout>.mobile-header,.full-screen-modal.chat-room-modal>.mobile-header,.full-screen-modal.sidebar-modal>.mobile-header,.full-screen-modal>.mobile-header{box-sizing:border-box!important;flex-shrink:0!important;align-items:center!important;height:64px!important;min-height:64px!important;max-height:64px!important;padding:0 16px!important;display:flex!important}.mobile-layout>.mobile-header{width:var(--sidebar-width,400px)!important;border-right:1px solid var(--border,#ffffff0f)!important;z-index:20!important;position:fixed!important;top:0!important;left:0!important;overflow:hidden!important}.full-screen-modal.chat-room-modal>.mobile-header{overflow:visible!important}.mobile-layout>.mobile-content{width:var(--sidebar-width,400px)!important;border-right:1px solid var(--border,#ffffff0f)!important;z-index:10!important;height:calc(100vh - 124px)!important;padding-bottom:30px!important;position:fixed!important;top:64px!important;bottom:60px!important;left:0!important;overflow:hidden auto!important}.mobile-layout>.bottom-nav{width:var(--sidebar-width,400px)!important;border-right:1px solid var(--border,#ffffff0f)!important;z-index:20!important;justify-content:space-around!important;height:60px!important;padding-bottom:0!important;position:fixed!important;bottom:0!important;left:0!important}.mobile-layout.has-active-overlay>.mobile-header,.mobile-layout.has-active-overlay>.bottom-nav{display:flex!important}.mobile-layout.has-active-overlay>.mobile-content{display:block!important}.full-screen-modal.chat-room-modal{left:var(--sidebar-width,400px)!important;width:calc(100vw - var(--sidebar-width,400px))!important;border-left:1px solid var(--border,#ffffff0f)!important;z-index:30!important;position:fixed!important;top:0!important;bottom:0!important;right:0!important}.desktop-placeholder{left:var(--sidebar-width,400px)!important;background:var(--bg-deep,#12121a)!important;border-left:1px solid var(--border,#ffffff0f)!important;text-align:center!important;color:var(--text-secondary,#9898ac)!important;z-index:5!important;flex-direction:column!important;justify-content:center!important;align-items:center!important;padding:32px!important;display:flex!important;position:fixed!important;top:0!important;bottom:0!important;right:0!important}.full-screen-modal.sidebar-modal{width:var(--sidebar-width,400px)!important;max-width:var(--sidebar-width,400px)!important;border-right:1px solid var(--border,#ffffff0f)!important;z-index:40!important;position:fixed!important;inset:0 auto 0 0!important}}.dual-state-tile{border:1px solid var(--border,#ffffff14);background:var(--bg-surface,#ffffff0a);color:var(--text-secondary,#94a3b8);cursor:pointer;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;border-radius:18px;outline:none;flex-direction:column;justify-content:center;align-items:center;gap:8px;padding:16px 10px;font-family:inherit;transition:all .22s cubic-bezier(.16,1,.3,1);display:flex}.dual-state-tile:hover{border-color:var(--border-hover,#ffffff2e);background:var(--bg-hover,#ffffff12);color:var(--text-main,#f8fafc);transform:translateY(-2px)}.dual-state-tile:active,.dual-state-tile.is-active{transform:translateY(-3px)scale(1.02);box-shadow:0 8px 24px #2563eb6b;background:var(--primary,#2563eb)!important;border-color:var(--primary,#2563eb)!important;color:#fff!important}.dual-state-tile.is-active svg{filter:drop-shadow(0 0 6px #ffffff80);fill:currentColor!important;stroke-width:.5px!important}.dual-state-tile .tile-label{letter-spacing:.2px;font-size:.78rem;font-weight:600}.nav-item.active .nav-icon-wrap svg{filter:drop-shadow(0 0 6px var(--primary-soft,#7c6aff66));transition:fill .2s,filter .2s;fill:currentColor!important;stroke-width:.6px!important}.dev-dual-tab{border:1px solid var(--border);background:var(--bg-surface);color:var(--text-secondary);cursor:pointer;border-radius:12px;align-items:center;gap:8px;padding:8px 14px;font-size:.82rem;font-weight:600;transition:all .2s;display:flex}.dev-dual-tab:hover{background:var(--bg-hover);color:var(--text-main);border-color:var(--border-hover)}.dev-dual-tab.is-active{box-shadow:0 4px 14px #2563eb59;background:var(--primary)!important;color:#fff!important;border-color:var(--primary)!important}.dev-dual-tab.is-active svg{fill:currentColor;stroke-width:.5px}.icon-btn:hover .dual-icon-wrapper,.icon-btn:active .dual-icon-wrapper{transform:scale(1.14)!important}.icon-btn:hover .dual-icon-wrapper svg,.icon-btn:active .dual-icon-wrapper svg,.lampiran-btn:hover .dual-icon-wrapper svg,.lampiran-btn:active .dual-icon-wrapper svg{fill:currentColor;stroke-width:.55px}.bento-biodata-grid{flex-direction:column;gap:12px;margin-bottom:18px;display:flex}.bento-card{background:var(--bg-card);border:1px solid var(--border);box-shadow:var(--shadow);border-radius:20px;padding:14px 16px;transition:transform .22s cubic-bezier(.16,1,.3,1),box-shadow .22s cubic-bezier(.16,1,.3,1),border-color .2s;position:relative;overflow:hidden}.bento-card:hover{border-color:var(--border-hover,#fff3)}.bento-card-title{text-transform:uppercase;letter-spacing:.6px;color:var(--text-hint);justify-content:space-between;align-items:center;margin-bottom:10px;font-size:.74rem;font-weight:800;display:flex}.bento-item-row{border-bottom:1px solid var(--border);justify-content:space-between;align-items:center;gap:12px;padding:9px 0;display:flex}.bento-item-row:last-child{border-bottom:none;padding-bottom:2px}.bento-item-left{flex:1;align-items:center;gap:12px;min-width:0;display:flex}.bento-icon-box{background:var(--bg-surface,#ffffff0a);border:1px solid var(--border);border-radius:12px;flex-shrink:0;justify-content:center;align-items:center;width:36px;height:36px;transition:transform .18s;display:flex}.bento-item-row:hover .bento-icon-box{transform:scale(1.08)}.bento-item-info{flex:1;min-width:0}.bento-item-label{color:var(--text-secondary);font-size:.72rem;line-height:1.2}.bento-item-val{color:var(--text-main);white-space:nowrap;text-overflow:ellipsis;margin-top:2px;font-size:.9rem;font-weight:600;overflow:hidden}.bento-item-empty{color:var(--primary);cursor:pointer;align-items:center;gap:4px;margin-top:2px;padding:2px 0;font-size:.8rem;font-weight:600;display:inline-flex}.bento-item-empty:hover{text-decoration:underline}.chip-privasi{cursor:pointer;-webkit-user-select:none;user-select:none;white-space:nowrap;border:1px solid #0000;border-radius:20px;flex-shrink:0;align-items:center;gap:5px;padding:5px 11px;font-size:.72rem;font-weight:700;transition:all .2s cubic-bezier(.18,1.25,.4,1);display:inline-flex}.chip-privasi:active{transform:scale(.92)}.chip-privasi.publik{color:#10b981;background:#10b9811f;border-color:#10b9814d}.chip-privasi.teman{background:var(--primary-soft,#7c6aff26);color:var(--primary);border-color:var(--primary-soft,#7c6aff59)}.chip-privasi.me{color:#f59e0b;background:#f59e0b1f;border-color:#f59e0b4d}.bento-social-grid{grid-template-columns:1fr 1fr;gap:10px;display:grid}.bento-social-pill{background:var(--bg-surface);border:1px solid var(--border);color:var(--text-main);cursor:pointer;border-radius:16px;flex-direction:column;gap:6px;padding:10px 12px;text-decoration:none;transition:all .2s cubic-bezier(.18,1.25,.4,1);display:flex}.bento-social-pill:hover,.bento-social-pill:active{background:var(--bg-hover);border-color:var(--border-hover);transform:translateY(-2px)}.bento-social-pill.instagram{background:linear-gradient(135deg,#e1306c1a 0%,#fd1d1d0d 100%);border-color:#e1306c40}.bento-social-pill.youtube{background:linear-gradient(135deg,#ff00001a 0%,#c800000d 100%);border-color:#ff000040}.bento-ultah-glow{background:linear-gradient(135deg, #ffd70029 0%, var(--bg-card) 75%);border-color:#ffd70066}.cover-menu-btn{-webkit-backdrop-filter:blur(8px);color:#fff;cursor:pointer;z-index:25;background:#0000008c;border:1px solid #ffffff38;border-radius:50%;justify-content:center;align-items:center;width:32px;height:32px;transition:transform .15s,background .15s;display:flex;position:absolute;top:10px;right:10px;box-shadow:0 4px 12px #0000004d}.cover-menu-btn:active{background:#000000bf;transform:scale(.92)}.cover-popup-menu{z-index:55;background:var(--bg-solid,var(--bg-card));border:1px solid var(--border);-webkit-backdrop-filter:blur(16px);border-radius:12px;min-width:175px;padding:4px;animation:.16s cubic-bezier(.16,1,.3,1) popMenuScale;position:absolute;top:40px;right:0;box-shadow:0 10px 28px #0006}@keyframes popMenuScale{0%{opacity:0;transform:scale(.9)translateY(-6px)}to{opacity:1;transform:scale(1)translateY(0)}}.cover-menu-item{color:var(--text-main);text-align:left;cursor:pointer;white-space:nowrap;background:0 0;border:none;border-radius:8px;align-items:center;gap:8px;width:100%;padding:7px 10px;font-family:inherit;font-size:.78rem;font-weight:600;transition:background .12s;display:flex}.cover-menu-item:hover,.cover-menu-item:active{background:var(--bg-hover)}.cover-menu-item.danger{color:#ff3b30}.cover-menu-item.danger:hover,.cover-menu-item.danger:active{background:#ff3b301a}.counter{color:var(--accent);background:var(--accent-bg);border:2px solid #0000;border-radius:5px;margin-bottom:24px;padding:5px 10px;font-size:16px;transition:border-color .3s}.counter:hover{border-color:var(--accent-border)}.counter:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.hero{position:relative}.hero .base,.hero .framework,.hero .vite{margin:0 auto;inset-inline:0}.hero .base{z-index:0;width:170px;position:relative}.hero .framework,.hero .vite{position:absolute}.hero .framework{z-index:1;height:28px;top:34px;transform:perspective(2000px)rotate(300deg)rotateX(44deg)rotateY(39deg)scale(1.4)}.hero .vite{z-index:0;width:auto;height:26px;top:107px;transform:perspective(2000px)rotate(300deg)rotateX(40deg)rotateY(39deg)scale(.8)}#center{flex-direction:column;flex-grow:1;place-content:center;place-items:center;gap:25px;display:flex}@media (width<=1024px){#center{gap:18px;padding:32px 20px 24px}}#next-steps{border-top:1px solid var(--border);text-align:left;display:flex}#next-steps>div{flex:1 1 0;padding:32px}@media (width<=1024px){#next-steps>div{padding:24px 20px}}#next-steps .icon{width:22px;height:22px;margin-bottom:16px}@media (width<=1024px){#next-steps{text-align:center;flex-direction:column}}#docs{border-right:1px solid var(--border)}@media (width<=1024px){#docs{border-right:none;border-bottom:1px solid var(--border)}}#next-steps ul{gap:8px;margin:32px 0 0;padding:0;list-style:none;display:flex}#next-steps ul .logo{height:18px}#next-steps ul a{color:var(--text-h);background:var(--social-bg);border-radius:6px;align-items:center;gap:8px;padding:6px 12px;font-size:16px;text-decoration:none;transition:box-shadow .3s;display:flex}#next-steps ul a:hover{box-shadow:var(--shadow)}#next-steps ul a .button-icon{width:18px;height:18px}@media (width<=1024px){#next-steps ul{flex-wrap:wrap;justify-content:center;margin-top:20px}#next-steps ul li{flex:calc(50% - 8px)}#next-steps ul a{box-sizing:border-box;justify-content:center;width:100%}}#spacer{border-top:1px solid var(--border);height:88px}@media (width<=1024px){#spacer{height:48px}}.ticks{width:100%;position:relative}.ticks:before,.ticks:after{content:"";border:5px solid #0000;position:absolute;top:-4.5px}.ticks:before{border-left-color:var(--border);left:0}.ticks:after{border-right-color:var(--border);right:0}.screen-transition-wrapper,.screen-slide-in{will-change:transform, opacity;animation:.25s cubic-bezier(.2,.8,.2,1) forwards screenSlideIn}@keyframes screenSlideIn{0%{opacity:0;transform:translate(100%)}to{opacity:1;transform:translate(0,0)}}.screen-slide-out{will-change:transform, opacity;animation:.25s cubic-bezier(.2,.8,.2,1) forwards screenSlideOut}@keyframes screenSlideOut{0%{opacity:1;transform:translate(0,0)}to{opacity:0;transform:translate(100%)}}