.video-thumb {
    position: relative;
    overflow: hidden;
    border-radius: 20px;
    aspect-ratio: 16 / 9;
}

.video-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Lingkaran */
.video-thumb::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;

    width: 70px;
    height: 70px;

    background: rgba(255,255,255,.9);
    border-radius: 50%;

    transform: translate(-50%, -50%);
    z-index: 10;
}

/* Segitiga */
.video-thumb::after {
    content: "▶";
    position: absolute;

    top: 50%;
    left: 50%;

    transform: translate(-40%, -50%);

    font-size: 32px;
    line-height: 1;
    color: #000;

    z-index: 11;
}
/*////////////*/
.related-heading {
font-size: 20px;
font-weight: 700;
margin: 20px 0;
}

.related-grid {
display: grid;
grid-template-columns: 1fr;
gap: 15px;
}

.related-card {
position: relative;
display: block;
height: 220px;
overflow: hidden;
border-radius: 12px;
text-decoration: none;
}

.related-card img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}

.related-overlay {
position: absolute;
inset: 0;
background: linear-gradient(
to top,
rgba(0,0,0,.8),
rgba(0,0,0,.2),
transparent
);
}

.related-content {
position: absolute;
left: 0;
right: 0;
bottom: 0;
padding: 12px;
color: #fff;
}

.related-category {
display: inline-block;
padding: 4px 10px;
border-radius: 20px;
font-size: 12px;
background: rgba(255,255,255,.2);
margin-bottom: 6px;
}

.related-title {
font-size: 16px;
font-weight: 600;
line-height: 1.4;
margin-bottom: 5px;
}

.related-date {
font-size: 12px;
opacity: .85;
}

/* DESKTOP */
@media (min-width: 769px) {
.related-grid {
grid-template-columns: repeat(3, 1fr);
}
}
ai-feature-list{    
margin:20px 0;    
padding:0;    
list-style:none;    
font-family:Arial,sans-serif;    
}    
    
.ai-feature-list > li{    
background:#fff;    
border:1px solid #e5e5e5;    
border-radius:14px;    
padding:18px;    
margin-bottom:18px;    
box-shadow:0 3px 10px rgba(0,0,0,.05);    
transition:.3s;    
}    
    
.ai-feature-list > li:hover{    
transform:translateY(-2px);    
box-shadow:0 6px 18px rgba(0,0,0,.08);    
}    
    
.ai-feature-list strong{    
display:block;    
font-size:18px;    
color:#ff3d00;    
margin-bottom:10px;    
}    
    
.ai-feature-list p{    
margin:8px 0;    
line-height:1.7;    
color:#444;    
font-size:15px;    
}    
    
.ai-feature-list em{    
color:#111;    
font-style:italic;    
}    
    
.ai-feature-list ul{    
margin-top:10px;    
padding-left:20px;    
}    
    
.ai-feature-list ul li{    
margin-bottom:8px;    
color:#555;    
line-height:1.6;    
}    
    
    
.it-topline{    
    position: fixed;    
    top: 0;    
    left: 0;    
    width: 100%;    
    height: 3px;    
    background: linear-gradient(    
        90deg,    
        #ff6b35,    
        #ff914d,    
        #ffb347    
    );    
    z-index: 99999;    
}    
    
.it-animated-line{    
    position:fixed;    
    top:0;    
    left:0;    
    width:100%;    
    height:4px;    
    background:linear-gradient(    
        90deg,    
        #ff0000,    
        #00ffcc,    
        #0066ff,    
        #ff0000    
    );    
    background-size:300% 100%;    
    animation:itmove 5s linear infinite;    
    z-index:9999;    
}    
    
@keyframes itmove{    
    0%{    
        background-position:0% 0%;    
    }    
    100%{    
        background-position:300% 0%;    
    }    
}    
    
.it-topline{    
    position: fixed;    
    top: 0;    
    left: 0;    
    width: 100%;    
    height: 3px;    
    background: linear-gradient(    
        90deg,    
        #ff6b35,    
        #ff914d,    
        #ffb347    
    );    
    z-index: 99999;    
}    
@keyframes itmove{    
    0%{    
        background-position:0% 0%;    
    }    
    100%{    
        background-position:300% 0%;    
    }    
}    
    
    
pre{    
    background:#1e1e1e;    
    color:#f5f5f5;    
    padding:14px;    
    border-radius:8px;    
    overflow:auto;    
    font-size:14px;    
    line-height:1.6;    
    border:1px solid #444;    
}    
    
code{    
    font-family:Consolas, monospace;    
    color:#00ff9d;    
}    
.library-media{    
    position:relative;    
    overflow:hidden;    
    border-radius:16px;    
}    
    
.library-media img{    
    width:100%;    
    display:block;    
    height:220px;    
    object-fit:cover;    
}    
.library-overlay{    
    position:absolute;    
    left:0;    
    right:0;    
    bottom:0;    
    padding:26px 18px 14px;    
    background:linear-gradient(    
        to top,    
        rgba(0,0,0,.85),    
        rgba(0,0,0,.35),    
        transparent    
    );    
}    
    
    
.library-overlay-title{    
    color:#fff;    
    font-size:18px;    
    font-weight:700;    
    line-height:1.4;    
    text-shadow:0 2px 8px rgba(0,0,0,.5);    
}    
    
.library-body{    
    padding-top:12px;    
}    
    
.library-meta{    
    display:flex;    
    flex-wrap:wrap;    
    gap:10px;    
    font-size:13px;    
    color:#999;    
    margin-bottom:10px;    
}    
    
.library-desc{    
    font-size:14px;    
    line-height:1.6;    
    color:var(--text-color);    
}    
    
    
.logon{    
    text-align:center;    
}    
    
.logon img{    
    width:250px;    
    height:auto;    
    display:inline-block;    
}    
..logon img{    
    max-width:20px;    
    height:auto;    
}    
.article-box{    
    background:#111;    
    border-radius:16px;    
    padding:18px;    
    margin-bottom:20px;    
    border:1px solid #222;    
}    
    
.article-title{    
    font-size:24px;    
    font-weight:700;    
    line-height:1.5;    
    color:#fff;    
    margin-bottom:10px;    
}    
    
.article-meta{    
    display:flex;    
    gap:15px;    
    font-size:13px;    
    color:#999;    
    margin-bottom:15px;    
}    
    
.article-thumb{    
    width:100%;    
    border-radius:14px;    
    margin-bottom:18px;    
    object-fit:cover;    
}    
    
.article-content{    
    font-size:15px;    
    line-height:1.8;    
    color:#ddd;    
}    
    
.article-content h2{    
    font-size:20px;    
    color:#fff;    
    margin-top:24px;    
    margin-bottom:12px;    
}    
    
.article-content h3{    
    font-size:17px;    
    color:#fff;    
    margin-top:18px;    
    margin-bottom:10px;    
}    
    
.article-content p{    
    margin-bottom:15px;    
}    
    
.dns-card{    
    background:#181818;    
    border:1px solid #2b2b2b;    
    border-radius:14px;    
    padding:15px;    
    margin-bottom:18px;    
}    
    
.code-box{    
    background:#0d0d0d;    
    color:#00ff88;    
    padding:12px;    
    border-radius:10px;    
    font-family:monospace;    
    overflow:auto;    
    margin:12px 0;    
    border:1px solid #222;    
}    
    
.step-list{    
    padding-left:20px;    
}    
    
.step-list li{    
    margin-bottom:10px;    
}    
    
.article-content ul{    
    padding-left:20px;    
}    
    
.article-content li{    
    margin-bottom:8px;    
}    
    
    
    
.lib-wrap{    
    display:flex;    
    flex-direction:column;    
    gap:14px;    
}    
    
.lib-item{    
    display:flex;    
    gap:12px;    
    padding:12px;    
    border-radius:14px;    
    background:var(--card-bg);    
    border:1px solid var(--border-color);    
    text-decoration:none;    
    color:inherit;    
}    
    
.lib-thumb img{    
    width:90px;    
    height:90px;    
    border-radius:10px;    
    object-fit:cover;    
}    
    
.lib-content{    
    flex:1;    
    min-width:0;    
}    
    
.lib-title{    
    font-size:14px;    
    font-weight:700;    
    margin-bottom:6px;    
}    
    
.lib-meta{    
    font-size:11px;    
    color:var(--text-muted);    
    margin-bottom:6px;    
}    
    
.lib-desc{    
    font-size:12px;    
    color:var(--text-muted);    
    line-height:1.5;    
    
    display:-webkit-box;    
    -webkit-line-clamp:2;    
    -webkit-box-orient:vertical;    
    overflow:hidden;    
}    
    
    
/* =======================    
   POPUP GAMBAR    
======================= */    
#popupGambar{    
    display:none;    
    position:fixed;    
    z-index:9999;    
    left:0;    
    top:0;    
    width:100%;    
    height:100%;    
    background:rgba(0,0,0,0.8);    
}    
    
#popupGambar img{    
    display:block;    
    max-width:100%;    
    max-height:100%;    
    margin:auto;    
    margin-top:5%;    
    background:#fff;    
    padding:5px;    
}    
    
#popupGambar span{    
    position:absolute;    
    top:15px;    
    right:25px;    
    color:#fff;    
    font-size:40px;    
    cursor:pointer;    
}    
    
/* =======================    
   FORUM    
======================= */    
.forum-box{    
    background:var(--card-bg);    
    border:1px solid var(--border-color);    
    border-radius:14px;    
    overflow:hidden;    
    margin:15px 0;    
}    
    
.forum-header{    
    display:flex;    
    justify-content:space-between;    
    align-items:center;    
    padding:16px;    
    border-bottom:1px solid var(--border-color);    
}    
    
.forum-header h2{    
    margin:0;    
    font-size:22px;    
    font-weight:700;    
    color:var(--text-color);    
}    
    
.forum-header a{    
    color:var(--text-muted);    
    text-decoration:none;    
}    
    
.forum-item{    
    display:flex;    
    justify-content:space-between;    
    gap:15px;    
    padding:10px 16px;    
    border-bottom:1px solid var(--border-color);    
}    
    
.forum-item:last-child{    
    border-bottom:none;    
}    
    
.forum-left{    
    flex:1;    
    min-width:0;    
}    
    
.forum-title{    
    display:block;    
    font-size:20px;    
    font-weight:700;    
    color:var(--text-color);    
    text-decoration:none;    
    white-space:nowrap;    
    overflow:hidden;    
    text-overflow:ellipsis;    
}    
    
.forum-title:hover{    
    text-decoration:underline;    
}    
    
.forum-meta{    
    margin-top:10px;    
    font-size:15px;    
    line-height:1.5;    
    color:var(--text-muted);    
}    
    
.forum-meta a{    
    color:var(--link-color, var(--text-color));    
    text-decoration:none;    
}    
    
.forum-meta a:hover{    
    text-decoration:underline;    
}    
    
.forum-time{    
    font-size:15px;    
    color:var(--text-muted);    
    white-space:nowrap;    
}    
    
/* =======================    
   HEADER    
======================= */    
.it-header{    
    display:flex;    
    align-items:center;    
    justify-content:space-between;    
    background:#fff;    
    padding:10px 15px;    
    box-shadow:0 2px 8px rgba(0,0,0,0.1);    
}    
    
.it-menu-btn,    
.it-login-btn{    
    background:none;    
    border:none;    
    font-size:32px;    
    color:#666;    
    cursor:pointer;    
}    
    
.it-login-btn{    
    color:#4a5568;    
}    
    
.it-logo-wrap{    
    margin-left:-120px;    
}    
    
.it-logo-wrap img{    
    height:55px;    
    display:block;    
}    
    
/* =======================    
   LOGO GROUP    
======================= */    
.logos{    
    display:flex;    
    justify-content:flex-start;    
    align-items:flex-start;    
    gap:10px;    
}    
    
.logos img{    
    height:40px;    
}    
    
/* =======================    
   LIBRARY    
======================= */    
.library-box{    
    display:flex;    
    flex-direction:column;    
    gap:18px;    
}    
    
/* CARD */    
.library-card{    
    display:block;    
    background:var(--card-bg);    
    border:1px solid var(--border-color);    
    border-radius:16px;    
    overflow:hidden;    
    text-decoration:none;    
    color:inherit;    
    transition:0.25s ease;    
}    
    
.library-card:hover{    
    transform:translateY(-4px);    
    box-shadow:0 10px 30px rgba(0,0,0,0.08);    
}    
    
/* IMAGE */    
.library-media img{    
    width:100%;    
    height:200px;    
    object-fit:cover;    
    display:block;    
}    
    
/* BODY */    
.library-body{    
    padding:14px 16px;    
}    
    
/* TITLE */    
.library-title{    
    font-size:15px;    
    font-weight:700;    
    line-height:1.4;    
    margin-bottom:8px;    
}    
    
/* META */    
.library-meta{    
    display:flex;    
    flex-wrap:wrap;    
    gap:10px;    
    font-size:12px;    
    color:var(--text-muted);    
    margin-bottom:10px;    
}    
    
/* DESC */    
.library-desc{    
    font-size:13px;    
    line-height:1.6;    
    color:var(--text-muted);    
    
    display:-webkit-box;    
    -webkit-line-clamp:3;    
    -webkit-box-orient:vertical;    
    overflow:hidden;    
}    
    
    
.lib-list{    
    display:flex;    
    flex-direction:column;    
    gap:14px;    
}    
    
/* CARD */    
.lib-card{    
    display:flex;    
    gap:12px;    
    padding:12px;    
    border-radius:14px;    
    background:var(--card-bg);    
    border:1px solid var(--border-color);    
    text-decoration:none;    
    color:inherit;    
    transition:0.2s;    
}    
    
.lib-card:hover{    
    transform:translateY(-2px);    
}    
    
/* THUMB */    
.lib-card-thumb img{    
    width:90px;    
    height:90px;    
    border-radius:10px;    
    object-fit:cover;    
}    
    
/* BODY */    
.lib-card-body{    
    flex:1;    
    min-width:0;    
}    
    
/* TITLE */    
.lib-card-title{    
    font-size:14px;    
    font-weight:700;    
    margin-bottom:6px;    
}    
    
/* META */    
.lib-card-meta{    
    font-size:11px;    
    color:var(--text-muted);    
    margin-bottom:6px;    
}    
    
/* DESC */    
.lib-card-desc{    
    font-size:12px;    
    color:var(--text-muted);    
    line-height:1.5;    
    
    display:-webkit-box;    
    -webkit-line-clamp:2;    
    -webkit-box-orient:vertical;    
    overflow:hidden;    
}    
/* =======================    
   REDDIT STYLE FORUM    
======================= */    
.reddit-forum{    
    margin-top:20px;    
    background:var(--card-bg);    
    border:1px solid var(--border-color);    
    border-radius:10px;    
    overflow:hidden;    
}    
    
.reddit-header{    
    display:flex;    
    justify-content:space-between;    
    align-items:center;    
    padding:12px 14px;    
    border-bottom:1px solid var(--border-color);    
    background:var(--bg-secondary);    
}    
    
.reddit-title{    
    font-size:16px;    
    font-weight:700;    
}    
    
.reddit-all{    
    font-size:13px;    
    color:var(--text-muted);    
    text-decoration:none;    
}    
    
.reddit-all:hover{    
    text-decoration:underline;    
}    
    
.reddit-feed{    
    display:flex;    
    flex-direction:column;    
}    
    
.reddit-item{    
    display:flex;    
    gap:10px;    
    padding:12px 14px;    
    border-bottom:1px solid var(--border-color);    
    text-decoration:none;    
    transition:0.15s ease;    
}    
    
.reddit-item:hover{    
    background:rgba(0,0,0,0.03);    
}    
    
.reddit-vote{    
    width:24px;    
    text-align:center;    
    font-size:14px;    
    color:var(--text-muted);    
    user-select:none;    
}    
    
.reddit-body{    
    flex:1;    
    min-width:0;    
}    
    
.reddit-title-text{    
    font-size:15px;    
    font-weight:600;    
    color:var(--text-color);    
    white-space:nowrap;    
    overflow:hidden;    
    text-overflow:ellipsis;    
}    
    
.reddit-meta{    
    margin-top:4px;    
    font-size:12px;    
    color:var(--text-muted);    
    display:flex;    
    gap:6px;    
    align-items:center;    
}    
    
.reddit-meta .dot{    
    opacity:0.6;    
}    
    
/* =======================    
   RESPONSIVE    
======================= */    
@media(max-width:768px){    
    .library-thumb{    
        height:190px;    
    }    
    
    .library-content{    
        padding:16px;    
    }    
    
    .library-title{    
        font-size:24px;    
    }    
    
    .library-desc{    
        font-size:16px;    
    }    
}