/* ===== style ===== */
html {
color-scheme: light;
}
html[data-theme="dark"] {
color-scheme: dark;
}
:root {
--g1:var(--h0);
--pr:217,87,138;
--bl1:#ffc9dcaa;
--bl2:#f3c6e6aa;
--bl3:#d5efd2aa;
--bg:#fff5f8;
--card:#fffafc;
--ink:#43303a;
--mut:#9a7f89;
--pink:var(--h1);
--pink2:#fde0ea;
--mint:#e3f1e0;
--lav:#f8e6f0;
--peach:#ffe8dc;
--line:#f6d6e2;
--glass:rgba(255,250,252,.86);
--sh:0 10px 28px rgba(var(--pr),.16);
--b1:#ffd3e3aa;
--b2:#e3f1e0aa;
--b3:#f8dcecaa;
--bub:#dcf8c6;
--bubi:#143d1f;
--lily:.6;
box-sizing:border-box;
padding-top:env(safe-area-inset-top,0px)
}
@media (prefers-color-scheme:dark) {
:root:not([data-theme="light"]) {
--bg:#1c1318;
--card:#2a1d25;
--ink:#fbeef3;
--mut:#c0a3b0;
--pink2:#46273a;
--mint:#22382a;
--lav:#37283f;
--peach:#44301f;
--line:#4a3040;
--glass:rgba(42,29,37,.86);
--b1:rgba(var(--pr),.13);
--b2:#7fcf9a14;
--b3:#e86ea01a;
--bub:#0f4d2e;
--bubi:#eafff1;
--lily:.22
}
}
:root[data-theme="dark"] {
--bg:#1c1318;
--card:#2a1d25;
--ink:#fbeef3;
--mut:#c0a3b0;
--pink2:#46273a;
--mint:#22382a;
--lav:#37283f;
--peach:#44301f;
--line:#4a3040;
--glass:rgba(42,29,37,.86);
--b1:rgba(var(--pr),.13);
--b2:#7fcf9a14;
--b3:#e86ea01a;
--bub:#0f4d2e;
--bubi:#eafff1;
--lily:.22
}
html {
scroll-padding-top:env(safe-area-inset-top,0px);
scroll-behavior:smooth
}
* {
box-sizing:border-box;
-webkit-tap-highlight-color:transparent
}
body {
margin:0;
color:var(--ink);
background:var(--bg);
font:15px/1.55 "Nunito",system-ui,-apple-system,"Segoe UI",sans-serif;
min-height:100vh;
background-image:linear-gradient(transparent,transparent),linear-gradient(transparent,transparent),linear-gradient(transparent,transparent);
background-attachment:fixed
}
body::after {
content:"";
position:fixed;
inset:0;
z-index:-1;
pointer-events:none;
opacity:var(--lily);
background-image:url("data:image/svg+xml,"),url("data:image/svg+xml,");
background-repeat:no-repeat;
background-size:220px,160px;
background-position:calc(100% + 50px) -40px,-40px calc(100% + 30px)
}
.wrap {
max-width:1000px;
margin:0 auto;
padding:0 16px 120px
}
h1,h2,h3,h4,.btn,.tab,.chip,.ni,.qk,.fh {
font-family:"Fredoka","Nunito",system-ui,sans-serif
}
h2 {
margin:24px 0 6px;
font-size:22px;
font-weight:600;
display:inline-block;
background:linear-gradient(transparent 62%,var(--pink2) 62%);
padding:0 4px;
border-radius:4px
}
h3 {
margin:0;
font-weight:600
}
.mut,.cat {
color:var(--mut)
}
.cat {
font-size:12px
}
button {
font:inherit;
color:inherit
}
input,select,textarea {
width:100%;
font:inherit;
color:var(--ink);
background:var(--card);
border:1.5px solid var(--line);
border-radius:16px;
padding:10px 13px;
outline:none;
transition:border-color .2s,box-shadow .2s
}
input:focus,select:focus,textarea:focus {
border-color:var(--pink);
box-shadow:0 0 0 4px rgba(var(--pr),.13)
}
textarea {
resize:vertical
}
label {
font-size:12px;
font-weight:700;
color:var(--mut);
display:block;
margin:0 0 3px 4px
}
.f {
margin-bottom:12px
}
.row {
display:grid;
grid-template-columns:1fr 1fr;
gap:10px
}
/* buttons */
.btn {
display:inline-flex;
align-items:center;
justify-content:center;
gap:6px;
text-decoration:none;
background:linear-gradient(var(--pink),var(--pink));
color:#fff;
border:0;
border-radius:999px;
padding:10px 18px;
font-weight:600;
cursor:pointer;
box-shadow:0 6px 16px rgba(var(--pr),.32);
transition:transform .15s,box-shadow .15s,filter .15s
}
.btn:hover {
transform:translateY(-2px);
box-shadow:0 10px 20px rgba(var(--pr),.38)
}
.btn:active {
transform:scale(.96)
}
.btn.ghost {
background:var(--pink2);
color:var(--pink);
box-shadow:none
}
.btn.red {
background:linear-gradient(135deg,#ff8a80,#e5534b);
box-shadow:0 6px 14px rgba(229,83,75,.3)
}
.btn.sm {
padding:6px 13px;
font-size:12px
}
.btn.big {
display:flex;
width:100%;
padding:14px;
font-size:16px;
margin-top:6px
}
.btn.wago {
background:linear-gradient(135deg,#5eead4,#22c55e);
box-shadow:0 8px 18px rgba(34,197,94,.35)
}
.btn:disabled {
opacity:.5;
cursor:not-allowed;
transform:none
}
.btn.dirty {
background:linear-gradient(135deg,#ffd166,#ffb703);
color:#3a2a00;
box-shadow:0 6px 14px rgba(255,183,3,.4)
}
.pill {
display:inline-block;
background:var(--card);
color:var(--pink);
border:1px solid var(--line);
border-radius:999px;
padding:4px 12px;
font-size:12px;
font-weight:800;
box-shadow:0 3px 8px rgba(var(--pr),.1)
}
/* admin */
.adm {
display:none
}
.adm.on {
display:flex;
gap:8px;
flex-wrap:wrap;
justify-content:center;
position:sticky;
top:env(safe-area-inset-top,0px);
z-index:30;
background:var(--glass);
backdrop-filter:blur(12px);
-webkit-backdrop-filter:blur(12px);
border-bottom:1px solid var(--line);
padding:8px
}
/* header */
header.top {
display:flex;
justify-content:space-between;
align-items:center;
padding:14px 0 6px
}
.prof {
display:flex;
align-items:center;
gap:10px;
background:none;
border:0;
padding:0;
text-align:left;
cursor:pointer
}
.av {
width:46px;
height:46px;
border-radius:50%;
background:linear-gradient(var(--pink2),var(--pink2));
color:var(--pink);
display:grid;
place-items:center;
font-weight:800;
font-size:19px;
overflow:hidden;
position:relative;
flex:none;
box-shadow:0 6px 14px rgba(var(--pr),.22);
border:2px solid var(--card)
}
.av img {
width:100%;
height:100%;
object-fit:cover
}
.pn b {
display:block;
font-family:"Fredoka","Nunito",sans-serif;
font-size:18px;
font-weight:600;
line-height:1.1
}
.pn small {
color:var(--mut);
font-size:11px
}
.bell {
position:relative;
background:var(--card);
border:1.5px solid var(--line);
border-radius:18px;
width:46px;
height:46px;
font-size:19px;
cursor:pointer;
box-shadow:0 6px 14px rgba(var(--pr),.12);
transition:transform .15s
}
.bell:active {
transform:scale(.92)
}
.bell:hover {
animation:wiggle .5s
}
.dot {
position:absolute;
top:-4px;
right:-4px;
background:linear-gradient(var(--pink),var(--pink));
color:#fff;
font-style:normal;
font-size:10px;
font-weight:800;
border-radius:99px;
min-width:18px;
height:18px;
display:grid;
place-items:center;
padding:0 4px;
box-shadow:0 3px 8px rgba(var(--pr),.4)
}
.cam {
position:absolute;
inset:0;
background:#0007;
color:#fff;
font-style:normal;
font-size:14px;
display:grid;
place-items:center
}
body.edit .ic[data-act],body.edit .av[data-act] {
cursor:pointer
}
/* dock */
.dock {
position:fixed;
left:50%;
transform:translateX(-50%);
bottom:calc(10px + env(safe-area-inset-bottom,0px));
width:min(94vw,480px);
display:flex;
gap:2px;
padding:6px;
background:var(--glass);
backdrop-filter:blur(16px);
-webkit-backdrop-filter:blur(16px);
border:1px solid var(--line);
border-radius:30px;
box-shadow:0 14px 34px rgba(var(--pr),.28);
z-index:25
}
.ni {
position:relative;
flex:1;
border:0;
background:transparent;
border-radius:24px;
padding:6px 2px 5px;
display:flex;
flex-direction:column;
align-items:center;
cursor:pointer;
color:var(--mut);
transition:background .25s,color .25s,box-shadow .25s
}
.ni .e {
font-size:21px;
line-height:1.2;
transition:transform .25s
}
.ni small {
font-size:10px;
font-weight:500
}
.ni.on {
background:linear-gradient(var(--pink),var(--pink));
color:#fff;
box-shadow:0 6px 14px rgba(var(--pr),.42)
}
.ni.on .e {
transform:translateY(-1px) scale(1.15)
}
.ni .dot {
top:1px;
right:16%
}
/* tabs / chips */
.tabs {
display:flex;
gap:8px;
overflow-x:auto;
padding:8px 2px 10px;
scrollbar-width:none
}
.tabs::-webkit-scrollbar {
display:none
}
.tab {
border:1.5px solid var(--line);
background:var(--card);
border-radius:999px;
padding:7px 16px;
cursor:pointer;
white-space:nowrap;
font-weight:500;
transition:transform .15s,background .2s;
box-shadow:0 3px 8px rgba(var(--pr),.08)
}
.tab:active {
transform:scale(.95)
}
.tab.on {
background:linear-gradient(var(--pink),var(--pink));
border-color:transparent;
color:#fff;
box-shadow:0 6px 14px rgba(var(--pr),.35)
}
.page {
max-width:560px;
margin:0 auto;
animation:rise .35s ease both
}
.page.wide {
max-width:none
}
.srch {
margin:8px 0 2px
}
.srch input {
border-radius:999px;
padding:12px 18px;
box-shadow:0 6px 16px rgba(var(--pr),.1)
}
/* hero / banner */
.bwrap {
position:relative;
margin:6px 0 10px
}
.banner {
width:100%;
aspect-ratio:3/1;
object-fit:cover;
border-radius:26px;
display:block;
background:var(--pink2);
box-shadow:var(--sh)
}
.banner.def {
display:grid;
place-items:center;
text-align:center;
background:linear-gradient(var(--pink2),var(--pink2));
color:var(--h2);
padding:8px;
font-size:clamp(14px,3.6vw,22px)
}
.banner.def b {
font-family:"Fredoka",sans-serif;
font-size:clamp(18px,5vw,30px);
font-weight:600
}
.banner.def small {
opacity:.8;
font-weight:700
}
.bup {
position:absolute;
right:10px;
bottom:10px;
background:#000a;
color:#fff;
border:0;
border-radius:999px;
padding:7px 13px;
font-size:12px;
cursor:pointer;
backdrop-filter:blur(6px)
}
.bup.rm {
right:auto;
left:10px
}
.hero {
text-align:center;
padding:22px 14px 18px;
margin:8px 0;
border-radius:30px;
background:linear-gradient(var(--pink2),var(--pink2));
box-shadow:var(--sh);
position:relative;
overflow:hidden
}
.hero::before,.hero::after {
content:"🍓";
position:absolute;
font-size:30px;
opacity:.5;
animation:float 5s ease-in-out infinite
}
.hero::before {
left:10px;
top:8px
}
.hero::after {
content:"🍵";
right:12px;
bottom:10px;
animation-delay:-2s
}
.eyebrow {
letter-spacing:.14em;
font-size:11px;
color:var(--pink);
font-weight:800
}
.hero h1 {
font-size:clamp(28px,7vw,42px);
margin:6px 0;
font-weight:600
}
.hero p {
color:var(--mut);
margin:0 0 12px
}
.trust {
display:flex;
gap:7px;
justify-content:center;
flex-wrap:wrap
}
.cta {
display:flex;
gap:8px;
justify-content:center;
margin-top:14px;
flex-wrap:wrap
}
.quick {
display:grid;
grid-template-columns:repeat(4,1fr);
gap:10px;
margin:14px 0 4px
}
.qk {
border:0;
background:var(--card);
border-radius:22px;
padding:12px 4px;
font-size:12px;
font-weight:500;
cursor:pointer;
box-shadow:var(--sh);
transition:transform .15s;
border:1px solid var(--line)
}
.qk span {
display:grid;
place-items:center;
width:40px;
height:40px;
margin:0 auto 4px;
border-radius:15px;
font-size:20px;
background:var(--pink2)
}
.qk:nth-child(2) span {
background:var(--peach)
}
.qk:nth-child(3) span {
background:var(--lav)
}
.qk:nth-child(4) span {
background:var(--mint)
}
.qk:hover {
transform:translateY(-3px)
}
.qk:active {
transform:scale(.95)
}
.cats {
display:grid;
grid-template-columns:repeat(auto-fill,minmax(140px,1fr));
gap:12px
}
.ctile {
border:1px solid var(--line);
border-radius:24px;
padding:14px 10px;
text-align:center;
cursor:pointer;
box-shadow:var(--sh);
transition:transform .15s;
background:var(--card)
}
.ctile:nth-child(6n+1) {
background:var(--pink2)
}
.ctile:nth-child(6n+2) {
background:var(--peach)
}
.ctile:nth-child(6n+3) {
background:var(--mint)
}
.ctile:nth-child(6n+4) {
background:var(--lav)
}
.ctile:nth-child(6n+5) {
background:var(--pink2)
}
.ctile:nth-child(6n) {
background:var(--peach)
}
.ctile:hover {
transform:translateY(-4px) rotate(-1deg)
}
.ctile:active {
transform:scale(.95)
}
.ctile span {
font-size:28px;
display:grid;
place-items:center;
width:52px;
height:52px;
margin:0 auto 4px;
border-radius:50%;
background:var(--card);
box-shadow:0 4px 10px rgba(0,0,0,.06)
}
.ctile b {
display:block;
font-family:"Fredoka",sans-serif;
font-weight:600
}
.ctile small {
color:var(--mut)
}
/* cards */
.grid {
display:grid;
grid-template-columns:repeat(auto-fill,minmax(160px,1fr));
gap:12px
}
@media(max-width:420px) {
.grid {
grid-template-columns:repeat(2,1fr);
gap:10px
}
}
.card {
background:var(--card);
border:1px solid var(--line);
border-radius:24px;
padding:12px;
display:flex;
flex-direction:column;
gap:6px;
font-size:13px;
box-shadow:var(--sh);
transition:transform .2s,box-shadow .2s;
animation:rise .4s ease both
}
.card:hover {
transform:translateY(-3px);
box-shadow:0 16px 32px rgba(var(--pr),.22)
}
.card.out {
opacity:.6
}
.ph {
display:flex;
gap:8px;
align-items:center;
flex-wrap:wrap
}
.ic {
width:40px;
height:40px;
border-radius:15px;
background:var(--pink2);
display:grid;
place-items:center;
font-weight:800;
color:var(--pink);
font-size:13px;
overflow:hidden;
text-align:center;
flex:none;
position:relative;
box-shadow:0 4px 10px rgba(0,0,0,.08)
}
.ic.lg {
background:#fff;
padding:4px
}
.ic img {
width:100%;
height:100%;
object-fit:contain;
display:block
}
.card h3 {
font-size:14px;
line-height:1.2
}
.badge {
margin-left:auto;
font-size:10px;
background:linear-gradient(135deg,#86efac,#22c55e);
color:#fff;
border-radius:99px;
padding:2px 9px;
font-weight:700;
white-space:nowrap
}
.badge.out {
background:#aaa
}
.desc {
font-size:11px;
color:var(--mut);
line-height:1.35;
display:-webkit-box;
-webkit-line-clamp:3;
-webkit-box-orient:vertical;
overflow:hidden;
background:var(--pink2);
border-radius:12px;
padding:5px 8px
}
.card label {
font-size:10px
}
.card select {
padding:6px 10px;
font-size:12px;
border-radius:12px
}
.chips {
display:flex;
flex-wrap:wrap;
gap:5px;
margin-top:2px
}
.chip {
border:1.5px solid var(--line);
background:var(--bg);
border-radius:12px;
padding:3px 8px;
font-size:11px;
line-height:1.25;
cursor:pointer;
display:flex;
flex-direction:column;
align-items:center;
min-width:46px;
transition:transform .12s,background .2s
}
.chip:active {
transform:scale(.92)
}
.chip b {
font-size:10px;
color:var(--pink);
font-weight:600
}
.chip.on {
background:linear-gradient(var(--pink),var(--pink));
border-color:transparent;
color:#fff;
box-shadow:0 4px 10px rgba(var(--pr),.35)
}
.chip.on b {
color:#fff
}
.price {
font-size:17px;
font-weight:700;
font-family:"Fredoka",sans-serif;
color:var(--pink)
}
.price small {
font-size:10px;
color:var(--mut);
font-weight:500
}
.act {
display:flex;
gap:6px
}
.act .btn {
flex:1;
padding:8px 10px;
font-size:13px
}
.fv {
background:var(--pink2);
border:0;
border-radius:50%;
width:38px;
height:38px;
cursor:pointer;
font-size:16px;
transition:transform .15s;
flex:none
}
.fv:active {
transform:scale(1.3)
}
.ed {
display:flex;
gap:6px
}
.ed .btn {
flex:1;
padding:5px;
font-size:12px
}
/* boxes / forms */
.box {
background:var(--card);
border:1px solid var(--line);
border-radius:26px;
padding:16px;
margin:12px 0;
box-shadow:var(--sh)
}
.box.mini {
box-shadow:none;
background:var(--bg);
border-radius:20px;
padding:10px 12px
}
.fh {
font-weight:600;
margin:6px 0 8px;
color:var(--pink);
font-size:15px
}
.box .fh:not(:first-child) {
margin-top:16px
}
.ci {
display:flex;
justify-content:space-between;
gap:8px;
padding:9px 0;
border-bottom:1.5px dashed var(--line)
}
.ci.tot {
font-weight:700;
border:0;
font-size:17px;
font-family:"Fredoka",sans-serif
}
.ci button {
background:var(--pink2);
border:0;
color:#e5534b;
cursor:pointer;
font-size:12px;
width:26px;
height:26px;
border-radius:50%;
margin-left:6px
}
.rv p {
margin:6px 0
}
.rvh {
display:flex;
justify-content:space-between;
gap:8px
}
.st {
color:#f5a623;
letter-spacing:1px;
white-space:nowrap
}
.stars {
display:flex;
gap:4px
}
.stars button {
background:none;
border:0;
font-size:30px;
cursor:pointer;
color:#ddd;
padding:0;
transition:transform .15s
}
.stars button:hover {
transform:scale(1.2)
}
.stars button.on {
color:#f5a623
}
.nt {
display:flex;
gap:12px;
align-items:flex-start
}
.nt.new {
background:var(--pink2)
}
.nt i {
font-style:normal;
font-size:24px
}
.status {
display:inline-block;
font-size:11px;
font-weight:700;
border-radius:99px;
padding:3px 10px;
background:#ffe9b5;
color:#8a5a00
}
.status.ok {
background:#d6f0dc;
color:#2f6b3b
}
.row2 {
display:flex;
gap:8px;
flex-wrap:wrap;
margin-top:10px
}
.row2 .btn {
flex:1
}
.pbanner {
position:relative
}
.pav {
margin:-34px 0 0 16px;
width:76px;
height:76px;
border-radius:26px;
border:4px solid var(--bg);
background:var(--pink2);
display:grid;
place-items:center;
font-size:30px;
overflow:hidden;
color:var(--pink);
font-weight:800;
position:relative;
box-shadow:var(--sh)
}
.pav img {
width:100%;
height:100%;
object-fit:cover
}
.empty {
text-align:center;
padding:30px 14px;
color:var(--mut)
}
.empty p {
margin:6px 0 12px
}
/* photos */
.photos {
display:flex;
gap:10px;
flex-wrap:wrap
}
.ph1 {
position:relative;
width:84px;
height:84px;
border-radius:20px;
overflow:hidden;
box-shadow:var(--sh);
border:2px solid var(--card)
}
.ph1 img {
width:100%;
height:100%;
object-fit:cover;
display:block
}
.ph1 button {
position:absolute;
top:4px;
right:4px;
width:22px;
height:22px;
border-radius:50%;
border:0;
background:#000a;
color:#fff;
font-size:11px;
cursor:pointer
}
.addph {
width:84px;
height:84px;
border-radius:20px;
border:2px dashed var(--pink);
color:var(--pink);
display:grid;
place-items:center;
text-align:center;
cursor:pointer;
font-size:24px;
background:var(--pink2);
line-height:1.1;
transition:transform .15s
}
.addph:active {
transform:scale(.94)
}
.addph small {
display:block;
font-size:10px;
font-weight:700
}
/* footer */
footer {
margin:38px 0 10px;
text-align:center;
color:var(--mut);
font-size:13px
}
footer .fl {
display:flex;
gap:8px;
justify-content:center;
flex-wrap:wrap;
margin-bottom:14px
}
.vcnt {
display:inline-block;
margin:0 0 12px;
padding:6px 14px;
border-radius:999px;
background:var(--card);
border:1px solid var(--line);
font-size:12px;
font-weight:700;
color:var(--pink)
}
footer .fl button,footer .fl a {
background:var(--card);
border:1px solid var(--line);
border-radius:999px;
padding:7px 14px;
color:var(--pink);
font-weight:700;
font-size:12px;
text-decoration:none;
cursor:pointer;
box-shadow:0 3px 8px rgba(var(--pr),.1)
}
.bar {
display:none
}
/* sheet */
.modal {
position:fixed;
inset:0;
background:#2a141c88;
backdrop-filter:blur(3px);
display:none;
align-items:flex-end;
justify-content:center;
z-index:40
}
.modal.on {
display:flex
}
.sheet {
background:var(--card);
width:100%;
max-width:560px;
max-height:92%;
overflow:auto;
border-radius:30px 30px 0 0;
padding:14px 18px 22px;
animation:slide .3s ease both
}
.grab {
width:46px;
height:5px;
border-radius:9px;
background:var(--line);
margin:0 auto 12px
}
.sh {
font-family:"Fredoka",sans-serif;
font-size:21px;
font-weight:600;
margin:0
}
.wabub {
background:var(--bub);
color:var(--bubi);
border-radius:20px 20px 4px 20px;
padding:12px 14px;
white-space:pre-wrap;
font-size:12.5px;
line-height:1.45;
max-height:260px;
overflow:auto;
box-shadow:0 4px 10px rgba(0,0,0,.08);
word-break:break-word
}
@media(min-width:600px) {
.modal {
align-items:center
}
.sheet {
border-radius:30px
}
}
.toast {
position:fixed;
left:50%;
transform:translateX(-50%);
bottom:98px;
background:#43303aee;
color:#fff;
padding:10px 18px;
border-radius:999px;
font-size:13px;
font-weight:700;
display:none;
z-index:50;
max-width:90%;
backdrop-filter:blur(8px);
box-shadow:0 8px 20px rgba(0,0,0,.2)
}
/* motion */
@keyframes rise {
from {
opacity:0;
transform:translateY(12px)
}
to {
opacity:1;
transform:none
}
}
@keyframes slide {
from {
transform:translateY(40px);
opacity:0
}
to {
transform:none;
opacity:1
}
}
@keyframes float {
0%,100% {
transform:translateY(0) rotate(-6deg)
}
50% {
transform:translateY(-8px) rotate(6deg)
}
}
@keyframes wiggle {
0%,100% {
transform:rotate(0)
}
25% {
transform:rotate(-12deg)
}
75% {
transform:rotate(12deg)
}
}
@media(prefers-reduced-motion:reduce) {
* {
animation:none!important;
transition:none!important
}
}
/* ===== aesthetic v2 : lembut, bulat, tidak kaku ===== */
:root {
--sh:0 14px 34px rgba(var(--pr),.18)
}
body::before {
content:"";
position:fixed;
inset:0;
z-index:-1;
pointer-events:none;
background:linear-gradient(transparent,transparent),linear-gradient(transparent,transparent),linear-gradient(transparent,transparent);
filter:blur(34px);
animation:drift 14s ease-in-out infinite alternate
}
@keyframes drift {
to {
transform:translate(18px,-14px) scale(1.06)
}
}
@keyframes pop {
0% {
transform:scale(.8);
opacity:0
}
70% {
transform:scale(1.06)
}
100% {
transform:scale(1);
opacity:1
}
}
@keyframes glow {
0%,100% {
box-shadow:0 8px 18px rgba(34,197,94,.35)
}
50% {
box-shadow:0 8px 28px rgba(34,197,94,.65)
}
}
@keyframes shine {
from {
transform:translateX(-120%) skewX(-20deg)
}
to {
transform:translateX(260%) skewX(-20deg)
}
}
input,select {
border-radius:999px;
padding:11px 18px
}
textarea {
border-radius:26px;
padding:12px 18px
}
.btn {
position:relative;
overflow:hidden;
border-radius:999px;
letter-spacing:.01em
}
.btn:not(.ghost):not(.red):not(.dirty)::after {
content:"";
position:absolute;
top:0;
left:0;
width:40%;
height:100%;
background:linear-gradient(90deg,transparent,#ffffff66,transparent);
transform:translateX(-120%) skewX(-20deg)
}
.btn:hover::after {
animation:shine .8s ease
}
.btn:hover {
transform:translateY(-3px) scale(1.03)
}
.btn.wago {
animation:glow 2.4s ease-in-out infinite
}
.btn.big {
padding:15px;
font-size:16px
}
.pill {
background:linear-gradient(var(--pink2),var(--pink2));
border:0;
padding:5px 14px
}
.hero {
border-radius:46px 46px 46px 46px;
padding:30px 18px 24px;
background:linear-gradient(var(--pink2),var(--pink2))
}
.hero h1 {
background:linear-gradient(var(--pink),var(--pink));
-webkit-background-clip:text;
background-clip:text;
color:transparent
}
.banner {
border-radius:40px
}
.quick {
gap:6px
}
.qk {
background:transparent;
border:0;
box-shadow:none;
padding:6px 0
}
.qk span {
width:62px;
height:62px;
border-radius:50%;
font-size:26px;
box-shadow:0 10px 20px rgba(var(--pr),.18);
transition:transform .25s cubic-bezier(.3,1.6,.5,1)
}
.qk:hover span {
transform:scale(1.12) rotate(-6deg)
}
.qk:hover {
transform:none
}
.cats {
gap:14px
}
.ctile {
border:0;
border-radius:44px 30px 46px 32px;
padding:18px 10px;
transition:transform .3s cubic-bezier(.3,1.6,.5,1),border-radius .4s
}
.ctile:nth-child(even) {
border-radius:30px 46px 32px 44px
}
.ctile:hover {
transform:translateY(-6px) rotate(-1.5deg);
border-radius:46px
}
.ctile span {
width:60px;
height:60px
}
.grid {
gap:16px
}
.card {
border:0;
border-radius:36px 28px 38px 28px;
padding:16px;
background:linear-gradient(180deg,var(--card),var(--card)),linear-gradient(transparent,transparent);
transition:transform .3s cubic-bezier(.3,1.6,.5,1),box-shadow .3s
}
.card:nth-child(even) {
border-radius:28px 38px 28px 36px
}
.card:hover {
transform:translateY(-6px) rotate(-.6deg)
}
.ic {
border-radius:50%;
width:46px;
height:46px
}
.ic.lg {
box-shadow:0 6px 14px rgba(0,0,0,.08)
}
.desc {
border-radius:18px
}
.chip {
border-radius:999px;
padding:5px 12px;
flex-direction:row;
gap:5px;
align-items:baseline
}
.chip.on {
transform:scale(1.04)
}
.badge {
padding:3px 11px
}
.act .btn {
border-radius:999px
}
.fv {
width:42px;
height:42px;
background:var(--pink2)
}
.box {
border:0;
border-radius:34px;
padding:20px;
background:var(--glass);
backdrop-filter:blur(10px);
-webkit-backdrop-filter:blur(10px)
}
.box.mini {
border-radius:26px;
background:var(--bg)
}
.dock {
border-radius:999px;
padding:7px;
box-shadow:0 18px 40px rgba(var(--pr),.28)
}
.ni {
border-radius:999px;
transition:background .3s,transform .3s cubic-bezier(.3,1.6,.5,1)
}
.ni.on {
transform:translateY(-4px)
}
.tab {
border:0;
box-shadow:0 5px 12px rgba(var(--pr),.12)
}
.sheet {
border-radius:40px 40px 0 0
}
@media(min-width:600px) {
.sheet {
border-radius:40px
}
}
.wabub {
border-radius:26px 26px 6px 26px
}
.addph {
border-radius:50%;
animation:pop .4s ease both
}
.upl {
display:flex;
flex-direction:column;
align-items:center;
gap:2px;
text-align:center;
padding:22px 14px;
border:2px dashed var(--pink);
border-radius:34px;
background:linear-gradient(var(--pink2),var(--pink2));
color:var(--pink);
cursor:pointer;
transition:transform .25s cubic-bezier(.3,1.6,.5,1)
}
.upl:hover {
transform:scale(1.02)
}
.upl b {
font-family:"Fredoka",sans-serif;
font-size:16px
}
.upl small {
color:var(--mut)
}
.upl i {
font-style:normal;
font-size:34px
}
.ph1 {
border-radius:50% 40% 50% 40%/40% 50% 40% 50%
}
.okmark {
font-size:54px;
text-align:center;
animation:pop .5s ease both
}
.paidbtn {
margin-top:10px
}
.paidok {
width:72px;
height:72px;
border-radius:50%;
background:#2fa84f;
color:#fff;
font-size:42px;
font-weight:700;
line-height:72px;
text-align:center;
margin:6px auto 10px;
animation:pop .5s ease both;
box-shadow:0 0 0 8px rgba(47,168,79,.15)
}
.paidhi {
font-size:19px!important;
line-height:1.4
}
.paidsum {
margin-top:12px
}
.paidsum .ci {
display:flex;
justify-content:space-between;
gap:10px;
font-size:13px;
padding:4px 0
}
.bar {
position:fixed;
left:50%;
transform:translateX(-50%);
bottom:calc(86px + env(safe-area-inset-bottom,0px));
width:min(92vw,440px);
align-items:center;
justify-content:space-between;
gap:10px;
padding:7px 7px 7px 20px;
border-radius:999px;
background:linear-gradient(var(--pink),var(--pink));
color:#fff;
box-shadow:0 14px 30px rgba(var(--pr),.45);
z-index:29;
font-weight:700;
animation:pop .35s ease both
}
.bar .btn {
background:#fff;
color:var(--pink);
box-shadow:none
}
.toast {
bottom:150px
}
footer .fl button,footer .fl a {
border:0;
box-shadow:0 5px 12px rgba(var(--pr),.14)
}
.wainfo {
position:relative;
overflow:hidden;
margin:6px 0 14px;
padding:18px 18px 16px;
border-radius:34px 28px 36px 28px;
background:linear-gradient(var(--pink2),var(--pink2));
box-shadow:0 12px 26px rgba(34,197,94,.16);
text-align:center
}
.wainfo::before,.wainfo::after {
content:"✨";
position:absolute;
font-size:18px;
opacity:.7;
animation:float 4s ease-in-out infinite
}
.wainfo::before {
left:14px;
top:10px
}
.wainfo::after {
content:"🤍";
right:14px;
bottom:10px;
animation-delay:1.2s
}
.wainfo .wi {
width:64px;
height:64px;
margin:0 auto 8px;
border-radius:50%;
display:grid;
place-items:center;
font-size:30px;
background:linear-gradient(135deg,#5eead4,#22c55e);
box-shadow:0 10px 22px rgba(34,197,94,.4);
animation:glow 2.4s ease-in-out infinite
}
.wainfo b {
display:block;
font-family:"Fredoka",sans-serif;
font-size:17px;
font-weight:600;
color:#2f6b3b
}
.wainfo p {
margin:4px 0 10px;
font-size:12.5px;
color:var(--mut)
}
.wainfo .stp {
display:flex;
gap:6px;
justify-content:center;
flex-wrap:wrap
}
.wainfo .stp span {
background:var(--card);
border-radius:999px;
padding:5px 12px;
font-size:11.5px;
font-weight:700;
color:var(--pink);
box-shadow:0 4px 10px rgba(var(--pr),.12)
}
@media(prefers-color-scheme:dark) {
:root:not([data-theme="light"]) .wainfo {
background:linear-gradient(135deg,#1f3a2a,#45262f 55%,#32284a)
}
:root:not([data-theme="light"]) .wainfo b {
color:#9be3b0
}
}
:root[data-theme="dark"] .wainfo {
background:linear-gradient(135deg,#1f3a2a,#45262f 55%,#32284a)
}
:root[data-theme="dark"] .wainfo b {
color:#9be3b0
}
.bar {
bottom:calc(92px + env(safe-area-inset-bottom,0px));
z-index:35;
cursor:pointer;
padding:8px 10px 8px 12px;
justify-content:flex-start;
gap:12px;
width:min(92vw,440px)
}
.bar .bi {
position:relative;
width:46px;
height:46px;
border-radius:50%;
background:#ffffff33;
display:grid;
place-items:center;
font-size:24px;
flex:none
}
.bar .bi i {
position:absolute;
top:-4px;
right:-4px;
min-width:20px;
height:20px;
border-radius:99px;
background:#fff;
color:var(--pink);
font-style:normal;
font-size:11px;
font-weight:800;
display:grid;
place-items:center
}
.bar .bt {
display:flex;
flex-direction:column;
line-height:1.2;
text-align:left;
flex:1
}
.bar .bt b {
font-family:"Fredoka",sans-serif;
font-size:14px;
font-weight:600
}
.bar .bt small {
font-size:15px;
font-weight:800;
opacity:.95
}
.bar .bgo {
background:#fff;
color:var(--pink);
border-radius:999px;
padding:9px 16px;
font-family:"Fredoka",sans-serif;
font-weight:600;
font-size:13px;
flex:none
}
.bar:active {
transform:translateX(-50%) scale(.97)
}
.toast {
bottom:160px
}
.desc {
cursor:pointer
}
.desc.open {
display:block;
-webkit-line-clamp:unset
}
/* ===== smooth & mudah dipakai ===== */
html {
-webkit-text-size-adjust:100%
}
button,a,.card,.ni,.tab,.chip {
touch-action:manipulation
}
.card {
content-visibility:auto;
contain-intrinsic-size:auto 340px
}
.tabs {
position:sticky;
top:env(safe-area-inset-top,0px);
z-index:20;
margin:0 -4px;
padding:8px 6px 10px;
background:var(--glass);
backdrop-filter:blur(12px);
-webkit-backdrop-filter:blur(12px);
border-radius:0 0 28px 28px
}
body.edit .tabs {
top:calc(60px + env(safe-area-inset-top,0px))
}
.tab,.chip,.btn,.qk,.ctile,.ni,.fv,.rb,.lk {
transition:transform .22s cubic-bezier(.3,1.5,.5,1),background .25s,box-shadow .25s,opacity .2s
}
.btn.added {
animation:pop .45s ease
}
.page {
animation:rise .32s cubic-bezier(.2,.8,.3,1) both
}
.qris {
display:flex;
flex-direction:column;
gap:2px;
padding:12px 18px;
border-radius:26px;
background:linear-gradient(var(--pink2),var(--pink2));
margin-bottom:12px
}
.qris b {
font-family:"Fredoka",sans-serif;
font-size:17px;
color:var(--pink)
}
.qris small {
color:var(--mut)
}
.rbtn {
display:grid;
grid-template-columns:1fr 1fr;
gap:8px;
margin-top:12px
}
.rb {
display:flex;
align-items:center;
justify-content:center;
gap:6px;
border:0;
cursor:pointer;
border-radius:999px;
padding:11px 8px;
font-family:"Fredoka",sans-serif;
font-weight:600;
font-size:13px;
color:var(--pink);
background:var(--pink2);
box-shadow:0 5px 12px rgba(var(--pr),.14)
}
.rb i {
font-style:normal;
font-size:16px
}
.rb:hover {
transform:translateY(-2px)
}
.rb:active {
transform:scale(.94)
}
.rb.red {
color:#e5534b;
background:#ffe3e0
}
.rb.on {
background:#d6f0dc;
color:#2f6b3b;
box-shadow:none;
cursor:default
}
.rb:disabled:hover {
transform:none
}
.wl {
display:block;
text-align:center;
margin-top:10px;
padding:11px;
border-radius:999px;
background:linear-gradient(135deg,#5eead4,#22c55e);
color:#fff;
text-decoration:none;
font-family:"Fredoka",sans-serif;
font-weight:600;
font-size:13px;
box-shadow:0 6px 14px rgba(34,197,94,.3)
}
.lkbox {
display:grid;
gap:10px;
margin:10px 0 14px
}
.lk {
display:flex;
align-items:center;
gap:12px;
padding:14px 16px;
border-radius:30px 24px 30px 24px;
text-decoration:none;
color:var(--ink);
box-shadow:var(--sh)
}
.lk.g {
background:linear-gradient(var(--pink2),var(--pink2))
}
.lk.p {
background:linear-gradient(var(--pink2),var(--pink2))
}
.lk i {
font-style:normal;
font-size:26px;
width:48px;
height:48px;
border-radius:50%;
display:grid;
place-items:center;
background:var(--card);
box-shadow:0 5px 12px rgba(0,0,0,.08);
flex:none
}
.lk span {
display:flex;
flex-direction:column;
line-height:1.25
}
.lk b {
font-family:"Fredoka",sans-serif;
font-size:15px
}
.lk small {
color:var(--mut);
font-size:12px
}
.lk:hover {
transform:translateY(-3px)
}
.lk:active {
transform:scale(.97)
}
@media(prefers-color-scheme:dark) {
:root:not([data-theme="light"]) .lk.g,:root:not([data-theme="light"]) .lk.p {
background:var(--card)
}
}
:root[data-theme="dark"] .lk.g,:root[data-theme="dark"] .lk.p {
background:var(--card)
}
.gar {
font-size:13px;
line-height:1.7
}
.gar .fh:first-child {
margin-top:0
}
/* ===== palet warna ===== */
@media(prefers-color-scheme:dark) {
:root[data-pal]:not([data-theme="light"]) {
--bg:#1c1318;
--card:#2a1d25;
--ink:#fbeef3;
--mut:#c0a3b0;
--pink2:#46273a;
--mint:#22382a;
--lav:#37283f;
--peach:#44301f;
--line:#4a3040;
--glass:rgba(42,29,37,.86)
}
}
:root[data-pal][data-theme="dark"] {
--bg:#1c1318;
--card:#2a1d25;
--ink:#fbeef3;
--mut:#c0a3b0;
--pink2:#46273a;
--mint:#22382a;
--lav:#37283f;
--peach:#44301f;
--line:#4a3040;
--glass:rgba(42,29,37,.86)
}
.pals {
display:grid;
grid-template-columns:1fr 1fr;
gap:8px
}
.pal {
display:flex;
align-items:center;
gap:8px;
border:2px solid var(--line);
background:var(--card);
border-radius:999px;
padding:6px 12px 6px 6px;
cursor:pointer;
text-align:left
}
.pal span {
width:30px;
height:30px;
border-radius:50%;
flex:none;
background:linear-gradient(135deg,var(--c1) 50%,var(--c2) 50%);
box-shadow:0 3px 8px rgba(0,0,0,.15)
}
.pal b {
font-family:"Fredoka",sans-serif;
font-size:12px;
font-weight:600;
line-height:1.15
}
.pal.on {
border-color:var(--pink);
background:var(--pink2)
}
.hs {
margin:14px auto 6px;
font-family:"Fredoka",sans-serif;
font-size:15px;
line-height:1.4;
font-weight:600;
background:linear-gradient(var(--pink),var(--pink));
-webkit-background-clip:text;
background-clip:text;
color:transparent;
text-align:center
}
/* ===== kartu katalog kecil ===== */
.grid {
grid-template-columns:repeat(auto-fill,minmax(150px,1fr));
gap:12px
}
@media(max-width:600px) {
.grid {
grid-template-columns:repeat(2,minmax(0,1fr));
gap:9px
}
}
.card {
min-width:0
}
.card select {
min-width:0;
text-overflow:ellipsis
}
.card h3 {
overflow-wrap:anywhere
}
.card {
padding:11px;
gap:5px;
border-radius:24px 20px 26px 20px;
font-size:12px;
contain-intrinsic-size:auto 270px
}
.card:nth-child(even) {
border-radius:20px 24px 20px 26px
}
.card:hover {
transform:translateY(-3px)
}
.ic {
width:38px;
height:38px
}
.card h3 {
font-size:13px
}
.card .cat {
font-size:11px
}
.badge {
font-size:9px;
padding:2px 8px
}
.desc {
font-size:10.5px;
padding:4px 8px;
-webkit-line-clamp:2;
border-radius:14px
}
.card label {
font-size:9.5px;
margin-bottom:1px
}
.card select {
padding:5px 10px;
font-size:11.5px
}
.chips {
gap:4px
}
.chip {
padding:2px 8px;
font-size:10px;
min-width:0
}
.chip b {
font-size:10px
}
.price {
font-size:15px
}
.act .btn {
padding:7px 8px;
font-size:12px
}
.fv {
width:34px;
height:34px;
font-size:14px
}
.ed .btn {
padding:4px;
font-size:11px
}
/* ===== tombol 3D seperti nyata ===== */
:root {
--pd:color-mix(in srgb,var(--pink) 70%,#5a1230)
}
@keyframes glow3d {
0%,100% {
box-shadow:0 5px 0 #15803d,0 9px 18px rgba(34,197,94,.35),inset 0 2px 0 rgba(255,255,255,.5)
}
50% {
box-shadow:0 5px 0 #15803d,0 10px 30px rgba(34,197,94,.7),inset 0 2px 0 rgba(255,255,255,.5)
}
}
.btn {
border:2px solid rgba(255,255,255,.6);
box-shadow:0 5px 0 var(--pd),0 10px 18px rgba(var(--pr),.35),inset 0 2px 0 rgba(255,255,255,.55);
text-shadow:0 1px 1px rgba(0,0,0,.18)
}
.btn:hover {
transform:translateY(-2px);
box-shadow:0 7px 0 var(--pd),0 14px 22px rgba(var(--pr),.38),inset 0 2px 0 rgba(255,255,255,.55)
}
.btn:active {
transform:translateY(4px) scale(.99);
box-shadow:0 1px 0 var(--pd),0 3px 8px rgba(var(--pr),.3),inset 0 2px 0 rgba(255,255,255,.35)
}
.btn.ghost {
background:var(--card);
color:var(--pink);
text-shadow:none;
border:2px solid var(--pink);
box-shadow:0 5px 0 rgba(var(--pr),.5),0 9px 16px rgba(var(--pr),.16)
}
.btn.ghost:hover {
box-shadow:0 7px 0 rgba(var(--pr),.5),0 12px 20px rgba(var(--pr),.2)
}
.btn.ghost:active {
box-shadow:0 1px 0 rgba(var(--pr),.5)
}
.btn.red {
background:linear-gradient(#ff8a80,#e5534b);
color:#fff;
box-shadow:0 5px 0 #b3342d,0 9px 16px rgba(229,83,75,.35),inset 0 2px 0 rgba(255,255,255,.45)
}
.btn.wago,.wl {
background:linear-gradient(#5eead4,#22c55e);
border:2px solid rgba(255,255,255,.6);
box-shadow:0 5px 0 #15803d,0 9px 18px rgba(34,197,94,.35),inset 0 2px 0 rgba(255,255,255,.5);
text-shadow:0 1px 1px rgba(0,0,0,.2)
}
.btn.wago {
animation:glow3d 2.4s ease-in-out infinite
}
.wl:active {
transform:translateY(4px);
box-shadow:0 1px 0 #15803d
}
.rb {
border:2px solid var(--pink);
background:var(--card);
box-shadow:0 4px 0 rgba(var(--pr),.5)
}
.rb:active {
transform:translateY(3px);
box-shadow:0 1px 0 rgba(var(--pr),.5)
}
.rb.red {
border-color:#e5534b;
background:#fff0ee;
box-shadow:0 4px 0 #e5534b88
}
.rb.on {
border-color:#7fcf9a;
box-shadow:0 4px 0 #7fcf9a88
}
.tab {
border:2px solid var(--line);
box-shadow:0 4px 0 rgba(var(--pr),.22)
}
.tab.on {
border-color:var(--pink);
box-shadow:0 4px 0 var(--pd)
}
.chip.on {
box-shadow:0 2px 0 var(--pd)
}
.qk span {
border:2px solid #fff;
box-shadow:0 5px 0 rgba(var(--pr),.35),0 10px 16px rgba(var(--pr),.2)
}
.qk:active span {
transform:translateY(3px);
box-shadow:0 1px 0 rgba(var(--pr),.35)
}
.fv,.bell {
border:2px solid var(--line);
box-shadow:0 4px 0 rgba(var(--pr),.28)
}
.fv:active,.bell:active {
transform:translateY(3px);
box-shadow:0 1px 0 rgba(var(--pr),.28)
}
.lk {
border:2px solid #fff;
box-shadow:0 5px 0 rgba(var(--pr),.25),0 10px 16px rgba(var(--pr),.12)
}
.lk:active {
transform:translateY(3px);
box-shadow:0 1px 0 rgba(var(--pr),.25)
}
.hbtns {
display:flex;
gap:10px;
align-items:center
}
.pals.one {
grid-template-columns:1fr
}
.qris {
align-items:center;
text-align:center;
gap:6px
}
.qrimg {
display:block;
max-width:230px;
width:100%;
height:auto;
margin:6px auto;
padding:10px;
background:#fff;
border-radius:22px;
box-shadow:0 5px 0 rgba(var(--pr),.3),0 10px 18px rgba(0,0,0,.08)
}
.qrph {
width:150px;
height:150px;
border-radius:22px;
border:3px dashed var(--pink);
display:grid;
place-items:center;
font-family:"Fredoka",sans-serif;
font-size:26px;
color:var(--pink);
background:#fff9
}
/* ===== profil ala Twitter, bio, logo manager ===== */
.top .prof {
min-width:0;
flex:1;
overflow:hidden
}
.pn {
min-width:0
}
.bio1 {
display:block;
max-width:100%;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap
}
.pav {
border-radius:50%;
width:88px;
height:88px;
margin:-44px 0 0 16px;
border-width:5px
}
.bio {
margin:4px 0 12px;
padding:12px 16px;
border-radius:26px;
background:var(--glass);
box-shadow:var(--sh);
white-space:pre-line;
overflow-wrap:anywhere;
font-size:14px;
line-height:1.7;
text-align:center
}
.bio .btn {
display:block;
margin:8px auto 0
}
.lgl {
max-height:52vh;
overflow:auto;
display:flex;
flex-direction:column;
gap:8px;
margin-top:4px;
padding:4px 2px 8px
}
.lgr {
display:flex;
align-items:center;
gap:10px;
padding:8px 10px;
border-radius:22px;
background:var(--bg)
}
.lgr b {
flex:1;
font-size:13px;
min-width:0;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap
}
.lgr .btn {
padding:6px 12px;
font-size:12px;
flex:none
}
.adm.on {
flex-wrap:nowrap;
overflow-x:auto;
justify-content:flex-start;
-webkit-overflow-scrolling:touch;
scrollbar-width:none;
padding-bottom:12px
}
.adm.on::-webkit-scrollbar {
display:none
}
.adm .btn {
flex:none;
white-space:nowrap;
padding:8px 14px;
font-size:12px
}
.hdrup {
width:100%;
aspect-ratio:3/1;
min-height:120px;
border:3px dashed var(--pink);
border-radius:32px;
background:linear-gradient(var(--pink2),var(--pink2));
color:var(--pink);
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
gap:1px;
cursor:pointer;
padding:8px;
text-align:center;
transition:transform .25s cubic-bezier(.3,1.5,.5,1),background .25s
}
.hdrup:hover {
transform:scale(1.015)
}
.hdrup:active {
transform:scale(.98)
}
.hdrup i {
font-style:normal;
font-size:30px;
line-height:1
}
.hdrup b {
font-family:"Fredoka",sans-serif;
font-size:18px;
font-weight:600
}
.hdrup small {
color:var(--mut);
font-size:11.5px;
font-weight:700
}
.hdrup span {
margin-top:5px;
background:var(--pink);
color:#fff;
border-radius:999px;
padding:4px 14px;
font-size:11.5px;
font-weight:800;
box-shadow:0 3px 0 var(--pd)
}
.qtot {
font-family:"Fredoka",sans-serif;
font-size:15px;
color:var(--ink)
}
.qtot b {
color:var(--pink);
font-size:22px
}
.qrup {
width:100%;
border:3px dashed var(--pink);
border-radius:30px;
background:linear-gradient(var(--pink2),var(--pink2));
color:var(--pink);
display:flex;
flex-direction:column;
align-items:center;
gap:2px;
padding:20px 12px;
cursor:pointer;
text-align:center
}
.qrup i {
font-style:normal;
font-size:32px
}
.qrup b {
font-family:"Fredoka",sans-serif;
font-size:17px;
font-weight:600
}
.qrup small {
color:var(--mut);
font-size:11.5px;
font-weight:700
}
.qrup span {
margin-top:6px;
background:var(--pink);
color:#fff;
border-radius:999px;
padding:4px 14px;
font-size:11.5px;
font-weight:800;
box-shadow:0 3px 0 var(--pd)
}
.qst {
font-size:11.5px;
font-weight:800;
border-radius:999px;
padding:4px 12px;
margin:4px 0
}
.qst.ok {
background:#d6f0dc;
color:#2f6b3b
}
.qst.warn {
background:#fff0c9;
color:#8a5a00
}
/* ===== smooth & colorful v2 ===== */
:root {
--blue:#8ecbff;
--green:#7fdcb0;
--purple:#b9a2f0;
--yellow:#ffd966;
--ease:cubic-bezier(.22,1,.36,1)
}
:root[data-pal]:not([data-theme="dark"]) {
--b2:#cfe9ffaa;
--b3:#e6dcffaa;
--bl2:#cfe9ffaa;
--bl3:#d2f3e1aa
}
.tab,.chip,.btn,.qk,.ctile,.ni,.fv,.rb,.lk,.pill,button {
transition:transform .38s var(--ease),box-shadow .38s var(--ease),background .38s var(--ease),color .3s,border-color .3s,opacity .3s!important
}
.btn {
background:linear-gradient(var(--pink),var(--pink));
background-size:140% 140%;
background-position:0 50%
}
.btn:hover {
transform:translateY(-2px) scale(1.02);
background-position:100% 50%
}
.btn:active {
transform:scale(.97);
transition-duration:.12s!important
}
.btn.wago {
background:linear-gradient(135deg,var(--green),var(--blue))
}
.btn.ghost {
background:var(--pink2)
}
.tab:nth-child(5n+1).on,.tab:nth-child(5n+1):hover {
background:#fde0ea
}
.tab:nth-child(5n+2).on,.tab:nth-child(5n+2):hover {
background:#d8ecff
}
.tab:nth-child(5n+3).on,.tab:nth-child(5n+3):hover {
background:#d9f5e6
}
.tab:nth-child(5n+4).on,.tab:nth-child(5n+4):hover {
background:#e8e0ff
}
.tab:nth-child(5n+5).on,.tab:nth-child(5n+5):hover {
background:#fff1b8
}
.tab:hover,.chip:hover,.lk:hover {
transform:translateY(-2px)
}
h2 {
background:linear-gradient(transparent 62%,#e8e0ff 62%)
}
.lk.g {
background:linear-gradient(var(--pink2),var(--pink2))
}
.lk.p {
background:linear-gradient(var(--pink2),var(--pink2))
}
.row.r3 {
grid-template-columns:1fr 1fr 1.3fr;
gap:8px
}
.row.r3 .btn {
padding:9px 6px;
font-size:12px;
text-align:center
}
.ckn {
background:var(--peach);
font-weight:700;
border:1.5px dashed var(--pink)
}
.ckn a {
color:var(--pink)
}
.card .ph {
flex-direction:column;
align-items:flex-start;
flex-wrap:nowrap;
gap:7px;
position:relative;
width:100%
}
.card .ph>div:not(.ic) {
width:100%;
min-width:0
}
.card .ph .badge {
position:absolute;
top:0;
right:0;
margin:0
}
.card .ph .cat {
margin-top:2px
}
.card .act {
margin-top:auto
}
.tabs,body.edit .tabs {
position:static;
flex-wrap:wrap;
overflow:visible;
gap:8px;
margin:0;
padding:8px 2px 6px;
background:none;
backdrop-filter:none;
-webkit-backdrop-filter:none;
border-radius:0
}
.tabs .tab {
padding:6px 13px;
font-size:13px
}
.tab.tab[data-cat].on,.tab.on,.tab.on:hover {
background:linear-gradient(var(--pink),var(--pink))!important;
color:#fff!important;
font-weight:700;
border-color:#fff!important;
box-shadow:0 8px 18px rgba(var(--pr),.45)!important;
transform:scale(1.05)
}
/* tombol Pilih & favorit */
.act .btn {
padding:12px 10px;
font-size:15px;
border:2px solid #ffffff99;
background:linear-gradient(var(--pink),var(--pink));
box-shadow:0 8px 22px rgba(var(--pr),.32);
transition:transform .45s var(--ease),box-shadow .45s var(--ease),filter .3s!important
}
.act .btn:hover {
transform:translateY(-3px);
box-shadow:0 14px 28px rgba(var(--pr),.4);
filter:brightness(1.05)
}
.act .btn:active {
transform:scale(.95);
box-shadow:0 4px 12px rgba(var(--pr),.3);
transition-duration:.15s!important
}
.fv {
width:46px;
height:46px;
font-size:19px;
transition:transform .4s var(--ease),background .3s,box-shadow .4s var(--ease)!important
}
.fv:hover {
transform:scale(1.1);
box-shadow:0 6px 16px rgba(var(--pr),.25)
}
.fv:active {
transform:scale(.88)
}
.ckn select {
width:100%
}
/* semua tombol smooth */
.btn,.tab,.qk,.ctile,.chip,.lk,.pal,footer .fl button,footer .fl a,.bgo,.wl {
transition:transform .45s var(--ease),box-shadow .45s var(--ease),background .35s,filter .3s,border-color .3s!important
}
.btn.ghost,.btn.red,.btn.wago,.btn.dirty {
border:2px solid #ffffff99
}
.btn.ghost {
background:linear-gradient(var(--pink2),var(--pink2));
box-shadow:0 6px 16px rgba(var(--pr),.16)
}
.btn.wago {
box-shadow:0 8px 20px rgba(34,160,120,.3)
}
.btn:hover,.qk:hover,.ctile:hover,footer .fl button:hover,footer .fl a:hover {
transform:translateY(-3px);
filter:brightness(1.04)
}
.btn:active,.tab:active,.qk:active,.ctile:active,.chip:active,.lk:active,footer .fl button:active,footer .fl a:active {
transform:scale(.95)!important;
transition-duration:.15s!important
}
.tab,.qk,.ctile {
border:2px solid #ffffff99;
box-shadow:0 6px 16px rgba(var(--pr),.14)
}
.tab.on {
box-shadow:0 8px 20px rgba(var(--pr),.28)
}
.ni {
transition:background .4s var(--ease),transform .45s var(--ease),color .3s!important
}
/* ===== semua tombol = gaya Pilih ===== */
.btn,.btn.ghost,.btn.sm,.btn.big,.wl {
background:linear-gradient(var(--pink),var(--pink));
color:#fff;
border:2px solid #ffffff99;
box-shadow:0 8px 22px rgba(var(--pr),.32);
border-radius:999px;
font-weight:600
}
.btn.red {
background:linear-gradient(135deg,#ff9a90,#e5534b);
box-shadow:0 8px 20px rgba(229,83,75,.3)
}
.btn.wago {
background:linear-gradient(135deg,var(--green),var(--blue));
box-shadow:0 8px 20px rgba(34,160,120,.3)
}
.btn.dirty {
background:linear-gradient(135deg,#ffe38a,#ffc233);
color:#3a2a00
}
.btn.ghost:hover,.wl:hover {
transform:translateY(-3px);
box-shadow:0 14px 28px rgba(var(--pr),.4)
}
.qk,.pal,footer .fl button,footer .fl a,.stars button {
transition:transform .45s var(--ease),box-shadow .45s var(--ease),background .35s,color .3s!important
}
.qk {
background:linear-gradient(var(--pink2),var(--pink2));
border-radius:22px;
box-shadow:0 8px 20px rgba(var(--pr),.18)
}
.pal {
border:2px solid #ffffff99;
box-shadow:0 8px 20px rgba(var(--pr),.16)
}
.pal:hover {
transform:translateY(-3px)
}
.pal:active {
transform:scale(.96)
}
.stars button {
background:none!important;
box-shadow:none!important;
border:0!important;
color:#ddd
}
.stars button.on {
color:#f5a623
}
.stars button:hover {
transform:scale(1.18)
}
input,select,textarea,.box,.nt,.rv,.ci {
transition:border-color .35s var(--ease),box-shadow .35s var(--ease),background .35s
}
/* warna kategori seragam (beranda & katalog) */
[data-cat="All"] {
--cc:var(--h0)
}
[data-cat="Streaming"] {
--cc:#8ecbff
}
[data-cat="Music"] {
--cc:#7fdcb0
}
[data-cat="Editing"] {
--cc:#b9a2f0
}
[data-cat="Education"] {
--cc:#ffd966
}
[data-cat="Fun"] {
--cc:var(--h3)
}
[data-cat="Short Drama"] {
--cc:#a9d8ff
}
[data-cat="AI Needs"] {
--cc:#cdb6f5
}
[data-cat="Lainnya"] {
--cc:#a6e8c5
}
.tab.tab[data-cat],.ctile.ctile[data-cat] {
background:color-mix(in srgb,var(--cc) 42%,var(--card));
border:2px solid #ffffff99;
box-shadow:0 6px 16px color-mix(in srgb,var(--cc) 45%,transparent)
}
.tab.tab[data-cat].on,.tab.tab[data-cat]:hover,.ctile.ctile[data-cat]:hover {
background:color-mix(in srgb,var(--cc) 75%,var(--card));
box-shadow:0 10px 22px color-mix(in srgb,var(--cc) 65%,transparent)
}
/* ===== smooth final: tanpa bayangan keras ===== */
.btn,.btn.ghost,.btn.sm,.btn.big,.wl {
border:0;
text-shadow:none;
box-shadow:0 8px 22px rgba(var(--pr),.32)
}
.btn.red {
border:0;
box-shadow:0 8px 20px rgba(229,83,75,.3)
}
.btn.wago,.wl {
border:0;
box-shadow:0 8px 20px rgba(34,160,120,.3);
animation:none;
background:linear-gradient(135deg,var(--green),var(--blue))
}
.bell,.fv {
background:linear-gradient(var(--pink2),var(--pink2));
border:0;
box-shadow:0 8px 20px rgba(var(--pr),.2);
transition:transform .45s var(--ease),box-shadow .45s var(--ease),background .35s!important
}
.bell:hover,.fv:hover {
animation:none;
transform:translateY(-3px) scale(1.05);
box-shadow:0 12px 26px rgba(var(--pr),.3)
}
.bell:active,.fv:active {
transform:scale(.92);
box-shadow:0 4px 12px rgba(var(--pr),.2);
transition-duration:.15s!important
}
.qk {
background:transparent;
box-shadow:none;
border:0
}
.qk span {
border:0;
box-shadow:0 8px 20px rgba(var(--pr),.2);
transition:transform .45s var(--ease),box-shadow .45s var(--ease)!important
}
.qk:hover span {
transform:translateY(-4px) scale(1.06);
box-shadow:0 14px 28px rgba(var(--pr),.3)
}
.qk:active span {
transform:scale(.92);
transition-duration:.15s!important
}
.qk:hover,.qk:active {
transform:none!important
}
.tab,.tab.on,.rb,.rb.red,.rb.on {
box-shadow:0 6px 16px rgba(var(--pr),.16)
}
.lk {
border:0;
box-shadow:0 8px 20px rgba(var(--pr),.15)
}
.hdrup span,.qrup span {
box-shadow:0 6px 14px rgba(var(--pr),.25)
}
footer,footer * {
text-align:center
}
footer h4 {
font-family:"Fredoka",sans-serif;
margin:10px 0 4px
}
footer p {
margin:6px auto;
max-width:520px
}
.hs {
margin:8px 0
}
/* tema Orchid Blush (foto anggrek) */
.stats {
display:grid;
grid-template-columns:1fr 1fr;
gap:10px;
margin:10px 0
}
.st1 {
margin:0!important;
text-align:center;
padding:14px 8px!important
}
.st1 b {
display:block;
font-family:"Fredoka",sans-serif;
font-size:22px;
color:var(--pink)
}
.st1 span {
font-size:12px;
font-weight:700;
opacity:.75
}
.tgrid {
display:grid;
grid-template-columns:repeat(2,1fr);
gap:10px;
margin:10px 0
}
.tcard {
margin:0;
background:var(--card);
border:1px solid var(--line);
border-radius:20px;
overflow:hidden;
box-shadow:var(--sh)
}
.tcard img {
width:100%;
aspect-ratio:3/4;
object-fit:cover;
display:block
}
.tcard figcaption {
padding:8px 10px;
font-size:12px;
font-weight:700
}
.acc {
background:var(--card);
border:1px solid var(--line);
border-radius:22px;
margin:10px 0;
box-shadow:var(--sh);
overflow:hidden
}
.acc summary {
cursor:pointer;
padding:14px 16px;
font-weight:800;
list-style:none;
display:flex;
justify-content:space-between;
align-items:center
}
.acc summary::-webkit-details-marker {
display:none
}
.acc summary::after {
content:"＋";
color:var(--pink)
}
.acc[open] summary::after {
content:"－"
}
.accb {
padding:0 16px 14px;
font-size:14px;
line-height:1.55
}
.accl {
margin:0;
padding-left:18px
}
.accl li {
margin:5px 0
}
.qa {
margin:8px 0
}
.qa b {
display:block
}
:root[data-pal="pink"] {
--pink:#d83177;
--g1:#d83177;
--pr:216,49,119;
--bg:#ffe6f0;
--pink2:#f9bcd6;
--mint:#f2e1d9;
--lav:#f6d3ee;
--peach:#fbc9d3;
--line:#f2aecb;
--ink:#482835;
--mut:#937682;
--b1:#f9bcd6aa;
--b2:#f2e1d9aa;
--b3:#f8e2f6aa;
--bl1:#f68eb9aa;
--bl2:#f8e2f6aa;
--bl3:#f2e1d9aa
}
body::after {
display:none!important
}
.cats {
grid-template-columns:repeat(auto-fill,minmax(92px,1fr))!important;
gap:8px!important
}
.ctile.ctile {
padding:8px 4px!important;
border-radius:18px!important
}
.ctile span {
width:36px!important;
height:36px!important;
font-size:19px!important;
margin-bottom:2px!important
}
.ctile b {
font-size:clamp(11px,3vw,13px)!important;
line-height:1.2
}
.ctile small {
font-size:10px!important
}
.hero .fe {
position:absolute;
font-size:26px;
opacity:.6;
pointer-events:none;
animation:float 5s ease-in-out infinite
}
.hero .e1 {
right:14px;
top:10px;
animation-delay:-1s
}
.hero .e2 {
left:14px;
bottom:10px;
animation-delay:-3s
}
.hero .e3 {
left:42%;
top:4px;
font-size:20px;
animation-delay:-2s
}
.hero .e4 {
right:30%;
bottom:6px;
font-size:20px;
animation-delay:-4s
}
.hdr {
position:relative;
margin:8px 0;
border-radius:24px;
overflow:hidden;
box-shadow:var(--sh)
}
.hdr img {
width:100%;
display:block
}
.srch {
display:flex;
align-items:center;
gap:8px;
background:var(--card);
border:2px solid var(--pink);
border-radius:999px;
padding:6px 14px;
margin:12px 0 6px;
box-shadow:0 6px 16px rgba(var(--pr),.2)
}
.srch input {
flex:1;
border:0;
outline:0;
background:transparent;
font:inherit;
font-size:14px;
color:var(--ink);
min-width:0;
padding:6px 0
}
.srch span {
font-size:18px
}
.tags {
display:flex;
gap:6px;
flex-wrap:wrap;
margin:6px 0
}
.hqs {
display:flex;
flex-direction:column;
gap:6px;
margin:6px 0
}
.hqi {
display:flex;
align-items:center;
gap:10px;
border:1px solid var(--line);
background:var(--card);
border-radius:18px;
padding:8px 12px;
font:inherit;
font-weight:700;
cursor:pointer;
color:var(--ink);
text-align:left
}
.hqi span {
display:grid;
place-items:center;
width:30px;
height:30px;
border-radius:10px;
background:var(--pink2);
overflow:hidden
}
.hqi img {
width:100%;
height:100%;
object-fit:cover
}
.quick {
grid-template-columns:1fr 1fr!important;
gap:10px!important
}
.qk.qk {
display:flex!important;
align-items:center;
justify-content:center;
gap:8px;
padding:11px 10px!important;
border-radius:999px!important;
background:var(--pink)!important;
color:#fff!important;
font-size:14px!important;
font-weight:700!important;
border:0!important;
box-shadow:0 6px 16px rgba(var(--pr),.35)!important
}
.qk.qk span {
margin:0!important;
width:30px!important;
height:30px!important;
border-radius:50%!important;
background:#fff!important;
font-size:16px!important
}
.xl {
display:inline-grid;
place-items:center;
width:28px;
height:28px;
border-radius:50%;
background:#111;
vertical-align:middle;
margin-left:4px
}
.tgrid .rv {
margin:0!important;
padding:12px!important;
border-radius:20px!important;
font-size:13px
}
.tgrid .rv p {
margin:6px 0
}
.hero {
border:3px solid var(--pink)!important;
box-shadow:none!important;
border-radius:30px!important;
padding-left:34px!important;
padding-right:34px!important
}
.hero h1 {
background:none!important;
color:var(--pink)!important;
-webkit-text-fill-color:var(--pink)!important
}
.lkbox {
gap:8px!important
}
.lk.lk {
background:var(--card)!important;
border:1px solid var(--line);
border-radius:22px!important;
padding:14px 16px!important;
box-shadow:var(--sh);
font-weight:700
}
.lk.lk::after {
content:"›";
margin-left:auto;
color:var(--pink);
font-size:24px;
font-weight:700
}
.lk i {
display:grid;
place-items:center;
width:36px;
height:36px;
border-radius:12px;
background:var(--pink2);
font-style:normal;
overflow:hidden
}
.lk small {
display:block;
font-weight:500;
opacity:.7
}
#nlg {
position:fixed;
left:10px;
bottom:10px;
z-index:50;
border:0;
border-radius:50%;
width:34px;
height:34px;
background:var(--card);
box-shadow:var(--sh);
opacity:.55;
cursor:pointer;
font-size:15px
}
.hero {
background:var(--card)!important
}
.trust .pill.pill {
background:linear-gradient(135deg,color-mix(in srgb,var(--pink) 45%,#fff),var(--pink))!important;
color:#fff!important;
font-weight:700;
border:0!important;
box-shadow:0 3px 8px rgba(var(--pr),.3)
}
.hero>*:not(.fe) {
position:relative;
z-index:2
}
.hero .fe {
font-size:24px!important;
opacity:1!important;
filter:saturate(1.7) contrast(1.1);
z-index:0;
animation-duration:4s!important
}
.hero .e3 {
display:none!important
}
.hero::before,.hero::after {
opacity:1!important;
font-size:24px!important;
filter:saturate(1.7) contrast(1.1);
z-index:0
}
.cacc {
background:var(--pink2);
border-radius:18px;
padding:0 12px
}
.cacc summary {
cursor:pointer;
font-weight:700;
padding:9px 0;
font-size:13px
}
.cacc ul {
margin:0 0 10px;
padding-left:18px;
font-size:12px;
line-height:1.5
}
.cacc li {
margin:3px 0
}
.ps-h {
display:flex;
align-items:center;
gap:12px;
margin-bottom:10px
}
.ps-h .ic {
flex:none
}
.ps-h h3 {
margin:0;
font-size:22px
}
.ps-h small {
color:var(--mut);
font-weight:700
}
.ps-r {
margin-left:auto;
display:flex;
gap:8px
}
.ps-b {
width:40px;
height:40px;
border-radius:50%;
border:0;
background:var(--card);
box-shadow:var(--sh);
font-size:17px;
cursor:pointer;
color:var(--ink)
}
.ps-tabs {
display:flex;
background:var(--pink2);
border-radius:999px;
padding:5px;
gap:4px;
margin:8px 0
}
.ps-tabs button {
flex:1;
border:0;
background:transparent;
border-radius:999px;
padding:11px 6px;
font:inherit;
font-weight:800;
color:var(--mut);
cursor:pointer
}
.ps-tabs button.on {
background:#fff;
color:var(--ink);
box-shadow:var(--sh)
}
.ps-vars {
display:flex;
gap:8px;
flex-wrap:wrap;
margin:10px 0
}
.ps-vars button {
border:2px dashed var(--line);
background:#fff;
border-radius:999px;
padding:8px 14px;
font:inherit;
font-weight:800;
cursor:pointer;
color:var(--ink)
}
.ps-vars button.on {
border-style:solid;
border-color:var(--pink);
color:var(--pink)
}
.ps-pl {
display:grid;
grid-template-columns:1fr 1fr;
gap:10px;
margin:10px 0
}
.ps-pl button {
text-align:left;
border:2px solid var(--line);
background:#fff;
border-radius:22px;
padding:12px 14px;
font:inherit;
cursor:pointer;
color:var(--ink)
}
.ps-pl button.on {
border-color:var(--pink);
background:var(--pink2)
}
.ps-pl small {
display:block;
color:var(--mut);
font-weight:600
}
.ps-pl b {
font-size:17px
}
.cacc {
margin:8px 0
}
button.wl.inv {
border:0;
font:inherit;
font-weight:700;
cursor:pointer;
width:100%;
background:var(--pink)!important;
color:#fff!important;
border-radius:16px;
padding:11px
}
button.wl.inv.off {
background:var(--line)!important;
color:var(--mut)!important;
font-weight:600
}
.qlinks {
display:grid;
grid-template-columns:repeat(2,1fr);
gap:8px;
margin:10px 0
}
.ql {
display:flex;
align-items:center;
justify-content:center;
gap:7px;
padding:7px 6px;
border-radius:999px;
background:var(--pink);
color:#fff;
text-decoration:none;
font-weight:700;
font-size:12.5px;
font-family:"Fredoka","Nunito",sans-serif;
box-shadow:0 6px 14px rgba(var(--pr),.25);
border:0
}
.ql i {
font-style:normal;
display:grid;
place-items:center;
width:28px;
height:28px;
border-radius:50%;
background:#fff;
font-size:15px;
flex:none
}
.ql:active {
transform:scale(.96)
}
.ost {
font-weight:800
}
.ost.on {
color:#1fa463
}
.ost.off {
color:var(--h4)
}
.tedit .et {
outline:1px dashed color-mix(in srgb,var(--pink) 55%,transparent);
outline-offset:2px;
border-radius:4px;
cursor:text;
-webkit-user-select:text;
user-select:text
}
.tedit .et:focus {
outline:2px solid var(--pink);
background:color-mix(in srgb,var(--pink) 10%,transparent)
}
.stats .st1 {
display:flex!important;
flex-direction:column;
align-items:center;
justify-content:center;
gap:2px
}
.stats .st1 b {
line-height:1.1;
margin:0
}
.stats .st1 span {
display:block;
line-height:1.2;
margin:0
}
.stats .st1 span::first-letter {
text-transform:uppercase
}
.tags {
justify-content:space-between
}
@media(min-width:701px) {
.tags {
justify-content:flex-start
}
}
.xpr {
margin:2px 0 8px;
font-size:12px;
font-weight:700;
border-radius:14px;
padding:8px 10px;
background:#e3f6e8;
color:#2f6b3b
}
.xpr.soon {
background:#fff0c9;
color:#8a5a00
}
.xpr.warn {
background:#ffe0cc;
color:#a4400f
}
.xpr.end {
background:#fde0e0;
color:var(--h5)
}
.xpr .bar {
height:6px;
border-radius:99px;
background:rgba(0,0,0,.1);
margin-top:6px;
overflow:hidden
}
.xpr .bar i {
display:block;
height:100%;
background:currentColor;
border-radius:99px
}
.cal {
background:var(--card);
border:1px solid var(--line);
border-radius:18px;
box-shadow:var(--sh);
padding:8px 10px;
margin:8px auto;
max-width:340px
}
.cal .ch {
display:flex;
align-items:center;
justify-content:space-between;
gap:6px;
margin-bottom:4px
}
.cal .ch b {
font-family:"Fredoka",sans-serif;
font-size:14px;
text-align:center;
flex:1
}
.cal .cb {
border:0;
background:var(--pink2);
color:var(--pink);
min-width:28px;
height:28px;
border-radius:99px;
font-size:16px;
font-weight:800;
cursor:pointer;
line-height:1;
padding:0 8px
}
.cal .cg {
display:grid;
grid-template-columns:repeat(7,1fr);
gap:3px;
text-align:center
}
.cal .cw {
font-size:10px;
font-weight:800;
color:var(--mut)
}
.cal .cd {
height:28px;
display:grid;
place-items:center;
border-radius:9px;
font-size:12px;
font-weight:700
}
.cal .cd.o {
box-shadow:inset 0 0 0 2px var(--pink)
}
.cal .cd.x {
background:#ffc83d;
color:#5a3b00
}
.cal .cd.e {
background:#e5484d;
color:#fff
}
.cal .cd.t {
background:var(--pink);
color:#fff;
box-shadow:0 3px 8px rgba(var(--pr),.35)
}
.cal .cl {
margin-top:8px;
display:grid;
gap:4px
}
.cal .ev {
font-size:11.5px;
display:flex;
gap:6px;
align-items:center;
line-height:1.3
}
.cal .tg {
flex:none;
font-size:10px;
font-weight:800;
padding:2px 7px;
border-radius:99px;
color:#fff;
background:var(--pink)
}
.cal .tg.x {
background:#ffc83d;
color:#5a3b00
}
.cal .tg.e {
background:#e5484d
}
.cal .lg {
display:flex;
flex-wrap:wrap;
gap:4px 10px;
font-size:10.5px;
color:var(--ink);
margin-top:8px;
padding-top:6px;
border-top:1px dashed var(--line)
}
.cal .lg span {
display:inline-flex;
align-items:center;
gap:4px
}
.cal .sw {
display:inline-block;
width:12px;
height:12px;
border-radius:4px;
background:var(--pink)
}
.cal .sw.o {
background:transparent;
box-shadow:inset 0 0 0 2px var(--pink)
}
.cal .sw.x {
background:#ffc83d
}
.cal .sw.e {
background:#e5484d
}
/* sheet "pesanan terkirim": besar tapi otomatis muat satu layar (tanpa scroll), ada jeda di atas */
#modBody.post {
padding:10px 16px calc(14px + env(safe-area-inset-bottom,0px));
max-height:calc(100% - 56px);
overflow:hidden
}
#modBody.post .grab {
margin-bottom:6px;
height:4px
}
#modBody.post .okmark {
font-size:40px;
line-height:1.1;
animation:none
}
#modBody.post h3.sh {
font-size:20px;
margin:4px 0
}
#modBody.post p.cat {
font-size:13px;
line-height:1.35;
margin:3px 0
}
#modBody.post .hs {
font-size:14px;
line-height:1.35;
margin:6px auto
}
#modBody.post .qris {
padding:10px 14px;
gap:2px;
margin:6px 0 8px;
border-radius:22px
}
#modBody.post .qrimg {
max-width:min(215px,34vh);
padding:8px;
margin:2px auto;
border-radius:18px
}
#modBody.post .qtot {
font-size:14px
}
#modBody.post .qtot b {
font-size:22px
}
#modBody.post .qris b {
font-size:15px
}
#modBody.post .qris small {
font-size:11.5px;
line-height:1.35
}
#modBody.post .btn.big {
padding:13px;
font-size:15.5px;
margin-top:6px
}
#modBody.post .row2 {
margin-top:8px;
flex-wrap:nowrap
}
#modBody.post .row2 .btn {
padding:12px 6px;
font-size:14px
}
#modBody.post .pz {
transform-origin:top center
}
/* keranjang & checkout: ringkas, minim scroll */
.page.v-keranjang h2,.page.v-checkout h2 {
margin:8px 0 2px!important;
font-size:18px!important
}
.page.v-keranjang .box,.page.v-checkout .box {
padding:10px 12px!important;
margin:8px 0!important;
border-radius:20px!important
}
.page.v-keranjang .fh,.page.v-checkout .fh {
font-size:13px!important;
margin:0 0 4px!important
}
.page.v-keranjang .ci,.page.v-checkout .ci {
padding:5px 0!important;
font-size:13px;
gap:6px
}
.page.v-keranjang .ci.tot,.page.v-checkout .ci.tot {
font-size:14.5px!important;
padding-top:6px!important
}
.page.v-keranjang .ci button,.page.v-checkout .ci button {
width:22px;
height:22px;
font-size:11px
}
.page.v-keranjang .cat,.page.v-checkout .cat {
font-size:11px!important;
line-height:1.3
}
.page.v-keranjang .f,.page.v-checkout .f {
margin-bottom:6px!important
}
.page.v-keranjang .f label,.page.v-checkout .f label {
font-size:11.5px;
margin:0 0 2px 4px
}
.page.v-keranjang input,.page.v-checkout input,.page.v-keranjang select,.page.v-checkout select {
padding:7px 14px!important;
font-size:13.5px!important
}
.page.v-checkout textarea {
padding:8px 14px!important;
font-size:13.5px!important;
border-radius:18px!important
}
.page.v-keranjang .row,.page.v-checkout .row {
gap:8px
}
.page.v-keranjang .btn,.page.v-checkout .btn {
padding:7px 12px!important;
font-size:12.5px!important
}
.page.v-keranjang .btn.big,.page.v-checkout .btn.big {
padding:10px!important;
font-size:14px!important;
margin-top:4px
}
.page.v-keranjang .r3,.page.v-checkout .r3 {
gap:6px
}
.page.v-checkout .ckn {
font-size:12px!important;
line-height:1.35
}
.page.v-checkout .ckn input {
margin-top:2px
}
.page.v-keranjang .r3 {
display:flex!important;
flex-wrap:nowrap;
gap:6px
}
/* favorit: samakan ukuran dengan keranjang */
.page.v-favorit h2 {
margin:8px 0 2px!important;
font-size:18px!important
}
.page.v-favorit .mut {
font-size:12px!important;
line-height:1.3
}
.page.v-favorit .box {
padding:10px 12px!important;
margin:8px 0!important;
border-radius:20px!important
}
.page.v-favorit .box.empty div {
font-size:24px!important;
line-height:1.2
}
.page.v-favorit .box.empty p {
font-size:12.5px;
line-height:1.35;
margin:4px 0 8px
}
.page.v-favorit .cat {
font-size:11px!important
}
.page.v-favorit .btn {
padding:9px 16px!important;
font-size:14px!important
}
.page.v-favorit .card .act .btn {
padding:12px 10px!important;
font-size:15px!important
}
/* katalog & riwayat: samakan dengan keranjang/favorit */
.page.v-katalog h2,.page.v-riwayat h2,.page.v-keranjang h2,.page.v-checkout h2,.page.v-favorit h2 {
font-size:18px!important;
line-height:1.3!important
}
.page.v-katalog h2,.page.v-riwayat h2 {
margin:8px 0 2px!important;
font-size:18px!important
}
.page.v-katalog .mut,.page.v-riwayat .mut {
font-size:12px!important;
line-height:1.3
}
.page.v-katalog .srch {
margin:6px 0
}
.page.v-katalog .srch input {
padding:7px 14px!important;
font-size:13.5px!important
}
.page.v-katalog .tabs {
gap:8px!important;
padding:8px 0 6px!important;
margin:0!important
}
.page.v-katalog .tab {
flex:1 1 auto;
text-align:center;
padding:8px 12px!important;
font-size:14.5px!important
}
.page.v-katalog .tab.on {
transform:none!important
}
.page.v-riwayat .box {
padding:10px 12px!important;
margin:8px 0!important;
border-radius:20px!important
}
.page.v-riwayat .box.empty div {
font-size:24px!important;
line-height:1.2
}
.page.v-riwayat .box.empty p {
font-size:12.5px;
line-height:1.35;
margin:4px 0 8px
}
.page.v-riwayat h3 {
font-size:15px!important;
margin:12px 0 0!important
}
.page.v-riwayat .ci {
padding:5px 0!important;
font-size:13px;
gap:6px
}
.page.v-riwayat .ci.tot {
font-size:14.5px!important;
padding-top:6px!important
}
.page.v-riwayat .cat {
font-size:11px!important;
line-height:1.3
}
.page.v-riwayat .rvh b {
font-size:13.5px
}
.page.v-riwayat .btn {
padding:7px 12px!important;
font-size:12.5px!important
}
.page.v-riwayat .btn.big {
padding:10px!important;
font-size:14px!important;
margin-top:8px!important
}
.page.v-riwayat .rbtn {
gap:6px;
margin-top:8px
}
.page.v-riwayat .rb {
padding:7px 6px!important;
font-size:12px!important;
box-shadow:0 3px 0 rgba(var(--pr),.5)!important
}
.page.v-riwayat .rb i {
font-size:14px
}
.page.v-riwayat .wl {
padding:8px!important;
font-size:12px!important;
margin-top:6px!important
}
.page.v-riwayat .rb,.page.v-riwayat .rb.red,.page.v-riwayat .rb.on {
box-shadow:none!important
}
.page.v-riwayat .rb:active {
transform:scale(.96)!important
}
.page.v-riwayat .wl.inv.off {
font-weight:800!important
}
.page.v-keranjang .r3 .btn {
flex:1 1 auto;
min-width:0;
white-space:nowrap;
padding:9px 6px!important;
font-size:12px!important
}
.snk {
border:2px dashed #e5484d!important;
background:#fff0f0!important
}
.snk .snkh {
font-weight:800;
font-size:13.5px;
color:#c0262d;
line-height:1.4
}
.snk .accl {
margin:6px 0 0
}
.snk .accl li {
font-size:12.5px;
margin:3px 0;
line-height:1.4;
color:#5a1b1f
}
.page.v-riwayat .ocek input {
padding:7px 14px!important;
font-size:13.5px!important
}
/* ===== performa & kehalusan ===== */
*,*::before,*::after {
-webkit-backdrop-filter:none!important;
backdrop-filter:none!important
}
body::before {
animation:none!important
}
.btn.wago {
animation:none!important
}
.card,.grid .card {
animation:none!important;
transition:transform .2s ease!important;
contain-intrinsic-size:auto 225px
}
.card:hover {
box-shadow:var(--sh)!important
}
@media(hover:none) {
.card:hover {
transform:none!important
}
}
button,footer .fl a,.bgo,.wl,.tab,.ql,.rb {
transition:transform .22s cubic-bezier(.3,1.4,.5,1),box-shadow .22s ease,filter .2s ease,opacity .2s ease,background-color .2s ease,border-color .2s ease,color .2s ease!important
}
.btn:active,.tab:active,.ql:active,.rb:active {
transition-duration:.12s!important
}
button,a,summary,.tab,.card,.ql,input,select {
touch-action:manipulation;
-webkit-tap-highlight-color:transparent
}
.dock {
will-change:transform
}
.hero::before,.hero::after,.hero .fe {
will-change:transform
}
@media(prefers-reduced-motion:reduce) {
*,*::before,*::after {
animation:none!important;
transition:none!important;
scroll-behavior:auto!important
}
}
.idc {
display:inline-flex;
align-items:center;
gap:6px;
flex-wrap:wrap;
min-width:0
}
.cpy {
border:0;
background:var(--pink2);
color:var(--pink);
font-weight:800;
font-size:11px;
padding:3px 9px;
border-radius:99px;
cursor:pointer;
line-height:1.3;
box-shadow:none
}
.cpy:active {
transform:scale(.94)
}
.oidrow {
text-align:center;
font-size:13px;
margin:4px 0 2px;
display:flex;
justify-content:center;
align-items:center;
gap:6px;
flex-wrap:wrap
}
.page.v-garansi .row input {
padding:10px 12px;
font-size:13.5px;
min-width:0
}
.page.v-garansi .row .f {
min-width:0
}
.page.v-riwayat .rvh {
align-items:flex-start;
gap:8px
}
.page.v-riwayat .rvh .status {
white-space:nowrap;
flex:none
}
.page.v-garansi input.sisa {
font-weight:800;
color:var(--pink)
}
/* kartu lebih ringan di-scroll */
.card,.card:hover {
box-shadow:0 5px 12px rgba(var(--pr),.12)!important
}
.badge.lim {
background:#ffe9b0!important;
color:#8a5a00!important
}
.card .act .btn.nf {
background:var(--pink2);
color:var(--pink);
box-shadow:none
}
.ps-act {
display:grid;
grid-template-columns:1fr 1fr;
gap:10px;
margin-top:12px
}
.ps-act .btn {
flex-direction:column;
gap:1px;
padding:11px 8px;
border-radius:22px;
line-height:1.25
}
.ps-act .btn b {
font-size:14px;
font-weight:700
}
.ps-act .btn small {
font-size:12px;
font-weight:600;
opacity:.85
}
.sdone {
width:58px;
height:58px;
border-radius:50%;
margin:4px auto 8px;
display:grid;
place-items:center;
background:linear-gradient(135deg,var(--h6),var(--pink));
color:#fff;
font-size:30px;
font-weight:700;
box-shadow:0 0 0 7px rgba(var(--pr),.14),0 8px 18px rgba(var(--pr),.3);
animation:pop .5s ease both
}
#modBody.post .sdone {
width:46px;
height:46px;
font-size:25px;
margin:2px auto 6px;
animation:none
}
#modBody .oidrow {
background:var(--pink2);
border-radius:999px;
padding:5px 6px 5px 16px;
margin:10px auto;
width:fit-content;
max-width:100%;
gap:8px;
font-size:13px
}
#modBody .oidrow span {
color:var(--mut)
}
#modBody .oidrow b {
letter-spacing:.02em
}
#modBody .oidrow .cpy {
border:0;
border-radius:999px;
background:var(--card);
color:var(--pink);
font-weight:700;
font-size:12px;
padding:5px 13px;
cursor:pointer;
box-shadow:0 2px 6px rgba(var(--pr),.15)
}
#modBody .qris {
background:var(--card);
border:1px solid var(--line);
box-shadow:0 8px 22px rgba(var(--pr),.12);
align-items:center;
text-align:center;
gap:4px
}
#modBody .qris .qh {
font-size:12px;
letter-spacing:.08em;
text-transform:uppercase;
color:var(--mut);
font-weight:700
}
#modBody .qris small {
font-size:12px;
line-height:1.4
}
#modBody .qris .qrimg {
box-shadow:0 0 0 1px var(--line)
}
#modBody .row2 .btn.ghost,#modBody.post .row2 .btn.ghost {
background:var(--pink2)!important;
color:var(--pink)!important;
box-shadow:none!important;
font-weight:700
}
#modBody .btn.big.wago {
margin-top:10px
}
.cta {
flex-wrap:nowrap!important;
gap:10px;
justify-content:center
}
.cta .btn {
flex:1 1 0!important;
width:auto!important;
max-width:168px!important;
min-width:0!important;
height:44px!important;
padding:0 10px!important;
font-size:14px!important;
line-height:1!important;
white-space:nowrap
}
.box.empty .btn,button.btn[data-view="ulasan"] {
width:auto!important;
min-width:132px!important;
max-width:100%!important;
height:36px!important;
padding:0 20px!important;
font-size:13px!important;
line-height:1!important;
white-space:nowrap;
justify-content:center
}
/* tampilan lebih soft */
:root {
--sh:0 6px 20px rgba(var(--pr),.09)
}
.btn {
box-shadow:0 4px 12px rgba(var(--pr),.16)
}
.btn:hover {
box-shadow:0 6px 16px rgba(var(--pr),.2)
}
.card,.card:hover {
box-shadow:0 4px 12px rgba(var(--pr),.08)!important
}
.hero {
box-shadow:0 6px 18px rgba(var(--pr),.08)
}
/* ===== SOFT LAYER: semua tombol & fitur lebih lembut ===== */
:root {
--pinkd:var(--h1);
--bbg:color-mix(in srgb,var(--pinkd) 36%,#fff);
--bfg:color-mix(in srgb,var(--pinkd) 78%,#000);
--gbg:color-mix(in srgb,var(--pinkd) 18%,#fff);
--bbd:color-mix(in srgb,var(--pinkd) 28%,#fff)
}
@media (prefers-color-scheme:dark) {
:root:not([data-theme="light"]) {
--bbg:color-mix(in srgb,var(--pinkd) 34%,#2a1d25);
--bfg:#ffe4ee;
--gbg:color-mix(in srgb,var(--pinkd) 18%,#2a1d25);
--bbd:color-mix(in srgb,var(--pinkd) 26%,#2a1d25)
}
}
:root[data-theme="dark"] {
--bbg:color-mix(in srgb,var(--pinkd) 34%,#2a1d25);
--bfg:#ffe4ee;
--gbg:color-mix(in srgb,var(--pinkd) 18%,#2a1d25);
--bbd:color-mix(in srgb,var(--pinkd) 26%,#2a1d25)
}
html:root .btn,html:root .btn.sm,html:root .btn.big,html:root .wl,html:root button.wl.inv,html:root .qk.qk,html:root .ql,html:root .trust .pill.pill,html:root .ni.on,html:root .tab.on,html:root .tab.tab[data-cat].on,html:root .chip.on,html:root .cal .cd.t,html:root .cal .tg,html:root .hdrup span,html:root .qrup span,html:root .bar {
background:var(--bbg)!important;
color:var(--bfg)!important;
border:1px solid var(--bbd)!important;
box-shadow:0 3px 10px rgba(var(--pr),.12)!important;
text-shadow:none
}
html:root .btn.ghost,html:root .btn.nf,html:root #modBody .row2 .btn.ghost,html:root #modBody.post .row2 .btn.ghost {
background:var(--bbg)!important;
color:var(--bfg)!important;
border:1px solid var(--bbd)!important;
box-shadow:0 3px 10px rgba(var(--pr),.12)!important
}
html:root .btn.red {
background:#fbdcd9!important;
color:#a8453f!important;
border-color:#f6c6c2!important;
box-shadow:none!important
}
html:root .btn.wago {
background:linear-gradient(135deg,#d3f4e8,#cdeed8)!important;
color:#1f6b45!important;
border-color:#bfe6cf!important;
box-shadow:0 3px 10px rgba(34,197,94,.12)!important
}
html:root .btn.dirty {
background:#fdecc4!important;
color:#7a5600!important;
border-color:#f6dc9a!important;
box-shadow:none!important
}
html:root .ni.on {
box-shadow:0 4px 10px rgba(var(--pr),.14)!important
}
html:root .tab.on,html:root .tab.tab[data-cat].on {
transform:none
}
html:root .bar .bi {
background:rgba(255,255,255,.6)!important
}
html:root .bar .bi i {
background:var(--bfg)!important;
color:#fff!important
}
html:root .bar .bgo,html:root .bar .btn {
background:#fff!important;
color:var(--bfg)!important
}
html:root .sdone {
background:var(--bbg)!important;
color:var(--bfg)!important;
box-shadow:0 0 0 7px rgba(var(--pr),.08)!important
}
html:root .paidok {
box-shadow:0 0 0 8px rgba(47,168,79,.12)
}
html:root .ql i {
background:transparent!important;
box-shadow:none!important;
width:auto;
height:auto;
font-size:18px
}
html:root .qtm {
font-size:13px;
font-weight:800;
color:var(--bfg);
background:var(--gbg);
border-radius:999px;
padding:4px 14px;
margin:2px auto 4px
}
html:root .paidbtn:disabled {
background:var(--line)!important;
color:var(--mut)!important;
border-color:transparent!important;
box-shadow:none!important;
opacity:1!important;
cursor:not-allowed;
transform:none!important
}
html:root .card,html:root .card:hover,html:root .lk.lk,html:root .ctile {
box-shadow:0 3px 10px rgba(var(--pr),.07)!important
}
html:root .hero,html:root .srch {
border-color:color-mix(in srgb,var(--pinkd) 38%,#fff)!important
}
html:root .paidok {
width:78px;
height:78px;
line-height:78px;
font-size:46px;
background:var(--pink)!important;
color:#fff!important;
box-shadow:0 0 0 10px rgba(var(--pr),.14)!important;
margin:8px auto 14px
}
html:root .paidsum {
padding:6px 18px;
margin-top:14px
}
html:root .paidsum .ci {
font-size:14px;
padding:10px 0
}
/* ===== glossy v3 : warna lebih pekat + efek mengkilap ===== */
:root {
--gl:.8
}
@media (prefers-color-scheme:dark) {
:root:not([data-theme="light"]) {
--gl:.07
}
}
:root[data-theme="dark"] {
--gl:.07
}
@media (prefers-color-scheme:light) {
html[data-pal="pink"]:not([data-theme="dark"]) {
--pink:#f0166e;
--g1:#f0166e;
--pr:240,22,110;
--pd:#a80a4a;
--bg:#ffcfe3;
--card:#ffffff;
--pink2:#ff9fca;
--mint:#ffd2b5;
--lav:#f2b4ee;
--peach:#ffb0c3;
--line:#ff86b8;
--ink:#3a0c24;
--mut:#8a3f62;
--glass:rgba(255,255,255,.74);
--b1:#ff86b8cc;
--b2:#ffc9a8cc;
--b3:#eea6f0cc;
--bl1:#ff86b8cc;
--bl2:#eea6f0cc;
--bl3:#ffc9a8cc
}
}
html[data-pal="pink"][data-theme="light"] {
--pink:#f0166e;
--g1:#f0166e;
--pr:240,22,110;
--pd:#a80a4a;
--bg:#ffcfe3;
--card:#ffffff;
--pink2:#ff9fca;
--mint:#ffd2b5;
--lav:#f2b4ee;
--peach:#ffb0c3;
--line:#ff86b8;
--ink:#3a0c24;
--mut:#8a3f62;
--glass:rgba(255,255,255,.74);
--b1:#ff86b8cc;
--b2:#ffc9a8cc;
--b3:#eea6f0cc;
--bl1:#ff86b8cc;
--bl2:#eea6f0cc;
--bl3:#ffc9a8cc
}
html[data-pal="pink"] .hero {
background:linear-gradient(155deg,rgba(255,255,255,calc(var(--gl) - .1)) 0,rgba(255,255,255,0) 46%),linear-gradient(135deg,var(--pink2),#ff6fae)
}
html[data-pal="pink"] .hero h1,html[data-pal="pink"] .hero p {
color:#3a0c24
}
.btn:not(.ghost):not(.red):not(.dirty) {
background:linear-gradient(180deg,rgba(255,255,255,.58) 0,rgba(255,255,255,.14) 48%,rgba(255,255,255,0) 50%),linear-gradient(180deg,var(--h7),var(--pink) 58%,var(--h8));
color:#fff;
border:1px solid rgba(255,255,255,.35);
box-shadow:inset 0 1px 0 rgba(255,255,255,.75),inset 0 -3px 7px rgba(0,0,0,.2),0 8px 18px rgba(var(--pr),.45)
}
.btn.ghost {
background:linear-gradient(180deg,rgba(255,255,255,.95),var(--pink2));
border:1px solid rgba(255,255,255,.9);
box-shadow:inset 0 1px 0 #fff,0 5px 12px rgba(var(--pr),.2)
}
.card {
background:linear-gradient(180deg,rgba(255,255,255,var(--gl)) 0,rgba(255,255,255,0) 42%),linear-gradient(180deg,var(--card),var(--card));
box-shadow:inset 0 1.5px 0 rgba(255,255,255,.95),inset 0 -3px 10px rgba(var(--pr),.08),0 12px 26px rgba(var(--pr),.24)
}
.hero {
background:linear-gradient(155deg,rgba(255,255,255,calc(var(--gl) - .1)) 0,rgba(255,255,255,0) 46%),linear-gradient(var(--pink2),var(--pink2));
box-shadow:inset 0 2px 0 rgba(255,255,255,.9),inset 0 -16px 32px rgba(var(--pr),.16),0 18px 36px rgba(var(--pr),.28)
}
.banner,.box,.sheet,.ctile,.pill,.badge {
box-shadow:inset 0 2px 0 rgba(255,255,255,.75),inset 0 -8px 16px rgba(var(--pr),.1),0 10px 22px rgba(var(--pr),.2)
}
.dock {
background:linear-gradient(180deg,rgba(255,255,255,calc(var(--gl) + .1)),rgba(255,255,255,calc(var(--gl) - .5))),linear-gradient(var(--glass),var(--glass));
border:1px solid rgba(255,255,255,.8);
box-shadow:inset 0 1.5px 0 #fff,0 18px 40px rgba(var(--pr),.38)
}
.chip.on,.tab.on {
background:linear-gradient(180deg,rgba(255,255,255,.5) 0,rgba(255,255,255,0) 50%),linear-gradient(180deg,var(--h7),var(--pink) 60%,var(--h8));
color:#fff;
border-color:var(--pink);
box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 6px 14px rgba(var(--pr),.4)
}
.ni.on .e {
filter:drop-shadow(0 4px 6px rgba(var(--pr),.55))
}
input,select,textarea {
box-shadow:inset 0 2px 5px rgba(var(--pr),.12),0 1px 0 rgba(255,255,255,.9)
}
/* tanpa bayangan pada teks */
html *,html *::before,html *::after {
text-shadow:none!important
}
/* ===== tombol: soft tapi jelas terlihat ===== */
:root {
--s1:#fff;
--s2:color-mix(in srgb,var(--pink) 10%,#fff);
--sfg:color-mix(in srgb,var(--pink) 82%,#000);
--sbd:color-mix(in srgb,var(--pink) 55%,#fff);
--dk1:rgba(255,255,255,.97);
--dk2:rgba(255,238,245,.95)
}
@media (prefers-color-scheme:dark) {
:root:not([data-theme="light"]) {
--s1:var(--card);
--s2:color-mix(in srgb,var(--pink) 18%,var(--card));
--sfg:#ffd6e6;
--sbd:color-mix(in srgb,var(--pink) 60%,var(--card));
--dk1:rgba(52,36,46,.97);
--dk2:rgba(42,29,37,.97)
}
}
:root[data-theme="dark"] {
--s1:var(--card);
--s2:color-mix(in srgb,var(--pink) 18%,var(--card));
--sfg:#ffd6e6;
--sbd:color-mix(in srgb,var(--pink) 60%,var(--card));
--dk1:rgba(52,36,46,.97);
--dk2:rgba(42,29,37,.97)
}
html:root .btn:not(.ghost):not(.nf):not(.red):not(.wago):not(.dirty):not(:disabled):not(.bar .btn),html:root .btn.ghost:not(#modBody .row2 .btn):not(.bar .btn):not(:disabled),html:root .btn.nf,html:root .trust .pill.pill,html:root .tab.on,html:root .tab.tab[data-cat].on,html:root .chip.on {
background:linear-gradient(180deg,rgba(255,255,255,.4) 0,rgba(255,255,255,0) 50%),linear-gradient(180deg,color-mix(in srgb,var(--pink) 82%,#fff),var(--pink))!important;
color:#fff!important;
border:1px solid rgba(255,255,255,.35)!important;
}
html:root #modBody .row2 .btn.ghost,html:root #modBody.post .row2 .btn.ghost,html:root .qk.qk,html:root .ql {
background:linear-gradient(180deg,var(--s1),var(--s2))!important;
color:var(--sfg)!important;
border:1.5px solid var(--sbd)!important;
box-shadow:inset 0 1px 0 #fff,0 4px 10px rgba(var(--pr),.18)!important
}
.dock {
background:linear-gradient(180deg,var(--dk1),var(--dk2))
}
/* ===== halaman ulasan ===== */
.rsum {
display:flex;
gap:16px;
align-items:center
}
.rbig {
text-align:center;
flex:none
}
.rbig b {
font:600 48px/1 Fredoka,sans-serif;
color:var(--pink);
display:block
}
.rbig small {
color:var(--mut)
}
.rbars {
flex:1;
min-width:0
}
.rst {
color:#f5a623;
font-size:20px;
letter-spacing:2px;
line-height:1.1
}
.rbar {
display:flex;
align-items:center;
gap:6px;
font-size:12px;
color:var(--mut)
}
.rbar span {
width:26px
}
.rbar i {
flex:1;
height:7px;
border-radius:9px;
background:rgba(var(--pr),.14);
overflow:hidden
}
.rbar u {
display:block;
height:100%;
background:linear-gradient(90deg,#ffc468,#f5a623);
border-radius:9px
}
.rbar em {
width:20px;
text-align:right;
font-style:normal
}
.rform {
border:2px solid var(--pink)
}
.stars.big button {
font-size:42px
}
.rtxt {
text-align:center;
font-weight:800;
color:var(--pink);
margin-bottom:8px
}
.rhon {
border:2px dashed var(--sbd);
background:linear-gradient(var(--lav),var(--lav))
}
.rv.pend {
border:2px dashed var(--sbd)
}
.rv.pend .status {
margin-top:6px
}
/* ===== tipografi: awal kata kapital, W besar; ikon tanpa kotak pink ===== */
.hero h1,.hero p,.pill,.btn,.ql,.tab,.chip,.ni small,.qk,.ctile b,.lk b,.fh,.sh,h2 {
text-transform:capitalize
}
.hero h1::first-letter {
font-size:1.55em;
line-height:1
}
html:root .lk i {
background:transparent!important;
box-shadow:none!important;
border-radius:0;
width:auto;
height:auto;
font-size:28px
}
html:root .lk.lk {
box-shadow:0 2px 10px rgba(0,0,0,.08)!important;
border:1px solid rgba(0,0,0,.08)
}
.cusbox {
margin:6px 0 10px
}
.cusbox label {
display:block;
font-weight:700;
font-size:13px;
margin-bottom:6px
}
.cusbox label small {
font-weight:500;
opacity:.7
}
.cusrow {
display:flex;
align-items:center;
gap:10px
}
.cusrow input {
flex:1;
min-width:0;
padding:11px 14px;
border-radius:14px;
border:1.5px solid var(--pk2,#f9a8c9);
background:#fff;
font:inherit;
font-size:15px
}
.cusrow input:focus {
outline:none;
border-color:var(--pk1,#ec4899)
}
.cusrow b {
white-space:nowrap;
color:var(--pk1,#ec4899)
}
/* ===== v27-theme-vars ===== */
/* v27 variabel tema (diletakkan awal agar terbaca saat applyPal) */
:root {
--pk1:#ff2e7e;
--pk2:#ff7db1;
--pkrgb:255,46,126
}
:root {
--k0:#ffc2da;
--k1:#ffa0c4;
--k2:#ffb5d4;
--k3:#d9266f;
--k4:#ffb3d1;
--k5:#ff6fa6;
--k6:#a8647f;
--k7:#ff8fbd;
--k8:#b88aa0;
--k9:#c2578a;
--k10:#ffb3d4;
--k11:#ffb8d5;
--q0:236,72,153;
--q1:255,111,166;
--q2:255,181,212;
--q3:184,138,160
}
/* ===== patch-okt24 ===== */
html:root a.lk.lk {
background:var(--glass)!important;
border:0!important;
border-radius:26px!important;
backdrop-filter:blur(10px);
-webkit-backdrop-filter:blur(10px);
box-shadow:inset 0 2px 0 rgba(255,255,255,.75),inset 0 -8px 16px rgba(var(--pr),.1),0 10px 22px rgba(var(--pr),.2)!important
}
html:root .lk.lk i,html:root .lk.lk.p i,html:root .lk.lk.g i {
background:none!important;
background-image:none!important;
box-shadow:none!important;
border:0!important;
outline:0!important;
text-shadow:none!important;
filter:none!important
}
html:root .lk.lk i::before,html:root .lk.lk i::after {
background:none!important;
box-shadow:none!important
}
html:root .cta.cta2 {
margin:12px 0 2px!important;
gap:8px!important
}
html:root .cta.cta2 .btn {
height:34px!important;
max-width:132px!important;
padding:0 12px!important;
font-size:12px!important;
border-radius:999px!important
}
html:root footer .fl {
display:none!important
}
@keyframes btnshine {
0% {
transform:translateX(-130%) skewX(-20deg)
}
55%,100% {
transform:translateX(230%) skewX(-20deg)
}
}
@keyframes cfmpop {
0% {
transform:scale(.3)
}
60% {
transform:scale(1.25)
}
100% {
transform:scale(1)
}
}
html:root #modBody .btn.btn.btn:not(:disabled):not(.red):not(.wago) {
position:relative;
overflow:hidden;
background:linear-gradient(180deg,rgba(255,255,255,.5) 0,rgba(255,255,255,0) 52%),linear-gradient(180deg,color-mix(in srgb,var(--pink) 78%,#fff),var(--pink))!important;
color:#fff!important;
border:2px solid rgba(255,255,255,.75)!important;
box-shadow:0 5px 0 color-mix(in srgb,var(--pink) 68%,#000),0 10px 18px rgba(var(--pr),.35),inset 0 2px 0 rgba(255,255,255,.55)!important;
text-shadow:0 1px 1px rgba(0,0,0,.18);
font-weight:700
}
html:root #modBody .btn.btn.btn.ghost:not(:disabled):not(.red):not(.wago) {
background:linear-gradient(180deg,#fff,var(--pink2))!important;
color:var(--pink)!important;
border:2px solid var(--pink)!important;
text-shadow:none;
box-shadow:0 5px 0 color-mix(in srgb,var(--pink) 55%,#fff),0 9px 16px rgba(var(--pr),.22),inset 0 2px 0 #fff!important
}
html:root #modBody .btn.btn.btn.red:not(:disabled),html:root .btn.btn.btn.wago:not(:disabled) {
position:relative;
overflow:hidden;
color:#fff!important;
border:2px solid rgba(255,255,255,.75)!important;
text-shadow:0 1px 1px rgba(0,0,0,.2);
font-weight:700
}
html:root #modBody .btn.btn.btn.red:not(:disabled) {
background:linear-gradient(180deg,rgba(255,255,255,.4) 0,rgba(255,255,255,0) 52%),linear-gradient(180deg,#ff9a90,#e5534b)!important;
box-shadow:0 5px 0 #b3342d,0 10px 18px rgba(229,83,75,.35),inset 0 2px 0 rgba(255,255,255,.5)!important
}
html:root .btn.btn.btn.wago:not(:disabled) {
background:linear-gradient(180deg,rgba(255,255,255,.4) 0,rgba(255,255,255,0) 52%),linear-gradient(180deg,#5eead4,#22c55e)!important;
box-shadow:0 5px 0 #15803d,0 10px 18px rgba(34,197,94,.35),inset 0 2px 0 rgba(255,255,255,.5)!important
}
html:root #modBody .btn.btn.btn:not(:disabled)::after,html:root .btn.btn.btn.wago:not(:disabled)::after {
content:"";
position:absolute;
top:0;
bottom:0;
left:0;
width:34%;
background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);
animation:btnshine 3.2s ease-in-out infinite;
pointer-events:none
}
html:root #modBody .btn.btn.btn.ghost:not(:disabled)::after {
display:none
}
html:root #modBody .btn.btn.btn:not(:disabled):hover,html:root .btn.btn.btn.wago:not(:disabled):hover {
transform:translateY(-3px);
filter:brightness(1.05)
}
html:root #modBody .btn.btn.btn:not(:disabled):active,html:root .btn.btn.btn.wago:not(:disabled):active {
transform:translateY(4px)!important;
box-shadow:0 1px 0 rgba(0,0,0,.25),0 3px 8px rgba(var(--pr),.25)!important
}
html:root .cfmbtn {
display:flex!important;
align-items:center;
justify-content:center;
gap:10px
}
html:root .cfmbox {
width:24px;
height:24px;
border-radius:8px;
background:#fff;
border:2px solid rgba(255,255,255,.9);
box-shadow:inset 0 2px 4px rgba(0,0,0,.18);
display:inline-grid;
place-items:center;
flex:none;
color:#16a34a;
font-size:17px;
font-weight:900;
line-height:1
}
html:root .cfmbtn.ok .cfmbox::before {
content:"\2713";
animation:cfmpop .4s ease both
}
html:root .cfmhint {
font-size:11.5px
}
/* gaya tombol glossy seperti 'Pilih aplikasi' */
html:root .ps-act .btn.btn.btn.btn,html:root #modBody .btn.btn.btn.btn[data-act="copymsg"],html:root #modBody .btn.btn.btn.btn[data-act="gohist"],html:root .btn.btn.btn.btn[data-act="payqris"],html:root #modBody .btn.btn.btn.btn.paidbtn:not(:disabled),html:root .wl.wl.wl.inv.inv {
background:linear-gradient(180deg,rgba(255,255,255,.38) 0,rgba(255,255,255,0) 52%),linear-gradient(180deg,color-mix(in srgb,var(--pink) 78%,#fff),var(--pink))!important;
color:#fff!important;
border:1px solid rgba(255,255,255,.55)!important;
border-radius:999px!important;
box-shadow:0 8px 20px rgba(var(--pr),.38),inset 0 1px 0 rgba(255,255,255,.6)!important;
text-shadow:none!important;
font-weight:700!important;
opacity:1!important;
transition:transform .2s,box-shadow .2s,filter .2s
}
html:root .btn.btn.btn.btn.wago:not(:disabled),html:root .wl.wl.wl.wl:not(.inv) {
background:linear-gradient(180deg,rgba(255,255,255,.38) 0,rgba(255,255,255,0) 52%),linear-gradient(180deg,#4ade80,#16a34a)!important;
color:#fff!important;
border:1px solid rgba(255,255,255,.55)!important;
border-radius:999px!important;
box-shadow:0 8px 20px rgba(34,197,94,.4),inset 0 1px 0 rgba(255,255,255,.6)!important;
text-shadow:none!important;
font-weight:700!important;
transition:transform .2s,box-shadow .2s,filter .2s
}
html:root .ps-act .btn.btn.btn.btn::after,html:root #modBody .btn.btn.btn.btn[data-act="copymsg"]::after,html:root #modBody .btn.btn.btn.btn[data-act="gohist"]::after,html:root .btn.btn.btn.btn[data-act="payqris"]::after,html:root #modBody .btn.btn.btn.btn.paidbtn::after,html:root .btn.btn.btn.btn.wago::after {
display:none!important
}
html:root .ps-act .btn.btn.btn.btn:hover,html:root #modBody .btn.btn.btn.btn[data-act="copymsg"]:hover,html:root #modBody .btn.btn.btn.btn[data-act="gohist"]:hover,html:root .btn.btn.btn.btn[data-act="payqris"]:hover,html:root #modBody .btn.btn.btn.btn.paidbtn:not(:disabled):hover,html:root .btn.btn.btn.btn.wago:not(:disabled):hover,html:root .wl.wl.wl.wl:hover {
transform:translateY(-2px);
filter:brightness(1.05)
}
html:root .ps-act .btn.btn.btn.btn:active,html:root #modBody .btn.btn.btn.btn[data-act="copymsg"]:active,html:root #modBody .btn.btn.btn.btn[data-act="gohist"]:active,html:root .btn.btn.btn.btn[data-act="payqris"]:active,html:root #modBody .btn.btn.btn.btn.paidbtn:not(:disabled):active,html:root .btn.btn.btn.btn.wago:not(:disabled):active,html:root .wl.wl.wl.wl:active {
transform:translateY(2px) scale(.985)!important;
box-shadow:0 3px 8px rgba(var(--pr),.3)!important
}
html:root .ctile.ctile[data-cat],html:root .ctile.ctile[data-cat]:hover {
background:var(--card)!important;
border:2px solid var(--line)!important;
box-shadow:0 4px 12px rgba(var(--pr),.12)!important
}
html:root .tab.tab[data-cat]:not(.on),html:root .tab.tab[data-cat]:not(.on):hover {
background:var(--card)!important;
border:2px solid var(--line)!important;
box-shadow:0 3px 8px rgba(var(--pr),.1)!important
}
/* ===== xl-css ===== */
.xlreq {
display:inline-block;
margin-left:8px;
padding:2px 9px;
border-radius:999px;
background:var(--pink2);
color:var(--pink);
font-size:11px;
font-weight:800;
vertical-align:middle
}
/* ===== flat-btn ===== */
html:root .ps-act .btn.btn.btn.btn.btn,html:root #modBody .btn.btn.btn.btn.btn[data-act="copymsg"],html:root #modBody .btn.btn.btn.btn.btn[data-act="gohist"],html:root .btn.btn.btn.btn.btn[data-act="payqris"],html:root #modBody .btn.btn.btn.btn.btn.paidbtn:not(:disabled),html:root .wl.wl.wl.wl.inv {
background:linear-gradient(180deg,color-mix(in srgb,var(--pink) 72%,#fff),var(--pink))!important;
color:#fff!important;
border:0!important;
border-radius:999px!important;
box-shadow:none!important;
text-shadow:none!important;
filter:none!important;
font-weight:700!important
}
html:root .btn.btn.btn.btn.btn.wago:not(:disabled),html:root .wl.wl.wl.wl.wl:not(.inv) {
background:linear-gradient(180deg,#5fdc8c,#22a34f)!important;
color:#fff!important;
border:0!important;
border-radius:999px!important;
box-shadow:none!important;
text-shadow:none!important;
filter:none!important;
font-weight:700!important
}
html:root .ps-act .btn.btn.btn.btn.btn:hover,html:root #modBody .btn.btn.btn.btn.btn[data-act="copymsg"]:hover,html:root #modBody .btn.btn.btn.btn.btn[data-act="gohist"]:hover,html:root .btn.btn.btn.btn.btn[data-act="payqris"]:hover,html:root #modBody .btn.btn.btn.btn.btn.paidbtn:not(:disabled):hover,html:root .btn.btn.btn.btn.btn.wago:not(:disabled):hover,html:root .wl.wl.wl.wl.wl:hover,html:root .ps-act .btn.btn.btn.btn.btn:active,html:root #modBody .btn.btn.btn.btn.btn[data-act="copymsg"]:active,html:root #modBody .btn.btn.btn.btn.btn[data-act="gohist"]:active,html:root .btn.btn.btn.btn.btn[data-act="payqris"]:active,html:root #modBody .btn.btn.btn.btn.btn.paidbtn:not(:disabled):active,html:root .btn.btn.btn.btn.btn.wago:not(:disabled):active,html:root .wl.wl.wl.wl.wl:active {
box-shadow:none!important;
filter:none!important;
transform:none!important
}
/* ===== vch-css ===== */
.hbtns {
display:flex;
align-items:center;
gap:8px
}
.vcnt.vch {
margin:0;
padding:5px 10px;
font-size:11px;
white-space:nowrap
}
/* ===== ql-white ===== */
html:root a.ql.ql.ql,html:root .ql.ql.ql:hover,html:root .ql.ql.ql:active {
background:var(--glass,var(--card))!important;
border:0!important;
backdrop-filter:blur(10px);
-webkit-backdrop-filter:blur(10px);
box-shadow:inset 0 2px 0 rgba(255,255,255,.75),inset 0 -8px 16px rgba(var(--pr),.1),0 10px 22px rgba(var(--pr),.2)!important
}
/* ===== flat-modal ===== */
html:root #modBody#modBody .btn:not(:disabled):not(.red):not(.wago) {
background:linear-gradient(180deg,color-mix(in srgb,var(--pink) 72%,#fff),var(--pink))!important;
color:#fff!important;
border:0!important;
border-radius:999px!important;
box-shadow:none!important;
text-shadow:none!important;
filter:none!important;
transform:none!important;
font-weight:700!important;
opacity:1!important
}
html:root #modBody#modBody .btn.red:not(:disabled) {
background:linear-gradient(180deg,#ff9a90,#e5534b)!important;
color:#fff!important;
border:0!important;
border-radius:999px!important;
box-shadow:none!important;
text-shadow:none!important;
filter:none!important;
transform:none!important;
font-weight:700!important
}
html:root #modBody#modBody .btn.wago:not(:disabled) {
background:linear-gradient(180deg,#5fdc8c,#22a34f)!important;
color:#fff!important;
border:0!important;
border-radius:999px!important;
box-shadow:none!important;
text-shadow:none!important;
filter:none!important;
transform:none!important;
font-weight:700!important
}
html:root #modBody#modBody .btn:disabled {
box-shadow:none!important;
filter:none!important
}
html:root #modBody#modBody .btn::after,html:root #modBody#modBody .btn::before {
display:none!important;
content:none!important;
animation:none!important
}
html:root #modBody#modBody .btn:not(:disabled):hover,html:root #modBody#modBody .btn:not(:disabled):active {
box-shadow:none!important;
filter:none!important;
transform:none!important
}
html:root #modBody#modBody .btn:not(:disabled):not(.cfmbtn) b,html:root #modBody#modBody .btn:not(:disabled) small {
color:#fff!important
}
/* ===== rsum-tidy ===== */
html:root .box.rsum.rsum {
display:grid!important;
grid-template-columns:auto 1fr;
gap:6px 16px;
align-items:center;
padding:12px 16px!important
}
html:root .rsum .rbig {
text-align:center;
padding:4px 6px
}
html:root .rsum .rbig b {
font:600 34px/1 Fredoka,sans-serif!important;
color:var(--pink);
display:block
}
html:root .rsum .rbig small {
display:block;
font-size:11px;
margin-top:3px;
color:var(--mut)
}
html:root .rsum .rbars {
display:grid!important;
gap:3px;
min-width:0
}
html:root .rsum .rst {
font-size:15px!important;
letter-spacing:1px;
line-height:1.1;
color:#f5a623
}
html:root .rsum .rbars>.cat {
font-size:11.5px!important;
margin:0 0 3px!important;
line-height:1.3
}
html:root .rsum .rbar {
display:grid!important;
grid-template-columns:22px 1fr 22px;
align-items:center;
gap:6px;
font-size:11px!important;
line-height:1;
color:var(--mut)
}
html:root .rsum .rbar span {
width:auto!important;
font-size:11px;
text-align:right;
white-space:nowrap
}
html:root .rsum .rbar i {
display:block!important;
position:relative;
width:100%;
height:6px!important;
border-radius:9px;
background:rgba(var(--pr),.16)!important;
overflow:hidden;
box-shadow:none!important;
border:0!important
}
html:root .rsum .rbar i::before,html:root .rsum .rbar i::after {
content:none!important;
display:none!important
}
html:root .rsum .rbar u {
display:block!important;
height:100%;
border-radius:9px;
background:linear-gradient(90deg,#ffc468,#f5a623)!important;
text-decoration:none
}
html:root .rsum .rbar em {
width:auto!important;
text-align:left;
font-style:normal!important;
font-size:11px
}
/* ===== wainfo-white ===== */
html:root .wainfo.wainfo {
background:var(--glass,var(--card))!important;
border:1.5px solid var(--line)!important;
box-shadow:inset 0 2px 0 rgba(255,255,255,.75),0 8px 18px rgba(var(--pr),.14)!important
}
html:root .wainfo.wainfo b,html:root .wainfo.wainfo h3,html:root .wainfo.wainfo strong {
color:var(--pink)!important
}
html:root .wainfo.wainfo p {
color:var(--mut)!important
}
html:root .wainfo.wainfo .stp span {
background:var(--pink2)!important;
color:var(--pink)!important;
border:1px solid var(--line)!important;
box-shadow:none!important
}
/* ===== sel-bar ===== */
html:root select,html:root .page select {
-webkit-appearance:none!important;
-moz-appearance:none!important;
appearance:none!important;
background-image:url("data:image/svg+xml;utf8,")!important;
background-repeat:no-repeat!important;
background-position:right 22px center!important;
background-size:14px 9px!important;
padding-right:46px!important
}
html:root #bar#bar {
background:linear-gradient(180deg,color-mix(in srgb,var(--pink) 72%,#fff),var(--pink))!important;
color:#fff!important;
border:0!important;
box-shadow:none!important;
filter:none!important
}
html:root #bar#bar b,html:root #bar#bar small,html:root #bar#bar .bgo {
color:#fff!important;
text-shadow:none!important
}
html:root #bar#bar::before,html:root #bar#bar::after {
display:none!important
}
/* ===== stp-pink ===== */
html:root .wainfo.wainfo.wainfo .stp span {
background:linear-gradient(180deg,color-mix(in srgb,var(--pink) 72%,#fff),var(--pink))!important;
color:#fff!important;
border:0!important;
box-shadow:none!important;
text-shadow:none!important;
font-weight:700!important
}
/* ===== dock-balance ===== */
html:root .dock.dock {
padding:6px!important;
gap:4px!important;
align-items:stretch
}
html:root .dock .ni {
padding:7px 2px 6px!important;
margin:0!important
}
html:root .dock .ni.on,html:root .dock .ni.on:hover,html:root .dock .ni.on:active {
transform:none!important;
box-shadow:none!important
}
html:root .dock .ni.on .e {
transform:scale(1.06)!important;
filter:none!important
}
/* ===== box-flat ===== */
html:root .box.box:not(.st1):not(.wainfo),html:root .nt.nt,html:root .rv.rv {
background:var(--glass)!important;
background-image:none!important;
backdrop-filter:none!important;
-webkit-backdrop-filter:none!important;
box-shadow:0 6px 16px rgba(var(--pr),.12)!important
}
html:root .box.box:not(.st1)::before,html:root .box.box:not(.st1)::after {
background:none!important;
box-shadow:none!important
}
/* ===== ps-compact ===== */
#modBody:has(.ps-h) {
padding:8px 14px calc(10px + env(safe-area-inset-bottom,0px))!important;
max-height:96%!important
}
#modBody:has(.ps-h) .grab {
margin:0 auto 6px!important
}
#modBody:has(.ps-h) .ps-h {
gap:10px;
margin-bottom:4px
}
#modBody:has(.ps-h) .ps-h .ic {
width:44px!important;
height:44px!important;
font-size:16px
}
#modBody:has(.ps-h) .ps-h h3 {
font-size:20px
}
#modBody:has(.ps-h) .ps-h small {
font-size:12.5px
}
#modBody:has(.ps-h) .ps-b {
width:38px;
height:38px;
font-size:16px
}
#modBody:has(.ps-h) .ps-tabs {
padding:4px;
margin:6px 0
}
#modBody:has(.ps-h) .ps-tabs button {
padding:9px 6px;
font-size:14px
}
#modBody:has(.ps-h) .ps-vars {
gap:7px;
margin:7px 0
}
#modBody:has(.ps-h) .ps-vars button {
padding:7px 13px;
font-size:13.5px;
border-width:2px
}
#modBody:has(.ps-h) .ps-pl {
grid-template-columns:1fr 1fr 1fr;
gap:8px;
margin:7px 0
}
#modBody:has(.ps-h) .ps-pl button {
padding:9px 11px;
border-radius:16px;
border-width:2px
}
#modBody:has(.ps-h) .ps-pl small {
font-size:12px;
line-height:1.25
}
#modBody:has(.ps-h) .ps-pl b {
font-size:15.5px;
line-height:1.3
}
#modBody:has(.ps-h) .cacc {
margin:6px 0!important
}
#modBody:has(.ps-h) .cacc summary {
padding:10px 14px!important;
font-size:14px!important
}
#modBody:has(.ps-h) .ps-act {
margin-top:10px;
gap:10px
}
#modBody:has(.ps-h) .ps-act .btn {
padding:10px 8px!important
}
#modBody:has(.ps-h) .ps-act .btn b {
font-size:14px
}
#modBody:has(.ps-h) .ps-act .btn small {
font-size:12px
}
/* ===== btn-caps ===== */
button,.btn,a.btn,.wl,.ql,.lk,.tab,.chip,.ni,.rb,summary,[role="button"] {
text-transform:none
}
h1 {
text-transform:none!important
}
/* ===== notif-pink ===== */
html:root .btn.btn.btn.btn.btn[data-act^="delnotif"],html:root .btn.btn.btn.btn.btn[data-act="clearn"],html:root .btn.btn.btn.btn.btn[data-act="clearnotif"] {
background:linear-gradient(180deg,rgba(255,255,255,.4) 0,rgba(255,255,255,0) 52%),linear-gradient(180deg,color-mix(in srgb,var(--pink) 72%,#fff),var(--pink))!important;
color:#fff!important;
border:0!important;
box-shadow:none!important;
text-shadow:none!important;
filter:none!important
}
/* ===== no-white-rim ===== */
html:root .box.box,html:root .card.card,html:root .lk.lk,html:root a.lk.lk,html:root .ql.ql.ql,html:root a.ql.ql.ql,html:root .qk.qk,html:root .banner.banner,html:root .hero.hero,html:root .srch.srch,html:root .pill.pill,html:root .sheet.sheet,html:root .badge.badge,html:root .wl.wl.wl:not(.btn) {
box-shadow:0 6px 16px rgba(var(--pr),.12)!important;
border-color:transparent!important
}
html:root .dock.dock {
box-shadow:0 8px 22px rgba(var(--pr),.16)!important;
border-color:transparent!important
}
html:root .st1.st1 {
box-shadow:0 6px 16px rgba(var(--pr),.12)!important;
border-color:transparent!important
}
html:root .box.box::before,html:root .box.box::after,html:root .card.card::before,html:root .card.card::after,html:root .hero.hero::before,html:root .hero.hero::after {
box-shadow:none!important;
border-color:transparent!important
}
/* ===== fly-css ===== */
#fly {
position:fixed;
inset:0;
z-index:-1;
overflow:hidden;
pointer-events:none;
contain:strict
}
#fly span {
position:absolute;
bottom:-60px;
line-height:1;
opacity:.26;
will-change:transform;
animation:flyup linear infinite;
filter:none
}
@keyframes flyup {
0% {
transform:translate3d(0,0,0) rotate(0deg)
}
25% {
transform:translate3d(var(--dx),-30vh,0) rotate(calc(var(--r)*.5))
}
50% {
transform:translate3d(calc(var(--dx)*-.6),-62vh,0) rotate(var(--r))
}
75% {
transform:translate3d(var(--dx),-92vh,0) rotate(calc(var(--r)*.4))
}
100% {
transform:translate3d(0,-125vh,0) rotate(0deg)
}
}
@media (prefers-reduced-motion:reduce) {
#fly {
display:none
}
}
/* ===== qrhint-css ===== */
html:root .qrimg {
-webkit-touch-callout:default!important;
-webkit-user-select:auto!important;
user-select:auto!important;
pointer-events:auto!important;
touch-action:manipulation
}
html:root .qrhint {
margin:8px auto 0;
padding:8px 12px;
border-radius:14px;
background:transparent;
color:var(--pink);
font-size:13.5px;
line-height:1.5;
text-align:center
}
html:root .qrhint b {
color:var(--pink)
}
/* ===== hdr-stack ===== */
html:root .prof .pn {
display:flex!important;
flex-direction:column!important;
align-items:flex-start!important;
gap:3px!important;
line-height:1.2!important
}
html:root .prof .pn b {
line-height:1.2!important;
margin:0!important
}
html:root .prof .pn small {
display:flex!important;
flex-direction:column!important;
align-items:flex-start!important;
gap:3px!important;
line-height:1.2!important;
margin:0!important
}
html:root .prof .pn small .since,html:root .prof .pn small .ost {
display:block;
margin:0!important;
line-height:1.2!important
}
.status.paid {
background:#d6f0dc;
color:#2f6b3b
}
/* ===== polish ===== */
html {
scroll-behavior:smooth
}
::selection {
background:rgba(var(--pr),.25)
}
* {
scrollbar-width:thin;
scrollbar-color:rgba(var(--pr),.35) transparent
}
html:root h2 {
letter-spacing:.2px
}
html:root .grid {
gap:14px!important
}
html:root .eyebrow {
display:inline-block;
background:rgba(255,255,255,.7);
padding:4px 12px;
border-radius:999px;
letter-spacing:1px;
font-size:10.5px;
margin-bottom:6px
}
html:root .hero h1 {
letter-spacing:.3px;
line-height:1.15
}
html:root .hero p {
line-height:1.55;
opacity:.9
}
html:root .badge.badge {
border-radius:999px;
padding:3px 10px;
font-size:11px;
font-weight:700;
background:#cdeed6;
color:#1f6b3a;
border:0
}
html:root .badge.badge.out {
background:#ffe4e1;
color:#c0392b
}
html:root .badge.badge.lim {
background:#fff1cf;
color:#9a6a00
}
html:root input:not([type=checkbox]):not([type=radio]):not([type=file]),html:root select,html:root textarea {
border-radius:16px!important
}
html:root input:focus,html:root select:focus,html:root textarea:focus {
outline:none!important;
border-color:var(--pink)!important;
box-shadow:0 0 0 3px rgba(var(--pr),.15)!important
}
html:root .card.card .ic {
background:#fff
}
html:root .card.card h3 {
line-height:1.25
}
html:root .page .cat {
line-height:1.5
}
html:root .box.box {
border-radius:24px!important
}
html:root .ctile.ctile {
border-radius:24px!important
}
html:root .ctile.ctile small {
opacity:.8
}
/* ===== qris-new ===== */
html:root .qris .qrh {
font:700 24px/1.2 Fredoka,system-ui,sans-serif;
color:var(--ink,#3a1030);
text-align:left;
margin:0
}
html:root .qris .qrsub {
font-size:15px;
color:var(--mut);
margin:2px 0 12px;
text-align:left
}
html:root .qris .qrcard {
border:2px solid var(--line);
border-radius:26px;
padding:14px 14px 10px;
background:var(--glass,var(--card));
text-align:center;
max-width:300px;
margin:0 auto
}
html:root .qris .qrcard .qrimg {
display:block;
width:100%;
max-width:240px;
height:auto;
margin:0 auto;
border-radius:8px;
background:#fff
}
html:root .qris .qrname {
font-size:17px;
font-weight:700;
margin-top:8px;
color:var(--ink,#3a1030)
}
html:root .qris .qrprice {
font:700 40px/1.1 Fredoka,system-ui,sans-serif;
color:var(--pink);
text-align:center;
margin:14px 0 2px
}
html:root .qris .qrnote {
font-size:15px;
color:var(--mut);
text-align:center;
margin-bottom:10px
}
html:root .qris .qrsteps {
margin:0 0 12px;
padding-left:20px;
font-size:15px;
line-height:1.6;
color:var(--mut);
text-align:left
}
html:root .qris .qrsteps b {
color:var(--ink,#3a1030)
}
html:root .qris .qtm {
text-align:center;
margin-bottom:8px
}
html:root .qris .qrnote2 {
display:block;
font-size:14.5px;
line-height:1.5;
color:var(--mut);
text-align:center;
margin:6px 0 10px
}
html:root .qris .qtot {
font-size:16px;
text-align:center
}
html:root .qris .qtot b {
font-size:26px;
color:var(--pink)
}
/* ===== qris-modal ===== */
html:root .qrtop {
display:flex;
align-items:flex-start;
justify-content:space-between;
gap:10px;
margin-bottom:8px
}
html:root .qrx {
flex:none;
width:44px;
height:44px;
border-radius:50%;
border:0;
background:var(--pink2);
color:var(--pink);
font-size:20px;
font-weight:700;
display:grid;
place-items:center;
cursor:pointer;
padding:0
}
html:root .qrtop .qrh {
margin:0
}
html:root .rcpt {
border:2px dashed #8ad7a8;
border-radius:28px;
padding:16px;
text-align:center
}
html:root .rcpt-t {
font:700 21px/1.2 Fredoka,system-ui,sans-serif;
color:#2f8f57
}
html:root .rcpt-id {
display:inline-block;
margin:10px auto;
padding:8px 22px;
border-radius:999px;
background:#d6f0dc;
color:#1f6b3a;
font:700 20px ui-monospace,Menlo,monospace;
letter-spacing:3px
}
html:root .rcpt-hi {
font-size:15px;
color:var(--pink);
font-weight:700;
margin-bottom:10px
}
html:root .rcpt-box {
border:2px dashed var(--line);
border-radius:22px;
padding:6px 14px;
margin-bottom:10px;
text-align:left;
background:transparent
}
html:root .rrow {
display:flex;
justify-content:space-between;
gap:12px;
padding:8px 0;
font-size:15px
}
html:root .rrow span {
color:var(--mut)
}
html:root .rrow b {
text-align:right;
color:var(--ink,#3a1030)
}
html:root .rrow.tot {
border-top:2px dashed var(--line);
margin-top:4px;
padding-top:12px;
font-size:17px
}
html:root .rrow.tot b {
color:var(--pink);
font-size:19px
}
html:root .rcpt-msg {
background:var(--pink2);
border-radius:18px;
padding:12px 14px;
font-size:14.5px;
line-height:1.5;
color:var(--ink,#3a1030);
margin-bottom:12px;
text-align:left
}
/* ===== qris-fit ===== */
#modBody:has(.qris) {
padding:8px 14px calc(10px + env(safe-area-inset-bottom,0px))!important
}
html:root .qris.qris {
padding:0!important;
border:0!important;
background:transparent!important;
box-shadow:none!important
}
html:root .qris .qrh {
font-size:20px
}
html:root .qris .qrsub {
font-size:13.5px;
margin:0 0 6px
}
html:root .qris .qrcard {
padding:10px 10px 6px;
max-width:230px
}
html:root .qris .qrcard .qrimg {
max-width:170px;
border:0!important;
padding:0!important;
box-shadow:none!important
}
html:root .qris .qrname {
font-size:15px;
margin-top:4px
}
html:root .qris .qrprice {
font-size:30px;
margin:8px 0 0
}
html:root .qris .qrnote {
font-size:13.5px;
margin-bottom:6px
}
html:root .qris .qrsteps2 {
font-size:13.5px;
line-height:1.45;
text-align:center;
color:var(--mut);
margin:0 0 8px
}
html:root .qris .qrsteps2 b {
color:var(--ink,#3a1030)
}
html:root .qris .paidbtn {
margin-top:4px!important
}
html:root .qris .qrrow2 {
display:grid;
grid-template-columns:1fr 1fr;
gap:8px;
margin-top:8px
}
html:root .qris .qrrow2 .btn {
padding:10px 6px;
font-size:14px
}
/* ===== intro-css ===== */
#ix {
position:fixed;
inset:0;
z-index:9999;
overflow:hidden;
background:linear-gradient(165deg,#ffd6e8 0%,#ffeaf3 50%,#ffdbe9 100%);
font-family:Fredoka,Nunito,system-ui,sans-serif;
transition:opacity .5s ease,transform .5s ease;
cursor:pointer;
-webkit-tap-highlight-color:transparent
}
#ix.out {
opacity:0;
transform:scale(1.04);
pointer-events:none
}
#ix .ixs {
position:absolute;
display:grid;
place-items:center;
border-radius:50%;
background:#fff;
border:3px solid #fff;
box-shadow:0 6px 14px rgba(var(--r0),.16);
animation:ixf 4.2s ease-in-out infinite
}
@keyframes ixf {
0%,100% {
transform:translateY(0) rotate(var(--r,0deg))
}
50% {
transform:translateY(-9px) rotate(calc(var(--r,0deg) + 4deg))
}
}
#ix .ixtag {
position:absolute;
top:calc(5% + env(safe-area-inset-top,0px));
left:50%;
transform:translateX(-50%) rotate(-2deg);
padding:10px 18px;
border:2.5px dashed var(--h9);
border-radius:10px;
background:#ffe3ef;
color:var(--h10);
text-align:center;
font-size:15px;
line-height:1.35;
white-space:nowrap
}
#ix .ixskip {
position:absolute;
top:calc(14px + env(safe-area-inset-top,0px));
right:14px;
padding:8px 16px;
border-radius:999px;
border:1.5px solid var(--h11);
background:#fff;
color:var(--h12);
font:700 14px Fredoka,system-ui,sans-serif;
cursor:pointer
}
#ix .ixcard {
position:absolute;
left:50%;
top:44%;
width:min(76%,320px);
transform:translate(-50%,-50%) rotate(-2deg);
background:#fff;
border:3px solid #ffd0e3;
border-radius:28px;
padding:20px 18px 22px;
text-align:center
}
#ix .ixcard .e {
font-size:54px;
line-height:1
}
#ix .ixcard h1 {
margin:6px 0 2px;
font:700 30px/1.1 Fredoka,system-ui,sans-serif;
color:var(--h13)
}
#ix .ixcard p {
margin:0 0 14px;
font-size:15px;
color:var(--h14)
}
#ix .ixgo {
display:inline-block;
padding:11px 26px;
border-radius:999px;
background:linear-gradient(180deg,var(--h15),var(--h16));
color:#fff;
font:700 17px Fredoka,system-ui,sans-serif
}
#ix .ixpill {
position:absolute;
left:50%;
bottom:calc(17% + env(safe-area-inset-bottom,0px));
transform:translateX(-50%);
padding:13px 24px;
border-radius:999px;
background:#fff;
border:3px solid #ffd0e3;
color:var(--h12);
font:700 17px Fredoka,system-ui,sans-serif;
white-space:nowrap
}
#ix .ixtape {
position:absolute;
left:8%;
bottom:4%;
width:160px;
height:30px;
transform:rotate(-4deg);
background:repeating-conic-gradient(var(--h17) 0 25%,#fff 0 50%) 0 0/15px 15px;
opacity:.9
}
#ix .ixstamp {
position:absolute;
right:6%;
bottom:5%;
width:96px;
height:96px;
border-radius:50%;
background:#fff;
border:5px dotted var(--h18);
display:grid;
place-items:center;
text-align:center;
color:var(--h12);
font:700 12px/1.1 Fredoka,system-ui,sans-serif;
animation:ixsp 18s linear infinite
}
@keyframes ixsp {
to {
transform:rotate(360deg)
}
}
#ix .ixstamp b {
display:block;
font-size:30px
}
#mtog {
position:fixed;
right:12px;
bottom:calc(96px + env(safe-area-inset-bottom,0px));
width:42px;
height:42px;
border-radius:50%;
border:2px solid var(--line,#f6c6dc);
background:var(--glass,#fff);
color:var(--pink,var(--h16));
font-size:20px;
line-height:1;
display:grid;
place-items:center;
z-index:40;
padding:0;
cursor:pointer
}
@media (prefers-reduced-motion:reduce) {
#ix .ixs,#ix .ixstamp {
animation:none
}
}
/* ===== big-css ===== */
html:root .hbtns {
display:flex;
align-items:center;
gap:6px
}
html:root .hbtns .bell {
width:40px!important;
height:40px!important;
font-size:19px;
padding:0;
flex:none
}
html:root .hbtns .langb {
font:700 13px Fredoka,system-ui,sans-serif;
color:var(--pink)
}
html:root .hbtns .vcnt.vch {
padding:5px 9px;
font-size:12px
}
html:root .qrtop {
position:relative;
padding-right:42px
}
html:root .qrx {
position:absolute!important;
top:-2px;
right:-2px;
width:34px!important;
height:34px!important;
font-size:16px!important
}
#pwa {
margin:10px 0
}
#pwa .pwab {
display:flex;
align-items:center;
gap:12px;
background:var(--glass,#fff);
border-radius:24px;
padding:12px 14px
}
#pwa .pwai {
font-size:28px;
flex:none
}
#pwa .pwat {
flex:1;
min-width:0;
display:flex;
flex-direction:column;
line-height:1.3
}
#pwa .pwat b {
font-size:15px;
color:var(--ink,#3a1030)
}
#pwa .pwat span {
font-size:13px;
color:var(--mut)
}
#pwa .btn {
flex:none;
padding:9px 18px
}
.pwas {
text-align:left;
font-size:15px;
line-height:1.55;
margin-bottom:12px;
color:var(--ink,#3a1030)
}
.pwas ol {
margin:4px 0 12px;
padding-left:22px;
color:var(--mut)
}
#rail {
position:fixed;
right:6px;
top:34%;
display:flex;
flex-direction:column;
gap:8px;
z-index:30;
transition:opacity .25s
}
#rail.hid {
opacity:0;
pointer-events:none
}
#rail a {
width:38px;
height:38px;
border-radius:50%;
background:var(--glass,#fff);
border:2px solid var(--line,#f6c6dc);
display:grid;
place-items:center;
font-size:18px;
line-height:1;
color:var(--pink);
text-decoration:none;
font-weight:800
}
/* ===== rail-css ===== */
#rail {
align-items:flex-end;
gap:8px
}
#rail .rtg {
width:34px;
height:34px;
border-radius:50%;
border:2px solid var(--line,#f6c6dc);
background:var(--glass,#fff);
color:var(--pink);
font-size:13px;
line-height:1;
display:grid;
place-items:center;
padding:0;
cursor:pointer
}
#rail .rlist {
display:flex;
flex-direction:column;
gap:8px;
align-items:flex-end
}
#rail.shut .rlist {
display:none
}
#rail a {
display:flex;
align-items:center;
gap:6px;
width:auto;
height:auto;
border:0;
background:none;
border-radius:0;
text-decoration:none
}
#rail .rlb {
background:var(--glass,#fff);
border:2px solid var(--line,#f6c6dc);
border-radius:999px;
padding:5px 11px;
font:700 12.5px Fredoka,system-ui,sans-serif;
color:var(--pink);
white-space:nowrap
}
#rail .rci {
width:38px;
height:38px;
border-radius:50%;
background:var(--glass,#fff);
border:2px solid var(--line,#f6c6dc);
display:grid;
place-items:center;
font-size:18px;
line-height:1;
color:var(--pink);
font-weight:800
}
/* ===== intro-form-css ===== */
#ix .ixform {
text-align:left;
margin:4px 0 10px
}
#ix .ixform input {
width:100%;
box-sizing:border-box;
margin:5px 0;
padding:11px 14px;
border-radius:16px;
border:2px solid #ffd0e3;
background:#fff;
font:16px Nunito,system-ui,sans-serif;
color:#3a1030;
outline:0
}
#ix .ixform input:focus {
border-color:var(--h16)
}
#ix .ixform input.bad {
border-color:#e5534b;
background:#fff3f3
}
#ix .ixlater {
background:none;
border:0;
color:var(--h14);
font:600 14px Fredoka,system-ui,sans-serif;
text-decoration:underline;
margin-top:10px;
cursor:pointer;
padding:4px 10px
}
#ix.form .ixpill,#ix.form .ixtape,#ix.form .ixstamp {
display:none
}
#ix.form .ixcard {
top:46%;
cursor:default;
width:min(86%,340px)
}
#ix.form .ixcard .e {
font-size:40px
}
#rail {
top:auto!important;
bottom:0!important;
right:0!important;
width:0;
height:0
}
#rail .rtg {
position:fixed;
right:60px;
bottom:calc(96px + env(safe-area-inset-bottom,0px));
width:42px;
height:42px;
font-size:14px
}
#rail .rlist {
position:fixed;
right:6px;
bottom:calc(150px + env(safe-area-inset-bottom,0px))
}
/* ===== rail-css2 ===== */
#rail .rtg {
right:12px!important;
bottom:calc(146px + env(safe-area-inset-bottom,0px))!important
}
#rail .rlist {
bottom:calc(196px + env(safe-area-inset-bottom,0px))!important
}
#rail .rci svg {
width:22px;
height:22px;
display:block
}
#ixback {
position:fixed;
left:10px;
bottom:calc(96px + env(safe-area-inset-bottom,0px));
z-index:40;
padding:8px 14px;
border-radius:999px;
border:2px solid var(--line,#f6c6dc);
background:var(--glass,#fff);
color:var(--pink);
font:700 13px Fredoka,system-ui,sans-serif;
cursor:pointer
}
/* ===== layout-fix ===== */
#mtog {
bottom:calc(184px + env(safe-area-inset-bottom,0px))!important
}
#ixback {
bottom:calc(184px + env(safe-area-inset-bottom,0px))!important
}
#rail .rtg {
bottom:calc(236px + env(safe-area-inset-bottom,0px))!important
}
#rail .rlist {
bottom:calc(286px + env(safe-area-inset-bottom,0px))!important
}
html:root .bar .bi {
background:#fff!important
}
html:root .bar .bt b {
font-size:15px
}
/* ===== akun-css ===== */
#bar {
display:none!important
}
html:root .hbtns {
gap:4px;
flex-wrap:wrap;
justify-content:flex-end
}
html:root .hbtns .bell {
width:34px!important;
height:34px!important;
font-size:16px!important
}
html:root .hbtns .bell .dot {
transform:scale(.85)
}
html:root .hbtns .langb {
font-size:12px!important
}
html:root .hbtns .vcnt.vch {
padding:3px 8px;
font-size:11px
}
#ixcart {
position:fixed;
right:12px;
bottom:calc(96px + env(safe-area-inset-bottom,0px));
width:42px;
height:42px;
border-radius:50%;
border:2px solid var(--line,#f6c6dc);
background:var(--glass,#fff);
font-size:20px;
line-height:1;
display:grid;
place-items:center;
z-index:40;
padding:0;
cursor:pointer
}
#ixcart i {
position:absolute;
top:-7px;
right:-7px;
min-width:20px;
height:20px;
border-radius:999px;
background:var(--h19);
color:#fff;
font:700 11px/20px system-ui,sans-serif;
text-align:center;
padding:0 5px;
font-style:normal;
box-shadow:0 0 0 2px #fff
}
#ixcart i[hidden] {
display:none
}
#mtog {
bottom:calc(148px + env(safe-area-inset-bottom,0px))!important
}
#ixback {
bottom:calc(96px + env(safe-area-inset-bottom,0px))!important
}
#rail .rtg {
bottom:calc(200px + env(safe-area-inset-bottom,0px))!important
}
#rail .rlist {
bottom:calc(250px + env(safe-area-inset-bottom,0px))!important
}
html:root .accbox {
text-align:center
}
.accT {
font:700 30px/1.1 Fredoka,system-ui,sans-serif;
color:var(--pink);
margin:2px 0
}
.accS {
font-size:15px;
color:var(--mut);
line-height:1.45;
margin-bottom:14px
}
.accIn {
display:block;
width:100%;
box-sizing:border-box;
margin:0 0 12px;
padding:14px 18px;
border-radius:999px;
border:2px solid var(--line);
background:var(--card,#fff);
font:16px Nunito,system-ui,sans-serif;
color:var(--ink,#3a1030);
outline:0
}
.accIn:focus {
border-color:var(--pink)
}
.accShow {
display:flex;
align-items:center;
gap:8px;
font:700 15px Fredoka,system-ui,sans-serif;
color:var(--pink);
margin:0 0 12px;
text-align:left
}
.accShow input {
width:22px;
height:22px;
accent-color:var(--pink)
}
.accMsg {
min-height:18px;
color:var(--h12);
font-size:13.5px;
margin-bottom:6px
}
.accOr {
display:flex;
align-items:center;
gap:12px;
color:var(--mut);
font-weight:700;
margin:14px 0
}
.accOr::before,.accOr::after {
content:"";
flex:1;
height:2px;
background:var(--line)
}
.accLink {
display:block;
margin:12px auto 0;
background:none;
border:0;
color:var(--pink);
font:700 15px Fredoka,system-ui,sans-serif;
cursor:pointer
}
.accLink.gray {
color:var(--mut)
}
.accInfo {
margin-top:10px;
font-size:13.5px;
line-height:1.5;
color:var(--mut);
text-align:left
}
.accInfo[hidden] {
display:none
}
/* ===== dock-cs ===== */
.dock a.ni {
text-decoration:none;
color:inherit;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center
}
/* ===== dock6 ===== */
html:root .dock .ni {
padding-left:2px!important;
padding-right:2px!important
}
html:root .dock .ni small {
font-size:10.5px!important
}
html:root .dock .ni .e {
font-size:20px!important
}
.hsw {
margin:6px 0 10px
}
/* ===== miws-gm ===== */
.miws-s {
width:24px;
height:24px;
fill:none;
stroke:currentColor;
stroke-width:1.9;
stroke-linecap:round;
stroke-linejoin:round;
display:block
}
.dock .ni .e {
display:grid;
place-items:center;
line-height:1
}
html:root .dock .ni.on {
color:var(--pk1)!important
}
.miws-menu {
display:grid;
grid-template-columns:repeat(4,1fr);
gap:18px 8px;
margin:6px 0 20px
}
.miws-btn {
display:flex;
flex-direction:column;
align-items:center;
gap:8px;
position:relative;
background:none;
border:0;
padding:0;
font:inherit;
font-size:12px;
font-weight:600;
color:var(--ink);
cursor:pointer;
-webkit-tap-highlight-color:transparent
}
html:root .miws-ic {
width:60px;
height:60px;
border-radius:20px;
display:grid;
place-items:center;
color:#fff!important;
background:linear-gradient(145deg,var(--pk2),var(--pk1))!important;
box-shadow:0 8px 16px rgba(var(--pkrgb),.32)!important;
border:0!important;
transition:transform .18s,box-shadow .18s
}
.miws-ic .miws-s {
width:28px;
height:28px
}
html:root .miws-btn:hover .miws-ic {
transform:translateY(-3px);
box-shadow:0 12px 20px rgba(var(--pkrgb),.4)!important
}
.miws-btn:active .miws-ic {
transform:scale(.92)
}
.miws-badge {
position:absolute;
top:-4px;
right:calc(50% - 38px);
min-width:18px;
height:18px;
padding:0 5px;
border-radius:9px;
background:var(--card);
color:var(--pk1);
font:700 10px/14px inherit;
font-style:normal;
display:grid;
place-items:center;
border:2px solid var(--pk1);
z-index:1
}
html:root .hbtns .bell {
width:36px;
height:36px;
min-width:36px;
padding:0;
border-radius:12px;
display:grid;
place-items:center;
position:relative;
color:#fff!important;
background:linear-gradient(145deg,var(--pk2),var(--pk1))!important;
border:0!important;
box-shadow:0 5px 12px rgba(var(--pkrgb),.32)!important;
font:700 12px/1 inherit;
cursor:pointer
}
html:root .hbtns {
gap:6px
}
html:root .hbtns .bell .miws-s {
width:19px;
height:19px
}
html:root .hbtns .bell .dot {
position:absolute;
top:-4px;
right:-4px;
background:#fff!important;
color:var(--pk1)!important;
border:2px solid var(--pk1);
box-shadow:none!important
}
html:root .hbtns .bell:active {
transform:scale(.92)
}
.miws-q {
display:grid;
place-items:center
}
.miws-q .miws-s {
width:18px;
height:18px
}
.ql i .miws-s,.lk i .miws-s {
width:19px;
height:19px
}
.miws-sun {
display:none
}
html[data-theme="dark"] .miws-sun {
display:block
}
html[data-theme="dark"] .miws-moon {
display:none
}
@media (prefers-color-scheme:dark) {
html:not([data-theme="light"]) .miws-sun {
display:block
}
html:not([data-theme="light"]) .miws-moon {
display:none
}
}
/* ===== hdr-fix ===== */
html:root header.top {
display:flex;
flex-wrap:nowrap;
align-items:center;
justify-content:space-between;
gap:8px
}
html:root header.top .prof {
flex:1 1 auto;
min-width:0;
overflow:hidden
}
html:root header.top .pn b,html:root header.top .pn small {
display:block;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis
}
html:root header.top .hbtns {
flex:none;
flex-wrap:nowrap;
justify-content:flex-end;
align-items:center;
gap:5px
}
html:root header.top .hbtns .bell {
flex:none;
width:36px!important;
height:36px!important;
min-width:36px
}
html:root header.top .hbtns .langb {
font-size:12px!important
}
html:root header.top .hbtns .vcnt.vch {
flex:none;
display:inline-flex;
align-items:center;
height:36px;
padding:0 9px;
margin:0;
font-size:12px;
white-space:nowrap
}
@media(max-width:430px) {
html:root header.top {
gap:6px
}
html:root header.top .hbtns {
gap:3px
}
html:root header.top .hbtns .bell {
width:31px!important;
height:31px!important;
min-width:31px;
border-radius:10px
}
html:root header.top .hbtns .bell .miws-s {
width:16px;
height:16px
}
html:root header.top .hbtns .langb {
font-size:11px!important
}
html:root header.top .hbtns .vcnt.vch {
height:31px;
padding:0 7px;
font-size:11px
}
html:root header.top .av {
width:36px;
height:36px;
flex:none
}
}
html:root .hsw {
margin:8px 0 12px
}
/* ===== jam-css ===== */
.jam {
margin:16px 0;
background:var(--card);
border:1.5px solid var(--line);
border-radius:24px;
box-shadow:var(--sh);
overflow:hidden
}
.jamh {
display:flex;
align-items:center;
gap:10px;
padding:15px 18px;
background:var(--pink2)
}
.jamh i {
font-style:normal;
font-size:20px
}
.jamh b {
font:700 18px Fredoka,Nunito,sans-serif;
color:var(--ink)
}
.jamb {
padding:14px 14px 16px;
display:flex;
flex-direction:column;
gap:8px
}
.jst {
display:flex;
align-items:center;
gap:10px;
padding:12px 14px;
border-radius:16px;
background:var(--bg);
border:1.5px solid var(--line);
font:800 14.5px Nunito,sans-serif
}
.jst .jd {
width:12px;
height:12px;
border-radius:50%;
flex:none;
background:#22c55e;
box-shadow:0 0 0 4px rgba(34,197,94,.2)
}
.jst.on b {
color:#1fa463
}
.jst.off .jd {
background:#ef4444;
box-shadow:0 0 0 4px rgba(239,68,68,.2)
}
.jst.off b {
color:var(--h4)
}
.jrow {
display:flex;
align-items:center;
justify-content:space-between;
gap:8px;
padding:11px 14px;
border-radius:14px;
background:var(--bg);
border:1px solid var(--line);
font:600 14px Nunito,sans-serif;
color:var(--ink)
}
.jrow b {
font-weight:700;
white-space:nowrap
}
.jrow.now {
background:var(--pink2);
border-color:var(--pink)
}
.jrow.now span,.jrow.now b {
font-weight:800
}
.jrow em {
font-style:normal;
margin-left:8px;
padding:2px 9px;
border-radius:999px;
background:linear-gradient(135deg,var(--h20),var(--pink));
color:#fff;
font:800 11px Nunito,sans-serif;
vertical-align:1px
}
.jnote {
margin:4px 2px 0;
font:600 13px/1.5 Nunito,sans-serif;
color:var(--mut)
}
@media(max-width:380px) {
.jrow {
font-size:13px;
padding:10px 12px
}
.jrow em {
margin-left:5px;
padding:2px 7px
}
}
/* ===== ix-aes ===== */
html:root #ix {
background:radial-gradient(120% 70% at 10% 0%,#ffd6e8 0%,rgba(255,214,232,0) 62%),radial-gradient(110% 70% at 100% 100%,#d8f0d4 0%,rgba(216,240,212,0) 60%),linear-gradient(170deg,#fff5fa,#ffeaf3 55%,#f6fcf3)
}
html:root #ix::before {
content:"";
position:absolute;
inset:0;
pointer-events:none;
background-image:radial-gradient(rgba(var(--r0),.17) 1.5px,transparent 1.8px);
background-size:24px 24px;
-webkit-mask-image:linear-gradient(#000,transparent 72%);
mask-image:linear-gradient(#000,transparent 72%)
}
html:root #ix .ixb {
position:absolute;
border-radius:50%;
filter:blur(40px);
opacity:.75;
pointer-events:none
}
html:root #ix .ixb.b1 {
width:250px;
height:250px;
background:var(--h21);
top:-70px;
left:-80px
}
html:root #ix .ixb.b2 {
width:270px;
height:270px;
background:#c9eac6;
bottom:-90px;
right:-90px
}
html:root #ix .ixb.b3 {
width:190px;
height:190px;
background:#efd0f6;
top:40%;
right:-70px
}
html:root #ix .ixs {
animation:ixfl 5.2s ease-in-out infinite;
box-shadow:0 8px 18px rgba(var(--r0),.2)
}
@keyframes ixfl {
0%,100% {
transform:translateY(0) rotate(var(--r,0deg))
}
50% {
transform:translateY(-10px) rotate(calc(var(--r,0deg) + 5deg))
}
}
html:root #ix .ixcard {
position:absolute;
left:50%;
top:47%;
width:min(86%,350px);
transform:translate(-50%,-50%);
padding:26px 22px 24px;
border-radius:36px;
background:rgba(255,255,255,.74);
-webkit-backdrop-filter:blur(16px) saturate(1.2);
backdrop-filter:blur(16px) saturate(1.2);
border:1.5px solid rgba(255,255,255,.95);
box-shadow:0 26px 60px rgba(var(--r0),.22),0 4px 0 rgba(255,255,255,.9) inset;
text-align:center;
animation:ixin .7s cubic-bezier(.2,.9,.3,1) both
}
@keyframes ixin {
from {
opacity:0;
transform:translate(-50%,-46%) scale(.94)
}
to {
opacity:1;
transform:translate(-50%,-50%) scale(1)
}
}
html:root #ix .ixlg {
width:92px;
height:92px;
margin:-62px auto 12px;
border-radius:50%;
padding:4px;
background:conic-gradient(from 200deg,var(--h22),#ffd1e3,#cdeccb,var(--h22));
box-shadow:0 12px 26px rgba(var(--r0),.3);
display:grid;
place-items:center
}
html:root #ix .ixlg>* {
width:100%;
height:100%;
border-radius:50%;
background:#fff;
display:grid;
place-items:center;
font-size:42px;
object-fit:cover
}
html:root #ix .ixey {
font:700 11.5px Fredoka,Nunito,sans-serif;
letter-spacing:2.4px;
text-transform:uppercase;
color:var(--h23)
}
html:root #ix .ixcard h1 {
margin:4px 0 6px;
font:700 36px/1.05 Fredoka,Nunito,sans-serif;
background:linear-gradient(135deg,var(--h24),var(--h25));
-webkit-background-clip:text;
background-clip:text;
color:transparent
}
html:root #ix .ixtl {
margin:0 0 16px;
font:600 14.5px/1.5 Nunito,sans-serif;
color:var(--h14)
}
html:root #ix .ixst {
display:inline-flex;
align-items:center;
gap:9px;
padding:10px 18px;
border-radius:999px;
background:#fff;
border:1.5px solid #cdeccb;
color:#2f7a45;
font:800 14px Nunito,sans-serif;
box-shadow:0 6px 14px rgba(63,165,107,.14)
}
html:root #ix .ixst i {
width:10px;
height:10px;
border-radius:50%;
background:#22c55e;
box-shadow:0 0 0 0 rgba(34,197,94,.5);
animation:ixpl 1.8s infinite
}
@keyframes ixpl {
70% {
box-shadow:0 0 0 9px rgba(34,197,94,0)
}
100% {
box-shadow:0 0 0 0 rgba(34,197,94,0)
}
}
html:root #ix .ixhint {
margin-top:16px;
font:700 14px Fredoka,Nunito,sans-serif;
color:var(--h23);
animation:ixbob 2.4s ease-in-out infinite
}
html:root #ix .ixhint b {
font-weight:400
}
@keyframes ixbob {
0%,100% {
transform:translateY(0);
opacity:.75
}
50% {
transform:translateY(-3px);
opacity:1
}
}
html:root #ix .ixz {
margin:8px 0 4px;
font-size:30px;
line-height:1
}
html:root #ix .ixz span {
display:inline-block;
margin-left:3px;
font:700 16px Fredoka,sans-serif;
color:#d6a0ff;
animation:ixzz 2.4s ease-in-out infinite
}
html:root #ix .ixz span:nth-of-type(2) {
animation-delay:.4s;
font-size:20px
}
html:root #ix .ixz span:nth-of-type(3) {
animation-delay:.8s;
font-size:24px
}
@keyframes ixzz {
0%,100% {
transform:translateY(2px);
opacity:.3
}
50% {
transform:translateY(-6px);
opacity:1
}
}
html:root #ix .ixnote {
margin:10px 0 12px;
padding:15px 16px;
border-radius:22px;
background:linear-gradient(160deg,#fff3f8,#ffe6f0);
border:1.8px dashed var(--h18);
font:700 15.5px/1.6 Nunito,sans-serif;
color:var(--h26)
}
html:root #ix .ixnote b {
display:inline-block;
padding:1px 11px;
border-radius:999px;
background:linear-gradient(135deg,var(--h20),var(--h16));
color:#fff;
font-family:Fredoka,Nunito,sans-serif;
letter-spacing:.4px;
white-space:nowrap
}
html:root #ix .ixcd {
display:inline-block;
padding:8px 16px;
border-radius:999px;
background:#fff;
border:1.5px solid #ffd0e3;
color:var(--h12);
font:800 13px Nunito,sans-serif
}
html:root #ix .ixfoot {
position:absolute;
left:0;
right:0;
bottom:calc(22px + env(safe-area-inset-bottom,0px));
text-align:center;
font:700 12px Fredoka,Nunito,sans-serif;
letter-spacing:1.6px;
color:var(--h27);
text-transform:lowercase
}
html:root #ix.closed {
cursor:pointer
}
body.ixgate #nlg {
z-index:10001;
opacity:.8
}
@media(prefers-reduced-motion:reduce) {
html:root #ix * {
animation:none!important
}
}
@media(max-height:640px) {
html:root #ix .ixcard {
top:52%;
padding:20px 18px
}
html:root #ix .ixlg {
width:74px;
height:74px;
margin-top:-50px
}
}
/* ===== float-aes ===== */
html:root #rail .rtg,html:root #mtog,html:root #ixcart {
width:42px;
height:42px;
border-radius:50%;
border:2px solid rgba(var(--pkrgb),.38);
background:var(--glass,rgba(255,255,255,.92));
color:var(--pk1);
display:grid;
place-items:center;
padding:0;
font-size:0;
line-height:0;
cursor:pointer;
box-shadow:0 8px 18px rgba(var(--pkrgb),.2);
transition:transform .15s,box-shadow .15s
}
html:root #rail .rtg .miws-s,html:root #mtog .miws-s,html:root #ixcart .miws-s {
width:21px;
height:21px
}
html:root #rail .rtg:hover,html:root #mtog:hover,html:root #ixcart:hover {
box-shadow:0 11px 22px rgba(var(--pkrgb),.3)
}
html:root #rail .rtg:active,html:root #mtog:active,html:root #ixcart:active {
transform:scale(.92)
}
html:root #mtog.off {
color:var(--mut,#9a7f89);
border-color:var(--line,#f6d6e2);
box-shadow:0 6px 14px rgba(0,0,0,.08)
}
html:root #ixcart i {
background:linear-gradient(145deg,var(--pk2),var(--pk1));
box-shadow:0 0 0 2px var(--card,#fff);
font-size:11px
}
html:root #rail .rci,html:root #rail .rlb {
border-color:rgba(var(--pkrgb),.3);
box-shadow:0 6px 14px rgba(var(--pkrgb),.14)
}
html:root #ixback {
border-color:rgba(var(--pkrgb),.38);
color:var(--pk1);
box-shadow:0 8px 18px rgba(var(--pkrgb),.2)
}
/* ===== miws-claim-track ===== */
.clchip {
display:flex;
align-items:center;
gap:6px;
font-size:12.5px;
font-weight:800;
border-radius:12px;
padding:9px 12px;
margin:8px 0;
background:#fff3d6;
color:#7a5200;
line-height:1.35
}
.clchip.ok {
background:#d6f0dc;
color:#2f6b3b
}
.clchip.warn {
background:#ffe9ef;
color:#a3294f
}
.clmini {
display:flex;
margin:10px 0 2px;
padding:0;
list-style:none
}
.clmini li {
flex:1;
list-style:none;
text-align:center;
position:relative;
font-size:10.5px;
font-weight:700;
color:var(--mut)
}
.clmini li i {
display:flex;
align-items:center;
justify-content:center;
width:22px;
height:22px;
margin:0 auto 4px;
border-radius:50%;
background:var(--line);
color:#fff;
font-style:normal;
font-size:12px;
position:relative;
z-index:1
}
.clmini li::after {
content:"";
position:absolute;
top:10px;
left:50%;
width:100%;
height:3px;
background:var(--line);
z-index:0
}
.clmini li:last-child::after {
display:none
}
.clmini li.done i {
background:#22b45c
}
.clmini li.done::after {
background:#22b45c
}
.clmini li.done {
color:#2f6b3b
}
.clmini li.cur i {
background:var(--pink);
box-shadow:0 0 0 4px rgba(var(--pr),.2)
}
.clmini li.cur {
color:var(--pink)
}
.ctk {
margin:10px 0 4px;
padding:0;
list-style:none
}
.ctk li {
list-style:none;
position:relative;
padding:0 0 14px 34px;
min-height:30px
}
.ctk li:last-child {
padding-bottom:2px
}
.ctk li::before {
content:"";
position:absolute;
left:10px;
top:22px;
bottom:-2px;
width:2px;
background:var(--line)
}
.ctk li:last-child::before {
display:none
}
.ctk li i {
position:absolute;
left:0;
top:0;
width:22px;
height:22px;
border-radius:50%;
background:var(--line);
color:#fff;
font-style:normal;
font-size:12px;
display:flex;
align-items:center;
justify-content:center
}
.ctk li.done i {
background:#22b45c
}
.ctk li.done::before {
background:#22b45c
}
.ctk li.cur i {
background:var(--pink);
box-shadow:0 0 0 4px rgba(var(--pr),.2)
}
.ctk li b {
display:block;
font-size:13.5px;
color:var(--ink)
}
.ctk li small {
display:block;
font-size:12px;
color:var(--mut);
line-height:1.4;
margin-top:1px
}
.ctk li.todo b {
color:var(--mut);
font-weight:700
}
.clacts {
display:flex;
gap:8px;
flex-wrap:wrap;
margin:8px 0 4px
}
.clacts .btn {
flex:1;
min-width:130px
}
.clban .clr {
display:flex;
justify-content:space-between;
gap:8px;
font-size:13px;
flex-wrap:wrap
}
.clban .clr span {
color:var(--mut)
}
@media (prefers-color-scheme:dark) {
:root:not([data-theme="light"]) .clchip {
background:#4a3a14;
color:#ffe29a
}
:root:not([data-theme="light"]) .clchip.ok {
background:#1f3a2a;
color:#9be3b0
}
:root:not([data-theme="light"]) .clchip.warn {
background:#4a2433;
color:#ffc2d4
}
}
:root[data-theme="dark"] .clchip {
background:#4a3a14;
color:#ffe29a
}
:root[data-theme="dark"] .clchip.ok {
background:#1f3a2a;
color:#9be3b0
}
:root[data-theme="dark"] .clchip.warn {
background:#4a2433;
color:#ffc2d4
}
/* ===== ord-css ===== */
.ordh {
margin:18px 0 2px
}
.ordsub {
font:700 13.5px Nunito,sans-serif;
color:var(--mut);
margin:0 0 12px
}
.ords {
display:grid;
grid-template-columns:repeat(2,1fr);
gap:12px;
margin:0 0 12px
}
@media(min-width:700px) {
.ords {
grid-template-columns:repeat(3,1fr)
}
}
.ord {
position:relative;
background:var(--card);
border:1.5px solid var(--line);
border-radius:24px;
padding:14px 14px 15px;
box-shadow:var(--sh);
overflow:hidden;
min-height:132px
}
.ord:before {
content:"";
position:absolute;
right:-22px;
top:-22px;
width:84px;
height:84px;
border-radius:50%;
background:var(--pink2);
opacity:.8
}
.ord .on {
position:relative;
width:32px;
height:32px;
border-radius:50%;
background:linear-gradient(135deg,var(--h28),var(--h1));
color:#fff;
font:800 15px Fredoka,Nunito,sans-serif;
display:grid;
place-items:center;
box-shadow:0 4px 10px rgba(var(--pr),.3),inset 0 2px 0 rgba(255,255,255,.5)
}
.ord .oe {
position:absolute;
right:12px;
top:9px;
font-size:28px;
line-height:1;
filter:drop-shadow(0 3px 4px rgba(var(--pr),.2))
}
.ord p {
position:relative;
margin:11px 0 0;
font:700 13.5px/1.5 Nunito,sans-serif;
color:var(--ink)
}
.ord p b {
color:var(--pink)
}
.ordnote {
display:flex;
align-items:center;
justify-content:center;
gap:8px;
background:var(--pink2);
border:1.5px dashed var(--line);
border-radius:999px;
padding:10px 16px;
font:800 13px Nunito,sans-serif;
color:var(--pink);
text-align:center;
margin-bottom:6px
}
/* ===== home-css ===== */
.hbox {
padding:14px;
margin:14px 0
}
.hbox .hsh {
display:flex;
align-items:center;
gap:8px;
font:800 16px Fredoka,Nunito,sans-serif;
color:var(--ink);
margin-bottom:10px
}
.hbox .hsh i {
font-style:normal;
color:var(--pink)
}
.hstat {
background:var(--card);
border:1.5px solid var(--line);
border-radius:20px;
padding:14px;
box-shadow:0 6px 16px rgba(var(--pr),.12)
}
.hstat .hv {
font-size:20px;
color:var(--pink)
}
.hstat .hv b {
display:block;
font:800 30px Fredoka,Nunito,sans-serif;
color:var(--pink);
line-height:1.1;
margin-top:2px
}
.hstat .hv small {
display:block;
font:800 13px Nunito,sans-serif;
color:var(--mut);
margin-top:2px
}
.hrk {
display:flex;
flex-direction:column;
gap:10px
}
.hrow {
display:flex;
align-items:center;
gap:12px;
background:var(--card);
border:1.5px solid var(--line);
border-radius:18px;
padding:10px 14px;
box-shadow:0 4px 12px rgba(var(--pr),.1)
}
.hrow.r1 {
background:linear-gradient(90deg,#fff6d6,var(--card) 70%)
}
.hrow .hm {
flex:none;
width:44px;
height:44px;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
font-size:28px;
line-height:1
}
.hrow .hm.n {
background:var(--pink2);
color:var(--pink);
font:800 17px Fredoka,Nunito,sans-serif;
border:2px solid var(--line)
}
.hrow .hn {
flex:1;
min-width:0;
font:800 15px Nunito,sans-serif;
color:var(--ink);
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap
}
.hrow .hr {
text-align:right;
flex:none
}
.hrow .hr b {
display:block;
font:800 14.5px Fredoka,Nunito,sans-serif;
color:var(--pink)
}
.hrow .hr small {
display:block;
font:800 12.5px Nunito,sans-serif;
color:var(--pink);
opacity:.85
}
.hsoc {
background:var(--card);
border:1.5px solid var(--line);
border-radius:20px;
padding:14px;
box-shadow:0 6px 16px rgba(var(--pr),.12)
}
.hsi {
display:flex;
flex-wrap:wrap;
gap:12px
}
.hsi a {
width:50px;
height:50px;
border-radius:16px;
background:#fff;
display:flex;
align-items:center;
justify-content:center;
box-shadow:0 4px 12px rgba(var(--pr),.18);
transition:transform .15s
}
.hsi a:active {
transform:scale(.93)
}
.hsi svg {
width:32px;
height:32px;
display:block
}
/* ===== testi-css ===== */
#tsm {
position:fixed;
inset:0;
z-index:55;
display:none;
align-items:center;
justify-content:center;
background:#2a141c88;
backdrop-filter:blur(3px);
-webkit-backdrop-filter:blur(3px);
padding:12px
}
#tsm.on {
display:flex
}
#tsm .tsp {
position:relative;
isolation:isolate;
background:linear-gradient(170deg,#fff5fa,#ffeaf3 55%,#fff7fb);
color:var(--ink);
width:100%;
max-width:460px;
max-height:96vh;
border-radius:30px;
display:flex;
flex-direction:column;
overflow:hidden;
box-shadow:0 22px 56px rgba(var(--pkrgb),.34);
animation:slide .28s ease both
}
#tsm .tsp::before {
content:"";
position:absolute;
z-index:-1;
width:200px;
height:200px;
border-radius:50%;
background:var(--h21);
filter:blur(46px);
opacity:.7;
top:-70px;
right:-60px
}
#tsm .tsp::after {
content:"";
position:absolute;
z-index:-1;
width:220px;
height:220px;
border-radius:50%;
background:var(--h29);
filter:blur(48px);
opacity:.7;
bottom:-80px;
left:-70px
}
#tsm .tsh {
display:flex;
align-items:center;
gap:10px;
padding:14px 16px 10px;
flex:none
}
#tsm .tsh b {
flex:1;
font:700 22px Fredoka,Nunito,sans-serif;
line-height:1.1;
background:linear-gradient(135deg,var(--h24),var(--h25));
-webkit-background-clip:text;
background-clip:text;
color:transparent
}
#tsm .tsbd {
width:38px;
height:38px;
border-radius:50%;
flex:none;
display:grid;
place-items:center;
color:#fff;
background:linear-gradient(145deg,var(--pk2),var(--pk1));
box-shadow:0 5px 12px rgba(var(--pkrgb),.32)
}
#tsm .tsv {
width:20px;
height:20px;
fill:none;
stroke:currentColor;
stroke-width:1.9;
stroke-linecap:round;
stroke-linejoin:round;
flex:none;
display:block
}
#tsm .tsv.fill {
fill:currentColor;
stroke-width:1.2
}
#tsm .tsx {
width:38px;
height:38px;
border-radius:50%;
border:0;
padding:0;
cursor:pointer;
flex:none;
display:grid;
place-items:center;
color:#fff;
background:linear-gradient(145deg,var(--pk2),var(--pk1));
box-shadow:0 5px 12px rgba(var(--pkrgb),.32)
}
#tsm .tsx:active {
transform:scale(.92)
}
#tsm .tsb {
flex:1;
min-height:0;
overflow:hidden;
padding:4px 14px 16px;
display:flex;
flex-direction:column;
gap:10px
}
#tsm .tsf {
display:grid;
grid-template-columns:1fr 1fr;
gap:8px;
flex:none
}
#tsm .tsf a {
display:flex;
align-items:center;
gap:9px;
background:rgba(255,255,255,.8);
border-radius:20px;
padding:9px 10px;
text-decoration:none;
color:var(--ink);
box-shadow:0 6px 16px rgba(var(--pkrgb),.14);
border:1.5px solid rgba(255,255,255,.95);
min-width:0;
transition:transform .15s
}
#tsm .tsf a:active {
transform:scale(.97)
}
#tsm .tsf a b {
display:block;
font:800 14px Fredoka,Nunito,sans-serif;
color:var(--h25);
line-height:1.15
}
#tsm .tsf a small {
display:block;
font:700 11px/1.25 Nunito,sans-serif;
color:var(--h14);
margin-top:2px
}
#tsm .tss {
display:flex;
gap:6px;
flex:none
}
#tsm .tss span {
display:inline-flex;
align-items:center;
justify-content:center;
gap:5px;
border-radius:999px;
padding:7px 8px;
font:800 12px Nunito,sans-serif;
white-space:nowrap;
min-width:0
}
#tsm .tss .tsv {
width:15px;
height:15px
}
#tsm .tss .p1 {
flex:none;
color:#fff;
background:linear-gradient(145deg,var(--pk2),var(--pk1));
box-shadow:0 5px 12px rgba(var(--pkrgb),.3);
padding:7px 11px
}
#tsm .tss .p2 {
flex:1;
color:var(--h25);
background:rgba(255,255,255,.85);
border:1.5px solid #ffd0e3
}
#tsm .tsc {
background:rgba(255,255,255,.82);
border:1.5px solid rgba(255,255,255,.95);
border-radius:24px;
padding:12px 14px;
box-shadow:0 8px 20px rgba(var(--pkrgb),.14);
backdrop-filter:blur(10px);
-webkit-backdrop-filter:blur(10px)
}
#tsm .tsc h4 {
margin:0 0 4px;
display:flex;
align-items:center;
gap:7px;
font:800 16px Fredoka,Nunito,sans-serif;
color:var(--h25)
}
#tsm .tsc h4 .tsv {
width:18px;
height:18px;
color:var(--pk1)
}
#tsm .tsr {
flex:none
}
#tsm .tst {
display:flex;
justify-content:center;
gap:6px;
margin:0 0 8px
}
#tsm .tst button {
border:0;
background:none;
font-size:34px;
line-height:1;
color:#f7cfe0;
cursor:pointer;
padding:0 3px;
transition:transform .12s,color .15s
}
#tsm .tst button.on {
color:var(--pk1);
text-shadow:0 3px 8px rgba(var(--pkrgb),.35)
}
#tsm .tst button:active {
transform:scale(1.2)
}
#tsm .tsc input,#tsm .tsc textarea {
width:100%;
box-sizing:border-box;
border:1.5px solid var(--h29);
background:#fff;
color:#3a0c24;
border-radius:16px;
padding:9px 13px;
font:600 14px Nunito,sans-serif;
outline:none;
margin:0 0 7px;
resize:none;
display:block
}
#tsm .tsc textarea {
height:52px;
overflow:hidden;
scrollbar-width:none
}
#tsm .tsc textarea::-webkit-scrollbar {
display:none
}
#tsm .tsc input:focus,#tsm .tsc textarea:focus {
border-color:var(--pk1);
box-shadow:0 0 0 3px rgba(var(--pkrgb),.12)
}
#tsm .tsk {
width:100%;
border:0;
border-radius:999px;
padding:12px;
background:linear-gradient(145deg,var(--pk2),var(--pk1));
color:#fff;
font:800 15px Nunito,sans-serif;
cursor:pointer;
box-shadow:0 6px 14px rgba(var(--pkrgb),.34)
}
#tsm .tsk:active {
transform:scale(.98)
}
#tsm .tsk:disabled {
opacity:.6
}
#tsm .tsw {
flex:1 1 auto;
min-height:96px;
display:flex;
flex-direction:column;
overflow:hidden
}
#tsm .tstabs {
display:flex;
align-items:center;
gap:6px;
flex:none;
margin-bottom:6px
}
#tsm .tstabs button {
display:inline-flex;
align-items:center;
gap:5px;
border:0;
border-radius:999px;
padding:7px 11px;
font:800 12.5px Nunito,sans-serif;
cursor:pointer;
color:var(--pk1);
background:#fff;
box-shadow:inset 0 0 0 1.5px var(--h29);
white-space:nowrap
}
#tsm .tstabs button .tsv {
width:15px;
height:15px
}
#tsm .tstabs button.on {
color:#fff;
background:linear-gradient(145deg,var(--pk2),var(--pk1));
box-shadow:0 5px 12px rgba(var(--pkrgb),.3)
}
#tsm .tstabs .tsmore {
margin-left:auto;
background:none;
box-shadow:none;
padding:6px 2px;
color:var(--h25)
}
#tsm .tsli {
flex:1;
min-height:0;
overflow:auto;
scrollbar-width:none
}
#tsm .tsli::-webkit-scrollbar {
display:none
}
#tsm .tsmq {
min-height:150px;
max-height:260px;
overflow-y:auto;
overscroll-behavior:contain;
touch-action:pan-y;
scrollbar-width:none;
position:relative;
-webkit-mask-image:linear-gradient(transparent,#000 9%,#000 91%,transparent);
mask-image:linear-gradient(transparent,#000 9%,#000 91%,transparent)
}
#tsm .tsms {
padding:6px 0
}
#tsm .tsmq .tsi {
padding:6px 0
}
#tsm .tsmq .tsi p {
font-size:13px;
line-height:1.3;
-webkit-line-clamp:2
}
#tsm .tsmq .tsm {
font-weight:800;
margin-bottom:1px
}
#tsm .tsmq .tsm {
display:flex;
align-items:center;
justify-content:space-between;
gap:8px
}
#tsm .tsmq .tsm .s {
margin:0;
flex:none
}
#tsm .tsmq .tsm .tsd {
font-style:normal;
font-weight:700;
font-size:11.5px;
opacity:.75
}
#tsm .tsmq::-webkit-scrollbar {
display:none
}
#tsm .tsn {
font:600 13px Nunito,sans-serif;
color:var(--mut);
margin-top:8px;
line-height:1.4
}
#tsm .tsi {
padding:7px 0;
border-top:1px dashed var(--h29)
}
#tsm .tsi:first-child {
border-top:0;
padding-top:0
}
#tsm .tsm {
font:700 12px Nunito,sans-serif;
color:var(--h14)
}
#tsm .tsi .s {
color:var(--pk1);
letter-spacing:1px;
font-size:13px;
margin:2px 0
}
#tsm .tsi p {
margin:0;
font:700 13.5px Nunito,sans-serif;
line-height:1.35;
overflow-wrap:anywhere;
color:#3a0c24;
display:-webkit-box;
-webkit-line-clamp:2;
-webkit-box-orient:vertical;
overflow:hidden
}
#tsm .tsi .ok {
color:var(--h25);
font:800 12px Nunito,sans-serif;
margin:2px 0
}
#tsm .tse {
color:var(--h14);
font:700 13.5px Nunito,sans-serif;
text-align:center;
padding:14px 0
}
@media(max-width:480px) {
#tsm {
padding:8px
}
}
@media(max-height:620px) {
#tsm .tsb {
overflow:auto
}
#tsm .tsw {
flex:none
}
}
@media (prefers-color-scheme:dark) {
:root:not([data-theme="light"]) #tsm .tsp {
background:linear-gradient(170deg,#1c1318,#241820 55%,#21161c)
}
:root:not([data-theme="light"]) #tsm .tsc,:root:not([data-theme="light"]) #tsm .tsf a,:root:not([data-theme="light"]) #tsm .tss .p2 {
background:rgba(42,29,37,.85);
border-color:#4a3040
}
:root:not([data-theme="light"]) #tsm .tsi p {
color:var(--ink)
}
:root:not([data-theme="light"]) #tsm .tsc input,:root:not([data-theme="light"]) #tsm .tsc textarea {
background:#2a1d25;
color:var(--ink);
border-color:#4a3040
}
:root:not([data-theme="light"]) #tsm .tstabs button:not(.on) {
background:#46273a
}
}
:root[data-theme="dark"] #tsm .tsp {
background:linear-gradient(170deg,#1c1318,#241820 55%,#21161c)
}
:root[data-theme="dark"] #tsm .tsc,:root[data-theme="dark"] #tsm .tsf a,:root[data-theme="dark"] #tsm .tss .p2 {
background:rgba(42,29,37,.85);
border-color:#4a3040
}
:root[data-theme="dark"] #tsm .tsi p {
color:var(--ink)
}
:root[data-theme="dark"] #tsm .tsc input,:root[data-theme="dark"] #tsm .tsc textarea {
background:#2a1d25;
color:var(--ink);
border-color:#4a3040
}
:root[data-theme="dark"] #tsm .tstabs button:not(.on) {
background:#46273a
}
/* ===== csbot-css ===== */
#csb {
position:fixed;
inset:0;
z-index:60;
display:none;
align-items:center;
justify-content:center;
background:#2a141c88;
backdrop-filter:blur(3px);
padding:12px
}
#csb.on {
display:flex
}
#csb .csp {
background:var(--card);
color:var(--ink);
width:100%;
max-width:430px;
height:min(94vh,700px);
border-radius:30px;
display:flex;
flex-direction:column;
overflow:hidden;
box-shadow:0 20px 50px rgba(var(--pr),.35);
animation:slide .28s ease both
}
#csb .csh {
display:flex;
align-items:center;
gap:10px;
padding:14px 14px 12px;
border-bottom:1.5px solid var(--line)
}
#csb .csr {
width:38px;
height:38px;
border-radius:50%;
border:0;
background:var(--pink2);
color:var(--pink);
font-size:20px;
line-height:1;
cursor:pointer;
flex:none;
display:flex;
align-items:center;
justify-content:center
}
#csb .csx {
width:42px;
height:42px;
font-size:18px
}
#csb .csav {
width:48px;
height:48px;
border-radius:50%;
overflow:hidden;
flex:none;
background:var(--pink2);
border:2px solid var(--line)
}
#csb .csav img {
width:100%;
height:100%;
object-fit:cover;
display:block
}
#csb .cst {
flex:1;
min-width:0
}
#csb .cst b {
display:block;
font-family:Fredoka,Nunito,sans-serif;
font-size:19px;
line-height:1.1
}
#csb .cst small {
display:block;
color:var(--pink);
font-weight:700;
font-size:13px;
margin-top:2px;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis
}
#csb .cst small:before {
content:"";
display:inline-block;
width:7px;
height:7px;
border-radius:50%;
background:var(--pink);
margin-right:5px;
vertical-align:1px
}
#csb .cstool {
display:flex;
justify-content:flex-end;
padding:8px 14px 0
}
#csb .cscl {
border:1.5px solid var(--line);
background:var(--card);
color:var(--pink);
font:800 11px Nunito,sans-serif;
border-radius:999px;
padding:5px 11px;
cursor:pointer
}
#csb .csm {
flex:1;
overflow:auto;
padding:10px 14px 6px;
display:flex;
flex-direction:column;
gap:10px;
scroll-behavior:smooth
}
#csb .msg {
max-width:84%;
padding:12px 15px;
border-radius:20px;
font-size:15px;
line-height:1.45;
word-wrap:break-word;
overflow-wrap:anywhere;
animation:csin .22s ease both
}
#csb .msg.b {
align-self:flex-start;
background:var(--card);
border:1.5px solid var(--line);
border-bottom-left-radius:8px;
box-shadow:0 6px 14px rgba(var(--pr),.1)
}
#csb .msg.u {
align-self:flex-end;
background:linear-gradient(135deg,var(--pk2),var(--pk1));
color:#fff;
font-weight:800;
text-shadow:0 1px 2px rgba(120,0,50,.28);
border-bottom-right-radius:8px
}
#csb .msg time {
display:block;
text-align:right;
font-size:12px;
opacity:.7;
margin-top:4px;
font-weight:600
}
#csb .msg.u time {
opacity:1;
color:#fff;
font-weight:700
}
#csb .msg.b time {
color:var(--mut)
}
#csb .csbtn {
display:inline-flex;
align-items:center;
gap:6px;
margin-top:8px;
border:1.5px solid var(--line);
background:var(--card);
color:var(--pink);
font:800 13px Nunito,sans-serif;
border-radius:999px;
padding:8px 13px;
cursor:pointer;
box-shadow:0 4px 10px rgba(var(--pr),.12);
text-decoration:none
}
#csb .typ {
align-self:flex-start;
background:var(--card);
border:1.5px solid var(--line);
border-radius:20px;
border-bottom-left-radius:8px;
padding:13px 16px;
display:flex;
gap:5px
}
#csb .typ i {
width:7px;
height:7px;
border-radius:50%;
background:var(--pink);
opacity:.35;
animation:cstyp 1s infinite
}
#csb .typ i:nth-child(2) {
animation-delay:.15s
}
#csb .typ i:nth-child(3) {
animation-delay:.3s
}
#csb .csq {
display:flex;
gap:7px;
overflow-x:auto;
padding:8px 14px 2px;
scrollbar-width:none
}
#csb .csq::-webkit-scrollbar {
display:none
}
#csb .csq button {
flex:none;
border:1.5px solid var(--line);
background:var(--pink2);
color:var(--pink);
font:800 12.5px Nunito,sans-serif;
border-radius:999px;
padding:7px 12px;
cursor:pointer
}
#csb .cse {
display:none;
flex-wrap:wrap;
gap:4px;
padding:6px 14px 0
}
#csb .cse.on {
display:flex
}
#csb .cse button {
border:0;
background:transparent;
font-size:23px;
cursor:pointer;
padding:2px 4px;
font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif
}
#csb .csf {
display:flex;
align-items:center;
gap:10px;
padding:10px 14px 14px;
border-top:1.5px solid var(--line);
margin-top:6px
}
#csb .cseb {
width:50px;
height:50px;
border-radius:50%;
border:0;
background:var(--card);
box-shadow:0 4px 12px rgba(var(--pr),.2);
color:var(--pink);
font-size:24px;
cursor:pointer;
flex:none
}
#csb .csi {
flex:1;
min-width:0;
height:50px;
border-radius:999px;
border:2px solid var(--line);
background:var(--card);
color:var(--ink);
font:600 15px Nunito,sans-serif;
padding:0 16px;
outline:none
}
#csb .csi:focus {
border-color:var(--pink)
}
#csb .css {
width:50px;
height:50px;
border-radius:50%;
border:0;
background:linear-gradient(135deg,var(--h20),var(--h0));
color:#fff;
font-size:20px;
cursor:pointer;
flex:none;
box-shadow:0 6px 14px rgba(var(--pr),.35)
}
@keyframes csin {
from {
opacity:0;
transform:translateY(6px)
}
to {
opacity:1;
transform:none
}
}
@keyframes cstyp {
0%,100% {
opacity:.3;
transform:none
}
50% {
opacity:1;
transform:translateY(-3px)
}
}
@media(max-width:480px) {
#csb {
padding:0
}
#csb .csp {
max-width:none;
height:100%;
border-radius:0
}
}
/* ===== miws-v12 ===== */
/* ===== v12 • dock aktif pink ala tombol tema/notifikasi/favorit ===== */
html:root:root .dock.dock .ni.on,
html:root:root .dock.dock .ni.on:hover,
html:root:root .dock.dock .ni.on:active,
html:root:root .dock.dock .ni:active {
background:linear-gradient(145deg,var(--pk2),var(--pk1))!important;
color:#fff!important;
border:0!important;
box-shadow:0 5px 12px rgba(var(--pkrgb),.32)!important;
text-shadow:none!important
}
html:root:root .dock.dock .ni.on small,
html:root:root .dock.dock .ni.on .e,
html:root:root .dock.dock .ni.on .miws-s,
html:root:root .dock.dock .ni:active small,
html:root:root .dock.dock .ni:active .e,
html:root:root .dock.dock .ni:active .miws-s {
color:#fff!important
}
html:root:root .dock.dock .ni:active {
transform:scale(.96)!important
}
/* ===== v12 • tombol samping: bulatan pink, ikon putih ===== */
html:root:root #rail .rtg,
html:root:root #mtog,
html:root:root #ixcart {
background:linear-gradient(145deg,var(--pk2),var(--pk1))!important;
color:#fff!important;
border:0!important;
box-shadow:0 6px 14px rgba(var(--pkrgb),.35)!important
}
html:root:root #rail .rtg .miws-s,
html:root:root #mtog .miws-s,
html:root:root #ixcart .miws-s {
color:#fff!important;
stroke:#fff!important
}
html:root:root #mtog.off {
background:linear-gradient(145deg,var(--k0),var(--k1))!important;
color:#fff!important;
box-shadow:0 5px 12px rgba(var(--pkrgb),.18)!important
}
html:root:root #ixcart i {
background:#fff!important;
color:var(--pk1)!important;
box-shadow:0 0 0 2px var(--pk1)!important
}
/* ===== v12 • background seluruh website = halaman utama (emoji terbang tetap) ===== */
html:root:root[data-pal="pink"] body {
background-color:#fff5fa!important;
background-image:
radial-gradient(120% 70% at 10% 0%,#ffd6e8 0%,rgba(255,214,232,0) 62%),
radial-gradient(110% 70% at 100% 100%,#d8f0d4 0%,rgba(216,240,212,0) 60%),
linear-gradient(170deg,#fff5fa,#ffeaf3 55%,#f6fcf3)!important;
background-attachment:fixed!important;
background-size:auto!important;
background-position:0 0!important
}
/* bola blur lembut (pink, hijau, ungu) */
html:root:root[data-pal="pink"] body::before {
background:
radial-gradient(circle 125px at 45px 55px,var(--k2) 0,var(--k2) 65%,transparent 100%),
radial-gradient(circle 135px at calc(100% - 45px) calc(100% - 45px),#c9eac6 0,#c9eac6 65%,transparent 100%),
radial-gradient(circle 95px at calc(100% - 25px) calc(40% + 95px),#efd0f6 0,#efd0f6 65%,transparent 100%)!important;
opacity:.75;
filter:blur(34px)
}
/* pola titik-titik halus */
html:root:root[data-pal="pink"] body::after {
display:block!important;
content:"";
position:fixed;
inset:0;
z-index:-1;
pointer-events:none;
opacity:1;
background-image:radial-gradient(rgba(var(--q0),.17) 1.5px,transparent 1.8px)!important;
background-size:24px 24px!important;
background-repeat:repeat!important;
background-position:0 0!important;
-webkit-mask-image:linear-gradient(#000,transparent 72%);
mask-image:linear-gradient(#000,transparent 72%)
}
/* mode gelap: versi gelap dari tema yang sama */
@media (prefers-color-scheme:dark) {
html:root:root[data-pal="pink"]:not([data-theme="light"]) body {
background-color:#1c1318!important;
background-image:radial-gradient(120% 70% at 10% 0%,rgba(var(--q1),.18) 0%,transparent 62%),radial-gradient(110% 70% at 100% 100%,rgba(127,207,154,.12) 0%,transparent 60%),linear-gradient(170deg,#1c1318,#241820 55%,#1a1f1b)!important
}
html:root:root[data-pal="pink"]:not([data-theme="light"]) body::before {
opacity:.25
}
html:root:root[data-pal="pink"]:not([data-theme="light"]) body::after {
opacity:.5
}
}
html:root:root[data-pal="pink"][data-theme="dark"] body {
background-color:#1c1318!important;
background-image:radial-gradient(120% 70% at 10% 0%,rgba(var(--q1),.18) 0%,transparent 62%),radial-gradient(110% 70% at 100% 100%,rgba(127,207,154,.12) 0%,transparent 60%),linear-gradient(170deg,#1c1318,#241820 55%,#1a1f1b)!important
}
html:root:root[data-pal="pink"][data-theme="dark"] body::before {
opacity:.25
}
html:root:root[data-pal="pink"][data-theme="dark"] body::after {
opacity:.5
}
/* ===== v13 • kategori katalog: tab biasa (tidak berjalan) ===== */
html:root:root .tabs,html:root:root .page.v-katalog .tabs,html:root:root body.edit .tabs {
display:flex!important;
flex-wrap:wrap!important;
gap:8px!important;
overflow:visible!important;
padding:10px 0 16px!important;
margin:0!important;
-webkit-mask-image:none!important;
mask-image:none!important
}
.tabs .tab {
flex:none;
white-space:nowrap
}
/* ===== v14 • chat Tanya Miws: chip topik, tombol kembali & tutup ===== */
html:root:root #csb .csq button,
html:root:root #csb .csr {
background:linear-gradient(145deg,var(--pk2),var(--pk1))!important;
color:#fff!important;
border:0!important;
box-shadow:0 5px 12px rgba(var(--pkrgb),.32)!important;
text-shadow:none!important
}
html:root:root #csb .csq button:active,
html:root:root #csb .csr:active {
transform:scale(.94)
}
/* ===== v16 • chat Tanya Miws: kartu di tengah (sejajar web), tidak fullscreen ===== */
html:root:root #csb {
padding:12px;
align-items:center;
justify-content:center
}
html:root:root #csb .csp {
position:relative;
isolation:isolate;
width:100%;
max-width:460px;
height:min(88vh,680px);
height:min(88dvh,680px);
max-height:calc(100vh - 24px);
border-radius:30px;
background:linear-gradient(170deg,#fff5fa,#ffeaf3 55%,#f6fcf3);
box-shadow:0 22px 56px rgba(var(--pkrgb),.34)
}
html:root:root #csb .csp::before {
content:"";
position:absolute;
z-index:-1;
width:200px;
height:200px;
border-radius:50%;
background:var(--k2);
filter:blur(46px);
opacity:.7;
top:-70px;
right:-60px;
pointer-events:none
}
html:root:root #csb .csp::after {
content:"";
position:absolute;
z-index:-1;
width:220px;
height:220px;
border-radius:50%;
background:#ffc9dc;
filter:blur(48px);
opacity:.7;
bottom:-80px;
left:-70px;
pointer-events:none
}
html:root:root #csb .csh {
border-bottom-color:rgba(255,255,255,.9)
}
html:root:root #csb .csm {
scrollbar-width:none
}
html:root:root #csb .csm::-webkit-scrollbar {
display:none
}
@media(max-width:480px) {
html:root:root #csb {
padding:8px
}
html:root:root #csb .csp {
max-width:460px;
height:min(90vh,680px);
height:min(90dvh,680px);
max-height:calc(100vh - 16px);
border-radius:30px
}
}
@media (prefers-color-scheme:dark) {
:root:not([data-theme="light"]) #csb .csp {
background:linear-gradient(170deg,#1c1318,#241820 55%,#2a1823)!important
}
}
:root[data-theme="dark"] #csb .csp {
background:linear-gradient(170deg,#1c1318,#241820 55%,#2a1823)!important
}
/* ===== v17 • halaman & popup mengambang ala Testimoni ===== */
:root {
--flbg:radial-gradient(circle 130px at 100% 0,rgba(var(--q2),.75),transparent),radial-gradient(circle 140px at 0 100%,rgba(201,234,198,.75),transparent),linear-gradient(170deg,#fff5fa,#ffeaf3 55%,#f6fcf3);
--pk:linear-gradient(145deg,var(--pk2),var(--pk1))
}
.modal {
z-index:57!important
}
.toast {
z-index:70!important
}
body.flo {
overflow:hidden
}
/* backdrop + kartu halaman */
.fback {
position:fixed;
inset:0;
z-index:44;
background:#2a141c88;
backdrop-filter:blur(3px);
-webkit-backdrop-filter:blur(3px)
}
html:root:root .page.fl {
position:fixed;
z-index:45;
left:50%;
top:50%;
transform:translate(-50%,-50%);
width:min(460px,calc(100vw - 24px));
max-width:none;
margin:0;
max-height:min(88vh,720px);
max-height:min(88dvh,720px);
overflow:auto;
scrollbar-width:none;
padding:14px 16px 18px;
border-radius:30px;
background:var(--flbg);
box-shadow:0 22px 56px rgba(var(--pkrgb),.34);
animation:flin .28s ease both
}
.page.fl::-webkit-scrollbar {
display:none
}
@keyframes flin {
from {
opacity:0;
transform:translate(-50%,-47%) scale(.96)
}
to {
opacity:1;
transform:translate(-50%,-50%) scale(1)
}
}
.page.fl .fx {
position:sticky;
top:0;
float:right;
z-index:5;
width:38px;
height:38px;
border-radius:50%;
border:0;
padding:0;
margin:0 0 0 8px;
cursor:pointer;
display:grid;
place-items:center;
background:var(--pk);
box-shadow:0 5px 12px rgba(var(--pkrgb),.32)
}
.page.fl .fx svg {
width:20px;
height:20px;
fill:none;
stroke:#fff;
stroke-width:2;
stroke-linecap:round
}
.page.fl .fx:active {
transform:scale(.92)
}
.page.fl>h2 {
margin:2px 0 10px;
color:var(--k3);
font-family:Fredoka,Nunito,sans-serif
}
.page.fl .grid {
grid-template-columns:1fr 1fr!important
}
/* kartu & isian di dalam */
html:root:root .page.fl .box,html:root:root .page.fl .card {
background:rgba(255,255,255,.82);
border:1.5px solid rgba(255,255,255,.95);
box-shadow:0 8px 20px rgba(var(--pkrgb),.14)
}
html:root:root .page.fl input,html:root:root .page.fl select,html:root:root .page.fl textarea,
html:root:root #modBody input,html:root:root #modBody select,html:root:root #modBody textarea {
border:1.5px solid var(--k0)!important;
border-radius:16px;
background:#fff;
color:#3a0c24
}
html:root:root .page.fl input:focus,html:root:root #modBody input:focus,html:root:root .page.fl textarea:focus,html:root:root #modBody textarea:focus {
border-color:var(--pk1)!important;
box-shadow:0 0 0 3px rgba(var(--pkrgb),.12)
}
/* popup (QRIS, profil pembeli, tema, produk, konfirmasi) = kartu di tengah */
html:root:root .modal {
align-items:center!important;
justify-content:center;
padding:12px
}
html:root:root .modal .sheet {
width:100%;
max-width:460px;
max-height:min(90vh,720px);
max-height:min(90dvh,720px);
border-radius:30px!important;
padding:16px 16px 18px;
background:var(--flbg)!important;
box-shadow:0 22px 56px rgba(var(--pkrgb),.34)!important;
scrollbar-width:none
}
html:root:root .modal .sheet::-webkit-scrollbar {
display:none
}
html:root:root .sheet .grab {
display:none
}
html:root:root #modBody h3.sh,html:root:root #modBody .qrh,html:root:root #modBody .ps-h h3 {
color:var(--k3);
font-family:Fredoka,Nunito,sans-serif
}
html:root:root #modBody .qrx,html:root:root #modBody .ps-b:last-child {
background:var(--pk)!important;
color:#fff!important;
border:0!important;
box-shadow:0 5px 12px rgba(var(--pkrgb),.32)!important
}
/* tombol pink seragam */
html:root:root .page.fl .btn:not(.ghost):not(.red):not(.wago):not(.nf):not(:disabled),
html:root:root #modBody#modBody .btn:not(.ghost):not(.red):not(.wago):not(.nf):not(:disabled) {
background:var(--pk)!important;
color:#fff!important;
border:0!important;
border-radius:999px!important;
box-shadow:0 6px 14px rgba(var(--pkrgb),.34)!important;
text-shadow:none!important;
filter:none!important
}
html:root:root .page.fl .btn:not(.ghost):not(.red):not(.wago):not(.nf):not(:disabled) b,
html:root:root .page.fl .btn:not(.ghost):not(.red):not(.wago):not(.nf):not(:disabled) small,
html:root:root #modBody#modBody .btn:not(.ghost):not(.red):not(.wago):not(.nf):not(:disabled) b,
html:root:root #modBody#modBody .btn:not(.ghost):not(.red):not(.wago):not(.nf):not(:disabled) small {
color:#fff!important
}
html:root:root .page.fl .btn.ghost:not(:disabled),html:root:root .page.fl .btn.nf:not(:disabled),
html:root:root #modBody#modBody .btn.ghost:not(:disabled),html:root:root #modBody#modBody .btn.nf:not(:disabled) {
background:#ffe3ef!important;
color:var(--k3)!important;
border:0!important;
border-radius:999px!important;
box-shadow:none!important;
text-shadow:none!important
}
html:root:root .page.fl .btn.ghost:not(:disabled) b,html:root:root #modBody#modBody .btn.ghost:not(:disabled) b,
html:root:root .page.fl .btn.ghost:not(:disabled) small,html:root:root #modBody#modBody .btn.ghost:not(:disabled) small {
color:var(--k3)!important
}
html:root:root .page.fl .btn:active,html:root:root #modBody .btn:active {
transform:scale(.97)!important
}
/* mode gelap */
@media (prefers-color-scheme:dark) {
:root:not([data-theme="light"]) {
--flbg:radial-gradient(circle 130px at 100% 0,rgba(var(--q1),.22),transparent),radial-gradient(circle 140px at 0 100%,rgba(127,207,154,.14),transparent),linear-gradient(170deg,#1c1318,#241820 55%,#1a1f1b)
}
:root:not([data-theme="light"]) .page.fl .box,:root:not([data-theme="light"]) .page.fl .card {
background:rgba(42,29,37,.85)!important;
border-color:#4a3040!important
}
:root:not([data-theme="light"]) .page.fl input,:root:not([data-theme="light"]) #modBody input,:root:not([data-theme="light"]) .page.fl textarea,:root:not([data-theme="light"]) #modBody textarea {
background:#2a1d25!important;
color:var(--ink)!important
}
:root:not([data-theme="light"]) #modBody h3.sh,:root:not([data-theme="light"]) .page.fl>h2 {
color:var(--k4)
}
}
:root[data-theme="dark"] {
--flbg:radial-gradient(circle 130px at 100% 0,rgba(var(--q1),.22),transparent),radial-gradient(circle 140px at 0 100%,rgba(127,207,154,.14),transparent),linear-gradient(170deg,#1c1318,#241820 55%,#1a1f1b)
}
:root[data-theme="dark"] .page.fl .box,:root[data-theme="dark"] .page.fl .card {
background:rgba(42,29,37,.85)!important;
border-color:#4a3040!important
}
:root[data-theme="dark"] .page.fl input,:root[data-theme="dark"] #modBody input,:root[data-theme="dark"] .page.fl textarea,:root[data-theme="dark"] #modBody textarea {
background:#2a1d25!important;
color:var(--ink)!important
}
:root[data-theme="dark"] #modBody h3.sh,:root[data-theme="dark"] .page.fl>h2 {
color:var(--k4)
}
/* ===== v18 • satu halaman QRIS ===== */
html:root:root #modBody .qris.qp {
background:none!important;
border:0!important;
box-shadow:none!important;
padding:0!important;
margin:0!important;
display:flex;
flex-direction:column;
align-items:stretch;
gap:9px;
text-align:center
}
.qp .qv {
width:20px;
height:20px;
fill:none;
stroke:currentColor;
stroke-width:1.9;
stroke-linecap:round;
stroke-linejoin:round;
flex:none;
display:block
}
.qp .qph {
display:flex;
align-items:center;
gap:10px;
text-align:left
}
.qp .qbd {
width:42px;
height:42px;
border-radius:50%;
display:grid;
place-items:center;
flex:none;
color:#fff;
background:var(--pk);
box-shadow:0 5px 12px rgba(var(--pkrgb),.32)
}
.qp .qpt {
flex:1;
min-width:0
}
.qp .qpt b {
display:block;
font:700 21px/1.1 Fredoka,Nunito,sans-serif;
background:linear-gradient(135deg,var(--k5),var(--k3));
-webkit-background-clip:text;
background-clip:text;
color:transparent
}
.qp .qpt small {
display:block;
font:700 12.5px Nunito,sans-serif;
color:var(--k6);
margin-top:2px
}
html:root:root #modBody .qp .qrx {
width:38px;
height:38px;
border-radius:50%;
display:grid;
place-items:center;
padding:0;
flex:none;
cursor:pointer
}
.qp .qrx .qv {
stroke:#fff
}
html:root:root #modBody .qp .oidrow {
display:flex;
align-items:center;
justify-content:center;
gap:8px;
margin:0 auto!important;
padding:5px 6px 5px 14px;
border-radius:999px;
background:rgba(255,255,255,.85);
border:1.5px solid #ffd0e3;
font:700 12.5px Nunito,sans-serif;
max-width:100%
}
.qp .oidrow span {
color:var(--k6)
}
.qp .oidrow b {
color:#3a0c24;
letter-spacing:.02em
}
html:root:root #modBody .qp .cpy {
border:0;
border-radius:999px;
background:var(--pk)!important;
color:#fff!important;
font:800 11.5px Nunito,sans-serif;
padding:6px 12px;
cursor:pointer;
box-shadow:0 4px 10px rgba(var(--pkrgb),.3)
}
html:root:root #modBody .qp .qrcard {
background:#fff;
border:2px solid var(--k0);
border-radius:26px;
padding:12px 12px 8px;
max-width:236px;
margin:0 auto;
box-shadow:0 8px 20px rgba(var(--pkrgb),.16)
}
html:root:root #modBody .qp .qrcard .qrimg {
display:block;
width:100%;
max-width:190px;
height:auto;
margin:0 auto;
padding:0;
border:0;
box-shadow:none;
border-radius:6px;
background:#fff
}
.qp .qrname {
font:800 13.5px Fredoka,Nunito,sans-serif;
color:#3a0c24;
margin-top:4px
}
.qp .qpa {
display:flex;
align-items:center;
justify-content:center;
gap:10px;
margin-top:2px
}
html:root:root #modBody .qp .qrprice {
font:700 34px/1.1 Fredoka,Nunito,sans-serif;
color:var(--pk1);
margin:0
}
html:root:root #modBody .qp .qrnote {
font:700 13px Nunito,sans-serif;
color:var(--k6);
margin:0
}
html:root:root #modBody .qp .qrsteps2 {
font:600 12.5px/1.45 Nunito,sans-serif;
color:var(--k6);
margin:0
}
html:root:root #modBody .qp .qrsteps2 b {
color:var(--k3)
}
html:root:root #modBody .qp .qrrow2 {
display:grid;
grid-template-columns:1fr 1fr;
gap:8px;
margin-top:2px
}
html:root:root #modBody .qp .qrrow2 .btn {
display:flex;
align-items:center;
justify-content:center;
gap:6px;
padding:13px 8px;
font:800 14px Nunito,sans-serif;
margin:0;
width:100%
}
html:root:root #modBody .qp .qrrow2 .btn:only-child {
grid-column:1/-1
}
html:root:root #modBody .qp .qrrow2 .btn .qv {
width:18px;
height:18px
}
html:root:root #modBody .qp .paidbtn:disabled {
background:linear-gradient(145deg,var(--k0),var(--k1))!important;
color:#fff!important;
opacity:.9!important;
box-shadow:none!important
}
html:root:root #modBody .qp .qhint {
display:block;
font:700 12px Nunito,sans-serif;
color:var(--k6);
text-align:center
}
html:root:root #modBody .qwa {
display:block;
text-align:center;
margin-top:10px;
font:700 12.5px Nunito,sans-serif;
color:var(--k6);
text-decoration:none
}
html:root:root #modBody .qwa b {
color:var(--k3);
text-decoration:underline
}
/* ===== v19 • X rapi, QRIS ringkas, receipt cantik, tanpa hijau di testimoni ===== */
:root {
--flbg:radial-gradient(circle 130px at 100% 0,rgba(var(--q2),.75),transparent),radial-gradient(circle 140px at 0 100%,rgba(255,214,232,.85),transparent),linear-gradient(170deg,#fff5fa,#ffeaf3 55%,#fff7fb)
}
@media (prefers-color-scheme:dark) {
:root:not([data-theme="light"]) {
--flbg:radial-gradient(circle 130px at 100% 0,rgba(var(--q1),.22),transparent),radial-gradient(circle 140px at 0 100%,rgba(var(--q1),.12),transparent),linear-gradient(170deg,#1c1318,#241820 55%,#21161c)
}
}
:root[data-theme="dark"] {
--flbg:radial-gradient(circle 130px at 100% 0,rgba(var(--q1),.22),transparent),radial-gradient(circle 140px at 0 100%,rgba(var(--q1),.12),transparent),linear-gradient(170deg,#1c1318,#241820 55%,#21161c)
}
/* tombol X: ikut alur header, tidak keluar kotak */
html:root:root:root .qrtop {
position:static!important;
display:flex;
align-items:center;
justify-content:space-between;
gap:10px;
padding-right:0!important;
margin:0 0 10px!important
}
html:root:root:root .qrtop .qrh {
flex:1;
min-width:0;
font-size:18px!important
}
html:root:root:root #modBody#modBody .qrx {
position:static!important;
top:auto!important;
right:auto!important;
width:34px!important;
height:34px!important;
min-width:34px;
padding:0!important;
margin:0 0 0 auto!important;
border-radius:50%!important;
display:grid!important;
place-items:center;
font-size:15px!important;
line-height:1;
flex:none;
background:var(--pk)!important;
color:#fff!important;
box-shadow:0 4px 10px rgba(var(--pkrgb),.3)!important
}
html:root:root:root #modBody#modBody .qrx:active {
transform:scale(.9)!important
}
html:root:root:root #modBody#modBody .qp .qrx .qv {
width:16px;
height:16px
}
/* QRIS: tombol Unduh & Saya sudah bayar lebih kecil */
html:root:root:root #modBody#modBody .qp .qrrow2 {
display:flex!important;
justify-content:center;
gap:8px;
margin-top:2px
}
html:root:root:root #modBody#modBody .qp .qrrow2 .btn.btn.btn.btn.btn {
width:auto!important;
flex:0 1 auto;
min-height:0!important;
padding:8px 16px!important;
font:800 12.5px Nunito,sans-serif!important;
gap:5px;
border-radius:999px!important;
box-shadow:none!important;
margin:0!important
}
html:root:root:root #modBody#modBody .qp .qrrow2 .btn .qv {
width:15px!important;
height:15px!important
}
html:root:root:root #modBody#modBody .qp .qhint {
font-size:11.5px
}
/* Receipt pembelian */
html:root:root:root .rcpt {
background:#fff;
border:2px dashed var(--k4);
border-radius:26px;
padding:16px 14px 14px;
box-shadow:0 10px 24px rgba(var(--pkrgb),.12)
}
html:root:root:root .rcpt-t {
font-size:20px;
background:linear-gradient(135deg,var(--k5),var(--k3));
-webkit-background-clip:text;
background-clip:text;
color:transparent
}
html:root:root:root .rcpt-id {
background:linear-gradient(145deg,#ffe3ef,#ffd0e3);
color:var(--k3);
border:1.5px solid var(--k0);
font-size:16px;
letter-spacing:2px;
padding:7px 18px;
margin:8px auto
}
html:root:root:root .rcpt-hi {
font-size:14px;
color:var(--k3)
}
html:root:root:root .rcpt-box {
border:1.5px dashed var(--k0);
border-radius:20px;
background:#fff8fb
}
html:root:root:root .rrow {
font-size:14px;
padding:7px 0
}
html:root:root:root .rrow.tot {
border-top:1.5px dashed var(--k0)
}
html:root:root:root .rcpt-msg {
background:#ffe3ef;
font-size:13px;
border-radius:16px;
padding:10px 12px
}
html:root:root:root #modBody#modBody .rcpt .btn.btn.btn.btn.btn.btn {
display:flex!important;
align-items:center;
justify-content:center;
gap:8px;
width:100%;
box-sizing:border-box;
min-height:0!important;
padding:10px 16px!important;
font:800 13.5px Nunito,sans-serif!important;
border-radius:999px!important;
margin:8px 0 0!important;
transform:none!important;
text-decoration:none;
filter:none!important
}
html:root:root:root #modBody#modBody .rcpt .btn.btn.btn.btn.btn.btn::after {
display:none!important
}
html:root:root:root #modBody#modBody .rcpt .cfmbtn.btn.btn.btn.btn.btn.btn {
background:linear-gradient(180deg,#4ade80,#16a34a)!important;
color:#fff!important;
border:0!important;
box-shadow:0 5px 12px rgba(34,197,94,.28)!important
}
html:root:root:root #modBody#modBody .rcpt .cfmbtn.ok.btn.btn.btn.btn.btn.btn {
background:linear-gradient(180deg,#86efac,#22c55e)!important
}
html:root:root:root #modBody#modBody .rcpt [data-act="gohist"].btn.btn.btn.btn.btn.btn {
background:#fff!important;
color:var(--k3)!important;
border:2px solid var(--k7)!important;
box-shadow:none!important
}
html:root:root:root .cfmbox {
width:20px;
height:20px;
border-radius:6px;
font-size:14px
}
html:root:root:root .cfmhint {
font-size:11px;
margin-top:5px!important
}
/* ===== v19b • Profil & Jam Buka ala Testimoni ===== */
html:root:root .page.fl.v-profil {
padding:14px 14px 18px
}
.v-profil .pfhead {
display:flex;
align-items:center;
gap:12px;
margin:0 0 12px;
min-height:44px
}
.v-profil .pfav {
width:54px;
height:54px;
border-radius:50%;
overflow:hidden;
flex:none;
border:3px solid #fff;
background:#ffe3ef;
box-shadow:0 5px 12px rgba(var(--pkrgb),.32);
display:grid;
place-items:center;
font-size:24px
}
.v-profil .pfav img {
width:100%;
height:100%;
object-fit:cover;
display:block
}
.v-profil .pft {
min-width:0
}
.v-profil .pft h2 {
margin:0;
font:700 22px/1.1 Fredoka,Nunito,sans-serif;
background:linear-gradient(135deg,var(--k5),var(--k3));
-webkit-background-clip:text;
background-clip:text;
color:transparent
}
.v-profil .pft small {
display:block;
margin-top:3px;
font:700 12px Nunito,sans-serif;
color:var(--k6)
}
html:root:root .v-profil .bio {
margin:0 0 12px;
padding:12px 14px;
border-radius:24px;
background:rgba(255,255,255,.9);
box-shadow:0 8px 20px rgba(var(--pkrgb),.12);
font:600 13.5px/1.65 Nunito,sans-serif;
color:#3a0c24;
text-align:center
}
.v-profil .pfc,.v-profil .jam {
background:rgba(255,255,255,.9);
border:0;
border-radius:26px;
padding:14px;
margin:0 0 12px;
box-shadow:0 8px 20px rgba(var(--pkrgb),.14)
}
.v-profil .pfh4,.v-profil .jamh {
display:flex;
align-items:center;
gap:10px;
margin:0 0 6px;
padding:0;
background:none
}
.v-profil .pfh4 {
font:700 17px Fredoka,Nunito,sans-serif;
color:var(--k3)
}
.v-profil .jamh b {
font:700 17px Fredoka,Nunito,sans-serif;
background:linear-gradient(135deg,var(--k5),var(--k3));
-webkit-background-clip:text;
background-clip:text;
color:transparent
}
.v-profil .pfi,.v-profil .jbd {
width:34px;
height:34px;
border-radius:50%;
flex:none;
display:grid;
place-items:center;
background:linear-gradient(145deg,var(--pk2),var(--pk1));
box-shadow:0 5px 12px rgba(var(--pkrgb),.32)
}
.v-profil .pfi svg,.v-profil .jbd svg {
width:18px;
height:18px;
fill:none;
stroke:#fff;
stroke-width:1.9;
stroke-linecap:round;
stroke-linejoin:round
}
.v-profil .pfc .cat {
font:700 12px/1.45 Nunito,sans-serif;
color:var(--k6);
margin:0 0 10px
}
.v-profil .pfc label {
font:800 12px Nunito,sans-serif;
color:var(--k6)
}
.v-profil .pfc .btn {
width:100%;
padding:11px;
font-size:13.5px;
border-radius:999px
}
.v-profil .jamb {
padding:6px 0 0;
gap:6px
}
.v-profil .jst {
background:#fff0f6;
border:1.5px solid #ffd0e3;
border-radius:999px;
padding:9px 14px;
font:800 13px Nunito,sans-serif
}
.v-profil .jst .jd {
width:10px;
height:10px;
background:var(--pk1);
box-shadow:0 0 0 4px rgba(var(--pkrgb),.2)
}
.v-profil .jst.on b {
color:var(--k3)
}
.v-profil .jst.off .jd {
background:var(--k8);
box-shadow:0 0 0 4px rgba(var(--q3),.25)
}
.v-profil .jst.off b {
color:var(--k6)
}
.v-profil .jrow {
background:#fff;
border:1.5px solid #ffe0ec;
border-radius:999px;
padding:8px 14px;
font:700 13px Nunito,sans-serif;
color:#3a0c24
}
.v-profil .jrow.now {
background:linear-gradient(145deg,var(--pk2),var(--pk1));
border-color:transparent;
box-shadow:0 5px 12px rgba(var(--pkrgb),.3)
}
.v-profil .jrow.now span,.v-profil .jrow.now b {
color:#fff
}
.v-profil .jrow em {
background:rgba(255,255,255,.28);
color:#fff
}
.v-profil .jnote {
margin:6px 4px 0;
font:700 12px/1.5 Nunito,sans-serif;
color:var(--k6)
}
@media (prefers-color-scheme:dark) {
:root:not([data-theme="light"]) .v-profil .pfc,:root:not([data-theme="light"]) .v-profil .jam,:root:not([data-theme="light"]) .v-profil .bio {
background:rgba(42,29,37,.85)
}
:root:not([data-theme="light"]) .v-profil .jrow {
background:#2a1d25;
border-color:#4a3040;
color:var(--ink)
}
:root:not([data-theme="light"]) .v-profil .jst {
background:#33222c;
border-color:#4a3040
}
:root:not([data-theme="light"]) .v-profil .bio {
color:var(--ink)
}
}
:root[data-theme="dark"] .v-profil .pfc,:root[data-theme="dark"] .v-profil .jam,:root[data-theme="dark"] .v-profil .bio {
background:rgba(42,29,37,.85)
}
:root[data-theme="dark"] .v-profil .jrow {
background:#2a1d25;
border-color:#4a3040;
color:var(--ink)
}
:root[data-theme="dark"] .v-profil .jst {
background:#33222c;
border-color:#4a3040
}
:root[data-theme="dark"] .v-profil .bio {
color:var(--ink)
}
/* ===== v19c • jam buka di samping Online ===== */
html:root .prof .pn small .orow {
display:flex!important;
align-items:center;
gap:6px;
margin:0!important;
line-height:1.2!important;
white-space:nowrap
}
html:root .prof .pn small .orow .ost {
display:inline!important
}
html:root .prof .pn small .orow .ojam {
display:inline-block;
padding:1px 7px;
border-radius:999px;
background:rgba(255,255,255,.75);
border:1px solid var(--k0);
color:var(--k3);
font:800 10px/1.5 Nunito,sans-serif
}
@media (prefers-color-scheme:dark) {
:root:not([data-theme="light"]) .prof .pn small .orow .ojam {
background:#2a1d25;
border-color:#4a3040;
color:var(--k4)
}
}
:root[data-theme="dark"] .prof .pn small .orow .ojam {
background:#2a1d25;
border-color:#4a3040;
color:var(--k4)
}
/* ===== v19d • popup jam buka ===== */
html:root .prof .pn small .orow {
cursor:pointer
}
html:root:root:root #modBody#modBody .jpop {
position:relative
}
html:root:root:root #modBody#modBody .jpop .qrx {
position:absolute!important;
top:10px!important;
right:10px!important;
z-index:3
}
.jpop .jam {
margin:0!important
}
.jpop .jamh {
padding-right:44px
}
/* ===== v19e • header jam, Cara Order & kalender ala Testimoni ===== */
html:root .prof .pn small .orow .ojam {
display:inline-flex;
align-items:center;
gap:6px;
padding:2px 11px 2px 2px;
border-radius:999px;
background:#fff;
border:1.5px solid var(--k0);
color:var(--k3);
font:800 12px/1.4 Nunito,sans-serif;
box-shadow:0 4px 10px rgba(var(--pkrgb),.15)
}
html:root .prof .pn small .orow .ojb {
width:22px;
height:22px;
border-radius:50%;
flex:none;
display:grid;
place-items:center;
background:linear-gradient(145deg,var(--pk2),var(--pk1));
box-shadow:0 3px 8px rgba(var(--pkrgb),.32)
}
html:root .prof .pn small .orow .ojb svg {
width:13px;
height:13px;
fill:none;
stroke:#fff;
stroke-width:2;
stroke-linecap:round;
stroke-linejoin:round
}
@media (prefers-color-scheme:dark) {
:root:not([data-theme="light"]) .prof .pn small .orow .ojam {
background:#2a1d25;
border-color:#4a3040;
color:var(--k4)
}
}
:root[data-theme="dark"] .prof .pn small .orow .ojam {
background:#2a1d25;
border-color:#4a3040;
color:var(--k4)
}
/* Cara Order */
html:root:root .ordh {
background:none!important;
box-shadow:none!important
}
html:root:root .ord {
background:#fff;
border:1.5px solid #ffd0e3;
border-radius:26px;
box-shadow:0 8px 20px rgba(var(--pkrgb),.12)
}
html:root:root .ord .on {
width:38px;
height:38px;
background:linear-gradient(145deg,var(--pk2),var(--pk1))!important;
color:#fff!important;
font:700 17px Fredoka,Nunito,sans-serif;
box-shadow:0 5px 12px rgba(var(--pkrgb),.32)!important;
border:0
}
html:root:root .ord p b {
color:var(--k3)
}
html:root:root .ordnote {
background:linear-gradient(145deg,var(--pk2),var(--pk1))!important;
color:#fff!important;
border:0!important;
box-shadow:0 5px 12px rgba(var(--pkrgb),.3)
}
/* Kalender */
html:root:root .cal {
border:1.5px solid #ffd0e3;
border-radius:26px;
box-shadow:0 8px 20px rgba(var(--pkrgb),.12)
}
html:root:root .cal .cb {
min-width:36px;
height:36px;
border-radius:50%;
background:linear-gradient(145deg,var(--pk2),var(--pk1))!important;
color:#fff!important;
font-size:20px;
box-shadow:0 5px 12px rgba(var(--pkrgb),.32)!important;
border:0
}
html:root:root .cal .cb[data-act="caltoday"] {
min-width:0;
height:26px!important;
border-radius:999px;
padding:0 12px;
font-size:11px!important;
font-weight:800
}
html:root:root .cal .cd.t {
background:linear-gradient(145deg,var(--pk2),var(--pk1))!important;
color:#fff!important;
box-shadow:0 5px 12px rgba(var(--pkrgb),.32)
}
html:root:root .cal .tg:not(.x):not(.e) {
background:linear-gradient(145deg,var(--pk2),var(--pk1))!important;
color:#fff!important;
box-shadow:0 3px 8px rgba(var(--pkrgb),.28)
}
html:root:root .cal .sw.t {
background:linear-gradient(145deg,var(--pk2),var(--pk1))
}
/* ===== v19f • tombol Online tetap tampil, pil jam = emoji + "Jam" ===== */
html:root .prof .pn small .orow {
display:flex!important;
flex-wrap:nowrap;
align-items:center;
gap:8px
}
html:root .prof .pn small .orow .ost {
display:inline-block!important;
flex:none;
white-space:nowrap;
font:800 14px/1.2 Nunito,sans-serif
}
html:root .prof .pn small .orow .ojam {
flex:none;
white-space:nowrap;
padding:3px 11px;
gap:5px
}
html:root .prof .pn small .orow .ojc {
font-style:normal;
font-size:14px;
line-height:1
}
/* ===== v19g • Online & Jam diperkecil sama dengan teks trusted since ===== */
html:root .prof .pn small .orow {
gap:6px
}
html:root .prof .pn small .orow .ost {
font:inherit!important;
font-weight:800!important;
line-height:1.2!important
}
html:root .prof .pn small .orow .ojam {
font:inherit!important;
font-weight:800!important;
line-height:1.2!important;
padding:1px 8px!important;
gap:3px!important;
border-width:1px!important;
box-shadow:none!important
}
html:root .prof .pn small .orow .ojc {
font-size:1em!important
}
/* ===== v19h • jam pink tanpa kotak putih, tombol Bagian Penting pink, Cara Order lebih aesthetic ===== */
/* Jam: ikon pink bulat seperti logo, tanpa kotak putih */
html:root:root .prof .pn small .orow .ojam {
background:none!important;
border:0!important;
box-shadow:none!important;
padding:0!important;
gap:4px!important;
color:var(--k3)!important
}
html:root:root .prof .pn small .orow .ojb {
width:17px!important;
height:17px!important;
box-shadow:0 2px 5px rgba(var(--pkrgb),.35)!important
}
html:root:root .prof .pn small .orow .ojb svg {
width:10px!important;
height:10px!important
}
:root[data-theme="dark"] .prof .pn small .orow .ojam {
background:none!important;
border:0!important;
color:var(--k4)!important
}
@media (prefers-color-scheme:dark) {
:root:not([data-theme="light"]) .prof .pn small .orow .ojam {
background:none!important;
border:0!important;
color:var(--k4)!important
}
}
/* Bagian Penting: kembali putih + garis pink, ikon pink bulat, tulisan pink */
html:root:root .acc {
background:var(--card)!important;
border:1.5px solid var(--k4)!important;
border-radius:26px!important;
box-shadow:0 6px 16px rgba(var(--pkrgb),.12)!important;
overflow:hidden
}
html:root:root .acc>summary {
background:none!important;
color:var(--k3)!important;
padding:14px 18px!important;
font:700 16px/1.3 Fredoka,Nunito,sans-serif!important;
text-shadow:none!important;
gap:10px;
justify-content:flex-start
}
html:root:root .acc>summary::after {
margin-left:auto;
flex:none;
width:auto;
height:auto;
background:none!important;
box-shadow:none!important;
color:var(--pk1)!important;
font:700 20px/1 Fredoka,Nunito,sans-serif
}
html:root:root .acc .acc {
box-shadow:none!important;
border-radius:22px!important
}
html:root:root .acc .acc>summary {
font-size:14.5px!important;
padding:12px 15px!important
}
.acc>summary .aic {
flex:none;
width:34px;
height:34px;
border-radius:50%;
display:grid;
place-items:center;
background:linear-gradient(145deg,var(--pk2),var(--pk1));
box-shadow:0 4px 10px rgba(var(--pkrgb),.32),inset 0 2px 0 rgba(255,255,255,.4)
}
.acc>summary .aic svg {
width:19px;
height:19px;
fill:none;
stroke:#fff;
stroke-width:2;
stroke-linecap:round;
stroke-linejoin:round
}
html:root:root .acc .acc>summary .aic {
width:28px;
height:28px
}
html:root:root .acc .acc>summary .aic svg {
width:16px;
height:16px
}
:root[data-theme="dark"] .acc>summary {
color:var(--k4)!important
}
@media (prefers-color-scheme:dark) {
:root:not([data-theme="light"]) .acc>summary {
color:var(--k4)!important
}
}
/* Cara Order: lebih aesthetic */
html:root:root .ordh {
font:700 24px/1.2 Fredoka,Nunito,sans-serif!important;
color:var(--k3)!important;
margin:22px 0 2px!important
}
html:root:root .ordh::after {
content:" ✨";
font-size:18px
}
html:root:root .ordsub {
color:var(--k9)!important;
margin-bottom:14px!important
}
html:root:root .ords {
gap:14px!important
}
html:root:root .ord {
background:linear-gradient(160deg,#fff 0%,#fff6fa 55%,#ffe6f1 100%)!important;
border:1.5px solid #ffd0e3!important;
border-radius:28px!important;
padding:16px 14px 16px!important;
min-height:150px;
box-shadow:0 10px 22px rgba(var(--pkrgb),.15),inset 0 1px 0 #fff!important;
transition:transform .2s
}
html:root:root .ord:active {
transform:scale(.97)
}
html:root:root .ord:before {
right:-26px!important;
top:-26px!important;
width:96px!important;
height:96px!important;
background:radial-gradient(circle at 35% 35%,#ffe0ee,var(--k10))!important;
opacity:1!important
}
html:root:root .ord:after {
content:"";
position:absolute;
right:10px;
bottom:10px;
width:46px;
height:30px;
background-image:radial-gradient(var(--k11) 1.6px,transparent 1.7px);
background-size:10px 10px;
opacity:.7;
pointer-events:none
}
html:root:root .ord .on {
width:40px!important;
height:40px!important;
box-shadow:0 0 0 4px #ffe1ee,0 6px 14px rgba(var(--pkrgb),.38),inset 0 2px 0 rgba(255,255,255,.45)!important
}
html:root:root .ord .oe {
right:14px!important;
top:11px!important;
font-size:30px!important;
transform:rotate(-8deg)
}
html:root:root .ord:nth-child(even) .oe {
transform:rotate(8deg)
}
html:root:root .ord p {
margin-top:14px!important;
font:800 13.5px/1.55 Nunito,sans-serif!important;
color:#4a1633!important
}
html:root:root .ord p b {
color:var(--k3)!important;
background:linear-gradient(transparent 62%,#ffd0e3 62%);
padding:0 2px;
border-radius:3px
}
html:root:root .ordnote {
background:linear-gradient(145deg,var(--pk2),var(--pk1))!important;
box-shadow:0 8px 18px rgba(var(--pkrgb),.3)!important;
border-radius:999px!important;
padding:12px 18px!important;
font:700 13.5px Fredoka,Nunito,sans-serif!important;
margin-top:4px
}
:root[data-theme="dark"] .ord {
background:linear-gradient(160deg,#2f212a,#2a1d25 60%,#3a2230)!important;
border-color:#4a3040!important
}
:root[data-theme="dark"] .ord p {
color:var(--ink)!important
}
:root[data-theme="dark"] .ord:before {
background:radial-gradient(circle at 35% 35%,#5a3347,#3e2432)!important
}
:root[data-theme="dark"] .ord p b {
color:var(--k4)!important;
background:linear-gradient(transparent 62%,#4a3040 62%)
}
@media (prefers-color-scheme:dark) {
:root:not([data-theme="light"]) .ord {
background:linear-gradient(160deg,#2f212a,#2a1d25 60%,#3a2230)!important;
border-color:#4a3040!important
}
:root:not([data-theme="light"]) .ord p {
color:var(--ink)!important
}
:root:not([data-theme="light"]) .ord:before {
background:radial-gradient(circle at 35% 35%,#5a3347,#3e2432)!important
}
:root:not([data-theme="light"]) .ord p b {
color:var(--k4)!important;
background:linear-gradient(transparent 62%,#4a3040 62%)
}
}
/* ===== v19i • tombol pink seragam (terang) & judul huruf kapital ===== */
html:root:root:root .btn.btn.btn.btn.btn.btn:not(.ghost):not(.red):not(.wago):not(.dirty):not(:disabled),
html:root:root:root #modBody#modBody .btn.btn.btn.btn.btn.btn:not(.ghost):not(.red):not(.wago):not(.dirty):not(:disabled),
html:root:root:root .page.fl .btn.btn.btn.btn.btn.btn:not(.ghost):not(.red):not(.wago):not(.dirty):not(:disabled),
html:root:root:root .trust .pill.pill.pill,
html:root:root:root .wl.wl.wl.wl.wl.wl.inv,
html:root:root:root .tab.tab.tab.on,
html:root:root:root .chip.chip.chip.on {
background:var(--pk)!important;
color:#fff!important;
border:0!important;
border-radius:999px!important;
box-shadow:0 6px 14px rgba(var(--pkrgb),.34)!important;
text-shadow:none!important;
filter:none!important
}
html:root:root:root .btn.btn.btn.btn.btn.btn:not(:disabled)::after {
display:none!important
}
html:root:root:root .btn.btn.btn.btn.btn.btn:not(.ghost):not(.red):not(.wago):not(.dirty):not(:disabled):active {
transform:scale(.97)!important
}
/* Judul: huruf depan tiap kata kapital */
html:root h1,html:root h2,html:root h3,html:root h4,
html:root .fh,html:root .sh,html:root .qrh,html:root .ordh,html:root .jamh b,html:root .ps-h h3,
html:root .pwat b,html:root .cacc>summary {
text-transform:capitalize
}
/* v20: deskripsi produk ala testimoni + tombol seragam */
.dsc {
margin:10px 0;
border-radius:24px;
background:var(--card);
border:1.5px solid rgba(var(--pr),.18);
box-shadow:0 8px 20px rgba(var(--pr),.14);
overflow:hidden
}
.dsc>summary,.dsc2>summary {
list-style:none;
display:flex;
align-items:center;
gap:10px;
cursor:pointer;
color:var(--pink);
-webkit-tap-highlight-color:transparent
}
.dsc>summary::-webkit-details-marker,.dsc2>summary::-webkit-details-marker {
display:none
}
.dsc>summary {
padding:10px 14px 10px 10px;
font:800 16px Fredoka,Nunito,sans-serif
}
.dsc>summary::after {
content:"\25BE";
margin-left:auto;
font-size:14px;
transition:transform .2s
}
.dsc[open]>summary::after {
transform:rotate(180deg)
}
.dsc>summary span,.dsc2>summary span {
flex:1;
min-width:0
}
.dsci {
width:34px;
height:34px;
border-radius:50%;
flex:none;
display:grid;
place-items:center;
color:#fff;
background:linear-gradient(145deg,var(--pink),var(--pd,var(--pink)));
box-shadow:0 5px 12px rgba(var(--pr),.32)
}
.dsci.s {
width:28px;
height:28px;
box-shadow:0 4px 9px rgba(var(--pr),.28)
}
.dsci svg {
width:18px;
height:18px;
fill:none;
stroke:currentColor;
stroke-width:1.9;
stroke-linecap:round;
stroke-linejoin:round;
display:block
}
.dsci.s svg {
width:15px;
height:15px
}
.dscb {
padding:2px 10px 12px;
display:flex;
flex-direction:column;
gap:8px
}
.dsc2 {
background:var(--pink2);
border:1.5px solid rgba(var(--pr),.16);
border-radius:20px;
padding:0 12px 0 8px
}
.dsc2>summary {
padding:8px 0;
font:800 14px Nunito,sans-serif
}
.dsc2>summary::after {
content:"\FF0B";
margin-left:auto
}
.dsc2[open]>summary::after {
content:"\2212"
}
.dsc2 ul {
margin:0 0 10px;
padding-left:20px;
font:600 12.5px/1.55 Nunito,sans-serif;
color:var(--ink)
}
.dsc2 li {
margin:3px 0
}
html:root .dsc summary,html:root .dsc2 summary {
text-transform:none
}
html:root .cta2 .btn.ghost,html:root .accbox .btn.ghost.big {
display:inline-flex;
align-items:center;
justify-content:center;
gap:6px;
font-family:Fredoka,Nunito,sans-serif;
font-weight:700;
color:var(--pink);
background:var(--card);
border:2px solid var(--pink);
border-radius:999px;
box-shadow:0 5px 0 rgba(var(--pr),.5),0 9px 16px rgba(var(--pr),.16);
text-shadow:none
}
html:root .accbox .btn.ghost.big {
display:flex;
width:100%;
min-height:50px;
padding:13px 18px;
font-size:16px
}
/* v21: cara order putih tanpa garis pink, deskripsi putih */
.dsc2 {
background:#fff;
border:1.5px solid rgba(255,255,255,.95);
box-shadow:0 6px 16px rgba(var(--pr),.14)
}
html:root:root:root .ordh {
background:none!important;
box-shadow:none!important;
border:0!important;
text-shadow:none!important
}
html:root:root:root .ord {
background:#fff!important;
border:0!important;
box-shadow:0 8px 20px rgba(var(--pr),.14)!important
}
html:root:root:root .ord:before,html:root:root:root .ord:after {
display:none!important
}
html:root:root:root .ord p b {
background:none!important;
padding:0!important
}
html:root:root:root .ord .oe {
filter:none!important
}
html:root:root:root .ordnote {
background:#fff!important;
color:var(--pink)!important;
border:0!important;
box-shadow:0 8px 20px rgba(var(--pr),.14)!important;
text-shadow:none!important
}
/* v22: website serba pink */
html:root:root:root {
--peach:var(--pink2);
--mint:var(--pink2);
--lav:var(--pink2)
}
html:root:root:root [data-cat] {
--cc:var(--pink)
}
html:root:root:root .tab:not(.on):hover {
background:color-mix(in srgb,var(--pink) 16%,var(--card))!important
}
html:root:root:root .ctile.ctile {
background:var(--card)!important
}
html:root:root:root #ixback {
width:42px;
height:42px;
padding:0;
border-radius:50%;
display:grid;
place-items:center;
font-size:0;
line-height:0;
background:linear-gradient(145deg,var(--pk2),var(--pk1))!important;
color:#fff!important;
border:0!important;
box-shadow:0 6px 14px rgba(var(--pkrgb),.35)!important
}
html:root:root:root #ixback .miws-s {
width:21px;
height:21px;
color:#fff!important;
stroke:#fff!important
}
/* v25: ikon QRIS di catatan Cara Order */
html:root:root:root .ordnote {
gap:10px!important;
padding:8px 18px 8px 10px!important
}
.ordqi {
width:30px;
height:30px;
border-radius:50%;
display:grid;
place-items:center;
flex:none;
color:#fff;
background:linear-gradient(145deg,var(--pk2),var(--pk1));
box-shadow:0 5px 12px rgba(var(--pkrgb),.32)
}
.ordqi svg {
width:17px;
height:17px;
fill:none;
stroke:currentColor;
stroke-width:1.9;
stroke-linecap:round;
stroke-linejoin:round;
display:block
}
/* ===== v26 • pilihan favorit: bintang di kanan kartu ===== */
.card .ph .pstar {
position:absolute;
top:0;
right:0;
width:24px;
height:24px;
border-radius:50%;
display:grid;
place-items:center;
background:linear-gradient(145deg,#ffe27a,#ffb300);
box-shadow:0 3px 8px rgba(255,170,0,.45),inset 0 1.5px 0 rgba(255,255,255,.7);
z-index:2
}
.card .ph .pstar svg {
width:14px;
height:14px;
fill:#fff;
stroke:#fff;
stroke-width:1.2;
stroke-linejoin:round;
filter:drop-shadow(0 1px 0 rgba(180,110,0,.45))
}
.card.pick .ph .badge {
right:30px
}
.card.pick .ph>div:not(.ic) {
padding-right:0
}
/* ===== v27 • warna dasar pink + 3 tema (es kristal, lentera emas, peri hijau) ===== */
/* tint turunan tema */
:root {
--h0:#f7a8c4;
--h1:#d9578a;
--h2:#a8456a;
--h3:#ffb3c9;
--h4:#e0457b;
--h5:#a31d2b;
--h6:#ff9ec0;
--h7:#ff6296;
--h8:#b01048;
--h9:#ff9ec4;
--h10:#c2185b;
--h11:#ffc4dc;
--h12:#d6336c;
--h13:#e8336f;
--h14:#a8647f;
--h15:#ff8db8;
--h16:#ec4899;
--h17:#ff9fc2;
--h18:#ffb3d1;
--h19:#e11d5c;
--h20:#ff8fb3;
--h21:#ffb5d4;
--h22:#ff8fb8;
--h23:#c47a98;
--h24:#ff6fa6;
--h25:#d9266f;
--h26:#8a3a5c;
--h27:#c98aa6;
--h28:#ee6c9e;
--h29:#ffc2da;
--r0:236,72,153
}
/* ===== v28 • ikon garis pengganti emoji ===== */
.miws-e {
width:1.18em;
height:1.18em;
display:inline-block;
vertical-align:-.2em;
fill:none;
stroke:currentColor;
stroke-width:2;
stroke-linecap:round;
stroke-linejoin:round;
flex:none
}
.miws-e.e-f {
fill:currentColor
}
.miws-e.e-y {
color:#f5b301
}
.miws-e.e-s {
color:#9aa5b1
}
.miws-e.e-b {
color:#c77d3a
}
.miws-e.e-g {
color:#22c55e
}
.miws-dot {
display:inline-block;
width:.68em;
height:.68em;
border-radius:50%;
vertical-align:.05em;
margin-right:.1em;
box-shadow:0 0 0 2.5px rgba(255,255,255,.7)
}
.fv .miws-e {
color:var(--pk1);
width:1.25em;
height:1.25em;
vertical-align:middle
}
.box.empty div .miws-e,.box.empty>div .miws-e {
width:1.5em;
height:1.5em;
color:var(--pink)
}
html:root h2 .miws-e,html:root .sh .miws-e {
color:var(--pink)
}
.srch-i {
display:grid;
place-items:center;
color:var(--pink);
flex:none
}
.srch-i .miws-e {
width:1.15em;
height:1.15em;
vertical-align:middle
}
.btn .miws-e {
vertical-align:-.22em
}
/* ===== v32 • hapus garis highlight ungu di judul ===== */
html:root:root h2 {
background:none!important;
background-image:none!important;
padding-left:0!important;
padding-right:0!important;
border-radius:0!important
}
html:root:root .v-profil .pft h2 {
background-image:linear-gradient(135deg,var(--k5),var(--k3))!important;
-webkit-background-clip:text!important;
background-clip:text!important
}
/* ===== v29 • tombol love: putih + garis pink (belum), pink penuh + hati putih (favorit) ===== */
html:root .fv {
background:#fff;
border:2px solid rgba(var(--pr),.38);
box-shadow:0 6px 16px rgba(var(--pr),.16)
}
html:root .fv .miws-e {
color:var(--pink);
fill:none;
stroke-width:2.2
}
html:root .fv.on {
background:linear-gradient(var(--pink),var(--pink));
border:2px solid #ffffff99;
box-shadow:0 8px 22px rgba(var(--pr),.38)
}
html:root .fv.on .miws-e {
color:#fff;
fill:currentColor
}
html:root .fv:hover {
box-shadow:0 10px 22px rgba(var(--pr),.28)
}
@media(prefers-color-scheme:dark) {
:root:not([data-theme="light"]) .fv:not(.on) {
background:var(--card)
}
}
:root[data-theme="dark"] .fv:not(.on) {
background:var(--card)
}
.ps-vars[hidden] {
display:none!important
}
/* ===== v42-pinkbox ===== */
/* v42 • ikon tong sampah & HP dibungkus kotak pink + garis putih */
.okmark .miws-e,#pwa .pwai .miws-e {
display:block;
box-sizing:content-box;
color:#fff;
fill:none;
stroke:#fff;
stroke-width:2.2;
background:linear-gradient(145deg,var(--pk1,#ff8fb8),var(--pink,#e0306e));
border:3px solid #fff;
box-shadow:0 8px 20px rgba(var(--pr,224,48,110),.35);
vertical-align:middle
}
.okmark .miws-e {
width:34px;
height:34px;
padding:14px;
border-radius:26px;
margin:0 auto
}
#pwa .pwai .miws-e {
width:20px;
height:20px;
padding:9px;
border-radius:16px;
border-width:2.5px
}
#modBody.post .okmark .miws-e {
width:26px;
height:26px;
padding:10px;
border-radius:20px
}
/* ===== v43-eye ===== */
/* v43 • ikon mata penghitung pengunjung dibuat lebih cantik */
.vcnt.vch {
gap:6px
}
.vcnt.vch .miws-e {
box-sizing:content-box;
width:13px;
height:13px;
padding:4px;
margin:-2px 5px -2px -4px;
border-radius:50%;
color:#fff;
stroke:#fff;
stroke-width:2.2;
vertical-align:middle;
background:linear-gradient(145deg,var(--pk1,#ff8fb8),var(--pink,#e0306e));
border:1.5px solid #fff;
box-shadow:0 2px 6px rgba(var(--pr,224,48,110),.35)
}
/* ===== v44-rcv ===== */
#rcv {
position:fixed;
left:12px;
bottom:92px;
z-index:45;
display:flex;
align-items:center;
gap:10px;
max-width:min(330px,calc(100vw - 24px));
padding:10px 12px 10px 10px;
border-radius:20px;
background:var(--card,#fff);
color:var(--ink,#43303a);
border:1.5px solid var(--line,#f6c6dc);
box-shadow:0 10px 26px rgba(var(--pr,224,48,110),.25);
transform:translateY(24px) scale(.96);
opacity:0;
pointer-events:none;
transition:transform .45s cubic-bezier(.2,.9,.3,1.2),opacity .35s
}
#rcv.on {
transform:none;
opacity:1;
pointer-events:auto
}
#rcv i {
flex:none;
width:38px;
height:38px;
border-radius:14px;
display:grid;
place-items:center;
background:linear-gradient(145deg,var(--pk1,#ff8fb8),var(--pink,#e0306e));
border:2.5px solid #fff;
box-shadow:0 4px 10px rgba(var(--pr,224,48,110),.3)
}
#rcv i.lg {
background:#fff;
padding:0;
overflow:hidden
}
#rcv i img {
width:100%;
height:100%;
object-fit:contain;
display:block;
border-radius:10px;
padding:2px
}
#rcv i svg {
width:20px;
height:20px;
fill:none;
stroke:#fff;
stroke-width:2.2;
stroke-linecap:round;
stroke-linejoin:round
}
#rcv div {
min-width:0;
line-height:1.3
}
#rcv b {
display:block;
font-size:13.5px;
letter-spacing:.2px;
color:var(--pink,#e0306e)
}
#rcv span {
display:block;
font-size:12px;
color:var(--mut,#8a5a7c)
}
#rcv button {
flex:none;
border:0;
background:transparent;
color:var(--mut,#8a5a7c);
font-size:14px;
padding:4px 6px;
cursor:pointer
}
/* ===== v45-riwayat ===== */
/* v45 • ikon Riwayat transaksi: kotak berwarna + garis putih */
html:root .rb i .miws-e,html:root .idc b .miws-e,html:root .wl.inv .miws-e,html:root .ocek .fh .miws-e,html:root .page.v-riwayat h2 .miws-e,html:root .page.v-riwayat h3 .miws-e {
box-sizing:content-box;
display:inline-block;
vertical-align:middle;
color:#fff;
stroke:#fff;
stroke-width:2.3;
background:linear-gradient(145deg,var(--pk1,#ff8fb8),var(--pink,#e0306e));
border:2px solid #fff;
box-shadow:0 3px 8px rgba(var(--pr,224,48,110),.3)
}
html:root .rb i .miws-e {
width:14px;
height:14px;
padding:5px;
border-radius:12px;
margin-right:2px
}
html:root .idc b .miws-e,html:root .wl.inv .miws-e,html:root .ocek .fh .miws-e {
width:12px;
height:12px;
padding:4px;
border-radius:10px;
border-width:1.5px;
margin-right:4px
}
html:root .page.v-riwayat h2 .miws-e,html:root .page.v-riwayat h3 .miws-e {
width:16px;
height:16px;
padding:6px;
border-radius:14px;
margin-right:6px
}
html:root .rb[data-act="claimorder"] i .miws-e {
background:linear-gradient(145deg,#b79cff,#7c5cf0)
}
html:root .rb[data-act="orderdone"] i .miws-e,html:root .rb[data-act="claimdone"] i .miws-e,html:root .rb.on i .miws-e {
background:linear-gradient(145deg,#6fdc8f,#22a34f)
}
html:root .rb.red i .miws-e {
background:linear-gradient(145deg,#ff8f86,#e5534b)
}
html:root .wl.inv.off .miws-e {
background:linear-gradient(145deg,#c9b5c3,#a58a9b)
}
html:root .btn.big .miws-e {
color:#fff;
stroke:#fff
}
html:root .cpy .miws-e {
color:var(--pink,#e0306e);
stroke:var(--pink,#e0306e);
background:none;
border:0;
box-shadow:none
}
/* ===== v47-sleep ===== */
html:root #ix .ixmoon {
display:inline-block;
font-style:normal;
line-height:1;
transform-origin:50% 12%;
animation:ixmoon 7s ease-in-out infinite;
filter:drop-shadow(0 0 10px rgba(255,205,90,.5));
will-change:transform
}
@keyframes ixmoon {
0%,100% {
transform:translateY(0) rotate(-7deg)
}
50% {
transform:translateY(-5px) rotate(7deg)
}
}
html:root #ix .ixsnd {
display:inline-flex;
align-items:center;
gap:6px;
margin:12px 0 0;
padding:9px 18px;
border-radius:999px;
border:1.8px solid #ffd0e3;
background:#fff;
color:var(--h12);
font:800 13.5px Nunito,Fredoka,sans-serif;
cursor:pointer;
-webkit-tap-highlight-color:transparent;
box-shadow:0 4px 12px rgba(214,76,140,.14)
}
html:root #ix .ixsnd .ixsn {
display:inline-block;
font-size:16px
}
html:root #ix .ixsnd.on {
background:linear-gradient(135deg,#f3e8ff,#ffe6f0);
border-color:#c9a2f0;
color:#7a3fb5
}
html:root #ix .ixsnd.on .ixsn {
animation:ixmoon 3.4s ease-in-out infinite
}
html:root #ix .ixsnd+.ixhint {
margin-top:12px
}
@media(prefers-reduced-motion:reduce) {
html:root #ix .ixmoon,html:root #ix .ixsnd.on .ixsn {
animation:none
}
}
/* ===== link kontak & ulasan di layar depan (buka/tutup) ===== */
html:root #ix .ixlk {
margin:16px 0 0;
display:flex;
flex-direction:column;
gap:10px;
align-items:center
}
html:root #ix .ixlkh {
font:700 10.5px Fredoka,Nunito,sans-serif;
letter-spacing:1.8px;
text-transform:uppercase;
color:var(--h23);
opacity:.9
}
html:root #ix .ixso {
display:flex;
gap:8px;
justify-content:center
}
html:root #ix .ixso a {
display:flex;
flex-direction:column;
align-items:center;
gap:4px;
width:70px;
text-decoration:none;
font:700 10.5px Nunito,sans-serif;
color:var(--h14);
-webkit-tap-highlight-color:transparent
}
html:root #ix .ixso a i {
display:grid;
place-items:center;
width:46px;
height:46px;
border-radius:15px;
background:#fff;
border:1.5px solid #ffd0e3;
box-shadow:0 5px 12px rgba(var(--r0),.14);
transition:transform .15s
}
html:root #ix .ixso a i svg {
width:30px;
height:30px;
display:block
}
html:root #ix .ixso a:hover i {
transform:translateY(-2px)
}
html:root #ix .ixso a:active i {
transform:scale(.92)
}
html:root #ix .ixrv {
display:flex;
gap:8px;
justify-content:center;
flex-wrap:wrap
}
html:root #ix .ixrv a {
display:inline-flex;
align-items:center;
gap:6px;
padding:9px 15px;
border-radius:999px;
background:#fff;
border:1.5px solid #ffd0e3;
color:var(--h12);
font:800 12.5px Nunito,sans-serif;
text-decoration:none;
box-shadow:0 3px 8px rgba(var(--r0),.1);
-webkit-tap-highlight-color:transparent
}
html:root #ix .ixrv a:active {
transform:scale(.96)
}
html:root #ix .ixlk+.ixhint {
margin-top:14px
}
@media(max-height:760px) {
html:root #ix .ixlk {
margin-top:10px;
gap:7px
}
html:root #ix .ixso a i {
width:40px;
height:40px
}
html:root #ix .ixso a i svg {
width:26px;
height:26px
}
html:root #ix .ixso a {
font-size:10px
}
html:root #ix .ixrv a {
padding:7px 13px
}
}
@media(max-height:640px) {
html:root #ix .ixso a span {
display:none
}
html:root #ix .ixso a {
width:auto
}
}
html:root body #ix .ixz {
height:38px;
margin:4px 0 0;
font-size:28px
}
html:root body #ix .ixz span:nth-of-type(1) {
font-size:14px
}
html:root body #ix .ixz span:nth-of-type(2) {
font-size:17px
}
html:root body #ix .ixz span:nth-of-type(3) {
font-size:20px
}
html:root body #ix .ixnote {
margin:6px 0 10px;
padding:10px 13px;
border-radius:18px;
font-size:13.5px;
line-height:1.5
}
html:root body #ix .ixnote b {
font-size:13.5px;
padding:0 9px
}
html:root body #ix .ixcd {
padding:6px 13px;
font-size:12.5px
}
html:root body #ix .ixcd+.ixhint {
margin-top:12px
}
html:root body #ix.closed .ixs:nth-of-type(3) {
top:10%!important;
left:24%!important
}
html:root body #ix.closed .ixs:nth-of-type(4) {
top:10%!important;
left:auto!important;
right:23%!important
}
html:root body #ix.closed .ixs:nth-of-type(5) {
top:79%!important
}
html:root body #ix.closed .ixs:nth-of-type(6) {
top:79%!important
}
html:root body #ix.closed .ixs:nth-of-type(7) {
top:82%!important
}
/* ===== v46-cd ===== */
html:root #ix .ixcd {
font-variant-numeric:tabular-nums
}
/* ===== v47-note ===== */
/* v47 • kotak catatan toko tutup: garis menyambung merah, Zzz bergerak */
html:root #ix .ixnote {
border:2px solid #e5334b
}
html:root #ix .ixz {
display:inline-flex;
align-items:flex-end;
gap:2px;
height:46px;
margin:8px 0 4px
}
html:root #ix .ixz span {
color:#c18cf5;
opacity:0;
animation:ixzf 2.8s ease-in-out infinite
}
html:root #ix .ixz span:nth-of-type(1) {
font-size:18px;
animation-delay:0s
}
html:root #ix .ixz span:nth-of-type(2) {
font-size:22px;
animation-delay:.55s
}
html:root #ix .ixz span:nth-of-type(3) {
font-size:26px;
animation-delay:1.1s
}
@keyframes ixzf {
0% {
transform:translate(-2px,12px) rotate(-10deg) scale(.7);
opacity:0
}
25% {
opacity:1
}
70% {
opacity:1
}
100% {
transform:translate(8px,-18px) rotate(10deg) scale(1.1);
opacity:0
}
}
@media(prefers-reduced-motion:reduce) {
html:root #ix .ixz span {
animation:none;
opacity:1
}
}
/* ===== miws-pinkbtn ===== */
html:root:root #modBody .btn.btn[data-act="invtxt"],
html:root:root #modBody:has(#invt) .btn.btn.ghost,
html:root:root .idc .cpy.cpy {
background:var(--pink)!important;
background-image:none!important;
color:#fff!important;
border:0!important;
box-shadow:none!important;
filter:none!important;
text-shadow:none!important;
font-weight:700!important;
opacity:1!important
}
html:root:root #modBody .btn.btn[data-act="invtxt"]::before,html:root:root #modBody .btn.btn[data-act="invtxt"]::after,
html:root:root #modBody:has(#invt) .btn.btn.ghost::before,html:root:root #modBody:has(#invt) .btn.btn.ghost::after,
html:root:root .idc .cpy.cpy::before,html:root:root .idc .cpy.cpy::after {
display:none!important;
box-shadow:none!important;
background:none!important
}
html:root:root #modBody .btn.btn[data-act="invtxt"] *,
html:root:root #modBody:has(#invt) .btn.btn.ghost *,
html:root:root .idc .cpy.cpy * {
color:#fff!important;
stroke:#fff!important;
box-shadow:none!important;
filter:none!important
}
/* ===== miws-nopaid ===== */
html:root:root .qris .qrrow2 {
grid-template-columns:1fr!important
}
html:root:root:root #modBody#modBody .qp .qrrow2 .btn.btn.btn.btn.btn.btn[data-qrdl] {
background:var(--pk,var(--pink))!important;
color:#fff!important;
border:0!important;
box-shadow:0 4px 10px rgba(var(--pkrgb,var(--pr)),.3)!important;
text-shadow:none!important;
font-weight:800!important;
opacity:1!important
}
html:root:root:root #modBody#modBody .qp .qrrow2 .btn.btn.btn.btn.btn.btn[data-qrdl] * {
color:#fff!important;
stroke:#fff!important
}
/* ===== miws-salin-riwayat ===== */
html:root:root:root .page.v-riwayat .rvh {
flex-wrap:wrap;
row-gap:6px;
align-items:center
}
html:root:root:root .page.v-riwayat .idc {
display:inline-flex;
flex-wrap:nowrap;
align-items:center;
gap:6px;
background:rgba(255,255,255,.85)!important;
border:1.5px solid #ffd0e3;
border-radius:999px;
padding:3px 4px 3px 11px;
max-width:100%;
box-shadow:0 2px 8px rgba(var(--pr),.08)
}
html:root:root:root .page.v-riwayat .idc .idl {
color:var(--mut);
font:700 11px Nunito,sans-serif;
white-space:nowrap
}
html:root:root:root .page.v-riwayat .idc b {
white-space:nowrap;
letter-spacing:.01em;
color:#3a0c24;
font:800 12.5px Nunito,sans-serif
}
html:root:root:root .page.v-riwayat .idc .cpy.cpy.cpy {
border:0!important;
border-radius:999px!important;
background:linear-gradient(135deg,#ff6fa5,#ff2e7e)!important;
color:#fff!important;
-webkit-text-fill-color:#fff!important;
font:800 11px Nunito,sans-serif!important;
line-height:1.3!important;
padding:4px 11px!important;
cursor:pointer;
box-shadow:0 3px 8px rgba(255,46,126,.3)!important;
text-shadow:none!important;
filter:none!important;
opacity:1!important
}
html:root:root:root .page.v-riwayat .idc .cpy.cpy.cpy * {
color:#fff!important;
stroke:#fff!important
}
html:root:root:root .page.v-riwayat .rvh .status {
font-size:12px!important;
padding:4px 11px!important
}
/* ===== miws-glossy-chips ===== */
html:root:root:root .status {
background:linear-gradient(180deg,rgba(255,255,255,.55) 0,rgba(255,255,255,0) 52%),linear-gradient(180deg,#ffe58f,#ffc233)!important;
color:#6b4200!important;
border:0!important;
box-shadow:none!important;
text-shadow:none!important;
font-weight:800;
text-transform:capitalize
}
html:root:root:root .status.ok,html:root:root:root .status.paid {
background:linear-gradient(180deg,rgba(255,255,255,.55) 0,rgba(255,255,255,0) 52%),linear-gradient(180deg,#7fe0a0,#22b45c)!important;
color:#fff!important;
border:0!important;
box-shadow:none!important;
text-shadow:none!important
}
html:root:root:root .xpr {
background:linear-gradient(180deg,rgba(255,255,255,.55) 0,rgba(255,255,255,0) 52%),linear-gradient(180deg,#7fe0a0,#22b45c)!important;
color:#fff!important;
border:0!important;
box-shadow:none!important;
text-shadow:none!important;
border-radius:16px
}
html:root:root:root .xpr.soon {
background:linear-gradient(180deg,rgba(255,255,255,.55) 0,rgba(255,255,255,0) 52%),linear-gradient(180deg,#ffe58f,#ffc233)!important;
color:#6b4200!important;
border:0!important;
box-shadow:none!important;
text-shadow:none!important
}
html:root:root:root .xpr.warn {
background:linear-gradient(180deg,rgba(255,255,255,.55) 0,rgba(255,255,255,0) 52%),linear-gradient(180deg,#ffbf8f,#ff8a3d)!important;
color:#fff!important;
border:0!important;
box-shadow:none!important;
text-shadow:none!important
}
html:root:root:root .xpr.end {
background:linear-gradient(180deg,rgba(255,255,255,.55) 0,rgba(255,255,255,0) 52%),linear-gradient(180deg,#ff9b9b,#f0463f)!important;
color:#fff!important;
border:0!important;
box-shadow:none!important;
text-shadow:none!important
}
html:root:root:root .xpr .bar {
background:rgba(0,0,0,.16)!important
}
html:root:root:root .xpr .miws-e,html:root:root:root .xpr svg {
color:currentColor!important;
stroke:currentColor!important
}
html:root:root:root .badge.badge {
background:linear-gradient(180deg,rgba(255,255,255,.55) 0,rgba(255,255,255,0) 52%),linear-gradient(180deg,#7fe0a0,#22b45c)!important;
color:#fff!important;
border:0!important;
box-shadow:none!important;
text-shadow:none!important;
font-weight:800
}
html:root:root:root .badge.badge.lim {
background:linear-gradient(180deg,rgba(255,255,255,.55) 0,rgba(255,255,255,0) 52%),linear-gradient(180deg,#ffe58f,#ffc233)!important;
color:#6b4200!important;
border:0!important;
box-shadow:none!important;
text-shadow:none!important
}
html:root:root:root .badge.badge.out {
background:linear-gradient(180deg,rgba(255,255,255,.55) 0,rgba(255,255,255,0) 52%),linear-gradient(180deg,#ff9b9b,#f0463f)!important;
color:#fff!important;
border:0!important;
box-shadow:none!important;
text-shadow:none!important
}
/* ===== miws-login-v62 ===== */
/* emoji love asli tetap tampil (tidak diganti ikon) */
.accS,.accShow {
font-family:Nunito,"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif
}
/* tombol Klaim Garansi: pink sama seperti tombol pink lain */
html:root:root:root .cta2 .btn.ghost {
background:var(--pk)!important;
color:#fff!important;
border:0!important;
box-shadow:0 6px 14px rgba(var(--pkrgb),.34)!important;
text-shadow:none!important
}
html:root:root:root .cta2 .btn.ghost * {
color:#fff!important;
stroke:#fff!important
}
/* tombol Masuk & Daftar Akun Baru berdampingan, lebih kecil */
html:root:root:root .accbox:has(.accIn) {
display:grid;
grid-template-columns:1fr 1fr;
column-gap:10px
}
html:root:root:root .accbox:has(.accIn)>* {
grid-column:1/-1
}
html:root:root:root .accbox:has(.accIn)>.btn.big {
grid-column:auto;
width:100%;
min-height:46px!important;
height:auto;
padding:10px 12px!important;
font-size:15px!important;
margin:0
}
html:root:root:root .accbox:has(.accIn)>.accOr {
display:none
}
html:root:root:root .accbox:has(.accIn)>.accMsg {
margin-bottom:10px
}
/* ===== miws-gate-white ===== */
/* kartu toko buka/tutup: satu kotak putih utuh tanpa garis terpisah */
html:root:root:root #ix .ixcard {
background:#fff!important;
-webkit-backdrop-filter:none!important;
backdrop-filter:none!important;
border:0!important;
box-shadow:0 18px 44px rgba(var(--r0),.16)!important
}
/* bulatan logo & bulatan emoji: putih polos */
html:root:root:root #ix .ixlg {
background:#fff!important;
background-image:none!important;
box-shadow:0 8px 20px rgba(var(--r0),.14)!important
}
html:root:root:root #ix .ixs {
background:#fff!important;
border:0!important
}
/* ===== miws-fav-modal ===== */
html:root:root:root #modBody .ps-b.fv {
width:40px;
height:40px;
font-size:16px;
border-radius:50%;
padding:0;
display:inline-grid;
place-items:center
}
/* ===== miws-qr-check ===== */
html:root:root:root #modBody#modBody .qp .qrrow2 .btn.qchk {
width:auto!important;
min-width:0!important;
padding:8px 12px!important;
flex:0 0 auto
}
html:root:root:root #modBody#modBody .qp .qrrow2 .btn.qchk .qv {
width:18px;
height:18px
}
html:root:root:root #modBody#modBody .qp .qrrow2 .btn.qchk.on {
background:linear-gradient(180deg,rgba(255,255,255,.55) 0,rgba(255,255,255,0) 52%),linear-gradient(180deg,#7fe0a0,#22b45c)!important;
color:#fff!important;
border:0!important;
box-shadow:none!important
}
html:root:root:root #modBody#modBody .qp .qrrow2 .btn.qchk.on .qv {
stroke:#fff!important
}
/* ===== miws-cal-glossy ===== */
html:root:root:root .cal .tg.x {
background:linear-gradient(180deg,rgba(255,255,255,.55) 0,rgba(255,255,255,0) 52%),linear-gradient(180deg,#ffd35a,#f5a800)!important;
color:#fff!important;
border:0!important;
box-shadow:none!important;
text-shadow:none!important
}
html:root:root:root .cal .cd.x {
background:linear-gradient(180deg,rgba(255,255,255,.55) 0,rgba(255,255,255,0) 52%),linear-gradient(180deg,#ffd35a,#f5a800)!important;
color:#fff!important;
border:0!important;
box-shadow:none!important;
text-shadow:none!important
}
html:root:root:root .cal .sw.x {
background:linear-gradient(180deg,rgba(255,255,255,.55) 0,rgba(255,255,255,0) 52%),linear-gradient(180deg,#ffd35a,#f5a800)!important;
color:#fff!important;
border:0!important;
box-shadow:none!important;
text-shadow:none!important
}
html:root:root:root .cal .tg.e {
background:linear-gradient(180deg,rgba(255,255,255,.55) 0,rgba(255,255,255,0) 52%),linear-gradient(180deg,#ff8a8a,#e5393f)!important;
color:#fff!important;
border:0!important;
box-shadow:none!important;
text-shadow:none!important
}
html:root:root:root .cal .cd.e {
background:linear-gradient(180deg,rgba(255,255,255,.55) 0,rgba(255,255,255,0) 52%),linear-gradient(180deg,#ff8a8a,#e5393f)!important;
color:#fff!important;
border:0!important;
box-shadow:none!important;
text-shadow:none!important
}
html:root:root:root .cal .sw.e {
background:linear-gradient(180deg,rgba(255,255,255,.55) 0,rgba(255,255,255,0) 52%),linear-gradient(180deg,#ff8a8a,#e5393f)!important;
color:#fff!important;
border:0!important;
box-shadow:none!important;
text-shadow:none!important
}
html:root:root:root .cal .tg.x,html:root:root:root .cal .tg.e {
font-weight:800
}
/* keterangan tombol centang QRIS */
html:root:root:root #modBody .qchkh {
text-align:center;
font:700 12px Nunito,sans-serif;
color:var(--pink);
margin:6px 0 2px
}
html:root:root:root #modBody .qchkh.on {
color:#1f9d55
}
/* ===== miws-claim-modal ===== */
/* popup setelah kirim klaim/pesanan: sama seperti popup QRIS */
html:root:root:root #modBody#modBody.post .oidrow {
display:flex;
align-items:center;
justify-content:center;
gap:8px;
margin:10px auto!important;
padding:5px 6px 5px 16px;
border-radius:999px;
background:rgba(255,255,255,.85)!important;
border:1.5px solid #ffd0e3;
font:700 13px Nunito,sans-serif;
max-width:100%;
width:fit-content
}
html:root:root:root #modBody#modBody.post .oidrow span {
color:var(--mut)
}
html:root:root:root #modBody#modBody.post .oidrow b {
color:#3a0c24;
letter-spacing:.02em
}
html:root:root:root #modBody#modBody.post .oidrow .cpy {
border:0!important;
border-radius:999px!important;
background:var(--pk)!important;
color:#fff!important;
font:800 12px Nunito,sans-serif!important;
padding:7px 14px!important;
box-shadow:0 4px 10px rgba(var(--pkrgb),.3)!important
}
html:root:root:root #modBody#modBody.post .row2 .btn.btn.btn.btn.btn.btn[data-act="copymsg"],html:root:root:root #modBody#modBody.post .row2 .btn.btn.btn.btn.btn.btn[data-act="gohist"] {
background:var(--pk)!important;
color:#fff!important;
border:0!important;
box-shadow:0 6px 14px rgba(var(--pkrgb),.34)!important;
text-shadow:none!important
}
/* v76 • Riwayat transaksi: halaman bolak-balik ala buku */
.page.v-riwayat .bkw {
perspective:900px
}
html:root .page.v-riwayat .bkt {
display:flex;
gap:4px;
padding:4px;
border-radius:999px;
background:#fff;
box-shadow:0 4px 12px rgba(var(--pkrgb),.14);
margin:12px 0 8px
}
html:root .page.v-riwayat .bkt button {
flex:1;
border:0!important;
border-radius:999px!important;
padding:8px 6px!important;
font:700 12.5px Fredoka,Nunito,sans-serif!important;
color:var(--pink)!important;
background:#fff!important;
box-shadow:none!important;
cursor:pointer
}
html:root .page.v-riwayat .bkt button.on {
background:linear-gradient(180deg,rgba(255,255,255,.5) 0,rgba(255,255,255,0) 52%),linear-gradient(145deg,var(--pk2,#ff7db1),var(--pk1,#ff2e7e))!important;
color:#fff!important;
border:0!important;
box-shadow:none!important;
text-shadow:none!important
}
html:root .page.v-riwayat .bkt button.on svg,html:root .page.v-riwayat .bkt button.on .miws-e {
color:#fff!important;
stroke:#fff!important
}
html:root .page.v-notif .nt b {
color:var(--pink)!important
}
.page.v-riwayat .bkt em {
font-style:normal;
opacity:.85;
margin-left:2px
}
.page.v-riwayat .bkc {
text-align:center;
font:800 12px Nunito,sans-serif;
color:var(--pink);
margin:10px 0 2px
}
.page.v-riwayat .bkn {
display:flex;
align-items:center;
justify-content:center;
gap:5px;
margin:8px 0
}
html:root .page.v-riwayat .bkn button {
min-width:32px;
height:32px;
padding:0 6px!important;
border-radius:999px!important;
border:2px solid var(--pink)!important;
background:#fff!important;
color:var(--pink)!important;
font:700 13px Fredoka,Nunito,sans-serif!important;
cursor:pointer;
box-shadow:0 2px 0 rgba(var(--pkrgb),.35)!important
}
html:root .page.v-riwayat .bkn button.pa {
padding:0!important;
display:inline-grid;
place-items:center
}
.page.v-riwayat .bkn .chv {
width:15px;
height:15px;
fill:none;
stroke:currentColor;
stroke-width:3.2;
stroke-linecap:round;
stroke-linejoin:round
}
html:root .page.v-riwayat .bkn button.on {
background:linear-gradient(145deg,var(--pk2,#ff7db1),var(--pk1,#ff2e7e))!important;
color:#fff!important;
border-color:transparent!important
}
html:root .page.v-riwayat .bkn button:disabled {
opacity:.35;
cursor:default;
box-shadow:none!important
}
.page.v-riwayat .bkn .pd {
color:var(--pink);
font-weight:800;
opacity:.6
}
.page.v-riwayat .bkp {
position:relative;
isolation:isolate;
transform-origin:50% 50%
}
.page.v-riwayat .bkp::before {
content:none
}
.page.v-riwayat .bkp .box {
margin-top:0
}
.page.v-riwayat .bkp.fn {
animation:bkn .32s ease both
}
.page.v-riwayat .bkp.fp {
animation:bkp .32s ease both
}
@keyframes bkn {
from {
opacity:0;
transform:translateX(34px) rotateY(-10deg)
}
to {
opacity:1;
transform:none
}
}
@keyframes bkp {
from {
opacity:0;
transform:translateX(-34px) rotateY(10deg)
}
to {
opacity:1;
transform:none
}
}
.page.v-riwayat .bkh {
text-align:center;
font-size:11px;
color:var(--mut,#8a6b78);
margin:2px 0 4px
}
@media (prefers-reduced-motion:reduce) {
.page.v-riwayat .bkp.fn,.page.v-riwayat .bkp.fp {
animation:none
}
}
/* v76 • tombol riwayat pink glossy, centang hijau glossy */
html:root:root .page.v-riwayat .rb,html:root:root .page.v-riwayat .rb.red,html:root:root .page.v-riwayat .rb.on {
border:0!important;
box-shadow:none!important;
text-shadow:none!important;
color:#fff!important;
background:linear-gradient(180deg,rgba(255,255,255,.5) 0,rgba(255,255,255,0) 52%),linear-gradient(145deg,var(--pk2,#ff7db1),var(--pk1,#ff2e7e))!important
}
html:root:root .page.v-riwayat .rb.on {
opacity:.8
}
html:root:root .page.v-riwayat .rb i {
color:#fff!important
}
html:root:root .page.v-riwayat .rb i .miws-e,html:root:root .page.v-riwayat .rb[data-act] i .miws-e,html:root:root .page.v-riwayat .rb.on i .miws-e,html:root:root .page.v-riwayat .rb.red i .miws-e {
background:none!important;
border:0!important;
box-shadow:none!important;
width:18px!important;
height:18px!important;
padding:0!important;
margin:0 2px 0 0!important;
color:#fff!important;
stroke:#fff!important
}
html:root:root .sdone,html:root:root #modBody.post .sdone {
background:linear-gradient(180deg,rgba(255,255,255,.5) 0,rgba(255,255,255,0) 52%),linear-gradient(145deg,#6fdc8f,#22a34f)!important;
border:0!important;
box-shadow:none!important;
color:#fff!important
}
html:root:root .sdone svg {
width:56%;
height:56%;
fill:none;
stroke:#fff;
stroke-width:3.4;
stroke-linecap:round;
stroke-linejoin:round
}
/* ===== miws-v77-sheet ===== */
/* v77: tab Sharing/Private putih, aktif glossy pink; kotak harga terpilih lebih soft; modal Profil Pembeli bold & pink */
html:root:root:root #modBody#modBody .ps-tabs {
background:#fff!important;
border:0!important;
box-shadow:none!important
}
html:root:root:root #modBody#modBody .ps-tabs button {
background:transparent!important;
color:var(--pk1,#ff2e7e)!important;
border:0!important;
box-shadow:none!important
}
html:root:root:root #modBody#modBody .ps-tabs button.on {
background:linear-gradient(180deg,rgba(255,255,255,.55) 0,rgba(255,255,255,0) 52%),linear-gradient(180deg,#ff8cbc,#f5498f)!important;
color:#fff!important;
border:0!important;
box-shadow:none!important
}
html:root:root:root #modBody#modBody .ps-pl button.on {
background:linear-gradient(180deg,rgba(255,255,255,.55) 0,rgba(255,255,255,0) 52%),linear-gradient(180deg,#ff8cbc,#f5498f)!important;
border-color:transparent!important;
background-origin:border-box!important;
background-clip:border-box!important;
outline:0!important;
box-shadow:none!important;
color:#fff!important
}
html:root:root:root #modBody#modBody .ps-pl button.on small,html:root:root:root #modBody#modBody .ps-pl button.on b {
color:#fff!important
}
html:root:root:root #modBody#modBody:has([data-act="saveprof2"]) .qrh {
font-weight:800!important;
color:var(--k3,#d9266f)!important
}
html:root:root:root #modBody#modBody:has([data-act="saveprof2"]) p.cat,html:root:root:root #modBody#modBody:has([data-act="saveprof2"]) .f label {
color:var(--k3,#d9266f)!important
}
html:root:root:root #modBody#modBody:has([data-act="saveprof2"]) .f label {
font-weight:800
}
html:root:root:root #modBody#modBody:has([data-act="saveprof2"]) .f input {
color:var(--k3,#d9266f)!important
}
html:root:root:root #modBody#modBody:has([data-act="saveprof2"]) .f input::placeholder {
color:#e7a3c0
}
@media (prefers-color-scheme:dark) {
html:root:root:root:not([data-theme="light"]) #modBody#modBody .ps-tabs {
background:var(--card)!important
}
}
html:root[data-theme="dark"]:root:root #modBody#modBody .ps-tabs {
background:var(--card)!important
}
/* v78: bulan emoji asli + Zzz bergerak; chip varian tanpa garis putus-putus */
.jnomo {
display:inline-flex;
align-items:flex-start;
gap:3px;
margin-left:3px;
vertical-align:middle
}
.jmn {
display:inline-block;
font-size:1.2em;
line-height:1;
transform-origin:50% 60%;
animation:jmoon 3.2s ease-in-out infinite
}
.jz {
display:inline-flex;
align-items:flex-end;
height:1.4em;
gap:1px;
font-weight:900;
color:#b78cf2
}
.jz i {
font-style:normal;
display:inline-block;
opacity:0;
animation:jzz 2.4s ease-in-out infinite
}
.jz i:nth-child(1) {
font-size:.7em
}
.jz i:nth-child(2) {
font-size:.95em;
animation-delay:.5s
}
.jz i:nth-child(3) {
font-size:1.25em;
animation-delay:1s
}
@keyframes jmoon {
0%,100% {
transform:rotate(-12deg) translateY(0)
}
50% {
transform:rotate(12deg) translateY(-3px)
}
}
@keyframes jzz {
0% {
opacity:0;
transform:translate(0,6px) scale(.7)
}
30% {
opacity:1
}
100% {
opacity:0;
transform:translate(5px,-10px) scale(1.1)
}
}
@media (prefers-reduced-motion:reduce) {
.jmn,.jz i {
animation:none
}
.jz i {
opacity:1
}
}
html:root:root:root #modBody#modBody .ps-vars button {
border:2px solid #ff86b8!important;
background:#fff!important;
color:var(--pk1,#ff2e7e)!important;
box-shadow:none!important
}
html:root:root:root #modBody#modBody .ps-vars button.on {
background:linear-gradient(180deg,rgba(255,255,255,.55) 0,rgba(255,255,255,0) 52%),linear-gradient(180deg,#ff8cbc,#f5498f)!important;
background-origin:border-box!important;
background-clip:border-box!important;
border-color:transparent!important;
color:#fff!important;
outline:0!important;
box-shadow:none!important
}
html:root:root:root .jst.off .jd {
background:#ef4444!important;
box-shadow:0 0 0 4px rgba(239,68,68,.25)!important
}
/* ===== miws-akun-fix ===== */
html:root:root:root .accbox.accbox:has(.accIn) {
align-content:start;
grid-auto-rows:auto
}
html:root:root:root .accbox.accbox:has(.accIn)>.btn.big {
font-size:14px!important;
line-height:1.2;
padding:8px 10px!important;
min-height:50px!important
}
html:root:root:root .accbox.accbox:has(.accIn)>.btn.ghost.big {
font-size:12.5px!important;
padding:8px 6px!important
}
/* ===== miws-captcha-css ===== */
#capov {
position:fixed;
inset:0;
z-index:2147483000;
display:grid;
place-items:center;
padding:16px;
background:rgba(58,16,48,.45);
-webkit-backdrop-filter:blur(4px);
backdrop-filter:blur(4px)
}
#capov .capbox {
width:min(360px,100%);
box-sizing:border-box;
background:var(--card,#fff);
color:var(--ink,#3a1030);
border:2px solid var(--line,#f6c6dc);
border-radius:26px;
padding:20px 18px 18px;
text-align:center;
box-shadow:0 24px 60px rgba(236,72,153,.28);
font-family:Nunito,system-ui,sans-serif
}
#capov b {
display:block;
font:600 19px Fredoka,Nunito,sans-serif;
color:var(--pink,#ec4899)
}
#capov p {
margin:6px 0 12px;
font-size:14px;
line-height:1.45;
color:var(--mut,#8a5a7c)
}
#capov .capimg {
display:flex;
justify-content:center;
min-height:60px
}
#capov .capimg img {
width:168px;
height:60px;
border-radius:14px;
display:block;
user-select:none;
-webkit-user-drag:none
}
#capov .capr {
margin:8px auto 10px;
border:0;
background:transparent;
color:var(--pink,#ec4899);
font:800 13px Nunito,system-ui,sans-serif;
cursor:pointer;
padding:4px 10px
}
#capov .capin {
display:block;
width:100%;
box-sizing:border-box;
text-align:center;
text-transform:uppercase;
letter-spacing:.35em;
padding:12px 14px;
border-radius:999px;
border:2px solid var(--line,#f6c6dc);
background:var(--card,#fff);
color:inherit;
font:800 20px Nunito,system-ui,sans-serif;
outline:none
}
#capov .capin:focus {
border-color:var(--pink,#ec4899)
}
#capov .capin::placeholder {
letter-spacing:.05em;
font-size:15px;
font-weight:700;
text-transform:none;
opacity:.6
}
#capov .capm {
min-height:18px;
margin:8px 0 2px;
font-size:13px;
font-weight:700;
color:#e5534b
}
#capov .capb {
display:flex;
gap:10px;
margin-top:8px
}
#capov .capb button {
flex:1;
border:0;
border-radius:999px;
padding:12px 10px;
font:800 15px Nunito,system-ui,sans-serif;
cursor:pointer
}
#capov .capc {
background:transparent;
color:var(--pink,#ec4899);
border:2px solid var(--pink,#ec4899)!important
}
#capov .capo {
background:linear-gradient(145deg,var(--pk2,#ff8fb8),var(--pk1,#ec4899));
color:#fff;
box-shadow:0 6px 14px rgba(236,72,153,.32)
}
#capov .capo[disabled] {
opacity:.6
}
/* ===== miws-clock-css ===== */
/* jam digital: kotak kapsul pink, sejajar dengan tombol ID / lonceng / hati / bulan */
html:root header.top .hbtns .dclk {
flex:none;
display:inline-flex;
align-items:center;
justify-content:center;
height:36px;
min-width:52px;
padding:0 10px;
box-sizing:border-box;
border-radius:12px;
color:#fff;
background:linear-gradient(145deg,var(--pk2),var(--pk1));
box-shadow:0 5px 12px rgba(var(--pkrgb),.32);
font:700 14px/1 Fredoka,Nunito,system-ui,sans-serif;
font-variant-numeric:tabular-nums;
letter-spacing:.2px;
white-space:nowrap;
user-select:none
}
html:root header.top .hbtns .dclk i {
font-style:normal;
margin:0 1px;
position:relative;
top:-1px;
animation:dclkb 1s steps(1) infinite
}
@keyframes dclkb {
0% {
opacity:1
}
50% {
opacity:.25
}
}
@media(prefers-reduced-motion:reduce) {
html:root header.top .hbtns .dclk i {
animation:none
}
}
@media(max-width:430px) {
html:root header.top .hbtns {
gap:2px
}
html:root header.top .hbtns .dclk {
height:31px;
min-width:0;
padding:0 5px;
border-radius:10px;
font-size:11.5px;
letter-spacing:0
}
html:root header.top .pn b {
font-size:16.5px
}
}
@media(max-width:395px) {
html:root header.top .pn b {
font-size:15px
}
}
/* ===== v43-tweaks ===== */
/* v43 • judul statistik & katalog pink */
html:root:root .hbox.hstat .hsh,html:root:root .hbox.hstat .hsh i,html:root:root .hbox.hsoc .hsh,html:root:root .hbox.hsoc .hsh i {
color:var(--pink)!important;
-webkit-text-fill-color:var(--pink)!important;
background:none!important
}
html:root:root .page.v-katalog h2 {
color:var(--pink)!important;
-webkit-text-fill-color:var(--pink)!important;
background:none!important
}
/* v43 • tombol X kecil di ringkasan checkout: pink glossy, tanpa shadow & garis */
html:root:root:root .ci button[data-rm],html:root:root:root .page.v-checkout .ci button[data-rm],html:root:root:root #modBody .ci button[data-rm] {
background:linear-gradient(180deg,rgba(255,255,255,.35),rgba(255,255,255,0) 55%),var(--pk)!important;
color:#fff!important;
border:0!important;
outline:0!important;
box-shadow:none!important;
text-shadow:none!important;
font-weight:700!important;
display:inline-grid;
place-items:center;
padding:0
}
/* v43 • tombol Tambah Keranjang putih, tulisan pink */
html:root #modBody#modBody#modBody#modBody .ps-act .btn.btn.btn[data-act="padd"],html:root:root:root #modBody#modBody#modBody#modBody .ps-act button[data-act="padd"] {
background:#fff!important;
background-image:none!important;
background-color:#fff!important;
color:var(--pink)!important;
border:0!important;
box-shadow:0 4px 12px rgba(var(--pkrgb,255,46,126),.14)!important;
text-shadow:none!important;
filter:none!important
}
html:root #modBody#modBody#modBody#modBody .ps-act .btn.btn.btn[data-act="padd"]::before,html:root #modBody#modBody#modBody#modBody .ps-act .btn.btn.btn[data-act="padd"]::after {
display:none!important;
background:none!important
}
html:root #modBody#modBody#modBody#modBody .ps-act .btn.btn.btn[data-act="padd"] b,html:root #modBody#modBody#modBody#modBody .ps-act .btn.btn.btn[data-act="padd"] small {
color:var(--pink)!important;
-webkit-text-fill-color:var(--pink)!important;
opacity:1!important
}
/* v44 • judul Klaim Garansi pink */
html:root:root .page.v-garansi h2 {
color:var(--pink)!important;
-webkit-text-fill-color:var(--pink)!important;
background:none!important
}
/* v44 • tombol Beli Lagi / Klaim Garansi / Tandai Selesai / Hapus: putih, ikon & tulisan pink */
html:root:root:root:root:root .rb.rb.rb,html:root:root:root:root:root .page.v-riwayat .rb.rb,html:root:root:root:root:root #modBody#modBody .rb.rb,html:root:root:root:root:root .rb.red.red,html:root:root:root:root:root .rb.on.on {
background:#fff!important;
background-image:none!important;
color:var(--pink)!important;
-webkit-text-fill-color:var(--pink)!important;
border:0!important;
box-shadow:0 4px 12px rgba(var(--pkrgb,255,46,126),.14)!important;
text-shadow:none!important;
opacity:1
}
html:root:root:root:root:root .rb.rb.rb i,html:root:root:root:root:root .page.v-riwayat .rb i,html:root:root:root:root:root #modBody#modBody .rb i {
color:var(--pink)!important;
-webkit-text-fill-color:var(--pink)!important
}
html:root:root:root:root:root .rb.rb i .miws-e,html:root:root:root:root:root .rb[data-act] i .miws-e,html:root:root:root:root:root .rb.red i .miws-e,html:root:root:root:root:root .rb.on i .miws-e,html:root:root:root:root:root #modBody#modBody .rb i .miws-e {
background:none!important;
background-image:none!important;
border:0!important;
box-shadow:none!important;
color:var(--pink)!important;
stroke:var(--pink)!important;
fill:none!important;
box-sizing:border-box;
width:18px!important;
height:18px!important;
padding:0!important;
margin:0 2px 0 0!important;
border-radius:0!important
}
/* ===== vcx-css ===== */
.hbtns {
gap:8px
}
.bell.vmenu {
background:linear-gradient(145deg,var(--pink2),var(--pink));
color:#fff
}
.vcx {
display:flex;
align-items:center;
gap:12px;
margin:14px 0;
padding:12px 14px;
border-radius:22px;
background:var(--card);
border:2px dashed var(--line);
cursor:pointer;
box-shadow:var(--sh);
position:relative
}
.vcx.live {
border-color:var(--pink);
background:linear-gradient(120deg,var(--pink2),var(--card))
}
.vcx .vcl {
width:46px;
height:46px;
border-radius:14px;
display:grid;
place-items:center;
background:var(--pink2);
font-size:24px;
flex:none;
transform:rotate(-8deg)
}
.vcx .vcm {
flex:1;
min-width:0;
display:flex;
flex-direction:column
}
.vcx small {
font:800 10.5px Nunito,sans-serif;
letter-spacing:.08em;
color:var(--mut)
}
.vcx b {
font:600 16px Fredoka,Nunito,sans-serif;
color:var(--ink)
}
.vcx span {
font-size:12.5px;
color:var(--mut)
}
.vcx em {
font-style:normal;
font-weight:800;
color:var(--pink)
}
.vcx .vcg {
font-style:normal;
font:800 12px Nunito,sans-serif;
padding:7px 14px;
border-radius:999px;
background:var(--pink);
color:#fff
}
.vcx:not(.live) .vcg {
background:var(--line);
color:var(--mut)
}
.vcpop {
text-align:center;
padding:6px 4px
}
.vcpop .vcb {
font-size:40px
}
.vcpop h3 {
margin:4px 0
}
.vcpop .vcs {
color:var(--mut);
margin:0 0 12px
}
.vcc {
font:600 26px Fredoka,Nunito,sans-serif;
letter-spacing:.12em;
padding:12px;
border-radius:16px;
border:2px dashed var(--pink);
color:var(--pink);
background:var(--pink2);
margin:8px 0
}
.vcc.off {
opacity:.55;
border-color:var(--line)
}
#vdr {
position:fixed;
inset:0;
z-index:9999;
pointer-events:none
}
#vdr.on {
pointer-events:auto
}
#vdr .vbk {
position:absolute;
inset:0;
background:rgba(40,20,30,.38);
opacity:0;
transition:opacity .2s
}
#vdr.on .vbk {
opacity:1
}
#vdr .vpn {
position:absolute;
top:0;
right:0;
bottom:0;
width:min(88vw,340px);
background:var(--bg);
color:var(--ink);
border-radius:28px 0 0 28px;
padding:calc(16px + env(safe-area-inset-top,0px)) 14px calc(16px + env(safe-area-inset-bottom,0px));
overflow-y:auto;
transform:translateX(100%);
transition:transform .22s ease;
box-shadow:-10px 0 30px rgba(var(--pr),.25)
}
#vdr.on .vpn {
transform:none
}
.vph {
display:flex;
align-items:center;
gap:10px;
margin-bottom:10px
}
.vph b {
font:600 18px Fredoka,Nunito,sans-serif;
display:block
}
.vph small {
color:var(--mut)
}
.vav {
width:46px;
height:46px;
border-radius:50%;
overflow:hidden;
flex:none;
display:grid;
place-items:center;
background:var(--pink2)
}
.vav img {
width:100%;
height:100%;
object-fit:cover
}
.vx {
margin-left:auto;
border:0;
width:34px;
height:34px;
border-radius:50%;
background:var(--pink2);
color:var(--pink);
font-size:15px
}
.vst {
display:flex;
gap:8px;
align-items:center;
flex-wrap:wrap;
font:700 12px Nunito,sans-serif;
padding:8px 10px;
border-radius:16px;
background:var(--card);
margin-bottom:10px
}
.vvc {
display:flex;
gap:10px;
align-items:center;
width:100%;
text-align:left;
border:2px dashed var(--pink);
background:var(--pink2);
color:var(--ink);
padding:10px 12px;
border-radius:18px;
margin-bottom:10px
}
.vvc span {
font-size:24px
}
.vvc b {
display:block
}
.vvc small {
color:var(--mut)
}
.vgr {
display:grid;
grid-template-columns:1fr 1fr;
gap:8px
}
.vt {
position:relative;
display:flex;
flex-direction:column;
align-items:flex-start;
gap:4px;
padding:12px;
border:0;
border-radius:18px;
background:var(--card);
color:var(--ink);
font-size:20px;
box-shadow:0 4px 12px rgba(var(--pr),.1);
text-align:left
}
.vt b {
font:700 13px Nunito,sans-serif
}
.vt .dot {
position:absolute;
top:8px;
right:8px
}
.vft {
display:grid;
grid-template-columns:1fr 1fr;
gap:8px;
margin:10px 0
}
.vt.sm {
flex-direction:row;
align-items:center;
font-size:16px;
gap:8px;
padding:10px
}
.vso {
margin-top:6px
}
#vdr .vpn {
right:auto;
left:0;
border-radius:0 28px 28px 0;
transform:translateX(-100%);
width:min(82vw,330px);
box-shadow:10px 0 30px rgba(var(--pr),.25)
}
#vdr.on .vpn {
transform:none
}
.mtop {
display:flex;
gap:10px;
align-items:flex-start;
margin-bottom:12px
}
.mlogo {
width:46px;
height:46px;
flex:none;
border-radius:50%;
overflow:hidden;
background:var(--pink2);
display:grid;
place-items:center
}
.mlogo img {
width:100%;
height:100%;
object-fit:cover
}
.mtt {
flex:1;
min-width:0
}
.mtt b {
display:block;
font:600 19px Fredoka,Nunito,sans-serif;
color:var(--pink)
}
.mtt small {
display:block;
color:var(--mut);
font-size:12px;
line-height:1.3
}
.mtt em {
font:800 12px Nunito,sans-serif;
font-style:normal
}
.mtt em.on {
color:#16a34a
}
.mtt em.off {
color:#dc2626
}
.mcard {
display:flex;
gap:12px;
align-items:center;
padding:12px;
border-radius:22px;
background:var(--card);
box-shadow:0 6px 18px rgba(var(--pr),.12);
margin-bottom:6px
}
.mcard b {
font:600 17px Fredoka,Nunito,sans-serif;
display:block
}
.mcard small {
color:var(--mut)
}
.mh {
font:800 12px Nunito,sans-serif;
letter-spacing:.08em;
color:var(--mut);
margin:16px 4px 6px
}
.mr {
display:flex;
align-items:center;
gap:14px;
width:100%;
border:0;
background:none;
color:var(--ink);
padding:7px 4px;
text-align:left
}
.mr b {
font:600 16px Fredoka,Nunito,sans-serif
}
.mi {
width:40px;
height:40px;
border-radius:12px;
background:var(--card);
box-shadow:0 3px 10px rgba(var(--pr),.14);
display:grid;
place-items:center;
color:var(--pink);
flex:none
}
.mi svg {
width:20px;
height:20px
}
.mlang {
display:flex;
justify-content:space-between;
align-items:center;
margin-top:16px;
color:var(--mut)
}
.lp {
position:relative;
display:inline-grid;
grid-template-columns:1fr 1fr;
width:78px;
height:36px;
border:0;
border-radius:999px;
background:linear-gradient(135deg,var(--pink),var(--pink2));
color:#fff;
font:800 13px Nunito,sans-serif;
padding:0;
align-items:center;
text-align:center
}
.lp span {
position:relative;
z-index:1;
opacity:.85
}
.lp i {
position:absolute;
z-index:2;
top:3px;
left:3px;
width:36px;
height:30px;
border-radius:999px;
background:#fff;
color:var(--pink);
font-style:normal;
display:grid;
place-items:center;
transition:transform .2s
}
.lp.en i {
transform:translateX(33px)
}
.vcpg {
padding:2px
}
.vch {
display:flex;
justify-content:space-between;
align-items:center;
margin-bottom:10px
}
.vch b {
font:600 20px Fredoka,Nunito,sans-serif
}
.vch button {
border:0;
background:none;
color:var(--pink);
font:800 15px Nunito,sans-serif
}
.vctabs {
display:grid;
grid-template-columns:1fr 1fr;
padding:5px;
border-radius:999px;
background:var(--pink2);
margin-bottom:12px;
text-align:center;
font:700 14px Nunito,sans-serif
}
.vctabs span {
padding:9px;
border-radius:999px;
color:var(--ink)
}
.vctabs .on {
background:linear-gradient(135deg,var(--pink),#ffb3c9);
color:#fff
}
.vcard {
position:relative;
padding:16px;
border-radius:24px;
background:linear-gradient(135deg,#ff8fb0,#ffc2d4 60%,#ff8fb0);
color:#fff;
box-shadow:0 10px 24px rgba(var(--pr),.25)
}
.vcard h4 {
margin:0;
font:600 19px Fredoka,Nunito,sans-serif
}
.vcard p {
margin:4px 0 10px;
font-weight:800;
font-size:13px
}
.vdots {
display:flex;
gap:8px;
flex-wrap:wrap
}
.vdots i {
width:36px;
height:36px;
border-radius:50%;
border:2px dashed #fff;
display:grid;
place-items:center;
font:800 14px Nunito,sans-serif;
font-style:normal
}
.vdots i.f {
background:#fff;
color:var(--pink);
border-style:solid
}
.vcnt2 {
font:800 15px Nunito,sans-serif;
margin:10px 0 6px
}
.vbar {
height:34px;
width:60%;
background:repeating-linear-gradient(90deg,#fff 0 2px,transparent 2px 4px,#fff 4px 5px,transparent 5px 8px)
}
.vinfo {
position:absolute;
right:14px;
bottom:14px;
border:2px solid #fff;
background:none;
color:#fff;
border-radius:999px;
padding:6px 14px;
font:800 13px Nunito,sans-serif
}
.vlb {
display:block;
font:600 17px Fredoka,Nunito,sans-serif;
color:var(--pink);
margin:14px 0 6px
}
.vin {
display:flex;
gap:8px
}
.vin input {
flex:1;
min-width:0;
border:2px solid var(--pink);
border-radius:14px;
padding:11px;
background:var(--card);
color:var(--ink);
font:600 14px Nunito,sans-serif
}
.vin button {
border:0;
border-radius:999px;
padding:0 20px;
background:linear-gradient(135deg,var(--pink),#ffb3c9);
color:#fff;
font:800 15px Nunito,sans-serif
}
.vcn {
color:var(--mut);
font-size:13.5px;
margin:8px 0
}
.vcrow {
padding:10px 12px;
border-radius:14px;
background:var(--pink2);
margin-top:6px
}
.vcrow b {
display:block;
color:var(--pink);
letter-spacing:.08em
}
.vcrow small {
color:var(--mut)
}
.vcx {
border:0!important;
border-radius:26px;
background:rgba(255,255,255,.92);
box-shadow:0 8px 20px rgba(var(--pkrgb,217,87,138),.16);
padding:12px 14px 12px 12px;
position:relative;
overflow:hidden
}
.vcx::before {
content:"";
position:absolute;
left:0;
top:0;
bottom:0;
width:5px;
background:linear-gradient(180deg,var(--pk2),var(--pk1))
}
.vcx.live {
background:linear-gradient(120deg,#fff,#ffeaf2)
}
.vcx .vcl {
display:none
}
.vci {
width:46px;
height:46px;
border-radius:16px;
flex:none;
display:grid;
place-items:center;
background:linear-gradient(145deg,var(--pk2),var(--pk1));
color:#fff;
box-shadow:0 5px 12px rgba(var(--pkrgb,217,87,138),.32);
font-style:normal
}
.vci svg {
width:24px;
height:24px
}
.vci.s {
width:30px;
height:30px;
border-radius:11px;
display:inline-grid;
vertical-align:middle;
margin-right:8px
}
.vci.s svg {
width:17px;
height:17px
}
.vcx .vcm b {
font:700 17px Fredoka,Nunito,sans-serif;
background:linear-gradient(135deg,var(--k5),var(--k3));
-webkit-background-clip:text;
background-clip:text;
color:transparent
}
.vcx small {
color:var(--k6,var(--mut))
}
.vcx span {
color:var(--k6,var(--mut))
}
.vcx .vcg {
background:linear-gradient(145deg,var(--pk2),var(--pk1));
box-shadow:0 5px 12px rgba(var(--pkrgb,217,87,138),.3);
color:#fff;
font-style:normal
}
.vcx:not(.live) .vcg {
background:#ffe3ef;
color:var(--k3);
box-shadow:none
}
.vch b {
font:700 20px Fredoka,Nunito,sans-serif;
background:linear-gradient(135deg,var(--k5),var(--k3));
-webkit-background-clip:text;
background-clip:text;
color:transparent;
display:flex;
align-items:center
}
.vhero {
padding:16px;
border-radius:26px;
background:linear-gradient(145deg,#fff,#ffeaf2);
box-shadow:0 8px 20px rgba(var(--pkrgb,217,87,138),.16);
text-align:center;
position:relative;
border:2px dashed #ffc2d8
}
.vhero small {
font:800 11px Nunito,sans-serif;
letter-spacing:.1em;
color:var(--k6,var(--mut))
}
.vhero h4 {
margin:4px 0;
font:700 21px Fredoka,Nunito,sans-serif;
color:var(--k3)
}
.vhero p {
margin:0;
color:var(--k6,var(--mut));
font-size:13.5px
}
.vcode {
margin:12px auto 0;
display:inline-block;
padding:9px 20px;
border-radius:999px;
background:linear-gradient(145deg,var(--pk2),var(--pk1));
color:#fff;
font:700 20px Fredoka,Nunito,sans-serif;
letter-spacing:.14em;
box-shadow:0 5px 12px rgba(var(--pkrgb,217,87,138),.3)
}
.vlb {
color:var(--k3)!important
}
.vin input {
border-color:#ffc2d8!important;
border-radius:999px!important;
padding:11px 16px!important
}
.vin button {
background:linear-gradient(145deg,var(--pk2),var(--pk1))!important;
box-shadow:0 5px 12px rgba(var(--pkrgb,217,87,138),.3)
}
.vtk {
display:flex;
align-items:center;
gap:10px;
margin-top:8px;
padding:10px;
border-radius:20px;
background:rgba(255,255,255,.92);
box-shadow:0 6px 14px rgba(var(--pkrgb,217,87,138),.12)
}
.vtk>i {
width:38px;
height:38px;
border-radius:13px;
display:grid;
place-items:center;
background:linear-gradient(145deg,var(--pk2),var(--pk1));
color:#fff;
flex:none
}
.vtk>i svg {
width:20px;
height:20px
}
.vtk div {
flex:1;
min-width:0
}
.vtk b {
display:block;
color:var(--k3);
letter-spacing:.06em
}
.vtk small {
color:var(--mut)
}
.vcp {
border:0;
border-radius:999px;
padding:7px 14px;
background:#ffe3ef;
color:var(--k3);
font:800 12px Nunito,sans-serif
}
.vin input {
border:2px solid #e98aa9!important;
border-radius:14px!important;
padding:12px 14px!important;
text-transform:uppercase;
font-size:15px!important
}
.vin button {
border-radius:999px!important;
padding:0 22px!important;
background:linear-gradient(145deg,#ff9fbd,#ffb8cf)!important;
font:700 17px Fredoka,Nunito,sans-serif!important
}
.vlb {
font:700 19px Fredoka,Nunito,sans-serif!important;
color:#e0527f!important
}
.vcn {
font-size:15px;
line-height:1.5;
color:#b05a78
}
.vlive b {
color:var(--k3);
letter-spacing:.08em
}
.bell.vmenu {
background:linear-gradient(145deg,var(--pk2),var(--pk1))!important;
color:#fff!important
}
.bell.vmenu svg {
width:20px;
height:20px;
display:block
}
.vcx .vcg,.vcx:not(.live) .vcg {
background:linear-gradient(145deg,rgba(255,125,177,.78),rgba(255,46,126,.62))!important;
-webkit-backdrop-filter:blur(8px);
backdrop-filter:blur(8px);
border:1.5px solid #fff;
box-shadow:none!important;
color:#fff!important;
-webkit-text-fill-color:#fff;
text-shadow:none;
padding:8px 20px;
font:700 14px Fredoka,Nunito,sans-serif
}
#vdr .vpn {
left:auto!important;
right:0!important;
border-radius:28px 0 0 28px!important;
transform:translateX(100%)!important;
background:#fff!important;
box-shadow:none!important;
border:2px solid transparent!important;
border-right:0!important;
background:linear-gradient(#fff,#fff) padding-box,linear-gradient(145deg,#ffc6dc,#ff5c9a 48%,#ffd3e4) border-box!important
}
#vdr.on .vpn {
transform:none!important
}
#vdr .mcard,#vdr .mi,#vdr .vx {
background:linear-gradient(#fff,#fff) padding-box,linear-gradient(145deg,#ffc6dc,#ff5c9a 48%,#ffd3e4) border-box!important;
border:2px solid transparent!important;
box-shadow:none!important;
color:#e0527f
}
#vdr .mi {
border-radius:14px
}
#vdr .mcard {
border-radius:24px
}
#vdr .mr b,#vdr .mcard b,#vdr .mtt b {
color:#e0527f!important;
-webkit-text-fill-color:#e0527f
}
#vdr .mcard small,#vdr .mtt small {
color:#f08aae
}
#vdr .mh {
color:#f4a0bd
}
#vdr .mlogo,#vdr .vav {
box-shadow:none;
border:2px solid #ffc6dc
}
#vdr .mlang {
color:#e0527f
}
#vdr .mr:active .mi {
filter:brightness(.97)
}
#vdr .mi {
background:linear-gradient(180deg,rgba(255,255,255,.42),rgba(255,255,255,0) 52%),linear-gradient(145deg,#ff8db8,#ff3f86)!important;
border:0!important;
color:#fff!important;
box-shadow:none!important
}
#vdr .mi svg {
stroke:#fff;
stroke-width:2
}
.vcpg {
position:relative
}
.vsp {
position:absolute;
color:#ffb3cf;
pointer-events:none
}
.vsp.a {
right:84px;
top:6px;
font-size:16px
}
.vsp.b {
right:28px;
top:78px;
font-size:20px
}
.vch b {
color:var(--k3)
}
.vcpg .vlb {
color:var(--pk1)!important;
font:700 19px Fredoka,Nunito,sans-serif!important;
margin:16px 0 8px
}
.vin input {
background:linear-gradient(#fff,#fff) padding-box,linear-gradient(145deg,#ffc6dc,#ff5c9a 48%,#ffd3e4) border-box!important;
border:2px solid transparent!important;
border-radius:16px!important;
color:var(--k3)!important;
box-shadow:none!important
}
.vin input::placeholder {
color:#f2a1bf;
font-weight:700;
letter-spacing:.04em
}
.vin button {
background:linear-gradient(180deg,rgba(255,255,255,.42),rgba(255,255,255,0) 52%),linear-gradient(145deg,#ff8db8,#ff3f86)!important;
box-shadow:none!important;
color:#fff!important;
font:700 17px Fredoka,Nunito,sans-serif!important;
padding:0 24px!important
}
.vnote {
color:var(--k3)!important;
font:700 14px/1.5 Nunito,sans-serif!important;
padding:10px 14px;
border-radius:16px;
background:rgba(255,255,255,.7);
margin:10px 0 0
}
.vnote b {
letter-spacing:.1em;
color:var(--pk1)
}
.vemp {
display:flex;
flex-direction:column;
align-items:center;
gap:4px;
padding:18px 12px;
border-radius:22px;
border:2px dashed #ffb3cf;
background:rgba(255,255,255,.6);
text-align:center
}
.vemp>i {
width:44px;
height:44px;
border-radius:15px;
display:grid;
place-items:center;
background:linear-gradient(180deg,rgba(255,255,255,.42),rgba(255,255,255,0) 52%),linear-gradient(145deg,#ff8db8,#ff3f86);
color:#fff
}
.vemp>i svg {
width:22px;
height:22px
}
.vemp span {
font:700 15px Fredoka,Nunito,sans-serif;
color:var(--k3)
}
.vemp small {
color:var(--k5);
font-weight:700
}
.vtk b,.vtk small {
color:var(--k3)
}
.vtk small {
opacity:.75
}
.vrow {
display:grid;
grid-template-columns:1fr 1fr;
gap:10px;
margin:14px 0;
align-items:stretch
}
.vrow:has(#pwa:empty) {
grid-template-columns:1fr
}
#pwa:empty {
display:none
}
.vrow>#pwa {
display:flex
}
.vrow .pwab {
flex-direction:column;
justify-content:center;
text-align:center;
gap:6px;
width:100%;
padding:14px 10px
}
.vrow .pwat span {
font-size:12px
}
.vrow .pwab .btn {
width:100%;
padding:8px 10px
}
.vrow .vcx {
margin:0;
flex-direction:column;
justify-content:center;
text-align:center;
gap:6px;
padding:14px 10px;
border-radius:24px
}
.vrow .vcx::before {
display:none
}
.vrow .vcx .vcm {
align-items:center
}
.vrow .vcx .vcm b {
font-size:15px
}
.vrow .vcx .vcm span {
font-size:12px
}
.vrow .vcx .vcg {
width:100%;
text-align:center;
box-sizing:border-box;
padding:8px 10px
}
.vrow:has(#pwa:empty) .vcx {
flex-direction:row;
text-align:left
}
.vrow:has(#pwa:empty) .vcx .vcm {
align-items:flex-start;
flex:1
}
.vrow:has(#pwa:empty) .vcx .vcg {
width:auto;
padding:8px 20px
}
/* drawer: kotak kecil, tombol X bulat glossy */
#vdr .mi {
width:32px;
height:32px;
border-radius:11px
}
#vdr .mi svg {
width:16px;
height:16px
}
#vdr .mr {
gap:12px;
padding:5px 4px
}
#vdr .mr b {
font-size:15px
}
#vdr .mh {
margin:12px 4px 4px;
font-size:11px
}
#vdr .vx {
width:34px;
height:34px;
border-radius:50%!important;
background:linear-gradient(180deg,rgba(255,255,255,.42),rgba(255,255,255,0) 52%),linear-gradient(145deg,#ff8db8,#ff3f86)!important;
border:0!important;
box-shadow:none!important;
color:#fff!important;
font-size:14px;
display:grid;
place-items:center;
padding:0
}
/* tombol Klik */
.vcx .vcg,.vcx:not(.live) .vcg {
background:linear-gradient(180deg,rgba(255,255,255,.42),rgba(255,255,255,0) 52%),linear-gradient(145deg,#ff8db8,#ff3f86)!important;
border:0!important;
box-shadow:none!important;
-webkit-backdrop-filter:none;
backdrop-filter:none;
border-radius:999px;
color:#fff!important
}
/* baris Pasang Aplikasi + Voucher: sejajar, kecil, ringkas */
.vrow {
grid-template-columns:repeat(2,minmax(0,1fr))!important;
gap:10px;
align-items:stretch
}
.vrow:has(#pwa:empty) {
grid-template-columns:1fr!important
}
.vrow>* {
margin:0!important
}
.vrow>#pwa {
display:flex;
align-items:stretch;
min-width:0
}
.vrow .pwab,.vrow .vcx {
box-sizing:border-box;
height:100%;
width:100%;
margin:0!important;
padding:10px 8px!important;
border-radius:20px!important;
display:flex;
flex-direction:column;
align-items:center;
justify-content:space-between;
gap:6px;
text-align:center
}
.vrow .pwai,.vrow .vci {
width:34px;
height:34px;
border-radius:12px;
font-size:18px;
display:grid;
place-items:center;
flex:none
}
.vrow .vci svg {
width:18px;
height:18px
}
.vrow .pwat {
flex:0 0 auto;
align-items:center
}
.vrow .pwat b {
font-size:13px;
line-height:1.25
}
.vrow .pwat span,.vrow .vcx .vcm small {
display:none
}
.vrow .vcx .vcm {
align-items:center;
flex:0 0 auto
}
.vrow .vcx .vcm b {
font-size:13px;
line-height:1.25
}
.vrow .vcx .vcm span {
font-size:11.5px
}
.vrow .pwab .btn,.vrow .vcx .vcg {
width:100%;
box-sizing:border-box;
padding:7px 8px!important;
font-size:13px!important;
min-height:0;
text-align:center
}
.vrow:has(#pwa:empty) .vcx {
flex-direction:row;
text-align:left;
justify-content:flex-start
}
.vrow:has(#pwa:empty) .vcx .vcg {
width:auto;
padding:7px 18px!important
}
.vcpg .pwas {
margin:12px 0 14px;
text-align:left
}
.vcpg .pwas>b {
display:block;
font:700 17px Fredoka,Nunito,sans-serif;
color:var(--pk1);
margin:12px 0 4px
}
.vcpg .pwas ol {
margin:0;
padding-left:20px
}
.vcpg .pwas li {
color:var(--k3);
font-weight:600;
font-size:14.5px;
line-height:1.5;
margin:3px 0
}
.vcpg .pwas li b {
color:var(--pk1);
font-weight:800
}
.vcpg .vpk {
width:100%;
border:0;
border-radius:999px;
padding:12px;
background:linear-gradient(180deg,rgba(255,255,255,.42),rgba(255,255,255,0) 52%),linear-gradient(145deg,#ff8db8,#ff3f86);
color:#fff;
box-shadow:none;
font:700 17px Fredoka,Nunito,sans-serif
}
html:root:root .vrow .pwab,html:root:root .vrow .vcx {
display:grid!important;
grid-template-columns:auto 1fr auto;
grid-template-areas:"ic . bt" "tx tx tx";
align-items:center;
align-content:space-between;
row-gap:8px;
text-align:left;
justify-content:stretch;
padding:10px!important;
background:rgba(255,255,255,.92)!important;
border:0!important;
box-shadow:0 8px 20px rgba(var(--pkrgb,217,87,138),.16)!important
}
html:root:root .vrow .pwai,html:root:root .vrow .vci {
grid-area:ic;
width:34px;
height:34px;
border-radius:12px;
background:linear-gradient(180deg,rgba(255,255,255,.42),rgba(255,255,255,0) 52%),linear-gradient(145deg,#ff8db8,#ff3f86)!important;
border:0!important;
box-shadow:none!important;
color:#fff!important;
display:grid;
place-items:center
}
html:root:root .vrow .pwai svg {
width:18px;
height:18px;
stroke:#fff;
color:#fff
}
html:root:root .vrow .pwat,html:root:root .vrow .vcx .vcm {
grid-area:tx;
align-items:flex-start;
text-align:left;
min-width:0
}
html:root:root .vrow .pwab .btn,html:root:root .vrow .vcx .vcg {
grid-area:bt;
width:auto!important;
padding:5px 14px!important;
font:700 12.5px Fredoka,Nunito,sans-serif!important;
border:0!important;
box-shadow:none!important;
border-radius:999px!important;
background:linear-gradient(180deg,rgba(255,255,255,.42),rgba(255,255,255,0) 52%),linear-gradient(145deg,#ff8db8,#ff3f86)!important;
color:#fff!important;
-webkit-text-fill-color:#fff;
justify-self:end
}
html:root:root .vrow .pwat b,html:root:root .vrow .vcx .vcm b {
font:700 14px/1.25 Fredoka,Nunito,sans-serif!important;
background:linear-gradient(135deg,var(--k5),var(--k3));
-webkit-background-clip:text;
background-clip:text;
color:transparent!important;
-webkit-text-fill-color:transparent
}
html:root:root .vrow .vcx .vcm span {
font-size:11.5px;
color:var(--k6,var(--mut))
}
html:root:root .vrow:has(#pwa:empty) .vcx {
grid-template-areas:"ic tx bt"
}
html:root:root:root .vrow #pwa .pwai .miws-e {
background:none!important;
border:0!important;
box-shadow:none!important;
padding:0!important;
width:18px!important;
height:18px!important;
border-radius:0!important;
box-sizing:border-box;
stroke:#fff!important;
stroke-width:1.9!important;
color:#fff!important;
display:block
}
html:root:root:root .vrow #pwa .pwai {
font-size:0;
line-height:0;
overflow:hidden
}
/* tombol melayang lama disembunyikan */
html:root:root:root #rail,html:root:root:root #mtog,html:root:root:root #ixback {
display:none!important
}
/* keranjang di tengah dock */
html:root:root:root #ixcart {
position:fixed!important;
width:50px!important;
height:50px!important;
border:0!important;
border-radius:50%!important;
background:linear-gradient(180deg,rgba(255,255,255,.42),rgba(255,255,255,0) 52%),linear-gradient(145deg,#ff8db8,#ff3f86)!important;
box-shadow:none!important;
color:#fff!important;
z-index:40
}
html:root:root:root #ixcart svg {
width:24px!important;
height:24px!important;
color:#fff!important;
stroke:#fff!important
}
html:root:root:root #ixcart i {
background:#fff!important;
color:var(--pk1)!important;
box-shadow:none!important
}
/* drawer: musik + bahasa, sosial */
#vdr .mlr {
display:flex;
align-items:center;
gap:8px
}
#vdr .vmus {
width:36px;
height:36px;
border-radius:50%;
border:0;
padding:0;
display:grid;
place-items:center;
background:linear-gradient(180deg,rgba(255,255,255,.42),rgba(255,255,255,0) 52%),linear-gradient(145deg,#ff8db8,#ff3f86);
color:#fff;
box-shadow:none
}
#vdr .vmus svg {
width:18px;
height:18px;
stroke:#fff;
fill:none;
stroke-width:2
}
#vdr .vmus.off {
opacity:.5
}
#vdr .vso {
gap:10px
}
#vdr .vso a {
width:42px;
height:42px;
border-radius:14px;
font-size:20px;
text-decoration:none;
box-shadow:none;
background:linear-gradient(#fff,#fff) padding-box,linear-gradient(145deg,#ffc6dc,#ff5c9a 48%,#ffd3e4) border-box;
border:2px solid transparent
}
#vdr .vso a svg {
width:24px;
height:24px
}
#vdr .vso a.brand {
width:44px;
height:44px;
border:0!important;
background:none!important;
box-shadow:none!important;
padding:0;
border-radius:13px;
overflow:hidden
}
#vdr .vso a.brand svg {
width:44px;
height:44px
}
#vdr .vso a.pk {
width:44px;
height:44px;
border:0!important;
background:linear-gradient(180deg,rgba(255,255,255,.42),rgba(255,255,255,0) 52%),linear-gradient(145deg,#ff8db8,#ff3f86)!important;
color:#fff;
box-shadow:none!important;
border-radius:13px
}
#vdr .vso a.pk svg {
width:23px;
height:23px;
stroke:#fff
}
#vdr .vso a.pk {
background:#fff!important;
border:1.5px solid #ffd0e3!important;
box-shadow:none!important;
color:var(--pink);
font-size:24px;
line-height:1
}
#vdr .vso a.pk svg,#vdr .vso a.pk .miws-e {
width:26px!important;
height:26px!important;
stroke:var(--pink)!important;
color:var(--pink)!important;
background:none!important;
border:0!important;
box-shadow:none!important;
padding:0!important
}
/* drawer: Tentang Toko Miws, ikon disamakan dengan halaman awal */
#vdr .vso {
gap:10px;
align-items:flex-start
}
#vdr .vso a.pk.pk {
width:84px;
height:auto;
display:flex;
flex-direction:column;
align-items:center;
gap:5px;
padding:0;
background:none!important;
border:0!important;
box-shadow:none!important;
border-radius:0;
text-decoration:none;
font:700 10.5px/1.2 Nunito,sans-serif;
color:var(--pink);
text-align:center
}
#vdr .vso a.pk.pk i {
display:grid;
place-items:center;
width:46px;
height:46px;
border-radius:15px;
background:#fff;
border:1.5px solid #ffd0e3;
box-shadow:0 5px 12px rgba(var(--pr),.14);
font-style:normal;
font-size:24px;
line-height:1;
transition:transform .15s
}
#vdr .vso a.pk.pk:active i {
transform:scale(.92)
}
/* chip klaim lebih cantik + kotak putih solid seperti kartu Welcome */
.clchip {
align-items:center;
gap:11px;
padding:11px 13px;
border-radius:18px;
background:linear-gradient(135deg,#fff8e6,#fff1cf);
color:#7a5200;
border:1.5px solid #ffe1a0;
box-shadow:0 6px 14px rgba(255,180,60,.14)
}
.clchip .cci {
flex:none;
display:grid;
place-items:center;
width:34px;
height:34px;
border-radius:50%;
background:#fff;
color:#d98a00;
box-shadow:0 3px 8px rgba(0,0,0,.08)
}
.clchip .cci svg {
width:18px;
height:18px;
display:block
}
.clchip span {
display:flex;
flex-direction:column;
gap:1px;
min-width:0
}
.clchip b {
font-weight:800;
font-size:13.5px;
line-height:1.25
}
.clchip small {
font-size:12px;
font-weight:700;
opacity:.82;
line-height:1.3
}
.clchip.ok {
background:linear-gradient(135deg,#effbf1,#d9f3df);
color:#2f6b3b;
border-color:#bfe7c8;
box-shadow:0 6px 14px rgba(70,170,100,.14)
}
.clchip.ok .cci {
color:#2fa150
}
.clchip.warn {
background:linear-gradient(135deg,#fff3f7,#ffe1ea);
color:#a3294f;
border-color:#ffc6d8;
box-shadow:0 6px 14px rgba(var(--pr),.16)
}
.clchip.warn .cci {
color:#ff4f8b
}
html:root .box.box {
background:#fff!important;
-webkit-backdrop-filter:none!important;
backdrop-filter:none!important;
box-shadow:0 18px 44px rgba(var(--pr),.16)!important
}
@media (prefers-color-scheme:dark) {
html:root:not([data-theme="light"]) .box.box {
background:var(--card)!important
}
}
html:root[data-theme="dark"] .box.box {
background:var(--card)!important
}
@media (prefers-color-scheme:dark) {
html:root:not([data-theme="light"]) .clchip {
background:#4a3a14;
color:#ffe29a;
border-color:#6b5420
}
html:root:not([data-theme="light"]) .clchip.ok {
background:#1f3a2a;
color:#9be3b0;
border-color:#2f5a40
}
html:root:not([data-theme="light"]) .clchip.warn {
background:#4a2433;
color:#ffc2d4;
border-color:#6b3349
}
html:root:not([data-theme="light"]) .clchip .cci {
background:rgba(255,255,255,.12)
}
}
html:root[data-theme="dark"] .clchip {
background:#4a3a14;
color:#ffe29a;
border-color:#6b5420
}
html:root[data-theme="dark"] .clchip.ok {
background:#1f3a2a;
color:#9be3b0;
border-color:#2f5a40
}
html:root[data-theme="dark"] .clchip.warn {
background:#4a2433;
color:#ffc2d4;
border-color:#6b3349
}
html:root[data-theme="dark"] .clchip .cci {
background:rgba(255,255,255,.12)
}
/* drawer Tentang Toko Miws: 5 ikon tanpa tulisan, seperti halaman awal */
#vdr .vso {
gap:9px;
align-items:center;
flex-wrap:wrap
}
#vdr .vso a.pk.pk,#vdr .vso a.brand.brand {
width:46px;
height:46px;
padding:0;
display:grid;
place-items:center;
border-radius:15px;
background:#fff!important;
border:1.5px solid #ffd0e3!important;
box-shadow:0 5px 12px rgba(var(--pr),.14)!important;
overflow:hidden;
font-size:24px;
line-height:1;
text-decoration:none;
transition:transform .15s
}
#vdr .vso a.brand.brand svg {
width:30px;
height:30px;
display:block
}
#vdr .vso a.pk.pk i {
font-style:normal;
font-size:24px;
line-height:1
}
#vdr .vso a.pk.pk:active,#vdr .vso a.brand.brand:active {
transform:scale(.92)
}
/* background satu warna (tanpa gradasi pink/hijau/ungu), titik halus tetap */
html:root:root:root body {
background-image:none!important;
background-color:var(--bg)!important
}
html:root:root:root[data-pal="pink"] body {
background-image:none!important;
background-color:#ffe9f2!important
}
html:root:root:root body::before {
display:none!important
}
html:root:root:root {
--flbg:var(--bg)
}
html:root:root:root[data-pal="pink"] {
--flbg:#ffe9f2
}
@media (prefers-color-scheme:dark) {
html:root:root:root:not([data-theme="light"]) body,html:root:root:root[data-pal="pink"]:not([data-theme="light"]) body {
background-image:none!important;
background-color:#1c1318!important
}
html:root:root:root:not([data-theme="light"]) {
--flbg:#1c1318
}
}
html:root:root:root[data-theme="dark"] body,html:root:root:root[data-pal="pink"][data-theme="dark"] body {
background-image:none!important;
background-color:#1c1318!important
}
html:root:root:root[data-theme="dark"] {
--flbg:#1c1318
}
/* halaman awal: background sama dengan website (satu warna) */
html:root:root:root body #ix {
background:#ffe9f2!important
}
@media (prefers-color-scheme:dark) {
html:root:root:root:not([data-theme="light"]) body #ix {
background:#1c1318!important
}
}
html:root:root:root[data-theme="dark"] body #ix {
background:#1c1318!important
}
/* halaman awal: hilangkan bola warna, titik rata seperti website */
html:root:root:root body #ix .ixb {
display:none!important
}
html:root:root:root body #ix::before {
-webkit-mask-image:none!important;
mask-image:none!important
}
/* teks pink: bulan tanggalan, kategori, nama aplikasi */
html:root:root:root .cal .ch b {
color:var(--pink)!important
}
html:root:root:root .ctile b,html:root:root:root .ctile span,html:root:root:root .ctile span svg,html:root:root:root .ctile .miws-e {
color:var(--pink)!important
}
html:root:root:root .ctile span svg,html:root:root:root .ctile .miws-e {
stroke:var(--pink)!important
}
html:root:root:root .tab:not(.on),html:root:root:root .tab:not(.on) .miws-e {
color:var(--pink)!important
}
html:root:root:root .card h3,html:root:root:root .card.card h3 {
color:var(--pink)!important
}
/* nama toko pink */
html:root:root:root .pn b,html:root:root:root header.top .pn b,html:root:root:root .mtt b {
color:var(--pink)!important
}
/* ikon riwayat & cek pesanan: pink halus seperti ikon lain */
html:root:root:root .idc b .miws-e,html:root:root:root .wl.inv .miws-e,html:root:root:root .ocek .fh .miws-e,html:root:root:root .page.v-riwayat h2 .miws-e,html:root:root:root .page.v-riwayat h3 .miws-e {
box-sizing:content-box;
width:18px;
height:18px;
padding:7px;
border-radius:13px;
border:0!important;
color:#fff!important;
stroke:#fff!important;
stroke-width:2.1;
background:linear-gradient(180deg,rgba(255,255,255,.42),rgba(255,255,255,0) 52%),linear-gradient(145deg,#ff8db8,#ff3f86)!important;
box-shadow:none!important;
vertical-align:middle
}
/* ikon mata pengunjung: pink halus */
html:root:root:root .vcnt .miws-e,html:root:root:root .vcnt.vch .miws-e {
box-sizing:content-box;
width:13px;
height:13px;
padding:4px;
border-radius:50%;
border:0!important;
color:#fff!important;
stroke:#fff!important;
stroke-width:2.2;
background:linear-gradient(180deg,rgba(255,255,255,.42),rgba(255,255,255,0) 52%),linear-gradient(145deg,#ff8db8,#ff3f86)!important;
box-shadow:none!important;
vertical-align:middle
}
/* ===== miws-v50 ===== */
/* keranjang = slot dock, bulat pink di antara Katalog & Testimoni */
html:root:root:root:root .dock .ni.cartni,html:root:root:root:root .dock .ni.cartni.on {
background:none!important;
box-shadow:none!important;
overflow:visible
}
html:root:root:root:root .dock .ni.cartni .e {
width:46px;
height:46px;
border-radius:50%;
margin:-27px 0 5px;
color:#fff!important;
border:3px solid var(--card,#fff);
background:linear-gradient(180deg,rgba(255,255,255,.42),rgba(255,255,255,0) 52%),linear-gradient(145deg,#ff8db8,#ff3f86)!important;
box-shadow:0 6px 14px rgba(255,63,134,.38);
transform:none!important
}
html:root:root:root:root .dock .ni.cartni .miws-s {
width:22px;
height:22px;
color:#fff!important;
stroke:#fff!important
}
html:root:root:root:root .dock .ni:not(.cartni):not(.on):not(:active) .e,html:root:root:root:root .dock .ni:not(.cartni):not(.on):not(:active) .miws-s {
color:var(--pk1,#e0457f)!important
}
html:root:root:root:root .dock .ni.cartni small {
color:var(--pk1,#e0457f)!important;
font-weight:700
}
html:root:root:root:root .dock .ni.cartni.on .e {
box-shadow:0 0 0 3px rgba(255,63,134,.25),0 6px 14px rgba(255,63,134,.38)
}
html:root:root:root:root .dock .ni.cartni .dot {
top:-22px;
right:calc(50% - 31px);
background:#fff;
color:var(--pk1,#e0457f);
box-shadow:0 0 0 2px var(--pk1,#e0457f)
}