/*
Theme Name: DMK
v 2.1 //2026-08-16 16:35:13
*/

/* Modern CSS Reset -------------------------------------------------------------- */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
body { line-height: 1.5; }
body { font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; font-size: 0.95em; border: 0; color: #1a1a1a; background-color: #e5e5e5; }
ol, ul { list-style: none; }
blockquote, q { quotes: none; }
blockquote::before, blockquote::after, q::before, q::after { content: none; }
table { border-collapse: collapse; border-spacing: 0; }

/* General Styles -------------------------------------------------------------- */
html { font-size: 100.01%; }
a, a:link, a:visited { color: #23681D; text-decoration: none; }
a:hover, a:active { text-decoration: underline; }
input, textarea, select { padding: 0.7em; background: #fff; border: 1px solid #ccc; font-size: 1.0em; color: #222; font-family: inherit; max-width: 100%; }
input[type="submit"] { border: none; color: #fff; background-color: #23681D; font-weight: bold; }
input[type="submit"]:hover { background-color: #1a4d15; cursor: pointer; }
.clearfix::before, .clearfix::after { content: " "; display: table; }
.clearfix::after { clear: both; }

/* Basic Structure -------------------------------------------------------------- */
#wrapper { width: 95% !important; max-width: 1380px !important; margin: 1.5em auto !important; background: #ffffff !important; border-radius: 12px !important; overflow: hidden !important; border: 1px solid #e2e8f0 !important; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05) !important; }
#wrap { display: flex !important; justify-content: space-between !important; align-items: flex-start !important; gap: 24px !important; width: 100% !important; max-width: 100% !important; margin: 20px auto !important; padding: 0 15px !important; background: #ffffff !important; box-sizing: border-box; }
#content { flex: 1 1 auto !important; min-width: 0 !important; padding: 0 !important; background: transparent !important; border: none !important; box-shadow: none !important; }
#content.primary, .primary { flex: 1 !important; min-width: 0 !important; background: transparent !important; border: none !important; padding: 0 !important; box-shadow: none !important; }
#sidebar, .sidebar { flex: 0 0 320px !important; width: 320px !important; padding: 20px !important; background: #ffffff !important; border: 1px solid #e2e8f0 !important; border-radius: 10px !important; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03) !important; margin: 0 !important; }
#content-full { padding: 1.5em 0; }
.welcome-box { margin-bottom: 25px !important; padding: 24px 28px !important; background: linear-gradient(135deg, #f0fdf4 0%, #ffffff 100%) !important; border: 2px solid #bbf7d0 !important; border-left: 10px solid #23681d !important; border-radius: 8px !important; box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.05), 0 4px 6px -4px rgba(0, 0, 0, 0.05) !important; }
.welcome-title { font-size: 2em !important; font-weight: 800 !important; color: #166534 !important; margin-top: 0 !important; margin-bottom: 10px !important; line-height: 1.2 !important; letter-spacing: -0.5px !important; }
.welcome-desc { font-size: 1.1em !important; color: #334155 !important; margin: 0 !important; line-height: 1.6 !important; }

/* Header Styling */
#header-wrap { border-top: none; }
#header { padding: 1.1em 2em 0.9em 2em !important; background: #fff; }
#logo { display: flex; align-items: flex-start; gap: 12px; max-width: 100%; }
.header-avatar { width: 44px; height: 44px; background-color: #23681D; color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: transform 0.2s ease; margin-top: 2px; }
.header-avatar:hover { transform: scale(1.05); }
.header-avatar svg { display: block; }
.logo-text { display: flex; flex-direction: column; }
#logo .site-title { font-size: 2em; font-weight: 700; color: #23681D; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; letter-spacing: -0.5px; margin: 0; line-height: 1.1; }
#logo a, #logo a:hover, #logo .site-title, #logo .site-description { text-decoration: none !important; border-bottom: none !important; }
#logo a:hover .site-title { color: #1a4d15; }
.site-description-box { display: inline-flex; align-items: center; gap: 8px; margin-top: 6px; background: #f8f9fa; padding: 3px 8px 3px 10px; border-radius: 6px; border: 1px solid #e2e8f0; width: fit-content; }
#logo .site-description { margin: 0; line-height: 1.3em; font-size: 0.9em; color: #555; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
.close-desc-btn { background: transparent; border: none; color: #94a3b8; font-size: 16px; font-weight: bold; line-height: 1; cursor: pointer; padding: 0 3px; display: flex; align-items: center; justify-content: center; border-radius: 50%; transition: all 0.2s ease; }
.close-desc-btn:hover { color: #ef4444; background-color: #fee2e2; }
#header-content { display: inline; padding: 0; }
#header-content div { float: right; margin-left: 2.0em; }
#custom-header img { max-width: 1340px; vertical-align: top; width: 100%; height: auto; }

/* SVG Icon Styling -------------------------------------------------------------- */
.nav-svg { display: inline-block; vertical-align: middle; flex-shrink: 0; }
.nav-arrow { display: inline-block; vertical-align: middle; margin-left: auto; flex-shrink: 0; }

/* Top Navigation Menu -------------------------------------------------------------- */
#topnav-icon { display: none; }
#topnav-icon::after, #footernav-icon::after { content: "☰" !important; font-family: sans-serif !important; font-style: normal !important; font-weight: normal !important; font-size: 16px !important; margin-top: 2px !important; float: right !important; line-height: 1 !important; vertical-align: middle !important; }
#topnav { background: #f8f9fa; border-bottom: 1px solid #e9ecef; }
#topnav-menu { float: left; list-style-type: none; position: relative; }
#topnav-menu li { float: left; position: relative; margin-left: 0.5em; }
#topnav-menu a { display: block; padding: 0.7em 1em 0.7em 0.5em; text-decoration: none; font-size: 0.85em; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }
#topnav-menu a:link, #topnav-menu a:visited { color: #444; text-decoration: none; }
#topnav-menu a:hover { color: #23681D; text-decoration: underline; }
#topnav-menu li.current_page_item a, #topnav-menu li.current-menu-item a { text-decoration: underline; font-weight: bold; }

/* Main Navigation Menu (Kompak & Ringkas) */
#mainnav-icon { display: none; }
#mainnav-icon::after, #topnav-icon::after, #footernav-icon::after { content: "☰" !important; font-family: sans-serif !important; font-style: normal !important; font-weight: normal !important; font-size: 20px !important; float: right !important; line-height: 1 !important; vertical-align: middle !important; }
#navi-wrap { border-top: 2px solid #1a4d15; border-bottom: 2px solid #1a4d15; background: #fff; padding-top: 0; padding-bottom: 0; }
#mainnav { background: #23681D; }
#mainnav-menu { float: left; list-style-type: none; position: relative; background: #23681D; }
#mainnav-menu li { float: left; position: relative; }
#mainnav-menu a { display: flex; align-items: center; gap: 6px; padding: 0.55em 1em; text-decoration: none; font-size: 0.88em; font-weight: 500; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; transition: background 0.2s ease, color 0.2s ease; }
#mainnav-menu a:link, #mainnav-menu a:visited { color: #fff; text-decoration: none; }
#mainnav-menu a:hover { background: #1a4d15; }
#mainnav-menu ul { position: absolute; display: none; z-index: 99; background: #1a4d15; border-top: 2px solid #23681D; box-shadow: 0 4px 10px rgba(0,0,0,0.15); }
#mainnav-menu ul li { margin: 0; border: none; width: 100%; }
#mainnav-menu ul a { width: 15rem; padding: 0.6em 1em; font-weight: normal; color: #fff; font-size: 0.85em; }
#mainnav-menu ul a:hover { background: #12360f; }
#mainnav-menu li ul ul { border: none; margin-left: 15rem; top: 0; }
#mainnav-menu li:hover > ul { display: block; }
#mainnav-menu li.current_page_item > a, #mainnav-menu li.current-menu-item > a { background: #1a4d15; font-weight: 600; }

/* Widget Styling -------------------------------------------------------------- */
.widget { margin-bottom: 1em; padding: 1em; background: #fff; word-wrap: break-word; }
#sidebar .widget { float: left; width: 100%; }
#sidebar .widget { background: transparent !important; padding: 0 0 1.5em 0 !important; margin-bottom: 1.5em !important; box-shadow: none !important; border: none !important; }
#sidebar .widget, .sidebar .widget { background: transparent !important; border: none !important; border-radius: 0 !important; padding: 0 !important; margin-bottom: 25px !important; box-shadow: none !important; }
#sidebar .widget:last-child, .sidebar .widget:last-child { margin-bottom: 0 !important; }
.widgettitle { font-size: 0.9em; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-weight: bold; padding: 0.9em; margin: -0.5em -0.5em 1em -0.5em; background: #23681D; color: #fff; box-shadow: inset 0 0 1px #bbb; border: 1px solid #1a4d15; }
.widget .textwidget { line-height: 1.6em; }
.widget .textwidget p { margin-bottom: 1em; }
.widget ul { line-height: 1.6em; list-style: circle inside; color: #333; }
.widget ul .children { padding: 0; margin: 0.5em 0 0.5em 1em; }
.widget a:link, .widget a:visited { text-decoration: none; color: #23681D; }
.widget a:hover, .widget a:active { text-decoration: underline; }
.widget img { max-width: 100%; height: auto; }
.widgettitle a:link, .widgettitle a:visited { color: #fff; }
.widget_nav_menu .menu ul { padding: 0.3em 0 0.3em 1em; }
#sidebar .widget ul li a, .widget_categories ul li a, .widget_archive ul li a { display: inline-block; padding: 6px 0; min-height: 44px; line-height: 32px; }
#sidebar .widget ul { list-style: square outside !important; margin-left: 1.2em !important; padding: 0 !important; color: #23681D; }
#sidebar .widget ul li { margin-bottom: 0 !important; padding: 0.8em 0 !important; line-height: 1.45em !important; border-bottom: 1px dashed #ddd !important; }
#sidebar .widget ul li:last-child { border-bottom: none !important; }
#sidebar .widget ul li a { display: inline !important; padding: 0 !important; min-height: 0 !important; line-height: inherit !important; color: #333 !important; }
#sidebar .widget ul li a:hover { color: #23681D !important; text-decoration: none !important; }
#sidebar .widget h3, .sidebar .widget h2, .sidebar .widget .widget-title { font-size: 15px !important; font-weight: 700 !important; color: #111 !important; border-bottom: 2px solid #23681D !important; padding-bottom: 8px !important; margin-bottom: 15px !important; }
.primary + aside .widget-title, .sidebar .widget h2, .sidebar .widget h3, .widget_recent_entries h2 { color: #ffffff !important; background-color: #23681D !important; padding: 12px 15px !important; margin-bottom: 15px !important; font-size: 1.1em !important; font-weight: 700 !important; border-radius: 4px; }
.sidebar ul { list-style: none !important; padding: 0 !important; margin: 0 !important; }
.sidebar ul li { padding: 8px 0 !important; border-bottom: 1px dashed #e2e8f0 !important; font-size: 0.95em !important; line-height: 1.5 !important; }
.sidebar ul li a { color: #1e293b !important; text-decoration: none !important; }
.sidebar ul li a:hover { color: #23681D !important; }
aside.widget { margin-bottom: 30px !important; }
aside.widget h3.widgettitle { background-color: #23681D !important; padding: 12px 15px !important; margin: 0 0 15px 0 !important; border-radius: 4px !important; }
aside.widget h3.widgettitle span { color: #ffffff !important; font-size: 1.05em !important; font-weight: 700 !important; letter-spacing: 0.5px; }
aside.widget ul { list-style: none !important; padding: 0 !important; margin: 0 !important; }
aside.widget ul li { padding: 9px 0 !important; border-bottom: 1px dashed #cbd5e1 !important; font-size: 0.95em !important; line-height: 1.5 !important; }
aside.widget ul li:last-child { border-bottom: none !important; padding-bottom: 0 !important; }
aside.widget ul li a { color: #1e293b !important; text-decoration: none !important; transition: color 0.2s ease; }
aside.widget ul li a:hover { color: #23681D !important; }

/* Posts and Pages -------------------------------------------------------------- */
.type-post, .type-page, .type-attachment { margin: 0 0 2em 0; padding: 0 0 0.5em 0; border-bottom: 1px dashed #ccc; }
.type-post, .type-page { border-bottom: 1px solid #f1f5f9 !important; padding-bottom: 2em !important; margin-bottom: 2em !important; }
.type-post { margin-bottom: 40px !important; border: 1px solid #e2e8f0 !important; border-radius: 10px !important; padding: 30px !important; background: #ffffff !important; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05) !important; }
article.article-card { background: #ffffff; border: 1px solid #e2e8f0; border-radius: 10px; padding: 30px; margin-bottom: 30px; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03); transition: transform 0.2s ease, box-shadow 0.2s ease; }
article.article-card:hover { box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -2px rgba(0, 0, 0, 0.04); }
article.article-card, #sidebar, .sidebar { background: #ffffff !important; border: 1px solid #e2e8f0 !important; border-radius: 10px !important; padding: 30px !important; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03) !important; margin-top: 0 !important; margin-bottom: 0 !important; }
article.article-card { margin-bottom: 40px !important; }
.page-title, .post-title { font-weight: bold; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace; color: #23681D; line-height: 1.4em; word-wrap: break-word; }
.post-title, .page-title { border-left: 4px solid #23681D !important; padding-left: 0.6em !important; margin-bottom: 0.4em !important; }
.page-title { font-size: 2.3em; padding: 0.1em 0; }
.page-title { font-size: 2.0em; color: #23681D; }
h1.page-title, .type-post .page-title { font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important; text-align: left !important; line-height: 1.4em !important; margin-top: 1.5em !important; margin-bottom: 1.5em !important; }
.entry-content h1, .page-title, .post-title { font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important; font-size: 2.2em !important; font-weight: 700 !important; color: #111111 !important; border-left: 5px solid #23681D !important; padding-left: 0.5em !important; margin-bottom: 0.8em !important; line-height: 1.3em !important; }
h1.post-title, .page-title { background: #f0fdf4 !important; border-left: 5px solid #23681D !important; border-top: 1px solid #dcfce7 !important; border-right: 1px solid #dcfce7 !important; border-bottom: 1px solid #dcfce7 !important; padding: 12px 18px !important; border-radius: 0 8px 8px 0 !important; margin-bottom: 1em !important; font-size: 1.8em !important; }
.post-title { font-size: 2.0em; padding: 0.3em 0; }
.post-title a:link, .post-title a:visited { color: #23681D; text-decoration: none; }
.post-title a:hover, .post-title a:active { color: #111; text-decoration: underline; }
.sticky { border-left: 5px solid #23681D; padding-left: 2.0em; }
.page-links { margin: 0; word-spacing: 1em; }
.postmeta, .postinfo { color: #444; margin: 0; padding: 0; line-height: 1.6em; font-size: 0.9em; }
.postmeta.entry-meta { display: flex !important; align-items: center !important; flex-wrap: wrap !important; gap: 12px !important; margin-top: 10px !important; margin-bottom: 22px !important; font-size: 0.88em !important; color: #64748b !important; }
.postmeta .entry-date { display: inline-flex !important; align-items: center !important; gap: 6px !important; color: #64748b !important; font-weight: 500 !important; }
.postmeta .entry-date::before { content: "" !important; display: inline-block !important; width: 15px !important; height: 15px !important; background-color: #64748b !important; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E") no-repeat center / contain !important; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E") no-repeat center / contain !important; }
.postmeta .author a { display: inline-flex !important; align-items: center !important; gap: 6px !important; background-color: #eef7ee !important; color: #23681D !important; padding: 3px 12px !important; border-radius: 20px !important; font-weight: 600 !important; text-decoration: none !important; transition: all 0.2s ease-in-out !important; }
.postmeta .author a::before { content: "" !important; display: inline-block !important; width: 13px !important; height: 13px !important; background-color: #23681D !important; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'%3E%3C/path%3E%3Ccircle cx='12' cy='7' r='4'%3E%3C/circle%3E%3C/svg%3E") no-repeat center / contain !important; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'%3E%3C/path%3E%3Ccircle cx='12' cy='7' r='4'%3E%3C/circle%3E%3C/svg%3E") no-repeat center / contain !important; transition: background-color 0.2s ease-in-out !important; }
.postmeta .author a:hover { background-color: #23681D !important; color: #ffffff !important; box-shadow: 0 2px 6px rgba(35, 104, 29, 0.25) !important; }
.postmeta .author a:hover::before { background-color: #ffffff !important; }
.postinfo { clear: both; margin: 2em 0 0; }
.postmeta span, .postinfo span { margin-right: 0.5em; }
.postmeta span, .postinfo span { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 4px; margin-right: 0.8em; margin-bottom: 0.6em; }
.postmeta a:link, .postmeta a:visited { color: #23681D; text-decoration: underline; }
.postmeta a:hover, .postmeta a:active { text-decoration: none; }
.postmeta a, .postinfo a, .meta-category a, .meta-tags a, .entry .meta-category a, .entry .meta-tags a { display: inline-block !important; padding: 6px 10px !important; margin: 3px 4px 3px 0 !important; line-height: 1.4 !important; background-color: rgba(35, 104, 29, 0.08); border-radius: 4px; text-decoration: none !important; }
.postmeta a:hover, .postinfo a:hover { background-color: #23681D !important; color: #ffffff !important; }
.postmeta span::before, .postinfo span::before { display: inline-block; -webkit-font-smoothing: antialiased; font: normal 20px/1 'Genericons'; vertical-align: middle; color: #555; }
.postmeta .meta-date::before { content: '\f307'; }
.postmeta .meta-author::before { content: '\f304'; }
.postmeta .meta-category::before { content: '\f301'; }
.postinfo .meta-comments::before { content: '\f300'; }
.postinfo .meta-tags::before { content: '\f302'; }
.more-link { display: inline-block; font-weight: bold; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; margin: 1em 0 0.5em; padding: 0.4em 1em; text-decoration: none; color: #fff; background-color: #23681D; border-radius: 3px; }
.more-link:link, .more-link:visited { color: #fff; }
.more-link:hover, .more-link:active { background-color: #1a4d15; text-decoration: none; }
.read-more-wrap { margin-top: 15px; }
.read-more-btn { display: inline-block; background-color: #23681D; color: #ffffff !important; padding: 8px 16px; border-radius: 6px; font-size: 13px; font-weight: 600; text-decoration: none; transition: background-color 0.2s ease; }
.read-more-btn:hover { background-color: #1b5217; }
.archive-title { font-weight: bold; font-size: 1.1em; color: #222; padding-bottom: 0.5em; margin-bottom: 2.0em; border-bottom: 1px dashed #ccc; }
.archive-title span { color: #23681D; }
.archive-header { margin-bottom: 30px; padding-bottom: 10px; border-bottom: 1px solid #e2e8f0; }
.post-pagination { margin-bottom: 1em; color: #222; }
.post-pagination a { padding: 0.2em 0.6em; margin-right: 0.2em; display: inline-block; text-align: center; text-decoration: none; color: #23681D; border: 1px solid #ccc; }
.post-pagination a:link, .post-pagination a:visited { color: #23681D; }
.post-pagination a:hover { background: #23681D; color: #fff; }
.post-pagination .current { padding: 0.2em 0.6em; margin-right: 0.2em; background: #23681D; color: #fff; }
.custom-pagination-wrap { margin: 40px 0; text-align: center; }
.pagination { display: inline-flex; gap: 6px; background: #ffffff; padding: 8px 12px; border: 1px solid #e2e8f0; border-radius: 8px; box-shadow: 0 1px 3px rgba(0,0,0,0.05); }
.pagination .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 36px; height: 36px; padding: 0 8px; border-radius: 6px; font-size: 14px; font-weight: 600; color: #475569; text-decoration: none; transition: all 0.2s ease; }
.pagination .page-numbers:hover { background-color: #f1f5f9; color: #23681D; }
.pagination .page-numbers.current { background-color: #23681D; color: #ffffff; }
.pagination .page-numbers.dots { background: transparent; color: #94a3b8; cursor: default; }
.breadcrumb-trail { font-size: 13px; color: #64748b; margin-bottom: 12px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.breadcrumb-trail a { color: #23681D; text-decoration: none; font-weight: 500; }
.breadcrumb-trail a:hover { text-decoration: underline; }
.breadcrumb-trail .sep { color: #cbd5e1; font-size: 11px; }
.breadcrumb-trail .current-crumb { color: #475569; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 250px; }

/* Text Elements -------------------------------------------------------------- */
.entry { line-height: 1.6em; margin: 0.4em 0; word-wrap: break-word; color: #1a1a1a; }
.entry p, .comment p { margin: 0.75em 0; }
.entry p, .entry li, .entry span { font-family: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; font-size: 16px; line-height: 1.7; color: #333; }
.entry h1, .comment h1, .entry h2, .comment h2, .entry h3, .comment h3, .entry h4, .comment h4, .entry h5, .comment h5, .entry h6, .comment h6 { color: #111; font-weight: bold; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; line-height: 1.2em; margin: 1.2em 0 0.3em; }
.entry h1, .comment h1, .entry h2, .comment h2, .entry h3, .comment h3, .entry h4, .comment h4, .entry h5, .comment h5, .entry h6, .comment h6 { font-family: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important; font-weight: 700; color: #111; }
.entry h1, .comment h1 { font-size: 3.0em; }
.entry h2, .comment h2 { font-size: 2.25em; }
.entry h2 { position: relative; padding-bottom: 0.3em; margin-top: 1.8em; }
.entry h2::after { content: ''; display: block; width: 45px; height: 3px; background: #23681D; margin-top: 0.4em; border-radius: 2px; }
.entry h3, .comment h3 { font-size: 2.0em; }
.entry h4, .comment h4 { font-size: 1.25em; }
.entry h5, .comment h5 { font-size: 1.125em; margin: 1.3em 0 0; }
.entry h6, .comment h6 { font-size: 1.0em; margin: 1.3em 0 0; }
.entry ul, .comment ul { list-style: square inside; margin: 0 0 1.6em 2em; }
.entry ol, .comment ol { list-style: decimal inside; margin: 0 0 1.6em 2em; }
.entry ol ol, .comment ol ol { list-style: upper-alpha inside; }
.entry ol ol ol, .comment ol ol ol { list-style: lower-roman inside; }
.entry ol ol ol ol, .comment ol ol ol ol { list-style: lower-alpha inside; }
.entry ul ul, .comment ul ul, .entry ol ol, .comment ol ol, .entry ul ol, .comment ul ol, .entry ol ul, .comment ol ul { margin-bottom: 0.2em; }
dl { margin: 1em 0; }
dt { font-weight: bold; }
dd { margin-bottom: 2.0em; }
strong { font-weight: bold; }
cite, em, i { font-style: italic; }
ins { padding: 1px 2px; background: #ffa; text-decoration: none; }
code, pre { padding: 4px 8px; margin: 0 1px; background: #22272e; color: #adbac7; border-radius: 4px; font-size: 0.9em; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace; overflow: auto; line-height: 1.4em; }
code, .entry code, article code, p code { background-color: #0f172a !important; color: #4ade80 !important; border: 1px solid #334155 !important; padding: 2px 6px !important; border-radius: 4px !important; font-family: Consolas, Monaco, monospace !important; font-size: 0.9em !important; text-shadow: none !important; }
.entry p code, .entry li code { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; background: #f1f1f1; padding: 2px 5px; border-radius: 4px; font-size: 0.9em; }
pre { background: #1e1e2e !important; color: #a6adc8 !important; padding: 45px 20px 15px 20px !important; border-radius: 8px !important; position: relative !important; font-family: 'Fira Code', 'Courier New', Monaco, Consolas, monospace !important; font-size: 0.9em !important; line-height: 1.6 !important; overflow-x: auto !important; box-shadow: 0 10px 25px rgba(0, 0, 0, 0.25) !important; border: 1px solid #313244 !important; }
pre { position: relative !important; background: #1e1e2e !important; border-radius: 8px !important; padding: 40px 15px 15px 15px !important; margin: 20px 0 !important; overflow-x: auto !important; overflow-y: auto !important; max-height: 390px !important; }
pre::before { content: "bash — 80x24" !important; position: absolute !important; top: 0 !important; left: 0 !important; width: 100% !important; height: 32px !important; background: #181825 !important; color: #6c7086 !important; font-size: 11px !important; font-weight: bold !important; font-family: sans-serif !important; line-height: 32px !important; text-align: center !important; border-top-left-radius: 7px !important; border-top-right-radius: 7px !important; border-bottom: 1px solid #313244 !important; }
pre::after { content: "" !important; position: absolute !important; top: 11px !important; left: 14px !important; width: 10px !important; height: 10px !important; border-radius: 50% !important; background: #f38ba8 !important; box-shadow: 16px 0 0 #f9e2af, 32px 0 0 #a6e3a1 !important; }
pre code { background: transparent; padding: 0; }
pre code { background: transparent !important; padding: 0 !important; color: #cdd6f4 !important; font-family: inherit !important; }
pre code { white-space: pre !important; word-wrap: normal !important; display: block !important; }
pre code { color: #4ade80 !important; text-shadow: 0 0 2px rgba(74, 222, 128, 0.2) !important; white-space: pre !important; word-wrap: normal !important; display: block !important; line-height: 1.6 !important; }
pre code { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace !important; font-size: 13px !important; line-height: 1.6em !important; display: block !important; white-space: pre !important; word-wrap: normal !important; }
pre::-webkit-scrollbar { height: 8px !important; background-color: #181825 !important; }
pre::-webkit-scrollbar { width: 6px !important; height: 6px !important; }
pre::-webkit-scrollbar-track { background: rgba(0, 0, 0, 0.1) !important; }
pre::-webkit-scrollbar-thumb { background-color: #45475a !important; border-radius: 4px !important; }
pre::-webkit-scrollbar-thumb { background: #4b5563 !important; border-radius: 3px !important; }
pre::-webkit-scrollbar-thumb:hover { background-color: #585b70 !important; }
pre::-webkit-scrollbar-thumb:hover { background: #6b7280 !important; }
pre.has-line-numbers { padding-left: 45px !important; }
.line-numbers-rows { position: absolute !important; top: 40px !important; left: 0 !important; bottom: 15px !important; width: 35px !important; background: #1e1e2e !important; border-right: 1px solid rgba(255, 255, 255, 0.1) !important; text-align: right !important; user-select: none !important; padding-bottom: 15px !important; z-index: 2 !important; }
.line-numbers-rows { position: absolute !important; top: 40px !important; left: 0 !important; width: 35px !important; background: #1e1e2e !important; border-right: 1px solid rgba(255, 255, 255, 0.1) !important; text-align: right !important; user-select: none !important; padding-bottom: 15px !important; z-index: 2 !important; }
.line-numbers-rows span { display: block !important; padding-right: 8px !important; color: #8b949e !important; font-family: inherit !important; font-size: 12px !important; line-height: 1.6em !important; }

.copy-btn { position: absolute !important; top: 4px !important; right: 10px !important; background: rgba(255, 255, 255, 0.1) !important; border: 1px solid rgba(255, 255, 255, 0.2) !important; color: #a6adc8 !important; padding: 3px 12px !important; font-size: 11px !important; border-radius: 4px !important; cursor: pointer !important; z-index: 10 !important; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace !important; transition: all 0.2s ease !important; }
.copy-btn:hover { background: rgba(255, 255, 255, 0.25) !important; color: #ffffff !important; }
.copy-btn.copied { background: #a6e3a1 !important; color: #1e1e2e !important; border-color: #a6e3a1 !important; font-weight: bold !important; }
.edit-btn { position: absolute !important; top: 4px !important; right: 70px !important; background: rgba(255, 255, 255, 0.1) !important; border: 1px solid rgba(255, 255, 255, 0.2) !important; color: #a6adc8 !important; padding: 3px 12px !important; font-size: 11px !important; border-radius: 4px !important; cursor: pointer !important; z-index: 10 !important; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace !important; transition: all 0.2s ease !important; }
.edit-btn:hover { background: rgba(255, 255, 255, 0.25) !important; color: #ffffff !important; }

del, strike, s { text-decoration: line-through; }
small { font-size: 0.7em; }
abbr { border-bottom: 1px dotted #666; cursor: help; }
sup, sub { height: 0; line-height: 1; position: relative; vertical-align: baseline; font-size: 0.8em; }
sup { bottom: 1ex; }
sub { top: .5ex; }
.entry var, .entry kbd, .entry tt, .entry .tt_tag { font-size: 1.1em; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; }
blockquote { background: #f8f9fa; border-left: 6px solid #23681D; margin: 1.2em 0; padding: 0.5em 1.4em; }
blockquote { background: #f8faf8 !important; border-left: 4px solid #23681D !important; border-radius: 0 8px 8px 0; padding: 1.2em 1.5em !important; margin: 1.5em 0 !important; }
blockquote cite { display: block; margin: 0.5em 0 0 0.5em; color: #555; }
.entry table { border-collapse: collapse; border-spacing: 0; border: 1px solid #ddd; margin: 1em 0; text-align: left; width: 100%; }
.entry tr th, .entry thead th { background: #23681D; color: #fff; font-weight: bold; padding: 0.4em 1em; }
.entry tr td { border-top: 1px solid #ddd; padding: 0.4em 1em; }
.entry tr.alternate td { background: #f5f5f5; }

/* Images, Gallery, Videos -------------------------------------------------------------- */
article .wp-post-image { max-width: 100%; margin: 1.2em 2em 1em 0; height: auto; }
.entry img { max-width: 100%; height: auto; }
.wp-caption { max-width: 100%; height: auto; text-align: center; margin: 1em 0; }
.wp-caption p.wp-caption-text { margin: 0; padding: 0; font-size: 0.9em; text-align: center; }
.alignleft { float: left; display: inline; margin: 1em 2em 1em 0; }
.alignright { float: right; display: inline; margin: 1em 0 1em 2em; }
.aligncenter { margin: 1em auto; display: block; }
.gallery { padding-top: 1em; }
.gallery-item { padding: 0.3em 1em 0 0; }
.gallery img { margin: 0; padding: 2px; border: 1px solid #ddd !important; }
.gallery-caption { max-width: 100%; height: auto; text-align: center; margin: 0.5em 0; }
embed, iframe, object, video { max-width: 100%; }
#image-nav { margin-bottom: 2.0em; padding: 0.5em; color: #333; border-bottom: 1px dashed #aaa; }
#image-nav .nav-previous { float: left; }
#image-nav .nav-next { float: right; }
#image-nav .nav-previous a, #image-nav .nav-next a { font-size: 0.9em; text-decoration: none; color: #23681D; }
#image-nav .nav-previous a:hover, #image-nav .nav-next a:hover { text-decoration: underline; }

/* Search Form -------------------------------------------------------------- */
.search-form { display: block; position: relative; width: 100%; margin: 0; padding: 0; overflow: visible; }
.search-form .screen-reader-text { display: none; }
.search-form .search-field { display: inline-block; width: 100%; margin-top: 5px; padding: 12px 45px 12px 14px; background: #fff; border: 1px solid #ccc; border-radius: 8px; font-size: 1.0em; color: #222; appearance: none; outline: none; transition: border-color 0.2s ease; }
.search-form .search-field:focus { border-color: #23681D; }
.search-form .search-submit { position: absolute; top: 50%; right: 0; transform: translateY(-50%); border: none; background: transparent; padding: 0 0.8em; height: 100%; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.search-form .search-submit .genericon-search { display: inline-block; width: 24px; height: 24px; -webkit-font-smoothing: antialiased; font-size: 24px; line-height: 1; font-family: 'Genericons'; text-decoration: inherit; font-weight: normal; font-style: normal; vertical-align: text-bottom; color: #555; content: '\f400'; }
.search-form .search-submit:hover .genericon-search { color: #23681D; }
.search-form .search-box { position: relative; width: 100%; margin: 0; }
.search-form .floating-label { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); background-color: #fff; padding: 0 4px; color: #374151; font-size: 14px; pointer-events: none; transition: all 0.2s ease; }
.search-form .search-field:focus ~ .floating-label, .search-form .search-field:not(:placeholder-shown) ~ .floating-label { top: 0; font-size: 11px; color: #23681D; font-weight: bold; background-color: #fff; }
.widget_search input.search-field, .sidebar .search-field { border: 1px solid #d1d5db; border-radius: 6px; padding: 8px 12px; outline: none; transition: border-color 0.2s ease; }
.widget_search input.search-field:focus, .sidebar .search-field:focus { border-color: #23681D; }

/* Comments -------------------------------------------------------------- */
#comments { margin: 1em 0; }
#comments .comments-title, #respond #reply-title { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-size: 1.4em; color: #222; line-height: 1.4em; word-wrap: break-word; margin-bottom: 1em; padding-bottom: 0.3em; border-bottom: 1px dashed #ccc; }
.commentlist { display: block; margin: 0; }
.commentlist .comment { display: block; margin-bottom: 2em; padding: 1em; border-top: 1px solid #ddd; background: #f5f5f5; list-style: none; line-height: 2.0em; word-wrap: break-word; }
.comment-author img { float: left; margin-right: 1em; margin-top: -0.1em; }
.comment-author .fn { font-size: 1.1em; padding: 0.2em 0; }
.comment-author .fn a:link, .comment-author .fn a:visited { text-decoration: underline; }
.comment-author .fn a:hover, .comment-author .fn a:active { text-decoration: none; }
.bypostauthor .fn, .comment-author-admin .fn { font-style: italic; background: #eee; padding: 0.2em 0.6em; }
.comment-meta { font-size: 0.9em; margin-bottom: 2.0em; }
.comment-meta a:link, .comment-meta a:visited, .comment-meta a:active, .comment-meta a:hover { color: #555; }
#comments .children { margin-top: 1em; margin-left: 1em; }
#comments .children .comment { background: #fff; border: 1px solid #ddd; }
.nocomments { color: #444; padding: 1em; }
.commentlist .pingback { display: block; padding: 0.8em 0; border-top: 1px solid #eee; list-style: none; line-height: 1.3em; }
.comment-pagination { font-size: 0.9em; }
.comment-pagination .alignleft { float: left; }
.comment-pagination .alignright { float: right; }
#respond { margin: 2.5em 0 0; }
#commentform { padding: 0; }
#commentform p { margin: 1em 0; }
#commentform input[type="text"], #commentform textarea { display: inline-block; width: 100%; }
#commentform label { display: block; margin: 0.6em 0 0.2em; }
#commentform #submit { display: block; font-weight: bold; border: none; margin-top: 1em; padding: 0.8em 3em; text-decoration: none; color: #fff; background: #23681D; border-radius: 3px; }
#commentform #submit:hover { background-color: #1a4d15; cursor: pointer; text-decoration: none; }

/* Front Page Template -------------------------------------------------------------- */

#frontpage-slider-wrap { padding: 0; margin-bottom: 2em; }
.frontpage-magazine-no-widgets, .frontpage-slider-empty-posts { line-height: 2.0em; margin-bottom: 2.0em; }
#frontpage-magazine-widgets .widget { margin: 0 0 2em 0; padding: 0; }
#frontpage-magazine-widgets .widget .widgettitle { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 0.9em; padding: 0.9em; margin: 0 0 2.0em 0; background: #23681D; color: #fff; box-shadow: inset 0 0 1px #bbb; border: 1px solid #1a4d15; }
.widget-category-posts { margin-bottom: -2.0em; }
.widget-category-posts .widgettitle .category-archive-link { float: right; }
.widget-category-posts .widgettitle .category-archive-link .genericon-next { display: inline-block; -webkit-font-smoothing: antialiased; line-height: 1; font-size: 21px; font-family: 'Genericons'; text-decoration: inherit; vertical-align: top; content: '\f429'; margin: -4px -4px 0 0; }
.widget-category-posts .widgettitle .category-archive-link .genericon-next:hover { text-decoration: none; }
.widget-category-posts .type-post { margin: 0; padding: 0; border: none; box-shadow: none; }
.widget-category-posts .big-post .post-title { font-size: 1.35em; }
.widget-category-posts .big-post .wp-post-image { margin: 0 0 0.5em 0; }
.widget-category-posts .small-post { float: left; display: block; width: 100%; margin: 0 0 1em 0; padding: 0 0 1em 0; border-bottom: 1px solid #ddd; }
.widget-category-posts .small-post .wp-post-image { float: left; margin: 0 1em 0 0; max-width: 30%; }
.widget-category-posts .small-post .small-post-content { padding: 0.4em 0.8em; }
.widget-category-posts .small-post .post-title { border: none; margin: 0 0 0.3em; padding: 0; font-size: 1.15em; }
.widget-category-posts .small-post .postmeta { display: inline; }
.widget-category-posts .small-post .postmeta .meta-date::before { content: '\f307'; }
.widget-category-posts .small-post .postmeta .meta-comments::before { content: '\f300'; }
.widget-category-posts .widget-category-posts-content .small-posts .small-post:last-child, .widget-category-posts .category-posts-columns .small-post:last-child, .widget-category-posts .category-posts-grid-row:last-child .small-post { border-bottom: none; }
#widget-category-posts-boxed .big-post { float: left; width: 50%; padding-right: 1em; margin-bottom: 1em; }
#widget-category-posts-boxed .small-posts { width: 50%; margin-left: 50%; padding-left: 1em; }
#widget-category-posts-grid .category-posts-grid-row { margin-right: -2em; }
#widget-category-posts-grid .category-posts-grid-row .big-post, #widget-category-posts-grid .category-posts-grid-row .small-post-wrap { float: left; width: 50%; padding-right: 2em; }
#widget-category-posts-columns .category-posts-column-left { float: left; width: 50%; padding-right: 1em; }
#widget-category-posts-columns .category-posts-column-right { margin-left: 50%; width: 50%; padding-left: 1em; }
#widget-category-posts-columns .category-posts-columns .big-post { margin-bottom: 2.0em; }


#footer { padding: 4px 15px !important; margin: 0 auto !important; min-height: auto !important; line-height: 1.2 !important; background: #23681D !important; color: #ffffff !important; text-align: center !important; }
#footer #footer-text { margin: 0 !important; width: 100% !important; text-align: center !important; color: #ffffff !important; font-size: 0.85em; }
.social-media-wrapper { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.social-title { font-weight: bold; font-size: 0.95em; color: #ffffff; }
.social-icons { display: flex; gap: 10px; justify-content: center; align-items: center; flex-wrap: wrap; margin-top: 5px; }
.social-icons a { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; background: #ffffff; border-radius: 50%; text-decoration: none !important; transition: transform 0.2s ease, opacity 0.2s ease; }
.social-icons a:hover { opacity: 0.85; transform: translateY(-2px); }
.social-svg { width: 20px; height: 20px; fill: #23681D; }
#back-to-top { position: absolute; right: 20px; top: 50%; transform: translateY(-50%); background: #ffffff; color: #23681D !important; width: 35px; height: 35px; border-radius: 50%; display: flex; align-items: center; justify-content: center; text-decoration: none !important; font-weight: bold; font-size: 1.2em; }
#back-to-top:hover { opacity: 0.8; }

#footernav-icon { display: none; }
#footernav, #footernav-credit { background: transparent !important; float: none !important; display: flex !important; justify-content: center !important; padding: 10px 0 !important; margin: 0 auto !important; max-width: 1340px; }
#footernav-menu, #footernav-credit-menu { float: none !important; display: flex !important; flex-wrap: wrap !important; justify-content: center !important; padding: 0 !important; margin: 0 !important; list-style: none; }
#footernav-menu li, #footernav-credit-menu li { float: none !important; display: inline-block !important; padding: 0 10px !important; margin: 0 !important; border-right: 1px dashed #23681D; color: #23681D !important; font-size: 0.9em; }
#footernav-menu li:last-child, #footernav-credit-menu li:last-child { border-right: none !important; }
#footernav-menu a, #footernav-menu a:link, #footernav-menu a:visited, #footernav-credit-menu a, #footernav-credit-menu a:link, #footernav-credit-menu a:visited { display: inline-block; text-decoration: none !important; color: #23681D !important; border-bottom: none !important; }
#footernav-menu a:hover, #footernav-credit-menu a:hover { text-decoration: underline !important; color: #23681D !important; }


/* MEDIA QUERIES -------------------------------------------------------------- */
@media only screen and (max-width: 70em) { #wrapper { width: 94%; } #content { width: 67%; } #sidebar { margin-left: 67%; width: 33%; } #logo .site-title, #logo .site-description { float: none; } #logo .site-description { margin: 0.4em 0 0 0; font-size: 1.2em; } .widget-category-posts .type-post .post-title { font-size: 1.2em; } .widget-category-posts .small-post .post-title { font-size: 1.05em; } }
@media only screen and (max-width: 65em) { #wrapper { width: 96%; margin: 1em auto; } #logo .site-description { font-size: 1.1em; } }
@media only screen and (max-width: 60em) { body { overflow-x: hidden; } #wrapper { width: 100%; margin: 0; } #header { padding: 2em; text-align: center; } #content, #sidebar { float: none; width: 100%; margin: 0; padding: 1em; } #sidebar { clear: both; margin-top: 1em; } #logo { float: none; width: 100%; } #header-content { display: block; text-align: center; } #header-content div { float: none; margin: 1em 0 0; } #header-content #header-search .search-form { display: inline-block; max-width: 350px; } #mainnav, #mainnav-menu, #mainnav-menu li, #mainnav-menu a, #mainnav-menu ul, #mainnav-menu ul a, #mainnav-menu ul ul, #mainnav-menu li ul ul { margin: 0; padding: 0; position: static; float: none; display: inline; font-size: 1.0em; border: none; box-shadow: none; background: none; top: 0; left: 0; } #mainnav-menu li:hover ul ul, #mainnav-menu li:hover ul ul ul, #mainnav-menu li:hover ul ul ul ul, #mainnav-menu li:hover ul, #mainnav-menu li li:hover ul, #mainnav-menu li li li:hover ul, #mainnav-menu li li li li:hover ul { display: inline; } #mainnav { margin: 0; float: none; } #mainnav-icon { display: block; padding: 14px 18px; text-transform: uppercase; text-decoration: none; font-size: 1.0em; font-weight: 700; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; color: #fff; background: #23681D; cursor: pointer; transition: all 0.1s ease-out; } #mainnav-icon:hover { background: #1a4d15; } #mainnav-icon::after { float: right; margin: -0.15em 0 0; -webkit-font-smoothing: antialiased; display: inline-block; content: '\f419'; font: normal 24px/1 'Genericons'; vertical-align: text-bottom; } #mainnav-menu { width: 100%; display: none; border-top: 1px solid #fff; background: #1a4d15; overflow: hidden; } #mainnav-menu a { display: block; width: 100%; padding: 1.3em; text-decoration: none; font-size: 1.0em; border-bottom: 1px solid #23681D; background: #1a4d15; clear: left; } #mainnav-menu a:hover { background: #12360f; } #mainnav-menu ul { float: left; background: #12360f; width: 100%; } #mainnav-menu ul a { display: block; width: 100%; padding: 1em 1em 1em 3em; font-size: 0.9em; border-bottom: 1px solid #23681D; } #mainnav-menu ul li ul a { padding-left: 5em; } #mainnav-menu ul li ul li ul a { padding-left: 7em; } #mainnav:hover #mainnav-menu, #mainnav:active #mainnav-menu, #mainnav:focus-within #mainnav-menu { display: block !important; } .widget-category-posts .type-post .post-title { font-size: 1.4em; } .widget-category-posts .small-post .post-title { font-size: 1.1em; } #wrap { display: block !important; } #content { width: 100% !important; border-right: none !important; padding: 1em !important; } #sidebar { width: 100% !important; padding: 1em !important; } }
@media only screen and (max-width: 50em) { #logo .site-title { font-size: 2.3em; } #logo .site-description { font-size: 1.1em; } #topnav, #topnav-menu, #topnav-menu li, #topnav-menu a, #topnav-menu ul { margin: 0; padding: 0; position: static; float: none; display: inline; font-size: 1.0em; border: none; box-shadow: none; background: none; top: 0; left: 0; } #topnav { float: none; } #topnav-icon { display: block; padding: 0.5em; text-decoration: none; font-size: 0.9em; color: #333; background: #eee; cursor: pointer; } #topnav-icon:hover { text-decoration: underline; } #topnav-icon::after { float: right; margin: 0.05em 0 0; display: inline-block; content: '\f419'; font: normal 14px/1 'Genericons'; vertical-align: text-bottom; } #topnav-menu { width: 100%; display: none; border-top: 1px solid #e5e5e5; background: #f5f5f5; } #topnav-menu a { display: block; padding: 0.7em 1em; text-decoration: none; font-size: 0.9em; border-bottom: 1px solid #e5e5e5; clear: left; } #topnav-menu a:hover { text-decoration: underline; } .entry h1, .comment h1 { font-size: 2.2em; } .entry h2, .comment h2 { font-size: 1.8em; } .entry h3, .comment h3 { font-size: 1.4em; } .entry tr th, .entry thead th, .entry tr td { padding: 0.2em 0.4em; } .widget-category-posts .type-post .post-title { font-size: 1.2em; } .widget-category-posts .small-post .post-title { font-size: 1.0em; } #footer #footer-text { margin-top: -1.2em; } 


    
}
@media only screen and (max-width: 40em) { #content { padding: 1em 1em 0; } .type-post, .type-page, .type-attachment { margin: 0 0 1em 0; } .page-title { font-size: 2.1em; } .post-title { font-size: 1.4em; } .widget-category-posts .type-post { margin: 0 0 1em 0; } #widget-category-posts-grid .category-posts-grid-row { margin-right: 0; } #widget-category-posts-grid .category-posts-grid-row .big-post, #widget-category-posts-grid .category-posts-grid-row .small-post-wrap, #widget-category-posts-boxed .big-post, #widget-category-posts-columns .category-posts-column-left { float: none; width: 100%; padding-right: 0; } #widget-category-posts-boxed .small-posts, #widget-category-posts-columns .category-posts-column-right { width: 100%; margin-left: 0; padding-left: 0; } #widget-category-posts-boxed .small-posts { padding-bottom: 0.5em; } #widget-category-posts-columns .category-posts-column-right { margin-top: 2.0em; } }
@media only screen and (max-width: 30em) { #logo .site-title { font-size: 2.1em; } #logo .site-description { font-size: 1.0em; } .alignright, .alignleft { float: none; margin: 1em 0; } #footer #footer-text { margin-top: 1.2em; float: none; } }
@media only screen and (max-width: 20em) { .postmeta span, .postinfo span { display: block; } .widget-category-posts .type-post .post-title { font-size: 1.0em; } .widget-category-posts .small-post .post-title { font-size: 0.9em; } }
@media screen and (max-width: 768px) { #header { padding: 15px !important; margin-bottom: 15px !important; } #mainnav-icon { border-radius: 0px !important; } }


/* Main Navigation Base */
#navi-wrap { border-top: 2px solid #1a4d15; border-bottom: 2px solid #1a4d15; background: #fff; padding: 0; position: relative; }
#mainnav { background: #23681D; display: flex; align-items: center; justify-content: space-between; }
.dark-mode-toggle { background: transparent; border: none; color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0.6em 1em; transition: background 0.2s ease, color 0.2s ease; margin-left: auto; }
.dark-mode-toggle:hover { background: #1a4d15; }

/* Mobile Menu Styling (Layar HP) */
@media only screen and (max-width: 59.99em) {
#mainnav { padding: 0.4em 0.8em; }
#mainnav-icon { display: flex; align-items: center; color: #fff; cursor: pointer; padding: 0; }
#mainnav-icon::after, #topnav-icon::after, #footernav-icon::after { display: none !important; }
#mainnav-menu { width: 80%; max-width: 280px; position: absolute; top: 100%; left: 0; z-index: 999; box-shadow: 4px 8px 16px rgba(0,0,0,0.25); border-radius: 0 0 8px 0; background: #23681D; }
#mainnav-menu li { float: none; width: 100%; border-bottom: 1px solid rgba(255,255,255,0.1); }
#mainnav-menu a { padding: 0.6em 1em; font-size: 0.85em; gap: 6px; }
#mainnav-menu ul { position: static; width: 100%; box-shadow: none; background: #12360f; }
#mainnav-menu ul a { width: 100%; padding: 0.5em 1em 0.5em 2em; font-size: 0.82em; }
#mainnav-menu ul ul a { padding-left: 3em; }
}

/* Desktop Menu Styling (Layar Komputer) */
@media only screen and (min-width: 60em) {
#mainnav-icon { display: none !important; }
#mainnav-menu { display: flex !important; flex-direction: row; list-style-type: none; background: #23681D; margin: 0; padding: 0; }
#mainnav-menu li { float: left; position: relative; }
#mainnav-menu a { display: flex; align-items: center; gap: 6px; padding: 0.55em 1em; text-decoration: none; font-size: 0.88em; font-weight: 500; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; transition: background 0.2s ease, color 0.2s ease; color: #fff; }
#mainnav-menu li.menu-item:hover a { background: #1a4d15; }
#mainnav-menu ul { position: absolute; display: none; z-index: 99; background: #1a4d15; border-top: 2px solid #23681D; box-shadow: 0 4px 10px rgba(0,0,0,0.15); }
#mainnav-menu li:hover > ul { display: block; }
}






/* Background Utama & Teks */
body.dark-mode { color: #e2e8f0 !important; background-color: #0f172a !important; }
body.dark-mode a, body.dark-mode a:link, body.dark-mode a:visited { color: #4ade80; }
body.dark-mode input, body.dark-mode textarea, body.dark-mode select { background: #0f172a; border-color: #334155; color: #e2e8f0; }

/* Kontainer Utama & Card */
body.dark-mode #wrapper, body.dark-mode #wrap, body.dark-mode #sidebar, body.dark-mode .sidebar, body.dark-mode article.article-card, body.dark-mode .type-post { background: #1e293b !important; border-color: #334155 !important; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.4) !important; }

/* Welcome Box */
body.dark-mode .welcome-box { background: linear-gradient(135deg, #064e3b 0%, #1e293b 100%) !important; border-color: #166534 !important; border-left-color: #22c55e !important; }
body.dark-mode .welcome-title { color: #4ade80 !important; }
body.dark-mode .welcome-desc { color: #cbd5e1 !important; }

/* Header & Logo */
body.dark-mode #header { background: #1e293b !important; }
body.dark-mode #logo .site-title { color: #4ade80; }
body.dark-mode .site-description-box { background: #0f172a; border-color: #334155; }
body.dark-mode #logo .site-description { color: #94a3b8; }

/* Navigasi Atas & Utama */
body.dark-mode #topnav { background: #0f172a; border-bottom-color: #334155; }
body.dark-mode #topnav-menu a:link, body.dark-mode #topnav-menu a:visited { color: #cbd5e1; }
body.dark-mode #topnav-menu a:hover { color: #4ade80; }
body.dark-mode #navi-wrap { background: #1e293b; border-color: #166534; }
body.dark-mode #mainnav, body.dark-mode #mainnav-menu { background: #166534; }
body.dark-mode #mainnav-menu a:hover, body.dark-mode #mainnav-menu li.current_page_item > a, body.dark-mode #mainnav-menu li.current-menu-item > a { background: #14532d; }
body.dark-mode #mainnav-menu ul { background: #14532d; border-top-color: #22c55e; }
body.dark-mode #mainnav-menu ul a:hover { background: #052e16; }

/* Sidebar & Widget */
body.dark-mode .widget { background: #1e293b; }
body.dark-mode .widgettitle, body.dark-mode .primary + aside .widget-title, body.dark-mode .sidebar .widget h2, body.dark-mode .sidebar .widget h3, body.dark-mode aside.widget h3.widgettitle { background: #166534 !important; border-color: #14532d !important; color: #ffffff !important; }
body.dark-mode #sidebar .widget h3, body.dark-mode .sidebar .widget h2, body.dark-mode .sidebar .widget .widget-title { color: #f8fafc !important; border-bottom-color: #22c55e !important; }
body.dark-mode #sidebar .widget ul li, body.dark-mode .sidebar ul li, body.dark-mode aside.widget ul li { border-bottom-color: #334155 !important; }
body.dark-mode #sidebar .widget ul li a, body.dark-mode .sidebar ul li a, body.dark-mode aside.widget ul li a { color: #cbd5e1 !important; }
body.dark-mode #sidebar .widget ul li a:hover, body.dark-mode .sidebar ul li a:hover, body.dark-mode aside.widget ul li a:hover { color: #4ade80 !important; }

/* Post, Artikel, & Metadata */
body.dark-mode .type-post, body.dark-mode .type-page { border-bottom-color: #334155 !important; }
body.dark-mode .entry-content h1, body.dark-mode .page-title, body.dark-mode .post-title { color: #f8fafc !important; border-left-color: #22c55e !important; }
body.dark-mode h1.post-title, body.dark-mode .page-title { background: #064e3b !important; border-color: #166534 !important; }
body.dark-mode .postmeta.entry-meta, body.dark-mode .postmeta .entry-date { color: #94a3b8 !important; }
body.dark-mode .postmeta .author a { background-color: #064e3b !important; color: #4ade80 !important; }
body.dark-mode .postmeta .author a:hover { background-color: #22c55e !important; color: #0f172a !important; }
body.dark-mode .postmeta a, body.dark-mode .postinfo a, body.dark-mode .meta-category a, body.dark-mode .meta-tags a { background-color: rgba(74, 222, 128, 0.1) !important; color: #4ade80 !important; }
body.dark-mode .postmeta a:hover, body.dark-mode .postinfo a:hover { background-color: #22c55e !important; color: #0f172a !important; }
body.dark-mode .entry p, body.dark-mode .entry li, body.dark-mode .entry span, body.dark-mode .entry { color: #cbd5e1 !important; }
body.dark-mode .entry h1, body.dark-mode .comment h1, body.dark-mode .entry h2, body.dark-mode .comment h2, body.dark-mode .entry h3, body.dark-mode .comment h3, body.dark-mode .entry h4, body.dark-mode .comment h4, body.dark-mode .entry h5, body.dark-mode .comment h5, body.dark-mode .entry h6, body.dark-mode .comment h6 { color: #f8fafc !important; }
body.dark-mode blockquote { background: #0f172a !important; border-left-color: #22c55e !important; color: #cbd5e1 !important; }

/* Pencarian & Navigasi Halaman */
body.dark-mode .search-form .search-field { background: #0f172a; border-color: #334155; color: #f8fafc; }
body.dark-mode .search-form .floating-label { background-color: #0f172a; color: #94a3b8; }
body.dark-mode .pagination { background: #1e293b; border-color: #334155; }
body.dark-mode .pagination .page-numbers { color: #cbd5e1; }
body.dark-mode .pagination .page-numbers:hover { background-color: #334155; color: #4ade80; }
body.dark-mode .pagination .page-numbers.current { background-color: #22c55e; color: #0f172a; }

/* Komentar & Footer */
body.dark-mode .commentlist .comment { background: #0f172a; border-color: #334155; }
body.dark-mode #footer { background: #0f172a !important; border-top: 1px solid #334155; }
body.dark-mode #back-to-top { background: #334155; color: #4ade80 !important; }
body.dark-mode #footernav-menu li, body.dark-mode #footernav-credit-menu li, body.dark-mode #footernav-menu a, body.dark-mode #footernav-credit-menu a { color: #4ade80 !important; border-right-color: #166534; }

 
  
/* Dark Mode Overrides */
body.dark-mode #back-to-top { background-color: #22c55e; color: #0f172a !important; }
body.dark-mode #back-to-top:hover { background-color: #4ade80; color: #0f172a !important; }



/* Container untuk tombol back-to-top di posisi paling bawah */
.back-to-top-container { display: block !important; width: 100% !important; clear: both !important; text-align: center !important; padding: 20px 0 30px 0 !important; margin: 0 auto !important; position: relative !important; float: none !important; }

/* Reset total sifat melayang bawaan tema dan paksa tombol berada di tengah */
#back-to-top { position: static !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 42px !important; height: 42px !important; margin: 0 auto !important; float: none !important; right: auto !important; left: auto !important; top: auto !important; bottom: auto !important; background-color: #166534 !important; color: #ffffff !important; border-radius: 50% !important; text-decoration: none !important; font-size: 20px !important; font-weight: bold !important; box-shadow: 0 2px 6px rgba(0,0,0,0.15) !important; transition: all 0.3s ease !important; }

/* Efek Hover */
#back-to-top:hover { background-color: #14532d !important; transform: translateY(-3px) !important; }

/* Mode Gelap (Dark Mode) */
body.dark-mode #back-to-top { background-color: #22c55e !important; color: #0f172a !important; }







/* ==========================================================================
   1. HOVER STATES & INTERACTIVE EFFECTS
   ========================================================================== */
a:hover { text-decoration: underline; }
input:hover, textarea:hover, select:hover { border-color: #23681d; }
input[type="submit"]:hover { background-color: #1a4d15 !important; cursor: pointer; }
.header-avatar:hover { transform: scale(1.05); }
#logo a:hover .site-title { color: #fef08a !important; }
.close-desc-btn:hover { color: #ef4444 !important; background-color: #fee2e2 !important; }
#topnav-menu a:hover { color: #23681d !important; text-decoration: underline !important; }
#mainnav-menu ul a:hover { background: #12360f !important; }
#mainnav-icon:hover { background: #1a4d15 !important; }
#topnav-icon:hover { text-decoration: underline !important; }
article.article-card:hover { box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -2px rgba(0, 0, 0, 0.04) !important; }
.post-title a:hover { color: #111111 !important; text-decoration: underline !important; }
.postmeta .author a:hover { background-color: #23681d !important; color: #ffffff !important; box-shadow: 0 2px 6px rgba(35, 104, 29, 0.25) !important; }
.postmeta .author a:hover::before { background-color: #ffffff !important; }
.postmeta a:hover, .postinfo a:hover, .meta-category a:hover, .meta-tags a:hover, .entry .meta-category a:hover, .entry .meta-tags a:hover { background-color: #23681d !important; color: #ffffff !important; }
.more-link:hover { background-color: #1a4d15 !important; text-decoration: none !important; }
.read-more-btn:hover { background-color: #1b5217 !important; }
.post-pagination a:hover { background: #23681d !important; color: #ffffff !important; }
.pagination .page-numbers:hover { background-color: #f1f5f9 !important; color: #23681d !important; }
.breadcrumb-trail a:hover { text-decoration: underline !important; }
pre::-webkit-scrollbar-thumb:hover { background-color: #585b70 !important; }
.copy-btn:hover, .edit-btn:hover { background: rgba(255, 255, 255, 0.25) !important; color: #ffffff !important; }
.search-form .search-submit:hover .genericon-search { color: #23681d !important; }
.widget a:hover { text-decoration: underline !important; }
#sidebar .widget ul li a:hover, .sidebar ul li a:hover, aside.widget ul li a:hover { color: #23681d !important; text-decoration: none !important; }
.widget-category-posts .widgettitle .category-archive-link .genericon-next:hover { text-decoration: none !important; }
.comment-author .fn a:hover { text-decoration: none !important; }
.comment-meta a:hover { color: #23681d !important; }
#commentform #submit:hover { background-color: #1a4d15 !important; cursor: pointer !important; text-decoration: none !important; }
#image-nav .nav-previous a:hover, #image-nav .nav-next a:hover { text-decoration: underline !important; }
.social-icons a:hover { opacity: 0.85 !important; transform: translateY(-2px) !important; }
#footernav-menu a:hover, #footernav-credit-menu a:hover { text-decoration: underline !important; color: #23681d !important; }
#back-to-top:hover { background-color: #14532d !important; transform: translateY(-3px) !important; opacity: 0.9 !important; }

/* ==========================================================================
   2. DARK MODE HOVER OVERRIDES
   ========================================================================== */
body.dark-mode input:hover, body.dark-mode textarea:hover, body.dark-mode select:hover { border-color: #4ade80 !important; }
body.dark-mode #topnav-menu a:hover { color: #4ade80 !important; }
body.dark-mode #mainnav-menu a:hover, body.dark-mode #mainnav-menu li.current_page_item > a, body.dark-mode #mainnav-menu li.current-menu-item > a { background: #14532d !important; }
body.dark-mode #mainnav-menu ul a:hover { background: #052e16 !important; }
body.dark-mode #sidebar .widget ul li a:hover, body.dark-mode .sidebar ul li a:hover, body.dark-mode aside.widget ul li a:hover { color: #4ade80 !important; }
body.dark-mode .postmeta .author a:hover { background-color: #22c55e !important; color: #0f172a !important; }
body.dark-mode .postmeta a:hover, body.dark-mode .postinfo a:hover { background-color: #22c55e !important; color: #0f172a !important; }
body.dark-mode .pagination .page-numbers:hover { background-color: #334155 !important; color: #4ade80 !important; }
body.dark-mode #back-to-top:hover { background-color: #4ade80 !important; color: #0f172a !important; }

/* ==========================================================================
   3. UNIFIED HEADER BAR (SINGLE LINE & COMPACT - TERBARU)
   ========================================================================== */
.site-header-bar { 
  background: #23681D; 
  border-bottom: 2px solid #1a4d15; 
  position: sticky; 
  top: 0; 
  z-index: 1000; 
  width: 100%; 
}
.site-header-bar *, #mainnav-menu * { transition: none; animation: none; }
.header-container { display: flex; align-items: center; justify-content: space-between; gap: 6px; max-width: 1380px; margin: 0 auto; padding: 6px 10px; }
.header-wrap-branding { order: 1; display: flex; align-items: center; flex-shrink: 0; }
.header-wrap-nav { order: 2; display: flex; align-items: center; flex: 1 1 auto; }
.header-wrap-search { order: 3; flex-shrink: 0; }
.header-wrap-actions { order: 4; flex-shrink: 0; display: flex; align-items: center; }

/* Branding */
#logo { display: flex; align-items: center; gap: 8px; }
.header-avatar { width: 32px; height: 32px; background-color: #ffffff; color: #23681D; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
#logo .site-title { font-size: 1.1rem; font-weight: 700; color: #ffffff !important; line-height: 1.2; letter-spacing: -0.3px; white-space: nowrap; margin: 0; }

/* Navigasi */
#mainnav-menu { display: flex; align-items: center; gap: 2px; list-style: none; margin: 0; padding: 0; }
#mainnav-menu li { position: relative; list-style: none; }
#mainnav-menu a { color: #ffffff; display: flex; align-items: center; gap: 4px; padding: 6px 10px; border-radius: 6px; font-size: 0.85em; font-weight: 500; text-decoration: none; white-space: nowrap; }
#mainnav-menu a:hover, #mainnav-menu li.current_page_item > a, #mainnav-menu li.current-menu-item > a { background: #1a4d15 !important; }
#mainnav-menu ul { display: none; position: absolute; top: 100%; left: 0; list-style: none; margin: 0; padding: 6px 0; z-index: 999; background: #1a4d15; border-radius: 0 0 8px 8px; min-width: 250px; max-height: 80vh; overflow-y: auto; box-shadow: 0 8px 20px rgba(0,0,0,0.3); }
#mainnav-menu li:hover > ul { display: block !important; }
#mainnav-menu ul ul { display: block !important; position: static !important; box-shadow: none !important; background: rgba(0, 0, 0, 0.2) !important; margin: 4px 8px 6px 10px !important; padding: 4px 0 4px 6px !important; border-left: 2px solid rgba(255, 255, 255, 0.3) !important; }
#mainnav-menu ul li a { padding: 6px 12px; font-size: 0.83rem; font-weight: 700; }
#mainnav-menu ul ul li a { padding: 4px 8px !important; font-size: 0.79rem; font-weight: 400; }

/* Search Box Expandable */
.header-search-form { position: relative; display: flex; align-items: center; justify-content: flex-end; }
.header-search-input { width: 34px; height: 34px; border-radius: 50% !important; background: rgba(255, 255, 255, 0.15) !important; border: 1px solid rgba(255, 255, 255, 0.3) !important; color: transparent !important; padding: 0 0 0 34px !important; cursor: pointer; transition: width 0.25s ease, border-radius 0.25s ease, background 0.25s ease, color 0.25s ease !important; }
.header-search-input::placeholder { color: transparent; }
.header-search-input:focus, .header-search-form:focus-within .header-search-input { width: 135px; border-radius: 18px !important; padding: 4px 30px 4px 10px !important; background: #ffffff !important; color: #1a1a1a !important; cursor: text; }
.header-search-input:focus::placeholder { color: #888888; }
.header-search-btn { position: absolute; right: 0; width: 34px; height: 34px; background: transparent; border: none; color: #ffffff; cursor: pointer; display: flex; align-items: center; justify-content: center; pointer-events: none; }
.header-search-form:focus-within .header-search-btn { color: #23681D; pointer-events: auto; }

/* Dark Mode Toggle */
.dark-mode-toggle { background: rgba(255, 255, 255, 0.15) !important; border: 1px solid rgba(255, 255, 255, 0.3) !important; color: #ffffff !important; border-radius: 50% !important; width: 34px !important; height: 34px !important; min-width: 34px !important; min-height: 34px !important; display: flex !important; align-items: center !important; justify-content: center !important; padding: 0 !important; cursor: pointer; flex-shrink: 0; }
.dark-mode-toggle:hover { background: #1a4d15 !important; }
.dark-mode-toggle svg, .dark-mode-toggle .theme-icon { width: 18px !important; height: 18px !important; stroke: #ffffff !important; display: block !important; }

/* Site Description */
.site-desc-wrapper { max-width: 1380px; margin: 10px auto 0 auto; padding: 0 15px; }

/* ==========================================================================
   4. RESPONSIVE MOBILE
   ========================================================================== */
#mainnav-icon { display: none; }

@media only screen and (max-width: 59.99em) {
  .header-container { padding: 6px 8px; gap: 4px; }
  .header-wrap-nav { order: 1; flex: 0 0 auto; }
  .header-wrap-branding { order: 2; flex: 1 1 auto; margin-left: 2px; }
  .header-wrap-search { order: 3; }
  .header-wrap-actions { order: 4; }
  #mainnav-icon { display: flex !important; align-items: center; justify-content: center; color: #ffffff; cursor: pointer; width: 34px; height: 34px; border-radius: 6px; background: rgba(255, 255, 255, 0.12); }
  #mainnav-menu { display: none !important; position: absolute; top: 100%; left: 0; width: 100%; background: #1a4d15; flex-direction: column; align-items: stretch; box-shadow: 0 10px 20px rgba(0,0,0,0.3); padding: 8px 0; max-height: 85vh; overflow-y: auto; z-index: 1001; }
  .header-wrap-nav:hover #mainnav-menu, .header-wrap-nav:focus-within #mainnav-menu { display: flex !important; }
  #mainnav-menu ul { position: static !important; box-shadow: none !important; display: block !important; }
  #mainnav-menu a { border-radius: 0; padding: 10px 14px; border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
}

@media only screen and (max-width: 25em) {
  #logo .site-title { font-size: 0.95rem; }
  .header-search-input:focus, .header-search-form:focus-within .header-search-input { width: 110px; }
}

/* ==========================================================================
   5. HEADER DARK MODE OVERRIDES
   ========================================================================== */
body.dark-mode .site-header-bar { background: #166534 !important; border-bottom-color: #14532d !important; }
body.dark-mode .header-avatar { background-color: #0f172a !important; color: #4ade80 !important; }
body.dark-mode #logo .site-title { color: #4ade80 !important; }
body.dark-mode #mainnav-menu ul { background: #14532d !important; }

/* Optimization Rules for Mobile Screens (Max-Width: 768px) */
@media screen and (max-width: 768px) { #wrapper { width: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 0 !important; border-radius: 0 !important; border-left: none !important; border-right: none !important; } }
@media screen and (max-width: 768px) { #wrap { width: 100% !important; max-width: 100% !important; padding: 6px !important; margin: 0 !important; gap: 10px !important; display: block !important; box-sizing: border-box !important; } }
@media screen and (max-width: 768px) { #content, #sidebar, .sidebar { width: 100% !important; max-width: 100% !important; padding: 10px !important; margin: 0 0 12px 0 !important; float: none !important; box-sizing: border-box !important; } }
@media screen and (max-width: 768px) { article.article-card, .type-post, .welcome-box { width: 100% !important; padding: 12px !important; margin-left: 0 !important; margin-right: 0 !important; margin-bottom: 12px !important; border-radius: 6px !important; box-sizing: border-box !important; } }
@media screen and (max-width: 768px) { #header { padding: 10px !important; margin-bottom: 10px !important; } }
@media screen and (max-width: 768px) { .site-desc-wrapper { padding: 0 6px !important; margin-top: 6px !important; } }
@media screen and (max-width: 768px) { .entry ul, .entry ol, .comment ul, .comment ol, #sidebar .widget ul, .sidebar ul, aside.widget ul { margin-left: 0 !important; padding-left: 1.1em !important; list-style-position: inside !important; } }
@media screen and (max-width: 768px) { .entry ul li, .entry ol li, #sidebar .widget ul li, .sidebar ul li, aside.widget ul li { padding-left: 0 !important; margin-left: 0 !important; } }
@media screen and (max-width: 768px) { pre, pre.has-line-numbers { padding: 36px 10px 10px 10px !important; margin: 12px 0 !important; border-radius: 6px !important; background: #1e1e2e !important; border: 1px solid #313244 !important; overflow-x: auto !important; } }
@media screen and (max-width: 768px) { pre code { padding: 0 !important; margin: 0 !important; background: transparent !important; display: block !important; white-space: pre !important; font-size: 12px !important; } }
@media screen and (max-width: 768px) { code, .entry code, article code, p code { padding: 2px 6px !important; margin: 0 !important; background: #0f172a !important; color: #4ade80 !important; border-radius: 4px !important; border: 1px solid #334155 !important; font-size: 0.88em !important; } }

/* Styling Tombol Toggle */
#dark-mode-toggle {
  background: transparent !important;
  border: none !important;
  cursor: pointer;
  padding: 4px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Warna Matahari: Kuning Menyala + Pendaran Cahaya */
#dark-mode-toggle .icon-sun {
  stroke: #facc15 !important;
  filter: drop-shadow(0 0 5px rgba(250, 204, 21, 0.7));
}

/* Warna Rembulan: Silver/Kuning Lembut + Pendaran Cahaya */
#dark-mode-toggle .icon-moon {
  stroke: #fef08a !important;
  fill: rgba(254, 240, 138, 0.2) !important;
  filter: drop-shadow(0 0 4px rgba(254, 240, 138, 0.5));
}

/* Default (Mode Terang): Sembunyikan Matahari, Tampilkan Bulan */
#dark-mode-toggle .icon-sun { display: none !important; }
#dark-mode-toggle .icon-moon { display: block !important; }

/* Saat Mode Gelap Aktif: Tampilkan Matahari, Sembunyikan Bulan */
body.dark-mode #dark-mode-toggle .icon-sun,
html[data-theme="dark"] #dark-mode-toggle .icon-sun,
.dark #dark-mode-toggle .icon-sun {
  display: block !important;
}

body.dark-mode #dark-mode-toggle .icon-moon,
html[data-theme="dark"] #dark-mode-toggle .icon-moon,
.dark #dark-mode-toggle .icon-moon {
  display: none !important;
}