/* ==========================================================
   HARDIYANTO THEME
   SINGLE ARTICLE
========================================================== */

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

.single-post{

    padding:42px;

}

/* ==========================================
   CATEGORY
========================================== */

.post-category{

    display:inline-block;

    margin-bottom:18px;

    font-family:'Inter',sans-serif;

    font-size:13px;

    font-weight:700;

    letter-spacing:.08em;

    text-transform:uppercase;

    color:var(--primary);

}

/* ==========================================
   TITLE
========================================== */

.single-title{

    margin:0 0 24px;

    font-size:52px;

    line-height:1.15;

    font-weight:800;

    letter-spacing:-.5px;

    color:var(--heading);

}

/* ==========================================
   META
========================================== */

.post-meta{

    display:flex;

    align-items:center;

    gap:12px;

    margin-bottom:36px;

    font-size:15px;

    color:var(--light);

    font-family:'Inter',sans-serif;

}

/* ==========================================
   FEATURED IMAGE
========================================== */

.single-thumbnail{

    margin-bottom:46px;

    overflow:hidden;

    border-radius:18px;

}

.single-thumbnail img{

    display:block;

    width:100%;

    height:auto;

}

/* ==========================================
   CONTENT
========================================== */

.single-content{

    max-width:760px;

    font-size:20px;

    line-height:2;

    color:var(--text);

}

/* Paragraph */

.single-content p{

    margin:0 0 34px;

}

/* Heading */

.single-content h2{

    margin:64px 0 24px;

    font-size:38px;

    line-height:1.25;

}

.single-content h3{

    margin:52px 0 20px;

    font-size:30px;

}

.single-content h4{

    margin:42px 0 18px;

    font-size:24px;

}

/* Link */

.single-content a{

    color:var(--primary);

    text-decoration:underline;

}

.single-content a:hover{

    color:var(--primary-hover);

}

/* Image */

.single-content img{

    display:block;

    width:100%;

    height:auto;

    margin:40px auto;

    border-radius:14px;

}

/* List */

.single-content ul,

.single-content ol{

    margin:0 0 34px 28px;

}

.single-content li{

    margin-bottom:14px;

}

/* Quote */

.single-content blockquote{

    margin:48px 0;

    padding:28px 34px;

    border-left:5px solid var(--primary);

    background:#F8FAFC;

    border-radius:0 14px 14px 0;

    font-style:italic;

}

.single-content blockquote p{

    margin:0;

}

/* Code */

.single-content pre{

    margin:40px 0;

    padding:24px;

    overflow:auto;

    border-radius:14px;

    background:#111827;

    color:#fff;

}

.single-content code{

    font-family:Consolas,Monaco,monospace;

}

/* Table */

.single-content table{

    width:100%;

    margin:40px 0;

    border-collapse:collapse;

}

.single-content th,

.single-content td{

    padding:14px;

    border:1px solid var(--border);

}

.single-content th{

    background:#F8FAFC;

}

/* ==========================================
   TAG
========================================== */

.post-tags{

    margin-top:60px;

    padding-top:34px;

    border-top:1px solid var(--border);

}

.post-tags a{

    display:inline-block;

    margin:0 8px 10px 0;

    padding:8px 16px;

    border:1px solid var(--border);

    border-radius:40px;

    color:var(--text);

    transition:.25s;

}

.post-tags a:hover{

    background:var(--primary);

    color:#fff;

    border-color:var(--primary);

}

/* ==========================================
   NAVIGATION
========================================== */

.post-navigation{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:30px;

    margin-top:60px;

    padding-top:40px;

    border-top:1px solid var(--border);

}

.post-navigation div{

    padding:24px;

    border:1px solid var(--border);

    border-radius:16px;

    transition:.25s;

}

.post-navigation div:hover{

    border-color:var(--primary);

}

.post-navigation .nav-next{

    text-align:right;

}

.post-navigation a{

    color:var(--heading);

    font-weight:700;

}

.post-navigation a:hover{

    color:var(--primary);

}

/* ==========================================
   COMMENTS
========================================== */

.comments-area{

    margin-top:70px;

    padding-top:40px;

    border-top:1px solid var(--border);

}

/* ==========================================
   COMMENT FORM
========================================== */

.comment-form input,

.comment-form textarea{

    width:100%;

    padding:14px 18px;

    margin-bottom:18px;

    border:1px solid var(--border);

    border-radius:12px;

    font-size:16px;

}

.comment-form textarea{

    min-height:180px;

    resize:vertical;

}

.comment-form input:focus,

.comment-form textarea:focus{

    outline:none;

    border-color:var(--primary);

}

/* ==========================================
   MOBILE
========================================== */

@media (max-width:768px){

    .single-post{

        padding:28px;

    }

    .single-title{

        font-size:38px;

    }

    .single-content{

        max-width:100%;

        font-size:18px;

        line-height:1.9;

    }

    .single-content h2{

        font-size:30px;

    }

    .single-content h3{

        font-size:26px;

    }

    .post-navigation{

        grid-template-columns:1fr;

    }

    .post-navigation .nav-next{

        text-align:left;

    }

}