/* ==========================================
css universal 
============================================= */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: "Inter", sans-serif;
  line-height: 1.6;
  color: #333;
  background: #f8fafc;
  overflow-x: hidden;
}

/* ============================
   HEADER & FOOTER STYLES
============================ */

.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  background: transparent;
}

.header.scrolled {
  background: rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(12px);
  box-shadow: 0 4px 32px rgba(37, 99, 235, 0.12);
  border-bottom: 1px solid rgba(37, 99, 235, 0.1);
}

@keyframes scroll {
  0% {
    transform: translateX(100%);
  }
  100% {
    transform: translateX(-100%);
  }
}

/* Main Navbar - Compact */
.navbar {
  background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
  padding: 0.6rem 0;
  border-bottom: 1px solid rgba(241, 245, 249, 0.8);
  transition: all 0.3s ease;
}

.header.scrolled .navbar {
  padding: 0.4rem 0;
}

.nav-container {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 2rem;
}

/* Logo - Compact */
.logo {
  display: flex;
  align-items: center;
  transition: all 0.3s ease;
}

.logo:hover {
  transform: scale(1.02);
}

.logo-image {
  height: 40px;
  width: auto;
  transition: all 0.3s ease;
}

.header.scrolled .logo-image {
  height: 32px;
}

/* Navigation Menu - Compact */
.nav-menu {
  display: flex;
  list-style: none;
  gap: 0.25rem;
  margin: 0;
  padding: 0;
}

.nav-item {
  position: relative;
}

.nav-link {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 1rem;
  text-decoration: none;
  color: #475569;
  font-weight: 600;
  font-size: 0.8rem;
  border-radius: 8px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.nav-link:hover {
  color: #2563eb;
  background: linear-gradient(
    135deg,
    rgba(37, 99, 235, 0.08),
    rgba(245, 158, 11, 0.04)
  );
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.15);
}

/* Login Button Special Style */
.login-btn {
  background: linear-gradient(135deg, #2563eb, #f59e0b);
  color: white !important;
  font-weight: 700;
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.2);
  padding: 0.6rem 1.2rem;
}

.login-btn:hover {
  background: linear-gradient(135deg, #1d4ed8, #d97706);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(37, 99, 235, 0.3);
}

.login-btn i {
  font-size: 0.9rem;
}

/* Dropdown Styles - Enhanced */
.dropdown {
  position: relative;
}

/* Small Login Button - Compact Version */
.login-btn.btn-sm {
  font-size: 0.75rem !important;
  padding: 0.4rem 0.8rem !important;
  border-radius: 6px !important;
  gap: 0.4rem;
}

.login-btn.btn-sm i {
  font-size: 0.8rem !important;
}

.login-btn.btn-sm span {
  font-size: 0.75rem !important;
  font-weight: 600;
}

.dropdown-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  background: #ffffff;
  min-width: 200px;
  border-radius: 12px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.15);
  border: 1px solid rgba(241, 245, 249, 0.8);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px) scale(0.95);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 1000;
  backdrop-filter: blur(10px);
  overflow: hidden;
}

.dropdown:hover .dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
}

.dropdown-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.8rem 1.2rem;
  color: #475569;
  text-decoration: none;
  font-weight: 500;
  font-size: 0.85rem;
  transition: all 0.2s ease;
  border-radius: 0;
  text-transform: none;
  letter-spacing: 0;
}

.dropdown-item:first-child {
  border-radius: 12px 12px 0 0;
}

.dropdown-item:last-child {
  border-radius: 0 0 12px 12px;
}

.dropdown-item:hover {
  background: linear-gradient(
    135deg,
    rgba(37, 99, 235, 0.08),
    rgba(245, 158, 11, 0.04)
  );
  color: #2563eb;
  transform: translateX(4px);
  padding-left: 1.6rem;
}

.dropdown-item i {
  color: #2563eb;
  width: 16px;
  text-align: center;
  font-size: 0.9rem;
}

/* Mobile Menu Button */
.mobile-menu-btn {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  gap: 4px;
  border-radius: 8px;
  transition: all 0.3s ease;
}

.mobile-menu-btn:hover {
  background: linear-gradient(
    135deg,
    rgba(37, 99, 235, 0.08),
    rgba(245, 158, 11, 0.04)
  );
}

.hamburger-line {
  width: 22px;
  height: 2px;
  background: #475569;
  border-radius: 2px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Mobile Menu Active State */
.mobile-menu-btn.active .hamburger-line:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}

.mobile-menu-btn.active .hamburger-line:nth-child(2) {
  opacity: 0;
  transform: translateX(-20px);
}

.mobile-menu-btn.active .hamburger-line:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}

/* Tambahkan ini untuk menampilkan tombol di mobile */
@media (max-width: 768px) {
  .mobile-menu-btn {
    display: flex !important;
  }
}

/* ============================
   RESPONSIVE DESIGN
============================ */

/* Tablet */
@media (max-width: 1024px) {
  .nav-container {
    padding: 0 1.5rem;
  }

  .nav-menu {
    gap: 0.1rem;
  }

  .nav-link {
    padding: 0.5rem 0.8rem;
    font-size: 0.75rem;
  }
}

/* Mobile */
@media (max-width: 768px) {
  .mobile-menu-btn {
    display: flex;
  }

  .nav-menu {
    position: fixed;
    top: 100%;
    left: 0;
    width: 100%;
    background: #ffffff;
    flex-direction: column;
    padding: 2rem 0;
    gap: 0;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
    transform: translateY(-20px);
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    max-height: calc(100vh - 100px);
    overflow-y: auto;
  }

  .nav-menu.active {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
  }

  .nav-item {
    width: 100%;
    border-bottom: 1px solid #f1f5f9;
  }

  .nav-item:last-child {
    border-bottom: none;
  }

  .nav-link {
    width: 100%;
    padding: 1.2rem 2rem;
    justify-content: flex-start;
    font-size: 0.9rem;
    border-radius: 0;
  }

  .dropdown-menu {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    box-shadow: none;
    border: none;
    background: #f8fafc;
    border-radius: 0;
    margin: 0;
    display: none;
  }

  .dropdown.active .dropdown-menu {
    display: block;
  }

  .dropdown-item {
    padding: 1rem 3rem;
    font-size: 0.85rem;
  }

  .dropdown-item:hover {
    transform: none;
    padding-left: 3rem;
  }
}

/* Very Small Mobile */
@media (max-width: 480px) {
  .nav-container {
    padding: 0 1rem;
  }

  .logo-image {
    height: 32px;
  }

  .header.scrolled .logo-image {
    height: 28px;
  }
}

/* ============================
   NAVBAR ALWAYS VISIBLE (NO HIDE ON SCROLL)
============================ */

/* Remove hide behavior - navbar stays visible */
.header.hide {
  /* Remove this or comment out to keep navbar always visible */
  /* transform: translateY(-100%); */
}

.header.scrolled .navbar {
  padding: 0.3rem 0;
}

/* ============================
   SMOOTH ANIMATIONS & PERFORMANCE
============================ */

/* Hardware acceleration for smooth animations */
.header,
.nav-link,
.dropdown-menu,
.mobile-menu-btn {
  will-change: transform;
  backface-visibility: hidden;
}

/* Reduce motion for accessibility */
@media (prefers-reduced-motion: reduce) {
  .nav-link,
  .dropdown-menu,
  .mobile-menu-btn,
  .header {
    transition: none !important;
    animation: none !important;
  }
}

/* Megamenu multi kolom untuk menu PASAR & PELAKU PASAR */
.nav-item.dropdown {
  position: relative;
}

.dropdown-menu.mega-menu {
  display: flex;
  flex-direction: row;
  gap: 2rem;
  min-width: 600px;
  padding: 1.5rem 2rem;
  background: #fff;
  color: #fff;
  border-radius: 12px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.15);

  /* Positioning untuk center mega menu */
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 100%;
  z-index: 1000;

  right: auto;
  margin-top: 0;
}

.mega-menu-column {
  display: flex;
  flex-direction: column;
  min-width: 180px;
}

.dropdown-title {
  font-weight: bold;
  margin-bottom: 0.5rem;
  color: #000000;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.dropdown-subtitle {
  font-weight: bold;
  margin: 0.5rem 0 0.25rem 0;
  color: #000000;
  font-size: 0.95em;
  text-transform: uppercase;
}

/* Responsive: stack kolom di mobile */
/* @media (max-width: 900px) {
  .dropdown-menu.mega-menu {
    flex-direction: column;
    min-width: 220px;
    gap: 1rem;
    padding: 1rem;

    left: 0;
    transform: none;
    right: auto;
  }

  .mega-menu-column {
    min-width: 0;
  }
} */

@media (min-width: 901px) {
  .navbar-nav {
    position: static; /* Pastikan parent tidak membatasi positioning */
  }
}

/* MEGA MENU HANDLING */
/* Megamenu multi kolom untuk menu PASAR & PELAKU PASAR */
.nav-item.dropdown {
  position: relative;
}

.dropdown-menu.mega-menu {
  display: flex;
  flex-direction: row;
  gap: 2rem;
  min-width: 600px;
  padding: 1.5rem 2rem;
  background: #fff;
  color: #fff;
  border-radius: 12px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.15);

  /* Positioning yang benar untuk center mega menu */
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -300px; /* setengah dari min-width (600px / 2 = 300px) */
  z-index: 1000;

  /* Reset default bootstrap */
  right: auto;
  transform: none;
}

.mega-menu-column {
  display: flex;
  flex-direction: column;
  min-width: 180px;
  position: relative;
}

/* Garis pemisah dengan gradasi biru dan emas */
.mega-menu-column:not(:last-child)::after {
  content: "";
  position: absolute;
  right: -1rem; /* posisi di tengah gap (2rem / 2 = 1rem) */
  top: 0;
  bottom: 0;
  width: 1px;
  background: linear-gradient(
    to bottom,
    transparent 0%,
    #1e3a8a 10%,
    /* biru tua */ #3b82f6 25%,
    /* biru */ #06b6d4 50%,
    /* cyan */ #f59e0b 75%,
    /* emas */ #d97706 90%,
    /* emas tua */ transparent 100%
  );
  opacity: 0.6;
}

.dropdown-title {
  font-weight: bold;
  margin-bottom: 0.5rem;
  color: #000000;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.dropdown-subtitle {
  font-weight: bold;
  margin: 0.5rem 0 0.25rem 0;
  color: #000000;
  font-size: 0.95em;
  text-transform: uppercase;

  margin-left: 1rem;
  position: relative;
}

.dropdown-subtitle::before {
  content: "";
  position: absolute;
  left: -0.5rem;
  top: 0;
  bottom: 0;
  width: 2px;
  background-color: #ddd;
}

.mega-menu-column .dropdown-item {
  margin-left: 0;
}

.mega-menu-column .dropdown-subtitle,
.mega-menu-column .dropdown-subtitle ~ .dropdown-item {
  margin-left: 0.5rem;
}

/* Responsive: stack kolom di mobile */
@media (max-width: 900px) {
  .dropdown-menu,
  .dropdown-menu.mega-menu {
    display: none !important;
    position: static !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    box-shadow: none !important;
    border: none !important;
    background: #f8fafc !important;
    border-radius: 0 !important;
    margin: 0 !important;
    width: 100vw !important;
    min-width: 0 !important;
    left: 0 !important;
    right: 0 !important;
    padding: 0.5rem 0 !important;
  }
  .dropdown.active > .dropdown-menu,
  .dropdown.active > .dropdown-menu.mega-menu {
    display: block !important;
  }
}
/* Jika mega menu keluar dari viewport di kanan, geser ke kiri */
@media (min-width: 901px) {
  .navbar-nav .nav-item:last-child .dropdown-menu.mega-menu,
  .navbar-nav .nav-item:nth-last-child(2) .dropdown-menu.mega-menu {
    left: auto;
    right: 0;
    margin-left: 0;
  }
}

/* pointer cue */
.postx-cover img {
  cursor: zoom-in;
}

/* overlay */
.postx-lightbox {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(2px);
  z-index: 2000;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0.25s ease;
}
.postx-lightbox.open {
  opacity: 1;
  visibility: visible;
}

/* viewport untuk pan/scroll saat zoom */
.postx-lightbox__viewport {
  max-width: 100vw;
  max-height: 92dvh;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: 12px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45);
  background: transparent;
}

/* gambar default: fit ke layar */
.postx-lightbox__img {
  display: block;
  max-width: 100%;
  max-height: 92dvh;
  height: auto;
  object-fit: contain;
  transform: scale(1);
  transition: transform 0.2s ease;
  cursor: zoom-out;
}

/* mode zoom (toggle di JS) */
.postx-lightbox.zoom .postx-lightbox__img {
  transform: scale(1.8); /* cukup untuk baca detail */
  transform-origin: center center; /* fokus di tengah */
  cursor: grab;
}
.postx-lightbox.zoom .postx-lightbox__img:active {
  cursor: grabbing;
}

/* close button – besar & aman di notch */
.postx-lightbox__close {
  position: absolute;
  top: calc(env(safe-area-inset-top, 0) + 12px);
  right: calc(env(safe-area-inset-right, 0) + 12px);
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.95);
  color: #111827;
  font-size: 24px;
  line-height: 44px;
  text-align: center;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.3);
}

/* kecilkan radius & naikkan batas tinggi di layar sempit */
@media (max-width: 480px) {
  .postx-lightbox__viewport {
    max-height: 94dvh;
    border-radius: 10px;
  }
  .postx-lightbox__img {
    max-height: 94dvh;
  }
}

/* lock scroll body saat open */
.body--no-scroll {
  overflow: hidden;
}

/* ============================
   FOOTER - UPDATED LAYOUT
============================ */
.footer {
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
  color: white;
  padding: 3rem 0 1rem;
}

.footer-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2rem;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 3rem;
  align-items: flex-start;
}

/* Left Section */
.footer-left {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.footer-logo {
  display: flex;
  align-items: center;
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--jfx-gold);
  gap: 0.75rem;
  margin-bottom: 0.5rem;
}

.footer-logo i {
  font-size: 2rem;
}

.company-name {
  font-size: 1rem;
  font-weight: 700;
  color: white;
  margin: 0 0 1rem 0;
  letter-spacing: 0.5px;
}

.footer-contact {
  margin-bottom: 1.5rem;
}

.footer-contact p {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  margin-bottom: 0.5rem;
  color: #cbd5e1;
  font-size: 0.9rem;
  line-height: 1.4;
}

.footer-contact i {
  color: var(--jfx-gold);
  width: 16px;
  flex-shrink: 0;
  margin-top: 2px;
}

.ask-btn {
  background: #dc2626;
  color: white;
  border: none;
  padding: 0.75rem 1.25rem;
  border-radius: 6px;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  transition: all 0.3s ease;
  margin-bottom: 1.5rem;
  align-self: flex-start;
}

.ask-btn:hover {
  background: #b91c1c;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(220, 38, 38, 0.3);
}

.social-section {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.follow-text {
  font-size: 0.9rem;
  color: #cbd5e1;
  font-weight: 500;
}

.social-icons {
  display: flex;
  gap: 0.75rem;
}

.social-link {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: all 0.3s ease;
  font-size: 1.1rem;
}

.social-link.instagram {
  background: linear-gradient(
    45deg,
    #f09433,
    #e6683c,
    #dc2743,
    #cc2366,
    #bc1888
  );
  color: white;
}

.social-link.linkedin {
  background: #0077b5;
  color: white;
}

.social-link:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

/* Middle Section */
.footer-middle {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  min-width: 200px;
}

/* Samakan ukuran logo di footer */
.logo-container {
  width: 260px; 
  height: 120px; 
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  /* background: rgba(255, 255, 255, 0.05);
  border-radius: 18px;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1); */
  transition: all 0.3s ease;
  box-sizing: border-box;
  margin: 0 auto;
}

.logo-container:hover {
  background: rgba(255, 255, 255, 0.1);
  transform: translateY(-2px);
}

.footer-logo-img {
  width: 180px; /* Lebar maksimum logo */
  height: 80px; /* Tinggi maksimum logo */
  object-fit: contain; /* Logo tetap proporsional */
  display: block;
  margin: 0 auto;
  background: transparent;
}

/* Right Section */
.footer-right {
  display: flex;
  justify-content: flex-end;
}

.map-container {
  width: 100%;
  max-width: 320px;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
  border: 2px solid rgba(245, 158, 11, 0.2);
}

.map-container iframe {
  width: 100%;
  height: 240px;
  border: none;
  display: block;
}

/* Footer Bottom */
.footer-bottom {
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid #334155;
  text-align: center;
}

.footer-bottom p {
  color: #94a3b8;
  font-size: 0.9rem;
  margin: 0;
}

/* Responsive Design */
@media (max-width: 1024px) {
  .footer-container {
    grid-template-columns: 1fr;
    gap: 2.5rem;
    text-align: center;
  }

  .footer-left {
    align-items: center;
  }

  .ask-btn {
    align-self: center;
  }

  .footer-right {
    justify-content: center;
  }

  .map-container {
    max-width: 400px;
  }
}

@media (max-width: 768px) {
  .footer {
    padding: 2rem 0 1rem;
  }

  .footer-container {
    padding: 0 1rem;
    gap: 2rem;
  }

  .footer-middle {
    gap: 1.5rem;
  }

  .footer-logo-img {
    max-width: 120px;
    max-height: 50px;
  }

  .map-container iframe {
    height: 200px;
  }

  .ask-btn {
    font-size: 0.8rem;
    padding: 0.6rem 1rem;
  }
}

@media (max-width: 480px) {
  .footer-contact p {
    font-size: 0.85rem;
  }

  .company-name {
    font-size: 0.9rem;
    text-align: center;
  }

  .social-section {
    flex-direction: column;
    gap: 0.75rem;
  }

  .map-container {
    max-width: 100%;
  }

  .map-container iframe {
    height: 180px;
  }
}

/* ============================
   RESPONSIVE DESIGN
============================ */
@media (max-width: 768px) {
  .mobile-menu-btn {
    display: block;
  }

  .nav-menu {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background: white;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    padding: 1rem;
    flex-direction: column;
    gap: 0;
    transform: translateY(-100%);
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
  }

  .nav-menu.mobile-active {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
  }

  .nav-menu a {
    padding: 1rem;
    border-bottom: 1px solid #f1f5f9;
    border-radius: 0;
  }

  .nav-container {
    padding: 0 1rem;
  }

  .logo-image {
    height: 35px;
  }
}

@media (max-width: 480px) {
  .nav-container {
    padding: 0 1rem;
  }

  .logo-image {
    height: 30px;
  }
}

/* =========================================================
   TECHNOLOGY PAGE (unique prefix: techx-)
   Aman digabung dengan stylesheet lain
========================================================= */

/* ======= Theme hues (boleh diatur) ======= */
:root {
  --techx-blue: #4f7fff;
  --techx-indigo: #4f46e5;
  --techx-gold: #b8860b;
  --techx-ink: #0f172a;
  --techx-slate: #64748b;
  --techx-border: rgba(226, 232, 240, 0.95);
}

/* =======================
   HERO
======================= */
.techx-hero {
  position: relative;
  width: 100%;
  height: clamp(420px, 64vh, 520px);
  min-height: 380px;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center 45%;
  background-attachment: fixed;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
}
.techx-hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    rgba(37, 99, 235, 0.5),
    rgba(245, 158, 11, 0.2)
  );
  pointer-events: none;
}

.techx-hero__row {
  position: relative;
  z-index: 1;
  width: 100%;
  margin: 0;
}
.techx-hero__title {
  color: #fff;
  font-weight: 800;
  font-size: clamp(28px, 3.8vw, 42px);
  letter-spacing: 0.5px;
  margin: 0;
  text-shadow: 0 6px 26px rgba(0, 0, 0, 0.35);
}
.techx-hero__subtitle {
  color: #fff;
  opacity: 0.95;
  font-weight: 700;
  font-size: clamp(15px, 1.6vw, 20px);
  margin-top: 10px;
  text-shadow: 0 4px 18px rgba(0, 0, 0, 0.35);
}

/* =======================
   SECTION WRAPPER
======================= */
.techx-section {
  background: #f8fafc; /* tone halus konsisten */
  padding: 8rem 0;
  position: relative;
  overflow: hidden;
}
.techx-container {
  width: 100%;
  max-width: 1200px; /* atur lebar konten (silakan ganti 1200 → 1140 jika mau lebih sempit) */
  margin: 0 auto; /* center */
  padding-left: clamp(16px, 3vw, 24px);
  padding-right: clamp(16px, 3vw, 24px);
}
/* =======================
   techx-cards.css
   Place in public/css/techx-cards.css
   ====================== */

/* Variable defaults (ubah di satu tempat jika perlu) */
:root {
  --techx-border: #e6e9ef;
  --techx-ink: #0b1330;
  --techx-slate: #637081;
}

/* =======================
   CARD LIST (3 kolom via grid)
   ====================== */
.techx-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 24px;
  align-items: stretch;
}

/* memastikan tiap item memakai tinggi penuh */
.techx-grid__item {
  display: flex;
}

/* link wrapper */
.techx-card-link {
  display: block;
  height: 100%;
  text-decoration: none;
  color: inherit;
}

/* Kartu dasar */
.techx-card {
  position: relative;
  height: 100%;
  background: #fff;
  border: 1px solid var(--techx-border);
  border-radius: 16px;
  overflow: hidden;
  transition: transform 360ms cubic-bezier(.2,.9,.2,1), box-shadow 360ms cubic-bezier(.2,.9,.2,1), border-color 360ms ease;
  box-shadow: 0 10px 24px rgba(2, 6, 23, 0.06);
  will-change: transform;
  transform-origin: center;
}

/* Pseudo-layer untuk sheen (di bawah konten) */
.techx-card::before {
  content: "";
  position: absolute;
  top: -10%;
  left: -30%;
  width: 160%;
  height: 60%;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.14) 45%, rgba(255,255,255,0.18) 50%, rgba(255,255,255,0.14) 55%, transparent 100%);
  transform: rotate(-18deg) translateY(-30%);
  opacity: 0;
  transition: transform 520ms cubic-bezier(.2,.9,.2,1), opacity 420ms ease;
  pointer-events: none;
  z-index: 1; /* di bawah konten */
}

/* Pseudo-layer untuk subtle border glow (di bawah konten) */
.techx-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 16px;
  padding: 2px; /* ruang untuk mask */
  background: linear-gradient(90deg, rgba(79,127,255,0.18), rgba(0,200,255,0.10));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  opacity: 0;
  transition: opacity 320ms ease, transform 480ms cubic-bezier(.2,.9,.2,1);
  pointer-events: none;
  z-index: 1; /* di bawah konten */
}

/* Isi kartu - di atas pseudo */
.techx-card__body {
  padding: 26px 22px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  z-index: 2; /* pastikan konten selalu di atas pseudo-layers */
}

/* Ikon */
.techx-card__icon {
  width: 56px;
  height: 56px;
  object-fit: contain;
  margin-bottom: 12px;
  filter: drop-shadow(0 2px 6px rgba(2, 6, 23, 0.12));
  transition: transform 320ms cubic-bezier(.2,.9,.2,1);
}

/* Judul & deskripsi */
.techx-card__title {
  font-weight: 800;
  font-size: 1.05rem;
  color: var(--techx-ink);
  margin: 6px 0 8px;
  line-height: 1.2;
}
.techx-card__desc {
  color: var(--techx-slate);
  font-size: 0.95rem;
  margin: 0;
  line-height: 1.55;
  max-width: 36ch;
}

/* HOVER / FOCUS (ringkas & elegan) */
.techx-card:hover,
.techx-card-link:focus-visible .techx-card {
  transform: translateY(-8px) scale(1.01);
  border-color: rgba(79, 127, 255, 0.38);
  box-shadow: 0 20px 48px rgba(2, 6, 23, 0.12);
}
.techx-card:hover::before,
.techx-card-link:focus-visible .techx-card::before {
  opacity: 1;
  transform: rotate(-18deg) translateY(0);
}
.techx-card:hover::after,
.techx-card-link:focus-visible .techx-card::after {
  opacity: 1;
  transform: scale(1);
}

/* subtle scale-up of icon on hover to give feel of interaction */
.techx-card:hover .techx-card__icon,
.techx-card-link:focus-visible .techx-card .techx-card__icon {
  transform: translateY(-2px) scale(1.02);
}

/* ACCESSIBILITY: keyboard focus outline (visible) */
.techx-card-link:focus-visible {
  outline: none;
}
.techx-card-link:focus-visible .techx-card {
  box-shadow: 0 24px 56px rgba(2, 6, 23, 0.14), 0 0 0 4px rgba(79,127,255,0.08);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .techx-card,
  .techx-card::before,
  .techx-card::after,
  .techx-card__icon {
    transition: none !important;
  }
  .techx-card:hover,
  .techx-card:focus {
    transform: none !important;
    box-shadow: 0 10px 24px rgba(2,6,23,0.06) !important;
  }
}

/* small screens - adjust padding */
@media (max-width: 576px) {
  .techx-card__body { padding: 20px; }
  .techx-card__desc { max-width: 44ch; }
}


/* Animasi conic halus */
@keyframes techx-border-sweep {
  0% {
    background: conic-gradient(
      from 225deg at 50% 50%,
      transparent 0deg,
      var(--techx-gold) 6deg,
      var(--techx-gold) 12deg,
      transparent 18deg,
      transparent 172deg,
      var(--techx-blue) 178deg,
      var(--techx-blue) 184deg,
      transparent 190deg,
      transparent 360deg
    );
  }
  40% {
    background: conic-gradient(
      from 225deg at 50% 50%,
      transparent 0deg,
      var(--techx-gold) 30deg,
      var(--techx-gold) 95deg,
      transparent 110deg,
      var(--techx-indigo) 120deg,
      var(--techx-indigo) 130deg,
      var(--techx-blue) 140deg,
      var(--techx-blue) 250deg,
      transparent 270deg,
      transparent 360deg
    );
  }
  75% {
    background: conic-gradient(
      from 225deg at 50% 50%,
      var(--techx-gold) 0deg,
      var(--techx-gold) 120deg,
      var(--techx-indigo) 130deg,
      var(--techx-indigo) 140deg,
      var(--techx-blue) 150deg,
      var(--techx-blue) 270deg,
      var(--techx-gold) 280deg,
      var(--techx-gold) 360deg
    );
  }
  100% {
    background: conic-gradient(
      from 0deg at 50% 50%,
      var(--techx-gold) 0deg,
      var(--techx-indigo) 120deg,
      var(--techx-blue) 180deg,
      var(--techx-indigo) 240deg,
      var(--techx-gold) 360deg
    );
  }
}

@media (prefers-reduced-motion: reduce) {
  .techx-card,
  .techx-card::before,
  .techx-card::after {
    transition: none !important;
    animation: none !important;
  }
}
/* ====== GRID KHUSUS HALAMAN TEKNOLOGI ====== */
.techx-grid {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr)); /* mobile: 1 kolom */
  gap: 24px; /* jarak antar kartu */
}

@media (min-width: 576px) {
  .techx-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)); /* tablet: 2 kolom */
  }
}
@media (min-width: 992px) {
  .techx-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)); /* desktop: 3 kolom */
  }
}

.techx-grid__item {
  height: 100%;
}

.techx-card-link {
  display: block;
  height: 100%;
}
.techx-card {
  height: 100%;
  display: flex;
}
.techx-card__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}

/* ===============================
HALAMAN DETAIL UNTUK BACA TEKS PENUH
=============================== */
/* ======= GENERIC DETAIL PAGE STYLES ======= */
.detail-hero-section {
  position: relative;
  height: 320px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  margin-bottom: 0;
  overflow: hidden;
}
.detail-hero-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  z-index: 1;
  filter: brightness(0.6);
}
.detail-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    rgba(37, 99, 235, 0.5),
    rgba(245, 158, 11, 0.2)
  );
  z-index: 2;
}
.detail-hero-content {
  position: relative;
  z-index: 3;
  text-align: center;
  width: 100%;
  max-width: 700px;
  margin: 0 auto;
}
.detail-hero-title {
  font-size: 2.5rem;
  font-weight: 800;
  margin-bottom: 0.5rem;
  letter-spacing: -1px;
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.25);
}
.detail-hero-subtitle {
  font-size: 1.2rem;
  font-weight: 500;
  opacity: 0.95;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.15);
}

/* ======= CONTENT SECTION ======= */
.detail-content-section {
  background: #f8fafc;
  padding: 3rem 0 4rem;
  min-height: 400px;
}
.detail-content-container {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 1.5rem;
}
.detail-content-card {
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 8px 32px rgba(37, 99, 235, 0.07), 0 1.5px 8px rgba(0, 0, 0, 0.04);
  padding: 2.5rem 2rem 2rem;
  margin-top: -80px;
  position: relative;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.detail-content-icon img {
  width: 64px;
  height: 64px;
  object-fit: contain;
  margin-bottom: 1.5rem;
  border-radius: 12px;
  background: #f1f5f9;
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.08);
  padding: 0.5rem;
}
.detail-content-title {
  font-size: 1.7rem;
  font-weight: 700;
  color: #2563eb;
  margin-bottom: 1.2rem;
  text-align: center;
}
.detail-content-body {
  font-size: 1.08rem;
  color: #334155;
  line-height: 1.8;
  margin-bottom: 2.2rem;
  width: 100%;
  text-align: justify;
}
.detail-content-body p {
  margin-bottom: 1.2em;
}
.detail-content-back {
  text-align: center;
}

/* ======================
   Improved Back Button
   ====================== */
.btn-detail-back {
  --btn-h: 40px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 0 18px;
  height: var(--btn-h);
  background: linear-gradient(90deg, #2563eb 60%, #f59e0b 100%);
  color: #fff;
  font-weight: 600;
  border-radius: 999px;
  text-decoration: none;
  font-size: 1rem;
  transition: transform 260ms cubic-bezier(.2,.9,.2,1), box-shadow 260ms ease;
  box-shadow: 0 6px 20px rgba(37, 99, 235, 0.08);
  border: none;
  position: relative;
  overflow: hidden; /* untuk sheen pseudo-element */
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

/* Icon wrapper (so icon layout won't jump) */
.btn-back__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  font-size: 14px;
  line-height: 1;
  transform: translateX(0);
  transition: transform 260ms cubic-bezier(.2,.9,.2,1);
}

/* text */
.btn-back__text {
  display: inline-block;
  transform: translateX(0);
  transition: transform 260ms cubic-bezier(.2,.9,.2,1);
}

/* subtle moving sheen using pseudo-element */
.btn-detail-back::before {
  content: "";
  position: absolute;
  top: -30%;
  left: -40%;
  width: 40%;
  height: 160%;
  background: linear-gradient(180deg, rgba(255,255,255,0.18), rgba(255,255,255,0.06), rgba(255,255,255,0.0));
  transform: rotate(18deg) translateX(-10%);
  opacity: 0.0;
  transition: transform 600ms cubic-bezier(.2,.9,.2,1), opacity 320ms ease;
  pointer-events: none;
  filter: blur(6px);
}

/* Hover: lift, stronger shadow, sheen sweep, icon shift */
.btn-detail-back:hover,
.btn-detail-back:focus {
  transform: translateY(-4px);
  box-shadow: 0 18px 40px rgba(37, 99, 235, 0.12);
}
.btn-detail-back:hover::before,
.btn-detail-back:focus::before {
  opacity: 1;
  transform: rotate(18deg) translateX(220%);
}

/* move icon slightly left on hover for dynamic feel */
.btn-detail-back:hover .btn-back__icon,
.btn-detail-back:focus .btn-back__icon {
  transform: translateX(-6px);
}

/* small subtle text nudge for balance */
.btn-detail-back:hover .btn-back__text,
.btn-detail-back:focus .btn-back__text {
  transform: translateX(-2px);
}

/* Focus-visible for accessibility (keyboard) */
.btn-detail-back:focus-visible {
  outline: none;
  box-shadow: 0 18px 40px rgba(37,99,235,0.12), 0 0 0 4px rgba(37,99,235,0.08);
}

/* ensure icon color remains white (in case font awesome uses color) */
.btn-detail-back .fas {
  color: #fff;
  display: inline-block;
}

/* Reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  .btn-detail-back,
  .btn-detail-back::before,
  .btn-back__icon,
  .btn-back__text {
    transition: none !important;
  }
  .btn-detail-back:hover,
  .btn-detail-back:focus {
    transform: none !important;
    box-shadow: 0 6px 20px rgba(37, 99, 235, 0.08) !important;
  }
}

/* Responsive adjustments */
@media (max-width: 480px) {
  .btn-detail-back { padding: 0 14px; font-size: .95rem; gap: 8px; }
  .btn-back__icon { width: 22px; height: 22px; font-size: 13px; }
}

/* ======= RESPONSIVE ======= */
@media (max-width: 700px) {
  .detail-hero-section {
    height: 200px;
  }
  .detail-hero-title {
    font-size: 1.5rem;
  }
  .detail-content-card {
    padding: 1.5rem 0.7rem 1.5rem 0.7rem;
  }
}
/* Tambahkan/replace di main.css */

/* 1. LINK STYLE GENERIC UNTUK DETAIL PAGE */
.detail-content-body a {
  color: #2563eb;
  text-decoration: none;
  font-weight: 600;
  border-bottom: 1.5px dotted #2563eb;
  transition: color 0.2s, border-bottom 0.2s;
  word-break: break-all;
}
.detail-content-body a:hover,
.detail-content-body a:focus {
  color: #f59e0b;
  border-bottom: 2px solid #f59e0b;
  text-decoration: underline;
}

/* 2. LIST STYLE AGAR BULLET TIDAK OFFSET DI MOBILE */
.detail-content-body ul {
  padding-left: 1.3em;
  margin-left: 0;
  list-style-position: inside;
}
.detail-content-body ul li {
  margin-bottom: 0.7em;
  text-align: left;
  word-break: break-word;
}

/* Responsive: pastikan bullet tetap di dalam box di layar kecil */
@media (max-width: 600px) {
  .detail-content-body ul {
    padding-left: 1em;
    list-style-position: inside;
  }
  .detail-content-body ul li {
    padding-left: 0;
    margin-left: 0;
  }
}

/* ===================================
CSS HALAMAN PELAKU PASAR (unique prefix: pelakux-) / MARKET MAKER PAGE
=================================== */
/* =========================================================
   PELAKU PASAR (prefix: mmx-pp-)
========================================================= */

/* Palet */
:root {
  --pp-blue: #4f7fff;
  --pp-indigo: #4f46e5;
  --pp-gold: #b8860b;
  --pp-ink: #0f172a;
  --pp-slate: #64748b;
  --pp-border: rgba(226, 232, 240, 0.95);
}

/* ===== Hero ===== */
.mmx-pp-hero {
  position: relative;
  width: 100%;
  height: clamp(360px, 58vh, 480px);
  min-height: 340px;
  background: no-repeat center/cover;
  background-attachment: fixed;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
}
.mmx-pp-hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    rgba(59, 130, 246, 0.8) 0%,
    rgba(217, 119, 6, 0.6) 100%
  );
  z-index: 1;
}
.mmx-pp-hero__row {
  position: relative;
  z-index: 1;
  width: 100%;
  margin: 0;
}
.mmx-pp-hero__title {
  color: #fff;
  font-weight: 800;
  font-size: clamp(28px, 3.5vw, 42px);
  margin: 0;
  text-shadow: 0 6px 26px rgba(0, 0, 0, 0.35);
}
.mmx-pp-hero__subtitle {
  color: #fff;
  font-weight: 700;
  opacity: 0.95;
  margin-top: 10px;
  text-shadow: 0 4px 18px rgba(0, 0, 0, 0.35);
}

/* ===== Section & Container ===== */
.mmx-pp-section {
  background: #f8fafc;
  padding: clamp(40px, 5vw, 72px) 0;
}
.mmx-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

/* ===== Titlebar center + garis kiri/kanan ===== */
.mmx-pp-titlebar {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: clamp(26px, 4vw, 40px);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.mmx-pp-titlebar span {
  position: relative;
  color: var(--pp-ink);
  font-weight: 800;
  font-size: clamp(14px, 1.6vw, 16px);
  padding: 0 14px;
}
.mmx-pp-titlebar span::before,
.mmx-pp-titlebar span::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 140px;
  height: 1px;
  background: rgba(15, 23, 42, 0.15);
}
.mmx-pp-titlebar span::before {
  right: 100%;
  margin-right: 14px;
}
.mmx-pp-titlebar span::after {
  left: 100%;
  margin-left: 14px;
}

@media (max-width: 600px) {
  .mmx-pp-titlebar span::before,
  .mmx-pp-titlebar span::after {
    width: 80px;
  }
}

/* ===== Grid ===== */
.mmx-pp-grid {
  display: grid;
  gap: 22px;
  grid-template-columns: 1fr;
}
@media (min-width: 576px) {
  .mmx-pp-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 992px) {
  .mmx-pp-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ===== Card ===== */
.mmx-pp-card {
  position: relative;
  background: #fff;
  border: 1px solid var(--pp-border);
  border-radius: 18px;
  box-shadow: 0 10px 24px rgba(2, 6, 23, 0.06);
  transition: transform 0.25s, box-shadow 0.25s, border-color 0.25s;
  cursor: pointer;
  outline: none;
}
.mmx-pp-card:focus-visible {
  box-shadow: 0 0 0 3px rgba(79, 127, 255, 0.35);
}

.mmx-pp-card::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(
    135deg,
    rgba(79, 127, 255, 0.08),
    rgba(184, 134, 11, 0.08)
  );
  transition: opacity 0.25s;
}
.mmx-pp-card:hover {
  transform: translateY(-6px);
  border-color: rgba(79, 127, 255, 0.35);
  box-shadow: 0 16px 36px rgba(2, 6, 23, 0.1);
}
.mmx-pp-card:hover::before {
  opacity: 1;
}

.mmx-pp-card__inner {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 16px;
  min-height: 132px;
}

/* Logo: tanpa background abu-abu → menyatu */
.mmx-pp-logo {
  width: 112px;
  flex: 0 0 112px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.mmx-pp-logo__canvas {
  width: 100%;
  height: 92px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent; /* <— tidak ada latar/persegi abu-abu */
  border-radius: 12px; /* tetap halus bila logo transparan */
  /* tidak ada box-shadow/garis; benar-benar netral */
}
.mmx-pp-logo__img {
  max-width: 92%;
  max-height: 88px;
  width: auto;
  height: auto;
  object-fit: contain;
}

.mmx-pp-info {
  flex: 1;
  min-width: 0;
}
.mmx-pp-name {
  margin: 6px 0 0;
  color: var(--pp-ink);
  font-weight: 800;
  font-size: 1rem;
  line-height: 1.35;
}

/* Status pill */
.mmx-pp-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 700;
  font-size: 0.78rem;
  line-height: 1;
  padding: 7px 10px;
  border-radius: 999px;
  margin-bottom: 4px;
  color: #fff;
  background: #94a3b8;
}
.mmx-pp-status.is-active {
  background: #16a34a;
} /* hijau */
.mmx-pp-status.is-danger {
  background: #dc2626;
} /* merah */
.mmx-pp-status.is-muted {
  background: #94a3b8;
} /* abu */

/* >>> TAMBAHKAN INI <<< */
.mmx-pp-status.is-suspended {
  background: #facc15;   /* kuning */
  color: #111827;        /* teks gelap supaya kebaca */
}

/* =========================================================
   MODAL (vanilla) + DETAIL LAYOUT (unik prefix: mmx-)
========================================================= */

/* --- Modal shell --- */
.mmx-modal {
  position: fixed;
  inset: 0;
  z-index: 1050;
  display: grid;
  place-items: center;
  padding: 24px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}
.mmx-modal.is-open {
  opacity: 1;
  pointer-events: auto;
}
.mmx-modal__overlay {
  position: absolute;
  inset: 0;
  background: rgba(2, 6, 23, 0.6);
  backdrop-filter: blur(2px);
}
.mmx-modal__dialog {
  position: relative;
  width: min(920px, 92vw);
  max-height: 88vh;
  overflow: auto;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 30px 60px rgba(2, 6, 23, 0.25);
  border: 1px solid rgba(226, 232, 240, 0.9);
  padding: 18px 20px 20px;
  transform: translateY(10px);
  transition: transform 0.2s ease;
}
.mmx-modal.is-open .mmx-modal__dialog {
  transform: translateY(0);
}

.mmx-modal__title {
  margin: 0 0 10px;
  color: #0f172a;
  font-weight: 800;
  letter-spacing: 0.2px;
}
.mmx-modal__close {
  position: absolute;
  top: 8px;
  right: 10px;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 8px;
  background: #f1f5f9;
  color: #0f172a;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}
.mmx-modal__close:hover {
  background: #e2e8f0;
}

.mmx-modal__body {
  font-size: 15px;
}

/* Lock body scroll ketika modal buka */
.mmx-modal-open {
  position: fixed;
  width: 100%;
  overflow: hidden;
}

/* --- Spinner (loading) --- */
.mmx-spinner {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 3px solid #e5e7eb;
  border-top-color: #4f7fff;
  animation: mmx-spin 0.8s linear infinite;
  margin: 8px 0;
}
@keyframes mmx-spin {
  to {
    transform: rotate(360deg);
  }
}

/* =========================================================
   DETAIL LAYOUT (logo kiri – konten kanan)
========================================================= */
.mmx-pp-detail__grid {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 24px;
  align-items: start;
}

/* Kolom kiri (logo) */
.mmx-pp-detail__aside {
  position: sticky;
  top: 16px;
}
.mmx-pp-detail__logo {
  width: 100%;
  max-width: 200px;
  height: auto;
  object-fit: contain;
  display: block;
  margin: 0 auto;
  padding: 16px;
  border-radius: 14px;
  background: #fff;
  border: 1px solid rgba(226, 232, 240, 0.9);
  box-shadow: 0 10px 24px rgba(2, 6, 23, 0.06);
}

/* Kolom kanan (konten) */
.mmx-pp-detail__main {
  display: grid;
  gap: 18px;
}
.mmx-pp-detail__main h3,
.mmx-pp-detail__main h4,
.mmx-pp-detail__main h5 {
  margin: 0 0 6px;
  color: #0f172a;
  font-weight: 800;
}

/* Tabel info (apapun tabel backend akan di-skin) */
.mmx-pp-detail__table {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
  border: 1px solid rgba(226, 232, 240, 0.9);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 10px 24px rgba(2, 6, 23, 0.06);
}
.mmx-pp-detail__table th,
.mmx-pp-detail__table td {
  padding: 14px 16px;
  border-bottom: 1px solid #e5e7eb;
  vertical-align: top;
  text-align: left;
}
.mmx-pp-detail__table th {
  width: 28%;
  background: #f8fafc;
  color: #475569;
  font-weight: 700;
}
.mmx-pp-detail__table tr:last-child th,
.mmx-pp-detail__table tr:last-child td {
  border-bottom: 0;
}

/* Kartu blok (fallback jika backend tidak kirim tabel) */
.mmx-pp-detail__card {
  background: #fff;
  border: 1px solid rgba(226, 232, 240, 0.9);
  border-radius: 14px;
  box-shadow: 0 10px 24px rgba(2, 6, 23, 0.06);
  padding: 16px;
}

/* Responsif */
@media (max-width: 640px) {
  .mmx-pp-detail__grid {
    grid-template-columns: 1fr;
  }
  .mmx-pp-detail__aside {
    position: static;
    text-align: center;
  }
  .mmx-pp-detail__logo {
    max-width: 160px;
  }
}
/* Footer pada modal */
.mmx-modal__footer {
  position: sticky; /* selalu terlihat ketika dialog discroll */
  bottom: 0;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 12px 20px;
  border-top: 1px solid #e5e7eb;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: saturate(120%) blur(2px);
  border-bottom-left-radius: 16px;
  border-bottom-right-radius: 16px;
}

/* Tombol utilitas */
.mmx-btn {
  appearance: none;
  border: 0;
  border-radius: 10px;
  padding: 10px 16px;
  font-weight: 700;
  letter-spacing: 0.2px;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.2s ease;
}
.mmx-btn:active {
  transform: translateY(1px);
}

.mmx-btn--secondary {
  color: #0f172a;
  background: #f1f5f9;
  box-shadow: 0 0 0 1px rgba(226, 232, 240, 0.9) inset;
}
.mmx-btn--secondary:hover {
  background: #e2e8f0;
}


/* Media query untuk mobile */
@media (max-width: 768px) {
  .mmx-modal__footer {
    justify-content: flex-start; /* Mobile: tombol di kiri */
  }
}
/* ========================================================
   CSS HALAMAN CAREER / karir(unique prefix: carex-)
 =========================================================*/

:root {
  --krx-blue: #4f7fff;
  --krx-indigo: #4f46e5;
  --krx-gold: #b8860b;
  --krx-ink: #0f172a;
  --krx-slate: #64748b;
  --krx-bg: #f8fafc;
  --krx-border: rgba(226, 232, 240, 0.95);
}

/* ---------- HERO ---------- */
.krx-hero {
  position: relative;
  height: clamp(280px, 38vh, 380px);
  background-size: cover;
  background-position: center 45%;
  background-attachment: fixed;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.krx-hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    rgba(59, 130, 246, 0.8) 0%,
    rgba(217, 119, 6, 0.6) 100%
  );
  z-index: 1;
}
.krx-hero__inner {
  position: relative;
  z-index: 1;
}
.krx-hero__title {
  color: #fff;
  font-weight: 800;
  letter-spacing: 0.4px;
  font-size: clamp(22px, 3.1vw, 36px);
  margin: 0;
  text-shadow: 0 6px 24px rgba(0, 0, 0, 0.35);
}

/* ---------- WRAP ---------- */
.krx-wrap {
  background: var(--krx-bg);
  padding: clamp(24px, 4vw, 42px) 0;
}
.krx-grid {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  display: grid;
  grid-template-columns: 360px 1fr;
  gap: 22px;
}
@media (max-width: 860px) {
  .krx-grid {
    grid-template-columns: 1fr;
  }
  .krx-grid.krx--detail-open .krx-col--list {
    display: none;
  }
}

/* ---------- CARDS ---------- */
.krx-card {
  background: #fff;
  border: 1px solid var(--krx-border);
  border-radius: 18px;
  box-shadow: 0 10px 24px rgba(2, 6, 23, 0.06);
}
.krx-card--list {
  padding: 14px;
}
.krx-card--detail {
  padding: 16px 16px 18px;
  position: relative;
}

/* ---------- LIST ---------- */
.krx-list-head {
  font-weight: 800;
  color: var(--krx-ink);
  letter-spacing: 0.3px;
  margin: 4px 2px 10px;
}
.krx-list-scroll {
  max-height: clamp(480px, 62vh, 720px);
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
  overscroll-behavior: contain;
}
.krx-item {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 12px;
  align-items: center;
  background: #fff;
  border: 1px solid var(--krx-border);
  border-radius: 16px;
  padding: 12px;
  cursor: pointer;
  box-shadow: 0 8px 20px rgba(2, 6, 23, 0.05);
  transition: transform 0.18s, box-shadow 0.22s, border-color 0.18s,
    background 0.2s;
  outline: none;
}
.krx-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 36px rgba(2, 6, 23, 0.1);
}
.krx-item.is-active {
  border-color: rgba(79, 127, 255, 0.45);
  background: #fcfdff;
}

.krx-item__avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: linear-gradient(
    135deg,
    rgba(79, 127, 255, 0.08),
    rgba(184, 134, 11, 0.08)
  );
  border: 1px solid var(--krx-border);
}
.krx-item__avatar img {
  width: 36px;
  height: 36px;
  object-fit: contain;
}

.krx-item__meta {
  min-width: 0;
}
.krx-item__title {
  font-weight: 800;
  color: var(--krx-ink);
  font-size: 0.98rem;
  line-height: 1.2;
  margin: 0 0 2px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.krx-item__company {
  color: #0f172a;
  font-weight: 700;
  font-size: 0.86rem;
}
.krx-item__posted {
  color: var(--krx-slate);
  font-size: 0.8rem;
}

/* ---------- DETAIL ---------- */
.krx-back {
  display: none;
  margin-bottom: 10px;
  background: #fff;
  color: var(--krx-ink);
  border: 1px solid var(--krx-border);
  border-radius: 12px;
  padding: 8px 12px;
  font-weight: 700;
  cursor: pointer;
}
@media (max-width: 860px) {
  .krx-back {
    display: inline-block;
  }
}

.krx-detail__brand {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}
.krx-brand__logo {
  width: 28px;
  height: 28px;
  object-fit: contain;
}
.krx-brand__name {
  font-weight: 800;
  color: var(--krx-ink);
  font-size: 0.95rem;
}

.krx-detail__title {
  font-weight: 800;
  color: var(--krx-ink);
  font-size: clamp(18px, 2.1vw, 22px);
  margin: 6px 0 12px;
}

.krx-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 12px;
}
.krx-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.84rem;
  background: #fff;
  border: 1px solid var(--krx-border);
}
.krx-pill svg {
  width: 16px;
  height: 16px;
  fill: var(--krx-slate);
}

.krx-cta {
  display: inline-block;
  margin: 2px 0 14px;
  font-weight: 800;
  text-decoration: none;
  color: #fff;
  padding: 10px 16px;
  border-radius: 12px;
  background: linear-gradient(
    135deg,
    var(--krx-blue),
    var(--krx-indigo),
    var(--krx-gold)
  );
  box-shadow: 0 12px 26px rgba(79, 127, 255, 0.24);
  transition: transform 0.15s ease, box-shadow 0.2s ease, filter 0.2s ease;
}
.krx-cta:hover {
  transform: translateY(-2px);
  filter: saturate(1.06);
  box-shadow: 0 16px 36px rgba(79, 127, 255, 0.34);
}
.krx-cta--bottom {
  margin-top: 12px;
}

.krx-detail-scroll {
  max-height: clamp(420px, 58vh, 680px);
  overflow: auto;
  overscroll-behavior: contain;
  border: 1px solid var(--krx-border);
  border-radius: 14px;
  padding: 16px 16px;
  margin-bottom: 12px;
  background: #fff;
}
.krx-detail__body {
  color: #111827;
  line-height: 1.65;
}
.krx-detail__body p {
  margin: 0 0 12px;
}
.krx-detail__body ul {
  padding-left: 20px;
  margin: 6px 0 12px;
}
.krx-detail__body li {
  margin: 4px 0;
}

.krx-detail__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 4px;
  color: var(--krx-slate);
  font-size: 0.9rem;
}

/* ---------- LOADER ---------- */
.krx-loader {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.75);
  border-radius: 18px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease;
}
.krx-loader.is-on {
  opacity: 1;
  pointer-events: auto;
}
.krx-spinner {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 3px solid rgba(79, 127, 255, 0.25);
  border-top-color: var(--krx-blue);
  animation: krx-spin 0.8s linear infinite;
  margin-bottom: 8px;
}
@keyframes krx-spin {
  to {
    transform: rotate(360deg);
  }
}
.krx-wait {
  font-weight: 800;
  color: var(--krx-ink);
}

/* Small polish */
.krx-col--detail a {
  word-break: break-word;
}

.krx-detail__body ol {
  padding-left: 1em;
  margin-left: 0;
  list-style-position: inside;
}
.krx-detail__body ol li {
  margin-bottom: 0.5em;
  text-align: left;
  word-break: break-word;
}
@media (max-width: 600px) {
  .krx-detail__body ol {
    padding-left: 1em;
    list-style-position: inside;
  }
  .krx-detail__body ol li {
    padding-left: 0;
    margin-left: 0;
  }
}

/* =========================================================
   INFO JFX (prefix: ifx-)
========================================================= */

/* ===== HERO ===== */
.ifx-hero {
  position: relative;
  width: 100%;
  height: clamp(420px, 64vh, 520px);
  min-height: 380px;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center 45%;
  background-attachment: fixed;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
}
.ifx-hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    rgba(37, 99, 235, 0.5),
    rgba(245, 158, 11, 0.2)
  );
  pointer-events: none;
}

.ifx-hero__row {
  position: relative;
  z-index: 1;
  width: 100%;
  margin: 0;
}
.ifx-hero__title {
  color: #fff;
  font-weight: 800;
  font-size: clamp(28px, 3.6vw, 40px);
  margin: 0;
  text-shadow: 0 6px 26px rgba(0, 0, 0, 0.35);
  letter-spacing: 0.4px;
}
.ifx-hero__subtitle {
  color: #fff;
  opacity: 0.95;
  font-weight: 700;
  margin-top: 10px;
}

/* mobile perf */
@media (max-width: 991.98px) {
  .ifx-hero {
    background-attachment: scroll;
  }
}

/* ===== SECTION ===== */
.ifx-section {
  background: #f8fafc;
  padding: clamp(40px, 5vw, 72px) 0;
}
.ifx-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 clamp(16px, 3vw, 24px);
}

/* ===== HEADER ===== */
.ifx-head {
  text-align: center;
  margin-bottom: clamp(18px, 3vw, 28px);
}
.ifx-head__title {
  font-weight: 800;
  color: #0f172a;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  margin: 0 0 10px;
}
.ifx-head__rule {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 10px;
}
.ifx-head__rule::before,
.ifx-head__rule::after {
  content: "";
  height: 2px;
  background: linear-gradient(90deg, #4f7fff, #b8860b);
}

/* ===== TABLE WRAP ===== */
.ifx-tablewrap {
  background: #fff;
  border: 1px solid rgba(226, 232, 240, 0.9);
  border-radius: 16px;
  box-shadow: 0 10px 24px rgba(2, 6, 23, 0.06);
}

/* DataTables header & footer */
.ifx-dt-top {
  padding: 12px 16px;
  border-bottom: 1px solid #eef2f7;
  background: #fafbfe;
}
.ifx-dt-bottom {
  padding: 10px 16px;
  border-top: 1px solid #eef2f7;
  background: #fafbfe;
}
.ifx-dt-top .dataTables_filter input {
  width: clamp(220px, 26vw, 340px);
  border: 1px solid #e2e8f0;
  border-radius: 999px;
  padding: 8px 14px;
  font-weight: 600;
  outline: 0;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.ifx-dt-top .dataTables_filter input:focus {
  border-color: rgba(79, 127, 255, 0.6);
  box-shadow: 0 0 0 4px rgba(79, 127, 255, 0.12);
}
.ifx-dt-bottom .dataTables_info {
  color: #475569;
  font-weight: 600;
  margin: 6px 0;
}
.ifx-dt-bottom .dataTables_paginate {
  margin: 6px 0;
}

/* ===== TABLE ===== */
.ifx-table thead th {
  background: #f1f5f9;
  color: #0f172a;
  font-weight: 800;
  border-bottom: 1px solid #e2e8f0;
  vertical-align: middle;
  white-space: nowrap;
}
.ifx-table tbody td {
  vertical-align: middle;
  color: #1f2937;
}
.ifx-table tbody tr:hover {
  background: rgba(79, 127, 255, 0.05);
}

/* kolom */
.ifx-col-nomor {
  white-space: nowrap;
}
.ifx-perihal {
  max-width: 100%;
}
.ifx-perihal__text {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  line-height: 1.45;
}

/* tombol download */
.ifx-btn.ifx-btn--dl {
  display: inline-block;
  padding: 8px 12px;
  border-radius: 10px;
  font-weight: 800;
  font-size: 0.85rem;
  color: #fff;
  text-decoration: none;
  background: linear-gradient(135deg, #4f7fff, #4f46e5, #b8860b);
  transition: transform 0.15s, box-shadow 0.2s;
}
.ifx-btn.ifx-btn--dl:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 18px rgba(79, 127, 255, 0.28);
}

/* mobile search full width */
@media (max-width: 767.98px) {
  .ifx-dt-top {
    justify-content: stretch !important;
  }
  .ifx-dt-top .dataTables_filter {
    width: 100%;
  }
  .ifx-dt-top .dataTables_filter label {
    width: 100%;
  }
  .ifx-dt-top .dataTables_filter input {
    width: 100%;
  }
}

/* wrapper control datatables tanpa bootstrap */
.ifx-dt-top {
  padding: 12px 16px;
  border-bottom: 1px solid #eef2f7;
  background: #fafbfe;
  display: flex;
  justify-content: flex-end;
}
.ifx-dt-bottom {
  padding: 10px 16px;
  border-top: 1px solid #eef2f7;
  background: #fafbfe;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}

.dataTables_wrapper .dataTables_filter {
  margin: 0;
}
.dataTables_wrapper .dataTables_filter input {
  width: clamp(220px, 26vw, 340px);
  border: 1px solid #e2e8f0;
  border-radius: 999px;
  padding: 8px 14px;
  font-weight: 600;
  outline: 0;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.dataTables_wrapper .dataTables_filter input:focus {
  border-color: rgba(79, 127, 255, 0.6);
  box-shadow: 0 0 0 4px rgba(79, 127, 255, 0.12);
}

/* pagination default datatables */
.dataTables_wrapper .dataTables_paginate .paginate_button {
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 4px 10px;
  margin: 0 2px;
  cursor: pointer;
  background: #fff;
  color: #0f172a !important;
  font-weight: 700;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current {
  background: linear-gradient(135deg, #4f7fff, #b8860b);
  color: #fff !important;
  border-color: transparent;
}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
  background: #f1f5f9;
  color: #0f172a !important;
}

/* kolom & tombol download (dari versi sebelumnya) */
.ifx-perihal__text {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  line-height: 1.45;
}
.ifx-btn.ifx-btn--dl {
  display: inline-block;
  padding: 8px 12px;
  border-radius: 10px;
  font-weight: 800;
  font-size: 0.85rem;
  color: #fff;
  text-decoration: none;
  background: linear-gradient(135deg, #4f7fff, #4f46e5, #b8860b);
  transition: transform 0.15s, box-shadow 0.2s;
}
.ifx-btn.ifx-btn--dl:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 18px rgba(79, 127, 255, 0.28);
}

/* mobile */
@media (max-width: 767.98px) {
  .ifx-dt-top {
    justify-content: stretch;
  }
  .dataTables_wrapper .dataTables_filter {
    width: 100%;
  }
  .dataTables_wrapper .dataTables_filter label {
    width: 100%;
  }
  .dataTables_wrapper .dataTables_filter input {
    width: 100%;
  }
}

/* ==========================
css artikel (prefix: mmx-)
=============================== */
:root {
  --newsx-blue: #3b82f6;
  --newsx-indigo: #4f46e5;
  --newsx-amber: #f59e0b;
  --newsx-ink: #0f172a;
  --newsx-muted: #64748b;
  --newsx-ring: #e2e8f0;
  --newsx-card: #fff;
  --newsx-radius: 18px;
  --newsx-shadow-sm: 0 6px 18px rgba(0, 0, 0, 0.06);
  --newsx-shadow-md: 0 14px 40px rgba(0, 0, 0, 0.14);
  --newsx-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* section */
.newsx-area {
  background: linear-gradient(135deg, #f8fafc, #e2e8f0);
  padding: clamp(28px, 5vw, 56px) 0;
  position: relative;
}
.newsx-area::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 6px;
  background: linear-gradient(
    135deg,
    var(--newsx-blue),
    var(--newsx-indigo) 40%,
    var(--newsx-amber)
  );
  opacity: 0.9;
}
.newsx-container {
  width: min(1160px, 92vw);
  margin-inline: auto;
}
.newsx-head {
  margin-bottom: 18px;
}
.newsx-title {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  background: linear-gradient(
    135deg,
    var(--newsx-blue),
    var(--newsx-indigo) 40%,
    var(--newsx-amber)
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-weight: 900;
  font-size: clamp(1.15rem, 1rem + 1.1vw, 1.8rem);
  position: relative;
  padding-bottom: 0.4rem;
}
.newsx-title i {
  color: var(--newsx-blue);
}
.newsx-title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 96px;
  height: 4px;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--newsx-blue), var(--newsx-amber));
  transform: scaleX(0.65);
  transform-origin: 0 50%;
  transition: transform 0.45s var(--newsx-ease);
}
.newsx-title:hover::after {
  transform: scaleX(1);
}

/* grid: 3 kolom desktop, 2 tablet, 1 mobile */
.newsx-grid {
  display: grid;
  gap: 22px;
  grid-template-columns: repeat(1, minmax(0, 1fr));
}
@media (min-width: 600px) {
  .newsx-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 992px) {
  .newsx-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* card */
.newsx-card {
  background: var(--newsx-card);
  border: 1px solid var(--newsx-ring);
  border-radius: var(--newsx-radius);
  overflow: hidden;
  box-shadow: var(--newsx-shadow-sm);
  transition: transform 0.28s var(--newsx-ease),
    box-shadow 0.28s var(--newsx-ease), border-color 0.28s var(--newsx-ease);
  position: relative;
}
.newsx-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--newsx-shadow-md);
  border-color: rgba(59, 130, 246, 0.35);
}
.newsx-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  background: linear-gradient(135deg, #f59e0b, #fbbf24);
  color: #fff;
  font-weight: 800;
  font-size: 0.72rem;
  padding: 0.28rem 0.55rem;
  border-radius: 999px;
  box-shadow: 0 6px 18px rgba(245, 158, 11, 0.35);
}

/* image */
.newsx-image {
  display: block;
  position: relative;
  overflow: hidden;
  aspect-ratio: 16/9;
  background: #e5e7eb;
}
.newsx-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1);
  transition: transform 0.7s var(--newsx-ease) 0.02s,
    filter 0.6s var(--newsx-ease);
}
.newsx-image__veil {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  opacity: 0.75;
  pointer-events: none;
  background: linear-gradient(
    135deg,
    rgba(59, 130, 246, 0.22),
    rgba(245, 158, 11, 0.12)
  );
  transition: opacity 0.28s var(--newsx-ease);
}
.newsx-image__cta {
  position: absolute;
  left: 12px;
  bottom: 12px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: #dbeafe;
  color: #2563eb;
  font-weight: 800;
  padding: 0.55rem 0.9rem;
  border-radius: 999px;
  box-shadow: 0 8px 24px rgba(13, 110, 253, 0.2);
  transform: translateY(4px);
  transition: transform 0.28s var(--newsx-ease),
    box-shadow 0.28s var(--newsx-ease);
}
.newsx-image:hover img {
  transform: scale(1.04);
  filter: saturate(1.05) contrast(1.03);
}
.newsx-image:hover .newsx-image__veil {
  opacity: 0.92;
}
.newsx-image:hover .newsx-image__cta {
  transform: translateY(0);
  box-shadow: 0 14px 36px rgba(59, 130, 246, 0.28);
}

/* body */
.newsx-body {
  padding: 14px 14px 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.newsx-meta {
  color: var(--newsx-muted);
  font-weight: 600;
  letter-spacing: 0.15px;
}
.newsx-meta i {
  margin-right: 0.35rem;
}
.newsx-h3 {
  margin: 0;
}
.newsx-h3 a {
  display: block;
  color: var(--newsx-ink);
  text-decoration: none;
  line-height: 1.35;
  text-align: justify;
  transition: color 0.22s ease, text-shadow 0.28s ease;
}
.newsx-h3 a:hover {
  color: #2563eb;
  text-shadow: 0 1px 10px rgba(37, 99, 235, 0.35);
}

/* skeleton */
.newsx-skeleton .newsx-skel {
  background: #fff;
  border: 1px solid var(--newsx-ring);
  border-radius: var(--newsx-radius);
  overflow: hidden;
  box-shadow: var(--newsx-shadow-sm);
  padding: 12px;
}
.ph {
  background: #e9edf3;
  border-radius: 10px;
  position: relative;
  overflow: hidden;
}
.ph::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(
    90deg,
    #e9edf3 0px,
    #f4f6fa 40px,
    #e9edf3 80px
  );
  background-size: 600px 100%;
  animation: newsx-shimmer 1.2s infinite linear;
}
.ph.ph-img {
  aspect-ratio: 16/9;
  margin-bottom: 12px;
}
.ph.ph-line {
  height: 14px;
  margin: 10px 0;
}
.ph.ph-line.sm {
  width: 60%;
}
@keyframes newsx-shimmer {
  0% {
    background-position: -450px 0;
  }
  100% {
    background-position: 450px 0;
  }
}

/* load more */
.newsx-loadmore {
  display: flex;
  justify-content: center;
  margin-top: 16px;
}
.newsx-btn {
  border: none;
  cursor: pointer;
  font-weight: 900;
  color: #fff;
  background: linear-gradient(
    135deg,
    var(--newsx-blue),
    var(--newsx-indigo),
    var(--newsx-amber)
  );
  padding: 0.8rem 1.35rem;
  border-radius: 999px;
  box-shadow: 0 6px 18px rgba(59, 130, 246, 0.18);
  transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
}
.newsx-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 36px rgba(59, 130, 246, 0.28);
  filter: saturate(1.05);
}
.newsx-btn:disabled {
  opacity: 0.6;
  cursor: default;
}

/* empty */
.newsx-empty {
  text-align: center;
  color: var(--newsx-muted);
  padding: 36px 0;
  grid-column: 1/-1;
}
.newsx-empty i {
  font-size: 34px;
  margin-bottom: 8px;
  display: block;
}

/* hide helper when Bootstrap isn't loaded */
.d-none,
.newsx-hidden {
  display: none !important;
}

/* =========================================================
   Blog detail (prefix: mmx-pp-detail-)
  =========================================================*/
/* =============== BLOG DETAIL (postx-) =============== */
:root {
  --postx-ink: #0f172a;
  --postx-muted: #64748b;
  --postx-ring: #e2e8f0;
  --postx-card: #fff;
  --postx-radius: 18px;
  --postx-blue: #4f7fff;
  --postx-gold: #b8860b;
  --postx-shadow-sm: 0 8px 22px rgba(2, 6, 23, 0.06);
  --postx-shadow-md: 0 14px 44px rgba(2, 6, 23, 0.12);
  --postx-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* wrap lebar wajar */
.postx-wrap {
  width: min(980px, 92vw);
  margin-inline: auto;
}

/* breadcrumb */
.postx-bc {
  padding: 18px 0;
  border-bottom: 1px solid var(--postx-ring);
  background: #fafbfd;
}
.postx-breadcrumb {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 600;
  color: var(--postx-muted);
}
.postx-breadcrumb a {
  color: var(--postx-blue);
  text-decoration: none;
}
.postx-breadcrumb a:hover {
  text-decoration: underline;
}
.postx-breadcrumb .current {
  color: var(--postx-ink);
}

/* article card */
.postx-article {
  padding: clamp(28px, 6vw, 56px) 0;
  background: linear-gradient(180deg, #fff 0, #f8fafc 100%);
}
.postx-card {
  background: var(--postx-card);
  border: 1px solid var(--postx-ring);
  border-radius: var(--postx-radius);
  box-shadow: var(--postx-shadow-sm);
  overflow: hidden;
  transition: box-shadow 0.28s var(--postx-ease),
    border-color 0.28s var(--postx-ease);
}
.postx-card:hover {
  box-shadow: var(--postx-shadow-md);
  border-color: rgba(79, 127, 255, 0.28);
}

/* header */
.postx-header {
  padding: clamp(18px, 3.5vw, 28px) clamp(16px, 3vw, 24px) 0;
}
.postx-title {
  margin: 0 0 6px 0;
  font-weight: 900;
  color: var(--postx-ink);
  font-size: clamp(1.45rem, 1.05rem + 1.6vw, 2rem);
  line-height: 1.25;
}
.postx-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
  color: var(--postx-muted);
  font-weight: 600;
  margin-bottom: 14px;
}
.postx-meta .meta i {
  margin-right: 0.35rem;
  color: #94a3b8;
}

/* cover */
.postx-cover {
  margin: 0;
  overflow: hidden;
  border-top: 1px solid var(--postx-ring);
}
.postx-cover img {
  width: 100%;
  aspect-ratio: auto;
  /* object-fit: cover; */
  height: auto;
  display: block;
  filter: saturate(1.02);
  transform: scale(1);
  transition: transform 0.7s var(--postx-ease), filter 0.6s var(--postx-ease);
  object-fit: contain;
}
.postx-card:hover .postx-cover img {
  transform: scale(1.02);
  filter: saturate(1.06);
}

/* content (typography) */
.postx-content {
  padding: clamp(18px, 3.5vw, 28px) clamp(16px, 3vw, 24px)
    clamp(12px, 3vw, 22px);
}
.postx-content p {
  color: #111827;
  line-height: 1.75;
  margin: 1rem 0;
  font-size: 1.02rem;
}
.postx-content h2,
.postx-content h3,
.postx-content h4 {
  color: var(--postx-ink);
  margin: 1.25rem 0 0.5rem;
  font-weight: 800;
}
.postx-content h2 {
  font-size: 1.4rem;
}
.postx-content h3 {
  font-size: 1.25rem;
}
.postx-content h4 {
  font-size: 1.1rem;
}
.postx-content ul,
.postx-content ol {
  margin: 0.75rem 0 0.75rem 1.25rem;
}
.postx-content li {
  margin: 0.35rem 0;
  line-height: 1.7;
}
.postx-content a {
  color: var(--postx-blue);
  text-decoration: underline;
}
.postx-content blockquote {
  margin: 1.2rem 0;
  padding: 1rem 1.1rem;
  border-left: 4px solid var(--postx-blue);
  background: linear-gradient(135deg, #f6f8ff, #f3f4f7);
  border-radius: 12px;
  color: #0b1324;
}
.postx-content img {
  max-width: 100%;
  height: auto;
  border-radius: 12px;
}

/* footer */
.postx-footer {
  padding: 0 clamp(16px, 3vw, 24px) clamp(18px, 3.5vw, 28px);
  display: flex;
  justify-content: flex-start;
}
.postx-back {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.7rem 1rem;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 800;
  color: #fff;
  background: linear-gradient(
    135deg,
    var(--postx-blue),
    #4f46e5,
    var(--postx-gold)
  );
  box-shadow: 0 8px 24px rgba(79, 127, 255, 0.24);
  transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
}
.postx-back:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 36px rgba(79, 127, 255, 0.32);
  filter: saturate(1.05);
}

/* mobile tune */
@media (max-width: 600px) {
  .postx-breadcrumb {
    font-size: 0.92rem;
  }
  .postx-content p {
    font-size: 1rem;
  }
}

/* ini css sudah bagus  */
/* =========================================================
   Blog detail – Gallery (postx-gallery)
   Box besar ideal + gambar contain + fade smooth
   ========================================================= */

:root {
  /* tinggi ideal box besar: naik-turun responsif */
  --pg-max-h: clamp(260px, 60vh, 640px);
}

.postx-gallery {
  margin-top: 6px;
}

/* BOX BESAR */
.postx-gallery .pg-main {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  background: #f6f7fb;
  box-shadow: var(--postx-shadow-sm);
}
.postx-gallery .pg-stage {
  position: relative;
  width: 100%;
  height: var(--pg-max-h); /* tinggi ideal responsif */
  background: #f6f7fb;
}

/* setiap slide di-layer absolut agar bisa crossfade */
.postx-gallery .pg-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.35s var(--postx-ease); /* FADE SMOOTH */
  display: flex;
  align-items: center;
  justify-content: center;
}
.postx-gallery .pg-slide.is-active {
  opacity: 1;
}

/* GAMBAR: selalu muat utuh di box (tanpa crop) */
.postx-gallery .pg-slide img {
  width: 100%;
  height: 100%;
  object-fit: contain; /* kunci: TAMPIL UTUH */
  image-rendering: auto;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transform: translateZ(0); /* bantu smooth */
}

/* panah & tombol zoom */
.postx-gallery .pg-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  background: rgba(15, 23, 42, 0.28);
  color: #fff;
  border: 0;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  font-size: 22px;
  line-height: 40px;
  text-align: center;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.15s ease;
}
.postx-gallery .pg-arrow:hover {
  background: rgba(15, 23, 42, 0.44);
  transform: translateY(-50%) scale(1.02);
}
.postx-gallery .pg-prev {
  left: 10px;
}
.postx-gallery .pg-next {
  right: 10px;
}

.postx-gallery .pg-zoom {
  position: absolute;
  right: 10px;
  top: 10px;
  z-index: 4;
  background: rgba(15, 23, 42, 0.28);
  color: #fff;
  border: 0;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.postx-gallery .pg-zoom:hover {
  background: rgba(15, 23, 42, 0.44);
}

/* STRIP THUMBNAIL (seperti sebelumnya) */
.postx-gallery .pg-thumbs {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
}
.postx-gallery .pg-thumbs-viewport {
  overflow: hidden;
  flex: 1;
}
.postx-gallery .pg-thumbs-track {
  display: flex;
  align-items: center;
  gap: 10px;
  transition: transform 0.25s var(--postx-ease);
  will-change: transform;
}
.postx-gallery .pg-thumb {
  width: 180px;
  height: 100px;
  object-fit: cover; /* thumb boleh crop agar rapi */
  border-radius: 10px;
  opacity: 0.55;
  cursor: pointer;
  box-shadow: var(--postx-shadow-sm);
  transition: opacity 0.2s ease, outline-color 0.2s ease, transform 0.2s ease;
}
.postx-gallery .pg-thumb:hover {
  opacity: 0.85;
  transform: translateY(-1px);
}
.postx-gallery .pg-thumb.is-active {
  outline: 3px solid var(--postx-blue);
  opacity: 1;
}

.postx-gallery .pg-thumbs-arrow {
  background: transparent;
  border: 0;
  font-size: 28px;
  line-height: 1;
  width: 34px;
  height: 34px;
  cursor: pointer;
  color: #64748b;
  transition: color 0.2s ease;
}
.postx-gallery .pg-thumbs-arrow:hover {
  color: #1f2937;
}

/* Mobile tuning */
@media (max-width: 768px) {
  :root {
    --pg-max-h: clamp(220px, 45vh, 520px);
  } /* sedikit lebih pendek di mobile */
  .postx-gallery .pg-arrow {
    width: 36px;
    height: 36px;
    font-size: 20px;
  }
  .postx-gallery .pg-prev {
    left: 6px;
  }
  .postx-gallery .pg-next {
    right: 6px;
  }
  .postx-gallery .pg-thumb {
    width: 120px;
    height: 70px;
  }
}

/* =========================
   END Blog detail (prefix: mmx-pp-detail-)
    ========================= 
 */
/* ===========================
  ftlc css (prefix: krx-)
  ============================ */
/* =========================
   FTLC PAGE (unique: ftlc-)
========================= */

/* Hero */
.ftlc-hero {
  width: 100%;
  height: clamp(360px, 52vh, 420px);
  background-size: cover;
  background-position: center 45%;
  background-attachment: fixed;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ftlc-hero__overlay {
  position: absolute;
  inset: 0;
}

/* Section wrapper */
.ftlc-section {
  background: #f8fafc;
  padding: clamp(36px, 5vw, 64px) 0;
}

/* Container width terkontrol supaya tidak full kiri-kanan */
.ftlc-container {
  width: min(1100px, 92%);
  margin-inline: auto;
}

/* Header */
.ftlc-head {
  margin-bottom: 14px;
}
.ftlc-title {
  font-weight: 900;
  color: #0f172a;
  font-size: clamp(20px, 1.2rem + 0.5vw, 26px);
  margin: 0 0 6px;
  position: relative;
  display: inline-block;
  padding-left: 14px;
}
.ftlc-title::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.45em;
  width: 6px;
  height: 1.2em;
  border-radius: 3px;
  background: linear-gradient(135deg, #4f7fff, #b8860b);
}
.ftlc-desc {
  margin: 0 0 14px;
  color: #475569;
  line-height: 1.7;
  text-align: justify;
}

/* Toolbar: search */
.ftlc-toolbar {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin: 10px 0 16px;
}
.ftlc-search {
  position: relative;
  display: inline-flex;
  align-items: center;
  background: #fff;
  border: 1px solid rgba(226, 232, 240, 0.95);
  border-radius: 12px;
  padding: 8px 12px;
  gap: 8px;
  box-shadow: 0 6px 18px rgba(2, 6, 23, 0.06);
}
.ftlc-search i {
  color: #64748b;
}
.ftlc-search input {
  border: none;
  outline: none;
  background: transparent;
  min-width: 240px;
  color: #0f172a;
}

/* Table wrapper (scroll aman di mobile) */
.ftlc-tablewrap {
  background: #fff;
  border: 1px solid rgba(226, 232, 240, 0.95);
  border-radius: 18px;
  padding: 10px;
  box-shadow: 0 10px 24px rgba(2, 6, 23, 0.06);
  overflow-x: auto;
}

/* Table */
.ftlc-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0 8px;
}
.ftlc-table thead th {
  text-align: left;
  font-weight: 800;
  color: #0f172a;
  font-size: 14px;
  padding: 12px 14px;
  position: sticky;
  top: 0;
  z-index: 2;
  background: #f8fafc; /* sticky header */
  border-bottom: 1px solid rgba(226, 232, 240, 0.95);
}
.ftlc-table tbody tr {
  background: #fff;
  transition: 0.2s ease transform, box-shadow 0.2s ease;
  box-shadow: 0 1px 0 rgba(2, 6, 23, 0.04), 0 4px 12px rgba(2, 6, 23, 0.04);
}
.ftlc-table tbody tr:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(2, 6, 23, 0.08);
}
.ftlc-table tbody td {
  padding: 12px 14px;
  font-size: 14px;
  color: #0f172a;
  border-top: 1px solid rgba(226, 232, 240, 0.6);
}
.ftlc-table tbody td:first-child {
  border-left: 1px solid rgba(226, 232, 240, 0.6);
  border-top-left-radius: 12px;
  border-bottom-left-radius: 12px;
}
.ftlc-table tbody td:last-child {
  border-right: 1px solid rgba(226, 232, 240, 0.6);
  border-top-right-radius: 12px;
  border-bottom-right-radius: 12px;
}

/* Links */
.ftlc-table a {
  color: #2563eb;
  font-weight: 700;
  text-decoration: none;
}
.ftlc-table a:hover {
  text-decoration: underline;
}

/* Mobile tweaks */
@media (max-width: 640px) {
  .ftlc-search input {
    min-width: 160px;
  }
  .ftlc-table thead th {
    font-size: 13px;
    padding: 10px 12px;
  }
  .ftlc-table tbody td {
    font-size: 13px;
    padding: 10px 12px;
  }
}

/*=======================
 Data Terkini (prefix: krx-)
======================== */
/* ===========================
   RECENT DATA (prefix rdx-) - CLEAN VERSION
=========================== */
/* ===========================
   RECENT DATA CLEAN VERSION
=========================== */
:root {
  --rdx-ink: #0f172a;
  --rdx-muted: #64748b;
  --rdx-ring: #e5e7eb;
  --rdx-card: #fff;
  --rdx-bg: #f7f9fc;
  --rdx-blue: #4f7fff;
  --rdx-indigo: #4f46e5;
  --rdx-gold: #b8860b;
  --rdx-shadow: 0 10px 24px rgba(15, 23, 42, 0.06);
}

/* ===== SECTION LAYOUT ===== */
.rdx-recent {
  background: var(--rdx-bg);
  padding: clamp(36px, 4vw, 56px) 0;
}

.rdx-container {
  width: min(1200px, 95%);
  margin-inline: auto;
}

.rdx-head {
  margin: 0 0 20px;
  text-align: center;
}

.rdx-title {
  font-weight: 900;
  font-size: clamp(20px, 1.4rem + 0.3vw, 26px);
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  color: var(--rdx-ink);
  letter-spacing: 0.2px;
  position: relative;
  padding-left: 14px;
}

.rdx-title::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.25em;
  width: 6px;
  height: 1.2em;
  border-radius: 3px;
  background: linear-gradient(135deg, var(--rdx-blue), var(--rdx-gold));
}

/* ===== CARD CONTAINER ===== */
.rdx-card {
  background: var(--rdx-card);
  border: 1px solid var(--rdx-ring);
  border-radius: 16px;
  padding: 16px;
  box-shadow: var(--rdx-shadow);
  overflow: hidden;
}

/* ===== TABLE STYLING ===== */
.rdx-table-wrapper {
  overflow-x: auto;
  overflow-y: visible;
  -webkit-overflow-scrolling: touch;
  border-radius: 12px;
  border: 1px solid #eef2f7;
}

.rdx-table {
  width: 100%;
  min-width: 800px;
  border-collapse: separate;
  border-spacing: 0;
  background: white;
  margin: 0 !important;
}

.rdx-table thead th {
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
  color: #374151;
  font-weight: 800;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 16px 12px;
  border-bottom: 2px solid var(--rdx-ring);
  position: sticky;
  top: 0;
  z-index: 10;
}

.rdx-table tbody td {
  padding: 14px 12px;
  border-bottom: 1px solid #f1f5f9;
  font-size: 14px;
  vertical-align: middle;
  white-space: nowrap;
}

.rdx-table tbody tr:nth-child(even) {
  background-color: #fafbfc;
}

.rdx-table tbody tr:hover {
  background-color: #f0f9ff !important;
  transform: scale(1.002);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.rdx-table tbody tr:last-child td {
  border-bottom: none;
}

.rdx-table.no-footer {
  border-bottom: none;
}

/* ===== COLUMN ALIGNMENTS ===== */
.rdx-left {
  text-align: left;
}
.rdx-center {
  text-align: center;
}
.rdx-right {
  text-align: right;
}

/* ===== COLUMN SPECIFIC STYLING ===== */
.rdx-date {
  font-weight: 600;
  color: var(--rdx-muted);
  font-variant-numeric: tabular-nums;
}

.rdx-contract {
  font-weight: 700;
  color: var(--rdx-ink);
}

.rdx-number {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: #374151;
}

.rdx-change {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}

/* ===== CHANGE COLOR CLASSES ===== */
.rdx-up {
  color: #059669 !important;
}
.rdx-down {
  color: #dc2626 !important;
}
.rdx-zero {
  color: var(--rdx-muted) !important;
}

/* ===== SCROLLBAR STYLING ===== */
.rdx-table-wrapper::-webkit-scrollbar {
  height: 8px;
}

.rdx-table-wrapper::-webkit-scrollbar-track {
  background: #f1f5f9;
  border-radius: 4px;
}

.rdx-table-wrapper::-webkit-scrollbar-thumb {
  background: linear-gradient(90deg, var(--rdx-blue), var(--rdx-gold));
  border-radius: 4px;
}

.rdx-table-wrapper::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(90deg, #3b82f6, #d97706);
}

/* ===== DATATABLES CONTROLS ===== */
.rdx-card .dataTables_wrapper {
  padding: 0;
  overflow: visible;
}

.rdx-card .dataTables_wrapper::after {
  content: "";
  display: table;
  clear: both;
}

.rdx-card .dataTables_wrapper .dataTables_length,
.rdx-card .dataTables_wrapper .dataTables_filter {
  margin: 8px 0;
  padding: 0 4px;
  float: none !important;
}

.rdx-card .dataTables_wrapper .dataTables_filter {
  text-align: right;
}

.rdx-card .dataTables_wrapper .dataTables_filter input {
  border: 1px solid var(--rdx-ring);
  border-radius: 8px;
  padding: 0.45rem 0.7rem;
  outline: none;
  transition: border-color 0.2s ease;
  margin-left: 8px;
}

.rdx-card .dataTables_wrapper .dataTables_filter input:focus {
  border-color: var(--rdx-blue);
  box-shadow: 0 0 0 3px rgba(79, 127, 255, 0.1);
}

.rdx-card .dataTables_wrapper .dataTables_length select {
  border: 1px solid var(--rdx-ring);
  border-radius: 6px;
  padding: 0.35rem 0.5rem;
  margin: 0 8px;
}

.rdx-card .dataTables_wrapper .dataTables_info {
  margin: 0;
  padding: 0 4px;
  color: var(--rdx-muted);
  font-size: 14px;
  font-weight: 500;
  float: none !important;
}

.rdx-card .dataTables_wrapper .dataTables_processing {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid var(--rdx-ring);
  border-radius: 8px;
  padding: 20px 40px;
  color: var(--rdx-ink);
  font-weight: 600;
  font-size: 14px;
  box-shadow: var(--rdx-shadow);
  z-index: 20;
}

/* ===== PAGINATION STYLING (CLEAN & FIXED) ===== */
.rdx-card .dataTables_wrapper .dataTables_paginate {
  margin: 0 !important;
  padding: 16px 8px !important;
  text-align: right !important;
  display: flex !important;
  justify-content: flex-end !important;
  align-items: center !important;
  gap: 6px !important;
  border-top: 1px solid #f1f5f9 !important;
  background: linear-gradient(135deg, #fafbfc 0%, #f8fafc 100%) !important;
  border-radius: 0 0 12px 12px !important;
  float: none !important;
}

.rdx-card .dataTables_wrapper .dataTables_paginate .paging_simple_numbers {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* RESET ALL PAGINATION BUTTONS - CLEAN SLATE */
.rdx-card .dataTables_wrapper .dataTables_paginate .paginate_button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 10px 14px !important;
  margin: 0 3px !important;
  min-width: 42px !important;
  height: 42px !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 8px !important;
  background: white !important;
  color: #6b7280 !important;
  text-decoration: none !important;
  font-weight: 500 !important;
  font-size: 14px !important;
  transition: all 0.25s ease !important;
  cursor: pointer !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
  outline: none !important;
  float: none !important;
  position: relative !important;
  vertical-align: middle !important;
  box-sizing: border-box !important;
}

/* REMOVE ALL UNDERLINES AND OUTLINES */
.rdx-card .dataTables_wrapper .dataTables_paginate .paginate_button,
.rdx-card .dataTables_wrapper .dataTables_paginate .paginate_button:link,
.rdx-card .dataTables_wrapper .dataTables_paginate .paginate_button:visited,
.rdx-card .dataTables_wrapper .dataTables_paginate .paginate_button:active,
.rdx-card .dataTables_wrapper .dataTables_paginate .paginate_button:focus {
  text-decoration: none !important;
  text-decoration-line: none !important;
  text-decoration-style: none !important;
  text-decoration-color: transparent !important;
  text-underline-offset: 0 !important;
  border-bottom: none !important;
  outline: none !important;
  outline-offset: 0 !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
}

/* HOVER STATE */
.rdx-card .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
  background: linear-gradient(135deg, #3b82f6, #1d4ed8) !important;
  color: white !important;
  border-color: #3b82f6 !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3) !important;
  text-decoration: none !important;
}

/* CURRENT/ACTIVE PAGE - ENHANCED STYLING */
.rdx-card .dataTables_wrapper .dataTables_paginate .paginate_button.current {
  background: linear-gradient(135deg, #4f7fff, #b8860b) !important;
  color: white !important;
  border-color: #4f7fff !important;
  font-weight: 700 !important;
  box-shadow: 0 4px 16px rgba(79, 127, 255, 0.4) !important;
  transform: scale(1.05) !important;
  text-decoration: none !important;
  position: relative !important;
}

/* CURRENT PAGE INDICATOR */
.rdx-card
  .dataTables_wrapper
  .dataTables_paginate
  .paginate_button.current::before {
  content: "" !important;
  position: absolute !important;
  top: -3px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: 8px !important;
  height: 3px !important;
  background: var(--rdx-gold) !important;
  border-radius: 2px !important;
  box-shadow: 0 1px 3px rgba(184, 134, 11, 0.5) !important;
}

.rdx-card
  .dataTables_wrapper
  .dataTables_paginate
  .paginate_button.current:hover {
  transform: scale(1.05) translateY(-1px) !important;
  text-decoration: none !important;
}

/* DISABLED BUTTONS */
.rdx-card .dataTables_wrapper .dataTables_paginate .paginate_button.disabled {
  background: #f8fafc !important;
  color: #cbd5e1 !important;
  border-color: #e2e8f0 !important;
  cursor: not-allowed !important;
  transform: none !important;
  box-shadow: none !important;
  opacity: 0.6 !important;
  text-decoration: none !important;
}

.rdx-card
  .dataTables_wrapper
  .dataTables_paginate
  .paginate_button.disabled:hover {
  background: #f8fafc !important;
  color: #cbd5e1 !important;
  transform: none !important;
  box-shadow: none !important;
  text-decoration: none !important;
}

/* PREVIOUS/NEXT BUTTONS */
.rdx-card .dataTables_wrapper .dataTables_paginate .paginate_button.previous,
.rdx-card .dataTables_wrapper .dataTables_paginate .paginate_button.next {
  font-weight: 600 !important;
  padding: 10px 18px !important;
  min-width: 85px !important;
  background: linear-gradient(135deg, #f8fafc, #f1f5f9) !important;
  border: 1px solid #d1d5db !important;
  color: #374151 !important;
  text-decoration: none !important;
}

.rdx-card
  .dataTables_wrapper
  .dataTables_paginate
  .paginate_button.previous:hover,
.rdx-card .dataTables_wrapper .dataTables_paginate .paginate_button.next:hover {
  background: linear-gradient(135deg, #6366f1, #4f46e5) !important;
  color: white !important;
  border-color: #6366f1 !important;
  text-decoration: none !important;
}

/* ICONS FOR PREVIOUS/NEXT */
.rdx-card
  .dataTables_wrapper
  .dataTables_paginate
  .paginate_button.previous::after {
  content: " ‹" !important;
  font-size: 16px !important;
  font-weight: 900 !important;
  margin-left: 2px !important;
}

.rdx-card
  .dataTables_wrapper
  .dataTables_paginate
  .paginate_button.next::after {
  content: " ›" !important;
  font-size: 16px !important;
  font-weight: 900 !important;
  margin-left: 2px !important;
}

/* ===== SORTING ICONS ===== */
.rdx-table thead th.sorting:before,
.rdx-table thead th.sorting:after,
.rdx-table thead th.sorting_asc:before,
.rdx-table thead th.sorting_asc:after,
.rdx-table thead th.sorting_desc:before,
.rdx-table thead th.sorting_desc:after {
  color: var(--rdx-muted);
}

/* ===== BOTTOM LAYOUT (INFO + PAGINATION) ===== */
.rdx-card .dataTables_wrapper .bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 0;
  background: #fafbfc;
  padding: 12px 16px;
  border-radius: 0 0 12px 12px;
  border-top: 1px solid #f1f5f9;
}

/* ===== RESPONSIVE DESIGN ===== */
@media (max-width: 992px) {
  .rdx-container {
    width: 98%;
  }
  .rdx-card {
    padding: 12px;
  }
  .rdx-table {
    min-width: 700px;
  }
  .rdx-table thead th,
  .rdx-table tbody td {
    padding: 12px 8px;
    font-size: 13px;
  }
}

@media (max-width: 768px) {
  .rdx-title {
    font-size: 18px;
  }
  .rdx-card {
    padding: 8px;
  }
  .rdx-table {
    min-width: 600px;
  }
  .rdx-table thead th,
  .rdx-table tbody td {
    padding: 10px 6px;
    font-size: 12px;
  }

  .rdx-card .dataTables_wrapper .dataTables_length,
  .rdx-card .dataTables_wrapper .dataTables_filter {
    width: 100%;
    text-align: left;
    margin: 4px 0;
  }

  .rdx-card .dataTables_wrapper .dataTables_filter input {
    width: 100%;
    margin: 4px 0 0 0;
  }

  .rdx-card .dataTables_wrapper .bottom {
    flex-direction: column;
    gap: 12px;
    text-align: center;
  }

  .rdx-card .dataTables_wrapper .dataTables_paginate {
    justify-content: center !important;
  }

  .rdx-card .dataTables_wrapper .dataTables_paginate .paginate_button {
    padding: 8px 10px !important;
    min-width: 36px !important;
    height: 36px !important;
    font-size: 13px !important;
    margin: 0 2px !important;
  }

  .rdx-card .dataTables_wrapper .dataTables_paginate .paginate_button.previous,
  .rdx-card .dataTables_wrapper .dataTables_paginate .paginate_button.next {
    min-width: 75px !important;
    padding: 8px 12px !important;
  }
}

@media (max-width: 480px) {
  .rdx-recent {
    padding: 20px 0;
  }
  .rdx-container {
    width: 100%;
    padding: 0 8px;
  }
  .rdx-table {
    min-width: 500px;
  }
  .rdx-table thead th,
  .rdx-table tbody td {
    padding: 8px 4px;
    font-size: 11px;
  }
  .rdx-title::before {
    display: none;
  }
  .rdx-title {
    padding-left: 0;
  }

  .rdx-card .dataTables_wrapper .dataTables_paginate .paginate_button {
    padding: 6px 8px !important;
    min-width: 32px !important;
    height: 32px !important;
    font-size: 12px !important;
    margin: 0 1px !important;
  }

  .rdx-card .dataTables_wrapper .dataTables_paginate .paginate_button.previous,
  .rdx-card .dataTables_wrapper .dataTables_paginate .paginate_button.next {
    min-width: 65px !important;
    padding: 6px 10px !important;
  }
}

/* ===========================
   END RECENT DATA (prefix rdx-)
=========================== */

/* ==========================
  DATA KEUANGAN 
  =========================
 */

/* ======================================
   FINANCIAL PERFORMANCE (prefix: finx-)
====================================== */
:root {
  --finx-ink: #0f172a;
  --finx-muted: #64748b;
  --finx-ring: #e5e7eb;
  --finx-card: #fff;
  --finx-bg: #f7f9fc;
  --finx-blue: #4f7fff;
  --finx-indigo: #4f46e5;
  --finx-gold: #b8860b;
  --finx-shadow: 0 10px 24px rgba(15, 23, 42, 0.06);
  --finx-radius: 18px;
}

/* Section */
.finx-section {
  background: var(--finx-bg);
  padding: clamp(36px, 4vw, 56px) 0;
}
.finx-container {
  width: min(1160px, 92%);
  margin-inline: auto;
}

/* Title */
.finx-head {
  margin: 0 0 14px;
}
.finx-title {
  font-weight: 900;
  font-size: clamp(18px, 1.2rem + 0.3vw, 24px);
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  color: var(--finx-ink);
  letter-spacing: 0.2px;
  position: relative;
  padding-left: 14px;
}
.finx-title::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.25em;
  width: 6px;
  height: 1.2em;
  border-radius: 3px;
  background: linear-gradient(135deg, var(--finx-blue), var(--finx-gold));
}

/* Grid */
.finx-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(14px, 2vw, 22px);
}
@media (max-width: 980px) {
  .finx-grid {
    grid-template-columns: 1fr;
  }
}

/* Card */
.finx-card {
  background: var(--finx-card);
  border: 1px solid var(--finx-ring);
  border-radius: var(--finx-radius);
  box-shadow: var(--finx-shadow);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.finx-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px 6px 16px;
}
.finx-card__title {
  font-weight: 800;
  color: var(--finx-ink);
  margin: 0;
}
.finx-card__actions {
  display: flex;
  gap: 8px;
}
.finx-card__body {
  padding: 10px 14px 14px 14px;
}
.finx-card__footer {
  padding: 10px 16px 14px 16px;
  border-top: 1px dashed var(--finx-ring);
}
.finx-muted {
  color: var(--finx-muted);
  font-size: 0.9rem;
}

/* Chart area keeps aspect */
.finx-chart-wrap {
  position: relative;
  min-height: 260px;
}

/* Prose */
.finx-prose {
  line-height: 1.65;
  color: var(--finx-ink);
}
.finx-prose p {
  margin: 0 0 10px;
}
.finx-prose ul,
.finx-prose ol {
  padding-left: 1.2rem;
  margin: 0 0 10px;
}

/* Buttons */
.finx-btn {
  border: 1px solid var(--finx-ring);
  background: #fff;
  padding: 0.45rem 0.65rem;
  border-radius: 10px;
  color: var(--finx-ink);
  cursor: pointer;
  transition: 0.2s ease;
}
.finx-btn:hover {
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.08);
}
.finx-btn--ghost {
  background: linear-gradient(#fff, #fff) padding-box,
    linear-gradient(135deg, var(--finx-blue), var(--finx-gold)) border-box;
  border: 2px solid transparent;
}

/* ==================================
 CSS DATA TRANSAKSI 
================================== 
 */
/* ==================================
 CSS DATA TRANSAKSI - UPDATED
================================== */

:root {
  --trx2-ink: #0f172a;
  --trx2-muted: #64748b;
  --trx2-ring: #e5e7eb;
  --trx2-bg: #f7f9fc;
  --trx2-card: #fff;
  --trx2-blue: #4f7fff;
  --trx2-gold: #b8860b;
  --trx2-shadow: 0 12px 28px rgba(15, 23, 42, 0.08);
}

.trx2-section {
  background: var(--trx2-bg);
  padding: clamp(36px, 4vw, 56px) 0;
}

.trx2-container {
  width: min(1220px, 92%);
  margin-inline: auto;
}

.trx2-head {
  text-align: center;
  margin: 0 0 18px;
}

.trx2-title {
  display: inline-block;
  font-weight: 900;
  color: var(--trx2-ink);
  font-size: clamp(22px, 1.35rem+0.3vw, 28px);
  letter-spacing: 0.2px;
  position: relative;
  padding: 0.2rem 1.2rem;
}

.trx2-title::before,
.trx2-title::after {
  content: "";
  position: absolute;
  top: 100%;
  height: 3px;
  width: 120px;
  background: linear-gradient(90deg, var(--trx2-blue), var(--trx2-gold));
  border-radius: 3px;
}

.trx2-title::before {
  left: 0;
  transform: translate(-105%, 6px);
  opacity: 0.6;
}

.trx2-title::after {
  right: 0;
  transform: translate(105%, 6px);
  opacity: 0.6;
}

.trx2-grid {
  display: grid;
  gap: 22px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (max-width: 992px) {
  .trx2-grid {
    grid-template-columns: 1fr;
  }
}

.trx2-card {
  background: var(--trx2-card);
  border: 1px solid var(--trx2-ring);
  border-radius: 16px;
  padding: 20px;
  box-shadow: var(--trx2-shadow);
  position: relative;
  overflow: hidden;
}

.trx2-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}

.trx2-card__title {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-weight: 800;
  color: var(--trx2-ink);
  font-size: clamp(16px, 1rem+0.2vw, 18px);
}

.trx2-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--trx2-blue), var(--trx2-gold));
  display: inline-block;
}

.trx2-filters {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.trx2-select {
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid var(--trx2-ring);
  border-radius: 8px;
  padding: 0.4rem 0.8rem;
  font-weight: 600;
  font-size: 14px;
  color: var(--trx2-ink);
  background: #fff;
  background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%2364748b' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.6rem center;
  background-size: 10px 6px;
  min-width: 100px;
}

.trx2-select:focus {
  outline: 2px solid rgba(79, 127, 255, 0.25);
  border-color: var(--trx2-blue);
}

.trx2-tablewrap {
  border: 1px solid #eef2f7;
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
  /* max-height: 440px; */
}

.trx2-empty {
  padding: 24px;
  color: var(--trx2-muted);
  text-align: center;
  font-style: italic;
}

/* HIDE DATATABLES INFO AND CONTROLS */
.trx2-card .dataTables_wrapper .dataTables_info,
.trx2-card .dataTables_wrapper .dataTables_length,
.trx2-card .dataTables_wrapper .dataTables_filter,
.trx2-card .dataTables_wrapper .dataTables_paginate {
  display: none !important;
}

/* TABLE STYLING IMPROVEMENTS */
.trx2-card .dataTables_wrapper {
  padding: 0;
}

.trx2-card table.dataTable {
  margin: 0 !important;
  border-collapse: collapse;
  width: 100% !important;
}

.trx2-card table.dataTable > thead > tr > th {
  background: #f8fafc;
  font-weight: 700;
  color: #374151;
  border-bottom: 1px solid #e5e7eb;
  padding: 12px 16px;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.025em;
}

.trx2-card table.dataTable > tbody > tr > td {
  padding: 12px 16px;
  border-bottom: 1px solid #f1f5f9;
  font-size: 14px;
  vertical-align: middle;
}

.trx2-card table.dataTable tbody tr:nth-child(even) {
  background-color: #fafbfc;
}

.trx2-card table.dataTable tbody tr:hover {
  background-color: #f0f9ff !important;
}

.trx2-card table.dataTable tbody tr:last-child td {
  border-bottom: none;
}

/* NUMBER FORMATTING */
.trx2-card table.dataTable td.text-right {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: #000000;
}

.trx2-card table.dataTable td.text-center {
  font-weight: 600;
  color: var(--trx2-muted);
}

/* RESPONSIVE IMPROVEMENTS */
.trx2-card table.dataTable.no-footer {
  border-bottom: none;
}

/* Loader overlay */
.trx2-loading {
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(2px);
  display: none;
  align-items: center;
  justify-content: center;
  gap: 12px;
  z-index: 10;
}

.trx2-card.is-loading .trx2-loading {
  display: flex;
}

.trx2-spinner {
  width: 20px;
  height: 20px;
  border: 2px solid #e2e8f0;
  border-top-color: var(--trx2-blue);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

.trx2-loading em {
  color: var(--trx2-muted);
  font-weight: 500;
  font-size: 14px;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* MOBILE OPTIMIZATIONS */
@media (max-width: 768px) {
  .trx2-card {
    padding: 16px;
  }

  .trx2-card__header {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .trx2-filters {
    width: 100%;
    justify-content: stretch;
  }

  .trx2-select {
    flex: 1;
    min-width: 0;
  }

  .trx2-tablewrap {
    /* max-height: 350px; */
  }

  .trx2-card table.dataTable > thead > tr > th,
  .trx2-card table.dataTable > tbody > tr > td {
    padding: 8px 12px;
    font-size: 13px;
  }

  .trx2-title::before,
  .trx2-title::after {
    display: none;
  }
}

@media (max-width: 640px) {
  .trx2-grid {
    gap: 16px;
  }

  .trx2-tablewrap {
    /* max-height: 320px; */
  }
}
/* ==========================
  END DATA KEUANGAN 
  =========================
 */
/* ===========================
   GLOBAL BREADCRUMBS (prefix: bc-)
=========================== */
:root {
  --bc-ink: #0f172a;
  --bc-muted: #64748b;
  --bc-light: #94a3b8;
  --bc-ring: #e2e8f0;
  --bc-bg: #f8fafc;
  --bc-card: #ffffff;
  --bc-primary: #3b82f6;
  --bc-secondary: #6366f1;
  --bc-accent: #f59e0b;
  --bc-success: #10b981;
  --bc-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  --bc-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07);
}

/* ===== SECTION LAYOUT ===== */
.bc-section {
  background: var(--bc-bg);
  border-bottom: 1px solid var(--bc-ring);
  padding: clamp(12px, 2vw, 20px) 0;
  position: relative;
}

.bc-section.bc-enhanced {
  background: linear-gradient(135deg, var(--bc-bg) 0%, #f1f5f9 100%);
  border-bottom: 2px solid var(--bc-ring);
  padding: clamp(16px, 2.5vw, 24px) 0;
}

.bc-container {
  width: min(1200px, 95%);
  margin-inline: auto;
  padding: 0 clamp(12px, 2vw, 20px);
}

.bc-wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

/* ===== NAVIGATION ===== */
.bc-nav {
  flex: 1;
}

.bc-list {
  display: flex;
  align-items: center;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  flex-wrap: wrap;
}

.bc-item {
  display: flex;
  align-items: center;
  position: relative;
}

.bc-item:not(:last-child)::after {
  content: "";
  width: 6px;
  height: 6px;
  background: var(--bc-light);
  border-radius: 50%;
  margin: 0 12px;
  flex-shrink: 0;
}

/* Alternative separator - chevron */
.bc-section.bc-chevron .bc-item:not(:last-child)::after {
  content: "›";
  background: none;
  width: auto;
  height: auto;
  border-radius: 0;
  color: var(--bc-light);
  font-size: 14px;
  font-weight: 600;
  margin: 0 8px;
}

/* Alternative separator - arrow */
.bc-section.bc-arrow .bc-item:not(:last-child)::after {
  content: "→";
  background: none;
  width: auto;
  height: auto;
  border-radius: 0;
  color: var(--bc-light);
  font-size: 12px;
  font-weight: 600;
  margin: 0 10px;
}

/* ===== LINKS ===== */
.bc-link {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 8px;
  color: var(--bc-muted);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  transition: all 0.2s ease;
  position: relative;
  overflow: hidden;
}

.bc-link:hover {
  background: var(--bc-card);
  color: var(--bc-primary);
  box-shadow: var(--bc-shadow);
  transform: translateY(-1px);
}

.bc-link:active {
  transform: translateY(0);
}

/* Home link special styling */
.bc-link.bc-home {
  background: linear-gradient(135deg, var(--bc-primary), var(--bc-secondary));
  color: white;
  font-weight: 600;
  box-shadow: var(--bc-shadow);
}

.bc-link.bc-home:hover {
  background: linear-gradient(135deg, var(--bc-secondary), var(--bc-primary));
  color: white;
  transform: translateY(-2px);
  box-shadow: var(--bc-shadow-md);
}

/* ===== CURRENT PAGE ===== */
.bc-current {
  color: var(--bc-ink);
  font-weight: 600;
  font-size: 14px;
  padding: 6px 12px;
  background: var(--bc-card);
  border-radius: 8px;
  box-shadow: var(--bc-shadow);
  position: relative;
}

.bc-current::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: linear-gradient(135deg, var(--bc-primary), var(--bc-accent));
  border-radius: 0 2px 2px 0;
}

/* Enhanced current page styling */
.bc-enhanced .bc-current {
  background: linear-gradient(135deg, var(--bc-card), #f8fafc);
  border: 1px solid var(--bc-ring);
  color: var(--bc-ink);
  font-weight: 700;
}

.bc-enhanced .bc-current::before {
  width: 4px;
  background: linear-gradient(135deg, var(--bc-primary), var(--bc-accent));
}

/* ===== ICONS ===== */
.bc-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  transition: transform 0.2s ease;
}

.bc-link:hover .bc-icon {
  transform: scale(1.1);
}

.bc-home .bc-icon {
  width: 18px;
  height: 18px;
}

/* ===== BACK BUTTON ===== */
.bc-back {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  background: var(--bc-card);
  border: 1px solid var(--bc-ring);
  border-radius: 8px;
  color: var(--bc-muted);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  text-decoration: none;
}

.bc-back:hover {
  background: var(--bc-primary);
  color: white;
  border-color: var(--bc-primary);
  transform: translateX(-2px);
  box-shadow: var(--bc-shadow);
}

.bc-back .bc-icon {
  width: 14px;
  height: 14px;
}

/* ===== THEME VARIATIONS ===== */

/* Dark Theme */
.bc-section.bc-dark {
  --bc-ink: #f8fafc;
  --bc-muted: #cbd5e1;
  --bc-light: #94a3b8;
  --bc-ring: #374151;
  --bc-bg: #1f2937;
  --bc-card: #374151;
  background: var(--bc-bg);
  border-bottom-color: var(--bc-ring);
}

/* Minimal Theme */
.bc-section.bc-minimal {
  background: transparent;
  border-bottom: none;
  padding: 8px 0;
}

.bc-minimal .bc-link {
  padding: 4px 8px;
  border-radius: 4px;
}

.bc-minimal .bc-current {
  background: transparent;
  box-shadow: none;
  border-bottom: 2px solid var(--bc-primary);
  border-radius: 0;
}

.bc-minimal .bc-current::before {
  display: none;
}

/* Pill Theme */
.bc-section.bc-pill .bc-link,
.bc-section.bc-pill .bc-current {
  border-radius: 20px;
  padding: 8px 16px;
}

.bc-section.bc-pill .bc-link.bc-home {
  background: linear-gradient(135deg, var(--bc-primary), var(--bc-secondary));
  padding: 8px 20px;
}

/* ===== RESPONSIVE DESIGN ===== */
@media (max-width: 768px) {
  .bc-wrapper {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .bc-list {
    flex-wrap: wrap;
    gap: 4px 0;
  }

  .bc-item:not(:last-child)::after {
    margin: 0 8px;
  }

  .bc-link,
  .bc-current {
    font-size: 13px;
    padding: 5px 10px;
  }

  .bc-back {
    align-self: flex-end;
    padding: 6px 12px;
    font-size: 13px;
  }
}

@media (max-width: 480px) {
  .bc-container {
    padding: 0 12px;
  }

  .bc-section {
    padding: 8px 0;
  }

  .bc-list {
    gap: 2px 0;
  }

  .bc-item:not(:last-child)::after {
    margin: 0 6px;
    width: 4px;
    height: 4px;
  }

  .bc-link,
  .bc-current {
    font-size: 12px;
    padding: 4px 8px;
  }

  .bc-icon {
    width: 14px;
    height: 14px;
  }

  .bc-home .bc-icon {
    width: 16px;
    height: 16px;
  }

  /* Stack items vertically on very small screens */
  .bc-section.bc-stack .bc-list {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }

  .bc-section.bc-stack .bc-item::after {
    display: none;
  }
}

/* ===== ACCESSIBILITY ===== */
.bc-link:focus,
.bc-back:focus {
  outline: 2px solid var(--bc-primary);
  outline-offset: 2px;
}

.bc-link:focus:not(:focus-visible),
.bc-back:focus:not(:focus-visible) {
  outline: none;
}

/* High contrast mode */
@media (prefers-contrast: high) {
  .bc-section {
    --bc-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    border-bottom-width: 2px;
  }

  .bc-link,
  .bc-current {
    border: 1px solid var(--bc-ring);
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .bc-link,
  .bc-back,
  .bc-icon {
    transition: none;
  }
}

/* ===========================
   END GLOBAL BREADCRUMBS (prefix: bc-)
=========================== 
 */

/* ===========================
   HALAMAN MARKET BILATERAL (prefix: mb-)
=========================== 
  */
/* ===========================
   PRODUCT TABLE SECTION (Complete)
=========================== */
:root {
  --pdt-ink: #0f172a;
  --pdt-muted: #64748b;
  --pdt-ring: #e2e8f0;
  --pdt-card: #ffffff;
  --pdt-bg: #f8fafc;
  --pdt-primary: #3b82f6;
  --pdt-secondary: #6366f1;
  --pdt-accent: #f59e0b;
  --pdt-success: #10b981;
  --pdt-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
  --pdt-shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.1);
  --pdt-shadow-xl: 0 20px 40px rgba(0, 0, 0, 0.1);
  --pdt-radius: 16px;
  --pdt-radius-lg: 20px;
}

/* ===== HERO SECTION ===== */
.pdt-hero {
  position: relative;
  height: 410px;
  width: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.pdt-hero__overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    135deg,
    rgba(15, 23, 42, 0.7),
    rgba(30, 41, 59, 0.8)
  );
  z-index: 1;
}

.pdt-hero__container {
  position: relative;
  z-index: 2;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pdt-hero__content {
  text-align: center;
  padding: 0 20px;
}

.pdt-hero__title {
  font-size: clamp(28px, 4vw, 48px);
  font-weight: 800;
  color: #ffffff;
  text-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
  letter-spacing: 0.5px;
  margin: 0;
  text-transform: uppercase;
}

/* ===== MAIN SECTION ===== */
.pdt-section {
  background: var(--pdt-bg);
  padding: clamp(40px, 6vw, 80px) 0;
  min-height: 60vh;
}

.pdt-container {
  width: min(1200px, 95%);
  margin: 0 auto;
  padding: 0 20px;
}

.pdt-header {
  margin-bottom: clamp(30px, 4vw, 50px);
  text-align: center;
}

.pdt-badge {
  display: inline-block;
  padding: 12px 32px;
  background: linear-gradient(135deg, var(--pdt-primary), var(--pdt-secondary));
  color: white;
  font-weight: 700;
  font-size: clamp(14px, 2.5vw, 18px);
  letter-spacing: 1px;
  text-transform: uppercase;
  border-radius: 50px;
  box-shadow: var(--pdt-shadow-lg);
}

/* ===== CONTENT CARD ===== */
.pdt-content {
  display: flex;
  justify-content: center;
}

.pdt-card {
  width: 100%;
  background: var(--pdt-card);
  border: 1px solid var(--pdt-ring);
  border-radius: var(--pdt-radius-lg);
  box-shadow: var(--pdt-shadow-xl);
  overflow: hidden;
  position: relative;
}

.pdt-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(
    90deg,
    var(--pdt-primary),
    var(--pdt-accent),
    var(--pdt-secondary)
  );
  z-index: 1;
}

.pdt-table-wrapper {
  padding: clamp(20px, 3vw, 32px);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* ===== TABLE STYLING ===== */
.pdt-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-family: "Inter", "Segoe UI", sans-serif;
  background: transparent;
  margin: 0;
}

.pdt-table thead tr {
  background: linear-gradient(135deg, var(--pdt-primary), var(--pdt-secondary));
  border-radius: var(--pdt-radius);
}

.pdt-th {
  padding: 18px 24px !important;
  color: white !important;
  font-weight: 700 !important;
  font-size: 15px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  text-align: center !important;
  border: none !important;
  background: transparent !important;
}

.pdt-th:first-child {
  border-top-left-radius: var(--pdt-radius);
  border-bottom-left-radius: var(--pdt-radius);
}

.pdt-th:last-child {
  border-top-right-radius: var(--pdt-radius);
  border-bottom-right-radius: var(--pdt-radius);
}

.pdt-row {
  background: var(--pdt-card);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  border-bottom: 1px solid #f1f5f9;
}

.pdt-row:hover {
  background: linear-gradient(135deg, #f0f9ff, #fef3c7);
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
}

.pdt-cell {
  padding: 16px 24px !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: var(--pdt-ink) !important;
  border: none !important;
  vertical-align: middle !important;
  text-align: left !important;
  background: transparent !important;
}

.pdt-cell--contract {
  font-weight: 700 !important;
  color: var(--pdt-primary) !important;
  font-family: "Monaco", "Consolas", monospace !important;
}

.pdt-cell--description {
  color: var(--pdt-muted) !important;
}

/* ===== DATATABLES CONTROLS ===== */
.pdt-card .dataTables_wrapper {
  padding: 0;
  font-family: "Inter", sans-serif;
}

.pdt-card .dataTables_wrapper .dataTables_length,
.pdt-card .dataTables_wrapper .dataTables_filter {
  margin: 0 0 20px 0;
  padding: 0;
}

.pdt-card .dataTables_wrapper .dataTables_length {
  float: left;
}

.pdt-card .dataTables_wrapper .dataTables_filter {
  float: right;
}

.pdt-card .dataTables_wrapper .dataTables_filter label {
  font-weight: 600;
  color: var(--pdt-ink);
  display: flex;
  align-items: center;
  gap: 10px;
}

.pdt-card .dataTables_wrapper .dataTables_filter input {
  border: 2px solid var(--pdt-ring);
  border-radius: 10px;
  padding: 8px 16px;
  font-size: 14px;
  transition: all 0.3s ease;
  background: #fafbfc;
  margin-left: 0 !important;
  width: 200px;
}

.pdt-card .dataTables_wrapper .dataTables_filter input:focus {
  outline: none;
  border-color: var(--pdt-primary);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
  background: white;
}

.pdt-card .dataTables_wrapper .dataTables_length select {
  border: 2px solid var(--pdt-ring);
  border-radius: 8px;
  padding: 6px 12px;
  font-size: 14px;
  background: #fafbfc;
}

.pdt-card .dataTables_wrapper .dataTables_info {
  margin-top: 20px;
  padding: 12px 16px;
  background: rgba(248, 250, 252, 0.8);
  border: 1px solid var(--pdt-ring);
  border-radius: 12px;
  color: var(--pdt-muted);
  font-weight: 600;
  font-size: 14px;
  float: left;
  text-align: left;
}

/* ===== PAGINATION COMPLETE OVERRIDE ===== */
.pdt-card .dataTables_wrapper .dataTables_paginate {
  margin-top: 20px;
  float: right;
  clear: none;
}

/* FORCE REMOVE ALL DEFAULT LINK STYLING */
.pdt-card .dataTables_wrapper .dataTables_paginate * {
  text-decoration: none !important;
  color: inherit !important;
}

.pdt-card .dataTables_wrapper .dataTables_paginate a,
.pdt-card .dataTables_wrapper .dataTables_paginate a:link,
.pdt-card .dataTables_wrapper .dataTables_paginate a:visited,
.pdt-card .dataTables_wrapper .dataTables_paginate a:hover,
.pdt-card .dataTables_wrapper .dataTables_paginate a:active,
.pdt-card .dataTables_wrapper .dataTables_paginate a:focus {
  text-decoration: none !important;
  color: inherit !important;
  outline: none !important;
}

/* CUSTOM PAGINATION BUTTONS */
.pdt-page-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 40px !important;
  height: 40px !important;
  padding: 8px 12px !important;
  margin: 0 3px !important;
  border: 2px solid #e5e7eb !important;
  border-radius: 10px !important;
  background: white !important;
  color: #6b7280 !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  cursor: pointer !important;
  transition: all 0.3s ease !important;
  text-decoration: none !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05) !important;
}

.pdt-page-btn:hover {
  background: linear-gradient(135deg, #3b82f6, #1d4ed8) !important;
  color: white !important;
  border-color: #3b82f6 !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 20px rgba(59, 130, 246, 0.4) !important;
  text-decoration: none !important;
}

/* ACTIVE PAGE STYLING */
.pdt-page-active {
  background: linear-gradient(135deg, #f59e0b, #d97706) !important;
  color: white !important;
  border-color: #f59e0b !important;
  font-weight: 800 !important;
  transform: scale(1.1) !important;
  box-shadow: 0 8px 25px rgba(245, 158, 11, 0.5) !important;
  position: relative !important;
  z-index: 5 !important;
  text-decoration: none !important;
}

/* ACTIVE PAGE INDICATOR */
.pdt-page-active::before {
  content: "" !important;
  position: absolute !important;
  top: -4px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: 20px !important;
  height: 3px !important;
  background: #dc2626 !important;
  border-radius: 2px !important;
  box-shadow: 0 2px 4px rgba(220, 38, 38, 0.3) !important;
}

.pdt-page-active:hover {
  transform: scale(1.1) !important;
  text-decoration: none !important;
}

/* DISABLED BUTTONS */
.pdt-page-disabled {
  background: #f8fafc !important;
  color: #cbd5e1 !important;
  border-color: #e2e8f0 !important;
  cursor: not-allowed !important;
  opacity: 0.6 !important;
  pointer-events: none !important;
}

/* PREVIOUS/NEXT BUTTONS */
.pdt-page-prev,
.pdt-page-next {
  min-width: 80px !important;
  padding: 8px 16px !important;
  background: linear-gradient(135deg, #f3f4f6, #e5e7eb) !important;
  border: 2px solid #d1d5db !important;
  color: #374151 !important;
  font-weight: 700 !important;
}

.pdt-page-prev:hover,
.pdt-page-next:hover {
  background: linear-gradient(135deg, #6366f1, #4f46e5) !important;
  color: white !important;
  border-color: #6366f1 !important;
  text-decoration: none !important;
}

/* PAGINATION CONTAINER */
.pdt-card .dataTables_wrapper .dataTables_paginate .paging_simple_numbers {
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
}

/* CLEAR FLOATS */
.pdt-card .dataTables_wrapper::after {
  content: "";
  display: table;
  clear: both;
}

/* ===== RESPONSIVE DESIGN ===== */
@media (max-width: 992px) {
  .pdt-container {
    padding: 0 16px;
  }

  .pdt-table-wrapper {
    padding: 20px;
  }

  .pdt-th,
  .pdt-cell {
    padding: 14px 18px !important;
    font-size: 13px !important;
  }
}

@media (max-width: 768px) {
  .pdt-hero {
    height: 300px;
  }

  .pdt-section {
    padding: 30px 0;
  }

  .pdt-table-wrapper {
    padding: 16px;
  }

  .pdt-th,
  .pdt-cell {
    padding: 12px 16px !important;
    font-size: 12px !important;
  }

  .pdt-card .dataTables_wrapper .dataTables_length,
  .pdt-card .dataTables_wrapper .dataTables_filter {
    float: none !important;
    display: block !important;
    width: 100% !important;
    margin-bottom: 15px !important;
    text-align: center;
  }

  .pdt-card .dataTables_wrapper .dataTables_info,
  .pdt-card .dataTables_wrapper .dataTables_paginate {
    float: none !important;
    text-align: center !important;
    margin-top: 15px !important;
  }

  .pdt-page-btn {
    min-width: 36px !important;
    height: 36px !important;
    font-size: 13px !important;
  }

  .pdt-page-prev,
  .pdt-page-next {
    min-width: 70px !important;
  }
}

@media (max-width: 480px) {
  .pdt-badge {
    font-size: 12px;
    padding: 8px 20px;
  }

  .pdt-table-wrapper {
    padding: 12px;
  }

  .pdt-th,
  .pdt-cell {
    padding: 10px 12px !important;
    font-size: 11px !important;
  }

  .pdt-page-btn {
    min-width: 32px !important;
    height: 32px !important;
    font-size: 12px !important;
    margin: 0 1px !important;
  }

  .pdt-page-prev,
  .pdt-page-next {
    min-width: 60px !important;
    padding: 6px 10px !important;
  }
}

/* ===== SCROLLBAR STYLING ===== */
.pdt-table-wrapper::-webkit-scrollbar {
  height: 8px;
}

.pdt-table-wrapper::-webkit-scrollbar-track {
  background: #f1f5f9;
  border-radius: 4px;
}

.pdt-table-wrapper::-webkit-scrollbar-thumb {
  background: linear-gradient(90deg, var(--pdt-primary), var(--pdt-accent));
  border-radius: 4px;
}

/* ================================================= */
/* Simple Active Page Styling - Mirip Contoh Gambar */
.dataTables_wrapper .dataTables_paginate .paginate_button {
  padding: 8px 12px !important;
  margin: 0 2px !important;
  border: 1px solid #dee2e6 !important;
  border-radius: 4px !important;
  background: white !important;
  color: #6b7280 !important;
  text-decoration: none !important;
  display: inline-block !important;
  min-width: 32px !important;
  text-align: center !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
  background: #e3f2fd !important;
  color: #1976d2 !important;
  border-color: #1976d2 !important;
}

/* Active Page - Background Biru seperti contoh */
.dataTables_wrapper .dataTables_paginate .paginate_button.current {
  background: #3b82f6 !important;
  background-color: #3b82f6 !important;
  color: white !important;
  border-color: #3b82f6 !important;
  font-weight: bold !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
  background: #2563eb !important;
  background-color: #2563eb !important;
  color: white !important;
  border-color: #2563eb !important;
}

/* Force untuk override semua styling default */
.active-page-marker {
  background: #3b82f6 !important;
  background-color: #3b82f6 !important;
  color: white !important;
  border-color: #3b82f6 !important;
}

/* Disabled buttons */
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled {
  background: #f8f9fa !important;
  color: #6c757d !important;
  border-color: #dee2e6 !important;
  cursor: not-allowed !important;
  opacity: 0.6 !important;
}

/* Remove underlines dari semua link */
.dataTables_wrapper .dataTables_paginate a {
  text-decoration: none !important;
  color: inherit !important;
}

.dataTables_wrapper .dataTables_paginate a:link,
.dataTables_wrapper .dataTables_paginate a:visited,
.dataTables_wrapper .dataTables_paginate a:hover,
.dataTables_wrapper .dataTables_paginate a:active {
  text-decoration: none !important;
  color: inherit !important;
}

/* Container pagination */
.dataTables_wrapper .dataTables_paginate {
  text-align: center !important;
  margin-top: 20px !important;
}

.dataTables_wrapper .dataTables_paginate .paging_simple_numbers {
  display: inline-block !important;
}

/*  ===========================
   END PRODUCT TABLE SECTION (Complete)
=========================== 
*/

/* ==========================
  menu halaman market multilateral (prefix: mm-)
  ========================== 
*/
/* =========================================
   Multilateral v2 (neo-*)
   ========================================= */
:root {
  --ink: #0f172a;
  --muted: #6b7280;
  --ring: #e5e7eb;
  --bg: #f7f9fc;
  --card: #fff;
  --blue: #2563eb;
  --gold: #f59e0b;
  --indigo: #4f46e5;
  --violet: #7c3aed;
  --shadow: 0 12px 28px rgba(15, 23, 42, 0.08);
}

.neo-wrap {
  background: var(--bg);
  padding: clamp(34px, 4vw, 56px) 0;
}
.neo-container {
  width: min(1160px, 92%);
  margin-inline: auto;
}

/* header - IMPROVED with centered title and gradient lines */
.neo-head {
  margin: 0 0 24px;
  text-align: center;
  position: relative;
}

.neo-sub {
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--muted);
  font-weight: 800;
  position: relative;
  padding: 12px 0;
  font-size: 0.7rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
}

.neo-sub::before,
.neo-sub::after {
  content: "";
  height: 2px;
  width: 120px;
  background: linear-gradient(90deg, var(--blue), var(--gold));
  border-radius: 2px;
}

.neo-title {
  font-size: clamp(22px, 1.6rem + 0.4vw, 32px);
  font-weight: 900;
  color: var(--ink);
  margin: 0.4rem 0;
  position: relative;
}

/* tabs - IMPROVED mobile responsive */
.neo-tabs {
  position: relative;
  display: flex;
  gap: 0.6rem;
  justify-content: center;
  padding: 0.6rem 0 1.1rem;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
}

.neo-tab {
  appearance: none;
  border: 1px solid var(--ring);
  background: #fff;
  border-radius: 12px;
  padding: 0.55rem 1rem;
  font-weight: 900;
  font-size: 0.82rem;
  color: #111827;
  transition: transform 0.15s ease, box-shadow 0.2s ease, color 0.2s ease,
    border-color 0.2s ease, background 0.2s ease;
  white-space: nowrap;
  min-width: fit-content;
}

.neo-tab:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow);
}

.neo-tab.is-active {
  border-color: transparent;
  background: linear-gradient(#fff, #fff) padding-box,
    linear-gradient(90deg, var(--blue), var(--gold)) border-box;
  border: 2px solid transparent;
  box-shadow: 0 10px 24px rgba(37, 99, 235, 0.18);
  color: #0f172a;
}

.neo-underline {
  pointer-events: none;
  position: absolute;
  bottom: 0;
  height: 3px;
  width: 0;
  /* background: linear-gradient(90deg, var(--blue), var(--gold)); */
  border-radius: 3px;
  transition: transform 0.25s ease, width 0.25s ease;
}

/* panels */
.neo-panels {
  margin-top: 0.3rem;
}
.neo-panel {
  display: none;
}
.neo-panel.is-active {
  display: block;
}

/* cards */
.neo-card {
  background: var(--card);
  border: 1px solid var(--ring);
  border-radius: 16px;
  padding: 16px;
  box-shadow: var(--shadow);
}
.neo-card--glow {
  box-shadow: 0 16px 40px rgba(37, 99, 235, 0.13);
}
.neo-card-head {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.6rem;
}
.neo-card-title {
  font-weight: 900;
  color: var(--ink);
  font-size: 1.05rem;
}
.neo-chip {
  background: #eef2ff;
  color: #4338ca;
  border: 1px solid #e0e7ff;
  padding: 0.25rem 0.6rem;
  border-radius: 999px;
  font-weight: 800;
  font-size: 0.72rem;
}
.neo-chip--info {
  background: #ecfeff;
  color: #0891b2;
  border-color: #cffafe;
}
.neo-copy {
  color: #111827;
  line-height: 1.75;
  font-size: 0.95rem;
  text-align: justify;
  text-justify: inter-word;
}

/* Improved chart styling */
.neo-chart {
  height: 340px;
  margin: 0.6rem 0;
  position: relative;
}
.neo-legend {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: 0.4rem;
  color: #374151;
  font-weight: 700;
  justify-content: center;
}
.neo-key {
  width: 14px;
  height: 14px;
  border-radius: 4px;
  display: inline-block;
}
.neo-key--spot {
  background: var(--blue);
}
.neo-key--remote {
  background: var(--violet);
}
.neo-spacer {
  width: 20px;
}

/* Description layout improvements */
.neo-desc-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.8rem;
  align-items: start;
}

.neo-chart-section {
  position: relative;
}

.neo-description-section {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.neo-description-content {
  flex: 1;
  padding: 1.2rem;
  background: #f8fafc;
  border-radius: 12px;
  border: 1px solid #e2e8f0;
}

/* IMPROVED Section titles - like neo-sub style with gradient lines */
.neo-sectionTitle {
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--muted);
  font-weight: 800;
  position: relative;
  padding: 16px 0;
  font-size: 0.8rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  text-align: center;
  margin: 48px auto 24px; /* Added top margin for spacing */
  width: min(720px, 96%);
}

.neo-sectionTitle::before,
.neo-sectionTitle::after {
  content: "";
  height: 2px;
  width: 100px;
  background: linear-gradient(90deg, var(--blue), var(--gold));
  border-radius: 2px;
}

/* mini physical table (center) */
.neo-mini {
  width: min(560px, 96%);
  margin: 0 auto 18px;
}

/* center links list */
.neo-links {
  width: min(720px, 96%);
  margin: 6px auto 28px;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.neo-links a {
  display: block;
  text-decoration: none;
  font-weight: 800;
  color: #374151;
  padding: 0.6rem 0.8rem;
  border-radius: 10px;
  border: 1px solid var(--ring);
  background: #fff;
  transition: box-shadow 0.2s ease, transform 0.15s ease, color 0.2s ease;
  text-align: center;
}
.neo-links a:hover {
  color: var(--blue);
  box-shadow: var(--shadow);
  transform: translateY(-1px);
}

/* pdf button */
.neo-pdf {
  margin-left: auto;
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: #fff1f1;
  color: #d12e2e;
  border: 1px solid #ffd2d2;
  transition: all 0.2s ease;
}
.neo-pdf:hover {
  filter: brightness(0.95);
  transform: scale(1.05);
}

/* DataTables polish */
.table thead th {
  background: #f3f6fb;
  color: #0f172a;
  font-weight: 900;
  border-bottom: 1px solid var(--ring) !important;
}
.table tbody tr:hover {
  background: #f9fbff;
}
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter {
  margin: 8px 6px;
}
.dataTables_wrapper .dataTables_info {
  color: var(--muted);
}

/* PAGINATION pill box (core + BS4) */
.dataTables_wrapper .dataTables_paginate .paginate_button {
  border: 1px solid var(--ring) !important;
  border-radius: 12px;
  padding: 0.28rem 0.66rem !important;
  margin: 0 0.18rem !important;
  background: #fff !important;
  color: #111 !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
  background: #eef2ff !important;
  border-color: #dfe3f0 !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
  color: #fff !important;
  background: linear-gradient(90deg, var(--blue), var(--gold)) !important;
  border-color: transparent !important;
  border-radius: 12px;
  box-shadow: 0 6px 14px rgba(37, 99, 235, 0.25);
}
/* Bootstrap4 pagination variant */
.dataTables_wrapper .pagination .page-item .page-link {
  border: 1px solid var(--ring);
  color: #111;
  border-radius: 12px;
  margin: 0 0.18rem;
  min-width: 34px;
  text-align: center;
}
.dataTables_wrapper .pagination .page-item.active .page-link {
  color: #fff;
  background: linear-gradient(90deg, var(--blue), var(--gold));
  border-color: transparent;
  box-shadow: 0 6px 14px rgba(37, 99, 235, 0.25);
}

/* simple table (physical price) */
.neo-dt--simple thead th {
  background: #f8fafc;
}

/* Contract specifications - IMPROVED with alternating rows */
.neo-specs-table {
  width: 100%;
}
.neo-specs-table tbody tr {
  transition: all 0.2s ease;
}
.neo-specs-table tbody tr:nth-child(odd) {
  background-color: #f9fafb;
}
.neo-specs-table tbody tr:nth-child(even) {
  background-color: #ffffff;
}
.neo-specs-table tbody tr:hover {
  background-color: #e0f2fe !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transform: translateY(-1px);
}
.neo-specs-table td {
  border-bottom: 1px solid #f1f5f9;
  vertical-align: top;
  padding: 12px 8px !important;
}

/* MOBILE RESPONSIVE - IMPROVED */
@media (max-width: 768px) {
  .neo-wrap {
    padding: clamp(20px, 3vw, 32px) 0;
  }

  .neo-chart-section {
    width: 100%;
  }

  .neo-head {
    margin: 0 0 20px;
  }

  .neo-sub {
    font-size: 0.65rem;
    gap: 16px;
  }

  .neo-sub::before,
  .neo-sub::after {
    width: 60px;
    height: 1.5px;
  }

  .neo-title {
    font-size: clamp(18px, 1.2rem + 0.2vw, 24px);
    margin: 0.3rem 0;
  }

  /* Mobile section titles */
  .neo-sectionTitle {
    font-size: 0.7rem;
    gap: 16px;
    margin: 32px auto 20px;
    padding: 12px 0;
  }

  .neo-sectionTitle::before,
  .neo-sectionTitle::after {
    width: 50px;
    height: 1.5px;
  }

  /* Mobile tabs - VERTICAL STACK */
  .neo-tabs {
    flex-direction: column;
    gap: 0.5rem;
    align-items: stretch;
    padding: 0.8rem 1rem 1rem;
  }

  .neo-tab {
    font-size: 0.8rem;
    padding: 0.6rem 1rem;
    text-align: center;
    width: 100%;
  }

  .neo-underline {
    display: none; /* Hide underline on mobile */
  }

  .neo-card {
    padding: 14px;
  }

  .neo-chart {
    height: 280px;
  }

  /* Stack description layout on mobile - CHART TOP, DESCRIPTION BOTTOM */
  .neo-desc-layout {
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
  }

  .neo-chart-section {
    order: 1; /* Chart first */
  }

  .neo-description-section {
    order: 2; /* Description second */
  }

  .neo-description-content {
    padding: 1rem;
  }

  /* Mobile table improvements */
  .neo-specs-table {
    font-size: 0.85rem;
  }

  .neo-specs-table td {
    padding: 10px 6px !important;
  }

  /* Mobile links */
  .neo-links {
    width: 96%;
  }

  .neo-links a {
    padding: 0.5rem 0.6rem;
    font-size: 0.85rem;
  }

  /* Mobile mini table */
  .neo-mini {
    width: 50%;
  }

  /* --- GANTI DENGAN KODE INI --- Responsive Price Table (Metode Flexbox) --- */

  /* Sembunyikan header tabel asli di mobile */
  #priceTable thead {
    display: none;
  }

  /* Ubah elemen tabel menjadi block agar bisa ditata ulang */
  #priceTable,
  #priceTable tbody,
  #priceTable tr,
  #priceTable td {
    display: block;
    width: 100%;
  }

  /* Jadikan setiap baris (tr) sebagai kartu/card terpisah */
  #priceTable tr {
    margin-bottom: 1rem;
    border: 1px solid #e0e0e0;
    border-radius: 4px; /* Tambahan agar sudut lebih halus */
    padding: 0.5rem 1rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  }

  /* Tata letak utama untuk setiap sel (td) */
  #priceTable td {
    display: flex; /* ✅ KUNCI UTAMA: Gunakan Flexbox */
    justify-content: space-between; /* Membuat label di kiri dan data di kanan */
    align-items: center; /* Menjaga agar sejajar secara vertikal */
    padding: 12px 0 !important; /* Atur padding vertikal, hapus padding horizontal */
    border-bottom: 1px solid #f0f0f0; /* Garis pemisah antar data */
    text-align: right !important; /* Pastikan teks data rata kanan */
  }

  /* Hapus garis pemisah untuk data terakhir di setiap kartu */
  #priceTable td:last-child {
    border-bottom: none;
  }

  /* Buat dan tata letak label dari atribut data-label */
  #priceTable td::before {
    content: attr(data-label);
    font-weight: bold;
    text-align: left;
    padding-right: 1rem; /* Jarak antara label dan data */
  }

  /* --- Tambahkan kode ini untuk Responsive DataTables Controls & Pagination --- */

  /* Membuat semua kontrol DataTables (Show, Search, Info, Paginate) menjadi full-width dan ditumpuk */
  .dataTables_wrapper .dataTables_length,
  .dataTables_wrapper .dataTables_filter,
  .dataTables_wrapper .dataTables_info,
  .dataTables_wrapper .dataTables_paginate {
    width: 100%;
    text-align: center; /* Pusatkan teks untuk semua kontrol */
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
  }

  /* Membuat input search lebih lebar di mobile */
  .dataTables_wrapper .dataTables_filter input {
    width: 70% !important;
    margin-left: 0 !important;
    display: inline-block;
  }

  /* Mengaktifkan 'wrapping' untuk tombol pagination menggunakan Flexbox */
  .dataTables_wrapper .dataTables_paginate {
    display: flex;
    flex-wrap: wrap; /* ✅ KUNCI UTAMA: Izinkan tombol turun baris */
    justify-content: center; /* Pusatkan tombol-tombol yang sudah di-wrap */
  }

  /* Memberi sedikit ruang antar tombol pagination agar tidak terlalu rapat */
  .dataTables_wrapper .dataTables_paginate .paginate_button {
    margin: 0.2rem !important;
  }

  /* Untuk varian Bootstrap 4, pastikan kontainernya juga terpusat */
  .dataTables_wrapper .pagination {
    justify-content: center;
  }
}

@media (max-width: 480px) {
  .neo-chart {
    height: 240px;
  }

  .neo-chart-section {
    width: 100%;
  }

  .neo-tab {
    padding: 0.5rem 0.8rem;
    font-size: 0.75rem;
  }

  .neo-sub {
    gap: 12px;
  }

  .neo-sub::before,
  .neo-sub::after {
    width: 40px;
  }

  .neo-sectionTitle {
    gap: 12px;
  }

  .neo-sectionTitle::before,
  .neo-sectionTitle::after {
    width: 30px;
  }

  .neo-specs-table {
    font-size: 0.8rem;
  }

  .neo-description-content {
    padding: 0.8rem;
  }
}

/* Extra small devices */
@media (max-width: 360px) {
  .neo-container {
    width: 95%;
  }

  .neo-card {
    padding: 12px;
  }

  .neo-chart {
    height: 220px;
  }

  .neo-sectionTitle::before,
  .neo-sectionTitle::after {
    width: 25px;
  }
}

/* ================================= ================
   END Multilateral v2 (neo-*)  
==================================
 */

/* ==========================
  Css halaman faq 
  ========================== 
 
 */
/* Hero Section */
.faq-hero {
  position: relative;
  height: 420px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  overflow: hidden;
}

.faq-hero__overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    135deg,
    rgba(59, 130, 246, 0.8) 0%,
    rgba(217, 119, 6, 0.6) 100%
  );
  z-index: 1;
}

.faq-hero__row {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 20px;
}

.faq-hero__title {
  color: #ffffff;
  font-size: 3.5rem;
  font-weight: 700;
  margin-bottom: 1rem;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  letter-spacing: -0.02em;
}

.faq-hero__subtitle {
  color: rgba(255, 255, 255, 0.95);
  font-size: 1.25rem;
  font-weight: 400;
  margin: 0;
}

/* Main FAQ Section */
.faq-section {
  padding: 80px 0;
  background: #ffffff;
  min-height: 70vh;
}

.faq-container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 20px;
}

/* Header Container - Side by Side Layout */
.faq-header-container {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 3rem;
  gap: 3rem;
}

.faq-header-left {
  flex: 1;
  max-width: 500px;
}

.faq-header-right {
  flex: 1;
  max-width: 500px;
  display: flex;
  justify-content: flex-end;
}

/* Title */
.faq-head__title {
  font-size: 2rem;
  font-weight: 700;
  color: #1e40af;
  margin-bottom: 1rem;
  letter-spacing: -0.025em;
  line-height: 1.2;
}

.faq-head__rule {
  display: flex;
  align-items: center;
  margin-bottom: 0;
}

.faq-head__rule span {
  height: 4px;
  background: linear-gradient(90deg, #3b82f6 0%, #d97706 100%);
  border-radius: 2px;
}

.faq-head__rule span:first-child {
  width: 80px;
  margin-right: 12px;
}

.faq-head__rule span:last-child {
  width: 40px;
  margin-left: 12px;
  opacity: 0.7;
}

/* Search Section */
.faq-search {
  width: 100%;
  max-width: 450px;
}

.faq-search__wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.faq-search__icon {
  position: absolute;
  left: 18px;
  width: 22px;
  height: 22px;
  color: #6b7280;
  z-index: 2;
}

.faq-search__input {
  width: 100%;
  padding: 18px 55px 18px 55px;
  font-size: 16px;
  border: 2px solid #e5e7eb;
  border-radius: 50px;
  background: #ffffff;
  color: #374151;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  outline: none;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
}

.faq-search__input:focus {
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1), 0 8px 10px rgba(0, 0, 0, 0.08);
  transform: translateY(-1px);
}

.faq-search__input::placeholder {
  color: #9ca3af;
}

.faq-search__clear {
  position: absolute;
  right: 14px;
  width: 28px;
  height: 28px;
  border: none;
  background: linear-gradient(135deg, #3b82f6, #d97706);
  color: white;
  border-radius: 50%;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.9;
}

.faq-search__clear:hover {
  opacity: 1;
  transform: scale(1.1);
}

.faq-search__clear svg {
  width: 16px;
  height: 16px;
}

/* Content Box */
.faq-content-box {
  background: #ffffff;
  border-radius: 20px;
  padding: 3rem;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08), 0 4px 10px rgba(0, 0, 0, 0.03);
  border: 1px solid #f1f5f9;
}

/* Stats */
.faq-stats {
  display: flex;
  justify-content: center;
  gap: 4rem;
  margin-bottom: 3rem;
  padding: 2rem 0;
  border-bottom: 1px solid #f1f5f9;
}

.faq-stats__item {
  text-align: center;
}

.faq-stats__number {
  display: block;
  font-size: 2.5rem;
  font-weight: 700;
  background: linear-gradient(135deg, #3b82f6, #d97706);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1;
}

.faq-stats__label {
  display: block;
  font-size: 0.875rem;
  color: #6b7280;
  margin-top: 0.5rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 500;
}

/* Loading */
.faq-loading {
  text-align: center;
  padding: 4rem 2rem;
  color: #6b7280;
}

.faq-loading__spinner {
  width: 50px;
  height: 50px;
  border: 4px solid #f1f5f9;
  border-top: 4px solid #3b82f6;
  border-radius: 50%;
  margin: 0 auto 1.5rem;
  animation: faq-spin 1s linear infinite;
}

@keyframes faq-spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* No Results */
.faq-noresults {
  text-align: center;
  padding: 4rem 2rem;
  color: #6b7280;
}

.faq-noresults__icon {
  width: 80px;
  height: 80px;
  margin: 0 auto 2rem;
  color: #d1d5db;
}

.faq-noresults h4 {
  font-size: 1.5rem;
  color: #374151;
  margin-bottom: 1rem;
  font-weight: 600;
}

/* Accordion */
.faq-accordion {
  margin: 0 auto 3rem;
}

.faq-item {
  background: #ffffff;
  border: 2px solid #f1f5f9;
  border-radius: 16px;
  margin-bottom: 1.5rem;
  overflow: hidden;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02);
}

.faq-item:hover {
  border-color: #e2e8f0;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.06);
  transform: translateY(-2px);
}

.faq-item--active {
  border-color: #3b82f6;
  box-shadow: 0 10px 40px rgba(59, 130, 246, 0.15);
}

.faq-item__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 2rem;
  cursor: pointer;
  transition: all 0.2s;
  user-select: none;
}

.faq-item__header:hover {
  background: #f8fafc;
}

.faq-item--active .faq-item__header {
  background: linear-gradient(135deg, #3b82f6 0%, #d97706 100%);
  color: white;
}

.faq-item__question {
  display: flex;
  align-items: center;
  flex: 1;
  min-width: 0;
}

.faq-item__number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  background: #f1f5f9;
  color: #64748b;
  font-size: 0.875rem;
  font-weight: 700;
  border-radius: 50%;
  margin-right: 1.5rem;
  flex-shrink: 0;
  transition: all 0.3s;
}

.faq-item--active .faq-item__number {
  background: rgba(255, 255, 255, 0.25);
  color: white;
}

.faq-item__title {
  font-size: 1.25rem;
  font-weight: 600;
  color: #1e293b;
  margin: 0;
  line-height: 1.4;
  transition: color 0.2s;
}

.faq-item--active .faq-item__title {
  color: white;
}

.faq-item__toggle {
  margin-left: 1.5rem;
  flex-shrink: 0;
}

.faq-item__icon {
  width: 28px;
  height: 28px;
  color: #94a3b8;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.faq-item--active .faq-item__icon {
  color: white;
}

.faq-item__icon--minus {
  display: none;
}

.faq-item--active .faq-item__icon--plus {
  display: none;
}

.faq-item--active .faq-item__icon--minus {
  display: block;
  transform: rotate(180deg);
}

.faq-item__content {
  display: none;
  border-top: 1px solid #f1f5f9;
}

.faq-item--active .faq-item__content {
  border-top-color: rgba(255, 255, 255, 0.15);
}

.faq-item__answer {
  padding: 2rem;
  color: #475569;
  line-height: 1.7;
  font-size: 1rem;
}

.faq-item__answer h1,
.faq-item__answer h2,
.faq-item__answer h3,
.faq-item__answer h4,
.faq-item__answer h5,
.faq-item__answer h6 {
  color: #1e293b;
  margin-top: 1.5rem;
  margin-bottom: 0.75rem;
  font-weight: 600;
}

.faq-item__answer p {
  margin-bottom: 1rem;
}

.faq-item__answer ul,
.faq-item__answer ol {
  margin: 1rem 0;
  padding-left: 2rem;
}

.faq-item__answer li {
  margin-bottom: 0.5rem;
}

.faq-item__answer a {
  color: #3b82f6;
  text-decoration: none;
  font-weight: 500;
  transition: color 0.2s;
}

.faq-item__answer a:hover {
  color: #d97706;
  text-decoration: underline;
}

.faq-item__answer strong {
  color: #1e293b;
  font-weight: 600;
}

.faq-item__answer code {
  background: #f1f5f9;
  color: #475569;
  padding: 0.25rem 0.5rem;
  border-radius: 6px;
  font-size: 0.875rem;
}

/* Actions */
.faq-actions {
  display: flex;
  justify-content: center;
  gap: 1.5rem;
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid #f1f5f9;
}

/* Buttons */
.faq-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 1rem 2rem;
  font-size: 0.875rem;
  font-weight: 500;
  border-radius: 12px;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  border: none;
  outline: none;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.faq-btn__icon {
  width: 18px;
  height: 18px;
  margin-right: 0.75rem;
}

.faq-btn--primary {
  background: linear-gradient(135deg, #3b82f6 0%, #d97706 100%);
  color: white;
}

.faq-btn--primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 20px rgba(59, 130, 246, 0.25);
}

.faq-btn--secondary {
  background: #f1f5f9;
  color: #475569;
}

.faq-btn--secondary:hover {
  background: #e2e8f0;
  color: #334155;
  transform: translateY(-1px);
}

.faq-btn--outline {
  background: transparent;
  color: #3b82f6;
  border: 2px solid #3b82f6;
}

.faq-btn--outline:hover {
  background: linear-gradient(135deg, #3b82f6 0%, #d97706 100%);
  color: white;
  border-color: transparent;
  transform: translateY(-1px);
}

/* Error */
.faq-error {
  text-align: center;
  padding: 4rem 2rem;
  color: #dc2626;
  font-size: 1.125rem;
  font-weight: 500;
}

/* ========================================
   📱 RESPONSIVE BREAKPOINTS
   ======================================== */

/* Large Desktop */
@media (min-width: 1200px) {
  .faq-content-box {
    padding: 4rem;
  }

  .faq-item__answer {
    padding: 2.5rem;
  }
}

/* Tablet */
@media (max-width: 968px) {
  .faq-header-container {
    flex-direction: column;
    gap: 2rem;
  }

  .faq-header-left,
  .faq-header-right {
    max-width: 100%;
  }

  .faq-header-right {
    justify-content: center;
  }

  .faq-hero {
    height: 320px;
  }

  .faq-hero__title {
    font-size: 2.5rem;
  }

  .faq-hero__subtitle {
    font-size: 1.125rem;
  }

  .faq-section {
    padding: 60px 0;
  }

  .faq-head__title {
    font-size: 2.2rem;
    text-align: center;
  }

  .faq-head__rule {
    justify-content: center;
  }

  .faq-content-box {
    padding: 2rem;
  }

  .faq-stats {
    gap: 3rem;
    margin-bottom: 2rem;
  }

  .faq-item__header {
    padding: 1.5rem;
  }

  .faq-item__title {
    font-size: 1.125rem;
  }

  .faq-item__answer {
    padding: 1.5rem;
  }

  .faq-actions {
    flex-direction: column;
    align-items: center;
  }
}

/* Mobile */
@media (max-width: 580px) {
  .faq-container {
    padding: 0 15px;
  }

  .faq-hero {
    height: 280px;
  }

  .faq-hero__title {
    font-size: 2rem;
  }

  .faq-hero__subtitle {
    font-size: 1rem;
  }

  .faq-section {
    padding: 40px 0;
  }

  .faq-head__title {
    font-size: 1.75rem;
  }

  .faq-search__input {
    padding: 16px 50px 16px 50px;
    font-size: 15px;
  }

  .faq-content-box {
    padding: 1.5rem;
    border-radius: 16px;
  }

  .faq-stats {
    flex-direction: column;
    gap: 1.5rem;
    text-align: center;
  }

  .faq-item__header {
    padding: 1.25rem;
  }

  .faq-item__number {
    width: 32px;
    height: 32px;
    font-size: 0.75rem;
    margin-right: 1rem;
  }

  .faq-item__title {
    font-size: 1rem;
    line-height: 1.3;
  }

  .faq-item__answer {
    padding: 1.25rem;
    font-size: 0.95rem;
  }

  .faq-btn {
    width: 100%;
    max-width: 300px;
    padding: 1rem 1.5rem;
  }
}

/* ========================================
   Halaman Webinar
   ======================================== 

*/
/* ========================================
   Enhanced Webinar Page 
   ======================================== */
   :root {
    --wbx-ink: #0f172a;
    --wbx-muted: #64748b;
    --wbx-ring: #e2e8f0;
    --wbx-bg: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    --wbx-card: #ffffff;
    --wbx-blue: #2563eb;
    --wbx-amber: #f59e0b;
    --wbx-blue-light: #3b82f6;
    --wbx-amber-light: #fbbf24;
    --wbx-blue-dark: #1e40af;
    --wbx-amber-dark: #d97706;
    --wbx-shadow-sm: 0 2px 8px rgba(15, 23, 42, 0.04);
    --wbx-shadow: 0 8px 24px rgba(15, 23, 42, 0.08),
      0 2px 6px rgba(15, 23, 42, 0.03);
    --wbx-shadow-lg: 0 20px 40px rgba(15, 23, 42, 0.12),
      0 8px 16px rgba(15, 23, 42, 0.06);
    --wbx-gradient-primary: linear-gradient(135deg, #2563eb 0%, #f59e0b 100%);
    --wbx-gradient-accent: linear-gradient(135deg, #3b82f6 0%, #fbbf24 100%);
    --wbx-gradient-warm: linear-gradient(135deg, #f59e0b 0%, #fbbf24 100%);
    --wbx-gradient-cool: linear-gradient(135deg, #2563eb 0%, #1e40af 100%);
  }
  
  /* HERO - Enhanced with animated gradient overlay */
  .wbx-hero {
    position: relative;
    height: 420px;
    background-size: cover;
    background-position: center;
    overflow: hidden;
  }
  .wbx-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
      135deg,
      rgba(37, 99, 235, 0.7) 0%,
      rgba(245, 158, 11, 0.6) 50%,
      rgba(59, 130, 246, 0.7) 100%
    );
    animation: gradientShift 8s ease infinite;
  }
  .wbx-hero__overlay {
    position: absolute;
    inset: 0;
    background: radial-gradient(
        circle at 30% 50%,
        rgba(37, 99, 235, 0.3) 0%,
        transparent 60%
      ),
      radial-gradient(
        circle at 70% 50%,
        rgba(245, 158, 11, 0.3) 0%,
        transparent 60%
      );
    backdrop-filter: blur(2px);
  }
  .wbx-hero__row {
    position: relative;
    height: 100%;
    z-index: 2;
  }
  .wbx-hero__title {
    color: #fff;
    font-weight: 900;
    letter-spacing: 0.5px;
    font-size: clamp(28px, 2.3rem + 0.3vw, 48px);
    text-shadow: 0 4px 20px rgba(0, 0, 0, 0.3), 0 2px 8px rgba(0, 0, 0, 0.2);
    animation: fadeInUp 0.8s ease-out;
  }
  .wbx-hero__subtitle {
    color: rgba(255, 255, 255, 0.95);
    font-size: 1.1rem;
    margin-top: 0.7rem;
    font-weight: 600;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
    animation: fadeInUp 0.8s ease-out 0.2s both;
  }
  
  @keyframes gradientShift {
    0%,
    100% {
      filter: hue-rotate(0deg);
    }
    50% {
      filter: hue-rotate(10deg);
    }
  }
  
  @keyframes fadeInUp {
    from {
      opacity: 0;
      transform: translateY(30px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  
  /* WRAP & HEAD - Enhanced background */
  .wbx-wrap {
    background: var(--wbx-bg);
    padding: clamp(40px, 5vw, 64px) 0;
    position: relative;
  }
  .wbx-wrap::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 200px;
    background: radial-gradient(
      ellipse at top,
      rgba(37, 99, 235, 0.05) 0%,
      transparent 70%
    );
    pointer-events: none;
  }
  .wbx-container {
    width: min(1160px, 92%);
    margin-inline: auto;
    position: relative;
  }
  .wbx-head {
    text-align: center;
    margin-bottom: 20px;
  }
  .wbx-head__title {
    font-weight: 900;
    background: linear-gradient(135deg, #2563eb 0%, #f59e0b 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-size: clamp(22px, 1.6rem + 0.4vw, 32px);
    letter-spacing: -0.5px;
  }
  .wbx-head__rule {
    display: flex;
    justify-content: center;
    gap: 0.7rem;
    margin-top: 10px;
  }
  .wbx-head__rule span {
    height: 4px;
    width: 45px;
    border-radius: 6px;
    background: linear-gradient(90deg, #2563eb 0%, #f59e0b 50%, #fbbf24 100%);
    animation: ruleExpand 0.6s ease-out both;
  }
  .wbx-head__rule span:first-child {
    animation-delay: 0.1s;
  }
  .wbx-head__rule span:last-child {
    animation-delay: 0.2s;
  }
  @keyframes ruleExpand {
    from {
      width: 0;
      opacity: 0;
    }
    to {
      width: 45px;
      opacity: 1;
    }
  }
  .wbx-head__desc {
    color: var(--wbx-muted);
    margin-top: 0.7rem;
    font-size: 1.05rem;
    font-weight: 500;
  }
  
  /* TOOLBAR - Enhanced button */
  .wbx-toolbar {
    display: flex;
    justify-content: flex-end;
    margin: 16px 0 10px;
  }
  .wbx-btn {
    border: 2px solid transparent;
    background: #fff;
    padding: 0.7rem 1.4rem;
    border-radius: 14px;
    font-weight: 800;
    cursor: pointer;
    font-size: 0.95rem;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    box-shadow: var(--wbx-shadow-sm);
  }
  .wbx-btn::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: linear-gradient(135deg, #3b82f6 0%, #fbbf24 100%);
    transform: translate(-50%, -50%);
    transition: width 0.4s ease, height 0.4s ease;
    z-index: 0;
  }
  .wbx-btn:hover::before {
    width: 300px;
    height: 300px;
  }
  .wbx-btn:hover {
    transform: translateY(-2px);
    box-shadow: var(--wbx-shadow);
    border-color: #2563eb;
    color: #fff;
  }
  .wbx-btn span,
  .wbx-btn {
    position: relative;
    z-index: 1;
  }
  .wbx-btn--ghost {
    background: linear-gradient(#fff, #fff) padding-box,
      linear-gradient(135deg, #2563eb, #f59e0b) border-box;
    border: 2px solid transparent;
  }
  
  /* TABS - Modern pill design */
  .wbx-tabbar {
    display: flex;
    gap: 10px;
    justify-content: center;
    margin: 12px 0 24px;
    padding: 8px;
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    width: fit-content;
    margin-inline: auto;
    box-shadow: var(--wbx-shadow-sm);
    border: 1px solid rgba(255, 255, 255, 0.5);
  }
  .wbx-tab {
    border: none;
    background: transparent;
    padding: 0.6rem 1.5rem;
    border-radius: 16px;
    font-weight: 800;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    color: var(--wbx-muted);
    position: relative;
    font-size: 0.95rem;
  }
  .wbx-tab:hover:not(.wbx-tab--active) {
    background: rgba(37, 99, 235, 0.08);
    color: #2563eb;
  }
  .wbx-tab--active {
    background: linear-gradient(135deg, #2563eb 0%, #f59e0b 100%);
    color: #fff;
    box-shadow: 0 4px 16px rgba(37, 99, 235, 0.3);
    transform: scale(1.02);
  }
  .wbx-tabpanel {
    display: none;
    animation: fadeIn 0.5s ease-out;
  }
  .wbx-tabpanel--active {
    display: block;
  }
  @keyframes fadeIn {
    from {
      opacity: 0;
      transform: translateY(10px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  
  /* GRID - Enhanced layout */
  .wbx-grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 20px;
  }
  @media (min-width: 640px) {
    .wbx-grid {
      gap: 22px;
    }
  }
  @media (min-width: 768px) {
    .wbx-grid {
      gap: 24px;
    }
  }
  @media (min-width: 1024px) {
    .wbx-grid {
      gap: 26px;
    }
  }
  .wbx-grid > .wbx-card {
    grid-column: span 12 / span 12;
  }
  @media (min-width: 768px) {
    .wbx-grid > .wbx-card {
      grid-column: span 6 / span 6;
    }
  }
  @media (min-width: 1024px) {
    .wbx-grid > .wbx-card {
      grid-column: span 4 / span 4;
    }
  }
  
  /* CARD - Premium 3D effect */
  .wbx-card {
    background: var(--wbx-card);
    border: 1px solid var(--wbx-ring);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: var(--wbx-shadow);
    display: flex;
    flex-direction: column;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
  }
  .wbx-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #2563eb 0%, #f59e0b 100%);
    transform: scaleX(0);
    transition: transform 0.4s ease;
  }
  .wbx-card:hover::before {
    transform: scaleX(1);
  }
  .wbx-card:hover {
    transform: translateY(-8px) scale(1.01);
    box-shadow: var(--wbx-shadow-lg);
    border-color: rgba(37, 99, 235, 0.3);
  }
  .wbx-card__thumb {
    display: block;
    aspect-ratio: 16/10;
    overflow: hidden;
    background: linear-gradient(135deg, #dbeafe 0%, #fef3c7 100%);
    position: relative;
  }
  .wbx-card__thumb::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
      135deg,
      rgba(37, 99, 235, 0) 0%,
      rgba(245, 158, 11, 0.15) 100%
    );
    opacity: 0;
    transition: opacity 0.4s ease;
  }
  .wbx-card:hover .wbx-card__thumb::after {
    opacity: 1;
  }
  .wbx-card__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  }
  .wbx-card:hover .wbx-card__thumb img {
    transform: scale(1.08);
  }
  .wbx-card__body {
    padding: 18px 18px 16px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
  }
  .wbx-card__meta {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    color: var(--wbx-muted);
    font-weight: 800;
    font-size: 0.85rem;
  }
  .wbx-meta__date {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
  }
  .wbx-meta__date::before {
    content: "📅";
    font-size: 0.9em;
  }
  .wbx-meta__time::before {
    content: "🕐";
    font-size: 0.9em;
    margin-right: 0.2rem;
  }
  .wbx-meta__dot {
    opacity: 0.5;
  }
  .wbx-card__title {
    margin: 0.5rem 0 0.35rem;
    font-size: 1.1rem;
    line-height: 1.4;
    font-weight: 900;
    letter-spacing: -0.2px;
  }
  .wbx-card__title a {
    color: #111827;
    text-decoration: none;
    background: linear-gradient(135deg, #2563eb, #f59e0b);
    background-size: 0% 2px;
    background-repeat: no-repeat;
    background-position: left bottom;
    transition: background-size 0.3s ease;
    display: inline;
  }
  .wbx-card__title a:hover {
    background-size: 100% 2px;
    color: #2563eb;
  }
  .wbx-card__excerpt {
    color: #374151;
    font-weight: 500;
    margin: 0.35rem 0 0.8rem;
    line-height: 1.6;
    flex-grow: 1;
  }
  .wbx-card__foot {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-top: auto;
    padding-top: 0.5rem;
  }
  .wbx-link {
    font-weight: 800;
    background: linear-gradient(135deg, #2563eb 0%, #f59e0b 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-decoration: none;
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    transition: all 0.3s ease;
  }
  .wbx-link::after {
    content: "→";
    transition: transform 0.3s ease;
  }
  .wbx-link:hover::after {
    transform: translateX(4px);
  }
  .wbx-card--past {
    opacity: 0.85;
  }
  .wbx-card--past:hover {
    opacity: 1;
  }
  
  /* BADGES - Modern floating design */
  .wbx-card__badge {
    position: absolute;
    top: 14px;
    right: 14px;
    background: linear-gradient(135deg, #2563eb 0%, #f59e0b 100%);
    color: #fff;
    padding: 0.35rem 1rem;
    border-radius: 24px;
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 0.3px;
    box-shadow: 0 4px 16px rgba(37, 99, 235, 0.4);
    backdrop-filter: blur(10px);
    z-index: 2;
    animation: badgePulse 2s ease-in-out infinite;
  }
  @keyframes badgePulse {
    0%,
    100% {
      box-shadow: 0 4px 16px rgba(37, 99, 235, 0.4);
    }
    50% {
      box-shadow: 0 6px 24px rgba(37, 99, 235, 0.6);
    }
  }
  .wbx-card__badge--past {
    background: linear-gradient(135deg, #64748b 0%, #475569 100%);
    box-shadow: 0 4px 12px rgba(100, 116, 139, 0.3);
    animation: none;
  }
  .pos-rel {
    position: relative;
  }
  
  /* ACTIONS - Enhanced load more button */
  .wbx-actions {
    display: flex;
    justify-content: center;
    margin-top: 28px;
  }
  .wbx-btn--load {
    background: linear-gradient(135deg, #fff 0%, #f8fafc 100%);
    border: 2px solid transparent;
    background-clip: padding-box;
    position: relative;
    padding: 0.8rem 2rem;
    font-size: 1rem;
    box-shadow: var(--wbx-shadow);
  }
  .wbx-btn--load::before {
    content: "";
    position: absolute;
    inset: 0;
    padding: 2px;
    border-radius: 14px;
    background: linear-gradient(135deg, #2563eb 0%, #f59e0b 100%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
  }
  .wbx-btn--load:hover {
    box-shadow: var(--wbx-shadow-lg);
    transform: translateY(-3px) scale(1.02);
    background: linear-gradient(135deg, #2563eb 0%, #f59e0b 100%);
    color: #fff;
  }
  
  /* EMPTY STATE - Enhanced with icon */
  .wbx-empty {
    text-align: center;
    padding: 5rem 2rem;
    max-width: 540px;
    margin: 2rem auto 4rem;
    background: linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.9) 0%,
      rgba(248, 250, 252, 0.9) 100%
    );
    border-radius: 24px;
    border: 1px solid var(--wbx-ring);
    box-shadow: var(--wbx-shadow);
    backdrop-filter: blur(10px);
  }
  .wbx-empty__icon {
    color: var(--wbx-muted);
    margin-bottom: 2rem;
    animation: float 3s ease-in-out infinite;
  }
  @keyframes float {
    0%,
    100% {
      transform: translateY(0);
    }
    50% {
      transform: translateY(-10px);
    }
  }
  .wbx-empty__icon svg {
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.1));
  }
  .wbx-empty__title {
    font-size: 1.6rem;
    font-weight: 900;
    background: linear-gradient(135deg, var(--wbx-ink) 0%, #2563eb 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 1.2rem;
    line-height: 1.3;
  }
  .wbx-empty__desc {
    color: var(--wbx-muted);
    line-height: 1.7;
    font-weight: 500;
    font-size: 1.05rem;
  }
  
  /* CALENDAR PANEL - Enhanced glassmorphism */
  .wbx-calpanel {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.5);
    backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 60;
    opacity: 0;
    pointer-events: none;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }
  .wbx-calpanel[aria-hidden="false"] {
    opacity: 1;
    pointer-events: auto;
  }
  .wbx-calpanel[aria-hidden="false"] .wbx-calpanel__card {
    transform: scale(1);
    opacity: 1;
  }
  .wbx-calpanel__card {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(20px);
    border-radius: 24px;
    box-shadow: var(--wbx-shadow-lg);
    width: min(560px, 92%);
    padding: 20px;
    border: 1px solid rgba(255, 255, 255, 0.8);
    transform: scale(0.95);
    opacity: 0;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }
  .wbx-calpanel__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
    padding-bottom: 12px;
    border-bottom: 2px solid var(--wbx-ring);
  }
  .wbx-calpanel__title {
    font-weight: 900;
    background: linear-gradient(135deg, #2563eb 0%, #f59e0b 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-size: 1.3rem;
  }
  .wbx-calpanel__close {
    border: 2px solid var(--wbx-ring);
    background: #fff;
    border-radius: 12px;
    width: 36px;
    height: 36px;
    cursor: pointer;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--wbx-muted);
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--wbx-shadow-sm);
  }
  .wbx-calpanel__close:hover {
    background: linear-gradient(135deg, #2563eb 0%, #f59e0b 100%);
    color: #fff;
    border-color: transparent;
    transform: rotate(90deg);
  }
  .wbx-cal {
    background: #fff;
    border: 1px solid var(--wbx-ring);
    border-radius: 20px;
    box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.02);
    padding: 16px;
  }
  .wbx-cal__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--wbx-ring);
  }
  .wbx-cal__title {
    font-weight: 900;
    color: var(--wbx-ink);
    font-size: 1.1rem;
  }
  .wbx-cal__nav {
    border: 2px solid var(--wbx-ring);
    background: linear-gradient(135deg, #fff 0%, #f8fafc 100%);
    border-radius: 10px;
    padding: 0.35rem 0.8rem;
    cursor: pointer;
    font-weight: 800;
    font-size: 1.2rem;
    color: #2563eb;
    transition: all 0.3s ease;
    box-shadow: var(--wbx-shadow-sm);
  }
  .wbx-cal__nav:hover {
    background: linear-gradient(135deg, #2563eb 0%, #f59e0b 100%);
    color: #fff;
    border-color: transparent;
    transform: scale(1.1);
  }
  .wbx-cal__grid {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .wbx-cal__row {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 8px;
  }
  .wbx-cal__row--head span {
    font-size: 0.85rem;
    color: #2563eb;
    font-weight: 900;
    text-align: center;
    padding: 0.3rem 0;
  }
  .wbx-cal__cell {
    border: 1px solid var(--wbx-ring);
    background: linear-gradient(135deg, #fff 0%, #fafbfc 100%);
    border-radius: 12px;
    aspect-ratio: 1/1;
    font-weight: 800;
    color: #374151;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    transition: all 0.3s ease;
    cursor: pointer;
    font-size: 0.9rem;
  }
  .wbx-cal__cell:hover {
    background: linear-gradient(135deg, #3b82f6 0%, #fbbf24 100%);
    color: #fff;
    transform: scale(1.05);
    box-shadow: var(--wbx-shadow-sm);
  }
  .wbx-cal__cell em {
    position: absolute;
    bottom: 4px;
    right: 4px;
    background: linear-gradient(135deg, #2563eb 0%, #f59e0b 100%);
    color: #fff;
    border-radius: 999px;
    font-size: 0.65rem;
    font-style: normal;
    padding: 0.1rem 0.4rem;
    font-weight: 900;
    box-shadow: 0 2px 8px rgba(37, 99, 235, 0.4);
  }
  .wbx-cal__cell--empty {
    visibility: hidden;
  }
  .wbx-cal__cell--has {
    background: linear-gradient(
      135deg,
      rgba(37, 99, 235, 0.1) 0%,
      rgba(245, 158, 11, 0.1) 100%
    );
    border: 2px solid rgba(37, 99, 235, 0.3);
    font-weight: 900;
  }
  .wbx-cal__cell--has:hover {
    border-color: #2563eb;
  }
  
  /* VIDEO SLIDER - Enhanced with glassmorphism */
  .wbx-section {
    margin-top: 48px;
  }
  .wbx-vidslider {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--wbx-ring);
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    box-shadow: var(--wbx-shadow);
    padding: 14px;
  }
  .wbx-vidtrack {
    display: flex;
    gap: 16px;
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform;
  }
  .wbx-vidslide {
    min-width: 340px;
    max-width: 380px;
    flex: 0 0 auto;
    background: #fff;
    border: 1px solid var(--wbx-ring);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: var(--wbx-shadow-sm);
    transition: all 0.3s ease;
  }
  .wbx-vidslide:hover {
    transform: translateY(-4px);
    box-shadow: var(--wbx-shadow);
    border-color: rgba(37, 99, 235, 0.3);
  }
  .wbx-vidframe {
    position: relative;
    aspect-ratio: 16/9;
    background: linear-gradient(135deg, #dbeafe 0%, #fef3c7 100%);
    overflow: hidden;
  }
  .wbx-vidframe iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
  }
  .wbx-vidtitle {
    padding: 12px 14px;
    font-weight: 800;
    color: var(--wbx-ink);
    font-size: 0.95rem;
    line-height: 1.4;
  }
  .wbx-vidnav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    border: 2px solid transparent;
    background: linear-gradient(#fff, #fff) padding-box,
      linear-gradient(135deg, #2563eb, #f59e0b) border-box;
    border-radius: 999px;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: var(--wbx-shadow);
    font-size: 1.5rem;
    font-weight: 800;
    color: #2563eb;
    transition: all 0.3s ease;
    z-index: 3;
  }
  .wbx-vidnav:hover {
    background: linear-gradient(135deg, #2563eb 0%, #f59e0b 100%);
    color: #fff;
    transform: translateY(-50%) scale(1.1);
    box-shadow: var(--wbx-shadow-lg);
  }
  .wbx-vidnav--prev {
    left: 8px;
  }
  .wbx-vidnav--next {
    right: 8px;
  }
  
  /* ========================================
     DETAIL PAGE 
     ======================================== */
  .wbd-hero {
    position: relative;
    height: 420px;
    background-size: cover;
    background-position: center;
    overflow: hidden;
  }
  .wbd-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
      135deg,
      rgba(37, 99, 235, 0.75) 0%,
      rgba(245, 158, 11, 0.7) 50%,
      rgba(59, 130, 246, 0.65) 100%
    );
    animation: gradientShift 8s ease infinite;
  }
  .wbd-hero__overlay {
    position: absolute;
    inset: 0;
    background: radial-gradient(
      circle at 30% 50%,
      rgba(37, 99, 235, 0.3) 0%,
      transparent 60%
    );
    backdrop-filter: blur(2px);
  }
  .wbd-hero__row {
    position: relative;
    height: 100%;
    z-index: 2;
  }
  .wbd-hero__title {
    color: #fff;
    font-weight: 900;
    letter-spacing: 0.5px;
    font-size: clamp(28px, 2.3rem + 0.3vw, 48px);
    text-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    animation: fadeInUp 0.8s ease-out;
  }
  
  /* BREADCRUMB - Enhanced */
  .wbd-bc {
    background: var(--wbx-bg);
    padding: 14px 0;
    border-bottom: 1px solid var(--wbx-ring);
  }
  .wbd-bc__list {
    width: min(1160px, 92%);
    margin: 0 auto;
    display: flex;
    gap: 0.6rem;
    list-style: none;
    padding: 0;
    align-items: center;
  }
  .wbd-bc__item {
    color: var(--wbx-muted);
    font-weight: 800;
    font-size: 0.9rem;
  }
  .wbd-bc__link {
    color: #374151;
    text-decoration: none;
    font-weight: 900;
    transition: all 0.3s ease;
    padding: 0.25rem 0.5rem;
    border-radius: 8px;
  }
  .wbd-bc__link:hover {
    background: rgba(37, 99, 235, 0.1);
    color: #2563eb;
  }
  .wbd-bc__item:not(.wbd-bc__item--current)::after {
    content: "→";
    margin: 0 0.3rem;
    color: #cbd5e1;
    font-weight: 700;
  }
  
  /* DETAIL WRAPPER */
  .wbd-wrap {
    background: var(--wbx-bg);
    padding: clamp(36px, 4vw, 56px) 0;
    position: relative;
  }
  .wbd-wrap::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 200px;
    background: radial-gradient(
      ellipse at top,
      rgba(37, 99, 235, 0.05) 0%,
      transparent 70%
    );
    pointer-events: none;
  }
  .wbd-container {
    width: min(1000px, 92%);
    margin-inline: auto;
    position: relative;
  }
  .wbd-article {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    border: 1px solid var(--wbx-ring);
    border-radius: 24px;
    box-shadow: var(--wbx-shadow-lg);
    padding: clamp(24px, 3vw, 36px);
    position: relative;
    overflow: hidden;
  }
  .wbd-article::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 5px;
    background: linear-gradient(90deg, #2563eb 0%, #f59e0b 100%);
  }
  .wbd-header {
    text-align: center;
    padding-bottom: 20px;
    border-bottom: 2px solid var(--wbx-ring);
    margin-bottom: 24px;
  }
  .wbd-title {
    font-weight: 900;
    background: linear-gradient(135deg, var(--wbx-ink) 0%, #2563eb 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-size: clamp(22px, 1.7rem + 0.3vw, 32px);
    margin-bottom: 14px;
    line-height: 1.3;
    letter-spacing: -0.5px;
  }
  .wbd-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 14px 24px;
    justify-content: center;
    color: #64748b;
    font-weight: 800;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 0.95rem;
  }
  .wbd-meta li {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 1rem;
    background: linear-gradient(
      135deg,
      rgba(37, 99, 235, 0.08) 0%,
      rgba(245, 158, 11, 0.08) 100%
    );
    border-radius: 12px;
    border: 1px solid rgba(37, 99, 235, 0.15);
  }
  .wbd-meta li strong {
    background: linear-gradient(135deg, #2563eb 0%, #f59e0b 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: 900;
  }
  
  /* REGISTER BUTTON - Enhanced CTA */
  .wbx-btn--register {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: linear-gradient(135deg, #2563eb 0%, #f59e0b 100%);
    color: #fff;
    padding: 0.9rem 2.2rem;
    border-radius: 16px;
    font-weight: 900;
    font-size: 1.05rem;
    text-decoration: none;
    box-shadow: 0 8px 24px rgba(37, 99, 235, 0.35);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    border: 2px solid transparent;
    letter-spacing: 0.3px;
  }
  .wbx-btn--register::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.2) 0%,
      transparent 100%
    );
    opacity: 0;
    transition: opacity 0.4s ease;
  }
  .wbx-btn--register:hover::before {
    opacity: 1;
  }
  .wbx-btn--register:hover {
    transform: translateY(-3px) scale(1.03);
    box-shadow: 0 16px 40px rgba(37, 99, 235, 0.5);
    color: #fff;
  }
  .wbx-btn--register::after {
    content: "✨";
    margin-left: 0.3rem;
    transition: transform 0.4s ease;
  }
  .wbx-btn--register:hover::after {
    transform: scale(1.3) rotate(15deg);
  }
  
  /* FIGURE - Enhanced image container */
  .wbd-figure {
    margin: 24px auto 20px;
    width: min(860px, 100%);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: var(--wbx-shadow-lg);
    border: 1px solid var(--wbx-ring);
    position: relative;
  }
  .wbd-figure::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
      135deg,
      rgba(37, 99, 235, 0) 0%,
      rgba(245, 158, 11, 0.05) 100%
    );
    pointer-events: none;
  }
  .wbd-figure img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
    transition: transform 0.6s ease;
  }
  .wbd-figure:hover img {
    transform: scale(1.02);
  }
  
  /* BODY CONTENT - Enhanced typography */
  .wbd-body {
    color: #1e293b;
    font-weight: 500;
    line-height: 1.8;
    margin-top: 20px;
    font-size: 1.05rem;
  }
  .wbd-body p {
    margin-bottom: 1.2rem;
  }
  .wbd-body h1,
  .wbd-body h2,
  .wbd-body h3,
  .wbd-body h4 {
    font-weight: 800;
    color: var(--wbx-ink);
    margin-top: 1.8rem;
    margin-bottom: 0.8rem;
    line-height: 1.3;
  }
  .wbd-body ul,
  .wbd-body ol {
    padding-left: 1.5rem;
    margin-bottom: 1.2rem;
  }
  .wbd-body li {
    margin-bottom: 0.5rem;
  }
  .wbd-body a {
    color: #2563eb;
    font-weight: 700;
    text-decoration: none;
    border-bottom: 2px solid rgba(37, 99, 235, 0.3);
    transition: all 0.3s ease;
  }
  .wbd-body a:hover {
    border-bottom-color: #2563eb;
    color: #f59e0b;
  }
  
  /* UTILITIES */
  .text-center {
    text-align: center;
  }
  .hidden {
    display: none !important;
  }
  
  /* RESPONSIVE */
  @media (max-width: 768px) {
    .wbx-grid > .wbx-card {
      grid-column: span 12 / span 12;
    }
    .wbx-vidslide {
      min-width: 300px;
      max-width: 340px;
    }
    .wbx-hero__title,
    .wbd-hero__title {
      font-size: clamp(24px, 5vw, 32px);
    }
    .wbx-tabbar {
      padding: 6px;
      gap: 6px;
    }
    .wbx-tab {
      padding: 0.5rem 1rem;
      font-size: 0.85rem;
    }
    .wbd-meta {
      flex-direction: column;
      align-items: center;
    }
    .wbx-btn--register {
      padding: 0.75rem 1.5rem;
      font-size: 0.95rem;
    }
  }
  
  @media (max-width: 480px) {
    .wbx-hero,
    .wbd-hero {
      height: 320px;
    }
    .wbx-calpanel__card {
      padding: 16px;
    }
    .wbx-cal__nav {
      padding: 0.25rem 0.6rem;
    }
    .wbx-vidnav {
      width: 36px;
      height: 36px;
      font-size: 1.2rem;
    }
  }

 /* ======= META LAST UPDATE + STATUS ======= */
 .ma-meta-group {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.ma-meta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: #64748b;
}

.ma-meta-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 2px;
  padding: 2px 10px;
  border-radius: 999px;
  background: rgba(250, 204, 21, 0.10);
  color: #b45309;
  font-size: 11px;
  font-weight: 600;
}

.ma-meta-dot {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: #facc15;
  box-shadow: 0 0 0 0 rgba(250, 204, 21, 0.7);
  display: inline-block;
  animation: maMetaPulse 1.3s ease-out infinite;
}

@keyframes maMetaPulse {
  0% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(250, 204, 21, 0.7);
  }
  70% {
    transform: scale(1.4);
    box-shadow: 0 0 0 6px rgba(250, 204, 21, 0);
  }
  100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(250, 204, 21, 0);
  }
}