/* Hilangkan padding & margin di header */
#header, 
#headerTitle, 
#headerTitle h1 {
  margin: 0 !important;
  padding: 0 !important;
}

/* Pastikan body tidak memberi padding */
body {
  margin: 0;
  padding: 0;
  background-image: url(https://i.imgur.com/uaryaKU.jpg) !important;
}


/* Gambar header full */
#headerTitle img {
  width: 100%;
  height: auto;
  display: block;
}

/* Navbar */
#navbar {
  background: linear-gradient(135deg, #228b22, #2ecc71);
  padding: 10px;
}

#navbar ul li a {
  color: #fff;
  font-weight: 600;
  font-size: 12px !important;
  padding: 6px px;
  border-radius: 6px;
  transition: all 0.3s ease;   /* animasi halus untuk hover */
  display: inline-block;       /* biar transform & padding rapi */
}

#navbar ul li a:hover {
  background: #228b22;   /* sama seperti keyword hover */
  color: #fff;
  transform: translateY(-2px) scale(1.03);
  text-decoration: none;
  box-shadow: 0 6px 16px rgba(34,139,34,0.18);
  outline: none;
}




/* === Language Block Styling === */
#sidebarLanguageToggle {
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  border-radius: 12px;
  overflow: hidden;
  font-family: Arial, sans-serif;
  margin-bottom: 20px;
}

/* Header */
#sidebarLanguageToggle .blockTitle {
  display: block;
  background: linear-gradient(135deg, #228b22, #2ecc71);
  color: white;
  text-align: center;
  font-size: 20px;        /* lebih besar */
  font-weight: bold;
  letter-spacing: 1px;
  padding: 12px;
  text-transform: uppercase; /* biar kapital semua */
}

/* Body */
#sidebarLanguageToggle form {
  background-color: #fff;
  padding: 20px;
  text-align: center;
}

/* Label */
#sidebarLanguageToggle label {
  display: block;
  margin-bottom: 8px;
  font-size: 14px;
  color: #333;
  font-weight: bold;
}

/* Select menu */
#sidebarLanguageToggle .selectMenu {
  padding: 8px 12px;
  font-size: 14px;
  border: 1px solid #ccc;
  border-radius: 6px;
  outline: none;
  transition: all 0.3s;
}
#sidebarLanguageToggle .selectMenu:hover {
  border-color: #228b22;
  box-shadow: 0 0 6px rgba(34,139,34,0.3);
}

/* Button */
#sidebarLanguageToggle .button {
  margin-top: 12px;
  padding: 8px 16px;
  background-color: #228b22;
  color: #fff;
  font-weight: bold;
  font-size: 14px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.3s;
}
#sidebarLanguageToggle .button:hover {
  background-color: #2ecc71;
  transform: scale(1.05);
}

/* === User Block Styling === */
#sidebarUser {
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  border-radius: 12px;
  overflow: hidden;
  font-family: Arial, sans-serif;
  margin-bottom: 20px;
}

/* Header User */
#sidebarUser .blockTitle {
  display: block;
  background: linear-gradient(135deg, #228b22, #2ecc71);
  color: white;
  text-align: center;
  font-size: 20px; /* setara h2 */
  font-weight: bold;
  letter-spacing: 1px;
  padding: 12px;
  text-transform: uppercase;
  margin: 0;
}

/* Body User (biar mirip dengan body language block) */
#sidebarUserContent {
  background-color: #fff;
  padding: 20px;
  text-align: center;
  font-size: 14px;
  color: #333;
}

#sidebarUserContent strong {
  display: block;
  margin: 8px 0;
  font-size: 15px;
  color: #228b22;
}

#sidebarUserContent ul {
  list-style: none;
  padding: 0;
  margin: 10px 0 0 0;
}

#sidebarUserContent ul li {
  margin: 6px 0;
}

#sidebarUserContent ul li a {
  color: #228b22;
  text-decoration: none;
  font-weight: bold;
  transition: all 0.3s;
}
#sidebarUserContent ul li a:hover {
  color: #2ecc71;
  text-decoration: underline;
}



/* Body */
#sidebarUser {
  background: #fff;
  text-align: center;
  font-size: 14px;
  color: #333;
}

#sidebarUser strong {
  display: block;
  margin: 6px 0 12px 0;
  font-size: 15px;
  color: #228b22;
}

/* List */
#sidebarUser ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

#sidebarUser ul li {
  margin: 8px 0;
}

#sidebarUser ul li a {
  display: inline-block;
  padding: 6px 12px;
  border-radius: 6px;
  background: #f9f9f9;
  color: #228b22;
  font-weight: bold;
  font-size: 14px;
  text-decoration: none;
  transition: all 0.3s;
}

#sidebarUser ul li a:hover {
  background: #228b22;
  color: #fff;
  transform: scale(1.05);
}

/* === Keyword Cloud: samakan style dengan Language block === */
#sidebarKeywordCloud {
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  border-radius: 12px;
  overflow: hidden;
  font-family: Arial, sans-serif;
  margin-bottom: 20px;

  /* body area (padding bawah + samping) — header punya padding sendiri */
  background: #fff;
  padding: 0 ;
  text-align: center;
}

/* header sama dengan blockTitle style yang lain */
#sidebarKeywordCloud .blockTitle {
  display: block;
  background: linear-gradient(135deg, #228b22, #2ecc71);
  color: #ffffff;
  text-align: center;
  font-size: 20px ;        /* setara H2 */
  font-weight: bold;
  letter-spacing: 1px;
  padding: 12px;
  text-transform: uppercase;
  margin: 0;
}

/* container keywords (aturan untuk anchor & span di dalamnya) */
#sidebarKeywordCloud a {
  display: inline-block;
  margin: 4px 2px;
  padding: 2px 10px;
  border-radius: 18px;
  color: #228b22;
  font-weight: 500;    /* ukuran konsisten */
  line-height: 1.2;
  text-decoration: none;
  transition: all 0.18s ease;
}

/* Jika ada <span> di dalam (seperti data sekarang), gunakan ukuran warisan */
#sidebarKeywordCloud a span {
  font-size: inherit;
  display: inline-block;
  vertical-align: middle;
}

/* hover/active */
#sidebarKeywordCloud a:hover,
#sidebarKeywordCloud a:focus {
  background: #228b22;
  color: #ffffff;
  transform: translateY(-2px) scale(1.03);
  text-decoration: none;
  box-shadow: 0 6px 16px rgba(34,139,34,0.18);
  outline: none;
}

/* potong teks yg terlalu panjang jadi rapi (jika ingin ellipsis uncomment) */
/* #sidebarKeywordCloud a { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } */

/* responsif: untuk layar sangat sempit, beri ukuran font sedikit mengecil */
@media (max-width: 360px) {
  #sidebarKeywordCloud .blockTitle { font-size: 20px; }
  #sidebarKeywordCloud a { font-size: 13px; padding:5px 8px; margin:6px 4px; }
}