body {
  overflow-x: hidden;
}


@font-face {
  font-family: 'Digital7';
  src: url('Digital7.woff2') format('woff2'),
       url('Digital7.woff') format('woff'),
       url('/Digital7.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}
#kartun2 {
    position: absolute; /* Mengatur posisi elemen secara absolut */
    right: 65px; /* Jarak dari sisi kanan parent terdekat yang di-positioning */
    top: -140px; /* Jarak dari sisi atas parent terdekat yang di-positioning */
    width: 150px; /* Lebar gambar */
    height: auto; /* Tinggi gambar akan disesuaikan secara proporsional */
}

#isivisitor {
    font-family: 'Digital7', monospace;
    font-size: 16pt;
    color: #33ccff;            /* biru muda (cyan soft) */
    background-color: #000000; /* latar hitam */
    padding: 4px 4px;
    letter-spacing: 3px;
    text-shadow: 0 0 8px #33ccff; /* efek glow biru */
}


/* Gaya untuk Hero Section dengan Gambar Latar Belakang dan Efek Glassmorphism */
#hero-section {
    position: relative; /* Penting untuk posisi pseudo-element */
    background-image: url('bannermb.webp'); /* Ganti dengan path gambar Anda */
    background-size: cover;
    background-position: center;
    overflow: hidden; /* Pastikan konten tidak meluber */
    z-index: 1; /* Pastikan hero-section di atas jika ada elemen lain */
}

/* Layer overlay semi-transparan dengan efek buram */
#hero-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(59, 130, 246, 0.7); /* primary-500 dengan transparansi 85% */
    z-index: -1; /* Posisikan di belakang konten tapi di atas gambar latar */
    backdrop-filter: blur(0px); /* Efek buram seperti kaca */
    -webkit-backdrop-filter: blur(0px); /* Untuk kompatibilitas Safari */
}

/* Dark mode untuk hero section overlay */
html.dark #hero-section::before {
    background-color: rgba(23, 37, 84, 0.7); /* primary-950 dengan transparansi 85% */
}

/* Pastikan teks berada di atas overlay */
#hero-section h1,
#hero-section p {
    position: relative;
    z-index: 2;
}


 




/* Gaya dasar untuk menyembunyikan elemen */
.hidden {
    display: none;
}
/* CSS: kontrol tampil/hide via class, bukan via .css('display', ...) */
 
 

/* Animasi fade-in untuk halaman */
.page {
    animation: fadeIn 0.5s ease-in-out;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fabisi{
    font-size:11pt;}

 

/* Gaya untuk item carousel */
.carousel-item {
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
}

.carousel-item.active {
    opacity: 1;
}

/* Tombol navigasi carousel disembunyikan secara default */
.carousel-nav-btn {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
}

/* Tampilkan tombol navigasi saat wadah carousel di-hover */
.carousel-container:hover .carousel-nav-btn {
    opacity: 1;
    visibility: visible;
}

.phidden{
display:none;

}
/* --- Tambahan Tema Pink dan Ungu --- */


/* Tema Pink */
html.pink {
    background-color: #fce4ec; /* Soft Pink */
    color: #4a148c; /* Deep Purple text */
}

html.pink .bg-white {
    background-color: #f8bbd0; /* Medium Pink */
}

html.pink .dark\:bg-gray-800,
html.pink .bg-gray-800 {
    background-color: #f48fb1; /* Light Rose, lebih cerah */
}

html.pink .text-gray-800 {
    color: #4a148c; /* Deep Purple text */
}

html.pink .text-gray-500 {
    color: #880e4f; /* Darker Pink */
}

html.pink .hover\:bg-gray-200:hover,
html.pink .bg-gray-200 {
    background-color: #f8bbd0; /* Medium Pink, cerah */
}

html.pink .bg-gray-900,
html.pink .dark\:bg-gray-900 {
    background-color: #d81b60; /* Pinkish-Red */
}

/* Tema Biru */
html.blue {
    background-color: #e3f2fd; /* Biru sangat muda, seperti langit cerah */
    color: #0d47a1; /* Biru tua yang mendalam, enak dipandang */
}

html.blue .bg-white {
    background-color: #bbdefb; /* Biru terang yang soft */
}

html.blue .dark\:bg-gray-800,
html.blue .bg-gray-800 {
    background-color: #64b5f6; /* Biru sedang yang nyaman */
}

html.blue .text-gray-800 {
    color: #0d47a1; /* Biru tua yang mendalam */
}

html.blue .text-gray-500 {
    color: #1565c0; /* Biru sedang yang sedikit lebih gelap */
}

html.blue .hover\:bg-gray-200:hover,
html.blue .bg-gray-200 {
    background-color: #90caf9; /* Biru yang sangat lembut */
}

html.blue .bg-gray-900,
html.blue .dark\:bg-gray-900 {
    background-color: #1976d2; /* Biru yang kuat */
}

/* Tema Hijau */
html.green {
    background-color: #f1f8e9; /* Hijau sangat muda (Mint) */
    color: #1b5e20; /* Hijau gelap, seperti daun tua */
}

html.green .bg-white {
    background-color: #c8e6c9; /* Hijau pucat yang soft */
}

html.green .dark\:bg-gray-800,
html.green .bg-gray-800 {
    background-color: #81c784; /* Hijau sedang yang nyaman */
}

html.green .text-gray-800 {
    color: #1b5e20; /* Hijau gelap */
}

html.green .text-gray-500 {
    color: #43a047; /* Hijau sedang yang sedikit lebih gelap */
}

html.green .hover\:bg-gray-200:hover,
html.green .bg-gray-200 {
    background-color: #a5d6a7; /* Hijau sangat lembut */
}

html.green .bg-gray-900,
html.green .dark\:bg-gray-900 {
    background-color: #4caf50; /* Hijau yang kuat */
}

/* Tema Oranye */
html.orange {
    background-color: #fff8f0; /* Oranye sangat muda, hampir krem */
    color: #c05621; /* Coklat oranye tua yang lembut */
}

html.orange .bg-white {
    background-color: #ffe8cc; /* Oranye pucat yang lebih cerah */
}

html.orange .dark\:bg-gray-800,
html.orange .bg-gray-800 {
    background-color: #ffc478; /* Oranye sedang yang cerah */
}

html.orange .text-gray-800 {
    color: #c05621; /* Coklat oranye tua */
}

html.orange .text-gray-500 {
    color: #d97706; /* Oranye tua yang lembut */
}

html.orange .hover\:bg-gray-200:hover,
html.orange .bg-gray-200 {
    background-color: #ffd8a1; /* Oranye sangat lembut */
}

html.orange .bg-gray-900,
html.orange .dark\:bg-gray-900 {
    background-color: #f98a21; /* Oranye sedang yang kuat */
}

/* Tema Ungu */
html.purple {
    background-color: #f3e5f5; /* Ungu sangat muda, hampir putih */
    color: #4a148c; /* Ungu gelap, kontras yang baik */
}

html.purple .bg-white {
    background-color: #e1bee7; /* Ungu muda yang lembut */
}

html.purple .dark\:bg-gray-800,
html.purple .bg-gray-800 {
    background-color: #ba68c8; /* Ungu sedang yang lebih cerah */
}

html.purple .text-gray-800 {
    color: #4a148c; /* Ungu gelap */
}

html.purple .text-gray-500 {
    color: #6a1b9a; /* Ungu tua yang lembut */
}

html.purple .hover\:bg-gray-200:hover,
html.purple .bg-gray-200 {
    background-color: #e1bee7; /* Ungu muda yang lembut */
}

html.purple .bg-gray-900,
html.purple .dark\:bg-gray-900 {
    background-color: #6a1b9a; /* Ungu gelap */
}

/* Tema Kuning */
html.yellow {
    background-color: #fffaf0; /* Kuning super muda, hampir putih tulang */
    color: #a0522d; /* Coklat tua yang lembut, kontras yang pas */
}

html.yellow .bg-white {
    background-color: #fff9c4; /* Kuning terang yang sangat lembut */
}

html.yellow .dark\:bg-gray-800,
html.yellow .bg-gray-800 {
    background-color: #fff176; /* Kuning cerah yang lebih mencolok */
}

html.yellow .text-gray-800 {
    color: #a0522d; /* Coklat tua yang lembut */
}

html.yellow .text-gray-500 {
    color: #c48c00; /* Kuning kecoklatan yang lebih gelap */
}

html.yellow .hover\:bg-gray-200:hover,
html.yellow .bg-gray-200 {
    background-color: #fff8a0; /* Kuning terang yang sangat soft */
}

html.yellow .bg-gray-900,
html.yellow .dark\:bg-gray-900 {
    background-color: #ffc107; /* Kuning yang kuat */
}

/* Aturan Default untuk Light Mode */
#hero-section::before {
    background-color: rgba(59, 130, 246, 0.7); /* Biru default */
}

/* Aturan untuk Dark Mode */
html.dark #hero-section::before {
    background-color: rgba(55, 65, 81, 0.7); /* dark-gray */
}

/* Aturan untuk Tema Kuning */
html.yellow #hero-section::before {
    background-color: rgba(255, 241, 118, 0.7);
}

/* Aturan untuk Tema Oranye */
html.orange #hero-section::before {
    background-color: rgba(255, 170, 68, 0.7);
}

/* Aturan untuk Tema Pink */
html.pink #hero-section::before {
    background-color: rgba(248, 187, 208, 0.7);
}

/* Aturan untuk Tema Biru */
html.blue #hero-section::before {
    background-color: rgba(187, 222, 251, 0.7);
}

/* Aturan untuk Tema Hijau */
html.green #hero-section::before {
    background-color: rgba(200, 230, 201, 0.7);
}

/* Aturan untuk Tema Ungu */
html.purple #hero-section::before {
    background-color: rgba(206, 147, 216, 0.7);
}

/* Aturan untuk Tema Pink */
html.pink #hero-title,
html.pink #hero-subtitle {
    color: #4a148c !important; /* Ungu gelap, sesuai dengan tema pink Anda */
}

/* Aturan untuk Tema Biru */
html.blue #hero-title,
html.blue #hero-subtitle {
    color: #0d47a1 !important; /* Biru tua, sesuai dengan tema biru Anda */
}

/* Aturan untuk Tema Hijau */
html.green #hero-title,
html.green #hero-subtitle {
    color: #1b5e20 !important; /* Hijau gelap, sesuai dengan tema hijau Anda */
}

/* Aturan untuk Tema Kuning */
html.yellow #hero-title,
html.yellow #hero-subtitle {
    color: #a0522d !important; /* Coklat tua, kontras yang baik dengan kuning terang */
}

@media (max-width: 768px) { 
    /* Umum */ 
    
	
	
	#kartun2 {
    position: absolute; /* Mengatur posisi elemen secara absolut */
    right: 5px; /* Jarak dari sisi kanan parent terdekat yang di-positioning */
    top: -70px; /* Jarak dari sisi atas parent terdekat yang di-positioning */
    width: 100px; /* Lebar gambar */
    height: auto; /* Tinggi gambar akan disesuaikan secara proporsional */
}
	
	
	
	
	
	
	
	
	
    }