/* -------- City inline (footer state) -------- */
.footer-section .city-inline{
  text-align:center;
  margin:0 auto;
  line-height:1.35;
}
.footer-section .city-inline a{
  display:inline;
  white-space:nowrap;      /* jangan pecah nama */
  word-break:keep-all;
  overflow-wrap:normal;
  margin:0;
  padding:0;
  font-size:14px;
  font-weight:300;
  text-decoration:none;
  opacity:.92;
}
.footer-section .city-inline a:hover,
.footer-section .city-inline a:focus-visible{
  text-decoration:underline; opacity:1;
}
.footer-section .city-inline .sep{
  display:inline;
  vertical-align:middle;
  margin:0 .2rem;
  font-size:14px;
  line-height:1;
  opacity:.55;
  border:0 !important;
  background:none !important;
  box-shadow:none !important;
}
/* matikan piping pseudo jika wujud */
.footer-section .city-inline a::before,
.footer-section .city-inline a::after,
.footer-section .city-inline .sep::before,
.footer-section .city-inline .sep::after{ content:none !important; }

@media (max-width:768px){
  .footer-section .city-inline a{ font-size:13px; }
  .footer-section .city-inline .sep{ margin:0 .18rem; font-size:13px; }
}
@media (max-width:420px){
  .footer-section .city-inline a{ font-size:12.5px; }
  .footer-section .city-inline .sep{ margin:0 .16rem; font-size:12.5px; }
}

/* -------- Negeri grid (main footer) -------- */
.negeri-grid .negeri-link{
  display:block;
  padding:.55rem .75rem;
  border-radius:.65rem;
  text-decoration:none;
  font-weight:300;           /* dari 300 → 600 */
  color:#fff;
  background:rgba(255,255,255,.06);
  text-align:center;
  transition:background .2s ease, transform .15s ease;
}
.negeri-grid .negeri-link:hover,
.negeri-grid .negeri-link:focus-visible{
  text-decoration:underline;
  background:rgba(255,255,255,.1);
  transform:translateY(-1px);
}

/* -------- (opsyen) City grid pill utk halaman negeri -------- */
.city-grid .city-pill{
  display:block;
  padding:.65rem .9rem;
  border-radius:.75rem;
  text-decoration:none;
  font-weight:300;
  text-align:center;
  color:#fff;
  background:rgba(255,255,255,.06);
  transition:background .2s ease, transform .15s ease;
}
.city-grid .city-pill:hover,
.city-grid .city-pill:focus-visible{
  text-decoration:underline;
  background:rgba(255,255,255,.10);
  transform:translateY(-1px);
}
.city-grid .mb10{ margin-bottom:.65rem; }
@media (min-width:992px){ .city-grid .mb10{ margin-bottom:.75rem; } }