body {
      margin: 0;
      font-family: "Segoe UI", sans-serif;
      
    }
   
    .notify {
      position: relative;
    }
    .notify::after {
      content: "1";
      position: absolute;
      top: -5px;
      right: -8px;
      background: red;
      color: white;
      font-size: 10px;
      padding: 2px 5px;
      border-radius: 50%;
    }


     .sidebar {
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  width: 70px;
  background: linear-gradient(to bottom, #f9f9ff, #f0ebff);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 15px 0;
  border-right: 1px solid #e2e2e2;
}
.sidebar a {
  zoom:92%;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  color: #5a3ba0;
  font-size: 12px;
  margin: 12px 0;
  transition: all 0.2s ease;
}
.sidebar a i {
  font-size: 20px;
  margin-bottom: 5px;
}
.sidebar a:hover {
  color: #7d4de4;
}
.sidebar .active {
  background: #ece9f8;
  border-radius: 12px;
}
.sidebar .profile {
  margin-top: auto;
  margin-bottom: 10px;
}

.sidebar a.active {
  font-weight: 700;
  background: rgba(98, 139, 255, 0.11);
  color: #3a5fd8;
  box-shadow: 0 1px 6px -4px #7296e0;
}
.sidebar a.active i {
  color: #4463be;
}
.sidebar a:hover:not(.active) {
  background: rgba(160, 180, 255, 0.11);
}

/* Responsive: jadikan sidebar horizontal di mobile */
@media (max-width: 768px) {
    
      .content_aboutus{
    padding: 40px !important;
  }

  .btn-home{
    zoom:85% !important;
  }

  .ico-content {
    gap : 1rem !important;
  }
    
  .content-top{
    margin-top: 14% !important;
  }
  
  .sidebar {
    flex-direction: row;
    justify-content: space-between; /* menu diratakan kiri–kanan */
    align-items: center;
    height: 70px;
    width: 100%;
    bottom: -6px;
    top: auto;
    left: 0;
    border-top: 1px solid #e2e2e2;
    border-right: none;
    padding: 0 10px;
            z-index: 99;

  }

  .sidebar a {
    flex: 1;               /* semua link ambil lebar sama rata */
    text-align: center;
    margin: 0;
    font-size: 11px;
  }

  .sidebar a span {
    display: block;
    font-size: 10px;
  }

  .sidebar .profile {
    position: relative;
    flex: 0 0 auto;         /* tidak ikut melar */
    margin: 0;
    transform: translateY(-15%); /* sedikit naik agar pas */
  }

  .sidebar .profile img {
    width: 50px;
    height: 50px;
    border: 3px solid #fff;
    border-radius: 50%;
  }

  .whatsapp-float {
    margin-bottom: 15%;
  }

  .content {
    margin-left: 0px !important;
  }
}




    .content {
      margin-left: 240px;
      padding: 20px;
    }
    /* .search-bar {
      border-radius: 30px;
      padding-left: 15px;
      border: 1px solid #ddd;
    } */
    .recent-card {
      border: 1px solid #eee;
      border-radius: 12px;
      overflow: hidden;
      background: white;
      box-shadow: 0 2px 6px rgba(0,0,0,0.05);
      transition: transform 0.2s ease;
    }
    .recent-card:hover {
      transform: translateY(-5px);
    }
    .recent-card img {
      width: 100%;
      height: 160px;
      object-fit: cover;
    }
    .recent-card .card-body {
      font-size: 14px;
    }



.search-bar {
  max-width: 700px;
  border-radius: 50px;
  padding: 2px; /* jarak untuk border gradient */
  background: linear-gradient(90deg, #00c6ff, #7b2ff7); /* gradient border */
}

.search-bar > .d-flex {
  background: #fff; /* isi putih */
  border-radius: 50px;
}

.search-bar input:focus {
  outline: none;
  box-shadow: none;
}



.btn.rounded-circle {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
      padding-top: 11px;
}





.icon-circle {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 35px;
  line-height: 1;
  zoom:70%;
  cursor: pointer;
  transition: all 0.2s ease;
}
.icon-circle:hover {
  background: rgba(0,0,0,0.05);
  border: 3px solid rgba(0,0,0,0.15); /* default border gelap tipis */
}

/* Custom border sesuai background */
.bg-primary {
  background-color: #0d6efd !important;
  border-color: #0a58ca !important; /* sedikit lebih gelap */
}

.bg-info {
  background-color: #0dcaf0 !important;
  border-color: #0aa2c0 !important;
}

.bg-purple {
  background-color: #a020f0 !important;
  border-color: #7012a3 !important;
}

.bg-indigo {
  background-color: #3f51b5 !important;
  border-color: #2c387e !important;
}

.bg-light {
  background-color: #f8f9fa !important;
  border-color: #d6d8db !important;
}

/* 🔴 Merah (modern red / rose) */
.bg-rose {
  background-color: #e63946 !important;
  border-color: #b82c37 !important;
}

/* 🟠 Oranye (sunset orange) */
.bg-orange {
  background-color: #ff6f00 !important;
  border-color: #cc5800 !important;
}

/* 🟡 Kuning (amber) */
.bg-amber {
  background-color: #ffc107 !important;
  border-color: #d39e00 !important;
}

/* 🟢 Hijau (emerald/teal modern) */
.bg-emerald {
  background-color: #2ecc71 !important; 
  border-color: #239b56 !important;
}

.bg-teal {
  background-color: #20c997 !important;
  border-color: #198f75 !important;
}

/* 🔵 Biru (cyan / sky) */
.bg-cyan {
  background-color: #00bcd4 !important;
  border-color: #008fa1 !important;
}

.bg-sky {
  background-color: #0ea5e9 !important; 
  border-color: #0369a1 !important;
}

/* 🟣 Ungu (violet) */
.bg-violet {
  background-color: #8b5cf6 !important;
  border-color: #6d28d9 !important;
}

/* 🌸 Pink / Fuchsia */
.bg-fuchsia {
  background-color: #d946ef !important;
  border-color: #a21caf !important;
}

/* 🩵 Soft / Cool (slate/neutral) */
.bg-slate {
  background-color: #64748b !important;
  border-color: #475569 !important;
}

.bg-neutral {
  background-color: #9e9e9e !important;
  border-color: #616161 !important;
}




.ico-text {
    font-family: 'Poppins', sans-serif;
    font-size: 12px;
    opacity: 90%;
    font-weight: 500;
}


/*AGAR MIRIP CANVA*/
.gradient-bg {
  background: linear-gradient(
    180deg,
    rgba(165, 240, 255, 0.4) 0%,  
    rgba(217, 179, 255, 0.3) 20%, 
    #ffffff 70%                
  );
}
/*AGAR MIRIP CANVA*/



.content-porto {
  padding:15px
}

.custom-btn {
    background: #fff;
    border: 1px solid #ddd;
    font-size: 14px;
    transition: background 0.2s, border 0.2s;
  }
  .custom-btn:hover {
    background: #f5f5f5;
  }
  .active-btn {
    border: 1px solid #a855f7; /* ungu tipis */
    color: #6b21a8;
  }

  /* Icon button */
  .icon-btn {
    background: #fff;
    border: 1px solid #ddd;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
  }
  .icon-btn:hover {
    background: #f5f5f5;
  }

  /* Dropdown */
  .custom-dropdown {
    border-radius: 12px;
    border: 1px solid #ddd;
    padding: 6px 0;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  }
  .custom-dropdown .dropdown-item {
    font-size: 14px;
    padding: 8px 16px;
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .custom-dropdown .dropdown-item:hover {
    background: #f5f5f5;
  }
  .custom-dropdown .dropdown-item.active {
    background: #f0ebff; /* ungu muda */
    color: #6b21a8;
    font-weight: 500;
  }

  .dropdown-menu {
  z-index: 2000;
}


.img-stack-home {
  width: 25px !important; height: 25px !important; object-fit: contain !important;zoom:102%;padding-right: 5px;
}


.badge-logo {
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .5px;
  box-shadow: 0 2px 6px rgba(0,0,0,.1);
  zoom:90%
}

.badge-published {
  background: rgba(25,135,84,0.1); /* hijau muda transparan */
  color: #198754;
  border: 1px solid #198754;
}

.badge-archived {
  background: rgba(108,117,125,0.1); /* abu transparan */
  color: #6c757d;
  border: 1px solid #6c757d;
}

.badge-draft {
  background: rgba(255,193,7,0.15); /* kuning muda */
  color: #856404;
  border: 1px solid #ffc107;
}


.card-title-fixed {
  display: -webkit-box;
  -webkit-line-clamp: 2;   /* max 2 baris */
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 3rem;        /* tinggi fix agar selalu sama, walau 1 baris */
  line-height: 1.5rem;     /* tinggi per baris */
}




.recent-badge i {
  display: inline-block;
  transition: transform 0.3s ease;
}

.recent-badge:hover i {
  transform: rotate(20deg) scale(1.2);
}



/* Default */
/* .icon-circle {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  transition: all 0.3s ease;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  cursor: pointer;
} */




/* Active state */
.active .icon-circle {
  background: linear-gradient(135deg, #007bff, #00d4ff);
  box-shadow: 0 0 12px rgba(0, 123, 255, 0.6);
  transform: scale(1.1);
}

.active .ico-text {
  font-weight: 600;
  color: #007bff;
}


.d365-badge img {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.d365-badge:hover img {
  transform: scale(1.2) rotate(20deg);
}



/* default item */
.d-flex.flex-column.text-center {
  cursor: pointer;
  transition: all 0.3s ease;
  border-radius: 12px;
  padding: 8px;
}

/* hover efek */
.d-flex.flex-column.text-center:hover {
  background-color: rgba(0, 123, 255, 0.08); 
  transform: translateY(-2px);
}

/* active state */
.d-flex.flex-column.text-center.active {
  /* background-color: rgba(13, 110, 253, 0.15); */
  transform: scale(1.05); 
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}




.whatsapp-float {
  position: fixed;
  bottom: 20px;      /* Jarak dari bawah */
  right: 20px;        /* Jarak dari kiri */
  background-color: #25D366;
  color: #fff;
  font-size: 28px;
  width: 55px;
  height: 55px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 4px 10px rgba(0,0,0,0.2);
  z-index: 9999;     /* Supaya muncul di atas */
  text-decoration: none;
  transition: transform 0.2s ease-in-out;
}
.whatsapp-float:hover {
  transform: scale(1.1);
  background-color: #1ebe5d;
}