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

body {
    background-color: #cf8815;
}

/* ==========================
   NAVBAR KHUSUS BLOG
========================== */

.blog-page .site-header {
    position: relative;
    top: auto;
    left: auto;
    width: 100%;
    background: #904203;
    box-shadow: none;
    backdrop-filter: none;
    z-index: 10;
}


/* Hilangkan efek transparan saat scroll */

.blog-page .site-header.scrolled {
   
    box-shadow: none;
}


/* Konten tidak tertutup navbar */

.blog-page .article-page {
    padding-top: 40px;
}


/* Navbar tidak bergerak */

.blog-page .site-header,
.blog-page .nav-container {
    animation: none !important;
    transition: none !important;
}

.blog-page .site-header {
    position: relative !important;
}

.container{

    width:90%;
    max-width:1200px;
    margin:auto;

}






.card{

    background:white;
    padding:20px;
    border-radius:15px;
    margin-bottom:30px;
    box-shadow:0 5px 20px rgba(0,0,0,.08);

}


.card img{

    width:100%;
    border-radius:12px;

}


.card h2{

    margin:15px 0;
    color:#1e40af;

}


.meta{

    font-size:14px;
    color:#777;
    margin-bottom:15px;

}


.button{

    display:inline-block;
    margin-top:20px;
    background:#2563eb;
    color:white;
    padding:10px 20px;
    border-radius:8px;
    text-decoration:none;

}


.button:hover{

    background:#1e40af;

}



/* SIDEBAR */

.sidebar{

    background:white;
    padding:20px;
    border-radius:15px;
    margin-bottom:25px;
    box-shadow:0 5px 20px rgba(0,0,0,.08);

}


.sidebar h3{

    margin-bottom:15px;
    

}


.sidebar ul{

    list-style:none;

}


.sidebar li{

    padding:8px 0;
    border-bottom:1px solid #eee;

}




/* RESPONSIVE */

@media(max-width:768px){

    main{

        grid-template-columns:1fr;

    }


    .nav-container{

        flex-direction:column;
        text-align:center;

    }


    header h1{

        font-size:32px;

    }

}

.article-search {
  position: relative;
  margin-bottom: 25px;
}

.article-search-box {
  width: 100%;
  height: 58px;

  display: flex;
  align-items: center;

  box-sizing: border-box;

  background: #fff;
  border-radius: 14px;

  padding: 0 18px;

  box-shadow: 0 5px 20px rgba(0,0,0,.06);
}

.article-search-box i {
  color: #a34f00;
}

.article-search-box input {
  flex: 1;

  border: 0;
  outline: 0;

  background: transparent;

  padding: 0 12px;

  font-family: 'Poppins', sans-serif;
  font-size: 15px;
}

.article-search-box button {
  display: none;

  border: 0;
  background: transparent;

  cursor: pointer;

  color: #888;
}

#searchResults {
  position: absolute;

  left: 0;
  right: 0;
  top: 65px;

  z-index: 100;

  background: #fff;

  border-radius: 12px;

  overflow: hidden;

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

#searchResults:empty {
  display: none;
}

.search-result-item {
  display: flex;

  gap: 14px;

  padding: 12px 15px;

  text-decoration: none;

  border-bottom: 1px solid #eee;
}

.search-result-item:hover {
  background: #faf5ef;
}

.search-result-item img {
  width: 75px;
  height: 55px;

  object-fit: cover;

  border-radius: 8px;
}

.search-result-content h4 {
  margin: 0 0 5px;

  color: #984d00;

  font-size: 14px;
}

.search-result-content span {
  color: #888;

  font-size: 11px;
}

.no-search-result {
  padding: 20px;

  text-align: center;

  color: #777;
}

.article-page{

    display:grid;
    grid-template-columns:2fr 1fr;
    gap:30px;
    width:90%;
    max-width:1200px;
    margin:40px auto;
    


}

#article-content{
padding:30px;
border-radius:20px;
box-shadow:0 5px 20px rgba(0,0,0,.08);

}


#article-content h1{

font-size:38px;
color:#904203;
margin-bottom:15px;

}


#article-content img{

width:100%;
height:450px;
object-fit:cover;
border-radius:15px;
margin:20px 0;

}


.article-meta{

color:#777;
font-size:14px;

}


.article-text{

font-size:16px;
line-height:1.8;

}



.sidebar{

background:white;
padding:25px;
border-radius:20px;
height:max-content;

}


.sidebar h3{

color:#904203;

}

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

.article-page {
    width: 90%;
    max-width: 1200px;
    margin: 40px auto;

    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 30px;
}

/* SEARCH berada di atas kedua kolom */
.article-search {
    grid-column: 1 / -1;
    position: relative;
    margin-bottom: 0;
    z-index: 100;
}

/* artikel */

#article-content{

    background:white;
    padding:30px;
    border-radius:20px;
}


#article-content h1{

    font-size:38px;
    line-height:1.3;

}


#article-content img{

    width:100%;
    height:450px;
    object-fit:cover;
    border-radius:15px;

}


.article-text{

    font-size:16px;
    line-height:1.8;

}


/* sidebar */

.sidebar{

    height:max-content;

}



/* TABLET */

@media(max-width:900px){

    .article-page{

        grid-template-columns:1fr;
        width:90%;

    }


    #article-content h1{

        font-size:32px;

    }


    #article-content img{

        height:350px;

    }


    .sidebar{

        margin-top:20px;

    }

}



/* HP */

@media(max-width:600px){


    .article-page{

        width:94%;
        margin-top:25px;

    }


    #article-content{

        padding:20px;

    }


    #article-content h1{

        font-size:25px;

    }


    #article-content img{

        height:220px;
        border-radius:12px;

    }


    .article-text{

        font-size:14px;

    }


}

.isi p {
    margin-bottom: 30px;
    line-height: 2;
    text-align: justify;
    font-size: 17px;
}