@charset "utf-8";

/* Global Styles */
body {
  font-size: 10px;
/*  background: #101415 url(images/gg.jpg) no-repeat center 50px; */
  background-color: #101415;
  background-repeat: no-repeat;
  background-position: 50px 40px; /* Geser ke bawah 40px */
  background-size: auto;
  margin: 0;
  padding: 0;
  color: #333;
 
}
#container {
  width: 1005px;
  margin: 0 auto;
  background: #e3f7ff;
}

/* Header Styles */
#header {
  width: 100%;
  height: 128px;
/*    background: linear-gradient(135deg, #cbcbcb, #003366); */
}

#header .headerBackground {
  width: 100%;
  height: 84px;
/*   background: url(images/img01.gif) repeat-x left top; */
}

#header h1 {
  margin: 0;
    padding: 2px 10px;
    color: #203a42;
    text-align: center;
    font-size: 17px;
    font-style: italic;
/*     background: url(images/gge.png) no-repeat left center; */
   font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    background-size: contain;
    background-position: center left;
    background-repeat: no-repeat;
    background-position: 91px center;

  
}

/* Navigation Styles */

/* Navigation Styles */
#navcontainer ul {
   font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
     list-style: none;
    margin: 25px 0 -39px 0;
    padding: 40px 0;
    display: flex
;
    justify-content: center;
    background: linear-gradient(90deg, #08254b, #778dfc, #778dfc);
    /* box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25); */
    overflow: hidden;
    /* border-radius: 8px; */
    margin-top: -12px;
}

#navcontainer ul li {
  margin: 0 12px;
}

#navcontainer ul li a {
    display: block;
    padding: 23px 31px;
    color: #ffffff;
    font-size: 18px;
    text-decoration: none;
    transition: all 0.3s ease-in-out;
    border-radius: 11px;
    background-color: rgb(14 96 181);
    box-shadow: inset 0 0 0 0 transparent;
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}

#navcontainer ul li a:hover {
  background-color: #505a72;
  color: #e0e0e0;
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
}


#navcontainer ul li a::after {
  content: '';
  position: absolute;
  width: 0%;
  height: 2px;
  bottom: 8px;
  left: 50%;
  background-color: #ffff;
  transition: all 0.3s ease;
}

#navcontainer ul li a:hover::after {
  width: 60%;
  left: 20%;
}

#navcontainer ul li a:hover {
  color: #ffffff;
}

/* Content Styles */
#content {
  width: 700px;
  float: left;
  background: url(images/contentBackground.gif) repeat-y right top;
}

.isi {
  padding: 20px;
  line-height: 1.6;
}

/* Sidebar Styles */
#sidebar1 {
  float: right;
  width: 200px;
  background: #f1f1f1;
  padding: 20px;
}

#sidebar1 .menu h1,
#sidebar1 .categories h1,
#sidebar1 .archives h1 {
  font-size: 16px;
  color: #888;
  border-bottom: 1px dashed #bbb;
  padding-bottom: 5px;
  margin-bottom: 10px;
}

#sidebar1 ul,
#sidebar1 ol {
  list-style: none;
  padding: 0;
  margin: 0 0 20px 0;
}

#sidebar1 ul li,
#sidebar1 ol li {
  padding: 5px 0;
  border-bottom: 1px dotted #ccc;
}

#sidebar1 ul li a,
#sidebar1 ol li a {
  color: #666;
  text-decoration: none;
}

#sidebar1 ul li a:hover,
#sidebar1 ol li a:hover {
  color: #000;
}

/* Footer Styles */
#footer {
  clear: both;
  width: 100%;
      background: linear-gradient(135deg, #cbcbcb, #003366); /* biru gelap ke biru keabu-abuan */
  color: #ffff; /* warna teks serupa dengan teks pada gambar (pink soft) */
  text-align: center;
  padding: 5px 0;
  font-size: 14px;
  font-family: Arial, sans-serif;
  box-shadow: 0 -2px 4px rgba(0,0,0,0.2);
  margin-top: 21px;
}



#footer p {
  margin: 0;
  font-size: 13px;
  letter-spacing: 1px;
}

/* Additional Styles */
#galeri,
#blog,
#tulisan,
#tentang,
#bukutamu,
#link,
#sitemap,
#rss,
#peta,
#berita {
  padding: 10px;
  line-height: 1.6;
  background: #fff url(images/konten.png) no-repeat right bottom;
}

#galeri h1,
#blog h1,
#tulisan h1,
#tentang h1,
#bukutamu h1,
#link h1,
#sitemap h1,
#rss h1,
#peta h1,
#berita h1 {
  font-size: 18px;
  color: #555;
  border-bottom: 2px solid #ddd;
  padding-bottom: 5px;
  margin-bottom: 15px;
}

#galeri p,
#blog p,
#tulisan p,
#tentang p,
#bukutamu p,
#link p,
#sitemap p,
#rss p,
#peta p,
#berita p {
  margin-bottom: 15px;
}

/* Sitemap Specific */
#sitemap ul {
  list-style: square inside;
}

#sitemap ul li {
  margin-bottom: 8px;
}

#sitemap ul li a {
  color: #333;
}

#sitemap ul li a:hover {
  color: #000;
}

/* RSS Specific */
#rss .kotakrss {
  padding: 10px;
  border: 1px solid #ccc;
  margin-bottom: 20px;
}

/* Berita Specific */
#berita .kotakberita {
  padding: 10px;
  border: 1px solid #ccc;
  margin-bottom: 20px;
}

/* Table Styles */
table {
  width: 80%;
  border-collapse: collapse;
  margin-bottom: 10px;
}



table th {
  background: #eee;
  font-weight: bold;
}
  .button {
background-color: #0e60b5;
    /* background: linear-gradient(45deg, #102f40, #375f70); */
    color: white;
    border: none;
    padding: 18px 70px;
    text-transform: uppercase;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.3s ease, box-shadow 0.3s ease, transform 0.2s ease;
}

.button:hover {
  background-color:#51c164; /* Warna merah lebih gelap saat hover */
  transform: translateY(-2px); /* Efek sedikit terangkat saat hover */
}

.button:active {
  background-color: #51c164; /* Warna saat tombol ditekan */
  transform: scale(0.98); /* Efek sedikit mengecil saat ditekan */
}

.button:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(244, 67, 54, 0.4);
}