:root{
  --navy:#073B82;
  --blue:#0A7FE8;
  --yellow:#FFC42F;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:"Inter",Arial,sans-serif;
  background:#fff;
  color:#0A356D;
  padding-bottom:104px;
}
.container{
  width:min(1420px,calc(100% - 64px));
  margin-inline:auto;
}

/* HEADER */
.site-header{
  height:68px;
  background:#fff;
  border-bottom:1px solid rgba(8,74,140,.08);
  box-shadow:0 3px 14px rgba(0,55,110,.05);
  position:sticky;
  top:0;
  z-index:50;
}
.header-inner{
  height:68px;
  display:grid;
  grid-template-columns:1fr auto auto;
  align-items:center;
  gap:36px;
}
.brand{
  display:flex;
  align-items:center;
  gap:10px;
  text-decoration:none;
}
.brand img{
  width:42px;
  height:42px;
  object-fit:contain;
}
.brand-name{
  display:flex;
  align-items:baseline;
  gap:6px;
  white-space:nowrap;
}
.brand-name strong{
  color:#075DB5;
  font-size:24px;
  font-weight:800;
  letter-spacing:-.04em;
}
.brand-name span{
  color:#113967;
  font-size:17px;
  font-weight:700;
}
.nav{
  height:100%;
  display:flex;
  align-items:center;
  gap:38px;
}
.nav a{
  position:relative;
  height:100%;
  display:flex;
  align-items:center;
  color:#103A6A;
  font-size:14px;
  font-weight:600;
  text-decoration:none;
}
.nav a::after{
  content:"";
  position:absolute;
  left:50%;
  right:50%;
  bottom:10px;
  height:3px;
  border-radius:3px;
  background:var(--blue);
}
.nav a.active::after,.nav a:hover::after{
  left:0;
  right:0;
}
.login{
  height:46px;
  min-width:170px;
  padding:0 20px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  border-radius:13px;
  color:#073A72;
  text-decoration:none;
  font-weight:800;
  background:linear-gradient(180deg,#FFDA61,#FFBA1F);
  border:1px solid #F2B21A;
  box-shadow:0 9px 20px rgba(255,181,20,.22), inset 0 1px 0 rgba(255,255,255,.8);
}
.login svg{
  width:18px;
  height:18px;
  fill:#173D8C;
}

/* HERO BACKGROUND ONLY */
.hero-shell{
  position:relative;
  height:410px;
  overflow:hidden;
  isolation:isolate;
  background:
    radial-gradient(circle at 37% -20%,rgba(102,201,255,.15) 0 235px,transparent 236px),
    linear-gradient(106deg,#FFFFFF 0%,#FBFEFF 30%,#EAF8FF 49%,#D3F0FF 62%,#7ECFFB 100%);
}
.hero-art{
  position:absolute;
  z-index:-3;
  top:0;
  right:0;
  width:61%;
  height:100%;
  background:url("/wbs-assets/hero-building-art.webp") center top / cover no-repeat;
  -webkit-mask-image:linear-gradient(to right,transparent 0%,rgba(0,0,0,.15) 7%,#000 22%,#000 100%);
  mask-image:linear-gradient(to right,transparent 0%,rgba(0,0,0,.15) 7%,#000 22%,#000 100%);
}
.decor{
  position:absolute;
  z-index:-2;
  border-radius:50%;
}
.decor-top{
  width:230px;
  height:230px;
  left:-145px;
  top:-105px;
  border:25px solid rgba(196,233,251,.52);
}
.decor-bottom{
  width:135px;
  height:135px;
  left:-38px;
  bottom:38px;
  background:rgba(255,210,63,.25);
}
.hero-slot{
  height:100%;
  position:relative;
  z-index:2;
  display:flex;
  align-items:center;
}
.hero-copy{
  max-width:500px;
  padding-bottom:34px;
  color:var(--navy);
}
.hero-kicker{
  margin-bottom:10px;
  color:#6c87a7;
  font-size:11px;
  font-weight:800;
  letter-spacing:.22em;
  text-transform:uppercase;
}
.hero-copy h1{
  margin:0;
  color:#0756A5;
  font-size:clamp(38px,4vw,58px);
  line-height:.98;
  letter-spacing:-.055em;
}
.hero-copy h1 span{color:#FFB915}
.hero-copy p{
  max-width:420px;
  margin:14px 0 18px;
  color:#4d6c8b;
  font-size:14px;
  line-height:1.55;
}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap}
.hero-button{
  height:42px;
  padding:0 17px;
  display:inline-flex;
  align-items:center;
  gap:8px;
  border-radius:10px;
  font-size:12px;
  font-weight:800;
  text-decoration:none;
  box-shadow:0 7px 16px rgba(0,73,140,.12);
}
.hero-button.primary{color:#5a4100;background:linear-gradient(180deg,#FFD95A,#FFB91B);border:1px solid #F1B019}
.hero-button.secondary{color:#0756A5;background:rgba(255,255,255,.8);border:1px solid #83B8ED}
.hero-points{display:flex;gap:0;margin-top:22px;color:#285987;font-size:10px;font-weight:700}
.hero-points span{display:flex;align-items:center;gap:6px;padding:0 15px;border-left:1px solid #c8ddea}
.hero-points span:first-child{padding-left:0;border-left:0}
.hero-points b{display:grid;place-items:center;width:23px;height:23px;color:#0756A5;border:1px solid #8dbde8;border-radius:7px;background:#e9f5ff;font-size:11px}
}
.hero-wave{
  position:absolute;
  left:0;
  bottom:-1px;
  width:100%;
  height:64px;
  object-fit:cover;
  object-position:center bottom;
  z-index:3;
}



/* CONTENT AREA FOR CODEX
   Area kosong ini sengaja disediakan di antara hero dan footer.
   Codex dapat mengisi section ini tanpa mengubah header/hero/footer. */
.content-slot{
  position:relative;
  min-height:0;
  padding:0;
  background:#fff;
}
.codex-content-slot{
  min-height:0;
}
.feature-strip{
  position:relative;
  z-index:5;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:14px;
  margin-top:28px;
}
.feature-card{
  min-height:106px;
  display:flex;
  align-items:flex-start;
  gap:12px;
  padding:18px 16px;
  border:1px solid #e2edf4;
  border-radius:13px;
  background:rgba(255,255,255,.97);
  box-shadow:0 8px 22px rgba(17,66,112,.12);
}
.feature-icon{
  width:42px;
  height:42px;
  flex:0 0 42px;
  display:grid;
  place-items:center;
  border-radius:50%;
  font-size:21px;
  font-weight:800;
}
.feature-icon.blue{color:#0878d1;background:#e5f2ff}.feature-icon.orange{color:#ed8a24;background:#fff0dc}.feature-icon.green{color:#18a36a;background:#e4f8ed}.feature-icon.purple{color:#9055e8;background:#f1e8ff}
.feature-card strong{display:block;margin:2px 0 5px;color:#0756a5;font-size:12px}.feature-card p{margin:0;color:#66819b;font-size:10px;line-height:1.45}
.purpose-section{padding:30px 0 30px;background:linear-gradient(135deg,#f4f9ff,#fffdf7)}
.purpose-heading{text-align:center;margin-bottom:28px}.purpose-heading h2{margin:0 0 10px;color:#e30613;font-size:30px}.purpose-heading p{margin:0;color:#40516a;font-size:16px}
.purpose-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:28px;max-width:1360px;margin:auto}.purpose-card{grid-column:span 2;min-height:205px;padding:25px;border:1px solid #e0e5eb;border-radius:20px;background:#fff;box-shadow:0 10px 18px rgba(22,43,70,.12)}.purpose-card:nth-child(4){grid-column:2 / span 2}.purpose-card:nth-child(5){grid-column:4 / span 2}.purpose-icon{width:50px;height:50px;display:grid;place-items:center;margin-bottom:19px;border-radius:14px;color:#fff;font-size:25px;font-weight:800;box-shadow:0 5px 8px rgba(0,0,0,.16)}.purpose-card h3{margin:0 0 14px;color:#172033;font-size:20px;line-height:1.2}.purpose-card p{margin:0;color:#43526a;font-size:15px;line-height:1.55}.purpose-card.red .purpose-icon{background:#f20d2d}.purpose-card.blue .purpose-icon{background:#276cf2}.purpose-card.orange .purpose-icon{background:#f18a00}.purpose-card.green .purpose-icon{background:#00b84f}.purpose-card.purple .purpose-icon{background:#9b2cff}
.purpose-card.red{background:#fff4f5;border-color:#f20d2d}.purpose-card.blue{background:#f2f6ff;border-color:#276cf2}.purpose-card.orange{background:#fff8eb;border-color:#f18a00}.purpose-card.green{background:#f0fff6;border-color:#00b84f}.purpose-card.purple{background:#faf3ff;border-color:#9b2cff}
@media(max-width:900px){.purpose-grid{grid-template-columns:repeat(2,1fr)}.purpose-card,.purpose-card:nth-child(4),.purpose-card:nth-child(5){grid-column:auto}.purpose-card:last-child{grid-column:1/-1}}
@media(max-width:650px){.purpose-section{padding:25px 0}.purpose-heading h2{font-size:24px}.purpose-heading p{font-size:13px;line-height:1.5}.purpose-grid{grid-template-columns:1fr;gap:16px}.purpose-card,.purpose-card:nth-child(4),.purpose-card:nth-child(5){grid-column:auto;min-height:auto;padding:20px}.purpose-card h3{font-size:18px}.purpose-card p{font-size:13px}}
@media(min-width:901px){
  .purpose-section{margin-top:-18px;position:relative;z-index:2;padding:10px 0 12px}
  .purpose-heading{margin-bottom:14px}
  .purpose-heading h2{font-size:24px;margin-bottom:5px}
  .purpose-heading p{font-size:13px}
  .purpose-grid{grid-template-columns:repeat(5,1fr);gap:12px;max-width:none}
  .purpose-card,.purpose-card:nth-child(4),.purpose-card:nth-child(5){grid-column:auto;min-height:112px;padding:11px;border-radius:12px}
  .purpose-icon{width:32px;height:32px;margin-bottom:8px;border-radius:8px;font-size:15px}
  .purpose-card h3{margin-bottom:5px;font-size:12px}
  .purpose-card p{font-size:10px;line-height:1.3}
}

.status-section{padding:48px 0 170px;background:#f7fbff;scroll-margin-top:68px}
.status-card{display:grid;grid-template-columns:1fr minmax(420px, .9fr);gap:46px;align-items:center;padding:30px 38px;border:1px solid #dbeaf6;border-radius:16px;background:#fff;box-shadow:0 12px 28px rgba(7,59,130,.08)}
.status-kicker{color:#6b88a3;font-size:10px;font-weight:800;letter-spacing:.14em;text-transform:uppercase}
.status-heading h2{margin:7px 0 8px;color:#073b82;font-size:28px}.status-heading p{margin:0;color:#66819b;font-size:13px}
.status-form label{display:block;margin-bottom:8px;color:#164e87;font-size:12px;font-weight:700}.status-form-row{display:flex;gap:10px}.status-form input{flex:1;min-width:0;height:44px;padding:0 14px;border:1px solid #bcd5eb;border-radius:8px;color:#194d80;font:inherit;font-size:12px;outline:none}.status-form input:focus{border-color:#0a7fe8;box-shadow:0 0 0 3px rgba(10,127,232,.12)}.status-form button{height:44px;padding:0 20px;border:0;border-radius:8px;color:#fff;background:#0a7fe8;cursor:pointer;font:inherit;font-size:12px;font-weight:800}.status-result{min-height:16px;margin:10px 0 0;color:#66819b;font-size:11px}
@media(max-width:650px){.status-section{padding:28px 0 530px}.status-card{grid-template-columns:1fr;gap:20px;padding:24px 20px}.status-heading h2{font-size:23px}.status-form-row{flex-direction:column}.status-form button{width:100%}}
.status-only .hero-shell,.status-only .content-slot{display:none}
.status-only .status-section{min-height:calc(100vh - 68px - 108px);padding-top:72px}
.status-only .employee-popup{display:none}
.cara-only .hero-shell,.cara-only .content-slot{display:none}
.cara-only .employee-popup{display:none}
.faq-only .hero-shell,.faq-only .content-slot{display:none}.faq-only .employee-popup{display:none}
.report-only .hero-shell,.report-only .content-slot,.report-only .status-section,.report-only .faq-section,.report-only .howto-section,.report-only .admin-dashboard{display:none}
.report-only .employee-popup{display:none}
.report-inline-section{min-height:calc(100vh - 68px - 108px);padding:34px 0 72px;background:linear-gradient(135deg,#f4f9ff,#fffdf7)}
.report-inline-wrap{max-width:980px}
.report-inline-heading{text-align:center;margin-bottom:24px}.report-inline-heading>span{color:#6787a4;font-size:10px;font-weight:800;letter-spacing:.16em}.report-inline-heading h1{margin:8px 0;color:#073b82;font-size:30px}.report-inline-heading p{margin:0;color:#607793;font-size:13px}
.report-inline-form{display:grid;grid-template-columns:1fr 1fr;gap:18px 28px;padding:30px 38px;border:1px solid #dbe7f1;border-radius:18px;background:rgba(255,255,255,.9);box-shadow:0 12px 28px rgba(7,59,130,.1)}
.report-inline-field{display:flex;flex-direction:column;gap:7px}.report-inline-field label{color:#17345a;font-size:13px;font-weight:800}.report-inline-field input,.report-inline-field select,.report-inline-field textarea{box-sizing:border-box;width:100%;border:1px solid #c5d6e5;border-radius:8px;padding:11px 13px;color:#203b5d;background:#fff;font:inherit;font-size:13px}.report-inline-field input,.report-inline-field select{height:44px}.report-inline-field textarea{min-height:100px;resize:vertical}.report-inline-field input:focus,.report-inline-field select:focus,.report-inline-field textarea:focus{outline:3px solid rgba(10,127,232,.13);border-color:#0a7fe8}.report-inline-field input[readonly]{background:#edf5fc;color:#315c87;font-weight:700}.report-inline-field small{color:#7089a5;font-size:11px}.report-inline-wide,.report-inline-actions{grid-column:span 2}.report-inline-actions{text-align:center}.report-inline-actions button{width:min(100%,620px);border:0;border-radius:25px;padding:14px 20px;color:#17385d;background:linear-gradient(180deg,#ffd95a,#ffb91b);box-shadow:0 8px 16px rgba(255,185,27,.24);cursor:pointer;font:inherit;font-size:15px;font-weight:900}.report-inline-alert{margin:0 0 18px;padding:11px 14px;border-radius:8px;font-size:12px;font-weight:700}.report-inline-alert.success{color:#087944;background:#e5f8ed;border:1px solid #a9e3bf}.report-inline-alert.error{color:#c6283d;background:#fff0f2;border:1px solid #f0b8b8}
@media(max-width:650px){.report-inline-section{padding:25px 0 80px}.report-inline-heading h1{font-size:25px}.report-inline-heading p{line-height:1.5}.report-inline-form{grid-template-columns:1fr;gap:15px;padding:22px 18px}.report-inline-wide,.report-inline-actions{grid-column:span 1}}
.authenticated .employee-popup{display:none}.admin-only .hero-shell,.admin-only .content-slot,.admin-only .purpose-section{display:none}
.admin-dashboard{min-height:calc(100vh - 68px - 108px);padding:35px 0 145px;background:#f5f9fd}.admin-heading{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:24px}.admin-heading span{color:#6787a4;font-size:10px;font-weight:800;letter-spacing:.15em}.admin-heading h1{margin:7px 0 5px;color:#073b82;font-size:30px}.admin-heading p{margin:0;color:#66819b;font-size:13px}.admin-date{padding:9px 14px;border:1px solid #d5e5f2;border-radius:8px;color:#66819b;background:#fff;font-size:11px}.admin-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.admin-stat{padding:19px 20px;border:1px solid;border-radius:12px;background:#fff;box-shadow:0 7px 15px rgba(22,43,70,.07)}.admin-stat small,.admin-stat span{display:block}.admin-stat small{color:#506179;font-size:11px;font-weight:700}.admin-stat strong{display:block;margin:7px 0;color:#172033;font-size:30px}.admin-stat span{color:#8a9eaf;font-size:10px}.admin-stat.blue{border-color:#9bc9ef}.admin-stat.green{border-color:#9cdec0}.admin-stat.orange{border-color:#f2c27b}.admin-stat.purple{border-color:#cdb0f3}.admin-chart{margin-top:20px;padding:22px 25px;border:1px solid #dbe7f1;border-radius:12px;background:#fff;box-shadow:0 7px 15px rgba(22,43,70,.06)}.chart-head{display:flex;justify-content:space-between;align-items:flex-start}.chart-head h2{margin:0 0 5px;color:#073b82;font-size:17px}.chart-head p,.chart-head span{margin:0;color:#8a9eaf;font-size:11px}.chart-bars{height:190px;display:flex;align-items:flex-end;justify-content:space-around;gap:20px;margin-top:20px;padding:0 8%;border-bottom:1px solid #dbe7f1}.chart-bars>div{height:100%;display:flex;flex:1;flex-direction:column;justify-content:flex-end;align-items:center;gap:8px}.chart-bars i{width:min(58px,70%);min-height:4px;border-radius:7px 7px 0 0;background:#b8d3eb}.chart-bars>div:nth-child(2) i{background:#f2bd69}.chart-bars>div:nth-child(3) i{background:#ae83e7}.chart-bars>div:nth-child(4) i{background:#75c995}.chart-bars b{color:#66819b;font-size:10px;font-weight:600;white-space:nowrap}
@media(max-width:700px){.admin-heading{display:block}.admin-date{display:inline-block;margin-top:14px}.admin-stats{grid-template-columns:1fr 1fr}.chart-head{display:block}.chart-head span{display:block;margin-top:8px}.chart-bars{padding:0 2%}.admin-dashboard{padding-bottom:540px}}
.faq-section{min-height:calc(100vh - 68px - 108px);padding:36px 0 145px;background:linear-gradient(135deg,#f4f9ff,#fffdf7)}.faq-wrap{max-width:930px}.faq-heading{text-align:center;margin-bottom:24px}.faq-heading span{color:#6787a4;font-size:10px;font-weight:800;letter-spacing:.16em}.faq-heading h1{margin:7px 0 8px;color:#073b82;font-size:32px}.faq-heading p{margin:0;color:#40516a;font-size:14px}.faq-list{display:grid;gap:9px}.faq-list details{border:1px solid #d9e7f2;border-radius:10px;background:#fff;box-shadow:0 4px 10px rgba(22,43,70,.06)}.faq-list summary{padding:15px 20px;color:#164e87;cursor:pointer;font-size:14px;font-weight:700;list-style:none}.faq-list summary::-webkit-details-marker{display:none}.faq-list summary:after{content:'+';float:right;color:#0a7fe8;font-size:20px;line-height:14px}.faq-list details[open] summary{border-bottom:1px solid #e5edf4;color:#073b82}.faq-list details[open] summary:after{content:'−'}.faq-list details p{margin:0;padding:13px 20px 16px;color:#506179;font-size:13px;line-height:1.6}.faq-callout{display:flex;justify-content:space-between;gap:20px;margin-top:20px;padding:17px 20px;border-left:4px solid #ffc42f;border-radius:8px;background:#fff8e5;color:#40516a;font-size:13px}.faq-callout strong{color:#073b82}.faq-callout b{color:#0a7fe8}
@media(max-width:650px){.faq-section{padding:28px 0 540px}.faq-heading h1{font-size:25px}.faq-heading p{font-size:12px;line-height:1.5}.faq-list summary{padding:13px 15px;font-size:12px}.faq-list details p{padding:11px 15px 14px;font-size:12px}.faq-callout{display:grid;gap:5px;font-size:12px}}
.howto-section{min-height:calc(100vh - 68px - 108px);padding:38px 0 145px;background:linear-gradient(135deg,#f4f9ff,#fffdf7)}
.howto-heading{text-align:center;margin-bottom:34px}.howto-heading span{color:#6787a4;font-size:10px;font-weight:800;letter-spacing:.16em}.howto-heading h1{margin:7px 0 8px;color:#073b82;font-size:34px}.howto-heading p{margin:0;color:#40516a;font-size:15px}
.howto-steps{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;position:relative}.howto-steps:before{content:"";position:absolute;top:27px;left:8%;right:8%;height:2px;background:#b8d3eb;z-index:0}.howto-step{position:relative;z-index:1;text-align:center}.step-number{width:54px;height:54px;display:grid;place-items:center;margin:0 auto 12px;border-radius:50%;color:#fff;font-size:21px;font-weight:800;box-shadow:0 6px 12px rgba(0,0,0,.16)}.step-card{min-height:160px;padding:20px 14px;border:1px solid #dce6ef;border-radius:15px;background:#fff;box-shadow:0 9px 18px rgba(22,43,70,.1)}.step-card h2{margin:3px 0 12px;color:#172033;font-size:15px}.step-card p{margin:0;color:#506179;font-size:12px;line-height:1.5}.step-card b{color:#0a7fe8}.howto-step.red .step-number{background:#f20d2d}.howto-step.blue .step-number{background:#276cf2}.howto-step.orange .step-number{background:#f18a00}.howto-step.green .step-number{background:#00b84f}.howto-step.purple .step-number{background:#9b2cff}
@media(max-width:900px){.howto-steps{grid-template-columns:repeat(2,1fr)}.howto-steps:before{display:none}.howto-step:last-child{grid-column:1/-1}.howto-section{padding-bottom:420px}}
@media(max-width:650px){.howto-section{padding:28px 0 540px}.howto-heading h1{font-size:27px}.howto-heading p{font-size:13px;line-height:1.5}.howto-steps{grid-template-columns:1fr;gap:18px}.howto-step:last-child{grid-column:auto}.step-card{min-height:auto}}

/* Saat konten nyata sudah dimasukkan, tinggi section akan mengikuti isi.
   min-height hanya menjaga footer tetap berada lebih ke bawah pada kondisi kosong. */

/* FOOTER */
.site-footer{
  min-height:104px;
  color:#fff;
  position:fixed;
  left:0;
  right:0;
  bottom:0;
  z-index:40;
  overflow:hidden;
  box-shadow:0 -5px 18px rgba(0,55,110,.14);
  background:
    radial-gradient(circle at 87% 0,rgba(25,151,244,.45),transparent 30%),
    linear-gradient(100deg,#043D78 0%,#0758A5 47%,#106FC1 100%);
}
.site-footer::before{
  content:"";
  position:absolute;
  inset:0;
  opacity:.07;
  background-image:linear-gradient(125deg,transparent 0 49%,#fff 49.2% 49.6%,transparent 50%);
  background-size:230px 100%;
}
.footer-grid{
  position:relative;
  min-height:104px;
  display:grid;
  grid-template-columns:1.35fr repeat(4,1fr);
  align-items:center;
}
.footer-grid > *{
  min-height:56px;
  display:flex;
  align-items:center;
  padding:0 22px;
}
.footer-grid > *:not(:first-child){
  border-left:1px solid rgba(255,255,255,.25);
}
.footer-brand{
  gap:11px;
  padding-left:0!important;
}
.footer-brand img{
  width:44px;
  height:44px;
  object-fit:contain;
}
.footer-brand>div{
  display:flex;
  flex-direction:column;
  gap:4px;
}
.footer-brand strong{
  font-size:16px;
}
.footer-brand strong span{
  font-weight:600;
}
.footer-brand small,.footer-item small{
  color:rgba(255,255,255,.75);
  font-size:10px;
}
.footer-item{
  gap:11px;
}
.footer-item>svg{
  width:25px;
  height:25px;
  fill:#fff;
  flex:0 0 25px;
}
.footer-item>div{
  display:flex;
  flex-direction:column;
  gap:4px;
}
.footer-item b{
  font-size:11px;
}
.footer-item small{
  white-space:nowrap;
}

@media(max-width:1100px){
  .content-slot{
    min-height:0;
    padding:0;
  }
  .codex-content-slot{
    min-height:0;
  }
}
@media(max-width:650px){
  .content-slot{
    min-height:0;
    padding:0;
  }
  .codex-content-slot{
    min-height:0;
  }
}

/* Data aduan selalu mengikuti lebar layar, tanpa scroll horizontal. */
.aduan-data-wrap .aduan-table{width:100%;min-width:0;table-layout:fixed}
.aduan-data-wrap .aduan-table th,.aduan-data-wrap .aduan-table td{white-space:normal;word-break:break-word}
.aduan-data-wrap .aduan-table td:nth-child(2){min-width:0}
.ticket-code{color:#075db5!important;font-size:10px!important;letter-spacing:.02em}
@media(max-width:650px){
  .aduan-data-wrap .data-table-wrap{overflow:visible}
  .aduan-data-wrap .aduan-table{font-size:10px}
  .aduan-data-wrap .aduan-table th,.aduan-data-wrap .aduan-table td{padding:8px 5px;vertical-align:top}
}

/* RESPONSIVE */
@media(max-width:1100px){
  .container{width:min(100% - 36px,1420px)}
  .header-inner{grid-template-columns:1fr auto}
  .nav{display:none}
  .hero-art{width:75%;right:-10%}
  .footer-grid{
    grid-template-columns:1fr 1fr;
    padding:20px 0;
    gap:16px 0;
  }
  .footer-grid>*{
    border-left:0!important;
    padding:0 18px;
  }
  .footer-brand{grid-column:1/-1}
  .feature-strip{grid-template-columns:repeat(2,1fr);margin-top:18px}
}
@media(max-width:650px){
  body{padding-bottom:330px}
  .site-header,.header-inner{height:62px}
  .brand-name span{display:none}
  .brand-name strong{font-size:21px}
  .brand img{width:38px;height:38px}
  .login{min-width:auto;height:41px;padding:0 14px;font-size:13px}
  .hero-shell{height:470px}
  .hero-slot{align-items:flex-start;padding-top:30px}
  .hero-copy{max-width:70%;padding-bottom:0}
  .hero-copy h1{font-size:38px}
  .hero-copy p{font-size:12px}
  .hero-points{display:none}
  .feature-strip{grid-template-columns:1fr;margin-top:18px}
  .feature-card{min-height:86px}
  .hero-actions{gap:7px}
  .hero-button{height:38px;padding:0 11px;font-size:10px}
  .hero-art{
    width:105%;
    right:-52%;
    opacity:.84;
    -webkit-mask-image:linear-gradient(to right,transparent 0%,#000 24%,#000 100%);
    mask-image:linear-gradient(to right,transparent 0%,#000 24%,#000 100%);
  }
  .decor-top{width:180px;height:180px;left:-120px;top:-85px}
  .decor-bottom{width:100px;height:100px;left:-35px;bottom:48px}
  .footer-grid{grid-template-columns:1fr;padding:18px 0}
  .footer-brand{grid-column:auto}
  .footer-grid>*{
    min-height:auto;
    padding:12px 0;
    border-top:1px solid rgba(255,255,255,.18)!important;
  }
  .footer-grid>*:first-child{border-top:0!important}
}

/* POPUP KLASIFIKASI PELAPOR */
.employee-popup{
  position:fixed;
  inset:0;
  z-index:100;
  display:grid;
  place-items:center;
  padding:20px;
  background:rgba(10,38,70,.42);
}
.employee-popup-card{
  width:min(560px,100%);
  padding:0;
  overflow:hidden;
  border:1px solid #d6e1ec;
  border-top:5px solid #075DB5;
  border-radius:10px;
  background:#fff;
  box-shadow:0 14px 35px rgba(1,38,80,.24);
}
.employee-popup-head{
  display:flex;
  align-items:center;
  gap:14px;
  padding:22px 28px 18px;
  border-bottom:1px solid #e5edf4;
  background:#f8fbfe;
}
.employee-popup-logo{width:48px;height:48px;object-fit:contain;flex:0 0 48px}
.employee-popup-kicker{margin-bottom:5px;color:#66809b;font-size:10px;font-weight:800;letter-spacing:.12em;text-transform:uppercase}
.employee-popup-card h2{margin:0;color:#073B82;font-size:22px;line-height:1.2;letter-spacing:-.025em}
.employee-popup-body{padding:22px 28px 25px}
.employee-popup-card p{margin:0 0 23px;color:#5b7690;font-size:14px;line-height:1.55}
.employee-popup-actions{display:flex;justify-content:center;gap:10px;padding-top:19px;border-top:1px solid #e5edf4}
.employee-popup-actions button{min-width:130px;padding:11px 18px;border-radius:7px;cursor:pointer;font:inherit;font-size:13px;font-weight:800}
.employee-popup-actions button{position:relative;z-index:2;min-height:44px;pointer-events:auto}
.employee-yes{color:#fff;background:#0A7FE8;box-shadow:0 7px 15px rgba(10,127,232,.2)}
.employee-no{color:#075DB5;border:1px solid #8bb9e4!important;background:#fff}
.employee-popup-note{margin-top:13px!important;margin-bottom:0!important;font-size:11px!important;color:#8a9eaf!important}
@media(max-width:480px){.employee-popup-head{padding:18px 20px 15px}.employee-popup-body{padding:19px 20px 21px}.employee-popup-card h2{font-size:19px}.employee-popup-actions{flex-direction:column-reverse}.employee-popup-actions button{width:100%}}

.account-actions{display:flex;align-items:center;gap:9px}.active-username{height:41px;display:flex;align-items:center;padding:0 15px;border:1px solid #b9d7ee;border-radius:8px;color:#0756a5;background:#f2f8ff;font-size:12px;font-weight:800}.account-actions form{margin:0}.logout-button{height:41px;padding:0 16px;border:1px solid #e8a3ad;border-radius:8px;color:#c6283d;background:#fff;cursor:pointer;font:inherit;font-size:12px;font-weight:800}.logout-button:hover{background:#fff2f4}
.admin-data-main{min-height:calc(100vh - 68px - 108px);padding:34px 0 145px;background:#f5f9fd}.admin-data-wrap{max-width:1180px}.data-heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:22px}.data-heading span{color:#6787a4;font-size:10px;font-weight:800;letter-spacing:.15em}.data-heading h1{margin:7px 0 5px;color:#073b82;font-size:30px}.data-heading p{margin:0;color:#66819b;font-size:13px}.data-add-button,.add-data-row button{height:42px;padding:0 17px;border:0;border-radius:8px;color:#fff;background:#0a7fe8;cursor:pointer;font:inherit;font-size:12px;font-weight:800}.data-panel,.add-data-panel{padding:20px;border:1px solid #dbe7f1;border-radius:12px;background:#fff;box-shadow:0 7px 15px rgba(22,43,70,.06)}.data-total{margin-bottom:13px;color:#66819b;font-size:12px}.data-total b{color:#073b82}.data-table{width:100%;border-collapse:collapse;color:#173f6b;font-size:13px}.data-table th{padding:13px 14px;text-align:left;color:#075db5;background:#eef6fd;font-size:12px}.data-table td{padding:14px;border-bottom:1px solid #edf2f6}.data-table tbody tr:nth-child(even){background:#fafcff}.status-badge{padding:4px 9px;border-radius:20px;color:#087944;background:#e5f8ed;font-size:10px;font-weight:700}.add-data-panel{margin-top:18px}.add-data-panel h2{margin:0 0 14px;color:#073b82;font-size:17px}.add-data-row{display:flex;gap:10px}.add-data-row input{flex:1;height:42px;padding:0 13px;border:1px solid #bcd5eb;border-radius:8px;font:inherit;font-size:12px;outline:none}.data-success,.data-error{margin-bottom:14px;padding:11px 14px;border-radius:8px;font-size:12px}.data-success{color:#087944;background:#e5f8ed}.data-error{color:#c6283d;background:#fff0f2}
.data-table th{color:#0782ef;background:#fff}.data-table th:first-child{width:14%}.data-table td{border-bottom:1px solid #fff}.data-table tbody tr:nth-child(odd){background:#f1f1f1}.data-table tbody tr:nth-child(even){background:#fff}
@media(max-width:650px){.admin-data-main{padding-bottom:540px}.data-heading{display:block}.data-add-button{margin-top:16px}.data-table-wrap{overflow-x:auto}.data-table{min-width:580px}.add-data-row{display:grid}.add-data-row button{width:100%}}
.aduan-data-wrap{max-width:1500px}.aduan-table{font-size:12px;min-width:1400px}.aduan-table th{white-space:nowrap}.aduan-table td{vertical-align:middle;white-space:nowrap}.aduan-table td:nth-child(2){white-space:normal;min-width:220px}.aduan-table td strong,.aduan-table td small{display:block}.aduan-table td strong{color:#172033;font-size:13px}.aduan-table td small{margin-top:5px;color:#506179;font-size:11px}.aduan-status{padding:5px 9px;border-radius:5px;color:#fff;background:#ffb800;font-size:11px;font-weight:700}.aduan-muted{padding:5px 8px;border-radius:4px;color:#506179;background:#edf0f3;font-size:11px}.detail-button{display:inline-block;padding:7px 10px;border:1px solid #0a7fe8;border-radius:4px;color:#0a7fe8;text-decoration:none}.aduan-actions{display:grid;gap:5px}.aduan-actions button{padding:8px 10px;border:0;border-radius:4px;color:#fff;cursor:pointer;font:inherit;font-size:11px;white-space:nowrap}.action-green{background:#50d0a3}.action-blue{background:#13a8cf}.action-red{background:#f20d2d}.empty-data{text-align:center!important;padding:35px!important;color:#8a9eaf!important}

/* KONTAK RESMI DI POJOK KANAN FOOTER */
body{padding-bottom:108px}
.site-footer{min-height:108px}
.footer-layout{
  position:relative;
  min-height:108px;
  display:flex;
  justify-content:flex-start;
  align-items:center;
}
.site-footer .container{width:calc(100% - 40px)}
.footer-layout .footer-grid{display:none!important}
.footer-layout .footer-grid{
  min-height:120px;
  grid-template-columns:1.3fr repeat(3,1fr);
}
.official-contact{
  width:max-content;
  max-width:100%;
  min-height:88px;
  display:flex;
  align-items:center;
  gap:15px;
  padding:6px 0;
  border-left:0;
  color:#fff;
}
.official-contact img{width:78px;height:88px;object-fit:contain;flex:0 0 78px}
.official-contact>div{display:grid;gap:7px;font-size:11px;line-height:1.25}
.official-contact strong{font-size:14px;line-height:1.25}
.official-contact-meta{display:flex;gap:22px;white-space:nowrap}
.footer-copyright{
  position:absolute;
  right:0;
  bottom:10px;
  color:rgba(255,255,255,.78);
  font-size:10px;
}
.login-modal{position:fixed;inset:0;z-index:120;display:none;place-items:center;padding:20px;background:rgba(4,35,74,.55)}.login-modal.is-open{display:grid}.login-card{position:relative;width:min(420px,100%);padding:28px;border-top:5px solid #ffc42f;border-radius:14px;background:#fff;box-shadow:0 18px 45px rgba(0,30,70,.3)}.login-close{position:absolute;top:12px;right:15px;border:0;background:transparent;color:#66819b;font-size:25px;cursor:pointer}.login-card-head{display:flex;align-items:center;gap:12px;margin-bottom:18px}.login-card-head img{width:48px;height:48px;object-fit:contain}.login-card-head span{color:#6787a4;font-size:9px;font-weight:800;letter-spacing:.12em}.login-card h2{margin:4px 0 0;color:#073b82;font-size:24px}.login-intro{margin:0 0 20px;color:#506179;font-size:12px}.login-card form{display:grid;gap:7px}.login-card label{color:#164e87;font-size:12px;font-weight:700}.login-card input{height:41px;padding:0 12px;border:1px solid #c5d9eb;border-radius:7px;color:#173f6b;font:inherit;font-size:12px}.captcha-row{display:grid;grid-template-columns:1fr 38px 1.3fr;gap:7px}.captcha-row strong{display:grid;place-items:center;border-radius:7px;background:#eaf4ff;color:#075db5;font-size:17px;letter-spacing:4px}.captcha-row button{border:1px solid #c5d9eb;border-radius:7px;background:#f5faff;color:#0a7fe8;font-size:21px;cursor:pointer}.login-submit{height:43px;margin-top:8px;border:0;border-radius:7px;color:#fff;background:#0a7fe8;cursor:pointer;font:inherit;font-size:13px;font-weight:800}.login-error,.login-success{min-height:15px;margin:2px 0 0;font-size:11px}.login-error{color:#d9293e}.login-success{color:#0b9650}.login-demo{display:block;margin-top:17px;color:#8a9eaf;font-size:10px;text-align:center}

@media(max-width:1100px){
  body{padding-bottom:390px}
  .site-footer{min-height:390px}
  .footer-layout{min-height:390px;display:block;padding:18px 0}
  .footer-layout .footer-grid{grid-template-columns:1fr 1fr;min-height:0}
  .official-contact{border-left:0;border-top:1px solid rgba(255,255,255,.25);padding:20px 0 0;margin-top:10px;min-height:130px}
}
@media(max-width:650px){
  body{padding-bottom:520px}
  .site-footer{min-height:520px}
  .footer-layout{min-height:520px}
  .footer-layout .footer-grid{grid-template-columns:1fr}
  .official-contact{align-items:flex-start}
  .official-contact img{width:64px;height:78px;flex-basis:64px}
}

/* Override tabel aduan agar selalu pas dengan layar. */
.aduan-data-wrap .data-table-wrap{overflow:visible}
.aduan-data-wrap .aduan-table{width:100%;min-width:0;table-layout:fixed}
.aduan-data-wrap .aduan-table th,.aduan-data-wrap .aduan-table td{white-space:normal;word-break:break-word}
.aduan-data-wrap .aduan-table td:nth-child(2){min-width:0}
@media(max-width:650px){
  .aduan-data-wrap .aduan-table{font-size:10px}
  .aduan-data-wrap .aduan-table th,.aduan-data-wrap .aduan-table td{padding:8px 5px}
}

/* Proporsi kolom Data Aduan. */
.aduan-data-wrap .aduan-table th:nth-child(1),.aduan-data-wrap .aduan-table td:nth-child(1){width:3%;text-align:center}
.aduan-data-wrap .aduan-table th:nth-child(2),.aduan-data-wrap .aduan-table td:nth-child(2){width:13%}
.aduan-data-wrap .aduan-table th:nth-child(3),.aduan-data-wrap .aduan-table td:nth-child(3){width:13%}
.aduan-data-wrap .aduan-table th:nth-child(4),.aduan-data-wrap .aduan-table td:nth-child(4){width:11%}
.aduan-data-wrap .aduan-table th:nth-child(5),.aduan-data-wrap .aduan-table td:nth-child(5){width:11%}
.aduan-data-wrap .aduan-table th:nth-child(6),.aduan-data-wrap .aduan-table td:nth-child(6){width:8%}
.aduan-data-wrap .aduan-table th:nth-child(7),.aduan-data-wrap .aduan-table td:nth-child(7){width:9%}
.aduan-data-wrap .aduan-table th:nth-child(8),.aduan-data-wrap .aduan-table td:nth-child(8){width:7%}
.aduan-data-wrap .aduan-table th:nth-child(9),.aduan-data-wrap .aduan-table td:nth-child(9){width:8%}
.aduan-data-wrap .aduan-table th:nth-child(10),.aduan-data-wrap .aduan-table td:nth-child(10){width:8%}
.aduan-data-wrap .aduan-table th:nth-child(11),.aduan-data-wrap .aduan-table td:nth-child(11){width:4%}
.aduan-data-wrap .aduan-table th:nth-child(12),.aduan-data-wrap .aduan-table td:nth-child(12){width:5%}
.aduan-data-wrap .aduan-table .ticket-code{display:block;white-space:nowrap;word-break:normal;font-size:9px!important;letter-spacing:0}

@media(min-width:1101px){
  .aduan-data-wrap .aduan-table th:nth-child(1),.aduan-data-wrap .aduan-table td:nth-child(1){width:4%;white-space:nowrap}
  .aduan-data-wrap .aduan-table th:nth-child(2),.aduan-data-wrap .aduan-table td:nth-child(2){width:15%}
}

/* Pada layar sempit, setiap laporan menjadi kartu agar tidak ada scroll samping. */
@media(max-width:1100px){
  .aduan-data-wrap .data-table-wrap{overflow:visible}
  .aduan-data-wrap .aduan-table{display:block;width:100%;min-width:0!important;table-layout:auto;font-size:11px}
  .aduan-data-wrap .aduan-table thead{display:none}
  .aduan-data-wrap .aduan-table tbody{display:block;width:100%}
  .aduan-data-wrap .aduan-table tr{display:block;width:100%;margin:0 0 14px;border:1px solid #dbe7f1;border-radius:10px;overflow:hidden;background:#fff!important;box-shadow:0 5px 12px rgba(22,43,70,.06)}
  .aduan-data-wrap .aduan-table td{display:grid;width:100%!important;grid-template-columns:115px minmax(0,1fr);gap:10px;align-items:start;padding:9px 12px;border-bottom:1px solid #edf2f6;white-space:normal;word-break:break-word}
  .aduan-data-wrap .aduan-table td::before{color:#075db5;font-size:10px;font-weight:800}
  .aduan-data-wrap .aduan-table td:nth-child(1)::before{content:'No'}
  .aduan-data-wrap .aduan-table td:nth-child(2)::before{content:'No. Tiket'}
  .aduan-data-wrap .aduan-table td:nth-child(3)::before{content:'Nama Pelapor'}
  .aduan-data-wrap .aduan-table td:nth-child(4)::before{content:'OPD Terlapor'}
  .aduan-data-wrap .aduan-table td:nth-child(5)::before{content:'Jenis Laporan'}
  .aduan-data-wrap .aduan-table td:nth-child(6)::before{content:'Tgl Kejadian'}
  .aduan-data-wrap .aduan-table td:nth-child(7)::before{content:'Tgl Masuk'}
  .aduan-data-wrap .aduan-table td:nth-child(8)::before{content:'Status'}
  .aduan-data-wrap .aduan-table td:nth-child(9)::before{content:'Respon Awal'}
  .aduan-data-wrap .aduan-table td:nth-child(10)::before{content:'Tindak Lanjut'}
  .aduan-data-wrap .aduan-table td:nth-child(11)::before{content:'Detail'}
  .aduan-data-wrap .aduan-table td:nth-child(12)::before{content:'Aksi'}
  .aduan-data-wrap .aduan-table td:last-child{border-bottom:0}
  .aduan-data-wrap .aduan-table .ticket-code{white-space:nowrap;word-break:normal;font-size:9px!important}
  .aduan-data-wrap .aduan-table .empty-data{display:block!important;text-align:center!important}
}

/* Kolom ringkas Data Aduan setelah detail dipisahkan dari tabel utama. */
.aduan-data-wrap .aduan-table th:nth-child(1),.aduan-data-wrap .aduan-table td:nth-child(1){width:4%}
.aduan-data-wrap .aduan-table th:nth-child(2),.aduan-data-wrap .aduan-table td:nth-child(2){width:16%}
.aduan-data-wrap .aduan-table th:nth-child(3),.aduan-data-wrap .aduan-table td:nth-child(3){width:16%}
.aduan-data-wrap .aduan-table th:nth-child(4),.aduan-data-wrap .aduan-table td:nth-child(4){width:16%}
.aduan-data-wrap .aduan-table th:nth-child(5),.aduan-data-wrap .aduan-table td:nth-child(5){width:13%}
.aduan-data-wrap .aduan-table th:nth-child(6),.aduan-data-wrap .aduan-table td:nth-child(6){width:9%}
.aduan-data-wrap .aduan-table th:nth-child(7),.aduan-data-wrap .aduan-table td:nth-child(7){width:8%}
.aduan-data-wrap .aduan-table th:nth-child(8),.aduan-data-wrap .aduan-table td:nth-child(8){width:5%}
.aduan-data-wrap .aduan-table th:nth-child(9),.aduan-data-wrap .aduan-table td:nth-child(9){width:13%}
@media(max-width:1100px){
  .aduan-data-wrap .aduan-table td:nth-child(1)::before{content:'No'}
  .aduan-data-wrap .aduan-table td:nth-child(2)::before{content:'No. Tiket'}
  .aduan-data-wrap .aduan-table td:nth-child(3)::before{content:'Nama Pelapor'}
  .aduan-data-wrap .aduan-table td:nth-child(4)::before{content:'OPD Terlapor'}
  .aduan-data-wrap .aduan-table td:nth-child(5)::before{content:'Jenis Laporan'}
  .aduan-data-wrap .aduan-table td:nth-child(6)::before{content:'Tgl Kejadian'}
  .aduan-data-wrap .aduan-table td:nth-child(7)::before{content:'Status'}
  .aduan-data-wrap .aduan-table td:nth-child(8)::before{content:'Detail'}
.aduan-data-wrap .aduan-table td:nth-child(9)::before{content:'Aksi'}
}

/* Tabel aduan: tombol detail lebih lega, tombol aksi lebih ringkas. */
.aduan-data-wrap .aduan-table th:nth-child(8),
.aduan-data-wrap .aduan-table td:nth-child(8){width:10%;}
.aduan-data-wrap .aduan-table th:nth-child(9),
.aduan-data-wrap .aduan-table td:nth-child(9){width:7%;}
.aduan-data-wrap .detail-button{min-width:52px;padding:8px 14px;text-align:center;white-space:nowrap;}
.aduan-data-wrap .aduan-actions{gap:4px;}
.aduan-data-wrap .aduan-actions button{padding:6px 7px;font-size:10px;line-height:1.15;}
.aduan-data-wrap .detail-button{display:inline-flex;min-width:70px;justify-content:center;align-items:center;}
.aduan-data-wrap .aduan-actions{width:150px;max-width:100%;}
.aduan-data-wrap .aduan-actions button{width:100%;}
.aduan-data-wrap .aduan-table td:nth-child(3) small{display:none;}
.aduan-data-wrap .aduan-table td,
.aduan-data-wrap .aduan-table td strong,
.aduan-data-wrap .aduan-table .ticket-code{font-family:inherit;font-size:12px!important;line-height:1.3;}
.aduan-data-wrap .aduan-table td strong{font-weight:700;}
.aduan-data-wrap .aduan-actions .action-green{display:none!important;}

.detail-panel{padding:24px;border:1px solid #dbe7f1;border-radius:12px;background:#fff;box-shadow:0 7px 15px rgba(22,43,70,.06)}
.detail-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 28px}.detail-grid>div{display:grid;gap:6px;padding-bottom:12px;border-bottom:1px solid #edf2f6}.detail-grid span{color:#6787a4;font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.05em}.detail-grid strong{color:#173f6b;font-size:13px;line-height:1.5;white-space:pre-wrap;word-break:break-word}.detail-wide{grid-column:span 2}
.status-result-card{display:grid;gap:5px;padding:12px 14px;border:1px solid #cfe1f0;border-radius:8px;background:#f5faff;color:#315c83}.status-result-card strong{color:#075db5;font-size:13px}.status-result-card span{display:block}.status-result-error{color:#b42318}
/* Penyempurnaan tampilan mobile. */
@media(max-width:650px){
  body{padding-bottom:0;overflow-x:hidden}
  .site-footer{min-height:0}
  .footer-layout{min-height:0;display:block;padding:18px 0 14px}
  .official-contact{width:100%;min-height:0;align-items:center;gap:10px;padding:0;border-top:0;margin-top:0}
  .official-contact img{width:54px;height:64px;flex:0 0 54px}
  .official-contact>div{gap:5px;font-size:10px;line-height:1.25}
  .official-contact strong{font-size:13px}
  .official-contact-meta{flex-wrap:wrap;gap:4px 12px;white-space:normal}
  .footer-copyright{position:static;display:block;margin-top:12px;text-align:right;font-size:9px}
  .status-section{padding-bottom:30px}
  .login-modal{padding:12px}
  .login-card{max-height:calc(100vh - 24px);overflow-y:auto;padding:22px 18px}
  .login-card h2{font-size:22px}
}
@media(max-width:650px){.detail-grid{grid-template-columns:1fr}.detail-wide{grid-column:span 1}.detail-panel{padding:18px}}
.aduan-detail-modal{position:fixed;inset:0;z-index:120;display:none;place-items:center;padding:22px;background:rgba(4,35,74,.55)}.aduan-detail-modal.is-open{display:grid}.aduan-detail-dialog{position:relative;width:min(850px,100%);max-height:calc(100vh - 44px);overflow:auto;padding:28px;border-top:5px solid #0a7fe8;border-radius:14px;background:#fff;box-shadow:0 18px 45px rgba(0,30,70,.3)}.aduan-detail-close{position:absolute;top:9px;right:14px;border:0;background:transparent;color:#66819b;font-size:28px;cursor:pointer}.aduan-detail-title{padding-bottom:17px;border-bottom:1px solid #e5edf4}.aduan-detail-title span{color:#6787a4;font-size:10px;font-weight:800;letter-spacing:.14em}.aduan-detail-title h2{margin:5px 0;color:#073b82;font-size:25px}.aduan-detail-title b{color:#0a7fe8;font-size:11px;letter-spacing:.08em}.aduan-detail-loading{padding:25px 0;color:#66819b;font-size:13px}.modal-detail-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 25px;padding-top:20px}.modal-detail-grid>div{display:grid;gap:5px;padding-bottom:10px;border-bottom:1px solid #edf2f6}.modal-detail-grid span{color:#6787a4;font-size:10px;font-weight:800;text-transform:uppercase}.modal-detail-grid strong{color:#173f6b;font-size:13px;line-height:1.5;white-space:pre-wrap;word-break:break-word}.modal-detail-wide{grid-column:span 2}@media(max-width:650px){.aduan-detail-dialog{padding:22px 16px}.modal-detail-grid{grid-template-columns:1fr}.modal-detail-wide{grid-column:span 1}}