/* Regular 400 */
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css');

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


/* ==== DARK MODE CUSTOM ==== */
body.dark-mode .teks .terpopuler-judul a {
  color: #fff !important;
}

body.dark-mode .teks .meta {
  color: rgba(255, 255, 255, 0.6) !important;
}

body.dark-mode .label-meta {
  color: rgba(255, 255, 255, 0.6) !important;
}

.terpopuler {
  width: 100%;
  max-width: 350px;
  margin-top: 0; /* sejajar dengan carousel */
  padding-top: 4px; /* kasih sedikit nafas */
}

.terpopuler h3 {
  margin-bottom: 6px;
  font-size: 20px;
  font-family: 'SF Pro Rounded', sans-serif;
  font-weight: 400;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* === Garis Kombinasi === */
.garis-kombo {
  height: 2px;
  width: 100%;
  margin-top: 5px;
  background: linear-gradient(to right, #046049 10%, #ccc 10%);
  margin-bottom: 30px;
}

/* === List Berita === */
.terpopuler-list {
  max-height: 400px;
  overflow-y: auto;
  padding-right: 5px;
  display: flex;
  flex-direction: column;
}

.terpopuler-list::-webkit-scrollbar {
  width: 6px;
}
.terpopuler-list::-webkit-scrollbar-thumb {
  background: #ccc;
  border-radius: 10px;
}


/* === Item === */
.terpopuler-item {
  display: flex;
  gap: 15px;
  margin-bottom: 15px;
}

.circle {
  width: 36px;
  height: 36px;
  background: #EFEFEF;
  border-radius: 50%;
  text-align: center;
  line-height: 36px;
  font-family: 'SF Pro Rounded', sans-serif;
  font-weight: 400;
  color: #555;
  font-size: 20px;
  flex-shrink: 0;
}

.right-listpopuler {
  display: block;         /* pastikan dia blok */
  width: 100%;            /* biar full lebar parent */
  border-bottom: 1px solid #e0e0e0;
  padding-bottom: 15px;
  margin-bottom: 15px;
}


.teks {
  flex: 1;
}

.teks .terpopuler-judul a {
  font-size: 14px;
  font-family: 'Literata', serif;
  font-weight: 400;
  color: #222;
  margin-bottom: 5px;
  line-height: 1.4em;
  text-decoration: none;
}

.teks .terpopuler-judul a:hover {
  color: #68A092;
}

.teks .meta {
  font-size: 12px;
  color: gray;
   font-family: 'SF Pro Rounded', sans-serif;
   font-weight: 400;
}

.label-meta {
  font-family: 'SF Pro Rounded', sans-serif;
  font-weight: 700;
  color: rgba(0, 0, 0, 0.6);
}





/* === RESPONSIVE === */
@media screen and (max-width: 1024px) {
  .terpopuler {
    max-width: 300px;
    padding: 3px;
    max-height: 300px;      /* tinggi maksimal container di tablet */
    overflow: hidden; 
  }

  .terpopuler h3 {
    font-size: 18px;
    gap: 6px;
  }

  .circle {
    width: 32px;
    height: 32px;
    line-height: 32px;
    font-size: 18px;
  }

  .teks .terpopuler-judul a {
    font-size: 13px;
      display: -webkit-box;
  -webkit-line-clamp: 2; /* maksimal 2 baris */
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  word-wrap: break-word;
  }

  .teks .meta {
    font-size: 11px;
  }

  .terpopuler-item {
    margin-bottom: 0px;
  }

  .garis-kombo {
    margin-bottom: 14px;
  }
}

@media screen and (max-width: 768px) {
  .terpopuler {
    max-width: 100%;
    margin: 10px auto;
    padding: 2px;
  }

  .terpopuler h3 {
    font-size: 16px;
    gap: 5px;
  }

  .circle {
    width: 28px;
    height: 28px;
    line-height: 28px;
    font-size: 16px;
  }

  .teks .terpopuler-judul a {
    font-size: 12px;
  }

  .teks .meta {
    font-size: 10px;
  }
}

@media screen and (max-width: 480px) {
  .terpopuler {
    max-width: 100%;
    padding: 1px 5px;
  }

  .terpopuler h3 {
    font-size: 14px;
    gap: 4px;
  }

  .circle {
    width: 24px;
    height: 24px;
    line-height: 24px;
    font-size: 14px;
  }

  .teks .terpopuler-judul a {
    font-size: 11px;
  }

  .teks .meta {
    font-size: 9px;
  }
}