:root{
  --bg:#f5f7ff;
  --bg2:#eef1ff;
  --card:#ffffff;
  --text:#1f2937;
  --muted:#6b7280;
  --primary:#6c7cff;
  --border:rgba(0,0,0,.05);
}

body.dark{
  --bg:#0f172a;
  --bg2:#020617;
  --card:#111827;
  --text:#e5e7eb;
  --muted:#9ca3af;
  --primary:#8b9cff;
  --border:rgba(255,255,255,.08);
}


/* RESET */
*{margin:0;padding:0;box-sizing:border-box}
a{text-decoration:none;color:inherit}

body{
  font-family:Poppins,sans-serif;
  background:linear-gradient(180deg,var(--bg),var(--bg2));
  color:var(--text);
  padding-top:70px;
}

/* HEADER */
header{
  position:fixed;
  top:0;
  left:0;
  right:0;
  backdrop-filter:blur(12px);
  background:rgba(255,255,255,.7);
  border-bottom:1px solid var(--border);
  z-index:9;
}
.header-inner{
  max-width:1100px;
  margin:auto;
  padding:16px 24px;
  display:flex;
  justify-content:space-between;
  align-items:center;
}
.brand{color:var(--primary);font-weight:600}
.nav a{
  margin-left:18px;
  font-size:14px;
  color:var(--muted);
}
.nav a:hover{color:var(--primary)}

/* TITLE */
.page-title{
  text-align:center;
  margin:40px 0 60px;
}
.page-title h1{font-size:32px}

/* GRID */
.grid{
  max-width:1100px;
  margin:auto;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:36px;
  padding:0 24px;
}
.card{
  background:var(--card);
  padding:28px;
  border-radius:24px;
  transform:rotate(-2deg);
  transition:.3s;
}
.card:nth-child(even){transform:rotate(2deg)}
.card:hover{transform:translateY(-8px)}


    /* SECTION */
      .section {
        margin-top: 100px;
      }
      .section-title {
        color: var(--primary);
        margin-bottom: 40px;
        font-size: 24px;
      }
      .section-inner{
        max-width:1100px;
        margin:0 auto;
        padding:0 24px;
      }


/* FOOTER */
footer{
  margin-top:100px;
  text-align:center;
  padding:40px 0;
  color:var(--muted);
  border-top:1px solid var(--border);
}

.theme-toggle {
        margin-top: 14px;
        cursor: pointer;
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 8px 16px;
        border-radius: 999px;
        background: var(--card);
      }


      /* SCROLL TO TOP BUTTON */
      #scrollTopBtn{
        position:fixed;
        bottom:100px;
        right:50px;
        width:20px;           /* 👉 dikecilkan */
        height:20px;
        border:none;
        background:transparent;
        cursor:pointer;
        opacity:0;
        pointer-events:none;
        transition:opacity .4s ease;
        z-index:99;
      }

        /* IMAGE KUNAI */
        #scrollTopBtn img{
          width:100%;
          height:auto;
          filter:drop-shadow(0 6px 14px rgba(0,0,0,.25));
          transform:rotate(-20deg);
          animation:kunaiFloat 3.5s ease-in-out infinite; /* 👉 MELAYANG */
        }

        /* HOVER */
        #scrollTopBtn:hover img{
          transform:rotate(-20deg) scale(1.08);
        }

        /* MUNCUL SAAT SCROLL */
        #scrollTopBtn.show{
          opacity:1;
          pointer-events:auto;
        }

        /* DARK MODE */
        body.dark #scrollTopBtn img{
          filter:drop-shadow(0 6px 14px rgba(255,255,255,.15));
        }

        /* FLOATING ANIMATION */
        @keyframes kunaiFloat{
          0%,100%{
            transform:translateY(0) rotate(-20deg);
          }
          50%{
            transform:translateY(-8px) rotate(-20deg);
          }
      }