.joki-page{background:#f4f7fb}.joki-page .page-shell{padding-top:24px}.joki-hero{position:relative;display:flex;align-items:center;gap:18px;overflow:hidden;margin-bottom:24px;padding:24px 28px;border-radius:22px;color:#fff;background:radial-gradient(circle at 85% 20%,rgba(59,130,246,.55),transparent 28%),linear-gradient(135deg,#101a33,#172c5c 58%,#1948a3);box-shadow:0 18px 45px rgba(15,35,80,.18)}.joki-hero:after{content:"";position:absolute;right:-55px;bottom:-90px;width:230px;height:230px;border:1px solid rgba(255,255,255,.12);border-radius:50%}.joki-hero img{width:84px;height:84px;border-radius:20px;object-fit:cover;border:3px solid rgba(255,255,255,.2);box-shadow:0 10px 30px rgba(0,0,0,.22)}.joki-hero h1{margin:4px 0;font-size:28px;letter-spacing:-.5px}.joki-hero p{margin:0;color:#cbdcfb;font-size:14px}.joki-eyebrow{color:#8fc0ff;font-size:10px;font-weight:850;letter-spacing:.13em}.joki-hero-status{position:relative;z-index:1;margin-left:auto;white-space:nowrap;padding:8px 12px;border:1px solid rgba(255,255,255,.16);border-radius:999px;background:rgba(255,255,255,.08);font-size:12px;font-weight:700}.joki-hero-status span{display:inline-block;width:8px;height:8px;margin-right:6px;border-radius:50%;background:#4ade80;box-shadow:0 0 0 4px rgba(74,222,128,.14)}
.joki-section{margin-top:0;margin-bottom:16px;border-color:#e5eaf2;box-shadow:0 8px 30px rgba(23,43,77,.045)}.joki-section .card-body{padding:26px}.joki-section-head{display:flex;align-items:flex-start;gap:12px;margin-bottom:22px}.joki-section-head .number{flex:0 0 auto;width:32px;height:32px;border-radius:10px;background:linear-gradient(135deg,#2563eb,#4f7cf7);color:#fff;box-shadow:0 6px 14px rgba(37,99,235,.2)}.joki-section-head h2{margin:0;font-size:17px;letter-spacing:-.2px}.joki-section-head p{margin:3px 0 0;color:#7b8a9f;font-size:12px}.joki-page .form-control{padding:13px 14px;border-color:#dbe2ec;background:#fbfcfe;transition:.18s}.joki-page .form-control:hover{border-color:#b9c7da}.joki-page .form-control:focus{background:#fff;border-color:#4f7cf7;box-shadow:0 0 0 4px rgba(79,124,247,.1)}.optional{color:#94a3b8;font-weight:500}.password-field{position:relative}.password-field .form-control{padding-right:90px}.password-field button{position:absolute;right:8px;top:50%;transform:translateY(-50%);border:0;border-radius:8px;padding:7px 10px;background:#eaf1ff;color:#245ac8;font-size:11px;font-weight:800;cursor:pointer}.security-note{display:flex;align-items:center;gap:10px;margin-top:14px;padding:12px 14px;border:1px solid #dbeafe;border-radius:12px;background:#f2f7ff;color:#1d4ed8}.security-note>span{display:grid;place-items:center;width:28px;height:28px;border-radius:8px;background:#dbeafe}.security-note strong,.security-note small{display:block}.security-note strong{font-size:12px}.security-note small{margin-top:1px;color:#64748b;font-size:11px}
.joki-page .joki-tabs{display:flex;gap:8px;overflow-x:auto;margin:0 -2px 18px;padding:2px 2px 6px;scrollbar-width:thin}.joki-page .joki-tab{appearance:none;border:1px solid #dce3ee;border-radius:999px;padding:9px 15px;background:#fff;color:#526176;font-family:inherit;font-size:11px;font-weight:800;letter-spacing:.02em;cursor:pointer;transition:.18s}.joki-page .joki-tab:hover{border-color:#8eb1ff;color:#245ac8}.joki-page .joki-tab.active{border-color:#2563eb;background:#2563eb;color:#fff;box-shadow:0 6px 16px rgba(37,99,235,.22)}.joki-page .joki-service-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.joki-page .joki-service{position:relative;display:flex;min-width:0;flex-direction:column;overflow:hidden;border:1px solid #e0e6ef;border-radius:16px;background:#fff;transition:transform .18s,box-shadow .18s,border-color .18s}.joki-page .joki-service:hover{transform:translateY(-2px);border-color:#b9ccf9;box-shadow:0 12px 25px rgba(31,66,125,.09)}.joki-service>input{position:absolute;opacity:0;pointer-events:none}.joki-service-main{display:flex;min-height:162px;flex:1;flex-direction:column;padding:17px 17px 13px;cursor:pointer}.joki-service-top{display:flex;align-items:center;justify-content:space-between}.joki-category{display:inline-flex;padding:5px 8px;border-radius:7px;background:#eef4ff;color:#315fbd;font-size:9px;font-weight:850;letter-spacing:.07em}.joki-check{display:grid;width:22px;height:22px;place-items:center;border:1px solid #d5deeb;border-radius:50%;color:transparent;font-size:12px;transition:.18s}.joki-service h3{margin:13px 0 7px;color:#172033;font-size:14px;line-height:1.38}.joki-time{color:#7b8a9f;font-size:11px}.joki-time span{color:#3b6ed4}.joki-price{margin-top:auto;padding-top:13px;color:#1f5fe0;font-size:17px;letter-spacing:-.25px}.joki-service>input:checked+.joki-service-main{background:linear-gradient(145deg,#f7faff,#edf4ff)}.joki-service:has(>input:checked){border-color:#3474f3;box-shadow:0 0 0 2px rgba(52,116,243,.09),0 12px 28px rgba(37,99,235,.1)}.joki-service>input:checked+.joki-service-main .joki-check{border-color:#2563eb;background:#2563eb;color:#fff}.joki-page .service-info{appearance:none;display:flex;align-items:center;justify-content:space-between;margin:0;padding:11px 17px;border:0;border-top:1px solid #edf0f5;background:#fbfcfe;color:#58708f;font-family:inherit;font-size:11px;font-weight:750;text-align:left;cursor:pointer}.joki-page .service-info:hover{background:#f2f6fd;color:#245ac8}.service-info span{font-size:15px}
.joki-dialog{width:min(520px,calc(100% - 28px));max-height:calc(100vh - 36px);overflow:auto;padding:0;border:0;border-radius:22px;background:#fff;box-shadow:0 30px 90px rgba(5,18,43,.35)}.joki-dialog[open]{animation:joki-pop .18s ease-out}.joki-dialog::backdrop{background:rgba(8,17,35,.68);backdrop-filter:blur(4px)}@keyframes joki-pop{from{opacity:0;transform:translateY(10px) scale(.98)}to{opacity:1;transform:none}}.joki-dialog-hero{position:relative;padding:25px 26px;color:#fff;background:radial-gradient(circle at 90% 10%,rgba(96,165,250,.65),transparent 30%),linear-gradient(135deg,#102044,#2259c1)}.joki-dialog-hero>span{display:inline-flex;padding:5px 8px;border-radius:7px;background:rgba(255,255,255,.13);font-size:9px;font-weight:850;letter-spacing:.08em}.joki-dialog-hero h2{max-width:410px;margin:13px 40px 7px 0;font-size:21px;line-height:1.3}.joki-dialog-hero strong{color:#cfe2ff;font-size:18px}.joki-dialog .dialog-close{position:absolute;right:18px;top:18px;border:1px solid rgba(255,255,255,.15);background:rgba(255,255,255,.1);color:#fff}.joki-dialog-body{padding:24px 26px}.dialog-description{color:#526176;font-size:13px;line-height:1.65}.joki-dialog-body h3{margin:21px 0 9px;font-size:13px}.joki-dialog .terms-box{margin:0 0 20px;padding:15px 16px;border:1px solid #e0e7f1;border-radius:13px;background:#f7f9fc;color:#526176;font-size:12px;line-height:1.7}.joki-dialog .terms-box:before{content:"✓";display:inline-grid;width:20px;height:20px;margin-right:8px;place-items:center;border-radius:50%;background:#dcfce7;color:#15803d;font-weight:900}.joki-dialog .btn{min-height:46px}
.joki-payment-ready{display:flex;align-items:center;gap:13px;padding:15px 16px;border:1px solid #dce6f5;border-radius:14px;background:#f8fbff}.joki-payment-ready img{width:48px;height:auto}.joki-payment-ready div{flex:1}.joki-payment-ready strong,.joki-payment-ready small{display:block}.joki-payment-ready small{margin-top:2px;color:#7b8a9f}.joki-payment-ready>span{display:grid;width:25px;height:25px;place-items:center;border-radius:50%;background:#dcfce7;color:#15803d;font-weight:900}.joki-summary{overflow:hidden;border-color:#dfe6f0;box-shadow:0 16px 40px rgba(20,43,80,.1)}.joki-summary:before{content:"";display:block;height:4px;background:linear-gradient(90deg,#2563eb,#60a5fa)}.joki-summary-title{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px;font-size:17px;font-weight:850}.joki-summary-title small{padding:5px 8px;border-radius:7px;background:#eef4ff;color:#2563eb;font-size:9px;letter-spacing:.08em}.joki-summary .summary-row{padding:7px 0;margin:0}.joki-summary .summary-row>span{font-size:12px;color:#7b8a9f}.joki-summary .summary-row>strong{max-width:190px;font-size:12px;text-align:right}.joki-summary .qris-badge{margin:18px 0;background:#f8faff}.joki-summary .qris-badge div div{color:#8492a6;font-size:10px}.joki-summary .summary-total{margin-top:6px;padding-top:17px}.joki-summary .summary-total strong{font-size:24px}.joki-summary .terms-check{padding:12px;border-radius:11px;background:#f7f9fc;line-height:1.5}.joki-summary .terms-check input{accent-color:#2563eb}.joki-pay{min-height:48px;border-radius:12px;box-shadow:0 9px 20px rgba(37,99,235,.22)}.joki-pay span{margin-left:auto;font-size:17px}.joki-safe{text-align:center;margin-top:12px;color:#8a98aa;font-size:10px}.joki-safe span{color:#3b82f6}
@media(max-width:900px){.joki-hero-status{display:none}.joki-page .joki-service-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:640px){.joki-hero{padding:20px}.joki-hero img{width:68px;height:68px}.joki-hero h1{font-size:21px}.joki-hero p{font-size:12px}.joki-page .joki-service-grid{grid-template-columns:1fr}.joki-section .card-body{padding:20px}.joki-service-main{min-height:150px}.joki-dialog-body,.joki-dialog-hero{padding-left:20px;padding-right:20px}}
.joki-page .joki-service[hidden],.joki-page .joki-service.is-hidden{display:none!important}