/* ===== RESET & BODY ===== */
* {margin:0; padding:0; box-sizing:border-box;}
body {
  font-family: 'Montserrat','Segoe UI',Arial,sans-serif;
  background: #14120e;
  color: #ffb55b;
  min-height: 100vh;
  overflow-x: hidden;
  position: relative;

  /* === FULL BACKGROUND ORNAMEN NAGA GOLD (SVG REPEAT) === */
  background-image:
    url("data:image/svg+xml;utf8,<svg width='400' height='230' viewBox='0 0 400 230' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M24,156 Q50,124 105,152 Q185,180 144,92 Q200,40 228,111 Q260,175 398,20' stroke='%23FFD966' stroke-width='7' stroke-opacity='0.07' fill='none'/><path d='M65,80 Q120,156 340,98 Q395,61 398,110' stroke='%23FFD966' stroke-width='4' stroke-opacity='0.045' fill='none'/></svg>"),
    radial-gradient(circle at 20% 12%,#ff7700a0 0,transparent 60%),
    radial-gradient(circle at 80% 90%,#ffcf6e60 0,transparent 70%),
    linear-gradient(110deg,#1a130a 70%,#201507 100%);
  background-repeat: repeat, no-repeat, no-repeat, no-repeat;
  background-size: 400px 230px, cover, cover, cover;
  background-position: top left, 0 0, 0 0, 0 0;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  width: 100vw; height: 100vh;
  background: transparent;
  z-index: -1;
  animation: 10s infinite alternate bgPulse;
}
@keyframes bgPulse { 0%{filter:blur(70px);} 100%{filter:blur(120px);} }

/* ==== HEADER FLEXIBLE MODERN ==== */
header {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  background: rgba(32,20,5,0.97);
  box-shadow: 0 4px 24px #ff990055, 0 1.5px 0 #ffd96644 inset;
  border-bottom: 2.5px solid #ffb55b30;
  padding: 1.4vw 3vw 1.2vw 3vw;
  gap: 2vw;
  width: 100%;
  min-width: 0;
  position: relative;
  z-index: 5;
  backdrop-filter: blur(7px);
}

/* LOGO */
.logo img {
  height: min(3vw,56px);
  min-height: 32px;
  max-height: 56px;
  border-radius: 18px;
  filter: drop-shadow(0 0 24px #ffaa33cc) drop-shadow(0 0 14px #ffd966bb);
  background: linear-gradient(120deg,#fff0 60%,#ffd96620 100%);
  padding: 2.5px 8px 2.5px 0;
  object-fit: contain;
}


/* NAVBAR FLEXIBLE MODERN */
.super33-nav {
  display: flex;
  flex: 1 1 auto;
  justify-content: center;
  align-items: center;
  gap: clamp(12px, 2vw, 44px);
  width: 100%;
  background: linear-gradient(98deg,rgba(32,24,6,0.38) 60%,rgba(255,230,155,0.13) 100%);
  border-radius: 32px;
  box-shadow: 0 4px 16px 0 #ffd96622, 0 1.5px 0 #ffddaa18 inset;
  padding: 4px 2vw;
  border: 1.5px solid #ffd96644;
  min-width: 0;
  max-width: 100vw;
}

.super33-nav .nav-btn {
  flex: 1 1 0;
  min-width: 80px;
  max-width: 170px;
  padding: 13px 0;
  font-size: 1.08vw;
  background: linear-gradient(93deg,#2b1904 0%,#ffd96633 100%);
  color: #ffeab6;
  font-family: inherit;
  font-weight: 800;
  border: none;
  border-radius: 22px;
  text-decoration: none;
  box-shadow: 0 2px 16px #ffb55b22, 0 0 0 #fff0;
  transition: background 0.21s, color 0.19s, box-shadow 0.23s, transform 0.18s;
  letter-spacing: 0.6px;
  text-align: center;
  outline: none;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.98;
  margin: 0;
  position: relative;
}
.super33-nav .nav-btn:before {
  content: "";
  position: absolute;
  z-index: 1;
  inset: -3px;
  border-radius: 23px;
  background: linear-gradient(90deg, #ff9900 10%, #ffd966 60%, #fff2 100%);
  opacity: 0;
  transition: opacity .21s;
  pointer-events: none;
}
.super33-nav .nav-btn:hover:before,
.super33-nav .nav-btn:focus:before {
  opacity: .46;
  box-shadow: 0 0 18px #ffd96688,0 0 12px #ffad008a;
}
.super33-nav .nav-btn:hover,
.super33-nav .nav-btn:focus {
  background: linear-gradient(90deg, #ffba4d 20%, #ff9900 90%);
  color: #2b1904;
  transform: scale(1.06) translateY(-1.3px);
  box-shadow: 0 4px 18px #ffcc7f99,0 0 16px #ffd966cc;
  z-index: 3;
}
.super33-nav .nav-highlight {
  background: linear-gradient(90deg, #fff8e1 10%, #ffe263 90%);
  color: #b38a00;
  font-weight: 900;
  border: 2px solid #fff200b0;
  box-shadow: 0 0 24px #fffb008a;
  opacity: 1;
  z-index: 2;
}

/* SEARCH BOX FLEX RESPONSIVE */
.search-box {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 140px;
  max-width: 320px;
  width: 100%;
  justify-self: end;
  background: rgba(255,220,150,0.09);
  border-radius: 22px;
  box-shadow: 0 1.5px 18px #ffb55b18;
  padding: 4px 10px 4px 12px;
  border: 1.2px solid #ffd96633;
  position: relative;
}
.search-box input {
  padding: 11px 17px;
  border-radius: 24px;
  background: #1c130b;
  color: #ffb55b;
  border: none;
  box-shadow: 0 0 7px #ffb55b22;
  outline: 0;
  transition: .18s;
  width: 100%;
  min-width: 0;
  font-size: 15px;
  font-family: inherit;
  font-weight: 600;
  letter-spacing: 0.07em;
  flex: 1 1 0;
}
.search-box input:focus {
  background: #261c09;
  color: #fffbe2;
  box-shadow: 0 0 11px #ffd966aa;
}
.search-box button {
  background: linear-gradient(98deg,#ffd966 40%,#ff9900 100%);
  color: #2b1904;
  font-weight: 900;
  border: none;
  border-radius: 30px;
  padding: 10px 17px;
  cursor: pointer;
  box-shadow: 0 0 13px #ffd96699;
  transition: .16s;
  font-size: 18px;
  display: flex;
  align-items: center;
  flex: 0 0 auto;
}

/* ================= RESPONSIVE ================= */
@media (max-width: 1500px) {
  header {padding: 1.7vw 2vw;}
  .super33-nav .nav-btn {font-size: 15px;}
}
@media (max-width:1200px) {
  header {padding: 15px 2vw 13px 2vw; gap: 1vw;}
  .super33-nav .nav-btn {font-size: 15px;}
  .logo img {height:42px;}
}
@media (max-width:900px) {
  header {
    grid-template-columns: auto 1fr;
    gap: 10px;
    padding: 12px 1vw;
  }
  .super33-nav {
    gap: 1vw;
    padding: 2px 1vw;
    border-radius: 20px;
  }
  .logo img {height:32px;}
}
@media (max-width:700px) {
  header {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 9px;
    padding: 10px 4vw 7px 4vw;
  }
  .logo {align-self: center;}
  .search-box {
    width: 100%;
    max-width: 100vw;
    min-width: 0;
    border-radius: 13px;
    box-shadow: 0 2px 11px #ffd96611;
    padding: 4px 5px 4px 8px;
    margin-bottom: 7px;
    order: 1;
    justify-content: center;
  }
  .search-box input {
    width: 100%;
    min-width: 0;
    font-size: 13px;
    padding: 7px 7px;
    border-radius: 12px;
  }
  .search-box button {
    padding: 8px 9px;
    font-size: 13px;
    border-radius: 12px;
  }
  .super33-nav {
    order: 2;
    flex-direction: row;
    flex-wrap: wrap;
    width: 100%;
    justify-content: center;
    margin: 0;
    gap: 7px;
    min-width: 0;
    max-width: 100vw;
    border-radius: 13px;
    box-shadow: 0 1px 10px #ffd96611;
    background: linear-gradient(98deg,rgba(32,24,6,0.22) 70%,rgba(255,230,155,0.10) 100%);
  }
  .super33-nav .nav-btn {
    width: 48%;
    min-width: 0;
    max-width: 100%;
    font-size: 11px;
    padding: 9px 0;
    margin: 0 0 3px 0;
    border-radius: 8px;
    box-shadow: 0 0 6px #ffb55baa;
  }
  .super33-nav .nav-highlight {
    width: 100%;
    margin-bottom: 0;
    border-radius: 8px;
  }
}
@media (max-width:480px) {
  .search-box input {font-size:11px;padding:6px 4px;}
  .super33-nav {gap:3px;}
  .super33-nav .nav-btn {font-size:9px;padding:6px 0;}
}

/* ====== KONTEN LAIN TETAP ====== */
.judul-container-glow {
  margin:38px auto 60px;
  padding:32px 60px 40px;
  background:linear-gradient(135deg,#201507 80%,#322110 100%);
  box-shadow:0 0 44px #ffaa3399,0 0 88px #ffcf6e50;
  border-radius:32px;
  border:2.5px solid #ffaa3370;
  position:relative;
  overflow:hidden;
}
.judul-megah-shine {
  background:linear-gradient(95deg,#ff8000,#ffd966 90%);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  font-family:Orbitron,Poppins,sans-serif;
  font-size:58px;
  font-weight:900;
  letter-spacing:7px;
  text-align:center;
  text-shadow:0 0 34px #ff9800,0 0 28px #ffd96680;
}
.card,.card h3 {font-family:Montserrat,Arial,sans-serif}
.judul-container-glow::before {
  content:"";
  position:absolute;
  top:0;
  left:-180%;
  width:340%;
  height:100%;
  background:linear-gradient(120deg,transparent,#ff980020 60%,#ffd96615,transparent);
  animation:2.8s infinite shine-slide;
}
@keyframes shine-slide {0%{left:-180%}50%,100%{left:180%}}
.grid-container {display:grid;grid-template-columns:repeat(5,1fr);gap:32px;padding:0 24px;margin-top:28px;}
.card,.pagination {display:flex;position:relative}
.card {
  background:linear-gradient(133deg,#201507 80%,#382202 100%);
  border-radius:24px;
  border:2.5px solid #ff990055;
  box-shadow:0 8px 38px #ffb55b33,0 0 26px #ff990044;
  transition:transform .23s cubic-bezier(.39,1.42,.73,1.06),box-shadow .23s;
  overflow:hidden;
  flex-direction:column;
  justify-content:flex-start;
  height:100%;
}
.card::before {
  content:"";
  position:absolute;
  inset:0;
  border-radius:24px;
  padding:2px;
  background:linear-gradient(90deg,#ff8000,#ffd966 70%,#f80 100%);
  background-size:320% 320%;
  z-index:1;
  opacity:.15;
  pointer-events:none;
  transition:opacity .3s;
}
.card:hover::before {opacity:.45;animation:2s linear infinite borderGlow;}
@keyframes borderGlow {0%{background-position:0 50%}100%{background-position:100% 50%}}
.card>* {position:relative;z-index:2;}
.card:hover {
  transform:translateY(-14px) scale(1.04);
  box-shadow:0 16px 48px #ff880088,0 0 32px #ffd966a0;
}
.card img {
  width:100%;
  height:180px;
  object-fit:cover;
  border-bottom:2px solid #ffb55b77;
  display:block;
}
.card h3 {
  color:#ffae42;
  margin:20px 22px 10px;
  font-size:22px;
  font-weight:700;
  text-shadow:0 0 10px #ffd966a0,0 0 7px #ff800070;
  letter-spacing:1.2px;
}
.card a,.pagination button {
  font-family:Montserrat,Arial,sans-serif;
  font-weight:700;
  letter-spacing:.5px;
}
.card p {
  font-family:Montserrat,Arial,sans-serif;
  color:#ffdfb7;
  margin:0 22px 20px;
  font-size:15px;
  text-shadow:0 0 8px #ffb55b55;
}
.card a {
  display:block;
  margin:auto 22px 22px;
  padding:12px 30px;
  background:linear-gradient(90deg,#ffae42,#ffd966 90%);
  color:#241a0a;
  border-radius:20px;
  font-size:15px;
  text-decoration:none;
  box-shadow:0 0 16px #ffaa33cc;
  transition:.2s;
  text-align:center;
}
.card a:hover {
  background:#ff8000;
  color:#fff;
  box-shadow:0 0 30px #ffd96699,0 0 18px #f80;
  transform:scale(1.06);
}
.pagination {
  justify-content:center;
  align-items:center;
  flex-wrap:wrap;
  gap:18px;
  margin:42px auto 0;
  padding-bottom:72px;
  width:100%;
  text-align:center;
  z-index:10;
}
.pagination button {
  background:linear-gradient(90deg,#ffb347 10%,#ffd966 90%);
  color:#5a3900;
  box-shadow:0 0 14px #ffaa3360,0 0 18px #ffd96644;
  border:none;
  border-radius:22px;
  font-size:16px;
  padding:11px 24px;
  cursor:pointer;
  transition:.22s;
}
.pagination button:hover {
  background:linear-gradient(90deg,#ffd966 10%,#f90 90%);
  color:#fff;
  box-shadow:0 0 26px #ffb55b,0 0 18px #f70;
  transform:scale(1.11);
}
.pagination button.active {
  background:linear-gradient(90deg,#ffd966,#f90 80%);
  color:#fff;
  box-shadow:0 0 24px #ffb55b,0 0 22px #ffae42;
  transform:scale(1.13);
}
@media (max-width:1200px){.grid-container{grid-template-columns:repeat(3,1fr)}}
@media (max-width:900px){
  .grid-container{grid-template-columns:repeat(2,1fr)}
  .judul-megah-shine{font-size:36px}
}
@media (max-width:600px){
  .grid-container{grid-template-columns:1fr}
  .judul-container-glow{margin:22px 5px 30px;padding:16px 8px 18px}
  .card img{height:130px}
  .card h3{font-size:18px;margin:12px 10px 7px}
  .card p{margin:0 10px 14px}
  .card a{margin:0 10px 16px;font-size:14px;padding:10px 14px}
  .pagination{padding-bottom:28px;gap:10px}
}