/* =========================================
   GLOBAL RESET
========================================= */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}


*{
    transition:
    background 0.2s ease,
    color 0.2s ease,
    border 0.2s ease;
}

/* =========================================
   BODY
========================================= */

body{

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

    background:#f5f7fb;

    color:#111827;

    line-height:1.6;

    overflow-x:hidden;
}

/* =========================================
   LINKS
========================================= */

a{

    text-decoration:none;

    color:inherit;
}

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

img{

    max-width:100%;

    display:block;
}

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

.container{

    width:100%;
    
    max-width:1700px;

    margin:0 auto;

    padding:35px;

    display:grid;

    /*grid-template-columns:2,5fr 1fr;*/
    grid-template-columns:
    1000px 400px;
    
    justify-content:center;

    gap:30px;
}

/* =========================================
   HERO SECTION
========================================= */

.hero-slider{

    margin-bottom:40px;
}

.hero-slide{

    position:relative;

    height:460px;

    border-radius:22px;

    overflow:hidden;

    background:#ddd;

    box-shadow:
    0 8px 30px rgba(0,0,0,0.06);
}

/* IMAGE */

.hero-slide img{

    width:100%;
    height:100%;

    object-fit:cover;
}

/* OVERLAY */

.hero-overlay{

    position:absolute;

    inset:0;

    background:
    linear-gradient(
        90deg,
        rgba(15,23,42,0.82) 0%,
        rgba(15,23,42,0.55) 45%,
        rgba(15,23,42,0.12) 100%
    );
}

/* CONTENT */

.hero-content{

    position:absolute;

    top:50%;

    left:50px;

    transform:translateY(-50%);

    z-index:10;

    max-width:500px;

    color:white;
}

/* CATEGORY */

.hero-category{

    display:inline-block;

    background:#4f46e5;

    padding:8px 16px;

    border-radius:30px;

    font-size:12px;

    font-weight:600;

    letter-spacing:0.5px;

    margin-bottom:20px;
}

/* TITLE */

.hero-content h2{

    font-size:54px;

    line-height:1.15;

    margin-bottom:20px;

    font-weight:700;
}

/* DESCRIPTION */

.hero-content p{

    font-size:16px;

    line-height:1.8;

    color:#e5e7eb;

    margin-bottom:28px;
}

/* BUTTON */

.hero-button{

    text-decoration:none;
    
    display:inline-block;

    /*background:white;*/
    /*background:#4f46e5;*/
    background:#f59e0b;

    color:#111827;

    padding:10px 21px;

    border-radius:14px;

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

    transition:0.3s;
}

.hero-button:hover{

    text-decoration:none;
    
    /*background:#4f46e5;*/
    /*background:#4338ca;*/
    background:#d97706;

    color:white;
}



@media(max-width:768px){

    .hero-slide{
        height:400px;
    }

    .hero-content{

        left:30px;
        right:30px;

        max-width:100%;
    }

    .hero-content h3{

        font-size:36px;
    }

    .hero-content p{

        font-size:14px;
    }

}


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

.right-sidebar{

    display:flex;
    flex-direction:column;

    gap:20px;
}


/* VISITOR WEBSITE */

.visitor-stats{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:12px;
}

.visitor-item{

    background:#f8fafc;

    border-radius:14px;

    padding:20px;

    text-align:center;
}

.visitor-item h3{

    font-size:24px;

    color:#198754;

    margin-bottom:8px;
}

.visitor-item p{

    font-size:13px;

    color:#6b7280;
}





/* WIDGET */

.widget{

    background:white;

    border-radius:18px;

    padding:24px;

    border:
    1px solid #edf0f7;

    box-shadow:
    0 4px 20px rgba(0,0,0,0.03);
    
    transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;

}

/* TITLE */

.widget h3{

    font-size:20px;

    margin-bottom:20px;

    font-weight:700;

    color:#111827;
}

/* INPUT */

.widget input{

    width:100%;

    padding:14px 16px;

    margin-bottom:14px;

    border:
    1px solid #e5e7eb;

    border-radius:12px;

    outline:none;

    font-size:14px;

    transition:0.3s;
}

.widget input:focus{

    border-color:#4f46e5;
}

/* BUTTON */

.widget button{

    width:100%;

    background:#4f46e5;

    color:white;

    border:none;

    padding:14px;

    border-radius:12px;

    font-weight:600;

    cursor:pointer;

    transition:0.3s;
}

.widget button:hover{

    background:#4338ca;
}

/*.widget:hover{

    transform:translateY(-3px);

    box-shadow:
    0 8px 24px rgba(0,0,0,0.05);
*/

/* QUICK LINKS */

.quick-links{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:12px;
}

.quick-links a{

    text-decoration:none;
    
    background:#f8fafc;

    color:#4f46e5;

    padding:14px;

    border-radius:12px;

    text-align:center;

    font-size:14px;

    font-weight:600;

    transition:0.3s;

    border:
    1px solid #eef2ff;
}

.quick-links a:hover{

    background:#4f46e5;

    color:white;
}


/* STATISTIK */

.stats-box{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:12px;
}

.stat-item{

    background:#f8fafc;

    border-radius:14px;

    padding:20px;

    text-align:center;
}

.stat-item h2{

    font-size:28px;

    color:#4f46e5;

    margin-bottom:8px;
}

.stat-item p{

    font-size:13px;

    color:#6b7280;
}

/* =========================================
   NEWS SECTION
========================================= */

.news-section{

    margin-top:45px;
    margin-bottom:50px;
}

/* TITLE */

.section-title{

    margin-bottom:25px;
}

.section-title h2{

    font-size:30px;

    font-weight:700;

    color:#111827;
}

/* GRID */

.news-grid{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:22px;
}

/* CARD */

.news-card{

    background:white;

    border-radius:18px;

    overflow:hidden;

    border:
    1px solid #edf0f7;

    box-shadow:
    0 4px 20px rgba(0,0,0,0.03);

    transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
    
}

.news-card:hover{

    transform:translateY(-5px);

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


/* IMAGE */

.news-card img{

    width:100%;

    height:210px;

    object-fit:cover;
}

/* CONTENT */

.news-content{

    padding:22px;
}

/* CATEGORY */

.news-category{

    display:inline-block;

    background:#eef2ff;

    color:#4f46e5;

    padding:6px 12px;

    border-radius:30px;

    font-size:11px;

    font-weight:600;

    margin-bottom:16px;
}

/* TITLE */

.news-content h3{

    font-size:21px;

    line-height:1.45;

    margin-bottom:14px;

    color:#111827;
}

/* TEXT */

.news-content p{

    font-size:14px;

    color:#6b7280;

    line-height:1.8;

    margin-bottom:18px;
}

/* LINK */

.news-content a{

    text-decoration:none;

    color:#4f46e5;

    font-weight:600;

    font-size:14px;
}

.news-content a:hover{

    color:#4338ca;
}

@media(max-width:992px){

    .news-grid{

        grid-template-columns:1fr 1fr;
    }

}

@media(max-width:768px){

    .news-grid{

        grid-template-columns:1fr;
    }

}

/* =========================================
   NAVBAR
========================================= */

.topbar{

    background:white;

    padding:18px 40px;

    display:flex;

    justify-content:space-between;

    align-items:center;

    border-bottom:
    1px solid #edf0f7;

    position:sticky;

    top:0;

    z-index:999;

    box-shadow:
    0 2px 10px rgba(0,0,0,0.03);
}

/* LOGO AREA */

.logo-area{

    display:flex;

    align-items:center;

    gap:14px;
}

.logo-area img{

    width:52px;
}

.logo-area h1{

    font-size:22px;

    font-weight:700;

    color:#111827;

    margin-bottom:2px;
}

.logo-area p{

    font-size:12px;

    color:#6b7280;
}

/* MENU */

.menu{

    display:flex;

    gap:28px;
}

.menu a{

    text-decoration:none;

    color:#374151;

    font-size:15px;

    font-weight:500;

    position:relative;

    transition:0.3s;
}

.menu a.active{

    color:#4f46e5;
}

.menu a.active::after{

    width:100%;
}

/* HOVER LINE */

.menu a::after{

    content:'';

    position:absolute;

    left:0;

    bottom:-8px;

    width:0%;

    height:2px;

    background:#4f46e5;

    transition:0.3s;
}

.menu a:hover{

    color:#4f46e5;
}

.menu a:hover::after{

    width:100%;
}

/* LOGIN BUTTON */

.login-btn{

    background:#4f46e5;

    color:white;

    border:none;

    padding:12px 20px;

    border-radius:12px;

    font-size:14px;

    font-weight:600;

    cursor:pointer;

    transition:0.3s;
}

.login-btn:hover{

    background:#4338ca;
}


/* =========================================
   MINI TOPBAR
========================================= */

.mini-topbar{

    background:#111827;

    color:#e5e7eb;

    padding:10px 40px;

    display:flex;

    justify-content:space-between;

    align-items:center;

    font-size:13px;
}

.topbar-right{

    display:flex;

    gap:35px;
}


.topbar-separator{

    margin-left:12px;
    margin-right:12px;

    opacity:0.6;
}



@media(max-width:992px){

    .topbar{

        flex-direction:column;

        gap:20px;
    }

    .menu{

        flex-wrap:wrap;

        justify-content:center;
    }

}

@media(max-width:768px){

    .mini-topbar{

        flex-direction:column;

        gap:10px;

        text-align:center;
    }

    .topbar{

        padding:20px;
    }

    .menu{

        gap:18px;
    }

}



/* =========================================
   ISLAMIC SECTION
========================================= */

.islamic-section{

    margin-bottom:45px;
    margin-top:35px;
}

/* CARD */

.islamic-card{

    background:
    linear-gradient(
        135deg,
        #ffffff,
        #f8fafc
    );

    border:
    1px solid #edf0f7;

    border-left:
    5px solid #4f46e5;

    border-radius:18px;

    padding:32px;

    box-shadow:
    0 4px 20px rgba(0,0,0,0.03);
}

/* TITLE */

.islamic-card h3{

    font-size:24px;

    font-weight:700;

    color:#111827;

    margin-bottom:22px;
}

/* ARABIC */

.arabic{

    font-size:34px;

    line-height:2;

    text-align:right;

    color:#111827;

    margin-bottom:20px;
}

/* DESCRIPTION */

.islamic-card p{

    color:#4b5563;

    line-height:1.9;

    font-size:15px;
}

/* ICON */

.islamic-icon{

    width:52px;
    height:52px;

    display:flex;
    align-items:center;
    justify-content:center;

    background:#eef2ff;

    color:#4f46e5;

    border-radius:14px;

    font-size:24px;

    margin-bottom:22px;
}

/* =========================================
   FOOTER
========================================= */

.footer{

    margin-top:60px;

    background:#111827;

    color:white;

    border-top:
    1px solid rgba(255,255,255,0.05);
}

/* CONTENT */

.footer-content{

    max-width:1400px;

    margin:auto;

    padding:50px 35px;

    display:grid;

    grid-template-columns:2fr 1fr 1fr 1fr;

    gap:40px;
}

/* TITLE */

.footer h3{

    font-size:24px;

    margin-bottom:18px;
}

.footer h4{

    font-size:18px;

    margin-bottom:18px;
}

/* TEXT */

.footer p{

    color:#cbd5e1;

    line-height:1.8;

    font-size:14px;
}

/* LIST */

.footer ul{

    list-style:none;
}

.footer li{

    margin-bottom:12px;

    color:#cbd5e1;

    font-size:14px;
}

/* COPYRIGHT */

.copyright{

    border-top:
    1px solid rgba(255,255,255,0.06);

    padding:20px;

    text-align:center;

    font-size:13px;

    color:#94a3b8;
}

@media(max-width:992px){

    .footer-content{

        grid-template-columns:1fr 1fr;
    }

}

@media(max-width:768px){

    .footer-content{

        grid-template-columns:1fr;
    }

}



/* Detail Berita */

.detail-section{
    margin-top:0px;
}

.detail-card{
    background:#fff;
    border-radius:24px;
    padding:40px;
    box-shadow:0 2px 10px rgba(0,0,0,0.05);
}

.breadcrumb-custom{
    margin-bottom:20px;
    font-size:14px;
    color:#888;
}

.breadcrumb-custom a{
    color:#555;
    text-decoration:none;
}

.detail-image img{
    width:100%;
    border-radius:20px;
    margin-bottom:25px;
}

.detail-category{
    display:inline-block;
    background:#4f46e5;
    color:#fff;
    padding:8px 16px;
    border-radius:999px;
    font-size:14px;
    margin-bottom:20px;
}

.detail-title{
    font-size:42px;
    line-height:1.2;
    margin-bottom:20px;
    color:#111827;
}

.detail-meta{
    display:flex;
    gap:10px;
    color:#777;
    font-size:14px;
    margin-bottom:30px;
}

.detail-content{
    line-height:1.9;
    font-size:17px;
    color:#444;
}

.detail-content p{
    margin-bottom:20px;
}

.detail-content img{
    max-width:100%;
    border-radius:16px;
}