body {
  scroll-behavior: smooth;
  font-family: sans-serif;
  margin:0;
  padding:0;
}

/* Sections background */
.section { position: relative; padding: 100px 0 60px; }
.section-home { background: linear-gradient(135deg, #00c6ff, #0072ff); color:#fff; }
.section-cp { background: linear-gradient(135deg, #a8edea, #fed6e3); }
.section-tp { background: linear-gradient(135deg, #fbc2eb, #a6c1ee); }
.section-atp { background: linear-gradient(135deg, #fddb92, #d1fdff); }
.section-kktp { background: linear-gradient(135deg, #cfd9df, #e2ebf0); }
.section-rpm { background: linear-gradient(135deg, #89f7fe, #66a6ff); }

/* Headings */
h2 {
  text-align: center;
  font-weight: bold;
  margin-bottom: 60px;
}

/* Card container (mengapung) */
.cards-container {
  margin-top: -60px; /* Card naik ke atas */
  z-index: 2;
  position: relative;
}

/* Card */
.card {
  border-radius: 15px;
  overflow: hidden;
  box-shadow: 0 8px 20px rgba(0,0,0,0.3);
  transition: transform 0.3s;
  position: relative;
  background:#fff;
}

.card:hover {
  transform: translateY(-5px);
}

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

.card-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 10px;
  background: rgba(0,0,0,0.5);
  color: #fff;
  text-align: center;
  font-weight: bold;
}

/* Back to Top */
#backToTop {
  position: fixed;
  bottom: 40px;
  right: 40px;
  display: none;
  width:50px; height:50px; border-radius:50%;
  animation: bounce 2s infinite;
}

@keyframes bounce {
  0%,20%,50%,80%,100%{transform:translateY(0);}
  40%{transform:translateY(-10px);}
  60%{transform:translateY(-5px);}
}

/* Animate Card */
.animate-card {
  opacity: 0;
  transform: translateY(50px);
  transition: all 0.6s ease-out;
}

.animate-card.visible {
  opacity: 1;
  transform: translateY(0);
}

/* General */
body, html { margin:0; padding:0; scroll-behavior: smooth; font-family: 'Segoe UI', sans-serif; }

/* Section full screen */
.section { min-height: 100vh; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 60px 20px; transition: all 0.5s; }
.section h2 { margin-bottom: 40px; font-size: 2.5rem; font-weight: bold; color: #000; }

/* Background gradients */
.section-home { background: linear-gradient(135deg, #00c6ff, #0072ff); color: white; }
.section-cp   { background: linear-gradient(135deg, #a8edea, #fed6e3); }
.section-tp   { background: linear-gradient(135deg, #fbc2eb, #a6c1ee); }
.section-atp  { background: linear-gradient(135deg, #fddb92, #d1fdff); }
.section-kktp { background: linear-gradient(135deg, #cfd9df, #e2ebf0); }
.section-rpm  { background: linear-gradient(135deg, #89f7fe, #66a6ff); }

/* Card */
.modern-card {
  border-radius: 20px;
  overflow: hidden;
  position: relative;
  cursor: pointer;
  transition: all 0.3s ease;
  aspect-ratio: 4/3;
  box-shadow: 0 10px 25px rgba(0,0,0,0.2);
}
.modern-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s;
}
.modern-card:hover img { transform: scale(1.1); }
.card-overlay {
  position: absolute;
  bottom: 0;
  width: 100%;
  background: rgba(0,0,0,0.6);
  color: white;
  font-weight: bold;
  text-align: center;
  padding: 15px;
  font-size: 1.1rem;
}

/* Animasi Scroll */
.animate-card { opacity:0; transform: translateY(50px); transition: all 0.6s ease-out; }
.animate-card.visible { opacity:1; transform: translateY(0); }

/* Back to Top */
#backToTop { position: fixed; bottom: 40px; right: 40px; display:none; border-radius:50%; width:50px; height:50px; font-size:1.5rem; }

/* Card & h2 animation */
.animate-card, section h2 {
  opacity: 0;
  transform: translateY(50px);
  transition: all 0.6s ease-out;
}

.animate-card.visible, section h2.visible {
  opacity: 1;
  transform: translateY(0);
}

.animate-card.hidden, section h2.hidden {
  opacity: 0;
  transform: translateY(50px);
}

/* Card hover effect */
.modern-card {
  border-radius: 20px;
  overflow: hidden;
  position: relative;
  cursor: pointer;
  transition: all 0.3s ease;
  aspect-ratio: 4/3;
  box-shadow: 0 10px 25px rgba(0,0,0,0.2);
}
.modern-card img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s; }
.modern-card:hover img { transform: scale(1.1); }
.card-overlay {
  position: absolute;
  bottom: 0; width: 100%;
  background: rgba(0,0,0,0.6);
  color: white; font-weight: bold;
  text-align: center; padding: 15px; font-size: 1.1rem;
}

/* Sections full screen */
.section { min-height: 100vh; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 60px 20px; transition: all 0.5s; }
.section h2 { margin-bottom: 40px; font-size: 2.5rem; font-weight: bold; color: #000; text-align: center; }


.section-home {
  background: linear-gradient(135deg, #00c6ff, #0072ff);
  color: #fff;
}

.section-home h1,
.section-home p {
  color: #fff;
}

.section-home img {
  max-width: 100%;
  height: auto;
  border-radius: 20px;
}

/* Home Section Background */
.section-home {
  background: linear-gradient(135deg, #00c6ff, #0072ff);
  color: #fff;
  overflow: hidden;
}

/* Teks shadow untuk menonjolkan */
.text-shadow {
  text-shadow: 2px 2px 6px rgba(0,0,0,0.5);
}

/* Gambar efek zoom saat hover */
.zoom-img {
  transition: transform 0.5s ease, box-shadow 0.5s ease;
}
.zoom-img:hover {
  transform: scale(1.05) rotate(1deg);
  box-shadow: 0 20px 40px rgba(0,0,0,0.3);
}

/* Animasi fade */
.animate-home {
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.8s ease-out;
}

.animate-home.fade-left {
  transform: translateX(-50px);
}

.animate-home.fade-right {
  transform: translateX(50px);
}

.animate-home.visible {
  opacity: 1;
  transform: translateX(0) translateY(0);
}

.pdf-modal {
  display: none; 
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0,0,0,0.8);
  z-index: 9999;
  justify-content: center;
  align-items: center;
}

.pdf-modal iframe {
  width: 80%;
  height: 80%;
  border-radius: 10px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.5);
}

.close-modal {
  position: absolute;
  top: 20px; right: 30px;
  font-size: 2rem;
  color: #fff;
  cursor: pointer;
  font-weight: bold;
}

/* Navbar background */
.navbar-custom {
  background: linear-gradient(90deg, #00c6ff, #0072ff); /* contoh gradien biru */
  transition: all 0.3s ease;
  box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}

/* Navbar links */
.navbar-custom .nav-link {
  color: #fff;
  font-weight: bold;
  position: relative;
  transition: all 0.3s ease;
}

/* Hover effect */
.navbar-custom .nav-link:hover {
  color: #ffeb3b;       /* ganti warna saat hover */
  transform: scale(1.1); /* sedikit membesar */
}

/* Active link underline */
.navbar-custom .nav-link.active::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 3px;
  background: #ffeb3b;
  bottom: -5px;
  left: 0;
  border-radius: 2px;
}

.navbar-custom {
  background: #fff; /* warna dasar navbar */
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
  position: fixed;
  width: 100%;
  z-index: 1000;
}

.navbar-custom .nav-link {
  color: #555;
  font-weight: bold;
  position: relative;
  transition: all 0.3s ease;
}

/* Warna berbeda tiap link */
.navbar-custom .nav-link:nth-child(1) { color: #e74c3c; } /* merah */
.navbar-custom .nav-link:nth-child(2) { color: #3498db; } /* biru */
.navbar-custom .nav-link:nth-child(3) { color: #2ecc71; } /* hijau */
.navbar-custom .nav-link:nth-child(4) { color: #f1c40f; } /* kuning */
.navbar-custom .nav-link:nth-child(5) { color: #9b59b6; } /* ungu */
.navbar-custom .nav-link:nth-child(6) { color: #e67e22; } /* oranye */

/* Hover effect */
.navbar-custom .nav-link:hover {
  transform: scale(1.1);
}

/* Underline moving */
.navbar-underline {
  position: absolute;
  height: 3px;
  background: currentColor;
  bottom: 0;
  left: 0;
  transition: all 0.3s ease;
  border-radius: 2px;
}

/* Navbar dark sudah default bg-dark di bootstrap */

/* Hover efek link */
.navbar-nav .nav-link {
  color: #ffffff;
  position: relative;
  transition: color 0.3s;
}

.navbar-nav .nav-link:hover {
  color: #00c6ff;
}

/* Indicator garis bawah aktif */
.nav-indicator {
  position: absolute;
  bottom: 0;
  height: 3px;
  width: 0;
  background-color: #00c6ff;
  transition: all 0.3s ease;
}

/* Indicator berpindah mengikuti link aktif */
.navbar-nav .nav-link.active ~ .nav-indicator {
  width: 100%;
}

/* Import Google Font */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap');

body {
  font-family: 'Poppins', sans-serif;
}

/* Home Section */
.section-home {
  background: linear-gradient(135deg, #00c6ff, #0072ff);
  color: #fff;
  min-height: 100vh;
}

.home-title {
  font-size: 2.5rem;
  font-weight: 700;
  background: linear-gradient(90deg, #ff6a00, #ee0979, #00c6ff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 1px 1px 4px rgba(0,0,0,0.3);
}

.home-subtitle {
  font-size: 1.2rem;
  font-weight: 500;
  color: #f0f0f0;
  margin-top: 15px;
  line-height: 1.5;
}

.home-author {
  font-size: 1rem;
  font-weight: 400;
  margin-top: 20px;
  color: #ffd700;
}

.home-image img {
  max-width: 100%;
  transition: transform 0.5s;
}

.home-image img:hover {
  transform: scale(1.05) rotate(1deg);
}

/* custom-numbering*/
.custom-numbering {
        counter-reset: item 0;
        /* reset counter */
        list-style: none;
        padding-left: 0;
        margin: 0;
      }

      .custom-numbering li {
        counter-increment: item;
        display: grid;
        grid-template-columns: 3em 1fr;
        /* kolom nomor + teks */
        margin-bottom: 10px;
        text-align: justify;
        padding-right: 1em;
        /* teks rata kiri-kanan */
      }

      .custom-numbering li::before {
        content: attr(data-section) "." counter(item) ". ";
        /* ← ada titik di belakang */
        font-weight: bold;
        text-align: right;
        padding-right: 0.5em;
      }

.list-group-numbered {
  counter-reset: item 0;
}
.list-group-numbered li {
  counter-increment: item;
  content: counter(item) ". ";

}