/* =========================================================
   KANGJITU UI — Neo Neon Edition (Enhanced)
   - Table Pola: Desain lebih futuristik dengan efek neon
   - Percent Bar: Animasi lebih dinamis dengan glow effect
   - Nav Bottom: Tombol dengan efek aurora dan animasi halus
   - RTP Images: Perbaikan tampilan gambar RTP
   ========================================================= */

/* ================== FONT IMPORT ================== */
@import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;600;700&family=Chakra+Petch:wght@500;700&display=swap");

/* ================== VARIABLES ================== */
:root {
  /* Font */
  --font-base: "Space Grotesk", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  --font-display: "Chakra Petch", var(--font-base);

  /* Gaming Font Sizes */
  --game-xs: 0.6rem;
  --game-sm: 0.85rem;
  --game-md: 1.1rem;
  --game-lg: 1.5rem;
  --game-xl: 2.2rem;
  --game-xxl: 3rem;

  /* Color */
  --bg-color: #131313;
  --text-first: #fafafa;
  --text-second: #0a0a0a;
  --first-color: #008dc4;
  --second-color: #004a75;
  --third-color: #0284fd;
  --fourth-color: #014a86;
  --fifth-color: #027bcc;
  --g1: #006cc4;
  --g2: #004675;

  /* Neon UI */
  --neon-blue: #00f3ff;
  --neon-pink: #ff00f7;
  --neon-green: #1eff00;
  --neon-purple: #8a2be2;
  --cyber-yellow: #f9f002;
  --matrix-green: #00ff41;
  --dark-ui: #0a0a15;
  --ui-glow: rgba(0, 243, 255, 0.2);
  --ui-dark: #0c0c1a;

  /* Buttons/Track */
  --btn-radius: 12px;
  --btn-glow: rgba(0, 243, 255, 0.45);
  --track-bg: #0c1020;
  --track-border: rgba(255, 255, 255, 0.08);
  --track-gloss: rgba(255, 255, 255, 0.06);

  /* Percent states */
  --pct-great-1: #1eff00;
  --pct-great-2: #22c55e;
  --pct-good-1: #ffd54a;
  --pct-good-2: #ff9f0a;
  --pct-bad-1: #ff1d4d;
  --pct-bad-2: #dc2626;
}

/* ================== RTP CARD & IMAGE STYLES ================== */
.place-img-rtp {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  width: 100%;
  aspect-ratio: 1/1;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
  background: linear-gradient(145deg, #0a0a1a, #15152b);
  border: 1px solid rgba(0, 200, 255, 0.2);
}

.place-img-rtp:hover {
  transform: translateY(-8px) scale(1.03);
  box-shadow: 0 12px 30px rgba(0, 180, 255, 0.35),
              0 0 25px rgba(0, 200, 255, 0.25);
  border-color: rgba(0, 243, 255, 0.4);
}

.rtp-card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 12px;
  transition: all 0.4s ease;
  position: relative;
}

.place-img-rtp:hover .rtp-card-img {
  transform: scale(1.08);
  filter: brightness(1.1) contrast(1.05);
}

/* Play Button Styling */
.btn-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.9);
  padding: 12px 24px;
  background: linear-gradient(135deg, rgba(0, 143, 255, 0.9), rgba(0, 200, 255, 0.9));
  color: white;
  border: none;
  border-radius: 30px;
  font-weight: bold;
  font-size: 1rem;
  cursor: pointer;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  z-index: 3;
  opacity: 0;
  backdrop-filter: blur(5px);
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.4),
              0 0 15px rgba(0, 243, 255, 0.5);
  font-family: var(--font-display);
  letter-spacing: 1px;
  text-transform: uppercase;
}

.btn-play:hover {
  background: linear-gradient(135deg, rgba(0, 180, 255, 0.95), rgba(0, 220, 255, 0.95));
  transform: translate(-50%, -50%) scale(1);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.5),
              0 0 20px rgba(0, 243, 255, 0.7);
}

.place-img-rtp:hover .btn-play {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

/* Hot Game Badge */
.hot-game {
  position: absolute;
  top: 10px;
  left: 10px;
  width: 40px;
  height: 40px;
  background-size: contain;
  background-repeat: no-repeat;
  z-index: 3;
  filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.7));
  transition: all 0.3s ease;
}

.place-img-rtp:hover .hot-game {
  transform: scale(1.1) rotate(5deg);
}

/* Overlay effect on hover */
.place-img-rtp::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(to bottom, 
              transparent 0%, 
              rgba(0, 0, 0, 0.1) 30%,
              rgba(0, 0, 0, 0.4) 100%);
  opacity: 0;
  transition: opacity 0.4s ease;
  border-radius: 12px;
  z-index: 1;
}

.place-img-rtp:hover::after {
  opacity: 1;
}

/* Responsive Adjustments */
@media (max-width: 768px) {
  .place-img-rtp {
    aspect-ratio: 3/4;
  }
  
  .btn-play {
    padding: 10px 20px;
    font-size: 0.9rem;
  }
  
  .hot-game {
    width: 30px;
    height: 30px;
  }
}

@media (max-width: 480px) {
  .btn-play {
    padding: 8px 16px;
    font-size: 0.8rem;
  }
  
  .place-img-rtp:hover {
    transform: translateY(-5px) scale(1.02);
  }
}

/* ================== TABLE POLA — Futuristic Neon Design ================== */
.table-pola {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0 2px;
  font-size: clamp(10px, 2.5vw, 12px);
  text-align: center;
  table-layout: fixed;
  background: rgba(5, 5, 20, 0.6);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 0 15px rgba(0, 255, 255, 0.2), 
              inset 0 0 15px rgba(0, 150, 255, 0.1);
  margin: 0 auto 1.5rem;
  backdrop-filter: blur(5px);
  position: relative;
}

.table-pola::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, 
    transparent, 
    var(--neon-blue), 
    transparent);
  animation: scanline 3s linear infinite;
  z-index: 2;
}

@keyframes scanline {
  0% { transform: translateY(0); }
  100% { transform: translateY(100vh); }
}

.table-pola th,
.table-pola td {
  padding: 10px 6px;
  font-weight: 600;
  text-transform: uppercase;
  transition: all 0.3s ease;
  color: var(--neon-blue);
  text-shadow: 0 0 5px rgba(0, 243, 255, 0.8);
  border: 1px solid rgba(0, 200, 255, 0.25);
  word-break: break-word;
  white-space: normal;
  line-height: 1.3;
  position: relative;
  overflow: hidden;
}

/* Header dengan efek glassmorphism dan glow */
.table-pola th {
  background: linear-gradient(135deg, 
    rgba(0, 120, 255, 0.4), 
    rgba(0, 220, 255, 0.3));
  backdrop-filter: blur(5px);
  padding: 12px 6px;
  font-family: var(--font-display);
  letter-spacing: 1px;
  position: relative;
}

.table-pola th::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 10%;
  width: 80%;
  height: 1px;
  background: linear-gradient(90deg, 
    transparent, 
    var(--neon-blue), 
    transparent);
}

/* Body cell dengan efek cyberpunk */
.table-pola td {
  background: rgba(15, 15, 35, 0.7);
  backdrop-filter: blur(3px);
  transition: all 0.3s ease;
}

.table-pola td:hover {
  background: rgba(0, 255, 255, 0.15);
  transform: scale(1.03);
  box-shadow: 0 0 10px rgba(0, 243, 255, 0.3);
  z-index: 1;
}

/* Zebra stripe dengan variasi warna */
.table-pola tr:nth-child(even) td {
  background: rgba(10, 10, 30, 0.6);
}

/* Efek khusus untuk kolom pertama */
.table-pola td:first-child {
  background: rgba(0, 100, 180, 0.4);
  font-weight: 700;
  min-width: 60px;
}

/* Ikon centang dan silang dengan efek neon */
.table-pola .lni {
  font-size: 12px;
  vertical-align: middle;
}

.table-pola .text-success {
  color: var(--neon-green) !important;
  text-shadow: 0 0 8px rgba(30, 255, 0, 0.7);
}

.table-pola .text-danger {
  color: var(--neon-pink) !important;
  text-shadow: 0 0 8px rgba(255, 0, 247, 0.7);
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .table-pola {
    font-size: clamp(9px, 2.2vw, 11px);
    border-radius: 8px;
  }
  
  .table-pola th,
  .table-pola td {
    padding: 8px 4px;
  }
  
  .table-pola th {
    padding: 10px 4px;
  }
}

@media (max-width: 480px) {
  .table-pola {
    font-size: clamp(8px, 2vw, 10px);
  }
  
  .table-pola th,
  .table-pola td {
    padding: 6px 3px;
  }
  
  .table-pola td:first-child {
    min-width: 50px;
  }
}

/* ================== PERCENT BAR — Futuristic Enhanced ================== */
.percent {
  height: 26px;
  width: 100%;
  margin: 15px auto;
  position: relative;
  border-radius: 15px;
  background: linear-gradient(180deg, 
              rgba(255, 255, 255, 0.05), 
              rgba(255, 255, 255, 0)), 
            linear-gradient(0deg, #1a1a2e, #0f0f23);
  border: 1px solid rgba(255, 255, 255, 0.15);
  box-shadow: inset 0 2px 5px rgba(255, 255, 255, 0.1), 
              inset 0 -2px 4px rgba(0, 0, 0, 0.7),
              0 0 10px rgba(0, 243, 255, 0.2);
  overflow: hidden;
}

/* Overlay efek grid digital */
.percent::before {
  content: "";
  position: absolute;
  inset: 0;
  background: 
    repeating-linear-gradient(90deg, 
      rgba(255, 255, 255, 0.03) 0px 1px, 
      transparent 1px 4px),
    repeating-linear-gradient(0deg, 
      rgba(255, 255, 255, 0.03) 0px 1px, 
      transparent 1px 8px);
  pointer-events: none;
  z-index: 1;
}

/* Glossy effect */
.percent::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 50%;
  background: linear-gradient(180deg, 
              rgba(255, 255, 255, 0.3), 
              transparent);
  pointer-events: none;
  z-index: 2;
  border-radius: inherit;
}

/* Label percent di tengah */
.percent p {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
  font-weight: 800;
  font-size: 14px;
  font-family: var(--font-display);
  color: #fff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8),
               0 0 10px currentColor;
  z-index: 4;
  letter-spacing: 0.5px;
}

/* Bar animasi */
.percent-bar {
  height: 100%;
  width: 0;
  border-radius: inherit;
  position: relative;
  z-index: 3;
  background-size: 200% 100%;
  animation: pctMove 1.8s linear infinite;
  box-shadow: inset 0 0 12px rgba(255, 255, 255, 0.25), 
              0 0 25px currentColor;
  transition: width 0.8s cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* Shine sweep efek */
.percent-bar::after {
  content: "";
  position: absolute;
  top: 0;
  left: -50%;
  width: 50%;
  height: 100%;
  background: linear-gradient(90deg, 
              transparent, 
              rgba(255, 255, 255, 0.4), 
              transparent);
  animation: shineSweep 2.5s ease-in-out infinite;
  z-index: 4;
}

/* Gradient dan glow per status */
.percent-bar.great {
  background: linear-gradient(90deg, 
              #00ff8c, #00ffb3, #00ff8c);
  color: var(--neon-green);
  box-shadow: inset 0 0 15px rgba(0, 255, 140, 0.4), 
              0 0 30px rgba(0, 255, 140, 0.5);
}

.percent-bar.good {
  background: linear-gradient(90deg, 
              #ffb347, #ffcc33, #ffb347);
  color: #ffcc33;
  box-shadow: inset 0 0 12px rgba(255, 179, 71, 0.35), 
              0 0 25px rgba(255, 179, 71, 0.45);
}

.percent-bar.bad {
  background: linear-gradient(90deg, 
              #ff5e7d, #ff3b5c, #ff5e7d);
  color: #ff3b5c;
  box-shadow: inset 0 0 12px rgba(255, 94, 125, 0.35), 
              0 0 25px rgba(255, 94, 125, 0.45);
}

/* Border glow mengikuti status */
.percent:has(.percent-bar.great) {
  border-color: rgba(0, 255, 140, 0.4);
  box-shadow: inset 0 2px 5px rgba(255, 255, 255, 0.1), 
              inset 0 -2px 4px rgba(0, 0, 0, 0.7),
              0 0 15px rgba(0, 255, 140, 0.3);
}

.percent:has(.percent-bar.good) {
  border-color: rgba(255, 179, 71, 0.4);
  box-shadow: inset 0 2px 5px rgba(255, 255, 255, 0.1), 
              inset 0 -2px 4px rgba(0, 0, 0, 0.7),
              0 0 15px rgba(255, 179, 71, 0.3);
}

.percent:has(.percent-bar.bad) {
  border-color: rgba(255, 94, 125, 0.4);
  box-shadow: inset 0 2px 5px rgba(255, 255, 255, 0.1), 
              inset 0 -2px 4px rgba(0, 0, 0, 0.7),
              0 0 15px rgba(255, 94, 125, 0.3);
}

/* Animations */
@keyframes pctMove {
  0% {
    background-position: 0% 50%;
  }
  100% {
    background-position: 200% 50%;
  }
}

@keyframes shineSweep {
  0% {
    left: -50%;
  }
  70% {
    left: 150%;
  }
  100% {
    left: 150%;
  }
}

/* Responsive */
@media (max-width: 768px) {
  .percent {
    height: 22px;
    margin: 12px auto;
  }
  
  .percent p {
    font-size: 12px;
  }
}

@media (max-width: 480px) {
  .percent {
    height: 20px;
  }
  
  .percent p {
    font-size: 11px;
  }
}

/* ================== NAV BOTTOM — Enhanced Aurora Effect ================== */
.nav-bottom {
  display: flex;
  justify-content: space-around;
  align-items: center;
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 96%;
  max-width: 500px;
  background: rgba(10, 15, 35, 0.85);
  backdrop-filter: blur(12px) saturate(180%);
  border: 1px solid rgba(0, 200, 255, 0.3);
  border-radius: 25px;
  padding: 0.8rem 0.5rem;
  box-shadow: 0 -5px 25px rgba(0, 0, 0, 0.3),
              0 0 20px rgba(0, 200, 255, 0.25),
              inset 0 1px 0 rgba(255, 255, 255, 0.1);
  z-index: 1000;
  margin-bottom: 10px;
}

/* Item nav dengan efek aurora yang ditingkatkan */
.item-nav-bottom {
  flex: 1;
  margin: 0 5px;
  padding: 0.8rem 0.4rem;
  text-align: center;
  font-weight: 700;
  font-size: 0.9rem;
  border-radius: 18px;
  color: #e0f0ff;
  position: relative;
  transition: all 0.4s cubic-bezier(0.22, 0.61, 0.36, 1);
  cursor: pointer;
  z-index: 1;
  overflow: hidden;
  font-family: var(--font-display);
  letter-spacing: 0.5px;
  text-shadow: 0 0 5px rgba(224, 240, 255, 0.6);
}

/* Aurora hover sweep yang lebih dinamis */
.item-nav-bottom::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(135deg, 
    #6a0dad, #4b0082, #1e90ff, #00cfff, #6a0dad);
  background-size: 400% 400%;
  opacity: 0;
  transition: opacity 0.5s ease;
  z-index: -1;
  animation: sweepAurora 6s ease-in-out infinite alternate;
}

.item-nav-bottom::after {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: inherit;
  background: rgba(15, 20, 40, 0.9);
  z-index: -2;
  transition: all 0.4s ease;
}

.item-nav-bottom:hover::before {
  opacity: 1;
}

.item-nav-bottom:hover {
  color: #fff;
  transform: translateY(-4px) scale(1.1);
  text-shadow: 0 0 12px #6a0dad, 
               0 0 20px #1e90ff,
               0 0 30px #00cfff;
  box-shadow: 0 5px 20px rgba(106, 13, 173, 0.5), 
              0 0 30px rgba(30, 144, 255, 0.4),
              inset 0 0 15px rgba(255, 255, 255, 0.2);
}

.item-nav-bottom:hover::after {
  background: rgba(20, 25, 50, 0.7);
}

.item-nav-bottom:active {
  transform: translateY(-2px) scale(1.05);
  transition: all 0.1s ease;
}

/* Icon dalam nav item */
.item-nav-bottom i {
  display: block;
  font-size: 1.2rem;
  margin-bottom: 4px;
  transition: all 0.3s ease;
}

.item-nav-bottom:hover i {
  transform: scale(1.2);
  filter: drop-shadow(0 0 5px currentColor);
}

.item-nav-bottom p {
  margin: 0;
  font-size: 0.8rem;
  transition: all 0.3s ease;
}

/* Aurora animation */
@keyframes sweepAurora {
  0% {
    background-position: 0% 50%;
    filter: hue-rotate(0deg);
  }
  50% {
    background-position: 100% 50%;
    filter: hue-rotate(60deg);
  }
  100% {
    background-position: 0% 50%;
    filter: hue-rotate(0deg);
  }
}

/* Active state */
.item-nav-bottom.active {
  color: #fff;
  transform: translateY(-3px) scale(1.08);
  text-shadow: 0 0 10px #6a0dad, 
               0 0 18px #1e90ff;
  box-shadow: 0 4px 18px rgba(106, 13, 173, 0.45), 
              0 0 25px rgba(30, 144, 255, 0.35),
              inset 0 0 12px rgba(255, 255, 255, 0.25);
}

.item-nav-bottom.active::before {
  opacity: 1;
}

.item-nav-bottom.active::after {
  background: rgba(25, 30, 60, 0.8);
}

/* Responsive tweaks for mobile */
@media screen and (max-width: 768px) {
  .nav-bottom {
    width: 94%;
    bottom: 8px;
    padding: 0.6rem 0.4rem;
    border-radius: 22px;
  }
  
  .item-nav-bottom {
    font-size: 0.8rem;
    padding: 0.6rem 0.3rem;
    margin: 0 3px;
  }
  
  .item-nav-bottom i {
    font-size: 1.1rem;
  }
  
  .item-nav-bottom p {
    font-size: 0.75rem;
  }
}

@media screen and (max-width: 480px) {
  .nav-bottom {
    width: 92%;
    padding: 0.5rem 0.3rem;
  }
  
  .item-nav-bottom {
    font-size: 0.75rem;
    padding: 0.5rem 0.2rem;
  }
  
  .item-nav-bottom i {
    font-size: 1rem;
    margin-bottom: 3px;
  }
  
  .item-nav-bottom p {
    font-size: 0.7rem;
  }
}

/* ================== UTILITIES ================== */
.btn-up {
  display: none;
  position: fixed;
  bottom: 6.5rem;
  right: 1rem;
  z-index: 99;
  font-size: 0.9rem;
  background: linear-gradient(135deg, #a6caee, #616dd8);
  color: #fff;
  padding: 0.6rem 1rem;
  border-radius: 14px;
  border: 2px solid #616dd8;
  box-shadow: 0 6px 18px rgba(97, 109, 216, 0.5), 
              0 0 28px rgba(97, 109, 216, 0.4);
  cursor: pointer;
  transition: all 0.3s ease;
  font-family: var(--font-display);
}

.btn-up:hover {
  transform: translateY(-4px) scale(1.08);
  box-shadow: 0 12px 28px rgba(97, 109, 216, 0.6), 
              0 0 40px rgba(97, 109, 216, 0.5);
}

/* ================== RUNNING TEXT (MARQUEE) ================== */
.running-text {
  position: relative;
  width: 100%;
  overflow: hidden;
  background: rgba(10, 15, 30, 0.7);
  padding: 10px 0;
  border-top: 1px solid rgba(0, 200, 255, 0.3);
  border-bottom: 1px solid rgba(0, 200, 255, 0.3);
  margin: 1rem 0;
}

.marquee-track {
  display: flex;
  width: max-content;
  animation: marqueeScroll 25s linear infinite;
}

.running-text:hover .marquee-track {
  animation-play-state: paused;
}

.marquee-track span {
  padding: 0 2rem;
  color: var(--neon-blue);
  text-shadow: 0 0 5px rgba(0, 243, 255, 0.7);
  font-family: var(--font-display);
  white-space: nowrap;
  position: relative;
}

.marquee-track span::after {
  content: "•";
  position: absolute;
  right: -0.5rem;
  color: var(--neon-pink);
  text-shadow: 0 0 5px rgba(255, 0, 247, 0.7);
}

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

/* ================== CONTENT WRAPPER ================== */
.content-home {
  padding: 1.5rem;
  margin-bottom: 5rem;
  background: linear-gradient(160deg, #0a192f, #112d4e, #1c3d70);
  color: #e0f7ff;
  border: 1px solid rgba(0, 200, 255, 0.15);
  border-radius: 16px;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.55), 
              0 0 12px rgba(0, 150, 255, 0.15);
  backdrop-filter: saturate(180%) blur(6px);
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.content-home:hover {
  transform: translateY(-6px) scale(1.02);
  box-shadow: 0 12px 36px rgba(0, 180, 255, 0.55), 
              0 0 48px rgba(0, 200, 255, 0.25);
}

/* ================== POLA WRAPPER ENHANCED ================== */
.pola-wrapper {
  position: relative;
  background: rgba(10, 15, 38, 0.6);
  width: 14rem;
  max-width: 100%;
  border-radius: 16px;
  border: 1px solid rgba(0, 200, 255, 0.3);
  backdrop-filter: blur(16px) saturate(200%);
  overflow: hidden;
  box-shadow: 0 6px 25px rgba(0, 180, 255, 0.35), 
              0 0 32px rgba(0, 200, 255, 0.12);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  margin: 0 auto 1.5rem;
}

.pola-wrapper:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 30px rgba(0, 180, 255, 0.45), 
              0 0 40px rgba(0, 200, 255, 0.2);
}

.pola-wrapper > * {
  position: relative;
  z-index: 2;
}

/* Judul pola */
.pola-wrapper h4 {
  font-size: 14px;
  font-family: "Chakra Petch", sans-serif;
  color: #fdffff;
  margin-bottom: 5px;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  text-shadow: 0 0 8px #7da2fe, 
               0 0 12px #6876e2;
}

.pola-wrapper h5 {
  font-size: 12px;
  font-family: "Space Grotesk", sans-serif;
  color: #d0f0ff;
  font-weight: 500;
  margin: 0;
  opacity: 0.95;
  text-shadow: 0 0 5px #00caff;
}

.pola-wrapper h4 i,
.pola-wrapper h5 i {
  color: #3edfff;
}

/* Jam bulat */
.jam-wrapper {
  background: linear-gradient(145deg, #006fff, #00d4ff);
  border-radius: 50%;
  padding: 0.9rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 20px rgba(0, 200, 255, 0.8),
              inset 0 0 10px rgba(255, 255, 255, 0.3);
  color: #fff;
  font-size: 0.9rem;
  font-family: "Chakra Petch", sans-serif;
  font-weight: 700;
  margin-bottom: 0.8rem;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.jam-wrapper:hover {
  transform: scale(1.12);
  box-shadow: 0 0 28px rgba(0, 220, 255, 0.85), 
              0 0 35px rgba(0, 255, 255, 0.4);
}

/* ================== GENERAL STYLES ================== */
html,
body {
  margin: 0;
  padding: 0;
  min-height: 100%;
}

body {
  font-family: var(--font-base);
  background: 
    linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8)),
    radial-gradient(circle at 10% 20%, rgba(0, 75, 117, 0.2) 0%, transparent 20%),
    radial-gradient(circle at 90% 80%, rgba(0, 143, 196, 0.2) 0%, transparent 20%),
    linear-gradient(to bottom, #070710 0%, #0a0a1a 100%);
  color: var(--text-first);
  line-height: 1.6;
  overflow-x: hidden;
  position: relative;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  background: linear-gradient(rgba(0, 243, 255, 0.05) 1px, transparent 1px), 
              linear-gradient(90deg, rgba(0, 243, 255, 0.05) 1px, transparent 1px);
  background-size: 20px 20px;
  pointer-events: none;
  z-index: -1;
}

/* Logo styling */
.logo {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  padding: 1rem 0;
  margin-top: -4.5rem;
  margin-bottom: -4.5rem;
  position: relative;
  background: rgba(0, 0, 0, 0.25);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4);
  border-radius: 15px;
}

.logo img {
  max-width: 22%;
  height: auto;
  display: block;
  margin: 0 auto;
  filter: drop-shadow(0 0 10px #e1ac00) drop-shadow(0 0 20px #022c36);
  transition: transform 0.4s ease, filter 0.4s ease;
}

.logo img:hover {
  transform: scale(1.05);
  filter: drop-shadow(0 0 15px #e1ac00) drop-shadow(0 0 25px #022c36);
}

@media (max-width: 768px) {
  .logo img {
    max-width: 85%;
  }
}

/* Additional responsive adjustments */
@media (max-width: 360px) {
  .table-pola {
    font-size: clamp(7px, 1.8vw, 9px);
  }
  
  .table-pola th,
  .table-pola td {
    padding: 5px 2px;
  }
  
  .table-pola .lni {
    font-size: 9px;
  }
  
  .table-pola td:first-child {
    min-width: 45px;
  }
  
  .percent {
    height: 18px;
  }
  
  .percent p {
    font-size: 10px;
  }
}

/* Container enhancements */
.container {
  position: relative;
  padding: 1rem;
}

.container::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(rgba(0, 10, 25, 0.65), rgba(10, 20, 50, 0.85));
  z-index: -1;
  border-radius: 16px;
  backdrop-filter: blur(6px);
}

/* Cyberpunk slider styles (existing but kept for compatibility) */
.swiper {
  width: 100%;
  height: 100%;
  position: relative;
}

.swiper-slide {
  position: relative;
  overflow: hidden;
  border-radius: 0 0 10px 10px;
}

.slider-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s cubic-bezier(0.25, 0.1, 0.25, 1);
}

.swiper-slide-active .slider-img {
  transform: scale(1.03);
}

/* Cyber Navigation Arrows */
.swiper-button-next,
.swiper-button-prev {
  width: 50px;
  height: 50px;
  background: rgba(0, 0, 0, 0.7);
  border: 2px solid #00f2ff;
  border-radius: 50%;
  backdrop-filter: blur(5px);
  box-shadow: 0 0 15px rgba(0, 242, 255, 0.5);
  transition: all 0.3s ease;
}

.swiper-button-next:hover,
.swiper-button-prev:hover {
  background: rgba(0, 242, 255, 0.2);
  transform: scale(1.1);
}

.swiper-button-next::after,
.swiper-button-prev::after {
  font-size: 24px;
  color: #00f2ff;
  font-weight: bold;
  text-shadow: 0 0 10px rgba(0, 242, 255, 0.7);
}

/* Cyber Pagination */
.swiper-pagination-bullet {
  width: 12px;
  height: 12px;
  background: rgba(255, 255, 255, 0.3);
  opacity: 1;
  transition: all 0.3s ease;
  box-shadow: 0 0 5px rgba(0, 242, 255, 0.3);
}

.swiper-pagination-bullet-active {
  background: #00f2ff;
  box-shadow: 0 0 15px rgba(0, 242, 255, 0.7);
  transform: scale(1.3);
}

/* ================== BUTTON STYLES ================== */
.row.g-0 {
    margin: 1.5rem 0;
    display: flex;
    gap: 1rem;
    justify-content: center;
}

.col.d-grid {
    flex: 1;
    min-width: 120px;
    max-width: 200px;
}

/* Base button style */
.btn-credit-glowing1,
.btn-credit-glowing2 {
    position: relative;
    display: block;
    width: 100%;
    padding: 1rem 1.5rem;
    border: none;
    border-radius: 12px;
    font-family: 'Chakra Petch', sans-serif;
    font-weight: 700;
    font-size: 1.1rem;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    cursor: pointer;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    z-index: 1;
    text-shadow: 0 0 5px rgba(255, 255, 255, 0.7);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

/* Button 1 - Login (Blue Neon) */
.btn-credit-glowing1 {
    background: linear-gradient(135deg, #0061ff, #00d4ff);
    background-size: 200% 200%;
    animation: gradientMove 4s ease infinite;
    border: 2px solid #00d4ff;
}

.btn-credit-glowing1::before {
    content: "";
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: linear-gradient(135deg, #0061ff, #00d4ff, #0061ff);
    background-size: 200% 200%;
    animation: gradientMove 4s ease infinite;
    border-radius: 12px;
    z-index: -1;
    opacity: 0;
    transition: opacity 0.4s ease;
}

.btn-credit-glowing1:hover::before {
    opacity: 1;
}

.btn-credit-glowing1:hover {
    transform: translateY(-5px) scale(1.05);
    box-shadow: 0 10px 25px rgba(0, 212, 255, 0.5),
                0 0 30px rgba(0, 212, 255, 0.4);
    color: #fff;
    text-shadow: 0 0 10px #fff,
                 0 0 20px #00d4ff;
}

/* Button 2 - Daftar (Purple Neon) */
.btn-credit-glowing2 {
    background: linear-gradient(135deg, #8a2be2, #da70d6);
    background-size: 200% 200%;
    animation: gradientMove 4s ease infinite reverse;
    border: 2px solid #da70d6;
}

.btn-credit-glowing2::before {
    content: "";
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: linear-gradient(135deg, #8a2be2, #da70d6, #8a2be2);
    background-size: 200% 200%;
    animation: gradientMove 4s ease infinite reverse;
    border-radius: 12px;
    z-index: -1;
    opacity: 0;
    transition: opacity 0.4s ease;
}

.btn-credit-glowing2:hover::before {
    opacity: 1;
}

.btn-credit-glowing2:hover {
    transform: translateY(-5px) scale(1.05);
    box-shadow: 0 10px 25px rgba(218, 112, 214, 0.5),
                0 0 30px rgba(218, 112, 214, 0.4);
    color: #fff;
    text-shadow: 0 0 10px #fff,
                 0 0 20px #da70d6;
}

/* Gradient animation */
@keyframes gradientMove {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

/* Active state for both buttons */
.btn-credit-glowing1:active,
.btn-credit-glowing2:active {
    transform: translateY(-2px) scale(1.02);
    transition: all 0.1s ease;
}

/* Ripple effect */
.btn-credit-glowing1::after,
.btn-credit-glowing2::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    transform: translate(-50%, -50%);
    transition: width 0.6s, height 0.6s;
}

.btn-credit-glowing1:active::after,
.btn-credit-glowing2:active::after {
    width: 300px;
    height: 300px;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .row.g-0 {
        flex-direction: column;
        gap: 0.8rem;
        margin: 1rem 0;
    }
    
    .col.d-grid {
        max-width: 100%;
    }
    
    .btn-credit-glowing1,
    .btn-credit-glowing2 {
        padding: 0.9rem 1.2rem;
        font-size: 1rem;
        letter-spacing: 1px;
    }
}

@media (max-width: 480px) {
    .btn-credit-glowing1,
    .btn-credit-glowing2 {
        padding: 0.8rem 1rem;
        font-size: 0.9rem;
    }
    
    .btn-credit-glowing1:hover,
    .btn-credit-glowing2:hover {
        transform: translateY(-3px) scale(1.03);
    }
}