:root {
  --sidebar-bg:#0f1b2e;
  --sidebar-btn-bg:#1e2a3f;
  --sidebar-btn-hov:#314563;

  --primary:#1f3a5f;
  --secondary:#ff8a3d;
  --bg:#f6f7f9;
  --light:#ffffff;
  --dark:#1f242b;

  --radius:14px;
  --shadow:0 6px 18px rgba(0,0,0,.06);
  --shadow-soft:0 2px 8px rgba(0,0,0,.08);

  --font-body:"Inter","Helvetica Neue",Arial,sans-serif;
  --font-heading:"Poppins","Helvetica Neue",Arial,sans-serif;
}

* { box-sizing:border-box; margin:0; padding:0; }
body {
  font-family:var(--font-body);
  background:var(--bg);
  color:var(--dark);
  line-height:1.6;
}

/* HEADER */
#top-header {
  width:100%;
  background:var(--light);
  box-shadow:var(--shadow-soft);
}
.banner-img { width:100%; height:auto; display:block; }

/* LAYOUT */
#main-area {
  display:flex; flex:1;
  min-height:72vh; gap:22px; padding:20px;
}

/* SIDEBAR */
#sidebar {
  width:280px; background:var(--sidebar-bg);
  color:var(--light); padding:16px 14px;
  border-radius:var(--radius); box-shadow:var(--shadow);
  display:flex; flex-direction:column;
  position:sticky; top:18px; align-self:flex-start;
  max-height:calc(100vh - 36px); overflow:auto;
  background-image:none !important;
}
#sub-nav ul {
  list-style:none; margin:0; padding:0;
  display:flex; flex-direction:column; gap:8px;
}
#sub-nav a {
  display:block; padding:10px 12px;
  border-radius:12px;
  background:var(--sidebar-btn-bg);
  color:#eaf1ff !important;
  font-weight:700; font-size:.95rem;
  box-shadow:var(--shadow-soft);
  transition:background .2s ease, transform .15s ease;
}
#sub-nav a:hover, #sub-nav a.active {
  background:var(--sidebar-btn-hov);
  transform:translateY(-1px);
}
.sidebar-content { margin-top:10px; font-size:.92rem; line-height:1.45; color:#d7e0f5; }

/* CONTENT */
#content { flex:1; min-width:0; }
.content-layer {
  background:var(--light); padding:22px;
  border-radius:var(--radius); box-shadow:var(--shadow);
}

/* FOOTER */
#page-footer {
  background:#0e1116; color:#b9c0ce;
  text-align:center; padding:16px; margin:20px;
  border-radius:var(--radius);
}

/* WHATSAPP FLOAT */
.whatsapp-float {
  position:fixed; bottom:22px; right:22px; z-index:9999;
  width:64px; height:64px; border-radius:50%;
  background:#25d366; display:flex; align-items:center; justify-content:center;
  box-shadow:0 10px 24px rgba(0,0,0,.15);
  transition:transform .2s ease, box-shadow .2s ease;
  border:3px solid #e9fff3;
}
.whatsapp-float img { width:32px; height:32px; }

/* RESPONSIVE */
@media (max-width:1024px){
  #main-area { flex-direction:column; padding:14px; }
  #sidebar { position:relative; top:auto; max-height:none; width:100%; }
}
@media (max-width:600px){
  #sub-nav a { font-size:.9rem; padding:9px 10px; }
  .content-layer { padding:16px; }
  .whatsapp-float { width:58px; height:58px; }
  .whatsapp-float img { width:28px; height:28px; }
}