@charset "UTF-8";
:root {
    --mp-primary: #c39878;
    --mp-secondary:#edd8b3;
    --mp-dark:#856349;
    --bg-color: #fdebcb;
    --text-color: #585248;
    --bs-border-color:#edd8b3 !important;
}

/* MANUKSRIPEDIA CLASS */
.text-mp {color:var( --mp-primary) !important}
.bg-mp, .btn-mp {background-color:var( --mp-primary) !important;color:white !important;}
.bg-mp-secondary, .btn-mp-secondary {background-color:var( --mp-secondary) !important}
.border-mp {border: 1px solid var( --mp-primary) !important;}
.font-montserrat {font-family: montserrat;}
.x-small {font-size:.7em;}
/* BASIC */
html {position: relative;min-height: 100%;-webkit-text-size-adjust: 100%;-webkit-tap-highlight-color: transparent}
* {-webkit-touch-callout: none;-webkit-user-select: none;-khtml-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;}
*, ::after, ::before {box-sizing: border-box}
body {
    margin:0;
	color: var(--text-color) !important;
	background: var(--bg-color)!important;
	font-size: 1rem;
	font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans","Liberation Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji", NotoJawa, NotoSunda, NotoBali, NotoBugis, NotoBatak, NotoRejang !important;
	-webkit-font-smoothing: antialiased;
}
a:link, .nav-link {text-decoration:none;}
a:hover {text-decoration:none;}
a:link, a:visited, .h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {color: var( --text-color)}
a.bg-mp:hover, button.bg-mp:hover, input.bg-mp:hover{background-color:var(--mp-dark) !important} 
.navbar-brand {font-family: montserrat;font-weight: bold;color:var(--bg-color)!important}
.navbar-toggler:focus {box-shadow: inset 0px 0px 6px 0px #00000047 !important}
.nav-tabs, .nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active {border-color:var( --mp-secondary) !important;}
.nav-item {padding:0 5px;}
.nav-item:hover {background-color:var(--mp-secondary);border-radius:5px;}
.nav-item a{color:white !important;}
.navbar-logo {
    height: 30px;
    vertical-align: middle;
    margin-right: 8px;
    filter: contrast(0.3) brightness(1.7) sepia(20%)
}
li.comment {list-style:none;}
.comment-date {font-size: .6em;font-style: italic;}
ul .dropdown-menu {background-color:var(--mp-primary);border:none;margin-left:.6em !important;padding:0;margin-bottom:1em;}
@media (max-width: 575.98px) {.w-xs-100 {width: 100% !important;}.w-xs-75 { width: 75% !important;}.w-xs-50 {width: 50% !important;}.w-xs-25 { width: 25% !important;}}
@media (min-width: 576px) {.w-sm-100 {width: 100% !important;}.w-sm-75 {width: 75% !important;}.w-sm-50 {width: 50% !important;}.w-sm-25 {width: 25% !important;}}
@media (min-width: 768px) {.w-md-100 {width: 100% !important;}.w-md-75 {width: 75% !important;}.w-md-50 {width: 50% !important;}.w-md-25 {width: 25% !important;}}
@media (min-width: 992px) {.w-lg-100 {width: 100% !important;}.w-lg-75 {width: 75% !important;}.w-lg-50 {width: 50% !important;}.w-lg-25 {width: 25% !important;} ul .dropdown-menu {margin-top:.6em !important;;margin-left:0 !important;}}
@media (min-width: 1200px) {.w-xl-100 {width: 100% !important;}.w-xl-75 {width: 75% !important;}.w-xl-50 {width: 50% !important;}.w-xl-25 {width: 25% !important;}}
.text-justify {text-align:justify !important}
.paragraf {line-height:1.8;text-align:justify;}
img.hover-zoom{transition: transform .5s ease;}
img.hover-zoom:hover{transform: scale(1.1);}
table, tbody {vertical-align: baseline;}
table[border="1"] td, table[border="1"] th {
    padding: 3px 5px;
    border: 1px solid var(--mp-secondary);
}
.table>:not(caption)>*>* {color:unset !important;background-color:unset !important;padding: .35em !important;}
main {
    flex:1;
    background-image: url('../images/bg-bottom.png');;
    background-repeat: no-repeat; /* Hindari pengulangan gambar */
    background-size: contain; /* Sesuaikan gambar agar menutupi elemen */
    background-position: bottom center; /* Atur posisi di bawah */
    padding-bottom:10em;
}

.body-wrapper {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}
#footer {
    background: var( --mp-primary);
    color: #fff;
}

.footer-newsletter {
    padding-top: 3em;
}
.footer-newsletter form {
    margin-top: 30px;
    background: #fff;
    padding: 6px 10px;
    position: relative;
    border-radius: 50px;
}

.footer-newsletter form input[type=email] {
    border: 0;
    padding: 4px;
    width: calc(100% - 100px);
}

.footer-newsletter form input[type=submit] {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    border: 0;
    background: none;
    font-size: 16px;
    padding: 0 20px;
    margin: 3px;
    background: var(--mp-primary);
    color: #fff;
    transition: 0.3s;
    border-radius: 50px;
}

.bx-chevron-right:before {
    content: "\ea50";
}

.footer-bottom {
    text-align: center;
    background-color: #856349;
    padding: 1em 0;
    width: 100%;
}

.credits {
    font-size: 13px;
}


.site-title {
	margin: 0;
	font-size: 1.4rem;
	color:#fff;
	font-weight: 700;
    padding-left: 0.5em;
}

.main-navigation .menu {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
}

.main-navigation .menu a {
	display: block;
	color: #fff !important;
	padding: 10px;
	text-decoration: none;
	font-weight: 600;
}

.main-navigation .menu a:hover {
	color: #6EDEC4;
}

.site-content {
	max-width: 1000px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 2.5fr 1fr;
	grid-gap: 10px;
	min-height: calc(100vh - 205px);
}

.site-footer {
	margin: 0 auto;
	padding: 30px 15px;
	background: #F8F8FB;
	border-top: 1px solid #e8e8f0;
	text-align: center;
}

.entry {
	margin-bottom: 35px;
}

.entry-header a {
	color: #111;
	font-size: 2rem;
}
.entry-content {text-align:justify;}
.entry-content img {max-width:100%;height:auto;}

.screen-reader-text{
    display:none;
}
badge   {
    display:block;
    padding-top:4em;
    max-width: 1320px;
    margin: auto;
        }
.mp-front-top   {
    border-radius: .7em;
    background-color: var( --mp-primary);
    display: block;
    text-align:center;
        }
.mp-badge {
    background-color: var(--mp-primary);
    color: var(--bg-color);
    border-radius: 10px;
    padding: 10px;
    text-align: center;
    outline: 1px dashed var(--bg-color);
    outline-offset: -7px;
    }
.mp-badge:hover  {
    background-color:var( --mp-dark);
    transition:background-color .5s;
    box-shadow: inset 0px 0px 6px 1px #d3b8a3;
    color: var(--bg-color);
        }
        
    .section-title {
    text-align: center;
    padding-bottom: 2em;
}
.section-title h2 {
    margin-bottom: 20px;
    padding-bottom: 20px;
    position: relative;
}
.section-title h2::before {
    content: "";
    position: absolute;
    display: block;
    width: 120px;
    height: 1px;
    background: var(--mp-secondary);
    bottom: 1px;
    left: calc(50% - 60px);
}
.section-title h2::after {
    content: "";
    position: absolute;
    display: block;
    width: 40px;
    height: 3px;
    background:var( --mp-primary);
    bottom: 0;
    left: calc(50% - 20px);
}

.aksara {
    padding-top: 25px;
    font-family: NotoJawa,NotoSunda,NotoBali,NotoBatak,NotoBugis,Notorejang;
    line-height: 2em;
}
    .ortotrans, .terjemah {
    color: #966a36;
    padding-top: 10px;
    font-size: 85%;
    text-align: justify;
}
.form-control {background-color: var(--mp-secondary) !important;}
input:focus, input.form-control:focus, textarea.form-control:focus {
  outline: none !important;
  border-color:var(--mp-secondary) !important;
  box-shadow:none !important;
}
	#mpTestimoni .carousel-item img {border-radius:50%;margin-bottom:1em;width:175px;height:175px}
	.carousel-item h4 {margin:0;font-family:montserrat;font-weight:bold}
	.accordion-item {color:var(--text-color) !important;text-align:justify;}
	.accordion-button{font-family: montserrat;font-weight: bold !important;color: var(--text-color) !important;}
	.accordion-button:focus{box-shadow:none !important}
	.nav-link {color:unset}
	@media (max-width: 768px) {.nav-link {flex: 1 1 auto!important;}}
	.nav-link.active {color:#fff !important;background-color: var( --mp-primary) !important;border: none;}
	.see-all, .read-post{position:relative;margin-top:1.5em;text-align:end}
	.see-all::before, .read-post::before{
		z-index: -1;
		content: "";
		width: 100%;
		border-top:2px dashed var(--mp-secondary);
		position:absolute;
		top: 50%;
    	left: 0;
	}
	.see-all a, .read-post a{padding: 3px 10px;background-color: var(--mp-secondary);border-radius:1em}
	.see-all a:hover, .read-post a:hover{color:var(--bg-color)!important; background-color:var( --mp-primary);transition:background-color .5s;}
	.image-fade {
    height: 300px;
    overflow: hidden;
    margin: .5em;
}

#galeriPostModal .carousel-control-next, #galeriPostModal .carousel-control-prev {width: 5% !important}

.image-container {
    position: relative;
    height: 100%;
}

.image-item {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    opacity: 0;
    transition: opacity 1s ease-in-out;
}

.image-item.active {
    opacity: 1;
    animation: zoom-in 10s forwards;
}

@keyframes zoom-in {
    0% {
        transform: scale(1);
    }
    100% {
        transform: scale(1.5);
    }
}

.caption {
    position: absolute;
    right:0;
    bottom: 0;
    color: white;
    background: #c39878b3;
    padding: 10px;
    display: none;
}

.image-item.active + .caption {
    display: block;
    text-align:center;
    animation: fade-in 3s
}

@keyframes fade-in {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
.image-item.fade-out{
    animation: zoom-out 1s forwards;
    opacity: 1;
}

@keyframes zoom-out {
    0% {
        opacity: 1;
        transform: scale(1.5);
    }
    100% {
        opacity: 0;
        transform: scale(1.7);
    }
}

.accordion-button:not(.collapsed) {
    color: var(--text-color)!important;
    background-color: var(--mp-primary)!important;
}
 .num {padding-right: 10px;color: var(--text-color);font-weight:bold}
.pagination {text-align: center;width: 100%;display: block;margin-top:2em;margin-bottom:2em}
	.page-numbers {
    padding: 2px 8px;
    border: 1px dashed #3a7a8045;
    border-radius: 7px;
	background-color: #ffff6fb5}
	a.page-numbers, .page-numbers.dots {transition:background-color .5s;background-color:#3a7a800f}

/* PRINT AREA */
@media print {
    .print-area {display:block !important}
    .no-print {display: none !important}
}