{"id":1660,"date":"2026-06-10T10:00:36","date_gmt":"2026-06-10T10:00:36","guid":{"rendered":"https:\/\/regles.store\/?page_id=1660"},"modified":"2026-06-10T10:02:35","modified_gmt":"2026-06-10T10:02:35","slug":"elementor-1660","status":"publish","type":"page","link":"https:\/\/regles.store\/?page_id=1660","title":{"rendered":"Elementor #1660"},"content":{"rendered":"\t\t
\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\r\n\r\n\r\n\r\n\r\nMaverix MaxOil \u2014 Panduan Penggunaan Rasmi<\/title>\r\n<meta name=\"description\" content=\"Panduan penggunaan rasmi Maverix MaxOil untuk pelanggan selepas pembelian. Pakai betul, konsisten, jangan cepat putus asa.\">\r\n\r\n<!-- ============ FONTS ============ -->\r\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\r\n<link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\r\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Anton&family=Barlow:wght@400;500;600;700&family=Barlow+Condensed:wght@500;600;700&display=swap\" rel=\"stylesheet\">\r\n\r\n<style>\r\n\/* =====================================================\r\n MAVERIX MAXOIL \u2014 PANDUAN PENGGUNAAN RASMI\r\n Single-file landing page (HTML + CSS + JS)\r\n Tema: Hitam \/ Emas \/ Merah \u2014 Premium Masculine\r\n ===================================================== *\/\r\n\r\n\/* ---------- 1. TOKEN & RESET ---------- *\/\r\n:root{\r\n --black: #0A0A0B; \/* latar utama *\/\r\n --black-2: #111113; \/* latar kad *\/\r\n --black-3: #18181B; \/* latar kad lebih cerah *\/\r\n --gold: #D6B25E; \/* emas utama *\/\r\n --gold-bright: #F0D58A; \/* emas terang (highlight) *\/\r\n --gold-dim: #8A7440; \/* emas malap (garisan) *\/\r\n --red: #E22B2B; \/* aksen merah *\/\r\n --red-deep: #8E1414; \/* merah gelap (glow) *\/\r\n --text: #E9E4D8; \/* teks badan *\/\r\n --text-dim: #9D9890; \/* teks sekunder *\/\r\n --line: rgba(214,178,94,.22);\r\n\r\n --font-display: 'Anton', Impact, sans-serif;\r\n --font-body: 'Barlow', Arial, sans-serif;\r\n --font-cond: 'Barlow Condensed', Arial, sans-serif;\r\n\r\n --radius: 16px;\r\n --maxw: 1080px;\r\n}\r\n\r\n*,*::before,*::after{ margin:0; padding:0; box-sizing:border-box; }\r\nhtml{ scroll-behavior:smooth; }\r\nbody{\r\n background:var(--black);\r\n color:var(--text);\r\n font-family:var(--font-body);\r\n font-size:17px;\r\n line-height:1.65;\r\n -webkit-font-smoothing:antialiased;\r\n overflow-x:hidden;\r\n}\r\nimg,svg{ display:block; max-width:100%; }\r\na{ color:inherit; text-decoration:none; }\r\nul{ list-style:none; }\r\n\r\n\/* Tipografi paparan *\/\r\nh1,h2,h3,.display{\r\n font-family:var(--font-display);\r\n font-weight:400;\r\n letter-spacing:.02em;\r\n text-transform:uppercase;\r\n line-height:1.08;\r\n}\r\n\r\n\/* Eyebrow label kecil *\/\r\n.eyebrow{\r\n font-family:var(--font-cond);\r\n font-weight:600;\r\n font-size:14px;\r\n letter-spacing:.32em;\r\n text-transform:uppercase;\r\n color:var(--red);\r\n display:flex;\r\n align-items:center;\r\n gap:12px;\r\n margin-bottom:18px;\r\n}\r\n.eyebrow::before{\r\n content:\"\";\r\n width:34px; height:2px;\r\n background:var(--red);\r\n box-shadow:0 0 8px var(--red);\r\n}\r\n\r\n\/* Bekas *\/\r\n.wrap{ width:min(var(--maxw), 92%); margin:0 auto; }\r\nsection{ padding:88px 0; position:relative; z-index:1; }\r\nfooter{ position:relative; z-index:1; }\r\n.gold-divider{ position:relative; z-index:1; }\r\n\r\n\/* ---------- LATAR API \/ BARA (EMBER PARTICLES) ----------\r\n Kanvas tetap di belakang semua kandungan (z-index:0).\r\n Partikel dilukis oleh JavaScript di bahagian skrip bawah. *\/\r\n#emberCanvas{\r\n position:fixed;\r\n inset:0;\r\n width:100%;\r\n height:100%;\r\n z-index:0;\r\n pointer-events:none; \/* tidak mengganggu klik *\/\r\n}\r\n\r\n\/* Garis pemisah emas nipis antara seksyen *\/\r\n.gold-divider{\r\n height:1px;\r\n background:linear-gradient(90deg, transparent, var(--gold-dim), transparent);\r\n width:min(var(--maxw),92%);\r\n margin:0 auto;\r\n}\r\n\r\n\/* ---------- 2. BUTANG ---------- *\/\r\n.btn{\r\n display:inline-flex;\r\n align-items:center;\r\n gap:10px;\r\n font-family:var(--font-cond);\r\n font-weight:700;\r\n font-size:18px;\r\n letter-spacing:.08em;\r\n text-transform:uppercase;\r\n padding:15px 30px;\r\n border-radius:999px;\r\n border:none;\r\n cursor:pointer;\r\n transition:transform .2s ease, box-shadow .25s ease, background .25s ease;\r\n}\r\n.btn-gold{\r\n background:linear-gradient(135deg, var(--gold-bright), var(--gold) 55%, #B08F45);\r\n color:#1A1405;\r\n box-shadow:0 6px 24px rgba(214,178,94,.25);\r\n}\r\n.btn-gold:hover{ transform:translateY(-2px); box-shadow:0 10px 32px rgba(214,178,94,.4); }\r\n.btn-red{\r\n background:linear-gradient(135deg, #FF4040, var(--red) 60%, var(--red-deep));\r\n color:#fff;\r\n box-shadow:0 6px 26px rgba(226,43,43,.35);\r\n}\r\n.btn-red:hover{ transform:translateY(-2px); box-shadow:0 10px 36px rgba(226,43,43,.55); }\r\n.btn svg{ width:20px; height:20px; flex:none; }\r\n\r\n\/* ---------- 3. HEADER \/ NAVIGASI ---------- *\/\r\nheader{\r\n position:fixed;\r\n top:0; left:0; right:0;\r\n z-index:100;\r\n background:rgba(10,10,11,.85);\r\n backdrop-filter:blur(12px);\r\n -webkit-backdrop-filter:blur(12px);\r\n border-bottom:1px solid var(--line);\r\n}\r\n.nav{\r\n width:min(var(--maxw),92%);\r\n margin:0 auto;\r\n height:68px;\r\n display:flex;\r\n align-items:center;\r\n justify-content:space-between;\r\n gap:16px;\r\n}\r\n.logo{\r\n font-family:var(--font-display);\r\n font-size:20px;\r\n letter-spacing:.06em;\r\n color:var(--gold);\r\n white-space:nowrap;\r\n}\r\n.logo span{ color:var(--red); }\r\n.nav-links{\r\n display:flex;\r\n gap:28px;\r\n font-family:var(--font-cond);\r\n font-weight:600;\r\n font-size:16px;\r\n letter-spacing:.1em;\r\n text-transform:uppercase;\r\n}\r\n.nav-links a{ color:var(--text-dim); transition:color .2s; }\r\n.nav-links a:hover{ color:var(--gold-bright); }\r\n.nav-cta{ font-size:15px; padding:10px 20px; }\r\n\r\n\/* Butang menu mudah alih *\/\r\n.menu-btn{\r\n display:none;\r\n background:none;\r\n border:1px solid var(--line);\r\n border-radius:10px;\r\n padding:8px 10px;\r\n cursor:pointer;\r\n}\r\n.menu-btn span{\r\n display:block;\r\n width:22px; height:2px;\r\n background:var(--gold);\r\n margin:5px 0;\r\n transition:.25s;\r\n}\r\n\r\n\/* ---------- 4. HERO ---------- *\/\r\n.hero{\r\n min-height:100vh;\r\n display:flex;\r\n align-items:center;\r\n padding:140px 0 80px;\r\n background:\r\n radial-gradient(1100px 520px at 78% 8%, rgba(226,43,43,.16), transparent 65%),\r\n radial-gradient(800px 480px at 10% 90%, rgba(214,178,94,.10), transparent 60%);\r\n overflow:hidden;\r\n}\r\n\/* Kilat merah ambien di latar hero *\/\r\n.hero::before{\r\n content:\"\";\r\n position:absolute;\r\n inset:0;\r\n background:\r\n linear-gradient(115deg, transparent 46%, rgba(226,43,43,.06) 50%, transparent 54%),\r\n linear-gradient(245deg, transparent 47%, rgba(214,178,94,.05) 50%, transparent 53%);\r\n pointer-events:none;\r\n}\r\n.hero-grid{\r\n display:grid;\r\n grid-template-columns:1.15fr .85fr;\r\n gap:56px;\r\n align-items:center;\r\n}\r\n.hero h1{\r\n font-size:clamp(38px, 5.4vw, 64px);\r\n color:#fff;\r\n}\r\n.hero h1 .gold-text{\r\n background:linear-gradient(120deg, var(--gold-bright), var(--gold) 50%, #B08F45);\r\n -webkit-background-clip:text;\r\n background-clip:text;\r\n color:transparent;\r\n}\r\n.hero-sub{\r\n margin:22px 0 28px;\r\n font-size:19px;\r\n color:var(--text-dim);\r\n max-width:520px;\r\n}\r\n\/* Kotak peringatan keras dalam hero *\/\r\n.hero-reminder{\r\n display:inline-block;\r\n border:1px solid rgba(226,43,43,.5);\r\n background:rgba(226,43,43,.08);\r\n border-radius:12px;\r\n padding:16px 22px;\r\n margin-bottom:32px;\r\n box-shadow:0 0 30px rgba(226,43,43,.12) inset, 0 0 24px rgba(226,43,43,.10);\r\n}\r\n.hero-reminder p{\r\n font-family:var(--font-display);\r\n font-size:clamp(17px, 2.2vw, 22px);\r\n letter-spacing:.04em;\r\n line-height:1.35;\r\n}\r\n.hero-reminder .l1{ color:var(--gold-bright); }\r\n.hero-reminder .l2{ color:var(--red); text-shadow:0 0 16px rgba(226,43,43,.6); }\r\n\r\n\/* Visual produk (placeholder premium) *\/\r\n.hero-visual{ position:relative; display:flex; justify-content:center; }\r\n.product-card{\r\n position:relative;\r\n width:min(340px, 86vw);\r\n aspect-ratio:3\/4.1;\r\n border-radius:22px;\r\n background:\r\n radial-gradient(220px 200px at 50% 18%, rgba(226,43,43,.22), transparent 70%),\r\n linear-gradient(160deg, #1C1C1F, #0D0D0F 70%);\r\n border:1px solid var(--line);\r\n box-shadow:\r\n 0 0 0 1px rgba(0,0,0,.6),\r\n 0 24px 60px rgba(0,0,0,.7),\r\n 0 0 70px rgba(226,43,43,.18);\r\n display:flex;\r\n flex-direction:column;\r\n align-items:center;\r\n justify-content:center;\r\n gap:14px;\r\n padding:30px;\r\n text-align:center;\r\n overflow:hidden;\r\n}\r\n\/* Kilauan kaca melintas *\/\r\n.product-card::after{\r\n content:\"\";\r\n position:absolute;\r\n top:-40%; left:-60%;\r\n width:55%; height:180%;\r\n background:linear-gradient(105deg, transparent, rgba(255,255,255,.07), transparent);\r\n transform:rotate(8deg);\r\n animation:sheen 5.5s ease-in-out infinite;\r\n}\r\n@keyframes sheen{\r\n 0%, 55%{ left:-60%; }\r\n 85%, 100%{ left:140%; }\r\n}\r\n.product-emblem{\r\n width:120px; height:120px;\r\n border-radius:50%;\r\n border:2px solid var(--gold);\r\n display:flex;\r\n align-items:center;\r\n justify-content:center;\r\n background:radial-gradient(circle at 50% 35%, #222, #0C0C0E 75%);\r\n box-shadow:0 0 30px rgba(214,178,94,.25), inset 0 0 24px rgba(0,0,0,.8);\r\n}\r\n.product-emblem svg{ width:68px; height:68px; }\r\n.product-name{\r\n font-family:var(--font-display);\r\n font-size:30px;\r\n color:var(--gold-bright);\r\n letter-spacing:.05em;\r\n}\r\n.product-tag{\r\n font-family:var(--font-cond);\r\n font-weight:600;\r\n letter-spacing:.3em;\r\n font-size:13px;\r\n color:var(--red);\r\n text-transform:uppercase;\r\n}\r\n.product-note{\r\n font-size:13px;\r\n color:var(--text-dim);\r\n border-top:1px dashed var(--line);\r\n padding-top:12px;\r\n width:100%;\r\n}\r\n\r\n\/* ---------- 5. SEKSYEN PERINGATAN ---------- *\/\r\n.warning-card{\r\n border-radius:var(--radius);\r\n border:1px solid rgba(226,43,43,.45);\r\n background:\r\n radial-gradient(600px 200px at 50% 0%, rgba(226,43,43,.12), transparent 70%),\r\n linear-gradient(180deg, var(--black-3), var(--black-2));\r\n box-shadow:0 0 50px rgba(226,43,43,.10), inset 0 1px 0 rgba(255,255,255,.04);\r\n padding:48px clamp(24px, 5vw, 56px);\r\n position:relative;\r\n overflow:hidden;\r\n}\r\n.warning-card h2{\r\n font-size:clamp(28px, 4vw, 42px);\r\n color:#fff;\r\n margin-bottom:8px;\r\n}\r\n.warning-card h2 em{\r\n font-style:normal;\r\n color:var(--red);\r\n text-shadow:0 0 18px rgba(226,43,43,.55);\r\n}\r\n.warning-intro{ color:var(--text-dim); margin-bottom:32px; max-width:640px; }\r\n.warning-list{\r\n display:grid;\r\n grid-template-columns:repeat(auto-fit, minmax(260px, 1fr));\r\n gap:16px;\r\n}\r\n.warning-item{\r\n display:flex;\r\n gap:14px;\r\n align-items:flex-start;\r\n background:rgba(10,10,11,.55);\r\n border:1px solid var(--line);\r\n border-radius:12px;\r\n padding:18px 20px;\r\n transition:border-color .25s, transform .25s;\r\n}\r\n.warning-item:hover{ border-color:rgba(226,43,43,.55); transform:translateY(-3px); }\r\n.warning-item .mark{\r\n flex:none;\r\n width:30px; height:30px;\r\n border-radius:8px;\r\n background:rgba(226,43,43,.14);\r\n border:1px solid rgba(226,43,43,.5);\r\n color:var(--red);\r\n display:flex; align-items:center; justify-content:center;\r\n font-family:var(--font-display);\r\n font-size:16px;\r\n}\r\n.warning-item strong{\r\n display:block;\r\n font-family:var(--font-cond);\r\n font-weight:700;\r\n text-transform:uppercase;\r\n letter-spacing:.06em;\r\n font-size:18px;\r\n color:var(--gold-bright);\r\n margin-bottom:2px;\r\n}\r\n.warning-item p{ font-size:15px; color:var(--text-dim); }\r\n\r\n\/* ---------- 6. CARA PAKAI ---------- *\/\r\n.section-head{ max-width:680px; margin-bottom:48px; }\r\n.section-head h2{\r\n font-size:clamp(30px, 4.4vw, 46px);\r\n color:#fff;\r\n}\r\n.section-head h2 .gold-text{\r\n background:linear-gradient(120deg, var(--gold-bright), var(--gold));\r\n -webkit-background-clip:text; background-clip:text; color:transparent;\r\n}\r\n.section-head p{ margin-top:14px; color:var(--text-dim); }\r\n\r\n.steps-grid{\r\n display:grid;\r\n grid-template-columns:repeat(auto-fit, minmax(240px, 1fr));\r\n gap:18px;\r\n}\r\n.step-card{\r\n background:linear-gradient(180deg, var(--black-3), var(--black-2));\r\n border:1px solid var(--line);\r\n border-radius:var(--radius);\r\n padding:26px 24px;\r\n transition:transform .25s, border-color .25s, box-shadow .25s;\r\n}\r\n.step-card:hover{\r\n transform:translateY(-4px);\r\n border-color:var(--gold);\r\n box-shadow:0 14px 36px rgba(0,0,0,.5), 0 0 24px rgba(214,178,94,.12);\r\n}\r\n.step-num{\r\n font-family:var(--font-display);\r\n font-size:15px;\r\n color:var(--red);\r\n letter-spacing:.12em;\r\n margin-bottom:14px;\r\n}\r\n.step-icon{\r\n width:46px; height:46px;\r\n border-radius:12px;\r\n background:rgba(214,178,94,.1);\r\n border:1px solid var(--line);\r\n display:flex; align-items:center; justify-content:center;\r\n margin-bottom:16px;\r\n}\r\n.step-icon svg{ width:24px; height:24px; stroke:var(--gold-bright); }\r\n.step-card h3{\r\n font-family:var(--font-cond);\r\n font-weight:700;\r\n font-size:20px;\r\n letter-spacing:.05em;\r\n color:var(--gold-bright);\r\n margin-bottom:6px;\r\n}\r\n.step-card p{ font-size:15px; color:var(--text-dim); }\r\n\r\n\/* ---------- 7. MAGIC TEST ---------- *\/\r\n.magic{\r\n background:\r\n radial-gradient(900px 420px at 50% 50%, rgba(226,43,43,.16), transparent 70%);\r\n}\r\n.magic-card{\r\n text-align:center;\r\n border-radius:24px;\r\n border:1px solid rgba(226,43,43,.5);\r\n background:linear-gradient(180deg, #141012, #0C0A0B);\r\n box-shadow:0 0 80px rgba(226,43,43,.2), inset 0 0 60px rgba(226,43,43,.06);\r\n padding:64px clamp(24px, 6vw, 72px);\r\n position:relative;\r\n overflow:hidden;\r\n}\r\n\/* Kilat di sudut kad magic *\/\r\n.magic-card .bolt{\r\n position:absolute;\r\n width:90px;\r\n opacity:.55;\r\n filter:drop-shadow(0 0 14px rgba(226,43,43,.8));\r\n}\r\n.magic-card .bolt.tl{ top:-12px; left:6%; transform:rotate(-14deg); }\r\n.magic-card .bolt.br{ bottom:-12px; right:6%; transform:rotate(166deg); }\r\n.magic-card h2{\r\n font-size:clamp(34px, 5.4vw, 58px);\r\n color:#fff;\r\n}\r\n.magic-card h2 em{\r\n font-style:normal;\r\n color:var(--red);\r\n text-shadow:0 0 24px rgba(226,43,43,.7);\r\n}\r\n.magic-steps{\r\n display:flex;\r\n justify-content:center;\r\n flex-wrap:wrap;\r\n gap:14px;\r\n margin:36px 0 28px;\r\n}\r\n.magic-step{\r\n font-family:var(--font-cond);\r\n font-weight:600;\r\n font-size:18px;\r\n letter-spacing:.04em;\r\n background:rgba(226,43,43,.1);\r\n border:1px solid rgba(226,43,43,.45);\r\n color:var(--text);\r\n border-radius:999px;\r\n padding:12px 24px;\r\n display:flex;\r\n align-items:center;\r\n gap:10px;\r\n}\r\n.magic-step .n{\r\n font-family:var(--font-display);\r\n color:var(--red);\r\n font-size:16px;\r\n}\r\n.magic-note{ color:var(--text-dim); max-width:560px; margin:0 auto; }\r\n\r\n\/* ---------- 7b. VIDEO TUTORIAL (PHONE MOCKUP MENEGAK) ---------- *\/\r\n\/* Bingkai telefon mewah: hitam berkilat, bingkai emas,\r\n cahaya merah di belakang, nisbah menegak 9:16. *\/\r\n.video-stage{\r\n position:relative;\r\n display:flex;\r\n justify-content:center; \/* pusatkan telefon (desktop & mobile) *\/\r\n}\r\n\/* Cahaya merah lembut di belakang telefon *\/\r\n.video-stage::before{\r\n content:\"\";\r\n position:absolute;\r\n top:50%; left:50%;\r\n transform:translate(-50%,-50%);\r\n width:min(560px, 100%);\r\n height:80%;\r\n background:radial-gradient(closest-side, rgba(226,43,43,.28), rgba(226,43,43,.08) 55%, transparent 75%);\r\n filter:blur(10px);\r\n pointer-events:none;\r\n}\r\n.phone-frame{\r\n position:relative;\r\n width:100%;\r\n max-width:390px; \/* saiz desktop: tidak terlalu besar *\/\r\n border-radius:46px;\r\n padding:14px; \/* ketebalan bingkai telefon *\/\r\n background:linear-gradient(160deg, #1E1E22, #060607 70%); \/* hitam berkilat *\/\r\n border:1px solid var(--gold);\r\n box-shadow:\r\n 0 0 0 1px rgba(0,0,0,.8),\r\n 0 0 26px rgba(214,178,94,.22), \/* sinar emas pada bingkai *\/\r\n 0 30px 70px rgba(0,0,0,.75), \/* bayang premium *\/\r\n 0 0 90px rgba(226,43,43,.18); \/* cahaya merah keliling *\/\r\n overflow:hidden;\r\n}\r\n\/* Kilauan kaca melintas pada bingkai telefon *\/\r\n.phone-frame::after{\r\n content:\"\";\r\n position:absolute;\r\n top:-30%; left:-70%;\r\n width:45%; height:160%;\r\n background:linear-gradient(105deg, transparent, rgba(255,255,255,.06), transparent);\r\n transform:rotate(10deg);\r\n animation:sheen 6s ease-in-out infinite;\r\n pointer-events:none;\r\n}\r\n\/* Skrin telefon: nisbah menegak 9:16 *\/\r\n.phone-screen{\r\n position:relative;\r\n width:100%;\r\n aspect-ratio:9\/16;\r\n border-radius:34px;\r\n overflow:hidden;\r\n background:#000;\r\n border:1px solid rgba(214,178,94,.14);\r\n}\r\n\/* Takuk (notch) di atas skrin untuk rupa telefon sebenar *\/\r\n.phone-notch{\r\n position:absolute;\r\n top:10px; left:50%;\r\n transform:translateX(-50%);\r\n width:34%;\r\n height:22px;\r\n background:#060607;\r\n border:1px solid rgba(214,178,94,.18);\r\n border-radius:999px;\r\n z-index:2;\r\n pointer-events:none;\r\n}\r\n\/* Video \/ iframe mengisi penuh skrin telefon *\/\r\n.phone-screen video,\r\n.phone-screen iframe{\r\n position:absolute;\r\n inset:0;\r\n width:100%;\r\n height:100%;\r\n border:0;\r\n background:#000;\r\n object-fit:contain; \/* video menegak penuh tanpa terpotong *\/\r\n}\r\n\r\n@media (max-width: 760px){\r\n .phone-frame{\r\n max-width:min(340px, 86vw); \/* guna hampir penuh lebar skrin, ada ruang tepi *\/\r\n border-radius:40px;\r\n padding:11px;\r\n }\r\n .phone-screen{ border-radius:30px; }\r\n}\r\n\r\n\/* ---------- 8. KONSISTENSI \/ TIMELINE ---------- *\/\r\n.timeline{\r\n display:grid;\r\n grid-template-columns:repeat(3, 1fr);\r\n gap:18px;\r\n margin-top:8px;\r\n}\r\n.phase{\r\n position:relative;\r\n background:linear-gradient(180deg, var(--black-3), var(--black-2));\r\n border:1px solid var(--line);\r\n border-radius:var(--radius);\r\n padding:30px 26px 26px;\r\n transition:transform .25s, border-color .25s;\r\n}\r\n.phase:hover{ transform:translateY(-4px); border-color:var(--gold); }\r\n.phase-label{\r\n font-family:var(--font-cond);\r\n font-weight:700;\r\n letter-spacing:.2em;\r\n text-transform:uppercase;\r\n font-size:13px;\r\n color:var(--red);\r\n margin-bottom:8px;\r\n}\r\n.phase h3{\r\n font-size:26px;\r\n color:var(--gold-bright);\r\n margin-bottom:16px;\r\n}\r\n.phase ul li{\r\n position:relative;\r\n padding-left:24px;\r\n margin-bottom:10px;\r\n font-size:15px;\r\n color:var(--text-dim);\r\n}\r\n.phase ul li::before{\r\n content:\"\";\r\n position:absolute;\r\n left:0; top:9px;\r\n width:10px; height:2px;\r\n background:var(--gold);\r\n}\r\n\/* Bar kemajuan kecil di atas setiap fasa *\/\r\n.phase .bar{\r\n height:4px;\r\n border-radius:99px;\r\n background:#222;\r\n overflow:hidden;\r\n margin-bottom:22px;\r\n}\r\n.phase .bar i{\r\n display:block;\r\n height:100%;\r\n background:linear-gradient(90deg, var(--red), var(--gold));\r\n box-shadow:0 0 10px rgba(226,43,43,.5);\r\n}\r\n.phase.p1 .bar i{ width:33%; }\r\n.phase.p2 .bar i{ width:66%; }\r\n.phase.p3 .bar i{ width:100%; }\r\n\r\n.timeline-callout{\r\n margin-top:26px;\r\n text-align:center;\r\n border:1px dashed rgba(226,43,43,.5);\r\n border-radius:14px;\r\n padding:22px 26px;\r\n background:rgba(226,43,43,.06);\r\n}\r\n.timeline-callout p{\r\n font-family:var(--font-display);\r\n font-size:clamp(16px, 2.4vw, 22px);\r\n color:var(--gold-bright);\r\n letter-spacing:.04em;\r\n}\r\n.timeline-callout p em{ font-style:normal; color:var(--red); }\r\n\r\n\/* ---------- 9. KENAPA KONSISTEN ---------- *\/\r\n.why-grid{\r\n display:grid;\r\n grid-template-columns:1fr 1fr;\r\n gap:48px;\r\n align-items:center;\r\n}\r\n.why-points li{\r\n display:flex;\r\n gap:16px;\r\n margin-bottom:22px;\r\n}\r\n.why-points .dot{\r\n flex:none;\r\n margin-top:6px;\r\n width:12px; height:12px;\r\n border-radius:50%;\r\n background:var(--red);\r\n box-shadow:0 0 12px rgba(226,43,43,.8);\r\n}\r\n.why-points strong{\r\n display:block;\r\n font-family:var(--font-cond);\r\n font-weight:700;\r\n font-size:20px;\r\n letter-spacing:.05em;\r\n text-transform:uppercase;\r\n color:var(--gold-bright);\r\n}\r\n.why-points p{ color:var(--text-dim); font-size:15.5px; }\r\n.why-quote{\r\n border-left:4px solid var(--gold);\r\n background:linear-gradient(180deg, var(--black-3), var(--black-2));\r\n border-radius:0 var(--radius) var(--radius) 0;\r\n padding:38px 34px;\r\n box-shadow:0 18px 50px rgba(0,0,0,.45);\r\n}\r\n.why-quote p{\r\n font-family:var(--font-display);\r\n font-size:clamp(22px, 3vw, 30px);\r\n line-height:1.3;\r\n color:#fff;\r\n}\r\n.why-quote p em{ font-style:normal; color:var(--red); }\r\n.why-quote span{\r\n display:block;\r\n margin-top:18px;\r\n font-family:var(--font-cond);\r\n font-weight:600;\r\n letter-spacing:.22em;\r\n font-size:13px;\r\n color:var(--gold);\r\n text-transform:uppercase;\r\n}\r\n\r\n\/* ---------- 10. JANGAN CEPAT JUDGE ---------- *\/\r\n.judge-card{\r\n display:grid;\r\n grid-template-columns:auto 1fr;\r\n gap:28px;\r\n align-items:center;\r\n background:linear-gradient(135deg, #16120A, var(--black-2) 60%);\r\n border:1px solid var(--gold-dim);\r\n border-radius:var(--radius);\r\n padding:44px clamp(24px, 5vw, 52px);\r\n box-shadow:0 0 50px rgba(214,178,94,.08);\r\n}\r\n.judge-stars{\r\n font-size:clamp(34px, 5vw, 52px);\r\n letter-spacing:6px;\r\n color:var(--gold);\r\n text-shadow:0 0 24px rgba(214,178,94,.45);\r\n white-space:nowrap;\r\n}\r\n.judge-card h2{ font-size:clamp(26px, 3.6vw, 38px); color:#fff; margin-bottom:12px; }\r\n.judge-card h2 em{ font-style:normal; color:var(--red); }\r\n.judge-card p{ color:var(--text-dim); max-width:600px; }\r\n.judge-card .btn{ margin-top:22px; }\r\n\r\n\/* ---------- 11. HUBUNGI ---------- *\/\r\n.contact-grid{\r\n display:grid;\r\n grid-template-columns:1fr 1fr;\r\n gap:48px;\r\n align-items:center;\r\n}\r\n.contact-list li{\r\n display:flex;\r\n align-items:center;\r\n gap:14px;\r\n padding:14px 18px;\r\n border:1px solid var(--line);\r\n border-radius:12px;\r\n margin-bottom:12px;\r\n background:var(--black-2);\r\n font-family:var(--font-cond);\r\n font-weight:600;\r\n font-size:18px;\r\n letter-spacing:.04em;\r\n transition:border-color .25s;\r\n}\r\n.contact-list li:hover{ border-color:var(--gold); }\r\n.contact-list svg{ width:20px; height:20px; stroke:var(--gold); flex:none; }\r\n.contact-box{\r\n text-align:center;\r\n border-radius:20px;\r\n border:1px solid var(--line);\r\n background:\r\n radial-gradient(400px 200px at 50% 0%, rgba(214,178,94,.12), transparent 70%),\r\n linear-gradient(180deg, var(--black-3), var(--black-2));\r\n padding:48px 34px;\r\n box-shadow:0 24px 60px rgba(0,0,0,.5);\r\n}\r\n.contact-box .who{\r\n font-family:var(--font-display);\r\n font-size:28px;\r\n color:var(--gold-bright);\r\n margin-bottom:4px;\r\n}\r\n.contact-box .role{\r\n font-family:var(--font-cond);\r\n font-weight:600;\r\n letter-spacing:.26em;\r\n font-size:13px;\r\n color:var(--red);\r\n text-transform:uppercase;\r\n margin-bottom:24px;\r\n}\r\n.contact-box .phone{\r\n font-family:var(--font-display);\r\n font-size:clamp(26px, 4vw, 34px);\r\n color:#fff;\r\n letter-spacing:.06em;\r\n margin-bottom:26px;\r\n}\r\n\r\n\/* ---------- 12. FAQ ---------- *\/\r\n.faq-list{ max-width:780px; margin:0 auto; }\r\n.faq-item{\r\n border:1px solid var(--line);\r\n border-radius:14px;\r\n background:var(--black-2);\r\n margin-bottom:14px;\r\n overflow:hidden;\r\n transition:border-color .25s;\r\n}\r\n.faq-item.open{ border-color:var(--gold); }\r\n.faq-q{\r\n width:100%;\r\n background:none;\r\n border:none;\r\n cursor:pointer;\r\n display:flex;\r\n align-items:center;\r\n justify-content:space-between;\r\n gap:16px;\r\n padding:20px 24px;\r\n text-align:left;\r\n font-family:var(--font-cond);\r\n font-weight:700;\r\n font-size:19px;\r\n letter-spacing:.03em;\r\n color:var(--text);\r\n text-transform:uppercase;\r\n}\r\n.faq-q:hover{ color:var(--gold-bright); }\r\n.faq-q .chev{\r\n flex:none;\r\n width:28px; height:28px;\r\n border-radius:50%;\r\n border:1px solid var(--gold-dim);\r\n display:flex; align-items:center; justify-content:center;\r\n transition:transform .3s, background .3s;\r\n}\r\n.faq-q .chev svg{ width:14px; height:14px; stroke:var(--gold); }\r\n.faq-item.open .chev{ transform:rotate(180deg); background:rgba(214,178,94,.12); }\r\n.faq-a{\r\n max-height:0;\r\n overflow:hidden;\r\n transition:max-height .35s ease;\r\n}\r\n.faq-a-inner{\r\n padding:0 24px 22px;\r\n color:var(--text-dim);\r\n font-size:15.5px;\r\n border-top:1px dashed var(--line);\r\n padding-top:16px;\r\n margin:0 24px;\r\n padding-left:0;\r\n padding-right:0;\r\n}\r\n\r\n\/* ---------- 13. CTA AKHIR ---------- *\/\r\n.final-cta{\r\n text-align:center;\r\n background:\r\n radial-gradient(800px 360px at 50% 100%, rgba(226,43,43,.18), transparent 70%),\r\n radial-gradient(700px 300px at 50% 0%, rgba(214,178,94,.1), transparent 70%);\r\n}\r\n.final-cta h2{\r\n font-size:clamp(32px, 5.2vw, 56px);\r\n color:#fff;\r\n max-width:880px;\r\n margin:0 auto;\r\n}\r\n.final-cta h2 .gold-text{\r\n background:linear-gradient(120deg, var(--gold-bright), var(--gold));\r\n -webkit-background-clip:text; background-clip:text; color:transparent;\r\n}\r\n.final-cta h2 em{ font-style:normal; color:var(--red); text-shadow:0 0 20px rgba(226,43,43,.6); }\r\n.final-cta p{\r\n margin:20px auto 36px;\r\n color:var(--text-dim);\r\n max-width:520px;\r\n}\r\n\r\n\/* ---------- 14. FOOTER ---------- *\/\r\nfooter{\r\n border-top:1px solid var(--line);\r\n padding:44px 0;\r\n background:#070708;\r\n}\r\n.footer-inner{\r\n display:flex;\r\n flex-wrap:wrap;\r\n justify-content:space-between;\r\n align-items:center;\r\n gap:18px;\r\n}\r\n.footer-inner .logo{ font-size:22px; }\r\n.footer-inner p{ color:var(--text-dim); font-size:14px; }\r\n.footer-inner .contact{\r\n font-family:var(--font-cond);\r\n font-weight:600;\r\n letter-spacing:.08em;\r\n color:var(--gold);\r\n}\r\n\r\n\/* ---------- 15. BUTANG WHATSAPP MELEKAT ---------- *\/\r\n.sticky-wa{\r\n position:fixed;\r\n right:18px;\r\n bottom:18px;\r\n z-index:90;\r\n width:60px; height:60px;\r\n border-radius:50%;\r\n background:linear-gradient(135deg, #2BB741, #1E9E34);\r\n display:flex;\r\n align-items:center;\r\n justify-content:center;\r\n box-shadow:0 8px 26px rgba(0,0,0,.55), 0 0 0 0 rgba(43,183,65,.5);\r\n animation:pulse 2.4s infinite;\r\n transition:transform .2s;\r\n}\r\n.sticky-wa:hover{ transform:scale(1.08); }\r\n.sticky-wa svg{ width:30px; height:30px; fill:#fff; }\r\n@keyframes pulse{\r\n 0%{ box-shadow:0 8px 26px rgba(0,0,0,.55), 0 0 0 0 rgba(43,183,65,.45); }\r\n 70%{ box-shadow:0 8px 26px rgba(0,0,0,.55), 0 0 0 16px rgba(43,183,65,0); }\r\n 100%{ box-shadow:0 8px 26px rgba(0,0,0,.55), 0 0 0 0 rgba(43,183,65,0); }\r\n}\r\n\r\n\/* Reveal scroll ringan *\/\r\n.reveal{ opacity:0; transform:translateY(24px); transition:opacity .6s ease, transform .6s ease; }\r\n.reveal.show{ opacity:1; transform:none; }\r\n\r\n\/* Hormati pengguna yang kurangkan animasi *\/\r\n@media (prefers-reduced-motion: reduce){\r\n html{ scroll-behavior:auto; }\r\n *,*::before,*::after{ animation:none !important; transition:none !important; }\r\n .reveal{ opacity:1; transform:none; }\r\n}\r\n\r\n\/* ---------- 16. RESPONSIF ---------- *\/\r\n@media (max-width: 920px){\r\n .hero-grid{ grid-template-columns:1fr; gap:44px; }\r\n .hero{ padding-top:120px; }\r\n .timeline{ grid-template-columns:1fr; }\r\n .why-grid, .contact-grid{ grid-template-columns:1fr; gap:36px; }\r\n .judge-card{ grid-template-columns:1fr; text-align:center; }\r\n .judge-stars{ margin:0 auto; }\r\n}\r\n@media (max-width: 760px){\r\n section{ padding:64px 0; }\r\n .nav-links{\r\n position:fixed;\r\n top:68px; left:0; right:0;\r\n background:rgba(10,10,11,.97);\r\n border-bottom:1px solid var(--line);\r\n flex-direction:column;\r\n gap:0;\r\n padding:8px 0;\r\n display:none;\r\n }\r\n .nav-links.open{ display:flex; }\r\n .nav-links a{ padding:14px 6%; border-bottom:1px solid rgba(255,255,255,.04); text-align:center; }\r\n .menu-btn{ display:block; }\r\n .nav-cta{ display:none; }\r\n .btn{ font-size:16px; padding:14px 24px; }\r\n\r\n \/* ----- PUSAT SEMUA KANDUNGAN PADA MOBILE -----\r\n Teks, tajuk, kad dan butang dipusatkan supaya\r\n paparan mudah alih nampak kemas dan seimbang. *\/\r\n .hero-grid > div,\r\n .section-head,\r\n .warning-card,\r\n .step-card,\r\n .phase,\r\n .judge-card,\r\n .contact-grid > div,\r\n .why-grid > div,\r\n .footer-inner,\r\n .footer-inner > div{\r\n text-align:center;\r\n }\r\n .hero-sub,\r\n .warning-intro,\r\n .judge-card p{ margin-left:auto; margin-right:auto; }\r\n\r\n \/* Eyebrow label dipusatkan *\/\r\n .eyebrow{ justify-content:center; }\r\n\r\n \/* Item peringatan: susun menegak & pusatkan *\/\r\n .warning-item{\r\n flex-direction:column;\r\n align-items:center;\r\n text-align:center;\r\n }\r\n\r\n \/* Ikon langkah dipusatkan *\/\r\n .step-icon{ margin-left:auto; margin-right:auto; }\r\n\r\n \/* Senarai fasa botol: buang penanda kiri, pusatkan teks *\/\r\n .phase ul li{ padding-left:0; }\r\n .phase ul li::before{ display:none; }\r\n\r\n \/* Senarai \"Kenapa Konsisten\": susun menegak & pusatkan *\/\r\n .why-points li{\r\n flex-direction:column;\r\n align-items:center;\r\n text-align:center;\r\n gap:10px;\r\n }\r\n .why-points .dot{ margin-top:0; }\r\n .why-quote{\r\n border-left:none;\r\n border-top:4px solid var(--gold);\r\n border-radius:var(--radius);\r\n text-align:center;\r\n }\r\n\r\n \/* Senarai sokongan dipusatkan *\/\r\n .contact-list li{ justify-content:center; }\r\n\r\n \/* FAQ: soalan & jawapan dipusatkan *\/\r\n .faq-q{ text-align:center; justify-content:center; }\r\n .faq-a-inner{ text-align:center; }\r\n\r\n \/* Footer dipusatkan sepenuhnya *\/\r\n .footer-inner{ justify-content:center; }\r\n}\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n<!-- ============ LATAR PARTIKEL API (BARA) ============ -->\r\n<!-- Kanvas ini berada di belakang semua kandungan (z-index:0) -->\r\n<canvas id=\"emberCanvas\" aria-hidden=\"true\"><\/canvas>\r\n\r\n<!-- ============ HEADER \/ NAVIGASI ============ -->\r\n<header>\r\n <nav class=\"nav\">\r\n <a href=\"#atas\" class=\"logo\">MAVERIX <span>MAXOIL<\/span><\/a>\r\n\r\n <ul class=\"nav-links\" id=\"navLinks\">\r\n <li><a href=\"#panduan\">Panduan<\/a><\/li>\r\n <li><a href=\"#carapakai\">Cara Pakai<\/a><\/li>\r\n <li><a href=\"#konsistensi\">Konsistensi<\/a><\/li>\r\n <li><a href=\"#bantuan\">Bantuan<\/a><\/li>\r\n <li><a href=\"#faq\">FAQ<\/a><\/li>\r\n <\/ul>\r\n\r\n <a class=\"btn btn-red nav-cta\" href=\"https:\/\/wa.me\/601157569695\" target=\"_blank\" rel=\"noopener\">\r\n WhatsApp Miss Yuyu\r\n <\/a>\r\n\r\n <button class=\"menu-btn\" id=\"menuBtn\" aria-label=\"Buka menu\" aria-expanded=\"false\">\r\n <span><\/span><span><\/span><span><\/span>\r\n <\/button>\r\n <\/nav>\r\n<\/header>\r\n\r\n<!-- ============ HERO ============ -->\r\n<section class=\"hero\" id=\"atas\">\r\n <div class=\"wrap hero-grid\">\r\n <div>\r\n <div class=\"eyebrow\">Panduan Rasmi Selepas Pembelian<\/div>\r\n <h1>Terima kasih kerana memilih <span class=\"gold-text\">Maverix MaxOil<\/span><\/h1>\r\n <p class=\"hero-sub\">\r\n Panduan penggunaan rasmi untuk lelaki yang serius mahu pakai dengan cara\r\n yang betul, konsisten dan tidak mudah putus asa.\r\n <\/p>\r\n\r\n <div class=\"hero-reminder\">\r\n <p class=\"l1\">BUILT FOR REAL MAN.<\/p>\r\n <p class=\"l2\">TAK KONSISTEN, TAK ADA RESULT.<\/p>\r\n <\/div>\r\n\r\n <div>\r\n <a class=\"btn btn-gold\" href=\"https:\/\/wa.me\/601157569695\" target=\"_blank\" rel=\"noopener\">\r\n <svg viewBox=\"0 0 24 24\" fill=\"currentColor\"><path d=\"M12 2a10 10 0 0 0-8.6 15.1L2 22l5.1-1.3A10 10 0 1 0 12 2zm5.3 14.1c-.2.6-1.2 1.2-1.7 1.2-.4.1-1 .1-1.6-.1-.4-.1-.9-.3-1.5-.6-2.6-1.1-4.3-3.8-4.5-4-.1-.2-1.1-1.4-1.1-2.7s.7-1.9 1-2.2c.2-.3.5-.3.7-.3h.5c.2 0 .4 0 .6.4.2.5.7 1.8.8 1.9.1.1.1.3 0 .5-.1.2-.1.3-.3.5l-.4.5c-.1.1-.3.3-.1.6.2.3.8 1.3 1.7 2.1 1.2 1 2.1 1.4 2.4 1.5.3.1.5.1.6-.1.2-.2.7-.8.9-1.1.2-.3.4-.2.6-.1.3.1 1.6.7 1.8.9.3.1.4.2.5.3 0 .2 0 .6-.2 1.2z\"\/><\/svg>\r\n WhatsApp Miss Yuyu\r\n <\/a>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- Visual produk: ruang letak imej produk sebenar -->\r\n <div class=\"hero-visual\">\r\n <div class=\"product-card\">\r\n <div class=\"product-emblem\">\r\n <!-- Lambang kuda Maverix (ikon ringkas) -->\r\n <svg viewBox=\"0 0 64 64\" fill=\"none\" stroke=\"#D6B25E\" stroke-width=\"2.4\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n <path d=\"M14 50c2-12 8-22 18-28l6-10 4 8 8 4-6 4c2 8 0 16-6 22\"\/>\r\n <path d=\"M24 50c0-6 3-11 8-14\"\/>\r\n <path d=\"M40 22l-3 3\"\/>\r\n <\/svg>\r\n <\/div>\r\n <div class=\"product-name\">Maverix MaxOil<\/div>\r\n <div class=\"product-tag\">Premium • For Real Man<\/div>\r\n <div class=\"product-note\">[ Ruang gambar produk sebenar \u2014 gantikan dengan foto botol anda ]<\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n<\/section>\r\n\r\n<div class=\"gold-divider\"><\/div>\r\n\r\n<!-- ============ PERINGATAN PENTING ============ -->\r\n<section id=\"panduan\">\r\n <div class=\"wrap reveal\">\r\n <div class=\"warning-card\">\r\n <div class=\"eyebrow\">Peringatan Penting<\/div>\r\n <h2>Baca dulu sebelum pakai. <em>Ini bukan pilihan.<\/em><\/h2>\r\n <p class=\"warning-intro\">\r\n Produk ini direka untuk lelaki yang serius. Kalau anda nak hasil,\r\n ikut peraturan di bawah dari hari pertama.\r\n <\/p>\r\n\r\n <div class=\"warning-list\">\r\n <div class=\"warning-item\">\r\n <div class=\"mark\">1<\/div>\r\n <div>\r\n <strong>Tak konsisten, tak ada result<\/strong>\r\n <p>Penggunaan sehari dua tidak bermakna apa-apa. Disiplin harian yang menentukan.<\/p>\r\n <\/div>\r\n <\/div>\r\n <div class=\"warning-item\">\r\n <div class=\"mark\">2<\/div>\r\n <div>\r\n <strong>Jangan pakai ikut suka hati<\/strong>\r\n <p>Cara penggunaan dah ditetapkan. Ikut panduan, bukan andaian sendiri.<\/p>\r\n <\/div>\r\n <\/div>\r\n <div class=\"warning-item\">\r\n <div class=\"mark\">3<\/div>\r\n <div>\r\n <strong>Ikut cara penggunaan yang betul<\/strong>\r\n <p>Semak seksyen Cara Pakai di bawah dan ikut setiap langkah dengan tepat.<\/p>\r\n <\/div>\r\n <\/div>\r\n <div class=\"warning-item\">\r\n <div class=\"mark\">4<\/div>\r\n <div>\r\n <strong>Jangan berhenti terlalu awal<\/strong>\r\n <p>Badan perlukan masa. Berhenti awal bermakna anda buang usaha sendiri.<\/p>\r\n <\/div>\r\n <\/div>\r\n <div class=\"warning-item\">\r\n <div class=\"mark\">5<\/div>\r\n <div>\r\n <strong>Ada masalah? Terus WhatsApp Miss Yuyu<\/strong>\r\n <p>Jangan teka sendiri. Pasukan HQ sedia bantu semak cara penggunaan anda.<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n<\/section>\r\n\r\n<div class=\"gold-divider\"><\/div>\r\n\r\n<!-- ============ CARA PAKAI ============ -->\r\n<section id=\"carapakai\">\r\n <div class=\"wrap\">\r\n <div class=\"section-head reveal\">\r\n <div class=\"eyebrow\">Langkah Demi Langkah<\/div>\r\n <h2>Cara pakai <span class=\"gold-text\">Maverix MaxOil<\/span><\/h2>\r\n <p>Lapan perkara yang anda WAJIB ikut. Mudah, tapi mesti tepat.<\/p>\r\n <\/div>\r\n\r\n <div class=\"steps-grid reveal\">\r\n <div class=\"step-card\">\r\n <div class=\"step-num\">LANGKAH 01<\/div>\r\n <div class=\"step-icon\">\r\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"12\" cy=\"12\" r=\"9\"\/><path d=\"M12 7v5l3 3\"\/><\/svg>\r\n <\/div>\r\n <h3>Gunakan 3 kali sehari<\/h3>\r\n <p>Pagi, petang dan malam. Jadikan ia rutin tetap setiap hari.<\/p>\r\n <\/div>\r\n\r\n <div class=\"step-card\">\r\n <div class=\"step-num\">LANGKAH 02<\/div>\r\n <div class=\"step-icon\">\r\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M12 3c3 4 6 7 6 11a6 6 0 0 1-12 0c0-4 3-7 6-11z\"\/><\/svg>\r\n <\/div>\r\n <h3>Pastikan kawasan bersih & kering<\/h3>\r\n <p>Cuci dan keringkan kawasan penggunaan sebelum sapu produk.<\/p>\r\n <\/div>\r\n\r\n <div class=\"step-card\">\r\n <div class=\"step-num\">LANGKAH 03<\/div>\r\n <div class=\"step-icon\">\r\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M4 12h14\"\/><path d=\"M14 6l6 6-6 6\"\/><\/svg>\r\n <\/div>\r\n <h3>Sapu dalam satu arah<\/h3>\r\n <p>Sapu mengikut satu arah sahaja. Jangan sapu ulang-alik.<\/p>\r\n <\/div>\r\n\r\n <div class=\"step-card\">\r\n <div class=\"step-num\">LANGKAH 04<\/div>\r\n <div class=\"step-icon\">\r\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect x=\"4\" y=\"4\" width=\"16\" height=\"16\" rx=\"3\"\/><path d=\"M4 12h16M12 4v16\"\/><\/svg>\r\n <\/div>\r\n <h3>Ratakan ke seluruh kawasan<\/h3>\r\n <p>Pastikan produk diratakan dengan sekata ke seluruh kawasan penggunaan.<\/p>\r\n <\/div>\r\n\r\n <div class=\"step-card\">\r\n <div class=\"step-num\">LANGKAH 05<\/div>\r\n <div class=\"step-icon\">\r\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M7 11l5-7 5 7\"\/><path d=\"M5 21h14\"\/><path d=\"M12 11v10\" stroke-dasharray=\"2 3\"\/><\/svg>\r\n <\/div>\r\n <h3>Tidak perlu urut<\/h3>\r\n <p>Biarkan produk bertindak sendiri. Urutan tidak diperlukan langsung.<\/p>\r\n <\/div>\r\n\r\n <div class=\"step-card\">\r\n <div class=\"step-num\">LANGKAH 06<\/div>\r\n <div class=\"step-icon\">\r\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M4 15c2-2 4-2 6 0s4 2 6 0 4-2 6 0\" \/><path d=\"M6 9l12-0\" stroke-dasharray=\"2 3\"\/><\/svg>\r\n <\/div>\r\n <h3>Tidak perlu bilas<\/h3>\r\n <p>Selepas sapu, tidak perlu basuh atau bilas kawasan tersebut.<\/p>\r\n <\/div>\r\n\r\n <div class=\"step-card\">\r\n <div class=\"step-num\">LANGKAH 07<\/div>\r\n <div class=\"step-icon\">\r\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M12 3l2.5 5 5.5.8-4 3.9.9 5.5L12 15.6 7.1 18.2 8 12.7 4 8.8 9.5 8z\"\/><\/svg>\r\n <\/div>\r\n <h3>Boleh dibawa solat<\/h3>\r\n <p>Produk ini tidak menghalang ibadah. Anda boleh terus menunaikan solat.<\/p>\r\n <\/div>\r\n\r\n <div class=\"step-card\">\r\n <div class=\"step-num\">LANGKAH 08<\/div>\r\n <div class=\"step-icon\">\r\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect x=\"3\" y=\"5\" width=\"18\" height=\"16\" rx=\"2\"\/><path d=\"M8 3v4M16 3v4M3 10h18\"\/><path d=\"M9 15l2 2 4-4\"\/><\/svg>\r\n <\/div>\r\n <h3>Konsisten setiap hari<\/h3>\r\n <p>Ini langkah paling penting. Tiada hari cuti untuk disiplin anda.<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n<\/section>\r\n\r\n<!-- ============ VIDEO TUTORIAL ============ -->\r\n<section id=\"video\">\r\n <div class=\"wrap\">\r\n <div class=\"section-head reveal\" style=\"text-align:center; margin-left:auto; margin-right:auto;\">\r\n <div class=\"eyebrow\" style=\"justify-content:center;\">Tonton & Ikut<\/div>\r\n <h2>Video tutorial <span class=\"gold-text\">penggunaan<\/span><\/h2>\r\n <p>\r\n Tonton video ringkas ini untuk faham cara penggunaan Maverix MaxOil dengan betul.\r\n Ikut langkah yang ditunjukkan supaya penggunaan lebih konsisten dan tidak tersalah cara.\r\n <\/p>\r\n <\/div>\r\n\r\n <div class=\"video-stage reveal\">\r\n <div class=\"phone-frame\">\r\n <div class=\"phone-screen\">\r\n <div class=\"phone-notch\"><\/div>\r\n\r\n <!-- ===================================================\r\n VIDEO TUTORIAL (SELF-HOSTED MP4, MENEGAK 9:16)\r\n Fail video: videos\/tutorial.mp4\r\n - Pastikan folder \"videos\" diletakkan bersebelahan\r\n dengan fail index.html semasa upload ke Netlify:\r\n index.html\r\n videos\/tutorial.mp4\r\n - Untuk tukar video, gantikan fail tutorial.mp4\r\n atau ubah path dalam atribut src di bawah.\r\n - Jika mahu guna YouTube pula, padam tag <video>\r\n dan tampal iframe embed YouTube di sini \u2014\r\n ia akan mengisi skrin telefon secara automatik.\r\n =================================================== -->\r\n <video controls preload=\"metadata\" playsinline>\r\n <source src=\"videos\/tutorial.mp4\" type=\"video\/mp4\">\r\n <!-- Teks gantian jika pelayar tidak menyokong video HTML5 -->\r\n Pelayar anda tidak menyokong video. Sila hubungi Miss Yuyu\r\n melalui WhatsApp untuk panduan penggunaan.\r\n <\/video>\r\n\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n<\/section>\r\n\r\n<!-- ============ MAGIC TEST ============ -->\r\n<section class=\"magic\">\r\n <div class=\"wrap reveal\">\r\n <div class=\"magic-card\">\r\n <!-- Kilat hiasan -->\r\n <svg class=\"bolt tl\" viewBox=\"0 0 60 100\" fill=\"#E22B2B\"><path d=\"M38 2 8 56h18L22 98 52 40H32z\"\/><\/svg>\r\n <svg class=\"bolt br\" viewBox=\"0 0 60 100\" fill=\"#E22B2B\"><path d=\"M38 2 8 56h18L22 98 52 40H32z\"\/><\/svg>\r\n\r\n <div class=\"eyebrow\" style=\"justify-content:center;\">Uji Sendiri Sekarang<\/div>\r\n <h2>Nak tengok <em>magic?<\/em><\/h2>\r\n\r\n <div class=\"magic-steps\">\r\n <div class=\"magic-step\"><span class=\"n\">1<\/span> Sapu sedikit di jari<\/div>\r\n <div class=\"magic-step\"><span class=\"n\">2<\/span> Tunggu 5\u201310 minit tanpa urut<\/div>\r\n <div class=\"magic-step\"><span class=\"n\">3<\/span> Rasa sendiri kesan panas & sensasinya<\/div>\r\n <\/div>\r\n\r\n <p class=\"magic-note\">\r\n Inilah cara paling mudah untuk anda kenal produk ini.\r\n Tak perlu percaya cakap orang \u2014 rasa sendiri di hujung jari anda.\r\n <\/p>\r\n <\/div>\r\n <\/div>\r\n<\/section>\r\n\r\n<div class=\"gold-divider\"><\/div>\r\n\r\n<!-- ============ KONSISTENSI BOTOL ============ -->\r\n<section id=\"konsistensi\">\r\n <div class=\"wrap\">\r\n <div class=\"section-head reveal\">\r\n <div class=\"eyebrow\">Pelan Penggunaan<\/div>\r\n <h2>Langkah penggunaan & <span class=\"gold-text\">konsistensi<\/span><\/h2>\r\n <p>Setiap botol ada fasanya. Kenali di mana anda berada dan teruskan.<\/p>\r\n <\/div>\r\n\r\n <div class=\"timeline reveal\">\r\n <div class=\"phase p1\">\r\n <div class=\"bar\"><i><\/i><\/div>\r\n <div class=\"phase-label\">Fasa Awal<\/div>\r\n <h3>1\u20132 Botol<\/h3>\r\n <ul>\r\n <li>Fasa awal penggunaan<\/li>\r\n <li>Fokus untuk biasakan rutin harian<\/li>\r\n <li>Jangan cepat berhenti \u2014 ini baru permulaan<\/li>\r\n <\/ul>\r\n <\/div>\r\n\r\n <div class=\"phase p2\">\r\n <div class=\"bar\"><i><\/i><\/div>\r\n <div class=\"phase-label\">Fasa Konsisten<\/div>\r\n <h3>3\u20135 Botol<\/h3>\r\n <ul>\r\n <li>Penggunaan harian lebih stabil<\/li>\r\n <li>Disiplin dah jadi sebahagian rutin anda<\/li>\r\n <li>Pantau perubahan dan respon badan<\/li>\r\n <\/ul>\r\n <\/div>\r\n\r\n <div class=\"phase p3\">\r\n <div class=\"bar\"><i><\/i><\/div>\r\n <div class=\"phase-label\">Fasa Penjagaan<\/div>\r\n <h3>5 Botol Ke Atas<\/h3>\r\n <ul>\r\n <li>Fasa penjagaan berterusan<\/li>\r\n <li>Teruskan penggunaan ikut kesesuaian<\/li>\r\n <li>Lagi konsisten, lagi baik disiplin penggunaan<\/li>\r\n <\/ul>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"timeline-callout reveal\">\r\n <p>TAK TENGOK MAGIC? <em>CUBA SAPU DI JARI, TUNGGU 5\u201310 MINIT TANPA URUT.<\/em><\/p>\r\n <\/div>\r\n <\/div>\r\n<\/section>\r\n\r\n<div class=\"gold-divider\"><\/div>\r\n\r\n<!-- ============ KENAPA KONSISTEN PENTING ============ -->\r\n<section>\r\n <div class=\"wrap why-grid\">\r\n <div class=\"reveal\">\r\n <div class=\"eyebrow\">Realiti Yang Perlu Diterima<\/div>\r\n <div class=\"section-head\" style=\"margin-bottom:36px;\">\r\n <h2>Kenapa konsisten itu <span class=\"gold-text\">penting<\/span><\/h2>\r\n <\/div>\r\n <ul class=\"why-points\">\r\n <li>\r\n <span class=\"dot\"><\/span>\r\n <div>\r\n <strong>Badan anda bukan macam dulu<\/strong>\r\n <p>Bila umur meningkat, badan tak sama macam zaman muda. Terima hakikat itu dan bertindak.<\/p>\r\n <\/div>\r\n <\/li>\r\n <li>\r\n <span class=\"dot\"><\/span>\r\n <div>\r\n <strong>Pakai sekejap-sekejap? Jangan harap<\/strong>\r\n <p>Kalau pakai ikut mood, jangan harap result cepat. Produk ini perlukan disiplin, bukan semangat sehari.<\/p>\r\n <\/div>\r\n <\/li>\r\n <li>\r\n <span class=\"dot\"><\/span>\r\n <div>\r\n <strong>Disiplin adalah syarat, bukan pilihan<\/strong>\r\n <p>Produk ini perlu digunakan dengan disiplin penuh. Setiap hari, ikut cara yang ditetapkan.<\/p>\r\n <\/div>\r\n <\/li>\r\n <li>\r\n <span class=\"dot\"><\/span>\r\n <div>\r\n <strong>Jangan salahkan produk<\/strong>\r\n <p>Kalau cara pakai pun tak ikut, jangan salahkan produk. Semak dulu diri sendiri \u2014 betul ke cara anda?<\/p>\r\n <\/div>\r\n <\/li>\r\n <\/ul>\r\n <\/div>\r\n\r\n <div class=\"reveal\">\r\n <div class=\"why-quote\">\r\n <p>\u201cKonsisten adalah <em>kunci.<\/em> Lelaki yang serius tak cari alasan \u2014 dia cari cara.\u201d<\/p>\r\n <span>\u2014 Prinsip Maverix MaxOil<\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n<\/section>\r\n\r\n<div class=\"gold-divider\"><\/div>\r\n\r\n<!-- ============ JANGAN CEPAT JUDGE ============ -->\r\n<section>\r\n <div class=\"wrap reveal\">\r\n <div class=\"judge-card\">\r\n <div class=\"judge-stars\">\u2605\u2605\u2605\u2605\u2605<\/div>\r\n <div>\r\n <div class=\"eyebrow\">Sebelum Anda Menilai<\/div>\r\n <h2>Jangan terus bagi <em>rating rendah<\/em><\/h2>\r\n <p>\r\n Jika anda rasa produk belum membantu seperti yang dijangka, jangan terus beri\r\n rating 1 atau 2. Hubungi Miss Yuyu dahulu. Kami akan semak cara penggunaan anda\r\n dan bantu beri panduan yang betul.\r\n <\/p>\r\n <a class=\"btn btn-gold\" href=\"https:\/\/wa.me\/601157569695\" target=\"_blank\" rel=\"noopener\">WhatsApp Miss Yuyu<\/a>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n<\/section>\r\n\r\n<div class=\"gold-divider\"><\/div>\r\n\r\n<!-- ============ HUBUNGI MISS YUYU ============ -->\r\n<section id=\"bantuan\">\r\n <div class=\"wrap contact-grid\">\r\n <div class=\"reveal\">\r\n <div class=\"eyebrow\">Sokongan Pelanggan<\/div>\r\n <div class=\"section-head\" style=\"margin-bottom:32px;\">\r\n <h2>Sila hubungi <span class=\"gold-text\">Miss Yuyu (HQ)<\/span><\/h2>\r\n <p>Pasukan kami sedia membantu anda berkaitan:<\/p>\r\n <\/div>\r\n <ul class=\"contact-list\">\r\n <li><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M9 12l2 2 4-4\"\/><circle cx=\"12\" cy=\"12\" r=\"9\"\/><\/svg> Panduan penggunaan<\/li>\r\n <li><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M9 12l2 2 4-4\"\/><circle cx=\"12\" cy=\"12\" r=\"9\"\/><\/svg> Cara pakai yang betul<\/li>\r\n <li><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M9 12l2 2 4-4\"\/><circle cx=\"12\" cy=\"12\" r=\"9\"\/><\/svg> Pertanyaan produk<\/li>\r\n <li><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M9 12l2 2 4-4\"\/><circle cx=\"12\" cy=\"12\" r=\"9\"\/><\/svg> Sokongan selepas pembelian<\/li>\r\n <li><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M9 12l2 2 4-4\"\/><circle cx=\"12\" cy=\"12\" r=\"9\"\/><\/svg> Produk gantian jika layak<\/li>\r\n <\/ul>\r\n <\/div>\r\n\r\n <div class=\"reveal\">\r\n <div class=\"contact-box\">\r\n <div class=\"who\">Miss Yuyu<\/div>\r\n <div class=\"role\">Headquarters Support<\/div>\r\n <div class=\"phone\">011 575 69695<\/div>\r\n <a class=\"btn btn-red\" href=\"https:\/\/wa.me\/601157569695\" target=\"_blank\" rel=\"noopener\">\r\n <svg viewBox=\"0 0 24 24\" fill=\"currentColor\"><path d=\"M12 2a10 10 0 0 0-8.6 15.1L2 22l5.1-1.3A10 10 0 1 0 12 2zm5.3 14.1c-.2.6-1.2 1.2-1.7 1.2-.4.1-1 .1-1.6-.1-.4-.1-.9-.3-1.5-.6-2.6-1.1-4.3-3.8-4.5-4-.1-.2-1.1-1.4-1.1-2.7s.7-1.9 1-2.2c.2-.3.5-.3.7-.3h.5c.2 0 .4 0 .6.4.2.5.7 1.8.8 1.9.1.1.1.3 0 .5-.1.2-.1.3-.3.5l-.4.5c-.1.1-.3.3-.1.6.2.3.8 1.3 1.7 2.1 1.2 1 2.1 1.4 2.4 1.5.3.1.5.1.6-.1.2-.2.7-.8.9-1.1.2-.3.4-.2.6-.1.3.1 1.6.7 1.8.9.3.1.4.2.5.3 0 .2 0 .6-.2 1.2z\"\/><\/svg>\r\n WhatsApp Miss Yuyu\r\n <\/a>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n<\/section>\r\n\r\n<div class=\"gold-divider\"><\/div>\r\n\r\n<!-- ============ FAQ ============ -->\r\n<section id=\"faq\">\r\n <div class=\"wrap\">\r\n <div class=\"section-head reveal\" style=\"text-align:center; margin-left:auto; margin-right:auto;\">\r\n <div class=\"eyebrow\" style=\"justify-content:center;\">Soalan Lazim<\/div>\r\n <h2>FAQ <span class=\"gold-text\">Maverix MaxOil<\/span><\/h2>\r\n <\/div>\r\n\r\n <div class=\"faq-list reveal\">\r\n <div class=\"faq-item\">\r\n <button class=\"faq-q\" aria-expanded=\"false\">\r\n Berapa kali sehari perlu pakai Maverix MaxOil?\r\n <span class=\"chev\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke-width=\"2.5\" stroke-linecap=\"round\"><path d=\"M6 9l6 6 6-6\"\/><\/svg><\/span>\r\n <\/button>\r\n <div class=\"faq-a\"><div class=\"faq-a-inner\">\r\n Gunakan 3 kali sehari \u2014 pagi, petang dan malam. Jadikan ia rutin tetap setiap hari tanpa skip.\r\n <\/div><\/div>\r\n <\/div>\r\n\r\n <div class=\"faq-item\">\r\n <button class=\"faq-q\" aria-expanded=\"false\">\r\n Perlu bilas selepas pakai?\r\n <span class=\"chev\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke-width=\"2.5\" stroke-linecap=\"round\"><path d=\"M6 9l6 6 6-6\"\/><\/svg><\/span>\r\n <\/button>\r\n <div class=\"faq-a\"><div class=\"faq-a-inner\">\r\n Tidak perlu. Selepas sapu, biarkan sahaja. Tidak perlu basuh atau bilas kawasan tersebut.\r\n <\/div><\/div>\r\n <\/div>\r\n\r\n <div class=\"faq-item\">\r\n <button class=\"faq-q\" aria-expanded=\"false\">\r\n Perlu urut atau tidak?\r\n <span class=\"chev\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke-width=\"2.5\" stroke-linecap=\"round\"><path d=\"M6 9l6 6 6-6\"\/><\/svg><\/span>\r\n <\/button>\r\n <div class=\"faq-a\"><div class=\"faq-a-inner\">\r\n Tidak perlu urut. Sapu dalam satu arah, ratakan, dan biarkan produk bertindak sendiri.\r\n <\/div><\/div>\r\n <\/div>\r\n\r\n <div class=\"faq-item\">\r\n <button class=\"faq-q\" aria-expanded=\"false\">\r\n Berapa lama perlu konsisten?\r\n <span class=\"chev\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke-width=\"2.5\" stroke-linecap=\"round\"><path d=\"M6 9l6 6 6-6\"\/><\/svg><\/span>\r\n <\/button>\r\n <div class=\"faq-a\"><div class=\"faq-a-inner\">\r\n Ikut fasa botol: 1\u20132 botol untuk biasakan rutin, 3\u20135 botol untuk fasa konsisten, dan 5 botol\r\n ke atas untuk penjagaan berterusan. Jangan berhenti terlalu awal \u2014 konsisten adalah kunci.\r\n <\/div><\/div>\r\n <\/div>\r\n\r\n <div class=\"faq-item\">\r\n <button class=\"faq-q\" aria-expanded=\"false\">\r\n Apa perlu buat kalau rasa belum ada perubahan?\r\n <span class=\"chev\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke-width=\"2.5\" stroke-linecap=\"round\"><path d=\"M6 9l6 6 6-6\"\/><\/svg><\/span>\r\n <\/button>\r\n <div class=\"faq-a\"><div class=\"faq-a-inner\">\r\n Jangan terus putus asa atau beri rating rendah. Semak dulu cara penggunaan anda \u2014 betul ke ikut\r\n panduan? Kemudian hubungi Miss Yuyu di WhatsApp. Kami akan semak dan bantu beri panduan yang betul.\r\n <\/div><\/div>\r\n <\/div>\r\n\r\n <div class=\"faq-item\">\r\n <button class=\"faq-q\" aria-expanded=\"false\">\r\n Boleh bawa solat?\r\n <span class=\"chev\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke-width=\"2.5\" stroke-linecap=\"round\"><path d=\"M6 9l6 6 6-6\"\/><\/svg><\/span>\r\n <\/button>\r\n <div class=\"faq-a\"><div class=\"faq-a-inner\">\r\n Boleh. Produk ini tidak menghalang ibadah dan anda boleh terus menunaikan solat seperti biasa.\r\n <\/div><\/div>\r\n <\/div>\r\n\r\n <div class=\"faq-item\">\r\n <button class=\"faq-q\" aria-expanded=\"false\">\r\n Siapa perlu saya hubungi kalau ada masalah?\r\n <span class=\"chev\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke-width=\"2.5\" stroke-linecap=\"round\"><path d=\"M6 9l6 6 6-6\"\/><\/svg><\/span>\r\n <\/button>\r\n <div class=\"faq-a\"><div class=\"faq-a-inner\">\r\n Terus hubungi Miss Yuyu (HQ) melalui WhatsApp di 011 575 69695. Jangan teka sendiri \u2014 pasukan\r\n kami sedia bantu anda.\r\n <\/div><\/div>\r\n <\/div>\r\n\r\n <div class=\"faq-item\">\r\n <button class=\"faq-q\" aria-expanded=\"false\">\r\n Apa perlu buat kalau rasa tidak selesa?\r\n <span class=\"chev\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke-width=\"2.5\" stroke-linecap=\"round\"><path d=\"M6 9l6 6 6-6\"\/><\/svg><\/span>\r\n <\/button>\r\n <div class=\"faq-a\"><div class=\"faq-a-inner\">\r\n Jika berlaku ketidakselesaan, hentikan penggunaan dan hubungi pihak support untuk panduan lanjut.\r\n <\/div><\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n<\/section>\r\n\r\n<!-- ============ CTA AKHIR ============ -->\r\n<section class=\"final-cta\">\r\n <div class=\"wrap reveal\">\r\n <h2>Pakai <span class=\"gold-text\">betul.<\/span> Konsisten. <em>Jangan cepat putus asa.<\/em><\/h2>\r\n <p>Kalau ada masalah, jangan diam. Terus hubungi Miss Yuyu untuk panduan penggunaan.<\/p>\r\n <a class=\"btn btn-red\" href=\"https:\/\/wa.me\/601157569695\" target=\"_blank\" rel=\"noopener\">\r\n <svg viewBox=\"0 0 24 24\" fill=\"currentColor\"><path d=\"M12 2a10 10 0 0 0-8.6 15.1L2 22l5.1-1.3A10 10 0 1 0 12 2zm5.3 14.1c-.2.6-1.2 1.2-1.7 1.2-.4.1-1 .1-1.6-.1-.4-.1-.9-.3-1.5-.6-2.6-1.1-4.3-3.8-4.5-4-.1-.2-1.1-1.4-1.1-2.7s.7-1.9 1-2.2c.2-.3.5-.3.7-.3h.5c.2 0 .4 0 .6.4.2.5.7 1.8.8 1.9.1.1.1.3 0 .5-.1.2-.1.3-.3.5l-.4.5c-.1.1-.3.3-.1.6.2.3.8 1.3 1.7 2.1 1.2 1 2.1 1.4 2.4 1.5.3.1.5.1.6-.1.2-.2.7-.8.9-1.1.2-.3.4-.2.6-.1.3.1 1.6.7 1.8.9.3.1.4.2.5.3 0 .2 0 .6-.2 1.2z\"\/><\/svg>\r\n WhatsApp Miss Yuyu\r\n <\/a>\r\n <\/div>\r\n<\/section>\r\n\r\n<!-- ============ FOOTER ============ -->\r\n<footer>\r\n <div class=\"wrap footer-inner\">\r\n <div>\r\n <div class=\"logo\">MAVERIX <span>MAXOIL<\/span><\/div>\r\n <p>Panduan penggunaan rasmi untuk pelanggan selepas pembelian.<\/p>\r\n <\/div>\r\n <div class=\"contact\">Contact: 011 575 69695<\/div>\r\n <\/div>\r\n<\/footer>\r\n\r\n<!-- ============ BUTANG WHATSAPP MELEKAT ============ -->\r\n<a class=\"sticky-wa\" href=\"https:\/\/wa.me\/601157569695\" target=\"_blank\" rel=\"noopener\" aria-label=\"WhatsApp Miss Yuyu\">\r\n <svg viewBox=\"0 0 24 24\"><path d=\"M12 2a10 10 0 0 0-8.6 15.1L2 22l5.1-1.3A10 10 0 1 0 12 2zm5.3 14.1c-.2.6-1.2 1.2-1.7 1.2-.4.1-1 .1-1.6-.1-.4-.1-.9-.3-1.5-.6-2.6-1.1-4.3-3.8-4.5-4-.1-.2-1.1-1.4-1.1-2.7s.7-1.9 1-2.2c.2-.3.5-.3.7-.3h.5c.2 0 .4 0 .6.4.2.5.7 1.8.8 1.9.1.1.1.3 0 .5-.1.2-.1.3-.3.5l-.4.5c-.1.1-.3.3-.1.6.2.3.8 1.3 1.7 2.1 1.2 1 2.1 1.4 2.4 1.5.3.1.5.1.6-.1.2-.2.7-.8.9-1.1.2-.3.4-.2.6-.1.3.1 1.6.7 1.8.9.3.1.4.2.5.3 0 .2 0 .6-.2 1.2z\"\/><\/svg>\r\n<\/a>\r\n\r\n<script>\r\n\/* =====================================================\r\n JAVASCRIPT \u2014 menu mudah alih, FAQ accordion,\r\n reveal semasa skrol\r\n ===================================================== *\/\r\n\r\n\/\/ ---------- Menu mudah alih ----------\r\nconst menuBtn = document.getElementById('menuBtn');\r\nconst navLinks = document.getElementById('navLinks');\r\n\r\nmenuBtn.addEventListener('click', () => {\r\n const open = navLinks.classList.toggle('open');\r\n menuBtn.setAttribute('aria-expanded', open ? 'true' : 'false');\r\n});\r\n\r\n\/\/ Tutup menu selepas klik mana-mana pautan\r\nnavLinks.querySelectorAll('a').forEach(link => {\r\n link.addEventListener('click', () => {\r\n navLinks.classList.remove('open');\r\n menuBtn.setAttribute('aria-expanded', 'false');\r\n });\r\n});\r\n\r\n\/\/ ---------- FAQ accordion ----------\r\ndocument.querySelectorAll('.faq-q').forEach(btn => {\r\n btn.addEventListener('click', () => {\r\n const item = btn.closest('.faq-item');\r\n const answer = item.querySelector('.faq-a');\r\n const isOpen = item.classList.contains('open');\r\n\r\n \/\/ Tutup semua item lain (satu terbuka pada satu masa)\r\n document.querySelectorAll('.faq-item.open').forEach(other => {\r\n other.classList.remove('open');\r\n other.querySelector('.faq-a').style.maxHeight = null;\r\n other.querySelector('.faq-q').setAttribute('aria-expanded', 'false');\r\n });\r\n\r\n \/\/ Buka item ini jika sebelum ini tertutup\r\n if (!isOpen) {\r\n item.classList.add('open');\r\n answer.style.maxHeight = answer.scrollHeight + 'px';\r\n btn.setAttribute('aria-expanded', 'true');\r\n }\r\n });\r\n});\r\n\r\n\/\/ ---------- Reveal semasa skrol ----------\r\nconst observer = new IntersectionObserver(entries => {\r\n entries.forEach(entry => {\r\n if (entry.isIntersecting) {\r\n entry.target.classList.add('show');\r\n observer.unobserve(entry.target);\r\n }\r\n });\r\n}, { threshold: 0.12 });\r\n\r\ndocument.querySelectorAll('.reveal').forEach(el => observer.observe(el));\r\n\r\n\/\/ ---------- Partikel api \/ bara (latar belakang) ----------\r\n\/\/ Kesan ringan: bara kecil bercahaya naik perlahan ke atas.\r\n\/\/ Tiada library luaran. Dihentikan jika pengguna pilih\r\n\/\/ \"reduced motion\" untuk jimat bateri & prestasi.\r\n(function () {\r\n const canvas = document.getElementById('emberCanvas');\r\n const ctx = canvas.getContext('2d');\r\n const reduceMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;\r\n\r\n if (reduceMotion) { \/\/ hormati tetapan pengguna\r\n canvas.style.display = 'none';\r\n return;\r\n }\r\n\r\n let W, H, embers = [];\r\n const isMobile = window.matchMedia('(max-width: 760px)').matches;\r\n const COUNT = isMobile ? 18 : 36; \/\/ kurang partikel pada mobile = lebih laju\r\n\r\n \/\/ Warna bara: merah & emas sahaja, ikut tema\r\n const COLORS = [\r\n [226, 43, 43], \/\/ merah\r\n [240, 120, 50], \/\/ jingga bara\r\n [214, 178, 94] \/\/ emas\r\n ];\r\n\r\n function resize() {\r\n W = canvas.width = window.innerWidth;\r\n H = canvas.height = window.innerHeight;\r\n }\r\n window.addEventListener('resize', resize);\r\n resize();\r\n\r\n function newEmber(startAnywhere) {\r\n const c = COLORS[Math.floor(Math.random() * COLORS.length)];\r\n return {\r\n x: Math.random() * W,\r\n y: startAnywhere ? Math.random() * H : H + 10, \/\/ mula dari bawah\r\n r: 0.8 + Math.random() * 2.2, \/\/ saiz kecil\r\n speed: 0.25 + Math.random() * 0.55, \/\/ naik perlahan\r\n drift: (Math.random() - 0.5) * 0.3, \/\/ hanyut kiri\/kanan\r\n alpha: 0.15 + Math.random() * 0.45,\r\n flicker: Math.random() * Math.PI * 2,\r\n color: c\r\n };\r\n }\r\n\r\n for (let i = 0; i < COUNT; i++) embers.push(newEmber(true));\r\n\r\n function draw() {\r\n ctx.clearRect(0, 0, W, H);\r\n\r\n for (let i = 0; i < embers.length; i++) {\r\n const e = embers[i];\r\n\r\n \/\/ Gerakan: naik ke atas + hanyut sedikit\r\n e.y -= e.speed;\r\n e.x += e.drift + Math.sin(e.flicker) * 0.15;\r\n e.flicker += 0.02;\r\n\r\n \/\/ Kelipan cahaya lembut\r\n const a = e.alpha * (0.7 + 0.3 * Math.sin(e.flicker * 2));\r\n const [r, g, b] = e.color;\r\n\r\n \/\/ Cahaya luar (glow)\r\n const glow = ctx.createRadialGradient(e.x, e.y, 0, e.x, e.y, e.r * 5);\r\n glow.addColorStop(0, `rgba(${r},${g},${b},${a})`);\r\n glow.addColorStop(1, `rgba(${r},${g},${b},0)`);\r\n ctx.fillStyle = glow;\r\n ctx.beginPath();\r\n ctx.arc(e.x, e.y, e.r * 5, 0, Math.PI * 2);\r\n ctx.fill();\r\n\r\n \/\/ Teras bara\r\n ctx.fillStyle = `rgba(${r},${g},${b},${Math.min(a * 1.6, 0.9)})`;\r\n ctx.beginPath();\r\n ctx.arc(e.x, e.y, e.r, 0, Math.PI * 2);\r\n ctx.fill();\r\n\r\n \/\/ Kitar semula bara yang keluar skrin\r\n if (e.y < -12 || e.x < -12 || e.x > W + 12) embers[i] = newEmber(false);\r\n }\r\n\r\n requestAnimationFrame(draw);\r\n }\r\n\r\n \/\/ Nota: requestAnimationFrame berhenti sendiri bila tab\r\n \/\/ tidak aktif, jadi tiada pembaziran kuasa.\r\n requestAnimationFrame(draw);\r\n})();\r\n<\/script>\r\n\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Maverix MaxOil \u2014 Panduan Penggunaan Rasmi MAVERIX MAXOIL Panduan Cara Pakai Konsistensi Bantuan FAQ WhatsApp Miss Yuyu Panduan Rasmi Selepas Pembelian Terima kasih kerana memilih Maverix MaxOil Panduan penggunaan rasmi untuk lelaki yang serius mahu pakai dengan cara yang betul, konsisten dan tidak mudah putus asa. BUILT FOR REAL MAN. TAK KONSISTEN, TAK ADA RESULT. […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"footnotes":""},"class_list":["post-1660","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/regles.store\/index.php?rest_route=\/wp\/v2\/pages\/1660","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/regles.store\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/regles.store\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/regles.store\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/regles.store\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1660"}],"version-history":[{"count":4,"href":"https:\/\/regles.store\/index.php?rest_route=\/wp\/v2\/pages\/1660\/revisions"}],"predecessor-version":[{"id":1664,"href":"https:\/\/regles.store\/index.php?rest_route=\/wp\/v2\/pages\/1660\/revisions\/1664"}],"wp:attachment":[{"href":"https:\/\/regles.store\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1660"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}