/* public/style.css - Versi Final yang Diperbaiki dan Diintegrasikan */ /* --- RESET DASAR (Penting untuk Konsistensi Browser) --- */ /* Menghilangkan margin dan padding default browser */ * { box-sizing: border-box; /* Membuat padding dan border tidak menambah ukuran elemen */ } body { margin: 0; /* Pastikan Anda import font Roboto dari Google Fonts di HTML */ /* Contoh di HTML: */ font-family: 'Roboto', sans-serif; line-height: 1.6; /* Jarak antar baris teks yang lebih baik untuk keterbacaan */ color: #333; background-color: #f8f9fa; /* Warna latar belakang halaman */ } /* --- UTILITIES & BASE CLASSES --- */ .container { width: 90%; /* Lebar kontainer */ max-width: 1200px; /* Batasi lebar maksimal */ margin: 0 auto; /* Pusatkan kontainer secara horizontal */ padding: 20px 0; /* Padding vertikal untuk konten di dalam kontainer */ /* text-align: right; <--- DIHAPUS: Ini tidak lagi diperlukan dan bisa menyebabkan masalah */ } /* --- HEADER --- */ header { background-color: #000000; /* Latar belakang hitam solid (disesuaikan dengan gaya yang umum) */ padding: 15px 0; /* Padding vertikal header */ box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* Bayangan halus */ position: sticky; /* Agar header tetap di atas saat scroll */ top: 0; z-index: 1000; /* Pastikan header selalu di depan elemen lain */ } .header-container { width: 90%; max-width: 1200px; /* Gunakan max-width yang konsisten dengan .container */ margin: 0 auto; display: flex; /* Menggunakan flexbox untuk tata letak logo dan nav */ justify-content: space-between; /* Membuat logo dan nav terpisah ke kiri dan kanan */ align-items: center; /* Menyusun secara vertikal di tengah */ } .site-logo { /* Menggantikan .site-title dan .site-logo */ font-size: 1.8em; /* Ukuran font untuk logo teks */ font-weight: 700; /* Ketebalan font */ color: #ffffff; /* Warna putih untuk logo agar kontras dengan header hitam */ text-decoration: none; /* Menghilangkan garis bawah tautan */ text-transform: uppercase; /* Membuat teks jadi huruf besar */ letter-spacing: 1px; /* Jarak antar huruf */ } /* Jika Anda menggunakan gambar logo */ .site-logo img { height: 40px; /* Atur tinggi logo gambar */ width: auto; vertical-align: middle; } .main-nav ul { list-style: none; /* Menghilangkan bullet poin */ margin: 0; padding: 0; display: flex; /* Membuat item navigasi bersebelahan */ } .main-nav ul li { margin-left: 30px; /* Jarak antar item navigasi */ } .main-nav ul li a { text-decoration: none; color: #ffffff; /* Warna teks navigasi putih */ font-weight: 500; padding: 5px 0; transition: color 0.3s ease, border-bottom 0.3s ease; /* Efek transisi saat hover */ } .main-nav ul li a:hover, .main-nav ul li a.active { color: #007bff; /* Warna biru saat hover atau aktif */ border-bottom: 2px solid #007bff; /* Garis bawah saat hover/aktif */ } /* --- Burger Menu (Sembunyikan di Desktop) --- */ .menu-toggle { display: none; /* Sembunyikan tombol burger menu di desktop secara default */ background: none; border: none; cursor: pointer; padding: 10px; position: relative; z-index: 1001; } .hamburger { display: block; width: 25px; height: 3px; background-color: #ffffff; /* Warna burger menu putih */ border-radius: 2px; position: relative; transition: background-color 0.3s ease; } .hamburger::before, .hamburger::after { content: ''; display: block; width: 25px; /* Sesuaikan dengan lebar .hamburger */ height: 3px; background-color: #ffffff; /* Warna burger menu putih */ border-radius: 2px; position: absolute; transition: transform 0.3s ease; } .hamburger::before { transform: translateY(-8px); } .hamburger::after { transform: translateY(8px); } /* --- HERO SECTION --- */ .hero-section { /* Menambahkan overlay biru transparan di atas gambar background */ /* Nilai RGBA: (Merah, Hijau, Biru, Transparansi). 0.5 berarti 50% transparan */ background: linear-gradient(rgba(100, 50, 150, 0.3), rgba(100, 50, 150, 0.3)), /* Overlay biru transparan */ url('https://png.pngtree.com/background/20250109/original/pngtree-coral-reef-saltwater-aquarium-picture-image_15538660.jpg') no-repeat center center/cover; color: white; /* Warna teks untuk kontras dengan gambar latar belakang */ padding: 120px 0; /* Padding lebih besar untuk visual hero */ text-align: center; /* Teks di tengah hero section */ text-shadow: 1px 1px 3px rgba(0,0,0,0.6); /* Bayangan teks agar lebih terbaca */ display: flex; /* Untuk memusatkan konten secara vertikal */ align-items: center; justify-content: center; min-height: 400px; /* Tinggi minimum untuk hero section */ } .hero-section .container { padding: 0 20px; /* Atur padding horizontal agar konten tidak terlalu menempel tepi */ } .hero-section h2 { font-size: 3em; /* Ukuran font lebih besar untuk judul hero */ margin-bottom: 15px; color: #ffffff; /* Warna putih untuk judul */ text-transform: uppercase; /* Properti display:flex, align-items, justify-content dihapus karena tidak cocok untuk teks h2 */ } .hero-section p { font-size: 1.2em; max-width: 800px; /* Batasi lebar paragraf agar tidak terlalu panjang */ margin: 0 auto 10px auto; /* Pusatkan paragraf */ color: #ffffff; /* Warna putih untuk paragraf */ /* Properti display:flex, align-items, justify-content dihapus karena tidak cocok untuk teks p */ } /* --- FEATURES SECTION --- */ .features-section { padding: 60px 0; /* Jarak atas/bawah section */ background: #ffffff; } .features-section .container { display: flex; /* Menggunakan flexbox untuk item fitur */ justify-content: center; /* Pusatkan item */ flex-wrap: wrap; /* Agar item bisa pindah baris jika tidak muat */ gap: 30px; /* Jarak antar fitur */ } .feature-item { /* flex-basis: calc(25% - 25px); */ /* Untuk 4 kolom dengan gap */ flex-basis: calc(33.333% - 20px); /* Untuk 3 kolom (karena HTML Anda baru ada 4 item, 3 lebih pas) */ min-width: 250px; /* Lebar minimum agar tidak terlalu kecil */ padding: 30px; border: 1px solid #eee; border-radius: 10px; text-align: center; color: #333; box-shadow: 0 4px 8px rgba(0,0,0,0.08); /* Bayangan lebih halus */ background-color: #fff; transition: transform 0.3s ease, box-shadow 0.3s ease; } .feature-item:hover { transform: translateY(-5px); /* Efek angkat saat hover */ box-shadow: 0 6px 12px rgba(0,0,0,0.15); } .feature-item h3 { font-size: 1.6em; /* Ukuran font judul fitur */ color: #007bff; margin-bottom: 15px; } /* --- CONTENT BLOCKS (Gambar & Teks Kiri/Kanan) --- */ /* Ini adalah bagian CSS yang HILANG di file Anda sebelumnya */ .content-block { padding: 80px 0; /* Jarak atas/bawah section */ background-color: #f0f8ff; /* Warna latar belakang ringan */ } .content-block:nth-child(even) { /* Untuk blok genap, ganti warna latar belakang (opsional) */ background-color: #ffffff; } .content-block h3 { font-size: 2.2em; color: #007bff; margin-bottom: 20px; } .content-block p { font-size: 1.1em; line-height: 1.8; margin-bottom: 20px; } .btn-secondary { /* Gaya untuk tombol "Pelajari Lebih Lanjut" */ display: inline-block; background-color: #6c757d; /* Warna abu-abu */ color: white; padding: 10px 25px; text-decoration: none; border-radius: 5px; transition: background-color 0.3s ease; } .btn-secondary:hover { background-color: #5a6268; } .content-row { display: flex; /* Mengaktifkan Flexbox */ align-items: center; /* Menyusun elemen vertikal di tengah */ gap: 40px; /* Jarak antara kolom gambar dan teks */ } .content-column { flex: 1; /* Membuat kedua kolom mengambil ruang yang sama */ padding: 20px; /* Jarak di dalam kolom (internal padding) */ } .image-column img { max-width: 100%; /* Gambar akan responsif dan tidak keluar dari kolomnya */ height: auto; display: block; /* Menghilangkan spasi ekstra di bawah gambar */ border-radius: 8px; /* Sudut membulat pada gambar */ box-shadow: 0 4px 10px rgba(0,0,0,0.15); /* Bayangan lebih jelas */ } /* --- Pengaturan Posisi (Gambar Kiri vs Gambar Kanan) --- */ .content-block.image-left .content-row { flex-direction: row; /* Gambar duluan, lalu teks */ } .content-block.image-right .content-row { flex-direction: row-reverse; /* Membalik urutan: teks duluan, lalu gambar */ } /* --- CALL TO ACTION SECTION --- */ .call-to-action-section { background: #007bff; color: white; padding: 70px 0; text-align: center; } .call-to-action-section p { font-size: 1.5em; margin-bottom: 30px; } .btn-primary { display: inline-block; background: #ffc107; /* Warna kuning kontras */ color: #333; padding: 15px 30px; text-decoration: none; border-radius: 30px; /* Tombol lebih bulat */ font-weight: bold; font-size: 1.1em; transition: background-color 0.3s ease, transform 0.3s ease; } .btn-primary:hover { background-color: #e0a800; /* Warna kuning lebih gelap saat hover */ transform: translateY(-2px); } /* --- FOOTER --- */ footer { background: #222; color: #bbb; text-align: center; padding: 25px 0; font-size: 0.85em; } .contact-grid { display: grid; grid-template-columns: 1fr; /* Default untuk mobile */ gap: 40px; margin-top: 50px; margin-bottom: 50px; align-items: start; } @media (min-width: 768px) { .contact-grid { grid-template-columns: 1fr 2fr; /* 2 kolom untuk desktop */ } } .contact-info { background-color: #f8f9fa; padding: 30px; border-radius: 8px; box-shadow: 0 4px 15px rgba(0,0,0,0.05); } .contact-info h3 { color: #007bff; margin-bottom: 20px; font-size: 1.8em; } .contact-info p { margin-bottom: 10px; line-height: 1.6; color: #333; } .contact-info a { color: #007bff; text-decoration: none; } .contact-info a:hover { text-decoration: underline; } .contact-form-container { background-color: #fff; padding: 30px; border-radius: 8px; box-shadow: 0 4px 15px rgba(0,0,0,0.05); } .contact-form-container h3 { color: #007bff; margin-bottom: 20px; font-size: 1.8em; } .contact-form .form-group { margin-bottom: 20px; } .contact-form label { display: block; margin-bottom: 8px; font-weight: bold; color: #555; } .contact-form input[type="text"], .contact-form input[type="email"], .contact-form textarea { width: calc(100% - 20px); /* Kurangi padding */ padding: 12px 10px; border: 1px solid #ddd; border-radius: 5px; font-size: 1em; box-sizing: border-box; /* Pastikan padding tidak menambah lebar */ } .contact-form textarea { resize: vertical; /* Memungkinkan pengguna mengubah ukuran tinggi textarea */ } .contact-form input:focus, .contact-form textarea:focus { border-color: #007bff; outline: none; box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.25); } .map-section { margin-top: 50px; margin-bottom: 50px; } .map-section iframe { border-radius: 8px; box-shadow: 0 4px 15px rgba(0,0,0,0.1); } /* --- RESPONSIVITAS (Mobile) --- */ @media (max-width: 768px) { .container { width: 95%; /* Lebar lebih besar di mobile */ padding: 10px 0; /* Kurangi padding vertikal di mobile */ } /* Header Mobile */ header .header-container { flex-direction: row; /* Tetap row, tapi hamburger muncul */ justify-content: space-between; } .main-nav { /* display: none; */ /* Ini akan dikontrol oleh JavaScript nanti */ flex-direction: column; /* Membuat menu vertikal di mobile */ width: 100%; position: absolute; top: 60px; /* Di bawah header */ left: 0; background-color: #fff; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); padding-bottom: 10px; /* Untuk menguji, Anda bisa setting display:flex di sini, tapi di produksi akan pakai JS */ display: none; /* Sembunyikan default, JavaScript akan menampilkannya */ } .main-nav ul { flex-direction: column; text-align: center; } .main-nav ul li { margin: 10px 0; } .menu-toggle { display: block; /* Tampilkan tombol burger menu di mobile */ } /* Hero Section Mobile */ .hero-section { padding: 80px 0; min-height: 300px; } .hero-section h2 { font-size: 2em; } .hero-section p { font-size: 1em; } /* Features Section Mobile */ .features-section .container { flex-direction: column; /* Tumpuk item fitur di mobile */ gap: 20px; } .feature-item { flex-basis: 90%; /* Mengambil hampir seluruh lebar di mobile */ min-width: unset; /* Hapus min-width */ } /* Content Blocks (Gambar & Teks) Mobile */ .content-row { flex-direction: column; /* Membuat kolom menumpuk vertikal di layar kecil */ text-align: center; /* Pusatkan teks */ gap: 20px; /* Kurangi jarak antar kolom */ } .content-block.image-right .content-row { flex-direction: column; /* Juga tumpuk di layar kecil (jangan reverse) */ } /* Mengatur urutan gambar/teks agar gambar selalu di atas teks di mobile */ .content-block.image-left .content-column.image-column, .content-block.image-right .content-column.image-column { order: -1; /* Gambar akan muncul duluan di tumpukan */ } .content-block.image-left .content-column.text-column, .content-block.image-right .content-column.text-column { order: 1; /* Teks akan muncul setelah gambar di tumpukan */ } .gambar-tengah { display: block; /* Mengubah gambar menjadi elemen blok */ margin-left: auto; /* Memusatkan secara horizontal */ margin-right: auto; /* Memusatkan secara horizontal */ /* Atau singkatnya: margin: 0 auto; jika tidak ada margin vertikal yang diinginkan */ /* Contoh ukuran gambar (sesuaikan dengan kebutuhan) */ width: 50%; /* Misalnya, 50% dari lebar kontainer */ max-width: 600px; /* Atau batasan lebar maksimum dalam piksel */ height: auto; /* Penting untuk menjaga rasio aspek gambar */ } }