@import url('https://fonts.googleapis.com/css?family=Lato|Montserrat|Roboto');

  .hdnya{
    box-shadow: 3px 3px 5px #131926;
    padding-top: 20px;
    padding-bottom: 15px;
    font-size: 11pt;
  }
  .logonya{
   margin-top: -20px; 
  }
 
.circle-icon {
      font-size: 30px;
    width: 70px;
    height: 70px;
    border-radius: 50%;
    text-align: center;
    line-height: 70px;
    vertical-align: middle;

}



#myBtn-top {
  display: none;
  position: fixed;
  bottom: 20px;
  right: 10px;
  z-index: 99;
  font-size: 40px;
  border: none;
  outline: none;
  background: rgba(0, 0, 0, 0.5);
  color: white;
  cursor: pointer;

  border-radius: 35px;
}
.putih{
  background-color: #ffff;
}
.belang{
  background-color: #252c44;
  padding-bottom: 20px;
}
.bg-hitam-1{
    background-color: #1a1a1a;
}
.bg-hitam-2{
    background-color: #333333;
}
.fons{
font-family: 'Roboto', sans-serif;

}
.fons1{
font-family: 'Lato', sans-serif;
}
.fons2{
font-family: EB Garamond, serif;    
}
.text-putih{
    color: white; 
}


.bungkus_kanan {
max-height:510px;
overflow-y: auto;
overflow-x: hidden;
padding-top:10px;
 mask-image: linear-gradient(to top, transparent, black),
    linear-gradient(to left, transparent 17px, black 17px);
  mask-size: 100% 20000px;
  mask-position: left bottom;
  -webkit-mask-image: linear-gradient(to top, transparent, black),
    linear-gradient(to left, transparent 17px, black 17px);
  -webkit-mask-size: 100% 20000px;
  -webkit-mask-position: left bottom;
  transition: mask-position 0.3s, -webkit-mask-position 0.3s;
}
/* The Transformation */

.bungkus_post:hover {
  transform: scale(1.08);
  -webkit-transform: scale(1.08);
  box-shadow: 1px 1px 1.5px 1.5px rgb(0 0 0 / 0.3);  
   z-index: 3;

}
.bungkus_kanan:hover  {
  -webkit-mask-position: left top;
}

.bungkus_post1{
    padding:10px;
    height:148px;
    margin-bottom:10px; 
    overflow-y: hidden;text-overflow: ellipsis;  
}
.bungkus_post1:hover {
  transform: scale(1.08);
  -webkit-transform: scale(1.08);
  box-shadow: 0 2px 5px rgba(255, 255, 255, 0.6);  
  backdrop-filter: blur(5px);
    background: rgba(255, 255, 255, 0.1);

  z-index: 3;
}




.bungkus_post3{
    padding:10px;
    height:auto;
    margin-bottom:10px; 
    overflow-y: hidden;text-overflow: ellipsis;  
}
.bungkus_post3:hover {
  transform: scale(1.08);
  -webkit-transform: scale(1.08);
  box-shadow: 0 2px 5px rgba(255, 255, 255, 0.6);  
  backdrop-filter: blur(5px);
    background: rgba(255, 255, 255, 0.1);

  z-index: 3;
}

.isi_box{
  width:400px;
  flex: 1  0 25%;
}



.slider-container::-webkit-scrollbar {
    height: 7px;
}

.slider-container::-webkit-scrollbar-track {
    background: none;
    border-radius: 10px;
}

.slider-container::-webkit-scrollbar-thumb {
    background: #ffffffae;
    border-radius: 10px;
}

.slider-container::-webkit-scrollbar-thumb:hover {
    background: #444444;
}

.slider-container{
    width: 100%;
    overflow-x: auto;
}

.slider {
    display: flex;
    width: fit-content;
    align-items: center;
    justify-content: center;
    gap: 10px;
    overflow-x: auto;
    margin: auto;
    padding: 8px;
}


.img_main{
  width: 100%;
  height: auto;
  margin-top:10px;
  margin-bottom:20px;  
}

.img_tengah{
  width: 100%;
  height: auto;
  margin-top:10px;
  margin-bottom:10px;  
}
.img_kanan{
  width: 50%;
  height: auto;
  float:right;
  margin-left:15px;
  margin-top:10px;
  margin-bottom:10px;  
}

.img_kiri{
  width: 50%;
  height: auto;
  float:left;
  margin-right:15px;
  margin-top:10px;
  margin-bottom:10px;  
}

@media only screen and (max-width: 700px){
    .img_kanan{
        width: 100%;
    }
    .img_kiri{
        width: 100%;
    }
    .bungkus_post1{
      height:auto;
    }

}

.bungkus_post4{
    padding:10px;
    height:143px;
    margin-bottom:10px; 
    overflow-y: hidden;text-overflow: ellipsis;  
}

.bungkus_post4:hover {
  transform: scale(1.08);
  -webkit-transform: scale(1.08);
  box-shadow: 0 2px 5px rgba(255, 255, 255, 0.6);  
  backdrop-filter: blur(5px);
    background: rgba(255, 255, 255, 0.1);

  z-index: 3;
}
@media only screen and (max-width: 991px){

    .bungkus_post4{
      height:100%;    

    }    
    .bungkus_kanan {
      max-height:100%;
    }    
}
.bungkus_terkait {
  padding-top:10px;
}
/* The Transformation */


.itemku{
 display: grid;
 align-items: center; 
 grid-template-columns: 2fr;
 column-gap: 2px;  
}
.img-itemku-kiri{
border-radius:10px;width:130px;height:130px;margin-right:15px;object-position:  center; object-fit: cover;float:left;  
}

.img-itemku-kanan{
border-radius:10px;width:130px;height:130px;margin-left:15px;object-position:  center; object-fit: cover;float:right;
}

.kategori-itemku{
padding:5px;background-color:#f48c19;color:white;font-size:10pt;border-radius:5px;  
}