@keyframes letterIn{to{opacity:1;transform:translateY(0)}}@keyframes bounce{0%,to{transform:translateY(0)}50%{transform:translateY(8px)}}@keyframes marquee{0%{transform:translate(0)}to{transform:translate(-50%)}}.template-forma-portofolio{--font-sans:var(--font-family,"DM Sans"), sans-serif;--color-bg:var(--secondary-color,#fafafa);--color-bg-2:#f4f4f5;--color-surface:#fff;--color-surface-2:#f1f1f2;--color-border:#e4e4e7;--color-red:var(--primary-color,#c5002b);--color-red-hover:color-mix(in srgb, var(--primary-color,#c5002b) 85%, black);--color-red-glow:color-mix(in srgb, var(--primary-color,#c5002b) 8%, transparent);--color-white:#18181b;--color-muted:#52525b;--color-muted-2:#a1a1aa;--radius-card:20px;--radius-input:12px;--radius-pill:980px;--shadow-card:0 10px 30px #00000008, 0 1px 3px #00000003, 0 0 0 1px var(--color-border);--shadow-red:0 0 30px var(--color-red-glow);& *{box-sizing:border-box;margin:0;padding:0}& html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased}& body{background:var(--color-bg);color:var(--color-white);font-family:var(--font-sans);font-size:16px;font-weight:400;line-height:1.5;overflow-x:hidden}& a{color:inherit;text-decoration:none}& img{max-width:100%;display:block}& button{cursor:pointer;color:inherit;background:0 0;border:none;font-family:inherit}& ::selection{background:var(--color-red);color:#fff}& #loader{background:var(--color-bg);z-index:9999;justify-content:center;align-items:center;transition:opacity .6s,transform .6s;display:flex;position:fixed;inset:0}& #loader.hidden{opacity:0;pointer-events:none;transform:translateY(-20px)}& #loader .word{letter-spacing:-.03em;font-size:clamp(48px,10vw,96px);font-weight:300}& #loader .word span{opacity:0;animation:.6s forwards letterIn;display:inline-block}& #loader .red{color:var(--color-red)}& #loader .word span{transform:translateY(20px)}& .cursor{border:2px solid var(--color-red);pointer-events:none;z-index:10000;mix-blend-mode:normal;border-radius:50%;width:12px;height:12px;transition:width .2s,height .2s,background .2s,border-color .2s;position:fixed;top:0;left:0;transform:translate(-50%,-50%)}& .cursor.hover{background:#c5002b14;width:40px;height:40px}@media (width<=900px){& .cursor{display:none}& body,& a,& button{cursor:auto}}@media (width>=901px){& body,& a,& button,& input,& textarea{cursor:none}}& #nav{z-index:100;-webkit-backdrop-filter:blur(20px)saturate(180%);border-bottom:1px solid var(--color-border);background:#fafafacc;position:fixed;top:0;left:0;right:0}& .nav-inner{justify-content:space-between;align-items:center;gap:24px;max-width:1280px;margin:0 auto;padding:16px 32px;display:flex}& .wordmark{letter-spacing:-.02em;font-size:18px;font-weight:700}& .wordmark .red{color:var(--color-red)}& .nav-links{gap:32px;display:flex}& .nav-links a{text-transform:uppercase;letter-spacing:.08em;color:var(--color-white);font-size:13px;transition:color .2s}& .nav-links a:hover,& .nav-links a.active{color:var(--color-red)}& .btn{border-radius:var(--radius-pill);white-space:nowrap;justify-content:center;align-items:center;gap:8px;padding:12px 24px;font-size:14px;font-weight:500;transition:all .2s;display:inline-flex}& .btn-primary{background:var(--color-red);color:#fff}& .btn-primary:hover{background:var(--color-red-hover);box-shadow:var(--shadow-red);transform:scale(1.03)}& .btn-outline{color:var(--color-red);border:1.5px solid var(--color-red);background:0 0}& .btn-outline:hover{background:var(--color-red);color:#fff;transform:scale(1.03)}& .btn-lg{padding:16px 32px;font-size:15px}& .hamburger{flex-direction:column;gap:5px;padding:8px;display:none}& .hamburger span{background:var(--color-white);width:24px;height:2px;transition:all .3s}& .mobile-menu{background:var(--color-bg);z-index:200;flex-direction:column;justify-content:center;align-items:center;gap:32px;transition:transform .4s;display:flex;position:fixed;inset:0;transform:translateY(-100%)}& .mobile-menu.open{transform:translateY(0)}& .mobile-menu a{letter-spacing:-.02em;opacity:0;font-size:30px;font-weight:600;transition:all .4s;transform:translateY(20px)}& .mobile-menu.open a{opacity:1;transform:translateY(0)}& .mobile-menu.open a:first-child{transition-delay:.1s}& .mobile-menu.open a:nth-child(2){transition-delay:.15s}& .mobile-menu.open a:nth-child(3){transition-delay:.2s}& .mobile-menu.open a:nth-child(4){transition-delay:.25s}& .mobile-menu.open a:nth-child(5){transition-delay:.3s}& .mobile-menu.open a:nth-child(6){transition-delay:.35s}& .menu-close{color:var(--color-red);font-size:32px;position:absolute;top:24px;right:24px}& section{padding:120px 32px;position:relative}& .container{max-width:1280px;margin:0 auto}& .section-label{font-family:var(--font-mono);color:var(--color-red);letter-spacing:.15em;text-transform:uppercase;margin-bottom:20px;font-size:12px}& .section-title{letter-spacing:-.03em;margin-bottom:16px;font-size:clamp(40px,5vw,64px);font-weight:700;line-height:1.05}& .section-title .red{color:var(--color-red)}& .section-sub{color:var(--color-muted);margin-bottom:56px;font-size:17px}& .divider{background:var(--color-red);opacity:.6;width:120px;height:1px;margin:0 auto 80px}& #hero{background:radial-gradient(ellipse 600px 400px at 10% 20%, #c5002b0a, transparent 60%), var(--color-bg);align-items:center;min-height:100vh;padding-top:120px;display:flex}& .hero-grid{grid-template-columns:1.4fr 1fr;align-items:center;gap:64px;display:grid}& .hero-label{font-family:var(--font-mono);color:var(--color-red);letter-spacing:.15em;text-transform:uppercase;margin-bottom:24px;font-size:13px}& .hero-title{letter-spacing:-.04em;font-size:clamp(42px,6.5vw,84px);font-weight:700;line-height:1.02}& .hero-title .muted{color:var(--color-muted);font-weight:400}& .hero-sub{letter-spacing:-.02em;margin-top:24px;font-size:clamp(24px,3vw,36px);font-weight:500}& .rotator{color:var(--color-red);min-width:280px;transition:opacity .4s;display:inline-block;position:relative}& .hero-desc{color:var(--color-muted);max-width:540px;margin-top:28px;font-size:17px;line-height:1.7}& .hero-cta{flex-wrap:wrap;gap:16px;margin-top:36px;display:flex}& .social-row{gap:12px;margin-top:36px;display:flex}& .social-icon{border:1px solid var(--color-border);width:40px;height:40px;color:var(--color-muted);border-radius:50%;justify-content:center;align-items:center;transition:all .2s;display:inline-flex}& .social-icon:hover{border-color:var(--color-red);color:var(--color-red);box-shadow:var(--shadow-red)}& .social-icon svg{width:18px;height:18px}& .hero-img-wrap{aspect-ratio:4/5;background:linear-gradient(135deg, var(--color-red), #ff5a79);border-radius:28px;width:100%;max-width:460px;margin-left:auto;padding:2.5px;position:relative;box-shadow:0 20px 40px #c5002b1f}& .hero-img-wrap img{object-fit:cover;background:var(--color-surface);border-radius:26px;width:100%;height:100%}& .scroll-indicator{text-align:center;color:var(--color-muted);letter-spacing:.2em;text-transform:uppercase;font-size:11px;font-family:var(--font-mono);position:absolute;bottom:32px;left:50%;transform:translate(-50%)}& .scroll-indicator .arrow{width:18px;height:18px;color:var(--color-red);margin:0 auto 8px;animation:1.8s infinite bounce}& .about-grid{grid-template-columns:1.2fr 1fr;align-items:center;gap:64px;display:grid}& .about-headline{letter-spacing:-.02em;margin-bottom:24px;font-size:clamp(28px,3.2vw,40px);font-weight:600;line-height:1.2}& .about-body{color:var(--color-muted);margin-bottom:32px;font-size:16px;line-height:1.8}& .stat-chips{flex-wrap:wrap;gap:12px;display:flex}& .stat-chip{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-pill);align-items:baseline;gap:10px;padding:12px 24px;display:inline-flex}& .stat-chip .num{color:var(--color-red);font-size:18px;font-weight:700}& .stat-chip .lbl{color:var(--color-white);font-size:14px}& #services{background:var(--color-bg-2)}& .services-grid{grid-template-columns:repeat(4,1fr);gap:24px;display:grid}& .service-card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-card);padding:40px 32px;transition:all .3s}& .service-card:hover{border-color:var(--color-red);transform:translateY(-4px);box-shadow:0 10px 30px #c5002b0d}& .service-icon{width:52px;height:52px;color:var(--color-red);background:#c5002b0f;border-radius:14px;justify-content:center;align-items:center;display:inline-flex}& .service-icon svg{width:24px;height:24px}& .service-title{margin:20px 0 12px;font-size:20px;font-weight:600}& .service-desc{color:var(--color-muted);font-size:15px;line-height:1.7}& .marquee{overflow:hidden;mask-image:linear-gradient(90deg,#0000,#000 10% 90%,#0000)}& .marquee-track{gap:16px;width:max-content;animation:30s linear infinite marquee;display:flex}& .tech-chip{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-pill);white-space:nowrap;align-items:center;gap:10px;padding:12px 22px;font-size:14px;display:inline-flex}& .tech-dot{background:var(--color-red);border-radius:50%;width:8px;height:8px}& #experience{background:var(--color-bg-2)}& .timeline-container{max-width:900px;margin:40px auto 0;padding-left:40px;position:relative}& .timeline-line{background:var(--color-border);width:2px;position:absolute;top:0;bottom:0;left:12px}& .timeline-item{margin-bottom:48px;position:relative}& .timeline-item:last-child{margin-bottom:0}& .timeline-dot{background:var(--color-red);width:10px;height:10px;box-shadow:0 0 12px var(--color-red);z-index:2;border:2px solid var(--color-bg-2);border-radius:50%;position:absolute;top:6px;left:-34px}& .timeline-meta{text-transform:uppercase;letter-spacing:.05em;flex-wrap:wrap;gap:12px;margin-bottom:8px;font-size:13px;font-weight:500;display:flex}& .timeline-period{color:var(--color-red)}& .timeline-location{color:var(--color-muted)}& .timeline-card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-card);padding:24px 28px;transition:transform .3s,border-color .3s,box-shadow .3s}& .timeline-card:hover{box-shadow:var(--shadow-card), var(--shadow-red);border-color:#c5002b33;transform:translateY(-4px)}& .timeline-role{margin-bottom:4px;font-size:20px;font-weight:600}& .timeline-company{color:var(--color-muted);margin-bottom:16px;font-size:15px;font-weight:500}& .timeline-details{flex-direction:column;gap:8px;padding-left:0;list-style:none;display:flex}& .timeline-details li{color:var(--color-muted);padding-left:18px;font-size:14px;line-height:1.6;position:relative}& .timeline-details li:before{content:"—";color:var(--color-red);font-weight:700;position:absolute;left:0}& .skills-grid-categories{grid-template-columns:repeat(auto-fit,minmax(285px,1fr));gap:24px;margin-bottom:56px;display:grid}& .skills-cat-card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-card);padding:24px;transition:transform .3s,border-color .3s}& .skills-cat-card:hover{border-color:#e8002d66;transform:translateY(-3px)}& .skills-cat-title{letter-spacing:.08em;text-transform:uppercase;color:var(--color-white);border-left:3px solid var(--color-red);margin-bottom:16px;padding-left:10px;font-size:14px;font-weight:600}& .skills-cat-list{flex-wrap:wrap;gap:8px;display:flex}& .skills-cat-item{background:var(--color-bg-2);border:1px solid var(--color-border);border-radius:var(--radius-pill);color:var(--color-muted);padding:6px 12px;font-size:13px;transition:background .2s,border-color .2s,color .2s}& .skills-cat-item:hover{background:var(--color-surface-2);border-color:var(--color-muted-2);color:var(--color-white)}@media (width<=600px){& #nav-cv{display:none}}& #portfolio{background:var(--color-bg-2)}& .portfolio-list{flex-direction:column;gap:32px;display:flex}& .portfolio-item{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-card);grid-template-columns:1fr 1fr;transition:all .3s;display:grid;overflow:hidden}& .portfolio-item:hover{border-color:var(--color-red);transform:translateY(-4px);box-shadow:0 20px 40px #0000000f}& .portfolio-item.flip{direction:rtl}& .portfolio-item.flip>*{direction:ltr}& .portfolio-img{object-fit:cover;width:100%;height:100%;min-height:320px}& .portfolio-text{flex-direction:column;justify-content:center;gap:16px;padding:48px;display:flex}& .tag{font-family:var(--font-mono);color:var(--color-red);border-radius:var(--radius-pill);letter-spacing:.05em;background:#c5002b0f;width:fit-content;padding:6px 12px;font-size:12px;display:inline-block}& .portfolio-title{letter-spacing:-.02em;font-size:28px;font-weight:700}& .portfolio-desc{color:var(--color-muted);font-size:15px;line-height:1.7}& .portfolio-desc p{margin-bottom:16px}& .portfolio-desc strong{color:var(--color-white)}& .portfolio-desc h1,& .portfolio-desc h2,& .portfolio-desc h3,& .portfolio-desc h4{color:var(--color-white);margin-top:32px;margin-bottom:16px;font-weight:700}& .portfolio-desc h2{font-size:22px}& .portfolio-desc ul,& .portfolio-desc ol{margin-bottom:16px;padding-left:20px}& .portfolio-desc li{margin-bottom:8px}& .portfolio-desc a{color:var(--color-red);text-decoration:underline}& .portfolio-actions{flex-wrap:wrap;gap:12px;margin-top:8px;display:flex}& .portfolio-date{font-family:var(--font-mono);color:var(--color-red);letter-spacing:.1em;text-transform:uppercase;margin-bottom:12px;font-size:11px}& .btn-share{border:1px solid var(--color-border);width:44px;height:44px;color:var(--color-muted);cursor:pointer;background:0 0;border-radius:50%;justify-content:center;align-items:center;transition:all .3s;display:inline-flex}& .btn-share:hover{color:var(--color-white);border-color:var(--color-red);background:#c5002b14;transform:translateY(-3px)scale(1.05);box-shadow:0 4px 12px #c5002b26}& #contact{background:var(--color-bg-2)}& .contact-grid{grid-template-columns:1.1fr 1fr;gap:32px;display:grid}& .contact-form-wrap{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-card);padding:40px}& .contact-form-wrap h3{margin-bottom:24px;font-size:22px;font-weight:700}& .form-row{grid-template-columns:1fr 1fr;gap:16px;display:grid}& .field{margin-bottom:16px}& .field input,& .field textarea{background:var(--color-surface-2);width:100%;color:var(--color-white);border:1px solid var(--color-border);border-radius:var(--radius-input);padding:14px 18px;font-family:inherit;font-size:15px;transition:all .2s}& .field input::placeholder,& .field textarea::placeholder{color:var(--color-muted)}& .field input:focus,& .field textarea:focus{border-color:var(--color-red);box-shadow:var(--shadow-red);outline:none}& .field textarea{resize:vertical;min-height:120px}& .contact-info{flex-direction:column;gap:16px;display:flex}& .info-row{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-input);align-items:center;gap:16px;padding:16px 20px;display:flex}& .info-icon{background:var(--color-red);color:#fff;border-radius:50%;flex:0 0 40px;justify-content:center;align-items:center;width:40px;height:40px;display:inline-flex}& .info-icon svg{width:18px;height:18px}& .info-row .lbl{color:var(--color-muted);text-transform:uppercase;letter-spacing:.08em;font-size:12px}& .info-row .val{color:var(--color-white);font-size:15px}& .info-row .val.red{color:var(--color-red)}& .social-grid{grid-template-columns:1fr 1fr;gap:12px;margin-top:8px;display:grid}& .social-card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:16px;align-items:center;gap:12px;padding:18px;transition:all .2s;display:flex}& .social-card:hover{border-color:var(--color-red);transform:translateY(-2px)}& .social-card svg{width:22px;height:22px;color:var(--color-red)}& .social-card .name{font-size:14px;font-weight:500}& footer{background:var(--color-bg);border-top:1px solid var(--color-border);padding:40px 32px}& .footer-grid{grid-template-columns:1fr 1fr 1fr;align-items:center;gap:24px;max-width:1280px;margin:0 auto;display:grid}& .footer-tag{color:var(--color-muted);margin-top:6px;font-size:13px}& .footer-copy{color:var(--color-muted);text-align:center;font-size:13px}& .footer-links{justify-content:flex-end;gap:20px;display:flex}& .footer-links a{color:var(--color-muted);font-size:13px;transition:color .2s}& .footer-links a:hover{color:var(--color-red)}& .reveal{opacity:0;transition:opacity .7s,transform .7s;transform:translateY(30px)}& .reveal.visible{opacity:1;transform:translateY(0)}@media (width<=1100px){& .services-grid{grid-template-columns:repeat(2,1fr)}}@media (width<=900px){& section{padding:72px 24px}& .nav-links{display:none}& .hamburger{display:flex}& .hero-grid,& .about-grid,& .contact-grid{grid-template-columns:1fr;gap:48px}& .hero-img-wrap{max-width:320px;margin:0 auto}& .services-grid,& .products-grid{grid-template-columns:1fr}& .portfolio-item,& .portfolio-item.flip{direction:ltr;grid-template-columns:1fr}& .portfolio-img{min-height:220px}& .portfolio-text{padding:32px}& .form-row{grid-template-columns:1fr}& .footer-grid{text-align:center;grid-template-columns:1fr}& .footer-links{justify-content:center}& .hero-title{font-size:38px}}}