*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    height:100%;
}

body{
    min-height:100vh;
    display:flex;
    flex-direction:column;

    font-family:system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Open Sans','Helvetica Neue',sans-serif;
    background:#fff;
    color:#222;
    line-height:1.8;
}

.container{
    width:100%;
    max-width:760px;
    margin:0 auto;
    padding:0 20px;
}

.header{
    /* DIUBAH HANYA INI */
    padding:30px 0 0;
}

.navbar{
    display:flex;
    justify-content:space-between;
    align-items:center;
}

.logo{
    font-family:system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-size:21px;
    font-weight:700;
    font-style:italic;
    color:#555;
    text-decoration:none;
}

.nav-menu{
    display:flex;
    align-items:center;
    gap:40px;
    list-style:none;
    margin:0;
    padding:0;
}

.nav-menu a{
    font-size:18px;
    font-weight:400;
    color:#333;
    text-decoration:none;
    transition:.25s;
}

.nav-menu a:hover{
    color:#777;
}

.post{
    display:flex;

    align-items:flex-start;

    margin-bottom:10px;
}

.posts{
    flex:1;
}

.post-lang{

    width:50px;

    flex-shrink:0;

    color:#c7c7c7;

    font-size:20px;

    font-weight:500;

    text-transform:uppercase;

    margin-top:2px;
}

.post-excerpt{
    margin-top:8px;
    margin-bottom:8px;
    color:#666;
    font-size:17px;
    line-height:1.7;
}

.post-tag{
    color:#4f67d7;
    text-decoration:none !important;
    font-weight:400;
    transition:.2s;
}

.post-tag:visited{
    color:#4f67d7;
    text-decoration:none;
}

.post-tag:hover{
    color:#3f58c8;
    text-decoration:underline;
}

.post-tag:focus{
    text-decoration:none;
}

.post-content{

    flex:1;
}

.post-title{

    display:inline-block;

    color:#555;

    font-size:21px;

    font-weight:400;

    line-height:1.6;

    text-decoration:none;

    transition:.25s;
}

.post-title:hover{

    color:#111;
}

.post-date{
    margin-top:10px;
    color:#9b9b9b;
    font-size:17px;
    font-weight:400;
}

.footer{
    width:100vw;
    margin-top:auto;
    margin-left:calc(50% - 50vw);
    background:#eef1fb;
    border-top:1px solid #dde2f3;
    padding:18px 0;
}

.footer-content{
    max-width:760px;
    margin:0 auto;
    font-weight:620;
    text-align:center;
    font-size:18px;
    color:#444;
}

.navbar{
    padding:0;
}

.navbar-toggler{
    border:1px solid #ddd;
    border-radius:10px;
    padding:10px 12px;
}

.navbar-toggler:focus{
    box-shadow:none;
}

.navbar-nav{
    gap:35px;
}

@media (max-width:991px){

    .navbar-collapse{
        margin-top:20px;
    }

    .navbar-nav{
        gap:0;
        text-align:center;
    }

    .nav-item{
        margin:12px 0;
    }

}

/* ===========================
   ARTICLE PAGE
=========================== */

.article-page{
    width:100%;
    max-width:760px;
    margin:0 auto;
    padding:20px 20px 80px;
}

.article-header{
    margin-bottom:55px;
}

.article-date{
    font-size:17px;
    color:#666;
    font-weight:400;
    margin-bottom:28px;
}

.article-title{
    font-size:60px;
    font-weight:700;
    line-height:1.15;
    letter-spacing:-1.8px;
    color:#202124;
}

.article-content{
    font-size:21px;
    line-height:2;
    color:#444;
}

.article-content h2{
    font-size:42px;
    line-height:1.25;
    font-weight:700;
    margin:70px 0 24px;
}

.article-content h3{
    font-size:30px;
    margin:50px 0 20px;
    font-weight:700;
}

.article-content p{
    margin-bottom:32px;
}

.article-content a{
    color:#3366cc;
    text-decoration:none;
}

.article-content a:hover{
    text-decoration:underline;
}

.article-content img{
    display:block;
    width:100%;
    border-radius:12px;
    margin:45px auto;
}

.article-content pre{
    background:#1f1f1f;
    color:#fff;
    padding:24px;
    border-radius:12px;
    overflow:auto;
    margin:40px 0;
}

.article-content code{
    font-family:Consolas, monospace;
}

.article-content blockquote{
    border-left:4px solid #ddd;
    padding-left:22px;
    margin:35px 0;
    color:#666;
    font-style:italic;
}

/* ===========================
   ARTICLE TAGS
=========================== */

.article-tags{
    margin-top:28px;
    margin-bottom:40px;
}

.article-tag{
    display:inline-block;
    padding:10px 18px;
    margin-right:10px;
    margin-bottom:10px;

    background:#f4f4f5;
    color:#222;

    border-radius:8px;

    font-size:17px;
    font-weight:500;

    text-decoration:none;
    transition:.2s;
}

.article-tag:hover{
    background:#ececec;
    color:#222;
}

/* Mobile */

@media(max-width:768px){

    .article-page{
        padding:15px 20px 60px;
    }

    .article-date{
        font-size:15px;
        margin-bottom:18px;
    }

    .article-title{
        font-size:42px;
        line-height:1.18;
        letter-spacing:-1px;
    }

    .article-content{
        font-size:19px;
        line-height:1.9;
    }

    .article-content h2{
        font-size:34px;
    }

    .article-content h3{
        font-size:28px;
    }

}