@keyframes shake {
    0%, 100% { transform: translateX(0); }
    10%, 30%, 50%, 70%, 90% { transform: translateX(-8px); }
    20%, 40%, 60%, 80%       { transform: translateX(8px); }
  }
  /* Hanya satu kali getar selama 0.9s */
  .shake {
    animation: shake 0.9s ease-in-out;
  }
  .nav-pills .nav-link.text-white:hover {
    color: orange !important;
  }
  /* background dinamis */
  .tournaments-section {
      background-image: url("/assets/img/background.jpg");
      -webkit-background-size: cover;
      -moz-background-size: cover;
      -o-background-size: cover;
      background-size: cover;
      background-attachment: fixed;
      background-position: center;
  }

  .btn-uiverse {
    --duration: 7s;
    --easing: linear;
    --c-color-1: rgba(255, 163, 26, 0.7);
    --c-color-2: #1a23ff;
    --c-color-3: #e21bda;
    --c-color-4: rgba(255, 232, 26, 0.7);
    --c-shadow: rgba(255, 223, 87, 0.5);
    --c-shadow-inset-top: rgba(255, 223, 52, 0.9);
    --c-shadow-inset-bottom: rgba(255, 250, 215, 0.8);
    --c-radial-inner: #ffd215;
    --c-radial-outer: #07f4ff;
    --c-color: #000000;
    -webkit-tap-highlight-color: transparent;
    -webkit-appearance: none;
    outline: none;
    position: relative;
    cursor: pointer;
    border: none;
    display: table;
    border-radius: 15px;
    padding: 0;
    margin: 0;
    text-align: center;
    font-weight: 600;
    font-size: 16px;
    letter-spacing: 0.02em;
    line-height: 1.5;
    color: var(--c-color);
    background: radial-gradient(circle, var(--c-radial-inner), var(--c-radial-outer) 80%);
    box-shadow: 0 0 14px var(--c-shadow);
    box-shadow: 0 0 20px #1a1a1a;
  }
  
  .btn-uiverse::before {
    content: "";
    pointer-events: none;
    position: absolute;
    z-index: 3;
    inset: 0;
    border-radius: 15px;
    box-shadow:
      inset 0 3px 12px var(--c-shadow-inset-top),
      inset 0 -3px 4px var(--c-shadow-inset-bottom);
  }
  
  .btn-uiverse .btn-uiverse-wrapper {
    -webkit-mask-image: -webkit-radial-gradient(white, black);
    overflow: hidden;
    border-radius: 15px;
    min-width: 132px;
    padding: 12px 60px;
  }
  
  .btn-uiverse .btn-uiverse-wrapper span {
    display: inline-block;
    position: relative;
    z-index: 1;
  }
  
  .btn-uiverse:hover {
    --duration: 1400ms;
  }
  
  .btn-uiverse .btn-uiverse-wrapper .btn-uiverse-circle {
    position: absolute;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    filter: blur(var(--blur, 8px));
    background: var(--background, transparent);
    transform: translate(var(--x, 0), var(--y, 0)) translateZ(0);
    animation: var(--animation, none) var(--duration) var(--easing) infinite;
  }
  
  /* warna dan blur */
  .btn-uiverse .btn-uiverse-wrapper .btn-uiverse-circle.btn-uiverse-circle-1,
  .btn-uiverse .btn-uiverse-wrapper .btn-uiverse-circle.btn-uiverse-circle-9,
  .btn-uiverse .btn-uiverse-wrapper .btn-uiverse-circle.btn-uiverse-circle-10 {
    --background: var(--c-color-4);
  }
  .btn-uiverse .btn-uiverse-wrapper .btn-uiverse-circle.btn-uiverse-circle-3,
  .btn-uiverse .btn-uiverse-wrapper .btn-uiverse-circle.btn-uiverse-circle-4 {
    --background: var(--c-color-2);
    --blur: 14px;
  }
  .btn-uiverse .btn-uiverse-wrapper .btn-uiverse-circle.btn-uiverse-circle-5,
  .btn-uiverse .btn-uiverse-wrapper .btn-uiverse-circle.btn-uiverse-circle-6 {
    --background: var(--c-color-3);
    --blur: 16px;
  }
  .btn-uiverse .btn-uiverse-wrapper .btn-uiverse-circle.btn-uiverse-circle-2,
  .btn-uiverse .btn-uiverse-wrapper .btn-uiverse-circle.btn-uiverse-circle-7,
  .btn-uiverse .btn-uiverse-wrapper .btn-uiverse-circle.btn-uiverse-circle-8,
  .btn-uiverse .btn-uiverse-wrapper .btn-uiverse-circle.btn-uiverse-circle-11,
  .btn-uiverse .btn-uiverse-wrapper .btn-uiverse-circle.btn-uiverse-circle-12 {
    --background: var(--c-color-1);
    --blur: 12px;
  }
  
  /* posisi dan animasi tiap circle */
  .btn-uiverse .btn-uiverse-wrapper .btn-uiverse-circle.btn-uiverse-circle-1 {
    --x: 0;  --y: -40px; --animation: btn-uiverse-circle-1;
  }
  .btn-uiverse .btn-uiverse-wrapper .btn-uiverse-circle.btn-uiverse-circle-2 {
    --x: 92px; --y: 8px;  --animation: btn-uiverse-circle-2;
  }
  .btn-uiverse .btn-uiverse-wrapper .btn-uiverse-circle.btn-uiverse-circle-3 {
    --x: -12px;--y: -12px;--animation: btn-uiverse-circle-3;
  }
  .btn-uiverse .btn-uiverse-wrapper .btn-uiverse-circle.btn-uiverse-circle-4 {
    --x: 80px; --y: -12px;--animation: btn-uiverse-circle-4;
  }
  .btn-uiverse .btn-uiverse-wrapper .btn-uiverse-circle.btn-uiverse-circle-5 {
    --x: 12px; --y: -4px; --animation: btn-uiverse-circle-5;
  }
  .btn-uiverse .btn-uiverse-wrapper .btn-uiverse-circle.btn-uiverse-circle-6 {
    --x: 56px; --y: 16px; --animation: btn-uiverse-circle-6;
  }
  .btn-uiverse .btn-uiverse-wrapper .btn-uiverse-circle.btn-uiverse-circle-7 {
    --x: 8px;  --y: 28px; --animation: btn-uiverse-circle-7;
  }
  .btn-uiverse .btn-uiverse-wrapper .btn-uiverse-circle.btn-uiverse-circle-8 {
    --x: 28px; --y: -4px; --animation: btn-uiverse-circle-8;
  }
  .btn-uiverse .btn-uiverse-wrapper .btn-uiverse-circle.btn-uiverse-circle-9 {
    --x: 20px; --y: -12px;--animation: btn-uiverse-circle-9;
  }
  .btn-uiverse .btn-uiverse-wrapper .btn-uiverse-circle.btn-uiverse-circle-10 {
    --x: 64px; --y: 16px; --animation: btn-uiverse-circle-10;
  }
  .btn-uiverse .btn-uiverse-wrapper .btn-uiverse-circle.btn-uiverse-circle-11 {
    --x: 4px;  --y: 4px;  --animation: btn-uiverse-circle-11;
  }
  .btn-uiverse .btn-uiverse-wrapper .btn-uiverse-circle.btn-uiverse-circle-12 {
    --blur: 14px;
    --x: 52px; --y: 4px;  --animation: btn-uiverse-circle-12;
  }
  
  /* keyframes dengan prefix baru */
  @keyframes btn-uiverse-circle-1 {
    33% { transform: translate(0px, 16px) translateZ(0); }
    66% { transform: translate(12px, 64px) translateZ(0); }
  }
  @keyframes btn-uiverse-circle-2 {
    33% { transform: translate(80px, -10px) translateZ(0); }
    66% { transform: translate(72px, -48px) translateZ(0); }
  }
  @keyframes btn-uiverse-circle-3 {
    33% { transform: translate(20px, 12px) translateZ(0); }
    66% { transform: translate(12px, 4px) translateZ(0); }
  }
  @keyframes btn-uiverse-circle-4 {
    33% { transform: translate(76px, -12px) translateZ(0); }
    66% { transform: translate(112px, -8px) translateZ(0); }
  }
  @keyframes btn-uiverse-circle-5 {
    33% { transform: translate(84px, 28px) translateZ(0); }
    66% { transform: translate(40px, -32px) translateZ(0); }
  }
  @keyframes btn-uiverse-circle-6 {
    33% { transform: translate(28px, -16px) translateZ(0); }
    66% { transform: translate(76px, -56px) translateZ(0); }
  }
  @keyframes btn-uiverse-circle-7 {
    33% { transform: translate(8px, 28px) translateZ(0); }
    66% { transform: translate(20px, -60px) translateZ(0); }
  }
  @keyframes btn-uiverse-circle-8 {
    33% { transform: translate(32px, -4px) translateZ(0); }
    66% { transform: translate(56px, -20px) translateZ(0); }
  }
  @keyframes btn-uiverse-circle-9 {
    33% { transform: translate(20px, -12px) translateZ(0); }
    66% { transform: translate(80px, -8px) translateZ(0); }
  }
  @keyframes btn-uiverse-circle-10 {
    33% { transform: translate(68px, 20px) translateZ(0); }
    66% { transform: translate(100px, 28px) translateZ(0); }
  }
  @keyframes btn-uiverse-circle-11 {
    33% { transform: translate(4px, 4px) translateZ(0); }
    66% { transform: translate(68px, 20px) translateZ(0); }
  }
  @keyframes btn-uiverse-circle-12 {
    33% { transform: translate(56px, 0px) translateZ(0); }
    66% { transform: translate(60px, -32px) translateZ(0); }
  }
    /* Container pagination agar bisa scroll horizontal kalau kebanyakan item */
    .pagination-container {
      overflow-x: auto;
      padding: 1rem 0;
    }
    .pagination-container::-webkit-scrollbar {
      height: 8px;
    }
    .pagination-container::-webkit-scrollbar-thumb {
      background: rgba(255,255,255,0.2);
      border-radius: 4px;
    }
    .pagination {
      white-space: nowrap;
      display: inline-flex;
      padding-left: 0;
      margin: 0;
    }
    .pagination .page-item {
      margin: 0 4px;
    }
    .pagination .page-link {
      min-width: 44px;
      text-align: center;
      color: #fff;
      background: #333;
      border: 1px solid orange;
      border-radius: 5px;
    }
    .pagination .page-item.active .page-link {
      background: orange;
      color: #000;
      border-color: orange;
    }
    .pagination .page-item.disabled .page-link {
      background: #222;
      color: #777;
      border-color: #444;
    }
    .pagination .page-link:hover {
      background: #555;
    }
    /* agar pagination wrap dan center */
  .pagination-container {
    overflow-x: auto;
    text-align: center;
  }
  .pagination {
    display: inline-flex;
    flex-wrap: wrap;
    justify-content: center;
    padding-left: 0;
    margin: 0;
  }
  
  /* Sembunyikan nomor yang tidak penting di mobile */
  @media (max-width: 576px) {
    /* hanya tampilkan Prev, current, Next */
    .pagination .page-item {
      display: none;
    }
    .pagination .page-item.prev,
    .pagination .page-item.next,
    .pagination .page-item.active {
      display: inline-flex;
    }
  }
  header.fixed-top {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 999;
  }
  
  .latest-news-section {
    /* beri padding-top dinamis */
    padding-top: calc(env(safe-area-inset-top) + 20px);
    /* jika kamu masih ingin margin, ubah margin-top jadi 0 */
    margin-top: 0;
  }
  
  .running {
    overflow-x: auto; /* biar teks gak kepotong */
    /* hilangkan overflow-y jika ada */
  }
  .spadi {
      padding-top: 1px;
      padding-bottom: 0px;
  }