@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Sora:wght@500;600;700;800&display=swap');
:root{--navy:#06142d;--navy2:#0b1f43;--red:#ef2b2f;--ink:#10213e;--muted:#66758d}
*{box-sizing:border-box}.home-page{margin:0;background:#f5f8fc;color:var(--ink);font-family:Inter,Segoe UI,sans-serif}.home-page a{text-decoration:none}.home-page img{max-width:100%;display:block}
.home-nav{position:sticky;top:0;z-index:100;background:rgba(5,17,38,.97);border-bottom:1px solid rgba(255,255,255,.08);backdrop-filter:blur(14px)}.home-nav-inner{max-width:1440px;margin:auto;min-height:70px;padding:0 48px;display:flex;align-items:center;gap:34px}.home-brand{display:flex;align-items:center;gap:13px;color:#fff}.brand-mark{width:40px;height:40px;border-radius:9px;background:#ef2b2f;padding:7px;display:grid;place-items:center}.brand-mark img{width:100%;height:100%;object-fit:contain;filter:brightness(0) invert(1)}.brand-copy strong{font-family:Sora;font-size:19px;letter-spacing:-.03em;display:block}.brand-copy em{font-style:normal;color:#ff3b3f}.brand-copy small{display:block;color:#9eabc0;font-size:10px;margin-top:3px}.desktop-nav{display:flex;gap:35px;margin-left:auto}.desktop-nav a{color:#d3dbea;font-size:14px;font-weight:700;padding:25px 0;position:relative}.desktop-nav a.active,.desktop-nav a:hover{color:#fff}.desktop-nav a.active:after{content:"";position:absolute;left:0;right:0;bottom:11px;height:2px;background:#ef2b2f}.home-login{background:#ef2b2f;color:#fff;border-radius:9px;padding:11px 18px;font-weight:800;font-size:13px;box-shadow:0 8px 20px rgba(239,43,47,.2)}.home-login span{font-size:17px;vertical-align:-1px}
.hero-home{position:relative;overflow:hidden;background:radial-gradient(circle at 82% 35%,rgba(31,104,202,.32),transparent 30%),linear-gradient(120deg,#06142d,#0b1e3d 60%,#07152d);color:#fff;padding-bottom:0}.hero-circuit{position:absolute;inset:0;opacity:.22;background-image:linear-gradient(90deg,rgba(61,142,235,.18) 1px,transparent 1px),linear-gradient(rgba(61,142,235,.18) 1px,transparent 1px);background-size:42px 42px;mask-image:linear-gradient(90deg,#000 0%,#000 60%,transparent 100%)}.hero-glow{position:absolute;right:-170px;top:40px;width:690px;height:690px;border-radius:50%;border:1px solid rgba(85,170,255,.18);box-shadow:0 0 0 80px rgba(85,170,255,.025),0 0 0 160px rgba(85,170,255,.018)}.hero-inner{max-width:1340px;margin:auto;min-height:500px;padding:74px 48px 165px;display:grid;grid-template-columns:1.04fr .96fr;align-items:center;gap:25px;position:relative;z-index:2}.hero-content{padding-left:10px}.eyebrow-pill{display:inline-flex;align-items:center;gap:9px;border:1px solid rgba(255,151,151,.55);background:rgba(239,43,47,.13);border-radius:999px;color:#ffb5b5;padding:8px 15px;font-size:12px;font-weight:800;letter-spacing:.08em}.eyebrow-pill span{width:7px;height:7px;border-radius:50%;background:#ff4b50;box-shadow:0 0 12px #ff4b50}.hero-content h1{font-family:Sora,Inter,sans-serif;font-size:48px;line-height:1.12;letter-spacing:-.045em;margin:25px 0 20px;max-width:720px}.hero-content h1 strong{color:#fff}.hero-desc{max-width:700px;color:#c5d0e1;font-size:16px;line-height:1.65;margin:0 0 27px}.hero-actions{display:flex;gap:13px}.btn-home{padding:13px 19px;border-radius:9px;font-weight:800;font-size:13px;display:inline-flex;align-items:center}.btn-home.primary{background:#ef2b2f;color:#fff;box-shadow:0 12px 30px rgba(239,43,47,.22)}.btn-home.ghost{border:1px solid #9fb0c9;background:rgba(255,255,255,.03);color:#fff}.hero-visual{justify-self:end;width:min(610px,100%);filter:drop-shadow(0 25px 45px rgba(0,0,0,.3))}.hero-visual img{width:100%}
.hero-metrics{position:absolute;z-index:5;bottom:0;left:50%;transform:translateX(-50%);width:min(1260px,calc(100% - 96px));background:rgba(7,24,54,.88);border:1px solid rgba(80,158,239,.55);border-radius:16px 16px 0 0;padding:18px 16px;display:grid;grid-template-columns:repeat(4,1fr);gap:0;backdrop-filter:blur(10px)}.metric{display:flex;align-items:center;gap:13px;padding:5px 18px;border-right:1px solid rgba(255,255,255,.15)}.metric:last-child{border:0}.metric-icon{width:58px;height:58px;flex:0 0 58px;border-radius:50%;display:grid;place-items:center;font-weight:900;font-size:17px;background:#fff}.metric-icon.red{color:#ef2b2f;border:2px solid #ef2b2f}.metric-icon.blue{color:#2768c8;border:2px solid #68a5ff}.metric-icon.green{color:#1aa363;border:2px solid #59d795}.metric-icon.orange{color:#e88715;border:2px solid #ffae42}.metric div strong{display:block;font-size:25px;line-height:1.1}.metric div b{display:block;font-size:12px;color:#fff;margin:4px 0}.metric div small{display:block;color:#aebbd0;font-size:10px;line-height:1.35}.metric:nth-child(1) strong{color:#ff4b50}.metric:nth-child(2) strong{color:#4b9dff}.metric:nth-child(3) strong{color:#45c97d}.metric:nth-child(4) strong{color:#ff9c28}
.workflow-section{background:#f4f7fb;padding:78px 48px 76px}.section-head{text-align:center;max-width:850px;margin:0 auto 38px}.section-head>span{color:#ef2b2f;font-size:11px;font-weight:900;letter-spacing:.24em}.section-head h2{font-family:Sora;font-size:29px;margin:9px 0 10px;letter-spacing:-.025em}.section-head p{margin:0;color:#61718a;font-size:15px;line-height:1.6}.workflow-grid{max-width:1260px;margin:auto;display:grid;grid-template-columns:repeat(4,1fr);gap:24px}.step-card{background:#fff;border:1px solid #e2e8f0;border-radius:14px;padding:22px 18px 24px;text-align:center;position:relative;box-shadow:0 14px 30px rgba(20,43,76,.07);transition:.2s}.step-card:hover{transform:translateY(-5px);box-shadow:0 20px 40px rgba(20,43,76,.12)}.step-card .step-no{position:absolute;left:50%;top:-17px;transform:translateX(-50%);width:38px;height:38px;border-radius:50%;display:grid;place-items:center;color:#fff;font-weight:900;border:4px solid #f4f7fb}.step-card.red .step-no{background:#e92c31}.step-card.blue .step-no{background:#2368c8}.step-card.green .step-no{background:#159451}.step-card.orange .step-no{background:#ed850f}.step-card img{width:100%;margin:12px auto 15px;border-radius:12px}.step-card h3{font-size:16px;margin:0 0 8px}.step-card.red h3{color:#df292e}.step-card.blue h3{color:#1760bd}.step-card.green h3{color:#128c4d}.step-card.orange h3{color:#dc790c}.step-card p{margin:0;color:#687790;font-size:13px;line-height:1.55}
.portal-section{background:radial-gradient(circle at 10% 20%,rgba(40,111,205,.16),transparent 25%),linear-gradient(135deg,#06142d,#09204a 55%,#06152e);padding:74px 48px 78px;color:#fff;position:relative;overflow:hidden}.portal-section:before{content:"";position:absolute;inset:0;opacity:.12;background-image:radial-gradient(#55a7ff 1px,transparent 1px);background-size:22px 22px}.section-head.light{position:relative;z-index:1}.section-head.light h2{color:#fff}.section-head.light p{color:#aebbd0}.portal-wrap{max-width:1260px;margin:auto;position:relative;z-index:1}.portal-title{font-size:13px;letter-spacing:.13em;color:#9eb1cb;text-align:left;margin:0 0 16px}.portal-grid{display:grid;gap:18px}.portal-grid.operational{grid-template-columns:repeat(5,1fr)}.role-card{background:#fff;color:#17233a;border-radius:14px;padding:18px 14px 15px;text-align:center;border:2px solid transparent;min-height:286px;display:flex;flex-direction:column;box-shadow:0 14px 32px rgba(0,0,0,.18);transition:.2s}.role-card:hover{transform:translateY(-5px)}.role-card.selected{box-shadow:0 0 0 3px rgba(255,255,255,.25),0 18px 38px rgba(0,0,0,.25)}.role-card.red{border-color:#f04a4f}.role-card.blue{border-color:#3280e2}.role-card.green{border-color:#23a865}.role-card.purple{border-color:#8553d8}.role-card.orange{border-color:#ef951c}.role-card.navy{border-color:#4774b5}.role-card.teal{border-color:#27a8a8}.role-card.gold{border-color:#e3a324}.role-art{height:105px;border-radius:11px;background:linear-gradient(145deg,#f7fbff,#eaf2fb);display:grid;place-items:center;margin-bottom:12px;position:relative;overflow:hidden}.role-art:after{content:"";position:absolute;width:90px;height:90px;border-radius:50%;background:rgba(72,133,207,.12);right:-20px;bottom:-28px}.role-art span,.management-art span{position:relative;z-index:1;width:65px;height:65px;border-radius:50%;display:grid;place-items:center;background:#fff;font-weight:900;font-size:14px;box-shadow:0 7px 18px rgba(31,68,112,.12)}.role-card.red .role-art span{color:#e42b32}.role-card.blue .role-art span{color:#226ac8}.role-card.green .role-art span{color:#149556}.role-card.purple .role-art span{color:#7842c7}.role-card.orange .role-art span{color:#dc790c}.role-card.navy .role-art span{color:#315b93}.role-card.teal .role-art span{color:#118b8b}.role-card.gold .role-art span{color:#bd7a00}.role-card h3{font-size:15px;margin:0 0 7px}.role-card p{font-size:11.5px;color:#6d7a90;line-height:1.5;margin:0 0 13px}.role-button{margin-top:auto;background:#0b1730;color:#fff;border-radius:8px;padding:10px 8px;font-size:12px;font-weight:800}.role-card.selected .role-button{background:#ef2b2f}.management-divider{display:flex;align-items:center;gap:20px;margin:40px 0 17px}.management-divider:before,.management-divider:after{content:"";height:1px;background:rgba(150,181,220,.3);flex:1}.management-divider span{border:1px solid #4e8ed1;background:#123b70;border-radius:8px;padding:7px 24px;font-size:16px;font-weight:800;letter-spacing:.03em}.portal-grid.management{grid-template-columns:repeat(3,1fr);max-width:930px}.management-card{min-height:164px;text-align:left;display:grid;grid-template-columns:145px 1fr;gap:17px;align-items:center;padding:14px}.management-art{height:135px;border-radius:10px;background:linear-gradient(145deg,#eaf4ff,#dceaf8);display:grid;place-items:center}.management-copy h3{font-size:16px;margin-bottom:7px}.management-copy p{margin-bottom:12px}.management-copy .role-button{display:inline-block;padding:9px 18px}
.home-footer{background:#06142d;color:#fff;border-top:1px solid rgba(255,255,255,.14);padding:30px 48px}.footer-main{max-width:1260px;margin:auto;display:flex;align-items:center;justify-content:space-between;gap:30px}.footer-brand{display:flex;align-items:center;gap:15px}.footer-gear{width:55px;height:55px;border-radius:50%;display:grid;place-items:center;background:#152d50;font-size:31px}.footer-brand strong{font-size:13px;line-height:1.35}.footer-brand small{display:block;color:#91a3bd;font-size:11px;line-height:1.45;margin-top:6px}.footer-badges{display:flex;gap:30px}.footer-badges span{display:flex;flex-direction:column;align-items:center;gap:4px;font-size:24px;color:#a9c8ec}.footer-badges small{font-size:10px;color:#c0cada}
@media(max-width:1100px){.home-nav-inner{padding:0 25px}.hero-inner{grid-template-columns:1fr;padding:65px 30px 170px}.hero-visual{display:none}.hero-content{max-width:800px;margin:auto}.workflow-grid{grid-template-columns:repeat(2,1fr)}.portal-grid.operational{grid-template-columns:repeat(3,1fr)}.hero-metrics{width:calc(100% - 50px)}.metric{padding:5px 12px}.metric div small{display:none}.management-card{grid-template-columns:115px 1fr}}
@media(max-width:700px){.home-nav-inner{min-height:62px;padding:0 14px;gap:10px}.brand-mark{width:36px;height:36px}.brand-copy strong{font-size:15px}.brand-copy small,.desktop-nav{display:none}.home-login{margin-left:auto;padding:9px 12px;font-size:11px}.hero-inner{padding:50px 20px 285px}.hero-content h1{font-size:32px}.hero-desc{font-size:14px}.hero-actions{flex-wrap:wrap}.btn-home{font-size:12px}.hero-metrics{width:calc(100% - 28px);grid-template-columns:repeat(2,1fr);padding:12px 5px;border-radius:13px}.metric{border-right:0;border-bottom:1px solid rgba(255,255,255,.1);padding:9px 7px}.metric:nth-child(odd){border-right:1px solid rgba(255,255,255,.1)}.metric:nth-child(3),.metric:nth-child(4){border-bottom:0}.metric-icon{width:42px;height:42px;flex-basis:42px;font-size:13px}.metric div strong{font-size:18px}.metric div b{font-size:10px}.workflow-section,.portal-section{padding:55px 18px}.section-head h2{font-size:25px}.workflow-grid,.portal-grid.operational,.portal-grid.management{grid-template-columns:1fr}.management-card{grid-template-columns:110px 1fr}.footer-main{flex-direction:column;align-items:flex-start}.footer-badges{width:100%;justify-content:space-between}.home-footer{padding:25px 20px}}

/* V6 - Homepage sesuai referensi SmartTeFa Otomotif */
.role-art img{width:auto;height:112px;max-width:92%;object-fit:contain;position:relative;z-index:2;margin:0 auto}
.role-art span,.management-art span{display:none}
.management-art img{width:auto;height:120px;max-width:92%;object-fit:contain;position:relative;z-index:2}
.role-card.selected .role-button{background:#ef2b2f}
@media(max-width:700px){.role-art img{height:110px}.management-art img{height:105px}}