/* Font di-hosting sendiri (subset latin, 4 bobot, 107 KB). Sebelumnya dari Google Fonts: font datang belakangan lalu seluruh halaman bergeser turun ~98px (CLS 0,305). Di-preload di . */ @font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/jakarta-400.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD} @font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/jakarta-600.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD} @font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/jakarta-700.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD} @font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:800;font-display:swap;src:url(../fonts/jakarta-800.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD} /* ============================================================ FORTIS WEBINAR — Landing Page Token warna diambil langsung dari export Figma ============================================================ */ :root{ --bg:#111111; --bg-2:#0C0C0C; --panel:#1A2028; --panel-2:#1E2836; --footer:#121715; --green:#3FDB82; /* mint utama (headline) */ --green-lt:#78ECA7; /* mint terang */ --green-deep:#288553; /* dasar tombol / band — digelapkan tipis dari #298855 agar teks putih 10px lolos kontras WCAG 4.5:1 */ --green-band:#3FB37C; /* band David Noah */ --text:#FFFFFF; --muted:#B4BDB8; --line:rgba(255,255,255,.10); --maxw:1416px; /* frame Figma 1920, margin kiri/kanan 252 → 1920-504 */ --radius:18px; } *{margin:0;padding:0;box-sizing:border-box} html{scroll-behavior:smooth;scroll-padding-top:clamp(74px,5.2vw,100px)} /* navbar fixed: cegah anchor ketutup */ body{ background:var(--bg);color:var(--text); font-family:'Plus Jakarta Sans',system-ui,-apple-system,'Segoe UI',sans-serif; font-size:16px;line-height:1.62; /* `clip`, BUKAN `hidden`. overflow-x:hidden di menjadikan body scroll-container tersendiri → window.scrollTo/scrollIntoView jadi tidak berpengaruh dan anchor #daftar bisa tidak meluncur. `clip` tetap memotong luapan horizontal tanpa membuat scrollport baru. */ overflow-x:clip; -webkit-font-smoothing:antialiased; } img{max-width:100%;height:auto;display:block} /* height:auto WAJIB — tanpa ini gambar ber-atribut width/height jadi kestretch */ a{color:inherit;text-decoration:none} /* margin sisi ikut menyusut proporsional (13.125% tiap sisi spt Figma), bukan lebar tetap — kalau tetap, di 1440 margin tinggal 12px & konten mempet */ .wrap{width:min(var(--maxw),calc(100% - clamp(32px,26.25vw,504px)));margin-inline:auto} .g{color:var(--green)} section{position:relative} /* ---------- Tipografi ---------- */ h1,h2,h3{line-height:1.14;letter-spacing:-.015em;font-weight:800} h1{font-size:clamp(30px,4.4vw,58px)} h2{font-size:clamp(24px,3.1vw,42px)} h3{font-size:clamp(17px,1.5vw,21px);font-weight:700} .sec-head{text-align:center;margin-bottom:52px} .sec-head h2{margin-bottom:14px} .sec-head p{color:var(--muted);max-width:640px;margin-inline:auto} .eyebrow{font-size:clamp(19px,2.4vw,30px);font-weight:800;color:var(--green); text-transform:uppercase;letter-spacing:.005em;line-height:1.2} /* ---------- Tombol ---------- */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:8px; font-weight:700;font-size:15px;letter-spacing:.03em; padding:15px 34px;border-radius:99px;border:0;cursor:pointer; transition:transform .18s ease,box-shadow .18s ease,filter .18s ease; } .btn:hover{transform:translateY(-2px)} .btn-green{ background:linear-gradient(100deg,var(--green-deep) 0%,#35A96A 55%,#41C57F 100%); color:#fff;box-shadow:0 10px 30px rgba(41,136,85,.38); } .btn-green:hover{box-shadow:0 14px 38px rgba(63,219,130,.45)} .btn-ghost{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.85)} .btn-ghost:hover{background:rgba(255,255,255,.09)} .btn-white{background:#fff;color:#14301F} .btn-lg{padding:17px 40px;font-size:16px} /* badge "100 Orang Pertama" di atas tombol */ .btn-stack{display:inline-flex;flex-direction:column;align-items:center;gap:-10px;position:relative} .btn-cap{ background:#fff;color:#14301F;font-size:11.5px;font-weight:800; padding:4px 14px;border-radius:99px;position:relative;z-index:2;margin-bottom:-11px; box-shadow:0 3px 10px rgba(0,0,0,.35); } /* ============================================================ NAVBAR — melayang di atas hero (warna dari export Figma) ============================================================ */ /* Diukur langsung dari fortiscircle.id/saham (viewport 1920): wrapper fixed 90px · pill 1060x60 @top30 · radius 20 · bg rgba(15,26,42,.72) backdrop blur 10px · glow hijau · font link 14px/400 · logo 125x31 */ .nav{position:fixed;top:0;left:0;right:0;z-index:9999;height:clamp(64px,4.688vw,90px);display:flex;align-items:flex-end} .nav .wrap{--maxw:1060px} /* pill 1060 lebar */ .nav-in{ background:rgba(15,26,42,.72); -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px); border-radius:clamp(14px,1.042vw,20px); height:clamp(48px,3.125vw,60px); display:flex;align-items:center;padding:0 clamp(8px,0.52vw,10px) 0 clamp(16px,1.302vw,25px); box-shadow:0 0 44px -15px #3FB37C; /* glow hijau seperti aslinya */ } .nav-logo{height:clamp(22px,1.615vw,31px);width:auto;flex:0 0 auto} /* 125x31 */ .nav-div{width:1px;height:clamp(18px,1.25vw,24px);background:rgba(255,255,255,.2);margin:0 clamp(12px,1.04vw,20px);flex:0 0 auto} .nav-links{display:flex;align-items:center;gap:clamp(12px,1.25vw,24px);flex:1;justify-content:center} .nav-links a{display:inline-flex;align-items:center;gap:6px;font-size:clamp(11px,0.729vw,14px);font-weight:400;color:#fff;white-space:nowrap;transition:color .18s} .nav-links a:hover,.nav-links a.on{color:var(--green)} .tag-free{border:1px solid var(--green);color:#fff;font-size:clamp(8px,0.52vw,10px);font-weight:700;padding:2px 6px;border-radius:4px;letter-spacing:.04em} .tag-limited{background:#2D855A;color:#fff;font-size:clamp(8px,0.52vw,10px);font-weight:700;padding:2px 7px;border-radius:4px;letter-spacing:.04em} .nav-login{ background:linear-gradient(90deg,#1F7644 0%,#3DAF79 100%);color:#fff; padding:0 clamp(18px,1.61vw,31px);height:clamp(36px,2.344vw,45px); display:inline-flex;align-items:center;border-radius:99px; font-weight:600;font-size:clamp(11px,0.729vw,14px);flex:0 0 auto; } .nav-login:hover{filter:brightness(1.08)} .nav-burger{display:none;background:none;border:0;color:#fff;font-size:26px;cursor:pointer;padding:6px 10px;margin-left:auto} .nav-menu-head,.nav-backdrop{display:none} .nav-links .nav-login-m{display:none} /* spesifisitas harus > .nav-links a */ /* ============================================================ HERO ============================================================ */ .hero{ position:relative;overflow:hidden; padding:clamp(110px,9.17vw,176px) 0 clamp(70px,10.885vw,209px); /* logo top 176; jarak alumni→ticker */ background:#0B0C0B; } /* foto panggung (opasitas 40% sudah ke-bake dari Figma) */ .hero::before{ content:'';position:absolute;inset:0;z-index:0; background:url(../img/hero-bg.webp) center/cover no-repeat; } /* gelapkan kiri supaya teks tetap terbaca + lebur ke section berikutnya */ .hero::after{ content:'';position:absolute;inset:0;z-index:1; background:linear-gradient(90deg,#0B0C0B 0%,rgba(11,12,11,.82) 34%,rgba(11,12,11,.30) 62%,transparent 88%), radial-gradient(90% 70% at 76% 34%, rgba(63,219,130,.12) 0%, transparent 60%), linear-gradient(180deg,transparent 62%,#111111 100%); } /* Semua nilai di bawah = hasil ukur frame Figma 1920x936, dikonversi ke vw (contoh: 176px pada 1920 = 9.17vw) supaya presisi & tetap skalabel. */ .hero .wrap{position:relative;z-index:3} .hero-copy{max-width:60%} /* teks 252→1075 dari container 1416 */ .hero-logo{width:clamp(230px,22.19vw,426px);height:auto} /* 426x60 */ .hero h1{ color:var(--green-lt);text-transform:uppercase; font-size:clamp(28px, calc(-38px + 5.417vw), 66px); /* lebar teks 707 → font 66 */ line-height:1.0606; /* baris 275→345 = 70px */ margin:clamp(10px,0.729vw,14px) 0 0; /* dikalibrasi: ink headline jatuh di 275 */ } .hero .sub{ font-weight:600;margin:clamp(16px,1.354vw,26px) 0 0; /* ink sub di 432 */ font-size:clamp(15px,1.146vw,22px); /* lebar teks 759 */ } .hero .btn{ margin-top:clamp(28px,2.865vw,55px); /* box tombol di 506 */ height:clamp(46px,2.92vw,56px);padding:0 clamp(26px,2.2vw,42px); min-width:clamp(180px,11.6vw,223px); /* tombol 223x56 */ } .hero .alumni{ margin-top:clamp(2px,0.156vw,3px); /* ink alumni di 585 */ font-weight:700;font-size:clamp(16px,1.25vw,24px); /* lebar teks 534 */ } /* komposit David: BLEED keluar container, mepet tepi kanan (x1056→1903 dari 1920) */ .hero-visual{ position:absolute;z-index:2; right:0.9%; /* sisa 17px dari 1920 */ top:18.16%; /* 170 dari 936 */ width:44.1%; /* 847 dari 1920 */ pointer-events:none; } .hero-visual img{width:100%;filter:drop-shadow(0 24px 60px rgba(0,0,0,.55))} /* ---------- Marquee ticker ---------- */ .marquee,.testi-sw{overflow:hidden;position:relative} .testi-sw{width:min(1820px,calc(100% - 40px));margin-inline:auto} /* 4x440 + 3x20 = 1820, sama seperti live */ .testi-sw .swiper-slide{display:flex;align-items:flex-start;height:auto} .marquee-track{display:flex;gap:16px;width:max-content;align-items:flex-start;animation:slide 42s linear infinite} .marquee:hover .marquee-track{animation-play-state:paused} @keyframes slide{to{transform:translateX(-50%)}} .ticker{padding:0 0 clamp(20px,1.82vw,35px);position:relative;z-index:4;overflow:hidden;min-height:80px} /* tinggi dipesan: slide dibangun JS, tanpa ini section di bawahnya melompat */ .ticker .swiper-slide{width:auto!important} .ticker .swiper-wrapper{transition-timing-function:linear!important} /* mengalir mulus, bukan melangkah */ .tick{ flex:0 0 auto;display:flex;align-items:center;gap:clamp(9px,0.73vw,14px); height:clamp(58px,4.58vw,88px); /* tinggi kartu 88 pada frame 1920 */ background:#161A18;border:1px solid rgba(255,255,255,.10); border-radius:clamp(10px,0.83vw,16px); padding:0 clamp(16px,1.35vw,26px) 0 clamp(10px,0.83vw,16px); box-shadow:0 6px 20px rgba(0,0,0,.45); } .tick img{width:clamp(30px,2.4vw,46px);height:clamp(30px,2.4vw,46px);flex:0 0 auto} .tick span{font-size:clamp(15px,1.25vw,24px);font-weight:800;color:#fff;letter-spacing:-.01em;white-space:nowrap} .tick span b{color:var(--green);font-weight:800} /* ---------- Band CTA hijau ---------- */ /* Diukur dari export "section 1-3/2.png" (1920x156) */ .band{ background:linear-gradient(90deg,#135E2E 0%,#3FB37C 100%); /* warna persis dari file */ height:clamp(120px,8.125vw,156px);display:flex;align-items:center; } .band .wrap{--maxw:1176px} /* margin 372 pada frame 1920 */ .band-in{display:flex;align-items:center;justify-content:space-between;gap:26px} /* kotak teks lebih tinggi dari ink-nya → geser naik agar ink pas di 31/72 */ .band-in>div:first-child{position:relative;top:clamp(-7px,-0.339vw,-4px)} .band .tag{ display:inline-block;background:#fff;color:#14301F;font-weight:800;letter-spacing:.06em; font-size:clamp(9px,0.625vw,12px);padding:clamp(3px,0.26vw,5px) clamp(9px,0.78vw,15px); border-radius:99px;margin-bottom:clamp(6px,0.52vw,10px); } .band h3{ font-weight:800;max-width:600px; font-size:clamp(16px,1.25vw,24px); /* ink cap 22 */ line-height:1.167; /* baris 72→100 = 28px */ } .band h3 .lt{color:#CFF7E0} /* tombol JOIN NOW: outline putih 287x62, pill "100 Orang" nempel di border atas */ .band .btn-stack{flex:0 0 auto} .band .btn-cap{font-size:clamp(9px,0.677vw,13px);padding:clamp(3px,0.26vw,5px) clamp(10px,0.83vw,16px);margin-bottom:clamp(-9px,-0.73vw,-14px)} .band .btn-ghost{ width:clamp(190px,14.95vw,287px);height:clamp(44px,3.23vw,62px); padding:0;font-size:clamp(12px,0.94vw,18px);border-width:1.5px; } /* ============================================================ SECTION UMUM ============================================================ */ .sec{padding:88px 0} .sec-sm{padding:64px 0} /* ---------- Section video (diukur dari export "section 1-3/3.png" 1920x1280) ---------- */ .sec-video{padding:clamp(60px,4.06vw,78px) 0 clamp(80px,11.3vw,217px);position:relative} /* glow hijau elips di bawah kartu aktif — diukur 563x120 @ y1064-1183 */ .sec-video::after{ content:'';position:absolute;left:50%;transform:translateX(-50%);pointer-events:none; bottom:clamp(40px,5.05vw,97px); width:clamp(240px,29.32vw,563px);height:clamp(52px,6.25vw,120px); background:radial-gradient(ellipse at center,rgba(63,219,130,.26) 0%,rgba(63,219,130,.10) 45%,transparent 72%); filter:blur(8px); } .sec-video .sec-head{margin-bottom:0} .sec-video .sec-head h2{font-size:clamp(24px, calc(-22px + 3.75vw), 50px);line-height:1.16} /* ink cap 36 */ .sec-video .sec-head p{ font-size:clamp(16px,1.25vw,24px);line-height:1.5; /* lebar teks 772; baris 176→212 = 36px */ margin-top:clamp(16px,1.35vw,26px);max-width:790px; } /* ---------- Carousel video testimoni (YouTube Shorts + Swiper) ---------- */ /* full-bleed: container 1920 · 5 slide · gap 30 → slide dasar 360x640 slide aktif di-scale 1.1722 → 422x750 (persis frame) */ .vid-swiper{ width:100%;position:relative;overflow:hidden; --pad-top:clamp(60px,6.98vw,134px); width:calc(100vw - 40px);margin-inline:auto; /* container 1880 spt live */ --slide-w:calc((100vw - 40px - 120px)/5); /* 5 slide + 4 gap 30 → 352 */ --slide-h:calc(var(--slide-w)*16/9); padding:var(--pad-top) 0 clamp(30px,2.86vw,55px); } .vid-swiper .swiper-slide{ position:relative;display:flex;align-items:center;justify-content:center; aspect-ratio:9/16;border-radius:12px;overflow:hidden;background:#161917; transform:scale(.8);opacity:.3;filter:blur(4px); transition:transform .5s ease,opacity .5s ease,filter .5s ease; } .vid-swiper .swiper-slide-active{ transform:scale(1.1);opacity:1;filter:blur(0);z-index:99; border:2px solid #00FF7F;box-shadow:0 0 30px rgba(0,255,127,.8); } .vid-swiper iframe{width:100%;height:100%;border:0;display:block;pointer-events:none} .video-overlay{position:absolute;inset:0;z-index:10;background:transparent;cursor:pointer} .mute-indicator{ position:absolute;top:12px;right:12px;z-index:20;background:rgba(0,0,0,.62);color:#fff; padding:5px 11px;border-radius:99px;font-size:11px;font-weight:700; pointer-events:none;opacity:0;transition:opacity .3s; } .swiper-slide-active .mute-indicator{opacity:1} /* arrow 48x48, pusat ±316px dari tengah (x 644 & 1277), sejajar tengah kartu (y 688) */ .vid-swiper .swiper-button-next,.vid-swiper .swiper-button-prev{ color:#00FF7F;background:rgba(0,0,0,.4);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px); width:45px;height:45px;margin:0; border:1.5px solid rgba(0,255,127,.3);border-radius:50%;z-index:1000; top:calc(var(--pad-top) + var(--slide-h)/2);transform:translateY(-50%); } .vid-swiper .swiper-button-next:after,.vid-swiper .swiper-button-prev:after{font-size:clamp(12px,0.83vw,16px);font-weight:800} .vid-swiper .swiper-button-prev{left:calc(50% - 16.458vw - clamp(18px,1.25vw,24px));right:auto} .vid-swiper .swiper-button-next{left:calc(50% + 16.458vw - clamp(18px,1.25vw,24px));right:auto} /* ============================================================ SECTION 4 — Whatsapp Group + 30.000+ Diukur dari export "Frame 1686552519.png" (1920x1528) ============================================================ */ .sec-wa{padding:clamp(50px,4.844vw,93px) 0 clamp(90px,13.96vw,268px)} .sec-wa .split{gap:clamp(24px,2.71vw,52px);align-items:start} .sec-wa .split-txt{padding-top:clamp(54px,5.677vw,109px)} /* komposit top 93 → headline ink 216 */ .sec-wa h2{ font-size:clamp(22px, calc(8px + 1.667vw), 40px);line-height:1.15; /* baris 216→262 = 46 */ } .sec-wa .wa-sub{ font-weight:700;font-size:clamp(13px,0.833vw,16px);line-height:1.5; /* baris 331→355 = 24 */ margin-top:clamp(16px,1.51vw,29px); /* 292→331 */ } .sec-wa .check-list{margin-top:clamp(6px,0.52vw,10px);gap:clamp(5px,0.417vw,8px)} /* jarak antar item 60 = 2 baris(52) + 8 */ .sec-wa .check-list li{ font-size:clamp(13px,0.885vw,17px);line-height:1.53; /* baris dalam item = 26 */ gap:clamp(10px,0.9vw,17px); } .sec-wa .check-list .ic{width:clamp(16px,1.15vw,22px);height:clamp(16px,1.15vw,22px);font-size:clamp(9px,0.63vw,12px)} /* tombol 321x72, pill 202x32 menempel kiri (+24 dari tepi tombol) */ .sec-wa .btn-stack{margin-top:clamp(20px,1.77vw,34px);align-items:flex-start;padding-left:clamp(12px,1.25vw,24px)} .sec-wa .btn-cap{font-size:clamp(10px,0.73vw,14px);padding:clamp(4px,0.31vw,6px) clamp(11px,0.94vw,18px)} .sec-wa .btn-green{ margin-left:clamp(-12px,-1.25vw,-24px); width:clamp(210px,16.72vw,321px);height:clamp(50px,3.75vw,72px); padding:0;font-size:clamp(14px,1.04vw,20px); } .sec-wa .wa-visual img{max-width:clamp(300px,33.23vw,638px)} /* 638 lebar, rata kiri di kolomnya */ /* headline "30.000+ Orang" — ink di y890, section-relative */ .sec-wa .wa-h2{ text-align:center;font-size:clamp(22px, calc(8px + 1.667vw), 40px);line-height:1.15; margin:clamp(58px,5.94vw,114px) 0 clamp(28px,2.76vw,53px); /* 789→890 lalu ke marquee 974 */ } .sec-wa .testi-track img{width:100%;height:auto} /* lebar diatur swiper (spv 4), tinggi ikut aspek */ /* ---------- Split (gambar + teks) ---------- */ .split{display:grid;grid-template-columns:1fr 1fr;gap:52px;align-items:center} .split.rev .split-txt{order:2} .check-list{list-style:none;margin-top:22px;display:grid;gap:15px} .check-list li{display:flex;gap:12px;align-items:flex-start;font-size:15px;color:#E4EAE6} .check-list .ic{flex:0 0 auto;width:21px;height:21px;border-radius:50%;background:var(--green); color:#0b1f13;display:grid;place-items:center;font-size:12px;font-weight:900;margin-top:2px} /* ============================================================ SECTION 5 — Kurikulum (Day 1 & Day 2) Diukur dari export "Frame 1686552520.png" (1920x2206) ============================================================ */ .sec-kur{padding:clamp(110px,9.427vw,181px) 0 clamp(80px,8.13vw,156px)} .sec-kur .sec-head{margin-bottom:0} .sec-kur .sec-head h2{ font-size:clamp(24px, calc(-16px + 3.333vw), 48px);line-height:1.25; /* baris 200→260 = 60 */ max-width:1400px;margin-inline:auto; } /* kolom 696 + gap 24 (bukan 52) → col2 mulai di x972 */ /* minmax(0,1fr) WAJIB: tanpa ini gambar yg lebih lebar dari kolom akan melarkan kolomnya sendiri dan menggencet kolom teks */ .sec-kur .split{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(20px,1.25vw,24px);align-items:start} .sec-kur .topic>div{max-width:560px} /* teks body 341→900 = 559 */ .sec-kur .day1{margin-top:clamp(42px,4.167vw,80px)} /* baris day1 mulai y380 */ .sec-kur .day2{margin-top:clamp(-44px,-2.292vw,-22px)} /* baris day2 mulai y1180 */ .sec-kur .day1 .split-txt{padding-top:clamp(48px,4.896vw,94px)} /* gambar y380, badge y474 */ .sec-kur .day2 .split-txt{padding-top:clamp(75px,7.76vw,149px)} /* gambar y1180, badge y1329 */ /* badge 284x40 */ .sec-kur .day-badge{ height:clamp(30px,2.083vw,40px);min-width:clamp(210px,14.79vw,284px); margin-bottom:0;font-size:clamp(10px,0.73vw,14px); } .sec-kur .day-badge b,.sec-kur .day-badge span{ display:inline-flex;align-items:center;height:100%;padding:0 clamp(12px,1.04vw,20px); } .sec-kur .day h2{ font-size:clamp(26px, calc(-30px + 4.583vw), 58px);line-height:0.966; /* lebar teks 644 → font 58; baris 546→602 = 56 */ margin:clamp(9px,0.781vw,15px) 0 0; } .sec-kur .day .when{ font-size:clamp(15px,1.25vw,24px);margin:clamp(19px,1.719vw,33px) 0 0; } /* topic: ikon 52x52 di kiri, teks indent 89 dari tepi kolom */ .sec-kur .topic{ gap:clamp(20px,1.93vw,37px);padding:clamp(20px,1.875vw,36px) 0 0; border-top:1px solid rgba(63,219,130,.20);margin-top:clamp(20px,1.875vw,36px); } .sec-kur .topic:first-of-type{border-top:0;margin-top:0;padding-top:clamp(14px,1.198vw,23px)} .sec-kur .topic img{width:clamp(34px,2.71vw,52px);height:clamp(34px,2.71vw,52px)} .sec-kur .topic h3{font-size:clamp(15px, calc(-9px + 1.875vw), 27px);line-height:1.222; margin:clamp(-11px,-0.573vw,-5px) 0 clamp(8px,0.73vw,14px)} /* ink judul sejajar puncak ikon */ .sec-kur .topic p{font-size:clamp(14px,1.042vw,20px);line-height:1.62} /* laptop bleed keluar kolom */ .sec-kur .day-visual{overflow:visible} .sec-kur .day-visual img{width:auto;max-width:none} /* Ukuran & posisi diukur dari design/section5.png (ruang 1920): Day1 laptop x 1043-1742 y 412-1112 (699x700) — kolom kanan mulai x=972 → geser +71 Day2 laptop x 156- 872 y 1316-2013 (716x697) — kolom kiri mulai x=252 → geser -96 Aset dipotong pas di laptop saja; cahaya ambient section TIDAK ikut. */ .sec-kur .day1 .day-visual img{height:clamp(300px,36.46vw,700px);margin:1.61vw 0 0 3.70vw} .sec-kur .day2 .day-visual img{height:clamp(300px,36.30vw,697px);margin:7.08vw 0 0 -5vw} /* ============================================================ SECTION 6 — DAY 3 (center + 3 kartu) Diukur dari export "Frame 1686552522.png" (1920x1540) ============================================================ */ .sec-day3{padding:clamp(70px,6.15vw,118px) 0 clamp(45px,3.8vw,73px);text-align:center} .sec-day3 .d3-head .day-badge{ height:clamp(30px,2.083vw,40px);margin-bottom:0;font-size:clamp(10px,0.73vw,14px); } .sec-day3 .d3-head .day-badge b,.sec-day3 .d3-head .day-badge span{ display:inline-flex;align-items:center;height:100%;padding:0 clamp(12px,1.04vw,20px); } .sec-day3 h2{ color:var(--green-lt); font-size:clamp(26px, calc(-2.5px + 3.229vw), 59.5px);line-height:1.0588; /* lebar teks 637; baris 182→245 = 63 */ margin:clamp(4px,0.3125vw,6px) auto 0;max-width:900px; } .sec-day3 .when{ font-weight:700;color:#EAF2ED;margin:clamp(10px,0.885vw,17px) 0 0; font-size:clamp(15px,1.25vw,24px); } /* komposit laptop bleed lebar (x128→1820 = 1692 dari 1920) */ .sec-day3 .d3-visual{margin:clamp(18px,1.823vw,35px) auto 0;width:clamp(300px, calc(-740px + 112.5vw), 1420px)} .sec-day3 .d3-visual img{width:100%} /* 3 kartu: 455 lebar, gap 25, tinggi 377 */ .d3-cards{ display:grid;grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(14px,1.302vw,25px);margin-top:clamp(48px,4.792vw,92px);text-align:left; } .d3-card{ position:relative;border:0;border-radius:clamp(10px,0.83vw,16px); min-height:clamp(240px,19.64vw,377px); padding:clamp(12px,1.094vw,21px) clamp(16px,1.56vw,30px) clamp(20px,2.08vw,40px); } /* Border GRADASI sesuai desain: hijau penuh di tepi atas lalu memudar habis ke bawah — makanya kartu tidak punya garis bawah. Teknik: kotak gradien penuh lalu bagian dalamnya dilubangi mask, menyisakan garis 1px di keempat sisi (sisi bawah otomatis tak terlihat karena gradiennya sudah transparan). */ .d3-card::before{ content:'';position:absolute;inset:0;border-radius:inherit;padding:1px; background:linear-gradient(180deg,#3A9F6F 0%,rgba(58,159,111,.55) 55%,rgba(58,159,111,0) 100%); -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); mask-composite:exclude;pointer-events:none; } .d3-card img{width:clamp(34px,2.66vw,51px);height:auto;margin-bottom:clamp(14px,1.354vw,26px)} .d3-card h3{ color:var(--green);font-size:clamp(19px,1.615vw,31px);line-height:1.161; margin-bottom:clamp(6px,0.573vw,11px); } .d3-card p{color:var(--muted);font-size:clamp(15px,1.094vw,21px);line-height:1.524} /* ---------- Kurikulum hari ---------- */ .day-badge{display:inline-flex;align-items:center;gap:0;border-radius:99px;overflow:hidden; border:1px solid rgba(255,255,255,.22);margin-bottom:18px;font-size:12.5px;font-weight:800;letter-spacing:.04em} .day-badge b{background:var(--green-deep);color:#fff;padding:7px 16px} .day-badge span{padding:7px 16px;color:#fff} .day h2{color:var(--green-lt);margin-bottom:14px} .day .when{font-weight:700;font-size:15px;margin-bottom:28px;color:#EAF2ED} .topic{display:flex;gap:16px;padding:20px 0;border-top:1px solid rgba(63,219,130,.22)} .topic:first-of-type{border-top:0} .topic img{width:44px;height:44px;flex:0 0 auto;object-fit:contain} .topic h3{color:var(--green);margin-bottom:7px} .topic p{color:var(--muted);font-size:14.5px} .day-visual img{filter:drop-shadow(0 30px 70px rgba(0,0,0,.65))} .day3{text-align:center} .day3 .day-visual{margin:38px auto 46px;max-width:900px} .tri{display:grid;grid-template-columns:repeat(3,1fr);gap:0;text-align:left} .tri .topic{border-top:0;border-left:1px solid rgba(63,219,130,.22);padding:0 26px;flex-direction:column;gap:12px} .tri .topic:first-child{border-left:0} /* ============================================================ SECTION 7 — Case study (frame 1920x1117) kartu = gambar 1409x733, lebar 1408, gap 45 ============================================================ */ .sec-case{padding:clamp(75px,5.677vw,109px) 0 clamp(60px,6.354vw,122px)} .case-h2{ text-align:center;font-size:clamp(26px, calc(8px + 2.917vw), 64px);line-height:1.2; /* lebar teks 1114 */ margin-bottom:clamp(30px,3.02vw,58px); } .cases{overflow:hidden;padding-bottom:clamp(10px,1vw,20px)} /* Swiper: wajib hidden, kalau visible slide antre melebarkan halaman */ .cases .swiper-slide{width:clamp(300px,73.33vw,1408px)!important} .case img{width:100%;aspect-ratio:1409/733} /* reservasi ruang: cegah layout shift saat lazy-load */ /* ---------- lama (tidak dipakai lagi) ---------- */ /* ---------- Marquee testimoni ---------- */ .testi-track img{border-radius:12px} /* ============================================================ DAVID NOAH — band hijau ============================================================ */ /* ============================================================ SECTION 8 — David Noah (frame 1920x883) Posisi absolut berbasis % frame → deterministik. band hijau y55-667 · nama x154 · foto x600-1100 (tembus atas & bawah band) bio x1028-1703 · pills y461-506 ============================================================ */ .david{position:relative;height:clamp(470px,45.99vw,883px);background:#111111;overflow:hidden} .david::before{ /* band hijau + foto audiens */ content:'';position:absolute;left:0;right:0; top:6.229%;height:69.31%; background:url(../img/david-bg.webp) center/cover no-repeat; } .david-name{ position:absolute;left:8.021%;top:9.4%;z-index:2; color:#fff;font-weight:800;letter-spacing:-.03em; font-size:clamp(42px, calc(-10px + 8.333vw), 150px);line-height:0.9; /* baris 121→275 = 154 */ } .david-photo{position:absolute;left:23.099%;top:1.472%;width:32.552%;z-index:3} /* figur x490-1021; bawah foto = bawah band (667) */ .david-photo img{width:100%} .david-bio{position:absolute;left:53.542%;top:17.7%;width:35.208%;z-index:4} .david-bio p{ font-size:clamp(14px, calc(4px + 0.8333vw), 20px);line-height:1.65; /* lebar teks 675; baris pitch 38 */ margin-bottom:clamp(20px,2.04vw,39px); } .pills{display:flex;gap:clamp(6px,0.573vw,11px);flex-wrap:wrap} .pill{ border:1.5px solid rgba(255,255,255,.9);border-radius:99px; height:clamp(30px,2.344vw,45px);display:inline-flex;align-items:center; padding:0 clamp(12px,1.15vw,22px);font-size:clamp(10px,0.833vw,16px);font-weight:800;letter-spacing:.05em; } /* ============================================================ SECTION 9 — Bonus (frame 1920x843) cover bleed ke tepi kiri (x0-1030) · teks rata kanan container ============================================================ */ .sec-bonus{position:relative;height:clamp(430px,43.906vw,843px);overflow:hidden} .bonus-img{position:absolute;left:0;top:0;width:48%;max-width:none} .sec-bonus .wrap{position:relative;height:100%;z-index:2} .bonus-txt{max-width:clamp(280px,31.406vw,603px);margin-left:auto;padding-top:clamp(98px,10.99vw,211px)} .bonus-txt h2{ color:var(--green);font-size:clamp(22px, calc(8px + 1.667vw), 40px);line-height:1.2; /* baris 227→275 = 48 */ } .bonus-lead{ font-weight:700;font-size:clamp(15px,1.25vw,24px); /* lebar teks 476 */ margin-top:clamp(7px,0.677vw,13px); /* ink 305→336 */ } .bonus-body{ color:var(--muted);font-size:clamp(15px,1.281vw,24.6px);line-height:1.423; /* lebar teks 548; baris 35 */ margin-top:clamp(13px,1.25vw,24px); } .bonus-btn{ margin-top:clamp(24px,2.5vw,48px); width:clamp(200px,16.72vw,321px);height:clamp(46px,3.75vw,72px); padding:0;font-size:clamp(13px,1.04vw,20px); } /* ============================================================ PRICING ============================================================ */ .price-card{ max-width:760px;margin-inline:auto;border:1.5px solid var(--green); border-radius:22px;overflow:hidden;background:var(--panel); } .price-top{padding:30px 32px 26px} .price-head{display:flex;justify-content:space-between;align-items:flex-start;gap:18px;margin-bottom:22px} .price-head h3{font-size:clamp(20px,2.1vw,27px);font-weight:800;color:var(--green);letter-spacing:.01em} .price-num{text-align:right} .price-old{display:inline-block;background:#D24247;color:#fff;font-size:11px;font-weight:800; padding:2px 10px;border-radius:99px;text-decoration:line-through;margin-bottom:5px} .price-now{font-size:clamp(18px,1.9vw,23px);font-weight:800} .price-lbl{font-size:14px;font-weight:800;margin-bottom:6px} .feat{display:flex;gap:13px;padding:16px 0;border-bottom:1px solid rgba(255,255,255,.09)} .feat:last-of-type{border-bottom:0} .feat .ic{flex:0 0 auto;width:22px;height:22px;border-radius:50%;display:grid;place-items:center; font-size:12px;font-weight:900;margin-top:2px} .feat .yes{background:var(--green);color:#0b1f13} .feat .no{background:#D24247;color:#fff} .feat b{display:block;color:var(--green);font-size:14.5px;margin-bottom:3px} .feat p{font-size:14px;color:#DCE4DF;margin-bottom:4px} .feat .val{font-size:12.5px;font-weight:700;color:var(--green)} .total{display:flex;align-items:center;gap:12px;padding-top:18px;border-top:1px solid rgba(255,255,255,.14)} .total span{font-weight:800;color:var(--green);font-size:14.5px} .total .chip{background:rgba(255,255,255,.14);padding:4px 14px;border-radius:99px;font-size:13px;font-weight:800;color:#fff} .price-foot{background:linear-gradient(96deg,#2E9162 0%,#37A972 60%,#43BE7D 100%); padding:22px 32px;display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap} .price-foot .lbl{font-size:12.5px;font-weight:700;opacity:.95} .price-foot .big{font-size:clamp(23px,2.6vw,31px);font-weight:800;line-height:1.1} .price-foot .save{font-size:12.5px;font-weight:700;margin-top:3px} /* varian Basic: footer nempel di dalam kartu */ .price-card.basic .price-foot{background:transparent;padding:20px 32px 28px;border-top:1px solid rgba(255,255,255,.12)} /* ============================================================ FAQ ============================================================ */ .faq{max-width:840px;margin-inline:auto;display:grid;gap:14px} .qa{background:var(--panel-2);border-radius:14px;overflow:hidden} .qa button{width:100%;background:none;border:0;cursor:pointer;color:var(--green); font-family:inherit;font-size:clamp(15px,1.4vw,18px);font-weight:700;text-align:left; padding:20px 24px;display:flex;justify-content:space-between;align-items:center;gap:16px} .qa .sign{color:var(--green);font-size:22px;font-weight:400;flex:0 0 auto;transition:transform .25s} .qa.open .sign{transform:rotate(45deg)} .qa .ans{max-height:0;overflow:hidden;transition:max-height .32s ease} .qa .ans p{padding:0 24px 20px;color:#C9D2CC;font-size:14.5px} .qa.open .ans{max-height:420px} /* ============================================================ FOOTER ============================================================ */ footer{background:var(--footer);padding:64px 0 40px;text-align:center; background-image:radial-gradient(60% 100% at 50% 100%,rgba(63,219,130,.10),transparent 70%)} footer .flogo{width:170px;margin:0 auto 26px} .fnav{display:flex;flex-wrap:wrap;justify-content:center;gap:0;margin-bottom:22px} .fnav a{padding:0 20px;font-size:14px;color:#E6ECE8;border-left:1px solid rgba(255,255,255,.22)} .fnav a:first-child{border-left:0} .fnav a:hover{color:var(--green)} footer .contact{font-size:14px;color:#CFD8D3;margin-bottom:14px} footer .copy{font-size:13px;color:#8C978F} /* ============================================================ SECTION 10 — Pricing (frame 1920x2620) kartu 941 lebar · Advance y336 h963 · Basic y1579 h942 ============================================================ */ .sec-price{padding:clamp(65px,6.146vw,118px) 0 0} .sec-price-basic{padding-top:clamp(60px,5.63vw,108px)} .sec-price .sec-head{margin-bottom:clamp(52px,5.417vw,104px)} .sec-price .eyebrow{font-size:clamp(18px, calc(10px + 1.25vw), 34px);line-height:1.2} /* ink y131 h41 */ .sec-price .sec-head h2:not(.eyebrow){font-size:clamp(20px,2.083vw,40px);line-height:1.2;margin-top:clamp(13px,1.302vw,25px)} .price-card{max-width:clamp(320px,49.01vw,941px)} /* x490→1431 */ .sec-price:last-of-type{padding-bottom:clamp(50px,5.16vw,99px)} /* ============================================================ SECTION 11 — Testimoni (frame 1920x1218) — DUA baris marquee headline ink y156 · baris1 y293 h429 · baris2 y781 h429 ============================================================ */ .sec-testi{padding:clamp(60px,7.083vw,136px) 0 clamp(40px,7.5vw,144px)} .testi-h2{ text-align:center;color:var(--green); font-size:clamp(24px, calc(9px + 2.292vw), 53px);line-height:1.2; /* lebar teks 914 */ margin-bottom:clamp(46px,4.844vw,93px); } .sec-testi .testi-track img{width:100%;height:auto} /* lebar diatur swiper (spv 4) */ .marquee-track.rev{animation-direction:reverse} /* ============================================================ SECTION 12 — FAQ (frame 1920x1219) panel 1233 lebar · item tertutup h95 · gap 24 · headline ink y103 ============================================================ */ .sec-faq{padding:clamp(50px,4.531vw,87px) 0 clamp(60px,5.21vw,100px)} .sec-faq .sec-head{margin-bottom:clamp(28px,2.6vw,50px)} .sec-faq .sec-head h2{font-size:clamp(22px, calc(8px + 1.667vw), 40px);line-height:1.2} .faq{max-width:clamp(320px,64.22vw,1233px);gap:clamp(12px,1.25vw,24px)} /* x343→1576 */ .qa button{ min-height:clamp(50px, calc(24px + 2.5vw), 72px); padding:clamp(13px,1.11vw,21px) clamp(16px,1.6vw,30px); font-size:clamp(15px, calc(12px + 0.4167vw), 20px); } .qa .ans p{padding:0 clamp(16px,1.6vw,30px) clamp(14px,1.4vw,27px);font-size:clamp(13px, calc(8px + 0.4167vw), 16px);line-height:1.75} /* ============================================================ SECTION 13 — Footer (frame 1920x511) logo y130 h41 w204 · nav y222 · kontak y293 · copyright y360 ============================================================ */ footer{padding:clamp(70px,6.77vw,130px) 0 clamp(50px,7.03vw,135px);text-align:center; background:var(--footer); background-image:radial-gradient(60% 100% at 50% 100%,rgba(63,219,130,.10),transparent 70%)} footer .flogo{width:clamp(120px,10.625vw,204px);margin:0 auto clamp(20px,1.927vw,37px)} .fnav{display:flex;flex-wrap:wrap;justify-content:center;margin-bottom:clamp(20px,2.344vw,45px)} .fnav a{padding:0 clamp(10px,1.09vw,21px);font-size:clamp(12px,0.885vw,17px);color:#E6ECE8;border-left:1px solid rgba(255,255,255,.22)} .fnav a:first-child{border-left:0} .fnav a:hover{color:var(--green)} footer .contact{font-size:clamp(12px,0.885vw,17px);color:#CFD8D3;margin-bottom:clamp(18px,2.031vw,39px)} footer .copy{font-size:clamp(11px,0.833vw,16px);color:#8C978F} /* ============================================================ RESPONSIVE — pola dari export "Fortis Webinar Mobile.png" (390 logis) ============================================================ */ /* ---------- TABLET ---------- */ @media(max-width:1023px){ .vid-swiper{--slide-w:calc((100vw - 40px)/3);--pad-top:clamp(40px,5vw,70px)} .vid-swiper .swiper-button-prev{left:calc(50% - 22vw - 20px)} .vid-swiper .swiper-button-next{left:calc(50% + 22vw - 20px)} .sec-kur .split,.sec-wa .split,.split{grid-template-columns:1fr} .sec-kur .day-visual img,.sec-kur .day1 .day-visual img,.sec-kur .day2 .day-visual img{ height:auto;width:100%;max-width:640px;margin:0 auto} .d3-cards{grid-template-columns:1fr} } /* ---------- MOBILE ---------- */ @media(max-width:860px){ /* NAVBAR → hamburger */ .nav{top:0;height:auto;padding:10px 0} .nav .wrap{--maxw:100%;width:calc(100% - 24px)} /* backdrop-filter HARUS dimatikan di mobile: properti itu menjadikan .nav-in containing block untuk anak position:fixed, sehingga drawer & backdrop mengukur ke pil 56px, bukan ke viewport. Diganti warna solid. */ .nav-in{height:56px;padding:0 8px 0 18px;border-radius:14px; backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(15,26,42,.94)} .nav-logo{height:20px} .nav-div{display:none} .nav-burger{display:block;margin-left:auto;order:3} .nav-login{display:none} /* drawer geser dari KANAN (mengikuti fortiscircle.id di HP) */ .nav-links{ position:fixed;top:0;right:0;bottom:0;left:auto;z-index:9999; width:min(300px,78vw); background:#122630; flex-direction:column;justify-content:flex-start;align-items:stretch;gap:0; padding:22px 24px 30px; transform:translateX(100%);transition:transform .3s ease; box-shadow:-18px 0 44px rgba(0,0,0,.45); overflow-y:auto; } .nav-links.on{transform:none} .nav-menu-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:30px} .nav-menu-logo{height:22px;width:auto} .nav-close{ width:34px;height:34px;flex:0 0 auto;border:0;cursor:pointer;border-radius:50%; background:linear-gradient(135deg,#3DAF79,#2E9162);color:#fff; font-size:22px;line-height:1;display:flex;align-items:center;justify-content:center; } .nav-links a{ font-size:18px;font-weight:500;justify-content:flex-start; padding:13px 0;gap:9px; } .nav-login-m{ display:inline-flex!important;align-self:flex-start;margin-top:22px; background:linear-gradient(90deg,#1F7644 0%,#3DAF79 100%); padding:0 30px!important;height:46px!important;min-height:46px;border-radius:99px; align-items:center;justify-content:center; font-size:17px!important;font-weight:600; } .nav-backdrop{ display:block;position:fixed;inset:0;z-index:9998; background:rgba(0,0,0,.55);opacity:0;transition:opacity .3s ease; pointer-events:none; } /* WAJIB: `display:block` di atas mengalahkan atribut [hidden] dari UA stylesheet. Tanpa dua baris ini backdrop tetap menutupi layar (opacity 0 = tak terlihat tapi tetap menangkap sentuhan) → hamburger & menu mati total. */ .nav-backdrop[hidden]{display:none} .nav-backdrop.on{opacity:1;pointer-events:auto} .nav-open{overflow:hidden} /* HERO — gambar di ATAS teks, rata kiri, tombol full-width */ .hero{padding:86px 0 26px;text-align:left} .hero .wrap{position:relative;z-index:3} .hero-visual{position:static;width:100%;margin:0 0 20px;right:auto;top:auto} .hero-copy{max-width:100%} .hero-logo{margin-inline:0;width:min(260px,68%)} .hero h1{font-size:clamp(28px,8.5vw,40px);line-height:1.12} .hero .sub{font-size:clamp(14px,3.9vw,17px);margin-top:14px} .hero .btn{width:100%;min-width:0;margin-top:26px;height:52px;font-size:15px} .hero .alumni{font-size:clamp(13px,3.6vw,16px);margin-top:12px} .hero::after{background:linear-gradient(180deg,rgba(11,12,11,.35) 0%,rgba(11,12,11,.86) 55%,#111111 100%)} /* TICKER */ .ticker{margin-top:0} .tick{height:52px;padding:0 16px 0 10px} .tick img{width:28px;height:28px} .tick span{font-size:15px} /* BAND hijau */ .band{height:auto;padding:26px 0} .band .wrap{--maxw:100%} .band-in{flex-direction:column;align-items:flex-start;gap:18px} .band-in>div:first-child{top:0} .band h3{font-size:clamp(17px,4.9vw,22px);max-width:100%} .band .btn-stack{width:100%} .band .btn-ghost{width:100%;height:50px;font-size:14px} /* SECTION umum */ .sec,.sec-video,.sec-wa,.sec-kur,.sec-day3,.sec-case,.sec-bonus,.sec-price,.sec-testi,.sec-faq{ padding-left:0;padding-right:0} .sec-head h2,.wa-h2,.case-h2,.testi-h2,.sec-day3 h2{font-size:clamp(22px,6.4vw,30px);line-height:1.2} .sec-head p{font-size:clamp(14px,3.9vw,16px)} /* SECTION 4 — WhatsApp */ .sec-wa{padding:44px 0 60px} .sec-wa .split-txt{padding-top:0;order:2} .sec-wa .wa-visual{order:1;margin-bottom:22px} .sec-wa .wa-visual img{max-width:100%;margin-inline:auto} .sec-wa h2{font-size:clamp(22px,6.4vw,28px)} .sec-wa .check-list li{font-size:14px;gap:10px} .sec-wa .btn-stack{width:100%;padding-left:0;align-items:center} .sec-wa .btn-green{width:100%;margin-left:0;height:52px;font-size:15px} /* SECTION 5/6 — kurikulum: gambar di atas teks */ .sec-kur{padding:44px 0 40px} .sec-kur .day1,.sec-kur .day2{margin-top:34px} .sec-kur .split-txt,.sec-kur .day1 .split-txt,.sec-kur .day2 .split-txt{padding-top:0;order:2} .sec-kur .day-visual{order:1;margin-bottom:20px;overflow:hidden} .sec-kur .day h2{font-size:clamp(24px,6.9vw,32px)} .sec-kur .day .when{font-size:14px;margin-top:16px} .sec-kur .topic{gap:14px;padding-top:22px;margin-top:22px} .sec-kur .topic>div{max-width:100%} .sec-kur .topic h3{font-size:17px;margin-top:0} .sec-kur .topic p{font-size:14px} .sec-day3{padding:40px 0 34px} .sec-day3 .d3-visual{width:100%} .d3-card{min-height:0;padding:20px} /* SECTION 7 — case study */ .sec-case{padding:40px 0 46px} .cases .swiper-slide{width:calc(100vw - 40px)!important} /* SECTION 8 — David: tinggi ikut konten, tidak absolut. PENTING: anak-anaknya harus position:relative — kalau static, z-index tidak berlaku dan ::before (absolute) akan menimpa seluruh konten. */ /* Susunan mengikuti desain mobile: foto full-width dulu, nama besar MENIMPA bagian bawah foto, baru bio + pills. Urutan DOM tetap (nama-foto-bio), dibalik lewat flex order. */ .david{height:auto;padding-bottom:0;background:#1c5f45;display:flex;flex-direction:column} .david-name{order:2} .david-photo{order:1} .david-bio{order:3} .david::before{ top:0;height:100%; /* foto 2200x701 kalau di-cover ke kotak portrait jadi ter-zoom ekstrem → di mobile pakai gradien hijau saja */ background:linear-gradient(165deg,#41B87F 0%,#2E9A6B 48%,#1A5C43 100%); } /* inset:auto WAJIB — nilai left/top persen dari desktop akan aktif lagi sebagai offset relatif dan menggeser elemen keluar layar */ /* nama ditarik naik menimpa bagian bawah foto, seperti desain mobile */ .david-name{position:relative;inset:auto;z-index:4;font-size:clamp(44px,13.5vw,66px); padding:0 20px;line-height:0.92;margin-top:-1.55em} .david-photo{position:relative;inset:auto;z-index:3;width:100%;margin:0} /* ujung bawah foto dipudarkan supaya potongan badan tidak terlihat tajam */ .david-photo img{width:100%;-webkit-mask-image:linear-gradient(180deg,#000 90%,transparent 100%);mask-image:linear-gradient(180deg,#000 90%,transparent 100%)} .david-bio{position:relative;inset:auto;z-index:4;width:auto;padding:18px 20px 30px} .david-bio p{font-size:14px;line-height:1.7} .pill{height:34px;font-size:11px;padding:0 14px} /* SECTION 9 — bonus: gambar di atas */ .sec-bonus{height:auto;padding:36px 0 46px} .bonus-img{position:static;width:100%;max-width:520px;margin:0 auto 24px} .bonus-txt{max-width:100%;margin-left:0;padding-top:0} .bonus-txt h2{font-size:clamp(22px,6.4vw,28px)} .bonus-btn{width:100%;height:52px;font-size:15px} /* SECTION 10 — pricing */ .sec-price{padding:40px 0 0} .sec-price .eyebrow{font-size:clamp(16px,4.9vw,22px)} .sec-price .sec-head h2:not(.eyebrow){font-size:clamp(16px,4.4vw,20px);margin-top:12px} .sec-price .sec-head{margin-bottom:26px} .price-card{max-width:100%} .price-top{padding:22px 18px} .price-foot{padding:20px 18px} /* SECTION 11 — testimoni */ .sec-testi{padding:44px 0 20px} .testi-sw{width:calc(100% - 24px)} /* header kartu harga: judul & harga jangan berdesakan */ .price-head{flex-direction:column;align-items:flex-start;gap:10px} .price-num{text-align:left} .price-now{font-size:22px;white-space:nowrap} .price-old{font-size:11px} .price-foot{flex-direction:column;align-items:flex-start;gap:14px} .price-foot .btn,.price-foot .btn-white{width:100%} .feat b{font-size:14px} .feat p{font-size:13.5px} .total{flex-wrap:wrap} /* SECTION 12/13 — FAQ & footer */ .sec-faq{padding:40px 0 44px} .faq{max-width:100%} .qa button{min-height:0;padding:16px 18px;font-size:15px} .qa .ans p{padding:0 18px 16px;font-size:14px} footer{padding:44px 0 40px} footer .flogo{width:130px;margin-bottom:22px} .fnav{gap:4px 0;margin-bottom:20px} .fnav a{border-left:0;padding:5px 12px;font-size:13px} } @media(max-width:560px){ .wrap{width:calc(100% - 32px)} .vid-swiper{--slide-w:calc((100vw - 5px)/1.5);--pad-top:26px} .vid-swiper .swiper-button-prev{left:10px} .vid-swiper .swiper-button-next{left:auto;right:10px} .vid-swiper .swiper-button-next,.vid-swiper .swiper-button-prev{width:36px;height:36px} .sec-testi .testi-track img,.sec-wa .testi-track img{width:100%} } /* tombol checkout yang URL-nya belum diberikan klien → non-aktif, bukan link mati yang menjebak calon pendaftar */ .btn-off{opacity:.4;cursor:not-allowed;pointer-events:none} /* Band section: tag dinaikkan h3→h2 supaya urutan heading tidak melompat (aksesibilitas), ukurannya dikunci di sini agar tampilan tidak berubah. */ .band-h{font-size:clamp(17px,1.5vw,21px);font-weight:700;line-height:1.14;letter-spacing:-.015em}