@font-face{font-family:Quicksand;src:url('/koleksi-assets/quicksand-400.ttf')}@font-face{font-family:Quicksand;src:url('/koleksi-assets/quicksand-700.ttf');font-weight:700}*{box-sizing:border-box}body{margin:0;background:#fbf8f1;color:#253b48;font-family:Quicksand,system-ui,sans-serif;line-height:1.65}button,input{font:inherit}button,a,input{touch-action:manipulation}a{color:#564899}button,a{transition:background .15s,transform .15s}button{cursor:pointer}button:disabled{cursor:wait;opacity:.65}[hidden]{display:none!important}.top{max-width:1180px;margin:auto;padding:24px;display:flex;align-items:center;justify-content:space-between;gap:16px}.brand{font-size:25px;font-weight:700;text-decoration:none;color:#38415e}.brand b{color:#7358ad}nav{display:flex;align-items:center;gap:22px}nav a{font-weight:700;text-decoration:none}main{max-width:1180px;padding:25px 24px 60px;margin:auto;min-height:70vh}h1,h2,h3,p{margin-top:0}h1{font-size:clamp(36px,4.8vw,58px);line-height:1.15;letter-spacing:-1.8px;margin-bottom:22px}h1 em{font-style:normal;color:#7358ad}h2{font-size:28px;line-height:1.3}h3{font-size:23px;line-height:1.35}.eyebrow{display:block;font-size:13px;font-weight:700;letter-spacing:2px;margin-bottom:16px;color:#317576}.login-layout{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:65px;padding:40px 0}.welcome p{font-size:21px;max-width:480px}.welcome img{display:block;object-fit:contain;filter:drop-shadow(0 10px 0 #eadfc655);margin:18px auto 0}.login-card{background:#fff;border:2px solid #e5def0;border-radius:30px;padding:38px;box-shadow:0 10px 0 #eae5f1}.login-card p{font-size:18px}.round-icon{display:grid;place-items:center;width:65px;height:65px;border-radius:20px;background:#f0eafb;font-size:35px;margin-bottom:20px}.login-card label{display:block;font-weight:700;margin-bottom:8px}input{width:100%;border:2px solid #d6dce4;border-radius:12px;padding:14px;background:white;color:#253b48;font-size:17px}.primary{display:inline-flex;justify-content:center;align-items:center;text-decoration:none;border:0;border-radius:14px;background:#66509b;box-shadow:0 4px 0 #473470;color:white;padding:14px 23px;font-weight:700;font-size:18px}.primary:hover{background:#513f82}.login-card .primary{width:100%;margin:20px 0 8px}.small-button{padding:10px 16px;border:1px solid #c9c4d4;border-radius:12px;background:white;color:#514575;font-weight:700}.small-button:hover{background:#eee8f8}.muted,.login-card .muted{color:#62727d;font-size:14px}.status{font-weight:700;color:#405d66;margin-top:18px}.notice{background:#fff0c5;border:1px solid #e7cc7d;border-radius:16px;padding:18px 22px;margin-bottom:22px}.library-heading{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:20px 0}.library-heading img{object-fit:contain}.library-heading p{overflow-wrap:anywhere}.spark{color:#efba45}.library-summary{display:flex;gap:22px;align-items:center;background:#ece6f7;border-radius:18px;padding:18px 24px;margin-bottom:30px}.library-summary b{font-size:22px}.game-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}.game-card{display:flex;flex-direction:column;background:#fff;border:2px solid #e6e2d6;border-radius:24px;padding:22px;position:relative}.game-card.bonus{border-color:#cbbce4}.game-card img{display:block;width:100%;height:155px;object-fit:contain;background:#f6f2e8;border-radius:18px;margin-bottom:20px}.game-card p{font-size:17px;flex:1}.game-card .primary{font-size:17px}.game-tag{position:absolute;top:12px;right:12px;background:#ffe3a2;color:#695021;padding:3px 12px;border-radius:20px;font-weight:700;font-size:12px}.empty{padding:45px;background:white;border:2px dashed #d9cfe6;border-radius:24px;text-align:center}.empty>span{font-size:60px;color:#987dbb}.progress-note{margin:28px 0;font-size:15px;color:#5b6e79}.purchases,details{border-top:1px solid #d9d8d2;padding:20px 0}summary{cursor:pointer;font-weight:700;font-size:18px}.order{padding:18px;border:1px solid #dddce2;background:#fff;border-radius:14px;margin:14px 0}.order small{display:block;color:#586873;overflow-wrap:anywhere}.order .actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px}.pill{display:inline-block;border-radius:16px;padding:3px 12px;background:#e4f3e8;font-size:14px;font-weight:700}.pill.inactive{background:#f8e6e1;color:#814d41}#admin{margin-top:45px;padding:28px;border-radius:24px;background:#efedf3}.danger{background:#fff0ed;color:#8e4139;border:1px solid #e6b0a6}.danger:hover{background:#f5d9d2}footer{text-align:center;padding:28px 20px;color:#65747c;font-size:14px;border-top:1px solid #e4e1d8}footer a{margin-left:18px}:focus-visible{outline:3px solid #d4a31f;outline-offset:4px}@media(max-width:800px){.login-layout{grid-template-columns:1fr;gap:22px;padding-top:20px}.welcome img{width:150px;height:150px}.welcome h1{font-size:40px}.welcome p{font-size:18px}.login-card{padding:25px}.game-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:520px){.top{padding:18px}.top .brand{font-size:21px}nav{gap:10px}nav a{font-size:14px}main{padding:15px 18px 40px}.game-grid{grid-template-columns:1fr}.library-heading img{width:85px;height:85px}.library-heading h1{font-size:36px}.library-summary{align-items:flex-start;flex-direction:column;gap:3px}.game-card img{height:175px}.login-layout{padding-top:8px}.welcome img{display:none}.login-card h2{font-size:26px}footer a{display:inline-block;margin-top:6px}#admin{padding:18px}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}
.upgrade{margin:34px 0;padding:28px;background:#fff9e7;border:2px solid #eadca7;border-radius:24px}.upgrade h2{margin-bottom:8px}.upgrade-option{display:block;width:100%;margin:12px 0;padding:17px 20px;text-align:left;background:#fff;border:2px solid #dbd4e7;border-radius:16px;color:#253b48}.upgrade-option b,.upgrade-option span{display:block}.upgrade-option b{font-size:20px}.upgrade-option:hover{border-color:#7358ad}.upgrade label{display:block;font-weight:700;margin:12px 0 6px}.upgrade #upgrade-form{padding-top:18px}.upgrade-choice{display:flex!important;align-items:center;gap:10px;padding:8px}.upgrade-choice input{width:auto}.upgrade #upgrade-pay,.upgrade #upgrade-cancel{margin:16px 12px 0 0}#upgrade-message{margin-top:14px;color:#8b5c32;font-weight:700}
.support-card{margin:38px 0;padding:28px;background:#fff;border:2px solid #dce6e5;border-radius:24px}.support-card p{max-width:760px}.support-card label{display:block;font-weight:700;margin:16px 0 6px}.support-card select,.support-card textarea{display:block;width:100%;max-width:720px;padding:13px;border:2px solid #d6dce4;border-radius:12px;background:#fff;color:#253b48;font:inherit}.support-card textarea{resize:vertical}.support-card .primary{margin:12px 0}.support-card details{margin-top:24px}#support-message-status{font-weight:700;color:#317576;overflow-wrap:anywhere}@media(max-width:520px){.support-card{padding:18px}}
.feedback-card{margin:38px 0;padding:28px;background:#f2edf9;border:2px solid #d9c9ea;border-radius:24px}.feedback-card p{max-width:760px}.feedback-card label{display:block;font-weight:700;margin:16px 0 6px}.feedback-card fieldset{border:0;padding:0;margin:18px 0}.feedback-card legend{font-weight:700}.feedback-games{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.feedback-games label,.feedback-confirm{display:flex!important;align-items:center;gap:9px;background:#fff;border-radius:12px;padding:10px;margin:5px 0!important}.feedback-games input,.feedback-confirm input{width:auto;flex:none}.feedback-card select,.feedback-card textarea{display:block;width:100%;max-width:720px;padding:13px;border:2px solid #d6dce4;border-radius:12px;background:#fff;color:#253b48;font:inherit}.feedback-card textarea{resize:vertical}.feedback-card .primary{margin:14px 0}.feedback-card #feedback-message{font-weight:700;color:#874c36}@media(max-width:520px){.feedback-card{padding:18px}.feedback-games{grid-template-columns:1fr}}

/* Admin accounts use this page only for management, never for the buyer area. */
body.admin-mode .library-heading,
body.admin-mode .library-summary,
body.admin-mode #games,
body.admin-mode #upgrade,
body.admin-mode #empty,
body.admin-mode .progress-note,
body.admin-mode .purchases,
body.admin-mode #member-feedback,
body.admin-mode #support,
body.admin-mode nav a[data-sales-path],
body.admin-mode footer{display:none!important}
body.admin-mode #admin{margin-top:0}
.feedback-thanks{padding:18px 22px;background:#e5f3e9;border:1px solid #a7d0b0;border-radius:14px;color:#26553a;font-weight:700}
.upgrade-selected{font-size:15px;line-height:1.5;color:#405466}
.upgrade-actions{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;gap:12px}.upgrade-change{margin:0!important}.upgrade-change-status{flex-basis:100%;color:#895b32}@media(max-width:700px){.upgrade-actions{flex-direction:column;align-items:stretch}.upgrade-actions .primary,.upgrade-actions .small-button{width:100%;text-align:center}}
.upgrade-option{display:grid;grid-template-columns:minmax(0,.8fr) minmax(260px,1.2fr);gap:20px;align-items:start;padding:22px;background:#fff;border:2px solid #ddd5e9;border-radius:20px;box-shadow:0 4px 0 #e9e3f1}.upgrade-option:hover{border-color:#7358ad;background:#fdfbff}.upgrade-option-main{display:flex!important;flex-direction:column;align-items:flex-start;gap:10px}.upgrade-option .upgrade-title{font-size:20px;line-height:1.3;color:#253b48}.upgrade-detail{font-size:15px;color:#536774}.upgrade-cta{margin-top:8px;color:#604a96;font-size:15px;font-weight:700}.upgrade-pending{color:#895b32;font-size:15px;font-weight:700}.upgrade-receipt{display:block!important;padding:14px 17px;background:#f7f4fc;border:1px solid #e2daef;border-radius:14px}.upgrade-option .upgrade-row{display:flex!important;justify-content:space-between;align-items:baseline;gap:16px;font-size:15px;line-height:1.45;padding:4px 0}.upgrade-option .upgrade-row b{font-size:16px;white-space:nowrap}.upgrade-subtotal{border-top:1px solid #ded5eb;margin-top:6px;padding-top:10px!important}.upgrade-option .upgrade-total{border-top:2px solid #d2c2e8;margin-top:7px;padding-top:11px!important;color:#4c397d;font-weight:700}.upgrade-total strong{font-size:21px;white-space:nowrap}.upgrade-resume{grid-column:1/-1;justify-self:start;margin:0!important}.upgrade-option p{margin:12px 0 0}@media(max-width:700px){.upgrade-option{grid-template-columns:1fr;gap:15px}.upgrade-option-main{gap:5px}.upgrade-cta{margin-top:2px}.upgrade-receipt{width:100%}}

/* The whole card stays clickable; this visible action shows where to tap. */
.upgrade-option .upgrade-cta{display:inline-flex!important;align-items:center;justify-content:center;min-height:48px;margin-top:12px;padding:11px 18px;border-radius:12px;background:#66509b;box-shadow:0 4px 0 #473470;color:#fff;font-size:16px;line-height:1.3;text-align:center}
.upgrade-option:hover .upgrade-cta,.upgrade-option:focus-visible .upgrade-cta{background:#513f82}
@media(max-width:700px){.upgrade-option .upgrade-cta{width:100%;margin-top:12px}}

.feedback-dialog{width:min(480px,calc(100vw - 32px));max-height:calc(100dvh - 32px);overflow:auto;margin:auto;padding:28px;border:2px solid #d9c9ea;border-radius:24px;background:#fff;color:#253b48;font:inherit;box-shadow:0 18px 55px #2a224055}
.feedback-dialog::backdrop{background:#1e193a88}
.feedback-dialog form{margin:0}
.feedback-dialog-icon{display:grid;place-items:center;width:48px;height:48px;margin-bottom:18px;border-radius:15px;background:#fff0c5;color:#7358ad;font-size:28px}
.feedback-dialog .eyebrow{margin-bottom:9px}
.feedback-dialog h2{font-size:26px;margin-bottom:12px}
.feedback-dialog p{margin:0;color:#536774;font-size:17px}
.feedback-dialog-actions{display:flex;justify-content:flex-end;gap:12px;margin-top:28px}
.feedback-dialog-actions button{min-height:48px;white-space:normal}
.feedback-dialog-actions .primary{margin:0}
@media(max-width:520px){.feedback-dialog{padding:22px}.feedback-dialog h2{font-size:23px}.feedback-dialog-actions{flex-direction:column}.feedback-dialog-actions button{width:100%}}

#feedback-records{display:grid;gap:18px;margin-top:18px}
.admin-feedback-card{padding:24px;border:1px solid #dfd7eb;border-radius:22px;background:#fff;box-shadow:0 5px 0 #e3ddec}
.admin-feedback-header{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px;margin-bottom:18px}
.admin-feedback-header span{color:#317576;font-size:12px;font-weight:700;letter-spacing:1.6px}
.admin-feedback-header time{color:#65747c;font-size:14px}
.admin-feedback-scores{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.admin-feedback-rating{min-width:0;padding:15px;border:1px solid #e8e1f2;border-radius:14px;background:#f8f5fc}
.admin-feedback-rating>span{display:block;color:#425666;font-size:14px;font-weight:700;line-height:1.35}
.admin-feedback-rating>div{display:flex;align-items:center;flex-wrap:wrap;gap:5px 10px;margin-top:9px}
.admin-feedback-rating strong{color:#4c397d;font-size:21px;line-height:1.2}
.admin-feedback-stars{color:#d19a21;font-size:18px;letter-spacing:1px;white-space:nowrap}
.admin-feedback-games{margin-top:20px}
.admin-feedback-games>strong{display:block;margin-bottom:9px;font-size:15px}
.admin-feedback-games>div{display:flex;flex-wrap:wrap;gap:8px}
.admin-feedback-games>div span{padding:5px 11px;border-radius:999px;background:#e9f4f1;color:#285d5c;font-size:14px;font-weight:700}
.admin-feedback-card blockquote{margin:20px 0 0;padding:14px 18px;border-left:4px solid #b7a2d5;border-radius:0 12px 12px 0;background:#faf8fd;font-size:17px;overflow-wrap:anywhere}
@media(max-width:760px){.admin-feedback-scores{grid-template-columns:1fr}}
@media(max-width:520px){.admin-feedback-card{padding:18px}.admin-feedback-rating{padding:13px}}