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

.article-hero{
    position: relative;
    width:100%;
    height:420px;
    display:flex;
    justify-content:center;
    align-items:center;
    text-align:center;
    overflow:hidden;
    background:url("../images/landingpage2.jpg") center center/cover no-repeat;
}

.article-overlay{
    position:absolute;
    inset:0;
    background:rgba(0,0,0,.45);
}

.article-content{
    position:relative;
    z-index:2;
    color:#fff;
    max-width:800px;
    padding:20px;
}

.article-content span{
    display:inline-block;
    letter-spacing:3px;
    text-transform:uppercase;
    color:#ffb347;
    font-size:14px;
    font-weight:700;
    margin-bottom:18px;
}

.article-content h1{
    font-size:58px;
    font-weight:700;
    margin-bottom:18px;
}

.article-content p{
    font-size:18px;
    line-height:1.8;
    opacity:.95;
}

/* ========================= */

.article-section{

    width:100%;
    padding:90px 0;

    background:#f5f7fa;

}

.container{

    width:100%;
    max-width:1200px;
    margin:auto;
    padding:0 20px;

}

.section-title{

    text-align:center;
    margin-bottom:60px;

}

.section-title h2{

    font-size:42px;
    color:#111;
    margin-bottom:12px;

}

.section-title p{

    color:#666;
    font-size:17px;

}

/* ========================= */

.article-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(340px,1fr));

    gap:30px;

}

.article-card{

    background:#fff;

    border-radius:18px;

    overflow:hidden;

    box-shadow:0 12px 35px rgba(0,0,0,.08);

    transition:.35s;

}

.article-card:hover{

    transform:translateY(-8px);

    box-shadow:0 20px 45px rgba(0,0,0,.15);

}

.article-card img{

    width:100%;

    height:230px;

    object-fit:cover;

    display:block;

}

.article-body{

    padding:28px;

}

.article-body span{

    color:#8d8d8d;

    font-size:14px;

}

.article-body h3{

    margin:15px 0;

    font-size:26px;

    line-height:1.4;

}

.article-body p{

    color:#666;

    line-height:1.8;

    margin-bottom:25px;

}

.article-body a{

    display:inline-flex;

    align-items:center;

    gap:10px;

    color:#00a1c5;

    font-weight:600;

    text-decoration:none;

    transition:.3s;

}

.article-body a:hover{

    gap:15px;

}

/* ========================= */

.article-card::after{

    content:"";

    display:block;

    height:4px;

    width:0;

    background:#00a1c5;

    transition:.35s;

}

.article-card:hover::after{

    width:100%;

}
/* =====================================================
                SEARCH & KATEGORI
===================================================== */

.article-toolbar{
    max-width:1200px;
    margin:0 auto 50px;
    padding:0 20px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:20px;
    flex-wrap:wrap;
}

.search-box{
    position:relative;
    flex:1;
    min-width:320px;
}

.search-box input{

    width:100%;
    height:56px;

    border:none;
    outline:none;

    border-radius:50px;

    padding:0 60px 0 25px;

    background:#fff;

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

    font-size:15px;

}

.search-box i{

    position:absolute;

    right:25px;

    top:50%;

    transform:translateY(-50%);

    color:#888;

}

.category-list{

    display:flex;

    flex-wrap:wrap;

    gap:12px;

}

.category-list a{

    text-decoration:none;

    color:#444;

    background:#fff;

    padding:12px 22px;

    border-radius:999px;

    font-size:14px;

    font-weight:600;

    transition:.3s;

    box-shadow:0 6px 20px rgba(0,0,0,.08);

}

.category-list a:hover{

    background:#00a1c5;

    color:#fff;

}

.category-list a.active{

    background:#00a1c5;

    color:#fff;

}

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

.article-meta{

    display:flex;

    align-items:center;

    gap:18px;

    margin:18px 0;

    color:#888;

    font-size:13px;

}

.article-meta i{

    color:#00a1c5;

}

.article-body h3{

    transition:.3s;

}

.article-card:hover h3{

    color:#00a1c5;

}

/* =====================================================
                PAGINATION
===================================================== */

.pagination{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:10px;

    margin-top:70px;

}

.pagination a{

    width:45px;

    height:45px;

    display:flex;

    justify-content:center;

    align-items:center;

    border-radius:50%;

    background:#fff;

    color:#333;

    text-decoration:none;

    font-weight:600;

    transition:.3s;

    box-shadow:0 8px 25px rgba(0,0,0,.08);

}

.pagination a:hover{

    background:#00a1c5;

    color:#fff;

}

.pagination a.active{

    background:#00a1c5;

    color:#fff;

}

/* =====================================================
                NEWSLETTER
===================================================== */

.newsletter{

    margin-top:100px;

    background:#00a1c5;

    border-radius:25px;

    padding:60px;

    color:#fff;

    text-align:center;

}

.newsletter h2{

    font-size:38px;

    margin-bottom:15px;

}

.newsletter p{

    opacity:.9;

    margin-bottom:35px;

}

.newsletter form{

    display:flex;

    justify-content:center;

    gap:15px;

    flex-wrap:wrap;

}

.newsletter input{

    width:420px;

    max-width:100%;

    height:55px;

    border:none;

    border-radius:50px;

    padding:0 22px;

    outline:none;

}

.newsletter button{

    border:none;

    padding:0 35px;

    border-radius:50px;

    background:#111;

    color:#fff;

    cursor:pointer;

    transition:.3s;

    font-weight:600;

}

.newsletter button:hover{

    background:#222;

    transform:translateY(-2px);

}

/* =====================================================
                ANIMATION
===================================================== */

.article-card{

    animation:fadeUp .6s ease both;

}

@keyframes fadeUp{

    from{

        opacity:0;

        transform:translateY(35px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}
/* ===========================
   SEARCH & TOOLBAR
=========================== */

.article-toolbar{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 25px;
    margin: 40px 0 60px;
}

.search-box{
    position: relative;
    width: 100%;
    max-width: 550px;
}

.search-box input{
    width: 100%;
    height: 55px;
    padding: 0 60px 0 22px;
    border: none;
    border-radius: 50px;
    background: #fff;
    outline: none;
    font-size: 15px;
    box-shadow: 0 10px 25px rgba(0,0,0,.08);
    transition: .3s;
}

.search-box input:focus{
    box-shadow: 0 12px 30px rgba(0,161,197,.25);
}

.search-box i{
    position: absolute;
    top: 50%;
    right: 22px;
    transform: translateY(-50%);
    color: #00a1c5;
    font-size: 18px;
    pointer-events: none;
}

/* ===========================
   KATEGORI
=========================== */

.category-list{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.category-list a{
    text-decoration: none;
    color: #555;
    background: #fff;
    padding: 10px 22px;
    border-radius: 50px;
    font-size: 14px;
    font-weight: 600;
    transition: .3s;
    box-shadow: 0 6px 20px rgba(0,0,0,.08);
}

.category-list a:hover,
.category-list a.active{
    background: #00a1c5;
    color: #fff;
}
.article-toolbar{
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:center !important;
    width:100% !important;
    margin:40px 0 60px !important;
}

.article-toolbar .search-box{
    position:relative !important;
    width:100% !important;
    max-width:600px !important;
}

.article-toolbar .search-box input{
    display:block !important;
    width:100% !important;
    height:56px !important;
    padding:0 60px 0 20px !important;
    border-radius:50px !important;
    border:none !important;
    outline:none !important;
    background:#fff !important;
    font-size:15px !important;
    box-shadow:0 8px 25px rgba(0,0,0,.12) !important;
}

.article-toolbar .search-box i{
    position:absolute !important;
    right:22px !important;
    top:50% !important;
    transform:translateY(-50%) !important;
    color:#00a1c5 !important;
    pointer-events:none;
}

.article-toolbar .category-list{
    display:flex !important;
    justify-content:center !important;
    flex-wrap:wrap !important;
    gap:12px !important;
}

.article-toolbar .category-list a{
    display:inline-block !important;
    padding:10px 22px !important;
    background:#fff !important;
    border-radius:50px !important;
    text-decoration:none !important;
    color:#333 !important;
    box-shadow:0 5px 20px rgba(0,0,0,.08);
}

.article-toolbar .category-list a.active,
.article-toolbar .category-list a:hover{
    background:#00a1c5 !important;
    color:#fff !important;
}