.line-clamp-1{display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;} .line-clamp-2{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;} .line-clamp-3{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;} .swiper-wrapper{display:flex;transition:transform 0.5s cubic-bezier(0.32,0.74,0.57,1);} .swiper-slide{flex-shrink:0;width:100%;} .no-scrollbar::-webkit-scrollbar{display:none;} .no-scrollbar{-ms-overflow-style:none;scrollbar-width:none;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;} .thumbnail{transition:transform .7s ease;} .group:hover .thumbnail{transform:scale(1.08);} .ticker-track{display:flex;animation:ticker 30s linear infinite;} @keyframes ticker{0%{transform:translateX(0)}100%{transform:translateX(-50%)}} .ticker-track:hover{animation-play-state:paused;} .card-fade{animation:fadeIn 0.5s ease;} @keyframes fadeIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}} .glass{backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);} .prose{min-width:0;overflow-wrap:anywhere;word-break:normal;} .prose p{margin-top:0;margin-bottom:1em;} .prose h1,.prose h2,.prose h3,.prose h4,.prose h5,.prose h6{margin-top:1.5em;margin-bottom:0.75em;font-weight:700;line-height:1.3;} .prose p,.prose h1,.prose h2,.prose h3,.prose h4,.prose h5,.prose h6,.prose li,.prose blockquote,.prose td,.prose th{max-width:100%;overflow-wrap:anywhere;} .prose img,.prose video,.prose iframe,.prose embed,.prose object,.prose table{max-width:100% !important;height:auto;} .prose pre{white-space:pre-wrap;word-break:break-word;max-width:100%;overflow-x:auto;} .prose .article-tag-link{color:#0284c7;} .dark .prose .article-tag-link{color:#38bdf8;} .breadcrumb-item{display:inline-flex;align-items:center;gap:0.5rem;} .breadcrumb-item > a,.breadcrumb-item > span{white-space:nowrap;} @media (max-width:640px){ .breadcrumb{padding:0.25rem 0;} .breadcrumb-item > a,.breadcrumb-item > span{line-height:1.25;} } .nav-group .nav-dropdown{opacity:0;visibility:hidden;transform:translateY(6px);transition:opacity .18s ease,transform .18s ease,visibility 0s linear .18s;} .nav-group:hover .nav-dropdown,.nav-group:focus-within .nav-dropdown{opacity:1;visibility:visible;transform:translateY(0);transition:opacity .18s ease .25s,transform .18s ease .25s,visibility 0s linear .25s;} .sosmed-scroll{scrollbar-width:thin;scrollbar-color:rgba(148,163,184,.5) transparent;} .sosmed-scroll::-webkit-scrollbar{width:6px;} .sosmed-scroll::-webkit-scrollbar-track{background:transparent;} .sosmed-scroll::-webkit-scrollbar-thumb{background:rgba(148,163,184,.5);border-radius:9999px;} .sosmed-scroll::-webkit-scrollbar-thumb:hover{background:rgba(148,163,184,.75);} @media (min-width:1024px){.sosmed-sticky{position:-webkit-sticky;position:sticky;top:5rem;align-self:flex-start;width:100%;max-height:calc(100vh - 6rem);overflow-y:auto;overscroll-behavior:contain;}} body{background-image:radial-gradient(circle at 1px 1px, rgba(14,165,233,0.05) 1px, transparent 0);background-size:22px 22px;} .dark body{background-image:radial-gradient(circle at 1px 1px, rgba(56,189,248,0.06) 1px, transparent 0);} .reveal{opacity:0;transform:translateY(28px);transition:opacity .7s cubic-bezier(.22,1,.36,1),transform .7s cubic-bezier(.22,1,.36,1);} .reveal.visible{opacity:1;transform:translateY(0);} .shimmer-effect{background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,0.18) 50%,transparent 60%);background-size:250% 100%;animation:shimmer 3.5s ease-in-out infinite;} @keyframes shimmer{0%{background-position:250% 0}100%{background-position:-250% 0}} @media (max-width:1023px){#hero-grid{display:contents;}} @media (max-width:639px){ #pilihan-track .relative.h-40{height:5.5rem;} #pilihan-track .p-4{padding:.5rem;} #pilihan-track h3{font-size:11px;line-height:1.3;margin-bottom:.25rem;} #pilihan-track span.absolute{font-size:8px;padding:.1rem .35rem;top:.35rem;left:.35rem;} #pilihan-track .text-\[10px\]{font-size:9px;} #pilihan-track .text-\[10px\] svg,#pilihan-track .text-\[10px\] span:nth-child(3),#pilihan-track .text-\[10px\] span:nth-child(4){display:none;} } #side-drawer .d-item{opacity:0;transform:translateX(26px);transition:opacity .35s ease,transform .45s cubic-bezier(0.32,0.72,0,1);} #side-drawer.open .d-item{opacity:1;transform:translateX(0);} #side-drawer.open .d-item:nth-child(1){transition-delay:.05s} #side-drawer.open .d-item:nth-child(2){transition-delay:.10s} #side-drawer.open .d-item:nth-child(3){transition-delay:.15s} #side-drawer.open .d-item:nth-child(4){transition-delay:.20s} #side-drawer.open .d-item:nth-child(5){transition-delay:.25s} #side-drawer.open .d-item:nth-child(6){transition-delay:.30s} #side-drawer.open .d-item:nth-child(7){transition-delay:.35s} #side-drawer.open .d-item:nth-child(8){transition-delay:.40s} #side-drawer.open .d-item:nth-child(9){transition-delay:.45s} #side-drawer.open .d-item:nth-child(10){transition-delay:.50s} #side-drawer.open .d-item:nth-child(11){transition-delay:.55s} #side-drawer.open .d-item:nth-child(12){transition-delay:.60s} #side-drawer.open .d-item:nth-child(13){transition-delay:.65s} #side-drawer{transform:translateX(120%);} #side-drawer.open{transform:translateX(0);} .staff-header{display:flex;align-items:center;gap:16px;padding:16px;border-radius:0;border:1px solid #000;background:#fff;color:#000;margin-bottom:18px;box-shadow:none;} .staff-header .avatar{width:64px;height:64px;border-radius:0;object-fit:cover;border:1px solid #000;background:#fff;flex-shrink:0;} .staff-header .meta{flex:1;min-width:0;} .staff-header .name{font-size:22px;font-weight:800;margin:0;color:#000;line-height:1.25;} .staff-header .sub{margin-top:6px;display:flex;gap:10px;flex-wrap:wrap;align-items:center;} .staff-badge{padding:6px 10px;border-radius:0;font-size:12px;font-weight:700;background:#000;color:#fff;} .staff-stat{font-size:13px;color:#000;} .staff-stat b{color:#000;} .staff-header .actions a{padding:8px 12px;border-radius:0;background:#fff;color:#000;border:1px solid #000;text-decoration:none;font-weight:700;white-space:nowrap;transition:background .15s ease,color .15s ease;} .staff-header .actions a:hover{background:#000;color:#fff;} .dark .staff-header{background:#000;color:#fff;border-color:#fff;} .dark .staff-header .avatar{border-color:#fff;background:#000;} .dark .staff-header .name{color:#fff;} .dark .staff-stat{color:#fff;} .dark .staff-stat b{color:#fff;} .dark .staff-badge{background:#fff;color:#000;} .dark .staff-header .actions a{background:#000;color:#fff;border-color:#fff;} .dark .staff-header .actions a:hover{background:#fff;color:#000;} .vr-pagination{display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem;margin-top:1.5rem;} .vr-pagination a,.vr-pagination span{display:inline-flex;align-items:center;justify-content:center;min-width:2.25rem;height:2.25rem;padding:0 .75rem;border-radius:9999px;font-size:.875rem;font-weight:600;background:#fff;color:#475569;border:1px solid #e2e8f0;transition:all .2s ease;} .dark .vr-pagination a,.dark .vr-pagination span{background:#171717;color:#a3a3a3;border-color:#262626;} .vr-pagination a:hover{border-color:#38bdf8;color:#0284c7;} .vr-pagination .active{background:#0ea5e9;border-color:#0ea5e9;color:#fff;}

/* Teks panjang tanpa spasi (judul/teaser/konten) tidak boleh keluar dari kartu */
h1,h2,h3,h4,h5,h6,p,figcaption,li,blockquote,th,td{overflow-wrap:break-word;}
/* Mobile: artikel memakai ukuran huruf paling kecil & rata kiri agar rapat */
@media (max-width:767.98px){.prose{font-size:14px;text-align:left;}}

/* =========================================================
   Bingkai gambar + caption di dalam isi artikel:
   gambar tidak melebar penuh (dibatasi), responsif & rapi.
   ========================================================= */
.prose figure.article-figure,.article-figure{
    box-sizing:border-box;
    max-width:min(100%,660px);
    margin:1.75rem auto;
    padding:.55rem .55rem .7rem;
    background:#fff;
    border:1px solid #e5e7eb;
    border-radius:.9rem;
    box-shadow:0 2px 12px rgba(15,23,42,.06);
    clear:both;
}
.dark .prose figure.article-figure,
.dark .article-figure{background:#1c1d21;border-color:#2b2d33;}
.prose figure.article-figure img,.article-figure img{
    display:block;
    width:auto;
    max-width:100%;
    max-height:min(66vw,500px);
    height:auto;
    object-fit:contain;
    border-radius:.55rem;
    margin:0 auto;
}
.prose figure.article-figure figcaption,.article-figure figcaption{
    font-size:.8125rem;
    line-height:1.55;
    color:#64748b;
    text-align:center;
    margin:.6rem 0 0;
    padding:0 .4rem;
    font-style:normal;
}
.dark .prose figure.article-figure figcaption,
.dark .article-figure figcaption{color:#94a3b8;}
@media (max-width:639.98px){
    .prose figure.article-figure,.article-figure{
        max-width:100%;
        padding:.45rem .45rem .6rem;
        margin:1.25rem auto;
        border-radius:.75rem;
    }
    .prose figure.article-figure img,.article-figure img{
        max-height:min(52vw,340px);
        border-radius:.5rem;
    }
    .prose figure.article-figure figcaption,.article-figure figcaption{font-size:.75rem;margin-top:.45rem;}
}

/* =========================================================
   Galeri artikel: gambar utama & tambahan tampil UTUH (contain),
   batas tinggi proporsional — sama rapi di desktop maupun mobile
   (tidak terpotong & tidak kepanjangan/kependekan).
   ========================================================= */
#gal-wrap{background:#eef1f5;}
.dark #gal-wrap{background:#181a1f;}
#gal-wrap .gal-slide{
    display:flex;
    align-items:center;
    justify-content:center;
}
#gal-wrap .gal-slide img{
    width:auto;
    max-width:100%;
    max-height:min(58vw,70vh);
    height:auto;
    object-fit:contain;
    margin:0 auto;
    cursor:zoom-in;
}
@media (max-width:767.98px){
    #gal-wrap .gal-slide img{max-height:56vh;}
}

/* Gambar utama artikel tanpa galeri (utuh, contain) */
.article-hero-img{
    display:block;
    width:auto;
    max-width:100%;
    max-height:min(58vw,70vh);
    height:auto;
    object-fit:contain;
    margin:0 auto;
}
@media (max-width:767.98px){.article-hero-img{max-height:56vh;}}

/* Gambar di isi konten (figure) — kursor zoom */
.prose figure.article-figure img{cursor:zoom-in;}

/* =========================================================
   Gambar lama hasil impor (mis. WordPress) — bentuk aslinya:
   <div><a><img class="featured-image wp-post-image"></a></div>
   diikuti <figcaption> yang LEPAS (di luar figure). Tanpa CSS,
   gambar tampil melebar penuh tanpa bingkai. Aturan di bawah
   menyulapnya senada dengan bingkai "Tambah Gambar": dibatasi
   (lebih kecil dari gambar utama) + keterangan menyatu di bawah.
   :has() didukung semua browser modern (2023+); bila tidak
   didukung, gambar kembali ke tampilan polos (aman).
   ========================================================= */
.prose div:has(> a > img.featured-image),
.prose div:has(> a > img.wp-post-image),
.prose div:has(> a > img[src*="/uploads/images/"]){
    box-sizing:border-box;
    max-width:min(100%,660px);
    margin:1.75rem auto .1rem;
    padding:.55rem .55rem .55rem;
    background:#fff;
    border:1px solid #e5e7eb;
    border-radius:.9rem;
    box-shadow:0 2px 12px rgba(15,23,42,.06);
    clear:both;
}
.dark .prose div:has(> a > img.featured-image),
.dark .prose div:has(> a > img.wp-post-image),
.dark .prose div:has(> a > img[src*="/uploads/images/"]){background:#1c1d21;border-color:#2b2d33;}
.prose div:has(> a > img.featured-image) img,
.prose div:has(> a > img.wp-post-image) img,
.prose div:has(> a > img[src*="/uploads/images/"]) img{
    display:block;
    width:auto;
    max-width:100%;
    max-height:min(58vw,500px);
    height:auto;
    object-fit:contain;
    border-radius:.55rem;
    margin:0 auto;
    cursor:zoom-in;
}
/* Keterangan lama yang terpisah (langsung di bawah bingkai) —
   dirapikan agar tampak menyatu dengan bingkai gambar. */
.prose > figcaption{
    box-sizing:border-box;
    max-width:min(100%,660px) !important;
    margin:0 auto 1.75rem !important;
    padding:7px 12px 9px !important;
    font-size:13px !important;
    line-height:1.55 !important;
    color:#64748b !important;
    text-align:center !important;
    background:#fff;
    border:1px solid #e5e7eb;
    border-top:0;
    border-radius:0 0 .9rem .9rem;
    box-shadow:0 2px 12px rgba(15,23,42,.06);
    overflow-wrap:break-word;
}
.dark .prose > figcaption{
    background:#1c1d21;
    border-color:#2b2d33;
    color:#94a3b8 !important;
}
@media (max-width:639.98px){
    .prose div:has(> a > img.featured-image),
    .prose div:has(> a > img.wp-post-image),
    .prose div:has(> a > img[src*="/uploads/images/"]){
        max-width:100%;
        padding:.45rem .45rem .45rem;
        margin:1.25rem auto .1rem;
        border-radius:.75rem;
    }
    .prose div:has(> a > img.featured-image) img,
    .prose div:has(> a > img.wp-post-image) img,
    .prose div:has(> a > img[src*="/uploads/images/"]) img{max-height:min(52vw,340px);border-radius:.5rem;}
    .prose > figcaption{
        max-width:100% !important;
        margin-bottom:1.25rem !important;
        padding:6px 10px 8px !important;
        font-size:12px !important;
        border-radius:0 0 .75rem .75rem;
    }
}

/* =========================================================
   LIGHTBOX pratinjau gambar artikel
   ========================================================= */
#ntLb{
    position:fixed;
    inset:0;
    z-index:1200;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    padding:16px;
    box-sizing:border-box;
}
#ntLb.hidden{display:none;}
.ntlb-backdrop{
    position:absolute;
    inset:0;
    background:rgba(3,7,18,.93);
    backdrop-filter:blur(6px);
    -webkit-backdrop-filter:blur(6px);
}
.ntlb-stage{
    position:relative;
    z-index:2;
    display:flex;
    align-items:center;
    justify-content:center;
    width:100%;
    max-width:min(94vw,1100px);
    flex:1 1 auto;
    min-height:0;
}
#ntLbImg{
    max-width:min(94vw,1080px);
    max-height:calc(100vh - 190px);
    width:auto;
    height:auto;
    object-fit:contain;
    border-radius:14px;
    box-shadow:0 24px 80px rgba(0,0,0,.55);
}
.ntlb-cap{
    position:relative;
    z-index:2;
    margin-top:12px;
    color:#e2e8f0;
    font-size:14px;
    line-height:1.6;
    text-align:center;
    max-width:min(88vw,780px);
    padding:0 96px;
}
.ntlb-count{
    position:relative;
    z-index:2;
    margin-top:6px;
    color:#94a3b8;
    font-size:12px;
    letter-spacing:.04em;
}
.ntlb-btn{
    position:absolute;
    z-index:3;
    display:flex;
    align-items:center;
    justify-content:center;
    border:0;
    cursor:pointer;
    color:#fff;
    background:rgba(255,255,255,.16);
    border-radius:9999px;
    box-shadow:0 4px 18px rgba(0,0,0,.35);
    transition:background .15s ease,transform .15s ease;
    line-height:1;
}
.ntlb-btn:hover{background:rgba(255,255,255,.32);transform:scale(1.05);}
.ntlb-close{top:14px;right:14px;width:42px;height:42px;font-size:15px;}
.ntlb-prev,.ntlb-next{top:50%;transform:translateY(-50%);width:50px;height:50px;font-size:30px;padding-bottom:4px;}
.ntlb-prev{left:12px;}
.ntlb-next{right:12px;}
.ntlb-prev:hover,.ntlb-next:hover{transform:translateY(-50%) scale(1.06);}
body.ntlb-open{overflow:hidden;}
@media (max-width:639.98px){
    #ntLbImg{max-height:calc(100vh - 210px);border-radius:10px;}
    .ntlb-cap{font-size:12.5px;padding:0 40px;max-width:94vw;margin-top:10px;}
    .ntlb-close{top:10px;right:10px;width:36px;height:36px;}
    .ntlb-prev,.ntlb-next{width:40px;height:40px;font-size:24px;background:rgba(0,0,0,.35);}
    .ntlb-prev{left:6px;}
    .ntlb-next{right:6px;}
}