/* ======================================================
   RESET
====================================================== */
*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}


/* ======================================================
   BODY
====================================================== */
body{
  font-family: "Segoe UI", Arial, sans-serif;
  background:#f1f5f9;
  color:#0f172a;
  min-height:100vh;
}


/* ======================================================
   SIDEBAR BACKGROUND (PC VIEW - KEEP)
====================================================== */

.sidebar,
.side{
  background:
    linear-gradient(rgba(0,0,0,0.55), rgba(0,0,0,0.55)),
    url("/assets/img/side2.jpg") center center no-repeat !important;

  background-size: cover !important;
  color:#fff;
}

.sidebar a,
.side a,
.sidebar h1,
.side h1,
.sidebar span,
.side span{
  color:#fff;
}


/* ======================================================
   MOBILE FIX
====================================================== */
@media (max-width:768px){

  .sidebar,
  .side{
    position:fixed;
    top:0;
    left:0;
    height:100vh;
    width:260px;
    z-index:999;
  }

}


/* ======================================================
   HEADING
====================================================== */
h1{
  font-size:22px;
  font-weight:600;
  margin-bottom:20px;
}

h2{
  font-size:18px;
  margin-bottom:10px;
}


/* ======================================================
   LINK
====================================================== */
a{
  text-decoration:none;
  color:inherit;
}


/* ======================================================
   QUICK MENU GRID
====================================================== */

.quick-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap:18px;
}

.quick-card{
  background:#fff;
  border-radius:14px;
  padding:22px;
  text-decoration:none;
  color:#111;

  box-shadow:0 8px 20px rgba(0,0,0,0.08);
  transition:.2s;

  display:flex;
  flex-direction:column;
  gap:8px;
}

.quick-card:hover{
  transform:translateY(-4px);
  box-shadow:0 12px 28px rgba(0,0,0,0.15);
}

.quick-icon{ font-size:28px; }
.quick-title{ font-weight:600; }
.quick-desc{ font-size:12px; color:#6b7280; }


.main-footer{
  clear: both;   /* 🔥 INI WAJIB */
  text-align:center;
  padding:20px 0;
  font-size:12px;
  color:#9ca3af;
  margin-top:40px;
}