/* mulai: home-section */ #section-direct-brand { text-align: left; padding: 20px 0; margin-top: 100px; } #section-direct-brand .title-left { font-size: 2.2rem; color: #1b1f23; font-weight: 500; line-height: 1.1; margin-bottom: 1rem; } #section-direct-brand .tagline-left { font-size: 1.25rem; color: #4a5568; line-height: 1.6; } @keyframes psFadeUp { from { opacity: 0; transform: translateY(100px); } to { opacity: 1; transform: translateY(0); } } #ps-section-home { display: flex !important; justify-content: center !important; padding: 30px 0 !important; background: transparent !important; width: 100% !important; box-sizing: border-box !important; } #ps-section-home .ps-container { width: 90vw !important; max-width: 1300px !important; display: flex !important; align-items: center !important; background: transparent !important; border-radius: 30px !important; overflow: hidden !important; } #ps-section-home .ps-visual-side { width: 50% !important; display: flex !important; justify-content: center !important; align-items: center !important; padding: 20px 50px !important; min-height: 350px !important; background: linear-gradient(135deg, #BDE3C3 0%, #6D94C5 100%) !important; border-radius: 30px !important; opacity: 0; animation: psFadeUp 1s cubic-bezier(0.16, 1, 0.3, 1) forwards !important; } #ps-section-home .ps-text-side { width: 50% !important; padding: 20px 60px !important; display: flex !important; flex-direction: column !important; justify-content: center !important; background: transparent !important; opacity: 0; animation: psFadeUp 1s cubic-bezier(0.16, 1, 0.3, 1) 0.2s forwards !important; } #ps-section-home .ps-headline { font-family: 'Segoe UI', Roboto, sans-serif !important; font-size: clamp(1.8rem, 3.5vw, 2.8rem) !important; line-height: 1.1 !important; font-weight: 800 !important; margin-top: 80px !important; margin-bottom: 40px !important; color: #1a1a1a !important; } #ps-section-home .ps-description { font-family: 'Segoe UI', Roboto, sans-serif !important; font-size: 1rem !important; line-height: 1.5 !important; margin-bottom: 0 !important; color: #333333 !important; } [data-theme-style="dark"] #section-direct-brand .title-left, body[data-theme-style="dark"] #ps-section-home .ps-headline { color: #ffffff !important; } [data-theme-style="dark"] #section-direct-brand .tagline-left, body[data-theme-style="dark"] #ps-section-home .ps-description { color: #cbd5e0 !important; } @media (max-width: 1024px) { #ps-section-home .ps-container { flex-direction: column !important; } #ps-section-home .ps-visual-side, #ps-section-home .ps-text-side { width: 100% !important; padding: 30px 20px !important; } #ps-section-home .ps-visual-side { min-height: 250px !important; } } @media (max-width: 768px) { #section-direct-brand .title-left { font-size: 1.75rem; } #section-direct-brand .tagline-left { font-size: 1rem; } } /* selesai: home-section */ /* mulai: feature-section */ #section-direct-feature { text-align: left; padding: 20px 0; margin-top: 100px; } #section-direct-feature .title-feature { font-size: 2.2; color: #1b1f23; font-weight: 500; line-height: 1.1; margin-bottom: 1rem; } #section-direct-feature .tagline-feature { font-size: 1.25rem; color: #4a5568; line-height: 1.6; } @keyframes psFadeUpFeature { from { opacity: 0; transform: translateY(100px); } to { opacity: 1; transform: translateY(0); } } #ps-section-feature { display: flex !important; justify-content: center !important; padding: 30px 0 !important; background: transparent !important; width: 100% !important; box-sizing: border-box !important; } #ps-section-feature .ps-container-feature { width: 90vw !important; max-width: 1300px !important; display: flex !important; align-items: center !important; background: transparent !important; border-radius: 30px !important; overflow: hidden !important; } /* DESKTOP DEFAULT: VISUAL DI KANAN (Delay muncul) */ #ps-section-feature .ps-visual-side-feature { width: 50% !important; display: flex !important; justify-content: center !important; align-items: center !important; padding: 20px 50px !important; min-height: 350px !important; background: linear-gradient(135deg, #F3E5F5 0%, #E1BEE7 100%) !important; border-radius: 30px !important; opacity: 0; animation: psFadeUpFeature 1s cubic-bezier(0.16, 1, 0.3, 1) 0.2s forwards !important; } /* DESKTOP DEFAULT: TEKS DI KIRI (Muncul duluan) */ #ps-section-feature .ps-text-side-feature { width: 50% !important; padding: 20px 60px !important; display: flex !important; flex-direction: column !important; justify-content: center !important; background: transparent !important; opacity: 0; animation: psFadeUpFeature 1s cubic-bezier(0.16, 1, 0.3, 1) forwards !important; } #ps-section-feature .ps-headline-feature { font-family: 'Segoe UI', Roboto, sans-serif !important; font-size: clamp(1.8rem, 3.5vw, 2.8rem) !important; line-height: 1.1 !important; font-weight: 800 !important; margin-top: 80px !important; margin-bottom: 40px !important; color: #1a1a1a !important; } #ps-section-feature .ps-description-feature { font-family: 'Segoe UI', Roboto, sans-serif !important; font-size: 1rem !important; line-height: 1.5 !important; margin-bottom: 0 !important; color: #333333 !important; } [data-theme-style="dark"] #section-direct-feature .title-feature, body[data-theme-style="dark"] #ps-section-feature .ps-headline-feature { color: #ffffff !important; } [data-theme-style="dark"] #section-direct-feature .tagline-feature, body[data-theme-style="dark"] #ps-section-feature .ps-description-feature { color: #cbd5e0 !important; } /* --- BAGIAN MOBILE (LOGIKA DIBALIK) --- */ @media (max-width: 1024px) { #ps-section-feature .ps-container-feature { flex-direction: column !important; } /* 1. VISUAL SIDE: Dipaksa urutan pertama & muncul duluan */ #ps-section-feature .ps-visual-side-feature { width: 100% !important; padding: 30px 20px !important; min-height: 250px !important; /* MAGIC ORDER: -1 membuat elemen ini naik ke paling atas */ order: -1 !important; /* Reset delay jadi 0s agar muncul langsung (pertama) */ animation-delay: 0s !important; } /* 2. TEXT SIDE: Dipaksa urutan kedua & muncul belakangan */ #ps-section-feature .ps-text-side-feature { width: 100% !important; padding: 30px 20px !important; /* Order normal (0), jadi dia di bawah visual (-1) */ order: 0 !important; /* Tambah delay agar muncul setelah gambar */ animation-delay: 0.2s !important; } } @media (max-width: 768px) { #section-direct-feature .title-feature { font-size: 1.75rem; } #section-direct-feature .tagline-feature { font-size: 1rem; } } /* selesai: feature-section */ C