Daftar Artikel
isi pesan
Judul isi pesan
Varian: .info | .tip | .warning | .danger
============================================================= */
.m-post-content .m-infobox{
position:relative;
margin:1.5rem 0;
padding:16px 20px 16px 58px;
border-radius:8px;
border-left:4px solid;
font-size:14.5px;
line-height:1.65;
color:#d4d4d4;
}
.m-post-content .m-infobox::before{
content:'';
position:absolute;
left:16px; top:14px;
width:26px; height:26px;
background-repeat:no-repeat;
background-position:center;
background-size:contain;
}
.m-post-content .m-infobox strong{
display:block;
margin-bottom:4px;
font-weight:600;
font-size:14px;
letter-spacing:0.2px;
}
.m-post-content .m-infobox p{ margin:0 0 6px; }
.m-post-content .m-infobox p:last-child{ margin-bottom:0; }
.m-post-content .m-infobox a{ color:inherit; text-decoration:underline; text-underline-offset:2px; }
/* INFO — biru/cyan: untuk catatan netral, "ada baiknya tahu" */
.m-post-content .m-infobox.info{
background:rgba(58,142,255,0.08);
border-left-color:#3a8eff;
color:#d4e5ff;
}
.m-post-content .m-infobox.info strong{ color:#3a8eff; }
.m-post-content .m-infobox.info::before{
background-image:url('data:image/svg+xml,');
}
/* TIP — hijau: saran/trik yang membantu */
.m-post-content .m-infobox.tip{
background:rgba(61,220,132,0.08);
border-left-color:#3ddc84;
color:#d4f5e2;
}
.m-post-content .m-infobox.tip strong{ color:#3ddc84; }
.m-post-content .m-infobox.tip::before{
background-image:url('data:image/svg+xml,');
}
/* WARNING — kuning/orange: hati-hati, baca dulu sebelum lanjut */
.m-post-content .m-infobox.warning{
background:rgba(255,176,32,0.08);
border-left-color:#ffb020;
color:#fee9c2;
}
.m-post-content .m-infobox.warning strong{ color:#ffb020; }
.m-post-content .m-infobox.warning::before{
background-image:url('data:image/svg+xml,');
}
/* DANGER — merah: bahaya/jangan lakukan ini */
.m-post-content .m-infobox.danger{
background:rgba(238,69,64,0.08);
border-left-color:var(--primary_color);
color:#fdd6d4;
}
.m-post-content .m-infobox.danger strong{ color:var(--primary_color); }
.m-post-content .m-infobox.danger::before{
background-image:url('data:image/svg+xml,');
}
@media (max-width:768px){
.m-post-content .m-infobox{ padding:14px 16px 14px 50px; font-size:13.5px; }
.m-post-content .m-infobox::before{ left:12px; top:12px; width:22px; height:22px; }
}
.m-post-content .tr-caption-container{margin:2rem 0;}
.m-post-content .tr-caption-container tbody{display:flex; flex-direction:column; gap:10px; align-items:center;}
.m-post-content .tr-caption-container .tr-caption{font-size:80%; opacity:0.7;}
.m-post-content img {border-radius:30px;}
.m-table{margin:0 auto; border:0; overflow:hidden; font-size:14px; border-spacing:0; color:var(--text);width:100%;}
.m-table th{background-color:transparent; padding:17px 25px; border:1px solid rgba(0,0,0,.1); border-left-width:0;}
.m-table tr:nth-child(2n+1) td{background-color:var(--border);}
.m-table td{padding:20px 25px; border:1px solid rgba(0,0,0,.1); border-left-width:0; border-top:0; vertical-align:middle;}
/* =============================================================
RESPONSIVE TABLE — .m-table dibungkus otomatis oleh JS dengan
.m-table-wrap. Di mobile, wrapper scroll horizontal supaya kolom
tidak ter-squeeze. Cell pakai white-space:nowrap supaya konten
tidak terpotong/wrap aneh — user scroll untuk lihat semua kolom.
============================================================= */
.m-table-wrap{
width:100%;
overflow-x:auto;
-webkit-overflow-scrolling:touch;
margin:0 0 20px;
/* Subtle scrollbar — visible saat scroll, tidak mengganggu */
scrollbar-width:thin;
scrollbar-color:var(--primary_color) var(--border);
}
.m-table-wrap::-webkit-scrollbar{ height:6px; }
.m-table-wrap::-webkit-scrollbar-track{ background:var(--border); border-radius:3px; }
.m-table-wrap::-webkit-scrollbar-thumb{ background:var(--primary_color); border-radius:3px; }
.m-table-wrap > .m-table{ margin-bottom:0; }
@media (max-width:768px){
/* Cell lebih compact di mobile — padding kecil supaya muat lebih banyak */
.m-table th, .m-table td{
padding:11px 14px;
font-size:13px;
/* nowrap mencegah konten wrap aneh; user scroll horizontal kalau perlu */
white-space:nowrap;
}
/* Soft inset shadow di kanan sebagai hint "ada konten yang bisa di-scroll" */
.m-table-wrap{
box-shadow:inset -12px 0 10px -12px rgba(238,69,64,0.45);
border-radius:6px;
}
}
.m-post-content h2,.m-post-content h3,.m-post-content h4,.m-post-content h5,.m-post-content h6{margin-top:2rem;}
.m-post-content a.button{display:inline-flex; align-items:center; margin:15px 15px 15px 0; padding:5px 20px; outline:0; border:0; border-radius:30px; color:var(--text); background-color:var(--primary_color); font-size:14px; white-space:nowrap; overflow:hidden; max-width:100%;}
.m-post-content a.button i{margin-right:10px;}
.m-post-content code, .comment-block code{word-wrap:break-word; font-size:.875em; color:var(--text-dim); background:var(--surface); padding:2px 10px; border-radius:4px; margin:0 5px;}
.m-post-content pre, .comment-block pre{background:var(--surface); padding:20px; border-radius:4px; margin:1rem 0; width:100%; position:relative;}
.m-post-content pre:after, .comment-block pre:after{color:var(--text);content:attr(data-lang); position:absolute; right:0; bottom:0; padding:2px 11px; line-height:normal; font-size:10px; border-radius:4px 0 4px 0; text-transform:uppercase; background:var(--primary_color);}
.m-post-content pre code, .comment-block pre code{padding:0; margin:0; background:none; overflow:auto; display:block; width:100%;}
.m-post-content pre code::-webkit-scrollbar, .comment-block pre code::-webkit-scrollbar{height:5px;}
.m-post-content pre code b, .m-post-content code b, .comment-block code b{font-weight:normal;color:var(--text);}
.m-post-content pre code i, .m-post-content code i, .comment-block code i{color:var(--primary_color); font-style:normal;}
.comment-block pre[data-lang]:first-child{margin:-20px 0 20px !important;}
.m-post-content .note{position:relative; padding:20px 30px 20px 50px; color:#327ED6; font-size:.85rem; line-height:1.62em; border-left:1px solid;background-repeat:no-repeat; background-size:22px; background-position-x:15px; background-position-y:center;margin:2rem 0;}
.m-post-content .note{background-image:url('data:image/svg+xml,');}
.m-post-content .noteWarning{color:#DB8F30;background-image:url('data:image/svg+xml,');}
.m-post-content .noteDanger{color:var(--primary_color);background-image:url('data:image/svg+xml,');}
.m-post-content .noteSuccess{color:#8bc34a;background-image:url('data:image/svg+xml,');}
.m-post-content .note a{color:inherit; font-weight:bold;}
svg.line{width:22px; height:22px; fill:none!important; stroke:var(--text); stroke-linecap:round; stroke-linejoin:round; stroke-width:1;}
.postTimestamp:before,.authorName span:before, .left .mShare:before{content:attr(data-text)}
.blog-details-content .separator{display:none;}
.error404{display:flex; flex-direction:column; align-items:center;}
.error404 h1{font-size:80px; color:var(--primary_color);}
.error404 p{width:100%; max-width:400px; text-align:center;}
/* 404 page enhancements */
.error404 { padding:60px 0; gap:0; }
.error404 h1 { font-size:120px; line-height:1; margin-bottom:8px; letter-spacing:-2px; }
.error404-title { font-size:22px; color:var(--text); margin:0 0 12px; font-weight:600; }
.error404 p { color:var(--text-muted); line-height:1.6; }
.error404-search {
display:flex; gap:8px; margin:30px auto 14px;
max-width:480px; width:100%;
}
.error404-search input {
flex:1; min-width:0;
padding:12px 18px;
background:var(--surface); border:1px solid var(--border);
border-radius:30px; color:var(--text);
font-family:inherit; font-size:14px;
outline:none;
transition:border-color .15s;
}
.error404-search input::placeholder { color:var(--text-faint); }
.error404-search input:focus { border-color:var(--primary_color); }
.error404-search button {
display:inline-flex; align-items:center; gap:6px;
padding:12px 22px;
background:var(--primary_color); color:#fff;
border:0; border-radius:30px; cursor:pointer;
font-family:inherit; font-size:14px; font-weight:600;
transition:background .15s;
}
.error404-search button:hover { background:#d63b36; }
.error404-search button svg { width:16px; height:16px; }
.error404-search-results {
max-width:480px; margin:0 auto 14px;
width:100%; text-align:left;
}
.error404-search-results .er-row {
display:flex; align-items:center; gap:12px;
padding:12px 16px; margin:6px 0;
background:var(--surface); border:1px solid var(--border);
border-radius:8px; color:var(--text); text-decoration:none;
transition:all .15s;
}
.error404-search-results .er-row:hover {
border-color:var(--primary_color);
background:rgba(238,69,64,0.06);
transform:translateX(4px);
}
.error404-search-results .er-row svg { width:16px; height:16px; color:var(--text-faint); flex-shrink:0; }
.error404-search-results .er-loading,
.error404-search-results .er-empty {
text-align:center; padding:14px; color:var(--text-faint); font-size:13px;
}
.error404-search-results .er-section-label{
padding:10px 4px 4px;
font:500 11px 'Inter', system-ui, -apple-system, sans-serif;
color:var(--text-faint);
letter-spacing:.3px;
text-transform:uppercase;
}
.error404-search-results .er-row mark{
background:rgba(238,69,64,0.25);
color:var(--text);
padding:0 2px;
border-radius:3px;
font-weight:600;
}
.error404-actions {
display:flex; gap:12px; justify-content:center; flex-wrap:wrap;
margin-top:24px;
}
.error404-btn-primary {
display:inline-flex; align-items:center; gap:8px;
padding:13px 28px;
background:transparent; color:var(--text);
border:2px solid var(--text); border-radius:30px;
font-family:inherit; font-size:14px; font-weight:600;
text-decoration:none;
transition:all .15s;
}
.error404-btn-primary:hover {
background:var(--text); color:var(--bg);
}
.error404-btn-primary svg { width:16px; height:16px; }
@media (max-width:768px){
.error404 { padding:40px 0; }
.error404 h1 { font-size:88px; }
.error404-title { font-size:18px; }
.error404-search button span { display:none; } /* mobile: only icon */
.error404-search button { padding:12px 14px; }
}
::-webkit-scrollbar{width:5px;}
::-webkit-scrollbar-track{background:transparent;}
::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.3); border-radius:10px;}
::-webkit-scrollbar-thumb:hover{background:var(--primary_color);}
.comment{position:relative;padding-left:140px;}
.avatar-image-container{width:100px; height:100px; position:absolute;left:0;background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHbA1Ma2tx4aeOnkpDPCcmPmmWQAXYI6vP6B4Or94VO_W28DA1PwD-APLXX86HqMJn6qCWtE2iAhCHt1vckIpBtjA7nPLnan1l_9luHt16thc5sM4DdkDDDH4oZMicJ5Szq6VeL0JKaP3aFbrdgpGWzMjjC8laUkbfUukaxqXBPf-D-_a3Fp9MqiKWIsA/s1600/blank-user.png');background-size:100%;}
.avatar-image-container img{display:block; width:100%; height:100%; object-fit:cover; border-radius:50px;}
.continue, .comment-block{padding-bottom:40px; margin-bottom:40px; border-bottom:1px solid var(--dark);}
.comment-content{margin-bottom:30px;}
.comment-block{color:#898989; font-size:16px; line-height:25px; font-weight:400;}
.comment-block .comment-header{display:flex; flex-direction:column-reverse;}
.comment-block .comment-header .blog-author{position:absolute; width:30px; height:30px; background:var(--bg); left:-70px; border-radius:50%; bottom:-40px;}
.comment-block .comment-header .blog-author:before{content:'';background:linear-gradient(120deg, rgba(255,255,255,0.3), var(--border)); height:100%; width:100%; box-shadow:inset 0 0 0 1px var(--white-tint); position:absolute; border-radius:50%; left:0; top:0;}
.comment-block .comment-header .blog-author:after{content:'';left:0;background-image:url("data:image/svg+xml,");width:30px; height:30px; position:absolute; background-repeat:no-repeat; background-position:center;}
.comment-block .comment-header cite.user{font-size:24px; line-height:26.8px; color:var(--text); letter-spacing:-1%; font-style:normal;margin-bottom:.5rem;}
.comment-block .comment-header cite.user a{color:var(--text);text-wrap:nowrap;}
.comment-block .comment-header .datetime a{line-height:16.8px; color:var(--primary_color); font-size:16px; font-weight:500; display:block; margin-bottom:10px;text-wrap:nowrap;}
.comments li.comment:last-child .comment-block{border-bottom:none;}
.comments .noAllowComment{border-top:1px solid var(--white-tint); padding:30px; margin:30px -30px -40px; background:var(--border); display:flex; gap:10px; align-items:center;border-radius:0 0 30px 30px;}
.comments .noAllowComment small, .comments .comNotice small{display:block; line-height:normal; margin-top:5px; opacity:0.7;}
.comments .noAllowComment svg{fill:none; stroke:var(--primary_color); height:20px;}
.comments .comNotice{border-bottom:1px solid var(--white-tint); padding:30px; margin:-40px -30px 30px; background:var(--border); display:flex; gap:10px; align-items:center; border-radius:30px 30px 0 0;}
.comments .comNotice svg{fill:none; stroke:#8bc34a; height:20px;}
.comments.noNewComment .comment-reply, .comments.noNewComment .continue{display:none !important;}
.comments.noNewComment .comment-block{padding-bottom:0;}
.Blog section.comments .toplevel-thread .comment .comment-block .comment-actions .item-control, .Blog section.comments .hidden .thread-toggle, .Blog section.comments .continue.hidden, .Blog section.comments .loadmore.hidden, .thread-toggle, .hidden{display:none;}
.Blog section.comments .comment-content a{color:var(--primary_color);transition:.3s;}
.Blog section.comments .comment-content a:hover{opacity:0.7;}
.Blog section.comments .comment-reply{background:var(--dark); color:var(--text); display:inline-block; transition:.3s; border-radius:16px; font-size:16px; font-weight:500; padding:8px 20px;box-shadow:0 16px 8px rgba(31,31,31,.01),0 12px 6px rgba(31,31,31,.04),0 4px 4px rgba(31,31,31,.07),0 1.5px 3px rgba(31,31,31,.08),0 0 0 1px var(--bg),inset 0 1px 2px hsla(0,0%,100%,.12); border:1px solid var(--border);}
.Blog section.comments .comment-reply:hover{color:var(--dark);background:var(--text);}
.Blog section.comments .comment-replies .thread-expanded .comment-block{padding-bottom:0;}
.Blog section.comments .comment-replybox-single iframe{padding:0 8px; border-radius:30px; background:linear-gradient(120deg, var(--border), rgba(255,255,255,0.01));margin-bottom:40px;border:1px solid var(--border); box-shadow:0 16px 8px rgba(31,31,31,.01),0 12px 6px rgba(31,31,31,.04),0 4px 4px rgba(31,31,31,.07),0 1.5px 3px rgba(31,31,31,.08),0 0 0 1px var(--bg),inset 0 1px 2px hsla(0,0%,100%,.12);}
.Blog .onPage h1{text-align:center; margin-bottom:40px;}
.Blog .onPage .homeTxt{display:flex; justify-content:center; align-items:center; opacity:0.6; margin-bottom:10px;}
.Blog .onPage .homeTxt:after{content:'';background-image:url('data:image/svg+xml,');background-size:20px; background-position:center; background-repeat:no-repeat; width:30px; height:20px; display:inline-block;}
.Blog .extLink:after{content:'';width:14px;height:14px;display:inline-block;margin-left:5px; background:url("data:image/svg+xml,") center / 15px no-repeat}
.navbar .extLink:after{content:'';width:14px;height:14px;display:inline-block;margin-left:5px; background:url("data:image/svg+xml,") center / 15px no-repeat}
.blog-pager{padding:17px 25px; margin-bottom:24px; display:flex; justify-content:space-between; margin-top:40px;}
.blog-pager svg{height:20px;width:20px;fill:var(--text);}
.blog-pager a{opacity:0.2;transition:.3s;}
.blog-pager a:hover{opacity:1;}
.m-Breadcrumb{display:flex; align-items:center; gap:20px;margin-bottom:40px;}
.m-Breadcrumb .m-BC-icon .shadow-box{width:82px; padding:20px; height:82px; display:inline-flex; align-items:center; justify-content:center; line-height:92px; color:var(--text); border-radius:30px; font-size:32px; transition:.3s;}
.m-Breadcrumb .m-BC-icon svg{width:30px; height:30px; fill:var(--primary_color);}
.m-Breadcrumb .m-BC-text p{margin-bottom:5px;}
.m-Breadcrumb .m-BC-text span{color:var(--text);font-size:20px;}
.Label .label-count{margin-left:5px;color:var(--primary_color);}
.Label .label-count:before{content:'\2022';margin-right:5px;}
/* Editor komentar (iframe blogger.com): bulatkan sudut kotaknya */
.comment-form{border-radius:16px; overflow:hidden;}
#comment-editor{border-radius:16px; display:block;}
.blog-details-area .blog-details-content .img-bg{position:absolute; left:0; top:0; border-radius:0; z-index:-1; opacity:0.2;width:100%;filter:blur(10px);}
.blog-details-area .blog-details-content .img-bg img{width:100%;}
.blog-details-area .blog-details-content .img-bg:before{content:'';background:linear-gradient(180deg, rgba(15,15,15,0) 0%, rgba(15,15,15,1) 100%); position:absolute; bottom:0; left:0; height:50%; width:100%;}
.Blog .mPopuler{padding:10px 20px;margin-bottom:20px;border:1px solid var(--border); box-shadow:0 16px 8px rgba(31,31,31,.01),0 12px 6px rgba(31,31,31,.04),0 4px 4px rgba(31,31,31,.07),0 1.5px 3px rgba(31,31,31,.08),0 0 0 1px var(--bg),inset 0 1px 2px hsla(0,0%,100%,.12);}
.Blog .mPopuler{display:flex; gap:10px; align-items:center; background:var(--primary-tint); width:max-content;}
.Blog .mPopuler span.mPIcon{display:inline-flex;}
.Blog .mPopuler span.mPIcon svg{width:16px; height:16px; stroke:var(--primary_color);}
.Blog .mPopuler.spo{background:var(--sponsor-tint);}
.Blog .mPopuler.spo span.mPIcon svg{stroke:var(--sponsor);}
.projects-area .project-item.noIMGT{padding:40px 30px 80px;display:flex; align-items:end;}
.projects-area .project-item.noIMGT .project-info h1{font-size:30px;position:relative;margin-top:15px;}
.projects-area .project-item.noIMGT .project-info h1:before{content:'';height:1px; background:var(--text-muted); opacity:0.5; width:50px; position:absolute; left:0; bottom:-25px;}
.projects-area .project-item.noIMGT .noIMGI {opacity:0.5; width:80px; height:80px; position:absolute; right:0; top:0; padding:25px; background:var(--border); border-radius:0 30px 0 50%;display:flex; align-items:center; justify-content:center;}
.projects-area .project-item.noIMGT .noIMGI .noIMGIcon{stroke:var(--primary_color); width:25px; height:25px;stroke-width:1.5px;}
.projects-area .project-item.noIMGT .noIMGI .noIMGIcon.spo{stroke:var(--sponsor);}
.projects-area .project-item .project-info h1:after{content:'';background:var(--primary_color); width:6px; height:6px; display:inline-block; border-radius:50%;margin-left:3px;}
.projects-area .project-item.mTrend{background:var(--primary-tint);}
.projects-area .project-item.mSponsored{background:var(--sponsor-tint);}
.m-post-author{display:none;position:fixed; left:20px; bottom:20px; right:20px; background:var(--bg); align-items:center; padding:15px; border-radius:30px;gap:15px; justify-content:space-between;z-index:50;text-wrap:nowrap;}
.m-post-author .author img{height:35px; width:35px; border-radius:50%; margin-right:15px;}
.m-post-author .author{display:inline-flex;align-items:center;}
.m-post-author .author span{display:inline-flex;flex-direction:column;}
.m-post-author .author span small{opacity:0.7;}
.m-post-author .m-comment{display:inline-flex;margin-right:10px;}
.m-post-author .m-comment svg{width:20px; height:20px; stroke:var(--primary_color); margin-right:5px;}
.m-post-author-overlay{display:none;background:linear-gradient(180deg, #0F0F0F00 0%, var(--bg) 100%); height:110px; width:100%; left:0; right:0; bottom:0; position:fixed;z-index:49;}
.m-Summary{opacity:0; padding:0 25px; height:0; transition:all 0.3s ease 0s; margin:0;}
.m-Summary .p-SumTxt{color:var(--primary_color);}
.m-Summary small{display:block; margin-top:15px;}
.m-SumTxt{position:relative;cursor:pointer; transition:.3s;}
.m-SumTxt:hover{color:var(--text);}
.m-Arrow{
display:inline-flex; align-items:center; justify-content:center;
width:12px; height:12px;
margin-left:5px; vertical-align:-1px;
transition:transform .25s ease;
color:inherit;
}
.m-Arrow svg{ width:100%; height:100%; display:block; }
.PopularPosts #mNumrd {list-style:none;padding:0;}
.PopularPosts #mNumrd li::before {content:counter(siraNo, decimal-leading-zero); color:var(--text); font-weight:bold; font-size:20px; line-height:normal; opacity:0.2;transition:.2s;}
.PopularPosts #mNumrd li:hover::before{color:var(--primary_color);opacity:1;}
/* Cegah variabel skin komentar bocor ke halaman utama (iframe dokumen terpisah, tak terpengaruh) */
body{ background:var(--bg) !important; color:var(--text-dim) !important; }
/* =============================================================
WORD-APP HOMEPAGE STYLE (wta- prefix)
============================================================= */
.wta-home .header-area { display:none !important; }
.wta-home .footer-area, .wta-home .footer { /* footer minimal di homepage */ }
:root{
--wta-bg:#0F0F0F;
--wta-surface:#1a1a1a;
--wta-surface-2:#212121;
--ll-titlebar:#161616;
--wta-border:rgba(255,255,255,.08);
--wta-border-strong:rgba(255,255,255,.14);
--wta-text:#ffffff;
--wta-text-dim:#c9c9c9;
--wta-muted:#9f9f9f;
--wta-accent:var(--primary_color,#ee4540);
--wta-hover:rgba(255,255,255,.04);
}
/* TITLE BAR */
.ll-titlebar{
position:sticky; top:0; left:0; right:0; z-index:200;
height:64px; display:flex; align-items:center; justify-content:space-between;
background:var(--ll-titlebar); border-bottom:1px solid var(--wta-border);
padding:0 16px 0 20px; transition:height .25s ease, opacity .25s ease;
}
body.wta-bar-collapsed .ll-titlebar{ height:6px; overflow:hidden; }
body.wta-bar-collapsed .ll-titlebar > *{ opacity:0; pointer-events:none; }
body.wta-bar-collapsed .ll-titlebar:hover{ height:64px; }
body.wta-bar-collapsed .ll-titlebar:hover > *{ opacity:1; pointer-events:auto; }
.ll-hd-left{ display:flex; align-items:center; gap:14px; color:var(--wta-text); }
.ll-lg-appicon{ display:inline-flex; align-items:center; }
.ll-lg-appicon svg{ height:18px; width:auto; }
.ll-lg-title{ font:600 14px 'Inter', system-ui, -apple-system, sans-serif; letter-spacing:.2px; opacity:.9; }
@media (max-width:520px){ .ll-lg-title{ display:none; } }
.ll-hd-right{ display:flex; align-items:center; gap:4px; }
/* Menu utama di tengah titlebar (clone dari widget Menu Atas via JS).
Mengembalikan navigasi di homepage tanpa menampilkan header klasik. */
.ll-hd-menu{
display:flex; align-items:center; justify-content:center;
gap:26px; flex:1; min-width:0; margin:0 18px;
overflow:hidden;
}
.ll-hd-menu a{
color:var(--wta-text); opacity:.72;
font:500 13.5px 'Inter', system-ui, -apple-system, sans-serif;
text-decoration:none; white-space:nowrap;
transition:opacity .15s;
}
.ll-hd-menu a:hover{ opacity:1; color:var(--wta-text); text-decoration:none; }
.ll-hd-menu .extLink:after{
content:''; width:12px; height:12px; display:inline-block; margin-left:4px;
background:url("data:image/svg+xml,") center / 12px no-repeat;
}
@media (max-width:900px){ .ll-hd-menu{ display:none; } }
.ll-lg-avatar{
width:36px; height:36px; border-radius:999px; border:0;
background:linear-gradient(135deg, var(--wta-accent), #b3322f);
color:#fff; font:700 14px 'Inter', system-ui, -apple-system, sans-serif; cursor:pointer;
display:inline-flex; align-items:center; justify-content:center;
margin-right:10px;
}
.tbHlp{
width:34px; height:34px; border-radius:999px;
background:transparent; border:1px solid var(--wta-border-strong);
color:var(--wta-text); font:600 14px/1 'Inter', system-ui, -apple-system, sans-serif; cursor:pointer;
margin-right:12px;
display:inline-flex; align-items:center; justify-content:center;
text-decoration:none;
}
.tbHlp:hover{ background:var(--wta-hover); color:var(--wta-text); text-decoration:none; }
.tbKn{
height:34px; min-width:38px; padding:0 8px; border:0; background:transparent;
color:var(--wta-text);
font:13px/1 'Inter', system-ui, -apple-system, sans-serif; cursor:pointer; border-radius:5px;
display:inline-flex; align-items:center; justify-content:center; gap:4px;
text-decoration:none;
}
.tbKn:hover{ background:rgba(255,255,255,.12); color:var(--wta-text); text-decoration:none; }
.tbKn svg{ width:17px; height:17px; }
.tbBuy{
background:#fff; color:var(--wta-accent) !important;
font:700 12px 'Inter', system-ui, -apple-system, sans-serif; letter-spacing:.4px;
padding:0 18px; margin-left:10px; border-radius:5px;
min-width:auto; height:34px;
}
.tbBuy:hover{ background:#f3f3f3; color:var(--wta-accent) !important; }
/* SIDEBAR (desktop) */
.navLeft{
position:fixed; left:0; top:64px; bottom:0; width:80px;
background:var(--wta-bg); border-right:1px solid var(--wta-border);
display:flex; flex-direction:column; align-items:stretch;
padding:18px 0; z-index:150;
}
.navLeft-item{
display:flex; flex-direction:column; align-items:center; gap:6px;
padding:14px 6px; color:var(--wta-muted); text-decoration:none;
font:500 12px/1.2 'Inter', system-ui, -apple-system, sans-serif; text-align:center;
transition:color .15s, background .15s;
border-left:2px solid transparent;
}
.navLeft-item svg{ width:26px; height:26px; }
.navLeft-item:hover{ color:var(--wta-text); background:var(--wta-hover); }
.navLeft-item.active{ color:var(--wta-accent); border-left-color:var(--wta-accent); }
/* SHELL (main content) */
.hmShell{
margin-left:80px; padding:32px 48px 80px;
min-height:calc(100vh - 64px);
color:var(--wta-text-dim);
}
body.wta-bar-collapsed .hmShell{ /* no shift */ }
/* GREETING */
.greeting{
font:400 24px/1.2 'Inter', system-ui, -apple-system, sans-serif; color:var(--wta-text);
margin:0 0 28px;
display:flex; align-items:baseline; flex-wrap:wrap; gap:10px;
}
.greeting #wta-time{ font-weight:500; }
.greeting-sub{
font:400 13px/1.3 'Inter', system-ui, -apple-system, sans-serif;
color:var(--wta-muted);
font-style:italic;
position:relative;
padding-left:12px;
}
.greeting-sub::before{
content:""; position:absolute; left:0; top:50%;
transform:translateY(-50%);
width:3px; height:3px; border-radius:50%;
background:var(--wta-muted);
}
/* SECTION */
.wta-section{ margin-bottom:36px; }
.wta-section-head{
display:flex; align-items:center; justify-content:space-between;
margin-bottom:16px;
}
.wta-section-toggle{
background:transparent; border:0; color:var(--wta-text);
font:500 16px 'Inter', system-ui, -apple-system, sans-serif; cursor:pointer;
display:inline-flex; align-items:center; gap:6px; padding:4px 6px 4px 0;
}
.wta-caret{ width:16px; height:16px; transition:transform .2s; }
.wta-section-toggle.collapsed .wta-caret{ transform:rotate(-90deg); }
.ll-proyek-body.collapsed{ display:none; }
.wta-more{
color:var(--wta-accent); text-decoration:none;
font:500 13px 'Inter', system-ui, -apple-system, sans-serif;
display:inline-flex; align-items:center; gap:6px;
}
.wta-more svg{ width:14px; height:14px; }
.wta-more:hover{ text-decoration:underline; }
#wta-tulisan { scroll-margin-top: 80px; }
/* PROYEK CARDS (template-like) */
.wta-cards-list{
list-style:none; padding:0; margin:0;
display:grid; grid-template-columns:repeat(6, minmax(0,1fr)); gap:18px;
}
.wta-card{ list-style:none; }
.wta-card-link{
display:flex; flex-direction:column; align-items:center; gap:10px;
text-decoration:none; color:var(--wta-text);
}
.wta-card-thumb{
width:100%; aspect-ratio:4/5;
background:var(--wta-surface-2);
border:1px solid var(--wta-border);
border-radius:4px;
display:flex; align-items:center; justify-content:center;
transition:border-color .2s, transform .2s;
position:relative; overflow:hidden;
}
.wta-card-thumb::before{
content:""; position:absolute; inset:0;
background:linear-gradient(180deg, transparent 0%, transparent 70%, var(--wta-accent) 70%, var(--wta-accent) 100%);
opacity:.5;
}
.wta-card[data-i="1"] .wta-card-thumb::before{ background:linear-gradient(180deg, transparent 0%, transparent 70%, #2B579A 70%, #2B579A 100%); }
.wta-card[data-i="2"] .wta-card-thumb::before{ background:linear-gradient(180deg, transparent 0%, transparent 70%, #5e9f4a 70%, #5e9f4a 100%); }
.wta-card[data-i="3"] .wta-card-thumb::before{ background:linear-gradient(180deg, transparent 0%, transparent 70%, #d18a14 70%, #d18a14 100%); }
.wta-card[data-i="4"] .wta-card-thumb::before{ background:linear-gradient(180deg, transparent 0%, transparent 70%, #7a4caf 70%, #7a4caf 100%); }
.wta-card[data-i="5"] .wta-card-thumb::before{ background:linear-gradient(180deg, transparent 0%, transparent 70%, #2c8a8a 70%, #2c8a8a 100%); }
.wta-card-icon{ width:36px; height:36px; color:var(--wta-text); position:relative; z-index:1; opacity:.85; }
.wta-card-link:hover .wta-card-thumb{ border-color:var(--wta-accent); transform:translateY(-2px); }
.wta-card-title{
font:500 13px/1.3 'Inter', system-ui, -apple-system, sans-serif; text-align:center;
color:var(--wta-text); display:-webkit-box;
-webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
/* TABS BAR */
.wta-tabs-bar{
display:flex; align-items:center; justify-content:space-between; gap:16px;
margin-bottom:14px; flex-wrap:wrap;
}
.wta-tabs{ display:flex; gap:8px; }
.wta-tab{
background:transparent; border:1px solid var(--wta-border-strong); color:var(--wta-text);
padding:8px 18px; border-radius:999px; cursor:pointer;
font:500 14px 'Inter', system-ui, -apple-system, sans-serif; transition:all .15s;
}
.wta-tab:hover{ background:var(--wta-hover); }
.wta-tab.active{
background:var(--wta-accent); border-color:var(--wta-accent); color:#fff;
}
.wta-search{
display:flex; align-items:center; gap:8px;
background:var(--wta-surface-2); border:1px solid var(--wta-border);
border-radius:999px; padding:8px 16px; min-width:280px;
transition:border-color .15s;
}
.wta-search:focus-within{ border-color:var(--wta-accent); }
.wta-search svg{ width:16px; height:16px; color:var(--wta-muted); flex-shrink:0; }
.wta-search input{
background:transparent; border:0; outline:none; color:var(--wta-text);
width:100%; font:14px 'Inter', system-ui, -apple-system, sans-serif;
}
.wta-search input::placeholder{ color:var(--wta-muted); }
/* LIST */
.wta-list-head{
display:grid; grid-template-columns:1fr 200px;
padding:8px 14px; font:500 12px 'Inter', system-ui, -apple-system, sans-serif;
color:var(--wta-muted); border-bottom:1px solid var(--wta-border);
text-transform:none;
}
.wta-panel{ display:none; }
.wta-panel.active{ display:block; }
.wta-rows{ display:flex; flex-direction:column; }
.wta-row{
display:grid; grid-template-columns:1fr 200px; align-items:center; gap:8px;
padding:14px; border-bottom:1px solid var(--wta-border);
text-decoration:none; color:var(--wta-text);
transition:background .12s;
}
.wta-row:hover{ background:var(--wta-hover); }
.wta-row-main{ display:flex; align-items:center; gap:14px; min-width:0; }
.wta-row-icon{ width:32px; height:32px; flex-shrink:0; }
.wta-row-text{ display:flex; flex-direction:column; min-width:0; }
.wta-row-title{
font:500 14px/1.3 'Inter', system-ui, -apple-system, sans-serif; color:var(--wta-text);
overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
@media (max-width: 768px){
.wta-row-title{
white-space: normal;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: clip;
line-height: 1.35;
}
}
.wta-row-sub{ font:12px 'Inter', system-ui, -apple-system, sans-serif; color:var(--wta-muted); margin-top:2px; }
.wta-row-date{ font:13px 'Inter', system-ui, -apple-system, sans-serif; color:var(--wta-muted); }
.wta-loading, .wta-empty{
padding:24px; color:var(--wta-muted); text-align:center;
font:14px 'Inter', system-ui, -apple-system, sans-serif;
}
/* DESKTOP large screens */
@media (max-width:1100px){
.wta-cards-list{ grid-template-columns:repeat(4, 1fr); }
.hmShell{ padding:28px 28px 80px; }
}
/* MOBILE: sidebar pindah ke bawah jadi bottom-nav */
@media (max-width:768px){
.navLeft{
top:auto; bottom:0; left:0; right:0; width:100%;
height:60px; border-right:0; border-top:1px solid var(--wta-border);
flex-direction:row; padding:0;
background:var(--ll-titlebar);
box-shadow:0 -4px 12px rgba(0,0,0,.25);
}
.navLeft-item{
flex:1; padding:8px 4px; border-left:0;
border-top:2px solid transparent;
}
.navLeft-item.active{ border-left:0; border-top-color:var(--wta-accent); }
.hmShell{
margin-left:0; padding:20px 16px 90px;
}
.ll-titlebar{ height:54px; padding:0 10px 0 14px; }
.tbKn{ height:30px; min-width:34px; }
.ll-lg-avatar{ width:30px; height:30px; }
.tbHlp{ width:30px; height:30px; }
.ll-lg-appicon .brand-text{ font-size:24px; }
.greeting{ font-size:19px; margin-bottom:18px; gap:6px; }
.greeting-sub{ font-size:12px; padding-left:10px; }
.wta-cards-list{ grid-template-columns:repeat(3, 1fr); gap:12px; }
.wta-tabs-bar{ flex-direction:column; align-items:stretch; }
.wta-tabs{ overflow-x:auto; padding-bottom:4px; }
.wta-tab{ flex-shrink:0; padding:7px 14px; font-size:13px; }
.wta-search{ min-width:0; width:100%; }
.wta-list-head{ grid-template-columns:1fr 90px; padding:8px 10px; }
.wta-row{ grid-template-columns:1fr 90px; padding:12px 10px; }
.wta-row-date{ font-size:11px; text-align:right; }
.wta-row-icon{ width:28px; height:28px; }
.wta-row-title{ font-size:13px; }
}
@media (max-width:420px){
.wta-cards-list{ grid-template-columns:repeat(2, 1fr); }
}
/* END WORD-APP HOMEPAGE STYLE */
/* =============================================================
PROYEK CARD: thumbnail dari halaman
============================================================= */
.wta-card-thumb{ position:relative; }
.wta-card-img{
position:absolute; inset:0; width:100%; height:100%;
object-fit:cover; z-index:0;
opacity:0; transition:opacity .35s ease;
}
.wta-card-thumb.has-img .wta-card-img{ opacity:1; }
.wta-card-thumb.has-img::before{ display:none; }
.wta-card-thumb.has-img .wta-card-icon{
position:absolute; top:10px; left:10px; width:30px; height:30px;
background:rgba(0,0,0,.6); border-radius:5px; padding:6px;
z-index:2; opacity:.95;
}
/* =============================================================
PROFILE POPUP (avatar 'L')
============================================================= */
.pr-popup-overlay{
position:fixed; inset:0; background:rgba(0,0,0,.55);
display:none; align-items:center; justify-content:center;
z-index:9000; padding:20px;
-webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px);
}
.pr-popup-overlay.open{ display:flex; animation:wta-fade .18s ease; }
@keyframes wta-fade{ from{opacity:0} to{opacity:1} }
.ll-profile-card{
background:var(--wta-surface-2); border:1px solid var(--wta-border);
border-radius:8px; padding:24px;
max-width:360px; width:100%;
color:var(--wta-text);
box-shadow:0 24px 60px rgba(0,0,0,.5);
position:relative;
text-align:center;
}
.ll-profile-card .pr-popup-close{
position:absolute; top:8px; right:8px;
width:32px; height:32px; border-radius:4px; border:0;
background:transparent; color:var(--wta-muted); cursor:pointer;
font:14px/1 'Inter', system-ui, -apple-system, sans-serif;
}
.ll-profile-card .pr-popup-close:hover{ background:var(--wta-hover); color:var(--wta-text); }
.ll-profile-card .profile-img,
.ll-profile-card img{
width:84px; height:84px; border-radius:50%;
border:3px solid var(--wta-accent); object-fit:cover;
margin:0 auto 14px; display:block;
}
.ll-profile-card .profile-name,
.ll-profile-card h2, .ll-profile-card h3{
font:600 18px 'Inter', system-ui, -apple-system, sans-serif; color:var(--wta-text);
margin:0 0 6px;
}
.ll-profile-card .profile-link,
.ll-profile-card a{
display:inline-block; margin-top:12px; padding:8px 16px;
background:var(--wta-accent); color:#fff !important; border-radius:6px;
font:500 13px 'Inter', system-ui, -apple-system, sans-serif; text-decoration:none !important;
}
.ll-profile-card .profile-link:hover, .ll-profile-card a:hover{ opacity:.9; }
.ll-profile-card .profile-data{ color:var(--wta-text-dim); font-size:13px; line-height:1.5; }
.ll-profile-card .profile-textblock{ color:var(--wta-text-dim); font-size:13px; line-height:1.5; margin:8px 0; }
/* Sembunyikan widget Profile asli dari aliran; hanya tampil di popup */
#profile-area{ display:none; }
.profile-popup .Profile{ background:transparent; }
.profile-popup .Profile .widget-title{ display:none; }
/* =============================================================
CLOSE-APP OVERLAY (tombol ✕)
============================================================= */
.wta-closed-overlay{
position:fixed; inset:0; z-index:9500;
background:#000;
display:none; align-items:center; justify-content:center;
flex-direction:column; gap:14px;
cursor:pointer;
color:#fff; text-align:center; padding:20px;
}
.wta-closed-overlay.open{ display:flex; animation:wta-fade .25s ease; }
.wta-closed-overlay svg{ width:64px; height:64px; opacity:.6; }
.wta-closed-overlay h2{ font:500 22px 'Inter', system-ui, -apple-system, sans-serif; margin:0; }
.wta-closed-overlay p{ font:14px 'Inter', system-ui, -apple-system, sans-serif; color:#aaa; margin:0; }
/* =============================================================
BRAND TEXT LOGO ("Lalu.")
============================================================= */
.brand-text{
font:400 32px/1 'Pacifico', cursive;
color:#fff; letter-spacing:0;
display:inline-flex; align-items:baseline;
}
.brand-text .brand-dot{ color:var(--primary_color); margin-left:1px; }
.header-area .brand-text{ font-size:28px; }
.footer .brand-text, .footer-area .brand-text{ font-size:46px; color:#fff; }
.ll-lg-appicon .brand-text{ font-size:30px; color:#fff; line-height:.9; }
/* END BRAND TEXT */
/* =============================================================
SOROTAN (hero card untuk artikel sorotan)
============================================================= */
.ll-sorotan-section .wta-section-toggle span{ color:var(--wta-accent); }
.ll-sorotan-card{
background:var(--wta-surface);
border:1px solid var(--wta-border);
border-radius:8px;
overflow:hidden;
min-height:60px;
}
.ll-sorotan-link{
display:grid;
grid-template-columns: 340px 1fr;
gap:0;
text-decoration:none;
color:var(--wta-text);
transition: background .15s;
}
.ll-sorotan-link:hover{ background:var(--wta-hover); color:var(--wta-text); text-decoration:none; }
.ll-sorotan-thumb{
position:relative;
background:var(--wta-surface-2);
overflow:hidden;
min-height:200px;
}
.ll-sorotan-thumb img{
width:100%; height:100%; object-fit:cover;
position:absolute; inset:0;
transition: transform .4s ease;
}
.ll-sorotan-link:hover .ll-sorotan-thumb img{ transform:scale(1.04); }
.ll-sorotan-badge{
position:absolute; top:14px; left:14px; z-index:2;
background:var(--wta-accent); color:#fff !important;
font:700 10px 'Inter', system-ui, -apple-system, sans-serif; letter-spacing:1.5px;
padding:6px 11px; border-radius:3px;
box-shadow:0 2px 8px rgba(238,69,64,.4);
}
.ll-sorotan-body-text{
padding:24px 28px;
display:flex; flex-direction:column; justify-content:center;
gap:8px;
}
.ll-sorotan-meta{
font:500 11px 'Inter', system-ui, -apple-system, sans-serif;
text-transform:uppercase; letter-spacing:1.2px;
color:var(--wta-muted);
}
.ll-sorotan-title{
font:600 22px/1.3 'Inter', system-ui, -apple-system, sans-serif;
color:var(--wta-text) !important;
margin:0; transition: color .15s;
}
.ll-sorotan-link:hover .ll-sorotan-title{ color:var(--wta-accent) !important; }
.ll-sorotan-snippet{
font:14px/1.55 'Inter', system-ui, -apple-system, sans-serif;
color:var(--wta-text-dim);
margin:4px 0 8px;
display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical;
overflow:hidden;
}
.ll-sorotan-cta{
color:var(--wta-accent);
font:500 13px 'Inter', system-ui, -apple-system, sans-serif;
display:inline-flex; align-items:center; gap:6px;
}
@media (max-width:768px){
.ll-sorotan-link{ grid-template-columns:1fr; }
.ll-sorotan-thumb{ aspect-ratio: 16/9; min-height:0; }
.ll-sorotan-body-text{ padding:18px 20px; }
.ll-sorotan-title{ font-size:18px; }
}
/* =============================================================
TOMBOL "MUAT LEBIH BANYAK"
============================================================= */
.rcnt-load-more{
display:block; margin:20px auto 8px;
padding:10px 28px;
background:transparent; border:1px solid var(--wta-border-strong);
color:var(--wta-text); border-radius:999px; cursor:pointer;
font:500 13px 'Inter', system-ui, -apple-system, sans-serif;
transition: all .15s;
}
.rcnt-load-more:hover{ background:var(--wta-hover); border-color:var(--wta-accent); color:var(--wta-accent); }
.rcnt-load-more:disabled{ opacity:.5; cursor:default; }
.rcnt-load-more.loading{ pointer-events:none; opacity:.7; }
/* Body collapse untuk section Tulisan */
.wta-tulisan-body.collapsed{ display:none; }
.ll-sorotan-body.collapsed{ display:none; }
/* =============================================================
READING PROGRESS BAR (di halaman post)
============================================================= */
.wta-progress-bar{
position:fixed; top:0; left:0; right:0;
height:3px; width:0%;
background:var(--primary_color);
z-index:9998;
transition:width .08s linear;
pointer-events:none;
box-shadow:0 0 8px rgba(238,69,64,.6);
}
/* Reading time indicator di meta post */
.blog-details-content .meta .wta-reading-time{
display:inline-flex; align-items:center; gap:4px;
color:var(--text-dim);
}
.blog-details-content .meta .wta-reading-time svg{
width:14px; height:14px; opacity:.7;
}
/* =============================================================
COPY CODE BUTTON untuk blok pre/code
============================================================= */
.m-post-content pre{ position:relative; }
.wta-copy-code{
position:absolute; top:8px; right:8px;
background:rgba(0,0,0,.5);
color:#fff;
border:1px solid rgba(255,255,255,.18);
border-radius:5px;
padding:5px 11px;
font:500 11px/1 'Inter', system-ui, -apple-system, sans-serif;
cursor:pointer;
opacity:0;
transition:opacity .15s, background .15s, transform .15s;
display:inline-flex; align-items:center; gap:5px;
z-index:3;
}
.wta-copy-code svg{ width:13px; height:13px; }
.m-post-content pre:hover .wta-copy-code,
.wta-copy-code:focus{ opacity:1; }
.wta-copy-code:hover{
background:var(--primary_color);
border-color:var(--primary_color);
transform:scale(1.03);
}
.wta-copy-code.copied{
background:#22c55e;
border-color:#22c55e;
opacity:1;
}
/* =============================================================
SHARE DROPDOWN MENU
============================================================= */
.wta-share-menu{
position:fixed;
background:var(--wta-surface);
border:1px solid var(--wta-border-strong);
border-radius:10px;
box-shadow:0 12px 32px rgba(0,0,0,0.5);
min-width:230px;
z-index:250;
display:none;
overflow:hidden;
}
.wta-share-menu.open{ display:block; animation:wta-fade .15s ease; }
.wta-share-item{
display:flex; align-items:center; gap:12px;
padding:11px 16px;
color:var(--wta-text) !important;
text-decoration:none;
font:500 13px 'Inter', system-ui, -apple-system, sans-serif;
cursor:pointer;
background:transparent;
border:0;
border-bottom:1px solid var(--wta-border);
width:100%; text-align:left;
}
.wta-share-item:last-child{ border-bottom:none; }
.wta-share-item:hover{
background:var(--wta-hover);
color:var(--wta-text) !important;
text-decoration:none;
}
.wta-share-item svg{ width:20px; height:20px; flex-shrink:0; color:var(--wta-text); }
/* =============================================================
POST SHARE STRIP — strip horizontal di akhir post
============================================================= */
.wta-post-share{
display:flex; align-items:center; gap:14px;
margin:28px 0 8px;
padding:14px 0;
border-top:1px solid var(--border);
border-bottom:1px solid var(--border);
flex-wrap:wrap;
}
.wta-post-share-label{
font:600 12px 'Inter', system-ui, -apple-system, sans-serif;
color:var(--text-faint);
text-transform:uppercase; letter-spacing:1px;
flex-shrink:0;
}
.wta-post-share-row{
display:flex; gap:8px; flex-wrap:wrap;
}
.wta-post-share-btn{
display:inline-flex; align-items:center; justify-content:center;
width:38px; height:38px;
border-radius:50%;
background:var(--surface);
border:1px solid var(--border);
color:var(--text);
cursor:pointer;
text-decoration:none;
transition:transform .15s ease, background .15s ease, border-color .15s ease, color .15s ease;
}
.wta-post-share-btn:hover{
background:var(--primary_color);
border-color:var(--primary_color);
color:#fff;
transform:translateY(-2px);
}
.wta-post-share-btn svg{
width:16px; height:16px; color:inherit;
}
.wta-post-share-btn.copied{
background:#3ddc84; border-color:#3ddc84; color:#fff;
}
@media (max-width:600px){
.wta-post-share{ gap:10px; margin:22px 0 4px; }
.wta-post-share-label{ font-size:11px; }
.wta-post-share-btn{ width:34px; height:34px; }
}
/* TOAST notifikasi (mis. "Tautan disalin") */
.wta-toast{
position:fixed;
bottom:30px; left:50%;
transform:translateX(-50%) translateY(20px);
background:var(--wta-surface);
border:1px solid var(--wta-border-strong);
color:var(--wta-text);
padding:12px 24px;
border-radius:24px;
font:500 13px 'Inter', system-ui, -apple-system, sans-serif;
box-shadow:0 10px 30px rgba(0,0,0,0.5);
z-index:9999;
opacity:0; pointer-events:none;
transition:opacity .25s, transform .25s;
}
.wta-toast.show{
opacity:1;
transform:translateX(-50%) translateY(0);
}
/* =============================================================
LIVE SEARCH DROPDOWN
============================================================= */
.wta-search{ position:relative; }
.wta-search-results{
position:absolute; top:calc(100% + 6px); left:0; right:0;
background:var(--wta-surface);
border:1px solid var(--wta-border-strong);
border-radius:10px;
box-shadow:0 12px 32px rgba(0,0,0,0.5);
max-height:440px; overflow-y:auto;
z-index:120;
display:none;
}
.wta-search-results.open{ display:block; }
.wta-search-result{
display:flex; align-items:center; gap:12px;
padding:11px 14px;
border-bottom:1px solid var(--wta-border);
text-decoration:none; color:var(--wta-text) !important;
}
.wta-search-result:last-child{ border-bottom:none; }
.wta-search-result:hover{ background:var(--wta-hover); text-decoration:none; }
.wta-search-result svg.wta-row-icon{ width:28px; height:28px; flex-shrink:0; }
.wta-search-result-text{ display:flex; flex-direction:column; gap:2px; min-width:0; flex:1; }
.wta-search-result-title{
font:500 13px 'Inter', system-ui, -apple-system, sans-serif; color:var(--wta-text);
overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.wta-search-result-meta{ font:11px 'Inter', system-ui, -apple-system, sans-serif; color:var(--wta-muted); }
.wta-search-empty, .wta-search-loading{
padding:18px; color:var(--wta-muted);
font:13px 'Inter', system-ui, -apple-system, sans-serif; text-align:center;
}
.wta-search-results-footer{
display:block;
padding:11px 14px;
background:transparent;
border-top:1px solid var(--wta-border);
font:500 12px 'Inter', system-ui, -apple-system, sans-serif;
color:var(--wta-accent) !important;
text-align:center;
text-decoration:none;
}
.wta-search-results-footer:hover{ background:var(--wta-hover); text-decoration:none; }
/* Section label di dropdown search — pemisah title-match vs body-match */
.wta-search-section-label{
padding:10px 14px 6px;
font:500 11px 'Inter', system-ui, -apple-system, sans-serif;
color:var(--wta-muted);
letter-spacing:.3px;
text-transform:uppercase;
background:rgba(255,255,255,0.02);
border-top:1px solid var(--wta-border);
}
.wta-search-section-label:first-child{ border-top:0; }
/* Highlight keyword di judul hasil pencarian */
.wta-search-result-title mark{
background:rgba(238,69,64,0.25);
color:var(--wta-text);
padding:0 2px;
border-radius:3px;
font-weight:600;
}
@media (max-width:768px){
.wta-search-results{ max-height:60vh; }
}
/* =============================================================
TABLE OF CONTENTS (ToC) — tampil otomatis di pos dengan 2+ heading
============================================================= */
.wta-toc{
background:var(--surface);
border:1px solid var(--border);
border-radius:8px;
padding:0;
margin:0 0 28px;
font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
}
.wta-toc-toggle{
display:flex; align-items:center; gap:10px; width:100%;
background:transparent; border:0; cursor:pointer;
padding:12px 16px; color:var(--text);
font:600 14px 'Inter', system-ui, -apple-system, sans-serif;
text-align:left;
}
.wta-toc-toggle svg{ flex-shrink:0; }
.wta-toc-toggle .wta-toc-caret{ transition:transform .2s; }
.wta-toc-toggle.collapsed .wta-toc-caret{ transform:rotate(-90deg); }
.wta-toc-toggle:hover{ color:var(--primary_color); }
.wta-toc-list{
list-style:none; padding:6px 16px 14px 16px; margin:0;
border-top:1px solid var(--border);
counter-reset:wta-toc-item;
}
.wta-toc-list.collapsed{ display:none; }
.wta-toc-list li{
list-style:none;
padding:5px 0;
position:relative;
}
.wta-toc-list .wta-toc-h2{
counter-increment:wta-toc-item;
padding-left:28px;
}
.wta-toc-list .wta-toc-h2::before{
content:counter(wta-toc-item) ".";
position:absolute; left:0; top:5px;
color:var(--text-faint);
font:500 13px 'Inter', system-ui, -apple-system, sans-serif;
min-width:22px;
}
.wta-toc-list .wta-toc-h3{
padding-left:44px; font-size:13px;
}
.wta-toc-list .wta-toc-h3::before{
content:"";
position:absolute; left:28px; top:13px;
width:8px; height:1px; background:var(--text-faint);
}
.wta-toc-list .wta-toc-h4{
padding-left:60px; font-size:12.5px;
}
.wta-toc-list a{
color:var(--text-dim); text-decoration:none;
font:14px/1.4 'Inter', system-ui, -apple-system, sans-serif;
display:block;
transition:color .15s;
}
.wta-toc-list .wta-toc-h3 a{ font-size:13px; }
.wta-toc-list .wta-toc-h4 a{ font-size:12.5px; }
.wta-toc-list a:hover{ color:var(--primary_color); }
.wta-toc-list a.active{ color:var(--primary_color); font-weight:500; }
/* =============================================================
ACCESSIBILITY — Skip link & focus outline
============================================================= */
.wta-skip-link{
position:absolute; top:-100px; left:8px; z-index:9999;
background:var(--primary_color); color:#fff;
padding:10px 16px; border-radius:0 0 8px 8px;
font:600 14px 'Inter', system-ui, -apple-system, sans-serif;
transition:top .15s ease;
text-decoration:none;
}
.wta-skip-link:focus{ top:0; color:#fff; outline:none; }
/* Keyboard-only focus outline yang jelas (tidak muncul saat klik mouse) */
*:focus-visible{
outline:2px solid var(--primary_color);
outline-offset:2px;
border-radius:3px;
}
button:focus-visible, a:focus-visible, [tabindex]:focus-visible{
outline:2px solid var(--primary_color);
outline-offset:2px;
}
/* Form inputs sudah punya custom focus style (border-color change) — tidak butuh outline tambahan */
input:focus-visible, textarea:focus-visible, select:focus-visible{
outline:none;
}
/* =============================================================
HEADING ANCHOR — ikon # muncul saat hover heading post
============================================================= */
.post-body h2, .post-body h3{ position:relative; }
.wta-heading-anchor{
position:absolute; left:-1.4em; top:50%;
transform:translateY(-50%);
width:1.2em; line-height:1; text-align:center;
font:600 .85em/1 'Inter', system-ui, -apple-system, sans-serif;
color:var(--text-faint);
text-decoration:none;
opacity:0; transition:opacity .15s, color .15s;
user-select:none;
}
.post-body h2:hover .wta-heading-anchor,
.post-body h3:hover .wta-heading-anchor,
.wta-heading-anchor:focus{ opacity:1; }
.wta-heading-anchor:hover{ color:var(--primary_color); }
.wta-heading-anchor.copied{
color:#3ddc84; opacity:1;
}
@media (max-width:768px){
.wta-heading-anchor{
left:auto; right:0; top:0;
transform:none; opacity:.5;
}
}
/* =============================================================
SKELETON LOADING — rows abu-abu beranimasi (homepage feeds)
============================================================= */
@keyframes wta-shimmer{
0%{ background-position:-400px 0; }
100%{ background-position:400px 0; }
}
.wta-skel-rows{ display:flex; flex-direction:column; }
.wta-skel-row{
display:grid; grid-template-columns:1fr 200px; align-items:center; gap:8px;
padding:14px; border-bottom:1px solid var(--wta-border);
}
.wta-skel-row-main{ display:flex; align-items:center; gap:14px; min-width:0; }
.wta-skel-icon, .wta-skel-line{
background:linear-gradient(90deg, rgba(255,255,255,.04) 0%, rgba(255,255,255,.09) 50%, rgba(255,255,255,.04) 100%);
background-size:800px 100%;
animation:wta-shimmer 1.4s linear infinite;
border-radius:4px;
}
.wta-skel-icon{ width:32px; height:32px; flex-shrink:0; border-radius:6px; }
.wta-skel-lines{ display:flex; flex-direction:column; gap:6px; flex:1; min-width:0; }
.wta-skel-line-title{ height:13px; width:70%; }
.wta-skel-line-sub{ height:10px; width:38%; }
.wta-skel-line-date{ height:11px; width:80px; justify-self:end; }
@media (max-width:768px){
.wta-skel-row{ grid-template-columns:1fr 90px; padding:12px 10px; }
.wta-skel-icon{ width:28px; height:28px; }
.wta-skel-line-date{ width:60px; }
}
/* =============================================================
COMMENT COUNT pada baris Tab Terbaru
============================================================= */
.wta-row-meta{
display:flex; align-items:center; justify-content:flex-end;
gap:10px; font:13px 'Inter', system-ui, -apple-system, sans-serif; color:var(--wta-muted);
white-space:nowrap;
}
.wta-row-comments{
display:inline-flex; align-items:center; gap:3px;
font-size:12px; color:var(--wta-muted);
}
.wta-row-comments svg{ width:13px; height:13px; flex-shrink:0; }
@media (max-width:768px){
.wta-row-meta{ font-size:11px; gap:6px; }
.wta-row-comments{ font-size:11px; }
.wta-row-comments svg{ width:11px; height:11px; }
}
/* =============================================================
RELATED POSTS — kartu pos sejenis di akhir post
============================================================= */
.wta-related{
margin:48px 0 28px;
padding-top:24px;
border-top:1px solid var(--border);
}
.wta-related-title{
font:600 18px/1.2 'Inter', system-ui, -apple-system, sans-serif;
color:var(--text); margin:0 0 18px;
display:flex; align-items:center; gap:10px;
}
.wta-related-title svg{ width:18px; height:18px; color:var(--primary_color); flex-shrink:0; }
.wta-related-grid{
display:grid; grid-template-columns:repeat(4, 1fr); gap:16px;
}
.wta-related-card{
display:flex; flex-direction:column;
background:var(--surface);
border:1px solid var(--border);
border-radius:10px; overflow:hidden;
text-decoration:none; color:var(--text);
transition:transform .15s, border-color .15s;
}
.wta-related-card:hover{
transform:translateY(-3px);
border-color:var(--primary_color);
color:var(--text);
}
.wta-related-thumb{
aspect-ratio:16 / 10;
background:#1a1a1a;
background-size:cover; background-position:center;
position:relative;
}
.wta-related-thumb.no-img::after{
content:""; position:absolute; inset:0;
background:linear-gradient(135deg, rgba(238,69,64,.15), rgba(238,69,64,.02));
}
.wta-related-body{ padding:12px 14px 14px; }
.wta-related-card-title{
font:500 14px/1.35 'Inter', system-ui, -apple-system, sans-serif;
color:var(--text);
display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical;
overflow:hidden;
}
.wta-related-meta{
margin-top:8px;
font:11.5px 'Inter', system-ui, -apple-system, sans-serif;
color:var(--text-faint);
}
.wta-related-skel{
background:linear-gradient(90deg, rgba(255,255,255,.04) 0%, rgba(255,255,255,.09) 50%, rgba(255,255,255,.04) 100%);
background-size:800px 100%;
animation:wta-shimmer 1.4s linear infinite;
border-radius:10px;
aspect-ratio:16 / 18;
}
@media (max-width:900px){
.wta-related-grid{ grid-template-columns:repeat(2, 1fr); }
}
@media (max-width:480px){
.wta-related-grid{ grid-template-columns:1fr; gap:12px; }
.wta-related{ margin:32px 0 18px; }
}
/* =============================================================
BACK-TO-TOP — tombol melayang pojok kanan-bawah
============================================================= */
.back-top-btn{
position:fixed; right:22px; bottom:22px;
width:44px; height:44px; border-radius:50%;
background:var(--primary_color); color:#fff;
border:0; cursor:pointer;
display:flex; align-items:center; justify-content:center;
box-shadow:0 4px 14px rgba(0,0,0,.35), 0 0 0 1px rgba(255,255,255,.06) inset;
opacity:0; visibility:hidden; transform:translateY(12px);
transition:opacity .2s, transform .2s, visibility .2s, background .15s;
z-index:998;
}
.back-top-btn.visible{ opacity:1; visibility:visible; transform:translateY(0); }
.back-top-btn:hover{ background:#d63b36; }
.back-top-btn svg{ width:20px; height:20px; }
/* Di homepage, mobile sidebar pindah ke bottom-nav. BTT tidak boleh menutupi tab "Opsi". */
body.wta-home .back-top-btn{ display:none !important; }
@media (max-width:768px){
.back-top-btn{ right:14px; bottom:14px; width:40px; height:40px; }
.back-top-btn svg{ width:18px; height:18px; }
}
/* =============================================================
META — "Diubah X hari lalu" inline di meta atas post
============================================================= */
.wta-updated-label{
display:inline;
font:inherit;
color:var(--text-muted);
font-style:italic;
}
.wta-updated-label::before{
content:"\270E\00a0";
font-style:normal; opacity:.7;
margin-right:1px;
}
/* === VARIAN B FIXED: pill/chip + ikon SVG === */
/* Meta atas: ukuran font & layout */
.blog-details-area .blog-details-content .meta {
font-size: 13px;
line-height: 1.6;
margin-bottom: 14px;
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 6px;
}
/* Sembunyikan separator bullet lama */
.blog-details-content .meta .m-sepa {
display: none;
}
/* Pill: Ringkasan dan waktu baca */
.blog-details-content .meta .m-SumTxt,
.blog-details-content .meta .wta-reading-time,
.blog-details-content .meta .wta-updated-label {
display: inline-flex;
align-items: center;
gap: 0;
background: rgba(255,255,255,0.06);
border: 0.5px solid rgba(255,255,255,0.10);
border-radius: 6px;
padding: 3px 9px 3px 26px;
font-size: 12px;
color: var(--text-dim);
font-style: normal;
position: relative;
}
/* Ikon Ringkasan (book-open) */
.blog-details-content .meta .m-SumTxt::before {
content: '';
position: absolute;
left: 8px;
top: 50%;
transform: translateY(-50%);
width: 13px;
height: 13px;
opacity: .65;
background: currentColor;
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 6s1.5-2 5-2 5 2 5 2v14s-1.5-1-5-1-5 1-5 1V6z'/%3E%3Cpath d='M12 6s1.5-2 5-2 5 2 5 2v14s-1.5-1-5-1-5 1-5 1V6z'/%3E%3C/svg%3E") center/contain no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 6s1.5-2 5-2 5 2 5 2v14s-1.5-1-5-1-5 1-5 1V6z'/%3E%3Cpath d='M12 6s1.5-2 5-2 5 2 5 2v14s-1.5-1-5-1-5 1-5 1V6z'/%3E%3C/svg%3E") center/contain no-repeat;
}
/* Sembunyikan SVG bawaan reading time, ganti dengan ikon mask */
.blog-details-content .meta .wta-reading-time svg {
display: none;
}
.blog-details-content .meta .wta-reading-time::before {
content: '';
position: absolute;
left: 8px;
top: 50%;
transform: translateY(-50%);
width: 13px;
height: 13px;
opacity: .65;
background: currentColor;
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E") center/contain no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E") center/contain no-repeat;
}
/* "Diubah X hari lalu" di meta atas — pill juga */
.blog-details-content .meta .wta-updated-label::before {
content: '';
position: absolute;
left: 8px;
top: 50%;
transform: translateY(-50%);
width: 13px;
height: 13px;
opacity: .65;
background: currentColor;
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z'/%3E%3C/svg%3E") center/contain no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z'/%3E%3C/svg%3E") center/contain no-repeat;
}
/* Meta bawah judul */
.meta.meta-below {
font-size: 13px;
margin-top: 14px;
margin-bottom: 22px;
gap: 8px;
}
/* Pill "Diperbarui" di meta bawah */
.meta.meta-below .wta-updated-below {
display: inline-flex;
align-items: center;
gap: 0;
background: rgba(255,255,255,0.04);
border: 0.5px solid rgba(255,255,255,0.08);
border-radius: 6px;
padding: 3px 9px 3px 9px;
font-size: 12px;
font-style: normal;
color: var(--text-muted);
position: relative;
}
/* =============================================================
BREADCRUMB — single post (nav di atas meta)
============================================================= */
.wta-post-breadcrumb{
display:flex;
flex-wrap:wrap;
align-items:center;
gap:4px 6px;
font-size:12px;
color:var(--text-faint);
margin-bottom:14px;
line-height:1.4;
}
.wta-post-breadcrumb a{
color:var(--text-dim);
text-decoration:none;
transition:color .2s;
}
.wta-post-breadcrumb a:hover{ color:var(--primary_color); }
.wta-bc-sep{
color:var(--text-faint);
font-style:normal;
font-size:14px;
line-height:1;
}
.wta-bc-current{
color:var(--text-muted);
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
max-width:260px;
display:inline-block;
vertical-align:middle;
}
/* =============================================================
META BAWAH JUDUL — tanggal update + komentar
============================================================= */
.meta.meta-below{
display:flex;
align-items:center;
flex-wrap:wrap;
gap:0;
font-size:13px;
color:var(--text-dim);
margin-top:10px;
margin-bottom:20px;
}
.meta.meta-below .wta-updated-below{
display:inline-flex;
align-items:center;
color:var(--text-muted);
font-style:italic;
}
.meta.meta-below .wta-updated-below time{
font-style:inherit;
}
/* homeTxt sebagai link — tetap tampil seperti span biasa tapi bisa diklik */
.Blog .onPage a.homeTxt{
color:inherit;
opacity:0.6;
text-decoration:none;
cursor:pointer;
}
.Blog .onPage a.homeTxt:hover{ opacity:1; color:var(--primary_color); }
.m-post-content img,
.post-body img {
max-width: 100%;
height: auto;
display: block;
margin-left: auto;
margin-right: auto;
}
/* =============================================================
PRINT STYLESHEET — fokus ke konten post saat dicetak
============================================================= */
@media print{
/* Reset background gelap supaya tinta hemat dan teks terbaca */
html, body{
background:#fff !important; color:#000 !important;
font-size:11pt; line-height:1.5;
}
body.wta-other, body.wta-home{ background:#fff !important; color:#000 !important; }
/* Sembunyikan elemen non-konten */
.header-area, .footer-area, .footer-fixed,
.wta-progress-bar, .back-top-btn, .wta-skip-link,
.wta-toc, .wta-related, .tags, .sharingButtons, .share-buttons,
.comments-and-form-wrap, .m-post-author, .m-post-author-overlay,
.mPopSpo, .m-Summary, .m-SumTxt, .jump-link, .wta-copy-code,
.img-bg, .navbar, .hmShell, .ll-titlebar, .navLeft,
.wta-reading-time, nav, aside, button{
display:none !important;
}
/* Tampilkan judul + isi post saja, lebar penuh */
.blog-details-content, .m-post-content, .post-body, .entry-content{
max-width:none !important; width:100% !important;
margin:0 !important; padding:0 !important;
background:#fff !important; color:#000 !important;
box-shadow:none !important;
}
.post-body{ font-size:11pt; }
.post-body img{
max-width:100% !important; height:auto !important;
page-break-inside:avoid; break-inside:avoid;
}
.post-body h1, .post-body h2, .post-body h3, .ptt{
color:#000 !important;
page-break-after:avoid; break-after:avoid;
}
.post-body a{
color:#000 !important; text-decoration:underline;
}
/* Tampilkan URL setelah link supaya bisa diketik ulang */
.post-body a[href^="http"]:after{
content:" (" attr(href) ")";
font-size:9pt; color:#444;
}
.post-body pre, .post-body blockquote, .post-body table{
page-break-inside:avoid; break-inside:avoid;
background:#f5f5f5 !important; color:#000 !important;
border:1px solid #ccc;
}
.ptt{ font-size:18pt !important; margin:0 0 12pt !important; }
.meta{ color:#444 !important; font-size:9.5pt; margin-bottom:10pt; }
.wta-heading-anchor{ display:none !important; }
}
/* =============================================================
HERO SECTION — Tentang & Pengalaman (homepage, di atas Proyek)
============================================================= */
.wta-hero{
display:grid;
grid-template-columns: 1fr 1.15fr;
gap:18px;
align-items:stretch;
}
.hero-card{
background:var(--wta-surface);
border:1px solid var(--wta-border);
border-radius:12px;
padding:22px 22px 20px;
display:flex; flex-direction:column;
position:relative;
overflow:hidden;
}
.hero-card::before{
/* aksen tipis di kiri-atas */
content:""; position:absolute; left:0; top:0;
width:3px; height:38px;
background:var(--wta-accent);
border-radius:0 3px 3px 0;
opacity:.85;
}
/* ---- KOLOM KIRI: About ---- */
.hero-about-head{
display:flex; align-items:center; gap:14px;
margin-bottom:14px;
}
.wta-hero-avatar{
width:62px; height:62px; border-radius:50%;
background:var(--wta-surface-2) center/cover no-repeat;
border:2px solid var(--wta-accent);
flex-shrink:0;
box-shadow:0 0 0 4px rgba(238,69,64,.08);
}
.wta-hero-id{ min-width:0; }
.wta-hero-name{
font:600 17px/1.2 'Inter', system-ui, -apple-system, sans-serif;
color:var(--wta-text);
white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.wta-hero-role{
font:13px/1.3 'Inter', system-ui, -apple-system, sans-serif;
color:var(--wta-muted); margin-top:3px;
}
.hero-bio{
font:14px/1.6 'Inter', system-ui, -apple-system, sans-serif;
color:var(--wta-text-dim);
margin:0 0 14px;
flex:1;
}
/* Stats row */
.hero-stats{
display:grid;
grid-template-columns:repeat(3, 1fr);
gap:0;
margin:2px 0 16px;
padding:12px 0;
border-top:1px solid var(--wta-border);
border-bottom:1px solid var(--wta-border);
}
.wta-hero-stat{
display:flex; flex-direction:column; align-items:center;
text-align:center;
position:relative;
}
.wta-hero-stat + .wta-hero-stat::before{
content:""; position:absolute; left:0; top:20%; bottom:20%;
width:1px; background:var(--wta-border);
}
.hero-stat-num{
font:700 20px/1 'Inter', system-ui, -apple-system, sans-serif;
color:var(--wta-accent);
margin:0;
font-variant-numeric:tabular-nums;
letter-spacing:-.5px;
transition:opacity .3s ease;
}
.hero-stat-num.loading{ opacity:.35; }
.hero-stat-label{
font:11px 'Inter', system-ui, -apple-system, sans-serif;
color:var(--wta-muted);
text-transform:uppercase; letter-spacing:.6px;
margin:5px 0 0;
}
.hero-tags{
display:flex; flex-wrap:wrap; gap:6px;
margin-bottom:16px;
}
.hrotag{
font:500 11px/1 'Inter', system-ui, -apple-system, sans-serif;
color:var(--wta-text-dim);
background:var(--wta-surface-2);
border:1px solid var(--wta-border);
padding:6px 10px; border-radius:999px;
letter-spacing:.2px;
}
.hero-cta{ display:flex; gap:8px; flex-wrap:wrap; }
.hero-btn{
display:inline-flex; align-items:center; gap:6px;
font:500 13px 'Inter', system-ui, -apple-system, sans-serif;
padding:8px 14px;
border-radius:999px;
border:1px solid var(--wta-border-strong);
background:transparent;
color:var(--wta-text);
text-decoration:none;
transition:all .15s ease;
}
.hero-btn svg{ width:14px; height:14px; }
.hero-btn:hover{
background:var(--wta-hover);
border-color:var(--wta-text-dim);
color:var(--wta-text);
}
.hero-btn-primary{
background:var(--wta-accent);
border-color:var(--wta-accent);
color:#fff;
}
.hero-btn-primary:hover{
background:#d63b36; border-color:#d63b36; color:#fff;
}
.hero-btn-ghost{
background:transparent;
border:1px dashed var(--wta-border-strong);
color:var(--wta-text-dim);
}
.hero-btn-ghost:hover{
background:var(--wta-hover);
border-style:solid;
border-color:var(--wta-accent);
color:var(--wta-text);
}
/* ---- KOLOM KANAN: Timeline ---- */
.hero-timeline-head{
display:flex; align-items:center; gap:8px;
font:600 13px 'Inter', system-ui, -apple-system, sans-serif;
color:var(--wta-text);
text-transform:uppercase; letter-spacing:.4px;
margin-bottom:18px;
}
.hero-timeline-head svg{
width:16px; height:16px; color:var(--wta-accent); flex-shrink:0;
}
.hero-tl-list{
list-style:none; padding:0; margin:0;
position:relative;
}
.hero-tl-list::before{
/* garis vertikal tipis di sepanjang timeline (digeser supaya lewat tengah ikon 24px) */
content:""; position:absolute;
left:11px; top:12px; bottom:12px;
width:2px;
background:linear-gradient(180deg,
var(--wta-accent) 0%,
var(--wta-accent) 30%,
var(--wta-border-strong) 100%);
border-radius:2px;
z-index:0;
}
.hero-tl-item{
position:relative;
padding:0 0 18px 36px;
min-height:24px;
}
.hero-tl-item:last-child{ padding-bottom:0; }
/* Ikon kotak di setiap item (24x24) — menggantikan dot polos */
.hero-tl-icon{
position:absolute; left:0; top:1px;
width:24px; height:24px;
display:flex; align-items:center; justify-content:center;
background:var(--wta-surface-2);
border:1.5px solid var(--wta-accent);
border-radius:7px;
color:var(--wta-accent);
box-shadow:0 0 0 3px var(--wta-surface);
z-index:1;
transition:transform .15s ease;
}
.hero-tl-icon svg{ width:13px; height:13px; }
.hero-tl-item:first-child .hero-tl-icon{
background:var(--wta-accent);
color:#fff;
box-shadow:0 0 0 3px var(--wta-surface), 0 0 0 5px rgba(238,69,64,.18);
}
.hero-tl-item:hover .hero-tl-icon{
transform:scale(1.08);
}
.hero-tl-meta{
display:flex; align-items:center; gap:8px;
margin-bottom:3px;
}
.hero-tl-date{
font:500 11px 'Inter', system-ui, -apple-system, sans-serif;
color:var(--wta-muted);
letter-spacing:.3px;
text-transform:uppercase;
}
.hero-tl-badge{
font:600 9.5px 'Inter', system-ui, -apple-system, sans-serif;
color:#fff;
background:var(--wta-accent);
padding:2px 7px;
border-radius:999px;
text-transform:uppercase; letter-spacing:.4px;
}
.hero-tl-title{
font:500 14px/1.35 'Inter', system-ui, -apple-system, sans-serif;
color:var(--wta-text);
}
.hero-tl-org{
font:12.5px 'Inter', system-ui, -apple-system, sans-serif;
color:var(--wta-text-dim);
margin-top:2px;
}
/* ---- Collapsible body — selaras dengan section lain ---- */
.wta-hero.collapsed{ display:none; }
/* ---- Responsive ---- */
@media (max-width:1100px){
.wta-hero{ grid-template-columns:1fr 1fr; }
}
@media (max-width:768px){
.wta-hero{ grid-template-columns:1fr; gap:12px; }
.hero-card{ padding:18px 16px 16px; }
.wta-hero-avatar{ width:54px; height:54px; }
.wta-hero-name{ font-size:16px; }
.hero-bio{ font-size:13.5px; }
.hero-stat-num{ font-size:17px; }
.hero-stat-label{ font-size:10px; }
.hero-timeline-head{ font-size:12px; margin-bottom:14px; }
.hero-tl-item{ padding-bottom:14px; padding-left:32px; }
.hero-tl-icon{ width:22px; height:22px; }
.hero-tl-icon svg{ width:12px; height:12px; }
.hero-tl-list::before{ left:10px; }
.hero-btn{ font-size:12.5px; padding:7px 12px; }
}
.wta-hero-stat[data-stat='projects'] .hero-stat-num::after {
content: "+";
font-weight: bold;
}
]]>Selamat siang
Lalu Abd. Rahman
Guru · Operator Dapodik · Narablog
Halo, Saya Lalu — seorang pendidik sekaligus praktisi teknologi. Sehari-hari saya mengabdi sebagai Guru Sains (Biologi) dan Operator Dapodik. Di luar ruang kelas, saya adalah seorang Digital Product Developer & Web Creator. Saya aktif mengelola berbagai platform berbasis WordPress, XenForo, Invision Community (IPS), dan Flarum, serta mengembangkan kustomisasi web dan tools digital secara efisien lewat pendekatan AI-Assisted Development.
- —
- Tulisan
- —
- Tahun Mengajar
- —
- Proyek
Pengalaman
-
Posisi Saat IniGuru / Operator Dapodik / Web Creator
-
Magister SainsInstitut Teknologi Bandung, SITH — Beasiswa penuh
-
BloggerMerambah dunia Webmaster
-
Awal Karier ProfesiLulus S1 (Universitas Negeri Makassar), Tes CPNS
-
Pendidikan DasarSD, SMP, SMA
Tidak ada tulisan ditemukan.
Komentar aktif!Gunakan bahasa yang jelas dan santun. Komentar pertama Anda mungkin perlu disetujui dulu sebelum tampil.
Kirim Komentar
Bersponsor
Banyak Dibaca
Ringkasan Tulisan•
404
Halaman tidak ditemukan
Maaf, halaman yang Anda cari tidak ada, sudah dipindahkan, atau alamatnya keliru. Coba cari konten lain atau kembali ke beranda.