:root{--color-navy: #10264B;--color-bg: #F2F4F7;--color-surface: #FFFFFF;--color-text: #142541;--color-text-secondary: #657084;--color-border: #E4E8EF;--color-gold: #AE8D46;--color-active: #227047;--color-active-bg: #EEF7F1;--color-warning: #825B17;--color-warning-bg: #FFF8E9;--color-inactive: #9C3030;--color-inactive-bg: #FFF1F1;--space-8: 8px;--space-12: 12px;--space-16: 16px;--space-24: 24px;--space-32: 32px;--space-40: 40px;--space-48: 48px;--space-64: 64px;--radius-card: 14px;--max-width: 1200px}*,*:before,*:after{box-sizing:border-box}html,body{margin:0;padding:0}body{background:var(--color-bg);color:var(--color-text);font-family:-apple-system,Segoe UI,Roboto,Inter,Arial,sans-serif;font-size:16px;line-height:1.5}@media (max-width: 480px){body{font-size:14px}}a{color:inherit}button,input{font:inherit}.site-header{display:flex;align-items:center;height:64px;padding:0 var(--space-16);max-width:var(--max-width);margin:0 auto;background:var(--color-surface)}.site-header-bar{background:var(--color-surface);border-bottom:1px solid var(--color-border)}@media (min-width: 900px){.site-header{height:80px;padding:0 var(--space-40, 40px)}}.site-header__logo{display:flex;align-items:center;text-decoration:none;color:var(--color-navy)}.site-header__logo-img{height:48px;width:auto;display:block}@media (min-width: 900px){.site-header__logo-img{height:56px}}.page-container{max-width:var(--max-width);margin:0 auto;padding:var(--space-32) var(--space-16)}@media (min-width: 768px){.page-container{padding:var(--space-32) var(--space-24)}}@media (min-width: 1024px){.page-container{padding:var(--space-48) var(--space-40, 40px)}}.loading{text-align:center;padding:var(--space-64);color:var(--color-text-secondary)}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}.hero{background:var(--color-navy);color:#fff;padding:calc(var(--space-64) * 1.5) var(--space-16)}.hero__inner,.guide__inner{max-width:var(--max-width);margin:0 auto}.hero__intro .eyebrow{color:var(--color-gold);font-weight:700;letter-spacing:.08em;text-transform:uppercase;font-size:13px;margin:0 0 var(--space-16)}.hero__intro h1{font-size:clamp(44px,8vw,72px);line-height:1.1;margin:0 0 var(--space-24)}.hero__desc{color:#ffffffd9;max-width:44ch;font-size:20px}.search-card{background:var(--color-surface);color:var(--color-text);border-radius:var(--radius-card);padding:var(--space-32);margin-top:var(--space-48);box-shadow:0 10px 30px #10264b40}.search-card h2{margin-top:0}.qr-result{margin-top:var(--space-24);text-align:center}.qr-output{max-width:220px;width:100%;border:1px solid var(--color-border);border-radius:8px}.qr-target-url{font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:13px;word-break:break-all;color:var(--color-text-secondary)}.search-card label{display:block;font-size:12px;font-weight:600;color:var(--color-text-secondary);margin-bottom:var(--space-8)}.search-card input{width:100%;min-height:48px;border:1px solid var(--color-border);border-radius:8px;padding:0 var(--space-16);font-family:ui-monospace,SFMono-Regular,Consolas,monospace}.search-card input:focus-visible{outline:2px solid var(--color-gold);outline-offset:2px}.search-form__error{min-height:20px;color:var(--color-inactive);font-size:14px;margin:var(--space-8) 0}.search-card button{width:100%;min-height:48px;background:var(--color-navy);color:#fff;border:none;border-radius:8px;font-weight:600;cursor:pointer;transition:opacity .18s}.search-card button:hover{opacity:.9}.helper-text{color:var(--color-text-secondary);font-size:13px;margin-bottom:0}.guide{background:var(--color-bg);padding:var(--space-64) var(--space-16);text-align:center}.guide__steps{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-32);max-width:var(--max-width);margin:var(--space-32) auto 0;padding:0;text-align:left}.guide__steps li{padding-left:var(--space-32);border-left:3px solid var(--color-border)}.guide__steps li:first-child{padding-left:0;border-left:none}.guide__number{display:flex;align-items:center;justify-content:center;width:40px;height:40px;margin:0 auto var(--space-16);border:2px solid var(--color-gold);border-radius:50%;color:var(--color-gold);font-weight:700}.guide__heading{display:flex;align-items:center;gap:var(--space-8);color:var(--color-gold)}.guide__heading h3{margin:0;color:var(--color-text)}.site-footer{text-align:center;padding:var(--space-24);color:var(--color-text-secondary)}@media (min-width: 900px){.hero{padding:calc(var(--space-64) * 1.5) var(--space-40)}.hero__inner{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-64);align-items:center}.search-card{margin-top:0}}@media (max-width: 899px){.guide__steps{grid-template-columns:1fr}.guide__steps li{padding-left:0;padding-top:var(--space-32);border-left:none;border-top:3px solid var(--color-border)}.guide__steps li:first-child{padding-top:0;border-top:none}.guide__number{margin:0 0 var(--space-16)}}.back-link{display:inline-block;color:var(--color-navy);text-decoration:none;margin-bottom:var(--space-16)}.subtitle{color:var(--color-text-secondary)}.detail-card{background:var(--color-surface);border-radius:var(--radius-card);border-top:3px solid var(--color-gold);padding:var(--space-32);box-shadow:0 4px 20px #10264b14}.status-panel{border-radius:10px;padding:var(--space-16) var(--space-24);margin-bottom:var(--space-24)}.status-panel__head{display:flex;align-items:center;gap:var(--space-8)}.status-panel__head h2{margin:0}.status-panel--aktif{background:var(--color-active-bg);color:var(--color-active)}.status-panel--peringatan{background:var(--color-warning-bg);color:var(--color-warning)}.status-panel--nonaktif{background:var(--color-inactive-bg);color:var(--color-inactive)}.badge{display:inline-block;font-size:12px;font-weight:700;padding:2px 10px;border-radius:999px}.badge--aktif{background:var(--color-active);color:#fff}.badge--peringatan{background:var(--color-warning);color:#fff}.badge--nonaktif{background:var(--color-inactive);color:#fff}.product-name{margin-bottom:var(--space-8)}.nomor-box{background:var(--color-bg);border-radius:8px;padding:var(--space-16);display:flex;align-items:center;gap:var(--space-16);flex-wrap:wrap;margin:var(--space-24) 0}.nomor-box code{font-family:ui-monospace,SFMono-Regular,Consolas,monospace;word-break:break-all}.btn-copy{min-height:48px;padding:0 var(--space-16);border:1px solid var(--color-border);background:#fff;border-radius:8px;cursor:pointer}.field-grid{display:grid;grid-template-columns:1fr;gap:var(--space-16);margin:0}.field-grid dt{font-size:12px;color:var(--color-text-secondary);margin-bottom:4px}.field-grid dd{margin:0}.catatan-panel{background:var(--color-warning-bg);border-left:3px solid var(--color-gold);padding:var(--space-16);margin-top:var(--space-24);border-radius:6px}.certificate-card{background:var(--color-surface);border-radius:var(--radius-card);padding:var(--space-32);margin-top:var(--space-24)}.certificate-card__header{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:var(--space-16)}.btn-outline,.btn-primary{display:inline-flex;align-items:center;gap:var(--space-8);min-height:48px;padding:0 var(--space-16);border-radius:8px;text-decoration:none;cursor:pointer}.btn-outline{background:#fff;border:1px solid var(--color-navy);color:var(--color-navy)}.btn-primary{background:var(--color-navy);border:none;color:#fff}.certificate-card__preview{margin-top:var(--space-16);display:flex;justify-content:center;background:var(--color-bg);border:1px solid var(--color-border);border-radius:8px;padding:var(--space-16);overflow:hidden}.certificate-card__preview canvas{max-width:100%;height:auto;box-shadow:0 2px 12px #10264b1f}.certificate-card__hash{margin-top:var(--space-16);padding:var(--space-12) var(--space-16);background:var(--color-bg);border-radius:8px}.certificate-card__hash-label{display:block;font-size:12px;color:var(--color-text-secondary);margin-bottom:4px}.certificate-card__hash-value{font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:13px;word-break:break-all}.certificate-card__caption{color:var(--color-text-secondary);font-size:13px}.detail-state{background:var(--color-surface);border-radius:var(--radius-card);padding:var(--space-32);text-align:center}@media (min-width: 900px){.field-grid{grid-template-columns:1fr 1fr}}