/* project.css - tampilan halaman Project XI TKJ
   Warna dan font memakai variabel dari style.css (dimuat lebih dulu). */

.pj-main {
  position: relative;
  z-index: 1;
  max-width: 72rem;
  margin: 0 auto;
  padding: 7rem 1.25rem 4rem;
}

/* ===== Judul halaman ===== */
.pj-head {
  margin-bottom: 2rem;
  animation: up .8s cubic-bezier(.2, .8, .2, 1) both;
}
.pj-head h1 {
  display: block;
  margin: 0 0 .4rem;
  font-size: clamp(3.2rem, 13vw, 6.5rem);
  line-height: .95;
}
.pj-head p {
  margin: 0;
  max-width: 40rem;
  color: var(--mute);
}

/* ===== Tata letak: menu di kiri, detail di kanan ===== */
.pj-wrap {
  display: grid;
  grid-template-columns: minmax(0, 19rem) minmax(0, 1fr);
  gap: 1.5rem;
  align-items: start;
}
.pj-side {
  position: sticky;
  top: 5.5rem;
}

/* ===== Menu: filter kategori ===== */
.pj-filter {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-bottom: 1rem;
}
.pj-chip {
  padding: .4rem .9rem;
  border: 1px solid rgba(255, 255, 255, .25);
  border-radius: 99px;
  background: transparent;
  color: var(--mute);
  font: 500 .92rem Figtree, system-ui, sans-serif;
  cursor: pointer;
}
.pj-chip:hover {
  color: #fff;
  border-color: rgba(255, 255, 255, .5);
}
.pj-chip[aria-pressed="true"] {
  background: var(--gf);
  border-color: transparent;
  color: #fff;
  font-weight: 700;
}

/* ===== Menu: daftar project (seperti deretan port switch, lampu menyala = dipilih) ===== */
.pj-list {
  display: grid;
  gap: .6rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.pj-item {
  display: flex;
  align-items: center;
  gap: .85rem;
  width: 100%;
  padding: .85rem 1rem;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 1rem;
  background: rgba(10, 16, 56, .7);
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color .2s, background .2s;
}
.pj-item:hover {
  border-color: rgba(95, 208, 255, .6);
}
.pj-item[aria-current="true"] {
  border-color: transparent;
  background: linear-gradient(#101a52, #101a52) padding-box, var(--g) border-box;
}
.pj-led {
  flex: none;
  width: .7rem;
  height: .7rem;
  border-radius: 50%;
  background: #2a3566;
}
.pj-item[aria-current="true"] .pj-led {
  background: var(--biru-muda);
  box-shadow: 0 0 10px var(--biru-muda);
}
.pj-nm {
  display: block;
  font-weight: 700;
  line-height: 1.25;
}
.pj-kt {
  display: block;
  font-size: .85rem;
  color: var(--mute);
}

/* ===== Detail project ===== */
.pj-detail {
  min-width: 0;
  padding: 1rem;
  border: 1px solid transparent;
  border-radius: 1.5rem;
  background: linear-gradient(var(--sf), var(--sf)) padding-box, var(--g) border-box;
}
.pj-detail.ganti {
  animation: pj-masuk .45s cubic-bezier(.2, .8, .2, 1) both;
}
@keyframes pj-masuk {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}
.pj-kosong {
  margin: 1rem;
  color: var(--mute);
}

/* ===== Galeri foto ===== */
.pj-gal {
  position: relative;
}
.pj-slides {
  display: flex;
  overflow-x: auto;
  aspect-ratio: 16/10;
  border-radius: 1rem;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
  cursor: grab;
}
.pj-slides::-webkit-scrollbar {
  display: none;
}
.pj-slides.seret {
  cursor: grabbing;
  scroll-snap-type: none;
}
.pj-slide {
  flex: 0 0 100%;
  display: grid;
  place-items: center;
  padding: 1rem;
  text-align: center;
  font-weight: 700;
  color: rgba(255, 255, 255, .85);
  background: linear-gradient(160deg, #1e6cff, #2b3fd8);
  scroll-snap-align: center;
  user-select: none;
}
.pj-slide {
  position: relative;
}
.pj-slide img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.pj-nav {
  position: absolute;
  top: 50%;
  z-index: 2;
  width: 2.6rem;
  height: 2.6rem;
  margin-top: -1.3rem;
  padding: 0 0 .2rem;
  border: 1px solid rgba(255, 255, 255, .3);
  border-radius: 50%;
  background: rgba(0, 4, 24, .72);
  backdrop-filter: blur(6px);
  color: #fff;
  font-size: 1.7rem;
  line-height: 1;
  cursor: pointer;
  transition: opacity .2s, background .2s;
}
.pj-nav.kiri { left: .6rem; }
.pj-nav.kanan { right: .6rem; }
.pj-nav:hover { background: rgba(30, 108, 255, .85); }
.pj-nav:disabled { opacity: 0; pointer-events: none; }
.pj-hitung {
  position: absolute;
  top: .7rem;
  right: .7rem;
  padding: .15rem .65rem;
  border-radius: 99px;
  background: rgba(0, 4, 24, .72);
  font-size: .85rem;
  font-weight: 700;
}
.pj-titik {
  position: absolute;
  left: 0;
  right: 0;
  bottom: .7rem;
  display: flex;
  justify-content: center;
  gap: .45rem;
}
.pj-titik button {
  width: .6rem;
  height: .6rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .45);
  cursor: pointer;
}
.pj-titik button[aria-current="true"] {
  width: 1.5rem;
  border-radius: 99px;
  background: #fff;
}

/* ===== Isi detail ===== */
.pj-info {
  padding: 1.3rem .7rem .7rem;
}
.pj-kat {
  display: inline-block;
  padding: .2rem .85rem;
  border-radius: 99px;
  background: rgba(95, 208, 255, .14);
  color: var(--biru-muda);
  font-size: .9rem;
  font-weight: 700;
}
.pj-info h2 {
  margin: .7rem 0 .2rem;
  font-size: clamp(2.2rem, 6vw, 3.2rem);
}
.pj-tgl {
  color: var(--mute);
  font-size: .92rem;
}
.pj-desk {
  max-width: 62ch;
  margin: 1rem 0 0;
}
.pj-tags {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}
.pj-tags span {
  padding: .25rem .8rem;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 99px;
  font-size: .9rem;
}
.pj-tim {
  margin: 0;
  color: var(--ink);
}
.pj-info .btn {
  margin-top: 1.5rem;
}

/* ===== Layar kecil: menu jadi baris yang bisa digeser ===== */
@media (max-width: 820px) {
  .pj-wrap {
    grid-template-columns: minmax(0, 1fr);
  }
  .pj-side {
    position: static;
  }
  .pj-list {
    display: flex;
    gap: .6rem;
    overflow-x: auto;
    padding-bottom: .5rem;
    scrollbar-width: none;
  }
  .pj-list::-webkit-scrollbar {
    display: none;
  }
  .pj-item {
    width: auto;
    white-space: nowrap;
  }
  .pj-kt {
    display: none;
  }
  .pj-nav {
    display: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .pj-head,
  .pj-detail.ganti {
    animation: none;
  }
}