:root{
  --glorin-brown:#3b2a15;
  --glorin-brown-2:#2c1e0f;
  --glorin-gold:#d6b25e;
  --glorin-gold-2:#b8923f;
  --glorin-cream:#fff6e2;
}

body{
  background: #fff;
  color: #000;
}

.topbar{
  background: #b10000;
  color:#fff;
  font-size: 12px;
}

.navbar-glorin{
  background: var(--glorin-brown-2);
  border-bottom: 1px solid rgba(255,255,255,.12);
}

.section-title{
  letter-spacing: .5px;
  color: var(--glorin-cream);
}

.section-wrap{
  background: rgba(0,0,0,.15);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 16px;
}

.card-glorin{
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 16px;
  overflow: hidden;
}

.card-img-fixed{
  width: 100%;
  height: 320px;            /* kamu bisa ubah */
  object-fit: cover;
  background: rgba(255,255,255,.08);
}

.badge-gold{
  background: linear-gradient(180deg,var(--glorin-gold),var(--glorin-gold-2));
  color: #1b140b;
}

.btn-gold{
  background: linear-gradient(180deg,var(--glorin-gold),var(--glorin-gold-2));
  border: none;
  color: #1b140b;
  font-weight: 700;
}
.btn-gold:hover{ filter: brightness(.95); }

.text-cream{ color: #000}
.muted-cream{ color: rgba(255,246,226,.75); }

.footer{
  background: rgba(0,0,0,.2);
  border-top: 1px solid rgba(255,255,255,.10);
}

.form-dark .form-control,
.form-dark .form-select{
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.15);
  color:#fff;
}
.form-dark .form-control::placeholder{ color: rgba(255,255,255,.55); }
.form-dark label{ color: rgba(255,246,226,.85); }
:root{
  --bar-brown:#6b4a17;      /* coklat bar seperti contoh */
  --bar-brown-dark:#5a3f14; /* opsional */
}

/* BAR JUDUL (ABOUT GLORIN / 3 LANGKAH...) */
.section-bar{
  background: var(--bar-brown);
  color: #fff;
  font-weight: 800;
  text-transform: uppercase;
  text-align: center;
  letter-spacing: .5px;
  padding: 10px 12px;
}

/* AREA PUTIH DI BAWAH BAR (isi teks deskripsi) */
.section-white{
  background: #fff;
  color: #111;
  padding: 14px 0;
}

.section-white p{
  margin: 0;
  font-size: 14px;
  line-height: 1.7;
  font-weight: 600;
}

.section-white strong{
  font-weight: 800;
}



    :root{
      --brown:#3b2a15;
      --brown2:#2c1e0f;
      --cream:#fff6e2;
      --gold:#d6b25e;
      --gold2:#b8923f;
      --red:#b10000;
      --whitePanel:#ffffff;
    }

    
    .topbar{
      background: #ff0000;
      color:#fff;
      font-size:12px;
      padding:6px 10px;
      text-align:center;
      position: sticky;
      top: 0;
      z-index: 1031;
    }

    .navwrap{
      background: var(--brown2);
      border-bottom: 1px solid rgba(255,255,255,.12);
      position: sticky;
      top: 28px; /* tinggi topbar */
      z-index: 1030;
    }

    .brand{ font-weight:800; color: var(--gold); letter-spacing:.5px; }
    .nav-icon{
      width: 28px; height: 28px;
      border: 1px solid rgba(255,255,255,.20);
      border-radius: 8px;
      display:flex; align-items:center; justify-content:center;
      color:#fff; background: rgba(255,255,255,.06);
      cursor:pointer;
    }

    .section-title{
      text-align:center;
      font-weight:800;
      letter-spacing:.6px;
      color: var(--cream);
      margin: 14px 0 10px;
    }

    .panel{
      background: rgba(255,255,255,.06);
      border: 1px solid rgba(255,255,255,.10);
      border-radius: 14px;
    }

    .about-bar{
      background: rgba(255,255,255,.10);
      border-top: 1px solid rgba(255,255,255,.12);
      border-bottom: 1px solid rgba(255,255,255,.12);
      padding: 10px 12px;
      text-align:center;
      font-weight:700;
      color: var(--cream);
    }
    .about-text{
      font-size: 13px;
      color: #000;
      line-height: 1.55;
    }

    .step-img{
      width:50%;
      object-fit: contain;
      background: rgba(255,255,255,.05);
      border-radius: 12px;
      border: 1px solid rgba(255,255,255,.10);
      padding: 10px;
    }
    .step-caption{
      text-align:center;
      font-size: 12px;
      color: rgba(255,246,226,.85);
      margin-top: 8px;
    }

    .white-section{
      background: #fff;
      color: #111;
    }

    .mind-title{
      text-align:center;
      font-weight: 800;
      letter-spacing:.6px;
      color: var(--cream);
      margin: 10px 0;
    }

    .mind-box{
      background: rgba(255,255,255,.10);
      border-top: 1px solid rgba(255,255,255,.12);
      border-bottom: 1px solid rgba(255,255,255,.12);
      padding: 12px 12px;
    }

    .join-btn{
      background:#fff;
      border:1px solid rgba(0,0,0,.15);
      border-radius: 10px;
      font-weight: 700;
      padding: 10px 14px;
      white-space: nowrap;
    }

    /* collectible strip */
    .strip{
      overflow-x: auto;
      white-space: nowrap;
      padding-bottom: 6px;
    }
    .strip img{
      height: 70px;
      width: auto;
      object-fit: cover;
      border-radius: 10px;
      border: 1px solid rgba(255,255,255,.14);
      margin-right: 10px;
      background: rgba(255,255,255,.06);
    }

    /* cards grid */
    .card-collection{
      background: rgba(255,255,255,.06);
      border: 1px solid rgba(255,255,255,.10);
      border-radius: 14px;
      padding: 14px;
    }
    .card-item{
      background: rgba(255,255,255,.05);
      border: 1px solid rgba(255,255,255,.10);
      border-radius: 14px;
      overflow:hidden;
    }
    .card-item img{
      width:100%;
      object-fit: cover;
      background: rgba(255,255,255,.06);
    }

    /* reward list area */
    .reward-area{
      background: rgba(255,255,255,.08);
      border-top: 1px solid rgba(255,255,255,.12);
      border-bottom: 1px solid rgba(255,255,255,.12);
      padding: 14px 12px;
    }
    .reward-title{
      text-align:center;
      font-weight: 800;
      color: #000;
      margin: 8px 0 10px;
    }
    .reward-text{
      font-size: 12px;
      color: #000;
      line-height: 1.6;
      text-align:center;
      white-space: pre-line;
    }

    /* product catalog (white) */
    .catalog-head{
      background: var(--brown2);
      color: var(--cream);
      text-align:center;
      padding: 10px 12px;
      font-weight: 800;
      letter-spacing: .5px;
    }

    .product-card{
      border: 1px solid rgba(0,0,0,.08);
      border-radius: 14px;
      overflow:hidden;
      background:#fff;
    }
    .product-card img{
      width:100%;
      height: 220px;
      object-fit: cover;
      background:#f3f3f3;
    }

    .floating-wa{
      position: fixed;
      right: 18px;
      bottom: 18px;
      width: 44px;
      height: 44px;
      border-radius: 50%;
      background: #1fa855;
      display:flex;
      align-items:center;
      justify-content:center;
      color:#fff;
      font-weight: 800;
      box-shadow: 0 10px 20px rgba(0,0,0,.35);
      cursor:pointer;
      z-index: 1000;
    }
    :root{
  --bar-brown:#6b4a17; /* samakan dengan bar lain */
}

/* wrapper putih untuk konten reward */
.reward-white{
  background:#fff;
  color:#111;
  padding: 18px 0;
}

/* judul bar coklat */
.reward-titlebar{
  background: var(--bar-brown);
  color:#fff;
  font-weight: 800;
  text-transform: uppercase;
  text-align:center;
  letter-spacing: .6px;
  padding: 10px 12px;
}

/* isi konten */
.reward-content{
  max-width: 720px;
  margin: 0 auto;
  text-align:center;
  padding: 10px 16px;
}

.reward-content .group-title{
  font-weight: 800;
  margin-top: 10px;
  margin-bottom: 4px;
}

.reward-content .item{
  margin: 2px 0;
  font-weight: 600;
  font-size: 14px;
}

.reward-content .spacer{
  height: 10px;
}

:root{ --bar-brown:#6b4a17; }

/* judul bar coklat */
.glorin-strip-title{
  background: var(--bar-brown);
  color:#fff;
  font-weight:800;
  text-transform: uppercase;
  text-align:center;
  letter-spacing:.6px;
  padding:10px 12px;
}

/* area putih */
.glorin-strip-wrap{
  background:#fff;
  padding: 12px 0;
}

/* viewport strip */
.glorin-marquee{
  overflow:hidden;
  position:relative;
  width:100%;
}

/* track yang bergerak */
.glorin-marquee-track{
  display:flex;
  align-items:center;
  gap:14px;
  width:max-content;
  animation: glorinScrollLeft 28s linear infinite;
}

/* gambar kartu kecil */
.glorin-marquee img{
  height: 92px;              /* sesuaikan */
  width: auto;
  border-radius: 10px;
  border: 1px solid rgba(0,0,0,.10);
  background:#f3f3f3;
}

/* pause saat hover */
.glorin-marquee:hover .glorin-marquee-track{
  animation-play-state: paused;
}

/* arah default: jalan ke kiri */
@keyframes glorinScrollLeft{
  from{ transform: translateX(0); }
  to{ transform: translateX(-50%); }
}

/* kalau mau jalan ke kanan, pakai class .to-right */
.glorin-marquee.to-right .glorin-marquee-track{
  animation-name: glorinScrollRight;
}
@keyframes glorinScrollRight{
  from{ transform: translateX(-50%); }
  to{ transform: translateX(0); }
}

/* ===== TESTIMONI MARQUEE ===== */
.glorin-testi-title{
  background: var(--bar-brown);
  color:#fff;
  font-weight:800;
  text-transform: uppercase;
  text-align:center;
  letter-spacing:.6px;
  padding:10px 12px;
}

.glorin-testi-wrap{
  background:#fff;
  padding: 14px 0 18px;
}

.glorin-testi-marquee{
  overflow:hidden;
  width:100%;
}

.glorin-testi-track{
  display:flex;
  gap:14px;
  align-items:stretch;
  width:max-content;
  animation: glorinTestiLeft 30s linear infinite;
}

.glorin-testi-marquee:hover .glorin-testi-track{
  animation-play-state: paused;
}

/* arah kanan (opsional) */
.glorin-testi-marquee.to-right .glorin-testi-track{
  animation-name: glorinTestiRight;
}

@keyframes glorinTestiLeft{
  from{ transform: translateX(0); }
  to{ transform: translateX(-50%); }
}
@keyframes glorinTestiRight{
  from{ transform: translateX(-50%); }
  to{ transform: translateX(0); }
}

/* kartu testimoni */
.testi-card{
  width: 320px; /* lebar kartu (ubah jika mau) */
  background:#fff;
  border:1px solid rgba(0,0,0,.10);
  border-radius: 16px;
  padding: 12px;
  box-shadow: 0 6px 18px rgba(0,0,0,.08);
}

.testi-head{
  display:flex;
  gap:10px;
  align-items:center;
  margin-bottom: 8px;
}

.testi-avatar{
  width: 46px;
  height: 46px;
  border-radius: 12px;
  object-fit: cover;
  background:#f3f3f3;
  border:1px solid rgba(0,0,0,.08);
}

.testi-name{
  font-weight: 800;
  color:#111;
  line-height: 1.1;
}

.testi-meta{
  font-size: 12px;
  color:#666;
}

.testi-body{
  font-size: 13px;
  color:#222;
  line-height: 1.5;
  margin: 0;
}

/* ===== TESTIMONI CARD STRIP ===== */
.glorin-testi-title{
  background: var(--bar-brown);
  color:#fff;
  font-weight:800;
  text-transform: uppercase;
  text-align:center;
  letter-spacing:.6px;
  padding:10px 12px;
}

.glorin-testi-wrap{
  background:#fff;
  padding: 12px 0;
}

.glorin-testi-marquee{
  overflow:hidden;
  width:100%;
}

.glorin-testi-track{
  display:flex;
  align-items:center;
  gap:14px;
  width:max-content;
  animation: glorinTestiLeft 26s linear infinite;
}

.glorin-testi-marquee:hover .glorin-testi-track{
  animation-play-state: paused;
}

/* arah default: kiri */
@keyframes glorinTestiLeft{
  from{ transform: translateX(0); }
  to{ transform: translateX(-50%); }
}

/* kartu testimoni = kartu image */
.glorin-testi-card{
  height: 180px;              /* samakan tinggi dengan kartu lain */
  width: auto;
  border-radius: 14px;
  object-fit: cover;
  background:#f3f3f3;
  border: 1px solid rgba(0,0,0,.12);
}