/*
 * Tahap 17 — Responsive hardening, portal separation, social hub, and document viewer.
 * Loaded after the existing design layers so it can safely repair narrow-screen conflicts.
 */
:root{
  --v17-green-950:#032d23;
  --v17-green-900:#064e3b;
  --v17-green-800:#0b5a45;
  --v17-green-700:#0f7a5e;
  --v17-green-100:#e8f7f0;
  --v17-gold:#e4ad20;
  --v17-ink:#15211e;
  --v17-muted:#66736f;
  --v17-line:#dbe6e1;
  --v17-card:#fff;
  --v17-shadow:0 18px 50px rgba(4,55,39,.10);
  --v17-ease:cubic-bezier(.2,.75,.2,1);
}

/* Global overflow and text safety. Do not split normal words into vertical letters. */
html,body{width:100%;max-width:100%;overflow-x:clip;-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{min-width:280px}
main,section,article,header,footer,nav,div{min-width:0}
h1,h2,h3,h4,h5,h6,p,li,a,button,label,summary,strong,small,span{
  word-break:normal;
  overflow-wrap:break-word;
  hyphens:auto;
  writing-mode:horizontal-tb;
}
img,svg,video,canvas,iframe{display:block;max-width:100%;height:auto}
.container,.navbar,.wrap,.header-inner,.content,.hero-inner{max-width:100%}

/* Explicit portal identity/switching. */
.portal-switcher{
  display:inline-flex;align-items:center;gap:5px;padding:5px;border:1px solid rgba(6,78,59,.14);
  border-radius:999px;background:rgba(255,255,255,.82);box-shadow:0 10px 30px rgba(6,78,59,.08);
  backdrop-filter:blur(14px);
}
.portal-switcher a{
  display:inline-flex;align-items:center;justify-content:center;min-height:34px;padding:7px 12px;border-radius:999px;
  font-size:11px;font-weight:900;letter-spacing:.07em;text-transform:uppercase;color:#335047;
  white-space:nowrap;transition:transform .25s var(--v17-ease),background .25s,color .25s,box-shadow .25s;
}
.portal-switcher a:hover{transform:translateY(-1px);background:#edf8f3;color:var(--v17-green-900)}
.portal-switcher a.active{background:linear-gradient(135deg,var(--v17-green-900),var(--v17-green-700));color:#fff;box-shadow:0 8px 20px rgba(6,78,59,.22)}
.portal-role-note{font-size:12px;line-height:1.55;color:var(--v17-muted)}

/* Service ticker: horizontal chips, never letter-by-letter. */
.service-ticker{max-width:100%;overflow:hidden}
.service-ticker-track{
  display:flex!important;align-items:center!important;flex-wrap:nowrap!important;width:max-content!important;min-width:max-content!important;
  white-space:nowrap!important;writing-mode:horizontal-tb!important;
}
.service-ticker-track>span,.service-ticker-track>i{
  display:inline-flex!important;flex:0 0 auto!important;white-space:nowrap!important;word-break:keep-all!important;
  overflow-wrap:normal!important;writing-mode:horizontal-tb!important;
}

/* Social hub */
.social-hub-section{position:relative;isolation:isolate;overflow:hidden}
.social-hub-section::before{
  content:"";position:absolute;inset:6% -10% auto auto;width:360px;height:360px;border-radius:50%;pointer-events:none;z-index:-1;
  background:radial-gradient(circle,rgba(15,122,94,.11),transparent 66%);
}
.social-hub-shell{
  position:relative;overflow:hidden;padding:clamp(22px,4vw,38px);border:1px solid rgba(6,78,59,.12);border-radius:30px;
  background:linear-gradient(145deg,rgba(255,255,255,.96),rgba(239,250,245,.88));box-shadow:var(--v17-shadow);
}
.social-hub-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(240px,.55fr);gap:26px;align-items:end;margin-bottom:22px}
.social-hub-head h2{margin:9px 0 7px;font-size:clamp(28px,4vw,44px);line-height:1.06;letter-spacing:-.035em;color:var(--v17-ink)}
.social-hub-head p{margin:0;color:var(--v17-muted);line-height:1.7}
.social-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.social-card{
  --brand:#0f7a5e;position:relative;isolation:isolate;overflow:hidden;min-height:128px;padding:17px;border:1px solid var(--v17-line);
  border-radius:21px;background:#fff;color:var(--v17-ink);box-shadow:0 9px 26px rgba(6,78,59,.055);
  display:flex;flex-direction:column;align-items:flex-start;justify-content:space-between;gap:13px;
  transition:transform .35s var(--v17-ease),box-shadow .35s,border-color .35s,background .35s;
}
.social-card::before{content:"";position:absolute;inset:auto -30px -55px auto;width:120px;height:120px;border-radius:50%;z-index:-1;background:color-mix(in srgb,var(--brand) 13%,transparent);transition:transform .45s var(--v17-ease),opacity .35s}
.social-card::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(110deg,transparent 22%,rgba(255,255,255,.72) 43%,transparent 64%);transform:translateX(-140%)}
.social-card:hover,.social-card:focus-visible{transform:translateY(-5px);border-color:color-mix(in srgb,var(--brand) 35%,white);box-shadow:0 20px 44px color-mix(in srgb,var(--brand) 16%,transparent)}
.social-card:hover::before{transform:scale(1.25)}
.social-card:hover::after{animation:v17-social-sheen .8s var(--v17-ease)}
.social-card:active{transform:translateY(-1px) scale(.985)}
.social-card.is-disabled{opacity:.68;cursor:pointer;background:#f8faf9}
.social-icon{
  width:46px;height:46px;border-radius:15px;display:grid;place-items:center;background:color-mix(in srgb,var(--brand) 12%,white);
  color:var(--brand);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--brand) 15%,white);transition:transform .38s var(--v17-ease),background .3s,color .3s;
}
.social-icon svg{width:24px;height:24px;display:block;fill:currentColor}
.social-card:hover .social-icon{transform:rotate(-5deg) scale(1.1);background:var(--brand);color:#fff}
.social-copy strong{display:block;font-size:15px;line-height:1.15}.social-copy span{display:block;margin-top:5px;font-size:11px;line-height:1.45;color:var(--v17-muted)}
.social-arrow{position:absolute;right:15px;top:15px;width:28px;height:28px;border-radius:999px;display:grid;place-items:center;background:#f2f7f5;color:#315248;font-weight:900;transition:transform .35s var(--v17-ease),background .3s,color .3s}
.social-card:hover .social-arrow{transform:rotate(42deg);background:var(--brand);color:#fff}
.social-card[data-platform="facebook"]{--brand:#1877f2}.social-card[data-platform="instagram"]{--brand:#c13584}.social-card[data-platform="tiktok"]{--brand:#111}.social-card[data-platform="youtube"]{--brand:#ff0033}.social-card[data-platform="whatsapp"]{--brand:#128c7e}.social-card[data-platform="x"]{--brand:#111}.social-card[data-platform="website"]{--brand:#0f7a5e}.social-card[data-platform="email"]{--brand:#d99b0b}
@keyframes v17-social-sheen{to{transform:translateX(145%)}}
.social-toast{
  position:fixed;z-index:10050;left:50%;bottom:max(20px,env(safe-area-inset-bottom));transform:translate(-50%,18px);
  width:min(440px,calc(100% - 28px));padding:13px 16px;border-radius:15px;background:#082f25;color:#fff;
  box-shadow:0 22px 60px rgba(0,0,0,.25);opacity:0;pointer-events:none;transition:.28s var(--v17-ease);font-size:13px;line-height:1.45;text-align:center;
}
.social-toast.show{opacity:1;transform:translate(-50%,0)}

/* PPID standards/compliance grid */
.ppid-standard-shell{padding:clamp(22px,4vw,38px);border-radius:30px;background:linear-gradient(135deg,#073c2f,#0d6e54);color:#fff;box-shadow:0 26px 68px rgba(6,78,59,.19);overflow:hidden;position:relative}
.ppid-standard-shell::after{content:"";position:absolute;width:360px;height:360px;right:-160px;top:-180px;border-radius:50%;background:radial-gradient(circle,rgba(240,196,76,.24),transparent 66%)}
.ppid-standard-head{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1fr) minmax(240px,.55fr);gap:24px;align-items:end}
.ppid-standard-head h2{font-size:clamp(28px,4vw,45px);line-height:1.05;margin:9px 0;letter-spacing:-.035em}.ppid-standard-head p{margin:0;color:rgba(255,255,255,.78);line-height:1.7}
.ppid-standard-grid{position:relative;z-index:1;margin-top:22px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:11px}
.ppid-standard-card{padding:17px;border-radius:19px;border:1px solid rgba(255,255,255,.13);background:rgba(255,255,255,.08);backdrop-filter:blur(9px);transition:transform .3s var(--v17-ease),background .3s}
.ppid-standard-card:hover{transform:translateY(-4px);background:rgba(255,255,255,.13)}
.ppid-standard-card b{display:block;color:#f4cb57;font-size:12px;letter-spacing:.1em;text-transform:uppercase}.ppid-standard-card strong{display:block;margin:9px 0 7px;font-size:18px;line-height:1.2}.ppid-standard-card p{margin:0;color:rgba(255,255,255,.72);font-size:12px;line-height:1.6}
.ppid-standard-actions{position:relative;z-index:1;display:flex;gap:10px;flex-wrap:wrap;margin-top:20px}.ppid-standard-actions a{min-height:42px;padding:11px 15px;border-radius:13px;font-weight:900;font-size:12px;display:inline-flex;align-items:center;justify-content:center;background:#fff;color:#063c2f}.ppid-standard-actions a.secondary{background:rgba(255,255,255,.09);color:#fff;border:1px solid rgba(255,255,255,.18)}

/* Program kerja public portal: absolute-route-safe and readable document preview. */
body[data-portal="wakama-public"] .site-header{max-width:100%}
body[data-portal="wakama-public"] .header-inner{width:min(1180px,calc(100% - 32px));margin:auto;gap:14px}
body[data-portal="wakama-public"] .public-brand{min-width:0;max-width:calc(100% - 64px)}
body[data-portal="wakama-public"] .public-brand img{flex:0 0 auto}
body[data-portal="wakama-public"] .public-brand span{min-width:0}
body[data-portal="wakama-public"] .public-brand small,body[data-portal="wakama-public"] .public-brand strong{white-space:normal;overflow-wrap:break-word;line-height:1.2}
body[data-portal="wakama-public"] .hero{overflow:hidden}
body[data-portal="wakama-public"] .hero-inner{width:min(1180px,calc(100% - 32px));margin:auto}
body[data-portal="wakama-public"] .hero-copy,body[data-portal="wakama-public"] .hero-emblem{min-width:0}
body[data-portal="wakama-public"] .hero-emblem img{width:min(150px,42vw);height:auto;margin-inline:auto}
body[data-portal="wakama-public"] .filters>*{min-width:0}
body[data-portal="wakama-public"] .filters select,body[data-portal="wakama-public"] .filters input{width:100%}
body[data-portal="wakama-public"] .official-paper{max-width:210mm;width:calc(100% - 24px);height:auto;min-height:0;box-shadow:0 14px 50px rgba(0,0,0,.13);border:1px solid #e6e6e6}
body[data-portal="wakama-public"] .official-paper *{max-width:100%}
body[data-portal="wakama-public"] .paper-table-wrap{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
body[data-portal="wakama-public"] .detail-bar{padding-top:max(12px,env(safe-area-inset-top))}

/* Internal Wakamad office */
body[data-portal="wakama-admin"] .app-shell,body[data-portal="wakama-admin"] .main-shell,body[data-portal="wakama-admin"] main{min-width:0;max-width:100%}

/* Avoid duplicate floating controls collision on small screens. */
@media (max-width:960px){
  .social-hub-head,.ppid-standard-head{grid-template-columns:1fr}
  .social-grid,.ppid-standard-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .portal-switcher{max-width:100%;overflow-x:auto;scrollbar-width:none}.portal-switcher::-webkit-scrollbar{display:none}
  .service-ticker{overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding:8px 14px;background:#f8fbfa}
  .service-ticker::-webkit-scrollbar{display:none}
  .service-ticker-track{width:max-content!important;min-width:max-content!important;animation:none!important;gap:8px;padding:0!important}
  .service-ticker-track>span{padding:9px 13px!important;border:1px solid rgba(6,78,59,.13);border-radius:999px;background:#fff;font-size:10px!important;letter-spacing:.08em!important;box-shadow:0 7px 18px rgba(6,78,59,.05)}
  .service-ticker-track>i{display:none!important}
  .service-ticker-track>[aria-hidden="true"]{display:none!important}
}

@media (max-width:720px){
  :root{--v17-mobile-gutter:14px}
  .container,.navbar,.top-strip .wrap,.mobile-panel .inner{width:calc(100% - (var(--v17-mobile-gutter) * 2))!important;max-width:none!important}
  .top-strip{font-size:11px}.top-strip .wrap{padding-block:7px!important}.top-strip .left,.top-strip .right{min-width:0;gap:8px!important}
  .top-chip{max-width:100%;white-space:normal!important;line-height:1.4}
  .navbar{gap:10px!important;padding:9px 0!important}
  .brand{min-width:0;gap:10px!important;align-items:center!important;flex:1 1 auto}
  .brand-logo{width:46px!important;height:46px!important;min-width:46px!important;flex:0 0 46px!important;border-radius:14px!important}
  .brand-text,.brand>div:last-child{min-width:0!important}
  .brand-kicker{font-size:9px!important;letter-spacing:.16em!important}
  .brand-title,.brand h1{font-size:17px!important;line-height:1.12!important;white-space:normal!important}
  .brand-sub{font-size:11px!important;line-height:1.35!important;max-width:48vw!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
  .mobile-toggle,.menu-button{width:46px!important;height:46px!important;min-width:46px!important;flex:0 0 46px!important;border-radius:14px!important}
  .mobile-panel{max-height:calc(100dvh - 64px);overflow:auto;overscroll-behavior:contain}
  .mobile-panel .inner{padding-bottom:max(18px,env(safe-area-inset-bottom))}
  .hero-shell,.hero-card{border-radius:22px!important;padding:23px 17px!important}
  .hero-title,.hero h1,.hero h2{font-size:clamp(30px,10vw,42px)!important;line-height:1.02!important;letter-spacing:-.035em!important}
  .hero-desc,.hero p{font-size:14px!important;line-height:1.65!important}
  .hero-console-row{grid-template-columns:34px minmax(0,1fr) 18px!important;gap:8px!important}
  .hero-console-row b{font-size:12px!important;line-height:1.25!important}.hero-console-row small{display:none!important}
  .hero-mini-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important}.hero-mini-grid div{min-width:0!important;padding:10px 8px!important}.hero-mini-grid strong{font-size:17px!important}.hero-mini-grid span{font-size:9px!important;line-height:1.3!important}
  .quick-heading{display:block!important}.quick-heading p{margin-top:10px!important}
  .section-title{font-size:clamp(27px,8.6vw,36px)!important;line-height:1.08!important;letter-spacing:-.025em!important}
  .section-desc{font-size:14px!important;line-height:1.7!important}
  .content-card,.form-shell,.card,.quick-card,.service-card,.unit-card{padding:19px!important;border-radius:20px!important}
  .btn,.button,button[type="submit"]{min-height:46px;padding-inline:14px}
  .form-grid{grid-template-columns:1fr!important}.field[style*="grid-column"]{grid-column:auto!important}
  #cek-status .form-grid{grid-template-columns:1fr!important}
  #cek-status .field label[for="track_code"]+input{width:100%}
  .social-hub-shell,.ppid-standard-shell{padding:21px 16px;border-radius:22px}
  .social-hub-head h2,.ppid-standard-head h2{font-size:clamp(27px,8.5vw,36px)}
  .social-card{min-height:120px;padding:15px}.social-icon{width:42px;height:42px}.social-icon svg{width:21px;height:21px}
  .ppid-standard-card strong{font-size:16px}
  .accessibility-fab{width:48px!important;height:48px!important;left:8px!important;bottom:78px!important;border-radius:15px!important;font-size:21px!important}
  .ui-scroll-top,.back-to-top{width:46px!important;height:46px!important;right:12px!important;bottom:max(14px,env(safe-area-inset-bottom))!important;border-radius:15px!important}

  /* Program kerja public mobile */
  body[data-portal="wakama-public"] .header-inner{width:calc(100% - 28px);padding-block:9px}
  body[data-portal="wakama-public"] .public-brand{max-width:calc(100% - 54px);gap:9px}
  body[data-portal="wakama-public"] .public-brand img{width:42px!important;height:42px!important;object-fit:contain!important}
  body[data-portal="wakama-public"] .public-brand small{font-size:8px!important;letter-spacing:.1em!important}
  body[data-portal="wakama-public"] .public-brand strong{font-size:13px!important}
  body[data-portal="wakama-public"] .menu-button{display:grid!important;place-items:center!important;font-size:20px!important}
  body[data-portal="wakama-public"] .hero-inner{width:calc(100% - 28px);padding:42px 0 34px!important;display:block!important}
  body[data-portal="wakama-public"] .hero h1{font-size:clamp(34px,11vw,48px)!important;line-height:.98!important}
  body[data-portal="wakama-public"] .hero-actions{display:grid!important;grid-template-columns:1fr!important}
  body[data-portal="wakama-public"] .hero-emblem{display:none!important}
  body[data-portal="wakama-public"] .content{padding:46px 14px 60px!important}
  body[data-portal="wakama-public"] .section-head{gap:12px!important}
  body[data-portal="wakama-public"] .section-head h2{font-size:clamp(30px,9vw,40px)!important;line-height:1.03!important}
  body[data-portal="wakama-public"] .filters{display:grid!important;grid-template-columns:1fr!important;padding:10px!important;border-radius:16px!important}
  body[data-portal="wakama-public"] .search{width:100%!important}
  body[data-portal="wakama-public"] .unit-tabs{margin-inline:-2px;padding-bottom:12px}
  body[data-portal="wakama-public"] .document-grid{grid-template-columns:1fr!important}
  body[data-portal="wakama-public"] .detail-backdrop{padding:0!important}
  body[data-portal="wakama-public"] .detail-shell{width:100%!important;max-width:none!important;min-height:100dvh!important;border-radius:0!important;margin:0!important}
  body[data-portal="wakama-public"] .detail-bar{gap:6px!important;padding-inline:10px!important}
  body[data-portal="wakama-public"] .detail-bar strong{width:100%;font-size:13px;line-height:1.35}
  body[data-portal="wakama-public"] .detail-bar a,body[data-portal="wakama-public"] .detail-bar button{flex:1 1 calc(50% - 6px);padding:9px 7px!important;font-size:11px!important;text-align:center}
  body[data-portal="wakama-public"] .official-paper{width:100%!important;margin:0!important;padding:18px 13px!important;border:0!important;box-shadow:none!important}
  body[data-portal="wakama-public"] .kop{grid-template-columns:50px minmax(0,1fr)!important;gap:7px!important;padding-bottom:8px!important;margin-bottom:14px!important}
  body[data-portal="wakama-public"] .kop>*:nth-child(3){display:none!important}
  body[data-portal="wakama-public"] .kop img{width:48px!important;height:58px!important;object-fit:contain!important}
  body[data-portal="wakama-public"] .kop-text .k1,body[data-portal="wakama-public"] .kop-text .k2{font-size:7.5px!important;line-height:1.15!important}
  body[data-portal="wakama-public"] .kop-text .k3{font-size:10.5px!important;line-height:1.1!important}
  body[data-portal="wakama-public"] .kop-text .address{font-size:6.5px!important;line-height:1.2!important}
  body[data-portal="wakama-public"] .paper-title h1{font-size:12pt!important;line-height:1.25!important;overflow-wrap:break-word!important}
  body[data-portal="wakama-public"] .paper-title p{font-size:9pt!important}
  body[data-portal="wakama-public"] .paper-section h2{font-size:10pt!important}
  body[data-portal="wakama-public"] .paper-section p,body[data-portal="wakama-public"] .paper-section li{font-size:9.5pt!important;line-height:1.48!important;text-align:left!important}
  body[data-portal="wakama-public"] .paper-signatures{grid-template-columns:1fr!important;gap:18px!important;margin-top:24px!important;font-size:9.5pt!important}
  body[data-portal="wakama-public"] .paper-signatures img{width:120px!important;height:58px!important}

  /* Tables become labelled cards instead of forcing a 760px canvas. */
  body[data-portal="wakama-public"] .paper-table-wrap{overflow:visible!important}
  body[data-portal="wakama-public"] .paper-table{display:block!important;min-width:0!important;width:100%!important;font-size:9pt!important;border:0!important}
  body[data-portal="wakama-public"] .paper-table thead{display:none!important}
  body[data-portal="wakama-public"] .paper-table tbody{display:grid!important;gap:10px!important}
  body[data-portal="wakama-public"] .paper-table tr{display:block!important;border:1px solid #aeb7b2!important;border-radius:10px!important;padding:5px 9px!important;background:#fff!important;break-inside:avoid}
  body[data-portal="wakama-public"] .paper-table td{display:grid!important;grid-template-columns:minmax(92px,36%) minmax(0,1fr)!important;gap:8px!important;width:100%!important;border:0!important;border-bottom:1px dashed #d7dcda!important;padding:7px 0!important;overflow-wrap:break-word!important;text-align:left!important}
  body[data-portal="wakama-public"] .paper-table td:last-child{border-bottom:0!important}
  body[data-portal="wakama-public"] .paper-table td::before{content:attr(data-label);font-family:Arial,sans-serif;font-size:8px;font-weight:800;line-height:1.3;text-transform:uppercase;letter-spacing:.04em;color:#4f5e57}
}

@media (max-width:430px){
  .social-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.social-card{min-height:114px;padding:13px}.social-copy strong{font-size:13px}.social-copy span{font-size:10px}.social-arrow{width:25px;height:25px;right:11px;top:11px}
  .ppid-standard-grid{grid-template-columns:1fr}.ppid-standard-card{padding:15px}
  .portal-switcher a{padding-inline:10px;font-size:9px}
  .hero-mini-grid span{font-size:8px!important}
  .brand-sub{max-width:43vw!important}
}

@media (max-width:340px){
  .social-grid{grid-template-columns:1fr}
  .brand-sub{display:none!important}
  .brand-title,.brand h1{font-size:15px!important}
}

@media (prefers-reduced-motion:reduce){
  .social-card,.social-card::before,.social-card::after,.social-icon,.social-arrow,.portal-switcher a,.ppid-standard-card{animation:none!important;transition:none!important}
}

@media print{
  .social-hub-section,.portal-switcher,.social-toast{display:none!important}
  body[data-portal="wakama-public"] .paper-table{display:table!important;font-size:8pt!important}
  body[data-portal="wakama-public"] .paper-table thead{display:table-header-group!important}
  body[data-portal="wakama-public"] .paper-table tbody{display:table-row-group!important}
  body[data-portal="wakama-public"] .paper-table tr{display:table-row!important;border:0!important;padding:0!important}
  body[data-portal="wakama-public"] .paper-table td{display:table-cell!important;border:1px solid #111!important;padding:1.5mm 1.2mm!important}
  body[data-portal="wakama-public"] .paper-table td::before{display:none!important}
}

/* Final Tahap 17 hardening */
.skip-link{position:fixed!important;z-index:20000!important;left:12px!important;top:10px!important;transform:translateY(-160%)!important;padding:10px 14px!important;border-radius:12px!important;background:#fff!important;color:#064e3b!important;font:800 13px/1.2 Inter,system-ui,sans-serif!important;box-shadow:0 12px 32px rgba(0,0,0,.2)!important}.skip-link:focus{transform:none!important}
body[data-portal="humas"] .top-strip .wrap{align-items:center}
body[data-portal="humas"] .top-strip .portal-switcher a{color:#335047}
body[data-portal="humas"] .top-strip .portal-switcher a.active{color:#fff}
body[data-portal="humas"] .hero-card{position:relative;overflow:hidden}
body[data-portal="humas"] .hero-card::after{content:"";position:absolute;right:-90px;top:-100px;width:280px;height:280px;border-radius:50%;background:radial-gradient(circle,rgba(229,168,0,.28),transparent 67%);pointer-events:none}
body[data-portal="humas"] .section{scroll-margin-top:88px}
body[data-portal="ppid"] .section{scroll-margin-top:88px}
@media(max-width:720px){
  body[data-portal="humas"] .top-strip .wrap{display:grid!important;grid-template-columns:1fr!important}
  body[data-portal="humas"] .portal-switcher{width:100%;display:grid;grid-template-columns:1fr 1fr}
  body[data-portal="humas"] .brand{max-width:calc(100% - 58px)}
  body[data-portal="humas"] .brand>div:last-child{overflow:hidden}
  body[data-portal="humas"] .hero{padding-top:14px}
  body[data-portal="humas"] .hero-card{padding:25px 18px!important}
  body[data-portal="humas"] .hero h2{font-size:clamp(31px,10vw,42px)!important}
  body[data-portal="humas"] .grid-3,body[data-portal="humas"] .grid-4,body[data-portal="humas"] .grid-2{grid-template-columns:1fr!important}
  body[data-portal="ppid"] .top-strip .right{width:100%;overflow-x:auto;flex-wrap:nowrap!important;padding-bottom:2px;scrollbar-width:none}
  body[data-portal="ppid"] .top-strip .right::-webkit-scrollbar{display:none}
  body[data-portal="ppid"] .top-strip .right>a{flex:0 0 auto;white-space:nowrap}
  body[data-portal="wakama-public"] footer{padding:20px 14px!important;overflow-wrap:break-word!important}
}