/* CSS Reset & Variables */
:root {
	--primary-blue: #0056b3;
	--secondary-blue: #007bff;
	--light-blue: #e9f5ff;
	--white: #ffffff;
	--dark-text: #333333;
	--gray-text: #666666;
	--light-gray: #f4f7f6;
}

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

body {
	color: var(--dark-text);
	line-height: 1.6;
	background-color: var(--light-gray);
}

/* Navbar */
header {
    background-color: transparent; /* Awalnya transparan */
    padding: 20px 50px;
    position: fixed; /* Berubah menjadi fixed agar menimpa section hero di bawahnya */
    width: 100%;
    top: 0;
    left: 0;
    z-index: 1000;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: background-color 0.3s ease, box-shadow 0.3s ease; /* Animasi transisi transparan ke putih */
}

.tx-bold {
	font-weight: bold;
}

/* Class tambahan yang akan dipicu oleh JavaScript saat layar di-scroll */
header.scrolled {
    background-color: var(--white);
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.logo {
	font-size: 24px;
	font-weight: bold;
	color: white;
	text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

.logo-scrolled {
	font-size: 24px;
	font-weight: bold;
	color: var(--primary-blue);
	text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

.logo-scrolled span {
	color: var(--secondary-blue);
}


/* Hero Section */
.hero {
    height: 100vh; /* Mengisi penuh tinggi layar */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 0 20px;
    
    /* Background Image dengan efek Parallax dan Overlay Warna Hitam agar teks tetap terbaca */
    background-image: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.5)), url('gbr/img-bg.jpg');
    background-attachment: fixed; /* Kunci utama dari efek Parallax kedalaman */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    color: var(--white);
}

.hero h1 {
    font-size: 48px;
    margin-bottom: 20px;
    max-width: 900px;
}

.hero p {
    font-size: 18px;
    max-width: 800px;
    margin: 0 auto 30px;
    opacity: 0.9;
}

.btn {
	background-color: var(--white);
	color: var(--primary-blue);
	padding: 15px 30px;
	text-decoration: none;
	font-weight: bold;
	border-radius: 5px;
	font-size: 16px;
	transition: 0.3s;
	display: inline-block;
}

.btn:hover {
	background-color: var(--light-blue);
	transform: translateY(-2px);
}

/* Trust Section */
.trust-section {
	padding: 60px 20px;
	text-align: center;
	background-color: var(--white);
}

.trust-section h2 {
	color: var(--primary-blue);
	margin-bottom: 40px;
	font-size: 32px;
}

.features-grid {
	display: flex;
	justify-content: center;
	gap: 30px;
	flex-wrap: wrap;
	max-width: 1200px;
	margin: 0 auto;
}

.feature-card {
	background-color: var(--light-blue);
	padding: 30px;
	border-radius: 8px;
	width: 300px;
}

.feature-card h3 {
	color: var(--primary-blue);
	margin-bottom: 15px;
}

/* Pricing Section */
.pricing-section-a {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 80px 20px;
    
    /* Background Image dengan efek Parallax dan Overlay Warna Biru agar teks tetap terbaca */
    background-image: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.5)), url('gbr/bg/indoor-ap-d.jpg');
    background-attachment: fixed; /* Kunci utama dari efek Parallax kedalaman */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    color: var(--white);
}

.pricing-section-b {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 80px 20px;
    
    /* Background Image dengan efek Parallax dan Overlay Warna Biru agar teks tetap terbaca */
    background-image: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.5)), url('gbr/bg/outdoor-ap-d.jpg');
    background-attachment: fixed; /* Kunci utama dari efek Parallax kedalaman */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    color: var(--white);
}

.section-title-price {
	text-align: center;
	color: var(--white);
	margin-bottom: 50px;
	font-size: 36px;
}

.section-title {
	text-align: center;
	color: var(--primary-blue);
	margin-bottom: 50px;
	font-size: 36px;
}

.pricing-grid {
	display: flex;
	justify-content: center;
	gap: 30px;
	flex-wrap: wrap;
	max-width: 1200px;
	margin: 0 auto;
}

/* --- TAMPILAN PRICING CARD BARU --- */
.pricing-card {
    background-color: var(--white);
    border-radius: 10px;
    width: 350px;
    box-shadow: 0 10px 20px rgba(0,0,0,0.05);
    border: 2px solid #a3c2c2; /* Garis tepi abu-abu/hijau pucat */
    transition: 0.3s;
    text-align: left;
    overflow: hidden; /* Penting: agar sudut header melengkung mengikuti radius card */
    display: flex;
    flex-direction: column;
}

.pricing-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 30px rgba(0,0,0,0.1);
}

/* Varian Khusus Paket Bisnis (Biru Cyan) */
.pricing-card.bisnis {
    border: 2px solid #00bcd4;
}
.pricing-card.bisnis .card-header {
    background-color: #e0f7fa; /* Warna latar biru muda di header */
}

/* --- Area Header Card (Judul, Harga, Gambar) --- */
.card-header {
    display: flex;
    justify-content: space-between;
    padding: 20px;
    border-bottom: 2px solid #a3c2c2;
    background-color: #f1f4f5; /* Warna latar abu terang */
}
.pricing-card.bisnis .card-header {
    border-bottom: 2px solid #00bcd4;
}

.title-area {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.pricing-card h3 {
    font-size: 26px;
    color: #000;
    margin-bottom: 2px;
    font-weight: 800;
}

.subtitle-user {
    font-size: 20px;
    color: #333;
    margin-bottom: 15px;
}

/* --- Harga Hidden --- */
.price-box {
    display: none;
}

.purpose-box { 
	color: black;
	font-size: 10px; 
	margin-right: 2px; 
}

/*--
.price-box {
    display: flex;
    align-items: baseline;
    color: #000;
    font-weight: 900;
}
.price-box .currency { font-size: 16px; margin-right: 2px; font-weight: bold;}
.price-box .amount { font-size: 38px; line-height: 1; letter-spacing: -1px;}
.price-box .decimals { font-size: 16px; font-weight: bold;}
--*/

/* --- Area Penempatan Gambar Bertumpuk --- */
.image-area {
    position: relative;
    width: 140px;
    height: 120px;
}
.img-ap {
    position: absolute;
    top: -10px;
    right: -10px;
    width: 90px;
    z-index: 1;
}
.img-router {
    position: absolute;
    bottom: -10px;
    left: -10px;
    width: 110px;
    z-index: 2; /* Menempatkan router di depan AP */
}

/* --- Area Body Card (Daftar Fitur) --- */
.card-body {
    padding: 20px;
    background-color: var(--white);
}

.pricing-card ul {
    list-style: none;
}

.pricing-card ul li {
    margin-bottom: 12px;
    padding-left: 25px;
    position: relative;
    font-size: 14px;
    color: #333;
    line-height: 1.4;
}

.pricing-card ul li::before {
    content: '✓';
    color: #28a745; /* Centang warna hijau pekat */
    position: absolute;
    left: 0;
    font-weight: bold;
    font-size: 16px;
}

/* Additional Packages */
.additional-section {
	padding: 60px 20px;
	background-color: var(--white);
}

.add-grid {
	display: flex;
	justify-content: center;
	gap: 20px;
	flex-wrap: wrap;
	max-width: 1200px;
	margin: 0 auto;
}

.add-card {
	background-color: var(--light-blue);
	padding: 25px;
	border-radius: 8px;
	width: calc(33.333% - 20px);
	min-width: 300px;
	border-left: 4px solid var(--primary-blue);
}

.add-card h4 {
	color: var(--primary-blue);
	margin-bottom: 15px;
	font-size: 18px;
}

.add-card ul {
	list-style-type: disc;
	padding-left: 20px;
	font-size: 14px;
}

.add-card ul li {
	margin-bottom: 8px;
}

.cta {
	justify-content: center;
	padding: 5%;
}

.btn-cta {
	text-align: center;
	background-color: var(--white);
	color: var(--primary-blue);
	padding: 15px 30px;
	text-decoration: none;
	font-weight: bold;
	border-radius: 5px;
	font-size: 16px;
	transition: 0.3s;
	display: grid;
	margin: 0 20% 0 20%;
}

/* Footer */
footer {
	background-color: var(--primary-blue);
	color: var(--white);
	text-align: center;
	padding: 30px 20px;
}


/* --- Styling Tambahan Global --- */
.section-subtitle {
    text-align: center;
    color: var(--gray-text);
    margin-top: -30px;
    margin-bottom: 40px;
    font-size: 16px;
    padding: 0 20px;
}

/* --- Section Design Showcase (Carousel) --- */
.design-showcase {
    padding: 80px 20px;
    background-color: var(--white);
}

/* Container pembungkus keseluruhan beserta tombol */
.carousel-wrapper {
    position: relative;
    width: 100%;
    max-width: 800px; 
    margin: 0 auto;
    display: flex;
    align-items: center;
}

/* Ubah posisi tombol agar melayang di atas gambar */
.carousel-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(0,0,0,0.5);
    color: white;
    border: none;
    width: 40px;          
    height: 40px;         
    display: flex;        
    justify-content: center;
    align-items: center;
    cursor: pointer;
    border-radius: 8px;   
    z-index: 10;
    flex-shrink: 0;
}

/* Taruh tombol prev di kiri, next di kanan */
.carousel-btn.prev {
    left: 10px;
}
.carousel-btn.next {
    right: 10px;
}

/* Memastikan Swiper tidak keluar jalur */
.swiper {
    width: 100%;
    overflow: hidden;
}

/* --- DESAIN GAMBAR --- */
.swiper-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 8px;
    display: block; /* Mencegah bug spasi kosong di bawah gambar */
}

/* Carousel Atas: Rasio 16:9 untuk Desktop UI */
#mainCarousel .swiper-slide img {
    aspect-ratio: 16 / 9; 
}

/* Efek saat tombol dihover (opsional) */
.carousel-btn:hover {
    background-color: rgba(0,0,0,0.8);
}




/* --- Section Portfolio (Grid Instagram) --*/
.portfolio-gallery {
    padding: 80px 20px;
    background-color: var(--light-gray);
}

.grid-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 15px;
    max-width: 1200px;
    margin: 0 auto;
}

.grid-item {
    aspect-ratio: 1 / 1; 
    overflow: hidden;
    border-radius: 8px;
    cursor: pointer;
}

.grid-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.grid-item:hover img {
    transform: scale(1.1);
}

/*Grid Gallery Porto baru*/

/* --- CSS PORTFOLIO GALLERY LOAD MORE --- */
.gallery-wrapper {
    position: relative;
    max-height: 600px; /* Sesuaikan angka ini agar pas menampilkan 3 baris di layarmu */
    overflow: hidden;
    transition: max-height 0.8s ease-in-out;
}

/* Class ini akan ditambahkan oleh JS saat tombol diklik */
.gallery-wrapper.expanded {
    max-height: 8000px; /* Angka besar agar semua gambar bisa tampil */
}

.gallery-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 350px; /* Ketinggian ditambah agar transisi blur lebih panjang dan halus */
    
    /* Gradasi warna latar disesuaikan agar lebih natural menyatu dengan abu-abu */
    background: linear-gradient(to bottom, rgba(244, 247, 246, 0) 0%, rgba(244, 247, 246, 0.8) 50%, rgba(244, 247, 246, 1) 100%);
    
    backdrop-filter: blur(6px); /* Intensitas blur sedikit dinaikkan */
    
    /* KUNCI UTAMA: Membuat masking agar efek blur memudar di bagian atas */
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 50%);
    mask-image: linear-gradient(to bottom, transparent 0%, black 50%);
    
    display: flex;
    justify-content: center;
    align-items: flex-end;
    padding-bottom: 40px; /* Jarak tombol dari pinggir bawah */
    z-index: 10;
}

.btn-selengkapnya {
    background-color: var(--primary-blue, #0056b3);
    color: white;
    padding: 12px 30px;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    box-shadow: 0 4px 6px rgba(0,0,0,0.2);
    transition: transform 0.2s, background-color 0.2s;
}

.btn-selengkapnya:hover {
    transform: scale(1.05);
    background-color: #004494; /* Warna biru yang lebih gelap */
}

/*Grid Gallery Porto baru-end*/


.icon-arrow-container {
	display: flex;
    justify-content: center; /* Mengetengahkan secara horizontal */
    align-items: center;     /* Mengetengahkan secara vertikal */
    width: 100%;             /* Memenuhi lebar halaman */
}

.large-icon {
    /* Menggunakan pixel (px) atau rem */
    font-size: 5vh; /* Sekitar 48px */
    color: var(--primary-blue);  
}

/* --- Modal Lightbox --- */
.lightbox-modal {
    display: none; 
    position: fixed;
    z-index: 9999; /* Diubah menjadi 9999 agar berada di depan header */
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.9); 
    justify-content: center;
    align-items: center;
}

.lightbox-content {
    max-width: 90%;
    max-height: 90vh;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.5);
    animation: zoomIn 0.3s ease; /* Animasi muncul yang halus */
}

/* Animasi Zoom saat gambar dibuka */
@keyframes zoomIn {
    from {transform: scale(0.8); opacity: 0;}
    to {transform: scale(1); opacity: 1;}
}

.lightbox-close {
    position: absolute;
    top: 20px;
    right: 35px;
    color: #f1f1f1;
    font-size: 40px;
    font-weight: bold;
    cursor: pointer;
    transition: color 0.3s;
    z-index: 10000; /* Opsional: Tambahkan ini jika tombol X sulit diklik */
}

.lightbox-close:hover,
.lightbox-close:focus {
    color: #bbb;
    text-decoration: none;
}

/* Styling Khusus untuk Icon di Feature Card */
.feature-icon {
    font-size: 45px; /* Ukuran icon agar terlihat jelas */
    color: var(--primary-blue); /* Menyamakan warna biru dengan tema logo/tombol */
    margin-bottom: 15px; /* Jarak antara icon dan judul */
    display: inline-block;
}

/* --- RESPONSIVE TABLET (Maksimal 1024px) --- */
@media (max-width: 1024px) {
    .pricing-card {
        width: calc(50% - 30px); /* Membagi menjadi 2 kolom */
    }
    .feature-card {
        width: calc(50% - 30px); /* Membagi fitur menjadi 2 kolom */
    }
    .add-card {
        width: calc(50% - 20px);
    }
    header {
        padding: 20px 30px; /* Kurangi jarak kiri-kanan header */
    }
}

/* --- RESPONSIVE MOBILE (Maksimal 768px) --- */
@media (max-width: 768px) {
    /* 1. Optimasi Header Kiri-Kanan */
    header { 
        flex-direction: row; /* Mengubah susunan menjadi menyamping */
        justify-content: space-between; 
        align-items: center; 
        padding: 15px 20px; 
    }
    
    .logo, .logo-scrolled {
        font-size: 16px; /* Mengecilkan logo */
    }
    
    header .btn.kontak-wa {
        padding: 8px 12px !important; /* Mengecilkan ukuran tombol di header */
        font-size: 12px !important;
    }

    /* Ukuran Font Hero */
    .hero h1 { font-size: 28px; }
    .hero p { font-size: 15px; }

    /* 2. Menyesuaikan Padding Card & Spasi Teks agar terbaca */
    .feature-card, .add-card { 
        width: 100%; 
        padding: 25px 20px; 
    }
    
    .pricing-card {
        width: 100%;
        padding: 0; /* Padding di-nol-kan karena sudah di-handle oleh card-header dan card-body */
    }
    
    .feature-card p, .pricing-card ul li {
        line-height: 1.6; /* Memberi jarak antar baris teks */
        margin-bottom: 12px; /* Memberi jarak antar poin/paragraf */
        font-size: 14px;
    }

    /* 3. Mengecilkan Judul Section (Trust Section & Pricing) */
    .section-title { 
        font-size: 24px; 
        margin-bottom: 30px;
    }
	
	.section-title-price {
		font-size: 32px; 
        margin-bottom: 30px;
	}
    
    .trust-section h2 {
        font-size: 24px; 
        margin-bottom: 25px;
    }

    /* 4. Mengecilkan Judul pada Section CTA */
    .cta h2 {
        font-size: 24px !important; /* !important untuk menimpa style inline di file HTML */
        margin-top: 20px !important;
    }

    /* Background Khusus Mobile */
    .pricing-section-a { background-image: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.5)), url('gbr/bg/indoor-ap-m.jpg'); }
    .pricing-section-b { background-image: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.5)), url('gbr/bg/outdoor-ap-m.jpg'); }

    /* Optimasi Jarak Luar Section */
    .pricing-section-a, .pricing-section-b, .trust-section, .design-showcase, .portfolio-gallery, .additional-section {
        padding: 50px 15px;
    }

    #mainCarousel .swiper-slide img { aspect-ratio: 4 / 3; }
    
    .grid-container { 
        grid-template-columns: repeat(2, 1fr); 
        gap: 10px; 
    }
	
	footer p {
		font-size: 12px;
	}
}