* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {font-family:'Plus Jakarta Sans',sans-serif;}
a{text-decoration:none;outline:none;}
h5{border-bottom: 1px solid #ccc;color: #4e4e4e;padding:0px 0px 20px 0px;margin: 20px 0px 30px 0px;}

#top_panel{background:none;width:100%;text-align:center;padding:5px;position:fixed;z-index:9999;}
#top_panel.show{box-shadow:0px 3px 10px #444;background:#fff;}
.top_wrap{background:none;width:1300px;position:relative;}

.header_menu{text-align:right;}.header_menu ul{margin:0px;padding:0px;}
.header_menu li {display:inline-block;}
.header_menu a {display:block;color:#000;font-size:16px;padding:35px 15px 40px 15px;margin:0px;font-weight:bold;text-decoration:none;}
.header_menu a:hover{color:#1875bc;}
.header_menu > ul > li:hover,li.active > a{text-decoration:none;color:#1875bc;}
.header_menu li:hover .dropdown{display: block; margin:0;opacity: 1;visibility: visible;}
.parent{position: relative;}
.dropdown {
    position:absolute;
    list-style:none;
    visibility: hidden;
    text-align:left;
    padding:0px;
    background:#0098d1;
    z-index:9999;
}
.dropdown li{display: block;}
.dropdown a {
    display: block;
    padding: 10px 0px 10px 15px;
    color:#fff;font-size:16px;
}
.dropdown li:hover a{text-decoration: none;background:#0379a6;}

#search{position:absolute;right:0;top:0px;border-left:1px solid #0098d1;border-right:1px solid #0098d1;padding:23px 15px;text-align:center;}#search input,text{background:none;border:none;width:100px;color:#fff;font-family:'Doppio One';font-size:16px;}#search input:focus{color:#444;}

#logo{position:absolute;top:5px;}#logo img{width:auto;height:85px;}

#stats{
    background-image: linear-gradient(to right, #5cc2c8, #065ba2);
    padding: 50px;
    color: #fff;
}
#stats td{width:400px;}
#stats-title{font-weight: bold;font-size: 50px;color: #fff;}
#stats-desc{font-size: 24px;color: #fff;}

#berita {margin:0px 15px;width:400px;height:400px;text-align:left;border-radius:10px;position:relative;}
#berita:hover{opacity: 0.65;filter: alpha(opacity=65);}
#berita img{height:100%;width:100%;margin:0px;object-fit:cover;object-position:center center;border-radius:10px;z-index:-1;}
#berita div{position:absolute;width:100%;bottom:0px;left:0px;color:#fff;padding:150px 0px 0px 0px;background-image: linear-gradient(to top, rgba(0,0,0,1), rgba(0,0,0,0)); border-radius:0px 0px 10px 10px;}
#berita p{margin:10px 0px 15px 20px;width:90%;padding:10px 0px 0px 0px;color:#fff;font-weight:normal;text-align:left;font-size:20px;}
#berita span{font-size: 12px;font-weight: bold;color: yellow;l}
#berita_lainnya{width:170px;padding: 10px 0px;font-size: 18px;border-radius: 5px;border: 2px solid #00559e;color:#00559e;}
#berita_lainnya:hover{background: #00559e;color: #fff;}

#berita_detail{background: #fff;padding:30px 30px 30px 50px;border-radius: 10px;width: 1300px;position:relative;}
#berita_konten{text-align: left;width:800px;} 
#berita_konten img{width: 100%;height: auto;}
#berita_konten p{line-height: 30px;text-align: justify;margin: 30px 0px;}
#berita_terkait {background: #eee;border-radius:15px;padding:15px 20px;margin: 0px 0px 0px 40px;}
#berita_terkait_list {margin-bottom: 20px;padding: 0px 0px 20px 0px;border-bottom: 1px solid #ccc;color: #000;}
#berita_terkait_list img{height:75px;width:75px;margin:0px 20px 0px 0px;object-fit:cover;object-position:center center;border-radius:10px;}
#berita_terkait_list div{font-size: 13px;margin-bottom: 8px;}
#berita_terkait_list p{color:#444;font-size:10px;}
#berita_terkait_list:hover{color:#1875bc;}

#program{
    position: relative;
    width: 450px;
    border-radius: 15px;
    border: 1px solid #ccc;
    padding: 25px 30px;
    background: #fff;
    margin: 20px;
}
#program h3{color:#065ba2;font-size: 30px;margin: 0px 0px 10px 0px}
#program p{width: 250px;}
#program img{width:110px;height: auto;position:absolute;right: 20px;top:20px;}

#tenant{border: 1px solid #ccc;border-radius: 10px;padding: 20px 15px;margin:0px 0px 10px 0px;}
#tenant img{object-fit:cover;object-position:center center;height:135px;width:135px;background:#fff;margin:0px 30px 0px 0px;}
#tenant p{margin: 10px 0px;padding: 0px;color: #828282;line-height: 22px;font-size: 14px;width:650px;}
#tenant span{font-size: 12px;line-height:20px;}

.logo-container {
    width: 70%;
    overflow: hidden;
    background-color: #fff;
    padding: 20px 0;margin: 0px auto;
    position: relative;
    white-space: nowrap;
}

.logo-container:hover .logos {
    animation-play-state: paused;
}

.logos {
    display: inline-flex;
    animation: scroll 12s linear infinite;
    position: flex;
    align-items: center;
    justify-content: center;
}

.logos a {
    margin: 0 20px;
    transition: transform 0.3s ease;
}

.logos img {
    width: 120px;
    height: auto;
    filter: grayscale(100%);
    transition: filter 0.3s ease;
}

.logos a:hover img {
    filter: grayscale(0%);
}

.logos a:hover {
    transform: scale(1.1);
}

@keyframes scroll {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(-100%);
    }
}

#footer{background:#1d4982;padding:20px 0px 50px 0px;color:#fff;}
#footer img{height:30px;width:auto;margin:0px 0px 0px 10px;}#footer img:hover{opacity: 0.70;filter: alpha(opacity=70);}
#footer_top{background:#1d4982;padding:30px 0px;margin-bottom:10px;color:#fff;font-size:12px;}
#footer_top a{color:#444;font-size:14px;line-height:24px;}#footer a:hover{text-decoration:underline;}
#footer_top span{color:#000;font-size:14px;line-height:22px;font-weight:bold;}

@property --p {
    syntax: '<number>';
    inherits: false;
    initial-value: 0;
}

.doughnut-chart {
      width: 250px;
      height: 250px;
      border-radius: 50%;
      margin: 0 auto;
      
      /* Gunakan kalkulasi persen berdasarkan variabel --p */
      background: conic-gradient(
        #3498db 0% calc(var(--p) * 1%), 
        #eef2f3 calc(var(--p) * 1%) 100%
      );
      
      display: flex;
      align-items: center;
      justify-content: center;
      
      /* Jalankan animasi bernama 'loadChart' selama 1.5 detik saat pertama dimuat */
      animation: loadChart 1.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
    }

    /* Definisikan target akhir persentase di keyframes (contoh: 65) */
    @keyframes loadChart {
      from { --p: 0; }
      to { --p: 65; }
    }

    .doughnut-hole {
      width: 145px;
      height: 145px;
      background-color: #ffffff;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .chart-value {
      font-size: 28px;
      font-weight: 700;
      color: #2c3e50;
    }
    
    .pie-chart {
      width: 250px;
      height: 250px;
      border-radius: 50%;
      margin: 0px auto;
      position: relative;
      box-shadow: 0 4px 12px rgba(0,0,0,0.15);
      
      /* Pembagian warna: Hijau (40%), Biru (35%), Oranye (25%) */
      background: conic-gradient(
        #4caf50 0% 60%,   /* 144deg sampai 270deg */
        #ff9800 60% 100%   /* 270deg sampai 360deg */
      );
    }

    /* Styling dasar untuk label teks */
    .pie-label {
      position: absolute;
      top: 50%;
      left: 50%;
      width: 40px;
      height: 40px;
      margin-top: -20px; /* Setengah dari height */
      margin-left: -20px; /* Setengah dari width */
      
      display: flex;
      align-items: center;
      justify-content: center;
      
      font-family: sans-serif;
      font-weight: bold;
      font-size: 16px;
      color: #ffffff;
      text-shadow: 1px 1px 3px rgba(0,0,0,0.5); /* Supaya teks lebih terbaca */
    }
    .label-1 {
      transform: rotate(270deg) translateY(-80px) rotate(-270deg);
    }
    .label-2 {
      transform: rotate(90deg) translateY(-60px) rotate(-90deg);
    }

@media only screen and (min-width: 1000px) {.menu_mobile{display:none;}#mobile{display:none;}#sidebar{display:none;}}

@media only screen and (max-width: 1000px) {
    #desktop{display: none;}
    #top_panel{padding: 0px 0px 30px 0px;}
    .top_wrap{background:none;width:95%;position:relative;padding:0px;} 
    .header_menu{display:none;}
    #logo{left:0px;top:0px;}#logo img{width:auto;height:75px;}
    
    #stats{padding: 50px 0px;}#stats td{width: 150px;}
    #stats-title{font-weight: bold;font-size: 24px;}
    #stats-desc{font-size: 14px;}

    #berita_mobile {width: 90%;box-shadow:0px 3px 5px #ccc;background:#fff;margin-bottom: 20px;padding: 10px;border-radius: 10px;color: #000;}
    #berita_mobile a{color: #000;}
    #berita_mobile img{height:75px;width:75px;margin:0px 20px 0px 0px;object-fit:cover;object-position:center center;border-radius:10px;}
    #berita_mobile div{font-weight: bold;font-size: 13px;margin-bottom: 8px;}
    #berita_mobile p{color: #000;font-size:10px;}
    #program{
        width:90%;
        margin: 20px;
        text-align: left;
        padding: 15px 20px;
    }
    #program h3{color:#065ba2;font-size: 20px;margin: 0px 0px 10px 0px}
    #program p{width:75%;font-size: 12px}
    #program img{width:110px;height: auto;right: 10px;top:15px;height: 80px;width: auto;}
    #footer{padding:20px 0px;}#footer img{margin:0px 10px;}
    

    #wrapper{
        position:relative;height:100%;width:100%;right:0px;
        -webkit-transition: right 0.4s ease-in-out;
    -moz-transition: right 0.4s ease-in-out;
    -ms-transition: right 0.4s ease-in-out;
    -o-transition: right 0.4s ease-in-out;
    transition: right 0.4s ease-in-out;
    }
    #wrapper.open-sidebar {right:200px;} #wrapper.open-sidebar #sidebar{display:block;}
    
    #sidebar-toggle {display:block;position:relative;text-align:right;width:35px;right:20px;padding:30px 0px 0px 0px;float:right;}
    .menu-sidebar .bar{
        display: block;float:right;
        width: 30px;
        margin-bottom:4px;
        height:3px;
        background-color:#000;
    }
    .menu-sidebar .bar:last-child{margin-bottom: 0;}
    .menu-sidebar.active .bar:nth-child(1) {transform: translateY(7px) rotate(45deg);}
    .menu-sidebar.active .bar:nth-child(2) {opacity: 0;}
    .menu-sidebar.active .bar:nth-child(3) {transform: translateY(-7px) rotate(-45deg);}

    #sidebar {background:#444;width:200px;height:100%;right:0px;top:0;position:fixed;display: none;}
    #sidebar img{height:20px;margin:0px 8px -3px 0px;}
    #sidebar ul {margin:0;padding:0;list-style:none;text-align:left;}
    #sidebar ul li {margin:0;border-bottom: 1px solid #000;}
    #sidebar ul li a {
        padding:18px 0px 16px 30px;
        font-size: 16px;font-weight:bold;
        font-weight: 100;
        color:#fff;
        text-decoration: none;
        display: block; 
    }
    #sidebar ul li:hover{background:#bbb;color:#fff;}
    #sidebar ul li.parrent{background:url(images/arrow2.gif) 180px center no-repeat;}
    #sidebar ul li ul li{border:none;}#sidebar ul li  ul li a {font-size:14px;padding:7px 0px 7px 45px;background:url(images/arrow2.gif) 30px center no-repeat;}

    #berita_detail{padding:20px;width:95%;margin: -50px 0px -100px 0px;}
    h1{font-size: 22px;}
    #berita_konten p{line-height:24px;margin: 30px 0px;font-size: 14px;}
    
    #tenant{border: 1px solid #ccc;border-radius: 10px;padding: 20px 15px;margin:0px 0px 10px 0px;background:#fff;width:95%;}
    #tenant img{object-fit:cover;object-position:center center;height:80px;width:80px;background:#fff;margin:0px 20px 0px 0px;}
    #tenant p{margin: 10px 0px;padding: 0px;color: #828282;line-height: 18px;font-size: 11px;width:100%;}
    #tenant span{font-size: 12px;line-height:20px;}

}