body { font-family: 'Open Sans', sans-serif; margin: 0; padding: 0; background-color: #fff; color: #000; }
header { text-align: center; padding: 10px; background-color: #004d33; margin-top: auto; }
header h1 { font-family: 'Doppio One', sans-serif; color: #ffffff; font-size: 21px; }
.kop1 { text-align: center; padding: 5px; background-color: #ff0000; margin-top: auto; }
.kop h1 { font-family: 'Montserrat', sans-serif; color: #ffffff; font-size: 19px; }
.menu { display: flex; justify-content: space-around; background-color: #000; padding: 10px 0; position: sticky; top: 0; z-index: 100; }
.menu a { color: #fff; text-decoration: none; font-size: 17px; text-align: center; }
.menu a.active { color: #ffa500; }
.section { display: none; padding: 10px; background-color: #fff; border-radius: 10px; margin: 10px; }
.section.active { display: block; }
.menu a:hover { color: #ff0000; }
.search-box { width: 90%; margin: 20px auto; text-align: center; }
.search-box input { width: 90%; padding: 10px; border: none; border-radius: 10px; font-family: 'Open Sans', sans-serif; font-size: 14px; }
ol { display: flex; flex-wrap: wrap; justify-content: center; list-style: none; padding: 0; margin: 0; }
ol li { background-color: #004d33; color: #fff; border-radius: 10px; margin: 10px; padding: 10px; text-align: center; 
    font-family: 'Open Sans', sans-serif; flex: 1 1 calc(25% - 20px); }
ol li:hover { background-color: #00664d; }
ol li h2 { font-family: 'Open Sans', sans-serif; font-size: 14px; font-weight: 700; }
ol li p.note { font-family: 'Doppio One', sans-serif; font-size: 12px; font-weight: 400; }
p.hidden-keywords { display: none; }
@media (max-width: 900px) { ol li { flex: 1 1 calc(33.33% - 20px); } }
@media (max-width: 600px) { ol li { flex: 1 1 calc(50% - 20px); } }
@media (max-width: 500px) { ol li { flex: 1 1 100%; } }
.slideshow { width: 100%; height: auto; max-height: auto; overflow: hidden; position: relative; }
.slideshow img { width: 100%; height: auto; position: absolute; top: 0; left: 100%; opacity: 0; transition: all 1s ease; }
.slideshow img.active { left: 0; opacity: 1; }
.slideshow img.prev { left: -100%; opacity: 0; }
.slideshow .nav { position: absolute; top: 50%; transform: translateY(-50%); width: 100%; display: flex; 
    justify-content: space-between; z-index: 10; }
.slideshow .nav button { background: rgba(39, 124, 5, 0.5); border: none; color: white; font-size: 24px; padding: 10px;
    cursor: pointer; }
.popup { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background: #333; border-radius: 17px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); padding: 20px; display: none; z-index: 1000; text-align: center; width: 90%;
    height: 80%; }
.popup.active { display: block; }
.popup iframe { width: 100%; height: calc(80% - 250px); border-radius: 25px; border: none; margin-top: 25px; }
.footer { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 5px; background-color: #013220; padding: 20px; }
.footer-column { background-color: white; border-radius: 22px; padding: 15px; flex: 1; box-sizing: border-box; min-width: 250px; }
.footer-column h3 { font-size: 16px; margin-bottom: 10px; }
.footer-column ul { list-style: none; padding: 0; }
.footer-column ul li { margin-bottom: 8px; font-size: 14px; }
@media (max-width: 900px) { .footer { flex-direction: row; gap: 5px; } }
@media (max-width: 600px) { .footer { flex-direction: column; gap: 10px; } }
#slider-container { position: relative; width: 100%; overflow: hidden; }
#slider-images { display: flex; transition: transform 0.5s ease-in-out; }
#slider-images a { flex-shrink: 0; width: 100%; display: block; }
#slider-images img { width: 100%; height: auto; display: block; }
.slider-controls { position: absolute; top: 50%; width: 100%; display: flex; justify-content: space-between; transform: translateY(-50%); }
.slider-button { background-color: rgba(0, 0, 0, 0.5); color: white; border: none; cursor: pointer; padding: 10px; font-size: 14px; 
    border-radius: 20%; }
.kole { font-family: 'Open Sans', sans-serif; font-size: 14px; color: black; background-color: white; border: 1px solid #006400;
    border-radius: 20px; padding: 20px; width: 90%; max-width: 900px; height: 120px; overflow: auto; box-sizing: border-box; 
    margin: 20px auto; text-align: justify; }
.kole1 { font-family: 'Open Sans', sans-serif; font-size: 14px; color: black; background-color: #fff; border: 1px solid #006400;
    border-radius: 20px; padding: 20px; width: 90%; max-width: 900px; height: 699px; overflow: auto; box-sizing: border-box; 
    margin: 20px auto; text-align: justify; }
.tautan { text-decoration: none; color: white; font-family: 'Open Sans', sans-serif; font-size: 14px; font-weight: 800; 
        display: inline-block; width: 40px; height: 40px; text-align: center; line-height: 40px; border-radius: 50%; 
        background-color: #006400; }
.tautan:hover { background-color: #006400; }
/* Tombol "Back to Top" */
#backToTop { position: fixed; bottom: 20px; right: 20px; background-color: #03810a; color: white; font-size: 24px; padding: 10px 15px;
    border-radius: 50%; box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.3); cursor: pointer; display: none; 
    transition: background-color 0.3s ease, transform 0.3s ease; }
/* Mengubah warna tombol saat hover */
#backToTop:hover { background-color: #fa8f03; transform: scale(1.1); }
/* Ikon panah ke atas */
.fa-arrow-up { font-size: 24px; font-weight: 800; }    
/* a { text-decoration: none; color: white; font-family: 'Open Sans', sans-serif; font-size: 14px; font-weight: 800; 
        display: inline-block; width: 40px; height: 40px; text-align: center; line-height: 40px; border-radius: 50%; 
        background-color: #006400; } */       
.pagination { display: flex; gap: 10px; list-style: none; padding: 0; margin: 0; }
.pagination li { display: inline; }
.pagination a { display: flex; justify-content: center; align-items: center; width: 40px; height: 40px; text-decoration: none;
    color: #fff; background-color: #006400; border-radius: 50%; font-size: 16px; font-weight: bold; 
    transition: background-color 0.3s ease; }
.pagination a:hover { background-color: #004d00; }
.pagination .disabled { pointer-events: none; background-color: #999; }      
.isitombolarah { display: flex; gap: 70%; justify-content: center; align-items: center; }
.tombolarah { display: flex; justify-content: center; align-items: center; width: 30px; height: 30px; text-decoration: none;
    color: #fff; background-color: #006400; border-radius: 50%; font-size: 19px; font-weight: bold; 
    transition: background-color 0.3s ease; }
.tombolarah:hover { background-color: #004d00; }
.popup iframe { width: 90%; height: calc(80% - 250px); border-radius: 25px; border: none; margin-top: 25px; margin-left: auto;
    margin-right: auto; }
.stempel-waktu { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.stempel { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 125px; height: 75px; 
    border: 1px solid #ddd; border-radius: 17px; background-color: #98ff8a; box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1);
    color: #000; text-align: center; padding: 10px; }
.stempel-title { font-weight: bold; margin-bottom: 5px; color: #555; }
.stempel hr { width: 80%; border: none; border-top: 1px solid #0c5003;  margin: 5px 0; }
    @media (max-width: 300px) { .stempel-waktu { flex-direction: column; } }