.terms-box ul {
    list-style: disc !important;     /* Memaksa bullet (bulat) muncul */
    list-style-position: inside;  /* Posisi bullet di dalam kotak */
    padding-left: 20px;           /* Kembalikan padding kiri */
    margin-bottom: 1rem;
    font-family: "Source Serif 4", serif !important;
    color: #7a7a7a !important;         /* Beri spasi bawah */
}

/* Ini untuk list bernomor (jika Anda menggunakannya) */
.terms-box ol {
    list-style: decimal !important; /* Memaksa nomor muncul */
    list-style-position: inside;
    padding-left: 20px;
    margin-bottom: 1rem;
    font-family: "Source Serif 4", serif !important;
    color: #7a7a7a !important;
}

.terms-box li {
    list-style: disc !important;
    margin-bottom: 0.5rem; /* Spasi antar item list */
    font-size: medium;
    font-family: "Source Serif 4", serif !important;
    color: #7a7a7a !important;
}

.label-style {
    font-family: "Source Serif 4", serif; /* Ganti font sesuai selera */
    font-weight: 600;
    color: #333;
    font-size: 14px;
    letter-spacing: 0.5px;
}

/* image slider */
.hero-swiper {
    width: 100%;
    height: 93vh; /* Tinggi carousel (sesuaikan) */
    position: relative; /* Wajib untuk konten statis */
    background-color: #000;
    background-size: contain; /* UBAH KE 'contain' */
}

.swiper-slide {
    width: 100%;
    height: 100%;
}

.swiper-slide-image {
    width: 100%;
    height: 100%;
    background-size: cover; /* UBAH KE 'contain' */
    background-repeat: no-repeat; /* Penting untuk mencegah pengulangan */
    background-position: center;
    background-color: black; /* Opsional: warna background di balik gambar */
}

.overlay-gradient {
    position: absolute;
    top: 55%;
    left: 0;
    width: 100%;
    height: 45%;
    background: linear-gradient(to top, rgba(255, 255, 255, 0.863) 0%, rgba(255, 255, 255, 0) 100%);
    z-index: 2;
}

.static-content-wrapper {
    position: absolute;
    left: 5%;      /* Jarak dari kanan */
    bottom: 60px;   /* Jarak paten dari bawah layar */
    
    z-index: 20;    /* Paling atas */
    text-align: left; 
    pointer-events: auto;
    
    /* Reset properti lain biar aman */
    top: auto; right: auto; transform: none;
}

.static-text {
    color: white;
    font-size: 3em;
    font-weight: bold;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.7);
    margin-bottom: 15px;
    pointer-events: none; /* Teks tidak bisa diklik */
}

.carousel-button-container {
     pointer-events: auto;
}

.carousel-button {
    display: inline-block;
    background-color: #4c7183;
    color: white;
    padding: 12px 24px;
    font-size: 1.1em;
    font-weight: bold;
    text-decoration: none;
    border-radius: 5px;
    transition: background-color 0.3s ease;
    box-shadow: 0 4px 8px rgba(0,0,0,0.3);
    pointer-events: auto;
}
.carousel-button:hover {
    background-color: #324d64;
    color: white;
}

.capturebuddy-nav li{
    background-color: #3B566E;
}
.slide-inner-content {
    position: absolute;
    left: 5%;      /* Harus SAMA dengan button biar lurus vertikal */
    
    /* RUMUS: Bottom Button (60px) + Tinggi Button est (50px) + Jarak Gap (20px) */
    bottom: 130px;  
    
    z-index: 10;
    max-width: 45%; /* Batasi lebar agar rapi */
    
    /* Agar teks lurus kanan */
    text-align: left;
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* Pastikan semua elemen teks rata kanan */
}

/* Styling Font */
.slide-title {
    font-family: "Satisfy", cursive;
    color: white;
    font-size: 3.5rem; /* Sesuaikan ukuran */
    margin: 0;
    line-height: 1.2;
    
    /* Efek bayangan biar terbaca di background terang */
    text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
}

/* Responsif untuk HP (Opsional: Pindah ke Tengah) */
@media (max-width: 768px) {
    .static-content-wrapper {
        right: auto;
        left: 50%;
        transform: translateX(-50%);
        bottom: 40px;
        width: 100%;
        text-align: center;
    }

    .slide-inner-content {
        right: auto;
        left: 50%;
        transform: translateX(-50%);
        bottom: 110px; /* Sesuaikan jarak di HP */
        text-align: center;
        align-items: center;
        width: 90%;
        max-width: 90%;
    }
    
    .slide-title {
        font-size: 2rem; /* Kecilkan font di HP */
    }
}

@media (max-width: 850px) {

    .hero-swiper {
        height: 45vh; 
    }

    .static-text {
        font-size: 2em;
        margin-bottom: 20px;
    }

    
    .carousel-button {
        font-size: 0.9em;
        padding: 10px 20px;
    }

}
@media (max-width: 470px) {

    .hero-swiper {
        height: 45vh; 
    }


    .static-text {
        font-size: 2em;
        margin-bottom: 20px;
    }

    
    .carousel-button {
        font-size: 0.9em;
        padding: 10px 20px;
    }

}
@media (max-height: 740px) {

    .static-text {
        font-size: 1em;
        margin-bottom: 20px;
    }

}

/* form control */
.form-control-capturebuddy {
    border-color: #3B566E; 
    }
.form-control-capturebuddy:focus {
  border-color: #3B566E; 
  box-shadow: 0 0 0 0.25rem rgba(59, 86, 110, 0.274);
}

/* gallery */

.img-fixed {
        width: 100%;
        height: 300px;
        object-fit: cover;
        object-position: center;
        /* Opsional: Tambah transisi ke gambar jika ingin efek zoom sedikit saat hover */
        transition: transform 0.3s ease;
    }

    /* 1. Container Utama */
    .thumb-gallery {
        border-radius: 20px;
        position: relative;
        overflow: hidden;
        cursor: pointer; /* Ubah kursor jadi tangan agar terlihat bisa diklik */
    }

    /* --- LOGIKA BACKGROUND HITAM --- */
    .thumb-gallery::after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(to top, rgb(255, 255, 255) 0%, rgba(255, 255, 255, 0) 80%);
        z-index: 1;
        
        /* PERUBAHAN DI SINI: */
        opacity: 0; /* Sembunyi di awal */
        transition: opacity 0.3s ease; /* Animasi halus */
    }

    /* Saat Container di-Hover -> Munculkan Background Hitam */
    .thumb-gallery:hover::after {
        opacity: 1;
    }

    /* --- LOGIKA TEKS --- */
    .thumb-gallery-overlay {
        position: absolute;
        top: 75%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 2;
        text-align: center;
        width: 100%;
        padding: 0 10px;
        /* PERUBAHAN DI SINI: */
        opacity: 0; /* Sembunyi di awal */
        transition: all 0.3s ease; /* Animasi halus untuk opacity dan posisi */
        
        /* Opsional: Geser sedikit ke bawah biar nanti ada efek naik saat muncul */
        transform: translate(-50%, -10%); 
    }

    /* Saat Container di-Hover -> Munculkan Teks */
    .thumb-gallery:hover .thumb-gallery-overlay {
        opacity: 1;
        transform: translate(-50%, -50%); /* Kembalikan ke posisi tengah yang pas */
    }

    /* --- STYLING FONT --- */
    .thumb-gallery-overlay h4 {
        font-family: "Satisfy", cursive !important;
        color: #3B566E;
        font-weight: bold;
        margin: 0;
        font-size: 28px;
        text-transform: uppercase;
        letter-spacing: 1px;
        transition: color 0.3s ease; /* Transisi warna text */
    }

    /* Hover pada text itu sendiri (ganti warna) */
    
    /* Opsional: Efek Zoom Gambar saat hover */
    .thumb-gallery:hover .img-fixed {
        transform: scale(1.1);
    }

/* Target layar di bawah 991px (Tablet & HP) */
@media (max-width: 991px) {
    
    /* 1. Paksa Background Gradasi Selalu Muncul */
    .thumb-gallery::after {
        opacity: 1 !important; /* Paksa muncul */
        background: linear-gradient(to top, rgb(255, 255, 255) 0%, rgba(255, 255, 255, 0) 70%);
    }

    /* 2. Paksa Teks Selalu Muncul & Posisi Pas di Tengah */
    .thumb-gallery-overlay {
        opacity: 1 !important; /* Paksa muncul */
        top: 75%; /* Sesuaikan posisi vertikal jika perlu */
        transform: translate(-50%, -50%) !important; /* Reset posisi animasi (jangan ada pergerakan naik turun) */
    }

    /* 3. Matikan efek Zoom Gambar di HP (biar hemat performa & tidak aneh saat scroll) */
    .thumb-gallery:hover .img-fixed {
        transform: none !important;
    }
}

.round-15{
    border-radius: 15px;
}
.vertical-gallery-wrapper {
    padding: 2rem 0;
}


.vertical-photo-item {
    transition: transform 0.3s ease;
}


.vertical-photo-item img {
    display: block; /* Menghapus celah putih di bawah gambar */
    height: auto;
    object-fit: cover; /* Memastikan rasio terjaga */
}


.vertical-photo-item:hover {
    transform: scale(1.01);
}

    /* button galeri */
.gallery-button {
    display: inline-block;
    background-color: #4c7183;
    color: white;
    padding: 12px 24px;
    font-size: 1.1em;
    font-weight: bold;
    text-decoration: none;
    border-radius: 5px;
    transition: background-color 0.3s ease;
    pointer-events: auto;
}
.gallery-button:hover {
    background-color: #324d64;
    color: white;
}

/* isi galeri */
    .masonry-container {
        /* Jumlah kolom default */
        column-count: 4; 
        column-gap: 15px; /* Jarak antar kolom */
    }

    .masonry-item {
        /* Mencegah gambar terpotong di tengah jalan antar kolom */
        break-inside: avoid; 
        margin-bottom: 15px; /* Jarak bawah */
    }

    .masonry-item img {
        width: 100%;
        border-radius: 15px; /* Sudut tumpul */
        display: block;
    }

    /* Responsif untuk HP */
    @media (max-width: 768px) {
        .masonry-container {
            column-count: 2;
        }
    }
    @media (max-width: 480px) {
        .masonry-container {
            column-count: 2;
        }
    }

    .masonry-gallery {
        position: relative; /* Wajib untuk jangkar absolute */
        overflow: hidden;   /* Agar saat di-zoom, gambar tidak keluar kotak */
        border-radius: 8px; /* Opsional: Biar sudut tumpul sedikit */
        display: block;
    }

    /* 2. BACKGROUND GRADASI (Layer Gelap/Putih) */
    .masonry-gallery::after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        /* Gradasi Putih di bawah ke Transparan di atas */
        background: linear-gradient(to top, rgb(255, 255, 255) 0%, rgba(255, 255, 255, 0) 80%);
        z-index: 1;
        opacity: 0; /* Sembunyi */
        transition: opacity 0.3s ease;
        pointer-events: none; /* Agar klik tembus ke link */
    }

    .masonry-gallery:hover::after {
        opacity: 1; /* Muncul saat hover */
    }

    /* 3. GAMBAR (Efek Zoom) */
    .masonry-gallery {
        transition: transform 0.5s ease;
        width: 100%;
        display: block;
    }
    
    .masonry-gallery:hover {
        transform: scale(1.03); /* Zoom in saat hover */
    }

    .landscape-crop { 
        aspect-ratio: 16 / 9;
        object-fit: cover;
        object-position: center;
    }

    /* 4. TEKS OVERLAY */
    .masonry-gallery-overlay {
        position: absolute;
        top: 75%; /* Posisi awal agak ke bawah */
        left: 50%;
        transform: translate(-50%, -10%); /* Posisi awal */
        z-index: 2;
        text-align: center;
        width: 100%;
        padding: 0 10px;
        opacity: 0; /* Sembunyi */
        transition: all 0.3s ease;
    }

    /* Saat Hover: Teks Muncul & Naik */
    .masonry-gallery:hover .masonry-gallery-overlay {
        opacity: 1;
        transform: translate(-50%, -50%); /* Posisi Akhir (Center) */
        top: 70%; /* Atur ketinggian teks di sini */
    }

    /* 5. STYLING FONT */
    .masonry-gallery-overlay h4 {
        font-family: "Satisfy", cursive !important;
        color: #3B566E;
        font-weight: bold;
        margin: 0;
        font-size: 38px;
        text-transform: uppercase;
        letter-spacing: 1px;
    }

    /* --- RESPONSIVE (HP/Tablet) --- */
    @media (max-width: 991px) {
        
        /* Paksa Gradasi Selalu Muncul */
        .masonry-gallery::after {
            opacity: 1 !important;
            background: linear-gradient(to top, rgb(255, 255, 255) 0%, rgba(255, 255, 255, 0) 70%);
        }

        /* Paksa Teks Selalu Muncul */
        .masonry-gallery-overlay {
            opacity: 1 !important;
            top: 70%;
            transform: translate(-50%, -50%) !important;
        }

        /* Matikan Zoom di HP */
        .masonry-gallery:hover {
            transform: none !important;
        }

        .masonry-gallery-overlay h4 {
            font-family: "Satisfy", cursive !important;
            color: #3B566E;
            font-weight: bold;
            margin: 0;
            font-size: 22px;
            text-transform: uppercase;
            letter-spacing: 1px;
        }
    }
/* button book shoot atas */
        /* Tampilan HP */
    @media (max-width: 430px) {
        /* Sembunyikan teks panjang */
    .text-desktop {
        display: none !important;
    }

    /* Munculkan icon kalender */
    .text-mobile {
        display: inline-block !important;
    }


    .border-button a.sign-in-up {
        padding: 10px 15px !important; /* Kurangi padding kiri-kanan */
        font-size: 18px !important;    /* Perbesar sedikit icon-nya */
        display: flex;                 /* Pastikan icon di tengah */
        align-items: center;
        justify-content: center;
        min-width: 45px;               /* Lebar minimal agar enak disentuh jari */
    }
    
    /* Hapus margin jika ada (opsional, tergantung template) */
    .border-button {
        margin-left: 10px; /* Jarak sedikit dari logo */
    }
    }

/* rules  */
.rules-richtext ul {
    font-family: "Source Serif 4", serif !important;
    list-style: disc !important; /* Memaksa muncul titik hitam */
    padding-left: 20px !important;    /* Memberi ruang agar titik tidak keluar layar */
    margin-left: 0;
    margin-top: 20px;
    margin-bottom: 0.5rem;
    color: #7a7a7a !important;
}
.rules-richtext li {
    font-family: "Source Serif 4", serif !important;
    list-style: disc !important; 
    display: list-item; /* Memastikan dianggap sebagai item list */
    margin-bottom: 10px; /* Jarak antar poin agar tidak dempet */
    line-height: 1.6;    /* Jarak antar baris kalimat agar enak dibaca */
    color: #7a7a7a !important;
}

/* profile */
.profile-richtext {
    text-align: left !important; /* Paksa rata kiri */
}
.profile-richtext ul {
    font-family: "Source Serif 4", serif !important;
    list-style: disc !important; /* Memaksa muncul titik hitam */
    padding-left: 20px !important;    /* Memberi ruang agar titik tidak keluar layar */
    margin-left: 0;
    margin-top: 20px;
    margin-bottom: 0.5rem;
}
.profile-richtext li {
    font-family: "Source Serif 4", serif !important;
    list-style: disc !important; 
    display: list-item; /* Memastikan dianggap sebagai item list */
    margin-bottom: 10px; /* Jarak antar poin agar tidak dempet */
    line-height: 1.6;    /* Jarak antar baris kalimat agar enak dibaca */
}

.profile-richtext h4{
    text-align: center !important; /* Paksa rata kiri */
}

/* home */
.pricing-item-home:hover {
  border: 2px solid transparent;
  box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.06);
  transform: scale(1.03);
}

.text-capturebuddy{
    color: #4c7183 !important;
}

/* danger buttom */
.btn-danger-capturebuddy{
    background-color: #d88181ff;
    color: #e9e9e9ff;
    
    text-decoration: none;
    transition: background-color 0.3s ease;
    pointer-events: auto;
}

.btn-danger-capturebuddy:hover{
    background-color: #e9e9e9ff;
    color: #d88181ff;
    border-color: #d88181ff;
}