/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
1.0 Normalize & Reset
2.0 General & Typography
3.0 Layout & Grid System
4.0 Header & Navigation
5.0 Content Area
6.0 Sidebar & Widgets
7.0 Footer
8.0 Advertisements
9.0 Media Queries & Responsiveness
--------------------------------------------------------------*/

/*--------------------------------------------------------------
1.0 Normalize & Reset
--------------------------------------------------------------*/
html { font-size: 62.5%; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td, a, abbr, acronym, address, applet, big, cite, code, del, dfn, em, font, iframe, ins, kbd, object, q, s, samp, small, span, strike, strong, sub, sup, table, tbody, td, tfoot, th, thead, tr, tt, var { border: 0; margin: 0; outline: 0; padding: 0; vertical-align: baseline; color: #000; }
body { overflow-y: scroll; }
ol, ul { list-style: none; }
table { border-collapse: separate; border-spacing: 0; }
caption, th, td { text-align: left; font-weight: 400; }
blockquote:before, blockquote:after, q:before, q:after { content: ""; }
blockquote, q { quotes: "" ""; }
a:focus, a:active, a:hover { outline: 0; }
a img { border: 0; }
article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { display: block; }
.clearfix::after { content: ""; display: table; clear: both; }

/*--------------------------------------------------------------
2.0 General & Typography
--------------------------------------------------------------*/
body { background: #22b4d8; font: 15px 'Abel', sans-serif; color: #000000; }
p { margin: 5px 0; }
a, a:link, a:visited { text-decoration: none; font-weight: 100; color: #0053f9; }
a:hover { text-decoration: underline; color: #002aff; }
h1 { font-size: 18px; }
h2, h3 { font-size: 16px; }
h4 { font-size: 14px; }
h5, h6 { font-size: 16px; }

/*--------------------------------------------------------------
3.0 Layout & Grid System
--------------------------------------------------------------*/
#wrap { width: 900px; margin: 0 auto; background: #fff; }
#main { padding: 10px; }
#main::after { content: ""; display: table; clear: both; }
#content { float: left; width: 570px; margin-right: 10px; }
#sidebar { float: right; width: 300px; }

/* Alignment Helpers */
.alignleft { float: left; }
.alignright { float: right; }
.aligncenter, div.aligncenter { display: block; margin: 0 auto; text-align: center; }
img.alignleft { margin: 5px 15px 10px 0; }
img.alignright { margin: 5px 0 10px 10px; }
img.aligncenter { margin: 10px auto; }
.wp-caption, .wp-caption img, p img { max-width: 100%; height: auto; }
.wp-caption { text-align: center; border-bottom: 1px solid #dadada; background-color: #fff; padding-top: 5px; margin-bottom: 10px !important; }
.wp-caption p.wp-caption-text { font-size: 12px; line-height: 18px; padding: 0 4px 5px; margin: 0; }

/*--------------------------------------------------------------
4.0 Header & Navigation
--------------------------------------------------------------*/
.site-header { border-top: 1px solid #dfdfdf; }
#main-menu { position: relative; display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 35px; border-bottom: 2px solid #dfdfdf; font-weight: 700; background-color: #0053f9; padding: 0 15px; box-sizing: border-box; }

.nav-site-title a { color: #ffffff; text-transform: uppercase; font-weight: 700; font-size: 18px; text-decoration: none; }
.nav-site-title a:hover { color: #ccc; text-decoration: none; }

.menu-and-toggle-wrapper { position: relative; }
.main-navigation .main-menu { display: flex; list-style: none; margin: 0; padding: 0; }
.main-navigation .main-menu > li { position: relative; border-right: 1px solid #3375ff; }
.main-navigation .main-menu > li:first-child { border-left: 1px solid #3375ff; }
.main-navigation .main-menu > li:last-child { border-right: none; }
.main-navigation .main-menu > li > a { display: block; color: #fff; padding: 9px 12px; font-weight: 100; text-transform: uppercase; line-height: 17px; }
.main-navigation a:hover { text-decoration: none; color: #ccc; }

.main-navigation ul ul { display: none; position: absolute; top: 100%; right: 0; z-index: 9999; background: #dfdfdf; box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2); width: 160px; border: none; padding: 0; }
.main-navigation ul ul li { width: 100%; border-bottom: 1px solid #bbb; }
.main-navigation ul ul li:last-child { border-bottom: none; }
.main-navigation ul ul a { background: #dfdfdf; color: #000; padding: 8px 10px; display: block; width: auto; text-transform: capitalize; font-weight: normal; }
.main-navigation ul ul a:hover { background-color: #0053f9; color: #fff; }
.main-navigation ul ul ul { left: 100%; top: 0; }
.main-navigation li:hover > ul { display: block; }
.main-navigation .current-menu-item > a, .main-navigation .current-post-parent > a { color: #ccc; }

/* Hamburger Menu (Initial State) */
.menu-toggle { display: none; }

/*--------------------------------------------------------------
5.0 Content Area
--------------------------------------------------------------*/
h1.breadcrumbs, h1.page-title { color: #000000; font-size: 19px; font-weight: 100; line-height: 25px; margin: 10px 0; }

/* Archive & Index Posts */
.post { padding: 10px 0; border-bottom: 1px solid #efefef; }
.post::after { content: ""; display: table; clear: both; }
.post:first-child { border-top: 1px solid #efefef; }
.post .post-thumbnail { float: left; width: 100px; height: 80px; margin-right: 15px; }
.post .post-thumbnail .thumb { display: block; width: 100%; height: 100%; object-fit: cover; }
.post .entry-container { overflow: hidden; }
.post .entry-title { font-size: 18px; line-height: 25px; margin-top: 0; margin-bottom: 10px; }
.post .entry-title a { color: #0053f9; }
.post .entry-title a:hover { text-decoration: underline; color: #002aff; }
.post .entry-summary p { margin: 0; line-height: 20px; }

/* Single Post & Page Content */
.entry { word-wrap: break-word; }
.entry-content p { line-height: 25px; }
.entry-content img { max-width: 100%; height: auto; }
.entry-content blockquote { margin: 20px; padding: 0 30px 0 20px; overflow: hidden; border-left: 10px solid #f7f7f7; }
.entry-content table, .entry-content table td, .entry-content table th { border: 1px solid #e9e9e9; }
.entry-content ol, .entry-content ul { margin: 0 0 15px 3em; }
.entry-content ol { list-style-type: decimal; line-height: 25px; }
.entry-content ul { list-style-type: square; }
h1.stitle { color: #0053f9; font-size: 19px; font-weight: 100; line-height: 25px; margin-bottom: 5px; }

/* Post Meta & Breadcrumbs */
.entry .post-meta { font-size: 15px; color: #474747; margin-bottom: 20px; line-height: 1.5; }
.entry .post-meta .byline, .entry .post-meta .posted-on { margin-right: 0.5em; }
.entry .post-meta .posted-on .updated::before { content: '- '; }
.entry .post-meta a { color: #0053f9; font-weight: normal; }
.breadcrumbs { background: #f7f7f7; max-width: 550px; font-size: 13px; padding: 2px 10px; text-transform: capitalize; font-weight: 100; margin-bottom: 15px; }

/* Author Box */
.author-info { display: flex; align-items: flex-start; gap: 20px; padding: 20px; border: 1px solid #ccc; background-color: #f9f9f9; margin: 20px 0; }
.author-column-left { text-align: center; flex: 0 0 150px; }
.author-avatar img { border-radius: 50%; border: 5px solid #ddd; width: 150px; height: 150px; object-fit: cover; }
.author-name { margin-top: 10px; font-size: 18px; font-weight: bold; color: #333; }
.author-column-right { flex: 1; }
.author-column-right h2 { margin: 0 0 10px; font-size: 24px; color: #333; }
.author-column-right p { margin: 10px 0; font-size: 16px; line-height: 1.8; color: #555; }

/* Sharebar, Related Posts & Dokumen */
.sharebar { margin: 15px 0; width: 100%; }
.SocialCustomMenu { margin: 0; }
.SocialCustomMenu span.sharetext { padding: 5px; font-size: .95em; display: inline; background: #efefef; color: #333 !important; }
.SocialCustomMenu a, .SocialCustomMenu a:visited { padding: 5px; font-size: .95em; display: inline; text-decoration: none; color: #fff !important; }
.social-container .twitter { background-color: #000000; }
.social-container .facebook { background-color: #3b5998; }

.related_posts { width: 100%; margin-top: 15px; }
.related_posts h3 { background: #efefef; font-size: 16px; padding: 4px 10px; font-weight: 100; }
.related_posts ul { margin: 5px 0; }
.related_posts ul li { padding: 1%; width: 98%; display: inline-block; overflow: hidden; margin-bottom: 5px; border: 1px solid #efefef; }
.related_posts h4 { font-size: 17px; line-height: 25px; margin-bottom: 5px; }
.related_posts p { margin: 0; }

.responsive-iframe { position: relative; padding-bottom: 75%; height: 0; overflow: hidden; margin: 15px 0; }
.responsive-iframe iframe, .responsive-iframe embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.dokumen-unduhan { list-style: none; padding: 0; text-align: center; margin: 20px auto; }
.dokumen-unduhan li { margin: 30px 0; }
.dokumen-unduhan a { text-decoration: none; color: #002aff; font-weight: bold; padding: 10px 15px; background-color: #f1f1f1; border: 1px solid #ddd; border-radius: 5px; transition: all 0.3s ease; }
.dokumen-unduhan a:hover { background-color: #002aff; color: #fff; border-color: #0056b3; text-decoration: none; }

/* Pagination */
.navigation.pagination { width: 100%; margin: 20px 0; }
.nav-links { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 3px; }
.nav-links .page-numbers { background: #f9f9f9; border: 1px solid #ddd; color: #000 !important; padding: 6px 12px; font-size: 14px; }
.nav-links .page-numbers:hover { background: #dfdfdf; text-decoration: none; }
.nav-links .page-numbers.current, .nav-links .page-numbers.dots { background: #dfdfdf; border: 1px solid #ccc; font-weight: bold; }

/*--------------------------------------------------------------
6.0 Sidebar & Widgets
--------------------------------------------------------------*/
#sidebar h3.title { height: 26px; line-height: 26px; font-size: 12px; text-transform: uppercase; border-bottom: 2px solid #dfdfdf; background-color: #0053f9; margin-bottom: 5px; }
#sidebar h3.title span { line-height: 26px; padding: 0 10px; color: #fff; font-size: 15px; }
#sidebar .widget { margin-bottom: 15px; }
#sidebar .widget ul { padding: 5px 0 0; }
#sidebar .widget ul li { background: url(images/list.png) 5px 10px no-repeat; padding: 4px 4px 4px 15px; border-bottom: 1px solid #efefef; }
#sidebar table { width: 100%; font-size: 90%; border: 1px solid #efefef; border-bottom: none; border-right: none; }
#sidebar table td { padding: 2px 3px; border-right: 1px solid #efefef; border-bottom: 1px solid #efefef; }

/*--------------------------------------------------------------
7.0 Footer
--------------------------------------------------------------*/
#footer { width: 100%; background: #ffffff; border-top: 1px solid #e2e2e2; }
#footer .inner { padding: 10px 15px; }
#footer .inner::after { content: ""; display: table; clear: both; }
#footer .copyright { float: left; color: #666; width: 440px; }
#footer .copyright a { color: #666; font-weight: bold; }
#footer .menu { float: right; width: 430px; }
#footer .menu ul { list-style: none; padding: 0; }
#footer .menu ul li { float: right; border-left: 1px solid #ccc; padding: 0 10px; }
#footer .menu ul li:last-child { border: none; }
#footer .menu ul li a { line-height: 15px; font-weight: 700; text-transform: capitalize; color: #666; }
#footer .menu ul li a:hover { text-decoration: none; color: #666; }

/*--------------------------------------------------------------
8.0 Advertisements
--------------------------------------------------------------*/
#sticky-ad { position: fixed; bottom: 15px; right: 15px; z-index: 9998; background-color: #ffffff; border: 1px solid #e0e0e0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); padding: 5px; display: none; width: 310px; }
#close-ad { position: absolute; top: -12px; right: -12px; background: #000; color: #fff; border: 2px solid #fff; border-radius: 50%; width: 28px; height: 28px; cursor: pointer; font-size: 14px; line-height: 24px; text-align: center; font-weight: bold; }

.floating-ad-container { position: fixed; bottom: 0; left: 0; width: 100%; z-index: 9999; display: none; justify-content: center; align-items: flex-end; pointer-events: none; }
.floating-ad { position: relative; background: transparent; padding-bottom: 10px; pointer-events: auto; text-align: center; }
.floating-ad .close-button { position: absolute; top: -10px; right: -10px; width: 30px; height: 30px; background-color: rgba(0, 0, 0, 0.8); color: white; border-radius: 50%; text-align: center; line-height: 30px; font-size: 20px; font-weight: bold; cursor: pointer; border: 2px solid white; }

/* Awalnya sembunyikan container, JS akan menampilkannya jika ada iklan. */
.floating-ad-container { display: none; }
body.ads-active .floating-ad-container { display: flex; }


/*--------------------------------------------------------------
9.0 Media Queries & Responsiveness (FINAL DENGAN FIX TOMBOL CLOSE)
--------------------------------------------------------------*/
@media only screen and (max-width: 768px) {
    /* -- Layout & Konten Responsif -- */
    #wrap { width: 100%; }
    #main { padding: 2%; width: 96%; }
    #content, #sidebar { margin: 0 0 20px 0; width: 100%; float: none; }
    .breadcrumbs, .wp-caption { width: 100%; max-width: 100%; }
    .author-info { flex-direction: column; align-items: center; }
    
    /* -- Footer Responsif -- */
    #footer .copyright, #footer .menu { width: 100%; text-align: center; float: none; margin-bottom: 10px; }
    #footer .menu ul li { float: none; display: inline-block; border-left: none; }
    #footer .menu ul li:not(:last-child) { border-right: 1px solid #ccc; padding-right: 10px; margin-right: 10px; }

    /* ========================================================== */
    /* == MENU MOBILE DENGAN SUBMENU ACCORDION == */
    /* ========================================================== */
    .nav-site-title { flex-grow: 1; }
    
    /* Sembunyikan menu desktop */
    .main-navigation .main-menu { display: none; }
    
    /* Tampilkan tombol hamburger */
    .menu-toggle { display: block; background: none; border: none; cursor: pointer; padding: 0; width: 35px; height: 35px; }
    .menu-toggle .hamburger { width: 25px; height: 3px; background-color: #fff; display: block; position: relative; margin: 0 auto; transition: background-color 0.15s ease-in-out; }
    .menu-toggle .hamburger::before, .menu-toggle .hamburger::after { content: ''; width: 25px; height: 3px; background-color: #fff; display: block; position: absolute; transition: transform 0.3s ease; }
    .menu-toggle .hamburger::before { top: -8px; }
    .menu-toggle .hamburger::after { bottom: -8px; }

    /* Saat menu terbuka... */
    body.mobile-menu-open .main-navigation .main-menu { display: flex; flex-direction: column; align-items: flex-start; position: fixed; top: 0; left: 0; width: 100%; height: 100vh; background-color: #1C1C1E; transform: translateY(0); z-index: 1000; padding-top: 70px; overflow-y: auto; list-style: none; }
    .main-navigation .main-menu { transform: translateY(-100%); transition: transform 0.4s cubic-bezier(0.77, 0, 0.175, 1); }
    body.mobile-menu-open { overflow: hidden; }

    /* Styling Item Menu Mobile */
    body.mobile-menu-open .main-navigation .main-menu li { width: 100%; float: none; border: none; }
    body.mobile-menu-open .main-navigation .main-menu a { position: relative; display: block; padding: 16px 25px; width: 100%; color: rgba(255, 255, 255, 0.9); text-decoration: none; text-align: left; border-bottom: 1px solid rgba(255, 255, 255, 0.1); transition: background-color 0.3s; }
    body.mobile-menu-open .main-navigation .main-menu > li > a { font-size: 1.1em; text-transform: uppercase; font-weight: 500; }
    
    /* Sub-Menu Accordion */
    body.mobile-menu-open .main-navigation .main-menu .sub-menu { display: none; list-style: none; padding-left: 0; margin: 0; background-color: rgba(0, 0, 0, 0.2); border-bottom: 1px solid rgba(255, 255, 255, 0.1); }
    body.mobile-menu-open .main-navigation .main-menu .sub-menu a { padding-left: 40px !important; font-size: 1em; text-transform: none; font-weight: 400; color: rgba(255, 255, 255, 0.7) !important; border: none; }
    body.mobile-menu-open .main-navigation .menu-item-has-children > a::after { content: ''; display: block; width: 0; height: 0; border-left: 6px solid transparent; border-right: 6px solid transparent; border-top: 6px solid rgba(255, 255, 255, 0.5); position: absolute; right: 25px; top: 50%; transform: translateY(-50%); transition: transform 0.3s ease; }
    body.mobile-menu-open .main-navigation .submenu-open > a::after { transform: translateY(-50%) rotate(180deg); }
    
    /* Efek Hover Mobile */
    body.mobile-menu-open .main-navigation .main-menu a:hover { background-color: rgba(255, 255, 255, 0.05); color: #fff; }

    /* === PERBAIKAN TOMBOL CLOSE (X) === */
    body.mobile-menu-open .menu-toggle { 
        position: fixed; 
        top: 15px; 
        right: 15px;
        z-index: 1001; /* **PASTIKAN TOMBOL BERADA DI ATAS MENU** */
    }
    body.mobile-menu-open .menu-toggle .hamburger { background: transparent; }
    body.mobile-menu-open .menu-toggle .hamburger::before { transform: translateY(8px) rotate(45deg); }
    body.mobile-menu-open .menu-toggle .hamburger::after { transform: translateY(-8px) rotate(-45deg); }
}