img:is([sizes=auto i],[sizes^="auto," i]){contain-intrinsic-size:3000px 1500px}
/*! This file is auto-generated */
.wp-block-button__link{color:#fff;background-color:#32373c;border-radius:9999px;box-shadow:none;text-decoration:none;padding:calc(.667em + 2px) calc(1.333em + 2px);font-size:1.125em}.wp-block-file__button{background:#32373c;color:#fff;text-decoration:none}
:root{--wp--preset--aspect-ratio--square:1;--wp--preset--aspect-ratio--4-3:4/3;--wp--preset--aspect-ratio--3-4:3/4;--wp--preset--aspect-ratio--3-2:3/2;--wp--preset--aspect-ratio--2-3:2/3;--wp--preset--aspect-ratio--16-9:16/9;--wp--preset--aspect-ratio--9-16:9/16;--wp--preset--color--black:#000;--wp--preset--color--cyan-bluish-gray:#abb8c3;--wp--preset--color--white:#fff;--wp--preset--color--pale-pink:#f78da7;--wp--preset--color--vivid-red:#cf2e2e;--wp--preset--color--luminous-vivid-orange:#ff6900;--wp--preset--color--luminous-vivid-amber:#fcb900;--wp--preset--color--light-green-cyan:#7bdcb5;--wp--preset--color--vivid-green-cyan:#00d084;--wp--preset--color--pale-cyan-blue:#8ed1fc;--wp--preset--color--vivid-cyan-blue:#0693e3;--wp--preset--color--vivid-purple:#9b51e0;--wp--preset--gradient--vivid-cyan-blue-to-vivid-purple:linear-gradient(135deg,#0693e3 0%,#9b51e0 100%);--wp--preset--gradient--light-green-cyan-to-vivid-green-cyan:linear-gradient(135deg,#7adcb4 0%,#00d082 100%);--wp--preset--gradient--luminous-vivid-amber-to-luminous-vivid-orange:linear-gradient(135deg,#fcb900 0%,#ff6900 100%);--wp--preset--gradient--luminous-vivid-orange-to-vivid-red:linear-gradient(135deg,#ff6900 0%,#cf2e2e 100%);--wp--preset--gradient--very-light-gray-to-cyan-bluish-gray:linear-gradient(135deg,#eee 0%,#a9b8c3 100%);--wp--preset--gradient--cool-to-warm-spectrum:linear-gradient(135deg,#4aeadc 0%,#9778d1 20%,#cf2aba 40%,#ee2c82 60%,#fb6962 80%,#fef84c 100%);--wp--preset--gradient--blush-light-purple:linear-gradient(135deg,#ffceec 0%,#9896f0 100%);--wp--preset--gradient--blush-bordeaux:linear-gradient(135deg,#fecda5 0%,#fe2d2d 50%,#6b003e 100%);--wp--preset--gradient--luminous-dusk:linear-gradient(135deg,#ffcb70 0%,#c751c0 50%,#4158d0 100%);--wp--preset--gradient--pale-ocean:linear-gradient(135deg,#fff5cb 0%,#b6e3d4 50%,#33a7b5 100%);--wp--preset--gradient--electric-grass:linear-gradient(135deg,#caf880 0%,#71ce7e 100%);--wp--preset--gradient--midnight:linear-gradient(135deg,#020381 0%,#2874fc 100%);--wp--preset--font-size--small:13px;--wp--preset--font-size--medium:20px;--wp--preset--font-size--large:36px;--wp--preset--font-size--x-large:42px;--wp--preset--spacing--20:.44rem;--wp--preset--spacing--30:.67rem;--wp--preset--spacing--40:1rem;--wp--preset--spacing--50:1.5rem;--wp--preset--spacing--60:2.25rem;--wp--preset--spacing--70:3.38rem;--wp--preset--spacing--80:5.06rem;--wp--preset--shadow--natural:6px 6px 9px rgba(0,0,0,.2);--wp--preset--shadow--deep:12px 12px 50px rgba(0,0,0,.4);--wp--preset--shadow--sharp:6px 6px 0px rgba(0,0,0,.2);--wp--preset--shadow--outlined:6px 6px 0px -3px #fff,6px 6px #000;--wp--preset--shadow--crisp:6px 6px 0px #000}:where(body){margin:0}:where(.is-layout-flex){gap:.5em}:where(.is-layout-grid){gap:.5em}body .is-layout-flex{display:flex}.is-layout-flex{flex-wrap:wrap;align-items:center}.is-layout-flex>:is(*,div){margin:0}body .is-layout-grid{display:grid}.is-layout-grid>:is(*,div){margin:0}body{padding-top:0;padding-right:0;padding-bottom:0;padding-left:0}:root :where(.wp-element-button,.wp-block-button__link){background-color:#32373c;border-width:0;color:#fff;font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;letter-spacing:inherit;line-height:inherit;padding-top:calc(0.667em + 2px);padding-right:calc(1.333em + 2px);padding-bottom:calc(0.667em + 2px);padding-left:calc(1.333em + 2px);text-decoration:none;text-transform:inherit}.has-black-color{color:var(--wp--preset--color--black) !important}.has-cyan-bluish-gray-color{color:var(--wp--preset--color--cyan-bluish-gray) !important}.has-white-color{color:var(--wp--preset--color--white) !important}.has-pale-pink-color{color:var(--wp--preset--color--pale-pink) !important}.has-vivid-red-color{color:var(--wp--preset--color--vivid-red) !important}.has-luminous-vivid-orange-color{color:var(--wp--preset--color--luminous-vivid-orange) !important}.has-luminous-vivid-amber-color{color:var(--wp--preset--color--luminous-vivid-amber) !important}.has-light-green-cyan-color{color:var(--wp--preset--color--light-green-cyan) !important}.has-vivid-green-cyan-color{color:var(--wp--preset--color--vivid-green-cyan) !important}.has-pale-cyan-blue-color{color:var(--wp--preset--color--pale-cyan-blue) !important}.has-vivid-cyan-blue-color{color:var(--wp--preset--color--vivid-cyan-blue) !important}.has-vivid-purple-color{color:var(--wp--preset--color--vivid-purple) !important}.has-black-background-color{background-color:var(--wp--preset--color--black) !important}.has-cyan-bluish-gray-background-color{background-color:var(--wp--preset--color--cyan-bluish-gray) !important}.has-white-background-color{background-color:var(--wp--preset--color--white) !important}.has-pale-pink-background-color{background-color:var(--wp--preset--color--pale-pink) !important}.has-vivid-red-background-color{background-color:var(--wp--preset--color--vivid-red) !important}.has-luminous-vivid-orange-background-color{background-color:var(--wp--preset--color--luminous-vivid-orange) !important}.has-luminous-vivid-amber-background-color{background-color:var(--wp--preset--color--luminous-vivid-amber) !important}.has-light-green-cyan-background-color{background-color:var(--wp--preset--color--light-green-cyan) !important}.has-vivid-green-cyan-background-color{background-color:var(--wp--preset--color--vivid-green-cyan) !important}.has-pale-cyan-blue-background-color{background-color:var(--wp--preset--color--pale-cyan-blue) !important}.has-vivid-cyan-blue-background-color{background-color:var(--wp--preset--color--vivid-cyan-blue) !important}.has-vivid-purple-background-color{background-color:var(--wp--preset--color--vivid-purple) !important}.has-black-border-color{border-color:var(--wp--preset--color--black) !important}.has-cyan-bluish-gray-border-color{border-color:var(--wp--preset--color--cyan-bluish-gray) !important}.has-white-border-color{border-color:var(--wp--preset--color--white) !important}.has-pale-pink-border-color{border-color:var(--wp--preset--color--pale-pink) !important}.has-vivid-red-border-color{border-color:var(--wp--preset--color--vivid-red) !important}.has-luminous-vivid-orange-border-color{border-color:var(--wp--preset--color--luminous-vivid-orange) !important}.has-luminous-vivid-amber-border-color{border-color:var(--wp--preset--color--luminous-vivid-amber) !important}.has-light-green-cyan-border-color{border-color:var(--wp--preset--color--light-green-cyan) !important}.has-vivid-green-cyan-border-color{border-color:var(--wp--preset--color--vivid-green-cyan) !important}.has-pale-cyan-blue-border-color{border-color:var(--wp--preset--color--pale-cyan-blue) !important}.has-vivid-cyan-blue-border-color{border-color:var(--wp--preset--color--vivid-cyan-blue) !important}.has-vivid-purple-border-color{border-color:var(--wp--preset--color--vivid-purple) !important}.has-vivid-cyan-blue-to-vivid-purple-gradient-background{background:var(--wp--preset--gradient--vivid-cyan-blue-to-vivid-purple) !important}.has-light-green-cyan-to-vivid-green-cyan-gradient-background{background:var(--wp--preset--gradient--light-green-cyan-to-vivid-green-cyan) !important}.has-luminous-vivid-amber-to-luminous-vivid-orange-gradient-background{background:var(--wp--preset--gradient--luminous-vivid-amber-to-luminous-vivid-orange) !important}.has-luminous-vivid-orange-to-vivid-red-gradient-background{background:var(--wp--preset--gradient--luminous-vivid-orange-to-vivid-red) !important}.has-very-light-gray-to-cyan-bluish-gray-gradient-background{background:var(--wp--preset--gradient--very-light-gray-to-cyan-bluish-gray) !important}.has-cool-to-warm-spectrum-gradient-background{background:var(--wp--preset--gradient--cool-to-warm-spectrum) !important}.has-blush-light-purple-gradient-background{background:var(--wp--preset--gradient--blush-light-purple) !important}.has-blush-bordeaux-gradient-background{background:var(--wp--preset--gradient--blush-bordeaux) !important}.has-luminous-dusk-gradient-background{background:var(--wp--preset--gradient--luminous-dusk) !important}.has-pale-ocean-gradient-background{background:var(--wp--preset--gradient--pale-ocean) !important}.has-electric-grass-gradient-background{background:var(--wp--preset--gradient--electric-grass) !important}.has-midnight-gradient-background{background:var(--wp--preset--gradient--midnight) !important}.has-small-font-size{font-size:var(--wp--preset--font-size--small) !important}.has-medium-font-size{font-size:var(--wp--preset--font-size--medium) !important}.has-large-font-size{font-size:var(--wp--preset--font-size--large) !important}.has-x-large-font-size{font-size:var(--wp--preset--font-size--x-large) !important}
.bctt-click-to-tweet{display:block;background-color:#fff;position:relative;border:1px solid #ddd;-moz-border-radius:4px;border-radius:4px;padding:15px 15px 15px 30px;margin-bottom:1em;margin-top:1.75em}.bctt-click-to-tweet:after{content:".";display:block;clear:both;visibility:hidden;line-height:0;height:0}.bctt-click-to-tweet .mce-content-body{position:relative;color:#000 !important;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif !important;font-size:1.5em;line-height:140%;font-weight:100;text-decoration:none !important;text-transform:none !important;word-wrap:break-word;border-bottom:none !important;box-shadow:none !important}.bctt-ctt-text a{padding:15px 0;margin:15px 0;position:relative;color:#000 !important;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif !important;font-size:1.5em;line-height:140%;font-weight:100;text-decoration:none !important;text-transform:none !important;word-wrap:break-word;border-bottom:none !important;box-shadow:none !important}.bctt-ctt-text a:hover{text-decoration:none;color:#999 !important}a.bctt-ctt-btn{border-bottom:none !important;margin:0;padding:11px 24px 0 0;position:relative;display:block;text-transform:uppercase;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif !important;font-size:.7em;font-weight:700;color:#999 !important;float:right;text-decoration:none !important;background:transparent url(//dicoffeean.com/wp-content/plugins/better-click-to-tweet/assets/css/../img/birdy.png) no-repeat right top 10px;box-shadow:none !important}.bctt-ctt-btn:hover{text-decoration:none;color:#666 !important;background:transparent url(//dicoffeean.com/wp-content/plugins/better-click-to-tweet/assets/css/../img/birdy.png) no-repeat right top 8px}
.math-captcha-form{display:block;float:none;clear:both}.math-captcha-form .mathalert{color:#c62828}.login form .math-captcha-form span{display:inline-block;margin-bottom:10px}input[type=text].mc-input{display:inline-block;width:60px!important;vertical-align:middle;margin-bottom:0}.frm_forms .math-captcha-form{display:block;float:none;clear:both;margin-bottom:15px}.frm_forms .math-captcha-form label{padding-right:10px}.frm_forms .math-captcha-form .mathalert{color:#c62828}.frm_forms .math-captcha-form span{display:inline-block;margin-bottom:10px}.frm_forms input[type=text].mc-input{display:inline-block;width:60px !important;vertical-align:middle;margin-bottom:0}.frm_forms .frm_error{color:#c62828;font-weight:700;margin-bottom:10px}.frm_forms .frm_message.math-captcha{background-color:#ffebee;border:1px solid #ffcdd2;padding:8px 12px;border-radius:4px;color:#c62828}
/**
 * All of the CSS for your public-facing functionality should be
 * included in this file.
 */
@font-face{font-family:'Inter';font-style:normal;font-weight:300 700;font-display:swap;src:url(//dicoffeean.com/wp-content/themes/dicoffeean/fonts/inter-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:'Inter';font-style:normal;font-weight:300 700;font-display:swap;src:url(//dicoffeean.com/wp-content/themes/dicoffeean/fonts/inter-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:'Open Sans';font-style:normal;font-weight:300;font-display:swap;src:url(//dicoffeean.com/wp-content/themes/dicoffeean/fonts/open-sans-latin-ext-300-normal.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:'Open Sans';font-style:normal;font-weight:400;font-display:swap;src:url(//dicoffeean.com/wp-content/themes/dicoffeean/fonts/open-sans-latin-ext-400-normal.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:'Open Sans';font-style:normal;font-weight:600;font-display:swap;src:url(//dicoffeean.com/wp-content/themes/dicoffeean/fonts/open-sans-latin-ext-600-normal.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:'Open Sans';font-style:normal;font-weight:700;font-display:swap;src:url(//dicoffeean.com/wp-content/themes/dicoffeean/fonts/open-sans-latin-ext-700-normal.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:'Open Sans';font-style:normal;font-weight:300;font-display:swap;src:url(//dicoffeean.com/wp-content/themes/dicoffeean/fonts/open-sans-latin-300-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:'Open Sans';font-style:normal;font-weight:400;font-display:swap;src:url(//dicoffeean.com/wp-content/themes/dicoffeean/fonts/open-sans-latin-400-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:'Open Sans';font-style:normal;font-weight:600;font-display:swap;src:url(//dicoffeean.com/wp-content/themes/dicoffeean/fonts/open-sans-latin-600-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:'Open Sans';font-style:normal;font-weight:700;font-display:swap;src:url(//dicoffeean.com/wp-content/themes/dicoffeean/fonts/open-sans-latin-700-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:'Muli Regular';font-style:normal;font-weight:400;font-display:swap;src:local('Muli Regular'),url(//dicoffeean.com/wp-content/themes/dicoffeean/fonts/Muli-Regular.woff) format('woff')}@font-face{font-family:'Muli Italic';font-style:normal;font-weight:400;font-display:swap;src:local('Muli Italic'),url(//dicoffeean.com/wp-content/themes/dicoffeean/fonts/Muli-Italic.woff) format('woff')}@font-face{font-family:'Muli ExtraLight';font-style:normal;font-weight:400;font-display:swap;src:local('Muli ExtraLight'),url(//dicoffeean.com/wp-content/themes/dicoffeean/fonts/Muli-ExtraLight.woff) format('woff')}@font-face{font-family:'Muli ExtraLight Italic';font-style:normal;font-weight:400;font-display:swap;src:local('Muli ExtraLight Italic'),url(//dicoffeean.com/wp-content/themes/dicoffeean/fonts/Muli-ExtraLightItalic.woff) format('woff')}@font-face{font-family:'Muli Light';font-style:normal;font-weight:400;font-display:swap;src:local('Muli Light'),url(//dicoffeean.com/wp-content/themes/dicoffeean/fonts/Muli-Light.woff) format('woff')}@font-face{font-family:'Muli Light Italic';font-style:normal;font-weight:400;font-display:swap;src:local('Muli Light Italic'),url(//dicoffeean.com/wp-content/themes/dicoffeean/fonts/Muli-LightItalic.woff) format('woff')}@font-face{font-family:'Muli SemiBold';font-style:normal;font-weight:400;font-display:swap;src:local('Muli SemiBold'),url(//dicoffeean.com/wp-content/themes/dicoffeean/fonts/Muli-SemiBold.woff) format('woff')}@font-face{font-family:'Muli SemiBold Italic';font-style:normal;font-weight:400;font-display:swap;src:local('Muli SemiBold Italic'),url(//dicoffeean.com/wp-content/themes/dicoffeean/fonts/Muli-SemiBoldItalic.woff) format('woff')}@font-face{font-family:'Muli Bold';font-style:normal;font-weight:400;font-display:swap;src:local('Muli Bold'),url(//dicoffeean.com/wp-content/themes/dicoffeean/fonts/Muli-Bold.woff) format('woff')}@font-face{font-family:'Muli Bold Italic';font-style:normal;font-weight:400;font-display:swap;src:local('Muli Bold Italic'),url(//dicoffeean.com/wp-content/themes/dicoffeean/fonts/Muli-BoldItalic.woff) format('woff')}@font-face{font-family:'Muli ExtraBold';font-style:normal;font-weight:400;font-display:swap;src:local('Muli ExtraBold'),url(//dicoffeean.com/wp-content/themes/dicoffeean/fonts/Muli-ExtraBold.woff) format('woff')}@font-face{font-family:'Muli ExtraBold Italic';font-style:normal;font-weight:400;font-display:swap;src:local('Muli ExtraBold Italic'),url(//dicoffeean.com/wp-content/themes/dicoffeean/fonts/Muli-ExtraBoldItalic.woff) format('woff')}@font-face{font-family:'Muli Black';font-style:normal;font-weight:400;font-display:swap;src:local('Muli Black'),url(//dicoffeean.com/wp-content/themes/dicoffeean/fonts/Muli-Black.woff) format('woff')}@font-face{font-family:'Muli Black Italic';font-style:normal;font-weight:400;font-display:swap;src:local('Muli Black Italic'),url(//dicoffeean.com/wp-content/themes/dicoffeean/fonts/Muli-BlackItalic.woff) format('woff')}
/*
Theme Name: Dicoffeean
Theme URI: https://dicoffeean.com
Description: Custom theme untuk Dicoffeean - Clean, modern, and fast
Author: Dicoffeean Team
Author URI: https://dicoffeean.com
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: dicoffeean
*/

/* ===========================
   GLOBAL STYLES
   =========================== */

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

/* overflow-x: clip — cegah horizontal scroll tanpa bikin scroll container baru
   (tidak seperti hidden, clip tidak block position:sticky) */
html {
    overflow-x: clip;
}

body {
    font-family: 'Inter', 'Open Sans', -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif;
    font-size: 16px;
    line-height: 1.6;
    color: #1e1b4b !important;
    background-color: #fdfcff;
    overflow-x: clip;
}

a {
    color: #4f46e5;
    text-decoration: none;
    transition: color 0.3s ease;
}

strong, b {
    font-weight: 600;
}

a:hover {
    color: #4338ca;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* ===========================
   HEADER
   =========================== */

.site-header {
    background: #ffffff;
    padding: 12px 0;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    margin-bottom: 40px;
    position: relative;
    z-index: 200;
}

/* Search page: header nempel atas */
.search .site-header,
.search-results .site-header,
.search-no-results .site-header,
.search-results-page .site-header {
    margin-bottom: 0;
}

/* Search page: sembunyiin search toggle & form di header — udah ada di konten */
.search .search-toggle,
.search .search-form-container,
.search-results .search-toggle,
.search-results .search-form-container,
.search-no-results .search-toggle,
.search-no-results .search-form-container {
    display: none;
}

/* Single post: header langsung ke hero */
.single .site-header,
.single-post .site-header {
    margin-bottom: 0;
}

.search-main {
    padding: 0;
}

.search-main > .container {
    padding-top: 0;
}

.home .site-header .header-flex {
    align-items: flex-start;
}

.header-flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.header-right {
    display: flex;
    align-items: center;
    gap: 20px;
}

.site-title {
    font-size: 1.4em;
    font-weight: 700;
    margin: 0;
}

.site-title a {
    color: #333;
    text-decoration: none;
    display: inline-flex;
    align-items: flex-end;
    gap: 8px;
}

.site-logo-mug {
    display: block;
    width: auto;
    height: 34px;
    object-fit: contain;
    flex-shrink: 0;
}

.site-logo-text {
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1;
    background: linear-gradient(135deg, #1e293b 0%, #475569 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

@media (max-width: 480px) {
    .site-logo-mug {
        height: 28px;
    }

    .site-logo-text {
        font-size: 1.1rem;
    }
}

.site-description {
    color: #666;
    font-size: 0.9em;
    margin-top: 5px;
}

/* Navigation Menu */
.main-navigation .nav-menu {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 30px;
}

.main-navigation .nav-menu li {
    margin: 0;
    padding: 0;
}

.main-navigation .nav-menu a {
    color: #333;
    font-weight: 500;
    font-size: 0.95rem;
    transition: color 0.3s ease;
}

.main-navigation .nav-menu a:hover {
    color: #6366f1;
}

/* Search Toggle Button */
.search-toggle {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #333;
    transition: color 0.3s ease;
    border-radius: 50%;
    line-height: 1;
    flex-shrink: 0;
}

.search-toggle:hover {
    color: #6366f1;
    background: rgba(99, 102, 241, 0.1);
}

.search-toggle svg {
    display: block;
    flex-shrink: 0;
}

/* Search Form Container */
.search-form-container {
    position: absolute;
    top: 100%;
    right: 20px;
    margin-top: 10px;
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    padding: 12px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s;
    z-index: 1000;
    min-width: 320px;
}

.search-form-container.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.search-form {
    display: flex;
    gap: 8px;
    align-items: center;
}

.search-field {
    flex: 1;
    padding: 10px 16px;
    border: 2px solid #e5e7eb;
    border-radius: 8px;
    font-size: 0.95rem;
    outline: none;
    transition: border-color 0.3s ease;
}

.search-field:focus {
    border-color: #6366f1;
}

.search-submit {
    background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
    border: none;
    color: #ffffff;
    padding: 10px 14px;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.search-submit:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
}

.search-submit svg {
    display: block;
}

/* Hamburger Menu */
.hamburger-menu {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 10px;
    z-index: 1001;
    position: relative;
    width: 44px;
    height: 44px;
    border-radius: 8px;
    transition: background 0.3s ease;
}

.hamburger-menu:hover {
    background: #f8fafc;
}

.hamburger-menu span {
    display: block;
    width: 24px;
    height: 2.5px;
    background: #333;
    border-radius: 3px;
    transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    position: relative;
}

.hamburger-menu span:nth-child(1) {
    width: 24px;
}

.hamburger-menu span:nth-child(2) {
    width: 20px;
}

.hamburger-menu span:nth-child(3) {
    width: 24px;
}

.hamburger-menu.active {
    background: #f8fafc;
}

.hamburger-menu.active span {
    background: #475569;
}

.hamburger-menu.active span:nth-child(1) {
    transform: translateY(8.5px) rotate(45deg);
    width: 24px;
}

.hamburger-menu.active span:nth-child(2) {
    opacity: 0;
    transform: translateX(-10px);
}

.hamburger-menu.active span:nth-child(3) {
    transform: translateY(-8.5px) rotate(-45deg);
    width: 24px;
}

/* ===========================
   BLOG GRID
   =========================== */

.blog-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px 30px;
    margin-bottom: 60px;
}

/* ===========================
   CARD STYLING
   =========================== */

.post-card {
    background: #ffffff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.post-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.12);
}

/* Image */
.post-card-image {
    width: 100%;
    line-height: 0;
    overflow: hidden;
}

.post-card-image img {
    width: 100%;
    height: auto;
    transition: transform 0.3s ease;
}

.post-card:hover .post-card-image img {
    transform: scale(1.05);
}

/* Content */
.post-card-content {
    padding: 25px;
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* Meta */
.post-meta {
    font-size: 0.85em;
    color: #666;
    margin-bottom: 10px;
}

.post-meta a {
    color: #666;
}

.post-meta a:hover {
    color: #6366f1;
}

.post-meta span:not(:last-child)::after {
    content: " • ";
    margin: 0 5px;
}

/* Title */
.post-card-title {
    font-size: 1.3em;
    line-height: 1.4em;
    margin: 0 0 15px 0;

    /* Truncate to 3 lines */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    min-height: 4.2em;
}

.post-card-title a {
    color: #333;
}

.post-card-title a:hover {
    color: #6366f1;
}

/* Excerpt */
.post-card-excerpt {
    color: #666;
    font-size: 0.95em;
    line-height: 1.6em;
    flex: 1;

    /* Truncate to 4 lines */
    display: -webkit-box;
    -webkit-line-clamp: 4;
    line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    min-height: 6.4em;
}

/* ===========================
   PAGINATION
   =========================== */

.pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 4px;
    margin: 40px 0;
}

/* Nomor halaman — bulat sempurna */
.pagination a,
.pagination span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    padding: 0;
    border-radius: 50%;
    color: #374151;
    font-size: 0.9rem;
    line-height: 1;
    box-sizing: border-box;
    flex-shrink: 0;
}

/* Prev & Next — pill, bukan circle */
.pagination a.prev,
.pagination a.next {
    width: auto;
    padding: 0 16px;
    border-radius: 8px;
    white-space: nowrap;
    font-size: 0.85rem;
    color: #4338ca;
    background: rgba(99, 102, 241, 0.08);
}

.pagination a.prev:hover,
.pagination a.next:hover {
    background: rgba(99, 102, 241, 0.10);
    color: #4338ca;
}

/* Dots (…) */
.pagination .dots {
    width: auto;
    padding: 0 4px;
    color: #9ca3af;
    border-radius: 0;
    background: none !important;
}

.pagination a:hover {
    color: #4f46e5;
    background: rgba(99, 102, 241, 0.08);
}

.pagination .current {
    background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
    color: #ffffff;
}

/* Mobile — prev/next sedikit lebih lebar */
@media (max-width: 560px) {
    .pagination a.prev,
    .pagination a.next {
        padding: 0 18px;
        height: 38px;
        font-size: 0.88rem;
    }
}

/* ===========================
   404 PAGE
   =========================== */

.error404-wrap {
    max-width: 560px;
    margin: 0 auto;
    padding: 80px 24px 100px;
    text-align: center;
}

.error404-icon {
    margin-bottom: 20px;
    display: flex;
    justify-content: center;
}

.error404-title {
    font-size: 1.6rem;
    font-weight: 700;
    color: #1e293b;
    margin: 0 0 12px;
}

.error404-desc {
    font-size: 1rem;
    color: #64748b;
    margin: 0 0 36px;
    line-height: 1.7;
}

.error404-search {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #f1f5f9;
    border-radius: 12px;
    padding: 6px 10px 6px 18px;
    margin-bottom: 24px;
}

.error404-search input[type="search"] {
    flex: 1;
    border: none;
    background: transparent;
    font-size: 0.95rem;
    color: #1e293b;
    outline: none;
    padding: 8px 0;
}

.error404-search input[type="search"]::placeholder {
    color: #94a3b8;
}

.error404-search button {
    background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
    border: none;
    border-radius: 8px;
    color: #fff;
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    transition: opacity 0.2s;
}

.error404-search button:hover {
    opacity: 0.85;
}

.error404-home-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #6366f1;
    font-size: 0.9rem;
    font-weight: 500;
    text-decoration: none;
    transition: color 0.2s;
}

.error404-home-btn svg {
    display: block;
    flex-shrink: 0;
    transition: transform 0.2s ease;
}

.error404-home-btn:hover {
    color: #4338ca;
}

.error404-home-btn:hover svg {
    transform: translateX(-3px);
}

@media (max-width: 480px) {
    .error404-title {
        font-size: 1.3rem;
    }

    .error404-wrap {
        padding: 60px 20px 80px;
    }
}

/* ===========================
   SEARCH PAGE
   =========================== */

.search-hero {
    background: #f8f9fa;
    padding: 28px 0 24px;
    text-align: center;
    border-bottom: 1px solid #e5e7eb;
    margin-bottom: 32px;
}

.search-hero-label {
    font-size: 0.85rem;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin: 0 0 6px;
}

.search-hero-query {
    font-size: 1.9rem;
    font-weight: 700;
    color: #1e293b;
    margin: 0 0 8px;
    word-break: break-word;
}

.search-hero-count {
    font-size: 0.9rem;
    color: #6366f1;
    font-weight: 500;
    margin: 0 0 24px;
}

.search-hero-form {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #ffffff;
    border: 1.5px solid #e0e7ff;
    border-radius: 12px;
    padding: 6px 8px 6px 18px;
    max-width: 440px;
    width: 100%;
}

.search-hero-form input[type="search"] {
    flex: 1;
    border: none;
    background: transparent;
    font-size: 0.95rem;
    color: #1e293b;
    outline: none;
    padding: 6px 0;
    min-width: 0;
}

.search-hero-form input[type="search"]::placeholder {
    color: #94a3b8;
}

.search-hero-form button {
    background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
    border: none;
    border-radius: 8px;
    color: #fff;
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    transition: opacity 0.2s;
    line-height: 1;
    padding: 0;
}

.search-hero-form button svg {
    display: block;
    flex-shrink: 0;
}

.search-hero-form button:hover {
    opacity: 0.85;
}

/* Skeleton Loader */
@keyframes shimmer {
    0% { background-position: -400px 0; }
    100% { background-position: 400px 0; }
}

.skeleton {
    background: #e2e8f0;
    background: linear-gradient(90deg, #e2e8f0 25%, #f1f5f9 50%, #e2e8f0 75%);
    background-size: 800px 100%;
    animation: shimmer 1.5s infinite ease-in-out;
    border-radius: 6px;
}

.skeleton-card {
    pointer-events: none;
}

.skeleton-image {
    width: 100%;
    height: 200px;
    border-radius: 0;
}

.skeleton-meta {
    display: inline-block;
    width: 120px;
    height: 14px;
}

.skeleton-line {
    height: 14px;
}

.skeleton-line.w-100 { width: 100%; }
.skeleton-line.w-75 { width: 75%; }
.skeleton-line.w-60 { width: 60%; }

/* No results state */
.search-hero.no-results {
    padding-bottom: 48px;
}

.search-no-results {
    text-align: center;
    padding: 48px 20px 64px;
    color: #64748b;
}

.search-no-results svg {
    margin-bottom: 20px;
    opacity: 0.7;
}

.search-no-results h2 {
    font-size: 1.3rem;
    font-weight: 600;
    color: #1e293b;
    margin: 0 0 10px;
    word-break: break-word;
}

.search-no-results p {
    font-size: 0.95rem;
    margin: 0 0 24px;
}

@media (max-width: 480px) {
    .search-hero-query {
        font-size: 1.4rem;
    }

    .search-hero {
        padding: 36px 16px 28px;
    }
}

/* ===========================
   FOOTER
   =========================== */

.site-footer {
    background: transparent;
    padding: 30px 0;
    margin-top: 60px;
    text-align: center;
    color: #333;
    font-size: 0.85em;
    box-shadow: none;
}

.footer-links {
    margin-top: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
}

.footer-links a {
    color: #374151;
    transition: color 0.2s ease;
    padding: 0 4px;
}

.footer-links a:hover {
    color: #4f46e5;
}

.footer-links .separator {
    color: #d1d5db;
    margin: 0 2px;
}

/* ===========================
   RESPONSIVE
   =========================== */

@media (max-width: 992px) {
    .blog-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 30px 20px;
    }

    .hamburger-menu {
        display: flex;
    }

    .main-navigation {
        position: fixed;
        top: 0;
        left: -100%;
        width: 280px;
        height: 100vh;
        background: #ffffff;
        box-shadow: 4px 0 20px rgba(0, 0, 0, 0.1);
        padding: 80px 30px 30px;
        transition: left 0.3s ease;
        z-index: 1000;
        overflow-y: auto;
    }

    .main-navigation.active {
        left: 0;
    }

    .main-navigation .nav-menu {
        flex-direction: column;
        gap: 0;
    }

    .main-navigation .nav-menu li {
        width: 100%;
        border-bottom: 1px solid #f3f4f6;
    }

    .main-navigation .nav-menu a {
        display: block;
        padding: 16px 0;
        font-size: 1rem;
    }

    .search-form-container {
        right: 10px;
        min-width: 280px;
    }
}

@media (max-width: 768px) {
    .blog-grid {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .site-header {
        margin-bottom: 20px;
        position: relative;
    }

    .post-card-content {
        padding: 20px;
    }

    .search-form-container {
        min-width: 260px;
    }

}

/* ===========================
   SINGLE POST - CLEAN & MODERN
   =========================== */

/* Single post main */
.single-main {
    padding: 0;
    overflow-x: clip; /* clip = tidak bikin scroll container, sticky tetap jalan */
}

.article-single {
    overflow-x: clip;
}

/* Hero Section with Clean Light Background */
.article-hero {
    background: #f1f5f9;
    padding: 70px 0 90px 0;
    position: relative;
    text-align: left;
    /* Cegah auto ads yang inject di sini dari melebarkan hero */
    overflow-x: clip;
}

.article-hero-inner {
    max-width: calc(920px + 280px + 32px);
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    justify-content: flex-start;
}

.article-hero-content {
    max-width: 920px;
    margin: -20px 0 0 0;
    padding: 0 26px;
    box-sizing: border-box;
}

/* Breadcrumb */
.breadcrumb {
    font-size: 0.8rem;
    margin-bottom: 15px;
    color: #4b5563;
    text-align: left;
}

.breadcrumb a {
    color: #4338ca;
    text-decoration: none;
    transition: color 0.2s ease;
}

.breadcrumb a:hover {
    color: #5b21b6;
    text-decoration: underline;
}

.breadcrumb .separator {
    margin: 0 4px;
    color: #6b7280;
}

.breadcrumb .current {
    color: #4b5563;
    font-weight: 400;
    word-break: break-word;
    overflow-wrap: anywhere;
}

.article-title {
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.2;
    margin: 0 0 20px 0;
    color: #1e293b;
    text-shadow: none;
}

.article-meta {
    font-size: 0.85rem;
    color: #475569;
    margin-bottom: 0;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-start;
}

.author-name {
    font-weight: 400;
    color: #475569;
}

.article-category {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: #4338ca;
}

.article-category svg {
    color: #4338ca;
    flex-shrink: 0;
    position: relative;
    top: -0.5px;
}

.article-category a {
    color: #4338ca;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 0.75rem;
    background: none;
    padding: 0;
    border-radius: 0;
    border: none;
    text-decoration: none;
    transition: color 0.2s ease;
}

.article-category a:hover {
    color: #3730a3;
    background: none;
}

/* Featured Image - overlapping hero */
.article-featured-image {
    width: 100%;
    max-width: 920px;
    box-sizing: border-box;
    margin: -80px 0 0 0;
    padding: 0;
    position: relative;
    z-index: 2;
    /* aspect-ratio dihapus — img sudah punya width/height attr dari WP,
       browser otomatis hitung ratio untuk CLS prevention */
}

.article-featured-image img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 12px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
}

/* Content Wrapper - Contains article + sidebar */
.content-wrapper {
    max-width: 1560px;
    margin: 0 auto;
    padding: 40px 20px 60px 20px;
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr) 260px;
    gap: 40px;
    position: relative;
    align-items: flex-start;
    justify-content: center;
}

/* Article Container - Main content, centered */
.article-main-column {
    grid-column: 2;
    width: 100%;
    max-width: 920px;
    justify-self: start;
    display: flex;
    flex-direction: column;
    gap: 24px;
    overflow: visible;
    min-width: 0;
}

.article-container {
    width: 100%;
    max-width: 100%;
    position: relative;
    z-index: 1;
    margin-top: -105px;
    padding: 0 40px 36px;
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 2px 16px rgba(0,0,0,0.06);
    border: 1px solid #f1f5f9;
    overflow: hidden;
    box-sizing: border-box;
}

/* Featured image di dalam card — flush ke atas & full-width */
.article-container .article-featured-image {
    margin: 0 -40px 32px -40px;
    width: calc(100% + 80px);
    max-width: calc(100% + 80px);
}

.article-container .article-featured-image img {
    border-radius: 0;
    box-shadow: none;
}

/* Sidebar - Positioned on the right */
.sidebar {
    grid-column: 3;
    width: 100%;
    margin-top: -160px;
    max-width: 260px;
    padding-right: 10px;
    justify-self: start;
    margin-left: auto;
    position: sticky;
    top: 20px;
    align-self: start;
}

.sidebar .widget {
    background: #ffffff;
    padding: 20px;
    margin-bottom: 30px;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    /* Reserve minimum space to reduce CLS */
    min-height: 100px;
}

.sidebar .widget-title,
.sidebar h2.widget-title {
    font-size: 1.1rem;
    font-weight: 600;
    margin: 0 0 15px 0;
    color: #111827;
    padding-bottom: 10px;
    border-bottom: 2px solid #6366f1;
}

.sidebar ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.sidebar li {
    margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid #f3f4f6;
}

.sidebar li:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

.sidebar a {
    color: #374151;
    font-size: 0.95rem;
    transition: color 0.3s ease;
}

.sidebar a:hover {
    color: #6366f1;
}

.widget_categories ul {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.widget_categories li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 7px 10px;
    border-radius: 8px;
    border-bottom: none;
    transition: background 0.2s ease;
}

.widget_categories li:hover {
    background: #f5f3ff;
}

.widget_categories li:last-child {
    border-bottom: none;
}

.widget_categories a {
    flex: 1;
    font-size: 0.9rem;
    color: #374151;
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 500;
}

/* Icon folder sebelum tiap kategori */
.widget_categories a::before {
    content: '';
    display: inline-block;
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236366f1' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
}

.widget_categories a:hover {
    color: #4f46e5;
}

.widget_categories .category-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 24px;
    padding: 0 6px;
    border-radius: 6px;
    background: rgba(99, 102, 241, 0.1);
    color: #4f46e5;
    font-weight: 600;
    font-size: 0.78rem;
}

/* ===========================
   BRI/BCA CUSTOM HTML WIDGET
   =========================== */

.sidebar .widget_custom_html {
    position: relative;
    overflow: hidden;
}

/* Decorative bank/ATM icon di background */
.sidebar .widget_custom_html::before {
    content: '';
    position: absolute;
    right: -10px;
    top: -10px;
    width: 90px;
    height: 90px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236366f1' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='1' y='4' width='22' height='16' rx='2' ry='2'/%3E%3Cline x1='1' y1='10' x2='23' y2='10'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    opacity: 0.06;
    pointer-events: none;
    z-index: 0;
}

/* Image di dalam widget BRI */
.sidebar .widget_custom_html img {
    width: 100%;
    height: auto;
    border-radius: 10px;
    display: block;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    position: relative;
    z-index: 1;
}

.sidebar .widget_custom_html a:hover img {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(99, 102, 241, 0.15);
}

.sidebar .widget_custom_html div {
    position: relative;
    z-index: 1;
}

/* YouTube Feature Card (Sidebar) - Same style as Telegram */
.widget-youtube-card {
    position: relative;
    display: block;
    text-decoration: none;
    background: #ffffff;
    border: 1.5px solid #fee2e2;
    border-radius: 16px;
    padding: 24px;
    color: #111827;
    box-shadow: 0 4px 20px rgba(255, 0, 0, 0.07);
    overflow: hidden;
    margin-bottom: 35px;
    transition: box-shadow 0.25s ease, transform 0.25s ease;
}

.widget-youtube-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(255, 0, 0, 0.13);
}

/* Decorative large YT icon di background */
.widget-youtube-card::before {
    content: '';
    position: absolute;
    right: -18px;
    bottom: -18px;
    width: 120px;
    height: 120px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23ff0000' d='M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    opacity: 0.07;
    pointer-events: none;
}

.widget-youtube-card::after {
    display: none;
}

.sidebar .widget.widget-youtube-card {
    background: #ffffff !important;
    padding: 24px;
    border-radius: 16px;
    color: #111827;
}

/** Telegram CTA widget */
.widget-telegram-cta {
    position: relative;
    display: block;
    text-decoration: none;
    background: #ffffff;
    border: 1.5px solid #bae6fd;
    border-radius: 16px;
    padding: 24px;
    color: #111827;
    box-shadow: 0 4px 20px rgba(29, 161, 242, 0.07);
    overflow: hidden;
    transition: box-shadow 0.25s ease, transform 0.25s ease;
}

.widget-telegram-cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(29, 161, 242, 0.13);
}

/* Decorative large Telegram icon di background */
.widget-telegram-cta::before {
    content: '';
    position: absolute;
    right: -16px;
    bottom: -16px;
    width: 120px;
    height: 120px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%231da1f2' d='M12 0C5.373 0 0 5.373 0 12s5.373 12 12 12 12-5.373 12-12S18.627 0 12 0zm5.894 8.221-1.97 9.28c-.145.658-.537.818-1.084.508l-3-2.21-1.447 1.394c-.16.16-.295.295-.605.295l.213-3.053 5.56-5.023c.242-.213-.054-.333-.373-.12L7.17 13.67l-2.96-.924c-.643-.204-.657-.643.136-.953l11.57-4.461c.537-.194 1.006.131.978.889z'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    opacity: 0.07;
    pointer-events: none;
}

.widget-telegram-cta::after {
    display: none;
}

.sidebar .widget.widget-telegram-cta {
    background: #ffffff !important;
    padding: 24px;
    border-radius: 16px;
    color: #111827;
    min-height: unset;
}

.telegram-cta-content {
    display: block;
    position: relative;
    z-index: 1;
}

.telegram-icon {
    width: 52px;
    height: 52px;
    background: rgba(29, 161, 242, 0.1);
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    margin: 0 0 14px 0;
}

.telegram-icon::after {
    display: none;
}

.telegram-icon svg {
    width: 28px;
    height: 28px;
    fill: #1da1f2;
}

.telegram-cta-title {
    font-size: 1rem;
    font-weight: 600;
    margin: 0 0 4px 0;
    color: #111827;
}

.telegram-cta-subtitle {
    margin: 0 0 12px 0;
    color: #6b7280;
    font-size: 0.85rem;
}

.telegram-cta-button {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 16px;
    border-radius: 10px;
    background: linear-gradient(135deg, #1da1f2 0%, #0a85cc 100%);
    color: #ffffff;
    font-weight: 700;
    font-size: 0.85rem;
    margin-top: 10px;
    box-shadow: 0 4px 14px rgba(29, 161, 242, 0.3);
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.telegram-cta-button:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(29, 161, 242, 0.4);
}

.yt-content {
    display: block;
    position: relative;
    z-index: 1;
    text-align: left;
}

.yt-icon {
    width: 52px;
    height: 52px;
    background: rgba(255, 0, 0, 0.08);
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    margin: 0 0 14px 0;
}

.yt-icon::after {
    display: none;
}

.yt-icon svg {
    width: 28px;
    height: 28px;
    fill: #ff0000;
}

.yt-label {
    font-size: 0.82rem;
    text-transform: none;
    letter-spacing: 0;
    margin: 0 0 4px 0;
    color: #6b7280;
    line-height: 1.4;
}

.widget-youtube-card .widget-title {
    font-size: 1rem;
    font-weight: 600;
    margin: 0 0 12px 0;
    color: #111827;
    padding: 0;
    border: none;
}

.yt-subscribe-button {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 16px;
    border-radius: 10px;
    background: linear-gradient(135deg, #ff4444 0%, #cc0000 100%);
    color: #ffffff;
    font-weight: 700;
    font-size: 0.85rem;
    margin-top: 10px;
    box-shadow: 0 4px 14px rgba(255, 0, 0, 0.3);
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.yt-subscribe-button:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(255, 0, 0, 0.4);
}

/* Article inline variant */
.article-content .widget-youtube-card {
    max-width: 520px;
    margin: 30px auto;
    padding: 30px;
    border-radius: 20px;
    /* border: 1px solid #e5e7eb; */
    background: #ffffff;
    color: #111827;
    box-shadow: 0 12px 35px rgba(15, 23, 42, 0.08);
}

.article-content .widget-youtube-card::after {
    display: none;
}

.article-content .yt-card-header {
    flex-direction: column;
    gap: 6px;
    align-items: flex-start;
}

.article-content .yt-logo {
    display: none;
}

.article-content .yt-label {
    color: #6b7280;
    text-transform: none;
    letter-spacing: 0;
    font-size: 0.95rem;
    margin-bottom: 0;
}

.article-content .widget-title {
    color: #111827;
    font-size: 1.2rem;
}

.article-content .yt-subscribe-button {
    width: auto;
    margin-top: 16px;
    padding: 10px 24px;
    align-self: flex-start;
    background: #ff4d4d;
    color: #ffffff;
}

/* Article Content - Clean Typography */
.article-content {
    font-size: 1.125rem;
    line-height: 1.9;
    color: #1e1b4b !important;
    padding: 0;
    max-width: 100%;
    display: flow-root;
    word-wrap: break-word;
}

/* Auto Ads Google di dalam article — langsung .article-content > ins */
.article-content > ins.adsbygoogle {
    margin: -0.5em 0 1.5em 0 !important;
}

.article-content a {
    color: #3730a3;
    text-decoration: underline;
    text-decoration-color: rgba(55, 48, 163, 0.3);
    text-underline-offset: 3px;
    transition: all 0.2s ease;
    font-weight: 500;
}

.article-content a:hover {
    color: #312e81;
    text-decoration-color: #312e81;
}

.article-content>*:first-child {
    margin-top: 0;
}

.article-content p {
    margin-bottom: 1.75em;
}

/* Kalau <p> wrapping image sendirian → clip border-radius biar bg di bawah ga keliatan */
.article-content p:has(> img:only-child) {
    border-radius: 10px;
    overflow: hidden;
    background: transparent;
    margin-bottom: 0;
}

.article-content h2 {
    font-size: 1.8rem;
    font-weight: 700;
    line-height: 1.3;
    margin: 2.5em 0 0.75em 0;
    color: #111827;
    position: relative;
    padding-bottom: 12px;
}

.article-content h2::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 60px;
    height: 4px;
    background: linear-gradient(90deg, #6366f1 0%, #4f46e5 100%);
    border-radius: 2px;
}

.article-content h2.h3-size::after {
    display: none;
}

.article-content h3,
.article-content h2.h3-size {
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1.4;
    margin: 2em 0 0.75em 0;
    color: #1f2937;
}

.article-content h4,
.article-content h3.h4-size {
    font-size: 1.375rem;
    font-weight: 600;
    margin: 1.75em 0 0.5em 0;
    color: #374151;
}

.article-content a {
    color: #4f46e5;
    font-weight: 500;
    text-decoration: underline;
    text-decoration-color: rgba(79, 70, 229, 0.3);
    text-underline-offset: 3px;
    border-bottom: none;
    transition: all 0.2s ease;
}

.article-content a:hover {
    color: #4338ca;
    text-decoration-color: #4338ca;
}

.article-content img {
    max-width: 100% !important;
    width: auto;
    height: auto !important;
    border-radius: 10px;
    margin: 2.5em auto;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06), 0 8px 24px rgba(99, 102, 241, 0.08);
    display: block;
    box-sizing: border-box;
}

/* Fix: WP block image dengan alignment */
.article-content .wp-block-image img,
.article-content .aligncenter img,
.article-content .alignleft img,
.article-content .alignright img {
    max-width: 100% !important;
    height: auto !important;
}

/* Alignfull / alignwide jangan overflow */
.article-content .alignfull,
.article-content .alignwide {
    max-width: 100% !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

.article-content iframe {
    max-width: 100%;
    border-radius: 12px;
    margin: 2.5em 0;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
    display: block;
    /* YouTube embeds are typically 16:9 */
    aspect-ratio: 16 / 9;
    width: 100%;
    height: auto;
}

.article-content figure {
    margin: 2.5em 0;
    border-radius: 10px;
    overflow: hidden;
    background: transparent;
}

.article-content figure img {
    margin-bottom: 0;
    margin-top: 0;
}

.article-content figcaption {
    font-size: 0.85rem;
    color: #6b7280;
    text-align: center;
    margin-top: 0.5em;
    margin-bottom: 0;
    font-style: normal;
    line-height: 1.5;
}

.article-content ul,
.article-content ol {
    margin: 1.75em 0;
    padding-left: 2em;
}

.article-content li {
    margin-bottom: 0.85em;
    line-height: 1.8;
}

.article-content ul li {
    position: relative;
    list-style: none;
}

.article-content ul li::before {
    content: '▸';
    position: absolute;
    left: -1.5em;
    color: #6366f1;
    font-weight: bold;
}

.article-content blockquote {
    border-left: 4px solid #6366f1;
    padding: 1em 2em 1em 2.4em;
    margin: 1.5em 0;
    background: linear-gradient(135deg, #f9fafb 0%, #f3f4f6 100%);
    border-radius: 0 8px 8px 0;
    font-size: 1em;
    font-weight: 500;
    color: #1f2937;
    position: relative;
    display: flex;
    align-items: center;
    line-height: 1.9;
}

.article-content blockquote>* {
    margin: 0;
}

.article-content blockquote::before {
    content: '"';
    font-size: 3.2rem;
    color: #6366f1;
    opacity: 0.45;
    position: absolute;
    top: -18px;
    left: 10px;
    font-family: Georgia, serif;
}

.article-content code {
    background: #f8fafc;
    padding: 3px 8px;
    border-radius: 5px;
    font-size: 0.9em;
    color: #1e293b;
    border: none !important;
}

.article-content pre,
.article-content pre.prettyprint {
    background: #282c34 !important;
    color: #abb2bf !important;
    padding: 1.5em;
    border-radius: 10px;
    overflow-x: auto;
    margin: 2.5em 0;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    border: none !important;
    white-space: pre;
    word-break: normal;
    font-size: 0.82rem;
    line-height: 1.7;
    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
    /* Scrollbar dark — Firefox */
    scrollbar-width: thin;
    scrollbar-color: #4b5263 #21252b;
}
/* Scrollbar dark — Webkit */
.article-content pre::-webkit-scrollbar,
.article-content pre.prettyprint::-webkit-scrollbar {
    height: 6px;
}
.article-content pre::-webkit-scrollbar-track,
.article-content pre.prettyprint::-webkit-scrollbar-track {
    background: #21252b;
    border-radius: 0 0 10px 10px;
}
.article-content pre::-webkit-scrollbar-thumb,
.article-content pre.prettyprint::-webkit-scrollbar-thumb {
    background: #4b5263;
    border-radius: 3px;
}
.article-content pre::-webkit-scrollbar-thumb:hover,
.article-content pre.prettyprint::-webkit-scrollbar-thumb:hover {
    background: #636d83;
}

.article-content pre code {
    background: transparent !important;
    color: #f9fafb !important;
    padding: 0;
    border: none !important;
    white-space: inherit;
}

/* Article Footer */
.article-footer {
    margin-top: 60px;
    padding: 35px 0 0 0;
    border-top: 3px solid #f3f4f6;
}

.article-tags {
    font-size: 0.95rem;
    margin-top: 24px;
}

.tags-list {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 8px;
}

.tags-label {
    font-weight: 600;
    color: #374151;
    margin-right: 4px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.tags-label svg {
    color: #6366f1;
    flex-shrink: 0;
}

.article-tags a {
    display: inline-block;
    background: #f8fafc;
    color: #4338ca;
    padding: 4px 12px;
    border-radius: 6px;
    font-size: 0.88rem;
    font-weight: 500;
    transition: background 0.2s ease, color 0.2s ease;
    border: none;
}

.article-tags a::before {
    content: '#';
    color: #6366f1;
    font-weight: 700;
    margin-right: 1px;
}

.article-tags a:hover {
    color: #3730a3;
    background: #f1f5f9;
    transform: none;
}

/* Custom Share Buttons */

.share-buttons {
    margin-top: 24px;
    padding: 12px 0 0 0;
}

.share-buttons-title {
    font-size: 0.7rem;
    font-weight: 700;
    color: #94a3b8;
    margin: 0 0 10px 0;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-align: center;
}

.share-buttons-list {
    display: flex;
    flex-wrap: nowrap;
    gap: 10px;
    justify-content: center;
}

.share-button {
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: #ffffff;
    border: 1.5px solid #f1f5f9;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
    text-decoration: none;
}

.share-button svg {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    color: #64748b;
}

.share-button span {
    display: none;
}

.share-button:hover {
    transform: translateY(-2px);
    color: #fff;
    box-shadow: 0 6px 18px rgba(0,0,0,0.12);
}

.share-button:hover svg {
    color: #fff;
}

.share-button svg path,
.share-button svg rect,
.share-button svg circle {
    fill: currentColor !important;
}

.share-facebook:hover { background: #1877f2; border-color: #1877f2; }
.share-twitter:hover  { background: #1da1f2; border-color: #1da1f2; }
.share-whatsapp:hover { background: #25d366; border-color: #25d366; }
.share-linkedin:hover { background: #0077b5; border-color: #0077b5; }
.share-telegram:hover { background: #0088cc; border-color: #0088cc; }

/* Hide Jetpack/Plugin Sharing Buttons */
.sd-sharing,
.sd-social,
.sd-social-icon,
.robots-nocontent,
.sharedaddy,
.sd-block,
.sd-content {
    display: none !important;
}

/* Responsive */
@media (max-width: 1280px) {
    .content-wrapper {
        grid-template-columns: minmax(0, 1fr) 280px;
        max-width: 1100px;
        padding: 40px 20px 60px 20px;
        gap: 50px;
    }

    .toc-sidebar {
        display: none;
    }

    .toc-inline {
        display: block;
    }

    .article-main-column {
        grid-column: 1;
        max-width: 100%;
    }

    .sidebar {
        grid-column: 2;
    }
}

@media (max-width: 1200px) {
    .content-wrapper {
        grid-template-columns: 1fr;
        max-width: 900px;
        padding: 30px 20px 50px 20px;
    }

    .article-main-column {
        max-width: 100%;
    }

    .article-container {
        margin-top: -65px;
        padding: 0 20px 28px;
        border-radius: 12px;
    }

    .article-container .article-featured-image {
        margin: 0 -20px 24px -20px;
        width: calc(100% + 40px);
        max-width: calc(100% + 40px);
    }

    .article-featured-image {
        max-width: 880px;
        margin: 0 auto 30px auto;
        box-sizing: border-box;
    }

    .article-hero-inner {
        justify-content: center;
    }

    .sidebar {
        grid-column: 1;
        width: 100%;
        max-width: 600px;
        margin: 35px auto 0;
        position: static;
    }
}

@media (max-width: 992px) {
    .header-flex {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }

    .header-flex>div:first-child {
        text-align: left;
    }

    .site-description {
        display: none;
    }

    .main-navigation .nav-menu {
        flex-wrap: wrap;
        justify-content: center;
        gap: 20px;
    }
}

@media (max-width: 768px) {
    .main-navigation .nav-menu {
        flex-direction: column;
        gap: 12px;
        width: 100%;
    }

    .main-navigation .nav-menu li {
        width: 100%;
    }

    .main-navigation .nav-menu a {
        display: block;
        padding: 12px;
        border-radius: 10px;
    }

    .article-hero {
        padding: 60px 0 50px 0;
    }

    .article-hero-content {
        padding: 0;
    }

    .article-title {
        font-size: 1.75rem;
        margin-bottom: 16px;
    }

    .article-meta {
        font-size: 0.8rem;
        margin-bottom: 0;
    }

    .article-main-column {
        max-width: 100%;
        width: 100%;
        min-width: 0;
    }

    .article-featured-image {
        width: 100%;
        max-width: 100%;
        margin: -50px 0 20px 0;
        padding: 0;
        box-sizing: border-box;
    }

    .article-featured-image img {
        border-radius: 8px;
        width: 100%;
        max-width: 100%;
        height: auto;
        display: block;
    }

    body {
        overflow-x: clip;
    }

    .content-wrapper {
        padding: 40px 20px;
    }

    .sidebar {
        margin-top: 30px;
    }

    .article-content {
        font-size: 1rem;
    }

    .article-content h2 {
        font-size: 1.5rem;
    }

    .article-content h3 {
        font-size: 1.25rem;
    }

    .article-content h4 {
        font-size: 1.1rem;
    }

    /* Page template mobile */
    .post-card.type-page {
        padding: 40px 20px !important;
        margin: 30px 10px !important;
    }

    .post-card.type-page .post-card-title {
        font-size: 1.6rem !important;
    }

    /* Form full width di mobile */
    .post-card.type-page input[type="text"],
    .post-card.type-page input[type="email"],
    .post-card.type-page input[type="tel"],
    .post-card.type-page input[type="url"],
    .post-card.type-page textarea,
    .wpcf7 input[type="text"],
    .wpcf7 input[type="email"],
    .wpcf7 input[type="tel"],
    .wpcf7 input[type="url"],
    .wpcf7 textarea,
    .fl-form-field input[type="text"],
    .fl-form-field input[type="email"],
    .fl-form-field input[type="tel"],
    .fl-form-field textarea {
        width: 100% !important;
        box-sizing: border-box !important;
        max-width: 100% !important;
    }

    .post-card.type-page input[type="submit"],
    .post-card.type-page button[type="submit"],
    .wpcf7 input[type="submit"],
    .wpcf7 button[type="submit"] {
        width: 100% !important;
    }

    /* Tags — mobile */
    .article-tags {
        font-size: 1rem;
    }

    .article-tags a {
        font-size: 0.9rem;
        padding: 5px 12px;
    }
}

/* ===========================
   PAGE TEMPLATE STYLES (For Pages in Index Template)
   =========================== */

/* Override grid layout for pages */
.page .blog-grid {
    display: block !important;
    grid-template-columns: none !important;
}

/* Page container with gradient background */
.post-card.type-page {
    background: linear-gradient(135deg, #ffffff 0%, #faf9fe 100%);
    box-shadow: 0 8px 32px rgba(99, 102, 241, 0.12);
    border-radius: 16px;
    max-width: 850px;
    width: 100%;
    margin: 60px auto;
    padding: 70px 80px;
    border: 1px solid rgba(99, 102, 241, 0.08);
}

.post-card.type-page .post-card-content {
    padding: 0;
    max-width: 100%;
    margin: 0;
}

.post-card.type-page .post-card-content>* {
    margin-top: 0 !important;
}

.post-card.type-page .post-card-content>*:first-child {
    margin-top: 0 !important;
}

.post-card.type-page .post-meta {
    display: none;
}

/* Page Title with accent */
.post-card.type-page .post-card-title {
    /* font-size: 3rem; */
    font-weight: 700;
    margin-bottom: 0 !important;
    padding-bottom: 0;
    border-bottom: none;
    position: relative;
    color: #111827;
}

.post-card.type-page .post-card-title::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 100px;
    height: 4px;
    background: linear-gradient(90deg, #6366f1 0%, #8b5cf6 100%);
    border-radius: 3px;
}

.post-card.type-page .post-card-title a {
    color: #111827;
    pointer-events: none;
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.post-card.type-page .post-card-excerpt {
    font-size: 1.05rem;
    line-height: 1.9;
    color: #374151;
    line-clamp: unset;
    -webkit-line-clamp: unset;
    display: block;
    overflow: visible;
    margin-top: 15px !important;
    padding-top: 0 !important;
}

.post-card.type-page .post-card-excerpt>*:first-child {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* Remove excessive line breaks and WordPress block spacing */
.post-card.type-page .post-card-excerpt br {
    display: none !important;
}

.post-card.type-page .post-card-excerpt>br {
    display: none !important;
}

/* WordPress Gutenberg Block Spacing - AGGRESSIVE FIX */
.post-card.type-page .post-card-excerpt .wp-block-paragraph,
.post-card.type-page .post-card-excerpt .wp-block-quote,
.post-card.type-page .post-card-excerpt .wp-block-heading,
.post-card.type-page .post-card-excerpt .wp-block-image,
.post-card.type-page .post-card-excerpt .wp-block-list,
.post-card.type-page .post-card-excerpt>div,
.post-card.type-page .post-card-excerpt>p,
.post-card.type-page .post-card-excerpt>blockquote {
    margin-top: 0 !important;
    margin-bottom: 20px !important;
    padding-top: 0 !important;
}

.post-card.type-page .fl-row,
.post-card.type-page .fl-col,
.post-card.type-page .fl-module,
.post-card.type-page .fl-col-content {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

.post-card.type-page .wp-block-jetpack-contact-form-container {
    margin-top: 30px !important;
}

.post-card.type-page .post-card-excerpt p {
    margin-top: 0 !important;
}

.post-card.type-page .post-card-excerpt p:first-child {
    font-size: 1.15rem;
    color: #6b7280;
    margin-top: 0 !important;
    margin-bottom: 20px;
}

.post-card.type-page .post-card-excerpt p:empty {
    display: none;
}

/* Contact Form 7 & Beaver Builder Form Styling */
.post-card.type-page .wpcf7,
.post-card.type-page .fl-module-contact-form,
.post-card.type-page form {
    margin-top: 30px;
}

.post-card.type-page input[type="text"],
.post-card.type-page input[type="email"],
.post-card.type-page input[type="tel"],
.post-card.type-page input[type="url"],
.post-card.type-page textarea,
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 input[type="url"],
.wpcf7 textarea,
.fl-form-field input[type="text"],
.fl-form-field input[type="email"],
.fl-form-field input[type="tel"],
.fl-form-field textarea {
    width: 100% !important;
    padding: 14px 18px !important;
    border: 2px solid #e5e7eb !important;
    background: #ffffff !important;
    border-radius: 8px !important;
    font-size: 1rem !important;
    margin-bottom: 20px !important;
    font-family: 'Inter', 'Open Sans', sans-serif !important;
    transition: all 0.3s ease !important;
    box-sizing: border-box !important;
}

.post-card.type-page input:focus,
.post-card.type-page textarea:focus,
.wpcf7 input:focus,
.wpcf7 textarea:focus,
.fl-form-field input:focus,
.fl-form-field textarea:focus {
    border-color: #6366f1 !important;
    background: #faf9fe !important;
    outline: none !important;
}

.post-card.type-page input[type="submit"],
.post-card.type-page button[type="submit"],
.wpcf7 input[type="submit"],
.wpcf7 button[type="submit"],
.fl-button,
.fl-form-button {
    background: #6366f1 !important;
    color: #ffffff !important;
    padding: 14px 40px !important;
    border: none !important;
    border-radius: 8px !important;
    font-size: 1rem !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    font-family: 'Inter', 'Open Sans', sans-serif !important;
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3) !important;
}

.post-card.type-page input[type="submit"]:hover,
.post-card.type-page button[type="submit"]:hover,
.wpcf7 input[type="submit"]:hover,
.wpcf7 button[type="submit"]:hover,
.fl-button:hover,
.fl-form-button:hover {
    background: #4f46e5 !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(99, 102, 241, 0.4) !important;
}

.post-card.type-page label,
.wpcf7 label,
.fl-form-field label {
    display: block !important;
    margin-bottom: 8px !important;
    color: #111827 !important;
    font-weight: 600 !important;
    font-size: 0.95rem !important;
}

.wpcf7-response-output {
    border: none !important;
    padding: 15px 20px !important;
    border-radius: 8px !important;
    margin: 20px 0 0 0 !important;
    font-weight: 500 !important;
}

.wpcf7-mail-sent-ok {
    background: #d1fae5 !important;
    color: #065f46 !important;
}

.wpcf7-validation-errors,
.wpcf7-mail-sent-ng {
    background: #fee2e2 !important;
    color: #991b1b !important;
}

/* Beaver Builder specific */
.fl-form-field {
    margin-bottom: 20px !important;
}

.fl-form .fl-input-group {
    margin-bottom: 0 !important;
}

.page-content ul,
.page-content ol {
    margin: 1em 0;
    padding-left: 2em;
}

.page-content li {
    margin-bottom: 0.5em;
}

/* Contact Form Styling */
.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"],
.wpcf7-form textarea {
    width: 100%;
    padding: 10px 15px;
    border: 2px solid #e5e7eb;
    border-radius: 8px;
    font-size: 1rem;
    margin-bottom: 15px;
}

.wpcf7-form input[type="submit"] {
    background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
    color: #ffffff;
    padding: 12px 30px;
    border: none;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
}

/* Sitemap Plugin */
.wp-sitemap-page,
.wspm_ele {
    overflow-x: visible !important;
}

/* Comments Card Wrapper */
#respond {
    background: #fdfcff;
    border: 1px solid #f1f0f7;
    border-radius: 16px;
    padding: 24px 40px 36px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.04);
    margin-top: 16px;
}

@media (max-width: 768px) {
    #respond {
        padding: 24px 20px;
        border-radius: 12px;
    }
}

/* Comments Section */
#comments {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
}

h3#comments {
    font-size: 1rem;
    font-weight: 600;
    margin-top: 16px;
    margin-bottom: 4px;
    color: #1e293b;
}

#comments + .navigation {
    display: none;
}

ol.commentlist {
    margin-top: 0 !important;
}

.commentlist > li:first-child .comment {
    padding-top: 0 !important;
}

.comment-list,
.commentlist {
    list-style: none !important;
    list-style-type: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.comment-list li,
.commentlist li,
#comments li,
.comment li {
    list-style: none !important;
    list-style-type: none !important;
    position: relative !important;
}

.comment-list li::before,
.commentlist li::before,
#comments li::before,
.comment li::before {
    display: none !important;
    content: none !important;
    position: static !important;
    left: auto !important;
    color: transparent !important;
    font-size: 0 !important;
}

.comment-list .children,
.commentlist .children {
    list-style: none !important;
    list-style-type: none !important;
    padding-left: 0 !important;
    margin-top: 10px !important;
    margin-left: 0 !important;
}

/* Indent by depth */
.commentlist li.depth-2 {
    margin-left: 25px !important;
}

.commentlist li.depth-3 {
    margin-left: 50px !important;
}

.commentlist li.depth-4 {
    margin-left: 75px !important;
}

.comment {
    margin-bottom: 8px;
    padding-top: 8px;
    padding-bottom: 8px;
    padding-left: 0;
    padding-right: 0;
    background: none;
    border-radius: 0;
}

.comment-author {
    font-weight: 600;
    color: #111827;
    margin-bottom: 8px;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
}

.comment-author a {
    color: #111827;
    text-decoration: none;
}

.comment-author a:hover {
    color: #6366f1;
}

.comment-author .says {
    display: none;
}

.comment-author .avatar {
    display: block;
    margin-right: 12px;
    border-radius: 50%;
    flex-shrink: 0;
}

.comment-metadata {
    display: none;
}

.comment-form-url {
    display: none;
}

.comment-content p {
    margin: 0;
    line-height: 1.6;
    font-size: 0.9rem;
}

.comment-reply-link {
    font-size: 0.85rem;
    color: #4338ca;
    text-decoration: none;
    font-weight: 600;
    /* tap target mobile min 44px */
    display: inline-block;
    padding: 6px 10px;
    margin: -6px -10px;
}

.comment-reply-link:hover {
    color: #3730a3;
}

#respond {
    margin-top: 40px;
}

#reply-title {
    font-size: 1.2rem;
    font-weight: 500;
    margin-bottom: 20px;
    color: #111827;
}

.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
    width: 100%;
    padding: 12px 16px;
    border: 1.5px solid #e5e7eb;
    border-radius: 8px;
    font-size: 0.95rem;
    margin-bottom: 15px;
    font-family: inherit;
    background: #ffffff;
    color: #1e1b4b;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.comment-form input[type="text"]:focus,
.comment-form input[type="email"]:focus,
.comment-form input[type="url"]:focus,
.comment-form textarea:focus {
    background: #ffffff;
    outline: none;
    border-color: #6366f1;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.12), 0 1px 2px rgba(0, 0, 0, 0.05);
}

.comment-form .form-submit {
    text-align: right;
}

.comment-form input[type="submit"] {
    background: linear-gradient(135deg, #6366f1 0%, #4338ca 100%);
    color: #ffffff;
    padding: 12px 30px;
    border: none;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    box-shadow: 0 4px 14px rgba(99, 102, 241, 0.35);
}

.comment-form input[type="submit"]:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(99, 102, 241, 0.45);
}

/* Math Captcha alignment */
.math-captcha-form {
    text-align: left !important;
}

.math-captcha-form label {
    display: block;
    text-align: left !important;
    margin-bottom: 8px;
}

@media (max-width: 480px) {
    .site-header {
        padding: 14px 0;
    }

    .header-flex {
        gap: 8px;
    }

    .site-title {
        font-size: 1.2rem;
    }

    .main-navigation .nav-menu {
        gap: 8px;
    }

    .main-navigation .nav-menu a {
        padding: 10px 14px;
        font-size: 0.88rem;
    }

    .article-hero {
        padding: 40px 0 36px 0;
    }

    .article-title {
        font-size: 1.5rem;
    }

    .article-meta {
        font-size: 0.82rem;
    }

    .article-featured-image {
        width: 100%;
        max-width: 100%;
        margin: -40px 0 16px 0;
        padding: 0;
        box-sizing: border-box;
        overflow: hidden;
    }

    .article-featured-image img {
        border-radius: 6px;
        width: 100%;
        max-width: 100%;
        height: auto;
        display: block;
    }

    body {
        overflow-x: clip;
    }

    .comment-form input[type="submit"] {
        width: 100%;
        display: block;
    }

}

/* ===========================
   JETPACK RELATED POSTS
   =========================== */

/* Judul "Artikel Terkait" */
#jp-relatedposts h3.jp-relatedposts-headline,
.jp-relatedposts h3.jp-relatedposts-headline {
    font-size: 1.15rem !important;
    font-weight: 700 !important;
    color: #1e1b4b !important;
    margin-bottom: 16px !important;
}

@media (max-width: 768px) {
    #jp-relatedposts h3.jp-relatedposts-headline,
    .jp-relatedposts h3.jp-relatedposts-headline {
        font-size: 1.05rem !important;
    }
}

.jp-relatedposts-post-context {
    color: #374151 !important;
    font-weight: 600 !important;
    font-size: 0.8rem !important;
    opacity: 1 !important;
}

/* ===========================
   TABLE — RESPONSIVE & STYLED
   =========================== */

/* Wrapper scroll horizontal untuk semua tabel di konten artikel */
.article-content .table-scroll-wrap {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 2em 0;
    border-radius: 10px;
    box-shadow: 0 2px 12px rgba(99, 102, 241, 0.08);
    box-sizing: border-box;
}

/* WP Gutenberg block table */
.article-content .wp-block-table,
.article-content figure.wp-block-table {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 2em 0;
}

.article-content table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
    line-height: 1.6;
    background: #ffffff;
    min-width: 480px; /* biar tidak terlalu sempit saat di-wrap */
}

.article-content table th,
.article-content thead td {
    background: #1e293b;
    color: #f1f5f9;
    font-weight: 600;
    text-align: left;
    padding: 12px 16px;
    font-size: 0.88rem;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    white-space: nowrap;
}

.article-content table th:first-child,
.article-content thead td:first-child { border-radius: 10px 0 0 0; }
.article-content table th:last-child,
.article-content thead td:last-child  { border-radius: 0 10px 0 0; }

.article-content table td {
    padding: 11px 16px;
    border-bottom: 1px solid #ede9fe;
    color: #1e1b4b;
    vertical-align: top;
}

.article-content table tbody tr:nth-child(even) td {
    background: #f8fafc;
}

.article-content table tbody tr:hover td {
    background: #f1f5f9;
    transition: background 0.2s ease;
}

.article-content table tbody tr:last-child td {
    border-bottom: none;
}

.article-content table tbody tr:last-child td:first-child { border-radius: 0 0 0 10px; }
.article-content table tbody tr:last-child td:last-child  { border-radius: 0 0 10px 0; }

/* Mobile label agar tabel mudah dibaca (fallback tanpa JS) */
@media (max-width: 600px) {
    .article-content .table-scroll-wrap {
        border-radius: 8px;
    }

    /* Hint scroll indicator */
    .article-content .table-scroll-wrap::after {
        content: '← scroll →';
        display: block;
        text-align: center;
        font-size: 0.75rem;
        color: #8b8bbe;
        padding: 6px 0 4px;
        letter-spacing: 0.05em;
    }
}

/* ===========================
   CUSTOM WIDGET HTML UTILITIES
   =========================== */

/* Teks biasa di dalam widget */
.textwidget p,
.widget-text p {
    font-size: 0.92rem;
    line-height: 1.7;
    color: #374151;
    margin-bottom: 10px;
}

/* Info box */
.widget-info-box {
    background: linear-gradient(135deg, #f0f0fe 0%, #ede9fe 100%);
    border-left: 4px solid #6366f1;
    border-radius: 0 10px 10px 0;
    padding: 14px 16px;
    margin: 14px 0;
    font-size: 0.88rem;
    line-height: 1.6;
    color: #3730a3;
}

/* Warning / notice box */
.widget-notice-box {
    background: #fffbeb;
    border-left: 4px solid #f59e0b;
    border-radius: 0 10px 10px 0;
    padding: 14px 16px;
    margin: 14px 0;
    font-size: 0.88rem;
    color: #78350f;
}

/* CTA button dalam widget */
.widget-cta-btn {
    display: block;
    text-align: center;
    background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
    color: #ffffff !important;
    font-weight: 600;
    font-size: 0.9rem;
    padding: 11px 18px;
    border-radius: 10px;
    margin: 14px 0 0;
    text-decoration: none !important;
    border: none !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    letter-spacing: 0.02em;
}

.widget-cta-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(99, 102, 241, 0.35);
    color: #ffffff !important;
}

/* Stats / angka besar dalam widget */
.widget-stat {
    text-align: center;
    padding: 10px 0;
}

.widget-stat-number {
    display: block;
    font-size: 2rem;
    font-weight: 700;
    color: #6366f1;
    line-height: 1;
    margin-bottom: 4px;
}

.widget-stat-label {
    font-size: 0.8rem;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

/* Divider dalam widget */
.widget-divider {
    border: none;
    border-top: 2px solid #ede9fe;
    margin: 14px 0;
}

/* Highlight text */
.widget-highlight {
    background: linear-gradient(135deg, #6366f1, #4f46e5);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: 700;
}

/* Tag / badge kecil */
.widget-badge {
    display: inline-block;
    background: rgba(99, 102, 241, 0.12);
    color: #4f46e5;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 999px;
    letter-spacing: 0.04em;
}

/* ===========================
   UI POLISH TAMBAHAN
   =========================== */

/* Sidebar widget title — lebih clean */
.sidebar .widget-title,
.sidebar h2.widget-title {
    font-size: 1rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

/* Card hover lebih halus */
.post-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 28px rgba(99, 102, 241, 0.13);
}

/* Article hero background */
.article-hero {
    background: linear-gradient(160deg, #f4f4fd 0%, #faf9ff 60%, #f6f6f8 100%);
}

/* Category — no badge, plain colored text */
.article-category a {
    background: none;
    box-shadow: none;
}

/* Link hover underline style di artikel lebih halus */
.article-content a {
    text-decoration-thickness: 1px;
    text-underline-offset: 4px;
}

/* Post card title lebih tegas */
.post-card-title {
    font-weight: 700;
    letter-spacing: -0.01em;
}

/* Header shadow sedikit lebih elegan */
.site-header {
    box-shadow: 0 1px 0 #ede9fe, 0 2px 8px rgba(99, 102, 241, 0.06);
}

/* =====================================================
   DESKTOP SINGLE — align hero + narrow content
   Berlaku hanya di ≥1280px (saat toc-sidebar muncul)
   ===================================================== */
@media (min-width: 1280px) {
    /* Replika grid yang sama dengan content-wrapper
       supaya hero-content col-2 = article col-2, auto sejajar */
    .article-hero-inner {
        max-width: 1560px;
        padding: 0 20px;
        display: grid;
        grid-template-columns: 260px minmax(0, 1fr) 260px;
        gap: 40px;
    }

    .article-hero-content {
        grid-column: 2;
        max-width: 780px;
        width: 100%;
        justify-self: center;
        margin: -20px 0 0 0;
        padding: 0;
    }

    /* Max-width tetap ada, tapi di-center dalam kolom tengah */
    .article-main-column {
        max-width: 780px;
        width: 100%;
        justify-self: center;
    }

    .article-content {
        font-size: 1rem;
        line-height: 1.85;
    }

    /* Heading ikut proporsional */
    .article-content h2 {
        font-size: 1.55rem;
    }

    .article-content h3,
    .article-content h2.h3-size {
        font-size: 1.2rem;
    }
}

/* =====================================================
   TABLE OF CONTENTS — single.php
   ===================================================== */

/* ── Desktop Sidebar ── */
.toc-sidebar {
    grid-column: 1;
    position: sticky;
    top: 24px;
    align-self: start;
    max-height: calc(100vh - 48px);
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: #e2e8f0 transparent;
}

.toc-sidebar::-webkit-scrollbar { width: 3px; }
.toc-sidebar::-webkit-scrollbar-track { background: transparent; }
.toc-sidebar::-webkit-scrollbar-thumb { background: #e2e8f0; border-radius: 3px; }

/* hide inline toc on desktop */
.toc-inline {
    display: none;
}

.toc-widget {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    overflow: hidden;
}

/* Toggle button */
.toc-widget-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 14px 16px;
    background: none;
    border: none;
    border-bottom: 1px solid #f1f5f9;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.15s;
}

.toc-widget-toggle:hover {
    background: #f8fafc;
}

.toc-widget-title {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 0.8rem;
    font-weight: 700;
    color: #0f172a;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.toc-widget-title svg {
    color: #6366f1;
    flex-shrink: 0;
}

.toc-chevron {
    color: #94a3b8;
    transition: transform 0.25s ease;
    flex-shrink: 0;
}

.toc-widget-toggle[aria-expanded="false"] .toc-chevron {
    transform: rotate(180deg);
}

/* Nav list */
.toc-nav {
    padding: 10px 0;
    overflow: hidden;
    transition: max-height 0.3s ease, opacity 0.3s ease;
    max-height: 2000px;
    opacity: 1;
}

.toc-nav.is-collapsed {
    max-height: 0;
    opacity: 0;
    padding: 0;
}

.toc-nav ol,
.toc-nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* H2 items */
.toc-nav > ol > li > a,
.toc-nav > ul > li > a {
    display: block;
    padding: 6px 16px;
    font-size: 0.82rem;
    color: #475569;
    text-decoration: none;
    line-height: 1.4;
    border-left: 2px solid transparent;
    transition: color 0.15s, border-color 0.15s, background 0.15s;
}

.toc-nav > ol > li > a:hover,
.toc-nav > ul > li > a:hover {
    color: #6366f1;
    background: none;
    border-left-color: #6366f1;
}

.toc-nav > ol > li > a.toc-active,
.toc-nav > ul > li > a.toc-active {
    color: #6366f1;
    font-weight: 600;
    border-left-color: #6366f1;
    background: none;
}

/* H3 nested items */
.toc-nav ol ol,
.toc-nav ul ul {
    padding-left: 12px;
}

.toc-nav ol ol li a,
.toc-nav ul ul li a {
    display: block;
    padding: 5px 16px 5px 12px;
    font-size: 0.78rem;
    color: #64748b;
    text-decoration: none;
    line-height: 1.4;
    border-left: 2px solid transparent;
    transition: color 0.15s, border-color 0.15s, background 0.15s;
}

.toc-nav ol ol li a:hover,
.toc-nav ul ul li a:hover {
    color: #6366f1;
    background: none;
    border-left-color: #c7d2fe;
}

.toc-nav ol ol li a.toc-active,
.toc-nav ul ul li a.toc-active {
    color: #6366f1;
    border-left-color: #c7d2fe;
    background: none;
}

/* ── Mobile / Tablet Inline ToC ── */
.toc-inline {
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    overflow: hidden;
    background: #fafafa;
    margin-bottom: 8px;
}

.toc-inline-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 13px 16px;
    background: none;
    border: none;
    cursor: pointer;
    font-family: inherit;
    gap: 8px;
    transition: background 0.15s;
}

.toc-inline-toggle:hover {
    background: #f1f5f9;
}

.toc-inline-toggle > span {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 0.875rem;
    font-weight: 700;
    color: #0f172a;
}

.toc-inline-toggle > span svg {
    color: #6366f1;
}

.toc-inline-toggle .toc-chevron {
    color: #94a3b8;
    transition: transform 0.25s ease;
    flex-shrink: 0;
}

.toc-inline-toggle[aria-expanded="true"] .toc-chevron {
    transform: rotate(180deg);
}

.toc-inline-nav {
    border-top: 1px solid #e2e8f0;
    padding: 10px 0;
    background: #ffffff;
}

.toc-inline-nav ol,
.toc-inline-nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.toc-inline-nav > ol > li > a,
.toc-inline-nav > ul > li > a {
    display: block;
    padding: 7px 18px;
    font-size: 0.875rem;
    color: #475569;
    text-decoration: none;
    line-height: 1.4;
    border-left: 2px solid transparent;
    transition: color 0.15s, border-color 0.15s, background 0.15s;
}

.toc-inline-nav > ol > li > a:hover,
.toc-inline-nav > ul > li > a:hover {
    color: #6366f1;
    border-left-color: #6366f1;
    background: #f5f3ff;
}

.toc-inline-nav ol ol,
.toc-inline-nav ul ul {
    padding-left: 14px;
}

.toc-inline-nav ol ol li a,
.toc-inline-nav ul ul li a {
    display: block;
    padding: 6px 18px 6px 14px;
    font-size: 0.82rem;
    color: #64748b;
    text-decoration: none;
    line-height: 1.4;
    border-left: 2px solid transparent;
    transition: color 0.15s, border-color 0.15s;
}

.toc-inline-nav ol ol li a:hover,
.toc-inline-nav ul ul li a:hover {
    color: #6366f1;
    border-left-color: #c7d2fe;
    background: #f5f3ff;
}

/* =====================================================
   SHARE WIDGET — Kolom kiri sidebar desktop
   ===================================================== */
.share-widget {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid #f1f5f9;
}

.share-widget-title {
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #94a3b8;
    margin: 0 0 12px 0;
}

.share-widget .share-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.share-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    border: 1.5px solid #e2e8f0;
    background: #ffffff;
    color: #64748b;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.18s, color 0.18s, border-color 0.18s, transform 0.15s;
    flex-shrink: 0;
}

.share-btn:hover {
    transform: translateY(-2px);
}

.share-wa:hover  { background: #25D366; border-color: #25D366; color: #fff; }
.share-x:hover   { background: #000; border-color: #000; color: #fff; }
.share-fb:hover  { background: #1877F2; border-color: #1877F2; color: #fff; }
.share-tg:hover  { background: #229ED9; border-color: #229ED9; color: #fff; }

.share-copy:hover   { background: #6366f1; border-color: #6366f1; color: #fff; }
.share-copy.copied  { background: #10b981; border-color: #10b981; color: #fff; }

/* Hide after-content share buttons on desktop (ada di sidebar kiri) */
@media (min-width: 1280px) {
    .article-footer .share-buttons {
        display: none;
    }

    .article-footer {
        margin-top: 32px;
        padding-top: 0;
        border-top: none;
    }

    .article-footer .article-tags {
        margin-top: 0;
        padding-top: 24px;
        border-top: 3px solid #f3f4f6;
    }
}

img#wpstats{display:none}
.screen-reader-text{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}