:root {
  --tosca: #088580;
  --tosca-dark: #095c5d;
  --hover-bg: #d3d8d8;
  --text-dark: #1f2937;
  --line-bright: #064029;
  --gray-dark: #3c3f43;      /* abu gelap */
  --gray-soft: #757e8c;      /* abu sedikit terang */
  --tosca-accent: #b7ece7;   /* aksen tosca */
}

/* HEADER */
.sidebar-header-clean {
  padding: 14px 16px;
  text-align: center;

  font-weight: 600;
  letter-spacing: 1px;
  color: #f9fafb;

  /* 🔥 background abu gelap senada */
  background: linear-gradient(135deg, var(--gray-dark), var(--gray-soft));

  /* 🔥 garis tipis full */
  border: 1px solid rgba(15, 118, 110, 0.4);

  /* 🔥 sedikit rounded */
  border-radius: 10px;

  /* 🔥 efek halus */
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);

  position: relative;
}

/* 🔥 optional: garis aksen bawah tipis */
.sidebar-header-clean::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 20%;
  width: 60%;
  height: 2px;
  background: var(--tosca-accent);
  opacity: 0.6;
}

/* Sidebar */
.sidebar {
  width: 100%;
  max-width: 320px;
  font-family: sans-serif;
}

/* Header */
.sidebar-header {
  background: linear-gradient(135deg, var(--tosca), var(--tosca-dark));
  color: white;
  text-align: center;
  padding: 12px;
  font-weight: 600;
  letter-spacing: 1px;
  border-radius: 10px;
  margin-bottom: 10px;
}

/* Menu */
.menu {
  list-style: none;
  padding: 0;
  margin: 0;
}

/* 🔥 TANPA SPASI */
.menu li {
  margin-bottom: 0px;
  position: relative;
}

/* 🔥 GARIS PEMISAH */
.menu li::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 6%;
  width: 88%;
  height: 1px;
  background: rgba(255,255,255,0.2);
  transition: all 0.3s ease;
}

/* 🔥 MENU SHAPE (OVAL TIPIS) */
.menu a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 20px;

  text-decoration: none;
  color: white;

  background: linear-gradient(135deg, var(--tosca), var(--tosca-dark));

  border-radius: 7px; /* lebih cocok untuk tanpa spasi */

  transition: all 0.3s ease;
  position: relative;

  box-shadow: 0 3px 8px rgba(0,0,0,0.08);

  border: 0px solid rgba(255,255,255,0.08);
}

/* ICON */
.menu a i {
  font-size: 15px;
  min-width: 25px;
  text-align: center;
  transition: 0.3s;
}

/* 🔥 DIVIDER ICON - TEXT */
.menu a span {
  position: relative;
  padding-left: 14px;
}

.menu a span::before {
  content: "";
  position: absolute;
  left: 0;
  top: 15%;
  height: 70%;
  width: 3px;
  background: rgba(255,255,255,0.6);
  border-radius: 2px;
  transition: 0.3s;
}

/* 🔥 HOVER */
.menu a:hover {
  background: var(--hover-bg);
  color: var(--text-dark);

  transform: translateX(6px) scale(1.02);

  box-shadow: 0 6px 14px rgba(0,0,0,0.12);
}

/* Divider berubah */
.menu a:hover span::before {
  background: var(--text-dark);
}

/* Icon animasi */
.menu a:hover i {
  transform: scale(1.2);
}

/* 🔥 GARIS BAWAH JADI CERAH */
.menu li:hover::after {
  background: var(--line-bright);
  height: 2px;
  width: 92%;
}

/* ACTIVE */
.menu li.active a {
  background: linear-gradient(135deg, #115e59, #022c22);
}

.menu li.active::after {
  background: var(--line-bright);
  height: 3px;
}

.icon-img {
  width: 18px;
  height: 18px;
  object-fit: contain;

  /* warna mengikuti tema (khusus SVG biasanya) */
  filter: brightness(0) invert(1);

  transition: 0.3s;
}

/* saat hover → jadi gelap */
.menu a:hover .icon-img {
  filter: brightness(0);
  transform: scale(1.2);
}


/* BASE */
.menu-tool.wa a {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;

  border-radius: 16px;
  overflow: hidden;

  background: linear-gradient(135deg, #f3f4f6, #e5e7eb);
  color: #374151;

  border: 1px solid rgba(0,0,0,0.05);
  transition: all 0.3s ease;
}

/* ICON KIRI */
.menu-tool.wa .icon-img {
  width: 18px;
  height: 18px;
  filter: grayscale(60%);
  transition: 0.3s;
}

/* DIVIDER */
.menu-tool.wa span {
  position: relative;
  padding-left: 12px;
}
.menu-tool.wa span::before {
  content: "";
  position: absolute;
  left: 0;
  top: 20%;
  height: 60%;
  width: 2px;
  background: rgba(0,0,0,0.25);
  transition: 0.3s;
}

/* 🔥 LOGO SAMAR (DEFAULT) */
.menu-tool.wa a::before {
  content: "";
  position: absolute;
  inset: 0;

  background-image: url("https://cdn-icons-png.flaticon.com/512/733/733585.png");
  background-repeat: no-repeat;
  background-position: right center;
  background-size: 60px;

  opacity: 0.12;
  filter: grayscale(100%);
  transition: 0.3s;
}

/* 🔥 GRADASI SETENGAH (KANAN HIJAU) */
.menu-tool.wa a::after {
  content: "";
  position: absolute;
  right: 0;
  top: 0;
  width: 50%; /* 🔥 setengah area */
  height: 100%;

  background: linear-gradient(to left, #25D366, transparent);

  opacity: 0.15;
  transition: 0.3s;
}

/* =========================
   HOVER
========================= */
.menu-tool.wa a:hover {
  background: #25D366;
  color: white;
  transform: translateX(6px);
}

/* logo lebih jelas */
.menu-tool.wa a:hover::before {
  opacity: 0.25;
  filter: none;
}

/* gradasi lebih kuat */
.menu-tool.wa a:hover::after {
  opacity: 0.4;
}

/* divider */
.menu-tool.wa a:hover span::before {
  background: white;
}

/* icon kiri */
.menu-tool.wa a:hover .icon-img {
  filter: none;
  transform: scale(1.2);
}

/* BASE: putih keabu */
.menu-tool {
  position: relative;
  margin-bottom: 0; /* ikut konsep compact Anda */
}

.menu-tool a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;

  background: linear-gradient(135deg, #f3f4f6, #e5e7eb);
  color: #374151;

  border-radius: 16px;
  border: 1px solid rgba(0,0,0,0.05);

  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
}

/* ICON */
.menu-tool .icon-img {
  width: 18px;
  height: 18px;
  object-fit: contain;
  filter: grayscale(40%);
  transition: 0.3s;
}

/* DIVIDER */
.menu-tool span {
  position: relative;
  padding-left: 12px;
}
.menu-tool span::before {
  content: "";
  position: absolute;
  left: 0;
  top: 20%;
  height: 60%;
  width: 2px;
  background: rgba(0,0,0,0.2);
  transition: 0.3s;
}

/* 🔥 OVERLAY LOGO (hidden dulu) */
.menu-tool a::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0;
  background-size: 60px;
  background-repeat: no-repeat;
  background-position: right center;
  transition: 0.3s;
}

/* 🔥 HOVER GLOBAL */
.menu-tool a:hover {
  color: white;
  transform: translateX(6px);
}

/* ICON hidup */
.menu-tool a:hover .icon-img {
  filter: none;
  transform: scale(1.2);
}

/* divider ikut berubah */
.menu-tool a:hover span::before {
  background: white;
}


/* BASE */
.menu-tool a {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;

  border-radius: 16px;
  overflow: hidden;

  background: linear-gradient(135deg, #f3f4f6, #e5e7eb);
  color: #374151;

  border: 1px solid rgba(0,0,0,0.05);
  transition: all 0.3s ease;
}

/* ICON KIRI */
.menu-tool .icon-img {
  width: 18px;
  height: 18px;
  filter: grayscale(60%);
  transition: 0.3s;
}

/* DIVIDER */
.menu-tool span {
  position: relative;
  padding-left: 12px;
}
.menu-tool span::before {
  content: "";
  position: absolute;
  left: 0;
  top: 20%;
  height: 60%;
  width: 2px;
  background: rgba(0,0,0,0.25);
  transition: 0.3s;
}

/* 🔥 LOGO BACKGROUND (DEFAULT - ABU + GRADASI BRAND) */
.menu-tool a::before {
  content: "";
  position: absolute;
  inset: 0;

  background-repeat: no-repeat;
  background-position: right center;
  background-size: 60px;

  opacity: 0.12; /* samar */
  filter: grayscale(100%);
  transition: 0.3s;
}

/* 🔥 GRADASI HALUS DI UJUNG */
.menu-tool a::after {
  content: "";
  position: absolute;
  right: 0;
  top: 0;
  width: 80px;
  height: 100%;

  opacity: 0.15;
  transition: 0.3s;
}

/* =========================
   BRAND DEFAULT (SAMAR)
========================= */

/* MENDELEY */
.menu-tool.mendeley a::before {
  background-image: url("https://jurnalfamilia.org/public/site/images/adminfamilia/IMG_2865.png");
}
.menu-tool.mendeley a::after {
  background: linear-gradient(to left, #a31f34, transparent);
}

/* TURNITIN */
.menu-tool.turnitin a::before {
  background-image: url("https://cdn-icons-png.flaticon.com/512/5968/5968875.png");
}
.menu-tool.turnitin a::after {
  background: linear-gradient(to left, #00a6d6, transparent);
}

/* GRAMMARLY */
.menu-tool.grammarly a::before {
  background-image: url("https://jurnalfamilia.org/public/site/images/adminfamilia/IMG_2866.png");
}
.menu-tool.grammarly a::after {
  background: linear-gradient(to left, #15c39a, transparent);
}

/* =========================
   HOVER (FULL BRAND)
========================= */
.menu-tool a:hover {
  color: white;
  transform: translateX(6px);
}

/* warna utama saat hover */
.menu-tool.mendeley a:hover {
  background: #a31f34;
}
.menu-tool.turnitin a:hover {
  background: #00a6d6;
}
.menu-tool.grammarly a:hover {
  background: #15c39a;
}

/* logo jadi lebih jelas */
.menu-tool a:hover::before {
  opacity: 0.2;
  filter: none;
}

/* gradasi lebih kuat */
.menu-tool a:hover::after {
  opacity: 0.4;
}

/* divider */
.menu-tool a:hover span::before {
  background: white;
}

/* icon kiri */
.menu-tool a:hover .icon-img {
  filter: none;
  transform: scale(1.2);
}