/*
Theme Name:Vuiral Stories
Theme URI:http://wordpress.org/themes/vuiralstories
Author:admin vuiral.com
Author URI:http://vuiral.com/
Description:Template ini dibuat secara custom oleh arek ganteng dan berani,dia telah dijuluki sebagai si paling hebat
Version:1.0
License:GNU General Public License v2 or later
License URI:http://www.gnu.org/licenses/gpl-2.0.html
Tags:black,light,two-columns,right-sidebar,flexible-width,custom-header,custom-menu,editor-style,featured-images,microformats,post-formats,rtl-language-support,sticky-post,translation-ready
Text Domain:vuiral

This theme,like WordPress,is licensed under the GPL.
Use it to make something cool,have fun,and share what you've learned with others.

WordPress Custom Template by Vuiral.com
Name:Vuiral Stories
Date:09-11-2023
Launching:09-11-2023 (version 1.0)
Dilarang untuk menghapus credit tersebut dan hargailah hak cipta karya orang lain
*/

:root{--color-bg:#f8f9fa;--color-surface:#ffffff;--color-text:#212529;--color-primary:#0078d7;--color-border:#ddd;--color-table-alt:#f3f7fb;--color--vuiral:#ff6900;--color--vuiral--secondary:#212529;--color--vuiral--tertiary:#f8f4ec}

/* ===== DARK THEME ===== */
body.dark-mode{--color-bg:#121212;--color-surface:#1e1e1e;--color-text:#e0e0e0;--color-primary:#4dabf7;--color-border:#333;--color-table-alt:#2a2a2a}
:root{--wp--preset--color--black:#000000;--wp--preset--color--cyan-bluish-gray:#abb8c3;--wp--preset--color--white:#ffffff;--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,rgba(6,147,227,1) 0%,rgb(155,81,224) 100%);--wp--preset--gradient--light-green-cyan-to-vivid-green-cyan:linear-gradient(135deg,rgb(122,220,180) 0%,rgb(0,208,130) 100%);--wp--preset--gradient--luminous-vivid-amber-to-luminous-vivid-orange:linear-gradient(135deg,rgba(252,185,0,1) 0%,rgba(255,105,0,1) 100%);--wp--preset--gradient--luminous-vivid-orange-to-vivid-red:linear-gradient(135deg,rgba(255,105,0,1) 0%,rgb(207,46,46) 100%);--wp--preset--gradient--very-light-gray-to-cyan-bluish-gray:linear-gradient(135deg,rgb(238,238,238) 0%,rgb(169,184,195) 100%);--wp--preset--gradient--cool-to-warm-spectrum:linear-gradient(135deg,rgb(74,234,220) 0%,rgb(151,120,209) 20%,rgb(207,42,186) 40%,rgb(238,44,130) 60%,rgb(251,105,98) 80%,rgb(254,248,76) 100%);--wp--preset--gradient--blush-light-purple:linear-gradient(135deg,rgb(255,206,236) 0%,rgb(152,150,240) 100%);--wp--preset--gradient--blush-bordeaux:linear-gradient(135deg,rgb(254,205,165) 0%,rgb(254,45,45) 50%,rgb(107,0,62) 100%);--wp--preset--gradient--luminous-dusk:linear-gradient(135deg,rgb(255,203,112) 0%,rgb(199,81,192) 50%,rgb(65,88,208) 100%);--wp--preset--gradient--pale-ocean:linear-gradient(135deg,rgb(255,245,203) 0%,rgb(182,227,212) 50%,rgb(51,167,181) 100%);--wp--preset--gradient--electric-grass:linear-gradient(135deg,rgb(202,248,128) 0%,rgb(113,206,126) 100%);--wp--preset--gradient--midnight:linear-gradient(135deg,rgb(2,3,129) 0%,rgb(40,116,252) 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:0.44rem;--wp--preset--spacing--30:0.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,0.2);--wp--preset--shadow--deep:12px 12px 50px rgba(0,0,0,0.4);--wp--preset--shadow--sharp:6px 6px 0 rgba(0,0,0,0.2);--wp--preset--shadow--outlined:6px 6px 0 -3px rgba(255,255,255,1),6px 6px rgba(0,0,0,1);--wp--preset--shadow--crisp:6px 6px 0 rgba(0,0,0,1);--color-theme-primary:#ffc5c5;--color-theme-primary-dark:#e1a7a7;--color-theme-secondary:#ffeee2;--color-theme-secondary-dark:#e1d0c4;--color-theme-tertiary:#e9fbff;--color-theme-tertiary-dark:#cbdde1;--color-theme-foreground:#2d2d2d;--color-theme-background:#ffffff;--color-theme-light-1:#fff9c4;--color-theme-light-2:#efefef;--color-theme-light-3:#a0816a;--color-theme-dark-1:#717171;--color-theme-dark-2:#614d47;--color-theme-dark-3:#ffc106}
:root{--font-primary:'Poppins','Lato','helvetica neue',helvetica,arial,verdana;--font-primary-lineheight:150%;--font-primary-lineheight-small:130%;--font-primary-default:400;--font-primary-bold:700;--font-primary-small:14px;--font-primary-normal:16px;--font-primary-medium:17px;--font-primary-large:24px;--font-primary-extra:28px;--font-primary-xl:32px;--font-primary-xxl:48px;--font-primary-xxxl:60px;--font-primary-xxxxl:72px;--font-secondary:'Merriweather','Lora','serif',helvetica,arial,verdana;--font-secondary-lineheight:130%;--font-secondary-default:400;--font-secondary-bold:400;--font-secondary-small:14px;--font-secondary-normal:16px;--font-secondary-medium:18px;--font-secondary-large:26px;--font-secondary-extra:28px;--font-secondary-xl:30px;--font-secondary-xxl:38px;--font-secondary-xxxl:60px;--font-secondary-xxxxl:72px;--font-tertiary:monospace,Consolas,"courier new";--font-tertiary-lineheight:150%;--font-tertiary-normal:normal;--font-tertiary-default:bold}
*{box-sizing:border-box;margin:0;padding:0}
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}
/* HTML5 display-role reset for older browsers */
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}
html{display:block}
body{-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;font-family:'Lora',Lato,helvetica,arial,sans-serif;font-weight:400;line-height:1.5;font-size:50px;font-family:var(--font-primary);font-weight:var(--font-primary-default);line-height:var(--font-primary-lineheight);font-size:var(--font-primary-normal);color:var(--color-text);background:var(--color-bg);display:block;word-break:break-word}
ol,ul{list-style:none}
blockquote,q{quotes:none}
blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}
table{border-collapse:collapse;border-spacing:0}
/* FRAMEWORK */
strong,b{font-weight:bold}
cite,em,i{font-style:italic}
a:link{color:var(--color--vuiral);text-decoration:none;outline:none;transition:all 0.25s;-moz-transition:all 0.25s;-webkit-transition:all 0.25s}
a:visited{color:#1B699D;text-decoration:none}
a:hover{color:#4aa5ec;text-decoration:none}
a img{border:none;border-width:0;outline:none}
abbr,acronym{border-bottom:1px dotted;cursor:help}
sup,sub{vertical-align:baseline;position:relative;top:-.4em;font-size:86%}
sub{top:.4em}
small{font-size:86%}
kbd{font-size:80%;border:1px solid #999;padding:2px 5px;border-bottom-width:2px;border-radius:3px}
mark{background-color:#ffce00;color:black}
p,blockquote,pre,table,figure,hr,form,ol,ul,dl{margin:0 0 1em;line-height:1.7em}
p{padding: 0;margin: 3px 0;}
p:empty::before {content: "";display: block;padding: 10px;}
p.has-text-align-center{text-align:center}
p.has-text-align-right{text-align:right}
hr{height:1px;border:none;background-color:#666}

/* table */
figure.wp-block-table{overflow-x:auto;max-width:655px}
.post-body table{width:max-content;text-align:left;margin:10px 0 7px}
/*
figure.wp-block-table{width:auto;max-width:100%;overflow-x:scroll;overflow-y:hidden}
figure.wp-block-table:after{content:"*Silakan geser ke-samping untuk melihat tabel secara penuh";font-size:var(--font-secondary-small);text-wrap:nowrap}
.post-body table{width:max-content;text-align:left;margin:10px 0 7px}
*/
.post-body table tr:nth-child(even){background:var(--color--vuiral--tertiary)}
.post-body table th,.post-body table thead th,.post-body table tfoot td{color:var(--wp--preset--color--white);background:var(--color--vuiral--secondary);padding:7px 5px;border:1px solid var(--color--vuiral--secondary)}
.post-body table td{background:transparent;padding:2px 5px;border:1px solid var(--color--vuiral--secondary);font-size:100%}
.post-body table td,table th{}

/* list */
ol,ul,dl{margin:.5em 0 .5em 3em}
ol{list-style:decimal outside}
ul{list-style:disc outside}
li{margin:.5em 0}
dt{font-weight:bold}
dd{margin:0 0 .5em 2em}
.widget ul{margin:0;padding:0;list-style-type:none;line-height:1.2em}
.widget ul li{margin:0;padding:0;list-style-type:none;line-height:1.2em}
.widget ul li ul{margin:0;padding:0;list-style-type:none}
.widget ul li ul li{margin:0;padding:0;list-style-type:none}
.widget ol{margin:0;list-style-type:none;line-height:1.2em}
.widget ol li{margin:0;list-style-type:none;line-height:1.2em}
.widget ol li ol{margin:0;list-style-type:none}
.widget ol li ol li{margin:0;list-style-type:none}

/* list */
.post-body ol,.post-body ul,.post-body dl{margin:0 0 0 1.5em;padding:0px}
.post-body ol,.widget .blog-posts .post-body ol li,.widget .blog-posts .post-body ol li ol,.widget .blog-posts .post-body ol li ol li{list-style:decimal outside}
.post-body ul,.widget .blog-posts .post-body ul li,.widget .blog-posts .post-body ul li ul,.widget .blog-posts .post-body ul li ul li{list-style:disc outside}
.post-body li{margin:0;line-height:1.7em}
.post-body dt{font-weight:bold}
.post-body dd{margin:0 0 .5em 2em}

/* Kolom postingan */
.wp-block-columns-is-layout-flex{margin:5px 0 2px}
.wp-block-columns-is-layout-flex.wp-container-core-columns-layout-1{column-count:2;-moz-column-count:2;-webkit-column-count:2}
.wp-block-columns-is-layout-flex.wp-container-core-columns-layout-2{column-count:3;-moz-column-count:3;-webkit-column-count:3}

/* Tombol download postingan */
.is-content-justification-left{text-align:left}
.is-content-justification-center{text-align:center}
.is-content-justification-right{text-align:right}
.wp-block-buttons{display:block}
.wp-block-button{display:inline-block;margin:5px;padding:3px}
a.wp-block-button__link{background:var(--color--vuiral);color:var(--wp--preset--color--white);padding:5px 10px;border-radius:3px}

/* summary */
details.wp-block-details{border:1px solid var(--wp--preset--color--black);padding:3px;display:block}
details.wp-block-details summary{background:var(--wp--preset--color--black);color:var(--wp--preset--color--white);padding:4px;cursor:pointer}

/* code blockquote */
pre,code{font-family:Courier,Monospace;color:inherit}
pre{white-space:pre;word-wrap:normal;overflow:auto}
.post-body blockquote{background:var(--wp--preset--color--white);margin:7px 0;padding:0 10px 5px;border-left:7px solid var(--wp--preset--color--vivid-green-cyan);box-shadow:0 0 10px rgba(0,0,0,0.2)}
.post-body blockquote.tips{border-left:7px solid var(--wp--preset--color--vivid-cyan-blue)}
.post-body blockquote.warning{border-left:7px solid var(--wp--preset--color--luminous-vivid-amber)}
.post-body blockquote.danger{border-left:7px solid var(--color--vuiral)}
.post-body blockquote cite{font-size:90%}
.post-body blockquote p{padding:5px;margin:0}
.post-body blockquote a{}
.post-body blockquote a:hover,blockquote a:after{color:var(--color-link)!important}

/* code block */
pre{white-space:pre;word-wrap:break-word;overflow:auto;font-size:100%;margin:7px 0}
code{padding:2px;border-radius:5px;background:var(--color--vuiral);color:var(--wp--preset--color--black)}

/* form */
input,button,select,textarea{font:inherit;font-size:100%;line-height:normal;vertical-align:baseline}
textarea{display:block;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}
h1,h2,h3,h4,h5,h6{line-height:normal;padding:5px;margin:1em 0 0.5em 0}
h1{font-size:28px}
h2{font-size:24px}
h3{font-size:22px}
h4{font-size:20px}
h5{font-size:18px}
h6{font-size:16px}
#outer-wrapper{margin:0 auto;display:block}
#wrapper{max-width:1000px;width:calc(100% - 10px);margin:0 auto;padding:0;position:relative;grid-template-columns:1fr;display:grid;grid-gap:5px}
#content-wrapper,#side-wrapper{padding:0;margin:60px 0 0 0;background:var(--color-surface);color:var(--color-text);border-radius:10px;box-shadow:0 3px 12px rgba(0,0,0,0.08);transition:background 0.3s 
ease,color 0.3s 
ease}
#side-wrapper .side-content{width:100%;position:sticky;top:55px}
#side-wrapper .side-content img{width:100%;max-width:250px;margin:0 auto;display:block}
#nav-wrapper{width:100%;padding:0;margin:0}
#head-wrapper{width:100%;padding:0;margin:0 0 10px 0}
#adv-wrapper{margin:10px;padding:10px;min-height:200px}
#main-wrapper{width:100%;padding:0;margin:10px auto;display:block}
#footer-wrapper{display:block;margin:0;padding:15px 10px 125px;background:var(--wp--preset--color--black);color:var(--wp--preset--color--white);clear:both;min-height:35px}
#footer-bottom-wrapper{width:100%;padding:10px 0 20px;margin:0 0 0 0;background:#000!important;color:var(--wp--preset--color--white)!important}
#nav-wrapper,#head-wrapper,#main-wrapper,#sidebar-wrapper,#footer-wrapper,#footer-wrapper-1,#footer-wrapper-2,#footer-bottom-wrapper{position:relative;z-index:1}
.nav{padding:0;margin:0}
.head {
    display: block;
    max-height: 60px;
    max-width: 240px;
    text-align: center;
    margin: 5px 5px;
}
.main{padding:5px;margin:0}
main.container{display:block;padding:0}
main.container section,main.container .widget{display:block;padding:10px 0 20px;margin:20px 0;clear:both;border-bottom:2px solid var(--color--vuiral)}
.footer{margin:0;padding:0;display:inline-table}
.footer_bottom{margin:0;padding:0}
.clear{clear:both}
/* footer-navmenu-wrapper */
.footer-navmenu-wrapper div{display:block;width:calc(100% - 10px);margin:10px}
.footer-navmenu-wrapper .foot-page{display:block;margin:0}
.footer-navmenu-wrapper .foot-page li{display:block;list-style-type:none;margin:0}
.footer-navmenu-wrapper .foot-page li a{display:inline-block;text-decoration:none;padding:3px 1px;color:var(--wp--preset--color--luminous-vivid-orange)}
.atributorfoot a:link,.atributorfoot a:visited{color:var(--color--vuiral)}
/* Start - CSS Global - tampil di arsip,index,postingan */

/* header */
.head #header {
    display: block;
    max-height: 80px;
    max-width: 260px;
    text-align: center
}

.head #header img {
    width: 100%;
    max-width: 260px;
    height: auto
}

.head #header h1,.head #header h2 {
    padding: 0;
    margin: 0
}

.head #header h1 a,.head #header h2 a {
    height: 35px;
    display: block;
    color: var(--wp--preset--color--black);
    font-size: var(--font-primary-xl);
    font-family: var(--font-secondary)
}

/* Navigation Menu Desktop */
.navmenu {
    position: fixed;
    z-index: 999;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    margin: 0 auto;
    max-height: 55px;
    background: var(--color--vuiral--tertiary);
    color: var(--color-text);
    box-shadow: 0 3px 12px rgba(0,0,0,0.2);
    transition: background 0.3s ease,color 0.3s ease;
    border-bottom: 3px solid var(--color--vuiral)
}

.navmenu .button {
    display: none
}

.navmenu .desktop {
    position: relative;
    top: -48px;
    left: 240px;
    right: 0;
    width: calc(100% - 302px);
    max-width: 800px;
    transition: background 2s ease,color 0.3s ease
}

.navmenu .desktop ul.menu {
    list-style: none;
    display: flex;
    flex-flow: wrap;
    justify-content: flex-start;
    margin: 0 auto
}

.navmenu .desktop ul.menu li {
    margin: 0;
    padding: 0;
    background: var(--color--vuiral--tertiary)
}

.navmenu .desktop ul.menu li a {
    padding: 5px 20px;
    display: block;
    color: var(--color--vuiral)
}

.navmenu .desktop > ul.menu > li.submenu > a:after {
    display: block;
    position: relative;
    left: 7px;
    top: 7px;
    float: right;
    content: " ";
    width: 7px;
    height: 7px;
    margin: 0 0 0 0;
    border-right: 1px solid var(--wp--preset--color--black);
    border-bottom: 1px solid var(--wp--preset--color--black);
    transform: rotate(45deg)
}

.navmenu .desktop > ul.menu > li:hover > a,.navmenu .desktop ul.menu > li > ul.sub-menu > li:hover > a {
    text-decoration: underline
}

.navmenu .desktop ul.menu li ul.sub-menu {
    display: none;
    list-style: none;
    margin: 0;
    background: var(--wp--preset--color--white);
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.2);
    z-index: 999
}

.navmenu .desktop ul.menu li.submenu:hover ul.sub-menu {
    display: block;
    position: absolute
}

.navmenu .search-trigger svg {
    fill: var(--color--vuiral)
}

.navmenu .close-search-nav svg path {
    fill: var(--color--vuiral);
    stroke: var(--color--vuiral)
}

.navmenu .search-trigger {
    position: fixed;
    top: 0;
    right: 0;
    padding: 15px 10px;
    width: 50px;
    height: 52px;
    cursor: pointer
}

.navmenu .search-nav {
    display: none;
    overflow: hidden;
    position: fixed;
    top: 5px;
    width: 100%;
    padding: 0 10px
}

.navmenu .search-nav.actived {
    display: block
}

.navmenu .search-nav .search-form {
    right: 55px;
    left: 250px;
    position: fixed;
    width: calc(100% - 300px);
    background: var(--color-surface)
}

.navmenu .close-search-nav {
    position: fixed;
    top: 0;
    right: 0;
    padding: 15px 12px;
    width: 50px;
    height: 52px;
    cursor: pointer;
    background: var(--color-surface)
}



/* Float Ads */
#float_ads{display:block;position:fixed;width:calc(100% - 12px);max-width:998px;height:100px;margin:0 auto;max-height:100px;bottom:0;right:0;left:0;z-index:9999;-webkit-transition:all 1s ease-out;transition:all 1s ease-out;border:1px solid var(--wp--preset--color--black);background:var(--wp--preset--color--white)}
#float_ads .bg_button{background:var(--wp--preset--color--white);padding:5px 10px 0;display:inline-block;border-radius:10px 10px 0 0;margin:0 0 -6px 0;right:-1px;top:-30px;position:absolute;cursor:pointer;border:1px solid var(--wp--preset--color--black);border-bottom:none}
#float_ads .float_button{content:" ";margin-bottom:7px;right:20px;width:15px;height:15px;border-right:2px solid var(--wp--preset--color--black);border-bottom:2px solid var(--wp--preset--color--black);transform:rotate(45deg);-webkit-transition:all 1s ease-out;transition:all 1s ease-out}
#float_ads .float_button.close{content:" ";transform:rotate(-135deg);margin:7px 0 0}
/* #float_ads .in_float_ads{padding:0 0 5px;max-width:1300px;margin:0 auto;display:block;height:100px!important;position:relative}
*/
#float_ads .in_float_ads.close{display:none}
#float_ads.close{bottom:-90px}
#float_ads .in_float_ads{padding:0 0 5px;max-width:1300px;margin:0 auto;display:block;height:100px!important;position:relative}
/* Iklan Side OR Below Post */
#wrapper-iklan-banner{padding:10px 0;grid-template-columns:1fr;display:grid;grid-gap:10px}
/* End - CSS Global - tampil di arsip,index,postingan */

/* Page navigation number */
.navigation{display:flex;justify-content:center;align-items:center;gap:10px;margin:0 5px;border-top:1px solid var(--color--vuiral);border-bottom:1px solid var(--color--vuiral);background:var(--color--vuiral)}
.navigation ul{display:inline;overflow:hidden;margin:2px auto}
.navigation li a,.navigation li a:hover,.navigation li.active a,.navigation li.disabled{color:var(--color--vuiral);text-decoration:none}
.navigation li{display:table-cell;background:var(--wp--preset--color--white)}
.navigation li a,.navigation li a:hover,.navigation li.active a,.navigation li.disabled{cursor:pointer;padding:0 8px;border:2px solid var(--wp--preset--color--white);display:flex;min-width:15px;justify-content:center;align-items:center}
.navigation li a:hover,.navigation li.active a{background-color:var(--color--vuiral);color:var(--wp--preset--color--white)}

/* Homepage */
.entry {
    padding: 5px 2px;
    grid-template-columns: 1fr 1fr 1fr;
    display: grid;
    grid-gap: 5px
}

.post-body.hfeed {
    display: block;
    padding: 5px 5px 10px;
    margin: 2px;
    background: var(--color-surface);
    border: 2px solid var(--color--vuiral--secondary);
    box-shadow: 3px 3px 5px 0px var(--color--vuiral--secondary);
}

.post-body.hfeed article {
    grid-template-columns: 1fr;
    display: grid;
    grid-gap: 10px;
}

.post-body.hfeed article .post-date {
    margin: 0 5px
}

.post-body.hfeed article .post-label,.post-body.hfeed article .post-date {
    width: 100%;
    color: var(--color-text);
    font-size: var(--font-secondary-small)
}

.post-body.hfeed article .post-label svg,.singular_page .post-category svg {
    width: 20px;
    margin: 5px 2px -5px 5px
}

.post-body.hfeed article .post-label span svg path,.singular_page .post-category span svg path {
    fill: var(--color--vuiral)
}

.post-body.hfeed article .post-label span a,.singular_page .post-category span a {
    color: var(--color--vuiral)
}

.post-body.hfeed article .thumbnail-post a img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover
}

.post-body.hfeed article .thumbnail-post {
    width: calc(100% - 10px);
    height: 180px;
    margin: 0 auto;
    overflow: hidden;
    display: block;
    border: 1px solid var(--color--vuiral--secondary);
    box-shadow: 5px 5px 0 var(--color--vuiral);
}

.post-body.hfeed article h2.post-title.entry-title {
    text-align: justify;
    padding: 0;
    margin: 5px;
    font-family: var(--font-primary);
    font-weight: var(--font-tertiary-default);
    line-height: var(--wp--preset--spacing--50);
    font-size: var(--font-secondary-normal);
}

.post-body.hfeed article h2.post-title.entry-title a {
    color: var(--color-text)
}

.post-body.hfeed:hover article .thumbnail-post a img {
    filter: brightness(50%)
}

.post-body.hfeed article .wrapper-content {
    display: flex;
    align-items: baseline;
    justify-content: left;
    align-content: flex-start;
    flex-wrap: wrap
}

.post-body.hfeed article .date-post {
    display: inline-block;
    background: var(--wp--preset--color--white);
    padding: 5px 10px;
    margin: -18px auto 0;
    font-size: var(--font-secondary-small)
}

.widget-title {
    font-size: var(--wp--preset--font-size--medium);
    line-height: 1.5em;
    text-align: center;
    padding: 2px 10px;
    margin: 10px 5px;
    display: block;
    color: var(--wp--preset--color--white);
    background: var(--color--vuiral--secondary);
    border-bottom: 2px solid var(--color--vuiral);
    box-shadow: 3px 3px 3px rgb(245 0 87 / 10%)
}

/*landing page */
.widget-landing {display: grid;grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));gap: 12px;}
.widget.info-landing .widget-title {font-size: var(--font-primary-large);border: none;background: none;color: var(--color-text);box-shadow: none;}
main.container .widget.info-landing {border: 2px solid var(--color-border);box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);margin: 0;}
.widget.info-landing .widget-title svg {width: 25px;display: inline-block;margin: 0 0 -5px 0;}
.info-content {text-align: justify;margin: 10px;}
.info-landing-icon svg {width: 40px;display: inline-block;margin: 0 7px -10px 0;}
.info-landing-icon div {display: inline-block;font-size: var(--font-primary-large);}
.info-landing-icon {display: inline-block;margin: 0 auto;padding: 10px 15px;border: 1px solid;}
.landing-menu {padding: 5px 2px;grid-gap: 10px;display: flex;justify-content: space-between;}
.info-content .wp-block-button{display: block;text-align: center;}
.info-content a{color: var(--color-surface);}
.info-content ul {list-style: square;}
.info-content ul li { list-style: square;margin: 4px 0 0 20px;line-height: 1.5em;}


/* Search Custom */
#top-search-box{}
.search-form{margin:0;list-style:none;padding:5px 0;overflow:hidden;display:block}
.search-form input{width:calc(100% - 40px);border:2px solid var(--color--vuiral);padding:6px;font-size:100%;-webkit-box-orient:vertical;-webkit-line-clamp:2;display:-webkit-box;float:left}
.search-form button.search-submit{border:none;outline:none;cursor:pointer;background:var(--color--vuiral);padding:6px;height:35px;float:right}
button.search-submit svg{width:24px;height:24px;fill:var(--wp--preset--color--white)}
#top-search-box .search-option{margin:0;list-style:none;border-radius:5px;padding:15px 5px;display:grid;align-items:center;gap:7px;grid-template-columns:1fr 1fr;clear:both}
#top-search-box .search-option > div{width:100%}
#top-search-box .search-option select{border:1px solid var(--wp--preset--color--black);padding:4px;font-size:100%;margin:2px 0}
#top-search-box .result{text-align:center;padding:10px;font-size:110%;line-height:1.5em}

/* Search Page */
#global-search-wrap{}
.gs-input{width:calc(100% - 40px);border:2px solid var(--color--vuiral);padding:6px;color: var(--color--vuiral);font-size:100%;-webkit-box-orient:vertical;-webkit-line-clamp:2;display:-webkit-box;float:left}
.gs-row{display:block;margin:10px;overflow:hidden}
.gs-row2{display:grid;gap:5px;grid-template-columns:2fr 1fr 1fr;margin:10px;overflow:hidden}
.gs-row2 .gs-input{width:100%}
#taxonomy-suggestions, #suggestionBox{position:absolute;margin-top:40px;z-index:50;max-height:220px;overflow:auto;background:var(--color-theme-tertiary);border:2px solid var(--color--vuiral);display:none}
.suggestion{padding:8px;cursor:pointer;border-radius:6px}
.suggestion:hover{background:#f4f4f4}
#selected-tags, #selectedTags{display:flex;flex-wrap:wrap;gap:8px;margin:10px}
.tag{background:var(--color-theme-tertiary);color:var(--wp--preset--color--vivid-cyan-blue);padding:6px 8px;border-radius:8px;display:flex;gap:4px;align-items:center;font-size:var(--font-secondary-small)}
.tag button{border:0;height:20px;width:20px;border-radius:100%;background:var(--color--vuiral);font-weight:700;color:var(--wp--preset--color--white);cursor:pointer}
.gs-select,.gs-mode{width:100%;padding:5px 8px;margin:0;border-radius:0;border:2px solid var(--color--vuiral);background: var(--wp--preset--color--white);color: var(--color--vuiral);float:left}
button.search-submit{border:none;outline:none;cursor:pointer;background:var(--color--vuiral);padding:5px;height:35px;float:right}
details.tips-pencarian{font-size:var(--font-primary-small);background:var(--color--vuiral--secondary);color:var(--color--vuiral--tertiary);padding:5px 10px;margin:5px 0}
details.tips-pencarian summary:hover{cursor:pointer}
details.tips-pencarian ol, details.tips-pencarian ul{margin:0 0 0 1.5rem;padding:0}
details.tips-pencarian ol li, details.tips-pencarian ul li{margin:0}
p.total-post{display:flex;justify-content:center;align-items:center;gap:10px;margin:5px 0;padding:5px 10px;background:var(--color--vuiral);color:var(--color--vuiral--tertiary);font-size:var(--font-primary-medium);font-weight:700}

/* Post Slide - Start */
.slider_post{display:block;position:relative;padding:10px 0;margin:50px auto 50px;border-top:1px solid var(--wp--preset--color--black);border-bottom:1px solid var(--wp--preset--color--black)}
.slider{padding:5px 5px;grid-template-columns:1fr 1fr;display:grid;grid-gap:10px}
.slider img{width:100px;height:100px;object-fit:cover;display:block}
.slider-item{margin:0;list-style:none;display:flex;grid-template-rows:min-content;padding:5px;border:1px solid var(--wp--preset--color--black);border-radius:5px}
.slider-item.order:nth-child(1){order:2}
.slider-item.order:nth-child(10){order:1}
.slider-item,.hidden{display:none}
.slider-item.active{display:flex;animation:fadeAnimation 0.5s}
.slider-btns{position:absolute;padding:0;margin:0 auto;display:flex;justify-content:space-between;top:34px;right:0;left:0;transform:translateY(-50%);width:auto}
.slider-btns button{font-size:30px;font-weight:500;background-color:var(--wp--preset--color--white);border:1px solid var(--wp--preset--color--black);border-radius:5px;color:var(--wp--preset--color--black);width:30px;height:30px;line-height:30px;cursor:pointer}
.slider-btns #btn-prev:before,.slider-btns #btn-next:before{position:relative;left:7px;top:-2px;content:" ";width:7px;height:7px;float:left;margin:3px 5px 0 0;border-right:3px solid var(--wp--preset--color--black);border-bottom:3px solid var(--wp--preset--color--black);transform:rotate(-45deg)}
.slider-btns #btn-prev:before{transform:rotate(135deg);left:11px}
.slider:hover .slider-btns{visibility:visible}
@keyframes fadeAnimation{0%{opacity:0}100%{opacity:1;transition:opacity linear}}
.dots{background-color:var(--wp--preset--color--white);border:1px solid var(--wp--preset--color--black);border-radius:5px;width:calc(100% - 70px);margin:0 auto 5px;height:28px;position:relative;bottom:0;display:flex;justify-content:center;align-items:center;gap:5px}
.dot{width:12px;height:10px;background-color:var(--wp--preset--color--white);border:1px solid var(--wp--preset--color--black);border-radius:3px;cursor:pointer}
.dot-active{background-color:var(--wp--preset--color--black)}
.slider-item .thumbnail-post{width:100px;height:100px;overflow:hidden;display:flex}
.slider-item h2.post-title.entry-title{margin:0 10px;padding:0;text-align:left;font-size:var(--font-secondary-medium);display:flex;width:70%}
.slider-item h2.post-title.entry-title a{}
/* Post Slide - End */

/* archive & Categories */
.widget ul.wp-block-categories-list,.widget ul.wp-block-archives-list{padding:5px 2px;grid-template-columns:1fr 1fr;display:grid;grid-gap:5px;overflow:auto;max-height:200px}
.widget ul.wp-block-categories-list li,.widget ul.wp-block-archives-list li{padding:5px 10px}
/* archive & Categories end */

/* Related Post */
.widget .related-post-content{list-style-type:square;margin:10px}
.widget .related-post-content li{list-style-type:square;color:var(--color--vuiral);margin:5px 15px}
/* Related Post End */

/* Start - Singular Page:single post alias dalam postingan dan page */
.post-body{display:block;clear:both}
article.singular_page h1.entry-title{text-align:center;margin:20px 0;display:block;overflow:hidden;clear:both;border-bottom:5px solid var(--color--vuiral)}
article.singular_page h2,article.singular_page h3,article.singular_page h4,article.singular_page h5,article.singular_page h6{border-left:5px solid var(--color--vuiral)}
.post-body article.singular_page{line-height:1.5em;text-align:justify;padding:5px;margin:0}
/* image and embed video post */
.post-body article.singular_page img{display:block;width:100%;height:auto;object-fit:cover}
.post-body article.singular_page .thumbnail-single-post img{display:block;margin:0 auto!important;max-width:100%;}
.post-body article.singular_page .wp-block-image figure,figure.wp-block-embed,.post-body article.singular_page figure.wp-block-gallery figure{border:1px solid var(--color--vuiral);box-shadow: 5px 5px 0 var(--color--vuiral);display:block;margin:10px}
.post-body article.singular_page .wp-block-image figure.aligncenter,figure.wp-block-embed.aligncenter{display:table;margin:10px auto}
.post-body article.singular_page .wp-block-image figure img,figure.wp-block-embed.aligncenter iframe{max-width:100%;height:auto;margin:0 auto!important;padding:5px;display:block}
figure.wp-block-embed.aligncenter iframe{height:revert-layer}
.post-body article.singular_page .wp-block-image figure figcaption,figure.wp-block-embed figcaption{padding:7px 10px;font-size:90%;text-align:center;border-top:1px solid var(--color--vuiral)}
.post-body article.singular_page figure.wp-block-gallery{margin:0;padding:5px;grid-template-columns:1fr 1fr 1fr;display:grid;grid-gap:5px}
.post-body article.singular_page figure.wp-block-gallery figure{margin:0;padding:5px}
.post-body article.singular_page figure.wp-block-gallery figcaption{font-size:var(--font-primary-small);line-height:1rem}

/* Breadcrumbs */
body .post-body .breadcrumbs{text-align:left;margin:10px auto;padding:4px 12px;background:var(--color--vuiral--secondary);color:var(--wp--preset--color--white)}
body .post-body .breadcrumbs a{display:inline-block;text-decoration:none;transition:all .3s ease-in-out;color:var(--wp--preset--color--white);font-weight:400;margin:0!important}
body .post-body .breadcrumbs a:hover{color:var(--color-link-hover)}
body .post-body .breadcrumbs svg{display:inline-block;width:16px;height:16px;vertical-align:-3px}
body .post-body .breadcrumbs svg path{fill:var(--wp--preset--color--white)}

/* TOC Article */
#toc-container{display:block;overflow:hidden;clear:both;margin:10px 0;padding:3px;border:1px solid var(--color--vuiral)}
#btn_toc{color:var(--wp--preset--color--white);background:var(--color--vuiral--secondary);padding:5px 7px;cursor:pointer}
#btn_toc:after{content:" ";width:7px;height:7px;float:right;margin:5px 5px 0 0;border-right:2px solid #ffffff;border-bottom:2px solid #ffffff;transform:rotate(45deg);-webkit-transition:all 2s ease-out;transition:all .2s ease-out}
#btn_toc.active:after{content:" ";float:right;transform:rotate(-45deg);margin:7px 5px 0 0}
#toc{max-height:0;display:block;overflow-y:auto;-webkit-transition:all 2s ease-out;transition:all .2s ease-out;font-size:90%}
#toc.displaytoc{max-height:200px}
#toc ol{margin:0 0 0 1.5em;list-style:none}
#toc ol li{margin:0 0.5em 0 0;list-style:square;color:var(--color--vuiral)}
#toc ol li a{}

/* share button */
.share-page{display:-webkit-box;display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex;flex-wrap:nowrap;align-items:center;position:relative;bottom:0;clear:both;justify-content:center}
.share-page svg,button svg{width:17px;height:17px;vertical-align:-4px}
.share-page svg path{fill:var(--wp--preset--color--black)}
.share-page a,.share button{width:40px;margin:2px 3px;padding:5px 0;text-align:center;box-shadow:none;border:1px solid var(--color--vuiral);box-shadow: 3px 3px 0 var(--color--vuiral);}
.share-page a:hover{background: var(--color--vuiral--secondary)}
.share-page a:hover svg path{fill:var(--wp--preset--color--white)}
.share-page a.telegram svg path{fill:var(--wp--preset--color--vivid-cyan-blue)}
.share-page a.whatsapp svg path{fill:var(--wp--preset--color--vivid-green-cyan)}
.share-page a.facebook svg path{fill:var(--wp--preset--color--vivid-cyan-blue)}
.share-page a.twitter svg path{fill:var(--wp--preset--color--pale-cyan-blue)}
.share-page a.pinterest svg path{fill:var(--color--vuiral)}
.share-page a.linkedin svg path{fill:var(--wp--preset--color--vivid-cyan-blue)}

/* Post Category Under Post*/
.post-category{display:block;overflow:hidden;font-size:100%;padding:10px 0;margin:10px 0;line-height:1.5em;border-bottom: 2px solid var(--color--vuiral);}

/* Post Navigation */
.post-navigation{padding:20px 0;border-top:2px solid var(--color-theme-secondary);border-bottom:2px solid var(--color-theme-secondary)}
.post-navigation .nav-links{display:flex;justify-content:space-between;gap:20px}
.post-navigation .nav-previous, .post-navigation .nav-next{width:100%;margin:10px 0 0 0;}
.post-navigation .nav-previous{text-align:left}
.post-navigation .nav-next{text-align:right}
.post-navigation .nav-label{font-size:14px;color:var(--color-theme-foreground)}
.post-navigation .nav-title{font-size:18px;font-weight:bold;color:var(--color--vuiral)}
.post-navigation .nav-title:hover{text-decoration:underline}

/* Related Post */
body .related-post{margin:20px auto}
body .related-post p{text-align:center}
body .related-post > div{;margin:0 10px}
body .related-post div{line-height:1.5em;-webkit-box-orient:vertical;display:-webkit-box}
body .related-post div.link{overflow:hidden}
body .related-post .title-related-post{margin:0}
body .related-post .related-post-content{margin:0;padding:10px;grid-template-columns:1fr 1fr;display:grid;grid-gap:5px}
body .related-post .related-post-content li{margin:0;list-style:none;padding:10px 15px;display:flex;align-items:center;text-align:left;gap:7px;border:1px solid var(--color--vuiral)}
body .related-post .related-post-content li svg{width:20px;height:20px;fill:var(--color--vuiral)}
body .related-post .related-post-content li a{font-weight:400;line-height:1.4em;margin:0;position:relative;text-decoration:none;font-family:'Inter','Poppins',sans-serif;color:var(--color--vuiral)}
body .related-post .related-post-content li a:hover{text-decoration:underline}

/*#ad_script2{min-height:200px}*/

/* End - single post alias dalam postingan dan page */
@media screen and (max-width:840px){
    #wrapper{margin:0 auto;display:block}#side-wrapper{padding:10px}
    /*#side-wrapper{display:none;position:fixed;width:calc(100% - 32px);max-width:800px;height:100px;margin:0 auto;padding:10px;max-height:70px;bottom:0;right:0;left:0;z-index:9999;-webkit-transition:all 1s ease-out;transition:all 1s ease-out;border:1px solid var(--wp--preset--color--black);background:var(--wp--preset--color--white)}*/
    .float-prlx1{clip-path:inset(0 0 0 0);height:100%;position:absolute;overflow:hidden;width:100%;margin:0 auto}
    .float-prlx2{align-items:flex-start;display:inline-flex;justify-content:center;position:fixed}
    /* Iklan Side OR Below Post */#wrapper-iklan-banner{grid-template-columns:1fr 1fr}}
/* end 840px */
@media screen and (max-width:640px){

/*#float_ads{display:none*}*/
#adv-wrapper{min-height:250px}#ad_script2{min-height:250px}
        
 /* Navigation Menu Mobile */
    .navmenu {
    }

    .navmenu .button {
        display: block;
        position: fixed;
        top: 0;
        margin: 0;
        padding: 15px 8px;
        width: 50px;
        height: 55px;
        cursor: pointer
    }

    .navmenu .button .navigation-icon {
        margin: 5px
    }

    .navmenu .button .navigation-icon svg path {
        margin: 0 0 -3px 0;
        fill: var(--color--vuiral);
        stroke: var(--color--vuiral)
    }

    .navmenu .menu-navigasi-container {
        display: none
    }

    .navmenu .menu-navigasi-container.actived {
        display: block
    }

    .navmenu .mobile {
        position: fixed;
        top: 55px;
        left: 0;
        width: calc(100% - 2px);
        margin: 0 auto;
        overflow-y: auto;
        overflow-x: hidden;
        height: -webkit-fill-available;
        z-index: 99
    }

    .navmenu .mobile ul.menu {
        display: block
    }

    .navmenu .mobile ul.menu li {
        background: var(--color--vuiral--tertiary);
        border-top: 1px solid transparent;
        border-bottom: 1px solid rgba(0,0,0,0.1)
    }

    .navmenu .mobile ul.menu li.submenu a.actived {
        text-decoration: underline
    }

    .navmenu .mobile ul.menu li.submenu ul.sub-menu {
        box-shadow: none
    }

    .navmenu .mobile ul.menu li.submenu:hover ul.sub-menu {
        display: none;
        position: relative
    }

    .navmenu .mobile ul.menu li.submenu ul.sub-menu.actived {
        display: block
    }

    .navmenu .mobile ul.menu li.submenu ul.sub-menu.actived li {
        background: var(--color-theme-tertiary)
    }

    .navmenu .search-nav .search-form {
        left: 5px;
        width: calc(100% - 55px)
    }

    .head {
        margin: 5px auto;
    }
    .entry,.slider{grid-template-columns:1fr}
    .slider-item .post-title{font-size:var(--font-secondary-normal)}
    #top-search-box .search-option{grid-template-columns:1fr}
    .widget ul.wp-block-categories-list,.widget ul.wp-block-archives-list{grid-template-columns:1fr}
    body .related-post .related-post-content{grid-template-columns:1fr}
    body > .post-body figure.wp-block-gallery{grid-template-columns:1fr}
    .wp-block-columns-is-layout-flex.wp-container-core-columns-layout-1{column-count:1;-moz-column-count:1;-webkit-column-count:1}
    .wp-block-columns-is-layout-flex.wp-container-core-columns-layout-2{column-count:2;-moz-column-count:2;-webkit-column-count:2}
    .post-navigation .nav-links{display:block;}
    }

/* end 640px */
@media screen and (max-width:480px){
    .gs-row2{grid-template-columns: 1fr;}
    .post-body.hfeed article .thumbnail-post{height: 120px;}
    .post-body article.singular_page figure.wp-block-gallery{grid-template-columns:1fr 1fr}
    .wp-block-columns-is-layout-flex.wp-container-core-columns-layout-2{column-count:1;-moz-column-count:1;-webkit-column-count:1}
}
/* end 480px */

@media screen and (max-width:380px){
    /* Iklan Side OR Below Post */
    #wrapper-iklan-banner{grid-template-columns:1fr}
    .post-body.hfeed article h2.post-title.entry-title{font-size: var(--font-primary-normal);line-height: normal;}
}
/* end 380px */