/* =========================================================
   ULP EDUCATION CENTER PRO - FINAL OVERRIDE 2026
   Fokus: presisi tengah desktop, rapi mobile, dan nuansa simulasi industri pendidikan.
   ========================================================= */
html, body{width:100%;max-width:100%;overflow-x:hidden}
body.public-body{background:linear-gradient(180deg,#eaf4ff 0%,#f6fbff 42%,#ffffff 100%)!important}
body.public-body .app-shell.public-shell{min-height:100dvh!important;background:transparent!important}
body.public-body .public-main{display:block!important;width:100%!important;max-width:100%!important;margin:0!important;padding:0!important;background:transparent!important}
body.public-body .ulp-final{width:100%!important;max-width:100%!important;margin:0 auto!important;background:linear-gradient(180deg,#edf7ff 0%,#f8fbff 34%,#ffffff 100%);}
body.public-body .ulp-wrap{width:min(1420px,calc(100% - 56px))!important;max-width:1420px!important;margin-left:auto!important;margin-right:auto!important}

/* Navbar publik lebih presisi dan tidak melebar berantakan */
body.public-body .ulp-nav{position:sticky!important;top:0!important;z-index:200!important;width:100%!important;background:rgba(255,255,255,.94)!important;border-bottom:1px solid rgba(191,219,254,.86)!important;box-shadow:0 12px 42px rgba(15,23,42,.06)!important;backdrop-filter:blur(18px)!important;-webkit-backdrop-filter:blur(18px)!important}
body.public-body .ulp-nav-inner{min-height:86px!important;height:auto!important;display:flex!important;align-items:center!important;justify-content:space-between!important;gap:22px!important;padding:12px 0!important}
body.public-body .ulp-brand{min-width:310px!important;display:flex!important;align-items:center!important;gap:14px!important;color:#071f44!important}
body.public-body .ulp-brand img{width:54px!important;height:54px!important;border-radius:17px!important;box-shadow:0 14px 34px rgba(37,99,235,.24)!important}
body.public-body .ulp-brand b{font-size:20px!important;line-height:1.05!important;font-weight:1000!important;letter-spacing:-.035em!important;white-space:normal!important}
body.public-body .ulp-brand small{display:block!important;margin-top:4px!important;font-size:12px!important;line-height:1.25!important;font-weight:850!important;color:#53657f!important;white-space:normal!important}
body.public-body .ulp-menu{display:flex!important;align-items:center!important;justify-content:flex-end!important;gap:7px!important;flex:1!important;min-width:0!important;overflow-x:auto!important;scrollbar-width:none!important}
body.public-body .ulp-menu::-webkit-scrollbar{display:none!important}
body.public-body .ulp-menu a{display:inline-flex!important;align-items:center!important;justify-content:center!important;min-height:42px!important;padding:9px 11px!important;border-radius:14px!important;font-size:13px!important;font-weight:950!important;color:#0f2d53!important;white-space:nowrap!important;background:transparent!important;border:1px solid transparent!important;box-shadow:none!important}
body.public-body .ulp-menu a:hover{background:#edf7ff!important;border-color:#cfe5fb!important;color:#075fcc!important;transform:none!important}

/* Hero tetap full, tetapi isi benar-benar center pada layar besar */
body.public-body .ulp-hero{position:relative!important;width:100%!important;min-height:690px!important;padding:78px 0 108px!important;overflow:hidden!important;background-image:linear-gradient(90deg,rgba(4,18,47,.96) 0%,rgba(6,35,84,.90) 34%,rgba(10,91,185,.62) 62%,rgba(0,178,164,.22) 100%),url('../img/hero-scene-ota.png'),linear-gradient(100deg,#061a3d 0%,#0b5ec7 56%,#08b6a8 100%)!important;background-repeat:no-repeat,no-repeat,no-repeat!important;background-position:center,right calc((100vw - min(1420px,calc(100vw - 56px)))/2) bottom 24px,center!important;background-size:cover,min(760px,45vw) auto,cover!important;color:#fff!important}
body.public-body .ulp-hero:before{content:""!important;position:absolute!important;inset:0!important;background:radial-gradient(circle at 18% 22%,rgba(59,130,246,.28),transparent 28%),radial-gradient(circle at 86% 18%,rgba(125,211,252,.20),transparent 25%)!important;pointer-events:none!important}
body.public-body .ulp-hero:after{content:""!important;position:absolute!important;left:0!important;right:0!important;bottom:-1px!important;height:80px!important;background:linear-gradient(180deg,rgba(244,249,255,0),#f8fbff)!important;pointer-events:none!important}
body.public-body .ulp-hero-grid{position:relative!important;z-index:3!important;display:grid!important;grid-template-columns:minmax(0,720px) minmax(360px,400px)!important;justify-content:space-between!important;align-items:center!important;gap:72px!important;width:min(1420px,calc(100% - 56px))!important;max-width:1420px!important;margin:0 auto!important}
body.public-body .ulp-copy{max-width:720px!important}
body.public-body .ulp-copy h1{font-size:clamp(52px,5.1vw,82px)!important;line-height:.96!important;margin:24px 0 18px!important;font-weight:1000!important;letter-spacing:-.072em!important;color:#fff!important;text-wrap:balance!important;text-shadow:0 22px 50px rgba(0,0,0,.22)!important}
body.public-body .ulp-copy h1 span{color:#c9ffdf!important}
body.public-body .ulp-copy p{max-width:690px!important;margin:0 0 26px!important;color:rgba(255,255,255,.94)!important;font-size:17px!important;line-height:1.72!important;font-weight:780!important;text-shadow:0 12px 28px rgba(0,0,0,.22)!important}
body.public-body .ulp-badge{display:inline-flex!important;align-items:center!important;gap:8px!important;border-radius:999px!important;padding:10px 16px!important;background:rgba(255,255,255,.13)!important;border:1px solid rgba(255,255,255,.25)!important;color:#fff!important;font-size:12px!important;font-weight:1000!important;letter-spacing:.04em!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.16)!important;backdrop-filter:blur(12px)!important}
body.public-body .ulp-actions{display:flex!important;align-items:center!important;gap:13px!important;flex-wrap:wrap!important}
body.public-body .ulp-btn{min-height:52px!important;border-radius:16px!important;padding:0 22px!important;font-weight:1000!important;letter-spacing:-.01em!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;gap:8px!important;transition:.18s ease!important}
body.public-body .ulp-btn:hover{transform:translateY(-1px)!important}
body.public-body .ulp-primary{background:linear-gradient(135deg,#2ea2ff,#056bea)!important;color:#fff!important;box-shadow:0 18px 38px rgba(37,99,235,.28)!important;border:1px solid rgba(255,255,255,.14)!important}
body.public-body .ulp-ghost{background:rgba(255,255,255,.12)!important;border:1px solid rgba(255,255,255,.34)!important;color:#fff!important;backdrop-filter:blur(12px)!important}
body.public-body .ulp-outline{background:#fff!important;color:#075fcc!important;border:1px solid #cbe1f8!important;box-shadow:0 12px 28px rgba(15,23,42,.07)!important}

/* Login card sejajar, bersih, tidak terlalu besar */
body.public-body .ulp-login{width:100%!important;max-width:400px!important;justify-self:end!important;border-radius:30px!important;padding:28px!important;background:rgba(255,255,255,.92)!important;border:1px solid rgba(255,255,255,.68)!important;box-shadow:0 34px 80px rgba(2,6,23,.26)!important;color:#071f44!important;backdrop-filter:blur(20px) saturate(145%)!important;-webkit-backdrop-filter:blur(20px) saturate(145%)!important;overflow:hidden!important}
body.public-body .ulp-login-head{display:flex!important;align-items:center!important;gap:14px!important;margin-bottom:18px!important}
body.public-body .ulp-login-head>span{width:54px!important;height:54px!important;flex:0 0 54px!important;border-radius:18px!important;background:linear-gradient(135deg,#10b981,#22d3ee)!important;display:grid!important;place-items:center!important;box-shadow:0 16px 32px rgba(16,185,129,.24)!important}
body.public-body .ulp-login h2{font-size:24px!important;line-height:1.1!important;margin:0 0 4px!important;color:#071f44!important;font-weight:1000!important;letter-spacing:-.04em!important}
body.public-body .ulp-login p{font-size:13.5px!important;line-height:1.45!important;color:#51657f!important;font-weight:780!important}
body.public-body .ulp-form{display:grid!important;gap:14px!important}
body.public-body .ulp-form label{display:grid!important;gap:7px!important;font-size:13px!important;font-weight:950!important;color:#203955!important}
body.public-body .ulp-form input, body.public-body .ulp-search-form input, body.public-body .ulp-search-form select{height:52px!important;border-radius:15px!important;border:1px solid #c8ddf4!important;background:rgba(255,255,255,.96)!important;padding:0 15px!important;color:#0f2d4a!important;outline:0!important;box-shadow:0 1px 0 rgba(255,255,255,.8) inset!important}
body.public-body .ulp-form input:focus,body.public-body .ulp-search-form input:focus,body.public-body .ulp-search-form select:focus{border-color:#55aef4!important;box-shadow:0 0 0 4px rgba(14,165,233,.13)!important}
body.public-body .ulp-demo{margin-top:14px!important;background:#f2fbff!important;border:1px dashed #b7ddff!important;border-radius:16px!important;padding:11px 12px!important;font-size:12px!important;color:#4e6681!important;line-height:1.55!important;font-weight:750!important}

/* Search card, data aktif, dan section pendidikan */
body.public-body .ulp-search{position:relative!important;z-index:20!important;margin-top:-64px!important}
body.public-body .ulp-search-card, body.public-body .ulp-info, body.public-body .ulp-programmer, body.public-body .ulp-edu-flow, body.public-body .ulp-bottom-intro{border-radius:30px!important;border:1px solid #d9e8f7!important;box-shadow:0 22px 60px rgba(8,33,63,.12)!important;background:#fff!important}
body.public-body .ulp-tabs{display:grid!important;grid-template-columns:repeat(7,minmax(132px,1fr))!important;overflow:auto!important;border-bottom:1px solid #d9e8f7!important;background:#fff!important;border-radius:30px 30px 0 0!important;scrollbar-width:none!important}
body.public-body .ulp-tabs::-webkit-scrollbar{display:none!important}
body.public-body .ulp-tabs button{min-height:72px!important;background:#fff!important;border:0!important;border-bottom:4px solid transparent!important;color:#294460!important;font-weight:1000!important;white-space:nowrap!important;cursor:pointer!important}
body.public-body .ulp-tabs button.active{background:linear-gradient(180deg,#fff,#f1f8ff)!important;color:#075fcc!important;border-bottom-color:#1677ff!important}
body.public-body .ulp-panel{padding:24px!important}
body.public-body .ulp-search-form{display:grid!important;grid-template-columns:repeat(4,minmax(150px,1fr)) minmax(145px,.8fr)!important;gap:14px!important;align-items:end!important}
body.public-body .ulp-flight-form{grid-template-columns:repeat(5,minmax(130px,1fr)) minmax(135px,.75fr)!important}
body.public-body .ulp-search-form label{display:grid!important;gap:7px!important;font-size:13px!important;font-weight:950!important;color:#223854!important}
body.public-body .ulp-section-head{margin:54px 0 18px!important;text-align:left!important}
body.public-body .ulp-section-head span{display:inline-flex!important;padding:7px 12px!important;border-radius:999px!important;background:#eaf5ff!important;color:#0b6ee8!important;font-size:12px!important;font-weight:1000!important;letter-spacing:.04em!important}
body.public-body .ulp-section-head h2{font-size:clamp(25px,2.4vw,36px)!important;line-height:1.12!important;margin:12px 0 8px!important;font-weight:1000!important;letter-spacing:-.04em!important;color:#071f44!important;text-wrap:balance!important}
body.public-body .ulp-section-head p{max-width:850px!important;margin:0!important;color:#5a6f89!important;font-weight:750!important;line-height:1.65!important}
body.public-body .ulp-live-grid{display:grid!important;grid-template-columns:1.35fr 1fr 1fr!important;gap:18px!important}
body.public-body .ulp-live-grid article, body.public-body .ulp-card-row article, body.public-body .ulp-feature-grid article, body.public-body .ulp-why article, body.public-body .ulp-flow-card{background:#fff!important;border:1px solid #d9e8f7!important;border-radius:24px!important;box-shadow:0 14px 34px rgba(12,43,93,.07)!important}
body.public-body .ulp-live-grid article{padding:20px!important}
body.public-body .ulp-live-main{grid-row:span 2!important}
body.public-body .ulp-card-row{display:grid!important;grid-template-columns:repeat(3,1fr)!important;gap:18px!important}
body.public-body .ulp-feature-grid{display:grid!important;grid-template-columns:repeat(4,1fr)!important;gap:14px!important;margin-top:22px!important}
body.public-body .ulp-feature-grid article{padding:18px!important}
body.public-body .ulp-why{margin-top:22px!important;border-radius:24px!important;background:linear-gradient(135deg,#f0f8ff,#ecfdf5)!important;padding:22px!important;border:1px solid #d7edf6!important}
body.public-body .ulp-why>div{display:grid!important;grid-template-columns:repeat(4,1fr)!important;gap:14px!important}
body.public-body .ulp-why article{padding:16px!important}

.ulp-edu-flow{margin-top:26px!important;padding:28px!important;background:linear-gradient(180deg,#ffffff,#f8fbff)!important}
.ulp-flow-head{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;margin-bottom:20px}
.ulp-flow-head h2{margin:8px 0 0;font-size:clamp(24px,2.2vw,34px);letter-spacing:-.04em;color:#071f44;line-height:1.12}
.ulp-flow-head p{margin:0;max-width:760px;color:#5a6f89;font-weight:750;line-height:1.65}
.ulp-flow-pill{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:999px;background:#eaf5ff;color:#075fcc;font-size:12px;font-weight:1000;letter-spacing:.04em}
.ulp-flow-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.ulp-flow-card{padding:18px;display:grid;gap:8px;min-height:170px;position:relative;overflow:hidden}
.ulp-flow-card:before{content:attr(data-step);width:42px;height:42px;border-radius:15px;display:grid;place-items:center;background:linear-gradient(135deg,#2196ff,#0b75ef);color:#fff;font-weight:1000;box-shadow:0 14px 28px rgba(37,99,235,.22)}
.ulp-flow-card h3{margin:4px 0 0;color:#071f44;font-size:17px;line-height:1.2}
.ulp-flow-card p{margin:0;color:#60758c;font-weight:740;line-height:1.55}
.ulp-flow-card small{display:inline-flex;width:max-content;padding:5px 9px;border-radius:999px;background:#ecfdf5;color:#047857;font-weight:950}
.ulp-flow-note{margin-top:18px;padding:16px;border-radius:20px;background:linear-gradient(135deg,#eff6ff,#ecfeff);border:1px solid #cfe3f8;color:#174061;font-weight:780;line-height:1.6}

body.public-body .ulp-programmer{grid-template-columns:330px 1fr!important;gap:22px!important;padding:28px!important;margin-bottom:44px!important}

@media(max-width:1180px){
  body.public-body .ulp-wrap, body.public-body .ulp-hero-grid{width:min(1180px,calc(100% - 40px))!important}
  body.public-body .ulp-hero-grid{grid-template-columns:minmax(0,1fr) minmax(340px,380px)!important;gap:34px!important}
  body.public-body .ulp-copy h1{font-size:clamp(48px,5.6vw,68px)!important}
  body.public-body .ulp-search-form, body.public-body .ulp-flight-form{grid-template-columns:repeat(3,1fr)!important}
  body.public-body .ulp-feature-grid,.ulp-flow-grid{grid-template-columns:repeat(3,1fr)!important}
}
@media(max-width:960px){
  body.public-body .ulp-nav-inner{min-height:74px!important}
  body.public-body .ulp-menu{display:none!important}
  body.public-body .ulp-mobile-menu-btn{display:inline-flex!important;align-items:center!important;justify-content:center!important;width:46px!important;height:44px!important;border:0!important;border-radius:14px!important;background:#edf7ff!important;color:#075fcc!important;font-size:22px!important;font-weight:1000!important}
  body.public-body .ulp-brand{min-width:0!important}
  body.public-body .ulp-hero{min-height:auto!important;padding:48px 0 96px!important;background-position:center,center bottom 22px,center!important;background-size:cover,92% auto,cover!important}
  body.public-body .ulp-hero-grid{grid-template-columns:1fr!important;gap:24px!important;align-items:start!important}
  body.public-body .ulp-login{justify-self:start!important;max-width:560px!important}
  body.public-body .ulp-tabs{grid-template-columns:repeat(4,minmax(135px,1fr))!important}
  body.public-body .ulp-live-grid{grid-template-columns:1fr!important}
  body.public-body .ulp-live-main{grid-row:auto!important}
  body.public-body .ulp-card-row, body.public-body .ulp-feature-grid, body.public-body .ulp-why>div,.ulp-flow-grid{grid-template-columns:repeat(2,1fr)!important}
  body.public-body .ulp-programmer{grid-template-columns:1fr!important}
  .ulp-flow-head{display:block}
}
@media(max-width:640px){
  body.public-body .ulp-wrap, body.public-body .ulp-hero-grid{width:calc(100% - 24px)!important}
  body.public-body .ulp-brand img{width:46px!important;height:46px!important}
  body.public-body .ulp-brand b{font-size:17px!important}
  body.public-body .ulp-brand small{font-size:11px!important}
  body.public-body .ulp-hero{padding:36px 0 78px!important;background-size:cover,110% auto,cover!important}
  body.public-body .ulp-copy h1{font-size:40px!important;line-height:.98!important}
  body.public-body .ulp-copy p{font-size:14.5px!important;line-height:1.66!important}
  body.public-body .ulp-actions{display:grid!important;grid-template-columns:1fr!important;width:100%!important}
  body.public-body .ulp-actions .ulp-btn{width:100%!important}
  body.public-body .ulp-login{max-width:100%!important;border-radius:24px!important;padding:22px!important}
  body.public-body .ulp-search{margin-top:-42px!important}
  body.public-body .ulp-tabs{grid-template-columns:repeat(2,minmax(132px,1fr))!important}
  body.public-body .ulp-panel{padding:16px!important}
  body.public-body .ulp-search-form, body.public-body .ulp-flight-form{grid-template-columns:1fr!important}
  body.public-body .ulp-card-row, body.public-body .ulp-feature-grid, body.public-body .ulp-why>div,.ulp-flow-grid{grid-template-columns:1fr!important}
  body.public-body .ulp-info, body.public-body .ulp-programmer, .ulp-edu-flow{padding:18px!important;border-radius:24px!important}
}