:root{--primary: #2563EB;--secondary: #0F172A;--accent: #06B6D4;--bg-primary: #F8FAFC;--bg-alternate: #FFFFFF;--text-primary: #111827;--text-secondary: #374151;--border: #E2E8F0;--font-main: "Plus Jakarta Sans", sans-serif;--shadow-soft: 0 10px 30px rgba(0, 0, 0, .08);--shadow-hover: 0 20px 40px rgba(0, 0, 0, .12);--radius-card: 20px;--radius-btn: 999px;--pad-section: 120px;--pad-card: 32px;--gap-grid: 24px;--nav-bg: rgba(255, 255, 255, .85);--footer-bg: #0F172A;--grid-color: rgba(226, 232, 240, .7);--transition: all .3s ease}[data-theme=dark]{--primary: #3B82F6;--secondary: #F8FAFC;--accent: #22D3EE;--bg-primary: #0F172A;--bg-alternate: #1E293B;--text-primary: #F1F5F9;--text-secondary: #CBD5E1;--border: #334155;--shadow-soft: 0 10px 30px rgba(0, 0, 0, .5);--shadow-hover: 0 20px 40px rgba(0, 0, 0, .7);--nav-bg: rgba(15, 23, 42, .85);--footer-bg: #0B1120;--grid-color: rgba(51, 65, 85, .4)}*{box-sizing:border-box;margin:0;padding:0}body{font-family:var(--font-main);background-color:var(--bg-primary);color:var(--text-primary);line-height:1.6;overflow-x:hidden;font-weight:400}h1,h2,h3,h4,h5,h6{color:var(--secondary);font-weight:800;line-height:1.2}p{color:var(--text-secondary)}.subtitle{font-weight:500;font-size:1.125rem;color:var(--text-secondary)}.container{max-width:1434px;margin:0 auto;padding:0 24px}section{padding:var(--pad-section) 0}.section-header{text-align:center;margin-bottom:64px}.section-header h2{font-size:2.5rem;margin-bottom:16px}.section-header p{max-width:600px;margin:0 auto}.btn{display:inline-block;padding:12px 28px;border-radius:var(--radius-btn);font-weight:600;text-decoration:none;transition:var(--transition);cursor:pointer;border:none;text-align:center}.btn-primary{background:var(--primary);color:#fff}.btn-primary:hover{background:var(--secondary);color:#fff}.btn-outline{border:1px solid var(--border);color:var(--text-primary);background:transparent}.btn-outline:hover{border-color:var(--primary);color:var(--primary)}.card{background:var(--bg-alternate);border:1px solid var(--border);border-radius:var(--radius-card);padding:var(--pad-card);box-shadow:var(--shadow-soft);transition:var(--transition)}.card:hover{box-shadow:var(--shadow-hover);transform:translateY(-4px)}.badge{display:inline-block;padding:6px 16px;border-radius:var(--radius-btn);background:#06b6d41a;color:var(--accent);font-size:.875rem;font-weight:600;margin-bottom:16px;text-transform:uppercase;letter-spacing:.5px}.navbar{position:fixed;top:0;left:0;right:0;z-index:1000;padding:24px 0;transition:var(--transition);background:transparent}.navbar.scrolled{background:var(--nav-bg);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);padding:16px 0;box-shadow:0 4px 20px #0000000d;border-bottom:1px solid var(--border)}.navbar .container{display:flex;justify-content:space-between;align-items:center}.nav-brand{font-weight:800;font-size:1.5rem;color:var(--secondary);text-decoration:none}.nav-menu{display:flex;gap:32px;list-style:none}.nav-link{color:var(--secondary);text-decoration:none;font-weight:500;font-size:1.05rem;transition:var(--transition)}.nav-link:hover,.nav-link.active{color:var(--primary)}.nav-actions{display:flex;align-items:center;gap:20px}.theme-toggle{background:transparent;border:none;color:var(--text-secondary);font-size:1.25rem;cursor:pointer;transition:var(--transition);display:flex;align-items:center;justify-content:center;padding:4px}.theme-toggle:hover{color:var(--primary)}.lang-switch{display:flex;align-items:center}.lang-toggle{font-weight:600;color:var(--text-secondary);text-decoration:none;font-size:.95rem;transition:var(--transition)}.lang-toggle.active{color:var(--primary)}.hero{min-height:100vh;display:flex;align-items:center;position:relative;overflow:hidden;background-image:linear-gradient(to right,var(--grid-color) 1px,transparent 1px),linear-gradient(to bottom,var(--grid-color) 1px,transparent 1px);background-size:140px 150px}.hero-content{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}.hero-text h1{font-size:4rem;margin-bottom:24px}.hero-text .typing{color:var(--primary)}.cursor{display:inline-block;width:3px;background-color:var(--primary);animation:blink 1s infinite}@keyframes blink{0%,to{opacity:1}50%{opacity:0}}.hero-text p{font-size:1.125rem;margin-bottom:40px;max-width:500px}.hero-actions{display:flex;gap:16px}.hero-image{position:relative}.hero-image img{width:100%;border-radius:var(--radius-card);object-fit:cover;box-shadow:var(--shadow-soft)}.hero-ornament{position:absolute;width:300px;height:300px;border-radius:50%;background:var(--accent);filter:blur(120px);opacity:.15;z-index:-1;top:-50px;right:-50px}.about-grid{display:grid;grid-template-columns:1fr 1.2fr;gap:64px;align-items:center}.about-image img{width:100%;border-radius:var(--radius-card);box-shadow:var(--shadow-soft)}.about-text h2{font-size:2.5rem;margin-bottom:24px}.about-text p{margin-bottom:16px;font-size:1.05rem}.exp-wrapper{background-color:transparent;padding:40px 0;border-radius:16px;margin:0 auto}[data-theme=dark] .exp-wrapper{background-color:transparent}.exp-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}.exp-item{background:#fff;border:1px solid rgba(30,111,255,.4);border-radius:12px;padding:40px 24px 24px;position:relative;transition:var(--transition);overflow:hidden}[data-theme=dark] .exp-item{background:var(--bg-alternate);border-color:#1e6fff4d}.exp-item:hover{transform:translateY(-4px);box-shadow:var(--shadow-soft)}.exp-badge{position:absolute;top:0;left:0;background:#1e6fff;color:#fff;font-weight:800;padding:8px 16px;border-radius:0 0 12px;font-size:.95rem}.exp-title{color:#0d1b2a;font-size:1.25rem;font-weight:800;margin-bottom:6px}[data-theme=dark] .exp-title{color:var(--text-primary)}.exp-subtitle{color:#1e6fff;font-weight:600;font-size:.9rem;margin-bottom:12px}.exp-desc{color:#6c757d;font-size:.95rem;line-height:1.6}[data-theme=dark] .exp-desc{color:var(--text-secondary)}.skills-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:48px 24px}.skill-card{text-align:center;background:#fff;border:1px solid rgba(30,111,255,.4);border-radius:12px;padding:40px 24px;transition:var(--transition)}[data-theme=dark] .skill-card{background:var(--bg-alternate);border-color:#1e6fff4d}.skill-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-soft)}.skill-icon{font-size:2.5rem;color:var(--primary);margin-bottom:24px;display:inline-flex;width:80px;height:80px;background:#2563eb0d;border-radius:50%;align-items:center;justify-content:center}.skill-title{font-weight:800;margin-bottom:12px;color:var(--secondary);font-size:1.25rem}.services-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap-grid)}.service-card{display:flex;flex-direction:column;height:100%;background:#fff;border:1px solid rgba(30,111,255,.4);border-radius:12px;padding:56px 24px 24px;position:relative;overflow:hidden}[data-theme=dark] .service-card{background:var(--bg-alternate);border-color:#1e6fff4d}.service-icon{position:absolute;top:0;left:0;background:#1e6fff;color:#fff;padding:12px 20px;border-radius:0 0 12px;display:flex;align-items:center;justify-content:center;font-size:1.25rem;margin-bottom:0}.service-title{font-size:1.25rem;margin-bottom:24px}.service-list{list-style:none;margin-bottom:40px;flex-grow:1}.service-list li{margin-bottom:12px;color:var(--text-secondary);display:flex;align-items:center;gap:12px}.service-list li:before{content:"";font-family:"Font Awesome 6 Free";font-weight:900;color:var(--accent);font-size:.875rem}.portfolio-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap-grid)}.portfolio-card{padding:0;overflow:hidden;display:flex;flex-direction:column;background:#fff;border:1px solid rgba(30,111,255,.4);border-radius:12px}[data-theme=dark] .portfolio-card{background:var(--bg-alternate);border-color:#1e6fff4d}.portfolio-img{width:100%;height:240px;background:#e2e8f0;object-fit:cover}.portfolio-content{padding:32px;flex-grow:1;display:flex;flex-direction:column}.portfolio-category{font-size:.875rem;color:var(--primary);font-weight:600;margin-bottom:12px;text-transform:uppercase;letter-spacing:1px}.portfolio-title{font-size:1.25rem;margin-bottom:16px}.portfolio-desc{margin-bottom:32px;font-size:.95rem;flex-grow:1}.testi-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--gap-grid)}.testi-card{background:var(--bg-alternate);padding:40px;border-radius:var(--radius-card);border:1px solid var(--border)}.testi-text{font-style:italic;margin-bottom:32px;font-size:1.1rem;line-height:1.8}.testi-author{display:flex;align-items:center;gap:16px}.testi-avatar{width:48px;height:48px;border-radius:50%;background:#e2e8f0}.testi-name{font-weight:800;color:var(--secondary)}.testi-role{font-size:.875rem;color:var(--text-secondary)}.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap-grid)}.blog-card{padding:0;overflow:hidden}.blog-img{width:100%;height:200px;background:#e2e8f0;object-fit:cover}.blog-content{padding:32px}.blog-meta{font-size:.875rem;color:var(--text-muted);margin-bottom:12px}.blog-title{font-size:1.25rem;margin-bottom:0}.contact-grid{display:grid;grid-template-columns:3.5fr 6.5fr;gap:64px}.contact-info{display:flex;flex-direction:column;gap:32px}.contact-item{display:flex;align-items:center;gap:20px}.contact-icon{width:56px;height:56px;border-radius:50%;background:var(--bg-alternate);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;color:var(--primary);font-size:1.25rem;transition:var(--transition)}.contact-item:hover .contact-icon{background:var(--primary);color:#fff;border-color:var(--primary)}.contact-item a{color:var(--secondary);text-decoration:none;font-weight:600;font-size:1.1rem}.form-group{margin-bottom:24px}.form-control{width:100%;padding:18px 24px;border-radius:16px;border:1px solid var(--border);background:var(--bg-alternate);font-family:inherit;font-size:1rem;color:var(--text-primary);transition:var(--transition)}.form-control:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 4px #2563eb1a}textarea.form-control{resize:vertical;min-height:160px}footer{background:var(--footer-bg);color:#fff;padding:80px 0 40px}.footer-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:64px}.footer-brand{font-size:1.5rem;font-weight:800;color:#fff;text-decoration:none}.footer-menu{display:flex;gap:32px;list-style:none}.footer-menu a{color:#94a3b8;text-decoration:none;transition:var(--transition);font-weight:500}.footer-menu a:hover{color:#fff}.footer-social{display:flex;gap:20px}.footer-social a{color:#94a3b8;font-size:1.25rem;transition:var(--transition);width:40px;height:40px;display:flex;align-items:center;justify-content:center;border-radius:50%;background:#ffffff0d}.footer-social a:hover{color:#fff;background:var(--primary)}.footer-bottom{text-align:center;color:#64748b;font-size:.875rem;border-top:1px solid rgba(255,255,255,.1);padding-top:40px}.fade-up{opacity:0;transform:translateY(30px);transition:all .6s ease-out}.fade-up.visible{opacity:1;transform:translateY(0)}.fade-left{opacity:0;transform:translate(-30px);transition:all .6s ease-out}.fade-left.visible{opacity:1;transform:translate(0)}.fade-right{opacity:0;transform:translate(30px);transition:all .6s ease-out}.fade-right.visible{opacity:1;transform:translate(0)}.toko-mandiri-divider{height:1px;background:linear-gradient(90deg,#2563eb00,#2563eb33,#2563eb00);margin:80px 0}[data-theme=dark] .toko-mandiri-divider{background:linear-gradient(90deg,#3b82f600,#3b82f640,#3b82f600)}.toko-mandiri-section{margin-top:40px}.comparison-table-wrapper{overflow-x:auto;margin-bottom:64px;max-width:900px;margin-left:auto;margin-right:auto;border-radius:12px;border:1px solid var(--border);box-shadow:var(--shadow-soft)}.comparison-table{width:100%;border-collapse:collapse;text-align:left;background:var(--bg-alternate);font-size:.95rem}.comparison-table th,.comparison-table td{padding:16px 24px;border-bottom:1px solid var(--border)}.comparison-table tr:last-child td{border-bottom:none}.comparison-table th{background:#2563eb08;font-weight:700;color:var(--text-primary)}[data-theme=dark] .comparison-table th{background:#3b82f60d}.comparison-table td.feature{font-weight:600;color:var(--text-primary);width:25%}.comparison-table td.bad{color:#ef4444;background:#ef444403;width:37.5%}.comparison-table td.good{color:#10b981;background:#10b98103;width:37.5%}[data-theme=dark] .comparison-table td.bad{background:#ef444405}[data-theme=dark] .comparison-table td.good{background:#10b98105}.tier-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap-grid);margin-bottom:64px}.tier-card{display:flex;flex-direction:column;height:100%;background:var(--bg-alternate);border:1px solid rgba(37,99,235,.4);border-radius:12px;padding:60px 24px 24px;position:relative;overflow:hidden;box-shadow:var(--shadow-soft);transition:var(--transition)}[data-theme=dark] .tier-card{border-color:#3b82f64d}.tier-card:hover{box-shadow:var(--shadow-hover);transform:translateY(-4px)}.tier-badge{position:absolute;top:0;left:0;background:var(--primary);color:#fff;font-weight:800;padding:10px 20px;border-radius:0 0 12px;font-size:.95rem;letter-spacing:.5px;text-transform:uppercase}.tier-desc{font-size:.95rem;color:var(--text-secondary);margin-bottom:28px;line-height:1.6}.tier-list{list-style:none;padding:0;margin:0 0 24px;flex-grow:1}.tier-list li{margin-bottom:12px;color:var(--text-secondary);display:flex;align-items:center;gap:12px;font-size:.95rem;line-height:1.4}.tier-list li:before{content:"";font-family:"Font Awesome 6 Free";font-weight:900;color:var(--accent);font-size:.875rem}.migration-section{background:#2563eb05;border:1px solid rgba(37,99,235,.15);border-radius:16px;padding:48px 32px;margin-bottom:64px;box-shadow:var(--shadow-soft)}[data-theme=dark] .migration-section{background:#3b82f60a;border-color:#3b82f633}.migration-title{text-align:center;font-size:1.75rem;margin-bottom:40px;font-weight:800}.migration-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}.migration-step{position:relative}.step-num{font-size:2.25rem;font-weight:800;color:var(--primary);opacity:.35;display:block;margin-bottom:8px;font-family:var(--font-main)}.migration-step h4{font-size:1.15rem;margin-bottom:8px;font-weight:700}.migration-step p{font-size:.9rem;color:var(--text-secondary);line-height:1.5}.toko-mandiri-cta{text-align:center;margin-top:40px}@media(max-width:1024px){.hero-text h1{font-size:3rem}.about-grid,.contact-grid{gap:40px}.portfolio-grid,.services-grid,.skills-grid,.blog-grid,.tier-grid{grid-template-columns:repeat(2,1fr)}.migration-grid{grid-template-columns:repeat(2,1fr);gap:32px}}@media(max-width:768px){:root{--pad-section: 80px}.container{padding:0 20px}.hero-content,.about-grid,.contact-grid,.testi-grid{grid-template-columns:1fr;gap:40px}.portfolio-grid,.services-grid,.skills-grid,.blog-grid,.tier-grid,.migration-grid{grid-template-columns:1fr;gap:32px}.nav-menu,.navbar .btn{display:none}.nav-actions{gap:16px}.hero{padding-top:100px;min-height:auto;padding-bottom:60px}.hero-text h1{font-size:2.5rem;margin-bottom:16px}.hero-text p{font-size:1rem;margin-bottom:32px}.section-header{margin-bottom:40px}.section-header h2{font-size:2rem}.exp-grid{grid-template-columns:1fr}.exp-wrapper{padding:24px}.contact-grid{gap:48px}.footer-top{flex-direction:column;gap:40px;text-align:center}.footer-menu{flex-direction:column;gap:16px}}#techstack{background:var(--bg-alternate)}.techstack-grid{display:flex;flex-direction:column;gap:48px}.techstack-category h3.category-title{font-size:1.1rem;font-weight:700;color:var(--primary);margin-bottom:20px;padding-bottom:8px;border-bottom:2px solid rgba(37,99,235,.15);text-transform:uppercase;letter-spacing:1px}[data-theme=dark] .techstack-category h3.category-title{color:#60a5fa;border-bottom-color:#60a5fa33}.tools-row{display:flex;flex-wrap:wrap;gap:10px 28px;align-items:center}.tool-item{display:inline-flex;align-items:center;gap:8px}.tool-icon{height:25px;width:auto;max-width:90px;object-fit:contain;flex-shrink:0}.tool-name{font-size:.875rem;font-weight:600;color:var(--text-secondary);white-space:nowrap;transition:var(--transition)}.tool-item:hover .tool-name{color:var(--primary)}[data-theme=dark] .tool-item:hover .tool-name{color:#60a5fa}@media(max-width:768px){.tools-row{gap:8px 20px}.tool-name{font-size:.8125rem}.techstack-category h3.category-title{font-size:1rem;letter-spacing:.5px}}@property --border-angle{syntax: "<angle>"; inherits: false; initial-value: 0deg;}@keyframes borderRotate{0%{--border-angle: 0deg}to{--border-angle: 360deg}}.exp-item,.skill-card,.service-card,.portfolio-card,.tier-card{border:1px solid transparent!important;background-image:linear-gradient(var(--bg-alternate),var(--bg-alternate)),conic-gradient(from var(--border-angle),var(--primary),transparent 50%,var(--primary))!important;background-size:100% 100%,100% 100%;background-origin:border-box;background-clip:padding-box,border-box;position:relative;overflow:hidden}.exp-item:hover,.skill-card:hover,.service-card:hover,.portfolio-card:hover,.tier-card:hover{animation:borderRotate 2s linear infinite}.section-header .badge,.toko-mandiri-hero .badge,.blog-header-section .badge{display:inline-flex;align-items:center;gap:8px;padding:0!important;background:transparent!important;color:#1e3a8a!important;font-size:.95rem;font-weight:700;margin-bottom:16px;text-transform:uppercase;letter-spacing:1.5px;border-radius:0}.section-header .badge:before,.toko-mandiri-hero .badge:before,.blog-header-section .badge:before,.section-header .badge:after,.toko-mandiri-hero .badge:after,.blog-header-section .badge:after{content:"";display:inline-block;width:10px;height:10px;background-color:var(--primary);border-radius:3px}[data-theme=dark] .section-header .badge,[data-theme=dark] .toko-mandiri-hero .badge,[data-theme=dark] .blog-header-section .badge{color:#60a5fa!important}[data-theme=dark] .section-header .badge:before,[data-theme=dark] .toko-mandiri-hero .badge:before,[data-theme=dark] .blog-header-section .badge:before,[data-theme=dark] .section-header .badge:after,[data-theme=dark] .toko-mandiri-hero .badge:after,[data-theme=dark] .blog-header-section .badge:after{background-color:#3b82f6}.migration-step{position:relative;padding:24px;border-radius:16px;transition:all .3s ease;background:transparent}.step-num{font-size:2.25rem;font-weight:800;color:var(--primary);opacity:.35;display:block;margin-bottom:8px;font-family:var(--font-main);transition:all .3s ease}.migration-step:hover .step-num{opacity:1;color:#1e6fff;transform:translateY(-2px) scale(1.1);text-shadow:0 4px 12px rgba(30,111,255,.3)}.migration-step:nth-child(1):hover{background:#ef444414!important;transform:translateY(-4px)}.migration-step:nth-child(2):hover{background:#f59e0b14!important;transform:translateY(-4px)}.migration-step:nth-child(3):hover{background:#8b5cf614!important;transform:translateY(-4px)}.migration-step:nth-child(4):hover{background:#10b98114!important;transform:translateY(-4px)}[data-theme=dark] .migration-step:nth-child(1):hover{background:#ef444426!important}[data-theme=dark] .migration-step:nth-child(2):hover{background:#f59e0b26!important}[data-theme=dark] .migration-step:nth-child(3):hover{background:#8b5cf626!important}[data-theme=dark] .migration-step:nth-child(4):hover{background:#10b98126!important}.product-wide-cta-card{margin-top:48px;border:1.5px dashed var(--accent)!important;background:linear-gradient(135deg,#2563eb08,#06b6d408);padding:40px;border-radius:var(--radius-card)}.product-wide-cta-card .cta-inner{display:flex;align-items:center;justify-content:space-between;gap:32px;width:100%}.product-wide-cta-card .cta-content{text-align:left;max-width:70%}.product-wide-cta-card .cta-action{flex-shrink:0}@media(max-width:768px){.product-wide-cta-card .cta-inner{flex-direction:column;text-align:center;gap:24px}.product-wide-cta-card .cta-content{max-width:100%;text-align:center}}