/* =========================================================
   DETAIL BERITA
   YAYASAN NURUL ISLAM
   PREMIUM EMERALD
========================================================= */

.detail-page {

    background:
        #f7fcfa;

    min-height:
        70vh;

}


/* =========================================================
   CONTAINER
========================================================= */

.detail-container {

    width:
        min(
            1080px,
            calc(100% - 40px)
        );

    margin:
        0 auto;

}


/* =========================================================
   HEADER
========================================================= */

.detail-header {

    position:
        relative;

    overflow:
        hidden;

    padding:
        58px
        0
        65px;

    background:

        radial-gradient(
            circle at 90% 10%,
            rgba(81,255,192,.16),
            transparent 28%
        ),

        linear-gradient(
            135deg,
            #022c22,
            #064b3b 55%,
            #087b5b
        );

}


.detail-header::after {

    content:
        "";

    position:
        absolute;

    left:
        0;

    right:
        0;

    bottom:
        0;

    height:
        2px;

    background:
        linear-gradient(
            90deg,
            transparent,
            #62edbb,
            #ffffff,
            #62edbb,
            transparent
        );

}


.back-news {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        8px;

    margin-bottom:
        32px;

    color:
        rgba(255,255,255,.72);

    font-size:
        11px;

    font-weight:
        600;

    transition:
        .25s ease;

}


.back-news:hover {

    color:
        #ffffff;

    transform:
        translateX(-4px);

}


.detail-category {

    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        8px;

    margin-bottom:
        18px;

}


.detail-category span {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        6px;

    padding:
        7px
        12px;

    border:
        1px solid
        rgba(255,255,255,.18);

    border-radius:
        100px;

    color:
        #d9fff0;

    background:
        rgba(255,255,255,.07);

    font-size:
        9px;

    font-weight:
        700;

}


.detail-category span i {

    color:
        #72efc0;

}


.detail-header h1 {

    max-width:
        900px;

    margin:
        0;

    color:
        #ffffff;

    font-family:
        "Playfair Display",
        Georgia,
        serif;

    font-size:
        clamp(
            38px,
            5vw,
            62px
        );

    line-height:
        1.12;

    letter-spacing:
        -.7px;

}


.detail-excerpt {

    max-width:
        760px;

    margin:
        22px 0 30px;

    color:
        rgba(255,255,255,.72);

    font-size:
        14px;

    line-height:
        1.85;

}


.detail-meta {

    display:
        flex;

    align-items:
        center;

    flex-wrap:
        wrap;

    gap:
        24px;

    color:
        rgba(255,255,255,.62);

    font-size:
        10px;

}


.detail-author {

    display:
        flex;

    align-items:
        center;

    gap:
        9px;

}


.detail-author-icon {

    width:
        34px;

    height:
        34px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        50%;

    background:
        rgba(255,255,255,.12);

    color:
        #8af2c7;

}


.detail-author div {

    display:
        flex;

    flex-direction:
        column;

}


.detail-author small {

    color:
        rgba(255,255,255,.45);

    font-size:
        8px;

}


.detail-author strong {

    color:
        #ffffff;

    font-size:
        10px;

}


.detail-meta-item {

    display:
        flex;

    align-items:
        center;

    gap:
        7px;

}


.detail-meta-item i {

    color:
        #72efc0;

    font-size:
        13px;

}


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

.detail-content-section {

    padding:
        65px 0 100px;

}


.detail-cover {

    position:
        relative;

    overflow:
        hidden;

    margin-bottom:
        45px;

    border-radius:
        25px;

    background:
        #064b3b;

    box-shadow:
        0 25px 70px
        rgba(3,46,36,.14);

}


.detail-cover img {

    display:
        block;

    width:
        100%;

    max-height:
        580px;

    object-fit:
        cover;

}


/* =========================================================
   LAYOUT
========================================================= */

.detail-layout {

    display:
        grid;

    grid-template-columns:
        minmax(0, 1fr)
        290px;

    gap:
        55px;

    align-items:
        start;

}


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

.detail-article {

    min-width:
        0;

    padding:
        5px 0;

}


.article-content {

    color:
        #354b44;

    font-family:
        "Poppins",
        Arial,
        sans-serif;

    font-size:
        15px;

    line-height:
        2;

}


.article-content p {

    margin:
        0 0 23px;

}


.article-content h2 {

    margin:
        40px 0 15px;

    color:
        #10231e;

    font-family:
        "Playfair Display",
        Georgia,
        serif;

    font-size:
        30px;

    line-height:
        1.3;

}


.article-content h3 {

    margin:
        32px 0 12px;

    color:
        #10231e;

    font-family:
        "Playfair Display",
        Georgia,
        serif;

    font-size:
        24px;

}


.article-content img {

    display:
        block;

    max-width:
        100%;

    height:
        auto;

    margin:
        30px auto;

    border-radius:
        15px;

}


.article-content blockquote {

    position:
        relative;

    margin:
        35px 0;

    padding:
        25px 28px;

    border-left:
        4px solid
        #0a936b;

    border-radius:
        0 15px 15px 0;

    background:
        #effbf6;

    color:
        #075b45;

    font-family:
        "Playfair Display",
        Georgia,
        serif;

    font-size:
        20px;

    line-height:
        1.6;

}


.article-content a {

    color:
        #087b5b;

    font-weight:
        600;

}


.article-content ul,
.article-content ol {

    margin:
        20px 0;

    padding-left:
        25px;

}


.article-content li {

    margin-bottom:
        8px;

}


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

.article-bottom {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        20px;

    margin-top:
        55px;

    padding-top:
        25px;

    border-top:
        1px solid
        rgba(3,46,36,.10);

}


.article-share-label {

    display:
        flex;

    align-items:
        center;

    gap:
        12px;

    color:
        #7b8984;

    font-size:
        10px;

}


.share-buttons {

    display:
        flex;

    gap:
        7px;

}


.share-buttons button {

    width:
        34px;

    height:
        34px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border:
        1px solid
        rgba(8,123,91,.15);

    border-radius:
        50%;

    background:
        #ffffff;

    color:
        #087b5b;

    cursor:
        pointer;

    transition:
        .25s ease;

}


.share-buttons button:hover {

    color:
        #ffffff;

    background:
        #087b5b;

    transform:
        translateY(-2px);

}


.back-bottom {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        8px;

    color:
        #087b5b;

    font-size:
        10px;

    font-weight:
        700;

}


/* =========================================================
   SIDEBAR
========================================================= */

.detail-sidebar {

    position:
        sticky;

    top:
        100px;

}


.sidebar-card {

    padding:
        25px;

    border:
        1px solid
        rgba(3,46,36,.09);

    border-radius:
        20px;

    background:
        #ffffff;

    box-shadow:
        0 15px 45px
        rgba(3,46,36,.07);

}


.sidebar-label {

    color:
        #0a936b;

    font-size:
        9px;

    font-weight:
        800;

    letter-spacing:
        1.7px;

}


.sidebar-card h3 {

    margin:
        7px 0 22px;

    color:
        #10231e;

    font-family:
        "Playfair Display",
        Georgia,
        serif;

    font-size:
        24px;

}


.sidebar-row {

    display:
        flex;

    align-items:
        flex-start;

    gap:
        11px;

    padding:
        15px 0;

    border-top:
        1px solid
        rgba(3,46,36,.07);

}


.sidebar-row > i {

    margin-top:
        2px;

    color:
        #0a936b;

}


.sidebar-row div {

    display:
        flex;

    flex-direction:
        column;

    gap:
        2px;

}


.sidebar-row small {

    color:
        #9aa6a1;

    font-size:
        8px;

}


.sidebar-row strong {

    color:
        #263a34;

    font-size:
        10px;

    line-height:
        1.5;

}


.sidebar-quote {

    margin-top:
        20px;

    padding:
        25px;

    border-radius:
        20px;

    background:
        linear-gradient(
            135deg,
            #064b3b,
            #087b5b
        );

    color:
        #ffffff;

    box-shadow:
        0 15px 35px
        rgba(3,46,36,.15);

}


.sidebar-quote i {

    color:
        #76efc2;

    font-size:
        28px;

}


.sidebar-quote p {

    margin:
        8px 0 0;

    color:
        rgba(255,255,255,.78);

    font-family:
        "Playfair Display",
        Georgia,
        serif;

    font-size:
        15px;

    line-height:
        1.65;

}


/* =========================================================
   NOT FOUND
========================================================= */

.detail-not-found {

    min-height:
        65vh;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;

    padding:
        50px 20px;

    text-align:
        center;

}


.not-found-icon {

    width:
        80px;

    height:
        80px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    margin-bottom:
        20px;

    border-radius:
        50%;

    background:
        #effbf6;

    color:
        #087b5b;

    font-size:
        30px;

}


.detail-not-found h1 {

    margin:
        0 0 10px;

    color:
        #10231e;

    font-family:
        "Playfair Display",
        Georgia,
        serif;

    font-size:
        34px;

}


.detail-not-found p {

    max-width:
        480px;

    margin:
        0 0 25px;

    color:
        #7b8984;

    font-size:
        13px;

    line-height:
        1.7;

}


.detail-button {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        8px;

    padding:
        12px 20px;

    border-radius:
        100px;

    background:
        linear-gradient(
            135deg,
            #087b5b,
            #0a936b
        );

    color:
        #ffffff;

    font-size:
        11px;

    font-weight:
        700;

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 900px) {

    .detail-layout {

        grid-template-columns:
            1fr;

        gap:
            40px;

    }


    .detail-sidebar {

        position:
            static;

        display:
            grid;

        grid-template-columns:
            1fr 1fr;

        gap:
            20px;

    }


    .sidebar-quote {

        margin-top:
            0;

    }

}


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

@media (max-width: 650px) {

    .detail-container {

        width:
            calc(100% - 28px);

    }


    .detail-header {

        padding:
            45px 0 50px;

    }


    .detail-header h1 {

        font-size:
            38px;

    }


    .detail-excerpt {

        font-size:
            12px;

    }


    .detail-meta {

        gap:
            15px;

    }


    .detail-content-section {

        padding:
            45px 0 70px;

    }


    .detail-cover {

        margin-bottom:
            32px;

        border-radius:
            17px;

    }


    .detail-cover img {

        min-height:
            220px;

        object-fit:
            cover;

    }


    .article-content {

        font-size:
            13px;

        line-height:
            1.9;

    }


    .article-content h2 {

        font-size:
            26px;

    }


    .article-content h3 {

        font-size:
            22px;

    }


    .article-content blockquote {

        padding:
            20px;

        font-size:
            17px;

    }


    .detail-sidebar {

        grid-template-columns:
            1fr;

    }


    .sidebar-quote {

        margin-top:
            0;

    }


    .article-bottom {

        align-items:
            flex-start;

        flex-direction:
            column;

    }

}