/* ========================================================== */
/* == 1. IMPORT, RESET, & VARIABEL GLOBAL == */
/* ========================================================== */

/* Import Google Fonts (Poppins) */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700&display=swap');

/* Reset CSS dasar untuk konsistensi browser */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    /* Model box lebih intuitif */
}

/* Aktifkan smooth scroll untuk anchor links (#) */
html {
    scroll-behavior: smooth;
}

/* Pengaturan default untuk body */
body {
    font-family: 'Poppins', sans-serif;
    /* Font utama */
    background-color: #ffffff;
    /* Warna latar belakang default */
    color: #333;
    /* Warna teks default */
    line-height: 1.7;
    /* Jarak antar baris teks */
}

/* Kelas utilitas untuk mencegah scrolling (misal saat modal/sidebar aktif) */
body.no-scroll {
    overflow: hidden;
}

/* Variabel CSS Global untuk tema (warna, bayangan, dll.) */
:root {
    /* Warna utama */
    --entwickler-green: #76c715;
    --entwickler-blue: #00b09b;

    /* Warna Teks */
    --dark-text: #2c3e50;
    /* Teks gelap utama */
    --light-text: #6c757d;
    /* Teks abu-abu/sekunder */
    --white-color: #ffffff;
    /* Teks putih (biasanya di latar gelap) */

    /* Warna Latar */
    --background-light: #f8f9fa;
    /* Latar belakang abu-abu terang */
    --footer-dark: #1d2b38;
    /* Latar footer gelap */
    --footer-darker: #131c25;
    /* Latar footer lebih gelap (gradien) */

    /* Efek Bayangan (Box Shadow) */
    --box-shadow-light: 0 4px 15px rgba(0, 0, 0, 0.08);
    /* Bayangan halus default */
    --box-shadow-hover: 0 8px 25px rgba(0, 0, 0, 0.15);
    /* Bayangan saat hover */
    --box-shadow-modern: 0px 8px 32px rgba(44, 62, 80, 0.12);
    /* Bayangan modern (lebih menyebar) */
    --box-shadow-modern-hover: 0px 12px 40px rgba(44, 62, 80, 0.18);
    /* Bayangan modern saat hover */
}

/* ========================================================== */
/* == 2. KELAS UTILITAS & GAYA GLOBAL == */
/* ========================================================== */

/* Kontainer utama untuk membatasi lebar konten dan memberi padding */
.container {
    max-width: 1200px;
    /* Lebar maksimum konten */
    margin-left: auto;
    /* Memusatkan kontainer */
    margin-right: auto;
    overflow: visible;
    /* Izinkan elemen keluar sedikit jika perlu (misal: shadow) */
    padding-left: 2rem;
    /* Jarak sisi kiri */
    padding-right: 2rem;
    /* Jarak sisi kanan */
}

/* Pengaturan default untuk Judul (Headings) */
h1,
h2,
h3 {
    font-weight: 700;
    /* Tebal */
    margin-bottom: 1rem;
    /* Jarak bawah */
    color: var(--dark-text);
    /* Warna teks gelap */
}

h1 {
    font-size: 3.2rem;
    /* Ukuran font H1 */
    line-height: 1.2;
    /* Jarak baris H1 */
}

h2 {
    font-size: 2.5rem;
    /* Ukuran font H2 */
    text-align: center;
    /* Posisi teks H2 */
    margin-bottom: 3.5rem;
    /* Jarak bawah H2 (lebih besar untuk garis bawah) */
    position: relative;
    /* Diperlukan untuk pseudo-element ::after */
}

/* Garis bawah dekoratif untuk H2 */
h2::after {
    content: '';
    /* Wajib untuk pseudo-element */
    position: absolute;
    /* Posisi relatif terhadap H2 */
    bottom: -15px;
    /* Jarak di bawah teks H2 */
    left: 50%;
    /* Mulai dari tengah */
    transform: translateX(-50%);
    /* Geser ke kiri sejauh setengah lebar agar pas di tengah */
    width: 80px;
    /* Lebar garis */
    height: 4px;
    /* Ketebalan garis */
    background: linear-gradient(to right, var(--entwickler-green), var(--entwickler-blue));
    /* Warna gradien */
    border-radius: 2px;
    /* Sudut melengkung */
}

/* Pengaturan default untuk setiap bagian (Section) */
section {
    padding-top: 6rem;
    /* Jarak atas section */
    padding-bottom: 6rem;
    /* Jarak bawah section */
    overflow: hidden;
    /* Mencegah konten meluber keluar section */
}

/* Variasi section dengan latar belakang terang */
.section-light {
    background-color: var(--background-light);
}

/* ========================================================== */
/* == 3. BILAH NAVIGASI (NAVBAR) == */
/* ========================================================== */

.navbar {
    padding: 0.8rem 0;
    /* Padding atas/bawah */
    position: fixed;
    /* Tetap di posisi saat scroll */
    width: 100%;
    /* Lebar penuh */
    top: 0;
    /* Posisi di paling atas */
    z-index: 1000;
    /* Tampil di atas elemen lain */
    background: var(--white-color);
    /* Latar belakang awal */
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
    /* Transisi halus saat scroll */
}

.navbar .container {
    display: flex;
    /* Sejajarkan logo dan link */
    justify-content: space-between;
    /* Logo di kiri, link di kanan */
    align-items: center;
    /* Vertikal tengah */
}

/* Gaya tambahan saat navbar di-scroll (ditambah via JS) */
.navbar.scrolled {
    background-color: rgba(255, 255, 255, 0.95);
    /* Latar sedikit transparan */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    /* Bayangan halus */
    backdrop-filter: blur(8px);
    /* Efek blur (jika didukung browser) */
}

/* Logo di Navbar */
.navbar .logo img {
    height: 55px;
    /* Ukuran logo */
    transition: transform 0.3s ease;
    /* Transisi saat hover */
}

.navbar .logo img:hover {
    transform: scale(1.05);
    /* Sedikit membesar saat hover */
}

/* Link Navigasi Desktop */
.nav-links-desktop {
    display: flex;
    /* Tampilkan berjajar horizontal */
    list-style: none;
    /* Hilangkan bullet points */
    align-items: center;
    /* Vertikal tengah */
    gap: 2rem;
    /* Jarak antar link */
}

.nav-links-desktop li a {
    text-decoration: none;
    /* Hilangkan garis bawah */
    color: var(--dark-text);
    /* Warna teks link */
    font-weight: 600;
    /* Ketebalan font */
    position: relative;
    /* Untuk garis bawah animasi */
    transition: color 0.3s ease;
    /* Transisi warna saat hover */
    padding-bottom: 5px;
    /* Jarak untuk garis bawah */
}

/* Garis bawah animasi untuk link desktop (kecuali tombol CTA) */
.nav-links-desktop li a:not(.cta-button-nav)::after {
    content: '';
    /* Wajib */
    position: absolute;
    /* Posisi relatif terhadap link */
    width: 0%;
    /* Lebar awal (tersembunyi) */
    height: 3px;
    /* Ketebalan garis */
    background: linear-gradient(to right, var(--entwickler-green), var(--entwickler-blue));
    /* Warna gradien */
    left: 0;
    /* Mulai dari kiri */
    bottom: 0;
    /* Posisi di bawah link */
    transition: width 0.3s ease-out;
    /* Animasi lebar saat hover */
    border-radius: 2px;
    /* Sudut melengkung */
}

/* Efek hover pada link desktop (warna & garis bawah) */
.nav-links-desktop li a:hover:not(.cta-button-nav) {
    color: var(--entwickler-green);
    /* Ubah warna teks saat hover */
}

.nav-links-desktop li a:hover:not(.cta-button-nav)::after,
.nav-links-desktop li a.active:not(.cta-button-nav)::after {
    /* Juga aktifkan garis untuk link 'active' */
    width: 100%;
    /* Lebar penuh saat hover/active */
}

/* Tombol CTA (Call to Action) di Navbar */
.cta-button-nav {
    padding: 8px 22px;
    /* Padding tombol */
    background: linear-gradient(to right, var(--entwickler-green), var(--entwickler-blue));
    /* Latar gradien */
    color: var(--white-color) !important;
    /* Warna teks putih (penting agar tidak dioverride) */
    border-radius: 50px;
    /* Sudut sangat melengkung (pil) */
    font-weight: 600;
    /* Ketebalan font */
    font-size: 0.95rem;
    /* Ukuran font */
    transition: all 0.3s ease;
    /* Transisi halus */
    box-shadow: var(--box-shadow-light);
    /* Bayangan awal */
    /* Pastikan text-decoration none jika diperlukan (sudah tercover dari a) */
}

.cta-button-nav:hover {
    transform: translateY(-3px);
    /* Naik sedikit saat hover */
    box-shadow: var(--box-shadow-hover);
    /* Bayangan lebih jelas */
    color: var(--white-color) !important;
    /* Jaga warna teks putih */
}

/* Tombol Hamburger (Menu Mobile) - Tersembunyi di desktop */
.hamburger-menu {
    display: none;
    /* Sembunyikan di desktop */
    font-size: 1.8rem;
    /* Ukuran ikon */
    color: var(--dark-text);
    /* Warna ikon */
    background: none;
    /* Tanpa latar */
    border: none;
    /* Tanpa border */
    cursor: pointer;
    /* Kursor tangan */
    z-index: 1002;
    /* Di atas overlay tapi di bawah sidebar */
}

/* Sidebar Navigasi Mobile - Tersembunyi awal */
.mobile-sidebar {
    position: fixed;
    /* Tetap saat scroll */
    top: 0;
    /* Posisi atas */
    right: 0;
    /* Posisi kanan */
    width: 300px;
    /* Lebar sidebar */
    max-width: 80%;
    /* Batas lebar maks */
    height: 100vh;
    /* Tinggi penuh layar */
    background: var(--white-color);
    /* Latar putih */
    z-index: 1001;
    /* Di atas overlay */
    display: flex;
    /* Tata letak flex */
    flex-direction: column;
    /* Konten tersusun vertikal */
    box-shadow: -5px 0 15px rgba(0, 0, 0, 0.1);
    /* Bayangan di kiri */
    transform: translateX(100%);
    /* Sembunyikan ke kanan */
    transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1);
    /* Animasi slide */
}

/* Status aktif sidebar (ditambah via JS) */
.mobile-sidebar.active {
    transform: translateX(0);
    /* Munculkan dari kanan */
}

/* Header di dalam Sidebar Mobile */
.sidebar-header {
    display: flex;
    /* Sejajarkan logo & tombol close */
    justify-content: space-between;
    align-items: center;
    /* Vertikal tengah */
    padding: 0.8rem 1.5rem;
    /* Padding */
    border-bottom: 1px solid #eee;
    /* Garis pemisah bawah */
}

.sidebar-header img {
    height: 55px;
    /* Ukuran logo di sidebar */
}

/* Tombol Close di Sidebar */
.close-menu {
    font-size: 2rem;
    /* Ukuran ikon close */
    color: var(--dark-text);
    background: none;
    border: none;
    cursor: pointer;
}

/* Link Navigasi Mobile */
.nav-links-mobile {
    list-style: none;
    /* Hilangkan bullet */
    padding: 1rem 0;
    /* Padding atas/bawah */
}

.nav-links-mobile li a {
    display: flex;
    /* Sejajarkan ikon dan teks */
    align-items: center;
    /* Vertikal tengah */
    gap: 1rem;
    /* Jarak ikon dan teks */
    padding: 1rem 1.5rem;
    /* Padding link */
    text-decoration: none;
    /* Hilangkan garis bawah */
    color: var(--dark-text);
    /* Warna teks */
    font-size: 1.1rem;
    /* Ukuran font */
    font-weight: 600;
    /* Ketebalan font */
    transition: background-color 0.3s ease, color 0.3s ease;
    /* Transisi hover */
}

.nav-links-mobile li a:hover {
    background-color: var(--background-light);
    /* Latar saat hover */
    color: var(--entwickler-green);
    /* Warna teks saat hover */
}

.nav-links-mobile li a i {
    width: 20px;
    /* Lebar tetap untuk ikon */
    color: var(--light-text);
    /* Warna ikon */
    /* text-align: center; (Opsional jika ikon tidak rata) */
}

/* Overlay Latar Belakang Gelap (Saat Menu Mobile Aktif) */
.menu-overlay {
    position: fixed;
    /* Tetap menutupi layar */
    inset: 0;
    /* Menutupi seluruh viewport (top, right, bottom, left = 0) */
    background: rgba(0, 0, 0, 0.5);
    /* Warna hitam transparan */
    z-index: 1000;
    /* Di bawah sidebar tapi di atas konten utama */
    opacity: 0;
    /* Awalnya transparan */
    visibility: hidden;
    /* Awalnya tersembunyi */
    transition: opacity 0.4s ease, visibility 0.4s ease;
    /* Animasi fade */
}

/* Status aktif overlay (ditambah via JS) */
.menu-overlay.active {
    opacity: 1;
    /* Muncul */
    visibility: visible;
}

/* ========================================================== */
/* == 4. BAGIAN HERO (HALAMAN DEPAN) == */
/* ========================================================== */

.hero {
    padding-top: 140px;
    /* Jarak atas (setelah navbar fixed) */
    padding-bottom: 100px;
    /* Jarak bawah */
    background-color: #f9feff;
    /* Latar belakang sangat terang */
    display: flex;
    /* Untuk align-items */
    align-items: center;
    /* Vertikal tengah konten */
    min-height: 95vh;
    /* Tinggi minimal hampir se-layar */
    position: relative;
    /* Untuk elemen absolut di dalamnya */
    overflow: hidden;
    /* Cegah blob keluar */
}

/* Bentuk 'blob' dekoratif di latar belakang hero */
.hero-shape {
    position: absolute;
    /* Posisi bebas */
    border-radius: 50%;
    /* Bentuk lingkaran/oval */
    filter: blur(100px);
    /* Efek blur kuat */
    z-index: -1;
    /* Di belakang konten hero */
}

.hero-shape.shape-1 {
    width: 400px;
    height: 400px;
    background: rgba(118, 199, 21, 0.15);
    /* Warna hijau transparan */
    top: -100px;
    /* Posisi */
    left: -100px;
}

.hero-shape.shape-2 {
    width: 500px;
    height: 500px;
    background: rgba(0, 176, 155, 0.12);
    /* Warna biru transparan */
    bottom: -150px;
    /* Posisi */
    right: -150px;
}

/* Grid layout untuk hero (teks & gambar) */
.hero-grid {
    display: grid;
    /* Gunakan layout grid */
    grid-template-columns: 1.2fr 1fr;
    /* Lebar kolom (teks sedikit lebih lebar) */
    align-items: center;
    /* Vertikal tengah */
    gap: 4rem;
    /* Jarak antar kolom */
}

/* Konten Teks Hero */
.hero-text {
    text-align: center;
    /* Teks rata tengah */
    z-index: 1;
    /* Di atas blob */
    max-width: 720px;
    /* Batasi lebar teks agar mudah dibaca */
    margin-left: auto;
    /* Pusatkan blok teks dalam kolom gridnya */
    margin-right: auto;
}

.hero-text h1 {
    font-size: 3.5rem;
    /* Ukuran font H1 di hero */
    font-weight: 700;
    line-height: 1.25;
    margin-bottom: 1.5rem;
    /* Efek teks gradien */
    background: linear-gradient(to right, var(--entwickler-green), var(--entwickler-blue));
    -webkit-background-clip: text;
    /* Terapkan background ke teks (Webkit) */
    -webkit-text-fill-color: transparent;
    /* Buat warna teks asli transparan (Webkit) */
    background-clip: text;
    /* Standar */
    text-fill-color: transparent;
    /* Standar */
}

.hero-text p {
    font-size: 1.2rem;
    /* Ukuran font paragraf hero */
    margin: 1.5rem auto 2.5rem;
    /* Jarak atas/bawah, auto kiri/kanan untuk tetap tengah */
    color: var(--light-text);
    /* Warna teks sekunder */
    max-width: 550px;
    /* Batasi lebar paragraf */
}

/* Konten Gambar Hero */
.hero-image {
    display: flex;
    /* Untuk memusatkan img */
    justify-content: center;
    /* Horisontal tengah */
    align-items: center;
    /* Vertikal tengah */
}

.hero-image img {
    width: 100%;
    /* Lebar relatif thd parent */
    max-width: 450px;
    /* Batas lebar maks gambar */
    height: auto;
    /* Jaga rasio aspek */
    animation: float 4s ease-in-out infinite;
    /* Terapkan animasi mengambang */
}

/* ========================================================== */
/* == 5. ANIMASI KEYFRAMES == */
/* ========================================================== */

/* Animasi mengambang (naik-turun) */
@keyframes float {
    0% {
        transform: translateY(0px);
    }

    /* Posisi awal */
    50% {
        transform: translateY(-20px);
    }

    /* Posisi puncak (naik) */
    100% {
        transform: translateY(0px);
    }

    /* Kembali ke awal */
}

/* Animasi berdenyut (pulse) - Digunakan untuk indikator slider mobile */
@keyframes pulse {
    0% {
        transform: translateX(-50%) scale(1);
        opacity: 0.7;
    }

    50% {
        transform: translateX(-50%) scale(1.05);
        opacity: 1;
    }

    100% {
        transform: translateX(-50%) scale(1);
        opacity: 0.7;
    }
}

/* Animasi muncul (fade in) - Digunakan untuk tab content */
@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* ========================================================== */
/* == 6. GAYA TOMBOL (BUTTONS) == */
/* ========================================================== */

/* Tombol CTA utama (lebih besar dari di navbar) */
.cta-button {
    display: inline-block;
    /* Agar bisa diberi padding & margin */
    padding: 14px 35px;
    /* Padding tombol */
    background: linear-gradient(to right, var(--entwickler-green), var(--entwickler-blue));
    /* Latar gradien */
    color: var(--white-color);
    /* Warna teks */
    border-radius: 50px;
    /* Bentuk pil */
    text-decoration: none;
    /* Hilangkan garis bawah */
    font-weight: 700;
    /* Font tebal */
    font-size: 1.15rem;
    /* Ukuran font */
    transition: all 0.3s ease;
    /* Transisi hover */
    box-shadow: var(--box-shadow-light);
    /* Bayangan awal */
    border: 2px solid transparent;
    /* Border transparan (untuk konsistensi ukuran saat hover) */
}

.cta-button:hover {
    transform: translateY(-5px);
    /* Naik lebih banyak saat hover */
    box-shadow: var(--box-shadow-hover);
}

/* Tombol Outline (transparan dengan border) */
.btn-outline {
    display: inline-block;
    padding: 13px 35px;
    /* Padding (sedikit lebih kecil vertikal dari CTA) */
    background: transparent;
    /* Latar transparan */
    color: var(--dark-text);
    /* Warna teks */
    border-radius: 50px;
    /* Bentuk pil */
    text-decoration: none;
    font-weight: 600;
    border: 2px solid #ddd;
    /* Border abu-abu */
    transition: all 0.3s ease;
}

.btn-outline:hover {
    border-color: var(--entwickler-green);
    /* Ubah warna border saat hover */
    color: var(--entwickler-green);
    /* Ubah warna teks saat hover */
    transform: translateY(-3px);
    /* Sedikit naik */
}

/* Tombol Submit (biasanya untuk Form) */
.submit-btn {
    display: inline-block;
    /* Atau 'block'/'100%' jika ingin lebar penuh */
    padding: 15px 30px;
    border: none;
    /* Tanpa border */
    border-radius: 50px;
    cursor: pointer;
    font-size: 1.1rem;
    font-weight: 700;
    text-decoration: none;
    text-align: center;
    color: var(--white-color);
    background: linear-gradient(to right, var(--entwickler-green), var(--entwickler-blue));
    transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.submit-btn:hover {
    box-shadow: var(--box-shadow-hover);
    transform: translateY(-3px);
}

/* ========================================================== */
/* == 7. BAGIAN INTRO/PERKENALAN == */
/* ========================================================== */

.intro-grid {
    display: grid;
    /* Layout grid */
    grid-template-columns: 1fr 1fr;
    /* Dua kolom sama lebar */
    gap: 3rem;
    /* Jarak antar kolom */
    align-items: center;
    /* Vertikal tengah */
}

.intro-text h2 {
    text-align: left;
    /* Judul rata kiri */
    font-size: 2.8rem;
    /* Ukuran font */
    line-height: 1.3;
}

/* Sembunyikan garis bawah H2 di bagian intro */
.intro-text h2::after {
    display: none;
}

.intro-text p {
    font-size: 1.1rem;
    /* Ukuran font paragraf */
    color: var(--light-text);
    /* Warna teks sekunder */
    margin-bottom: 2rem;
    /* Jarak bawah */
}

/* Kontainer untuk tombol di bagian intro */
.intro-buttons {
    display: flex;
    /* Sejajarkan tombol */
    gap: 1rem;
    /* Jarak antar tombol */
    align-items: center;
    /* Vertikal tengah */
}

/* Gambar di bagian intro */
.intro-image img {
    width: 100%;
    /* Lebar penuh kolom */
    border-radius: 12px;
    /* Sudut melengkung */
    /* Mungkin tambahkan box-shadow jika diinginkan */
}

/* ========================================================== */
/* == 8. BAGIAN KEUNGGULAN (KARTU FITUR) == */
/* ========================================================== */

/* Hapus duplikat ID selector jika tidak perlu, .section-light sudah cukup */
/* #keunggulan { background-color: var(--white-color); } Dihapus, section biasa sudah putih */

.keunggulan-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    /* Tampilkan 3 kolom sama lebar */
    gap: 1.5rem;
    /* Jarak antar kartu */
}

/* Kartu fitur individual */
.keunggulan-card {
    padding: 2rem 1.5rem;
    /* Padding dalam kartu */
    background-color: var(--white-color);
    border-radius: 12px;
    /* Sudut melengkung */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    /* Transisi hover */
    box-shadow: var(--box-shadow-light);
    /* Bayangan awal */
    display: flex;
    /* Aktifkan flexbox */
    flex-direction: column;
    /* Konten tersusun vertikal */
    align-items: center;
    /* Horisontal tengah */
    text-align: center;
    /* Teks rata tengah */
}

.keunggulan-card:hover {
    transform: translateY(-10px);
    /* Naik saat hover */
    box-shadow: var(--box-shadow-hover);
}

/* Ikon di dalam kartu keunggulan */
.keunggulan-card .icon {
    font-size: 3rem;
    /* Ukuran ikon */
    color: var(--entwickler-green);
    /* Warna ikon */
    margin-bottom: 1rem;
    /* Jarak bawah ikon */
}

/* Judul (H4) di dalam kartu keunggulan */
.keunggulan-card h4 {
    font-size: 1.1rem;
    /* Ukuran font judul */
    color: var(--dark-text);
    margin-bottom: 0.5rem;
}

/* Paragraf di dalam kartu keunggulan */
.keunggulan-card p {
    font-size: 0.9rem;
    /* Ukuran font teks */
    color: var(--light-text);
    /* Warna teks sekunder */
    line-height: 1.6;
}

/* ========================================================== */
/* == 9. BAGIAN HARGA (PRICING) == */
/* ========================================================== */

/* Teks pengantar di atas tab harga */
.pricing-header-text {
    text-align: center;
    /* Rata tengah */
    max-width: 700px;
    /* Batasi lebar */
    margin: 0 auto 3rem auto;
    /* Pusatkan & beri jarak bawah */
}

.pricing-header-text p {
    color: var(--light-text);
    font-size: 1.1rem;
}

/* Kontainer tombol tab pilihan harga */
.pricing-tabs {
    display: flex;
    /* Sejajarkan tombol */
    justify-content: center;
    /* Pusatkan tombol */
    flex-wrap: wrap;
    /* Biarkan tombol turun baris jika tidak muat */
    gap: 1rem;
    /* Jarak antar tombol */
    margin-bottom: 3rem;
    /* Jarak bawah sebelum konten tab */
}

/* Tombol tab individual */
.pricing-tabs .tab-btn {
    background-color: #e9ecef;
    /* Latar abu-abu */
    color: var(--dark-text);
    /* Warna teks */
    border: none;
    /* Tanpa border */
    padding: 12px 25px;
    /* Padding tombol */
    border-radius: 50px;
    /* Bentuk pil */
    cursor: pointer;
    font-weight: 600;
    font-family: 'Poppins', sans-serif;
    /* Pastikan font sama */
    transition: all 0.3s ease;
    /* Transisi hover */
}

.pricing-tabs .tab-btn:hover {
    background-color: #ced4da;
    /* Warna lebih gelap saat hover */
    transform: translateY(-2px);
    /* Sedikit naik */
}

/* Status aktif tombol tab */
.pricing-tabs .tab-btn.active {
    background: linear-gradient(to right, var(--entwickler-green), var(--entwickler-blue));
    /* Latar gradien */
    color: var(--white-color);
    /* Teks putih */
    box-shadow: 0 4px 15px color-mix(in srgb, var(--entwickler-blue) 40%, transparent);
    /* Bayangan halus */
    transform: translateY(-2px);
}

/* Konten tab harga (tersembunyi awal) */
.tab-content {
    display: none;
    /* Sembunyikan */
}

/* Konten tab yang aktif (ditambah via JS) */
.tab-content.active {
    display: block;
    /* Tampilkan */
    animation: fadeIn 0.5s ease;
    /* Animasi fade-in */
}

/* Kontainer Slider (Swiper.js) di dalam tab */
.slider-container {
    position: relative;
    /* Untuk posisi tombol navigasi */
    padding: 1rem 40px;
    /* Padding agar tombol tidak menempel */
    /* Margin atau padding bawah mungkin diperlukan jika ada konten setelahnya */
}

/* Tombol Navigasi Swiper (Panah Kiri/Kanan) */
.swiper-button-next,
.swiper-button-prev {
    color: var(--entwickler-green);
    /* Warna panah */
    transform: scale(0.8);
    /* Perkecil sedikit */
    transition: color 0.3s ease, transform 0.3s ease;
    /* Transisi hover */
}

.swiper-button-next:hover,
.swiper-button-prev:hover {
    color: var(--entwickler-blue);
    /* Warna saat hover */
    transform: scale(0.9);
    /* Sedikit membesar saat hover */
}

/* Styling ikon panah (jika menggunakan FontAwesome/default Swiper) */
.swiper-button-next:after,
.swiper-button-prev:after {
    font-weight: 900 !important;
    /* Pastikan ikon tebal */
    font-size: 1.5rem;
    /* Sesuaikan ukuran ikon jika perlu */
}

/* Wrapper slide Swiper */
.swiper-wrapper {
    padding-bottom: 1rem;
    /* Jarak bawah jika ada pagination/scrollbar */
    /* align-items: stretch; Pindahkan ke JS atau per slider jika perlu */
}

/* Pastikan slide di bagian harga mulai dari atas (jika tingginya beda) */
#harga .swiper-wrapper {
    align-items: flex-start;
}

/* Slide individual Swiper */
.swiper-slide {
    height: auto;
    /* Tinggi otomatis sesuai konten */
    display: flex;
    /* Agar kartu di dalamnya bisa width 100% */
    /* width: auto; Biarkan Swiper yang mengatur */
}

/* Kartu Harga */
.pricing-card {
    background: var(--white-color);
    padding: 2.5rem 2rem;
    /* Padding dalam kartu */
    border-radius: 16px;
    /* Sudut melengkung besar */
    box-shadow: var(--box-shadow-modern);
    /* Bayangan modern */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
    /* Konten vertikal */
    border: 1px solid #f0f0f0;
    /* Border halus */
    width: 100%;
    /* Lebar penuh mengisi slide */
    text-align: center;
    /* Pusatkan teks header & tombol */
}

.pricing-card:hover {
    transform: translateY(-10px);
    box-shadow: var(--box-shadow-modern-hover);
}

/* Header Kartu Harga (Nama Paket & Harga) */
.pricing-header {
    text-align: center;
    /* Pastikan rata tengah */
    padding-bottom: 1rem;
    /* Jarak bawah sebelum garis */
    margin-bottom: 1.5rem;
    /* Jarak bawah setelah garis */
    position: relative;
    /* Untuk garis ::after */
}

/* Garis bawah di header kartu harga */
.pricing-header::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 80%;
    /* Lebar garis 80% dari header */
    height: 2px;
    background: linear-gradient(to right, var(--entwickler-green), var(--entwickler-blue));
    opacity: 0.5;
    /* Garis agak transparan */
}

/* Garis bawah lebih jelas untuk paket 'popular' */
.pricing-header.popular::after {
    opacity: 1;
}

.pricing-header h4 {
    font-size: 1.4rem;
    /* Ukuran nama paket */
    font-weight: 600;
    margin-bottom: 0.5rem;
}

/* Harga Paket */
.pricing-price {
    font-size: 2.5rem;
    /* Ukuran angka harga */
    font-weight: 700;
    margin: 0.5rem 0;
    color: var(--dark-text);
}

.pricing-price span {
    /* Untuk 'rb' atau 'jt' */
    font-size: 1rem;
    font-weight: 400;
}

/* Teks harga perpanjangan */
.renewal-price {
    font-size: 0.9rem;
    color: var(--light-text);
    margin-top: -0.5rem;
    /* Naik sedikit */
}

/* Daftar Fitur Utama */
.pricing-features {
    list-style: none;
    /* Hilangkan bullet */
    margin-bottom: 1rem;
    /* Jarak bawah sebelum tombol/fitur tambahan */
    font-size: 0.95rem;
    /* Ukuran font fitur */
    display: inline-block;
    /* Agar bisa di-center oleh text-align parent */
    text-align: left;
    /* Teks fitur tetap rata kiri */
    /* padding-left: 0; Sudah di reset * */
}

.pricing-features li {
    margin-bottom: 0.8rem;
    /* Jarak antar fitur */
    display: flex;
    /* Sejajarkan ikon dan teks */
    align-items: flex-start;
    /* Ikon dan teks mulai dari atas */
}

.pricing-features i {
    color: var(--entwickler-green);
    /* Warna ikon check */
    margin-right: 12px;
    /* Jarak ikon ke teks */
    font-size: 0.9rem;
    /* Ukuran ikon */
    flex-shrink: 0;
    /* Jangan biarkan ikon menyusut */
    margin-top: 4px;
    /* Sesuaikan posisi vertikal ikon */
}

/* Daftar Fitur Tambahan (Bisa dibuka/tutup) */
.extended-features {
    list-style: none;
    max-height: 0;
    /* Awalnya tersembunyi (tinggi 0) */
    overflow: hidden;
    /* Sembunyikan konten yang meluber */
    transition: max-height 0.5s ease-in-out, margin-top 0.5s ease-in-out, padding 0.5s ease;
    /* Transisi halus */
    padding-left: 0;
    /* Hapus padding default */
    margin-bottom: 1.5rem;
    /* Jarak bawah sebelum tombol utama */
    background-color: var(--background-light);
    /* Latar berbeda */
    padding: 0 1.25rem;
    /* Padding horizontal (vertikal diatur transisi) */
    border-radius: 12px;
    /* Sudut melengkung */
    border-top: 2px solid #e9ecef;
    /* Garis pemisah atas */
    text-align: left;
    /* Teks fitur rata kiri */
}

/* Status terbuka fitur tambahan (ditambah via JS) */
.pricing-card.expanded .extended-features {
    max-height: 500px;
    /* Tinggi maksimal saat terbuka (sesuaikan jika perlu) */
    margin-top: 1.5rem;
    /* Beri jarak atas saat terbuka */
    padding-top: 1.25rem;
    /* Tambahkan padding atas saat terbuka */
    padding-bottom: 1.25rem;
    /* Tambahkan padding bawah saat terbuka */
}

/* Tombol 'Toggle Detail' */
.toggle-details-btn {
    background: #fff;
    /* Latar putih */
    border: 1px solid #e0e5ec;
    /* Border halus */
    color: var(--light-text);
    /* Warna teks abu-abu */
    font-weight: 600;
    cursor: pointer;
    text-align: center;
    width: 100%;
    /* Lebar penuh */
    padding: 12px 0;
    /* Padding vertikal */
    margin-top: 1.5rem;
    /* Jarak atas */
    border-radius: 10px;
    /* Sudut melengkung */
    transition: all 0.3s ease;
    font-size: 0.95rem;
    display: flex;
    /* Sejajarkan teks dan ikon */
    justify-content: center;
    align-items: center;
}

.toggle-details-btn:hover {
    background-color: var(--background-light);
    color: var(--entwickler-blue);
    border-color: #d1d9e6;
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}

/* Ikon panah di tombol toggle */
.toggle-details-btn i {
    margin-left: 8px;
    /* Jarak dari teks */
    transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    /* Animasi putar */
}

/* Gaya tombol saat fitur terbuka */
.pricing-card.expanded .toggle-details-btn {
    background-color: #e9ecef;
    /* Latar berbeda saat aktif */
    color: var(--entwickler-blue);
    box-shadow: none;
    transform: translateY(0);
}

/* Putar ikon panah saat fitur terbuka */
.pricing-card.expanded .toggle-details-btn i {
    transform: rotate(180deg);
}

/* Tombol 'Pilih Paket' */
.pricing-button {
    margin-top: auto;
    /* Dorong ke bagian bawah kartu */
    width: 100%;
    /* Lebar penuh */
}

/* Styling item di dalam fitur tambahan */
.extended-features li {
    display: flex;
    align-items: flex-start;
    margin-bottom: 1rem;
    font-size: 0.9rem;
    color: var(--light-text);
}

.extended-features li:last-child {
    margin-bottom: 0;
    /* Hapus margin bawah item terakhir */
}

.extended-features li i {
    color: var(--entwickler-green);
    margin-right: 14px;
    font-size: 0.85rem;
    margin-top: 4px;
    flex-shrink: 0;
}


/* ========================================================== */
/* == 10. BAGIAN PORTFOLIO == */
/* ========================================================== */

/* Kontainer tombol filter */
.portfolio-filters {
    text-align: center;
    /* Pusatkan tombol */
    margin-bottom: 2.5rem;
    /* Jarak bawah sebelum grid */
}

/* Tombol filter individual */
.portfolio-filters button {
    background: none;
    /* Tanpa latar */
    border: 2px solid #ddd;
    /* Border abu-abu */
    border-radius: 50px;
    /* Bentuk pil */
    padding: 10px 25px;
    /* Padding tombol */
    margin: 5px 8px;
    /* Jarak antar tombol (vertikal & horizontal) */
    font: 600 1rem 'Poppins', sans-serif;
    /* Font */
    cursor: pointer;
    transition: all 0.3s ease;
    /* Transisi hover */
}

.portfolio-filters button:hover {
    border-color: var(--entwickler-green);
    /* Warna border hover */
    color: var(--entwickler-green);
    /* Warna teks hover */
}

/* Status aktif tombol filter */
.portfolio-filters button.active {
    background: linear-gradient(to right, var(--entwickler-green), var(--entwickler-blue));
    /* Latar gradien */
    color: var(--white-color);
    /* Teks putih */
    border-color: transparent;
    /* Hilangkan border */
}

/* Grid Portfolio (Menggunakan Flexbox untuk perataan item terakhir) */
.portfolio-grid {
    display: flex;
    /* Gunakan Flexbox */
    flex-wrap: wrap;
    /* Izinkan item turun baris */
    justify-content: center;
    /* Pusatkan item di setiap baris (termasuk yg terakhir) */
    gap: 2rem;
    /* Jarak antar item */
    max-width: 1200px;
    /* Batasi lebar grid */
    margin: 0 auto;
    /* Pusatkan grid di halaman */
}

/* Item Portfolio Individual */
.portfolio-item {
    aspect-ratio: 4 / 3;
    /* Paksa rasio aspek 4:3 */
    flex-grow: 0;
    /* Jangan membesar */
    flex-shrink: 0;
    /* Jangan mengecil */
    flex-basis: calc(33.333% - 1.5rem);
    /* Lebar dasar untuk 3 kolom (hitung ulang gap jika diubah) */
    /* Berikan sedikit penyesuaian pada flex-basis jika gap berubah */
    /* Contoh: Jika gap: 1rem -> flex-basis: calc(33.333% - 0.7rem); */

    position: relative;
    /* Untuk posisi overlay */
    overflow: hidden;
    /* Sembunyikan bagian gambar yg meluber saat zoom */
    border-radius: 12px;
    /* Sudut melengkung */
    box-shadow: var(--box-shadow-light);
    cursor: pointer;
    transition: transform 0.4s ease, opacity 0.4s ease, box-shadow 0.4s ease;
    /* Tambahkan transisi shadow */
}

/* Efek hover umum pada item portfolio */
#portfolio .portfolio-item:hover {
    /* Lebih spesifik ke #portfolio */
    transform: translateY(-5px);
    /* Sedikit naik */
    box-shadow: var(--box-shadow-hover);
    /* Bayangan lebih jelas */
}

/* Gambar di dalam item portfolio */
.portfolio-item img {
    width: 100%;
    /* Lebar penuh item */
    height: 100%;
    /* Tinggi penuh item */
    display: block;
    /* Hapus spasi bawah default */
    object-fit: cover;
    /* Penuhi area, potong sisa, jaga rasio */
    object-position: center;
    /* Fokus potongan di tengah */
    transition: transform 0.4s ease;
    /* Transisi zoom saat hover */
}

/* Efek zoom gambar saat item di-hover (spesifik #portfolio) */
#portfolio .portfolio-item:hover img {
    transform: scale(1.1);
    /* Zoom gambar */
}

/* Overlay Gelap saat item portfolio di-hover */
.portfolio-overlay {
    position: absolute;
    /* Tumpang tindih di atas gambar */
    inset: 0;
    /* Menutupi seluruh item */
    background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
    /* Gradien dari bawah */
    display: flex;
    flex-direction: column;
    /* Teks dari bawah */
    justify-content: flex-end;
    /* Dorong teks ke bawah */
    padding: 1.5rem;
    /* Padding teks */
    opacity: 0;
    /* Awalnya transparan */
    transition: opacity 0.4s ease;
    /* Transisi fade */
    pointer-events: none;
    /* Biarkan hover "tembus" ke gambar di bawahnya */
}

/* Munculkan overlay saat item di-hover (spesifik #portfolio) */
#portfolio .portfolio-item:hover .portfolio-overlay {
    opacity: 1;
    /* Muncul */
    pointer-events: auto;
    /* Aktifkan interaksi jika ada link di overlay */
}

/* Judul (H3) di dalam overlay */
.portfolio-overlay h3 {
    color: var(--white-color);
    /* Teks putih */
    margin-bottom: 0.25rem;
    /* Jarak bawah sedikit */
}

/* Kategori (span) di dalam overlay */
.portfolio-overlay span {
    color: var(--entwickler-green);
    /* Warna teks hijau */
    font-size: 0.9rem;
}

/* ========================================================== */
/* == 11. BAGIAN MITRA (CLIENT LOGO SLIDER) == */
/* ========================================================== */

#mitra {
    padding: 4rem 0;
    /* Padding lebih kecil */
    background-color: var(--background-light);
}

#mitra h2 {
    margin-bottom: 2.5rem;
    /* Jarak bawah judul */
}

/* Kontainer Swiper untuk logo mitra */
.swiper[data-swiper-id="mitra"] {
    width: 100%;
    height: 100px;
    /* Tinggi tetap untuk logo */
    overflow: hidden;
    /* Sembunyikan slide di luar area */
}

/* Wrapper Swiper untuk logo mitra */
.swiper[data-swiper-id="mitra"] .swiper-wrapper {
    display: flex;
    align-items: center;
    /* Vertikal tengah logo */
    /* transition-timing-function: linear !important; Dihapus, biarkan JS yg atur jika loop non-stop */
}

/* Slide logo mitra individual */
.swiper[data-swiper-id="mitra"] .swiper-slide {
    text-align: center;
    /* Pusatkan logo di dalam slide */
    width: auto;
    /* Lebar otomatis sesuai logo */
    opacity: 0.6;
    /* Logo agak transparan */
    transition: opacity 0.3s ease;
}

.swiper[data-swiper-id="mitra"] .swiper-slide:hover {
    opacity: 1;
    /* Lebih jelas saat hover */
}

/* Gambar logo mitra */
.swiper[data-swiper-id="mitra"] .swiper-slide img {
    max-height: 60px;
    /* Batas tinggi maks logo */
    width: auto;
    /* Lebar otomatis */
    filter: grayscale(100%);
    /* Hitam putih */
    transition: filter 0.3s ease;
    /* Transisi warna saat hover */
}

.swiper[data-swiper-id="mitra"] .swiper-slide:hover img {
    filter: grayscale(0%);
    /* Berwarna saat hover */
}

/* ========================================================== */
/* == 12. BAGIAN LAYANAN (SERVICES) == */
/* ========================================================== */

/* Grid untuk kartu layanan */
.services-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    /* 3 kolom */
    gap: 1.5rem;
}

/* Kartu layanan individual */
.service-card {
    background: var(--white-color);
    padding: 2.5rem 1.5rem;
    /* Padding lebih besar dari keunggulan */
    text-align: center;
    border-radius: 12px;
    box-shadow: var(--box-shadow-light);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    /* Flexbox */
    flex-direction: column;
    /* Vertikal */
}

.service-card:hover {
    transform: translateY(-10px);
    box-shadow: var(--box-shadow-hover);
}

.service-card .icon {
    font-size: 3rem;
    margin-bottom: 1rem;
    color: var(--entwickler-green);
}

.service-card h3 {
    margin-bottom: 0.5rem;
    font-size: 1.25rem;
}

.service-card p {
    font-size: 0.9rem;
    color: var(--light-text);
    /* Warna sekunder */
    flex-grow: 1;
    /* Biarkan paragraf mengisi sisa ruang (jika tinggi card beda) */
    line-height: 1.6;
    /* Jarak baris */
}


/* ========================================================== */
/* == 13. BAGIAN IKLAN/PROMOSI (MIS: GOOGLE ADS) == */
/* ========================================================== */

.ads-content {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    /* Kolom teks lebih lebar */
    gap: 4rem;
    align-items: center;
}

.ads-image img {
    width: 100%;
    border-radius: 12px;
}

.ads-text h3 {
    font-size: 1.8rem;
    /* text-align: left; Sudah default */
}

/* Daftar fitur/poin di bagian Ads */
.ads-list {
    list-style: none;
    /* Hilangkan bullet */
    margin-top: 1.5rem;
    /* padding-left: 0; Sudah di reset * */
}

.ads-list li {
    margin-bottom: 1rem;
    /* Jarak antar item */
    display: flex;
    /* Sejajarkan ikon dan teks */
    align-items: center;
    /* Vertikal tengah */
}

.ads-list i {
    /* Ikon checklist */
    color: var(--white-color);
    /* Warna ikon putih */
    background: linear-gradient(to right, var(--entwickler-green), var(--entwickler-blue));
    /* Latar gradien */
    width: 30px;
    /* Ukuran area ikon */
    height: 30px;
    font-size: 0.9rem;
    /* Ukuran ikon di dalam */
    border-radius: 50%;
    /* Lingkaran */
    display: inline-flex;
    /* Agar bisa diatur alignment */
    justify-content: center;
    /* Horisontal tengah ikon */
    align-items: center;
    /* Vertikal tengah ikon */
    margin-right: 1rem;
    /* Jarak ke teks */
    flex-shrink: 0;
    /* Jangan biarkan ikon mengecil */
}

/* ========================================================== */
/* == 14. BAGIAN FAQ (ACCORDION) == */
/* ========================================================== */

#faq {
    position: relative;
    /* Untuk overlay ::before */
    background-image: url('https://images.unsplash.com/photo-1516321497487-e288fb19713f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80');
    background-size: cover;
    /* Penuhi area */
    background-position: center;
    /* Fokus di tengah */
    background-repeat: no-repeat;
    background-attachment: fixed;
    /* Efek parallax saat scroll */
    z-index: 1;
    /* Pastikan di atas elemen background lain */
}

/* Overlay gelap untuk FAQ agar teks terbaca */
#faq::before {
    content: '';
    position: absolute;
    inset: 0;
    /* Menutupi seluruh section */
    background: rgba(13, 28, 37, 0.85);
    /* Warna gelap transparan */
    z-index: -1;
    /* Di belakang konten FAQ */
}

/* Judul H2 di FAQ */
#faq h2 {
    color: var(--white-color);
    /* Teks putih */
}

/* Garis bawah H2 di FAQ */
#faq h2::after {
    background: linear-gradient(to right, var(--entwickler-green), var(--entwickler-blue));
    /* Warna gradien */
}

/* Kontainer Accordion */
.faq-container {
    max-width: 800px;
    /* Batasi lebar accordion */
    margin: auto;
    /* Pusatkan */
}

/* Item FAQ individual */
.faq-item {
    background-color: var(--white-color);
    margin-bottom: 1rem;
    /* Jarak antar item */
    border-radius: 8px;
    /* Sudut melengkung */
    box-shadow: var(--box-shadow-light);
    overflow: hidden;
    /* Sembunyikan jawaban saat tertutup */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    /* Transisi hover */
}

.faq-item:hover {
    transform: scale(1.02);
    /* Sedikit membesar saat hover */
    box-shadow: var(--box-shadow-hover);
}

/* Status aktif item FAQ (saat terbuka) */
.faq-item.active {
    /* transform: scale(1.03); (Opsional: perbesar lagi saat aktif) */
    box-shadow: var(--box-shadow-hover);
    /* Bayangan lebih jelas saat aktif */
}

/* Tombol Pertanyaan */
.faq-question {
    width: 100%;
    /* Lebar penuh */
    padding: 1.25rem 1.5rem;
    /* Padding */
    display: flex;
    /* Sejajarkan teks dan ikon */
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    background: none;
    /* Tanpa latar */
    border: none;
    /* Tanpa border */
    text-align: left;
    /* Teks rata kiri */
    font-family: 'Poppins', sans-serif;
    font-size: 1.1rem;
    /* Ukuran font pertanyaan */
    font-weight: 600;
    color: var(--dark-text);
}

/* Ikon panah di tombol pertanyaan */
.faq-question i {
    font-size: 1.2rem;
    /* Ukuran ikon */
    color: var(--entwickler-blue);
    /* Warna ikon */
    transition: transform 0.3s ease-in-out;
    /* Animasi putar */
}

/* Putar ikon saat item aktif/terbuka */
.faq-item.active .faq-question i {
    transform: rotate(180deg);
}

/* Kontainer Jawaban (tersembunyi awal) */
.faq-answer {
    max-height: 0;
    /* Tinggi 0 saat tertutup */
    overflow: hidden;
    /* Sembunyikan konten */
    transition: max-height 0.4s ease-in-out, padding 0.4s ease;
    /* Transisi buka/tutup */
}

/* Paragraf Jawaban */
.faq-answer p {
    padding: 0 1.5rem 1.25rem;
    /* Padding (tanpa padding atas krn transisi) */
    color: var(--light-text);
    line-height: 1.8;
    /* Jarak baris lebih besar */
}

/* Status aktif jawaban (terbuka) - tinggi diatur via JS */
/* .faq-item.active .faq-answer { max-height: 500px; } (Dihapus, dikontrol JS) */

/* ========================================================== */
/* == 15. BAGIAN TIM (TEAM) == */
/* ========================================================== */

/* Kartu Tim */
.team-card {
    background: var(--white-color);
    border-radius: 16px;
    box-shadow: var(--box-shadow-modern);
    text-align: center;
    overflow: hidden;
    /* Agar gambar tidak keluar dari border-radius */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
    /* Konten vertikal */
    width: 100%;
    /* Lebar mengisi slide */
    border: 1px solid #f0f0f0;
    /* height: 100%; (Dihapus, biarkan tinggi auto atau diatur align-items:stretch wrapper) */
}

.team-card:hover {
    transform: translateY(-10px);
    box-shadow: var(--box-shadow-modern-hover);
}

/* Kontainer Gambar Tim */
.team-image {
    position: relative;
    /* Untuk posisi absolut img */
    overflow: hidden;
    /* Sembunyikan zoom gambar */
    aspect-ratio: 1 / 1.25;
    /* Rasio aspek gambar (lebar 1, tinggi 1.25) */
    border-bottom: 4px solid var(--entwickler-green);
    /* Garis bawah hijau */
}

/* Gambar Tim */
.team-image img {
    position: absolute;
    /* Posisi bebas di dalam .team-image */
    inset: 0;
    /* Memenuhi kontainer */
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Penuhi area, potong */
    object-position: center top;
    /* Fokus potongan di tengah-atas (wajah) */
    transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    /* Transisi zoom */
}

.team-card:hover .team-image img {
    transform: scale(1.08);
    /* Efek zoom saat hover kartu */
}

/* Konten Teks di Kartu Tim */
.team-content {
    padding: 1.5rem;
    /* Padding konten */
    flex-grow: 1;
    /* Biarkan mengisi sisa ruang vertikal */
    display: flex;
    /* Aktifkan flex */
    flex-direction: column;
    /* Konten vertikal */
    text-align: center;
    /* Teks rata tengah */
}

.team-content h3 {
    /* Nama Tim */
    font-size: 1.25rem;
    color: var(--dark-text);
    margin-bottom: 0.25rem;
    /* Jarak bawah sedikit */
}

/* Jabatan Tim */
.team-role {
    color: var(--entwickler-blue);
    /* Warna biru */
    font-weight: 600;
    font-size: 0.8rem;
    /* Lebih kecil */
    text-transform: uppercase;
    /* Huruf besar semua */
    letter-spacing: 0.5px;
    /* Sedikit jarak antar huruf */
    margin-bottom: auto;
    /* Dorong ikon sosial ke bawah */
}

/* Ikon Sosial Media Tim */
.team-socials {
    margin-top: 1.25rem;
    /* Jarak atas */
    padding-top: 1.25rem;
    /* Jarak atas (padding) */
    border-top: 1px solid #f0f0f0;
    /* Garis pemisah atas */
}

.team-socials a {
    /* Link ikon sosial */
    color: var(--light-text);
    /* Warna ikon abu-abu */
    margin: 0 0.6rem;
    /* Jarak antar ikon */
    font-size: 1.2rem;
    /* Ukuran ikon */
    text-decoration: none;
    transition: color 0.3s ease, transform 0.3s ease;
    /* Transisi hover */
    display: inline-block;
    /* Agar bisa di-transform */
}

.team-socials a:hover {
    color: var(--entwickler-blue);
    /* Warna ikon saat hover */
    transform: translateY(-3px);
    /* Naik sedikit */
}

/* ========================================================== */
/* == 16. BAGIAN KONTAK (FORM & INFO) == */
/* ========================================================== */

.contact-wrapper {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    /* Kolom form lebih lebar */
    gap: 4rem;
    /* Jarak antar kolom */
    /* align-items: start; (Jika ingin konten mulai dari atas) */
}

/* Input dan Textarea pada Form Kontak */
.contact-form input,
.contact-form textarea {
    width: 100%;
    /* Lebar penuh */
    padding: 15px;
    /* Padding dalam */
    margin-bottom: 1rem;
    /* Jarak bawah */
    border: 2px solid #ddd;
    /* Border abu-abu */
    border-radius: 8px;
    /* Sudut melengkung */
    font: 1rem 'Poppins', sans-serif;
    /* Ukuran & jenis font */
    transition: border-color 0.3s ease;
    /* Transisi border saat fokus */
}

.contact-form input:focus,
.contact-form textarea:focus {
    outline: none;
    /* Hilangkan outline default */
    border-color: var(--entwickler-green);
    /* Ubah warna border saat fokus */
}

.contact-form textarea {
    resize: vertical;
    /* Izinkan resize vertikal */
    min-height: 150px;
    /* Tinggi minimal textarea */
}

/* Judul (H3) di Info Kontak */
.contact-info h3 {
    font-size: 1.8rem;
    /* text-align: left; Sudah default */
}

/* Paragraf Info Kontak (Alamat, Email, Telepon) */
.contact-info p {
    display: flex;
    /* Sejajarkan ikon dan teks */
    align-items: flex-start;
    /* Mulai dari atas */
    margin-bottom: 1.5rem;
    /* Jarak antar info */
}

/* Ikon di Info Kontak */
.contact-info i {
    font-size: 1.2rem;
    /* Ukuran ikon */
    margin-right: 1rem;
    /* Jarak ke teks */
    margin-top: 5px;
    /* Sesuaikan posisi vertikal */
    color: var(--entwickler-green);
    /* Warna ikon */
    width: 20px;
    /* Beri lebar tetap agar teks rata (opsional) */
    text-align: center;
    /* Pusatkan ikon jika diberi lebar (opsional) */
}

/* Kontainer Peta Google Maps */
.map-container {
    border-radius: 12px;
    /* Sudut melengkung */
    overflow: hidden;
    /* Agar iframe mengikuti radius */
    box-shadow: var(--box-shadow-light);
    height: 250px;
    /* Tinggi peta */
    margin-top: 2rem;
    /* Jarak dari info kontak di atasnya */
}

.map-container iframe {
    width: 100%;
    height: 100%;
    border: 0;
    /* Hapus border default iframe */
}


/* ========================================================== */
/* == 17. BAGIAN FOOTER == */
/* ========================================================== */

.footer {
    /* Bentuk gelombang di atas footer menggunakan clip-path */
    clip-path: path('M0,50 C250,100 450,0 720,50 C990,100 1190,0 1440,50 V1000 H0 Z');
    background: radial-gradient(circle at 15% 15%, color-mix(in srgb, var(--entwickler-blue) 25%, transparent), transparent 40%),
        linear-gradient(135deg, var(--footer-dark), var(--footer-darker));
    /* Latar gradien kompleks */
    color: var(--white-color);
    /* Warna teks putih */
    padding: 8rem 0 4rem;
    /* Padding atas besar (karena clip-path), bawah standar */
    font-size: 0.95rem;
    /* Ukuran font default footer */
    margin-top: -50px;
    /* Tarik ke atas agar menutupi bagian bawah section sebelumnya */
    position: relative;
    /* Tambahkan agar tidak tertutup elemen lain */
    z-index: 10;
    /* Pastikan di atas elemen lain */
}

/* Grid konten footer */
.footer-content {
    display: grid;
    grid-template-columns: 2fr 1fr 1.5fr;
    /* Lebar kolom: Logo | Nav | Kontak */
    gap: 2.5rem;
    /* Jarak antar kolom */
}

/* Kolom Footer (untuk animasi) */
.footer-col {
    opacity: 0;
    /* Awalnya transparan (untuk animasi) */
    transform: translateY(40px);
    /* Awalnya sedikit di bawah (untuk animasi) */
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
    /* Transisi animasi */
}

/* Delay animasi untuk setiap kolom (saat footer.visible ditambahkan via JS) */
.footer.visible .footer-col:nth-child(1) {
    transition-delay: 0.1s;
}

.footer.visible .footer-col:nth-child(2) {
    transition-delay: 0.2s;
}

.footer.visible .footer-col:nth-child(3) {
    transition-delay: 0.3s;
}

/* Status visible kolom footer */
.footer.visible .footer-col {
    opacity: 1;
    /* Muncul */
    transform: translateY(0);
    /* Kembali ke posisi asli */
}

/* Logo di Footer */
.footer-logo img {
    height: 60px;
    /* Ukuran logo */
    margin-bottom: 1rem;
    /* Jarak bawah */
}

/* Paragraf di bawah logo */
.footer-col p {
    opacity: 0.8;
    /* Sedikit transparan */
    padding-right: 1rem;
    /* Beri jarak kanan agar tidak terlalu lebar */
    /* text-align: left; sudah default */
}

/* Judul (H4) di kolom Navigasi & Kontak */
.footer-content h4 {
    color: var(--entwickler-green);
    /* Warna hijau */
    font-size: 1.2rem;
    margin-bottom: 1rem;
}

/* Daftar link/info di footer */
.footer-content ul {
    list-style: none;
    /* Hilangkan bullet */
    /* padding-left: 0; Sudah di reset * */
}

.footer-content ul li {
    margin-bottom: 0.7rem;
    /* Jarak antar item */
    display: flex;
    /* Sejajarkan ikon (jika ada) dan teks */
    align-items: flex-start;
}

/* Link di footer */
.footer-content ul li a {
    color: var(--white-color);
    text-decoration: none;
    transition: all 0.3s ease;
    opacity: 0.8;
}

.footer-content ul li a:hover {
    color: var(--entwickler-blue);
    /* Warna hover biru */
    opacity: 1;
    padding-left: 8px;
    /* Sedikit geser ke kanan saat hover */
}

/* Bagian bawah footer (copyright) */
.footer-bottom {
    text-align: center;
    /* Teks rata tengah */
    margin-top: 3rem;
    /* Jarak dari konten di atasnya */
    padding-top: 2rem;
    /* Jarak dari garis pemisah */
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    /* Garis pemisah transparan */
    opacity: 0.8;
    /* Teks agak transparan */
}

/* Ikon Sosial Media di bawah logo footer */
.social-icons a {
    color: white;
    margin-right: 15px;
    /* Jarak antar ikon */
    font-size: 1.3rem;
    /* Ukuran ikon */
    transition: all 0.3s ease;
    display: inline-block;
    /* Agar bisa di-transform */
}

.social-icons a:hover {
    color: var(--entwickler-green);
    /* Warna hover hijau */
    transform: scale(1.2) translateY(-3px);
    /* Membesar & naik */
}

/* ========================================================== */
/* == 18. TOMBOL KEMBALI KE ATAS (BACK TO TOP) == */
/* ========================================================== */

.back-to-top {
    position: fixed;
    /* Tetap di layar saat scroll */
    bottom: 25px;
    /* Jarak dari bawah */
    right: 25px;
    /* Jarak dari kanan */
    background: linear-gradient(45deg, var(--entwickler-green), var(--entwickler-blue));
    /* Latar gradien */
    color: var(--white-color);
    /* Warna ikon putih */
    width: 50px;
    /* Ukuran tombol */
    height: 50px;
    border-radius: 50%;
    /* Lingkaran */
    display: flex;
    /* Untuk memusatkan ikon */
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    /* Ukuran ikon panah */
    text-decoration: none;
    z-index: 100;
    /* Di atas sebagian besar elemen */
    opacity: 0;
    /* Awalnya transparan */
    visibility: hidden;
    /* Awalnya tersembunyi */
    transform: translateY(20px);
    /* Awalnya sedikit di bawah */
    transition: all 0.4s ease;
    /* Transisi muncul/hilang */
}

/* Status visible tombol (ditambah via JS) */
.back-to-top.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.back-to-top:hover {
    transform: translateY(-5px);
    /* Naik sedikit saat hover */
    /* Tambahkan box-shadow jika diinginkan */
}

/* ========================================================== */
/* == 19. RESPONSIVE DESIGN (MEDIA QUERIES) == */
/* ========================================================== */

/* -- Ukuran Layar: Large Laptops & Kecil -- */
@media(max-width: 1100px) {

    /* Sedikit kurangi jarak link navbar */
    .nav-links-desktop {
        gap: 1.5rem;
    }

    .nav-links-desktop li {
        /* margin-left: 1.5rem; Dihapus, gunakan gap pada parent */
    }
}

/* -- Ukuran Layar: Medium Devices (Tablet Landscape & Portrait) -- */
@media(max-width: 992px) {

    /* --- Navbar --- */
    .nav-links-desktop {
        display: none;
    }

    /* Sembunyikan link desktop */
    .hamburger-menu {
        display: block;
    }

    /* Tampilkan ikon hamburger */

    /* --- Layout Grid Utama --- */
    /* Ubah grid 2 kolom menjadi 1 kolom */
    .hero-grid,
    .intro-grid,
    .ads-content,
    .contact-wrapper {
        grid-template-columns: 1fr;
        gap: 2rem;
        /* Kurangi gap */
    }

    /* --- Hero Section --- */
    .hero-text h1 {
        font-size: 2.8rem;
    }

    /* Perkecil H1 */
    .hero-image {
        display: none;
    }

    /* Sembunyikan gambar hero */
    .hero-text {
        text-align: center;
    }

    /* Pastikan teks tetap tengah */

    /* --- Intro Section --- */
    .intro-text {
        text-align: center;
    }

    .intro-text h2 {
        font-size: 2.2rem;
        text-align: center;
    }

    .intro-text p {
        text-align: center;
    }

    .intro-buttons {
        justify-content: center;
    }

    /* Pusatkan tombol */
    .intro-image {
        display: none;
    }

    /* Sembunyikan gambar intro */

    /* --- Ads Section --- */
    .ads-text {
        text-align: center;
    }

    .ads-list {
        display: inline-block;
        text-align: left;
        margin-top: 1.5rem;
    }

    /* Pusatkan list tapi teks rata kiri */
    .ads-image {
        display: none;
    }

    /* Sembunyikan gambar ads */

    /* --- Keunggulan, Layanan --- */
    /* Ubah grid 3 kolom menjadi 2 kolom */
    .keunggulan-grid,
    .services-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* --- Portfolio --- */
    /* Sesuaikan basis flex untuk 2 kolom */
    .portfolio-item {
        flex-basis: calc(50% - 1rem);
        /* Sesuaikan gap jika perlu */
    }

    .portfolio-filters button {
        margin: 5px;
    }

    /* Jaga jarak tombol filter */

    /* --- Kontak --- */
    /* Contact wrapper sudah 1 kolom */

    /* --- Footer --- */
    /* Ubah grid 3 kolom menjadi 1 kolom */
    .footer-content {
        grid-template-columns: 1fr;
        text-align: center;
        /* Pusatkan konten kolom */
    }

    .footer-col p {
        padding-right: 0;
    }

    /* Hapus padding kanan */
    .footer-content ul {
        padding-left: 0;
    }

    /* Hapus padding kiri jika ada */
    .footer-content ul li {
        justify-content: center;
        /* Pusatkan item list */
        /* Pastikan ikon tetap di kiri jika diinginkan */
        /* display: inline-flex; align-items: flex-start; */
    }

    .social-icons {
        margin-top: 1.5rem;
    }

    /* Pastikan jarak ikon sosial */

}

/* Akhir @media(max-width: 992px) */


/* -- Ukuran Layar: Small Devices (Mobile Phones) -- */
@media(max-width: 768px) {

    /* --- Umum --- */
    .container {
        padding: 0 1rem;
    }

    /* Kurangi padding sisi kontainer */
    h1 {
        font-size: 2.5rem;
    }

    /* Perkecil H1 */
    .hero-text h1 {
        font-size: 2.5rem;
    }

    h2 {
        font-size: 1.8rem;
        margin-bottom: 2.5rem;
    }

    /* Perkecil H2 & margin */
    h2::after {
        width: 60px;
        height: 3px;
        bottom: -10px;
    }

    /* Perkecil garis bawah H2 */
    section {
        padding: 4rem 0;
    }

    /* Kurangi padding section */

    /* --- Grid Layouts (Keunggulan, Layanan) --- */
    /* Ubah grid 2 kolom menjadi 1 kolom */
    .keunggulan-grid,
    .services-grid {
        grid-template-columns: 1fr;
    }

    /* --- Portfolio --- */
    /* Sesuaikan basis flex untuk 1 kolom */
    .portfolio-item {
        flex-basis: 95%;
        /* Lebar hampir penuh */
    }

    /* --- Slider (Harga, Tim) --- */
    .slider-container {
        padding: 0;
        /* Hapus padding sisi */
        position: relative;
        padding-bottom: 40px;
        /* Ruang untuk indikator geser */
    }

    /* Indikator geser untuk slider di mobile */
    .slider-container::after {
        content: '‹ Geser ›';
        position: absolute;
        bottom: 0px;
        left: 50%;
        transform: translateX(-50%);
        background: rgba(44, 62, 80, 0.1);
        color: var(--dark-text);
        padding: 5px 15px;
        border-radius: 20px;
        font-size: 0.8rem;
        font-weight: 600;
        z-index: 10;
        animation: pulse 2s infinite ease-in-out;
        /* Terapkan animasi pulse */
    }

    /* Sembunyikan panah navigasi slider */
    .swiper-button-next,
    .swiper-button-prev {
        display: none;
    }

    /* --- Sembunyikan Gambar yang Kurang Penting --- */
    /* Gambar hero, intro, ads sudah disembunyikan di breakpoint sebelumnya */

    /* --- Kartu (Harga, Tim) --- */
    /* Sesuaikan padding kartu */
    .pricing-card,
    .team-card {
        padding: 2rem 1.5rem;
    }

    .team-content {
        padding: 1.25rem;
    }

    /* Sesuaikan ukuran font dalam kartu */
    .keunggulan-card h4,
    .service-card h3,
    .team-content h3,
    .pricing-header h4 {
        font-size: 1.1rem;
    }

    /* --- FAQ --- */
    /* Matikan background-attachment fixed di mobile (kinerja & tampilan) */
    #faq {
        background-attachment: scroll;
        /* background-size: cover; (Sudah ada) */
        /* background-position: center; (Sudah ada) */
    }

    /* --- Kontak --- */
    /* Layout contact-wrapper sudah 1 kolom */
    .contact-wrapper {
        gap: 2rem;
    }

    /* Kurangi jarak */

}

/* Akhir @media(max-width: 768px) */


/* ========================================================== */
/* == 20. PERBAIKAN KHUSUS & OVERRIDES == */
/* ========================================================== */

/* Perbaikan lebar kartu untuk tab 'Custom' di bagian Harga */
#custom .swiper-wrapper {
    justify-content: center;
}

/* Pusatkan slide jika hanya 1 */
#custom .swiper-slide {
    width: auto;
    max-width: 350px;
    flex-shrink: 0;
}

/* Atur lebar slide custom */
#custom .pricing-card {
    width: 100%;
}

/* Kartu mengisi slide */
#custom .swiper-button-next,
#custom .swiper-button-prev {
    display: none;
}

/* Sembunyikan navigasi custom */
#custom .slider-container::after {
    display: none;
}

/* Sembunyikan indikator geser custom */

/* Perbaikan Hover Portfolio agar tidak bocor (sudah ditambahkan di section 10) */
/* Pastikan selector hover spesifik ke #portfolio */