/* Import Font (Opsional, tapi mirip dengan desain) */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;700;800&display=swap');

/* Variabel Warna Global */
:root {
    --main-green: #00a98f; /* Warna hijau utama dari desain */
    --dark-green: #0b6c5c; /* Warna hijau tua untuk card & box */
    --light-gray-bg: #f8f9fa; /* Warna latar belakang abu-abu muda */
}

/* Gaya Global */
body {
    font-family: 'Poppins', sans-serif;
    line-height: 1.6;
}

/* Definisikan warna teks utama */
.text-main-green {
    color: var(--main-green);
}

/* Tombol custom agar lebih bulat */
.btn.rounded-pill {
    border-radius: 50rem;
    font-weight: 500;
}

/* =================================== */
/* BAGIAN 1: HERO SECTION & NAVBAR */
/* =================================== */
.hero-section {
    /* Latar belakang gradien seperti di gambar */
    background: linear-gradient(110deg, var(--main-green) 0%, var(--dark-green) 100%);
    
    /* Ini untuk memberi bentuk gelombang di bawah, 
       tapi untuk saat ini kita buat sederhana dulu */
    border-bottom-left-radius: 3rem;
    border-bottom-right-radius: 3rem;
    overflow: hidden; /* Mencegah konten 'tumpah' */
}

.navbar-nav .nav-link {
    font-weight: 500;
    margin: 0 0.5rem;
}

.navbar-dark .navbar-nav .nav-link.active {
    color: #fff;
    font-weight: 700;
}

/* Placeholder untuk gambar HP, bisa kamu hapus saat ganti dengan <img> */
.phones-placeholder {
    border: 2px dashed rgba(255, 255, 255, 0.3);
    padding: 10rem 3rem;
    border-radius: 2rem;
}
/* =================================== */
/* BAGIAN 1: PERBAIKAN NAVBAR & DROPDOWN */
/* =================================== */

/* Mengganti warna link navbar-dark (Bootstrap default) */
.navbar-dark .navbar-nav .nav-link {
    color: rgba(255, 255, 255, 0.8);
}

.navbar-dark .navbar-nav .nav-link.active,
.navbar-dark .navbar-nav .nav-link:hover {
    color: #fff;
}

/* Garis bawah untuk link aktif/hover (Desktop) */
.navbar-nav .nav-link {
    position: relative;
    padding-bottom: 0.5rem; /* Beri ruang untuk garis bawah */
}

.navbar-nav .nav-link.active::after,
.navbar-nav .nav-link:hover::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0.5rem;
    right: 0.5rem;
    height: 1px;
     /* Warna oranye/gold dari gambar */
    border-radius: 1px;
}

/* Hilangkan garis bawah saat dropdown terbuka */
.navbar-nav .nav-item.dropdown .nav-link[aria-expanded="true"]::after {
    display: none;
}


/* Styling Dropdown Menu (Desktop) */
.navbar-nav .dropdown-menu {
    border-radius: 1rem; /* Sudut lebih bulat */
    border: none;
    box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.1);
    padding: 0.5rem 0;
    margin-top: 0.5rem; /* Jarak dari nav-link */
}

.dropdown-item {
    font-weight: 500;
    padding: 0.5rem 1.5rem;
}

.dropdown-item:hover {
    background-color: var(--light-gray-bg);
    color: var(--main-green);
}


/* === PERBAIKAN TAMPILAN MOBILE === */
@media (max-width: 991.98px) {
    /* Memberi latar belakang solid pada menu mobile */
    .hero-section .navbar-collapse {
        background-color: var(--dark-green);
        border-radius: 1rem;
        padding: 1.5rem;
        margin-top: 0.5rem;
    }
    
    /* Tombol di mobile agar full-width */
    .hero-section .navbar-collapse .w-100 {
        width: 100% !important;
    }

    /* Hilangkan garis bawah di mobile */
    .navbar-nav .nav-link.active::after,
    .navbar-nav .nav-link:hover::after {
        display: none;
    }
    
    /* Buat dropdown menu di mobile menyatu */
    .navbar-nav .dropdown-menu {
        background-color: transparent;
        border: none;
        box-shadow: none;
        padding: 0 0 0 1rem; /* Inden ke dalam */
    }
    
    .navbar-nav .dropdown-item {
        color: rgba(255, 255, 255, 0.7);
        padding: 0.35rem 0;
    }
    
    .navbar-nav .dropdown-item:hover {
        background-color: transparent;
        color: #fff;
    }
}
/* =================================== */
/* PERBAIKAN TINGGI KARTU LIVE SHOPPING */
/* =================================== */

/* Ini akan menimpa tinggi minimum kartu HANYA untuk section ini */
.live-shopping-premium-section .service-card .card-body {
    min-height: 740px; /* Anda sudah punya 700px, 740px mungkin lebih baik */
}

/* Ini akan memperkecil ukuran font list */
.live-shopping-premium-section .service-list.small {
    font-size: 0.8rem; /* Anda sudah punya 0.72rem, 0.8rem mungkin lebih terbaca */
    line-height: 1.5;
}

/* === BARU: Perkecil font-size Judul (h3) dan Harga (h2) === */
.live-shopping-premium-section .service-card-details h3 {
    font-size: 1.5rem; /* Perkecil dari default h3 (1.75rem) */
}

.live-shopping-premium-section .service-card-details h2 {
    font-size: 1.75rem; /* Perkecil dari default h2 (2rem) */
    margin-top: 0.75rem !important; /* Kurangi margin atas (dari my-3) */
    margin-bottom: 0.75rem !important; /* Kurangi margin bawah (dari my-3) */
}

/* BARU: Kurangi margin bawah teks promo agar list lebih naik */
.live-shopping-premium-section .service-card-details p.text-warning {
    margin-bottom: 0.65rem !important; /* Kurangi dari mb-3 (1rem) */
}
/* =================================== */
/* PERBAIKAN TINGGI KARTU LIVE SHOPPING */
/* =================================== */

/* Ini akan menimpa tinggi minimum 480px HANYA untuk kartu di section ini */
.live-shopping-premium-section .service-card .card-body {
    min-height: 790px; 
}
.live-shopping-premium-section .service-list.small {
    font-size: 0.72rem; /* Lebih kecil dari 0.9rem default */
    line-height: 1.5;  /* Jarak antar baris lebih rapat */
}
/* =================================== */
/* BAGIAN 2: SERVICES SECTION */
/* =================================== */
.services-section {
    background-color: var(--light-gray-bg);
}

.service-card {
    border: none;
    border-radius: 2rem; /* Membuat sudut sangat bulat */
    box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
}

.service-card.card-dark {
    background-color: var(--dark-green);
}

.service-card.card-light {
    background-color: #fff;
    /* Memberi efek 'terangkat' seperti di gambar */
    transform: scale(1.05); 
    box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.15);
    z-index: 10;
}

/* Tombol panah navigasi */

.service-card {
    border: none;
    border-radius: 2rem; 
    box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
    overflow: hidden; /* Penting agar efek hover rapi */
}

.service-card.card-dark {
    background-color: var(--dark-green);
}

.service-card.card-light {
    background-color: #fff;
    transform: scale(1.05); /* Kartu tengah tetap terangkat */
    box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.15);
    z-index: 10;
}

/* Ini adalah tinggi minimum kartu agar semua sama */
.service-card .card-body {
    min-height: 480px; 
    z-index: 2;
    position: relative;
}

/* Wrapper untuk konten yang bisa berubah (gambar & detail) */
.service-content-wrapper {
    position: relative;
    flex-grow: 1;
    min-height: 300px; /* Beri ruang untuk gambar atau teks */
}

/* Posisi absolut untuk kedua state (gambar & detail) */
.service-card-image,
.service-card-details {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transition: opacity 0.4s ease, transform 0.4s ease;
    display: flex;
    flex-direction: column;
    align-items: center; /* Tengahkan horizontal */
    justify-content: center; /* Tengahkan vertikal */
}

/* == EFEK HOVER == */

/* State Default: Gambar terlihat, Detail tersembunyi */
.service-card-image {
    opacity: 1;
    transform: scale(1);
    visibility: visible;
}
.service-card-details {
    opacity: 0;
    transform: scale(0.95); /* Efek zoom-out sedikit */
    visibility: hidden;
}

/* State Hover: Gambar tersembunyi, Detail terlihat */
.service-card:hover .service-card-image {
    opacity: 0;
    transform: scale(0.95);
    visibility: hidden;
}
.service-card:hover .service-card-details {
    opacity: 1;
    transform: scale(1); /* Efek zoom-in */
    visibility: visible;
}

/* == STYLING GAMBAR KARAKTER & LIST == */

.service-char-img {
    max-height: 220px; /* Ukuran gambar di kartu hijau */
    width: auto;
    margin-top: auto; /* Dorong ke bawah */
}
.service-char-img-light {
    max-height: 250px; /* Ukuran gambar di kartu putih */
    width: auto;
}

.service-list {
    font-size: 0.9rem;
    padding-left: 1rem;
    padding-right: 1rem;
}
.service-list li {
    margin-bottom: 0.35rem;
}
/* Ikon checklist */
.service-list li i {
    color: var(--main-green); /* Warna ikon checklist */
    margin-right: 8px;
}
.card-light .service-list li i {
    color: var(--main-green); /* Warna ikon di kartu putih */
}


/* == STYLING NAVIGASI SWIPER (Panah) == */

/* Ganti --swiper-theme-color agar sesuai tema */
:root {
    --swiper-theme-color: var(--dark-green);
}

.service-swiper .swiper-button-next,
.service-swiper .swiper-button-prev {
    background-color: #fff;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    color: var(--dark-green); /* Warna panahnya */
}
/* Mengatur ukuran ikon panah di dalam tombol */
.service-swiper .swiper-button-next::after,
.service-swiper .swiper-button-prev::after {
    font-size: 1.2rem; /* Kecilkan panah default swiper */
    font-weight: 800;
}
/* Posisikan di luar container */
.service-swiper .swiper-button-prev {
    left: 10px;
}
.service-swiper .swiper-button-next {
    right: 10px;
}

/* Sembunyikan panah di mobile (karena scroll) */
@media (max-width: 991.98px) {
    .service-swiper .swiper-button-next,
    .service-swiper .swiper-button-prev {
        display: none;
    }
}

/* =================================== */
/* BAGIAN 3: LIVESHOPPING SECTION */
/* =================================== */
.liveshopping-section {
    background-color: #fff;
}

.live-box {
    background-color: var(--dark-green);
    border-radius: 2rem; /* Sudut bulat besar */
}

.live-box-subtext {
    background-color: rgba(255, 255, 255, 0.1);
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    display: inline-block;
}

.live-list li {
    position: relative;
    padding-left: 1.5rem; /* Ruang untuk bullet custom */
    margin-bottom: 0.5rem;
}

/* Membuat bullet custom (titik) */
.live-list li::before {
    content: '\2022'; /* Kode untuk bullet */
    color: var(--main-green); /* Warna bullet */
    font-weight: bold;
    display: inline-block;
    position: absolute;
    left: 0;
    font-size: 1.2rem;
}
/* =================================== */
/* TAMBAHAN UNTUK BAGIAN 4 - 9 */
/* =================================== */

/* Utility Classes */
.bg-dark-green {
    background-color: var(--dark-green);
}

.bg-light-gray {
    background-color: var(--light-gray-bg);
}

/* Tombol custom baru */
.btn-dark-green {
    background-color: var(--dark-green);
    color: #fff;
    font-weight: 500;
}
.btn-dark-green:hover {
    background-color: #08584a; /* Sedikit lebih gelap dari dark-green */
    color: #fff;
}

/* Placeholder untuk gambar */
.placeholder-img {
    background-color: #e9ecef;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #6c757d;
    font-weight: 500;
    width: 100%;
}

/* =================================== */
/* BAGIAN 5: KENAPA SOCIAL BREAD */
/* =================================== */
.reason-box {
    background-color: #fff;
    border-radius: 1rem;
    padding: 1.5rem;
    margin-bottom: 1rem;
    box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.05);
}
/* Hilangkan margin-bottom di box terakhir */
.reason-box:last-child {
    margin-bottom: 0;
}

/* =================================== */
/* BAGIAN 7: PENCAPAIAN KAMI */
/* =================================== */
.stat-card .display-4 {
    line-height: 1; /* Membuat angka lebih rapat dengan teks */
}
.stat-card .fs-5 {
    line-height: 1.2;
}

/* =Ganti ikon panah di box besar */
.stat-card .bi-arrow-up-short {
    font-size: 0.8em; /* Relatif terhadap ukuran teks induk */
    vertical-align: middle;
}

/* =================================== */
/* BAGIAN 8: PARTNERS & PRESS */
/* =================================== */
.partner-logo {
    /* Ganti ini dengan tag <img> saat kamu punya logonya */
    background-color: #f8f9fa;
    color: #adb5bd;
    padding: 1rem;
    border-radius: 0.5rem;
    font-size: 0.8rem;
    font-weight: 500;
}
/* =================================== */
/* PERBAIKAN HOVER TESTIMONI STATIS */
/* =================================== */

/* Ini akan override 'aspect-ratio: 4 / 3' dari slider,
   agar gambar statis ini bisa tampil penuh */
#static-testi-card img {
    aspect-ratio: auto; /* Biarkan gambar menggunakan rasio aslinya */
    border-radius: 0.5rem; /* Sesuaikan radius dengan overlay */
}
/* =================================== */
/* BAGIAN 8: STYLING TESTIMONI ADS SLIDER */
/* =================================== */

.testimonial-ads-card {
    background-color: #fff;
    border-radius: 0.75rem; /* Sudut bulat untuk kartu */
    padding: 0.5rem; /* Padding kecil di dalam kartu */
    box-shadow: 0 4px 12px rgba(0,0,0,0.07);
    border: 1px solid #eee;
    /* Kita biarkan swiper yang mengatur tinggi */
}

.testimonial-ads-card img {
    width: 100%;
    /* Ini kunci agar semua kartu SAMA TINGGI */
    aspect-ratio: 1 / 1.5; 
    object-fit: cover; /* 'cover' agar gambar memenuhi, 'contain' jika ingin lihat utuh */
    border-radius: 0.5rem; /* Sudut bulat untuk gambar di dalam */
}
/* Meniru style tombol navigasi dari slider lain */
.ads-testimonial-swiper .swiper-button-next,
.ads-testimonial-swiper .swiper-button-prev,
.website-swiper .swiper-button-next,  /* TAMBAHKAN BARIS INI */
.website-swiper .swiper-button-prev {
    background-color: #fff;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    color: var(--dark-green); /* Warna panahnya */
}

.ads-testimonial-swiper .swiper-button-next::after,
.ads-testimonial-swiper .swiper-button-prev::after {
    font-size: 1.2rem; /* Ukuran panah */
    font-weight: 800;
}

/* Posisikan tombol agar tidak di luar container */
.ads-testimonial-swiper .swiper-button-prev,
.website-swiper .swiper-button-prev {
    left: 5px;
}
.ads-testimonial-swiper .swiper-button-next,
.website-swiper .swiper-button-next {
    right: 5px;
}

/* Sembunyikan panah di mobile (sama seperti slider lain) */
@media (max-width: 991.98px) {
    .ads-testimonial-swiper .swiper-button-next,
    .ads-testimonial-swiper .swiper-button-prev,
    .website-swiper .swiper-button-next, /* TAMBAHKAN BARIS INI */
    .website-swiper .swiper-button-prev {
        display: none;
    }
}

/* =================================== */
/* EFEK HOVER UNTUK TESTIMONI ADS */
/* =================================== */

/* 1. Jadikan kartu sebagai "jangkar" untuk overlay */
.testimonial-ads-card {
    position: relative;
    /* overflow: hidden penting agar overlay tidak keluar dari 
       sudut bulat kartu */
    overflow: hidden; 
}

/* 2. Beri transisi pada gambar agar efek blur mulus */
.testimonial-ads-card img {
    transition: filter 0.3s ease, transform 0.3s ease;
}

/* 3. Buat style untuk overlay teks */
.testimonial-ads-overlay {
    /* Posisikan menutupi seluruh kartu */
    position: absolute;
    top: 0.5rem;    /* Sesuaikan dengan padding 0.5rem di .testimonial-ads-card */
    left: 0.5rem;
    right: 0.5rem;
    bottom: 0.5rem;
    border-radius: 0.5rem; /* Sesuaikan dengan border-radius gambar */
    
    /* Latar belakang gelap transparan */
    background-color: #fff;
    backdrop-filter: blur(2px); /* Efek blur tambahan pada background */
    
    /* Atur Teks */
    color: #212121;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 1rem;

    /* Sembunyikan secara default */
    opacity: 0;
    
    /* Transisi saat muncul */
    transition: opacity 0.3s ease;
}
.testimonial-ads-overlay p.small {
    font-size: 0.7rem; /* Kecilkan ukuran font (sesuaikan jika perlu) */
    line-height: 1.4;  /* Atur jarak antar baris agar nyaman dibaca */
}
/* 4. Tentukan apa yang terjadi saat di-hover */

/* Saat kartu di-hover, buat gambar blur dan sedikit membesar (efek zoom) */
.testimonial-ads-card:hover img {
    filter: blur(4px) brightness(0.8);
    transform: scale(1.05); /* Efek zoom-in sedikit */
}

/* Saat kartu di-hover, tampilkan overlay */
.testimonial-ads-card:hover .testimonial-ads-overlay {
    opacity: 1;
}
/* =================================== */
/* BAGIAN 9: FOOTER */
/* =================================== */
.footer-link-list li {
    margin-bottom: 0.5rem;
}

.footer-link-list a {
    color: rgba(255, 255, 255, 0.75); /* Putih transparan */
    text-decoration: none;
    transition: all 0.2s ease;
    font-size: 0.9rem;
}

.footer-link-list a:hover {
    color: #fff; /* Putih solid */
    text-decoration: underline;
    padding-left: 4px; /* Efek geser sedikit */
}

.footer-social-icons a {
    color: #fff;
    text-decoration: none;
    margin-right: 0.75rem;
    transition: color 0.2s ease;
}

.footer-social-icons a:hover {
    color: var(--main-green); /* Warna hijau utama */
}

.footer-section .fs-6 {
    font-size: 0.9rem !important;
}

.footer-section p {
    line-height: 1.7;
}
/* =================================== */
/* BAGIAN 10: TESTIMONI */
/* =================================== */

.testimonial-swiper {
    /* overflow: hidden diperlukan agar rounded-corners 
       dari .testimonial-card terlihat */
    overflow: hidden;
    padding: 0.5rem; /* Beri sedikit ruang untuk shadow */
}

.testimonial-card {
    /* Gradien hijau seperti di gambar */
    background: linear-gradient(110deg, var(--main-green) 0%, #a0d468 100%);
    border-radius: 2rem;
    padding: 3rem;
    color: #fff;
    min-height: 350px; /* Atur tinggi minimum */
    
    /* Menambahkan shadow halus */
    box-shadow: 0 1rem 3rem rgba(0, 169, 143, 0.2); 
    
    /* Flexbox untuk mendorong author ke bawah (jika perlu) */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.testimonial-quote {
    font-size: 1.5rem;
    font-weight: 500;
    line-height: 1.4;
    margin-bottom: 2rem;
    /* Pastikan quote bisa memanjang ke bawah */
    flex-grow: 1; 
}

.testimonial-avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    margin-right: 1rem;
    object-fit: cover;
    border: 2px solid rgba(255, 255, 255, 0.5);
    background-color: rgba(255, 255, 255, 0.2); /* Fallback jika img tidak ada */
}

/* Styling Tombol Navigasi Kustom */
.testimonial-nav-prev,
.testimonial-nav-next {
    position: absolute;
    bottom: 3rem; /* Posisikan di dalam kartu */
    z-index: 10;
    width: 40px;
    height: 40px;
    background-color: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.2s ease;
    font-size: 1.2rem;
}

.testimonial-nav-next {
    right: 3rem; /* Posisikan di dalam kartu */
}
.testimonial-nav-prev {
    right: 6rem; /* Posisikan di sebelah tombol next */
}

.testimonial-nav-prev:hover,
.testimonial-nav-next:hover {
    background-color: rgba(255, 255, 255, 0.4);
}
/* =================================== */
/* BAGIAN 11: HALAMAN KONTAK */
/* =================================== */

.contact-section .contact-sub-title {
    font-size: 0.9rem;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.contact-info-item .bi {
    /* Menjaga ikon sejajar dengan baris pertama teks */
    margin-top: 0.25rem; 
}

/* Styling untuk daftar social media */
.contact-social-list .list-group-item {
    padding-left: 0;
    padding-right: 0;
    background-color: transparent; /* Sesuaikan dengan bg-light-gray */
    border-bottom: 1px solid #dee2e6;
}
.contact-social-list .list-group-item:last-child {
    border-bottom: none;
}

.contact-social-list .contact-social-link {
    display: flex;
    align-items: center;
    text-decoration: none;
    color: #212529; /* Warna teks gelap */
    font-weight: 500;
    padding: 0.75rem 0.25rem;
    transition: all 0.2s ease;
}

.contact-social-list .contact-social-link i {
    color: var(--dark-green); /* Warna ikon hijau tua */
    transition: all 0.2s ease;
}

.contact-social-list .contact-social-link:hover {
    color: var(--main-green); /* Teks jadi hijau saat hover */
}
.contact-social-list .contact-social-link:hover i {
    transform: scale(1.1); /* Ikon membesar sedikit */
}

/* Tombol WhatsApp besar baru */
.btn-whatsapp {
    background-color: #0b6c5c; /* Warna resmi WhatsApp */
    color: #fff;
    border-color: #25D366;
    transition: all 0.3s ease;
}

.btn-whatsapp:hover {
    background-color: #1EAE50; /* Warna lebih gelap saat hover */
    color: #fff;
    border-color: #0b6c5c;
    transform: scale(1.02); /* Efek 'lift' */
    box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.1);
}

/* Wrapper untuk Peta */
.map-wrapper {
    overflow: hidden; /* Penting agar iframe mengikuti rounded-4 */
    height: 100%;
    min-height: 450px;
}

.map-wrapper iframe {
    /* Pastikan iframe mengisi penuh wrapper */
    width: 100%;
    height: 100%;
    margin-bottom: -7px; /* Perbaikan umum untuk 'gap' di bawah iframe */
}
.floating-buttons {
    position: fixed; /* Tetap di layar */
    bottom: 20px;
    right: 20px;
    z-index: 1030; /* Di atas elemen lain */
    display: flex;
    flex-direction: column; /* Menumpuk ke atas */
    gap: 10px; /* Jarak antar tombol */
}

/* =================================== */
/* BAGIAN 12: FLOATING BUTTONS        */
/* =================================== */

/* Wadah untuk menampung tombol */
.floating-buttons {
    position: fixed; /* Tetap di layar saat scroll */
    bottom: 20px;    /* Jarak dari bawah */
    right: 20px;     /* Jarak dari kanan */
    z-index: 1000;   /* Pastikan di atas konten lain */
    display: flex;
    flex-direction: column; /* Susun tombol secara vertikal */
    gap: 10px;       /* Jarak antar tombol */
}

/* Style dasar tombol (Anda sudah punya sebagian) */
.btn-floating {
    width: 55px;
    height: 55px;
    border-radius: 50%; /* Membuatnya bulat */
    display: flex;       /* Menggunakan flex untuk ikon di tengah */
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;   /* Ukuran ikon */
    box-shadow: 0 4px 10px rgba(0,0,0,0.15);
    
    /* === WARNA DIPERBARUI === */
    color: white;
    background-color: var(--dark-green); /* Menggunakan warna hijau tua tema Anda */
    
    /* === TAMBAHKAN BORDER PUTIH DI SINI === */
    border: 2px solid white; /* Border putih setebal 2px */
    
    transition: background-color 0.2s ease, transform 0.1s ease; /* Tambah transisi transform */
    text-decoration: none; /* Hapus garis bawah jika ini adalah <a> */
}

.btn-floating:hover {
    color: white;
    background-color: #08584a; /* Warna hijau sedikit lebih gelap saat hover */
    transform: scale(1.05);  /* Efek sedikit membesar saat hover */
}

/* Sembunyikan tombol scroll-to-top secara default */
#scrollTopBtn {
    display: none; /* Tetap disembunyikan awalnya */
}