/* ---------- Top small bar ---------- */
    .topbar {
      font-size: 0.9rem;
      color: #444;
      background: #fff;
      border-bottom: 1px solid #e6e6e6;
    }

    .breaking-badge {
      background: #ea5b5b;
      color: white;
      font-weight: 600;
      border-radius: 6px;
      padding: 4px 10px;
      display: inline-block;
    }
    .sidebar-sticky {
      position: fixed;
      right: 0;            /* atau sesuaikan */
      top: 0;
      width: 350px;        /* wajib karena fixed */
      height: 100vh;       /* penuh layar */
      overflow-y: auto;    /* jika content tinggi */
      background: #fff;
      z-index: 999;
  }


    .ticker {
      margin-left: 10px;
      color: #666;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      max-width: 520px;
      display: inline-block;
    }

    /* ---------- Header (logo + search + buttons) ---------- */
    .search-box {
      border-radius: 10px;
      height: 44px;
      border: 2px solid #e5e5e5;
      padding: 0 18px;
    }

    .btn-soft {
      border-radius: 12px;
      box-shadow: 0 6px 0 rgba(0, 0, 0, 0.06);
      padding: 10px 18px;
      font-weight: 600;
    }

    .btn-masuk {
      background: #cfd8ff;
      color: #0b1726;
      border: none;
      margin-right: 10px;
    }

    .btn-daftar {
      background: #fff9c7;
      color: #0b1726;
      border: none;
    }

    /* ---------- Navbar ---------- */
    .main-nav {
      border-top: 1px solid #e6e6e6;
      border-bottom: 1px solid #e6e6e6;
      background: #fff;
    }

    .main-nav .nav-link {
      color: #222;
      font-weight: 600;
    }

    .main-nav .nav-link:hover {
      color: #0d6efd;
    }

    /* ---------- Card / layout styles ---------- */
    .featured-grid {
      gap: 20px;
    }

    .card-feature {
      position: relative;
      overflow: hidden;
      min-height: 200px;
      color: white;
    }

    .card-feature img, .card-feature iframe {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
      filter: brightness(0.55);
      transition: transform .35s ease;
    }

    .card-feature:hover img {
      transform: scale(1.03);
      filter: brightness(0.5);
    }

    .card-overlay {
      position: absolute;
      left: 20px;
      right: 20px;
      bottom: 20px;
    }

    .tag {
      display: inline-block;
      padding: 6px 8px;
      border-radius: 4px;
      font-size: 12px;
      font-weight: 700;
      background: #0dcaf0;
      color: #042033;
      margin-bottom: 10px;
    }

    .meta {
      font-size: 0.85rem;
      opacity: 0.9;
      color: #e7e7e7;
      margin-bottom: 6px;
    }

    .title-hero {
      font-family: 'Arial Black', Impact, sans-serif;
      font-size: 2.2rem;
      line-height: 1.05;
      margin: 0;
    }

    .small-title {
      font-weight: 700;
      font-size: 1rem;
      color: #fff;
      margin: 0;
      line-height: 1.2;
    }

    /* responsive adjustments */
    @media (max-width: 991px) {
      .title-hero {
        font-size: 1.6rem;
      }

      .page-container {
        padding-left: 14px;
        padding-right: 14px;
      }
    }

    @media (max-width: 576px) {
      .card-feature {
        min-height: 140px;
      }

      .title-hero {
        font-size: 1.2rem;
      }

      .ticker {
        display: none;
      }

      header .page-container .row > .col {
        padding-left: 6px;
        padding-right: 6px;
      }

      .topbar small {
        font-size: 0.75rem;
      }
    }

    /* page container spacing */
    .page-container {
      padding: 18px 36px;
      max-width: 1500px;
      margin: 0 auto;
    }

    /* ---- Don't Miss Section ---- */
    .tab-item {
      font-weight: 700;
      cursor: pointer;
      padding-bottom: 6px;
    }

    .tab-item.active {
      color: #ff1744;
      border-bottom: 2px solid #ff1744;
    }

    .cat-btn {
      padding: 4px 10px;
      border-radius: 4px;
      font-size: 12px;
      font-weight: 700;
      color: #fff;
      cursor: pointer;
      background: #ccc;
    }

    .cat-btn.active {
      background: #ff1744 !important;
    }

    .meta-small {
      font-size: 0.75rem;
      color: #777;
    }

    .left-title,
    .right-title {
      font-weight: 700;
      font-size: 0.95rem;
      line-height: 1.2;
    }

    /* ---- VIDEO SECTION ---- */

    .video-title {
      color: #ff1744;
      border-bottom: 2px solid #ff1744;
      padding-bottom: 4px;
    }

    .vcat-btn {
      padding: 4px 10px;
      border-radius: 4px;
      font-size: 12px;
      font-weight: 700;
      color: #fff;
      cursor: pointer;
    }

    .vcat-btn.active {
      background: #ff1744 !important;
    }

    .social-box {
      padding: 12px 14px;
      border-radius: 6px;
      color: white;
      font-weight: 600;
      cursor: pointer;
    }

    .social-box.fb {
      background: #3b5998;
    }

    .social-box.ig {
      background: #d6249f;
    }

    .social-box.yt {
      background: #ff0000;
    }

    .social-box.tw {
      background: #1da1f2;
    }

    .social-box.be {
      background: #1769ff;
    }

    .social-box.dr {
      background: #ea4c89;
    }

    .ads-box {
      position: relative;
    }

    .ads-overlay {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      font-size: 2rem;
      font-weight: 700;
      color: white;
      text-shadow: 0 2px 10px rgba(0, 0, 0, .6);
    }

    .cat-item {
      display: flex;
      justify-content: space-between;
      border-bottom: 1px solid #eee;
      padding: 6px 0;
      font-weight: 600;
    }

    .cat-item span {
      background: #ff1744;
      color: white;
      font-size: 12px;
      padding: 2px 8px;
      border-radius: 4px;
    }

    /* ---- LIFE STYLE SECTION ---- */

    .ls-title {
      color: #ff1744;
      border-bottom: 2px solid #ff1744;
      padding-bottom: 4px;
    }

    .ls-btn {
      padding: 4px 10px;
      border-radius: 4px;
      font-size: 12px;
      font-weight: 700;
      color: #fff;
      cursor: pointer;
    }

    .ls-btn.active {
      background: #ff1744 !important;
    }

    .ls-big-title {
      font-size: 1.4rem;
      font-weight: 700;
      line-height: 1.25;
      margin-bottom: 6px;
    }

    .ls-desc {
      color: #666;
      font-size: 0.92rem;
      max-width: 95%;
    }

    .ls-small-title {
      font-size: 0.95rem;
      font-weight: 700;
      line-height: 1.2;
    }

    .meta-small {
      font-size: 0.75rem;
      color: #777;
    }

    /* ---- FOOTER ---- */
    .footer-section {
      background: #d9d9d9;
    }

    .footer-title {
      font-weight: 700;
      font-size: 1.3rem;
    }

    .footer-line {
      border-top: 2px solid #ff1744;
      width: 100%;
      margin: 6px 0 16px 0;
    }

    .footer-text {
      color: #444;
      font-size: 0.95rem;
      max-width: 300px;
    }

    /* Social Icons */
    .footer-social {
      width: 42px;
      height: 42px;
      border-radius: 50%;
      display: flex;
      justify-content: center;
      align-items: center;
      color: white;
      font-size: 1.3rem;
    }

    .footer-social.fb {
      background: #3b5998;
    }

    .footer-social.tw {
      background: #1da1f2;
    }

    .footer-social.ig {
      background: #e91e63;
    }

    .footer-social.yt {
      background: #ff0000;
    }

    /* Gallery */
    .footer-gallery {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 6px;
    }

    .footer-gallery img {
      width: 100%;
      height: 80px;
      object-fit: cover;
      border-radius: 4px;
    }

    /* Tags */
    .tag-item {
      display: inline-block;
      padding: 5px 10px;
      border-radius: 4px;
      color: white;
      font-size: 12px;
      margin: 4px;
      font-weight: 600;
    }

    /* Subscribe */
    .footer-input {
      border-radius: 4px;
      height: 44px;
      background: white;
      border: 1px solid #ccc;
    }

    .footer-subscribe {
      background: #ff5252;
      color: white;
      font-weight: 700;
      padding: 10px 0;
      border-radius: 4px;
    }

    .footer-subscribe:hover {
      background: #ff1744;
    }

    /* small utilities used in collapse */
    .mobile-collapse-search {
      padding: 8px 0;
    }

    .mobile-collapse-actions .btn {
      width: 100%;
      margin-bottom: 8px;
    }