*,*:before,*:after{box-sizing:border-box}html,body{margin:0;padding:0;font-family:system-ui,-apple-system,BlinkMacSystemFont,SF Pro Text,Segoe UI,sans-serif;background:#f3f4f6;color:#0f172a}body{min-height:100vh}.app-shell{min-height:100vh;display:flex;flex-direction:column}.page{flex:1}.hero{padding:72px 16px 64px;background:linear-gradient(to bottom,#e0f2fe,#f3f4f6 50%,#f3f4f6);text-align:left}.hero-home{padding-top:96px}.hero-small{padding-bottom:24px}.hero-inner{max-width:960px;margin:0 auto}.hero h1{font-size:2.7rem;margin:0 0 8px;color:#0f172a}.hero p{margin:0 0 24px;color:#6b7280}.hero-subtitle{font-size:.95rem}.hero-title{font-weight:700;letter-spacing:-.02em}.hero-title-accent{color:#0f766e}.brand-minimal{font-size:.9rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#0f766e;margin-bottom:16px}.brand-logo{display:inline-flex;align-items:center;gap:10px}.brand-logo img{display:block;height:40px;width:auto}.hero-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:40px;align-items:center}.ongkir-page .hero-grid{grid-template-columns:1fr;gap:24px;align-items:flex-start}.ongkir-page.ongkir-detail-page .hero-grid{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:40px;align-items:center}.ongkir-page .home-card{max-width:100%;width:100%}.ongkir-page .tracking-form{display:flex;flex-direction:column;gap:8px;max-width:100%}.ongkir-page:not(.ongkir-detail-page) .tracking-form{display:grid;grid-template-columns:1fr 1fr;gap:16px}.ongkir-page:not(.ongkir-detail-page) .stack-field:nth-child(4){grid-column:1 / -1;grid-row:auto}.ongkir-page:not(.ongkir-detail-page) .stack-field:nth-child(5){grid-column:1 / 2;grid-row:auto}.ongkir-page:not(.ongkir-detail-page) .stack-field:nth-child(6){grid-column:1 / 2;grid-row:auto}.ongkir-page:not(.ongkir-detail-page) .stack-field:nth-child(7),.ongkir-page:not(.ongkir-detail-page) .stack-field:nth-child(8){grid-column:1 / -1}.ongkir-detail-form{display:grid;grid-template-columns:1fr 1fr;gap:16px;max-width:100%}.ongkir-detail-form .stack-field:nth-child(1),.ongkir-detail-form .stack-field:nth-child(2),.ongkir-detail-form .stack-field:nth-child(3){grid-column:1 / 2}.ongkir-detail-form .stack-field:nth-child(4){grid-column:1 / -1}.ongkir-detail-form button,.ongkir-detail-form>p{grid-column:1 / -1}.hero-left,.hero-right{text-align:left}.hero-points{list-style:none;padding:0;margin:12px 0 0;font-size:.9rem;color:#6b7280}.hero-points li+li{margin-top:4px}.tracking-form{max-width:640px;display:flex;flex-direction:column;gap:8px}.tracking-form-stack{width:100%;max-width:760px;margin:0 auto}.form-row{display:flex;gap:8px}.input,.select{border-radius:8px;border:1px solid #d1d5db;background:#fff;color:#111827;padding:10px 16px;font-size:.95rem;flex:1;width:100%;display:block;transition:border-color .2s ease,box-shadow .2s ease,background-color .2s ease}.input:focus,.select:focus{outline:none;border-color:#0f766e;box-shadow:0 0 0 2px #0f766e1a}.input.input-error,.select.input-error{border-color:#dc2626;background-color:#fef2f2;box-shadow:0 0 0 2px #dc26261a}.input.input-error:focus,.select.input-error:focus{border-color:#b91c1c;box-shadow:0 0 0 2px #b91c1c26}.input::placeholder{color:#9ca3af}.input-disabled{background:#f3f4f6;color:#6b7280;cursor:not-allowed}.form-error{color:#dc2626;font-size:.85rem;margin-top:6px;display:flex;align-items:flex-start;gap:6px}.form-error:before{content:"⚠";flex-shrink:0;margin-top:2px}.button-primary{border-radius:8px;border:none;padding:10px 20px;background:linear-gradient(to right,#0f766e,#059669);color:#f9fafb;font-weight:600;font-size:.95rem;cursor:pointer;transition:transform .08s ease,box-shadow .08s ease,filter .08s ease}.button-primary:hover{filter:brightness(1.05);box-shadow:0 12px 22px #0f766e59;transform:translateY(-1px)}.button-primary:active{transform:translateY(0);box-shadow:none}.button-secondary{border-radius:8px;border:1px solid #d1d5db;padding:8px 16px;background:#f9fafb;color:#111827;font-weight:500;font-size:.9rem;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;transition:background .1s ease,border-color .1s ease}.button-secondary:hover{background:#e5e7eb;border-color:#cbd5e1}.button-wide{width:100%}.home-card{max-width:100%;width:100%;margin:16px auto 0;padding:22px 22px 20px;border-radius:18px;background:#fff;box-shadow:0 20px 40px #0f172a26;border:1px solid #e5e7eb}.stack-field{margin-bottom:10px;position:relative}.stack-field:has(.input-error) .field-label{color:#dc2626}.form-group{display:flex;flex-direction:column;gap:6px}.skeleton-card{border-radius:16px;padding:20px;background:#fff;border:1px solid #e5e7eb;box-shadow:0 12px 18px #0f172a14;margin-bottom:16px}.skeleton-line{height:14px;border-radius:999px;background:linear-gradient(90deg,#e5e7eb,#f3f4f6,#e5e7eb);background-size:200% 100%;animation:pulse 1.4s ease infinite}.skeleton-line+.skeleton-line{margin-top:10px}.skeleton-line.wide{width:90%}.skeleton-line.medium{width:60%}.skeleton-line.short{width:40%}@keyframes pulse{0%{background-position:200% 0}to{background-position:-200% 0}}.courier-blurb{background:#f8fafc;padding:32px 16px;border-top:1px solid #e2e8f0;border-bottom:1px solid #e2e8f0}.courier-blurb-inner{max-width:960px;margin:0 auto}.courier-blurb h2{margin:0 0 12px;font-size:1.4rem;color:#0f172a}.courier-blurb p{margin:0;color:#475569;line-height:1.6;font-size:.98rem}.status-table{width:100%;border-collapse:collapse;margin-top:16px;font-size:.85rem}.status-table th,.status-table td{border:1px solid #e5e7eb;padding:8px 10px;text-align:left;vertical-align:top}.status-table thead{background:#f9fafb}.status-table th{font-weight:600;font-size:.78rem;text-transform:uppercase;letter-spacing:.06em;color:#0f172a}.status-table tbody tr:nth-child(2n){background:#f9fafb}.dummy-captcha-card{margin:16px auto 0;max-width:260px;background:#fff;border-radius:8px;padding:10px 16px;border:1px solid #e5e7eb;display:flex;align-items:center;gap:8px;justify-content:center;font-size:.85rem}.dummy-badge.success{width:18px;height:18px;border-radius:999px;background:#22c55e}.courier-badges{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}.courier-badge{font-size:.75rem;padding:4px 10px;border-radius:999px;border:1px solid #e5e7eb;background:#f9fafb;color:#4b5563}.result-section{max-width:960px;margin:0 auto;padding:24px 16px}.share-section{background:#fff;border-radius:20px;padding:16px 18px 12px;border:1px solid #e5e7eb;margin-bottom:24px}.share-section h2{margin:0 0 8px;font-size:1rem;color:#0f172a}.share-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}.summary-card{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:16px;background:#fff;border-radius:20px;padding:20px 20px 16px;border:1px solid #e5e7eb;margin-bottom:32px}.label{font-size:.75rem;text-transform:uppercase;letter-spacing:.06em;color:#6b7280}.value{margin-top:6px;font-size:.95rem;color:#111827}.status{font-weight:600;color:#22c55e}.timeline{background:#fff;border-radius:20px;padding:20px 18px;border:1px solid #e5e7eb}.timeline h2{margin:0 0 16px;font-size:1.1rem}.timeline ul{list-style:none;margin:0;padding:0}.timeline-item{position:relative;padding-left:24px;padding-bottom:16px}.timeline-item:last-child{padding-bottom:0}.timeline-item:before{content:"";position:absolute;left:7px;top:0;bottom:-4px;width:2px;background:#1f2937}.timeline-item:last-child:before{bottom:8px}.timeline-dot{position:absolute;left:2px;top:4px;width:10px;height:10px;border-radius:999px;background:#22c55e;box-shadow:0 0 0 3px #22c55e40}.timeline-content{position:relative}.timeline-date{font-size:.8rem;color:#9ca3af}.timeline-desc{font-size:.9rem;color:#4b5563}.link-back{display:inline-block;margin-top:8px;font-size:.85rem;color:#0f766e;text-decoration:none;font-weight:500;padding:4px 8px;border-radius:999px;background:#0f766e14}.link-back:hover{color:#0f766e;background:#0f766e29}.placeholder-text{margin:0 auto;max-width:720px;font-size:.95rem;text-align:center;line-height:1.6;padding:28px 24px;color:#1f2937;background:#f8fafc;border:1px solid #e2e8f0;border-radius:14px}@media(max-width:768px){.ongkir-page:not(.ongkir-detail-page) .tracking-form{display:flex;flex-direction:column;gap:12px}.ongkir-page:not(.ongkir-detail-page) .home-card{padding:20px 16px}}.error{margin:0 0 16px;padding:10px 12px;border-radius:12px;border:1px solid #fecaca;background:#fef2f2;color:#b91c1c;font-size:.9rem}@media(max-width:640px){.hero{padding-top:40px;padding-left:12px;padding-right:12px}.hero h1{font-size:1.8rem;margin-bottom:8px}.hero-grid{grid-template-columns:minmax(0,1fr);gap:20px}.hero-left,.hero-right{text-align:left}.hero-left{padding:0}.hero-subtitle{font-size:.9rem;line-height:1.5}.tracking-form{padding:0;gap:12px}.form-row{flex-direction:column}.select{max-width:100%}.home-card{margin-top:16px;padding:18px 16px 16px;border-radius:14px;box-shadow:0 10px 25px #0f172a1a}.stack-field{margin-bottom:12px}.field-label{font-size:.75rem;margin-bottom:6px}.input,.select{padding:10px 14px;font-size:16px}.checkbox-group{grid-template-columns:1fr;gap:8px;margin-top:10px;padding:8px}.checkbox-inline{padding:12px 14px;font-size:.85rem;border-radius:6px}.checkbox-inline input[type=checkbox]{width:18px;height:18px}.checkbox-inline span{font-size:.85rem}.button-primary{padding:12px 20px;font-size:.9rem;margin-top:8px}.result-section{padding:20px 12px}.rates-card{max-width:100%;padding:16px 16px 14px;border-radius:14px;margin:0 auto}.rates-card h2{font-size:1rem;margin-bottom:8px}.rates-route{font-size:.85rem;margin-bottom:12px;word-break:break-word}.rates-row{padding:12px 0;flex-direction:column;align-items:flex-start;gap:8px}.rates-service{font-size:.9rem;font-weight:600}.rates-etd{font-size:.8rem;margin-bottom:6px}.rates-price{font-size:.95rem;margin-top:4px}.error{font-size:.85rem;padding:10px;margin-bottom:12px}.form-error{font-size:.8rem;margin-top:4px}.placeholder-text{font-size:.85rem;padding:20px 12px}}.textarea{width:100%;min-height:180px;border-radius:8px;border:1px solid #d1d5db;padding:10px 12px;font-size:.95rem;resize:vertical;font-family:inherit;color:#111827}.textarea::placeholder{color:#9ca3af}.field-label{display:block;margin-bottom:4px;font-size:.8rem;text-transform:uppercase;letter-spacing:.08em;color:#6b7280}.suggestions{position:absolute;top:100%;left:0;right:0;background:#fff;border:1px solid #d1d5db;border-radius:8px;list-style:none;padding:8px 0;margin:0;z-index:10;box-shadow:0 10px 15px -3px #0000001a;max-height:200px;overflow-y:auto}.suggestions li{padding:10px 16px;cursor:pointer;font-size:.95rem;color:#111827;transition:background-color .1s ease}.suggestions li:hover{background-color:#f0f9ff;color:#0f766e;font-weight:500}.rates-card{max-width:640px;margin:0 auto;background:#fff;border-radius:18px;border:1px solid #e5e7eb;padding:18px 18px 14px;box-shadow:0 18px 40px #0f172a1a}.rates-card h2{margin:0 0 4px;font-size:1.1rem}.rates-route{margin:0 0 10px;font-size:.9rem;color:#6b7280}.rates-list{list-style:none;margin:0;padding:0}.rates-row{display:flex;align-items:center;justify-content:space-between;padding:10px 0;border-top:1px solid #e5e7eb}.rates-row:first-child{border-top:none}.rates-service{font-size:.95rem;font-weight:500;color:#111827}.rates-etd{font-size:.8rem;color:#6b7280}.rates-price{font-size:.95rem;font-weight:600;color:#0f766e}.courier-detail-section{background:#f9fafb;padding:60px 16px;border-top:1px solid #e5e7eb}.courier-list-section{padding:60px 16px;background:#f9fafb;border-top:1px solid #e5e7eb}.courier-cards-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:16px;max-width:960px;margin:0 auto}.courier-card-link{text-decoration:none;display:block}.courier-card{background:#fff;border:1px solid #e5e7eb;border-radius:12px;padding:20px 16px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;transition:all .2s ease;cursor:pointer;position:relative;overflow:hidden}.courier-card:before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(to right,#0f766e,#059669);transform:translate(-100%);transition:transform .2s ease}.courier-card-link:hover .courier-card{border-color:#0f766e;box-shadow:0 8px 20px #0f766e26;transform:translateY(-2px)}.courier-card-link:hover .courier-card:before{transform:translate(0)}.courier-card-name{font-size:1rem;font-weight:600;color:#111827;line-height:1.3}.courier-card-type{font-size:.75rem;text-transform:uppercase;letter-spacing:.05em;color:#6b7280;font-weight:500}.courier-card-arrow{font-size:1.5rem;color:#0f766e;margin-top:6px;opacity:0;transform:translate(-8px);transition:all .2s ease}.courier-card-link:hover .courier-card-arrow{opacity:1;transform:translate(0)}.courier-list-page .courier-cards-grid{grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px;max-width:100%}.courier-list-page .courier-card{padding:20px 16px}.courier-list-page .courier-card-name{font-size:1rem}.courier-list-page .courier-card-arrow{display:none}@media(max-width:640px){.courier-detail-section,.courier-list-section{padding:40px 12px}.courier-cards-grid,.courier-list-page .courier-cards-grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:12px}.courier-card{padding:16px 12px}.courier-card-name{font-size:.9rem}.courier-card-type{font-size:.7rem}.courier-card-arrow{font-size:1.2rem}}.footer{border-top:none;background:linear-gradient(135deg,#0f766e,#059669);padding:48px 16px 40px;margin-top:60px}.footer-inner{max-width:960px;margin:0 auto;display:grid;grid-template-columns:auto 1fr;gap:48px;align-items:start}.footer-brand{font-size:.95rem;font-weight:700;color:#fff;display:inline-flex;align-items:center;gap:14px;white-space:nowrap}.footer-brand img{height:48px;width:auto;display:block;border-radius:8px;background:#ffffff26;padding:6px}.footer-section-title{font-size:.7rem;text-transform:uppercase;letter-spacing:.12em;color:#ffffffd9;margin-bottom:14px;font-weight:800;display:block}.footer-courier-links{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px 14px;list-style:none;margin:0;padding:0}.footer-link{display:inline-flex;align-items:center;font-size:.9rem;color:#fff;text-decoration:none;padding:10px 14px;border-radius:8px;transition:all .2s ease;font-weight:500;border:1px solid rgba(255,255,255,.2);background:#ffffff1a}.footer-link:hover{background-color:#fff3;color:#fff;border-color:#fff6;transform:translateY(-2px);box-shadow:0 8px 16px #0003;text-decoration:none}@media(max-width:640px){.footer{padding:32px 12px 24px;margin-top:40px}.footer-inner{grid-template-columns:1fr;gap:24px}.footer-brand{font-size:.9rem;gap:10px}.footer-brand img{height:40px;padding:4px}.footer-section-title{font-size:.65rem;margin-bottom:12px;letter-spacing:.1em}.footer-courier-links{grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:8px 10px}.footer-link{font-size:.85rem;padding:8px 12px;border-radius:6px}}.isso-thread{margin-top:16px;padding:16px 18px 18px;border-radius:12px;border:1px solid #e5e7eb;background:#f9fafb}.isso-thread-heading{font-size:1rem;font-weight:600;margin:0 0 10px;color:#111827}.isso-postbox{margin-bottom:16px}.isso-textarea{width:100%;font-family:inherit;font-size:.95rem;padding:10px 12px;border-radius:8px 8px 0 0;border:1px solid #d1d5db;border-bottom-color:#e5e7eb;resize:vertical;min-height:96px}.isso-textarea:focus{outline:none;border-color:#0f766e;box-shadow:0 0 0 1px #0f766e1a}.isso-input-wrapper{margin-top:0;font-size:.85rem;color:#4b5563}.isso-input-wrapper label{display:block;margin-bottom:6px}.isso-input-wrapper input[type=text],.isso-input-wrapper input[type=email]{width:100%;font-family:inherit;font-size:.9rem;padding:10px 12px;border-radius:8px;border:1px solid #d1d5db;background:#fff}.isso-input-wrapper input:focus{outline:none;border-color:#0f766e;box-shadow:0 0 0 1px #0f766e1a}.isso-post-action{display:inline-block;margin-top:10px;margin-left:4px}.isso-post-action input[type=submit],.isso-post-action input[type=button]{font-size:.85rem;padding:6px 12px;border-radius:999px;border:1px solid #d1d5db;background:#fff;cursor:pointer}.isso-post-action input[type=submit]{background:#0f766e;border-color:#0f766e;color:#fff}.isso-post-action input[type=submit]:hover{background:#0d5f59}.isso-post-action input[type=button]:hover{background:#f3f4f6}.isso-auth-section{display:flex;flex-wrap:wrap;gap:12px 18px;align-items:flex-end;margin-top:16px}.isso-auth-section .isso-input-wrapper{flex:1 1 0;min-width:0}.isso-auth-section .isso-post-action:first-of-type{margin-left:auto}.isso-auth-section .isso-post-action{align-self:flex-start}.checkbox-group{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px;margin-top:12px;padding:12px;background:#f9fafb;border-radius:10px;border:1px solid #e5e7eb}.checkbox-inline{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:8px;cursor:pointer;transition:all .2s ease;-webkit-user-select:none;user-select:none;background:#fff;border:1px solid #e5e7eb}.checkbox-inline:hover{background-color:#f0f9ff;border-color:#0f766e;box-shadow:0 2px 8px #0f766e1a}.checkbox-inline input[type=checkbox]{cursor:pointer;margin:0;width:18px;height:18px;accent-color:#0f766e}.checkbox-inline input[type=checkbox]:checked{accent-color:#0f766e}.checkbox-inline span{font-size:.85rem;color:#1f2937;font-weight:500;line-height:1.2}.isso-notification-section{margin-top:10px;font-size:.85rem;color:#4b5563}#isso-root{margin-top:16px}#isso-root .isso-comment{display:flex;gap:12px;padding:10px 0;border-top:1px solid #e5e7eb;font-size:.9rem}#isso-root .isso-comment:first-child{border-top:none}#isso-root .isso-avatar{flex:0 0 32px;width:32px;height:32px;border-radius:999px;overflow:hidden}#isso-root .isso-avatar svg{width:100%;height:100%}#isso-root .isso-text-wrapper{flex:1 1 auto}#isso-root .isso-comment-header{margin-bottom:4px;color:#6b7280}#isso-root .isso-author{font-weight:600;color:#111827}#isso-root .isso-permalink time{font-size:.8rem}#isso-root .isso-text{color:#111827;line-height:1.45;margin-bottom:6px}#isso-root .isso-comment-footer{display:flex;align-items:center;gap:8px;font-size:.8rem;color:#6b7280}#isso-root .isso-comment-footer a{text-decoration:none;color:#6b7280}#isso-root .isso-comment-footer a:hover{color:#0f766e}@media(max-width:640px){.isso-thread{padding:12px 12px 14px}.isso-auth-section{flex-direction:column;align-items:stretch}.isso-auth-section .isso-post-action:first-of-type{margin-left:0}.isso-auth-section .isso-post-action{align-self:flex-start}}.page-container{max-width:960px;margin:0 auto;padding:40px 16px;min-height:100vh}.page-container h1{font-size:28px;font-weight:600;margin:0 0 32px;color:#0f172a}.content-wrapper{width:100%}.demo-toggle{margin-bottom:24px;padding:12px 16px;background:#fef3c7;border:1px solid #fcd34d;border-radius:8px;display:inline-block}.demo-toggle label{display:flex;align-items:center;gap:8px;cursor:pointer;font-size:14px;color:#92400e;font-weight:500}.demo-toggle input[type=checkbox]{cursor:pointer;width:16px;height:16px}.loading-message,.empty-state{text-align:center;padding:60px 32px;background:#fff;border-radius:8px;border:1px solid #e2e8f0}.loading-message p,.empty-state p{margin:0;color:#64748b;font-size:16px}.empty-state-hint{margin-top:12px!important;font-size:14px;color:#94a3b8}.error-message{padding:24px;background:#fef2f2;border:1px solid #fecaca;border-radius:8px;margin-bottom:24px}.error-message p{margin:0 0 16px;color:#991b1b;font-size:15px}.retry-button{padding:8px 16px;background:#ef4444;color:#fff;border:none;border-radius:6px;font-size:14px;font-weight:500;cursor:pointer;transition:background .2s}.retry-button:hover{background:#dc2626}.history-list{display:flex;flex-direction:column;gap:12px}.history-item{display:flex;justify-content:space-between;align-items:center;padding:16px;background:#fff;border:1px solid #e2e8f0;border-radius:8px;cursor:pointer;transition:all .2s}.history-item:hover{border-color:#0ea5e9;background:#f0f9ff;transform:translate(4px)}.history-item:focus{outline:2px solid #0ea5e9;outline-offset:2px}.history-item-main{flex:1;min-width:0}.history-route{display:flex;align-items:center;gap:12px;margin-bottom:8px;flex-wrap:wrap}.history-route .location{font-weight:600;color:#0f172a;word-break:break-word}.history-route .arrow{color:#94a3b8;flex-shrink:0}.history-details{display:flex;align-items:center;gap:8px;font-size:13px;color:#64748b}.history-details .weight{background:#f1f5f9;padding:2px 8px;border-radius:4px;font-weight:500}.history-details .couriers{font-weight:500;color:#475569}.history-details .separator{color:#cbd5e1}.history-item-time{flex-shrink:0;margin-left:16px;font-size:13px;color:#94a3b8;text-align:right}.pagination{display:flex;justify-content:center;align-items:center;gap:16px;margin-top:32px;padding-top:24px;border-top:1px solid #e2e8f0}.pagination-btn{padding:10px 16px;background:#fff;color:#0ea5e9;border:2px solid #0ea5e9;border-radius:6px;font-size:14px;font-weight:500;cursor:pointer;transition:all .2s}.pagination-btn:hover:not(:disabled){background:#0ea5e9;color:#fff}.pagination-btn:disabled{opacity:.5;cursor:not-allowed;border-color:#cbd5e1;color:#cbd5e1}.pagination-info{font-size:14px;color:#64748b;font-weight:500;min-width:180px;text-align:center}@media(max-width:640px){.page-container{padding:24px 12px}.page-container h1{font-size:24px;margin-bottom:24px}.history-item{flex-direction:column;align-items:flex-start;gap:12px}.history-item-time{margin-left:0;text-align:left;width:100%}.history-route{gap:8px}.history-route .location{font-size:14px}.loading-message,.empty-state{padding:40px 16px}.pagination{flex-direction:column;gap:12px}.pagination-btn{width:100%}.pagination-info{min-width:auto;width:100%}}.share-actions-ongkir{grid-column:1 / -1;margin-bottom:8px;text-align:center}.button-share-ongkir{padding:8px 16px;background:#fff;color:#0ea5e9;border:2px solid #0ea5e9;border-radius:8px;font-size:.875rem;font-weight:600;cursor:pointer;transition:all .2s ease}.button-share-ongkir:hover{background:#0ea5e9;color:#fff}.ongkir-results{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin-top:24px;align-items:start}.ongkir-card{background:linear-gradient(135deg,#fff,#f0f9fc);border-radius:12px;border:1px solid #cffafe;overflow:hidden;box-shadow:0 2px 8px #06b6d414;transition:all .3s cubic-bezier(.4,0,.2,1);display:flex;flex-direction:column;height:100%}.ongkir-card:first-child{grid-column:1 / -1}.ongkir-card:hover{border-color:#06b6d4;box-shadow:0 12px 24px #06b6d426;transform:translateY(-6px)}.ongkir-card-header{background:linear-gradient(135deg,#06b6d4,#0891b2);padding:16px 18px;border-bottom:none}.ongkir-card-header h3{margin:0;color:#fff;font-size:1.05rem;font-weight:600;letter-spacing:-.01em}.ongkir-card-body{padding:18px;flex-grow:1;display:flex;flex-direction:column;gap:14px}.ongkir-service,.ongkir-price,.ongkir-etd{display:flex;justify-content:space-between;align-items:center;gap:12px}.service-label,.price-label,.etd-label{font-size:.8rem;color:#64748b;font-weight:600;text-transform:uppercase;letter-spacing:.04em}.service-value,.etd-value{font-size:.9rem;color:#0f172a;font-weight:600}.price-value{font-size:1.3rem;font-weight:700;color:#06b6d4;text-align:right}.ongkir-etd{padding-top:10px;border-top:1px solid #e0f2fe}.ongkir-etd .etd-value{background:#f0f9fc;color:#0891b2;padding:4px 10px;border-radius:5px;font-size:.8rem;font-weight:600}.loading-state,.error-state{text-align:center;padding:60px 32px;background:#fff;border-radius:12px;border:1px solid #e0f2fe}.spinner{display:inline-block;width:40px;height:40px;border:4px solid #e0f2fe;border-top:4px solid #06b6d4;border-radius:50%;animation:spin 1s linear infinite;margin-bottom:16px}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.loading-state p,.error-state p{color:#6b7280;font-size:1rem}.error-message{color:#dc2626;font-weight:500}@media(max-width:768px){.hero{padding:48px 12px 32px}.hero h1{font-size:2rem}.hero-subtitle{font-size:.85rem;word-break:break-word}.checkbox-inline{padding:8px 10px;font-size:.8rem}.ongkir-results{grid-template-columns:1fr;gap:16px}.ongkir-card:first-child{grid-column:1}.ongkir-card:hover{transform:translateY(-4px)}.ongkir-card-header h3{font-size:1rem}.ongkir-card-body{padding:14px 16px;gap:12px}.ongkir-service,.ongkir-price,.ongkir-etd{gap:8px}.service-label,.price-label,.etd-label{font-size:.75rem;flex-shrink:0}.service-value,.etd-value{font-size:.85rem;word-break:break-word}.price-value{font-size:1.1rem}.button-share-ongkir{font-size:.8rem;padding:6px 12px}.share-actions-ongkir{margin-bottom:16px}}@media(max-width:640px){.result-section{padding:12px 8px 16px}.hero{padding:32px 8px 20px}.hero h1{font-size:1.5rem;margin-bottom:4px}.hero-subtitle{font-size:.8rem;margin-bottom:12px;word-break:break-word}.link-back{font-size:.8rem}.ongkir-results{gap:12px}.ongkir-card{border-radius:8px}.ongkir-card-header{padding:12px 14px}.ongkir-card-header h3{font-size:.9rem;font-weight:600}.ongkir-card-body{padding:12px 14px;gap:10px}.ongkir-service,.ongkir-price,.ongkir-etd{flex-direction:column;align-items:flex-start;gap:4px}.service-label,.price-label,.etd-label{font-size:.7rem}.service-value{font-size:.8rem}.price-value{font-size:1rem}.ongkir-etd{padding-top:8px}.ongkir-etd .etd-value{font-size:.7rem;padding:3px 8px}.button-share-ongkir{width:100%;padding:10px 12px;font-size:.8rem}.share-actions-ongkir{grid-column:1 / -1;margin-bottom:8px}.loading-state,.error-state{padding:40px 16px;border-radius:8px}.error-message{font-size:.9rem}}.navbar{background:#fff;border-bottom:1px solid #e5e7eb;box-shadow:0 1px 3px #00000014;position:sticky;top:0;z-index:50}.navbar-container{max-width:1200px;margin:0 auto;padding:0 16px;display:flex;align-items:center;justify-content:space-between;height:64px}.navbar-brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:#0f172a;font-weight:700;font-size:1.1rem;letter-spacing:-.5px;transition:opacity .2s ease}.navbar-brand:hover{opacity:.8}.navbar-logo{height:40px;width:auto;display:block}.navbar-title{background:linear-gradient(135deg,#0f766e,#059669);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;font-weight:700}.navbar-toggle{display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:8px;margin-right:-8px}.hamburger{width:24px;height:2px;background:#0f172a;border-radius:1px;transition:all .3s ease;display:block}.navbar-toggle.active .hamburger:nth-child(1){transform:rotate(45deg) translate(8px,8px)}.navbar-toggle.active .hamburger:nth-child(2){opacity:0}.navbar-toggle.active .hamburger:nth-child(3){transform:rotate(-45deg) translate(7px,-7px)}.navbar-menu{display:flex;align-items:center;margin-left:auto}.navbar-nav{display:flex;list-style:none;margin:0;padding:0;gap:8px;align-items:center}.nav-item{position:relative}.nav-link{display:flex;align-items:center;gap:8px;padding:8px 16px;border-radius:8px;text-decoration:none;color:#6b7280;font-weight:500;font-size:.95rem;transition:all .2s ease;position:relative}.nav-link:hover{color:#0f766e;background-color:#0f766e14}.nav-link.active{color:#0f766e;background:linear-gradient(135deg,#0f766e1a,#0596691a);font-weight:600}.nav-link.active:after{content:"";position:absolute;bottom:-8px;left:50%;transform:translate(-50%);width:4px;height:4px;border-radius:50%;background:linear-gradient(135deg,#0f766e,#059669)}.nav-icon{font-size:1.2rem;display:inline-block}.nav-label{display:inline}@media(max-width:768px){.navbar-container{height:56px}.navbar-toggle{display:flex}.navbar-logo{height:36px}.navbar-title{display:none}.navbar-menu{position:absolute;top:100%;left:0;right:0;background:#fff;border-bottom:1px solid #e5e7eb;box-shadow:0 4px 12px #0000001a;margin-left:0;max-height:0;overflow:hidden;transition:max-height .3s ease}.navbar-menu.open{max-height:300px}.navbar-nav{flex-direction:column;gap:0;width:100%;padding:12px 0}.nav-item{width:100%}.nav-link{width:100%;padding:12px 16px;border-radius:0;justify-content:flex-start}.nav-link.active:after{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;height:100%;background:linear-gradient(180deg,#0f766e,#059669);border-radius:0}.nav-link:hover{background-color:#f9fafb}.nav-link.active{background-color:#0f766e14}.nav-label{flex:1}}@media(max-width:480px){.navbar-container{padding:0 12px}.navbar-brand{gap:8px}.nav-link{padding:10px 12px;font-size:.9rem}.nav-icon{font-size:1.1rem}}