@font-face { 
  font-family: icomoon; 
  src: url("../fonts/icomoon.eot?i7fsrr#iefix") format("embedded-opentype"), 
       url("../fonts/icomoon.ttf?i7fsrr") format("truetype"), 
       url("../fonts/icomoon.woff?i7fsrr") format("woff"), 
       url("../fonts/icomoon.svg?i7fsrr#icomoon") format("svg"); 
  font-style: normal; 
  font-weight: 400; 
  font-display: block; 
}

@font-face { 
  font-family: icons; 
  src: url("../fonts/icons.eot?jemrcm#iefix") format("embedded-opentype"), 
       url("../fonts/icons.ttf?jemrcm") format("truetype"), 
       url("../fonts/icons.woff?jemrcm") format("woff"), 
       url("../fonts/icons.svg?jemrcm#icomoon") format("svg"); 
  font-style: normal; 
  font-weight: 400; 
  font-display: block; 
}

:root {
  --gradient1: #821c1c;
  --gradient2: #2d2d2d;
  --footergradient1: #545454;
  --footergradient2: #000;
  --title: #444;
  --garis: #e4b622;
  --titlepost: #fff;
  --utama: #821c1c;
  --font: 'Poppins', sans-serif; /* Mengubah font utama menjadi Poppins */
  --bgmenu: #821c1c;
  --menucolor: #fff;
  --menuhover: #e4b622;
  --colorfooter: #fff;
}

body {
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #000000;
  background-color: #eee;
  font-size: 15px;
  line-height: 1.5;
  padding: 0;
  margin: 0;
}

body.offscroll {
  overflow: hidden;
}

* {
  box-sizing: border-box;
}

a {
  background-color: transparent;
  color: #444;
  text-decoration: none;
}

/* Icon Font Base Setup */
[class*=" icon-"], [class^="icon-"],
[class*=" icons-"], [class^="icons-"] {
  font-family: icomoon, icons, sans-serif !important;
  speak: never;
  font-style: normal;
  font-weight: 400;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Icon Font Definitions */
.icon-line:before { content: "\e901"; }
.icon-photo:before { content: "\e902"; }
.icon-twitter:before { content: "\f099"; }
.icon-facebook:before { content: "\f09a"; }
.icon-feed:before { content: "\f09e"; }
.icon-rss:before { content: "\f09e"; }
.icon-globe:before { content: "\f0ac"; }
.icon-google-plus:before { content: "\f0d5"; }
.icon-caret-down:before { content: "\f0d7"; }
.icon-angle-left:before { content: "\f104"; }
.icon-angle-right:before { content: "\f105"; }
.icon-angle-up:before { content: "\f106"; }
.icon-angle-down:before { content: "\f107"; }
.icon-youtube:before { content: "\f16a"; }
.icon-instagram:before { content: "\f16d"; }
.icon-google:before { content: "\f1a0"; }
.icon-whatsapp:before { content: "\f232"; }

.icons-category:before { content: "\e900"; }
.icons-home:before { content: "\e925"; }
.icons-attach:before { content: "\e903"; }
.icons-back-arrow:before { content: "\e904"; }
.icons-back:before { content: "\e905"; }
.icons-backspace:before { content: "\e906"; }
.icons-backward:before { content: "\e907"; }
.icons-bookmark:before { content: "\e909"; }
.icons-calandar:before { content: "\e90a"; }
.icons-call:before { content: "\e90b"; }
.icons-camera:before { content: "\e90c"; }
.icons-check:before { content: "\e912"; }
.icons-close:before { content: "\e914"; }
.icons-comment:before { content: "\e915"; }
.icons-configure:before { content: "\e916"; }
.icons-copy:before { content: "\e917"; }
.icons-cut:before { content: "\e918"; }
.icons-delete:before { content: "\e919"; }
.icons-disabled:before { content: "\e91a"; }
.icons-edit:before { content: "\e91b"; }
.icons-emoji-smile:before { content: "\e91c"; }
.icons-export:before { content: "\e91d"; }
.icons-file:before { content: "\e91e"; }
.icons-folder:before { content: "\e91f"; }
.icons-forward-arrow:before { content: "\e920"; }
.icons-forward-1:before { content: "\e921"; }
.icons-forward:before { content: "\e922"; }
.icons-heart:before { content: "\e923"; }
.icons-hide:before { content: "\e924"; }
.icons-image:before { content: "\e926"; }
.icons-layout:before { content: "\e927"; }
.icons-link:before { content: "\e928"; }
.icons-loading:before { content: "\e929"; }
.icons-location:before { content: "\e92a"; }
.icons-lock:before { content: "\e92b"; }
.icons-mail:before { content: "\e92c"; }
.icons-map:before { content: "\e92d"; }
.icons-menu-left:before { content: "\e92e"; }
.icons-menu-right:before { content: "\e92f"; }
.icons-more-vert:before { content: "\e931"; }
.icons-more:before { content: "\e932"; }
.icons-notification:before { content: "\e933"; }
.icons-paste:before { content: "\e934"; }
.icons-pause:before { content: "\e935"; }
.icons-play:before { content: "\e936"; }
.icons-plus:before { content: "\e937"; }
.icons-profile:before { content: "\e939"; }
.icons-refresh:before { content: "\e93a"; }
.icons-resize:before { content: "\e93b"; }
.icons-search:before { content: "\e93d"; }
.icons-send:before { content: "\e93e"; }
.icons-settings:before { content: "\e93f"; }
.icons-sound-muted:before { content: "\e940"; }
.icons-sound-playing:before { content: "\e941"; }
.icons-star:before { content: "\e942"; }
.icons-tag:before { content: "\e943"; }
.icons-thumbs-up-1:before { content: "\e944"; }
.icons-thumbs-up:before { content: "\e945"; }
.icons-time:before { content: "\e946"; }
.icons-view:before { content: "\e947"; }
.icons-wifi:before { content: "\e948"; }

.icon-play {
  z-index: 1;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-size: 32px;
  transition: all 0.2s ease;
  box-shadow: 0 0 0 5px rgba(0, 0, 0, 0.4);
  border-radius: 24px;
}

/* Content & Grid Structure */
.content, .content.boxed {
  background-color: #FFF;
  display: block;
  max-width: 640px;
  margin: 0 auto;
}

.row {
  display: flex;
  flex-wrap: wrap;
  margin-right: -15px;
  margin-left: -15px;
}

.container {
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
  width: 100%;
  max-width: 640px;
}

.col, .col-1, .col-10, .col-11, .col-12, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9 {
  position: relative;
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
}

.col {
  flex-basis: 0;
  flex-grow: 1;
  max-width: 100%;
}

.col-1 { flex: 0 0 8.333333%; max-width: 8.333333%; }
.col-2 { flex: 0 0 16.666667%; max-width: 16.666667%; }
.col-3 { flex: 0 0 25%; max-width: 25%; }
.col-4 { flex: 0 0 33.333333%; max-width: 33.333333%; }
.col-5 { flex: 0 0 41.666667%; max-width: 41.666667%; }
.col-6 { flex: 0 0 50%; max-width: 50%; }
.col-7 { flex: 0 0 58.333333%; max-width: 58.333333%; }
.col-8 { flex: 0 0 66.666667%; max-width: 66.666667%; }
.col-9 { flex: 0 0 75%; max-width: 75%; }
.col-10 { flex: 0 0 83.333333%; max-width: 83.333333%; }
.col-11 { flex: 0 0 91.666667%; max-width: 91.666667%; }
.col-12 { flex: 0 0 100%; max-width: 100%; }

/* Skeleton Animations */
@keyframes shimmer {
  100% { transform: translateX(100%); }
}

.main {
  padding: 15px 0;
}

.media-image {
  background: #DDD;
  position: relative;
  overflow: hidden;
}

.media-image:before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background: #DDD;
  animation: shimmer 2s infinite; 
}

.media-image:after {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  transform: translateX(-100%);
  background-image: linear-gradient(90deg, rgba(255,255,255,0) 0, rgba(255,255,255,.2) 20%, rgba(255,255,255,.5) 60%, rgba(255,255,255,0));
  animation: shimmer 2s infinite;
  content: "";
}

.media-image img {
  display: block;
  object-fit: cover;
  width: 100%;
  z-index: 2;
  position: absolute;
  height: 100%;
}

.media-link:before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 3;
  cursor: pointer;
}

/* Widgets */
.widget-header {
  position: relative;
}

.widget-header .title {
  font-size: 20px;
  color: var(--title);
  margin-top: 0;
  font-weight: 600;
}

.widget-header .title:after {
  content: "";
  position: absolute;
  bottom: -5px;
  left: 0;
  background: var(--garis);
  width: 20%;
  height: 4px;
  border-radius: 50em;
}

.widget {
  display: block;
  margin-bottom: 30px;
}

/* Parallax Ads */
.adx-parallax {
  background: #1d2327;
}

.parallax-box {
  margin-right: auto;
  margin-left: auto;
  width: 300px;
  height: 600px;
  position: relative;
  max-width: 640px;
  left: 0;
  right: 0;
  margin-bottom: 0;
}

.parallax-wrap {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  clip: rect(auto, auto, auto, auto);
}

.parallax-wrap .widget {
  width: 100%;
  height: auto;
  position: fixed;
  transform: translateZ(0);
  margin: 0 auto;
  max-width: 640px;
  left: 0;
  right: 0;
}

.parallax-wrap .widget img {
  display: block;
  margin: 0 auto;
  width: 300px;
  height: auto;
}

.parhide .adx-parallax {
  display: none;
}

.parallaxads {
  margin-right: -15px;
  margin-left: -15px;
  width: auto;
  height: 300px;
  position: relative;
  left: 0;
  right: 0;
  margin-bottom: 0;
  background: #1d2327;
}

.parallaxads-box {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  clip: rect(auto, auto, auto, auto);
}

.parallaxads-wrap {
  height: auto;
  position: fixed;
  top: 97px;
  transform: translateZ(0);
  margin: 0 auto;
  max-width: 640px;
  width: 100%;
}

.parallaxads-wrap img {
  margin: 0 auto;
  display: block;
}

.parallaxads span {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  display: block;
  background: var(--utama);
  color: #fff;
  text-align: center;
  text-transform: uppercase;
  font-weight: bold;
  font-size: 8px;
  z-index: 9;
}

.parallaxads .widget {
  margin-bottom: 0;
}

.billboard {
  margin-top: 15px;
  display: block;
  margin-bottom: 15px;
}

.billboard .widget {
  margin-bottom: 0;
  margin-left: auto;
  margin-right: auto;
  justify-content: center;
  width: 100%;
  height: auto;
  display: block;
  text-align: center;
}

.billboard img {
  display: block;
}

/* Header */
.box-header {
  position: sticky;
  top: 0;
  z-index: 99;
}

header.header-app {
  height: 50px;
  position: relative;
  z-index: 99;
  background: #fff;
}

.header-app-box.box-left {
  display: flex;
  justify-content: flex-start;
}

.header-app-box.box-right {
  display: flex;
  justify-content: flex-end;
}

.app-logo {
  display: flex;
  justify-content: center;
  padding: 10px 0;
}

.app-logo img {
  display: block;
  max-height: 25px;
  width: auto;
}

.bars {
  padding: 13px 0;
  background: transparent;
  border: 0;
  outline: 0;
  display: flex;
  align-content: center;
  flex-wrap: wrap;
  justify-content: center;
  cursor: pointer;
  position: relative;
  flex-direction: column;
  width: 34px;
  height: 50px;
}

.line {
  width: 22px;
  height: 2px;
  transition: all .2s ease-out;
  background-color: #54565d;
  display: block;
  position: absolute;
  right: 0;
}

.line:nth-child(1) { top: 18px; }
.line:nth-child(2) { top: 26px; width: 14px; }
.line:nth-child(3) { top: 34px; }

.bars.close .line:nth-child(1) {
  top: 24px;
  transform: rotate(-45deg);
}

.bars.close .line:nth-child(2) {
  display: none;
}

.bars.close .line:nth-child(3) {
  top: 24px;
  transform: rotate(45deg);
}

.social-app-box {
  display: flex;
}

.social-app-item {
  margin: 9px 2px;
}

.social-app-link {
  font-size: 16px;
  width: 32px;
  height: 32px;
  padding: 8px;
  color: #fff;
  background: #eff0f6;
  display: flex;
  border-radius: 50em;
  text-align: center;
  justify-content: center;
}

.header-date {
  padding: 15px 0;
  font-size: 13px;
  color: #999;
}

.header-app-item {
  padding: 0 5px;
  position: relative;
}

.header-app-box.box-left .header-app-item:first-child {
  padding-left: 0;
}

.header-app-box.box-right .header-app-item:last-child {
  padding-right: 0;
  border: 0;
}

.mode, .btn-search, .btn-network {
  padding: 13px 0;
  background: transparent;
  border: 0;
  outline: 0;
  display: flex;
  align-content: center;
  flex-wrap: wrap;
  justify-content: center;
  cursor: pointer;
}

.mode i.dark {
  background-image: url("data:image/svg+xml,%3Csvg width='24px' height='24px' viewBox='0 0 24 24' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Ctitle%3Emoon@1x%3C/title%3E%3Cg id='moon' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd' stroke-linecap='round' stroke-linejoin='round'%3E%3Cg id='Group' transform='translate(-0.000000, -0.000000)' stroke='%2354565d' stroke-width='1.6'%3E%3Cpath d='M21.0000001,12.7900001 C20.5623509,17.5258085 16.5155206,21.1036352 11.7617765,20.9575684 C7.00803243,20.8115016 3.1884985,16.9919677 3.04243172,12.2382236 C2.89636495,7.48447951 6.47419162,3.43764924 11.21,3.00000001 C9.15036197,5.78645174 9.43925663,9.66045323 11.8894017,12.1105984 C14.3395469,14.5607435 18.2135484,14.8496381 21.0000001,12.7900001 L21.0000001,12.7900001 Z' id='Path'%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  width: 24px;
  height: 24px;
  background-repeat: no-repeat;
  background-position: center;
}

.mode i.light {
  background-image: url("data:image/svg+xml,%0A%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 17C14.7614 17 17 14.7614 17 12C17 9.23858 14.7614 7 12 7C9.23858 7 7 9.23858 7 12C7 14.7614 9.23858 17 12 17Z' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M12 1V3' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M12 21V23' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M4.22 4.22L5.64 5.64' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M18.36 18.36L19.78 19.78' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M1 12H3' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M21 12H23' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M4.22 19.78L5.64 18.36' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M18.36 5.64L19.78 4.22' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
  filter: invert(57%) sepia(0%) saturate(61%) hue-rotate(240deg) brightness(105%) contrast(97%);
  width: 24px;
  height: 24px;
  background-repeat: no-repeat;
  background-position: center;
}

.btn-search i, .btn-network i {
  font-size: 24px;
  color: #54565d;
}

.mode span, .btn-search span, .btn-network span {
  font-size: 10px;
  text-transform: uppercase;
  color: #999;
  flex: 1;
  display: flex;
  align-content: center;
  height: 100%;
  margin: auto 0 auto 10px;
  font-weight: bold;
}

/* Navigation */
nav.app-nav {
  background: var(--bgmenu);
  position: relative;
  overflow: hidden;
  height: 41px;
}

.app-nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  white-space: nowrap;
}

.app-nav ul > li > a {
  color: var(--menucolor);
  padding: 10px;
  display: block;
  font-weight: 600;
}

.app-nav ul > li > a:hover {
  color: var(--menuhover);
}

.app-nav ul > li.current-menu-item > a {
  color: var(--menuhover);
}

.app-nav ul a .menu-image-title {
  padding: 0;
  margin: 0;
}

.nav-wrap {
  display: flex;
  justify-content: flex-start;
  margin: 0 -15px;
  overflow-y: auto;
  padding-bottom: 10px;
}

.nav-home a {
  color: var(--menucolor);
  padding: 10px 20px;
  display: block;
  background: rgba(0, 0, 0, 0.2);
}

.app-nav ul.sub-menu {
  display: none;
}

.network-box {
  position: absolute;
  right: 0;
  width: 350px;
  background: #fff;
  top: 50px;
  box-shadow: 0 0 8px rgba(0, 0, 0, .1);
  border-radius: 5px;
  overflow: hidden;
  transform: translateX(110px);
  display: none;
  z-index: 100;
}

.header-app-item.netbox:hover .network-box {
  display: block;
}

.network-box ul {
  list-style: none;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  padding: 0 5px 10px;
}

.network-box ul li {
  width: 50%;
}

.network-box ul li a {
  font-size: 13px;
  display: block;
  padding: 10px 3px 5px;
  font-weight: 600;
  text-align: center;
}

.form-search {
  position: fixed;
  right: 0;
  background: #fff;
  top: 91px;
  box-shadow: 0 0 8px rgba(0, 0, 0, .1);
  overflow: hidden;
  padding: 10px;
  width: 100%;
  display: none;
  z-index: 100;
  left: 0;
  max-width: 640px;
  margin: 0 auto;
}

.search-transparent {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100vh;
  background: rgba(0, 0, 0, .8);
  transition: all .2s ease;
  z-index: 4;
  display: none;
  right: 0;
  max-width: 640px;
  margin: 0 auto;
}

.search-transparent.show {
  display: block;
}

.input-search {
  display: block;
  width: 100%;
  border: 1px solid #eee;
  padding: 7px 10px;
  outline: 0;
}

.header-app-box.box-right .icons, 
.header-app-box.box-right .icon {
  color: #54565d;
}

/* Slick Slider Core */
.slick-slider { position: relative; display: block; box-sizing: border-box; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-touch-callout: none; -ms-touch-action: pan-y; touch-action: pan-y; -webkit-tap-highlight-color: transparent; }
.slick-list { position: relative; display: block; overflow: hidden; margin: 0; padding: 0; }
.slick-list:focus { outline: 0; }
.slick-list.dragging { cursor: pointer; }
.slick-slider .slick-list, .slick-slider .slick-track { transform: translate3d(0, 0, 0); }
.slick-track { position: relative; top: 0; left: 0; display: block; margin-left: auto; margin-right: auto; }
.slick-track:after, .slick-track:before { display: table; content: ''; }
.slick-track:after { clear: both; }
.slick-loading .slick-track { visibility: hidden; }
.slick-slide { display: none; float: left; height: 100%; min-height: 1px; }
[dir=rtl] .slick-slide { float: right; }
.slick-slide img { display: block; }
.slick-slide.slick-loading img { display: none; }
.slick-slide.dragging img { pointer-events: none; }
.slick-initialized .slick-slide { display: block; }
.slick-loading .slick-slide { visibility: hidden; }
.slick-vertical .slick-slide { display: block; height: auto; border: 1px solid transparent; }
.slick-arrow.slick-hidden { display: none; }

/* Custom Slider Component */
.slider-image {
  width: 100%;
  height: 0;
  border-radius: 5px;
  overflow: hidden;
  padding-bottom: 80%;
}

.slider-item {
  position: relative;
  overflow: hidden;
  border-radius: 5px;
}

.slider-content {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 160px 20px 20px;
  background: linear-gradient(0deg, #000000 0%, transparent 100%);
  z-index: 9;
  text-align: center;
}

.slider-title h2 {
  font-size: 18px;
  margin: 0;
  line-height: 1.3;
  margin-bottom: 10px;
  font-weight: 600;
}

.slider-title h2 a {
  color: #fff;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.slider-category a {
  background: var(--utama);
  font-weight: 600;
  padding: 3px 10px;
  color: #fff;
  font-size: 10px;
  text-transform: uppercase;
  margin-bottom: 10px;
  display: inline-block;
}

.slider-snippet {
  color: #999;
  max-width: 400px;
  display: none;
  font-size: 12px;
}

.slider-snippet p {
  margin-bottom: 0;
}

.slider-date {
  color: #fff;
  font-size: 12px;
}

.slick-dots {
  list-style: none;
  display: flex;
  justify-content: center;
  margin: 0;
  padding-top: 15px;
  padding-left: 0;
  padding-right: 0;
  position: relative;
}

.slick-dots li {
  position: relative;
  display: inline-block;
  margin: 0 5px;
  padding: 0;
}

.slick-dots button {
  border: 0;
  background: #b6b6b6;
  display: block;
  outline: none;
  line-height: 0;
  font-size: 0;
  color: transparent;
  padding: 5px;
  height: 10px;
  width: 10px;
  cursor: pointer;
  border-radius: 10px;
  transition: all 0.2s ease;
}

.slick-dots li.slick-active button {
  width: 50px;
  background: var(--utama);
}

/* Post Loops (Terkini) */
.terkini-item {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 15px;
  align-items: center;
  border-bottom: 1px solid #eee;
  padding-bottom: 15px;
}

.terkini-item:last-child {
  margin-bottom: 0;
  border-bottom: 0;
  padding-bottom: 0;
}

.terkini-image {
  width: 90px;
  height: 0;
  border-radius: 5px;
  overflow: hidden;
  padding-bottom: 90px;
  margin-right: 15px;
}

.terkini-content {
  flex: 1;
}

.terkini-meta {
  display: flex;
}

.terkini-category, .terkini-category a {
  font-weight: 600;
  padding: 3px 0;
  font-size: 10px;
  text-transform: uppercase;
  color: var(--utama);
}

.terkini-date {
  font-size: 10px;
  padding: 3px 5px;
  color: #999;
}

.terkini-title h2 {
  margin: 0;
  font-size: 16px;
  line-height: 1.3;
  font-weight: 600;
}

.terkini-title h2 a {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.related-title a:hover,
.tag-title a:hover,
.terkini-title h2 a:hover,
.popular-title a:hover,
.list-title a:hover {
  color: var(--utama);
}

.terkini-snippet {
  margin-top: 10px;
}

.terkini-snippet p {
  margin: 0;
  color: #666;
  font-size: 13px;
}

/* Alternative Slider 1 Component */
.slider1 {
  margin-left: -15px;
  margin-right: -15px;
  background: #eeeeee;
  padding: 15px;
  border-radius: 0;
}

.slider1-box {
  margin: 0 -5px;
}

.slider1-item {
  position: relative;
  padding: 0 5px;
  border-radius: 5px;
  overflow: hidden;
}

.slider1-image {
  width: 100%;
  height: 0;
  border-radius: 5px;
  overflow: hidden;
  padding-bottom: 150%;
  margin-right: 15px;
}

.slider1 .slick-list {
  margin: 0 -10px;
  padding: 0 10px;
}

.slider1-content {
  position: absolute;
  bottom: 0;
  left: 0;
  padding: 15px;
  background: linear-gradient(0deg, #000000 0%, transparent 100%);
  z-index: 9;
  right: 0;
  margin: 0 5px;
  border-radius: 5px;
  overflow: hidden;
  top: 0;
  display: flex;
  align-items: flex-end;
}

.slider1-title h2 {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
}

.slider1-title h2 a {
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
  color: #fff;
}

.slick-arrow {
  width: 30px;
  height: 30px;
  font-size: 24px;
  background: #f9f9fa;
  display: block;
  text-align: center;
  border-radius: 50em;
  position: absolute;
  top: 50%;
  margin-top: -20px;
  z-index: 3;
  color: #444;
  box-shadow: 0 0 0 5px rgba(0,0,0,0.4);
}

.arrow-left { left: -10px; }
.arrow-right { right: -10px; }

.slider1.slider-bg {
  background-color: var(--gradient1);
  background-image: linear-gradient(62deg, var(--gradient1) 0%, var(--gradient2) 100%);
}

.slider1.slider-bg .widget-header h3 {
  margin-top: 0;
  color: var(--titlepost);
}

/* Topic / Categories Component */
.topik .widget-header h3 {
  margin-top: 0;
}

.topik-box {
  margin: 0 -5px;
}

.topik-item {
  position: relative;
  padding: 0 5px;
}

.topik-image {
  width: 100%;
  height: 0;
  border-radius: 5px;
  overflow: hidden;
  padding-bottom: 54%;
}

.topik-content {
  position: absolute;
  bottom: 0;
  left: 0;
  background: rgba(0,0,0,0.4);
  z-index: 9;
  right: 0;
  margin: 0 5px;
  border-radius: 5px;
  overflow: hidden;
  top: 0;
  display: flex;
  justify-content: center;
  padding: 0 10px;
  align-items: center;
  flex-direction: column;
}

.topik-title h2 {
  font-size: 16px;
  margin: 0;
  text-align: center;
  font-weight: 600;
}

.topik-title h2 a {
  color: #fff;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.topik-count {
  background: var(--utama);
  font-weight: 600;
  padding: 3px 10px;
  color: #fff;
  font-size: 10px;
  text-transform: uppercase;
  border-radius: 5px;
}

.slider1-more {
  background: var(--utama);
  font-weight: 600;
  padding: 3px 10px;
  color: #fff;
  font-size: 10px;
  text-transform: uppercase;
  position: absolute;
  top: 5px;
  z-index: 9;
  right: 10px;
  border-radius: 5px;
}

/* Footer Section Rules */
.widget-footer {
  padding: 15px 0;
  display: block;
  text-align: center;
  border-top: 1px solid #eee;
  margin-top: 15px;
}

.btn-index {
  display: inline-block;
  padding: 7px 15px;
  background: #413f45;
  color: #fff;
  border-radius: 50em;
  font-size: 12px;
  text-transform: uppercase;
  font-weight: 600;
}

/* Tags Rules */
.tag-item {
  padding: 5px 0;
}

.tag-box {
  display: flex;
  align-items: baseline;
  font-size: 16px;
}

.hastag {
  color: var(--utama);
  margin-right: 8px;
  font-size: 16px;
}

.tag-title {
  font-size: 16px;
  line-height: 1.5;
  font-weight: 600;
  margin: 0;
}

/* Popular Posts */
.popularpos .widget-content {
  border-radius: 5px;
  overflow: hidden;
}

.popular-item {
  display: flex;
  align-items: center;
  position: relative;
  padding: 15px;
}

.popular-number {
  width: 50px;
  text-align: center;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  border-radius: 100em;
  font-size: 30px;
  margin-right: 15px;
}

.popular-content {
  flex: 1;
}

.popular-title {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.4;
}

.popular-title a {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.popular-item:nth-child(odd) {
  background: #f3f3f3;
}

.popular-item:nth-child(even) {
  background: #e8e8e8;
}

/* Generic List Feed */
.list-item {
  align-items: center;
  position: relative;
  padding-bottom: 15px;
  display: flex;
  border-bottom: 1px solid #eee;
  margin-bottom: 15px;
}

.list-item:last-child {
  border: 0;
  margin-bottom: 0;
}

.list-hastag {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #e8e8e8;
  border-radius: 50em;
  font-size: 20px;
  margin-right: 15px;
  color: var(--utama);
}

.list-content {
  flex: 1;
}

.list-title {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
}

.list-title a {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.list.list-custom .list-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.list.list-custom .list-content {
  flex: unset;
}

.list-date, 
.list.list-custom .list-item .list-date {
  font-size: 10px;
  padding: 3px 5px 3px 0;
  color: #999;
}

.list-network-name {
  font-weight: 600;
  padding: 3px 0;
  font-size: 10px;
  text-transform: uppercase;
  color: var(--utama);
}

.list-network-date {
  font-size: 10px;
  padding: 3px 5px;
  color: #999;
}

.list-network {
  display: flex;
}

.related-date:before,
.list-network-date:before,
.terkini-date:before {
  content: "\00B7";
  margin-right: 5px;
  font-size: 10px;
  display: inline-block;
  font-weight: bold;
}

/* Sidebar Navigation Menu */
.sidebar-menu {
  padding: 0;
  transition: all .2s ease;
  position: fixed;
  width: 100%;
  height: 100vh;
  top: 91px;
  left: 0;
  z-index: 99;
  display: none;
  max-width: 640px;
  right: 0;
  margin: 0 auto;
  background-color: var(--footergradient1);
  background-image: linear-gradient(62deg, var(--footergradient1) 0%, var(--footergradient2) 100%);
  color: var(--colorfooter);
  overflow-y: auto;
  padding-bottom: 91px;
}

.sidebar-menu-box {
  padding: 30px 15px;
}

.sidebar-menu-box > * {
  margin-bottom: 15px;
  border-bottom: 1px solid rgba(165, 165, 165, 0.1);
}

.menu-sidebar ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
}

.menu-sidebar ul li {
  width: 50%;
}

.menu-sidebar ul li a {
  padding: 5px 0;
  display: block;
  text-align: center;
  color: var(--colorfooter);
}

.menu-network ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.menu-network ul li {
  width: 50%;
}

.menu-network ul li a {
  padding: 5px 0;
  display: block;
  text-align: center;
  color: var(--colorfooter);
}

.menu-network ul li a .menu-image-title,
.menu-sidebar ul li a .menu-image-title {
  padding: 0;
}

.sharebox {
  display: flex;
  justify-content: center;
}

.sidebar-menu-box > *:last-child {
  border: 0;
}

.menu-sidebar ul > li.menu-item-has-children > a:after {
  content: "\f107";
  font-family: icomoon !important;
  speak: never;
  font-style: normal;
  font-weight: 400;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  margin-left: 10px;
}

.copyrightbox {
  text-align: center;
}

/* Breadcrumbs */
.breadcrumb {
  padding: 0 0 15px 0;
}

.breadcrumb .breadcrumb-wrap {
  padding: 0;
  margin: 0;
  list-style: none;
  display: flex;
}

.breadcrumb .breadcrumb-item {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  background: transparent;
  margin-right: 5px;
  font-weight: 600;
  border-radius: 5px;
  border-bottom: 3px solid var(--utama);
}

.breadcrumb .breadcrumb-item:first-child a {
  display: flex;
  align-items: center;
}

.breadcrumb .breadcrumb-item i {
  font-size: 16px;
  font-weight: bold;
}

.breadcrumb-link {
  display: flex;
  width: 100%;
  height: 100%;
  align-items: center;
  padding: 5px 15px;
}

/* Single Post Page Structure */
.post-title {
  margin-bottom: 10px;
}

.post-title h1 {
  margin: 15px 0 15px 0;
  font-size: 23px;
  line-height: 1.3;
  text-align: center;
}

.post-subheader {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
  flex-direction: column;
  text-align: center;
}

.post-meta {
  display: flex;
  margin-bottom: 15px;
  font-size: 12px;
}

.post-meta-author {
  color: #999;
}

.post-meta-author a {
  color: var(--utama);
  font-weight: 600;
}

.post-meta-date {
  color: #999;
  margin-left: 5px;
}

.post-share {
  display: flex;
  justify-content: flex-end;
}

figure {
  padding: 0;
  margin: 0;
}

.post-featured {
  margin: 0 -15px;
}

.featured-image img {
  width: 100%;
  height: auto;
  display: block;
}

.post-featured figcaption {
  font-size: 12px;
  color: #999;
  padding: 5px 15px;
}

.post-content {
  font-size: 16px;
  padding: 15px 0;
}