@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:#06152d;--navy2:#0a2342;--gold:#e8b84b;--gold2:#f5d27b;--red:#ef3b3f;--blue:#4aa1ff;--teal:#29b6aa;--ink:#17253c;--muted:#748198;--line:#d9e1eb}
*{box-sizing:border-box}.home-page{margin:0;background:#07162c;color:#fff;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,18,38,.97);border-bottom:1px solid rgba(232,184,75,.24);backdrop-filter:blur(16px)}.home-nav-inner{max-width:1450px;margin:auto;min-height:68px;padding:0 38px;display:flex;align-items:center;gap:28px}.home-brand{display:flex;align-items:center;gap:11px;color:#fff}.brand-mark{width:40px;height:40px;border-radius:8px;background:#fff;padding:5px;display:grid;place-items:center}.brand-mark img{width:100%;height:100%;object-fit:contain}.brand-copy strong{font-family:Sora;font-size:18px;letter-spacing:-.03em;display:block}.brand-copy em{font-style:normal;color:#f2c55d}.brand-copy small{display:block;color:#9eabc0;font-size:9px;margin-top:2px}.desktop-nav{display:flex;gap:28px;margin-left:auto}.desktop-nav a{color:#b8c4d7;font-size:12px;font-weight:800;padding:24px 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:10px;height:2px;background:var(--gold)}.home-login{background:linear-gradient(135deg,#ed3b40,#b91f28);color:#fff;border-radius:7px;padding:10px 14px;font-size:11px;font-weight:800;border:1px solid rgba(255,255,255,.12);white-space:nowrap}
.hero-home{position:relative;overflow:hidden;background:radial-gradient(circle at 72% 42%,rgba(41,100,157,.32),transparent 35%),linear-gradient(135deg,#06132a,#081d39 60%,#06152c);border-bottom:1px solid rgba(232,184,75,.3)}.hero-grid{position:absolute;inset:0;opacity:.16;background-image:linear-gradient(rgba(232,184,75,.25) 1px,transparent 1px),linear-gradient(90deg,rgba(232,184,75,.25) 1px,transparent 1px);background-size:46px 46px;mask-image:linear-gradient(90deg,#000,transparent 88%)}.hero-inner{max-width:1350px;margin:auto;min-height:485px;padding:62px 40px 72px;display:grid;grid-template-columns:1.05fr .95fr;align-items:center;gap:30px;position:relative}.hero-content{max-width:700px}.eyebrow-pill{display:inline-flex;align-items:center;gap:8px;color:#f3ce74;font-size:10px;font-weight:800;letter-spacing:.14em;border:1px solid rgba(232,184,75,.4);padding:8px 12px;border-radius:99px;background:rgba(232,184,75,.06)}.eyebrow-pill span{width:7px;height:7px;border-radius:50%;background:#eab83f;box-shadow:0 0 14px #eab83f}.hero-content h1{font-family:Sora;font-size:43px;line-height:1.08;letter-spacing:-.04em;margin:20px 0 16px}.hero-content h1 strong{color:#f1c75e}.hero-desc{max-width:600px;color:#aebbd0;font-size:14px;line-height:1.75;margin:0}.hero-actions{display:flex;gap:10px;margin-top:26px}.btn-home{display:inline-flex;align-items:center;border-radius:7px;padding:11px 15px;font-size:11px;font-weight:800}.btn-home.primary{background:linear-gradient(135deg,#e33a3e,#a71e27);color:#fff}.btn-home.ghost{border:1px solid rgba(255,255,255,.22);color:#fff;background:rgba(255,255,255,.04)}.hero-mini-stats{display:flex;gap:22px;margin-top:26px;color:#8293ad;font-size:10px}.hero-mini-stats b{display:block;color:#fff;font-size:16px;margin-bottom:3px}.hero-visual{position:relative}.hero-visual:before{content:"";position:absolute;inset:5% -4% 5% 2%;border:1px solid rgba(232,184,75,.35);border-radius:20px;transform:rotate(-2deg)}.hero-visual img{width:100%;max-height:360px;object-fit:contain;position:relative;filter:drop-shadow(0 24px 35px rgba(0,0,0,.4))}
.feature-strip{background:#07182f;padding:38px 40px 44px;border-bottom:1px solid rgba(255,255,255,.08)}.feature-head{max-width:1300px;margin:0 auto 20px}.feature-head>span,.section-head>span{font-size:9px;color:var(--gold);font-weight:800;letter-spacing:.18em}.feature-head h2,.section-head h2{font-family:Sora;margin:8px 0 7px;font-size:25px;letter-spacing:-.035em}.feature-head p,.section-head p{color:#8797ad;font-size:11px;margin:0;line-height:1.6}.feature-grid{max-width:1300px;margin:auto;display:grid;grid-template-columns:repeat(6,1fr);gap:10px}.feature-grid article{min-height:145px;padding:15px 13px;border:1px solid rgba(208,221,240,.25);border-radius:10px;background:linear-gradient(145deg,#102d4e,#0a203d);box-shadow:0 12px 24px rgba(0,0,0,.16)}.feature-icon{width:38px;height:38px;border-radius:9px;background:linear-gradient(145deg,#fff,#e8eef5);color:#17365c;display:grid;place-items:center;font-weight:900;font-size:13px;margin-bottom:13px}.feature-grid h3{font-size:12px;margin:0 0 6px;color:#fff}.feature-grid p{font-size:9.5px;line-height:1.55;color:#8fa0b7;margin:0}
.workflow-section{background:#f6f8fb;color:var(--ink);padding:52px 40px 58px;border-top:4px solid #caa33e}.section-head.dark{max-width:1320px;margin:0 auto 24px}.section-head.dark h2{color:#17253c}.service-flow{max-width:1320px;margin:auto;display:grid;grid-template-columns:1fr 25px 1fr 25px 1fr 25px 1fr 25px 1fr;gap:9px;align-items:stretch}.flow-card{background:#fff;border:1px solid #dce3ec;border-top:4px solid #5c7898;border-radius:10px;padding:13px;min-height:205px;box-shadow:0 10px 22px rgba(17,39,68,.07);position:relative}.flow-card.red{border-top-color:#e74747}.flow-card.blue{border-top-color:#438fd4}.flow-card.teal{border-top-color:#22a99b}.flow-card.orange{border-top-color:#e99532}.flow-card.gold{border-top-color:#d2a331}.flow-card>b{position:absolute;top:9px;right:10px;color:#aab6c5;font-size:10px}.flow-icon{width:54px;height:54px;border-radius:12px;background:#edf3f9;display:grid;place-items:center;font-size:22px;margin:8px auto 12px}.flow-card h3{text-align:center;font-size:13px;line-height:1.2;margin:0 0 8px}.flow-card p{text-align:center;color:#718097;font-size:9.5px;line-height:1.55;margin:0}.flow-arrow{display:grid;place-items:center;color:#c79c30;font-size:20px;font-weight:900}.status-chips{max-width:1320px;margin:20px auto 0;display:flex;gap:8px;justify-content:center;flex-wrap:wrap}.status-chips span{background:#eaf1f8;border:1px solid #d4dfeb;color:#41556f;padding:7px 10px;border-radius:99px;font-size:9px;font-weight:800}
.tefa-section{background:#081b34;color:#fff;padding:50px 40px 60px;border-top:1px solid rgba(232,184,75,.25)}.tefa-profile{max-width:1320px;margin:auto;display:grid;grid-template-columns:1fr 1.1fr;gap:28px;align-items:center}.tefa-photo{border:1px solid rgba(232,184,75,.45);border-radius:13px;padding:9px;background:#0b2748;overflow:hidden}.tefa-photo img{width:100%;height:230px;object-fit:cover;border-radius:8px}.tefa-copy h3{font-family:Sora;color:#f0c85d;font-size:19px;margin:0 0 10px}.tefa-copy p{color:#aab9cc;font-size:11px;line-height:1.8;margin:0}.tefa-badges{display:flex;gap:8px;flex-wrap:wrap;margin-top:18px}.tefa-badges span{font-size:9px;font-weight:800;color:#e7edf5;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.04);padding:7px 10px;border-radius:7px}.org-title{max-width:1320px;margin:36px auto 15px;color:#f0c85d;font-size:11px;font-weight:900;letter-spacing:.12em}.org-grid{max-width:1320px;margin:auto;display:grid;grid-template-columns:repeat(4,1fr);gap:13px}.org-grid article{background:linear-gradient(145deg,#f8fbff,#dfe9f5);border:1px solid rgba(232,184,75,.65);border-radius:11px;padding:12px;text-align:center;color:#17253c;min-height:190px}.org-grid img{height:115px;width:100%;object-fit:contain;margin:auto}.org-grid h3{font-size:11px;margin:6px 0 3px}.org-grid p{font-size:9px;color:#65758a;margin:0}
.portal-section{background:#07162c;padding:55px 40px}.section-head.light{text-align:center;max-width:900px;margin:0 auto 27px}.section-head.light h2{color:#fff}.portal-grid{max-width:1280px;margin:auto;display:grid;gap:12px}.portal-grid.operational{grid-template-columns:repeat(5,1fr)}.role-card{background:#fff;border:1px solid #d8e0eb;border-radius:10px;padding:12px;display:flex;flex-direction:column;min-height:260px;color:#17253c}.role-art{height:105px;border-radius:8px;background:linear-gradient(145deg,#f7fbff,#e7eef7);display:grid;place-items:center;overflow:hidden;margin-bottom:12px}.role-art img{height:100px;width:100%;object-fit:contain}.role-card h3{font-size:13px;margin:0 0 6px}.role-card p{font-size:10px;line-height:1.5;color:#708096;margin:0 0 12px}.role-button{margin-top:auto;background:#0c1e38;color:#fff;border-radius:7px;padding:9px 8px;text-align:center;font-size:10px;font-weight:900}.role-card.selected .role-button{background:#e5383d}.role-card.red{border-top:3px solid #e5383d}.role-card.blue{border-top:3px solid #438fd4}.role-card.green{border-top:3px solid #23a267}.role-card.purple{border-top:3px solid #8154c7}.role-card.orange{border-top:3px solid #e5952d}.role-card.navy{border-top:3px solid #4774b5}.role-card.teal{border-top:3px solid #2aa7a1}.role-card.gold{border-top:3px solid #d3a52e}.management-divider{max-width:1280px;margin:33px auto 15px;display:flex;align-items:center;gap:12px}.management-divider:before,.management-divider:after{content:"";height:1px;background:rgba(142,174,211,.35);flex:1}.management-divider span{color:#f0c85d;font-size:10px;font-weight:900;letter-spacing:.12em;border:1px solid rgba(232,184,75,.45);padding:7px 15px;border-radius:6px}.portal-grid.management{grid-template-columns:repeat(3,1fr)}.management-card{min-height:160px;display:grid;grid-template-columns:135px 1fr;gap:15px;align-items:center}.management-art{height:132px;border-radius:8px;background:linear-gradient(145deg,#edf5fc,#d8e5f3);display:grid;place-items:center;overflow:hidden}.management-art img{height:120px;width:100%;object-fit:contain}.management-copy h3{font-size:13px}.management-copy .role-button{display:inline-block;padding:8px 14px}
.home-footer{background:#041126;border-top:1px solid rgba(232,184,75,.22);padding:25px 40px;display:flex;justify-content:space-between;align-items:center;gap:20px;color:#fff}.home-footer strong{font-size:11px}.home-footer small{display:block;color:#7f90a8;font-size:9px;margin-top:4px}.footer-badges{display:flex;gap:9px}.footer-badges span{border:1px solid rgba(232,184,75,.35);color:#e8c45e;padding:8px 11px;border-radius:6px;font-size:10px;font-weight:900}
@media(max-width:1100px){.feature-grid{grid-template-columns:repeat(3,1fr)}.service-flow{grid-template-columns:1fr 25px 1fr 25px 1fr}.service-flow .flow-card:nth-of-type(n+4),.service-flow .flow-arrow:nth-of-type(n+7){display:none}.portal-grid.operational{grid-template-columns:repeat(3,1fr)}.tefa-profile{grid-template-columns:1fr}.org-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:700px){.home-nav-inner{min-height:60px;padding:0 14px}.desktop-nav{display:none}.brand-copy strong{font-size:15px}.brand-copy small{display:none}.home-login{margin-left:auto;padding:9px 10px;font-size:10px}.hero-inner{grid-template-columns:1fr;padding:48px 20px 55px}.hero-content h1{font-size:32px}.hero-visual{display:none}.hero-desc{font-size:12px}.hero-mini-stats{gap:13px}.feature-strip,.workflow-section,.tefa-section,.portal-section{padding:42px 17px}.feature-grid,.portal-grid.operational,.portal-grid.management,.org-grid{grid-template-columns:1fr}.feature-grid article{min-height:125px}.service-flow{display:flex;flex-direction:column}.flow-arrow{transform:rotate(90deg);height:10px}.service-flow .flow-card:nth-of-type(n+4),.service-flow .flow-arrow:nth-of-type(n+7){display:block}.tefa-photo img{height:180px}.management-card{grid-template-columns:105px 1fr}.management-art{height:110px}.management-art img{height:100px}.home-footer{padding:22px 17px;flex-direction:column;align-items:flex-start}}

.footer-contact{display:flex;gap:8px;flex-wrap:wrap;align-items:center;justify-content:center;margin:8px 0}.footer-contact a{color:#c9d4e4;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.035);padding:7px 9px;border-radius:7px;font-size:9px;font-weight:700}.footer-contact a:hover{color:#fff;border-color:rgba(232,184,75,.5)}@media(max-width:760px){.home-footer{gap:12px;flex-direction:column;text-align:center}.footer-contact{flex-direction:column;width:100%}.footer-contact a{width:100%;max-width:420px}}

/* =========================================================
   DSH V8 - Supplied Image Assets / Homepage Visual Refresh
   ========================================================= */
.hero-visual{display:flex;align-items:center;justify-content:center;min-height:330px}
.hero-visual:after{content:"TEFA TKR • SMKN 1 CILEGON";position:absolute;right:14px;bottom:14px;padding:7px 10px;border:1px solid rgba(232,184,75,.45);border-radius:6px;background:rgba(4,17,38,.78);color:#f0c85d;font-size:8px;font-weight:900;letter-spacing:.12em;z-index:2}
.hero-visual img{height:300px;max-height:none;object-fit:cover;object-position:center;border-radius:14px;border:1px solid rgba(232,184,75,.42);box-shadow:0 24px 45px rgba(0,0,0,.42);filter:none}
.image-feature-grid article{padding:10px;overflow:hidden}
.image-feature-grid .feature-image{height:88px;border-radius:8px;overflow:hidden;background:#0a203d;margin-bottom:10px;border:1px solid rgba(255,255,255,.12)}
.image-feature-grid .feature-image img{width:100%;height:100%;object-fit:cover;object-position:center}
.image-feature-grid .feature-icon{width:28px;height:22px;border-radius:5px;margin-bottom:8px;background:#eab83f;color:#17253c;font-size:9px}
.image-feature-grid h3{margin-bottom:4px}
.image-feature-grid p{font-size:9px}
.flow-card{padding:10px;overflow:hidden}
.flow-image{height:118px;border-radius:8px;overflow:hidden;background:#eef3f8;border:1px solid #dbe4ed;margin:2px 0 8px}
.flow-image img{width:100%;height:100%;object-fit:cover;object-position:center}
.flow-card .flow-icon{width:28px;height:22px;border-radius:5px;margin:0 auto 8px;background:#162f4f;color:#f0c85d;font-size:9px;font-weight:900}
.flow-card h3{font-size:12px}
.tefa-photo{position:relative}
.tefa-photo:after{content:"PROFIL TEFA TKR";position:absolute;left:18px;bottom:18px;padding:7px 10px;border-radius:6px;background:rgba(4,17,38,.78);border:1px solid rgba(232,184,75,.45);color:#f0c85d;font-size:8px;font-weight:900;letter-spacing:.12em}
.tefa-photo img{height:245px;object-fit:cover;object-position:center}
.org-grid article{display:flex;flex-direction:column;justify-content:flex-start;overflow:hidden}
.org-grid img{height:130px;object-fit:contain;background:linear-gradient(145deg,#f8fbff,#e4edf7);border-radius:7px}
@media(max-width:1100px){.hero-visual img{height:260px}.flow-image{height:105px}}
@media(max-width:700px){.hero-visual{display:flex;min-height:0;margin-top:18px}.hero-visual img{width:100%;height:auto;max-height:210px;object-fit:cover}.hero-visual:before{inset:0}.hero-visual:after{right:8px;bottom:8px}.image-feature-grid .feature-image{height:145px}.flow-image{height:190px}.tefa-photo img{height:190px}.org-grid img{height:180px}}

/* Alur layanan pelanggan — image/card synchronization */
.workflow-section .service-flow{align-items:stretch}
.workflow-section .flow-card{display:flex;flex-direction:column;min-width:0}
.workflow-section .flow-image{height:150px;aspect-ratio:16/9;margin:4px 0 10px;flex:0 0 auto;background:#edf2f7;border-radius:9px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.65)}
.workflow-section .flow-image img{display:block;width:100%;height:100%;object-fit:cover;object-position:center;border-radius:8px}
.workflow-section .flow-icon{flex:0 0 auto}
.workflow-section .flow-card h3{min-height:30px;display:flex;align-items:center;justify-content:center}
.workflow-section .flow-card p{margin-top:auto;min-height:44px;display:flex;align-items:flex-start;justify-content:center}
@media(max-width:1100px){.workflow-section .flow-image{height:125px}}
@media(max-width:700px){.workflow-section .flow-image{height:190px;aspect-ratio:auto}.workflow-section .flow-card h3{min-height:0}.workflow-section .flow-card p{min-height:0}}