/* ==========================================
Single Article
========================================== */

.mns-single-hero{
    position:relative;
    padding:60px 0 40px;
    background:#eef8ff;
    overflow:hidden;
}

.mns-single-hero-content{
    max-width:860px;
    margin:0 auto;
    text-align:center;
}

.mns-single-title{
    margin-bottom:20px;
}

.mns-single-meta{
    justify-content:center;
    gap:24px;
}

.mns-single-content{
    padding:50px 0 70px;
}

.mns-single-content .mns-container{
    max-width:860px;
    margin:0 auto;
}

.mns-single-thumbnail{
    margin-bottom:40px;
}

.mns-single-thumbnail img{
    display:block;
    width:100%;
    border-radius:18px;
}

.mns-single-article{
    font-size:17px;
    line-height:1.9;
    color:var(--mns-text);
  	overflow-wrap:anywhere;
}

.mns-single-article p{
    margin-bottom:24px;
}

.mns-single-article h2{
    font-size:34px;
    font-weight:700;
    line-height:1.3;
}

.mns-single-article h3{
    font-size:28px;
    font-weight:700;
    line-height:1.35;
}

.mns-single-article h4{
    font-size:22px;
    font-weight:700;
}

.mns-single-article ul,
.mns-single-article ol{
    margin:0 0 24px;
    padding-left:28px;
    list-style-position:outside;
}

.mns-single-article ul{
    list-style-type:disc;
}

.mns-single-article ol{
    list-style-type:decimal;
}

.mns-single-article li{
    margin-bottom:18px;
    line-height:1.9;
}

.mns-single-article li:last-child{
    margin-bottom:0;
}

.mns-single-article > *{
    margin-bottom:24px;
}

.mns-single-article h2,
.mns-single-article h3,
.mns-single-article h4{
    margin-top:48px;
    margin-bottom:20px;
}

.mns-single-article img{
    display:block;
    width:100; /*Kalau jadikan 100%, gambar untuk classic editor akan membesar */
    max-width:100%;
    height:auto;

    margin:32px auto;

    border-radius:16px;

    box-shadow:0 10px 28px rgba(15,23,42,.08);
}

.mns-single-article figure{
    display:block;
    margin:40px 0;
}

.mns-single-article figure img{
    margin:0;
}

.mns-single-article figcaption{
    margin-top:12px;

    text-align:center;

    font-size:14px;
  
  	line-height:1.6;

    color:var(--mns-text-light);
}

@media (max-width:767px){

    .mns-single-article h1{
        font-size:38px;
        line-height:1.25;
        font-weight:700;
    }

    .mns-single-article h2{
        margin-top:36px;
    }

}

/* ==========================================
WordPress Image Sizes
========================================== */

/* Classic Editor */
.mns-single-article img.size-thumbnail,
.mns-single-article .wp-block-image.size-thumbnail img{
    max-width:150px;
}

.mns-single-article img.size-medium,
.mns-single-article .wp-block-image.size-medium img{
    max-width:420px;
}

.mns-single-article img.size-large,
.mns-single-article .wp-block-image.size-large img{
    max-width:100%;
}

.mns-single-article img.size-full,
.mns-single-article .wp-block-image.size-full img{
    max-width:100%;
}

.mns-single-article figure.wp-caption img{
    width:100%;
    max-width:100%;
    height:auto;
}

/* ==========================================
Blockquote
========================================== */

.mns-single-article > blockquote{
    margin:32px 0;
    padding:20px 24px;

    border-left:4px solid var(--mns-primary);

    background:#f8fafc;

    border-radius:12px;

    font-style:italic;

    color:var(--mns-text-light);
}

.mns-single-article > blockquote p:last-child{
    margin-bottom:0;
}

/* ==========================================
Table
========================================== */

.mns-single-article table{
    width:100%;

    margin:32px 0;

    border-collapse:collapse;

    overflow:hidden;

    border-radius:12px;
}

.mns-single-article th,
.mns-single-article td{
    padding:14px 16px;

    border:1px solid #e5e7eb;

    text-align:left;
}

.mns-single-article th{
    background:#f8fafc;

    font-weight:700;
}

/* ==========================================
Links
========================================== */

.mns-single-article a{
    color:var(--mns-primary);

    text-decoration:none;

    font-weight:600;

    transition:.2s;
}

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

/* ==========================================
Code
========================================== */

.mns-single-article code{
    padding:2px 6px;

    border-radius:6px;

    background:#f3f4f6;

    font-size:.9em;

    font-family:Consolas, monospace;
}

.mns-single-article pre{
    margin:32px 0;

    padding:20px;

    overflow:auto;

    border-radius:12px;

    background:#111827;

    color:#f9fafb;
}

.mns-single-article pre code{
    padding:0;

    background:none;

    color:inherit;
}

.mns-author-box,
.mns-share,
.mns-article-navigation{
    clear: both;
}

/* ==========================================
Author Box
========================================== */

.mns-author-box{
    display:flex;
    gap:20px;
    align-items:center;

    margin-top:48px;
    padding:24px;

    border:1px solid #e8edf3;
    border-radius:18px;

    background:#fff;

}

.mns-author-avatar img{
    width:80px;
    height:80px;
    border-radius:50%;
    display:block;
}

.mns-author-content{
    flex:1;
}

.mns-author-label{
    display:block;
    font-size:13px;
    color:var(--mns-text-light);
    margin-bottom:6px;
}

.mns-author-name{
    margin:0;
    font-size:24px;
    font-weight:700;
}

.mns-author-description{
    margin-top:12px;
    color:var(--mns-text-light);
    line-height:1.8;
}

/* ==========================================
Related Articles
========================================== */

.mns-related-articles{
    margin-top:80px;
    padding-bottom:80px;
}

.mns-related-articles .mns-container{
    max-width:1240px;
    margin:0 auto;
}

.mns-related-title{
    margin:0;
    font-size:36px;
    font-weight:700;
}

.mns-related-description{
    margin:16px 0 32px;
    color:var(--mns-text-light);
    font-size:17px;
    line-height:1.8;
}

/* ==========================================
Share
========================================== */

.mns-share{
    margin-top:40px;
    padding-top:32px;

    border-top:1px solid #e8edf3;
}

.mns-share-title{
    margin:0 0 18px;

    font-size:22px;
    font-weight:700;
}

.mns-share-buttons{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:12px;
}

.mns-share-button{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	gap:8px;

	width:100%;
	height:56px;
	padding:0 22px;

	border:none;
	border-radius:999px;

	background:#f5f7fa;

	color:#333;

	text-decoration:none;

	font-size:14px;
	font-weight:600;

	cursor:pointer;

	transition:
    	background .25s,
    	color .25s,
    	transform .25s,
    	box-shadow .25s;
}

.mns-share-button i{
    font-size:19px;
    flex-shrink:0;
}

.mns-share-facebook:hover{
    background:#1877f2;
    color:#fff;
}

.mns-share-whatsapp:hover{
    background:#25d366;
    color:#fff;
}

.mns-share-x:hover{
    background:#111;
    color:#fff;
}

.mns-share-copy{
    color:var(--mns-primary);
}

.mns-share-copy i{
    color:inherit;
  	font-size:20px;
}

.mns-share-copy:hover{
    background:var(--mns-primary);
    color:#fff;
}

.mns-share-button span{
    white-space:nowrap;
}

.mns-share-button:hover{
    transform:translateY(-2px);
    box-shadow:0 10px 24px rgba(15,23,42,.08);
}

.mns-share-button:disabled{
    opacity:.7;
    cursor:default;
}

/* ==========================================
Article Navigation
========================================== */

.mns-article-navigation{
    margin-top:48px;
  	margin-bottom:80px;
}

.mns-navigation-card{
    display:flex;
    flex-direction:column;
  	justify-content:flex-start;
  	min-height:unset;
    padding:20px;

    border:1px solid #e8edf3;
    border-radius:18px;

    background:#fff;

    text-decoration:none;

    transition:.25s;
}

.mns-navigation-card:hover{
    transform:translateY(-4px);

    border-color:var(--mns-primary);

    box-shadow:0 16px 36px rgba(16,185,129,.12);
}

.mns-navigation-card:hover .mns-navigation-title{
color:var(--mns-primary);
}

.mns-navigation-label{
    margin-bottom:6px;

    font-size:12px;
  	letter-spacing:.02em;
	text-transform:uppercase;

    color:var(--mns-primary);

    font-weight:600;
}

.mns-navigation-title{
    margin:0;
  	margin-top:8px;

    color:var(--mns-text);

    font-size:22px;
  	font-weight:700;

    line-height:1.4;
  
  	display:-webkit-box;
	-webkit-line-clamp:2;
	-webkit-box-orient:vertical;
	overflow:hidden;
	}

.mns-navigation-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(320px, 1fr));
    gap:20px;
}

@media (max-width:767px){

    .mns-navigation-grid{
        grid-template-columns:1fr;
    }
  
  	.mns-navigation-card{
		padding:20px;
		min-height:unset;
	}

	.mns-navigation-title{
		font-size:14px;
	}
  
  	.mns-navigation-label{
      	font-size:10px
	}
}

/* ==========================================
Table
========================================== */
 
.mns-single-article .mns-table-scroll{
    width:100%;
    max-width:100%;
    overflow-x:auto;
    overflow-y:hidden;
}

/* ==========================================
Share Button
========================================== */
  
@media (max-width: 767px){

    .mns-share-buttons{
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }

    .mns-share-button{
        width:100%;
        min-width:0;
        max-width:100%;
    }

}
  
/* ==========================================
Classic Editor - Table
========================================== */

.mns-single-article > .mns-table-scroll{
    width:100%;
    max-width:100%;
    overflow-x:auto;
    overflow-y:hidden;
}

.mns-single-article > .mns-table-scroll > table{
    width:1100px !important;
    min-width:1100px !important;
    max-width:none !important;
}

.mns-single-article > .mns-table-scroll > table th,
.mns-single-article > .mns-table-scroll > table td{
    white-space:nowrap !important;
}