* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
html { 
    scroll-behavior: smooth;
    
}

body  {
    font-family: Arial, sans-serif;
    color:#000;
    background:#F9F9F9;
    padding:0;
    margin:0;
}
img, iframe {
    max-width:100% !important;
}
a  { color:#000;
    text-decoration: none;
    transition: .3s;
}
a:hover {
    color:#155DFC;
}
.clearfix::after {
  content: "";
  clear: both;
  display: table;
}
.fl {
    float:left;
}
.fr {
    float:right;
}

header.top {
    position: sticky;
  top: 0;
  z-index:999;
}
.header-wrap {
    display:block;
    padding:20px;
    background:#F4F4F4;
}
.logo {
    display:inline-block;
}
.logo a {
    color:#155DFC;
    border-radius: 8px;
    padding: 10px 16px;
    border: 1px solid #D9D9D9;
    background:#fff;
    display:inline-block;
    font-size:22px;
    font-weight:700;
   
    
}
.logo a:hover {
    border: 1px solid #155DFC;
    background-color: #155DFC;
  color: #ffffff;
}
.container {
    margin:auto;
    max-width:680px;
    padding:0;
}
/* Core resets for the search component container */
.search-form {
  display: flex;
  width: 100%;
  border: 1px solid #D9D9D9;
  border-radius: 8px;
  overflow: hidden;
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}
.carilah {
      position: relative;
}
.suggestions-list {
     border: 1px solid #D9D9D9;
     position: absolute; 
     top:100%;
     background:#fff;
     padding:0;
     margin:10px 0 0 0;
     max-width:300px;
     z-index:9999;
     border-radius:8px;
     
}
.suggestions-list a {
    display:block;
    color:#155DFC;
    border-bottom: 1px solid #D9D9D9;
    padding:10px 16px;
}
.suggestions-list a:last-child {
    border-bottom: 0;
}
.suggestions-list a:hover {
    background:#155DFC;
    color:#fff;
    border-bottom:1px solid #155DFC;
}
/* Fluid design behavior when active */
.search-form:focus-within {
  border-color: #333;
  
}

/* Fluid Input adjustments */
.search-input {
  flex-grow: 1; /* Automatically expands to fill space */
  min-width: 0; /* Prevents overflow issues in flex items */
  padding: 12px 16px;
  font-size: 16px; /* Prevents auto-zoom on iOS devices */
  border: none;
  outline: none;
  background-color: #ffffff;
  color: #1f2937;
}

.search-input::placeholder {
  color: #9ca3af;
}

/* Dynamic Action Button */
.search-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  background-color: #155DFC;
  color: #ffffff;
  border: none;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 0.2s ease;
}

.search-button:hover,
.search-button:focus {
  background-color: #104ac9;
  outline: none;
}

.search-button svg {
  width: 20px;
  height: 20px;
  fill: currentColor;
}

/* Responsive breakpoint handling */
@media (max-width: 480px) {
  .search-button {
    padding: 12px 24px; /* Makes the button compact on phones */
  }
  
  .search-button span {
    display: none; /* Efficiently hides the text label on tiny screens */
  }
}
.bg {
    padding:0 20px 60px 20px;
    background:#fff;
}
.article-list {
    padding-top:30px;
}

article.article {padding:15px 0;
    border-bottom: 1px solid #D9D9D9;
} article.article:last-child {
    border-bottom: 0;
}

h3.article-title,
h2.article-title {
    font-size:24px;
    font-weight:500;
    padding:0;
    margin:0;
    
}

a.cat span.hashtag {
    color:#888;
}
a.cat {
    border-radius:15px;
    font-size:14px;
    padding:4px 10px;
    border: 1px solid #D9D9D9;
    color:#155DFC;
    display:inline-block;
    margin:0 10px 10px 0;
}
a.cat.active,
a.cat:hover {
    color:#fff;
    border: 1px solid #155DFC;
    background:#155DFC;
}

a.cat span.badge {
    text-align:center;
    display:inline-block;
    font-size:12px;
    color:#999;
}
a.cat.active span.badge,
a.cat:hover span.badge {
    color:#fff;
}

h3.article-title a,
h2.article-title a{
    color:#155DFC;
}
h3.article-title a:hover,
h2.article-title a:hover{
    color:#000;
}
.article-meta {
    margin-top:7px;
    color:#999;
    font-size:15px;
}
article.page-article {
    padding:25px 0;
}
article.page-article h1 {
    margin:0;
    padding:0;
    font-size:26px;
    font-weight:500;
}
ul.pagination li {
    display: inline-block;
}
/* Reset and Center Container */
.pagination {
   display:block;
  justify-content: center;
  align-items: center;
  text-align:center;
  list-style-type: none;
  padding: 0;
  margin: 20px 0;
  
}

/* Base Link Styling */
.pagination .page-link {
  display: inline-block;
  padding: 8px 16px;
  margin:0 6px 8px 0;
  color:#155DFC;
  text-decoration: none;
  background-color: #ffffff;
  border: 1px solid #D9D9D9;
  border-radius: 4px;
  transition: all 0.2s ease-in-out;
  font-family: sans-serif;
}

/* Hover State for Clickable Links */
.pagination .page-link:hover:not(.active) {
  background-color: #155DFC;
  border-color: #155DFC;
  color: #fff;
}

/* Active Page State */
.pagination .page-link.active {
  background-color: #155DFC;
  border-color: #155DFC;
  color: #ffffff;
  cursor: default;
}

/* Optional: Disabled State (e.g., if Prev/Next is unavailable) */
.pagination .page-link.disabled {
  color: #0b338c;
  pointer-events: none;
  background-color: #cfdaf4;
  border-color: #cfdaf4;
}
 .file-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
            gap: 18px;
        }

@media (min-width: 760px) {
          

            .file-grid {
                grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
            }
        }

        @media (min-width: 1100px) {
            .file-grid {
                grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
            }
        }

.drive-file-card {
            min-width: 0;
            border-radius: 5px;
            overflow: hidden;
             border: 1px solid #D9D9D9;
        }

        .drive-file-card:hover {
            background: #fbfbfb;
            
        }
 .thumb-link {
            position: relative;
            display: block;
            width: 100%;
            aspect-ratio: 9 / 16;
            background: #000;
            overflow: hidden;
        }

        .thumb-link img {
            width: 100%;
            height: 100%;
            display: block;
            object-fit: cover;
            background: #050507;
        }
.dplay-icon  {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 40px;
    transition: .4s;
    opacity: .7;
    color: white;
}


.thumb-link:hover .dplay-icon  {
    color:#fff;
     opacity: .9;
    transform: translate(-50%, -50%) scale(1.3);
}
     
  .drive-file-card h2 {
      display:block;
    padding:0;  
    margin: 0;
    }
  .drive-file-card h2 a { 
      padding: 10px 12px 5px 12px;
       min-height: 52px;
    display: -webkit-box;
      line-height:1.35 !important;
    color:#000;
    font-size: 14px;
  }
  
  .drive-file-card:hover h2 a {
     color:#155DFC;
  }
  
  .btm {
   padding:0 12px 10px 12px;
   font-size:14px;
   color: #999;
  }
.file-info  {
    
    position: absolute;
    right: 3px;
    bottom: 5px;
   
}
span.siz { opacity: .9;
    border-radius: 3px;
    padding: 3px 8px;
    margin-right:3px;
    font-size: 12px;
    color:#fff;
    background: #155DFC;
}
span.dur { opacity: .9;
    border-radius: 3px;
    padding: 3px 8px;
    font-size: 12px;
    color:#fff;
    background: #FF2056;
}


/* 1. Wrapper untuk membuat tabel responsive (scroll ke samping di layar kecil) */
.table-responsive {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch; /* Membuat scroll lebih halus di iOS */
}

/* 2. Styling dasar tabel */
.custom-table {
  width: 100%;
  border-collapse: collapse;
  font-family: sans-serif;
}


.custom-table td {
  padding: 12px 0;
  text-align: left;
  border-bottom: 1px solid #D9D9D9;
  vertical-align: top;
}



/* 3. Styling untuk Thumbnail Image */
.thumbnail-img {
  width: 100px;
  height: 70px;
  border-radius: 8px; /* Ubah ke 8px jika ingin bentuknya kotak bersudut tumpul */
  object-fit: cover; /* Mencegah gambar menjadi gepeng atau distorsi */
  display: block;
}
h2.t-title {
    font-size:20px;
    font-weight:500;
    padding:0;
    margin:0;
}
h2.t-title a {
   color:#155DFC;
    display: -webkit-box;           /* Required for line clamping to work */
  -webkit-box-orient: vertical;   /* Sets the layout direction to vertical */
  -webkit-line-clamp: 2;          /* Change this number to your desired line count */
  overflow: hidden;  
}
h2.t-title a:hover {
     color:#000;
}
.t-des {
    font-size:14px;
    color:#999;
    padding:0;
    margin:8px 0 0 0;
}
.play {
    margin-left:-20px;
    margin-right:-20px;
    background:#F4F4F4;
    margin-bottom:25px;
}
.video-container {
  background:#000;
  position: relative;
  width: 100%;
  padding-bottom: 56.25%; /* 16:9 Aspect Ratio (9 divided by 16) */
  height: 0;
}

.video-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
a.dll {
    margin-left:20px;
    background:#155DFC;
    color:#fff;
    padding:4px 10px;
    border-radius:15px;
}
a.dll:hover {
    background:#104ac9;
    letter-spacing: 0.15em;
}