@import "https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600;700&display=swap";
:root{--bg-color:#0b0f19;--bg-gradient-start:#080c14;--bg-gradient-end:#0f172a;--panel-bg:#0f172a73;--panel-bg-hover:#0f172a99;--panel-border:#ffffff0d;--panel-border-focus:#06b6d480;--text-main:#f8fafc;--text-secondary:#cbd5e1;--text-muted:#64748b;--text-contrast:#0f172a;--accent-cyan:#06b6d4;--accent-cyan-glow:#06b6d426;--accent-cyan-border:#06b6d44d;--accent-purple:#a855f7;--accent-purple-glow:#a855f726;--accent-purple-border:#a855f74d;--accent-emerald:#10b981;--accent-emerald-glow:#10b98126;--accent-emerald-border:#10b9814d;--accent-amber:#f59e0b;--accent-amber-glow:#f59e0b26;--accent-amber-border:#f59e0b4d;--accent-red:#f43f5e;--accent-red-glow:#f43f5e26;--accent-red-border:#f43f5e4d;--terminal-bg:#030712;--terminal-border:#ffffff08;--space-1:.25rem;--space-2:.5rem;--space-3:.75rem;--space-4:1rem;--space-5:1.5rem;--space-6:2rem;--space-8:3rem;--radius-sm:6px;--radius-md:12px;--radius-lg:16px;--radius-full:9999px;--shadow-sm:0 1px 2px 0 #0000000d;--shadow-md:0 4px 6px -1px #0000001a, 0 2px 4px -1px #0000000f;--shadow-lg:0 10px 15px -3px #0000004d, 0 4px 6px -2px #0000000d;--shadow-glow:0 0 20px #06b6d41a;--shadow-glow-purple:0 0 20px #a855f71a}*{box-sizing:border-box;margin:0;padding:0}body{background-color:var(--bg-color);color:var(--text-main);background-image:radial-gradient(at 0 0,#06b6d412 0,#0000 40%),radial-gradient(at 100% 0,#a855f70d 0,#0000 40%),radial-gradient(at 50% 100%,#10b9810a 0,#0000 50%);background-attachment:fixed;flex-direction:column;min-height:100vh;font-family:Plus Jakarta Sans,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;line-height:1.5;display:flex;overflow-x:hidden}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:var(--bg-color)}::-webkit-scrollbar-thumb{border-radius:var(--radius-full);background:#1e293b}::-webkit-scrollbar-thumb:hover{background:#334155}:focus-visible{outline:2px solid var(--accent-cyan);outline-offset:4px}.navbar{z-index:50;-webkit-backdrop-filter:blur(16px);border-bottom:1px solid var(--panel-border);background:#0b0f19cc;position:sticky;top:0}.navbar-container{width:100%;max-width:1100px;padding:var(--space-4) var(--space-5);justify-content:space-between;align-items:center;margin:0 auto;display:flex}.navbar-brand{color:#fff;align-items:center;gap:var(--space-2);letter-spacing:-.025em;font-size:1.15rem;font-weight:800;text-decoration:none;transition:opacity .2s;display:flex}.navbar-brand:hover{opacity:.9}.brand-dot{background:var(--accent-cyan);width:10px;height:10px;box-shadow:0 0 12px var(--accent-cyan);border-radius:50%}.navbar-links{gap:var(--space-4);align-items:center;display:flex}.nav-link{color:var(--text-secondary);padding:var(--space-1) var(--space-2);font-size:.88rem;font-weight:600;text-decoration:none;transition:color .2s}.nav-link:hover{color:#fff}.nav-link-highlight{border:1px solid var(--accent-cyan-border);padding:var(--space-2) var(--space-4);border-radius:var(--radius-md);background:#06b6d414;font-size:.82rem;transition:all .25s cubic-bezier(.4,0,.2,1);color:var(--accent-cyan)!important}.nav-link-highlight:hover{box-shadow:var(--shadow-glow);background:#06b6d42e;border-color:#06b6d473;color:#fff!important}.app-container{width:100%;max-width:1100px;padding:var(--space-6) var(--space-5);gap:var(--space-5);flex-direction:column;flex-grow:1;margin:0 auto;display:flex}.header{text-align:center;margin-bottom:var(--space-3)}.header h1{letter-spacing:-.05em;background:linear-gradient(135deg, #fff 40%, var(--text-secondary) 70%, var(--accent-cyan) 100%);-webkit-text-fill-color:transparent;margin-bottom:var(--space-2);-webkit-background-clip:text;font-size:2.5rem;font-weight:800}.header p{color:var(--text-secondary);max-width:650px;margin:0 auto;font-size:1rem;line-height:1.6}.card{background:var(--panel-bg);-webkit-backdrop-filter:blur(20px);border:1px solid var(--panel-border);border-radius:var(--radius-lg);padding:var(--space-5);box-shadow:var(--shadow-lg);transition:border-color .2s,box-shadow .2s}.card:hover{border-color:#ffffff14}.form-grid{gap:var(--space-5);grid-template-columns:1fr;display:grid}@media (min-width:768px){.form-grid{grid-template-columns:1fr 1fr}}.input-group{gap:var(--space-3);flex-direction:column;display:flex}.label-row{justify-content:space-between;align-items:center;display:flex}.label-text{color:#fff;letter-spacing:.01em;font-size:.88rem;font-weight:700}.status-badge{color:var(--text-muted);align-items:center;gap:var(--space-1);font-size:.75rem;font-weight:600;display:flex}.status-badge.valid{color:var(--accent-emerald)}.status-badge.invalid{color:var(--accent-amber)}.toggle-tab-container{border-radius:var(--radius-md);background:#0006;border:1px solid #ffffff08;padding:3px;display:flex}.toggle-tab{padding:var(--space-1) var(--space-3);border-radius:var(--radius-sm);color:var(--text-muted);cursor:pointer;background:0 0;border:none;font-size:.75rem;font-weight:700;transition:all .2s cubic-bezier(.4,0,.2,1)}.toggle-tab.active{background:var(--panel-border-focus);color:#fff}.input-wrapper{align-items:center;display:flex;position:relative}.input-field{width:100%;padding:var(--space-3) var(--space-4);border-radius:var(--radius-md);color:#fff;background:#0000004d;border:1px solid #ffffff14;font-family:JetBrains Mono,monospace;font-size:.95rem;transition:all .25s}.input-field:focus{border-color:var(--accent-cyan);box-shadow:var(--shadow-glow);background:#00000073;outline:none}.input-field::placeholder{color:#475569}.input-field:disabled{opacity:.6;cursor:not-allowed}.preview-row{color:var(--text-secondary);padding:var(--space-2) var(--space-3);border-radius:var(--radius-md);word-break:break-all;background:#0003;border:1px solid #ffffff08;align-items:center;font-family:JetBrains Mono,monospace;font-size:.8rem;line-height:1.4;display:flex}.preview-label{color:var(--accent-cyan);margin-right:var(--space-2);flex-shrink:0;font-weight:700}.matrix-visualizer{gap:var(--space-1);padding:var(--space-2);border-radius:var(--radius-md);border:1px solid var(--panel-border);margin-top:var(--space-2);background:#00000040;grid-template-columns:repeat(4,1fr);display:grid}.matrix-cell{border-radius:var(--radius-sm);padding:var(--space-2) 0;text-align:center;color:var(--text-secondary);background:#ffffff05;border:1px solid #ffffff0a;font-family:JetBrains Mono,monospace;font-size:.85rem;transition:all .2s}.matrix-cell.filled{border-color:var(--accent-cyan-border);color:var(--accent-cyan);background:#06b6d414;font-weight:700;box-shadow:inset 0 0 6px #06b6d41a}.matrix-cell.active-key{border-color:var(--accent-purple-border);color:var(--accent-purple);background:#a855f714;font-weight:700;box-shadow:inset 0 0 6px #a855f71a}.matrix-cell-index{color:var(--text-muted);margin-top:2px;font-size:.6rem;display:block}.button-container{margin-top:var(--space-4);justify-content:center;display:flex}.btn-process{justify-content:center;align-items:center;gap:var(--space-2);padding:var(--space-3) var(--space-6);background:linear-gradient(135deg, #fff 0%, var(--text-secondary) 100%);border-radius:var(--radius-md);color:var(--bg-color);cursor:pointer;border:none;font-size:1rem;font-weight:800;transition:all .2s cubic-bezier(.4,0,.2,1);display:inline-flex;box-shadow:0 4px 14px #ffffff26}.btn-process:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 6px 20px #ffffff40}.btn-process:active:not(:disabled){transform:translateY(0)}.btn-process:disabled{color:#475569;cursor:not-allowed;box-shadow:none;background:#1e293b}.btn-midtrans{background:linear-gradient(135deg, var(--accent-cyan) 0%, #0891b2 100%);color:#fff;box-shadow:0 4px 14px #06b6d459}.btn-midtrans:hover:not(:disabled){box-shadow:0 6px 20px #06b6d48c}.terminal-window{background:var(--terminal-bg);border:1px solid var(--terminal-border);border-radius:var(--radius-lg);flex-direction:column;height:480px;transition:border-color .3s;display:flex;overflow:hidden;box-shadow:0 20px 40px #00000080}.terminal-window.active{border-color:var(--accent-cyan-border)}.terminal-header{padding:var(--space-3) var(--space-4);-webkit-user-select:none;user-select:none;background:#0f172a99;border-bottom:1px solid #ffffff0a;justify-content:space-between;align-items:center;display:flex}.terminal-buttons{gap:var(--space-2);display:flex}.terminal-btn{background:#ffffff1f;border-radius:50%;width:12px;height:12px}.terminal-btn.close{background:#ef4444}.terminal-btn.minimize{background:#eab308}.terminal-btn.maximize{background:#22c55e}.terminal-title{color:var(--text-secondary);font-family:JetBrains Mono,monospace;font-size:.8rem;font-weight:500}.terminal-controls{align-items:center;gap:var(--space-2);display:flex}.speed-badge{padding:3px var(--space-2);border-radius:var(--radius-sm);color:var(--text-muted);cursor:pointer;background:0 0;border:1px solid #ffffff0f;font-family:JetBrains Mono,monospace;font-size:.7rem;font-weight:700;transition:all .2s}.speed-badge.active{color:var(--accent-cyan);border-color:var(--accent-cyan-border);background:#06b6d414;box-shadow:0 0 8px #06b6d41a}.speed-badge:hover:not(.active){color:#fff;border-color:#ffffff26}.terminal-body{padding:var(--space-4);gap:var(--space-2);color:var(--text-secondary);scroll-behavior:auto;flex-direction:column;flex-grow:1;font-family:JetBrains Mono,monospace;font-size:.85rem;line-height:1.6;display:flex;overflow-y:auto}.log-line{white-space:pre-wrap;word-break:break-all}.log-welcome{color:var(--accent-cyan);font-weight:700}.log-info{color:var(--text-secondary)}.log-header{color:var(--accent-amber);margin-top:var(--space-3);border-bottom:1px dashed #f59e0b26;padding-bottom:2px;font-weight:700}.log-step-title{color:var(--accent-purple);margin-top:var(--space-2);font-weight:700}.log-matrix{color:#fff;padding:var(--space-2) var(--space-4);border-radius:var(--radius-md);border-left:3px solid var(--accent-purple);margin:var(--space-1) 0;background:#ffffff05;display:inline-block}.log-success{color:var(--accent-emerald);font-weight:700}.log-error{color:var(--accent-red);font-weight:700}.log-poly{color:#d8b4fe;opacity:.95}.cursor-blink{background-color:var(--accent-emerald);vertical-align:middle;width:7px;height:14px;margin-left:3px;animation:1s step-end infinite blink;display:inline-block}@keyframes blink{0%,to{background-color:#0000}50%{background-color:var(--accent-emerald)}}.terminal-status-bar{padding:var(--space-2) var(--space-4);color:var(--text-muted);background:#0006;border-top:1px solid #ffffff08;justify-content:space-between;align-items:center;font-family:JetBrains Mono,monospace;font-size:.72rem;display:flex}.progress-container{align-items:center;gap:var(--space-3);width:45%;display:flex}.progress-bar-bg{border-radius:var(--radius-full);background:#0f172a;flex-grow:1;height:5px;overflow:hidden}.progress-bar-fill{background:linear-gradient(90deg, var(--accent-cyan), var(--accent-purple));width:0%;height:100%;transition:width .15s linear}.download-section{align-items:center;gap:var(--space-4);margin-top:var(--space-3);border:1px solid var(--accent-emerald-border);background:linear-gradient(#10b9810d,#10b98103);flex-direction:column;animation:.5s cubic-bezier(.16,1,.3,1) forwards fadeIn;display:flex;box-shadow:0 12px 30px #10b9810d}.download-title{color:var(--accent-emerald);align-items:center;gap:var(--space-2);font-size:1.2rem;font-weight:800;display:flex}.download-buttons{gap:var(--space-3);flex-wrap:wrap;justify-content:center;display:flex}.btn-download{align-items:center;gap:var(--space-2);padding:var(--space-3) var(--space-5);border-radius:var(--radius-md);color:#fff;cursor:pointer;background:#ffffff05;border:1px solid #ffffff0f;font-size:.88rem;font-weight:600;text-decoration:none;transition:all .2s;display:flex}.btn-download:hover{background:#ffffff0f;border-color:#ffffff1f;transform:translateY(-2px)}.btn-download.docx:hover{background:#3b82f614;border-color:#3b82f6;box-shadow:0 0 12px #3b82f626}.btn-download.pdf:hover{background:#ef444414;border-color:#ef4444;box-shadow:0 0 12px #ef444426}.btn-download.zip:hover{border-color:var(--accent-purple);background:#a855f714;box-shadow:0 0 12px #a855f726}.purchase-grid{gap:var(--space-5);margin-top:var(--space-3);grid-template-columns:1fr;display:grid}@media (min-width:768px){.purchase-grid{grid-template-columns:1fr 1fr}}.pricing-card{border:1px solid var(--panel-border);border-radius:var(--radius-lg);padding:var(--space-5);background:#0f172a4d;flex-direction:column;justify-content:space-between;transition:all .3s cubic-bezier(.16,1,.3,1);display:flex;position:relative;overflow:hidden}.pricing-card:hover{box-shadow:var(--shadow-lg);border-color:#ffffff14;transform:translateY(-4px)}.pricing-card.recommended{border:1px solid var(--accent-cyan-border);background:linear-gradient(#06b6d40a,#06b6d403)}.pricing-card.recommended:hover{border-color:var(--accent-cyan);box-shadow:var(--shadow-glow)}.pricing-badge{border:1px solid var(--accent-cyan-border);color:var(--accent-cyan);letter-spacing:.08em;border-radius:var(--radius-sm);text-transform:uppercase;background:#06b6d414;padding:4px 10px;font-size:.65rem;font-weight:800;position:absolute;top:18px;right:18px}@keyframes fadeIn{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.footer{text-align:center;color:var(--text-muted);padding:var(--space-5) 0;border-top:1px solid var(--panel-border);margin-top:auto;font-size:.8rem}