* { /* Tanda bintang (*) adalah pemilih universal, menargetkan semua elemen di halaman. */ margin: 0; /* Menghapus margin default dari semua elemen. */ padding: 0; /* Menghapus padding default dari semua elemen. */ box-sizing: border-box; /* Mengubah cara perhitungan lebar dan tinggi elemen, sehingga padding dan border termasuk dalam total ukuran. */ outline: none; /* Menghapus outline (garis luar) yang muncul saat elemen difokuskan (misalnya, input form). */ border: none; /* Menghapus border default dari semua elemen. */ text-decoration: none; /* Menghapus dekorasi teks seperti garis bawah dari link. */ } html{ /* Menargetkan elemen , elemen root dari dokumen. */ height: 100%; /* Mengatur tinggi html agar mengisi 100% dari tinggi viewport (jendela browser). */ } body { /* Menargetkan elemen , yang berisi semua konten halaman. */ font-family: Arial, sans-serif; /* Mengatur font default untuk teks di seluruh halaman. */ margin-top: 120px; /* Memberi jarak 120 piksel di bagian atas body, agar konten tidak tertutup oleh header yang fixed. */ background-color: #F5E6C4; /* Mengatur warna latar belakang halaman. */ color: #333; /* Mengatur warna teks default untuk seluruh halaman. */ } a { /* Menargetkan semua elemen anchor (link). */ color: #fff; /* Mengatur warna teks default untuk link menjadi putih. */ } a span { /* Menargetkan elemen yang berada di dalam elemen . */ animation: gantiWarna 3s infinite; /* Menerapkan animasi bernama 'gantiWarna' selama 3 detik dan mengulanginya tanpa henti (infinite). */ } @keyframes gantiWarna { /* Mendefinisikan sebuah animasi bernama 'gantiWarna'. */ 0% { /* Pada awal animasi (0%). */ color: red; /* Warna teks adalah merah. */ } 25% { /* Pada 25% durasi animasi. */ color: orange; /* Warna teks adalah oranye. */ } 50% { /* Pada 50% durasi animasi (tengah). */ color: green; /* Warna teks adalah hijau. */ } 75% { /* Pada 75% durasi animasi. */ color: blue; /* Warna teks adalah biru. */ } 100% { /* Pada akhir animasi (100%). */ color: violet; /* Warna teks adalah ungu. */ } } .navbar-logo { /* Menargetkan elemen dengan kelas 'navbar-logo'. */ font-family: 'Beau Rivage', cursive; /* Mengatur font kustom yang artistik (cursive) untuk logo. */ font-weight: 600; /* Mengatur ketebalan font menjadi semi-bold. */ font-size: 40px; /* Mengatur ukuran font. */ } .navbar-logo span { /* Menargetkan elemen di dalam 'navbar-logo'. */ font-family: 'Poppins', sans-serif; /* Mengganti font untuk bagian span dari logo. */ font-weight: 600; /* Mengatur ketebalan font menjadi semi-bold. */ font-size: 45px; /* Mengatur ukuran font yang sedikit lebih besar. */ } header { /* Menargetkan elemen

. */ justify-content: space-between; /* Mendistribusikan item di dalam header dengan jarak yang sama di antara mereka (untuk flexbox). */ display: flex; /* Mengaktifkan layout flexbox untuk menata item di dalamnya secara horizontal. */ align-items: center; /* Menyelaraskan item di dalam header secara vertikal di tengah. */ padding: 1px 5%; /* Memberi padding atas/bawah 1px dan padding kiri/kanan 5% dari lebar parent. */ background-color: #D43D3D; /* Mengatur warna latar belakang header. */ border-bottom: 2px solid #6B8E23; /* Menambahkan garis bawah (border) solid setebal 2px. */ color: #6B8E23; /* Mengatur warna teks default untuk elemen di dalam header. */ position: fixed; /* Membuat posisi header tetap di layar, bahkan saat halaman di-scroll. */ top: 0; /* Memposisikan header di bagian paling atas viewport. */ left: 0; /* Memposisikan header di sisi paling kiri viewport. */ right: 0; /* Memposisikan header di sisi paling kanan viewport (membuatnya membentang penuh). */ z-index: 9999; /* Memastikan header selalu tampil di atas elemen lain. */ } .navbar a { /* Menargetkan link (elemen ) di dalam elemen dengan kelas 'navbar'. */ color: white; /* Mengatur warna teks link menjadi putih. */ text-decoration: none; /* Menghapus garis bawah default pada link. */ padding: 0.5rem 1rem; /* Memberi padding di sekitar teks link (atas/bawah 0.5rem, kiri/kanan 1rem). */ font-size: 1.1rem; /* Mengatur ukuran font. */ display: inline-block; /* Membuat link berperilaku seperti block (bisa diatur padding/margin) tetapi tetap sejajar dengan teks lain. */ position: relative; /* Menetapkan konteks posisi untuk pseudo-elemen '::after'. */ } .navbar a:hover { /* Menargetkan link navbar saat kursor mouse berada di atasnya. */ color: #F5E6C4; /* Mengubah warna teks link saat di-hover. */ } .navbar a::after { /* Membuat pseudo-elemen (elemen semu) setelah konten dari link navbar. Digunakan untuk efek garis bawah. */ content: ''; /* Wajib ada agar pseudo-elemen dapat ditampilkan. */ position: absolute; /* Memposisikan elemen ini relatif terhadap parent-nya (link navbar). */ width: 100%; /* Mengatur lebar garis bawah sama dengan lebar link. */ transform: scaleX(0); /* Mengatur skala horizontal menjadi 0, sehingga garis bawah awalnya tidak terlihat. */ height: 2px; /* Mengatur ketebalan garis bawah. */ bottom: 0; /* Memposisikan garis bawah di bagian bawah link. */ left: 0; /* Memposisikan garis bawah di sisi kiri link. */ background-color: #F5E6C4; /* Mengatur warna garis bawah. */ transform-origin: bottom right; /* Menetapkan titik awal transformasi di sudut kanan bawah. */ transition: transform 0.25s ease-out; /* Menambahkan transisi halus saat properti transform berubah. */ } .navbar a:hover::after { /* Menargetkan pseudo-elemen '::after' saat link navbar di-hover. */ transform: scaleX(1); /* Mengubah skala horizontal menjadi 1, membuat garis bawah muncul. */ transform-origin: bottom left; /* Mengubah titik awal transformasi ke kiri bawah, menciptakan efek garis yang "menggeser" dari kiri ke kanan. */ } .navbar-logo img { /* Menargetkan gambar di dalam 'navbar-logo'. */ max-width: 90px; /* Mengatur lebar maksimum gambar agar tidak terlalu besar. */ height: auto; /* Mengatur tinggi secara otomatis untuk menjaga rasio aspek gambar. */ /* display: block; */ /* Baris ini dinonaktifkan (dikomentari). Jika aktif, akan menghapus spasi ekstra di bawah gambar. */ margin: 0 auto; /* Memberi margin atas/bawah 0 dan margin kiri/kanan otomatis untuk menengahkan gambar secara horizontal. */ } header h1 { /* Menargetkan elemen

di dalam
. / margin: 0; / Menghapus margin default dari h1. / } .search-container { / Menargetkan kontainer untuk kotak pencarian. / display: flex; / Mengaktifkan layout flexbox untuk input dan tombol. / gap: 10px; / Memberi jarak 10px antara input dan tombol. / max-width: 700px; / Membatasi lebar maksimum kontainer. / margin: 40px auto; / Memberi margin atas/bawah 40px dan menengahkan kontainer secara horizontal. / padding: 0 15px; / Memberi padding kiri dan kanan sebesar 15px. / } .search-container input[type="text"] { / Menargetkan input teks di dalam 'search-container'. / flex-grow: 1; / Membuat input field tumbuh untuk mengisi ruang yang tersedia. / min-width: 0; / Mencegah input field meluap dari kontainernya saat menyusut. / padding: 12px 15px; / Memberi padding di dalam input field. / border: 1px solid #ccc; / Memberi border abu-abu tipis. / border-radius: 8px; / Memberi sudut yang membulat. / font-size: 1rem; / Mengatur ukuran font teks di dalam input. / } .search-container button { / Menargetkan tombol di dalam 'search-container'. / flex-shrink: 0; / Mencegah tombol menyusut jika ruang tidak cukup. / padding: 12px 20px; / Memberi padding di dalam tombol. / background-color: #4CAF50; / Mengatur warna latar belakang tombol. / color: white; / Mengatur warna teks tombol. / border: 1px solid #4CAF50; / Memberi border dengan warna yang sama dengan background. / border-radius: 8px; / Memberi sudut yang membulat. / cursor: pointer; / Mengubah kursor menjadi ikon tangan saat di atas tombol. / font-weight: bold; / Membuat teks tombol menjadi tebal. / font-size: 1rem; / Mengatur ukuran font tombol. / transition: background-color 0.2s, border-color 0.2s; / Menambahkan transisi halus saat warna berubah. / } .search-container button:hover { / Menargetkan tombol saat di-hover. / background-color: #45a049; / Mengubah warna latar belakang menjadi lebih gelap. / border-color: #45a049; / Mengubah warna border menjadi lebih gelap. / } .border { / Menargetkan elemen dengan kelas 'border'. Ini berfungsi sebagai wrapper untuk carousel. / position: relative; / Menetapkan konteks posisi untuk anak elemen yang diposisikan absolut (seperti tombol navigasi carousel). / text-align: center; / Menengahkan teks di dalamnya. / padding: 20px; / Memberi padding di semua sisi. / max-width: 800px; / Membatasi lebar maksimum. / margin: 20px auto; / Memberi margin vertikal dan menengahkan secara horizontal. / background-color: #D43D3D; / Mengatur warna latar belakang. / border-radius: 18px; / Memberi sudut yang sangat membulat. / box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); / Menambahkan bayangan halus. / } .recipe-carousel-container, / Menargetkan kontainer carousel resep. / .search-results-container { / Menargetkan kontainer hasil pencarian. / margin-bottom: 40px; / Memberi jarak bawah 40px. / } .hidden { / Kelas utilitas untuk menyembunyikan elemen. / display: none !important; / Menyembunyikan elemen. '!important' memastikan aturan ini tidak ditimpa oleh aturan lain. / } .recipe-carousel, / Menargetkan area scroll untuk carousel. / .search-results { / Menargetkan area scroll untuk hasil pencarian. / display: flex; / Mengatur item (kartu resep) berjajar secara horizontal. / overflow-x: auto; / Memungkinkan scrolling horizontal jika konten melebihi lebar kontainer. / scroll-behavior: smooth; / Membuat scrolling (yang dipicu oleh JavaScript) menjadi halus. / padding-bottom: 15px; / Memberi padding bawah agar scrollbar tidak menempel pada konten. / -ms-overflow-style: none; / Menyembunyikan scrollbar di Internet Explorer dan Edge. / scrollbar-width: none; / Menyembunyikan scrollbar di Firefox. / } .recipe-carousel::-webkit-scrollbar, / Menargetkan pseudo-elemen scrollbar di browser WebKit (Chrome, Safari). / .search-results::-webkit-scrollbar { / Menargetkan pseudo-elemen scrollbar di browser WebKit (Chrome, Safari). / display: none; / Menyembunyikan scrollbar. / } .recipe-card { / Menargetkan setiap kartu resep. / flex: 0 0 auto; / Mengatur agar kartu tidak bisa membesar (grow) atau mengecil (shrink), dan ukurannya ditentukan oleh properti width. / width: 280px; / Menetapkan lebar tetap untuk setiap kartu. / margin: 10px; / Memberi jarak di sekitar setiap kartu. / border: 1px solid #ddd; / Memberi border abu-abu tipis. / border-radius: 8px; / Memberi sudut yang membulat. / overflow: hidden; / Menyembunyikan bagian dari elemen anak (seperti gambar) yang keluar dari area kartu (misalnya karena border-radius). / box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); / Menambahkan efek bayangan. / background-color: #4CAF50; / Mengatur warna latar belakang kartu. / cursor: pointer; / Mengubah kursor menjadi ikon tangan saat di atas kartu. / transition: transform 0.2s; / Menambahkan transisi halus pada properti transform. / } .recipe-card:hover { / Menargetkan kartu resep saat di-hover. / transform: translateY(-5px); / Menggeser kartu ke atas sedikit untuk efek "terangkat". / } .recipe-card img { / Menargetkan gambar di dalam kartu resep. / width: 100%; / Membuat lebar gambar mengisi 100% lebar kartu. / height: 180px; / Menetapkan tinggi tetap untuk gambar. / object-fit: cover; / Memastikan gambar menutupi seluruh area tanpa merusak rasio aspek (bagian gambar mungkin terpotong). / display: block; / Menghapus spasi ekstra di bawah gambar. / } .recipe-card h3 { / Menargetkan judul (h3) di dalam kartu resep. / padding: 10px; / Memberi padding di dalam area judul. / margin: 0; / Menghapus margin default. / font-size: 1.2em; / Mengatur ukuran font. / text-align: center; / Menengahkan teks judul. / } .carousel-nav { / Menargetkan tombol navigasi carousel (sebelumnya dan berikutnya). / position: absolute; / Memposisikan tombol relatif terhadap kontainer '.border'. / top: 50%; / Memposisikan tepi atas tombol di 50% tinggi kontainer. / transform: translateY(-50%); / Menggeser tombol ke atas sebesar 50% dari tingginya sendiri untuk menengahkan secara vertikal. / z-index: 10; / Memastikan tombol berada di atas gambar carousel. / background: #4CAF50; / Mengatur warna latar belakang tombol. / color: white; / Mengatur warna ikon/teks di dalam tombol. / border: none; / Menghapus border default. / cursor: pointer; / Mengubah kursor menjadi ikon tangan. / transition: background-color 0.2s, transform 0.2s; / Menambahkan transisi halus. / width: 45px; / Mengatur lebar tombol. / height: 45px; / Mengatur tinggi tombol. / border-radius: 50%; / Membuat tombol menjadi lingkaran sempurna. / display: flex; / Mengaktifkan flexbox untuk menengahkan konten di dalamnya. / align-items: center; / Menengahkan konten secara vertikal. / justify-content: center; / Menengahkan konten secara horizontal. / padding: 0; / Menghapus padding default. / font-size: 24px; / Mengatur ukuran ikon panah di dalam tombol. / } .carousel-nav:hover { / Menargetkan tombol navigasi saat di-hover. / background-color: #45a049; / Mengubah warna latar belakang menjadi lebih gelap. / transform: translateY(-50%) scale(1.05); / Menjaga posisi vertikal sambil sedikit memperbesar tombol. / } .carousel-nav.prev { / Menargetkan tombol navigasi dengan kelas 'prev'. / left: 10px; / Memposisikan tombol di sisi kiri kontainer. / } .carousel-nav.next { / Menargetkan tombol navigasi dengan kelas 'next'. / right: 10px; / Memposisikan tombol di sisi kanan kontainer. / } @keyframes fadeIn { / Mendefinisikan animasi 'fadeIn'. / from { opacity: 0; transform: translateY(15px); } / Mulai dari transparan dan sedikit di bawah posisi akhir. / to { opacity: 1; transform: translateY(0); } / Berakhir dengan terlihat penuh dan di posisi normal. / } @keyframes scaleIn { / Mendefinisikan animasi 'scaleIn'. / from { transform: scale(0.95); } / Mulai dari skala yang sedikit lebih kecil. / to { transform: scale(1); } / Berakhir pada skala normal (100%). / } footer { / Menargetkan elemen
. / background-color: #333; / Mengatur warna latar belakang menjadi abu-abu gelap. / color: white; / Mengatur warna teks menjadi putih. / text-align: center; / Menengahkan teks di dalam footer. / padding: 20px 15px; / Memberi padding atas/bawah 20px dan kiri/kanan 15px. / width: 100%; / Mengatur lebar footer agar mengisi seluruh lebar parent. / box-sizing: border-box; / Memastikan padding tidak menambah total lebar footer. / } @media (min-width: 768px) { / Menerapkan aturan ini hanya jika lebar layar 768px atau lebih (untuk tablet dan desktop). / footer { / Menargetkan footer di layar yang lebih besar. / padding: 25px 50px; / Menambah padding untuk tampilan yang lebih baik. / font-size: 1rem; / Mengatur ukuran font standar. / } } .tentang { / Menargetkan elemen dengan kelas 'tentang'. / text-align: center; / Menengahkan teks di dalamnya. / } .tentang h1 { / Menargetkan
di dalam kelas 'tentang'. / background-color: #D43D3D; / Memberi warna latar belakang pada judul. / padding: 10px 20px; / Memberi padding di sekitar teks judul. / justify-content: center; / Menengahkan konten flex (jika display flex digunakan). / display: inline-block; / Membuat elemen berperilaku seperti block tapi ukurannya pas dengan kontennya. / color: white; / Mengatur warna teks menjadi putih. / border-radius: 5px; / Memberi sedikit sudut membulat. / } / @keyframes fadeIn didefinisikan lagi, fungsinya sama dengan yang di atas / @keyframes fadeIn { from { opacity: 0; } / Mulai dari transparan. / to { opacity: 1; } / Berakhir dengan terlihat penuh. / } @keyframes slideUp { / Mendefinisikan animasi 'slideUp'. / from { / Kondisi awal animasi. / opacity: 0; / Mulai dari transparan. / transform: translateY(20px); / Mulai dari posisi 20px di bawah posisi akhir. / } to { / Kondisi akhir animasi. / opacity: 1; / Berakhir dengan terlihat penuh. / transform: translateY(0); / Berakhir di posisi normal. / } } @keyframes pulse { / Mendefinisikan animasi 'pulse' (denyut). / 0% { box-shadow: 0 0 0 0 rgba(212, 61, 61, 0.7); } / Awal: bayangan dengan ukuran 0 dan opasitas 0.7. / 70% { box-shadow: 0 0 0 10px rgba(212, 61, 61, 0); } / Tengah: bayangan membesar hingga 10px dan menjadi transparan. / 100% { box-shadow: 0 0 0 0 rgba(212, 61, 61, 0); } / Akhir: bayangan kembali ke ukuran 0. / } .about-us-container { / Menargetkan kontainer utama untuk halaman 'About Us'. / max-width: 900px; / Membatasi lebar maksimum kontainer. / margin: 60px auto; / Memberi margin atas/bawah 60px dan menengahkan secara horizontal. / padding: 40px; / Memberi padding di dalam kontainer. / text-align: center; / Menengahkan teks di dalamnya. / font-family: 'Poppins', sans-serif; / Mengatur font untuk bagian ini. / color: #333; / Mengatur warna teks. / background-color: #F5E6C4; / Mengatur warna latar belakang. / border-radius: 16px; / Memberi sudut yang membulat. / box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); / Menambahkan bayangan yang lebih kuat. / animation: fadeIn 1s ease-out; / Menerapkan animasi fadeIn saat elemen muncul. / } .about-us-container .hero-image { / Menargetkan gambar hero di dalam 'about-us-container'. / width: 150px; / Mengatur lebar gambar. / height: 150px; / Mengatur tinggi gambar. / border-radius: 50%; / Membuat gambar menjadi lingkaran. / object-fit: cover; / Memastikan gambar mengisi lingkaran tanpa distorsi. / margin-bottom: 20px; / Memberi jarak bawah. / border: 3px solid #D43D3D; / Menambahkan border berwarna merah di sekitar gambar. / box-shadow: 0 0 0 5px #fff; / Menambahkan "bayangan" putih di luar border, menciptakan efek bingkai. / animation: pulse 2s infinite; / Menerapkan animasi 'pulse' yang berulang. / transition: transform 0.3s ease; / Menambahkan transisi halus pada properti transform. / } .about-us-container .hero-image:hover { / Menargetkan gambar hero saat di-hover. / transform: scale(1.05); / Sedikit memperbesar gambar. / } .about-us-container h1 { / Menargetkan judul utama (h1) di bagian 'About Us'. / font-family: 'Bangers', cursive; / Menggunakan font kustom yang tebal dan kasual. / font-size: 3.5rem; / Mengatur ukuran font yang sangat besar. / color: #D43D3D; / Mengatur warna teks. / margin-bottom: 10px; / Memberi jarak bawah. / text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1); / Menambahkan bayangan pada teks untuk efek 3D. / animation: slideUp 0.8s ease-out; / Menerapkan animasi 'slideUp'. / } .about-us-container .tagline { / Menargetkan elemen tagline. / font-size: 1.2rem; / Mengatur ukuran font. / color: #666; / Mengatur warna teks menjadi abu-abu. / margin-bottom: 50px; / Memberi jarak bawah yang besar. / font-style: italic; / Membuat teks menjadi miring. / animation: slideUp 0.8s ease-out 0.2s; / Menerapkan animasi 'slideUp' dengan penundaan (delay) 0.2 detik. / animation-fill-mode: backwards; / Memastikan elemen menerapkan style dari keyframe awal sebelum animasi dimulai. / } .about-section-grid { / Menargetkan kontainer grid. / display: grid; / Mengaktifkan layout CSS Grid. / grid-template-columns: 1fr 1fr; / Membuat dua kolom dengan lebar yang sama (1fr = 1 bagian dari ruang yang tersedia). / gap: 30px; / Memberi jarak 30px antara item-item grid. / text-align: left; / Mengatur perataan teks di dalam item grid menjadi kiri. / margin-bottom: 40px; / Memberi jarak bawah. / } .about-section-grid .section-item { / Menargetkan setiap item di dalam grid. / background: #e0cfc2; / Mengatur warna latar belakang item. / padding: 25px; / Memberi padding di dalam item. / border-radius: 12px; / Memberi sudut yang membulat. / box-shadow: 0 4px 15px rgba(0,0,0,0.05); / Menambahkan bayangan yang sangat halus. / transition: transform 0.3s ease, box-shadow 0.3s ease; / Menambahkan transisi halus untuk transform dan bayangan. / animation: slideUp 0.8s ease-out; / Menerapkan animasi 'slideUp'. / } .about-section-grid .section-item:hover { transform: translateY(-8px); / Saat hover, elemen terangkat 8px ke atas / box-shadow: 0 8px 25px rgba(0,0,0,0.1); / Tambahkan bayangan untuk efek "melayang" / } / Animasi staggered untuk item grid / .about-section-grid .section-item:nth-child(1) { animation-delay: 0.4s; / Item pertama mulai animasi setelah 0.4 detik / animation-fill-mode: backwards; / Pastikan item tetap terlihat sebelum animasi dimulai / } .about-section-grid .section-item:nth-child(2) { animation-delay: 0.6s; / Item kedua mulai setelah 0.6 detik / animation-fill-mode: backwards; / Sama seperti item pertama / } .about-section-grid .section-item h2 { font-family: 'Poppins', sans-serif; / Gunakan font modern Poppins / color: #D43D3D; / Warna merah tema / padding-bottom: 10px; / Ruang di bawah teks sebelum garis bawah / margin-bottom: 15px; / Jarak bawah heading dengan elemen berikutnya / border-bottom: 2px solid #D43D3D; / Garis bawah heading berwarna merah / } .about-section-grid .section-item p { line-height: 1.7; / Spasi antar baris nyaman dibaca / color: #555; / Warna teks abu gelap / } .contact-section { background-color: #3e8e41; / Warna latar hijau tua / padding: 30px; / Ruang dalam semua sisi / border-radius: 10px; / Sudut membulat / color: #555; / Warna teks default (akan di-override oleh elemen dalamnya) / } .contact-section h2 { color: #D43D3D; / Warna heading merah / text-align: center; / Rata tengah / margin-bottom: 20px; / Jarak bawah dari konten setelahnya / } .social-links { text-align: center; / Semua ikon/link sosial diratakan tengah / } .social-links a { margin: 0 15px; / Jarak kanan-kiri antar ikon/link / text-decoration: none; / Hilangkan garis bawah / font-weight: bold; / Teks tebal / font-size: 1.2rem; / Ukuran font agak besar / color: #D43D3D; / Warna teks/link merah / } .social-links a:hover { transform: scale(1.2); / Perbesar ikon/link saat hover / color: #F5E6C4; / Warna berubah menjadi krem / / NOTE: Ada typo di akhir baris: "/" yang harusnya dihapus / } / Penyesuaian untuk layar kecil / @media (max-width: 768px) { .about-us-container { padding: 20px; / Kurangi padding / margin: 30px auto; / Margin vertikal 30px dan tengah horizontal / } .about-section-grid { grid-template-columns: 1fr; / Ubah grid jadi satu kolom saja / gap: 20px; / Jarak antar item 20px / } .about-us-container h1 { font-size: 2.5rem; / Ukuran heading disesuaikan untuk mobile / } } / Responsive Navbar / #menu { display: none; / Sembunyikan ikon menu (hamburger) di layar besar / color: white; / Warna ikon menu jika ditampilkan / } .navbar { display: flex; / Gunakan Flexbox / align-items: center; / Rata tengah vertikal untuk semua isi navbar / } / Media query for smaller screens / @media (max-width: 768px) { / GANTI ATURAN .navbar DAN #menu LAMA ANDA DENGAN INI / / Mengatur posisi dan menyembunyikan menu di luar layar / .navbar { position: fixed; / Posisi tetap di layar, tidak ikut scroll / top: 0; right: -100%; / KUNCI: Sembunyi di luar kanan layar secara default / width: 250px; height: 100vh; / Tinggi menu sepenuh layar / background-color: #D43D3D; padding-top: 5rem; / Memberi jarak dari atas layar / display: flex; flex-direction: column; / Menu ditumpuk ke bawah / align-items: flex-start; z-index: 9998; / Posisinya di bawah header tapi di atas konten lain / box-shadow: -5px 0 10px rgba(0, 0, 0, 0.2); transition: right 0.4s ease-in-out; / Animasi geser yang halus / } / Aturan ini akan aktif jika JavaScript menambahkan class 'active' / .navbar.active { right: 0; / KUNCI: Menu akan muncul dari kanan / } / Mengatur link di dalam menu / .navbar a { width: 100%; padding: 1rem 1.5rem; color: white; font-size: 1.1rem; border-bottom: 1px solid rgba(255, 255, 255, 0.1); } / Mengatur agar ikon hamburger selalu terlihat / #menu { display: inline-block; / Pastikan ikon selalu tampil / cursor: pointer; font-size: 2rem; / Ukuran ikon hamburger / color: white; z-index: 9999; / Pastikan ikon selalu berada di lapisan paling atas agar bisa di-klik / } } / Ensure other elements are responsive too / @media (max-width: 768px) { .search-container { padding: 0 7%; / Add padding to align with header / flex-wrap: wrap; / Allow items to wrap on smaller screens / gap: 10px; / Space between input and button / } .search-container input[type="text"] { flex-grow: 1; / Allow input to grow / max-width: unset; / Remove max-width on smaller screens / } } .advertisement-header { top: -10px; / (Tidak berpengaruh karena tidak ada 'position') → Harusnya diberi position: relative/fixed/absolute agar berlaku / margin: 0; / Hilangkan margin luar / padding: 0; / Hilangkan padding dalam / background-color: #f8f8f8; / Warna latar abu terang / text-align: center; / Pusatkan semua teks/isi secara horizontal / position: relative; } .advertisement-header img { display: block; / Hindari spasi di bawah gambar (inline default) / width: 100%; / Gambar memenuhi lebar parent / height: 350px; / Tinggi tetap 350px / } .scroll-container-wrapper { position: relative; / Agar tombol navigasi bisa diposisikan secara absolut relatif ke kontainer ini / width: 100%; / Lebar penuh / overflow: hidden; / Sembunyikan bagian konten yang keluar dari kontainer / } .scroll-container { display: flex; / Gunakan flexbox untuk susunan horizontal / overflow-x: auto; / Aktifkan scroll horizontal / scroll-behavior: smooth; / Scroll akan berjalan mulus (smooth scrolling) / gap: 16px; / Jarak antar item scroll 16px / padding: 20px; / Ruang dalam 20px di semua sisi / } .scroll-item { flex: 0 0 auto; / Jangan mengecil, ukuran tetap / width: 200px; / Lebar tetap 200px / height: 150px; / Tinggi tetap 150px / background-color: #f2f2f2; / Warna latar abu muda / text-align: center; / Teks di tengah horizontal / line-height: 150px; / Vertikal center: teks berada di tengah dengan tinggi baris sama tinggi item / border-radius: 10px; / Sudut membulat / box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); / Bayangan ringan / } / Tombol Kiri & Kanan / .scroll-btn { position: absolute; / Posisi mutlak terhadap parent yang relative / top: 50%; / Pusat vertikal / transform: translateY(-50%); / Koreksi agar tombol benar-benar di tengah vertikal / z-index: 10; / Letakkan di atas elemen lain / background-color: rgba(0, 0, 0, 0.5); / Warna latar transparan hitam / color: white; / Warna ikon/text putih / border: none; / Hilangkan border default tombol / font-size: 24px; / Ukuran teks besar (ikon panah biasanya) / cursor: pointer; / Ubah kursor jadi tangan saat hover / padding: 10px; / Ruang dalam tombol / border-radius: 50%; / Jadikan tombol bulat / } .scroll-btn.left { left: 10px; / Tempatkan tombol kiri 10px dari sisi kiri / } .scroll-btn.right { right: 10px; / Tempatkan tombol kanan 10px dari sisi kanan / } .carousel-nav { position: absolute; / Tombol ini diposisikan secara absolut terhadap elemen induk (yang harus relative) / top: 50%; / Tempatkan tombol tepat di tengah vertikal container / transform: translateY(-50%); / Geser ke atas 50% dari tinggi tombol agar betul-betul di tengah / font-size: 24px; / Ukuran font besar, cocok untuk ikon panah navigasi / background: #4CAF50; / Warna latar hijau (warna tema) / color: white; / Warna teks atau ikon putih agar kontras / border: none; / Hilangkan border default tombol / cursor: pointer; / Saat diarahkan kursor, berubah jadi tangan (interaktif) / padding: 10px 15px; / Ruang dalam: atas-bawah 10px, kiri-kanan 15px / border-radius: 5px; / Sudut tombol dibulatkan 5px / z-index: 2; / Pastikan tombol ada di atas konten lainnya / transition: background-color 0.2s ease-in-out, transform 0.2s ease-in-out; / Efek transisi saat hover: perubahan warna latar dan efek gerakan halus / } / Efek saat tombol navigasi di-hover / .carousel-nav:hover { background-color: #45a049; / Warna sedikit lebih gelap saat di-hover / transform: translateY(-50%) scale(1.05); / Sedikit membesar / } / Efek saat tombol navigasi diklik (saat tombol mouse ditekan) / .carousel-nav:active { background-color: #3e8e41; / Warna lebih gelap lagi saat ditekan / transform: translateY(-50%) scale(0.95); / Sedikit mengecil / } / Rating Section / / ======================================= / / GAYA BAGIAN KOMENTAR & RATING / / ======================================= / .feedback-section { max-width: 800px; / Lebar maksimum elemen adalah 800px / margin: 40px auto; / Margin atas & bawah 40px, kanan & kiri auto (tengah horizontal) / padding: 30px 40px; / Padding atas & bawah 30px, kiri & kanan 40px / background-color: #F5E6C4; / Warna latar belakang krem / border-radius: 16px; / Sudut elemen dibuat melengkung sebesar 16px / box-shadow: 0 10px 35px rgba(0, 0, 0, 0.08); / Bayangan lembut di bawah elemen / } .feedback-title { text-align: center; / Teks berada di tengah / font-size: 2em; / Ukuran font dua kali lebih besar dari default / color: #333; / Warna teks abu gelap / margin-bottom: 25px; / Jarak bawah 25px dari elemen berikutnya / } .feedback-form .form-group { margin-bottom: 15px; / Jarak antar grup form 15px / } .feedback-form input[type="text"], .feedback-form textarea { width: 100%; / Lebar penuh dari container / padding: 12px; / Ruang di dalam input/textarea sebesar 12px / border: 1px solid #ccc; / Garis pinggir abu terang / border-radius: 8px; / Sudut membulat 8px / font-size: 1rem; / Ukuran font standar / font-family: 'Poppins', sans-serif; / Menggunakan font Poppins / transition: border-color 0.3s, box-shadow 0.3s; / Transisi halus saat fokus / } .feedback-form input[type="text"]:focus, .feedback-form textarea:focus { outline: none; / Hilangkan garis luar default browser saat fokus / border-color: #D43D3D; / Ganti warna border saat fokus jadi merah tua / box-shadow: 0 0 8px rgba(212, 61, 61, 0.2); / Tambahkan bayangan saat fokus / } .feedback-form .form-bottom { display: flex; / Gunakan flexbox untuk menyusun anak-anaknya / justify-content: space-between; / Jarak antar elemen maksimal di kanan dan kiri / align-items: center; / Pusatkan secara vertikal / gap: 20px; / Jarak antar elemen di dalam 20px / margin-top: 20px; / Jarak atas 20px dari elemen sebelumnya / } .rating-group { display: flex; / Gunakan flexbox / align-items: center; / Rata tengah secara vertikal / gap: 10px; / Jarak antar elemen dalam grup / } .rating-group label { font-weight: 500; / Ketebalan font semi-bold / color: #555; / Warna abu-abu sedang / } .rating-group select { padding: 10px; / Ruang dalam 10px / border-radius: 8px; / Sudut membulat 8px / border: 1px solid #ccc; / Garis pinggir abu terang / background-color: #f9f9f9; / Warna latar belakang abu sangat terang / cursor: pointer; / Saat diarahkan mouse, jadi pointer / } .submit-button { padding: 12px 25px; / Ruang dalam vertikal 12px, horizontal 25px / background-color: #D43D3D; / Warna latar tombol merah tua / color: white; / Teks putih / border: none; / Tidak ada garis pinggir / border-radius: 8px; / Sudut membulat / font-size: 1em; / Ukuran font standar / font-weight: bold; / Teks tebal / cursor: pointer; / Tunjukkan pointer saat diarahkan / transition: background-color 0.3s, transform 0.2s; / Efek transisi untuk hover / } .submit-button:hover { background-color: #c83131; / Saat hover, warna latar jadi lebih gelap / transform: translateY(-2px); / Efek tombol seolah "naik" sedikit / } #thank-you-message { text-align: center; padding: 15px; margin-top: 20px; background-color: #e8f5e9; / Latar hijau muda / color: #2e7d32; / Teks hijau tua / border: 1px solid #a5d6a7; border-radius: 8px; } / --- Responsif untuk form komentar --- / @media (max-width: 600px) { .feedback-form .form-bottom { flex-direction: column; align-items: stretch; } .submit-button { width: 100%; } } / --- PERBAIKAN UNTUK GALERI RESEP ACAK --- / / Wadah utama untuk seluruh bagian resep acak / .random-recipes-container { max-width: 1200px; / Batasi lebar maksimum agar rapi di layar besar / margin: 40px auto; / Memberi jarak atas/bawah dan memusatkan container / padding: 20px; / Memberi ruang di dalam container, mencegah kartu menempel di tepi / box-sizing: border-box; / Pastikan padding termasuk dalam lebar total / } / Judul "🔥 Resep Pilihan Acak" / .random-recipes-container .section-title { text-align: center; font-size: 2em; / Ukuran font yang lebih jelas / margin-bottom: 30px; / Jarak yang lebih besar ke grid di bawahnya / color: #333; / Warna teks yang mudah dibaca / } / WADAH GRID UNTUK KARTU RESEP / .grid-container { display: flex; / Ganti dari grid ke flex / flex-wrap: wrap; / Izinkan kartu turun ke baris baru jika tidak muat / justify-content: center; / Perintah ini akan selalu bekerja dengan flex / gap: 30px; / Jarak antar kartu resep / } / Anda bisa menaruh ini di paling bawah file style.css / .image-container { background-color: #D43D3D; / Memberi latar belakang abu-abu muda / padding: 10px; / Memberi jarak antara gambar dan latar belakang / border-radius: 8px; / Menyamakan sudut dengan kartu resep / margin-bottom: 10px; / Memberi jarak ke judul di bawahnya / } / Memastikan gambar di dalamnya tidak keluar dari wadah / .image-container img { border-radius: 6px; / Sudut gambar sedikit lebih kecil dari wadahnya / } / KARTU RESEP (Satu definisi yang jelas dan konsisten) / .recipe-card { background-color: #3e8e41; / Latar belakang putih agar bersih / border-radius: 12px; / Sudut yang lebih tumpul dan modern / box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); / Bayangan yang lebih halus / overflow: hidden; / Penting agar gambar tidak keluar dari sudut tumpul / cursor: pointer; text-decoration: none; color: #fff; display: flex; / Menggunakan flexbox untuk tata letak vertikal / flex-direction: column; transition: transform 0.3s ease, box-shadow 0.3s ease; / Transisi halus / } .recipe-card:hover { transform: translateY(-8px); / Efek mengangkat saat di-hover / box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15); } .recipe-card img { width: 100%; height: 200px; / Tinggi gambar yang konsisten untuk semua kartu / object-fit: cover; / Memastikan gambar tidak gepeng dan memenuhi area / } .recipe-card h3 { padding: 20px 15px; / Padding yang lebih lega untuk judul / margin: 0; font-weight: 600; font-size: 1.1em; text-align: center; flex-grow: 1; / Memastikan semua kartu punya tinggi yang sama dengan meregangkan area judul / display: flex; align-items: center; justify-content: center; } / style.css / / --- GAYA UNTUK FILTER KATEGORI --- / / Wadah untuk semua tombol filter / .category-filters { display: flex; justify-content: center; flex-wrap: wrap; / Agar tombol turun ke bawah jika tidak muat di layar kecil / gap: 12px; / Jarak antar tombol / margin-bottom: 40px; / Jarak dari filter ke grid resep / } / Gaya untuk setiap tombol kategori / .category-btn { padding: 10px 22px; border: 1px solid #ddd; border-radius: 20px; / Membuat bentuk tombol seperti pil / background-color: #fff; color: #555; cursor: pointer; font-weight: 500; font-size: 0.9em; transition: all 0.3s ease; box-shadow: 0 2px 4px rgba(0,0,0,0.05); } .category-btn:hover { background-color: #f5f5f5; border-color: #ccc; transform: translateY(-2px); / Sedikit terangkat saat disentuh pointer / } / Gaya untuk tombol kategori yang sedang aktif/dipilih / .category-btn.active { background-color: #D43D3D; / Menggunakan warna tema dari header Anda / color: #fff; border-color: #D43D3D; box-shadow: 0 4px 8px rgba(212, 61, 61, 0.2); } / --- GAYA UNTUK TOMBOL SELENGKAPNYA --- / .load-more-container { text-align: center; / Memusatkan tombol / margin-top: 30px; / Jarak dari grid resep di atasnya / } #load-more-btn { padding: 12px 30px; font-size: 1.1em; font-weight: bold; color: #fff; background-color: #4CAF50; / Warna hijau yang menarik perhatian / border: none; border-radius: 8px; cursor: pointer; transition: background-color 0.3s ease, transform 0.2s ease; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15); } #load-more-btn:hover { background-color: #45a049; / Warna lebih gelap saat disentuh pointer / transform: translateY(-3px); } / === GAYA BARU UNTUK FILTER NEGARA DENGAN DROPDOWN CUSTOM === / / Wadah utama untuk semua tombol filter / .button-container { display: flex; / Gunakan flexbox untuk menyusun tombol / flex-wrap: wrap; / Biarkan tombol pindah ke baris baru jika penuh / justify-content: center; / Posisikan tombol ke tengah horizontal / align-items: center; / Rata tengah secara vertikal / gap: 10px; / Jarak antar tombol / margin-bottom: 30px; / Jarak bawah dari elemen setelahnya / padding: 10px; / Ruang dalam semua sisi / } / Tombol negara horizontal biasa / .country-btn { padding: 8px 16px; / Ruang dalam atas-bawah 8px, kiri-kanan 16px / font-size: 14px; / Ukuran teks tombol / font-weight: 500; / Teks setengah tebal / color: #333; / Warna teks abu gelap / background-color: #f0f0f0; / Warna latar abu muda / border: none; / Hilangkan border default / border-radius: 20px; / Sudut membulat penuh (pill shape) / cursor: pointer; / Tampilkan kursor tangan saat hover / transition: all 0.2s ease-in-out; / Efek transisi halus saat hover / box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); / Bayangan ringan / } .country-btn:hover { background-color: #e0e0e0; / Latar sedikit lebih gelap saat hover / transform: translateY(-2px); / Naik sedikit saat di-hover / box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); / Bayangan diperbesar / } .country-btn.active { background-color: #D43D3D; / Latar merah jika tombol aktif / color: white; / Teks putih saat aktif / box-shadow: 0 2px 6px rgba(212, 61, 61, 0.4); / Bayangan merah / } / --- CSS Khusus untuk Dropdown Custom --- / / Wrapper untuk menjaga posisi panel dropdown / .custom-dropdown-wrapper { position: relative; / Sebagai acuan posisi untuk panel dropdown / display: inline-block; / Inline tapi masih bisa diberi lebar/tinggi / } / Tombol dropdown "Pilih negara lain..." / .dropdown-toggle { display: flex; / Flex untuk menyusun teks dan ikon horizontal / align-items: center; / Rata tengah vertikal / gap: 8px; / Jarak antara ikon dan teks / } / Panel dropdown yang bisa scroll (disembunyikan secara default) / .custom-dropdown-panel { display: none; / Sembunyikan secara default / position: absolute; / Posisi mutlak terhadap .custom-dropdown-wrapper / background-color: white; / Latar putih / min-width: 220px; / Lebar minimal panel dropdown / box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); / Bayangan lembut / z-index: 100; / Pastikan panel di atas elemen lain / border-radius: 8px; / Sudut membulat / padding: 8px; / Ruang dalam / max-height: 200px; / Tinggi maksimum / overflow-y: auto; / Aktifkan scroll vertikal jika isi melebihi tinggi / } / Kelas .show untuk menampilkan panel / .custom-dropdown-panel.show { display: block; / Tampilkan panel ketika diberi class "show" / } / Tombol pilihan di dalam panel dropdown / .dropdown-option { color: black; / Warna teks hitam / padding: 12px 16px; / Ruang dalam / text-decoration: none; / Hilangkan garis bawah teks / display: block; / Tampilkan seperti blok penuh / width: 100%; / Lebar penuh panel / text-align: left; / Rata kiri teks / background-color: transparent; / Latar transparan / border: none; / Tanpa border / cursor: pointer; / Pointer saat hover / border-radius: 4px; / Sedikit membulat / } .dropdown-option:hover { background-color: #f1f1f1; / Latar berubah saat hover / } .contact-section { padding: 60px 5%; background-color: #F5E6C4; / Warna latar belakang krem yang serasi / overflow: hidden; / Untuk animasi slide-in / } .contact-header { text-align: center; / Pusatkan teks secara horizontal / margin-bottom: 50px; / Jarak bawah 50px dari elemen setelahnya / opacity: 0; / Awalnya tidak terlihat (untuk animasi) / transform: translateY(-20px); / Pindahkan elemen 20px ke atas / animation: slideInDown 0.8s ease-out 0.2s forwards; / Animasi turun selama 0.8 detik, delay 0.2 detik, dan tetap di posisi akhir / } @keyframes slideInDown { to { opacity: 1; transform: translateY(0); } / Akhiran animasi: muncul dan kembali ke posisi normal / } .contact-header h2 { font-size: 2.8em; / Ukuran font besar / color: #333; / Warna abu gelap / margin-bottom: 15px; / Jarak bawah 15px dari paragraf / } .contact-header p { font-size: 1.15em; / Ukuran font sedikit lebih besar dari standar / color: #666; / Warna abu sedang / max-width: 700px; / Lebar maksimum paragraf / margin: 0 auto; / Tengah secara horizontal / line-height: 1.7; / Spasi antar baris 1.7x / } .contact-container { display: flex; / Susun elemen anak secara horizontal / gap: 50px; / Jarak antar kolom 50px / background-color: #F5E6C4; / Warna latar krem / padding: 50px; / Ruang di dalam container / border-radius: 16px; / Sudut membulat / box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12); / Bayangan lembut / max-width: 1150px; / Lebar maksimum / margin: 0 auto; / Tengah horizontal / } / === Kolom Informasi Kontak (kiri) === / .contact-info { flex-basis: 40%; / Ambil 40% lebar dari container / } .contact-info h3, .contact-form h3 { font-size: 2em; / Ukuran heading besar / color: #D43D3D; / Warna merah tema / margin-bottom: 25px; / Jarak bawah 25px / padding-bottom: 12px; / Ruang bawah isi heading / border-bottom: 3px solid #2e7d32; / Garis bawah warna hijau / } .contact-info .info-item { display: flex; / Susun ikon dan teks sejajar / align-items: center; / Rata tengah vertikal / margin-bottom: 25px; / Jarak antar item / gap: 20px; / Jarak antara ikon dan teks / transition: background-color 0.3s ease; / Transisi hover / padding: 10px; / Ruang dalam item / border-radius: 10px; / Sudut membulat / } .contact-info .info-item:hover { background-color: #f9f9f9; / Ubah latar saat hover / } .contact-info .info-item .material-symbols-outlined { font-size: 32px; / Ukuran ikon / color: #D43D3D; / Warna ikon merah tema / background-color: #fdecec; / Latar belakang ikon / padding: 10px; / Ruang dalam ikon / border-radius: 50%; / Bentuk ikon jadi bulat / } .contact-info .info-item p { font-size: 1.05em; / Ukuran font sedikit lebih besar / color: #555; / Warna teks abu / margin: 0; / Hilangkan margin default / } .contact-info .info-item a { text-decoration: none; / Hilangkan garis bawah link / color: #555; / Warna teks link / transition: color 0.3s; / Transisi warna saat hover / } .contact-info .info-item a:hover { color: #D43D3D; / Ubah warna saat hover / } / === Social Media Section === / .contact-social-media { margin-top: 40px; / Jarak atas dari info kontak / } .contact-social-media h4 { font-size: 1.3em; / Ukuran heading / margin-bottom: 18px; / Jarak bawah / color: #333; / Warna teks / } .contact-social-media .social-icon { display: inline-block; / Tampilkan berdampingan / margin-right: 20px; / Jarak antar ikon / transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1); / Efek hover / border-radius: 8px; / Sudut ikon membulat / overflow: hidden; / Sembunyikan bagian luar radius / } .contact-social-media .social-icon img { width: 40px; / Lebar ikon / height: 40px; / Tinggi ikon / display: block; / Hindari whitespace di bawah gambar / } .contact-social-media .social-icon:hover { transform: scale(1.1); / Perbesar ikon / box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); / Tambahkan bayangan / } / === Kolom Form Kontak (kanan) === / .contact-form { flex-basis: 60%; / Ambil 60% lebar container / } .form-group { margin-bottom: 25px; / Jarak antar grup form / } .form-group label { display: block; / Tampilkan label satu baris penuh / font-weight: 500; / Semi-bold / margin-bottom: 10px; / Jarak label dengan input / color: #444; / Warna teks label / font-size: 1.05em; / Ukuran font label / } .contact-form input, .contact-form textarea { width: 100%; / Lebar penuh / padding: 14px; / Ruang dalam / border: 1px solid #ccc; / Garis abu terang / border-radius: 10px; / Sudut membulat / font-size: 1rem; / Ukuran font normal / transition: border-color 0.3s, box-shadow 0.3s; / Efek saat fokus / } .contact-form input:focus, .contact-form textarea:focus { outline: none; / Hilangkan outline default / border-color: #D43D3D; / Warna merah saat fokus / box-shadow: 0 0 8px rgba(212, 61, 61, 0.3); / Efek bayangan / } .btn-kirim { width: 100%; / Lebar penuh / padding: 16px 20px; / Ruang dalam tombol / background-color: #D43D3D; / Warna merah tema / color: white; / Teks putih / border: none; / Tanpa garis / border-radius: 10px; / Sudut membulat / font-size: 1.15em; / Ukuran teks / font-weight: bold; / Teks tebal / cursor: pointer; / Kursor pointer saat hover / transition: background-color 0.3s, transform 0.2s, box-shadow 0.2s; / Efek hover / box-shadow: 0 4px 8px rgba(212, 61, 61, 0.3); / Bayangan tombol / } .btn-kirim:hover { background-color: #c83131; / Warna lebih gelap saat hover / transform: translateY(-3px); / Tombol naik sedikit / box-shadow: 0 6px 12px rgba(212, 61, 61, 0.4); / Bayangan lebih besar / } .btn-kirim:active { transform: translateY(0); / Kembali ke posisi saat diklik / box-shadow: 0 2px 4px rgba(212, 61, 61, 0.3); / Bayangan lebih kecil / } / === Responsif untuk layar kecil (max-width 768px) === / @media (max-width: 768px) { .contact-container { flex-direction: column; / Tumpuk jadi vertikal / padding: 30px; / Kurangi padding / gap: 30px; / Kurangi jarak antar kolom / } .contact-info { flex-basis: 100%; / Ambil seluruh lebar / } .contact-form { flex-basis: 100%; / Ambil seluruh lebar / } } / ================================================= / / GAYA PESAN TERIMA KASIH (HALAMAN KONTAK) / / ================================================= / #contact-thank-you { text-align: center; / Membuat semua teks rata tengah / padding: 30px 40px; / Memberi ruang di dalam kotak (atas/bawah 30px, kiri/kanan 40px) / margin-top: 25px; / Memberi jarak dari formulir di atasnya / background-color: #F5E6C4; / Warna latar yang konsisten dengan tema / color: #333; / Warna teks utama / border-left: 6px solid #D43D3D; / Aksen garis tebal di kiri sebagai penanda sukses / border-radius: 8px; / Sudut yang sedikit tumpul agar terlihat modern / box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1); / Bayangan halus untuk efek 3D / background-color: #ddd; } / Gaya untuk judul "Terima kasih!" / #contact-thank-you h3 { margin-top: 0; margin-bottom: 15px; / Jarak antara judul dan paragraf / font-family: 'Poppins', sans-serif; / Menggunakan font yang modern / font-size: 1.8em; / Ukuran judul agar lebih menonjol / font-weight: 600; color: #4CAF50; / Warna hijau agar sesuai dengan aksen border / } / Gaya untuk teks paragraf di bawah judul / #contact-thank-you p { margin-bottom: 0; line-height: 1.7; / Jarak antar baris agar lebih nyaman dibaca / font-size: 1.1em; color: #555; / Warna teks yang sedikit lebih lembut / } / --- Kontainer Utama --- / #recipe-detail, #grid-recipe-detail { max-width: 1200px; / Lebar maksimal 1200px / margin: 40px auto; / Tengah horizontal dengan margin atas-bawah 40px / padding: 40px; / Ruang dalam 40px di semua sisi / background-color: #F5E6C4; / Latar belakang krem / border-radius: 8px; / Sudut membulat / box-shadow: 0 4px 25px rgba(0,0,0,0.08); / Bayangan lembut / animation: fadeIn 0.8s ease-out; / Animasi muncul dari bawah / } @keyframes fadeIn { from { opacity: 0; transform: translateY(20px); } / Mulai transparan & bergeser ke bawah / to { opacity: 1; transform: translateY(0); } / Akhir: sepenuhnya muncul dan posisi normal / } / --- Judul Utama --- / .recipe-title-main { font-family: 'Merriweather', serif; / Font serif klasik / font-size: 2.8em; / Ukuran besar untuk judul utama / font-weight: 700; / Tebal / text-align: center; / Rata tengah / color: #2c3e50; / Warna biru gelap / margin: 0 0 40px 0; / Hanya margin bawah / } .pro-layout-2col { display: grid; / Gunakan grid layout / grid-template-columns: 2fr 3fr; / Dua kolom, kiri 40%, kanan 60% / gap: 40px; / Jarak antar kolom / align-items: start; / Rata atas antar kolom / } .pro-column-left img { width: 100%; / Gambar isi penuh kolom / border-radius: 8px; / Sudut membulat / position: sticky; / Gambar tetap di tempat saat discroll / top: 100px; / Jarak dari atas saat sticky / } .recipe-image-full { width: 100%; / Gambar penuh / height: 500px; / Tinggi tetap / object-fit: cover; / Potong gambar agar pas tanpa merusak aspek rasio / border-radius: 8px; / Sudut membulat / margin-bottom: 40px; / Jarak bawah dari elemen berikutnya / } .pro-content-grid { display: grid; / Grid layout / grid-template-columns: 1fr 1fr; / Dua kolom sama lebar / gap: 20px 40px; / Jarak antar baris 20px dan kolom 40px / } #recipe-detail h3, #grid-recipe-detail h3 { font-family: 'Lato', sans-serif; / Font modern sans-serif / font-size: 1.6em; / Ukuran subjudul / font-weight: 700; / Tebal / color: #34495e; / Warna biru keabu-abuan / margin: 0 0 20px 0; / Hanya margin bawah / padding-bottom: 15px; / Ruang bawah isi heading / border-bottom: 1px solid #D43D3D; / Garis bawah merah / display: flex; / Susun horizontal jika ada ikon / align-items: center; / Rata tengah secara vertikal / gap: 12px; / Jarak antara elemen dalam h3 / } .pro-column-right h3:not(:first-child) { margin-top: 40px; / Jarak atas khusus h3 kedua dan seterusnya / } #recipe-detail ul, #recipe-detail ol, #grid-recipe-detail ul, #grid-recipe-detail ol { padding-left: 5px; / Sedikit ruang kiri / list-style: none; / Hilangkan bullet/angka default / font-family: 'Lato', sans-serif; / Font konsisten / } #recipe-detail li, #grid-recipe-detail li { line-height: 1.9; / Spasi antar baris nyaman dibaca / color: #555; / Warna abu teks / margin-bottom: 15px; / Jarak antar item / padding-left: 10px; / Ruang kiri sebelum border / border-left: 3px solid #D43D3D; / Garis vertikal merah sebagai penanda item / transition: all 0.2s ease; / Transisi halus saat hover / } #recipe-detail li:hover, #grid-recipe-detail li:hover { background-color: #f8f9fa; / Latar terang saat hover / border-left-color: #2e7d32; / Garis kiri berubah jadi hijau / } / --- Responsif --- / @media (max-width: 768px) { .pro-layout-2col, .pro-content-grid { grid-template-columns: 1fr; / Semua jadi satu kolom di layar kecil / } .pro-column-left img { position: static; / Hilangkan sticky di mobile / margin-bottom: 30px; / Tambahkan jarak bawah / } #recipe-detail, #grid-recipe-detail { padding: 20px; / Kurangi padding / margin: 20px auto; / Kurangi margin / } .recipe-image-full { height: 300px; / Tinggi gambar lebih kecil di layar kecil / } .recipe-title-main { font-size: 2em; / Ukuran judul diperkecil / } } / ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// / h1 { text-align: center; / Teks judul (h1) diratakan ke tengah / font-size: 1.8em; / Ukuran font 1.8 kali dari font default / } h3 { color: #fff; / Warna teks putih untuk semua
/ } #search-input { display: block; / Input ditampilkan sebagai blok (agar bisa auto margin) / margin: 20px auto; / Margin atas-bawah 20px, kiri-kanan auto (tengah horizontal) / padding: 12px; / Ruang dalam (padding) 12px di semua sisi / width: 90%; / Lebar input 90% dari container / max-width: 500px; / Tapi maksimal hanya 500px / border: 1px solid #ccc; / Garis pinggir abu terang / border-radius: 8px; / Sudut input dibulatkan 8px / } #recipe-list { display: flex; / Gunakan Flexbox untuk menyusun daftar resep / flex-wrap: wrap; / Izinkan item turun ke baris baru jika penuh / gap: 16px; / Jarak antar kartu resep 16px / justify-content: center; / Semua kartu ditempatkan di tengah / } p { text-align: center; / Semua paragraf diratakan ke tengah / } .card { width: 100%; / Lebar penuh pada container parent / max-width: 350px; / Tapi maksimal hanya 350px / background: #D43D3D; / Warna latar belakang merah tua / border-radius: 8px; / Sudut kartu membulat / box-shadow: 0 2px 6px rgba(0,0,0,0.1); / Tambahkan bayangan lembut / cursor: pointer; / Kursor berubah jadi tangan saat hover / overflow: hidden; / Sembunyikan bagian yang keluar dari kotak / display: flex; / Gunakan Flexbox untuk layout isi kartu / flex-direction: column; / Susun konten secara vertikal (atas ke bawah) / } .card img { width: 100%; / Gambar isi penuh lebar kartu / height: 180px; / Tinggi tetap 180px / object-fit: cover; / Gambar dipotong agar memenuhi area tanpa merusak proporsi / } .card .info { padding: 15px; / Ruang dalam konten info kartu / flex-grow: 1; / Biarkan bagian ini berkembang mengisi ruang vertikal / } .card .info h3 { margin: 0 0 8px; / Hapus margin atas, bawah 8px / font-size: 1.1em; / Ukuran font 1.1 kali default / } .card .info p { margin: 0; / Hapus semua margin / color: #fff; / Warna teks putih / font-size: 14px; / Ukuran font kecil (14px) / } / --- Kontainer untuk Tombol Filter --- / .button-container { display: flex; / Mengaktifkan layout flexbox / flex-wrap: wrap; / Izinkan tombol pindah ke baris baru jika perlu / justify-content: center; / Pusatkan tombol-tombol secara horizontal / align-items: center; / Mencegah item meregang secara vertikal / gap: 10px; / Jarak antar tombol / margin-bottom: 30px; / Jarak ke daftar resep di bawahnya / padding: 10px; } / --- Style Dasar untuk Setiap Tombol --- / .country-btn { padding: 8px 16px; font-size: 14px; font-weight: 500; color: #333; / Warna teks / background-color: #f0f0f0; / Warna latar tombol / border: none; / Hapus border default / border-radius: 20px; / Membuat sudut menjadi bulat (pill shape) / cursor: pointer; transition: all 0.2s ease-in-out; / Animasi halus untuk semua perubahan / box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); / Bayangan halus / } / --- Efek saat Kursor di Atas Tombol (Hover) --- / .country-btn:hover { background-color: #e0e0e0; / Warna latar sedikit lebih gelap / transform: translateY(-2px); / Tombol sedikit terangkat / box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); / Bayangan lebih jelas / } / --- Style untuk Tombol yang Sedang Aktif/Dipilih --- / .country-btn.active { background-color: #D43D3D; / Warna biru sebagai penanda aktif / color: #ffffff; / Teks menjadi putih / box-shadow: 0 2px 6px rgba(0, 123, 255, 0.4); / Bayangan berwarna biru / transform: translateY(-2px); } / --- (Opsional) Efek Hover untuk Tombol yang Aktif --- / .country-btn.active:hover { background-color: #0069d9; / Biru yang sedikit lebih gelap saat hover / } / --- (Opsional) Penyesuaian untuk Layar Kecil (Mobile) --- / @media (max-width: 600px) { .country-btn { font-size: 13px; / Ukuran teks tombol lebih kecil untuk layar kecil / padding: 6px 12px; / Padding dikurangi agar tombol tetap proporsional / } .button-container { gap: 8px; / Kurangi jarak antar tombol / margin-bottom: 20px; / Kurangi margin bawah / } } / Style untuk dropdown pilihan negara / / Style dasar untuk dropdown / .country-select { font-size: 14px; / Ukuran teks standar / font-weight: 500; / Teks semi-bold / font-family: inherit; / Gunakan font dari elemen induk (konsisten) / color: #333; / Warna teks abu gelap / background-color: #f9f9f9; / Latar belakang abu terang / border: 1px solid #ccc; / Border abu terang / border-radius: 8px; / Sudut membulat / cursor: pointer; / Tangan saat diarahkan / box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); / Bayangan halus / transition: border-color 0.2s; / Transisi halus saat fokus / } .country-select:focus { border-color: #007bff; / Warna biru saat dropdown difokuskan / outline: none; / Hilangkan outline bawaan browser / } .country-select:not([size]) { padding: 8px 30px 8px 16px; / Padding: kanan 30px (untuk ruang ikon panah) / border-radius: 20px; / Bentuk oval seperti tombol / background-color: #f0f0f0; / Latar lebih terang / border: none; / Hilangkan border (override dari sebelumnya) / -webkit-appearance: none; / Hilangkan gaya bawaan browser (Chrome/Safari) / -moz-appearance: none; / Untuk Firefox / appearance: none; / Untuk browser modern / background-repeat: no-repeat; / Jangan ulang background image / background-position: right 1rem center; / Posisi ikon di sisi kanan / background-size: .65em auto; / Ukuran ikon dropdown / } / ======================================= / / STYLE UNTUK DARK MODE / / ======================================= / / --- Tombol Toggle Dark Mode --- / .theme-switch-wrapper { display: flex; / Mengatur elemen anak secara horizontal / align-items: center; / Menyelaraskan secara vertikal di tengah / margin-left: 15px; / Jarak dari elemen di sebelah kiri (biasanya menu navigasi) / } .theme-switch { position: relative; / Posisi relatif untuk positioning elemen anak / display: inline-block; / Menjadikan elemen dalam satu baris / width: 60px; / Lebar switch / height: 34px; / Tinggi switch / } .theme-switch input { opacity: 0; / Menyembunyikan input aslinya / width: 0; / Menghapus ukuran input / height: 0; / Menghapus ukuran input / } .slider { position: absolute; / Posisi absolut untuk menutupi switch / cursor: pointer; / Ubah kursor menjadi pointer saat hover / top: 0; / Posisi dari atas / left: 0; / Posisi dari kiri / right: 0; / Posisi dari kanan / bottom: 0; / Posisi dari bawah / background-color: #ccc; / Warna latar default / transition: .4s; / Animasi transisi saat toggle / border-radius: 34px; / Membuat sudut bulat penuh / } .slider:before { position: absolute; / Posisi absolut untuk tombol bulat di dalam slider / content: ""; / Konten kosong wajib untuk pseudo-element / height: 26px; / Tinggi tombol / width: 26px; / Lebar tombol / left: 4px; / Jarak dari kiri / bottom: 4px; / Jarak dari bawah / background-color: white; / Warna tombol bulat / transition: .4s; / Transisi animasi saat bergerak / border-radius: 50%; / Membuat bentuk bulat penuh / } input:checked + .slider { background-color: #2196F3; / Warna saat dark mode aktif (slider aktif) / } input:checked + .slider:before { transform: translateX(26px); / Geser tombol bulat ke kanan saat aktif / } .slider .sun-icon, .slider .moon-icon { position: absolute; / Posisi absolut dalam slider / top: 50%; / Posisi di tengah secara vertikal / transform: translateY(-50%); / Koreksi agar benar-benar di tengah / color: white; / Warna ikon / font-size: 20px; / Ukuran ikon / } .slider .sun-icon { left: 7px; / Jarak dari kiri / opacity: 1; / Tampilkan saat belum aktif / transition: opacity 0.4s; / Animasi transisi / } .slider .moon-icon { right: 7px; / Jarak dari kanan / opacity: 0; / Sembunyikan saat belum aktif / transition: opacity 0.4s; / Animasi transisi / } input:checked + .slider .sun-icon { opacity: 0; / Sembunyikan ikon matahari saat aktif (dark mode) / } input:checked + .slider .moon-icon { opacity: 1; / Tampilkan ikon bulan saat aktif / } / --- Variabel Warna Dark Mode --- / body.dark-mode { background-color: #1a1a1a; / Warna latar utama dark mode / color: #e0e0e0; / Warna teks utama di dark mode / } body.dark-mode header { background-color: #1f1f1f; / Latar belakang header / border-bottom: 2px solid #333; / Garis bawah header / } body.dark-mode .border { background-color: #2a2a2a; / Warna latar untuk elemen dengan class 'border' / } body.dark-mode .tentang h1 { background-color: #1f1f1f; / Latar belakang judul bagian tentang / } body.dark-mode .recipe-card { background-color: #333; / Latar belakang kartu resep / color: #f0f0f0; / Warna teks dalam kartu resep / border: 1px solid #444; / Garis tepi kartu resep / } body.dark-mode .category-btn { background-color: #333; / Latar tombol kategori / color: #e0e0e0; / Warna teks tombol / border-color: #555; / Warna garis tepi / } body.dark-mode .category-btn.active { background-color: #2196F3; / Warna latar tombol saat aktif / color: white; / Warna teks saat aktif / border-color: #2196F3; / Warna garis tepi saat aktif / } body.dark-mode #load-more-btn { background-color: #0d8bf2; / Warna tombol 'load more' di dark mode / } body.dark-mode .about-us-container, body.dark-mode .feedback-section, body.dark-mode .contact-container, body.dark-mode #recipe-detail, body.dark-mode #grid-recipe-detail { background-color: #252525; / Warna latar untuk berbagai container / box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5); / Bayangan gelap / } body.dark-mode .about-us-container h1 { color: #e0e0e0; / Warna teks judul bagian about us / } body.dark-mode .about-section-grid .section-item { background: #333; / Latar setiap item grid about section / } body.dark-mode .about-section-grid .section-item p, body.dark-mode .about-section-grid .section-item h2 { color: #e0e0e0; / Warna teks paragraf dan heading / } body.dark-mode .search-container input[type="text"] { background-color: #333; / Latar input pencarian / color: #e0e0e0; / Warna teks input / border-color: #555; / Warna garis tepi input / } body.dark-mode .feedback-form input, body.dark-mode .feedback-form textarea, body.dark-mode .rating-group select, body.dark-mode .contact-form input, body.dark-mode .contact-form textarea { background-color: #3a3a3a; / Latar elemen formulir / color: #f0f0f0; / Warna teks dalam form / border-color: #555; / Warna garis tepi / } body.dark-mode .contact-info, body.dark-mode h2, body.dark-mode h3, body.dark-mode p, body.dark-mode label, body.dark-mode li { color: #e0e0e0; / Warna umum teks untuk elemen / } body.dark-mode .recipe-title-main { color: #f5f5f5; / Warna judul utama resep / } body.dark-mode #recipe-detail h3, body.dark-mode #grid-recipe-detail h3 { color: #2196F3; / Warna heading resep / border-bottom-color: #2196F3; / Warna garis bawah heading / } body.dark-mode #recipe-detail li, body.dark-mode #grid-recipe-detail li { border-left-color: #2196F3; / Warna garis samping list resep / } body.dark-mode li:hover { background-color: #333; / Warna latar saat hover list item / } / PENYESUAIAN DARK MODE TOGGLE DI MOBILE / / Aturan ini hanya berlaku untuk layar kecil (mobile) / @media (max-width: 768px) { / Tata letak tombol toggle di dalam menu navigasi mobile / .navbar .theme-switch-wrapper { margin-top: 1.5rem; / Beri jarak atas dari link navigasi terakhir / padding: 0 1.5rem; / Samakan padding kiri-kanan dengan link navigasi / width: 100%; / Gunakan lebar penuh agar rapi / box-sizing: border-box; } / Di tampilan desktop, kita pastikan tombolnya sejajar dengan link / / Hapus margin-left default agar tidak mendorong menu di desktop / .theme-switch-wrapper { margin-left: 0; } / Beri jarak antara link navigasi terakhir dan tombol toggle di desktop / .navbar a:last-of-type { margin-right: 20px; } } / DARK MODE UNTUK HALAMAN ABOUT & CONTACT / / Ketika mode gelap aktif, buat latar belakang elemen ini transparan / body.dark-mode .about-us-container { background-color: #252525; / Kita pastikan lagi warnanya gelap / } body.dark-mode .contact-section { background-color: transparent; / Ini akan membuat warna body yang gelap terlihat / } / Penyesuaian agar teks header di halaman kontak juga berubah warna / body.dark-mode .contact-header h2, body.dark-mode .contact-header p { color: #e0e0e0; } / WARNA TOMBOL CARI DI MODE GELAP / body.dark-mode button { / Memastikan kita menargetkan elemen