/* style.css */

/* Styling untuk Body */
body {
  font-family: "Inter", sans-serif;
  line-height: 1.6;
}

/* Mobile Styles: Sembunyikan card detail dan tombol pada layar kecil */
@media screen and (max-width: 768px) {
  .card-detail {
    display: none;
  }

  #view-detail-1,
  #view-detail-2 {
    display: none;
  }
}

/* Desktop Styles */
@media screen and (min-width: 769px) {
  .card-detail {
    position: absolute;
    top: -100%; /* Card mulai berada di atas */
    left: 0;
    z-index: 50; /* Agar berada di atas card */
    max-width: 700px;
    width: 100%; /* Sesuaikan dengan ukuran kontainer */
    background-color: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: opacity 0.5s ease-out, top 0.5s ease-out; /* Animasi untuk transisi posisi dan opacity */
  }

  #view-detail-1,
  #view-detail-2 {
    display: inline-block;
  }
}

/* Tombol Slide-Up */
#slide-up-btn {
  position: fixed;
  bottom: 1rem;
  right: 1rem;
  background-color: #3182ce;
  color: white;
  padding: 1rem;
  border-radius: 50%;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease-in-out, background-color 0.3s ease;
  z-index: 100;
  cursor: pointer;
}

#slide-up-btn:hover {
  background-color: #2b6cb0;
  transform: translateY(-5px); /* Sedikit terangkat saat di-hover */
}

/* Untuk card-detail */
.card-detail {
  z-index: 10; /* Atur z-index lebih rendah dari header */
}

/* Jika ingin card tetap muncul di bawah header, pastikan header punya z-index yang lebih tinggi */
header {
  z-index: 100; /* Agar header selalu di atas */
}

/* Tambahkan padding atas pada section Apps agar nggak ketumpuk */
section#app {
  padding-top: 80px; /* Atau sesuaikan dengan tinggi header */
}