/* ===================================================== Wakaf Telaga @ Asia — DESIGN SYSTEM V3 (PREMIUM) Fail: assets/css/style-v3.css Digunakan oleh: /v3/ /v4/ /v5/ /v6/ Font paparan: Marcellus (Google Fonts, link dalam ) Brand: Muslim Al Fateh — Hitam & Emas ===================================================== */ :root{ --hitam:#141210; --hitam-pekat:#0A0908; --emas:#C9A24B; --emas-tua:#A8842F; --emas-terang:#E9CE8C; --emas-brand:#D4AF37; --putih:#FFFFFF; --krem:#FAF6EE; --teks:#26221E; --kelabu:#6E675C; --serif:'Marcellus',Georgia,'Times New Roman',serif; } *{margin:0;padding:0;box-sizing:border-box} html{scroll-behavior:smooth} body{font-family:'Segoe UI',system-ui,-apple-system,Arial,sans-serif;color:var(--teks);background:var(--putih);line-height:1.7} img{max-width:100%;height:auto;display:block} .wrap{max-width:1040px;margin:0 auto;padding:0 20px} .sempit{max-width:720px;margin:0 auto;padding:0 20px} section{padding:72px 0} h1,h2,h3{line-height:1.24;color:var(--hitam);font-family:var(--serif);font-weight:400} h2{font-size:clamp(27px,4.4vw,40px);margin-bottom:16px;text-align:center} .kicker{font-size:12px;letter-spacing:2.6px;text-transform:uppercase;color:var(--emas-tua);font-weight:700;text-align:center;margin-bottom:14px} .sub{color:var(--kelabu);text-align:center;max-width:660px;margin:0 auto 40px;font-size:17px} .garis-emas{width:56px;height:2px;background:linear-gradient(90deg,var(--emas),var(--emas-terang));margin:0 auto 20px;border-radius:2px} /* BUTANG */ .btn{display:inline-block;background:linear-gradient(135deg,var(--emas-brand),var(--emas));color:#141210;font-weight:800;font-size:18px;padding:17px 40px;border-radius:50px;text-decoration:none;box-shadow:0 8px 24px rgba(201,162,75,.4);transition:.25s;letter-spacing:.2px} .btn:hover{transform:translateY(-3px);box-shadow:0 12px 30px rgba(201,162,75,.55)} .btn-besar{font-size:19px;padding:19px 48px} .btn-wa{background:#25D366;color:#fff;box-shadow:0 8px 24px rgba(37,211,102,.35)} .btn-ghost{background:transparent;border:2px solid var(--emas);color:var(--emas-tua);box-shadow:none;font-weight:700} .hero .btn-ghost,.bayang .btn-ghost,.gelap .btn-ghost{color:var(--emas-terang)} .nota-btn{font-size:13px;color:var(--kelabu);margin-top:12px} /* STICKY TOP BAR */ .bar-atas{position:sticky;top:0;z-index:100;background:rgba(10,9,8,.96);backdrop-filter:blur(8px);border-bottom:1px solid rgba(212,175,55,.35);padding:10px 0} .bar-atas .wrap{display:flex;align-items:center;justify-content:space-between;gap:12px} .bar-atas .logo{display:flex;align-items:center;gap:10px;color:#fff;font-family:var(--serif);font-size:16px;letter-spacing:.3px;text-decoration:none} .bar-atas .logo img{height:36px;width:36px;border-radius:50%} .bar-atas .logo span{color:var(--emas-brand)} .bar-atas .btn{font-size:14px;padding:10px 24px;box-shadow:none} /* HERO */ .hero{background:radial-gradient(ellipse at 50% -20%,#2A2314 0%,#141210 45%,#0A0908 100%);color:#fff;padding:68px 0 74px;text-align:center;position:relative;overflow:hidden} .hero::after{content:"";position:absolute;bottom:-1px;left:0;right:0;height:80px;background:linear-gradient(180deg,transparent,rgba(212,175,55,.06))} .hero .wrap{position:relative;z-index:1} .hero-logo{height:92px;width:92px;margin:0 auto 20px;border-radius:50%;border:1px solid rgba(212,175,55,.5)} .badge{display:inline-flex;align-items:center;gap:8px;background:rgba(212,175,55,.14);border:1px solid rgba(212,175,55,.45);color:var(--emas-terang);font-size:12px;font-weight:700;letter-spacing:1.6px;padding:8px 20px;border-radius:30px;margin-bottom:26px;text-transform:uppercase} .hero h1{color:#fff;font-size:clamp(31px,5.8vw,54px);max-width:880px;margin:0 auto 18px} .hero h1 em,.hero h1 span{font-style:normal;color:var(--emas-brand)} .hero .subhead{color:#CFC5B0;font-size:clamp(16px,2.5vw,20px);max-width:700px;margin:0 auto 14px} .hero .subhead b{color:var(--emas-terang)} .hero .hadis-mini{font-style:italic;color:#A79B7E;font-size:14px;max-width:620px;margin:0 auto 30px} .hero .hadis{font-style:italic;color:#D9D0BC;font-size:clamp(15px,2.2vw,18px);max-width:680px;margin:0 auto 8px} .hero .hadis b{color:var(--emas-terang);font-style:normal} .hero .hadis-src{color:#A79B7E;font-size:13px;margin-bottom:30px} .hero .kecil{font-size:13px;color:#A79B7E;margin-top:12px} .hero .kecil b{color:var(--emas-terang)} .chip-row{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:26px} .chip{background:rgba(255,255,255,.06);border:1px solid rgba(212,175,55,.3);color:#D9D0BC;font-size:13px;padding:8px 18px;border-radius:30px} .chip b{color:var(--emas-terang)} .hero-frame{max-width:840px;margin:44px auto 0;border-radius:20px;overflow:hidden;border:1px solid rgba(212,175,55,.5);box-shadow:0 24px 60px rgba(0,0,0,.55)} .hero-frame img{width:100%;height:auto;aspect-ratio:12/7;object-fit:cover} /* STAT / TRUST STRIP */ .stat-strip{background:var(--hitam-pekat);border-top:1px solid rgba(212,175,55,.3);border-bottom:1px solid rgba(212,175,55,.3);padding:32px 0} .stat-strip .wrap{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:20px;text-align:center} .stat b{display:block;font-size:clamp(25px,3.4vw,36px);color:var(--emas-brand);font-family:var(--serif);font-weight:400} .stat span{font-size:13px;color:#B4AA93} /* STORY */ .story{background:var(--krem)} .story .sempit p,.story .wrap>p{font-size:17.5px;margin-bottom:20px} .sorot{background:#fff;border:1px solid #EAE2CF;border-top:3px solid var(--emas-brand);border-radius:14px;padding:24px 26px;margin:30px 0;box-shadow:0 3px 14px rgba(0,0,0,.06);font-size:16.5px} .sorot b{color:var(--emas-tua)} .sorot .label-kisah{font-size:11px;letter-spacing:2.2px;text-transform:uppercase;color:var(--emas-tua);font-weight:700;margin-bottom:10px} /* GAMBAR BERBINGKAI */ .gambar-bukti{margin:34px 0 6px} .gambar-bukti img{border-radius:18px;box-shadow:0 12px 32px rgba(0,0,0,.14);width:100%} .gambar-bukti figcaption{font-size:13px;color:var(--kelabu);text-align:center;margin-top:12px;font-style:italic} .gambar-nama{max-width:640px;margin:32px auto} .gambar-nama img{border-radius:18px;border:1px solid rgba(212,175,55,.5);box-shadow:0 16px 44px rgba(0,0,0,.5);width:100%} .gambar-nama figcaption{font-size:13px;color:#A79B7E;text-align:center;margin-top:12px;font-style:italic} /* SEKSYEN GELAP (bayang / laporan / korporat) */ .gelap,.bayang{background:linear-gradient(160deg,#0A0908,#1E1810);color:#fff;text-align:center} .gelap h2,.bayang h2{color:var(--emas-terang)} .gelap .kicker,.bayang .kicker{color:var(--emas)} .gelap p,.bayang p{color:#D9D0BC;max-width:680px;margin:0 auto 18px;font-size:17px} .ayat-besar{font-family:var(--serif);font-style:italic;font-size:clamp(19px,3vw,26px);color:#fff;max-width:720px;margin:26px auto} .ayat-besar em{font-style:normal;color:var(--emas-brand)} /* SENARAI SEMAK (dalam seksyen gelap) */ .semak-list{display:flex;flex-direction:column;gap:10px;max-width:560px;margin:28px auto 0;text-align:left} .semak-item{display:flex;gap:12px;align-items:center;background:rgba(255,255,255,.05);border:1px solid rgba(212,175,55,.3);border-radius:12px;padding:14px 18px;font-size:15px;color:#E8E1D0} .semak-item .tanda{color:var(--emas-brand);font-weight:800;font-size:17px} /* BARIS BUKTI (ikon bulat emas + teks) */ .bukti-senarai{display:flex;flex-direction:column;gap:16px;max-width:760px;margin:32px auto 0} .bukti-baris{display:flex;gap:18px;align-items:flex-start;background:var(--krem);border:1px solid #EAE2CF;border-radius:14px;padding:20px 24px;text-align:left} .bukti-baris .dot{flex:none;width:46px;height:46px;border-radius:50%;background:linear-gradient(135deg,var(--emas-brand),var(--emas));display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-size:20px;color:#141210;box-shadow:0 6px 16px rgba(201,162,75,.3)} .bukti-baris b{font-size:16.5px;color:var(--hitam)} .bukti-baris p{font-size:14.5px;line-height:1.65;color:var(--kelabu);margin:4px 0 0} .bukti-baris.gelap-kad{background:rgba(255,255,255,.05);border-color:rgba(212,175,55,.3)} .bukti-baris.gelap-kad b{color:var(--emas-terang)} .bukti-baris.gelap-kad p{color:#C9C0AB} /* LANGKAH */ .langkah-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:22px;margin-top:14px} .langkah-kad{background:#fff;border:1px solid #EAE2CF;border-radius:18px;padding:32px 26px;text-align:center;box-shadow:0 3px 14px rgba(0,0,0,.05)} .langkah-kad .no{width:52px;height:52px;border-radius:50%;background:linear-gradient(135deg,var(--emas-brand),var(--emas));color:#141210;font-size:23px;display:flex;align-items:center;justify-content:center;margin:0 auto 16px;font-family:var(--serif);box-shadow:0 6px 16px rgba(201,162,75,.35)} .langkah-kad h3{font-size:19px;margin-bottom:9px} .langkah-kad p{font-size:14.5px;color:var(--kelabu)} /* DUA LAJUR */ .dua-lajur{display:grid;grid-template-columns:1fr 1fr;gap:36px;align-items:center;margin-top:40px} .dua-lajur img{border-radius:18px;box-shadow:0 12px 32px rgba(0,0,0,.14)} .dua-lajur h3{font-size:22px;margin-bottom:10px} .dua-lajur p{color:var(--kelabu)} @media(max-width:780px){.dua-lajur{grid-template-columns:1fr;gap:22px}} /* BEZA GRID (4 kad ikon) */ .beza-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:22px;margin-top:14px} .beza-kad{background:#fff;border:1px solid #EAE2CF;border-radius:18px;padding:30px 26px;box-shadow:0 3px 14px rgba(0,0,0,.05)} .beza-kad .ikon{font-size:30px;margin-bottom:12px} .beza-kad h3{font-size:19px;margin-bottom:9px} .beza-kad p{font-size:14.5px;color:var(--kelabu)} /* PETIKAN (blockquote) */ .petikan{font-family:var(--serif);font-style:italic;font-size:clamp(19px,3vw,25px);color:var(--hitam);max-width:760px;margin:10px auto 8px;text-align:center;line-height:1.5} .petikan-src{text-align:center;color:var(--kelabu);font-size:13.5px;margin-bottom:8px} /* VIDEO */ .video-wrap{position:relative;max-width:820px;margin:0 auto;padding-top:46.25%;border-radius:18px;overflow:hidden;box-shadow:0 14px 40px rgba(0,0,0,.25);background:#000;border:1px solid rgba(201,162,75,.4)} @media(max-width:860px){.video-wrap{padding-top:56.25%}} .video-wrap iframe{position:absolute;inset:0;width:100%;height:100%;border:0} /* PERBANDINGAN — JADUAL (desktop) */ .banding table{width:100%;border-collapse:collapse;max-width:820px;margin:0 auto;font-size:15px;background:#fff;border-radius:16px;overflow:hidden;box-shadow:0 6px 24px rgba(0,0,0,.08)} .banding th{padding:16px 18px;text-align:left;font-family:var(--serif);font-weight:400;font-size:16px} .banding th:first-child{background:#F1EADA;color:var(--kelabu);width:34%} .banding th.lama{background:#3A342C;color:#CFC5B0} .banding th.kami{background:linear-gradient(135deg,var(--emas-brand),var(--emas));color:#141210} .banding td{padding:14px 18px;border-top:1px solid #EFE8D6;vertical-align:top} .banding td:first-child{font-weight:700;color:var(--hitam);background:#FBF8F0} .banding td.x{color:#9A8F7D} .banding td.ok{font-weight:600} .banding td.ok::before{content:"✓ ";color:var(--emas-tua);font-weight:800} /* PERBANDINGAN — KAD BERTINDAN (mobile-first, guna di v6) */ .banding-kad{display:flex;flex-direction:column;gap:12px;max-width:640px;margin:0 auto} .bk{background:#fff;border:1px solid #EAE2CF;border-radius:14px;padding:18px 22px} .bk b{font-size:14.5px;color:var(--hitam);display:block;margin-bottom:8px} .bk .lama{font-size:13.5px;line-height:1.6;color:#9A8F7D;margin:0} .bk .kami{font-size:14px;line-height:1.6;color:var(--teks);font-weight:600;margin:4px 0 0} .bk .kami::before{content:"✓ ";color:var(--emas-tua);font-weight:800} .bk .lama::before{content:"✕ ";color:#B4A88F} /* PAKEJ */ .pakej-sec{background:linear-gradient(180deg,var(--putih),var(--krem))} .pakej-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(225px,1fr));gap:20px;align-items:stretch} .pakej{background:#fff;border:1px solid #EAE2CF;border-radius:20px;padding:32px 24px;text-align:center;display:flex;flex-direction:column;box-shadow:0 3px 14px rgba(0,0,0,.06);position:relative;transition:.25s} .pakej:hover{transform:translateY(-5px);box-shadow:0 14px 34px rgba(0,0,0,.12)} .pakej.pilihan{border:2px solid var(--emas-brand);box-shadow:0 14px 38px rgba(201,162,75,.28);transform:scale(1.03)} .pakej .label{position:absolute;top:-14px;left:50%;transform:translateX(-50%);background:linear-gradient(135deg,var(--emas-brand),var(--emas));color:#141210;font-size:12px;font-weight:800;padding:6px 20px;border-radius:20px;white-space:nowrap;letter-spacing:.5px} .pakej h3{font-size:20px;margin-bottom:2px} .pakej .untuk{font-size:12.5px;color:var(--kelabu);margin-bottom:12px} .pakej .harga{font-size:38px;color:var(--hitam);margin:6px 0 18px;font-family:var(--serif)} .pakej ul{list-style:none;text-align:left;font-size:14px;margin-bottom:24px;flex:1} .pakej ul li{padding:6px 0 6px 26px;position:relative} .pakej ul li::before{content:"✓";position:absolute;left:0;color:var(--emas-tua);font-weight:800} .pakej .btn{font-size:15.5px;padding:14px 20px;width:100%} .nota-pakej{text-align:center;font-size:12.5px;color:var(--kelabu);margin-top:16px;max-width:760px;margin-left:auto;margin-right:auto} .jaminan-bar{max-width:760px;margin:38px auto 0;background:#fff;border:1px dashed var(--emas);border-radius:16px;padding:20px 26px;display:flex;gap:16px;align-items:center;font-size:14.5px;color:var(--teks)} .jaminan-bar .ikon{font-size:34px} /* URGENSI (jujur — tiada countdown palsu) */ .urgensi{max-width:760px;margin:28px auto 0;background:linear-gradient(160deg,#141210,#241D10);border:1px solid rgba(212,175,55,.45);border-radius:18px;padding:30px 30px 32px;text-align:center} .urgensi h3{font-size:21px;color:var(--emas-terang);margin-bottom:10px} .urgensi p{font-size:14.5px;line-height:1.7;color:#D9D0BC;max-width:600px;margin:0 auto} .urgensi p b{color:var(--emas-terang)} .urgensi .btn{margin-top:18px;font-size:15.5px;padding:14px 34px} /* BUKTI SOSIAL */ .bukti{background:var(--putih)} .testi-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:20px;margin-bottom:36px} .testi{background:var(--krem);border-radius:18px;padding:28px;border:1px solid #EAE2CF;position:relative} .testi::before{content:"\201C";position:absolute;top:6px;left:18px;font-size:60px;color:var(--emas);font-family:var(--serif);opacity:.5} .testi p{font-size:15px;font-style:italic;margin:14px 0 16px;position:relative} .testi b{font-size:14px;color:var(--hitam);display:block} .testi span{font-size:12.5px;color:var(--kelabu)} .galeri-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px} @media(max-width:700px){.galeri-grid{grid-template-columns:repeat(2,1fr)}} .galeri-grid img{border-radius:14px;width:100%;height:100%;object-fit:cover;box-shadow:0 4px 14px rgba(0,0,0,.1)} /* FAQ */ .faq{background:var(--krem)} .faq details{background:#fff;border:1px solid #EAE2CF;border-radius:14px;margin-bottom:12px;overflow:hidden;max-width:780px;margin-left:auto;margin-right:auto} .faq summary{cursor:pointer;padding:19px 24px;font-weight:700;color:var(--hitam);font-size:16px;list-style:none;position:relative;padding-right:48px} .faq summary::-webkit-details-marker{display:none} .faq summary::after{content:"+";position:absolute;right:22px;top:50%;transform:translateY(-50%);font-size:24px;color:var(--emas-tua)} .faq details[open] summary::after{content:"−"} .faq .isi{padding:0 24px 20px;font-size:15px;color:var(--kelabu)} /* KORPORAT BAND */ .korporat{background:linear-gradient(160deg,#0A0908,#241D10);color:#fff;text-align:center} .korporat h2{color:var(--emas-terang)} .korporat p{color:#D9D0BC;max-width:640px;margin:0 auto 26px;font-size:16.5px} /* CTA AKHIR */ .akhir{background:radial-gradient(ellipse at 50% -20%,#2A2314 0%,#141210 45%,#0A0908 100%);color:#fff;text-align:center;padding:88px 0} .akhir h2{color:#fff;font-size:clamp(28px,4.6vw,44px)} .akhir h2 em{font-style:normal;color:var(--emas-brand)} .akhir p{color:#D9D0BC;max-width:640px;margin:0 auto 30px;font-size:17px} .akhir .kecil{font-size:13px;color:#A79B7E;margin-top:16px} .akhir .kecil a{color:var(--emas-terang)} /* FOOTER */ footer{background:var(--hitam-pekat);color:#A79B7E;font-size:13px;padding:34px 0;text-align:center;border-top:1px solid rgba(212,175,55,.3)} footer a{color:var(--emas-brand);text-decoration:none} footer .logo-footer{height:56px;margin:0 auto 14px} /* STICKY CTA MOBILE */ .cta-melekat{position:fixed;bottom:0;left:0;right:0;z-index:99;background:rgba(10,9,8,.97);border-top:1px solid rgba(212,175,55,.4);padding:10px 14px;display:none;align-items:center;justify-content:space-between;gap:10px} .cta-melekat .teks{color:#E9CE8C;font-size:13px;font-weight:700;line-height:1.3} .cta-melekat .btn{font-size:14px;padding:12px 22px;white-space:nowrap;box-shadow:none} @media(max-width:720px){.cta-melekat{display:flex}body{padding-bottom:64px}} /* WHATSAPP TERAPUNG */ .wa-float{position:fixed;bottom:76px;right:18px;background:#25D366;color:#fff;width:54px;height:54px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:26px;text-decoration:none;box-shadow:0 6px 18px rgba(0,0,0,.3);z-index:98} @media(min-width:721px){.wa-float{bottom:22px;right:22px}} /* REVEAL */ .reveal{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s ease} .reveal.nampak{opacity:1;transform:none} @media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}} /* ===== MOBILE ===== */ @media(max-width:640px){ section{padding:50px 0} .pakej.pilihan{transform:none} .hero{padding:46px 0 52px} .hero-frame{border-radius:14px;margin-top:32px} .hero-logo{height:72px;width:72px} .badge{font-size:10.5px;padding:7px 14px;letter-spacing:1.1px} .chip{font-size:12px;padding:7px 14px} .btn{display:block;width:100%;max-width:380px;margin-left:auto;margin-right:auto;text-align:center} .btn-besar{font-size:17px;padding:17px 30px} .bar-atas .btn{display:inline-block;width:auto} .cta-melekat .btn{display:inline-block;width:auto;margin:0} .story .sempit p,.story .wrap>p{font-size:16px} .sorot{padding:20px 20px;font-size:15.5px} .gambar-bukti img,.gambar-nama img{border-radius:14px} .bukti-baris{padding:16px 18px;gap:14px} .jaminan-bar{flex-direction:column;text-align:center;gap:8px;padding:18px 20px} .urgensi{padding:24px 20px 26px} .galeri-grid{gap:10px} .stat-strip .wrap{grid-template-columns:repeat(2,1fr)} .akhir{padding:60px 0} } /* Jadual perbandingan boleh swipe pada skrin kecil */ @media(max-width:720px){ .banding .wrap{overflow-x:auto;-webkit-overflow-scrolling:touch} .banding table{min-width:600px;font-size:13px} .banding th,.banding td{padding:10px 12px} }