/* ===== dm-clean ===== */
/* ===== D-Member Clean ===== */
:root{--r:20px;--line:#ECE8F6;--fill:#F7F5FC;--ease:cubic-bezier(.22,1,.36,1);--ease-o:cubic-bezier(.4,0,.2,1)}
body{background:#FAFAFD!important;background-image:none!important}
.w{gap:14px;padding:16px}
/* tanpa blur & bayangan (ringan untuk HP) */
*,*::before,*::after{-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
*,*::before,*::after{box-shadow:none!important;text-shadow:none!important}
.in:focus{box-shadow:0 0 0 3px rgba(124,58,237,.14)!important}
.d.now{box-shadow:0 0 0 3px rgba(124,58,237,.14)!important}
svg[style*="drop-shadow"]{filter:none!important}
/* kartu */
.card{background:#fff;border:1px solid var(--line)!important;border-radius:var(--r)!important;padding:18px}
.hero{border:0!important;border-radius:22px!important;background:linear-gradient(135deg,#7c3aed 0%,#8b5cf6 100%)!important}
.hero::after{background:rgba(255,255,255,.10)!important}
.pn{border-radius:18px;background:linear-gradient(135deg,#7c3aed,#9d6df5)}
.ct{gap:14px;margin-bottom:12px}
.ct h3{font-size:16px;letter-spacing:-.01em}
.sub{line-height:1.45}
.ib{width:44px;height:44px;border-radius:14px;background:var(--fill);border:0!important}
.ib.av{background:linear-gradient(135deg,#7c3aed,#8b5cf6)}
.pill,.chips div{border:1px solid var(--line)!important;background:var(--fill)}
.badge{background:rgba(255,255,255,.18)}
.qr{border:1px solid var(--line);border-radius:18px;background:#fff}
.li{border-top-color:#F1EEF8}
.d{border-color:var(--line);background:var(--fill);border-radius:14px}
.d.on{background:var(--p);border-color:var(--p)}
.d.g{background:#FFFAEB;border-color:#FDE9A8}
.d.ms{background:#FEF3F2;border-color:#FDD8D4}
.al{border-radius:14px;border-width:1px;padding:12px 14px}
.al.info{font-weight:500;background:var(--fill);border-color:var(--line);color:#5b21b6}
/* misi */
.q{border:1px solid var(--line)!important;border-radius:16px;background:#fff}
.q.rd{border-color:#C4B5FD!important;background:#FBFAFF}
.q.cl{background:#F5FEF9;border-color:#C9F2DB!important}
.q.fin{background:#FFFCF2;border-color:#FDE9A8!important}
.q.fin.rd{border-color:#F8C14D!important}
.qb{border:0;background:var(--fill);color:#A78BFA}
.q.rd .qb{background:var(--p);color:#fff}
.q.fin.rd .qb{background:#F59E0B}
.qok{border:0;background:#E8FAF1}
.q .qp,.bar2{background:#EFEBFA}
/* tombol & input */
.btn{border-radius:14px;min-height:48px;font-weight:700;letter-spacing:-.005em}
.btn.o{background:#fff;border:1px solid var(--line)}
.btn.rd{border-color:#FDD8D4;background:#FEF3F2}
.in{border-radius:14px;border:1px solid var(--line);background:#fff}
/* nav: rata, tanpa bayangan */
nav{border-radius:0!important;background:#fff!important;border-top:1px solid var(--line)!important}
.ds-ind{background:var(--p)!important;border-radius:14px!important}
/* popup / sheet */
.ov{background:rgba(17,24,39,.4);}
.ov .card{border-radius:26px 26px 0 0!important;border:0!important}
.ov.ctr .card{border-radius:24px!important;border:1px solid var(--line)!important}
.toast{border-radius:14px;background:#1F1B2E}
/* ===== animasi: seragam & halus ===== */
@keyframes dsScrimIn{from{background-color:rgba(17,24,39,0)}}
@keyframes dsScrimOut{to{background-color:rgba(17,24,39,0)}}
@keyframes dsPopIn{from{opacity:0;transform:translateY(16px) scale(.965)}}
@keyframes dsPopOut{to{opacity:0;transform:translateY(10px) scale(.97)}}
@keyframes dsItemIn{from{opacity:0;transform:translateY(8px)}}
@keyframes dsToastIn{from{opacity:0;transform:translate(-50%,20px) scale(.97)}}
.ov{animation-duration:.36s;animation-timing-function:var(--ease-o)}
.ov .card{animation-duration:.5s;animation-timing-function:var(--ease)}
.ov.ctr .card{animation-duration:.46s}
.ov.lv{animation-duration:.26s}.ov.lv .card{animation-duration:.26s}
.anim .pg>*{animation-duration:.5s}
.anim .pg>:nth-child(2){animation-delay:.05s}.anim .pg>:nth-child(3){animation-delay:.1s}.anim .pg>:nth-child(4){animation-delay:.15s}.anim .pg>:nth-child(n+5){animation-delay:.2s}
.btn,.in,.q,.qb,.d,.card,.al,nav button{transition-property:color,background-color,border-color,box-shadow,transform,opacity;transition-duration:.24s;transition-timing-function:var(--ease)}
.btn{transition-property:transform,background-color,border-color,opacity,color}
@media(hover:hover){.q:not(.cl):hover{border-color:#D8CEFA!important}}
.bar i,.bar2 i,.q .qp i{transition-duration:.9s}

/* ===== Lebih bersih ===== */
body{background:#F6F5FA!important}
.card{border:0!important;border-radius:22px!important;padding:20px}
.hero::after,.pn::after{display:none!important}
.hero{background:linear-gradient(140deg,#7c3aed,#8f5cf7)!important}
.pts{font-size:40px;letter-spacing:-.02em}
.ct h3,h3{letter-spacing:-.01em}
.ib{background:#F4F1FD;width:42px;height:42px;border-radius:13px}
.pill,.chips div{border:0!important;background:#F4F1FD}
.qr{border:0;background:#F8F7FC;border-radius:18px}
.code{letter-spacing:.18em}
.q{border:0!important;background:#F8F7FC}
.q.rd{background:#F1ECFE}
.q.cl{background:#EEFBF4}
.q.fin{background:#FFF8E6}
.in{border:1px solid #E7E3F3;background:#fff}
.btn.o{border:1px solid #E7E3F3}
.d{border:0!important;background:#F8F7FC}
.d.on{background:var(--p)}.d.g{background:#FFF4D6}.d.ms{background:#FEECEA}
.d.now{background:#fff;box-shadow:inset 0 0 0 2px var(--p)!important}
.al{border:0!important}
.al.info{background:#F4F1FD}
.li{border-top:1px solid #F1EEF8}
nav{border-top:1px solid #EEEBF6!important}
.ov .card{border:0!important}
.ov.ctr .card{border:0!important}
.top{padding:4px 2px 2px}
/* ===== Animasi menyeluruh ===== */
.anim .li{animation:dsItemIn .46s var(--ease) backwards}
.anim .li:nth-of-type(2){animation-delay:.04s}.anim .li:nth-of-type(3){animation-delay:.08s}.anim .li:nth-of-type(4){animation-delay:.12s}.anim .li:nth-of-type(5){animation-delay:.16s}.anim .li:nth-of-type(n+6){animation-delay:.2s}
.anim .grid2>*{animation:dsItemIn .46s var(--ease) .12s backwards}
.anim .grid2>*:nth-child(2){animation-delay:.17s}.anim .grid2>*:nth-child(3){animation-delay:.22s}.anim .grid2>*:nth-child(n+4){animation-delay:.27s}
.anim .qr,.anim .code{animation:dsItemIn .5s var(--ease) .12s backwards}
.anim .al{animation:dsItemIn .46s var(--ease) backwards}
.ov .card>*:not(.fl){animation:dsItemIn .46s var(--ease) backwards}
.ov .card>*:not(.fl):nth-child(2){animation-delay:.06s}.ov .card>*:not(.fl):nth-child(3){animation-delay:.1s}.ov .card>*:not(.fl):nth-child(4){animation-delay:.14s}.ov .card>*:not(.fl):nth-child(n+5){animation-delay:.18s}
.card:not(.hero){transition:transform .3s var(--ease),background-color .3s var(--ease)}
.q:active,.d:active{transform:scale(.985)}
.q,.d,.li,.qb,.qok,.pill,.ib,.al{transition:transform .2s var(--ease),background-color .3s var(--ease),border-color .3s var(--ease),color .25s ease,opacity .25s ease}
.toast{animation-duration:.4s}
.sk{animation-duration:1.4s}