.close-btn,.overlay{position:fixed;display:flex}.overlay{top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.85);justify-content:center;align-items:center;z-index:10}.close-btn{top:20px;right:20px;font-size:24px;color:#fff;cursor:pointer;background-color:rgba(255,255,255,.3);border-radius:50%;width:40px;height:40px;justify-content:center;align-items:center;box-shadow:0 4px 6px rgba(0,0,0,.1);z-index:20}.close-btn:hover{background-color:rgba(255,255,255,.6)}.social-share{display:flex;gap:1rem;flex-wrap:wrap;justify-content:center;margin:2rem 0 1rem}.social-share a{display:inline-flex;justify-content:center;align-items:center;width:3rem;height:3rem;color:#fff;text-decoration:none;font-size:1.2rem;border-radius:50%;transition:background-color .3s,transform .2s}.social-share a:hover{transform:scale(1.1)}.social-share .btn-facebook{background-color:#4267B2}.social-share .btn-facebook:hover{background-color:#365899}.social-share .btn-twitter{background-color:#1DA1F2}.social-share .btn-twitter:hover{background-color:#0d95e8}.social-share .btn-linkedin{background-color:#0077B5}.social-share .btn-linkedin:hover{background-color:#005582}.social-share .btn-whatsapp{background-color:#25D366}.social-share .btn-whatsapp:hover{background-color:#1ebe57}.pre,.pre-scrollable{max-width:358px;max-height:300px;overflow:auto;white-space:pre-wrap}.container{width:98%}.logo{border-radius:50%}.text-muted a{color:#989898}.text-muted a:hover{color:grey}.fa a:active,a:hover,a:visited{text-decoration:none}.general{background-color:#0095af}.general .card-title,.general .card-text{color:#f3f3f3}.card-pin{display:block;width:100%;height:auto;background-color:gray;transition:.5s ease}.card-pin:hover{opacity:.9;border:5px solid #f3f3f3;background-color:#ffffff}.card-title a,.card-text a,.card-text{color:#fff}.card-description{color:#000}.card-title,.card-text{height:46px;overflow:hidden;margin:0 5px}.card-title{font-weight:bold;font-size:1rem;margin:.25rem .75rem 0}.card-text:last-child{margin-bottom:-26px;margin-left: 0.75rem;}.card-text{margin-top:-10px}figure div{padding:20px}.card-pin:hover .card-title a,.card-pin:hover .card-text a,.card-pin:hover .card-text{color:#000}.suggest{background-color:gray;color:white;border-radius:10px;padding:0 10px 3px;white-space:nowrap}.suggest:hover{background-color:black;color:white;text-decoration:none}.card-body{padding:.5px}
.suggest {
    display: inline-block; /* Agar bisa diberi padding dan margin */
    background-color: #f0f0f0; /* Warna abu-abu muda */
    color: #333; /* Warna teks gelap */
    border-radius: 16px; /* Membuatnya berbentuk pil */
    padding: 5px 15px; /* Memberi ruang di dalam */
    margin: 5px 5px; /* Memberi jarak antar pil */
    font-size: 0.9rem; /* Ukuran font sedikit lebih kecil */
    text-decoration: none;
    transition: all 0.2s ease-in-out;
}

.suggest:hover {
    background-color: #007bff; /* Warna biru saat di-hover */
    color: white; /* Teks menjadi putih */
    text-decoration: none;
    transform: translateY(-2px); /* Efek sedikit terangkat */
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}
.card-pin img.lazyload {
    /* Atur warna latar belakang yang cocok dengan tema Anda */
    background-color: #f0f0f0; 
    /* Pastikan spinner berada di tengah */
    background-image: url('../img/loading.svg');
    background-repeat: no-repeat;
    background-position: center;
    /* Tentukan ukuran spinner agar tidak terlalu besar di kartu kecil */
    background-size: 40px 40px; 
}
.card-pin img.lazyloading {
    /* Anda bisa menambahkan efek transisi di sini jika mau */
    min-height: 150px; /* Atur tinggi minimal agar kartu tidak "loncat" */
}
.article-content img {
    max-width: 100%;
    height: auto;
    display: block; /* Menghilangkan spasi ekstra di bawah gambar */
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
    border-radius: 8px; /* Sudut sedikit melengkung untuk estetika */
    box-shadow: 0 4px 8px rgba(0,0,0,0.1); /* Efek bayangan halus */
}