/* =====================================================================
   brand.css — SATU-SATUNYA sumber token reka bentuk GASS OFF.

   Setiap nilai di bawah diukur terus daripada laman sumber pemilik
   tapak sumber pemilik (CSS Elementor `post-1516.css`, tema Astra,
   dan gaya terkira melalui penyemak imbas pada 360/414/768/1280px).
   Jangan reka nilai baharu di sini — ukur laman sumber dahulu.

     jalur utama            #154125   (hijau tua)
     jalur COD              #8A2222   (merah marun)
     footer                 #11100E
     kad pakej              #B2FAB7   (mint)
     aksen amber            #FFB400   (kaunter)
     aksen kuning           #FFD400   (highlight)
     hijau senarai          #17AE16
     merah CTA              #FF0000 / #ff1e16 / #e60000
     GASS / OFF             #0b632f / #ffbf00
     teks kelabu            #3F3F3F
     bingkai video          #346538
     teks badan             #334155 di atas putih
     bekas                  max-width 1140px, padding widget 10px
     jejari                 25px / 20px / 15px
     tipografi              Poppins 400-900, Montserrat (FAQ + footer)
     line-height badan      1.65
   ===================================================================== */
/* Muka taip @font-face ada dalam assets/fonts.css supaya checkout.css dan
   legal.css boleh berkongsi fail yang sama. Setiap halaman memautkannya
   sebelum helaian gayanya sendiri. */

:root{
  /* ---- warna ---- */
  --forest:#154125;
  --maroon:#8A2222;
  --night:#11100E;
  --mint:#B2FAB7;
  --amber:#FFB400;
  --yellow:#FFD400;
  --leaf:#17AE16;
  --cta:#FF0000;
  --cta-alt:#ff1e16;
  --cta-badge:#e60000;
  --gass:#0b632f;
  --off:#ffbf00;
  --grey:#3F3F3F;
  --ink:#334155;
  --white:#ffffff;
  --off-white:#EBEBEB;
  --vid-border:#346538;

  /* ---- tipografi ----
     Poppins dan Montserrat ialah webfont Google pada laman sumber. Di sini
     kedua-duanya DIHOSKAN SENDIRI daripada /assets/fonts (lihat @font-face
     di atas), jadi tiada permintaan ke fonts.googleapis.com atau
     fonts.gstatic.com berlaku pada bila-bila masa. Susunan fallback kekal
     untuk peranti yang gagal memuatkan woff2. */
  --ff:'Poppins','Segoe UI Variable Text','Segoe UI',system-ui,-apple-system,'Helvetica Neue',Arial,sans-serif;
  --ff-alt:'Montserrat','Segoe UI Variable Text','Segoe UI',system-ui,-apple-system,'Helvetica Neue',Arial,sans-serif;
  --ff-base:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen-Sans,Ubuntu,Cantarell,'Helvetica Neue',sans-serif;

  /* ---- metrik ---- */
  --container:1140px;
  --wrap-pad:10px;
  --gap:20px;

  /* ---- jejari ---- */
  --r-25:25px;
  --r-20:20px;
  --r-15:15px;

  /* ---- bayang laman sumber ---- */
  --sh-10:0px 0px 10px 0px rgba(0,0,0,0.5);
  --sh-10k:0px 0px 10px 0px #000000;
  --sh-9:0px 0px 9px 4px rgba(0,0,0,0.5);
  --sh-ring:0px 0px 0px 3px rgba(0,0,0,0.5);
}

/* =====================================================================
   Asas — sepadan dengan tema Astra pada laman sumber
   ===================================================================== */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--white);color:var(--ink);
  font-family:var(--ff-base);font-weight:400;
  /* `em`, bukan nombor. Laman sumber (tema Astra) mewariskan tinggi baris
     TERKIRA dalam px — 26.4px pada asas 16px, 24.08px pada 14.592px — jadi
     teks 20px atau 25px yang tidak mengisytiharkan tinggi barisnya sendiri
     kekal 26.4px. Nombor 1.65 akan menskala dan memecahkan irama itu. */
  font-size:14.592px;line-height:1.65em;
  overflow-x:hidden;-webkit-font-smoothing:antialiased;
}
@media(min-width:1025px){ body{font-size:16px} }
img{max-width:100%;height:auto;display:block;border:0}
picture{display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{margin:0;font-weight:600;line-height:1.3}
/* 1.75em = 28px pada teks 16px, 35px pada 20px, 43.75px pada 25px —
   diukur terus daripada laman sumber. Perenggan terakhir TIDAK disifarkan
   di sana, jadi jangan sifarkan di sini. */
p{margin:0 0 1.75em}
ul{margin:0;padding:0;list-style:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
[hidden]{display:none!important}

/* =====================================================================
   Susun atur seksyen — meniru struktur bekas/lajur Elementor.

   Laman sumber meletakkan hampir semua kandungan di dalam lajur tengah
   60% (lajur sisi 20% dan 19.332% kosong) dalam bekas 1140px. Di bawah
   768px lajur menjadi selebar penuh. Satu-satunya inset mendatar ialah
   padding 10px pada .elementor-widget-wrap.
   ===================================================================== */
.band{width:100%}
.band--forest{background:var(--forest);color:var(--white)}
.band--maroon{background:var(--maroon);color:var(--white)}
.band--night{background:var(--night);color:var(--white)}
.band--white{background:var(--white)}

.container{width:100%;max-width:var(--container);margin:0 auto}
.col{padding:var(--wrap-pad)}
.col>*+*{margin-top:var(--gap)}
@media(min-width:768px){
  .col--mid{width:60%;margin-left:20%}
  .col--half{width:50%}
}

.center{text-align:center}
.spacer-50{height:50px}

/* =====================================================================
   Tipografi laman sumber (nilai px sebenar setiap breakpoint)
   ===================================================================== */
.hd{font-family:var(--ff);text-align:center;margin-bottom:0}

/* .rotate-title — tajuk hero */
.rotate-title{
  text-align:center;font-family:var(--ff);
  font-size:50px;font-weight:800;line-height:1.25;color:var(--white);margin-bottom:0;
}
.rotate-word{color:var(--amber);display:inline-block;transition:opacity .3s ease,transform .3s ease}
.rotate-word.hide{opacity:0;transform:translateY(8px)}
.rotate-end{color:var(--white)}
@media(max-width:768px){ .rotate-title{font-size:30px} }

/* .btn-tempah — CTA merah berulang */
.btn-tempah{
  display:inline-block;background-color:var(--cta);color:var(--white);
  font-family:var(--ff);font-size:20px;font-weight:800;
  line-height:1.32em;padding:15px 40px;border-radius:var(--r-25);text-align:center;
  animation:tempahBounce 1.2s infinite;
}
.btn-tempah:hover{color:var(--white)}
.btn-tempah:focus-visible{outline:3px solid var(--yellow);outline-offset:3px}
@keyframes tempahBounce{
  0%,100%{transform:translateY(0)}
  20%{transform:translateY(-10px)}
  40%{transform:translateY(0)}
  55%{transform:translateY(-5px)}
  70%{transform:translateY(0)}
}
@media(max-width:767px){ .btn-tempah{font-size:18px;padding:14px 35px} }

/* kaunter pengguna */
.counter-pre,.counter-post{
  font-family:var(--ff);font-size:20px;font-weight:400;color:#000;text-align:center;margin-bottom:0;
}
/* .counter-post ialah <p> pada laman sumber, jadi ia mengekalkan margin
   bawah 1.75em (35px pada 20px, 52.5px pada 30px). .counter-pre ialah
   widget tajuk di sana dan tidak mempunyai margin itu. */
.counter-post{margin-bottom:1.75em}
.counter-num{
  font-family:var(--ff);font-size:69px;font-weight:600;line-height:1;
  color:var(--amber);text-align:center;font-variant-numeric:tabular-nums;margin-bottom:0;
}
@media(max-width:767px){
  .counter-pre{font-size:30px}
  .counter-post{font-size:30px;line-height:1.4}
}

/* petikan Azlee */
.quote-hd{font-family:var(--ff);font-size:24px;font-weight:400;color:var(--white);text-align:center;line-height:1.3}
.quote-sub{font-family:var(--ff);font-size:16px;font-weight:400;color:var(--white);text-align:center;margin-bottom:1.75em}
@media(max-width:767px){
  .quote-hd{font-size:28px;line-height:1.6}
  .quote-sub{font-size:20px}
  .quote-sub--lg{font-size:25px;line-height:1.5}
}

/* tajuk jalur hijau */
.hd-27{font-family:var(--ff);font-size:27px;font-weight:600;color:var(--white);text-align:center;line-height:1.3}
.hd-30{font-family:var(--ff);font-size:30px;font-weight:600;color:var(--white);text-align:center;line-height:1.3}
.hd-tahu{font-family:var(--ff);font-size:32px;font-weight:600;color:var(--white);text-align:center;line-height:1.3}
/* Julat tablet Elementor (768-1024px) mengecilkan dua tajuk ini kepada 25px. */
@media(min-width:768px) and (max-width:1024px){ .hd-tahu{font-size:25px} }
@media(max-width:767px){ .hd-tahu{font-size:35px} }

/* .bottom-headline */
.bottom-headline{text-align:center;font-family:var(--ff);font-weight:800;line-height:1.08;margin-bottom:0}
.bottom-headline-main{color:var(--white);font-size:30px}
.bottom-headline-highlight{
  display:inline-block;background:var(--cta-alt);color:var(--white);font-size:30px;
  padding:4px 18px 7px;margin-top:2px;
}
@media(max-width:1024px){
  .bottom-headline-main,.bottom-headline-highlight{font-size:38px}
}
@media(max-width:767px){
  .bottom-headline-main,.bottom-headline-highlight{font-size:25px}
  .bottom-headline-highlight{padding:4px 12px 6px}
}

/* teks putih besar "Tak ramai yang ambil peduli..." */
/* Pada laman sumber ini ialah <p>: margin bawah 1.75em (43.75px). */
.txt-25{font-family:var(--ff);font-size:25px;font-weight:500;color:var(--white);text-align:center;margin-bottom:1.75em}
@media(max-width:767px){ .txt-25{font-size:30px;line-height:1.5} }

/* seksyen produk (latar putih) */
.hd-kembali{font-family:var(--ff);font-size:32px;font-weight:700;color:var(--grey);text-align:center;line-height:1.3}
@media(min-width:768px) and (max-width:1024px){ .hd-kembali{font-size:25px} }
.hd-gassoff{font-family:var(--ff);font-size:75px;font-weight:700;color:var(--forest);text-align:center;line-height:1.3}
@media(max-width:1024px){ .hd-gassoff{font-size:48px} }
@media(max-width:767px){ .hd-kembali{font-size:35px} .hd-gassoff{font-size:55px} }

.body-20{display:flow-root;font-family:var(--ff);font-size:20px;font-weight:400;line-height:40px;color:#000;text-align:center;margin-bottom:0}
@media(max-width:1024px){ .body-20{font-size:25px;line-height:1.5} }

/* .gassoff-headline — "5 BAHAN PENTING" / "PASTIKAN BELI ORIGINAL" */
.gassoff-headline{text-align:center;font-family:var(--ff);font-weight:900;line-height:1.1;margin-bottom:0}
.headline-red{
  display:inline-block;background:var(--cta);color:var(--white);
  font-size:32px;padding:7px 16px;border-radius:3px;margin-bottom:8px;
}
.gassoff-name{font-size:52px;font-weight:900;letter-spacing:-2px}
.gassoff-name .gass{color:var(--gass)}
.gassoff-name .off{color:var(--off)}
@media(max-width:767px){
  .headline-red{font-size:22px;padding:6px 12px}
  .gassoff-name{font-size:42px}
}

/* .testimoni-headline */
.testimoni-headline{
  text-align:center;font-family:var(--ff);font-size:42px;font-weight:800;
  line-height:1.25;color:var(--white);margin-bottom:0;
}
.testimoni-highlight{display:inline-block;background:var(--yellow);color:#000;padding:2px 10px 4px;line-height:1.1}
@media(max-width:767px){
  .testimoni-headline{font-size:27px;line-height:1.3}
  .testimoni-highlight{padding:2px 7px 3px}
}

/* jalur COD marun */
.hd-cod{font-family:var(--ff);font-size:35px;font-weight:700;color:var(--white);text-align:center;line-height:1.3;padding-bottom:10px}
@media(max-width:767px){ .hd-cod{font-size:23px} }
/* Irama menegak jalur COD, disalin daripada laman sumber:
   setiap "widget" berjarak 20px, perenggan di dalamnya bermargin bawah 28px,
   dan perenggan pertama blok kedua bermargin atas -22px (itu memang begitu
   pada laman sumber, bukan silap taip). */
.cod-p1{display:flow-root;font-family:var(--ff);font-weight:400;color:var(--off-white);text-align:start;margin-bottom:0}
.cod-p2{display:flow-root;font-family:var(--ff);font-size:16px;font-weight:400;color:var(--white);text-align:start;margin-bottom:0}
.cod-p2 p:first-child{margin-top:-22px}
@media(max-width:767px){ .cod-p1{font-size:17px} }

/* senarai ikon (COD + kad pakej) */
.ilist{display:flex;flex-direction:column;gap:0}
.ilist li{display:flex;align-items:center;gap:5px;padding:0}
.ilist li+li{margin-top:0}
.ilist .ico{flex:0 0 auto;display:grid;place-items:center}
.ilist .ico svg{display:block}
.ilist--cod .ico{width:14px;height:14px}
.ilist--cod .ico svg{width:14px;height:14px;fill:var(--white)}
/* Laman sumber mewariskan tinggi baris terkira 26.4px ke teks senarai
   COD walaupun fonnya 15px; nyatakan secara eksplisit. */
.ilist--cod .txt{font-family:var(--ff);font-size:15px;font-weight:600;color:var(--white);line-height:1.76em}
.ilist--pkg{align-items:flex-start}
.ilist--pkg .ico{width:30px;height:30px}
.ilist--pkg .ico svg{width:30px;height:30px;fill:var(--leaf)}
.ilist--pkg .txt{font-family:var(--ff);font-size:17px;font-weight:400;color:#000}
@media(max-width:767px){
  .ilist--pkg li{align-items:flex-start}
  .ilist--pkg .ico{width:25px;height:25px;margin-top:7px}
  .ilist--pkg .ico svg{width:25px;height:25px}
  .ilist--pkg .txt{font-size:25px;line-height:1.5}
}

/* pembahagi bertitik putih */
.divider{padding-block:2px;text-align:center}
.divider span{display:block;width:10%;margin:0 auto;border-block-start:7.2px dotted var(--white)}

/* pembahagi bentuk segi tiga (elementor-shape-top) */
.band{position:relative}
.shape-top{position:absolute;top:0;left:0;right:0;z-index:1;line-height:0;direction:ltr;overflow:hidden}
.shape-top svg{display:block;width:calc(100% + 1.3px);height:39px;position:relative;left:50%;transform:translateX(-50%)}
.shape-top svg path{fill:var(--forest)}

/* =====================================================================
   Imej — varian bayang/jejari laman sumber
   ===================================================================== */
.img-r20{border-radius:var(--r-20);box-shadow:var(--sh-10k);overflow:hidden}
.img-r20-soft{border-radius:var(--r-20);box-shadow:var(--sh-10);overflow:hidden}
.img-sh{box-shadow:var(--sh-10)}
.img-sh9{box-shadow:var(--sh-9)}
@media(max-width:767px){ .img-sh9{border-radius:var(--r-25);overflow:hidden} }
.img-r25{border-radius:var(--r-25);overflow:hidden}

/* =====================================================================
   Gerbang video klik-untuk-muat.

   Laman sumber membenamkan iframe Vimeo/YouTube terus. Di sini tiada
   permintaan pihak ketiga dibuat sehingga pelawat menekan Main — lihat
   video-embed.js. Kotaknya menggunakan nisbah, jejari dan bingkai yang
   sama supaya susun atur kekal serupa.
   ===================================================================== */
.vid{overflow:hidden}
.vid--r25{border-radius:var(--r-25)}
.vid--bordered{border-style:solid;border-color:var(--vid-border);border-width:0}
@media(max-width:767px){
  .vid--m25{border-radius:var(--r-25)}
  .vid--bordered{border-width:5px;border-radius:var(--r-25)}
}
.ratio{position:relative;width:100%;background:var(--night)}
.ratio--1x1{padding-top:100%}
.ratio--16x9{padding-top:56.25%}
/* Laman sumber membenamkan tiga video menegak 9:16 (diukur ar=0.5625
   pada 360/414/768/1280). Kotaknya mesti setinggi 177.7778% lebar. */
.ratio--9x16{padding-top:177.7778%}
.ratio>iframe,.ratio>img{position:absolute;inset:0;width:100%;height:100%;border:0;object-fit:cover}

.ratio>.video-gate{
  position:absolute;inset:0;width:100%;height:100%;padding:22px 18px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;
  color:var(--white);text-align:center;overflow:hidden;
  background:linear-gradient(180deg,rgba(17,16,14,.45) 0%,rgba(21,65,37,.88) 100%),var(--forest);
}
.video-gate>*{position:relative;z-index:2}
.video-gate>.video-gate__poster{
  position:absolute;inset:0;z-index:0;width:100%;height:100%;object-fit:cover;
  background:var(--forest);opacity:.6;
}
.video-gate__provider{
  display:inline-flex;align-items:center;min-height:22px;padding:3px 11px;border-radius:999px;
  background:rgba(255,180,0,.18);border:1px solid rgba(255,180,0,.6);color:var(--amber);
  font-family:var(--ff);font-size:12px;font-weight:600;
}
.video-gate__play{
  width:62px;height:62px;border-radius:50%;display:grid;place-items:center;
  background:var(--cta);box-shadow:0 8px 22px rgba(0,0,0,.4);
  transition:transform .18s ease;
}
.video-gate__play::before{
  content:'';display:block;margin-left:5px;border-top:11px solid transparent;
  border-bottom:11px solid transparent;border-left:18px solid #fff;
}
.video-gate__title{font-family:var(--ff);font-size:17px;font-weight:600;line-height:1.35}
.video-gate__privacy{font-family:var(--ff);max-width:320px;color:var(--off-white);font-size:12.5px;line-height:1.45}
.video-gate:hover .video-gate__play{transform:scale(1.06)}
.video-gate:focus-visible{outline:3px solid var(--yellow);outline-offset:-6px}
.video-gate[aria-busy="true"]{cursor:wait}

/* =====================================================================
   Footer polisi (tambahan projek ini — laman sumber hanya menyenaraikan
   nama polisi dalam teks; di sini ia halaman sebenar yang boleh dilawati)
   ===================================================================== */
/* .col di dalam footer sudah memberi inset 10px yang sama seperti
   .elementor-widget-wrap pada laman sumber; jangan tambah lapisan kedua. */
.foot{background:var(--night);color:var(--white);padding:0}
.foot-txt{font-family:var(--ff-alt);font-weight:400;color:var(--white);text-align:center}
.foot-txt p,.foot-txt div{margin:0 0 var(--gap)}
.foot-txt p:last-child,.foot-txt div:last-child{margin-bottom:0}
.foot a{color:var(--mint);text-decoration:underline;text-underline-offset:2px}
.foot__links{display:flex;justify-content:center;flex-wrap:wrap;gap:6px 20px;margin:0 0 var(--gap);font-family:var(--ff-alt)}
/* Pautan polisi ialah navigasi berdiri sendiri, bukan pautan dalam ayat:
   beri sasaran sentuh 44px penuh pada telefon dan tablet. */
@media(max-width:900px){ .foot__links a{display:inline-flex;align-items:center;min-height:44px} }
.foot__merchant{font-family:var(--ff);font-weight:900;letter-spacing:-1px;font-size:26px;text-align:center;overflow-wrap:anywhere}
.foot__merchant .gass{color:var(--mint)}
.foot__merchant .off{color:var(--off)}
@media(max-width:767px){ .foot-txt{font-size:14px} }

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .btn-tempah,.rotate-word,.video-gate__play{animation:none;transition:none}
  .video-gate:hover .video-gate__play{transform:none}
}

/* =====================================================================
   Kad hijau bersudut bulat (seksyen dalam Elementor 5608e70)
   ===================================================================== */
.card-forest{background:var(--forest);border-radius:var(--r-25);color:var(--white);overflow:hidden}
.card-forest>.col{padding:var(--wrap-pad)}

/* Warna perkataan GASSOFF dalam ayat (laman sumber guna span sebaris) */
.gass-t{color:#154123}
.off-t{color:#ffb400}

/* <font size="6"> laman sumber = 32px; <font size="4"> = 18px */
.q-big{font-size:32px}
.q-amber{color:var(--amber)}
.pkg-sub{font-size:32px}
.ship-sub{font-size:18px}