:root {
    --primary-color: #26914e;
    --secondary-color: #1e7d3e;
    --text-color: #000;
    --bg-color: #FFF;
    --accent-color: #ffeb3b;
    --skeleton-bg: #f0f0f0;
    --skeleton-highlight: #e0e0e0;
}

html,body,div,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,ol,ul,li,form,fieldset,legend,label,table,header,footer,nav,section{margin:0;padding:0;border:0}
header,footer,nav,section,article,hgroup,figure{display:block}
legend{display:none}
body{margin:0 auto;padding:0;font-size:18px;font-family:"PT Sans",sans-serif;color:var(--text-color);background-color:#92A4B7;line-height:1.6}
h1,h2,h3,h4,h5,h6{text-decoration:none;font-family:'Oswald',sans-serif;font-weight:400;line-height:1.4}
h1{font-size:36px;margin:0 0 10px;padding-bottom:5px;font-weight:700}
h2{font-size:32px;margin:0 0 8px;padding-bottom:5px;font-weight:700}
h3{font-size:28px;margin:0 0 8px;padding-bottom:5px;font-weight:700}
h4{font-size:24px;text-align:left;padding:3px 0;margin:0;font-weight:700}
h5{font-size:20px;margin:0 0 5px;font-weight:700}
h6{font-size:18px;margin:0 0 5px;font-weight:700}
a{text-decoration:none;color:var(--primary-color)}
img{max-width:100%;height:auto;border:0;outline:0}
p{line-height:1.6;font-size:18px;margin:10px 0px}
p img{background:#F1F1FA;padding:0;max-width:100%;height:auto}
p a{text-decoration:underline;color:#0077cc}
p a:hover{color:#005599;text-decoration:underline}
.alert{background-color:#FDC7C7;border:1px solid #f00;padding:15px;font-size:18px}
figure{position:relative;display:inline-block;margin:auto;border:0;padding:4px}
img.center{background:#F1F1FA;display:block;margin:10px auto;max-width:100%;height:auto;object-fit:contain;border-radius:8px}
figcaption{position:absolute;bottom:0;left:0;width:100%;background:rgba(0,0,0,0.6);color:#ffffff;font-style:italic;padding:10px;text-align:center;opacity:0;transition:opacity 0.3s ease-in-out}
figure:hover figcaption{opacity:1}
img.alignright{display:inline;border:1px solid var(--primary-color);margin-top:5px;margin-bottom:5px;margin-left:5px;box-sizing:border-box}
img.alignleft{display:inline;margin-top:5px;margin-bottom:5px;margin-right:5px;border:1px solid var(--primary-color);box-sizing:border-box}
.alignright{float:right;margin-top:4px;margin-bottom:4px}
.alignleft{float:left;margin-top:4px;margin-bottom:4px}
.aligncenter{display:block;margin:auto;padding:5px}
#wrap{box-sizing:border-box;width:100%;margin:0 auto;box-shadow:0 0 5px rgba(0,0,0,0.2)}
.header{width:100%;box-sizing:border-box;background:linear-gradient(to right,var(--primary-color),var(--secondary-color));border-bottom:5px solid var(--secondary-color);font-size:22px;font-weight:500;display:flex;align-items:center;justify-content:space-between;padding:15px 20px;text-transform:capitalize;word-wrap:break-word;font-family:'Oswald',sans-serif;top:0;transition:all 0.3s ease-in-out}
.logo{font-size:28px;font-weight:bold;text-transform:uppercase;word-wrap:break-word;font-family:Impact,Charcoal,sans-serif;color:#fff;padding:5px 15px;transition:transform 0.3s ease-in-out}
.logo:hover{transform:scale(1.1);color:var(--accent-color)}
.navbar{background:#003a13;padding:10px 20px}
.nav-links{list-style:none;display:flex;justify-content:left;margin:0;padding:0}
.nav-links li{margin:0 5px}
.nav-links a{text-decoration:none;color:white;font-size:18px;padding:8px 12px;border-radius:5px;transition:background 0.3s,color 0.3s}
.nav-links a:hover{background:rgba(255,255,255,0.2);color:var(--accent-color)}
.menu-toggle{display:none;flex-direction:column;cursor:pointer}
.bar{width:25px;height:3px;background-color:white;margin:5px 0;transition:0.3s}
.container{width:100%;float:left;color:#333;padding:10px;background-color:var(--bg-color);box-sizing:border-box}
.content{float:left;width:100%;clear:both}
.footer{width:100%;height:auto;background:linear-gradient(to right,var(--primary-color),var(--secondary-color));text-align:center;color:#fff;box-sizing:border-box;clear:both;border-top:5px solid var(--secondary-color);padding:20px;font-size:16px;font-weight:400;transition:all 0.3s ease-in-out}
.footer a{color:var(--accent-color);padding:5px 0;text-decoration:none;font-weight:bold;transition:color 0.3s ease-in-out}
.footer a:hover{color:#fff;text-decoration:underline}
.footer p{color:#fff;line-height:1.6;font-size:16px}
.footer .social-icons{margin-top:15px}
.footer .social-icons a{display:inline-block;margin:0 10px;font-size:22px;color:var(--accent-color);transition:transform 0.3s ease-in-out,color 0.3s ease-in-out}
.footer .social-icons a:hover{transform:scale(1.2);color:#fff}
.vtr-row{clear:both;margin-bottom:20px;padding:0;overflow:hidden;font-weight:bold;background:#f9f9f9;border-radius:8px;padding:10px;box-shadow:0px 4px 8px rgba(0,0,0,0.1);transition:all 0.3s ease-in-out}
.vtr-title{color:var(--primary-color);text-align:left;text-transform:none;overflow:hidden;margin-bottom:10px;padding:12px 0;float:left;width:100%;clear:both;font-weight:bold;border-bottom:3px solid var(--primary-color);border-top:1px solid #e0e0e0;background:linear-gradient(to right,#e6f4e8,#ffffff);border-radius:8px}
.vtr-title a{color:#333;font-weight:bold;text-decoration:none;transition:color 0.3s ease-in-out}
.vtr-title a:hover{color:#ff6600}
.vtr-title h1,.vtr-title h2,.vtr-title h3{margin:0;padding:0;font-size:30px;font-weight:700;line-height:1.4;transition:color 0.3s ease-in-out}
.vtr-row:hover{transform:translateY(-3px);box-shadow:0px 6px 12px rgba(0,0,0,0.15)}
.post{width:100%;text-align:left;clear:both;height:auto;overflow:hidden;box-sizing:border-box}
.post ul, .post ol {list-style-position:outside;margin-bottom:12px;}
.post ul {list-style-type:square;margin:0 0 5px 25px;padding:0 5px;}
.post ol {margin-left:30px;}
.post ol li, .post ul li {padding:3px;line-height:1.6;font-size:18px;}
.post ol li a, .post ul li a {text-decoration:underline;color:#0077cc;}
.post ol li a:hover, .post ul li a:hover {color:#005599;text-decoration:underline;}
.post ul li:empty{display:none}
.post blockquote{color:#000;font-style:italic;background:#fbeac9;border-left:10px solid var(--primary-color);margin:15px 10px;padding:5px 10px;line-height:1.6;font-size:18px}
.post blockquote p{display:inline}
.post ul li ul{margin-left:10px;padding:0;border:0}
.sidebar{width:100%;max-width:320px;float:right;box-sizing:border-box;margin-top:0;padding:10px}
.sidebar .box{background:#fff;padding:10px;margin-bottom:15px;border-radius:8px;box-shadow:0px 4px 10px rgba(0,0,0,0.1);overflow:hidden;transition:all 0.3s ease-in-out}
.sidebar h4{color:#FFF;padding:8px;background-color:var(--primary-color);font-weight:700;border-radius:5px 5px 0 0;text-transform:uppercase;text-align:center;font-size:20px}
.sidebar .box a{color:#333;text-decoration:none;display:block;padding:8px;font-weight:normal;font-size:16px;transition:background 0.3s ease-in-out,color 0.3s ease-in-out;border-radius:5px}
.sidebar .box a:hover{background:#003a13;color:#fff}
.sidebar .box ul{list-style:none;padding:0;margin:0}
.sidebar .box ul li{border-bottom:1px solid #eaeaea;padding:5px 0}
.wp-pagenavi{width:830px;display:flex;justify-content:space-between;align-items:center;margin:0 auto;padding:10px 0;font-family:'PT Sans',sans-serif;font-size:18px}
.wp-pagenavi a,.wp-pagenavi span{display:inline-block;border:1px solid var(--primary-color);color:var(--primary-color);margin:0 5px;text-align:center;padding:10px 10px;text-decoration:none;white-space:nowrap;transition:background 0.3s,color 0.3s}
.wp-pagenavi a:hover{background-color:var(--primary-color);color:#fff}
.wp-pagenavi .current{flex:1;border:1px solid var(--primary-color);padding:10px 10px;text-align:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:550px;color:#fff;background-color:var(--primary-color)}
.wp-pagenavi .current .title-text{display:inline;font-family:'Oswald',sans-serif;font-weight:700}
.wp-pagenavi .current .char-count{display:inline;color:#555;font-size:16px;margin-left:10px}
hr{clear:both;margin:10px 0;margin-bottom:10px;border:0;height:3px;background-image:linear-gradient(to right,rgba(0,0,0,0),var(--primary-color),rgba(0,0,0,0))}
.pages{color:var(--text-color);width:auto;height:auto;margin:0 3px;border:1px solid #e9e9e9;padding:8px;background-color:var(--bg-color)}
.current{color:#FFF;width:auto;height:auto;margin:0 3px;border:1px solid #e9e9e9;padding:8px;background-color:var(--primary-color)}
.keatas{position:fixed;bottom:10px;right:10px;display:none;color:#333;font-size:44px}
.keatas a{color:#333}
.star{display:inline-block;margin:0 .5em;font-size:16px}
.star li{display:inline-block;color:#FC0;font-size:36px}
.review-count{display:inline-block;margin:0 .5em;font-size:24px}
.cata{width:100%;height:50px;float:left;text-align:center;background-color:#EBEBEB;margin-right:10px;margin-bottom:10px;box-sizing:border-box;border:1px solid var(--primary-color);padding-top:0;overflow:hidden}
.book-thumb{width:100%;height:160px;float:left;text-align:center;background-color:#EBEBEB;margin-right:10px;margin-bottom:10px;box-sizing:border-box;border:1px solid var(--primary-color);padding-top:0;overflow:hidden}
.book-thumb h2{font-size:16px;margin:0 3px}
.book-thumb h2 a{display:block}
.book-thumb:hover{transition:all .3s ease-in-out;box-shadow:0 2px 11px rgba(50,50,50,0.63)}
.book{overflow:hidden;height:110px}
.book img{width:100%}
.book-left{float:left;width:100%;height:auto;text-align:center}
.book-right{float:left;width:100%;box-sizing:border-box}
.photo{margin-right:auto;margin-left:auto}
.photo-frame{position:relative;width:100%;border:1px solid #EBEBEB;margin-bottom:5px;min-height:300px;box-sizing:border-box;padding:5px;padding-bottom:15px;text-align:center}
.table{margin-bottom:20px;padding:0;width:100%;font-size:18px;box-sizing:border-box}
.table table{width:100%;border-collapse:collapse;margin:0;padding:0}
.table tr{border-bottom:1px solid var(--primary-color)}
.table tr:nth-child(odd){background-color:#f0f0f0}
.table tr:nth-child(even){background-color:#ffffff}
.table th{vertical-align:middle;text-align:center;padding:8px;font-size:18px;font-weight:500;color:#ffffff;background-color:var(--primary-color)}
.table td{vertical-align:middle;text-align:left;padding:8px;font-weight:400;color:#333333;line-height:1.6;font-size:16px}
.table td a{color:#0077cc;text-decoration:underline;text-align:left;font-weight:400;transition:background-color 0.3s ease-in-out,color 0.3s ease-in-out;border-radius:5px}
.table td a:hover{background-color:#e6f3ea;color:var(--primary-color)}
.table tr:last-child td{border-bottom:none}
.table td:last-child{border-right:none}
.list-blog{width:100%;height:auto;float:left;padding:10px;margin-bottom:20px;box-sizing:border-box;border:1px solid var(--primary-color);border-radius:10px;overflow:hidden}
.list-blog:nth-child(2n){float:right}
.list-blog-title{height:auto;line-height:1.6;overflow:hidden;border-bottom:1px solid var(--primary-color)}
.list-blog-title h2{font-size:24px}
.list-blog-thumb{height:150px;width:150px;vertical-align:middle;display:table-cell;text-align:center;float:left;background-color:var(--bg-color);padding:5px;margin-right:10px}
.list-blog-thumb img{color:#666;border:1px solid var(--primary-color);border-radius:8px}
.breadcrumbs{float:none;font-size:16px;text-align:left;color:#333;clear:both;padding:5px 0}
.breadcrumbs a{text-decoration:none;padding:0 5px 0 0}
.search-box{box-sizing:border-box;position:relative;overflow:hidden;padding:0;width:100%}
.search-form{height:40px;border:1px solid var(--primary-color);border-radius:5px;background-color:#fff;overflow:hidden}
.search-text{font-size:16px;color:#ddd;border-width:0;background:transparent}
.search-box input[type="text"]{width:100%;padding:11px 0 12px 1em;color:#333;outline:none}
.search-button{position:absolute;top:1px;right:1px;height:40px;width:100px;font-size:18px;color:#fff;text-align:center;line-height:1;border-width:3px;border-radius:0 5px 5px 0;cursor:pointer;background-color:var(--primary-color)}
.tags{border:none;color:#fff;padding:3px 5px;font-size:16px;cursor:pointer;margin:8px 0}
.default{background-color:#e7e7e7;color:#000}
.default:hover{background-color:#000;color:#e7e7e7}
.btnbox{text-align:center}
.btna{font-size:16px;background-color:#007dbc;border-color:#007dbc;color:#fff;padding:15px 0;text-align:center;text-transform:uppercase;text-decoration:none;display:inline-block;font-weight:700;margin:4px 0;cursor:pointer;width:100%;border-radius:5px}
.btna:hover{background-color:#065780}
.btnb{background-color:#b88203;border-color:#b88203;color:#fff;padding:15px 0;text-align:center;text-transform:uppercase;text-decoration:none;display:inline-block;font-size:16px;font-weight:700;margin:4px 0;cursor:pointer;width:100%;border-radius:5px}
.btnb:hover{background-color:#805a03}
.alert-box{clear:both;text-align:center;margin:10px;padding:10px;background:#fff191;border:2px solid #c40000;border-radius:3px}
.alert-heading{color:#0067ce}
.share-btn{display:inline-block;color:#fff;border:none;padding:.3em .8em;outline:none;text-align:center;font-size:16px;font-weight:700;margin:0 .2em}
.share-btn:focus,.share-btn:hover{text-decoration:none;opacity:.8}
.share-btn:active{color:#e2e2e2}
.share-btn.twitter{background:#55acee}
.share-btn.facebook{background:#3B5998}
.share-btn.reddit{background:#ff5700}
.share-btn.pinterest{background:#B90600}
.share-btn.linkedin{background:#4875B4}
.share-btn.email{background:#444}
.skeleton, .skeleton-image {
    background: linear-gradient(90deg, var(--skeleton-bg) 25%, var(--skeleton-highlight) 50%, var(--skeleton-bg) 75%);
    background-size: 200% 100%;
    animation: loading 1.5s infinite;
    will-change: background-position;
    opacity: 1;
    transition: opacity 0.3s ease-out;
}

@keyframes loading {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

.skeleton-line {
    height: 20px;
    margin: 12px 0;
    background: var(--skeleton-bg);
}

.skeleton-heading {
    height: 32px;
    width: 80%;
}

.skeleton-paragraph {
    width: 100%;
}

.skeleton-paragraph-short {
    width: 90%;
}

#article-content, #sidebar-content {
    opacity: 0;
    transition: opacity 0.3s ease-in;
}

/* Reduce motion untuk kurangi CPU drain */
@media (prefers-reduced-motion: reduce) {
    .skeleton, .skeleton-image {
        animation: none;
        background: var(--skeleton-bg);
    }
}

@media screen and (min-width:320px){.cata{width:46%;height:50px}.book-thumb{width:46%;height:160px}}
@media screen and (min-width:480px){.book-left{float:left;width:35%;height:auto;text-align:center}.book-right{float:right;width:63%}#kiri{text-align:center}}
@media screen and (min-width:600px){#wrap{margin-top:0}.book-thumb{width:23%;height:160px}.cata{width:23%;height:50px}}
@media screen and (min-width:685px){.logo{width:45%;float:left;padding:5px;text-align:left}.nav{width:45%;padding:0px;float:right}.table{font-size:18px}.table th,.table td{padding:6px;font-size:16px}}
@media screen and (max-width:768px){
    .header{flex-wrap:wrap;padding:10px;font-size:20px}
    .logo{flex:1 0 100%;text-align:center;margin-bottom:10px;font-size:24px}
    .search-box{flex:1 0 100%;margin:10px 0}
    .navbar{position:relative;padding:10px;height:20px}
    .menu-toggle{display:flex;position:absolute;right:20px;top:50%;transform:translateY(-50%)}
    .nav-links{display:none;flex-direction:column;width:100%;background-color:var(--secondary-color);text-align:center}
    .nav-links.active{display:flex}
    .nav-links li{margin:10px 0}
    .nav-links a{font-size:16px}
    .sidebar{width:100%;max-width:100%;float:none;padding:5px}
    .footer{padding:15px;font-size:14px}
    .footer .social-icons a{font-size:20px;margin:0 5px}
    h1{font-size:32px}
    h2{font-size:28px}
    h3{font-size:24px}
    h4{font-size:20px}
    h5{font-size:18px}
    h6{font-size:16px}
    .vtr-title h1,.vtr-title h2,.vtr-title h3{font-size:26px}
    .sidebar h4{font-size:18px}
    .wp-pagenavi{font-size:16px}
    .table{font-size:16px}
    .table th,.table td{font-size:14px}
}
@media screen and (min-width:960px){.logo{height:40px;float:left;box-sizing:border-box;width:400px;margin:0px 5px 5px 5px;display:block}.nav{width:45%;float:right}}
@media screen and (min-width:860px){.container{width:100%;float:left;color:#333;box-sizing:border-box;padding:10px}#wrap{width:1200px;background-color:var(--bg-color)}.content{float:left;width:830px;clear:both;margin:10px}.book-thumb{width:152px;margin-right:10px}.book-thumb:nth-child(4n){margin-right:0px;float:right}.sidebar{width:320px}}