#Back-to-top {
z-index: 99999;
position: fixed;
bottom: 28px;
right: 24px;
cursor: pointer;
display: none;
width: 44px;
height: 44px;
border-radius: 50% !important;
background: #0f172a !important;
/* Premium dark slate background */
box-shadow: 0 4px 16px rgba(15, 23, 42, 0.25) !important;
transition: all 0.25s ease !important;
border: 1px solid rgba(255, 255, 255, 0.1) !important;
opacity: 0.85;
}
#Back-to-top::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 10px;
height: 10px;
border-top: 3px solid #ffffff;
border-right: 3px solid #ffffff;
transform: translate(-50%, -35%) rotate(-45deg);
/* Crisp upward chevron arrow */
transition: all 0.25s ease !important;
}
#Back-to-top:hover {
opacity: 1;
background: #5a9e25 !important;
/* Dynamic theme hover */
transform: translateY(-4px) scale(1.05) !important;
box-shadow: 0 6px 20px rgba(90, 158, 37, 0.35) !important;
}
#Back-to-top:hover::after {
transform: translate(-50%, -60%) rotate(-45deg);
/* Arrow moves slightly up on hover for micro-animation */
}
.table-download th,
.table-download td {
border: 1px solid #e2e8f0;
padding: 9px 10px;
}
body,
input,
textarea,
button,
select,
h2,
h3,
h4,
h5,
h6,
.list-title,
.widget-title,
.widget h3,
.block-title h2,
.breaking-news .the-title,
.breaking-news a,
.the-title,
.main-menu a,
.block-title span,
.block-title a {
font-family: Arial, Helvetica, sans-serif !important;
}
/* Gunakan font sans-serif ala portal berita seperti Tribunnews untuk seluruh judul */
h1,
h1 a,
h2 a,
h4 a,
.h2-judul a,
.judul-berita,
.judul-berita a,
.article-title h1,
.post-title h1,
.single-block h1,
.article-content h2 a,
.article-content h4 a,
.widget-articles h4 a,
.article-block h2 a,
.article-block h4 a,
.wide-article h2 a,
.wide-article h4 a,
[data-u="thumb"] a {
font-family: Arial, Helvetica, sans-serif !important;
font-weight: 700 !important;
}
h1,
h2,
h3,
h4,
h5,
h6 {
color: #0f172a !important;
letter-spacing: -0.01em;
}
body {
background: #f1f5f9 !important;
color: #1f2937 !important;
font-size: 14px !important;
line-height: 1.65 !important;
padding-top: 0 !important;
}
.boxed {
padding-top: 0 !important;
background: transparent !important;
}
.wrapper {
width: 95% !important;
max-width: 1250px !important;
margin: 0 auto !important;
padding: 0 20px;
box-sizing: border-box;
}
.boxed,
.boxed:not(.active),
.active.boxed {
width: 100% !important;
min-width: 0 !important;
background: transparent !important;
box-shadow: none !important;
}
.header {
box-shadow: 0 12px 24px rgba(15, 23, 42, 0.16) !important;
border-bottom: 0 !important;
padding-top: 24px !important;
position: sticky !important;
top: 0 !important;
z-index: 9999 !important;
}
.header>.wrapper,
.header .wrapper {
width: 95% !important;
max-width: 1250px !important;
margin: 0 auto !important;
padding: 0 20px;
box-sizing: border-box;
}
.header .header-logo {
margin-left: 0 !important;
}
.header .header-logo img {
max-height: 52px !important;
width: auto !important;
}
.header .header-menu {
width: auto !important;
margin: 10px 0 0 24px !important;
}
.header .header-menu ul {
display: flex;
gap: 14px;
margin: 0;
}
.header .header-menu ul li {
padding-right: 0 !important;
}
.header .header-menu ul li:after {
display: none !important;
}
.header .header-menu ul li a {
font-weight: 600 !important;
color: rgba(255, 255, 255, 0.92) !important;
}
.header .header-addons {
margin-right: 0 !important;
margin-top: 0 !important;
}
.header-addons .city {
display: inline-block;
background: rgba(255, 255, 255, 0.12);
border: 1px solid rgba(255, 255, 255, 0.18);
padding: 8px 12px;
border-radius: 999px;
font-size: 12px;
font-weight: 600;
margin-bottom: 8px;
}
.search-input {
border-radius: 999px !important;
border: 1px solid rgba(255, 255, 255, 0.24) !important;
background: rgba(255, 255, 255, 0.95) !important;
color: #0f172a !important;
width: 230px !important;
padding: 9px 40px 9px 14px !important;
box-shadow: none !important;
opacity: 1 !important;
}
.search-input:focus {
width: 230px !important;
border-color: rgba(255, 255, 255, 0.7) !important;
box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.25) !important;
}
.search-button {
background-size: 16px !important;
width: 36px !important;
}
.main-menu {
background: inherit !important;
border-top: 1px solid rgba(255, 255, 255, 0.18) !important;
backdrop-filter: blur(2px);
margin-top: 15px !important;
position: sticky !important;
top: 0 !important;
z-index: 9000 !important;
width: 100% !important;
left: 0 !important;
}
.main-menu .wrapper {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
}
/* Mobile search bar - hidden on desktop, shown on mobile via media query */
.mobile-search-bar {
display: none;
}
.main-menu-search {
display: flex;
align-items: center;
flex-shrink: 0;
padding: 6px 0;
margin-left: auto;
}
.main-menu-search form {
display: flex;
align-items: center;
gap: 0;
background: rgba(255, 255, 255, 0.15);
border: 1px solid rgba(255, 255, 255, 0.25);
border-radius: 999px;
overflow: hidden;
transition: background 0.2s ease;
}
.main-menu-search form:focus-within {
background: rgba(255, 255, 255, 0.25);
border-color: rgba(255, 255, 255, 0.5);
}
.search-input-nav {
background: transparent !important;
border: none !important;
outline: none !important;
color: #ffffff !important;
font-size: 13px !important;
padding: 7px 14px !important;
width: 180px !important;
box-shadow: none !important;
}
.search-input-nav::placeholder {
color: rgba(255, 255, 255, 0.65) !important;
}
.search-button-nav {
background: transparent !important;
border: none !important;
color: rgba(255, 255, 255, 0.85) !important;
font-size: 15px !important;
padding: 7px 12px 7px 6px !important;
cursor: pointer !important;
transition: color 0.2s ease !important;
line-height: 1 !important;
}
.search-button-nav:hover {
color: #ffffff !important;
}
.main-menu .the-menu>li>a {
text-transform: none !important;
letter-spacing: 0 !important;
font-size: 13px !important;
padding: 13px 12px !important;
}
.main-menu .the-menu li ul {
border-radius: 10px;
box-shadow: 0 10px 24px rgba(2, 6, 23, 0.2);
}
.main-menu .the-menu li ul li:first-child,
.main-menu .the-menu li ul li:first-child>a {
border-top-left-radius: 10px !important;
border-top-right-radius: 10px !important;
}
.main-menu .the-menu li ul li:last-child,
.main-menu .the-menu li ul li:last-child>a {
border-bottom-left-radius: 10px !important;
border-bottom-right-radius: 10px !important;
}
/* Align navigation menu dropdown chevrons vertically */
.main-menu .the-menu li a span {
padding-right: 14px !important;
position: relative !important;
display: inline-block !important;
}
.main-menu .the-menu li a span:after {
top: 50% !important;
transform: translateY(-50%) !important;
margin-top: -1px !important;
/* fine-tune visual vertical center */
right: 0 !important;
font-size: 11px !important;
}
.main-menu .the-menu li ul li a span {
display: block !important;
padding-right: 15px !important;
}
.main-menu .the-menu li ul li a span:after {
top: 50% !important;
transform: translateY(-50%) !important;
margin-top: 0 !important;
right: 5px !important;
}
.secondary-menu {
background: #fff !important;
border-bottom: 1px solid #e2e8f0 !important;
position: sticky !important;
top: 45px !important;
z-index: 8999 !important;
width: 100% !important;
overflow-x: auto !important;
overflow-y: hidden !important;
-webkit-overflow-scrolling: touch !important;
scrollbar-width: none !important;
/* Firefox */
-ms-overflow-style: none !important;
/* IE/Edge */
}
.secondary-menu::-webkit-scrollbar {
display: none !important;
/* Chrome, Safari, Opera */
}
.secondary-menu ul {
display: flex !important;
flex-wrap: nowrap !important;
/* Prevent wrapping to multiple lines */
gap: 6px;
padding: 8px 0 !important;
margin: 0 !important;
list-style: none !important;
}
.secondary-menu ul li {
float: none !important;
flex-shrink: 0 !important;
/* Prevent text shrinking */
}
.secondary-menu ul li a {
font-size: 11px !important;
font-weight: 700 !important;
border: 1px solid #e2e8f0;
border-radius: 999px;
background: #f8fafc;
padding: 6px 12px !important;
transition: all 0.2s ease !important;
}
.secondary-menu ul li a:hover {
background: #0f172a !important;
color: #ffffff !important;
border-color: #0f172a !important;
}
.content {
background: transparent !important;
padding: 18px 0 30px 0 !important;
min-height: 600px;
}
.breaking-news {
border: 1px solid #e2e8f0;
border-radius: 0px !important;
box-shadow: 0 6px 20px rgba(15, 23, 42, 0.04);
position: relative;
z-index: 20;
}
.breaking-news .the-title {
font-size: 12px !important;
padding: 9px 14px !important;
color: #ffffff !important;
position: relative;
z-index: 21;
}
.breaking-news ul li a {
pointer-events: auto;
position: relative;
z-index: 22;
}
.breaking-news ul li {
margin-top: 5px !important;
}
.main-content,
.block-content,
.widget,
.article-block,
.article-block-big,
.featured-block {
border-radius: 0px !important;
}
.main-content {
display: block !important;
}
.widget,
.content-block.left .block,
.main-sidebar.right .block,
.main-sidebar .block {
border: 1px solid #e2e8f0 !important;
background: #ffffff !important;
box-shadow: 0 6px 18px rgba(15, 23, 42, 0.04) !important;
border-radius: 0px !important;
box-sizing: border-box;
}
.widget,
.content-block.left .block,
.main-sidebar.right .block,
.main-sidebar .block {
padding: 16px !important;
margin-bottom: 16px !important;
}
.list-title,
.widget h3,
.widget .widget-title,
.content-block.left .block .list-title {
margin-top: 0 !important;
margin-bottom: 16px !important;
padding: 0 0 8px 0 !important;
border-bottom: 2px solid #e2e8f0 !important;
font-size: 14px !important;
font-weight: 700 !important;
text-transform: uppercase !important;
color: #0f172a !important;
background: transparent !important;
letter-spacing: 0 !important;
}
.article-content h1,
.article-content h2,
.main-content h1.judul-berita,
.main-content .judul-berita,
.main-content .article-title h1 {
font-family: Arial, Helvetica, sans-serif !important;
font-weight: 700 !important;
font-size: clamp(26px, 3vw, 34px) !important;
line-height: 1.28 !important;
margin-bottom: 12px !important;
}
.main-content p,
.main-content li,
.main-content span,
.main-content td {
color: #334155 !important;
line-height: 1.7 !important;
}
.article-photo,
.article-photo img,
.the-image img {
border-radius: 0px !important;
}
.meta,
.meta-date,
.h-comment {
color: #64748b !important;
}
.footer .wrapper {
width: 95% !important;
max-width: 1250px !important;
margin: 0 auto !important;
padding: 0 20px;
box-sizing: border-box;
}
.footer p,
.footer span,
.footer div {
color: inherit !important;
}
@media (max-width: 1024px) {
.wrapper {
width: 95% !important;
max-width: 1250px !important;
margin: 0 auto !important;
padding: 0 0px;
box-sizing: border-box;
}
.header .header-menu {
width: 100% !important;
margin: 8px 0 0 0 !important;
}
.header .header-addons {
float: left !important;
text-align: left !important;
margin-top: 8px !important;
}
}
@media (max-width: 767px) {
/* Stack metadata vertically in article lists */
.article-block .meta,
.article-block-big .meta,
.wide-article .meta,
.sidebar-article-list .meta,
.category-article-list .meta {
display: flex !important;
flex-direction: column !important;
align-items: flex-start !important;
gap: 4px !important;
}
#Back-to-top {
right: 14px;
bottom: 16px;
}
... .wrapper {
width: auto !important;
max-width: 100% !important;
margin: 0 2px !important;
padding: 0 !important;
box-sizing: border-box;
}
.secondary-menu ul {
gap: 4px;
}
.main-content .article-title h1,
.main-content h1.judul-berita,
.main-content .judul-berita {
font-size: 24px !important;
line-height: 1.32 !important;
}
.widget,
.content-block.left .block,
.main-sidebar.right .block,
.main-sidebar .block {
padding: 12px !important;
margin-bottom: 12px !important;
}
/* Slider proporsional di HP */
.jssor_1 {
width: 100% !important;
height: 0 !important;
padding-bottom: 50% !important;
/* Aspect ratio 2:1 */
position: relative !important;
overflow: hidden !important;
}
.slides {
width: 100% !important;
height: 100% !important;
position: absolute !important;
top: 0 !important;
left: 0 !important;
}
.jssor_1 img {
width: 100% !important;
height: 100% !important;
object-fit: contain !important;
object-position: center;
}
.jssort09-600-45 {
width: 100% !important;
}
.jssort09-600-45 .p {
width: 100% !important;
}
.jssora05l,
.jssora05r {
width: 30px !important;
height: 30px !important;
background-size: contain !important;
}
.featured-block {
margin-bottom: 12px !important;
}
}
/* Proportional spacing improvements */
.main-content .block,
.main-page .block,
.main-sidebar .widget,
.content-block .widget,
.block-content,
.article-block,
.article-block-big,
.featured-block,
.gallery-widget,
.widget .widget-articles li,
.widget .widget-comments li {
margin-bottom: 18px !important;
}
.main-content .block:last-child,
.main-page .block:last-child,
.main-sidebar .widget:last-child,
.content-block .widget:last-child,
.block-content:last-child,
.article-block:last-child,
.article-block-big:last-child,
.featured-block:last-child,
.gallery-widget:last-child {
margin-bottom: 0 !important;
}
.article-block li,
.article-block-big li {
margin-bottom: 12px !important;
padding-bottom: 12px !important;
}
.article-block li:last-child,
.article-block-big li:last-child {
margin-bottom: 0 !important;
padding-bottom: 0 !important;
}
.double-block .content-block.main {
width: calc(68.42% - 10px) !important;
padding-right: 3px;
box-sizing: border-box;
}
.double-block .content-block.left:not(.main),
.double-block .content-block.right:not(.main) {
width: 31.58% !important;
box-sizing: border-box;
}
.double-block .content-block.right {
margin-left: 3px !important;
}
.widget>h3,
.list-title {
margin-bottom: 14px !important;
}
@media (max-width: 1024px) {
.double-block .content-block.right {
margin-left: 0 !important;
}
.main-content .block,
.main-page .block,
.main-sidebar .widget,
.content-block .widget,
.block-content,
.article-block,
.article-block-big,
.featured-block {
margin-bottom: 14px !important;
}
}
/* Fix proportional two-column layout so right sidebar stays aligned with 20px gap */
.main-content>.main-page.left {
width: calc(76% - 10px) !important;
}
.main-content>.main-sidebar.right {
width: 24% !important;
}
.single-block .content-block {
width: 100% !important;
}
.main-content img,
.main-content iframe,
.main-content video {
max-width: 100% !important;
height: auto !important;
}
@media (max-width: 1200px) {
.main-content>.main-page.left,
.main-content>.main-sidebar.right {
width: 100% !important;
float: none !important;
}
.double-block .content-block,
.double-block .content-block.left,
.double-block .content-block.main,
.double-block .content-block.right {
width: 100% !important;
float: none !important;
margin-left: 0 !important;
}
}
/* Breaking News spacing & alignment fix */
.breaking-news .slide_container {
margin-left: 130px !important;
}
.breaking-news ul li:after {
top: 50% !important;
transform: translateY(-50%) !important;
}
@media (max-width: 767px) {
.breaking-news {
height: 30px !important;
line-height: 30px !important;
overflow: hidden !important;
}
.breaking-news .the-title {
float: left !important;
display: block !important;
width: auto !important;
padding: 0 10px !important;
font-size: 11px !important;
line-height: 30px !important;
text-align: left !important;
}
.breaking-news .slide_container {
margin-left: 112px !important;
text-align: left !important;
height: 30px !important;
}
.breaking-news ul li {
margin: 0 !important;
height: 30px !important;
line-height: 30px !important;
font-size: 12.5px !important;
}
.breaking-news ul li a {
display: block !important;
line-height: 30px !important;
white-space: nowrap !important;
text-overflow: ellipsis !important;
overflow: hidden !important;
max-width: calc(100vw - 150px) !important;
}
}
/* Weather Widget style polish */
.ideaboxWeather {
border-radius: 0px !important;
overflow: hidden !important;
margin-bottom: 20px !important;
box-shadow: 0 6px 18px rgba(15, 23, 42, 0.04) !important;
}
/* Main Menu Interactive Micro-animations */
.main-menu .the-menu>li>a {
transition: all 0.25s ease !important;
}
.main-menu .the-menu>li:hover>a {
background-color: rgba(255, 255, 255, 0.15) !important;
color: #ffffff !important;
}
/* Modern Premium Footer Styles */
.footer {
background: #0b1220 !important;
color: #9fb0c8 !important;
border-top: none !important;
margin-top: 30px !important;
}
.footer .wrapper {
width: 95% !important;
max-width: 1250px !important;
margin: 0 auto !important;
padding: 0 10px;
box-sizing: border-box;
}
.footer p,
.footer span,
.footer div,
.footer a {
color: #9fb0c8 !important;
}
.footer a:hover {
color: #ffffff !important;
}
.footer-top {
padding: 34px 0 24px 0;
border-bottom: none !important;
}
.footer-grid {
display: grid;
grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
gap: 28px;
}
.footer-col {
display: flex;
flex-direction: column;
}
.footer-logo-container {
margin-bottom: 12px;
}
.footer-logo-img {
max-height: 42px;
width: auto;
filter: brightness(0) invert(1) !important;
}
.footer-brand-desc {
font-size: 13px !important;
line-height: 1.7 !important;
margin-bottom: 14px !important;
color: #9fb0c8 !important;
max-width: 300px;
}
.footer-social-links {
display: flex;
gap: 8px;
flex-wrap: wrap;
}
.footer-social-links .social-link {
font-size: 12px;
font-weight: 600;
padding: 6px 10px;
border-radius: 999px;
background: rgba(255, 255, 255, 0.06);
border: 1px solid rgba(255, 255, 255, 0.16);
transition: all 0.2s ease;
text-decoration: none;
}
.footer-social-links .social-link:hover {
background: rgba(255, 255, 255, 0.14);
border-color: rgba(255, 255, 255, 0.3);
color: #ffffff !important;
}
.footer-col-title {
font-size: 13px !important;
font-weight: 700 !important;
color: #ffffff !important;
margin-bottom: 12px !important;
text-transform: uppercase;
letter-spacing: 0.06em;
position: relative;
padding-bottom: 8px;
}
.footer-col-title::after {
content: '';
position: absolute;
left: 0;
bottom: 0;
width: 28px;
height: 2px;
background: #4aa8ff;
border-radius: 999px;
}
.footer-links-list {
display: block !important;
list-style: none !important;
padding: 0 !important;
margin: 0 !important;
}
.footer-links-list li {
margin-left: 0 !important;
margin-right: 0 !important;
margin-bottom: 8px !important;
padding-left: 0 !important;
padding-bottom: 0 !important;
float: none !important;
}
.footer-links-list li:after {
display: none !important;
}
.footer-links-list li a {
font-size: 13px !important;
font-weight: 500 !important;
text-decoration: none;
transition: all 0.2s ease;
padding-left: 0 !important;
opacity: 0.95;
}
.footer-links-list li a:hover {
color: #ffffff !important;
opacity: 1;
}
.footer-bottom {
background: #080f1c;
padding: 14px 0;
}
.footer-bottom-flex {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 10px;
font-size: 12px;
line-height: 1.5;
}
.footer-bottom .copyright-text strong {
color: #ffffff !important;
}
.footer-meta-links {
display: flex;
align-items: center;
gap: 14px;
}
.footer-meta-links a {
font-size: 12px;
color: #9fb0c8 !important;
}
.footer-meta-links a:hover {
color: #ffffff !important;
}
.footer-news-copy {
font-size: 12.5px;
line-height: 1.6;
margin-bottom: 10px;
}
.footer-news-form {
display: flex;
gap: 8px;
}
.footer-news-input {
flex: 1;
min-width: 0;
border: 1px solid rgba(255, 255, 255, 0.18);
background: rgba(255, 255, 255, 0.06);
color: #ffffff;
border-radius: 8px;
padding: 9px 11px;
font-size: 12px;
}
.footer-news-input::placeholder {
color: #9fb0c8;
}
.footer-news-btn {
border: 0;
background: #0f79c6;
color: #ffffff;
border-radius: 8px;
padding: 9px 12px;
font-size: 12px;
font-weight: 700;
cursor: pointer;
}
.footer-news-btn:hover {
background: #154ea7;
}
@media (max-width: 1024px) {
.footer-grid {
grid-template-columns: 1fr 1fr;
gap: 16px;
}
}
@media (max-width: 900px) {
.secondary-menu {
display: block !important;
/* Ensure it is visible on tablets */
}
}
@media (max-width: 767px) {
/* Header Responsive Layout */
.header {
position: fixed !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
width: 100% !important;
padding: 8px 0 0 0 !important;
/* Compact padding, no bottom padding so tag list is flush */
z-index: 9990 !important;
/* Sits below mobile backdrop (9998) and drawer (9999) */
box-shadow: 0 4px 12px rgba(15, 23, 42, 0.12) !important;
box-sizing: border-box !important;
}
.boxed {
padding-top: 160px !important;
/* Prevent content from slipping underneath fixed header + secondary menu */
}
.secondary-menu {
display: block !important;
/* Ensure visible on mobile */
position: relative !important;
/* Normal flow, naturally below search bar inside fixed header */
top: auto !important;
left: auto !important;
right: auto !important;
width: 100% !important;
z-index: auto !important;
box-shadow: none !important;
/* Parent header handles outer box shadow */
}
.secondary-menu .wrapper {
width: 100% !important;
max-width: 100% !important;
padding: 0 8px !important;
margin: 0 !important;
box-sizing: border-box !important;
overflow: visible !important;
}
.header>.wrapper {
position: relative !important;
/* Ensure hamburger button aligns with logo */
width: auto !important;
max-width: 100% !important;
margin: 0 2px !important;
padding: 0 8px !important;
box-sizing: border-box;
}
.header .header-logo {
float: left !important;
margin: 0 !important;
display: flex !important;
align-items: center !important;
height: 38px !important;
}
.header .header-logo img {
max-height: 38px !important;
width: auto !important;
}
a.mobile-menu {
color: #ffffff !important;
font-size: 24px !important;
position: absolute !important;
top: 0 !important;
right: 8px !important;
width: 38px !important;
height: 38px !important;
background: rgba(255, 255, 255, 0.15) !important;
border: 1px solid rgba(255, 255, 255, 0.25) !important;
border-radius: 6px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
padding: 0 !important;
margin: 0 !important;
box-sizing: border-box !important;
transition: all 0.2s ease !important;
}
a.mobile-menu:hover {
background: rgba(255, 255, 255, 0.25) !important;
}
.header .header-menu {
display: none !important;
}
.header .header-addons {
display: none !important;
/* Hide empty addons to save space */
}
.header-addons .city {
display: none !important;
}
.header-addons .header-search {
display: block !important;
width: 100% !important;
margin: 25px 0 0 0 !important;
position: relative !important;
}
.header-addons .header-search form {
display: flex !important;
width: 100% !important;
position: relative !important;
}
/* Hide nav search on mobile - replaced by mobile-search-bar */
.main-menu-search {
display: none !important;
}
/* Mobile Search Bar - below logo & hamburger */
.mobile-search-bar {
display: block !important;
width: 100% !important;
clear: both !important;
padding: 20px 0 10px 0 !important
/* Bottom padding separates search input from tag list */
}
.mobile-search-bar form {
display: flex !important;
width: 100% !important;
background: rgba(255, 255, 255, 0.15) !important;
border: 1px solid rgba(255, 255, 255, 0.25) !important;
border-radius: 8px !important;
overflow: hidden !important;
transition: all 0.2s ease !important;
}
.mobile-search-bar form:focus-within {
background: rgba(255, 255, 255, 0.25) !important;
border-color: rgba(255, 255, 255, 0.5) !important;
}
.mobile-search-input {
flex: 1 !important;
background: transparent !important;
border: none !important;
outline: none !important;
color: #ffffff !important;
font-size: 13px !important;
padding: 8px 12px !important;
box-sizing: border-box !important;
}
.mobile-search-input::placeholder {
color: rgba(255, 255, 255, 0.6) !important;
}
.mobile-search-btn {
background: transparent !important;
border: none !important;
color: rgba(255, 255, 255, 0.85) !important;
font-size: 14px !important;
padding: 8px 12px !important;
cursor: pointer !important;
transition: color 0.2s ease !important;
}
.mobile-search-btn:hover {
color: #ffffff !important;
}
.search-input-nav {
flex: 1 !important;
width: auto !important;
min-width: 0 !important;
box-sizing: border-box !important;
background: rgba(255, 255, 255, 0.95) !important;
border: 1px solid #cbd5e1 !important;
color: #1e293b !important;
padding: 8px 14px !important;
}
.search-input-nav::placeholder {
color: #64748b !important;
}
.search-input,
.search-input:focus {
width: 100% !important;
max-width: 100% !important;
padding: 8px 45px 8px 16px !important;
border-radius: 20px !important;
font-size: 13px !important;
box-sizing: border-box !important;
background: #ffffff !important;
color: #1e293b !important;
border: 1px solid #cbd5e1 !important;
}
.search-button {
position: absolute !important;
right: 5px !important;
top: 50% !important;
transform: translateY(-50%) !important;
background-color: transparent !important;
border: none !important;
width: 32px !important;
height: 32px !important;
cursor: pointer !important;
margin: 0 !important;
padding: 0 !important;
}
/* Footer Responsive Layout */
.footer {
text-align: center !important;
}
.footer-top {
padding: 24px 0 18px 0 !important;
}
.footer-grid {
grid-template-columns: 1fr 1fr !important;
gap: 24px !important;
}
.footer-col.brand-col {
grid-column: span 2 !important;
}
.footer-col.newsletter-col {
grid-column: span 2 !important;
margin-top: 8px !important;
}
.footer-logo-container {
text-align: center !important;
margin-bottom: 10px !important;
}
.footer-brand-desc {
text-align: center !important;
margin: 0 auto 14px auto !important;
max-width: 100% !important;
}
.footer-social-links {
justify-content: center !important;
}
.footer-col-title {
margin-bottom: 12px !important;
text-align: center !important;
}
.footer-col-title::after {
left: 50% !important;
transform: translateX(-50%) !important;
}
.footer-col.list-col {
text-align: left !important;
}
.footer-col.list-col .footer-col-title {
text-align: left !important;
}
.footer-col.list-col .footer-col-title::after {
left: 0 !important;
transform: none !important;
}
.footer-links-list li {
margin-bottom: 8px !important;
}
.footer-news-copy {
text-align: center !important;
margin-bottom: 12px !important;
}
.footer-news-form {
display: flex !important;
flex-direction: row !important;
gap: 8px !important;
max-width: 100% !important;
margin: 0 auto !important;
}
.footer-news-input {
flex: 1 !important;
width: auto !important;
min-width: 0 !important;
box-sizing: border-box !important;
}
.footer-news-btn {
width: auto !important;
flex-shrink: 0 !important;
box-sizing: border-box !important;
}
.footer-bottom {
padding: 14px 0 !important;
}
.footer-bottom-flex {
flex-direction: column !important;
text-align: center !important;
gap: 12px !important;
}
.footer-meta-links {
justify-content: center !important;
flex-wrap: wrap !important;
gap: 12px !important;
}
}
/* Force white text inside central column block headers */
.block-title h2,
.block-title h2 a,
.block-title a,
.block-title span {
color: #ffffff !important;
}
/* Sekilas Info card proportional tuning */
.sekilas-card .sekilas-list li {
display: flex;
align-items: flex-start;
gap: 10px;
margin-bottom: 10px !important;
padding-bottom: 10px !important;
}
.sekilas-card .sekilas-list li:last-child {
margin-bottom: 0 !important;
padding-bottom: 0 !important;
}
.sekilas-card .sekilas-list .article-photo {
float: none !important;
width: 100% !important;
height: 180px !important;
margin-right: 0 !important;
}
.sekilas-card .sekilas-list .article-photo img {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
border-radius: 4px;
}
.sekilas-card .sekilas-list .article-content {
margin-left: 0 !important;
min-width: 0;
}
.sekilas-card .sekilas-list .article-content h4 {
margin: 0 0 5px 0 !important;
line-height: 1.38 !important;
}
.sekilas-card .sekilas-list .article-content h4 a {
font-size: 13px !important;
font-weight: 600 !important;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.sekilas-card .sekilas-list .meta,
.sekilas-card .sekilas-list .meta a {
font-size: 11px !important;
color: #64748b !important;
}
/* Detail berita proportional tuning */
.full-width .article-title {
background: #ffffff;
border: 1px solid #e2e8f0;
padding: 18px 20px !important;
margin-bottom: 14px;
}
.full-width .article-title h1 {
font-size: clamp(28px, 3.2vw, 40px) !important;
line-height: 1.25 !important;
margin-bottom: 8px !important;
letter-spacing: -0.01em;
}
.full-width .article-title>span {
font-size: 17px !important;
line-height: 1.6 !important;
color: #475569 !important;
}
.full-width .article-title .author {
margin-top: 10px !important;
padding-top: 10px;
border-top: 1px solid #e2e8f0;
}
.single-block .content-block.main.left .block-content {
padding: 20px !important;
}
.single-block .shortcode-content .column12 {
max-width: 760px;
margin: 0 auto;
}
.single-block .shortcode-content .column12 p,
.single-block .shortcode-content .column12 li {
font-size: 17px;
line-height: 1.85;
color: #1f2937;
}
/* Force detail-news content to follow a single font, even if editor HTML contains inline font declarations */
.single-block .shortcode-content .column12 {
font-family: inherit !important;
}
.single-block .shortcode-content .column12 p,
.single-block .shortcode-content .column12 li,
.single-block .shortcode-content .column12 span,
.single-block .shortcode-content .column12 div,
.single-block .shortcode-content .column12 a,
.single-block .shortcode-content .column12 strong,
.single-block .shortcode-content .column12 em,
.single-block .shortcode-content .column12 blockquote,
.single-block .shortcode-content .column12 h1,
.single-block .shortcode-content .column12 h2,
.single-block .shortcode-content .column12 h3,
.single-block .shortcode-content .column12 h4,
.single-block .shortcode-content .column12 h5,
.single-block .shortcode-content .column12 h6 {
font-family: inherit !important;
}
.single-block .shortcode-content .column12 h2,
.single-block .shortcode-content .column12 h3,
.single-block .shortcode-content .column12 h4 {
margin-top: 1.2em;
margin-bottom: 0.6em;
line-height: 1.35;
}
.single-block .shortcode-content .column12 img {
display: block;
max-width: 100% !important;
height: auto !important;
border-radius: 6px;
margin: 12px auto 14px auto;
}
.single-block .shortcode-content .column12 iframe {
border-radius: 6px;
}
.single-block .article-tags.tag-cloud {
margin-top: 14px !important;
padding-top: 12px;
border-top: 1px solid #e2e8f0;
}
.single-block #viewcomment.block-title,
.single-block .block-title {
padding: 10px 12px !important;
}
.single-block .comment-block {
font-size: 14px;
}
@media (max-width: 767px) {
.full-width .article-title {
padding: 14px 12px !important;
}
.full-width .article-title h1 {
font-size: 28px !important;
line-height: 1.28 !important;
}
.full-width .article-title>span {
font-size: 15px !important;
}
.single-block .content-block.main.left .block-content {
padding: 0px !important;
padding-top: 10px !important;
}
.single-block .shortcode-content .column12 p,
.single-block .shortcode-content .column12 li {
font-size: 16px;
line-height: 1.75;
}
}
/* Homepage cards proportional tuning */
.main-page .block .block-content {
padding: 16px !important;
}
.main-page .article-block li,
.main-page .article-block-big li {
display: flex;
align-items: flex-start;
gap: 12px;
margin-bottom: 14px !important;
padding-bottom: 14px !important;
}
.main-page .article-block .article-photo,
.main-page .article-block-big .article-photo {
float: none !important;
margin-right: 0 !important;
flex: 0 0 96px;
width: 96px;
}
.main-page .article-block .article-photo img,
.main-page .article-block-big .article-photo img {
width: 96px !important;
height: 68px !important;
object-fit: cover;
border-radius: 4px;
}
/* Custom size for category/tag lists so image is proportional to text */
.main-page .category-article-list>li {
display: flex !important;
align-items: stretch !important;
}
.main-page .category-article-list .article-photo {
flex: 0 0 300px !important;
width: 300px !important;
margin-right: 20px !important;
display: flex !important;
}
.main-page .category-article-list .article-photo a,
.main-page .category-article-list .article-photo .cover {
flex: 1 !important;
display: flex !important;
width: 100% !important;
height: 100% !important;
}
.main-page .category-article-list .article-photo img {
width: 100% !important;
height: 100% !important;
object-fit: cover;
border-radius: 4px;
}
.main-page .article-block .article-content,
.main-page .article-block-big .article-content {
margin-left: 0 !important;
min-width: 0;
}
.main-page .article-block .article-content h4,
.main-page .article-block-big .article-content h4 {
margin: 0 0 6px 0 !important;
line-height: 1.4 !important;
}
.main-page .article-block .article-content h4 a,
.main-page .article-block-big .article-content h4 a {
font-size: 14px !important;
font-weight: 700 !important;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.main-page .article-block .meta,
.main-page .article-block .meta a,
.main-page .article-block-big .meta,
.main-page .article-block-big .meta a {
font-size: 11.5px !important;
line-height: 1.45 !important;
}
@media (min-width: 768px) {
.main-page .wide-article {
display: flex !important;
gap: 16px !important;
margin-bottom: 18px !important;
padding-bottom: 18px !important;
border-bottom: 1px solid #e2e8f0;
}
.main-page .wide-article:last-child {
margin-bottom: 0 !important;
padding-bottom: 0 !important;
border-bottom: 0;
}
.main-page .wide-article .article-photo {
flex: 0 0 170px !important;
width: 170px !important;
float: none !important;
}
.main-page .wide-article .article-photo img {
width: 170px !important;
height: 115px !important;
object-fit: cover;
border-radius: 6px;
}
.main-page .wide-article .article-content {
flex: 1 !important;
margin-left: 0 !important;
display: flex;
flex-direction: column;
justify-content: center;
}
.main-page .wide-article .article-content h2 {
margin: 0 0 6px 0 !important;
line-height: 1.15 !important;
}
.main-page .wide-article .article-content h2 a {
font-size: 18px !important;
font-weight: 700 !important;
color: #0f172a !important;
line-height: 1.15 !important;
display: block;
transition: color 0.2s ease;
}
.main-page .wide-article .article-content h2 a:hover {
color: #3b82f6 !important;
}
.main-page .wide-article .article-content .meta {
font-size: 11.5px !important;
color: #64748b !important;
margin-bottom: 6px !important;
}
.main-page .wide-article .article-content p {
font-size: 13px !important;
line-height: 1.55 !important;
color: #475569 !important;
margin: 0 !important;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
}
.main-page .paragraph-row .column6 .article-block,
.main-page .paragraph-row .column4 .article-block {
margin-bottom: 0 !important;
}
/* Main homepage headline/list cards (Berita Terbaru, Pilihan Redaksi, kategori utama) */
.main-page .double-block .content-block.main .article-block li,
.main-page .double-block .content-block.main .article-block-big li {
gap: 14px;
margin-bottom: 16px !important;
padding-bottom: 16px !important;
}
.main-page .double-block .content-block.main .article-block .article-photo.hidden-xs {
flex: 0 0 180px !important;
width: 180px !important;
}
.main-page .double-block .content-block.main .article-block .article-photo.hidden-xs img {
width: 180px !important;
height: 100px !important;
object-fit: cover;
border-radius: 4px;
}
.main-page .double-block .content-block.main .article-block .article-content h2,
.main-page .double-block .content-block.main .article-block .article-content h4 {
margin: 0 0 6px 0 !important;
line-height: 1.4 !important;
}
.main-page .double-block .content-block.main .article-block .article-content h2 a,
.main-page .double-block .content-block.main .article-block .article-content h4 a {
font-size: 16px !important;
font-weight: 700 !important;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.main-page .double-block .content-block.main .article-block .article-content p {
font-size: 14px !important;
line-height: 1.65 !important;
margin-top: 4px;
}
.main-page .double-block .content-block.main .article-block .meta,
.main-page .double-block .content-block.main .article-block .meta a {
font-size: 12px !important;
line-height: 1.45 !important;
}
/* Right sidebar cards proportional tuning */
.main-sidebar.right .block .article-block li,
.main-sidebar.right .widget .article-block li {
display: flex;
align-items: flex-start;
gap: 10px;
margin-bottom: 12px !important;
padding-bottom: 12px !important;
}
.main-sidebar.right .block .article-block .article-photo,
.main-sidebar.right .widget .article-block .article-photo {
float: none !important;
margin-right: 0 !important;
flex: 0 0 84px;
width: 84px;
}
.main-sidebar.right .block .article-block .article-photo img,
.main-sidebar.right .widget .article-block .article-photo img {
width: 84px !important;
height: 60px !important;
object-fit: cover;
border-radius: 4px;
}
.main-sidebar.right .block .article-block .article-content,
.main-sidebar.right .widget .article-block .article-content {
margin-left: 0 !important;
min-width: 0;
}
.main-sidebar.right .block .article-block .article-content h4,
.main-sidebar.right .widget .article-block .article-content h4 {
margin: 0 0 5px 0 !important;
line-height: 1.35 !important;
}
.main-sidebar.right .block .article-block .article-content h4 a,
.main-sidebar.right .widget .article-block .article-content h4 a {
font-size: 13.5px !important;
font-weight: 700 !important;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.main-sidebar.right .block .article-block .meta,
.main-sidebar.right .block .article-block .meta a,
.main-sidebar.right .widget .article-block .meta,
.main-sidebar.right .widget .article-block .meta a {
font-size: 11px !important;
line-height: 1.45 !important;
color: #64748b !important;
}
@media (max-width: 767px) {
.main-page .block .block-content {
padding: 12px !important;
}
.main-page .article-block li,
.main-page .article-block-big li {
gap: 10px;
margin-bottom: 12px !important;
padding-bottom: 12px !important;
}
.main-page .article-block .article-photo,
.main-page .article-block-big .article-photo {
flex: 0 0 78px;
width: 78px;
}
.main-page .article-block .article-photo img,
.main-page .article-block-big .article-photo img {
width: 78px !important;
height: 56px !important;
}
.main-page .wide-article {
display: flex !important;
gap: 12px !important;
margin-bottom: 14px !important;
padding-bottom: 14px !important;
border-bottom: 1px solid #f1f5f9 !important;
align-items: flex-start !important;
float: none !important;
width: 100% !important;
}
.main-page .wide-article:last-child {
margin-bottom: 0 !important;
padding-bottom: 0 !important;
border-bottom: none !important;
}
.main-page .wide-article .article-photo.visible-xs {
flex: 0 0 100px !important;
width: 100px !important;
height: 70px !important;
border-radius: 6px !important;
overflow: hidden !important;
margin: 0 !important;
padding: 0 !important;
float: none !important;
}
.main-page .wide-article .article-photo.visible-xs img {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
border-radius: 6px !important;
}
.main-page .wide-article .article-content {
flex: 1 !important;
margin: 0 !important;
padding: 0 !important;
min-width: 0 !important;
display: flex !important;
flex-direction: column !important;
}
.main-page .wide-article .article-content h4.visible-xs {
margin: 0 0 -5px 0 !important;
line-height: 1.3 !important;
font-size: 13.5px !important;
}
.main-page .wide-article .article-content h4.visible-xs a {
font-size: 13.5px !important;
font-weight: 600 !important;
color: #1e293b !important;
line-height: 1.3 !important;
display: -webkit-box !important;
-webkit-line-clamp: 2 !important;
-webkit-box-orient: vertical !important;
overflow: hidden !important;
text-decoration: none !important;
}
.wide-article .meta .category-link {
margin: 0 0 -5px 0 !important;
}
.main-page .wide-article .article-content .meta {
font-size: 11px !important;
color: #64748b !important;
margin: 4px 0 0 0 !important;
display: flex !important;
flex-direction: column !important;
align-items: flex-start !important;
gap: 4px !important;
}
.main-page .wide-article .article-content p {
display: none !important;
}
.main-page .double-block .content-block.main .article-block .article-photo.hidden-xs {
flex: 0 0 78px !important;
width: 78px !important;
}
.main-page .double-block .content-block.main .article-block .article-photo.hidden-xs img {
width: 78px !important;
height: 56px !important;
}
.main-page .double-block .content-block.main .article-block .article-content h2 a,
.main-page .double-block .content-block.main .article-block .article-content h4 a {
font-size: 14px !important;
}
.main-sidebar.right .block .article-block .article-photo,
.main-sidebar.right .widget .article-block .article-photo {
flex: 0 0 74px;
width: 74px;
}
.main-sidebar.right .block .article-block .article-photo img,
.main-sidebar.right .widget .article-block .article-photo img {
width: 74px !important;
height: 54px !important;
}
.main-sidebar.right .block .article-block .article-content h4 a,
.main-sidebar.right .widget .article-block .article-content h4 a {
font-size: 13px !important;
}
}
/* Berita Foto card proportional tuning */
.latest-galleries .gallery-widget {
border: none !important;
border-radius: 0 !important;
padding: 0 !important;
margin-bottom: 0 !important;
background: transparent !important;
box-shadow: none !important;
}
.latest-galleries .gallery-widget .gallery-photo {
margin-bottom: 0 !important;
border-radius: 8px !important;
width: 100% !important;
position: relative !important;
overflow: hidden !important;
}
.latest-galleries .gallery-widget .gallery-photo ul {
display: flex !important;
flex-wrap: nowrap !important;
padding: 0 !important;
margin: 0 !important;
height: 150px !important;
width: auto !important;
}
.latest-galleries .gallery-widget .gallery-photo ul li {
display: block !important;
flex-shrink: 0 !important;
width: 100% !important;
height: 150px !important;
margin: 0 !important;
padding: 0 !important;
box-sizing: border-box !important;
}
.latest-galleries .gallery-widget .gallery-photo ul li img {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
border-radius: 8px !important;
}
.latest-galleries .gallery-widget .gallery-photo>a {
width: 32px !important;
height: 32px !important;
line-height: 28px !important;
border-radius: 50% !important;
background: rgba(15, 23, 42, 0.6) !important;
color: #ffffff !important;
font-size: 24px !important;
font-weight: bold !important;
font-family: Arial, sans-serif !important;
text-shadow: none !important;
top: 50% !important;
transform: translateY(-50%) !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
opacity: 0 !important;
transition: all 0.3s ease !important;
text-decoration: none !important;
}
.latest-galleries .gallery-widget:hover .gallery-photo>a {
opacity: 1 !important;
}
.latest-galleries .gallery-widget .gallery-photo>a.slide-left {
left: 8px !important;
}
.latest-galleries .gallery-widget .gallery-photo>a.slide-right {
right: 8px !important;
}
.latest-galleries .gallery-widget .gallery-photo>a:hover {
background: #000 !important;
color: #ffffff !important;
}
@media (max-width: 767px) {
.latest-galleries .gallery-widget {
padding: 0 !important;
}
.latest-galleries .gallery-widget .gallery-photo ul,
.latest-galleries .gallery-widget .gallery-photo ul li,
.latest-galleries .gallery-widget .gallery-photo ul li img {
height: 130px !important;
}
.latest-galleries .gallery-widget .gallery-photo>a {
width: 28px !important;
height: 28px !important;
line-height: 24px !important;
font-size: 20px !important;
opacity: 0.8 !important;
}
}
/* Album detail page proportional tuning */
.album-detail-page .block .block-title {
padding: 10px 12px !important;
}
.album-detail-page .block .block-title h2 {
line-height: 1.35 !important;
}
.album-detail-page .album-detail-content {
padding: 18px !important;
}
.album-detail-page .album-photo-list {
margin-top: 8px;
}
.album-detail-page .album-photo-item {
width: 100% !important;
margin-left: 0 !important;
border-bottom: 1px solid #e2e8f0;
padding-bottom: 16px !important;
margin-bottom: 16px !important;
}
.album-detail-page .album-photo-item:last-child {
border-bottom: 0;
margin-bottom: 0 !important;
padding-bottom: 0 !important;
}
.album-detail-page .album-photo-item .article-photo {
width: 100%;
}
.album-detail-page .album-photo-item .article-photo h3 {
font-size: 20px;
line-height: 1.35;
margin-bottom: 10px;
}
.album-detail-page .album-photo-item .jslghtbx-thmb {
width: 100% !important;
max-width: 760px;
display: block;
border-radius: 6px;
margin: 0 auto 10px auto;
object-fit: cover;
}
.album-detail-page .album-photo-item .article-photo p {
max-width: 760px;
margin: 0 auto;
font-size: 15px;
line-height: 1.7;
color: #334155;
}
.album-detail-page .pagination {
margin-top: 16px;
}
@media (max-width: 767px) {
.album-detail-page .album-detail-content {
padding: 12px !important;
}
.album-detail-page .album-photo-item .article-photo h3 {
font-size: 17px;
}
.album-detail-page .album-photo-item .article-photo p {
font-size: 14px;
line-height: 1.65;
}
}
/* Berita Utama proportional tuning */
.main-page .featured-block {
border: 1px solid #e2e8f0;
border-radius: 6px;
padding: 10px;
background: #ffffff;
}
.main-page .featured-block .jssor_1 {
width: 100% !important;
max-width: 570px !important;
height: 320px !important;
margin: 0 auto !important;
border-radius: 4px;
overflow: hidden;
}
.main-page .featured-block .slides {
width: 570px !important;
height: 320px !important;
}
.main-page .featured-block .jssort09-600-45 {
width: 570px !important;
height: 52px !important;
}
.main-page .featured-block .jssort09-600-45 .p {
width: 570px !important;
height: 52px !important;
}
.main-page .featured-block .jssort09-600-45 .t {
font-size: 16px !important;
line-height: 52px !important;
padding-left: 12px !important;
}
@media (max-width: 767px) {
.main-page .featured-block {
padding: 8px;
}
.main-page .featured-block .jssor_1 {
height: 70px !important;
}
.main-page .featured-block .slides {
height: 260px !important;
}
.main-page .featured-block .jssort09-600-45 {
height: 60px !important;
}
.main-page .featured-block .jssort09-600-45 .p {
height: 65px !important;
}
.main-page .featured-block .jssort09-600-45 .t {
font-size: 13px !important;
line-height: 44px !important;
}
.main-page .featured-block .jssorb01 {
margin-right: 10px;
}
}
/* ==========================================================================
Modern & Professional Mobile Sidebar Menu Override
========================================================================== */
@media (max-width: 1024px) {
/* Stop the page content shift */
body.menu-active .boxed {
margin-left: 0 !important;
transform: none !important;
}
/* Backdrop blur escape-overlay */
.escape-mobile-menu {
position: fixed !important;
top: 0 !important;
right: 0 !important;
bottom: 0 !important;
left: 0 !important;
width: 100% !important;
height: 100vh !important;
background: rgba(15, 23, 42, 0.6) !important;
backdrop-filter: blur(4px) !important;
-webkit-backdrop-filter: blur(4px) !important;
z-index: 9998 !important;
opacity: 0 !important;
visibility: hidden !important;
transition: opacity 0.35s ease, visibility 0.35s ease !important;
}
body.menu-active .escape-mobile-menu {
opacity: 1 !important;
visibility: visible !important;
}
/* Sliding Drawer Menu */
.themenumobile {
display: block !important;
position: fixed !important;
top: 0 !important;
left: 0 !important;
width: 280px !important;
max-width: 80% !important;
height: 100vh !important;
background: #111827 !important;
/* Slate 900 */
box-shadow: 4px 0 24px rgba(0, 0, 0, 0.35) !important;
z-index: 9999 !important;
overflow-x: hidden !important;
overflow-y: auto !important;
transform: translateX(-100%) !important;
opacity: 1 !important;
transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
body.menu-active .themenumobile {
transform: translateX(0) !important;
}
/* Sidebar Logo Header */
.mobile-menu-logo {
display: flex !important;
align-items: center !important;
margin: 0 !important;
padding: 22px 20px 16px 20px !important;
border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}
.mobile-menu-logo a {
display: block !important;
line-height: 1 !important;
}
.mobile-menu-logo img {
max-height: 40px !important;
width: auto !important;
display: block !important;
}
/* List items */
.themenumobile>ul {
margin: 0 !important;
padding: 12px 0 !important;
list-style: none !important;
}
.themenumobile ul li {
display: block !important;
margin: 0 !important;
padding: 0 !important;
list-style: none !important;
}
.themenumobile ul li a {
display: block !important;
padding: 14px 20px !important;
font-size: 14px !important;
font-weight: 600 !important;
color: #d1d5db !important;
border-bottom: 1px solid rgba(255, 255, 255, 0.03) !important;
text-decoration: none !important;
transition: all 0.25s ease !important;
}
.themenumobile ul li a:hover,
.themenumobile ul li.active>a {
background: rgba(255, 255, 255, 0.04) !important;
color: #ffffff !important;
padding-left: 26px !important;
}
/* Submenus nested */
.themenumobile ul li ul {
display: none;
/* Hide by default, toggled via JS */
background: rgba(0, 0, 0, 0.2) !important;
border-left: 3px solid #5a9e25 !important;
padding: 4px 0 !important;
margin: 0 !important;
list-style: none !important;
}
.themenumobile ul li ul li a {
padding: 10px 10px 10px 32px !important;
font-size: 13px !important;
font-weight: 500 !important;
color: #9ca3af !important;
}
.themenumobile ul li ul li a:hover {
color: #ffffff !important;
padding-left: 36px !important;
}
/* Mobile Submenu Arrow Toggle */
.themenumobile ul li {
position: relative !important;
}
.themenumobile ul li.has-submenu>a {
padding-right: 50px !important;
}
.themenumobile .mobile-arrow {
position: absolute !important;
right: 10px !important;
top: 8px !important;
width: 32px !important;
height: 32px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
cursor: pointer !important;
z-index: 10 !important;
transition: transform 0.3s ease !important;
}
.themenumobile .mobile-arrow::after {
content: "" !important;
display: block !important;
width: 6px !important;
height: 6px !important;
border-right: 2px solid #9ca3af !important;
border-bottom: 2px solid #9ca3af !important;
transform: rotate(45deg) !important;
transition: transform 0.3s ease, border-color 0.3s ease !important;
}
.themenumobile ul li.submenu-open>.mobile-arrow {
transform: rotate(180deg) !important;
}
.themenumobile ul li.submenu-open>.mobile-arrow::after {
border-color: #ffffff !important;
}
}
/* Premium Category Article List styling */
.main-page .category-article-list {
margin: 0 !important;
padding: 0 !important;
list-style: none !important;
}
.main-page .category-article-list li {
display: flex !important;
gap: 20px !important;
padding: 16px !important;
background: #ffffff !important;
border: 1px solid #e2e8f0 !important;
border-radius: 12px !important;
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.02), 0 2px 4px -1px rgba(0, 0, 0, 0.01) !important;
transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
align-items: flex-start !important;
margin-bottom: 12px !important;
}
.main-page .category-article-list li:last-child {
margin-bottom: 0 !important;
}
.main-page .category-article-list .article-photo {
flex: 0 0 200px !important;
width: 200px !important;
height: 125px !important;
align-self: flex-start !important;
border-radius: 8px !important;
overflow: hidden !important;
background: #f8fafc !important;
float: none !important;
margin: 0 !important;
}
.main-page .category-article-list .article-photo a,
.main-page .category-article-list .article-photo a.hover-effect,
.main-page .category-article-list .article-photo .cover {
display: block !important;
width: 100% !important;
height: 100% !important;
position: relative !important;
margin: 0 !important;
padding: 0 !important;
border: none !important;
box-shadow: none !important;
}
.main-page .category-article-list .article-photo img {
display: block !important;
width: 100% !important;
height: 100% !important;
max-width: 100% !important;
object-fit: cover !important;
transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
margin: 0 !important;
padding: 0 !important;
border: none !important;
}
.main-page .category-article-list li:hover .article-photo img {
transform: scale(1.05) !important;
}
.main-page .category-article-list .article-content {
flex: 1 !important;
margin-left: 0 !important;
display: flex !important;
flex-direction: column !important;
justify-content: flex-start !important;
min-width: 0 !important;
}
.main-page .category-article-list .article-content h2 {
margin: 0 0 4px 0 !important;
line-height: 1.3 !important;
}
.main-page .category-article-list .article-content h2 a {
font-size: 16px !important;
font-weight: 600 !important;
color: #0f172a !important;
transition: color 0.15s ease !important;
display: -webkit-box !important;
-webkit-line-clamp: 2 !important;
-webkit-box-orient: vertical !important;
overflow: hidden !important;
text-decoration: none !important;
}
.main-page .category-article-list li:hover {
transform: translateY(-3px) !important;
border-color: #cbd5e1 !important;
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.05), 0 4px 6px -2px rgba(0, 0, 0, 0.02) !important;
}
.main-page .category-article-list li:hover .article-content h2 a {
color: #000 !important;
}
.main-page .category-article-list .meta {
display: flex !important;
align-items: center !important;
gap: 12px !important;
margin-bottom: 6px !important;
color: #64748b !important;
}
@media (max-width: 767px) {
.main-page .meta {
display: flex !important;
flex-direction: column !important;
align-items: flex-start !important;
gap: 4px !important;
}
}
.main-page .category-article-list .meta a {
font-size: 11.5px !important;
color: #64748b !important;
display: inline-flex !important;
align-items: center !important;
text-decoration: none !important;
}
.main-page .category-article-list .meta a.category-link {
color: #000 !important;
font-weight: 600 !important;
text-transform: uppercase !important;
letter-spacing: 0.5px !important;
}
.main-page .category-article-list .meta a.date-link .icon-text {
margin-right: 4px !important;
}
.main-page .category-article-list .desc-text {
font-size: 13px !important;
color: #475569 !important;
line-height: 1.5 !important;
margin: 0 !important;
display: -webkit-box !important;
-webkit-line-clamp: 2 !important;
-webkit-box-orient: vertical !important;
overflow: hidden !important;
}
@media (max-width: 767px) {
.main-page .category-article-list li {
flex-direction: row !important;
gap: 12px !important;
padding: 12px !important;
align-items: flex-start !important;
border-radius: 8px !important;
margin-bottom: 10px !important;
border: 1px solid #e2e8f0 !important;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.01) !important;
}
.main-page .category-article-list .article-photo {
flex: 0 0 110px !important;
width: 110px !important;
height: 75px !important;
align-self: flex-start !important;
border-radius: 6px !important;
background: #f8fafc !important;
}
.main-page .category-article-list .article-content h2 a {
font-size: 13.5px !important;
font-weight: 600 !important;
line-height: 1.3 !important;
}
.main-page .category-article-list .meta {
gap: 8px !important;
margin-bottom: 0 !important;
margin-top: 4px !important;
flex-wrap: wrap !important;
}
.main-page .category-article-list .meta a {
font-size: 10.5px !important;
}
.main-page .category-article-list .desc-text {
display: none !important;
}
}
/* Modernize block header titles */
.main-page .block-title {
border-radius: 6px !important;
padding: 12px 18px !important;
display: flex !important;
justify-content: space-between !important;
align-items: center !important;
background: #000 !important;
margin-bottom: 20px !important;
}
.main-page .block-title h2 {
font-weight: 700 !important;
font-size: 13px !important;
letter-spacing: 0.5px !important;
color: #ffffff !important;
margin: 0 !important;
text-transform: uppercase !important;
}
.main-page .block-title a.right {
font-size: 11.5px !important;
font-weight: 600 !important;
text-transform: uppercase !important;
color: #ffffff !important;
opacity: 0.9 !important;
transition: opacity 0.2s ease !important;
float: none !important;
}
.main-page .block-title a.right:hover {
opacity: 1 !important;
}
/* Premium Modern Pagination styling */
.pagination {
margin: 30px auto 10px auto !important;
display: flex !important;
justify-content: center !important;
align-items: center !important;
gap: 6px !important;
}
.pagination a,
.pagination span,
.pagination strong,
.pagination .current,
.pagination .nextprev {
background: #f8fafc !important;
color: #475569 !important;
border: 1px solid #e2e8f0 !important;
padding: 6px 12px !important;
border-radius: 6px !important;
font-size: 13px !important;
font-weight: 600 !important;
text-decoration: none !important;
transition: all 0.2s ease !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
margin: 0 !important;
line-height: 1.2 !important;
height: 32px !important;
min-width: 32px !important;
}
.pagination a:hover {
background: #000 !important;
color: #ffffff !important;
border-color: #000 !important;
transform: translateY(-1px) !important;
}
.pagination .current,
.pagination strong {
background: #000 !important;
color: #ffffff !important;
border-color: #000 !important;
}
.pagination .nextprev {
color: #1e293b !important;
}
.pagination .nextprev:hover {
background: #000 !important;
color: #ffffff !important;
border-color: #000 !important;
}
/* Premium Modern Social Widget Card styling */
.social-widget-card {
background: #ffffff !important;
border: 1px solid #e2e8f0 !important;
border-radius: 12px !important;
padding: 24px !important;
box-shadow: 0 10px 25px -5px rgba(15, 23, 42, 0.04), 0 8px 10px -6px rgba(15, 23, 42, 0.04) !important;
margin-bottom: 24px !important;
}
.social-widget-card h3 {
font-size: 14px !important;
font-weight: 700 !important;
text-transform: uppercase !important;
letter-spacing: 0.5px !important;
color: #0f172a !important;
border-bottom: 2px solid #f1f5f9 !important;
padding-bottom: 12px !important;
margin-bottom: 20px !important;
position: relative !important;
margin-top: 0 !important;
}
.social-widget-card h3::after {
content: "" !important;
position: absolute !important;
bottom: -2px !important;
left: 0 !important;
width: 40px !important;
height: 2px !important;
background: #000 !important;
}
.social-widget-card .social-bar {
display: grid !important;
grid-template-columns: repeat(4, 1fr) !important;
gap: 12px !important;
margin: 0 0 16px 0 !important;
width: 100% !important;
}
.social-widget-card .social-icon {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
text-decoration: none !important;
float: none !important;
width: auto !important;
margin: 0 !important;
gap: 8px !important;
transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
.social-widget-card .social-icon:hover {
transform: translateY(-3px) !important;
}
.social-widget-card .social-icon::before {
content: "" !important;
display: block !important;
width: 44px !important;
height: 44px !important;
border-radius: 50% !important;
background-size: 20px 20px !important;
background-position: center !important;
background-repeat: no-repeat !important;
transition: box-shadow 0.25s cubic-bezier(0.4, 0, 0.2, 1), transform 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
box-shadow: 0 4px 6px -1px rgba(15, 23, 42, 0.08) !important;
}
.social-widget-card .facebook-icon::before {
background-color: #1877f2 !important;
background-image: url('data:image/svg+xml;utf8,') !important;
}
.social-widget-card .facebook-icon:hover::before {
box-shadow: 0 8px 20px rgba(24, 119, 242, 0.4) !important;
}
.social-widget-card .twitter-icon::before {
background-color: #1da1f2 !important;
background-image: url('data:image/svg+xml;utf8,') !important;
}
.social-widget-card .twitter-icon:hover::before {
box-shadow: 0 8px 20px rgba(29, 161, 242, 0.4) !important;
}
.social-widget-card .instagram-icon::before {
background-image: url('data:image/svg+xml;utf8,'), radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%) !important;
background-size: 20px 20px, cover !important;
background-position: center, center !important;
background-repeat: no-repeat, no-repeat !important;
}
.social-widget-card .instagram-icon:hover::before {
box-shadow: 0 8px 20px rgba(214, 36, 159, 0.4) !important;
}
.social-widget-card .youtube-icon::before {
background-color: #ff0000 !important;
background-image: url('data:image/svg+xml;utf8,') !important;
}
.social-widget-card .youtube-icon:hover::before {
box-shadow: 0 8px 20px rgba(255, 0, 0, 0.4) !important;
}
.social-widget-card .social-icon span {
display: block !important;
font-size: 11px !important;
font-weight: 600 !important;
color: #64748b !important;
text-align: center !important;
background: transparent !important;
padding: 0 !important;
margin-top: 2px !important;
text-transform: capitalize !important;
}
.social-widget-card .social-icon:hover span {
color: #0f172a !important;
}
.social-widget-card p {
font-size: 12.5px !important;
color: #64748b !important;
line-height: 1.6 !important;
margin: 0 !important;
text-align: center !important;
}
/* Remove card styling from main column block on archive/category pages */
.main-content .archive-block-container,
.main-page .archive-block-container,
.archive-block-container {
background: transparent !important;
border: none !important;
box-shadow: none !important;
padding: 0 !important;
margin-bottom: 0 !important;
}
.archive-block-container .block-content {
background: transparent !important;
border: none !important;
box-shadow: none !important;
padding: 0 !important;
margin: 0 !important;
}
/* Disable card backgrounds/borders on block-content globally to prevent card-in-card nesting */
.block-content {
background: transparent !important;
border: none !important;
box-shadow: none !important;
}
/* Sidebar Kiri (content-block right) styling modernization */
.content-block.right .block {
background: #ffffff !important;
border: 1px solid #e2e8f0 !important;
border-radius: 12px !important;
padding: 16px !important;
box-shadow: 0 4px 6px -1px rgba(15, 23, 42, 0.02), 0 2px 4px -1px rgba(15, 23, 42, 0.02) !important;
margin-bottom: 20px !important;
box-sizing: border-box !important;
}
.sidebar-widget-title {
position: relative !important;
font-size: 14px !important;
font-weight: 700 !important;
text-transform: uppercase !important;
color: #0f172a !important;
padding-bottom: 10px !important;
border-bottom: 1px solid #e2e8f0 !important;
margin-bottom: 16px !important;
margin-top: 0 !important;
letter-spacing: 0.5px !important;
display: block !important;
line-height: 1.2 !important;
}
.sidebar-widget-title::after {
content: '' !important;
position: absolute !important;
bottom: -1px !important;
left: 0 !important;
width: 40px !important;
height: 2px !important;
background: #000 !important;
/* default fallbacks */
}
/* Custom accent border colors */
.sidebar-widget-title.color-orange::after {
background: #dd8229 !important;
}
.sidebar-widget-title.color-black::after {
background: #0f172a !important;
}
.sidebar-widget-title.color-red::after {
background: #c42b20 !important;
}
.sidebar-widget-title.color-blue::after {
background: #2277c6 !important;
}
.sidebar-widget-title.color-green::after {
background: #22c55e !important;
}
/* Sidebar Article list layout */
.sidebar-list,
.sidebar-article-list {
list-style: none !important;
padding: 0 !important;
margin: 0 !important;
display: flex !important;
flex-direction: column !important;
}
.sidebar-list li,
.sidebar-article-list li {
display: flex !important;
gap: 12px !important;
align-items: flex-start !important;
padding: 12px 0 !important;
border-bottom: 1px solid #f1f5f9 !important;
margin: 0 !important;
background: transparent !important;
}
.sidebar-list li:last-child,
.sidebar-article-list li:last-child {
border-bottom: none !important;
padding-bottom: 0 !important;
}
.sidebar-list li:first-child,
.sidebar-article-list li:first-child {
padding-top: 0 !important;
}
.sidebar-list .article-photo,
.sidebar-article-list .article-photo {
width: 70px !important;
height: 50px !important;
border-radius: 6px !important;
overflow: hidden !important;
flex-shrink: 0 !important;
background: #f8fafc !important;
float: none !important;
margin: 0 !important;
padding: 0 !important;
}
.sidebar-list .article-photo img,
.sidebar-article-list .article-photo img {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
transition: transform 0.2s ease !important;
display: block !important;
}
.sidebar-list li:hover .article-photo img,
.sidebar-article-list li:hover .article-photo img {
transform: scale(1.05) !important;
}
.sidebar-list .article-content,
.sidebar-article-list .article-content {
flex: 1 !important;
margin: 0 !important;
min-width: 0 !important;
display: block !important;
}
.sidebar-list .article-content h4,
.sidebar-article-list .article-content h4 {
margin: 0 0 4px 0 !important;
padding: 0 !important;
line-height: 1.35 !important;
font-size: 13px !important;
}
.sidebar-list .article-content h4 a,
.sidebar-article-list .article-content h4 a {
font-size: 13px !important;
font-weight: 600 !important;
color: #1e293b !important;
text-decoration: none !important;
display: -webkit-box !important;
-webkit-line-clamp: 2 !important;
-webkit-box-orient: vertical !important;
overflow: hidden !important;
transition: color 0.15s ease !important;
}
.sidebar-list .article-content h4 a:hover,
.sidebar-article-list .article-content h4 a:hover {
color: #000 !important;
}
.sidebar-list .meta,
.sidebar-article-list .meta {
font-size: 11px !important;
color: #64748b !important;
margin-top: 4px !important;
display: inline-flex !important;
align-items: center !important;
gap: 4px !important;
}
.sidebar-list .meta a,
.sidebar-article-list .meta a {
color: #64748b !important;
text-decoration: none !important;
display: inline-flex !important;
align-items: center !important;
}
/* Sidebar More Button */
.sidebar-more-btn {
display: block !important;
text-align: center !important;
background: #f8fafc !important;
color: #475569 !important;
border: 1px solid #e2e8f0 !important;
border-radius: 6px !important;
padding: 8px 0 !important;
font-size: 12px !important;
font-weight: 600 !important;
margin-top: 14px !important;
text-decoration: none !important;
transition: all 0.2s ease !important;
}
.sidebar-more-btn:hover {
background: #000 !important;
color: #ffffff !important;
border-color: #000 !important;
}
/* Remove margin from archive/category listing block titles so they sit flush with content */
.archive-block-container .block-title {
margin-bottom: 0 !important;
}
/* Indeks Berita Modern Styles */
.block-title-filter-wrapper {
display: flex !important;
align-items: center !important;
gap: 16px !important;
}
.index-title-filter-form {
display: inline-flex !important;
align-items: center !important;
}
.modern-title-date-input {
height: 32px !important;
padding: 0 10px !important;
border: 1px solid rgba(255, 255, 255, 0.25) !important;
border-radius: 6px !important;
background: rgba(255, 255, 255, 0.1) !important;
color: #ffffff !important;
font-size: 13px !important;
font-weight: 600 !important;
outline: none !important;
cursor: pointer !important;
transition: all 0.2s ease !important;
}
.modern-title-date-input:focus,
.modern-title-date-input:hover {
background: rgba(255, 255, 255, 0.2) !important;
border-color: #ffffff !important;
}
.modern-title-date-input::-webkit-calendar-picker-indicator {
filter: invert(1) !important;
cursor: pointer !important;
}
.back-home-link {
font-size: 11.5px !important;
font-weight: 600 !important;
text-transform: uppercase !important;
color: #ffffff !important;
opacity: 0.9 !important;
transition: opacity 0.2s ease !important;
}
.back-home-link:hover {
opacity: 1 !important;
}
.archive-block-content {
background: transparent !important;
padding: 0 !important;
border: none !important;
box-shadow: none !important;
}
.index-categories-grid {
display: grid !important;
grid-template-columns: repeat(3, 1fr) !important;
gap: 24px !important;
width: 100% !important;
margin-bottom: 40px !important;
}
.main-page .category-article-list .article-photo {
flex: 0 0 70px !important;
width: 70px !important;
height: 50px !important;
}
.main-page .category-article-list .article-content h2 a {
font-size: 13px !important;
}
@media (max-width: 1024px) {
.index-categories-grid {
display: grid !important;
grid-template-columns: repeat(3, 1fr) !important;
gap: 24px !important;
width: 100% !important;
margin-bottom: 40px !important;
}
}
@media (max-width: 767px) {
.index-categories-grid {
display: grid !important;
grid-template-columns: repeat(3, 1fr) !important;
gap: 24px !important;
width: 100% !important;
margin-bottom: 40px !important;
}
}
.index-category-card {
background: #ffffff !important;
border: 1px solid #e2e8f0 !important;
border-radius: 12px !important;
padding: 20px 20px 24px 20px !important;
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03) !important;
transition: all 0.3s ease !important;
height: 100% !important;
display: flex !important;
flex-direction: column !important;
margin-bottom: 40px !important;
}
.index-category-card:hover {
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1) !important;
transform: translateY(-4px) !important;
}
.index-category-footer {
padding-top: 16px !important;
margin-top: auto !important;
border-top: 1px solid #f1f5f9 !important;
}
.index-category-title {
font-size: 16px !important;
font-weight: 700 !important;
color: #0f172a !important;
margin: 0 0 16px 0 !important;
padding-bottom: 12px !important;
border-bottom: 2px solid #000 !important;
text-transform: uppercase !important;
letter-spacing: 0.5px !important;
}
.index-more-link {
display: block !important;
padding: 8px 16px !important;
background: #f1f5f9 !important;
color: #475569 !important;
font-weight: 600 !important;
font-size: 12px !important;
border-radius: 8px !important;
text-decoration: none !important;
text-align: center !important;
transition: all 0.2s ease !important;
}
.index-more-link:hover {
background: #000 !important;
color: #ffffff !important;
}
.index-no-articles-card {
background: #ffffff !important;
border: 1px solid #e2e8f0 !important;
border-radius: 16px !important;
padding: 50px 30px !important;
text-align: center !important;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.02) !important;
max-width: 480px !important;
margin: 40px auto !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
}
.no-articles-icon {
font-size: 48px !important;
margin-bottom: 16px !important;
line-height: 1 !important;
}
.no-articles-title {
font-size: 18px !important;
font-weight: 700 !important;
color: #0f172a !important;
margin: 0 0 8px 0 !important;
}
.no-articles-desc {
font-size: 13px !important;
color: #64748b !important;
margin: 0 0 24px 0 !important;
line-height: 1.5 !important;
}
.no-articles-reset-btn {
height: 38px !important;
padding: 0 20px !important;
border: none !important;
border-radius: 8px !important;
background: #000 !important;
color: #ffffff !important;
font-size: 13px !important;
font-weight: 600 !important;
text-decoration: none !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
transition: all 0.2s ease !important;
}
.no-articles-reset-btn:hover {
background: #5a9e25 !important;
transform: translateY(-1px) !important;
box-shadow: 0 4px 12px rgba(90, 158, 37, 0.25) !important;
color: #ffffff !important;
}
@media (max-width: 767px) {
.block-title-filter-wrapper {
gap: 10px !important;
}
.back-home-link {
font-size: 10px !important;
}
.modern-title-date-input {
height: 28px !important;
font-size: 11px !important;
padding: 0 6px !important;
}
.index-categories-grid {
display: grid !important;
grid-template-columns: repeat(3, 1fr) !important;
gap: 24px !important;
width: 100% !important;
margin-bottom: 40px !important;
}
}
@media (max-width: 576px) {
.main-page.full-width .block-title {
flex-direction: column !important;
align-items: stretch !important;
gap: 10px !important;
height: auto !important;
padding: 12px 16px !important;
}
.block-title-filter-wrapper {
width: 100% !important;
justify-content: space-between !important;
}
}
/* Download page modern styles */
.file-list-container {
display: flex !important;
flex-direction: column !important;
gap: 12px !important;
margin: 20px 0 !important;
}
.file-item-card {
background: #ffffff !important;
border: 1px solid #e2e8f0 !important;
border-radius: 12px !important;
padding: 16px 20px !important;
display: flex !important;
justify-content: space-between !important;
align-items: center !important;
gap: 16px !important;
transition: all 0.2s ease !important;
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.02) !important;
}
.file-item-card:hover {
border-color: #cbd5e1 !important;
transform: translateY(-2px) !important;
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.04) !important;
}
.file-item-left {
display: flex !important;
align-items: center !important;
gap: 14px !important;
flex-grow: 1 !important;
min-width: 0 !important;
}
.file-item-num {
font-size: 13px !important;
font-weight: 700 !important;
color: #94a3b8 !important;
min-width: 20px !important;
text-align: center !important;
}
.file-item-icon-box {
font-size: 24px !important;
line-height: 1 !important;
}
.file-item-info {
display: flex !important;
flex-direction: column !important;
gap: 4px !important;
min-width: 0 !important;
}
.file-item-title {
font-size: 14.5px !important;
font-weight: 700 !important;
color: #0f172a !important;
margin: 0 !important;
line-height: 1.4 !important;
white-space: normal !important;
word-break: break-word !important;
}
.file-item-meta {
display: flex !important;
align-items: center !important;
gap: 6px !important;
font-size: 12px !important;
color: #64748b !important;
}
.file-item-meta span {
color: #64748b !important;
}
.file-item-meta .uppercase,
.file-item-meta span.uppercase {
text-transform: uppercase !important;
font-weight: 700 !important;
color: #000 !important;
}
.meta-separator {
color: #cbd5e1 !important;
}
.modern-file-action-btn {
height: 36px !important;
padding: 0 16px !important;
border: none !important;
border-radius: 8px !important;
background: #000 !important;
color: #ffffff !important;
font-size: 12.5px !important;
font-weight: 700 !important;
text-decoration: none !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
gap: 8px !important;
transition: all 0.2s ease !important;
white-space: nowrap !important;
}
.modern-file-action-btn span,
.modern-file-action-btn .file-btn-icon,
.modern-file-action-btn {
color: #ffffff !important;
}
.modern-file-action-btn:hover {
background: #5a9e25 !important;
transform: translateY(-1px) !important;
box-shadow: 0 4px 12px rgba(90, 158, 37, 0.25) !important;
color: #ffffff !important;
}
.modern-file-action-btn:hover span,
.modern-file-action-btn:hover .file-btn-icon {
color: #ffffff !important;
}
.file-btn-icon {
font-size: 14px !important;
}
@media (max-width: 576px) {
.file-item-card {
flex-direction: column !important;
align-items: stretch !important;
gap: 12px !important;
padding: 14px !important;
}
.file-item-left {
gap: 10px !important;
}
.modern-file-action-btn {
width: 100% !important;
}
}
/* Modern Share Block */
.modern-share-box {
margin-top: 30px !important;
padding: 16px 20px !important;
background: #f8fafc !important;
border: 1px solid #e2e8f0 !important;
border-radius: 12px !important;
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
gap: 16px !important;
}
.modern-share-title {
display: flex !important;
align-items: center !important;
gap: 8px !important;
}
.modern-share-title span {
font-size: 10.5px !important;
font-weight: 700 !important;
text-transform: uppercase !important;
color: #94a3b8 !important;
letter-spacing: 0.5px !important;
display: block !important;
line-height: 1.2 !important;
}
.modern-share-title strong {
font-size: 14.5px !important;
font-weight: 700 !important;
color: #1e293b !important;
display: block !important;
margin-top: 2px !important;
}
.modern-share-buttons {
display: flex !important;
align-items: center !important;
gap: 8px !important;
}
.modern-share-btn {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
width: 40px !important;
height: 40px !important;
border-radius: 50% !important;
color: #ffffff !important;
transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
border: none !important;
cursor: pointer !important;
padding: 0 !important;
}
.modern-share-btn svg {
width: 18px !important;
height: 18px !important;
fill: currentColor !important;
}
.modern-share-btn.share-fb {
background: #1877f2 !important;
}
.modern-share-btn.share-fb:hover {
background: #166fe5 !important;
transform: translateY(-2px) !important;
box-shadow: 0 4px 12px rgba(24, 119, 242, 0.25) !important;
}
.modern-share-btn.share-tw {
background: #0f1419 !important;
}
.modern-share-btn.share-tw:hover {
background: #272c30 !important;
transform: translateY(-2px) !important;
box-shadow: 0 4px 12px rgba(15, 20, 25, 0.25) !important;
}
.modern-share-btn.share-wa {
background: #25d366 !important;
}
.modern-share-btn.share-wa:hover {
background: #20ba5a !important;
transform: translateY(-2px) !important;
box-shadow: 0 4px 12px rgba(37, 211, 102, 0.25) !important;
}
.modern-share-btn.share-copy {
background: #64748b !important;
}
.modern-share-btn.share-copy:hover {
background: #475569 !important;
transform: translateY(-2px) !important;
box-shadow: 0 4px 12px rgba(100, 116, 139, 0.25) !important;
}
.modern-share-btn.share-copy.copied {
background: #22c55e !important;
box-shadow: 0 4px 12px rgba(34, 197, 94, 0.3) !important;
}
@media (max-width: 576px) {
.modern-share-box {
flex-direction: column !important;
align-items: center !important;
text-align: center !important;
gap: 12px !important;
padding: 16px !important;
}
}
/ * F o r c e S e k i l a s I n f o c a r d s t o v e r t i c a l l a y o u t * / . s i d e b a r - l i s t . s e k i l a s - l i s t l i {
d i s p l a y : b l o c k ! i m p o r t a n t ;
}
. s i d e b a r - l i s t . s e k i l a s - l i s t l i . a r t i c l e - p h o t o {
w i d t h : 1 0 0 % ! i m p o r t a n t ;
h e i g h t : a u t o ! i m p o r t a n t ;
m a r g i n - b o t t o m : 1 0 p x ! i m p o r t a n t ;
}
. s i d e b a r - l i s t . s e k i l a s - l i s t l i . a r t i c l e - p h o t o i m g {
h e i g h t : a u t o ! i m p o r t a n t ;
}
/ * T a g B a d g e S t y l i n g * / . b a d g e {
d i s p l a y : i n l i n e - b l o c k ;
p a d d i n g : 5 p x 1 0 p x ;
f o n t - s i z e : 1 2 p x ;
f o n t - w e i g h t : 6 0 0 ;
l i n e - h e i g h t : 1 ;
t e x t - a l i g n : c e n t e r ;
w h i t e - s p a c e : n o w r a p ;
v e r t i c a l - a l i g n : b a s e l i n e ;
b o r d e r - r a d i u s : 9 9 9 p x ;
b a c k g r o u n d : # 0 0 4 1 8 1 ! i m p o r t a n t ;
c o l o r : # f f f f f f ! i m p o r t a n t ;
t e x t - d e c o r a t i o n : n o n e ! i m p o r t a n t ;
t r a n s i t i o n : a l l 0 . 2 s e a s e ! i m p o r t a n t ;
}
. b a d g e : h o v e r {
b a c k g r o u n d : # 5 a 9 e 2 5 ! i m p o r t a n t ;
c o l o r : # f f f f f f ! i m p o r t a n t ;
}
/ * S p e s i f i k T a g C l o u d B a d g e S t y l i n g * / . t a g - c l o u d . b a d g e {
b a c k g r o u n d : # 0 0 4 1 8 1 ! i m p o r t a n t ;
c o l o r : # f f f f f f ! i m p o r t a n t ;
m a r g i n : 3 p x ;
d i s p l a y : i n l i n e - b l o c k ;
p a d d i n g : 5 p x 1 2 p x ;
b o r d e r - r a d i u s : 9 9 9 p x ;
t e x t - d e c o r a t i o n : n o n e ! i m p o r t a n t ;
}
. t a g - c l o u d . b a d g e : h o v e r {
b a c k g r o u n d : # 5 a 9 e 2 5 ! i m p o r t a n t ;
c o l o r : # f f f f f f ! i m p o r t a n t ;
}
/ * P a k s a W a r n a B a d g e S e s u a i T e m a * / . w i d g e t . t a g - c l o u d a . b a d g e {
b a c k g r o u n d : # 0 0 4 1 8 1 ! i m p o r t a n t ;
c o l o r : # f f f f f f ! i m p o r t a n t ;
b o r d e r : n o n e ! i m p o r t a n t ;
}
. w i d g e t . t a g - c l o u d a . b a d g e : h o v e r {
b a c k g r o u n d : # 5 a 9 e 2 5 ! i m p o r t a n t ;
c o l o r : # f f f f f f ! i m p o r t a n t ;
}
/ * F o o t e r S o c i a l L i n k s S t y l i n g * / . f o o t e r - s o c i a l - l i n k s . s o c i a l - l i n k {
d i s p l a y : i n l i n e - f l e x ! i m p o r t a n t ;
a l i g n - i t e m s : c e n t e r ! i m p o r t a n t ;
j u s t i f y - c o n t e n t : c e n t e r ! i m p o r t a n t ;
w i d t h : 3 6 p x ! i m p o r t a n t ;
h e i g h t : 3 6 p x ! i m p o r t a n t ;
b o r d e r - r a d i u s : 5 0 % ! i m p o r t a n t ;
b a c k g r o u n d : r g b a ( 2 5 5 , 2 5 5 , 2 5 5 , 0 . 1 ) ! i m p o r t a n t ;
c o l o r : # f f f f f f ! i m p o r t a n t ;
t e x t - d e c o r a t i o n : n o n e ! i m p o r t a n t ;
t r a n s i t i o n : a l l 0 . 2 s e a s e ! i m p o r t a n t ;
f o n t - s i z e : 1 6 p x ! i m p o r t a n t ;
}
. f o o t e r - s o c i a l - l i n k s . s o c i a l - l i n k : h o v e r {
b a c k g r o u n d : # 5 a 9 e 2 5 ! i m p o r t a n t ;
t r a n s f o r m : t r a n s l a t e Y ( - 2 p x ) ! i m p o r t a n t ;
}
/ * P a s t i k a n I k o n T e r l i h a t * / . f o o t e r - s o c i a l - l i n k s . s o c i a l - l i n k i {
c o l o r : # f f f f f f ! i m p o r t a n t ;
f o n t - s i z e : 1 6 p x ! i m p o r t a n t ;
d i s p l a y : i n l i n e - b l o c k ! i m p o r t a n t ;
w i d t h : 1 0 0 % ! i m p o r t a n t ;
t e x t - a l i g n : c e n t e r ! i m p o r t a n t ;
}
/* Footer Social Links Styling - Refined for Centering */
.footer-social-links .social-link {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
width: 36px !important;
height: 36px !important;
border-radius: 50% !important;
background: rgba(255, 255, 255, 0.1) !important;
color: #ffffff !important;
text-decoration: none !important;
transition: all 0.2s ease !important;
margin-right: 8px !important;
padding: 0 !important;
box-sizing: border-box !important;
vertical-align: middle !important;
}
.footer-social-links .social-link i {
color: #ffffff !important;
font-size: 16px !important;
display: block !important;
margin: 0 auto !important;
text-align: center !important;
line-height: 36px !important;
}
.footer-social-links .social-link:hover {
background: #5a9e25 !important;
transform: translateY(-2px) !important;
}
/* Force Circular Footer Social Icons */
.footer-social-links .social-link {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
width: 36px !important;
height: 36px !important;
min-width: 36px !important;
min-height: 36px !important;
border-radius: 50% !important;
background: rgba(255, 255, 255, 0.1) !important;
color: #ffffff !important;
text-decoration: none !important;
transition: all 0.2s ease !important;
margin-right: 8px !important;
padding: 0 !important;
box-sizing: border-box !important;
vertical-align: middle !important;
overflow: hidden !important;
}
.footer-social-links .social-link i {
color: #ffffff !important;
font-size: 16px !important;
line-height: 36px !important;
margin: 0 !important;
padding: 0 !important;
text-align: center !important;
width: 100% !important;
}
.footer-social-links .social-link:hover {
background: #5a9e25 !important;
transform: translateY(-2px) !important;
}
/* Force Absolute Black Header and Footer */
.header {
background: #000 !important;
}
.footer {
background: #000 !important;
}
.footer-bottom {
background: #000 !important;
}
/* Force Global Black Theme */
/* Revert content background */
.content,
.main-page,
.boxed {
background: #f1f5f9 !important;
color: #1f2937 !important;
}
.footer-top,
.footer-bottom {
background: #000 !important;
color: #fff !important;
}
/* Force Specific Components to Black Background */
.breaking-news {
background: #000 !important;
color: #fff !important;
}
.ideaboxWeather {
background: #000 !important;
color: #fff !important;
}
.sidebar-more-btn {
background: #000 !important;
color: #fff !important;
border-color: #000 !important;
}
.sidebar-more-btn:hover {
background: #5a9e25 !important;
}
.widget .tag-cloud a.badge {
background: #000 !important;
color: #fff !important;
}
/* Fix Breaking News Colors */
.breaking-news {
background: #fff !important;
color: #000 !important;
}
.breaking-news .the-title {
background: #000 !important;
color: #fff !important;
}
/* Sembunyikan card Sekilas Info & Berita Foto di tampilan HP (mobile) */
@media (max-width: 767px) {
.sekilas-card,
.berita-foto-card {
display: none !important;
}
/* ===== Berita Kategori Card: Proporsional di HP (layout Berita Utama) ===== */
.sidebar-kategori-card {
padding: 12px !important;
}
/* Tombol Read More proporsional */
.sidebar-kategori-card .sidebar-more-btn {
font-size: 12px !important;
padding: 8px 0 !important;
margin-top: 10px !important;
}
/* ===== main-sidebar right: Tampil & Proporsional di HP ===== */
.main-sidebar.right {
display: block !important;
width: 100% !important;
float: none !important;
margin: 0 !important;
padding: 0 !important;
box-sizing: border-box !important;
}
/* Sembunyikan cuaca & iklan di HP agar tidak berantakan */
.main-sidebar.right .ideaboxWeather,
.main-sidebar.right hr {
display: none !important;
}
/* Widget sosmed proporsional */
.main-sidebar.right .social-widget-card {
padding: 12px !important;
}
.main-sidebar.right .social-widget-card h3 {
font-size: 13px !important;
margin-bottom: 10px !important;
}
.main-sidebar.right .widget-social .social-bar {
display: flex !important;
justify-content: center !important;
gap: 16px !important;
margin-bottom: 12px !important;
}
.main-sidebar.right .widget-social .social-bar .social-icon {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
text-align: center !important;
padding: 0 !important;
width: auto !important;
gap: 0 !important;
box-sizing: border-box !important;
}
.main-sidebar.right .widget-social .social-bar .social-icon span {
display: none !important;
}
.main-sidebar.right .widget-social .social-bar .social-icon::before {
width: 36px !important;
height: 36px !important;
background-size: 16px 16px !important;
}
.main-sidebar.right .widget-social .social-bar .instagram-icon::before {
background-size: 16px 16px, cover !important;
}
.main-sidebar.right .widget-social p {
font-size: 11.5px !important;
margin-top: 8px !important;
line-height: 1.5 !important;
text-align: center !important;
}
/* Berita Utama & Berita Populer: grid 2 kolom di HP */
.main-sidebar.right .widget .sidebar-article-list {
display: grid !important;
grid-template-columns: 1fr 1fr !important;
gap: 10px !important;
list-style: none !important;
padding: 0 !important;
margin: 0 !important;
}
.main-sidebar.right .widget .sidebar-article-list li {
display: flex !important;
flex-direction: column !important;
border-bottom: none !important;
padding: 0 !important;
margin: 0 !important;
background: #f8fafc !important;
border-radius: 6px !important;
overflow: hidden !important;
border: 1px solid #e2e8f0 !important;
}
.main-sidebar.right .widget .sidebar-article-list li .article-photo {
width: 100% !important;
height: 65px !important;
float: none !important;
flex-shrink: 0 !important;
margin: 0 !important;
border-radius: 0 !important;
overflow: hidden !important;
}
.main-sidebar.right .widget .sidebar-article-list li .article-photo img {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
display: block !important;
border-radius: 0 !important;
}
.main-sidebar.right .widget .sidebar-article-list li .article-content {
padding: 6px 7px 7px !important;
flex: 1 !important;
display: flex !important;
flex-direction: column !important;
margin: 0 !important;
}
.main-sidebar.right .widget .sidebar-article-list li .article-content h4 {
font-size: 11px !important;
line-height: 1.35 !important;
margin: 0 !important;
display: -webkit-box !important;
-webkit-line-clamp: 3 !important;
-webkit-box-orient: vertical !important;
overflow: hidden !important;
}
.main-sidebar.right .widget .sidebar-article-list li .article-content h4 a {
font-size: 11px !important;
font-weight: 600 !important;
color: #1e293b !important;
}
.main-sidebar.right .widget .sidebar-article-list li .article-content .meta {
font-size: 10px !important;
color: #94a3b8 !important;
margin-top: auto !important;
padding-top: 3px !important;
display: flex !important;
flex-direction: row !important;
justify-content: flex-start !important;
align-items: center !important;
text-align: left !important;
width: 100% !important;
}
.main-sidebar.right .widget .sidebar-article-list li .article-content .meta a {
font-size: 10px !important;
color: #94a3b8 !important;
display: inline-flex !important;
align-items: center !important;
justify-content: flex-start !important;
text-align: left !important;
gap: 4px !important;
width: auto !important;
}
/* Widget Judul */
.main-sidebar.right .widget h3 {
font-size: 13px !important;
margin-bottom: 10px !important;
}
/* Tag Berita: wrap rapi */
.main-sidebar.right .widget .tag-cloud {
display: flex !important;
flex-wrap: wrap !important;
gap: 6px !important;
}
.main-sidebar.right .widget .tag-cloud .badge {
font-size: 11px !important;
padding: 4px 10px !important;
}
}
/* =============================================================
DESKTOP OVERRIDE — sidebar-kategori-card di PC/Desktop (width >= 768px)
Layout VERTIKAL (foto besar full-width di atas, teks di bawah)
agar mirip seperti .sekilas-card (gambar besar, teks proporsional)
============================================================= */
@media (min-width: 768px) {
/* Uniform Widget Title Style (Clean & Consistent) */
.sidebar-widget-title {
color: #0f172a !important;
border-bottom: 2px solid #e2e8f0 !important;
padding-bottom: 8px !important;
margin-top: 0 !important;
margin-bottom: 16px !important;
font-size: 14px !important;
font-weight: 700 !important;
text-transform: uppercase !important;
letter-spacing: 0 !important;
}
/* List layout */
.sidebar-kategori-card .sidebar-article-list {
display: flex !important;
flex-direction: column !important;
gap: 12px !important;
margin: 0 0 15px 0 !important;
padding: 0 !important;
list-style: none !important;
width: 100% !important;
}
/* List Item: Horizontal Row Layout */
.sidebar-kategori-card .sidebar-article-list li {
display: flex !important;
flex-direction: row !important;
align-items: flex-start !important;
gap: 14px !important;
width: 100% !important;
margin: 0 !important;
padding: 0 0 14px 0 !important;
border-bottom: 1px solid #f1f5f9 !important;
background: transparent !important;
float: none !important;
}
.sidebar-kategori-card .sidebar-article-list li:last-child {
border-bottom: none !important;
padding-bottom: 0 !important;
margin-bottom: 0 !important;
}
.sidebar-kategori-card .sidebar-article-list li:first-child {
padding-top: 0 !important;
}
/* Photo container - compact thumbnail size (96x68px) */
.sidebar-kategori-card .sidebar-article-list li .article-photo {
display: block !important;
flex: 0 0 96px !important;
width: 96px !important;
height: 68px !important;
margin: 0 !important;
border-radius: 6px !important;
overflow: hidden !important;
float: none !important;
flex-shrink: 0 !important;
background: #f8fafc !important;
}
.sidebar-kategori-card .sidebar-article-list li .article-photo img {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
display: block !important;
transition: transform 0.3s ease !important;
border-radius: 6px !important;
}
.sidebar-kategori-card .sidebar-article-list li:hover .article-photo img {
transform: scale(1.05) !important;
}
/* Content styling */
.sidebar-kategori-card .sidebar-article-list li .article-content {
display: block !important;
flex: 1 !important;
min-width: 0 !important;
margin: 0 !important;
padding: 0 !important;
}
/* Title styling */
.sidebar-kategori-card .sidebar-article-list li .article-content h4 {
font-size: 13px !important;
line-height: 1.35 !important;
margin: 0 0 4px 0 !important;
font-weight: 600 !important;
padding: 0 !important;
}
.sidebar-kategori-card .sidebar-article-list li .article-content h4 a {
font-size: 13px !important;
font-weight: 600 !important;
color: #1e293b !important;
text-decoration: none !important;
display: -webkit-box !important;
-webkit-line-clamp: 2 !important;
-webkit-box-orient: vertical !important;
overflow: hidden !important;
transition: color 0.15s ease !important;
}
.sidebar-kategori-card .sidebar-article-list li:hover .article-content h4 a {
color: #2563eb !important; /* Premium Blue hover */
}
/* Meta text */
.sidebar-kategori-card .sidebar-article-list li .article-content .meta {
font-size: 11px !important;
color: #64748b !important;
display: inline-flex !important;
align-items: center !important;
gap: 4px !important;
margin: 0 !important;
padding: 0 !important;
}
.sidebar-kategori-card .sidebar-article-list li .article-content .meta a,
.sidebar-kategori-card .sidebar-article-list li .article-content .meta span {
color: #64748b !important;
text-decoration: none !important;
display: inline-flex !important;
align-items: center !important;
gap: 4px !important;
}
/* More Button styling - styled like a link .more */
.sidebar-kategori-card .sidebar-more-btn {
display: block !important;
text-align: right !important;
padding: 6px 0 !important;
margin-top: 10px !important;
background: transparent !important;
color: #64748b !important;
font-weight: 600 !important;
font-size: 11px !important;
border: none !important;
text-decoration: none !important;
transition: color 0.2s ease !important;
}
.sidebar-kategori-card .sidebar-more-btn:hover {
color: #2563eb !important;
background: transparent !important;
text-decoration: underline !important;
}
/* Right sidebar cards proportional tuning on Desktop (Berita Utama & Berita Populer) */
.main-sidebar.right .widget .sidebar-article-list,
.main-sidebar.right .widget .article-block {
display: flex !important;
flex-direction: column !important;
gap: 12px !important;
margin: 0 !important;
padding: 0 !important;
list-style: none !important;
width: 100% !important;
}
.main-sidebar.right .widget .sidebar-article-list li,
.main-sidebar.right .widget .article-block li {
display: flex !important;
flex-direction: row !important;
align-items: flex-start !important;
gap: 14px !important;
width: 100% !important;
margin: 0 !important;
padding: 0 0 12px 0 !important;
border-bottom: 1px solid #f1f5f9 !important;
background: transparent !important;
float: none !important;
}
.main-sidebar.right .widget .sidebar-article-list li:last-child,
.main-sidebar.right .widget .article-block li:last-child {
border-bottom: none !important;
padding-bottom: 0 !important;
margin-bottom: 0 !important;
}
.main-sidebar.right .widget .sidebar-article-list li .article-photo,
.main-sidebar.right .widget .article-block .article-photo {
display: block !important;
flex: 0 0 96px !important;
width: 96px !important;
height: 68px !important;
margin: 0 !important;
border-radius: 6px !important;
overflow: hidden !important;
float: none !important;
flex-shrink: 0 !important;
background: #f8fafc !important;
}
.main-sidebar.right .widget .sidebar-article-list li .article-photo img,
.main-sidebar.right .widget .article-block .article-photo img {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
display: block !important;
transition: transform 0.3s ease !important;
border-radius: 6px !important;
}
.main-sidebar.right .widget .sidebar-article-list li:hover .article-photo img,
.main-sidebar.right .widget .article-block li:hover .article-photo img {
transform: scale(1.05) !important;
}
.main-sidebar.right .widget .sidebar-article-list li .article-content,
.main-sidebar.right .widget .article-block .article-content {
display: block !important;
flex: 1 !important;
min-width: 0 !important;
margin: 0 !important;
padding: 0 !important;
}
.main-sidebar.right .widget .sidebar-article-list li .article-content h4,
.main-sidebar.right .widget .article-block .article-content h4 {
font-size: 13px !important;
line-height: 1.35 !important;
margin: 0 0 4px 0 !important;
font-weight: 600 !important;
padding: 0 !important;
}
.main-sidebar.right .widget .sidebar-article-list li .article-content h4 a,
.main-sidebar.right .widget .article-block .article-content h4 a {
font-size: 13px !important;
font-weight: 600 !important;
color: #1e293b !important;
text-decoration: none !important;
display: -webkit-box !important;
-webkit-line-clamp: 2 !important;
-webkit-box-orient: vertical !important;
overflow: hidden !important;
transition: color 0.15s ease !important;
}
.main-sidebar.right .widget .sidebar-article-list li:hover .article-content h4 a,
.main-sidebar.right .widget .article-block li:hover .article-content h4 a {
color: #2563eb !important;
}
.main-sidebar.right .widget .sidebar-article-list li .article-content .meta,
.main-sidebar.right .widget .article-block .meta {
font-size: 11px !important;
color: #64748b !important;
display: inline-flex !important;
align-items: center !important;
gap: 4px !important;
margin: 0 !important;
padding: 0 !important;
}
.main-sidebar.right .widget .sidebar-article-list li .article-content .meta a,
.main-sidebar.right .widget .sidebar-article-list li .article-content .meta span,
.main-sidebar.right .widget .article-block .meta a,
.main-sidebar.right .widget .article-block .meta span {
color: #64748b !important;
text-decoration: none !important;
display: inline-flex !important;
align-items: center !important;
gap: 4px !important;
}
}
/* =============================================================
FINAL OVERRIDE — sidebar-kategori-card di HP
Layout HORIZONTAL persis seperti "Berita Utama" (foto kiri + teks kanan)
Posisi paling bawah agar menang lawan CSS global
============================================================= */
@media (max-width: 767px) {
/* === FIX AKAR MASALAH: paksa semua parent container jadi 100% === */
.main-content>.main-page.left,
.main-page.left,
.double-block,
.double-block .content-block,
.double-block .content-block.main,
.double-block .content-block.left,
.double-block .content-block.right,
.double-block .content-block.right:not(.main) {
width: 100% !important;
float: none !important;
margin-left: 0 !important;
margin-right: 0 !important;
padding-left: 0 !important;
padding-right: 0 !important;
box-sizing: border-box !important;
}
/* === sidebar-kategori-card: full width, layout Berita Utama === */
.sidebar-kategori-card {
width: 100% !important;
box-sizing: border-box !important;
}
/* === UL: flex-column full width === */
.sidebar-kategori-card .sidebar-article-list {
display: flex !important;
flex-direction: column !important;
list-style: none !important;
padding: 0 !important;
margin: 0 0 10px 0 !important;
width: 100% !important;
box-sizing: border-box !important;
gap: 0 !important;
}
/* === LI: horizontal — foto kiri, teks kanan (sama seperti Berita Utama) === */
.sidebar-kategori-card .sidebar-article-list li,
.sidebar-kategori-card .sidebar-article-list li:first-child,
.sidebar-kategori-card .sidebar-article-list li:last-child {
display: flex !important;
flex-direction: row !important;
align-items: flex-start !important;
gap: 10px !important;
padding: 10px 0 !important;
padding-top: 10px !important;
padding-bottom: 10px !important;
margin: 0 !important;
border-bottom: 1px solid #f1f5f9 !important;
border-left: none !important;
border-right: none !important;
border-top: none !important;
background: transparent !important;
border-radius: 0 !important;
overflow: visible !important;
width: 100% !important;
box-sizing: border-box !important;
}
.sidebar-kategori-card .sidebar-article-list li:first-child {
padding-top: 0 !important;
}
.sidebar-kategori-card .sidebar-article-list li:last-child {
border-bottom: none !important;
padding-bottom: 0 !important;
}
/* === Foto: kiri fixed 80x58px (sama seperti Berita Utama) === */
.sidebar-kategori-card .sidebar-article-list li .article-photo {
flex: 0 0 80px !important;
width: 80px !important;
height: 58px !important;
flex-shrink: 0 !important;
float: none !important;
margin: 0 !important;
padding: 0 !important;
border-radius: 6px !important;
overflow: hidden !important;
background: #e2e8f0 !important;
min-width: 80px !important;
}
.sidebar-kategori-card .sidebar-article-list li .article-photo img {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
display: block !important;
border-radius: 6px !important;
transition: transform 0.2s ease !important;
}
/* === Konten teks: kanan flex 1 (sama seperti Berita Utama) === */
.sidebar-kategori-card .sidebar-article-list li .article-content {
flex: 1 !important;
min-width: 0 !important;
margin: 0 !important;
padding: 0 !important;
display: block !important;
}
.sidebar-kategori-card .sidebar-article-list li .article-content h4 {
font-size: 13px !important;
line-height: 1.35 !important;
margin: 0 0 4px 0 !important;
padding: 0 !important;
font-weight: 600 !important;
}
.sidebar-kategori-card .sidebar-article-list li .article-content h4 a {
font-size: 13px !important;
font-weight: 600 !important;
color: #1e293b !important;
text-decoration: none !important;
display: -webkit-box !important;
-webkit-line-clamp: 2 !important;
-webkit-box-orient: vertical !important;
overflow: hidden !important;
transition: color 0.15s ease !important;
}
.sidebar-kategori-card .sidebar-article-list li .article-content h4 a:hover {
color: #000 !important;
}
.sidebar-kategori-card .sidebar-article-list li .article-content .meta,
.sidebar-kategori-card .sidebar-article-list li .article-content .meta a {
font-size: 11px !important;
color: #64748b !important;
margin-top: 4px !important;
display: inline-flex !important;
flex-direction: row !important;
align-items: center !important;
gap: 4px !important;
text-decoration: none !important;
}
}
/* =============================================================
PREMIUM PROPORTIONAL SIDEBAR CARDS OVERRIDE
Applies to .sidebar-article-list and .article-block in .main-sidebar.right
============================================================= */
/* 1. Global & Desktop Styles (Horizontal Layout with Compact Thumbnails) */
.main-sidebar.right .widget .sidebar-article-list,
.main-sidebar.right .widget .article-block,
.main-sidebar.right .block .sidebar-article-list,
.main-sidebar.right .block .article-block {
display: flex !important;
flex-direction: column !important;
gap: 14px !important;
margin: 0 !important;
padding: 0 !important;
list-style: none !important;
width: 100% !important;
}
.main-sidebar.right .widget .sidebar-article-list li,
.main-sidebar.right .widget .article-block li,
.main-sidebar.right .block .sidebar-article-list li,
.main-sidebar.right .block .article-block li {
display: flex !important;
flex-direction: row !important;
align-items: flex-start !important;
gap: 12px !important;
width: 100% !important;
margin: 0 !important;
padding: 0 0 12px 0 !important;
border-bottom: 1px solid #f1f5f9 !important;
background: transparent !important;
float: none !important;
border-radius: 0 !important;
border-left: none !important;
border-right: none !important;
border-top: none !important;
overflow: visible !important;
}
.main-sidebar.right .widget .sidebar-article-list li:last-child,
.main-sidebar.right .widget .article-block li:last-child,
.main-sidebar.right .block .sidebar-article-list li:last-child,
.main-sidebar.right .block .article-block li:last-child {
border-bottom: none !important;
padding-bottom: 0 !important;
margin-bottom: 0 !important;
}
.main-sidebar.right .widget .sidebar-article-list li .article-photo,
.main-sidebar.right .widget .article-block .article-photo,
.main-sidebar.right .block .sidebar-article-list li .article-photo,
.main-sidebar.right .block .article-block .article-photo {
display: block !important;
flex: 0 0 84px !important;
width: 84px !important;
height: 60px !important;
margin: 0 !important;
border-radius: 8px !important;
overflow: hidden !important;
float: none !important;
flex-shrink: 0 !important;
background: #f8fafc !important;
}
.main-sidebar.right .widget .sidebar-article-list li .article-photo img,
.main-sidebar.right .widget .article-block .article-photo img,
.main-sidebar.right .block .sidebar-article-list li .article-photo img,
.main-sidebar.right .block .article-block .article-photo img {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
display: block !important;
transition: transform 0.3s ease !important;
border-radius: 8px !important;
}
.main-sidebar.right .widget .sidebar-article-list li:hover .article-photo img,
.main-sidebar.right .widget .article-block li:hover .article-photo img,
.main-sidebar.right .block .sidebar-article-list li:hover .article-photo img,
.main-sidebar.right .block .article-block li:hover .article-photo img {
transform: scale(1.06) !important;
}
.main-sidebar.right .widget .sidebar-article-list li .article-content,
.main-sidebar.right .widget .article-block .article-content,
.main-sidebar.right .block .sidebar-article-list li .article-content,
.main-sidebar.right .block .article-block .article-content {
display: block !important;
flex: 1 !important;
min-width: 0 !important;
margin: 0 !important;
padding: 0 !important;
}
.main-sidebar.right .widget .sidebar-article-list li .article-content h4,
.main-sidebar.right .widget .article-block .article-content h4,
.main-sidebar.right .block .sidebar-article-list li .article-content h4,
.main-sidebar.right .block .article-block .article-content h4 {
font-size: 13.5px !important;
line-height: 1.4 !important;
margin: 0 0 4px 0 !important;
font-weight: 600 !important;
padding: 0 !important;
}
/* Explicit exclusion for comment badge so it doesn't get clamped like the title */
.main-sidebar.right .widget .sidebar-article-list li .article-content h4 a:not(.h-comment),
.main-sidebar.right .widget .article-block .article-content h4 a:not(.h-comment),
.main-sidebar.right .block .sidebar-article-list li .article-content h4 a:not(.h-comment),
.main-sidebar.right .block .article-block .article-content h4 a:not(.h-comment) {
font-size: 13.5px !important;
font-weight: 600 !important;
color: #1e293b !important;
text-decoration: none !important;
display: -webkit-box !important;
-webkit-line-clamp: 2 !important;
-webkit-box-orient: vertical !important;
overflow: hidden !important;
transition: color 0.15s ease !important;
}
.main-sidebar.right .widget .sidebar-article-list li:hover .article-content h4 a:not(.h-comment),
.main-sidebar.right .widget .article-block li:hover .article-content h4 a:not(.h-comment),
.main-sidebar.right .block .sidebar-article-list li:hover .article-content h4 a:not(.h-comment),
.main-sidebar.right .block .article-block li:hover .article-content h4 a:not(.h-comment) {
color: var(--theme-color, #5a9e25) !important;
}
/* Modern Comment Badge Styling using FontAwesome 6 */
.main-sidebar.right .widget .sidebar-article-list li .article-content h4 a.h-comment,
.main-sidebar.right .widget .article-block .article-content h4 a.h-comment,
.main-sidebar.right .block .sidebar-article-list li .article-content h4 a.h-comment,
.main-sidebar.right .block .article-block .article-content h4 a.h-comment {
display: inline-flex !important;
align-items: center !important;
gap: 4px !important;
font-size: 11px !important;
font-weight: 500 !important;
color: #64748b !important;
background: #f1f5f9 !important;
padding: 2px 6px !important;
border-radius: 4px !important;
margin-left: 6px !important;
vertical-align: middle !important;
text-decoration: none !important;
opacity: 1 !important;
transition: all 0.2s ease !important;
}
.main-sidebar.right .widget .sidebar-article-list li .article-content h4 a.h-comment:before,
.main-sidebar.right .widget .article-block .article-content h4 a.h-comment:before,
.main-sidebar.right .block .sidebar-article-list li .article-content h4 a.h-comment:before,
.main-sidebar.right .block .article-block .article-content h4 a.h-comment:before {
content: "\f075" !important; /* FontAwesome Comment Icon */
font-family: "Font Awesome 6 Free" !important;
font-weight: 900 !important;
font-size: 10px !important;
color: #94a3b8 !important;
display: inline-block !important;
margin: 0 !important;
padding: 0 !important;
}
.main-sidebar.right .widget .sidebar-article-list li .article-content h4 a.h-comment:hover,
.main-sidebar.right .widget .article-block .article-content h4 a.h-comment:hover,
.main-sidebar.right .block .sidebar-article-list li .article-content h4 a.h-comment:hover,
.main-sidebar.right .block .article-block .article-content h4 a.h-comment:hover {
background: #e2e8f0 !important;
color: #0f172a !important;
}
.main-sidebar.right .widget .sidebar-article-list li .article-content h4 a.h-comment:hover:before,
.main-sidebar.right .widget .article-block .article-content h4 a.h-comment:hover:before,
.main-sidebar.right .block .sidebar-article-list li .article-content h4 a.h-comment:hover:before,
.main-sidebar.right .block .article-block .article-content h4 a.h-comment:hover:before {
color: var(--theme-color, #5a9e25) !important;
}
.main-sidebar.right .widget .sidebar-article-list li .article-content .meta,
.main-sidebar.right .widget .article-block .meta,
.main-sidebar.right .block .sidebar-article-list li .article-content .meta,
.main-sidebar.right .block .article-block .meta {
font-size: 11px !important;
color: #64748b !important;
display: inline-flex !important;
flex-direction: row !important;
align-items: center !important;
gap: 4px !important;
margin: 0 !important;
padding: 0 !important;
}
.main-sidebar.right .widget .sidebar-article-list li .article-content .meta a,
.main-sidebar.right .widget .sidebar-article-list li .article-content .meta span,
.main-sidebar.right .widget .article-block .meta a,
.main-sidebar.right .widget .article-block .meta span,
.main-sidebar.right .block .sidebar-article-list li .article-content .meta a,
.main-sidebar.right .block .sidebar-article-list li .article-content .meta span,
.main-sidebar.right .block .article-block .meta a,
.main-sidebar.right .block .article-block .meta span {
color: #64748b !important;
text-decoration: none !important;
display: inline-flex !important;
align-items: center !important;
gap: 4px !important;
}
/* 2. Mobile Override (max-width: 767px) */
@media (max-width: 767px) {
.main-sidebar.right .widget .sidebar-article-list,
.main-sidebar.right .widget .article-block,
.main-sidebar.right .block .sidebar-article-list,
.main-sidebar.right .block .article-block {
display: flex !important;
flex-direction: column !important;
grid-template-columns: none !important; /* override previous grid */
gap: 12px !important;
}
.main-sidebar.right .widget .sidebar-article-list li,
.main-sidebar.right .widget .article-block li,
.main-sidebar.right .block .sidebar-article-list li,
.main-sidebar.right .block .article-block li {
display: flex !important;
flex-direction: row !important;
align-items: flex-start !important;
gap: 12px !important;
padding: 0 0 12px 0 !important;
border-bottom: 1px solid #f1f5f9 !important;
margin-bottom: 0 !important;
background: transparent !important;
border-radius: 0 !important;
border-left: none !important;
border-right: none !important;
border-top: none !important;
overflow: visible !important;
}
.main-sidebar.right .widget .sidebar-article-list li .article-photo,
.main-sidebar.right .widget .article-block .article-photo,
.main-sidebar.right .block .sidebar-article-list li .article-photo,
.main-sidebar.right .block .article-block .article-photo {
flex: 0 0 80px !important;
width: 80px !important;
height: 58px !important;
border-radius: 6px !important;
overflow: hidden !important;
float: none !important;
margin: 0 !important;
flex-shrink: 0 !important;
}
.main-sidebar.right .widget .sidebar-article-list li .article-photo img,
.main-sidebar.right .widget .article-block .article-photo img,
.main-sidebar.right .block .sidebar-article-list li .article-photo img,
.main-sidebar.right .block .article-block .article-photo img {
border-radius: 6px !important;
}
}