/* ==========================================================================
   ARTIKEL / HALAMAN INFORMASI
   ========================================================================== */


/* ==========================================================================
   HERO ARTIKEL
   ========================================================================== */

.article-hero {

    padding: 70px 0;

    background:
        linear-gradient(
            135deg,
            #0f6cb9 0%,
            #06416e 100%
        );

    color: #ffffff;

}


.article-hero-content {

    max-width: 900px;

}


.article-label {

    display: inline-block;

    margin-bottom: 12px;

    padding: 6px 14px;

    background: rgba(255,255,255,0.15);

    border: 1px solid rgba(255,255,255,0.25);

    border-radius: 30px;

    font-size: 12px;

    font-weight: 600;

    letter-spacing: 1px;

}


.article-hero h1 {

    margin-bottom: 15px;

    font-size: 42px;

    font-weight: 700;

    line-height: 1.2;

}


.article-hero p {

    max-width: 750px;

    margin: 0;

    color: rgba(255,255,255,0.85);

    font-size: 17px;

}


/* ==========================================================================
   KONTEN ARTIKEL
   ========================================================================== */

.article-section {

    padding: 70px 0;

    background: #ffffff;

}


.article-content {

    max-width: 1000px;

    margin: 0 auto;

    color: #374151;

    font-size: 16px;

    line-height: 1.8;

}


.article-content h2 {

    margin-top: 35px;

    margin-bottom: 18px;

    color: #1e293b;

    font-size: 30px;

    font-weight: 700;

}


.article-content h3 {

    margin-top: 40px;

    margin-bottom: 15px;

    color: #1e293b;

    font-size: 23px;

    font-weight: 650;

}


.article-content p {

    margin-bottom: 18px;

}


/* ==========================================================================
   GAMBAR UTAMA
   ========================================================================== */

.article-image {

    overflow: hidden;

    margin-bottom: 35px;

    border-radius: 18px;

    box-shadow:
        0 10px 30px rgba(0,0,0,0.08);

}


.article-image img {

    display: block;

    width: 100%;

    height: auto;

}


/* ==========================================================================
   HIGHLIGHT / QUOTE
   ========================================================================== */

.article-highlight {

    position: relative;

    margin: 25px 0;

    padding: 25px 30px;

    background: #f0f7ff;

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

    border-radius: 10px;

}


.article-highlight i {

    margin-bottom: 10px;

    color: var(--primary-color);

    font-size: 24px;

}


.article-highlight p {

    margin: 0;

    color: #334155;

    font-size: 18px;

    font-weight: 500;

}


/* ==========================================================================
   LIST
   ========================================================================== */

.article-list {

    padding-left: 25px;

}


.article-list li {

    margin-bottom: 10px;

}


/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width: 991.98px) {

    .article-hero {

        padding: 55px 0;

    }


    .article-hero h1 {

        font-size: 34px;

    }


    .article-section {

        padding: 50px 0;

    }

}


@media (max-width: 575.98px) {

    .article-hero {

        padding: 45px 0;

    }


    .article-hero h1 {

        font-size: 28px;

    }


    .article-hero p {

        font-size: 15px;

    }


    .article-section {

        padding: 40px 0;

    }


    .article-content {

        font-size: 15px;

    }


    .article-content h2 {

        font-size: 25px;

    }


    .article-content h3 {

        font-size: 21px;

    }

}