@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;800&display=swap');

:root{
  --brand:#c8102e;          /* merah utama */
  --brown:#2b1b14;          /* dark brown */
  --text:#fff;
  --bg:#fafafa;
  --muted:#6b7280;
}

*{box-sizing:border-box}
body{margin:0;font-family:Poppins,Inter,system-ui,Segoe UI,Roboto,Arial,sans-serif;background:var(--bg);color:#111}
.wrap{max-width:1200px;margin:0 auto;padding:0 18px}

/* =============== NAVBAR (as old) =============== */
.site-header{
  background:linear-gradient(90deg, var(--brown) 0%, #6f0f12 20%, var(--brand) 50%, #6f0f12 80%, var(--brown) 100%);
  color:var(--text); position:sticky; top:0; z-index:50;
}
.nav-wrap{display:flex;align-items:center;justify-content:space-between;padding:12px 0}
.brand{display:flex;align-items:center;gap:10px;color:var(--text);text-decoration:none;font-weight:800}
.logo{height:36px;width:auto}
.nav a{color:var(--text);text-decoration:none;margin:0 10px;font-weight:600}
.nav a:hover{opacity:.95}
.nav a.active{border-bottom:2px solid rgba(255,255,255,.95); padding-bottom:6px}
/* We keep .btn-outline for generic use, but not used for Rewards menu now */
.btn-outline{padding:8px 12px;border:1px solid rgba(255,255,255,.7);border-radius:10px;color:var(--text);text-decoration:none}

/* Language inline (BM | EN) */
.lang-inline{ margin-left:10px; font-weight:700; }
.lang-inline a{ color:var(--text); text-decoration:none; }
.lang-inline a:hover{ opacity:.9; }
.lang-inline .sep{ margin:0 6px; color:rgba(255,255,255,.85); }
.lang-inline a.active{ text-decoration:underline; }

/* =============== HERO (GLOBAL) =============== */
.hero{position:relative;height:64vh;min-height:420px;overflow:hidden}
.hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero-overlay{position:absolute;inset:0;background:linear-gradient(to bottom, rgba(0,0,0,.45), rgba(0,0,0,.35))}
.hero-content{position:relative;z-index:2;color:#fff;display:flex;flex-direction:column;justify-content:center;height:100%}
.hero-content h1{font-size:clamp(28px,4.2vw,48px);margin:0 0 8px;text-shadow:0 2px 24px rgba(0,0,0,.35)}
.hero-content p{font-size:clamp(15px,1.6vw,18px);max-width:760px;line-height:1.6;opacity:.95}
.cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:16px}
.btn{display:inline-block;background:#fff;color:#111;padding:12px 16px;border-radius:12px;text-decoration:none;font-weight:800;border:1px solid transparent}
.btn.outline{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.75)}
.btn:hover{filter:brightness(1.03)}
/* buttons in hero turn white with black text (per request) */
.hero .btn{ background:#fff; color:#111; border-color:#fff; }
.hero .btn.outline{ background:transparent; color:#fff; border-color:#fff; }

/* Reward Hero slight tweak (still same look) */
.reward-hero .hero-overlay{ background:linear-gradient(to bottom, rgba(0,0,0,.50), rgba(0,0,0,.30)); }

/* =============== SECTIONS / CARDS =============== */
.section{padding:64px 0}
.section-white{background:#fff}
.section-title{margin:0 0 18px;font-size:1.8rem}
.grid{display:grid;gap:18px}
.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.card{background:#fff;border:1px solid #eee;border-radius:16px;padding:18px;box-shadow:0 10px 28px rgba(0,0,0,.06)}
.card h3{margin:6px 0 8px}
.muted{color:var(--muted)}

/* =============== PRODUCTS =============== */
.product-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.pitem{background:#fff;border:1px solid #eee;border-radius:12px;overflow:hidden}
.pitem img{width:100%;height:200px;object-fit:cover;display:block}
.pitem figcaption{padding:10px}

.product-list .product-item{display:flex;gap:14px;border:1px solid #eee;border-radius:12px;padding:12px;margin:10px 0;background:#fff}
.product-list .product-item img{width:140px;height:100px;object-fit:cover;border-radius:8px}

/* =============== CTA STRIP =============== */
.cta-strip{background:linear-gradient(90deg, var(--brand), #8f0f10);color:#fff}
.cta-strip .wrap{display:flex;align-items:center;justify-content:space-between;padding:16px 0}
.cta-strip .btn{background:#fff;border:none;color:#111}

/* =============== FOOTER (same as old) =============== */
.site-footer{background:#111;color:#ddd;margin-top:40px}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:18px;padding:26px 0}
.site-footer a{color:#ddd}
.copy{border-top:1px solid #222;padding:10px 0;color:#aaa;text-align:center}

/* =============== TABLE & FORMS (mini-CRUD) =============== */
.table{width:100%;border-collapse:collapse;background:#fff;border:1px solid #eee;border-radius:12px;overflow:hidden}
.table th,.table td{padding:10px;border-bottom:1px solid #eee;text-align:left}
.card form input,.card form textarea,input,textarea,select{width:100%;padding:10px;border:1px solid #ddd;border-radius:10px;background:#fff}

/* =============== MOBILE NAV (Hamburger) =============== */
.nav-toggle{
  display:none; flex-direction:column; justify-content:center; gap:5px;
  width:36px; height:36px; background:transparent; border:0; cursor:pointer; margin-left:auto;
}
.nav-toggle span{width:100%; height:3px; background:#fff; border-radius:4px; transition:.25s}
.nav-toggle.active span:nth-child(1){ transform:translateY(8px) rotate(45deg); }
.nav-toggle.active span:nth-child(2){ opacity:0; }
.nav-toggle.active span:nth-child(3){ transform:translateY(-8px) rotate(-45deg); }

.site-header.scrolled{ box-shadow:0 6px 18px rgba(0,0,0,.12); }

/* =============== REWARDS (tiers) =============== */
.km-tier-section{ text-align:center; padding:80px 0;
  background:linear-gradient(180deg, #2b1b14 0%, #6f0f12 30%, #b87333 100%); color:#fff; }
.km-title{ font-size:clamp(28px,4vw,42px); margin:0 0 10px; font-weight:800; }
.km-subtitle{ font-size:clamp(15px,1.4vw,18px); opacity:.95; margin-bottom:40px; }
.km-tier-wrap{ display:flex; align-items:center; justify-content:center; gap:26px; flex-wrap:wrap; }
.km-tier{ min-width:200px; }
.km-icon{ width:80px; height:80px; margin:0 auto 14px; background:#fff; color:#2b1b14;
  border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:38px; font-weight:900; }
.km-tier h3{ margin:0; font-size:18px; font-weight:800; }
.km-x{ font-size:24px; font-weight:900; margin:2px 0; }
.km-range{ opacity:.88; font-size:14px; }
.km-line{ flex:1; height:2px; background:rgba(255,255,255,.25); }
.km-note{ max-width:780px; margin:40px auto 0; font-size:14px; opacity:.95; }

/* =============== RESPONSIVE =============== */
@media (max-width:980px){
  .product-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grid-3{grid-template-columns:1fr}
  .km-tier-wrap{ gap:20px; }
}
@media(max-width:760px){
  .km-line{display:none}
  .km-tier-wrap{ flex-direction:column; gap:40px; }
}
@media (max-width:820px){
  .nav-toggle{ display:flex; }
  .nav-wrap{ position:relative; }
  .nav{
    position:absolute; left:0; right:0; top:100%;
    display:none; flex-direction:column; align-items:center; text-align:center;
    background:linear-gradient(90deg, #2b1b14 0%, #6f0f12 20%, var(--brand) 50%, #6f0f12 80%, #2b1b14 100%);
    padding:12px 0; border-top:1px solid rgba(255,255,255,.12);
    box-shadow:0 8px 24px rgba(0,0,0,.25); z-index:60;
  }
  .nav.show{ display:flex; }
  .nav a, .nav .btn-outline, .nav .lang-inline{ display:block; margin:8px 0; }
  .brand span{ display:none; }
}
html, body { max-width:100%; overflow-x:hidden; }
.table td, .table th { overflow-wrap:anywhere; }
/* =============== FLOAT CHAT (UI only) =============== */
.chat-fab{
  position:fixed; right:18px; bottom:18px; z-index:90;
  width:56px; height:56px; border-radius:50%;
  background:linear-gradient(135deg, var(--brown), var(--brand));
  color:#fff; display:flex; align-items:center; justify-content:center;
  box-shadow:0 10px 24px rgba(0,0,0,.25);
  cursor:pointer; border:0;
}
.chat-fab:hover{ filter:brightness(1.05); }
.chat-fab svg{ width:26px; height:26px; }

.chat-box{
  position:fixed; right:18px; bottom:86px; z-index:90;
  width:320px; max-width:92vw; border-radius:14px;
  background:#fff; border:1px solid #eee;
  box-shadow:0 18px 40px rgba(0,0,0,.20);
  display:none; overflow:hidden;
}
.chat-box.show{ display:block; }

.chat-head{
  background:linear-gradient(90deg, var(--brown) 0%, #6f0f12 20%, var(--brand) 50%, #6f0f12 80%, var(--brown) 100%);
  color:#fff; padding:12px 14px; display:flex; align-items:center; justify-content:space-between;
}
.chat-head .ttl{ font-weight:800; }
.chat-head .xbtn{ background:transparent; border:0; color:#fff; cursor:pointer; font-size:20px; line-height:1; }

.chat-body{
  height:320px; background:#fafafa; padding:12px; overflow:auto;
  display:flex; flex-direction:column; gap:10px;
}
.chat-msg{
  max-width:82%; padding:10px 12px; border-radius:12px; font-size:14px; line-height:1.45;
  border:1px solid #eee; background:#fff;
}
.chat-msg.me{ margin-left:auto; background:#e9f7ff; border-color:#d2ecff; }
.chat-msg.bot{ background:#fff; }

.chat-foot{
  display:flex; gap:8px; padding:10px; border-top:1px solid #eee; background:#fff;
}
.chat-foot input{
  flex:1; padding:10px 12px; border:1px solid #ddd; border-radius:10px;
}
.chat-foot button{
  padding:10px 12px; border:0; border-radius:10px; cursor:pointer; font-weight:800;
  background:linear-gradient(135deg, var(--brown), var(--brand)); color:#fff;
}
.chat-foot button:hover{ filter:brightness(1.05); }

@media (max-width:420px){
  .chat-box{ right:10px; left:10px; width:auto; }
}
/* Rewards hero without text */
.reward-plain { height: 46vh; min-height: 360px; }
.reward-plain .hero-overlay { background: linear-gradient(to bottom, rgba(0,0,0,.45), rgba(0,0,0,.30)); }
/* Ensure no accidental spacing from hero-content */
.reward-plain .hero-content { display: none; }
/* Rewards: tier cards */
.rw-tier-grid .tier-card{ text-align:center }
.tier-card .badge{
  display:inline-block; font-weight:900; font-size:18px;
  background:#fff5f5; color:#6c1b1b; border:1px solid #f2d4d4;
  padding:6px 12px; border-radius:999px; margin-bottom:10px;
}
.clean-list{ list-style:none; padding-left:0; margin:10px 0 0 }
.clean-list li{ margin:6px 0 }

/* (reuse km-tier-section styles you already have) */
/* HERO buttons: outline by default, fill on hover */
.hero .cta .btn,
.reward-hero .cta .btn {
  background: transparent;
  color: #fff;
  border: 1px solid rgba(255,255,255,.9);
  transition: background .18s ease, color .18s ease, border-color .18s ease;
}

.hero .cta .btn:hover,
.reward-hero .cta .btn:hover {
  background: #fff;
  color: #111;
  border-color: #fff;
}

/* kalau ada .btn.outline sedia ada, samakan rasa hover-nya dalam hero */
.hero .cta .btn.outline:hover,
.reward-hero .cta .btn.outline:hover {
  background: #fff;
  color: #111;
  border-color: #fff;
}
/* Floating WhatsApp button – guna ikon online */
.chat-whatsapp{
  position: fixed;
  right: 18px;
  bottom: 20px;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: #25D366;               /* WhatsApp green */
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 24px rgba(0,0,0,.18), 0 4px 10px rgba(0,0,0,.12);
  text-decoration: none;
  z-index: 1100;
  transition: transform .15s ease, filter .15s ease, background .15s ease;
}
.chat-whatsapp::before{
  content:"";
  position:absolute;
  inset:6px;
  border-radius:50%;
  box-shadow: 0 0 0 2px rgba(255,255,255,.9);  /* white ring untuk kontras */
}
.chat-whatsapp:hover{
  background:#1ebe5d;
  transform: translateY(-2px);
  filter: brightness(1.02);
}

/* Ikon dari CDN (simple-icons) memang hitam; jadikan putih */
.chat-whatsapp .wa-ico{
  width: 30px;
  height: 30px;
  display: block;
  filter: invert(1);        /* tukar hitam → putih */
  opacity: .95;
}

@media (max-width:640px){
  .chat-whatsapp{ right:14px; bottom:14px; width:56px; height:56px; }
  .chat-whatsapp .wa-ico{ width:28px; height:28px; }
}
/* Map card */
.map-card { overflow: hidden; }
.map-frame {
  position: relative;
  width: 100%;
  border-radius: 12px;
  border: 1px solid #eee;
  overflow: hidden;
  /* 16:9 ratio */
  padding-top: 56.25%;
  background: #f6f6f6;
}
.map-frame iframe {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  display: block;
}
/* ===== Red Button (Short version) ===== */
.btn-red {
  display: inline-block;
  padding: 10px 26px;
  border: none;
  border-radius: 8px;
  background: #c62828; /* Deep Red */
  color: #fff;
  font-weight: 600;
  font-size: 15px;
  cursor: pointer;
  transition: background 0.25s ease, transform 0.15s ease;
}

.btn-red:hover {
  background: #e53935; /* Light Red */
  transform: translateY(-1px);
}

.btn-red.small-btn {
  margin-top: 12px;
}


/* Checkbox terms: kecil & vertically centered */
.form-check{
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
}
.form-check input[type="checkbox"]{
  width: 16px;
  height: 16px;
  accent-color: var(--brand);
  vertical-align: middle;
}
.form-check label{
  font-size: 14px;
  line-height: 1.4;
  color: #333;
}
.form-check a{
  color: var(--brand);
  text-decoration: underline;
}

/* Actions */
.form-actions{
  display: flex;
  gap: 10px;
  margin-top: 14px;
  flex-wrap: wrap;
}
.btn.btn-primary{
  background:#fff;
  color:#111;
  border:1px solid #fff;
}
.btn.btn-primary:hover{
  filter: brightness(1.03);
}
.faq-list { display:grid; gap:14px; }
.faq-item { background:#fff; border:1px solid #eee; border-radius:12px; padding:14px; }
.faq-q { margin:0 0 6px; font-weight:800; }
.faq-a { margin:0; color:#555; }
.btn.outline {
  color: #b30000; /* merah kijang */
  border: 2px solid #b30000;
  background: transparent;
  font-weight: 600;
  transition: all 0.25s ease;
}

.btn.outline:hover {
  background: #b30000;
  color: #fff;
  box-shadow: 0 0 6px rgba(179, 0, 0, 0.4);
}