/* ===================================================================================== TEMA "ETALASE" — tampilan marketplace terang untuk Xaviera Store (web utama) ------------------------------------------------------------------------------------- Cara kerja: file ini HANYA aktif kalau punya class "tm-market" (lihat index.html). Semua aturan di sini menimpa CSS lama TANPA mengubah CSS lama sama sekali. Kembali ke tampilan lama: upload index.html dari folder "KEMBALIKAN-TAMPILAN-LAMA". File tema ini boleh dibiarkan di server — tanpa class "tm-market" dia tidak berpengaruh. ===================================================================================== */ @font-face{font-family:'Exo 2';font-style:normal;font-weight:600;font-display:swap;src:url(/tema/fonts/exo-2-latin-600-normal.woff2) format('woff2')} @font-face{font-family:'Exo 2';font-style:normal;font-weight:700;font-display:swap;src:url(/tema/fonts/exo-2-latin-700-normal.woff2) format('woff2')} @font-face{font-family:'Exo 2';font-style:normal;font-weight:800;font-display:swap;src:url(/tema/fonts/exo-2-latin-800-normal.woff2) format('woff2')} /* ---------- 1. Token warna & huruf ---------- !important dipakai HANYA di token, karena "Skin Toko" admin menulis warna langsung ke style lewat JS — tanpa ini skin gelap akan menimpa tema terang. */ html.tm-market{ --tm-blue:#0d3b8f; /* header & pita atas */ --tm-blue-2:#12489f; /* pita bawah header (sedikit lebih terang) */ --tm-ink:#172033; /* teks utama */ --tm-mut:#566379; /* teks kedua (cukup kontras di latar terang) */ --tm-page:#edf2fa; /* latar halaman */ --tm-card:#ffffff; --tm-line:#dbe3f0; --tm-link:#1a5fd8; /* tautan & tombol utama */ --tm-price:#d9480f; /* harga */ --tm-sun:#f5b301; /* garis fokus kolom cari */ --tm-tile:#e6eefc; /* latar kotak ikon */ --bg:var(--tm-page)!important; --bg2:var(--tm-card)!important; --glass:#f3f6fc!important; --glass2:#e9eff9!important; --line:var(--tm-line)!important; --txt:var(--tm-ink)!important; --mut:var(--tm-mut)!important; --vio:var(--tm-link)!important; --vio2:#1450c4!important; --cy:#1270bd!important; --green:#0e8f4e!important; --red:#d62e4a!important; --r:12px; --font-d:'Exo 2','Segoe UI',system-ui,sans-serif!important; --font-b:system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif!important; color-scheme:light; } html.tm-market body{background:var(--tm-page);color:var(--tm-ink);font-family:var(--font-b)} html.tm-market ::selection{background:#cfe0ff;color:var(--tm-ink)} html.tm-market :focus-visible{outline:2px solid var(--tm-link);outline-offset:2px} /* dekorasi gelap lama & efek partikel skin dimatikan — dirancang untuk latar gelap */ html.tm-market .aurora, html.tm-market .grid-bg, html.tm-market #storeEffectLayer, html.tm-market #storeBottomBanner{display:none!important} html.tm-market body .btn-p::after, html.tm-market body .qn-btn::after, html.tm-market body .card::after, html.tm-market body .qn-btn::before{content:none!important;display:none!important} /* ---------- 2. Tombol ---------- */ html.tm-market body .btn{border-radius:8px;font-weight:700;letter-spacing:0} html.tm-market body .btn-p{background:var(--tm-link);color:#fff;box-shadow:none;border:none} html.tm-market body .btn-p:hover{background:#154fb8;transform:none;box-shadow:none} html.tm-market body .btn-g{background:#fff;color:var(--tm-link);border:1px solid #bcd0f2} html.tm-market body .btn-g:hover{background:#f2f6ff} html.tm-market body .btn:disabled{background:#e4e8ef;color:#8a93a6;border-color:#e4e8ef} /* ---------- 3. Header biru ---------- */ html.tm-market nav{ background:var(--tm-blue);border-bottom:none;backdrop-filter:none; flex-wrap:wrap;row-gap:10px;padding:10px clamp(14px,4vw,40px); box-shadow:0 1px 0 rgba(0,0,0,.08); } html.tm-market .logo{color:#fff;font-family:var(--font-d);font-weight:800;font-size:1.2rem;letter-spacing:.2px} html.tm-market .logo .x{box-shadow:none;animation:none;background:#fff;border-radius:10px} html.tm-market nav .nav-right{gap:8px} html.tm-market #loginBtn{background:#2f6fe4;color:#fff;border-radius:8px;padding:9px 18px;font-size:.9rem;font-family:var(--font-d);font-weight:700} html.tm-market #loginBtn:hover{background:#3b7bf0} html.tm-market .snd-btn{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.22);color:#fff} html.tm-market .saldo-pill{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.25);color:#fff} html.tm-market .avatar{border:2px solid #fff} html.tm-market .nav-burger{background:transparent;border:none;color:#fff;width:38px;height:38px;font-size:1.45rem} html.tm-market .nav-burger:hover{background:rgba(255,255,255,.12)} /* kolom cari di header (dibuat oleh tema/marketplace.js) */ html.tm-market .tm-search{flex:1 1 100%;order:10;position:relative;display:flex} html.tm-market .tm-search input{ width:100%;height:44px;border-radius:8px;border:2px solid transparent;background:#fff; padding:0 14px 0 44px;font-size:.95rem;color:var(--tm-ink);outline:none;font-family:var(--font-b); } html.tm-market .tm-search input::placeholder{color:#8f99ad} html.tm-market .tm-search input:focus{border-color:var(--tm-sun)} html.tm-market .tm-search svg{position:absolute;left:14px;top:50%;transform:translateY(-50%);width:20px;height:20px;color:#475166;pointer-events:none} /* tautan menu desktop: jadi baris kedua di pita biru */ @media(min-width:721px){ html.tm-market nav{padding-top:12px;padding-bottom:0} html.tm-market .tm-search{flex:1 1 360px;order:0;max-width:640px;margin:0 8px} html.tm-market nav .links{order:20;flex:1 1 100%;margin:0 -8px;padding:2px 0 6px;gap:2px} html.tm-market nav .links a{color:#d6e3ff;font-weight:600;font-size:.84rem;padding:8px 11px;border-radius:6px} html.tm-market nav .links a:hover{color:#fff;background:rgba(255,255,255,.1)} html.tm-market nav .links a .nl-ic{color:#9fbcf5} html.tm-market .scroll-hint{color:#fff;background:linear-gradient(90deg,transparent,var(--tm-blue) 60%)} } /* header HP: baris 1 = ☰ logo | profil/saldo (tidak lagi turun ke baris 2), baris 2 = kolom cari */ @media(max-width:720px){ html.tm-market .nav-burger{order:-1;margin-left:-6px} html.tm-market .logo{flex:1 1 0;min-width:0;margin-right:0} html.tm-market .logo #storeName{white-space:nowrap;min-width:0} html.tm-market nav .nav-right{margin-left:0;flex-shrink:0;gap:6px} html.tm-market #sndBtn{display:none} /* tombol suara disembunyikan di HP supaya header tetap 1 baris */ html.tm-market .saldo-pill{padding:6px 10px;font-size:.78rem} html.tm-market .avatar{width:34px;height:34px} } /* sembunyikan ikon/aksen warna-warni yang dipasang inline di menu */ html.tm-market #tasNavLink,html.tm-market #navJadiReseller{color:inherit!important} /* ---------- 4. Pita biru: kartu promo + jaminan (hero) ---------- Elemen "berani" halaman ini: pita biru berpola ikon game tipis, berisi kartu promo tegak (dibuat otomatis oleh marketplace.js dari produk rekomendasi) dan baris jaminan toko. Banner geser admin dipindah ke bawah kotak kategori. Judul besar lama disembunyikan secara visual (tetap terbaca mesin pencari & pembaca layar). */ html.tm-market .hero{ position:relative;max-width:1180px;margin:0 auto;text-align:left; padding:14px clamp(16px,4vw,48px) 0; } html.tm-market .hero-badges, html.tm-market .hero .cta, html.tm-market #taglineTxt{display:none} html.tm-market .hero h1{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;margin:0;padding:0} html.tm-market .tm-band, html.tm-market .hlx-wrap:not(.tm-moved){position:relative;isolation:isolate} html.tm-market .tm-band::before, html.tm-market .hlx-wrap:not(.tm-moved)::before{ content:'';position:absolute;z-index:-1;left:50%;width:100vw;transform:translateX(-50%); top:-22px;bottom:-30px; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180' fill='none' stroke='%23ffffff' stroke-opacity='.09' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='14' y='22' width='58' height='34' rx='16'/%3E%3Cpath d='M30 39h12M36 33v12'/%3E%3Ccircle cx='56' cy='36' r='2.5'/%3E%3Ccircle cx='62' cy='43' r='2.5'/%3E%3Cpath d='M128 18l16 14-16 22-16-22z'/%3E%3Cpath d='M112 32h32'/%3E%3Ccircle cx='44' cy='128' r='17'/%3E%3Cpath d='M44 120v16M39 124h8'/%3E%3Cpath d='M132 112l5 11 12 1-9 8 3 12-11-6-11 6 3-12-9-8 12-1z'/%3E%3C/svg%3E") 0 0/180px 180px,linear-gradient(180deg,var(--tm-blue) 0%,#1b56c4 100%); clip-path:polygon(0 0,100% 0,100% calc(100% - 44px),96% 100%,4% 100%,0 calc(100% - 44px)); } html.tm-market .tm-band{margin:0 0 30px} html.tm-market .hlx-wrap{max-width:none;margin:0 0 26px;animation:none} html.tm-market .hlx-wrap.tm-moved{margin:14px 0 0} html.tm-market .hlx-strip{border-radius:12px;box-shadow:0 10px 24px -14px rgba(3,20,60,.6)} html.tm-market .hlx-dots{margin-top:10px;position:relative} html.tm-market .hlx-wrap:not(.tm-moved) .hlx-dot{background:rgba(255,255,255,.45)} html.tm-market .hlx-wrap:not(.tm-moved) .hlx-dot.on{background:#fff} html.tm-market .hlx-wrap.tm-moved .hlx-dot{background:#c6d3ea} html.tm-market .hlx-wrap.tm-moved .hlx-dot.on{background:var(--tm-link)} /* kartu promo tegak */ html.tm-market .tm-promo{ display:grid;grid-auto-flow:column;grid-auto-columns:min(58vw,240px);gap:12px; overflow-x:auto;scroll-snap-type:x mandatory;padding:4px 2px 6px;scrollbar-width:none; } html.tm-market .tm-promo::-webkit-scrollbar{display:none} @media(min-width:900px){html.tm-market .tm-promo{grid-auto-flow:row;grid-template-columns:repeat(4,1fr);grid-auto-columns:auto;gap:22px;overflow:visible}} html.tm-market .tm-pc{ position:relative;scroll-snap-align:start;aspect-ratio:7/10;border-radius:4px;overflow:hidden;isolation:isolate; display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:10px;padding:0 14px 18px; color:#fff;text-align:center;cursor:pointer;background:#0b2a66; box-shadow:0 0 0 4px rgba(255,255,255,.08),0 14px 30px -18px rgba(0,0,0,.7); } html.tm-market .tm-pc::before{ /* latar dari logo produk, diburamkan */ content:'';position:absolute;inset:-20%;z-index:-2;background:var(--tm-img,none) center/cover; filter:blur(30px) saturate(1.5) brightness(.9); } html.tm-market .tm-pc::after{ /* gelap di bawah supaya teks & tombol terbaca */ content:'';position:absolute;inset:0;z-index:-1; background:linear-gradient(180deg,rgba(6,22,56,0) 30%,rgba(6,22,56,.55) 62%,rgba(6,22,56,.92) 100%); } html.tm-market .tm-pc-art{ position:absolute;left:50%;top:14%;transform:translateX(-50%);width:52%;aspect-ratio:1;border-radius:22%; background:#fff center/cover;box-shadow:0 18px 30px -12px rgba(0,0,0,.55);display:grid;place-items:center;overflow:hidden; } html.tm-market .tm-pc-art img{width:100%;height:100%;object-fit:cover} html.tm-market .tm-pc-art svg{width:56%;height:56%;color:var(--tm-link)} html.tm-market .tm-pc-name{font-family:var(--font-d);font-weight:800;font-size:1.12rem;line-height:1.2;text-shadow:0 2px 8px rgba(0,0,0,.4); display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} html.tm-market .tm-pc-tag{ font-family:var(--font-d);font-weight:700;font-size:.8rem;color:#1b2233;background:var(--tm-sun); padding:4px 16px;clip-path:polygon(8px 0,100% 0,calc(100% - 8px) 100%,0 100%); } html.tm-market .tm-pc-btn{ font-family:var(--font-d);font-weight:700;font-size:.95rem;color:#fff;background:rgba(255,255,255,.14); border:1.5px solid rgba(255,255,255,.55);border-radius:8px;padding:9px 0;width:min(100%,160px); } html.tm-market .tm-pc:hover .tm-pc-btn{background:rgba(255,255,255,.24)} /* baris jaminan di bawah kartu */ html.tm-market .tm-trust{display:flex;justify-content:center;flex-wrap:wrap;gap:6px 22px;margin-top:16px;color:#fff;font-size:.86rem;font-weight:600} html.tm-market .tm-trust span{display:inline-flex;align-items:center;gap:7px} html.tm-market .tm-trust svg{width:18px;height:18px;flex-shrink:0} @media(min-width:900px){html.tm-market .tm-trust{font-size:1rem;gap:8px 34px;margin-top:22px}} /* ---------- 5. Kotak kategori berwarna (quicknav) ---------- */ html.tm-market .quicknav{ display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px 6px;overflow:visible;max-width:none;margin:0; padding:18px 10px 16px;border-radius:14px;background:#fff;border:1px solid var(--tm-line); box-shadow:0 8px 24px -18px rgba(16,34,74,.35); -webkit-mask-image:none;mask-image:none;animation:none; } @media(min-width:560px){html.tm-market .quicknav{grid-template-columns:repeat(6,minmax(0,1fr))}} @media(min-width:1024px){html.tm-market .quicknav{grid-template-columns:repeat(12,minmax(0,1fr));padding:20px 12px 18px}} html.tm-market body .qn-btn{ flex-direction:column;align-items:center;justify-content:flex-start;gap:8px;padding:6px 0 0;border:none;border-radius:0; background:none;color:#2b3447;font-size:.76rem;font-weight:600;line-height:1.25; white-space:normal;text-align:center;min-width:0;box-shadow:none;position:relative;overflow:visible; } @media(min-width:1024px){html.tm-market body .qn-btn{font-size:.8rem}} html.tm-market body .qn-btn:hover,html.tm-market body .qn-btn:focus-visible{background:none;padding-left:0;border:none} html.tm-market body a.qn-btn{text-decoration:none} html.tm-market body .qn-btn .qn-ic{ --c1:#dbe9ff;--c2:#b7d1ff;--ic:#1a5fd8; position:relative;width:60px;height:60px;border-radius:0;color:var(--ic); background:linear-gradient(145deg,var(--c1) 0%,var(--c2) 100%); clip-path:polygon(9px 0,100% 0,100% calc(100% - 9px),calc(100% - 9px) 100%,0 100%,0 9px); filter:drop-shadow(0 6px 6px rgba(20,40,90,.16));transition:transform .15s ease; } html.tm-market body .qn-btn .qn-ic::after{ /* kilap tipis di atas */ content:'';position:absolute;inset:0;background:linear-gradient(160deg,rgba(255,255,255,.75) 0%,rgba(255,255,255,0) 45%);pointer-events:none; } html.tm-market body .qn-btn .qn-ic svg,html.tm-market body .qn-btn .qn-ic .ic-svg{position:relative;z-index:1;width:30px;height:30px;stroke-width:2.2} html.tm-market body .qn-btn .qn-ic svg :is(rect,circle,ellipse,polygon){fill:currentColor;fill-opacity:.2} html.tm-market body .qn-btn:hover .qn-ic{transform:translateY(-3px) rotate(-2deg)} html.tm-market body .qn-btn[data-cat="produk"] .qn-ic{--c1:#dcebff;--c2:#b3cfff;--ic:#1a5fd8} html.tm-market body .qn-btn[data-cat="nokos"] .qn-ic{--c1:#d7f6ef;--c2:#a9e8da;--ic:#0c8a74} html.tm-market body .qn-btn[data-cat="smm"] .qn-ic{--c1:#ffe3f0;--c2:#ffbcd8;--ic:#cf2f79} html.tm-market body .qn-btn[data-cat="topupgame"] .qn-ic{--c1:#eee3ff;--c2:#d4bfff;--ic:#6a3bd2} html.tm-market body .qn-btn[data-cat="brandedball"] .qn-ic{--c1:#ffe9d6;--c2:#ffc996;--ic:#d8620a} html.tm-market body .qn-btn[data-cat="api"] .qn-ic{--c1:#e6ebf4;--c2:#c8d2e4;--ic:#34425e} html.tm-market body .qn-btn[data-cat="hadiah"] .qn-ic{--c1:#ffe3e3;--c2:#ffbdbd;--ic:#d23434} html.tm-market body .qn-btn[data-cat="family"] .qn-ic{--c1:#e1f6dc;--c2:#b8e8ae;--ic:#2d8f38} html.tm-market body .qn-btn[data-cat="pulsa"] .qn-ic{--c1:#fff3cc;--c2:#ffdf8a;--ic:#a86f00} html.tm-market body .qn-btn[data-cat="aichat"] .qn-ic{--c1:#e5e6ff;--c2:#c4c7ff;--ic:#4a4ed2} html.tm-market body .qn-btn[data-cat="generate"] .qn-ic{--c1:#daf4ff;--c2:#abe0f7;--ic:#0a7fae} html.tm-market body .qn-btn[data-cat="trade"] .qn-ic{--c1:#f7eadc;--c2:#e8c9a8;--ic:#91551c} html.tm-market .tm-new{ position:absolute;top:0;left:calc(50% - 34px);z-index:2;background:#e8323c;color:#fff;font-size:.66rem;font-weight:800; padding:2px 7px;border-radius:99px;box-shadow:0 0 0 2px #fff;line-height:1.35; } html.tm-market body .qn-btn.maint{opacity:.66} html.tm-market body .qn-btn.maint .qn-ic{filter:grayscale(.6)} /* foto kategori dari admin (menggantikan ikon garis) */ html.tm-market body .qn-btn .qn-ic.tm-has-img{background:#fff} html.tm-market body .qn-btn .qn-ic.tm-has-img::after{background:linear-gradient(160deg,rgba(255,255,255,.35) 0%,rgba(255,255,255,0) 40%)} html.tm-market body .qn-btn .qn-ic img.tm-qn-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1} /* ---------- 6. Bagian halaman ---------- */ html.tm-market .wrap{max-width:1180px} html.tm-market section{padding:14px 0} html.tm-market #produk,html.tm-market #rekomSec,html.tm-market #restockSec, html.tm-market #recentlyViewedSec,html.tm-market #aiRekomSec,html.tm-market #info, html.tm-market #reviewSec,html.tm-market #lbSec{ background:#fff;border:1px solid var(--tm-line);border-radius:12px;padding:16px 14px 18px;margin:14px 0; } @media(min-width:721px){ html.tm-market #produk,html.tm-market #rekomSec,html.tm-market #restockSec, html.tm-market #recentlyViewedSec,html.tm-market #aiRekomSec,html.tm-market #info, html.tm-market #reviewSec,html.tm-market #lbSec{padding:20px 20px 22px} } html.tm-market .sec-head{margin-bottom:14px;align-items:center} html.tm-market .sec-head h2{ font-family:var(--font-d);font-weight:800;font-size:clamp(1.12rem,2.2vw,1.4rem); padding-left:0;gap:9px;color:var(--tm-ink);letter-spacing:.1px; } html.tm-market .sec-head h2::before{content:none} html.tm-market .sec-head h2 svg{color:var(--tm-link)} html.tm-market .sec-head .sub{font-size:.82rem;color:var(--tm-mut);margin-top:3px} /* kartu statistik & promo reseller */ html.tm-market .tb-stats{background:#fff;border:1px solid var(--tm-line);box-shadow:none} html.tm-market .tb-stat b,html.tm-market .tb-stat strong{color:var(--tm-link)} html.tm-market .rsl-card{ background:linear-gradient(115deg,#0d3b8f 0%,#1a5fd8 100%);border:none;color:#fff;border-radius:12px;box-shadow:none; } html.tm-market .rsl-card *{color:#fff} html.tm-market .rsl-glow-a,html.tm-market .rsl-glow-b{display:none} html.tm-market .rsl-card .rsl-badge,html.tm-market .rsl-card [class*="chip"],html.tm-market .rsl-card .rsl-feats > *{ background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.28) } html.tm-market .rsl-card .btn,html.tm-market .rsl-card .rsl-btn{background:var(--tm-sun);color:#1b2233!important;box-shadow:none;border:none} html.tm-market .rsl-card .rsl-btn *{color:#1b2233} /* ---------- 7. Filter kategori: pil geser ---------- */ html.tm-market .filters{gap:10px;margin-bottom:14px} html.tm-market #catChips{ display:flex;gap:8px;overflow-x:auto;flex:1 1 100%;padding-bottom:4px;scrollbar-width:none; } html.tm-market #catChips::-webkit-scrollbar{display:none} html.tm-market #catChips .fchip{ width:auto;flex:0 0 auto;border-radius:8px;background:#fff;border:1px solid #cfd8e8;color:#3d475c; font-weight:600;font-size:.84rem;padding:8px 16px;box-shadow:none; } html.tm-market #catChips .fchip.on,html.tm-market #catChips .fchip.active{ border:2px solid var(--tm-link);color:var(--tm-link);background:#f2f7ff;padding:7px 15px; } html.tm-market #produk .search{display:none} /* diganti kolom cari di header */ html.tm-market .toolbar-row .btn,html.tm-market .toolbar-row button{border-radius:8px} /* ---------- 8. Kartu produk ---------- */ html.tm-market .grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px} @media(min-width:640px){html.tm-market .grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}} @media(min-width:900px){html.tm-market .grid{grid-template-columns:repeat(4,minmax(0,1fr))}} html.tm-market .card,html.tm-market .skel-card{ padding:0;gap:0;border-radius:10px;background:#fff;border:1px solid #e1e7f1;box-shadow:0 1px 2px rgba(16,34,74,.05); } html.tm-market .card:hover{transform:translateY(-2px);border-color:#b9ccef;box-shadow:0 8px 18px -10px rgba(16,34,74,.35)} html.tm-market .card-reveal{animation:none} html.tm-market .card .top{flex-direction:column;align-items:stretch;gap:0} html.tm-market .card .ic{ position:relative;width:100%;height:auto;aspect-ratio:1/1;border-radius:0;border:none; background:linear-gradient(160deg,#eef4ff,#dde8fb);font-size:2.6rem;isolation:isolate; } /* latar kotak ikut warna logo produk (gambar yang sama, diburamkan) — diisi marketplace.js */ html.tm-market .card .ic::before{ content:'';position:absolute;inset:-30%;z-index:-1;background-image:var(--tm-img,none); background-size:cover;background-position:center;filter:blur(26px) saturate(1.3);opacity:.38; } html.tm-market .card .ic img{width:58%;height:58%;object-fit:contain;border-radius:18%;box-shadow:0 6px 16px -8px rgba(10,30,70,.55)} html.tm-market .card .top > div:last-child{padding:10px 11px 0} html.tm-market .card h3{ font-family:var(--font-b);font-weight:700;font-size:.88rem;line-height:1.35;color:var(--tm-ink); display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden; } html.tm-market .card .cat{font-size:.74rem;font-weight:500;color:#8a93a6;margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} html.tm-market .card .desc{display:none} html.tm-market .card .prices{padding:8px 11px 0;gap:6px;row-gap:2px} html.tm-market .prices .now{ background:none;-webkit-background-clip:border-box;background-clip:border-box;color:var(--tm-price); font-family:var(--font-d);font-weight:800;font-size:1.02rem;letter-spacing:.1px; } html.tm-market .prices .now small{display:block;font-family:var(--font-b);font-weight:500;font-size:.7rem;color:#8a93a6;letter-spacing:0;line-height:1.3} html.tm-market .prices .strike{font-size:.76rem;color:#9aa3b5} html.tm-market .prices .disc{background:#e8323c;color:#fff;border-radius:5px;padding:2px 6px;font-size:.68rem} html.tm-market .card .stok{padding:6px 11px 10px;font-size:.74rem;font-weight:500;color:#8a93a6} html.tm-market .card .stok b{color:#8a93a6!important;font-weight:600} html.tm-market .stok .live{box-shadow:none;animation:none} html.tm-market .card .btn{ position:static;margin:auto 11px 11px;width:auto;padding:8px 10px;font-size:.8rem;border-radius:7px; } /* seluruh kartu bisa diketuk (seperti marketplace), tombolnya tetap ada */ html.tm-market .card .btn:not(:disabled)::before{content:'';position:absolute;inset:0;z-index:1} html.tm-market .card .wish-btn,html.tm-market .card .cmp-check{z-index:3} html.tm-market .card .badges{position:absolute;top:8px;left:8px;right:48px;z-index:2;gap:4px} html.tm-market .bdg{font-size:.6rem;padding:3px 7px;border-radius:5px;letter-spacing:.2px;border:none;white-space:nowrap} html.tm-market .bdg.star{background:#fff3cf;color:#9a6700} html.tm-market .bdg.flash{background:#ffe1e3;color:#c8102e} html.tm-market .bdg.promo{background:#dcf7e9;color:#0b7a45;z-index:3;position:relative} html.tm-market .wish-btn{top:8px;right:8px;width:30px;height:30px;background:rgba(255,255,255,.92);border:1px solid #e1e7f1;color:#8a93a6;backdrop-filter:none} html.tm-market .wish-btn.on{background:#e8323c;border-color:#e8323c;color:#fff} html.tm-market body.compare-mode .cmp-check{background:rgba(255,255,255,.92);border-color:#e1e7f1} html.tm-market .skel-card{padding:12px;gap:10px} html.tm-market .skel-bar{background:linear-gradient(100deg,#e7edf7 20%,#f4f7fc 45%,#e7edf7 70%);background-size:340px 100%} /* geser halaman produk */ html.tm-market .pg-dots button,html.tm-market .pg-dot{background:#c6d3ea} html.tm-market .pg-dots button.on,html.tm-market .pg-dot.on{background:var(--tm-link)} /* ---------- 9. Lain-lain di beranda ---------- */ html.tm-market .flash-strip,html.tm-market .welcome-strip{background:#fff;border:1px solid var(--tm-line);box-shadow:none} html.tm-market .marquee{background:#fff;border-top:1px solid var(--tm-line);border-bottom:1px solid var(--tm-line)} html.tm-market .bc{background:#f7f9fd;border:1px solid var(--tm-line);box-shadow:none} html.tm-market .bc:hover{transform:none;box-shadow:none;border-color:#c5d5f1} html.tm-market .bc::before{background:var(--tm-link)} html.tm-market .bc-ic{background:var(--tm-tile);box-shadow:none} html.tm-market .bc .bc-new{color:#fff;background:#12a150;animation:none} html.tm-market .rv-summary,html.tm-market .rv-card,html.tm-market .rv-item,html.tm-market .lb-panel{background:#f7f9fd;border-color:var(--tm-line);box-shadow:none} html.tm-market .rv-summary::before{content:none} html.tm-market .rv-summary .rv-avg{background:none;-webkit-background-clip:border-box;background-clip:border-box;color:var(--tm-link)} html.tm-market .rv-card::before{background:var(--tm-link);opacity:1} html.tm-market .rv-card:hover{transform:none;box-shadow:none;border-color:#c5d5f1} html.tm-market .rv-card .rv-text{color:var(--tm-ink)} html.tm-market .rv-scroll-wrap::before{background:linear-gradient(90deg,#fff,transparent)} html.tm-market .rv-scroll-wrap::after{background:linear-gradient(270deg,#fff,transparent)} /* ---------- 10. Footer ---------- */ html.tm-market footer{background:transparent;border-top:1px solid var(--tm-line);color:var(--tm-mut);margin-top:auto;padding-top:22px;padding-bottom:22px;font-size:.8rem} html.tm-market footer a{color:var(--tm-link)!important} /* ---------- 11. Navigasi bawah (HP) — kapsul kaca ala iOS ---------- Mengambang, latar kaca buram, "lensa" aktif meluncur dengan pegas, ikon memantul saat diketuk, dan mengecil halus saat halaman discroll ke bawah (muncul lagi saat scroll naik). */ @media(max-width:640px){ html.tm-market .bottom-nav{ left:12px;right:12px;bottom:calc(10px + env(safe-area-inset-bottom));height:64px;padding:6px; border-radius:32px;border:1px solid rgba(255,255,255,.75); background:rgba(255,255,255,.62);-webkit-backdrop-filter:blur(22px) saturate(180%);backdrop-filter:blur(22px) saturate(180%); box-shadow:0 14px 34px -14px rgba(13,40,95,.45),0 2px 6px -2px rgba(13,40,95,.12),inset 0 1px 0 rgba(255,255,255,.9); animation:tmBnIn .7s cubic-bezier(.22,1.2,.36,1) both; transition:height .45s cubic-bezier(.32,.72,0,1),left .45s cubic-bezier(.32,.72,0,1),right .45s cubic-bezier(.32,.72,0,1),bottom .45s cubic-bezier(.32,.72,0,1),border-radius .45s ease; } @supports not ((backdrop-filter:blur(2px)) or (-webkit-backdrop-filter:blur(2px))){html.tm-market .bottom-nav{background:rgba(255,255,255,.96)}} html.tm-market .bn-indicator{ display:block;top:6px;bottom:6px;left:6px;width:calc(20% - 4.8px);border-radius:26px; background:linear-gradient(180deg,rgba(26,95,216,.16),rgba(26,95,216,.09)); box-shadow:inset 0 1px 0 rgba(255,255,255,.9),inset 0 -1px 0 rgba(26,95,216,.08),0 4px 12px -6px rgba(26,95,216,.45); animation:none;transition:transform .55s cubic-bezier(.34,1.45,.55,1); } html.tm-market .bn-item{ color:#6b7488;font-family:-apple-system,BlinkMacSystemFont,'SF Pro Text',system-ui,sans-serif;font-size:10.5px;font-weight:600;letter-spacing:-.1px; gap:3px;padding:6px 2px 4px;border-radius:24px;-webkit-tap-highlight-color:transparent; } html.tm-market .bn-item svg{width:24px;height:24px;transition:transform .5s cubic-bezier(.34,1.8,.5,1),color .3s ease} html.tm-market .bn-item span{transition:opacity .3s ease,transform .45s cubic-bezier(.32,.72,0,1),max-height .45s cubic-bezier(.32,.72,0,1);max-height:14px;overflow:hidden} html.tm-market .bn-item:active svg{transform:scale(.82)} html.tm-market .bn-item.on{color:var(--tm-link)} html.tm-market .bn-item.on svg{transform:scale(1.08);animation:tmBnPop .55s cubic-bezier(.34,1.8,.5,1)} html.tm-market .bn-item.on span{transform:none} html.tm-market .bn-item.on svg path[data-fill="1"],html.tm-market .bn-item.on svg circle[data-fill="1"]{fill:currentColor;fill-opacity:.2} html.tm-market .bn-badge{background:#ff3b30;color:#fff;border:2px solid #fff;box-shadow:none;font-weight:700} html.tm-market .bn-coach-bubble{background:var(--tm-link);color:#fff;border-radius:14px} /* mengecil saat discroll ke bawah */ html.tm-market.tm-bn-mini .bottom-nav{height:50px;left:34px;right:34px;bottom:calc(8px + env(safe-area-inset-bottom))} html.tm-market.tm-bn-mini .bn-item span{opacity:0;max-height:0;transform:translateY(4px)} html.tm-market.tm-bn-mini .bn-item svg{transform:scale(.94)} html.tm-market.tm-bn-mini .bn-item.on svg{transform:scale(1)} } @keyframes tmBnIn{from{transform:translateY(120%) scale(.9);opacity:0}to{transform:none;opacity:1}} @keyframes tmBnPop{0%{transform:scale(.8)}55%{transform:scale(1.18)}100%{transform:scale(1.08)}} @media(prefers-reduced-motion:reduce){html.tm-market .bottom-nav{animation:none}html.tm-market .bn-item.on svg{animation:none}} /* ---------- 12. Modal & panel ---------- */ html.tm-market .modal .back{background:rgba(10,24,54,.55);backdrop-filter:blur(2px)} html.tm-market .modal .box{background:#fff;border:1px solid var(--tm-line);border-radius:14px;box-shadow:0 24px 60px -20px rgba(10,24,54,.45)} html.tm-market .modal .close{background:#f1f4f9;border-color:#e3e8f1;color:#5b6477} html.tm-market .ob-overlay{background:rgba(10,24,54,.55)} html.tm-market .ob-card{background:#fff;border:1px solid var(--tm-line)} html.tm-market input,html.tm-market textarea,html.tm-market select{color-scheme:light} /* pil & tab aktif: teks biru (aslinya putih — tidak terbaca di latar terang) */ html.tm-market .fchip{background:#fff;border-color:#cfd8e8;color:#3d475c} html.tm-market .fchip.on,html.tm-market .fchip:hover{color:var(--tm-link);border-color:var(--tm-link);background:#eef4ff} html.tm-market .tab{background:#fff;border-color:#cfd8e8;color:#3d475c} html.tm-market .tab.on{color:var(--tm-link);border-color:var(--tm-link);background:#eef4ff} /* kotak yang aslinya hitam pekat */ html.tm-market .nk-select{background:#fff;border-color:#cfd8e8} html.tm-market .nk-select select,html.tm-market .nk-select input{color:var(--tm-ink)} html.tm-market .nk-price{color:var(--tm-price)} html.tm-market .cred{background:#f3f6fc} html.tm-market .field select option,html.tm-market .smm-catsel option,html.tm-market .nk-select select option{background:#fff;color:var(--tm-ink)} html.tm-market [style*="background:#05060f"]{background:#f3f6fc!important} html.tm-market #devApiMasked{color:var(--tm-link)!important} html.tm-market #devApiNewKeyText{color:#0b7a45!important} /* jendela pengumuman / perayaan (mis. "Sedang Perbaikan", hadiah) */ html.tm-market .cele{background:rgba(10,24,54,.55)} html.tm-market .cele-card{background:#fff;border:1px solid var(--tm-line);box-shadow:0 24px 60px -20px rgba(10,24,54,.5)} html.tm-market .cele-glow{opacity:.35} html.tm-market .cele-emoji{filter:none} html.tm-market .cele-title{background:none;-webkit-background-clip:border-box;background-clip:border-box;color:var(--tm-link)} html.tm-market .cele-amount{color:var(--tm-price);text-shadow:none} html.tm-market .cele-btn{background:var(--tm-link);box-shadow:none;border-radius:8px} /* tombol ganti Mode Terang/Gelap tidak dipakai di tema ini (tema selalu terang) */ html.tm-market #themeToggleBtn{display:none!important} /* ---------- 14. Kartu promo dengan gambar sendiri (dari admin) ---------- */ html.tm-market .tm-pc.tm-pc-full .tm-pc-art{display:none} html.tm-market .tm-pc.tm-pc-full .tm-pc-bg{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.2,.8,.2,1)} html.tm-market .tm-pc.tm-pc-full::before{content:none} html.tm-market .tm-pc.tm-pc-full::after{background:linear-gradient(180deg,rgba(6,22,56,0) 45%,rgba(6,22,56,.5) 70%,rgba(6,22,56,.88) 100%)} html.tm-market .tm-pc.tm-pc-full.tm-pc-bare::after{content:none} html.tm-market .tm-pc:hover .tm-pc-bg{transform:scale(1.05)} /* efek miring 3D mengikuti kursor (desktop) + kilap */ html.tm-market .tm-promo{perspective:1100px} html.tm-market .tm-pc{transform-style:preserve-3d;will-change:transform; transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(var(--ty,0px)); transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s ease} html.tm-market .tm-pc:hover{--ty:-4px;box-shadow:0 0 0 4px rgba(255,255,255,.14),0 26px 40px -22px rgba(0,0,0,.8)} html.tm-market .tm-pc .tm-pc-glare{position:absolute;inset:0;z-index:0;pointer-events:none;opacity:0;transition:opacity .35s ease; background:radial-gradient(circle at var(--gx,50%) var(--gy,0%),rgba(255,255,255,.28),rgba(255,255,255,0) 55%)} html.tm-market .tm-pc:hover .tm-pc-glare{opacity:1} html.tm-market .tm-pc > .tm-pc-name,html.tm-market .tm-pc > .tm-pc-tag,html.tm-market .tm-pc > .tm-pc-btn{position:relative;z-index:1} html.tm-market .tm-pc > .tm-pc-art{position:absolute;z-index:1;left:50%;top:13%;transform:translateX(-50%) translateZ(30px)} /* ---------- 15. Bagian beranda: Top Up Game / SMM / Nokos ---------- */ html.tm-market .tm-sec{background:#fff;border:1px solid var(--tm-line);border-radius:14px;padding:16px 14px 18px;margin:14px 0;box-shadow:0 8px 24px -20px rgba(16,34,74,.35)} @media(min-width:721px){html.tm-market .tm-sec{padding:20px 20px 22px}} html.tm-market .tm-sec-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px} html.tm-market .tm-sec-head h2{display:flex;align-items:center;gap:9px;font-family:var(--font-d);font-weight:800;font-size:clamp(1.1rem,2.2vw,1.38rem);color:var(--tm-ink);margin:0} html.tm-market .tm-sec-head h2 .tm-h-ic{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;flex-shrink:0} html.tm-market .tm-sec-head h2 .tm-h-ic svg{width:18px;height:18px} html.tm-market .tm-sec-sub{font-size:.8rem;color:var(--tm-mut);margin-top:2px;font-weight:500;font-family:var(--font-b)} html.tm-market .tm-more{flex-shrink:0;background:none;border:none;color:var(--tm-link);font-family:var(--font-d);font-weight:700;font-size:.92rem;display:inline-flex;align-items:center;gap:2px;padding:6px 2px;cursor:pointer} html.tm-market .tm-more svg{width:18px;height:18px;transition:transform .2s ease} html.tm-market .tm-more:hover svg{transform:translateX(3px)} /* grid game: 4 per baris di HP */ html.tm-market .tm-games{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px 10px} @media(min-width:640px){html.tm-market .tm-games{grid-template-columns:repeat(6,minmax(0,1fr))}} @media(min-width:1024px){html.tm-market .tm-games{grid-template-columns:repeat(8,minmax(0,1fr));gap:18px 14px}} @media(max-width:639px){html.tm-market .tm-games > :nth-child(n+9){display:none}} @media(min-width:640px) and (max-width:1023px){html.tm-market .tm-games > :nth-child(n+13){display:none}} html.tm-market .tm-game{background:none;border:none;padding:0;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:7px;text-align:center;color:var(--tm-ink);min-width:0} html.tm-market .tm-game-img{width:100%;aspect-ratio:1;border-radius:14px;overflow:hidden;background:linear-gradient(145deg,#e7efff,#cfdcf5);display:grid;place-items:center;font-size:1.8rem; box-shadow:0 6px 14px -8px rgba(16,34,74,.45);transition:transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .25s ease} html.tm-market .tm-game-img img{width:100%;height:100%;object-fit:cover} html.tm-market .tm-game:hover .tm-game-img{transform:translateY(-3px);box-shadow:0 12px 20px -10px rgba(16,34,74,.5)} html.tm-market .tm-game b{font-size:.76rem;font-weight:600;line-height:1.25;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;width:100%} @media(min-width:1024px){html.tm-market .tm-game b{font-size:.84rem}} /* platform SMM & layanan nokos: kartu kecil horizontal */ html.tm-market .tm-tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px} @media(min-width:640px){html.tm-market .tm-tiles{grid-template-columns:repeat(3,minmax(0,1fr))}} @media(min-width:1024px){html.tm-market .tm-tiles{grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}} html.tm-market .tm-tile{display:flex;align-items:center;gap:11px;padding:11px 12px;border-radius:12px;border:1px solid #e3e9f3;background:#f9fbff;cursor:pointer;text-align:left;color:var(--tm-ink);min-width:0; transition:border-color .2s ease,transform .2s ease,background .2s ease} html.tm-market .tm-tile:hover{border-color:#b9ccef;background:#fff;transform:translateY(-2px)} html.tm-market .tm-tile-ic{width:40px;height:40px;border-radius:11px;display:grid;place-items:center;flex-shrink:0;font-family:var(--font-d);font-weight:800;font-size:1.05rem;color:#fff} html.tm-market .tm-tile-ic svg{width:21px;height:21px} html.tm-market .tm-tile-tx{min-width:0;display:flex;flex-direction:column;gap:1px} html.tm-market .tm-tile-tx b{font-size:.86rem;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} html.tm-market .tm-tile-tx small{font-size:.72rem;color:var(--tm-mut);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} html.tm-market .tm-tile-tx em{font-style:normal;font-family:var(--font-d);font-weight:800;font-size:.84rem;color:var(--tm-price);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} html.tm-market .tm-tile-tx em small{font-family:var(--font-b);font-weight:500;font-size:.68rem;color:var(--tm-mut);margin-right:3px} @media(max-width:480px){html.tm-market .tm-tile-tx em small{display:none}} html.tm-market .tm-skel{border-radius:12px;background:linear-gradient(100deg,#eef2f9 20%,#f7f9fd 45%,#eef2f9 70%);background-size:400px 100%;animation:tmShimmer 1.3s linear infinite} @keyframes tmShimmer{from{background-position:-400px 0}to{background-position:400px 0}} /* ---------- 16. Animasi masuk (sekali saat halaman dibuka) ---------- Urutan: header → pita biru → kartu promo naik bergantian → baris jaminan → kotak kategori muncul bergantian. Bagian bawah muncul pelan saat discroll. Semua mati kalau perangkat meminta "kurangi animasi". */ @keyframes tmBandIn{from{clip-path:polygon(0 0,100% 0,100% 0,96% 0,4% 0,0 0)}to{clip-path:polygon(0 0,100% 0,100% calc(100% - 44px),96% 100%,4% 100%,0 calc(100% - 44px))}} @keyframes tmRise{from{opacity:0;transform:translateY(34px) scale(.94) rotateX(12deg)}to{opacity:1;transform:none}} @keyframes tmFade{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}} @keyframes tmPop{0%{opacity:0;transform:scale(.6) translateY(10px)}70%{opacity:1;transform:scale(1.06)}100%{opacity:1;transform:none}} @media(prefers-reduced-motion:no-preference){ html.tm-market.tm-anim .tm-band::before{animation:tmBandIn .8s cubic-bezier(.7,0,.2,1) both} html.tm-market.tm-anim .tm-pc{animation:tmRise .75s cubic-bezier(.2,.9,.25,1) backwards;animation-delay:calc(.25s + var(--i,0) * .09s)} html.tm-market.tm-anim .tm-trust{animation:tmFade .6s ease both;animation-delay:.75s} html.tm-market.tm-anim body .qn-btn .qn-ic{animation:tmPop .55s cubic-bezier(.2,.9,.3,1.3) backwards;animation-delay:calc(.55s + var(--i,0) * .04s)} html.tm-market.tm-anim body .qn-btn > :not(.qn-ic){animation:tmFade .5s ease both;animation-delay:calc(.65s + var(--i,0) * .04s)} html.tm-market .tm-rise{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.8,.2,1)} html.tm-market .tm-rise.tm-seen{opacity:1;transform:none} html.tm-market .tm-rise .tm-game,html.tm-market .tm-rise .tm-tile{opacity:0;transform:translateY(12px);transition:opacity .5s ease,transform .5s cubic-bezier(.2,.8,.2,1)} html.tm-market .tm-rise.tm-seen .tm-game,html.tm-market .tm-rise.tm-seen .tm-tile{opacity:1;transform:none;transition-delay:calc(var(--i,0) * .035s)} html.tm-market .card .ic img{transition:transform .45s cubic-bezier(.2,.8,.2,1)} html.tm-market .card:hover .ic img{transform:scale(1.07) rotate(-2deg)} } /* header sedikit berbayang saat halaman discroll */ html.tm-market nav{transition:box-shadow .25s ease} html.tm-market.tm-scrolled nav{box-shadow:0 6px 18px -8px rgba(5,20,55,.55)} /* rapikan detail kecil */ html.tm-market .card{border-radius:12px} html.tm-market .card .ic{border-radius:11px 11px 0 0} html.tm-market #produk,html.tm-market #rekomSec,html.tm-market #restockSec,html.tm-market #recentlyViewedSec, html.tm-market #aiRekomSec,html.tm-market #info,html.tm-market #reviewSec,html.tm-market #lbSec{border-radius:14px;box-shadow:0 8px 24px -20px rgba(16,34,74,.35)} html.tm-market .rsl-card{border-radius:14px;box-shadow:0 18px 34px -24px rgba(13,59,143,.8)} html.tm-market .tb-stats{border-radius:14px} /* ---------- 17. Footer menempel di bawah layar (halaman pendek tidak lagi "melayang") ---------- */ html.tm-market body{display:flex;flex-direction:column;min-height:100vh;min-height:100dvh} html.tm-market body > .page{width:100%} /* ---------- 18. Promo reseller lebih ringkas di HP (katalog cepat terlihat) ---------- */ @media(max-width:640px){ html.tm-market .rsl-card{padding:18px 16px} html.tm-market .rsl-card .rsl-feats{display:none} html.tm-market .rsl-card p,html.tm-market .rsl-card .rsl-desc{font-size:.82rem;line-height:1.5} } /* ---------- 19. SMM & Nokos ringkas: satu baris geser, berdampingan di desktop ---------- */ html.tm-market .tm-duo{display:grid;grid-template-columns:minmax(0,1fr);gap:0 14px;margin:14px 0} @media(min-width:900px){html.tm-market .tm-duo{grid-template-columns:repeat(2,minmax(0,1fr))}} html.tm-market .tm-duo .tm-sec{margin:0 0 12px;padding:12px 12px 12px} @media(min-width:900px){html.tm-market .tm-duo .tm-sec{margin:0}} html.tm-market .tm-sec.tm-compact .tm-sec-head{margin-bottom:10px} html.tm-market .tm-sec.tm-compact .tm-sec-head h2{font-size:1.02rem} html.tm-market .tm-sec.tm-compact .tm-sec-sub{display:none} html.tm-market .tm-sec.tm-compact .tm-h-ic{width:26px;height:26px;border-radius:8px} html.tm-market .tm-sec.tm-compact .tm-more{font-size:.84rem} html.tm-market .tm-chips{display:flex;gap:8px;overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:none;padding:2px 2px 4px; -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent)} html.tm-market .tm-chips::-webkit-scrollbar{display:none} html.tm-market .tm-chips .tm-tile{flex:0 0 auto;max-width:190px;padding:8px 12px 8px 8px;gap:9px;border-radius:999px;scroll-snap-align:start} html.tm-market .tm-chips .tm-tile-ic{width:32px;height:32px;border-radius:50%;font-size:.9rem} html.tm-market .tm-chips .tm-tile-ic svg{width:17px;height:17px} html.tm-market .tm-chips .tm-tile-tx{gap:0} html.tm-market .tm-chips .tm-tile-tx b{font-size:.8rem} html.tm-market .tm-chips .tm-tile-tx small{display:none} html.tm-market .tm-chips .tm-tile-tx em{font-size:.76rem} html.tm-market .tm-chips .tm-skel{flex:0 0 150px;border-radius:999px} /* ---------- 20. Pencarian pintar (hasil dari produk, top up, nokos, SMM, halaman) ---------- */ html.tm-market .tm-sug{ position:absolute;left:0;right:0;top:calc(100% + 8px);z-index:80;background:#fff;border-radius:14px;border:1px solid var(--tm-line); box-shadow:0 24px 50px -18px rgba(10,30,70,.45);max-height:min(66vh,540px);overflow-y:auto;overscroll-behavior:contain;padding:6px 0; opacity:0;transform:translateY(-6px) scale(.985);transform-origin:top center;pointer-events:none; transition:opacity .22s ease,transform .3s cubic-bezier(.2,.9,.3,1); } html.tm-market .tm-sug.on{opacity:1;transform:none;pointer-events:auto} html.tm-market .tm-sug-h{font-size:.7rem;font-weight:700;color:#8a93a6;padding:10px 14px 4px;letter-spacing:.2px} html.tm-market .tm-sug-i{display:flex;align-items:center;gap:11px;width:100%;padding:8px 14px;background:none;border:none;text-align:left;cursor:pointer;color:var(--tm-ink);font-family:var(--font-b)} html.tm-market .tm-sug-i:hover,html.tm-market .tm-sug-i.act{background:#f1f6ff} html.tm-market .tm-sug-th{width:36px;height:36px;border-radius:10px;flex-shrink:0;display:grid;place-items:center;overflow:hidden;background:var(--tm-tile);color:var(--tm-link);font-weight:800;font-family:var(--font-d)} html.tm-market .tm-sug-th img{width:100%;height:100%;object-fit:cover} html.tm-market .tm-sug-th svg{width:18px;height:18px} html.tm-market .tm-sug-tx{min-width:0;flex:1;display:flex;flex-direction:column} html.tm-market .tm-sug-tx b{font-size:.88rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} html.tm-market .tm-sug-tx b mark{background:#fff1b8;color:inherit;border-radius:3px;padding:0 1px} html.tm-market .tm-sug-tx small{font-size:.74rem;color:#8a93a6;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} html.tm-market .tm-sug-p{font-family:var(--font-d);font-weight:800;font-size:.82rem;color:var(--tm-price);flex-shrink:0} html.tm-market .tm-sug-all{display:block;width:calc(100% - 16px);margin:6px 8px 4px;padding:10px;border-radius:10px;border:none;background:#eef4ff;color:var(--tm-link);font-weight:700;font-size:.84rem;cursor:pointer} html.tm-market .tm-sug-empty{padding:18px 14px;color:#8a93a6;font-size:.86rem;text-align:center} /* ---------- 21. Perbaikan kontras (hasil cek otomatis semua halaman) ---------- Warna teks yang dirancang untuk latar gelap dan jadi samar di latar terang. */ html.tm-market .card .cat,html.tm-market .card .stok,html.tm-market .card .stok b,html.tm-market .prices .now small, html.tm-market .tm-sug-h,html.tm-market .tm-sug-tx small{color:#626d82!important} html.tm-market .prices .strike{color:#7c8699} html.tm-market body .btn:disabled,html.tm-market body .btn.btn-g:disabled{background:#e7ebf1;color:#596377;border-color:#dde2ea} html.tm-market .bn-item{color:#556076} html.tm-market nav .links a#tasNavLink,html.tm-market nav .links a#navJadiReseller{color:#fff!important} @media(max-width:720px){html.tm-market nav .links a#tasNavLink,html.tm-market nav .links a#navJadiReseller{color:var(--tm-ink)!important}} html.tm-market .demo-pill{background:#fff5d9;border-color:#f2d58a;color:#8a5a00} html.tm-market .tag-s.fast{background:#ffe6ea;border-color:#f7c2cc;color:#b3163a} html.tm-market .tag-s.grt{background:#dcf5e8;border-color:#b3e6ca;color:#0b6e3c} html.tm-market .tag-s.refill{background:#e0efff;border-color:#b9d8fa;color:#0d5ea8} html.tm-market .tag-s.id{background:#fff3d6;border-color:#f1d596;color:#865400} html.tm-market .nk-hot{background:#ffe3e8!important;color:#b3163a!important;border-color:#f7c2cc!important} html.tm-market .gc-rate{color:#0b7a45} html.tm-market .saldo-big .val{color:#0e8f4e} html.tm-market .smm-tab{color:#3d475c} html.tm-market .smm-tab.on{background:#eaf2ff;border-color:var(--tm-link);color:var(--tm-link);box-shadow:none} html.tm-market .smm-tab.on .cnt{color:var(--tm-link)} html.tm-market .rsl-card .rsl-eyebrow{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.35);color:#fff} html.tm-market .bc .bc-new{background:#0b7a45} html.tm-market .tm-new{background:#d1242f} html.tm-market .bdg.star{color:#7a4f00} html.tm-market .bdg.promo{color:#07633a} html.tm-market .bdg.flash{color:#a50e26} html.tm-market .fchip{color:#344056} html.tm-market .fchip[style*="ff5c7a"],html.tm-market .fchip[style*="--red"]{color:#c8243f!important} html.tm-market .empty{color:var(--tm-mut)} /* bagian / kotak kategori yang disembunyikan admin */ html.tm-market .tm-hide{display:none!important} /* kategori & banner sekarang berada di dalam .wrap: beri jarak antar-blok yang konsisten */ html.tm-market #page-home .wrap > .quicknav{margin:14px 0} html.tm-market #page-home .wrap > .hlx-wrap.tm-moved{margin:14px 0} /* ---------- 22. Menu ☰ di HP: lembar kaca ala iOS ---------- Kartu melayang dengan sudut bulat, ikon dalam kotak warna (seperti Pengaturan iPhone), garis pemisah tipis, panah kecil di kanan, muncul dengan pegas. Latar belakang meredup dan bisa diketuk untuk menutup. */ @media(max-width:720px){ html.tm-market nav .links{ position:absolute;top:calc(100% + 8px);left:10px;right:10px;z-index:55;display:block; max-height:calc(100dvh - var(--tm-nav-h,150px) - 104px);overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch; padding:6px!important;margin:0;border-radius:20px;border:1px solid rgba(255,255,255,.85); background:rgba(255,255,255,.86);-webkit-backdrop-filter:blur(26px) saturate(180%);backdrop-filter:blur(26px) saturate(180%); box-shadow:0 28px 60px -20px rgba(10,30,70,.5),0 2px 8px -2px rgba(10,30,70,.12); opacity:0;visibility:hidden;pointer-events:none;transform:translateY(-10px) scale(.96);transform-origin:top center; transition:opacity .22s ease,transform .45s cubic-bezier(.32,.72,0,1),visibility 0s linear .45s; } html.tm-market nav .links.open{ opacity:1;visibility:visible;pointer-events:auto;transform:none; transition:opacity .2s ease,transform .5s cubic-bezier(.34,1.3,.5,1),visibility 0s; } html.tm-market .nav-vscroll{display:none!important} html.tm-market nav .links a{ position:relative;display:flex;align-items:center;gap:12px;min-height:48px;padding:8px 12px!important; border:none!important;border-radius:13px;color:var(--tm-ink);font-size:.95rem;font-weight:500;letter-spacing:-.1px; background:none;opacity:0;animation:tmLinkIn .42s cubic-bezier(.32,.72,0,1) forwards;animation-play-state:paused; transition:background .15s ease; } html.tm-market nav .links.open a{animation-play-state:running} html.tm-market nav .links a:nth-child(1){animation-delay:0.042s} html.tm-market nav .links a:nth-child(2){animation-delay:0.064s} html.tm-market nav .links a:nth-child(3){animation-delay:0.086s} html.tm-market nav .links a:nth-child(4){animation-delay:0.108s} html.tm-market nav .links a:nth-child(5){animation-delay:0.130s} html.tm-market nav .links a:nth-child(6){animation-delay:0.152s} html.tm-market nav .links a:nth-child(7){animation-delay:0.174s} html.tm-market nav .links a:nth-child(8){animation-delay:0.196s} html.tm-market nav .links a:nth-child(9){animation-delay:0.218s} html.tm-market nav .links a:nth-child(10){animation-delay:0.240s} html.tm-market nav .links a:nth-child(11){animation-delay:0.262s} html.tm-market nav .links a:nth-child(12){animation-delay:0.284s} html.tm-market nav .links a:nth-child(13){animation-delay:0.306s} html.tm-market nav .links a:nth-child(14){animation-delay:0.328s} html.tm-market nav .links a:nth-child(15){animation-delay:0.350s} html.tm-market nav .links a:nth-child(16){animation-delay:0.372s} html.tm-market nav .links a:nth-child(17){animation-delay:0.394s} html.tm-market nav .links a:nth-child(18){animation-delay:0.416s} html.tm-market nav .links a:nth-child(19){animation-delay:0.438s} html.tm-market nav .links a:nth-child(20){animation-delay:0.460s} html.tm-market nav .links a:nth-child(21){animation-delay:0.482s} html.tm-market nav .links a:nth-child(22){animation-delay:0.504s} html.tm-market nav .links a:nth-child(23){animation-delay:0.526s} html.tm-market nav .links a:nth-child(24){animation-delay:0.548s} html.tm-market nav .links a:hover,html.tm-market nav .links a:active{background:rgba(26,95,216,.08);padding-left:12px!important} html.tm-market nav .links a + a::before{content:'';position:absolute;top:0;left:56px;right:12px;height:1px;background:rgba(40,55,85,.09)} html.tm-market nav .links a:not(.maint)::after{ content:'';margin-left:auto;flex-shrink:0;width:7px;height:7px;border-top:2px solid #c2c8d3;border-right:2px solid #c2c8d3;transform:rotate(45deg);border-radius:1px } html.tm-market nav .links a.maint{color:var(--tm-mut)} html.tm-market nav .links a.maint::after{margin-left:auto} html.tm-market nav .links a .nl-ic{ box-sizing:border-box;width:32px!important;height:32px!important;padding:7px;margin:0!important;border-radius:9px; background:var(--c,#1a5fd8);color:#fff!important;flex-shrink:0;box-shadow:inset 0 -1px 0 rgba(0,0,0,.08) } html.tm-market nav .links a:hover .nl-ic,html.tm-market nav .links a:active .nl-ic{color:#fff} html.tm-market nav .links .new-badge{background:#ff3b30;color:#fff;border:none;border-radius:99px;font-size:.62rem;padding:2px 7px;margin-left:6px;box-shadow:none} html.tm-market nav .links .scroll-hint{display:none} html.tm-market #tasNavLink,html.tm-market #navJadiReseller{font-weight:600!important} } @keyframes tmLinkIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}} /* lapisan redup di belakang menu (dibuat marketplace.js) */ html.tm-market .tm-scrim{position:fixed;inset:0;z-index:49;background:rgba(10,24,54,.26);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px); opacity:0;visibility:hidden;transition:opacity .3s ease,visibility 0s linear .3s} html.tm-market .tm-scrim.on{opacity:1;visibility:visible;transition:opacity .3s ease,visibility 0s} @media(min-width:721px){html.tm-market .tm-scrim{display:none}} /* ---------- 23. Tombol kontak & chat mengambang ala iOS ---------- */ html.tm-market body #fabMenuToggle{ width:46px;height:46px;border:1px solid rgba(255,255,255,.9)!important;color:var(--tm-link)!important; background:rgba(255,255,255,.8)!important;-webkit-backdrop-filter:blur(18px) saturate(180%);backdrop-filter:blur(18px) saturate(180%); box-shadow:0 10px 24px -10px rgba(10,30,70,.45),0 1px 3px rgba(10,30,70,.1); transition:transform .45s cubic-bezier(.34,1.5,.5,1),background .25s ease,color .25s ease; } html.tm-market body #fabMenuToggle svg{width:19px;height:19px;transition:transform .45s cubic-bezier(.34,1.5,.5,1)} html.tm-market body #fabMenuToggle.open{background:var(--tm-link)!important;color:#fff!important;border-color:transparent!important;transform:scale(1.04);box-shadow:0 12px 26px -10px rgba(26,95,216,.7)!important} html.tm-market body #fabMenuToggle.open svg{transform:rotate(-18deg) scale(.95)} html.tm-market body #fabSatellites{max-height:none;overflow:visible;gap:12px;pointer-events:none} html.tm-market body #fabSatellites.open{max-height:none;gap:12px;pointer-events:auto} html.tm-market body #fabSatellites .fab-sat{ width:46px;height:46px;box-shadow:0 10px 22px -10px rgba(0,0,0,.45);opacity:0;pointer-events:none; transform:translateY(22px) scale(.4);transition:transform .5s cubic-bezier(.34,1.56,.5,1),opacity .2s ease; } html.tm-market body #fabSatellites.open .fab-sat{opacity:1;pointer-events:auto;transform:none} html.tm-market body #fabSatellites.open #tgBubble{transition-delay:.04s} html.tm-market body #fabSatellites.open #waBubble{transition-delay:.1s} html.tm-market body #waBubble{background:#25d366} html.tm-market body #tgBubble{background:#2aabee} html.tm-market body #helpFab{ background:linear-gradient(150deg,#3b82f6 0%,#1a5fd8 55%,#1449b8 100%);animation:none; box-shadow:0 14px 28px -12px rgba(20,73,184,.75),inset 0 1px 0 rgba(255,255,255,.25); transition:transform .45s cubic-bezier(.34,1.5,.5,1),box-shadow .3s ease; } html.tm-market body #helpFab:hover{transform:scale(1.05)} html.tm-market body #helpFab:active{transform:scale(.92)} html.tm-market body #helpBox{background:rgba(255,255,255,.92);-webkit-backdrop-filter:blur(24px) saturate(180%);backdrop-filter:blur(24px) saturate(180%); border:1px solid rgba(255,255,255,.9);border-radius:22px;box-shadow:0 30px 60px -20px rgba(10,30,70,.5)} /* notifikasi "baru saja beli" ala iOS */ html.tm-market .buy-toast{background:rgba(255,255,255,.88);-webkit-backdrop-filter:blur(22px) saturate(180%);backdrop-filter:blur(22px) saturate(180%); border:1px solid rgba(255,255,255,.9);border-radius:18px;box-shadow:0 16px 34px -14px rgba(10,30,70,.45);color:var(--tm-ink)} html.tm-market .buy-toast .bt-ic{background:var(--tm-tile);color:var(--tm-link)} html.tm-market .buy-toast .bt-sub,html.tm-market .bt-sub{color:var(--tm-mut)} /* saat menu ☰ terbuka, tombol mengambang & notifikasi disembunyikan dulu */ html.tm-market #fabCluster,html.tm-market #helpFab,html.tm-market #buyToastWrap{transition:opacity .25s ease,transform .35s cubic-bezier(.32,.72,0,1)} html.tm-market.tm-menu-open #fabCluster,html.tm-market.tm-menu-open #helpFab,html.tm-market.tm-menu-open #buyToastWrap{opacity:0;pointer-events:none;transform:scale(.85)} /* ---------- 24. Jendela (modal) di HP: lembar dari bawah ala iOS ---------- */ @media(max-width:640px){ html.tm-market .modal{align-items:flex-end;padding:0} html.tm-market .modal .back{background:rgba(10,24,54,.4);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)} html.tm-market .modal .box{ max-width:none;width:100%;max-height:92vh;max-height:92dvh;border-radius:24px 24px 0 0;border-bottom:none; padding:26px 20px calc(22px + env(safe-area-inset-bottom));animation:tmSheetUp .5s cubic-bezier(.32,.72,0,1); } html.tm-market .modal .box::before{content:'';display:block;width:40px;height:5px;border-radius:3px;background:#d3d9e3;margin:-14px auto 14px} html.tm-market .modal .close{top:14px;right:14px;border-radius:50%;width:30px;height:30px;background:#eef1f6;border:none} } @keyframes tmSheetUp{from{transform:translateY(100%)}to{transform:none}} @media(prefers-reduced-motion:reduce){html.tm-market .modal .box{animation:none}} /* ---------- 25. Hasil pencarian di HP: tepat di bawah kolom cari ---------- */ @media(max-width:720px){ html.tm-market .tm-sug{position:absolute;left:0;right:0;top:calc(100% + 8px);margin:0;border-radius:18px; max-height:var(--tm-sug-max,52vh);background:rgba(255,255,255,.96);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px)} } /* ---------- 26. Header HP pas-lebar: nama toko selalu utuh ---------- marketplace.js menambah kelas bertahap kalau nama toko tidak muat: huruf sedikit lebih kecil -> foto profil disembunyikan (ada di navigasi bawah) -> nama 2 baris. */ @media(max-width:720px){ html.tm-market.tm-hdr-1 .logo{font-size:1.04rem;gap:7px} html.tm-market.tm-hdr-1 .logo .x{width:30px;height:30px;border-radius:9px} html.tm-market.tm-hdr-1 .saldo-pill{font-size:.74rem;padding:5px 8px 5px 9px} html.tm-market.tm-hdr-1 .avatar{width:30px;height:30px;font-size:.8rem} html.tm-market.tm-hdr-2 #avatarBtn{display:none!important} html.tm-market.tm-hdr-3 .logo #storeName{white-space:normal;line-height:1.05;font-size:.95rem;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} } /* ---------- 27. Saldo di header bisa diketuk untuk isi saldo ---------- */ html.tm-market .saldo-pill.tm-topup{cursor:pointer;gap:6px;transition:transform .3s cubic-bezier(.34,1.5,.5,1),background .2s ease} html.tm-market .saldo-pill.tm-topup:active{transform:scale(.94)} html.tm-market .saldo-pill.tm-topup:hover{background:rgba(255,255,255,.2)} html.tm-market .saldo-pill .tm-plus{width:18px;height:18px;border-radius:50%;background:#fff;color:var(--tm-blue);display:grid;place-items:center;flex-shrink:0;margin-right:-3px} html.tm-market .saldo-pill .tm-plus svg{width:12px;height:12px} html.tm-market .tm-hint{position:fixed;z-index:120;max-width:230px;background:#fff;color:var(--tm-ink);border-radius:14px;padding:10px 12px 10px 14px;font-size:.82rem;font-weight:600;line-height:1.35; box-shadow:0 18px 36px -12px rgba(10,30,70,.5);display:flex;gap:10px;align-items:flex-start;animation:tmHintIn .5s cubic-bezier(.34,1.4,.5,1) both} html.tm-market .tm-hint::before{content:'';position:absolute;top:-6px;right:var(--ax,28px);width:14px;height:14px;background:#fff;transform:rotate(45deg);border-radius:3px} html.tm-market .tm-hint button{background:none;border:none;color:var(--tm-link);font-weight:700;font-size:.8rem;padding:0;cursor:pointer;flex-shrink:0} @keyframes tmHintIn{from{opacity:0;transform:translateY(-8px) scale(.92)}to{opacity:1;transform:none}} /* ---------- 28. Kotak "Lainnya" di kategori ---------- */ html.tm-market body .qn-btn.tm-overflow{display:none!important} html.tm-market body .qn-btn.tm-qn-more .qn-ic{--c1:#eef1f6;--c2:#dde3ec;--ic:#3d4a63} html.tm-market body .qn-btn.tm-qn-more .qn-ic svg{width:26px;height:26px} /* ---------- 29. Lembar "Semua Layanan" ala iOS ---------- */ html.tm-market .tm-sheet-wrap{position:fixed;inset:0;z-index:130;display:flex;align-items:flex-end;justify-content:center;visibility:hidden;pointer-events:none} html.tm-market .tm-sheet-wrap.on{visibility:visible;pointer-events:auto} html.tm-market .tm-sheet-back{position:absolute;inset:0;background:rgba(10,24,54,.38);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);opacity:0;transition:opacity .35s ease} html.tm-market .tm-sheet-wrap.on .tm-sheet-back{opacity:1} html.tm-market .tm-sheet{ position:relative;width:100%;max-width:760px;max-height:92vh;max-height:92dvh;display:flex;flex-direction:column; background:rgba(246,248,252,.96);-webkit-backdrop-filter:blur(30px) saturate(180%);backdrop-filter:blur(30px) saturate(180%); border-radius:26px 26px 0 0;box-shadow:0 -20px 60px -20px rgba(10,30,70,.45); transform:translateY(104%);transition:transform .55s cubic-bezier(.32,.72,0,1); } html.tm-market .tm-sheet-wrap.on .tm-sheet{transform:none} @media(min-width:760px){ html.tm-market .tm-sheet-wrap{align-items:center} html.tm-market .tm-sheet{border-radius:26px;max-height:84vh;transform:translateY(24px) scale(.96);opacity:0;transition:transform .5s cubic-bezier(.32,.72,0,1),opacity .3s ease} html.tm-market .tm-sheet-wrap.on .tm-sheet{transform:none;opacity:1} } html.tm-market .tm-sheet-grab{width:40px;height:5px;border-radius:3px;background:#cfd6e1;margin:9px auto 0;flex-shrink:0} html.tm-market .tm-sheet-head{display:flex;align-items:center;justify-content:space-between;padding:10px 18px 6px;flex-shrink:0} html.tm-market .tm-sheet-head h2{font-family:var(--font-d);font-weight:800;font-size:1.6rem;letter-spacing:-.3px;color:var(--tm-ink);margin:0} html.tm-market .tm-sheet-x{width:32px;height:32px;border-radius:50%;border:none;background:rgba(118,128,150,.16);color:#4b5569;display:grid;place-items:center;cursor:pointer;font-size:1rem} html.tm-market .tm-sheet-search{margin:6px 18px 10px;position:relative;flex-shrink:0} html.tm-market .tm-sheet-search input{width:100%;height:38px;border-radius:11px;border:none;background:rgba(118,128,150,.14);padding:0 12px 0 36px;font-size:.92rem;color:var(--tm-ink);outline:none;font-family:var(--font-b)} html.tm-market .tm-sheet-search input:focus{background:rgba(118,128,150,.2)} html.tm-market .tm-sheet-search svg{position:absolute;left:11px;top:50%;transform:translateY(-50%);width:17px;height:17px;color:#7b8598} html.tm-market .tm-sheet-body{overflow-y:auto;overscroll-behavior:contain;padding:4px 16px calc(22px + env(safe-area-inset-bottom));-webkit-overflow-scrolling:touch} html.tm-market .tm-wallet{display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:18px;margin:4px 0 14px;color:#fff; background:linear-gradient(135deg,#0d3b8f,#1a5fd8 65%,#3b82f6);box-shadow:0 14px 28px -18px rgba(13,59,143,.9)} html.tm-market .tm-wallet small{display:block;font-size:.74rem;opacity:.8;font-weight:500} html.tm-market .tm-wallet b{font-family:var(--font-d);font-size:1.25rem;font-weight:800;letter-spacing:.2px} html.tm-market .tm-wallet button{margin-left:auto;border:none;border-radius:99px;background:#fff;color:var(--tm-blue);font-weight:800;font-size:.84rem;padding:10px 16px;display:inline-flex;align-items:center;gap:6px;cursor:pointer;flex-shrink:0;transition:transform .3s cubic-bezier(.34,1.5,.5,1)} html.tm-market .tm-wallet button:active{transform:scale(.94)} html.tm-market .tm-wallet button svg{width:15px;height:15px} html.tm-market .tm-group{margin-bottom:16px} html.tm-market .tm-group h3{font-size:.8rem;font-weight:700;color:#6b7488;margin:0 4px 8px;font-family:var(--font-b)} html.tm-market .tm-group-box{background:#fff;border-radius:18px;padding:14px 8px 8px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px 4px;box-shadow:0 1px 2px rgba(10,30,70,.05)} @media(min-width:560px){html.tm-market .tm-group-box{grid-template-columns:repeat(6,minmax(0,1fr))}} html.tm-market .tm-app{background:none;border:none;display:flex;flex-direction:column;align-items:center;gap:6px;padding:4px 2px 6px;cursor:pointer;color:var(--tm-ink);font-size:.74rem;font-weight:600;line-height:1.2;text-align:center;border-radius:14px;min-width:0; -webkit-tap-highlight-color:transparent;transition:transform .35s cubic-bezier(.34,1.5,.5,1)} html.tm-market .tm-app:active{transform:scale(.9)} html.tm-market .tm-app-ic{width:54px;height:54px;border-radius:15px;display:grid;place-items:center;color:#fff;background:var(--c,#1a5fd8);position:relative;overflow:hidden; box-shadow:0 8px 16px -10px var(--c,#1a5fd8),inset 0 1px 0 rgba(255,255,255,.3)} html.tm-market .tm-app-ic::after{content:'';position:absolute;inset:0;background:linear-gradient(160deg,rgba(255,255,255,.3),rgba(255,255,255,0) 50%)} html.tm-market .tm-app-ic svg{width:26px;height:26px;position:relative;z-index:1} html.tm-market .tm-app-ic img{width:100%;height:100%;object-fit:cover;position:relative;z-index:1} html.tm-market .tm-app > span:last-child{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;width:100%} html.tm-market .tm-app > .tm-app-ic{flex-shrink:0} html.tm-market .tm-sheet-empty{text-align:center;color:var(--tm-mut);padding:26px 0;font-size:.9rem} @media(prefers-reduced-motion:no-preference){ html.tm-market .tm-sheet-wrap.on .tm-app{animation:tmFade .45s cubic-bezier(.32,.72,0,1) backwards;animation-delay:calc(.12s + var(--i,0) * .025s)} } /* ---------- 30. Halaman Profil ala iOS ---------- */ html.tm-market #page-profile .profile-head{ position:relative;overflow:hidden;isolation:isolate;display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:2px 14px; margin-top:18px;padding:22px 20px 18px;border:none;border-radius:26px;color:#fff; background:linear-gradient(135deg,#0b3483 0%,#1a5fd8 58%,#3b82f6 100%);box-shadow:0 26px 44px -26px rgba(13,59,143,.95); } html.tm-market #page-profile .profile-head::before{content:'';position:absolute;inset:0;z-index:-1;opacity:.9; background:radial-gradient(120% 90% at 100% 0%,rgba(255,255,255,.22),rgba(255,255,255,0) 55%),radial-gradient(80% 70% at 0% 100%,rgba(15,30,80,.35),rgba(15,30,80,0) 60%)} html.tm-market #page-profile .profile-head::after{content:'';position:absolute;top:0;bottom:0;left:-40%;width:35%;z-index:-1;transform:skewX(-18deg); background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.22),rgba(255,255,255,0));animation:tmShine 2.8s cubic-bezier(.4,0,.2,1) .4s 1 both} @keyframes tmShine{from{left:-40%}to{left:130%}} html.tm-market #page-profile .profile-head .big-av{grid-row:1/3;width:62px;height:62px;border-radius:19px;font-size:1.5rem; box-shadow:0 0 0 3px rgba(255,255,255,.28),0 12px 22px -10px rgba(0,0,0,.45);animation:tmPop .6s cubic-bezier(.2,.9,.3,1.3) both} html.tm-market #page-profile .profile-head h2{color:#fff;font-size:1.3rem;font-weight:800;line-height:1.2;margin:0;overflow-wrap:anywhere} html.tm-market #page-profile .profile-head .em{color:rgba(255,255,255,.78);font-size:.84rem;overflow-wrap:anywhere} html.tm-market #page-profile .saldo-big{grid-column:1/-1;margin:16px 0 0;text-align:left;padding:14px 16px;border-radius:18px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.18)} html.tm-market #page-profile .saldo-big .lbl{color:rgba(255,255,255,.75);font-size:.76rem;font-weight:600;text-transform:lowercase;letter-spacing:0} html.tm-market #page-profile .saldo-big .lbl::first-letter{text-transform:uppercase} html.tm-market #page-profile .saldo-big .val{color:#fff!important;font-size:1.9rem;font-weight:800;letter-spacing:-.2px;line-height:1.15} html.tm-market .tm-pf-actions{grid-column:1/-1;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;margin-top:14px} html.tm-market .tm-pf-act{background:none;border:none;color:#fff;display:flex;flex-direction:column;align-items:center;gap:6px;font-size:.74rem;font-weight:600;cursor:pointer;padding:2px; -webkit-tap-highlight-color:transparent;transition:transform .35s cubic-bezier(.34,1.5,.5,1)} html.tm-market .tm-pf-act:active{transform:scale(.9)} html.tm-market .tm-pf-act i{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.26)} html.tm-market .tm-pf-act i svg{width:21px;height:21px} html.tm-market .tm-pf-act.primary i{background:#fff;color:var(--tm-blue);border-color:#fff;box-shadow:0 10px 20px -10px rgba(0,0,0,.5)} @media(min-width:721px){html.tm-market .tm-pf-actions{max-width:420px}} /* [NEW 2026-09-25] pemilik toko: 6 tombol (tambah Panel Toko & Kunjungi Toko) */ html.tm-market .tm-pf-actions.has-store{grid-template-columns:repeat(3,minmax(0,1fr))} @media(min-width:721px){html.tm-market .tm-pf-actions.has-store{grid-template-columns:repeat(6,minmax(0,1fr));max-width:620px}} /* tombol Panel Toko & Kunjungi Toko sudah ada di grid saldo → kartu akses cepat cukup menampilkan status toko */ html.tm-market #storeQuick .sq-card{display:none} html.tm-market #storeQuick{grid-template-columns:1fr} html.tm-market #storeQuick .sq-status{justify-content:center;padding:8px} /* tab profil: kontrol segmen ala iOS dengan penanda yang meluncur */ html.tm-market #page-profile .tabs{position:relative;display:flex;flex-wrap:nowrap;overflow-x:auto;gap:2px;padding:4px;margin:16px 0 14px;border-radius:14px; background:rgba(118,128,150,.15);scrollbar-width:none;scroll-behavior:smooth} html.tm-market #page-profile .tabs::-webkit-scrollbar{display:none} html.tm-market #page-profile .tabs .tab{position:relative;z-index:1;flex-shrink:0;background:none!important;border:none!important;border-radius:10px; color:#4a5468;padding:9px 14px;font-size:.82rem;font-weight:600;box-shadow:none;transition:color .25s ease} html.tm-market #page-profile .tabs .tab.on{color:var(--tm-ink)} html.tm-market #page-profile .tabs .tab svg{opacity:.75} html.tm-market #page-profile #myStoreStatusBadge{background:transparent!important;border:none!important;padding:9px 12px!important;flex-shrink:0} html.tm-market .tm-seg-ind{position:absolute;z-index:0;top:4px;bottom:4px;left:0;width:0;border-radius:10px;background:#fff;pointer-events:none; box-shadow:0 3px 8px rgba(10,30,70,.12),0 1px 1px rgba(10,30,70,.05); transition:transform .5s cubic-bezier(.34,1.25,.5,1),width .5s cubic-bezier(.34,1.25,.5,1)} @media(prefers-reduced-motion:no-preference){html.tm-market #page-profile .pane.on{animation:tmPaneIn .45s cubic-bezier(.32,.72,0,1)}} @keyframes tmPaneIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}} /* isi tab: kartu putih berkelompok, kolom isian ala iOS */ html.tm-market #page-profile #pane-setting,html.tm-market #page-profile #pane-referral,html.tm-market #page-profile #pane-devapi{ background:#fff;border:1px solid var(--tm-line);border-radius:20px;padding:18px 16px;box-shadow:0 10px 26px -22px rgba(16,34,74,.4)} html.tm-market #page-profile .field input,html.tm-market #page-profile .field select,html.tm-market #page-profile .field textarea{ background:#f2f4f8;border:1.5px solid transparent;border-radius:12px;padding:12px 14px;color:var(--tm-ink);transition:border-color .2s ease,box-shadow .2s ease,background .2s ease} html.tm-market #page-profile .field input:focus,html.tm-market #page-profile .field select:focus,html.tm-market #page-profile .field textarea:focus{ background:#fff;border-color:var(--tm-link);box-shadow:0 0 0 4px rgba(26,95,216,.12);outline:none} html.tm-market #page-profile .field label{color:#4a5468;font-weight:600} html.tm-market .av-grid{gap:10px} html.tm-market .av-opt{width:56px;height:56px;border-radius:18px;border:none;box-shadow:0 6px 12px -8px rgba(10,30,70,.45);transition:transform .4s cubic-bezier(.34,1.6,.5,1),box-shadow .25s ease} html.tm-market .av-opt:hover{transform:scale(1.08)} html.tm-market .av-opt.sel{transform:scale(1.06);box-shadow:0 0 0 3px #fff,0 0 0 5.5px var(--tm-link),0 10px 18px -10px rgba(26,95,216,.6)} /* ---------- 31. Halaman Nokos & SMM ala iOS ---------- */ html.tm-market .svc-head{padding:22px 0 6px} html.tm-market .svc-head h1{font-family:var(--font-d);font-weight:800;font-size:clamp(1.75rem,4vw,2.4rem);letter-spacing:-.4px;line-height:1.15;color:var(--tm-ink)} html.tm-market .svc-head h1 [style*="background-clip"]{background:none!important;-webkit-background-clip:border-box!important;background-clip:border-box!important;color:var(--tm-link)!important} html.tm-market .svc-head p{color:var(--tm-mut);font-size:.94rem} html.tm-market .svc-head p b{color:var(--tm-ink)!important} /* Nokos: pilihan negara / operator / cari = daftar berkelompok */ html.tm-market .nk-panel{background:#fff;border:1px solid var(--tm-line);border-radius:20px;padding:4px 0;margin-top:16px;box-shadow:0 10px 26px -22px rgba(16,34,74,.45)} html.tm-market .nk-row{gap:0} html.tm-market .nk-select{position:relative;background:none!important;border:none;border-radius:0;padding:10px 16px;min-height:62px;gap:12px} html.tm-market .nk-select + .nk-select::before{content:'';position:absolute;top:0;left:62px;right:0;height:1px;background:rgba(40,55,85,.09)} @media(min-width:641px){ html.tm-market .nk-select + .nk-select::before{top:12px;bottom:12px;left:0;right:auto;width:1px;height:auto} } html.tm-market .nk-ic{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;font-size:1rem;flex-shrink:0;background:#e3edff} html.tm-market .nk-select:nth-child(2) .nk-ic{background:#e2f6ef} html.tm-market .nk-select:nth-child(3) .nk-ic{background:#fff0d9} html.tm-market .nk-lbl{color:#6b7488;font-size:.7rem;font-weight:600;letter-spacing:0;text-transform:lowercase;margin-bottom:1px} html.tm-market .nk-lbl::first-letter{text-transform:uppercase} html.tm-market .nk-select select{appearance:none;-webkit-appearance:none;background:none;border:none;color:var(--tm-ink);font-size:.98rem;font-weight:600;padding:2px 22px 2px 0;width:100%;cursor:pointer;outline:none} html.tm-market .nk-select:has(select)::after{content:'';position:absolute;right:18px;top:50%;width:7px;height:7px;margin-top:-5px;border-right:2px solid #b0b8c6;border-bottom:2px solid #b0b8c6;transform:rotate(45deg);pointer-events:none} html.tm-market .nk-select input{background:none;border:none;color:var(--tm-ink);font-size:.98rem;font-weight:500;padding:2px 0;width:100%;outline:none} html.tm-market .nk-select > div{min-width:0;flex:1} html.tm-market .nk-cats{display:flex;flex-wrap:nowrap;overflow-x:auto;gap:8px;margin:16px 0 14px;padding:2px 2px 4px;scrollbar-width:none} html.tm-market .nk-cats::-webkit-scrollbar{display:none} html.tm-market .nk-cats .fchip,html.tm-market .nk-cats button{flex:0 0 auto;border-radius:99px!important;padding:8px 15px;font-size:.85rem} html.tm-market .nk-cats .fchip.on{background:var(--tm-link)!important;border-color:var(--tm-link)!important;color:#fff!important} html.tm-market .nk-grid{gap:10px} html.tm-market .nk-card{background:#fff;border:1px solid #e3e9f3;border-radius:18px;padding:14px;gap:6px;box-shadow:0 8px 20px -18px rgba(16,34,74,.5); transition:transform .4s cubic-bezier(.34,1.5,.5,1),box-shadow .2s ease,border-color .2s ease} html.tm-market .nk-card:hover{border-color:#c5d5f1;box-shadow:0 14px 26px -18px rgba(16,34,74,.55)} html.tm-market .nk-card:active{transform:scale(.97)} html.tm-market .nk-avatar{width:46px;height:46px;border-radius:14px;box-shadow:0 8px 16px -10px rgba(10,30,70,.5)} html.tm-market .nk-card h4{font-size:.95rem;font-weight:700;color:var(--tm-ink);line-height:1.3;margin-top:4px} html.tm-market .nk-stock{color:#6b7488;font-size:.76rem} html.tm-market .nk-price{color:var(--tm-price);font-family:var(--font-d);font-weight:800;font-size:1.12rem;margin-top:2px} html.tm-market .nk-card .btn{margin-top:6px;border-radius:12px;padding:10px;font-size:.88rem;width:100%} html.tm-market .nk-card-off{opacity:.55} /* SMM: pil platform, cari, dan daftar layanan berkelompok */ html.tm-market .smm-tabs{gap:8px;margin:16px 0 4px;padding:2px 2px 6px;scrollbar-width:none} html.tm-market .smm-tabs::-webkit-scrollbar{display:none} html.tm-market .smm-tab{background:#fff;border:1px solid #dfe4ec;border-radius:99px;color:#344056;padding:8px 14px;font-size:.84rem;font-weight:600;flex-shrink:0; transition:background .2s ease,color .2s ease,transform .35s cubic-bezier(.34,1.5,.5,1)} html.tm-market .smm-tab:active{transform:scale(.94)} html.tm-market .smm-tab svg{color:var(--tm-link)} html.tm-market .smm-tab .cnt{background:#eef1f6;color:#5b6477;border-radius:99px} html.tm-market .smm-tab.on{background:var(--tm-link)!important;border-color:var(--tm-link)!important;color:#fff!important;box-shadow:0 8px 16px -10px rgba(26,95,216,.8)} html.tm-market .smm-tab.on svg{color:#fff} html.tm-market .smm-tab.on .cnt{background:rgba(255,255,255,.22);color:#fff} html.tm-market .smm-scroll-hint{color:#8a93a6} html.tm-market .smm-search{background:rgba(118,128,150,.14);border:none;border-radius:12px;min-height:44px} html.tm-market .smm-search:focus-within{background:#fff;box-shadow:0 0 0 4px rgba(26,95,216,.12)} html.tm-market .smm-search input{color:var(--tm-ink)} html.tm-market .smm-catsel{appearance:none;-webkit-appearance:none;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%237b8598' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center; border:1px solid #dfe4ec;border-radius:12px;color:var(--tm-ink);font-weight:600;padding-right:36px} html.tm-market .smm-statbar{color:#6b7488} html.tm-market #page-smm .svc-list{gap:0;margin-top:14px;background:#fff;border:1px solid var(--tm-line);border-radius:20px;overflow:hidden;box-shadow:0 10px 26px -22px rgba(16,34,74,.45)} html.tm-market #page-smm .svc-list > .empty{padding:26px 16px} html.tm-market #page-smm .svc{position:relative;display:grid;grid-template-columns:44px minmax(0,1fr) auto;gap:4px 12px;align-items:center; background:none;border:none;border-radius:0;padding:14px 16px;transition:background .15s ease} html.tm-market #page-smm .svc + .svc::before{content:'';position:absolute;top:0;left:72px;right:0;height:1px;background:rgba(40,55,85,.09)} html.tm-market #page-smm .svc:active{background:#f3f6fb} html.tm-market #page-smm .svc > .plat{grid-row:1/3;align-self:start;width:44px;height:44px;border:none;border-radius:13px;background:#eaf1ff;color:var(--tm-link)} html.tm-market #page-smm .svc > div:nth-child(2){grid-column:2/4} html.tm-market #page-smm .svc b{font-size:.92rem;font-weight:700;color:var(--tm-ink);line-height:1.35} html.tm-market #page-smm .svc .sm{color:#6b7488;font-size:.74rem} html.tm-market #page-smm .svc .price-pill{grid-column:2;justify-self:start;margin:0;background:none;border:none;padding:0;text-align:left;display:flex;align-items:baseline;gap:5px} html.tm-market #page-smm .svc .price-pill .n{color:var(--tm-price);font-size:1rem} html.tm-market #page-smm .svc .price-pill .u{color:#8a93a6;font-size:.7rem;margin:0} html.tm-market #page-smm .svc .btn{grid-column:3;position:static;border-radius:99px;padding:7px 16px;font-size:.82rem;margin:0} html.tm-market #page-smm .svc .btn::before{content:'';position:absolute;inset:0} /* seluruh baris bisa diketuk */ @media(min-width:760px){ html.tm-market #page-smm .svc{grid-template-columns:44px minmax(0,1fr) auto auto;gap:4px 16px} html.tm-market #page-smm .svc > .plat{grid-row:auto;align-self:center} html.tm-market #page-smm .svc > div:nth-child(2){grid-column:2} html.tm-market #page-smm .svc .price-pill{grid-column:3;justify-self:end;flex-direction:column;align-items:flex-end;gap:0} html.tm-market #page-smm .svc .btn{grid-column:4} } html.tm-market #smmMoreBtn{border-radius:99px;padding:10px 20px} @media(prefers-reduced-motion:no-preference){ html.tm-market #page-nokos.on .nk-panel,html.tm-market #page-smm.on .smm-toolbar{animation:tmFade .5s cubic-bezier(.32,.72,0,1) .05s backwards} html.tm-market #page-nokos.on .nk-card,html.tm-market #page-smm.on .svc{animation:tmFade .45s cubic-bezier(.32,.72,0,1) backwards} } /* ---------- 13. Kurangi gerak ---------- */ @media(prefers-reduced-motion:reduce){ html.tm-market .card:hover,html.tm-market body .qn-btn:hover .qn-ic{transform:none} } /* ===================================================================================== 14. [REDESIGN 2026-09-23] Halaman Refund & Garansi, Generate Akun, Trade with Xaviera - Hero biru bergradasi + chip fitur, tab segmented dengan "thumb" yang meluncur - Refund: kalkulator bertahap, kartu hasil (angka menghitung naik), bar pemakaian, 4 tingkat service fee yang menyala sesuai hasil, preview format gaya struk - Generate: kartu akses aktif (titik "live"), tombol generate berkilau, riwayat ber-status - Trade: kartu tugas dengan statistik + progress target, kartu tawaran dengan pill status Semua ikon SVG (fungsi xvI() di index.html). Semua animasi dimatikan saat reduce-motion. ===================================================================================== */ html.tm-market{--amber:#b45309!important} html.tm-market .xv-i{flex:0 0 auto;vertical-align:-3px} html.tm-market .btn .xv-i{margin-right:6px} /* ---- hero ---- */ html.tm-market .xv-hero{position:relative;overflow:hidden;isolation:isolate;margin:14px 0 16px;padding:22px 20px 18px;border-radius:24px;text-align:left;color:#fff; background:linear-gradient(135deg,var(--h1,#1a5fd8),var(--h2,#0d3b8f));box-shadow:0 20px 38px -24px var(--h2,#0d3b8f)} html.tm-market .xv-hero h1{color:#fff!important;font-size:clamp(1.6rem,6.2vw,2.25rem);margin:14px 0 6px;line-height:1.12} html.tm-market .xv-hero p{color:rgba(255,255,255,.88)!important;font-size:.92rem;line-height:1.55;margin:0;max-width:600px} html.tm-market .xv-hl{color:#ffd66b} html.tm-market .xv-hero-ic{width:52px;height:52px;border-radius:16px;display:grid;place-items:center;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.28); -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);box-shadow:inset 0 1px 0 rgba(255,255,255,.25)} html.tm-market .xv-hero-orb{position:absolute;z-index:-1;border-radius:50%;pointer-events:none} html.tm-market .xv-hero-orb.a{width:240px;height:240px;right:-80px;top:-110px;background:radial-gradient(circle,rgba(255,255,255,.34),transparent 66%)} html.tm-market .xv-hero-orb.b{width:200px;height:200px;left:-70px;bottom:-120px;background:radial-gradient(circle,rgba(255,214,107,.34),transparent 66%)} html.tm-market .xv-hero::after{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none; background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.14) 50%,transparent 65%);background-size:250% 100%;background-position:120% 0} html.tm-market .xv-hero-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px} html.tm-market .xv-hero-chips span{display:inline-flex;align-items:center;gap:6px;padding:6px 11px;border-radius:999px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.22);font-size:.76rem;font-weight:600;color:#fff} /* ---- segmented tabs ---- */ html.tm-market .xv-seg{--n:2;--i:0;position:relative;display:flex;padding:4px;margin:0 0 16px;border-radius:16px;background:#fff;border:1px solid var(--tm-line); box-shadow:0 8px 20px -16px rgba(13,59,143,.45);isolation:isolate} html.tm-market .xv-seg-thumb{position:absolute;z-index:0;top:4px;bottom:4px;left:4px;width:calc((100% - 8px) / var(--n));border-radius:12px; background:linear-gradient(135deg,var(--tm-link),#1450c4);box-shadow:0 10px 18px -12px var(--tm-link);transform:translateX(calc(var(--i) * 100%)); transition:transform .55s cubic-bezier(.34,1.36,.5,1)} html.tm-market .xv-seg-btn{flex:1 1 0;min-width:0;position:relative;z-index:1;border:0;background:none;display:flex;align-items:center;justify-content:center;gap:7px; padding:11px 6px;border-radius:12px;font:700 .86rem var(--font-b);color:var(--tm-mut);cursor:pointer;transition:color .3s ease,transform .3s ease} html.tm-market .xv-seg-btn span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis} html.tm-market .xv-seg-btn.on{color:#fff} html.tm-market .xv-seg-btn:active{transform:scale(.96)} /* ---- kartu umum ---- */ html.tm-market .xv-card{background:#fff!important;border:1px solid var(--tm-line)!important;border-radius:22px!important;padding:20px 18px!important;box-shadow:0 12px 30px -26px rgba(13,59,143,.5)!important} html.tm-market .xv-card-h{display:flex;align-items:center;gap:12px;margin-bottom:14px} html.tm-market .xv-card-h h3{margin:0;font:800 1.08rem var(--font-d);color:var(--tm-ink)} html.tm-market .xv-card-h p{margin:2px 0 0;font-size:.82rem;color:var(--tm-mut);line-height:1.45} html.tm-market .xv-tile{flex:0 0 auto;width:42px;height:42px;border-radius:13px;display:grid;place-items:center;color:#fff; background:linear-gradient(145deg,color-mix(in srgb,var(--t) 76%,#fff),var(--t));box-shadow:0 8px 16px -10px var(--t)} html.tm-market .field label small{font-weight:500;color:var(--tm-mut)} html.tm-market .xv-wide{width:100%;display:flex!important;align-items:center;justify-content:center;gap:4px;margin-top:6px} html.tm-market .xv-sm{padding:8px 14px!important;font-size:.8rem!important;display:inline-flex!important;align-items:center;gap:2px;flex:0 0 auto;width:auto!important;margin:0!important} html.tm-market .xv-sm .xv-i{margin:0 0 0 2px} html.tm-market .xv-pill{display:inline-flex;align-items:center;gap:4px;flex:0 0 auto;padding:4px 10px;border-radius:999px;font-size:.74rem;font-weight:800;white-space:nowrap; color:var(--c);background:color-mix(in srgb,var(--c) 13%,#fff)} html.tm-market .xv-spin{width:15px;height:15px;border-radius:50%;border:2px solid rgba(255,255,255,.4);border-top-color:#fff;display:inline-block;margin-right:7px;vertical-align:-3px;animation:xvSpin .8s linear infinite} html.tm-market .xv-pane.xv-in{animation:xvRise .45s cubic-bezier(.32,.72,0,1)} /* ---- refund: kalkulator ---- */ html.tm-market .xv-formula{display:flex;flex-wrap:wrap;align-items:center;gap:6px;padding:10px 12px;border-radius:14px;background:var(--tm-tile)} html.tm-market .xv-formula span{padding:4px 10px;border-radius:999px;background:#fff;font-size:.76rem;font-weight:700;color:var(--tm-blue)} html.tm-market .xv-formula i{font-style:normal;font-weight:800;color:var(--tm-link)} html.tm-market .xv-step{display:flex;align-items:center;gap:9px;margin:20px 0 4px;font:800 .92rem var(--font-d);color:var(--tm-ink)} html.tm-market .xv-step > span{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:var(--tm-link);color:#fff;font-size:.74rem;flex:0 0 auto} html.tm-market .xv-affix{position:relative} html.tm-market .xv-affix em{position:absolute;top:50%;left:14px;transform:translateY(-50%);font-style:normal;font-weight:700;font-size:.85rem;color:var(--tm-mut);pointer-events:none} html.tm-market .xv-affix input{padding-left:42px!important} html.tm-market .xv-affix.r em{left:auto;right:14px} html.tm-market .xv-affix.r input{padding-left:14px!important;padding-right:54px!important} html.tm-market .xv-quick{display:flex;gap:6px;margin-top:8px} html.tm-market .xv-quick button{flex:1;border:1px solid var(--tm-line);background:#fff;border-radius:10px;padding:6px 0;font:700 .78rem var(--font-b);color:var(--tm-ink);cursor:pointer;transition:border-color .2s,color .2s,transform .2s} html.tm-market .xv-quick button:hover{border-color:var(--tm-link);color:var(--tm-link)} html.tm-market .xv-quick button:active{transform:scale(.94)} html.tm-market .xv-stepper{display:flex;align-items:stretch;border:1px solid var(--tm-line);border-radius:12px;overflow:hidden;background:#fff} html.tm-market .xv-stepper button{width:46px;flex:0 0 auto;border:0;background:var(--tm-tile);color:var(--tm-link);display:grid;place-items:center;cursor:pointer;transition:background .2s} html.tm-market .xv-stepper button:active{background:#d7e4fb} html.tm-market .xv-stepper input{flex:1;min-width:0;margin:0!important;text-align:center;border:0!important;border-radius:0!important;box-shadow:none!important;font-weight:800!important;-moz-appearance:textfield} html.tm-market .xv-stepper input::-webkit-inner-spin-button,html.tm-market .xv-stepper input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0} html.tm-market .xv-result{margin:16px 0 4px;padding:16px;border-radius:18px;background:linear-gradient(145deg,#e7f6ee,#f5fcf8);border:1px solid #cdebd9;animation:xvPop .5s cubic-bezier(.34,1.36,.5,1)} html.tm-market .xv-result-top{display:flex;align-items:flex-start;justify-content:space-between;gap:10px} html.tm-market .xv-result-lbl{display:block;font-size:.78rem;font-weight:700;color:#2f6b4c} html.tm-market .xv-result-val{display:block;font:800 1.95rem var(--font-d);color:var(--green);letter-spacing:-.5px;line-height:1.15;font-variant-numeric:tabular-nums} html.tm-market .xv-fee{flex:0 0 auto;padding:6px 12px;border-radius:999px;background:var(--green);color:#fff;font:800 .88rem var(--font-d)} html.tm-market .xv-usage{margin-top:14px} html.tm-market .xv-usage-bar{height:10px;border-radius:10px;background:#cdebd9;overflow:hidden} html.tm-market .xv-usage-bar i{display:block;height:100%;width:0;border-radius:inherit;background:linear-gradient(90deg,#f59e0b,#ef6c3a);transition:width .8s cubic-bezier(.32,.72,0,1)} html.tm-market .xv-usage-leg{display:flex;justify-content:space-between;gap:10px;margin-top:7px;font-size:.78rem;color:#35574a} html.tm-market .xv-usage-leg i{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:5px;vertical-align:0} html.tm-market .xv-usage-leg i.u{background:#ef6c3a} html.tm-market .xv-usage-leg i.s{background:#cdebd9;box-shadow:inset 0 0 0 1.5px #7cc39c} html.tm-market .xv-result-cat{display:flex;align-items:center;gap:6px;margin-top:12px;font-size:.8rem;font-weight:600;color:#2f6b4c} html.tm-market .xv-result-formula{margin-top:10px;padding-top:10px;border-top:1px dashed #b9dcc8;font-size:.8rem;color:#35574a;font-variant-numeric:tabular-nums;overflow-wrap:anywhere} html.tm-market .xv-sub-h{margin:20px 0 8px;font-size:.76rem;font-weight:800;letter-spacing:.4px;text-transform:uppercase;color:var(--tm-mut)} html.tm-market .xv-tiers{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px} @media(max-width:560px){html.tm-market .xv-tiers{grid-template-columns:repeat(2,minmax(0,1fr))}} html.tm-market .xv-tier{padding:10px 12px;border-radius:14px;background:var(--tm-page);border:1.5px solid transparent;transition:background .35s,border-color .35s,transform .45s cubic-bezier(.34,1.36,.5,1),box-shadow .35s} html.tm-market .xv-tier b{display:block;font:800 1.12rem var(--font-d);color:var(--tm-ink)} html.tm-market .xv-tier span{display:block;font-size:.74rem;color:var(--tm-mut);line-height:1.35} html.tm-market .xv-tier.on{background:#e7f6ee;border-color:var(--green);transform:translateY(-2px);box-shadow:0 12px 20px -16px var(--green)} html.tm-market .xv-tier.on b{color:var(--green)} html.tm-market .xv-receipt{margin-top:16px;border-radius:16px;background:var(--tm-page);border:1px dashed #c3cfe3;overflow:hidden} html.tm-market .xv-receipt-h{display:flex;align-items:center;justify-content:space-between;padding:10px 10px 0 14px;font-size:.74rem;font-weight:800;letter-spacing:.4px;text-transform:uppercase;color:var(--tm-mut)} html.tm-market .xv-receipt-h > span{display:inline-flex;align-items:center;gap:6px} html.tm-market .xv-receipt pre{margin:0;padding:8px 14px 14px;background:none;border:0;font:500 .82rem/1.7 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color:var(--tm-ink);white-space:pre-wrap;overflow-wrap:anywhere} html.tm-market .xv-icbtn{width:34px;height:34px;border-radius:10px;border:1px solid var(--tm-line);background:#fff;color:var(--tm-link);display:grid;place-items:center;cursor:pointer;transition:transform .3s} html.tm-market .xv-icbtn:active{transform:scale(.9)} html.tm-market .xv-actions{display:grid;grid-template-columns:1fr 1.6fr;gap:10px;margin-top:14px} @media(max-width:480px){html.tm-market .xv-actions{grid-template-columns:1fr}} html.tm-market .xv-actions .btn{display:flex;align-items:center;justify-content:center;width:100%;margin:0} html.tm-market .xv-flow{list-style:none;display:flex;gap:8px;padding:0;margin:18px 0 0} html.tm-market .xv-flow li{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;font-size:.72rem;line-height:1.35;color:var(--tm-mut);position:relative} html.tm-market .xv-flow li > span{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:var(--tm-tile);color:var(--tm-link);position:relative;z-index:1} html.tm-market .xv-flow li + li::before{content:'';position:absolute;top:16px;right:calc(50% + 21px);width:calc(100% - 34px);height:2px;background:repeating-linear-gradient(90deg,#c9d5ea 0 5px,transparent 5px 9px)} /* ---- refund: garansi & riwayat ---- */ html.tm-market .xv-drop{width:100%;display:flex;flex-direction:column;align-items:center;gap:4px;padding:18px 14px;border-radius:16px;border:1.5px dashed #b7c6e2;background:var(--tm-page); color:var(--tm-ink);cursor:pointer;font-family:var(--font-b);transition:border-color .25s,background .25s} html.tm-market .xv-drop:hover{border-color:var(--tm-link);background:#eef4ff} html.tm-market .xv-drop-ic{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;background:#fff;color:var(--tm-link);box-shadow:0 8px 16px -12px var(--tm-link);margin-bottom:4px;transition:transform .45s cubic-bezier(.34,1.36,.5,1)} html.tm-market .xv-drop:hover .xv-drop-ic{transform:translateY(-3px)} html.tm-market .xv-drop b{font-size:.9rem} html.tm-market .xv-drop small{font-size:.74rem;color:var(--tm-mut)} html.tm-market .xv-shot:not(:empty){margin-top:12px} html.tm-market .xv-shot-item{position:relative;display:inline-block;animation:xvPop .4s cubic-bezier(.34,1.36,.5,1)} html.tm-market .xv-shot-item img{display:block;max-width:220px;max-height:240px;border-radius:14px;border:1px solid var(--tm-line)} html.tm-market .xv-shot-x{position:absolute;top:-9px;right:-9px;width:28px;height:28px;border-radius:50%;border:2px solid #fff;background:var(--red);color:#fff;display:grid;place-items:center;cursor:pointer;box-shadow:0 4px 10px rgba(0,0,0,.18)} html.tm-market .xv-note{display:flex;gap:9px;margin-top:14px;padding:12px 14px;border-radius:14px;background:var(--tm-page);font-size:.8rem;color:var(--tm-mut);line-height:1.5} html.tm-market .xv-note .xv-i{color:var(--tm-link);margin-top:2px} html.tm-market .xv-note b{color:var(--tm-ink)} html.tm-market .xv-ai{margin-top:14px;padding:14px 16px;border-radius:16px;background:linear-gradient(135deg,#f3efff,#eaf4ff);border:1px solid #d9d0ff;animation:xvPop .45s cubic-bezier(.34,1.36,.5,1)} html.tm-market .xv-ai-h{display:flex;align-items:center;gap:7px;margin-bottom:6px;font-size:.85rem;font-weight:800;color:#5b3fd1} html.tm-market #wrAutoReplyText{font-size:.85rem;color:var(--tm-ink);line-height:1.6} html.tm-market #rfHistoryList .xv-tk{background:#fff!important;border:1px solid var(--tm-line)!important;border-radius:18px!important;padding:14px!important;margin-bottom:10px;box-shadow:none!important;animation:xvRise .45s cubic-bezier(.32,.72,0,1) backwards} html.tm-market .xv-tk .oc-top{display:flex;align-items:flex-start;gap:12px} html.tm-market .xv-tk .oc-ic{width:40px!important;height:40px!important;border-radius:12px!important;border:0!important;font-size:0} html.tm-market .xv-tk .oc-top > div:nth-child(2){flex:1;min-width:0} html.tm-market .xv-tk h4{margin:0 0 3px;font-size:.95rem;color:var(--tm-ink)} html.tm-market .xv-tk-id{font-weight:500;color:var(--tm-mut);font-size:.76rem} html.tm-market .xv-tk .meta{font-size:.8rem;color:var(--tm-mut);overflow-wrap:anywhere} html.tm-market .xv-tk-sla{display:inline-flex;align-items:center;gap:5px;margin-top:6px;font-size:.76rem;color:var(--tm-mut)} html.tm-market .xv-tk-sla.late{color:var(--red)} html.tm-market .xv-tk-note{display:flex;gap:8px;margin-top:10px;padding:10px 12px;border-radius:12px;background:#fff8eb;border:1px solid #f6dfb5;font-size:.8rem;color:#5c3d0a;line-height:1.5} html.tm-market .xv-tk-note .xv-i{margin-top:2px} html.tm-market #rfHistoryList .xv-tk:nth-child(2){animation-delay:.05s} html.tm-market #rfHistoryList .xv-tk:nth-child(3){animation-delay:.1s} html.tm-market #rfHistoryList .xv-tk:nth-child(n+4){animation-delay:.15s} /* ---- generate akun ---- */ html.tm-market .xv-gen{position:relative;overflow:hidden;background:#fff;border:1px solid var(--tm-line);border-radius:22px;padding:20px 18px 18px;margin-bottom:14px; box-shadow:0 14px 32px -26px rgba(76,52,200,.6);animation:xvRise .5s cubic-bezier(.32,.72,0,1) var(--d,0ms) backwards} html.tm-market .xv-gen::before{content:'';position:absolute;left:0;right:0;top:0;height:4px;background:linear-gradient(90deg,#6d4aff,#1a5fd8,#16b3c7,#6d4aff);background-size:200% 100%} html.tm-market .xv-gen-h{display:flex;align-items:center;flex-wrap:wrap;gap:12px;margin-bottom:14px} html.tm-market .xv-gen-name{flex:1;min-width:150px} html.tm-market .xv-gen-name b{display:block;font:800 1.03rem var(--font-d);color:var(--tm-ink);line-height:1.25;overflow-wrap:anywhere} html.tm-market .xv-gen-name span{display:inline-flex;align-items:center;gap:6px;margin-top:2px;font-size:.76rem;font-weight:700;color:var(--green)} html.tm-market .xv-live{width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 0 0 rgba(14,143,78,.45)} html.tm-market .xv-chip{display:inline-flex;align-items:center;gap:5px;padding:6px 11px;border-radius:999px;background:#f1edff;color:#5b3fd1;font-size:.76rem;font-weight:700;white-space:nowrap} html.tm-market .xv-details{border-radius:14px;background:var(--tm-page);margin-bottom:12px;overflow:hidden} html.tm-market .xv-details summary{list-style:none;display:flex;align-items:center;gap:8px;padding:11px 13px;cursor:pointer;-webkit-user-select:none;user-select:none;font-size:.82rem;font-weight:700;color:var(--tm-ink)} html.tm-market .xv-details summary::-webkit-details-marker{display:none} html.tm-market .xv-details summary > span{flex:1;min-width:0} html.tm-market .xv-details summary small{font-weight:500;color:var(--tm-mut)} html.tm-market .xv-details summary > .xv-i:first-child{color:#5b3fd1} html.tm-market .xv-details summary > .xv-i:last-child{color:var(--tm-mut);transition:transform .3s ease} html.tm-market .xv-details[open] summary > .xv-i:last-child{transform:rotate(180deg)} html.tm-market .xv-details-b{padding:0 13px 13px;animation:xvRise .3s ease} html.tm-market .xv-details-b input{width:100%;box-sizing:border-box;margin:0;background:#fff;border:1px solid var(--tm-line);border-radius:10px;padding:10px 12px;color:var(--tm-ink);font-size:.86rem} html.tm-market .xv-hint{margin-top:6px;font-size:.72rem;line-height:1.45;color:var(--tm-mut)} html.tm-market .xv-gen-price{display:flex;align-items:center;gap:8px;margin-bottom:12px;padding:10px 13px;border-radius:12px;background:var(--tm-tile);color:var(--tm-blue);font-size:.82rem} html.tm-market .xv-gen-opt{margin-bottom:12px} html.tm-market .xv-gen-opt label{display:block;margin-bottom:7px;font-size:.78rem;font-weight:700;color:var(--tm-ink)} html.tm-market .xv-gen-opt label small{margin-left:4px;font-weight:500;color:var(--tm-mut)} html.tm-market .xv-pills{display:flex;flex-wrap:wrap;gap:6px} html.tm-market .xv-gen-total{margin-bottom:12px;font:800 .96rem var(--font-d);color:var(--tm-ink)} html.tm-market .xv-gen-btn{position:relative;overflow:hidden;width:100%;display:flex!important;align-items:center;justify-content:center;gap:8px;padding:14px 18px!important;font-size:.98rem!important;border-radius:14px!important} html.tm-market .xv-gen-btn::after{content:'';position:absolute;top:0;bottom:0;left:-45%;width:32%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.38),transparent);transform:skewX(-20deg);pointer-events:none} html.tm-market .xv-gen-btn:disabled::after{display:none} html.tm-market .xv-gen-result:not(:empty){margin-top:12px} html.tm-market .xv-gen-hist:not(:empty){margin-top:16px} html.tm-market .xv-hist-h{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px} html.tm-market .xv-hist-h > span{display:inline-flex;align-items:center;gap:6px;font-size:.82rem;font-weight:800;color:var(--tm-ink)} html.tm-market .xv-hist-h small{font-size:.74rem;color:var(--tm-mut)} html.tm-market .xv-hist{border-radius:16px;background:var(--tm-page);padding:2px 12px} html.tm-market .xv-hist-row{display:flex;align-items:center;flex-wrap:wrap;gap:10px;padding:10px 0;animation:xvRise .4s cubic-bezier(.32,.72,0,1) backwards} html.tm-market .xv-hist-row + .xv-hist-row{border-top:1px solid #dfe6f2} html.tm-market .xv-hist-row:nth-child(2){animation-delay:.04s}html.tm-market .xv-hist-row:nth-child(3){animation-delay:.08s} html.tm-market .xv-hist-row:nth-child(4){animation-delay:.12s}html.tm-market .xv-hist-row:nth-child(5){animation-delay:.16s} html.tm-market .xv-hist-ic{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;flex:0 0 auto} html.tm-market .xv-hist-row.ok .xv-hist-ic{background:#dcf3e6;color:var(--green)} html.tm-market .xv-hist-row.fail .xv-hist-ic{background:#fde4e8;color:var(--red)} html.tm-market .xv-hist-row.wait .xv-hist-ic{background:#fff1d6;color:#b45309} html.tm-market .xv-hist-t{flex:1;min-width:0} html.tm-market .xv-hist-t b{display:flex;align-items:center;gap:5px;font-size:.84rem;color:var(--tm-ink)} html.tm-market .xv-hist-row.ok .xv-hist-t b{color:#0b7a42} html.tm-market .xv-hist-row.fail .xv-hist-t b{color:#c8243f} html.tm-market .xv-hist-row.wait .xv-hist-t b{color:#b45309} html.tm-market .xv-hist-t > span{font-size:.74rem;color:var(--tm-mut)} html.tm-market .xv-see{display:inline-flex;align-items:center;gap:5px;padding:6px 12px;border-radius:999px;border:1px solid var(--tm-line);background:#fff;color:var(--tm-link);font:700 .76rem var(--font-b);cursor:pointer;transition:border-color .2s,background .2s,transform .2s} html.tm-market .xv-see:hover{border-color:var(--tm-link);background:#eef4ff} html.tm-market .xv-see:active{transform:scale(.94)} html.tm-market .xv-hist-reveal{flex-basis:100%;padding:10px;border-radius:12px;background:#fff;border:1px solid var(--tm-line);color:var(--tm-ink)} html.tm-market .xv-hist-reveal > div{border-bottom-color:#eef1f6!important} html.tm-market #page-generate [style*="background:rgba(0,0,0,.2)"],html.tm-market #page-generate [style*="background:rgba(255,255,255,.03)"]{background:var(--tm-page)!important} html.tm-market .xv-promo{background:#fff;border:1px solid var(--tm-line);border-radius:22px;padding:16px 18px 8px;margin-bottom:14px;animation:xvRise .5s cubic-bezier(.32,.72,0,1) backwards} html.tm-market .xv-promo-h{display:flex;align-items:center;gap:7px;margin-bottom:4px;font:800 .95rem var(--font-d);color:#5b3fd1} html.tm-market .xv-promo-row{display:flex;align-items:center;gap:12px;padding:12px 0} html.tm-market .xv-promo-row + .xv-promo-row{border-top:1px solid #e8edf6} html.tm-market .xv-promo-t{flex:1;min-width:0} html.tm-market .xv-promo-t b{display:block;font-size:.88rem;color:var(--tm-ink);overflow-wrap:anywhere} html.tm-market .xv-promo-t span{font-size:.8rem;font-weight:800;color:var(--tm-price)} /* ---- trade ---- */ html.tm-market .xv-tasks{display:grid;gap:14px} @media(min-width:720px){html.tm-market .xv-tasks{grid-template-columns:repeat(2,minmax(0,1fr))}} html.tm-market .xv-task{display:flex;flex-direction:column;background:#fff;border:1px solid var(--tm-line);border-radius:22px;padding:18px; box-shadow:0 14px 30px -26px rgba(13,59,143,.55);animation:xvRise .5s cubic-bezier(.32,.72,0,1) var(--d,0ms) backwards;transition:transform .3s ease,box-shadow .3s ease} @media(hover:hover){html.tm-market .xv-task:hover{transform:translateY(-3px);box-shadow:0 20px 36px -24px rgba(13,59,143,.55)}} html.tm-market .xv-task-h{display:flex;align-items:center;gap:12px} html.tm-market .xv-task-h > div{min-width:0} html.tm-market .xv-task-h b{display:block;font:800 1rem var(--font-d);color:var(--tm-ink);line-height:1.25;overflow-wrap:anywhere} html.tm-market .xv-task-h span{font-size:.74rem;font-weight:800;letter-spacing:.3px;text-transform:uppercase;color:#0b7a5c} html.tm-market .xv-task-d{margin-top:10px;font-size:.82rem;line-height:1.55;color:var(--tm-mut);white-space:pre-line;overflow-wrap:anywhere} html.tm-market .xv-task-stats{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:14px} html.tm-market .xv-task-stats > div{padding:10px 12px;border-radius:14px;background:var(--tm-page);min-width:0} html.tm-market .xv-task-stats span{display:block;font-size:.72rem;font-weight:600;color:var(--tm-mut)} html.tm-market .xv-task-stats b{display:block;margin-top:2px;font:800 1.06rem var(--font-d);color:var(--tm-ink);font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} html.tm-market .xv-price{color:var(--tm-price)!important} html.tm-market .xv-prog{height:8px;border-radius:8px;background:#e3e9f4;overflow:hidden;margin-top:12px} html.tm-market .xv-prog i{display:block;height:100%;width:0;border-radius:inherit;background:linear-gradient(90deg,#1fc79a,#0e8f6a);transition:width 1.1s cubic-bezier(.32,.72,0,1)} html.tm-market .xv-prog-l{display:flex;justify-content:space-between;gap:8px;margin-top:6px;font-size:.72rem;color:var(--tm-mut)} html.tm-market .xv-task .xv-wide{margin-top:auto;padding-top:14px} html.tm-market .xv-task .xv-wide.btn{margin-top:14px;padding-top:12px} html.tm-market .xv-create{width:100%;display:flex;align-items:center;gap:12px;margin-bottom:14px;padding:14px 16px;border-radius:18px;border:1.5px dashed #b7c6e2;background:#fff;color:var(--tm-ink);text-align:left;cursor:pointer;font-family:var(--font-b);transition:border-color .25s,background .25s} html.tm-market .xv-create:hover{border-color:var(--tm-link);background:#f5f8ff} html.tm-market .xv-create-ic{width:42px;height:42px;border-radius:13px;display:grid;place-items:center;flex:0 0 auto;background:var(--tm-link);color:#fff;transition:transform .45s cubic-bezier(.34,1.36,.5,1)} html.tm-market .xv-create:hover .xv-create-ic{transform:rotate(90deg)} html.tm-market .xv-create > span:nth-child(2){flex:1;min-width:0} html.tm-market .xv-create b{display:block;font-size:.92rem} html.tm-market .xv-create small{font-size:.76rem;color:var(--tm-mut)} html.tm-market .xv-create > .xv-i:last-child{color:var(--tm-mut)} html.tm-market .xv-offers{display:grid;gap:10px} html.tm-market .xv-offer{display:flex;align-items:center;gap:12px;padding:14px;border-radius:18px;background:#fff;border:1px solid var(--tm-line);cursor:pointer; animation:xvRise .45s cubic-bezier(.32,.72,0,1) var(--d,0ms) backwards;transition:border-color .25s,transform .25s} html.tm-market .xv-offer:hover{border-color:#b7c6e2;transform:translateY(-2px)} html.tm-market .xv-offer:focus-visible{outline:3px solid color-mix(in srgb,var(--tm-link) 45%,transparent);outline-offset:2px} html.tm-market .xv-offer-t{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px} html.tm-market .xv-offer-t b{font-size:.92rem;color:var(--tm-ink);overflow-wrap:anywhere} html.tm-market .xv-offer-t > span{font-size:.76rem;color:var(--tm-mut)} html.tm-market .xv-offer-t .xv-offer-p b{font-size:.84rem} @media(max-width:480px){html.tm-market .xv-offer{flex-wrap:wrap;align-items:flex-start}html.tm-market .xv-offer-t{flex:1 1 calc(100% - 60px)}html.tm-market .xv-offer .xv-pill{margin-left:54px;margin-top:-2px}} html.tm-market .xv-task-d.clamp{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:4;overflow:hidden} html.tm-market .xv-task-d.clamp.open{display:block;-webkit-line-clamp:unset} html.tm-market .xv-more{align-self:flex-start;display:inline-flex;align-items:center;gap:4px;margin-top:6px;padding:0;border:0;background:none;color:var(--tm-link);font:700 .8rem var(--font-b);cursor:pointer} html.tm-market .xv-more .xv-i{transition:transform .3s} html.tm-market .xv-task-d.open + .xv-more .xv-i{transform:rotate(180deg)} /* ---- animasi ---- */ @keyframes xvRise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}} @keyframes xvPop{0%{opacity:0;transform:scale(.94)}100%{opacity:1;transform:none}} @keyframes xvSpin{to{transform:rotate(360deg)}} @keyframes xvBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}} @keyframes xvFloat{0%,100%{transform:translate(0,0)}50%{transform:translate(-18px,14px)}} @keyframes xvSheen{0%{background-position:120% 0}100%{background-position:-60% 0}} @keyframes xvSlide{to{background-position:-200% 0}} @keyframes xvShine{0%,60%{left:-45%}100%{left:130%}} @keyframes xvPulse{0%{box-shadow:0 0 0 0 rgba(14,143,78,.45)}70%{box-shadow:0 0 0 8px rgba(14,143,78,0)}100%{box-shadow:0 0 0 0 rgba(14,143,78,0)}} @media(prefers-reduced-motion:no-preference){ html.tm-market .page.on .xv-hero{animation:xvRise .55s cubic-bezier(.32,.72,0,1) backwards} html.tm-market .page.on .xv-hero::after{animation:xvSheen 1.8s ease .35s 1} html.tm-market .xv-hero-ic{animation:xvBob 4.5s ease-in-out infinite} html.tm-market .xv-hero-orb.a{animation:xvFloat 10s ease-in-out infinite} html.tm-market .xv-hero-orb.b{animation:xvFloat 12s ease-in-out infinite reverse} html.tm-market .page.on .xv-seg{animation:xvRise .55s cubic-bezier(.32,.72,0,1) .06s backwards} html.tm-market .page.on .xv-pane > .xv-card{animation:xvRise .6s cubic-bezier(.32,.72,0,1) .12s backwards} html.tm-market .xv-gen::before{animation:xvSlide 6s linear infinite} html.tm-market .xv-gen-btn::after{animation:xvShine 3.4s ease-in-out infinite} html.tm-market .xv-live{animation:xvPulse 1.8s ease-out infinite} } @media(prefers-reduced-motion:reduce){ html.tm-market .xv-hero,html.tm-market .xv-seg,html.tm-market .xv-card,html.tm-market .xv-result,html.tm-market .xv-gen,html.tm-market .xv-task,html.tm-market .xv-offer, html.tm-market .xv-hist-row,html.tm-market .xv-tk,html.tm-market .xv-promo,html.tm-market .xv-pane.xv-in,html.tm-market .xv-ai,html.tm-market .xv-shot-item{animation:none!important} html.tm-market .xv-seg-thumb,html.tm-market .xv-usage-bar i,html.tm-market .xv-prog i,html.tm-market .xv-tier{transition:none!important} } /* ===================================================================================== 15. [FIX 2026-09-23] Teks yang tidak kelihatan di tema terang Desain lama (latar gelap) memakai warna teks pastel/terang. Di tema terang latarnya ikut terang, jadi teksnya hilang — contoh: kotak "S&K PRODUK" di Tas dan info "Transfer ke Toko". ===================================================================================== */ html.tm-market .snk-box{background:#fff8eb!important;border:1px solid #f3dcae!important;color:#4a3208!important} html.tm-market .snk-box b,html.tm-market .snk-box strong{color:#2e1f05} html.tm-market #pane-transfersaldo > div[style*="#a8e8ff"]{background:#e9f6ff!important;border-color:#bfe3fa!important;color:#0b4a73!important} html.tm-market #pane-transfersaldo > div[style*="#a8e8ff"] b{color:#07344f} html.tm-market [style*="color:#a8e8ff"]{color:#0b4a73!important} html.tm-market [style*="color:#3ddc97"],html.tm-market [style*="color:#a5f3c9"],html.tm-market [style*="color:#7ce8bb"]{color:#0b7a42!important} html.tm-market [style*="color:#ff8c8c"],html.tm-market [style*="color:#ff8fa3"],html.tm-market [style*="color:#ff8fa5"],html.tm-market [style*="color:#ff9aa8"], html.tm-market [style*="color:#ffb0bd"],html.tm-market [style*="color:#ffb8c8"]{color:#c21f3b!important} html.tm-market [style*="color:#ffb020"],html.tm-market [style*="color:#f5a523"],html.tm-market [style*="color:#f5a623"],html.tm-market [style*="color:#ffd58a"], html.tm-market [style*="color:#ff9a5c"]{color:#a14a04!important} html.tm-market [style*="color:#c9bfff"],html.tm-market [style*="color:#c9b6ff"],html.tm-market [style*="color:#d9c8ff"],html.tm-market [style*="color:#dcd9f7"]{color:#5132c4!important} html.tm-market [style*="color:#d8d4cc"],html.tm-market [style*="color:#e8e5df"],html.tm-market [style*="color:#d8d9e6"],html.tm-market [style*="color:#c9cfe0"]{color:var(--tm-mut)!important} /* ===================================================================================== 16. [REDESIGN 2026-09-23] Halaman Sewa Bot, Jasher, Instan Invite Memakai komponen bagian 14 (hero, segmented, ubin ikon, pill) + gaya khusus di bawah. ===================================================================================== */ html.tm-market .xv-sec-h{display:flex;align-items:center;gap:8px;margin:24px 2px 12px;font:800 1rem var(--font-d);color:var(--tm-ink)} html.tm-market .xv-sec-h .xv-i{color:var(--tm-link)} html.tm-market .xv-sec-h small{margin-left:auto;font:600 .76rem var(--font-b);color:var(--tm-mut)} html.tm-market .xv-tile svg{width:19px;height:19px} html.tm-market .xv-radio{position:absolute;top:12px;right:12px;width:20px;height:20px;border-radius:50%;border:2px solid #c3cfe3;display:grid;place-items:center;color:#fff;background:#fff;transition:background .25s,border-color .25s} html.tm-market .xv-radio .xv-i{transition:opacity .2s,transform .35s cubic-bezier(.34,1.36,.5,1)} html.tm-market .on > .xv-radio{background:var(--tm-link);border-color:var(--tm-link)} html.tm-market :not(.on) > .xv-radio .xv-i{opacity:0;transform:scale(.4)} html.tm-market .xv-cta{padding:14px 18px!important;font-size:.98rem!important;border-radius:14px!important;margin-top:8px} /* ---- Sewa Bot ---- */ html.tm-market #page-sewabot .rent-hero{background:#fff!important;border:1px solid var(--tm-line)!important;border-radius:24px!important;padding:20px 18px!important; box-shadow:0 14px 32px -26px rgba(13,59,143,.55)!important;color:var(--tm-ink)!important} html.tm-market .xv-rent-badge{display:inline-flex;align-items:center;gap:6px;padding:5px 11px;border-radius:999px;background:#eef4ff;color:var(--tm-link);font-size:.74rem;font-weight:800;margin-bottom:8px} html.tm-market #page-sewabot .rent-price{font:800 2.05rem var(--font-d)!important;color:var(--tm-ink)!important;letter-spacing:-.5px;margin:0 0 12px!important;background:none!important;-webkit-text-fill-color:currentColor!important} html.tm-market #page-sewabot .rent-price small{font:600 .86rem var(--font-b);color:var(--tm-mut)} html.tm-market #page-sewabot .rent-feats{display:grid!important;gap:10px;margin:0 0 18px!important;padding:14px!important;border-radius:16px!important;background:var(--tm-page)!important;border:0!important} html.tm-market #page-sewabot .rent-feats > div{display:flex;align-items:flex-start;gap:10px;font-size:.86rem;line-height:1.45;color:var(--tm-ink)!important;margin:0!important} html.tm-market .xv-ok{width:22px;height:22px;border-radius:50%;flex:0 0 auto;display:grid;place-items:center;background:#dcf3e6;color:var(--green)} html.tm-market .xv-ok.warn{background:#fff1d6;color:#b45309} html.tm-market .xv-lbl{margin:0 2px 8px;font-size:.76rem;font-weight:800;letter-spacing:.4px;text-transform:uppercase;color:var(--tm-mut)} html.tm-market #page-sewabot .rent-plat{display:grid!important;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:14px} html.tm-market #page-sewabot .rent-plat button{position:relative;display:flex!important;flex-direction:column;align-items:flex-start;gap:3px;text-align:left;padding:14px!important;border-radius:18px!important; border:1.5px solid var(--tm-line)!important;background:#fff!important;color:var(--tm-ink)!important;cursor:pointer;font-family:var(--font-b); transition:border-color .25s,box-shadow .25s,background .25s,transform .4s cubic-bezier(.34,1.36,.5,1)} html.tm-market #page-sewabot .rent-plat button.on{border-color:var(--tm-link)!important;background:#f5f8ff!important;box-shadow:0 14px 26px -20px var(--tm-link);transform:translateY(-2px)} html.tm-market #page-sewabot .rent-plat button:active{transform:scale(.97)} html.tm-market #page-sewabot .rent-plat b{font-size:.96rem} html.tm-market #page-sewabot .rent-plat small{font-size:.74rem;font-weight:500;color:var(--tm-mut);line-height:1.35} html.tm-market .xv-plat-ic{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;flex:0 0 auto;color:#fff;margin-bottom:6px} html.tm-market .xv-plat-ic.tg{background:linear-gradient(145deg,#3fb5e8,#1e8fc4)} html.tm-market .xv-plat-ic.wa{background:linear-gradient(145deg,#34d36b,#1ea34e)} html.tm-market #page-sewabot .wa-warn.xv-wa{display:flex;gap:9px;align-items:flex-start;margin:0 0 14px;padding:12px 14px!important;border-radius:14px!important; background:#f1fbf4!important;border:1px solid #c9ecd4!important;color:#1d5a34!important;font-size:.8rem;line-height:1.5;animation:xvRise .35s ease} html.tm-market #page-sewabot .wa-warn.xv-wa .xv-i{color:#1ea34e;margin-top:1px} html.tm-market #page-sewabot .wa-warn code{background:#fff;border:1px solid #c9ecd4;border-radius:6px;padding:1px 6px;color:#1d5a34} html.tm-market #myBotsWrap{margin-top:8px!important} html.tm-market .xv-bot{background:#fff!important;border:1px solid var(--tm-line)!important;border-radius:20px!important;padding:14px 16px!important;margin-bottom:10px;box-shadow:none!important;animation:xvRise .45s cubic-bezier(.32,.72,0,1) var(--d,0ms) backwards} html.tm-market .xv-bot-h{display:flex;align-items:center;gap:12px} html.tm-market .xv-bot-h .xv-plat-ic{margin:0} html.tm-market .xv-bot-t{flex:1;min-width:0} html.tm-market .xv-bot-t b{display:block;font-size:.95rem;color:var(--tm-ink);overflow-wrap:anywhere} html.tm-market .xv-bot-t span{font-size:.76rem;color:var(--tm-mut)} html.tm-market .xv-bot-stats{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px} html.tm-market .xv-bot-stats span{display:inline-flex;align-items:center;gap:5px;padding:5px 10px;border-radius:999px;background:var(--tm-page);font-size:.74rem;font-weight:700;color:var(--tm-ink)} html.tm-market .xv-bot-stats span.cy{background:#e9f6ff;color:#0b4a73} html.tm-market .xv-bot-act{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:12px} html.tm-market .xv-bot-act .btn{display:inline-flex!important;align-items:center;gap:0} html.tm-market .xv-del{margin-left:auto;width:38px;height:38px;border-radius:12px!important;border:1px solid #f5c9d1!important;background:#fff5f7!important;color:var(--red)!important;display:grid!important;place-items:center;cursor:pointer;padding:0!important} /* ---- Jasher ---- */ html.tm-market #page-jasher .jm-seg.xv-seg{margin-bottom:18px} html.tm-market #page-jasher .jm-seg .jm-ic{width:17px;height:17px;flex:0 0 auto} html.tm-market #page-jasher .jm-seg button{border:0!important;background:none!important;box-shadow:none!important} html.tm-market #page-jasher .jm-seg button.on{color:#fff!important} html.tm-market #page-jasher .jm-seg button{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:.84rem} @media(max-width:380px){html.tm-market #page-jasher .jm-seg .jm-ic{display:none}} html.tm-market #jasherPkgGrid{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px} @media(min-width:640px){html.tm-market #jasherPkgGrid{grid-template-columns:repeat(3,minmax(0,1fr))}} html.tm-market .xv-pkg{position:relative;display:flex!important;flex-direction:column;align-items:flex-start;gap:4px;text-align:left!important;padding:14px!important;margin:0!important;border-radius:18px!important; background:#fff!important;border:1.5px solid var(--tm-line)!important;box-shadow:none!important;cursor:pointer; transition:border-color .25s,box-shadow .25s,background .25s,transform .4s cubic-bezier(.34,1.36,.5,1)} html.tm-market .xv-pkg.xv-anim{animation:xvRise .45s cubic-bezier(.32,.72,0,1) var(--d,0ms) backwards} html.tm-market .xv-pkg:hover{border-color:#b7c6e2!important} html.tm-market .xv-pkg.on{border-color:var(--tm-link)!important;background:#f5f8ff!important;box-shadow:0 14px 26px -20px var(--tm-link)!important;transform:translateY(-2px)} html.tm-market .xv-pkg:focus-visible{outline:3px solid color-mix(in srgb,var(--tm-link) 45%,transparent);outline-offset:2px} html.tm-market .xv-pkg .xv-tile{margin-bottom:6px} html.tm-market .xv-pkg h3{margin:0!important;padding-right:22px;font:800 .95rem var(--font-d)!important;color:var(--tm-ink)!important;line-height:1.25} html.tm-market .xv-pkg .cat{display:block!important;font-size:.74rem!important;line-height:1.4;color:var(--tm-mut)!important;text-align:left!important;white-space:normal!important;overflow:visible!important;text-overflow:clip!important} html.tm-market .xv-pkg .cat svg{width:12px;height:12px;vertical-align:-2px} html.tm-market .xv-pkg-price{margin-top:auto;padding-top:8px;font:800 1.05rem var(--font-d);color:var(--tm-price)} html.tm-market #page-jasher .xv-drop{margin-top:2px} html.tm-market #jasherImgPrev:not(:empty){margin-top:12px} html.tm-market #jasherImgPrev img{border:1px solid var(--tm-line);border-radius:14px!important} html.tm-market #page-jasher .total-row{display:flex;align-items:center;justify-content:space-between;margin:16px 0 10px;padding:14px 16px;border-radius:16px;background:#fff;border:1px solid var(--tm-line)} html.tm-market #page-jasher .total-row .tt{font:800 1.3rem var(--font-d);color:var(--tm-price)} html.tm-market #jasherGo{padding:14px 18px!important;border-radius:14px!important;font-size:.98rem!important} html.tm-market #jasherHistList .order-card,html.tm-market #jmMyOrders .order-card{background:#fff!important;border:1px solid var(--tm-line)!important;border-radius:18px!important;padding:14px!important;margin-bottom:10px;box-shadow:none!important; animation:xvRise .45s cubic-bezier(.32,.72,0,1) backwards;transition:border-color .25s,transform .25s} html.tm-market #jasherHistList .order-card:hover,html.tm-market #jmMyOrders .order-card:hover{border-color:#b7c6e2!important;transform:translateY(-1px)} html.tm-market #jasherHistList .oc-top,html.tm-market #jmMyOrders .oc-top{display:flex;align-items:center;gap:8px;justify-content:space-between} html.tm-market #jasherHistList .oc-top b,html.tm-market #jmMyOrders .oc-top b{font-size:.92rem;color:var(--tm-ink)} html.tm-market #jasherManualWrap > div:first-child{padding:12px 14px;border-radius:14px;background:#fff7ed;border:1px solid #fbd9b8;color:#6b3a10!important;font-size:.82rem!important} html.tm-market #jmProdGrid{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px} @media(min-width:640px){html.tm-market #jmProdGrid{grid-template-columns:repeat(3,minmax(0,1fr))}} html.tm-market #jmProdGrid .jm-prod{margin:0!important;padding:0!important;overflow:hidden;border-radius:18px!important;background:#fff!important;border:1px solid var(--tm-line)!important;box-shadow:none!important;cursor:pointer; animation:xvRise .45s cubic-bezier(.32,.72,0,1) backwards;transition:transform .3s,box-shadow .3s} @media(hover:hover){html.tm-market #jmProdGrid .jm-prod:hover{transform:translateY(-3px);box-shadow:0 18px 30px -24px rgba(13,59,143,.6)!important}} html.tm-market #jmProdGrid .jm-prod .bn{aspect-ratio:16/9;display:grid;place-items:center;background:linear-gradient(135deg,#fff1e6,#ffe4ef);color:#db2777} html.tm-market #jmProdGrid .jm-prod .bn img{width:100%;height:100%;object-fit:cover} html.tm-market #jmProdGrid .jm-prod .bn svg{width:30px;height:30px} html.tm-market #jmProdGrid .jm-prod .bd{padding:12px} html.tm-market #jmProdGrid .jm-prod h3{font:800 .9rem var(--font-d)!important;color:var(--tm-ink)!important} html.tm-market #jmProdGrid .jm-prod .cat{font-size:.72rem!important;color:var(--tm-mut)!important} html.tm-market #jmProdGrid .jm-prod .now{color:var(--tm-price)!important;font-weight:800} /* ---- Instan Invite ---- */ html.tm-market #familyGrid{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px} @media(min-width:720px){html.tm-market #familyGrid{grid-template-columns:repeat(3,minmax(0,1fr))}} @media(min-width:1024px){html.tm-market #familyGrid{grid-template-columns:repeat(4,minmax(0,1fr))}} html.tm-market #familyGrid .xv-inv{display:flex!important;flex-direction:column;gap:6px;padding:14px!important;border-radius:20px!important;background:#fff!important;border:1px solid var(--tm-line)!important; box-shadow:0 12px 26px -24px rgba(13,59,143,.55)!important;animation:xvRise .45s cubic-bezier(.32,.72,0,1) var(--d,0ms) backwards;transition:transform .3s,box-shadow .3s;text-align:left!important} @media(hover:hover){html.tm-market #familyGrid .xv-inv:hover{transform:translateY(-3px);box-shadow:0 20px 34px -24px rgba(13,59,143,.6)!important}} html.tm-market .xv-inv-top{display:flex;align-items:flex-start;justify-content:space-between;gap:8px;margin-bottom:4px} html.tm-market .xv-inv-av{width:52px;height:52px;border-radius:16px;overflow:hidden;display:grid;place-items:center;flex:0 0 auto;font-size:1.5rem;color:#fff; background:linear-gradient(145deg,#7c5cff,#1a5fd8);box-shadow:0 10px 18px -12px #1a5fd8} html.tm-market .xv-inv-av img{width:100%;height:100%;object-fit:cover} html.tm-market #familyGrid .xv-inv h4{margin:0;font:800 .92rem var(--font-d);color:var(--tm-ink);line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.4em} html.tm-market .xv-inv-stock{display:flex;align-items:center;gap:6px;font-size:.74rem;font-weight:700;color:#0b7a42} html.tm-market .xv-inv-stock i{width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 0 0 rgba(14,143,78,.45)} html.tm-market .xv-inv-stock.off{color:var(--red)} html.tm-market .xv-inv-stock.off i{background:var(--red)} html.tm-market .xv-inv-foot{display:flex;flex-direction:column;align-items:stretch;gap:8px;margin-top:auto;padding-top:8px} html.tm-market .xv-inv-foot .btn{width:100%!important;justify-content:center} html.tm-market #familyGrid .xv-inv .nk-price{margin:0!important;font:800 1.02rem var(--font-d)!important;color:var(--tm-price)!important} html.tm-market #familyGrid .nk-card-off{opacity:.7} @media(prefers-reduced-motion:no-preference){ html.tm-market .page.on #myBotsWrap,html.tm-market .page.on #page-sewabot .rent-hero{animation:xvRise .55s cubic-bezier(.32,.72,0,1) .1s backwards} html.tm-market .xv-inv-stock:not(.off) i{animation:xvPulse 1.8s ease-out infinite} } @media(prefers-reduced-motion:reduce){ html.tm-market .xv-bot,html.tm-market .xv-pkg,html.tm-market #jmProdGrid .jm-prod,html.tm-market #familyGrid .xv-inv,html.tm-market #jasherHistList .order-card,html.tm-market #jmMyOrders .order-card{animation:none!important} } /* ===================================================================================== 17. [UPGRADE 2026-09-23] Helpbox AI pintar — isi pesan berformat, saran cepat, tombol aksi, kartu produk, indikator mengetik, tombol mulai baru ===================================================================================== */ html.tm-market #helpBox .hb-head{display:flex;align-items:center;gap:10px} html.tm-market .hb-reset{margin-left:auto;width:32px;height:32px;flex:0 0 auto;border-radius:10px;border:1px solid var(--tm-line);background:#fff;color:var(--tm-mut);display:grid;place-items:center;cursor:pointer;transition:color .2s,transform .35s cubic-bezier(.34,1.36,.5,1)} html.tm-market .hb-reset:hover{color:var(--tm-link)} html.tm-market .hb-reset:active{transform:rotate(-120deg) scale(.92)} html.tm-market #helpMsgs .hmsg.bot{white-space:normal} html.tm-market #helpMsgs .hmsg.bot p{margin:0 0 6px} html.tm-market #helpMsgs .hmsg.bot p:last-child{margin-bottom:0} html.tm-market #helpMsgs .hmsg.bot ol,html.tm-market #helpMsgs .hmsg.bot ul{margin:4px 0 8px;padding-left:20px} html.tm-market #helpMsgs .hmsg.bot li{margin:3px 0} html.tm-market #helpMsgs .hmsg.bot b{color:var(--tm-ink)} html.tm-market #helpMsgs .hmsg.bot code{background:#eef2fa;border-radius:6px;padding:1px 6px;font-size:.84em;color:var(--tm-blue)} html.tm-market #helpMsgs .hmsg.bot a{color:var(--tm-link);text-decoration:underline;word-break:break-all} html.tm-market .hb-chips{display:flex;flex-wrap:wrap;gap:6px;align-self:flex-start;max-width:100%;animation:xvRise .35s ease} html.tm-market .hb-chips button{border:1px solid #cfdcf3;background:#fff;color:var(--tm-link);border-radius:999px;padding:7px 12px;font:700 .77rem var(--font-b);cursor:pointer;transition:background .2s,border-color .2s,transform .2s} html.tm-market .hb-chips button:hover{background:#eef4ff;border-color:var(--tm-link)} html.tm-market .hb-chips button:active{transform:scale(.95)} html.tm-market .hb-acts{display:flex;flex-direction:column;gap:6px;align-self:flex-start;width:min(100%,310px);animation:xvRise .35s ease} html.tm-market .hb-act{display:flex;align-items:center;gap:8px;padding:9px 12px;border-radius:12px;border:1px solid #cfe0ff;background:#eef4ff;color:var(--tm-link);font:700 .8rem var(--font-b);cursor:pointer;text-align:left;transition:background .2s,transform .2s} html.tm-market .hb-act:hover{background:#e2ecff} html.tm-market .hb-act:active{transform:scale(.97)} html.tm-market .hb-act span{flex:1;min-width:0} html.tm-market .hb-act.admin{background:#fff8eb;border-color:#f3dcae;color:#8a4b06} html.tm-market .hb-act.done{background:#e7f6ee;border-color:#cdebd9;color:#0b7a42} html.tm-market .hb-act:disabled{opacity:.8;cursor:default} html.tm-market .hb-prod{display:flex;align-items:center;gap:10px;padding:8px 8px 8px 8px;border-radius:14px;border:1px solid var(--tm-line);background:#fff;cursor:pointer;text-align:left;font-family:var(--font-b);transition:border-color .2s,transform .2s,box-shadow .2s} html.tm-market .hb-prod:hover{border-color:#b7c6e2;box-shadow:0 10px 20px -18px rgba(13,59,143,.6)} html.tm-market .hb-prod:active{transform:scale(.98)} html.tm-market .hb-prod img,html.tm-market .hb-prod .ph{width:42px;height:42px;border-radius:11px;object-fit:cover;flex:0 0 auto;background:var(--tm-tile);display:grid;place-items:center;color:var(--tm-link)} html.tm-market .hb-prod > span{flex:1;min-width:0} html.tm-market .hb-prod b{display:block;font-size:.8rem;color:var(--tm-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} html.tm-market .hb-prod small{font-size:.72rem;color:var(--tm-mut)} html.tm-market .hb-prod small.pr{color:var(--tm-price);font-weight:800} html.tm-market .hb-prod em{font-style:normal;flex:0 0 auto;padding:6px 11px;border-radius:999px;background:var(--tm-link);color:#fff;font-size:.72rem;font-weight:800} html.tm-market .hb-prod.off em{background:#eef1f6;color:var(--tm-mut)} html.tm-market #helpMsgs .hmsg.typing.dots{display:inline-flex;align-items:center;gap:4px;padding:13px 15px;width:auto} html.tm-market #helpMsgs .hmsg.typing.dots span{width:7px;height:7px;border-radius:50%;background:#9fb0cc;animation:hbDot 1.2s ease-in-out infinite} html.tm-market #helpMsgs .hmsg.typing.dots span:nth-child(2){animation-delay:.15s} html.tm-market #helpMsgs .hmsg.typing.dots span:nth-child(3){animation-delay:.3s} @keyframes hbDot{0%,80%,100%{transform:translateY(0);opacity:.45}40%{transform:translateY(-4px);opacity:1}} @media(prefers-reduced-motion:reduce){ html.tm-market .hb-chips,html.tm-market .hb-acts{animation:none} html.tm-market #helpMsgs .hmsg.typing.dots span{animation:none;opacity:.8} }