/* =========================================
   SOFT BLACK • WHITE • MAROON THEME
========================================= */

/* MAIN COLORS */
:root{
    --maroon:#8b3a46;
    --maroon-soft:#b46b76;
    --black:#151515;
    --black-soft:#1e1e1e;
    --white:#f7f7f7;
    --grey:#b8b8b8;
    --border:#2d2d2d;
}

/* =========================================
   GLOBAL
========================================= */
body{
    background:var(--black);
    color:var(--grey);
}

/* HEADINGS */
h1,
h2,
h3,
h4,
h5,
h6{
    color:var(--white);
    font-weight:600;
}

/* TEXT */
p,
span,
li,
.user-account,
button.search-icon,
ul.header-social-network li a{
    color:#c2c2c2;
}

/* =========================================
   PRIMARY TEXT COLOR
========================================= */
.primary-color,
.main-header a:hover,
.main-header .main-menu ul li:hover>a,
.main-header .main-menu ul li.current-menu-item>a,
.main-header .main-menu ul ul.sub-menu>li>a:hover,
.slicknav_menu .slicknav_nav a:hover,
.footer-area .footer-tittle ul li a:hover,
.footer-area .footer-social a i:hover,
.pagination-area .page-link:hover,
.pagination-area .page-item.active .page-link:hover,
.trending-area h4 a:hover,
.weekly-news-area h4 a:hover,
.contact-section h4 a:hover,
a.active,
.current-color,
sup{
    color:var(--maroon-soft);
}

/* =========================================
   BACKGROUND
========================================= */
.primary-bg,
#scrollUp,
.top-right-icon,
.hero-caption span::before,
.blog_item_img .blog_item_date,
.slick-dots li.slick-active button,
.range #slider-range,
.range .ui-slider-handle.ui-state-default.ui-corner-all,
.blog_right_sidebar .search_widget .input-group button{
    background:var(--maroon);
}

/* SOFT PANELS */
.header-area,
.footer-area,
.sidebar,
.single-post,
.widget-area,
.main-content{
    background:var(--black-soft);
}

/* =========================================
   BUTTON
========================================= */
.boxed-btn{
    border:1px solid var(--maroon);
    color:var(--white);
    background:transparent;
    transition:all .3s ease;
}

.boxed-btn:hover{
    background:var(--maroon);
    border-color:var(--maroon);
    color:#fff;
}

/* READ MORE */
a.read-more{
    border:1px solid var(--maroon-soft);
    color:var(--maroon-soft);
    transition:.3s;
}

a.read-more:hover{
    background:var(--maroon-soft);
    color:#fff !important;
}

/* =========================================
   BORDER
========================================= */
.main-header .main-menu ul ul.sub-menu,
.featured-slider-2-nav .slick-active img,
.size-filter.list-filter li a:hover,
.size-filter.list-filter li.active a{
    border-color:var(--maroon-soft);
}

.border-color-1{
    border-color:var(--border);
}

/* =========================================
   FORM
========================================= */
input,
textarea,
select{
    background:#222 !important;
    border:1px solid #333 !important;
    color:#eee !important;
}

input:focus,
textarea:focus,
select:focus{
    border-color:var(--maroon-soft) !important;
    box-shadow:none !important;
}

/* =========================================
   CHECKBOX & RADIO
========================================= */
.custome-checkbox input[type="checkbox"]:checked + .form-check-label::before{
    background-color:var(--maroon);
    border-color:var(--maroon);
}

.custome-radio input[type="radio"]:checked + .form-check-label::before{
    border-color:var(--maroon);
}

.custome-radio input[type="radio"] + .form-check-label::after{
    background-color:var(--maroon);
}

/* =========================================
   NAV TAB
========================================= */
.tab-nav.style-1 .nav-link.active,
.tab-nav.style-1 .nav-link:hover{
    background:#2a2a2a;
    color:#fff;
}

/* =========================================
   BLOG HOVER
========================================= */
.blog_area a:hover{
    background:-webkit-linear-gradient(
        131deg,
        #b46b76 0%,
        #f0d9dd 100%
    );
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
    text-decoration:none;
    transition:.4s;
}

/* =========================================
   SUBSCRIBE BUTTON
========================================= */
button.subscribe{
    border:1px solid var(--maroon-soft);
    color:var(--maroon-soft);
    background:transparent;
    transition:.3s;
}

button.subscribe:hover{
    background:var(--maroon-soft);
    color:#fff;
}

/* =========================================
   CUSTOM BACKGROUND COLORS
========================================= */
.background1{background:#8b3a46;}
.background2{background:#2b2b2b;}
.background3{background:#f7f7f7;}
.background4{background:#3b3b3b;}
.background5{background:#d7d7d7;}
.background6{background:#202020;}
.background7{background:#353535;}
.background8{background:#6e2f38;}
.background9{background:#474747;}
.background10{background:#5a5a5a;}
.background11{background:#101010;}
.background12{background:#181818;}

/* =========================================
   TEXT COLORS
========================================= */
.color1{color:#8b3a46;}
.color2{color:#c8c8c8;}
.color3{color:#ffffff;}
.color4{color:#9a9a9a;}
.color5{color:#dddddd;}

.color-white{
    color:#fff !important;
}

.color-grey{
    color:#a5a5a5;
}

.color-black{
    color:#000;
}

/* =========================================
   SOCIAL MEDIA
========================================= */
.follow-us a.follow-us-facebook,
.single-social-share a.facebook-icon{
    background:#8b3a46;
}

.follow-us a.follow-us-twitter,
.single-social-share a.twitter-icon{
    background:#4b4b4b;
}

.follow-us a.follow-us-instagram,
.single-social-share a.instagram-icon{
    background:#5d5d5d;
}

.follow-us a.follow-us-youtube,
.single-social-share a.pinterest-icon{
    background:#6e2f38;
}

/* ICON HOVER */
.facebook-icon:hover{color:#b46b76;}
.twitter-icon:hover{color:#d0d0d0;}
.instagram-icon:hover{color:#ececec;}
.pinterest-icon:hover{color:#c58a92;}

/* =========================================
   EXTRA SOFT EFFECT
========================================= */
.card,
.single-post,
.widget-area,
.sidebar{
    border:1px solid rgba(255,255,255,0.04);
    box-shadow:0 4px 20px rgba(0,0,0,0.15);
    border-radius:14px;
}

.nav-link.active{
    background:#f8eeee !important;
    color:#a64450 !important;
    border-radius:12px;
}

/* =========================
   BREAKING NEWS PREMIUM
========================= */

.news-flash-cover{
    position:relative;
    overflow:hidden;

    background:
        linear-gradient(
            135deg,
            #111111 0%,
            #1a1a1d 35%,
            #3a1217 75%,
            #6f1720 100%
        ) !important;

    padding:16px 22px;
    border-radius:20px;

    border:1px solid rgba(255,255,255,.06);

    box-shadow:
        0 10px 35px rgba(0,0,0,.25),
        inset 0 1px 0 rgba(255,255,255,.04);
}

/* efek glow */
.news-flash-cover::before{
    content:"";
    position:absolute;
    width:180px;
    height:180px;
    background:rgba(255,255,255,.04);
    border-radius:50%;
    top:-80px;
    right:-60px;
    filter:blur(10px);
}

/* JUDUL BREAKING */
.news-flash-cover h6{
    display:inline-flex;
    align-items:center;
    gap:8px;

    margin:0;
    margin-right:16px;

    font-size:14px;
    font-weight:800;
    letter-spacing:.5px;
    text-transform:uppercase;

    color:#ffffff !important;
}

/* ICON PETIR */
.news-flash-cover h6 i{
    width:28px;
    height:28px;

    border-radius:50%;

    display:flex;
    align-items:center;
    justify-content:center;

    background:linear-gradient(
        135deg,
        #ff6b7d,
        #a64450
    );

    color:#fff !important;

    font-size:12px;

    box-shadow:0 6px 18px rgba(166,68,80,.35);
}

/* WRAPPER BERITA */
#news-flash{
    vertical-align:middle;
}

/* LIST */
#news-flash ul{
    margin:0;
    padding:0;
    list-style:none;
}

/* LINK BERITA */
#news-flash ul li a{
    position:relative;

    color:#ffffff !important;

    font-size:15px;
    font-weight:600;

    text-decoration:none;

    opacity:.92;

    transition:.3s ease;
}

/* efek garis hover */
#news-flash ul li a::after{
    content:"";
    position:absolute;
    left:0;
    bottom:-3px;

    width:0;
    height:2px;

    background:linear-gradient(
        90deg,
        #ff8a98,
        #ffffff
    );

    border-radius:10px;

    transition:.3s ease;
}

/* HOVER */
#news-flash ul li a:hover{
    color:#ffd7dc !important;
    opacity:1;
}

#news-flash ul li a:hover::after{
    width:100%;
}

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

    .news-flash-cover{
        text-align:left !important;
        padding:16px;
        border-radius:18px;
    }

    .news-flash-cover h6{
        display:flex;
        margin-bottom:10px;
    }

    #news-flash{
        display:block !important;
    }

    #news-flash ul li a{
        font-size:14px;
        line-height:1.5;
    }
}

.letter-background{
    color:#2a2a2a !important;
}

/* =========================
   PAGINATION PREMIUM
========================= */

/* HILANGKAN GARIS */
.pagination-area{
    border:none !important;
}

.bt-1{
    border-top:none !important;
}

.border-color-1{
    border-color:transparent !important;
}

/* WRAPPER */
.pagination{
    gap:10px;
    flex-wrap:wrap;
}

/* ITEM */
.pagination .page-item{
    margin:0;
}

/* BUTTON */
.pagination .page-link{
    width:48px;
    height:48px;

    border:none !important;
    border-radius:16px !important;

    display:flex;
    align-items:center;
    justify-content:center;

    background:#181818 !important;
    color:#ffffff !important;

    font-size:15px;
    font-weight:700;

    box-shadow:
        0 6px 18px rgba(0,0,0,.18),
        inset 0 1px 0 rgba(255,255,255,.03);

    transition:.25s ease;
}

/* HOVER */
.pagination .page-link:hover{
    background:linear-gradient(
        135deg,
        #7b1f2a,
        #a64450
    ) !important;

    color:#fff !important;

    transform:translateY(-2px);

    box-shadow:
        0 12px 24px rgba(123,31,42,.28);
}

/* ACTIVE */
.pagination .page-item.active .page-link{
    background:linear-gradient(
        135deg,
        #7b1f2a,
        #c45865
    ) !important;

    color:#fff !important;

    box-shadow:
        0 12px 26px rgba(123,31,42,.35);
}

/* DISABLED */
.pagination .page-item.disabled .page-link{
    background:#111 !important;
    color:#555 !important;
    opacity:.7;
    cursor:not-allowed;
    box-shadow:none;
}

/* TITIK TITIK */
.pagination .page-item.disabled span.page-link{
    background:transparent !important;
    color:#777 !important;
}

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

    .pagination{
        gap:8px;
    }

    .pagination .page-link{
        width:42px;
        height:42px;
        border-radius:14px !important;
        font-size:14px;
    }
}
/* =========================================
   PREMIUM SEARCH BUTTON FIX
========================================= */

/* hilangkan putih */
.header-style-1 .search-button,
.header-style-2 .search-button{
    background:transparent !important;
    border:none !important;
    box-shadow:none !important;
}

/* wrapper */
.search-button{
    position:absolute;
    right:15px;
    top:50%;
    transform:translateY(-50%);
}

/* tombol asli tema */
/* tetap bisa diklik tapi tidak terlihat */
.theme-search-trigger{
    position:absolute !important;
    inset:0;

    opacity:0 !important;

    z-index:5;

    cursor:pointer;

    border:none !important;
    background:transparent !important;
}

/* tombol custom */
.custom-search-toggle{
    width:46px;
    height:46px;

    border:none !important;
    outline:none !important;

    border-radius:17px;

    background:
        linear-gradient(
            135deg,
            #202022,
            #151516
        ) !important;

    color:#fff !important;

    display:flex;
    align-items:center;
    justify-content:center;

    box-shadow:
        0 12px 28px rgba(0,0,0,.35);

    transition:.25s ease;

    position:relative;
    z-index:2;

    pointer-events:none;
}

/* hover */
.custom-search-toggle:hover{
    background:
        linear-gradient(
            135deg,
            #7b1f2a,
            #a64450
        ) !important;

    transform:translateY(-2px);
}

/* icon */
.custom-search-toggle i{
    font-size:18px;
    transition:.25s ease;
}

.post-by a{
    color: #fff;
    transition: 0.3s;
}

.post-by a:hover{
    color: #8a2029; /* warna saat hover */
}

.author-bio-link{
    text-transform: capitalize !important;
}