/* =================================================================== */
/* 1. GAYA DASAR & GLOBAL (MOBILE-FIRST)
/* Aturan di sini berlaku untuk semua ukuran layar kecuali diubah
/* pada breakpoint yang lebih besar.
/* =================================================================== */

/* Utilitas Iklan & Umum */

/* Untuk Chrome, Edge, Safari (WebKit) */
::-webkit-scrollbar {
  display: none;
}

/* Untuk Firefox */
html {
  scrollbar-width: none; /* Firefox */
}

/* Terapkan ke body atau elemen tertentu */
body {
  -ms-overflow-style: none; /* IE/Edge lama */
  overflow-y: scroll; /* tetap bisa scroll vertikal */
}

.post-item .image img {
  border-radius: 10px;
}



div[id^="div-gpt-ad-"] {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%; /* Pastikan container memenuhi lebar yang tersedia */
  /* Opsional: Tambahkan warna latar belakang agar 'black space'
       terlihat konsisten. Ganti dengan warna desain Anda. */
  /* background-color: #f0f0f0; */
}

/*
 * Terkadang GPT membungkus iklan dalam iframe atau div lain. Aturan ini
 * memastikan elemen di dalamnya juga ikut berada di tengah jika diperlukan.
*/
div[id^="div-gpt-ad-"] > div,
div[id^="div-gpt-ad-"] iframe {
  margin: 0 auto !important; /* Paksa ke tengah */
  display: block !important;
}

/*Floating Video ad*/

/* Styling untuk Iklan Video Melayang - DIPERBARUI (Slide dari Kanan) */
.floating-video-ad {
  position: fixed;
  bottom: 40%;
  right: 0;
  width: 320px;
  max-width: 90%;
  z-index: 9999;
  /* (BARU) Mulai dari posisi tersembunyi di luar layar kanan */
  transform: translateX(150%);
  transition: transform 0.5s ease-in-out;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.25);
  overflow: hidden;
  background-color: #000;
}

.floating-video-ad.visible {
  /* (BARU) Bergeser ke posisi normal di dalam layar */
  transform: translateX(0);
}



/* Sisa CSS tetap sama */
.floating-video-ad .ad-container {
  position: relative;
  padding-top: 56.25%; /* Rasio aspek 16:9 */
  height: 0;
}

.floating-video-ad .ad-container > div {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/*End Floating Video Ads*/

/* Tombol share container tetap */
.d-flex.post-share-buttons {
  display: flex !important;
  justify-content: center;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  background: rgba(255, 255, 255, 0.95);
  border-radius: 40px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3);
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  z-index: 99999;
  opacity: 0;
  visibility: hidden;
  transition: bottom 0.3s ease, opacity 0.3s ease, visibility 0.3s ease,
    transform 0.3s ease;
}

.d-flex.post-share-buttons.visible {
  opacity: 1;
  visibility: visible;
}

/* Tombol share icon */
.d-flex.post-share-buttons .btn-share a {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  font-size: 18px;
  color: #fff;
  background: linear-gradient(135deg, #4a90e2, #34495e); /* biru-abu netral */
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.25);
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.3s ease;
}

.d-flex.post-share-buttons .btn-share a:hover {
  transform: translateY(-2px) scale(1.1);
  box-shadow: 0 5px 12px rgba(0, 0, 0, 0.35);
}

/* Warna spesifik platform dengan gradien */
.color-facebook {
  background: linear-gradient(135deg, #1877f2, #145dbf);
}
.color-twitter {
  background: linear-gradient(135deg, #1da1f2, #0d8ddb);
}
.color-linkedin {
  background: linear-gradient(135deg, #0a66c2, #004182);
}
.color-whatsapp {
  background: linear-gradient(135deg, #25d366, #128c7e);
}
.color-pinterest {
  background: linear-gradient(135deg, #bd081c, #8c0616);
}
/* Margin fix */
.post-share-buttons .btn-share {
  margin-bottom: 0px !important;
}

.scrollup {
  bottom: 60px !important;
}

.fixed-top {
  position: relative !important;
}

.bn-content .bn-inner {
  align-content: center !important;
  justify-items: center !important;
}

div.bn-inner[data-space-name="header"],
div.bn-inner[data-space-name="billboard"],
div.bn-inner[data-space-name*="sidebar"],
div.bn-inner[data-space-name*="sidebar_2"] {
  align-content: flex-start !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  
}





div.bn-inner[data-space-name="sidebar_2"] {
  position: sticky;
  top: 110px;
}

.ratio {
  border-radius: 0 !important;
}

/* Tabel Responsif */
table {
  -webkit-overflow-scrolling: touch !important;
  border-collapse: collapse !important;
  display: block !important;
  margin-bottom: 20px;
  overflow-x: auto !important;
  white-space: nowrap !important;
  width: 100% !important;
}

table th,
table td {
  border: 1px solid #ddd !important;
  padding: 8px !important;
  text-align: left !important;
}

table thead tr {
  background-color: #f2f2f2 !important;
}

table tbody tr:nth-child(even) {
  background-color: #fafafa !important;
}

/* Gaya Teks & Lainnya */
.rec-desc {
  font-size: 16px !important;
}

.about-author {
  align-items: flex-end;
}

.about-author .img-author {
  border-radius: 50%;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5) !important;
  height: 50px;
  width: 50px;
}

figcaption {
  font-size: 0.7em;
  font-style: italic;
}

.author-by {
  margin-right: 5px;
}

.ads-text {
  color: #6c757d;
  font-family: "Inter";
  font-size: 11px !important;
}

.post-details-meta .item-meta-author a {
  color: #ff6000;
  font-weight: 600;
}

.h1,
.h2,
.h3,
.h4,
.h5,
.h6,
h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: 600;
  line-height: 1.4;
}

.h4,
h4 {
  font-size: calc(1rem + 0.3vw);
}

/* Gaya Border Radius Umum */
.btn-custom {
  border-radius: 20px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5) !important;
}

.modal-login .modal-content {
  border-radius: 2rem;
}

.modal-header .btn-close {
  right: 1.5rem;
  top: 1.5rem;
}

.scrollup i {
  background-color: var(--vr-theme-color);
  border-radius: 50%;
  bottom: 50px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5) !important;
}

.section-comments textarea,
.form-input {
  border-radius: 20px;
}

.footer-widget .newsletter .newsletter-inputs button {
  border-radius: 5px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5) !important;
  height: 40px;
}

.nav-mobile .btn-default,
.btn-md {
  border-radius: 25px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5) !important;
}

.post-share-buttons .btn-share a {
  border-radius: 50%;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

.badge-category {
  border-radius: 1rem;
}

/* =================================================================== */
/* 2. GAYA KOMPONEN SPESIFIK (MOBILE-FIRST)
/* =================================================================== */

/* --- HEADER, NAV & SEARCH --- */
#header {
  animation: gradientMove 12s ease infinite;
  background: linear-gradient(350deg, #00050e, #042e6d, #000000, #010306);
  background-size: 600% 600%;
  box-sizing: border-box;
  color: #fff;
  margin-bottom: 0 !important;
  /*position: sticky;*/
  /*top: 0;*/
  transition: max-width 0.4s ease-in-out;
  z-index: 9999;
}

#nav-top {
  animation: gradientRun 20s ease infinite;
  background: linear-gradient(270deg, #6a00ff, #030f10, #6a00ff);
  background-size: 600% 600%;
  overflow: hidden;
  position: relative;
  z-index: 1;
}

.mega-menu-container {
  top: 50px !important;
}

.mega-menu .menu-post-item .image img {
  border-radius: 10px;
}

.search-form {
  align-items: center;
  background: linear-gradient(135deg, #0a0a0a, #1a0033, #001f3f);
  border-radius: 12px;
  box-shadow: 0 0 10px rgba(128, 0, 255, 0.2);
  justify-content: center;
  padding: 8px;
  top: 100px;
}

.search-form .form-input {
  background: rgba(20, 20, 40, 0.9);
  border: 1px solid rgba(128, 0, 255, 0.4);
  border-radius: 8px;
  color: #fff;
  flex: 1;
  font-size: 14px;
  font-weight: 500;
  outline: none;
  padding: 10px 14px;
  transition: all 0.3s ease;
}

.search-form .form-input:focus {
  background: rgba(30, 30, 60, 0.95);
  border-color: #8e2de2;
  box-shadow: 0 0 12px rgba(142, 45, 226, 0.6);
}

.search-form .btn-custom {
  align-items: center;
  background: linear-gradient(135deg, #6a11cb, #2575fc);
  border-radius: 8px;
  box-shadow: 0 0 8px rgba(0, 150, 255, 0.4);
  color: #fff;
  cursor: pointer;
  display: flex;
  justify-content: center;
  margin-left: 8px;
  padding: 10px 12px;
  transition: all 0.3s ease;
}

.search-form .btn-custom:hover {
  box-shadow: 0 0 14px rgba(0, 150, 255, 0.6);
  transform: scale(1.05);
}

/* --- CRYPTO MARQUEE --- */
#crypto-marquee-container {
  background-color: #1a1a1a;
  border-bottom: 1px solid #333;
  border-top: 1px solid #333;
  overflow: hidden;
  padding: 15px 0;
  position: sticky;
  /*top: 40px;*/
  transition: max-width 0.4s ease-in-out;
  width: 100%;
  z-index: 9998;
}

#crypto-marquee-container:hover .marquee-content-wrapper {
  animation-play-state: paused;
}

.marquee-content-wrapper {
  animation: marquee-scroll 20s linear infinite;
  display: flex;
  flex-wrap: nowrap;
}

.crypto-item-single {
  align-items: center;
  display: flex;
  flex-shrink: 0;
  margin: 0 15px;
}

.crypto-item-single img {
  height: 20px;
  margin-right: 8px;
  width: 20px;
}

.crypto-name-single,
.loading-text-gradient {
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: gaming-gradient 4s linear infinite;
  background: linear-gradient(90deg, #00f0ff, #6a00f4, #ff00c4, #00f0ff);
  background-clip: text;
  background-size: 200% auto;
  color: #fff;
  font-weight: bold;
}

.crypto-name-single {
  font-size: 14px;
}

.crypto-price-indicator {
  font-size: 13px;
  margin-left: 8px;
}

.price-up {
  color: #26a69a;
}

.price-down {
  color: #ef5350;
}

/* --- IKLAN STICKY SAMPING --- */
#sticky-ad-left,
#sticky-ad-right {
  display: none;
  height: 600px;
  opacity: 0;
  pointer-events: none;
  position: fixed;
  transition: top 0.4s ease-in-out, left 0.4s ease-in-out,
    opacity 0.3s ease-in-out;
  visibility: hidden;
  width: 160px;
  z-index: 999;
}

#sticky-ad-left.is-ready,
#sticky-ad-right.is-ready {
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
}

/* --- IKLAN STICKY FOOTER --- */
#sticky-footer-ad {
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  bottom: 0;
  box-shadow: 0 -4px 30px rgba(0, 0, 0, 0.1);
  position: fixed;
  transform: none;
  width: 100%;
  z-index: 9999999;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}

#sticky-footer-ad .ad-content {
  align-items: center;
  display: flex;
  justify-content: center;
  min-height: 50px;
}

/* --- PROGRESS BAR --- */
#progress-container {
  background: rgba(0, 0, 0, 0.4);
  height: 6px;
  left: 0;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 9999;
}

#progress-bar {
  animation: gradientMove 5s linear infinite;
  background: linear-gradient(
    90deg,
    #ff00cc,
    #3333ff,
    #00ffcc,
    #ffcc00,
    #ff0066
  );
  background-size: 400% 100%;
  border-radius: 0 8px 8px 0;
  box-shadow: 0 0 8px rgba(255, 0, 200, 0.8), 0 0 15px rgba(0, 255, 200, 0.6);
  height: 100%;
  width: 0%;
}

#progress-info {
  background: rgba(0, 0, 0, 0.4);
  border-radius: 6px;
  color: #0ff;
  font-family: monospace;
  font-size: 14px;
  padding: 3px 8px;
  position: fixed;
  right: 15px;
  text-shadow: 0 0 6px #0ff, 0 0 12px #09f;
  top: 10vw;
  z-index: 9999;
}

/* --- MODAL NEWSLETTER --- */
.modal-newsletter .modal-content {
  background: linear-gradient(135deg, #0a0a3f, #4b0082, #000);
  border-radius: 12px;
  box-shadow: 0 0 20px rgba(75, 0, 130, 0.5);
  overflow: hidden;
  padding: 2em;
  position: relative;
}

.modal-newsletter .modal-content::after {
  animation: lightSweep 4s linear infinite;
  background: linear-gradient(
    120deg,
    transparent,
    rgba(255, 255, 255, 0.15),
    transparent
  );
  content: "";
  height: 100%;
  left: -75%;
  pointer-events: none;
  position: absolute;
  top: 0;
  transform: skewX(-20deg);
  width: 50%;
}

.modal-newsletter .content {
  color: #fff;
  position: relative;
  text-align: center;
  z-index: 2;
}

.modal-newsletter .content::before {
  background: rgba(0, 0, 0, 0.35);
  border-radius: 8px;
  content: "";
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: -1;
}

.modal-newsletter .title {
  font-size: 1.5em;
  letter-spacing: 1px;
  margin-bottom: 0.5em;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7);
  text-transform: uppercase;
}

.modal-newsletter p {
  margin-bottom: 1em;
  opacity: 0.9;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}

.newsletter-input {
  border: none;
  border-radius: 6px;
  margin-bottom: 1em;
  max-width: 100%;
  outline: none;
  padding: 0.75em 1em;
  width: 100%;
}

#btn_modal_newsletter {
  background: linear-gradient(135deg, #8a2be2, #ff1493);
  border: none;
  border-radius: 8px;
  color: #fff;
  cursor: pointer;
  font-weight: 600;
  overflow: hidden;
  padding: 0.75em 1.5em;
  position: relative;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
  transition: all 0.3s ease;
}

#btn_modal_newsletter::after {
  animation: btnLightSweep 7s linear infinite;
  background: linear-gradient(
    120deg,
    transparent,
    rgba(255, 255, 255, 0.25),
    transparent
  );
  content: "";
  height: 100%;
  left: -75%;
  pointer-events: none;
  position: absolute;
  top: 0;
  transform: skewX(-20deg);
  width: 50%;
}

#btn_modal_newsletter:hover {
  box-shadow: 0 0 15px rgba(75, 0, 130, 0.6);
  transform: translateY(-2px);
}

/* --- KOTAK BACA JUGA --- */
.baca-juga-box {
  /*background: linear-gradient(135deg, #4c1d95, #000);*/
  /*border-radius: 8px;*/
  /*box-shadow: 0 0 15px rgba(138, 43, 226, 0.25);*/
  max-width: 100%;
  overflow: hidden;
  padding: 15px 20px;
  position: relative;
}

.baca-juga-box::before {
  background: linear-gradient(180deg, #4c1d95, #fb00ac);
  border-radius: 2px;
  content: "";
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 4px;
}

.baca-juga-box::after {
  animation: bacaSweep 5s infinite;
  background: linear-gradient(
    120deg,
    transparent,
    rgba(255, 255, 255, 0.25),
    transparent
  );
  content: "";
  height: 100%;
  left: -60%;
  pointer-events: none;
  position: absolute;
  top: 0;
  transform: skewX(-20deg);
  width: 40%;
}

.baca-juga-title {
  border-bottom: 1px solid rgba(187, 134, 252, 0.4);
  color: #ffffff !important;
  display: block;
  font-family: "Inter", sans-serif;
  font-size: 16px;
  font-weight: bold;
  letter-spacing: 1px;
  margin-bottom: 12px;
  padding-bottom: 5px;
  text-transform: uppercase;
}

.baca-juga-item {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 12px;
  max-width: 100%;
  overflow: hidden;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.baca-juga-item:hover {
  box-shadow: 0 0 12px rgba(187, 134, 252, 0.4);
  transform: translateX(5px);
}

.baca-juga-link {
  align-items: center;
  color: #ffffff !important;
  display: flex;
  flex-wrap: wrap;
  max-width: 100%;
  text-decoration: none;
}

.baca-juga-thumb {
  border: 1px solid rgba(187, 134, 252, 0.4);
  border-radius: 4px;
  box-shadow: 0 0 6px rgba(187, 134, 252, 0.3);
  flex-shrink: 0;
  height: 40px;
  margin-right: 16px;
  object-fit: cover;
  width: 60px;
}

.baca-juga-text {
  color: #ffffff !important;
  flex: 1;
  font-family: "Inter", sans-serif;
  font-size: 17px;
  max-width: calc(100% - 70px);
  overflow-wrap: anywhere;
  transition: color 0.3s ease;
  word-break: break-word;
}

.baca-juga-item:hover .baca-juga-text {
  color: #bb86fc;
}

.baca-juga-box a {
  color: #000000 !important;
}

.dark-mode .baca-juga-box {
  background-color: #252525 !important;
}

.dark-mode .baca-juga-box a {
  color: #ffffff !important;
}

/* --- EMOJI REACTIONS --- */
.emoji-reactions-container {
  background: linear-gradient(135deg, #6a00ff, #00e5ff);
  border-radius: 16px;
  color: #fff;
  margin-top: 30px;
  overflow: hidden;
  padding: 10px;
  position: relative;
  text-align: center;
}

.emoji-reactions .reaction img.emoji {
  cursor: pointer;
  transition: transform 0.15s ease;
}

.emoji-reactions .reaction img.emoji:hover {
  filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.5));
  transform: scale(1.2) rotate(5deg);
}

.emoji-reactions .text {
  color: #fff;
  font-size: 12px;
  font-weight: 500;
}

.emoji-reactions .selected .text {
  background: linear-gradient(120deg, #4f00bc, #ff1493) !important;
  border-radius: 10%;
}

.emoji-reactions-container::before {
  animation: sweepLight 4s infinite;
  background: linear-gradient(
    120deg,
    transparent 0%,
    rgba(255, 255, 255, 0.25) 45%,
    rgba(255, 255, 255, 0.6) 50%,
    rgba(255, 255, 255, 0.25) 55%,
    transparent 100%
  );
  content: "";
  height: 200%;
  left: -50%;
  pointer-events: none;
  position: absolute;
  top: -50%;
  transform: rotate(25deg) translateX(-100%);
  width: 200%;
}

/* --- POST CONTENT & TAGS --- */
.post-tags {
  -webkit-overflow-scrolling: touch;
  display: flex;
  flex-wrap: nowrap !important;
  overflow-x: auto;
  padding: 8px 0;
  position: relative;
  scrollbar-width: none;
}

.post-tags::-webkit-scrollbar {
  display: none;
}

.post-tags ul {
  display: flex;
  flex-wrap: nowrap !important;
  gap: 10px;
  margin: 0;
  padding: 0;
}

.post-tags li {
  flex: 0 0 auto;
  list-style: none;
}

.post-content .post-tags ul li a {
  background: linear-gradient(135deg, #6a00ff, #00e5ff);
  border-radius: 20px !important;
  color: #fff !important;
  display: inline-block;
  font-size: 14px !important;
  padding: 6px 14px;
  text-decoration: none !important;
  white-space: nowrap;
}

.post-share-buttons {
  margin-top: 15px;
}

.post-text > p:first-of-type {
  display: inline;
}

.dark-mode .post-text strong a {
  color: #fffff !important;
}

.post-item-small .left .image img {
  border-radius: 10px;
}

/* --- IKLAN AFILIASI --- */
.affiliate-ad-wrapper {
  align-items: center;
  background-color: #000;
  display: flex;
  height: 100%;
  justify-content: center;
  line-height: 0;
  overflow: hidden;
  position: relative;
  width: 100%;
}

.affiliate-ad-wrapper video,
.affiliate-ad-wrapper img {
  height: 100%;
  object-fit: contain;
  width: 100%;
}

.ad-label {
  background-color: rgba(0, 0, 0, 0.6);
  border-radius: 3px;
  color: #fff;
  font-family: sans-serif;
  font-size: 10px;
  left: 8px;
  line-height: 1.5;
  padding: 2px 6px;
  position: absolute;
  top: 8px;
  z-index: 3;
}

.ad-cta-button {
  background-color: #1a73e8;
  border-radius: 20px;
  bottom: 12px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  color: #fff;
  font-family: sans-serif;
  font-size: 14px;
  font-weight: 700;
  left: 50%;
  line-height: 1.5;
  padding: 8px 16px;
  position: absolute;
  text-align: center;
  transform: translateX(-50%);
  transition: background-color 0.2s;
  white-space: nowrap;
  z-index: 3;
}

.ad-cta-button:hover {
  background-color: #1558b6;
}

.ad-volume-button {
  background-color: rgba(0, 0, 0, 0.6);
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M11 5.07c0-.44-.54-.67-.85-.35L6.22 8H4c-.55 0-1 .45-1 1v6c0 .55.45 1 1 1h2.22l3.93 3.28c.31.26.85.03.85-.42V5.07zm4.31 4.41c.39-.39.39-1.02 0-1.41a.996.996 0 0 0-1.41 0L12 10.08l-1.9-1.91a.996.996 0 1 0-1.41 1.41L10.59 12l-1.9 1.9a.996.996 0 1 0 1.41 1.41L12 13.41l1.9 1.91c.39.39 1.02.39 1.41 0 .39-.39.39-1.02 0-1.41L13.41 12l1.9-1.52zM19 12c0 .82-.15 1.61-.41 2.34-.32.91-1.35 1.28-2.26.96-.91-.32-1.28-1.35-.96-2.26C15.65 12.39 15.8 11.7 15.8 11c0-.44-.1-.87-.29-1.29-.32-.91.04-1.94.96-2.26.91-.32 1.94.04 2.26.96.48.96.56 2.05.56 3.11v.48z"/></svg>');
  background-position: center;
  background-repeat: no-repeat;
  background-size: 60%;
  border-radius: 50%;
  bottom: 8px;
  cursor: pointer;
  height: 24px;
  position: absolute;
  right: 8px;
  width: 24px;
  z-index: 3;
}

.ad-volume-button.is-unmuted {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M3 10v4c0 .55.45 1 1 1h2.22l3.93 3.28c.31.26.85.03.85-.42V6.14c0-.45-.54-.68-.85-.42L6.22 9H4c-.55 0-1 .45-1 1zm9.5 2c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02zM12 4.3v2.09c2.89.86 5 3.54 5 6.61s-2.11 5.75-5 6.61v2.09c4.01-.91 7-4.49 7-8.7s-2.99-7.79-7-8.7z"/></svg>');
}

.affiliate-ad-space .creative-desktop {
  display: none;
}

.affiliate-ad-space .creative-mobile {
  display: block;
}

/* =================================================================== */
/* 3. ATURAN RESPONSIVE (BREAKPOINTS)
/* =================================================================== */

/* --- Ponsel Sangat Kecil (hingga 460px) --- */
@media  (max-width: 460px) {
  .post-content .post-title {
    font-size: 1.4rem;
    line-height: 1.8rem;
  }

  .post-content .post-text {
    font-size: 0.9rem !important ;
    line-height: 1.2rem;
    padding: 0 5px;
  }

  .post-content .post-summary {
    font-size: 12px !important;
    line-height: 23px;
  }

  .post-content .img-description {
    padding-left: 12px;
    padding-right: 12px;
  }

  #progress-info {
    top: 75vw;
  }

  .post-details-meta .item-meta {
    font-size: 10px;
  }

  div.baca-juga-box a {
    font-size: 12px !important;
  }
}

/* --- Ponsel & Tablet Potrait (hingga 768px) --- */
@media (max-width: 991px) {
  .floating-ad {
    position: fixed;
    bottom: 150px;
    left: 5px;
    width: 125px;
    height: 125px;
    background: rgba(255, 255, 255, 0.2); /* transparan putih */
    backdrop-filter: blur(10px) saturate(180%);
    -webkit-backdrop-filter: blur(10px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    z-index: 99999;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s ease, visibility 0.4s ease, transform 0.4s ease;
    transform: translateX(-20px);
    display: block;
  }
  .floating-ad.visible {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
  }
  .floating-ad .close-btn {
    position: absolute;
    top: -25px;
    right: -20px;
    background: #0c0c0cfa;
    border: none;
    color: #ffffff;
    font-size: 16px;
    font-weight: bold;
    border-radius: 50%;
    width: 22px;
    height: 22px;
    cursor: pointer;
    line-height: 18px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  }
  .ad-slot {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 125px;
    height: 125px;
    overflow: hidden;
    border-radius: 8px;
  }

  .d-flex.post-share-buttons {
    min-width: 200px;
    /*padding: 4px 8px;*/
    gap: 6px;
  }
  .d-flex.post-share-buttons .btn-share a {
    font-size: 12px;
    width: 30px;
    height: 30px;
  }

  .category-grid-wrapper .row {
    display: flex;
    flex-wrap: wrap;
    margin-left: 0;
    margin-right: 0;
    overflow-x: hidden; /* cegah scroll horizontal */
    padding: 0 !important;
  }

  .category-grid-wrapper .col-sm-12.col-md-6 {
    flex: 0 0 50%; /* dua kolom */
    max-width: 50%;
    padding: 5px;
    box-sizing: border-box;
  }

  .category-grid-wrapper .container-xl {
    padding-right: 0 !important;
    padding-left: 0 !important;
  }

  .category-grid-wrapper img,
  .category-grid-wrapper iframe,
  .category-grid-wrapper video,
  .category-grid-wrapper svg {
    max-width: 100%;
    height: auto;
    display: block;
  }

  /*RELATED GRID*/

  .related-grid-wrapper {
    background-color: beige;
    padding: 5px;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  }

  .related-grid-wrapper .row {
    display: flex;
    flex-wrap: wrap;
    margin-left: 0;
    margin-right: 0;
    overflow-x: hidden; /* cegah scroll horizontal */
    padding: 0 !important;
  }

  .related-grid-wrapper .col-sm-12.col-md-6.col-lg-4 {
    flex: 0 0 50%; /* dua kolom */
    max-width: 50%;
    padding: 5px;
    box-sizing: border-box;
  }

  .related-grid-wrapper .container-xl {
    padding-right: 0 !important;
    padding-left: 0 !important;
  }

  .related-grid-wrapper .sidebar-widget {
    padding-right: 0 !important;
    padding-left: 0 !important;
  }

  .related-grid-wrapper img,
  .related-grid-wrapper iframe,
  .related-grid-wrapper video,
  .related-grid-wrapper svg {
    max-width: 100%;
    height: auto;
    display: block;
  }

  /*MID GRID*/

  .mid-grid-wrapper .row {
    display: flex;
    flex-wrap: wrap;
    margin-left: 0;
    margin-right: 0;
    overflow-x: hidden; /* Hindari overflow horizontal */
  }

  .mid-grid-wrapper .col-sm-12.col-md-6 {
    flex: 0 0 50%; /* Dua konten per baris */
    max-width: 50%;
    padding: 5px;
    box-sizing: border-box;
  }

  .mid-grid-wrapper img,
  .mid-grid-wrapper video,
  .mid-grid-wrapper iframe {
    max-width: 100%;
    height: auto;
    display: block;
  }

  /*LATEST GRID*/

  .latest-grid-wrapper .row {
    display: flex;
    flex-wrap: wrap;
    margin-left: 0;
    margin-right: 0;
    overflow-x: hidden; /* cegah overflow horizontal */
  }

  .latest-grid-wrapper .row > div[class*="col-"] {
    flex: 0 0 50%; /* Dua konten per baris */
    max-width: 50%;
    padding: 5px;
    box-sizing: border-box;
  }

  .latest-grid-wrapper img,
  .latest-grid-wrapper video,
  .latest-grid-wrapper iframe {
    max-width: 100%;
    height: auto;
    display: block;
  }

  .post-item .title {
    font-size: 14px;
    line-height: 15px;
  }

  .latest-grid-wrapper .post-item .badge-category {
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 2;
    padding: 4px 8px;
    font-size: 12px;
    border-radius: 4px;
    max-width: 80%; /* batasi lebar agar tidak keluar */
    white-space: nowrap; /* cegah pindah baris */
    overflow: hidden; /* sembunyikan teks kelebihan */
    text-overflow: ellipsis; /* tambahkan "…" di akhir */
    box-sizing: border-box;
  }

  .latest-grid-wrapper .post-item .image {
    position: relative; /* wajib biar badge bisa nempel di atas gambar */
  }

  .mobile-logo {
    display: flex;
    justify-content: flex-start; /* tempel kiri */
    padding-left: 8px; /* jarak tipis dari tepi layar */
  }

  .mobile-logo .logo {
    max-width: 100px; /* pastikan tidak kepanjangan */
    height: auto;
  }

  .billboard-top {
    background-color: #000000 !important; /* warna latar belakang billboard */
    width: 100% !important; /* lebar billboard standar desktop */
    margin: 0 auto 5px auto; /* center dan beri jarak bawah */
    margin-bottom: 0 !important;
    box-sizing: border-box;
    position: relative;
    z-index: 0; /* biarkan rendah supaya bisa tertutup konten */
  }

  /* Parallax wrapper */
  .parallax1.parallaxB {
    width: 100%;
    min-height: 480px; /* tinggi billboard */
    position: relative;
    margin-top: 0 !important;
    margin-bottom: 5px !important;
    max-width: 336px !important;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
  }

  /* Absolute positioning untuk isi billboard */

  .parallax_abs {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    clip: rect(auto, auto, auto, auto);
  }
  /* Kontainer iklan fixed width */
  .parallax_fix {
    width: 360px !important;
    max-width: 100% !important;
    height: 100%;
    position: fixed;
    top: 0;
    -moz-transform: translateZ(0);
    -webkit-transform: translateZ(0);
    -ms-transform: translateZ(0);
    -o-transform: translateZ(0);
    transform: translateZ(0);
    margin: 0 auto;
  }

  /* Area iklan */
  .parallax_ads {
    width: 100%;
    height: 100%;
    height: auto;
    border: none;
    position: absolute;
    left: 50%;
    top: 0 !important;
    -moz-transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    transform: translateX(-50%);
  }

  /* Iframe iklan */
  .parallax_ads iframe {
    width: 340px !important;
    /*height: 250px;*/
    border: none;
    display: block;
    vertical-align: bottom;
  }

  .bn-inner {
    display: flex;
    justify-content: center;
  }

  /* Gaya Header Mobile */
  .header-mobile {
    animation: gradientMove 12s ease infinite;
    background: linear-gradient(350deg, #00050e, #042e6d, #000000, #010306);
    background-size: 600% 600%;
    color: #fff;
  }

  .header-mobile .logo img {
    height: auto;
    max-height: 50px;
  }

  .header-mobile svg,
  .header-mobile button,
  .header-mobile a {
    color: #fff;
    stroke: #fff;
  }

  #header {
    position: sticky;
    top: 0;
  }

  #crypto-marquee-container {
    top: 65px;
  }
  
  
    .ad-wrapper-header {
        background-color: #f5f5f5;
        padding-top: 20px;
        display: flex;
        flex-direction: column;
        align-items: center;
        flex-wrap: nowrap;
    }
.adv-notice{
    font-size: 10px;
    font-family: 'Inter';
    font-weight: 400;
    color: #b9b9b9;
}

  /* Gaya Iklan Sticky Header Mobile */
  .head-stick {
    position: relative;
    transition: all 0.4s ease;
    z-index: 9;
  }

  .head-stick.sticky {
    -webkit-backdrop-filter: blur(10px);
    animation: slideDown 0.4s ease forwards;
    backdrop-filter: blur(10px);
    border: 1px solid transparent;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    left: 0;
    position: fixed;
    right: 0;
    /*top: 110px;*/
  }

  .head-stick .ad-wrapper {
    /*margin: auto;*/
    /*padding: 8px;*/
    text-align: center;
  }

  .head-stick .ad-fallback {
    color: #555;
    font-family: inter;
    font-size: 10px;
    opacity: 0.7;
  }

  .head-stick .ad-close {
    -webkit-backdrop-filter: blur(4px);
    background: rgb(125 123 123 / 0%);
    backdrop-filter: blur(4px);
    border: 1px solid rgba(255, 255, 255, 0%);
    border-radius: 50%;
    bottom: 0;
    color: #312c2c;
    cursor: pointer;
    display: none;
    font-size: 12px;
    height: 22px;
    line-height: 20px;
    position: absolute;
    right: 5px;
    text-align: center;
    transition: all 0.2s ease;
    width: 22px;
  }

  .head-stick .ad-close:hover {
    background: rgba(255, 255, 255, 0.9);
  }

  .ad-reopen {
    -webkit-backdrop-filter: blur(8px);
    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    bottom: 16px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
    color: #333;
    cursor: pointer;
    font-size: 14px;
    height: 32px;
    line-height: 32px;
    position: fixed;
    right: 16px;
    text-align: center;
    transition: all 0.2s ease;
    width: 32px;
    z-index: 10000;
  }

  .ad-reopen:hover {
    background: rgba(255, 255, 255, 0.8);
  }

  /* Gaya Emoji Reactions Mobile */
  .emoji-reactions {
    -webkit-overflow-scrolling: touch;
    display: flex;
    flex-wrap: nowrap;
    gap: 10px;
    justify-content: flex-start;
    overflow-x: auto;
    padding: 8px 4px;
  }

  .emoji-reactions::-webkit-scrollbar {
    display: none;
  }

  .post-content .post-text {
    font-size: 1.1rem;
    line-height: 1.5rem;
    word-spacing: 0.18rem;
    padding: 0 5px;
  }

  h2,
  .h2 {
    font-size: calc(1.15rem + 0.3vw);
  }

  h3,
  .h3 {
    font-size: calc(1.13rem + 0.3vw);
  }

  h4,
  .h4 {
    font-size: calc(1.11rem + 0.3vw);
  }

  .section-featured .col-featured-right {
    display: none;
  }

  .breadcrumb {
    font-size: 10px !important;
  }
}

/* --- Desktop Kecil (992px ke atas) --- */
@media (min-width: 992px) {
    .adv-notice{
  display: none;
}
    
    div[id^="div-gpt-ad-"] {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%; /* Pastikan container memenuhi lebar yang tersedia */
  /* Opsional: Tambahkan warna latar belakang agar 'black space'
       terlihat konsisten. Ganti dengan warna desain Anda. */
  /* background-color: #f0f0f0; */
}
    
    /*
 * Terkadang GPT membungkus iklan dalam iframe atau div lain. Aturan ini
 * memastikan elemen di dalamnya juga ikut berada di tengah jika diperlukan.
*/
div[id^="div-gpt-ad-"] > div,
div[id^="div-gpt-ad-"] iframe {
  margin: 0 auto !important; /* Paksa ke tengah */
  display: block !important;
}
    
  .floating-video-ad.visible {
    /* (BARU) Bergeser ke posisi normal di dalam layar */
    transform: translateX(-60%);
  }

  /* Container utama billboard */
  .billboard-top {
    background-color: #00000; /* warna latar belakang billboard */
    width: 970px; /* lebar billboard standar desktop */
    margin: 0 auto 5px auto; /* center dan beri jarak bawah */
    margin-bottom: 120px !important;
    box-sizing: border-box;
    position: relative;
    z-index: 0; /* biarkan rendah supaya bisa tertutup konten */
  }

  /* Parallax wrapper */
  .parallax1.parallaxB {
    width: 100%;
    height: 250px; /* tinggi billboard */
    position: relative;
    margin-top: 0 !important;
    margin-bottom: 5px !important;
    max-width: 970px;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
  }

  /* Absolute positioning untuk isi billboard */

  .parallax_abs {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    clip: rect(auto, auto, auto, auto);
  }
  /* Kontainer iklan fixed width */
  .parallax_fix {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    -moz-transform: translateZ(0);
    -webkit-transform: translateZ(0);
    -ms-transform: translateZ(0);
    -o-transform: translateZ(0);
    transform: translateZ(0);
    margin: 0 auto;
  }

  /* Area iklan */
  .parallax_ads {
    width: 100%;
    height: 100%;
    height: auto;
    border: none;
    position: absolute;
    left: 50%;
    top: 46px;
    top: 0;
    -moz-transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    transform: translateX(-50%);
  }

  /* Iframe iklan */
  .parallax_ads iframe {
    width: 970px;
    /*height: 250px;*/
    border: none;
    display: block;
    vertical-align: bottom;
  }

  /*SKIN-AD-CONTENT*/

  .post-content .post-text {
    flex: 0 0 calc(100% - 176px);
    max-width: calc(100% - 176px);
  }

  /* =================================================================== */
  /* GAYA UNTUK NAVIGASI STICKY BARU YANG RAMPING
/* =================================================================== */

  /* Hanya berlaku di desktop */

  #secondary-sticky-nav {
    /* [POSISI] Menempel di atas, lapisan paling atas */
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 99999; /* Pastikan di atas elemen lain */

    /* [TAMPILAN] Beri latar belakang, bayangan, dan transisi */
    background: #1a1a1a; /* Ganti dengan warna header Anda */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    transition: transform 0.4s ease-in-out;

    /* [KUNCI] Padding dihapus untuk membuatnya lebih tipis */

    /* [KONDISI AWAL] Sembunyikan di atas layar */
    transform: translateY(-100%);
    overflow-x: scroll !important;
  }

  /* [KONDISI AKTIF] Kelas ini akan ditambahkan oleh JavaScript */
  #secondary-sticky-nav.is-visible {
    /* Munculkan ke dalam pandangan */
    transform: translateY(0);
  }

  /* --- [PERBAIKAN] Aturan untuk Membuat Menu Baru Minimalis --- */

  /* [ATURAN BARU] Jadikan kontainer sebagai flexbox untuk menata elemen */
  #secondary-sticky-nav .container-xl {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 970px;
    max-width: 970px;
  }

  /* 1. [DIUBAH] Tampilkan kembali logo, sembunyikan HANYA ikon kanan */
  #secondary-sticky-nav .navbar-nav.navbar-right {
    display: none;
  }

  /* 2. Sembunyikan kontainer mega menu PADA MENU BARU */
  #secondary-sticky-nav .mega-menu-container {
    display: none !important;
  }

  /* 3. Sembunyikan ikon panah PADA MENU BARU */
  #secondary-sticky-nav .icon-arrow-down {
    display: none !important;
  }

  /* 4. [DIUBAH] Atur daftar kategori agar fleksibel dan berada di tengah */
  #secondary-sticky-nav .navbar-nav.navbar-left {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    flex-grow: 1; /* Biarkan menu mengisi ruang yang tersedia */
    padding-left: 0;
    list-style: none;
    margin: 0;
  }

  /* Beri sedikit jarak antar item menu */
  #secondary-sticky-nav .nav-item {
    margin: 0 10px;
  }

  /* [ATURAN BARU] Atur logo agar terlihat dan ukurannya sesuai */
  #secondary-sticky-nav .navbar-brand {
    padding: 0;
    margin-right: 20px;
    flex-shrink: 0; /* Mencegah logo menyusut */
    height: 50px !important;
  }

  #secondary-sticky-nav .logo {
    max-height: 40px; /* Ukuran logo yang lebih kecil */
    width: auto;
  }

  /* Atur gaya link di dalam header baru */
  #secondary-sticky-nav .nav-link {
    color: #ffffff;
    font-size: 14px;
    padding: 5px 10px;
    font-weight: 500;
  }

  .billboard-wrapper {
    background-color: none !important;
    margin: 0 auto;
    min-height: 250px;
    position: sticky;
    top: 0;
    z-index: -2 !important;
  }

  #crypto-marquee-container {
    top: 80px;
    margin-bottom: 10px;
  }

  #sticky-footer-ad {
    border-left: 1px solid rgba(255, 255, 255, 0.2);
    border-right: 1px solid rgba(255, 255, 255, 0.2);
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
    left: 50%;
    transform: translateX(-50%);
    width: auto;
  }

  #sticky-footer-ad .ad-content {
    min-height: 90px;
  }

  .affiliate-ad-space .creative-desktop {
    display: block;
  }

  .affiliate-ad-space .creative-mobile {
    display: none;
  }

  .main-slider-container {
    border-radius: 12px;
  }
  .section {
    border-radius: 12px;
  }

  .section-featured .col-featured-right .item img {
    border-radius: 12px;
  }

  .container,
  .container-lg,
  .container-md,
  .container-sm,
  .container-xl {
    max-width: 1100px !important;
  }
  .head-stick .ad-close,
  .ad-reopen {
    display: none !important;
  }

  /* 4. Tampilkan iklan samping di semua desktop */
  #sticky-ad-left,
  #sticky-ad-right {
    display: block;
  }
  /* Perlebar "WADAH UTAMA" */
  .content-wrapper {
    max-width: 1100px;
    margin: 0 auto;
  }

  .site-content {
    margin: 0 auto;
    max-width: 1100px;
  }

  .bn-content .bn-inner {
    align-content: center !important;
    justify-items: center !important;
  }
  /* Header dan Marquee akan otomatis mengikuti aturan 70%/100% di atas */
  #header:not(.is-scrolled),
  #crypto-marquee-container:not(.is-scrolled) {
    max-width: 1100px; /* 70% dari lebar viewport */
  }
  #header:not(.is-scrolled) {
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
  }

  #header:not(.is-scrolled),
  #crypto-marquee-container:not(.is-scrolled) {
    margin-left: auto;
    margin-right: auto;
    max-width: 1100px; /* 70% dari lebar viewport */
    overflow-x: scroll;
  }

  /* 5. Atur gaya teks dan heading untuk desktop */
  .post-content .post-text {
    font-size: 16px !important;
    line-height: 1.5rem;
  }

  h2,
  .h2 {
    font-size: 1.3rem;
  }

  h3,
  .h3 {
    font-size: 1.25rem;
  }

  h4,
  .h4 {
    font-size: 1.15rem;
  }
  .nav-top,
  .navbar-brand {
    /*margin:0 auto;*/
    height: 45px;
  }

  .parallax_ads {
    top: 50px !important;
  }

  .sticky-lg-top {
    top: 130px;
  }

  .navbar-brand {
    display: inline-block;
    height: 40px;
    position: relative;
    width: 178px;
  }

  .navbar-brand .logo {
    display: none;
  }

  .navbar-brand::before,
  .navbar-brand::after {
    -webkit-mask-image: url("https://voxblick.com/uploads/logo/logo_68afdaa55df0f5-34270116.png");
    -webkit-mask-position: center;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    content: "";
    inset: 0;
    mask-image: url("https://voxblick.com/uploads/logo/logo_68afdaa55df0f5-34270116.png");
    mask-position: center;
    mask-repeat: no-repeat;
    mask-size: contain;
    position: absolute;
  }

  .navbar-brand::before {
    animation: gradientShift 10s linear infinite;
    background: linear-gradient(
      45deg,
      #020089,
      #ffffff,
      #ffffff,
      #ffffff,
      #ff4d00
    );
    background-size: 400% 400%;
    z-index: 1;
  }

  .navbar-brand::after {
    animation: sweep 6s ease-in-out infinite;
    background: linear-gradient(
      110deg,
      rgba(255, 255, 255, 0) 45%,
      rgba(255, 255, 255, 0.9) 50%,
      rgba(255, 255, 255, 0) 55%
    );
    background-size: 200% 100%;
    z-index: 2;
  }
}

/* --- ATURAN UNTUK LAYAR SANGAT LEBAR (1680px+) --- */
@media (min-width: 1400px) {
    
    div[id^="div-gpt-ad-"] {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%; /* Pastikan container memenuhi lebar yang tersedia */
  /* Opsional: Tambahkan warna latar belakang agar 'black space'
       terlihat konsisten. Ganti dengan warna desain Anda. */
  /* background-color: #f0f0f0; */
}
    
    
    /*
 * Terkadang GPT membungkus iklan dalam iframe atau div lain. Aturan ini
 * memastikan elemen di dalamnya juga ikut berada di tengah jika diperlukan.
*/
div[id^="div-gpt-ad-"] > div,
div[id^="div-gpt-ad-"] iframe {
  margin: 0 auto !important; /* Paksa ke tengah */
  display: block !important;
}
    
  .site-content {
    margin: 0 auto;
    width: 1100px;
    max-width: 1100px;
  }

  /* 1. Atur .content-wrapper sebagai "WADAH UTAMA" yang stabil */
  .content-wrapper {
    /*background-color: #ffff;*/
    margin-left: auto;
    margin-right: auto;
    max-width: 1100px;
    position: relative;
    z-index: 2;
  }

  #header:not(.is-scrolled),
  #crypto-marquee-container:not(.is-scrolled) {
    width: 1100px;
  }

  .floating-video-ad {
  
    bottom: 95px;
    width: 320px;
  }

  .floating-video-ad.visible {
    /* (BARU) Bergeser ke posisi normal di dalam layar */
    transform: translateX(-100%);
  }
}

@media (min-width: 1200px) and (max-width: 1400px) {
    
    div[id^="div-gpt-ad-"] {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%; /* Pastikan container memenuhi lebar yang tersedia */
  /* Opsional: Tambahkan warna latar belakang agar 'black space'
       terlihat konsisten. Ganti dengan warna desain Anda. */
  /* background-color: #f0f0f0; */
}
    
    
 /*
 * Terkadang GPT membungkus iklan dalam iframe atau div lain. Aturan ini
 * memastikan elemen di dalamnya juga ikut berada di tengah jika diperlukan.
*/
div[id^="div-gpt-ad-"] > div,
div[id^="div-gpt-ad-"] iframe {
  margin: 0 auto !important; /* Paksa ke tengah */
  display: block !important;
}   
    
  .floating-video-ad {
    bottom: 95px;
  }

  .head-stick .ad-close {
    display: none !important;
  }

  .nav-top,
  .navbar-brand {
    /*margin:0 auto;*/
    height: 40px;
  }

  #header:not(.is-scrolled),
  #crypto-marquee-container:not(.is-scrolled) {
    width: 970px;
  }

  #header:not(.is-scrolled) {
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
  }

  #closeAd {
    display: none !important;
  }

  .site-content {
    margin: 0 auto;
    width: 970px;
    max-width: 1100px;
  }

  /* 1. Atur .content-wrapper sebagai "WADAH UTAMA" yang stabil */
  .content-wrapper {
    /*background-color: #ffff;*/
    margin-left: auto;
    margin-right: auto;
    max-width: 1100px;
    position: relative;
    z-index: 2;
  }

  /* 2. SECARA DEFAULT (Saat di atas), Header & Marquee MENYEMPIT */
  #header:not(.is-scrolled),
  #crypto-marquee-container:not(.is-scrolled) {
    margin-left: auto;
    margin-right: auto;
    max-width: 100%; /* 70% dari lebar viewport */
  }

  /* 3. SAAT DIGULIR (sticky), Header & Marquee MELEBAR */
  #header.is-scrolled,
  #crypto-marquee-container.is-scrolled {
    max-width: 100%; /* Lebar penuh, 100% dari viewport */
  }

  /* 4. Tampilkan iklan samping di semua desktop */
  #sticky-ad-left,
  #sticky-ad-right {
    display: block;
  }

  /* 5. Atur gaya teks dan heading untuk desktop */
  .post-content .post-text {
    font-size: 16px !important;
    line-height: 1.5rem;
  }

  h2,
  .h2 {
    font-size: 1.3rem;
  }

  h3,
  .h3 {
    font-size: 1.25rem;
  }

  h4,
  .h4 {
    font-size: 1.15rem;
  }
}

/* =================================================================== */
/* 4. ANIMASI (@keyframes) - Dikonsolidasi
/* =================================================================== */
@keyframes marquee-scroll {
  0% {
    transform: translateX(0%);
  }

  100% {
    transform: translateX(-50%);
  }
}

@keyframes gaming-gradient {
  0% {
    background-position: 0% 50%;
  }

  100% {
    background-position: 200% 50%;
  }
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-40px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes gradientMove {
  0% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0% 50%;
  }
}

@keyframes gradientRun {
  0% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0% 50%;
  }
}

@keyframes gradientShift {
  0% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0% 50%;
  }
}

@keyframes sweep {
  0% {
    background-position: -200% 0;
  }

  50% {
    background-position: 100% 0;
  }

  100% {
    background-position: 200% 0;
  }
}

@keyframes lightSweep {
  0% {
    left: -75%;
  }

  100% {
    left: 125%;
  }
}

@keyframes btnLightSweep {
  0% {
    left: -75%;
  }

  100% {
    left: 125%;
  }
}

@keyframes bacaSweep {
  0% {
    left: -60%;
  }

  100% {
    left: 120%;
  }
}

@keyframes sweepLight {
  0% {
    transform: rotate(25deg) translateX(-120%);
  }

  60% {
    transform: rotate(25deg) translateX(120%);
  }

  100% {
    transform: rotate(25deg) translateX(120%);
  }
}

@keyframes typing {
  0%,
  80%,
  100% {
    transform: scale(0);
  }

  40% {
    transform: scale(1);
  }
}