/* Mengimport font */  
@import url(//fonts.googleapis.com/css?family=Open+Sans:400,700,700italic,400italic);  
@import url(//fonts.googleapis.com/css?family=Cuprum:400,400italic,700,700italic);
/* Mengimpor Font Awesome */
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css');


#headerTitle img {
    width: 20vw;
    height: auto;
    max-width: 100%;
}

#header {
    background: linear-gradient(90deg, #2E7D32, #3CB371); /* Gradasi hijau tua ke hijau sedang */
    padding-bottom: 40px;
    padding-top: 20px;
    text-align: center;
}

#navbar {
    background-color: #3CB371; /* Hijau sedang untuk navbar */
    background-repeat: repeat-x;
    border: 0;
    height: 50px;
    margin-bottom: 20px;
    padding: 0;
    text-align: center;
    font-size: 1.1em;
}

#navbar ul {
    margin: 0;
    padding: 0;
}

#navbar ul li {
    display: inline;
    margin: 0 15px;
    padding: 0;
}

#navbar a, #navbar a:link, #navbar a:visited {
    color: #fff;
    font-family: 'Cuprum', sans-serif;
    display: inline-block;
    font-weight: 700;
    line-height: 50px;
    padding-left: 10px;
    padding-right: 10px;
    text-decoration: none;
    transition: background-color 0.3s ease-in-out;
}

#navbar a:hover {
    background: #66CDAA; /* Warna lebih terang untuk hover */
    display: inline;
    padding: 0 15px;
}

body, #body, #container {
    background-color: #F0FFF0; /* Warna hijau pastel untuk latar belakang */
    color: #2C3E50;
    font-family: 'Open Sans', sans-serif;
    font-size: 18px;
    line-height: 1.6em;
}

#container {
    background-color: #F0FFF0;
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
    text-align: left;
}

#header h1 {
    color: #fff;
    font-family: 'Cuprum', sans-serif;
    font-size: 2.5em;
    font-weight: 700;
    letter-spacing: 2px;
    line-height: 120px;
    text-shadow: 2px 2px #006400; /* Bayangan hijau tua untuk menonjolkan teks */
    margin: 0;
}

#headerTitle img {
    float: left;
    margin-right: 20px;
}

#main {
    float: left;
    margin-left: 0;
    margin-right: 0 !important;
    overflow: visible !important;
    padding: 20px;
    position: relative;
    width: 805px;
}

#content h1, #content h2, #content h3, #content h4, #main>h2 {
    color: #006400; /* Warna hijau tua untuk judul konten */
    font-family: 'Cuprum', sans-serif;
    font-weight: 700;
}

ul.sidemenu li a {
    background: #3CB371; /* Hijau sedang untuk menu samping */
    border-bottom: 1px solid #006400; /* Warna hijau tua untuk garis bawah */
    color: #fff;
    display: block;
    padding: .8em 15px;
    text-decoration: none;
    transition: background-color 0.3s ease-in-out;
    font-size: 1em;
}

ul.sidemenu li a:hover {
    background-color: #2E7D32; /* Hijau lebih gelap untuk hover */
    text-decoration: none;
}

/* #breadcrumb {
    margin: 0 20px;
    padding: 1em 0;
    border-bottom: 1px dotted #006400; /* Warna hijau untuk breadcrumb */
   /*  color: #3CB371;
    font-size: 1em;
    text-transform: uppercase;*/
}

#rightSidebar div.block span.blockTitle {
    background-color: #006400; /* Hijau tua untuk judul blok di sidebar */
    color: white;
    display: block;
    letter-spacing: 0;
    margin-bottom: 10px;
    padding: .6em 10px !important;
    text-transform: uppercase;
    font-weight: bold;
    text-align: center;
}

.pkp_site_name .is_img img {
    display: inline-block;
    max-height: 200px;
    max-width: 100%;
    width: auto;
    height: auto;
}

a:hover {
    color: #006400; /* Hijau tua untuk hover link */
    text-decoration: none;
    transition: color 0.3s ease-in-out;
}

/* Tombol dengan efek hijau */
input[type=button], input[type=submit] {
    background-color: #006400;
    border: none;
    border-radius: 4px;
    color: #fff;
    padding: 10px 20px;
    font-size: 1em;
    cursor: pointer;
    transition: background-color 0.3s ease-in-out;
}

input[type=button]:hover, input[type=submit]:hover {
    background-color: #2E7D32; /* Hijau lebih gelap saat hover */
}

#rightSidebar {
    background-color: #F0FFF0;
    padding: 20px;
    font-size: 1em;
    text-align: left;
    border-left: 2px solid #006400;
}

#rightSidebar div.block {
    padding-bottom: 15px;
    margin-bottom: 20px;
}

.banner-img {
    margin-bottom: 20px;
    border: 2px solid #006400;
    transition: opacity 0.3s ease-in-out;
}

.banner-img:hover {
    opacity: 0.85;
}

.indexers a:hover {
    border: 2px dotted #006400;
    opacity: 0.85;
}

#pageFooter {
    background-color: #2E7D32; /* Hijau gelap yang sesuai dengan tema */
    color: white;
    padding: 20px;
    text-align: center;
    font-family: 'Open Sans', sans-serif;
}

#pageFooter .footer-content {
    max-width: 1200px;
    margin: 0 auto;
}

#pageFooter .footer-logo {
    max-height: 50px;
    margin-bottom: 10px;
}

#pageFooter p {
    margin: 5px 0;
}

#pageFooter a {
    color: #FFD700; /* Warna emas untuk link */
    text-decoration: none;
}

#pageFooter a:hover {
    text-decoration: underline;
}

/* Pengaturan pkp_structure_footer dan pkp_footer_conten */
.pkp_structure_footer {
    background-color: #2E7D32; /* Sesuaikan background dengan pkp_footer_conten */
    padding: 20px 0;
    color: #fff;
    text-align: center;
    display: flex;
    justify-content: space-between; /* Mengatur kiri dan kanan */
}

.pkp_footer_conten {
    text-align: left;
    margin-left: 20px; /* Mengatur jarak dari kiri */
}

.pkp_brand_footer {
    text-align: right;
    margin-right: 20px; /* Mengatur jarak dari kanan */
}

/* Pengaturan obj_article_summary dan cmp_article_list dengan shadow */
.cmp_article_list .obj_article_summary {
    padding: 20px;
    background-color: #e0f7e9; /* Warna latar belakang hijau muda */
    border-radius: 8px;
    margin-bottom: 15px;
    box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .15); /* Shadow regular */
    transition: box-shadow 0.3s ease-in-out;
}

.cmp_article_list .obj_article_summary:hover {
    box-shadow: 0 1rem 3rem rgba(0, 0, 0, .175); /* Shadow besar saat hover */
}

.shadow-none {
    box-shadow: none;
}

.shadow-sm {
    box-shadow: 0 .125rem .25rem rgba(0, 0, 0, .075); /* Shadow kecil */
}

.shadow-lg {
    box-shadow: 0 1rem 3rem rgba(0, 0, 0, .175); /* Shadow besar */
}

.bg-light {
    background-color: #f8f9fa !important; /* Warna background terang */
}

.rounded {
    border-radius: .25rem !important; /* Radius sudut kecil */
}

/* Tambahan untuk articlesBySimilarityList dengan shadow besar */
#articlesBySimilarityList {
    background-color: #e0f7e9; /* Warna latar belakang hijau muda */
    border: 1px solid #3CB371; /* Warna hijau sedang untuk batas */
    border-radius: 8px;
    padding: 20px;
    margin-top: 20px;
    box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.175); /* Shadow besar seperti shadow-lg di Bootstrap */
}

#articlesBySimilarityList h2 {
    color: #006400;
    font-family: 'Cuprum', sans-serif;
    font-size: 1.5em;
    font-weight: 700;
    border-bottom: 2px solid #006400;
    padding-bottom: 10px;
    margin-bottom: 20px;
}

#articlesBySimilarityList ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

#articlesBySimilarityList ul li {
    background-color: #2E7D32;
    color: white;
    padding: 10px 15px;
    margin-bottom: 10px;
    border-radius: 5px;
    transition: background-color 0.3s ease-in-out, opacity 0.3s ease-in-out;
    box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.175); /* Shadow besar seperti shadow-lg di Bootstrap */
}

#articlesBySimilarityList ul li:hover {
    background-color: #006400;
    opacity: 0.85;
    box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.175);
}

#articlesBySimilarityList ul li a {
    color: #FFFFFF;
    text-decoration: none;
    font-weight: bold;
}

#articlesBySimilarityList ul li a:hover {
    color: #FFD700;
    text-decoration: underline;
}

/* Tata letak grid untuk daftar */
ol {
    list-style: none;
    counter-reset: step-counter;
}

ol li {
    position: relative;
    padding-left: 40px;
    margin-bottom: 25px;
}

ol li::before {
    content: counter(step-counter);
    counter-increment: step-counter;
    position: absolute;
    top: 0;
    left: 0;
    background-color: #2E7D32;
    color: #fff;
    width: 30px;
    height: 30px;
    text-align: center;
    line-height: 30px;
    border-radius: 50%;
    font-weight: bold;
}

/* Blok penekanan */
.important-section {
    background-color: #e0f7e9;
    padding: 15px;
    border-left: 5px solid #2E7D32;
    margin-bottom: 20px;
    box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.1);
}

/* Hover effect */
h2:hover {
    color: #FFD700;
    transition: color 0.3s ease-in-out;
}

a:hover {
    color: #FFD700;
    text-decoration: underline;
    transition: color 0.3s ease-in-out;
}

/* Blockquote styling */
blockquote {
    font-style: italic;
    background-color: #f0fff0;
    border-left: 5px solid #3CB371;
    padding: 10px;
    margin: 15px 0;
}

/* Pengaturan entry_details dengan shadow besar */
.entry_details {
    background-color: #e0f7e9; /* Warna latar belakang hijau muda */
    color: #2e8b57; /* Warna teks hijau gelap */
    padding: 20px; /* Memberikan padding untuk ruang */
    border-radius: 8px; /* Membuat sudut melengkung */
    border: 1px solid #3cb371; /* Border hijau */
    margin-bottom: 20px; /* Memberikan jarak bawah */
    box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.175); /* Shadow besar seperti shadow-lg di Bootstrap */
}

.entry_details h2, .entry_details h3 {
    color: #006400; /* Warna hijau tua untuk judul */
}

.entry_details p {
    color: #2e8b57; /* Warna hijau untuk teks isi */
}

.entry_details a {
    color: #006400; /* Warna hijau tua untuk tautan */
    text-decoration: none;
}

.entry_details a:hover {
    color: #FFD700; /* Warna emas saat hover */
    text-decoration: underline;
}

/* ====================================================================== */
/* Mengatur tampilan ikon Font Awesome */
.fa {
    font-size: 24px;
    color: #3CB371; /* Warna hijau */
    margin: 0 10px; /* Spasi antar ikon */
    transition: color 0.3s ease-in-out;
}

/* Mengatur hover effect untuk ikon */
.fa:hover {
    color: #FFD700; /* Warna emas saat hover */
}