/* === RESET & BASE === */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: 'Montserrat', 'Segoe UI', Arial, sans-serif;
  min-height: 100vh;
  background: linear-gradient(120deg, #181d2d 60%, #2ea4ff11 100%);
  color: #fffbe9;
  overflow-x: hidden;
  position: relative;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  /* Satu SVG ornamen saja, non-animated, tidak diulang */
  background:
    url('data:image/svg+xml;utf8,<svg width="800" height="800" viewBox="0 0 800 800" xmlns="http://www.w3.org/2000/svg"><ellipse cx="720" cy="90" rx="160" ry="70" fill="%23ffeac544"/><ellipse cx="110" cy="700" rx="110" ry="44" fill="%2300eaff25"/><circle cx="160" cy="150" r="44" fill="%232ea4ff18"/><rect x="310" y="570" width="120" height="22" rx="11" fill="%23ffd76a18"/></svg>') no-repeat right top,
    linear-gradient(150deg, #232b45 70%, #ffd76a16 100%);
  opacity: 0.25;
  filter: blur(0.4px);
}
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(100deg, #181d2d88 60%, #232b4588 100%);
  opacity: .16;
}

/* === HEADER/NAVBAR === */
header {
  background: linear-gradient(90deg, #232b45ec 70%, #2ea4ff57 100%);
  box-shadow: 0 7px 28px #00eaff1f;
  border-bottom: 2.5px solid #ffd76a34;
  border-radius: 0 0 26px 26px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1vw;
  padding: 0 3vw;
  min-height: 64px;
  position: sticky;
  top: 0;
  z-index: 99;
  backdrop-filter: blur(10px) saturate(1.07);
  overflow: visible;
}
.logo {
  display: flex;
  align-items: center;
  gap: 1em;
}
.logo img {
  height: 42px;
  width: auto;
  border-radius: 11px;
  box-shadow: 0 3px 12px #ffd76a22;
  background: linear-gradient(120deg,#fff0 60%,#ffd76a0c 100%);
}
.kingzeus88-nav {
  display: flex;
  flex: 1 1 auto;
  justify-content: center;
  align-items: center;
  gap: 19px;
  background: rgba(255,215,106,0.06);
  border-radius: 10px;
  padding: 0 10px;
  min-width: 0;
  overflow-x: auto;
}
.kingzeus88-nav .nav-btn,
.kingzeus88-nav .nav-highlight {
  min-width: 68px;
  max-width: 140px;
  padding: 11px 18px;
  font-size: 1rem;
  background: linear-gradient(96deg,#232b45 0%,#2ea4ff35 100%);
  color: #ffd76a;
  font-family: inherit;
  font-weight: 700;
  border: none;
  border-radius: 11px;
  text-decoration: none;
  box-shadow: 0 2px 8px #ffd76a10;
  letter-spacing: .21px;
  text-align: center;
  transition: .14s;
  margin: 0 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  outline: none;
  position: relative;
  border: 1.4px solid #ffd76a24;
}
.kingzeus88-nav .nav-btn:hover,
.kingzeus88-nav .nav-btn:focus {
  background: linear-gradient(97deg,#ffd76a 85%,#2ea4ff 100%);
  color: #212946;
  box-shadow: 0 8px 20px #ffd76a24;
  transform: translateY(-2px) scale(1.035);
  border-color: #ffd76a;
}
.kingzeus88-nav .nav-highlight {
  background: linear-gradient(90deg,#ffd76a 22%,#2ea4ff 88%);
  color: #202646;
  font-weight: 900;
  border: 2px solid #ffd76a;
  box-shadow: 0 0 11px #ffd76a22;
}

/* === SEARCH BOX === */
.search-box {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 80px;
  max-width: 210px;
  width: 16vw;
  background: #212946ea;
  border-radius: 8px;
  box-shadow: 0 1px 7px #00eaff19;
  padding: 4px 9px;
  border: 1.1px solid #ffd76a1a;
}
.search-box input {
  padding: 8px 8px;
  border-radius: 7px;
  background: #181d2d;
  color: #ffd76a;
  border: none;
  font-size: 14px;
  width: 100%;
}
.search-box button {
  background: linear-gradient(98deg,#2ea4ff 45%,#ffd76a 100%);
  color: #202646;
  font-weight: 900;
  border: none;
  border-radius: 7px;
  padding: 7px 10px;
  cursor: pointer;
  box-shadow: 0 1px 5px #ffd76a20;
  font-size: 15px;
  display: flex;
  align-items: center;
  transition: .13s;
}
.search-box button:hover {
  background: linear-gradient(98deg,#ffd76a 17%,#2ea4ff 100%);
  color: #202646;
  box-shadow: 0 0 7px #ffd76a19;
  transform: scale(1.06);
}

/* === JUDUL UTAMA === */
.judul-megah-shine {
  display: block;
  width: 99vw;
  max-width: 1020px;
  min-width: 220px;
  margin: 36px auto 19px auto;
  padding: 20px 0 13px 0;
  border-radius: 12px;
  background: linear-gradient(95deg, #232b45e6 80%, #ffe5a0b7 100%);
  box-shadow: 0 0 24px #2ea4ff10, 0 3px 13px #ffd76a15;
  font-family: 'Orbitron', 'Montserrat', Arial, sans-serif;
  font-size: clamp(1.13rem, 5vw, 2.3rem);
  font-weight: 900;
  text-align: center;
  letter-spacing: 0.28em;
  color: #ffd76a;
  border: 2px solid #ffd76a13;
  border-bottom: 4px solid #2ea4ff31;
  text-shadow: 0 0 7px #fffbe1, 0 2px 0 #181d2d33, 0 1px 7px #ffd76a09;
  background-clip: padding-box;
  position: relative;
  overflow: hidden;
  line-height: 1.13;
}
.judul-megah-shine:after {
  content: "";
  display: block;
  width: 49%;
  height: 4px;
  background: linear-gradient(90deg,#ffd76a 13%,#2ea4ff 99%);
  border-radius: 2.5px;
  margin: 10px auto 0 auto;
  filter: blur(0.6px);
  opacity: .64;
}
.judul-megah-shine::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 6px;
  background: linear-gradient(90deg, #fffbe1 0%, #ffd76a44 35%, #2ea4ff13 100%);
  border-radius: 0 0 8px 8px;
  opacity: .21;
}

/* === GRID GALLERY - CARD/BOX === */
.grid-container {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 18px;
  width: 100vw;
  max-width: 100vw;
  padding: 0;
  margin-top: 20px;
  margin-left: auto;
  margin-right: auto;
}
.card {
  background: linear-gradient(127deg, #232b45ec 62%, #ffeac580 100%);
  border-radius: 12px;
  border: 1.2px solid #ffd76a25;
  box-shadow: 0 6px 24px #2ea4ff17, 0 1.5px 8px #ffd76a17;
  overflow: hidden;
  min-width: 0;
  display: flex;
  flex-direction: column;
  height: 100%;
  transition: box-shadow .11s, transform .08s, border-color .13s;
  position: relative;
  margin: 0;
  backdrop-filter: blur(1px);
}
.card:hover {
  box-shadow: 0 12px 41px #2ea4ff29, 0 5px 17px #ffd76a14;
  border-color: #2ea4ff;
  transform: translateY(-7px) scale(1.035);
  z-index: 2;
}
.card img {
  width: 100%;
  height: 110px;
  object-fit: cover;
  border-radius: 12px 12px 0 0;
  box-shadow: 0 2px 10px #2ea4ff13;
  display: block;
  filter: brightness(1.03) contrast(1.08) saturate(1.06);
}
.card-content {
  padding: 13px 11px 7px 11px;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  background: none;
}
.card h3 {
  color: #ffd76a;
  margin: 0 0 6px 0;
  font-size: 1.07rem;
  font-weight: 900;
  letter-spacing: 0.4px;
  line-height: 1.13;
  text-shadow: 0 0 7px #fff3, 0 2px 0 #181d2d08;
}
.card .card-meta {
  display: flex;
  align-items: center;
  font-size: 12.5px;
  color: #2ea4ff;
  gap: 7px;
  margin-bottom: 4px;
  opacity: 0.96;
  font-weight: 700;
}
.card .card-meta span {
  display: flex;
  align-items: center;
  gap: 2px;
}
.card p {
  color: #f7f7f7;
  margin: 0 0 7px 0;
  font-size: 12.2px;
  opacity: 0.98;
  font-weight: 500;
  line-height: 1.37;
  text-shadow: 0 0 2px #151b2c09;
  flex: 1 1 auto;
  min-height: 27px;
}
.card a {
  display: block;
  width: 100%;
  margin: 7px 0 0 0;
  padding: 10px 0;
  background: linear-gradient(93deg,#2ea4ff 19%,#ffd76a 88%);
  color: #232b45;
  border-radius: 7px;
  font-size: 13px;
  font-weight: 900;
  text-decoration: none;
  box-shadow: 0 0 6px #ffd76a07,0 0 2px #2ea4ff08;
  text-align: center;
  letter-spacing: 0.8px;
  border: none;
  transition: .13s;
}
.card a:hover {
  background: linear-gradient(93deg,#ffd76a 9%,#2ea4ff 100%);
  color: #181d2d;
  box-shadow: 0 0 9px #2ea4ff17;
  transform: scale(1.06);
}

/* === TABLE === */
table {
  width: 100vw;
  max-width: 100vw;
  margin: 18px 0 18px 0;
  border-radius: 8px;
  background: linear-gradient(97deg,#ffd76a19 60%,#2ea4ff09 100%);
  box-shadow: 0 3px 12px #2ea4ff12, 0 1px 7px #ffd76a09;
  border: 1.5px solid #2ea4ff0a;
  font-size: 1.01rem;
  overflow: auto;
  border-collapse: collapse;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}
th, td {
  padding: 9px 8px;
  font-size: 1.01rem;
  border-bottom: 1px solid #ffd76a13;
  text-align: left;
  vertical-align: middle;
  white-space: normal;
}
th {
  background: linear-gradient(90deg,#232b45 80%,#ffd76a18 100%);
  color: #ffd76a;
  font-weight: 900;
  letter-spacing: 1.1px;
  font-size: 1.05rem;
  text-shadow: 0 0 3px #ffd76a1a, 0 1px 0 #181d2d13;
  border-bottom: 2px solid #2ea4ff19;
}
tr:last-child td { border-bottom: none; }
td {
  color: #ffd76a;
  font-weight: 700;
  font-size: 1.01rem;
}
tr:hover td {
  background: #2ea4ff09;
  color: #2ea4ff;
  transition: 0.13s;
}

/* === PAGINATION === */
.pagination {
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;
  margin: 9px auto 0;
  padding-bottom: 11px;
  width: 100%;
  text-align: center;
  z-index: 10;
  display: flex;
}
.pagination button {
  background: linear-gradient(90deg,#ffd76a 11%,#2ea4ff 89%);
  color: #232b45;
  box-shadow: 0 1px 7px #ffd76a12;
  border: none;
  border-radius: 8px;
  font-size: 13.2px;
  padding: 5px 9px;
  cursor: pointer;
  transition: .12s;
  font-weight: 800;
}
.pagination button:hover,
.pagination button.active {
  background: linear-gradient(90deg,#2ea4ff 22%,#ffd76a 100%);
  color: #181d2d;
  box-shadow: 0 0 6px #2ea4ff23;
  transform: scale(1.10);
}

/* === RESPONSIVE PATCH === */
@media (max-width:1400px) {
  .grid-container { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width:1100px) {
  .grid-container { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width:900px) {
  header {
    flex-direction: column;
    align-items: stretch;
    border-radius: 0 0 13px 13px;
    min-height: 37px;
    padding: 0 0 2px 0;
    gap: 0;
    position: sticky !important;
    top: 0;
    z-index: 99;
  }
  .logo {
    align-self: flex-start;
    margin: 8px 0 0 3vw;
  }
  .logo img {
    height: 27px;
    max-height: 31px;
  }
  .kingzeus88-nav {
    flex-direction: row;
    justify-content: flex-start;
    width: 100vw;
    background: transparent;
    border-radius: 0;
    gap: 7px;
    padding: 0 1vw 0 1vw;
    margin: 0;
  }
  .kingzeus88-nav .nav-btn,
  .kingzeus88-nav .nav-highlight {
    min-width: 29vw;
    max-width: 99vw;
    font-size: 13px;
    padding: 7px 0;
    border-radius: 7px;
    text-align: center;
  }
  .search-box {
    margin: 6px auto 2px auto;
    max-width: 97vw;
    width: 98vw;
    padding: 6px 9px 6px 8px;
  }
  .judul-megah-shine {
    max-width: 98vw;
    border-radius: 7px;
    font-size: 1.01rem;
    letter-spacing: 1.2px;
    padding: 7px 0 6px 0;
  }
  .grid-container { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width:700px) {
  .grid-container {
    grid-template-columns: 1fr;
    gap: 9px;
    padding: 0 4vw;
    max-width: 100vw;
  }
  .card img { height: 66px; }
  table, table th, table td {font-size: 10.7px; padding: 6px 4px;}
}
@media (max-width:500px){
  .grid-container {
    grid-template-columns: 1fr;
    gap: 5px;
    padding: 0 2vw;
    margin-top: 7px;
  }
  .card {
    border-radius: 6px;
    box-shadow: 0 4px 11px #2ea4ff09, 0 0.5px 2px #ffd76a08;
  }
  .card img {
    border-radius: 3px 3px 0 0;
    height: 37px;
  }
  .card-content {
    padding: 3px 4px 4px 4px;
  }
}
.grid-container {scrollbar-width:thin;scrollbar-color:#2ea4ff44 #181d2d;}
.grid-container::-webkit-scrollbar{height:4px;background:#181d2d;}
.grid-container::-webkit-scrollbar-thumb{background:#2ea4ff88;}