*{box-sizing:border-box;margin:0;padding:0}:root{--bg-primary:#0f1419;--bg-secondary:#1a1f2e;--bg-tertiary:#252d3d;--bg-card:#1e2533;--green-primary:#4ade80;--green-secondary:#22c55e;--green-dark:#16a34a;--green-light:#86efac;--accent-blue:#3b82f6;--accent-yellow:#fbbf24;--accent-red:#ef4444;--text-primary:#f8fafc;--text-secondary:#cbd5e1;--text-muted:#94a3b8;--border-color:#334155;--shadow-sm:0 2px 8px #0000004d;--shadow-md:0 4px 16px #0006;--shadow-lg:0 8px 32px #00000080;--shadow-green:0 0 20px #4ade804d;--transition-fast:.2s ease;--transition-normal:.3s ease;--transition-slow:.5s ease}[data-theme=light]{--bg-primary:#f8fafc;--bg-secondary:#f1f5f9;--bg-tertiary:#e2e8f0;--bg-card:#fff;--green-primary:#16a34a;--green-secondary:#15803d;--green-dark:#14532d;--green-light:#22c55e;--accent-blue:#2563eb;--accent-yellow:#f59e0b;--accent-red:#dc2626;--text-primary:#0f172a;--text-secondary:#475569;--text-muted:#64748b;--border-color:#cbd5e1;--shadow-sm:0 2px 8px #00000014;--shadow-md:0 4px 16px #0000001f;--shadow-lg:0 8px 32px #00000029;--shadow-green:0 0 20px #16a34a33}body{background:linear-gradient(135deg, var(--bg-primary) 0%, var(--bg-secondary) 100%);color:var(--text-primary);opacity:0;min-height:100vh;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,sans-serif;line-height:1.6;transition:opacity .3s;overflow-x:hidden}body.loaded{opacity:1}.container{max-width:1200px;min-height:100vh;margin:0 auto;padding:2rem}.header{opacity:0;margin-bottom:3rem;transition:opacity .6s .1s,transform .6s .1s;transform:translateY(-20px)}body.loaded .header{opacity:1;transform:translateY(0)}.header-content{justify-content:space-between;align-items:center;gap:2rem;display:flex}.header-left{flex:1}.header-right{flex-shrink:0}.logo-section{align-items:center;gap:1rem;display:flex}.header-text{flex-direction:column;gap:.25rem;display:flex}.logo-icon{background:linear-gradient(135deg, var(--green-primary), var(--green-secondary));width:42px;height:42px;box-shadow:var(--shadow-green);opacity:0;border-radius:12px;justify-content:center;align-items:center;transition:opacity .5s .3s,transform .5s .3s;display:flex;transform:scale(.8)}body.loaded .logo-icon{opacity:1;animation:2s ease-in-out .8s infinite pulse;transform:scale(1)}.logo-icon svg{width:24px;height:24px;color:var(--bg-primary)}.header h1{background:linear-gradient(135deg, var(--green-primary), var(--green-light));-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;margin:0;font-size:2.5rem;font-weight:700}.subtitle{color:var(--text-secondary);margin:0;font-size:1.1rem}.danantara-logo{filter:drop-shadow(0 4px 8px #0000004d);width:auto;height:55px;transition:transform var(--transition-fast)}.danantara-logo:hover{transform:scale(1.05)}.search-section{opacity:0;transition:opacity .6s .3s,transform .6s .3s;transform:translateY(20px)}body.loaded .search-section{opacity:1;transform:translateY(0)}.search-card{background:var(--bg-card);border:1px solid var(--border-color);box-shadow:var(--shadow-md);transition:all var(--transition-normal);border-radius:16px;max-width:700px;margin:0 auto;padding:2.5rem}.search-card:hover{box-shadow:var(--shadow-lg);border-color:var(--green-primary);transform:translateY(-4px)}.search-card h2{color:var(--text-primary);margin-bottom:.5rem;font-size:1.75rem}.search-description{color:var(--text-muted);margin-bottom:2rem}.search-form{width:100%}.input-group{flex-wrap:wrap;gap:1rem;display:flex}.input-group input{background:var(--bg-tertiary);border:2px solid var(--border-color);min-width:250px;color:var(--text-primary);transition:all var(--transition-fast);border-radius:12px;outline:none;flex:1;padding:1rem 1.5rem;font-size:1rem}.input-group input:focus{border-color:var(--green-primary);box-shadow:0 0 0 3px #4ade801a}.input-group input::placeholder{color:var(--text-muted)}.btn-search{background:linear-gradient(135deg, var(--green-primary), var(--green-secondary));color:var(--bg-primary);cursor:pointer;transition:all var(--transition-fast);box-shadow:var(--shadow-sm);border:none;border-radius:12px;align-items:center;gap:.5rem;padding:1rem 2rem;font-size:1rem;font-weight:600;display:flex}.btn-search:hover{box-shadow:var(--shadow-green);transform:translateY(-2px)}.btn-search:active{transform:translateY(0)}.btn-search svg{width:20px;height:20px}.loading-section{text-align:center;padding:4rem 2rem;animation:.3s fadeIn}.loading-animation{display:inline-block}.shield-loader{width:120px;height:120px;margin:0 auto 2rem;position:relative}.shield-loader svg{width:100%;height:100%;color:var(--green-primary)}.shield-path{stroke-dasharray:300;stroke-dashoffset:300px;animation:2s ease-in-out infinite drawShield}.pulse-circle{transform-origin:50%;animation:2s ease-in-out infinite pulseCircle}.loading-text{color:var(--text-primary);margin-bottom:.5rem;font-size:1.5rem;font-weight:600}.loading-subtext{color:var(--green-primary);font-size:1rem;animation:1.5s ease-in-out infinite fadeInOut}.result-section{animation:.5s fadeInUp}.result-card{background:var(--bg-card);border:1px solid var(--border-color);box-shadow:var(--shadow-md);border-radius:16px;max-width:900px;margin:0 auto;padding:2.5rem}.result-header{border-bottom:1px solid var(--border-color);align-items:center;gap:1.5rem;margin-bottom:2rem;padding-bottom:1.5rem;display:flex}.result-icon{border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:60px;height:60px;display:flex}.result-icon.success{background:linear-gradient(135deg, var(--green-primary), var(--green-secondary));box-shadow:var(--shadow-green)}.result-icon svg{width:32px;height:32px;color:var(--bg-primary)}.result-header h3{margin-bottom:.25rem;font-size:1.75rem}.data-source{color:var(--green-primary);font-size:.95rem;font-weight:500}.result-content{flex-direction:column;gap:28px;margin-bottom:2rem;display:flex}.certificate-number{border:1px solid var(--border-color);text-align:center;background:linear-gradient(135deg,#4ade8014,#4ade8005);border-radius:18px;padding:32px}.section-label{letter-spacing:2px;color:var(--text-muted);text-transform:uppercase;margin-bottom:12px;font-size:.8rem;display:block}.certificate-number h2{color:var(--green-primary);word-break:break-word;font-size:2rem;font-weight:700}.detail-section{background:var(--bg-tertiary);border:1px solid var(--border-color);border-radius:16px;overflow:hidden}.section-title{text-transform:uppercase;letter-spacing:1px;color:var(--green-primary);border-bottom:1px solid var(--border-color);background:#ffffff08;padding:18px 24px;font-size:.85rem;font-weight:700}.detail-row{border-bottom:1px solid var(--border-color);justify-content:space-between;align-items:center;padding:18px 24px;display:flex}.detail-row:last-child{border-bottom:none}.detail-row span{color:var(--text-muted);font-size:.95rem}.detail-row p{color:var(--text-primary);text-align:right;margin:0;font-size:1rem;font-weight:600}.amount-row strong{color:var(--green-primary);font-size:1.25rem;font-weight:700}.status-badge{text-transform:uppercase;letter-spacing:.5px;border-radius:8px;justify-content:center;align-items:center;min-width:90px;padding:.5rem 1rem;display:inline-block;font-size:.9rem!important;font-weight:600!important}.status-aktif{border:1px solid var(--green-primary);background:#4ade8033;color:var(--green-primary)!important}.status-nonaktif{border:1px solid var(--accent-red);background:#ef444433;color:var(--accent-red)!important}.result-actions{border-top:1px solid var(--border-color);justify-content:center;gap:1rem;padding-top:1.5rem;display:flex}.btn-secondary{background:var(--bg-tertiary);color:var(--text-primary);border:2px solid var(--green-primary);cursor:pointer;transition:all var(--transition-fast);border-radius:12px;align-items:center;gap:.5rem;padding:.875rem 2rem;font-size:1rem;font-weight:600;display:flex}.btn-secondary:hover{background:var(--green-primary);color:var(--bg-primary);box-shadow:var(--shadow-green);transform:translateY(-2px)}.btn-secondary svg{width:20px;height:20px}.error-section{text-align:center;padding:3rem 2rem;animation:.5s fadeInUp}.error-card{background:var(--bg-card);border:1px solid var(--border-color);max-width:500px;box-shadow:var(--shadow-md);border-radius:16px;margin:0 auto;padding:3rem 2rem}.error-icon{background:#ef444433;border-radius:50%;justify-content:center;align-items:center;width:80px;height:80px;margin:0 auto 1.5rem;display:flex}.error-icon svg{width:40px;height:40px;color:var(--accent-red)}.error-card h3{color:var(--text-primary);margin-bottom:1rem;font-size:1.75rem}.error-card p{color:var(--text-secondary);margin-bottom:2rem;line-height:1.6}.btn-primary{background:linear-gradient(135deg, var(--green-primary), var(--green-secondary));color:var(--bg-primary);cursor:pointer;transition:all var(--transition-fast);box-shadow:var(--shadow-sm);border:none;border-radius:12px;padding:.875rem 2rem;font-size:1rem;font-weight:600}.btn-primary:hover{box-shadow:var(--shadow-green);transform:translateY(-2px)}.hidden{display:none!important}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes fadeInDown{0%{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeInUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeInOut{0%,to{opacity:.5}50%{opacity:1}}@keyframes pulse{0%,to{box-shadow:0 0 20px #4ade804d}50%{box-shadow:0 0 30px #4ade8099}}@keyframes drawShield{0%{stroke-dashoffset:300px}50%{stroke-dashoffset:0}to{stroke-dashoffset:-300px}}@keyframes pulseCircle{0%,to{r:20;opacity:1}50%{r:30;opacity:.3}}@media (width<=768px){.container{padding:1.5rem}.header-content{flex-direction:column;align-items:flex-start;gap:1.5rem}.header-right{align-self:flex-end}.danantara-logo{height:45px}.header h1{font-size:2rem}.subtitle{font-size:1rem}.search-card,.result-card{padding:1.5rem}.input-group{flex-direction:column}.input-group input{min-width:100%}.btn-search{justify-content:center;width:100%}.info-grid{grid-template-columns:1fr}.result-header{text-align:center;flex-direction:column}.result-actions{flex-direction:column}.btn-secondary{justify-content:center;width:100%}}@media (width<=480px){.header-content{gap:1rem}.logo-section{flex-direction:column;align-items:flex-start;gap:.75rem}.danantara-logo{height:38px}.header h1{font-size:1.75rem}.logo-icon{width:36px;height:36px}.logo-icon svg{width:20px;height:20px}.search-card h2{font-size:1.5rem}.shield-loader{width:100px;height:100px}}.loading-section.active,.result-section.active,.error-section.active{animation:.5s fadeInUp}.mode-selector-container{z-index:1000;opacity:0;flex-direction:column;align-items:flex-end;gap:1rem;transition:opacity .6s .5s,transform .6s .5s;display:flex;position:fixed;bottom:2rem;right:2rem;transform:translateY(20px)}body.loaded .mode-selector-container{opacity:1;transform:translateY(0)}.mode-toggle-btn{background:linear-gradient(135deg, var(--green-primary), var(--green-secondary));width:56px;height:56px;color:var(--bg-primary);cursor:pointer;box-shadow:var(--shadow-lg), var(--shadow-green);transition:all var(--transition-fast);border:none;border-radius:50%;justify-content:center;align-items:center;display:flex}body.loaded .mode-toggle-btn{animation:2s ease-in-out 1s infinite pulse}.mode-toggle-btn:hover{transform:scale(1.1)translateY(-2px);box-shadow:0 8px 32px #0009,0 0 30px #4ade8080}.mode-toggle-btn:active{transform:scale(.95)}.mode-toggle-btn svg{width:28px;height:28px}.mode-selector-panel{background:var(--bg-card);border:1px solid var(--border-color);box-shadow:var(--shadow-lg);transform-origin:100% 100%;border-radius:16px;min-width:320px;max-width:380px;padding:1.5rem;animation:.3s slideInUp}.mode-selector-panel.hidden{display:none}.mode-selector-header{border-bottom:1px solid var(--border-color);justify-content:space-between;align-items:center;margin-bottom:1rem;padding-bottom:1rem;display:flex}.mode-selector-header h3{color:var(--text-primary);margin:0;font-size:1.25rem;font-weight:600}.mode-close-btn{border:1px solid var(--border-color);width:32px;height:32px;color:var(--text-secondary);cursor:pointer;transition:all var(--transition-fast);background:0 0;border-radius:8px;justify-content:center;align-items:center;display:flex}.mode-close-btn:hover{background:var(--bg-tertiary);border-color:var(--accent-red);color:var(--accent-red)}.mode-close-btn svg{width:18px;height:18px}.mode-options{flex-direction:column;gap:.75rem;display:flex}.mode-option{background:var(--bg-tertiary);border:2px solid var(--border-color);cursor:pointer;transition:all var(--transition-fast);text-align:left;border-radius:12px;align-items:center;gap:1rem;width:100%;padding:1rem;display:flex}.mode-option:hover{border-color:var(--green-primary);background:var(--bg-secondary);transform:translate(-4px)}.mode-option.active{border-color:var(--green-primary);background:linear-gradient(135deg,#4ade801a,#22c55e1a);box-shadow:0 0 0 3px #4ade801a}.mode-option.active .mode-icon{background:linear-gradient(135deg, var(--green-primary), var(--green-secondary));color:var(--bg-primary)}.mode-icon{background:var(--bg-card);border:1px solid var(--border-color);width:44px;height:44px;transition:all var(--transition-fast);border-radius:10px;flex-shrink:0;justify-content:center;align-items:center;display:flex}.mode-icon svg{width:24px;height:24px;color:var(--text-primary)}.mode-option.active .mode-icon svg{color:var(--bg-primary)}.mode-info{flex-direction:column;flex:1;gap:.25rem;display:flex}.mode-name{color:var(--text-primary);font-size:1rem;font-weight:600}.mode-desc{color:var(--text-muted);font-size:.85rem}@keyframes slideInUp{0%{opacity:0;transform:translateY(20px)scale(.95)}to{opacity:1;transform:translateY(0)scale(1)}}@media (width<=768px){.mode-selector-container{bottom:1.5rem;right:1.5rem}.mode-toggle-btn{width:52px;height:52px}.mode-toggle-btn svg{width:24px;height:24px}.mode-selector-panel{min-width:280px;max-width:calc(100vw - 3rem);padding:1.25rem}.mode-selector-header h3{font-size:1.1rem}.mode-option{padding:.875rem}.mode-icon{width:40px;height:40px}.mode-icon svg{width:22px;height:22px}.mode-name{font-size:.95rem}.mode-desc{font-size:.8rem}}@media (width<=480px){.mode-selector-container{bottom:1rem;right:1rem}.mode-toggle-btn{width:48px;height:48px}.mode-toggle-btn svg{width:22px;height:22px}.mode-selector-panel{min-width:260px;padding:1rem}.mode-option{gap:.75rem;padding:.75rem}}