@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&display=swap');
:root{--red:#ff283e;--bg:#101113;--panel:#191a1e;--muted:#96989f;--line:#2a2b30}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:#f6f5f3;font:15px 'DM Sans',Arial,sans-serif}a{color:inherit;text-decoration:none}button,input,select,textarea{font:inherit}button,a,input,select,textarea{outline-offset:5px}button{cursor:pointer}img{max-width:100%;display:block}h1,h2,h3,.logo{font-family:'Space Grotesk',Arial,sans-serif}h1{font-size:clamp(42px,5.7vw,82px);line-height:1.05;letter-spacing:-4px;margin:24px 0}h2{font-size:36px;letter-spacing:-1.2px;margin:10px 0 20px}h3{font-size:19px}p{color:#aeb0b7;line-height:1.8}.wrap{max-width:1320px;margin:auto;padding:0 48px}.top{font-size:11px;letter-spacing:1px;text-align:center;border-bottom:1px solid var(--line);padding:10px;color:#b6b7bd}.top span{color:var(--red)}nav{display:flex;align-items:center;gap:42px;height:94px;border-bottom:1px solid var(--line)}.logo{font-size:22px;font-weight:700;letter-spacing:-1px;display:flex;align-items:center;gap:10px}.mark{background:var(--red);color:white;clip-path:polygon(0 10%,25% 35%,50% 0,75% 35%,100% 10%,88% 100%,12% 100%);width:29px;height:27px}.logo small{font-size:9px;letter-spacing:3.6px;display:block;color:#aeb0b7;margin-top:4px}.navlinks{display:flex;gap:30px;margin:auto;font-size:13px}.navlinks a.active{color:var(--red)}.bag{border:1px solid #3b3c42;border-radius:30px;padding:12px 18px;font-size:13px}.count{background:var(--red);padding:2px 6px;border-radius:50%;font-size:10px;margin-left:9px}.hero{display:grid;grid-template-columns:1fr 1fr;min-height:610px;align-items:center;position:relative}.eyebrow{color:var(--red);font-size:11px;font-weight:700;letter-spacing:2px;text-transform:uppercase;display:flex;align-items:center;gap:10px}.eyebrow:before{content:'';width:24px;height:2px;background:var(--red)}h1 em{font-style:normal;color:var(--red)}.hero p{max-width:430px}.btn{display:inline-flex;justify-content:center;align-items:center;gap:20px;border:0;background:var(--red);color:white;padding:16px 24px;border-radius:4px;font-size:13px;font-weight:700}.btn:hover{background:#df152d}.btn.outline{background:transparent;border:1px solid #46474e}.actions{display:flex;gap:14px;margin:30px 0}.heroVisual{position:relative;height:530px;margin-left:20px}.heroVisual:before{content:'';position:absolute;inset:30px;background:radial-gradient(ellipse,#79102188,transparent 65%)}.heroVisual img{width:100%;height:100%;object-fit:cover;border-radius:12px;mask-image:linear-gradient(to bottom,transparent,#000 14%,#000 85%,transparent)}.float{position:absolute;bottom:45px;left:0;background:#222327eb;border:1px solid #44454c;padding:18px 22px;border-radius:7px;font-size:12px;backdrop-filter:blur(14px)}.float b{display:block;font-size:18px;margin-bottom:5px}.float span{color:#aaa}.heroNote{font-size:11px;color:#96989f;display:flex;gap:25px}.heroNote b{color:white}.brands{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:27px 0;display:flex;align-items:center;justify-content:space-between;color:#797b83;font-size:24px;font-weight:700;letter-spacing:1px}.brands small{font:10px 'DM Sans',Arial;letter-spacing:2px;max-width:110px;line-height:1.6}.section{padding-top:75px;padding-bottom:75px}.heading{display:flex;justify-content:space-between;align-items:end;margin-bottom:25px}.heading a{font-size:12px;border-bottom:1px solid #777;padding-bottom:7px}.cats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.cat{background:var(--panel);border:1px solid var(--line);padding:25px;border-radius:6px;display:flex;align-items:center;gap:18px;transition:.2s}.cat:hover{border-color:var(--red);transform:translateY(-4px)}.cat i{font-style:normal;font-size:29px;color:var(--red)}.cat b{display:block;font-size:14px}.cat small{color:#8b8e96;font-size:11px}.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}.card{border:1px solid var(--line);border-radius:8px;background:#17181b;overflow:hidden}.photo{height:220px;position:relative;background:#202126;overflow:hidden}.photo img{width:100%;height:100%;object-fit:cover;transition:transform .5s}.card:hover img{transform:scale(1.06)}.badge{position:absolute;top:14px;left:14px;font-size:9px;letter-spacing:1px;background:#ff283e;padding:6px 8px;border-radius:3px}.cardbody{padding:20px}.type{font-size:10px;color:#9698a0;letter-spacing:1.5px;text-transform:uppercase}.card h3{font-size:16px;margin:12px 0 7px}.spec{font-size:11px;color:#93969e;min-height:32px;line-height:1.7}.priceRow{display:flex;align-items:center;justify-content:space-between;margin-top:20px;padding-top:16px;border-top:1px solid var(--line)}.priceRow b{font-size:15px}.add{background:#292a30;color:white;border:1px solid #3b3d43;border-radius:4px;width:34px;height:34px;font-size:22px}.add:hover{background:var(--red)}.campaign{background:linear-gradient(110deg,#831221,#d51e35 65%,#f82b42);display:grid;grid-template-columns:1fr 1fr;align-items:center;border-radius:10px;overflow:hidden}.campaign>div{padding:50px}.campaign p{color:#f5bdc4;max-width:380px}.campaign h2{font-size:42px}.campaign img{width:100%;height:340px;object-fit:cover;mix-blend-mode:screen}.campaign .btn{background:white;color:#a81528}.benefits{display:grid;grid-template-columns:repeat(3,1fr);gap:40px;padding:65px 0}.benefits b{font-size:14px}.benefits p{font-size:12px}.benefits i{font-style:normal;color:var(--red);font-size:23px;display:block;margin-bottom:16px}footer{background:#0b0c0e;border-top:1px solid var(--line);padding-top:55px}.footgrid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:70px;padding-bottom:40px}.footgrid p{font-size:12px;max-width:300px}.footgrid h3{font-size:12px}.footgrid a{display:block;color:#9699a2;font-size:12px;margin:14px 0}.copyright{border-top:1px solid #26272c;padding:22px 0;color:#72757e;display:flex;justify-content:space-between;font-size:10px}.pagehead{padding:55px 0 30px}.pagehead h1{font-size:52px;margin:22px 0;letter-spacing:-2px}.crumb{color:#8d9098;font-size:11px}.toolbar{display:flex;gap:16px;margin:24px 0 32px}.field,select,textarea{background:#1c1d21;border:1px solid #3a3b42;border-radius:4px;padding:14px;color:white;min-width:0}.toolbar .field{flex:1}.detail{display:grid;grid-template-columns:1.1fr 1fr;gap:65px;padding:55px 0}.detail>img{width:100%;height:520px;object-fit:cover;border-radius:10px}.detail h1{font-size:48px;letter-spacing:-2px}.detail .price{font-size:30px;margin:25px 0}.specs{width:100%;border-collapse:collapse;font-size:13px}.specs td{padding:16px 0;border-bottom:1px solid var(--line)}.specs td:first-child{color:#90939c}.cartlayout{display:grid;grid-template-columns:1.7fr 1fr;gap:35px;padding-bottom:80px}.cartitem{display:flex;gap:22px;align-items:center;padding:22px 0;border-bottom:1px solid var(--line)}.cartitem img{width:100px;height:90px;object-fit:cover;border-radius:5px}.cartitem h3{font-size:16px}.cartitem .info{flex:1}.qty{display:flex;align-items:center;gap:12px}.qty button,.remove{background:transparent;color:white;border:1px solid #444;padding:6px 10px}.remove{color:#ff6b79;font-size:11px;margin-top:10px}.summary{background:var(--panel);padding:28px;border:1px solid var(--line);border-radius:8px;height:fit-content}.sumrow{display:flex;justify-content:space-between;padding:16px 0;border-bottom:1px solid var(--line)}.summary .btn{width:100%;margin-top:25px}.notice{font-size:12px;color:#93969e}.empty{padding:55px 0}.contactgrid{display:grid;grid-template-columns:1fr 1fr;gap:65px;padding-bottom:80px}.contactgrid form{display:grid;gap:14px}.contactgrid label{font-size:12px;display:grid;gap:9px}.contactgrid textarea{height:130px;resize:vertical}.story{max-width:750px;padding-bottom:80px}.story p{font-size:17px}.story img{height:330px;width:100%;object-fit:cover;border-radius:8px;margin:30px 0}#toast{position:fixed;bottom:30px;left:50%;transform:translate(-50%,30px);background:#f7f7f7;color:#151515;padding:16px 24px;border-radius:6px;opacity:0;pointer-events:none;transition:.3s;z-index:20;font-size:13px}#toast.show{opacity:1;transform:translate(-50%,0)}.emptyResult{padding:40px;color:#aaa}.menu{display:none}html{scroll-behavior:smooth}@media(min-width:900px){.hero h1{animation:rise .7s both}@keyframes rise{from{opacity:0;transform:translateY(25px)}to{opacity:1;transform:none}}}@media(max-width:1000px){.wrap{padding:0 25px}.grid{grid-template-columns:repeat(2,1fr)}.cats{grid-template-columns:repeat(2,1fr)}nav{gap:20px}.navlinks{gap:18px}.hero h1{font-size:58px}.heroVisual{height:460px}.hero{min-height:550px}.brands{font-size:20px}.detail{gap:30px}.detail>img{height:440px}}@media(max-width:650px){.wrap{padding:0 20px}.top{font-size:9px}nav{height:80px;flex-wrap:wrap}.logo{font-size:18px}.logo small{font-size:7px}.bag{margin-left:auto;font-size:11px}.menu{display:block;background:none;color:white;border:0;font-size:22px}.navlinks{display:none;position:absolute;top:111px;left:0;right:0;background:#191a1e;z-index:10;padding:25px;flex-direction:column}.navlinks.open{display:flex}.hero{grid-template-columns:1fr;padding-top:40px}.hero h1{font-size:54px;letter-spacing:-2.7px}.heroVisual{height:360px;margin:0}.heroNote{font-size:10px}.brands{font-size:14px;gap:15px;flex-wrap:wrap}.brands small{display:none}.section{padding-top:50px;padding-bottom:45px}h2{font-size:28px}.heading a{font-size:10px}.cats{gap:10px}.cat{padding:16px;gap:10px}.cat b{font-size:12px}.cat small{font-size:9px}.grid{gap:12px}.photo{height:155px}.cardbody{padding:13px}.card h3{font-size:14px;line-height:1.4}.priceRow{gap:6px}.priceRow b{font-size:12px}.add{width:29px;height:29px}.spec{font-size:10px}.campaign{grid-template-columns:1fr}.campaign>div{padding:30px}.campaign h2{font-size:35px}.campaign img{height:220px}.benefits{grid-template-columns:1fr;gap:15px;padding:40px 0}.footgrid{grid-template-columns:1fr 1fr;gap:25px}.footgrid>div:first-child{grid-column:1/-1}.copyright{gap:20px;line-height:1.7}.toolbar{flex-wrap:wrap}.toolbar .field{flex-basis:100%}select{flex:1;width:45%;font-size:12px}.pagehead h1{font-size:39px}.detail,.cartlayout,.contactgrid{grid-template-columns:1fr;gap:30px}.detail>img{height:340px}.detail h1{font-size:39px}.cartitem{gap:12px;flex-wrap:wrap}.cartitem img{width:75px}.cartitem h3{font-size:14px}.qty{gap:8px}.story p{font-size:15px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}}
/* Social media and floating email contact */
.footer-social{border-top:1px solid var(--line);padding:26px 0 30px;display:flex;align-items:center;flex-wrap:wrap;gap:20px}.social-label{font-size:10px;color:#9699a2;letter-spacing:1.6px}.social-icons{display:flex;gap:9px;flex-wrap:wrap}.social-icon{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;background:#191a1e;border:1px solid #35363e;color:#dedfe3;border-radius:50%;padding:10px;transition:color .2s,border-color .2s,transform .2s}.social-icon svg{width:20px;height:20px;flex-shrink:0}.social-icon:hover,.social-icon:focus-visible{color:var(--red);border-color:var(--red);transform:translateY(-3px)}.footer-email{margin-left:auto;font-size:12px;color:#b1b3bb;overflow-wrap:anywhere}.footer-email:hover,.contact-email:hover{color:var(--red)}.contact-email{overflow-wrap:anywhere;color:white}.floating-contact{position:fixed;bottom:max(26px,env(safe-area-inset-bottom));right:max(26px,env(safe-area-inset-right));z-index:30;width:58px;height:58px;border-radius:50%;background:var(--red);box-shadow:0 8px 30px #ff283e4d;display:flex;align-items:center;justify-content:center;color:white;border:1px solid #ff7180;transition:transform .2s,background .2s}.floating-contact>svg{width:25px;height:25px}.floating-contact>span{position:absolute;right:70px;white-space:nowrap;background:#24252b;border:1px solid #41434d;padding:9px 13px;border-radius:5px;font-size:12px;opacity:0;pointer-events:none;transition:opacity .2s}.floating-contact:hover,.floating-contact:focus-visible{background:#e3152c;transform:translateY(-3px)}.floating-contact:hover>span,.floating-contact:focus-visible>span{opacity:1}.copyright{padding-bottom:95px}@media(max-width:650px){.footer-social{gap:16px;align-items:flex-start;flex-direction:column}.footer-email{margin-left:0;font-size:11px}.social-icons{gap:8px}.floating-contact{width:52px;height:52px;right:18px;bottom:max(18px,env(safe-area-inset-bottom))}#toast{bottom:88px;width:calc(100% - 40px);text-align:center}.social-icon{width:38px;height:38px}}
/* Image-led product collection */
.collection-card{background:transparent;border:0;border-radius:0;overflow:visible}.collection-card .product-visual{position:relative;border-radius:8px;overflow:hidden;background:#222328}.collection-card .photo{display:block;height:auto;aspect-ratio:1/1.1;border-radius:8px}.collection-card .photo img{width:100%;height:100%;object-fit:cover}.collection-card .badge{top:17px;left:17px;padding:10px 12px;background:#f8f8f8;color:#1b1c22;border-radius:4px;font-size:9px;letter-spacing:.5px;pointer-events:none}.product-cart{position:absolute;bottom:14px;left:14px;right:14px;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px;background:#f8f8f8;color:#18191e;border:0;border-radius:4px;font-size:12px;opacity:0;transform:translateY(8px);transition:opacity .2s,transform .2s,background .2s}.product-cart:hover{background:var(--red);color:white}.product-cart>span:last-child{font-size:19px}.collection-card:hover .product-cart,.collection-card:focus-within .product-cart{opacity:1;transform:none}.collection-card .cardbody{padding:20px 0 5px}.product-meta{display:flex;align-items:center;justify-content:space-between;gap:10px}.collection-card .type{font-size:11px;letter-spacing:0;text-transform:none;color:#9b9ea8}.collection-label{font-size:8px;color:#f2848e;letter-spacing:1.2px}.collection-card h3{font-size:17px;line-height:1.45;margin:13px 0 15px;font-weight:600}.collection-card h3 a:hover{color:var(--red)}.product-price{font-size:18px;font-weight:700;letter-spacing:-.3px;color:var(--red)}.product-stock{display:flex;align-items:center;gap:7px;margin-top:12px;font-size:11px;color:#b6b8c0}.stock-dot{width:6px;height:6px;background:#75cfa5;border-radius:50%;flex-shrink:0}.stock-note{font-size:10px;color:#7f828d}.grid{row-gap:36px;column-gap:26px}@media(hover:none){.product-cart{opacity:1;transform:none}}@media(max-width:650px){.grid{column-gap:15px;row-gap:28px}.collection-card .photo{aspect-ratio:1/1.2}.collection-card .badge{top:10px;left:10px;font-size:7px;padding:7px 8px}.collection-card .cardbody{padding-top:15px}.collection-card h3{font-size:15px;margin:10px 0 12px}.product-meta{gap:5px;align-items:flex-start;flex-wrap:wrap}.collection-card .type{font-size:10px}.collection-label{font-size:7px;letter-spacing:.7px}.product-price{font-size:15px}.product-stock{gap:5px;font-size:10px;flex-wrap:wrap}.product-cart{opacity:1;transform:none;bottom:9px;left:9px;right:9px;font-size:10px;padding:9px}.product-cart>span:last-child{font-size:16px}}
.floating-whatsapp{background:#25d366;border-color:#60e591;box-shadow:0 8px 30px #25d36640}.floating-whatsapp:hover,.floating-whatsapp:focus-visible{background:#1bab54}
/* Original Raja Komputer logo supplied by the store owner. */
a.logo{flex-shrink:0}.brand-image{display:block;width:78px;height:78px;object-fit:contain;border-radius:5px}.footgrid a.logo{display:inline-flex;margin:0}.footgrid .brand-image{width:132px;height:132px}@media(max-width:650px){nav .brand-image{width:64px;height:64px}.footgrid .brand-image{width:116px;height:116px}}
/* Company profile */
.profile-intro{display:grid;grid-template-columns:1fr 1fr;gap:55px;align-items:center;padding:25px 0 60px}.profile-intro>img{width:100%;height:420px;object-fit:cover;border-radius:10px}.profile-section{padding:55px 0;border-top:1px solid var(--line)}.profile-columns{display:grid;grid-template-columns:1fr 1fr;gap:30px}.profile-panel{padding:30px;background:var(--panel);border:1px solid var(--line);border-radius:8px;min-width:0}.profile-panel h2{font-size:29px}.profile-list{padding-left:22px;color:#afb1b9;font-size:14px;line-height:1.8}.profile-list li{padding:8px 0 8px 5px}.profile-list li::marker{color:var(--red)}.profile-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin:30px 0}.profile-grid h3{line-height:1.45}.profile-grid p{font-size:13px}.profile-number{color:var(--red);font-family:'Space Grotesk',Arial,sans-serif;font-size:24px}.profile-solutions>p{max-width:880px}.profile-tags{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}.profile-tags span{border:1px solid #41424b;padding:13px 18px;border-radius:30px;color:#cccdd3;font-size:12px}.profile-cta{padding:40px;margin:20px 0 75px;background:linear-gradient(115deg,#3b141e,#1c1b20);border:1px solid #6c2634;border-radius:10px;display:flex;align-items:center;justify-content:space-between;gap:30px}.profile-cta h2{font-size:30px}.profile-cta .btn{flex-shrink:0}.profile-home{display:grid;grid-template-columns:1fr 1fr;gap:60px;padding:45px 0 60px;border-top:1px solid var(--line)}.profile-home p{margin-top:0}.profile-home h2{font-size:34px}.profile-home .btn{margin-top:10px}@media(max-width:950px){.profile-grid{grid-template-columns:repeat(2,1fr)}.profile-intro{gap:30px}.profile-cta{align-items:flex-start;flex-direction:column}}@media(max-width:650px){.profile-intro,.profile-columns,.profile-home{grid-template-columns:1fr;gap:25px}.profile-intro>img{height:280px}.profile-grid{grid-template-columns:1fr;gap:15px}.profile-section{padding:35px 0}.profile-panel{padding:24px}.profile-cta{padding:25px;margin-bottom:50px}.profile-cta h2,.profile-panel h2,.profile-home h2{font-size:27px}.profile-cta .btn{white-space:normal}.profile-home{padding:35px 0;gap:10px}}
/* Adaptive appearance: system by default; manual choice is remembered. */
:root{--text:#f6f5f3;--secondary:#aeb0b7;--subtle:#9699a2;--footer:#0b0c0e;--field:#1c1d21;--border-strong:#41434d;--surface-hover:#292a30;--float-bg:#222327eb;--profile-gradient:linear-gradient(115deg,#3b141e,#1c1b20)}
:root[data-theme="light"]{--red:#df1731;--bg:#fcfcfd;--panel:#f1f2f5;--muted:#606674;--line:#dfe2e8;--text:#191c25;--secondary:#535b69;--subtle:#636b79;--footer:#f0f1f4;--field:#fff;--border-strong:#c5cad4;--surface-hover:#e8ebf0;--float-bg:#fffffff2;--profile-gradient:linear-gradient(115deg,#fff0f2,#f6f6f9)}
body{color:var(--text)}p{color:var(--secondary)}.top{color:var(--secondary)}.logo small,.cat small,.heroNote,.spec,.type,.crumb,.notice,.social-label,.footer-email,.collection-card .type,.product-stock,.stock-note,.profile-list,.footgrid p,.footgrid a,.copyright{color:var(--subtle)}.heroNote b,.contact-email{color:var(--text)}.bag,.btn.outline{border-color:var(--border-strong)}.btn.outline{color:var(--text)}.float{background:var(--float-bg);border-color:var(--border-strong);color:var(--text)}.float span{color:var(--secondary)}.brands{color:var(--subtle)}.field,select,textarea{background:var(--field);border-color:var(--border-strong);color:var(--text)}input::placeholder,textarea::placeholder{color:var(--subtle);opacity:1}.card{background:var(--panel)}.collection-card{background:transparent}.photo,.collection-card .product-visual{background:var(--panel)}.add{background:var(--surface-hover);border-color:var(--border-strong);color:var(--text)}footer{background:var(--footer)}.copyright{border-color:var(--line)}.qty button,.remove{border-color:var(--border-strong)}.qty button{color:var(--text)}.remove{color:var(--red)}.social-icon{background:var(--panel);border-color:var(--border-strong);color:var(--text)}.profile-tags span{border-color:var(--border-strong);color:var(--secondary)}.profile-cta{background:var(--profile-gradient);border-color:var(--line)}.collection-label{color:var(--red)}.heading a{border-color:var(--border-strong)}.emptyResult{color:var(--secondary)}.theme-picker{flex-shrink:0}.theme-picker select{width:auto;min-width:110px;padding:10px 12px;font-size:12px;border-radius:30px;cursor:pointer}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.campaign .btn{color:#a81528}.campaign p{color:#fff0f2}.btn:hover{color:white}.btn.outline:hover{background:var(--surface-hover);color:var(--text)}.social-icon:hover,.social-icon:focus-visible,.footgrid a:hover,.footer-email:hover{color:var(--red)}:root[data-theme="light"] .stock-dot{background:#248356}:root[data-theme="light"] .heroVisual:before{background:radial-gradient(ellipse,#ff283e22,transparent 65%)}
@media(max-width:1100px){nav{gap:18px}.navlinks{gap:18px}.theme-picker select{min-width:95px;font-size:11px;padding:10px}}@media(max-width:800px) and (min-width:651px){nav{gap:12px}.navlinks{gap:12px;font-size:11px}.bag{font-size:11px;padding:10px}.theme-picker select{min-width:87px;padding:9px 7px}}@media(max-width:650px){nav{gap:10px}.navlinks{background:var(--panel)}.theme-picker{margin-left:auto}.theme-picker select{font-size:10px;padding:9px 7px;min-width:85px}.bag{margin-left:0;padding:10px}.menu{color:var(--text);padding:4px}.count{margin-left:4px}}@media(max-width:360px){nav{gap:6px}.bag{padding:9px 7px}.theme-picker select{min-width:78px}}