/* Reset umum */
body {
  font-family: 'Inter', sans-serif;
  background-color: #f9fafb;
  margin: 0;
}

/* Sidebar */
aside {
  width: 15rem;
  background-color: #f3f4f6;
  border-right: 1px solid #e5e7eb;
  padding: 1.5rem 1rem;
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
}

aside h1 {
  font-size: 1.25rem;
  font-weight: 700;
  color: #ef4444;
  margin-bottom: 2rem;
  text-align: left;
}

/* Menu Sidebar */
aside nav {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

aside nav a {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.55rem 0.75rem;
  border-radius: 0.5rem;
  color: #111827;
  font-size: 0.95rem;
  font-weight: 500;
  transition: all 0.2s ease;
}

aside nav a:hover {
  background-color: #e5e7eb;
}

aside nav a.menu-active {
  background-color: #dbeafe;
  color: #2563eb;
  font-weight: 600;
}

/* Ikon */
.icon {
  width: 1.1rem;
  height: 1.1rem;
  flex-shrink: 0;
  display: inline-block;
}

/* Main content */
main {
  margin-left: 15rem;
  padding: 1.5rem 2rem;
}

/* Tombol */
.btn-primary {
  background-color: #2563eb;
  color: white;
  padding: 0.5rem 1rem;
  border-radius: 0.5rem;
  transition: background-color 0.2s;
}
.btn-primary:hover {
  background-color: #1e40af;
}

/* Card */
.card {
  background-color: white;
  border-radius: 0.75rem;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
  padding: 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Responsif */
@media (max-width: 768px) {
  aside {
    transform: translateX(-100%);
    transition: transform 0.3s ease;
    z-index: 50;
  }
  aside.show {
    transform: translateX(0);
  }
  main {
    margin-left: 0;
    padding: 1rem;
  }
}

/* Badge Status */
.status {
  display: inline-block;
  background-color: #dbeafe;      /* biru muda */
  color: #2563eb;                 /* teks biru */
  font-size: 0.8rem;
  font-weight: 600;
  padding: 0.25rem 0.75rem;       /* ruang dalam seimbang */
  border-radius: 9999px;          /* bikin oval */
  line-height: 1;
  white-space: nowrap;            /* biar gak pecah ke bawah */
}

/* Saat di tampilan mobile */
@media (max-width: 768px) {
  .status {
    display: inline-block;
    width: auto;                  /* biar tidak memanjang penuh */
    padding: 0.25rem 0.6rem;
    font-size: 0.75rem;
    text-align: center;
  }
}

/* Garis animasi di bawah judul */
.animated-lines {
  position: relative;
  height: 4px;
  overflow: hidden;
  border-radius: 2px;
  margin-bottom: 1rem;
}

/* Garis biru dan merah */
.animated-lines::before,
.animated-lines::after {
  content: "";
  position: absolute;
  top: 0;
  width: 200%;
  height: 2px;
  animation: moveLines 4s linear infinite;
}

/* Garis biru di atas */
.animated-lines::before {
  background: linear-gradient(90deg, transparent 0%, #3b82f6 50%, transparent 100%);
  animation-delay: 0s;
}

/* Garis merah di bawah */
.animated-lines::after {
  top: 2px;
  background: linear-gradient(90deg, transparent 0%, #ef4444 50%, transparent 100%);
  animation-delay: 2s;
}

/* Animasi berjalan dari kanan ke kiri */
@keyframes moveLines {
  0% {
    transform: translateX(100%);
  }
  100% {
    transform: translateX(-100%);
  }
}

/* Efek garis animasi bawah teks */
.animated-underline {
  position: relative;
  display: inline-block;
  color: #111827;
  font-weight: 600;
}

/* Garis merah & biru berjalan dari kanan ke kiri dengan jarak */
.animated-underline::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -6px;
  width: 100%;
  height: 3px;
  background: repeating-linear-gradient(
    90deg,
    #3b82f6 0%,
    #3b82f6 8%,
    transparent 8%,
    transparent 12%,
    #ef4444 12%,
    #ef4444 20%,
    transparent 20%,
    transparent 24%
  );
  background-size: 200% 100%;
  border-radius: 2px;
  animation: moveUnderline 10s linear infinite; /* 💡 Durasi diperpanjang */
}

/* Animasi dari kanan ke kiri */
@keyframes moveUnderline {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

.icon-box {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;        /* ukuran kotak */
  height: 2.5rem;       /* tinggi sama dengan lebar agar bulat */
  border-radius: 9999px; /* membuat lingkaran */
  background-color: #dbeafe; /* warna biru muda */
  color: #2563eb;        /* warna ikon biru */
  flex-shrink: 0;
}