#ss-root{--ink:#18252b;--mut:#5d6e75;--bg:#f5f8f8}#ss-root *{box-sizing:border-box}#ss-root{scroll-behavior:smooth}#ss-root{margin:0;color:var(--ink);font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;line-height:1.65;background:radial-gradient(ellipse at 8% 10%,#d3e8e0,transparent 42%),radial-gradient(ellipse at 90% 15%,#dce9e4,transparent 42%),radial-gradient(ellipse at 60% 95%,#e6efeb,transparent 38%),var(--bg);min-height:100vh;padding:env(safe-area-inset-top) 0 env(safe-area-inset-bottom)}#ss-root .wrap{max-width:1100px;margin:auto;padding:16px}#ss-root .hero{border-radius:26px;padding:clamp(20px,4vw,40px);background:linear-gradient(120deg,#9fc7ba,#c3d9d1 50%,#8fb4a8);box-shadow:0 20px 60px rgba(65,76,103,.18)}#ss-root .eyebrow{font-size:.7rem;letter-spacing:.16em;font-weight:800;color:#3f6469}#ss-root h1{font-size:clamp(2rem,7vw,3.6rem);line-height:1.03;letter-spacing:-.06em;margin:8px 0 10px}#ss-root .hero p{margin:0;max-width:620px;color:#42595f}#ss-root .bar{height:8px;background:rgba(255,255,255,.6);border-radius:9px;margin:18px 0 6px;overflow:hidden}#ss-root .bar i{display:block;height:100%;width:0;background:#2e7770;transition:width .4s}#ss-root .pt{font-size:.8rem;color:#42595f;font-weight:700}#ss-root .tabs{display:flex;gap:8px;margin:20px 0;overflow-x:auto;padding-bottom:4px}#ss-root .tab{color:#2c3d43!important;border:1px solid #fff;background:rgba(255,255,255,.6);padding:9px 15px;border-radius:99px;font:inherit;font-weight:700;font-size:.88rem;white-space:nowrap;cursor:pointer}#ss-root .tab.on{background:#2f5a52!important;color:#fff!important}#ss-root .grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px}#ss-root .card{border:1px solid #fff;border-radius:18px;padding:14px;min-height:130px;cursor:pointer;display:flex;flex-direction:column;justify-content:space-between;text-align:left;font:inherit;color:inherit;transition:transform .15s,box-shadow .15s}#ss-root .card:hover,#ss-root .card:focus-visible{transform:translateY(-3px);box-shadow:0 12px 26px rgba(40,65,70,.14);outline:none}#ss-root .card b{font-size:.98rem;line-height:1.25;letter-spacing:-.02em}#ss-root .card .t{display:flex;justify-content:space-between;font-size:.68rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#4d6167}#ss-root .card .e{font-size:1.7rem}#ss-root .card.done::after{content:"✓ Selesai";font-size:.7rem;font-weight:800;color:#1c6b5a}#ss-root .src{font-size:.78rem;color:var(--mut);margin:22px 4px 8px}#ss-root /* reader */ #rd{position:fixed;inset:0;z-index:20;background:rgba(24,35,43,.45);backdrop-filter:blur(8px);display:none}#ss-root #rd.on{display:flex;align-items:flex-end;justify-content:center}#ss-root .sheet{width:min(720px,100%);max-height:94vh;overflow:auto;border-radius:26px 26px 0 0;background:#fff;box-shadow:0 -20px 80px rgba(0,0,0,.3);animation:up .3s ease;-webkit-overflow-scrolling:touch}@keyframes up{from{transform:translateY(40px);opacity:0}}@media(min-width:760px){#ss-root #rd.on{align-items:center}#ss-root .sheet{border-radius:26px;max-height:90vh}}#ss-root .top{padding:18px 20px 0;position:relative}#ss-root .x{color:#18252b!important;position:sticky;float:right;top:8px;margin:8px 8px 0 0;width:40px;height:40px;border-radius:50%;border:0;background:rgba(255,255,255,.9);box-shadow:0 2px 10px rgba(0,0,0,.15);font-size:1.3rem;cursor:pointer;z-index:2}#ss-root .scene{width:100%;display:block;border-radius:20px}#ss-root .kick{font-size:.7rem;letter-spacing:.14em;font-weight:800;text-transform:uppercase;color:#5d6e75;margin-top:16px}#ss-root .sheet h2{font-size:clamp(1.6rem,6vw,2.2rem);line-height:1.1;letter-spacing:-.05em;margin:6px 0 10px}#ss-root .hook{font-size:1.05rem;font-weight:600;border-left:5px solid var(--c);padding:4px 0 4px 14px;margin:0 0 6px;color:#2c3d43}#ss-root .body{padding:0 20px 22px}#ss-root .body h3{font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;margin:24px 0 10px;color:#4d6167}#ss-root .pts{list-style:none;margin:0;padding:0;counter-reset:n}#ss-root .pts li{counter-increment:n;position:relative;padding:12px 14px 12px 52px;margin-bottom:9px;border-radius:14px;background:var(--bg2)}#ss-root .pts li::before{content:counter(n);position:absolute;left:12px;top:11px;width:28px;height:28px;border-radius:50%;background:var(--c);display:grid;place-items:center;font-weight:800;font-size:.85rem}#ss-root .pp{margin:0 0 12px}#ss-root .story{padding:16px 18px;border-radius:16px;background:linear-gradient(130deg,#dcece6,#e9f2ee)}#ss-root .story p{margin:0}#ss-root .tip{padding:15px 18px;border-radius:14px;background:#20272a;color:#eef5f3;margin-top:14px}#ss-root .tip b{display:block;font-size:.72rem;letter-spacing:.1em;color:#a6e9d5;margin-bottom:4px}#ss-root .fs{font-size:.76rem;color:var(--mut);margin-top:14px}#ss-root .nav{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:22px;padding-top:14px;border-top:1px solid #e3ebe8}#ss-root .nav button{flex:none;padding:9px 16px;border-radius:99px;border:1px solid transparent;background:transparent!important;color:#5d6e75!important;font:inherit;font-weight:600;font-size:.86rem;cursor:pointer;transition:background .15s,color .15s}#ss-root .nav button:hover{background:#eef4f2;color:#2f5a52}#ss-root .nav .go{background:#4a7a70!important;color:#fff!important}#ss-root .nav .go:hover{background:#3d6a61!important}#ss-root .card .ic{width:58px;height:58px;filter:drop-shadow(0 8px 8px rgba(20,40,60,.28))}#ss-root .ban{display:flex;align-items:center;gap:16px;padding:18px;border-radius:20px;background:linear-gradient(135deg,#2c4a45,#4a7a70);color:#fff}#ss-root .ban .ic{width:84px;height:84px;flex:none;filter:drop-shadow(0 10px 10px rgba(0,0,0,.4))}#ss-root .ban small{letter-spacing:.14em;font-weight:800;opacity:.75;font-size:.7rem}#ss-root .ban b{display:block;font-size:1.05rem;line-height:1.25}#ss-root i.q{font-style:italic;color:#2f5a52}#ss-root mark{border-radius:5px;padding:0 3px;color:inherit}#ss-root .m0{background:#fff0a3}#ss-root .m1{background:#c9f5df}#ss-root .m2{background:#ffd6e3}#ss-root .m3{background:#d6e6ff}#ss-root .pts b,#ss-root .pp b{border-bottom:3px solid var(--u);padding-bottom:1px}#ss-root mark.k{background:linear-gradient(transparent 55%,var(--hl) 55%);font-weight:600}#ss-root .chart{margin:12px 0;padding:14px 16px;border-radius:16px;background:#f6f9fb;border:1px solid #e3ebef}#ss-root .chart h4{margin:0 0 10px;font-size:.85rem}#ss-root .cr{display:grid;grid-template-columns:minmax(80px,38%) 1fr 44px;gap:8px;align-items:center;font-size:.8rem;margin:7px 0}#ss-root .cb{height:16px;border-radius:9px;background:#e5ecef;overflow:hidden}#ss-root .cb i{display:block;height:100%;border-radius:9px;transition:width .8s}#ss-root .cm{display:flex;flex-direction:column;gap:12px}#ss-root .cl{display:flex;gap:8px;align-items:flex-end}#ss-root .cl.r{flex-direction:row-reverse}#ss-root .av{flex:none;width:64px;text-align:center;font-size:.68rem;font-weight:800}#ss-root .av svg{width:64px;height:84px;display:block}#ss-root .bu{position:relative;background:#fff;border:2.5px solid #111;border-radius:16px;padding:10px 13px;font-size:.92rem;max-width:calc(100% - 78px);box-shadow:3px 3px 0 #111}#ss-root .cl .bu::before{content:"";position:absolute;left:-10px;bottom:16px;border:7px solid transparent;border-right-color:#111;border-left:0}#ss-root .cl.r .bu::before{left:auto;right:-10px;border-right:0;border-left:10px solid #111;border-left-color:#111}@media(max-width:520px){#ss-root .grid{grid-template-columns:repeat(2,1fr)}#ss-root .card{min-height:150px}#ss-root .cr{grid-template-columns:90px 1fr 40px}}#ss-root .acts{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px;align-items:center}#ss-root .btn{border:0;border-radius:99px;padding:11px 20px;font:inherit;font-weight:800;font-size:.9rem;cursor:pointer}#ss-root .b1{background:#2f5a52!important;color:#fff!important;border:1.5px solid #2f5a52!important}#ss-root .b1:hover{background:#244840!important}#ss-root .b2{background:transparent!important;color:#2f5a52!important;border:1.5px solid #2f5a52!important;box-shadow:none}#ss-root .b2:hover{background:rgba(47,90,82,.1)!important}#ss-root .hi{font-size:.85rem;font-weight:700;color:#294a50}#ss-root .card.lk{position:relative}#ss-root .card.lk>*{opacity:.72}#ss-root .card.lk::before{content:"🔒 Premium";position:absolute;top:10px;right:10px;font-size:.62rem;font-weight:800;background:#18252b;color:#fff;border-radius:99px;padding:3px 9px;z-index:2;opacity:1}#ss-root .card.lk .t span:last-child{visibility:hidden}#ss-root #au{position:fixed;inset:0;z-index:30;background:rgba(24,35,43,.55);backdrop-filter:blur(8px);display:none;align-items:flex-end;justify-content:center}#ss-root #au.on{display:flex}#ss-root #au .sheet{padding:22px 20px 26px;max-height:92vh}@media(min-width:760px){#ss-root #au.on{align-items:center}#ss-root #au .sheet{border-radius:26px}}#ss-root .tg{display:flex;background:#eef3f4;border-radius:99px;padding:4px;margin:6px 0 16px}#ss-root .tg button{flex:1;border:0;background:transparent!important;color:#42595f!important;padding:10px;border-radius:99px;font:inherit;font-weight:800;cursor:pointer}#ss-root .tg button.on{background:#2f5a52!important;color:#fff!important}#ss-root .fl{display:block;font-size:.78rem;font-weight:800;margin:12px 0 5px;color:#42595f}#ss-root .in{width:100%;padding:13px 14px;border:1.5px solid #d5dfe2;border-radius:13px;font:inherit;font-size:1rem}#ss-root .in:focus{outline:none;border-color:#2e7770}#ss-root .er{color:#c92a2a;font-size:.82rem;margin:8px 0 0;min-height:1em}#ss-root .full{width:100%;margin-top:16px}#ss-root .ok{background:#1f8a63;color:#fff}#ss-root .qr{width:220px;height:220px;max-width:70%;margin:10px auto;display:grid;place-items:center;border:2px dashed #aab9be;border-radius:16px;text-align:center;font-size:.8rem;color:#5d6e75;padding:10px;background:#fafcfc}#ss-root .qr img{width:100%;height:100%;object-fit:contain}#ss-root .perk{margin:0 0 6px;padding-left:18px;font-size:.9rem}#ss-root .st{display:flex;gap:10px;align-items:flex-start;margin:10px 0;font-size:.9rem}#ss-root .st b{flex:none;width:26px;height:26px;border-radius:50%;background:#8ee9c7;display:grid;place-items:center;font-size:.8rem} /* ===== AUDIT KONTRAS: setiap tombol punya warna latar + teks eksplisit (rasio >= 6:1), tahan terhadap tema WordPress ===== */ #ss-root button,#ss-root .btn,#ss-root a.btn{-webkit-appearance:none;appearance:none;text-shadow:none;text-transform:none;letter-spacing:normal;line-height:1.3;font-family:inherit} /* Tab filter */ #ss-root .tab,#ss-root .tab:hover,#ss-root .tab:focus,#ss-root .tab:active{background:#dbe8e3!important;color:#1f3a35!important;border:1.5px solid #9fbdb3!important;box-shadow:none!important} #ss-root .tab.on,#ss-root .tab.on:hover,#ss-root .tab.on:focus,#ss-root .tab.on:active{background:#2f5a52!important;color:#ffffff!important;border-color:#2f5a52!important} /* Tombol tutup (x) */ #ss-root .x,#ss-root .x:hover,#ss-root .x:focus,#ss-root .x:active{background:#2f5a52!important;color:#ffffff!important;border:2px solid #ffffff!important;box-shadow:0 2px 10px rgba(0,0,0,.3)!important;line-height:1!important;padding:0!important;display:flex!important;align-items:center;justify-content:center;font-size:1.4rem} /* Daftar & Masuk (atas) + tombol form */ #ss-root .b1,#ss-root .b1:hover,#ss-root .b1:focus,#ss-root .b1:active{background:#2f5a52!important;color:#ffffff!important;border:1.5px solid #2f5a52!important;box-shadow:none!important} #ss-root .b2,#ss-root .b2:hover,#ss-root .b2:focus,#ss-root .b2:active{background:#e3eeea!important;color:#1f3a35!important;border:1.5px solid #2f5a52!important;box-shadow:none!important} #ss-root .ok,#ss-root .ok:hover,#ss-root .ok:focus,#ss-root .ok:active,#ss-root a.ok:visited{background:#17714f!important;color:#ffffff!important;border:1.5px solid #17714f!important} /* Toggle Daftar | Masuk */ #ss-root .tg{background:#dbe8e3!important} #ss-root .tg button,#ss-root .tg button:hover,#ss-root .tg button:focus,#ss-root .tg button:active{background:transparent!important;color:#1f3a35!important;border:0!important;box-shadow:none!important} #ss-root .tg button.on,#ss-root .tg button.on:hover,#ss-root .tg button.on:focus{background:#2f5a52!important;color:#ffffff!important} /* Sebelumnya & Selesai */ #ss-root .nav button,#ss-root .nav button:hover,#ss-root .nav button:focus,#ss-root .nav button:active{background:#e3eeea!important;color:#1f3a35!important;border:1.5px solid #b7cfc7!important;box-shadow:none!important} #ss-root .nav button.go,#ss-root .nav button.go:hover,#ss-root .nav button.go:focus,#ss-root .nav button.go:active{background:#2f5a52!important;color:#ffffff!important;border-color:#2f5a52!important} /* Kartu bab (juga