/* Regular 400 */
@font-face {
  font-family: 'SF Pro Rounded';
  src: url('../fonts/SF-Pro-Rounded-light.otf') format('opentype');
  font-weight: 200;
  font-style: normal;
}

@font-face {
  font-family: 'SF Pro Rounded';
  src: url('../fonts/SF-Pro-Rounded-Regular.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
}

/* Medium 500 */
@font-face {
  font-family: 'SF Pro Rounded';
  src: url('../fonts/SF-Pro-Rounded-Medium.otf') format('opentype');
  font-weight: 500;
  font-style: normal;
}

/* Semibold 600 */
@font-face {
  font-family: 'SF Pro Rounded';
  src: url('../fonts/SF-Pro-Rounded-Semibold.otf') format('opentype');
  font-weight: 600;
  font-style: normal;
}

/* Bold 700 */
@font-face {
  font-family: 'SF Pro Rounded';
  src: url('../fonts/SF-Pro-Rounded-Bold.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
}

body.dark-mode .Akategori-content h3 {
  color: #FFFFFF /* warna saat dark mode */
}

body.dark-mode .Akategori-meta {
  color: rgba(255, 255, 255, 0.7) /* warna saat dark mode */
}

body.dark-mode .Akategori-meta span{
  color: rgba(255, 255, 255, 0.7) /* warna saat dark mode */
}


/* ===== DARK MODE ===== */
body.dark-mode .Akategori-boxgabung,
body.dark-mode .sidebar-program {
  background: #000; /* box hitam */
  border: 1px solid rgba(255, 255, 255, 0.7);
  color: #fff; /* default text putih */
}

body.dark-mode .Akategori-boxgabung p {
  color: rgba(255, 255, 255, 0.7); /* meta pakai transparan */
}

body.dark-mode .Akategori-lin {
  color: #fff;
}

body.dark-mode .tgl {
  color: rgba(255, 255, 255, 0.7); /* dark mode */
}

body.dark-mode .Akategori-link1 {
  color: #66c2a8; /* optional: hijau tosca biar kontras */
}

body.dark-mode .sidebar-program h4 {
  color: #fff;
}

body.dark-mode .sidebar-program ul.program-list li {
  border-bottom: 1px solid rgba(255, 255, 255, 0.2); /* garis halus */
}

body.dark-mode .sidebar-program ul.program-list li .program-time,
body.dark-mode .sidebar-program ul.program-list li .program-title {
  color: #fff;
}

body.dark-mode .sidebar-program ul.program-list li.live .program-title {
  color: #ff7676; /* tetap merah untuk live, lebih soft */
}

body.dark-mode .sidebar-program .live-label {
  background-color: #000;
  color: #fff;
  border: 1px solid #E23838;
}

body.dark-mode .sidebar-program a.selengkapnya {
  color: #66aaff; /* link biru lebih cerah */
}

/* default (light mode) sudah pakai inline style / css biasa */



.Akategori-wrapper {
  font-family: 'Segoe UI', sans-serif;
}

.Akategori-container {
  margin-top: 50px;
  display: flex;
  gap: 30px;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 35px;
}

.Akategori-kiri, .Akategori-kanan {
  width: 38%;
}

.Akategori-main {
  width: 75%; /* sisanya 23% buat sidebar, +2% gap biar pas */
}

.Akategori-title-wrap {
  display: inline-block;
  position: relative;
  margin-bottom: -27px;
}

.Akategori-title-wrap-kanal {
  display: inline-block;
  position: relative;
  margin-bottom: -137px;
}

.Akategori-title {
  font-family: 'SF Pro Rounded', sans-serif;
  font-size: 20px;
  font-weight: 400;
  margin: 0;
}

.Akategori-title-line {
  height: 2px;
  width: 100%;
  margin-top: 5px;
  background: linear-gradient(to right, #046049 20%, #ccc 20%);
  margin-bottom: 30px;
}

.Akategori-list-wrapper {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* 2 kolom */
  
}

.Akategori-list {
  display: grid;
  grid-template-columns: 1fr; /* fallback */
}

.Akategori-link {
  display: block;
  text-decoration: none;
  color: #000000;
  font-family: 'SF Pro Rounded', sans-serif;
  font-weight: 500;
  font-size: 13.75px;
  margin-top: 35px;
  margin-bottom: 15px;
}

.Akategori-link i.fa {
  margin-left: 8px; /* jarak dari teks, bisa disesuaikan */
}


.Akategori-link:hover {
  text-decoration: none;
  color: inherit;
}


.Akategori-card {
  display: flex;
  gap: 15px;
  margin-left:15px;
}

.Akategori-card img {
  width: 110px;
  height: 110px;
  object-fit: cover;
}

.Akategori-content h3 {
  margin: 0 0 8px;
  font-family: 'Literata', sans-serif;
  font-size: 14px;
  font-weight: 400;

  display: -webkit-box;        /* bikin jadi flex box vertikal */
  -webkit-line-clamp: 2;       /* maksimal 2 baris */
  -webkit-box-orient: vertical;
  overflow: hidden;            /* buang teks berlebih */
  text-overflow: ellipsis;     /* tambahin ... */
  line-height: 1.4;            /* biar rapi */
  max-height: calc(1.4em * 2); /* memastikan tingginya pas 2 baris */
}

.Akategori-label {
  display: inline-block;
  font-family: 'SF Pro Rounded', sans-serif;
  font-weight: 400;
  font-size: 10.5px;
  color: #fff;
  padding: 3px 15px;
  margin-bottom: 13px;
}

.Akategori-pendidikan { background: #EEA83B; }
.Akategori-event { background: #622357; }
.Akategori-lifestyle { background:  #045759; }
.Akategori-budaya { background: #DE7746; }

.Akategori-meta {
  font-family: 'SF Pro Rounded', sans-serif;
  font-weight: 400;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: rgba(0, 0, 0, 0.6);
  flex-wrap: wrap;
  margin-right: 7px;
  margin-top: 10px;
}

.Akategori-meta .meta-item img.icon {
    width: 22px;   /* ukuran icon */
    height: 22px;
    object-fit: contain;
    transition: transform 0.2s ease, opacity 0.3s ease;
}

/* Efek hover */
.Akategori-meta .meta-item:hover img.icon {
    transform: scale(1.2);
    opacity: 0.8;
}

.Akategori-meta span,
.Akategori-meta .meta-item {
  display: flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
}

.Akategori-meta .meta-item.like span{
  margin-right: 10px;
    font-family: 'SF Pro Rounded', sans-serif;
  font-weight: 600;
  font-size: 11.44;
  gap: 20px;
}

.Akategori-meta .meta-item.dislike span {
  font-family: 'SF Pro Rounded', sans-serif;
  font-weight: 600;
  font-size: 11.44;
  gap: 20px;
  margin-right: 10px;
}

.Akategori-meta .meta-item.comment,
.Akategori-meta .meta-item.time {
  font-size: 12px;
  color: #888;
}


.Akategori-pagination {
  margin-top: 38px;
  padding: 6px;
}

.Akategori-pagination a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;      /* panjang */
  height: 26px;     /* tinggi sama → jadi kotak */
  border: none;
  background: #939393;
  margin: 0 3px;
  cursor: pointer;
  text-decoration: none;
  color: #fff;
  font-weight: 200;
}

.Akategori-pagination a.active {
  background: #ccc;   /* warna aktif */
  color: #fff;
}

.Akategori-pagination span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  margin: 0 3px;
  color: #fff;
  background: transparent; 
}


/* Sidebar gabungan */
.Akategori-sidebar {
  width: 23%;
  margin-left:30px;
}

/* ===== RESPONSIVE ===== */
/* Tablet (2 kolom tanpa sidebar) */
@media (max-width: 1199px) and (min-width: 769px) {
  .Akategori-container {
    flex-wrap: wrap;
    gap: 20px;
  }

  .Akategori-kiri,
  .Akategori-kanan {
    width: 48%; /* 2 kolom */
  }

  aside.Akategori-sidebar {
    display: none !important;
  }

  .Akategori-card {
    flex-direction: row; /* gambar kiri, meta kanan */
    gap: 12px;
  }

  .Akategori-card img {
    width: 100px;
    height: 100px;
  }

  .Akategori-content h3 {
    font-size: 14px;
  }

  .Akategori-meta {
    font-size: 12px;
    flex-wrap: wrap;
  }

  .Akategori-boxgabung p {
    font-size: 15px;
  }

}

/* Mobile (1 kolom) */
@media (max-width: 768px) {
  .Akategori-container {
    flex-direction: column;
    gap: 25px;
  }

  .Akategori-kiri,
  .Akategori-kanan {
    width: 100%; /* full */
  }

  .Akategori-card {
    flex-direction: row; /* tetap gambar kiri, meta kanan */
    gap: 10px;
  }

  .Akategori-card img {
    width: 80px;
    height: 80px;
  }

  .Akategori-content h3 {
    font-size: 13px;
    line-height: 1.4;
  }

  .Akategori-meta {
    font-size: 11.5px;
    gap: 6px;
    flex-wrap: wrap;
  }

  .Akategori-boxgabung p {
    font-size: 14px;
  }
}

/* Extra kecil (≤480px) → gambar atas */
@media (max-width: 480px) {
  .Akategori-card {
    flex-direction: column;
    align-items: flex-start;
  }

  .Akategori-card img {
    width: 100%;
    height: auto;
  }

  .Akategori-content {
    margin-top: 10px;
  }

  .Akategori-meta {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 1px;
  }

  .Akategori-boxgabung p {
    font-size: 13px;
  }
}

/* Mobile khusus */
/* Mobile (≤768px) → tetap 2 kolom */
@media (max-width: 768px) {
  .Akategori-container {
    flex-direction: column; /* kiri & kanan stack ke bawah */
    gap: 25px;
  }

  .Akategori-kiri,
  .Akategori-kanan {
    width: 100%; /* biar full tapi isi listnya grid */
  }

  .Akategori-main {
    width: 100%; 
}

  .Akategori-wrapper {
    margin-top: 20px;

  .Akategori-list-wrapper {
    flex-direction: column;
    gap: 10px;
  }

  .Akategori-list {
    display: grid;
    grid-template-columns: 1fr 1fr; /* 2 kolom */
    gap: 15px;
  }

  .Akategori-card {
    margin-top: -30px;
    flex-direction: column; /* gambar atas */
    align-items: flex-start;
  }

  .Akategori-card img {
    width: 100%;
    height: 110px;
    object-fit: cover;
  }

  .Akategori-content {
    margin-top: 8px;
  }

  .Akategori-content h3 {
    font-size: 13px;
    line-height: 1.4;
    margin-bottom: 6px;
  }

  .Akategori-label {
    margin-bottom: 6px;
  }

  .Akategori-meta {
    font-size: 11.5px;
    gap: 6px;
    flex-wrap: wrap;
  }

  .Akategori-pagination {
  margin-top: 0;
  margin-bottom: 18px;
  padding: 6px;
}
}