/* Efek Hover pada Card Info */
.card {
    transition: transform 0.3s ease, shadow 0.3s ease;
}

.card:hover {
    transform: translateY(-10px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.1) !important;
}

/* Animasi untuk Judul Hero */
.carousel-caption h1 {
    animation: fadeInUp 1s ease-in-out;
}

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

body {
    background-color: #121212; /* Hitam soft (tidak terlalu kontras di mata) */
    color: white; /* Agar semua teks otomatis jadi putih */
}

/* Pastikan card dan elemen lainnya tetap terlihat bagus */
.card {
    background-color: #1e1e1e; /* Card sedikit lebih terang dari background */
    color: white;
}

/* Styling Footer Utama */
.footer-purple {
    background-color: #1a1025; /* Ungu gelap yang sangat serasi dengan bg hitam #121212 */
    border-top: 2px solid #4a148c; /* Garis tipis ungu di atas footer */
}

/* Link di Footer */
.footer-link {
    color: #b39ddb;
    text-decoration: none;
    font-size: 0.9rem;
    transition: 0.3s;
}

.footer-link:hover {
    color: #bb86fc;
    padding-left: 5px;
}

/* Icon Sosial Media */
.footer-icon {
    color: #bb86fc;
    font-size: 1.5rem;
    transition: transform 0.3s ease;
}

.footer-icon:hover {
    color: white;
    transform: scale(1.2);
}

/* Mengatur teks sekunder agar tetap terbaca */
.text-secondary {
    color: #a193b0 !important;
}

/* Gaya untuk Badge dan Tombol */
.bg-purple {
    background-color: #6f42c1 !important;
}

.text-purple {
    color: #bb86fc !important;
}

.btn-outline-purple {
    border-color: #bb86fc;
    color: #bb86fc;
}

.btn-outline-purple:hover {
    background-color: #bb86fc;
    color: #121212;
}

/* Gambar Utama agar ada efek zoom saat hover */
.main-news-img {
    height: 400px;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.card:hover .main-news-img {
    transform: scale(1.05);
}

/* Judul Berita Kecil agar berubah warna saat hover */
h6.text-light:hover {
    color: #bb86fc !important;
    cursor: pointer;
}

/* Garis bawah tipis untuk judul section */
.border-purple {
    border-color: #6f42c1 !important;
}

/* Card khusus untuk promo E-book */
.border-purple-thin {
    border: 1px solid #6f42c1 !important;
}

.bg-dark-purple {
    background-color: #1a1025 !important; /* Senada dengan footer */
}

/* Efek angkat saat card di-hover */
.custom-card-hover {
    transition: transform 0.3s ease;
}

.custom-card-hover:hover {
    transform: translateY(-8px);
}

.btn-purple {
    background-color: #6f42c1;
    color: white;
    transition: 0.3s;
}

.btn-purple:hover {
    background-color: #5a32a3;
    color: white;
}

/* Container gambar untuk kliping animasi */
.img-wrapper {
    overflow: hidden;
    border-radius: 8px;
    flex-shrink: 0;
}

.img-wrapper img {
    object-fit: cover;
    transition: all 0.4s ease;
}

/* Efek saat baris berita di-hover */
.news-list-item:hover .img-wrapper img {
    transform: scale(1.1) rotate(2deg);
    filter: brightness(1.2);
}

.news-list-item:hover h6 {
    color: #bb86fc !important;
    transition: 0.3s;
}

/* Styling Iklan */
.bg-purple-dark {
    background-color: #1a1025 !important;
}

.border-dashed {
    border: 1px dashed #4a148c !important;
}

.ads-container img {
    transition: opacity 0.3s;
}

.ads-container img:hover {
    opacity: 0.8;
}

.tech-card {
    transition: background-color 0.3s ease;
}

.tech-card:hover {
    background-color: #1f1f1f !important; /* Sedikit lebih terang dari bg hitam */
}

.bg-purple-dark {
    background-color: #1a1025;
}

/* Mengubah warna garis tombol hamburger jadi ungu */
.navbar-toggler {
    border-color: #6f42c1;
}

.navbar-toggler-icon {
    filter: invert(41%) sepia(82%) saturate(2758%) hue-rotate(242deg) brightness(88%) contrast(93%);
}

/* Biar pas menu mobile kebuka, background-nya tetep ungu gelap */
@media (max-width: 991px) {
    .navbar-collapse {
        background-color: #1a1025;
        padding: 15px;
        border-radius: 8px;
        margin-top: 10px;
    }
}

/* Efek Gradasi Hitam pada Gambar Utama */
.bg-gradient-dark {
    background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.3) 50%, transparent 100%);
}

/* Card Berpendar (Glow) */
.glow-card {
    transition: all 0.5s ease;
    border: 1px solid rgba(139, 90, 228, 0.1) !important;
}

.glow-card:hover {
    box-shadow: 0 0 30px rgba(139, 90, 228, 0.4) !important;
    transform: scale(1.01);
}

/* Efek Mengangkat saat di-hover */
.hover-lift {
    transition: transform 0.3s ease, background-color 0.3s ease;
    cursor: pointer;
}

.hover-lift:hover {
    transform: translateX(10px);
    background-color: #1f1f1f !important;
}

/* Badge khusus */
.bg-purple-dark {
    background-color: #1a1025 !important;
}

.w-fit {
    width: fit-content;
}

.text-purple {
    color: #bb86fc !important;
}

.bg-purple-dark {
    background-color: #1a1025 !important;
}

.border-purple {
    border-color: #4a148c !important;
}

.hover-lift {
    transition: transform 0.3s ease;
    cursor: pointer;
}

.hover-lift:hover {
    transform: translateY(-10px);
    background-color: #2d1b40 !important;
}

.bg-gradient-dark {
    background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);
}

body {
    padding-top: 70px; /* Sesuaikan dengan tinggi navbar kamu */
}