/* =========================================================
   VIPER AURUM HACKER THEME — REPLACEMENT + POLISH
   (langsung ganti/tembak ke stylesheet kamu)
   ========================================================= */

/* === GOLD TOKENS (GLOBAL) === */
:root{
  --gold-0: #0a0906;       /* latar gelap hangat */
  --gold-1: #11100c;       /* panel */
  --gold-2: #15130d;       /* panel+1 */
  --gold-glass: rgba(18,15,8,.55);

  --gold-50:#fff8e6;       /* teks terang hangat */
  --gold-60:#e1d7b8;       /* teks sekunder */
  --gold-70:#a99a73;       /* teks mute */

  --gold-a:#ffe66b;        /* honey glow */
  --gold-b:#ffd54a;        /* soft neon gold */
  --gold-c:#ffc107;        /* amber */
  --gold-d:#ffb300;        /* deep amber */
  --gold-e:#f0b90b;        /* royal gold */
  --gold-f:#b8870a;        /* dark gold */

  --glass-border-g: 1px solid rgba(255,208,85,.25);
  --inner-gold:  0 0 0 1px rgba(255,193,7,.16) inset, 0 0 28px rgba(255,208,85,.08) inset;
  --outer-gold:  0 6px 22px rgba(255,193,7,.18), 0 1px 0 rgba(255,255,255,.05);
  --scan-gold:   rgba(255,208,85,.06);
}

/* popup style */
.popup-container{
    display: none;
    width: 100vw;
    height: 100vh;
    position: fixed;
    z-index: 1000;
    background: rgba(14,10,5,.78);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    inset: 0;
}

.popup-body{
    width: 359px;
    height: 589px;
    margin: 2% auto;
    background: linear-gradient(180deg, rgba(255,208,85,.05), rgba(0,0,0,0)), var(--gold-2);
    border-radius: 14px;
    color: var(--gold-50);
    border: var(--glass-border-g);
    box-shadow: var(--inner-gold), var(--outer-gold);
    position: relative;
    overflow: hidden;
}
/* scanline halus */
.popup-body::after{
    content:""; position:absolute; inset:0; pointer-events:none;
    background-image: linear-gradient(transparent 97%, var(--scan-gold) 100%);
    background-size: 100% 3px; opacity:.22;
}

@media (max-width: 512px){
    .popup-body{
        width: 310px;
        margin: 10% auto;
    }
}

.popup-img{
    width: 450px;
    height: auto;
    max-height: 555px;
    margin: 8% auto;
    display:block;
    border-radius: 12px;
    box-shadow: 0 10px 24px rgba(0,0,0,.35);
}

.popup-img-close{
    cursor: pointer;
    width: 36px;
    height: 36px;
    background: linear-gradient(135deg, var(--gold-a), var(--gold-c));
    color: #1a1304;
    float: right;
    padding: 5px;
    border-radius: 100px;
    position: absolute;
    margin-left: -7px;
    margin-top: -20px;
    border: 1px solid rgba(255,208,85,.4);
    box-shadow: 0 8px 18px rgba(255,193,7,.25);
}
.popup-img-close:hover{ filter:brightness(1.05); box-shadow:0 10px 22px rgba(255,193,7,.35) }

@media (min-width: 993px){
    .popup-img-close{
        margin-left: 42px;
        margin-top: -12px;
    }
}

.popup-header{
    height: 54px;
    width: 100%;
    background: linear-gradient(90deg, var(--gold-e) 0%, var(--gold-b) 100%);
    float: left;
    border-bottom: 1px dashed rgba(255,208,85,.35);
}

.popup-header h6{
    margin: 14px;
    color:#1a1304;
    font-weight:800;
    letter-spacing:.3px;
}

.popup-content{
    width: 100%;
    height: auto;
    padding: 10px 24px;
    float: left;
    font-size: 14px;
    color: var(--gold-50);
}

.col2{ width: 50% }
.left{ text-align: left }
.right{ text-align: right }
.mrtop10{ margin-top: 10px }

.hr{
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, rgba(255,208,85,.18), rgba(255,193,7,.12));
    float: left;
}

.popup-label{
    width: 100%;
    float: left;
    background: #1b160b;
    padding: 10px 15px;
    font-size: 12px;
    color: var(--gold-60);
    border-top: var(--glass-border-g);
    border-bottom: var(--glass-border-g);
}

.popup-close{
    cursor: pointer;
    width: 36px;
    height: 36px;
    background: linear-gradient(135deg, var(--gold-a), var(--gold-c));
    color: #1a1304;
    float: right;
    padding: 5px;
    border-radius: 100px;
    position: absolute;
    margin-top: -10px;
    z-index: 100;
    margin-left: -9px;
    border: 1px solid rgba(255,208,85,.4);
    box-shadow: 0 8px 18px rgba(255,193,7,.25);
}
.popup-close:hover{ filter:brightness(1.05); box-shadow:0 10px 22px rgba(255,193,7,.35) }

.bg-blue-button{
    background: linear-gradient(90deg, var(--gold-a) 0%, var(--gold-c) 100%);
    color:#1a1304;
    border: 1px solid rgba(255,208,85,.25);
    box-shadow: 0 8px 20px rgba(255,193,7,.22);
}

.bg-black-button{
    background: linear-gradient(180deg,#1a1509,#0f0c07);
    color: var(--gold-50);
    border: 1px solid rgba(255,208,85,.18);
}

.popip-button{
    cursor: pointer;
    width: 50%;
    float: left;
    height: 40px;
    transition: transform .18s cubic-bezier(.22,.61,.36,1), box-shadow .18s cubic-bezier(.22,.61,.36,1);
}
.popip-button:hover{
    background: #ae7a0a;
    transform: translateY(-1px);
    box-shadow: 0 10px 24px rgba(255,193,7,.28);
}

/* Slideshow container */
.slideshow-images-container {
  max-width: 100%;
  position: relative;
  margin: auto;
  margin-bottom: 6px;
}

/* Hide the images by default */
.slideshow-images { display: none }

/* Next & previous buttons */
.prev-slideshow-images, .next-slideshow-images {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  margin-top: -14px;
  padding: 12px 14px;
  color: #1a1304;
  font-weight: 900;
  font-size: 16px;
  transition: .2s ease;
  border-radius: 10px;
  user-select: none;
  background: linear-gradient(135deg, var(--gold-a), var(--gold-c));
  box-shadow: 0 8px 18px rgba(255,193,7,.25);
}
.next-slideshow-images { right: 0; }
.prev-slideshow-images:hover, .next-slideshow-images:hover {
  background: linear-gradient(135deg, #fff176, var(--gold-c));
}

/* Caption text */
.text-slideshow-images {
  color: var(--gold-50);
  font-size: 15px;
  padding: 8px 12px;
  position: absolute;
  bottom: 8px; width: 100%; text-align: center;
}

/* Number text */
.numbertext-slideshow-images {
  color: var(--gold-60);
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
}

/* Dots */
.dot-slideshow-images {
  cursor: pointer;
  height: 12px; width: 12px;
  margin: 0 3px;
  background-color: rgba(255,208,85,.35);
  border-radius: 50%;
  display: inline-block;
  transition: background-color .3s ease, transform .2s;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.12);
}
.active-slideshow-images, .dot-slideshow-images:hover {
  background-color: var(--gold-c);
  transform: scale(1.06);
}

/* Fading animation */
.fade-slideshow-images {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1.5s;
  animation-name: fade;
  animation-duration: 1.5s;
}
@-webkit-keyframes fade { from{opacity:.4} to{opacity:1} }
@keyframes fade { from{opacity:.4} to{opacity:1} }

@media (min-width: 993px){
    .numbertext-slideshow-images { top: 0 }
}

@media (max-width: 425px){
    .popup-img{ max-width: 93%; margin: 25% auto }
}

/* Header */
.header{
    width: 100%;
    height: 64px;
    margin-bottom: 6px;
    background: linear-gradient(180deg, var(--gold-a) 0%, var(--gold-c) 100%);
    position: fixed; z-index: 300;
    box-shadow: 0 4px 14px rgba(255,193,7,.22);
    border-bottom: 1px solid rgba(255,208,85,.25);
}

.images-logo{
    padding: 3px;
    width: 122px; height: 43px;
    float: left; margin-top: 9px;
    filter: drop-shadow(0 8px 18px rgba(255,193,7,.25));
}

.header .title{
    float: right; width:auto; height:auto; margin: 15px; border-radius: 42px;
    background: linear-gradient(90deg, var(--gold-b), var(--gold-e));
    padding: 4px 10px;
    box-shadow: 0 6px 16px rgba(255,193,7,.22);
}

.red{  background: #7a2a14 } /* warm chip */
.blue{ background: #5a3c12 }

.header-buttom{
    color: #1a1304;
    padding: 5px;
    height: 42px;
    font-weight:800;
}

.header-button-text{
    font-size: 14px;
    margin: 7px;
    float: left;
}

.popup-container-ads{
    /* jangan gunakan .html sebagai background; fallback */
    background: radial-gradient(70% 90% at 50% 10%, rgba(255,208,85,.10), transparent 60%), #120f08;
    background-repeat: no-repeat;
    margin: 10% auto;
    border-radius: 18px;
    background-size: 100%;
    border: var(--glass-border-g);
    box-shadow: var(--inner-gold), var(--outer-gold);
}

@media (max-width: 992px){
    .header .title { display: none }
    .col{ flex-basis: auto }
    .header-button-text{ font-size: 12px; margin: 9px }
}

/* Menu Navigation Bottom */
.menu-bottom{
    display: none;
    height: 73px; width: 100vw;
    position: fixed; bottom: 0;
    border-top: 2px solid rgba(255,208,85,.35);
    background: linear-gradient(180deg, rgba(24,18,7,.88), rgba(24,18,7,.97));
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.sub-menu-bottom{ width: 25vw; height: 100%; float: left; transition:.18s }
.sub-menu-bottom:hover{ background: rgba(255,208,85,.08) }
.icon-menu{ width: 27px; height: 27px; margin: 8px; filter: drop-shadow(0 2px 6px rgba(0,0,0,.35)) }
.text-menu{ font-size: 12px; padding:0; margin:0; color: var(--gold-50) }

@media (max-width: 992px){ .menu-bottom{ display: block } }
@media (min-width: 768px){ .menu-bottom{ height: 82px } }

/* Search */
.navbar-search{
    height: 50px; width: 100%;
    background: #1a1509;
    border-top: 1px solid rgba(255,208,85,.12);
    border-bottom: 1px dashed rgba(255,208,85,.18);
}
.search-button{
    background: linear-gradient(90deg,var(--gold-a),var(--gold-c));
    border: 0; color: #1a1304;
    border-top-right-radius: 5px; border-bottom-right-radius: 5px;
    cursor: pointer;
    box-shadow: 0 6px 16px rgba(255,193,7,.22);
}
.input-search{
    background: #2a2111;
    border: 0; color: var(--gold-50);
}

.search-besar{ display: block }
.search-kecil{ display: none; height: auto }

#running_text_header{ display: flex; color: var(--gold-50) }

.btn-title{
    bottom: 85px; position: absolute; width: 100%;
    text-align: center; color: white; font-size: 16px;
}

#header-besar{ display: block }
#header-kecil{ display: none }

p{ margin: 0 }

/* Filter overlay */
#popup-container-filter{
    overflow-y: scroll; position: fixed; height: 100%; width: 100%;
    z-index: 12220000; background: rgba(14,10,5,.85); top: 0;
    -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
}
.title-filter{ color: var(--gold-50); text-align: center }

.container-demo{
    width: 650px; background: var(--gold-1);
    margin: 4% auto; height: auto;
    border: var(--glass-border-g);
    box-shadow: var(--inner-gold), var(--outer-gold);
    border-radius: 14px;
}
.iframe-demo{ border: 0; width: 650px; height: 451px }
.header-demo{ background: #20190c; color: var(--gold-50) }

.btn-fullscreen{
    margin: 6px; position: initial; width: auto;
    font-size: 12px; height: auto; border-radius: 10px;
}

.footer-demo{ display: block }

.btn-popup-demoplay{
    height: auto; font-size: 14px; padding: 0 20px; margin-bottom: 6px;
    background: linear-gradient(90deg,var(--gold-a),var(--gold-c));
    color:#1a1304; border-radius:10px; border:1px solid rgba(255,208,85,.25);
}
.popup-body-ads-yt{
    width: 606px; height: 390px; margin: 8% auto; padding: 20px;
    background: #1d1609; border-radius: 20px;
    border: var(--glass-border-g);
    box-shadow: var(--inner-gold), var(--outer-gold);
    color: var(--gold-50);
}

@media (max-width: 992px){
    .slot .slot-sidebar{
        float: left; width: 100%; flex: 0 0 20%; max-width: 100%;
        margin-top: 5px; background-color: #0e1b22; /* biarkan */
    }
    .search-besar{ display: none }
    .search-kecil{ display: block }
    .images-logo { width: 107px; height: 42px; float:left; margin-top:7px }
    #running_text_header{ display: none }
    .hover-btn { opacity: 1 }
    .btn-title{
        bottom: 30px; position: absolute; width: 100%; text-align:center;
        color: white; font-size: 12px;
    }
    .play-btn{
        display: none; font-size: 12px; text-decoration: none; color: white;
        text-align: center; align-items: center; width: 100%; padding: 3px;
        background: linear-gradient(180deg, var(--gold-a) 0%, var(--gold-c) 100%);
        bottom: 22px; position: absolute;
    }
    .demo-btn{ background: #417cff; bottom:45px; height:auto }
    #header-besar{ display: none }
    #header-kecil{ display: block }

    .container-demo{
        width: 95%; background: var(--gold-1); margin: 1% auto; height: auto;
    }
    .iframe-demo{ border:0; width:95vw; height:82vh }
    .footer-demo{ display: none }
    .popup-body-ads-yt{ width: 100%; height: 40%; margin: 20% auto }
}

/* Slideshow container text*/
.slideshow-containerText { position: relative }
.mySlidesText { display: none; padding: 11px 34px; text-align: center }
.prevText, .nextText{
  cursor: pointer; position: absolute; top: 50%;
  width: auto; margin-top: -30px; padding: 12px 14px;
  color: #1a1304; font-weight: 900; font-size: 18px; border-radius: 10px; user-select:none;
  background: linear-gradient(135deg, var(--gold-a), var(--gold-c));
  box-shadow: 0 8px 18px rgba(255,193,7,.25);
}
.nextText{ right: 0 }
.prevText:hover, .nextText:hover{
  background: linear-gradient(135deg, #fff176, var(--gold-c)); color:#1a1304;
}
.activeText{ background-color: #717171 }
.sliderTextTitle { color: #1a1304 }

/* width */
@media (max-width: 600px){
    ::-webkit-scrollbar{ display: none }
}
::-webkit-scrollbar{ width: 10px }
::-webkit-scrollbar-track{ background: #1a1509 }
::-webkit-scrollbar-thumb{
  background: linear-gradient(180deg,var(--gold-c),var(--gold-b));
  border: 1px solid rgba(0,0,0,.2); border-radius: 8px;
}
::-webkit-scrollbar-thumb:hover{
  background: linear-gradient(180deg,#fff176,var(--gold-c));
}

.logo-filter-kecil{
    display: inline-block; background-position: center; background-repeat: no-repeat;
    height: 30px; width: 32px; background-size: 20px;
}

.btn-provider{
    background: linear-gradient(90deg, var(--gold-b), var(--gold-e));
    color:#1a1304;
    border: 1px solid rgba(255,208,85,.22);
    transition:.18s;
}
.btn-provider:active, .btn-provider:focus{
    background: #6a5f3a; color:#fff;
}

.container-tmp{ padding-top: 79px }

.logo-profider-kecil{
    background-size: 15px; background-color: #f4313f;
    height: 25px; display: block; background-repeat: no-repeat;
    width: 25px; float: right; background-position: center;
}

.bg-black{
    width: 24%;
    background: linear-gradient(180deg, rgba(255,208,85,.05), rgba(0,0,0,0)), #171208;
    margin: 3px;
    border: 1px solid rgba(255,208,85,.12);
    box-shadow: 0 6px 16px rgba(0,0,0,.25);
}

@media (max-width: 992px){ .bg-black{ width: 31.5% } }

.bg-transparan{ background: transparent }

.text-wrap{
    font-size: 14px;
    word-break: break-all;
    white-space: normal;
    text-transform: capitalize;
    color: var(--gold-50);
}

.colors span{
    width:15px; height:15px; border-radius:50%; cursor:pointer; display:flex;
}
.colors span .red{ background-color:red }
.colors span .green{ background-color:green }
.colors span .yellow{ background-color:yellow; color: black }

.ratings i{ color: var(--gold-c) }

.btn-pola-main-custom{
    width: 100%; height: 30px; padding: 2px;
    background: linear-gradient(90deg, var(--gold-a) 0%, var(--gold-c) 100%);
    border: 0; font-size: 14px; color:#1a1304;
    border: 1px solid rgba(255,208,85,.25);
    box-shadow: 0 8px 20px rgba(255,193,7,.22);
}

.img-100{ width: 100% }
.img-50{ width: 50% }

.image-container{ position: relative }
.thumbnail-image{ border-radius: 10px !important }

.discount{
    background-color: #c0392b;
    padding: 1px 4px;
    font-size: 10px; border-radius: 6px; color: #fff;
}

.wishlist{
    height: 25px; width: 25px; background-color: #000;
    display:flex; justify-content:center; align-items:center; border-radius:50%;
    box-shadow: 0 4px 8px rgba(0,0,0,.2), 0 6px 20px rgba(0,0,0,.19);
}

.first{ position: absolute; width: 100%; padding: 4px }

.dress-name{
    font-size: 13px; font-weight: bold; width: 75%; margin-bottom: 0; text-align: left; color: var(--gold-50);
}

.rating-star{ font-size: 10px !important }
.rating-number{ font-size: 10px; color: #b6a676 }
.buy{ font-size: 12px; font-weight: 500 }

.voutchers{
    border: none; border-radius: 5px; width: 100%; overflow: hidden;
    background: linear-gradient(90deg, var(--gold-a) 0%, var(--gold-c) 100%);
    box-shadow: 0 8px 18px rgba(255,193,7,.18);
}
.voutcher-divider{ display: flex }
.voutcher-left{ width: 65%; padding-top: 2px }
.voutcher-name{ color: #1a1304; font-size: 9px; font-weight: 700 }
.voutcher-code{ color: #1a1304; font-size: 10px; font-weight: 900; text-shadow: 0 1px 0 rgba(255,255,255,.35) }
.voutcher-right{
    width: 35%; color: #fff;
    background: linear-gradient(180deg, var(--gold-c) 0%, var(--gold-d) 100%);
}

.discount-percent{ font-size: 10px; font-weight: bold; position: relative; top: 9px }
.off{ font-size: 10px; position: relative; bottom: 5px }

.border-top{ border-top-right-radius: 10px; border-top-left-radius: 10px }

.semi-container{ width: 100%; height: auto }
.container-semi-text{ padding: 5px; color: var(--gold-50); font-size: 12px }

.cs-height{ height: 130px }
@media (max-width: 992px){ .cs-height{ max-height: 95px } }

/* =========================================================
   (HAPUS BLOK TOKEN BIRU LAMA DI BAWAH INI — DIGANTI AURUM)
   ========================================================= */
/* Previously:
:root{
  --v-bg: #0e1622; ... (dst)
}
*/
/* --- Logo: bigger + aurum glow --- */
.logo img{
  width: clamp(14rem, 24vw, 22rem) !important; /* lebih besar dari sebelumnya */
  display:block;
  margin: 1.2rem auto .6rem;
  filter: drop-shadow(0 10px 22px rgba(255,193,7,.25));
}

/* --- Glitch layers setup (pakai --logo dari inline style) --- */
.logo-glitch{
  position: relative;
  display: inline-block;
  isolation: isolate;
}
.logo-glitch .glitch-layer{
  position:absolute; inset:0;
  background: var(--logo) center/contain no-repeat;
  mix-blend-mode: screen;
  pointer-events:none;
  opacity:0; /* idle = halus */
  filter: drop-shadow(0 0 10px rgba(255,193,7,.18));
}

/* Warna channel */
.logo-glitch .glitch-magenta{
  filter: hue-rotate(-30deg) saturate(1.3) drop-shadow(0 0 8px rgba(255,75,216,.45));
}
.logo-glitch .glitch-cyan{
  filter: hue-rotate(120deg) saturate(1.2) drop-shadow(0 0 8px rgba(134,255,243,.45));
}

/* Idle subtle flicker */
@keyframes aurumGlitchIdle {
  0%, 92%, 100% { transform: translate(0,0); opacity:0 }
  93% { transform: translate(-1px, 0.5px); opacity:.35 }
  96% { transform: translate(1px, -0.5px); opacity:.3 }
  98% { transform: translate(-0.5px, 1px); opacity:.28 }
}
.logo-glitch .glitch-magenta{ animation: aurumGlitchIdle 4.5s linear infinite }
.logo-glitch .glitch-cyan   { animation: aurumGlitchIdle 5.2s linear infinite reverse }

/* Hover/Focus: glitch penuh */
@keyframes aurumGlitchBurst1{
  0%{ transform: translate(0,0); clip-path: inset(0 0 0 0); opacity:.85 }
  20%{ transform: translate(-2px,-1px); clip-path: inset(10% 0 0 0) }
  40%{ transform: translate(2px,1px);  clip-path: inset(0 0 20% 0) }
  60%{ transform: translate(-1px,2px); clip-path: inset(30% 0 0 0) }
  80%{ transform: translate(1px,-2px); clip-path: inset(0 0 40% 0) }
  100%{ transform: translate(0,0); clip-path: inset(0 0 0 0) }
}
@keyframes aurumGlitchBurst2{
  0%{ transform: translate(0,0); clip-path: inset(0 0 0 0); opacity:.85 }
  20%{ transform: translate(2px,1px);  clip-path: inset(0 0 12% 0) }
  40%{ transform: translate(-2px,-1px);clip-path: inset(22% 0 0 0) }
  60%{ transform: translate(1px,-2px); clip-path: inset(0 0 34% 0) }
  80%{ transform: translate(-1px,2px); clip-path: inset(44% 0 0 0) }
  100%{ transform: translate(0,0); clip-path: inset(0 0 0 0) }
}
.logo-glitch:hover .glitch-layer,
.logo-glitch:focus-within .glitch-layer{
  opacity:.95;
}
.logo-glitch:hover .glitch-magenta,
.logo-glitch:focus-within .glitch-magenta{
  animation: aurumGlitchBurst1 .6s steps(1,end) infinite;
}
.logo-glitch:hover .glitch-cyan,
.logo-glitch:focus-within .glitch-cyan{
  animation: aurumGlitchBurst2 .6s steps(1,end) infinite reverse;
}

/* Garis scan CRT tipis di atas logo */
.logo-glitch::after{
  content:"";
  position:absolute; inset:0;
  background-image: linear-gradient(transparent 97%, rgba(255,208,85,.06) 100%);
  background-size: 100% 3px;
  pointer-events:none;
  opacity:.25;
  mix-blend-mode: screen;
}

/* Aksesibilitas: nonaktifkan animasi untuk pengguna reduce-motion */
@media (prefers-reduced-motion: reduce){
  .logo-glitch .glitch-layer,
  .logo-glitch:hover .glitch-layer{ animation:none !important; opacity:0 !important; }
}