/* =======================================================================
   styles.css — optimized & themable
   ======================================================================= */

/* ---------- Root tokens ---------- */
:root{
  /* Base */
  --bg-body: #000000;
  --bg-overlay: rgba(17,17,17,.9);
  --text:#ffffff;
  --text-dim:#e0e0e0;

  /* Brand */
  --primary:#c41d07;
  --accent:#ee4b00;
  --danger:#000000;

  /* Footer gradient (mudah diganti) */
  --footer-from: rgba(0, 0, 0, 0.6);
  --footer-to:   rgba(0, 0, 0, 0.95);
  --footer-link: #000000;

  /* Surfaces & effects */
  --shadow-strong: 0 25px 80px rgba(0,0,0,.6);
  --shadow-med:    0 10px 40px rgba(0,0,0,.35);
  --shadow-lite:   0 4px 12px rgba(0,0,0,.25);

  --radius-lg: 16px;
  --radius-xl: 24px;

  /* Animations */
  --tr-fast: .25s ease;
  --tr-med:  .4s ease;
}

/* ---------- Global ---------- */
*,
*::before,
*::after{ box-sizing:border-box; }
html, body{ height:100%; }

body{
  margin:0; padding:0; color:var(--text);
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  background: var(--bg-body) url("/img/permandangan.webp") center/cover no-repeat fixed;
}

/* Reduce motion for sensitive users */
@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important; }
}

.bg-red-black {
    background: linear-gradient(180deg, #14172e, #000000);
            padding: 1rem 0;
            box-shadow: inset 0 -1px 3px rgba(0,0,0,0.05);
        }

/* ---------- Footer ---------- */
footer{
  /* pakai var + fallback, jadi kalau var belum ada tetap tampil */
  background: linear-gradient(
    180deg,
    var(--footer-from, rgba(110, 65, 22, 0.473)),
    var(--footer-to,   rgba(0, 0, 0, 0.95))
  );
  padding: 20px 0;
  text-align: center;
}
footer a{
  color: var(--footer-link, #000000);
  text-decoration: none;
  transition: text-decoration var(--tr-fast, .25s ease);
}
footer a:hover{ text-decoration: underline; }

/* ---------- Navigation Buttons Section ---------- */
.nav-buttons-section{
  background-color: var(--bg-overlay);
  padding:25px 0;
  box-shadow: var(--shadow-med);
}

.nav-buttons{
  display:flex; flex-wrap:wrap; gap:15px; justify-content:center; align-items:center;
}

.nav-buttons a{
  position:relative; padding:14px 28px;
  color:#000; font-weight:700; font-size:.95rem; border-radius:12px;
  border:1px solid rgba(39,28,28,.1);
  background: linear-gradient(135deg, var(--accent), var(--primary));
  box-shadow:0 4px 12px rgba(196,13,13,.35);
  overflow:hidden;
  transition: transform var(--tr-fast), box-shadow var(--tr-fast), background var(--tr-fast);
  will-change: transform;
}
.nav-buttons a::before{
  content:""; position:absolute; inset:0;
  background: linear-gradient(135deg, #ffffff, var(--primary));
  transform: translateX(-100%) skewX(-20deg);
  transition: transform var(--tr-med);
  opacity:.25; pointer-events:none;
}
.nav-buttons a:hover{
  transform: translateY(-3px);
  box-shadow:0 10px 28px rgba(255,0,0,.35);
}
.nav-buttons a:hover::before{ transform: translateX(100%) skewX(-20deg); }

.nav-buttons img.img-verify{
  height:75px; margin-left:15px; cursor:pointer; border-radius:50%;
  border:2px solid var(--accent);
  transition: transform var(--tr-fast), box-shadow var(--tr-fast);
  box-shadow: var(--shadow-lite);
}
.nav-buttons img.img-verify:hover{
  transform: scale(1.08) rotate(3deg);
  box-shadow:0 6px 18px rgba(255,123,0,.4);
}

.nav-label{
  text-align:center; color:#000; margin-top:12px;
  font-size:14px; letter-spacing:.5px;
}

/* ---------- Main container (animated gradient) ---------- */
@keyframes gradientShift{
  0%,100%{background-position:0% 50%;}
  50%{background-position:100% 50%;}
}
main.container{
  background: linear-gradient(135deg, #290000, #1a1a1a, #000000, #0a1a2a);
  background-size:400% 400%;
  animation: gradientShift 20s ease infinite;
  padding:35px; border-radius:var(--radius-lg);
  box-shadow: var(--shadow-med);
  color:#fffdfe; /* lebih kontras dari #2e0303 */
  transition: background .5s ease;
}

/* ---------- Media blocks ---------- */
.product-gallery img,
.ratio iframe{
  border-radius:var(--radius-lg);
  box-shadow:0 8px 30px rgba(255,0,0,.35);
  transition: transform var(--tr-fast), box-shadow var(--tr-fast);
  will-change: transform;
}
.product-gallery img{ margin-bottom:20px; }
.product-gallery img:hover{
  transform: scale(1.02);
  box-shadow:0 12px 40px rgba(255,0,0,.5);
}

/* ---------- Article ---------- */
article h1, article h4{
  color:#fffdfe;
  text-shadow:0 0 8px #421919, 0 0 15px var(--primary);
}
article p, article ul, article ol{ color:var(--text); }
article a{
  color: var(--danger); font-weight:700; text-decoration:none;
  transition: color var(--tr-fast), text-shadow var(--tr-fast), text-decoration var(--tr-fast);
}
article a:hover{
  color: var(--primary);
  text-shadow:0 0 8px var(--primary);
  text-decoration:underline;
}

/* ---------- FAQ (accordion) ---------- */
.faq-section{
  background: linear-gradient(135deg, rgba(7, 7, 7, 0.6), rgba(0, 0, 0, 0.9));
  border-radius: var(--radius-xl);
  padding:40px; box-shadow:0 12px 45px rgba(155, 134, 92, 0.35);
  backdrop-filter: blur(10px);
  transition: transform var(--tr-fast), box-shadow var(--tr-fast);
  max-width:900px; margin:auto;
}
.faq-section h2{
  font-weight:700; letter-spacing:1px; color:#924518;
  text-shadow:0 0 12px #000000aa;
}
.accordion-item{
  margin-bottom:16px; border-radius:12px; overflow:hidden;
  transition: transform #000, box-shadow #000;
}
.accordion-item:hover{
  transform: translateY(-4px);
  box-shadow:0 16px 35px rgba(196,13,13,.35);
}
.accordion-button{
  background: linear-gradient(135deg, #000, #000);
  color:#fff; font-weight:600; font-size:1.05rem;
  border-radius:12px; box-shadow:0 6px 18px rgba(0,0,0,.25);
  transition: background #000, transform #000, color #000);
  padding:1rem 1.2rem; display:flex; justify-content:space-between; align-items:center;
}
.accordion-button:hover{ transform: scale(1.02); color:#863f16; }
.accordion-button:not(.collapsed){
  background: linear-gradient(135deg, #000, #472b0b);
  color:#fff; text-shadow:0 0 8px var(--primary);
}
.accordion-button .icon i{
  transition: transform #000;
  font-size:1rem;
}
.accordion-button:not(.collapsed) .icon i{ transform: rotate(180deg); }

.accordion-body{
  background: rgba(20,20,20,.85); color:var(--text-dim);
  border-top:1px solid rgba(255,0,0,.25);
  padding:1.2rem 1.5rem; font-size:.95rem; line-height:1.6;
  transition: background var(--tr-fast), color var(--tr-fast);
  border-radius:0 0 12px 12px;
}

/* ---------- Top Reviews ---------- */
.top-reviews{
  background: linear-gradient(135deg, #333332, #000);
  padding:60px 20px; border-radius:25px; max-width:1200px;
  margin:50px auto; box-shadow: var(--shadow-strong); color:#fff; overflow:hidden;
}
.section-title{
  font-size:2.2rem; text-align:center; color:#faf5f5;
  margin-bottom:40px; text-shadow:2px 2px 15px rgba(0,0,0,.35); letter-spacing:1px;
}
.reviews-list{
  display:flex; flex-wrap:wrap; gap:35px; justify-content:center;
}
.review-card{
  background: rgba(255,255,255,.03);
  backdrop-filter: blur(10px);
  border-radius:25px; padding:28px 22px;
  max-width:320px; flex:1 1 300px;
  box-shadow:0 15px 50px rgba(255, 255, 255, 0.35);
  transition: transform .5s ease, box-shadow .5s ease, border var(--tr-fast);
  cursor:pointer; position:relative; overflow:hidden;
  will-change: transform;
}
.review-card::before{
  content:""; position:absolute; inset:-50% auto auto -50%;
  width:200%; height:200%;
  background: linear-gradient(60deg, rgba(32, 32, 32, 0.25), rgba(12, 11, 11, 0.05), rgba(25, 25, 27, 0.25));
  transform: rotate(25deg); transition: all .5s ease;
  pointer-events:none;
}
.review-card:hover::before{ top:-20%; left:-20%; }
.review-card:hover{
  transform: translateY(-12px) scale(1.04);
  box-shadow:0 25px 80px rgba(206,60,2,.55);
  border:2px solid #f00317;
}
.review-rating{ display:flex; gap:5px; margin-bottom:12px; }
.review-rating span{
  font-size:1.2rem; color:#ffdd00; position:relative; display:inline-block;
  transition: transform var(--tr-fast);
}
.review-rating span.half::before{
  content:'★'; color:#ffdd00; position:absolute; width:50%; overflow:hidden; display:inline-block;
}
.review-rating span:hover{ transform: scale(1.2); }
.review-text{ font-size:1rem; line-height:1.6; color:var(--text-dim); min-height:70px; margin-bottom:12px; }
.review-author{ color:#fffdfd; font-weight:700; text-align:right; font-size:.95rem; margin-top:5px; }

/* ---------- Buttons (rainbow glow) ---------- */
.btn-custom{
  display:inline-block; width:100%; padding:14px 24px;
  font-size:18px; font-weight:700; text-align:center; text-transform:uppercase;
  border-radius:10px; border:2px solid transparent; background:#ffffff10; color:#fff;
  position:relative; overflow:hidden; z-index:1;
  transition: all var(--tr-med); box-shadow:0 4px 15px rgba(0,0,0,.2);
}
.btn-custom::before{
  content:""; position:absolute; top:-50%; left:-50%; width:200%; height:200%;
  background: linear-gradient(45deg, #aa3c09, #d4ad0e, #12a112, #0f5397, #14051a);
  background-size:400% 400%; z-index:-1; filter: blur(8px); opacity:0;
  transition: opacity var(--tr-med);
}
.btn-custom:hover{ color:#fff; border-color:transparent; background: rgba(0,0,0,.3); }
.btn-custom:hover::before{ opacity:1; animation: rainbowBG 3s linear infinite; }
@keyframes rainbowBG{
  0%,100%{background-position:0% 50%;}
  50%{background-position:100% 50%;}
}

/* ---------- Floating Music Button ---------- */
.music-float-button{
  position:fixed; right:20px; bottom:20px; z-index:9999;
  padding:12px 18px; font-size:16px; border:none; border-radius:50px;
  background-color:var(--primary); color:#fff; cursor:pointer;
  transition: background var(--tr-fast), transform var(--tr-fast);
  box-shadow:var(--shadow-lite);
}
.music-float-button:hover{ background-color:#ffe600; transform: translateY(-2px); }
@keyframes pulse{ 0%{scale:1;} 50%{scale:1.08;} 100%{scale:1;} }
.pulse-animation{ animation:pulse 1s infinite; }

/* ---------- Responsive ---------- */
@media (max-width: 992px){
  main.container{ padding:25px; }
}
@media (max-width: 768px){
  .nav-buttons{ flex-direction:column; }
  .nav-buttons img.img-verify{ margin:15px 0 0 0; }
}

/* ---------- Optional theme override ----------
[data-theme="alt"]{
  --footer-from: rgba(20,23,46,.9);
  --footer-to:   rgba(255,139,7,.75);
}
*/