@font-face {
    /* 1. Beri nama untuk font Anda */
    font-family: 'Tulpen One'; 
  
    /* 2. Tentukan lokasi file font */
    src: url('fonts/TulpenOne-Regular.ttf') format('truetype');
  
    /* (Opsional) Properti tambahan */
    font-weight: normal;
    font-style: normal;
  }

  .singles-carousel-wrapper { overflow: hidden; padding: 30px 0; position: relative; }
  .singles-carousel-wrapper::before, .singles-carousel-wrapper::after { content: ''; position: absolute; top: 0; height: 100%; width: 50px; z-index: 2; pointer-events: none; }
  .singles-carousel-wrapper::before { left: 0; background: linear-gradient(to right, #1D1D1D, rgba(29, 29, 29, 0)); }
  .singles-carousel-wrapper::after { right: 0; background: linear-gradient(to left, #1D1D1D, rgba(29, 29, 29, 0)); }
  
  /* --- STYLE DASAR UNTUK DESKTOP (5 card) --- */
  .singles-carousel-track { display: flex; width: calc(20% * 10); animation: scroll-left 35s linear infinite; }
  .single-card-compact { flex-shrink: 0; width: 10%; padding: 0 15px; }
  
  .singles-carousel-wrapper:hover .singles-carousel-track { animation-play-state: paused; }
  @keyframes scroll-left { from { transform: translateX(0); } to { transform: translateX(-50%); } }

  /* Style card (tetap sama) */
  .single-card-compact .img {position: relative; overflow: hidden;}
  .single-card-compact .img img {width: 100%; aspect-ratio: 1 / 1; object-fit: cover;}
  .single-card-compact .info-overlay {position: absolute; bottom: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0); color: white; display: flex; flex-direction: column; justify-content: flex-end; padding: 15px; text-align: left; transition: all 0.4s ease;}
  .single-card-compact:hover .info-overlay {background: rgba(0, 0, 0, 0.7);}
  .single-card-compact .info-overlay .name {font-size: 1rem; font-weight: 600; margin-bottom: 5px; transform: translateY(20px); opacity: 0; transition: all 0.4s ease;}
  .single-card-compact:hover .info-overlay .name {transform: translateY(0); opacity: 1;}
  .single-card-compact .info-overlay .links {display: flex; gap: 10px; transform: translateY(20px); opacity: 0; transition: all 0.4s ease; transition-delay: 0.1s;}
  .single-card-compact:hover .info-overlay .links {transform: translateY(0); opacity: 1;}
  .single-card-compact .info-overlay .links a {color: white; font-size: 1rem;}

  /* --- ATURAN KHUSUS UNTUK TAMPILAN HP (max-width: 767px) --- */
  @media (max-width: 767px) {
      /* Mengubah layout menjadi 3 card */
      .singles-carousel-track {
          width: calc(20% * 10); /* 100% / 3 * 10 card */
      }
      .single-card-compact {
          width: 20%; /* 100% / 3 card */
          padding: 0 8px; /* Jarak antar card diperkecil */
      }

      /* Menyesuaikan ukuran font overlay di HP */
      .single-card-compact .info-overlay .name {
          font-size: 0.8rem;
      }
      .single-card-compact .info-overlay .links a {
          font-size: 0.8rem;
      }
  }