/* APSI Modern 2026 — visual layer only; existing PHP/DB workflows stay intact */
:root{
  --apsi-ink:#14243a;--apsi-muted:#65758b;--apsi-primary:#075985;
  --apsi-primary-2:#0e7490;--apsi-accent:#0f766e;--apsi-bg:#f3f7fb;
  --apsi-card:#fff;--apsi-line:#e3ebf3;--apsi-radius:18px;
  --apsi-shadow:0 14px 38px rgba(15,35,60,.085)
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:linear-gradient(180deg,#edf5fa 0,#f7f9fc 360px);color:var(--apsi-ink);font-family:Inter,"Segoe UI",Roboto,Arial,sans-serif;line-height:1.7}
#wrapper.container{max-width:1240px!important;width:calc(100% - 28px);background:transparent;padding:18px 0 0}
header{overflow:hidden;border:1px solid rgba(255,255,255,.85);border-radius:22px;box-shadow:var(--apsi-shadow);background:#fff}
header img{display:block;width:100%;height:auto}
.navbar.navbar-default{border:0;border-radius:15px;background:linear-gradient(110deg,#082f49,#075985 65%,#0e7490);box-shadow:0 12px 28px rgba(8,47,73,.16);margin:14px 0 24px;min-height:54px}
.navbar-default .navbar-nav>li>a{color:#eaf6ff;font-weight:650;padding:17px 15px;transition:background .2s,color .2s}
.navbar-default .navbar-nav>li>a:hover,.navbar-default .navbar-nav>.active>a{color:#fff;background:rgba(255,255,255,.14)}
.navbar-default .navbar-toggle{border:1px solid rgba(255,255,255,.4);margin:10px}
.navbar-default .navbar-toggle .icon-bar{background:#fff}
#content{background:transparent}
#content .panel,.panel,.thumbnail,.well{border:1px solid var(--apsi-line);border-radius:var(--apsi-radius);box-shadow:var(--apsi-shadow);overflow:hidden;background:var(--apsi-card)}
.panel-heading{font-weight:750;border:0;padding:15px 19px;background:#f8fbfd}
.panel-warning>.panel-heading{background:linear-gradient(100deg,#eaf5fb,#f4fafc);color:#16445f}
.panel-body{padding:19px}
#content img{max-width:100%;height:auto;border-radius:10px}
#content a{color:var(--apsi-primary);font-weight:550}
#content a:hover{color:var(--apsi-accent);text-decoration:none}
#article{background:#fff;border:1px solid var(--apsi-line);border-radius:18px;padding:20px;margin-bottom:20px;box-shadow:var(--apsi-shadow)}
legend{border-bottom:1px solid var(--apsi-line);padding-bottom:10px}
legend h4{font-weight:800}
h1,h2,h3,h4{color:var(--apsi-ink);font-weight:780;letter-spacing:-.025em}
.btn,.btn-primary{border:0;border-radius:10px;font-weight:700;padding:9px 16px}
.btn-primary{background:linear-gradient(100deg,#075985,#0e7490)}
.form-control{height:43px;border-radius:10px;border-color:#d7e2ed;box-shadow:none}
.form-control:focus{border-color:#38a3c7;box-shadow:0 0 0 3px rgba(56,163,199,.13)}
.table{background:#fff;border-radius:12px;overflow:hidden}
#footer{margin-top:28px;padding:25px;background:linear-gradient(110deg,#082f49,#075985);color:#dcecf7;border-radius:18px 18px 0 0}
#footer a{color:#fff}
.carousel{border-radius:14px;overflow:hidden}
.pagination>li>a,.pagination>li>span{border-radius:8px!important;margin:0 2px}
@media(max-width:767px){
  #wrapper.container{width:calc(100% - 20px);padding-top:10px}
  .navbar.navbar-default{margin:10px 0 16px}
  .navbar-default .navbar-nav>li>a{padding:12px 16px}
  #article{padding:14px}
  .panel-body{padding:14px}
}