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

body  {
    font-family: Arial, sans-serif;
    padding:0;
    margin:0;
    font-size:15px;
}
img, iframe {
    max-width:100% !important;
}
a  { 
    text-decoration: none;
    transition: .3s;
}

p,h1,h2,h3,h4 {
    margin:0;
    padding:0;
}


.clearfix::after {
  content: "";
  clear: both;
  display: table;
}
.fl {
    float:left;
}
.fr {
    float:right;
}

        
        .site-header {
            position: sticky;
            top: 0;
            z-index: 1000;
            width: 100%;
        }

        .header-container {
            max-width: 680px;
            margin: 0 auto;
            position: relative;
            height: 65px;
            padding: 0 20px;
            display: flex;
            align-items: center;
        }

        /* --- NORMAL VIEW (Logo & Menu) --- */
        .nav-view {
            display: flex;
            justify-content: space-between;
            align-items: center;
            width: 100%;
            transition: opacity 0.3s ease;
        }

        a.logo {
            font-size: 1.25rem;
            font-weight: 700;
            text-decoration: none;
            flex-shrink: 0;
        }
        
        .nav-menu {
            display: flex;
            align-items: center;
            list-style: none;
            gap: 30px;
        }

        .nav-menu a {
            text-decoration: none;
            font-size: 0.95rem;
            font-weight: 500;
            transition: color 0.2s;
        }


        .nav-menu a.btn-primary {
            padding: 6px 14px;
            border-radius: 4px;
            transition: background-color 0.2s;
        }

        

        /* --- DROPDOWN MENU (Sistem Klik) --- */
        .dropdown {
            position: relative;
        }

        .dropdown-menu {
            display: none; /* Disembunyikan secara default */
            position: absolute;
            top: 100%;
            left: 10%;
            transform: translateX(-50%);
            min-width: 230px;
            height:400px;
            overflow-y:auto;
            border-radius: 4px;
            list-style: none;
            padding: 10px 0;
            margin-top: 5px;
            z-index: 1001;
        }

        /* Class ini yang dipanggil oleh JavaScript saat diklik */
        .dropdown-menu.show {
            display: block !important;
        }

        .dropdown-menu li a {
            display: block;
            padding: 8px 20px;
            font-size: 0.9rem;
        }
 .dropdown-menu li a span.badge {
            border-radius:2px;
            padding:2px 6px;
            display: inline-block;
            text-align:center;
            font-size:0.8rem;
            float:right;
        }

        /* --- SEARCH TRIGGER & VIEW --- */
        .search-trigger {
            cursor: pointer;
            font-size: 1.1rem;
            display: flex;
            align-items: center;
            justify-content: center;
        }


        .search-view {
            display: none;
            width: 100%;
            align-items: center;
            height: 100%;
        }

        .search-form {
            width: 100%;
            position: relative;
            display: flex;
            align-items: center;
        }

        .search-input {
            width: 100%;
            padding: 10px 40px 10px 15px;
            font-size: 0.95rem;
            border-radius: 25px;
            outline: none;
            transition: border-color 0.2s;
        }

        .close-search {
            position: absolute;
            right: 15px;
            border: none;
            cursor: pointer;
            font-size: 1.1rem;
        }


        /* --- AUTOCOMPLETE SUGGESTIONS --- */
        .search-suggestions {
            display: none;
            position: absolute;
            top: 50px;
            left: 0;
            width: 100%;
            border-radius: 8px;
            overflow: hidden;
            z-index: 1001;
        }

        .search-suggestions ul {
            list-style: none;
            padding:0;
            margin:0;
        }

        .search-suggestions li {
            padding: 12px 15px;
            font-size: 0.9rem;
            cursor: pointer;
        }

        .search-suggestions li:last-child {
            border-bottom: none;
        }

        .search-suggestions .no-result {
            cursor: default;
        }
        
      

        /* Utility classes */
        .show-flex { display: flex !important; }
        .hide { display: none !important; }
        .show-block { display: block !important; }

.footer {
    text-align:center;
    display:block;
    padding:20px;
}
.copy {
    margin-top:10px;
}
.footer-links a {
    font-size:14px;
    display:inline-block;
    margin-bottom:10px;
}
.footer-links a.ms {
    margin-right:20px;
}
.logo {
    display:inline-block;
}

.container {
    margin:auto;
    max-width:680px;
    padding:0;
}



.bg {
    padding:0 20px 60px 20px;
}
.article-list {
    padding-top:30px;
}

article.article {padding:15px 0;
    
} 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 {
    border-radius:15px;
    font-size:14px;
    padding:4px 10px;
    display:inline-block;
    margin:0 10px 10px 0;
}


a.cat span.badge {
    text-align:center;
    display:inline-block;
    font-size:12px;
}


.article-meta {
    margin-top:7px;
    font-size:15px;
}
.page-article {
    padding:25px 0;
}
.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;
  text-decoration: none;
  border-radius: 4px;
  transition: all 0.2s ease-in-out;
  font-family: sans-serif;
}




/* Optional: Disabled State (e.g., if Prev/Next is unavailable) */
.pagination .page-link.disabled {
  pointer-events: none;
}
 .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;
        }

       
 .thumb-link {
            position: relative;
            display: block;
            width: 100%;
            aspect-ratio: 9 / 16;
            overflow: hidden;
        }

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


.thumb-link:hover .dplay-icon  {
    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;
    font-size: 14px;
  }
  
  
  
  .btm {
   padding:0 12px 10px 12px;
   font-size:14px;
  }


/* 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;
  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 {
    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;  
}

.t-des {
    font-size:14px;
    padding:0;
    margin:8px 0 0 0;
}
.play {
    margin-left:-20px;
    margin-right:-20px;
    margin-bottom:25px;
}
.video-container {
  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-right:10px;
    padding:8px 16px;
    border-radius:15px;
    font-size:14px;
}



.sort-head h1,
.sort-head h2 {
    font-weight:500;
    font-size:22px;
}
.sort-p {
    font-size:14px;
    margin-top:10px;
}
select.form-select {
   cursor:pointer;
   display:inline-block;
   padding:4px 6px;
   font-size:14px;
   margin-left:10px;
   border-radius:3px;
}

.content__list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
}
.content-list-item {
    margin: 0;
}
.content-list-item__link {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    text-decoration: none;
    padding: 6px;
    border-radius: 6px;
}

.content-list-item__thumbnail-wrapper {
    flex: 0 0 140px;
    position: relative;
    aspect-ratio: 16/9;
    border-radius: 6px;
    overflow: hidden;
}
.content-list-item__thumbnail {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

.content-list-item__duration {
    position: absolute;
    right: 5px;
    bottom: 5px;
    font-size: 11px;
    padding: 2px 5px;
    border-radius: 4px;
}
.content-list-item__info {
    flex: 1;
}
.content-list-item__meta {
    font-size: 0.8rem;
    margin-top:10px;
}
.content-list-item__title {
    font-size: clamp(0.85rem, 2.5vw, 0.5rem);
    font-weight: 600;
    line-height: 1.4;
    margin: 0 0 4px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
@media screen and (min-width:810px) {
 .content__list {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }
}


/* --- Pengaturan Grid 2 Kolom --- */
.video-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* Membuat 2 kolom berukuran sama */
    gap: 2px; /* Jarak antar video */
    max-width: 820px; /* Batas lebar meniru layar HP */
    margin: 0 auto; /* Posisi di tengah layar jika dibuka di Desktop */
}

@media screen and (min-width:680px) {
.video-grid {
    grid-template-columns: repeat(3, 1fr); /* Membuat 2 kolom berukuran sama */
}
}
/* --- Desain Kartu Video --- */
.video-card {
    position: relative; /* Penting: Agar elemen di dalamnya bisa melayang (absolute) */
    border-radius: 0px; /* Membuat sudut membulat */
    overflow: hidden; /* Memotong gambar yang keluar dari sudut membulat */
    aspect-ratio: 9 / 16; /* Menjaga rasio vertikal seperti YouTube Shorts */
    cursor: pointer; /* Warna cadangan sebelum gambar dimuat */
}

/* --- Gambar Thumbnail --- */
.thumbnail {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Memastikan gambar memenuhi kotak tanpa distorsi */
    display: block;
}

/* --- Efek Gradien Hitam di Bawah --- */
/* Ini sangat penting agar teks putih tetap terbaca walaupun gambar background-nya terang */
.overlay-gradient {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 50%; /* Gradien menutupi setengah bagian bawah */
    pointer-events: none; /* Agar klik tetap tembus ke kartu video */
}

/* --- Teks Judul Video --- */
.video-title {
    position: absolute;
    bottom: 12px;
    left: 12px;
    right: 12px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.3;
    
    /* Efek memotong teks (ellipsis) jika lebih dari 2 baris */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.file-views  {
    
    position: absolute;
    right: 3px;
    top: 5px;
   
}
span.viw { 
    border-radius: 3px;
    padding: 3px 8px;
    margin-right:3px;
    font-size: 10px;
}

.file-info  {
    
    position: absolute;
    left: 12px;
    bottom: 55px;
   
}
span.siz { 
    border-radius: 3px;
    padding: 3px 8px;
    margin-right:3px;
    font-size: 12px;
}
span.dur { 
    border-radius: 3px;
    padding: 3px 8px;
    font-size: 12px;
}
/* --- Ikon 3 Titik (Options) di Kanan Atas --- */
.more-options {
    position: absolute;
    top: 8px;
    right: 12px;
    font-size: 18px;
    font-weight: bold;
    cursor: pointer;
}
.dplay-icon  {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 40px;
    transition: .4s;
}


.video-card:hover .dplay-icon  {
    transform: translate(-50%, -50%) scale(1.3);
}
  .server {
        display:block;
        padding:0;
        margin-top:15px;
        margin-bottom:20px;
    }
    .server a {
        display:inline-block;
        border-bottom:0;
        text-align:center;
        padding:8px;
        
    }
    
    .server a.active {
        border-bottom:0;
    }
    .server a span {
    font-size:12px;
    display:inline-block;
    text-align:center;
    padding:0 5px;
    line-height:20px;
    border-radius:3px;
    margin-left:2px;
    }
.error {
    padding:20px;
    border-radius:8px;
}    


.content-list-item__title {
       overflow-wrap: break-word;
  word-wrap: break-word;

  -ms-word-break: break-all;
  /* This is the dangerous one in WebKit, as it breaks things wherever */
  word-break: break-all;
  /* Instead use this non-standard one: */
  word-break: break-word;

  /* Adds a hyphen where the word breaks, if supported (No Blink) */
  -ms-hyphens: auto;
  -moz-hyphens: auto;
  -webkit-hyphens: auto;
  hyphens: auto; 
    }


/* --- Container Header --- */


/* --- Bagian Atas: Logo & Form --- */
.header-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 15px; /* Memberi jarak jika layar mengecil */
    margin-bottom: 16px;
}

/* Teks Logo */
.header-top-box .logo {
    font-size: 24px;
    font-weight: bold;
    text-decoration: none;
    flex-shrink: 0; /* Mencegah logo tertekan menjadi kecil */
}

/* Form Pencarian */
.header-top-box .search-form {
    display: flex;
    flex-grow: 1;
    max-width: 300px; /* Batas lebar pencarian agar tidak terlalu panjang */
}

.header-top-box .search-form input {
    width: 100%;
    padding: 8px 12px;
    border-radius: 4px 0 0 4px;
    outline: none;
    font-size: 14px;
}


.header-top-box .search-form button {
    padding: 8px 16px;
    border-radius: 0 4px 4px 0;
    cursor: pointer;
    font-weight: bold;
    flex-shrink: 0;
}



/* Ganti class .main-header sebelumnya dengan .header-top-box */
.header-top-box {
    max-width: 680px;
    margin: 0 auto;
    padding: 16px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 15px;
}

/* --- Kunci Sticky Ada di Sini --- */
.sticky-nav {
    position: sticky;
    top: 0; /* Menempel di paling atas */
    z-index: 1000;
    
    max-width: 680px;
    margin: 0 auto;
    
}
.nav-wrapper {
    position: relative; /* Diperlukan untuk penempatan posisi absolute tombol panah */
    max-width: 680px;
    margin: 0 auto;

}
/* Aturan menu scroll masih sama seperti sebelumnya */
.header-nav {
   display: flex;
    gap: 20px;
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth; /* Membuat efek scroll halus dari JavaScript */
    padding: 16px 45px; 
    
}
/* Sembunyikan scrollbar bawaan browser agar tampilan lebih bersih (Opsional) */
.header-nav::-webkit-scrollbar {
    display: none;
}
.header-nav {
    -ms-overflow-style: none;  /* IE dan Edge */
    scrollbar-width: none;  /* Firefox */
}

/* --- Desain Tombol Panah --- */
.nav-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 20px;
    font-weight: bold;
    transition: all 0.2s ease;
}



/* Posisi Kiri dan Kanan */
.nav-arrow-left {
    left: 8px;
}

.nav-arrow-right {
    right: 8px;
}
/* Pastikan a tag di header-nav memiliki posisi relatif agar garis bawahnya presisi */
.header-nav a {
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    transition: color 0.2s ease;
    position: relative; /* WAJIB DITAMBAHKAN untuk menopang garis bawah */
    padding-bottom: 4px; /* Memberi jarak antara teks dan garis bawah */
}


/* --- Desain Indikator Menu Aktif --- */

/* Mengubah warna dan ketebalan teks yang aktif */
.header-nav a.active {
   
    font-weight: bold;
}

/* Membuat garis bawah khusus (custom underline) */
.header-nav a.active::after {
    content: ''; /* Wajib ada untuk pseudo-element */
    position: absolute;
    left: 0;
    bottom: 0; /* Posisikan di paling bawah padding */
    width: 100%;
    height: 3px; /* Ketebalan garis */
    
    border-radius: 4px; /* Ujung garis sedikit melengkung */
}
/* --- Efek Menghilang untuk Tombol Panah --- */
.nav-arrow.is-hidden {
    opacity: 0;
    pointer-events: none; /* Mencegah tombol tetap bisa diklik saat tidak terlihat */
}

@media screen and (max-width:821px) {
  .header-nav {
   
    padding: 16px 20px; 
    
}  
/* Posisi Kiri dan Kanan */
.nav-arrow-left,

.nav-arrow-right {
    display:none;
}
}