@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Scheherazade+New:wght@400;500;600;700&display=swap');

:root {
    --wartamaya-primary: #222222;
    --wartamaya-secondary: #3C3D37;
    --wartamaya-aura: #ECDFCC;
    --wartamaya-red:#e62129;
    --wartamaya-transparent: #ffffff33;
    --bg-color: #ffffff;
    --text-color: #333;
    transition: all 3s ease-in-out;
}

/* MANUKSRIPEDIA CLASS */
.text-wartamaya {color:var( --wartamaya-primary) !important}
.btn-wartamaya {background-color:var( --wartamaya-primary) !important;color:var(--bars-text-color) !important;}
.bg-wartamaya {background-color:var( --wartamaya-primary) !important;color:var(--bars-text-color) !important;}
.btn-wartamaya-secondary {background-color:var( --wartamaya-secondary) !important;color:var(--bg-color) !important;}
.btn-wartamaya-tertiary {background-color:var( --wartamaya-primary) !important;color:var(--bg-color) !important;}
.btn-wartamaya-light {background-color:var( --wartamaya-primary) !important;color:var(--bg-color) !important;}
.bg-wartamaya-transparent {background-color:var( --wartamaya-transparent) !important;}
.border-wartamaya {border: 1px solid var( --wartamaya-primary) !important;}
.text-justify {text-align:justify !important;-webkit-hyphens: auto;-moz-hyphens: auto;-ms-hyphens: auto;hyphens: auto;}
.paragraf {line-height:1.8;text-align:justify;-webkit-hyphens: auto;-moz-hyphens: auto;-ms-hyphens: auto;hyphens: auto;}
.x-small {font-size: .7em;} 
img.hover-zoom{transition: transform .5s ease;}
img.hover-zoom:hover{transform: scale(1.1);}@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;}}
@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;}}

/* BS MODIFIED */
.border {border-color: var(--wartamaya-primary) !important}
.modal {--bs-modal-bg: var(--bg-color) !important;}
.form-control, .form-select {background-color: #ffffff6e !important;}


/* 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}
a {
    color: var(--text-color);
    text-decoration: none;
    transition: color .5s ease;
}
a:hover {
    color: var(--wartamaya-red);
    text-decoration: none;
}
img {max-width: 100%;height: auto;}
body {display:flex;flex-direction:column; min-height: 100vh;color: var(--text-color) !important;background: var(--bg-color)!important;-webkit-font-smoothing: antialiased;font-family: "Public Sans", sans-serif !important;}
main {flex:1}
#footer,  #navbar, .dropdown-menu, .accordion-button:not(.collapsed), .faq-borang {background: var(--wartamaya-primary)}
.svg-devider {color:var(--wartamaya-primary);margin-bottom: -1px;}


li.comment {list-style:none;}
.comment-date {font-size: .6em;color: var(--wartamaya-primary)!important;font-style: italic;}
table, tbody {vertical-align: baseline;}
table[border="1"] td, table[border="1"] th {padding: 3px 5px;border: 1px solid rgb(93 93 93 / 23%);}
.table>:not(caption)>*>* {color:unset !important;background-color:unset !important;padding: .35em !important;}


/* STYLES */
#navbar {background-color: var(--wartamaya-primary);position:sticky; position:-webkit-sticky;top:0;z-index: 100;}

.navbar-logo {height: 65px;position: absolute;top: 15px;}
.brand-wrap {margin-left: 77px;}
.navbar-slogan {margin-top: -7px;letter-spacing: .11em;}
.navbar-toggler-icon {background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important}
.nav-item:hover, .dropdown-item:hover {background-color: var(--wartamaya-transparent);}
.nav-link.active {background-color: var(--wartamaya-primary) !important;border: none;}
.nav-tabs {border-bottom: 1px solid var(--wartamaya-primary);}
@media (min-width: 992px) {.navbar-expand-lg .navbar-nav .dropdown-menu {position: absolute;left: -6em;margin-top: .75em !important;}}
.mobile-menu {
    background-color:var(--wartamaya-secondary);
    position: sticky;
    top: 55px;
    z-index: 10;
}
    .custom-horizontal-menu {
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
}

.custom-horizontal-menu::-webkit-scrollbar {
    display: none;
}
.custom-horizontal-menu {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.custom-horizontal-menu.d-flex {
    display: flex;
    flex-wrap: nowrap;
    margin-left: 77px;
}

.menu-item a {
    display: inline-block;
    text-decoration: none;
    color: #fff;
    font-weight: 500;
    white-space: nowrap;
    transition: color 0.2s ease;
}
.navbar-nav::-webkit-scrollbar {
    height: 4px;
    cursor:pointer
}

.navbar-nav::-webkit-scrollbar-track {
    background: transparent;
}

.navbar-nav::-webkit-scrollbar-thumb {
    background-color: var(--wartamaya-red);
    border-radius: 10px;
    transition: background-color 0.3s;
}

.navbar-nav:hover::-webkit-scrollbar-thumb {
    background-color: #666;
}

.breadcrumb {font-size: .85em !important;}
.breadcrumb-item+.breadcrumb-item::before, .breadcrumb-item.active {color: unset !important;}
.wartamaya-banner-ads {max-height:200px}
referensi {position: relative;
    margin-top: 2em;
    background-color: var(--wartamaya-transparent);
    padding: 20px 10px 15px 15px;
    border-top: 1px dashed var(--wartamaya-secondary);
    font-size:.8em;
    display: block;
}

referensi:before {
   content: "Referensi";
   position: absolute;
   top: -7px;
   left: 0;
   background-color: var(--bg-color);
   border: 1px dashed var(--wartamaya-secondary);
   padding: 2px 10px;
}
referensi ol, referensi ul {padding-left: 1em;margin-bottom: unset;}

#author-wrapper {background-color: var(--wartamaya-transparent);margin-top: 5em;}
.comment-body{background-color: var(--wartamaya-transparent)}
.section-title {
    text-align: center;
    padding-bottom: 2em;
    h2 {
        margin-bottom: 20px;
        padding-bottom: 20px;
        position: relative;
    }
    h2::before {
        content: "";
        position: absolute;
        display: block;
        width: 120px;
        height: 1px;
        background: var(--wartamaya-primary);
        bottom: 1px;
        left: calc(50% - 60px);
    }
    h2::after {
        content: "";
        position: absolute;
        display: block;
        width: 40px;
        height: 3px;
        background:var( --wartamaya-primary);
        bottom: 0;
        left: calc(50% - 20px);
    }
}

.carousel-item {
    h4 {margin:0;font-weight:bold}
    img {border-radius:50%;margin-bottom:1em;width:175px;height:175px}
}
.accordion-button:focus {box-shadow:none !important;}
.accordion-button::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-plus' viewBox='0 0 16 16'%3E%3Cpath d='M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4z'/%3E%3C/svg%3E") !important;
  transition: all 0.5s;
}
.accordion-button:not(.collapsed)::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-dash' viewBox='0 0 16 16'%3E%3Cpath d='M4 8a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7A.5.5 0 0 1 4 8z'/%3E%3C/svg%3E")!important;
}
.accordion-button::after {
  transition: all 0.5s;
}
.accordion-button{color:var(--text-color) !important}
.accordion-item {color:unset !important; border-color:var(--wartamaya-primary) !important}

.loop-title, .see-all, .read-post{position:relative}
.see-all::before, .loop-title::before,.read-post::before{
	z-index: -1;
	content: "";
	width: 100%;
	border-top:1px solid var(--wartamaya-primary);
	position:absolute;
	bottom: 10px;
	left: 0;
}

.loop-title span,.see-all a, .read-post a{background-color: var(--bg-color)}
.see-all a:hover, .read-post a:hover{color:var(--wartamaya-red)!important;}

/* PAGINATION */
.pagination-container {
    text-align: center;
    margin: 3em 0 0;
}

.pagination-container .page-numbers {
    display: inline-block;
    padding: 2px 10px;
    margin: 3px;
    text-decoration: none;
    border: 1px solid var(--wartamaya-primary);
    border-radius: 5px;
    transition: all 0.3s ease;
}

.pagination-container .page-numbers:hover {
    background-color: var(--wartamaya-primary);
    color: var(--bg-color)
}

.pagination-container .current {
    background-color: var(--wartamaya-primary);
    color: var(--bg-color);
    font-weight: bold;
}

.pagination-container .prev, 
.pagination-container .next {
    font-weight: bold;
}

@media (max-width: 600px) {
    .pagination-container .page-numbers {
        padding: 6px 10px;
        font-size: 14px;
    }
}

.carousel-control-next, .carousel-control-prev {width:5%}
.carousel-indicators {margin: 0;background: var(--wartamaya-primary);}
.carousel-caption {right: 0;left: 0;}
.image-slider {background-size: cover; background-position: center; height: 400px;}

/* COMMENTS */
.comment-text {
    display: block;
    max-width: 100%; /* Sesuaikan dengan kebutuhan */
    word-break: break-word; /* Paksa teks panjang untuk pindah ke baris baru */
}


/* PRINT AREA */
@media print {
    .print-area {display:block !important}
    .no-print {display: none !important}
    .container{max-width:100% !important;padding:1.5em;}
}

/* SEARCH BAR */
.search-bar {
    max-width: 584px;
    /* Similar to Google's width */
    width: 100%;
    margin: auto;
    /* Center the form */
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 1px 6px rgba(32, 33, 36, 0.28);
    /* Soft Google-like shadow */
}

.search-input {
    border: 1px solid #dfe1e5;
    border-radius: 24px;
    height: 44px;
    padding-left: 16px;
    font-size: 16px;
    transition: all 0.2s ease-in-out;
}

.search-input:focus {
    outline: none;
    border-color: #4285f4;
    box-shadow: 0 1px 6px rgba(32, 33, 36, 0.28);
}

.search-btn {
    background: none;
    border: none;
    padding: 10px 16px;
    cursor: pointer;
    color: #5f6368;
    font-size: 18px;
}

.search-btn:hover {
    color: #202124;
}

.popular-post-wrapper {
    scrollbar-width: thin;
    scrollbar-color: #ccc transparent;
}
.popular-post-wrapper::-webkit-scrollbar {
    height: 6px;
}
.popular-post-wrapper::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 3px;
}
.popular-post-item .position-absolute {
    font-size: 0.75rem;
    font-weight: bold;
    border-radius: 0 0.25rem 0.25rem 0;
}
.warta-cat a {color: var(--wartamaya-red) !important;}