/* =================== PENGATURAN DASAR =================== */ html { /* Mengaktifkan 'smooth scroll' untuk semua link '#' */ scroll-behavior: smooth; /* Memperhalus scroll di perangkat iOS */ -webkit-overflow-scrolling: touch; } /* Pengaturan default */ body { font-family: 'Poppins', sans-serif; /* Font utama */ min-height: 100vh; /* Minimal setinggi layar */ /* Animasi transisi saat ganti tema (dark/light) */ transition: background 0.5s ease-in-out, color 0.5s ease-in-out; background: #18181b; } /* =================== PENGATURAN TEMA =================== */ /* Tema Gelap (Default) */ body.dark { color: white; /* Warna teks utama */ /* Background gradien radial: Mulai dari warna hijau (#16a34a) di posisi 50% X (tengah) dan -30% Y (di atas layar), lalu memudar ke hitam (#000000) pada 45% ukuran lingkaran. */ background: radial-gradient(circle at 50% -30%, #16a34a 0%, #000000 45%); } /* Tema Terang */ body.light { color: #18181b; /* Warna teks utama (hitam) */ /* Gabungan 3 gradien radial untuk efek 'blob' warna-warni di atas background putih solid (#ffffff). */ background: radial-gradient(circle at 50% -25%,#87e54b 0%, transparent 35%), radial-gradient(circle at -70% 40%,#87e54b 0%, transparent 40%), radial-gradient(circle at 130% 100%,#87e54b 0%, transparent 30%), #ffffff; } /* =================== ANIMASI =================== */ /* Keyframes untuk animasi 'fadeIn' */ @keyframes fadeIn { from { opacity: 0; transform: translateY(20px); /* Mulai dari sedikit di bawah & transparan */ } to { opacity: 1; transform: translateY(0); /* Selesai di posisi normal & terlihat */ } } /* Kelas utility untuk menerapkan animasi */ .animate-fadeIn { animation: fadeIn 0.8s ease-out; } /* ======================================================= */ /* --- STYLING CAROUSEL (EFEK SLIDE TENGAH BESAR) --- */ /* ======================================================= */ /* Target: .features-carousel (Carousel Fitur) Efek: Slide di samping mengecil dan memudar. */ .features-carousel .swiper-slide { transition: transform 0.6s ease, opacity 0.5s ease; transform: scale(0.75) !important; /* Perkecil slide samping jadi 75% */ opacity: 0.35; /* Pudar slide samping */ } .features-carousel .swiper-slide-active { transform: scale(1) !important; /* Slide tengah (aktif) ukuran normal 100% */ opacity: 1; /* Slide tengah terlihat penuh */ } /* Target: Gambar di DALAM slide carousel fitur Kunci: Memaksa semua gambar punya rasio aspek (perbandingan lebar:tinggi) yang sama. */ .features-carousel .swiper-slide img { display: block; width: 100%; height: 100%; /* Paksa rasio 9:19 (potret, seperti HP). Ini mencegah layout 'lompat-lompat' jika gambar punya ukuran beda. */ aspect-ratio: 9 / 19; /* 'cover' akan mengisi frame 9:19. Jika gambar aslinya beda rasio, gambar akan 'dicrop' agar pas. */ object-fit: cover; } /* Target: .mockup-carousel (Carousel Komunitas/CTA) Efek: Sama seperti di atas, slide samping mengecil dan memudar. */ .mockup-carousel .swiper-slide { transition: transform 0.6s ease, opacity 0.5s ease; transform: scale(0.75) !important; opacity: 0.35; } .mockup-carousel .swiper-slide-active { transform: scale(1) !important; opacity: 1; } /* Target: Gambar di DALAM slide carousel mockup Kunci: Memaksa semua gambar punya rasio aspek yang sama. */ .mockup-carousel .swiper-slide img { display: block; width: 100%; height: 100%; /* Paksa rasio 16:9 (landscape). */ aspect-ratio: 16 / 9; object-fit: cover; /* Paksa gambar mengisi frame 16:9 */ } /* --- Styling Paginasi (Titik-titik) --- */ .swiper-pagination { position: static !important; /* Posisikan di bawah carousel, bukan menimpa */ margin-top: 20px !important; /* Beri jarak dari carousel */ } /* Warna titik non-aktif */ .swiper-pagination-bullet { background: #e3ffec !important; /* Warna hijau muda */ opacity: 1 !important; } /* Warna titik aktif */ .swiper-pagination-bullet-active { background: #18cd12 !important; /* Warna hijau terang */ } /* --- Styling Navigasi Kustom (Area Klik Tak Terlihat) --- */ .swiper-button-prev-custom, .swiper-button-next-custom { position: absolute; top: 0; /* Penuhi tinggi carousel */ height: 100%; /* Ini adalah 'hotspot' atau area klik. Lebar 35% di sisi kiri dan kanan carousel. */ width: 35%; z-index: 10; /* Pastikan di atas gambar slide */ cursor: pointer; /* Tunjukkan bahwa ini bisa diklik */ } .swiper-button-prev-custom { left: -25px; /* Posisikan di kiri */ } .swiper-button-next-custom { right: -25px; /* Posisikan di kanan */ }