:root,[data-theme=light]{--bg-base:#f4f6f1;--bg-surface:#fff;--bg-surface-2:#eef1ea;--bg-glass:#ffffffd1;--bg-glass-hover:#fffffff2;--border:#0000001a;--border-strong:#0000002e;--text-primary:#0e1a12;--text-secondary:#4a5c50;--text-muted:#7a8c80;--brand:#1e6e42;--brand-light:#d4eddc;--brand-dim:#1e6e421f;--warning:#c27c00;--warning-light:#fff3cd;--warning-dim:#c27c001f;--critical:#b82b20;--critical-light:#fde8e6;--critical-dim:#b82b201f;--safe:#1a7a40;--safe-light:#d6f0e0;--shadow-sm:0 2px 8px #0000000f;--shadow-md:0 8px 24px #00000017;--shadow-lg:0 20px 48px #0000001f;--radius-sm:6px;--radius-md:12px;--radius-lg:18px;--radius-xl:24px;--navbar-bg:#ffffffe6}[data-theme=dark]{--bg-base:#0a1510;--bg-surface:#111e16;--bg-surface-2:#192a1f;--bg-glass:#111e16d9;--bg-glass-hover:#192a1ff2;--border:#ffffff14;--border-strong:#ffffff24;--text-primary:#e8f0eb;--text-secondary:#8faa97;--text-muted:#5a7062;--brand:#3ddc7a;--brand-light:#3ddc7a26;--brand-dim:#3ddc7a14;--warning:#f5b731;--warning-light:#f5b73126;--warning-dim:#f5b73114;--critical:#f26b5e;--critical-light:#f26b5e26;--critical-dim:#f26b5e14;--safe:#3ddc7a;--safe-light:#3ddc7a1f;--shadow-sm:0 2px 8px #00000059;--shadow-md:0 8px 24px #00000073;--shadow-lg:0 20px 48px #0000008c;--navbar-bg:#0a1510eb}*,:before,:after{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth}body{background:var(--bg-base);color:var(--text-primary);font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;min-height:100vh;font-family:Inter,ui-sans-serif,system-ui,sans-serif;font-size:15px;font-weight:400;line-height:1.6;transition:background .3s,color .3s}button,input,select,textarea{font:inherit}button{cursor:pointer}button:disabled{cursor:wait;opacity:.65}a{color:inherit;text-decoration:none}img,svg{max-width:100%;display:block}#root{flex-direction:column;min-height:100vh;display:flex}.eyebrow{letter-spacing:.12em;text-transform:uppercase;color:var(--brand);margin-bottom:6px;font-family:Plus Jakarta Sans,sans-serif;font-size:11px;font-weight:700}.page-wrapper{width:min(1200px,100%);margin:0 auto;padding:0 24px 72px}.navbar{z-index:100;background:var(--navbar-bg);border-bottom:1px solid var(--border);-webkit-backdrop-filter:blur(16px);transition:background .3s;position:sticky;top:0}.navbar-inner{align-items:center;gap:32px;width:min(1200px,100%);height:60px;margin:0 auto;padding:0 24px;display:flex}.navbar-brand{color:var(--text-primary);flex-shrink:0;align-items:center;gap:10px;font-family:Plus Jakarta Sans,sans-serif;font-size:18px;font-weight:800;display:flex}.navbar-brand-icon{background:linear-gradient(135deg, var(--brand), #0f9957);width:34px;height:34px;box-shadow:0 2px 10px var(--brand-dim);border-radius:9px;justify-content:center;align-items:center;font-size:16px;display:flex}.navbar-nav{flex:1;align-items:center;gap:4px;display:flex}.nav-link{color:var(--text-secondary);cursor:pointer;background:0 0;border:none;border-radius:8px;padding:6px 14px;font-size:14px;font-weight:500;transition:all .2s}.nav-link:hover{color:var(--text-primary);background:var(--bg-surface-2)}.nav-link.active{color:var(--brand);background:var(--brand-dim);font-weight:600}.navbar-end{align-items:center;gap:10px;margin-left:auto;display:flex}.api-badge{border:1px solid var(--border);color:var(--text-muted);background:var(--bg-surface-2);border-radius:999px;align-items:center;gap:5px;padding:4px 10px;font-size:11px;font-weight:600;display:inline-flex}.api-badge.live{color:var(--safe);border-color:var(--safe-light);background:var(--safe-light)}.api-badge-dot{background:var(--text-muted);border-radius:50%;width:6px;height:6px}.api-badge.live .api-badge-dot{background:var(--safe);animation:1.8s infinite pulse-dot}@keyframes pulse-dot{0%,to{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(.7)}}.theme-toggle{border:1px solid var(--border);background:var(--bg-surface-2);width:36px;height:36px;color:var(--text-secondary);border-radius:9px;flex-shrink:0;justify-content:center;align-items:center;font-size:17px;transition:all .2s;display:flex}.theme-toggle:hover{color:var(--text-primary);background:var(--bg-glass-hover)}.hamburger{border:1px solid var(--border);background:var(--bg-surface-2);width:36px;height:36px;color:var(--text-secondary);border-radius:9px;flex-shrink:0;justify-content:center;align-items:center;font-size:20px;display:none}.mobile-nav{border-top:1px solid var(--border);background:var(--navbar-bg);flex-direction:column;gap:4px;padding:12px 24px 16px;display:none}.mobile-nav.open{display:flex}.mobile-nav .nav-link{text-align:left;width:100%;padding:10px 14px}@media (width<=768px){.hamburger{display:flex}.navbar-nav,.api-badge{display:none}}.dashboard-hero{border-radius:var(--radius-xl);border:1px solid var(--border);background:var(--bg-surface);box-shadow:var(--shadow-lg);grid-template-columns:1fr auto;align-items:center;gap:32px;margin-top:32px;padding:48px;display:grid;position:relative;overflow:hidden}.dashboard-hero:before{content:"";background:radial-gradient(ellipse 70% 80% at 10% 50%, var(--brand-dim), transparent 70%);pointer-events:none;position:absolute;inset:0}.dashboard-hero.waspada:before{background:radial-gradient(ellipse 70% 80% at 10% 50%, var(--warning-dim), transparent 70%)}.dashboard-hero.kritis:before{background:radial-gradient(ellipse 70% 80% at 10% 50%, var(--critical-dim), transparent 70%)}.hero-content{z-index:1;position:relative}.hero-title{color:var(--text-primary);letter-spacing:-.02em;margin-bottom:14px;font-family:Plus Jakarta Sans,sans-serif;font-size:42px;font-weight:800;line-height:1.1}.hero-status-word{color:var(--brand)}.hero-status-word.waspada{color:var(--warning)}.hero-status-word.kritis{color:var(--critical)}.hero-desc{color:var(--text-secondary);max-width:560px;font-size:16px}.hero-signal{z-index:1;border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--bg-glass);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);text-align:center;flex-direction:column;gap:6px;min-width:200px;padding:24px 28px;display:flex;position:relative}.hero-signal-label{color:var(--text-muted);font-size:12px;font-weight:500}.hero-signal-value{color:var(--text-primary);font-family:Plus Jakarta Sans,sans-serif;font-size:22px;font-weight:800}.hero-signal-mode{color:var(--text-muted);font-size:11px}.metric-grid{grid-template-columns:repeat(3,1fr);gap:16px;margin-top:20px;display:grid}.metric-card{border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--bg-surface);box-shadow:var(--shadow-sm);flex-direction:column;gap:10px;padding:24px;transition:transform .2s,box-shadow .2s;animation:.4s both fade-up;display:flex}.metric-card:hover{box-shadow:var(--shadow-md);transform:translateY(-2px)}.metric-card.warning{border-color:var(--warning);box-shadow:0 0 0 1px var(--warning-dim), var(--shadow-sm)}.metric-card.critical{border-color:var(--critical);box-shadow:0 0 0 1px var(--critical-dim), var(--shadow-sm)}.metric-icon{background:var(--brand-dim);border-radius:10px;justify-content:center;align-items:center;width:38px;height:38px;font-size:18px;display:flex}.metric-card.warning .metric-icon{background:var(--warning-dim)}.metric-card.critical .metric-icon{background:var(--critical-dim)}.metric-label{color:var(--text-muted);font-size:13px;font-weight:500}.metric-value{color:var(--text-primary);font-family:Plus Jakarta Sans,sans-serif;font-size:28px;font-weight:800;line-height:1}.metric-detail{color:var(--text-secondary);font-size:13px}.dashboard-grid{grid-template-columns:360px 1fr;align-items:start;gap:20px;margin-top:20px;display:grid}.calculator-panel{border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--bg-surface);box-shadow:var(--shadow-sm);flex-direction:column;gap:18px;padding:28px;display:flex}.panel-header{flex-direction:column;gap:4px;display:flex}.panel-title{color:var(--text-primary);font-family:Plus Jakarta Sans,sans-serif;font-size:20px;font-weight:700}.form-fields{flex-direction:column;gap:14px;display:flex}.field-label{flex-direction:column;gap:6px;display:flex}.field-label span{color:var(--text-secondary);font-size:13px;font-weight:600}.field-input{border:1px solid var(--border-strong);border-radius:var(--radius-sm);background:var(--bg-surface-2);width:100%;height:44px;color:var(--text-primary);outline:none;padding:0 14px;transition:border-color .2s,box-shadow .2s}.field-input:focus{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-dim)}.btn-primary{border-radius:var(--radius-sm);background:linear-gradient(135deg, var(--brand), #0f9957);color:#fff;height:46px;box-shadow:0 4px 14px var(--brand-dim);border:none;justify-content:center;align-items:center;gap:8px;font-size:15px;font-weight:700;transition:opacity .2s,transform .2s,box-shadow .2s;display:flex}.btn-primary:hover:not(:disabled){opacity:.9;box-shadow:0 6px 20px var(--brand-dim);transform:translateY(-1px)}.btn-primary:disabled{background:var(--bg-surface-2);color:var(--text-muted);box-shadow:none}.spinner{border:2px solid #ffffff4d;border-top-color:#fff;border-radius:50%;width:16px;height:16px;animation:.7s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.recommendation-panel{border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--bg-surface);box-shadow:var(--shadow-sm);padding:28px}.recommendation-list{flex-direction:column;gap:12px;margin-top:16px;display:flex}.recommendation-card{border-radius:var(--radius-md);background:var(--bg-surface-2);border-left:4px solid var(--border-strong);flex-direction:column;gap:6px;padding:16px 18px;transition:transform .2s;animation:.35s both fade-up;display:flex}.recommendation-card:hover{transform:translate(2px)}.recommendation-card.high{border-left-color:var(--critical)}.recommendation-card.medium{border-left-color:var(--warning)}.recommendation-card.low{border-left-color:var(--brand)}.rec-header{align-items:center;gap:8px;display:flex}.rec-badge{letter-spacing:.08em;text-transform:uppercase;border-radius:999px;padding:3px 8px;font-size:10px;font-weight:700}.rec-badge.high{background:var(--critical-light);color:var(--critical)}.rec-badge.medium{background:var(--warning-light);color:var(--warning)}.rec-badge.low{background:var(--brand-light);color:var(--brand)}.rec-code{color:var(--text-muted);font-family:monospace;font-size:11px}.rec-title{color:var(--text-primary);font-size:15px;font-weight:600}.rec-message{color:var(--text-secondary);font-size:13px;line-height:1.5}.rec-saving{color:var(--brand);margin-top:2px;font-size:13px;font-weight:700}.forecast-section{border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--bg-surface);margin-top:20px;padding:28px}.section-header{flex-direction:column;gap:4px;margin-bottom:20px;display:flex}.section-title{color:var(--text-primary);font-family:Plus Jakarta Sans,sans-serif;font-size:22px;font-weight:700}.forecast-grid{grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px;display:grid}.forecast-card{border:1px solid var(--border);border-radius:var(--radius-md);background:var(--bg-surface-2);flex-direction:column;gap:14px;padding:20px;transition:transform .2s,box-shadow .2s;animation:.4s both fade-up;display:flex}.forecast-card:hover{box-shadow:var(--shadow-md);transform:translateY(-3px)}.forecast-card-top{justify-content:space-between;align-items:flex-start;gap:12px;display:flex}.forecast-category{color:var(--text-muted);text-transform:uppercase;letter-spacing:.06em;margin-bottom:2px;font-size:11px;font-weight:600}.forecast-name{color:var(--text-primary);font-family:Plus Jakarta Sans,sans-serif;font-size:18px;font-weight:700}.forecast-prices{grid-template-columns:1fr 1fr;gap:10px;display:grid}.price-cell{flex-direction:column;gap:2px;display:flex}.price-cell-label{color:var(--text-muted);font-size:11px}.price-cell-value{color:var(--text-primary);font-family:Plus Jakarta Sans,sans-serif;font-size:17px;font-weight:700}.forecast-meta-row{color:var(--text-muted);flex-wrap:wrap;gap:6px 12px;font-size:12px;display:flex}.status-badge{letter-spacing:.02em;border-radius:999px;flex-shrink:0;align-items:center;gap:5px;padding:4px 10px;font-size:12px;font-weight:700;display:inline-flex}.status-badge.aman{background:var(--safe-light);color:var(--safe)}.status-badge.stabil{background:var(--brand-light);color:var(--brand)}.status-badge.waspada{background:var(--warning-light);color:var(--warning)}.status-badge.kritis{background:var(--critical-light);color:var(--critical)}.products-section{margin-top:32px}.products-page-header{flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:24px;display:flex}.page-title{color:var(--text-primary);letter-spacing:-.02em;margin-bottom:6px;font-family:Plus Jakarta Sans,sans-serif;font-size:30px;font-weight:800}.page-subtitle{color:var(--text-secondary);font-size:15px}.search-wrap{flex-direction:column;gap:6px;min-width:280px;display:flex}.search-wrap label{color:var(--text-secondary);font-size:13px;font-weight:600}.search-input-row{align-items:center;display:flex;position:relative}.search-icon{color:var(--text-muted);pointer-events:none;font-size:15px;position:absolute;left:12px}.search-input{border:1px solid var(--border-strong);border-radius:var(--radius-sm);background:var(--bg-surface-2);width:100%;height:44px;color:var(--text-primary);outline:none;padding:0 14px 0 36px;transition:border-color .2s,box-shadow .2s}.search-input:focus{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-dim)}.filter-chips{flex-wrap:wrap;gap:8px;margin-bottom:16px;display:flex}.chip{border:1px solid var(--border-strong);background:var(--bg-surface-2);color:var(--text-secondary);cursor:pointer;border-radius:999px;padding:5px 14px;font-size:13px;font-weight:500;transition:all .2s}.chip:hover{border-color:var(--brand);color:var(--brand)}.chip.active{background:var(--brand-dim);border-color:var(--brand);color:var(--brand);font-weight:700}.products-toolbar{color:var(--text-muted);margin-bottom:16px;font-size:13px}.products-grid{grid-template-columns:repeat(3,1fr);gap:16px;display:grid}.product-card{border:1px solid var(--border);border-radius:var(--radius-md);background:var(--bg-surface);flex-direction:column;gap:16px;padding:20px;transition:transform .2s,box-shadow .2s;animation:.35s both fade-up;display:flex}.product-card:hover{box-shadow:var(--shadow-md);transform:translateY(-3px)}.product-top{flex-direction:column;gap:2px;display:flex}.product-cat{color:var(--text-muted);text-transform:uppercase;letter-spacing:.06em;font-size:11px;font-weight:600}.product-name{color:var(--text-primary);font-family:Plus Jakarta Sans,sans-serif;font-size:18px;font-weight:700}.product-price-row{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;display:flex}.product-price{color:var(--text-primary);font-family:Plus Jakarta Sans,sans-serif;font-size:22px;font-weight:800}.product-unit{color:var(--text-muted);font-size:13px;font-weight:400}.product-meta-row{color:var(--text-muted);flex-wrap:wrap;gap:12px;font-size:12px;display:flex}.trend-up{color:var(--critical)}.trend-down{color:var(--safe)}.trend-flat{color:var(--text-muted)}.empty-state{text-align:center;border:1px dashed var(--border-strong);border-radius:var(--radius-lg);color:var(--text-muted);grid-column:1/-1;padding:56px 24px}.empty-state h2{color:var(--text-secondary);margin-bottom:6px;font-size:20px;font-weight:600}.about-page{padding-top:40px}.about-hero{border:1px solid var(--border);border-radius:var(--radius-xl);background:var(--bg-surface);margin-bottom:32px;padding:48px;position:relative;overflow:hidden}.about-hero:before{content:"";background:radial-gradient(ellipse 60% 80% at 90% 50%, var(--brand-dim), transparent 70%);pointer-events:none;position:absolute;inset:0}.about-hero-content{z-index:1;max-width:640px;position:relative}.about-title{color:var(--text-primary);letter-spacing:-.02em;margin-bottom:14px;font-family:Plus Jakarta Sans,sans-serif;font-size:38px;font-weight:800;line-height:1.15}.about-desc{color:var(--text-secondary);font-size:16px;line-height:1.7}.team-grid{grid-template-columns:repeat(3,1fr);gap:16px;margin-top:24px;display:grid}.team-card{border:1px solid var(--border);border-radius:var(--radius-md);background:var(--bg-surface);flex-direction:column;gap:8px;padding:24px;transition:transform .2s;animation:.4s both fade-up;display:flex}.team-card:hover{transform:translateY(-2px)}.team-avatar{background:linear-gradient(135deg, var(--brand), #0f9957);border-radius:14px;justify-content:center;align-items:center;width:48px;height:48px;margin-bottom:6px;font-size:22px;display:flex}.team-name{color:var(--text-primary);font-family:Plus Jakarta Sans,sans-serif;font-size:16px;font-weight:700}.team-role{color:var(--brand);font-size:13px;font-weight:600}.team-desc{color:var(--text-secondary);font-size:13px;line-height:1.5}.stack-grid{grid-template-columns:repeat(2,1fr);gap:16px;margin-top:24px;display:grid}.stack-card{border:1px solid var(--border);border-radius:var(--radius-md);background:var(--bg-surface);align-items:flex-start;gap:14px;padding:20px;display:flex}.stack-icon{background:var(--bg-surface-2);border-radius:10px;flex-shrink:0;justify-content:center;align-items:center;width:40px;height:40px;font-size:20px;display:flex}.stack-name{color:var(--text-primary);margin-bottom:4px;font-size:15px;font-weight:700}.stack-desc{color:var(--text-secondary);font-size:13px}@keyframes fade-up{0%{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}@media (width<=1024px){.dashboard-grid{grid-template-columns:1fr}.team-grid{grid-template-columns:repeat(2,1fr)}}@media (width<=900px){.metric-grid,.forecast-grid,.products-grid{grid-template-columns:repeat(2,1fr)}.stack-grid{grid-template-columns:1fr}}@media (width<=640px){.page-wrapper{padding:0 16px 56px}.dashboard-hero{grid-template-columns:1fr;padding:28px 24px}.hero-signal{min-width:unset}.hero-title{font-size:28px}.metric-grid,.forecast-grid,.products-grid,.team-grid{grid-template-columns:1fr}.products-page-header{flex-direction:column;align-items:flex-start}.search-wrap{min-width:unset;width:100%}.about-hero{padding:28px}.about-title{font-size:26px}}