:root{--navy:#27365D;--navy-2:#2D3748;--yellow:#FFB703;--yellow-2:#FFC535;--yellow-300:#FFCF56;--yellow-200:#FFDE8B;--yellow-100:#FFE9B1;--yellow-50:#FFF8E6;--ink:#1E1E1E;--muted:#8E98A8;--line:#E9EBF8;--soft:#FFF8E6;--white:#FFFFFF;--danger:#E53E3E;--green:#48BB78;--process:#1E5598;--shadow:0 12px 36px rgba(39,54,93,.10)}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Inter,Arial,sans-serif;color:var(--ink);background:#fff;font-size:14px;line-height:1.55}a{color:inherit;text-decoration:none}img{display:block;max-width:100%}button,input,select,textarea{font:inherit}.container{width:min(1312px,calc(100% - 64px));margin:auto}.site-header{height:84px;background:#fff;border-bottom:1px solid #eef0f4;position:sticky;top:0;z-index:50}.nav{height:84px;display:flex;align-items:center;justify-content:space-between}.brand img{width:223px;height:48px;object-fit:contain}.nav-links{display:flex;align-items:center;gap:32px;font-size:14px;font-weight:600;color:#1f2d58}.nav-links a{height:84px;display:flex;align-items:center;gap:8px;border-bottom:3px solid transparent}.nav-links a:hover,.nav-links a.active{color:var(--yellow);border-color:var(--yellow)}.home-icon{width:18px;height:18px}.hero{height:720px;position:relative;overflow:hidden;color:#fff}.hero>img{width:100%;height:100%;object-fit:cover}.hero:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(12,25,53,.62),rgba(12,25,53,.04) 72%)}.hero-copy{position:absolute;z-index:2;left:max(64px,calc((100vw - 1312px)/2));top:50%;transform:translateY(-50%);max-width:650px}.hero-copy h1{font-size:52px;line-height:1.12;margin:0 0 18px;font-weight:750}.hero-copy p{font-size:20px;margin:0}.slider-arrow{position:absolute;z-index:3;top:50%;width:44px;height:44px;border:0;border-radius:50%;background:var(--yellow);display:grid;place-items:center}.slider-arrow.prev{left:24px;transform:translateY(-50%) scaleX(-1)}.slider-arrow.next{right:24px;transform:translateY(-50%)}.slider-arrow img{width:8px;height:16px}.bullets{position:absolute;z-index:3;bottom:28px;left:50%;transform:translateX(-50%);display:flex;gap:16px}.bullets i{display:block;width:12px;height:12px;min-width:12px;max-width:12px;border:1px solid #fff;border-radius:50%;background:transparent;filter:drop-shadow(0 4px 4px rgb(0 0 0 / 25%));flex:0 0 12px}.bullets i.active{width:32px;min-width:32px;max-width:32px;height:12px;border-radius:999px;background:#fff;flex:0 0 32px}.section{padding:104px 0}.intro-grid,.service-grid{display:grid;grid-template-columns:1fr 640px;gap:64px;align-items:center}.eyebrow{color:var(--yellow);font-weight:700;margin:0 0 10px}.section-title{font-size:36px;line-height:1.25;color:var(--navy);margin:0 0 20px}.lead{font-size:16px;color:#526074;max-width:610px}.btn{border:0;border-radius:6px;padding:12px 20px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;gap:8px;cursor:pointer}.btn-primary{background:var(--navy);color:#fff}.btn-yellow{background:var(--yellow);color:#fff}.btn-outline{background:#fff;border:1px solid var(--navy);color:var(--navy)}.intro-media{width:640px;height:418px;position:relative;overflow:hidden;border-radius:8px;background:#ddd}.intro-media>img{width:100%;height:100%;object-fit:cover}.play{position:absolute;inset:0;margin:auto;width:52px;height:52px}.steps-title{text-align:center;margin-bottom:56px}.steps-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:48px 24px}.step-card{min-height:152px;border:1px solid #e5e9f1;border-radius:8px;padding:24px;display:flex;align-items:center;gap:20px;background:#fff;box-shadow:0 5px 20px rgba(36,51,101,.04)}.step-card img{width:64px;height:64px;object-fit:contain;flex:none}.step-card b{color:var(--yellow);display:block;margin-bottom:6px}.service{background:var(--navy);color:#fff;position:relative;overflow:hidden}.service-grid{position:relative;z-index:2}.service-photo{width:640px;height:418px;border-radius:8px;object-fit:cover}.service h2{color:#fff}.hours{padding:0;margin:22px 0 28px;list-style:none}.hours li{margin:5px 0}.service-map{position:absolute;right:-30px;top:-118px;width:632px;height:738px;object-fit:contain;opacity:.3;transform:rotate(20deg)}.stats{display:grid;grid-template-columns:1.32fr 1fr 1fr;gap:24px}.stat{height:147px;border-radius:8px;background:var(--yellow);color:#fff;padding:28px 32px;display:flex;align-items:center;gap:18px}.stat:first-child{background:var(--navy)}.stat img{width:38px;height:38px;filter:brightness(0) invert(1)}.stat strong{display:block;font-size:38px;line-height:1}.stat span{font-size:15px}.site-footer{background:#fafafa;padding:56px 0 0}.footer-grid{display:grid;grid-template-columns:1.3fr .7fr .55fr;gap:80px;padding-bottom:46px}.footer-logos{width:502px;height:56px;object-fit:contain;object-position:left}.site-footer h4{color:var(--navy);margin:0 0 18px;font-size:17px}.footer-links{display:grid;gap:10px;color:#526074}.address{margin-top:20px;color:#526074;max-width:520px}.socials{display:flex;gap:10px}.socials a{width:32px;height:32px;border-radius:4px;background:var(--navy);display:grid;place-items:center}.socials img{width:17px;height:17px}.copyright{height:54px;background:var(--navy);color:#fff;display:flex;align-items:center;font-size:12px}.page-hero{background:#f7f8fb;padding:42px 0;border-bottom:1px solid var(--line)}.page-hero h1{color:var(--navy);font-size:32px;margin:0 0 5px}.breadcrumbs{color:#7b8798;font-size:13px}.content-section{padding:64px 0 96px}.panel{border:1px solid var(--line);border-radius:8px;background:#fff;box-shadow:var(--shadow);padding:32px}.panel-title{font-size:20px;color:var(--navy);margin:0 0 28px}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px 24px}.field.full{grid-column:1/-1}.field label{display:block;font-weight:600;color:#39465a;margin-bottom:8px}.required{color:#e11d48}.control{width:100%;height:44px;border:1px solid #d9dee8;border-radius:5px;padding:0 13px;background:#fff;color:#26344d;outline:none}.control:focus{border-color:#668bc2;box-shadow:0 0 0 3px rgba(102,139,194,.14)}textarea.control{height:118px;padding-top:12px;resize:vertical}.editor{border:1px solid #d9dee8;border-radius:5px;overflow:hidden}.editor-toolbar{height:40px;background:#fafafa;border-bottom:1px solid #e5e7eb;padding:8px 12px;color:#7b8798;word-spacing:12px}.editor textarea{border:0;border-radius:0}.file-control{height:92px;border:1px dashed #b9c4d5;border-radius:6px;display:flex;align-items:center;justify-content:center;color:#68768a;background:#fbfcfe}.check{display:flex;align-items:flex-start;gap:10px;color:#556276}.form-actions{display:flex;justify-content:flex-end;gap:12px;margin-top:30px}.form-note{background:#fff8e8;border-left:4px solid var(--yellow);padding:14px 16px;margin-bottom:28px;color:#6f5a2b}.ticket-shell{display:grid;grid-template-columns:300px 1fr;gap:32px}.tracking-card{border:1px solid var(--line);border-radius:8px;background:#fff;overflow:hidden;height:max-content}.tracking-code{background:var(--navy);color:#fff;padding:24px}.tracking-code small{opacity:.8}.tracking-code strong{display:block;font-size:21px;margin-top:4px}.stepper{list-style:none;margin:0;padding:22px}.stepper li{display:flex;gap:12px;min-height:62px;position:relative;color:#7b8798}.stepper li:before{content:"";width:18px;height:18px;border-radius:50%;background:#d9dee8;box-shadow:0 0 0 5px #f4f6f8;flex:none;margin-top:2px}.stepper li:not(:last-child):after{content:"";position:absolute;left:8px;top:24px;width:2px;height:35px;background:#d9dee8}.stepper li.active{color:var(--navy);font-weight:650}.stepper li.active:before,.stepper li.active:not(:last-child):after{background:#668bc2}.stepper li.current:before{background:var(--yellow)}.ticket-main{display:grid;gap:24px}.ticket-header{display:flex;align-items:center;justify-content:space-between}.badge{display:inline-flex;padding:6px 12px;border-radius:99px;font-size:12px;font-weight:700;background:#edf3fb;color:#41699b}.info-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px 30px}.info-item small{display:block;color:#8290a3;margin-bottom:4px}.info-item strong{font-weight:600;color:#2b3850}.stacked-alert{border-radius:8px;padding:24px 26px;background:#eef4fb;border:1px solid #cadcf1;color:#324f75;box-shadow:8px 8px 0 #f3f6fa}.stacked-alert h3{margin:0 0 8px;color:var(--navy)}.doc-row,.resource-row{display:flex;justify-content:space-between;align-items:center;padding:15px 0;border-bottom:1px solid #edf0f4}.doc-row:last-child,.resource-row:last-child{border-bottom:0}.download{color:#315f9c;font-weight:700}.chat{border-top:1px solid var(--line);margin-top:24px;padding-top:24px}.messages{display:grid;gap:14px;margin-bottom:24px}.message{max-width:72%;padding:13px 16px;border-radius:8px;background:#f1f4f8;color:#435067}.message.admin{margin-left:auto;background:#e7eef9}.message small{display:block;margin-top:5px;color:#8994a5}.survey-intro{background:#f7f9fc;border:1px solid var(--line);border-radius:7px;padding:18px;margin-bottom:28px}.question{padding:22px 0;border-bottom:1px solid #edf0f4}.question h4{margin:0 0 14px;color:#334159}.radio-row{display:flex;gap:22px;flex-wrap:wrap;color:#5b6879}.faq-wrap{max-width:980px;margin:auto}.faq-item{border:1px solid var(--line);border-radius:7px;margin-bottom:16px;background:#fff;overflow:hidden}.faq-question{width:100%;padding:20px 24px;border:0;background:#fff;text-align:left;color:var(--navy);font-weight:700;display:flex;justify-content:space-between;cursor:pointer}.faq-answer{display:none;padding:0 24px 22px;color:#5c687a}.faq-item.open .faq-answer{display:block}.faq-item.open .faq-question span{transform:rotate(45deg)}
@media(max-width:900px){.container{width:min(100% - 32px,1312px)}.nav-links{display:none}.hero{height:520px}.hero-copy{left:24px}.hero-copy h1{font-size:36px}.intro-grid,.service-grid,.ticket-shell{grid-template-columns:1fr}.intro-media,.service-photo{width:100%}.steps-grid{grid-template-columns:1fr 1fr}.stats,.footer-grid{grid-template-columns:1fr}.footer-logos{width:100%}.form-grid,.info-grid{grid-template-columns:1fr}}
@media(max-width:600px){.section{padding:64px 0}.hero{height:440px}.hero-copy h1{font-size:30px}.steps-grid{grid-template-columns:1fr}.panel{padding:20px}.form-grid{grid-template-columns:1fr}.field.full{grid-column:auto}.stats{grid-template-columns:1fr}.stat{height:120px}.footer-grid{gap:36px}}

/* Figma parity corrections */
.site-header{overflow:hidden;background:#fff}
.site-header:before{content:"";position:absolute;inset:0 auto 0 0;width:max(458px,calc((100vw - 1312px)/2 + 402px));background:#2D3748;clip-path:polygon(0 0,100% 0,92% 100%,0 100%)}
.nav{position:relative;z-index:1}.brand img{width:224px;height:auto}.nav-links{gap:58px;margin-left:auto;font-weight:500;color:#27365D}.nav-links a,.nav-links a:hover,.nav-links a.active{color:#27365D;border-bottom-color:transparent}.nav-links a{position:relative}.home-icon{width:20px;height:20px}
.hero:after{background:linear-gradient(90deg,rgba(31,43,66,.12),transparent 65%)}
.hero-copy{top:auto;bottom:106px;transform:none;max-width:540px;background:rgba(255,183,3,.82);border-radius:8px;padding:19px 28px}
.hero-copy h1{font-size:34px;line-height:1.22;margin:0;font-weight:700}.hero-copy p{display:none}
.slider-arrow{background:rgba(245,165,36,.72)}
.page-hero{padding:58px 0 52px;background:#f8f9fb}.page-hero h1{font-size:48px;line-height:1.15;margin:0 0 12px;font-weight:700}.breadcrumbs{font-size:15px;color:#68758a}
.content-section{padding:58px 0 100px}.panel{border-color:#edf0f3;border-radius:3px;padding:36px 40px;box-shadow:0 8px 26px rgba(39,53,83,.09)}
.panel-title{font-size:20px}.form-note{display:none}.form-grid{grid-template-columns:1fr;gap:24px}.field.full{grid-column:auto}
.field label{font-weight:500;color:#3d4759}.control,.editor,.file-control{border-color:#FFDE8B;border-radius:2px}.control{height:46px}.control:focus{border-color:#FFB703;box-shadow:0 0 0 2px rgba(255,183,3,.12)}
.ticket-shell{display:block}.tracking-card{padding:34px 38px 30px;border-radius:3px;box-shadow:0 8px 26px rgba(39,53,83,.09);overflow:visible;margin-bottom:32px}
.tracking-card:before{content:"Alur Permohonan Data";display:block;color:#243365;font-size:20px;font-weight:700;margin-bottom:32px}.tracking-code{display:none}
.stepper{display:grid;grid-template-columns:repeat(8,1fr);padding:0;margin:0;overflow:visible}.stepper li{display:flex;flex-direction:column;align-items:center;text-align:center;gap:12px;min-height:82px;font-size:12px;line-height:1.35;position:relative;padding:0 5px}
.stepper li:before{content:"";width:48px;height:48px;margin:0;border-radius:50%;background:#d8dde5;box-shadow:none;z-index:2}
.stepper li:not(:last-child):after{content:"";position:absolute;left:50%;top:23px;width:100%;height:2px;background:#d8dde5;z-index:1}
.stepper li.active:before,.stepper li.active:not(:last-child):after{background:#6f94c7}.stepper li.current:before{background:#6f94c7}.ticket-main{gap:26px}.ticket-main>.ticket-header{display:none}
.stacked-alert{background:#FFE9B1;border-color:#FFC535;color:#41495a;border-radius:3px;box-shadow:8px 8px 0 #f7f7f7;padding:26px 30px}.stacked-alert h3{color:#27365D}.stacked-alert .download{color:#e85268;text-decoration:underline}
.info-grid{grid-template-columns:1fr;gap:0}.info-item{display:grid;grid-template-columns:210px 16px 1fr;padding:8px 0}.info-item small{display:contents}.info-item small:after{content:":"}.info-item strong{font-weight:500}
.survey-page form.panel{padding:0;background:transparent;border:0;box-shadow:none}.survey-page .survey-intro,.survey-page form>.panel-title{display:none}.survey-page .form-grid{gap:18px}.survey-page .field,.survey-page .question{background:#fff;border:1px solid #FFC535;border-radius:3px;padding:26px 30px;box-shadow:0 5px 16px rgba(39,53,83,.06)}.survey-page .field:first-child .control{background:#FFF8E6}.survey-page .question{margin-top:18px}.survey-page .question h4{font-weight:500}.survey-page .field.full{margin-top:18px!important}
@media(max-width:900px){.site-header:before{width:330px}.brand img{width:200px}.stepper{grid-template-columns:repeat(4,1fr);row-gap:24px}.stepper li:not(:last-child):after{display:none}}
@media(max-width:600px){.site-header:before{width:280px}.page-hero h1{font-size:36px}.hero-copy{left:20px;right:20px;bottom:55px}.stepper{grid-template-columns:repeat(2,1fr)}.info-item{grid-template-columns:1fr}.info-item small{display:block}.info-item small:after{content:""}}

/* Prototype-accurate icons, FAQ and video scale */
.intro-media>.play{width:48px;height:48px;object-fit:contain}
.intro-grid .lead{font-size:18px;line-height:1.55;color:#27365d;text-align:justify}.intro-grid .section-title{font-size:34px}.intro-grid{gap:60px}
.stepper li:before{display:none}.step-icon{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;flex:none;background:#c9c9c9;color:#fff;font-size:24px;font-variation-settings:'FILL' 1,'wght' 600,'GRAD' 0,'opsz' 24;line-height:48px;z-index:2}
.step-icon img{display:block;width:24px;height:24px;object-fit:contain}
.stepper li.active .step-icon,.stepper li.current .step-icon{background:var(--process)}.stepper li.active:not(:last-child):after{background:#d8dde5}.stepper li:nth-child(1).active:after,.stepper li:nth-child(2).active:after{background:#d8dde5}
.faq-section{padding-top:42px}.faq-wrap{max-width:1312px}.faq-item{border:0;border-radius:0;margin-bottom:20px;background:#fff;overflow:hidden;box-shadow:0 6px 16px rgba(26,42,70,.13)}
.faq-question{min-height:64px;padding:20px 28px;color:#20283a;font-size:14px;font-weight:700}.faq-answer{padding:25px 28px;color:#2f3542;line-height:1.55}.faq-item.open .faq-answer{display:block;background:#FFE9B1}.faq-item.open .faq-question{background:#fff}.faq-question span{display:none}
.faq-page .page-hero{padding:30px 0 27px}.faq-page .page-hero h1{font-size:32px;margin-bottom:7px}.faq-page .breadcrumbs{font-size:12px}.faq-page .content-section{padding-top:36px}

/* Remaining frontend frames */
.tracking-form{padding:28px 32px 30px}.tracking-form .panel-title{font-size:24px;color:#2b2b2b;margin-bottom:26px}.recaptcha-mock{width:300px;height:72px;margin:30px auto;display:flex;align-items:center;gap:12px;padding:12px 16px;background:#fafafa;border:1px solid #d5d9dd;box-shadow:0 2px 5px rgba(0,0,0,.15);color:#8E98A8}.recaptcha-box{width:24px;height:24px;border:2px solid #aeb8c1;background:#fff}.recaptcha-mock strong{margin-left:auto;color:#3765bb;font-size:28px;text-align:center;line-height:1}.recaptcha-mock small{display:block;color:#8E98A8;font-size:8px;font-weight:400}.tracking-divider{height:2px;background:#FFB703;margin:28px 0 26px}.btn-outline-yellow{background:#fff;border:2px solid #FFC535;color:#B58202}
.state-card{padding:30px 32px;border:1px solid #FFC535;background:#FFE9B1;box-shadow:8px 8px 0 #f7f7f7}.state-card h3{margin:0 0 12px;color:#27365D;font-size:20px}.state-card p{margin:8px 0 18px}.state-success{background:#E9EBF8;border-color:#1E5598}.state-danger{background:#fff1f3;border-color:#E53E3E}.state-danger h3,.stepper li.rejected{color:#E53E3E}.stepper li.rejected .step-icon{background:#E53E3E}.state-bast{background:#FFF8E6}.ticket-data{margin-top:0}
.email-preview-page{background:#f5f6f8;padding:42px 20px;min-height:100vh}.email-shell{max-width:840px;margin:auto}.email-subject{background:#fff;padding:22px 28px;font-size:24px;border-bottom:1px solid #eee}.email-card{max-width:600px;margin:0 auto;background:#fff;padding:28px 26px 44px;color:#8E98A8}.email-rule{height:4px;background:#1E5598;margin-bottom:20px}.email-logo{width:330px;height:64px;object-fit:contain;object-position:left;margin-bottom:42px}.email-card h1{font-size:24px;line-height:1.45;color:#2b2b2b;margin:0 0 26px}.email-card p{font-size:16px;line-height:1.5;margin:20px 0}.email-card .btn{margin:4px 0}