/* =====================================================
   RUPIAH89 YELLOW FORCE THEME
   WAJIB TARUH PALING BAWAH SETELAH CSS BAWAAN
   ===================================================== */

:root{
    --yellow:#ffd400;
    --yellow2:#ffea00;
    --yellow-dark:#e5b900;
    --black:#111111;
    --black2:#1c1c1c;
    --white:#ffffff;
}

/* ===== BODY ===== */
html,
body,
.wrap{
    background:#f5f5f5 !important;
    color:#161616 !important;
}

/* ===== HEADER ===== */
.header,
.header__wrap,
.header__row{
    background:linear-gradient(
        135deg,
        #ffd400 0%,
        #ffea00 50%,
        #ffc400 100%
    ) !important;

    border-color:#d6ad00 !important;
}

.header{
    border-bottom:4px solid #111 !important;
    box-shadow:0 6px 25px rgba(0,0,0,.25) !important;
}

/* ===== LOGO ===== */
.logo{
    background:transparent !important;
}

.logo img{
    filter:drop-shadow(0 4px 5px rgba(0,0,0,.25)) !important;
}

/* ===== SEARCH ===== */
.header-search,
.searchBox-wrap{
    background:#fff !important;
    border-radius:30px !important;
}

.searchBox-wrap{
    border:2px solid #111 !important;
    box-shadow:0 4px 12px rgba(0,0,0,.18) !important;
}

.header-search-input{
    background:#fff !important;
    color:#111 !important;
    border:none !important;
}

.header-search-input::placeholder{
    color:#777 !important;
}

/* ===== NAVBAR HITAM ===== */
.nav,
.nav__wrap,
.nav__row{
    background:#111 !important;
}

.nav{
    border-top:0 !important;
    border-bottom:4px solid #ffd400 !important;
    box-shadow:0 5px 18px rgba(0,0,0,.25) !important;
}

/* ===== MENU ===== */
.nav__item{
    background:#111 !important;
}

.nav__link{
    color:#fff !important;
    background:#111 !important;
    font-weight:700 !important;
    transition:.2s ease !important;
}

/* MENU HOVER */
.nav__item:hover,
.nav__link:hover{
    background:#ffd400 !important;
    color:#111 !important;
}

.nav__item:hover .nav__link{
    background:#ffd400 !important;
    color:#111 !important;
}

/* ===== SUBMENU ===== */
.nav__sub,
.navSub,
.nav__subwrap,
.nav__subitem{
    background:#fff !important;
}

.nav__sub{
    border-top:4px solid #ffd400 !important;
    box-shadow:0 12px 30px rgba(0,0,0,.20) !important;
}

.nav__sublink,
.navSub a{
    color:#222 !important;
}

.nav__sublink:hover,
.navSub a:hover{
    color:#000 !important;
    background:#fff4ad !important;
}

/* ===== ARTICLE ===== */
.article,
.article__wrap,
.article__body,
.read__content,
.content{
    background:#fff !important;
}

.article__body{
    padding:20px !important;
    border-radius:10px !important;
}

/* ===== TITLE ===== */
h1,
h2,
h3,
.article__title{
    color:#111 !important;
}

.article__title,
h1{
    font-weight:800 !important;
}

/* GARIS KUNING TITLE */
.article__title::after,
h1::after{
    content:"" !important;
    display:block !important;
    width:80px !important;
    height:5px !important;
    margin-top:12px !important;
    border-radius:20px !important;
    background:#ffd400 !important;
}

/* ===== PARAGRAPH ===== */
.article__body p,
.content p{
    color:#292929 !important;
}

/* ===== LINK ===== */
.article__body a,
.content a{
    color:#b58b00 !important;
    font-weight:700 !important;
}

.article__body a:hover,
.content a:hover{
    color:#111 !important;
}

/* ===== IMAGE ===== */
.article img,
.content img{
    border-radius:12px !important;
    border:3px solid #ffd400 !important;
    box-shadow:0 8px 25px rgba(0,0,0,.15) !important;
}

/* ===== BUTTON ===== */
.kid__button,
.menu-plus-sticky{
    background:#111 !important;
    color:#ffd400 !important;
    border:2px solid #111 !important;
    border-radius:7px !important;
    font-weight:800 !important;
    box-shadow:0 5px 15px rgba(0,0,0,.20) !important;
}

.kid__button:hover,
.menu-plus-sticky:hover{
    background:#ffd400 !important;
    color:#111 !important;
    transform:translateY(-2px) !important;
}

/* ===== SIDEBAR / BOX ===== */
.sidebar,
.widget,
.box,
.related{
    background:#fff !important;
    border-radius:10px !important;
}

.widget,
.box{
    border-top:4px solid #ffd400 !important;
    box-shadow:0 5px 20px rgba(0,0,0,.08) !important;
}

/* ===== SOCIAL ===== */
.social--fixed,
.social--container{
    border-color:#ffd400 !important;
}

/* ===== FOOTER ===== */
.footer,
.footer__wrap{
    background:#111 !important;
    color:#eee !important;
    border-top:5px solid #ffd400 !important;
}

/* ===== SCROLLBAR ===== */
::-webkit-scrollbar{
    width:10px;
}

::-webkit-scrollbar-track{
    background:#111;
}

::-webkit-scrollbar-thumb{
    background:#ffd400;
    border-radius:20px;
}

/* ===== SELECTION ===== */
::selection{
    background:#ffd400;
    color:#111;
}

/* ===== MOBILE ===== */
@media(max-width:768px){

    .header{
        border-bottom:3px solid #111 !important;
    }

    .nav{
        border-bottom:3px solid #ffd400 !important;
    }

    .article__body{
        padding:14px !important;
    }
}