:root{--nk-bg:#06101c;--nk-card:#0c1928;--nk-card2:#101f30;--nk-line:rgba(125,211,252,.15);--nk-accent:#22d3ee;--nk-green:#2dd4bf;--nk-text:#eefbff;--nk-muted:#8ca8b8;--nk-danger:#fb7185}.nokos-page{margin:0;background:radial-gradient(circle at 15% 0,rgba(34,211,238,.13),transparent 34%),var(--nk-bg);color:var(--nk-text);min-height:100vh;padding-bottom:28px;font-family:Inter,system-ui,sans-serif}.nokos-header{height:72px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:0 max(18px,calc((100vw - 980px)/2));border-bottom:1px solid var(--nk-line);background:rgba(6,16,28,.86);backdrop-filter:blur(18px);position:sticky;top:0;z-index:30}.nokos-header a{color:#c9f5ff;text-decoration:none;font-weight:800;font-size:13px}.nokos-header>a:last-child{justify-self:end}.nokos-header div{text-align:center}.nokos-header small{display:block;color:var(--nk-accent);font-size:9px;letter-spacing:.24em}.nokos-header strong{font-size:15px}.nokos-shell{width:min(920px,calc(100% - 24px));margin:auto}.nokos-hero{padding:44px 5px 24px}.nokos-hero>span{font-size:10px;letter-spacing:.22em;color:var(--nk-accent);font-weight:900}.nokos-hero h1{font-size:clamp(31px,7vw,52px);line-height:1.05;margin:10px 0 12px}.nokos-hero p{color:var(--nk-muted);max-width:650px;line-height:1.65;margin:0}.nokos-sheet{background:linear-gradient(145deg,rgba(14,29,45,.98),rgba(8,20,33,.98));border:1px solid var(--nk-line);border-radius:28px;padding:22px;margin:14px 0 28px;box-shadow:0 28px 80px rgba(0,0,0,.26)}.sheet-handle{width:48px;height:5px;border-radius:99px;background:rgba(180,220,235,.18);margin:-8px auto 24px}.sheet-title{display:flex;justify-content:space-between;gap:16px;align-items:flex-start;margin-bottom:19px}.sheet-title h2{font-size:23px;margin:0 0 4px}.sheet-title p{color:var(--nk-muted);font-size:13px;margin:0}.text-button{border:0;background:rgba(34,211,238,.1);color:#8ff3ff;border-radius:12px;padding:10px 12px;font-weight:800;white-space:nowrap}.search-box{height:56px;border:1px solid var(--nk-line);background:#071521;border-radius:15px;display:flex;align-items:center;gap:10px;padding:0 16px;margin:0 0 22px}.search-box span{font-size:25px;color:var(--nk-muted);transform:rotate(-20deg)}.search-box input{flex:1;background:none;border:0;outline:0;color:var(--nk-text);font-size:16px;min-width:0}.search-box input::placeholder{color:#718c9b}.nokos-sheet h3{font-size:16px;margin:20px 0 13px}.popular-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.service-card{border:1px solid var(--nk-line);background:rgba(255,255,255,.025);color:var(--nk-text);border-radius:17px;cursor:pointer;transition:.2s}.service-card:hover,.service-card:active{border-color:rgba(34,211,238,.75);background:rgba(34,211,238,.08);transform:translateY(-2px)}.popular-grid .service-card{min-height:125px;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:12px;padding:14px}.service-icon{width:58px;height:58px;border-radius:15px;display:grid;place-items:center;background:rgba(255,255,255,.06);overflow:hidden}.service-icon img{width:100%;height:100%;object-fit:cover}.service-icon img.image-fallback{display:none}.service-card strong{font-size:13px}.service-list{display:grid;gap:10px}.service-list .service-card.compact,.selected-service .service-card.compact{width:100%;min-height:76px;display:grid;grid-template-columns:54px 1fr auto;align-items:center;text-align:left;gap:13px;padding:10px 15px}.service-list .service-icon,.selected-service .service-icon{width:50px;height:50px;border-radius:13px}.service-list .service-card strong,.selected-service .service-card strong{font-size:16px}.chevron{font-size:28px;color:var(--nk-muted);font-weight:400}.selected-service{margin-bottom:18px}.selected-service .service-card{background:rgba(34,211,238,.07);border-color:rgba(34,211,238,.22)}.sort-tabs{display:grid;grid-template-columns:1fr 1fr;background:#071521;border-radius:14px;padding:5px;margin-bottom:16px}.sort-tabs button{border:0;border-radius:10px;padding:12px;background:transparent;color:#657f8e;font-weight:900}.sort-tabs button.active{background:rgba(34,211,238,.12);color:#78eafa;border:1px solid rgba(34,211,238,.3)}.country-list{display:grid;gap:10px}.country-item{border:1px solid var(--nk-line);border-radius:16px;background:rgba(255,255,255,.025);overflow:hidden}.country-summary{width:100%;border:0;background:transparent;color:var(--nk-text);display:grid;grid-template-columns:42px minmax(120px,1fr) auto 22px;align-items:center;gap:10px;padding:13px;text-align:left}.flag-wrap{width:36px;height:28px;border-radius:7px;overflow:hidden;background:rgba(255,255,255,.06);display:grid;place-items:center}.flag-wrap img{width:100%;height:100%;object-fit:cover}.country-summary>strong{font-size:15px}.country-tags{display:flex;gap:5px;justify-content:flex-end;flex-wrap:wrap}.country-tags b{font-size:10px;background:rgba(255,255,255,.06);padding:6px 8px;border-radius:999px;color:#c7dce6}.country-summary .chevron{font-size:18px;transition:.2s}.country-summary.open .chevron{transform:rotate(180deg)}.provider-list{border-top:1px solid var(--nk-line);background:rgba(0,0,0,.1)}.provider-row{display:grid;grid-template-columns:minmax(105px,1fr) auto auto auto;align-items:center;gap:10px;padding:12px;border-bottom:1px solid rgba(125,211,252,.09)}.provider-row>div strong,.provider-row>div small{display:block}.provider-row>div strong{font-size:12px}.provider-row>div small{font-size:9px;color:var(--nk-muted);margin-top:3px}.provider-row>b{font-size:13px}.rate-badge{font-size:9px;padding:5px 7px;border-radius:999px;background:rgba(251,113,133,.11);color:#fda4af}.provider-order{border:1px solid rgba(34,211,238,.5);background:transparent;color:#84edfa;padding:8px 11px;border-radius:9px;font-weight:800}.provider-order.active{background:var(--nk-accent);color:#06202a}.operator-slot{padding:0 12px}.operator-title{font-size:11px;color:var(--nk-muted);font-weight:800;padding:13px 0 8px}.operator-grid{display:flex;gap:9px;flex-wrap:wrap;padding-bottom:14px}.operator-card{display:flex;align-items:center;gap:8px;border:1px solid var(--nk-line);background:rgba(255,255,255,.035);color:var(--nk-text);padding:9px 11px;border-radius:11px;font-weight:800}.operator-card img{width:26px;height:26px;border-radius:7px;object-fit:cover}.operator-card img.image-fallback{display:none}.operator-card.active{border-color:var(--nk-green);background:rgba(45,212,191,.12);color:#9ff8e9}.nokos-checkout{position:relative;display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:22px;background:rgba(8,23,37,.95);backdrop-filter:blur(22px);border:1px solid rgba(34,211,238,.3);border-radius:22px;padding:17px 19px;margin:28px 0 42px;box-shadow:0 18px 50px rgba(0,0,0,.32);animation:nokosCheckoutIn .28s ease-out}.nokos-checkout small{color:var(--nk-muted);font-size:9px;letter-spacing:.14em}.nokos-checkout h2{margin:4px 0;font-size:17px}.nokos-checkout p{margin:0;color:var(--nk-muted);font-size:11px}.checkout-price{text-align:right}.checkout-price strong{display:block;font-size:21px;color:#8fffe9}.nokos-checkout button{border:0;border-radius:13px;padding:13px 18px;font-weight:900;cursor:pointer;background:linear-gradient(135deg,var(--nk-accent),var(--nk-green));color:#03212a}.nokos-checkout button:disabled{opacity:.55}.nokos-checkout #checkoutMessage{grid-column:1/-1}.nokos-checkout #checkoutMessage.error{color:var(--nk-danger)}.nokos-checkout #checkoutMessage.success{color:#5eead4}.nokos-loading,.nokos-error,.nokos-empty{text-align:center;padding:28px;color:var(--nk-muted)}.nokos-loading.small,.nokos-error.small{padding:16px}.nokos-error{color:var(--nk-danger)}.spinner{display:inline-block;width:15px;height:15px;border:2px solid rgba(34,211,238,.2);border-top-color:var(--nk-accent);border-radius:50%;animation:spin .8s linear infinite;margin-right:9px;vertical-align:-3px}@keyframes spin{to{transform:rotate(360deg)}}@keyframes nokosCheckoutIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:650px){.nokos-header{padding:0 14px}.nokos-shell{width:min(100% - 18px,920px)}.nokos-hero{padding-top:34px}.nokos-sheet{padding:17px 13px;border-radius:23px}.sheet-title h2{font-size:19px}.sheet-title p{font-size:11px}.popular-grid{grid-template-columns:repeat(2,1fr)}.popular-grid .service-card{min-height:116px}.country-summary{grid-template-columns:36px 1fr 22px}.country-tags{grid-column:2/4;justify-content:flex-start}.country-summary>.chevron{grid-column:4;grid-row:1}.provider-row{grid-template-columns:1fr auto auto}.provider-row .rate-badge{display:none}.provider-order{padding:7px 9px}.nokos-checkout{grid-template-columns:1fr auto;gap:10px;padding:16px;margin:24px 0 34px}.nokos-checkout>button{grid-column:1/-1}.checkout-price strong{font-size:17px}}

/* Riwayat Nokos */
.nokos-history-page{padding-bottom:118px}.history-refresh{justify-self:end;border:1px solid rgba(34,211,238,.28);background:rgba(34,211,238,.08);color:#bff8ff;border-radius:11px;padding:9px 13px;font-weight:800;cursor:pointer}.history-refresh:active{transform:scale(.97)}.nokos-hero.compact{padding:34px 5px 22px}.nokos-hero.compact h1{font-size:clamp(30px,7vw,46px)}.nokos-history{display:grid;gap:16px;padding-bottom:20px}.nokos-order{border:1px solid var(--nk-line);border-radius:24px;background:linear-gradient(145deg,rgba(14,29,45,.98),rgba(7,20,32,.98));padding:18px;box-shadow:0 20px 58px rgba(0,0,0,.25);overflow:hidden}.order-top{display:flex;justify-content:space-between;gap:14px;align-items:flex-start}.order-app{display:flex;gap:13px;min-width:0;align-items:center}.order-app-icon{width:62px;height:62px;border-radius:18px;background:rgba(255,255,255,.06);border:1px solid var(--nk-line);display:grid;place-items:center;overflow:hidden;flex:0 0 auto}.order-app-icon img{width:100%;height:100%;object-fit:cover}.order-app-copy{min-width:0}.order-invoice{display:block;color:#6f8d9d;font-size:9px;letter-spacing:.08em;overflow-wrap:anywhere}.order-app h2{font-size:21px;margin:5px 0 4px}.order-app p{margin:0;color:var(--nk-muted);font-size:12px}.order-status{flex:0 0 auto;border-radius:999px;padding:7px 10px;background:rgba(250,204,21,.11);color:#fde68a;border:1px solid rgba(250,204,21,.18);font-size:10px;font-weight:900}.nokos-order.completed .order-status{background:rgba(45,212,191,.11);color:#99f6e4;border-color:rgba(45,212,191,.2)}.nokos-order.canceled .order-status,.nokos-order.failed .order-status{background:rgba(251,113,133,.11);color:#fda4af;border-color:rgba(251,113,133,.2)}.order-main-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:17px}.number-box,.otp-box{min-width:0;border:1px solid rgba(125,211,252,.13);background:rgba(3,13,23,.55);border-radius:17px;padding:15px}.number-box small,.otp-box small{display:block;color:#7895a5;font-size:9px;letter-spacing:.16em;margin-bottom:8px}.number-box strong,.otp-box strong{display:block;color:#f3fbff;font-size:18px;line-height:1.35;overflow-wrap:anywhere}.otp-box.ready{border-color:rgba(45,212,191,.32);background:rgba(45,212,191,.06)}.otp-box.ready strong{color:#8fffe9;font-size:24px;letter-spacing:.08em}.otp-box p{font-size:11px;color:#90aab8;white-space:pre-wrap;line-height:1.55;margin:10px 0 0}.number-box button,.otp-box button{margin-top:13px;border:1px solid rgba(34,211,238,.35);background:rgba(34,211,238,.08);color:#9af3ff;border-radius:10px;padding:9px 11px;font-weight:800}.order-meta{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin-top:13px}.order-meta span{background:rgba(255,255,255,.025);border:1px solid rgba(125,211,252,.09);border-radius:13px;padding:11px}.order-meta small{display:block;color:#718d9d;font-size:9px;margin-bottom:5px}.order-meta b{display:block;font-size:12px;line-height:1.35}.order-actions{display:flex;flex-wrap:wrap;gap:9px;margin-top:14px}.order-actions button{flex:1 1 145px;border:1px solid rgba(34,211,238,.32);background:rgba(34,211,238,.07);color:#a8f5ff;border-radius:12px;padding:11px 13px;font-weight:900;cursor:pointer}.order-actions button.primary{border:0;background:linear-gradient(135deg,var(--nk-accent),var(--nk-green));color:#03212a}.order-actions button.danger{border-color:rgba(251,113,133,.34);background:rgba(251,113,133,.08);color:#fda4af}.order-actions button:disabled{cursor:not-allowed;opacity:.48}.cancel-hint{margin:9px 2px 0;color:#7993a2;font-size:10px}.order-note{margin:12px 0 0;border-left:3px solid var(--nk-danger);padding:9px 11px;background:rgba(251,113,133,.06);color:#fda4af;border-radius:0 10px 10px 0;font-size:11px}.nokos-empty{border:1px solid var(--nk-line);border-radius:22px;background:rgba(255,255,255,.025)}.nokos-empty h2{color:var(--nk-text);margin:0 0 7px}.nokos-empty a{display:inline-block;margin-top:12px;background:linear-gradient(135deg,var(--nk-accent),var(--nk-green));color:#03212a;text-decoration:none;font-weight:900;padding:11px 15px;border-radius:11px}
@media(max-width:650px){.nokos-history-page .nokos-shell{width:min(100% - 20px,920px)}.nokos-history-page .nokos-hero{padding-top:27px}.nokos-order{padding:14px;border-radius:20px}.order-top{align-items:flex-start}.order-app-icon{width:52px;height:52px;border-radius:15px}.order-app h2{font-size:18px}.order-status{font-size:9px;padding:6px 8px}.order-main-grid{grid-template-columns:1fr}.number-box strong,.otp-box strong{font-size:17px}.otp-box.ready strong{font-size:23px}.order-meta{grid-template-columns:1fr 1fr}.order-meta span:last-child{grid-column:1/-1}.order-actions{display:grid;grid-template-columns:1fr}.order-actions button{width:100%}.history-refresh{padding:8px 10px;font-size:11px}}


/* Popup edukasi Nokos */
body.nokos-notice-open{overflow:hidden}
.nokos-notice[hidden]{display:none!important}
.nokos-notice{position:fixed;inset:0;z-index:9999;display:grid;place-items:center;padding:18px}
.nokos-notice-backdrop{position:absolute;inset:0;background:rgba(2,9,18,.82);backdrop-filter:blur(7px)}
.nokos-notice-card{position:relative;width:min(100%,520px);max-height:calc(100dvh - 36px);overflow:auto;border:1px solid rgba(46,212,214,.28);border-radius:24px;padding:22px;background:linear-gradient(160deg,#0c1c2d,#071421);box-shadow:0 24px 80px rgba(0,0,0,.55);color:#edfaff}
.nokos-notice-icon{display:grid;place-items:center;width:42px;height:42px;border-radius:14px;background:rgba(49,211,211,.14);border:1px solid rgba(49,211,211,.35);font-size:24px;font-weight:900;color:#42e1db}
.nokos-notice-heading{margin-top:14px}.nokos-notice-heading small{letter-spacing:.18em;color:#49dcd7;font-weight:800}.nokos-notice-heading h2{margin:5px 0 0;font-size:23px;line-height:1.2}
.nokos-notice-lead{margin:15px 0 10px;color:#c7d8e3;line-height:1.55}
.nokos-notice-list{margin:0;padding-left:20px;color:#d7e5ed;line-height:1.5}.nokos-notice-list li+li{margin-top:7px}
.nokos-notice-warning{margin-top:15px;padding:12px 13px;border-radius:14px;background:rgba(255,191,71,.1);border:1px solid rgba(255,191,71,.28);color:#ffe1a4;font-weight:700;line-height:1.45}
.nokos-notice-check{display:flex;align-items:center;gap:10px;margin:17px 0 12px;cursor:pointer;color:#dcebf2;font-weight:650}.nokos-notice-check input{position:absolute;opacity:0;pointer-events:none}.nokos-notice-checkbox{width:21px;height:21px;flex:0 0 21px;border:1.5px solid #5e7889;border-radius:6px;display:grid;place-items:center}.nokos-notice-check input:checked+.nokos-notice-checkbox{background:#2fd4ce;border-color:#2fd4ce}.nokos-notice-check input:checked+.nokos-notice-checkbox:after{content:'✓';color:#052028;font-weight:900}
.nokos-notice-close{width:100%;min-height:48px;border:0;border-radius:14px;background:linear-gradient(90deg,#2dcbe4,#32d7bd);color:#06202a;font-weight:900;font-size:15px}.nokos-notice-close:disabled{opacity:.45;cursor:not-allowed;filter:saturate(.4)}
.nokos-retry{display:block;margin:12px auto 0;border:1px solid rgba(47,211,211,.35);border-radius:11px;padding:9px 16px;background:rgba(47,211,211,.1);color:#72eee8;font-weight:800}
@media(max-width:480px){.nokos-notice{padding:12px}.nokos-notice-card{border-radius:20px;padding:18px;max-height:calc(100dvh - 24px)}.nokos-notice-heading h2{font-size:20px}.nokos-notice-list{font-size:14px}}