@import url("https://fonts.googleapis.com/css?family=Open+Sans:400,600,400italic,600italic|Roboto+Slab:400,700");

        :root {
            --sidebar-width: 340px;
            --btn-margin-top: 10px;
            --btn-margin-left: 10px;
            --btn-width: 40px; 
            --default-padding: 50px; 
        }
        
        html { overflow-x: hidden; height: 100%; }
        body { display: flex; margin: 0; overflow-x: hidden !important; min-height: 100vh; position: relative; 
		font-family: "Open Sans", sans-serif;
		font-size: 18px;
		}
		h1,h2,h3,h3,h5 {
		font-family: "Roboto Slab", serif;
		}
        
        #menu-toggle-btn { 
            position: fixed; top: var(--btn-margin-top); 
            left: var(--btn-margin-left); 
            width: var(--btn-width);
            z-index: 1030;
            transition: left 0.3s ease; 
        }
		
        body.menu-open #menu-toggle-btn {
            left: calc(var(--sidebar-width) + var(--btn-margin-left)); 
        }
        #sidebar-menu {
            position: absolute; top: 0; bottom: 0;
            left: calc(var(--sidebar-width) * -1);
            width: var(--sidebar-width); background-color: #f8f9fa;
            padding-top: var(--btn-margin-top); padding-left: var(--btn-margin-left); padding-right: var(--btn-margin-left);
            overflow-y: auto; transition: left 0.3s ease; 
            z-index: 1020; 
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none;
        }
        
        body.menu-open #sidebar-menu {
            left: 0; 
        }
        
        
        body:not(.menu-open) #content-wrapper {
             padding-left: calc(var(--btn-width) + var(--btn-margin-left) + 10px);
        }

        body.menu-open #content-wrapper {
            padding-left: var(--default-padding); 
        }
        
        /* Mobile: Backdrop Overlay */
        #content-wrapper::before {
            content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0;
            background: rgba(0, 0, 0, 0.5); visibility: hidden; opacity: 0;
            transition: opacity 0.3s ease, visibility 0.3s ease;
            z-index: 1010; 
        }
        
        body.menu-open #content-wrapper::before {
            visibility: visible; opacity: 1;
        }
        #sidebar-menu h5.mb-3 {
            margin-top: 0 !important; margin-bottom: 0.5rem !important;
        }
		
		btn-trans {background-color: inherit;}
		
		

		/* desktop */
        @media (min-width: 992px) {
            
            body.menu-open #content-wrapper {
                margin-left: var(--sidebar-width);
                padding-left: var(--default-padding); 
            }
            .mse {padding-left: 20px;}
            body:not(.menu-open) #content-wrapper {
                padding-left: var(--default-padding); 
            }
            
            #content-wrapper::before {
                display: none !important;
            }
			.col-md-6.col-lg-4.p-3.small {
  border-right: 1px solid #dee2e6;
  border-bottom: 1px solid #dee2e6;
}

.col-md-6.col-lg-4.p-3.small:nth-child(3n) {
  border-right: none;
}
            
			.mobile {display:none;}
			
            #sidebar-menu { z-index: 10; }
            #menu-toggle-btn { z-index: 1000; }
			
        #content-wrapper {
            flex-grow: 1; min-height: 100vh; 
            padding: 15px; 
            transition: margin-left 0.3s ease, padding-left 0.3s ease;
            margin-left: 0; 
            position: relative; 
        }
        }
        
		/* mobile */
        @media (max-width: 400px) {
			.desktop {display:none;}
			
        #content-wrapper {
            flex-grow: 1; min-height: 100vh; 
            padding: 20px; 
            transition: margin-left 0.3s ease, padding-left 0.3s ease;
            margin-left: -40px; 
            position: relative; 
        }
		.img-post {
width: 100%;
height: 220px;
object-fit:cover;
}

            
		}
		
		
		
		/* custom */		
		
		#sidebar-container {
    position: fixed;
    top: 0;
    bottom: 0;
    left: calc(var(--sidebar-width) * -1);
    width: var(--sidebar-width);
    transition: left 0.3s ease;
    z-index: 1020;
    height: 100vh;
}

body.menu-open #sidebar-container {
    left: 0;
}

#sidebar-menu {
    position: absolute;
    top: 0;
    bottom: 0;
    width: var(--sidebar-width);
    background-color: #f8f9fa;
    padding-top: var(--btn-margin-top);
    padding-left: var(--btn-margin-left);
    padding-right: var(--btn-margin-left);
    overflow-y: auto; 
    height: 100%;
    box-sizing: border-box;
}


		a {color: #f56a6a !important;}
		a:hover {color:  #9c4848;}
		a.btn-pink, .btn-pink {
			background-color: #f56a6a !important;
			color: white !important;
		}
        		a.btn-pink:hover, .btn-pink:hover {
			background-color: #ec7c7c !important;
			color: white !important;
		}
		.bg-pink {
			background-color: #f56a6a !important;
			color: white;
		}
		.text-pink { color: #f56a6a !important;}
		.bgb-pink {border-bottom: solid 3px  #f56a6a !important;}
		.bgb-pinks {border-bottom: solid 5px  #f56a6a !important;}
		.btn-pink:hover {
			background-color: #f98787 ;
			color: white;
		}
		a.btn-outline-pink, .btn-outline-pink {
			border: 2px solid #f56a6a;
		}
		.btn-outline-pink:hover, a.btn-outline-pink:hover{
			background-color: #f7e6e6;
			border: 2px solid #f56a6a;
		}
.wajik-wrapper {
    width: 140px;
    height: 140px;
    background-color: #adb5bd;
    clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
    
    display: flex;
    justify-content: center;
    align-items: center;
}

.wajik-isi {
    width: 138px; 
    height: 138px; 
    
    background-color: white; 
    
    clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
    
    color: black;
    text-align: center;
    
    padding: 1.5rem; 
    
    display: flex;
    justify-content: center;
    align-items: center;
}

.small {font-size: 16px;}
.smaller,.smalls {font-size: 14px;}
.smallers {font-size: 12px;}

.img-zoom-container {
    width: 100%;
    height: 300px; 
	margin-bottom: 25px;
    overflow: hidden; 
}

.img-post {
    width: 100%;
    height: 100%; 
    object-fit: cover;
    transition: transform 0.3s ease-in-out;
}

.img-zoom-container:hover .img-post {
    transform: scale(1.1);
}

.hero-title {font-size: 5vw;}
.hero-post-title{font-size: 3vw;}

.trans { background-color: inherit;
border:none;
color:  #f56a6a;}


.col-md-6.col-lg-4.p-3.small {
  border-right: 1px solid #dee2e6;
  border-bottom: 1px solid #dee2e6;
}
.col-md-6.col-lg-4.p-3.small:nth-child(3n) {
  border-right: none;
}

@media (min-width: 992px) { 
  .col-md-6.col-lg-4.p-3.small:nth-child(n + 4) {
    border-bottom: none;
  }
  .img-post {
width: 100%;
height: 520px;
object-fit:cover;
background-position: center; 
background-repeat: no-repeat; 
}

}
@media (min-width: 768px) and (max-width: 991.98px) {
    
			.mobile {display:none;}
  .col-md-6.col-lg-4.p-3.small:nth-child(2n) {
    border-right: none;
  }
  .col-md-6.col-lg-4.p-3.small:nth-child(n + 3) {
    border-bottom: none;
  }  .img-post {
width: 100%;
height: 400px;
object-fit:cover;
background-position: center; 
background-repeat: no-repeat; 
}
}

@media (max-width: 767.98px) {
    
			.mobile {display:none;}
  .col-md-6.col-lg-4.p-3.small:nth-child(n + 2) {
    border-bottom: none;
  }
  .col-md-6.col-lg-4.p-3.small:last-child {
    border-bottom: none;
  }  .img-post {
width: 100%;
height: 200px;
object-fit:cover;
background-position: center; 
background-repeat: no-repeat; 
}

}


.none {text-decoration: none;}

.pagefind-ui__search-clear {
    background-color: #eb5151;
    color:white;
    border: none;
    border-radius: 2px;
}
.clu, a.clu {color: #6c757d;}
.clu:hover, a.clu:hover { color: #f56a6a;}

blockquote{border-left:6px solid #ec5033;margin:1.5em 10px;padding:.5em 10px;quotes:"\201C""\201D""\2018""\2019"}blockquote:before{color:#ec5033;content:open-quote;font-size:4em;line-height:.1em;margin-right:.25em;vertical-align:-.4em}blockquote p{display:inline}

.pagefind-ui__result-image {
    width: 100%;
    height: 120px;
    object-fit: cover;
}