/* ==========================================================================
   ULAS Portal v2 — design layer
   Dimuat PALING AKHIR oleh main/template/document-common.html (dan
   document-frame-form.html). Sumber desain: new-mockup-portal/index.html.
   Rencana: PORTAL_REDESIGN_PLAN.md.

   Susunan:
     1. Font (self-hosted, assets/fonts/ulas-v2)
     2. Token
     3. Base
     4. Skin komponen Bootstrap 3 + class lama (supaya sub-page ikut gaya baru)
     5. Utility Bootstrap 5 yang dipakai modal OTP
     6. Komponen u-*
     7. Shell: utility bar, navbar, footer, container
     8. Beranda (.u-home)
     9. Halaman
   ========================================================================== */

/* 1. Font ------------------------------------------------------------------ */
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/ulas-v2/plus-jakarta-sans-latin-400-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/ulas-v2/plus-jakarta-sans-latin-ext-400-normal.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/ulas-v2/plus-jakarta-sans-latin-500-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/ulas-v2/plus-jakarta-sans-latin-ext-500-normal.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/ulas-v2/plus-jakarta-sans-latin-600-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/ulas-v2/plus-jakarta-sans-latin-ext-600-normal.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/ulas-v2/plus-jakarta-sans-latin-700-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/ulas-v2/plus-jakarta-sans-latin-ext-700-normal.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Poppins';font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/ulas-v2/poppins-latin-600-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Poppins';font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/ulas-v2/poppins-latin-ext-600-normal.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Poppins';font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/ulas-v2/poppins-latin-700-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Poppins';font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/ulas-v2/poppins-latin-ext-700-normal.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Poppins';font-style:italic;font-weight:600;font-display:swap;src:url(../fonts/ulas-v2/poppins-latin-600-italic.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Poppins';font-style:italic;font-weight:600;font-display:swap;src:url(../fonts/ulas-v2/poppins-latin-ext-600-italic.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Space Mono';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/ulas-v2/space-mono-latin-400-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Space Mono';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/ulas-v2/space-mono-latin-ext-400-normal.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Space Mono';font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/ulas-v2/space-mono-latin-700-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Space Mono';font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/ulas-v2/space-mono-latin-ext-700-normal.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

/* 2. Token ----------------------------------------------------------------- */
:root{
  --red:#d00;
  --red-hover:#b00000;
  --red-soft:rgba(221,0,0,.05);
  --red-stat:#d8000e;
  --red-on-dark:#ff6b6b;
  --gold:#f2c46d;
  --cream:#ebe1c6;
  --ink:#131313;
  --ink-brown:#1c130d;
  --text-2:#4a4038;
  --text-3:#5c5347;
  --grey:#666;
  --paper:#fafafa;
  --white:#fff;
  --cream-text:#fffdf8;
  --line:rgba(28,19,13,.12);
  --line-strong:rgba(19,19,19,.18);
  --shadow-sm:0 2px 4px -1px rgba(0,0,0,.1);
  --shadow-md:0 8px 24px -8px rgba(0,0,0,.18);
  --r-input:8px;
  --r-btn:9px;
  --r-card:14px;
  --r-media:20px;
  --f-display:'Poppins',system-ui,-apple-system,'Segoe UI',sans-serif;
  --f-body:'Plus Jakarta Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --f-mono:'Space Mono',ui-monospace,Menlo,Consolas,monospace;
  --gutter:64px;
  --page-max:1440px;
}
@media (max-width:1199px){:root{--gutter:32px}}
@media (max-width:767px){:root{--gutter:16px}}

/* 3. Base ------------------------------------------------------------------ */
html body{
  font-family:var(--f-body) !important;
  font-size:14px !important;
  line-height:1.55;
  color:var(--ink);
  background-color:var(--white) !important;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  padding-top:0;
}
body h1,body h2,body h3,body h4,body .h1,body .h2,body .h3,body .h4{
  font-family:var(--f-display);
  font-weight:600;
  color:var(--ink-brown);
  letter-spacing:0;
}
body h5,body h6{font-family:var(--f-body);font-weight:700;color:var(--ink-brown)}
body a{color:var(--red)}
body a:hover,body a:focus{color:var(--red-hover)}
body :focus-visible{outline:2px solid var(--red);outline-offset:2px}
body .panel-body p{font-size:14px !important}
::selection{background:rgba(221,0,0,.15)}
.text-primary{color:var(--red) !important}
.text-muted{color:var(--grey) !important}
.text-danger{color:#b3261e !important}
.bg-primary{background-color:var(--red) !important;color:#fff}

/* 4. Skin Bootstrap 3 + class lama ---------------------------------------- */

/* Tombol */
body .btn{
  font-family:var(--f-body);
  font-weight:600;
  font-size:14px;
  border-radius:var(--r-btn);
  padding:10px 17px;
  line-height:1.3;
  border:1px solid transparent;
  box-shadow:none;
  transition:background-color .15s,border-color .15s,color .15s;
}
body .btn-sm,body .btn-group-sm > .btn{padding:6px 12px;font-size:13px;border-radius:7px}
body .btn-xs,body .btn-group-xs > .btn{padding:2px 8px;font-size:12px;border-radius:6px}
body .btn-lg,body .btn-group-lg > .btn{padding:13px 22px;font-size:16px}
body .btn-primary{background-color:var(--red);border-color:var(--red);color:var(--cream-text)}
body .btn-primary:hover,body .btn-primary:focus,body .btn-primary:active,body .btn-primary.active,body .open .dropdown-toggle.btn-primary{background-color:var(--red-hover);border-color:var(--red-hover);color:#fff}
body .btn-primary.disabled,body .btn-primary[disabled],body fieldset[disabled] .btn-primary{background-color:var(--red);border-color:var(--red);opacity:.45}
body .btn-default{background-color:transparent;border-color:var(--ink);color:var(--ink)}
body .btn-default:hover,body .btn-default:focus,body .btn-default:active,body .btn-default.active,body .open .dropdown-toggle.btn-default{background-color:var(--ink);border-color:var(--ink);color:#fff}
body .btn-info{background-color:var(--white);border-color:var(--line-strong);color:var(--ink)}
body .btn-info:hover,body .btn-info:focus,body .btn-info:active{background-color:var(--paper);border-color:var(--ink);color:var(--ink)}
body .btn-success{background-color:#1f7a4d;border-color:#1f7a4d;color:#fff}
body .btn-success:hover,body .btn-success:focus{background-color:#17613d;border-color:#17613d;color:#fff}
body .btn-warning{background-color:#b86e00;border-color:#b86e00;color:#fff}
body .btn-danger{background-color:#8f1a14;border-color:#8f1a14;color:#fff}
body .btn-danger:hover,body .btn-danger:focus{background-color:#6f130f;border-color:#6f130f;color:#fff}
body .btn-link{color:var(--red);font-weight:600}
body .btn-link:hover,body .btn-link:focus{color:var(--red-hover)}

/* Form */
body .form-control,
body input.set_height,
body input[type="text"].set_height,
body select.set_height,
body textarea.form-control{
  font-family:var(--f-body);
  font-size:14px;
  color:var(--ink-brown);
  background-color:var(--white);
  border:1px solid var(--line-strong);
  border-radius:var(--r-input);
  box-shadow:none;
  transition:border-color .15s,box-shadow .15s;
}
body .form-control,body input.set_height,body select.set_height,body textarea{box-sizing:border-box}
body .form-control,body input.set_height,body select.set_height{height:46px;padding:0 14px;line-height:1.3}
/* custom.css: .set_height{height:30px !important} */
body input.set_height,body select.set_height{height:46px !important}
body textarea.form-control{height:auto;min-height:110px;padding:12px 14px;line-height:1.55}
/* Banyak <select> punya inline style="height:30px !important" yang tidak bisa
   dikalahkan stylesheet: padding vertikal 0 supaya teks tetap muat. */
body select.form-control,body select.set_height{padding-top:0;padding-bottom:0}
body .form-control:focus,body input.set_height:focus,body select.set_height:focus{
  border-color:var(--red);
  box-shadow:0 0 0 3px rgba(221,0,0,.12);
  outline:0;
}
body .form-control::placeholder{color:#8a8178}
body .form-control[disabled],body .form-control[readonly],body fieldset[disabled] .form-control{background-color:#f3f1ee;color:var(--grey)}
body label,body .control-label{font-weight:700;font-size:12.5px;color:var(--ink-brown)}
body .help-block{font-size:12px;color:var(--grey)}
body .input-group-addon{background:var(--paper);border-color:var(--line-strong);border-radius:var(--r-input)}
body .input-group .form-control:first-child,body .input-group-addon:first-child{border-top-right-radius:0;border-bottom-right-radius:0}
body .input-group .form-control:last-child,body .input-group-addon:last-child,body .input-group-btn:last-child > .btn{border-top-left-radius:0;border-bottom-left-radius:0}
body .input-group-btn:last-child > .btn{height:46px}
body .has-error .form-control{border-color:#b3261e}
body input.error,body textarea.error,body select.error{border-color:#b3261e !important}
body label.error{color:#b3261e;font-weight:600;font-size:12px;margin-top:4px}
body input[type="checkbox"],body input[type="radio"]{accent-color:var(--red)}

/* select2 */
body .select2-container--default .select2-selection--single,
body .select2-container--default .select2-selection--multiple{
  min-height:46px;border:1px solid var(--line-strong);border-radius:var(--r-input);background:#fff
}
body .select2-container--default .select2-selection--single .select2-selection__rendered{line-height:44px;padding-left:14px;padding-right:32px;color:var(--ink-brown);font-size:14px}
body .select2-container--default .select2-selection--single .select2-selection__arrow{height:44px;right:8px}
body .select2-container--default .select2-selection--multiple .select2-selection__choice{background:var(--red-soft);border-color:rgba(221,0,0,.3);color:var(--ink-brown);border-radius:6px}
body .select2-container--default.select2-container--focus .select2-selection--multiple,
body .select2-container--default.select2-container--open .select2-selection--single{border-color:var(--red);box-shadow:0 0 0 3px rgba(221,0,0,.12)}
body .select2-container--default .select2-results__option--highlighted[aria-selected]{background-color:var(--red);color:#fff}
body .select2-dropdown{border-color:var(--line-strong);border-radius:var(--r-input);overflow:hidden;font-size:14px}
body .select2-container{max-width:100%}

/* Panel */
body .panel{border-radius:var(--r-card);border:1px solid var(--line);box-shadow:var(--shadow-sm);background:var(--paper)}
body .panel-default > .panel-heading,
body .panel > .panel-heading{background:transparent;border-bottom:1px solid var(--line);color:var(--ink-brown);font-family:var(--f-display);font-weight:600;border-radius:var(--r-card) var(--r-card) 0 0}
body .panel-heading.bg-primary{background:transparent !important;color:var(--ink-brown) !important}
body .panel-footer{background:transparent;border-top:1px solid var(--line);border-radius:0 0 var(--r-card) var(--r-card)}

/* Tabel */
body .table{background:transparent}
body .table > thead > tr > th,body .table > tbody > tr > th,body .table > tr > th{
  font-size:12px;letter-spacing:.4px;text-transform:uppercase;color:var(--ink-brown);
  border-bottom:1px solid var(--line-strong);background:var(--paper);font-weight:700
}
body .table > thead > tr > td,body .table > tbody > tr > td,body .table > tbody > tr > th,body .table > tr > td{border-top:1px solid var(--line)}
body .table-striped > tbody > tr:nth-child(odd) > td{background:#fcfbfa}
body .table-hover > tbody > tr:hover > td{background:var(--red-soft)}

/* Tab & pill */
body .nav-tabs{border-bottom:1px solid var(--line)}
body .nav-tabs > li > a{
  background-color:transparent !important;color:var(--grey);border:0;border-bottom:2px solid transparent;
  border-radius:0;margin-right:8px;font-weight:600;padding:10px 4px
}
body .nav-tabs > li > a:hover{background:transparent !important;color:var(--ink);border-color:transparent;border-bottom-color:var(--line-strong)}
body .nav-tabs > li.active > a,body .nav-tabs > li.active > a:hover,body .nav-tabs > li.active > a:focus{
  background-color:transparent !important;color:var(--red);border:0;border-bottom:2px solid var(--red)
}
body .nav-pills > li > a{border-radius:var(--r-input);color:var(--ink);font-weight:600}
body .nav-pills > li > a:hover{background:var(--red-soft);color:var(--red)}
body .nav-pills > li.active > a,body .nav-pills > li.active > a:hover,body .nav-pills > li.active > a:focus{background-color:var(--red);color:#fff}

/* Pagination */
body .pagination > li > a,body .pagination > li > span{color:var(--ink);border-color:var(--line);background:#fff;min-width:38px;text-align:center}
body .pagination > li > a:hover,body .pagination > li > span:hover{background:var(--red-soft);color:var(--red);border-color:var(--line)}
body .pagination > .active > a,body .pagination > .active > span,body .pagination > .active > a:hover,body .pagination > .active > span:hover{background-color:var(--red);border-color:var(--red);color:#fff}
body .pagination > li:first-child > a,body .pagination > li:first-child > span{border-radius:var(--r-input) 0 0 var(--r-input)}
body .pagination > li:last-child > a,body .pagination > li:last-child > span{border-radius:0 var(--r-input) var(--r-input) 0}

/* Modal */
body .modal-content{border-radius:var(--r-card);border:1px solid var(--line);box-shadow:var(--shadow-md);background:var(--paper)}
body .modal-header{border-bottom:1px solid var(--line);padding:18px 24px}
body .modal-title{font-family:var(--f-display);font-weight:600;font-size:20px;color:var(--ink-brown)}
body .modal-body{padding:20px 24px}
body .modal-footer{border-top:1px solid var(--line);padding:16px 24px}
body .modal-backdrop.in{opacity:.55}

/* Alert, badge, label */
body .alert{border-radius:12px;border:1px solid transparent;font-size:14px}
body .alert-success{background:#eef7f1;border-color:#cfe8d8;color:#17613d}
body .alert-info{background:#f4f6f8;border-color:#dfe4e8;color:#2d3a45}
body .alert-warning{background:#fff7e6;border-color:#f3dfb4;color:#7a4b00}
body .alert-danger{background:#fdeceb;border-color:#f5c8c4;color:#8f1a14}
body .badge{background-color:var(--red);font-weight:700;border-radius:999px}
body .label{border-radius:6px;font-weight:700;padding:.3em .6em}
body .label-primary{background-color:var(--red)}

/* Dropdown */
body .dropdown-menu{border-radius:12px;border:1px solid var(--line);box-shadow:var(--shadow-md);padding:6px;font-size:14px}
body .dropdown-menu > li > a{border-radius:8px;padding:9px 12px;color:var(--ink) !important;font-weight:500}
body .dropdown-menu > li > a:hover,body .dropdown-menu > li > a:focus{background:var(--red-soft);color:var(--red) !important}
body .dropdown-menu .divider{background:var(--line);margin:6px 0}

/* Well / jumbotron */
body .well{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-card);box-shadow:none}

/* Class lama portal (custom.css) -> kartu gaya baru */
body .panel-widget-asp{
  background:var(--paper) !important;
  border:1px solid var(--line);
  border-radius:var(--r-card);
  box-shadow:var(--shadow-sm);
  margin-bottom:24px;
  overflow:hidden;
}
body .panel-heading-widget-asp{padding:20px 20px 4px}
body .heading-widget-asp,
body .panel-heading-widget-asp .heading-widget-asp[class*="bg-asp-"]{
  position:relative;
  background:transparent !important;
  color:var(--ink-brown) !important;
  font-family:var(--f-display);
  font-weight:600;
  font-size:19px;
  line-height:1.1;
  text-transform:none;
  text-align:left;
  padding:0 0 0 19px;
  margin:0;
}
body .heading-widget-asp::before{
  content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:9px;height:9px;border-radius:50%;background:var(--red)
}
body .panel-body-widget-asp{margin-top:0;padding:12px 20px 20px}
body .panel-content-widget-asp{padding:0 !important;background:transparent !important}
body .panel-content-detail-asp{border-radius:var(--r-card);box-shadow:var(--shadow-sm);border:1px solid var(--line);background:var(--paper)}
body .asp-link,body .readmore{color:var(--red);font-weight:600}
body .asp-link:hover,body .readmore:hover{color:var(--red-hover)}
body .color-asp-black{color:var(--ink-brown)}
body .bg-asp-blue-tab{background-color:var(--red)}

/* 5. Utility Bootstrap 5 (dipakai modal OTP di BS3) ------------------------ */
.d-none{display:none !important}
.d-block{display:block !important}
.d-flex{display:flex !important}
.justify-content-center{justify-content:center !important}
.justify-content-between{justify-content:space-between !important}
.align-items-center{align-items:center !important}
.gap-2{gap:.5rem !important}
.gap-3{gap:1rem !important}
.w-100{width:100% !important}
.p-0{padding:0 !important}
.mb-2{margin-bottom:.5rem !important}
.mb-3{margin-bottom:1rem !important}
.mt-1{margin-top:.25rem !important}
.mt-2{margin-top:.5rem !important}
.mt-3{margin-top:1rem !important}
.fw-bold{font-weight:700 !important}
body .modal-dialog-centered{display:flex;align-items:center;min-height:calc(100% - 60px)}
body .otp-input{
  width:46px !important;height:56px !important;padding:0 !important;
  font-family:var(--f-mono);font-size:24px !important;font-weight:700;text-align:center;
  border:1px solid var(--line-strong);border-radius:var(--r-input);
}
body .otp-input:focus{border-color:var(--red);box-shadow:0 0 0 3px rgba(221,0,0,.12);outline:0}
@media (max-width:400px){body .otp-input{width:38px !important;height:48px !important;font-size:20px !important}}

/* 6. Komponen u-* ---------------------------------------------------------- */
.u-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:46px;padding:10px 18px;border-radius:var(--r-btn);
  font-family:var(--f-body);font-size:14.5px;font-weight:600;line-height:1.2;white-space:nowrap;
  border:1px solid transparent;cursor:pointer;text-decoration:none !important;
  transition:background-color .15s,border-color .15s,color .15s;
}
.u-btn--primary{background:var(--red);color:var(--cream-text) !important;border-color:var(--red)}
.u-btn--primary:hover,.u-btn--primary:focus{background:var(--red-hover);border-color:var(--red-hover);color:#fff !important}
.u-btn--outline{background:transparent;color:var(--ink) !important;border-color:var(--ink)}
.u-btn--outline:hover,.u-btn--outline:focus{background:var(--ink);color:#fff !important}
.u-btn--ghost{background:transparent;color:var(--red) !important}
.u-btn--ghost:hover{background:var(--red-soft)}
.u-btn--block{width:100%}
.u-btn[disabled],.u-btn.is-disabled{opacity:.45;cursor:not-allowed}

.u-card{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-card);box-shadow:var(--shadow-sm);padding:24px}
.u-card--white{background:#fff}
.u-card__title{position:relative;padding-left:19px;margin:0 0 16px;font-family:var(--f-display);font-weight:600;font-size:19px;line-height:1.1;color:var(--ink-brown)}
.u-card__title::before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);width:9px;height:9px;border-radius:50%;background:var(--red)}

.u-eyebrow{font-size:12px;font-weight:700;letter-spacing:.55px;text-transform:uppercase;color:var(--red)}
.u-mono{font-family:var(--f-mono)}
.u-sr-only{position:absolute !important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}

.u-page-head{display:flex;flex-direction:column;gap:12px;max-width:760px;margin:0 0 32px}
.u-page-head h1,.u-page-head h2{font-size:40px;line-height:1.08;margin:0}
.u-page-head p{font-size:16px;line-height:1.6;color:var(--text-2);margin:0}
@media (max-width:767px){.u-page-head h1,.u-page-head h2{font-size:30px}}

.u-prose{font-size:15px;line-height:1.7;color:var(--text-2)}
.u-prose h1,.u-prose h2,.u-prose h3,.u-prose h4{margin:1.4em 0 .5em;line-height:1.2}
.u-prose p,.u-prose ul,.u-prose ol{margin:0 0 1em}
.u-prose img,.u-prose iframe{max-width:100%;border-radius:12px}
.u-prose table{width:100%;border-collapse:collapse;margin:0 0 1em}
.u-prose td,.u-prose th{border:1px solid var(--line);padding:8px 10px}

/* 7. Shell ------------------------------------------------------------------ */
/* Bootstrap 3.0 versi modifikasi di repo ini TIDAK memasang box-sizing:border-box
   global, dan halaman lama dibangun di atas content-box. Jadi border-box hanya
   untuk komponen v2. */
[class^="u-"],[class*=" u-"],
[class^="u-"]::before,[class*=" u-"]::before,[class^="u-"]::after,[class*=" u-"]::after,
.u-utility *,.u-navbar *,.u-footer *,.u-home *,.u-home *::before,.u-home *::after{box-sizing:border-box}
.u-body{overflow-x:hidden}
.u-app{min-height:100vh;display:flex;flex-direction:column}
.u-wrap{width:100%;max-width:var(--page-max);margin:0 auto;padding-left:var(--gutter);padding-right:var(--gutter);box-sizing:border-box}
.u-skip{position:absolute;left:-9999px;top:8px;z-index:2000;background:var(--ink);color:#fff !important;padding:10px 14px;border-radius:8px}
.u-skip:focus{left:16px}

/* Utility bar */
.u-utility{background:var(--ink);font-size:12px;line-height:1.4}
.u-utility__in{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-top:8px;padding-bottom:8px}
.u-utility p{margin:0}
.u-utility__left{color:var(--paper)}
.u-utility__right{color:var(--cream)}
body .u-utility__right a{color:#ff5a5a;font-weight:600}
body .u-utility__right a:hover{color:#ff8a8a}
@media (max-width:575px){.u-utility__left{display:none}.u-utility__in{justify-content:center}}

/* Navbar */
.u-navbar{position:sticky;top:0;z-index:1030;background:var(--paper);border-bottom:1px solid var(--line)}
.u-navbar__in{display:flex;align-items:center;justify-content:space-between;gap:20px;padding-top:14px;padding-bottom:14px}
.u-logo{display:inline-flex;flex-shrink:0}
.u-logo img{display:block;height:56px;width:auto;max-width:none;float:none}
.u-logo--footer img{height:80px}
.u-navbar__menu{display:flex;align-items:center;gap:16px;flex:1 1 auto;justify-content:space-between;min-width:0}
.u-nav{display:flex;align-items:center;gap:2px;margin:0;padding:0;list-style:none}
.u-nav__item{position:relative;list-style:none}
body .u-nav__link{
  display:flex;align-items:center;gap:6px;padding:10px 11px;border-radius:8px;
  font-size:14.5px;font-weight:500;line-height:1.2;color:var(--ink);white-space:nowrap;text-decoration:none;
  background:none;border:0
}
body .u-nav__link:hover,body .u-nav__link:focus,body .u-nav__item.open > .u-nav__link{background:rgba(19,19,19,.05);color:var(--ink);text-decoration:none}
body .u-nav__item.is-active > .u-nav__link{color:var(--red);font-weight:600}
body .u-nav__link.dropdown-toggle::after{
  content:"";width:7px;height:7px;margin-left:2px;margin-top:-4px;
  border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;transform:rotate(45deg);transition:transform .15s
}
body .u-nav__item.open > .u-nav__link.dropdown-toggle::after{transform:rotate(-135deg);margin-top:3px}
body .u-nav__dropdown{top:calc(100% + 6px);left:0;min-width:230px;margin:0}
body .u-nav__dropdown.dropdown-menu-right{left:auto;right:0}
body .u-nav__sublink.is-active{color:var(--red) !important;font-weight:600}
.u-nav__actions{display:flex;align-items:center;gap:16px;flex-shrink:0}
.u-nav__guest{display:flex;align-items:center;gap:12px}
.u-btn--nav{min-width:104px;min-height:44px;padding:10px 16px}
body .u-nav__user{gap:10px}
.u-nav__avatar{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:50%;background:var(--red-soft);color:var(--red);font-size:14px}
.u-nav__username{max-width:180px;overflow:hidden;text-overflow:ellipsis}
.u-navbar__toggle{display:none;flex-direction:column;justify-content:center;gap:5px;width:44px;height:44px;padding:0 11px;border:1px solid var(--line-strong);border-radius:10px;background:#fff;cursor:pointer}
.u-navbar__bar{display:block;height:2px;border-radius:2px;background:var(--ink);transition:transform .2s,opacity .2s}
.u-navbar.is-open .u-navbar__bar:nth-child(1){transform:translateY(7px) rotate(45deg)}
.u-navbar.is-open .u-navbar__bar:nth-child(2){opacity:0}
.u-navbar.is-open .u-navbar__bar:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* 1200–1439px: 9 item menu dari DB + 2 tombol harus muat dalam satu baris */
@media (min-width:1200px) and (max-width:1439px){
  .u-navbar .u-wrap{padding-left:32px;padding-right:32px}
  .u-navbar__in{gap:14px}
  .u-navbar__menu{gap:12px}
  .u-logo img{height:48px}
  body .u-nav__link{padding:10px 8px;font-size:14px}
  .u-nav__guest{gap:8px}
  .u-btn--nav{min-width:92px;padding:10px 14px}
}
@media (max-width:1199px){
  .u-navbar__in{flex-wrap:wrap;padding-top:12px;padding-bottom:12px}
  .u-navbar__toggle{display:flex}
  .u-navbar__menu{display:none;flex:0 0 100%;flex-direction:column;align-items:stretch;gap:12px;padding:8px 0 12px;border-top:1px solid var(--line);max-height:calc(100vh - 90px);overflow-y:auto}
  .u-navbar.is-open .u-navbar__menu{display:flex}
  .u-nav{flex-direction:column;align-items:stretch;gap:0}
  body .u-nav__link{padding:13px 8px;justify-content:space-between;border-radius:8px}
  body .u-nav__dropdown{position:static;float:none;box-shadow:none;border:0;background:transparent;padding:0 0 6px 12px;min-width:0}
  .u-nav__actions{padding-top:8px;border-top:1px solid var(--line)}
  .u-nav__guest{width:100%}
  .u-nav__guest .u-btn{flex:1 1 0}
  .u-nav--user{width:100%}
}

/* Container konten: #content-element sendiri menjadi container (banyak template
   mengeluarkan beberapa elemen sejajar di level teratas, dan konten xhr juga
   dimuat ke sini). Beranda keluar ke lebar penuh lewat .u-home. */
#content-element.u-main{
  flex:1 0 auto;display:block;width:100%;max-width:var(--page-max);
  margin:0 auto;padding:40px var(--gutter) 72px;box-sizing:border-box
}
#content-element.u-main > .u-home{width:100vw;max-width:none;margin:-40px 0 -72px calc(50% - 50vw)}

/* Footer */
.u-footer{background:var(--paper);border-top:1.5px solid rgba(19,19,19,.2);padding:44px 0 24px;margin-top:0;font-size:13px}
.u-footer__top{display:flex;align-items:flex-start;justify-content:space-between;gap:32px;padding-bottom:25px;border-bottom:1px solid var(--line)}
.u-footer__cols{display:flex;gap:56px;flex-wrap:wrap}
.u-footer__col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px}
body .u-footer__head{margin:0 0 14px;font-family:var(--f-body);font-size:14px;font-weight:700;letter-spacing:.88px;text-transform:uppercase;color:var(--red)}
body .u-footer__col a{color:var(--ink);font-size:13px}
body .u-footer__col a:hover{color:var(--red)}
.u-footer__bottom{padding-top:20px;text-align:center}
.u-footer__bottom p{margin:0;font-size:12.5px;color:var(--grey)}
@media (max-width:767px){
  .u-footer__top{flex-direction:column}
  .u-footer__cols{gap:28px 40px}
  .u-logo--footer img{height:64px}
}

/* 8. Beranda (.u-home) ---------------------------------------------------- */
.u-home{display:block}
.u-sec-head{display:flex;flex-direction:column;gap:12px;max-width:640px;margin:0 0 32px}
body .u-sec-head h2{margin:0;font-family:var(--f-display);font-weight:600;font-size:40px;line-height:1.08;color:var(--ink-brown)}
.u-sec-head p{margin:0;font-size:16px;line-height:1.6;color:var(--text-2)}
.u-empty{margin:0;padding:24px;border:1px dashed var(--line-strong);border-radius:12px;text-align:center;color:var(--grey);background:#fff}

/* Hero */
.u-hero{
  background:
    radial-gradient(ellipse 1240px 480px at 85% -10%,rgba(201,154,66,.16) 0%,rgba(201,154,66,0) 60%),
    var(--paper);
}
.u-hero__grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:56px;padding-top:64px;padding-bottom:56px;align-items:center}
.u-hero__copy{display:flex;flex-direction:column;gap:17px}
body .u-hero__title{margin:0;max-width:560px;font-family:var(--f-display);font-weight:600;font-size:54px;line-height:1.08;color:var(--ink)}
body .u-hero__title em{font-style:italic;color:var(--red)}
.u-hero__lead{margin:0;max-width:575px;font-size:17px;line-height:1.6;color:#5f5f5f}
.u-hero__cta{padding:12px 0 16px}
.u-hero__media{align-self:start;min-width:0}

.u-track{background:#fff3f3;border:1.5px solid var(--line-strong);border-radius:var(--r-card);padding:18px;display:flex;flex-direction:column;gap:12px}
body .u-track__title{margin:0;font-family:var(--f-body);font-size:18px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:var(--ink)}
.u-track__form{display:flex;align-items:flex-end;gap:16px;margin:0}
.u-track__fields{flex:1 1 auto;min-width:0;display:flex;gap:16px}
.u-track__fields .u-field{flex:1 1 0;min-width:0}
body .u-track .u-field__label{font-size:12px;font-weight:600;letter-spacing:.55px;text-transform:uppercase;color:var(--ink)}
body .u-track .form-control{background:#fff;font-size:13px}
.u-track__submit{flex-shrink:0}
.u-track__hint{margin:0;font-size:12px;line-height:1.5;color:var(--grey)}

.u-slider{position:relative;background:var(--paper);border:1px solid var(--line);border-radius:var(--r-media);box-shadow:var(--shadow-sm);overflow:hidden}
.u-slider__viewport{overflow:hidden;aspect-ratio:4/3;background:#eee}
.u-slider__track{display:flex;height:100%;transition:transform .45s ease}
.u-slider__slide{position:relative;flex:0 0 100%;height:100%;overflow:hidden;background:#222}
/* Rasio gambar dari admin bebas: latar blur dari gambar yang sama + gambar utuh (contain),
   supaya infografis tidak terpotong. */
.u-slider__slide::before{content:"";position:absolute;inset:-24px;background:var(--u-slide-bg) center/cover no-repeat;filter:blur(18px) brightness(.85);transform:scale(1.05)}
.u-slider__slide img{position:relative;display:block;width:100%;height:100%;object-fit:contain}
.u-slider__dots{display:flex;justify-content:center;gap:8px;padding:16px;background:var(--paper)}
.u-slider__dots.is-single{display:none}
.u-slider__dot{width:10px;height:10px;padding:0;border:0;border-radius:5px;background:rgba(102,102,102,.25);cursor:pointer;transition:width .2s,background-color .2s}
.u-slider__dot[aria-current="true"]{background:var(--red);width:24px}
.u-slider.is-empty .u-slider__viewport{background:url(../images/v2/stats-bg.jpg) center/cover no-repeat}
.u-slider.is-empty .u-slider__dots{display:none}
@media (prefers-reduced-motion:reduce){.u-slider__track{transition:none}}

/* Statistik */
.u-stats{position:relative;overflow:hidden;color:#fff}
.u-stats__bg{position:absolute;inset:0;background:url(../images/v2/stats-bg.jpg) center 40%/cover no-repeat}
.u-stats__bg::after{content:"";position:absolute;inset:0;background:rgba(89,0,0,.8)}
.u-stats__in{position:relative;padding-top:40px;padding-bottom:40px}
body .u-stats__title{margin:0 0 16px;text-align:center;font-family:var(--f-display);font-weight:700;font-size:32px;line-height:1.2;letter-spacing:2px;text-transform:uppercase;color:#fff}
.u-stats__row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:32px}
.u-stat{display:flex;flex-direction:column;align-items:center;gap:24px;padding:28px 16px;text-align:center}
body .u-stat__period{margin:0;font-family:var(--f-body);font-size:18px;font-weight:700;line-height:1.2;letter-spacing:2px;text-transform:uppercase;color:#fff}
.u-stat__bar{width:100%;height:5px;border-radius:999px;background:rgba(250,250,250,.35)}
.u-stat__body{display:flex;flex-direction:column;gap:22px;width:100%;margin:0}
.u-stat__grp{display:flex;flex-direction:column-reverse;gap:6px}
.u-stat__grp dt{font-size:15px;font-weight:500;line-height:1.3;letter-spacing:1px}
.u-stat__grp dd{margin:0;font-weight:700;line-height:1.05;letter-spacing:1px}
.u-stat__grp--in dt{color:#fff}
.u-stat__grp--in dd{font-size:42px;color:var(--paper)}
.u-stat__grp--resp dt,.u-stat__grp--resp dd{color:var(--red-on-dark)}
.u-stat__grp--done dt,.u-stat__grp--done dd{color:var(--gold)}
.u-stat__grp--resp dd,.u-stat__grp--done dd{font-size:32px}

/* Aduan terbaru */
.u-recent{background:#fff}
.u-recent__in{padding-top:64px;padding-bottom:64px;display:flex;flex-direction:column}
.u-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px}
.u-aduan{background:var(--paper);border-radius:var(--r-card);box-shadow:var(--shadow-sm);border:1px solid transparent;transition:border-color .15s,box-shadow .15s,transform .15s}
.u-aduan:hover{border-color:rgba(221,0,0,.25);box-shadow:var(--shadow-md)}
body .u-aduan__link{display:flex;flex-direction:column;height:100%;padding:17px 18px 16px;color:inherit;text-decoration:none}
body .u-aduan__link:hover,body .u-aduan__link:focus{color:inherit;text-decoration:none}
.u-aduan__top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.u-aduan__cat{font-size:11px;font-weight:700;color:var(--red);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-transform:capitalize}
.u-aduan__date{flex-shrink:0;font-family:var(--f-mono);font-size:10.5px;color:#6f6f6f}
body .u-aduan__title{margin:12px 0 4px;font-family:var(--f-display);font-weight:600;font-size:20px;line-height:1.25;color:var(--ink-brown);text-transform:capitalize;overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.u-aduan__desc{margin:0 0 24px;font-size:13.5px;line-height:1.55;color:var(--text-3);overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;min-height:calc(1.55em*3)}
.u-aduan__foot{margin-top:auto;padding-top:16px;border-top:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:12px}
.u-aduan__author{font-size:13.5px;font-weight:600;color:var(--ink-brown);text-transform:capitalize;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.u-aduan__loc{font-size:12px;color:var(--grey);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.u-recent__more{display:flex;justify-content:center;margin-top:32px}

/* Kirim aspirasi cepat */
.u-quick{
  position:relative;overflow:hidden;
  background:
    linear-gradient(180.5deg,rgba(221,0,0,0) 64%,rgba(221,0,0,.9) 99%),
    radial-gradient(ellipse at 52% 40%,#dd0000 0%,#ab0000 50%,#af0404 75%,#d40000 100%);
}
.u-quick::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(to right,rgba(120,0,0,.2) 1.5px,transparent 1.5px),linear-gradient(to bottom,rgba(120,0,0,.2) 1.5px,transparent 1.5px);
  background-size:26px 26px;
}
.u-quick__grid{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,800px);gap:48px;padding-top:76px;padding-bottom:76px;align-items:start}
.u-quick__aside{display:flex;flex-direction:column;gap:16px;padding-top:13px}
body .u-quick__title{margin:0;font-family:var(--f-display);font-weight:600;font-size:36px;line-height:1.08;color:var(--cream-text)}
.u-quick__lead{margin:0 0 14px;max-width:420px;font-size:15px;line-height:1.6;color:rgba(250,250,250,.92)}
body .u-play{display:flex;align-items:center;gap:16px;max-width:450px;padding:20px;border-radius:12px;background:rgba(250,250,250,.1);border:2px solid rgba(250,250,250,.8);color:var(--paper);text-decoration:none;transition:background-color .15s}
body .u-play:hover,body .u-play:focus{background:rgba(250,250,250,.18);color:#fff;text-decoration:none}
.u-play__icon img{display:block;width:48px;height:auto}
.u-play__txt{display:flex;flex-direction:column;gap:4px}
.u-play__t1{font-size:14px;font-weight:700}
.u-play__t2{font-size:12.5px;color:rgba(250,250,250,.85)}
.u-play__t3{font-size:12.5px;font-weight:700}

/* Kartu form + stepper (dipakai juga di luar beranda) */
.u-fcard{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-card);padding:32px;display:flex;flex-direction:column;gap:28px;box-shadow:var(--shadow-md)}
.u-fcard > .alert{margin:0}
.u-stepper{display:flex;align-items:center;gap:16px;margin:0;padding:0 24px;list-style:none}
.u-step{display:flex;align-items:center;gap:12px;flex-shrink:0}
.u-step__num{width:44px;height:44px;border-radius:50%;border:3px solid rgba(28,19,13,.2);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:17px;color:rgba(28,19,13,.35);background:transparent;transition:all .2s}
.u-step__lbl{font-size:15px;font-weight:500;color:rgba(28,19,13,.45);white-space:nowrap}
.u-step.is-active .u-step__num,.u-step.is-done .u-step__num{border-color:var(--red);color:var(--red)}
.u-step.is-done .u-step__num{background:var(--red);color:#fff}
.u-step.is-active .u-step__lbl{font-weight:700;color:var(--red)}
.u-step.is-done .u-step__lbl{color:var(--ink-brown)}
.u-step__line{flex:1 1 0;min-width:16px;height:3px;border-radius:3px;background:rgba(28,19,13,.14)}
.u-step.is-done + .u-step__line{background:var(--red)}

.u-wizard{margin:0}
.u-step-pane{border:0;margin:0;padding:0;min-width:0;display:flex;flex-direction:column;gap:24px}
.u-step-pane[hidden],.u-step-error[hidden]{display:none !important}
.u-fhead{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding-bottom:20px;border-bottom:1px solid var(--line)}
.u-fhead__l{display:flex;flex-direction:column;gap:6px}
body .u-fhead__title{margin:0;border:0;padding:0;width:auto;font-family:var(--f-display);font-weight:600;font-size:23px;line-height:1.1;color:var(--ink-brown)}
.u-fhead__title:focus{outline:none}
.u-fhead__sub{margin:0;font-size:13px;line-height:1.5;color:#6b5f52}
.u-fhead__req{margin:0;font-size:12px;font-weight:700;color:var(--grey);white-space:nowrap}
.u-fhead__req b,.u-field__label b{color:var(--red)}
.u-fields{display:flex;flex-direction:column;gap:16px}
.u-frow{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 28px;align-items:start}
.u-field{display:flex;flex-direction:column;gap:7px;min-width:0}
body .u-field__label{display:block;margin:0;font-size:12.5px;font-weight:700;line-height:1.3;color:var(--ink-brown)}
.u-field__help{margin:0;font-size:12px;line-height:1.5;color:var(--grey)}
.u-field__help--warn{color:#8f1a14;font-weight:600}
body .u-fields .form-control{background:#fff}
body .u-fields .select2-container{width:100% !important}
.u-static{min-height:46px;display:flex;align-items:center;padding:10px 14px;border:1px dashed var(--line-strong);border-radius:var(--r-input);background:#f6f4f1;color:var(--ink-brown);font-size:14px;overflow-wrap:anywhere}

.u-radios{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 28px}
body .u-radio{position:relative;display:flex;align-items:center;gap:14px;min-height:52px;margin:0;padding:9px 17px;border:1px solid rgba(28,19,13,.2);border-radius:var(--r-input);background:#fff;cursor:pointer;font-size:13.5px;font-weight:700;color:var(--ink)}
.u-radio input{position:absolute;opacity:0;width:1px;height:1px;margin:0}
.u-radio__dot{width:14px;height:14px;flex-shrink:0;border-radius:50%;border:1px solid rgba(19,19,19,.3);background:#fff;display:flex;align-items:center;justify-content:center}
.u-radio__dot::after{content:"";width:8px;height:8px;border-radius:50%;background:var(--red);display:none}
body .u-radio:has(input:checked){background:var(--red-soft);border-color:var(--red);color:var(--red)}
.u-radio:has(input:checked) .u-radio__dot{border-color:var(--red)}
.u-radio:has(input:checked) .u-radio__dot::after{display:block}
.u-radio:has(input:focus-visible){outline:2px solid var(--red);outline-offset:2px}
body .u-radio:has(input:disabled){opacity:.5;cursor:not-allowed;background:#f3f1ee}

.u-file__input{position:absolute !important;width:1px !important;height:1px !important;opacity:0;overflow:hidden;clip:rect(0 0 0 0)}
body .u-file{display:flex;align-items:stretch;min-height:46px;margin:0;border:1px dashed var(--line-strong);border-radius:var(--r-input);background:#fff;cursor:pointer;overflow:hidden;font-weight:400}
.u-file__btn{display:flex;align-items:center;padding:0 16px;background:var(--ink);color:#fff;font-size:13px;font-weight:600;white-space:nowrap}
body .u-file__name{flex:1 1 auto;min-width:0;border:0;background:transparent;padding:0 14px;font-size:13px;color:var(--ink-brown);cursor:pointer;outline:0}
.u-file:hover{border-color:var(--ink)}
.u-field:has(.u-file__input:focus-visible) .u-file{outline:2px solid var(--red);outline-offset:2px}
.u-field:has(.u-file__input.error) .u-file{border-color:#b3261e;border-style:solid}

body .u-check{display:flex;align-items:flex-start;gap:10px;margin:0;font-size:13px;font-weight:400;line-height:1.55;color:var(--text-2);cursor:pointer}
.u-check input{margin-top:3px;width:16px;height:16px;flex-shrink:0}

.u-summary{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 28px;margin:0;padding:16px 18px;background:#fff;border:1px solid var(--line);border-radius:12px}
.u-summary dt{font-size:11.5px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;color:var(--grey)}
.u-summary dd{margin:2px 0 0;font-size:14px;font-weight:600;color:var(--ink-brown);overflow-wrap:anywhere}

.u-step-error{margin:0;padding:10px 14px;border-radius:10px;background:#fdeceb;border:1px solid #f5c8c4;color:#8f1a14;font-size:13px;font-weight:600}
.u-factions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px}
body .u-fcard .select2-container--default .select2-selection--single{background:#fff}
body .u-fcard .error + .select2 .select2-selection,body .u-fcard .select2-selection.error{border-color:#b3261e}
body .g-recaptcha{min-height:78px}

/* Kinerja OPD */
.u-opd{background:#fff}
.u-opd > .u-wrap{padding-top:64px;padding-bottom:64px}
.u-opd__cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px;align-items:start}
.u-rank{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-card);box-shadow:var(--shadow-sm);padding:32px;display:flex;flex-direction:column;gap:16px}
body .u-rank__head{position:relative;margin:0;padding-left:19px;font-family:var(--f-display);font-weight:600;font-size:19px;line-height:1.1;color:var(--ink-brown)}
.u-rank__head::before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);width:9px;height:9px;border-radius:50%;background:var(--red)}
.u-rank__list{display:flex;flex-direction:column;gap:12px;margin:0;padding:0;list-style:none}
.u-rank__row{display:flex;align-items:center;gap:14px}
.u-rank__no{width:46px;height:46px;flex-shrink:0;display:flex;align-items:center;justify-content:center}
.u-rank__no span{width:32px;height:32px;border:3px solid var(--red);border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:var(--f-mono);font-weight:700;font-size:14px;color:var(--red)}
.u-rank__mid{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:3px}
.u-rank__name{margin:0;font-size:14.5px;font-weight:600;line-height:1.3;color:var(--ink-brown)}
.u-rank__sub{margin:0;font-size:12px;color:var(--grey)}
.u-rank__val{flex-shrink:0;font-family:var(--f-mono);font-weight:700;font-size:14px;color:var(--red);white-space:nowrap}
.u-rank__details summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:12px;padding-top:8px;cursor:pointer;font-size:13px;font-weight:600;color:var(--red)}
.u-rank__details summary::-webkit-details-marker{display:none}
.u-rank__details summary img{width:24px;height:24px;transition:transform .2s}
.u-rank__details[open] summary img{transform:rotate(45deg)}
.u-rank__formula{padding-top:10px;font-size:12.5px;line-height:1.6;color:var(--grey)}
.u-rank__formula p{margin:0 0 6px}
.u-rank__formula ol{margin:0;padding-left:18px}

/* Responsif beranda */
@media (max-width:1199px){
  body .u-hero__title{font-size:46px}
  .u-hero__grid{gap:40px}
  .u-stats__row{gap:16px}
  .u-stat{padding:24px 8px}
  .u-stat__grp--in dd{font-size:34px}
  .u-stat__grp--resp dd,.u-stat__grp--done dd{font-size:26px}
  .u-quick__grid{grid-template-columns:1fr;gap:32px;padding-top:56px;padding-bottom:56px}
  .u-quick__aside{padding-top:0}
  .u-cards{gap:24px}
}
@media (max-width:991px){
  .u-hero__grid{grid-template-columns:1fr;padding-top:40px;padding-bottom:40px}
  .u-hero__media{max-width:640px;width:100%}
  .u-stats__row{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 16px}
  .u-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .u-opd__cards{grid-template-columns:1fr}
  body .u-sec-head h2{font-size:32px}
}
@media (max-width:767px){
  body .u-hero__title{font-size:36px}
  .u-hero__lead{font-size:16px}
  .u-track__form{flex-direction:column;align-items:stretch}
  .u-track__fields{flex-direction:column;gap:12px}
  .u-track__submit{width:100%}
  .u-stats__in{padding-top:32px;padding-bottom:32px}
  body .u-stats__title{font-size:24px}
  .u-stat{padding:18px 4px;gap:16px}
  body .u-stat__period{font-size:14px;letter-spacing:1px}
  .u-stat__body{gap:14px}
  .u-stat__grp dt{font-size:12.5px;letter-spacing:.3px}
  .u-stat__grp--in dd{font-size:28px}
  .u-stat__grp--resp dd,.u-stat__grp--done dd{font-size:22px}
  .u-recent__in,.u-opd > .u-wrap{padding-top:48px;padding-bottom:48px}
  .u-cards{grid-template-columns:1fr;gap:16px}
  body .u-sec-head h2{font-size:28px}
  body .u-quick__title{font-size:28px}
  .u-fcard{padding:20px 16px;gap:22px}
  .u-stepper{padding:0;gap:8px}
  .u-step__lbl{display:none}
  .u-step.is-active .u-step__lbl{display:inline;font-size:13px}
  .u-step__num{width:36px;height:36px;font-size:15px}
  .u-frow,.u-radios,.u-summary{grid-template-columns:1fr}
  .u-fhead{flex-direction:column;gap:8px}
  .u-factions{gap:12px}
  .u-factions:has(.u-factions__spacer){grid-template-columns:1fr}
  .u-factions__spacer{display:none}
  .u-rank{padding:20px}
  body .g-recaptcha{transform:scale(.92);transform-origin:0 0}
}

/* Modal OTP (dipakai form cepat, form lengkap, keanggotaan, daftar akun) */
body #otpModal .modal-dialog{max-width:480px;width:calc(100% - 32px);margin-left:auto;margin-right:auto}
body #otpModal .modal-footer{display:flex;flex-direction:column;align-items:stretch;gap:8px;text-align:center}
body #otpModal .modal-footer .btn{margin:0}
body #otpModal .modal-footer .btn-link{align-self:center}
body #otpModal #otpError{display:block}
body #otpModal #otpError.d-none{display:none !important}

/* 9. Halaman (sub-page) --------------------------------------------------- */
.u-page{display:block}

/* Judul halaman lama (.head-area .title-area), dipakai ±16 template */
body .head-area,body .member-head-area{margin:0 0 28px;padding:0;float:none;width:auto}
body .title-area,body .member-head-area .title-area{
  margin:0;padding:0 !important;border:0 !important;
  font-family:var(--f-display);font-weight:600;font-size:36px !important;line-height:1.1;
  letter-spacing:0;word-spacing:normal;text-transform:none;color:var(--ink-brown);cursor:default
}
@media (max-width:767px){body .title-area,body .member-head-area .title-area{font-size:28px !important}}
body .wrap-perizinan{background:transparent;padding:0;margin:0}

/* Kartu gaya lama */
body .panel-custom{background:var(--paper) !important;border:1px solid var(--line) !important;border-radius:var(--r-card) !important;box-shadow:var(--shadow-sm) !important;margin:0 0 24px !important;overflow:hidden}
body .panel-heading-custom{padding:28px 28px 8px !important;margin:0 !important;background:transparent}
body .panel-heading-custom .panel-title,body .form-signin-heading{font-family:var(--f-display);font-weight:600;font-size:24px !important;color:var(--ink-brown)}
body .panel-body-custom{padding:8px 28px 28px !important;background:transparent !important}
body .jumbotron-blue,body .jumbotron-coustom,body .jumbotron-white{background:var(--paper) !important;border:1px solid var(--line);border-radius:var(--r-card);padding:28px;box-shadow:var(--shadow-sm)}
body .jumbotron-blue-head{background:var(--ink);border-radius:var(--r-card) var(--r-card) 0 0}
body .form-horizontal .control-label{text-align:left;padding-top:13px}
body .alert-lg{padding:18px 20px;font-size:15px}
body .alert .alert-link{color:inherit;text-decoration:underline;font-weight:700}
body .alert-info .alert-link{color:var(--red)}

/* Tab halaman: segmented control */
body .nav-page-link,body #keluhan-tabs,body .tab-group-page{border-bottom:1px solid var(--line);margin:0 0 24px}
body .tab-content-pad{padding-top:0}

/* Area anggota */
body ul.nav-pills-custom{background:var(--paper) !important;border:1px solid var(--line);border-radius:var(--r-card);padding:8px;box-shadow:var(--shadow-sm)}
body ul.nav-pills-custom.nav-stacked > li + li{margin-top:2px}
body ul.nav-pills-custom > li > a{background:transparent !important;color:var(--ink) !important;border-radius:9px !important;font-size:14px;font-weight:600;padding:11px 14px}
body ul.nav-pills-custom > li > a:hover,body ul.nav-pills-custom > li > a:focus{background:var(--red-soft) !important;color:var(--red) !important}
body ul.nav-pills-custom > li.active > a{background:var(--red) !important;color:#fff !important}
body .table-custom-member{background:#fff;border-radius:12px;overflow:hidden}
body .table-custom-member th{background:var(--paper) !important;color:var(--ink-brown) !important}
body .table-custom-member tbody tr:hover{background:var(--red-soft)}
body .panel-grey{border-radius:var(--r-card);border-color:var(--line)}
@media (max-width:991px){body ul.nav-pills-custom.nav-stacked > li{display:inline-block;margin:0 4px 4px 0}}

/* FAQ (jQuery UI accordion) */
.u-faq{display:flex;flex-direction:column;gap:12px;max-width:900px}
body .u-faq .ui-accordion-header{
  position:relative;margin:0;padding:18px 56px 18px 20px !important;border:1px solid var(--line) !important;border-radius:12px !important;
  background:var(--paper) !important;font-family:var(--f-body);font-size:15.5px;font-weight:700;color:var(--ink-brown) !important;cursor:pointer
}
body .u-faq .ui-accordion-header a{color:inherit !important;padding:0 !important}
body .u-faq .ui-accordion-header .ui-icon{display:none}
body .u-faq .ui-accordion-header::after{
  content:"+";position:absolute;right:20px;top:50%;transform:translateY(-50%);width:26px;height:26px;border-radius:50%;
  background:var(--red-soft);color:var(--red);font-size:18px;line-height:26px;text-align:center;transition:transform .2s
}
body .u-faq .ui-accordion-header.ui-state-active{border-color:rgba(221,0,0,.35) !important;border-bottom-left-radius:0 !important;border-bottom-right-radius:0 !important}
body .u-faq .ui-accordion-header.ui-state-active::after{transform:translateY(-50%) rotate(45deg)}
body .u-faq .ui-accordion-content{margin-top:-12px;padding:16px 20px 20px !important;border:1px solid rgba(221,0,0,.35) !important;border-top:0 !important;border-radius:0 0 12px 12px !important;background:#fff !important;font-family:var(--f-body)}

/* Login / auth */
.u-auth{display:flex;justify-content:center;padding:8px 0 16px}
.u-auth__card{width:100%;max-width:480px;background:var(--paper);border:1px solid var(--line);border-radius:var(--r-card);box-shadow:var(--shadow-md);padding:32px}
.u-auth__head{display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;margin-bottom:24px}
.u-auth__logo{display:block;height:72px;width:auto}
body .u-auth__title{margin:4px 0 0;font-size:26px}
.u-auth__sub{margin:0;font-size:14px;color:var(--grey)}
.u-auth__row{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:13.5px}
.u-auth__row a{font-weight:600}
.u-auth__foot{margin:20px 0 0;padding-top:18px;border-top:1px solid var(--line);text-align:center;font-size:14px;color:var(--text-2)}
.u-auth__foot a{font-weight:700}
@media (max-width:480px){.u-auth__card{padding:24px 18px}body .g-recaptcha{transform:scale(.9);transform-origin:0 0}}

/* Semua aspirasi: filter + kartu + badge */
.u-filter{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-card);padding:16px;margin:0 0 28px;box-shadow:var(--shadow-sm)}
.u-filter__bar{display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.u-filter__search{flex:1 1 280px;min-width:0}
.u-filter__actions{display:flex;flex-wrap:wrap;gap:8px}
.u-filter__actions .u-btn{min-height:44px;padding:9px 14px;font-size:13.5px}
.u-filter__grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px 16px;padding-top:16px}
#collapsePosyandu .u-filter__grid{grid-template-columns:repeat(2,minmax(0,1fr));max-width:720px}
body .u-filter .panel-widget-asp{box-shadow:none;border:0;margin:0;background:transparent !important}
body .u-filter select,body .u-filter .select2-container{width:100% !important;margin-top:0 !important}
@media (max-width:991px){.u-filter__grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:575px){.u-filter__grid,#collapsePosyandu .u-filter__grid{grid-template-columns:1fr}.u-filter__actions .u-btn{flex:1 1 auto}}
.u-cards--list{margin-bottom:24px}
.u-badge{display:inline-flex;align-items:center;gap:6px;max-width:55%;padding:4px 10px;border-radius:999px;font-size:11.5px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#fff;background:var(--u-badge,#666)}
.u-paging{display:flex;justify-content:flex-end}
body .u-paging .pagination{margin:0}

/* Detail aduan */
.u-back{display:inline-flex;align-items:center;gap:8px;margin-bottom:12px;font-size:14px;font-weight:600}
.u-detail__head{margin-bottom:24px}
body .u-detail__title{margin:0;font-size:36px;line-height:1.12;text-transform:capitalize;overflow-wrap:anywhere}
.u-detail__grid{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:24px;align-items:start}
.u-detail__main,.u-detail__side{display:flex;flex-direction:column;gap:20px;min-width:0}
.u-detail__meta{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
.u-detail__meta .u-badge{max-width:60%}
.u-detail__id{font-size:13px;color:var(--grey)}
.u-detail__by{margin:0 0 14px;font-size:13.5px;color:var(--grey)}
.u-detail__by b{color:var(--ink-brown);text-transform:capitalize}
.u-detail__text{font-size:15.5px;color:var(--ink-brown);overflow-wrap:anywhere}
.u-detail__telp{margin:8px 0 0;font-size:12px;color:var(--grey)}
.u-detail__kv{margin:0;font-size:14px;line-height:1.55}
.u-share{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:18px;padding-top:16px;border-top:1px solid var(--line)}
.u-share__label{font-size:12.5px;font-weight:700;color:var(--grey);margin-right:4px}
body .u-share .u-share__btn{display:inline-flex;align-items:center;gap:6px;width:auto;height:auto;padding:6px 12px;border:1px solid var(--line-strong);border-radius:8px;background:#fff !important;color:var(--ink);font-size:13px;font-weight:600;text-decoration:none}
body .u-share .u-share__btn:hover{border-color:var(--ink);color:var(--ink)}
.u-attach{border-radius:var(--r-card);overflow:hidden;background:#1b1b1b;box-shadow:var(--shadow-sm)}
body .u-attach .item{height:380px;background:#1b1b1b}
body .u-attach .item img{width:100%;height:100%;object-fit:contain}
body .u-attach .carousel-control{display:flex;align-items:center;justify-content:center;width:12%;background-image:none !important;opacity:.85}
body .u-attach .carousel-control .fa{font-size:22px}
@media (max-width:767px){body .u-attach .item{height:260px}}
.u-detail__respon-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap}
.u-detail__respon-head .nav-tabs{flex:1 1 auto;margin-bottom:0}
.u-rating{display:flex;align-items:center;gap:8px;padding-bottom:6px}
.u-rating #rating_label{margin:0;font-family:var(--f-mono);font-weight:700;font-size:13px;color:var(--grey)}
body .u-detail__respon .tab-content{padding-top:16px}
.u-responses{display:flex;flex-direction:column;gap:12px}
.u-response{padding:14px 16px;border:1px solid var(--line);border-radius:12px;background:var(--paper)}
.u-response__head{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
body .u-response .response-poster{margin:0;font-family:var(--f-body);font-size:14.5px;font-weight:700;color:var(--ink-brown)}
.u-response .response-detail{color:var(--grey);font-size:12px}
.u-response__text{margin-top:8px;font-size:14px;line-height:1.6;overflow-wrap:anywhere}
.u-response__files{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
body .u-response__files img,body .attachment_image{max-width:220px;max-height:160px;border-radius:8px}
.u-thumbs{text-align:center;padding:14px;border:1px dashed var(--line-strong);border-radius:12px}
.u-thumbs p{margin:0 0 8px;font-size:13.5px}
.u-thumbs__btns{display:flex;justify-content:center;gap:16px;font-size:24px}
.u-thumbs__btns a{color:var(--grey)}
.u-kv{display:flex;flex-direction:column;gap:8px;margin:0 0 12px}
.u-kv > div{display:grid;grid-template-columns:96px minmax(0,1fr);gap:10px;font-size:13.5px}
.u-kv dt{color:var(--grey);font-weight:600}
.u-kv dd{margin:0;color:var(--ink-brown);overflow-wrap:anywhere}
.u-map{width:100%;height:260px;border-radius:12px;overflow:hidden;border:1px solid var(--line)}
@media (max-width:991px){.u-detail__grid{grid-template-columns:1fr}}
@media (max-width:767px){body .u-detail__title{font-size:28px}}

/* Dokumen (Dasar Hukum / Laporan / SOP) */
.u-docs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.u-doc{display:flex;align-items:center;gap:16px;padding:18px;background:var(--paper);border:1px solid var(--line);border-radius:var(--r-card);box-shadow:var(--shadow-sm)}
.u-doc__icon{position:relative;flex-shrink:0;width:52px;height:60px;border-radius:10px;background:var(--red-soft);color:var(--red);display:flex;align-items:center;justify-content:center;font-size:26px}
.u-doc__ext{position:absolute;bottom:-6px;right:-6px;padding:1px 6px;border-radius:6px;background:var(--red);color:#fff;font-size:10px;font-weight:700;font-family:var(--f-mono)}
.u-doc__body{flex:1 1 auto;min-width:0}
body .u-doc__title{margin:0 0 4px;font-family:var(--f-body);font-size:15px;font-weight:700;line-height:1.4;color:var(--ink-brown);overflow-wrap:anywhere}
.u-doc__date{margin:0;font-family:var(--f-mono);font-size:12px;color:var(--grey)}
.u-doc__actions{display:flex;gap:8px;flex-shrink:0}
.u-doc__actions .u-btn{min-height:40px;padding:8px 14px;font-size:13.5px}
.u-doc-modal__body{padding:0 !important}
.u-doc-modal__body iframe{display:block;width:100%;height:75vh;border:0}
@media (max-width:991px){.u-docs{grid-template-columns:1fr}}
@media (max-width:575px){.u-doc{flex-wrap:wrap}.u-doc__actions{width:100%}.u-doc__actions .u-btn{flex:1 1 0}}

/* Kirim Aspirasi (form lengkap) */
body #form-complaint .form-group{margin-left:0;margin-right:0}
body #form-complaint .nicEdit-panelContain{border-radius:8px 8px 0 0;border-color:var(--line-strong) !important}
body #form-complaint .nicEdit-main{outline:0;min-height:160px}
body .lokasi-map-wrapper,body #lokasi_map_canvas{border-radius:12px;overflow:hidden}

/* Tab lama: bootstrap.css memasang border biru !important di semua .tab-pane,
   custom.css memberi bayangan di tab aktif, style.css mewarnai link navy tebal. */
body .tab-pane{border:0 !important;border-radius:0 !important}
body .tab-content-pad{padding:0}
body .bg-nav.nav-tabs > li.active > a,
body .bg-nav.nav-tabs > li.active > a:hover,
body .bg-nav.nav-tabs > li.active > a:focus{box-shadow:none}
body .nav-tabs > li > a[style*="border-radius"]{border-radius:0 !important}
body .tab-content a:not(.btn):not(.u-btn),body .panel-body a:not(.btn):not(.u-btn){color:var(--red);font-weight:600}
body .tab-content a:not(.btn):not(.u-btn):hover,body .panel-body a:not(.btn):not(.u-btn):hover{color:var(--red-hover)}
body .u-detail__respon .comment{margin:0}

/* Dialog gtAlert / gtConfirm / gtPrompt (jquery.alerts.js) memakai
   <div id="popup_container" class="modal">; tanpa ini Bootstrap 3 menyembunyikannya.
   Posisi ditengahkan lewat CSS karena _reposition() di jquery.alerts.js dan
   gtfw.popup.js menghasilkan NaN: jQuery UI 1.8.18 + jQuery 1.8.0 membuat
   outerWidth()/outerHeight() mengembalikan objek jQuery, bukan angka. */
body #popup_container.modal{display:block !important;z-index:1060;width:520px;max-width:calc(100vw - 32px);overflow:visible}
body #popup_container.modal,body .gtfw_popup_container.modal,body .gtfw_popbox_container.modal{
  position:fixed !important;top:50% !important;left:50% !important;right:auto !important;bottom:auto !important;
  transform:translate(-50%,-50%);max-height:calc(100vh - 32px)
}
body #popup_container .modal-dialog{margin:0;width:auto}
body #popup_overlay{z-index:1055 !important;background:rgba(19,19,19,.55) !important;opacity:1 !important}

/* 10. Form iframe (complain/frameForm) --------------------------------------
   Ditanam di situs pihak lain: tinggi total tidak boleh bertambah dibanding
   versi lama dan tidak boleh ada scroll horizontal di lebar 320px. */
body.u-embed{background:#fff !important;font-size:14px !important;overflow-x:hidden}
.u-embed .main-frame{max-width:100%;overflow-x:hidden}
.u-embed .page-frame{padding:0 4px}
.u-embed .head-area{margin:0 0 8px !important}
.u-embed .head-area .title{margin:8px 0 4px}
.u-embed .head-area img{height:48px;width:auto;max-width:100%}
.u-embed .nav-tabs{margin-bottom:0}
.u-embed .nav-tabs > li > a{padding:8px 2px;font-size:13.5px}
body.u-embed .jumbotron-blue{padding:12px 0 0 !important;border:0 !important;box-shadow:none !important;background:#fff !important}
body.u-embed .form-control,body.u-embed input.set_height,body.u-embed select.set_height{height:40px !important;padding:0 12px;font-size:13.5px}
body.u-embed textarea.form-control{min-height:84px;padding:10px 12px}
body.u-embed .select2-container--default .select2-selection--single,
body.u-embed .select2-container--default .select2-selection--multiple{min-height:40px}
body.u-embed .select2-container--default .select2-selection--single .select2-selection__rendered{line-height:38px;font-size:13.5px}
body.u-embed .select2-container--default .select2-selection--single .select2-selection__arrow{height:38px}
body.u-embed .form-group{margin-bottom:10px}
body.u-embed .form-horizontal .control-label{padding-top:10px;font-size:12.5px}
body.u-embed h3.no-margin,body.u-embed .form-complaint h3{margin:6px 0 2px;font-size:18px}
body.u-embed .btn{padding:8px 14px;font-size:13.5px}
body.u-embed .btn-lg{padding:10px 18px}
body.u-embed .floating-label{color:var(--grey)}
body.u-embed .floating-group.focused .floating-label,
body.u-embed .floating-group .floating-control:not(:placeholder-shown) + .floating-label{color:var(--red)}
/* Lebar kolom Bootstrap lama (col-xs-11 + offset) membuat form meluap di 320px */
@media (max-width:480px){
  body.u-embed .form-horizontal [class*="col-xs-"]{float:none;width:100%;margin-left:0;padding-left:0;padding-right:0}
  body.u-embed .form-horizontal .form-group{margin-left:0;margin-right:0;margin-bottom:8px}
  body.u-embed .form-horizontal .control-label{padding-top:0;margin-bottom:4px}
  body.u-embed .page-frame > [class*="col-"]{padding-left:10px !important;padding-right:10px !important}
  body.u-embed .g-recaptcha{transform:scale(.88);transform-origin:0 0}
}