/* ==================== RESET CSS & VARIABEL GLOBAL ==================== */
/* Reset semua margin, padding, dan box-sizing untuk konsistensi */
* {
    margin: 0; /* Menghapus margin default */
    padding: 0; /* Menghapus padding default */
    box-sizing: border-box; /* Membuat padding/border tidak menambah lebar element */
}

/* Variabel CSS untuk warna dan ukuran yang konsisten */
:root {
    --primary: #6366f1; /* Warna utama (indigo) */
    --primary-dark: #4f46e5; /* Warna utama lebih gelap */
    --secondary: #ec4899; /* Warna sekunder (pink) */
    --dark: #0f172a; /* Warna gelap untuk teks */
    --light: #f8fafc; /* Warna terang untuk background */
    --gray: #64748b; /* Warna abu-abu untuk teks sekunder */
    --gradient: linear-gradient(135deg, #6366f1 0%, #ec4899 100%); /* Gradien warna */
    --shadow: 0 10px 25px -5px rgba(0,0,0,0.1); /* Shadow default */
    --shadow-lg: 0 20px 40px -10px rgba(0,0,0,0.15); /* Shadow besar */
}

/* ==================== STYLE DASAR ==================== */
html {
    scroll-behavior: smooth; /* Membuat scroll halus */
}

body {
    font-family: 'Inter', sans-serif; /* Font utama */
    color: var(--dark); /* Warna teks utama */
    line-height: 1.6; /* Jarak antar baris */
    overflow-x: hidden; /* Menghilangkan scroll horizontal */
}

/* Container untuk membatasi lebar konten */
.container {
    max-width: 1200px; /* Lebar maksimal container */
    margin: 0 auto; /* Membuat container di tengah */
    padding: 0 20px; /* Padding kiri kanan */
}

/* ==================== SECTION HEADER ==================== */
/* Style untuk header setiap section */
.section-header {
    text-align: center; /* Teks di tengah */
    margin-bottom: 60px; /* Jarak bawah */
}

.section-tag {
    display: inline-block; /* Agar bisa dikasih padding */
    background: rgba(99, 102, 241, 0.1); /* Background transparan */
    color: var(--primary); /* Warna teks */
    padding: 8px 20px; /* Padding dalam */
    border-radius: 50px; /* Membuat oval */
    font-size: 14px; /* Ukuran font */
    font-weight: 600; /* Ketebalan font */
    margin-bottom: 20px; /* Jarak bawah */
}

.section-header h2 {
    font-size: 36px; /* Ukuran judul */
    margin-bottom: 15px; /* Jarak bawah */
    font-weight: 800; /* Ketebalan font */
}

.section-header p {
    color: var(--gray); /* Warna teks */
    max-width: 600px; /* Lebar maksimal */
    margin: 0 auto; /* Membuat di tengah */
}

/* ==================== NAVBAR ==================== */
.navbar {
    background: white; /* Background putih */
    box-shadow: var(--shadow); /* Shadow bawah */
    position: fixed; /* Navbar tetap di atas saat scroll */
    width: 100%; /* Lebar penuh */
    top: 0; /* Posisi di atas */
    z-index: 1000; /* Di atas element lain */
    padding: 15px 0; /* Padding atas bawah */
}

/* Flexbox untuk mengatur logo dan menu */
.navbar .container {
    display: flex; /* Mengaktifkan flexbox */
    justify-content: space-between; /* Logo kiri, menu kanan */
    align-items: center; /* Vertikal tengah */
}

/* Style logo */
.logo {
    display: flex; /* Flex untuk ikon dan teks */
    align-items: center; /* Vertikal tengah */
    gap: 10px; /* Jarak antara ikon dan teks */
    font-size: 24px; /* Ukuran font */
    font-weight: 800; /* Ketebalan font */
}

.logo i {
    color: var(--primary); /* Warna ikon */
    font-size: 28px; /* Ukuran ikon */
}

/* Menu navigasi desktop */
.nav-menu {
    display: flex; /* Flex horizontal */
    list-style: none; /* Menghilangkan bullet point */
    gap: 30px; /* Jarak antar menu */
}

.nav-menu a {
    text-decoration: none; /* Menghilangkan garis bawah */
    color: var(--dark); /* Warna teks */
    font-weight: 500; /* Ketebalan font */
    transition: color 0.3s; /* Animasi perubahan warna */
}

.nav-menu a:hover {
    color: var(--primary); /* Warna saat hover */
}

/* Tombol hamburger untuk mobile (default disembunyikan) */
.hamburger {
    display: none; /* Sembunyikan di desktop */
    flex-direction: column; /* Susun vertikal */
    cursor: pointer; /* Kursor pointer */
}

.hamburger span {
    width: 25px; /* Lebar garis */
    height: 3px; /* Tinggi garis */
    background: var(--dark); /* Warna garis */
    margin: 3px 0; /* Jarak antar garis */
    transition: 0.3s; /* Animasi */
}

/* ==================== HERO SECTION ==================== */
.hero {
    padding: 120px 0 80px; /* Padding atas besar untuk navbar fixed */
    background: linear-gradient(135deg, #f8fafc 0%, #eef2ff 100%); /* Background gradien */
}

.hero .container {
    display: flex; /* Flex 2 kolom */
    align-items: center; /* Vertikal tengah */
    gap: 50px; /* Jarak antar kolom */
}

/* Kolom kiri (konten) */
.hero-content {
    flex: 1; /* Memakan 1 bagian */
}

.hero-badge {
    display: inline-block; /* Agar bisa dikasih padding */
    background: white; /* Background putih */
    padding: 8px 20px; /* Padding dalam */
    border-radius: 50px; /* Membuat oval */
    font-size: 14px; /* Ukuran font */
    font-weight: 600; /* Ketebalan font */
    margin-bottom: 20px; /* Jarak bawah */
    box-shadow: var(--shadow); /* Shadow */
}

.hero-content h1 {
    font-size: 48px; /* Ukuran judul besar */
    font-weight: 800; /* Ketebalan font */
    line-height: 1.2; /* Jarak antar baris */
    margin-bottom: 20px; /* Jarak bawah */
}

.gradient-text {
    background: var(--gradient); /* Gradien background */
    -webkit-background-clip: text; /* Untuk teks gradien */
    background-clip: text; /* Teks gradien */
    color: transparent; /* Membuat teks transparan agar background terlihat */
}

.hero-content p {
    font-size: 18px; /* Ukuran font */
    color: var(--gray); /* Warna teks */
    margin-bottom: 30px; /* Jarak bawah */
    max-width: 500px; /* Lebar maksimal */
}

/* Tombol-tombol */
.hero-buttons {
    display: flex; /* Flex horizontal */
    gap: 20px; /* Jarak antar tombol */
    margin-bottom: 40px; /* Jarak bawah */
}

.btn {
    display: inline-block; /* Agar bisa dikasih padding */
    padding: 12px 30px; /* Padding dalam */
    border-radius: 50px; /* Membuat oval */
    text-decoration: none; /* Menghilangkan garis bawah */
    font-weight: 600; /* Ketebalan font */
    transition: all 0.3s; /* Animasi */
    cursor: pointer; /* Kursor pointer */
    border: none; /* Menghilangkan border default */
    font-size: 16px; /* Ukuran font */
}

.btn-primary {
    background: var(--gradient); /* Background gradien */
    color: white; /* Warna teks */
}

.btn-primary:hover {
    transform: translateY(-2px); /* Efek naik sedikit */
    box-shadow: var(--shadow-lg); /* Shadow lebih besar */
}

.btn-outline {
    border: 2px solid var(--primary); /* Border warna primary */
    color: var(--primary); /* Warna teks */
    background: transparent; /* Background transparan */
}

.btn-outline:hover {
    background: var(--primary); /* Background berubah */
    color: white; /* Warna teks berubah */
}

.btn-block {
    width: 100%; /* Lebar penuh */
    text-align: center; /* Teks di tengah */
}

/* Statistik */
.hero-stats {
    display: flex; /* Flex horizontal */
    gap: 40px; /* Jarak antar stat */
}

.stat h3 {
    font-size: 28px; /* Ukuran angka */
    font-weight: 800; /* Ketebalan font */
    color: var(--primary); /* Warna angka */
}

.stat p {
    font-size: 14px; /* Ukuran teks */
    margin-bottom: 0; /* Menghilangkan margin bawah default */
}

/* Kolom kanan (image placeholder) */
.hero-image {
    flex: 1; /* Memakan 1 bagian */
}

.video-placeholder {
    background: var(--gradient); /* Background gradien */
    border-radius: 20px; /* Sudut melengkung */
    padding: 100px 40px; /* Padding besar */
    text-align: center; /* Teks di tengah */
    color: white; /* Warna teks */
    cursor: pointer; /* Kursor pointer */
    transition: transform 0.3s; /* Animasi */
}

.video-placeholder:hover {
    transform: scale(1.02); /* Efek zoom sedikit */
}

.video-placeholder i {
    font-size: 64px; /* Ukuran ikon play */
    margin-bottom: 20px; /* Jarak bawah */
}

/* ==================== SERVICES SECTION ==================== */
.services {
    padding: 80px 0; /* Padding atas bawah */
    background: white; /* Background putih */
}

.services-grid {
    display: grid; /* Menggunakan CSS Grid */
    grid-template-columns: repeat(3, 1fr); /* 3 kolom sama lebar */
    gap: 30px; /* Jarak antar card */
}

.service-card {
    background: white; /* Background putih */
    padding: 40px 30px; /* Padding dalam */
    border-radius: 20px; /* Sudut melengkung */
    box-shadow: var(--shadow); /* Shadow */
    transition: all 0.3s; /* Animasi */
    text-align: center; /* Teks di tengah */
    position: relative; /* Untuk positioning badge */
}

.service-card:hover {
    transform: translateY(-5px); /* Efek naik */
    box-shadow: var(--shadow-lg); /* Shadow lebih besar */
}

/* Card populer dengan border gradient */
.service-card.popular {
    border: 2px solid transparent; /* Border transparan untuk gradien */
    background: linear-gradient(white, white) padding-box, /* Background putih */
                var(--gradient) border-box; /* Border gradien */
}

.popular-badge {
    position: absolute; /* Posisi absolut relative ke card */
    top: -12px; /* Di atas card */
    left: 50%; /* Di tengah horizontal */
    transform: translateX(-50%); /* Koreksi posisi tengah */
    background: var(--gradient); /* Background gradien */
    color: white; /* Warna teks */
    padding: 5px 15px; /* Padding dalam */
    border-radius: 50px; /* Membuat oval */
    font-size: 12px; /* Ukuran font */
    font-weight: 600; /* Ketebalan font */
}

.service-icon {
    width: 70px; /* Lebar ikon container */
    height: 70px; /* Tinggi ikon container */
    background: rgba(99, 102, 241, 0.1); /* Background transparan */
    border-radius: 50%; /* Membuat lingkaran */
    display: flex; /* Flex untuk centering */
    align-items: center; /* Vertikal tengah */
    justify-content: center; /* Horizontal tengah */
    margin: 0 auto 20px; /* Margin auto untuk tengah, jarak bawah */
}

.service-icon i {
    font-size: 32px; /* Ukuran ikon */
    color: var(--primary); /* Warna ikon */
}

.service-card h3 {
    font-size: 24px; /* Ukuran judul */
    margin-bottom: 15px; /* Jarak bawah */
}

.service-card p {
    color: var(--gray); /* Warna teks */
    margin-bottom: 20px; /* Jarak bawah */
}

.service-features {
    display: flex; /* Flex */
    flex-direction: column; /* Susun vertikal */
    gap: 10px; /* Jarak antar fitur */
    text-align: left; /* Teks kiri */
}

.service-features span {
    font-size: 14px; /* Ukuran font */
    color: var(--gray); /* Warna teks */
}

/* ==================== PORTFOLIO SECTION ==================== */
.portfolio {
    padding: 80px 0; /* Padding atas bawah */
    background: var(--light); /* Background terang */
}

.portfolio-filters {
    display: flex; /* Flex horizontal */
    justify-content: center; /* Di tengah */
    gap: 15px; /* Jarak antar tombol */
    margin-bottom: 40px; /* Jarak bawah */
}

.filter-btn {
    padding: 8px 25px; /* Padding dalam */
    border: none; /* Menghilangkan border */
    background: white; /* Background putih */
    border-radius: 50px; /* Membuat oval */
    cursor: pointer; /* Kursor pointer */
    font-weight: 500; /* Ketebalan font */
    transition: all 0.3s; /* Animasi */
}

.filter-btn.active, .filter-btn:hover {
    background: var(--gradient); /* Background gradien */
    color: white; /* Warna teks putih */
}

.portfolio-grid {
    display: grid; /* CSS Grid */
    grid-template-columns: repeat(3, 1fr); /* 3 kolom */
    gap: 30px; /* Jarak antar item */
}

.portfolio-item {
    position: relative; /* Untuk overlay absolute */
    border-radius: 15px; /* Sudut melengkung */
    overflow: hidden; /* Menyembunyikan kelebihan konten */
    cursor: pointer; /* Kursor pointer */
}

.portfolio-image {
    position: relative; /* Untuk ikon play */
    width: 100%; /* Lebar penuh */
    height: 250px; /* Tinggi tetap */
    overflow: hidden; /* Menyembunyikan kelebihan */
}

.portfolio-image img {
    width: 100%; /* Lebar penuh */
    height: 100%; /* Tinggi penuh */
    object-fit: cover; /* Gambar menutupi area */
    transition: transform 0.5s; /* Animasi zoom */
}

.portfolio-item:hover .portfolio-image img {
    transform: scale(1.1); /* Zoom saat hover */
}

.portfolio-image i {
    position: absolute; /* Posisi absolut */
    top: 50%; /* Tengah vertikal */
    left: 50%; /* Tengah horizontal */
    transform: translate(-50%, -50%); /* Koreksi posisi */
    font-size: 48px; /* Ukuran ikon play */
    color: white; /* Warna putih */
    opacity: 0; /* Awalnya transparan */
    transition: opacity 0.3s; /* Animasi muncul */
    z-index: 2; /* Di atas gambar */
}

.portfolio-item:hover .portfolio-image i {
    opacity: 1; /* Muncul saat hover */
}

.portfolio-overlay {
    position: absolute; /* Posisi absolut */
    bottom: -100px; /* Mulai dari bawah luar */
    left: 0; /* Kiri 0 */
    right: 0; /* Kanan 0 */
    background: linear-gradient(to top, rgba(0,0,0,0.8), transparent); /* Gradien gelap */
    padding: 20px; /* Padding dalam */
    transition: bottom 0.3s; /* Animasi slide up */
}

.portfolio-item:hover .portfolio-overlay {
    bottom: 0; /* Muncul saat hover */
}

.portfolio-overlay h4 {
    color: white; /* Warna putih */
    margin-bottom: 5px; /* Jarak bawah */
}

.portfolio-overlay p {
    color: rgba(255,255,255,0.8); /* Warna putih transparan */
    font-size: 14px; /* Ukuran font */
}

/* ==================== PRICING SECTION ==================== */
.pricing {
    padding: 80px 0; /* Padding atas bawah */
    background: white; /* Background putih */
}

.pricing-grid {
    display: grid; /* CSS Grid */
    grid-template-columns: repeat(3, 1fr); /* 3 kolom */
    gap: 30px; /* Jarak antar card */
}

.pricing-card {
    background: white; /* Background putih */
    border-radius: 20px; /* Sudut melengkung */
    box-shadow: var(--shadow); /* Shadow */
    overflow: hidden; /* Menyembunyikan kelebihan */
    transition: transform 0.3s; /* Animasi */
    position: relative; /* Untuk badge */
}

.pricing-card:hover {
    transform: translateY(-5px); /* Efek naik */
    box-shadow: var(--shadow-lg); /* Shadow lebih besar */
}

.pricing-card.popular {
    border: 2px solid transparent; /* Border transparan */
    background: linear-gradient(white, white) padding-box, var(--gradient) border-box; /* Border gradien */
}

.pricing-header {
    padding: 30px; /* Padding dalam */
    text-align: center; /* Teks di tengah */
    background: var(--light); /* Background terang */
}

.pricing-header h3 {
    font-size: 28px; /* Ukuran judul */
    margin-bottom: 15px; /* Jarak bawah */
}

.price {
    margin-bottom: 15px; /* Jarak bawah */
}

.currency {
    font-size: 20px; /* Ukuran simbol mata uang */
    vertical-align: top; /* Sejajar atas */
}

.amount {
    font-size: 48px; /* Ukuran angka */
    font-weight: 800; /* Ketebalan font */
}

.period {
    font-size: 14px; /* Ukuran teks periode */
    color: var(--gray); /* Warna teks */
}

.pricing-features {
    list-style: none; /* Menghilangkan bullet */
    padding: 30px; /* Padding dalam */
}

.pricing-features li {
    padding: 10px 0; /* Padding atas bawah */
    display: flex; /* Flex untuk ikon dan teks */
    align-items: center; /* Vertikal tengah */
    gap: 10px; /* Jarak ikon dan teks */
    border-bottom: 1px solid #e2e8f0; /* Garis pemisah */
}

.pricing-features li:last-child {
    border-bottom: none; /* Menghilangkan garis di item terakhir */
}

.pricing-features i {
    width: 20px; /* Lebar ikon */
}

.pricing-features .fa-check {
    color: #10b981; /* Warna hijau untuk check */
}

.pricing-features .fa-times {
    color: #ef4444; /* Warna merah untuk times */
}

.pricing-card .btn {
    display: block; /* Block agar lebar penuh */
    margin: 0 30px 30px; /* Margin */
    text-align: center; /* Teks di tengah */
}

/* ==================== PROCESS SECTION ==================== */
.process {
    padding: 80px 0; /* Padding atas bawah */
    background: var(--light); /* Background terang */
}

.process-grid {
    display: grid; /* CSS Grid */
    grid-template-columns: repeat(4, 1fr); /* 4 kolom */
    gap: 30px; /* Jarak antar step */
}

.process-step {
    text-align: center; /* Teks di tengah */
    position: relative; /* Untuk garis penghubung */
}

/* Garis penghubung antar step (kecuali step terakhir) */
.process-step:not(:last-child)::after {
    content: ''; /* Konten kosong */
    position: absolute; /* Posisi absolut */
    top: 40px; /* Posisi vertikal */
    right: -50px; /* Posisi horizontal ke kanan */
    width: 60px; /* Lebar garis */
    height: 2px; /* Tinggi garis */
    background: var(--gradient); /* Warna gradien */
}

.step-number {
    width: 50px; /* Lebar lingkaran */
    height: 50px; /* Tinggi lingkaran */
    background: var(--gradient); /* Background gradien */
    color: white; /* Warna teks */
    border-radius: 50%; /* Membuat lingkaran */
    display: flex; /* Flex untuk centering */
    align-items: center; /* Vertikal tengah */
    justify-content: center; /* Horizontal tengah */
    font-size: 20px; /* Ukuran font */
    font-weight: 800; /* Ketebalan font */
    margin: 0 auto 20px; /* Auto untuk tengah, jarak bawah */
}

.step-icon {
    width: 80px; /* Lebar ikon container */
    height: 80px; /* Tinggi ikon container */
    background: white; /* Background putih */
    border-radius: 50%; /* Membuat lingkaran */
    display: flex; /* Flex untuk centering */
    align-items: center; /* Vertikal tengah */
    justify-content: center; /* Horizontal tengah */
    margin: 0 auto 20px; /* Auto untuk tengah, jarak bawah */
    box-shadow: var(--shadow); /* Shadow */
}

.step-icon i {
    font-size: 36px; /* Ukuran ikon */
    color: var(--primary); /* Warna ikon */
}

.process-step h3 {
    font-size: 20px; /* Ukuran judul */
    margin-bottom: 10px; /* Jarak bawah */
}

.process-step p {
    color: var(--gray); /* Warna teks */
    font-size: 14px; /* Ukuran font */
}

/* ==================== CONTACT SECTION ==================== */
.contact {
    padding: 80px 0; /* Padding atas bawah */
    background: white; /* Background putih */
}

.contact-wrapper {
    display: grid; /* CSS Grid */
    grid-template-columns: 1fr 1fr; /* 2 kolom sama lebar */
    gap: 50px; /* Jarak antar kolom */
}

/* Informasi kontak */
.contact-info .section-header {
    text-align: left; /* Teks kiri */
    margin-bottom: 30px; /* Jarak bawah */
}

.contact-details {
    margin-bottom: 30px; /* Jarak bawah */
}

.contact-item {
    display: flex; /* Flex horizontal */
    align-items: center; /* Vertikal tengah */
    gap: 20px; /* Jarak ikon dan teks */
    margin-bottom: 25px; /* Jarak antar item */
}

.contact-item i {
    width: 50px; /* Lebar ikon container */
    height: 50px; /* Tinggi ikon container */
    background: rgba(99, 102, 241, 0.1); /* Background transparan */
    border-radius: 50%; /* Membuat lingkaran */
    display: flex; /* Flex centering */
    align-items: center; /* Vertikal tengah */
    justify-content: center; /* Horizontal tengah */
    font-size: 20px; /* Ukuran ikon */
    color: var(--primary); /* Warna ikon */
}

.contact-item h4 {
    margin-bottom: 5px; /* Jarak bawah */
    font-size: 18px; /* Ukuran font */
}

.contact-item p {
    color: var(--gray); /* Warna teks */
}

/* Social media links */
.social-links {
    display: flex; /* Flex horizontal */
    gap: 15px; /* Jarak antar link */
}

.social-links a {
    width: 40px; /* Lebar link */
    height: 40px; /* Tinggi link */
    background: var(--light); /* Background terang */
    border-radius: 50%; /* Membuat lingkaran */
    display: flex; /* Flex centering */
    align-items: center; /* Vertikal tengah */
    justify-content: center; /* Horizontal tengah */
    color: var(--primary); /* Warna ikon */
    text-decoration: none; /* Menghilangkan garis bawah */
    transition: all 0.3s; /* Animasi */
}

.social-links a:hover {
    background: var(--gradient); /* Background gradien */
    color: white; /* Warna ikon putih */
    transform: translateY(-3px); /* Efek naik */
}

/* Form kontak */
.contact-form {
    background: var(--light); /* Background terang */
    padding: 40px; /* Padding dalam */
    border-radius: 20px; /* Sudut melengkung */
}

.form-group {
    margin-bottom: 20px; /* Jarak bawah */
}

.form-group input, 
.form-group select, 
.form-group textarea {
    width: 100%; /* Lebar penuh */
    padding: 12px 15px; /* Padding dalam */
    border: 1px solid #e2e8f0; /* Border abu-abu */
    border-radius: 10px; /* Sudut melengkung */
    font-family: inherit; /* Mengikuti font body */
    font-size: 16px; /* Ukuran font */
    transition: border-color 0.3s; /* Animasi */
}

.form-group input:focus, 
.form-group select:focus, 
.form-group textarea:focus {
    outline: none; /* Menghilangkan outline default */
    border-color: var(--primary); /* Border warna primary */
}

.form-message {
    margin-top: 15px; /* Jarak atas */
    padding: 10px; /* Padding dalam */
    border-radius: 10px; /* Sudut melengkung */
    display: none; /* Awalnya disembunyikan */
}

.form-message.success {
    background: #d1fae5; /* Background hijau muda */
    color: #065f46; /* Teks hijau gelap */
    display: block; /* Tampilkan */
}

.form-message.error {
    background: #fee2e2; /* Background merah muda */
    color: #991b1b; /* Teks merah gelap */
    display: block; /* Tampilkan */
}

/* ==================== FOOTER ==================== */
.footer {
    background: var(--dark); /* Background gelap */
    color: white; /* Warna teks putih */
    padding: 60px 0 20px; /* Padding atas besar */
}

.footer-grid {
    display: grid; /* CSS Grid */
    grid-template-columns: 2fr 1fr 1fr 1.5fr; /* 4 kolom dengan ukuran berbeda */
    gap: 40px; /* Jarak antar kolom */
    margin-bottom: 40px; /* Jarak bawah */
}

.footer-brand .logo {
    margin-bottom: 20px; /* Jarak bawah */
}

.footer-brand p {
    color: #94a3b8; /* Warna abu-abu terang */
    line-height: 1.8; /* Jarak antar baris */
}

.footer-links h4 {
    margin-bottom: 20px; /* Jarak bawah */
    font-size: 18px; /* Ukuran font */
}

.footer-links ul {
    list-style: none; /* Menghilangkan bullet */
}

.footer-links li {
    margin-bottom: 12px; /* Jarak antar link */
}

.footer-links a {
    color: #94a3b8; /* Warna abu-abu terang */
    text-decoration: none; /* Menghilangkan garis bawah */
    transition: color 0.3s; /* Animasi */
}

.footer-links a:hover {
    color: white; /* Warna putih saat hover */
}

.footer-newsletter p {
    color: #94a3b8; /* Warna abu-abu terang */
    margin-bottom: 15px; /* Jarak bawah */
}

.footer-newsletter form {
    display: flex; /* Flex horizontal */
    gap: 10px; /* Jarak input dan tombol */
}

.footer-newsletter input {
    flex: 1; /* Memenuhi ruang */
    padding: 12px; /* Padding dalam */
    border: none; /* Menghilangkan border */
    border-radius: 10px; /* Sudut melengkung */
    background: #1e293b; /* Background gelap */
    color: white; /* Teks putih */
}

.footer-newsletter button {
    background: var(--gradient); /* Background gradien */
    border: none; /* Menghilangkan border */
    padding: 0 20px; /* Padding kiri kanan */
    border-radius: 10px; /* Sudut melengkung */
    color: white; /* Warna ikon */
    cursor: pointer; /* Kursor pointer */
    transition: opacity 0.3s; /* Animasi */
}

.footer-newsletter button:hover {
    opacity: 0.9; /* Sedikit transparan saat hover */
}

.footer-bottom {
    text-align: center; /* Teks di tengah */
    padding-top: 20px; /* Padding atas */
    border-top: 1px solid #1e293b; /* Garis pemisah */
    color: #94a3b8; /* Warna abu-abu terang */
}

/* ==================== RESPONSIVE DESIGN ==================== */
/* Tablet (max-width: 992px) */
@media (max-width: 992px) {
    /* Hero section */
    .hero .container {
        flex-direction: column; /* Susun vertikal */
        text-align: center; /* Teks di tengah */
    }
    
    .hero-content p {
        margin-left: auto; /* Auto untuk tengah */
        margin-right: auto; /* Auto untuk tengah */
    }
    
    .hero-buttons {
        justify-content: center; /* Tombol di tengah */
    }
    
    .hero-stats {
        justify-content: center; /* Statistik di tengah */
    }
    
    /* Grid menjadi 2 kolom untuk tablet */
    .services-grid,
    .portfolio-grid,
    .pricing-grid,
    .process-grid {
        grid-template-columns: repeat(2, 1fr); /* 2 kolom */
    }
    
    /* Garis penghubung process disembunyikan di tablet */
    .process-step:not(:last-child)::after {
        display: none; /* Sembunyikan */
    }
    
    /* Footer grid */
    .footer-grid {
        grid-template-columns: repeat(2, 1fr); /* 2 kolom */
    }
}

/* Mobile (max-width: 768px) */
@media (max-width: 768px) {
    /* Navbar mobile */
    .hamburger {
        display: flex; /* Tampilkan hamburger */
    }
    
    .nav-menu {
        position: fixed; /* Posisi fixed */
        left: -100%; /* Di luar layar kiri */
        top: 70px; /* Di bawah navbar */
        flex-direction: column; /* Susun vertikal */
        background: white; /* Background putih */
        width: 100%; /* Lebar penuh */
        text-align: center; /* Teks di tengah */
        transition: 0.3s; /* Animasi slide */
        box-shadow: var(--shadow); /* Shadow */
        padding: 30px 0; /* Padding */
        gap: 20px; /* Jarak antar menu */
    }
    
    .nav-menu.active {
        left: 0; /* Muncul ke layar */
    }
    
    /* Section header */
    .section-header h2 {
        font-size: 28px; /* Ukuran lebih kecil */
    }
    
    /* Hero heading */
    .hero-content h1 {
        font-size: 32px; /* Ukuran lebih kecil */
    }
    
    /* Grid menjadi 1 kolom untuk mobile */
    .services-grid,
    .portfolio-grid,
    .pricing-grid,
    .process-grid,
    .contact-wrapper,
    .footer-grid {
        grid-template-columns: 1fr; /* 1 kolom */
    }
    
    /* Contact form padding lebih kecil */
    .contact-form {
        padding: 30px; /* Padding dikurangi */
    }
    
    /* Portfolio filter scroll horizontal */
    .portfolio-filters {
        overflow-x: auto; /* Scroll horizontal jika perlu */
        justify-content: flex-start; /* Mulai dari kiri */
        padding-bottom: 10px; /* Padding bawah */
    }
    
    /* Newsletter form di footer */
    .footer-newsletter form {
        flex-direction: column; /* Susun vertikal */
    }
    
    .footer-newsletter button {
        padding: 12px; /* Padding */
    }
}