/* === WazBot Red Theme - Responsive with Better Readability === */

body {
  margin:0;
  padding:0;
  font-family: Arial, sans-serif;
  background:#111;
  color:#333;
  line-height:1.7; /* ✅ Lebih lega di desktop */
}

/* Wrapper */
.wrapper {
  width:90%;
  max-width:860px;
  margin:0 auto;
  background:#fff;
  padding:20px;
  box-sizing:border-box;
}

/* Header */
header {
  background:#990000;
  color:#fff;
  text-align:center;
  padding:25px 10px;
}
header h1 {
  margin:0;
  font-size:32px;
  text-transform:uppercase;
}
header p {
  margin-top:8px;
  font-size:16px;
}

/* Navigation */
nav {
  background:#333;
  text-align:center;
  padding:10px 0;
}
nav a {
  color:#fff;
  text-decoration:none;
  margin:0 12px;
  font-weight:bold;
  font-size:14px;
}
nav a:hover {
  color:#ffd700;
}

/* Hero & Johnson box */
.hero,
.johnson-box {
  border:3px solid #990000;
  padding:25px;
  margin:25px 0;
  background:#fff8f8;
  border-radius:8px;
}
.hero h1,
.johnson-box h2 {
  text-align:center;
  color:#990000;
  margin-top:0;
}
.hero p {
  text-align:center;
  line-height:1.8;
  margin-bottom:15px;
}
.hero-img {
  max-width:100%;
  height:auto;
  margin:20px auto;
  display:block;
  border-radius:10px;
  box-shadow:0 4px 12px rgba(0,0,0,0.3);
}

/* Buttons */
.order-btn {
  display:block;
  background:#e60000;
  color:#fff;
  text-align:center;
  padding:15px;
  font-size:20px;
  font-weight:bold;
  margin:25px auto;
  text-decoration:none;
  width:80%;
  max-width:400px;
  border-radius:6px;
  box-shadow:0 4px #900;
  transition:all 0.2s ease;
}
.order-btn:hover {
  background:#c40000;
  transform:translateY(-2px);
}
/* === Tombol Khusus di Section Order === */
/* === Tombol di Form Order (Match Promo Style) === */
#order .order-btn {
  display:block;
  background:#e60000;
  color:#fff;
  text-align:center;
  padding:18px;
  font-size:20px;
  font-weight:bold;
  margin:25px auto 0;
  text-decoration:none;
  width:100%;
  max-width:480px;
  border:none;
  border-radius:6px;
  box-shadow:0 5px 0 #900; /* bayangan bawah merah tua */
  transition:all 0.2s ease;
  cursor:pointer;
}

#order .order-btn:hover {
  background:#c40000;
  transform:translateY(-2px);
  box-shadow:0 7px 0 #800; /* sedikit lebih tinggi saat hover */
}

#order .order-btn:active {
  transform:translateY(3px);
  box-shadow:0 2px 0 #900;
}

/* Boxes */
.box {
  border:2px solid #ccc;
  padding:25px;
  margin:25px 0;
  background:#fdfdfd;
  border-radius:8px;
}
.box h2 {
  color:#990000;
  text-align:center;
  margin-top:0;
  margin-bottom:20px;
}

/* === Pricing Table === */
.pricing-grid {
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap:20px;
  margin-top:20px;
}
.price-card {
  border:2px solid #ccc;
  border-radius:8px;
  background:#fff;
  padding:20px;
  text-align:center;
  transition:all 0.25s ease;
}
.price-card:hover {
  border-color:#990000;
  box-shadow:0 4px 10px rgba(0,0,0,0.1);
  transform:translateY(-3px);
}
.price-card h3 {
  color:#990000;
  margin-bottom:10px;
}
.price {
  font-size:24px;
  font-weight:bold;
  color:#e60000;
  margin-bottom:10px;
}
.price-card ul {
  list-style:none;
  padding:0;
  margin:10px 0;
}
.price-card ul li {
  margin:5px 0;
  font-size:14px;
}
.price-card .order-btn.small {
  width:90%;
  padding:10px;
  font-size:16px;
  margin-top:10px;
}
.price-card.highlight {
  background:#fff4f4;
  border-color:#e60000;
}
.price-card .badge {
  background:#e60000;
  color:#fff;
  padding:3px 10px;
  border-radius:12px;
  font-size:12px;
  margin-bottom:5px;
  display:inline-block;
}
.price-card.premium {
  background:#111;
  color:#fff;
  border-color:#e60000;
}
.price-card.premium h3 { color:#ffd700; }
.price-card.premium .price { color:#ffd700; }
.price-card.premium .premium-text {
  color:#ffd700;
  font-style:italic;
  margin-top:5px;
}
/* === Checklist Style === */
.checklist {
  list-style:none;
  padding:0;
  margin:12px 0;
  text-align:left;
}
.checklist li {
  margin:6px 0;
  padding-left:28px;
  position:relative;
  font-size:14.5px;
  line-height:1.6;
}
.checklist li::before {
  content:"✔";
  color:#e60000;
  position:absolute;
  left:5px;
  font-weight:bold;
}

/* Tombol CTA kecil dengan animasi lembut */
.order-btn.small {
  width:90%;
  padding:10px;
  font-size:16px;
  margin-top:10px;
  transition:all 0.25s ease;
}
.order-btn.small:hover {
  transform:translateY(-3px);
  background:#c40000;
  box-shadow:0 6px 10px rgba(0,0,0,0.2);
}


/* Paragraphs & Lists */
p {
  margin-bottom:15px;
}
ul {
  margin-left:25px;
  line-height:1.7;
}
ul li {
  margin-bottom:6px;
}

/* Blockquotes */
blockquote {
  border-left:4px solid #990000;
  padding-left:10px;
  font-style:italic;
  color:#444;
  margin:20px 0;
}
.highlight {
  color:#c40000;
  font-weight:bold;
}

/* Testimonials */
.testimonial {
  border-left:5px solid #990000;
  margin:18px 0;
  padding:12px 18px;
  background:#f8f8f8;
  font-style:italic;
  line-height:1.6;
}

/* FAQ */
.faq-item {
  margin-bottom:10px;
}
.faq-question {
  background:#990000;
  color:#fff;
  border:none;
  padding:12px;
  width:100%;
  text-align:left;
  cursor:pointer;
  font-weight:bold;
  font-size:15px;
  border-radius:5px;
}
.faq-answer {
  display:none;
  padding:12px 15px;
  background:#fff8f8;
  border-left:3px solid #990000;
  border-radius:0 0 5px 5px;
}
.faq-item.active .faq-answer {
  display:block;
}

/* Scarcity */
.scarcity-box {
  text-align:center;
  border:2px dashed #990000;
  background:#fff8f8;
  padding:12px;
  margin:18px 0;
  font-weight:bold;
  color:#990000;
  border-radius:8px;
}

/* === Top Features Section === */
.feature-highlight {
  margin:30px 0;
  padding:20px;
  border:2px solid #eee;
  border-radius:8px;
  background:#fff;
  transition:all 0.25s ease;
}
.feature-highlight:hover {
  border-color:#990000;
  box-shadow:0 3px 10px rgba(0,0,0,0.08);
}
.feature-highlight h3 {
  color:#990000;
  margin-bottom:10px;
  text-align:left;
}
.feature-highlight p {
  line-height:1.7;
  text-align:left;
}
.feature-highlight img.feature-img {
  max-width:100%;
  margin:15px auto;
  display:block;
  border-radius:8px;
  box-shadow:0 3px 12px rgba(0,0,0,0.15);
}
.feature-highlight ul {
  margin:10px 0 15px 20px;
  padding:0;
}
.feature-highlight ul li {
  margin:6px 0;
  position:relative;
  padding-left:22px;
}
.feature-highlight ul li::before {
  content:"✔";
  color:#e60000;
  position:absolute;
  left:0;
  font-weight:bold;
}


/* Footer */
footer {
  text-align:center;
  font-size:13px;
  padding:15px;
  background:#222;
  color:#aaa;
  margin-top:30px;
  border-radius:8px;
}

/* === Responsive Section === */
@media (max-width:768px) {
  header h1 {
    font-size:26px;
  }
  header p {
    font-size:14px;
  }
  .wrapper {
    width:95%;
    padding:15px;
  }
  nav a {
    display:inline-block;
    margin:6px;
    font-size:13px;
  }
  .order-btn {
    width:90%;
    font-size:18px;
    padding:14px;
  }
  .box {
    padding:18px;
  }
  ul {
    margin-left:15px;
  }
}

@media (max-width:500px) {
  nav {
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:6px;
  }
  nav a {
    display:block;
    background:#990000;
    padding:8px 10px;
    border-radius:4px;
    font-size:13px;
  }
  nav a:hover {
    background:#c40000;
    color:#fff;
  }
  .hero h1 {
    font-size:20px;
  }
  .hero p {
    font-size:14px;
  }
  .order-btn {
    width:95%;
    font-size:16px;
    padding:12px;
  }
  .testimonial {
    font-size:14px;
  }
  footer {
    font-size:12px;
  }
}

/* === Scroll Animation (Fade-In) === */
.fade-in {
  opacity:0;
  transform:translateY(40px);
  transition:opacity 0.8s ease, transform 0.8s ease;
}
.fade-in.visible {
  opacity:1;
  transform:translateY(0);
}
/* === Order Form Styling - Fix Width & Design === */
.order-form {
  max-width:480px;
  margin:0 auto;
  text-align:center;
}

.order-form .form-group {
  margin-bottom:15px;
}

.order-form input,
.order-form select {
  display:block;
  width:100%;
  box-sizing:border-box;
  padding:12px 14px;
  font-size:15px;
  border:2px solid #ccc;
  border-radius:6px;
  outline:none;
  transition:all 0.2s ease;
  appearance:none;
  background-color:#fff;
}

.order-form input:focus,
.order-form select:focus {
  border-color:#e60000;
  box-shadow:0 0 6px rgba(230,0,0,0.3);
}

/* Hilangkan panah bawaan browser, dan kasih panah custom di kanan */
.order-form select {
  background-image:linear-gradient(45deg, transparent 50%, #e60000 50%), 
                   linear-gradient(135deg, #e60000 50%, transparent 50%);
  background-position:calc(100% - 20px) calc(50% - 4px),
                      calc(100% - 15px) calc(50% - 4px);
  background-size:5px 5px, 5px 5px;
  background-repeat:no-repeat;
  cursor:pointer;
}

.order-form select:focus {
  background-image:linear-gradient(45deg, transparent 50%, #990000 50%), 
                   linear-gradient(135deg, #990000 50%, transparent 50%);
}

/* Supaya tombol sejajar bagus */
.order-form .order-btn {
  width:100%;
  max-width:480px;
  margin-top:10px;
}
/* Styling Countdown - WazBot Red Style */
.lw-countdown-container {
    background: #fff8f8; /* Menyamakan dengan background hero/johnson-box */
    border: 3px solid #990000; /* Menyamakan dengan border utama tema */
    border-radius: 8px; /* Menyamakan dengan radius box tema */
    padding: 25px 15px;
    max-width: 480px;
    margin: 25px auto;
    text-align: center;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    font-family: Arial, sans-serif;
}

.lw-countdown-title {
    font-size: 14px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #990000;
    margin-bottom: 15px;
    margin-top: 0;
}

.lw-countdown-flex {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.lw-time-box {
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Kartu Angka */
.lw-number-card {
    background: #fff;
    border: 2px solid #ccc;
    border-radius: 6px;
    width: 65px;
    height: 65px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

.lw-number-card span {
    font-size: 26px;
    font-weight: bold;
    color: #333;
}

.lw-number-card span.text-red {
    color: #e60000; /* Merah terang tombol */
}

/* Label & Separator */
.lw-label {
    font-size: 11px;
    font-weight: bold;
    text-transform: uppercase;
    color: #666;
    margin-top: 8px;
}

.lw-separator {
    font-size: 24px;
    font-weight: bold;
    color: #990000;
    margin-bottom: 22px; /* Menyeimbangkan posisi titik dua */
}

/* Responsif Mobile */
@media (max-width: 480px) {
    .lw-number-card {
        width: 55px;
        height: 55px;
    }
    .lw-number-card span {
        font-size: 20px;
    }
    .lw-countdown-container {
        width: 95%;
        padding: 20px 10px;
    }
}

/* ===== Marketplace Product Grid ===== */

.product-section{
padding:40px 20px;
max-width:1200px;
margin:auto;
}

.product-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
gap:28px;
margin-top:30px;
}

.product-card{
background:#fff;
border-radius:10px;
overflow:hidden;
border:1px solid #e5e5e5;
transition:all .3s ease;
box-shadow:0 4px 12px rgba(0,0,0,0.05);
}

.product-card:hover{
transform:translateY(-6px);
box-shadow:0 10px 25px rgba(0,0,0,0.15);
border-color:#990000;
}

.product-image{
width:100%;
height:180px;
object-fit:cover;
background:#f5f5f5;
}

.product-body{
padding:18px;
text-align:center;
}

.product-title{
font-size:20px;
font-weight:bold;
color:#990000;
margin-bottom:8px;
}

.product-desc{
font-size:14px;
color:#555;
margin-bottom:16px;
line-height:1.6;
}

.product-btn{
display:inline-block;
background:#e60000;
color:#fff;
padding:10px 20px;
border-radius:6px;
text-decoration:none;
font-weight:bold;
transition:all .2s ease;
}

.product-btn:hover{
background:#c40000;
transform:translateY(-2px);
}

.section-title{
text-align:center;
font-size:28px;
color:#990000;
margin-bottom:10px;
}

.section-sub{
text-align:center;
color:#666;
margin-bottom:30px;
}

/* === Why Us Grid === */

.why-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:20px;
margin-top:25px;
}

.why-card{
border:1px solid #ddd;
border-radius:8px;
padding:20px;
background:#fff;
text-align:center;
transition:all .25s ease;
}

.why-card:hover{
border-color:#990000;
box-shadow:0 5px 15px rgba(0,0,0,0.1);
transform:translateY(-4px);
}

.why-card h3{
color:#990000;
margin-bottom:10px;
font-size:18px;
}

.why-card p{
font-size:14px;
line-height:1.6;
color:#555;
}

/* responsive */

@media(max-width:768px){
.why-grid{
grid-template-columns:repeat(2,1fr);
}
}

@media(max-width:480px){
.why-grid{
grid-template-columns:1fr;
}
}

/* === Testimonial Grid === */

.testimonial-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:20px;
margin-top:25px;
}

.testimonial-card{
border:1px solid #ddd;
border-radius:8px;
padding:20px;
background:#fff;
transition:all .25s ease;
}

.testimonial-card:hover{
border-color:#990000;
box-shadow:0 5px 15px rgba(0,0,0,0.1);
transform:translateY(-4px);
}

.testimonial-text{
font-style:italic;
font-size:14px;
line-height:1.6;
margin-bottom:12px;
color:#444;
}

.testimonial-author{
font-weight:bold;
color:#990000;
font-size:14px;
}

.testimonial-role{
font-size:12px;
color:#777;
}

/* responsive */

@media(max-width:768px){
.testimonial-grid{
grid-template-columns:repeat(2,1fr);
}
}

@media(max-width:480px){
.testimonial-grid{
grid-template-columns:1fr;
}
}